# Вебсайт ## Що це таке Вебсайт — це група вебсторінок, які публікують разом під однією адресою і які мають одного власника: сторінки компанії, інтернет-крамниця, набір документації, особистий блог. Сторінки ділять домен або його частину, навігацію, вигляд і людину, яка за них відповідає. У щоденному мовленні кажуть просто «сайт». Корисна межа пролягає між сайтом і сторінкою. WCAG визначає вебсторінку як невбудований ресурс, отриманий за однією адресою URI через HTTP, разом з усім, що user agent відображає разом із ним: зображеннями, таблицями стилів, скриптами. Сайт у цьому стандарті називається _set of web pages_, набір вебсторінок: сторінки зі спільною метою, створені тим самим автором, групою чи організацією. Друге визначення чесніше, бо прив'язує сайт до мети й авторства, а не до доменного імені. Приклади до визначення показують, як далеко сягає ця думка. Оформлення замовлення в інтернет-крамниці, з якого прибрано спільну для сторінок товарів навігацію, не належить до набору сторінок товарів. Блог на субдомені з власною навігацією й власними авторами — окремий набір, відмінний від сторінок основного домену. А різні мовні версії тих самих сторінок вважаються різними наборами. Отже, три домени можуть містити один вебсайт, а один домен — кілька. З вебсайтом часто плутають трьох сусідів. _Вебсервер_ — це програма, що відповідає на запити; один сервер може тримати десятки сайтів, а один великий сайт може бути розподілений на багато серверів. _Домен_ — це ім'я в адресі, яке сайт може ділити з іншими або розкладати на кілька. _Вебзастосунок_ — це сайт, сторінки якого здебільшого є програмою, що працює в браузері. Власний приклад WCAG — поштова програма, яка живе за однією адресою, але показує вхідні листи, контакти й календар, тож одна адреса сприймається як багато сторінок. Сайти різняться й тим, коли створюються їхні сторінки. _Статичний_ сайт заздалегідь генерують у файли, які сервер віддає без змін. _Динамічний_ сайт складає кожну сторінку в момент запиту, зазвичай із бази даних і програми на сервері. За самою сторінкою читач рідко відрізнить одне від іншого. Різниця проявляється в тому, що доводиться підтримувати в робочому стані. ## Чому це важливо Люди оцінюють сайти, а не сторінки. Читач, який потрапив на одну статтю з результатів пошуку, вирішує, чи їй довіряти, з того, що кажуть меню, сусідні сторінки й контактні дані. Сильна сторінка на сайті, що має занедбаний вигляд, успадковує цю занедбаність. **Пошукові системи читають сайт цілим.** Вони індексують сторінки поодинці, але дізнаються про них через сайт: його посилання, структуру й перелік адрес, який він сам публікує. Протокол sitemaps — формат, яким сайт передає цей перелік пошуковим роботам, — дозволяє до 50 000 адрес і 50 МБ без стиснення в одному файлі, а більший сайт ділить перелік на кілька файлів, зібраних в індекс. **Деякі вимоги доступності існують лише на рівні кількох сторінок.** Три критерії успіху WCAG 2.2 рівня AA сформульовано саме для набору вебсторінок. Multiple Ways (2.4.5) вимагає більше ніж одного шляху до кожної сторінки, наприклад меню й пошуку або змісту й посилань між спорідненими сторінками. Consistent Navigation (3.2.3) вимагає, щоб навігація, яка повторюється на кількох сторінках, щоразу йшла в тому самому відносному порядку. Consistent Identification (3.2.4) вимагає, щоб компоненти з однаковою функцією всюди мали однакову назву. Кожна сторінка окремо може пройти перевірку, а сайт водночас провалить усі три. **Адреси — це обіцянка.** Кожна опублікована адреса потрапляє в закладки, чужі посилання, пошукові індекси, листи й друковані матеріали. Перелік адрес сайту — це та частина, на яку спираються сторонні люди, і вона живе довше за будь-який дизайн. **Щось має працювати постійно.** Динамічний сайт — це програма з базою даних, яку треба оновлювати, стежити за нею й щомісяця оплачувати. Статичний сайт — це набір файлів і сервер, що їх віддає. Цей вибір визначає поверхню атаки й рахунок за роботу значно більше, ніж візуальний дизайн. ## Як це виглядає на практиці Цей вебсайт сам є робочим прикладом наведених вище визначень. Як [багатомовний статичний сайт на Hugo](/uk/portfolio/built-a-multilingual-static-site-in-hugo-126/) він складається зі 108 файлів шаблонів, із них 53 часткові шаблони й 18 шорткодів, і генерує три мови з одного дерева вмісту без динамічного бекенду. Кожна сторінка виходить у чотирьох поданнях: HTML, двійник у Markdown, документ Gemini і пункт меню Gopher. Те саме дерево збирають ще сім разів, по разу для кожного тематичного субдомену, вказуючи генераторові інший каталог вмісту. Якщо рахувати за адресами, сайтів вісім; якщо рахувати так, як WCAG, де кожна мова — окремий набір вебсторінок, то самі лише три мови дають три. Сторінка прямо називає ціну відмови від сервера: усе інтерактивне мусить бути готовим під час збірки або лишається поза сайтом, і з цієї причини пошуковий індекс оцінили й відклали. Раніша робота показує дві інші половини справи: супровід сайтів і їх створення за дизайном. З боку експлуатації [сорок вебсайтів на серверах хостингу з Ubuntu Linux](/uk/portfolio/administered-40-websites-on-ubuntu-linux-hosting-servers-53/) працювали на суміші Apache й Nginx, а їхню доступність і швидкість тримали конфігурацією, налаштуванням продуктивності й обслуговуванням. Мірилом була поведінка під справжнім трафіком, а не тихої ночі. З боку створення [тридцять вебсайтів, спроєктованих за файлами Photoshop](/uk/portfolio/designed-30-websites-delivering-unique-and-flexible-solutions-52/), зверстали в HTML вручну за двома вимогами водночас: точно передати відступи, шрифти й деталі, які задумав дизайнер, і лишитися зручними в супроводі, коли вміст почне змінюватися. Сайт, що точно відповідає макету, але ламається від першої правки, зроблено для дня запуску, а не для років після нього. ## Де виникають проблеми - **Редизайн змінює адреси.** Кожне вхідне посилання, закладка й результат пошуку, що вели на стару структуру, в день запуску нового сайту приводять на сторінку помилки. Постійне переспрямування з кожної старої адреси на її нове місце, збережене на роки, рятує те, на що спиралися інші. - **Навігація розходиться між розділами.** Шаблони, написані в різний час, обростають власними меню в різному порядку, а одна й та сама сторінка в одному місці зветься «Контакти», а в іншому — «Напишіть нам». Читачі втрачають орієнтацію, і сайт провалює Consistent Navigation та Consistent Identification, хоча кожна сторінка окремо проходить. Один спільний шаблон навігації, використаний усюди, усуває розбіжність у самому джерелі. - **Сайт вважають завершеним у день запуску.** Вміст старіє, залежності застарівають, термін дії сертифікатів спливає, а єдина людина, що знала, як публікувати, переходить до іншої роботи. Сайт живе, коли має власника, сталий порядок публікації й перевірки, що запускаються незалежно від чиєїсь пам'яті. - **До сторінки веде лише один шлях.** Сторінку, заховану на три рівні меню вглиб і пропущену в усіх покажчиках, знаходить її автор і мало хто ще. Другий шлях — пошук, покажчик сторінок чи посилання зі споріднених сторінок — це те, чого вимагає Multiple Ways, і те, чим читачі однаково користуються. - **Другу мову прикручують після запуску.** Адреси, дати, формати чисел, довжини рядків і меню формувалися під одну мову, і нова мусить боротися з кожним шаблоном. Сайт, який має бути багатомовним, дешевше будувати таким із першої сторінки. ## Що почитати далі - [NIST CSRC Glossary: website](https://csrc.nist.gov/glossary/term/website) — однорядкове визначення з NISTIR 7693: пов'язані вебсторінки, які готують і підтримують як збірку заради однієї мети. - [WCAG 2.2: set of web pages](https://www.w3.org/TR/WCAG22/#dfn-set-of-web-pages) — визначення сайту за метою й автором, із прикладами про оформлення замовлення, субдомени й мовні версії. - [Understanding SC 3.2.3: Consistent Navigation](https://www.w3.org/WAI/WCAG22/Understanding/consistent-navigation.html) — чому навігація, що повторюється на різних сторінках, має зберігати порядок, і типова помилка, яка його порушує. - [Understanding SC 2.4.5: Multiple Ways](https://www.w3.org/WAI/WCAG22/Understanding/multiple-ways.html) — шляхи, якими сайт може вести до кожної своєї сторінки, і виняток для кроків процесу. - [sitemaps.org: Sitemaps XML format](https://www.sitemaps.org/protocol.html) — формат, яким сайт перелічує власні адреси для пошукових систем, з обмеженнями розміру одного файлу.