Для тих, хто хоче знати більше

Оцінювання веб-сайтів

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

· ступінь інформативності веб-сайту, можливість отримання корисних матеріалів, які не повторюють відомості з інших ресурсів;

· частота оновлення даних на сайті, що свідчить про увагу розробника до власного проекту;

· наявність інтерактивних засобів, можливість проведення обговорень, отримання відповідей, звертання до розробника за додатковими відомостями та коментарями;

· мови, якими доступні матеріали на веб-сайті;

· візуальна привабливість сайту, дизайн, стиль оформлення;

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

та ін.

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

Перевірте себе

1. · Які групи елементів можна виділити на веб-сторінці? Охарактеризуйте кожну групу.

2. º Що таке контент веб-сторінки?

3. · Поясніть особливості різних видів веб-сторінок залежно від їх вмісту.

4. · Чим відрізняється домашня сторінка веб-сайту від інших інформаційних сторінок?

5. · Поясніть особливості різних видів веб-сторінок залежно від технологій, використаних при їх створенні.

6. · За якими ознаками можна класифікувати веб-сайти?

7. · Поясніть особливості різних видів веб-сайтів за рис. 4.67.

8. * Поясніть, чим відрізняється портал від Інтернет-магазину; від тематичного сайта.

9. º Який сервіс називають хостингом?

10. º Що таке система керування контентом?

11. · За якими критеріями оцінюють веб-сайти?

12. · Що означає поняття юзабіліті?

Виконайте завдання

1.

Рис. 4.68

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

3. (ДЗ) · Відкрийте веб-сторінки з вказаними URL-адресами та вкажіть їх тип:

4. · Перегляньте веб-сайти з указаними адресами та встановіть відповідність між URL-адресами та типами веб-сайтів за їх призначенням:

5. (ДЗ) · Перегляньте веб-сайти з указаними адресами та встановіть відповідність між URL-адресами веб-сайтів та їх типами відповідно до основної технології створення веб-сторінок:

6. ** Вкажіть, яким типам сайтів відповідають описи:

7. · Відкрийте веб-сайти з вказаними URL-адресами та вкажіть їх тип:

8. ** Висловіть свій погляд на веб-сайти з даними URL-адресами:

Етапи створення веб-сайтів. Основи веб-дизайну

Пригадайте!

1. Які етапи розв’язування задач з використанням комп’ютера?

2. Що таке дизайн? Які основні принципи дизайну презентації і слайдів?

3. Що таке стиль?

4. У чому полягають закони композиції, колористики, ергономіки?

5. Що таке верстка? Яке її значення при створенні публікацій?

Етапи створення веб-сайтів

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

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

· мету, з якою створюється сайт;

· тематику сайту;

· тип сайту: домашня сторінка, форум, Інтернет-магазин, портал тощо;

· відмінності сайту від інших сайтів такої самої тематики;

· аудиторію потенційних відвідувачів сайту: вік відвідувачів, стать, коло інтересів тощо;

· перелік сервісів для розміщення на сайті: форум, чат, пошукова система, веб-каталог, електронна пошта та ін.;

· перспективи розвитку сайту.

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

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

Рис. 4.69. Приклад мапи сайту

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

Як правило, на веб-сторінках передбачено розміщення:

·

· меню для переходу до основних розділів сайту;

· інформаційного блоку з основним матеріалом, що займає центральну частину сторінки;

· нижнього блоку – підвалу, для розміщення контактних даних, повідомлення про авторські права тощо.

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

3.

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

Для розміщення на веб-сторінці варто використовувати мультимедійні файли форматів, що передбачають стиснення даних. Для графічних зображень це можуть бути формати JPEG, GIF, PNG, для аудіокліпів – MP3, для відео фрагментів – AVI, MP4 та ін.

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

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

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

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

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

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

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

Основи веб-дизайну

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

Виділяють такі базові елементи веб-дизайну:

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

· форми –утворюються з використанням замкнених контурів та тривимірних об’єктів. Є три основні типи форм: геометричні (прямокутники, трикутники тощо), природні (листя, краплі та ін.), абстрактні (іконки, символи тощо). Використовуються для структурування даних, їх групування, передачі їх змісту, привернення уваги до оформлення;

· текстура(лат. textura – тканина) – використовується як фон та створює ілюзію поверхні з каміння, тканини, деревини тощо. Текстури з ефектами природних матеріалів надають емоційне забарвлення стилю сайта;

· колір –використовується як фон, для розставлення акцентів, утворює зображення, розділяє передній та задній план та ін.;

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

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

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

· світлий стиль з переважаючими світлими кольорами легко сприймається всіма категоріями відвідувачів, але дехто вважає світлі сайти занадто простими;

· однокольоровий стиль – це стиль оформлення, у якому переважає один колір, відмінний від чорного та білого. Часто обраний колір є елементом іміджу власника;

· різнокольоровий стиль передбачає використання двох або більше кольорів, що займають найбільшу площу на сайті. Різнокольоровий стиль часто обирають при створенні сайтів для дітей (рис. 4.73).

Рис. 4.73. Приклад сайту різнокольорового стилю