#4. Уставляння додатків з зовнішніх сервісів
Інтерфейс програмування додатків (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 надало можливості легко відтворювати звук.
Елемент <audio> використовується для додавання на веб-сторінку аудіофайлу. Оскільки не всі браузери підтримують всі аудіоформати, аудифайл кодують за допомогою спеціальних кодеків і додають файли одночасно через елемент
<audio controls=""> <source src="picture/4/cheer.ogg" type="audio/ogg; codecs=vorbis"> <source src="picture/4/cheer.mp3" type="audio/mpeg"> Елемент audio не підтримується вашим браузером. <a href="picture/4/cheer.mp3">Завантажте аудіофайл</a>. </audio>
HTML5 <video>. Відтворення відео на сайті
Як і з аудіо, в HTML5 з'явився елемент <video>, який дозволяє швидко додати необхідне відео на сторінку.
В елементі <video> присутні вкладені елементи <source>, де вказується шлях до відео-файлу в атрибуті src. За допомогою спеціальних тегів <source> можна додавати кілька форматів відео. Це необхідно тому, що кожен браузер вміє відтворювати лише певні формати відео. Єдиний формат, який коректно обробляють усі браузери – mp4.
<video width="500" height="500" controls> <source src="picture/4/videoplayback.mp4" type="video/mp4"> <source src="picture/4/videoplayback.webm" type="video/webm"> <source src="picture/4/videoplayback.ogg" type="video/ogg"> </video>
Наявність трьох форматів файлів гарантує працездатність відео на будь-яких пристроях. Також обов'язковою є наявність атрибута type, який повідомить браузеру формат відео. Саме за цим атрибутом браузер ухвалить рішення, який файл потрібно завантажити.
За допомогою атрибута controls можна вивести елементи керування для плеєра.
Елемент <video> має кілька важливих атрибутів:
- controls — Додає елементи керування для відеоплеєра. Візуальне оформлення керуючих елементів залежить від конкретного браузера.
- autoplay — Автоматичне відтворення після завантаження відео.
- width - Ширина відеоплеєра в пікселях.
- height — Висота відеоплеєра в пікселях.
Віджети
Віджет це невеликий незалежний програмний модуль, що зроблено за допомогою технології API і який працює в деякому середовищі (напр. сайті, браузері, мобільному телефоні) та виконує, як правило, одну певну функцію.
Віджети також називають гаджетами, інформерамі, а англійською gadget, badge, module, webjit, capsule, snippet, mini або навіть flake.
Веб-віджет (web widget) - це фрагмент коду, який може бути вбудований користувачем в HTML сторінку і використовуватися без значної модифікації. Як правило, при створенні веб-віджетів використовуються технології DHTML, JavaScript і Adobe Flash.
Веб-віджети можна умовно розділити на:
- Неінтерактивні, вміст і робота яких не залежить від дій користувача, що переглядає сторінку. Неінтерактивні віджети ще часто називають інформерамі. Класичний приклад інформера - погодний інформер.
- Інтерактивні з якими користувач може взаємодіяти, наприклад, відправляти SMS або шукати маршрут на карті.
Кнопки соціальних мереж
Уставляння плагінів від Facebook на сайт
У цьому документі наведено доступні соціальні плагіни Facebook, які дозволяють зі сторінки ставити лайки, поширювати, коментувати тощо.
Соціальні плагіни «Подобається» та «Коментар» підтримуються лише для користувачів, які 1) увійшли у свій обліковий запис Facebook і 2) дали згоду на керування «Cookie програми та веб-сайту». Якщо обидві ці вимоги виконано, користувач зможе бачити та взаємодіяти з плагінами, такими як кнопка «Подобається» або «Коментар». Якщо будь-яка з наведених вище вимог не виконується, користувач не зможе побачити плагіни.
Інформери
Інтерактивні віджети
See the Pen Candy Color Button Animation by Yuhomyan (@yuhomyan) on CodePen.
FreeCurrencyRates.comВідео лабораторної роботи
Порядок роботи
- Ознайомитися з наведеними картографічними та мультимедійними сервісами та можливостями їх АРІ.
- Користуючись сервісом Google Maps втілити карту, що відповідає певному місцю: будинок студента, навчальний корпус Львівської політехніки, улюблене кафе чи пімТятка. На карті проставити мітки, прокласти маршрути, змінити фон, схему відображення. Додатково розмістити панорамний перегляд цієї або іншої місцевості.
- Ознайомитися з наведеними мультимедійними ресурсами. Відредагувати засобами YouTube власне чи довільне відео. Додати звукове супроводження, зробити нарізку, додати субтитри. Втілити відредаговане відео у відповідну сторінку сайту.
- За допомогою тегу <audio> або audio.js додати музичний файл на сайт.
- Ознайомитися з іншими технологіями - Vimeo, Онлайн ТВ та кінотеатри. За бажанням додати до сайту відео чи віджет.
- Поставити на сторінку кнопки соціальних мереж та інформери.
- Протестувати сторінку на різних браузерах та пристроях.
- Розмістити тестову сторінку на хостингу. Результат виконання демонструвати в Інтернеті.
- Під час виконання роботи робити скріншоти основних етапів роботи. Оформити звіт.
Зміст звіту
- Назва та мета виконання лабораторної роботи.
- Скріни етапів виконання роботи та результати втілення карт на сторінки. HTML код, що було вставлено на сайт.
- Короткий опис редагування відео зі скрінами. HTML код, що було вставлено на сайт.
- Короткий опис уставляння аудіо зі скрінами. HTML код, що було вставлено на сайт.
- У висновку оцінити зручність використання АРІ картографічних та мультимедійних сервісів та різні можливості уставляння.