Конспект уроку №4
СТВОРЕННЯ ВЕБ САЙТУ
Створення сайту завжди починається з ідеї.
Але до її реалізації існують усталені етапи для того, щоб створити працездатний якісний сайт.
1. Ідея
2. Розробка структури сайту
3. Розробка оформлення сайту
4. Кодинг, програмування
5. Тестування і доопрацювання
6. Просування, реклама
7. Подальша підтримка і оновлення
Перші п'ять етапів відносяться безпосередньо до створення сайту, останні потрібні для подальшого існування сайту.
ІДЕЯ
Перш, ніж приступити до роботи над сайтом, потрібно чітко уявляти, що в результаті має бути, а також перспективи розвитку сайту.
Отже, потрібно вирішити:
• Навіщо створювати сайт (чи потрібно це взагалі) • Про що буде сайт (тематика) • Що це буде (домашня сторінка, портал, або щось ще) • Відмінність від сайтів з такою ж тематикою (якщо це не домашня сторінка) • Яка буде аудиторія сайту (стать, вік, інтереси і т.д.) • Якого роду сервіси будуть присутні на сайті (форум, каталог, пошта і т.д.) • Плани на найближче майбутнє • Плани подальшого розвитку (перспективи)
та багато інших подібних питань які слід вирішити перш, ніж братися за реалізацію. Продумування: що, як навіщо і чому - найважливіший етап в створенні сайту.
Головним тут є хороша ідея, а інше додається під час роботи.
Тільки після того, як в думці, а краще і на папері, оформиться чіткий образ того, яким повинен бути сайт, можна приступати до інших етапів. Певні етапи розробки сайту можуть проводитися паралельно (особливо, якщо працює над створенням сайту не одна людина, а команда в декілька чоловік).
РОЗРОБКА СТРУКТУРИ
Щоб створити сайт потрібний план. Чітко розписаний, що, де буде розташовано.
План цей малюється на папері, і називається це розробка структури сайту.
Структуру сайту можна умовно розділити на зовнішню і внутрішню.
ВНУТРІШНЯ СТРУКТУРА САЙТУ.
Залежить від того, яка інформація буде розміщена, які є матеріали. Слід вирішити, які будуть на сайті розділи, підрозділи, тобто скласти дерево сайту. Розглянемо розробку внутрішньої структури на прикладі домашньої сторінки. Яку інформацію можна на ній розмістити? Розповідь про себе (на головній сторінці), свої фотографії, контактну інформацію - це як мінімум. Отже, внутрішня структура домашньої сторіночки буде такою:
- Головна сторінка (розповідь про себе)
- Фотографії - Контактна інформацію (e-mail)
Можна створити складнішу внутрішню структуру. Нехай в розробника є багато фотографій, тому має сенс розгалузити розділ Фотографії на декілька підрозділів. Також якщо важливо отримувати
відгуки від відвідувачів, тому передбачається наявність гостьової книги. Крім того, якщо розробник є людиною творчою,
тому на сайті може додатися розділ Моя Творчість.
- Головна сторінка (розповідь про себе) - Фотографії - Влітку - В інституті - Мої друзі - Про мене
- Моя Творчість
- Вірші
- Музика
- Гостьова книга - Контактна інформацію (e-mail)
Коли перед очима такий план внутрішньої структури, можна сміливо продовжувати роботу над сайтом, не боячись чогось забути або упустити.
ЗОВНІШНЯ СТРУКТУРА
Це розташування основних важливих елементів на кожній сторінці. Треба вирішити, де і як буде розташовано меню, можливо, пошук, основний зміст, певні анонси про нові розділи сайту,
оновлення, лічильник та банери, якщо вони передбачені на сайті. Для прикладу візьмемо типову зовнішню структуру сайту:
Шапка сайту
Логотип Банер Пошук Меню Основний текст Новини Додаткова інформація Банер Інформація про розробника Контактні адреси та телефони Лічильники
При розробці зовнішньої і внутрішньої структури орієнтуються на те, щоб в майбутньому відвідувачеві
було легко орієнтуватися на сайті, щоб легко знаходилася важлива і потрібна інформація.
Тому, перш ніж братися за розробку структури сайту, потрібно вивчити ресурси з подібною тематикою і подивитися, як вирішено це завдання там.
ОФОРМЛЕННЯ САЙТУ
Оформлення або дизайн – це зовнішній вигляд сайту. Перше враження від сайту є дуже важливим, бо від нього залежить чи залишиться відвідувач, чи знайомитиметься з інформацією, яку йому пропонують,
або закриє вікно з цим сайтом і назавжди забуде про його існування.
Оформлення сайту підказує відвідувачеві, куди він потрапив: чи це є корпоративний сайт певної компанії,
або інформаційний портал, або літературний сайт, або щось ще. Оформлення допомагає відвідувачеві орієнтуватися по сайту,
а може, і навпаки, збити відвідувача так, що навіть при добре розробленій структурі відвідувачеві важко буде зорієнтуватися. Від оформлення залежить багато що - візуальна інформація є не менш важливою, ніж текстова, яка потім наповнить сайт. Не вірте, що дизайн – це справа смаку: що хочу, то і зроблю. Це не правда. Дизайн – це ціла наука. Щоб опанувати їй, доведеться ознайомитися з такими поняттями, як колористика (теорія кольору), композиція, шрифт, і багатьма іншими. Дизайн підпорядкований усталеним законам і правилам, і дизайн сайту - не виключення. Крім теорії потрібно буде також опанувати багатьма програмами, для втілення задумок в життя. Оформлення сайтів на перевірку виявляється складною наукою: багато чого треба вміти і багато чого знати, щоб створити якісний дизайн для сайту. КОДИНГ І ПРОГРАМУВАННЯ Тепер маємо оболонку (макет зовнішнього вигляду сайту) і план дій (структуру). Але, що стоїть за оболонкою? А за оболонкою знаходиться каркас, на якому ця оболонка тримається, це є код сторінки. Він відповідає за те, як в певній послідовності на сторінці відображається текст і картинки. Як правило, код пишеться на мові розмітки текстових документів HTML. HTML достатньо простий, і практично кожен користувач може освоїти його, щоб створювати свої не дуже складні веб-сайти. Також не є складними для вивчення таблиці каскадних стилів – CSS – додатковий засіб, за допомогою якого можна керувати вмістом сторінок. CSS, по суті, доповнює HTML, розширюючи його можливості. Але HTML і CSS відповідають лише за розмітку зовнішнього вигляду документа (сторінки), а для того, щоб реалізувати складніші речі, наприклад, на зразок гостьової книги, або пошуку по сайту, або форуму, потрібні вже інші засоби. Потрібно знати мови програмування для веб – PERL, PHP, ASP або інші. За допомогою мов веб-програмування пишуться програми – скрипти. Скрипти є певним послідовним набором команд, для виконання певних дій або операцій (наприклад, щоб запис, що введений відвідувачем, додався у гостьову книгу). Отже, якщо HTML і CSS - це каркас на якому все тримається, то програми-скрипти (на PERL, PHP, ASP) - це механізм, розташований усередині цього каркаса. Веб-програмування вже складніший для освоєння предмет, ніж HTML або CSS, проте, тут знову ж таки немає нічого складного, адже є готові рішення, так звані готові програми-скрипти, які розповсюджуються в Інтернет, як на безкоштовній, так і платній основі. Кодинг і програмування є також достатньо складним етапом в створенні сайту. Від того, хто розробляє програмну начинку сайту, і пише код сайту, також як від дизайнера, потрібні хороші, тверді знання і досвід, для створення якісного комерційного і серйозного проекту. Проте, якщо йдеться про любительські проекти і домашні сторінки, то вимоги тут пом’якшуються. ТЕСТУВАННЯ І ДООПРАЦЮВАННЯ Коли сайт готовий, його викладають в мережу (Інтернет). Для цього потрібно зареєструвати для сайту доменне ім'я (адреса), і визначитися з хостингом (місце на сервері провайдера, де буде знаходитися сторінка). Процедура розміщення сайту в Інтернет не дуже складна, дізнатися все про це можна в Інтернеті. Коли сайт розміщено в Інтернеті, то перш, ніж його просувати і рекламувати, слід перевірити сайт на працездатність. Можливо, якісь скрипти виконуються з помилками. Можливо, десь пропущена важлива і цінна інформація або потрібна картинка. Після того, як протестовано і вивірено сайт на працездатність, слід попросити людей, що не брали участь в розробці, ще раз протестувати і оглянути ваш сайт. Можливо, що не помічено певних недоліків, які може побачити свіжим поглядом, людина, що не брала участь в розробці. Також можна провести дослідження за допомогою опитування: що подобається або не подобається відвідувачам на сайті, чи зручна навігація і т.д. Даний пункт в житті сайту достатньо важливий: здавалося б, подумаєш – дрібниці. Проте коли таких дрібниць накопичується багато - це дуже погано. Що зробить відвідувач, якщо не зможе додати запис у форум, або якщо стаття, що цікавить його, буде не доступна, внаслідок того, що до неї неправильно прописали шлях? Правильно, він може піти і більше не повернутися. ПРОСУВАННЯ, РЕКЛАМА Цей етап доведеться виконувати з певною періодичністю, щоб на сайт приходили нові відвідувачі. Кількість і постійний потік відвідувачів на сайт не залежить цілком від реклами, основну роль все ж таки грає наявність цікавої для певної групи людей інформації, заради якої вони і відвідуватимуть ресурс. Перш, ніж зайнятися рекламою сайту, варто подумати – а чи потрібно це? Якщо потрібно, то навіщо. Що зміниться від того, що на сайті стане десятком відвідувачів більше? Якщо це все-таки потрібно, слід продумати, яка аудиторія зацікавлена у ресурсі (вік, стать, професійна зайнятість цієї аудиторії – наприклад, програмісти вони або вчителі, люди похилого віку або діти). Після визначення аудиторії, треба з’ясувати її уподобання: які сайти відвідує, які журнали читає, і т.д. Там слід розставити посилання: розмістити рекламу в журналі або газеті, на потрібних сайтах. Краще всього дослідження аудиторії і рекламу сайту довірити професіоналам, які ретельно продумають рекламну кампанію, і в них краще вийде виконати поставлене завдання в рамках бюджету. Адже реклама теж вимагає певних знань і грошових вкладень, це не такий вже простий етап, як може показатися спочатку. З безкоштовних шляхів рекламування ресурсу: каталоги, пошукові системи, банерообмінні мережі, а також схвальні відгуки про сайт на сторінках інших людей. На жаль, безкоштовно розкрутити свій ресурс дещо важко, але все-таки можна, головне запастися терпінням, адже на безкоштовне просування ресурсу знадобиться дуже багато часу і сил. Природно, є і інші безкоштовні технології просування сайту, як спам або накрутка – але хотілося б застерегти від використання даних методів. Ефект від них тимчасовий, дані способи є чорними, тобто такі способи не вітаються рейтинговими і пошуковими системами і можуть спричинити виключення сайту з рейтингів і блокування в пошукових системах. Докладніше про методи просування і реклами сайту можна прочитати в Інтернет. ПОДАЛЬША ПІДТРИМКА І ОНОВЛЕННЯ Яким би хорошим не був сайт, його слід періодично поповнювати новою інформацією, щоб не втратити відвідувача. Підтримкою і оновленням комерційних сайтів, як правило, займається теж фахівець: веб-розробник. З одного боку це універсал, від якого потрібні знання як працювати з графікою (поверхневе), хороші знання в області кодингу (html, css) і знання мов програмування (поверхневе); з іншого боку веб-розробник не має глибоких знань ні в області програмування, ні в області дизайну, тобто не може замінити ні дизайнера, ні програміста при розробці серйозного комерційного ресурсу. Підтримкою ж особистих проектів доведеться займатися самостійно, правда, з часом, якщо ресурс хороший, можуть з'явиться помічники-добровольці. Але, відвідувача цікавить не лише нова інформація. Важливо також підтримувати зв'язок з відвідувачами: спілкування на форумі або в гостьовій книзі, які розташовуються на сайті, по можливості, відповідати на всі листи відвідувачів. При розвитку ресурсу іноді необхідно орієнтуватися на думку відвідувача: запитувати у відвідувачів, в яких матеріалах вони зацікавлені, що їм хотілося б побачити на сайті найближчим часом. Опитування можуть допомогти в розвитку сайту. Потрібно відстежувати за сайтами з подібною тематикою, і прагнути бути на належному рівні. Відстеження за тенденціями в дизайні і новими технологіями: те, що було добре декілька років тому, сьогодні може виявитися застарілим і безглуздим, можливо прийде такий момент, коли оформлення сайту доведеться змінити, і його начинку також. ПРОГРАМИ, ЩО ПОТРІБНІ ДЛЯ WEB-МАСТЕРИНГУ Для виготовлення професійних сторінок доведеться вивчити декілька професійних програм. ВІЗУАЛЬНІ РЕДАКТОРИ Дозволяють швидко розробляти web-сторінки і корегувати вже написані, але з ними потрібно бути обережними, оскільки, завдяки саме їм, сторінка може погано відображатися в браузері. Найвідомішим є DremWiever, але зрештою можна використовувати те, що більше подобається. Часто згодом доводиться вручну виправляти код, що був згенерований даними програмами. ПРОГРАМИ ОБРОБКИ РАСТРОВОЇ ГРАФІКИ Це одні з найважливіших програм, які доведеться освоїти. Вона нададуть змогу веб-розробнику здійснити: • Сканування фотографій; • Корекція відсканованих і готових фотографій, зокрема - тонова і колірна корекція; • Ретуш фотографій; • Розуміння відмінностей у форматах графічних файлів; • Грамотне використання фільтрів; Як конкретні програми можна привести наступні: • Adobe PhotoShop - дана програма є лідером в області графічних програм такого роду. • Adobe ImageReady - підтримує фільтри від Adobe PhotoShop і є незамінною для створення анімованих Gif-зображень. Зрештою, ідеальних редакторів немає, деякі краще роблять одне, деякі – інше, тому для складніших або специфічних завдань можна використовувати інші програми ПРОГРАМИ ОБРОБКИ ВЕКТОРНОЇ ГРАФІКИ Ще одні з важливих для дизайнера програм. Дозволяють створювати з нуля або з використанням клипартів різні логотипи, кнопки, ефектні написи і т.п. речі. Принципи векторних редакторів сильно відрізняються від растрових, тому освоювати їх доведеться окремо. Але, освоївши їх, можна виготовляти фірмові візитки, бланки, брошури. Типовими представниками даного класу є Corel DRAW і Adobe Illustrator - обидва є лідерами в своїх областях і, відповідно, мають останні досягнення в області векторної графіки. На противагу ним можна порадити програму Corel Xara. Дана програма, на відміну від двох попередніх, є швидкою і маленькою, але деякі ефекти і дії, що є доступними в інших програмах, в ній зробити або важко, або взагалі неможливо. ПРОГРАМИ ПЕРЕГЛЯДАННЯ WEB-СТОРІНОК Це браузери - в даний час популярними є три браузера - це Microsoft Internet Explorer, Opera та Mozilla FireFox. Для контролю зовнішнього вигляду сторінок доведеться скористатися власне ними. Якісна веб-сторінка повинна однаково виглядати в будь-якому з цих браузерів. ПРОСТИЙ ТЕКСТОВИЙ РЕДАКТОР Знадобиться для ручного виправлення і додавання HTML-коду, оскільки існуючі візуальні редактори не можуть повністю контролювати процес створення web-сторінки. Як приклад підійде звичайний Блокнот із стандартного постачання Windows або один HTML-редакторів, які мають вбудовані команди на перевірку правильності тегів і структури документів. ТЕКСТОВИЙ ПРОЦЕСОР Потрібен для набору тексту, перевірки орфографії і виправлення помилок в розпізнаних текстах. Як приклад - звичайний Microsoft Word. ПРОГРАМИ РОЗПІЗНАВАННЯ ТЕКСТУ Можуть заощадити масу часу, позбавляючи від ручного набору надрукованих текстів. Найпоширенішою програмою є Fine Reader, що розпізнає багато мов, має дружній інтерфейс і забезпечує ефективну та зручну роботу. СПЕЦІАЛІЗОВАНІ ПРОГРАМИ Дозволять виконати певні ефекти і справитися з такими завданнями, які іншими способами не можливо виконати. • Ulead GIF Animator – програма для створення анімованих GIF-зображень. Має потужні засоби оптимізації. • Фільтри для Adobe PhotoShop - їх кількість просто величезна, але реально знадобиться небагато. Вони здатні істотно підвищити роботу і двома-трьома натисненнями створити вражаючі ефекти. • Macromedia Flash - стандарт для використання в web анімованих зображень. Має власне середовище розробки і дозволяє створювати вражаючу векторну анімацію. • 3D-программы – створення тривимірних композицій і експортування в графічні формати, що застосовуються у веб. Як приклад – 3D Studio Max. • Програми для обробки звуку - можуть знадобитися, якщо того вимагає сторінка. Це програми взагалі окремого класу, але для простої обробки звуку, наприклад, підійде CoolEdit. Це далеко не повний перелік програм для створення WEB-сторінок. Не всі з них, звичайно, потрібно відразу ж мати, щоб почати писати свої сторінки. Для початку достатнього певного візуального редактора, а вже у міру накопичення досвіду долучаються і інші програми. МОВА РОЗМІТКИ ГІПЕРТЕКСТОВИХ СТОРІНОК HTML Для створення Web-документів застосовують мову розмітки гіпертекстових сторінок (HTML – Hypertext Markup Language). Вона визначає синтаксис і розміщення спеціальних операторів (тегів), які не виводяться на екран, але вказують браузеру, як відображати вміст документа. Вона також використовується для створення посилань на інші документи, що знаходяться в мережі Інтернет. Стандарт HTML і інші стандарти для Web розроблені під керівництвом консорціуму W3C (World Wide Web Consortium). Стандарти, специфікації і проекти нових пропозицій можна знайти на сайті http://www.3w.org/. В даний час діє специфікація HTML 4.0, підтримка якої з боку основних браузерів постійно зростає. ІНСТРУМЕНТАРІЙ РЕДАГУВАННЯ HTML Документи HTML є звичайними текстовими ASCII-файлами. Це означає, що для їх створення можна використовувати будь-який текстовий редактор, навіть з мінімальними можливостями. Існують засоби редагування, що розроблені спеціально для написання HTML. Вони дозволяють економити час, оскільки містять клавіші швидкого доступу для виконання операцій, що повторюються, наприклад, завдання початкових налаштувань документів, таблиць або просто застосування стилів до тексту. Останні роки характеризуються різким зростанням ринку HTML-редакторів класу WYSIWYG (What You See Is What You Get – що бачиш, то і отримаєш). Вони мають графічні інтерфейси, які роблять написання HTML більше схожим на програму редагування текстів або розмітки сторінки. Первинною метою цих програм було звільнення користувачів від тегів HTML. Сьогодні їх значущість зросла, оскільки вони підвищують ефективність і рівень автоматизації створення HTML-документів, забезпечуючи в той же час доступ до початкового тексту HTML. ТЕГИ HTML Документ HTML містить текст (вміст сторінки) і вбудовані теги – інструкціями про структуру, зовнішній вигляд і функцію вмісту. Документ HTML розділяється на дві основні частини: заголовок – head і тіло – body. Заголовок містить довідкові відомості про документ, як його назва та інша службова інформація. У тілі міститься власне сам документ (те, що виводиться у вікні браузера). Кожен тег складається з імені, за яким може слідувати перелік необов'язкових атрибутів, всі вони знаходяться всередині кутових дужок < >. Вміст дужок ніколи не виводиться у вікні браузера. Ім'я тега, як правило, є абревіатурою його функції, що полегшує його запам'ятовування. Атрибути є властивостями, які розширюють або уточнюють функцію тега. Як правило, ім'я і атрибути всередині тега не чутливі до регістра. Тег <BODY BGCOLOR=white> працюватиме так само, як <body bgcolor=white>. Проте значення певних атрибутів можуть бути чутливі до регістра. Це відноситься, зокрема, до імен файлів і URL. Контейнери Більшість тегів є контейнерами. Це означає, що в них є початковий (що відкриває або стартовий) і кінцевий (що закриває) теги. Текст, що знаходиться між тегами, виконуватиме інструкції, що містяться в них. Наприклад: The weather is gorgeoustoday. Результат: The weather is gorgeous today. Кінцевий тег має те ж ім'я, що і початковий, але перед ним знаходиться слеш (/). Його можна розглядати як "вимикач" тега. Кінцевий тег ніколи не містить атрибутів. Автономні теги
Деякі теги не мають кінцевих елементів. Одним з них є тег зображення <img>, він просто розміщує графіку в текст сторінки. Інші автономні теги – це розрив рядка (), горизонтальна лінія (
) і теги, що містять інформацію про документ і не впливають на вміст, що виводиться на екран, такі як <meta> і <base>.
Атрибути
Атрибути додаються в тег для розширення або модифікації його дій. До одного тегу можна додати декілька атрибутів. Якщо атрибути тега зазначені після імені тега, вони розділяються одним або декількома пропусками. Порядок проходження не важливий. Більшість атрибутів мають значення, які слідують за знаком рівності (=), що знаходиться після імені атрибуту. Довжина значень обмежена 1024 символами. Значення можуть бути чутливі до регістра. Іноді значення повинні знаходитися в лапках (подвійних або одинарних).
Правила запису значення наступні:
• якщо значення є одним словом або числом і складається лише з літер (a-z), цифр (0-9) і спеціальних символів (точка <.> або дефіс <->), то можна помістити його після знаку рівності без лапок;
• якщо значення містить декілька слів, розділених комами або пропусками, або містить спеціальні символи, що є відмінними від крапки або дефіса, тоді його необхідно помістити в лапки. Наприклад, URL вимагають лапок, бо вони містять символи "://". Також лапки необхідні при завданні значень кольорів з використанням формату "#rrggbb".
Якщо немає впевненості, чи варто використовувати лапки, тоді слід їх застосовувати завжди для всіх значень.
У теги HTML можуть поміщатися інші HTML-теги для здійснення дії декількох тегів на один елемент. Це називається вкладенням, і, що б правильно його здійснити, початковий і кінцеві оператори вкладеного тега повинні обов'язково знаходитися між початковим та кінцевим оператори зовнішнього тега, наприклад:
The Weather is gorgeous today.
Результат: The weather is gorgeous today.
Найпоширенішою помилкою є перекриття тегов. Деякі браузери лояльно ставляться до того, але, багато з низ не дозволяють порушувати це правило, тому важливо розміщувати теги правильно. Наступний приклад показує невірне вкладення тегов (відмітьте, що тег <В> закривається перед закриттям ):
The weather is <I>gorgeoustoday – дана інформація, що ігнорується браузерами.
ІНФОРМАЦІЯ, ЩО ІГНОРУЄТЬСЯ БРАУЗЕРАМИ
Нижче наведена інформація, що міститься в документі HTML, включаючи певні теги, яка ігноруватиметься при перегляді браузерами.
• розриви рядків. Символи кінця рядків в документі HTML ігноруються. Текст і елементи переноситимуться до тих пір, поки в потоці тексту документа не зустрінеться тег <р> або
. Розриви рядків виводяться, якщо текст позначений як текст із заданим форматом (<рrе>);
• символи табуляції і множинні пробіли. Коли браузер зустрічає в документі HTML символ табуляції і декілька послідовних символів пробілу, він виводить лише один пробіл. Таким чином, якщо документ містить: "far, far away", браузер виведе "far, far away". Додаткові пробіли можна додати в текстовий потік, використовуючи символ нерозривного пробілу ( ). Крім того, всі пробіли виводяться, якщо текст є форматованим (знаходиться в тегах <рrе>);
• множинні <р>-теги. Послідовність тегов <р>, що не заповнені текстом, всіма браузерами інтерпретується як надмірна. Вміст виводитиметься так, як якби був тільки один тег <р>. Більшість браузерів виведуть декілька тегов
у вигляді декількох переходів на новий рядок;
• нерозпізнані теги. Якщо браузер не розуміє тег або той був невірно заданий, то браузер його просто ігнорує. Залежно від тега і браузера це може привести до різних результатів. Або браузер нічого не виведе, або він може відобразити вміст тега як звичайний текст;
• текст в коментарях. Браузеры не виводять текст між спеціальними елементами <! і ->, які використовуються для позначення коментарів. Після символів початку коментарю і перед символами закінчення обов'язково повинен знаходитися пробіл. У сам коментар можна поміщати практично все. Коментарі не можна вкладати. У Microsoft Internet Explorer є фірмовий тег, що позначає коментарі <comment>...</comment>. Проте, він не підтримується іншими браузерами.
ЕФЕКТИВНІ ТЕГИ ДЛЯ ОПТИМІЗАЦІЇ САЙТУ
Мета-теги є командами для web-сервера або браузера, які не впливають на відображення сторінки. З погляду оптимізації мета-теги є важливими об'єктами, правильна робота з якими – запорука успіху при створенні ефективного сайту.
ОПТИМІЗАЦІЯ РОЗДІЛУ HEAD
Частина початкового коду, що знаходиться в верхній частині сторінки, відноситься до найважливіших зон, які повинні знаходитися під пильною увагою оптимізатора. Максимальна простота коду є одним їх найважливіших чинників, який повинен враховувати оптимізатор при роботі з розділом Head.
Більшість неоптимізованих сайтів складаються із сторінок, у яких даний розділ захаращений не істотною для пошукової системи інформацією, що заважає ефективній роботі спайдерів. Їм доводиться розгрібати купу сміття, щоб докопатися до ключових слів, які розташовані в найважливіших тегах, наприклад, в Title. Проте, як показує практика, в неоптимізованих сторінок найбільш важливі теги розташовуються ближче до кінця розділу заголовка.
Особливо грішать надмірним кодом розділу Head сторінки, що створені у візуальних HTML-редакторах. Структура документа, що автоматично генерується, поповнюється тегами, які оголошують про використаний програмний засіб, містять різні коментарі, інформацію про автора або організацію, до якої належить сайт (тег Copyright), тощо. Досить часто розробники сторінок додають в розділ Head мета-теги, що чітко регламентують роботу індексуючого павука з даною сторінкою (Robots (управління поведінкою пошукових роботів на сторінці), Revisit (управління повторними відвідинами сторінки роботом) і ін. Проте сучасні роботи часто не прислухаються до виписаних рекомендацій і сканують мережні ресурси за своїми методиками.
Необхідно ретельно обґрунтовувати наявність на початку початкового коду сторінки кожного тегу та уникати тих тегів, які жодним чином не впливають на результативність оптимізації сайту. «Зайві» теги не привносять на сторінку нічого корисного, оскільки не можуть містити ключових фраз і, відповідно, не грають ніякої ролі в підвищенні релевантності сторінки.
Отже, розділ Head сторінки не повинен містити тегів, що не несуть інформаційного навантаження для пошукової системи. На перших позиціях повинні бути розміщені елементи, вміст яких підвищує релевантність сторінки.
ТЕГ ЗАГОЛОВКУ СТОРІНКИ TITLE
Вміст тегу Title є найважливішим чинником, що враховується при розрахунку релевантності сторінки. Він має розташовуватися якомога ближче до початку сторінки. Головне правило при оптимізації тегів заголовків сторінок полягає в тому, що кожна сторінка повинна мати свій унікальний Title. Оптимальна довжина вмісту тега – до 80 символів. Довший текст заголовка не приносить користі для відвідувача сайту, оскільки він продовжується за видиму область вікна браузера, а також може бути сприйнятий пошуковою машиною як спам.
Ключові слова необхідно писати на самому початку заголовка і старатися їх не повторювати. Іноді дублювання ключових слів все ж таки допускається за умови, що елементи фрази, що повторюються, не слідують один за одним.
Слова, що вказані в тегу Title, відображаються у вигляді посилання на сторінці результатів пошуку, натиснувши на яку, користувачі переходять з пошукової системи на сторінку сайту. Тому вміст тега заголовка сторінки повинен бути ємким та інформативним.
Тег заголовка необхідно писати для сторінки тільки один раз. Метод використання декількох тегів Title з метою збільшення кількості ключових слів, що доступні для пошуковика, відноситься до спамерських методів оптимізації.
Не слід використовувати в тегу слова, повністю написані прописними буквами, якщо в цьому немає особливої необхідності. Якщо в тексті використовуються розділові знаки, то вони повинні бути притиснуті до слова праворуч від нього, після чого повинен стояти пропуск. Слова, набрані в тегу Title через п р про б е л, сприймаються пошуковою системою як група незв'язних символів.
Отже, по значущості для визначення позиції сторінки в результатах пошуку тег Title грає найважливішу роль безпосередньо після оптимізації вмісту самої сторінки.
МЕТА ТЕГИ
Мета теги використовуються для опису властивостей HTML документа і повинні знаходиться в рамках тегу HEAD. Якщо в документі використовується тег TITLE, то мета теги рекомендується вставляти в документ після нього.
Мета теги мають широку функціональну спрямованість, але багато що ще не стандартизованим або знаходиться на стадії розробки.
Мета теги можуть ідентифікувати авторство HTML документа, його адресу і як часто він оновлюється. Пошукові системи використовують мета теги для індексації і формування заголовків HTML документів.
Мета теги можуть впливати на режим відображення HTML документів, хоча самі на екран не виводяться.
Далі будуть описані мета теги, прийняті більшістю постачальників послуг і програм для мережі Інтернет.
Мета теги поділяються на дві групи: NAME і HTTP-EQUIV.
Мета теги типа NAME містять текстову інформацію про документ, його автора і певні рекомендації для пошукових машин. Наприклад: Robots, Description, Keywords, Author, Copyright.
Мета теги типа HTTP-EQUIV впливають на формування заголовка документа і визначають режим його обробки.
ОПИС МЕТА ТЕГІВ ГРУПИ NAME:
• Мета тег Author
• Мета тег Copyright
• Мета тег Description
• Мета тег Document-state
• Мета тег Generator
• Мета тег Keywords
• Мета тeг Resource-type
• Мета тeг Revisit
• Мета тeг Robots
• Мета тeг Subject
• Мета тeг URL
AUTHOR, COPYRIGHT
Ці теги не відбиваються браузерами, але обробляються деякими пошуковими машинами. Як правило, немає необхідності використовувати ці теги одночасно. В більшості випадків достатньо одного інформаційного тега, що дозволяє ідентифікувати автора або приналежність документа.
Тег Author повинен містити ім'я автора, якщо сайт належить організації, має сенс використовувати тег Copyright. Інформація обов'язково повинна полягати в лапки, наприклад
<META Name= Author content="Іванів Петро">.
Додатково інформаційні теги можуть містити атрибут "Lang", що вказують мову, на якій написано значення властивості.
Приклад: <META Name= Author Lang="ua" content=" Іванів Петро ">.
DESCRIPTION
Вміст мета-тегу є коротким описом сторінки сайту. Відношення пошукових систем до даного тегу є різним і іноді непередбачуваним. Тому, щоб підвищити рейтинг сайту, заповнювати цей тег потрібно завжди. При цьому найбільш важливі ключові слова треба розташовувати якомога ближче один до одного, але не поряд.
Досить часто тег Description заповнюється текстовою послідовністю, що складається тільки з ключових слів. Необхідно уникати подібної надмірності і прагнути формувати вміст описового тега у вигляді правильної читабельної пропозиції. Окрім того, треба не забувати про те, що ключові слова, під які оптимізується як мета-тег Description, так і інші елементи HTML-коду, обов'язково повинні з відповідною частотою зустрічатися безпосередньо в тексті сторінки.
Для кожної сторінки бажано складати власний текст тегу опису з врахуванням тих, ключових слів, під які вона оптимізується.
Пошукові системи встановлюють різні норми по обмеженню довжини цього тега і залежно від цього сприймають тільки задану кількість символів. Оптимальна довжина оптимізованого тегу опису не повинна перевищувати 150 символів.
Деякі пошуковики аналізують вміст цього тегу і враховують наявність в ньому ключових слів при розрахунку релевантності сторінки, інші – ні. Першу категорію пошуковиків також можна розділити на ті, які виводять вміст тега опису в результатах пошуку відразу після тегу заголовка сторінки Title, і ті, які беруть як опис перші 150-200 (до 256) символів тексту, що відображено на сторінці. Не рекомендується застосовувати досить поширений метод копіювання в мета-тег Description вміст тегу заголовка Title, а також використовувати теги Description і/або Title як ще один тег Keywords.
Основною функцією тегу опису - попереднє інформування користувача про те, чому присвячена сторінка, яка видається як результат пошуку. Тому текст тегу повинен бути коротким, ясним, не мати яскраво виражений рекламний характер, оскільки найчастіше саме за цією інформацією користувач вирішує, переходити на дану сторінку чи ні.
Приклад: <META Name="Description" content= ". . .">
DOCUMENT-STATE
Мета тег Document-state - призначений для управління індексацією пошукових роботів. Може мати два значення:
• Static - Немає необхідності індексувати цю сторінку в майбутньому.
• Dynamic - Індексувати цю сторінку регулярно (за умовчанням).
Режим "Static" призначений для сторінок, які не міняються в принципі. Якщо зміст вашої сторінки періодично міняється, то використовувати цей тег необов'язково.
Приклад: <META Name="Document-state" content ="Dynamic">
GENERATOR
Мета тег Generator - це всього лише один з тегів, що широко використовуються генераторами HTML коду в своїх цілях. Він зазначає редактор, за допомогою якого було створено сторінку. Як правило, для власника сайту ці теги не несуть корисного навантаження.
<META Name=”Generator” Content=”Microsoft Notepad”>
KEYWORDS
Мета тег Keywords використовується пошуковими машинами для оцінки релевантності.
Слова, що містяться в тегу Keywords, розглядаються пошуковими машинами як рекомендація, але іноді саме цієї інформації бракує.
При формуванні списку ключових слів для мета тегу Keywords необхідно використовувати слова, що містяться в тексті документа. Слова, що не містяться в тексті, можна використовувати в дуже невеликих кількостях, два - три слова. Вставляти їх треба в кінець списку.
Ключові слова не повинні повторюватися в тегу Keywords, в крайньому випадку, не більше двох разів.
У мета тегу Keywords має сенс використовувати не більше 10 слів, більша кількість не покращує релевантності.
В більшості випадків пошукові машини знаходять ключові слова, що стоять в множині (cats), навіть якщо пошук заданий в однині (cat). Тому рекомендується в тег Keywords заносити англійські іменники в множині.
Роботи деяких пошукових машин не переходять до нового рядка при аналізі мета тегу Keywords, тому не рекомендується розбивати його на декілька рядків.
Приклад: <META Name="Keywords" content="пример, meta, теги">
Якщо документ написаний на декількох мовах, можна використати додатковий атрибут lang для вибору кодування (дивися опис мета тегу Content-Language).
Приклад:
<META Name="Keywords" lang="ua" content="приклад, meta теги">
<META Name="Keywords" lang="en-us" content="meta tegs, example">
Але краще зробити окремі сторінки на різних мовах з переходами з однієї на іншу, за допомогою тегов <A> чи <Link>.
RESOURCE-TYPE
Мета тег Resource-type - описує стан даного документа. Якщо його значення відрізняється від “Document”, то пошукові системи його не індексуватимуть.
Призначений для використання в крупних проектах, з множиною документів різного типу.
Можливі значення:
• Build
• Classification
• Creation
• Document - Приймається за замовченням.
• Formatter
• Host
• Operator
• Random text
• Rating
• Site-languages
• Subject
• Template
• Version
Приклад: <META Name="Resource-type" content ="Document">
REVISIT
Мета тег Revisit - вказує пошуковому роботу, за скільки днів йому потрібно повернутися і переіндексувати даний документ.
Приклад (приходити раз в тиждень): <META Name="Revisit" content="7">
ROBOTS
Мета тег Robots - містить вказівки для роботів пошукових машин, що збирають інформацію про HTML документи у мережі.
Значення Robots може складатися з наступних директив, що розділені комами:
• Index - ця сторінка повинна бути індексована.
• Noindex - ця сторінка не повинна індексуватися.
• Follow - простежувати гіперпосилання на сторінці.
• Nofollow - не простежувати гіперпосилання на сторінці.
• All - = index, follow (прийнято за умовчанням).
• None - = noindex, nofollow.
Тег <META name=Robots content="all"> нічого не змінює в роботі робота пошукової машини, оскільки значення "all" прийняте за умовчанням.
Але якщо ця сторінка створюється динамічно або часто оновлюється, то немає сенсу її індексувати, оскільки інформація про сторінку в пошуковій машині та її дійсний зміст будуть різними. В цьому випадку можна рекомендувати пошуковій машині не індексувати цю сторінку, а тільки відстежувати на ній гіперпосилання, що б проіндексувати решту частини сайту <META name=Robots content="noindex,follow">.
При використанні тегу, що забороняє відстежування гіперпосилань <META name=Robots content="index,nofollow"> частина сайту може залишитися не проіндексованою, оскільки всередині сайту роботи переміщаються по гіперпосиланням. Сторінки, перехід на які є заблокованим, індексуватися не будуть.
Мета тег Robots має пріоритет над директивами управління, що задані у файлі robots.txt.
SUBJECT
Мета тег Subject використовується пошуковими машинами для визначення тематики документа. Але, поки пошукові системи не погодять класифікаційні таблиці, використання цього тегу не завжди є виправданим.
URL
Мета тег URL - призначений для виключення з індексації згенерованих сторінок та дзеркал. Зустрівши цей тег, робот пошукової машини повинен припинити індексацію поточного документа і перейти по вказаному посиланню.
Приклад: <META Name="URL" content= "http://www.Main-Site.com">
ОПИС МЕТА ТЕГІВ ГРУПИ HTTP-EQUIV:
• Мета тeг Content-Language
• Мета тeг Content-Script-Type
• Мета тeг Content-Style-Type
• Мета тeг Content-Type
• Мета тeг Expires
• Мета тeг PICS-Label
• Мета тeг Pragma
• Мета тeг Refresh
• Мета тeг Set-Cookie
• Мета тeг Window-target
CONTENT-LANGUAGE
Мета тег Content-Language - це вказівка на мову документа. Використовується пошуковими машинами при індексуванні. Хоча більшість з них вміють розрізняти мову за текстом сторінки.
Можливі значення (стандарт [ISO639] [ISO3166]):
ua Українська
ru Російська
de Німецька
el Грецька
en Англійська
en-GB Англійська - Великобританія
en-US Англійська, Американська версія
en-cockney Англійська, діалект цокни
Es Іспанська
Fr Французька
It Італійська
i-navajo Навахо - Північна Америка
ja Японська
he Іврит
nl Голландська
pt Португальська
x-klingon Код "x" позначає експериментальний код мови
zh Китайська
Приклад: <META HTTP-EQUIV="Content-language" content ="ua">
У специфікації HTML 4.0 є альтернативна можливість явної вказівки мови - <html lang="en">
CONTENT-SCRIPT-TYPE
Meta тег Content-Script-Type - визначення мови програмування сценаріїв.
Деякі з можливих значень:
text/javascript JavaScript (значення за замовченням)
text/perlscript PerlScript
text/tcl TCL
text/vbscript VBScript
Приклад: <META HTTP-EQUIV="Content-Script-Type" content="text/javascript">
Якщо тег Content-Script-Type не використовується, то тип мови програмування сценаріїв, який відрізняється від прийнятого за замовченням, повинен бути вказаний безпосередньо в кожному тегу <SCRIPT>, приклад <SCRIPT type="text/javascript">.
В одному документі допускається використання декількох мов програмування сценаріїв. Вказівка мови в тегу <SCRIPT> має вищий пріоритет, в рамках поточного тега <SCRIPT>.
CONTENT-STYLE-TYPE
Мета тег Content-Style-Type - вказує мову таблиці стилів, значення "text/css" приймається за замовченням, якщо воно влаштовує і розробник не використовує в цьому документі теги <Style> і , то використовувати цей тег необов'язково.
Приклад: <META HTTP-EQUIV="Content-Style-Type" content="text/css">
Браузери визначають мову таблиць стилів за наступним алгоритмом:
• Якщо в тегу МЕТА задається мова таблиць стилів, то дійсним є останнє зазначення в потоці символів.
• Якщо мова таблиць стилів задається в тегу STILE, мову таблиць стилів визначає останній заголовок в потоці символів.
• Якщо мова таблиць стилів не задана, за замовченням використовується мова "text/css".
CONTENT-TYPE
Мета тег Content-Type – вказівка на тип документа і кодування символів.
Використовувати мета тег Content-Type потрібно з врахуванням певних нюансів.
1. кодування символів тексту повинно відповідати кодуванню, що вказано в тегу.
2. сервер не повинен міняти кодування тексту при обробці запиту браузера.
3. якщо сервер міняє кодування тексту, він повинен скоректувати або вилучити мета тег Content-Type.
Недотримання цих вимог може привести до наступного: web-сервер автоматично визначить кодування запиту клієнта і віддасть сторінку web-браузеру перекодованою. Браузер, у свою чергу, читатиме документ відповідно до мета тегу Content-Type. І якщо кодування не збігаються, то прочитати документ можна буде тільки після ряду хитромудрих маніпуляцій. Особливо це характерно для старих браузерів IE 3.x - 4.x і Netscape 4.x.
Увага! Мета тег Content-Type часто вставляється генераторами HTML коду.
Деякі з можливих типів кодування (стандарт [ISO10646]):
ISO-8859-1 Latin-1, для більшості західноєвропейських мов
Windows-1251 Кирилиця (Windows)
KOI8-r Кирилиця (КОИ8-Р)
cp866 Кирилиця (DOS)
Windows-1252 Західна Європа (Windows)
Windows-1250 Центральна Європа (Windows)
shift_jis Японія (Windows)
Приклад: <META HTTP-EQUIV=”Content-Type” content="text/html; charset=windows-1251">
EXPIRES
Мета теги Expires - керують кешуванням. Якщо дата, що вказана в тегу пройшла, то браузер повинен зробити повторний мережний запит, а не використовувати копію з кешу. Якщо відразу вказати минувшу дату, то документ не кешуватися не буде.
Деякі пошукові роботи можуть відмовитися індексувати документ із застарілою датою.
Дата повинна вказуватися в стандарті [RFC850].
Приклад: <META HTTP-EQUIV="Expires" content="Wed, 26 Feb 2008 08:21:57 GMT">
PICS-LABEL
Мета тег PICS-Label - (Platform-Independent Content rating Scheme Label) ) визначає рівень доступності сайту (sex, violence), але може використовуватися і в інших цілях.
PRAGMA
Pragma - Контроль кешування. При значенні “no-cache” кешування даного сайту не рекомендується. Призначений для документів, що створюються в результаті роботи скрипта.
Приклад: <META HTTP-EQUIV="Pragma" content ="no-cache">
REFRESH
Мета тег Refresh - визначення затримки часу в секундах, після якої браузер автоматично оновлює документ. Додаткова можливість - автоматичне завантаження іншого документа.
Приклад: <META HTTP-EQUIV="Refresh" content ="4; URL=http://www.name.com/">
Якщо потрібно просто відновити документ, то URL вказувати не обов'язково.
SET-COOKIE
Set-Cookie - налаштування cookie браузера.
Приклад: <META HTTP-EQUIV="Set-Cookie" content="NAME=value; EXPIRES=date; DOMAIN=domain_name; PATH=path; SECURE">
Атрибути EXPIRES, DOMAIN, PATH і SECURE при необхідності можна опустити.
Приклад: <META HTTP-EQUIV="Set-Cookie" content="NAME=value;">NAME
Ім'я cookie, не може містити символи перенесення рядка, пропусків, крапки з комою (;) і табуляції.
EXPIRES
Час зберігання cookie. Після вказаної дати (в форматі "Wdy, DD-Mon-YYYY HH:MM:SS GMT") закінчується час зберігання cookie.
Якщо цього атрибуту не вказано, то cookie зберігається протягом одного сеансу, до закриття браузера.
DOMAIN
Домен, для якого задається значення cookie. Для доменів COM, EDU, NET, ORG, GOV, MIL, INT значення можна задавати скорочено "MY.COM", воно буде розповсюджено і на домен "WWW.MY.COM". Для всіх інших (у тому числі і RU) значення треба задавати повністю "WWW.MY.RU".
Якщо цього атрибуту не вказано, то за замовченням використовується доменне ім'я сервера, з якого було виставлено значення cookie.
PATH
Встановлює підмножину документів, на які розповсюджується дія cookie. При значення "/doc" дія cookie буде поширена на всі файли і каталоги в цій директорії, які починаються на "doc" (/doc/, /document/, /doc2/, docs.html, doc-test.htm).
Якщо цього атрибуту не вказано, то значення cookie розповсюджується тільки на документи директорії, в якій розташовано поточний документ.
SECURE
Вказує, що інформація про cookie буде пересилатися за протоколом HTTPS (HTTP з використанням SSL). Інакше інформація про cookie буде пересилається за протоколом HTTP.
Перед запитом до серверу, браузер перевіряє cookie. І якщо атрибути NAME, DOMAIN і PATH збігаються, тоді браузер посилає cookie до серверу.
Якщо cookie приймає нове значення, старе значення знищується.
Браузер має ряд обмежень по роботі з cookie:
• Одноразово може зберігатися не більше 300 значень cookie.
• Cookie не може перевищувати 4 Кбайт.
• Від одного сервера (домена) не може бути більше 20 cookie.
Ці обмеження можуть бути дещо іншими, залежно від налаштування та типу браузера.
Якщо відбувається перевищення ліміту (загального або по домену) знищується перший за часом запис. Знищення відбувається, не залежно від значення атрибуту EXPIRES.
При перевищенні 4 Кбайт, cookie усікається.
Приклад: <META HTTP-EQUIV="Set-Cookie" content="NAME=cookexample; EXPIRES=Monday, 22-FEB-08 21:11:51 GMT; DOMAIN=WWW.MY.RU; PATH=/; SECURE">
WINDOW-TARGET
Мета тег Window-target - визначає вікно поточної сторінки. Приведений приклад можна використати для припинення появи нових вікон браузера при застосуванні фреймових структур. Діє для багатьох (але не для всіх) браузеров.
Приклад: <META HTTP-EQUIV="Window-target" content ="_top">
ВИСНОВКИ
При проведенні оптимізації слід уникати використання стратегії багатократного повторення ключових слів або фраз з метою підвищення релевантності сторінки. Правило оптимального включення ключової фрази в теги можна сформулювати так: необхідно використовувати один раз ключову фразу в тегу Title, один-два рази (але не більше) помістити її в тег опису Description, декілька варіацій або версій ключової фрази включити в тег ключових слів Keywords.
Теги Title, Description і Keywords повинні розташовуватися в один рядок без розривів і перенесень рядка. Звичайна практика розміщення тегів в окремих рядках часто приводить до ускладнень в роботі роботів при читанні тегів.
При аналізі сайту необхідно ретельно розбирати по кісточках скелет кожної сторінки і подивитися на нього очима пошукової системи. Час, витрачений на детальне вивчення початкового коду та його оптимізацію, окупиться досягненням сайту високих позицій в результатах пошуку.
ЗАСОБИ CSS
Каскадні таблиці стилів або CSS (від англійського Cascading Style Sheets) є подальшим розвитком HTML і надає перехід на якісніший рівень представлення інформації. Таблиці стилів дозволяють розділити смисловий вміст сторінки та його оформлення.
У перших версіях стандарту HTML не було передбачене ніяких засобів для управління зовнішнім виглядом інформації. Загальна концепція гіпертексту була направлена на доступність інформації для будь-яких пристроїв, здатних відтворювати текст. Для розмітки рекомендувалося використовувати лише логічні теги, що визначають заголовки, підзаголовки, переліки, абзаци, цитати і т.д., – тобто, ті елементи, які і складають структуру документа. Інтерпретація ж зовнішнього вигляду залишалася повністю на совісті кінцевого монітору.
Проте з тих пір багато що змінилося. Зараз все оформлення рекомендується виносити в зовнішній стильовий файл. Основна ж сторінка міститиме лише інформацію і посилання на необхідні стилі.
Таблицю стилів потрібно написати лише і вона має бути єдиною для цілого сайту, і тоді, не потрібно буде повторювати одні і ті ж описи стилів на кожній із сторінок.
Розміщення всієї стильової інформації в одному зовнішньому файлі відкриває інші корисні можливості – адже змінивши вміст лише одного (!) стильового файлу, можна в лічені секунди змінити весь дизайн сайту. Причому жодних інших переробок не знадобиться. Зрозуміло, це вірно лише в тому випадку, якщо спочатку сайт був спроектований вірно.
ПРЕДСТАВЛЕННЯ ТЕКСТУ НА WEB-СТОРІНКАХ
При створенні професійної графіки для Web використовується текст із згладженими краями. Згладжування – це легка розмитість на нерівних краях, що згладжує переходи між кольорами. Не згладжені краї, навпаки, виглядають зазубленими і ступінчастими. Виключенням з цього загального правила є текст малого розміру, (10, 11 пунктів і менше), застосування згладжування робить його практично невиразним. Текст малих розмірів виглядатиме набагато краще без згладжування.
ТИПИ ШРИФТІВ
При розробці Web-сторінки засобами базового HTML є два комплекти шрифтів: пропорційний і шрифт фіксованої ширини.
Пропорційний шрифт – інакше "шрифт змінної ширини" для кожного символу виділяє різну кількість місця залежно від його зображення. Наприклад, в пропорційному шрифті заголовна "W" займає більше місця в рядку по горизонталі, ніж прописна "I". Такі гаринітури, як: Times, Helvetica і Arial є прикладами пропорційних шрифтів.
Web-браузери для більшості текстів на Web-сторінці, включаючи основний текст, заголовки, списки, цитати і т. д., використовують пропорційні шрифти. Як правило, великі уривки основного тексту зручніше читати, коли вони надруковані пропорційними шрифтами. Оскільки більшість користувачів не мають часу замінити шрифти, встановлені за замовчуванням, з великою вірогідністю можна припустити, що текст на сторінці буде відображений шрифтом Times розміром 10 або 12 пунктів або Helvetica. Але це всього лише загальне правило.
Шрифт з фіксованою шириною надає однакове місце для всіх символів шрифту. Заголовна "W" займає не більше місця, чим прописна "I". Прикладами шрифтів фіксованої ширини є гарнітури Courier і Monaco. У Web-браузерах шрифти фіксованої ширини використовуються для відображення будь-якого тексту всередині наступних HTML-тегів: <рге>, , , ,, <хтр>.
Оскільки багато людей не міняють налаштування шрифтів, що встановлені за замовченням, текст, що знаходиться у вказаних тегах, буде виведений одним з шрифтів типа Courier.
ТЕКСТ В ЗОБРАЖЕННЯХ
Дизайнери швидко зрозуміли, що найвірніший спосіб абсолютного контролю над шрифтами – помістити текст в зображення. Можна часто бачити заголовки, підзаголовки і оголошення, що виконані у вигляді файлів GIF.
Переваги використання графіки замість HTML-тексту:
• можна визначати тип шрифту, розмір, интерлиньяж, проміжок між буквами, колір і вирівнювання – всі атрибути, які викликають складнощі тільки в HTML;
• ваша сторінка буде однакова при висновку у всіх графічних браузерах.
Але у цього методу є ряд недоліків:
• зображення завантажується довше, ніж текст, оскільки графічні файли зазвичай важать більше, ніж HTML-тексти, що мають той же зміст;
• у неграфічних браузерах зміст втрачається. Користувачі, які не можуть (або не хочуть) проглядати графіку, не побачать і тексту. Альтернативний текст (використовується атрибут Alt) на місці графічного зображення допомагає, але його можливості обмежені і це не завжди надійний спосіб ототожнення графічної інформації;
• інформацію, що знаходиться в зображенні, не можна індексувати або організувати її пошук. В результаті виключаються з документа важливі частини інформації.
РОЗМІР ШРИФТУ
Зазвичай розмір шрифту визначається в пунктах (72 пункти (пт) = 1 дюйм висоти шрифту) але, на жаль, ці розміри не достатньо точно переводяться між платформами. Частково це відбувається тому, що їх операційні системи управляють дисплеями з різними роздільчостями. Зазвичай Windows використовує роздільчість екрану 96 точок/дюйм, а MACOS – 72 точок/дюйм. Монітори MultiScan допускають вищу роздільчість.
Шрифт на екрані дисплея Масintosh має такий самий розмір, як і при друці (наприклад, 12 пт Times на екрані виглядає так само, як 12 пт Times на папері).
Для шрифтів Microsoft це не виконується, і розмір шрифту при виводі на екран є більшим, що полегшує читання з дисплея. В результаті шрифт розміром 12 пт на Windows більше схожий на друкарський шрифт в 16 пунктів. Щоб отримати на Windows друкарський розмір 12 пт, потрібно вибрати розмір шрифту 9 пунктів (але тоді користувачі комп'ютерів Масintosh побачать текст майже нерозбірливим, оскільки він буде відображений шрифтом розміром всього 6,75 пт).
ГРАФІКА НА WEB-СТОРІНКАХ
На даний момент майже всі зображення в Web, представлені в трьох форматах: GIF, JPEG та PNG
GIF
GIF – Grafic Interchange Format можна назвати традиційним форматом файлів Web. Він був першим форматом файлів, який підтримували Web-браузери, і до цього дня продовжує залишатися основним графічним форматом Web.
Відмінні характеристики
• підтримує не більше 256 кольорів;
• використовує індексовану палітру кольорів;
• використовує стиснення без втрати інформації за методом LZW (який подібний до вживаного в архіваторі PKZIP, і, отже, GIF-файли в подальшому практично не стискаються);
• підтримує через рядкову розгортку;
• є потоковим форматом, тобто показ картинки починається під час завантаження;
• дозволяє призначити одному з кольорів в палітрі атрибут прозорості, що застосовується при створенні так званих прозорих GIFов;
• має можливість збереження в одному файлі декількох зображень, що знаходить своє застосування при виготовленні анімованих GIFов;
• підтримує можливість вставки у файл керуючих блоків, які дозволяють вставляти коментарі у файл (наприклад, про авторські права), здійснювати затримку між показами зображень і т.д.
Отже, GIF підтримує не більше 256 кольорів, а це означає, що всі зображення, які зберігаються в GIF-форматі, явно або неявно зменшують кількість кольорів, щоб вкластися в цей ліміт (різні програми з різним успіхом). Тому, якщо взяти красиву фотографію з плавними переходами і ледь вловимими відтінками кольору, то після перетворення все буде набагато гірше – відтінки перестануть бути невловимими, і вся фотографія набуде неприродного, нереалістичного вигляду. Тому, якщо треба все-таки зберегти фотографію у форматі GIF і передати всі відтінки, то доводиться йти на хитрості. Наприклад, до фотографії можна застосувати певний художній фільтр і перетворити її на малюнок або застосувати тонування. Зате немає жодних проблем із збереженням малюнків і креслень в цьому форматі, вони, як правило, добре стискаються і не містять багато кольорів.
JPEG
Іншим найбільш популярним графічним форматом в Web є JPEG – Joint Photographic Experts Group. Він містить 24-розрядну інформацію про колір. Це 16,77 млн. кольорів на відміну від 256 кольорів формату GIF. У JPEG використовується так зване стиснення з втратами. Це означає, що певна інформація про зображення в процесі стиснення відкидається, але в більшості випадків погіршення якості зображення не завдає шкоди і часто навіть не помітно.
Фотографії або будь-які зображення з плавними градаціями кольорів краще за все зберігати в JPEG-форматі, тому що він пропонує вищу якість зображень, що вміщуються у файл меншого об'єму. Проте, JPEG не є кращим рішенням для графічних зображень з одноколірними областями, оскільки цей формат має тенденцію псувати кольори цятками і кінцевий файл, як правило, буде дещо більшим та гіршої якості, ніж GIF-файл для того ж зображення.
PNG
Це третій графічний формат, що конкурує за постійне використання в Web. Це формат PNG – Portable Network Graphic, який, не дивлячись на свої переваги, знаходиться здебільшого в тіні. Підтримувати PNG як вбудовану графіку браузери почали значно пізніше за вищеназвані формати, але PNG має всі шанси стати популярним форматом в Web. PNG може підтримувати 8-розрядні індексовані кольори, 16-розрядні півтони або 24-розрядні повнокольорові зображення, використовуючи схему стиснення без втрат. Це забезпечує вищу якість зображень, а іноді і менший об'єм файлів в порівнянні з форматом GIF.
Крім того, файли PNG мають деякі чудові функції, наприклад, вбудоване управління коефіцієнтом гамма, і змінні рівні прозорості (це дозволяє показувати малюнок фону крізь відкидані м'які тіні).
РОЗДІЛЬЧІСТЬ ГРАФІЧНОГО ФАЙЛУ
Оскільки зображення Web існують лише на екрані дисплея, буде технічно правильно вимірювати їх роздільчість в пикселах на дюйм (ppi – pixels per inch). Інша одиниця вимірювання роздільчості – кількість точок на дюйм (dpi – dots per inch) відноситься до роздільчості друкарських зображень і залежить від роздільчості друкуючого пристрою.
Але, оскільки реальні розміри графіки залежать від роздільчості дисплею, вимірювання в дюймах стає для Web-застосувань неприйнятним. Єдиною значущою одиницею вимірювання стає піксел.
Практично створювати зображення з роздільчістю 72 ppi (це кращий варіант для представлення на екрані), звертаючи увагу тільки на загальні розміри в пікселах. В процесі створення графіки на Web можна взагалі не використовувати дюйми. Важливим є розмір зображення у порівнянні з іншими зображеннями на сторінці і загальним розміром вікна браузера.
Наприклад, багато користувачів використовують 15-дюймові дисплеї з роздільчістю 800x600 пікселів. Щоб гарантувати заповнення графічною заставкою всього простору екрану, краще зробити його шириною не більше 780 пикселов (враховуючи, що частина пікселів справа і зліва буде використана для вікна і для смуги прокрутки). Розмір решти кнопок і зображень на сторінці слід вимірювати в пікселах відносно ширини 780 пікселів.
ОБ’ЄМ ГРАФІЧНОГО ФАЙЛУ
Без сумніву, саме графіка зробила Web таким, який він є сьогодні, але потрібно знати, що багато користувачів переживають до графіки в Web почуття на межі любові і ненависті. Не варто забувати, що графіка збільшує час, що необхідний для передачі по мережі Web-сторінки; великий об'єм графіки означає істотний час завантаження, який випробовує терпіння читача, особливо якщо він додзвонюється з використанням стандартного модемного з'єднання.
В цьому відношенні для Web-дизайнера існує єдине найбільш важливе правило: розмір файлу графічного зображення повинен бути мінімально можливим! Створення зображень, призначених для передачі по мережі, покладає відповідальність на розробників серйозно відноситися до проблеми часу завантаження.
ЗАБЕЗПЕЧЕННЯ ДОСТУПНОСТІ WEB-СТОРІНКИ
WEB-ДИЗАЙН І БРАУЗЕРИ
Багато Web-дизайнерів сходяться на думці, що одна з головних проблем Web-дизайну – різноманіття браузерів і платформ, кожен з яких по-різному підтримує HTML і сценарії. З випуском кожного нового браузера покращуються їх характеристики і можливості, але це не означає, що ранішні версії при цьому зникають. Значна частка користувачів не схильні гнатися за новітнім і кращим. Одні задовольняються тим, що у них є, а інші, найімовірніше, працюють на комп'ютерах фірм або установ, які вибрали браузери за них. Тому створений сайт має практично однаково відображатися у рідних браузерах, та різних версіях
WEB-ДИЗАЙН І МОНІТОРИ
При розробці Web-сторінки важливо врахувати розмір екрану. Сторінка повинна бути доступною (і правильно відображатися) для максимально можливого числа користувачів. Необхідно відштовхуватися від найменшої роздільності сучасних моніторів і розробляти сторінку так, щоб вона гарантовано цілком відображалася на екрані.
Більшість дизайнерів рекомендують розробляти сторінки у форматі 800x600, щоб при перегляді користувачам не довелося застосовувати горизонтальну прокрутку. Горизонтальна прокрутка завжди ускладнює сприйняття, тому дизайнери традиційно її відкидають.
Все більше число розробників вважає стандартним роздільчість 1024x768. І зовсім одиниці розробляють сторінки для ще вищих роздільчостей. Звичайно, рішення буде, в першу чергу, залежати від аудиторії. Наприклад, якщо сайт призначений для дизайнерів графіки, то вважається, що вони мають дисплеї, принаймні, з дозволом 1024x768 або вище, відповідно до чого і розробляється сторінка. Якщо сайт призначений для ширшого кола користувачів, в них можуть бути монітори дещо гіршими.
ОСОБЛИВОСТІ КОЛЬОРІВ ДИСПЛЕЯ
Колірні монітори можуть різнитися у відображенні кольорів. Це ще один чинник, який впливає на рішення розробника.
Існує набір з 216 кольорів, що складається з кольорів системних палітр МасOS і Windows, що відображаються однаково на рідних платформах, операційних системах та браузерах. Такий набір називається Web-палітрою безпечних кольорів (Web Palette). Багато дизайнерів вважають, що краще користуватися цією палітрою при створенні Web-графіки та елементів HTML, щоб сторінка виглядала однаково для всіх користувачів.
СТАНДАРТНІ РОЗМІРИ І РОЗДІЛЬЧОСТІ ДИСПЛЕЇВ
Першим кроком при визначенні вірогідного розміру Web-сторінки повинно стати визначення максимального простору, що забезпечується дисплеєм. Комп'ютерні дисплеї мають різні стандартні розміри і зазвичай вимірюються в дюймах - 15", 17", 19" і 21".
Іншою характеристикою є роздільчість монітору – загальне число пікселів (picture's element – елемент картинки) на екрані. Чим вище роздільчість, тим детальнішим буде зображення. Знаючи можливе число пікселів, можна створювати відповідно до нього зображення (що також вимірюється в пікселах) та елементи сторінки.
Важливо пам'ятати, що чим вище роздільчість на даному дисплеї, тим більше пікселів спресовано в наявному просторі екрану. В результаті піксели стають меншими і відповідно зменшуються зображення та інші елементи сторінки.
Саме з цієї причини вимірювання в Web проводяться в пікселах, а не в дюймах. Те, що на одному моніторі представляється величиною в дюйм, на моніторах інших користувачів може виглядати більше або менше. Коли розробник працює з пікселами, він принаймні знає, які розміри елементів щодо один одного.
ДЕСЯТЬ НАЙПОШИРЕНІШИХ ПОМИЛОК В ДИЗАЙНІ
НЕРОЗБІРЛИВІСТЬ
• Занадто малий або великий розмір
• Низький контраст між шрифтом та фоном
НЕАДЕКВАТНА НАВІГАЦІЯ
Єдині стандарти навігації для всього сайту
Де знаходиться саме краще місце для розміщення меню? Це питання постійно обговорюється серед веб-розробниками. Чи повинне бути розташоване головне меню у верхній частині сторінки? Або краще розмістити його зліва? У будь-якому випадку, меню має бути завжди на одному і тому ж місці на всьому сайті. Користувачі повинні завжди знати, як повернутися до інформації, яку вони вже бачили. Вони також мають бути впевнені, що зможуть знайти інформацію, яку вони ще не прочитали. Посилання на головну сторінку повинно бути на одному і тому ж місці незалежно від того, на якій сторінці сайту відвідувач знаходиться.
Відомості щодо посилання
Користувачі мають наперед знати, куди приведе їх текстове посилання або кнопка. Якщо посилання приведе до завантаження файлу, їх потрібно проінформувати наперед, наприклад
• «Назва товару» документ у форматі PDF (16 MB)
• «Назва товару» інструкція для користувача (16MB – zip файл)
Для користувача зручною буде вказівка фізичного розміру файлу, який завантажуватиметься.
Нестандартні посилання
Посилання — це головний інтерактивний елемент на сторінці. Потрібно дотримувати загальноприйнятих правил про те, як має виглядати посилання: потрібно виділяти посилання кольором і підкреслювати їх (і не підкреслювати інший текст), виділяти переглянуті посилання, уникати використання JavaScript або інших нестандартних технологій, не відкривати посилання в новому вікні (окрім файлів ZIP, DOC, PDF та інших не веб-документів), інформувати користувача про те, що він побачить при переході по посиланню.
ІНТРО СТОРІНКА
Відвідувачі приходять на сайт, щоб знайти потрібну інформацію і часто перше, що вони бачать, це інтро сторінка. В більшості випадків ця ввідна сторінка не є корисною для відвідувача і не сумісна за стилем з рештою частини сайту. В цілому, єдина мета інтро сторінки – додати певну «крутизну» при вході на сайт. Кожна сторінка сайту, включаючи головну, повинна бути інформативною і збігатися з основним стилем сайту.
ФЛЕШ
Сайти та інструменти навігації, що зроблені у флеші, можуть містити низку проблем для користувачів.
КОНТЕНТ
Найбільшою проблемою є орфографічні та стилістичні помилки у тексті. Веб-сторінки повинні бути короткими і зручними для перегляду на моніторі.
ПОГАНИЙ ПОШУК
Для повноцінного пошуку по сайту потрібно застосувати спеціальне програмування, але це варто того, тому що пошук — фундаментальна компонента людської поведінки в онлайні.
НЕСУМІСНІСТЬ БРАУЗЕРІВ
Багато веб-розробників не перевіряють свої сайти на сумісність з альтернативними браузерами, хоча кожен десятий користувач в Інтернеті не використовує Internet Explorer.
СКЛАДНІ ФОРМИ
Користувачі часто скаржаться на недолік різних форм, які часто містять велику кількість непотрібних питань. Тут можна порадити залишити в опитувальниках тільки найважливіші питання, а інші зробити необов'язковими для відповіді, максимально запровадити автозаповнення, переводити курсор в перше поле форми, коли відкривається сторінка (це економить один клік).
НЕМАЄ КОНТАКТНОЇ ІНФОРМАЦІЇ АБО ІНФОРМАЦІЇ ПРО КОМПАНІЮ
Багато сайтів в Інтернеті неначе створено анонімно. Телефонний номер і адреса електронної пошти на сайті повинні бути обов'язково, бажано ще розмістити фізичну адресу, тому що із скритною компанією ніхто не захоче мати справи.
СТОРІНКИ ФІКСОВАНОЇ ШИРИНИ
Тут дві проблеми:
• на великих моніторах сторінка перетворюється на вузький стовпчик тексту, а на маленьких може викликати незручну горизонтальну прокрутку;
• права частина сторінки може не поміститися на сторінку при роздрукуванні на папері.
НЕПРАВИЛЬНЕ МАСШТАБУВАННЯ ФОТОГРАФІЙ
В електронній комерції, дуже важливо продемонструвати товар у всіх подробицях. На сторінку слід винести фотографію навеликого розміру, якщо користувач буде зацікавлений, то обов'язково повинна бути функція, що відкриває цю фотографію в збільшеному розмірі. На жаль, на багатьох сайтах на сторінку відразу викладаються великі зображення, що значно гальмує завантаження сторінки
ВИСНОВОК
Дизайнери надмірно захоплюються сучасними технологіями, зокрема, постійно влаштовують конференції, тоді як користувачам насправді немає ніякої справи до технологій. Їм потрібно тільки щоб сторінка швидко завантажувалася, текст читався, контент відповідав на їх питання, а навігація і пошук дозволяли знайти потрібну інформацію.
ПОРЯДОК РОБОТИ
1. Обрати тематику майбутнього сайту
2. Розробити структуру сайту
3. Обрати програми, що потрібні для створення
4. Створити сайт
5. Заповнити службовою та довідковою інформацією мета-теги
6. Як розділ, винести на сайт відомості про автора
7. Розмістити сайт на сервері і протестувати
ЗМІСТ ЗВІТУ
1. Назва та мета виконання лабораторної роботи.
2. Основні відомості про створення Web-сайтів.
3. Характеристика вибраних програм для створення Web-сайту.
4. Структура розробленого індивідуального Web-сайту.
5. Скрін сторінок розробленого індивідуального Web-сайту.
6. Адреса розміщеного на сервері сайту.
7. Висновки.
