Как делать 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 будут храниться стили наших презентаций
• Необходимые сценарии javascript будут храниться в папке js, включая основной файл 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
• анимация.css
• частицы.js
• pt

Демонстрации HTML-презентаций, сделанные с помощью веб-слайдов

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

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