#6. Уставляння зовнішніх сервісів
Інтерфейс програмування додатків (API, application programming interface) це набір готових класів, процедур, функцій, структур і констант, що надаються додатком (бібліотекою, сервісом) для використання у зовнішніх програмних продуктах. Використовується програмістами для написання різноманітних додатків.
API для сайту - це скрипт, який надсилає GET/POST запити до певного сервісу, отримує від нього результат, що використовується для автоматизації певних дій.
Онлайнові картографічні сервіси
Картографічний сервіс створює карти, об'єкти і дані атрибутів всередині багатьох типів клієнтських додатків. Одним з традиційних методів використання картографічного сервісу є показ бізнес-даних поверх листів базової карти в Google Maps, Bing Maps або ArcGIS Online. Популярні геоінформаційні сервіси пропонують окрім перегляду карт пошук об'єктів, прокладання маршрутів і багато соціальних функції. Кожна з популярних систем має свої сильні і слабкі сторони, зумовлені спеціалізацією або історією розвитку.
Уставляння карти на сайт
Мультимедійні сервіси
Відео-сервіс YouTube
YouTube-сервіс, що надає послуги відеохостингу. Користувачі можуть додавати, переглядати і коментувати відеозаписи. На сайті представлено як професійно зняті фільми і кліпи, так і любительські відеозаписи, включно з відеоблогами.
Перегляд та поширення відеоматеріалів YouTube
- На сайті YouTube.com: користувачі можуть завантажувати відео в кількох поширених форматах, в тому числі. Mpeg і. Avi. YouTube автоматично конвертує їх у Flash Video і робить доступними для перегляду в онлайн.
- За межами YouTube.com: кожне відео супроводжується готовою HTML-розміткою для вставки відео на інші веб-сторінки. Проста техніка CopyPaste зробила поширення відео з YouTube надзвичайно популярним, адже посилання на відео може бути впроваджено в HTML-код любої веб-сторінки.
- Скачування відео: крім спеціальних сайтів, перетворюють посилання на сторінку з відео в посилання на файли, це дозволяють робити ряд сторонніх додатків (напр., SaveTube) і розширень для браузера (напр., UnPlug або інші розширення для Firefox або доповнення для Opera). Деякі менеджери завантажень також можуть зберігати відео з цього порталу (наприклад Download Master). Є також ряд спеціальних сайтів, які можуть завантажувати відео з YouTube.
Як поставити ролик YouTube на сайт
Відео-сервіс Vimeo
Vimeo video - це онлайн сервіс, що надає безкоштовні і платні послуги відіохостінгу. Основною перевагою є можливість завантажувати відео ролики високої якості. Сайт належить корпорації InterActiveCorp (IAC), є основним конкурентом YouTube. Не зареєстровані користувачі на сайті можуть лише переглядати відео, додавати і коментувати відеозаписи дозволено після проходження процедури реєстрації.
HTML5 <audio>. Відтворення музики на сайті
Поява тегУ <audio> в HTML5 надало можливості легко відтворювати звук.
На тепер існує 3 вживаних формати для <audio> - оgg, .mp3, wav. Файл з розширенням .оgg буде програватися в Firefox, Opera и Chrome, формат .mp3 або .wav для Internet Explorer і Safari.
- Конвертор медіа-файлів он-лайн
- Уроки застосування HTML5 Audio
- Аudio.js музика в любому браузері
- Аудіоплеєр для сайту на HTML5
HTML5 <video>. Відтворення відео на сайті
Віджети
Віджет це невеликий незалежний програмний модуль, що зроблено за допомогою технології API і який працює в деякому середовищі (напр. сайті, браузері, мобільному телефоні) та виконує, як правило, одну певну функцію.
Віджети також називають гаджетами, інформерамі, а англійською gadget, badge, module, webjit, capsule, snippet, mini або навіть flake.
Веб-віджет (web widget) - це фрагмент коду, який може бути вбудований користувачем в HTML сторінку і використовуватися без значної модифікації. Як правило, при створенні веб-віджетів використовуються технології DHTML, JavaScript і Adobe Flash.
Веб-віджети можна умовно розділити на:
- Неінтерактивні, вміст і робота яких не залежить від дій користувача, що переглядає сторінку. Неінтерактивні віджети ще часто називають інформерамі. Класичний приклад інформера - погодний інформер.
- Інтерактивні з якими користувач може взаємодіяти, наприклад, відправляти SMS або шукати маршрут на карті.
Віджети соціальних мереж
Можна додати стрічку соціальних мереж на сайт, використовуючи популярні контент-джерела: Instagram, Facebook, YouTube тощо. Створити віджет на будь-який випадок: захоплюючий візуальний контент за допомогою Instagram фото та YouTube відео або стрічку новин соцмереж Facebook.
Приклади уставляння інформації з соціальних мереж
Інформери
Інтерактивні віджети
See the Pen Candy Color Button Animation by Yuhomyan (@yuhomyan) on CodePen.
FreeCurrencyRates.com
Відео лабораторної роботи
Порядок роботи
- Ознайомитися з наведеними картографічними та мультимедійними сервісами та можливостями їх АРІ.
- Користуючись сервісом Google Maps втілити карту, що відповідає певному місцю: будинок студента, навчальний корпус Львівської політехніки, улюблене кафе чи пімТятка. На карті проставити мітки, прокласти маршрути, змінити фон, схему відображення. Додатково розмістити панорамний перегляд цієї або іншої місцевості.
- Ознайомитися з наведеними мультимедійними ресурсами. Відредагувати засобами YouTube власне чи довільне відео. Додати звукове супроводження, зробити нарізку, додати субтитри. Втілити відредаговане відео у відповідну сторінку сайту.
- За допомогою тегу <audio> або audio.js додати музичний файл на сайт.
- Ознайомитися з іншими технологіями - Vimeo, Онлайн ТВ та кінотеатри. За бажанням додати до сайту відео чи віджет.
- Поставити на сторінку кнопки плагінів соціальних мереж та інформери.
- Протестувати сторінку на різних браузерах та пристроях.
- Розмістити тестову сторінку на хостингу. Результат виконання демонструвати в Інтернеті.
- Під час виконання роботи робити скріншоти основних етапів роботи. Оформити звіт.
Зміст звіту
- Назва та мета виконання лабораторної роботи.
- Скріни етапів виконання роботи та результати втілення карт на сторінки. HTML код, що було вставлено на сайт.
- Короткий опис редагування відео зі скрінами. HTML код, що було вставлено на сайт.
- Короткий опис уставляння аудіо зі скрінами. HTML код, що було вставлено на сайт.
- У висновку оцінити зручність використання АРІ картографічних та мультимедійних сервісів та різні можливості уставляння.
Контрольні питання
- Для чого розробляються АРІ додатків, яку функціональність вони надають?
- Яким чином можна використати сторонній сервіс з доступним АРІ на власному сайті?
- В чому переваги картографічних сервісів? Яким чином можна вставити онлайн карту на сайт?
- В чому проявляються відмінності різних картографічних сервісів?
- Які обмеження у використанні накладено картографічним сервісом GoogleMaps?
- Назвіть вагомі відмінності відеохостингів Youtube та Vimeo. Яким чином можна вставити відео з сервісу на користувацький сайт?
- На які особливості відтворення аудіо файлів на сайті слід вважати: спосіб уставляння, формати файлів, режими відтворення?
- Які особливі елементи присутні в мові HTML5, для уставляння аудіо та відео. Чи цей підхід є зручним?
- Особливості уставляння віджетів соціальних мереж на користувацький сайт. Які переваги надає їх наявність
- Які послуги надають інформери, як їх можна підключити?