Обзор инструментов для создания презентаций на основе HTML
Я недавно озадачился поиском инструмента для создания слайдовых презентаций, которые можно было бы просмотреть в браузере. И хотя существуют такие варианты как SlideShare и Speaker Deck, позволяющие конвертировать слайды форматов PowerPoint или PDF в онлайновые слайды, есть также куча библиотек, наборов и API для создания собственных нефлешевых полноэкранных адаптивных презентаций. Обычно такие презентации основаны на HTML5, используют JavaScript и/или jQuery и требуют наличия современного браузера. Но есть среди них и попроще с более широкой поддержкой браузеров. Ниже представлен список всех, что мне удалось найти, с кратким описанием для каждого.
Ни одним из пунктов списка я не пользовался и мало что о них знаю, но мне захотелось разместить этот список здесь (без особого порядка следования) на будущее, если кому-то потребуется найти что-то подобное.
Fathom.js | Fathom.js на GitHub
«Создавайте слайдшоу на HTML, оформляйте их при помощи CSS и управляете ими через JavaScript на основе jQuery. После этого Fathom.js даже позволяет быстро и легко синхронизировать видео вашей презентации. Fathom.js имеется встроенную навигацию при помощи мыши, клавиатуры и полосы прокрутки и предлагает простой API для создания собственных интефейсов.»
CSS-based Slideshow System | CSSS на GitHub
«Простой фреймворк для создания презентаций при помощи современных веб-стандартов.»
impress.js | impress.js на GitHub
«Вам не кажется, что презентация, сделанная для современных браузеров, не должна копировать ограничения классического слайдшоу? Вам хотелось бы произвести впечатление на вашу аудиторию при помощи потрясающих визуальных эффектов? Этот инструмент для создания презентаций вдохновлен идеей prezi.com и основан на технологиях трансформирования и переходов CSS, используемых в современных браузерах.»
5lide
Кажется, именно этот слайдер использовали для слайдшоу на HTML5rocks
reveal.js | reveal.js на GitHub
«reveal.js это простой в использовании, основанный на HTML инструмент для создания презентаций. Вам потребуется современный браузер с поддержкой 3D-трансформирования CSS, чтобы увидеть результат во всей красе.»
3D-Cube-Slideshow на GitHub
«Создание презентаций с использованием 3D-трансформирования и переходов CSS в качестве навигации между слайдами. Содержит презентацию на тему качества кода JavaScript.»
Slidedown | Slidedown на GitHub
«Создавайте слайды с подсветкой синтаксиса, используя Markdown.»
DZSlides | DZSlides на GitHub
«DZSlides — одностраничный шаблон для создания презентаций на HTML5 и CSS3»
deck.js | deck.js на GitHub
«Библиотека JavaScript для создания современных презентаций. deck.js достаточно гибкий инструмент, чтобы позволить продвинутым пользователям CSS и JavaScript изготавливать сугубо индивидуальные презентации, но он также предлагает шаблоны и темы, при помощи которых новички смогут сделать стандартное слайдшоу.»
html5slides на Google Code | Демо html5slides
«Шаблон для слайдов на HTML5 от Google»
Slippy | Slippy на GitHub
HTML слайды с подсветкой синтаксиса, дополнительными слайдами и многим другим.
HTML Slidy
Слайдшоу на HTML и XHTML.
Scrolldeck | Scrolldeck на GitHub
«Плагин на jQuery для создания прокручивающихся презентаций» с анимацией, полноэкранными изображениями паралаксингом.
S5 | Статья об S5
Старейший инструмент для создания слайдшоу от Ерика Мейера. «S5 это слайдшоу основаное целиком на XHTML, CSS и JavaScript. При помощи одного файла вы можете запустить полноценное слайдшоу, а так же иметь версию, подготовленную к печати.»
Shower | Shower на GitHub
«Кроссбраузерный шаблон для HTML-презентаций.»
Shining | Shining на GitHub
«Отличные презентации на HTML + JS + CSS.»
Luminescence | Luminescence на Google Code
«Отличные презентации на HTML + JS + CSS.»
Squeenote | Squeenote на GitHub
«Способ для ботанов показывать презентации перед другими ботанами.»
Landslide | Landslide на GitHub
Вариант, похожий на 5lide, о котором говорилось выше. «Создает презентацию на основе HTML5-слайдшоу.»
POW | POW на GitHub
«Экспериментальный инструмент для презентаций на HTML5. Создавайте простые, убедительные презентации при помощи лишь HTML и JavaScript.»
Slides | Slides на GitHub
«Меня уже достало использовать Keynote и Powerpoint для создания и показа презентаций. Я веб-разработчик, ёшкин кот, могу же я делать все на HTML?!»
jmpress.js | jmpress.js на GitHub
Оригинал статьи и автор
Ни одним из пунктов списка я не пользовался и мало что о них знаю, но мне захотелось разместить этот список здесь (без особого порядка следования) на будущее, если кому-то потребуется найти что-то подобное.
Fathom.js
Fathom.js | Fathom.js на GitHub
«Создавайте слайдшоу на HTML, оформляйте их при помощи CSS и управляете ими через JavaScript на основе jQuery. После этого Fathom.js даже позволяет быстро и легко синхронизировать видео вашей презентации. Fathom.js имеется встроенную навигацию при помощи мыши, клавиатуры и полосы прокрутки и предлагает простой API для создания собственных интефейсов.»
CSSS — CSS-based Slideshow System (Система слайдшоу на основе CSS)
CSS-based Slideshow System | CSSS на GitHub
«Простой фреймворк для создания презентаций при помощи современных веб-стандартов.»
impress.js
impress.js | impress.js на GitHub
«Вам не кажется, что презентация, сделанная для современных браузеров, не должна копировать ограничения классического слайдшоу? Вам хотелось бы произвести впечатление на вашу аудиторию при помощи потрясающих визуальных эффектов? Этот инструмент для создания презентаций вдохновлен идеей prezi.com и основан на технологиях трансформирования и переходов CSS, используемых в современных браузерах.»
5lide
5lide
Кажется, именно этот слайдер использовали для слайдшоу на HTML5rocks
reveal.js
reveal.js | reveal.js на GitHub
«reveal.js это простой в использовании, основанный на HTML инструмент для создания презентаций. Вам потребуется современный браузер с поддержкой 3D-трансформирования CSS, чтобы увидеть результат во всей красе.»
3D-Cube-Slideshow
3D-Cube-Slideshow на GitHub
«Создание презентаций с использованием 3D-трансформирования и переходов CSS в качестве навигации между слайдами. Содержит презентацию на тему качества кода JavaScript.»
Slidedown
Slidedown | Slidedown на GitHub
«Создавайте слайды с подсветкой синтаксиса, используя Markdown.»
DZSlides
DZSlides | DZSlides на GitHub
«DZSlides — одностраничный шаблон для создания презентаций на HTML5 и CSS3»
deck.js
deck.js | deck.js на GitHub
«Библиотека JavaScript для создания современных презентаций. deck.js достаточно гибкий инструмент, чтобы позволить продвинутым пользователям CSS и JavaScript изготавливать сугубо индивидуальные презентации, но он также предлагает шаблоны и темы, при помощи которых новички смогут сделать стандартное слайдшоу.»
html5slides
html5slides на Google Code | Демо html5slides
«Шаблон для слайдов на HTML5 от Google»
Slippy
Slippy | Slippy на GitHub
HTML слайды с подсветкой синтаксиса, дополнительными слайдами и многим другим.
HTML Slidy
HTML Slidy
Слайдшоу на HTML и XHTML.
Scrolldeck
Scrolldeck | Scrolldeck на GitHub
«Плагин на jQuery для создания прокручивающихся презентаций» с анимацией, полноэкранными изображениями паралаксингом.
S5
S5 | Статья об S5
Старейший инструмент для создания слайдшоу от Ерика Мейера. «S5 это слайдшоу основаное целиком на XHTML, CSS и JavaScript. При помощи одного файла вы можете запустить полноценное слайдшоу, а так же иметь версию, подготовленную к печати.»
Shower
Shower | Shower на GitHub
«Кроссбраузерный шаблон для HTML-презентаций.»
Shining
Shining | Shining на GitHub
«Отличные презентации на HTML + JS + CSS.»
Luminescence
Luminescence | Luminescence на Google Code
«Отличные презентации на HTML + JS + CSS.»
Squeenote
Squeenote | Squeenote на GitHub
«Способ для ботанов показывать презентации перед другими ботанами.»
Landslide
Landslide | Landslide на GitHub
Вариант, похожий на 5lide, о котором говорилось выше. «Создает презентацию на основе HTML5-слайдшоу.»
POW
POW | POW на GitHub
«Экспериментальный инструмент для презентаций на HTML5. Создавайте простые, убедительные презентации при помощи лишь HTML и JavaScript.»
Slides
Slides | Slides на GitHub
«Меня уже достало использовать Keynote и Powerpoint для создания и показа презентаций. Я веб-разработчик, ёшкин кот, могу же я делать все на HTML?!»
jmpress.js
jmpress.js | jmpress.js на GitHub
Инструмент не только для презентаций, но очень клевый. «Плагин jQuery, позволяющий построить сайт на бесконечном холсте.»
Что-то еще?
Я хотел бы, чтобы этот список стал исчерпывающим. Если вам известны другие инструменты для создания презентаций на основе HTML, напишите в комментариях, я их добавлю. И если вы являетесь владельцем упомянутых в списке инструментов и хотите предоставить краткое описание возможностей, я с удовольствием его добавлю.Оригинал статьи и автор
Комментарии
Отправить комментарий