---
# System prepended metadata

title: 'ULLA: Universal Language Learning App :male-student::female-student::iphone:'
tags: [ulla]

---

---
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`. 