3.2. Основні засоби веб-технологій

HTML – мова розмітки тексту

Всесвітня павутина складається з веб-сторінок, які створено у форматі HTML (HyperТext Markup Language, «мова розмітки гіпертексту»). HTML - це фундаментальна, базова технологія Інтернету.

HTML не є мовою програмування, це мова розмітки тексту, що використовує спеціальні оператори – теги (tag) чи інша назва дескриптори (descriptor) для розмітки текстового документа. Ці позначки вказують в якому вигляді буде виведено текстовий чи інший елемент у вікні браузера.

HTML дозволяє формувати на сторінці сайту текстові блоки, додавати до них зображення, організовувати таблиці, керувати відтворенням кольору, додавати до дизайну сайту звуковий супровід, організовувати гіперпосилання з переходом до інших розділів сервера або звертатися до інших ресурсів Інтернету і компонувати всі ці елементи між собою. Документи, що створено лише засобами HTML мають розширення .htm або .html.

Однією з основних функціональних особливостей мови HTML, завдяки якої вона і отримала свою назву, є гіперпосилання.

Гіперпосилання (Hyperlink) — це базовий функціональний елемент HTML-документу, який реалізовує зв'язок певного об'єкту веб-сторінки з іншим об’єктом. Для гіперпосилання може використовуватися як фрагмент тексту, так і графічний об'єкт, а сам гіперзв'язок можна встановлювати як між об’єктами одного сайту, так і між об'єктами, що розміщені на різних сайтах Інтернету.

HTML є мовою, що лише інтерпретується, тому, для виконання коду, його не потрібно компілювати. Інтерпретатор мови втілено в браузер, і він «компілює» код безпосередньо під час відкривання документа. Якщо в коді сторінки виявлено помилку, інтерпретатор, зазвичай, не видає відповідного попередження, а просто ігнорує весь «помилковий» рядок, що може зіпсувати зовнішній вигляд завантаженої сторінки. Це є важливим для розробників, тому слід бути уважним під час складання HTML-коду і ретельно тестувати результати своєї роботи.

CSS – каскадна таблиця стилів

CSS (Cascading Style Sheets) — це технологія опису зовнішнього вигляду документа, що створено засобами HTML, XML і XHTML.

CSS використовується для завдання кольорів, шрифтів, розташування елементів сторінки тощо. До появи CSS оформлення веб-сторінок вказувалося безпосередньо в HTML-коді сторінки. Проте, з появою CSS стало можливим принципове розділення змісту і представлення документа. За рахунок такого нововведення стало можливим легке застосування єдиного стилю оформлення для кількох сторінок сайту, а також швидка зміна цього оформлення.

Переваги:

• 
  Застосування кількох варіантів дизайну сторінки для різних пристроїв перегляду. Наприклад, для відображення на екрані монітора - дизайн буде розраховано на велику ширину. У разі друкування документу не буде роздруковане меню сайту, а у разі перегляду у мобільному комп’ютері чи телефоні, меню буде виведено після вмісту сторінки.
  
• 
  Зменшення часу завантаження сторінок сайту за рахунок перенесення правил представлення даних до окремого CSS-файлу. В цьому випадку браузер завантажує лише структуру документа і дані, що містяться на сторінці. CSS-файл з правилами представлення цих даних завантажується браузером лише один раз і зберігається в кеші браузера.
  
• 
  Простота подальшої зміни дизайну. Не потрібно виправляти кожну сторінку, достатньо лише змінити кілька правил у CSS-файлі.
  
• 
  Додаткові можливості оформлення. Наприклад, за допомогою CSS-правил можна застосувати обтікання певного блоку текстом або зробити так, щоб меню фіксовано знаходилося в певному місці при перегортанні сторінки.
  

Недоліки:

• 
  Різні браузери можуть в різний спосіб інтерпретувати правила CSS, і відповідно, по різному відображати одні і ті ж фрагменти сторінки.
  

DHTML – динамічна мова розмітки тексту

DHTML (Dynamic HTML) – це набір засобів, які реалізовують інтерактивність веб-сторінки без звертання до серверу. Тобто, певні дії відвідувача можуть спричинити зміну зовнішнього вигляду і вмісту сторінки.

DHTML побудовано на об'єктній моделі документа DOM (Document Object Model), яка розширює традиційний статичний HTML-документ. DOM забезпечує динамічний доступ до вмісту документа, його структури і стилів. В DOM кожен елемент веб-сторінки є об'єктом, який надається до змін. DOM не визначає нових тегів чи атрибутів, а лише забезпечує можливість програмного управління всіма тегами, атрибутами і каскадними листами стилів CSS.

JavaScript – мова сценаріїв

JavaScript – це мова, що призначена для написання сценаріїв для інтерактивних HTML-сторінок. Мова JavaScript не має жодного відношення до мови Java. Java розроблено фірмою SUN, а JavaScript – фірмою Netscape Communication Corporation. Первинною назвою було «LiveScript», але, з огляду на велику популярність мови Java, назву «LiveScript» з комерційних міркувань було змінено на «JavaScript».

JavaScript не призначено для створення автономних застосувань. Програмний код на JavaScript вписується безпосередньо в текст HTML-документа і інтерпретується браузером в міру завантаження цього документа. За допомогою JavaScript можна динамічно змінювати текст завантаженого HTML-документу і реагувати на події, які пов'язані з діями відвідувача або змінами стану документа чи вікна.

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

PHP - мова створення сценаріїв

PHP (Personal Home Page) - мова створення сценаріїв, яка давно переросла свою назву. Перша версія PHP була створена Расмусом Лердорфом в 1994 р. і була набором інструментів для відстеження поведінки відвідувачів сайту. З часом PHP з набору інструментів перетворилася на повноцінну мову програмування, а її назву було змінено як PHP HyperText Preprocessor (препроцесор гіпертексту PHP).

PHP - це серверна мова. Конструкції PHP, що вставлено в HTML-текст, виконуються сервером при кожному відвідуванні сторінки. Результат обробки конструкцій разом із звичайним HTML-текстом передається браузеру.

Основними конкурентами PHP є ASP (Active Server Pages) від компанії Microsoft і ColdFusion від компанії Allaire.

У порівнянні з ними PHP має ряд переваг, зокрема:

• 
  Висока продуктивність. PHP-програми працюють швидше, ніж ASP.
  
• 
  Функціональність. Розробку PHP-програми можна відокремити від власне розробки веб-сторінки, що спрощує працю і для програміста і для дизайнера.
  
• 
  Ціна. Мова PHP є абсолютно безкоштовною.
  
• 
  Простота у використанні. Програмісти, що мають досвід програмування на поширених мовах швидко зрозуміють синтаксис PHP.
  
• 
  Переносимість. Один і той же PHP-код можна використовувати як в середовищі Windows, так і на платформах UNIX.
  

ASP - активні сторінки сервера

ASP (Active Server Pages) —технологія, що є аналогічною до JavaScript і РНР. Для того, щоб зробити інтерактивну веб-сторінку із застосуванням макромови ASP, необхідно вбудувати в її код відповідний скрипт, що віддалено нагадує Java і СІ. Скрипт інтерпретується і виконується безпосередньо на сервері, після чого до браузера відправляється вже готовий HTML-документ з результатами роботи сценарію ASP. Для сторінок, що містять конструкції ASP, не має значення, яке програмне забезпечення встановлено на комп'ютері користувача, але принципове значення має тип сервера, який має підтримувати дану технологію.

XML - розширена мова розмітки

Основну увагу в мові XML зосереджено на даних. Тут, структурна розмітка даних і представлення даних є строго розділеними.

Основні причини створення XML:

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

XML є метамовою - спеціальною мовою, якою можна скласти повний опис класу інших мов, якими створено документи. XML містить набір правил, що дозволяють створювати унікальні застосування і підмножини даних.

В багатьох розробників виникають певні труднощі у зв'язку з абстрактністю XML і довільним використанням його методів. Насправді, XML - є досить логічною і добре організованою структурою, вона має чіткий синтаксис, що змушує строго дотримуватися певних правил. Починати вивчення XML слід із застосування вже отриманих знань про HTML. XML, як і HTML, використовує теги та атрибути.

Як мова розмітки веб-документів XML має свої особливості:

• 
  Гнучкість. XML дозволяє обробляти унікальні дані, і незалежно від їх характеру надає адекватні методи для їх зберігання і обробки.
  
• 
  Можливість налаштування. Гнучкість XML безпосередньо пов'язана з можливістю визначати власні дескриптори, необхідність в яких виникає в процесі рішення задачі.
  
• 
  Узгодженість. XML відрізняється синтаксичною цілісністю і строгою структурою.
  

Практично всі сучасні браузери підтримують XML. Вона здатна цілком замінити HTML, як засіб розмітки веб-сторінок, хоча вивчення XML є складнішим за вивчення HTML.

XSLT - розширена мова перетворення листів стилів

Мова XSLT (eXtensible Stylesheet Language Transformations) є транслятором, за допомогою якого можна вільно модифікувати початковий текст. XLST грає вирішальну роль в затвердженні XML як універсальної мови збереження і передачі даних. Область застосування XSLT є широкою - від електронної комерції до безпровідного Веб.

Фактична збірка результуючого документа відбувається, коли початковий документ і лист стилів XSLT передаються до синтаксичного аналізатору XSLT (XSLT-процесора).

При використанні XSLT в середовищі Веб синтаксичний аналіз може відбуватися або з боку користувача (в браузері), або з боку сервера.

Перетворення XSLT засновано на шаблонах. XSLT-процесор аналізує початковий документ і намагається знайти відповідний XSL-шаблон. Якщо такий шаблон знайдено, то виконуються інструкції, що містяться всередині нього.

Ajax - технологія для взаємодії з сервером без перевантаження сторінок

Ajax (Asynchronous Javascript And XML) це підхід до створення веб-застосувань за допомогою наступних технологій:

• 
  Стандартизоване представлення засобами XHTML і CSS.
  
• 
  Динамічне відображення і взаємодія з користувачем за допомогою DOM.
  
• 
  Обмін і обробка даних у вигляді XML и XSLT.
  
• 
  Широке застосування мови сценаріїв JavaScript.
  
• 
  Асинхронні запити за допомогою об'єкту XMLHttpRequest.
  

В стандартному веб-застосуванні обробкою всієї інформації займається сервер, браузер відповідає лише за взаємодію з користувачем, передачу запитів і виведення отриманих даних у форматі HTML.

В Ajax-застосуванні між користувачем і сервером з'являється ще один посередник – програмний механізм (рушій) Ajax. Він визначає, які запити можна обробити з боку клієнта, а які необхідно виконувати на сервері.

Поведінка сервера теж змінилася. Якщо раніше на кожен запит сервер видавав нову сторінку, то тепер він надсилає лише ті дані, які потрібні клієнту, а рушій Ajax в браузері формує з них HTML-код.

Асинхронність виявляється в тому, що далеко не кожен запит користувача скеровується до сервера, причому зворотне теж справедливо - далеко не кожна реакція сервера обумовлена запитом користувача. Велику частину запитів формує рушій Ajax, причому є можливим, щоб він передбачав запити користувача.

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

Створювати застосування на Ajax є трудомістким і складним завданням. Потрібно написати і відлагодити на JavaScript рушій з десятьох чи двадцятьох тисяч рядків коду плюс реалізувати серверну частину.

На сьогодні спостерігається тенденція на стрімке поширення Ajax-застосувань. Масштабні Ajax-проекти представлено у Google - Google Suggest (сервіс, що підказує найбільш популярні запити), Gmail і Google Maps. Найбільш ґрунтовну переробку програмісти Google зробили з поштовим інтерфейсом, тоді як Google Suggest і Google Maps дивують не стільки новизною підходу, скільки якістю реалізації.

Adobe Flash

Adobe Flash (раніше відома як Macromedia Flash), або просто Flash — мультимедійна платформа, що призначена для створення векторної анімації і інтерактивних застосувань (зокрема, ігор), а також для інтеграції відеороликів у веб-сторінки.

Основним призначенням даної технології є створення високоякісної інтерактивної анімації, яка має відносно невеликий розмір вихідного файлу. За допомогою Flash розробник має можливість виготовляти барвисті анімаційні заставки, певні елементи яких можуть «реагувати» на рухи миші, міні-ігри, озвучені мультиплікаційні кліпи і багато іншого.

Adobe Flash має інструменти для роботи з векторною, растровою і частково з тривимірною графікою, а також підтримує потокову трансляцію аудіо і відео. Для мобільних пристроїв випущено спеціальну «полегшену» версію платформи Flash Lite, яка має обмежену функціональність з розрахунку на можливості мобільних операційних систем та їх апаратних показників.

Основними засобами розробки є пакети Adobe Flash Professional і Adobe Flash Builder, що дозволяють створювати інтерактивні застосування, зокрема, презентації, інтро-заставки, ігри і мультфільми).

Flash використовує вбудовану мову програмування ActionScript, що базується на ECMAScript і є легкою для вивчення. Програмні модулі імпортуються в документ як аплети і вставляються в потрібний кадр анімації, де повинна відбутися динамічна зміна зображення. За допомогою спеціального редактора можна написати невелику програмку, що керує програванням кліпу, створити елементи, що надаються до індивідуальних налаштувань відвідувачами сайту, генерувати заставку з кількома варіантами продовження. Способів реалізації можливостей ActionScript є багато, але для використання всієї її потужності, необхідно мати певний досвід в програмуванні.

Стандартним розширенням для скомпільованих Flash-файлів (анімації, ігор і інтерактивних застосувань) є .SWF (Shockwave Flash або Small Web Format). Відеоролики у форматі Flash є файлами з розширенням FLV (Flash Video), а Flash в даному випадку використовується лише як контейнер для відеозапису. Розширення FLA відповідає формату робочих файлів в середовищі розробки.

Flash-вміст відтворюється за допомогою цілого ряду програмних засобів, але домінуюче місце на ринку займає офіційний програвач Adobe Flash Player, який поширюється як безкоштовний плагін для більшості сучасних браузерів. У випадку відсутності плеєра, браузер, стикаючись з документом у форматі Flash, як правило, сам зв'язується з відповідним вузлом, після чого починає завантаження і установку Flash Player в автоматичному режимі.

Також SWF-файли можна переглядати за допомогою інших плеєрів, наприклад, Gnash або Swfdec. FLV-файли відтворюються через Adobe Flash Player або через мультимедійні програвачі, такі як Quicktime і Windows Media Player, за наявності відповідних плагінів.