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