Урок № 23
Тема уроку: « Типи веб-сайтів. Класифікація веб-сайтів. Етапи
створення веб-сайтів. Основи веб дизайніу»
Мета: ознайомити учні з поняттями Браузер, CMS, Веб-сайт, Контент-менеджер, WWW,
SPARQL, URN, Веб-розробка, , Веб-додаток; оглянути Основні етапи веб-розробки,
приклади технологій і мов програмування для створення веб-додатків, WYSIWYG.
виховати: культуру спілкування та роботи в мережі Інтерент
Тип уроку: засвоєння нових знань
Структура уроку:
І .Організаційни
етап.
ІІ. Пояснення нового
матеріалу.
ІІІ. Закріплення
отриманих знань.
IV. Повідомлення домашнього завдання.
Хід уроку:
І. Організація навчального процесу.
ІІ. Пояснення нового матеріалу.
Веб-сайт (веб-вузол) — це сукупність
веб-сторінок, доступних в мережі Інтернет, які об‘єднані між собою за змістом
та навігаційно. Всі сайти, які є вільно доступними через мережу Інтернет,
утворюють Всесвітню павутину World Wide Web — найбільше сховище інформації. Станом
на лютий 2007
року в Інтернеті було зафіксовано понад 108,8 мільйонів сайтів, і всі вони
різні.
Сайти-брошури є найпоширенішими, вони містять практично ті ж матеріали, що й
традиційні рекламні брошури. Їхньою метою є рекламування послуг та товарів
певної компанії.
Сайти електронної комерції,
основною метою яких є продаж товарів. Вони розраховані на те, що кожен їх
відвідувач є потенційним покупцем, і тому містять ціни, опис особливостей,
рекламу, а також можливість придбати певну послугу чи товар.
Громадські сайти — головною їх ознакою є спілкування між відвідувачами сайта.
Такі вузли формують власні групи однодумців, людей зі спільними інтересами.
Портали — це вхідні ворота
доступу до різноманітних ресурсів. Прикладом українського порталу можна навести
http://www.bigmir.net/ Тут користувач може зареєструватись і отримати доступ до всіх послуг
цього вузла — електронної пошти, блогів, пошуку роботи, служби оголошень,
погоди, новин, гороскопів, а також, відділу торгівлі, подорожей, відсилання SMS
та багато іншого.
Користувачеві
найлегше класифікувати веб-сайти відповідно до їх тематики, функціональності
або загального вигляду. Тож за цими ознаками можна виділити такі найпоширеніші
типи сайтів:
блог — сайт, що
використовується для читання та запису онлайнових щоденників, може також
містити форум. Прилади: http://www.livejournal.com/ та http://www.dnevnik.org.ua/
бізнес-сайт — сайт з
матеріалами про компанію чи послугу. Наприклад http://microsoft.com/
комерційний сайт — забезпечує
функцію електронної торгівлі, наприклад http://www.amazon.com/
громадський — сайт, який слугує
потребам деякої громади, групи людей зі спільними інтересами, які хочуть
спілкуватись між собою. Наприклад http://www.myspace.com/
база
даних — сайт, котрий призначений для пошуку та відображення записів бази
даних, наприклад http://www.rada.gov.ua/
каталог — сайт, який
містить матеріали, розподілені по категоріях та підкатегоріях, такі як http://www.yahoo.com/ чи http://www.yandex.ru/
сайт
матеріалів — призначений для завантаження матеріалів у електронному вигляді, таких
як програми, ігри, музика та зображення.
сайт
працевлаштування — дозволяє працедавцям розміщувати вимоги щодо вакансій. http://www.job.ua/
гумористичний — містить анекдоти,
жарти, веселі історії чи будь-які інші гумористичні матеріали для розваги http://www.kulichki.ru/, http://www.exler.ru/
інформаційний — його зміст
повинен інформувати користувачів, але не обов’язково з комерційною метою. http://www.lviv.net/
новинний
сайт
— схожий на інформаційний, проте призначений для поширення новин та коментарів
щодо них http://www.bbc.co.uk/
сайт
відгуків — на ньому користувачі можуть залишити відгуки про різноманітні продукти
чи послуги http://www.ayda.ru/ (відгуки про
відпочинок), http://www.mrqe.com/ (рецензії на
фільми)
пошуковий
сайт
—дозволяє здійснювати пошук інформації чи посилань, http://www.google.com/
веб-портал — є початковим
сайтом, через який можна вийти на інші ресурси Інтернету http://www.bigmir.net/
вікі-сайт — сайт, який
редагується кількома людьми. Наприклад, вільна енциклопедія http://uk.wikipedia.org/
Текстові сайти — містять досить
мало зображень, переважно на них лише текстова інформація. Такі сайти є порівняно
невеликими за розміром і мають простий дизайн. Дуже часто сайти інших типів
мають, крім стандартної, ще текстову версію. Наприклад, http://litopys.org.ua/
Графічні сайти — окрім певних
текстових матеріалів містять багато графічних: випадні меню, піктограми,
анімаційні зображення тощо. Сайт Верховної Ради України http://www.rada.gov.ua/
Імітаційні сайти — запозичують
ідею оформлення з реального світу. Так, наприклад, сайт про автомобілі містить
програму, котра дозволяє відобразити всі деталі автомобіля на екрані, включаючи
огляд з позиції водія в процесі руху. Сайт компанії Merсedes http://mercedes-amg.com/
Ергономіка
Ергономіка
(від гр. ergon робота та nomos закон) — наука, яка вивчає робочі
процеси з метою створення оптимальних умов праці, що сприяє підвищенню її
продуктивності. Ергономічний сайт — це сайт, створений ґрунтуючись на основних
наукових знаннях про будову та функціонування людського ока.
Розглянемо основні
елементи ергономічного візуального інтерфейса. По-перше, він відображається на
екрані монітора і складається з ряду ділянок, частина яких є найактивнішими, тобто одразу впадають в
око. По-друге, кольорова схема
елементів інтерфейса має бути побудована на основі психофізіології кольору.
По-третє, гарнітуру шрифту, його
розмір, зображення, а також варіанти розташування текстових блоків на сторінці
необхідно вибирати відповідно до ступеня їх важливості для цільової аудиторії.
Нарешті, це зручна і інтуїтивна система навігації.
І останнє (за порядком, але не за значенням): інтерфейс програми повинен
адекватно моделювати реальні життєві ситуації, що виникають в тій або
іншій області застосування. Інтерфейс повинен бути непомітним доти, поки
користувач звертає свою свідому увагу на змістовну частину, а не на спосіб її
подання.
Веб-дизайн
Веб-дизайн - це розділ дизайну, чітко зорієнтований на кінцевого користувача, він
поєднує елементи художніх, технологічних, комерційних та інформаційних наук. Веб-дизайн
означає проектування для Інтернету. Можна виділити п’ять основних складових
поняття веб-дизайна:
Зміст — означає форму та організацію наповнення сайта: стиль написання
тексту, так і його упорядкування, подання та структурування за допомогою мови
HTML.
Оформлення — загальний вигляд сайта, який включає в себе графічні елементи
прикраси та навігації.
Технології — до цієї категорії належить використання HTML та CSS.
Подання — швидкість та надійність представлення сайта в мережі Інтернет.
Мета
— причина існування сайта, часто пов’язана з економічними міркуваннями.
У веб-дизайні можна
виділити кілька основних дилем, з якими стикаються при розробці практично усіх
веб-сайтів. Веб-майстрові необхідно знайти хисткий баланс між: власними
можливостями та потребами користувачів; формою та функціями веб-сайта; усталеними
правилами та творчими рішеннями; якістю виконання веб-сайта
Планування
веб-сайта
Кожен веб-проект має
свої завдання і стикається з власними унікальними проблемами, але загалом
процес розробки комплексного веб-вузла має такі шість етапів:
1.
Планування
2.
Інформаційна архітектура
3.
Дизайн
4.
Реалізація
5.
Маркетинг
6.
Оцінювання і підтримка
Структура
сайта
Інформаційна
архітектура — це спосіб організації матеріалів для якомога легшої навігації та
керування ними. Можна виділити такі інформаційні архітектури сайта.
Все в одному. Це найпростіша
модель. Вся інформація розміщується на одній сторінці. На такій сторінці
обов’язково слід розмістити всю необхідну інформацію, включаючи контактну.
Однорівнева модель — всі
сторінки є рівнозначними, і на кожну можна перейти з будь-якої іншої. Це найпоширеніша
модель для простих сайтів, які містять стандартні розділи: Головна сторінка,
Про нас, Контакти, Товари.
Індекс. Ця структура дуже схожа
на попередню, але має ще головну сторінку з посиланнями на решту. Ця
сторінка-зміст часто містить список матеріалів, які можна знайти на цьому
сайті. Часто за таким принципом можуть бути реалізовані телефонні довідники,
енциклопедії тощо.
Ромашка. Ця модель є корисною
для чітких лінійних залежностей, коли одна дія має чітко слідувати за іншою, а
всі дії в будь-якому разі будуть починатись на головній сторінці. Прикладом
такого сайта може бути сервіс електронної пошти, де користувач може створити
лист, а далі - прикріпити до нього файл.
Чітка ієрархія — це система у
якій на сторінку нижчого рівня можна потрапити лише через її «батька». Це може
відповідати розподілу офісів однієї компанії містами України, адже кожен офіс
може розташовуватись лише в одному місті.
Багатовимірна ієрархія. За такої
організації змісту сайта користувач може потрапити на один і той же матеріал
різними способами. Тобто, реалізується кілька ієрархій, які перетинаються між
собою. Типовим прикладом такої ієрархії є сайт Амазон www.amazon.com який дозволяє здійснювати пошук книги за жанром, автором чи назвою
твору.
Пошук. Функція пошуку часто може
використовуватись як можливість навігації чи елемент архітектури. Користувачеві
одразу на головній сторінці сайта пропонується здійснити пошук, після чого йому
надається перелік сторінок сайта, що відповідають заданим критеріям.
Варто продумати таку
структуру сайта, щоб вона була якомога зручнішою та зрозумілішою для
відвідувача. Після цього слід визначитись з дизайном цієї структури.
При цьому необхідно брати до уваги такі фактори:
доступність — навігація є однією з найважливіших елементів
будь-якої сторінки. Тому необхідно зробити її доступною у будь-який момент.
значимість — гіперпосилання мають бути зрозумілими, з
відповідним змістом.
видимість — гіперпосилання повинні якимсь чином виділятись з
навколишніх елементів.
цілісність — навігація має бути доступною на усіх сторінках
сайта.
Часто виникає питання
про деталізацію структури, тобто на скільки блоків треба розбивати зміст сайта.
При вирішенні цієї проблеми треба пам’ятати про особливість веб-сторінок - користувачі не люблять лінійок
прокручування. Нормальним вважається
розташування інформації на 2-3 екрани з використанням вертикального
прокручування.
Крім того, потрібно
враховувати і розмір веб-сторінки.
Користувачі розраховують чекати на завантаження сторінки не довше, ніж 10
секунд. Після цього часу відвідувач починає відкривати інші сторінки і
навряд-чи дочекається повного завантаження першої.
Навігація
Термін «навігація» означає систему, схему
пересування у просторі. І з цього визначення бачимо, що навігацією можна
назвати і схему пересування інформаційним простором Інтернету, а також окремого
сайта. Якщо користувач не зуміє зорієнтуватись у системи навігації веб-сайта,
він просто його покине. Користувач завжди повинен знати, де він перебуває, де
він вже побував і куди він може перейти на кожній сторінці своєї подорожі
Інтернетом.
Вказівник місця перебування
Сайт має чітко ідентифікувати себе
на кожній своїй сторінці. Яке б гіперпосилання не вибрав користувач, він
повинен розуміти, що він перебуває на певному сайті, ще не вийшов за його межі.
Це означає, що на кожній сторінці варто розмістити логотип чи загальну назву
сайта.
Відвідані сторінки
Сучасні браузери
мають кнопку Назад, котра завжди може перевести користувача на одну із вже відвіданих
сторінок. Також браузери забезпечують можливість виділення відвіданих
гіперпосилань іншим кольором. Важливе значення також мають назви веб-сторінок, які вказуються у тезі <TITLE>. Саме під такими назвами
зберігаються адреси сторінок у папці Вибране, а також у меню кнопки Назад.
Подальший перегляд
Щоб користувач міг
визначитись з тим, куди він бажає перейти з певної сторінки, він має розуміти
загальну структуру сайта та бачити гіперпосилання, які б відповідали його
потребам.
Навігаційні рішення
Зміст сторінки — перелік тем,
які містить ця сторінка, переважно розміщений на початку сторінки. Переважно
назви тем робляться гіперпосиланнями-якорями, які при клацанні на них
переведуть користувача на відповідний розділ.
Горизонтальне меню. При
створенні горизонтальних меню необхідно враховувати, що не можна перевищувати
ширину сторінки. Використання горизонтального меню доречне у разі, коли
невелика кількість пунктів меню визначена заздалегідь, і воно не підлягатиме
зміні.
Стрічка навігації відображає
весь шлях від домашньої сторінки сайта до сторінки, на якій у цей момент
перебуває відвідувач: Головна сторінка à Ресурси
за темами à Інтернет à Мова HTML
Закладки - це різновид
навігаційної стрічки. Проте вони чіткіше вказують на активний в цей момент
розділ сайта, наприклад http://uk.wikipedia.org/
Бокові меню є найбільш поширеним рішенням для сайтів. Переважно використовується
коли навігація має лише один рівень і є відносно фіксованою.
Меню, що випадає. Принцип дії
полягає у тому, що користувач клацає на кнопці, після чого появляється меню
наступного рівня.
Багаторівневе дерево навігації—
на екрані відображається все ієрархічне дерево будови сайта і користувач робить
вибір на користь одного з розділів.
Сторінки. Матеріал розбивається
на кілька сторінок (зазвичай це відбувається з довгими статтями, індексами,
форумами чи результатами пошуку).
Гіперпосилання — це
найважливіша частина гіпертексту. Гіперпосилання має чітко сигналізувати
користувачеві, що він отримає, клацнувши на ньому. Підкреслений текст повинен
вказувати на зміст об’єкту, до якого буде здійснений перехід.
Одне з найстаріших
правил веб-дизайну застерігає від використання гіперпосилань у стилі «клацніть
тут». Замість фрази: «Для ознайомлення з інформацією про історію мережі Інтернет,
клацніть тут»
краще писати: «Ви
можете ознайомитись з додатковою інформацією про історію мережі Інтернет»
Доступність ресурсу:
Відкритий веб ресурс
- всі розділи сайту повністю доступні для відвідувачів
Напіввідкритий веб
ресурс - розділи сайту доступні після реєстрації відвідувача
Закритий веб ресурс -
як правило, службовий сайт доступ до якого має обмежене число користувачів
Розміщення ресурсу:
У мережі Інтернет -
загальнодоступні
У локальній мережі -
локальні сайти
Сайт візитка -представництво компанії
в мережі Інтернет. Надає загальну інформацію про власника (компанія,
підприємець і тд). Як правило, складається з 5-7 сторінок, при цьому
максимально описує вид діяльності. Головні розділи - про компанію, прайс-листи,
контактні дані, схема проїзду.
Бізнес сайт -це каталог
продукції компанії (товари або послуги). У каталозі присутній докладний опис
товару, публікуються сертифікати й нагороди, відгуки клієнтів і звичайно
технічні дані. Сайт даної специфікації незамінний для будь-якої компанії.
Промо сайт - веб сайт конкретної торгової марки
(бренду). Створюється з метою реклами нового продукту або бренду в цілому.
Розділи: акції, вікторини, голосування, ігри і тд.
Інтернет - магазин це каталог товарів з можливістю онлайн
замовлення. Клієнт має можливість оплати товару, за допомогою різних сервісів
використовуючи при цьому пластикову карту, рахунок або Інтернет гроші. Розділи:
про магазин, допомога, каталог, кошик, сторінка замовлення, контакти.
Корпоративний сайт - містить повну інформацію про компанію
(послуги, товари і тд.). Як правило, має складну структуру і має розширену
функціональність. Може бути відкритий для відвідувача або призначений для
внутрішнього використання (зв'язок, документообіг і тд .).
Розробка дизайну
На даному етапі розробляється концепція
надання інформації користувачеві. Дизайнер розробляє макети сторінок сайту
(головна, типові). Сучасні сайти складаються з безлічі графічних елементів,
тому веб дизайнер продумує всі деталі макета, створює структуру розділів,
навігації і тд. Далі структура обговорюється співробітниками студії
(верстальники, програмісти, сеошники). Після затвердження структура подається
роботодавцю, якщо замовник задоволений, починається отрисовка макетів, як
правило, декілька варіантів дизайну. Опрацьовуються всі деталі кнопки, форми,
списки, заголовки і тд. Кінцевий результат надається замовнику. Після
затвердження макети передаються верстальщикам веб студії.
Верстка
Верстальщик отримує макети, що складаються з
шарів розроблені в графічному редакторі (Psd, Ai). Завдання верстальника -
перетворення графічних макетів в веб сторінки. Складність даного етапу розробки
- сумісність різних браузерів. Веб сторінка повинна однаково коректно
відображатися у всіх популярних браузерах, що часто відбувається на оборот.
Елементи сторінки в різних браузерах інтерпретуються по-різному, що призводить
до не коректного відображення веб сторінок. На допомогу у цій ситуації
приходять різні "хакі" придумані розробниками і впроваджувані
безпосередньо в саму розмітку гіпертексту (html) або в каскадні таблиці стилів
(css). Після перевірки "кросбраузерності" верстки починається
наступний етап - програмування.
Програмування
Завдання програміста об'єднати задумку
дизайнерів з роботою верстальників. Фахівці веб студії створюють програмну частину
ресурсу. Програмна основа сайту розробляється з нуля або за допомогою
розробленої CMS. Враховуючи той факт, що останнім часом системи управління
сайтом дуже популярні, як правило, всі сучасні сайти використовують CMS.
Виходячи з технічного
завдання, веб студія визначає тип веб
сайту . Зважує обсяг робіт і призначає ціну створення сайту.
ІІІ. Закріплення отриманих знань.
Завдання
1.
Відкрийте у браузері адреси і визначте їх приналежність до однієї з категорій
за таблицею:
|
Адреса
|
Класифікація
|
||
|
Функціональна
|
Тематична
|
Візуальна
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
http://www.webbyawards.com/webbys/current.php
3. У
браузері відкрийте сторінку Представництва Європейської Комісії http://www.delukr.ec.europa.eu/
4.
Розгляньте елементи навігації, що присутні на сторінці. Тут міститься одразу
кілька видів навігаційних елементів: навігаційна
стрічка нагорі сторінки, горизонтальне
меню (Головна сторінка, Контакти, Мапа сайта, Посилання, Вакансії,
Стажування), меню, що випадає (Про
нас, ЄС та Україна, Інформаційні джерела, Конкурси та гранти, Що таке ЄС, Що
нового, Актуальна інформація, Зовнішні відносини ЄС). При виборі будь-якого з
цих посилань відбувається перехід на сторінку, присвячену відповідній
інформації.
5.
Опишіть навігаційні рішення на сторінках із таблиці.
IV. Повідомлення домашнього завадння.
Р.4,
Ст 224-243, Запит. 1-12,завдання 3,5,6.на ст 232-234; запитання 1-13,завд.
1,6,8 на ст..241-243
