Структура веб-сторінок. Правила ергономічного розміщення відомостей на веб-сторінці

Опрацювати теоретичний матеріал:

Вебсторінки і сайти

Вебсторінка (англ. web page або англ. webpage) — інформаційний ресурс, доступний в мережі World Wide Web (Всесвітня павутина), який можна переглянути у веббраузері. Зазвичай, інформація вебсторінки записана у форматі HTML, XHTML.

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

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

Сайт, або вебсайт (від англ. web — мережа, site — місце), — це об’єднання тематично пов’язаних вебсторінок і документів під одним доменним іменем.

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

Наведений на гіперпосилання вказівник миші набуває вигляду руки.

Гіпертекст є основою вебсторінки, вебсторінки об’єднуються у сайти, а сукупність усіх сайтів утворює Всесвітню павутину.

У структурі вебсторінки можна виділити такі складові (рис.1):

• контент (англ. content – зміст) – змістове наповнення вебсторінки, доступне користувачу: тексти, зображення, відео, звукові дані та ін.;

• елементи навігації – засоби для переходу до інших вебсторінок або до інших об’єктів на тій самій сторінці;

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

Рис.1

Розміщення сайтів у мережі

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

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

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

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

Структура сайту

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

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

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

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

.

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

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

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

Вебредактори – програми, які призначено для створення вебсторінок сайтів, наприклад Adobe Dreamweaver, Microsoft FrontPage, WYSIWYG Web Builder та ін. Ці програми мають засоби для візуального конструювання вебсторінок.

Розробник розміщує на вебсторінках об’єкти – зображення, таб лиці, списки та інше, вибираючи їх заготовки з бібліотеки об’єктів. HTML-код кожної вебсторінки генерується на основі отриманого набору об’єктів. Такі програми називають WYSIWYG-редакторами (англ. What You See Is What You Get – що ви бачите, то ви й отримуєте).

Системи управління вебконтентом WCMS (англ. Web Content Management System – система управління вебконтентом) – програми, які призначено для створення, редагування та керування вмістом веб-сайту.

Приклад:

Популярними WCMS є системи Joomla, Wordpress, MediaWiki та ін. Вони містять набори вже готових шаблонів оформлення вебсторінок і модулів, що роблять сайт динамічним: форумів, стрічок новин, каталогів файлів тощо. Контент сторінок, створених у цих системах, зберігається в базі даних, а HTML-код генерується автоматично на основі шаблону.

Зверни увагу!

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

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

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

Приклад:

Вебсторінки зручно створювати в додатку Google Sites.

Власний сайт можна нескладно і швидко розробити за допомогою СКВ на сайтах www.hostinger.com.ua; www.webkonstruktor.com та багатьох
інших. Ці сайти також надають послуги платного та безкоштовного хостингу, реєстрації доменних імен, електронної пошти та ін.

Ергономіка (грец. έργος — праця, νώμος — закон) — це наука, яка вивчає особливості виробничої діяльності людини з метою забезпечення ефективності, безпеки та зручності цієї діяльності.

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

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

Більшість шаблонів, які пропонують СКВ, створюються професіоналами. У них вже дотримано основні правила щодо розробки сайтів:

• вміст (контент) лаконічний, поданий у зрозумілій для користувача формі;

• посилання на вебсторінках помітні та однозначні;

• навігація сторінками сайту зручна і проста.

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

Критерії ергономічного сайту

Оформлення вебсторінок

• Дотримання єдиного стилю оформлення вебсторінок.

• Вибір кольорів тла та тексту згідно з правилами колористики.

• Читабельний шрифт, виділення заголовків кольором і більшим розміром шрифта.

• Вирівнювання тексту за шириною.

• Якісні графічні зображення з можливістю перегляду.

• Уникнення використання подразнюючої анімації.

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

Зміст контенту

• Зазначення назви сайту на всіх вебсторінках.

• Наявність заголовків на вебсторінках.

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

• Розміщення тексту максимум у три колонки.

• Недопустимість використання горизонтальних смуг прокручування для перегляду сторінок.

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

Розташування контенту

• Можливість переходу всіх вебсторінок на головну сторінку сайту.

• Використання не більш ніж трьох рівнів вкладеності вебсторінок.

• Помітність і наочність меню і кнопок, усунення їх двозначності.

• Відмінність гіперпосилань від решти тексту.

• Використання в одному блоці не більш ніж 7 гіперпосилань (краще використовувати вкладені меню або блоки).

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

Зверни увагу!

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

Виконайте інтерактивні вправи:

* Етапи створення вебсайту - розмістіть картки у відповідне поле.

* Ергономіка вебсайту - розкрийте терміни, які входять до певної категорії.

Скріншоти виконаних вправ прикріпіть до цього завдання (2 вправи=2 скріни)

Пройдіть невеличке опитування за матеріалами уроку.

5 запитань=20 хв. часу!
Успіхів!