Вы находитесь на странице: 1из 10

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 формат, и все анимации
аннулируются!

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


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

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


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