web-design-book-

Завдання:

Створити фавікони для двох сайтів. Використати шрифти Google Fonts на сайті.

Спробувати створити випадаюче меню для сайту. Створити банери самореклами для обох сайтів.

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

1)Що таке анімація у вебдизайні?

2)Який онлайн сервіс допомагає у створені фавіконів?

3)Як вставити шрифт Google Fonts на сайт?

4)Що таке display:inline?

5)Навіщо потрібен фавікон?

10Публiкацiя сайту на хостинзi

Хостинг

Безкоштовні сервіси для публікації

FTP вивантажники

"Парковка" домену

Закінчений по наповненню та дизайну, відтестований на усіх доступних браузерах сайт час викладати у мережу інтернет. Для цього необхідний хостинг – місце на постійно підключених до мережі інтернет комп’ютерах (серверах), де буде зберігатися сайт. Окрім місця для сайту, яке вимірюється у мегабайтах, хостинг може надавати багато інших послуг – підтримка PHP, MySQL, Perl тощо. Для статичного сайту на базі HTML ці додаткові функції не потрібні. Основним параметром у виборі хостингу є розмір дискового простору та вартість. Для сайту візитівки достатньо буде 20-50Мб. Розмір зображень та html-файлів – мізерний, тому для них не потрібно багато місця. Якщо ж на сайті будуть зберігатися файли PDF, звук чи відео, необхідно брати 1Гб простору. Фірма провайдер видасть рахунок на цей хостинг, який необхідно сплатити, або переслати замовнику, щоб він вніс гроші самостійно. Після цього вам видається постійне місце в мережі інтернет на рік. Більшість провайдерів зараз дозволяють безкоштовно спробувати їх хостинг два тижні, перед тим, як ви вирішите платити чи ні. Адреса хостингу буде виглядіти як набір цифр – ІР (накшталт http://140.0.12.1/) з такою адресою користувачам буде важко буде запам’ятати сайт, тому необхідно додатково придбати красиве логічне ім’я для сайту

–домен. Цим займаються окремі компанії, найвідоміша з яких в Україні – imena.ua. При замовленні домену необхідно пам’ятати, що домен .ua, можна отримати тільки якщо назва сайту є зареєстрованою торговою маркою. Такі умови були введені, щоб запобігти кіберсквотінгу – інтернет шахрайству, коли викупаються за безцінь домени з назвами популярних слів (vikna.ua, mobilka.ua), або міжнародних фірм чи організацій (Microsoft.ua, Toyota.ua) з метою їх подальшого перепродажу за великі гроші. Для більшості фірм найоптимальніше буде обирати домен com.ua, для сайтів з інтернет тематикою – net, для організацій - org.ua, інформаційні

–info, освітні – edu. Також можна обрати домен за місцем фірми – in.ua або kiev.ua, zp.ua, od.ua тощо.

В навчальних цілях ми будемо використовувати безкоштовні домени і хостинги. Ніхто не забороняє використовувати їх і для

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

Популярний безкоштовний хостинг - http:// hostinger.com.ua/. Він якісно відрізняється від інших тим, що не ставить свої рекламні банери на ваш сайт, і має гарну службу підтримки. На першій сторінці потрібно натиснути «Замовити зараз» і перейти до реєстрації хостинга. Відразу після реєстрації потрібно зайти на свою пошту і активувати акаунт. Коли акаунт буде активовано, потрібно натиснути на кнопку «Заказати», що знаходиться у лівій колонці під списком тарифу «Безкоштовний». Галочка має стояти напроти «Субдомен»

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

Мал. 46

Сторінка реєстрації сайту на безкоштовному хостинзі hostinger.ru

Мал. 47

Вікно програми Filezilla

спеціальні символи у назві сайту не сприймаються. Бажане ім’я може бути зайняте, тому доведеться провести трохи часу підбираючи назви. Цей безкоштовний хостинг має не дуже зрозумілі домени і сайт буде мати дивне закінчення – mijsait.es.hol чи mijsait.ht.su. Після натиснення кнопки «Створити» пройде процес активізації сайту, після чого можна буде перейти на вкладку «Панель» і обрати свій новостворений сайт. На панелі управління у правій колонці нам потрібно знайти інформацію для роботи з FTP – File Transfer Protocol – мережі у складі інтернету, що використовується для передачі файлів. Для такої роботи існує цілий клас програм – інтернет вивантажники (uploader). Найвідоміші безкоштовні програми – FileZilla та CuteFTP. Заходимо на офіційні сторінки цих програм і завантажуємо файл дистрибутиву та ін сталюємо його на комп’ютер.

Для того, щоб програма зайшла на ваш хостинг їй необхідно вписати таку інформацію у верхній частині вікна біля кнопки «Швидке з’єднання» – хост (шукаємо на панелі ім’я сервера, наприклад, server32.hostinger.com.ua), логін (шукаємо на панелі ім’я користувача, наприклад, u295136292) та пароль. Порт у ftp завжди 21, його можна не вписувати, оскільки він проставляється автоматично. Натиснувши на кнопку швидкого з’єднання, ми повинні потрапити у папки хостингу. Якщо з’єднання не відбувається – уважно перепишіть заново всі три поля (хост, логін, пароль). У критичних випадках (якщо ftp вивантажник не може з’єднатися), можна завантажити сайт і через сторінку панелі управління, знайшовши на ній один з чотирьох файлових менеджери, що вбудовані у hostinger.com.ua. Однак проблемою таких он-лайн сервісів є те, що ви можете перекидати сайт на хостинг по одному файлу. Через ftp вивантажник це відбувається набагато простіше – ви просто

Мал. 48

Прогама Filezilla запитає, що робити з файлами на хостинзі

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

Коли довантажиться останній файл, можна вмикати браузер і переходити на сайт з панелі управління hostinger.com.ua. Посилання на сайт буде у правій колонці напроти слова «Домен». Тепер прийшов час найважливішого тестування. Все, що ідеально працювало на вашому комп’ютері може не працювати на сервері, бо він не виправляє ваших помилок і показує згідно з вимогами веб дизайну. Найпоширеніші помилки такі:

Мал. 49

Центральна сторінка безкоштовного хостинга ho.ua

Адресу і пароль ho.ua висилає на пошту у такому вигляді:

Платний хостинг від компанії mirohost.net висилає данні у листі у такому вигляді:

Кожного разу, відвідуючи всесвітню мережу інтернет і заходячи на сайти, ви використовуєте DNS (Domain Name System або Domain Name Service), але скоріше за все навіть не підозрюєте про це.

Давайте розберемося, що таке DNS і як воно допомагає вам відвідувати ресурси.

DNS - це мережева служба, сервери якої зіставляють текстові доменні імена з цифровим значенням IP-адреси і навпаки. Для полегшення використання інтернету, з огляду на те, що просто неможливо запам’ятати адресу сервера за його IP-адресою (наприклад, 127.0.0.1.), Користувачам були запропоновані літерні позначення назв сайтів (його URL, наприклад, mijsait.com). Однак, робота серверів побудована на цифрових IP-адресах і саме для здійснення зв’язку між людиною і машиною і була створена ця служба. Кожен раз, коли ви набираєте доменне ім’я в браузері, служба DNS вираховує якій IP-адресі відповідає це ім’я і який саме ресурс потрібно вам надати.

Доменні імена реєструють окремо від хостинга, або разом з ним.

Потрібно розуміти, що це окрема від хостинга послуга. Місце знаходження файлів сайту може змінюватися, тоді як доменне ім’я повинно лишатися незмінним. DNS вказується вебмайстром при реєстрації домену. Цей процес полягає у заповненні в панелі управління доменом двох полів dns1 і dns2 IP або URL адресами сервера вашого хостингу. Ці адреси зазвичай видаються відразу після того, як Ви купите хостинг. При зміні хостингу вам доведеться змінити і dns. На сайті вінзаміниться, але, може опинитися в пам’яті деяких серверів, для оновлення якого може знадобитися до 4-х діб. Це означає, що сайт буде ще до 4-х діб доступний за адресою колишнього сервера.

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

Мал. 49

Сторінка «паркування« демену

Створення переадресації з домену на хостинг – називається «парковка». Щоб «припаркувати» домен .tk потрібно ввести адресу свого сайту і пройти нескладну реєстрацію.

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

– прописати ім’я нового домену. За кілька годин центральні сервери усього інтернету обновлять інформацію і сайт стане доступний за новою адресою.

Завдання:

Викласти сайти на хостинг з допомогою програми FileZilla і перевірити їх роботу.

Зареєструвати безкоштовний домен TK для обох сайтів.

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

1)Що таке DNS?

2)Які безкоштовні хостинги ви знаєте?

3)Як «припаркувати« домен?

4)Що таке FTP вивантажник?

5)Чим hostinger.com.ua краще за ho.ua?

11Пошукова оптимiзацiя

Історія пошуку в інтернеті

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

Біла, сіра та чорна оптимізація

Аналіз відвідувачів

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

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

Найвідоміший всесвітній каталог Yahoo! (http://dir.yahoo.com/) починався з експерименту. Його заснували ще в 1994 році аспіранти Стенфордського університету Девід Файло (англ. David Filo) і Джеррі Янг (англ. Jerry Yang) під назвою «Путівник Джеррі по Всесвітній Павутині». Yahoo! вперше вирішила дозволити користувачам самостійно наповнювати каталог і цим дуже розширила свої можливості. Наразі – це найстаріший і найбільший каталог світу. Позитивним у роботі каталогів є те, що тут ми не знайдемо сайтів з сумнівною репутацією, усі сайти будуть відповідти заявленій тематиці, оскільки їх перевіряють реальні люди-редактори. Негативним боком було те, що сайти, які перестали існувати – залишалися у базі каталогу і частина посилань завжди не працювала, оскільки команда каталога не могла оперативно видаляти «биті» посилання зі свого ресурсу. Також каталоги не могли бути об’єктивними, оскільки там були зареєстровані тільки ті сайти, які втрапили на око

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

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

Мал. 51

Схема роботи рейтинга

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

Тривалий час найвідомішим рейтингом на теренах СНД був Rambler (http://top100.rambler.ru/). Його створив російський програміст Дмитро Крюков у 1996 році. Оскільки він був перший – довелося зіштовхнутися з браком російських термінів, наприклад каталоги були названі каталогізаторами, а звичні рубрики «Сім’я», «Дозвілля» тощо. взагалі були відсутні. Сьогодні Rambler набув звичного для усіх вигляду. Пошукова система встановлена на цьому сайті може працювати тільки з трьома мовами (англійська, російська і українська), цим окреслюючи територію своєї роботи.

З українських рейтингів найвідоміший Bigmir (http://top.bigmir.net/), заснований українцем американського походження Джедом Санденом.

Більш демократичним в Україні в плані прийому сайтів до себе вважається Topping (http://www. topping.com.ua/), заснований у 1998 році.

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

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

Однак реєстрація на основних каталогах та рейтингах необхідна, оскільки наявність посилан-

Мал. 52

Сайт Topping

Мал. 53

Схема роботи пошукової системи

ня з солідного сайту – збільшить важливість вашої сторінки у очах роботів, що ведуть пошук в інтернеті паралельно з людьми… Процес реєстрації є типовим для всіх рейтингів. Спочатку на першій сторінці рейтинга необхідно знайти посилання «додати сайт», «веброзробнику», «add site» або подібну. Кожен сайт буде вимагати реєстрації на ньому. Веброзробник заповнює типові поля: назва сайту, URL, опис сайту, ключові слова, рубрика тощо. Після цього вам видається код лічильника. Ви можете обрати його дизайн та колір і вставити у свій сайт. При верстці колонками, всі лічильники зазвичай ставлять у якусь з них, або внизу документа. Наразі є спеціалізовані програми, що реєструють ваш сайт у сотнях каталогів.

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

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

Список результатів може формуватися як за релевантністю так і за датою. Релева́нтність (англ. relevance) — міра відповідності отримуваного результату бажаному. Пошукові системи постійно покращують свої програми, щоб надавати більш якісніші результати пошуку.

Сьогодні найпопулярнішою пошуковою системою є Google (майже 70% усіх пошукових запитів у світі). Засновали Google студенти Стенфордського університету Леррі Пейдж і Сергій Брін. Наразі Гугл щоденно реєструє близько 50 млн. пошукових запитів та індексує більше 8 мільярдів веб-сторінок. Google може знаходити інформацію 101 мовою. Розробники Google задають правила гри пошуковикам усього світу. Наприклад, коли вони ввели мінімалістичний дизайн першої сторінки, слідом за ними це

Мал. 54

Сайт Яндекса