--- tags: ulla disqus: hackmd --- # ULLA: Universal Language Learning App :male-student::female-student::iphone: ![](https://i.imgur.com/Fbo8YgL.gif) <!-- ![logo](https://i.imgur.com/B2lSYMb.png =150x) --> Цель данного проекта - предоставить любому человеку ==возможность создать свой интерактивный учебник для изучения языка==, в виде приложений для: - Android, - iOS, - Web, который можно распространять через: - Google Play, - AppStore, - ссылки на сайт. От вас требуется лишь разместить контент в определенном порядке, понятном для программы. ## Теория. Структура приложений в общем Большинство приложений, которые вы видели за свою жизнь, состоят из текстов и файлов, которые: - **стилизованны**, - картинки имеют схожие - размеры и положение, - тексты - шрифты, цвета и выделение, - разные типы страниц - отступы и интервалы между элементами - **собраны в определенную структуру** - главное меню - оглавление, - настройки пользователя, - профиль с аватаром и вашими данными, - **откликаются на ваши действия по предсказуемым сценариям** - меню выдвигается/задвигается при нажатии на ![menuIcon](https://www.materialui.co/materialIcons/navigation/menu_black_24x24.png), - ночная/дневная тема перключаются при нажатии на :sunny::waning_crescent_moon: - при долгом нажатии всплывает подсказка :speech_balloon: ## Практика. Наша структура ### Текст Весь текст учебника находится в одном файле `content.md`. Из него генерируется всё приложение: - информация на обложке, - главное меню, - страницы (главы) с подразделами. По своей сути `content.md` - это простейший текст с заголовками трёх уровней, выполненных разметкой markdown. Количество решеток говорит об уровне заголовка. Вот пример такого файла [^*]: ``` # English language basic textbook author: John Doe level: beginner language: english website: textbook-site.com ## Unit 1 ### words I am You are He is She is It is a student a journalist a driwer a nurse a table ### phrases I am a student. You are a journalist. He is a driwer. She is a nurse. It is a table. ## Unit 2 ### words smart famous fast kind big small ### phrases I am a fast driver. You are a kind nurse. He is a famous journalist. She is a smart student. It is a big table. It is a small table. ``` Заголовок первого уровня (#) - это название вашего приложения/учебника/курса. Абзац под ним - дополнительная информация о нём, разделенная двоеточием. [^**] Заголовки второго уровня (##) - это страницы/главы. По ним формируется главное меню программы. При нажатии на них открывается соответствующая глава (отдельный урок). Заголовки третьего уровня - это разделы урока. В нашем примере этими разделами урока являются Слова и Фразы. [^***] ### Аудио и картинки ``` /content content.md /images /words 001-001.jpg ... 098-036.jpg /audios /words 001-001.mp3 ... 098-036.mp3 /phrases 001-001.ogg ... 098-022.mp3 ``` По желанию вы можете добавить картинки и аудио к каждому слову и фразе учебника. Поместите их в папку `/content`, разделяя по типам (`/images`, `/audios`) и подразделам урока `/words`, `/phrases`. Вы можете добавить свои папки по мере необходимости (`/grammar`, `/exercise`), главное, чтобы они совпадали с заголовками 3-го уровня в `content.md`. При именовании файлов придерживайтесь правила: 1) первые 3 знака - порядковый номер главы 2) дефис (-) 3) порядковый номер слова/фразы внутри подраздела. `/images/words/098-036.jpg` --> в `98` главе к `36` слову раздела `words` будет прикреплена эта картинка. То же самое касается аудио. Оно будет проигрываться при нажатии на слово или фразу. Вам нужно только сохранить его под нужным названием/адресом и положить в папку с соответствующим разделом. ### Переводы Скопируйте файл `content.md` и переименуйте его в `content.ru.md` или `content.en_UK.md`. Далее замените всё содержимое скопированного оригинала на перевод, кроме названий подразделов учебника. В нашем примере это было `### words`, `### phrases` - они должны оставаться без изменений, т.к. к ним привязаны адреса слов и фраз внутри уроков. Выше мы привели пример файла `content.md`, вот так будет выглядеть его перевод на русский, это будет файл `content.ru.md`: ``` # Учебник английского языка author: Джон Доу level: начинающий language: английский website: textbook-site.com ## Урок 1 ### words я (есть) ты (есть) он она это студент журналист водитель медсестра стол ### phrases Я (есть) - студент. Ты (есть) - журналист. Он - водитель. Она - медсестра. Это - стол. ## Урок 2 ### words умный известный быстрый добрый большой маленький ### phrases Я - быстрый водитель. Ты - добрая медсестра. Он - известный журналист. Она - умная студентка. Это - большой стол. Это - маленький стол. ``` ## Продолжение. Технические вопросы Мы максимально упростили работу составителя учебника, чтобы можно было сосредоточиться только на материале, не отвлекаясь на программирование. Но, чтобы самостоятельно создать файл приложения, готовый для загрузки в магазины (Google Play, AppStore) всё-таки придётся немного коснуться и программирования. Вам понадобится: - Установить 3 программы - Познакомиться с "коммандной строкой" и не испугаться её - Запустить их в определенном порядке Продолжение: :arrow_right: **[ULLA: Техническая часть :hammer_and_wrench: :gear: ](https://hackmd.io/@aparus/ulla-tech-part-ru)** [^*]: Отступы не обязательны (тут сделаны для наглядности) [^**]: Указать язык особенно важно в том случае, если ему соответствует особое направление (справа налево) или шрифты/размеры, сильно отличаются от латинских шрифтов. По этому полю автоматически будут выставлены соответствующие стили и форматирование. [^***]: Вы можете добавлять свои разделы, например Упражнения, Грамматика и т.д. Если вы хотите к ним привязывать картинки и аудио, то вам нужно добавить соответствующие папки в `/content/images`, `/content/audios`.