Как да правим HTML презентации с уеб слайдове

В свят, в който покажете нашите идеи в интернет Става все по-необходимо и там, където разнообразието от инструменти ни води до създаване на невероятни презентации, които в много случаи в крайна сметка са несъвместими с някои медии, без съмнение, HTML презентации те ще продължат да бъдат универсалната алтернатива в тази област.

Но за никого не е тайна, че създаването на красиви HTML презентации може да отнеме много време и да изисква известни познания по HTML, CSS и в някои случаи JavaScript. От тези проблеми възниква отличен инструмент, наречен уеб слайдове.

Какво е webslides?

Трябва да го наречем по някакъв начин "рамка" с отворен код, създадена от Хосе Луис Антунес, което ни позволява създаване на 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 презентации с уеб слайдове

Има 2 основни предимства при използването на уеб слайдове, които споменаваме по-долу:

• Кодът е чист и мащабируем. Той също така включва интуитивно маркиране с използването на най-популярните номенклатури. Не е необходимо да използвате класове или да прекалявате с влагане.
• Всеки <section> в #webslides представлява слайд. Така че разбирането на страници е изключително просто.

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

По същия начин можем да направим вертикални слайдове, добавяйки вертикален стил

Класове, които съставляват CSS в уебсайта

• Типография: .text-landing, .text-data, .text-intro ...
• Цветове на фона: .bg-basic, .bg-apple, .bg-blue ...
• Фонови изображения:. Background,. Background-center-bottom ...
• Карти: .card-50, .card-40 ...
• Гъвкави блокове: .flexblock.clients, .flexblock.metrics ...

Разширяване до уеб слайдове

webslides ни позволява да добавяме нови стилове и функционалности, за това например можем да добавим някои от следните ресурси:

• Unsplash
• animation.css
• частици.js
• pt

Демонстрации на HTML презентации, направени с уеб слайдове

Можете да видите поредица от демонстрации на HTML презентации, направени с уеб слайдове тук. По същия начин, когато изтегляте рамката, можете да получите достъп до кодирането на всяка от тези демонстрации.

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