Етапи створення веб-сайтів. Конструювання сайтів
За новою програмою
Урок 48
9
Сервіси Інтернету
Розділ 9 § 29
Пригадайте:
Ви дізнаєтеся:
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Сукупність веб-сторінок певної тематики із системою навігації, що дає можливість переміщуватись між ними за допомогою гіперпоси-лань, які збережені на одному сервері, утворює сайт, або веб-сайт.
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
При створенні структури сайта слід дотримуватися певних принципів, зокрема:
Принципу простоти
Принципу цільової сегментації
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Оскільки структура сайта складається з різних його розділів, то для зручності його відвідування та швидкого знаходження потрібних відомостей доцільно робити структуру простою, без додаткових підрозділів.
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
«Ідеальна» структура сайта має мати один вхід й один вихід. Як це зробити, якщо сайт має безліч сторінок? У такому разі сайт матиме кілька входів і лише один вихід.
Для зручності орієнтування головна сторінка сайта має містити меню з повним його описом, яке дасть змогу користувачеві зорієнтуватися у вмісті сайта та швидко перейти до потрібного розділу. Така структура сайта будується за принципом «воронки».
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Особливо ефективною зазначена структура є при створенні сайтів, де виходом є сторінка замовлення товару.
Інтернет-магазину
Корпоративного сайта
Бізнес-сайта
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Принцип цільової сегментації базується на тому, що користувач спочатку виділяє основні групи цільової аудиторії й на основі потреб кожної групи створюється структура сайта.
Такий принцип побудови є ефективним для сайтів, на яких виділяється 2-3 основні групи користувачів.
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Підчас планування структури сайта необхідно продумати кілька основних складових:
Структуру каталогів
Структуру навігації
Необхідність заставки сайта
Важливо визначитися з необхідною кількістю сторінок і встановити зв'язки між ними.
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Розглядають:
Внутрішню
структуру сайта
Зовнішню
структуру сайта
Продумана внутрішня структура сайта дає змогу всі необхідні матеріали розташувати зручно й доступно в розділах і підрозділах. Навіть якщо сайт містить великий обсяг відомостей, слід розробити таку внутрішню структуру, у якій можна легко зорієнтуватися потенційним клієнтам.
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Розрізняють внутрішню структуру сайта:
Лінійну
Ієрархічну
Довільну
Лінійну (послідовну) структуру веб-сайта доцільно використовувати в разі послідовного подання відомостей, наприклад, про товари та послуги або матеріали навчального посібника.
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Перегляд таких сайтів здійснюється послідовно: від початкової (головної) до останньої сторінки.
Головна сторінка
Сторінка 1
Сторінка 2
Кожна сторінка має посилання тільки на одну, наступну сторінку сайта. Інколи, для зручності навігації по сайту, до сторінки також додається посилання на попередню сторінку.
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
При ієрархічній, або деревоподібній, структурі створюється одна головна сторінка, яка не має попередніх, решта сторінок має лише одну попередню сторінку.
Головна сторінка
Сторінка
Сторінка
Сторінка
Сторінка
Сторінка
Сторінка
Сторінка
Сторінка
Сторінка
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
При довільній структурі кожна сторінка може містити посилання на довільну кількість сторінок сайта. Така структура найкраще підходить для сайтів, що містять різні за тематикою матеріали: каталогів, зібрань статей з різних тем або добірок посилань.
Прикладом такої структури є сайт Бібліотека української літератури
ukrlib.com.ua
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
На практиці майже завжди використовується поєднання деревоподібної та послідовної структур, тобто гібридна структура.
Наприклад, зміст електронної книги або каталог статей починається з ієрархічно розташованих сторінок, але кожний окремий розділ чи статтю доцільно розбити на кілька частин, які розташовуються послідовно одна за одною.
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Інколи розглядають мережеву структуру, яка базується на побудові системи такої навігації сайта, коли між вертикальними й горизонтальними елементами (сторінками) існує взаємний зв'язок і можливість швидкого переходу з однієї сторінки на іншу без додаткової необхідності відвідування проміжних сторінок.
Така структура призводить до зайвого збільшення кількості гіперпосилань, а її застосування є обмеженим для сайтів з великою кількістю сторінок.
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Зовнішня структура визначає спосіб розміщення відомостей на сторінці при виборі кожного пункту меню. Також можна вказати конкретне місце для розміщення на сайті:
Банера
Картинок
Додаткових посилань
Зовнішня структура має гармонійно відповідати дизайну сайта.
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Навігація по сайту має бути простою та зрозумілою: користувач у будь-який час має знати відповіді на такі запитання:
Де він перебуває?
Куди можна піти?
Як туди дістатися?
Як повернутися назад?
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Розв'язувати ці задачі можна по-різному. Наприклад, для легкого визначення місця-розташування на сайті можна виділити ту сторінку в меню, на якій перебуває користувач, а саме меню зробити доступним на всіх сторінках сайта.
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Також можна зробити так звані навігаційні ключі, тобто у верхній частині кожної сторінки вказати повний шлях до цієї сторінки за схемою:
головна сторінка
назва розділу
назва сторінки
При цьому слід дотримуватися правила трьох кліків: до будь-якої сторінки сайта користувач має дістатися не більш ніж за три переходи (три кліки).
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Розрізняють:
Текстову систему навігації
Навігацію за допомогою кнопок
Використання навігаційних карт
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Інколи замість головної сторінки сайта з'являється заставка. Це велике фото зі звуковим супроводом або відеоролик. Такі сторінки створюють, щоб привернути увагу користувача.
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Головна сторінка сайта має задовольняти правилу�«3 по 3», тобто три абзаци по три речення про тематику та зміст, авторів і призначення сайта.
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Крім того Головна сторінка сайта, має відповідати таким вимогам:
відображати тематику сайта;
бути цікавою, щоб користувач мав бажання переглянути інші сторінки сайта;
містити інструмент реалізації пошуку по сайту;
містити розділ з актуальними даними, що постійно оновлюються, наприклад, новини, акції, поради дня тощо;
містити відомості про спосіб зворотного зв'язку (e-mail, телефон, адресу).
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Зовнішній вигляд решти сторінок сайта має бути витриманим у єдиному стилі. На них має бути вказано назву ресурсу й посилання на головну сторінку.
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Залежно від засобу створення, сайти можуть мати одинакові елементи структури. До них належить:
Логотип власника сайта чи графічний декор
Назва сайта, фірми чи сторінки
Гіпер-посилаиня чи панель навігації сайта
Дані, які наповню-ють вміст сторінки сайта
Контактні дані тощо
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
Більшість сайтів побудовані з використанням адаптивного дизайну компоновки веб-сторінок, тобто такого, що налаштовується до зміни розмірів екрана.
9
Яку структуру можуть мати сайти?
Розділ 9 § 29
У сучасних сайтах може застосовуватися складне компонування розділів, яке поєднує наявність незмінних областей та частини, розмір яких змінюється відповідно до змін розміру екрана.
Рідше складові веб-сторінки мають чітко встановлені розміри, які відображають сайт саме так, як було задумано дизайнером.
9
Які відмінності можуть мати веб-сторінки сайта?
Розділ 9 § 29
Веб-сторінки, як правило, створюються мовою HTML чи XHTML і можуть містити гіперпосилання для швидкого переходу на інші сторінки. Відомості на веб-сторінці можуть подаватися в різних формах:
Веб-сторінка — документ або інформаційний ресурс, доступ до якого здійснюється за допомогою браузера.
Текст
Статичні та анімовані графічні зображення
Аудіо
Відео тощо
9
Які відмінності можуть мати веб-сторінки сайта?
Розділ 9 § 29
Інформаційний вміст веб-сторінки, як правило, називають контентом.
Веб-сторінки мають свої специфічні елементи, що відрізняє їх між собою. Розрізняють такі типи веб-сторінок:
Сторінки розділу веб-сайта
Форми
Домашні сторінки
Сторінки форуму та чату
Веб-каталоги тощо.
9
Які відмінності можуть мати веб-сторінки сайта?
Розділ 9 § 29
Сторінка розділу веб-сайта — це звичайна веб-сторінка, яка заповнюється його автором і не передбачає особливих дій користувача під час роботи з нею.
9
Які відмінності можуть мати веб-сторінки сайта?
Розділ 9 § 29
Веб-сторінки статичних сайтів створюються за допомогою мови розмітки HTML у середовищі HTML-редактора в файловій системі комп'ютера, а потім завантажуються на сайт. Створення нових сторінок статичного сайта або редагування існуючих користувач виконує на комп'ютері в середовищі HTML-редактора.
А потім знову завантажує на веб-сайт. Це трудомісткий процес.
9
Які відмінності можуть мати веб-сторінки сайта?
Розділ 9 § 29
В основному статичні веб-сторінки використовуються для сайтів з постійною структурою та зовнішнім видом сторінки, при цьому кожна сторінка може мати свій шаблон оформлення.
9
Які відмінності можуть мати веб-сторінки сайта?
Розділ 9 § 29
Інтерактивна веб-сторінка надає можливість користувачеві вводити деякі дані, а потім забезпечує, відповідно до введених даних, їх опрацювання на сервері.
9
Які відмінності можуть мати веб-сторінки сайта?
Розділ 9 § 29
При створенні інтерактивних веб-сторінок використовують спеціальні скрипти мовами сценаріїв:
JavaScript
VBScript
Які можуть виконуватися за наявності певних дій користувача або під час завантаження веб-сторінки. Крім того, для забезпечення інтерактивності веб-сторінки можна використовувати флеш-фрагменти або Flash-ролики (swf-файли).
9
Які відмінності можуть мати веб-сторінки сайта?
Розділ 9 § 29
Для обміну даними між користувачем і сервером до веб-сторінки можна вставити веб-додаток, який називають формою. Форми по своїй суті є аналогами паперових опитувальників.
Форма — частина веб-сторінки, до якої користувач може записувати свої відомості та надсилати їх на сервер, де розміщується веб-сторінка. Такі запити опрацьовуються на сервері, на якому генеруються відповідні вихідні дані.
9
Які відмінності можуть мати веб-сторінки сайта?
Розділ 9 § 29
Форми зазвичай містять поля для заповнення, списки чи перемикачі для вибору одного чи декількох елементів. Форми застосовують для:
Отримання відомостей про користувачів сайта
Отримання думки з приводу питання, винесеного для обговорення
Виявлення споживчих переваг тощо
9
Які відмінності можуть мати веб-сторінки сайта?
Розділ 9 § 29
До найуживаніших форм належать:
форма пошуку відомостей на сайті
форма для ідентифікації користувача (введення логіна та пароля)
зворотний зв'язок
каталог посилань
гостьова книга тощо
9
Які відмінності можуть мати веб-сторінки сайта?
Розділ 9 § 29
Для створення та супроводження динамічних сайтів використовують CMS (Content Management System) — систему управління сайтом, яку називають двигунцем сайта.
9
Які відмінності можуть мати веб-сторінки сайта?
Розділ 9 § 29
Засоби розробки сайтів забезпечують відокремлення змістової частини (контенту) від дизайну (шаблону веб-сторінки), що дає змогу змінювати вміст веб-сторінки, не змінюючи дизайн, і змінювати шаблон сайта, не змінюючи вміст його веб-сторінок.
9
Які відмінності можуть мати веб-сторінки сайта?
Розділ 9 § 29
Такі двигунці мають багато різних модулів:
форуми
гостьові книги
поштові розсилки
контакти
опитувальники
форми реєстрації
форми пошуку
систему обміну повідомленнями між користувачами
Які перетворюють сайт з інформаційного засобу на комунікаційний.
9
Які відмінності можуть мати веб-сторінки сайта?
Розділ 9 § 29
Поняття домашня сторінка має декілька значень:
9
Які відмінності можуть мати веб-сторінки сайта?
Розділ 9 § 29
Продовження…
Як правило, за стартову обирають одну зі спеціалізованих сторінок, які містять посилання, що використовуються конкретним користувачем найчастіше, зокрема: веб-пошту, новини, каталоги ресурсів, а також популярні сервіси, такі як пошук в Інтернеті, перевірка на віруси, онлайн-переклад тощо.
9
Які відмінності можуть мати веб-сторінки сайта?
Розділ 9 § 29
Сторінка форуму або чату схожа на таблицю, у рядках якої користувач записує своє повідомлення, при чому відображається:
Його аватар (маленьке зображення, що ідентифікує користувача)
Його мережеве ім'я (нік)
Інструменти для коментування повідомлень
9
Які відмінності можуть мати веб-сторінки сайта?
Розділ 9 § 29
При створенні веб-каталогу застосовують мінімум засобів оформлення, розміщуючи посилання на ресурси в таблиці розділів або лінійному списку. Наприклад, перша сторінка інформаційної системи Конкурс, за допомогою якої можна відстежувати конкурс вступу до вищих навчальних закладів, побудована за типом веб-каталогу, що надає можливість територіального пошуку вищих навчальних закладів (http://vstup.info).
9
У чому полягає процес створення веб-сайта?
Розділ 9 § 29
Процес створення веб-сайта складається з таких етапів:
9
У чому полягає процес створення веб-сайта?
Розділ 9 § 29
Перший етап передбачає визначення мети створення сайта, його цільової аудиторії, з'ясування, якими будуть інформаційні джерела сайта, з яких розділів він складатиметься тощо.
Перш ніж приступати до розробки, необхідно проаналізувати тему, вивчити сайти потенційних конкурентів — це допоможе створити власну концепцію.
9
У чому полягає процес створення веб-сайта?
Розділ 9 § 29
Далі слід визначити вид і тип сайта та відповідно до цього визначити його структуру, зазначити функціональні можливості (пошук, каталог, стрічка новин тощо), вказати, які сторінки мають бути на сайті та які блоки слід розміщувати на сторінках і в якому вигляді.
9
У чому полягає процес створення веб-сайта?
Розділ 9 § 29
Як тільки концепцію й загальну структуру сайта буде визначено, можна обирати стиль його оформлення, проектування структури окремих веб-сторінок, добирати найбільш вдалі способи зображення тих чи інших даних.
9
У чому полягає процес створення веб-сайта?
Розділ 9 § 29
Ці два етапи майже не піддаються формалізації й вимагають від їх виконавця не стільки володіння технологіями веб-програмування, скільки спеціалізованих знань у тій галузі, якій буде присвячено сайт, художнього смаку й досвіду користування Інтернетом.
9
У чому полягає процес створення веб-сайта?
Розділ 9 § 29
Розмітка сайта визначає параметри форматування тексту та інших об'єктів на сторінках. Програмування сайта передбачає створення різних веб-компонентів, завдяки яким опрацьовуються дані, що вводяться на сайті його відвідувачами.
9
У чому полягає процес створення веб-сайта?
Розділ 9 § 29
Вміст сайта, який зазвичай займає 70-80 % його площі, безпосередньо впливає на дизайн майбутнього сайта. Тому спочатку добирають контент сайта, тобто всі матеріали та дані, які потрібно буде розмістити:,,,,
Текст
Таблиці
Малюнки
Графіки тощо
І лише потім обирають його художнє оформлення.
9
У чому полягає процес створення веб-сайта?
Розділ 9 § 29
Перед розміщенням в Інтернеті сайт тестується як розробником, так і замовником, після цього виправляють знайдені помилки та некоректності.
9
У чому полягає процес створення веб-сайта?
Розділ 9 § 29
Публікація сайта в Інтернеті передбачає його розміщення за обраним доменним ім'ям, яке реєструється у великих пошукових машинах і каталогах.
Для того щоб сайт відвідувала значна кількість користувачів, потрібно здійснювати заходи щодо його популяризації — «розкрутки» сайта. Для цього використовується контекстна й банерна реклама, SEO, SMO та інші методи.
9
У чому полягає процес створення веб-сайта?
Розділ 9 § 29
Пошукова система враховує такі параметри сайта при визначенні його релевантності (ступеня відповідності запиту, що вводиться при пошуку):
9
У чому полягає процес створення веб-сайта?
Розділ 9 § 29
До факторів, які знижують рейтинг сайта, належать:
технології, які пошукові системи розглядають як спам
занадто довгі URL-адреси
надлишкова кількість посилань
графічна навігація
переадресація URL тощо
9
Розгадайте ребус
Веб-сайт
Розділ 9 § 29
9
Домашнє завдання
Проаналізувати
§ 29, ст. 191-196
Розділ 9 § 29
9
Працюємо за комп’ютером
Розділ 9 § 27
Сторінка
212-213
9
Дякую за увагу!
За новою програмою
Урок 48
9