Я очень уважаю Microsoft PowerPoint. Это может быть чрезмерное использование и побуждает людей создавать шокирующие слайд-шоу, но это мощно и весело. У меня только одна критика: все презентации PowerPoint выглядят одинаково. Неважно, как вы меняете цвета, фон, шрифты или переходы — каждый может заметить PPT за милю.
К счастью, теперь у нас есть еще один вариант: HTML5. Или, более конкретно, шаблоны HTML5 на основе JavaScript с CSS3 2D / 3D переходами и анимацией. Преимущества включают в себя:
- быстрее добавить несколько тегов HTML, чем использовать интерфейс WYSIWYG
- Вы можете обновить презентацию с помощью основного текстового редактора на любом устройстве.
- файлы могут быть размещены в Интернете; вам больше никогда не нужно терять PPT
- Вы можете легко распространять презентации без просмотра программного обеспечения
- это не PowerPoint, и ваша аудитория будет поражена вашим техническим мастерством.
Следует признать, что HTML5 презентации не так мощны:
- вам нужны навыки веб-кодирования
- позиционирование, эффекты и переходы более ограничены
- немногие системы предлагают примечания к слайдам (немного неудобно показывать их отдельно)
- раздавать раздаточные материалы сложнее
Но это не обязательно убийственные недостатки — вы вынуждены концентрироваться на содержании презентации, а не на легкомысленных настройках и ужасной анимации.
Вот лучшие системы презентаций HTML5, которые я нашел. Нажмите на заголовки, чтобы просмотреть демонстрацию — большинство работает лучше всего в Chrome, Safari или Firefox…
Reveal.js
Это мой нынешний фаворит. Слайды выглядят великолепно и могут быть расположены горизонтально или вертикально. Также легко изменить CSS, чтобы добавить свои собственные эффекты — мне удалось добавить элементарную заметку, сделав именно это.
Слайды определены в отдельных тегах section
Impress.js
Impress.js впечатляет. На него повлиял рекламный ролик prezi.com ; слайды расположены в трехмерном пространстве, и ваш вид вращается и поворачивается соответственно. Я не буду пытаться объяснить это дальше — просто попробуйте, и вы поймете, что я имею в виду.
Слайды определяются в элементах div Это единственный недостаток; это немного сложно визуализировать и определить эти значения. Продолжайте, однако, и вы сможете создавать потрясающие и оригинальные слайд-шоу.
Шаблон Google Slides
Как и следовало ожидать, у Google есть собственный шаблон презентации HTML5 (а также шаблон, предлагаемый в Документах Google ). Это довольно простой по сравнению с Reveal.js или Impress.js; он ограничен переходами слайдов справа налево и эффектами постепенного появления, но все равно выглядит великолепно.
Слайды определены в тегах article
Загрузите файл шаблона Google Slides …
Deck.js
Deck.js был одной из первых систем представления HTML5. Это похоже на предложение Google — возможно, немного красивее, но без эффектов слайд-перехода.
Слайды определены в семантически правильных sectionarticle Также есть документированный API, поэтому можно создавать свои собственные расширения.
Душ
Shower — это презентационная система Вадима Макеева из Opera Software. Хотя это одна из более простых систем, она быстра и хорошо работает во всех браузерах. Особенно круто вид миниатюры слайдов (нажмите ESC).
Главный недостаток душа — это запутанный HTML. Слайды определяются в sectiondivdivheader Немного больше разработок может облегчить использование.
Другие достойные упоминания:
- S5 — Простая система слайд-шоу на основе стандартов ( скачать )
- CSSS — система слайд-шоу на основе CSS ( скачать )
- Слайды ( скачать )
- HTML5Rocks (нет прямых загрузок, но вы можете скопировать источник)
Я не упомянул вашу любимую систему презентаций HTML5 …
Если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как HTML5 и CSS3 для реального мира .
Комментарии к этой статье закрыты. У вас есть вопрос о HTML5? Почему бы не спросить об этом на наших форумах ?