Web-презентации #Cover h2 { margin:30px 0 0; color:#FFF; text-align:right; font-size:70px; } #Cover h3 { margin:5px 0 -30px; color:#FFF; text-align:right; font-size:50px; } #Cover p { margin:10px 0 0; text-align:center; color:#FFF; font-style:italic; font-size:20px; } #Cover p a { color:#FFF; } #Picture h2 { color:#FFF; } .slide > div { padding: 75px 100px 0px; width: 824px; height: 565px; } .slide h2 { margin: 0px 0px 30px; } Web-презентации Shower — движок презентаций с режимом просмотра слайдов
Web-презентации Shower Презентации которые мы знаем MS PowerPoint - привычно, недёшево, не всегда эффективно.
Презентации которые мы знаем OOo Impress - бесплатно, навязывемо, не всегда совместимо.
Презентации которые мы знаем Prezi - нелинейно, модно, эффектно. Пример.
Презентации которые мы знаем? SlideRocket - презентация, хранилище в облаке, 24$ в месяц.
Презентации которые мы знаем? Google Docs Презентации - облачный сервис, бесплатный.
Презентации которые мы знаем? Zoho Show - онлайн-презентация, совместимость с MS-PP, голосовые сообщения и т.д.
Особенности работы/показа Инструменты:
редактор
"вьювер"
Интерактивность:
эффекты анимации и звуковые эффекты
мультимедиа содержимое
статические слайды
Трудности демонстрации Совместимость:
сохранять в изветных форматах
сохранять в формате PDF
сохранять набором картинок
Наличие ПО на "незнакомом" компьютере:
"вьювер"
PDF-ридер
программа просмотра картинок
браузер?
Web-презентация Браузер есть везде!!!
Работа с HTML.
Работа с CSS.
Есть всё, что нужно:
текст, списки, ссылки,
картинки, видео,
переходы слайдов,
многое другое...
Сделай выбор Огромное количество систем web-презентаций: Web-based slideshow.
Для начало можно прочитать: Как делать презентацию с помощью веб-технологий?
Мой первоначальный выбор Shower на GitHub Вадима Макеева.
Shower Shower Два режима работы Список слайдов Презентация Пример создания презентации <!DOCTYPE html> <html lang="en"> <head> <title>Пример Web-презентации</title> <meta charset="windows-1251"> <link rel="stylesheet" href="shower/styles/screen.css"> </head> Тело HTML-страницы В Web-презентации как и в любой web-странице, основное содержимое заключено между тегами <body> и </body>
<body> <p>Содержимое<p> </body> В конце не забудем поставить тег </html>
Заглавие презентации <header class="caption"> <h1>Заголовок презентации</h1> <p>Подзаголовок презентации</p> </header> Титульный слайд <section class="slide cover" id="Cover"><div> <h2>Заглавный слайд</h2> <h3>первая страница презентации</h3> <img src="pictures/title.jpg" alt=""> </div></section> Любой последующий слайд <section class="slide"><div> <h2>Заголовок слайда</h2> <p>Содержимое</p> </div></section> Содержимое. Маркированный список <ul> <li>Первый пункт списка</li> <li>Второй пункт списка</li> <li>...</li> </ul> Содержимое. Нумерованный список <ol> <li>Первый пункт списка</li> <li>Второй пункт списка</li> <li>...</li> </ol> Содержимое. Вложенный список <ol> <li>Первый пункт списка</li> <li>Второй пункт списка</li> <ul> <li>Первый подпункт</li> <li>Второй подпункт</li> </ul> </ol> Содержимое. Таблица Как студенты разных курсов сдают экзамены Курс Действия на экзамене 1 курс Пишет шпаргалки и тайком использует их на экзамене 2 курс Пишет шпаргалки и открыто использует их на экзамене 3 курс Не пишет шпаргалки, на экзамене пользуется тетрадью 4 курс Не пишет в тетради, на экзамене пользуется учебником 5 курс Не пишет в тетради, не читает учебников, на экзамене предлагает преподавателю самому найти ответ в учебнике Содержимое. Таблица. Код Исходный текст таблицы показан картинкой. 3, 4, 5 курс не показаны.
Всякое Разное Заголовок <h2>Текст заголовка</h2>
Абзац <p>Текст абзаца</p>
Рисунок <img src='pictures/caption.png'>
Ссылка <a href="https://github.com">GitHub</a>
Примечание <p class="note">Текст примечания.</p>
Режим презентации Для показа слайдов в режиме презентации необходимо включить скрипт перед закрывающим тегом </body> используя следующую строку:
<script src="shower/shower.min.js"></script>
Показ презентации Открываем index.html
F5 - начать показ слайдов (с текущего слайда)
F11 - переход в полноэкранный режим
PageUp/PageDown - предыдущий/следующий слайд
Esc - завершение показа презентации