html-slides — это шаблон для создания слайдов презентации, которые запускаются непосредственно в веб-браузере. Чтобы увидеть такие слайды в действии, посмотрите демонстрационное слайд-шоу.
Особенности презентации
Функции слайда
Чтобы построить презентацию из слайдов, на компьютере должен быть установлен Node.js.
Презентацию можно показывать в любом из основных веб-браузеров (Firefox, Chrome, Edge, Safari, Opera и т. д.) и не требует какого-либо дополнительного программного обеспечения.
Загрузите или клонируйте репозиторий html-слайдов и начните создавать презентацию внутри папки template . Вам не нужно ничего за пределами этой папки, и вы можете переименовать или переместить ее.
Папка template содержит следующие файлы и папки:
slides содержат ваши слайды и их медиа-ресурсы.index.build.html содержит список слайдов.deploy собирает ваши слайды в один файл index.html .index.html — это сгенерированная презентация.style содержит файл стиля CSS ( style.inc.css ) и шрифты. Здесь вы можете настроить шрифты и цвета по умолчанию.skeleton содержит код HTML, CSS и JavaScript, позволяющий превратить ваши слайды в презентацию. Вам не нужно ничего здесь изменять. Слайд обычно представляет собой файл с несколькими строками HTML-кода или файл SVG. Для слайдов, содержащих только видео или только изображения, скелет предоставляет предопределенный HTML-код.
Файл index.build.html содержит заголовок и последовательность слайдов презентации:
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
slide ( 'slides/title.inc.html' ) ;
slide ( 'slides/intro.inc.html' , 'Introduction' ) ;
slide ( 'slides/system.inc.svg' , 'System' ) ;
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ;
slide ( 'slides/next-steps.inc.html' , 'Next steps' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >Первая и последняя строка импортируют скелет презентации и должны оставаться как есть. Каждый слайд принимает следующие параметры:
Расширение файла определяет тип слайда:
.inc.html — это HTML-слайды (см. ниже)..inc.svg — это слайды SVG (см. ниже)..mp4 , .webm или .ogg — это слайды только для видео. В результате на слайде отображается видеоплеер. Лучше всего они смотрятся в «черном» стиле..png , .jpg или .jpeg — это слайды, содержащие только изображения. Подходящие стили — «черный» (чтобы разместить изображение на черном фоне) и «обложка» (чтобы покрыть весь слайд).Слайды подготовлены размером 1000 х 600 пикселей. В режиме презентации они масштабируются в соответствии с размером дисплея.
Простой HTML-слайд ( slides/slide-name.inc.html ) с маркерами выглядит следующим образом:
< div class =" text left w600 " >
< h1 > Slide title </ h1 >
< ul >
< li > This is bullet 1 </ li >
< li > This is bullet 2 </ li >
< li > This is bullet 3 </ li >
</ ul >
</ div >
< img class =" right w400 " src =" slides/jigsaw.jpg " >На слайде справа (400 пикселей) отображается изображение (тег img), а оставшиеся 600 пикселей слева используются для заголовка слайда (тег h1) и пунктов списка (тег ul, тег ol, тег li).
Шаблон содержит примеры расположения текста и изображений, а также вставки таблиц.
Формат SVG ( slides/slide-name.inc.svg ) подходит для слайдов с векторной графикой, например диаграмм или схем. Такие слайды можно рисовать с помощью Inkscape или любого другого программного обеспечения, способного сохранять или экспортировать файлы SVG.
Размер SVG-документа (страницы) должен составлять 1000 x 600 пикселей ( width="1000" height="600" ). Код SVG подвергается некоторой очистке при импорте. В частности, удаляются специфичная для Inkscape информация и идентификаторы по умолчанию (например, rect1098 ).
Чтобы перестроить презентацию ( index.html ), откройте окно терминала (командную строку) и запустите
./deploy/run
Скрипт продолжает искать изменения и при необходимости перестраивает index.html . Чтобы выйти из него, нажмите Ctrl-C в окне терминала.
Сценарий развертывания грубо проверяет ваш HTML-код. В частности, он предупреждает, если теги закрыты неправильно.
Чтобы начать презентацию, нажмите F11 , чтобы включить полноэкранный режим, и p , чтобы переключиться в режим презентации . Используйте клавиши со стрелками влево/вправо (или Page Up / Page Down ) на клавиатуре для перехода к предыдущему/следующему слайду. На мобильных устройствах можно проводить пальцем влево/вправо.
Кнопка меню в правом верхнем углу (три полоски) открывает указатель слайдов. Щелчок по любому слайду переключает его на этот слайд.
Если во время презентации вы активируете другое окно (или iframe внутри слайдов), кнопка меню станет красной, указывая на то, что клавиши со стрелками (для перехода к следующему слайду) не работают. Нажатие этой красной кнопки снова переведет презентацию в фокус и заставит работать клавиши со стрелками.
Многие браузеры позволяют распечатывать слайды. Каждый слайд помещается на странице формата А4 в альбомной ориентации.
Подключив проектор в качестве внешнего экрана, вы сможете отображать презентацию на обоих экранах.
Для этого откройте одну и ту же презентацию в двух отдельных окнах браузера (одного браузера). Разместите одно окно на главном экране, а другое окно на внешнем экране (в полноэкранном режиме). В двух окнах всегда будет отображаться один и тот же слайд.
Обратите внимание, что интерактивный контент не всегда может быть синхронизирован.
Презентацией, запущенной на ноутбуке, можно управлять удаленно с помощью мобильного телефона. Для этого требуется подключение к Интернету, поскольку управляющие сообщения отправляются через сервер (https://viereck.ch/remote/).
Чтобы настроить это:
Видео вставляются с помощью тега video :
< video controls width =" 640 " >
< source src =" slides/video.mp4 " type =" video/mp4 " >
< a href =" slides/video.mp4 " > Play video with external player </ a >
</ video >Веб-браузеры поддерживают различные форматы видео. MP4 или видеоформат MPEG-4/H.264 поддерживается практически всеми веб-браузерами. Самые популярные браузеры также воспроизводят файлы WebM (video/webm) или Ogg/Theora (video/ogg).
Аналогичным образом аудиофайлы вставляются с использованием тега audio .
Слайд с полноэкранным видео можно просто создать из индекса слайдов:
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ; Указатель слайдов может быть структурирован с использованием topic и subTopic :
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
topic ( 'Topic 1' ) ;
subTopic ( 'Subtopic 1' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
subTopic ( 'Subtopic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
topic ( 'Topic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >Темы и подтемы отображаются только в указателе слайдов. Они не влияют на слайды или ход презентации.
Файлы JavaScript с именем slides/slide-name.inc.js автоматически вставляются вместе с соответствующим слайдом. JavaScript позволяет создавать продвинутые слайды с симуляциями, анимацией, интерактивными элементами и т. д.
Простой сценарий слайда может выглядеть следующим образом:
const counter = document . getElementById ( 'fancySlideCounter' ) ;
let count = 0 ;
slide . onSlideAppears = function ( ) {
count += 1 ;
counter . textContent = 'This slide has appeared ' + count + ' times so far.' ;
} ;
slide . onSlideDisappears = function ( ) {
// ...
} ; Код выполняется при загрузке презентации. slide — это ссылка на соответствующий слайд, элемент <div> . Когда слайд появляется на экране, вызывается функция onSlideAppears . И наоборот, onSlideDisappears вызывается, когда слайд исчезает. Рекомендуется запускать анимацию только тогда, когда слайд виден. Обратите внимание, что одновременно могут быть видны несколько слайдов.
Чтобы избежать конфликтов имен переменных и функций, код JavaScript слайда помещается в анонимную функцию. Сгенерированный слайд имеет следующую структуру:
< div class =" slide " >
<!-- The slide's HTML or SVG content -->
< script >
( function ( ) {
const slide = document . currentScript . parentElement ;
// The slide's JavaScript code
} ) ( ) ;
</ script >
</ div > Слайды по-прежнему могут взаимодействовать друг с другом через объект window :
// In slide A
let fancyState = ... ;
window . getFancyState = function ( ) {
return fancyState ;
} ;
// In slide B
const state = window . getFancyState ( ) ;
... Идентификаторы элементов должны быть уникальными на всей HTML-странице. Поэтому к слайдам следует добавлять уникальное имя слайда в качестве префикса ( fancySlide в приведенном выше примере).
Интерактивные слайды могут синхронизировать свое состояние с другими экземплярами посредством удаленного управления (см. выше). Обратите внимание, что это предназначено только для небольших объемов данных, таких как несколько чисел, идентификатор элемента или короткий текст.
В следующем примере используется sendState и прослушиватель состояния для синхронизации содержимого текстового ввода:
const input = document . getElementById ( 'fancySlideInput' ) ;
slide . onSlideAppears = function ( ) {
remote . addStateListener ( onStateChanged ) ;
} ;
slide . onSlideDisappears = function ( ) {
remote . removeStateListener ( onStateChanged ) ;
} ;
// Receive a state update
function onStateChanged ( state ) {
if ( ! state . fancySlide ) return ;
input . value = state . fancySlideText ;
}
// Send a state update when the text changes
input . oninput = function ( ) {
remote . sendState ( 'fancySlideText' , input . value ) ;
} ; 
