Как делать презентацию с помощью веб-технологий?

    Все знают офисных монстров PowerPoint и Keynote, но почему-то мало кто с радостью в них работает. И действительно, что делать, если ты совсем не бухгалтер, а разработчик или просто гик и гораздо комфортнее чувствуешь себя в коде, чем в офисных пакетах? У меня для тебя хорошие новости: презентации уже очень давно можно делать прямо в браузере, а писать с помощью таких простых и знакомых вещей, как HTML, CSS или даже Маркдаун.

    К каждому из нас приходит момент, когда нужно донести свои мысли до других. Не просто рассказать анекдотец коллеге, не пробубнить стишок про бурю-мглою, а сообщить что-то принципиально важное, объяснить сложную идею, поделиться опытом. И если самым талантливым из нас достаточно выйти на сцену и просто быть собой, как это делают участники TED, то большинству понадобится опереться на слайды. Свой первый раз у доски с маркерами я забыл напрочь, помню только, что переврал тогда ключевую идею доклада про блочную модель CSS.






    Как это работает


    Развитие веб-технологий уже давно увело нас от сайтов-документов, где единственным развлечением было ходить по синим ссылкам. Сегодня с помощью HTML, CSS и JavaScript можно не только сделать приложение, но и даже написать интерфейс для полноценной операционной системы, как в случае с Firefox OS.

    Как это применить к презентациям? Ты просто пишешь презентацию в HTML, Маркдауне или даже в формате YAML, запускаешь результат в браузере, выходишь в полноэкранный режим и начинаешь свой рассказ. Такие презентации прекрасно слушаются пультов, позволяют анимировать переходы, вставлять картинки и видео, помимо привычного текста и списков.

    Opera Show


    Opera Show — первый формат для создания презентаций прямо в браузере. Ты можешь попробовать генератор презентаций Хокона Виума Ли. Документация в формате OSF 1.0 также доступна.

    Самой ранней попыткой делать презентации прямо в браузере была система Opera Show, которая увидела свет в 2000 году. Система основывалась на том, что браузер Opera 4.0 переключает медиатип screen на projection при переходе в полноэкранный режим. Благодаря этому можно было очень легко добавить к статье новые стили, разбивающие ее на слайды, и переключаться между слайдами кнопками и .

    <link rel="stylesheet" href="screen.css" media="screen">
    <link rel="stylesheet" href="projection.css" media="projection">
    


    Файл projection.css подключится только в полноэкранном режиме. Причем формат Opera Show работал без единой строчки JavaScript для переключения стилей или слайдов, демонстрируя всю мощь CSS и немного браузерной магии. И это неспроста: главным идеологом формата был технический директор Opera Software и изобретатель CSS Хокон Виум Ли.



    S5


    S5 — кросс-браузерное развитие идей Opera Show от Эрика Мейера, пример презентации. «S5» потому, что в полном названии целых пять букв S: Simple Standards-Based Slide Show System.

    Спустя несколько лет другой патриарх CSS Эрик Мейер расширил возможности Opera Show и опубликовал в 2004 году первую версию движка презентаций под названием. Идея переключения браузера в режим презентации в полноэкранном режиме, предложенная Opera, не нашла поддержки в других браузерах, поэтому в системе S5 Мейер использовал JavaScript для переключения стилей презентации.

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

    В дальнейшем систему S5 переписали на jQuery и назвали S6, а потом и вовсе написали генератор слайдов из вики-разметки на языке Ruby под названием S9. Но эти и другие проекты по мотивам S5 не получили развития и популярности.



    Затишье и взрыв


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

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

    CSSS


    CSSS — система слайд-шоу Лии Вероу, использующая по максимуму возможности CSS. В полном названии CSS-based SlideShow System, как и в S5, тоже много букв S.

    В 2010 году Лиа Вероу начала восхождение на олимп веб-разработки с презентации на конференции Front-Trends, для которой она специально написала движок CSSS. Презентация настолько понравилась публике, что Лиа в одночасье стала самым востребованным спикером на технических конференциях, а движок CSSS был опубликован на GitHub.

    CSSS наследует идею S5 о максимальном использовании возможностей CSS для работы презентации, однако JavaScript-составляющая движка Лии поднимается на новый уровень. К движку были написаны JavaScript-плагины: один для подсветки кода и несколько для редактирования кода прямо на слайдах. Вторая группа плагинов позволяла Лии срывать овации, вживую редактируя код примеров со слайда прямо на самом слайде. Теперь это были не просто картинки на экране, а живой интерфейс для экспериментов.

    Как и другие движки для презентаций этой волны, CSSS был совместим только с последними версиями браузеров, первое время движок Лии нормально работал только в ночных сборках ее любимого браузера Firefox. Но, как пишет Лиа, техническое окружение на конференциях всегда предполагает либо подключение собственного компьютера, либо современную версию одного из браузеров.



    Reveal.js


    Reveal.js — движок презентаций Хаким Эль-Хаттаба, привлекающий своей простотой, 3D-эффектами и специальным онлайн-сервисом для создания презентаций rvl.io.

    Дело было в 2011 году, шведский разработчик Хаким Эль-Хаттаб готовил доклад про SVG к местной конференции и так заигрался с 3D-возможностями в CSS, что построил на них простой движок для презентаций. Назвал он его тоже просто: CSS 3D Slideshow. Трехмерные эффекты и двухуровневая навигация настолько полюбились публике, что движок получил развитие под новым названием Reveal.js. Проект обзавелся не только новым именем, но и другими серьезными вещами, вроде документации, поддержки сообщества и репозитория на GitHub, однако не утратил изначальной простоты: темное поле с высветом посередине, белые буквы по центру и впечатляющие 3D-пролеты. Но Хаким не успокоился на этом и сделал целый сервис, который позволяет создавать презентации на движке Reveal.js и хранить их на сайте.

    Одна из интересных особенностей этого движка — возможность писать содержимое слайдов в формате Маркдаун. Конвертацией этого текста в HTML на лету занимается специальный скрипт.



    Impress.js


    Impress.js — движок презентаций Бартека Шопки с 3D-пролетами, развивающий подход Prezi «поверхность с идеями» с помощью открытых технологий прямо в браузере.

    Презентация движка impress.js Бартека Шопки начинается провокационно: вам демонстрируют скучные белые слайды и задают вопрос «А не устали ли вы от однообразных презентаций?» — один слайд, второй, третий… и тут, при переходе на четвертый, все меняется. Вы оказываетесь на большой поверхности, где хитрым образом разбросаны все идеи, составляющие презентацию, и переход к следующей сопровождается замысловатым пролетом, от которого захватывает дух.

    Появившийся в 2011 году движок impress.js развивает подход «поверхности с идеями» сервиса для создания презентаций Prezi и соединяет ее c новыми доступными в браузерах технологиями, используя анимацию и 3D-возможности CSS, как Reveal.js. И если Prezi — это коммерческий сервис на закрытой платформе Flash, то impress.js — это открытая библиотека, работающая прямо в браузере без плагинов и тарифных планов.



    Шаблоны Google


    Шаблон для Google I/O — это корпоративный движок для презентаций от Google, с тщательно проработанными стилями, отдельным окном для заметок докладчика. Он прекрасно подходит для технических докладов. Предыдущая версия этого шаблона выглядит менее корпоративно.

    Если тебе до сих пор кажется, что презентации в браузере — это удел технологов-одиночек, которые состязаются друг с другом в энтузиазме и любви к новым технологиям, то ты ошибаешься. Одна из крупнейших мировых корпораций Google, которая принесла в наши браузеры полноценный офис в виде Google Docs, давно экспериментировала с движками презентаций. И если для массового пользователя это обернулось возможностью создать и показать презентацию из Google Docs прямо в браузере, то технологи Google использовали несколько версий собственных движков для выступлений на конференциях Google Developer Day и Google I/O.

    Самой последней версией «корпоративного» движка презентаций Google стал шаблон, который подготовили для выступлений на ключевой конференции Google I/O 2012. Этот шаблон позволяет использовать все мыслимые типы содержимого: от простого текста и фрагментов кода до сложных таблиц и пай-чартов. Вы можете даже вывести отдельное окно браузера на второй монитор и получить на нем заметки к слайдам и обзор текущего и следующего слайдов, прямо как во взрослых настольных системах.



    Лирическое отступление


    Здесь приходит время поделиться личным опытом. Свой первый доклад ваш покорный слуга прочитал в 2007 году на конференции РИТ, а сделал его в Adobe Illustrator: это был огромный документ 1600 на 7800 пикселей, который открывался несколько минут, нещадно тормозил и в итоге печатался в PDF. Illustrator был, надо признаться, самым неудобным средством для создания презентаций, которым я когда-либо пользовался. Здесь нужно взять скорбную паузу.

    Потом была попытка воспользоваться шаблонами PowerPoint, от которых сводило зубы, недолгая интрижка с Keynote (Apple ведь не может сделать плохо, так ведь?). И в конце концов я пришел к простой мысли: если я технолог и рассказываю про технологии, про их огромную мощь и потенциал, то негоже мне использовать инструменты, противоречащие моим собственным идеям.

    INFO

    Web Standards Days — это бесплатная конференция по фронтенд-технологиям, которая проводится с 2009 года сообществом «Веб-стандарты» в Минске, Киеве, Петербурге, Москве и в других городах.

    В 2009 году сообщество «Веб-стандарты» провело в Минске первую конференцию Web Standards Days, на которой я выступал с докладом про веб-шрифты, и работало это прямо из браузера. Попытка получилась успешной, хоть и работала эта презентация по системе Opera Show, понятное дело, только в браузере Opera. Прошло два года, прежде чем этот движок развился во что-то настолько интересное, чтобы захотелось поделиться с другими.


    Shower


    Shower— мой движок презентаций с режимом просмотра слайдов, с темами, отделенными от движка, и с широкой кросс-браузерностью. Название — это игра слов: на логотипе изображен душ, но «shower» — это еще и «тот, кто показывает».

    В 2011 году на том же РИТе прозвучала премьера моего доклада «Верстка со смыслом» и впервые был продемонстрирован публике новый движок презентаций Shower. Главной фишкой движка были два режима: один со списком слайдов, второй — презентационный. Shower принципиально разделяет движок и темы оформления для слайдов, поэтому с помощью темы презентацию можно изменить до неузнаваемости.



    В комплекте с Shower идут две темы Ribbon и Bright, которые хотя и работают менее эффектно, чем пролеты Impress.js, но зато создают условия, в которых сделать плохую презентацию становится сложнее: текста на слайд помещается не очень много, он крупный и контрастный, картинки удобно вписываются во весь размер слайда. Кросс-браузерность здесь, в отличие от многих других движков, на высоте: в темах просто не используются возможности, которые не поддерживаются последними стабильными версиями популярных браузеров.

    Shower уже был замечен на конференции Fronteers, в презентациях разработчиков Яндекса, Одноклассников, Злых Марсиан и многих других. Но настоящим признанием для меня как автора стало выступление Хокона Виума Ли, автора Opera Show, на конференции SXSW 2012: Хокон использовал Shower для своего доклада.



    Заключение



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

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

    И если ты не окончательно заменеджерел и у тебя есть интерес к тому, чтобы разобраться в веб-технологиях, экспериментировать и пробовать что-то новое, то не упусти возможность попробовать браузерные презентации. А лучше напиши свой собственный движок — на зависть всему миру.

    WWW

    В Википедии есть целая статья Web-based slideshow с обзором всех систем презентации, работающих в браузере. Отдельного внимания заслуживает статья Луиса Лазариса и обзор пяти лучших систем HTML-презентаций на SitePoint.



    Впервые опубликовано в журнале «Хакер» от 05/2013.
    Автор: Вадим Макеев, евангелист компании Opera, pepelsbey

    Публикация на ISSUU.com

    Подпишись на «Хакер»




    PS Можете поделиться знаниями и интересными идеями, написав для ][? Дайте знать :). Мы платим гонорары, но это не должно быть главной мотивацией.
    Журнал Хакер
    Компания
    Реклама
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее

    Комментарии 20

      –6
      Не обессудьте, но таких постов в гугле видел немало…
        +2
        Отличная статья много нового узнал и много чего нашел для себя, что добавить в свои наработки.
        Спасибо!

        Делал подобный функционал (еще давно) для демонстрации экспортированной презентации MS PowerPoint (список слайдов jpg, png и т.д.) в браузере с управлением с клавиатуры ( icqnavigator.ru/p ).
        Можно запускать: локально, с флешки и т.д. (stand-alone HTML + экспортированные слайды-картинки рядом)
          +2
          Такие презентации хороши для веба, но для участия в конференции одна большая проблема.
          Как переворачивать слайды? Стоять над ноутбуком? Да есть решения, и для того презентацией на reveal.js я смог управлять с телефона, но неудобно, долго настраивается, а на больших конференциях в больших залах плохой Wi-Fi, потому что экран гаснет, потому что случайно прокручиваются слайды.
          Когда есть очень удобный пульт для презентаций от Logitech. (http://www.logitech.com/en-us/product/wireless-presenter-r400?crid=11)
          Аннотации: Последние версии powerpoint умеют выводить аннотации на основной экран. Де для reveal.js есть решения на телфон, но опять же неудобно, экран маленький.
          А иногда приходится выступать на чужом ноутбуке. И если ppt/pdf все ок. То перелистывание на чужой машине за 5-10 минут между презентациями не всегда настроишь.
          Решите эти две проблемы, управление указкой, вывод аннотаций(менее критично) и такие решения будут популярнее.
            –1
            Этот пульт поддерживает эмуляцию событий кнопок клавиатуры? (влево, вправо и т.д.)
              +2
              Все пульты для презентаций — это, по сути, клавиатуры с двумя (и больше) кнопками: вперёд и назад. Так что если JS в презентации слушает нажатия клавиш вперёд и назад (а также Page Down, Space и т.п.), то никаких проблем с пультами нет. У меня дома есть коллекция из пяти самых пультов — все они работают в Shower.
                0
                У Reveal.js есть форк, позволяющий управлять презентацией движениями рук в воздухе.
                Немного глючит, но для непосвящённых это выглядит волшебно :)
                  0
                  По-скольку проблем с пультами по отзывам нет, тогда все элементарно: берете скрипт по линку (см.выше..), делаете файлы-слайды и сохраняете на флешку html-ку и картинки.
                  Собстно: флешку в любой комп с браузером и F11, пульт в руки и к экрану голосить)
                  (никакого и-нета не нужно)
                  +1
                  Мне нравится сервис для показа презентаций — presentain.com/. Загружаем сделанную презентацию в удобном формате (.ppt, .pdf...).
                  При докладе просто включаем апп на смартфоне, вводим выданный номер на сайте и сразу начинаем презентацию, — на телефоне идет удобнейшее управление слайдами + запись. Потом можно расшарить запись в виде скринкаста. Классно не только то, что потом её можно скинуть, а и то, что можно себя перепроверять на предмет правильности речи и всё такое :)
                  ps. Еще классная штука — если не всем хорошо видно, можно по QR-коду или ссылке подцепить показ презентации на устройства пользователей прямо в аудитории. И, смотрю, допилили плюшек, типа вопросов из зала )
                    –1
                    Не забывайте про Slide Share
                    0
                    А как же Slippy? Демо
                      0
                      Как минимум последний слайд демки — глючный, он перехватывает управление переходом вперёд на себя, и не возвращает его обратно, если уйти назад не перебрав все «подслайды».
                        0
                        github.com/Seldaek/slippy/issues/14
                        хотел уж было написать о баге, а оказывается уже. Проект open-source, баги есть везде, главное чтобы постепенно исправлялись
                        Кстати в Shower есть похожий баг, или фича, не знаю. Если все «инлайн» итерации слайда прокрутить, дальше движок их опускает
                          0
                          Баги есть везде, но файлу с демкой больше 3х лет, а баг явный и до сих пор не исправлен…

                          Собственно говоря, я всего лишь имел ввиду, что проект скорее всего никогда не был особо популярен, а сейчас и вовсе мёртвый, так что смысла тратить нынче на него свое время нет.
                      0
                      Ещё интересный инструмент для презентаций: markdalgleish.com/projects/bespoke.js/
                        0
                        Мы несколько лет используем не только «презентации в веб», а коллаборативные гибридные-статьи презентации, когда слайды можно хоть вдвоем/втроем параллельно набросать за полчаса до выступления (и даже конференции, было дело), а потом расширять и дорабатывать их, так, чтобы получилась и читаемая статья (послать кому-либо), и ее же можно было показать в виде слайдов — если пересказываешь лично.

                        Главная фишка — все это не мертвый кусок слайдов, рожденный одним человеком в муках, разок рассказанный, и тухнущий потом, на файлопомойке или слайдшаре, а живая и коллаборативно развиваемая часть документации или базы знаний.

                        Технически, это «MediaWiki+S5», примеры таких вики-слайдов (показанных на реальных конференциях) можно посмотреть тут «Мода на коробки и фреймворки в вебе — доколе?»», «Свободное ПО и качество, или не плодите софт в неволе», не говоря уже о 100500 внутрикомпанейских выступлений для мелких совещаний.

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

                        Об этом рассказывали неоднократно, since 2010 (см. «Все блюда для интранета из MediaWiki: ВикиБлоги, ВикиПрезентации, ВикиЭкзамены и ВикиЗакладки»), но все это полезно до сих пор и вполне актуально. Рекомендую.
                        • НЛО прилетело и опубликовало эту надпись здесь
                            +6
                            Раз уж на Хабре, так дали бы ссылку на хабраюзера pepelsbey, м?
                              0
                              Спасибо за Shower, очень пригодился для выступления.
                              0
                              Adobe edge animator весьма крутая штука, а главное, бесплатная
                                0
                                Честно попробовал все сервисы, и все же остался на Prezi. Только он без проблем импортирует PDF и PPT и работает на любом устройстве. Да и интерфейс здоровский.

                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                Самое читаемое