Профессиональная верстка. Практическое применение Bootstrap

План урока
Знакомство с Bootstrap.
Добавление аудио и видео на страницу.

Bootstrap

HTML5 Аудио и Видео

Аудио HTML5
HTML5-элемент
используется для внедрения звукового контента в веб-страницы.

Добавляет отображение браузерами интерфейса управления аудиоплеера – кнопки воспроизведения, паузы, громкости.
Автоматически запускает на странице аудиофайл.

При завершении композиции она запустится вновь.
Отключает звук.

Какую часть аудиофайла требуется загрузить браузеру (для ускорения запуска аудиозаписи).
Указывает путь к файлу.

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

Семантические элементы для работы со структурой страниц
Тег
применяет такие же атрибуты src, controls, autoplay и loop, которые мы рассмотрели ранее.
выставляет изображение, которое браузер будет использовать, пока загружается.

Браузер загружает видеофайл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение.
Браузер загружает первую небольшую часть видеофайла, чтобы определить его основные характеристики.
Атрибут preload

Отсутствие автоматической загрузки видеофайла.

Знакомство с Bootstrap

Font Awesome

Преимущества
Все в одном файле, Font Awesome - это язык иконок для Ваших web-проектов.
Изменяйте цвет, размер, тень, и все, что возможно изменить через CSS.
Мало проблем с совместимостью, так как для Font Awesome не требуется JavaScript.

Преимущества
Font Awesome абсолютно бесплатный продукт
Масштабируемая векторная графика позволяет делать иконки любого размера без потери в качестве.

Поддержка и совместимость
Изначально созданный для Bootstrap, Font Awesome прекрасно работает и с другими фреймворками.
Иконки Font Awesome векторные, а это значит, что они великолепны на экранах высокого разрешения.

Поддержка и совместимость
Возможность использовать Font Awesome в любой программе как обычный шрифт, шпаргалка под весь набор иконок.
Font Awesome не сбивает с толку экранных дикторов, в отличии от других иконочных шрифтов.

Подключение
Первый способ: Вставьте код в тег в HTML вашего вебсайта. rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Первый способ: Вставьте код в тег в HTML вашего вебсайта.

Подключение
Третий способ: Добавьте строку в Gemfile вашего проекта: gem 'font-awesome-less' Далее запустите: $ bundle
Четвертый способ: Добавьте нижеуказанную строку в Gemfile вашего проекта: gem 'font-awesome-sass' Далее запустите: $ bundle

Практическое задание

Практическое задание
Научиться пользоваться официальной документацией: http://getbootstrap.com/.
Приступить к верстке макета 3, товар каталога singe page.psd.

Практическое задание
* Создать шаблон с использованием Twitter Bootstrap.
* Добавить блок видео вместо блока с любой картинкой на сайте.
* Ознакомиться с новой, 4-й версией Bootstrap.