Использование фреймворка для создания презентации веб-сайта

Обновлено: 05.07.2024

Начнем с этого сценария. Вам нужно создать фантастический веб-сайт для вашего клиента, вы хотите сделать это быстро, и ваш клиент надеется на то же самое.

Как насчет создания веб-сайта с нуля с помощью HTML и CSS? Это вариант, но он требует слишком много времени, не говоря уже о усилиях.

Презентации предлагают другой подход как для веб-дизайнеров, так и для разработчиков.

Что особенного в Презентациях? Читайте дальше.

1. Слайды: уникальный подход к созданию веб-сайтов

Slides – это простой в использовании продвинутый конструктор статических веб-сайтов. Он уникален в том смысле, что не похож ни на один конструктор веб-сайтов, которым вы, вероятно, пользовались раньше.

Слайды позволяют настраивать дизайн в процессе его создания. Когда у вас есть дизайн, который вы хотите, вы можете настроить его еще больше, если хотите.

Это просто вопрос выбора слайдов, которые вы хотите использовать. Затем вы можете добавить панели, функции и настройки и загрузить результат.

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

С помощью Slides 4 вы можете создавать дизайны, соответствующие последним тенденциям. Вы также можете добавить свои собственные скрипты и внедрить множество других улучшений.

2. Особенности слайдов

Мощный генератор для тяжелой работы. Генератор слайдов — это инструмент, который упрощает создание высококачественного анимированного веб-сайта. Вы можете создать адаптивный веб-сайт с поддержкой Retina за считанные минуты. Приложение дает вам возможность экспортировать готовый к использованию код.
180+ слайдов на выбор. Выберите макет для начала и комбинируйте слайды, чтобы создать веб-сайт именно таким, каким вы его себе представляли.
Мощные модули. Модули, которые легко установить и настроить, помогают сделать создание страницы быстрым и легким. Несколько мощных модулей Slides Framework делают именно это.

Разработка стала проще. Разработка становится намного более легкой задачей, если вы не начинаете с нуля. Все важные элементы уже созданы и готовы к настройке в соответствии с вашими потребностями.
Популярные интеграции. Intercom, MailChimp, Typeform, Google Maps, SoundCloud, и это лишь некоторые из них. Эта великолепная коллекция интеграций поднимет ваши возможности продаж на новый уровень.

3. Как использовать слайды

Все начинается с Генератора. Это интуитивно понятный инструмент, который сэкономит вам часы работы. Хотя с генератором легко работать, вы найдете ссылки на его руководство.

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

Выбор слайдов для использования. Это первый шаг, и выбор правильных слайдов для запуска вашего проекта не является проблемой.

Это возможно благодаря меню фильтрации, которое охватывает заголовки, функции и форму. Сюда также входят категории "цена", "видео" и другие категории.

Выбрав нужные слайды, нажмите первую из трех кнопок в правом верхнем углу.

Это позволит вам дублировать, удалять и изменять стиль слайда на минималистичный. Кроме того, вы можете перетащить их, чтобы изменить порядок.

Слайды отличные, но не обязательно полные. Чего не хватает, так это анимации. Анимация может превратить качественный веб-сайт в действительно выдающийся. Хотя у каждого слайда есть анимация по умолчанию, вы можете изменить ее, просто нажав на стиль, который вы предпочитаете использовать.

Еще несколько щелчков мышью, и вы сможете выбрать один из вариантов эффектов.

Выбор панелей. Чтобы создать отмеченный наградами веб-сайт, требуется больше, чем набор потрясающих страниц. Необходимо учитывать аспекты UX, особенно навигацию.

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

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

Настройка стилей. Эта функция позволяет вам выбирать из набора предопределенных стилей типографики. Это упрощает настройку веб-сайта в соответствии с рекомендациями клиента по брендингу.

Существует несколько настроек, связанных с кодом, которые можно выполнить для завершения проекта, например предварительная загрузка контента или оптимизация ресурсов. Можно также создать упрощенную мобильную версию вашего сайта.

Одна последняя задача: загрузка HTML-шаблона. Перед загрузкой разработанного вами шаблона на работающий веб-сайт вам необходимо его загрузить. Добавьте любые изображения или цвета, которые хочет ваш клиент, и все готово!

Почему стоит попробовать слайды прямо сейчас

Прежде чем перейти к основным причинам, по которым вам следует использовать Презентации, посмотрите это видео с генератором статических сайтов в действии:

Наилучшая причина для использования Презентации должна быть очевидна, как только мы суммируем все, что обсуждалось.

С помощью Slides вы всегда можете создавать потрясающие профессионально выглядящие веб-сайты.
Презентации — это быстро и легко. Это быстрее, чем WordPress с точки зрения скорости загрузки, и намного быстрее, чем писать HTML/CSS с нуля.
Этот конструктор страниц и веб-сайтов удивительно интуитивно понятен в использовании.
Не нужно беспокоиться о PHP, базах данных или зависимостях от сервера; они вам не нужны.
Есть большой выбор красивых настраиваемых слайдов.
Выбираете верхнюю и нижнюю панели и анимацию перехода? Выбираете стили навигации? Для этого достаточно одного нажатия кнопки.
Предварительный просмотр во время сборки — отличная экономия времени.
Ваши веб-сайты будут загружаться невероятно быстро. Поисковым системам (и пользователям) это нравится.

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

Райан Будро показывает, как начать работу с платформой презентаций Desktop.js для веб-слайд-шоу.

Несколько месяцев назад я представил короткую демонстрацию преобразования файлов презентаций в готовое для Интернета слайд-шоу с помощью JavaScript. Сегодня я собираюсь рассмотреть фреймворк для презентаций Deck.js, который предоставляет широкий спектр вариантов дизайна от простого кодирования HTML до сложных API или их комбинации.

Что такое Deck.js?

Deck.js создан Калебом Тротоном, который осенью 2011 года в течение нескольких месяцев разрабатывал инфраструктуру презентаций jQuery. Он доступен для загрузки по лицензии GPL с открытым исходным кодом и обновлениями на GitHub. Единственная цель фреймворка — создание HTML-презентаций. Слайды представляют собой базовый HTML-код и включают в себя готовые темы и шаблоны, с помощью которых вы сможете начать создавать набор слайдов за считанные минуты, даже не зная HTML. Или, если у вас есть расширенный набор навыков, вы можете создавать собственные колоды с помощью API, предоставляемого основным модулем и расширениями. Кроме того, есть лучшее из обоих миров, где вы можете взять понемногу каждый, настроить тему, взломать расширение или написать свое собственное.

Рисунок А

Соображения о Deck.js

HTML, API или лучшее из обоих миров: начните с самого простого HTML или включите полный набор API, который вы можете добавить самостоятельно.
Модуль Deck.core отслеживает состояния слайдов.
CSS определяет, как выглядят слайды и как переходить между ними.
Расширения используют основные события и методы для добавления дополнений, что позволяет авторам выступающих свободно добавлять свой контент.

Создание слайдов с помощью Deck.js

Загружаемый файл поставляется с вводным файлом index.html, который дает вам отличную отправную точку для изучения и, в конечном итоге, изменения презентаций для собственного использования. Первый слайд в HTML-коде вводной презентации отображается так, как показано в Chrome 21.0.1 на рисунке Б ниже.

Рисунок Б

Написание слайдов

Содержимое слайда — это простой HTML с классом slide. Фрагменты HTML-кода, которые я буду использовать в качестве примеров ниже, были взяты из вводного файла index.html, поставляемого с колодой.скачать js; каждый раздел с классом, равным «слайд», представляет новый слайд в колоде.

Выберите темы

Одна тема выбрана для стилей слайдов, а другая — для перехода между колодами. Темы стилей настраивают цвета, типографику и макет содержимого слайда и вызываются из таблицы стилей темы, как показано во вводном фрагменте html-кода ниже:

Другие варианты стилей, доступные для загрузки, включают швейцарский стиль (swiss.css) и неоновый стиль (neon.css).

Темы перехода определяют переходы между слайдами с помощью переходов CSS3. Менее способные браузеры прибегают к вырезкам. Таблица стилей вызывается, как показано во вступительном html-фрагменте ниже:

Другие параметры перехода, включенные в загрузку, – вертикальный слайд (vertical-slide.css) и плавный переход (fade.css).

Эти таблицы стилей являются отличной отправной точкой для создания и изменения ваших собственных стилей, что на самом деле поощряется автором.

Изменение HTML-кода введения на тему в стиле неон обновляет внешний вид демонстрационной страницы, как показано на рис. C (Chrome 21.0.1).

Рисунок C

Теперь давайте изменим тему перехода на вертикальную и заметим, как стрелки переместились с левой и правой сторон в правый верхний угол и теперь указывают вверх и вниз, как показано на рисунке D ниже.

Рисунок D

Включить расширения

Добавьте дополнительные функции в свою колоду или оставьте ее урезанной. Каталог «Основные» предоставляет вам базовые функции слайдов с навигацией со стрелками влево и вправо, но вам может понадобиться больше. Вот те, которые включены в эту колоду:

deck.goto: добавляет горячую клавишу для перехода к любому номеру слайда. Нажмите g, введите номер слайда и нажмите Enter.
deck.hash: включает внутренние ссылки внутри слайдов, прямые ссылки на отдельные слайды и обновляет адресную строку и привязку постоянной ссылки при каждом изменении слайда.
deck.menu: добавляет вид меню, позволяющий видеть все слайды в сетке. Нажмите m, чтобы переключиться в режим просмотра меню, продолжите навигацию по колоде и нажмите m, чтобы вернуться к обычному виду. На сенсорных устройствах можно дважды коснуться деки, чтобы переключаться между представлениями.
deck.navigation: добавляет нажимаемые левую и правую кнопки для меньшего наклона клавиатуры.
deck.status: добавляет индикатор номера страницы. (текущий/всего)
Каждая папка расширения в загружаемом пакете содержит необходимые файлы JavaScript, CSS и HTML. Полный список модулей расширения, включенных в deck.js, см. в документации.

Вложенные слайды

Слайд расширений содержит несколько шагов для демонстрационных целей, а для создания подшагов в слайдах просто вложите их как класс слайда в упорядоченный или неупорядоченный список, как показано в примере фрагмента кода HTML ниже:

На интерактивной демонстрации в формате HTML показана страница 9, как показано на рис. E:

Вы заметили, что стиль на последнем рисунке изменился? Я обновил тему стиля, чтобы она называлась швейцарской темой (swiss.css).

Другие элементы

Изображения довольно легко добавить на слайд, как показано ниже во фрагменте HTML и на рисунке F:

Легко добавляйте кавычки, как в любой HTML-документ. Пример показан на рисунке G:

К встраиваемым видео относятся любые видеоролики, в которых используются коды встраивания из вашего любимого онлайн-видеосервиса или видеоэлемент HTML5. Демонстрационный HTML-код показан во фрагменте ниже:

Нельзя создать красивую целевую страницу или электронную книгу и рассчитывать на то, что они будут выделяться. Сегодня люди хотят общаться с людьми.

Сегодня единственный путь в маркетинге – быть настоящим и аутентичным. Но это не значит, что мы все выражаем себя одинаково. Некоторые из вас будут чувствовать себя комфортно, делая видео в стиле селфи на LinkedIn, но другие попробуют другие средства. Подлинность выглядит по-разному для каждой компании и человека.

Поделившись своими мыслями об аутентичном маркетинге, DG переключился на разговор о том, как сделать ваши презентации безупречными. Некоторое время назад он научился одному трюку с презентациями и публичными выступлениями, который полностью изменил его методы проведения презентаций в наши дни.

Оказывается, если вы не читаете свои слайды слово в слово во время презентации — другими словами, вы действительно знаете, о чем говорите, — публичное выступление может быть намного проще. Поскольку вы не пытаетесь ничего запомнить, вы сможете более естественно делиться тем, что знаете, и говорить более авторитетно. Один общий DG работает для всего: от слайдов до сообщений в блогах и даже электронных писем. Если вы застряли, вы можете вытащить эту штуку.

Итак, если в ближайшем будущем вам предстоит презентация, я настоятельно рекомендую изложить эти пять пунктов еще до того, как вы откроете Google Slides или Keynote.

Идеальный план презентации

1) Расскажите историю

Когда вы рассказываете историю, вы устанавливаете контакт со своим слушателем.

Однако рассказ истории имеет гораздо большее значение: он связывает ваш продукт или бренд с более широким повествованием, которое люди сочтут важным для своей жизни. Для маркетологов и торговых представителей такое повествование необходимо, чтобы очеловечить ваш продукт и придать вашему сообщению ощущение срочности.

2) Поставьте проблему

Как только вы услышали историю или, по крайней мере, начало интересного повествования, вы привлекли внимание человека. Затем пришло время рассказать о проблеме, которая может разрушить этот более широкий нарратив или изменить то, как все делается.

3) Предложите решение

… тогда вы должны показать им выход.

4) Показать примеры

Недостаточно просто поделиться решениями. Люди хотят видеть, как это сделали другие люди, подобные им.

5) Призыв к действию

Что вы хотите, чтобы люди делали после этого?

Придерживайтесь этих пяти пунктов, и вы не застрянете ни на чем, что создаете. Построение плана презентации с использованием этой структуры — единственный секрет, который вам нужен.

В последние годы фреймворков для презентаций JavaScript стало очень много. Эти фреймворки используют HTML5, CSS3 и JavaScript для создания слайдов презентации, которые можно просматривать в любом современном веб-браузере. Прошли те времена, когда вы были привязаны к PowerPoint, в настоящее время существует множество инструментов на выбор, когда дело доходит до создания презентации.

Программирование и разработка

Индивидуальный.js

Bespoke.js Марка Далглиша — это суперлегкая платформа для презентаций (выпущенная под лицензией MIT), которую можно расширять с помощью подключаемых модулей. Минимальная версия основной библиотеки составляет всего (приблизительно) один килобайт. Эта основная библиотека предоставляет достаточно функций, необходимых для создания базовой презентации, а большое количество подключаемых модулей предоставляют широкий спектр дополнительных функций. Конечно, вам почти наверняка понадобится хотя бы один плагин, потому что навигация по презентации с помощью ввода с клавиатуры — это функция, предоставляемая плагином. Тем не менее, Bespoke.js плюс подключаемый модуль ввода с клавиатуры по-прежнему намного меньше, чем большинство фреймворков для презентаций JavaScript.

Официальные плагины Bespoke.js предоставляют широкий спектр функций. В дополнение к вышеупомянутому плагину для взаимодействия с клавиатурой существуют плагины для сенсорного ввода, адаптивного масштабирования, анимированных маркированных списков, подсветки синтаксиса для примеров кода и ряда других дополнительных функций. Есть также две официальные темы Bespoke.js (по сути, это плагины, изменяющие способ отображения презентаций), Cube и Voltaire. Обе темы отточены и не слишком кричащие, хотя вы можете изменить цвета в соответствии с вашими потребностями, но обе они вполне пригодны для использования как есть.

Подключаемые модули и темы Bespoke.js, а также сам Bespoke.js можно установить с помощью npm для node.js или Bower для Twitter.

Чтобы установить Bespoke.js или подключаемый модуль с помощью npm:
npm install bespoke или npm install bespoke-[plugin]

Чтобы установить Bespoke.js или плагин с помощью bower:
bower install bespoke.js или bower install bespoke-[plugin]

Также можно получить Bespoke.js и подключаемые модули к нему, клонировав репозитории проектов на GitHub или загрузив файлы со страниц проектов на GitHub. Однако есть гораздо более простой способ начать работу — проект Bespoke.js Generator.

Генератор на заказ

Самый быстрый способ приступить к созданию презентации Bespoke.js – использовать генератор Bespoke.js. Генератор позволит вам установить название вашей презентации и ответит на ряд вопросов о том, какие плагины вы хотели бы использовать. Затем он автоматически загрузит все необходимые компоненты Bower и модули Node.js. После завершения работы генератора вы сможете приступить к редактированию презентации.

Чтобы установить генератор Bespoke.js:

<р>1. Если у вас не установлен npm, загрузите и установите его с сайта node.js или установите npm с помощью диспетчера пакетов вашего дистрибутива.
2. После установки npm запустите: npm install -g генератор-на заказ, используя учетную запись с достаточными привилегиями для установки пакетов программного обеспечения (например, root).

Чтобы создать презентацию, создайте новый каталог, а затем перейдите в него:

mkdir каталог-презентации
каталог-презентации cd

Затем запустите Bespoke Generator и создайте презентацию, выполнив:

Все файлы, которые вам нужно отредактировать, будут расположены в подкаталоге src. Базовая структура и содержимое презентации Bespoke.js создаются путем редактирования разметки Jade в файле index.jade. Стили редактируются путем изменения файла styles/main.styl, что позволяет использовать Stylus для упрощения написания правил CSS. Наконец, файлы scripts/main.js, где вы можете редактировать JavaScript для своей презентации.

Чтобы построить презентацию или создать локальный сервер с LiveReload, вы будете использовать gulp.js. Следующие команды позволят вам создать статическую копию презентации, запустить локальный сервер или отправить свой проект на страницы GitHub (при условии, что презентация уже настроена как репозиторий Git с «источником», указывающим на GitHub.)

Чтобы создать статический сайт (файлы попадают в подкаталог dist): gulp
Чтобы отправить на страницы GitHub: gulp deploy
Чтобы запустить локальный сервер для тестирования: gulp serve

Для опытных пользователей, которые хотят создавать плагины и темы, также доступны Генератор плагинов Bespoke.js и Генератор тем Bespoke.js. Как и все остальные официальные проекты Bespoke.js, они выпущены под лицензией MIT.

Стойка

Я ранее рассказывал о Strut в своей статье о impress.js, но он также может создавать презентации Bespoke.js. Strut — это веб-инструмент для создания презентаций, который во многом похож на традиционное программное обеспечение для презентаций. Хотя Strut не так функционален, как отдельное программное обеспечение для презентаций (например, PowerPoint), у него более чем достаточно функций, чтобы сделать создание презентации быстрым и простым процессом. Левая часть интерфейса позволяет создавать и сортировать слайды. Панель инструментов в верхней части экрана позволяет добавлять текст, фигуры и изображения, а также вставлять видео и веб-сайты. Вы можете быстро и легко изменить цвет фона отдельного слайда или всех слайдов сразу. Таким же образом можно изменить цвет фона холста за слайдами. Для опытных пользователей Strut поддерживает добавление пользовательских классов CSS к объектам и позволяет писать новые правила CSS изнутри Strut. Также можно добавить текст на слайд с помощью синтаксиса Markdown для пользователей, которые предпочитают писать презентацию, а не использовать инструменты перетаскивания.

Единственная разница между созданием презентации impress.js и презентации Bespoke.js в Strut заключается в том, что происходит, когда вы переходите в режим обзора Strut. Для impress.js он позволяет позиционировать и поворачивать слайды на 3D-холсте, а режим обзора для Bespoke.js позволяет выбирать из нескольких боковых переходов. Существует восемь различных переходов, начиная от простого плавного перехода между слайдами и заканчивая параметрами обложки и вращающегося куба. Все переходы приятны и довольно занижены. Использование любого из них придаст презентациям немного блеска, но не будет настолько кричащей, что переходы в конечном итоге будут отвлекать от содержания презентации.

Вы можете попробовать Strut, используя пример сайта, или вы можете клонировать или загрузить проект с GitHub и собрать Strut для установки на свой собственный сервер (или запустить его локально) с помощью Grunt. Однако новая версия Strut — Strut2.0 — разрабатывается в частном репозитории и должна стать общедоступной в начале октября, так что следите за ней.

Есть ли у вас любимый фреймворк для презентаций JavaScript? Если да, поделитесь этим в комментариях ниже.

Читайте также: