X
Юрий Немец

Создание презентаций на 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">
        &ldquo;Сегодня мы будем иметь дело со слайд-шоу...&rdquo;</q> или в виде блока:
    </p>
    <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">&ldquo;Например,
        когда человек смотрит какую-либо вещь в интернет-магазине, то, как правило, он максимально увеличивает изображение, чтобы разглядеть 
        товар, который он хочет приобрести. И только после этого он совершает покупку.&rdquo;
    </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 при создании презентации. Жду ваше мнение об этом плагине!


Успехов!

С Уважением, Юрий Немец

Категории: jQuery