МIНIСТЕРСТВО ОСВIТИ І НАУКИ УКРАЇНИ

ХАРКIВСЬКИЙ НАЦІОНАЛЬНИЙ
УНIВЕРСИТЕТ РАДIОЕЛЕКТРОНIКИ

МЕТОДИЧНІ ВКАЗІВКИ
до практичних робіт

з дисципліни
«ГІПЕРТЕКСТ ТА ГІПЕРМЕДІА»

для студентів усіх форм навчання

першого (бакалавського) рівня вищої освіти
спеціальності 121 – Інженерія програмного забезпечення,
освітня програма «Програмна інженерія»

ХАРКІВ 2023
 МIНIСТЕРСТВО ОСВIТИ І НАУКИ УКРАЇНИ

ХАРКIВСЬКИЙ НАЦІОНАЛЬНИЙ
УНIВЕРСИТЕТ РАДIОЕЛЕКТРОНIКИ

МЕТОДИЧНІ ВКАЗІВКИ
до практичних робіт

з дисципліни
«ГІПЕРТЕКСТ ТА ГІПЕРМЕДІА»

для студентів усіх форм навчання

першого (бакалавського) рівня вищої освіти
спеціальності 121 – Інженерія програмного забезпечення,
освітня програма «Програмна інженерія»

ЗАТВЕРДЖЕНО
Кафедрою «Програмної інженерії»

ХАРКІВ 2023
 Методичні вказівки до практичних робіт з дисципліни «Гіпертекст та
гіпермедіа» для студентів спеціальності
121 «Інженерія програмного забезпечення» / Упоряд А.Л. Єрохін, І.В. Груздо,
К.В. Зибіна – Харків: ХНУРЕ, 2023. – 81 с.

Упорядник: А.Л. Єрохін,

І.В. Груздо
К.В. Зибіна

Рецензенти:
д.т.н., проф., Завідувач кафедри штучного інтелекту ХНУРЕ
В.О. Філатов;

3
 ЗМІСТ
ЗМІСТ ........................................................................................................................... 4
Вступ ............................................................................................................................. 5
ПРАКТИЧНА РОБОТА №1. Визначення мети створення сайту і її
формулювання відповідно до вимог користувача. Розробка структури сайту .... 6
ПРАКТИЧНА РОБОТА №2. Аналіз інтерфейсу користувача. «Кросбраузерність
веб-сайту»................................................................................................................... 47
ПРАКТИЧНА РОБОТА №3. «CSS flexbox (Flexible Box Layout Module)» ........ 68
МЕТОДИЧНЕ ЗАБЕЗПЕЧЕННЯ ТА РЕКОМЕНДОВАНА ЛІТЕРАТУРА ....... 76
ГЛОСАРІЙ ................................................................................................................. 77

4
 Вступ

Методичні вказівки можуть бути використані в навчальному процесі для

освоєння дисципліни «Гіпертекст та гіпермедіа» для студентів 121 «Інженерія
програмного забезпечення» денної та заочної форми навчання.
Метою проведення практичних робіт з дисципліни «Гіпертекст та
гіпермедіа» є закріплення теоретичних знань з дисципліни, отримання
практичних навичок в застосуванні цих знань і освоєння сучасного
інструментарію обробки даних; формування навичок створення програмного
забезпечення у відповідності до вимог закахчіка, які в можуть бути використані
в процесі створення серверних додатків; навчитися застосовувати можливості
сучасного програмного забезпечення для створення власних web-додатків.
У методичних вказівках поміщені завдання, реалізуючи які читач зможе
опанувати базові прийоми для розробки і написання web-додатків, які в повній
мірі відповідають побажанням замовника.
Вказівки містять кілька розділів, кожен з яких передбачає наявність: цілі
роботи, постановки задачі, посилань на джерела інформації, які необхідно
опрацювати на етапі підготовки до виконання практичної роботи і підібраний
теоретичний матеріал, приклади розв'язання типових задач, завдань для
виконання практичних робіт і самостійної роботи , перелік контрольних питань
за матеріалами розглянутого теми і отриманими результатами виконання
поставлених завдань.
Звіт до кожної виконаної практичної роботи виконується відповідно до
вимог, складається не більше ніж з 20 сторінок і повинен містити: хід
виконання кожного завдання; графічний матеріал по ходу виконання
практичної роботи; висновки по роботі.

5
 ПРАКТИЧНА РОБОТА №1.
Визначення мети створення сайту і її формулювання відповідно до вимог
користувача. Розробка структури сайту

Мета роботи: Набуття практичних навичок щодо визначення мети

створення сайту та її формулювання відповідно
до вимог користувача, а також набуття практичних
навичок із виявлення проблем та опису рішення
у вигляді Use Case Scenario. Отримання практичних
навичок з проектування структури сайту.

Досліджуваний матеріал: Визначення мети створення сайту. Виявлення потреб

користувачів сайту. Визначення інформаційного
наповнення та функціональних можливості сайту.
Use Case Scenario та його опис. Визначення
інформаційного наповнення та функціональних
можливості сайту. Розробка структури сайту (логічної і
фізичної). Розробка анотованих макетів (Wireframes).

1.1 Постановка завдання

Вивчити відомості з теми роботи і виконати проєктування структури

сайту.

1.2 Порядок виконання роботи

1. Узгодити з викладачем тему самостійного проєкту.

2. Вивчити теоретичний матеріал.
3. Визначити цілі створення сайту за темою самостійного проєкту.
Узгодити з викладачем.
4. Виявити потреби користувачів створюваного сайту.
6
 5. Описати у вигляді Use Case Scenario завдання для створення сайту.
6. Визначитися з інформаційним наповненням і функціональними
можливостями створюваного сайту.
7. Розробити структуру сайту.
8. Розробити анотований макет сайту в Wireframes або іншому
програмному засобі для розробки макетів.
9. Сформулювати висновки і пояснити результати.
10. Оформити звіт щодо виконання роботи і здати викладачеві
в електронному вигляді.
Теоретичні відомості
Для підготовки до практичного заняття необхідно повторити лекційний
матеріал і ознайомитися з рекомендованою літературою [1 – 4; лекц. 1 – 2].
Проєктування – це один з найбільш важливих і складних етапів
розробки сайту, від якого залежить ефективність подальших робіт і кінцевий
результат. Проте чимало розробників не приділяють цьому аспекту належної
уваги або навіть зовсім не займаються підготовкою проєктної документації.
Як наслідок, за такого підходу сайти не виправдовують очікувань замовників,
а фінансові вкладення в їхню розробку не приносять очікуваного прибутку.
Процес розробки інтерфейсу користувача для сайту складається з таких
етапів:
1) збір і аналіз інформації, що надходить від користувачів;
2) проєктування призначеного для користувача інтерфейсу;
3) прототипування призначеного для користувача інтерфейсу;
4) тестування користувальницького інтерфейсу.
На першому етапі проводиться дослідження користувачів і аспектів
юзабіліті для розуміння того, чого насправді хочуть домогтися користувачі
від розроблюваного інтерфейсу. Методи, які використовуються на цьому етапі,
призначені для збору інформації про користувальницький інтерфейс,
користувачів, їхні цілі, завдання і середовище, в якому вони виконуються.

7
Зібрана інформація узгоджується і використовується для аналізу складання
технічних вимог.
Необхідно зазначити, що неможливо розробити гарний сайт
без серйозного проєктного дослідження, так само як неможливо побудувати
гарний будинок без належного архітектурного плану. Сьогодні не існує єдиної
методології проєктування, тому під час проєктування у практичній роботі
використовується поєднання різних підходів. У загальному вигляді процес
проєктування складається з таких етапів:
1) визначення мети створення сайту;
2) виявлення потреб користувачів сайту;
3) визначення інформаційного наповнення та функціональних
можливостей сайту;
4) розробка структури сайту (логічної та фізичної);
5) розробка анотованих макетів (Wireframes);
6) підсумки проєктування сайту.
Кожен із цих етапів буде розглянуто в практичних роботах 1–3.

1. Визначення мети створення сайту

Запорука успішності будь-якої діяльності полягає в правильно
поставленій меті, і розробка сайтів не є винятком з цього правила. Також варто
зазначити, що мета визначає функціональні особливості, необхідні
для ефективної роботи сайту. Некоректно сформульована мета розробки сайту
може стати причиною того, що сайт не виправдає очікувань та не буде успішним.
Отже, насамперед мета має бути досить короткою для запам’ятовування, досить
чіткою для розуміння і досить сильною для мотивування.
Наприклад: У зв’язку з великою конкуренцією серед курсів іноземних
мов керівництво мовного центру «Language-House» прийняло рішення
поліпшити якість обслуговування своїх клієнтів. Для цього було вирішено
розробити сайт, що дозволяє користувачеві отримати потрібну
йому інформацію про центр. Отже, мета створення сайту – залучення нових
8
клієнтів за рахунок розробки сайту-візитки центру навчання іноземних
мов «Language-House».
Призначення розроблюваного сайту-візитки – надати відвідувачам
докладну інформацію про діяльність центру іноземних мов «Language-House»
(програми курсів, викладачі, вартість занять тощо), а також контактні дані для
зв’язку.
2. Виявлення потреб користувачів сайту
У процесі проєктування будь-якого сайту необхідно визначити
його конкурентні переваги, для цього необхідно зробити огляд і аналіз хоча б
двох сайтів конкурентів.
Під час визначення конкурентних переваг необхідно дати відповіді
на такі запитання:
 Хто головний конкурент компанії?
 Який сайт є конкурентом для розроблюваного сайту? Відповіді
не завжди вказують на один і той самий, особливо у випадку великих компаній
або зовсім нових сайтів.
 Чи існують сайти, які не є безпосередніми конкурентами, але мають
цікаві моделі для наслідування?
На основі огляду й аналізу сайтів-конкурентів варто потім стисло описати
переваги конкурентів, також недоліки, які зможе вирішити сайт,
що розроблятиметься. Саме це і є конкурентні переваги, що гарантують
наявність споживачів у розроблюваного сайту.
Щоб зрозуміти, чи правильно виявлено потреби користувачів, необхідно
описати цільову аудиторію сайту.
Британський бізнес-словник тлумачить поняття цільової аудиторії так.
Цільова аудиторія (англ. Target audience) – це група людей або сегмент
ринку, для яких призначений продукт, послуга, web-сайт, реклама, телевізійна
або радіопрограма тощо. Наприклад: ЦА інтернет-магазину обручок –
це люди, які планують укласти шлюб.

9
 Погане розуміння потреб потенційних відвідувачів може призвести
до того, що навіть дуже привабливий і функціональний сайт не зможе
привернути увагу необхідної аудиторії. Наприклад, чіткий опис цільової
аудиторії сайту дозволить спроєктувати такий призначений для користувача
інтерфейс, який враховуватиме інтереси відвідувачів сайту, адже інтерфейс
для тринадцятилітніх дівчат-підлітків не може бути схожий на інтерфейс
для дорослих чоловіків-бізнесменів середнього віку.
У процесі «складання портрета цільового споживача» необхідно дати
відповіді на такі запитання:
 Як зрозуміти, хто є цільовою аудиторією компанії?
 На якому етапі стратегії необхідно обирати цільову аудиторію?
 Де брати інформацію для складання портрета цільового споживача?
 Які характеристики існують для опису цільової аудиторії?
 Як детально потрібно описувати цільову аудиторію продукту?
 Чи існують особливості в описі цільової аудиторії для мого ринку?
Цільова аудиторія може бути широкою (наприклад, всі користувачі
інтернету «Воля») або вузькою (наприклад, споживачі, які користуються
можливістю доступу лише в інтернеті, або користувачі лише кабельного
телебачення). Чим ширше цільова аудиторія, тим її опис буде більш розмитим,
адже складно буде виокремити яскраво виражені характеристики споживачів
(всі споживачі будуть дуже різними).
На практиці більшість компаній втім, орієнтуються на широку цільову
аудиторію, обмежуючи її доходом, віком, цінностями. Потім широку цільову
аудиторію компанії поділяють на кілька груп за моделлю поведінки
споживачів, описуючи кожну групу вже більш детально (використовуючи
поведінкові характеристики і вираженість потреби споживача). Надалі для
кожної групи споживачів у межах широкої цільової аудиторії розробляються
окремі сторінки, групи товарів, окремі рекламні повідомлення та стратегії
роботи з клієнтами.

10
 Усі, хто може
купити продукт, всі Клієнти, які купують
Цільова аудиторія Ядро
потенційні клієнти найчастіше, регулярно
компанії

Група 1 Група 2 Група 3 Група 4

Вужчі групи споживачів у межах однієї цільової аудиторії, що відрізняються між

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

Рисунок 1.1 – Структура визначення цільової аудиторії

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

4. Опис цільового споживача

Ця модель була запропонована Джеррітом Антонідесом і Фредом ван
Раєм (Gerrit Antonides and W.Fred van Raaij), які розділили всі групи параметрів
для опису цільової аудиторії на три рівні:
 загальний рівень опису цільової аудиторії;
 опис цільової аудиторії на рівні товарної групи;
 опис цільової аудиторії на рівні бренду.
Загальний рівень опису цільової аудиторії – це складання портрета
типового покупця компанії за географічними, соціально-демографічними
і психографічними критеріями. Цей рівень опису цільової аудиторії допомагає
скласти чітку картинку людей за віком, характером і стилем життя.
На рівні товарної категорії необхідно описати особливості поведінки
типового покупця продуктів під час вибору, використання та покупки
продуктів на ринку. Прочитавши цей опис, читач має зрозуміти, за якими
параметрами поведінки «ваша цільова аудиторія» відрізняється від усіх

12
споживачів на ринку. Можливі характеристики цільової аудиторії наведені
в табл. 1.2.
Таблиця 1.2 – Характеристики цільової аудиторії
Характеристика ЦА Приклад опису ЦА за параметром
частота використання використовують щодня, раз на місяць, раз на пів
категорією року.
частота покупки категорії купують щодня, раз на місяць, раз на пів року.
використання кількості купують кілька торгових марок або вважають
торгових марок за краще 1 бренд.
де вважають за краще у продуктових магазинах, через інтернет, в аптеках,
купувати продукт на ринках тощо.
вважають, що соки шкідливі для здоров’я або
ставлення до категорії вважають, що вони важливі та їх необхідно пити
щодня.
вибирають товар безпосередньо біля полиці
магазину або вважають за краще запланувати
спосіб прийняття рішення
покупку заздалегідь; вибирають з одного
в категорії
або декількох брендів; спочатку вибирають за
ціною, типом дії тощо.

На рівні бренду автори методики пропонують описувати цільового

споживача за такими характеристиками: рівень знаннь про товар, ступінь
лояльності у бренду (дуже прихильні; лояльні; пересічені; які відмовилися),
сформовану думку про бренд (бренд А кращий, ніж бренд Б; бренд А більш
натуральний), намір придбати бренд.
Профіль користувача відповідає на запитання: «Хто ваш користувач?».
Він дозволяє створити уяву про вік, освіту, переваги користувачів, отримати
іншу необхідну інформацію.

13
 Кожен користувач має набір певних характеристик (атрибутів),
які докладно описують:
1. Початкові цілі користувача і завдання для досягнення мети. З якою
метою користувачі використовують ПЗ? Що вони намагаються зробити
(придбати товар, створити документ, передати електронне повідомлення,
знайти якусь інформацію, вивчити що-небудь, керувати, спілкуватися з будь-
ким, розважитися, підрахувати доходи протягом місяця тощо)? Як враховуються
завдання в загальному бізнес-процесі?
2. Дані: інформація, яка потрібна для виконання завдань.
3. Підсумок: очікуваний результат від вирішення завдань.
4. Бізнес-ролі визначаються цілями користувачів: здобувач роботи,
покупець квитка, особа, яка приймає рішення тощо. У подальшому з появою
додаткової інформації можливий додатковий розподіл ролей відповідно
до потреб, стилів тощо, наприклад, покупці інтернет-магазину можуть
виявитися любителями знижок або експертами.
5. Демографічні показники: вік, стать, сімейний стан, наявність дітей,
рівень доходу, географічне розташування тощо.
6. Досвід, зокрема освіта, ознайомлення з відповідними технологіями (ПЗ,
комп’ютери, засоби зв’язку тощо). Рівень знань предметної галузі
і частота використання (одноразово, періодично, часто).
7. Організаційні атрибути: розмір компанії, в якій працює користувач,
відділ, вид роботи (початковий рівень, фрилансер, керівництво вищої, середньої
ланки та ін.). Рівень зайнятості (довгострокова робота або висока плинність),
схеми організації роботи (дистанційна робота, частота відряджень тощо),
як користувачі виконують свою роботу (вручну, на комп’ютері, по телефону
тощо), яким чином взаємодіють з іншими особами та ін.
8. Технічні: інструментарій (комп’ютери та інші технічні засоби).
9. Серед користувачів: характеристики середовища, які можуть впливати
на виконання користувачами своєї роботи:

14
  фізичний аспект робочого середовища (освітлення, шум, робочий
простір, температура, наявність комп’ютерів, телефонів, кількість персоналу
і т.п.);
 місце роботи користувача і ступінь його мобільності (офіс, квартира,
стаціонарно, з пересуваннями тощо);
 питання ергономіки, умов праці (задіюються зір, слух, робота ведеться
стоячи/сидячи, на клавіатурі і т.п.);
 особливі запити (рівень підготовки, фізичний стан, інтерес
до пізнавального процесу, особливості мови і можливі недоліки);
 інтернаціоналізація та інші культурологічні умови (переклад, якість
перекладу, іконки, текст, повідомлення тощо
Виявлені атрибути користувачів ранжуються за важливістю, відповідно
до впливу на досягнення цілей користувача і застосовуються для ранжування,
профілювання і моделювання персонажів.
Приклад 1. Для сайту-візитки центру навчання іноземних мов
«Language-House» виокремимо кілька груп відвідувачів сайту.
Група 1 (підлітки і студенти молодших курсів):
 стать: переважно дівчата;
 вік: від 13 до 20;
 освіта: середня, незакінчена вища;
 фінансове становище: низький рівень доходів, що отримується
від батьків та у вигляді підробітку;
 інтереси: соціальні мережі, спілкування, друзі, блоги, подорожі,
музика, спорт і тощо.
Група 2 (студенти-старшокурсники, молоді фахівці):
 стать: переважно дівчата;
 вік: від 20 до 25;
 освіта: незакінчена вища і вища;

15
  фінансове становище: низький рівень доходів, що отримується
від батьків та у вигляді підробітків, середній рівень доходів;
 інтереси: друзі, робота, сім’я, спілкування, соціальні мережі,
інтернет, спорт, музика тощо.

...............................................................................

Група N (IT-фахівці):
 стать: переважно хлопці;
 вік: від 20 до 35;
 освіта: незакінчена вища, вища або декілька вищих освіт;
 фінансове становище: середнє, високий рівень доходів;
 інтереси: IT-технології, друзі, робота, сім’я, спілкування, соціальні
мережі, інтернет, спорт, музика тощо.
Отже, цільовою аудиторією сайту-візитки центру навчання іноземних мов
«Language-House» будуть: підлітки (від 13 до 18 років), студенти, молоді
фахівці, представники професій, які активно використовують англійську мову
(підприємці, керівники, працівники туристичного бізнесу, IT-фахівці та ін.).
Отже, сайт також має заохочувати відвідувачів, які знають англійську мову,
але хочуть удосконалити свої знання в певній галузі.
Згодом аналіз цільової аудиторії дозволяє визначити групи користувачів
(users) і описати те, як вони взаємодіятимуть з рішенням (наприклад, надання
групам користувачів різного рівня доступу до сайту).
Приклад 2. Приклад опису цільової аудиторії для школи англійської
мови «Hotspot».
1. Загальний рівень. Чоловіки і жінки у віці від 25 до 55 років.
Чітко розуміють, чого хочуть, мають достатню усвідомленість щодо мети
отримання освіти/самоосвіти, раціональні, прагматичні, серйозно налаштовані
на результат, мотивовані, мають достатню кількість фінансових коштів.

16
 2. Рівень категорії послуг, що надаються. Люди у віці від 25 до 55 років,
можливо вже не один раз намагалися вивчити англійську мову в інших школах,
але безуспішно. Люди, які спробували не одну методику і згодні йти на крайні
заходи – платити гроші, старанно працювати на результат. Люди, зосереджені
на деталях, перфекціоністи, прагнуть довести все до ідеалу. Можливо, раніше
пробували працювати з викладачами цієї школи, які використовують
екстремальні підходи і серйозні методи навчання.
3. Рівень бренду. Починаючи з першого заняття, люди залишаються
в школі не на один семестр, є прихільниками підходу школи; люди, які
не вписуються в цільову аудиторію школи, відмовляються від занять відразу
після першого безкоштовного пробного уроку.
У решти формується лояльність до школи: доброзичлива атмосфера,
школа регулярно підтримує це певними заходами для студентів.
Група 1 (IT-фахівці, юристи):
 стать: переважно чоловіки;
 вік: від 20 до 45;
 освіта: незакінчена вища, вища або декілька вищих освіт;
 фінансове становище: середній або високий рівень доходів;
 інтереси: англійська для програмування і законодавства, англійська
для спілкування і подорожей тощо.
Група 2 (жінки, фахівці інтелектуальної сфери):
 стать: жінки;
 вік: від 20 до 35;
 освіта: незакінчена вища і вища освіта, кілька вищих;
 фінансове становище: середній і високий рівень доходів, гроші
заробляються винятково їхньою працею;
 інтереси: англійська для роботи і подорожей, високий рівень граматики.
Група 3 (молоді люди):
 стать: дівчата / хлопці;

17
  вік: від 20 до 35;
 освіта: незакінчена вища, вища або декілька вищих освіт;
 фінансове становище: або високий рівень доходів, або батьки з високим
рівнем доходів;
 інтереси: англійська для комунікації, спілкування з іноземцями,
для навчання і роботи.
Отже, цільовою аудиторією «Hotspot» будуть: молоді люди (від 20 до
35 років), молоді IT-фахівці, представники інтелектуальних професій, які активно
використовують англійську мову. Школа призначена для людей, які мають
досвід у вивченні англійської, дуже мотивовані й мають достатній (середній
або високий рівень доходів) для оплати навчання. Важливим пунктом
є наявність великого бажання саморозвитку, вдосконалення своїх знань у
певній галузі.
Приклад 3. Опис цільової аудиторій для сайту власної IT-компанії.
Загальний рівень: підприємці (чоловіки та жінки) у віці 18-60.
Цілеспрямовані та знають чого хочуть, прагматичні. Чітко знають, який саме
продукт вони бажають замовити(сайти, додатки), для того щоб прорекламувати
свій продукт,і як результат збільшити його продаж.
Рівень категорії послуг, що надаються. Люди, які бажають освоїти
певний IT-напрямок і стати в ньому фахівцями. Люди, які бажають замовити
сайт, для реклами свого продукту. Люди, які бажають збільшити свій рівень
кваліфікації в IT-сфері.
Рівень бренду. Нині IT-сфера стала дуже популярною, саме тому дуже
багато людей стало переучуватися на програмістів. В інтернеті недостатньо
матеріалів для того, щоб стати фахівцями, тому люди ідуть на практики, які
влаштовують IT-компанії (компанія з прикладу 3). Крім того, сьогодні не так
багато компаній, які створюють дійсно якісний контент, як результат клієнти
дуже уважно підбирають собі партнерів для співпраці. В сукупності все це дуже
гарно вплине на популярність компанії (завдяки сайту).

18
 Група 1 (студенти всіх курсів)
-Стать: хлопці та дівчата;
-Вік: від 17 до 21;
-Регіон: Харків;
-Володіння комп ютером: високе
-Досвід роботи в IT: відсутній
-Інтереси: соц.мережі, спілкування, прагнення стати IT-фахівцями.
Група 2 (Підприємці)
-Стать: чоловіки та жінки;
-Вік: від 18 до 60;
-Регіон: Харків;
-Фінансове становище: високий рівень доходів, що отримується шляхом
ведення бізнесу
-Володіння комп ютером: середнє
-Інтереси: кар’єра, реклама власного продукту, аналіз продажу.
Група 3(Викладачі)
-Стать: жінки та чоловіки;
-Вік: від 23 до 70;
-Регіон: Київ;
-Володіння комп ютером: високе
-Досвід роботи в IT: вприсутній
-Інтереси: кар’єра, підвищення рівня кваліфікації,постійний розвиток.
Отже, цільовою аудиторією сайту моєї IT-компанії будуть: студенти (від
17 до 21 років) та підприємці(від 18 до 60 років). Таким чином, сайт також
повинен заохочувати відвідувачів, взаємодіяти з продуктами фірми
(підприємці), та здобувати нові знання в IT-сфері.

Use Case Scenario (варіанти використання, юзкейс, сценарій, прецедент,

сценарій використання.) Описує сценарій взаємодії учасників (як правило –

19
користувача і системи). Учасників може бути 2 і більше. Користувачем може
бути як людина, так і інша система.
Щоразу, коли ви знаходите актора, можете запитати, які інші потреби
(можливі варіанти використання) у нього є, і коли ви знаходите варіант
використання, ви маєте запитати, хто буде брати участь в ньому і хто
зацікавлений в ньому (хто наступний актор і хто зацікавлені сторони). Потім
можете визначити межі галузі і розставити пріоритети.
Кому і в яких випадках потрібні Use Case Scenario.
 Розробники. Дуже зручно, коли зелена вимога описана за допомогою
основного й альтернативного потоків подій. Все чітко і зрозуміло: хто, коли
і що викликає, і що отримаємо в наслідок. Іноді менеджер на проєкті може
використовувати підхід: мінімум описів, максимум спілкування. При цьому
дуже часто виникає ситуація коли для декількох складних сценаріїв розробники
самі просять зробити докладний опис, і тоді можна використовувати юзкейси.
 Замовникам. Описано людською мовою, замовник вчасно
може підтвердити, що це саме те, чого він чекає, або виправити.
 Тестувальникам. Майже готовий тест-кейс.
 Всій проєктній команді. Якщо сценарій потрібно узгодити,
а на кожній нараді два-три альтернативних варіанти сценарію звучить інакше,
допоможе чітко описаний потік подій.
 А також іншим учасникам процесу.
Для створення контенту web-сайту використання Use Case Scenario стає
корисним, оскільки в системі є не тільки (як правило) кілька акторів,
а й різні випадки для кожного типу контенту, так що можна посилатися
на ці UX результатів без дублювання і почати заповнювати прогалини, а також
пов’язувати результати типу тематичної стратегії (наприклад, workflow &
governance), вивчаючи бізнес-процеси і взаємодію системи / користувача.
Формат опису варіанта використання (за Коберном [2]):
1. Ім’я – мета у вигляді короткої активної дієслівної фрази.

20
 2. Контекст використання – довший опис мети.
3. Сфера дії.
4. Рівень точності.
5. Основна дійова особа.
6. Інші учасники та їхні інтереси.
7. Передумова (визначає, виконання якої умови гарантує система перед
тим, як дозволити запуск варіанти використання).
8. Мінімальні гарантії (найменші обіцянки системи учасникам, зокрема,
коли мета основної дійової особи не може бути досягнута).
9. Гарантії успіху (або марнослів’ям – postcondition – встановлює,
що інтереси учасників задовольняються за успішне завершення варіанти
використання в кінці основного сценарію).
10. Тригер (подія, яка запускає варіант використання).
11. Основний сценарій або потік (простий для розуміння типовий
сценарій, в якому досягається мета основної дійової особи і задовольняються
інтереси всіх учасників). Кожен крок основного сценарію описує: взаємодію
двох дійових осіб («Клієнт вводить адресу»); крок підтвердження для захисту
інтересу учасника («Система підтверджує PIN-код»); внутрішня зміна
для задоволення інтересу учасника («Система виводить суму з балансу»).
12. Розширення (запускаються в разі виникнення певної умови, містять
послідовність кроків, які описують, що відбувається за цієї умови,
і закінчується досягненням мети або відмовою від неї).
13. Список змін у технології та даних.
14. Допоміжна інформація.

Приклад 3. Use Case Scenario

Запит від замовника:
У мене є своя служба таксі, хотів би зробити мобільний застосунок
для замовлення таксі. Основний функціонал:
1. Клієнт
21
  Зробити замовлення
 Оплатити замовлення
 Оцінити послугу
2. Водій
 Бачити замовлення згідно з обраними налаштуваннями
 Прийняти замовлення
 Зв’язатися з клієнтом
 Відзначити замовлення як виконане
 Отримати оплату
3. Адміністратор (web-інтерфейс)
 Управління користувачами
 Управління замовленнями
 Звітність
 Розрахунок із водіями
Завдання: розробити Use Case Scenario: Водій – Прийняти Замовлення

Use Case
Водій – Прийняти Замовлення
Preconditions
1. У водія встановлено мобільний застосунок і він авторизований
як водій.
2. Водій налаштував параметри, за якими відображаються доступні
замовлення (клас авто, локація тощо)
3. Є одне і більше замовлень від клієнтів, які є такі самі водії
a. У разі онлайн-оплати система забронювала відповідну суму на рахунку
клієнта

Main Success Scenario

1. Водій відкриває екран пошуку замовлень

22
 2. Система виводить на екран список доступних відкритих замовлень,
відсортованих за замовчуванням відповідно до розташування до локації водія
3. Водій переглядає список і вибирає «зацікавило замовлення»
4. Система виводить деталі замовлення
5. Водій переглядає деталі й вибирає «прийняти замовлення»
6. Система бронює замовлення і запитує час прибуття у водія
7. Водій вказує час прибуття і вибирає «підтвердити замовлення»
8. Система:
a. Змінює статус замовлення на «машина в дорозі»
b. Відправляє повідомлення клієнту
c. Запитує у водія «перехід в режим навігації до точки старту»
9. Водій вибирає «перейти в режим навігації»
10. Система виводить маршрут до точки старту замовлення

Alternative Scenarios (приклади)

3a
Водій застосовує додаткову фільтрацію та сортування
1. Система застосовує фільтрацію та сортування до списку
2. Main Success Scenario з кроку 3

9a
Клієнт відхилив замовлення
1. Система
 виводить повідомлення водієві
 змінює статус замовлення на «Скасовано»
 виводить екран пошуку замовлень
2. Main Success Scenario з кроку 1

23
 Приклад 4. Use Case Scenario «Прогнозування погоди».
Preconditions
1. У користувача встановлено мобільний застосунок «Погода» і він
авторизований в ньому.
2. Користувач налаштував параметри, за якими відображається погода
(країна, місто)
Main Success Scenario
1. Користувач відкриває програму
2. Система виводить на екран список збережених міст
3. Користувач обирає конкретне місто
4. Користувач обирає категорію «Поточна погода»
5. Система:
a. враховує обране місто
b. враховує поточний час
c. завантажує дані
7. Система виводить прогноз

Alternative Scenarios
3а
1. Користувач обирає «Поточне місцезнаходження»
2. Main Success Scenario з кроку 4.
4а
1. Користувач обирає категорію «Погода на тиждень»
2. Система:
a. враховує обране місто
b. враховує період
c. завантажує дані
3. Main Success Scenario з кроку 7

1. Надати обґрунтування, навіщо потрібно вирішити цю проблему.

24
 Вирішення цієї проблеми допоможе:
‒ зрозуміти, як одягтися відповідно до погоди, одягти своїх дітей;
‒ будувати плани, щодо щоденних заходів, які проводяться на вулиці,
на свіжому повітрі, а також спланувати прогулянки;
‒ застерегтися від появи якихось ускладнень зі здоров’ям, пов’язаних
зі зміною атмосферного тиску, температури повітря.

2. Написати, за допомогою яких відомих методів, моделей і алгоритмів

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

Приклад 5. Use Case Scenario авторизації на сайті через email:

(Системний рейтинг), або на сайті для доступу в особистий кабінет. ~~
(рівень моря)

Контекст: Чи неавторизований клієнт авторизується на сайті, щоб сайт

його впізнав і показував персональну для нього інформацію: історію
переглядів, покупок, поточну кількість бонусних балів тощо, використовуючи
email як логін.
Рівень: мета користувача
25
 Основна дійова особа: клієнт (відвідувач нашого інтернет-магазину)
Сфера дії: Взаємодія клієнта із сайтом інтернет-магазину
Зацікавлені особи та інтереси:
‒ маркетолог хоче, щоб максимальна кількість відвідувачів сайту були
ідентифіковані для більшого охоплення персональних розсилок,
‒ фахівець безпеки хоче, щоб не було випадків несанкціонованого
доступу до персональних даних користувача, зокрема спроби підбору пароля
для одного акаунта або пошуку акаунта із слабким паролем,
‒ зловмисник хоче отримати доступ до бонусів жертви,
‒ конкуренти хочуть залишити негативні відгуки на товари,
‒ ботнет хоче отримати базу клієнтів магазину і за допомогою атаки
домогтися непрацездатності сайту.

Передумови: відвідувач має бути не авторизований.

Мінімальні гарантії: відвідувач дізнається факт успішної або неуспішної
спроби авторизації.
Гарантії успіху: відвідувач авторизований.

Основний сценарій:
‒ Клієнт запускає авторизацію.
‒ Система підтверджує, що клієнт не авторизований і не має
перевищення кількості неуспішних спроб авторизації із цієї сесії (пошук
слабкого пароля в безлічі акаунтів) з «Правила безпеки № 23».
‒ Система збільшує лічильник кількості спроб авторизації.
‒ Система відображає клієнту форму авторизації.
‒ Клієнт вводить email і пароль.
‒ Система підтверджує наявність клієнта з таким email в системі та збіг
пароля і відсутність перевищення кількості спроб входу в даний акаунт
з «Правила безпеки № 24».

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

Розширення:
2.а. Клієнт вже авторизований:
2.а.1. Система повідомляє клієнта про факт здійсненої раніше авторизації
та пропонує або перервати сценарій, або перейти до кроку 4, якщо крок 6
успішно пройдено, то крок 7 виконується з уточненням.
2.а.2. Система деавторизує клієнта під старим акаунтом, авторизує
клієнта під новим аккаунтом, у цьому випадку історія перегляду і корзина
цього сеансу взаємодії залишається в старому акаунті, в новий не переходить.
Далі перехід до кроку 8.
2.б. Кількість спроб авторизації перевищила поріг з «Правила
безпеки № 23»:
2.б.1. Перехід до кроку 4, на формі авторизації додатково відображається
капча
2.б.2. Система підтверджує коректне введення капчі.
2.б.2.1. Капча введена неправильно:
2.б.2.1.1. Система збільшує лічильник неуспішних спроб авторизації
та під цей акант.
2.б.2.1.2. Система відображає повідомлення про неуспішність і
повертається до кроку 2.
3.а. Акаунта з даними email не виявлено:
3.а.1. Система показує повідомлення про неуспішність і пропонує
на вибір або перехід до кроку 2, або перехід до сценарію «Реєстрація
користувача» зі збереженням уведеного email.
27
 3.б. Пароль від акаунта з цим email не збігається з введеним:
3.б.1. Система збільшує лічильник неуспішних спроб входу в цей акаунт.
3.б.2. Система відображає повідомлення про неуспішність і пропонує на
вибір або перехід до сценарію «Відновлення пароля», або перехід до кроку 2.
4. У ситуації коли лічильник спроб входу в цей акаунт перевищив поріг
з «Правила безпеки № 24».
4.а.1. Система відображає повідомлення про блокування входу в акаунт
в перебігу X хвилин і переходить до кроку 2.

Розробка структури сайту.

1) Визначення інформаційного наповнення та функціональних
можливості сайту
Наступним кроком, після чіткого визначення цілей розробки сайту, а
також ретельного аналізу цільової аудиторії необхідно уточнити, якими мають
бути інформаційне наповнення і функціональні можливості сайту, щоб
відвідувач, потрапивши на сайт, дійшов до цільового дії.
Наприклад. Наведемо приклад опису інформаційного наповнення
сторінок сайту центру вивчення англійської мови "Language-House".
Головна сторінка. На даній сторінці, описуючи переваги навчання в
центрі вивчення англійської мови "Language-House", необхідно стисло
висвітлити такі питання: підхід до навчання; кваліфікація викладачів,
традиційні програми навчання, спеціалізовані програми, формат навчання.
Необхідна інформація буде надана додатково.
Сторінка "Ціни". На даній сторінці необхідно розмістити інформацію про
час проведення занять, вартість занять загальних і спеціальних програм
вивчення англійської мови.
Сторінка "Контакти". На даній сторінці необхідно розмістити контактну
інформацію: адреса, телефони, E-mail, схему проїзду у вигляді карти і форму
зворотного зв'язку.

28
 2) Розробка структури сайту
Практично будь-який сайт може містити матеріали тексти, картинки,
мультимедійні та інші об'єкти. Для комфортного перебування відвідувача на
сайті і для полегшення пошуку потрібної інформації, сайт повинен мати чітку і
продуману структуру.
Структура сайту - це внутрішній устрій сайту, його «скелет»,
розташування сторінок, розділів, підрозділів, додаткових матеріалів.
Найпершим кроком розробників є створення строгого порядку з хаотичного
скупчення інформації.
З позиції розробника, структуру сайту умовно можна розділити на два
рівні - логічний і фізичний.
На логічному рівні структура сайту є сукупністю сторінок, які об'єднані
між собою єдиним дизайном, стилем і посиланнями.
На фізичному рівні структура сайту є впорядкованим набором файлів
різного типу (HTML-сторінки, зображення, програми, мультимедійні файли).
Продумана і зручна файлова структура допомагає розробнику оптимізувати
свою роботу, а також буде зрозумілою для інших фахівців, що працюють над
проектом.
2.1. Логічна структура сайту
Сайти з невдалою логічною структурою не тільки ускладнюють роботу
відвідувачів, вони позбавляють будь-якого бажання на них знаходитися, та
затрачувати час на пошук необхіднї інформації. Коли відвідувач не в змозі
зразу ж знайти потрібну інформацію, то у більшості випадків він зробить
припущення, що на цьому сайті необхідної інформації взагалі немає.
Розчаровані відвідувачі навряд чи запам'ятають цей ресурс, а тим більше
захочуть ще раз його відвідати.
Вдалий дизайн в першу чергу повинен орієнтуватися на користувача,
який без особливих зусиль може знайти і використовувати будь-яку
інформацію, що міститься в сайті. При цьому повинна бути абсолютно ясною
логічна схема сайту і логічний взаємозв'язок між окремими сторінками.
29
 Гарна навігація сайту означає, що користувачі точно знають, де
знаходяться, де розташовані елементи сайту і як використовувати ці елементи.
Правильна структура інформації дозволяє користувачам без побоювання
продовжувати мандри сайтом, і бути впевненими в тому, що вони завжди
зможуть без праці повернутися до раніше переглянутих сторінок.
На вдало організованих сайтах відвідувачі можуть вільно переміщатися в
пошуках потрібної інформації, не піклуючись про структуру сайту. Турбота про
структуру сайту є завданням розробника, а не відвідувачів. Такаж саме
програміст несе відповідальність за те як буде організована структура і якого
виду для різних типів сайтів вона буде.
Принципи логічного проектування. Логічне проектування передбачає
організацію інформації на сайті, побудову структури і навігації по розділах
сайту.
При проектуванні інформаційного наповнення сайту і засобів навігації
слід дотримуватися чотирьох базових принципів, які засновані на сприйнятті
інформації людиною.
1) Використання позначень.
2) Доцільність.
3) Одноманітність.
4) Поділ на частини.
Використання позначень. Використовуйте слова і терміни, які є
постійними і зрозумілими для більшості відвідувачів сайту. В цьому сенсі не
дуже вдалим є застосування піктограм. Іноді відвідувачі можуть неправильно
витлумачити такі зображення. Тому слід уникати незрозумілих термінів на
сторінці, а змістовні елементи (посилання і елементи навігації і ін.)
розміщувати з їх загальноприйнятими позначеннями (посилання з
підкресленням, відвідана посилання іншого кольору і т.п.)
Доцільність. Розділи сайту містять інформацію і елементи, які
відповідають змісту розділу або фрагменту сторінки, невідповідні елементи
краще перенести в інше місце або взагалі прибрати.
30
 Одноманітність. Використання єдиної навігації по сайту з однаковим
оформленням. Однакові елементи на сторінках повинні мати один і той стиль.
Наприклад, у всіх заголовках першого рівня повинний бути однаковий розмір
шрифту та місцезнаходження на сторінці. Якщо сторінки з певних причин
мають відмінності, відвідувач повинен чітко розуміти, чим вони обумовлені.
Поділ на частини. Людина не в змозі зберігати одночасно великий обсяг
інформації. Як правило, люди здатні сприймати інформацію, що містить від
чотирьох до шести різних елементів. Тому, відвідувачі сайту краще
орієнтуються і швидше знаходять потрібні для них матеріали, коли вони
візуально розділені на групи.
Логічна організація інформації. Організація даних у вигляді
впорядкованої структури повинна повідомляти відвідувачеві, яку інформацію
він може знайти на сайті і де її шукати. Структура сайту нагадує зміст книги:
якщо вона добре складена, то стає зрозуміло, що очікувати від книги до її
прочитання. Інформація повинна бути організована так, щоб відвідувач знав,
що його чекає на наступній сторінці вже за назвою посилання, на яку він
натискає.
Організація інформації на сайті може бути:
 лінійною;
 ієрархічної;
 мережевий (контекстно-залежною);
 комбінованої.
Лінійна структура. У лінійній структурі сайту сторінки можна
переглядати послідовно, одна за одною. З поточної сторінки можна перейти або
на наступну або попередню.

Сторінка 1 Сторінка 1 Сторінка 1

Рисунок 1.2 – Лінійна структура сайту

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

Рисунок 1.3 – Лінійна структура сайту з відгалуженнями

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

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

Рисунок 1.4 – Ієрархічна структура сайту

Кожна сторінка такої структури, крім головної, є підрозділом сторінок
більш високого рівня. Така структура має початок - першу сторінку, корінь
дерева, а кінець перегляду пов'язаний з вичерпанням всього матеріалу на сайті.
Переваги:
 Подібна структура може підійти для будь-якого виду сайту, будь то
домашня веб-сторінка, сайт-візитка, корпоративний сайт, портал або каталог.
 У користувача є вибір і можливість як з головної сторінки сайту, так і
будь-який інший, перейти в будь-який розділ, підрозділ і на конкретний
сторінку.
 Більша гнучкість.

33
 Основним недоліком даного виду структури є складність дотримання
балансу між глибиною і шириною. Якщо дерево сайту буде рости тільки вглиб,
то користувачеві, щоб дійти до необхідної сторінки, прийдеться завантажити і
переглянути велику кількість сторінок. Якщо ж сайт буде тільки
розширюватися, то щоб знайти потрібну інформацію, користувач буде
витрачати багато часу на вибір потрібного розділу. І перше, і друге викликає
негативні емоції у користувача, і частіше за все він полишає сайт розчарованим.
Тому необхідно постійно стежити за розростанням ресурсу і дотримуватися
правила «золотої середини», балансу між єлементами лінійної структури.
Гратчаста структура (блочна структура). В гратчастій структурі
сторінки розміщуються в різних гілках, але у користувача є можливість
переходити не тільки вертикально вгору-вниз, а й горизонтально, тобто між
гілками на різних рівнях.

Рисунок 1.5 – Гратчаста структура сайту

Область застосування сайтів з решітковою структурою – каталоги та
інтернет-магазини. Це обумовлено тим, що вона відносно складна в реалізації
та іноді структура сайту може вийти дуже заплутаною, і користувач буде
змушений довго блукати в пошуках потрібної інформації по сайту.
Мережева структура. Є найбільш поширеною структурою в Інтернеті.
Якщо сайт організований по мережевій структурі, то можна перейти з будь-якої
сторінки на будь-яку іншу, взаємопов'язану з нею. У подібній структурі

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

Рисунок 1.6 – Мережева структура сайту

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

Рисунок 1.7 – Комбінована структура сайту

35
 У користувача є можливість переходити по структурі не тільки
вертикально - вгору-вниз, а й горизонтально, тобто між гілками на різних
рівнях. При цьому переміщення між гілками на глибинних рівнях здійснюється
за допомогою відсилань на рубрики в інших розділах.
Поради по організації структури. Спроба створення структури сайту без
врахування думки відвідувачів є величезною помилкою, яка може нашкодити
популярності сайту. Сайт з красивим і приємним дизайном, але з погано
продуманою логічною структурою, як правило відштовхує користувачів.
Звичайно, можна створити логічну структуру сайту інтуїтивно. Однак,
однією з поширених помилок є використання на сайтах компаній схем, які є
прийнятними в компаніях, наприклад, розподіл товарів по брендам або повну
відповідність структури сайту в структурі організації. В результаті, можна
створити сайт, структура якого буде очевидною для його замовників, але
абсолютно незрозуміла для його відвідувачів.
Наприклад, якщо компанія займається продажем побутової техніки, то в
якості критеріїв товарів краще застосовувати тип товарів, а вже потім назву
фірми-виробника. Назва виробника може здатися загальновідомим для
співробітників організації, але бути незнайомим для потенційних покупців.
Логічну структуру сайту зручно представити картою сайту попередньо
проаналізувавши інформаційну складову і функціональні можливості сайту
складені в попередньому розділі.
Картою сайту називається візуальне представлення основних сторінок
сайту Як правило, за допомогою карти сайту проектувальник показує своїм
колегам і замовникам, як буде організований контент сайту. Карта дає загальне
уявлення про навігації по сайту, а в деяких випадках показує всі переходи з
кожної сторінки.
При розробці структури сайту слін враховувати наступне:
 необхідно заздалегідь спроектувати ієрархію сторінок і вибирати
оптимальну для сайту обраного типу та структур для ньго;

36
  необхідно провести аналіз структури сайтів – конкурентів;
 кожна сторінка, щоб була доступна в межах 3-х кліків від головної;
 наявність карті сайту;
 використання внутрішньї перелинковки між єлементами сторінки або
сайту;
 використовуйте людино-зрозумілий URL або URL Design в в назві
папок або підпапок;
 при структуруванні головної сторінки і розділів слід спирайтися на те,
чи зручно буде використовувати сайт користувачам;
 слід розташовувати однотипні файли в одній директорії. Наприклад,
файли з розширенням .png, .gif, .jpg в папці "img", а файли .pdf в папці
"download";
 слід памятати те, що пошукові системи не розрізняють графічні
зображення, тому вся важлива для ранжирування інформація повинна бути
подана в текстовому вигляді;
 слід виконувати перевірку наявності непрацюючих посилань і посилань
на неіснуючі сторінки;
 слід виконувати перевірку зручності навігації по сайту, як з точки зору
пошукових систем, так і точки зору користувача.
Приклад 1, карта сайту центру навчання іноземним мовам "Language-
House" представлена на рис. 1.8.

37
 Головна

Ціни

Наші клієнти

Питання-відповіді
Стаття 1
Відгуки Стаття 2
Статті ...
Контакти Стаття N
Наші викладачі

Загальний курс
Бізнес англійська
Бухгалтерам
Маркетологам
Банківська сфера
Сфера HR
IT сфера
Туристичний бізнес
Ресторанний бізнес
Школярам
Готельний бізнес

Співбесіда

Рисунок 1.8 – Карта сайту центру навчання іноземних мов

"Language-House"
2.2. Фізична структура сайту
Якщо логічна структура сайту являє собою набір тематичних рубрик -
сторінок ресурсу з і заздалегідь спроектованими гіпер зв'язками між ними, то
фізична структура, навпаки, має на увазі структуру розміщення фізичних
файлів по піддиректоріях папки, в якій опубліковано ваш сайт.
Очевидно, що логічна і фізична структури можуть не збігатися, оскільки в
загальному випадку фізична структура ресурсу розробляється, виходячи зі
зручності розміщення файлів. Однак більш-менш точне збереження порядку
проходження логічних розділів у фізичній структурі сайту дозволить уникнути
плутанини при подальшому доповненні і оновленні матеріалів.
Рекомендується розміщувати всі графічні зображення, які є елементами
проекту, в окремій папці з назвою «images», розташованої в кореневій
38
директорії сайту. Такий підхід дозволить оновлювати зберігаються в інших
тематичних розділах документи HTML без перенесення графіки,
використовувати одні і ті ж графічні файли у всіх розділах сайту і при
необхідності видаляти цілі директорії.
Як правило, посилання на всі розділи сайту з короткими анонсами їх
вмісту наводиться на першій, так званій стартовій сторінці, якої присвоюється
ім’я index.html (.htm). Якщо тематичні рубрики містять власні підрозділи, то
кожна з них також має свою стартову сторінку, що називається index.html.
Таке ім’я файлу рекомендується привласнювати всім стартовим
документам сайту, оскільки в іншому випадку при зверненні до будь-якого
розділу за допомогою скороченого URL без вказівки назви стартової сторінки
браузер відобразить не саму веб сторінку
(наприклад,http://www.mysite.uа/photos/ замість http://www.mysite.uа/photos/start
page.html ). А перелік зберігаються в цій папці файлів.
Для того щоб все гіперпосилання на веб сайті працювали коректно, всі
документи відкривалися правильно і браузер не видавав помилок при зверненні
до будь-яких розділах ресурсу, при створенні його фізичної структури слід
дотримуватися кількох правил:
 призначати імена директорій, імена і розширення документів HTML і
графічних файлів з використанням символів тільки латинського алфавіту і
тільки в рядковому регістрі;
 намагайтеся, щоб імена створених файлів і директорій не
перевищували по довжині восьми символів;
 при присвоєнні імен файлів документів HTML намагайтеся стежити за
тим, щоб ці імена були «смисловими», згодом ви легко можете забути вміст і
призначення будь-якої веб сторінки, якщо імена файлів будуть виглядати,
наприклад, як l.html, 2.html, 3.html і т. д.

39
 З усього сказаного стає очевидним, що фізична структура сайту
прихована від відвідувачів ресурсу, і вони можуть бачити тільки логічну
структуру.
Приклад фізичної структури сайту центру навчання іноземним мовам
"Language-House" (рис. 1.9).
2.3. Розробка анотованих макетів (Wireframes).
Для формування структури сторінок сайту і функціональних аспектів
поведінки на них створюють макети (Wireframes) сторінок. Wireframes
(структурна схема сторінок або анотовані макети https://wireframe.cc/) – є
варіантом компонування матеріалу на сторінках сайту. Розробка анотованих
макетів, це важлива частина розробки, що надає змогу розробникам на ранній
стадії зрозуміти, як буде виглядати кінцевий продукт, оцінити інформативність
і компоновку елементів.
Wireframes містить розділи контенту, навігацію, елементи форм, а також
опис поведінки і взаємодії елементів станиці. Wireframes створюються на
основі вимог висунутих на попередніх етапах, а також відповідно до
сформованим в мережі правилам і стандартам, які дозволяють підвищити
ефективність і зручність роботи з сайтом або, іншими словами, юзабіліті сайту.

40
 /language_house

/prices

/our_Clients

/questions-answers

/feedback
article_1.html

/article article_2.html
...

/contact
article_n.html

/our_teacher

banking_sector.html
tourism_business.html
/kurs general_course.html

it.html
restaurant_business.html
business_english.html

hr.html
schoolchildren.html
accountants.html

sales_purchases.html a
interview.html
marketers.html

hotel_business.html

/image image_1.jpg

image_2.jpg
/sours ...

index.css image_n.jpg

index.css

Рисунок 1.9 – Фізична структура сайту центру навчання іноземним мовам

"Language-House"
Приклад Wireframes для головної сторінки відображений на
рис. 1.10(Wireframes розроблено за допомогою http://www.gliffy.com/ ).
Розробка анотованих макетів в інтернеті може проводитися за
допомогою одного з ресурсів:
 http://www.gliffy.com/

41
 https://wireframe.cc/
 https://app.moqups.com/
 https://www.gliffy.com
 та інші.

Рисунок 1.10 – Wireframes головної сторінки

42
Рисунок 1.11 – Wireframes сторінки «Навчання»

43
 Підсумки проєктування. За отриманими Wireframes було розроблено
дизайн-макети сторінок (рис. 1.12, 1.13), а на підставі результатів отриманих в
розділах 1-4 верстається повноцінний сайт.

Рисунок 1.12 – Дизайн макета «Головної сторінки» сайту

Рисунок 1.13 – Дизайн макета сторінки «Навчання»

44
 1.3 Зміст звіту

1. Титульний аркуш до виконуваної практичної роботи (див. додаток А).

2. Постановка завдання.
3. Мета роботи.
4. Аналіз користувальницьких груп і запис результату.
5. Характеристики груп користувачів, які впливають на досягнення цілей
користувача щодо зручності та простоти використання.
6. Виконати аналіз конкурентів для вашого сайту.
7. Визначити, які призначені для користувача групи використовуватимуть
як персонажі для збору вимог, що висуваються користувачами.
8. Use Case Scenario для проблеми за варіантом.
9. Опис процесу роботи вибору типу структури сайту.
10. Результатати розробки структури сайту.
11. Скрішоти (читабільні) анотованого макету сайту в Wireframes або
іншому програмному засобі для розробки макетів.
12. Висновки з роботи.
13. Сформулювати висновки і пояснити результати.
14. Відповіді на контрольні запитання (парний варіант дає відповіді
на парні питання, непарний варіант дає відповіді на непарні запитання, не
більше 5 питань).

1.4 Контрольні запитання та завдання

1. Як визначається мета створення сайту?

2. Який процес розробки інтерфейсу користувача?
3. Опишіть процес проєктування сайту.
4. Як виявляються потреби користувачів сайту?
5. Що таке цільова аудиторія?
6. Як можна визначити цільову аудиторію користувачів?
45
 7. Наведіть характеристики для опису цільової аудиторії.
8. Дайте опис визначення цільового споживача.
9. Що таке профіль користувача?
10. Наведіть характеристики (атрибути) користувачів, які дозволяють
описати «Профіль користувача».
11. Що таке інформаційне наповнення та функціональні можливості
сайту?
12. Процес визначення інформаційного наповнення та функціональних
можливості сайту.
13. Розробка структури сайту.
14. Логічна структура сайту.
15. Фізична структура сайту
16. Принципи логічного проектування.
17. Лінійна структура.
18. Карта сайту.
19. Лінійна структура сайту з відгалуженнями.
20. Ієрархічна структура.
21. Гратчаста структура (блочна структура).
22. Мережева структура.
23. Комбінована структура.
24. Рекомендації по організації структури сайтів.
25. Розробка анотованих макетів.

46
 ПРАКТИЧНА РОБОТА №2.
Аналіз інтерфейсу користувача. «Кросбраузерність веб-сайту»

Мета роботи: Отримання практичних навичок роботи в

проведенні юзабіліті експертизи сайту.
ознайомлення з поняттям, основними принципами
та вимогами кросбраузерності. А також
ознайомлення з основними методами досягнення
коректного відображення веб-сайту у різних
браузерах.

Досліджуваний матеріал: Інтерфейс: помилки і їх ціна. Наскільки сильно

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

1. Постановка задачі
Вивчити відомості по темі роботи і скласти пропозиції і рішення щодо
змін і коригування основної сторінки сайту компанії.

2. Порядок виконання роботи

1. Отримати у викладача індивідуальне завдання для виконання роботи.
2. Вивчити теоретичний матеріал.
3. Вибрати сайт для якого буде проводитися аналіз (аналіз проводится в
рамках теми, що було обрано на лабораторній роботі № 1 для розробки сайтів.
Тобто слід обрати хочаб одного конкурента та проаналізувати його сайт. Під
час виконання завдання обирати лише українську або англомовну версію).
Узгодити з викладачем. Перевірити на відповідність інтерфейсу головним
принципам юзабіліті.

47
 4. Сайт з попереднього пункту перевірити на відповідність вимогами
кросбраузерності (аналіз виконати мінімум для двух дивайсів, а саме
комп’ютерна версія та мобайл), відзначити які саме вимоги були порушені та
навести скріншоти.
5. Скласти пропозиції і рішення щодо змін і коригування основної
сторінки сайту компанії.
6. Створити просту веб-сторінку (можна використовувати результати
першої лабораторної роботи). Завантажити будь-який файл reset.css або
normalize.css та підключити його до вашої веб-сторінки. Перевірити
ідентичність відображення сторінки у популярних браузерах.
7. Перевірити просту веб-сторінки (можна використовувати результати
першої лабораторної роботи) на кросбраузерність. Усунути недоліки за
допомогою умовних коментарів.
8. Перевірити веб-сторінку (можна використовувати результати першої
лабораторної роботи) за допомогою сервісу Browsershots. Пояснити чому саме
сторінка може мати різний вигляд.
9. Зробити висновки по роботі.
10. Оформіть звіт.

3. Хід роботи

 Вибрати укранських сайт.

 Оцінити призначений для користувача інтерфейс. Виявити помилки і
як вони впливають на імідж сайту
 Запропонувати рішення по зміни і коректування основний візитній
картці фірми - сайту компанії.
 Дайте рекомендації і пропозиції на майбутні для планування
рекламної компаній в мережі інтернет для даного сайту.

48
  Перевірити веб-сторінку свого сайту за допомогою сервісу
Browsershots та внести необхідні зміни за потребою.
 Зробіть висновки.
 Оформіть звіт.

Теоретичні відомості
Для підготовки до практичного заняття необхідно повторити лекційний
матеріал і ознайомитися з рекомендованою літературою [1 – 4; лекц. 1 – 4].
Поняття юзабіліті та інтерфейс користувача. Інтерфейс у загальному
випадку цє засіб який надає змогу людині взаємодіяти з комп'ютером і
програмами, це не тільки екранні форми самої програми, але так само
клавіатура, миша, монітор і тп. все те, що дозволяє здійснювати зв'язок між
користувачем і комп'ютером.
Юзабіліті веб-сайтів пов’язане з поняттям «призначений для користувача
інтерфейс». Призначений для користувача інтерфейс - це графічні елементи
екрану і його програмні функції, тобто такі єлементи як меню, кнопки і тп.
Юзабіліті (від англійського usability - "зручність використання) - це
якісна оцінка простоти і комфорту роботи з сайтом. Користувач повинен без
праці знаходити потрібну інформацію, не гублячись у функціоналі і численних
сторінках, і при цьому отримувати естетичне задоволення від роботи з
ресурсом.
Вплив принципів юзабіліті на якість сайту:
 Конверсія. Правильно продумана навігація підштовхне користувача
виконати цільове дію: зателефонувати в компанію, скачати прайс-лист,
замовити товар, скористатися послугою і т.д. Важливо грамотно вибудувати
розповідь і структуру, адже якщо відвідувач задумається хоча б на кілька
секунд або не відразу зрозуміє, що робити далі - можна його втратити.
Наприклад, якщо, потрапивши на головну сторінку, він з перших же рядків не
дізнається про сферу роботи компанії, що не зорієнтується, де знаходиться і що
робити далі - він без жалю закриє вкладку. Якщо він не знайде розгорнутих
49
відповідей на питання, що цікавлять у вигляді статті, відео, графіки –
користувачь покине сайт і більше не зайде на нього.
 Відвідуваність. Користувач повернеться на сайт тільки в тому випадку,
якщо йому сподобається з ним працювати. Ресурс повинен бути зручним і
зрозумілим, а саме текст, навігація, інтерфейс, послідовність дій і т.д.
Помилок при проектуванні користувальницького інтерфейсу може бути
маса, і деякі настільки очевидні, що не обов'язково бути експертом в області
юзабіліті і проектування, щоб їх не помітити. На рисунку 14 наведено простий
приклад дуже поганого інтерфейсу.

Рисунок 2.1 – Помилоки при проектуванні користувальницького

інтерфейсу (Когнітивне перенавантаження)

Принципи юзабіліті web-сайту.

Розробка юзабіліті сайту базується на головному правилі: «чим простіше
- тим краще». Чим більш звичну структуру і інтерфейс бачить користувач - тим
легше йому зорієнтуватися і тим менше часу він витратить, щоб знайти
потрібний розділ, тому що буде почувати себе більш впевнено.
1) Дизайн - запорука довіри до сайту. Не слід перевантажувати візуальну
частину безліччю деталей, квітів і динамічних елементів. Користувача нічого не

50
повинно відволікати від сприйняття головної інформації що є на сайті. При
тривалому знаходженні на сайті користувачь не повинен втомлюватися від
великої кількості контрасту, поганої читабельності тексту, різнопланової
графіки. Слід продумати поєднання кольорів фону і шрифту, число і вид
зображень.
2) Логічний та структурований контент. Структура, оформлення,
інформативність, логічна розбивка, оптимізація, відсутність помилок - всі ці
параметри важливо враховувати при написанні статті таму що вони впливають
на сприйняття текстів. Якщо це довгий текст слід зробіти зміст у вигляді
посилань, щоб користувач міг швидко знайти потрібний розділ. Довжина
сторінки не впливає на те, чи буде користувач вивчати контент нижче чи ні,
тому що важливіше грамотно продумана структура графіки і тексту: виділення
пріоритетною інформації, послідовність розташування.
3) Важлива інформація - в лівому кутку. Відвідувачі переглядають web
сторінку за F-образному шаблоном, або за «правилом золотого перетину»:
увага концентрується в верхньому лівому кутку і обмежується першими
кількома абзацами тексту в порядку спадання. Тому при розподілі важливої
інформації використання такої схему збільшить ймовірність того, що відвідувач
швидко знайде потрібні дані, побачить найважливіше, побіжно пробігши по
розділу поглядом.

Рисунок 2.2 – Принцип "Золотого перетину" (або "божественна

пропорція") у вигляді мушлі в розрізі

51
 Рисунок 2.3 – Принцип "Золотого перетину" (або "божественна
пропорція") при розробці дизайну Twitter
4) Діалог з користувачем. Успішна реєстрація, етап оплати замовлення,
прийняте замовлення, неіснуюча сторінка – користувач повинен бути завжди в
курсі того, що саме відбувається у всіх подробицях в конкретний момент часу
при виконанні конкретних його дій. Також якщо користувачь зареєстрований в
системі слід розповісти/допомогти, що робити далі, якщо замовлення прийняте:
вказати номер, час очікування дзвінка, контактні дані; якщо користувач
потрапив на сторінку 404 - як знайти потрібну інформацію або куди слід
повернутися. Завдяки цьому потрапивши на таку сторінку 404, користувач не
розгубиться і, швидше за все, не відразу покине ресурс.
5) Скасування дії. У людини повинна бути можливість передумати.
Наприклад, деякі інтернет-магазини дозволяють користувачеві змінити або
видалити замовлення після його оформлення, відкоригувати спосіб доставки і
оплати.
6) Ненав'язлива пропозиція про допомогу. Не потрібно наполягати на
спілкуванні! Великі випадаючі вікна з пропозицією допомогти у виборі,
кольорова смужка з номером телефон, що займає третину екрану - подібні
елементи не тільки виглядають нав'язливо, відштовхують відвідувача, але і
закривають частину функціоналу. Вікно допомоги повинно легко ховатися,

52
тому хрестики та інші подібні значки потрібно робити помітними, а не
напівпрозорими або що зливаються з фоном.
7) Розмова на зрозумілій мові. Не слід робити акцент на спеціалізованих
термінах – бажано використовувати «прості слова», щоб користувачеві не
довелося витрачати час на тлумачення незрозумілого слова. Якщо без
«спеціальних термінів» не обійтися необхідно додавати спливаючі вікна-
підсказки. Дане правило стосується заповнення форм: якщо є додаткові умови у
вигляді довжини імені, пароля, формату телефону, географії слід вкажати що
саме у вигляді підказок.
8) Відмова від різких змін. Найбільш частіше, це стосується пунктів
меню, назви і виду кнопок, їх розташування. Користувач може не тільки
витратить більше часу, але і розчарується, помітивши, що замість значка
кошика тепер – «Додати товар», замість «Каталог» – «Продукція», а звичні
об'ємні кнопки обтічної кнопки стали плоскими і рубаними. Тому слід зміні
вводити поступово і не міняти кардинально звичну структуру.
9) Всі можливості доступні та на видних місцях. Гарне враження складає
сайт, де користувач бачить всі розділи, по яким може перейти, тому що в будь-
який момент може швидко зорієнтуватися, де знаходиться і як повернутися
назад. Якщо на сайті планується багато контенту, тоді слід передбачити
горизонтальне верхнє, вертикальне меню, а також «підвал». Якщо це
минималистична «візитка» або landing page, тоді досить тільки верхнього
горизонтального меню. Якщо в структурі сайту дуже багато категорій, то
необхідно додати пункт «Карта сайту», який надасть змогу користувачеві
зорієнтуватися, які розділи містить ресурс і як йому туди потрапити.
10) Форма реєстрації та замовлення.Чим більше полів для заповнення,
тим менше користувачеві хочеться витрачати на це час. Причому компонування
полів, написів, підбір шрифтів можуть бути ідеальними, а довжина форми
занадто переповнена. Сучасні основи юзабіліті змушують веб-розробників
скорочувати довжину форм до мінімуму.

53
 11) Помітно довге поле пошуку. Кнопка пошуку на сайті єосновним
помічником користувача, с точки зору пошуку необхідної інформації на
великому ресурсі. Рядок пошуку повинен знаходитися на видному місці, у
верхній частині сайту при цьму довжина поля пошуку в середньому повинна
вміщати 18 символів, а оптимальна довжина – 27 символів (за дослідженнями
Якоба Нільсена).
12) Більше вільного простору. Слід пам’ятати, що якщо сторінка буде
переповнена корисними блоками, розділами, ремарками та іншою інформацією
– користувач загубиться і не зрозуміє, куди спрямувати увагу в першу чергу.
Сучасний дизайн схильний до мінімалізму: на сторінці – тільки найважливіше.
Після того як всі принципи юзабіліті враховані, переходять до
тестування, яке проводиться постійно, тому що будь-яка помилка може
відштовхнути потенційного клієнта.
Наскільки сильно можуть вплинути помилки проектування на
ефективність ресурсу?
Все залежить від тих бізнес-задач, які перед ним стоять. Якщо ресурс не
комерційний, втрати можуть бути опосередкованими, в першу чергу
репутаційні та тимчасовими. Якщо ресурс слугує комерційним цілям
(наприклад інтернет-магазин), втрати виходять за рамки репутації і часу.
В першу чергу, ресурс втрачає потенційних покупців через погану
опрацювання інтерфейсу, що робить його незручним і не викликає довіри у
користувачів.
Другий важливий фактор – витрати на рекламу і пошукову
оптимізацію. Для того, щоб підвищити кількість переходів і взяти, що
називається, числом, необхідні безперервні і дуже суттєві фінансові вкладення.
Третій фактор – складність модернізації Додаючи нові розділи і послуги
в непідготовлений під масштабованість інтерфейс, ресурс стає ще складніше, а
структура інтерфейсу просто розсипається, перетворюючи сторінки сайту в
суцільну інформаційну масу з мінімальною ефективністю.

54
 У сухому залишку отримуєте ресурс, який не задовольняє бажанням
ваших потенційних клієнтів і дуже дорогий, що сильно знижує його
можливості на високо конкурентному ринку.
Ціль юзабіліті експертизи – отримання якісної оцінки юзабіліті-
характеристик системи, отримання переліку ергономічних проблем системи і
рекомендацій щодо їх усунення.
Роботи, що виконуються в ході ю-експертизи:
 Експертна оцінка ключових юзабіліті-характеристик продукту.
 Аналіз існуючого продукту на предмет наявності недоліків і проблем
рівня: Інформаційної архітектури (ІА) призначеного для користувача
інтерфейсу і взаємодії (ПІ) Графічного оформлення, дизайну і верстки (ДВ).
 Ранжування недоліків і проблем (за важливістю, складності, і т.п.),
кількісний аналіз зауважень.
Юзабіліті експертиза сайту відповідає на главний питання: чому
відвідувачі так швидко покидають сайт? І виявляє проблемні місця на сайті
заважають відвідувачеві залишатися на сайті і взаємодіяти з ним. Існує кілька
варіантів проведення юзабіліті експертизи:
1) Аналіз статистики, наприклад, Google Analytics, Яндекс.Метрики,
статистики Bitrix і ін. Лічильники встановлені практично на кожному сайті,
дані надаються безкоштовно, є можливість провести порівняльний аналіз
статистики схожих сайтів, якщо є відповідний доступ. До основних мінусів
даного методу можна віднести недостатній обсяг даних і поверховість
висновків.
2) Робота з відгуками відвідувачів. Що може бути простіше, ніж запитати
у самого користувача, що йому подобається на сайті? На деяких сайтах
спеціально для цього розміщують форми голосування та зворотного зв'язку.
Якщо будь-які елементи сайту викличуть у користувачів це визове антипатію,
вони не посоромляться висловитися по цьому питанню. Реалізувати форму
зворотного зв'язку на сайті і обробити отримані відгуки нескладно, головне -

55
періодично відстежувати думки відвідувачів. Мінусом методу є те, що у
відгуках будуть вказані тільки основні помилки, присутні на сайті.
3) Тестування юзабіліті сайту. Цей спосіб підходить, якщо є сумніви в
успіху нововведень на сайті. Для тестування сторінок можна використовувати
спеціальний інструмент від Google – оптимізатор web-сайтів і фокус-групи.
Необхідно підібрати людей і дати їм заздалегідь підготовлене завдання по
досягненню мети сайту. Група поділяється на дві частини, і кожна працює зі
своїм варіантом сайту. За діями учасників експерименту ведеться
спостереження, за результатами якого потім робиться висновок про те, який
варіант сайту найбільш зручний. Плюсом методу можна вважати ідеальний
вибір між двома варіантами, статистично підтверджений. Мінус в тому, що
необхідно сформувати і мотивувати фокус-групу, і загальних порад зі зміни
ресурсу ви не отримаєте.
4) Спостереження за діями відвідувачів. Вибравши цей метод, можна
збирати фокус-групи, позначати різні завдання для них і охоплювати будь-які
цільові аудиторії, в тому числі і змішані. Для спостереження можна також
скористатися інструментом Вебвізор, представленим в Яндекс.Метрика.
Вебвізор записує всі дії відвідувачів на сайті. Плюсів у цього способу дуже
багато: великий обсяг даних для аналізу, різні варіанти висновків, чітка цільова
група, можливість безкоштовного аналізу та ін. Мінусом може бути відсутність
Спостережницьку досвіду: потрібно бачити, що саме заважає відвідувачеві
досягти мети, і правильно знаходити рішення проблем.
5) Проведення експертизи. Для оцінки юзабіліті сайту можна замовити
експертизу у професіоналів. Ця послуга є платною, але і результат буде
високим. Другий варіант – провести експертизу самостійно. Для цього
необхідно мати досвід і навички пошуку юзабіліті-помилок. Почати слід з
визначення основних цільових груп і завдань, які сайт допомагає вирішувати.
Потім свіжим поглядом потрібно пройти по основному шляху для конкретної
цільової групи, неупереджено фіксуючи помилки. Такий варіант експертизи
буде безкоштовним, але за його ефективність відповідати буде важко.
56
 Як правило, кожна юзабіліті-проблема описується в форматі:
 Що погано і чому (фіксування проблеми).
 Що робити, щоб стало краще (рекомендації).
 Опціонально, наводяться ескізи, що ілюструють наведені рекомендації
 Ранжування проблеми: за складністю реалізації; за важливістю
реалізації; за ступенем серйозності проблеми; по виду проблеми (ІА, ДВ, БФ).
Приклад юзабіліті експертизи (стисло).
1) Вибір сайту: http://planetarium-kharkov.org/
2) Оцінити призначений для користувача інтерфейс. Виявити помилки і
як вони впливають на імідж фірми.
Інтерфейс сайту виглядає дуже спецефічно, а також трохи застаріло,
можливо через те, що уже деякий час не оновлювався і тому має неактуальну
інформацію. Зліва в сайдбарі міститься меню сайту та деяка контактна
інформація, справа - містяться посилання на останні новини. У футері
міститься мапа сайту, що є дуже добре, адже це може значно допомогти у
пошуку та перегляді інформації.
При аналізі сайту були виявлені помилки:
a) Непотрібна інформація. На деяких сторінках у правому сайдбарі
з’являється блок “Цікаве у мережі” де міститься статті з інтернету, які зовсім не
є доречними для веб сторінки Планетаріуму.

Рисунок 2.4 – Розбіжність в тематиці реклами до тематики сайту

57
 б) Розмір шрифта. У блоці “Меню сайта” текст надрукований різними
шрифтами, що виглядає не дуже добре.

Рисунок 2.5 – Текст надрукований різними шрифтами

в) Неактивні посилання. Посилання для зворотного зв’язку не є
активними, тому потрібно власноруч вводити пошту, що витратить ваш час.

Рисунок 2.6 – Неактивні посилання

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

58
 Рисунок 2.7 – Результати пошуку
д) Розташування зображень. У вкладці “Архівні фото” усі зображення
мають різний розмір, тому їх розташування виглядає неохайно і в деяких
місцях картинка перекриває текст під фото.

Рисунок 2.8 – Вид вкладки “Архівні фото”

ж) Сайт не розрахований на іноземних користувачів. На головній
сторінці міститься посилання “Eng”, яке, на перший погляд, передбачає
переклад сторінки, але насправді це звичайне посилання на статтю на
англійській мові. Також всі посилання які містяться на цій сторінці

59
посилаються на сторінки українською мовою, через що іноземним
користувачам доведеться користуватися перекладачем.

Рисунок 2.9 – Відображення проблем з пункту ж

В цілому інші елементи сторінки гарно виглядають, є інтуітивно
зрозумілими, націлені на конкретну аудиторію.
3) Рішення по внесенню змін і корективу основної візитної картки сайту –
сайту компанії: видалити з сайту всю зайву інформацію, яка не стосується
Планетаріуму. Весь шрифт на сайті потрібно зробити одного розміру. Зробити
активним посилання на пошту, для більшої зручності користувача. Реалізувати
пошук по сайту не через гугл платформу, щоб уникнути зайвої інформації при

60
пошуку. Відредагувати сторінку “Архівні фото”, щоб усі елементи коректно
відображалися. Зробити переклад сайту на англійську мову.
4) Рекомендації і пропозиції: Слід зробити кращу тематичну навігацію по
сайту та оновити дизайн: зробити корекцію кольору деяких елементів сайту;
зробити як можна більше однокольорових розділів. Коли усе пестрить
контрастними кольорами це не завжди добре. Це може напружувати зір та через
це користувач може покинути сайт. Було б дуже добре зробити переклад сайту
не тільки на англійську, а також ще на декілька інших мов. Також потрібно
слідити за становищем сайту та постійно оновлювати його, видаляти
неактуальну інформацію.
Після неодноразового тестування та проведення юзабіліті експертизи
були реалізовані:
 новий дизайн;
 адаптивна версія сайту;
 покращена навігація;
 всі пропозиції протестовані і обгрунтовані на реальних даних;
 замовнику запропоновані подальші рекомендації;
 зменшився відсоток відмов;
 збільшилася конверсія;
 59% людей дали позитивні відгуки про сайт в порівнянні з попереднім
результатом в 10,5%.
Кросбраузерність - властивість сайту відображатися і працювати у всіх
популярних браузерах коректно.
Коректним можна вважати відображення в наступних випадках:
 структура сайту збережена;
 відсутні розвали в верстці;
 немає непередбачених накладень тексту на інший текст і тексту на
зображення;
 збережена загальна читабельність інформації на сторінці.

61
 Поняття «Кросбраузерність» дуже часто плутають з попіксельною
відповідністю, що насправді є різними поняттями.
Існує декілька причин неправильного відображення web-сторінок в різних
браузерах, пов'язаних зі сприйняттям коду, причому конкретними проблемами
є наступні:
1) Верстка може не відповідати деяким стандартам html.
2) З плином часу з'являються нові стандарти, внаслідок чого правила CSS
коригуються, а бібліотеки стають більш розширеними. Нові версії браузерів
Firefox, Google, Chrome, Opera і Safari повністю підтримують такі стандарти, а
старі можуть сприймати такі web-сторінки некоректно.
3) Кожен браузер має свої атрибути (колір і розмір шрифту, елементи,
іконки), виставлені за замовчуванням.
Для того що б добитися кросбраузерності потрібно використання не
тільки стандартних засобів CSS, а й чималої кількості спеціальних CSS-
селекторів, призначених для окремих браузерів.
Існує 3 основні методи домогтися однакового відображення сайту в
браузерах:
1) Використання CSS Reset/ Normalize.
2) Поділ стилів за допомогою умовних коментарів.
3) CSS hacks.
1.1.1 CSS Reset/ Normalize
Кожен браузер встановлює свої значення стилів за замовчуванням для
різних HTML-елементів. Reset.css та Normalize.css – це файли налаштування
CSS, за допомогою якихбраузери починають відображати всі елементи більш
послідовно і відповідно до сучасних стандартів. Були проведені дослідження
для виявлення відмінностей між стилями браузерів за замовчуванням для того,
щоб нормалізувати тільки ті стилі, які відрізняються один від одного.
В якості найпростішого використання методу скидання стилів можна
використовувати універсальний селектор (*) на початку CSS-файлу.
*
62
 {
margin: 0;
padding: 0;
}

За допомогою цього CSS-правила задаємо всім елементам нульові

відступи (margin і padding). Застосування універсального селектора частіше за
все не є бажаним через несумісність з деякими браузерами(наприклад, IE), тому
рекомендується використовувати CSS-правила, що стосуються конкретних
HTML-елементів. Наприклад:
p { margin: 5px 0 10px 0; }

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

Таким чином, декларуючи конкретні правила відображення певних

елементів на HTML-сторінці зменшуємо можливість браузера відобразити
сторінку не так, як треба.
CSS Reset як і CSS Normalize необхідно винести в окремі файли (їх
називають reset.css чи normalize.css, відповідно). У цьому випадку ви зможете

63
використовувати їх в інших проектах виконавши лише підключення їх до
ваших HTML-сторінок.
1.1.2 Поділ стилів за допомогою умовних коментарів
Поділ стилів для різних браузерів – один з найпоширеніших способів
кросбраузерності верстки. Суть методу полягає в ідентифікації виду браузера
користувача і застосування відповідного стилю спільно з основним.
Умовні коментарі розуміє тільки IE, тому інші браузери прочитають цей
код як звичайні коментарі.
Можна задати стилі, які побачать всі браузери крім IE.
Наведений умовний коментар буде зрозумілий браузерами IE:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->

Ще один приклад з умовними коментарями:

.style {
background: red; /* для нормальних браузерів */
//background: green; /* для всіх IE+Edge */
-background: blue; /* для IE10 */
}
* html .style {
background: blue;
}

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

1.2.3. CSS hacks.
Інший, не менш частий спосіб кросбраузерності верстки – CSS-хакі, що
дозволяє визначати властивості конкретних елементів.
для IE8:

64
 .elementstyle {
background: #F12\3/;
}
для Firefox:
@-moz-document url-prefix() {
.elementstyle {
background: #123;
}
}
для Safari и Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) {

. elementstyle {
background: #123;
}
}
або:

body:last-child:not(:root:root) .elementstyle {
background: #123;
}
Верстаючи великі сайти з великою кількістю елементів, розраховуючи на
подальший розвиток і розростання сайту, все-таки краще використовувати
поділ стилів. Це валідність, зручно, це правило хорошого тону. Але немає
нічого страшного в використанні CSS- hacks для невеликих сайтів, тим більше
що багато хто з хаків теж проходять валідацію.
В ідеалі треба прагнути до відмови від використання хаків і поділу стилів,
удосконалюючи свої навички в верстці.

65
 Зміст звіту

1) Титульний аркуш до виконуваної практичної роботи.

2) Постановка завдання.
3) Мета роботи.
4) Опис процесу роботи.
 помилки і як вони впливають на імідж сайту;
 запропонувані рішення по зміни і коректування основний візитній
картці фірми - сайту компанії;
 рекомендації і пропозиції на майбутні для планування рекламної
компаній в мережі інтернет для даного сайту;
 результати перевірки на на відповідність вимогами кросбраузерності
головної сторінки сайту, що ви розроблаєте.
 виправити свій сайт (відповідно до теми та результатів з
лабораторної роботі № 1) відповідно до того, щоб він відповідав
головним принципам юзабіліті та кросбраузерності.
5) Результатати роботи.
6) Висновки по роботі.
7) Відповіді на контрольні запитання (парний варіант дає відповіді
на парні питання, непарний варіант дає відповіді на непарні запитання, не
більше 5 питань).

4. Опис програмного забезпечення

Під час роботи на практичному занятті чи виконанні домашнього

завдання використовується таке програмне забезпечення: будь-який текстовий
редактор Notepad++, Sublime Text, Brackets, Atom тощо; браузери Edge, Firefox,
Chrome, Opera, IE6 – для тестування сторінок.

66
Контрольні запитання
1) Юзабіліті.
2) Інтерфейс користувача.
3) Принципи юзабіліті web-сайту.
4) Наскільки сильно можуть вплинути помилки проєктування на
ефективність ресурсу.
5) Юзабіліті експертиза.
6) Мета юзабіліті експертизи.
7) Роботи, що виконуються в ході ю-експертизи.
8) Варіанти проведення юзабіліті експертизи
9) Опис юзабіліті-проблем.
10) Що таке кросбраузерність?
11) Через що може виникати не коректне відображення веб-сайтів у
різних браузерах?
12) Які способи досягнення кросбраузерності вам відомі?
13) Що таке умовні коментарі? Як вони задаються?
14) Навіщо створюється окремий файл Reset.css? Що в ньому
прописується? Навіщо?
15) Чому раціональніше створювати нові файли для нормалізації та
зкидання параметрів відображення веб-сторінки?
16) Як можна перевірити сторінку на кросбраузерність?

67
 ПРАКТИЧНА РОБОТА №3.
«CSS flexbox (Flexible Box Layout Module)»

Мета роботи: Ознайомлення з основами CSS flexbox, його

основними атрибутами та значення цих атрибутів.

Досліджуваний матеріал: Flexible Box Layout Module. Основи і термінологія.

Властивості Flexbox. Префікс Flexbox. Приклади.
Трюки Flexbox. Підтримка браузера. Помилки.

1. Постановка задачі
Вивчити відомості по темі роботи і скласти пропозиції і рішення щодо
змін і коригування сторінок сайту.

2. Порядок виконання роботи

1. Отримати у викладача індивідуальне завдання для виконання роботи.
2. Вивчити теоретичний матеріал.
3. Поекспериментуйте з різними стилями, щоб краще зрозуміти на
практиці роботу Flexbox. Внесыть змыни до 2- х сторінок свого сайту.
4. На сайті “CAN I USE” ("Чи можу я використовувати")
https://caniuse.com надаються таблиці, котрі відображають, як браузери
підтримують передові веб-технологій на стаціонарних та мобільних веб-
браузерах. Знайдіть дані по використанню CSS Flexible Box Layout Module,
Зробіть висновки.
5. Зробити висновки по роботі.
6. Відповіді на контрольні запитання (парний варіант дає відповіді
на парні питання, непарний варіант дає відповіді на непарні запитання, не
більше 5 питань).
7. Оформіть звіт.

68
 Теоретичні відомості
Для підготовки до практичного заняття необхідно повторити лекційний
матеріал і ознайомитися з рекомендованою літературою [2; 5 – 7; лекц. 5 – 6].
CSS flexbox (Flexible Box Layout Module) – модуль макета гнучкого
контейнера – це спосіб компонування елементів, в основі лежить ідея вісі.
Flexbox складається з гнучкого контейнера (flex container) і гнучких
елементів (flex items). Гнучкі елементи можуть вибудовуватися в рядок або
стовпчик, а вільний простір розподіляється між ними різними способами.
Модуль flexbox дозволяє вирішувати наступні завдання:
 Розташовувати елементи в одному з чотирьох напрямків: зліва направо,
справа наліво, зверху вниз або знизу вгору.
 Перевизначати порядок відображення елементів.
 Автоматично визначати розміри елементів таким чином, щоб вони
вписувалися в доступне простір.
 Вирішувати проблему з горизонтальним і вертикальним
центрированием.
 Переносити елементи всередині контейнера, не допускаючи його
переповнення.
 Створювати колонки однакової висоти.
 Створювати притиснутий до низу сторінки підвал сайту.
Flexbox вирішує специфічні завдання - створення одновимірних макетів,
наприклад, навігаційної панелі, так як flex-елементи можна розміщувати тільки
по одній з осей.
Flexbox підтримується наступними браузерами:
 IE: 11.0, 10.0 -ms-;
 Firefox: 28.0, 18.0 -moz-;
 Chrome: 29.0, 21.0 -webkit-;
 Safari: 6.1 -webkit-;
 Opera: 12.1 -webkit-;

69
  iOS Safari: 7.0 -webkit-;
 Opera Mini: 8;
 Android Browser: 4.4, 4.1 -webkit-;
 Chrome for Android: 44.
Для опису модуля Flexbox використовується певний набір термінів.
Значення flex-flow і режим запису визначають відповідність цих термінів
фізичним напрямками: верх / право / низ / ліво, осях: вертикальна /
горизонтальна і розмірами: ширина / висота.

Рисунок 3.1 – Модель Flexbox

Головна вісь (main axis) -– вісь, уздовж якої викладаються flex-елементи.
Вона простягається в основному вимірі.
Main start і main end – лінії, які визначають початкову та кінцеву боку
flex-контейнера, щодо яких викладаються flex-елементи (починаючи з main start
у напрямку до main end).
Основний розмір (main size) – ширина або висота flex-контейнера або
flex-елементів, в залежності від того, що з них знаходиться в основному вимірі,
визначають основний розмір flex-контейнера або flex-елемента.
Поперечна вісь (cross axis) – вісь, перпендикулярна головної осі. Вона
простягається в поперечному вимірі.
Cross start і cross end – лінії, які визначають початкову та кінцеву боку
поперечної осі, щодо яких викладаються flex-елементи.

70
 Поперечний розмір (cross size) – ширина або висота flex-контейнера або
flex-елементів, в залежності від того, що знаходиться в поперечному вимірі, є їх
поперечним розміром.

Рисунок 3.2 – Режим рядки і колонки

Flex-контейнер встановлює новий гнучкий контекст форматування для
його вмісту. Flex-контейнер не є блоковим контейнером, тому для дочірніх
елементів не працюють такі CSS-властивості, як float, clear, vertical-align.
Також, на flex-контейнер не роблять вплив властивості column- *, що
створюють колонки в тексті і псевдоелементи :: first-line і :: first-letter.
Модель flexbox-розмітки пов'язана з певним значенням CSS-властивості
display батьківського html-елемента, що містить в собі дочірні блоки. Для
управління елементами за допомогою цієї моделі потрібно встановити атрибут
display наступним чином:

.flex-container {
/*генерує flex-контейнер рівня блока*/
display: -webkit-flex;
display: flex;
}
.flex-container {
/* генерує flex-контейнер рівня рядка*/
display: -webkit-inline-flex;
71
 display: inline-flex;
}

або ж

#container {
display: flex;
}

Вміст flex-контейнера можна розкласти в будь-якому напрямку(flex-

direction) і в будь-якому порядку:
 row – значення за замовчуванням, зліва;
 row-reverse – напрямок справа наліво;
 column – напрямок зверху вниз;
 column-reverse – колонка з елементами в зворотному порядку, від низу
до верху;
 initial – встановлює значення властивості в значення за замовчуванням;
 inherit – успадковує значення властивості від батьківського елемента.
За вирівнювання елементів по головній вісі відповідає justify-content, який
може приймати наступні значення:
 flex-start – вирівнювання з самого початку контейнера;
 flex-end – вирівнювання з кінця контейнера;
 center – вирівнювання по центру контейнера;
 space-between – задає однакову відстань між квадратами, але не між
контейнером і квадратами;
 space-around – задає однакову відстань між квадратами, але тепер
відстань між контейнером і квадратами дорівнює половині відстані між
квадратами.
Приклад 1 :

72
 #container {
display: flex;
flex-direction: row;
justify-content: space-between;
}

Призведе до такого результату:

Рисунок 3.3 – Результат виконання прикладу 1

Для вирівнювання блоків по осі, що перпендикулярна головній,
використовується атрибут align-items. Він може приймати наступні значення:
 flex-start – вирівнювання блоків по верхньому краю контейнера;
 flex-end – вирівнювання блоків по нижньому краю контейнера;
 center – вирівнювання блоків по центру;
 stretch – розтяжка блоків на всю висоту контейнера, при цьому висота
контейнерів повинна бути auto;
 baseline – вирівнювання блоків по центру, блоки незалежно від іх
розміру теж вирівнюються по середині.
Приклад :
#container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
Призведе до такого результату:

73
 Рисунок 3.4 – Результат виконання прикладу 2

Завдання для самостійного вивчення

1) Вивчити атрибут, що дозволяє вирівнювати елементи окремо один від

одного та його атрибути (Align Self)
2) Вивчити що робить Flex-Basis, навіщо він потрібен та його атрибути.
3) Ознайомитись із властивостями, що відповідають за розмір, збільшення
та зменшення елементів.
4) Ознайомитись із порядком відображення flex-елементів: order

3. Приклади домашніх та аудиторних завдань

1) Використовуючи сайт створений на 1ій лабораторній роботі додати

елементи та вирівняти їх за допомогою flexbox.
2) Створити контейнер, в якому будуть знаходитись 2 блоки. При
зменшенні цього контейнера перший блок стає в два рази більшим за другий
блок.
3) Створити контейнер, в якому будуть знаходитись 2 блоки. При
збільшенні цього контейнера перший блок стає в два рази більшим за другий
блок.
74
 4) Створити на сторінці відповідний контейнер з блоками, як вказано на
рисунку.

4. Опис програмного забезпечення

Під час роботи на практичному занятті чи виконанні домашнього
завдання використовується таке програмне забезпечення: будь-який текстовий
редактор Notepad++, Sublime Text, Brackets, Atom тощо; браузери Edge, Firefox,
Chrome, Opera, IE6 – для тестування сторінок.

Контрольні запитання
1) Що таке flexbox. Навіщо він потрібен?
2) Які переваги flexbox-а?
3) Які характеристики містить модель flexbox-а?
4) За що відповідає атрибут justify-content? Яких значень він набуває?
5) За що відповідає атрибут flex-direction? Яких значень він набуває?
6) За що відповідає атрибут align-items? Яких значень він набуває?
7) Що робить Flex-Basis?
8) Які атрибути відповідають за збільшення та зменшення flex-
елементів?

75
 МЕТОДИЧНЕ ЗАБЕЗПЕЧЕННЯ ТА РЕКОМЕНДОВАНА ЛІТЕРАТУРА

1. Genesis Design Week / Як креативи дизайнерів впливають на маркетинг

та продукт в ІТ? https://www.youtube.com/watch?v=bS2rolCVE54.
2. Берґер Й. Заразливий. Психологія вірусного маркетингу / Й. Берґер ;
[Пер. з англ. О. Замойської]. – К. : Наш Формат, 2015. – 224 с.
3. В. Слюсаренко. Інтернет-технології та веб-дизайн. Навчально-
методичний посібник. – Кропивницький, ТОВ «КОД», 2018. – 104 с.
4. Designing Web Usability, Jakob Nielsen New Riders, 2000. – 419 p.
5. A Complete Guide to Flexbox https://css-tricks.com/snippets/css/a-guide-to-
flexbox/
6. Basic concepts of flexbox https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
7. Посібник з CSS Flexbox https://romul.name/blog/posibnyk-z-css-flexbox/

76
 ГЛОСАРІЙ

№ Термін значення
1 CSS flexbox (Flexible модуль макета гнучкого контейнера -
Box Layout Module) являє собою спосіб компонування
елементів, в основі лежить ідея осі.
2 Cross start і cross end лінії, які визначають початок та кінець
поперечної осі, щодо яких викладаються
flex-елементи.
3 Main start і main end лінії, які визначають початок та кінець
боку flex-контейнера, щодо яких
викладаються flex-елементи
(починаючи з main start у напрямку до
main end).
4 Web-сервіси програми, доступ до яких здійснюється
Web-services по протоколу HTTP, а обмін даними
відбувається у форматі XML.
5 XML (Extensible Markup розширювана мова розмітки,
Language) призначена для: зберігання
структурованих даних. Обміну
інформацією між програмами.
6 Абсолютна ім'я ідентифікатор з роздільником простору
Absolute name імен, який починається з роздільник
просторів імен.
7 Авторизація управління рівнями і засобами доступу
Authorization до певного захищеного ресурсу, в
області цифрових технологій
(наприклад, автоматизована система
контролю доступу) та ресурсів системи
залежно від ідентифікатора і пароля
користувача або надання певних
повноважень (особі, програмі) на
виконання деяких дій в системі обробки
даних.
8 Безпека комплексний набір заходів,
Security спрямований на організацію безпечного
доступу, користування та
модифікування деякої системи.
9 Веб-дизайн вид графічного дизайну, спрямований
Web design на розробку та оформлення об'єктів
інформаційного середовища Інтернету,
покликаний забезпечити їм високі
споживчі властивості і естетичні якості.

77
№ Термін значення
10 Головна вісь вісь, уздовж якої викладаються flex-
Main axis елементи. Вона простягається в
основному вимірі.
11 Дзеркало сайту точна копія сайту, розміщена в Інтернеті
Mirror site під іншим доменним ім’ям. Дзеркала
створюють головним чином з метою
зниження навантаження на головний
сайт.
12 Загальний рівень опису це складання портрета типового
цільової аудиторії покупця компанії за географічними,
The general level of соціально-демографічними і
description of the target психографічним критеріям. Даний
audience рівень опису цільової аудиторії
допомагає скласти в чітку картинку
людини за віком, характером і стилем
життя.
13 Зв'язний список структура даних, схожа на звичайний
linked list зв’язний список, проте в кожному
елементі зберігається тільки одна
адреса - результат виконання операції
XOR над адресами попередніх і
наступних елементів списку. Для того,
щоб переміщатися по списку, необхідно
взяти дві послідовних адреси і виконати
над ними операцію XOR, яка і дасть
реальну адресу наступного елемента.
14 Карта сайту інструмент навігації по сайту. Карта
Sitemap сайту - це повний каталог розділів
ресурсу. Карта сайту розташовується, як
правило, на головній сторінці сайту з
тим, щоб користувач в короткий термін
і без утруднень перейшов до потрібного
йому розділу сайту.
15 Контент сайту збірний термін для будь-якої
Content Site інформації, яка міститься в
інформаційному ресурсі.
16 Кросбраузерність сайту це властивість сайту однаково
Crossbrowser site відображатися та функціонувати у
відповідності до поставленого завдання
в усіх браузерах.
17 Основний розмір ширина або висота flex-контейнера або
Main size flex-елементів, в залежності від того, що
з них знаходиться в основному вимірі,
78
№ Термін значення
визначають основний розмір flex-
контейнера або flex-елемента.
18 Поперечна вісь вісь, перпендикулярна головної осі.
Cross axis Вона простягається в поперечному
вимірі.
19 Поперечний розмір ширина або висота flex-контейнера або
Cross size flex-елементів, в залежності від того, що
знаходиться в поперечному вимірі, є їх
поперечним розміром.
20 Профіль користувача візуальне відображення персональних
User profile даних, пов'язаних з конкретним
користувачем, або характеристики
робочого середовища. Профіль
відноситься до явного цифрового
представлення особистості людини.
Профіль користувача також може
розглядатися як комп'ютерне
представлення моделі користувача
21 Пошуковий робот це найважливіший елемент пошукової
Пошуковий робот, бот, системи, в завдання якого входить збір
краулер, пошуковий нових даних про сайти та їх оновлення.
павук Пошуковий робот – це програма, яка діє
web crawler, ant, приблизно так, як і браузерна програма
automatic indexer, bot, – зчитує інформацію з веб-сторінок
web spider, web robots,
web scutte r
22 Регулярний вираз механізм, що дозволяє задати шаблон
Regularexpression для рядка і здійснити пошук даних,
відповідних цьому шаблону в заданому
тексті. Крім цього, додаткові функції по
роботі з даними дозволяють отримати
знайдені дані у вигляді масиву термін,
провести заміну в тексті за шаблоном,
розбиття рядка за шаблоном і т.п.
23 Спадкування є виключно корисним засобом
Inheritance програмування, оскільки його
застосування запобігає копіювання
коду, спільно використовуваного
структурами даних.
24 Структура сайту це внутрішній устрій сайту, його
Site structure «скелет», розташування сторінок,
розділів, підрозділів, додаткових

79
№ Термін значення
матеріалів. Самим першим кроком
розробників є створення строгого
порядку з хаотичного скупчення
інформації.
25 Структурні шаблони шаблони, в яких розглядаються питання
Structural pattern про те, як з класів і об'єктів
утворюються більш складні
структури. Структурні шаблони
класового рівня використовують
наслідування для формування
композицій з інтерфейсів і
реалізацій. Такі шаблони корисні, коли
потрібно організувати спільну роботу
декількох незалежних бібліотек.
26 Поведінкові шаблони пов'язані з алгоритмами і розподілом
Behavioral pattern обов'язків між об'єктами. При цьому
йдеться не лише про самі об'єкти і
класи, а й про типові способи
взаємодії. Такі шаблони характеризують
складний потік управління, який
складно простежити під час виконання
програми.
27 Шаблони проектування архітектурні конструкції, спрямовані на
Software design pattern ефективне рішення типових питань і
проблем в проектуванні програмного
забезпечення.
28 Цільова аудиторія це група людей або сегмент ринку, для
Target audience якого призначений продукт, послуга,
веб-сайт, реклама, телевізійна або радіо
програма і т.д
29 Юзабіліті - дослівно «можливість бути
Usability використовуваним») - поняття в
мікроергономіці, що позначає загальну
ступінь зручності предмета при
використанні; термін схожий з терміном
«ергономічність», однак має іншу
область поширення і відрізняється
нюансами визначення. Терміном
юзабіліті називають концепцію
розробки, призначену для користувача
інтерфейсів програмного забезпечення,
орієнтовану на максимальне
психологічну і естетичну зручність для
80
№ Термін значення
користувача. «Юзабіліті» також
позначає набір спеціальних методик,
службовців для поліпшення інтерфейсу
під час процесу його розробки.
30 Юзабіліті-тестування це метод оцінки зручності використання
веб продукту, заснований на залученні
Usability testing of web користувачів в якості тестувальників

31 Юзабіліті-тестування експеримент, що виконується з метою

Usability testing визначення, наскільки добре люди
можуть використовувати певний
штучний об'єкт (такий як веб-сторінка,
призначений для користувача інтерфейс
або пристрій) для його передбачуваного
застосування, тобто юзабіліті-
тестування вимірює юзабіліті об'єкта.
Юзабіліті-тестування зосереджено на
певному об'єкті або невеликому наборі
об'єктів, в той час як дослідження
взаємодії людина-комп'ютер в цілому -
формулюють універсальні принципи.

81
 Навчальне видання

до практичних робіт з дисципліни

«Гіпертекст та гіпермедіа»
для студентів спеціальності
121 «Інженерія програмного забезпечення»

Упорядник: ЄРОХІН Андрій Леонідович

ГРУЗДО Ірина Володимирівна
ЗИБІНА Катерина Вікторівна

Відповідальний випусковий І.В. Груздо

Редактор

Комп’ютерна верстка

План 2023, поз. __

Підп. до друку Формат 60х 84 1 /16 Спосіб друку – ризографія

Умов. друк. арк. Облік. вид. арк. Тираж прим.
Зам. № Ціна договірна.

ХНУРЕ. Україна. 61166 Харків, просп. Науки, 14

Віддруковано в навчально-науковому
видавничо-поліграфічному центрі ХНУРЕ
Харків, 61166, просп. Науки, 14

82