Лекции для Android стажировки

Создание лекций

1. В корне проекта создать копию template.html и назвать её lecture ## - Android - name.html
2. Добавить ссылку на этот файл в index.html
3. Добавить матеиралы лекции
4. Для медиа файлов и изображений необходимо создать свою директорию в /lecture/...

Редактировать лекции можно двумя способами: Markdown Style и HTML Style.

• Внешние *.md и *.html-файлы необходимо размещать в /lecture/...
• *.html и *.md добавляются к секции через атрибуты data-external="path" и data-markdown="path" соответственно.
• Лекции построены на базе фреймворка Reveal.js
• Reveal.js shortcuts
  • Советую листать лекции через space(пробел). Обратно мотать через shift + space, так удобнее, потому что стрелочки могут пропустить вложенные слайды.
• Кроме документации можно посмотреть на примеры из template.html. Структура:
  • Первыми идут примеры типовых слайдов (титул, заголовок секции, текст, картинки, код)
  • Картинки можно использовать даже в полноэкранном режиме
  • Листингу кода можно менять размеры и добавлять последовательные анимации появления
  • Затем идет сложная вёрстка слайдов (используется HTMl)
  • В последнем размере описано как всё это сделано со ссылками на слайды
  • На каждом слайде добавлена ссылка "Как это сделано". Она перенесёт вас в последний раздел. Клик по заголовку вернёт обратно.

Дополнительные возможности

Фреймворк был расширен для более точного позиционирования контента на слайде

Не используйте px для размеров изображений! Плохо скейлится на мелкие экраны. Используйте что-то вроде width="70%" height="auto" или em единицы измерений. Для нашей лекции 1em ~ 42px.

• .half-left, .half-right для разделения слайда на 2 части
• .third-left, .third-center, third-right на 3 части
• .underfloating необходимо добавить к блоку под колонками, чтобы добиться правильного позиционирования.
• .center — центрирование по высоте, .center-horizontal — центрирование по ширине. Можно использовать как для <section>, так и для <div>
• .tiny, .small, .large — для блока <code>, чтобы разместить большой листинг и сделать акцент на одной строчке
• Мелкие участки кода можно приблизить с помощью Ctrl (или Alt) + mouseclick. Клик по слову — увеличит слово. Клик по области рядом — увеличит абзац

Запуск лекции

Вообще html страничка запустится и без всяких скриптов. Если вся верстка находится в html — заработает без проблем, если же верстка находится во внешних markdown файлах в директорри lecture — тогда необходимо запустить локальный сервер.

1. [!ОБЯЗАТЕЛЬНО!] Инициализировать зависимости — npm install — один раз для проекта
2. Запустить сервер — npm start, можно изменить порт через npm start -- --port=8000
   • Запустится сервер по адресу localhost:8000, можно открыть по IP напрямую или с другого компьютера.
   • Все изменения автоматически трекаются и появляются если обновить страницу презентации
   • Можно разрабатывать и сразу смотреть, что получается
3. Все готово? push в master
4. Через минуту лекции доступны в публичном доступе на Github Pages

Git Workflow

1. Создаем свою ветку
2. Создаем лекцию по инструкции, попутно ведем разработку в своей ветке
3. Когда все готово - заливаем в мастер
4. Иногда вливаем мастер к себе, чтобы не было сложных мерджей в будущем

Добавление Speaker Notes

Специальный режим для спикера открывается по клавише s. т.к. лекции в публичном доступе — заметки могут прочитать все желающие, будьте аккуратней в своих формулировках :)

• в HTML заметки добавляются через тэг <aside class="notes">. Можно добавить атрибут data-markdown для оформления заметки
• в Markdown заметки добавляются после строчки Note:, изменить этот маркер можно через атрибут data-separator-notes=""
• подробнее в документации

Экспорт лекций в pdf

• Открыть лекцию через Google Chrome и добавить к адресу ...lecture.html?print-pdf
• нажать Ctrl + P и выбрать сохранение в PDF

Установка NPM

1. Скачать npm
   • прописать путь до него в PATH
2. Скачать grunt-cli — npm install -g grunt-cli