Top Banner
Комп’ютерні мережі. Інтернет Зміст 1.1. Відомості про комп’ютерні мережі .................................................................................... 7 Комп'ютерні мережі ................................................................................................................ 7 Типи мереж .......................................................................................................................... 7 Інтернет .................................................................................................................................... 7 Послуги Інтернет ................................................................................................................. 8 Популярні служби Інтернет ............................................................................................... 8 Типи комутацій ...................................................................................................................... 10 Протоколи Інтернет................................................................................................................... 11 ІР-адресація ........................................................................................................................ 12 Доменна система імен ....................................................................................................... 13 1.2. Основні об’єкти Інтернету ................................................................................................ 16 Способи під’єднання до Інтернету ...................................................................................... 19 Модемне з'єднання (dial-up) ............................................................................................. 20 АDSL................................................................................................................................... 20 GPRS з'єднання .................................................................................................................. 20 З'єднання по виділеній лінії.............................................................................................. 20 Радіодоступ ........................................................................................................................ 21 Супутникове з'єднання ..................................................................................................... 21 1.3. Служба WWW .................................................................................................................... 22 Браузери ................................................................................................................................. 22 Загальні відомості про веб-сервер ....................................................................................... 22 Як веб-сервер обробляє дані користувача ...................................................................... 23 Анатомія сервера ............................................................................................................... 23 URL - Універсальний покажчик ресурсу ............................................................................ 24 2.1. Загальні відомості про веб-сайт ........................................................................................ 25 Історія заснування Веб...................................................................................................... 25 Класифікація веб-сайтів........................................................................................................ 26 Популярні сайти користувачів України .......................................................................... 27 2.2. Основні засоби веб-технологій ......................................................................................... 29 HTML – мова розмітки тексту ............................................................................................. 29 CSS – каскадна таблиця стилів ........................................................................................ 29 DHTML – динамічна мова розмітки тексту .................................................................... 30 JavaScript – мова сценаріїв ............................................................................................... 30 PHP - мова створення сценаріїв ....................................................................................... 30 ASP - активні сторінки сервера ........................................................................................ 31 XML - розширена мова розмітки ..................................................................................... 31 XSLT - розширена мова перетворення листів стилів .................................................... 32 Ajax - технологія для взаємодії з сервером без перевантаження сторінок .................. 32 Adobe Flash......................................................................................................................... 33 2.3. Система управління контентом CMS ............................................................................... 34
182

Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

May 30, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

Комп’ютерні мережі. Інтернет

Зміст 1.1. Відомості про комп’ютерні мережі .................................................................................... 7

Комп'ютерні мережі ................................................................................................................ 7 Типи мереж .......................................................................................................................... 7

Інтернет .................................................................................................................................... 7 Послуги Інтернет ................................................................................................................. 8 Популярні служби Інтернет ............................................................................................... 8

Типи комутацій ...................................................................................................................... 10 Протоколи Інтернет ................................................................................................................... 11

ІР-адресація ........................................................................................................................ 12 Доменна система імен ....................................................................................................... 13

1.2. Основні об’єкти Інтернету ................................................................................................ 16 Способи під’єднання до Інтернету ...................................................................................... 19

Модемне з'єднання (dial-up) ............................................................................................. 20 АDSL ................................................................................................................................... 20 GPRS з'єднання .................................................................................................................. 20 З'єднання по виділеній лінії.............................................................................................. 20 Радіодоступ ........................................................................................................................ 21 Супутникове з'єднання ..................................................................................................... 21

1.3. Служба WWW .................................................................................................................... 22 Браузери ................................................................................................................................. 22 Загальні відомості про веб-сервер ....................................................................................... 22

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

URL - Універсальний покажчик ресурсу ............................................................................ 24 2.1. Загальні відомості про веб-сайт ........................................................................................ 25

Історія заснування Веб ...................................................................................................... 25 Класифікація веб-сайтів ........................................................................................................ 26

Популярні сайти користувачів України .......................................................................... 27 2.2. Основні засоби веб-технологій ......................................................................................... 29

HTML – мова розмітки тексту ............................................................................................. 29 CSS – каскадна таблиця стилів ........................................................................................ 29 DHTML – динамічна мова розмітки тексту .................................................................... 30 JavaScript – мова сценаріїв ............................................................................................... 30 PHP - мова створення сценаріїв ....................................................................................... 30 ASP - активні сторінки сервера ........................................................................................ 31 XML - розширена мова розмітки ..................................................................................... 31 XSLT - розширена мова перетворення листів стилів .................................................... 32 Ajax - технологія для взаємодії з сервером без перевантаження сторінок .................. 32 Adobe Flash ......................................................................................................................... 33

2.3. Система управління контентом CMS ............................................................................... 34

Page 2: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

Основні завдання CMS ..................................................................................................... 34 Причини популярності CMS ............................................................................................ 34 Сховище інформації .......................................................................................................... 34 Шаблонізатори ................................................................................................................... 35 Система користувачів ....................................................................................................... 35 Схема роботи CMS ............................................................................................................ 35 Переваги CMS .................................................................................................................... 36 Критерії вибору CMS для створення сайту .................................................................... 36

2.4. Анімація, звук і відео у Веб ............................................................................................... 37 GIF-анімація ........................................................................................................................... 37

Флеш-анімація ................................................................................................................... 38 Flash-елементи сайту ......................................................................................................... 38 Доцільність використання анімації ................................................................................. 39

Робота із звуком в Інтернет .................................................................................................. 40 Відео на Веб-сторінці ........................................................................................................ 41 Відображення відео в Веб ................................................................................................. 41 Відео: потокове відтворення або завантаження? ........................................................... 42 Використання віртуальних екскурсій .............................................................................. 42 Зображення iPIX ................................................................................................................ 43

Плагіни для браузерів ........................................................................................................... 43 2.5. Необхідний інструментарій для веб-розробника ............................................................ 46

HTML-редактор ..................................................................................................................... 46 Текстові HTML-редактори ............................................................................................... 46 Візуальні HTML-редактори .............................................................................................. 47

Графічні редактори ................................................................................................................ 47 Adobe Photoshop ................................................................................................................ 47 Програми для створення GIF-анімацій ........................................................................... 47 Програми для флеш-анімації ............................................................................................ 48

FTP-клієнт .............................................................................................................................. 49 Браузери ................................................................................................................................. 49

3.1. Основні етапи розробки веб-сайту ................................................................................... 50 1. Передпроектна підготовка. ............................................................................................... 51

Ідея ...................................................................................................................................... 51 Кодинг і програмування ................................................................................................... 52 Тестування і доопрацювання ........................................................................................... 52 Просування, реклама ......................................................................................................... 53 Подальша підтримка і оновлення .................................................................................... 53

3.2. Макет сторінки ................................................................................................................... 54 Модульна сітка ...................................................................................................................... 54

Одноколонна структура .................................................................................................... 55 Двоколонна структура ...................................................................................................... 55 Трьохколонна структура ................................................................................................... 56

Позиціювання сторінки у вікні браузера ............................................................................ 57 Ширина документа ............................................................................................................ 57 Висота документа .............................................................................................................. 60

Навігація по сайту ................................................................................................................. 60 Посилання на головну сторінку ....................................................................................... 60 Меню (навігаційні панелі) ................................................................................................ 60 Гіперпосилання .................................................................................................................. 61

Поради з розробки ефективного дизайну: .......................................................................... 63 Модні тенденції ................................................................................................................. 63

3.3. Структура сайту .................................................................................................................. 64

2

Page 3: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

Логічна структура .................................................................................................................. 64 Принципи логічного проектування ................................................................................. 64 Логічна організація інформації ........................................................................................ 65 Поради з організації структури ........................................................................................ 66

Фізична структура ................................................................................................................. 67 Який файл завантажувати першим .................................................................................. 67 Заборона доступу до папок ............................................................................................... 68 Файли зображень ............................................................................................................... 68 Відстеження помилок ....................................................................................................... 69 Файлова структура сайту .................................................................................................. 69 Поради ................................................................................................................................ 70

3.4. Верстання сторінки ............................................................................................................ 71 Таблична верстка ............................................................................................................... 71 Блокова верстка ................................................................................................................. 71

4.1. Вибір колірної схеми для сайту ........................................................................................ 73 Колірна палітра .................................................................................................................. 73 Поради ................................................................................................................................ 76

4.2. Графіка для Веб .................................................................................................................. 77 Колір ....................................................................................................................................... 77 Роздільність ............................................................................................................................ 77

Роздільність зображення ................................................................................................... 77 Роздільність екрану ........................................................................................................... 78 Роздільність принтеру ....................................................................................................... 78

Пікселі і глибина кольору ..................................................................................................... 79 Моделі математичного опису кольору ................................................................................ 79

Модель RGB ....................................................................................................................... 80 Модель CMYK ................................................................................................................... 81 Взаємозалежність моделей RGB і CMYK ....................................................................... 82 Моделі HSB і HLS ............................................................................................................. 83 Модель Lab ......................................................................................................................... 83 Колірний обхват ................................................................................................................ 84 Запис у файл ....................................................................................................................... 84

4.3. Формати графічних файлів для Веб ................................................................................. 85 Графічні формати, що призначені для Веб ......................................................................... 85

GIF (CompuServe Graphics Interchange Format) .............................................................. 85 JPEG (Joint Photographic Experts Group) .......................................................................... 86 PNG (Portable Network Graphics) ...................................................................................... 87 PNG-8 .................................................................................................................................. 87 PNG-24 ................................................................................................................................ 88

Інші формати графічних файлів ........................................................................................... 88 Adobe Photoshop Document ............................................................................................... 88 TIFF (Tagged Image File Format) ...................................................................................... 89 BMP (Windows Device Independent Bitmap) .................................................................... 89 PDF (Portable Document Format) ...................................................................................... 89 WMF (Windows Metafile) .................................................................................................. 89 Adobe Illustrator Document ................................................................................................ 90 CorelDraw Document .......................................................................................................... 90

5.1. Шрифти для Веб ................................................................................................................. 91 За способом створення шрифти бувають растровими і векторними. .......................... 91 За шириною символів шрифти поділяють на моноширинні і пропорційні. ................ 91

Сімейства шрифтів ................................................................................................................ 92 Шрифт із зарубками (serif) ............................................................................................... 92

3

Page 4: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

Шрифти без зарубок (sans-serif) ....................................................................................... 92 Шрифти курсивного зображення (cursive) ...................................................................... 93 Декоративні шрифти (fantasy) .......................................................................................... 93 Гарнітура шрифту .............................................................................................................. 94

Вибір шрифту для сайту ....................................................................................................... 94 Безпечні шрифти ................................................................................................................... 94

Стандартні шрифти ........................................................................................................... 95 Веб-безпечні шрифти ........................................................................................................ 96 Шрифти, що підтримують кирилицю.............................................................................. 96 Безпечні лінійки шрифтів ................................................................................................. 97 Нестандартні (довільні) шрифти ...................................................................................... 97 Заміна тексту картинкою .................................................................................................. 98 Втілення шрифтів — EOT (Embedded OpenType) ......................................................... 98 CSS-правило @font-face ................................................................................................... 98

Доцільний шрифт для верстки сайтів .................................................................................. 99 Вибір розміру шрифту ........................................................................................................ 100

Абсолютні одиниці .......................................................................................................... 101 Відносні одиниці ............................................................................................................. 101

5.2. Кодування текстової інформації ..................................................................................... 103 Кодування кирилиці ............................................................................................................ 103

6.1. Інформаційне наповнення сайту ..................................................................................... 105 Підготовка текстів ............................................................................................................... 105

Джерела контенту для сайту .......................................................................................... 106 Підготовка графічних файлів ............................................................................................. 107

Основні принципи і рекомендації .................................................................................. 108 Веб-анімація ............................................................................................................................. 109 6.2. Лінгвістичні засоби проектування контенту сайтів ...................................................... 110

Використання на передпроектній стадії ....................................................................... 110 Використання на проектній стадії ................................................................................. 112 Використання на післяпроектний стадії ....................................................................... 112

6.3. Кросбраузерність сайту ................................................................................................... 115 7.1. Вибір домену для українського сайту ............................................................................ 116

Вибір доменного імені .................................................................................................... 116 Правила вибору доменного імені: ................................................................................. 116 Поради з вибору і використання доменних імен: ........................................................ 117 Реєстрація домену ........................................................................................................... 119

7.2. Веб-хостинг. Розміщення сайту в Інтернеті .................................................................. 120 Види хостингу ...................................................................................................................... 120

Безкоштовний хостинг .................................................................................................... 120 Платний хостинг .............................................................................................................. 120

Інші послуги хостинг-провайдера ..................................................................................... 122 Реєстрація доменних імен ............................................................................................... 122 Паркування домену ......................................................................................................... 122 Реселінг ............................................................................................................................. 123 Основні вимоги до майбутнього хостингу ................................................................... 123 Основні критерії вибору хостингу: ................................................................................ 124

8.1. Аналіз відвідуваності сайтів ............................................................................................ 125 Лічильники відвідувань ...................................................................................................... 125

Статистичні відомості ..................................................................................................... 126 Популярні лічильники .................................................................................................... 126

Аналізатор логів .................................................................................................................. 127 Лог-файл сайту ................................................................................................................ 127

4

Page 5: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

Програми для аналізу лог-файлів сайту ........................................................................ 129 Cookies .............................................................................................................................. 129 Пошукові роботи ............................................................................................................. 130 Рейтинг веб-сайту ............................................................................................................ 130

8.2. Пошукова оптимізація ..................................................................................................... 131 Основні параметри для оптимізації ............................................................................... 131 Історія ............................................................................................................................... 131

Методи оптимізації ............................................................................................................. 132 Біла оптимізація ............................................................................................................... 132 Сіра оптимізація .............................................................................................................. 133 Чорна оптимізація ........................................................................................................... 133

SEO-текст ............................................................................................................................. 134 Доцільний текст для сайту ............................................................................................. 134 SEO-копірайтинг ............................................................................................................. 136 Форматування тексту ...................................................................................................... 136

8.3. Інтернет реклама ............................................................................................................... 139 Банерна реклама .................................................................................................................. 139

Типи банерів .................................................................................................................... 140 Підходи до збільшення ефективності банерних рекламних повідомлень ................. 142

Контекстна реклама ............................................................................................................ 142 Переваги контекстної реклами ....................................................................................... 143 Розміщення контекстної реклами .................................................................................. 143

Адресні електронні розсилки ............................................................................................. 144 Одноразові розсилки ....................................................................................................... 144 Регулярні розсилки .......................................................................................................... 144 Способи реалізації ........................................................................................................... 144

Розсилання спам-повідомлень ........................................................................................... 145 Найбільш поширені види спаму .................................................................................... 145 Збір адрес електронної пошти ........................................................................................ 146 Заподіяна шкода .............................................................................................................. 146

9.1. Служба Веб ....................................................................................................................... 147 Веб 1.0................................................................................................................................... 147

Криза дот-комів ............................................................................................................... 147 Елементна база сайтів, що є типовою для Веб 1.0 ....................................................... 148

Веб 2.0................................................................................................................................... 148 Особливості Веб 2.0 ........................................................................................................ 149 Недоліки Веб 2.0 .............................................................................................................. 151 Переваги Веб 2.0 .............................................................................................................. 152 Приклади сайтів Веб 2.0: ................................................................................................ 152

Веб 3.0................................................................................................................................... 152 Особливості Веб 3.0 ........................................................................................................ 153

9.2. Поштові служби ................................................................................................................ 155 Служба електронної пошти в режимі оффлайн ................................................................ 155 Служби миттєвих повідомлень в режимі онлайн ............................................................. 155

Популярні месенджери ................................................................................................... 157 Історія електронної пошти ................................................................................................. 157

Перші дослідження .......................................................................................................... 157 Історія символу @ ............................................................................................................... 158

9.3. Пошукові системи і каталоги .......................................................................................... 159 Спеціалізовані пошукові системи .................................................................................. 161 Каталог ............................................................................................................................. 162 Особливості та відмінності пошукових систем та каталогів ...................................... 163

5

Page 6: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

Аналіз популярності пошукових систем ........................................................................... 164 Рейтинг пошукових систем в Україні ........................................................................... 164 Рейтинг пошукових систем в Росії ................................................................................ 164 Google залишається лідером Європи ............................................................................ 165 Google залишається лідером світу ................................................................................ 165

9.4. Служби новин та розсилок .............................................................................................. 166 Електронна поштова розсилка ........................................................................................... 166

Розсилка з погляду підписчика ...................................................................................... 166 Розсилка з погляду автора .............................................................................................. 167 Розсилка як спам .............................................................................................................. 167 Популярні служби розсилок ........................................................................................... 168

Технологія RSS .................................................................................................................... 168 9.5. Файлові служби Інтернет ................................................................................................. 171

Служба FTP .......................................................................................................................... 171 FTP-архіви ........................................................................................................................ 171

Файлові сховища ................................................................................................................. 172 Популярні файлові сховища ........................................................................................... 173 Пораді щодо роботи з файловими сховищами ............................................................. 173

Файлообмінні мережі .......................................................................................................... 173 Типи організації файлообмінних мереж ....................................................................... 174 Принципи роботи файлообмінних мереж ..................................................................... 174

Файлообмінні мережі P2P .................................................................................................. 175 Технологія Р2Р ................................................................................................................. 175 Основні вразливі сторони P2P ....................................................................................... 176

9.6. Служби онлайн-мовлення ................................................................................................ 178 Інтернет-радіо ...................................................................................................................... 178 Інтернет-телебачення .......................................................................................................... 178

Peer-To-Peer (Р2Р) телебачення ...................................................................................... 179 Перспективи ..................................................................................................................... 179

9.7. Віддалене управління ....................................................................................................... 180 Застосування віддаленого управління ........................................................................... 180 Організація віддаленого управління .............................................................................. 180

VNC-системи (Virtual Network Computing) ...................................................................... 181 9.8. Платіжні системи в Інтернеті .......................................................................................... 182

6

Page 7: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.1. Мережні технології. Основні відомості

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

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

Навіть, якщо майбутній веб-розробник має досвід роботи в Інтернеті і вміє поводитися з відповідним програмним забезпеченням, теоретичне підґрунтя буде корисним, бо стає зрозумілим необхідний комплекс термінів і понять.

Комп'ютерні мережі Комп'ютерною мережею називають довільну кількість комп'ютерів, що об’єднані певними

лініями зв'язку.

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

Типи мереж

• Локальні мережі об'єднують комп'ютери, що знаходяться на відносно невеликій відстані між собою, наприклад, в межах одного приміщення чи невеликого району. Керування в локальних мережах здійснюють системні адміністратори, які слідкують за станом мережі, встановлюють ступінь доступності ресурсів, визначають паролі доступу до ресурсів та права користувачів.

• Глобальні мережі об’єднують комп'ютери, що можуть знаходитися в різних містах і країнах. Глобальні мережі, як правило, є об'єднанням локальних мереж та окремих комп’ютерів.

Інтернет Самою відомою і популярною глобальною мережею є Всесвітня мережа Інтернет. Технічний

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

До мережі Інтернет під’єднано десятки тисяч локальних мереж, що рознесені по всьому світу та мільйони окремих комп’ютерів користувачів. Ці під’єднання здійснюються через Інтернет провайдерів – компанії, що надають послуги користування Інтернетом.

Під ’єднатися до Інтернету може кожен, з будь-якого комп'ютера, на якому встановлено необхідне програмне забезпечення, потрібно лише обрати спосіб під’єднання і придбати необхідне устаткування. Користувачеві абсолютно не обов'язково знати, як влаштовано Інтернет, він просто вмикає комп'ютер і користується послугами Інтернету.

7

Page 8: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.1. Мережні технології. Основні відомості

Інтернет – це глобальна комп'ютерна система, яка:

• Містить логічно взаємозв'язаний простір глобальних унікальних адрес. Тут кожен комп'ютер, якій під’єднано до Інтернету має власну унікальну адресу.

• Здатна підтримувати обмін інформацією, тобто здійснювати комунікацію віддалених комп’ютерів.

• Забезпечує функціонування різноманітних інформаційних та комунікаційних служб.

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

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

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

Послуги Інтернет

1. Інформаційні послуги – це послуги доступу до інформації:

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

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

2. Комунікаційні послуги – це послуги обміну інформацією та спілкування:

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

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

Послуги, які надаються користувачам Інтернету називаються службами або сервісами. Для того, щоб користувач міг користуватися певною службою, він має встановити на своєму комп’ютері відповідну до служби програму-клієнт. З боку Інтернету на відповідному до служби сервері має бути встановлена програма-сервер, яка спроможна обробляти запити від програми-клієнта користувача і надсилати йому результати обробки.

Популярні служби Інтернет

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

8

Page 9: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.1. Мережні технології. Основні відомості

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

o Веб сайти. o Веб форуми. o Блоги. o Віки проекти (Вікіпедія). o Інтернет магазини. o Інтернет аукціони. o Інтернет реклама. o Соціальні мережі. o Багатокористувацькі ігри.

2. Служби комунікацій

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

o Служби миттєвих повідомлень, месенджери

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

3. Пошукові системи

4. Служби новин та розсилок

o Поштові розсилки. Користувач обирає тематику і робить підписку на цикл статей (розсилок), що будуть надходити до нього з певною періодичністю.

o Технології RSS. Служба новин з обраних сайтів. Миттєве відображення будь яких нових надходжень, стрічка новин.

5. Файлові служби

o FTP-сервери. Служба пересилання файлів. Дозволяє емулювати на власному комп’ютері файлову структуру віддаленого комп’ютера і працювати з нею як з локальною директорією, наприклад завантажувати файли з FTP-сервера на свій комп’ютер і навпаки. Програмою клієнтом можуть бути браузер, файловий менеджер чи спеціалізований FTP-клієнт.

o Файлові хостинги

o Файлообмінні мережі

6. Служби мовлення

o Інтернет радіо. Служба, що дозволяє прослуховувати сотні радіостанцій, які віщають в Інтернеті. Існує можливість вибору радіостанцій з врахуванням мови та тематики віщання (наприклад, новини). Музичні радіостанції можна фільтрувати за музичними стилями (популярна, класична чи ретро музика). Чисельність радіостанцій в Інтернеті безперервно зростає.

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

7. Служби віддаленого доступу. Забезпечують доступ клієнта до іншого віддаленого комп’ютера і надає можливості працювати на ньому як на власному.

8. Електронні платіжні системи

9

Page 10: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.1. Мережні технології. Основні відомості

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

Типи комутацій Комунікаційні мережі повинні забезпечувати зв'язок своїх користувачів (абонентів) між собою.

Абонентами можуть бути комп’ютери, сегменти локальних мереж, факс-апарати або телефонні співбесідники.

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

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

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

Кожен абонент сполучено з комутаторами індивідуальною лінією зв'язку, яка закріплена за цим абонентом. Лінії зв'язку, що об’єднують комутатори використовуються спільно кількома абонентами.

Існують дві принципово різні схеми комутації абонентів в мережах:

• Комутація каналів.

• Комутація пакетів.

Мережі з комутацією каналів

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

Мережі з комутацією пакетів

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

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

10

Page 11: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.1. Мережні технології. Основні відомості

Протоколи Інтернет Глобальна мережа Інтернет містить велику кількість комп'ютерів, що працюють під

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

Протокол - це узгоджені, стандартні правила передачі інформації в мережі.

Розрізняють два типи протоколів Інтернету:

• Базові протоколи, що відповідають за фізичну пересилку електронних повідомлень будь-якого типу між комп'ютерами Інтернету. Ці протоколи (IP і TCP) настільки тісно пов'язані між собою, що, зазвичай, їх позначають єдиним терміном «протокол TCP/IP».

• Прикладні протоколи більш високого рівня, що відповідають за роботу служб Інтернету.

Комп'ютер не зможе працювати в Інтернеті, якщо на ньому не встановлено підтримку базових протоколів TCP/IP. Проте, на конкретному комп'ютері можуть бути відсутніми програми-клієнти, які використовують певний прикладний протокол. Наприклад, може не працювати електронна пошта або служба миттєвих повідомлень.

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

Протоколи прикладного рівня.

Протоколи прикладного рівня є посередником між програмою-клієнтом та мережею і є протоколами самими верхнього рівня. Вони перетворюють інформацію, що передається по мережі у форму, яка є зрозумілою для програми-клієнта.

Протокол HTTP (Hyper Text Transfer Protocol). За допомогою протоколу HTTP організується відправлення запитів до веб-серверу, обробка відповіді сервера у форматі HTML і відображення отриманої інформації у вікні браузера.

Протоколи для роботи з електронною поштою. Призначені для організації доставки та передачі повідомлень через поштовий сервер.

• Протокол SMTP (Simple Mail Transfer Protocol). Відправлення листів від клієнта до поштового серверу. Дозволяє відправляти повідомлення на кілька адрес, застосувати проміжне збереження, пересилати копії повідомлень на інші адреси.

• Протокол РОР3 (Post Office Protocol). Доставка листів від поштового серверу до клієнта. Цей протокол має вбудовані механізми розпізнавання адрес електронної пошти, а також модулі підвищення надійності отримання повідомлень.

Протоколи FTP, TelNet та інші. Призначені для постачання інформації до програм-клієнтів відповідних служб.

Протокол WAP (Wireless Application Protocol). Надає безпровідний доступ до інформаційних і сервісних служб Інтернету у разі під’єднання з мобільних пристроїв (телефонів, смартфонів, КПК).

11

Page 12: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.1. Мережні технології. Основні відомості

Протоколи транспортного рівня

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

Протокол отримує інформацію від протоколів прикладного рівня і розділяє її на окремі частинки – пакети. Важливою частиною пакету є його заголовок, в якому зазначається: номер пакету, інформація про комп’ютер-відправник та комп’ютер-приймач, а також контрольна сума, яка потрібна для перевірки цілісності пакету.

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

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

Такий спосіб передачі інформації є доволі зручним і швидким.

Самим поширеним і відомим є протокол TCP (Transmission Control Protocol), який має давню історію, є одним з найперших транспортних протоколів і постійно вдосконалюється.

Протоколи мережного рівня

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

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

Самим поширеним і відомим є ІР-протокол (InterNet Protocol).

ІР-адресація

Це унікальна числова адреса, що однозначно ідентифікує вузол, групу вузлів або цілу мережу. ІР-адреса має довжину 4 байти (4х8=32 біти). Для зручності ІР-адреса записується у вигляді 4 чисел (октетів), що розділені точками.

Наприклад,

• Десяткова форма представлення: 128.10.2.30

• Двійкова форма представлення: 0000000.0001010.0000010.00011110

• Шіснадцяткова форма представлення: С0.94.1.3

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

12

Page 13: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.1. Мережні технології. Основні відомості

ІР-адреса складається з двох логічних частин: номера мережі і номера вузла мережі. В залежності від класу мережі номер мережі може бути зазначено одним, двома чи трьома лівими октетами, а номер вузла, відповідно трьома, двома чи одним правим октетом.

Централізованим розподілом ІР-адрес займається державна організація Стенфордський міжнародний науково-дослідний університет, що знаходиться у Силіконовій долині.

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

Така система адресації призначена для адресації комп’ютерів і є зручною та ефективною для адміністрування (керування) мережею.

Доменна система імен

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

Доменна адреса (доменне ім’я) складається з кількох (від 2 до 5) символьних частин - доменів, що розділені точками. Ранг домену обчислюється з кінця адреси, наприклад:

site. lviv. ua

III рівень II рівень I рівень

Часто в доменній адресі вказують відповідну службу (www.edu.ua чи ftp.lviv.ua), а браузер автоматично дописує відповідний до даної служби протокол (http://www.edu.ua чи ftp://ftp.lviv.ua).

Домени І рівня

Від початку розвитку Інтернету, коли мережа поширювалася лише на теренах США, було створено перші 6 доменів:

.com Commercial. Комерційні структури.

.net Network. Організації, що забезпечують роботу мереж.

.org Organization. Некомерційні організації.

.edu Educational. Освітні заклади.

.mil Military. Військові організації.

.gov Goverment. Урядові організації. На сьогодні з’являються нові тематичні домени:

.info Information services. Інформаційні вузли.

.biz Business. Бізнес.

.aero Авіа індустрія.

.pro Professional. Для професіоналів, зокрема, юристів, лікарів, бухгалтерів.

.name Для особистого використання. Наприклад, щоб зареєструвати поштову скриньку имя@фамилия.name.

13

Page 14: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.1. Мережні технології. Основні відомості

.museum Музеї. Передбачається створення доменів другого рівня, для створення мережного каталогу музеїв миру.

.coop Cooperative. Для кооперативних співтовариств. Коли Інтернет вийшов на міжнародний рівень, створюють домени за територіальною

ознакою:

.ua Україна .az Азербайджан .lv Латвія

.ru Росія .kz Казахстан .lt Литва

.by Білорусь .kg Киргизстан .ee Естонія

.ge Грузія .tj Таджикистан .am Вірменія

.md Молдова .tm Туркменія .uz Узбекистан .su Країни бувшого

СРСР

.eu Європейський Союз

.bg Болгарія .us США

.gb

.uk Великобританія .hu Угорщина .ca Канада

.de Германія .gr Греція .cn Китай

.fr Франція .pl Польща .va Ватикан

.it Італія .ro Румунія .il Ізраїль

.es Іспанія .sk Словаччина .co Колумбія

.fi Фінляндія .si Словенія .tv Тувалу

.at Австрія .cz Чехія .jp Японія

Домени інших рівнів

Доменні адреси веб-сайтів складаються з доменів ІІ чи ІІІ рівня.

Домени ІІ рівня (наприклад, edu.ua, lviv.ua) може отримати будь яка приватна особа чи організація. Власник домену ІІ рівня може надавати домени ІІІ рівня (наприклад, lp.edu.ua, polynet.lviv.ua). Доменні імена можуть бути теоретично і більших рівнів, а практично використовують максимум 4 рівнів.

Багатомовні домени

Інтернет зародився в англомовному середовищі і обмеженням існуючої системи доменних імен DNS (Domains Name System) стала необхідність використовувати лише 37 символів ASCII - латинські букви від A до Z, цифри і символ «-». Швидке зростання кількості користувачів Інтернет в світі призвело до появи доменних імен, які зазначено не латиницею.

• Це зручніше, бо в імені домену можна використовувати національну мову.

14

Page 15: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.1. Мережні технології. Основні відомості

• Вирішує проблему нестачі зручних доменних імен, відкриваючи нові можливості для просування своїх товарів і послуг.

• Закріплює індивідуальність особи або компанії.

Багатомовний домен IDN (Internationalized Domain Names) - це звичайний домен латиницею, який містить обов'язковий префікс xn- (ознака IDN-домену) і закодовану частину, яка може бути перекодована в слово на національному алфавіті. Наприклад, в браузері можна з клавіатури набрати «мійдомен.ua» і його буде автоматично перекодовано в «xn-d1acklchcc.ua».

На перший погляд зручність є очевидною: компанії отримують прості імена, що легко запам'ятовуються, типу «сайт.ua», які просто продиктувати клієнтові. Але це лише на перший погляд. Нажаль, користувачам доведеться стежити, в якій розкладці слід набирати першу частину домену, а в якій другу, адже SU, COM і NET все одно доведеться набирати латиницею. А ще доведеться пам'ятати, що клієнту слід набрати саме «сайт», кирилицею, а не в звичний спосіб site латиницею.

З 2008 року компанія RU-CENTER почала реєстрацію багатомовних IDN доменів в доменних зонах SU, COM і NET. Для зони SU доступною є реєстрація доменів в латинському, грецькому, кирилиці, вірменському, івриті, арабському і грузинському алфавітах. Для зон COM і NET вибір є ширшим: доступні латинський, грецький, кирилиця, вірменський, іврит, арабський, грузинський, бенгальський, орія, Таміл, Канада, тайський, Тибет, бірманський, рунічний, монгольський алфавіти, а також японські, китайські і корейські ієрогліфи.

З 2010 року компанія Хостмастер ввела реєстрацію у доменах .com.ua і .kiev.ua. (доменні імена, які містять символи національних алфавітів). З використанням IDN тепер можна зареєструвати домени українською чи російською мовами. Реєстрація доступна для всіх охочим і нічим не відрізняється від реєстрації звичайного домену. Жодних особливих умов реєстрації для користувачів, що вже мають популярні домени на латиниці, не передбачено.

У 2009 році Координаційний центр Рунету подав заявку на створення домену «.рф». Домен «.рф» створено в кореневій зоні DNS 12 травня 2010 року. Запуск домену було приурочено до першого Російського Форуму з керування Інтернетом. Першими доменами, які почали працювати в зоні «.рф» стали http://президент.рф/ и http://правительство.рф/. Тепер, практично всі сучасні браузери підтримують кириличні доменні імена.

Більшість Інтернет сайтів кириличного домену «.рф» є дзеркалами латинських доменів .ru .com .travel тощо. На такі сайти можна зайти двома способами: через кириличний домен і через латинський домен. Вміст обох сайтів є ідентичним, за винятком доменного імені.

До таких сайтів відносяться:

• http://президент.рф ідентичний до http://kremlin.ru

• http://правительство.рф ідентичний http://government.ru

• http://кц.рф ідентичний до http://www.cctld.ru та інші.

Деякі сайти, зареєстровані в зоні «.рф» автоматично перескеровують відвідувачів на дзеркало з латинським іменем.

Наприклад, при наборі в адресному рядку http://яндекс.рф браузер автоматично переходить на адресу http://yandex.ru, а при наборі http://мэйл.рф — на адресу http://mail.ru. В той же час при вході на сайт http://rspp.ru браузер буде автоматично скерований на кириличний домен http://рспп.рф.

У домені «.рф» присутні також імена, які не мають латинських еквівалентів, наприклад? http://диалогурал.рф.

15

Page 16: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.2. Мережні технології. Основні об’єкти Інтернету

1.2. Основні об’єкти Інтернету Глобальна мережа Інтернет є сукупністю вузлів, що містять комутаційне устаткування і

сервери. Вузли об'єднуються між собою за допомоги каналів зв'язку (рис. 2.1).

Рис. 2.1. Загальна структура основних об’єктів в Інтернет

М - міжнародний провайдер ЛМ - локальна мережа Зер - дзеркало Н - національний провайдер ПС - проксі-сервер Б - брандмауер Р- регіональний провайдер Ш - шлюз К - комп'ютер

Провайдери (Internet Service Provider, ISP)

Керування вузлом Інтернету здійснює організація, яка називається провайдер (provider). Провайдерів можна умовно розділити на міжнародних, національних і регіональних.

З юридичної точки зору, Інтернет провайдер — це оператор зв'язку, що має ліцензію на один з наступних видів діяльності:

• Послуги зв'язку із наданням каналів зв'язку.

• Послуги зв'язку в мережі передачі даних, за винятком передачі голосової інформації.

• Послуги зв'язку в мережі передачі даних з передачею голосової інформації.

Ліцензії провайдерам видаються Національною радою України з питань телебачення та радіомовлення.

Інтернет провайдери різняться відповідно до послуг, що надаються:

• Провайдери доступу - надають доступ до Інтернету по виділених або комутованих каналах зв'язку, безпровідний доступ до Інтернету.

• Магістральні провайдери (первинні) мають у власності магістральні канали зв’язку. Вони забезпечують обмін трафіком із зарубіжними вузлами. Зазвичай, продають трафік лише у

М М

М М Н

Н

Ш

Р

Р

Р ПС ЛМ

Б ЛМ

ЛМ

З

К

К

16

Page 17: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.2. Мережні технології. Основні об’єкти Інтернету

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

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

• Провайдери останньої милі є канальними провайдерами. Остання миля — канал, що сполучає кінцеве (клієнтське) устаткування з вузлом доступу провайдера (оператора зв'язку). Наприклад, при наданні послуги під’єднання до мережі Інтернет останньою милею є ділянка від порту комутатора провайдера на його вузлі зв'язку до порту маршрутизатора клієнта в його офісі. Для послуг комутованого (dial-up) під’єднання останньою милею є ділянка між модемом користувача і модемом (модемним пулом) провайдера. До технологій останньої милі зазвичай відносять xDSL, FTTx, Wi-Fi, WiMax, DOCSIS, PLC.

• Хостинг провайдери - розміщують інформацію клієнта на своєму дисковому просторі і надають різноманітні послуги:

• Виділення дискового простору для зберігання і забезпечення роботи сайтів (хостинг).

• Підтримка роботи поштового сервера.

• Розміщення устаткування клієнта на площах провайдера (колокація).

• Оренда виділених і віртуальних серверів (VDS або VPS).

• Резервування даних та інші послуги.

Комп’ютери та локальні мережі

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

Сервером називають комп'ютер, на якому встановлено програми-сервери. На одному комп'ютері-сервері можуть працювати відразу кілька програм-серверів, які виконують функції відповідної служби. Тому, часто вживають назви «web-сервер», «ftp-сервер», «dns-сервер», «proxi-сервер». Проста назва «сервер» найчастіше позначає сам комп'ютер.

Проксі-сервер

Проксі-сервер це серверна програма, що керує вхідним та вихідним трафіком Інтернету в локальній мережі і виконує багато інших функцій:

• Забезпечення доступу комп'ютерів локальної мережі до Інтернет.

• Кешування даних. При частому звертанні користувачів локальної мережі до однакових популярних ресурсів, проксі-сервер може тримати їх копію і видавати її за запитом. Це зменшує навантаження на канал до зовнішньої мережі і значно пришвидшує відображення інформації на комп’ютері користувача.

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

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

• Обмеження доступу з локальної мережі до зовнішньої. Можна заборонити доступ до визначених веб-сайтів, обмежити використання Інтернету для певних локальних

17

Page 18: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.2. Мережні технології. Основні об’єкти Інтернету

користувачів, встановлювати квоти на трафік або смугу пропускання, відфільтровувати рекламу та віруси.

• Анонімність доступу до різних ресурсів. Проксі-сервер може приховувати відомості про джерело запиту або користувача. В цьому разі зовнішні сервери побачать лише інформацію про проксі-сервер, наприклад IP-адресу, але не зможуть визначити справжнє джерело запиту. Існують також проксі-сервери, які передають до зовнішнього сервера хибну інформацію про справжнього користувача.

Брандмауер (фаєрвол, мережний екран)

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

В якості таких засобів захисту широко застосовуються міжмережні екрани (рис. 2.2), що можуть називатися:

• Brandmauer (від нім. brand - горіти, mauer – стіна), найчастіше вживається як брандмауер.

• Firewall (від анг. fire - вогонь, wall - стіна), вживається як фаєрвол.

Рис 2.2. Міжмережний екран.

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

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

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

Шлюз

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

Дзеркало

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

18

Page 19: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.2. Мережні технології. Основні об’єкти Інтернету

Маршрутизатор (Router)

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

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

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

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

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

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

Способи під’єднання до Інтернету Якщо, наприкінці 20 століття для переважної більшості користувачів Інтернету в Україні

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

Найпоширенішими способами на сьогоднішній день є:

• Модемне з'єднання (Комутований доступ) – Dial-Up, ADSL.

• З'єднання по виділеній лінії (оптоволоконний кабель чи «скручена пара»).

• GPRS – доступ через мобільний телефон.

• Радіодоступ.

• Супутниковий Інтернет.

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

Основною характеристикою будь-якого під’єднання до Інтернету є швидкість передачі даних. Вона вимірюється в кількості інформації, що передається користувачеві за одиницю часу (за одну секунду) і, зазвичай, вимірюється в кілобайтах/сек (Kb/s) або кілобітах/сек (kbps). Для високошвидкісних каналів швидкість вимірюється вже в Мегабітах або Мегабайтах в секунду.

19

Page 20: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.2. Мережні технології. Основні об’єкти Інтернету

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

Модемне з'єднання (dial-up)

Найстаріший спосіб під’єднання, але на даний час практично не використовується. Модемне (dial-up) під’єднання використовується лише в містах, де немає широкого вибору провайдерів.

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

Плюсами такого з'єднання є простота налаштування, встановлення лише аналогового модему, низька ціна устаткування, багато тарифних планів, що пропонують провайдери. Недоліків у модемного з'єднання є значно більше: зайнятість телефонної лінії абонента, низька швидкість передачі даних (зазвичай 34 Кб/сек), низька якість з'єднання і передачі даних, висока вартість послуг Інтернету.

АDSL

Широко вживана і популярна технологія ADSL (Asymmetric Digital Subscriber Line), що надає високошвидкісний широкосмуговий доступ до Інтернет по звичайних аналогових телефонних лініях. Швидкість передачі даних є високою. Завдяки частотному розділенню діапазонів сигналів в телефонній лінії, дана технологія не блокує телефонну лінію і абоненту не потрібно додзвонюватися до провайдера.

GPRS з'єднання

У зв'язку з швидким розвитком мобільного зв'язку в Україні майже в кожної людини є мобільний телефон. Практично всі провайдери на сьогоднішній день пропонують послугу використання мобільного телефону в якості модему. Для доступу до Інтернету використовуються вільні канали оператора мобільного зв'язку.

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

З'єднання по виділеній лінії

Провайдер проводить до комп'ютера абонента виділену лінію (кабель «скручена пара» або оптоволоконний кабель) і видає діапазон IP-адрес для виходу абонента до Інтернету. Користувач отримує вільну телефонну лінію, постійний зв'язок з Інтернетом, хорошу якість з'єднання і передачі даних, високу швидкість (до 100 Мбіт/с).

Вартість встановлення і налаштування такого з'єднання залежить від відстані комп'ютера до точки під’єднання у провайдера, і є дещо більшою у порівнянні з іншими способами з'єднання. Якщо комп'ютер буде перенесено в інше місце до нього знову доведеться прокладати кабель.

20

Page 21: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.2. Мережні технології. Основні об’єкти Інтернету

Радіодоступ

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

До плюсів відносяться висока швидкість з'єднання і мобільність абонента. До мінусів радіодоступу можна віднести дороге устаткування і високу абонентську плату. Якість з'єднання і передачі даних залежить від погоди та видимості базової передатної станції.

Супутникове з'єднання

Супутникове з'єднання буває однобічним (асинхронним) і двобічним. Найчастіше супутниковим Інтернетом називають асинхронний (або суміщений) спосіб доступу – дані до користувача поступають через супутникову антену, а запити від користувача передаються за іншим з'єднанням – GPRS або наземними каналами (ADSL, dial-up).

Швидкість передачі даних залежить від провайдера і тарифного плану, що вибрано користувачем. Провайдери супутникового Інтернету пропонують широкий вибір тарифних планів, безлімітний доступ, безкоштовний прийом супутникового телебачення.

Мінусом є наявність каналу для вихідного трафіку – телефонної лінії або телефону з підтримкою GPRS.

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

21

Page 22: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.3. Мережні технології. Служба WWW

1.3. Служба WWW WWW (World Wide Web), Веб, Всесвітня Павутина - це розподілена інформаційна система,

що базується на концепції гіперпосилань.

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

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

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

Взаємодія «клієнт-сервер» відбувається за певними правилами - протоколом. Протокол, який прийнято для служби Веб, називається HTTP (Hyper Text Transfer Protocol).

На сьогодні веб-документи окрім тексту та графіки містять анімацію, відео і звук. Але основним у веб-документах є гіперпосилання, які можуть бути як внутрішніми перехресними посиланнями, так і посиланнями на інші веб-документи, що зберігаються на різних веб-серверах. Щоб реалізувати всі можливості Веб, було розроблено спеціальну мову HTML (Hyper Text Markup Language). Документ, що складено мовою HTML після інтерпретації браузером набуває вигляду веб-документу.

Браузери Браузер (browse - переглядати, оглядач) - це вікно у світ Інтернету, без якого не може обійтися

жоден користувач. Часто вживають терміни навігатор, переглядач. Практично всі популярні сучасні браузери поширюються безкоштовно або у комплекті з іншим застосуванням.

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

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

програму (сервер, веб-сервер або HTTP-cepвер). Вона приймає запити від клієнтської машини, обробляє їх і відправляє клієнту результати обробки. Також, веб-сервер виконує багато інших корисних функцій.

Як правило, веб-сервери працюють на лініях з великою пропускною здатністю, наприклад, в мережах з оптоволоконними каналами зв'язку.

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

22

Page 23: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.3. Мережні технології. Служба WWW

На даний час на більшості Інтернет вузлів використовують два типи серверних програм:

• Internet Information Server, призначено для роботи під Windows NT.

• Apache, призначено для платформ, що сумісні із стандартом UNIX.

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

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

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

Запити, що відправляє програма-клієнт, обробляються серверними програмами, що встановлено на серверному комп'ютері.

Окрім відповідної програми веб-сервер повинен мати власну ІР та доменну адреси, які обов’язково фіксуються в розподіленій службі адрес DNS (Domain Name System) і відповідають її стандартам.

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

Анатомія сервера

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

Пошук потрібної сторінки здійснюється в певній директорії, яку відведено на веб-сервері для сайту. Зазвичай, назва директорії збігається з назвою доменної адреси сайту. У разі звернення до сайту в цілому, веб-сервер автоматично відправляє так звану «стартову сторінку», яка має назву index.* (index.html) або в деяких випадках — default.* (default.html).

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

Додатково в кореневій директорії розташовують службові файли:

• not_found.html — документ, який буде відображено у випадку, якщо http-сервер не зміг знайти запрошений користувачем файл.

• forbidden.html — відображається як повідомлення про помилку, якщо доступ до запрошеного документа заборонено.

• robots.txt — файл, в якому спеціальним чином описуються правила індексації сайту для пошукових машин.

23

Page 24: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

1.3. Мережні технології. Служба WWW

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

В решті випадків доведеться користуватися так званим ftp-доступом. Розробник за допомогою ftp-клієнтів може вивантажувати необхідні файли у відведену для сайту директорію. В обох випадках потрібно буде знати реєстраційні дані і пароль для доступу до системи.

URL - Універсальний покажчик ресурсу IP-адреса чи доменна адреса дозволяють однозначно ідентифікувати веб-сервер в мережі

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

Для безпомилкового отримання потрібної інформації і в потрібному форматі використовується універсальний покажчик ресурсу URL (Universal Resource Locator), який однозначно ідентифікує будь-який ресурс в мережі Інтернет. Саме такий рядок відображається в адресному полі браузера.

http://www.site.lviv.ua/documents/page.html або http://213.82.46.1/documents/page.html

http:// www. site.lviv.ua/ documents/ page.html протокол служба доменна адреса шлях файл

Універсальний покажчик ресурсу відображає:

• Протокол відповідної служби. В даному прикладі використано протокол http:// – протокол передачі гіпертексту.

• Назву служби. В даному прикладі це служба Веб - www

• Доменну або IP-адресу, яка однозначно ідентифікує веб-сервер в мережі Інтернет, на якому розміщено потрібний сайт чи інший ресурс.

• Шлях, що складається з імен директорій, розділених символом «/» (слеш), послідовно відкриваючи які, можна «дістатися» до потрібної інформації. У даному прикладі інформація знаходиться в директорії «documents».

• Ім'я файлу, який містить потрібну інформацію. В цьому прикладі інформація знаходиться у файлі page.html.

Певні застереження

• Якщо браузер використовують для служби Веб, то в адресному полі можна не вказувати назву протоколу і назву служби. Хоча іноді, залежно від налаштувань, веб-сервер скеровує запити www.site.lviv.ua та site.lviv.ua в різні директорії.

• Браузер можна використати як програму клієнт для інших служб, наприклад для служби FTP. В цьому випадку до ресурсів FTP-серверу можна доступитися, якщо ввести в адресному полі браузера ftp://ftp.site.lviv.ua

• Деякі веб-сервери на відміну від комп'ютерів користувачів є чутливими до регістру літер, в якому представлено імена директорій і файлів, тому назви «documents», «DOCUMENTS» або «Documents» будуть позначати різні директорії. Варто назви всіх об’єктів сайту писати рядковими (маленькими) літерами.

• Щоб уникнути помилок, які пов'язані з відмінностями в обробці кодувань кириличної мови різними серверами, назви варто зазначати латиницею.

24

Page 25: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.1. Сучасні веб-технології. Загальні відомості про веб-сайт

2.1. Загальні відомості про веб-сайт Веб-сайт (web — «павутина», «мережа» і site — «місце», website - «місце в мережі») або

просто сайт — це сукупність електронних документів (файлів) приватної особи або організації, що об'єднана під однією адресою (доменною або IP-адресою). Окрім веб-сайтів в мережі Інтернет існують WAP-сайти для мобільних телефонів чи комп’ютерів. Сукупність сайтів складає Всесвітню павутину.

Спочатку веб-сайти були лише збіркою статичних документів. На тепер сучасні сайти в більшості є динамічними та інтерактивними. Це стало можливим завдяки втіленню веб-застосувань (жаргонна назва – движок, рушій) — готового програмного комплексу для вирішення завдань веб-сайту. Веб-застосування втілюється у склад сайту, і працює разом з ним.

В більшості випадків в Інтернеті один сайт має одну доменну адресу. Саме за доменними адресами сайти ідентифікуються в глобальній мережі. Можливими є інші варіанти: один сайт на кількох доменах або кілька сайтів під одним доменом.

Зазвичай, великі сайти (веб-портали) використовують кілька доменів, щоб логічно відокремити різні види послуг (mail.google.com, news.google.com, maps.google.com). Іноді, окремі домени виділяють для іншої мовної версії. Наприклад, google.com.ua і google.ru логічно є сайтом Google з різними мовами інтерфейсу, але технічно це різні сайти.

Об'єднання кількох сайтів під одним доменом є характерним для безкоштовних хостингів. Тут, зазвичай, використовується домен третього рівня (mysite.example.com), але іноді для ідентифікації сайтів в адресі після вказування доменної адреси хосту зазначено тильда і ім'я сайту (example.com/~my-site-name/).

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

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

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

Самий перший сайт info.cern.ch з'явився в 1990 році. Його автор, Тім Бернерс-Лі, опублікував на ньому опис нової технології World Wide Web, яка базується на протоколі передачі даних HTTP, системі адресації URL і мові гіпертекстової розмітки HTML. Також, на сайті було описано принципи установки і роботи серверів та браузерів. Сайт став і першим в світі Інтернет-каталогом, бо згодом Тім Бернерс-Лі розмістив на ньому список посилань на інші сайти.

Всі необхідні інструменти для роботи першого сайту, Бернерс-Лі підготував заздалегідь — наприкінці 1990 року з'явилися перший гіпертекстовий браузер WorldWideWeb з можливостями веб-редактора, перший сервер на базі NeXTcube і перші веб-сторінки. Тім Бернерс-Лі є «батьком» базових технологій Веб — HTTP, URI/URL і HTML.

Засновник Вебу вважав, що гіпертекст може бути основою для мереж обміну даними, і йому вдалося втілити свою ідею в життя. Ще у 1980 році Тім Бернерс-Лі створив гіпертекстове програмне забезпечення Enquire, яке використовувало для зберігання даних випадкові асоціації. Згодом, працюючи в Європейському центрі ядерних досліджень в Женеві (CERN), він запропонував колегам опублікувати гіпертекстові документи, що пов'язані між собою гіперпосиланнями. Бернерс-Лі

25

Page 26: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.1. Сучасні веб-технології. Загальні відомості про веб-сайт

продемонстрував можливість гіпертекстового доступу до внутрішніх документів, а також до новинних ресурсів Інтернету. В травні 1991 року в CERN було затверджено стандарт WWW.

На даний час Тім Бернерс-Лі очолює заснований ним Консорціум Всесвітньої павутини (World Wide Web Consortium), який займається розробкою і впровадженням стандартів Інтернету.

Класифікація веб-сайтів

За доступністю сервісів:

• Відкриті сайти. Всі сервіси сайту цілком є доступними для всіх відвідувачів і користувачів.

• Напіввідкриті сайти. Для доступу до ресурсів чи сервісів сайту необхідно зареєструватися, зазвичай, безкоштовно.

• Закриті сайти. Цілком закриті службові сайти організацій, зокрема, корпоративні сайти, особисті сайти приватних осіб. Вони є доступними для вузького кола користувачів. Доступ для нових користувачів, зазвичай, надається через запрошення (інвайти) або через адміністратором до переліку допущених осіб.

За природою вмісту:

• Статичні сайти. Вміст сайту формується розробником і в подальшому не змінюється. Користувач бачить файли в тому вигляді, в якому вони зберігаються на сервері.

• Динамічні сайти. Вміст генерується спеціальними програмами (скриптами) і формується залежно від дій користувача на підставі інших даних з визначених джерел.

За фізичним розташуванням:

• Зовнішні сайти мережі Інтернет.

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

За схемою представлення інформації, її об'єму і категорії вирішуваних завдань:

• Інформаційні ресурси:

o Тематичний сайт — сайт, що надає специфічну інформацію з певної теми.

o Тематичний портал — надвеликий ресурс, який надає вичерпну інформацію з певної тематики. Портали є подібними до тематичних сайтів, але додатково містять засоби взаємодії з користувачами і дозволяють користувачам спілкуватися в рамках порталу (форуми, чати).

• Інтернет представництва власників бізнесу (торгівля чи послуги, які не обов’язково безпосередньо пов'язані з Інтернетом):

o Сайт-візитка — містить загальні дані про власника сайту (організацію або приватну особу): сфера інтересів, біографія, фотогалерея, контактні дані. Тобто, це є докладна візитна картка.

o Представницький сайт — так іноді називають сайт-візитку з розширеною функціональністю: докладний опис послуг, прас-листи, реквізити, схема проїзду, відгуки, форма зворотного зв'язку тощо.

o Корпоративний сайт — містить повну інформацію про компанію, послуги, продукцію, події в житті компанії. Відрізняється від сайту-візитки і представницького сайту повнотою представленої інформації, часто містить різні функціональні інструменти для роботи з контентом (пошук інформації, календарі подій, фотогалереї, корпоративні блоги, форуми). Може бути інтегрованим з внутрішніми інформаційними системами компанії (наприклад,

26

Page 27: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.1. Сучасні веб-технології. Загальні відомості про веб-сайт

бухгалтерськими системами). Може містити закриті розділи для різних груп користувачів — співробітників, дилерів, контрагентів.

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

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

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

• Веб-сервіс — це послуга, що створена для виконання певних завдань в рамках служби Веб:

o Дошка оголошень. o Каталог сайтів. o Пошукові системи. o Поштовий сервіс. o Веб-форуми. o Блоговий сервіс. o Сервіс зберігання та обміну файлів. o Сервіс створення та редагування документів — наприклад, Google Docs. o Зберігання фотографій — наприклад, Picnik, ImageShack, Panoramio, Photobucket. o Зберігання відео — наприклад, YouTube, Dailymotion. o Соціальні Медіа — наприклад, Buzz. o Соціальні мережі — наприклад, Vkontakte. o Спеціалізовані соціальні мережі — наприклад, Odnoklasniki.

Популярні сайти користувачів України

Популярність сайтів визначається, як правило, за числом відвідувачів. Нижче представлено перелік самих популярних сайтів в Україні (за даними компанії Alexa Internet http://www.alexa.com)

• Google (google.com.ua, google.ru, google.com). Зручна пошукова система для пошуку веб-сторінок, зображень, новин зі світу чи з України. Надано широкий спектр послуг та сервісів.

• V Kontakte (vkontakte.ru). Популярна молодіжна соціальна мережа. • Почта@Mail.ru (mail.ru). Повнофункціональна поштова система. • Яндекс (yandex.ru). Пошук інформації в Інтернеті з врахуванням української та російської

морфології, можливість пошуку відповідно до вибраного регіону. • YouTube (youtube.com). Надвелика збірка відео зі всього світу. • Wikipedia (wikipedia.org). Інтернет енциклопедія. • UkrNet ISP (ukr.net). Популярний український веб-портал. • Живий журнал (livejournal.com). Інтернет спільнота людей, що публікують свої думки відносно

різних тематичних напрямків. • Однокласники.ru (odnoklassniki.ru). Соціальна мережа. • Facebook (facebook.com). Соціальна мережа для контакту людей, пошуку нових друзів,

завантаження фотографій, цікавих посилань тощо. • Yahoo! (yahoo.com) Пошукова система. • uCoz (ucoz.ru). Конструктор сайтів з можливістю їх подальшого розміщення на доменах

системи або на інших серверах. • rutracker.org (rutracker.org). Сайт торент-завантаження. • Blogger.com (blogger.com). Вільне опублікування статей користувачів - веб-блоги.

27

Page 28: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.1. Сучасні веб-технології. Загальні відомості про веб-сайт

• LiveInternet.ru (liveinternet.ru). Сервіс статистики сайтів, рейтинг сайтів. Сервіс особистих щоденників (блогів). Новинні сюжети більше як від 1000 джерел. Інші сервіси.

• Рамблер (rambler.ru). Інформаційна пошукова система з врахуванням морфології російської мови.

• I.UA (i.ua). Популярний український портал. • Twitter (twitter.com). Соціальна мережа. Веб-блоги, SMS та веб-інтерфейс. • Еx.ua (ex.ua). Велика збірка різноманітного відео. • Bigmir)net (bigmir.net). Інформаційний розважальний портал. Пошта, пошук, новини,

рейтингова система, онлайн відео, фотоальбоми. • Українська мережа новин (korrespondent.net). Самі свіжі новини про Україну. Щогодинне

поновлення. • Narod (narod.ru). Безкоштовний хостинг сайтів. • Gismeteo (gismeteo.ua). Прогноз погоди в Україні від Фобос. • AdvMaker.ru (advmaker.ru). Сервіс електронної комерції WebMoney. • Українська Правда (pravda.com.ua). Політичні новини і коментарі. • MarketGid (marketgid.com). Інформація про продукти та послуги Інтернет-магазинів. • Sape.ru (sape.ru). Cистема продажі посилань зі сторінок сайтів. • Depositfiles.com (depositfiles.com). Надвеликий простір для розміщення файлів. • Googleusercontent.com (googleusercontent.com). Сервіс Інтернет аналітики, який призначено

для веб-розробників, рекламодавців та маркетологів. • Мета-Україна (meta.ua). Українська пошукова система. • Letitbit net (letitbit.net). Надвеликий простір для розміщення файлів. • Mozilla.com (mozilla.com). Офіційний сайт компанії-розробника браузера FireFox. • Rozetka.com.ua (rozetka.com.ua). Інтернет супермаркет. • Радикал-Фото (radikal.ru). Надвеликий простір для зберігання фотографій. • ПриватБанк (privatbank.ua). Офіційний сайт банку. Інтернет-банк. • Хабрахабр (habrahabr.ru). Інформаційна соціальна газета. Новини, блоги, пошук роботи,

відомості про компанії.

28

Page 29: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.2. Сучасні веб-технології. Основні засоби

2.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-файлу. В цьому випадку браузер завантажує лише

29

Page 30: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.2. Сучасні веб-технології. Основні засоби

структуру документа і дані, що містяться на сторінці. 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-текстом передається браузеру.

30

Page 31: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.2. Сучасні веб-технології. Основні засоби

Основними конкурентами 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 відрізняється синтаксичною цілісністю і строгою структурою.

31

Page 32: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.2. Сучасні веб-технології. Основні засоби

Практично всі сучасні браузери підтримують 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 рушій з десятьох чи двадцятьох тисяч рядків коду плюс реалізувати серверну частину.

32

Page 33: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.2. Сучасні веб-технології. Основні засоби

На сьогодні спостерігається тенденція на стрімке поширення 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, за наявності відповідних плагінів.

33

Page 34: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.3. Сучасні веб-технології. Система управління контентом CMS

2.3. Система управління контентом CMS CMS (Content Management System) – це комп’ютерна програма або система, яку

використовують для забезпечення і організації сумісного процесу створення, редагування і керування вмістом сайту (текстовими, графічними чи мультимедійними елементами). Зазвичай, в CMS вміст розглядається як сукупність неструктурованих даних предметного завдання на противагу до структурованих даних сайтів, які знаходяться під керуванням СУБД.

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

Основні завдання CMS

1. Зібрати і об'єднати до єдиного цілого різнотипні джерела знань і інформації, які є доступними як всередині організації, так і за її межами.

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

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

Причини популярності CMS

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

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

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

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

Сховище інформації

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

Якщо CMS необхідно зберегти певну інформацію, вона записує її в базу даних. Для кожної сутності в базі даних відведено окрему таблицю.

34

Page 35: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.3. Сучасні веб-технології. Система управління контентом CMS

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

Програмний рушій бази даних вибирається в залежності від платформи. Якщо використовується платформа Windows, то це MS SQL, якщо UNIX платформа, то MYSQL.

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

Шаблонізатори

Інформацію, яку необхідно відобразити (наприклад, текст статті), CMS отримує з бази даних. Для відображення інформації у форматі HTML використовується механізм шаблонів.

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

Шаблонизатор має свою досить просту мову, з якою може впоратися верстальник, що не знає РНР. Шаблони перетворюються у файл РНР, а потім просто виконуються PHP-інтерпретатором. Для підвищення продуктивності можна скомпілювати шаблон в РНР, оскільки він буде рідко мінятися. Таким чином, відбувається розподіл праці верстальника і програміста: один робить шаблони, а інший пише код програми.

Система користувачів

Наступною частиною системи є система користувачів і їх ролей. Роль користувача — це певний набір дій, які він може здійснювати. Ролі можна порівняти з групами користувачів в Windows. В сучасних CMS ролі користувача можна створювати і налаштовувати згідно намірів розробника.

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

Схема роботи CMS

Як взаємодіють компоненти системи CMS. Припустимо, що користувач зайшов на сайт, який знаходиться під управлінням CMS, і провів певну дію, наприклад, задав запитання чи відправив заповнену форму.

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

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

35

Page 36: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.3. Сучасні веб-технології. Система управління контентом CMS

Переваги CMS

1. Застосування шаблонів дозволяє автоматично міняти вигляд всього сайту, незалежно від його змісту.

2. Вміст (контент) цілком відокремлено від візуального представлення сайту, що значно спрощує редагування вмісту сайту. До того ж, більшість CMS містять візуальний онлайновий редактор, або мають такий додатковий модуль.

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

4. Навіть безкоштовні CMS мають непогану «технічну підтримку» у вигляді спільноти користувачів, вони можуть не лише надавати допомогу, але і займатися розробкою, що гарантує безперервне покращення ядра системи управління контентом і створення нових модулів.

5. Найголовнішим чинником, який впливає на використання CMS, є економія часу розробки сайту, а значить і грошей.

Критерії вибору CMS для створення сайту

1. Багато CMS суттєво різняться між собою.

2. Більшість CMS розробляються під універсальні завдання.

3. Деякі CMS більше призначені для фахівців, ніж для звичайних користувачів.

4. Люба CMS вимагає часу для освоєння, іноді достатньо тривалого.

5. Певні CMS важко засвоїти внаслідок того, що вони є погано спроектованими.

6. Дорожча CMS не завжди є кращою, часто буває навпаки.

7. Варто уникати CMS, які втілено у невелике число сайтів.

8. Універсальна CMS, яка, як стверджують розробники, здатна вирішувати будь-які завдання, - швидше за все, є вигадкою, виключенням буде лише грамотно спроектована і добре продумана модульна структура.

9. Для вирішення простих завдань необов'язково придбавати найпотужнішу CMS.

10. Має бути забезпечена сумісність між CMS та програмами сервера, оскільки деякі з них мають досить специфічні вимоги до програмного забезпечення.

11. Не варто купувати CMS, автори якої не дають можливості її безкоштовного тестування протягом тижня.

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

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

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

36

Page 37: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.4. Сучасні веб-технології. Анімація, звук і відео у Веб

2.4. Анімація, звук і відео у Веб Бурхливий розвиток Інтернет технологій надав широкі можливості для застосування у веб-

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

Працюючи з анімацією для Веб, розробники впроваджують одну або кілька технологій (Flash, Shockwave, GIF-анімацію або видео- і звукові застосування) у кінцеву мету - створення веб-сторінки, яка здатна міцно притягати погляд.

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

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

GIF-анімація Анімація з використанням формату GIF (Graphic Interchange Format) є найпростішою та

популярною на сьогоднішній день формою анімації в Інтернет.

Така популярність викликана кількома причинами:

• GIF-анімацію легко створювати за допомогою графічних редакторів компанії Adobe –PhotoShop, ImageReady і Fireworks.

• GIF-анімація не вимагає спеціальних плагінів для браузерів.

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

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

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

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

GIF-анімація широко використовується в маркетингу і рекламі.

37

Page 38: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.4. Сучасні веб-технології. Анімація, звук і відео у Веб

Флеш-анімація

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

Flash дозволяє створювати повноекранну анімацію з вбудованим звуком і інтерактивністю при відносно невеликих розмірах файлу. Невеликі розміри файлів Flash продиктовані використанням в основному векторних зображень. При збереженні традиційного растрового зображення (GIF або JPEG), файл повинен зафіксувати і зберегти інформацію, що описує кожен піксел, внаслідок чого об’єм файлу значно збільшується. І навпаки, при збереженні векторної графіки, застосовуються математичні формули, що є запорукою невеликого об’єму файлу.

Векторні зображення, які збережені у Flash-анімації, позначаються як SVG-зображення, або векторна графіка, що масштабується (Scalable Vector Graphics). Розміри SVG-зображень можна змінювати (робити їх більшими або меншими) під час відтворення анімації без втрати якості зображення і вони завантажуються швидше, ніж традиційні JPEG- або GIF-зображення. Отже, можна створювати файли складної Flash-анімації, які швидко завантажуються і відтворюються на комп'ютері відвідувача.

Використання Flash для оформлення елементів сайту

Існує як мінімум три підходи до створення сайтів з Flash — створення традиційного сайту з окремими фрагментами Flash, створення сайту на Flash цілком і створення сайту на Flash з використанням окремих фрагментів на HTML.

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

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

Flash-елементи сайту

Інтро

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

Меню

Динамічні спливаючі меню — ще одні елемент для створення якого ідеально підходить Flash. Ще зовсім недавно дизайнери дуже обережно відносилися до подібних рішень, оскільки пошукові системи або не вміли індексувати текст і посилання в Flash, або робили це не дуже добре. Сьогодні проблема індексації знята повністю, а тому, верстальники можуть забути про створення громіздких за об'ємом коду і дуже чутливих до різних браузерів меню на CSS і JavaScript.

38

Page 39: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.4. Сучасні веб-технології. Анімація, звук і відео у Веб

Інформери

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

Кнопки

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

Текст

Flash можна використати для стилізації неважливих для просування підзаголовків чи невеликих текстових фрагментів.

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

Переваги Flash над традиційною GIF-анімацією:

• Flash в основному оперує невеликими векторними зображеннями, тому, завантаження анімації відбувається швидше.

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

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

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

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

• Flash повністю сумісний з JavaScript. Часто дані Flash і програмний код JavaScript об’єднуються. Оскільки всі браузери «розуміють» мову JavaScript, можна створювати ще складніші взаємодії між сторінкою та її відвідувачами.

• Flash ефективно працює із звуковими файлами і дозволяє в одній анімації об'єднувати рух і звуковий супровід.

Доцільність використання анімації

Анімація привертає увагу, розважає і інформує, проте при її використанні на веб-сторінках слід дотримуватися і певної обережності:

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

• Анімацію часто використовують, щоб підкреслити вміст веб-сторінки, тому, слід слідкувати за тим, щоб вона дійсно приносила користь і перекликалася із статичним наповненням сторінки.

39

Page 40: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.4. Сучасні веб-технології. Анімація, звук і відео у Веб

• Не слід використовувати анімацію на сторінках, що містять великі об'єми тексту. Анімація впливає на концентрацію уваги користувача і відволікає його від читання тексту.

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

Робота із звуком в Інтернет Звук, що супроводжує сайт допомагає «задати настрій» аудиторії і підсилити враження

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

Використовуючи на сайті музичні об’єкти слід заздалегідь потурбуватися про отримання авторського дозволу артиста або звукозаписної компанії.

На сьогодні звук є дуже популярним в Інтернеті, хоча Веб довгий час був безмовним середовищем. У 1996 році, коли комерційні браузери, такі як Netscape Navigator, стали доступними для широкого кола користувачів, з'явився попит на професійних веб-дизайнерів, що мають високу кваліфікацію в області розробки медіа-вмісту.

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

Наприкінці 1996 року компанія RealNetworks створює першу версію RealAudio, де було застосовано «потокову» технологію, що дозволяє браузерам завантажувати і програвати звукові файли прямо на комп'ютері відвідувача. Технологія потокового відтворення дозволяє відтворювати музику або мову у той час, поки браузер продовжує підвантажувати файл.

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

З RealAudio конкурує QuickTime компанії Apple, який функціонує подібно до RealAudio. На багатьох сайтах використовуються обидва формати — і RealAudio, і QuickTime — і більшість користувачів доставляють відповідні плагіни до своїх браузерів.

З часом, технології розвиваються, і веб-розробники розуміють, наскільки великою є роль звуку разом з рештою вмісту в створенні настрою і утриманні уваги відвідувача. Використання звуку внесло зміни до дизайну і конструкції сайтів. Наприклад, тепер на деяких сайтах ведеться радіомовлення (webcast — співзвучно до broadcast - віщати, передавати теле- або радіосигнали). Тисячі сайтів в Веб віщають в прямому ефірі. Вебcast широко використовують - від музики до прямих трансляцій президентських мов і спортивних ігор.

Як приклад можна навести National Public Radio (http://www.npr.com) і MSNBC (http://www.msnbc.com).

Якщо сайт буде містити музику або звук, слід передбачити кнопку, яка дозволить користувачеві швидко вимкнути музику або звук.

Подібно до графічних файлів, аудіофайли теж мають свої власні формати. Загальноприйнятими форматами звукових файлів, які добре працюють на платформі Windows є формати WAV, AU, SND, МРЗ і MIDI. На платформі Macintosh застосовують формати AIF, AIFF, SND, AU, МРЗ і MIDI. Деякі з форматів (AU, SND, МРЗ і MIDI) є універсальними і можуть використовуватися як в Windows, так і в Macintosh. Окрім цих форматів, формат MOV, який

40

Page 41: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.4. Сучасні веб-технології. Анімація, звук і відео у Веб

використовується QuickTime, може застосовуватися при збереженні звуку для обох платформ. За допомогою Windows Media Player (версії якого існують і для РС, і для Macintosh) користувачі можуть програвати файли формату Windows Media Format (WMF).

Для запису звуку в Windows можна скористатися вбудованою програмою звукозапису (Sound Recorder) або ж встановити програми для роботи з аудіоданими, такими як Sound Forge. Обидві названі програми записують звук у форматі WAV і надають можливість зберегти файл в кількох різних форматах. Щоб записати звук, працюючи на Macintosh, використовують втілену звукозаписну програму або встановлюють програми для роботи з аудіоданими, наприклад, Sound Edit Pro. Обидві програми записуватимуть звук з використанням AIFF і дозволяють зберегти файл в кількох різних форматах.

Щоб перетворити аудіофайл з одного формату в іншій, можна використати програму Cool Edit, яка є доступною для завантаження за адресою http://www.syntrillium.com.

Рекомендації по використанню звуку в Інтернет:

• Використовуйте звук для передачі ідей за допомогою діалогів і дикторської мови.

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

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

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

Відео на Веб-сторінці

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

Відео файли знаходять в Інтернеті ряд особливих застосувань:

• Використання відео для реклами телевізійних шоу і фільмів: у цих галузях традиційно використовуються анонси (короткі уривки передач або фільмів).

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

• Демонстраційні ролики є кращими за стаціонарні фотографії і допомагають потенційним покупцям дійсно побачити товар. Маркетингові сайти, такі як http://www.toyota.com, надають покупцям легкових і вантажних автомобілів можливість оглянути автомобіль за допомогою програм віртуальної реальності, наприклад, програми моделювання віртуальної реальності компанії Apple (www.appie.com).

Відображення відео в Веб

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

Тому, краще надати їм можливість попереднього перегляду відеоролика — наприклад, у вигляді серії невеликих стоп-кадрів, і дати можливість завантажити відповідний плагін, яке є

41

Page 42: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.4. Сучасні веб-технології. Анімація, звук і відео у Веб

необхідним для перегляду ролика. Якщо відвідувач знає, чого чекати, він може погодитися витратити певний час заради можливості переглянути відеоролик.

Відео: потокове відтворення або завантаження?

Вставляючи в Веб-сторінку відеоролик, можна вибрати один з двох варіантів відтворення ролика: потокове відтворення або відтворення після повного завантаження.

Потокове відео відтворюється за допомогою плагіну браузера, такого як RealAudio або QuickTime. Відтворення починається до того, як відеофайл буде повністю завантажено. Звичайне відтворення потокового відео починається тоді, коли завантажено частину файлу, достатньої для продовження завантаження решти частин файлу.

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

Використання віртуальних екскурсій

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

Багато сайтів пропонують віртуальні екскурсії, що дозволяють користувачам пройтися по будинках, виставлених на продаж, перевірити видимість з того або іншого місця на стадіоні, перед покупкою квитків на спортивні змагання (http://kcchiefs.com/fanfair/v_arrowhead.asp), прогулятися по вулицях міста, наприклад, Ванкувера (http://www.virtuaiiyvancouver.com/), оглянути визначні пам'ятки, наприклад, Піраміди (www.pbs.org/wgbh/ nova/pyramid/explore /khufuall.html), і багато іншого.

Щоб відправитися у віртуальну екскурсію, для браузера потрібно завантажити плагін QuickTime VR (http:// www.appie.com/quicktime).

Однією з технологій створення віртуальної реальності в Інтернеті є панорамні зображення. Компонентами цієї технології виступають панорами і об'єкти, які об'єднуються в сцени. Перегляд зображення може здійснюватися за допомогою браузерів, доповнених компонентами, що підтримують цю технологію, або спеціального програвача, наприклад QuickTime VR.

Панорамні фільми надають можливість кругового огляду, дозволяють збільшити або зменшити зображення. При зміні точки зору відбувається автоматичне коректування перспективи.

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

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

На даний час в Інтернеті представлено численні віртуальні панорами, складені з кругових фотографій, які можна переглядати в браузері. В окремих вузлових точках можна «увійти» всередину зображення для перегляду його деталей.

42

Page 43: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.4. Сучасні веб-технології. Анімація, звук і відео у Веб

Приклади віртуальних екскурсій:

• The Louvre Museum (Лувр) http://www.louver.or.jp/louver/QTVR/anglais/index.htm

• Submarines (Підводні човни) http://www.pbs.org/wgbh/nova/subsecrets/

• Virtual Earth (Віртуальна Земля) http://www.virtuaiearth.com

• Apple's Cubic VR Gallery (Кубічна VR-галерея Apple) http://www.apple.com/quicktime/products/gallery/

Зображення iPIX

Це зображення, що має «ефект занурення», оскільки воно поміщає глядача у середину сцени. Пересування по iPIX зображенню цілком контролюється мишкою. Об'єкт зображення можна розглядати в будь-якому напрямі - праворуч, ліворуч, вгору, вниз, а також переміщатися назад-вперед, збільшуючи або зменшуючи зображення.

Крім того, в знімки iPIX можна інтегрувати звук, «гарячі області» (hot spots) та інші мультимедійні опції.

Як зробити знімки для iPIX зображення?

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

Знімок, що отримується за допомогою такого пристрою називаються «півкулею», оскільки складає половину готового iPIX зображення. Тому, для отримання одного панорамного зображення iPIX потрібно зробити два знімки: в один та інший бік.

Плагіни для браузерів На сьогодні існують різні типи мультимедійного вмісту, такі як Flash-анімація, потокове аудіо

і відео (streaming audio/video), тури у віртуальній реальності VR (Virtual Reality) QuickTime тощо. Форматів анімаційних файлів є багато і не завжди браузер має вбудовану програмну підтримку, за допомогою якої відтворюється анімація.

Для того, щоб анімація могла повноцінно відображатися, потрібно встановити спеціальне програмне забезпечення, так званий плагін (plug-in), яке зазвичай завантажується з Веб і встановлюється в браузері, — іноді, під час перегляду сторінки, що містить анімований об'єкт.

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

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

43

Page 44: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.4. Сучасні веб-технології. Анімація, звук і відео у Веб

Adobe Flash Player

Безкоштовний, широко поширений програвач мультимедіа для перегляду файлів формату Flash (файли SWF, FLV): сторінки з динамічним змістом, барвистими спецефектами, інтерактивними іграми і відеофрагментами.

Плагін Shockwave Flash

Призначений для програвання Flash-роликів, дозволяє насолодитися всією красою векторної 3D-графіки, Flash-іграми та іншими інтерактивними елементами в Інтернеті. Плагін призначено для браузерів Internet Explorer, Opera, Mozilla Firefox, Netscape і Netscape сумісними.

Плагін DIVX Web Player

Плагін для перегляду фільмів, що дозволяє відтворювати файли AVI та стиснуті файли DIVX, безпосередньо в браузері.

Плагін також має багато корисних додаткових можливостей:

• Збереження файлів на диск з можливістю подальшого відтворення за допомогою DIVX Player.

• Спостереження за швидкістю з'єднання з Інтернетом і буфером завантаження під час відтворення.

• Перегляд відео в повноекранному або віконному режимі.

• Зміна налаштувань завантаження.

• Автоматичне оновлення плагіну.

Плагін RealPlayer

Програвач для відтворення потокових мультимедійних файлів в режимі реального часу. За допомогою програвача RealPlayer можна слухати радіо і дивитися телебачення в мережі Інтернет.

Real Player, як і більшість сучасних мультимедійних програвачів, підтримує багато аудіо і відео форматів медіа-файлів (RM, RA, RAM, RT, RP, PNG, GIF, JPG, MP3, SWF, SMIL, SMI, WAV, AIFF, MPG, MPEG, AVI, ASF, MID, MIDI, RMI).

Основні властивості Real Player:

• Редактор списків відтворення підтримує функцію перетягування файлів і програвання файлів у випадковому порядку.

• Режим візуалізації - графічні анімації або «світлове шоу», безперервне програвання однієї пісні.

• Закладки для улюблених файлів і потоків. Розподіл бібліотеки файлів по папках.

• Контроль еквалайзера RealPlayer і відтворення відео. Буферизація потоку відео навіть в режимі паузи.

• Запис аудіо CD і компакт-дисків з даними. Можливість завантаження музики в портативні пристрої.

• Завантаження відео. RealPlayer може завантажувати відео з сайтів типу YouTube і зберігати їх на комп'ютері.

Плагін Microsoft Windows Media Player

Після його встановлення користувач отримує підтримку багатьох веб-сервисів, що транслюють потокові аудіо/відео дані в Інтернеті. Дозволяє переглядати відео і аудіо файли *.asf *.asx *.wmv *.wma *.wvx *.wm.

44

Page 45: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.4. Сучасні веб-технології. Анімація, звук і відео у Веб

Плагин Quick Time

Дозволяє працювати з потоковими аудіо/відео файлами. Програє як файли власного формату, широко представленого в Інтернеті (QT), так і найбільш поширені медіаформати. В багатьох випадках є незамінним для перегляду потокового відео з Інтернеті.

Плагин DEVALVR

Призначений для перегляду 3D-документів. Більшість поширених плагінів перегляду панорам і віртуальних турів - Java, QuickTime і елементи ACTIVEX вимагають встановлення на комп'ютер. Проте, вони не мають таких розширених можливостей як DEVALVR і є обмеженими можливістю перегляду панорам лише свого формату. DEVALVR є найперспективнішим форматом для представлення панорам в мережі Інтернет.

Переваги DEVALVR:

• Відображає формати панорам JPG, QuickTime, Flash, SPIV, PANGEAVR.

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

• Має дружний русифікований інтерфейс.

• Плагін розроблено спеціально для відображення фотоматеріалів високої якості в мережі Інтернет.

• Вузька спеціалізація плагіну на панорамній фотографії і картографії, що на відміну від форматів широкого застосування (Java, QuickTime, Flash) надає плагіну багато специфічних функцій, необхідних для перегляду панорам і віртуальних турів.

Плагин iPIX Viewer

Дозволяє працювати з готовими iPIX-зображеннями, що розміщені на веб-сторінці

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

45

Page 46: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.5. Сучасні веб-технології. Необхідний інструментарій для веб-розробника

2.5. Необхідний інструментарій для веб-розробника Для того, щоб розробник відчував себе максимально комфортно при розробці нового проекту,

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

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

Отже, для повноцінної роботи веб-дизайнеру необхідно:

• HTML-редактор, рекомендується Adobe DreamWeaver. • Графічні редактори:

o Редактор растрової графіки, рекомендується Adobe Photoshop. o Редактор GIF-анімації, рекомендуються програми Adobe Photoshop та Image Ready. o Редактор для створення анімованої графіки, рекомендується програма Adobe Flash.

• FTP-клієнт, рекомендується програма Smart FTP. • Браузери Internet Explorer, Opera, Mozilla FireFox, Google Chrome.

HTML-редактор Програми для створення сайтів є двох категорій - текстові та візуальні HTML-редактори.

Текстові HTML-редактори

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

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

Недоліки у текстових html-редакторів:

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

• Обов'язкове знання мови HTML. Без попереднього вивчення HTML працювати буде врай складно. Тому, потрібно придбати підручник з мови HTML і лише після його прочитання приступати до створення сайту в текстовому редакторі.

46

Page 47: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.5. Сучасні веб-технології. Необхідний інструментарій для веб-розробника

Візуальні HTML-редактори

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

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

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

Визнаним лідером серед візуальних HTML-редакторів є Adobe Dreamweaver, завдяки дружньому інтерфейсу, генерації мінімально надлишкового коду, автоматичній генерації скриптів і багатьох зручностей. Втім, в якій програмі створювати сайт, вирішує розробник: можна скористатися програмами з пакету Microsoft Office: FrontPage чи Word.

Графічні редактори Графічні редактори - це спеціалізовані програми, що призначені для створення та обробки

комп’ютерних зображень. Вони обов’язково мають бути в арсеналі веб дизайнерів. Растрові графічні редактори надають широкі можливості для створення чи редагування зображень і збереження їх в різних растрових форматах, зокрема, в основних веб-форматах JPEG, GIF і PNG.

Популярні растрові графічні редактори

• Adobe Photoshop. • Adobe Fireworks. • Corel Photo-Paint. • Corel Paint Shop Pro. • Corel Painter. • Microsoft Paint у складі Windows. • Microsoft Photo Editor.

Adobe Photoshop

Потужний графічний пакет для професійного редагування зображень багатьох растрових форматів. Без Adobe Photoshop не обходиться практично жодний дизайнер. Програма є безумовним лідером серед професійних графічних редакторів за рахунок своїх широких можливостей, високої ефективності і швидкості роботи. Adobe Photoshop надає всі необхідні засоби для корекції, монтажу, підготовки зображень до друку і високоякісного виводу.

Програми для створення GIF-анімацій

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

47

Page 48: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.5. Сучасні веб-технології. Необхідний інструментарій для веб-розробника

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

GIF-анімація використовує можливість формату GIF зберігати у файлі кілька зображень. Анімаційні GIF є серією кадрів, що швидко змінюють один одного, за рахунок чого і досягається анімаційний ефект. Вмістом кожного кадру є або незалежні зображення або окремі прошарки одного зображення, яке можна створити в будь-якому графічному пакеті — в Adobe Photoshop, Jasc Paint Shop Pro тощо. А ось перетворення їх в анімаційний GIF-файл, що містить не лише всі початкові зображення, але і дані про швидкість їх виводу на екран, застосовану палітру кольорів та інші можливості здійснюється вже за допомогою багатьох спеціальних програм.

Класифікація програм для GIF-анімації

Програми для створення анімаційних GIF можна поділити на три групи.

До першої групи належать популярні двовимірні графічні пакети, що орієнтовані в першу чергу для роботи з двохвимірною растровою графікою, але, додатково мають програми, що дозволяють створювати файли у форматі Animation GIF. Популярними з них є Adobe Photoshop з програмою ImageReady, Jasc Paint Shop Pro з програмою Animation Shop, і Ulead PhotoImpact з програмою GIF Animator.

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

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

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

Третю групу утворюють програми, що орієнтовані на створення 3D-графіки (наприклад, 3D Studio Max) і разом з тим дозволяють створювати анімацію у форматі Animation GIF (зазвичай за рахунок спеціального плагіну, що часто міститься у складі програми). Графічні 3D-програми не вимагають покадрового промальовування — зазвичай, для створення GIF-файлу буває достатньо задати об'єкту якусь циклічну дію, наприклад поворот навколо осі, записати отриману анімацію як серію кадрів і експортувати її в анімаційний GIF.

Традиційні програми для роботи з тривимірною графікою вимагають глибоких професійних знань і є складними в застосуванні. Хоча, якщо потрібно створити, анімований тривимірний логотип, то можна обійтися програмою Xara3D, яка хоч і позиціонується для роботи з тривимірною графікою, проте вміє створювати і анімаційні GIF і є достатньо простою в застосуванні.

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

Програми для флеш-анімації

Для створення різноманітних анімованих веб-застосувань - заставок (інтро) до сайтів, банерів, рекламних роликів, інтерактивних презентацій, навчальних роликів, ігор та мультфільмів призначена програма Adobe Flash. Разом з нею існують і інші інструменти flash-платформи (Flash Platform): Adobe Flex Builder, Flash Development Tool (FDT) та інші.

48

Page 49: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

2.5. Сучасні веб-технології. Необхідний інструментарій для веб-розробника

До флеш-анімації в Інтернеті достатньо високі вимоги з боку відвідувачів, вони чекають від застосування флеш-технологій якихось нестандартних рішень і візуальних ефектів. Для створення інтерактивної анімації в Adobe Flash застосовується мова ActionScript. Це ефективна об'єктно-орієнтована мова створення сценаріїв, що заснована на стандартах ECМAScript. Користуватися ActionScript для створення анімації і ефектів зовсім необов'язково, багато ефектів можна застосувати інструментами самої програми Adobe Flash. Проте, при використанні ActionScript в флеш-файлах відкриваються широкі творчі і функціональні можливості.

FTP-клієнт FTP-клієнт - це програма, що призначена для спрощення доступу до віддаленого серверу.

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

FTP-клієнт може використати:

• Розробник сайту для завантаження сторінок сайту з/на сервер. • Звичайний користувач для завантаження музики, програм та інших файлів даних з/на

сервер.

Програми, які реалізують функції FTP-клієнта:

• Інтернет браузери. Іноді працюють в режимі «тільки читання», тобто не дозволяють додавати файли на сервер.

• Багато файлових менеджерів, наприклад: Windows Explorer (Провідник), Total Commander, FAR.

• Спеціалізовані програми, наприклад: Smart FTP.

Завдяки поширеності протоколу FTP, функції FTP-клієнта втілено у всі популярні операційні системи. Проте, використання цих клієнтів вимагає знання команд служби FTP для спілкування з сервером. Так в Windows і в багатьох версіях Unix такою утилітою є ftp.exe.

Браузери Для перегляду сайтів користувачі Інтернету використовують браузери. Якщо в минулому

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

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

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

За статистикою, найпопулярнішими браузерами сьогодні є Internet Explorer, Mozilla Firefox, Opera та Google Chrome. Тому розробник має мати в своєму арсеналі як мінімум ці браузери.

49

Page 50: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.1. Розробка веб-сайту. Основні етапи

3.1. Основні етапи розробки веб-сайту Розробку сайту можна порівняти з будівництвом будинку, де мають послідовно бути виконані

визначені етапи: від проектної документації і закладки фундаменту до внутрішньої і зовнішньої обробки приміщення.

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

Роботу над кожним проектом слід проводити в строгій відповідності з приведеними нижче етапами робіт з розробки сайту.

1. Передпроектна підготовка. Ідея

Визначення тематики майбутнього сайту, з’ясування цілей і завдань, визначення і аналіз цільової аудиторії. Аналіз конкурентів. Розробка структури сайту – ескіз сайту на папері. Створення списку майбутніх тематичних розділів.

2. Розробка дизайну сторінок

2.1. Дизайн-концепція сайту (креативний дизайн) Креативна ідея, розробка основної графічної концепції дизайну сайту на прикладі головної та другорядних сторінок. Вибір колірної гамми, художнього стилю. Підготовка макету дизайну.

2.2. Технічний дизайн, Розробка логічної і фізичної структури ресурсу. Компонування сторінки, верстальної структури. Елементи навігації

3. Верстка Створення шаблонів сторінок. Перевірка правильності написання коду. Верстка сторінок сайту на основі затвердженого дизайну типових сторінок. Збірка сторінок.

4. Інформаційне наповнення сайту Підготовка текстових матеріалів. Підготовка графічних матеріалів у растровому форматі, оптимізація картинок. Заповнення сторінок.

5. Програмна частина проекту

5.1. Інтеграція сайту з системою управління Зараз вже жоден сучасний сайт не обходиться без системи управління, оскільки важливою є не лише красива зовнішня оболонка цього сайту, але і можливість зручної роботи з ним. Це особливо актуально для сайтів з розгалуженою структурою і великим об'ємом даних. В цей етап входить: інтеграція з системою управління, програмування, налаштування сервера, забезпечення безпеки проекту. Контроль якості.

5.2. Програмування, запуск проекту На цьому етапі допрацьовується функціонал, що не міститься у стандартному складі системи управління.

6. Тестування сайту в Інтернеті Тестування сайту на наявність помилок та коректність функціонування в різних браузерах (Internet Explorer, Netscape, Opera, Safari). Перевірка ідентичності відображення сторінок в різних екранних роздільних здатністях в різних браузерах.

7. Розміщення сайту в Інтернеті Організація робіт з розміщення проекту в мережі Інтернет. Вибір та реєстрація доменного імені. Вибір хостинг провайдера, розміщення сайту. Фінальне тестування сайту. Навчання персоналу клієнта як працювати з системою управління сайту.

50

Page 51: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.1. Розробка веб-сайту. Основні етапи

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

9. Подальша підтримка сайту

Перші шість етапів відносяться безпосередньо до створення сайту, решта потрібні для подальшого існування сайту.

1. Передпроектна підготовка.

Ідея

Перш, ніж розпочати роботу над сайтом, потрібно чітко уявляти, що в результаті має бути, а також перспективи розвитку сайту.

Отже, потрібно вирішити:

• Навіщо створювати сайт (чи потрібно це взагалі).

• Тематика сайту.

• Тип сайту (домашня сторінка, портал тощо).

• Відмінність від сайтів з такою ж тематикою (якщо це не домашня сторінка).

• Яка буде аудиторія сайту (стать, вік, інтереси).

• Якого роду сервіси будуть присутні на сайті (форум, каталог, пошта).

• Перспективи подальшого розвитку.

Поради

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

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

• Добре подумайте про інформацію, яка буде розміщена на сайті. Зробіть те, в чому Ви добре розбираєтеся, що буде корисне і цікаво іншим, нехай навіть це буде якась зовсім вузька і малопопулярна тема. Чим менше за цією темою буде сайтів в пошуковиках, тим більше буде відвідувачів і тим більше сайт в майбутньому приноситиме дохід.

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

51

Page 52: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.1. Розробка веб-сайту. Основні етапи

буде недоступним для інших користувачів. Хостинг-провайдер, на хостингу якого буде розташовано такий сайт, теж може його видалити.

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

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

Кодинг і програмування

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

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

Але HTML і CSS відповідають лише за розмітку зовнішнього вигляду документа (сторінки), для того, щоб реалізувати складніші речі, наприклад, на зразок гостьової книги, пошуку по сайту або форуму, потрібні вже інші засоби. Потрібно знати мови програмування для Веб – PHP, ASP, PERL або інші.

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

Отже, якщо HTML і CSS - це каркас на якому все тримається, то програми на PHP, ASP, PERL - це механізм, який розташовано всередині цього каркаса. Веб-програмування є складнішим для освоєння предмет, ніж HTML або CSS, проте, є готові рішення, так звані готові програми-скрипти, які розповсюджуються в Інтернет, як на безкоштовній, так і платній основі.

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

Тестування і доопрацювання

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

Коли сайт розміщено в Інтернеті, то перш, ніж його просувати і рекламувати, слід перевірити сайт на працездатність. Можливо, якісь скрипти виконуються з помилками або десь пропущено важливу і цінну інформацію або потрібна картинка.

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

52

Page 53: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.1. Розробка веб-сайту. Основні етапи

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

Просування, реклама

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

Перш, ніж зайнятися рекламою сайту, варто подумати – а чи потрібно це? Якщо потрібно, то навіщо. Що зміниться від того, що на сайті стане десятком відвідувачів більше?

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

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

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

Подальша підтримка і оновлення

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

Але, відвідувача цікавить не лише нова інформація. Важливо підтримувати зв'язок з відвідувачами: спілкування на форумі або в гостьовій книзі, які розташовуються на сайті, за можливістю, відповідати на всі листи відвідувачів.

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

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

53

Page 54: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.2. Розробка сайту. Макет сторінки

3.2. Макет сторінки Перш ніж створювати сторінки в HTML-редакторі, потрібно зробити макет майбутньої

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

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

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

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

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

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

За сталими традиціями інформація розподіляється наступним чином:

1. В верхній частині сторінки (шапка, хедер, header) містяться: • Логотип. • Заголовок. • Слоган. • Телефон. • Вибір мовної версії. • Меню навігації (по сайту).

2. В середній (основній) частині сторінки: • Меню навігації по тематичних розділах сайту. • Основна інформація. • Зображення, банери.

3. В нижній частині сторінки (підвал, футер, footer): • Копірайти. • Адреси, телефони. • Лічильники і банери. • Додаткове меню навігації (по сайту, по розділах сайту).

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

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

54

Page 55: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.2. Розробка сайту. Макет сторінки

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

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

При розгляді найбільш поширених модульних сіток, в поясненнях будуть застосовані схематичні значки.

Позначення тексту в макетах

Позначення зображень в макетах

Одноколонна структура

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

Типова схема одноколонної модульної сітки.

Як правило, спостерігається чотири основні блоки:

1. Заголовок сторінки.

2. Набір посилань на інші сторінки сайту (навігація).

3. Власне сам текст.

4. Контактна інформація в нижній частині сторінки.

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

Ілюстрації на сторінці застосовують за змістом тексту, і, зазвичай, текст обтікає їх за контуром.

Двоколонна структура

Це один з найпоширеніших варіантів при використанні на сайтах.

За такою модульною сіткою, зазвичай, лишаються незмінними верхній та нижній блоки сторінки, а основний (середній) блок поділяється на дві колонки, що відводяться для:

1. Основного тексту.

2. Навігації чи іншої корисної інформації.

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

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

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

55

Page 56: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.2. Розробка сайту. Макет сторінки

достатньо одноманітно. Але з іншого боку відвідувачам зручніше працювати з сайтом звичного вигляду, без зайвих «наворотів».

Трьохколонна структура

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

Також трьохколонна структура використовується і на внутрішніх сторінках, якщо двох колонок бракує для розміщення різної інформації.

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

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

Для прикладу розглянемо головну сторінку певного сайту.

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

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

Якщо представити основні блоки сторінки у вигляді однотонних прямокутників, то отримаємо наочну модульну сітку, з якої відразу видно як складено сторінку.

Звісно, що можна застосувати інші види модульних сіток, і хоча вони виглядають складними, сайти на їх основі будуть оригінальними і незвичними.

56

Page 57: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.2. Розробка сайту. Макет сторінки

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

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

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

Позиціювання сторінки у вікні браузера Веб-сайт є електронним аналогом друкованого видання. Звісно, що інформація в любому

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

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

Існують певні особливості, які варто враховувати при верстанні сторінки.

Ширина документа

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

57

Page 58: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.2. Розробка сайту. Макет сторінки

Фіксований дизайн

«Фіксованим» називають дизайн, коли ширина інформативної частини сторінки є визначеної величини в пікселах і не залежить від роздільної здатності монітора. Найчастіше при розробці фіксованого дизайну орієнтуються на найменшу роздільну здатність сучасних моніторів. Самі перші сайти орієнтувалися на роздільну здатність 640х480, згодом 800х600, але тепер переважна частина моніторів мають екрани з мінімальною роздільною здатністю 1024х768 пікселів, хоча, зазвичай, користувачі можуть обирати за своїми потребами значно більші показники.

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

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

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

Еластичний дизайн

«Еластичним» називають дизайн, коли сторінка розгортається на весь екран по ширині незалежно від встановленої роздільної здатності монітора. Наприклад, і при роздільній здатності 1024*748 і при 1600*1200 сторінка займатиме всю ширину екрану.

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

58

Page 59: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.2. Розробка сайту. Макет сторінки

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

• Недоліки.

o Складність верстання сторінки, доводиться враховувати багато інших чинників і знати певні прийоми верстки.

o Потребує ретельного тестування для адекватності відображення при різних роздільних здатностях і у різних браузерах.

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

Комбінований дизайн

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

Який дизайн застосувати

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

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

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

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

59

Page 60: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.2. Розробка сайту. Макет сторінки

Висота документа

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

А ось переміщення по горизонталі відбувається не так зручно, тому, горизонтальної смуги прокрутки бути не повинно.

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

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

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

Навігація по сайту Зручна, зрозуміла для користувача навігація є важливою складовою сторінки. В ідеалі

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

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

Значна зміна елементів навігації при переході від однієї сторінки сайту до наступної дезорієнтує користувача і відволікає його увагу.

Посилання на головну сторінку

Бажано мати посилання до головної сторінки на всіх сторінках сайту. Загальноприйнятим правилом є додавання до логотипу сайту посилання до головної сторінки.

Меню (навігаційні панелі)

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

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

60

Page 61: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.2. Розробка сайту. Макет сторінки

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

Головне меню сайту

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

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

Додаткове меню сайту

Як правило, має ієрархічну структуру і буває 3-х видів:

1. Випадне меню. Автоматично випадає при наведенні вказівника мишки на пункт меню.

2. Меню, що розкривається. При натисненні на меню розкривається перелік пунктів.

3. Розкрите меню. Статичне меню, де відразу відображено всі пункти, часто має деревовидну структуру

Меню ієрархії документів

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

Головна -> Розділ -> Підрозділ -> Назва поточної сторінки

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

Меню послідовної навігації

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

попередня сторінка * зміст * наступна сторінка

Іноді замість послідовної навігації застосовують пряму навігацію:

Частина 1 | Частина 2 | Частина 3 | Частина 4 | Частина 5 | Частина 6

Гіперпосилання

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

61

Page 62: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.2. Розробка сайту. Макет сторінки

За об’єктом, на якій посилаються, розрізняють:

• Зовнішнє гіперпосилання. Гіперпосилання, яке вказує на об’єкт, що розташований поза даним сайтом.

• Внутрішнє гіперпосилання. Гіперпосилання, яке вказує на об’єкт, що розташований в даному сайту.

• Непрацююче (зіпсоване) гіперпосилання. Гіперпосилання, яке вказує на недоступний або неіснуючий об’єкт.

За виконанням гіперпосилання бувають:

• Текстовими.

• Графічними.

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

Графічні гіперпосилання (кнопки) – це картинка, якій призначено адресу іншого об’єкта.

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

Інтерактивність гіперпосилань

Часто до гіперпосилань застосовують елементи інтерактивності. Вони відображають реакцію гіперпосилання на різні події, найчастіше на наведення користувачем вказівника мишки та на натиснення (вибором).

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

1. Гіперпосилання, що досі не використовувалося.

2. Гіперпосилання, на яке наведено вказівник мишки.

3. Активне гіперпосилання — гіперпосилання в момент натискання на ньому.

4. Переглянуте гіперпосилання — гіперпосилання, за яким вже було здійснено перехід. Такий колір браузер може зберігати відповідно до терміну зберігання журналу переглянутих сторінок, за замовченням цей термін складає 20 днів.

Для графічних гіперпосилань – це заміна зображення елементу іншим зображенням, з певним ефектом (зсув, підсвічування, тінь).

Вигляд кнопки після завантаження сторінки.

Вигляд кнопки при наведенні вказівника мишки.

Вигляд кнопки при натисненні вказівником мишки.

Відповідно, для такої інтерактивної кнопки дизайнер має підготувати відповідно 3 різні картинки.

62

Page 63: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.2. Розробка сайту. Макет сторінки

Поради з розробки ефективного дизайну: • Відвідувачі спочатку дивляться на ліву верхню частину сторінки, а згодом тоді

переводять погляд нижче і правіше. Інтерфейс більшості програм дотримується цього правила. Цей момент слід враховувати і при створенні дизайну сайту. Схемний погляд відвідувачів проходить по веб-сторінці за формою літери «F». Постарайтеся розташовувати важливі елементи сторінки в цих ділянках: заголовки, підзаголовки, виділений текст, щоб спонукати відвідувачів мандрувати сайтом далі.

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

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

• Заголовки привертають увагу в першу чергу. Відвідувачі помічають заголовки на сторінках в першу чергу. Заголовки не повинні закриватися елементами дизайну і бути добре помітними при першому погляді на сторінку.

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

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

• Читачі часто переглядають нижні частини сторінок. Тому можна вигідно використати це і розмістити там щось цікаве, наприклад, хмару тегів.

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

• Реклама у верхній і лівій ділянках сайту є найбільш ефективною. Прагніть зробити її ненастирливою і не порушувати дизайн.

Модні тенденції

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

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

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

63

Page 64: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.3. Розробка сайту. Структура сайту

3.3. Структура сайту Практично любий сайт є сукупністю сторінок, які містять тексти, картинки, мультимедійні чи

інші об’єкти. Для комфортного перебування відвідувача на сайті і для полегшення пошуку потрібної інформації, сайт повинен мати чітку і продуману структуру.

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

З позиції розробника, структуру сайту умовно можна поділити на два рівні — логічний і фізичний.

На логічному рівні структура сайту є сукупністю сторінок, які об'єднані між собою єдиним дизайном, стилем і посиланнями.

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

Логічна структура Сайти з невдалою логікою структури не лише ускладнюють роботу відвідувачів, вони

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

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

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

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

Принципи логічного проектування

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

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

1. Використання позначень. 2. Доцільність. 3. Одноманітність. 4. Розділення на частини.

64

Page 65: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.3. Розробка сайту. Структура сайту

Використання позначень

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

Доцільність

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

Одноманітність

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

Розділення на частини

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

Логічна організація інформації

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

Організація інформації на сайті може бути:

• Лінійною. • Ієрархічною. • Мережною (контекстно-залежною). • Комбінованою

Лінійна структура

В такій структурі сайту сторінки можна переглядати послідовно, одна за одною. З поточної

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

65

Page 66: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.3. Розробка сайту. Структура сайту

Ієрархічна структура

Передбачає застосування головної сторінки, на якій розміщено меню з посиланнями на

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

Мережна структура

Є найбільш поширеною структурою в Інтернеті. За такою організацією можна перейти з любої

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

В залежності від задумів розробника необов'язково пов'язувати всі сторінки зі всіма. Зв'язки повинні бути максимально природними і відображати логіку сайту.

Комбінована структура

Є поєднанням кількох попередніх структур. Наприклад, на сайті може бути передбачена ієрархічна структура, яка в певному місці може містити виконання покрокових дій (лінійну структуру).

Поради з організації структури

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

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

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

66

Page 67: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.3. Розробка сайту. Структура сайту

Фізична структура Для простоти, пояснення будуть наведені на прикладі сайту, що містить лише HTML-сторінки,

без жодного програмування. Перед початком роботи потрібно створити кореневу папку на локальному диску, яку можна назвати за майбутньою доменною адресою, наприклад, site.ua.

Всі файли, що відносяться до сайту потрібно розміщати в кореневій папці. Але, перед тим необхідно розробити структуру сайту: які розділи і підрозділи будуть присутні, як вони будуть називатися. Для прикладу приведемо типову структуру домашньої сторінки.

• Головна сторінка. • Біографія. • Робота. • Відпочинок. • Фотогалерея.

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

• Який файл буде завантажено першим? • Чи можна закрити доступ до окремих файлів? • Яким чином можна відстежити помилки? • Інші подібні питання.

Який файл завантажувати першим

Зазвичай, перегляд сайту починається з головної сторінки. Яким чином веб-сервер має дізнатися яку сторінку завантажувати автоматично, враховуючи велику кількість різних файлів в корені сайту? Якщо шлях до файлу вказано безпосередньо (http://www.site.ua/page.html), то жодних питань не виникає. Але, в більшості випадків, в адресному рядку браузера вказують лише доменну адресу, наприклад, site.ua.

Тоді виконуються налаштування сервера, і визначається, файл з яким ім'ям слід показати і чи є він в наявності. Як правило, за замовченням сервери налаштовані на відображення файлу, що має назву index чи default. Відповідно до технології створення сторінок розширення індексу може бути *.html, або у випадку програмування сайту - *.php чи інше.

Розробник може перевизначити назву головної сторінки. Для цього створюють файл з назвою .htaccess і розміщують його в корені сайту. Даний файл є конфігураційним для популярного веб-сервера Apache і є звичайним текстовим документом. В ньому слід прописати такий рядок.

DirectoryIndex index.html index.htm

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

Нижче наведено приклади, які файли відкриються у браузері відвідувача при вказуванні певної адреси:

Що вказано в адресному рядку браузера Що буде відображено у вікні браузера

www.site.ua www.site.ua/index.html

www.site.ua/page.html www.site.ua/page.html

www.site.ua/catalog/ www.site.ua/catalog/index.html

67

Page 68: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.3. Розробка сайту. Структура сайту

www.site.ua/catalog/page.html www.site.ua/catalog/page.html

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

Певні застереження:

• Назва файлу .htaccess пишеться без жодного розширення з обов'язковою точкою на початку імені.

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

локальному комп'ютері така комбінація не спрацьовує. • Якщо у вказаній папці не міститься індексового файлу, тоді, браузер, зазвичай, виводить

перелік файлів, які в ній містяться.

Заборона доступу до папок

Для обмеження доступу до службової інформації і підвищення безпеки сайту, іноді потрібно заборонити відображення інформації з певних папок на сайті. Існує два основних способи.

1. Створити порожній файл index і розмістити його в потрібну папку. Як зазначено вище, цей файл завантажуватиметься в першу чергу при виборі шляху до папки. А якщо він буде порожнім, то і побачити нічого зайвого не вдасться.

2. Використати файл .htaccess, який слід розмістити в потрібній папці. Всередині потрібно прописати

Options – Indexes

Отже, файл .htaccess є універсальним, можна створити кілька файлів .htaccess, і розміщати їх в різних папках сайту відповідно до потреб сайту.

Коли браузер відкриває папку, в якій міститься такий файл .htaccess, відвідувач побачить попередження про помилку з номером 403, що означає, що доступ в дане місце заборонено.

Наприклад, у разі заборони для всіх пошукових систем відвідувати папки сайту cgi-bin і images у файлі вказують наступну конфігурацію:

User-agent: * Disallow: /cgi-bin/ Disallow: /images/

Файли зображень

Всі зображення, що використовуються у сторінках, прийнято зберігати в окремих папках.

Зображення, що використовуються в оформленні зовнішнього вигляду сторінок традиційно розміщують у папку з назвою image або img. Це сприяє стрункій систематизації файлів і є зрозумілим для розробників, що працюють над проектом. Аналогічно, для скриптів можна створити папку script, а для стилів style.

Зображення, що відносяться до контенту певних розділів, наприклад, збірка фотографій за різні роки, то для них можна зробити окремі папки, але із змістовними назвами, наприклад, photo/2011/summer/

68

Page 69: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.3. Розробка сайту. Структура сайту

Відстеження помилок

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

Зв'язати воєдино процес виникнення помилки і сторінку-попередження можна за допомогою кореневого конфігураційного файлу .htaccess. До нього додається наступний рядок.

ErrorDocument 404 /err404.html

Ім'я файлу називається err404.html і розміщується в корені сайту, слэш (символ /) перед іменем файлу пишеться обов'язково.

Файлова структура сайту

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

Службові файли

У складі сайту мають бути присутні файли, які можна віднести до службових. Зазвичай, їх розміщуються в корені сайту. Це файли, що призначені для виконання певних завдань і мають обов'язкове стандартне ім'я, а також файли, назви яких є довільними і визначаються розробниками.

Обов’язкові файли зі стандартними іменами

• index.html (index.*) — за замовченням є файлом головної сторінки, а також веб-сторінок, що розміщені в папках і повинні відкриватися при їх вказуванні в адресі. Назву і розширення індексового файлу, можна змінити в залежності від технології створення сторінок, типу веб-сервера та його налаштувань.

• .htaccess — конфігураційний файл веб-сервера Apache. Вказаний сервер є найбільш популярним і поширеним, тому, даний файл можна зустріти повсюдно. Бувають, звичайно, виключення і певні сервери його не сприймають.

• favicon.ico — іконка сайту у вигляді зображення розміром 16 на 16 пікселів у форматі ICO. Вона з'являється в браузері біля адреси сайту в адресному рядку, у вкладці браузера біля назви сайту, у сторінці пошукової системи біля короткого опису сайту.

• robots.txt — файл, що призначений для пошукових систем. При індексуванні сайту, в першу чергу шукається він. Файл robots.txt це звичайний текстовий файл, який забороняє роботам відвідувати певні сторінки або ділянки сайту. Наприклад, якщо певна область сайту призначена для внутрішнього користування співробітниками компанії, можна заборонити роботам її відвідувати і аналізувати, зробивши відповідні записи в robots.txt. Роботу можна автоматизувати за допомогою спеціальних програм, які призначені для створення і редагування файлів robots.txt наприклад, Page Promoter Robot-Manager.

Обов’язкові файли з довільними іменами

• style.css чи mystyle.css – файл з таблицею стилів. Жоден сайт вже не обходиться без стилів, які зазвичай, розміщуються в окремому файлі. Таке розміщення надає кілька переваг — можна легко змінити вигляд елементів на всіх сторінках, за рахунок зміни параметрів лише в одному місці, файл кешується і завантажується швидше, зменшується загальний об'єм всіх документів. Файл зі стилями зазвичай має розширення .css.

69

Page 70: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.3. Розробка сайту. Структура сайту

Хоча, імена певних службових файлів залежать від налаштувань сервера і можуть мінятися від сайту до сайту, наведені принципи є характерними для більшості з них. Для динамічних сайтів, зміст яких формується за допомогою програми, так званого «рушія», файлова структура буде дещо різнитися від наведеної. Проте, і в цьому випадку, службові файли, такі як таблиці стилів .htaccess, favicon.ico, robots.txt є потрібними.

Поради

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

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

• При привласненні назв файлів прагнути, щоб вони були «осмисленими». Це буде корисно і під час створення сайту і згодом, коли потрібно буде внести певні зміни у сайт, а також для інших розробників, які працюють над сайтом. Важко орієнтуватися серед сторінок, що позначаються як 1.htm, 2.htm, 3.htm тощо.

70

Page 71: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.4. Розробка сайту. Верстання сторінки

3.4. Верстання сторінки По закінченні роботи зі створення графічного макету дизайну і схвалення його іншими

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

Верстання сторінок – це процес написання HTML чи XHTML коду сторінки, при якому сторінка набуває вигляд, подібний до дизайну макету. Безумовно, існують і інші технології розмітки тексту, які підтримуються браузерами, проте, такі речі не є поки що популярними. Найпоширенішим варіантом є верстання за допомогою мови HTML та стилів CSS.

До HTML верстки можна застосувати два підходи щодо розподілення елементів сегментів у різних місцях.

Таблична верстка

Таблична верстка — умовна назва методу верстання HTML-документів, при якому за структурну основу для розташування текстових чи графічних елементів документа використовуються таблиці (HTML-тег <table>).

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

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

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

Переваги табличної верстки:

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

• При розумному підході таблиці спроможні чітко структурувати інформацію.

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

Недоліки табличної верстки:

• У випадку, якщо макет містить багато дрібних деталей, HTML-код виходить занадто громіздким, оскільки він складається в основному з вкладених таблиць.

• Таблична верстка погано поєднується з концепцією позиціонування.

• Таблиці не можуть перекривати одна одну.

• В табличні теги не можна прописати програмний код скрипта або певний сценарій інтерактивності елементу.

Блокова верстка

На відміну від табличного способу розташування даних блокова верстка не потребує чіткої прив'язки кожного логічного блоку до певної комірки. Спосіб блокової верстки базується на

71

Page 72: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

3.4. Розробка сайту. Верстання сторінки

абсолютно інших принципах розташування і взаємодії за допомогою блокових елементів <div> і <span>. Кожний логічний елемент (текст, картинка, таблиця) представляються як окремі блоки, які також можуть бути вкладеними. Таке розміщення є більш природним потоком.

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

Суттю блокової верстки є використання всіх можливостей CSS замість таблиць і скеровуючих зображень.

Переваги блокової верстки:

• Як правило, об’єм коду сторінки, що зверстана блоками є відчутно меншим, ніж об’єм коду сторінки, де застосовано табличну структуру.

• Блокова верстка дуже «дружно» відноситься до позиціонування

• Блоки можуть перекривати один одного, причому розробник вказує, який з блоків буде зверху.

• Блокова верстка дозволяє розмістити блок, що відображає будь-яку частину сторінки на початку html-коду. Це буде доречним при застосуванні певних технологій просування сайтів.

Недоліки блокової верстки:

• Блокова верстка є досить складною і потребує професійних навичок верстання.

• Блокову верстку неможливо застосовувати для певних структур сторінок.

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

• Блокова верстка має проблеми з сумісністю в різних браузерах.

• Не всі типи браузерів якісно обробляють блоки, особливо старі версії браузерів, що не підтримують стандарти CSS 2.0.

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

Оптимальною версткою буде та, яка:

• Максимально ідентично відображає сторінку в різних браузерах.

• Код сторінки має найменший розмір.

• Зрозуміло відображає сторінку в різних роздільних здатностях екрану.

72

Page 73: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.1. Графічні аспекти веб-дизайну. Вибір колірної схеми для сайту

4.1. Вибір колірної схеми для сайту Вибір колірної гамми відіграє важливу роль при створенні сайту. Від неї безпосередньо

залежить його сприйняття відвідувачами: і сприйняття сайту в цілому, і психологічний і фізіологічний стан людини, і зручність читання. Тому, при створенні сайту дуже важливо враховувати:

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

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

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

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

Існують певні закономірності для вибору колірної гами:

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

Колірна палітра

Колір в дизайні є доволі суб'єктивною категорією. В одної людини він може збудити одні відчуття, а в іншої – абсолютно протилежні. Іноді сприйняття залежить від особистих переваг, іноді – від культурних традицій оточення. Теорія кольору це давня і глибока наука. Деякі фахівці роблять кар'єру, вивчаючи питання, що пов'язані з впливом кольору на індивідуумів і групи людей. І там дійсно є що досліджувати. Елементарна зміна відтінку або насиченості кольору може спровокувати абсолютно несподівані емоції.

В світі дизайнерів однієї з головних помилок при проектуванні дизайну сайту є некоректне використання колірної гамми. Невміло підібрана колірна палітра свідчить про непрофесійність дизайнера.

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

До найбільш поширених кольорів у веб дизайні відносяться:

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

73

Page 74: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.1. Графічні аспекти веб-дизайну. Вибір колірної схеми для сайту

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

• Жовтий - колір радості, щастя, сонця, дружби. Серед негативних асоціацій можна виділити боязкість і хворобу. Не варто використовувати дуже темний жовтий колір.

• Оранжевий - символізує теплоту і енергію. Хороший колір для акцентування уваги. • Червоний - небезпека, кров, любов і тепло. Червоний колір є самим доцільним для

привертання уваги. • Фіолетовий - таємничий, творчий колір. Зазвичай, використовується для того, що б додати

сайту особливої витонченості. • Рожевий - найбільш жіночний колір. Асоціюється з дітьми і дитинством. • Чорний - символізує силу, темноту і зло. Як правило, використовується для відображення

великої кількості монотонного кольору. • Білий - чистий, добрий колір. Може асоціюватися з байдужістю і зимою.

Колірні комбінації

При розробці дизайну сторінки слід врахувати основні правила комбінації кольорів:

Додаткові кольори

Використовуються діаметрально протилежні кольори згідно спектрального кола.

74

Page 75: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.1. Графічні аспекти веб-дизайну. Вибір колірної схеми для сайту

Додаткові розщеплені

Використовуються діаметрально протилежні кольори і колір, суміжний з одним з них.

Тріада

Використовуються три діаметрально протилежних кольори згідно спектрального кола (120 градусів).

Тетраедр

Використовуються чотири діаметрально протилежні кольори згідно спектрального кола (90 градусів).

Аналогічні кольори Використовується один основний колір і суміжні з ним кольори.

Одноколірна комбінація

Використовується один основний колір і найближчі до нього відтінки.

Спеціально для дизайнерів створено багато онлайн інструментів, які дозволяють правильно підібрати кольори для дизайну сайту, наприклад продукт від компанії Adobe, якій втілено в новий пакет Adobe CS5 та представлено в Інтернеті на офіційному сайті компанії http://kuler.adobe.com/#create/fromacolor.

Принцип всіх інструментів простий – слід задати певний колір і отримати доречну колірну палітру.

75

Page 76: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.1. Графічні аспекти веб-дизайну. Вибір колірної схеми для сайту

Поради

• Використовуйте на сторінках максимум три-чотири кольори. Чим простіше, тим краще. Якщо на сайті присутні кольорові фотографії, то можна використати їх домінуючий колір для заголовків.

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

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

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

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

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

76

Page 77: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.2. Графічні аспекти веб-дизайну. Графіка для Веб

4.2. Графіка для Веб

Колір Будь-яке графічне зображення можна представити як композицію різнобарвних ділянок, тому,

однією з основних відомостей про картинку є інформація про колір.

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

Для розуміння утворення комп’ютерних колірних зображень варто розглянути наступні поняття:

• Роздільність. • Глибина кольору. • Колірна модель.

Роздільність Оскільки поняття роздільності вживають стосовно різних об’єктів варто розрізняти:

• Роздільність зображення. • Роздільність екрану. • Роздільність друкуючого пристрою (друкованого зображення).

Роздільність зображення

Піксель (pixel скорочення від picture element) — це найменший логічний елемент двовимірного цифрового зображення в комп’ютерній графіці.

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

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

Роздільність зображення вимірюється у кількості пікселів на дюйм рpi (pixel per inch) і задається при створенні зображення в графічному редакторі або при отриманні оцифрованого зображення внаслідок сканування.

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

77

Page 78: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.2. Графічні аспекти веб-дизайну. Графіка для Веб

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

Роздільність зображення та його розмір є зворотно пов’язаними між собою. При зменшенні роздільності розмір зображення збільшується і навпаки.

Роздільність екрану

На екрані комп’ютерного монітора зображення утворюється з екранних пікселів. Екранний піксель є мінімальним елементом монітору, якому притаманні всі властивості відтворення кольорів, які доступні для даного монітору.

Кількість пікселів в одному дюймі екрану називається роздільністю монітору. Вона залежить від розміру екрану та розміру зерна і, зазвичай, складає 72 ppi.

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

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

Наприклад, розмір фотографії з роздільністю 144 ppi на екрані монітора з роздільністю 72 ppi буде вдвічі перевищувати реальний розмір, оскільки в кожному дюймі екрану може бути відображено лише 72 з 144 пікселів. При виводі на монітор з роздільністю 120 ppi те ж саме зображення буде дещо більшим за оригінал, оскільки в цьому випадку в кожному дюймі екрану міститися вже 120 з 144 пікселів.

Наступною характеристикою є роздільна здатність екрану і вона залежить від показників відеокарти та поточних налаштувань операційної системи. Вимірюється в кількості пікселів по ширині та висоті екрану. Наприклад, 800х600, 1024х768, 1600х1200. Роздільну здатність можна легко змінювати під особисті потреби користувача. При низькій роздільній здатності екранні пікселі стають збільшеними, при високій роздільній здатності навпаки, екранні пікселі стають дрібнішими, зображення зменшуються і відповідно збільшується робочий простір екрану.

Якщо зображення готується для перегляду на екрані комп'ютера, то максимальний розмір такого зображення слід вибирати виходячи з мінімально можливої роздільної здатності екрану (в пікселях). Наприклад, якщо відомо, що зображення буде переглядатися на екрані монітора з роздільною здатністю 800x600, то слід обмежитися розміром 800x600 пікселів. При більшому розмірі зображення для його перегляду доведеться користуватися смугами прокрутки або програмно масштабувати зображення перед виводом на екран.

Роздільність принтеру

Це властивість принтеру, що показує, скільки окремих точок може бути надруковано на ділянці певної довжини.

Роздільність принтерів вимірюється в точках на дюйм dpi (dots per inch), визначає якість зображення в заданому розмірі і може бути змінена користувачем. В середньому сучасні струменеві принтери мають роздільність 300-600 dpi, лазерні 600-1200 dpi.

78

Page 79: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.2. Графічні аспекти веб-дизайну. Графіка для Веб

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

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

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

Тобто, для опису зображення потрібно його розкласти на множину елементів — пікселів і визначити спосіб опису одного пікселя, щоб потім описати все зображення як сукупність описів окремих пікселів.

Глибиною кольору називають кількість біт, що відведено для кодування кольору одного пікселя.

• 1 біт (21 = 2 кольори). Бінарний колір, найчастіше чорний та білий.

• 1 байт (8-біт) (28 = 256 кольорів). Індексована палітра кольорів, відтінки сірого.

• 2 байти (16-біт) (216 = 65 536 кольорів). Режим High Color.

• 3 байти (24-біт) (224 = 16,5 мільйонів кольорів). Режим True Color.

Опис кольору пікселя є кодом кольору відповідно до певної колірної моделі. Наприклад, в моделі RGB кожен піксель описується трьома числами, відповідними до яскравості базових кольорів. В моделі CMYK піксель описується чотирма числами. В моделях Lab і HSB піксель описується трьома числами, що відповідають значенням параметрів цих моделей.

Очевидно, чим більшою є глибина кольору, тим більшим буде об'єм вихідного файлу.

Моделі математичного опису кольору Сканування, редагування тону чи кольору, виведення зображень на екран, фотоплівку або

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

Незалежно від того, що є в основі створення моделі, будь-яка колірна модель повинні задовольняти трьом вимогам:

• Колір в моделі повинен визначатися в спосіб, що не залежить від спроможностей певних конкретних пристроїв.

• Модель повинна точно і однозначно визначати гамму (діапазон, колірний обхват) заданих кольорів.

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

• Існує багато різних моделей опису кольору, але всі вони належать до одного з трьох типів: • Адитивні. Засновані на складанні випромінювань окремих зон спектру світла і

застосовуються для середовищ, де світло випромінюється (зображення на екрані, сканування).

• Субтрактивні. Засновані на поглинанні окремих зон спектру світла при відбиванні або пропусканні світла і застосовуються у середовищах, що поглинають світло (забарвлені поверхні, фарбники).

• Психологічні. Засновані на сприйняття кольорів людиною і пов'язані з особливостями його зорової системи.

79

Page 80: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.2. Графічні аспекти веб-дизайну. Графіка для Веб

Самими поширеними моделями є:

• RGB — адитивна колірна модель. • CMYK — субтрактивна колірна модель. • HSB та Lab — психологічні колірні моделі.

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

Модель RGB

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

Колір в моделі RGB представлено сумою яскравостей трьох базових кольорів — червоного (Red), зеленого (Green) і синього (Blue). Назва моделі утворена з перших букв англійських назв цих кольорів.

Для опису кольору в моделі RGB застосовують 3 байти (24 біти=3х8 біт), по одному байту на кожну колірну складову.

Яскравість (інтенсивність) кожного базового кольору може приймати 256 (28) дискретних значень від 0 до 255. Змішування кольорів в різних пропорціях, варіюючи яскравість кожної складової надає 256 x 256 х 256 = 16 777 216 кольорів.

Кожний колір можна представити в закодованому вигляді, що містить значення яскравості трьох колірних складових.

Десяткове і шістнадцяткове представлення кольору

Десяткове представлення — це трійка десяткових чисел, що розділені комами. Перше число відповідає яскравості червоної складової, друге — зеленої, а третє — синьої.

Наприклад, червоний колір: (255,0,0); зелений колір: (0,255,0), синій колір: (0,0,255)

Код кольору в шістнадцятковому представленні має вид 0хХХХХХХ. Префікс 0х вказує на те, що в коді використано власне шістнадцяткове число. Після префіксу зазначено шість шістнадцяткових цифр (0, 1, 2 ..., 9, А, В, З, D, Е, F).

Перші дві цифри — шістнадцяткове число, що представляє яскравість червоної складової, друга і третя пари відповідають яскравості зеленої та синьої складових.

Наприклад, червоний колір: 0xFF0000; зелений: 0x00FF00; синій: 0x0000FF.

Якщо всі складові мають максимальну яскравість (255,255,255 — в десятковому представленні; 0xFFFFFF — в шістнадцятковому представленні), виходить білий колір. Мінімальна яскравість (0, 0, 0 або 0х000000) відповідає чорному кольору.

Змішування базових кольорів

• Червоний і зелений — за максимальної яскравості утворюють жовтий колір. Зменшення яскравості червоного змінює результуючий колір у бік зеленкуватого, а зменшення яскравості зеленого робить колір оранжевим.

Жовтий колір: 255,255,0 або 0xFFFF00

80

Page 81: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.2. Графічні аспекти веб-дизайну. Графіка для Веб

• Зелений і синій — за максимальної яскравості надають блакитний колір. Змінюючи пропорції яскравості, можна отримати 65 000 відтінків блакитного, від небесного до темно-синього.

Блакитний колір: 0,255,255 або 0x00FFFF

• Червоний і синій — за максимальної яскравості надають фіолетовий колір. Зменшення яскравості синього зсуває колір у бік рожевого, а зменшення червоного — у бік фіолетового.

Фіолетовий колір: 255,0,255 або 0xFF00FF

Модель CMYK

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

Модель CMYK описує змішування фарб, які використовують для друкованих зображень. В цій моделі теж використовуються три базові кольори: блакитний (Cyan), фіолетовий (Magenta) і жовтий (Yellow). Крім того, застосовується чорний колір (blасК), але про нього буде розказано пізніше. (Зазвичай, абревіатуру CMYK вимовляють, як «цмік» або «смік». В певних джерелах радять вимовляти як «сі-мак»).

Кожен з трьох базових кольорів моделі CMYK утворюється в результаті вилучення з білого кольору одного з базових кольорів моделі RGB. Так, наприклад, блакитний (Cyan) утворюється внаслідок вилучення червоного з білого, а жовтий (Yellow) — вилученням синього.

Cyan = RGB - R = GB = (0, 255, 255);

Yellow = RGB - В = RG = (255, 255, 0);

Magenta = RGB - G = RB = (255, 0, 255).

Оскільки базові кольори CMYK утворюються внаслідок вилучення з білого кольору базових кольорів RGB, їх називають додатковими, бо вони доповнюють основні кольори до білого, а модель CMYK субтрактивною (що віднімає).

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

Змішування кольорів

Змішування кольорів в моделі CMYK є протилежним до змішування складових в моделі RGB. Проте, фарби субтрактивной моделі не є такими чистими, як кольори адитивної моделі. Цим і пояснюються наступні особливості:

• Блакитний і пурпурний — за максимальної яскравості надають глибокий синій колір з невеликим фіолетовим відтінком. Зменшення яскравості блакитного робить колір пурпурним, а зменшення яскравості пурпурного — середньо-синім (жовта складова відсутня).

• Пурпурний і жовтий — за максимальної яскравості утворюється суміш яскраво-червоного кольору. Зменшення яскравості пурпурної складової надає оранжевий, а зменшення яскравості жовто-рожевий колір (блакитна складова відсутня).

81

Page 82: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.2. Графічні аспекти веб-дизайну. Графіка для Веб

• Жовтий і блакитний — яскраво-зелений колір з невеликим відтінком синього. Зменшення яскравості жовтого дає смарагдовий колір, а зменшення яскравості блакитного — салатовий колір (пурпурна складова відсутня).

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

Представлення кольору

Колір в CMYK описується четвіркою десяткових чисел, кожна з яких визначає відсоток фарби даного кольору.

Наприклад, для отримання кольору «хакі» слід змішати 30% блакитної фарби, 45% пурпурної фарби, 80% жовтої фарби і 5% чорної.

Це позначають або (30,45,80,5) або C30M45Y80K5.

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

Взаємозалежність моделей RGB і CMYK

Основні кольори моделей RGB і CMYK знаходяться в залежності, яку представлено на рисунку.

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

Наприклад, щоб підсилити жовтий (Yellow), слід ослабити синій (Blue). На колі кольорів жовтий розташовано між зеленим (Green) і червоним (Red). Складання цих кольорів надає жовтий (Yellow).

Не всі кольори моделі CMYK можна представити в моделі RGB, і навпаки. У кількісному відношенні колірний діапазон CMYK є меншим за колірний діапазон RGB. Ця обставина є

82

Page 83: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.2. Графічні аспекти веб-дизайну. Графіка для Веб

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

Моделі HSB і HLS

Модель HSB засновано на трьох параметрах:

Н — відтінок або тон (Hue). S — насиченість (Saturation). В — яскравість (Brightness).

Модель HSB краще за моделі RGB і CMYK, відповідає поняттю кольору, яке використовують професійні художники. Дійсно, в них, зазвичай, є кілька основних фарб, а решта утворюються внаслідок додавання до них білої або чорної фарб. Таким чином, потрібні кольори — це певна модифікація основних кольорів: висвітлення або затемнення. Хоча, художники і змішують фарби, але це вже виходить за рамки моделі HSB.

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

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

Графічно модель HSB можна представити у вигляді конусу, вздовж якого розташовано відтінки кольорів. На зовнішньому краю конусу знаходяться чисті спектральні кольори або колірні тони (параметр Н вимірюється в кутових градусах, від 0 до 360). Чим ближче до центру кола розташовано колір, тим меншою є його насиченість, тим більш він є бляклим, пастельним (параметр S вимірюється у відсотках). Яскравість (освітленість) відображається на лінійці, що перпендикулярна до площини колірного кола (параметр В вимірюється у відсотках). Всі кольори на зовнішньому колі мають максимальну яскравість.

В певних графічних редакторах, наприклад, в Adobe FreeHand, використовується модель HLS (Hue, Lightness, Saturation), яка є схожою до HSB. У моделі HLS, на відміну від HSB, замість яскравості застосовано параметр L — освітленість (Lightness). Зменшення освітленості наближає колір до чорного, а збільшення — до білого. Чистий спектральний колір утворюється при освітленості 50 %.

Моделі HSB і HLS є апаратно незалежними і не орієнтовані на жоден технічний пристрій.

Модель Lab

Модель RGB орієнтована в основному на особливості випромінюваного світла (монітор), а CMYK — на особливості світла, що поглинається (принтер).

Колірні діапазони цих моделей не збігаються: RGB добре відтворює кольори в діапазоні від синього до зеленого і дещо гірше — жовті і оранжеві відтінки, а в моделі CMYK бракує багатьох відтінків.

83

Page 84: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.2. Графічні аспекти веб-дизайну. Графіка для Веб

Модель Lab позбавлена таких недоліків. В рамках цієї моделі працюють багато професіоналів комп'ютерної графіки.

Модель Lab засновано на трьох параметрах:

• L — яскравість (Luminosity)

• Два колірні параметри — а і b. Параметр а містить кольори від темно-зеленого через сірий до яскраво-рожевого. Параметр b містить кольори від світло-синього через сірий до яскраво-жовтого.

Параметр L ще називають освітленістю, легкістю і навіть світлістю. Поняття яскравості в моделях Lab і HSB не є тотожними. Як і в RGB, змішування кольорів зі шкал а і b дозволяє отримати яскравіші кольори. Зменшити яскравість кольору можна за рахунок параметра яскравості L.

Модель Lab є апаратно незалежною, її колірний діапазон покриває діапазони RGB і CMYK. Графічний редактор Adobe Photoshop при переході від режиму RGB до CMYK використовує Lab як проміжний етап.

Колірний обхват

Величезна кількість різних кольорів, які ми сприймаємо, може бути представлена на екрані монітора і на папері. Проте, монітор не може відтворити в точності всі кольори, які присутні в природі. Наприклад, він погано відтворює чисті блакитний і жовтий кольори. Частину кольорів, що відображаються монітором, можна надрукувати, проте, при друкуванні погано передаються кольори, що мають дуже низьку щільність. Тому, для моделей існує важлива характеристика - колірній обхват або діапазон (Gamut) колірних моделей.

Найбільшим колірний обхват має модель Lab, в ній можна представити практично всі природні кольори, які здатна сприйняти людина. Власне, з цією метою вона і створювалася.

Запис у файл

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

Після заголовку у файлі записуються один за одним коди кольорів (або параметрів колірної моделі) окремих пікселів, зліва направо і зверху вниз. Така структура файлу є досить узагальненою і реалізована у форматі BMP.

84

Page 85: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.3. Графічні аспекти веб-дизайну. Формати графічних файлів для Веб

4.3. Формати графічних файлів для Веб Знання файлових форматів та їх можливостей є одним з ключових чинників в комп'ютерній

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

Всі графічні дані в комп'ютері можна розділити на дві великі гілки: растрову і векторну.

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

Растровий файл влаштовано простіше. Він представляє прямокутну матрицю (bitmap), що поділена на піксели.

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

Растрові файли можна поділити на два типи: призначені для виводу на екран і для друку.

Графічні формати, що призначені для Веб

GIF (CompuServe Graphics Interchange Format)

Апаратно незалежний формат GIF було розроблено в 1987 році (GIF87a) фірмою CompuServe для передачі растрових зображень по мережах. У 1989-му формат було модифіковано (GIF89a), до нього було додано підтримка прозорості та анімації.

GIF використовує LZW-компресію, що дозволяє добре стискати файли, в яких багато ділянок з однорідним заповненням (логотипи, написи, схеми).

Метод стиснення LZW (Lempel-Ziv-Welch) розроблено в 1978 році ізраїльтянами Лемпелом і Зівом, і допрацьовано пізніше в США. Принцип стискання полягає у пошуку однакових послідовностей - фрази у всьому файлі. Виявлені послідовності зберігаються в таблиці, їм привласнюються короткі маркери - ключі. Так, якщо в зображенні є набори з рожевого, оранжевого і зеленого пікселів, що повторюються 50 разів, LZW виявляє цей набір, привласнює йому окреме число (наприклад, 7) і зберігає ці дані 50 разів у вигляді числа 7.

Метод LZW ефективно діє на ділянках однорідних, вільних від шуму кольорів, добре стискає довільні графічні дані, але процес кодування і розпаковування відбувається відносно повільно.

GIF дозволяє записувати зображення «через рядок» (Interlaced), завдяки чому, маючи лише частину файлу, можна побачити зображення цілком, але з меншою роздільністю. Це досягається за рахунок завантаження, спочатку 1, 5, 10 і далі рядків, за другим проходом підвантажуються 2, 6, 11 рядки, і згодом зображення набуває початкового вигляду. Черезрядковий запис дещо збільшує розмір файлу, але надає більшої зручності для користувачів.

85

Page 86: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.3. Графічні аспекти веб-дизайну. Формати графічних файлів для Веб

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

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

Особливості

• GIF використовує 8-бітовий колір і ефективно стискає суцільні колірні ділянки, при цьому зберігаючи деталі зображення.

• Кількість кольорів в зображенні може бути від 2 до 256, але це можуть бути будь-які кольори з 24-бітової палітри.

• Файл у форматі GIF може містити прозорі ділянки. Якщо використовується відмінний від білого кольору фон, він буде просвічуватися крізь прозорі ділянки в зображенні.

• GIF підтримує покадрову зміну зображень, що робить формат популярним для створення банерів і простої анімації.

• Використовує вільний від втрат метод стиснення.

Область застосування

Текст, логотипи, ілюстрації з чіткими краями, анімовані малюнки, зображення з прозорими ділянками, банери.

JPEG (Joint Photographic Experts Group)

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

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

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

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

Метод стиснення Хафмана (Huffman) розроблено в 1952 році і використовується як складова частина в ряді інших схем стиснення, в тому числі і у LZW. В методі Хафмана аналізується набір символів для визначення частоти кожного символу. Потім, для символів, що найчастіше зустрічаються, використовується позначення у вигляді мінімальної можливої кількості бітів. Наприклад, найчастіше в англійських текстах зустрічається буква "е". Використовуючи кодування Хафмана можна представити літеру "е" лише двома бітами (1 і 0), замість вісьмох бітів, необхідних для представлення букви "е" в кодуванні ASCII.

Таким чином, чим вище рівень компресії, тим більше даних відкидається, тим нижчою є якість. Використовуючи JPEG можна отримати файл в 2-500 разів менше, ніж ВМР.

Формат JPEG є апаратно незалежним, повністю підтримується на РС і Macintosh. JPEG не підтримує індексовані палітри кольорів.

86

Page 87: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.3. Графічні аспекти веб-дизайну. Формати графічних файлів для Веб

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

Краще і з меншими втратами стискаються великі зображення для Веб з високою роздільністю (200-300 dpi і більше), ніж з низькою (72-150 dpi), оскільки в кожному квадраті 8х8 пікселів переходи виходять м'якшими, за рахунок того, що таких квадратів є більше.

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

Даний формат називають стисненням з втратами, оскільки алгоритм JPEG вибірково відкидає дані.

Формат JPEG не підтримує прозорість і при збереженні зображення з прозорими ділянками, вони зафарбовуються в певний колір.

Особливості

• В зображенні може бути понад 16 мільйонів кольорів, що цілком достатньо для збереження фотографічної якості зображення.

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

• Підтримка технології прогресивного JPEG. Тоді, спочатку у вікні перегляду з'являється версія малюнка з низькою роздільністю, яка поступово набуває початкового вигляду при повному завантаженні самого зображення.

Область застосування

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

PNG (Portable Network Graphics)

PNG – Інтернет формат, який долає обмеження GIF. Використовує стиснення без втрат Deflate, подібне до LZW. Стиснуті індексовані файли PNG, зазвичай, є меншими за аналогічні GIF.

Глибина кольору може бути любою, до 48 біт. Використовується двовимірний interlacing (не лише рядків, але і стовпців), що, подібно до GIF, дещо збільшує розмір файлу. На відміну від GIF, де застосовується 100% прозорість, PNG підтримує також напівпрозорі піксели (в діапазоні прозорості від 0 до 99%) за рахунок Альфа-каналу з 256 градаціями сірого.

У файл формату PNG записується інформація про гамму. Гамма є певним числом, що характеризує залежність яскравості світіння екрану монітора від напруги на електродах кінескопа. Це число обчислюється з файлу і дозволяє вводити поправку яскравості при відображенні. Воно потрібне для однакового відображення інформації незалежно від апаратної платформи комп’ютера. PNG підтримується у всіх сучасних браузерах.

PNG-8

PNG-8 — формат, що діє аналогічно до GIF і має покращений формат стиснення даних.

87

Page 88: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.3. Графічні аспекти веб-дизайну. Формати графічних файлів для Веб

Особливості

• Використовує 8-бітову палітру (256 кольорів) в зображенні, за що і отримав в своїй назві цифру вісім. При цьому можна вибирати, скільки кольорів буде задіяно у файлі — від 2 до 256.

• На відміну від GIF, не відображає анімацію.

Область застосування

Текст, логотипи, ілюстрації з чіткими краями, зображення з градієнтною прозорістю.

PNG-24

PNG-24 — формат, аналогічний до PNG-8, але що використовує 24-бітову палітру кольору Подібно до формату JPEG, зберігає яскравість і відтінки кольорів у фотографіях. Подібно до форматів GIF і PNG-8, зберігає деталі зображення, як, наприклад, в лінійних малюнках, логотипах, або ілюстраціях.

Особливості

• Використовує понад 16 млн. кольорів, тому, застосовується для повнокольорових зображень.

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

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

Область застосування

Фотографії, малюнки, що містять прозорі ділянки, малюнки з великою кількістю кольорів і чіткими краями зображень.

Інші формати графічних файлів

Adobe Photoshop Document

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

Для стиснення застосовують метод RLE (Run Length Encoding), кодування із змінною довжиною рядка. Дія методу полягає в пошуку однакових пікселів в одному рядку. Якщо в рядку, наприклад, є 3 пікселя білого кольору, 21 - чорного, 14 - білого, то застосування RLE надає можливість не запам'ятовувати кожен з них (38 пікселів), а записати як 3 білих, 21 чорний і 14 білих в першому рядку.

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

88

Page 89: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.3. Графічні аспекти веб-дизайну. Формати графічних файлів для Веб

TIFF (Tagged Image File Format)

Апаратно незалежний формат TIFF, на сьогоднішній, день є одним з найпоширеніших і надійніших, його підтримують практично всі програми на РС і Macintosh, що пов’язані з графікою. TIFF є кращим вибором при імпорті растрової графіки у векторні програми та видавничі системи. Йому доступно весь діапазон колірних моделей від монохромної до RGB, CMYK і додаткових кольорів Pantone. TIFF може зберігати контури, Альфа-канали та інші додаткові дані.

TIFF має два різновиди: для Macintosh і РС. Це пов'язано з тим, що процесори Motorola читають і записують числа зліва направо, а процесори Intel - навпаки. Сучасні програми можуть без проблем використовувати обидва варіанти формату. Зазвичай, дані у форматі TIFF не стискаються, але може бути використано LZW-стиснення.

BMP (Windows Device Independent Bitmap)

Рідний формат Windows, який підтримується всіма графічними редакторами, що працюють під управлінням цієї операційної системи. Застосовується, в основному, для збереження растрових зображень, що призначені для використання в Windows. Може зберігати як індексовані (до 256 кольорів), так і RGB-кольори (понад 16 млн. відтінків). Можливе застосування стиснення за алгоритмом RLE.

PDF (Portable Document Format)

PDF запропоновано фірмою Adobe, як платформо-незалежний формат для створення електронної документації, презентацій, передачі верстки та графіки через мережі.

Односторінкові файли PDF відмінної якості може створювати Photoshop. Багатосторінкові PDF можуть створювати програми Adobe Acrobat, PageMaker і програми пакету MS Office.

PDF спочатку проектувався як компактний формат для електронної документації. Тому, всі дані в ньому можуть стискатися, причому, до різного типу інформації застосовуються різні, найбільш прийнятні для них типи стиснення: JPEG, RLE, CCITT, ZIP. Програма Acrobat дозволяє розставляти гіперпосилання, заповнені поля, додавати у файл PDF відео чи звук, інші дії.

Файл PDF може бути оптимізованим. З нього видаляються елементи, що повторюються, встановлюється посторінковий порядок завантаження сторінок через Веб, з пріоритетом спочатку для тексту, потім для графіки. Якщо елементів, що повторюються, немає, файл, після оптимізації, як правило, дещо збільшується.

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

WMF (Windows Metafile)

Векторний формат WMF є рідним форматом Windows і використовує його графічну мову. Призначений для передачі векторних даних через буфер обміну (Clipboard). Розпізнається практично всіма програмами Windows, так чи інакше пов'язаними з векторною графікою. Користуватися форматом WMF варто лише у випадках передачі «чистих» векторів. WMF спотворює колір, не зберігає певні параметри, які привласнюються об'єктам в різних векторних редакторах, не містить растрові об'єкти, не розпізнається багатьма програмами на Macintosh.

89

Page 90: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

4.3. Графічні аспекти веб-дизайну. Формати графічних файлів для Веб

Adobe Illustrator Document

Adobe Illustrator – популярний графічний редактор від Adobe. Векторний формат Illustrator можна безпосередньо відкрити у Photoshop, його підтримують майже всі програми Макінтош і Windows так чи інакше пов'язані з векторною графікою і графікою взагалі.

Формат Illustrator є найкращим посередником при передачі векторів з однієї програми в іншу, з РС на Macintosh і навпаки. Втілені або пов'язані з документом растрові файли при обміні через формат Illustrator втрачаються.

CorelDraw Document

Векторний формат, що має незаперечне лідерство на платформі РС. Багато програм на РС (FreeHand, Illustrator, PageMaker тощо) можуть імпортувати файли CorelDraw.

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

90

Page 91: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

5.1. Шрифти для Веб. Типи шрифтів

5.1. Шрифти для Веб Шрифт є одним із важливих елементів дизайну документа, який може підсилити чи навпаки

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

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

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

Шрифт — це невелика програма, яка написана спеціальною мовою розмітки шрифту.

За способом створення шрифти бувають растровими і векторними.

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

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

Існує кілька різних форматів векторних шрифтів, що різняться за способом збереження і представлення інформації про шрифт: це PostScript, Type1,TrueType, OpenType.

Для виведення векторного шрифту на растрові пристрої (монітори і принтери) його необхідно растеризувати — перетворити в набір точок. Для растеризації шрифтів в сучасні операційні системи Windows і Mac OS втілено растеризатор шрифтів.

За шириною символів шрифти поділяють на моноширинні і пропорційні.

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

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

Проте моноширинні шрифти мають певні недоліки: перш за все, більшу ширину набору, нерівномірний малюнок, а також складнощі з відображенням «широких» букв, таких як «Ш» або «М»: при невеликій роздільності їх важко впізнати.

91

Page 92: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

5.1. Шрифти для Веб. Типи шрифтів

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

В пропорційному шрифті символи можуть мати різну ширину. Наприклад, літера «І» займатиме значно менше місця, ніж літера «Ш». Це дозволяє в значній мірі зменшити середній розмір символу і зберегти при цьому легкість для читання. Текст, що набрано пропорційним шрифтом виглядає акуратніше і краще читається при великих об'ємах. Для друкування і відображення текстів майже завжди застосовується пропорційний шрифт.

Сімейства шрифтів • Serif — шрифти із зарубками на закінченнях літер.

• Sans-serif — шрифти без зарубок.

• Cursive — шрифти курсивного зображення (рукописні шрифти).

• Fantasy — декоративні шрифти.

• Monospace — моноширинний шрифт (з буквами однакової ширини).

Шрифт із зарубками (serif)

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

Шрифти із зарубками також називають антиквеними, тобто античними, стародавніми, оскільки вперше подібні елементи в літерах застосували ще стародавні римляни в шрифтах монументальних написів.

Шрифти із зарубками виглядають традиційно, типово, доброзичливо та знайомо і сприяють легшому сприйняттю великих об'ємів тексту. Яскравим прикладом серіфних є шрифти типу Times, Bodoni, Garamond.

Шрифти без зарубок (sans-serif)

Це так звані рубані шрифти або гротески (нім. Grotesk, анг. і фр. Grotesque, амер. Gothic). В перекладі з французької sans serif – «без зарубок».

В шрифтах без зарубок відсутні завершальні елементи на кінцях штрихів.

Для одних користувачів шрифти без зарубок виглядають сучасно і стильно. Для інших, вони

є штучними, позбавленими життя і не мають витонченості.

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

92

Page 93: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

5.1. Шрифти для Веб. Типи шрифтів

В операційних системах рубані шрифти користуються більшою популярністю, ніж шрифти із зарубками, тому перелік універсальних шрифтів без зарубок, що доступні на платформах Windows, Linux і MACOS є більш широким. Це Arial, Impact, Helvetica, Lucida, Tahoma, Trebuchet, Verdana.

Шрифти курсивного зображення (cursive)

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

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

Рукописні шрифти застосовують, зазвичай, не для інформативного тексту, а скоріше для

привабливості заголовків.

Декоративні шрифти (fantasy)

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

Декоративні шрифти найчастіше використовують для підсилення новизни, яскравості,

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

Акциденція – це сутності та форми, метою яких є не так інформативність, як привабливість.

До декоративних шрифтів можна віднести:

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

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

Неалфавітні і символьні шрифти. Це збірки спеціальних знаків (математичні, лінгвістичні, фонетичні, хімічні, астрономічні, електротехнічні, архітектурні картографічні, нотні, шахові

93

Page 94: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

5.1. Шрифти для Веб. Типи шрифтів

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

Альтернативні шрифти. Це шрифти, які створені у власному неповторному стилі. В основному - це новий вигляд шрифтових форм, що не містять в своїй основі інших шрифтів.

Гарнітура шрифту

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

Комплект шрифтів, що мають схожий малюнок, але різняться за накресленням (звичайний, курсивний, жирний), називається гарнітурою. Наприклад, шрифти «Arial», «Arial Bold», «Arial Italic» складають одну гарнітуру «Arial».

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

Прикладом може служити шрифт Franklin, (Franklin, Franklin) який налічує близько 33 зображень.

Вибір шрифту для сайту

Вибір відповідного шрифту для сайту є непростою справою:

• Певні шрифти оптимізовані для виводу на друк, інші на екран. Шрифти, які створені для виведення на друк (зокрема шрифти із зарубками) на екрані можуть виглядати неакуратно.

• Не всі операційні системи містять однакові системні шрифти.

• Розмір шрифту залежить від роздільності екрану та налаштувань операційної системи користувача.

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

Безпечні шрифти Під час підготовки до створення веб-сайту, необхідно визначитися зі шрифтами, що будуть

використані. Часто різними шрифтами дизайнер набирає не лише основний текст сторінки, але і різноманітні заголовки, логотипи, та інші елементи, що прикрашатимуть сторінку.

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

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

2. Довільні шрифти, які користувач доставляє за власними потребами та уподобаннями. Вони можуть бути відсутніми у значної групи користувачів.

94

Page 95: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

5.1. Шрифти для Веб. Типи шрифтів

Стандартні шрифти

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

Перелік стандартних шрифтів різних версій Windows

Шрифт Сімейство Windows Зразок шрифту Arial sans-serif 3.1, 95, NТ 3.5 Arial Black sans-serif 95, 2000 Arial Narrow sans-serif — Arial Unicode MS sans-serif — Book Antiqua serif 98 Bookman Old Style serif — Calibri sans-serif Vista Cambria serif Vista Candara sans-serif Vista Century serif — Century Gothic sans-serif 95 Comic Sans MS cursive 95, 2000 Consolas monospace Vista Constantia serif Vista Corbel sans-serif Vista Courier New monospace 3.1, 95, NT 3.5 Franklin Gothic Medium sans-serif XP Garamond serif — Georgia serif 95, 2000 Impact sans-serif 95, 2000 Lucida Console monospace 95, NT 3.5 Lucida Sans Unicode sans-serif 95, NT 3.5 Microsoft Sans Serif sans-serif 2000 Mistral cursive — Monotype Corsiva cursive — Palatino Linotype serif 2000 Segoe Print cursive Vista Segoe Script cursive Vista Segoe UI sans-serif Vista Sylfaen serif XP Tahoma sans-serif 98, 2000 Times New Roman serif 3.1, 95, NT 3.5 Trebuchet MS sans-serif 95, 2000 Verdana sans-serif 95, 2000

В таблиці вказано версії Windows, з якими вперше поставлявся шрифт.

Перелік стандартних шрифтів Mac OS можна подивитися на сторінці http://www.microsoft.com/typography/fonts/mac.htm

Що стосується Unix/Linux операційних систем, то єдиного набору шрифтів в них немає. За статистикою http://www.codestyle.org більшість Unix/Linux користувачів мають на своєму комп'ютері

95

Page 96: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

5.1. Шрифти для Веб. Типи шрифтів

шрифти набору Core fonts for the Web, який є офіційно доступним на сайті Microsoft для безкоштовного користування.

Веб-безпечні шрифти

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

Основою для визначення «безпечних» шрифтів послужили шрифти найбільш поширеної операційної системи Windows, які використовуються в інших операційних системах, наприклад, пакет шрифтів Core fonts for the Web.

Цей пакет містить наступні шрифти: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Всі вони підтримують кирилицю, що важливо для слов’яномовної аудиторії.

Набір шрифтів, які входять в стандартне постачання Mac OS містять всі шрифти набору Core fonts for the Web.

Таким чином, на основі шрифтів Windows, що використовуються в інших операційних системах сформувався наступний список так званих «безпечних» веб-шрифтів:

• Arial

• Arial Black

• Comic Sans MS

• Courier New

• Georgia

• Impact

• Times New Roman

• Trebuchet MS

• Verdana

• Webdings - містить набір картинок, тому його використовують для відображення іконок чи піктограм.

Ці шрифти є в кожного користувача Windows, Mac OS і у переважної більшості користувачів Unix/Linux.

Шрифти, що підтримують кирилицю

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

Нижче приведена таблиця відповідностей шрифтів.

Windows Mac OS Unix/Linux Родове сімейство

Arial Black Helvetica CY Nimbus Sans L Sans-serif

Arial Helvetica CY Nimbus Sans L Sans-serif

96

Page 97: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

5.1. Шрифти для Веб. Типи шрифтів

Comic Sans MS Monaco CY * (див. нижче) cursive

Courier New * (див. нижче) Nimbus Mono L Monospace

Georgia * (див. нижче) Century Schoolbook L Serif

Impact Charcoal CY * (див. нижче) Sans-serif

Times New Roman Times CY Nimbus Roman No9 L Serif

Trebuchet MS Helvetica CY * (див. нижче) Sans-serif

Verdana Geneva CY DejaVu Sans Sans-serif

* - рідних кириличних еквівалентів Windows-шрифта в операційній системи немає.

Безпечні лінійки шрифтів

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

За замовченням, для відображення тексту буде застосовано перший за ліком шрифт. У разі його відсутності на комп’ютері користувача для відображення буде використано наступний за ліком шрифт, і так далі. Зрештою, браузер обере з переліку відповідний для відображення шрифт.

Безпечні лінійки для кириличних шрифтів

Шрифти Безпечні лінійки шрифтів

Arial Black

Arial

Comic Sans MS

Courier New

Georgia

Impact

Lucida Console

Lucida Sans Unicode

Tahoma

Times New Roman

Trebuchet MS

Verdana

font-family: "Arial Black", "Helvetica CY", "Nimbus Sans L" sans-serif.

font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif.

font-family: "Comic Sans MS", "Monaco CY", cursive.

font-family: "Courier New", "Nimbus Mono L", monospace.

font-family: Georgia, "Century Schoolbook L", Serif.

font-family: Impact, "Charcoal CY", sans-serif.

font-family: "Lucida Console", Monaco, monospace.

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif.

font-family: Tahoma, "Geneva CY", sans-serif.

font-family: "Times New Roman", "Times CY", "Nimbus Roman No9 L", serif.

font-family: "Trebuchet MS", "Helvetica CY", sans-serif.

font-family: Verdana, "Geneva CY", "DejaVu Sans", sans-serif.

Нестандартні (довільні) шрифти

А як же бути з решта шрифтами? Адже хочеться, щоб задум дизайнера побачило як можна більше число користувачів!

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

97

Page 98: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

5.1. Шрифти для Веб. Типи шрифтів

Заміна тексту картинкою

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

Незручності, що виникають при використанні графіки замість тексту:

• Ускладнення в технічному обслуговуванні. Зміст тексту, що представлено у вигляді малюнку, не можна оперативно змінити. Власника сайту буде практично позбавлено можливості самостійно змінювати і додавати написи, що зроблені за допомогою картинок.

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

• Не можна виділити і скопіювати текст, який відображено на картинці.

• До кожного графічного елементу в коди HTML потрібно додавати опис. Якщо до малюнка не додано атрибуту опису ”ALT”, то користувач браузера з вимкненим відображенням графіки не побачить вмісту картинки і відповідно надпису, що мав би відображатися у цьому місці.

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

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

Втілення шрифтів — EOT (Embedded OpenType)

Технологія Embedded OpenType (втілений формат OpenType) з'явилася в 1997 році. Можливість повноцінно використовувати будь-який шрифт на сайті існувала починаючи з Internet Explorer 4, але монополія Microsoft перешкоджала популяризації цієї технології. Також свою роль зіграв єдиний на той час конкурент Internet Explorer — Netscape, який просував іншу технологію впровадження шрифтів — TrueDoc.

Технологія EOT стискає і конвертує шрифти форматів TrueType і OpenType у формат EOT. Під час конвертації, в кореневий рядок шрифту прописуються адреси сайтів (або локальні адреси), де фізично буде розташовано файл шрифту. Якщо адреса сайту не збігається з адресою в кореневому рядку, то шрифт не відображатиметься.

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

CSS-правило @font-face

Починаючи з Firefox 3.5, Google Chrome 2, Opera 10 і Safari 3.1 стало можливим використовувати в цих браузерах CSS-правило @font-face, яке дозволяє імпортувати зовнішній файл шрифту в документ. Це означає, що якщо в відвідувача не встановлено потрібний шрифт, він завантажиться з сервера без втілення в операційну систему.

98

Page 99: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

5.1. Шрифти для Веб. Типи шрифтів

На даний момент ці браузери обробляють будь-який шрифт форматів OTF і TTF без необхідності конвертації в захищений формат EOT. Це істотна відмінність від Internet Explorer, який підтримує використання шрифтів лише у форматі EOT.

Переваги застосування правила @font-face:

• Гнучкість. Власник сайту може як завгодно міняти будь-які тексти.

• Висока швидкість завантаження. Мінімальна кількість зовнішніх файлів за будь-якої кількості тексту нестандартним шрифтом.

• Максимальна швидкість роботи сайту. Немає додаткових елементів в DOM структурі, немає скриптів і флеш-об'єктів, що уповільнюють завантаження та роботу сайту.

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

• Досить проста реалізація навіть з врахуванням оптимізації шрифту.

Недоліки:

• Підтримується не всіма браузерами. Технологію підтримують IE 4+, Opera 10.5+, Firefox 3.5+, Chrome 2+, Safari 1+.

• Великий об’єм шрифту. Може сягати кількох мегабайт, але ця проблема частково вирішується.

• Відображення шрифту після його повного завантаження. Допоки завантажується шрифт, в одних браузерах (IE, Firefox, Opera) користувач бачить відображення тексту звичайним шрифтом, в інших — взагалі не бачить тексту (Safari, Chrome).

• Дотримання авторських прав щодо використання шрифту.

• Спостерігаються певні дрібні незручності, наприклад, не промальовується повністю текст (Safari, Chrome, Opera).

Існують інші технології стосовно застосування нестандартних шрифтів. Детальну інформацію можна прочитати за адресою:

http://www.xiper.net/html-and-css-tricks/typographics/any-font.html

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

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

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

В друкарських текстах зарубки мають складну, загострену на кінці, форму і з'єднуються з основним штрихом плавно. На екрані окремий символ займає, зазвичай, 10–15 пікселів у висоту, зарубка відображається лінією завтовшки лише в 1 піксел і не може плавно з'єднуватися з основним штрихом або мати загострену форму. До того ж, для 10–15 пікселів символу 2 піксели зарубок (знизу і зверху) є достатньо великим візуальним навантаженням.

99

Page 100: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

5.1. Шрифти для Веб. Типи шрифтів

Твердо стверджувати, що існує самий кращий шрифт для верстання сайту не можна. Якщо такий шрифт і існує, то для кожного розробника свій.

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

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

При відвідуванні зручного веб-сайту у користувача повинна бути можливість:

• Відключити таблицю стилів веб-сайту, щоб браузер відобразив сторінку, використовуючи власні налаштування чи налаштування користувача.

• Використати власну таблицю стилів, якщо є така можливість.

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

Тому, розробник має враховувати наступні правила:

• Переконатися, що в розробленому сайті ніщо не заважатиме користувачеві встановити свої налаштування відносно шрифту.

• Для встановлення властивостей шрифту слід використовувати таблиці стилів замість прописування цих властивостей в HTML-коді.

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

• Шрифт за стилем повинен відповідати змістовному навантаженню сайту.

• Використовувати шрифти, що оптимізовані для виводу на екран.

• Уважно проаналізувати сайт стосовно зручності сприйняття і читабельності текстів відповідними шрифтами: довжина рядків, міжрядковий інтервал (висота рядків), розмір шрифту, співвідношення тексту і вільного простору на сторінці. Підвищення читабельності тексту забезпечує важливі чинники: увагу, швидкість прочитання та осмислення інформації.

Вибір розміру шрифту При виборі розміру шрифту можна застосувати кілька підходів:

1. Не задавати розмір шрифту, використовувати розміри, що встановлені в браузерах за замовченням і цілком відмовитися від контролю за розміром шрифту.

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

2. Визначити розмір, використовуючи відносні або абсолютні одиниці вимірювання.

100

Page 101: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

5.1. Шрифти для Веб. Типи шрифтів

Абсолютні одиниці

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

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

Одиниця Опис

in Дюйм (1 дюйм = 2,54 см)

mm Міліметр

pc Піка (1 піка = 12 пунктам)

pt Пункт (1 пункт = 1/72 дюйми ≈ 0.35 мм) cm Сантиметр

Пункт (pt, пт) - абсолютна одиниця вимірювання, що використовується найчастіше. 1 пункт дорівнює 1/72 дюйми, і саме з даним співвідношенням пов'язано частину проблем пунктів, як одиниць вимірювання.

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

Стандартна роздільність комп'ютерів РС дорівнює 96 ppi, тобто, в одному дюймі знаходяться 96 пікселів. Таким чином, 1 пункт = 1/72 дюйми на екрані РС займає приблизно 1,3 піксели.

Але не всі системи мають таку ж стандартну роздільність. Роздільність комп'ютерів Macintosh дорівнює 72 ppi, тобто в одному дюймі міститься 72 піксели і 1 пункт займає 1 піксел. В результаті один і той же текст, розмір якого заданий в пунктах, на екрані Macintosh виглядає в 1,3 рази меншим, ніж той же самий текст на комп'ютерах РС. При використанні шрифту розміром 9 пунктів і менше, текст на екрані Macintosh стає нечитабельним.

Інші абсолютні одиниці

Інші абсолютні одиниці вимірювання також не є вдалими для відображення тексту на екрані - це піки (pc), дюйми (in), сантиметри (cm) і міліметри. Вони, подібно до використання пунктів, можуть привести до непередбачуваних результатів.

Абсолютні одиниці вимірювання варто застосовувати лише тоді, коли відомо про точні фізичні розміри пристрою відображення (наприклад, розміри екран дисплея або сторінки, що буде видрукувана). Тому, в більшості випадків для Інтернет видань використовуються відносні одиниці.

Відносні одиниці

Відносні одиниці визначають розмір елементу через значення іншого розміру.

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

101

Page 102: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

5.1. Шрифти для Веб. Типи шрифтів

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

Одиниця Опис

px Піксел

% Відсоток

em Висота найбільшої літери шрифту

ex Висота рядкової літери шрифту

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

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

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

Відсотки вказують на розмір обраного шрифту відносно розміру шрифту, що встановлено в сайті чи браузері за замовченням. Тому, наприклад, можна задати, що основний текст сторінки повинен дорівнювати 100%, заголовок - 130%, підзаголовок - 120%, а текст в навігаційному блоці 95% від встановленого за замовченням шрифту.

Одиниці em і ex є величинами, відносними до шрифту, що встановлено за замовченням у сайті чи браузері користувача. Одиниця 1 em дорівнює висоті найбільшої літери цього шрифту (зазвичай, це літера «M», звідси абревіатура em), а 1 ex дорівнює висоті рядкових літер шрифту (зазвичай, це висота літери «x», звідси англійська назва x-height і абревіатура ex).

102

Page 103: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

5.2. Шрифти для Веб. Кодування текстової інформації

5.2. Кодування текстової інформації Кодуванням веб-сторінки називається спосіб кодування текстової інформації для передачі у

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

Наприклад, одним бітом можна закодувати два значення, двома бітами – чотири значення, а три біта кодують вісім значень. Для кодування текстової інформації зазвичай використовують 8 біт, що дозволяє представити 256 (28) різних символів. Окрім 8-бітового кодування, існують також 16 та 32-бітові кодування, що відповідно можуть представити 65536 (216) або 4294967296 (232) символів тексту.

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

Часто, після завантаження сторінки, замість тексту відображається незрозуміла «абракадабра». Навряд чи відвідувачі сайту захочуть витрачати час на з'ясування кодування сторінки. Зрозуміло, що сайт з такими недоробками не зможе претендувати на високі позиції в рейтингу пошукових систем та популярність серед відвідувачів.

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

Кодування кирилиці Кодуванням кирилиці називається загальноприйнятий стандарт, що містить набір символів,

який дозволяє відображати в документах HTML знаки кириличного алфавіту.

На даний час існує п'ять основних кодувань кирилиці - ISO, KOI8-R, DOS, Windows 1251 і MAC, за допомогою яких можна відобразити на веб-сторінці знаки кириличного алфавіту. Існує також ряд менш поширені кодування, що в той чи інший спосіб відтворюють символи кирилиці, зокрема Unicode(UTF-8) і трансліт.

Історично першим виникло кодування KOI8 (код обміну інформації вісімбітовий). Воно було розроблено в середині 70-х років радянськими фахівцями, а у 80-х стало базовим кодуванням для русифікованих UNIX-сумісних операційних систем. На сьогоднішній день KOI8 є основним стандартом для серверів, що працюють на базі платформи UNIX (наприклад, для http-сервера Apache), а також використовується як «формат за замовченням» при пересиланні електронною поштою кириличних повідомлень.

Компанія Microsoft, при створенні програмного забезпечення для роботи в Інтернеті, запропонувала стандарт Microsoft code page1251 (Windows 1251), що набув широкого поширення завдяки популярності операційної системи Microsoft Windows і http-сервера Internet Information Server, що міститься в комплекті Windows. Саме тому, і Windows 1251, і KOI8-R складають мінімально допустимий набір кодувань, які повинна обов'язково підтримувати будь-яка веб-сторінка.

Стандарт Microsoft/IBM code page 866 (альтернативне кодування DOS) служить базовим кодуванням в операційних системах MS-DOS і OS/2, і тому в даний час воно практично не використовується, оскільки навіть сам розробник і виробник DOS, компанія Microsoft, відмовилася від подальшої підтримки цієї лінії операційних платформ. Проте, кодування живе і до цього дня,

103

Page 104: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

5.2. Шрифти для Веб. Кодування текстової інформації

оскільки частина користувачів досі користуються браузерами, що працюють в середовищі MS-DOS, а також даний стандарт прийнято за замовченням в некомерційній мережі FidoNet.

Кодування ISO-8859-5 було розроблено Комітетом з міжнародних стандартів ISO (International Standards Organization) і застосовується в основному в UNIX-сумісних операційних системах. Оскільки даний набір символів було створено західними фахівцями, які не добре знаються на слов’янських мовах та наявні різноманіття кодувань кирилиці, ISO не набула широкого поширення, проте, достатньо часто зустрічається в Інтернеті і активно підтримується рядом серверів.

Macintosh CP (MAC) призначене для використання на комп'ютерах AppleMacintosh, що оснащені операційною системою MACOS. Із-за високої вартості Apple-сумісні комп'ютери не отримали в наший країні широкого розповсюдження, проте вони іноді експлуатуються на великих вітчизняних підприємствах.

Універсальний міжнародний стандарт Unicode (UTF-8) було створено з благородною метою об'єднати всі існуючі національні кодування до єдиного стандарту. Оскільки для відображення одного символу в Unicode відводиться не один байт, як це прийнято в інших стандартах, а два, дане кодування містить 65 536 знаків замість 256. Тут представлено не лише букви всіх алфавітів світу, природних або створених штучно, але і багато спеціальних символів — математичних, музичних, фізичних. Поволі популярність Unicode зростає, хоча й поступається Windows 1251.

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

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

Нижче перелічено стандартні адреси портів для більшості серверних програм, що використовуються в Інтернеті:

8080 - Microsoft code page 1251 (Windows 1251).

8081 - Microsoft/IBM code page 866 (DOS).

8082 - Macintosh CP (MAC).

8083 - KOI8-R.

8084 - Трансліт.

104

Page 105: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

6.1. Підходи до створення контенту сайтів. Інформаційне наповнення

6.1. Інформаційне наповнення сайту Контент (content, вміст) — це інформаційне наповнення сайту, та інформація, яку розробник

складає самостійно або копіює з дотриманням відповідних законностей.

Контент містить:

• Тексти. • Графіку: картинки, фото, креслення, елементи інтерфейсу. • Мультимедіа: аудіо та відео файли. • Файли у форматі: Adobe, Excel, Word, Power Point, exe, rar.

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

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

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

Підготовка текстів Грамотне, якісно виконане і цікаве наповнення сайту здатне значно допомогти компанії і її

сайту – підвищити відвідуваність, популярність, прибуток.

Правила і поради щодо якості контенту

1. Текст повинен бути написаний цікаво, привертати увагу і затримувати відвідувача.

2. У тексті не повинно бути орфографічних помилок, друкарських недоречностей, використання різних елементів в межах одного тексту (наприклад, різних термінів для одного і того ж поняття), це може заплутати читача .

3. Текст повинен бути унікальним для пошукових систем. Брати чужий текст і ставити на свій сайт, змінивши лише назву компанії, неправильно. За це ваш сайт може бути вилучено з баз пошукових систем.

4. Текст необхідно оптимізувати під пошукові системи – додати (органічно вписати) достатньо багато ключових слів і виразів.

5. Текст повинен бути «читабельним» для відвідувачів сайту. Часто власники сайту так прагнуть оптимізувати текст, що жоден відвідувач не може винести більш за одне речення. Не захоплюйтеся.

6. Текст повинен виконувати задану для нього мету: інформувати, коли потрібно інформувати, переконувати, коли потрібно переконувати, продавати, коли потрібно продавати.

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

105

Page 106: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

6.1. Підходи до створення контенту сайтів. Інформаційне наповнення

Джерела контенту для сайту

Оптимізуючи сайт під пошукові системи великої уваги слід приділяти значущим ключовим словам, що розміщуються на сторінках сайту. При правильному підході кожна нова стаття — це набір ключових слів, за якими відвідувачі заходять на сайт через пошукові системи. Чим текст на сторінках є унікальнішим, тим більшою є вірогідність високої популярності в пошукових результатах. Унікальний контент цінується не лише пошуковиками, але і відвідувачами сайту. Від контенту залежатиме позиція сайту в результатах пошукової системи, кількість підписчиків на RSS-канал, популярність і цитованість матеріалу і сайту в цілому, а також ряд інших переваг.

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

1. Написання документації

Якщо ви добре розбираєтеся в чомусь і можете із цього приводу написати докладну документацію, то це відмінний спосіб привернути до сайту необхідну аудиторію. Документація може бути як звичайними відповідями на питання FAQ (Frequently Asked Questions), що часто ставляться, інструкція по використанню, так і докладним описом пристроїв з наведенням табличних параметрів.

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

2. Публікація новин

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

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

3. Законний копіпаст (Copy Paste)

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

4. Імпорт контенту

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

106

Page 107: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

6.1. Підходи до створення контенту сайтів. Інформаційне наповнення

5. Моніторинг відповідей на mail.ru, google або yahoo

Відповіді у google, yahoo, mail.ru є хорошим джерелом ідей для написання контенту на сайті. Копірайтінг матеріалу по відповідях на соціальних сервісах буде актуальним і відповідно може привернути велику кількість аудиторії на ваш сайт.

6. Рерайт статей (ReWrite)

Один із способів отримати контент для сайту – рерайт готових статей. Рерайт це перерозподіл домінанти тексту, зміна форми без зміни сенсу, так і розбавлення контенту необхідними ключовими фразами, за якими розробник представляє сайт. При рерайті, також, як і при копіпасті, постає питання законності та етики. Щоб не переступати межі етики, слід обов'язково посилатися на джерело цих ідей.

7. Блогінг

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

8. Стеження за тенденціями в різних співтовариствах

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

9. Збір інформації

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

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

Самий кращий спосіб наповнення сайту контентом – це дозволити користувачам робити це самостійно: коментування, питання і відповіді, обговорення (форум), рейтинги тощо. Цей метод є часто застосовується в соціальних сервісах, таких як «вконтакте», «однокласники».

Підготовка графічних файлів Веб-зображення на сайті створити нескладно, але до їх розміщення та оптимізації варто

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

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

107

Page 108: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

6.1. Підходи до створення контенту сайтів. Інформаційне наповнення

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

Основні принципи і рекомендації

1. Використовуйте графічні зображення на сайті з певною метою

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

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

2. Прагніть обходитися без використання графічного тексту

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

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

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

Графічний текст не підтримує можливостей змінити колір або стиль графічного тексту.

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

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

3. Прописуйте всі зображення альтернативним текстом

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

Якщо графічне зображення містить важливу для змісту і функціонування сторінки інформацію, користувачі з відключеною графікою можуть прочитати текстовий опис, що міститься в атрибуті ALT тега IMG.

108

Page 109: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

6.1. Підходи до створення контенту сайтів. Інформаційне наповнення

Користувачі, які позбавлені доступу до зображень або у яких відключено відображення графічних елементів, можуть отримати вичерпною інформацію за допомогою альтернативного тексту. Графічні зображення, які є частиною інтерфейсу користувача, повинні обов'язково супроводжуватися альтернативним текстом, що виконує еквівалентну функцію, наприклад «Перейдіть до наступної сторінки сайту» або «Видрукувати сторінку».

4. Графіка що є частиною змісту, повинні супроводжуватися текстовим описом

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

5. Використовуйте зменшені копії великих малюнків

Великі зображення вимагають більше часу для завантаження і обмежують гнучкість сторінки. Тому, для максимальної зручності відвідувачів на сторінки сайту слід виносити картинки невеликого розміру (іконки), які користувач за потребою може легко збільшити.

6. Уникайте надмірного використання анімованих зображень на сайті

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

Веб-анімація З розвитком Інтернету розробники веб-сайтів частіше почали використовувати анімацію.

Поза сумнівом, анімація на сторінках сайту пожвавлює зміст. Особливо це стосується ресурсів, що містять громіздкі тексти і публіцистичні матеріали. Але коли анімація (GIF і Flash) бездумно і, найголовніше, у великій кількості розміщується на сайті, мимоволі створюється враження, що зроблено це лише для демонстрації рівня майстерності дизайнера або веб-студії. При цьому про зручність користувачів, такі розробники не замислюються. Адже часто, із-за великої кількості флэш-роликів і gif-анімації на сайті, важко прочитати та запам’ятати інформацію.

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

Використання анімації НЕОБХІДНЕ, коли:

• Привернути увагу користувачів до певної області веб-сторінки. • Потрібно наочно продемонструвати можливості рекламованого товару.

Анімацію НЕ слід застосовувати:

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

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

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

109

Page 110: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

6.2. Підходи до створення контенту сайтів. Лінгвістичні засоби проектування

6.2. Лінгвістичні засоби проектування контенту сайтів В останні роки спостерігається динамічне зростання Інтернет-ресурсів, найважливішим

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

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

Використання на передпроектній стадії

Передпроектна стадія розробки сайту передбачає дослідження предметної області в рамках якої створюється сайт:

• Розробку концептуальної моделі сайту. • Розробку технічного завдання.

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

Результатом цього етапу є побудова логіко-понятійної схеми предметної області, для якої створюється сайт (наприклад, «Додаткова освіта для студентів», «Інформаційно-комунікаційні технології в освіті») або об'єкта сайтобудування (бібліотека спеціалізованої літератури, навчальний інститут, Інтернет-магазин, приватна сторінка людини).

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

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

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

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

Важливі етапи створення любої ІПМ:

• Відбір лексичних одиниць. • Нормалізація лексики. • Систематизація лексики.

110

Page 111: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

6.2. Підходи до створення контенту сайтів. Лінгвістичні засоби проектування

• Оформлення організаційної структури ІПМ.

Послідовне виконання цих етапів дозволяє здійснити аналіз сайтів-аналогів.

Методика аналізу передбачає:

• Виявлення рубрик, що відображають контент обстежуваних сайтів.

• Усунення синонімії та багатозначності у формулюванні рубрик.

• Ранжування виявлених і нормалізованих рубрик за частотою їх вживання.

• Визначення «типової моделі» контенту аналізованих сайтів.

Завершальним етапом передпроектної стадії розробки контенту є створення інформаційного образу сайту.

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

Поряд з уточненням меж контенту сайту, інформаційний образ забезпечує вирішення цілого ряду важливих завдань:

• Визначення складу рубрик, що відображають контент сайту.

• Розподіл рубрик за рівнями вкладеності.

• Встановлення взаємозв'язків рубрик.

• Визначення стилю тексту.

Для створення інформаційного образу можна використати технологію створення лексико-семантичної основи ІПМ, зокрема:

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

• Вже існуючі, тобто раніше розроблені ІПМ, що мають фіксований словник: класифікаційні ІПМ, дескрипторні ІПМ (дескрипторні словники, інформаційно-пошукові тезауруси).

• Масив нормативних, довідкових, навчальних, наукових документів з тематики сайту.

• Всі джерела відбору лексики варто використовувати одночасно, в комплексі.

2. Нормалізація виявлених лексичних одиниць реалізується за допомогою двох операцій:

• Поданням лексичних одиниць в однакової граматичній формі на морфологічному рівні.

• Усуненням синонімії та полісемії на семантичному рівні.

3. Систематизація лексичних одиниць.

• Групування, впорядкування лексичних одиниць.

• Встановлення між ними змістовних зв'язків (парадигматичні зв’язки).

4. Інтеграція лексичних одиниць в інформаційний образ сайту. Відповідає за етап організаційного оформлення лексики ІПМ. Реалізується у графічному, знаковому втіленні інформаційного образу контенту сайту, що залежить від типу використаних лінгвістичних засобів: нормалізовані і систематизовані лексичні одиниці можуть бути представлені в інформаційному образі як:

• Комплекс предметних рубрик. • Дескрипторні статті. • Фрагмент ієрархічної класифікації, ієрархічного дерева.

111

Page 112: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

6.2. Підходи до створення контенту сайтів. Лінгвістичні засоби проектування

• Фрагмент таблиці чи матриці.

Пропонована технологія розробки інформаційного образу може бути використана при:

• Розробці контенту конкретних сайтів. • Оптимізації контенту раніше створених сайтів. • Підготовці спеціалістів з інформаційного наповнення.

Використання на проектній стадії

Лінгвістика веб-інтерфейсів покликана допомогти правильно писати тексти (вибирати вірний стиль і мовні форми) для електронних видань, блогів та інших засобів обміну інформації в Інтернеті

Основні положення

1. Загальні норми мови. Дотримання правил формування пропозицій, складання словосполучень і розстановки розділових знаків у текстах для веб-інтерфейсів.

2. Використання лексики. Контроль використання незнайомих слів, що вводяться автором визначень, їх обов'язкове пояснення і роз'яснення. Акуратне застосування неологізмів, професіоналізмів і застарілої лексики в тексті.

3. Інтонації і акценти. Додавання акцентів в текст шляхом візуального виділення слів і правильної побудови речень. Складання тексту для його однозначного інформаційного трактування.

4. Мовні конструкції. Використання причетних і дієприкметникових оборотів для додавання писемному мовленню правильної форми і для кращого засвоєння матеріалу. Збагачення тексту за допомогою порівняльних зворотів і додатків.

5. Авторські знаки. Принцип використання вказівок на автора в текстах. Доречність застосування займенників для особистісного забарвлення текстів. Створення наукових текстів без особистісної складової.

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

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

Достатньо ефективним є аспектний метод, який доцільно застосовувати для розробки аспекту структур наповнення кожної рубрики, що характеризує контент сайту. Так, наприклад, при розробці контенту сайту університету найважливішими рубриками є такі, як «Навчальні напрямки», «Наукова діяльність», «Конференції», «Інформація для студентів» тощо.

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

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

Використання на післяпроектний стадії

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

112

Page 113: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

6.2. Підходи до створення контенту сайтів. Лінгвістичні засоби проектування

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

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

Наявні традиційні тексти часто виявляються не придатними для розміщення на сайті і вимагають обов'язкової попередньої переробки. Варто слідувати основним вимогам, яким повинен задовольняти текст, розміщений в мережі Інтернет.

Тексти в веб-інтерфейсах

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

• Публіцистичні. Тексти, які опубліковані в офіційних джерелах, представництвах корпорацій, компаній, а також новинні відомості, стрічки, статті та повідомлення від електронних засобів масової інформації. Відрізняються лаконічною подачею матеріалу, набором джерел і спеціалізованістю.

• Художні. Повідомлення в особистих блогах, платформах для блогів, за виразом особистої позиції автора. Часто змішуються з публіцистичним стилем.

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

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

• Стислість. • Інформативність, простота і лаконічність пропозицій. • Структурованість і порціонність тексту. • Нелінійність.

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

Для вирішення проблеми неоднорідності подання інформації про однотипні об'єкти в рамках одного сайту, раціонально використовувати вже розглянутий вище аспектний метод. Так, наприклад, для розкриття змісту рубрики «Проекти», доцільно використати перелік таких аспектів, як:

• Найменування проекту. • Хронологічний період, керівник, учасники проекту. • Мета проекту, короткий зміст проекту. • Отримані або очікувані результати.

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

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

113

Page 114: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

6.2. Підходи до створення контенту сайтів. Лінгвістичні засоби проектування

інформаційним наповненням, веде до порушення системності даних і ускладнення орієнтації для користувача.

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

114

Page 115: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

6.3. Підходи до створення контенту сайтів. Кросбраузерність сайту

6.3. Кросбраузерність сайту Кросбраузерність (cross-browser) чи браузерна незалежність - це властивість сайту ідентично

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

Як забезпечити кросбраузерність сайту?

Щоб сайт однаково виглядав в популярних браузерах (Internet Explorer, FireFox, Opera, Chrome та інших), причому самих різних версій, дизайнер повинен подбати про це від початку роботи над проектом.

По-перше, необхідно визначитися, які браузери будуть залучені. Слід вивчити статистику відвідувань сайтів (наприклад, зі схожою тематикою), в якій зазначено відомості, якими браузерами користувалися його відвідувачі. Таку можливість надає наприклад, сервіс Google Analytics. Після визначення популярних за статистикою браузерів їх варто встановити на свій комп’ютер.

Різні браузери хоч і дотримуються загальних правил та стандартів, але іноді в них застосовуються різні алгоритми обробки HTML-кодів чи правил CSS. Тому, не завжди один і той же елемент виглядає однаково в різних браузерах.

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

Тестування сайту на кросбраузерність

Проводити тестування сайту на кросбраузерність краще за все на локальному комп'ютері, на якому встановлено різні браузери, різні версії браузерів і існує можливість змінювати роздільну здатність монітора. Іноді, розробник створює кілька віртуальних машин з різними ОС.

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

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

115

Page 116: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

7.2. Публікація і підтримка сайту. Веб-хостинг

7.1. Вибір домену для українського сайту Першоджерело http://mamontov.com.ua/how-choose-domain-name-ukrainian-company.html

Вибір доменного імені

Після створення сайту постає питання реєстрації домену, або доменного імені. В Інтернеті адреси прийнято поділяти на домени за тематичною (організаційною) чи географічною (національною) належністю. Географічні зони можуть поділяться на організаційні (com.ua, gov.ua, org.ua тощо).

Перш ніж зареєструвати домен необхідно визначиться, в якій доменній зоні реєструватися. Якщо компанія орієнтована на український ринок, то необхідно реєструватися в одній з українських організаційних зон (.com.ua, biz.ua, info.ua) або в одній з українських обласних зон (kiev.ua, lviv.ua, zp.ua). Кожен обласний центр має свою доменну зону.

Домени першого рівня у свою чергу поділяються на домени другого рівня (наприклад, в адресі www.company.kiev.ua - .ua є зоною першого рівня, яка вказує, що компанія знаходиться в Україні, .kiev - це зона другого рівня, яка вказує, що це київська кампанія).

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

Як правило, українські компанії реєструють одне доменне ім'я в певній українській доменній зоні, хоча адрес в одного сайту може бути множина. Якщо для сайту потрібно зареєструвати кілька доменних адрес (company.ua, company.com.ua, company.kiev.ua, company.com), то варто одне з доменних імен вибрати як основне. Воно буде використовуватися в логотипі, рекламі, візитках, бланках тощо, решта доменів буде скеровуватися на «основний» домен.

Правила вибору доменного імені:

1. Доменне ім'я повинне бути коротким. 2. Доменне ім'я повинно запам'ятовуватися. 3. Доменне ім'я не повинне допускати різночитань. 4. Доменне ім'я може складатися з букв латинського алфавіту, цифр і символу «-»(дефіс).

Доменне ім'я повинне бути коротким.

Чим же добре коротке доменне ім'я? По-перше коротке доменне ім'я легше запам'ятовується і його простіше розмістити в логотипі, по-друге в короткому доменному імені важче допустити помилку при наборі в адресному полі браузера.

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

116

Page 117: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

7.2. Публікація і підтримка сайту. Веб-хостинг

Доменне ім'я повинно запам'ятовуватися

В першу чергу доменне ім'я повинне асоціюватися з назвою компанії, тому кращим варіантом буде домен company.ua або company.com.ua, щоб клієнти за найменуванням компанії швидко знайшли її сайт.

Якщо назва компанії складається з двох достатньо коротких і легко вимовних слів (наприклад, Два Слова), то самим кращим варіантом назви доменів буде dvaslova.ua або dvaslova.com.ua. Добре запам'ятовуються загальноприйняті абревіатури і ритмічні доменні імена, що складені з двох слів (FoodMarket, ArtBusiness), які чітко орієнтують користувача на сферу діяльності компанії.

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

Доменне ім'я не повинне допускати різночитань.

Доменна адреса може бути транскрипцією латинськими буквами кириличних назв і тут можуть бути неприємні сюрпризи. Наприклад, компанія «Киев Пассажирский» в транскрипції може виглядати як KievPassazhirsky і як KievPassazhirskiy, а в транскрипції з української як KyivPasazhirsky. Деякі користувачі можуть помилитися і писати як з двома «s» так і з однією, тому для такої компанії краще підібрати щось просте, наприклад, www.kpas.ua.

Небезпечно використовувати в доменному імені цифру «0» і букву «O», оскільки користувачі часто їх плутають (коли логотип виконано у вигляді адреси zOO, то не всім зрозуміло які символи використано в назві домену). Якщо все ж таки необхідно використовувати нуль або букву «O», слід зареєструвати домен з правильним і неправильним написанням і переадресувати домен з неправильним написанням на основний домен (правильний).

Доменне ім'я може складатися з букв латинського алфавіту, цифр і символу "-" (дефіс), починатися і закінчуватися буквою латинського алфавіту або цифрою. Довжина імені кожного домену (між розділовими точками) не може перевищувати 63 знаки. Мінімальна довжина доменного імені (без врахування розділових точок і назви домену) прийнята рівною 2 (для зон .biz і .info - 3 символи).

Поради з вибору і використання доменних імен:

1. Реєструйте кілька доменів

2. Використовуйте ключові слова в назві домену.

3. Одночасно реєструйте домен в національній та організаційній зонах (kiev.ua, com.ua).

4. Використовуйте «чужі» географічні зони (.tv, .со, .cc, .to).

5. Використовуйте міжнародні домени (.com, .biz, .info).

6. Використовуйте назву поєднання організаційних або географічних зон і назву домену.

7. В назві домену краще уникати дефіси.

8. Не використовуйте як основний доменне ім'я, що схоже на домен конкурента.

9. Реєструйте домени, що звільняються.

1. Реєструйте декілька доменів.

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

117

Page 118: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

7.2. Публікація і підтримка сайту. Веб-хостинг

2. Використовуйте ключові слова в назві домену.

За багатьма дослідженнями деякі користувачі вгадують адресу, тобто беруть назву того, що хочуть знайти і додають .com, відповідно українські користувачі додають .com.ua або .kiev.ua. Тому, якщо компанія продає монітори, то окрім домену company.com.ua, бажано зареєструвати домен monitor.com.ua чи monitor.kiev.ua. Також, не варто забувати про назви доменів в множині, наприклад, monitors.com.ua чи monitors.kiev.ua.

Крім того, в пошукових системах за відповідними ключовими словами сайт буде вищим в результатах пошуку, оскільки в назві домену присутнє ключове слово.

3. Одночасно реєструйте домен в зонах kiev.ua, com.ua.

Як правило, визначившись з назвою домену багато київських компаній, реєструють домен в зоні .com.ua, або .kiev.ua, хоча, слід реєструвати доменне ім'я в обох зонах, оскільки компанія конкурент може зареєструвати друге доменне ім'я і скерувати його на свій сайт. Користувачі часто плутають .com.ua і .kiev.ua (так вже історично склалося, що Київ став флагманом розвитку Інтернет в Україні, тому зони .com.ua і .kiev.ua для українського користувача стали рівнозначними) тому реєструйте домен в обох зонах, тоді навіть допустившись помилки користувач все одно потрапить на сайт.

1. Не реєструйте домен, якщо він зайнятий хоча б в одній із зон .com.ua або .kiev.ua, компанією, яка займається тим же бізнесом.

2. Якщо компанія конкурент зареєструвала домен лише в одній із зон .com.ua або .kiev.ua, то необхідно зареєструвати цей домен в іншій зоні і скерувати його на свій основний домен, тоді користувачі помилково зайдуть на ваш сайт і можливо знайдуть там те, що шукали.

3. Якщо кампанія є власником торгової марки, то слід зареєструвати домени в трьох зонах: .ua, .com.ua і .kiev.ua.

4. Якщо в компанії є філії в обласних центрах, то слід зареєструвати домени і у відповідних українських обласних доменних зонах.

4. Використовуйте «чужі» географічні домени (.tv, .ag, .co).

Домен .ag (держава Антигуа) як альтернатива домену .com може особливо зацікавити акціонерні компанії орієнтовані на німецький ринок. В німецькій мові скорочення Ag позначає «акціонерне суспільство» (Die Aktiengesellschaft) і широко використовується як позначення типу компанії, подібно до англійських скорочень Inc. і Corp.

Компанія VeriSign купила права на управління доменною зоною .tv (маленька острівна держава Тувалу) і тепер адмініструє домен .tv - телевізійним, і тепер реєстрація домену в цій зоні вельми приваблива для телекомпаній і сайтів, що мають телевізійну скерованість.

Національний домен Колумбії .co добре асоціюється із словами company та commercial і може, таким чином, стати альтернативою для переповненої зони .com.

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

5. Використовуйте назву поєднання організаційних або географічних зон і назву домену

У поєднанні із закінченням (організаційним доменом) назва домену може дати несподівано добрий результат. Наприклад, kuvyr.com - така адреса дуже добре запам'ятовується, оскільки домен kuvyr спільно із зоною .com читається як «кувырком». Також добре запам'ятовуються словосполучення daleko.edu (далеко еду), доменне ім'я daleko само по собі добре

118

Page 119: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

7.2. Публікація і підтримка сайту. Веб-хостинг

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

6. Використовуйте міжнародні домени (.com, .biz, .info)

Якщо компанія працює на міжнародному ринку, то не слід обмежуватися лише українським доменом - зареєструйте домен в зоні .com, .biz або .info. Скеровуйте міжнародні домени на англійську версію сайту, а українські на українську (або російську - якщо немає української версії). Відповідно для роботи на міжнародному ринку використовуйте міжнародний домен (у візитках, рекламі, бланках), а на внутрішньому ринку український домен. Тоді, іноземні користувачі відразу потраплять на англійську версію сайту, а українські відповідно на українську версію.

7. Дефісів в назві домену краще уникати, тому що про них часто забувають

Дефіси рідко зустрічаються, тому, краще обмежити їх використання в назвах доменів, хоча цього не завжди можна уникнути, оскільки в зоні .com всі благозвучні домени вже зайняті.

8. Не використовуйте основне доменне ім'я, що схоже на домен конкурента

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

9. Реєструйте домени, що звільняються.

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

Реєстрація домену

Перевірити чи є вільним обраний домен можна на сайтах:

• whois.com.ua (для перевірки доменів в українських обласних зонах, в зоні .ua, .com.ua, та інших українських доменних зонах).

• www.networksolutions.com або www.register.com (для перевірки в міжнародних зонах)

• Скористатися перевіркою на сайті любого українського хостинг-провайдера.

Підтримку більшості доменів необхідно оплачувати щорічно, вартість реєстрації та підтримки коливається у межах:

• Від 11 у.о. до 18 у.о. (українські організаційні і обласні домени). • Від 80 (у зоні .ua). • Від 14 у.о. (міжнародні домени).

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

Для реєстрації домену можна звернутися до одного з українських реєстраторів (http://www.hostmaster.net.ua/registrators/), або сплатити реєстрацію кредитною карткою на www.networksolutions.com або www.register.com (для міжнародних доменів).

119

Page 120: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

7.2. Публікація і підтримка сайту. Веб-хостинг

7.2. Веб-хостинг. Розміщення сайту в Інтернеті Веб-хостинг (host – власник готелю) - це фізичне розміщення веб-сторінок на сервері. Від

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

Види хостингу Хостинг - це віртуальний аналог оренди приміщення, але орендується місце на диску, яке

обчислюється мегабайтами. Хостинг умовно можна поділити на платний і безкоштовний.

Безкоштовний хостинг

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

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

Основні недоліки безкоштовного хостингу:

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

функціонування сайту. • Відсутність гарантій якісного та постійного надання послуг.

Плюси безкоштовного хостингу:

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

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

Залежно від країни розташування, хостинг може бути, наприклад: українським (технічний майданчик розташовано в Україні), російським (в Росії), американським (у США) тощо.

Платний хостинг

У платному хостингу, власник сайту оплачує певну суму за використання дискового простору та сервіси, що йому надаються.

Хостинг можна класифікувати залежно від:

• Програмного забезпечення, що встановлено на сервері.

• За типом вмісту об’єктів, що розміщуються на серверах хостинг-провайдеру.

120

Page 121: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

7.2. Публікація і підтримка сайту. Веб-хостинг

• Типу сервера, на якому розміщуються файли сайтів або програми.

• Місця розташування технічного майданчика.

За типом програмного забезпечення.

Залежно від встановленого на сервері програмного забезпечення хостинг поділяють на UNIX-хостинг і WINDOWS-хостинг.

• RedHat LINUX (UNIX-платформа) - традиційна платформа веб -хостингу. Це дуже надійна і міцна платформа для підтримки сайтів з великим об'ємом інформації і великою кількістю звернень (трафіком).

• Windows NT (WINDOWS-платформа) забезпечує певні опції, які не доступні на платформі хостингу Unix, такі як ASP, Microsoft SQL 2000, Access databases і Cold Fusion 5. Тому, якщо для сайту потрібне одне або кілька з цих програмних застосувань, варто обирати WINDOWS-платформу.

За типом об’єктів

• Веб-хостинг. На серверах розміщують файли сайту.

• Application-хостинг. На серверах розміщують програми.

За типом сервера

• Віртуальний сервер.

• Віртуальний виділений сервер.

• Виділений сервер.

• Колокація.

Віртуальний сервер

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

Кожний проект обмежено певною дисковою квотою, в залежності від вибраного тарифного плану. Керують узгодженою роботою всіх проектів системні адміністратори хостинг-провайдера.

Віртуальний виділений сервер

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

Відмінності від віртуального сервера:

• Користувачу надається повне управління сервером, доступ до ядра операційної системи. У віртуальному сервері доступ є лише до певних програм-серверів за вибором провайдера (www-, mail-, DNS-, ftp-серверів);

• Власнику сайту надаються фіксовані ресурси сервера: пам'ять, процесорний час. У віртуальному сервері фіксованим є лише дисковий простір.

121

Page 122: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

7.2. Публікація і підтримка сайту. Веб-хостинг

Виділений сервер

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

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

Дата-центр це структура, що об’єднує системи контролю, управління і безпеки даних.

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

Відомості про встановлене на сервері програмне забезпечення та про розташовані там Інтернет ресурси, відомі лише орендареві і більше нікому.

Колокація

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

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

доменних імен, паркування доменів, реселінг.

Реєстрація доменних імен

Реєстрація доменних імен – це отримання офіційної адреси для сайту. В результаті реєстрації сайт отримує своє ім'я і доменну адресу, за якою можна доступитися до сайту.

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

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

Адресацією ресурсів в Інтернеті займається Служба Доменних Імен (Domain Name Service). За загальну координацію і управління мережною службою імен (DNS) і особливо за делегування доменів верхнього рівня, відповідає організація Internet Assigned Numbers Authority (IANA).

Паркування домену

Якщо власник майбутнього сайту хоче зарезервувати певне доменне ім'я, але роботи зі створення сайту тривають або ще не розпочалися, можна скористатися послугою паркування домену. Користувачеві надаються права на дане ім’я, повноцінна поштова адреса, але блокуються повноцінні можливості хостингу, такі як FTP-доступ, панель управління, субдомени, CGI, SSH, SSL, MYSQL. Згодом, коли сайт буде готовий, власник може обрати хостинг, що відповідає його потребам.

122

Page 123: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

7.2. Публікація і підтримка сайту. Веб-хостинг

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

Реселінг

Реселінг (reselling) - це перепродаж послуг хостингу, коли власник виділеного сервера розділяє його на частини і розподіляє його потужність між іншими хостерами.

Вперше реселінг почали пропонувати великі американські хостингові компанії, які продавали місця під сайти з фіксованими тарифними планами та великою знижкою. Після появи на ринку панелей управління хостингом з функціями реселінгу (cPanel, Plesk, DirectAdmin, ISPmanager Pro тощо) таку можливість отримали власники або орендарі виділеного сервера.

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

Акаунт (accoun - рахунок, облік) це особиста сторінка користувача.

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

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

Переваги реселінгу:

• Для заснування бізнесу не потрібно робити значних капіталовкладень.

• Не потрібно численного персоналу.

• Не вимагається глибоких пізнань у веб-технологіях. В разі виникнення складних ситуацій можна звернутися до служби підтримки хостера.

Складнощі для реселера-початківця:

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

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

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

Основні вимоги до майбутнього хостингу

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

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

123

Page 124: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

7.2. Публікація і підтримка сайту. Веб-хостинг

2. Хостинг компанії мають бути професіоналами не лише в наданні послуг, але і у відносинах з клієнтами. Тому, слід перевірити чи існує служба технічної підтримки і чи задовольняє вона всім можливим вимогам.

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

4. Чи надає хостинг у розпорядження піддомени? В середньому, середньостатистичний хост-провайдер надає близько 6 піддоменів у розпорядження користувача, не стягуючи додаткової плати. Слід з'ясувати умови користування піддоменами. Піддомени можуть виявитися корисним доповненням до сайту користувача. Наприклад, якщо на сайті відкривається форум, то можна дати йому зручну адресу: http://forum. site.ua/.

5. Перевірити швидкість передачі даних. Бажано відвідати сайти, які розташовані на серверах компанії і прослідкувати час завантаження сторінок. Також, варто дізнатися враження клієнтів і замовників, що користуються послугами хостингу в даній компанії.

6. Дізнатися про систему захисту серверів, які використовує компанія. 7. Якщо користувач має свій домен, провайдер зобов'язаний надати у його розпорядження

необмежену кількість поштових імен в межах його домену ([email protected]). 8. Більшість хост-провайдерів надають FTP-доступ та доступ до бази даних. Обов'язково

з'ясувати у провайдера, чи надає він наступні сервіси: CGI-сервіси, підтримку Perl, C, PHP MYSQL? Чи не стягується за використання цих послуг додаткова плата?

9. Вартість хостингу також грає важливу роль. Наприклад, ціна на оренду виділеного сервера може досягати порядку 200 $ у місяць, тоді як звичайний хостинг для сайту в місяць може складати всього 2-3 $.

Основні критерії вибору хостингу:

• Вартість хостингу.

• Сервісні послуги.

• Параметри хостингу.

• Якість послуг, що надаються.

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

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

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

124

Page 125: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.1. Оптимізація і просування сайту. Аналіз відвідуваності

8.1. Аналіз відвідуваності сайтів За станом на січень 2011 року кількість сайтів в Інтернеті складала біля 274 млн. сайтів.

(http://news.netcraft.com/).

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

Для аналізу відвідуваності можна застосувати:

• Статистичні сервіси, або лічильники відвідувань.

• Аналізатори журнальних записів, або аналізатори логів.

Статистичні сервіси надають сервери, для яких збір статистичних даних є основним призначенням, аналізатори — на сервері, де розміщено даний сайт. Для збору статистичних даних можна поєднувати обидва підходи.

Лічильники відвідувань Лічильник відвідувань - це спеціальний скрипт, який фіксує заходи на сайт відвідувачів та

пошукових роботів і надає різну статистику про сайт.

Зазвичай, лічильник складається з двох частин:

• Код (скрипт) для збору даних, який розміщується на сторінках сайту.

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

Розробник сайту може сам написати скрипт лічильника для встановлення на сервер, або скористатися послугами однієї з багатьох служб, що існують в Інтернеті (Spylog.ru, HotLog.ua, BigMir.net, I.ua, Ukr.net, Meta.ua).

Більшість компаній, що пропонують встановлення лічильників починали свою діяльність як безкоштовні ресурси і спочатку надавали всім бажаючим достатньо багато статистичних даних. З

125

Page 126: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.1. Оптимізація і просування сайту. Аналіз відвідуваності

ростом популярності, її статистичні послуги стали або платними (Smartlog), або безкоштовними для обмеженої статистики (HotLog) чи для некомерційних сайтів (Spylog).

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

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

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

Статистичні відомості

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

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

Маршрут пересування відвідувачів по сайту. Надає відомості про зручність навігації у сайті і можливості оптимізації. Аналізуючи переходи по сторінках, можна побачити наміри відвідувача та його інтереси. Якщо відвідувач не перейшов далі за заголовну сторінку проекту, то, швидше за все, він потрапив сюди випадково — наприклад, натиснув на банер, що не зовсім точно відображає тематику сайту. Якщо відвідувач переглядає велике число сторінок на одному рівні, то, швидше за все, він шукає щось потрібне, але не може знайти. В цьому випадку варто задуматися про перегляд навігації. Якщо ж відвідувач послідовно просувається «вглиб» сайту, то він, швидше за все, знайшов саме те, що шукав.

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

Популярні лічильники

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

Google Analytics від компанії Google. Надає повний аналіз аудиторії і міжсайтових переходів. Не вимагає розміщення власного банера на кожній сторінці сайту.

Spylog вважається провідним лічильником в світі. Збирає максимальну кількість даних, генерує сотні різних звітів, визначає унікальних відвідувачів по cookies. Низька швидкість обробки.

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

126

Page 127: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.1. Оптимізація і просування сайту. Аналіз відвідуваності

InetLog. Зручний, з великою кількістю звітів. Є рейтинг сайтів-учасників, а також програма моніторингу відвідуваності в реальному часі.

LiveInternet.ru. Надає глобальну статистику у відкритому доступі.

Аналізатор логів Більшість хостинг-провайдерів платного хостингу надають своїм клієнтам можливість

використовувати власні встановлені засоби для аналізу. Наприклад, для серверів Apache часто використовується програма Webalizer, яку встановлюють як додатковий модуль веб-сервера.

Власники сайтів можуть обробляти всю інформацію про відвідування сайту самостійно, бо мають повний доступ до лог-файлів свого сайту.

Лог-файл сайту

Лог-файл сайту (log file) – це текстовий файл, в якому реєструються всі запити до сайту, а також всі транзакції, що пов'язані з цими запитами.

Як відбувається запис подій в лог-файл сайту

• Інтернет користувач набирає в своєму браузері адресу певного сайту (сторінки) і натискає Enter

• Браузер користувача передає на сервер, де розміщено сайт, запит на видачу веб-сторінки (в лог-файлі буде зроблено запис "GET <адреса_ресурсу>");

• На сервер передається наступна інформація: o IP-адреса відвідувача. o Дата і час запиту. o Відомості про браузер користувача. o Відомості про операційну систему користувача. o Введений URL. o Адреса сторінки, з якої зайшов відвідувач.

• Сервер видає відвідувачу запрошений документ. • Сервер записує інформацію про транзакцію в журнал подій (лог-файл).

Наприклад, запис в лог-файлі:

78.123.67.3 - - [21/Jul/2011:01:01:34 +0400] "GET http://<адрес_ресурса>/news.xml" 304 0 "http://<адрес_ресурса>" "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center РС 5.0; InfoPath.2; .NET CLR 3.5.30729; OfficeLiveConnector.1.4; OfficeLivePatch.1.3; .NET CLR 3.0.30729)" 127.0.0.1

означає, що 21 липня 2011 р. в 01:01:34 (за місцевим часом хостинг-провайдера) з ІР-адреси

78.123.67.3 до RSS-стрічки news.xml сайту http://<адреса_ресурсу> звертався вбудований RSS-рідер браузера Internet Explorer 8, операційна система – Windows Vista. Код 304 означає, що записів про нові веб-сторінки сайту http://<адреса_ресурсу> в RSS-стрічці не з'явилося, тому браузер не завантажував файл news.xml (про що свідчить «0»).

Аналітичні відомості лог-файлів сайту:

• Відвідуваність. Лог-файли надають можливість детальніше, ніж лічильник аналізувати відвідуваність, наприклад, за місяцями (Monthly Statistics), за днями (Daily Statistics), за годинами (Hourly Statistics). Цей показник дозволяє виявляти години напливу відвідуваності і

127

Page 128: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.1. Оптимізація і просування сайту. Аналіз відвідуваності

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

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

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

• Точки входу (Entry, Entry Pages) – це веб-сторінки, з яких користувачі починають роботу з сайтом. Це дуже цінна інформація! Наприклад, якщо 80% відвідувачів не бачать головної сторінки сайту, чи є сенс витрачати час і засоби для її оздоблення і покращення? Окрім того, точки входу показують самі популярні сторінки сайту.

• Точки виходу (Exit, Exit Pages) – це веб-сторінки, з яких користувачі покидають сайт. Дозволяють аналізувати ситуацію чи знайшов користувач те, що шукав.

• Популярні сторінки (URL) – це веб-сторінки, які відвідуються найчастіше. Їх можна використовувати як зразок при створенні інших сторінок сайту. Можна також скеровувати користувачів з цих сторінок до інших, менш.

• «Покинуті» сторінки – це веб-сторінки, які відвідуються вкрай рідко. Потрібно ретельно проаналізувати ситуацію: можливо, сторінки є нецікавими або їх важко відшукати на сайті. Наприклад, вони не вказані у розділах сайту або не пов'язані посиланнями з іншими сторінками сайту..

• Пошуковики (Searches). Показує, з яких пошукових систем надійшли відвідувачі.

• Пошукові запити, що приводять на сайт (Search String). Цей показник демонструє ефективність використаних назв сторінок, мета-тегів, ключових слів та фраз. Звертайте особливу увагу на ключові слова і фрази, які потрапляють до статистичних даних лог-файлів. Це ті слова, за якими відвідувачі знаходять сайт. Така інформація не лише допоможе отримати вищий рейтинг сайту у пошукових системах, але також допоможе краще продавати товари і послуги цільовій аудиторії. Список ключових слів необхідно постійно розширювати і адаптувати у міру того, як розвивається оптимізаційна кампанія. Лог-файли і в цьому випадку є одним з багатющих джерел пошуку нових і відсіювання неефективних ключових слів.

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

• Географія відвідувачів. Показує з яких країн приходять відвідувачі на сайт.

• Інформація про відвідувачів: IP-адреса відвідувача, використані браузер і операційна система

128

Page 129: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.1. Оптимізація і просування сайту. Аналіз відвідуваності

Програми для аналізу лог-файлів сайту

Лог-файл сайту – це текстовий файл, який можна відкрити в текстовому редакторі. Проте, просто переглядати лістинг лог-файлів досить важко, оскільки лог-файли дуже об'ємні: наприклад, якщо сайт відвідують близько 6 тисяч відвідувачів щоденно, які проглядають близько 10 тис. сторінок, то об'єм лог-файлу за день складає біля 10 Мегабайт.

З одним файлом розібратися, мабуть, не складно, але щодня сайт генерує тисячі і більше подібних записів. Для полегшення роботи існують програми-помічники, аналізатори лог-файлів. Однією з популярних програм є Log Analyzer з пакету NetPromoter. Програма має русифікований інтерфейс, надає статистичну інформацію у зручному вигляді і має високий професійний рівень. Вона, поза сумнівом, входить до числа світових лідерів, таких як WebTrends, Web Log Explorer, Advanced Log Analyzer.

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

Cookies

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

Для чого потрібні cookies? Наприклад, при вході на сайт відвідувача просять ввести пароль (скажімо, на пошті). Після введення пароль зберігається в cookies і при переході зі сторінки на сторінку, замість того щоб щораз запитувати пароль, сервер бере його з cookies.

Якщо активувати cookies на сервері можна полегшити аналіз статистики відвідувань. Вони дозволяють відстежувати окремі відвідування ще точніше. З використанням cookies можна стежити за окремим відвідувачем сайту впродовж любого періоду часу. Можна дізнатися, коли він заходить на сайт і покидає його, які сторінки проглядає і коли робить покупку або підписується на вашу розсилку. Це дозволяє перемикатися з аналізу загальних тенденцій на окремих користувачів. Комбінуючи cookies з лог-файлами, можна відстежувати кожну окрему маркетингову стратегію з майже бездоганною точністю.

129

Page 130: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.1. Оптимізація і просування сайту. Аналіз відвідуваності

Пошукові роботи

Чи замислювалися ви, як глибоко вивчають ваш сайт автоматичні роботи пошукових машин? Чи регулярно приходять до вас роботи пошуковиків, на якому ви реєструвалися на платній основі? За допомогою аналізатора лог-файлів (LogAnalyzer, WebTrends, Advanced Log Analyzer і подібних) можна побачити коли і які роботи відвідують сайт, і які сторінки вони індексують. Лог-файли детально розтлумачать про це.

Після створення нових сторінок можна дізнатися, коли і які пошукові роботи їх знайшли і проіндексували. Якщо робот не знайшов жодну зі сторінок, можливо потрібно створити додаткові посилання із сторінок, які відвідуються роботом частіше. Або, можливо, ця сторінка заборонена для відвідування роботами? Тоді слід відредагувати robots.txt.

Рейтинг веб-сайту

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

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

Серед відомих засобів визначення рейтингу слід виділити такі програми як Agent Web Ranking і Page Promoter. Перша – потужний вузькоспеціалізований програмний продукт, що створено спеціально для роботи з ранкінгом. Друга – більш багатофункціональна програма з пакету NetPromoter, яка містить більше десятка різних функцій по промоції сайту. Окрім утиліти визначення рейтингу, є також і модуль визначення кількості посилань на сайт з інших сайтів. Аналогічні модулі містяться в багатьох програмах просування, яких в широкому асортименті надано в Інтернеті.

На сьогодні, найбільш важливий чинник, що впливає на рейтинг веб-сайту у пошукових машин є індекс цитування (link popularity), тобто кількість сайтів які мають посилання на ваш сайт. Чим більше посилань на сайт з інших сайтів, тим вище його рейтинг.

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

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

130

Page 131: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.2. Оптимізація і просування сайту. Пошукова оптимізація

8.2. Пошукова оптимізація Пошукове просування або пошукова оптимізація SEO (Search Engine Optimization) - це

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

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

Основні параметри для оптимізації

При обчисленні ступені відповідності сайту до введеного запиту (релевантності) пошукова система враховує наступні параметри сайту:

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

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

Чинники, що впливають на позицію сайту у видачі пошукової системи:

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

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

Фахівця, який здійснює заходи з оптимізації сайтів, називають оптимізатором.

Історія

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

З появою технології PageRank більшої ваги набувають зовнішні чинники, і це допомогло Google стати лідером пошуку у світовому масштабі.

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

131

Page 132: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.2. Оптимізація і просування сайту. Пошукова оптимізація

Методи оптимізації

Методи оптимізації можна умовно поділити на кілька типів:

• Біла (природна) оптимізація.

• Сіра оптимізація.

• Чорна (заборонена) оптимізація.

Біла оптимізація

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

Біла оптимізація дозволяє природним чином, на підставі аналізу поведінки споживачів, спромогтися максимальної віддачі від сайту, а саме зростання цільової відвідуваності, популярності ресурсу серед користувачів Інтернет і рейтингу у пошукових системах. Природна оптимізація не містить «допінгових» методів оптимізації — розсилки спаму, фіктивного збільшення кількості банерних показів та інших заборонених методів.

Комплекс заходів

• Постійне покращення вмісту сайту, який регулярно індексують роботи пошукових систем.

• Постійне вдосконалення зручності сайту для відвідувачів — юзабіліті.

• Постійний аналіз запитів, що пов'язані з просувним сайтом.

• Постійний пошук сайтів спорідненої тематики для створення партнерських програм.

Переваги

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

Способи внутрішньої білої оптимізації

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

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

• Важливою частиною внутрішньої оптимізації є оптимізація файлів robots.txt і .htaccess. Це дозволяє вказати пошуковим машинам, які сторінки не потрібно індексувати, вказати правильну адресу (з www або без) тощо.

132

Page 133: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.2. Оптимізація і просування сайту. Пошукова оптимізація

Способи зовнішньої білої оптимізації

• Додавання сайту до бази пошукових систем.

• Реєстрація сайту в авторитетних каталогах сайтів (Yandex Каталог, Ukr.net, Meta.ua).

• Розміщення прес-релізів в Інтернеті з посиланням на просувний сайт.

Сіра оптимізація

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

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

Чорна оптимізація

Чорна оптимізація — це застосування заборонених і недобросовісних методів для підлаштування коду, тексту чи інших параметрів сайту під алгоритми пошукових систем з метою підняття його позицій у видачі результатів.

Дорвей (Doorway)

До чорної оптимізації відноситься використання дорвеїв — сторінок, які створено (часто автоматично) спеціально для роботів пошукових систем. В теорії людина не повинна читати текст, який розміщено на дорвеї, оскільки він є безглуздим набором ключових слів, що використовуються в можливих пошукових запитах. Як правило, дорвеї розраховані на залучення з пошукових систем відвідувачів, що використовують певні пошукові запити.

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

Клоакінг

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

Інші способи

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

Однопіксельні посилання. Використання графічних зображень-посилань розміром 1*1 піксел, які відвідувач не бачить, але в тегах до картинки прописані ключові слова. Це також сприймається пошуковими системами як спроба обману і може привести до блокування сайту.

133

Page 134: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.2. Оптимізація і просування сайту. Пошукова оптимізація

SEO-текст Пошукові системи в різні способи враховують застосовані до сайту методи оптимізації. Одні

надають перевагу внутрішнім чинникам (наприклад, Google), інші схильні більше брати до уваги зовнішні чинники, покладаючись на вагомість сайту серед інших ресурсів Інтернету (наприклад, Яндекс).

Проте, самими суттєвими є три чинники:

• Текст.

• HTML-код.

• Рівень авторитетності сайту, що виражається в кількості та вагомості зовнішніх посилань.

Розміщений на сайті текст є базовим чинником, що відповідає за пошукові позиції сайту.

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

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

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

Принцип контентної оптимізації свідчить: любий текст, що опубліковано на сайті, повинен бути оптимізованим під пошукові системи.

Доцільний текст для сайту

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

Доцільний текст — це текст, який шукає користувач пошукової системи і який в ідеалі повинна надати пошукова система.

Пишемо для свого відвідувача

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

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

Пишіть звичною мовою

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

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

134

Page 135: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.2. Оптимізація і просування сайту. Пошукова оптимізація

Уникайте дуже активної реклами

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

Нав'язливі хвалебні заяви здаються відвідувачам саморекламою, тому часто їх ігнорують. Висловлюйте лише факти і надайте людям можливість робити висновки самостійно. Хороший вміст говорить сам за себе.

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

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

Виділення основних акцентів і видалення зайвого

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

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

Збагачення тексту ключовими словами .

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

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

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

Визначити, які слова насправді використовуються при пошуку, можна за допомогою спеціальних сервісів пошукових машин - служби Wordstat.Яндекс, Adstat.Rambler, MAIL.RU, Adwords.Google.

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

Ретельно підібрані ключові слова, які розумно розміщено в основному тексті сторінки, підвищують вірогідність високого ранжирування за спорідненими запитами. Зрозуміло, що недостатньо просто наповнювати цими словами сторінку. Текст потрібно скласти так, щоб око читача не «чіплялося» за повторення ключових слів.

Головна сторінка є дуже важливою, тому, тут слід уникати графічних написів. Якщо пошукова машина не знайде на сторінці тексту, тоді вона звернеться до тегів title і meta. Але, маючи такі обмежені дані, вона навряд чи визнає таку сторінку релевантною до запиту. Щоб виправити

135

Page 136: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.2. Оптимізація і просування сайту. Пошукова оптимізація

ситуацію, слід поміщати на кожну сторінку, що оптимізується, не менше 250 слів видимого друкарського тексту.

SEO-копірайтинг

При написанні текстів, не забувайте, що ви звертаєтеся до відвідувача. Насичення тексту ключовими словами є важливим, але якщо від цього страждає стиль, «читабельність», то увага аудиторії швидко втрачається. При дослідженні ключових слів варто уявити себе на місці відвідувача. Чого він прагне? Що шукає? Як товари або послуги йому потрібні? Чи варто їх купувати?

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

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

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

Основою тексту є ключові слова. Ви завжди повинні будувати текст, ґрунтуючись на ключових словах, а не навпаки. Якщо ви хочете, щоб сайт було знайдено за ключовими для сайту фразами, — згадайте в тексті всі ці фрази. Але, краще розподілити різні товари (послуги) до різних сторінках. Це дозволить не розпорошувати, а конкретизувати ключові слова для пошукової машини.

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

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

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

Форматування тексту

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

До стандартних ефективних методів форматування відносять:

• Виділення ключових слів.

• Короткі і зрозумілі заголовки.

• Маркіровані і нумеровані списки.

• Короткі абзаци.

136

Page 137: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.2. Оптимізація і просування сайту. Пошукова оптимізація

• Найбільш важливу фразу на сторінці розташовують у перших двох рядках тексту.

Виділення ключових слів

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

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

Елементи дизайну часто асоціюють з оформленням гіперпосилань (наприклад, підкреслені надписи голубим кольором, грубіший шрифт), які дозволяють автоматично ідентифікувати подібні елементи на сторінці. В певних випадках такого форматування буде достатньо і тому, не потрібно нічого додатково виділяти.

Короткі і зрозумілі заголовки

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

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

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

Основний сенс заголовків — вказати читачам на відомості, що їх цікавлять, тому, заголовки повинні бути короткими (максимум 60 символів) і зрозумілими.

Маркіровані і нумеровані списки

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

При використанні вертикальних списків з'являється більше вільного простору біля кожного з елементів списку, що дозволяє помічати кожен з елементів. Такі списки є більш ефективними, ніж перелік елементів, що розміщено в один рядок.

Поради щодо створення списків:

1. Використовуйте вертикальні списки за наявності чотирьох або більше елементів у списку.

2. Перед списком додайте пояснення з загальним описом елементів списку. Воно не повинне бути таким же об'ємним, як опис окремих елементів.

3. Кожен пункт списку повинен містити в собі відповідь на питання, що поставлене у ввідному реченні до цього списку.

4. Використовуйте помітні ідентифікатори для виділення елементів списку.

5. Використовуйте схожу будову фраз для кожного пункту списку.

6. Не застосовуйте списки дуже часто. Інакше вони втрачають свою ефективність.

137

Page 138: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.2. Оптимізація і просування сайту. Пошукова оптимізація

Короткі абзаци

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

Не існує певних правил відносно того, наскільки великими можуть бути абзаци. Бажано обмежувати абзац п'ятьма реченнями.

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

138

Page 139: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.3. Оптимізація і просування сайту. Інтернет реклама

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

сайту і має ряд переваг над традиційними видами реклами в ЗМІ.

• Інтернет реклама працює відразу у двох напрямах — залучення відвідувача на сайт і одночасне просування іміджу сайту чи компанії.

• Виготовлення та демонстрація презентації сайту, компанії, продукту чи послуги в короткі терміни.

• Широкі можливості для проведення ефективних рекламних кампаній і залучення потенційних клієнтів.

Рекламну кампанію в Інтернеті, можна провести самостійно, але краще скористатися послугами професіоналів - як рекламних агентств повного циклу, так і компаній, що спеціалізуються на рекламі в Інтернет.

В Інтернеті можна застосувати наступні види реклами:

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

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

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

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

Банерна реклама Одним з найпоширеніших видів реклами в мережі Інтернет є банерна реклама. Банер – це

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

Банер є доступним 24 години на добу, 7 днів на тиждень і може охопити значну аудиторію. Один банер можна розмістити на тисячах сайтів, які щодня відвідують десятки тисяч людей.

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

139

Page 140: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.3. Оптимізація і просування сайту. Інтернет реклама

Ефективність банера визначається відношенням кількості показів банера до кількості «кліків» або натиснень на цей банер. Відсотковий вираз такого співвідношення позначається абревіатурою CTR (Click through ratio). Чим вище відсоток CTR, тим ефективніше вважається банер, і тим більше відвідувачів натиснуло на ньому. Банери з низьким CTR є нерентабельними, їх необхідно або замінити або розмістити на інших, більш наближених до цільової аудиторії ресурсах.

Банери можна розміщувати:

• На окремо вибраних сайтах з чітким позиціонуванням до тематики.

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

Цільові різновиди банерів:

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

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

• Брендовий банер. Метою є збільшення індексу популярності і впізнання торгової марки рекламодавця серед користувачів Інтернету.

• Внутрішній банер. Метою є привертання уваги відвідувачів до певної новини на сайті, або повідомлення про нові послуги чи товари.

Зазвичай, на банерах вказують:

• Рекламні слогани з відповідними зображеннями.

• Оголошення про знижки, розпродаж, сезонні акції.

• Адресу чи телефон компанії.

Типи банерів

Текстові банери

Текстові банери є рекламним текстовим блоком без використання фотографій, малюнків або анімованих об'єктів. Завантажуються практично миттєво і мають найменший дратівливий чинник в порівнянні з іншими видами банерів. Цей вид банерів широко використовується компанією Google у контекстній рекламі.

Графічні банери

Графічні банери є красивими і зручними, але з обмеженими графічними ефектами.

• Jpeg-банер. Статичний банер з нерухомим зображенням.

• Gif-банер. Може бути статичним або анімаційним, як правило на кілька кадрів.

Flash-банери

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

140

Page 141: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.3. Оптимізація і просування сайту. Інтернет реклама

• Класичні flash-банери різних розмірів. В українських банерних мережах популярними розмірами є 468х60, 240х350, 730х90, 180х300 пікселів. Як правило, такий банер є зацикленим анімаційним роликом, тобто сюжет повторюється «по колу».

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

• Rich-media або pop-uр банери розміщуються поверх сторінки, можуть бути довільної форми, обов'язково є кнопка для закривання такого банера.

• Scroll Skyscraper є pop-up банером, але при гортанні сторіночки залишається на тому ж самому місці. Примушує відвідувача певний час спостерігати банер, який закриває відомості на сторінці. Закривається або відповідною кнопкою або лише при натисненні на ньому

• Screen-Glade банери. При наведенні вказівника мишки на банер розгортається додатковий рекламний простір. Наприклад, у звичайному стані є звичайним банером 468*60 пікселів, після наведення вказівника збільшується до 468*120, а після забирання вказівника з банера, повертається до первинних розмірів.

• Peel-away банер виконано у вигляді відігнутого кутика сторінки. Після натиснення на ньому користувач може побачити розгорнутий повноекранний ролик.

Java-банери

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

Коректне відображення Java банерів підтримує плагін, що втілено у всі сучасні браузери. Проте, їх завантаження відбувається дещо повільно, тому, іноді користувачі попросту вимикають опцію підтримки Java аплетів в браузері.

Ігрові банери

Ігровий банер (casual banner, interactive banner ads) - це невелика flash-гра, яка розташована на сторінці і по закінченні якої відбувається перехід за рекламним посиланням. Тобто, це нагорода користувачу за отримане задоволення від гри та піднесений настрій. Саме тому, графіка та ідеї повинні бути дотепними і зрозумілими.

Відео-банери та відео-помічники на сайті

Це нова ера в розвитку технологій Інтернет реклами. Тепер кожного відвідувача сайту буде зустрічати особистий гід по сайту, який якнайкраще виконає свою роль помічника та провідника по сайту.

Відео помічником може бути образ як живої людини так і намальований персонаж, який буде вітати кожного відвідувача сайту, розповідати йому про компанію, проводити екскурсії по сайту, просто і дохідливо розповідати про товари в Інтернет магазині. Відео помічник може з'являтися автоматично при заході на сторінку сайту або за бажанням відвідувача, подібно до програм пакету MS Office.

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

• Різко відрізняється і виділяється серед існуючих банерів і миттєво захоплює увагу відвідувача.

• Спілкується з кожним відвідувачем на персональному рівні і привертає увагу на важливі деталі сайту.

141

Page 142: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.3. Оптимізація і просування сайту. Інтернет реклама

• Є ідеальним для проведения екскурсій по сайту, промоакцій, оголошень та вітань.

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

Підходи до збільшення ефективності банерних рекламних повідомлень

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

• Велике значення в сприйнятті банера має його оформлення. Банер повинен бути простим і ненав'язливим, з плавними переходами. Колірна гамма повинна бути максимально контрастною, але в межах гармонії кольорів. Переобтяження анімацією, великою кількістю кольорів, і динамікою створює своєрідний «інформаційний шум». Золотим правилом всіх рекламних розробок є «чим простіше, тим краще», оскільки просте запам'ятовується швидше і краще, ніж складне і заплутане.

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

• Наявність в тексті фраз, що спонукають до негайної дії: «Натисни!», «Знайти», «Купи прямо зараз», «Заходь зараз!», «Терміново!». Подібні фрази діють на підсвідомому рівні, стимулюючи відвідувача сайту не замислюючись зробити запропоновану дію. Проте, в деяких випадках, подібні фрази можуть викликати протилежний, відштовхуючий ефект нав'язування.

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

Контекстна реклама Контекстна реклама на сьогоднішній день це достатньо ефективний спосіб збільшення

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

За способом показів контекстна реклама поділяється:

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

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

Збільшення ефективності рекламного оголошення:

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

142

Page 143: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.3. Оптимізація і просування сайту. Інтернет реклама

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

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

Переваги контекстної реклами

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

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

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

• Ефективність рекламної компанії можна чітко порахувати. Ви витрачаєте на рекламну компанію стільки, скільки хочете. Ви самі задаєте денний бюджет. Контекстні рекламні кампанії можуть проводитися при низьких бюджетах. Це єдина реклама в Інтернеті, яка працює при бюджетах від 50$ в місяць.

• Контекстна Інтернет реклама має найвищий рівень ефективності у порівнянні з іншими видами реклами. Середнє співвідношення переходів (CTR) за контекстною рекламою – 50-70 чоловік з 1000. Це в десятки разів вище, ніж в традиційній банерній рекламі. Отримання швидких результатів протягом найближчої доби.

Розміщення контекстної реклами

Контекстну рекламу необхідно розміщувати на тих пошукових системах, які домінують на ринках, на які орієнтовано Ваш сайт. При цьому вибір не повинен зупинятися на одній системі контекстної реклами, слід охоплювати максимально велику аудиторію, отже контекстну рекламу необхідно розміщувати так, щоб охопити хоча б 60-70% цільової аудиторії.

Якщо сайт орієнтовано на міжнародний ринок, то основними гравцями цьому ринку контекстної реклами є Google і Yahoo.

Рекламні оголошення в Google розміщуються через його систему контекстної реклами Google AdWords (adwords.google.com). Google має ширший обхват аудиторії, і може націлювати рекламу на користувачів певної країни, області або міста, а також на запити, що введено певними мовами.

Якщо сайт орієнтовано на внутрішній ринок, то основними пошуковими системами, які пропонують розміщення контекстної реклами в Україні є Google, Yandex, BigMir і META.

Рекламні оголошення в Google AdWords і Yandex виводяться праворуч від результатів пошуку, в BigMir і META перед результатами пошуку.

143

Page 144: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.3. Оптимізація і просування сайту. Інтернет реклама

Адресні електронні розсилки Адресні електронні розсилки - один з найпотужніших способів просування свого Інтернет

ресурсу. Розсилки можуть бути одноразовими і регулярними.

Одноразові розсилки

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

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

Рекомендації для проведення одноразових розсилок:

• Не використовуйте часто списки, не частіше двох разів на півроку.

• Не додавайте вибачення з приводу непрошеної пошти до тексту повідомлення.

• Якщо певний адресат буде обурюватися, тоді варто вибачитись.

Регулярні розсилки

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

Працювати з кожним підписчиком треба акуратно, блискавично реагувати на його побажання і ніколи не зловживати його увагою. Відправляти листи слід точно за розкладом і лише того змісту, який було заявлено при підписці.

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

Регулярні поштові розсилки є хорошим способом підтримки відвідуваності. Розсилка допоможе своєчасно донести новини сайту і анонсувати події. Корисно дублювати листи спеціальною сторінкою типу «Новини сайту» і вести архів розсилок.

Способи реалізації

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

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

144

Page 145: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.3. Оптимізація і просування сайту. Інтернет реклама

В текстах розсилок варто дотримуватися певних правил мережного етикету:

• Дотримуватися певного стилю повідомлень, що дозволить відразу зрозуміти суть і авторство.

• Писати лаконічно, але зрозуміло. Довгі листи рідко дочитуються до кінця. Якщо ж лист малозрозумілий - це просто дратує.

• Перевіряти свої листи на наявність граматичних і орфографічних помилок.

• Ввічливе звертання до підписчика.

Розсилання спам-повідомлень Спам (spam, spamming) - це масова розсилка комерційної, політичної та іншої реклами або

іншого виду повідомлень особам, що не висловлювали бажання їх отримувати. Легальність масової розсилки деяких видів повідомлень, для яких не потрібна згода одержувачів, може бути закріплена в законодавстві країни, зокрема в законі про рекламу.

Реклама компанії і продукції

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

Реклама незаконної продукції

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

Антиреклама

Імітація спам розсилки може застосовуватися для дискредитації товару, який в ній рекламується та оператора зв'язку, з адреси якого вона (нібито або дійсно) проводиться, тобто спам може використовуватися в недобросовісній конкуренції і «чорному» піарі.

SMS-спам

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

Найбільш поширені види спаму

За даними Лабораторії Касперського спам в Рунеті і Уанеті розподіляється наступним чином:

• 18,9% - освіта. • 15,7% - відпочинок і подорожі. • 15,5% - медикаменти, товари чи послуги для

здоров'я. • 9,2% - комп'ютерне шахрайство. • 6,5% - комп'ютери і Інтернет. • 5,2% - елітні товари.

• 4,1% - реклама спамерських послуг. • 2,7% - для дорослих. • 2,2% - нерухомість. • 2,2% - юридичні послуги. • 1,9% - особисті фінанси. • 1,4% - поліграфія.

145

Page 146: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

8.3. Оптимізація і просування сайту. Інтернет реклама

Збір адрес електронної пошти

Спамери з'ясовують поштові адреси користувачів в різні способи:

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

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

3. Якщо комп'ютер людини, з якою переписувався власник даної скриньки, було заражено троянською програмою, то всі адреси з його адресної книги можуть потрапити до спамера.

4. База даних поштових адрес клієнтів певної компанії може бути вкрадена або продана спамерам самими співробітниками компанії.

Заподіяна шкода

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

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

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

146

Page 147: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.1. Популярні служби Інтернету. Служба Веб

9.1. Служба Веб Вік Інтернету складає приблизно 20 років, і за цей час він пережив істотні зміни. В нашому

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

Рис 1. Розвиток комп’ютерних та Інтернет технологій

На рис.1 наочно проілюстровано розвиток Веб та еволюцію від РС-ери до можливого виникнення в майбутньому повноцінної WEBOS.

Терміни Веб x.0 вживаються з єдиною метою - виокремити різні епохи Веб. На разі людство перебуває в епосі Веб 2.0, але непомітно відбувається перехід до епохи Веб 3.0.

Веб 1.0 Веб 1.0 є поняттям, яке відноситься до статусу служби Веб та до стилю дизайну сайтів, що

використовувалися перед появою Веб 2.0. Веб 1.0 – це загальний термін, який було створено, щоб описати Інтернет перед кризою дот-комів у 2001, яка вважається поворотним моментом в історії Веб.

Криза дот-комів

Назва дот-ком походить від озвучення домену «.com» (дот (dot) - точка). Це економічна криза, яка вразила в 2000 - 2001 великі американські Інтернет компанії і надовго відвернула інвесторів від Інтернет технологій.

Кінець дев'яностих був насичений прогнозами про чудове майбутнє Інтернет бізнесу. До 2000 року стратегія Інтернет бізнесу полягала в створенні великих Інтернет проектів, що часто бути

147

Page 148: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.1. Популярні служби Інтернету. Служба Веб

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

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

І ось в 2000-20001 році прийшло усвідомлення, що вся ця схема є «мильним міхурцем», бо люди і далі купували товари в звичайних магазинах. Після чого акції Інтернет компаній обвалилися і збанкротувало багато як великих, так і дрібних компаній. Те ж саме відбулося і з «винуватцем» торжества - Yahoo!, його акції впали вдесятеро, але йому вдалося втриматися на плаву. Він і досі є самим популярним сайтом в США.

Криза дот-комів привела до того, що в інвесторів надовго пропало бажання інвестувати в Інтернет. І лише успіхи Google, Вікипедії, MySpace і YouTube почали виправляти ситуацію.

Елементна база сайтів, що є типовою для Веб 1.0

Термін «типова елементна база» вживається тут в узагальненому сенсі — абсолютно не обов'язково, що для будь-якої сторінки Веб 1.0 були властиві всі елементи списку. Але, як правило, загальна тенденція і більша частина елементів була присутньою.

Краще за все сформулювати список елементної бази, яка була типовою для Веб 1.0, можна на підставі того, з чим боролися послідовники Веб 2.0, а саме:

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

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

чатах. • Рідкісне використання стилів CSS при оформленні сторінок сайту. • Вказівка конкретної роздільної здатності монітору, при якому дизайн сайту відображається

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

CMS. • Вказівка на браузер, в якому сайт відображається найкраще.

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

Веб 2.0 Веб 2.0 — новий етап розвитку служби WWW.

Першим, хто вжив поняття Веб 2.0, стало видавництво O'Reilly Media, що спеціалізується на інформаційних технологіях. Згідно опублікованої у вересні 2005 року статті Тіма О'Райлі, засновника компанії O'Reilly Media «Що таке Веб 2.0?», концепція Веб 2.0 з'явилася в результаті «мозкового штурму» між компаніями O'Reilly Media і MediaLive International. Зокрема, обговорювалося питання про те, чи слід вважати крах дот-комів крахом Інтернету.

148

Page 149: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.1. Популярні служби Інтернету. Служба Веб

Учасники цього «мозкового штурму» дійшли висновку, що колапс дот-комів виявився важливим етапом в розвитку Інтернету, внаслідок якого з’явився Веб 2.0 - Інтернет другого покоління.

Для точної характеристики Веб 2.0 використовується кілька основоположних принципів, більшість з яких було зазначено в тій статті Тіма О’Райлі.

Перший принцип. «Веб як платформа» передбачає розробку і впровадження застосувань, використання яких є можливим прямо з веб браузера. Це так звані Rich Internet Applications — насичені Інтернет-застосування. Вони мають функції традиційних програм для комп’ютера, але їх можна запустити прямо з Інтернету.

Другий принцип. Використання при створенні веб-застосувань нових Веб-технологій. Веб 2.0 подарував Інтернету AJAX, синдикацію контента (RSS), фолксономію і багато іншого.

Третій принцип. Співпраця розробників та користувачів у відкритій інформаційній інфраструктурі.

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

Отже, Веб 2.0 — це Інтернет для користувачів і від користувачів, це новий рівень взаємодії користувачів з Інтернет ресурсами. Користувач Веб 2.0 виступає не просто споживачем контенту, який дбайливо надано йому авторами сайту, а також бере посильну участь в створенні цього контенту та впливає на подальший розвиток сервісів.

Особливості Веб 2.0

Рис. 10.2. Особливості та технології Веб 2.0

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

Веб Mash-up (Змішування) — можливість створити новий сервіс, який повністю або частково використовує як джерела інформації інші сервіси, надаючи користувачеві нову функціональність

149

Page 150: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.1. Популярні служби Інтернету. Служба Веб

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

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

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

Можливості AJAX найкращим чином втілено у сервіси Google.

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

• Google Maps. При спробі перетягування карти в різні боки, карта пересувається, але сторінка при цьому не перевантажується

• Gmail. Веб-інтерфейс цілком побудовано на AJAX, що дає йому право вважатися гідною альтернативою для поштових клієнтів The Bath, OutLook тощо.

• Google Calendar. Сервіс для планування подій, зустрічей, справ з прив’язкою до календаря.

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

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

Теги дозволяють зручніше ідентифікувати і тематично сортувати контент (статті, малюнки, мультимедійні файли). Наприклад, об'єкт «ваза з жовтими квітами» складно віднести до однієї категорії. Чи помістити цей об'єкт в категорію «посуд»? Або все ж таки в категорію «квіти»? А може навіть в категорію «жовте»? З тегами «ваза», «жовтий» і «квіти» даний об'єкт може бути швидко знайдений в будь-якій з цих категорій. У Веб 2.0 мітки зазвичай представляються у вигляді так званої «хмари тегів».

Wiki-сайти (яскравим прикладом є Wikipedia) дозволяють своїм користувачам власноруч редагувати, додавати або видаляти інформацію на сайті, створювати нові сторінки. Таким чином, користувачі активніше беруть участь в наповненні сайтів потрібною інформацією.

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

Однією з найважливіших складових соціальних мереж є технологія FOAF (Friend Of A Friend). Вона надає користувачеві можливість підписатися на новини чи матеріали тих користувачів, які знаходяться в «списку друзів». Цим самим заохочується спілкування користувачів Мережі.

150

Page 151: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.1. Популярні служби Інтернету. Служба Веб

Сервіси обміну. Ці ресурси наповнюються користувачами, їм надаються місця для різних файлів – музики, фільмів, документації тощо.

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

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

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

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

Деякі експерти називають Веб 2.0 мильною бульбашкою і пустушкою. Критики вважають, що немає нічого принципово нового у використанні технологій, що існували і раніше. З чисто технічної точки зору ці критики мають рацію. Є думка, що Веб 2.0 – чергова спекуляція, якій уготована доля знаменитого «дот-ком буму».

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

Недоліки Веб 2.0

При використанні технологій Веб 2.0 власник сайту стає орендарем сервісу і/або дискового простору у певної сторонньої компанії. Залежність, що виникає при цьому, формує ряд недоліків нових сервісів:

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

• Слабка пристосованість нинішньої інфраструктури до виконання складних обчислювальних завдань в браузері.

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

Сайт епохи Веб 2.0 на перший погляд є інтерактивним і доброзичливим, дозволяє себе легко налаштовувати. Проте, збір статистики про користувачів, їх переваги та інтереси, особисте життя, кар'єру, коло друзів можуть допомогти власнику сайту маніпулювати спільнотою. За самими песимістичними прогнозами численні сайти Веб 2.0 вкупі з іншими сучасними технологіями створюють прообраз тоталітарної системи «Великого брата».

151

Page 152: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.1. Популярні служби Інтернету. Служба Веб

Переваги Веб 2.0

Проте, Веб 2.0 має і безперечні плюси. В звичайних сервісах (в сервісах Веб 1.0) користувач, за своєю суттю, є пасивним споживачем послуг. Концепція Веб 2.0 передбачає активну діяльність користувачів, що орієнтована на участь в створенні контенту ресурсу. В процесі розвитку сервісу враховується досвід і думка користувачів даного сервісу. Це робить ресурси Веб 2.0 більш інтерактивними і надає користувачам свободу самовираження.

Приклади сайтів Веб 2.0:

• Вікипедія — Вільна багатомовна енциклопедія. • Google Maps — Google-карти. • Flickr — онлайн-фотоальбом. • del.icio.us — служба онлайнових закладок. • Netvibes — Персональний десктоп. • Digg.com — Новинний ресурс. • Pligg — Веб 2.0 CMS. • Quintura — Візуальна пошукова система з інтуїтивною картою підказок. • Live Journal — Сервіс для ведення блогів. • Youtube — Відеосервіс. • MySpace — Сайт мережних співтовариств. • Last.fm — Музичне співтовариство. • Ucoz — Веб-сервіс для створення сайтів.

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

Веб 3.0 Веб 3.0 визначають як високоякісний контент і сервіси, які створюються талановитими

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

Експерт повинен бути своєрідним модератором публікованого контенту. По суті, не виключається і можливість платної основи для співпраці, але набагато важливішим моментом є поява в порталах формату Веб 3.0 «колективного розуму» (wisdom of the crowds), замість пануючого сьогодні «групового божевілля» (madness of the mobs). Веб 3.0 припускає появу вузькоспеціалізованих ресурсів, де буде проведено агрегацію всіх необхідних для користувача сервісів, інструментів професійної соціальної складової і буде здійснено публікацію експертного контенту, що підлягає модерації.

Веб 3.0 передбачає появу нової професії – «менеджер знань», яка повинна стати сполучною ланкою між Веб 1.0 (контент) і Веб 2.0 (сервіси зв'язку). Менеджер знань - це експерт в конкретній області, що привносить в співтовариство якісно відібрану інформацію і позбавляє пересічного користувача від необхідності пошуку та оцінювання.

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

152

Page 153: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.1. Популярні служби Інтернету. Служба Веб

Культура блогів з'явилася в Інтернеті ще в 1996 році, але згодом вона розчинилася в масовій культурі звичайних щоденників нудьгуючих офісних працівників (стандартні сервіси типу LiveJournal, liveinternet.ru). Їх величезна кількість часто не дозволяє знайти хороший блог серед моря спамерів і графоманів.

Можна навести більш життєвий аналог. Людина шукає собі квартиру. Метод Веб 1.0 означав би розміщення оголошення на сайтах з продажу квартир, або самостійний пошук по чужих оголошеннях. Спосіб є незручним: параметрів для пошуку багато, а через Інтернет можна перевірити лише кілька найпростіших (число кімнат, близькість до метро, ціна тощо), причому найголовніші параметри (стан квартири і порядність господарів) перевірити взагалі неможливо. З іншого боку, можна скористатися методом Веб 2.0, тобто опитати знайомих через співтовариства або соціальні мережі. Тут картина є зворотною - багато співчуваючих і перевірених людей, але ніхто з них, на жаль, не здає квартири.

Кращий метод, яким може скористатися покупець, можна цілком характеризувати як Веб 3.0. Він зв'язується з людиною, яку йому порадили, і передає свої побажання. Той, у свою чергу, передає замовлення до групи агентів по квартирах. В цих агентів є оперативні електронні бази вільних квартир, з одного боку, і бази заявок з іншого. Отже, робота агента складається з людських стратегій «менеджера знань», який і пов'язує покупця з потрібною квартирою.

Особливості Веб 3.0

Серед основних візуальних особливостей Веб 3.0 можна відзначити її тривимірність, тоді як серед головних «внутрішніх» характеристик - наявність штучного інтелекту і здібність до самонавчання.

У Веб 1.0 і 2.0 основним елементом представлення інформації є веб-сторінка, що візуально є двомірним масивом інформації, користувач фізично має можливість пересування лише в двох вимірах: третій вимір в «класичній» веб-сторінці відсутній.

На відміну від двовимірних сторінок Веб 1.0 і 2.0, у Веб 3.0 передбачається розвиток тривимірності, який виражається в можливості пересування в будь-яких трьох вимірах, що зробить «віртуальний світ» Інтернету таким же тривимірним як і реальний світ. З розвитком тривимірності сайтів можна очікувати їх об'єднання в єдиний тривимірний світ, що зовні нагадуватиме реальність.

Прикладом реалізації подібних моделей є тривимірні ігри, кожна з яких по суті є своїм власним світом з своїми особливостями і законами. На даний момент одним з найцікавіших варіантів реалізації подібної моделі є програма Microsoft Virtual Earth 3D в якій робиться спроба створення віртуальної тривимірної моделі реального світу.

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

Якщо розглянути це питання на прикладі пошукових систем, то можна привести наступну аналогію. Перші пошукові системи не мали здатності розуміти суть пошукового запиту: користувач задавав «ключову» фразу, і пошукова система лише здійснювала пошук документів, в яких ця фраза міститься, не розуміючи, що саме вона означає.

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

У Веб 3.0 відбудеться подальший розвиток в цьому напрямі, і пошукова система зможе розуміти запит вигляду: «У мене в червні відпустка і я шукаю, куди б мені поїхати відпочивати. Збираюся витратити приблизно $2000. До того ж в мене дитина 11 років.»

153

Page 154: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.1. Популярні служби Інтернету. Служба Веб

Ще однією особливістю Веб 3.0 може стати поступова відмова від текстової форми взаємодії за допомогою клавіатури і домінування голосового спілкування.

Таким чином, при Веб 3.0 Інтернет стає способом життя; об'єкти - віртуальними світами, 3D-браузерами; суб'єкти - гравцями і адміністраторами.

Рис. 10.3. Майбутнє розвитку Інтернету

154

Page 155: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.2. Популярні служби Інтернету. Поштові служби

9.2. Поштові служби Система обміну повідомленнями є одним з найдоступніших і затребуваних засобів

спілкування в Інтернеті, в корпоративних чи локальних мережах. Служби обміну повідомлень розділяються на служби обміну повідомленнями в режимі оффлайн (поштові системи E-mail) і служби миттєвих повідомлень (Internet Relay Chat і Instant Messaging Service) в режимі онлайн. Системи обміну повідомленнями мають свої комунікаційні мережі, більшість з яких побудовано за архітектурою «клієнт-сервер».

Служба електронної пошти в режимі оффлайн Основним призначенням електронної пошти є надання користувачам можливості

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

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

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

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

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

Служби миттєвих повідомлень в режимі онлайн

Служба IRC

Служба IRC (Internet Relay Chat) є засобом для он-лайнового спілкування в реальному масштабі часу, яка надає великий вибір каналів (тем) для проведення дискусій з однодумцями.

Спочатку служба IRC мала одну мережу IRC, яка згодом розділилася на кілька IRC--мереж. Ці IRC-мережі не пов’язані між собою і мають власні імена (DALnet, IRCnet, UNDERnet, RusNet, WeNet, IrcNet.ru тощо). Всередині кожної IRC-мережі існують свої тематичні області або канали.

Ця служба заснована на мережній архітектурі клієнт-сервер, тому для он-лайнового спілкування в Інтернет необхідно на комп’ютері встановити IRC-клієнт. В Інтернеті можна викачати IRC-клієнти для Windows-систем, Unix-подібних ОС, OS/2, і мобільних телефонів.

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

155

Page 156: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.2. Популярні служби Інтернету. Поштові служби

Для спілкування в чаті можна використовувати як IRC-клієнти, так і веб-чати. Веб-чати призначені для обміну повідомленнями на веб-сторінці за допомогою браузера. В цьому випадку встановлювати на комп’ютері клієнтське застосування не потрібно. Веб-чат - це веб-сторінка, де можна в реальному часі спілкуватися з іншими відвідувачами.

Служба Instant Messaging Service

Результатом розвитку чату стала служба миттєвих повідомлень IMS (Instant Messaging Service). IMS - це одна з комунікаційних технологій в Інтернет. В службі миттєвих повідомлень окрім текстових повідомлень можна передавати картинки, файли, звукові та відео сигнали.

Ця служба має свої мережі, які побудовані за принципом клієнт-сервер. Клієнтська програма IMS, яка призначена для ведення бесіди і миттєвого обміну повідомленнями в режимі он-лайн через служби миттєвих повідомлень, називається месенджером (Instant messengers, IM).

Для спілкування можна використовувати як десктопний IM-клієнт (месенджер), так і веб-версію клієнта, наприклад, Google Talk Gadget, JWChat, Meebo, MDC.

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

Основні функцій, які надають сучасні месенджери служб миттєвих повідомлень:

• Чат (відеочат, текстовий і голосовий). • VOIP сервіси: дзвінки на комп'ютер, дзвінки на стаціонарні і мобільні телефони. • Можливість відправлення SMS. • Передача файлів. • Інструменти для спільної роботи в режимі реального часу. • Можливість спілкування в чаті безпосередньо на веб-сторінці. • Нагадування і сповіщення. • Зберігання історії спілкування за кожним контактом. • Індикація про мережний статус користувачів (в мережі, немає на місці тощо), які занесені до

списку контактів.

Між різними мережами IMS, зазвичай, відсутні взаємозв'язки, тому месенджер однієї мережі, наприклад ICQ не може зв'язатися з месенджером мережі Skype. Для спілкування користувачі повинні зареєструватися в обраному сервісі і встановити їх месенджери.

Існують альтернативні месенджери для служб миттєвих повідомлень, які можуть одночасно працювати в кількох мережах. Наприклад, безкоштовний відкритий мультипротокольний месенджер Miranda IM (або Trillian, Pidgin) дозволяє підключатися одночасно до кількох мереж, що позбавляє від необхідності встановлювати окремий месенджер для кожної мережі.

Альтернативою для пропріетарних протоколів IM було розроблено відкрите сімейство протоколів і технологій Jabber. Це система миттєвого обміну повідомленнями між будь-якими двома абонентами Інтернет на основі відкритого протоколу XMPP.

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

Jabber є системою спілкування нового покоління і використовується в багатьох месенджерах. Jabber-клієнти: Psi, Miranda IM, Tkabber, JAJC, Pandion та інші.

156

Page 157: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.2. Популярні служби Інтернету. Поштові служби

Популярні месенджери

ICQ (I Seek You - Я Шукаю Тебе) - популярна програма (поширений Інтернет-пейджер ) для спілкування в режимі реального часу. Оскільки ICQ - це застаріла централізована мережа із закритим протоколом, тому фахівці радять переходити з системи ICQ на систему Jabber.

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

Miranda IM - багатопротокольний месенджер миттєвих повідомлень з відкритим кодом для роботи в Інтернеті або локальній мережі. Підтримує протоколи систем миттєвих повідомлень: ICQ, IRC, Jabber, Google Talk, Skype та інших.

Google Talk client - десктопний IM- месенджер Google Talk, а Google Talk Gadget - це веб-клієнт, який працює в любому браузері з встановленим Abobe Flash-плагіном. Google Talk - це служба Google для обміну миттєвими повідомленнями, яка дозволяє спілкуватися за допомогою голосового чату і текстових повідомлень. Google Talk використовує протокол XMPP (Jabber-сумісний) і дозволяє спілкуватися з іншими учасниками мережі Jabber.

Mail.Ru Agent client - це IM-месенджер, який забезпечує текстове, голосове спілкування і відеочат. Підтримує ICQ і є ICQ-клієнтом.

VoxOx (voxox.com) - сучасний і перспективний мультипротокольний месенджер з відкритим початковим кодом, який підтримує протоколи ICQ, Jabber, MSN, Yahoo! Messenger та інші. VoxOx містить багато корисних функцій і складає конкуренцію для Skype.

Історія електронної пошти З історією розвитку електронної пошти пов'язано багато цікавих фактів і цікавих подій.

Перші дослідження

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

Власне, віртуальною поштовою скринькою був текстовий файл до якого користувач міг додати власне текстове повідомлення. Для такої операції використовувалися дві програми - SNDMSG для відправлення і READMAIL для читання.

Це був аналог сучасних гостьових книг і мережних форумів. Програму було названо SndMsg — тобто Send Message, а файл, що зберігав повідомлення, — «поштовою скринькою». Одночасно з Send Message розроблялася і програма обміну файлами між різними комп'ютерами Arpanet (прообраз нинішнього FTP), для якої було створено протокол CypNet.

Залишалося невирішеним питання обміну повідомленнями між користувачами різних комп'ютерів мережі Arpanet. Send Message для цього не годилася — вона працювала лише на одному комп’ютері, а протокол CypNet дозволяв лише передавати файли.

У 1971 році Рей Томлінсон (Ray Tomlinson), співробітник компанії «Bolt Beranek and Newman, Inc.» (BBN), розробив поштову програму для пересилки повідомлень по розподіленій мережі. На той час Мережу складали вже 23 комп'ютери, які були об'єднані у 15 вузлів.

При створенні нової програми за основу було прийнято дві існуючі програми: поштова програма для внутрішньої мережі та експериментальна програми пересилки файлів. Томлінсон написав програму, що робила те ж саме, що і Send Message, тільки не на локальному комп'ютері, а на віддаленому. Програма відсилала за протоколом CypNet повідомлення на віддалену машину і

157

Page 158: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.2. Популярні служби Інтернету. Поштові служби

там розміщала його в певний файл - «поштову скриньку». Туди ж скеровувала повідомлення і локальна програма Send Message.

Програма Томлінсона складалася з 200 строчок коду і була комбінацією SNDMSG, READMAIL і протоколу CPYNET, що використовувався для відправлення файлів на віддалений комп'ютер. Перше послання Томлінсона було відправлене з одного комп'ютера на іншій, які знаходилися в одному приміщенні. Томлінсон витратив півроку на експерименти, перш ніж відправив повідомлення із своєї лабораторії на комп'ютер, який був дійсно віддаленим.

Так з'явилася електронна пошта. Нова програма швидко завоювала популярність серед колег Томлінсона. Він вдосконалив своє творіння — додав функцію забезпечення обміну листами як між віддаленими машинами, так і між користувачами одного комп'ютера. Для цього було розроблено систему організації поштових адрес на віддалених машинах.

При роботі з програмою кожному користувачу локальної машини привласнювалася адреса, що складалася з його імені і мережного імені його комп'ютера, розділених знаком «@». (Цей знак використовувався Томлінсоном замість слова «at» (на), тобто вираз user@machine означає: користувач такий-то на комп'ютері такому-то.) Місцезнаходження «поштової скриньки» кожного користувача Arpanet ставало однозначно визначеним, що дало можливість легко здійснювати обмін повідомленнями між ними.

Такі адреси були не дуже схожі на сучасні. Наприклад, адреса могла виглядати так: mary%compsci@udel, що означало «користувач mary на комп'ютері compsci, що розташований в мережі UDEL (University of Delaware)».

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

Історія символу @ Історія символу @ починається ще в середньовіччі, коли ченці - хранителі стародавніх знань

і рукописів - займалися перекладами і переписували трактати - у тому числі і ті, що написані латиною. В латині вживається слово «ad», що в перекладі на сучасну англійську означає «at» («на», «в», «к») - і вказує на приналежність, напрям чи наближення. У шрифті, що використовувався ченцями, буква «d» мала невеликий «хвостик», що робило її схожою на цифру «6» в дзеркальному віддзеркаленні. Так «ad» досить швидко перетворилося на @.

В XV столітті @ з'являється знов. Іспанські купці використовували цей знак як скорочене найменування міри ваги - «arroba» (це приблизно 11,52 кг). Цей знак використовувався для позначення ваги худоби та об’єму вина. В епоху Відродження @ став використовуватися для позначення ціни, а в епоху індустріальної революції (час капіталу, перших бірж, верстатів тощо) @ став незмінно зустрічатися в бухгалтерських звітах. Так @, разом з $, #, % і іншими специфічними символами з майже забутою семантикою перекочувала на клавіатуру.

Символ @ довго чекав на свою зоряну годину, поки на нього випадково не впав погляд Рея Томлінсона. Він шукав значок, який, по-перше, не міг би зустрітися жодному імені чи назві і який міг би відокремити ім'я користувача від імені комп'ютера за універсальним алгоритмом: ім'я - знак - місце. Окрім букв і цифр на клавіатурі моделі 33 Teletype були і специфічні символи, серед яких і був @.

Справжнє народження символ @ пережив у 80-і роки, коли почалася комп'ютерна революція - комп’ютери пошилися за межі лабораторій, і у 90-і роки, коли з'явилися перші веб-браузери.

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

158

Page 159: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.3. Популярні служби Інтернету. Пошукові системи і каталоги

9.3. Пошукові системи і каталоги Сучасний Інтернет є унікальним безмежним сховищем знань, де можна отримати відповідь

практично на будь-яке питання. Тут зібрано все краще, що винайдено і створено людством як за всю його довгу історію, так і новинки, що з'явилися щойно. Користувачі розшукують в Інтернеті не лише текстові документи чи новини, але і фото, аудіо, відеоматеріали, товари, послуги, вакантні посади тощо.

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

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

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

Пошукові системи інакше називають: пошуковими засобами або пошуковими машинами, жаргонною назвою є пошуковики. Еквівалентними іноземними термінами є: англійською - Search Engines, німецькою - Suchmaschinen, французькою - Le systeme de prospection.

Пошукові системи містять три основні компоненти:

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

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

• Пошукові роботи (Robots), павуки (Spiders) або хробаки (Worms) - спеціальні програми, які автоматично періодично «відвідують» сайти, збирають відомості про вміст сторінок, тобто індексують їх і наповнюють бази даних пошукової системи.

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

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

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

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

159

Page 160: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.3. Популярні служби Інтернету. Пошукові системи і каталоги

Запити бувають двох типів: прості і складні (або розширені, advanced). Прості запити складаються з окремих ключових слів або словосполучень. Складні запити, окрім ключових слів, містять логічні чи інші оператори.

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

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

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

Значно підвищують вибірковість пошуку фільтри, якими забезпечуються пошукові системи.

Фільтри дозволяють:

• Обмежити список відібраних документів за допомогою логічних операторів (так званий складний пошук).

• Обмежити простір пошуку типом протоколу, за допомогою якого було створено документ (пошук на сайтах або у телеконференціях).

• Обмежити відібраний матеріал часовим відрізком, певними датами створення шуканого документа (наприклад, між 1 вересня 2005 р. і 20 вересня 2007 р.).

• Відібрати документи, що складені однією мовою (українською, російською тощо).

• Обмежити відбір документів територією розміщення серверів (наприклад, тільки з Європи, України чи навіть, лише з Львівської області).

• Обмежити пошук певною частиною документа (заголовок, доменна адреса).

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

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

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

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

Вибірковість можна змінювати (регулювати) за допомогою логічних операторів (фільтрів).

160

Page 161: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.3. Популярні служби Інтернету. Пошукові системи і каталоги

Для уточнення запиту (фільтрації інформації) призначені логічні оператори OR, AND, NOT. Використання логічного оператора AND (І) приводить до відбору документів, які обов'язково містять всі перелічені в запиті ключові слова, що сполучені цим оператором.

Оператор NOT (НІ) дозволяє виключити документи, які містять ключове слово, вказане після цього оператора.

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

Оператор FOLLOWED BY дозволяє відбирати документи, в яких ключові слова слідують один за одним в заданому порядку.

Оператор ADJ відбирає документи, в яких ключові слова є суміжними (слідують одне за іншим).

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

Сучасні пошукові системи стають інтелектуальними. Використовуючи принципи штучного інтелекту, вони формують список документів (посилань на них), відповідно до ступеня їх релевантності.

Релевантність – відповідність знайденого в процесі пошуку документа до зробленого запиту. При цьому пошукові системи аналізують розташування знайдених ключових слів в документі (заголовку або тексті), число повторень ключових слів, їх взаємне розташування в документі. Найбільш точно відібрані документи розташовуються на початку списку документів, що знайдені в процесі пошуку. Для ранжирування знайдених документів використовують наступні показники.

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

Частота ключового слова (keyword frequency) - показник, що враховує абсолютну частоту використання ключових слів (скільки разів зустрічається дане ключове слово на сторінці). Найбільшу «вагу» при ранжируванні документів мають слова, що розташовані в заголовку сторінки (так званий титул, він міститься між тегами title). Саме цей заголовок відображається в рядку заголовка браузера при перегляді сторінки, і слова, що там вказані мають найбільшу цінність (вагу) для пошукової системи.

Деякі пошукові системи при ранжируванні враховують індекс цитування (посилальна популярність, авторитетність, тематичний індекс цитування, ІЦ, ТІЦ, Page Rank, Link Popularity) - кількість посилань в Інтернеті, що вказують на конкретний сайт. Чим їх є більше, тим вищим є індекс цитування.

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

Спеціалізовані пошукові системи

Метапошукова система дозволяє вести автоматичний пошук за запитом з використанням відразу кількох пошукових машин.

Метапошукові системи:

http://www.metacrawler.com

161

Page 162: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.3. Популярні служби Інтернету. Пошукові системи і каталоги

http://www.inctor.com

Пошукові системи, що призначені для пошуку файлів:

http://www.filesearch.ru

http://www.files.ru

http://www.freeware.ru

Інші спеціалізовані пошукові системи

www.midi.ru Музичні файли.

www.graphscarch.com Малюнки.

http://bukinist.agava.ru Книги.

www.cooking.ru/search.html Кулінарні рецепти.

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

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

Каталог

Каталоги – це є ієрархічні структури, що містять впорядкований перелік сайтів, які супроводжуються короткими коментарями (анотаціями). Ресурси каталогів можна сортувати за датою долучення, за популярністю, за алфавітом тощо.

Каталоги можуть бути глобальними, національними, загальними і спеціалізованими (галузевими, тематичними тощо).

Каталоги з'явилися самим природним чином: користувачі відбирали для себе посилання на улюблені місця в Інтернеті і складали впорядковані тематичні списки з деталізацією кожного розділу (рубрики). Саме так виник всесвітньо відомий каталог Yahoo!, що створено студентами Стендфордського університету Девідом Філо і Джері Янгом.

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

Модератор – співробітник, що відповідає за вміст каталогу (його окремого розділу, підрозділу тощо), за його достовірність та актуальність.

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

162

Page 163: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.3. Популярні служби Інтернету. Пошукові системи і каталоги

Особливості та відмінності пошукових систем та каталогів

Отже, пошукові системи і тематичні каталоги мають свої особливості і взаємно доповнюють один одного.

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

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

Пошукові машини

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

• Пошукові системи переглядають кожну сторінку сайту окремо. Може бути проіндексована як одна, так і всі сторінки сайту.

• Зазвичай, сучасні пошукові системи самостійно знаходять та індексують нові сайти. Але, іноді за певних умов, пошукові системи цього не роблять і сайт потрібно самостійно зареєструвати у пошуковій системі. Термін долучення сайту до бази даних (за умови відповідності сайту до вимог, що пред'являються) може складати від 1 до 2 тижнів.

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

• База даних в пошуковій системі постійно оновлюється. Алгоритм роботи пошукової системи є циклічним.

• При роботі з пошуковими системами кожна окрема сторінка сайту може бути оптимізованою під визначені ключові слова окремо від решти сторінок.

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

Каталоги

• Каталоги містять опис сайту як єдиного цілого. В каталогах немає опису окремих сторінок сайту. Власник сайту самостійно складає короткий опис сайту, що відображає його суть, призначення тощо. Після реєстрації сайту в каталозі, його зазвичай переглядає модератор, що відповідає за вміст каталогу або його окремого розділу. Змінити опис сайту в каталозі може модератор або власник сайту.

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

• У каталозі, як правило, зазначено доменну адресу головної сторінки сайту.

• При пошуку в каталозі вирішальну роль має короткий опис сайту, ніж ключові слова і метатеги, що містяться в тексті сторінок.

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

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

• Сортування сайтів за категоріями є об'єктивним критерієм. Якщо власник сайту при додаванні сайту до каталогу вибрав відповідну категорію, а модератор з цим погодився.

163

Page 164: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.3. Популярні служби Інтернету. Пошукові системи і каталоги

• Сортування сайтів за іншими критеріями не може мати 100% об'єктивний характер. В певних каталогах рейтинг може мати комерційний характер.

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

• Виявлення посилань до неіснуючих сайтів в каталозі може бути виконане автоматично, але часто потрібно додатково перевіряти існування ресурсу модератором.

Аналіз популярності пошукових систем В різних країнах користувачі вважають за краще використовувати різні пошукові системи. І

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

Рейтинг пошукових систем в Україні

Сервіс статистики Bigmir.net (http://www.bigmir.net/) надає максимально точну (серед безкоштовних джерел) інформацію для огляду популярності пошукових систем в Україні. За його статистикою на 2010-й рік ринок пошукових запитів поділено наступним чином:

• Google 74.94%

• Яндекс 18.27%

• Ukr.net 2.10%

• Search.Mail.ru 1.79%

• Meta.ua 0.73%

• Bigmir.net 0.69%

Основна маса українських користувачів використовують для пошуку інформації в Інтернеті

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

Рейтинг пошукових систем в Росії

За даними компанії Live Internet (http://www.liveinternet.ru/) в Росії спостерігається інший розподіл популярності:

• Яндекс — 47.4%

• Google — 34.3%

• Search.Mail.ru — 9.0%

• Rambler — 1.9%

• Bing — 0,9%

164

Page 165: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.3. Популярні служби Інтернету. Пошукові системи і каталоги

Тенденції останніх років свідчать, що Google поступово починає наздоганяти Яндекс.

Можливо, причина в ширшій базі Google, але російські користувачі все частіше почали звертатися саме до Google зі своїми питаннями.

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

Google залишається лідером Європи

За даними компанії Net Applications (http://www.netapplications.com/) у 2010 року використання пошукових систем на Заході розподілялося таким чином:

• Google 86,30 %

• Yandex - 7,70 %

• Yahoo 5,30 %

• Bing 3,13 %

• Baidu 3,02 %

• Ask 0.67 %

• AOL 0.44 %

• MSN 0.08 %

• AltaVista 0,07 %

• Excite 0,03 %

• Lycos 0,02 %

• All the Web 0,01 %

Google залишається лідером світу

На підставі дослідження компанії NetMarketShare (http://marketshare.hitslink.com) на 2010 рік момент світова аудиторія пошукових систем розподілилася таким чином:

• Google 85,5%

• Yahoo 5,9%

• Bing 3,2%

• Baidy 3.0%

• Ask 0.68%

• AOL 0.47%

Популярність пошукових системи Google і Microsoft (Bing.com) продовжує зростати за рахунок аудиторії Yahoo.

165

Page 166: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.4. Популярні служби Інтернету. Служби новин та розсилок

9.4. Служби новин та розсилок

Електронна поштова розсилка Інтернет надає активним користувачам широкі можливості для створення і розміщення

власних сайтів, де можна проявити себе і показати свої здібності, захоплення та професійні здобутки. Після створення сайтів стає актуальним питання – як зробити власний ресурс популярним, залучити та утримати на сайті аудиторію.

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

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

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

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

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

Розсилка з погляду підписчика

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

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

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

166

Page 167: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.4. Популярні служби Інтернету. Служби новин та розсилок

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

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

Розсилка з погляду автора

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

Якщо в автора є сайт, він має шанс відчутно підвищити його відвідуваність. Багато власників сайтів цим користуються, відкриваючи розсилки типу «Новині сайту N». Втім, для того, щоб забезпечити стабільну, солідну відвідуваність сайту і нормальну кількість підписчиків, і новини, і сайт повинні бути цікавими самі по собі, а таке трапляється нечасто. В результаті, в багатьох підписчиків відбувається своєрідне «відторгнення»: побачивши в списку розсилок чергові «новини сайту», вони пропускають їх, навіть не читаючи.

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

Деякі сервери надають авторам додаткові, платні послуги, такі як відсутність в розсилці зовнішньої реклами, дозвіл на необмежене розміщення власної реклами, додаткова реклама розсилки на сервері. Цим активно користуються компанії, що пропагують за допомогою електронних розсилок себе і свою продукцію.

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

Розсилка як спам

Часто, підписка на поштову розсилку відбувається для відвідувача сайту непомітно, а її випуски стають занадто нав'язливими. Наприклад, заповнює користувач на сайті довгу і нудну форму для отримання певного сервісу - наприклад, електронної пошти. Довго складає паролі, згадує дівоче прізвище бабусі і ставить галочки. Але, коли доходить до кнопки ОК, то часто не помічає, що в кінці анкети дрібним шрифтом і у відміченому стані є пункт: «підписатися на розсилку новин».

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

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

1. Розсилка листів на електронну пошту є одним з найдешевших видів реклами.

2. Спам розсилка охоплює значно більшу аудиторію, ніж інша реклама.

3. Масова розсилка листів – це реклама, яка не примушує на неї звертати увагу, оскільки одержувач може просто видалити такий лист, якщо він його не цікавить.

167

Page 168: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.4. Популярні служби Інтернету. Служби новин та розсилок

Популярні служби розсилок

Служби поштових розсилок Рунета

Subscribe.ru (www.subscribe.ru) - одна з перших служб електронних розсилок в Рунеті і досі залишається популярною настільки, щоб гордо іменуватися «Інформаційним каналом». За кількістю підписчиків - більше за 6 млн. - Subscribe.ru займає перше місце в СНД і входить в двадцятку найбільших світових служб аналогічної спрямованості. Кількість розсилок на Subscribe перевищує 10 тисяч. У зв'язку з цим каталог Subscribe є структурованим набагато ретельніше, ніж на інших серверах розсилок.

І для підписчиків, і для авторів Subscribe надає широкий спектр послуг. Розсилки можна отримувати не лише на адресу електронної пошти, але і на мобільний телефон чи мобільний комп'ютер IPad. Окрім основних кодувань (KOI-8 і WIN-1251), можливою є підписка в інших кодуваннях (латиниці), наприклад, для тих користувачів, що живуть за кордоном.

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

MailList (www.maillist.ru) – популярний сервер поштових розсилок Рунету. Кількість підписчиків перевищує 5 мільйонів, а розсилок в ній більше за тисячу. Серед розсилок є платні, такі як повна стрічка новин, новини економіки, спорту тощо. Каталог розсилок організовано досить оригінально: кількість підписчиків не розголошується, проте, в загальному списку розсилок певного розділу виводиться і короткий опис кожної розсилки.

MailList надає підписчикам дуже важливу послугу – ANTISPAM, тоді спамеру відсилається автоматично згенерований лист з інформацією про те, що такої адреси не існує.

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

Mail.ru (www.mail.ru) – служба розсилок, яку створено на основі безкоштовної електронної пошти Mail.ru. Вона швидко набрала популярності і на тепер налічує понад 4 мільйони підписчиків.

Служби поштових розсилок Уанета

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

Newsman (www.newsman.com.ua) - українська служба поштових розсилок. Кількість підписчиків складає біля 70 тисяч чоловік, загальна кількість розсилок – біля вісімсот. Сайт служби має зручний інтерфейс, реєстрація підписчика займає кілька хвилин, інструкції відправляються на електронну пошту. Реєстрація автора також є простою і дозволяє створювати випуски розсилки безпосередньо після реєстрації.

Технологія RSS Активні користувачі Інтернету витрачають багато часу на серфінг і зазвичай мають набір

пріоритетних сайтів або веб–сторінок, за якими вони стежать з певною періодичністю: різні форуми, блоги, новинні, тематичні чи розважальні сайти.

168

Page 169: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.4. Популярні служби Інтернету. Служби новин та розсилок

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

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

Рис. 10.4. Застарілий спосіб отримання інформації про новинки на вибраних сайтах

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

Зважаючи на всі вище перелічені недоліки і бажання полегшити процес серфінгу, на початку 1997 року було розроблено нову технологію RSS (Really Simple Syndication, «легке отримання інформації»). Вперше дана технологія стала відомою після її застосування компанією Netscape для трансляції свого інформаційного контенту. Досвід виявився успішним і багато відомих компаній взяли його на озброєння.

Рис. 10.5. Використання технології RSS для отримання інформації про новинки на вибраних сайтах

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

Всі сучасні браузери (Firefox, Opera, IE, Google Chrome) підтримують технологію агрегації. В деяких браузерах така можливість реалізується при використанні плагинів, в деяких вона вже є вбудованою. Користувачі старих версій браузерів можуть користуватися веб–агрегаторами, що розташовані на сторонніх сайтах, наприклад Яндекс.Лента - RSS-синдикатор. Існують спеціалізовані програми, які працюють, як агрегатори або RSS–рідери.

169

Page 170: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.4. Популярні служби Інтернету. Служби новин та розсилок

Для того, щоб RSS–рідер міг прочитати інформацію в подібному форматі, на кожному сайті розміщується власне спеціалізоване посилання або, так звана, RSS–адреса (фід). Для того, щоб користуватися читанням новин з певного сайту, достатньо ввести фід сайту (адресу) в рядок даних RSS–рідера. Якщо необхідно спостерігати за кількома вибраними сайтами або Інтернет – сторінками, необхідно додати, відповідно, всі адреси.

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

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

170

Page 171: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.5. Популярні служби Інтернету. Файлові служби

9.5. Файлові служби Інтернет

Служба FTP Технологію FTP (File Transfer Protocol, або «Протокол передачі даних») було розроблено в

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

FTP-протокол — один із базових протоколів передачі даних, що з'явився набагато раніше за протокол HTTP, активно використовується для доступу до видалених серверів і входить у стандарти Інтернету. Перші специфікації FTP відносяться до 1971 року. З тих пір FTP зазнав багато модифікацій і значно розширив свої можливості. Даний протокол дозволяє підключатися до серверів FTP, проглядати вміст каталогів, завантажувати файли з сервера на локальний комп’ютер і навпаки.

Доступ до файлів за протоколом FTP відбувається за допомогою FTP-клієнтів, які здійснюють з'єднання з FTP-сервером. Всі сучасні операційні системи містять утіліти для роботи зі службою FTP, які можна набирати в командному рядку. Як простий FTP-клієнт можна використати браузер або любий файловий менеджер (Проводник, Мой компьютер, Total Commander).

FTP-сервер — комп'ютер, на якому запущено відповідне програмне забезпечення, що надає доступ до файлів і каталогів цього комп'ютера за протоколом FTP. FTP-сервера можуть бути загальнодоступними (anonymous FTP-site) і з обмеженим доступом. На FTP-серверах організовано FTP-архіви - спеціальні дерева каталогів, доступ до яких надається будь-якому віддаленому користувачеві.

FTP-архіви

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

Інформація в FTP-архівах поділена, зазвичай, на три категорії:

• Захищена інформація. Режим доступу визначається власниками і надається за спеціальною угодою. До цього виду ресурсів відносяться комерційні архіви (наприклад, комерційні версії програм в архівах ftp.microsoft.com), закриті національні і міжнародні некомерційні ресурси (наприклад, роботи за міжнародними проектами CES або IAEA), приватна некомерційна інформація із спеціальними режимами доступу (наприклад, приватні добродійні фонди).

• Інформаційні ресурси обмеженого використання. До них відносяться ресурси обмеженого часу використання або обмеженого часу дії, наприклад, програми класу shareware.

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

171

Page 172: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.5. Популярні служби Інтернету. Файлові служби

Файлові сховища Однією із особливостей Інтернету є можливість передавати файли в будь-який куточок світу.

Проте, якщо одні файли передати легко, то інші передати складніше.

Якщо файл треба передати для одного-двох людей, то файли можна передати засобами електронної пошти e-mail або Інтернет-месенджера, проте як бути, якщо файл призначено не для вузького кола, а для десятків, сотень, а то і тисяч користувачів Інтернету? Одним із способів може бути використання файлового сховища.

Файлові сховища або файловий хостинг — сервіс, що надає користувачу місце під його файли і цілодобовий доступ до них через веб-інтерфейс, як правило за протоколом HTTP. Такий сервіс дозволяє зручно «обмінюватися» файлами. На спеціальній сторінці файлового сховища (найчастіше на головній) користувач завантажує файл на сервер сховища і отримує постійне посилання, яке він може розсилати по e-mail, публікувати в блогах, на форумах тощо. Перейшовши за таким посиланням інший користувач може викачати розміщений файл.

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

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

Файлові сховища заробляють двома основними способами:

• Показом реклами. Зазвичай, файлові сховища вводять штучну паузу, коли користувачі хочуть викачати файл. Протягом певного часу (45-120 сек.) користувачу показується реклама, і лише потім віддається файл.

• Продажем преміум-акаунтів (premium accounts). За кілька десятків доларів в рік користувач може купити собі право викачувати файли відразу, без реклами, без затримок, з повною або підвищеною швидкістю (багато сховищ значно обмежують швидкість завантаження). Він також отримує інші переваги, що є недоступними для звичайних користувачів, наприклад, викачування файлів в кілька потоків і докачування.

Заробіток

Деякі файлові сховища мають партнерські програми за приблизно однаковою схемою. Зареєстрований користувач завантажує на сервер файл, який має унікальний URL. Природно, що користувач прагне розмістити посилання на свій файл на як можна більшій кількості сайтів. Як правило, це сайти, що поширюють неліцензійне ПЗ, форуми, а також спам чи ICQ-розсилка. За кожну тисячу викачувань унікального файлу, сервер виплачує власнику файлу гроші (від 2 доларів США), причому, чим більше файл, тим більше він «коштує». Наприклад, за файл розміром від 1МБ до 4МБ, власник отримує 2$ за 1000 викачувань, а за файл розміром від 250МБ до 2ГБ — 50$ за 1000 викачувань.

Як мінімум три діючих файлові сховища — FileDeluxe.com, Uploading.com і Depositfiles — готові ділитися прибутком з активними користувачами, виплачуючи їм гроші за кількість завантажень файлів, що розміщені ними.

172

Page 173: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.5. Популярні служби Інтернету. Файлові служби

Популярні файлові сховища

• Rapidshare (http://rapidshare.com). Стабільний і оптимальний сервіс для зберігання файлів. Висока швидкість, довгий час зберігання файлів.

• iFolder (http://ifolder.ru). Проект від Agava, який пропонує зареєстрованим користувачам можливість необмеженого зберігання файлів, не має жорстоких обмежень за регіональним принципом, пропонує можливість зробити на їх базі свій файловий хостинг з власним дизайном, достатньо високу швидкість викачування, а також ряд інших переваг у порівнянні з конкурентами.

• DepositFiles (http://depositfiles.com). Користувач може вибрати користування платними або безкоштовним акаунтом. Якість послуг Deposit є невисокою, низька швидкість викачування, а тимчасове очікування перед закачуванням є довшим.

• Letitbit (http://letitbit.net). Пропонує привабливі умови для партнерства. Підтримує завантаження файлів за FTP протоколом, завантаження через браузер, віддалене завантаження.

• WebFile (http://webfile.ru). Популярний ресурс в Рунеті, що має широкі можливості. • Fileshare.in.ua (http://fileshare.in.ua). Український файловий хостинг. Зручний сервіс для

розміщення файлів, що призначені для ресурсів з великим трафіком з України.

Пораді щодо роботи з файловими сховищами

Перш ніж завантажити на певний сервіс свої файли, слід обов'язково ознайомитися з його правилами роботи та відповідями на найпоширені питання (FAQ).

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

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

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

Як обійти обмеження подібних сховищ? Кращим вирішенням є застосування спеціальних програм для викачування з файлових сховищ, наприклад, розробка Universal Share Downloader (http://www.dimonius.ru/).

Утиліта незвичайно проста у використанні, достатньо ввести до неї потрібні посилання або імпортувати txt-файл і вона негайно почне завантаження. Підтримується 25 різних сервісів та багатопотоковий режим, тобто, можливість паралельно викачувати файли з кількох сховищ одночасно.

Файлові сховища адаптуються під сучасні вимоги зростаючої кількості користувачів, а також під зростання користувачів, але їх витісняє альтернатива в вигляді P2P мереж.

Файлообмінні мережі Традиційним методом передачі файлів в мережах є модель «клієнт-сервер». Центральний

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

173

Page 174: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.5. Популярні служби Інтернету. Файлові служби

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

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

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

Типи організації файлообмінних мереж

Централізовані мережі

Враховуючи, що кожен учасник файлообмінної мережі є і клієнтом і сервером, необхідна інфраструктура для об'єднання розрізнених клієнтів між собою у певне співтовариство.

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

Децентралізовані мережі

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

До децентралізованих мереж відносяться Gnutella, Overnet, Kad.

Частково децентралізовані (гібридні) мережі

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

До частково децентралізованих файлообмінних мереж відносяться eDonkey2000, OpenNap.

Принципи роботи файлообмінних мереж

• Користувач викачує програму собі на комп'ютер.

• Надає доступ для інших користувачів до певної частини своїх ресурсів. Цей процес називається «розшарюванням» (sharing).

• В кожній такій програмі присутній пошук, який шукає ресурси, що викладені для вільного викачування на комп'ютерах інших користувачів.

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

174

Page 175: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.5. Популярні служби Інтернету. Файлові служби

Файлообмінні мережі P2P Вперше термін peer-to-peer (P2P) було використано в 1984 році компанією IBM при розробці

мережної архітектури для динамічної маршрутизації трафіку через комп'ютерні мережі з довільною топологією (Advanced Peer to Peer Networking). Сьогодні, на технології P2P засновано величезне число популярних мережних сервісів — від простого обміну файлами до мовного і відео зв'язку.

В основі технології покладено принцип децентралізації: всі вузли в мережі P2P є рівноправними, що забезпечує значні переваги технології P2P перед клієнт-серверним підходом:

• Відмовостійкість при втраті зв'язку з кількома вузлами мережі.

• Збільшення швидкості отримання даних за рахунок копіювання одночасно з кількох джерел.

• Можливість розділення ресурсів без «прив'язки» до конкретних IP-адрес.

• Величезна потужність мережі в цілому тощо.

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

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

Існує величезне число клієнтських програм для роботи з P2P-мережами, як комерційних, так і з відкритим кодом. Постійно вдосконалюються протоколи, збільшується функціональність систем, і можна сподіватися, що скоро клієнтське ПЗ для P2P буде інтегровано з операційними системами. Так, вже зараз великі компанії виявляють цікавість до технологій Р2Р — наприклад, компанія Sun розробляє протокол для доступу до основних P2P-мереж з кишенькових комп'ютерів і смартфонів, а компанія Microsoft створила свої реалізації P2P-протоколов Scribe і Pastry.

Технологія Р2Р

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

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

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

Протоколом або набором протоколів визначається логічна топологія мережі, механізм під’єднання/від’єднання вузлів, а також алгоритм взаємодії вузлів. Вирішення таких завдань, як корекція помилок, регламентація форматів повідомлень, службових запитів і відгуків, маршрутизація в умовах постійного під’єднання і від’єднання вузлів, теж визначається протоколом P2P.

В моделі стеку мережних протоколів TCP/IP протоколи P2P відносяться до прикладного рівня. Таким чином, P2P-мережа є накладеною (overlay), тобто вона функціонує поверх Інтернету і використовує існуючі транспортні протоколи TCP або UDP.

175

Page 176: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.5. Популярні служби Інтернету. Файлові служби

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

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

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

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

Велике зростання популярності мереж P2P обумовлено їх характеристиками: децентралізація, розподіленість, самоорганізація мережі. Позначені принципи забезпечують простоту та дешевизну реалізації, підтримку роботи мережі, її відмовостійкість і масштабованість, збільшення швидкості копіювання і колосальну потужність мережі в цілому.

Серед файлообмінних мереж за кількістю вузлів лідирують такі мережі, як Bittorrent, eDonkey2000, Gnutella2, Gnutella.

Основні вразливі сторони P2P

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

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

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

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

Щоб подолати таку проблему, клієнти повинні користуватися надійними хеш-функціями («деревами» хеш-функцій, якщо файл копіюється по частинах), такими, як SHA-1, Whirlpool, Tiger, і лише для вирішення маловідповідальних завдань — контрольними сумами CRC. Для зменшення переданих об'ємів даних і полегшення їх шифрування можна застосувати компресію. Для захисту від вірусів потрібно мати можливість зберігати ідентифікаційну метаінформацію про них, як це, наприклад, зроблено в мережі Gnutella2.

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

176

Page 177: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.5. Популярні служби Інтернету. Файлові служби

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

Виділені сервери і вузли періодично обмінюються між собою службовою інформацією і за необхідності додають підроблені сервери/вузли до чорного списку для блокування доступу.

Ще однією проблемою є нечесна поведінка частини клієнтів, які лише копіюють чужі файли, але нічого не пропонують іншим для копіювання (leechers).

Для боротьби з цим використовуються різні методи.

• В Bittorrent реалізовано схему «скільки блоків файлу отримав, стільки віддав».

• В eMule застосовано метод кредитів: скопіював файл — кредит зменшився, дозволив скопіювати свій файл — кредит збільшився (xMule — кредитна система із заохоченням поширювання рідкісних файлів).

• В мережі eDonkey стимулюється розмноження джерел

177

Page 178: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.6. Популярні служби Інтернету. Служби онлайн-мовлення

9.6. Служби онлайн-мовлення

Інтернет-радіо Інтернет-радіо або веб-радіо - це технології передачі потокових аудіоданих через мережу

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

Технологічну основу системи складають три елементи:

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

• Сервер (повторювач потоку) — приймає аудіопотік від станції і перескеровує його копії до всіх клієнтів, що під’єднані до сервера. Він є реплікатором даних. Трафік сервера є пропорційним до кількості слухачів + 1.

• Клієнт — приймає аудіопотік від сервера і перетворює його в аудіосигнал, який і чує слухач Інтернет-радіостанції. Можна організовувати каскадні системи радіомовлення, використовуючи як клієнт - повторювач потоку. Клієнт, як і станція, споживає мінімум трафіку. Трафік клієнта-сервера каскадної системи залежить від кількості слухачів такого клієнта.

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

Як станція можуть бути:

• Звичайна програма-аудіоплеєр із спеціальним плагіном-кодеком.

• Спеціалізована програма (наприклад — ICes, EzStream, SAM Broadcaster).

• Апаратний пристрій, що перетворює аналоговий аудіопотік в цифровий.

Існує велика кількість серверів Інтернет-мовлення. Сервери можуть розрізнитися за форматами аудіоданих, наприклад: MP3, Ogg/Vorbis, RealAudio.

Широко поширений сервер Shoutcast компанії Nullsoft, що розроблено спеціально для власного програвача Winamp. Сумісний з Shoutcast сервер Icecast має широку функціональність, розповсюджується вільно і безкоштовно. На відміну від Shoutcast, Icecast здатний передавати кілька аудіопотоків і вимагає менше ресурсів на аудіопотік, частіше оновлюється, підтримує різні формати аудіо і UTF-теги, але він є набагато складнішим в налаштуванні.

Деякі програвачі також підтримують мовлення; наприклад, до JetAudio додається JetCast, що надає можливість коментувати радіопотік за допомогою мікрофону, сайт-статус і чат.

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

Інтернет-телебачення Інтернет-телебачення або online-TV (телебачення міжмережного протоколу) це система, що

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

178

Page 179: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.6. Популярні служби Інтернету. Служби онлайн-мовлення

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

Можливості Інтернет-телебачення:

1. Управління пакетом підписки кожного користувача. 2. Захист змісту телебачення на будь-якому рівні. 3. Трансляція каналів у форматі MPEG-2, MPEG-4. 4. Представлення телепередач. 5. Функція реєстрації телепередач. 6. Пошук минулих телепередач для перегляду. 7. Функція паузи для телеканалу в режимі реального часу. 8. Індивідуальний пакет телеканалів для кожного користувача.

Peer-To-Peer (Р2Р) телебачення

Joost

Одним з широко відомих проектів є Joost, що розроблено творцями Skype і Kazaa Янусом Фрісом і Ніколасом Зенстромом. На відміну від звичайного телебачення, яке передає зображення по радіо і кабельних мережах, в Joost трансляція ведеться на основі пірінгової технології.

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

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

Онлайн-сервіс Joost має ряд конкурентів. Серед них європейський peer-to-peer сервіс Інтернет TV — Babelgum і швейцарський сервіс Zattoo.

Babelgum

Мережу децентралізованого (пірінгового) телемовлення Babelgum було розроблено Сильвіо Скалья (Silvio Scaglia). Тут, відеопотік передається по частинах з багатьох комп'ютерів, а сама програма працює як приймач і передавач. Babelgum бере за основу ідею розробників Joost, але надає користувачу можливості створення своїх каналів на базі існуючого контенту.

Перспективи

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

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

179

Page 180: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.7. Популярні служби Інтернету. Віддалене управління

9.7. Віддалене управління Можливість дистанційної роботи з комп'ютером є зручною і потрібною річчю. В одного

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

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

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

Застосування віддаленого управління

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

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

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

• Для проведення веб-семінарів або дистанційного навчання. Можливість безпосередньо працювати на комп'ютері викладача або ж можливість викладача бачити всі дії учня і допомагати йому.

• За допомогою мобільного комп’ютера (ноутбука, нетбука, планшета IPad) з виходом в Інтернет можна здійснювати віддалене управління домашнім комп'ютером, перевіряти пошту, планувати завдання і користуватися документами та програмами.

Організація віддаленого управління

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

180

Page 181: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.7. Популярні служби Інтернету. Віддалене управління

Для організації віддаленого доступу та управління слід:

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

2. Залишити керований комп'ютер включеним і під’єднаним до мережі для віддаленого управління комп’ютером. Це цілком нормальний стан для сервера, але психологічно незвичний для домашнього комп'ютера. Згодом, його можна вимкнути в любий час, використовуючи віддалене управління (remote dekstop).

3. Використати програму або мережний сервіс на комп'ютері, з якого буде здійснено доступ. Технічно можливим є під’єднання з Інтернет-клубу, з нетбука або з мобільного телефону.

VNC-системи (Virtual Network Computing) VNC система — це система віддаленого доступу до іншого комп'ютера, що використовує

протокол RFB (Remote FrameBuffer). Управління здійснюється шляхом ретрансляції вмісту екрану через комп'ютерну мережу.

Системи VNC є платформонезалежними: VNC-клієнт (VNC viewer), що запущений на одній операційній системі, може підключатися до VNC-сервера, що діє на іншій операційній системі. Реалізація клієнтської і серверної частини існує майже для всіх операційних систем.

До одного VNC-сервера синхронно можуть під’єднуватися кілька клієнтів. Найчастіше VNC системи використовують для технічної підтримки і доступу з дому до комп'ютера на роботі.

Популярними VNC системами є TeamViewer, TightVNC Logmein CrossLoop AMMYY Admin ShowMyPC та інші.

181

Page 182: Комп’ютерні мережі Інтернет178.209.64.54/ivk/Informatika/Books/Windows/km.pdf · 1.1.Відомості про комп’ютерні мережі Сучасний

9.8. Популярні служби Інтернету. Платіжні системи в Інтернеті

9.8. Платіжні системи в Інтернеті Електронні платіжні системи призначені для забезпечення платіжних операцій в мережі

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

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

Електронні чеки - це аналог паперових чеків, які платник, що має гроші на рахунку в банку, може пересилати до одержувача в електронному вигляді.

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

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

До таких пристроїв відносяться:

• Смарт-карти. Банківські платіжні картки з мікропроцесором.

• Програмно-апаратні комплекси. Сервери платіжних систем і комп'ютери користувача.

Для здійснення платежів в мережі Інтернет за допомогою смарт-карти необхідно її підключити через спеціальний зчитуючий пристрій до комп'ютера платника. На даний час ця технологія в країнах СНД поки не знайшла широкого застосування. За кордоном використовуються смарт-карти, наприклад, системи Mondex (емітовані MasterCard).

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

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

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

Існуючі електронні платіжні системи, як правило, забезпечують користувачів веб-інтерфейсом для управління рахунками (гаманцями), але певні платіжні системи вимагають викачати і встановити спеціальну прикладну програму на комп'ютер користувача (наприклад, WebMoney Transfer).

Для здійснення платіжних операцій в Інтернет користувачі з країн СНД можуть використовувати наступні системи:

• Українські: UkrMoney, «Інтернет. Гроші».

• Російські: Web Money Transfer, RuPay, «Яндекс. Гроші».

• Міжнародні: E-Gold, Moneybookers, PayPal.

182