вторник, 24 сентября 2013 г.

Создание HTML-презентаций в Composite C1

Совсем недавно один из участников сообщества выпустил интересный пакет расширения. С помощью этого пакета содержимое веб-страницы можно превратить в слайд-шоу в стиле PowerPoint.

Для этого используется специальные теги, которые разбивают содержимое страницы на слайды. Причем слайды могут быть как горизонтальными, которые можно листать кнопками "вправо"/"влево", так и вертикальными, или вложенными, которые можно листать кнопками "вверх"/"вниз".

Посмотреть это в действии можно здесь: http://lab.hakim.se/reveal-js

Сам пакет интегрирует в Composite C1 RevealJS HTML Presentation Framework, джаваскриптовый фреймворк, который как раз и превращает специально размеченный HTML в презентацию.

Установка пакета


Установить пакет можно, как и любой другой, из "Доступных пакетов" в разделе "Система":

Система / Пакеты / Доступные пакеты / CphCloud / HolisticWare.Layout.Presentations.RevealJs

Создание презентации


После установки пакета вам нужно будет изменить HTML-код страницы, которую вы хотите превратить в презентацию со слайдами.

Так как разметка страницы - не очень сложная, то можно это сделать вручную. Второй вариант - воспользоваться сторонним инструментом для создания своей презентации, скопировать получившийся HTML и вставить его на страницу.

Создание презентации, редактируя код существующей страницы


Страница должна быть создана на основе специального шаблона, который добавляется после установки пакета.

Каждый слайд заключается в теги <section></section>. Для вложенных (вертикальных) слайдов теги <section></section> нужно размещать в родительских тегах <section></section>.

Все это заключается в теги <div class="reveal"><div class="slides">...</div></div>.
  1. Откройте страницу на редактирование.
  2. Замените ее шаблон на "HolisticWare.Layout.Presentations.RevealJS".
  3. Переключитесь в режим редактирования кода.
  4. Разместите содержимое страницы по слайдам, с помощью тегов <section/>.
  5. Все слайды заключите в  <div class="reveal"><div class="slides"></div></div>.
Пример:

<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
  <div class="reveal">
    <div class="slides">
      <section>
        <p>
          <!-- Это первый слайд презентации -->
        </p>
      </section>
      <section>
        <p>
          <!-- Это второй слайд презентации -->
        </p>
      </section>
      <section>
        <section>
          <p>
            <!-- Это третий слайд презентации, который имеет вложенные слайды -->
          </p>
        </section>
        <section>
          <p>
            <!-- Это первый вложенный (вертикальный) слайд -->
          </p>
        </section>
        <section>
          <p>
            <!-- Это второй вложенный (вертикальный) слайд -->
          </p>
        </section>
      </section>
      <section>
        <p>
          <!-- Это четвертый слайд презентации -->
        </p>
      </section>
    </div>
  </div>
</body>
</html>


Использование сервиса http://slid.es для генерации HTML-презентаций


  1. Зайдите в http://slid.es (можно воспользоваться вашими Google или Facebook-аккаунтами).
  2. Создайте новый набор слайдов (deck).
  3. Добавляйте слайды, горизонтальные и вертикальные, нажимая соответствующую кнопку "+".
  4. Сохраните презентацию. Она будет публичной. (Для приватной презентации вам нужен платный аккаунт.)
  5. Экспортируйте получившуюся презентацию и скопируйте ее HTML-код.

Теперь в админке Composite C1:
  1. В разделе "Контент" создайте страницу.
  2. Замените ее шаблон на "HolisticWare.Layout.Presentations.RevealJS".
  3. Переключитесь в режим редактирования кода.
  4. Между тегами <body></body>, вставьте теги <div class="reveal"></div>.
  5. Внутри вставленных тегов вставьте HTML-код презентации.
При сохранении или форматировании вставленного кода могут возникнуть ошибки валидации. Просто исправьте их. Например, полученный код использует <br>, а не <br/>.

После сохранения и публикации страницы, ее можно смотреть в браузере как слайд-шоу.
Темы: ,

1 комментарий:

Подписаться на: Комментарии к сообщению (Atom)