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

коментарі:

diakvv 17.08.2009 13:36
Часто буває таке, робиш презентацію в паверпоїнті, приходиш в кімнату, логінишся під собою на презент комп запускаєш презентацію і бачиш як паверпоїнт інсталить там щось. З такими презенаціями, все було б гуд.

Може є плагіни до тогож павер поїнта які вміють зберегти презентацію в ХТМЛ?
+1meako 17.08.2009 13:42
Вірогідно, що можливість є. Ось один з варіантів.

Інша справа, що можливі втрати в якості і глюки. Я віддаю перевагу ручному верстанню.
meako 17.08.2009 13:50
Мало того, паверпойнт сам вміє зберігати презентації в ХТМЛ.

Але краще він би цього не робив. Жах.
+1pavlozahozhenko 17.08.2009 13:56
ПаверПоінт маст дай! Як простеньку альтернатива ХТМЛ-презентаціям можна юзати презентації в ҐуґлДокс, а як складну альтернативу їм же (для майстрів антипаверпоінтівського руху) - робити презентації в LaTEX.
meako 17.08.2009 13:58
Кстаті цікаво було би взнати про презентації в ЛаТеХ’у :)

Як трохи потужнішу альтернативу гуглодоківським презентаціям — 280 слайдиків
meako 17.08.2009 14:17
Щось хороші думки в голову з запізненням йдуть.
Латех суттєво програє перед хтмл в купі речей. В плані презентацій.

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

Короче, ЛаТеХ це не варіант:)
Коли є потреба у великій кількості формул, то Латех - найкращий варіант.
+2Ян Лі 17.08.2009 15:38
Підтримую щодо LaTeX.

Якщо хто не знає, готується презентація у LaTeX, а не виході - PDF. І завдяки підтримці Javascript в Acrobar Reader, можливостей там більше, ніж у PP. Ще можна врахувати, що Acrobar Reader при інсталяції звичайно інсталює й плагіни до IE та FF, так що можна й через веб презентувати.

Щодо використання для презентацій HTML, чомусь мені це не спадало на думку, а дійсно, за допомогою jQuery різні гарні переходи та інші ефекти намалювати настільки просто, що спосіб безумовно заслуговує на увагу, автору подяка.
+1klonfuture 17.08.2009 18:44
Пам'ятаю на Opera University Tour вся презентація була в Opera Show. Відтоді і почав цікавитись.
+1meako 01.09.2009 05:07
так, мене також сподвинули оперівські презентухи, а також роботи хлопців з Яндекс.Суботника.
+2kucher 19.08.2009 11:56
Інформативна стаття. Дякую. Майбутні презентації спробую зробити саме цим способом)
+1Alex Furman (masterpiecer) 19.08.2009 17:50
На Едукемпі 2008, коли приїжджав творець CSS Хакон В'юм Лі, його презентація теж бул зверстана в HTML, що дуже є гут, з тих пір часто приглядаюсь до такого варіанту створення презентацій (раніше любив PDF)
Тарас 28.08.2009 12:46
Все, наступну свою презентацію роблю на html!!!
+1tbunyk 26.08.2010 16:52
Знайшов для себе Slippy, воно має деякі переваги. Про це написав статтю подібну до вашої.

Тільки от з CSS морочитись не люблю.
meako 27.08.2010 07:11
Цікаво, типу Opera Show заточена під кросбраузерність, щоправда на момент написання статті, slippy ще не було:)

додати коментар: