Лекції з дисципліни "Веб-дизайн"

Лекція 1: Основні засоби веб-технологій

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

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

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

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

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

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

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

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

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

Переваги CSS:

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

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

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

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

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

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

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

Особливості XML як мови розмітки:

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

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

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

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

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

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

PHP – серверна мова програмування

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

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

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

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

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

Серверне програмування

http://www.вебnav.ru/books/dreamweaver/server_programing_intro/

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

Як веб-сервер обробляє дані користувача

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

Дані від клієнта обробляються не самим веб-сервером. Для цього застосовуються спеціальні програми, що працюють разом з веб-сервером на тому ж серверному комп'ютері. Вони називаються серверними програмами, не мають інтерфейсу користувача і "спілкуються" тільки з веб-сервером, приймають від нього введені користувачем дані і повертають йому результат. Цим вони докорінно відрізняються від клієнтських програм, що працюють безпосередньо з користувачем.

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

Серверні програми поділяються:

1. Розширення веб-сервера (додатки формату ISAPI, модулі розширення Apache тощо). Це вбудовані серверні програми в веб-сервер, і є його складовими частинами. Вперше запропоновано фірмою Microsoft для їх сервера Microsoft Internet Information Server (інтерфейс ISAPI) і розробниками популярного веб-сервера Apache.
2. Активні серверні сторінки (ASP, РНР і ін.). Це звичайні статичні веб-сторінки, що збережені як файли, які, крім звичайного HTML-коду, містять команди, що обробляються або самим веб-сервером або його розширенням. Вперше запропоновано Microsoft для Internet Information Server.
3. Серверні сценарії, написані мовою, що інтерпретується (PНР, Python,Java,Ruby). Звичайні сценарії, що працюють на стороні сервера.

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

Розширення веб-серверів Internet Information Server фірми Microsoft створюються у вигляді бібліотек DLL (розширення мають формат ISAPI (Internet Server Application Programming Interface - інтерфейс програмування додатків інтернет-сервера). Формат модулів розширення Apache так і називається - модулі Apache.

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

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

Активні серверні сторінки - це звичайні веб-сторінки, що містять особливі серверні сценарії, що виконуються самим веб-сервером або його розширенням. Зокрема, ASP (Active Server Pages - активні серверні сторінки), що підтримуються Microsoft Internet Information Server, і JSP (Java Server Pages - серверні сторінки, написані на Java), що підтримуються рядом інших веб-серверів, працюють саме таким чином. Серверні сторінки ASP пишуться на мовах Java і VB, a JSP - тільки на Java.

Перевагами  активних серверних сторінок є легкість і швидкість написання і простота відлагодження. Крім того, оскільки активні серверні сторінки - це звичайні веб-сторінки з "вкрапленнями" програмного коду, їх написання легко освоять всі, хто знайомий з HTML. Недолік: відносна повільність і підвищені вимоги до системних ресурсів.

Серверні сценарії подібні до активних серверних сторіное тим, що є інтерпретуються, проте представляють собою "чистий" програмний код, без HTML-фрагментів. Інтерпретатор коду представлений як розширення веб-сервера . Сценарії зазвичай пишуться мовами програмування РНР, Java, Perl, Python, Ruby. Фактично писати сценарії можна будь-якою мовою програмування, для якого є інтерпретатор.

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

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.

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, за наявності відповідних плагінів.