Как делать 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 позволяет нам добавлять новые стили и функции, например, для этого мы можем добавить некоторые из следующих ресурсов:

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

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

Демо-презентации HTML

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


Содержание статьи соответствует нашим принципам редакционная этика. Чтобы сообщить об ошибке, нажмите здесь.

3 комментариев, оставьте свой

Оставьте свой комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

*

*

  1. Ответственный за данные: Мигель Анхель Гатон
  2. Назначение данных: контроль спама, управление комментариями.
  3. Легитимация: ваше согласие
  4. Передача данных: данные не будут переданы третьим лицам, кроме как по закону.
  5. Хранение данных: база данных, размещенная в Occentus Networks (ЕС)
  6. Права: в любое время вы можете ограничить, восстановить и удалить свою информацию.

  1.   Аллан Фуэнтес сказал

    Очень хорошо, я нахожу инструмент довольно интересным, хотя, на мой вкус, detect.js довольно прост в использовании, поскольку это инструмент, основанный на веб-технологиях, таких как HTML, CSS и JS, с базовыми знаниями этих технологий вы можете сделать свою презентацию вроде намного интереснее.

    Привет.

  2.   анонимному сказал

    Приятно отмечать столько оригинального контента
    https://www.genbeta.com/web/crea-bonitas-presentaciones-en-html-de-forma-rapida-y-sencilla-con-webslides

    1.    Lagarto сказал

      Скрываясь в анонимном профиле, очень легко критиковать и говорить то, что вы хотите, но, к сожалению, понятно, что ваш коэффициент не перестает выходить за пределы того, что могут видеть ваши глаза, эта статья полностью написана мной на основе официальной документации и обзор, который я сделал на инструменте. Какое из них дать вам представление, я узнал об этом благодаря тому, что это приложение с наибольшим количеством голосов за последние дни на github https://github.com/jlantunez/webslides... Однако для нас очень важно, чтобы вы нашли время, чтобы поискать какой-нибудь другой сайт, где они также пишут о том же, что и мы, чтобы вы могли подать заявку на вакансию рецензента, которая, я думаю, останется только соискателем потому что я сомневаюсь, что у вас есть критерий для выбора чего-то подходящего.