Як робити HTML-презентації за допомогою веб-слайдів

У світі, де показати наші ідеї в Інтернеті стає все більш необхідним і де різноманітність інструментів призвело нас до створення дивовижних презентацій, які в багатьох випадках виявляються несумісними з деякими ЗМІ, без сумніву, HTML-презентації вони й надалі будуть універсальною альтернативою в цій галузі.

Але ні для кого не секрет, що створення красивих HTML-презентацій може зайняти багато часу і вимагати дещо вдосконалених знань HTML, CSS, а в деяких випадках і JavaScript. З цих проблем виходить чудовий інструмент, який називається веб-слайди.

Що таке веб-слайди?

Це називати це якось відкритим "фреймворком", створеним Хосе Луїс Антунес, що дозволяє нам створювати HTML-презентації швидко і легко. Інструмент має найважливіше для вас, щоб робити власні презентації, так само ви можете взяти одну з демонстраційних презентацій та налаштувати її на свій смак за лічені хвилини.

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

Як завантажити веб-слайди?

Щоб завантажити веб-слайди, просто виконайте наступну команду з улюбленого каталогу:

wget https://github.com/jlantunez/webslides/archive/master.zip

Ви також можете клонувати офіційний репозиторій за допомогою

git clone https://github.com/jlantunez/webslides.git

Усередині папки проекту ви отримаєте необхідні js, css та демонстраційні програми, щоб можна було легко створювати власні HTML-презентації.

Як користуватися веб-слайдами?

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

Що ми отримуємо, завантажуючи веб-слайди?

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

• У папці css зберігатимуться стилі наших презентацій
• У папці js зберігатимуться необхідні javascripts, включаючи основний webslide.js, де зроблена більша частина магії.
• Зображення та файли html демонстраційних файлів будуть збережені у папках зображень та демонстраційних програм відповідно.

webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

Створення HTML-презентацій за допомогою веб-слайдів

Є дві основні переваги використання веб-слайдів, про які ми згадуємо нижче:

• Код чистий і масштабований. Він також включає інтуїтивну розмітку з використанням найпопулярніших номенклатур. Немає необхідності користуватися класами або зайвим вкладанням.
• Кожен <section> у #webslides це слайд. Отже, пагінація надзвичайно проста.

Слайд 1  Слайд 1

Таким же чином ми можемо робити вертикальні слайди, додаючи вертикальний стиль

Класи, що складають веб-сторінку CSS

• Типографіка: .text-landing, .text-data, .text-intro ...
• Кольори фону: .bg-primary, .bg-apple, .bg-blue ...
• Фонові зображення: .background, .background-center-bottom…
• Картки: .card-50, .card-40 ...
• Гнучкі блоки: .flexblock.clients, .flexblock.metrics ...

Поширюючись на веб-слайди

webslides дозволяє нам додавати нові стилі та функціональні можливості, для цього, наприклад, ми можемо додати деякі з таких ресурсів:

• Unsplash
• animated.css
• частинки.js
• pt

Демонстраційні презентації HTML, зроблені за допомогою веб-слайдів

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

Це інструмент, який дозволить нам створювати HTML-презентації швидко і з чудовою обробкою, але також допоможе зосередитись на змісті та досягти результатів, яких ми раніше не уявляли.