Презентації з і html5 - краще, ніж powerpoint
Ви говорите, нормальні презентації можна робити тільки в PowerPoint? Варто подумати ще раз. Більшість наших знайомих орудують ніс, як тільки чують Powerpoint. Ви ж не хочете, щоб ваші клієнти теж орудували носом? Якщо ви хочете провести презентацію, використовуючи Android або iPad, вам навіть знадобляться додаткові інструменти, щоб ваша презентація запустилася і нормально пройшла. Так як ми веб-розробники, чому б не використати відмінну JS-платформу Reveal.js? Reveal.js дозволяє вам створювати презентації точно так же, як веб-сайт, і все, що вам залишиться зробити, так це провести презентацію за допомогою браузера.
Reveal.js: демонстраційна презентація
Reveal.js складається з одного j # 097; vascript-файлу і двох таблиць стилів. Перший стиль відповідає за основне оформлення, а другий містить в собі розмітку стандартного шаблону, від якого ви можете відступати. Цей шаблон визначає зовнішній вигляд важливих частин ваших презентацій: текст, зображення, посилання. Шаблони в Reveal.js можна без зусиль оформити під себе, так як таблиці стилів дуже добре організовані. Переходи між слайдами, якщо ви захочете скористатися цією властивістю, організовуються за допомогою CSS 3D transitions.
Розмітка слайдів на HTML5
Розмітка слайдів презентації реалізована за допомогою HTML5-елементів типу SECTION. Поверх цих секцій у нас є 2 контейнера, повідомляють платформі, де повинна починатися частина презентації в HTML-документі:
Усередині кожної секції дозволено використовувати довільний контент. Ви переміщується за допомогою клавіш стрілок. Ви можете навіть вкласти одну секцію в іншу. Таким чином, ви можете далі розвивати вашу презентацію. Використовуючи клавіші стрілок вліво і вправо, ви можете переміщатися по секціях першого рівня. Дійшовши до вкладеної секції, ви можете використовувати клавіші стрілок вниз і вгору, - вони дозволяють вам переміститися до секцій другого рівня:
Клавіша ESC переносить вас в індекс всіх слайдів, де ви можете вибрати кожен слайд по-окремо.
Індекс слайдів демонстраційної презентації
Reveal.js: можливості розширеної навігації
Якщо ви до того ж хочете реалізувати управління за допомогою миші, то можете зробити це, створивши невеликий елемент керування в презентації. Для реалізації підтримки миші, вам потрібно інтегрувати невеликий уривок коду в контейнер прямо після визначення слайдів. Ви побачите, що елемент керування відображає 4 напрямки, позначені відповідними стрілками в правому нижньому кутку браузерного вікна.
У довгих презентаціях вам, ймовірно, знадобиться рядок прогресу, щоб не загубитися або стимулювати себе говорити швидше, якщо до кінця ще довго. І знову це всього один рядок коду. Рядок прогресу відображається в самому низу по центру. Вона покаже вам етап, на якому ви перебуваєте, а також кількість слайдів.
Reveal.js: можливість використовувати Markdown
Це як раз для мене. Замість використання HTML для стилізації контенту слайдів, ви також можете використовувати синтаксис Markdown. Даний посібник було написано на Markdown. Reveal.js просто перетворює Markdown в HTML. Перевага: контент на Markdown писати набагато простіше, так як вам не потрібно буде шукати контент серед відкритих і закритих тегів.
Reveal.js - це сильна платформа для створення браузерних презентацій високого рівня. Поєднавши її з j # 097; vascript-API Fullscreen, ви зможете отримати щось більше, ніж Powerpoint.