Технології веб-розробки та дизайну
W E B

Технології веб-розробки та дизайну

Технології веб-розробки та дизайну

Диски для звітності

Контакти

Інтерфейс програмування додатків (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 надало можливості легко відтворювати звук.

На тепер існує 3 вживаних формати для <audio> - оgg, .mp3, wav. Файл з розширенням .оgg буде програватися в Firefox, Opera и Chrome, формат .mp3 або .wav для Internet Explorer і Safari.

HTML5 <video>. Відтворення відео на сайті

Віджети

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

Віджети також називають гаджетами, інформерамі, а англійською gadget, badge, module, webjit, capsule, snippet, mini або навіть flake.

Веб-віджет (web widget) - це фрагмент коду, який може бути вбудований користувачем в HTML сторінку і використовуватися без значної модифікації. Як правило, при створенні веб-віджетів використовуються технології DHTML, JavaScript і Adobe Flash.

Веб-віджети можна умовно розділити на:

  • Неінтерактивні, вміст і робота яких не залежить від дій користувача, що переглядає сторінку. Неінтерактивні віджети ще часто називають інформерамі. Класичний приклад інформера - погодний інформер.
  • Інтерактивні з якими користувач може взаємодіяти, наприклад, відправляти SMS або шукати маршрут на карті.

Кнопки соціальних мереж

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

Інформери

Щоб додати інформер до сайту не потрібно бути програмістом. Це невеликий фрагмент HTML коду, який вставляється в код сторінки сайту. Після додавання коду інформера, він почне відображатися на сторінці. Вся необхідна та актуальна інформація завантажуватиметься з серверів ресурсу, з якого отримано інформер. Код інформера жодним чином не впливає і не гальмує роботу сайту, оскільки це простий HTML код розмітки.

Увага!!! Деякі інформери відображаються лише після за вантаження на хостинг, перегляд сторінки на локальному комп’ютері не надасть бажаних результатів.

Інтерактивні віджети

See the Pen Gallery by Katherine Kato (@kathykato) on CodePen.

FreeCurrencyRates.com

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

Порядок роботи

  1. Ознайомитися з наведеними картографічними та мультимедійними сервісами та можливостями їх АРІ.
  2. Користуючись сервісом Google Maps втілити карту, що відповідає певному місцю: будинок студента, навчальний корпус Львівської політехніки, улюблене кафе чи пімТятка. На карті проставити мітки, прокласти маршрути, змінити фон, схему відображення. Додатково розмістити панорамний перегляд цієї або іншої місцевості.
  3. Ознайомитися з наведеними мультимедійними ресурсами. Відредагувати засобами YouTube власне чи довільне відео. Додати звукове супроводження, зробити нарізку, додати субтитри. Втілити відредаговане відео у відповідну сторінку сайту.
  4. За допомогою тегу <audio> або audio.js додати музичний файл на сайт.
  5. Ознайомитися з іншими технологіями - Vimeo, Онлайн ТВ та кінотеатри. За бажанням додати до сайту відео чи віджет.
  6. Поставити на сторінку кнопки плагінів соціальних мереж та інформери.
  7. Протестувати сторінку на різних браузерах та пристроях.
  8. Розмістити тестову сторінку на хостингу. Результат виконання демонструвати в Інтернеті.
  9. Під час виконання роботи робити скріншоти основних етапів роботи. Оформити звіт.

Зміст звіту

  1. Назва та мета виконання лабораторної роботи.
  2. Скріни етапів виконання роботи та результати втілення карт на сторінки. HTML код, що було вставлено на сайт.
  3. Короткий опис редагування відео зі скрінами. HTML код, що було вставлено на сайт.
  4. Короткий опис уставляння аудіо зі скрінами. HTML код, що було вставлено на сайт.
  5. У висновку оцінити зручність використання АРІ картографічних та мультимедійних сервісів та різні можливості уставляння.

Контрольні питання

  1. Для чого розробляються АРІ додатків, яку функціональність вони надають?
  2. Яким чином можна використати сторонній сервіс з доступним АРІ на власному сайті?
  3. В чому переваги картографічних сервісів? Яким чином можна вставити онлайн карту на сайт?
  4. В чому проявляються відмінності різних картографічних сервісів?
  5. Які обмеження у використанні накладено картографічним сервісом GoogleMaps?
  6. Назвіть вагомі відмінності відеохостингів Youtube та Vimeo. Яким чином можна вставити відео з сервісу на користувацький сайт?
  7. На які особливості відтворення аудіо файлів на сайті слід вважати: спосіб уставляння, формати файлів, режими відтворення?
  8. Які особливі елементи присутні в мові HTML5, для уставляння аудіо та відео. Чи цей підхід є зручним?
  9. Особливості уставляння віджетів соціальних мереж на користувацький сайт. Які переваги надає їх наявність
  10. Які послуги надають інформери, як їх можна підключити?