Історичний розвиток веб-дизайну
Специалист по сметным работе и техническому контролю ___________________ Е.М. Лабкович Дата: 04.02. 2015 ВСТУП Темою переддипломної практики є аналіз та систематизація інформації для створення сайту «Backstage». Актуальність. Веб-дизайн— галузь веб-розробки і різновид дизайну, до завдання якого входить проектування призначених для користувача веб-інтерфейсів для сайтів. В результаті перетину двох галузей людської діяльності грамотний веб-дизайнер повинен бути знайомий з останніми веб-технологіями і володіти відповідними художніми якостями. Оскільки дизайн містить елементи мистецтва та інженерії, на нього розповсюджуються їхні правила, що можуть забезпечити створення якісних макетів та мокапів для мережевих видань. Одне з основних правил вказує, що дизайн має ціль і залежно від задач, обираються засоби. Таким чином дизайном є не оформлення веб-сторінок, а конструкторська діяльність, що покликана реалізувати заздалегідь визначні цілі. Огляд літератури. Для написання теоретичної частини переддипломної практики були використані праці таких авторів: Лопак Лайза «Web-дизайн для чайников» [11], Якоб Нільсен «Веб-дизайн. Книга Якоба Нільсена» [15]. Об’єктомдослідження є теоретичні засади створення веб-ресурсів у відповідності вимогам сучасних веб-технологій. Предметом дослідження є техніки створення сайту «Backstage». Мета дослідження — збір інформації і систематизація матеріалу з існуючих джерел, аналіз аналогів веб-сайтів інших користувачів мережі Інтернет. Завдання дослідження. Дослідити історичний розвиток веб-технологій, окреслити основні етапи процесу проектування сайту. Структура пояснювальної записки до переддипломної практики: робота складається зі вступу, одного розділу, висновків, списку використаних джерел та додатків. Перший розділ «ВИЗНАЧЕННЯ ЗАГАЛЬНОЇ ХАРАКТЕРИСТИКИ РОБОТИ ТА ВИКОНАННЯ ПЕРЕДПРОЕКТНИХ РОБІТ» розкриває історію сайтів, функціональне призначення, термінологію та їх елементи. Висновки містять підсумкову думку автора стосовно опрацювання теми дипломної роботи та проходження переддипломної практики. У списку використаних джерел надано перелік джерел, до яких автор звертався під час написання записки. В додатках надається необхідний ілюстративний матеріал. Перелік ключових слів: САЙТ, ВЕБ-ДИЗАЙН, ПРОЕКТУВАННЯ, ГРАФІЧНИЙ ДИЗАЙН.
РОЗДІЛ 1 ВИЗНАЧЕННЯ ЗАГАЛЬНОЇ ХАРАКТЕРИСТИКИ РОБОТИ Веб-дизайн— галузь веб-розробки і різновид дизайну, до завдання якого входить проектування призначених для користувача веб-інтерфейсів для сайтів. В результаті перетину двох галузей людської діяльності грамотний веб-дизайнер повинен бути знайомий з останніми веб-технологіями і володіти відповідними художніми якостями. Оскільки дизайн містить елементи мистецтва та інженерії, на нього розповсюджуються їхні правила, що можуть забезпечити створення якісних макетів та мокапів для мережевих видань. Одне з основних правил вказує, що дизайн має ціль і залежно від задач, обираються засоби. Таким чином дизайном є не оформлення веб-сторінок, а конструкторська діяльність, що покликана реалізувати заздалегідь визначні цілі. Історичний розвиток веб-дизайну Першим етапом створення Всесвітньої павутини було використання її науковими установами, урядами і військовими організаціями як засобу швидкого обміну переважно текстовою інформацією. Через це веб-документи тих часів були дуже простими, а потреба у їх візуалізації була вкрай низькою. Ще однією особливістю є те, що веб-дизайн дуже тісно пов’язаний з технологічним розвитком — браузерів, поштових клієнтів, швидкістю передачі даних, кількістю кольорів на моніторах та інших факторів. Розвиток веб-дизайну, починаючи з консолей і закінчуючи 3D проекціями [11]: - 1971-1989 рік — перший обмін повідомленнями; - початок 90-х — перша HTML сторінка; - ера першого покоління веб-сайтів; - мова програмування JavaScript. Каскадна таблиця стилів. Flash — 1995-1996 рр.; - кінець 90-х — розквіт флеш-технологій; - 2000 рік (травень) — реліз PHP4; - 2000 рік (грудень) — W3C та JavaScript; - 2005 рік — упровадження технології WEB 2.0; - 2009 рік — поява планшетів та смартфонів; - 2009 рік — занепад Flash, розробка HTML5; - 2011 рік — підтримка HTML5 браузерами. Перший обмін повідомленнями — 1971-1989 роки. Передачею даних через Інтернет вже займалися два роки, але інформація, що передавалася була призначена виключно для машин. Перша ж програма для відправки електронної пошти була розроблена в 1971 році, і саме цю дату ми будемо вважати датою відліку розвитку веб-дизайну, оскільки якість представлення інформації в цифровому вигляді за допомогою веба для кінцевого користувача стала актуальною [9]. У той період поняття веб-дизайну у всесвітній павутині не було ще актуальним, але ідеї вже зароджувалися в головах креативних інженерів та вчених, які входили до мережі ARPANET. В той час вже можна було обмінюватися повідомленнями і представляти інформацію, але це був лише чистий текст. Та вже тоді користувачі намагалися вирізнятися й робили це за допомогою ASCII зображень (Додаток А, рисунок 1.1.1). Форматування простого ж тексту та виділення заголовків відбувалося за допомогою нижніх підкреслень, слешів та інших символі. В 70-х р. ХХ ст з’явилися поштові розсилки, дошки оголошень, групи новин і подібного роду інформація обов’язково мала приваблювати увагу. Мережа була ще досить маленькою, тому комерційними оголошення були рідкістю й спеціалісти з дизайну не приймали участь в цьому. Початок 90-х років ХХ століття— перша HTML сторінка. Протягом майже 20-ти років візуалізація інформації в Інтернеті була на примітивному рівні. Переломним моментом стала розробка протоколу HTTP, а слідом за нею — мова гіпертекстової розмітки — HTML в 1989 році [15]. Перша інтернет-сторінка в консольному браузері виглядала не досить привабливо — чорне тло, на якому переважно білими літерами (або декількома ще яскравими кольорами) були розміщені різні тексти та написи (Додаток А, рис. 1.1.2). HTML була винайдена в рамках розробки протоколу та ніхто й не очікував, що ще наступні вже принаймні 20 років HTML буде лишатися головним інструментом для веб-розробників. Вже тоді перед веб-дизайнерами виникали проблеми коректного відображення на усіх платформах, в графічних оболонка і консолях. Консольних браузерів було багато, не всі станом на початок 90-х років мали системи з графічними оболонками. Ера першого покоління веб-сайтів. Мова розмітки HTML була винайдена в рамках розробки протоколу. Розробники і не очікували, що наступні вже принаймні 20 років мова HTML буде лишатися головним інструментом для веб-розробників. Вже тоді перед веб-дизайнерами виникали проблеми коректного відображення на усіх платформах, в графічних оболонка і консолях. Консольних браузерів було багато, не всі станом на початок 90-х років ХХ століття мали системи з графічними оболонками [3]. Поступово, із входженням інтернет-спілкування у повсякденне життя людей та зростанням потреби у доступному та зрозумілому для пересічного користувача інтерфейсі, на сцену вийшли люди, які називали себе «веб-дизайнерами». Оскільки більшість з них прийшли зі світу паперового дизайну, вони хотіли ще більшого контролю над зовнішнім виглядом створюваних web-сторінок. У 1996 році була видана дуже впливова книга Девіда Сігела під назвою «Creating Killer Web Sites», незабаром вона стала бестселером номер 1 на Amazon — немислиме досягнення для книги по web-дизайну. Інтернет-сайтів ставало все більше. Але якість всіх ресурсів була надзвичайно низькою. Відсутність будь-яких стандартів до веб-дизайну призвело до своєрідного хаосу. Кожен сайт був не схожий на попередній стилем оформлення. Однак їх унікальність забезпечувалась не оригінальністю зовнішнього вигляду, а, переважним чином, просто своєрідною логікою навігації, формами шрифтів, стилями вирівнювання тощо. Сайти робилися так, як того хоче розробник, судячи з його суб’єктивної думки, а не на підставі аналізу такої сучасної якості сайту, як юзабіліті (Додаток Б, рисунок 1.1.1). Всі сторінки були статичними, тобто вони існували з повною відсутністю динамічних елементів (окрім gif-картинок). Інтернет був виключно для читання, тобто мови не було про інтерактивність й про те, що сайт має «говорити на ти» з відвідувачем [2]. З появою Інтернету та «веб-майстрів» на пострадянському просторі веб-дизайн кардинально виділявся. На заході сайти були порівняні стриманіші в стилі оформлення — однорідний сірий або білий фон, дрібний шрифт (переважно Times), сині посилання, відсутність навіть gif анімації. В Росії ж, навпаки, сайти були як папуги — максимально різнокольорові й насичені різними зайвими елементами мультимедії, блимань тексту та іншими елементами, які мали б з точки зору веб-майстрів приваблювати увагу. Корінь цієї відмінності криється в тому, що для СНГ Інтернет став відкриттям значно пізніше, коли модеми вже були більш-менш швидкісними й можна було дозволити завантажувати зайві кілобайти зображень — саме це й вплинуло на формування смаків в рунеті. Стиль же ж оформлення західних веб-сайтів зароджувався в академічному середовищі, він був частиною наукових процесів, обмінів результатами наукових досліджень між науковцями. Перші веб-сторінки були призначені виключно для публікації наукових матеріалів [14]. Мова програмування JavaScript. Каскадна таблиця стилів. Flash — 1995-1996 рр. До 1996 року над дизайном сайту думали інженери. Залучати дизайнерів до роботи над пересічними інтернет-ресурсами було безглуздо, так як реалізація задумок дизайнерів в простому HTML була практично нереальною. Проте, з появою таких інструментів, як CSS, JavaScript, Flash розподіл роботи над сайтом — дизайн та програмування стала реальною. Більше того — з’явилася спеціалізація верстальника HTML/CSS, що відповідав за коректну верстку задумок дизайнерів[16]. Кінець 90-х років ХХ століття — розквіт флеш-технологій. Найкращим рішенням для того, щоб втілювати в сайт ідеї дизайнерів стала Flash-технологія. Реалізація меню, логотипів, динамічних елементів стала реальною за рахунок того, що flash-додатки відображалися однаково у всіх браузерах (головна умова, щоб в операційній системі був встановлений flash-клієнт компанії Macromedia). У цей період з’являються і повноцінні сайти на Flash, досить рідкісні, бо за загальним об’ємом сторінка була завелика для Інтернет-каналів того часу. Щоб зачекати, доки завантажиться сайт на Flash, доводилось чекати десятки хвилин, проте воно того коштувало, якщо дизайнер мав дійсно цікаву задумку (Додаток Б, рисунок 1.1.2). Зразком цьому є сайт відомої авторки — Дж. К. Роулінг, що був один з найфункціональнішим свого часу. Сайт був не просто джерелом інформації, але й містив в собі багато інтерактивних речей, наприклад: для того, щоб отримати додаткову, приховану інформацію потрібно було на сайті шукати потаємні кнопки, проходити міні-квести. Початок XXI-го століття був технологічним розквітом веб-індустрії. Це стрибок в розвитку PHP, як мови програмування для веб-сайтів, це й більш впевнена підтримка браузерами технологій CSS, скачок в розвитку JavaScript [16]. Реліз PHP4 — травень 2000-го року. Вже на кінці 1990-х PHP-3-версія стала найпопулярнішою мовою програмування для веб-додатків. PHP 4 знаменна тим, що в ній з’явилася підтримка сесій, безпечне опрацювання форм, тобто авторизація під обліковим запитом на сайті, зберігання на сайтах конфіденційної інформації стало звичною справою. 2000 рік, червень — Internet Explorer повністю підтримує CSS. В 2000 році браузер Internet Explorer 5.5. повноцінно підтримував CSS, а факт, що Miscrosoft на той час був монополістом інтернет-браузерів у всьому світі, посприяло розвитку цій технології і широкому її застосуванню.
|
