Ноябрь 29, 2015 Запись была обновлена
Создание презентаций на HTML — симпатичная презентация HTML
Всё еще создаете презентации в PowerPoint? Хочу показать вам альтернативный и более интересный способ создания презентаций с помощью библиотеки Javascript. С помощью данной библиотеки вы можете создавать очень необычные презентации HTML, выбирать понравившиеся эффекты перехода, выбирать тему оформления из уже имеющихся (их всего 8), увеличивать любой элемент презентации, вставлять «вертикальные»(слайды между левым и правым слайдом) слайды, фоновые переходы, а также многое другое. Всего не рассказать, поэтому переходите в полную новость и смотрите пример моей презентации.
Пример презентации находится ниже (также ее можно скачать и начать изменять под себя):
Смотреть примерСкачать
Создание презентаций на HTML
Создание презентаций на HTML будет осуществляться с помощью дополнительной библиотеки, которая называется Reveal.js. В этой статье мы рассмотрим лишь основные возможности этой библиотеки, которые позволяют и без того создавать потрясающие презентации.
Для начала работы нам необходимо скачать все необходимые библиотеки и стили — отсюда. Архив состоит из следующих папок:
- css — папка со всеми необходимыми стилями.
- js — полная и уменьшенная версия плагина Reveal.js.
- plugin — дополнительные библиотеки, которые отвечают за подсветку синтаксиса, увеличение элемента и другие.
- lib — дополнительные css, js, шрифты.
Сейчас мы можем подключить необходимые стили и плагины к нашей презентации. Между тегами <head> подключите понравившуюся тему оформления(default, sky, beige, simple, serif, night, moon и solarized.). Какой стиль как выглядит вы можете увидеть в виде миниатюр ниже:
То есть, если вы хотите подключить тему оформления «Sky», необходимо прописать следующее:
1 2 | <link rel="stylesheet" href="css/reveal.min.css"> <link rel="stylesheet" href="css/theme/sky.css" id="theme"> |
Перед закрывающим тегом </body> необходимо вставить следующий код:
1 2 | <script src="lib/js/head.min.js"></script> <script src="js/reveal.min.js"></script> |
HTML разметка
В статье я расскажу о трех основных типах слайдов, но вы можете брать презентацию и переделывать под себя из уже готовых. Для того чтобы вставить новый слайд, в HTML необходимо добавить следующий код:
1 2 3 4 5 6 7 8 9 | <div class="reveal"> <div class="slides"> <section> <h1>Заголовок</h1> <h3>Подзаголовок</h3> <p>Описание</p> </section> </div> </div> |
Сейчас у нас присутствует один слайд. Каждый слайд это отдельный блок <section>. Внутри слайда можно использовать обычные HTML теги для размещения и позиционирования элементов.
Сейчас рассмотрим «вертикальные» слайды. «Горизонтальные» слайды вы можете просматривать нажимая на стрелочки «влево» и «вправо», а вертикальные — «вниз» и «вверх». Чтобы вставить несколько таких слайдов необходимо дважды написать тег <section> как на примере ниже:
1 2 3 4 5 6 | <section> <section>Вертикальный слайд 1</section> <section>Вертикальный слайд 2</section> <section>Вертикальный слайд 3</section> <section>Вертикальный слайд 4</section> </section> |
Идем дальше. Сейчас рассмотрим как создать появление элементов на этой странице — посмотреть.
Для этого необходимо воспользоваться атрибутом class=»fragment» как на примере ниже:
1 2 3 4 5 6 7 8 9 | <section> <section id="fragments"> <h2>Поэлементное появление</h2> <p>Нажмите стрелочку "Далее", чтобы увидеть следующий элемент!</p> <p class="fragment">Текст 1</p> <p class="fragment">Текст 2</p> <p class="fragment">Текст 3</p> </section> </section> |
Далее рассмотрим оформление цитат. Пример вы видите на изображении:
Для такого отображения в HTML пишем:
1 2 3 4 5 6 7 8 9 10 11 | <section> <h2>Оформление цитат</h2> <p> Например, текст из моего урока: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"> “Сегодня мы будем иметь дело со слайд-шоу...”</q> или в виде блока: </p> <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">“Например, когда человек смотрит какую-либо вещь в интернет-магазине, то, как правило, он максимально увеличивает изображение, чтобы разглядеть товар, который он хочет приобрести. И только после этого он совершает покупку.” </blockquote> </section> |
И последние действие которое нужно сделать чтобы HTML презентация заработала — добавляем следующий код также перед закрывающим тегом </body>:
1 2 3 4 5 6 7 8 | <script> Reveal.initialize({ controls: true, progress: true, history: true, center: true, }); </script> |
Это основные настройки, которые позволяют создать самую простую презентацию.
Вывод
Мне этот плагин очень понравился, так как он позволяет создавать простые и в то же время красивые презентации. Также презентацию можно смотреть используя клавиатуру (стрелочки «влево», «вправо», «вверх» и «вниз»). Вот плюсы и минусы, которые я выделил. Создание презентаций на HTML не так уж и сложно!
Плюсы:
- + презентации не перенасыщены эффектами
- + быстрое изменение стилей
- + вертикальные слайды (я думаю они заслуживают отдельного внимания)
- + увеличение определенного элемента
- + поэлементное появление
- + подсветка синтаксиса
- + разместить онлайн
Минусы:
- — необходимо знать HTML (хотя бы основы)
- — не очень легкое подключение дополнительных функций (увеличение, подсветка кода) для обычного пользователя
Думаю этим плагином вполне можно заменить (в плане функционала вряд ли 🙂 ) PowerPoint при создании презентации. Жду ваше мнение об этом плагине!
Успехов!
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Думал действительно нашел что то подобное для разнообразия с PowerPoint но ничего подобного.Это надо быть програмистом чтоб что то сделать с теми кодами и где это все писать.Думаю что не в Ворде же.Да и вообще в Поинте я могу создать видео полноценное,а здесь это предложение не для простого человека.
Петр, вы правы, и я писал об этом в статье в минусах, правда знать нужно лишь основы HTML. Но прежде чем говорить что это сложно — попробуйте создать и вы увидите что всё достаточно понятно. 🙂
вот сервис для создания презентаций по типу как в повер поинт http://slides.com/
Очень полезная информация!
Думаю,что намного проще,чем PowerPoint ,да и легче изменить,если что то не понравилось,можно просто переписать текст или вставить другую картинку.
Юрий, в четверг выйдет статья как сделать эту же презентацию не вникая в код HTML.
Добрый день, спасибо за проделанную работу, очень хороший проект.
Такой вопрос появился у меня, я планирую перенести Текстовый квест к себе на сайт.
Проблема в том что нужно умение скрывать посещенные ссылки, a:visited имеет ограниченные стилевые изменения в следствии чего максимум что можно сделать это посещенная ссылка под цвет фона. В крайнем случае можно конечно сделать для каждой части игры свою страницу, но это получается слишком массивно, пока ищу более удобные варианты. Может вы знаете такие ?
Здравствуйте, Денис! Ведь элемент можно убрать со страницы с помощью CSS свойства
display:noneи свойстваvisible:hidden. Первое свойство полностью убирает элемент со страницы как будто его там и не было, а второе — оставляет под него место но делает его полностью прозрачным (не путайте со свойством opacity).Да , есть такое свойство, к сожалению с префиксом visited доступны только несколько стилей — и это цвета всего лишь и все. Можете попробовать или почитать спецификацию HTML\CSS, я уже пробовал это все =\
Спасибо вам! Теперь похвастаюсь своей призентацией учителю информатики
Рад что вам пригодился такой вид презентаций. 🙂
Я не давно начал плотно изучать, данная презентация нафиг не нужна для повер пойнта,!! Это просто офигенный иструмент для продаж!!
Если вам не лень разобраться в этом — тогда да, а в онлайне это еще и хороший способ сделать свою продающую страницу. 🙂
Добрый день, Юрий! не всегда есть возможность подключения к интернету, есть ли возможность сохранения прези на свой компьютер? Спасибо!
Здравствуйте, Наталья! Конечно есть возможность сохранить презентацию на компьютер. Для этого нажмите на кнопку «Скачать» в начале статьи, затем разархивируйте и можете отредактировать ее.
Классная штука 😎
Случайно нарвался на данную презентацию ! Огромное спасибо разработчику! Для презентации не спорю отличная штука! Но я взял за основу данный скрипт для создания сайта визитки и скажу вам великолепно получилось, адаптивет и работает на всех устройствах! Еще раз огромное спасибо!!
Спасибо за материалы. Единственный вопрос, как тут обстоит дело с поддержкой шрифтов? Судя по демо презе русские шрифты отображаются не супер круто.
Денис, Вы можете использовать любые шрифты. Данные шрифты не поддерживают кириллицу.
здравствуйте. можно ли использовать вашу презентацию в качестве слайдера?
Виктория, можно и для этого ее использовать.
Подскажите, а как вашу презентацию показать на экране телевизора? Там поддерживается наверно только видео или ppt формат. Есть способ экспортировать презентацию в видео или слайды?
Добрый день, Екатерина!
Вы можете снять в виде скринкаста видео (например, Camtasia с большим количеством кадров в секунду, чтобы анимация была плавной) и затем просмотреть на телевизоре.
Добрый день.
Интересный проект.
Как можно сделать размер слайда(секции) больше?