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