#4. Уставляння додатків з зовнішніх сервісів

Інтерфейс програмування додатків (API, application programming interface) це набір готових класів, процедур, функцій, структур і констант, що надаються додатком (бібліотекою, сервісом) для використання у зовнішніх програмних продуктах. Використовується програмістами для написання різноманітних додатків.

API для сайту - це скрипт, який надсилає GET/POST запити до певного сервісу, отримує від нього результат, що використовується для автоматизації певних дій.

Онлайнові картографічні сервіси

Картографічний сервіс створює карти, об'єкти і дані атрибутів всередині багатьох типів клієнтських додатків. Одним з традиційних методів використання картографічного сервісу є показ бізнес-даних поверх листів базової карти в Google Maps, Bing Maps або ArcGIS Online. Популярні геоінформаційні сервіси пропонують окрім перегляду карт пошук об'єктів, прокладання маршрутів і багато соціальних функції. Кожна з популярних систем має свої сильні і слабкі сторони, зумовлені спеціалізацією або історією розвитку.

Уставляння карти на сайт

Мультимедійні сервіси

Відео-сервіс YouTube

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

Vimeo video - це онлайн сервіс, що надає безкоштовні і платні послуги відіохостінгу. Основною перевагою є можливість завантажувати відео ролики високої якості. Сайт належить корпорації InterActiveCorp (IAC), є основним конкурентом YouTube. Не зареєстровані користувачі на сайті можуть лише переглядати відео, додавати і коментувати відеозаписи дозволено після проходження процедури реєстрації.

HTML5 <audio>. Відтворення музики на сайті

Поява елемента <audio> в HTML5 надало можливості легко відтворювати звук.

Елемент <audio> використовується для додавання на веб-сторінку аудіофайлу. Оскільки не всі браузери підтримують всі аудіоформати, аудифайл кодують за допомогою спеціальних кодеків і додають файли одночасно через елемент з атрибутом src. Шлях до аудіофайлу може містити абсолютний URL, так і відносний.

<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 Gallery by Katherine Kato (@kathykato) on CodePen.

FreeCurrencyRates.com

Відео лабораторної роботи

Терміни і бали

І половина семестру

ІІ половина семестру

Наприкінці семестру