HTML-презентації

Мабуть кожному хто працює з комп’ютерами хоч раз в житті доводилося робити презентацію. І не важливо чи це була демонстрація фотографій з відпочинку в сімейному колі, чи виступ з великим проектом перед численною аудиторією.


Сьогодні мова йтиме не про те що писати в презентаціях, про те як їх створювати.

Отож для більшості синонімом слова „презентація“ є слово ПаверПоінт. Якщо вам близька ця теза і ви не хочете нічого міняти, то далі читати не обов’язково.

Сьогодні ж піде мова про альтернативу до класичного підходу створення презентацій.
Слід обмовитись, що цей метод підійде далеко не всім.
Але ті кому він підійде будуть щасливі:)
А щасливими будуть розробники. А особливо — веб-розробники.

ПаверПоінт від всім відомого софтверного гіганта — хороша програма для створення презентацій, для її освоєння не потрібно особливих навичок, простий інтерфейс та масса шаблонів дозволяють швидко зробити візуально досить симпатичну презентацію.

Іншими словами : ПаверПоінт — стандарт де-факто в створенні презентацій. Стоп-стоп-стоп… Який з них? 2007? Чи 2003?
Не знаю як ви, а я досі знаю чимало контор котрі досі не перейшли на новий офісний пакет, а тут вже і 2010 офіс не за горами. Отож — перша проблема: з появою нових версій — губиться єдиність формату. А буває і гірше — павер-пойнту може не бути взагалі(!). Так, трапляються такі випадки, коли на комп’ютері, приєднаному до проектора — відсутня ця програма. Ну що ж, від цього можна врятуватись використавши в’юер, або створивши виконавчий файл з презентацією. Та і це не завжди вихід.
А як бути користувачам альтернативних операційних систем?
Мало того, за ПаверПоінт, який входить в склад Майкрософтівського офісу треба ще й гроші платити.
Звісно тут на допомогу нам приходять безкоштовні офісні пакети типу ОпенОфіса, але це теж не вихід, бо в останнього в плані презентацій багато глюків, особливо з перенесенням шрифтів.

Презентації в html:
Переваги:

Переносимість
Дуже важко знайти комп’ютер без браузера, не важлива навіть операційна система, показувати слайди можна хоч на мобільному телефоні. (скоро це може стати актуально, з появою мобілок з вбудованими проекторами) Також жодних проблем не виникне з оприлюдненням презентації в вебі, оскільки вона вже являє собою веб-сторінку.

А при відключенні стилів презентація магічним чином з набору слайдів перетворюється у звичайну сторінку, яку можна без проблем переглянути і роздрукувати.

Незалежність від параметрів екрану.
Сучасні проектори мають різну розподільчу здатність, від 800х600 до 1280х1024. Часто створюючи презентацію, ви наперед не знаєте, на чому вона буде відображена, і те що презентація була розрахована на екран з іншими параметрами призводить до зниження її читабельності та якості відображення.
Хтмл-презентації позбавлені цього недоліку завдяки можливості масштабування як засобами броузера, так і спеціальними властивостями CSS, зокрема такою як „@media projection“

Можливість підправити в будь який момент
Для редагування презентації не потрібно жодного додаткового софту, достатньо простого блокноту. Це часто рятує в екстренних ситуаціях.

Малий розмір.
Вручну написаний хтмл-код зазвичай матиме менший розмір, ніж машинно згенерований XML (формати МС-Офіс2007 та ОпенОфіс)

Звичні технології html+css. Всі їхні можливості і гнучкість
Як на мене, сучасні презентаційні пакети сильно втрачають в силі, коли вам замість вбудованого шаблону потрібно використати свій дизайн. На хтмл+цсс зараз можна зробити все що завгодно, плюс якщо у вас/вашого продукту є веб-сайт, то для оформлення презентації можна використати дизайн сайту, адаптувавши його під ваші потреби.

Окрім цього, якщо ви презентуєте веб-продукт, ви запросто можете в слайд презентації вставити наглядну демонстрацію вашого проекту, або наприклад з допомогою додаткового джаваскрипту чи флеш зробити сторінку інтерактивною

Зворотня сторона медалі:

Потрібна підготовка
Людині непідготовленій буде важко редагувати таку презентацію, а от веб-розробнику — навпаки, не доведеться навіть вилазити зі звичного серидовища і розбиратися з монструозними пакетами. Також існують інструменти автоматичної генерації хтмл-презентацій.

Важко запхнути все в один файл
Невеличкий недолік — презентація складається з набору файлів (хтмл-код, зображення, файли стилів) тож замість одного файлу отримуємо теку.
Та все ж не забувайте про можливість створення mht-архівів, які нівелюють цей недолік (і ускладнюють можливість редагування).

Немає прямої інтеграції з іншими офісними програмами.
Вставити в презентацію діаргаму з можливістю пізнішого корегування значень, якщо ви не спеціаліст по canvas+javascript буде складніше:).

Відсутність або мінімум анімацій при зміні слайдів
А хто сказав що це не долік? Це якраз плюс! Усі професійні презентації робляться без гламурних ефектів переливання та накладання слайдів

Тепер конкретно про технології.

Наразі, найпоширенішими є три фреймворки для створення html-презентацій
W3C Slidy, OperaShow, S5.
Усі вони надають приблизно один набір можливостей.

Для себе я вибрав W3C-Slidy через зручні хоткеї, відсутність зайвих ускладнень. Плюс — це міжнародний стандарт html-презентацій.

OperaShow — власна розробка OperaSoftware. Саме на її базі будуються усі презентації цієї компанії. ЇЇ основними перевагами є відсутність Джаваскрипту та зручний генератор презентацій (в даний момент чомусь не працює) який дозволяє створювати їх людям без знань html та css. Недоліком ОпераШоу є те що працює він найкраще з Оперівським браузером, а в інших браузерах можуть виникати несподіванки.

S5 — проект основою якого був попередній фреймворк, оптимізований до повної крос-браузерності (довелось застосувати джаваскрипт). ОпераСофтвер пропонує затвердити його як стандарт замість W3C-Slidy. Поки що їй це не вдається:)

Робота з презентаціями
Дуже просто. Всі слайди знаходяться всередині однієї хтмл-сторінки. Кожен слайд являє з себе окремий блок-елемент:

<div class="slide">
<h1>Заголовок нашого суперського слайду</h1>
<p>Текст слайду</p>
<ul>
<li>Елемент списку</li>
<li>Ще один елемент списку</li>
</ul>
</div>

Оформлення виконується з допомогою CSS

Можна використовувати усі можливості html та css.

Також в фреймворках існують додаткові css-класи для елементів що з’являються поступово та інших смаколиків.

Зразки презентацій:

W3Slidy (офіційна презентація)
http://www.w3.org/Talks/Tools/Slidy

(Більш обіграні стилі та прийоми почергової появи)
http://www.w3.org/2006/02/woa/

S5 (офіційна презентація)
http://meyerweb.com/eric/tools/s5/s5-intro.html

(Симпатична презентація про python співробітників Яндексу)
http://softwaremaniacs.org/blog/wp-content/rit/

OperaShow
(Офіційна презентація)
Як презентація працює тільки в Опері, або якщо у вас є проектор.
http://www.howtocreate.co.uk/operaStuff/operaShowPresentation.html

Додатково по темі:

Самі робимо презентацію без фреймворків. (Англ)

W3C Slidemaker — генератор презентацій від W3C