PowerPoint > HTML5

Постановка задачи

Растет потребность людей и компаний иметь удобные инструменты для создания таких презентаций, которые можно смотреть в Интернете посредством любого браузера. Желательно, чтобы это были не примитивные слайдеры, прокручивающие картинки, а проигрыватели, работающие по стандартам MS PowerPoint, классического приложения для создания презентаций. То есть, чтобы была навигация по слайдам, поддерживались разные эффекты переходов между слайдами, анимация объектов на слайде, интерактивность со зрителем (кнопочки), медиа (аудио, видео), гиперссылки.

Есть пара удобных программ для создания HTML5-презентаций с нуля, например, ActivePresenter - это редактор, в нем презентация и создается, и публикуется в HTML5. У нас эта программа уже описана. В данном обзоре ставится другая задача - описать способы быстрой конвертации PPT или PPTX, т.е., презентаций уже созданных в PowerPoint, в "формат" HTML5. Как и многое в IT мире, интересные нам инструменты делятся на офлайновые и онлайновые.

Десктопные программы для конвертации PowerPoint в HTML5

MS PowerPoint. Справедливости ради надо сказать, что в ранних версиях в самой программе PowerPoint при сохранении презентации можно было выбрать формат htm, но в современных версиях этот выбор пропал. Есть способ его реанимировать:

    1. Нажмите Alt+F11, чтобы вызвать интерфейс VBA.
    2. Нажмите Ctrl+G, чтобы вызвать панель Immediate.
    3. В панели Immediate, наберите одну из строк (в кавычках ниже укажите свои пути к файлам):
      ActivePresentation.SaveAs "c:\tmp\PowerPoint-to-HTML5\Pres.htm", ppSaveAsHTML, msoFalse
        или
      ActivePresentation.SaveAs "c:\tmp\PowerPoint-to-HTML5\Pres.mht", ppSaveAsWebArchive, msoFalse
    4. Нажмите Enter.

У вас спросят, куда сохранять...

Разница между первым и вторым вариантом в том, что в первом случае будет создан набор файлов html, css, js, шрифтов, медиа, а во втором случае весь этот зоопарк файлов будут заключен в один файл mht.

Теперь о результате. Он небросок. Есть меню слайдов, состоящий из заголовков (если заголовков нет, то просто номера). Анимации, интерактивности, гиперссылок нет.

ActivePresenter. От этой удобнейшей программы никуда не деться, если речь заходит об интернет-презентациях. В деле СОЗДАНИЯ с нуля - она номер один. Но в деле конвертации PowerPoint > HTML5, не лучшая, но и не худшая. Да, в ней открывается презентация PowerPoint, все слайды на месте, все объекты на месте, опубликовать в HTML5 можно одной кнопкой. НО могут теряться некоторые анимации, интерактивности, гиперссылки. Зато в опубликованном web-приложении есть меню, состоящее из названий слайдов, есть проигрыватель слайдов, что неплохо. Тем не менее, загруженную в ActivePresenter презентацию можно довести до ума и на нужные объекты навесить утерянную анимацию и интерактивность, наладить гиперссылки. Однако, это время.

Articulate Storyline. Многофункциональный редактор, который позволяет создавать учебный интерактивный контент и презентации с нуля. При импорте готового PPTX и последующем экспорте в HTML5 ссылки и анимации слайдов и элементов сохраняются. Импорт довольно корректный. Для возможности импорта в системе должен быть установлен MS PowerPoint. Есть экспорт не только в HTML5, но и в SCORM.

HelpXplain. PowerPoint-подобный редактор презентаций, в котором можно создавать онлайн-презентации. Поддерживается импорт из PowerPoint с сохранением всего контента слайдов, включая ссылки. Но теряется анимация переходов и объектов, что можно заново наладить инструментами программы, которые мало чем отличаются от Poweroint-инструментов, а в некоторых проявлениях и превосходят их.

Adobe Captivate. Продвинутая программа для создания электронных обучающий курсов и тестов. В нее можно загрузить готовую презентацию PowerPoint и пересохранить в HTML5 с сохранением всех анимаций и добавлением проигрывателя. Так как, это редактор, то загруженную презентацию можно чем-то обогатить инструментами программы перед конвертацией.

Интегрированные в PowerPoint надстройки

HTML5Point. Это не коробочное решение, а плагин к PowerPoint. Требуется, чтобы на вашем компьютере был установлен MS Office не ниже 2002. После инсталляции в интерфейсе PowerPoint появляется панель HTML5Point с заветной кнопкой сохранения в HTML5. Результат отличный (СМ. ПРИМЕР) - сохраняются все анимации, интерактивности, гиперссылки. Презентация управляется в специальном проигрывателе. Адаптация под разрешение экрана.

Избавляемся от артефактов триальной версии:
1. Заменяем Первую картинку лого, отрисованную в base64 в файле \data\pres\scriptInit.js :
Что меняем: начинается: iVBORw0KGgoAAAA - это в самом начале; заканчивается: AAAAASUVORK5CYII= - это было перед первой фиг. кавычкой {
На что меняем: R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
Это моя картинка с прозрачным фоном.
2. Редактируем Вторую картинку лого на нижнем слое. Файл: \data\pres\sb1.jpg
3. Ищем и заменяем гиперссылку: http://www.digitalofficepro.com/powerpoint/powerpoint-to-html5-converter.html которая закодирована в base64 и обволакивает лого внизу справа холста слайдов:
В файле \data\pres\scriptInit.js находим контекст, который следует после следующей второй фиг. кавычкой { :
WzY2LDIzMyw0NjQsNDc3LCdodHRwOi8vd3d3LmRpZ2l0YWxvZmZpY2Vwcm8uY29tL3Bvd2VycG9pbnQvcG93ZXJwb2ludC10by1odG1sNS1jb252ZXJ0ZXIuaHRtbCdd меняем на свой url в кодировке base64, мой такой:
WzY2LDIzMyw0NjQsNDc3LCdodHRwOi8vd3d3Lm5ld2FydC5ydSdd
4. Иногда возникает логотип на случайных слайдах на фоне в разных местах. Это редактируется в графических файлах, отвечающих за бэкграунд слайда в папке \data\pres.
5. Если какие-то координаты каких-то элементов чуть сдвинулись в результате конвертации - не беда. В файле \data\pres\slideVault.js их можно найти и отрегулировать значения left и top. Так, у меня по вертикали всегда перебор с текстами, набранными Roboto Condensed. C другими шрифтами нормально.

iSpring Suite. Модуль для конвертации, который встраивается в PowerPoint в виде отдельной панели. Согласно информации от компании-разработчика поддерживаются все возможные эффекты переходов (48), почти все виды анимации объектов (189 из 199), всё оформление, интерактивность, гиперссылки...
Бонус для жадных: iSpring Suite позволяет добавить 4 уровня защиты: водяной знак, пароль, ограничение доступа к презентации по времени и домену.

Adobe Presenter. Это также надстройка над PowerPoint. С помощью нее можно конвертировать презентацию в HTML5 с сохранением текста, фигур, аудиоэлементов и анимации в первоначальном виде. Можно также превратить слайды PowerPoint в электронные курсы и опросы.

Онлайновые сервисы для конвертации PowerPoint в HTML5

DigitalOfficePro. Бесплатный сервис с отличным результатом конвертации, НО ставит свой логотип (кстати, это лого HTML5Point, значит эти технологии работают на одном движке). Испытал на PPT и PPTX. Отлично: есть проигрыватель, анимации, ссылки, интерактив.

Избавляемся от логотипа:
Меняем в файле data/common/script.js контекст:
  "u(oo,'src','data:image/png;base64,'+y.i);"
на такой:
  "u(oo,'src','data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');"
Этим действием я поменял картинку с лого на картинку с прозрачным фоном.
Дизайн слайдов находится в data/pres/slideVault.js - можно править.

Zamzar. Просто сохраняет презентацию в одну html "простыню" с аккуратными слайдами. Бесплатно. Гиперссылки сохранены. Тексты вынесены отдельно, а всё оформление каждого слайда превращено в отдельные PNG.

WOWslides. Выглядит многообещающе, но надо регистрироваться. Бесплатно. Пробуйте без меня.

Udutu. Платное решение. Пишут, что все плюшки PowerPoint сохраняются. Поддерживается также SCORM нотация. Скорее всего, что-то сделают и бесплатно, но взамен требуют персональные данные - у кого они есть, добро пожаловать.

SlidegoBot. Это вишенка на торте темы конвертации PowerPoint в HTML5. Работает не типично для всего выше перечисленного. Это Телеграм-канал @SlidegoBot. Находите его в Telegram, начинаете беседу со /start, он предложит загрузить PPT или PPTX файл, присоединяете к сообщению презентацию и отправляете, он конвертирует минуту и возвращает вам в ответном сообщение две ссылки: 1. посмотреть в интернете, 2. скачать ZIP. Распаковываете ZIP. Запускаете index.html сохраняются все анимации, гиперссылки... Но нет проигрывателя. Переключаете слайды по клику мыши или стрелками на клавиатуре. Запускаете iframe_sample.html - есть слайдер! Простой в оформлении, но есть. Кто знаком с HTML и CSS его сможет преукрасить. Полезная особенность - презентация масштабируется в зависимости от размера окна браузера! Очень полезно при вставке ее на сайт через iframe. Молодцы разработчики. Код эффективный, но не навороченный, так что, презентацию можно смотреть даже в TotalCommander по Ctrl+Q при выделенном index.html.