Реактивные HTML-презентации с использованием Reveal.js, Gist и OpenShift

Reveal.js — это основа представления на основе HTML. Вам просто нужен браузер с CSS 3D-преобразованиями . Это означает, что Chrome, Firefox, Safari, Opera и IE 10-11 поддерживаются. Это также обеспечивает хороший запасной вариант для других устаревших браузеров. Проверьте живую демонстрацию самостоятельно .

Этот технический совет покажет, как легко создавать презентации на основе Reveal.js, используя Gist и OpenShift .

Почему Гист?

Это позволяет разделить слой представления (Node.js в OpenShift) и слой данных (источник HTML в Gist), а также обеспечить их распределение. Вы, возможно, не сможете показывать демонстрации, используя это, по крайней мере, пока, но, по крайней мере, вам не нужно беспокоиться о сбоях ноутбука. Вы, конечно, можете хранить исходные тексты вашей презентации в любом месте, например, на github или в каком-либо другом репозитории, но вам необходимо будет соответствующим образом изменить структуру шаблонов.

Почему OpenShift?

Полная настройка Reveal.js требует установки Node.js, Grunt и некоторых других зависимостей. И даже тогда ваши слайды доступны только локально. Чтобы сохранить его полностью распределенным, важно, чтобы в облаке работали Node.js и другие зависимости. OpenShift — это полиглот с открытым исходным кодом PaaS от Red Hat, который позволяет запускать Node.js в облаке. Вы также можете выбрать любую другую среду размещения Node.js, но это то, что я чувствую себя наиболее комфортно.

Познакомьтесь с Gist-Reveal.it

Райан ( @ryanj ) создал Gist-Reveal.it — службу шаблонов для создания слайд-шоу с открытым исходным кодом, которая позволяет легко создавать, редактировать, представлять и публиковать слайды Reveal.js в Интернете.

Отличная особенность этого фреймворка в том, как один браузер может быть настроен как вещатель, а все остальные — как получатели Это позволяет докладчику (или вещателю) обмениваться URL-адресом слайдов и позволяет зрителям (или получателям) следить за слайдами на своем любимом устройстве. Это может быть очень полезно, особенно в условиях конференции.

Слайд-шоу Reveal.js на основе Gist обеспечивают быстрое введение в настройку. Этот технический совет будет использовать Gist-Reveal.it + OpenShift и покажет вам, как настроить собственную персональную среду хостинга для красивых HTML-слайдов.

Давайте начнем!

• Зарегистрируйтесь в OpenShift на openshift.com/app/account/new . Отсутствие кредитной карты и бесплатная учетная запись дают вам 3 устройства, где каждое устройство имеет 1 ГБ диск и 0,5 ГБ памяти. Для размещения вашего веб-интерфейса для Reveal.js достаточно свободного оборудования.
• Образцы слайдов доступны на сайте slides-milestogo.rhcloud.com . Нажмите на кнопку в левом нижнем углу, чтобы создать новое приложение OpenShift. Это приложение будет клонировать исходный код из gist-reveal.it и использовать его в качестве основы для вновь созданного приложения.
• Создайте новый список и скопируйте присвоенный ему уникальный идентификатор. Например, для сущности, созданной по адресу gist.github.com/arun-gupta/9ac2cea40c302986a8e3, уникальным идентификатором является «9ac2cea40c302986a8e3».
• Зарегистрируйте новый ключ API на GitHub по адресу github.com/settings/applications . Запишите «Идентификатор клиента» и «Секрет клиента». Оставьте «URL обратного вызова авторизации» пустым, все остальное просто.
• Установите инструменты OpenShift CLI и настройте их . Установите несколько переменных среды для приложения OpenShift:

  1 2 3 4

  rhc env set GH_CLIENT_SECRET=<CLIENT_SECRET> --app slides rhc env set GH_CLIENT_ID=<CLIENT_ID> --app slides rhc env set DEFAULT_GIST=<GIST_ID> --app slides rhc env set REVEAL_SOCKET_SECRET=<SUPER_SECRET_VALUE> --app slides

  Замените <CLIENT_SECRET>, <CLIENT_ID> и <GIST_ID> вашими конкретными значениями. Также обратите внимание, что «слайды» — это приложение, которое используется в этом блоге. Если имя вашего приложения OpenShift отличается, используйте его.

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

  1	http://slides-milestogo.rhcloud.com/?setToken=<SUPER_SECRET_VALUE>

  Доступ к этому URL-адресу сохраняет этот токен в локальном хранилище браузера. Обязательно измените URL, чтобы он отражал ваше конкретное приложение и домен в OpenShift. Например, имя приложения в этом случае — «слайды», а домен — «мили».

Другие значения конфигурации описаны по адресу github.com/ryanj/gist-reveal.it#application-config . Полная документация по фреймворку находится по адресу github.com/ryanj/gist-reveal.it . Наслаждайтесь!

Спасибо Райану ( @ryanj ) за помощь в настройке среды.

Я жду, какая конференция будет первой, которая предоставит темы Gist-Reveal!