web-design-book-

буде на слово «слон». Якщо нам необхідне точне слово, нам варто його взяти у лапки. Часто наш пошук буде «засмічуватися» інформацією, яку необхідно відсікти. Наприклад шукаючи статті про Андрія Шевченко, велика частина відповідей буде присвячена Тарасу Шевченко. У таких випадках треба перед словом, яке нам не потрібно, поставити мінус. (Андрій Шевченко –Тарас –Григорович)

Люди рідко заходять далі 5тої сторінки пошукових результатів, які видає їм система. Тому потрапити на перші сторінки дуже важливо. Покращення рівня релевантності сайту називають пошуковою оптимізацією, або SEO (англ. search engine optimization) – процес коректування HTML-коду, текстового наповнення, структури сайту, контроль зовнішніх чинників для відповідності вимогам алгоритму пошукових систем, з метою підняття позиції сайту в результатах пошуку в цих системах за певними запитами користувачів. Серед основних заходів виділяють такі:

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

2)Збільшення щільності ключових слів. При розробці сайту визначають за якими ключовими словами будуть шукати сайт. Наприклад, металочерепиця, або вивчити англійську мову абощо. Потім наповнюють текст цими словами. Чим коротший текст на сторінці, тим вища концентрація потрібних слів буде, тому не варто розтягувати сторінки на багато абзаців тексту.

3)Правильне наповнення важливих елементів та атрибутів. Важливими вважаються такі:

•<TITLE> – найцінніший елемент сторінки. Сюди треба внести пошукові фрази, за якими шукатимуть сторінку, наприклад: Встановити металопластикові вікна, Київ

•<H1>-<H6> – заголовки також високо цінуються.

•Підписи до фотографій alt=””

•<META>-теги keywords та description

Це чесна (біла) оптимізація сайту. Оскільки пошукові системи – це комп’ютерні програми, то знаючи їх алгоритм, людина може їх обдурювати. Так з’явилася сіра та чорна оптимізація. З методів сірої оптимізації можна назвати такі:

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

2)Масоване використання ключових слів у важливих елементах коду.

3)Використання елементу заголовка для основного тексту, попередньо зменшивши його за допомогою стилів CSS.

4)Використання прихованого тексту на сторінці (написаний чорним по чорному, або білим по білому).

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

1.Текст повинен бути оригінальним і унікальним, а не поцупленим з інших сайтів.

2.Обсяг тексту на сторінці сайту повинен бути в межах 300 - 500 слів. Розмір сторінки не повинен перевищувати 100 Кб, його необхідно зменшувати в розумних межах, видаляючи неінформативний контент. Оптимальним вважається розмір документа 30-40 Кб.

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

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

5.Кожна окрема сторінка повинна оптимізуватися під певний набір ключових слів, бажано словосполучень з двох слів. Відповідно, на всіх сторінках сайту мають бути різні унікальні заголовки <title>.

6.Щільність ключового слова має бути в рамках 5-6%, хоча для різних пошукових машин, наприклад, для Апорту має сенс трохи завищена щільність - 8%, а для Яндекса оптимальні межі - 4-7,5%. Але в загальному випадку не рекомендують перевищувати поріг у 7-8%, інакше сторінку можуть класифікувати як пошуковий спам і виключити з індексу.

7.А головне правило, як завжди, - контент для відвідувача, а не для пошуковика.

Сьогодні пошукові системи уміють розпізнавати такі махлювання і можуть занести такий сайт у чорні списки. Деякі пошукові системи уже виключили з свого списку <META>-теги, у яких раніше вказува-

лися ключові слова і опис сайту. Нечесні вебдизайнери так часто записували туди популярні пошукові запити (наприклад слово РЕФЕРАТ, ПОРНО тощо), що розробники алгоритмів вирішили відмовитися від практики оцінювати їх для визначення релевантності і зараз вагу мають тільки ті елементи, що відображаються на сторінці для користувача. Однак <META>-теги необхідно вписувати, оскільки вони ще діють на деяких пошукових машинах. Однак потрібно пам’ятати, що інформація у елементах keywords і description повинна бути різна на різних сторінках.

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

Загальні поради від Yandex: http://help.yandex.ru/ webmaster/?id=995298

Google: http://www.google.com.ua/webmasters/docs/faq.html

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

Після реєстрації на сайті http://www.google.com/analytics/ необхідно додати новий профіль вашого сайту Add Website Profile.

На наступній сторінці потрібно у першому запитанні відповісти A single domain (default) (один домен), а на другій вкладці скопіювати код і вставити на кожну сторінку свого сайту між елементами <HEAD> i <BODY>. Далі натискаємо кнопку Save and Finish (Зберегти і закінчити). На початку роботи сайту всі графіки будуть відображати нулі. Згодом вигляд вашого акаунту набуде як на мал.???

Кривою відображаються кількість користувачів за місячний відрізок часу. Перемикнувшись у навігації на користувачів (Visitors) можна детальніше вивчити аудиторію. Відразу нам показують якими браузерами вони користуються:

Клацнувши по посилнню view full report (дивитися повний звіт) можна побачити ці самі цифри у вигляді красивого графіку. Також через меню нам доступні такі звіти.

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

•New vs. Returning – відсоток користувачів, що повернулися на сайт через якийсь час.

•Languages – мови користувачів.

•Visitor Trending – тенденці заходу користувачів

•Visitor Loyalty – графіки користувачів, які заходять більше одного разу

•Browser Capabilities – технічна інформація про операційні ситеми, версії Java та Flash. Безумовно для веб дизайнера цікаво подивитися роздільну здатність моніторів користувачів на вкладці Screen Resolutions

•Network Properties – тут інформація про провайдерів, з чиїх мереж здійснюється запит на ваш сайт.

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

•Наступна група графіків покаже на звідки заходять люди на ваш сайт: Traffic Sources (джерела трафіку)

Мал. 55

Вид акаунту на Google Analytics

•Direct Traffic – прямі заходи (коли користувач набирає адресу сайту у браузері)

•Referring Sites – заходи з сайтів

•Search Engines – з яких пошукових машин заходять на вас.

•Keywords – неймовірно корисна таблиця слів за якими вас знайшли пошукові машини.

•На наступній рубриці Content (Контент) можна дослідити які сторінки відвідують користувачі.

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

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

http://metrika.yandex.ru/list/

На їхньому сайті потрібно клацнути на «Добавить счётчик» і пройти процедуру реєстрації нового сатйу, поставити код на всі сторінки сайту. Отримуємо доступ до таких графіків:

Трафик – показує хто і скільки провів на сайті

Источники – з яких сайтів і по яким пошуковим словам знайшли вашу сторінку.

Содержание – які сторінки відвідав користувач.

•География – країни та міста світу звідки заходили на сайт

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

•Карта – у графічному вигляді як проходять потоки користувачів по сайту

•Компьютеры – технічні данні комп’ютера та браузера.

•Лояльность – повернення користувачів.

•Конструктор – тут можна створити звіт для вашого замовника.

Мал. 56

Вид акаунту на Яндекс Метріка

Завдання:

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

Оптимізувати тексти та вебсторінки для пошукових машин.

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

1)Що таке індексація?

2)Які зареєструватися на рейтинзі?

3)Яка різниця між рейтингом і каталогом?

4)Що таке база данних?

5)Чим відрізняється Google Analytics від Яндекс Метрики?

12Кодування тексту

Історія кодування тексту

Основні кодування у вебдизайні

Переваги Юнікоду

МЕТА-теги для кодування

«проблема CJK» (China, Japan, Korea). Їх мови у сукупності містять 20902 символів. Свого часу в цих країнах піднімалося питання про перехід на латиницю, але було відкинуто, оскільки це загрожувало їх національній ідентичності. Фірма Microsoft розробляє спеціально для цих країн кодування Юнікод, у яке можна було б умістити усі ієрогліфи. Це кодування мало два байти і могло містити як уже зазначалося 65535 символів. Юнікод з того часу оновлювався і зараз ми працюємо з його модифікацією UTF-8 (Unicode Transformation Format – формат трансформації Юнікоду) Для того, щоб не збільшувати розмір принаймні англійських текстів, перші 128 його позицій повністю збігаються з кодуванням ASCII. Це означає, що якщо текст написаний виключно англійською мовою, його розмір у Юнікоді не буде більшим аніж у старій однобайтовій системі кодування. Однак, якщо у тексті є літери, що не потрапили у першопочаткову ASCII – розмір збільшується від 50% і більше. Для текстових документів це не відіграє суттєвої ролі, тоді як для онлайн документів, це важливий чинник, що впливає на швидкість завантаження інформації.

З введенням Юнікоду історія 8ми бітових кодувань не закінчилася. Багато пристроїв працюють у системі 8ми біт. Клавіатура відсилає комп’ютеру інформацію якраз у цьому форматі. Але в програмах текст відображається уже у Юнікоді. Тому на клавіатурі, використовуючи одні і ті самі клавіші, можна набирати як український, так і англійський, і, навіть, арабський текст. Все залежить від того, яку ми оберемо мову при наборі. Передача текстової інформації у мережі інтернет також здійснюється переважно за допомогою всього 8ми біт, а наші браузери працюють на Юнікоді. Щоб програма розуміла які символи ASCII відповідають символам UTF-8, потрібні вказати, яким кодуванням набраний текст. Окрім уже відомої нам 866-DOS зараз використовують і інші кодування, що базуються на 8ми бітах. Найчастіше для позначення кирилиці використовується windows-1251, оскільки більшість користувачів використовують операційну систему Windows. Щоб браузери не плуталися у тому, які кодування використовувати про розшифровці тексту з сайту, це протисується у метатезi:

<META http-equiv=”Content-Type” content=”text/html; charset=windows-1251”>

Однак існують і інші операційні системи, які використовують інше кодування аніж 866-DOS та windows-1251. Компанія Apple розробила власне кодування, яке використовується в інтернеті дуже рідко – MacCyrillic. Більшість серверів інтернету використовують не Windows, а операційні системи, що ведуть свою історію від програми Unix. Вони використовують КОІ-8 (код обміну інформацією, 8 бітів) - восьмибітова ASCII-сумісна кодова таблиця, розроблена для кодування букв кириличних алфавітів. Розробники КОІ-8 помістили символи російського алфавіту у верхній частині кодової таблиці таким чином, що позиції символів відповідають їх фонетичним аналогам в англійському алфавіті в нижній частині таблиці. Це означає, що якщо в тексті, написаному в КОІ-8,

Мал. 56

Сайт з «кроказябрами«