web-design-book-

Мал. 9

Перше у світі електронне ЗМІ – CULT OF THE DEAD COW, 1983 рік. Засновником видання став 14-ти річний хакером відомого під іменами Grandmaster Ratte та Swamp Rat. Можливість публікувати свої тексти для великої аудиторії хвилювала хлопця. Відомо, що до цього він намагався створити власну газету, але спромігся надрукувати всього 50 примірників.

доступ і надавали його лише передплатникам. Аудиторія дошки оголошень переважно обмежувалася жителями одного штату США, оскільки доступ до BBS здійснювався через телефонні лінії, а телефонувати за межі штату було дорого. Однак цю проблему часто вирішували за допомогою фрікінгу (нелегального доступу до телефонних ліній). Уже через рік до терміналу Варда Крістенсена підключилося 11 000 користувачів. Така кількість читачів видання вражає навіть тепер. Дехто підключався навіть з Європи та Австралії, що означало неймовірні телефонні рахунки, кількагодинні очікування, доки звільниться лінія. Але для комп’ютерників того часу такий спосіб комунікації був вигідним, оскільки на BBS публікували свіжі новини, на які у спеціалізованих друкованих журналах довелося б чекати місяцями. На базі BBS були створені численні повноцінні електронні видання – езини. Цікаво, що піонерами електронного видавництва іноді були 14-річні

школярі. Перший езин під назвою CULT OF THE DEAD COW (Культ Мертвої Корови) створила команда американських хакерів. Вони опублікували перший випуск у 1984-му році і видаються до сьогодні.

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

У 1979-му році програміст Том Траскот створив новий засіб масової комунікації – news (конференції). Цей винахід зняв просторові обмеження, які були у BBS. Користувачам не потрібно було додзвонюватися до терміналу, щоб отримати нові повідомлення. Тепер варто було

Мал. 10

Перший випуск у мережі конференцій FIDOnet. Це міжнародна некомерційна комп'ютерна мережа, створена 1984 року двома американськими програмістами

— Томом Дженнинґсом і Джоном Медиллом. Найбільшого розквіту ця мережа набула в 1996-му році, коли у ній наразовувалося близько 40 тисяч електронних видань.

малювання, які дозволяли вибудовувати лінії, графіки та схеми.

У 1988-му році фінський програміст Ярко Ойкарінен винайшов технологію IRC (Internet Relay Chat), яка давала можливість спілкуватися з іншими користувачами синхронно – в режимі реального часу. До цього спілкування в інтернеті відбувалося переважно асинхронно. Текст надсилали адресату і чекали, доки він його прочитає і відповість. Звісно, в асинхронному методі комунікації є своя перевага – користувач не прив’язаний до співбесідника, однак інколи відповідь була потрібна терміново, а для цього асинхронне спілкування не підходило. Згодом технологію IRC почали використовувати переважно для розваг. Тепер на її основі створено ряд програм для спілкування, найпопулярніша з

них – розробка ізраїльських програмістів – ICQ (в англійському прочитанні звучить як „я шукаю

Мал. 11

Приклад кольорової ASCII графіки. Привітальне вікно Aztec BBS.

Мал. 13

Творець гіпертекстової мережі HTTP – Тім Бернерс-Лі. Перший у світі веб-сайт він створив за адресою http://info.cern.ch. Цей сайт з'явився он-лайн в Інтернеті 6 серпня 1991 року. На ньому описувалося, що таке Всесвітня павутина, як встановити веб-сервер, як роздобути браузер тощо. Цей сайт також був першим в світі інтернет-каталогом.

тебе”). На технології IRC побудовані і складніші сервіси, наприклад, чати (від англ. chat – говорити), в яких можна спілкуватися сотням або й тисячам користувачів одночасно.

У 1989-му році у Женевській лабораторії ядерної фізики британський науковець Тім Бернерс-Лі винайшов HTML, що посприяло розширенню інтернет-аудиторії далеко за межі технічних та військових еліт. Видавничі можливості HTML були суттєво потужнішими за попередників. Нова технологія давала змогу макетувати текст разом із зображеннями (до того видання взагалі були виключно текстові), робити посилання на інші тексти безпосередньо з документу, а пошук документів став глобальним. Раніше, щоб знайти потрібний документ, інколи доводилося тижнями шукати його у різноманітних групах конференцій. З появою гіпертексту потрібний текст знаходили пошукові машини та каталоги. Посилання зв’язали

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

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

У кінці 90-х років ХХ-го сторіччя веб-дизайн переживав розквіт анімації, написаної мовою JavaScript. До того єдиними динамічними елементами веб-сторінок були GIF-файли, які «веселили» око користувача. З появою нової технології сайти нарешті стали інтерактивними – при наведенні курсора на кнопки вони змінювали колір, за курсором на сайті могли літати метелики, по сторінці стрибав чоловік з червоною парасолею тощо. Це була компактна мова програмування, і її використання не вимагало швидкого з’єднання з інтернетом. Тоді більшість користувачів у нашій країні входили в мережу через повільний телефонний зв’язок. Тепер завдяки новим технологіям пересічні люди мають доступ до швидкісного інтернету. Це дає можливість активно застосовувати в мережі мультимедіа (відео, аудіо, анімацію). Здійснюються мрії Біла Гейтса про «інформаційну магістраль», яка

поглине в собі телебачення, радіо, телефон та інші засоби комунікації. Швидкість з’єднання з мережею дозволила застосовувати «тяжкі» технології веб-дизайну, як flash-анімація. Це дозволило відірватися від лінійності та статичності у веб-дизайні. Сайти на базі flash по дизайну наблизилися до рівня поліграфічної реклами, але вони ще й рухалися, переходили на інші сторінки, використовували музику та дозволяли користувачам гратися у різні ігри (наприклад, вибрати віртуальний фломастер і розмалювати сайт).

У 2000-му році інтернет-ЗМІ пережили стрімке падіння своїх акцій. Цей обвал було названо– „крах дот комів” (від англ. dot com – .com). Ціна деяких інтернет-компаній зменшилася у 100 разів. Наприклад, Sport Internet Group до 2000го року коштувала 301 млн фунтів стерлінгів, а до кінця 2000-го – від трьох до п’яти млн. Криза зачепила переважно американські та європейські компанії, які вкладали в електронні ЗМІ та інтернет-комерцію мільярди доларів. Для таких проектів набирали штат працівників, знімали приміщення, проводили широкі рекламні акції у традиційних ЗМІ. В кінці 2000-го на початку 2001-го року масово почалося їх згортання. „Крах дот комів” був спричинений багатьма факторами. Основними можна вважати такі:

•протягом 90-х років перспективи комп’ютерних мереж значно перебільшували, як фахівці цієї галузі, так і журналісти, які з усього нового та незвичного робили сенсації. Тому склалося хибне враження, що інтернет дуже скоро витіснить традиційні методи комерції та засоби масової інформації. Це створило сприятливий інвестиційний клімат для мережевих компаній до 2000-го року, коли стало очевидним, що проекти не зможуть себе окупити;

•реклама не змогла окупити витрати на утримання видань. Якщо для традиційних ЗМІ реклама була ледь не основним джерелом прибутку, то прибутки в інтернеті були досить скромними.

•при створені нових електронних ЗМІ невиправдано „роздутими” були штати редакцій. Для підтримання сайту наймали сотні фахівців, які потребували високої платні;

•Підхід до електронних ЗМІ, як до традиційних. При створенні нових ресурсів використовували старі рекламні технології (створення бренду та іміджу ресурсу, реклама в традиційних ЗМІ) і майже не враховували специфіку мережі;

•велика конкуренція. Для створення газети або телеканалу потрібні величезні капіталовкладення, а в мережі можна запустити проект за кількасот доларів. Тому сайт, створений ентузіастами, часто має більшу відвідуваність, аніж сайт, на який витратили мільйони доларів.

Після „краху дот комів” інтернет зазнав суттєвих змін, які дослідники називають Мережа 2.0 (WEB 2.0). Цим терміном ми завдячуємо видавництву O’Reilly Media і компанії MediaLive International, які на спільному засіданні з’ясували основні особливості, що відділяють Мережу 2.0 від попередньої Мережі 1.0.

Електронні видання епохи Мережі 1.0 могли забезпечувати популярність та вплив на читачів лише силами редакцій. Вони створювалися, як еквіваленти друкованих видань, і мали з ними багато спільного. Такий підхід є дуже ефективним, але й занадто витратним. Утримувати будь-який інший ЗМК можна за рахунок реалізації продукції (періодичні та неперіодичні видання) чи розміщення реклами (радіо, телебачення, преса). В інтернеті реалізувати матеріальний носій інформації доволі складно, а прибутки від реклами настільки малі, що утримувати редакцію неможливо. У такій ситуації створення інтернет-видання супроводжується суттєвими фінансовими обмеженнями. Потрібно економити на журналістах, приміщеннях та інших обов’язкових атрибутах повноцінної редакції, щоб отримати певний прибуток. Усі ці ознаки стосуються не лише новинних сайтів, а й різноманітних

Мал. 13

Сторінка про Мережу 2.0 у найбільшій онлайн енциклопедії Вікіпедія. Це видання містить понад 18 млн. статей, що написані добровольцями з усього світу. Вікіпедія є п'ятим за популярністю веб-сайтом у світі — його

відвідують понад 400 млн. осіб в місяць. За обcягом відомостей і тематикою Вікіпедія вважається найповнішою енциклопедією, яка коли-небудь створювалася за всю історію людства.

інтернет-каталогів, інтернет-магазинів та інших видів електронної видавничої продукції.

Електронне видання Мережі 1.0, як і друковане, – це підконтрольний редакції носій інформації. Редакція стежить за усіма інформаційними потоками, набирає штат журналістів, проводить коректуру та внутрішню цензуру інформації і підготовлює її до публікації (здійснює макетування та верстку видання). Усе видання від початку до кінця створює та наповнює редакція. Головною відмінністю Мережі 2.0 є підхід до видання як до платформи, на якій здійснюється комунікація між користувачами мережі. Роль управління та редакторської цензури у таких виданнях зводиться до мінімуму. Однією з найперших колективну працю почала використовувати Yahoo! (www. yahoo.com). Yahoo! – це найпопулярніший в англомовному світі інтернет-каталог, у якому зібрані сотні тисяч посилань на сайти. Над його

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

З часом технології спрощувалися. З’явилися системи управління контентом сайту, з якими можна було працювати, не знаючи програмування. Зараз запустити нове інтернет-видання досить легко, потрібно лише обрати актуальну тематику і дати можливість усім, хто забажає висловлюватися на сайті. Як писав Біл Гейтс: „Легкість, із якою фірми та приватні особи публікують інформацію в інтернеті, змінила сам зміст цього дієслова. Інтернет проголосив себе місцем, де публікують контент. У нього достатньо користувачів, тому виникає виграш від позитивного зворотного зв’язку: що більше він залучить користувачів, то більше отримає матеріалів, а що більше отримає матеріалів, то більше у нього буде користувачів”.

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

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

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

виключно через веб-інтерфейс. Через нього здійснюється оперування текстовими редакторами, таблицями, сервісом зберігання файлів, прослуховуванням музики тощо. Тобто веб-інтерфейс замінює усі ті додаткові програми, які раніше потрібно було встановлювати на комп’ютері. Такі рішення стали можливі з появою систем управління контентом (від англ. Content Management Systems або CMS). Вони дали змогу поновлювати інформацію на сайті через браузер, оминаючи програмування. За допомогоютокої системи користувач міг робити багато операцій (реєструватися, писати новини та коментувати статті), не вивчаючи програмування.

Відцентрові тенденції продовжують набирати обертів у мережі. Користувачі і розробники сайтів намагаються зробити все, щоб децентралізувати інформацію. Велетенські децентралізовані файлові мережі-торенти (torrents) дають змогу знаходити потрібну інформацію на комп’ютерах інших користувачів і отримувати доступ до неї. Першою такою системою була мережа Napster, яку розробив Шон Фанінг у 1999-му році. Вона дозволяла легко обмінюватися музичними файлами з іншими людьми. Власники компаній-звукозапису подали на Фанінга до суду і мережа припинила своє існування. Незважаючи на те, що Napster був закритий за рішенням суду, він призвів до появи децентралізованих мереж, контролювати які набагато складніше.

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

Сучасні соціальні мережі, такі як facebook.com, odnoklassniki.ua та vkontakte.ua взагалі не створюють жодного контенту, вони лише надають своїм користувачам змогу комунікувати. У бага-

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

Усі мережеві технології вимагають оформлення, і курс «Веб-дизайн» – це перший щабель його опанування. Це вивчення базових технологій HTML та CSS, на яких заснована сучасна гіпертекстова мережа WWW. Веб-дизайн – один із найпрогресивніших предметів для вивчення, адже інтернет сьогодні дає можливості, яких людство не мало за всю у свою історію.

Мал. 13

Засновник найвідомішої у світі соціальної мережі на базі WEB 2.0 Марк Цукерберг. У березні 2010 року журнал «Forbes» визнав його наймолодшим мільярдером в своєму списку зі статком $4 млрд

Запитання для самоперевірки

1)Хто створив перше електронне видання в мережі

2)Коли з’явився інтернет

3)Що таке ASCII графіка

4)Хто створив мережу WWW

5)Що таке Мережа 2.0

6)Як передавалася інформація до появи інтернету

7)Що таке BBS

2Браузери

Історія браузерів

Internet Explorer

Mozilla Firefox

Opera

Google Chrome

Історія браузерів

Для перегляду веб-сторінок нам необхідна спеціальна програма

– браузер. Українською мовою цей термін інколи намагаються замінити словом «оглядач».

Перший браузер «WWW» створив Тім Бернерс-Лі і виклав його у відкритий доступ 25го грудня 1990-го року. На той час гіпертекстова мережа ще не встигла набути популярності, тому ця програма мала вузьке розповсюдження.

У 1993-му році в Іллінойському університеті Марк Андреесен та Ерік Байка розробили перший популярний браузер Mosaic 1.0. Ця програма підтримувала кілька платформ – PC та Macintosh, з’явилася можливість слухати музику, створювати закладки (вибране) та журнал, у якому зберігалися адреси відвіданих користувачем сайтів. У 1994-му році Андреесен пішов з проекту Mosaic і забрав з собою програмні коди. Він засновав фірму Netscape Communications і до кінця 1994 року випустив браузер Netscape, що майже відразу захопив увесь ринок браузерів. Компанія Microsoft взялася за розробку власного браузера Internet Explorer і випустила його у 1995-му році. Тоді ж почалася війна між цими двома компаніями. Слово «війна» вжите недарма, оскільки через їхні дії страждали як користувачі, так і власники сайтів. Обидві компанії вперто не хотіли узгоджувати, як повинен відображатися html-код, і сайти у різних браузерах мали абсолютно різний вигляд. Ще у 1994-му році науковці разом з Бернерсом-Лі заснували організацію W3C, яка повинна була контролювати стандарти HTML. Обидві компанії проігнорували цю ідею і продовжували конкуренцію. Проте у компанії Microsoft було більше шансів перемогти, оскільки вона випускала найпопулярнішу в світі операційну систему Windows. Microsoft вбудувала свій браузер в операційну систему так, що без нього вона не могла працювати. Тож браузер входив у вартість самого Windows, а користувачам не було сенсу

купувати окрему програму Netscape для перегляду веб-сторінок. Це була остаточна перемога. На Microsoft подавали до суду, бачачи у цьому монополізацію ринку, однак результатом тяганини було вилучення браузера з Windows лише на європейському ринку. Компанія Netscape Communications відкрила коди своєї програми для загального користування. Ядро програми називалося Mozilla. Група ентузіастів створила проект Mozilla Foundation, з метою створення безкоштовного альтернативного Internet Explorer браузера. Перші версії були не дуже вдалими і значно поступалися своєму головному конкурентові. Спільними силами програмістів усього світу 9-го листопада 2004го року вийшла нова версія Mozilla під назвою Firefox, яка майже за всіма характеристиками перевершувала Internet Explorer. Цей браузер повністю відповідав вимогам W3C. У перші 99 днів тільки з офіційного сайту було завантажено 25 мільйонів дистрибутивів цієї

Мал. 14

Браузер Netscape Navigator.

Мал. 15

Браузер Mozilla Firefox. Горішня частина браузера переобтяжена встановленими додатками та розширеннями.

програми. Робота над Mozilla не припиняється і він постійно оновлює свої можливості. Завдяки відкритому програмному коду, що дозволяє талановитим програмістам з усього світу разом працювати над цим проектом.

Окрім двох безсумнівних лідерів, на ринку браузерів існувало також багато альтернативних програм. Найвідоміша і найвдаліша з них - Opera, яка до того ж - найшвидший браузер серед усіх. Робота над ним почалася ще у 1994-му році норвезькою компанією Opera Software. Браузер створений на базі власного програмного ядра, що робить його унікальним. Тривалий час Opera використовували переважно досвідчені користувачі, як символ зневаги до конфлікту Netscape і Microsoft. Найбільшою проблемою цього браузера було зовсім неадекватне відображення коду веб-сторінки. Однак Opera містила багато новаторських ідей, які тепер є

стандартом для більшості браузерів. Вона перша використала багатовкладковий інтерфейс, коли сторінки відкриваються не в окремому вікні, а тому самому на вкладках. З їхніх нововведень досі використовують можливість масштабування сайту, вимкнення графіки на окремих сторінках та запам’ятовування вкладок, на яких цей браузер закрили востаннє. Opera продовжує дивувати своїх прихильників новинками. Наприклад, тепер є можливість керувати програмою за допомогою знаків-рухів мишкою. Це набагато зручніше, аніж кожного разу входити в меню. У Opera завжди був оригінальний спосіб запуску програми, можна обирати – завантажувати сторінки, на яких браузер був закритий, чи відкривати зі сторінки швидкого набору (Speed Dial), де вписані найнеобхідніші для роботи сайти, вони у зменшеному вигляді відображаються у дев’яти віконечках на одній сторінці. В Opera також дуже зручний менеджер завантаження файлів, який дозволяє

Мал. 16

Стартова сторінка Opera, на якій налаштовуються сайти, що потрібні користувачу найбільше.

Мал. 17

Стартова сторінка Safari, на якій налаштовуються сайти, що потрібні користувачу найбільше.

використовувати прямі посилання на файл. (панель завантажень – швидкі завантаження – вставити туди посилання). Сьогодні Opera широко використовують у кишенькових комп’ютерах і мобільних телефонах. В 11-й версії програми з’явився режим turbo, що дозволяє архівувати інформацію на сервері, а під час роботи розархівовувати її. Таким чином кількість отриманої інформації суттєво зменшується. Така функція зручна для користувачів, що мають обмеження розмірів завантажень з мережі, наприклад при мобільному підключенні. У нових версіях програми з’явилася додаткова функція Dragon fly, яка дозволяє переглядати HTML код та стилі CSS потрібного документа. Для цього слід натиснути правою кнопкою миші на веб-сторінці й обрати пункт меню «Переглянути код документа».

Для комп’ютерів на платформі Apple у 2003-му році був створений браузер Safari. Він має

більшість функцій, названих браузерів. Перевагою можна вважати тільки оригінальний дизайн програми, який повторює стиль оперцайної ситеми MacOS. На ядрі Safari розроблений ще один браузер Google Chrome. Його особливость у тому, що кожна вкладка браузера є окремим процесом, і якщо якийсь сайт «зависає», то закривається лише він, а не всі, як у інших браузерах. Chrome так само, як і Opera, зручний для веб-дизайну: якщо натиснути правою кнопкою на якийсь елемент веб-сторінки й обрати у меню «переглянути код документа» - у нижній частині з’явиться два вікна. У лівому можна переглянути HTML код, а у правому – стилі CSS. Google Chrome стрімко набуває популярності, витісняючи інші браузери.

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

Мал. 18

Браузер Google Chrome