Web-дизайн.

​​Внешние виджеты

Привет! Сегодняшнее занятие будет на тему внешних

виджетов. Мы узнаем, что же это такое, как использовать и
что самое важное - как встроить эти виджеты в свой проект,
поэтому… Поехали!

Напоминаю, что ты можешь пользоваться таким вот мини-конспектом, чтобы

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

На занятии мы изучили следующие полезные штуки, а

именно:
1. виджет карты (на примере Google Maps);
2. виджет видео (на примере YouTube);
3. виджет музыки (на примере Яндекс.Музыки);
4. виджет документов (На примере Scribd.com).

Давай теперь обо всём по порядку.

 1. Виджет карты
Сегодня мы будем работать в формате песни “Хей,
посмотри на меня, делай как я!”. Если вдруг не знаешь эту
песню, это означает следующее - для каждого виджета
будет пошаговая инструкция, тебе остаётся лишь
выполнить все шаги. :)

Давай скорее начнем!

1. Перейди по адресу: ​
https://www.google.ru/maps

2. Выбери нужный объект на карте и нажми значок

“Поделиться” в открывшейся панели.
 3. Теперь выбери пункт “встраивание карт”.

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

кнопке “Копировать HTML”. После этих действий ты
сможешь код вставить в HTML-документ.

Вот так просто добавляется на сайт виджет карт, с

остальными виджетами будет всё подобным образом.
 3. Виджет видео

1. Перейди на сайт ​https://www.youtube.com​и найди

нужное видео через строку поиска.

2. Открой нужное видео и внизу увидишь кнопку

“Поделиться”. Нажми на неё.

3. После чего необходимо сделать клик по иконке

“Встроить”.
4. Выбери, с начала или нет тебе необходим запуск
видео.

5. Также есть дополнительные настройки, выбери

нужные тебе и поставь галочки напротив этих пунктов.

6. Всё, скопируй код и вставьте в HTML-документ.

(Пример кода ниже. Также попробуй поменять
параметры width и height - чтобы подобрать нужный
размер встраиваемого блока по ширине и высоте.)
 4. Виджет музыка

Вот мы добрались до виджета музыкального плеера, идём

по тому же принципу и в итоге получим музыкальный трек
на нашем сайте. Таким образом можно будет сделать
полноценный сервис с музыкой. :)

1. Перейди на сайт ​https://music.yandex.ru/home

2. Выбери композицию, которая тебе больше по душе и

воспроизведи её.
 3. Теперь сделай клик по третьей иконке - поделиться.

4. Осталось выполнить клик по кнопке “HTML-код”,

выбрать нужные параметры и скопировать код из
одноименного поля себе в документ.

Попробуй выбрать светлую или тёмную тему, ставить

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

1. Перейдите на сайт
https://ru.scribd.com/upload-document

2. Делаем клик по зеленой кнопке. Далее выбираем

нужный PDF файл и загружаем его в систему. (если
появляется окно с предложением о регистрации -
закрываем его!)
3. Обязательно указываем название и описание
документа и кликаем на кнопку Done.

4. Видим, что всё успешно и кликаем на кнопку EMBED.

5. В открывшемся окне
делаем следующие
настройки:
a. Формат - HTML
b. Размер - 600х800
(стандарт)
c. Убираем галочку с
пункта Include link
d. Остальное по вкусу :)
 6. После чего копируем сгенерированный код из верхней
части данного окна и вставляем в свой
HTML-документ.

Открою тебе один секрет, с помощью этого сервиса

возможно размещать не только PDF документы, но и PPTX
презентации.

Только учитывай тот факт, что презентация автоматически

будет переведена в PDF формат, и все анимации
аннулируются!

Есть виджет, который позволяет вставить полноценную

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

Не забудь теперь выполнить домашнюю работу и до

встречи на следующем занятии.