Лого SiteHere.ru

Создание презентаций на HTML — симпатичная презентация HTML

Cимпатичная презентация 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.). Какой стиль как выглядит вы можете увидеть в виде миниатюр ниже:

Стили Reveal.js

То есть, если вы хотите подключить тему оформления «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 при создании презентации. Жду ваше мнение об этом плагине!


Успехов!

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

23 комментария к записи
  • Петр

    Думал действительно нашел что то подобное для разнообразия с PowerPoint но ничего подобного.Это надо быть програмистом чтоб что то сделать с теми кодами и где это все писать.Думаю что не в Ворде же.Да и вообще в Поинте я могу создать видео полноценное,а здесь это предложение не для простого человека.

     
    • Юрий

      Петр, вы правы, и я писал об этом в статье в минусах, правда знать нужно лишь основы HTML. Но прежде чем говорить что это сложно — попробуйте создать и вы увидите что всё достаточно понятно. 🙂

       
    • Is Blog

      вот сервис для создания презентаций по типу как в повер поинт http://slides.com/

       
  • Юрий

    Очень полезная информация!
    Думаю,что намного проще,чем PowerPoint ,да и легче изменить,если что то не понравилось,можно просто переписать текст или вставить другую картинку.

     
    • Юрий

      Юрий, в четверг выйдет статья как сделать эту же презентацию не вникая в код HTML.

       
  • Денис

    Добрый день, спасибо за проделанную работу, очень хороший проект.
    Такой вопрос появился у меня, я планирую перенести Текстовый квест к себе на сайт.
    Проблема в том что нужно умение скрывать посещенные ссылки, a:visited имеет ограниченные стилевые изменения в следствии чего максимум что можно сделать это посещенная ссылка под цвет фона. В крайнем случае можно конечно сделать для каждой части игры свою страницу, но это получается слишком массивно, пока ищу более удобные варианты. Может вы знаете такие ?

     
    • Юрий

      Здравствуйте, Денис! Ведь элемент можно убрать со страницы с помощью CSS свойства display:none и свойства visible:hidden. Первое свойство полностью убирает элемент со страницы как будто его там и не было, а второе — оставляет под него место но делает его полностью прозрачным (не путайте со свойством opacity).

       
      • Денис

        Да , есть такое свойство, к сожалению с префиксом visited доступны только несколько стилей — и это цвета всего лишь и все. Можете попробовать или почитать спецификацию HTML\CSS, я уже пробовал это все =\

         
  • ИЛЮШКА

    Спасибо вам! Теперь похвастаюсь своей призентацией учителю информатики

     
    • Юрий

      Рад что вам пригодился такой вид презентаций. 🙂

       
  • Андрей

    Я не давно начал плотно изучать, данная презентация нафиг не нужна для повер пойнта,!! Это просто офигенный иструмент для продаж!!

     
    • Юрий

      Если вам не лень разобраться в этом — тогда да, а в онлайне это еще и хороший способ сделать свою продающую страницу. 🙂

       
  • Наталья

    Добрый день, Юрий! не всегда есть возможность подключения к интернету, есть ли возможность сохранения прези на свой компьютер? Спасибо!

     
    • Юрий

      Здравствуйте, Наталья! Конечно есть возможность сохранить презентацию на компьютер. Для этого нажмите на кнопку «Скачать» в начале статьи, затем разархивируйте и можете отредактировать ее.

       
  • Константин

    Классная штука 😎

     
  • RA@

    Случайно нарвался на данную презентацию ! Огромное спасибо разработчику! Для презентации не спорю отличная штука! Но я взял за основу данный скрипт для создания сайта визитки и скажу вам великолепно получилось, адаптивет и работает на всех устройствах! Еще раз огромное спасибо!!

     
  • Денис

    Спасибо за материалы. Единственный вопрос, как тут обстоит дело с поддержкой шрифтов? Судя по демо презе русские шрифты отображаются не супер круто.

     
    • Юрий Немец

      Денис, Вы можете использовать любые шрифты. Данные шрифты не поддерживают кириллицу.

       
  • Виктория

    здравствуйте. можно ли использовать вашу презентацию в качестве слайдера?

     
    • Юрий Немец

      Виктория, можно и для этого ее использовать.

       
  • Катя

    Подскажите, а как вашу презентацию показать на экране телевизора? Там поддерживается наверно только видео или ppt формат. Есть способ экспортировать презентацию в видео или слайды?

     
    • Юрий Немец

      Добрый день, Екатерина!

      Вы можете снять в виде скринкаста видео (например, Camtasia с большим количеством кадров в секунду, чтобы анимация была плавной) и затем просмотреть на телевизоре.

       
  • Андрей

    Добрый день.

    Интересный проект.
    Как можно сделать размер слайда(секции) больше?

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *