МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ «ЛЬВІВСЬКА ПОЛІТЕХНІКА» Інститут комп'ютерних технологій, автоматики та метрології Кафедра «Електронні обчислювальні машини» Бібліотека jQuery UI. АРІ для сайту Методичні вказівки до лабораторної роботи №4 з дисципліни «Глобальні інформаційні мережі» для студентів базового напряму 6.050102 «Комп'ютерна інженерія» Затверджено на засіданні кафедри «Електронні обчислювальні машини» Протокол № 7 від 11 березня 2014 р. на засіданні методичної ради ІКТА Протокол № 11 від 25 березня 2014 р. Зареєстровано в НМУ НУ «ЛП» № 5594 від 05.05.2014 Львів-2014 2 Бібліотека jQuery UI. АРІ для сайту. Методичні вказівки до лабораторної роботи № 4 з дисципліни «Глобальні інформаційні мережі» для студентів базового напряму 6.050102 «Комп'ютерна інженерія»/Укл. [ім’я автора приховано], [ім’я автора приховано] - Львів: Національний університет «Львівська політехніка», 2014. – 8 с. Укладачі: [ім’я автора приховано], канд. техн. наук, доцент [ім’я автора приховано], канд.. техн.. наук, доцент Відповідальна за випуск: [ім’я автора приховано], канд. техн. наук, доцент Рецензенти: Голембо В.А., канд. техн. наук, доцент каф. ЕОМ Різник О.Я., канд. техн. наук, доцент каф. ІТВС 3 Мета роботи. Ознайомлення з бібліотекою віджетів і плагінів, що базується на JavaScript бібліотеці jQuery. Практичне використання скриптів для створення інтерактивних веб- додатків. Здобути навичок у втіленні АРІ зовнішніх ресурсів до сторінок сайту. JavaScript бібліотека jQuery http://jquery.com/ Джон Резіг (John Resig) вперше представив свої напрацювання в січні 2006 року на комп'ютерній конференції в Нью-Йорку, а в серпні того ж року було випущено першу стабільну версію бібліотеки. За минулі роки бібліотека зазнала багато змін і на поточний день містить функціонал, корисний для максимально широкого кола завдань. Вона має невеликий розмір і не засмічує глобальний простір імен тривіальними ідентифікаторами. Широкі можливості механізму селекторів, що дозволяють легко отримати доступ до будь- якого елементу об'єктної моделі документа, зробили бібліотеку jQuery дуже популярною. Колектив JQuery Board оголосив про заснування некомерційної організації JQuery Foundation. Нова структура підтримує розробки jQuery Core, UI и Mobile, забезпечує проект документацією і підтримкою, стимулює розвиток спільноти JQuery. Проект jQuery UI http://jqueryui.com/ jQuery UI (User Interface) - бібліотека JavaScript з відкритим вихідним кодом для створення насиченого користувацького інтерфейсу у веб-додатках. jQuery UI є частиною головної бібліотеки jQuery і надає розробникові спрощений доступ до функцій взаємодії, анімації та ефектів, а також набір віджетів. API. Інтерфейс програмування додатків Інтерфейс програмування додатків (API, application programming interface) це набір готових класів, процедур, функцій, структур і констант, що надаються додатком (бібліотекою, сервісом) для використання у зовнішніх програмних продуктах. Використовується програмістами для написання різноманітних додатків. Розробникам-програмістам АРІ потрібен для інтеграції з іншими сайтами / сервісами програмами, або автоматизації певних дій. API визначає функціональність, яку надає програма (модуль, бібліотека), при цьому API дозволяє абстрагуватися від того, як саме ця функціональність реалізована. Якщо програму (модуль, бібліотеку) розглядати як чорний ящик, то API - це множина «ручок», які доступні користувачеві даного ящика, які він може повертати. Програмні компоненти взаємодіють один з одним за допомогою API. При цьому зазвичай компоненти утворюють ієрархію - високорівневі компоненти використовують API 4 низькорівневих компонентів, а ті, в свою чергу, використовують API ще більш низькорівневих компонентів. API для сайту - це скрипт, який приймає запити (за методами GET (site.ru / api.php? A = b), POST) і повертає не звичайний HTML для браузерів, а результат запиту у певному форматі (XML , JSON, php serialize ()-ed). АРІ призначено не для користувачів, а для скрипта зі стороннього сайту / сервісу / програми, який надсилає ці GET / POST запити, отримує результат і використовує дані. Запити скріпт надсилає щоб виконати певну дію (наприклад, як дію, яку виконують користувачі сайту через браузер). Віджети та гаджети Віджет це невеликий незалежний програмний модуль, який зроблено за допомогою технології API і який працює в деякому середовищі (сайті, браузері, мобільному телефоні) та виконує, як правило, одну певну функцію. Віджети також називають гаджетами, інформерамі, англійською gadget, badge, module, webjit, capsule, snippet, mini або навіть flake. Віджети можна розділити на групи за середовищем, в якому вони працюють: Веб-віджети Віджети для робочого столу Віджети для телефонів Веб-віджет (web widget) Це фрагмент коду, який може бути вбудований користувачем в HTML сторінку і використовуватися без значної модифікації. Як правило, при створенні веб-віджетів використовуються технології DHTML, JavaScript і Adobe Flash. Веб-віджети можна умовно розділити на: Інтерактивні з якими користувач може взаємодіяти, наприклад, відправляти SMS або шукати маршрут на карті (Рис. 1). Неінтерактивні, вміст і робота яких не залежить від дій користувача, що переглядає сторінку. Неінтерактивні віджети ще часто називають інформерами. Класичний приклад інформера - погодний інформер (рис.2). 5 Рис. 1. Інтерактивний віджет, що відправляє SMS Рис. 2. Неінтерактивний інформер курсу валют Десктоп-віджети (desktop widget) або віджети для робочого столу Це невеликі інструменти (програми), що виконують якусь одну функцію і вимагають для своєї роботи спеціальної середовища - віджет-рушія (widget engine). Десктоп-віджети можуть показувати прямо на робочому столі комп'ютера останні новини, слайдшоу з фотографій, дозволяють робити нотатки на віртуальних стікерах, вести облік робочого часу і багато іншого. При створенні віджетів для робочого столу використовуються самі різні технології: від HTML і JavaScript до С + +. Дуже часто десктоп-віджетів використовуються для того, аби показувати на робочому столі інформацію з певного сайту (наприклад, прогноз погоди) без допомоги браузера. Віджет в телефоні Технологія роботи віджета в мережі і віджета в телефоні побудована за одним принципом. Віджет в телефоні - це графічна надбудова, що встановлено в телефоні. Зазвичай, він служить для прикраси, розваги або передачі певної інформації. Для встановлення віджета в телефоні, потрібно мати сучасну модель телефону (Samsung, WiTu, Nokia LG, iPhone від Apple). iPhone працює практично за принципом віджетів, тільки ці віджети є цілими потужними програмами. Щоб наповнити iPhone вмістом необхідно завантажувати додатки 6 для телефону з сайту розробника. Веб-віджет (web widget) Віджети соціальних мереж http://vk.com/developers.php?o=-1&p =% D0% A1% D0% B0% D0% B9% D1% 82% D1% 8B & s = 0 Віджети для Вконтакте http://developers.facebook.com/docs/plugins/ Віджети для Facebook http://api.mail.ru/sites/plugins/share/ Однокласники на вашому сайті Кнопки і віджети для роботи з Твіттером http://twitter.com/about/resources/buttons Кнопки для фолловінгу https://twitter.com/about/resources/buttons # tweet Кнопка ретвіту постів https://twitter.com/settings/widgets Створення власного віджета http://tvforsite.ru/ Телебачення онлайн на сайті http://radio.online.ua/radio/ Радіо онлайн на сайт Інформери Інформери - це сервіс, що дозволяє відображати на сайті корисну, актуальну та якісну інформацію на цікаву тему без зайвих клопотів http://finance.i.ua/informers/ Фінансовий інформер від i.ua http://weather.i.ua/informer/ Погодний інформер від i.ua http://informers.bigmir.net/ Інформери від bigmir.net http://www.gismeteo.ua/informers/ Інформери від gismeteo.ua http://informers.tochka.net/ Інформери від tochka.net http://news.yandex.ru/export.html Новинний інформер від yandex.ru Віджети на робочий стіл http://infowidget.ru/ ІнфоВіджет Це пакет міні-программ/утіліт, що полегшують оновлення і стеження за інформацією в Інтернеті, такої як погода, новини, гороскоп та курси валют. Завдяки ІнфоВіджету можна завжди бути в курсі погоди в будь-якому місті світу, читати 7 новини з RSS стрічок, гороскоп на кожен день, а також стежити за курсами валют. І все це на робочому столі! Порядок роботи 1. Ознайомитися з наведеними ресурсами. 2. Ознайомитися з бібліотеками jQuery та jQuery UI та реалізованими прикладами. 3. Втілити обрані скрипти jQuery UI (слайдер, випадне меню, галерея тощо) у відповідні сторінки сайту. 4. Обрати кілька віджетів та інформерів з відкритих джерел. 5. Втілити їх у відповідні сторінки сайту. 6. Розглянути код скрипта і якщо це можливо змінити розміри, колір шрифту для стильової сумісності дизайну. Зміст звіту 1. Назва та мета виконання лабораторної роботи. 2. Скріншоти послідовності виконаних робіт з коротким описом. 3. Зазначити, які скрипти jQuery UI та АРІ було обрано і скріншоти результатів втілення до сторінки. 4. У висновку оцінити зручність використання бібліотеки jQuery UI та АРІ сервісів. Використані джерела 1. Офіційна сторінка jQuery http://jquery.com/ 2. Документація jQuery http://jquery-docs.ru/ 3. Уроки jQuery для початківців http://ruseller.com/lessons.php?rub=32 4. jQuery для початківців http://anton.shevchuk.name/jquery-book/ 5. Відеоуроки jQuery http://www.sdelaysite.com/jquery/jquery-1 6. jQuery документація http://jquerybook.ru/api/ 7. Офіційна сторінка jQuery UI http://jqueryui.com/ 8. Зустрічайте – jQuery UI! http://coolcoder.co.ua/zustrichajte-jquery-ui/ 8