Web-dist.org.ua/pluginfile.php/7033/mod_resource/content/1/2. Розробка макету... · журнал «Електронні бібліотеки», vio.fio.ru - «Питання

Тема 12. Розробка макету сайту. Проектування та розробка

навчального сайту. Принципи та рекомендації.

На цьому етапі Ви ознайомитесь із:

поняттями Web-сайт, Web-сторінка; принципами розробками макету сайта;

Створення Web - сайтів є однією з найважливіших технологій розробки

ресурсів Інтернет.

Web-сайт - це інформаційний ресурс, що складається з пов'язаних між собою гіпертекстових документів (Web-сторінок), розміщений на Web-сервері і має індивідуальну адресу.

Web-сторінка представляє собою текстовий файл з розширенням *. htm, який містить текстову інформацію та спеціальні команди - HTML-коди, які визначають в якому вигляді ця інформація буде відображатися у вікні браузера.

Уся графічна, аудіо-та відео інформація безпосередньо в Web-сторінку

не входить і являє собою окремі файли з розширеннями *. gif, *. jpg

(графіка), *. mid, *. mp 3 (звук), *. avi (відео ).

Wеb-cайт - це інформаційний продукт, що представляє собою

сукупність сторінок, об'єднаних за змістом і розташованих на одному Web-

сервері. Завдання Web-Сайту - безперебійне надання різноманітних

інформаційних продуктів і послуг цільовій аудиторії в on - line режимі.

Для показу своєї діяльності науково-дослідні, проектні організації,

промислові підприємства, освітні установи можуть використовувати різні

типи сайтів: сайт-візитку, вітрину, електронний магазин (Інтернет-магазин),

інформаційний сайт, корпоративне представництво, портал.

Крім рішення комерційних завдань, формування іміджу підприємства і

рекламування його продукції, Web-сайти дозволяють:

-Вивчати потреби, думки і переваги покупців, рівень їх

поінформованості про певні товари і фірми;

-Здійснювати спільні проекти з віддаленими виконавцями;

-Проводити внутріфірмове або внутрішньокорпоративне навчання

співробітників;

-Формувати спільні цінності і норми поведінки, роз'яснювати політику,

що проводиться підприємством, полегшувати спілкування керівництва і

персоналу.

Завдання, вирішення яких може сприяти Web-сайт, умовно поділяють

на три групи:

іміджеві та рекламні;

комерційні;

організаційного розвитку, мотивації співробітників, утворення

команди.

Слід зазначити, що всі ці завдання вирішуються підприємствами з

використанням багатьох інших засобів: поширення друкованої реклами,

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

журналів. Однак електронне середовище володіє цілим рядом безперечних

переваг і можливостей, серед яких:

- інтерактивний характер комунікації;

- доступність інформації протягом 24 годин користувачам Всього

світу;

- оперативне оновлення інформації, в тому числі її доповнення з

урахуванням питань або пропозицій відвідувачів сайту;

- надання необмеженого обсягу інформації, причому крім

текстової та графічної, ще звукової та відеоінформації;

- формування привабливого образу підприємства за рахунок

сумарного впливу відомостей про його історію, сучасний стан,

фінансові можливості, науково-технічний потенціал, участь у

реалізації великомасштабних проектах і т. д.;

- персоналізація інформації, призначеної для різних цільових груп;

- багатоаспектний і швидкий пошук необхідної інформації у

великих масивах інформації;

- отримання відомостей про відвідуваність сайту, тобто його

результативності як засобу комунікації;

- створення сайтів, присвячених окремим товарів або послуг, або

орієнтованим на різні цільові аудиторії.

Однак перераховані достоїнства купуються Web-сайтами не

автоматично, а з'являються лише в результаті обдуманого, обгрунтованого

підходу до їх створення.

2 Визначення структури та інформаційного наповнення освітнього сайту.

Сайт, який представляє деяку організацію, називається корпоративним

або офіційним сайтом організації. До офіційного сайту пред'являються більш

жорсткі вимоги в частині інформаційного вмісту, графічного дизайну,

навігації, хостингу.

Офіційний сайт зазвичай має такі розділи:

Новинна інформація.

Нормативні документи, положення.

Напрями діяльності.

Структура установи.

Кадровий склад.

Контактна інформація (список відповідальних осіб, їх посади,

координати та години прийому).

Сайти освітніх установ відносяться до групи освітніх сайтів.

Під освітнім веб-сайтом розуміється сукупність веб-сторінок з

повторюваним дизайном, що несуть в собі цілеспрямований процес навчання

і виховання в інтересах особистості, суспільства, держави, об'єднаних за

змістом, навігаційно і фізично знаходяться на одному сервері, використання

яких може супроводжуватися атестацією учнів.

Створення веб-сайту - подія, що підвищує імідж освітньої установи.

Хороший сайт, вбираючи в себе всю корисну інформацію, є найкращою

візитною карткою і комерційної фірми, та освітнього закладу, працюючи на

них у будь-який час доби. Безумовно, це сучасно і престижно. Це прекрасна

можливість продемонструвати всім свої досягнення, розмістити актуальну

інформацію для зацікавлених осіб (студентів, абітурієнтів, викладачів, колег

з інших навчальних закладів). Це спосіб розповісти про свої успіхи,

подякувати спонсорів і т.д.

На сайті можна розміщувати тексти статей, звіти про проведені заходи

(у тому числі фото та відеоматеріали). Все це буде доступно мільйонам

користувачів Інтернету.

До основних характеристик освітніх сайтів відносяться:

Зміст освітнього інтернет-сайту - єдність всіх основних елементів

(текстових та графічних) освітньої інформації, яка існує і вираженої у вигляді

веб-сайтів, а також єдність зв'язків цих основних елементів;

дизайн освітнього інтернет-сайту - процес вибору та організації

графічних компонентів з метою досягнення певної мети, яка може бути або

естетичної, або мати функціональну підґрунтя, а часто переслідувати обидві

ці цілі;

Технічна реалізація освітнього інтернет-сайту - вибір компонентів,

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

донесення освітньої інформації до користувача;

Експлуатаційне освітніх інтернет-сайтів - характеристики, що

інформують про використання освітніх сайтів користувачами.

Сайт освітнього закладу в залежності від свого змісту може ставитися

до різних типів. Це відноситься до багатофункціональних сайтів. Також в

результаті свого нарощування на різних етапах існування сайт може міняти

свої завдання, свій зміст і функціональне призначення. Можна виділити

кілька видів освітніх сайтів: сайти навчальних закладів, сайти наукових

досліджень, сайти довідкового характеру, сайти змагальних та

інформаційних Інтернет-проектів, сайти дистанційної освіти, сайти для

поширення культурної та освітньої інформації, сайти типу віртуальних

методичних об'єднань, консультативні сайти, освітні портали.

Сайти навчальних закладів

Сайти навчальних закладів умовно можна розділити на сайти закладів

загальної середньої освіти (початкових шкіл, шкіл, гімназій, ліцеїв), сайти

факультетів і кафедр вузів, сайти вищих навчальних закладів, сайти установ

професійної освіти (коледжів, технікумів).

Подібні сайти забезпечують інформаційну підтримку, комунікацію із

зовнішнім світом, сприяють у проведенні різноманітних конкурсів. Деякі

установи загальної середньої освіти навіть організовують за допомогою web-

сайтів дистанційні батьківські збори.

Сайти наукових досліджень

Подібні сайти діляться на кілька підвидів залежно від виконуваних

ними функцій. Це можуть бути сайти дослідних робіт учнів, студентів,

вчителів, викладачів, наукових працівників; сайти "наукові лабораторії"

(наприклад, www.nsu.ru/materials/ssl/ - наукова фізична лабораторія

школярів); сайти "творчі майстерні" (наприклад, users.omskreg.ru / ~ kolosov /

school / programs / - дистанційна школа творчості). Також можна виділити

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

можуть поєднувати в собі три вище перерахованих підтипу. До них можна

віднести такі web-сайти, як www.physicon.ru - сайт компанії ФІЗІКОН,

російського розробника навчальних компакт-дисків з природничих наук і

систем дистанційного навчання для Інтернет; iccc.botik.ru / ICCC / -

Міжнародний дитячий комп'ютерний центр; www.citmgu.ru/ - центр

інформаційних технологій.

Сайти довідкового характеру

До сайтів довідкового характеру відносяться електронні енциклопедії,

словники, каталоги, бази даних і т.д.

Прикладами електронних енциклопедій можуть служити:

www.encyclopedia.ru/ - світ енціклопелій; niac.natm.ru / graphinfo -

енциклопедія комп'ютерної графіки, мультимедіа та САПР; mega.km.ru / pc / -

енциклопедія персонального комп'ютера; www.viruslist.com / ru / - найбільша

в світі енциклопедія комп'ютерних вірусів.

Сайти-словники дозволяють в онлайн режимі дізнатися значення слова,

вузькоспеціалізованого терміна, фразеологізму; правильно утворити іншу

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

пошукові системи (наприклад, Рамблер), але існують і самостійні сайти:

www.primavista.ru/dictionary/ - каталог словників, www.glossary.ru - служба

тематичних тлумачних словників і т.д.

Сайти-каталоги містять перелік посилань з певної тематики, наприклад,

www.codenet.ru - каталог посилань з інформатики та інформаційних

технологій.

Бази даних (наприклад, www.gpntb.ru / win / search / alg.html - фонд

алгоритмів і програм, www.nlr.ru - база даних авторефератів дисертацій з

бібліотекознавства, бібліографознавства та книгознавства).

Сайти, що містять довідкову інформацію про проведені конференції,

конкурси, семінари наукового та освітнього спрямування, за що надаються

гранти. У деяких випадках створюються сайти, присвячені конкретному

заходу (як правило, це відноситься до масштабних проектів: міжнародних

семінарів, форумів і т.п.), але існують і сайти, які містять у собі інформацію

щодо заходів схожої спрямованості, наприклад, ito.edu . ru - конгрес

конференцій "Інформаційні технології в освіті", olympiads.mccme.ru -

"Олімпіади для школярів" - інформація про олімпіади та інших заходах для

школярів. На подібних сайтах розміщується інформація про майбутні заходи,

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

матеріали конференцій.

Сайти змагальних та інформаційних Інтернет-проектів

До сайтам цього виду належать ті, що присвячені олімпіад та

конкурсів, що проводяться в Мережі. Це сайти телекомунікаційних олімпіад

та вікторин (наприклад, www.vspu.ac.ru / de - Воронезькі телекомунікаційні

олімпіади та вікторини, olympiads.ru - Олімпіадні інформатика);

Сайти для проведення освітніх конкурсів (наприклад,

www.thinkquest.ru/ - міжнародний конкурс ThinkQuest для школярів,

студентів та їхніх наставників по створенню веб-сайтів освітньої тематики,

www.samlit.samara.ru / clnew / reg.htm - щорічний відкритий очно -

дистанційний фестиваль «Комп'ютерна країна»);

Сайти інформаційно-розважальних проектів освітньої тематики

(наприклад, school-sector.relarn.ru / - "Шкільний сектор" - інформаційно-

розважальний проект для школярів і їх вчителів, school.holm.ru - «Шкільний

світ»);

Сайти для формування зв'язків між студентами та викладачами,

учнями та вчителями, учнями та батьками (наприклад, www.college.ru -

"Відкритий коледж").

Сайти дистанційної освіти.

Сайти дистанційної освіти дозволяють отримувати та оцінювати

знання, не виходячи з дому (dist.org.ua – сайт дистанційної освіті, інститут

післядипломної педагогічної освіти ім. К.Д. Ушинського). Це різні

електронні задачники, підручники, практикуми, самовчителі, центри

тестування і дистанційного навчання.

Сайти типу "навчально-методичний посібник" або "електронний курс

лекцій" (наприклад, www.burenina.narod.ru - шкільний курс екології для учнів

старших класів; club-edu.tambov.ru/methodic/mm/index.html - навчально -

методичний посібник «Основи педагогічної дизайну та створення

мультимедійних навчальних аудіо / відео матеріалів»; thl.narod.ru / tehnologia

/ informatika / - курс лекцій «Основи інформатики»).

Сайти типу "лабораторний практикум" (наприклад, лабораторні

роботи: www.apto.tstu.ru/win-1251/lab/sreda/ope/ob_ecol_html/lab-rab.html -

лабораторні роботи з курсу «Обладнання промислової екології»; khpi-

iip.mipk.kharkiv.edu / library / tv / lab / index.html - лабораторні роботи з курсу

«Теорія ймовірностей і математична статистика», khpi-

iip.mipk.kharkiv.edu/library/pgm/lab/index.html - лабораторна робота з курсу

«Основи програмування та алгоритмічні мови»).

Сайти типу "електронний задачник". В даний час їх в Інтернеті не так

вже й багато, а якщо і є, то знаходяться на закритих розділах, наприклад,

mschool.kubsu.ru / ingtr / tipovoy.htm - задачник з теорії ймовірностей і

математичної статистики; tiukanov.boom.ru / teach / pp / index.htm - практикум

з програмування.

Сайти типу "електронний підручник" передбачають різні форми

поєднання очного та дистанційного навчання, наприклад, khpi-

iip.mipk.kharkiv.edu/library/datastr/book/index.html - навчальний посібник

«Моделі та структури даних», www.nmarket. ru/program/delphi/lessons-2 / -

електронний підручник з Delphi.

Сайти для тестування, оцінки знань. Можуть бути як універсальними,

тобто містити тести з різних дисциплін і з різних спеціальностей, (наприклад,

feppo. ru), так і присвяченими певного предмету (наприклад, altnet.ru / ~

mcsmall / cat_inf.htm - тестування з інформатики та інформаційних

технологій; tests.specialist.ru - тести з програмного забезпечення).

Сайти центрів дистанційного навчання та центрів тестування.

Сайти цього виду можуть поєднувати на своїх сторінках всі чотири

вищезазначені підтипи, наприклад, www.eidos.ru - Центр дистанційної освіти

"Ейдос", dlc.miem.edu.ru-освітній портал центру дистанційного навчання

МІЕМ.

Сайти для поширення культурної та освітньої інформації

Це, як правило, віртуальні бібліотеки, музеї, кафе, електронні освітні

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

бібліотеки: www.lib.ru - бібліотека Максима Мошкова, www.litportal.ru -

електронна бібліотека, www.rusdoc.ru - комп'ютерна електронна бібліотека:

документація, програмні керівництва, операційні системи та мови

програмування, книги, публікації.

Сайти бібліотек: www.gpntb.ru - Державна публічна науково-технічна

бібліотека Росії, www.rsl.ru - Російська державна бібліотека.

Віртуальні журнали та газети освітньої тематики: www.informika.ru

/ text / magaz - розділ «Газети і журнали» сайту ФДМ ДНДІ інформаційних

технологій і телекомунікацій, www.iis.ru/el-bib/ - науковий електронний

журнал «Електронні бібліотеки», vio.fio.ru - «Питання Інтернет-освіти».

Сайти освітніх газет і журналів містять електронну версію певного

друкованого періодичного видання, наприклад, www.vimi.ru - електронна

версія журналу «Питання захисту інформації», www.iis.ru / infocos -

«Інформаційне суспільство, www. Rir. Csti. Ru - «Інформаційні ресурси Росії,

www.ug.ru -« Учительська газета ».

Віртуальні музеї: schools.keldysh.ru/sch444/MUSEUM / - віртуальний

музей інформатики (на цьому сайті також є каталог віртуальних музеїв

усього світу з інформатики), www.computer-museum.ru/index.php -

віртуальний комп'ютерний музей.

Сайти музеїв: наприклад, dual.deol.ru / culture / museum / politeh.htm -

політехнічний музей.

Віртуальні клуби (кафе): сlub-edu.tambov.ru - Тамбовський

педагогічний клуб працівників освіти; www.child.ru - Московський дитячий

клуб «Комп'ютер»).

Сайти типу віртуальних методичних об'єднань

Сайти методичного об'єднання вчителів з шкільних предметів

(наприклад, www.pedsovet.org - Віртуальне методичне об'єднання вчителів

«Всеросійська інтернет-педрада».

Сайти для тематичних телеконференцій і чатів в online-режимі з

питань освіти: forum.citforum.ru - форуми з інформатики та інформаційних

технологій; alglib.chat.ru - форум за алгоритмами; www.edu.yar.ru / russian /

org / suppl -ed/dlc/teleconf.html - сервер телеконференцій; www.edu.nsu.ru/ites/

- телеконференції «Інформаційні технології в освіті»; forum.ru-board.com -

комп'ютерний форум.

Сайти творчої взаємодії вчителів, викладачів у мережі сприяють

відпрацювання методичних прийомів використання в навчальному процесі

існуючих телекомунікаційних проектів, обміну досвідом. Наприклад, school-

sector.relarn.ru - тижневик «Педрада по середах» на сайті "Шкільний сектор";

club-edu.tambov.ru/main/methodic / - сховище методичних матеріалів

Інтернет-клубу працівників освіти Тамбовської області; teacher.fio .ru /

index.php? c = 44 - педагогічна майстерня - скарбничка методичних ідей і

знахідок кращих вчителів і методистів країни, розробки уроків та сценаріїв

позакласних заходів.

Сайти для підвищення кваліфікації педагогічних кадрів:

choippo.edu.ua - сайт дистанційної освіті, інститут післядипломної

педагогічної освіти ім. К.Д. Ушинського www.ipkro.isu.ru - проект

«Інформаційно - методична INTERNET - підтримка вчителів»,

www.botik.ru/robot/ - «Роботландия» - дистанційне навчання для вчителів та

учнів, www.9151394. ru - курсова система підвищення кваліфікації вчителів

«Використання інформаційних та комунікаційних технологій у навчанні».

Сайти консультативного призначення

Консультативні сайти для вчителів та учнів, студентів та викладачів із

загальноосвітніх предметів: www.nsu.ru / materials / ssl / distance / about.html -

дистанційний консультаційний пункт для старшокласників та викладачів;

www.abiturcenter.ru - навчальний центр довузівської освіти; www .

exponenta.ru - консультативний сайт з математики та інформатики;

www.junior.ru/wwwexam/ - Сайт для підготовки до іспитів з інформатики та

інформаційних технологій.

Сайти для консультаційної допомоги науково-методичним центрам

(наприклад, www.ege.ru - Інформаційна підтримка Єдиного іспиту,

www.rfbr.ru - Російський фонд фундаментальних досліджень, www.edu.ru -

Російське освіта - федеральний портал, www.fio.ru / - Федерація Інтернет-

освіти)

В даний час стали з'являтися так звані освітні портали - великі за

обсягом освітньої інформації сайти, в яких поєднані різноманітні функції і

типи освітніх сайтів. Наприклад: www.abitu.ru - освітній інтернет-портал

"Абітурієнт", www.relib.com - інформаційний портал для програмістів.

До цього ж виду належить, наприклад, web-сайт «Шкільний сектор»

(http://www.school-sector.relarn.ru), створений в 1998 р. Його створення

сприяло розвитку активного сегменту інформаційного освітнього середовища

для вчителів-предметників з різних міст. Тут тижні розміщуються результати

проектної навчальної роботи школярів (у тому числі, web-сторінки різного

типу, створені ними), роздуми вчителів та координаторів мережевої роботи з

приводу мережевій діяльності в школі, інтеграції її до навчальної програми,

виступи фахівців про освітню діяльність шкіл у мережі Internet . Тут же

представлена інформація про семінарах, конференціях, нових web-сайтах,

педагогічних виданнях та медіазасоби, які можуть допомогти вчителям-

предметникам у тому навчальної діяльності та багато іншого.

Структура сайтів освітніх установ досить одноманітна і, як

правило, включає наступні розділи:

Головна сторінка. Дає користувачеві уявлення про структуру сайту.

Комі того, на головній сторінці розміщуються новини, анонси заходів, тобто

та інформація, яка може цікавити різні категорії користувачів (в нашому

випадку це абітурієнти, студенти і викладачі).

Новини (установи та безпосередньо сайту) можуть бути окремою

сторінкою або поєднуватися з іншим розділом. Розміщувати розділ новин

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

впевненість у його майбутніх оновленнях. При цьому застаріла інформація не

завжди марна, просто розташовуватися вона повинна під іншою вивіскою,

наприклад, «архів».

Про заснування (історія, сертифікати якості, шефи, партнери, відомі

випускники). У деяких навчальних закладах працюють гуртки, музеї, центри

творчості тощо, матеріали про них найчастіше розміщуються в окремому

розділі.

Контакти. Можуть включати в себе поштову адресу, схему проїзду,

телефони, Е-mail або форму відправки повідомлення для адміністрації або

групи підтримки сайту.

Статут, правила внутрішнього розпорядку.

Навчання (освітня модель, програми навчання, спеціальності, методики

викладання, методичні матеріали з предметів).

Іспити. Цей розділ містить інформацію про вступні іспити у ВУЗи або

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

про проведення іспитів, ЄДІ в школах, гімназіях, ліцеях.

Викладачі (інформація, сертифікати, атестація). Сайт також може

надавати можливість викладачам розміщувати свої матеріали (аж до

окремого розділу на уроках чи кафедрі).

Учні. У цьому розділі, крім списку учнів і відомостей про них, можна

передбачити місце, де учні (або студенти) можуть представити свої творчі

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

груп. Також в цьому розділі можуть наводиться розклад занять, поточна

успішність.

Фотогалерея. Містить фотографії з різних шкільних або студентських

заходів.

Успіхи (досягнення учнів і викладачів, дипломи, сертифікати).

Заходи (регулярно проводяться заходи, свята, ігри).

Партнери.

Спонсори.

Форум, гостьова книга. Гостьова книга - це місце на сайті, де ваші

відвідувачі можуть залишати свої повідомлення: відгуки на сайт, зауваження,

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

На відміну від форуму, відвідувачі гостьової книги не можуть

відповідати на повідомлення, залишені іншими відвідувачами, і тим самим

зав'язувати дискусію або полеміку з якогось питання. Однак власник сайту

має можливість прокоментувати будь-яке з повідомлень гостьової книги,

Що стосується гостьових книг, то слід враховувати, що тільки активно

оновлюваний "живий" сайт користується авторитетом і підтримкою учнів.

Якщо не забезпечено розвиток сайту, безглуздо заводити гостьові книги та

інші інтерактивні форми спілкування. Результат буде негативним, тобто в

гостьовій книзі буде накопичуватися різні критичні зауваження, зовсім не

додають значимості Інтернет-ресурсу.

Форум сайту може використовуватися як елемент дистанційної

підтримки навчання (наприклад, віртуальний консультаційний пункт). У

такому разі, він повинен обов'язково обслуговуватися відповідальними за

нього (модераторами). Дуже важливо, щоб модератори стежили за

дотриманням правил, консультували, видаляли некоректні повідомлення,

вносили цікаві теми для обговорень і пр.

Цікаві посилання. Зміст цього розділу має бути добре продумано. Саме

зовнішні посилання "склеюють" сторінки Інтернету один з одним. Деякі

пошукові системи не індексують ресурс у разі відсутності таких. При цьому

текст, що передує посиланням, повинен давати чітке уявлення про її

призначення. Занадто велика кількість посилань теж створює проблеми

користувачеві.

Для деяких установ є актуальним створення розділу на іноземній мові

або англомовної версії сайту, а також підтримка контактів із зарубіжними

колегами і друзями. Англомовна версія не обов'язково повинна бути копією

російськомовного сайту англійською мовою, а може бути іншою версією,

можливо, складається на перших порах з однієї сторінки.

Розглянемо докладніше з яких етапів складається процес створення

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

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

1. Постановка мети.

На цьому етапі вирішуються питання загального характеру:

- аналіз web-ресурсів суміжної тематики;

- попередній аналіз цільової аудиторії;

- мета і завдання розроблюваного ресурсу;

- постановка завдання: докладний опис розроблюваного ресурсу,

перерахування його розділів та додаткових функцій чи служб (форум, чат,

розсилка тощо); визначення характеру представлення інформації (статична

чи динамічна) та методів введення даних (із зовнішніх програм чи

безпосередньо на ресурсі); з'ясування вимог до програмної і апаратної

платформи, на яких буде працювати ресурс.

Розглянемо основні питання, які постають перед розробниками веб-

сайтів

• Що потрібно зробити? Важливо скласти найбільш вичерпний опис і

при цьому вкластися в 500 символів.

• Яка інформація буде розміщена на сайті? Просто перелічити розділи,

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

врахуванням всіх бажаних напрямків.

• Які додаткові функції крім подання статичної інформації буде мати

сайт? Перелічити й дати короткий опис кожної функції. По можливості

вкластися в 100 символів.

• Чи буде сайт обмінюватися даними з іншими програмами? Якщо так,

то потрібно дати перелік всіх цих програм та їх короткий опис, пояснити

мету цього обміну.

• Чи є якісь вимоги до програмної і апаратної платформи, на якій

повинен працювати сайт? Якщо так, то треба перелічити ці вимоги й дати

коротке пояснення.

2. Технічне завдання (ТЗ).

Виходячи з чіткого розуміння мети, для якої створюється сайт, обсягів

сайту, його функціональності задаються основні параметри візуального

представлення та структури сайту.

Написання технічного завдання – це надзвичайно складно, так як

розкриття багатьох питань вимагає наявності спеціальних знань. За його

основу береться постановка завдання, що входить у складову частину і є

джерелом нових уточнюючих питань.

Інше джерело відомостей для ТЗ – це знання розробника про те, як треба

реалізувати ту або іншу функцію для того, щоб нею було зручно

користуватися. Ця область знань називається usability (докладніше дізнатись

про неї можна на сайті http://www.usability.ru)

Для того, щоб створити завдання, необхідно проаналізувати діяльність

компанії та основні завдання, які буде розв’язувати сайт. Тому замовникам

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

Розробляється інформаційна архітектура вузла.

Інформаційна архітектура дозволяє організувати вміст веб-вузла і

визначає, яким чином користувач одержить доступ до інформації.

Приступаючи до її розробки, необхідно переконатися, яким є повний перелік

даних, які повинні бути представлені на веб-вузлі. Слід пам’ятати, що додати

нову інформацію в готовий вузел досить складно.

Процес створення інформаційної архітектури починається з поділу

інформації на категорії і визначення пріоритетних даних. Основним

критерієм є важливість інформації. Інформацію варто розбити на 5-7

розділів. Якщо ж розділів більше 7, то документ вважається перевантаженим

інформацією. Далі варто визначити, яка інформація повинна виділятися на

екрані й привертати увагу користувачів, до яких даних користувач повинен

мати постійний доступ. Для спрощення роботи, будується загальний план і

діаграми, які відображають принципи угруповання даних. Елементи

діаграми, що містять інформацію і залучають увагу користувача, варто

виділити.

Інтерактивні засоби.

Інтерактивний вузел характеризується тим, що запрошує користувача

взяти участь у його роботі, дозволяє визначити, які дані повинні бути

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

організувати відгук веб-вузла на дії користувача, від кнопок до об'єктів

віртуальної реальності. Тобто, вони пропонують користувачу приймати

участь в процесі вибору і фільтрації інформації, який підвищує імовірність

того, що користувач повторно звернеться на вузол. Інтерактивні елементи

повинні бути пов’язані один з одним і відповідати основній ідеї вузла. Не

варто перевантажувати його даними й поміщати на сторінки елементи з

якими складно розібратись.

Обираючи інтерактивні елементи, варто зіставляти переваги від їхнього

використання і час, необхідний для їх кодування.

Правила використання інтерактивних елементів:

1. Інтерактивні елементи повинні бути доступні всім користувачам, у

тому числі й людям з фізичними обмеженнями.

2. Користувач повинен знати, скільки часу треба для копіювання

певного об'єкта.

3. Користувач повинен мати можливість контролювати відображення

даних (запускати анімацію чи ні, тимчасово або повністю припинити

відтворення)

4. Не слід нескінченно повторювати фрагменти даних.

5. Необхідно забезпечити зворотній зв'язок.

Типи інтерактивної взаємодії:

інтерактивна навігація,

відтворення інтерактивної мультимедійної інформації,

інтерактивна реклама.

Результатом виконання другого етапу роботи є документ «Технічне

завдання». Він може мати досить значний обсяг (близько 50 сторінок) і

повинен містити всі відомості, які необхідні для подальшої роботи над

проектом:

Структура сайту включає перелік сторінок, короткий зміст і алгоритм

взаємодії;

Перелік засобів, які будуть використані для розробки, містить

характеристику використовуваної графіки в перелік програмних засобів і

використовуваних технологій;

Розрахунок обсягу і вартості робіт являє собою повний перелік

програмних і графічних елементів і виконуваних робіт з кожного з них;

Строки виконання робіт регламентують тимчасові обмеження по

створенню сайту, його розміщенню та тестуванню;

Розміщення, реєстрація домену і його підтримка. Процес включає

визначення доменного імені, при необхідності, його реєстрацію, висновок

договорів зі службою хостинга і підтримку;

Етап завершується затвердженням технічного завдання замовником.

Цим займається менеджер проекту.

3. Проектування.

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

роботу – створення готового продукту. Насамперед, серйозний програмний

продукт варто спроектувати, а саме організувати вміст сайту. Цей етап

включає широкий ряд питань від продумування логічної структури веб-

сторінок до вибору найбільш зручних форм подачі інформації.

Проектуванням займається дизайнер, менеджер проекту.

Можна виділити три основні частини, на які слід звернути увагу:

структура, способи зберігання даних і доступу до них і на шлюзи з іншими

програмами.

Структура. Якщо ми говоримо про найпростіший статичний Web-сайт,

то він складається з набору файлів, які містять інформацію. Між ними є

зв'язок. Такий сайт функціонує відповідно до базової логіки роботи Web-

сайтів. Якщо створюється складний динамічний сайт, який працює з базою

даних і дозволяє оновлювати свій вміст у режимі on-line, то такий сайт буде

містити підпрограми, які працюють на сервері, і підпрограми, які

завантажуються в браузер і працюють на машині користувача. Необхідно

розробити схеми цих підпрограм (компонентів сайту) та їх взаємодії.

Зокрема, розробляються принцип генерації сторінок, принцип формування

інформаційного наповнення, принцип побудови меню та принцип

авторизації.

Зберігання даних. Розрізняють два типи даних: статичні й динамічні.

Статичні жорстко «зашиті» в програму, змінити їх можна тільки виправивши

сам текст програми. Наприклад – «Історія компанії». Звичайно статичний

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

потрібно заходити всередину програми, що вимагає спеціальних знань. На

противагу статичним, динамічні дані час від часу змінюються. Приклад

динамічних даних – новини. Залежно від складності даних існують два

варіанти організації збереження даних:

а) зберігати дані у файлах певної структури,

б) організувати базу даних.

Дані розділимо на 2 групи: текстова інформація та інші дані – схеми,

графіки, малюнки, аудіо-, відеодані, анімаційні послідовності. Зберігати

текстові данні можна двома способами: у базі даних або у файлах. При

вбудовуванні даних з файлів витрачається менше часу на виконання даної

операції, за умови, що не потрібно проводити операції сортування, пошуку.

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

обробляти, або вони часто зміняюються як співробітниками підприємства,

так і користувачами (тобто текстовий файл відкривається для запису), то

доцільно такі дані зберігати в базах даних. Що ж стосується другої групи, то

схеми, графіки будуть зберігатися у файлах формату gif, фотографії й інші

зображення з більшою кількістю кольорів – jpeg, анімаційні послідовності –

gif й swf.

Доступ до інформації можна організувати двома способами.

Наприклад, розмістити дані на сервері і вони будуть використовуватись при

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

питанням безпеки. Але це сповільнює роботу сервера. Тому, в деяких

випадках, доцільно розмістити дані на іншому комп'ютері і періодично, на їх

основі, генерувати сторінки й копіювати дані (інформацію) на сервер.

Шлюзи з іншими програмами. Для того, щоб розроблювальний

продукт міг отримувати інформацію з інших автоматизованих систем,

потрібно розробити спеціальний компонент – шлюз. Існує дуже багато

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

здійснюватись зв'язок.

1) Графічне оформлення

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

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

файл. Ця робота виконується дизайнером.

Отримуючи матеріали, які повинні бути представлені на сайті,

розроблювачі приймаються за компонування вузла, керуючись створеними

раніше інформаційною архітектурою, блок-схемою та структурою. На

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

Ці поняття є взаємозалежними. Чудовий інтерфейс не виправить

враження від погано розробленої або незвичної навігаційної схеми, так само

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

основній меті його створення.

Інтерфейс призначений для користувача. (ПІ, User Interface, UI,

інтерфейс користувача)

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

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

До цих елементів відносяться:

• засоби відображення інформації, відображувана інформація, формати

й коди;

• командні режими, мова користувач-інтерфейс;

• пристрої й технології введення даних;

• діалоги, взаємодія й транзакції між користувачем і комп'ютером;

• зворотний зв'язок з користувачем;

• підтримка прийняття рішень у конкретній предметній області;

• порядок використання програми і документація на неї.

Ергономіка – дисципліна, яка вивчає рух людини в процесі виробничої

діяльності, витрати його енергії, продуктивність й інтенсивність при

конкретних видах робіт. Ергономіка досліджує не тільки анатомічні й

фізіологічні зміни, але й психологічні зміни, яким піддається людина під час

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

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

Існує чотири основні критерії ергономічності (якості) будь-якого

інтерфейсу:

1) Швидкість роботи користувачів;

2) Кількість помилок;

3) Швидкість навчання;

4) Суб'єктивна задоволеність користувачів.

Відповідність інтерфейсу потребам користувача є невід'ємною

властивістю інтерфейсу.

2) Елементи інтерфейсу.

Кнопки

1. Командні кнопки

- Розміри. За законом Фіттса [вікіпедія], чим більше кнопка, тим легше

потрапити на неї курсором. Однак, крім простоти натискання на кнопку є

інша складова проблеми: користувачу повинно бути важко натиснути не на

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

на неї курсором, або встановленням порожнього проміжку між кнопками.

- Об’єм. В інтернеті кнопка повинна бути оформлена як текстове

посилання, якщо вона переміщає користувача на інший фрагмент контенту, і

як кнопка, якщо вона виконує дію.

- Стани кнопок не повиненні виглядати однаково.

- Текст і піктограми. Усі рекомендації з розробки інтерфейсу

вимагають надавати командним кнопкам назви, які виражені у вигляді дієслів

у формі інфінітива (Прийти, Побачити, Перемогти). Крім тексту, на кнопках

можна намалювати піктограми. Ця можливість рідко використається в ПО,

але дуже широко в інтернеті. Формально, на таких кнопках піктограми не

дуже гарні через те, що вони повинні передавати користувачам ідею дії

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

Кнопки доступу до меню

Чекбокси і радіокнопки

Подібність чекбоксів і радіокнопок у тому, що вони є кнопками

відкладеної дії, тобто їхнє натискання не повинне ініціювати будь яку

негайну дію. З їхньою допомогою користувачі вводять параметри, які

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

Порушувати це правило небезпечно, оскільки це серйозно порушить

сформовану ментальну модель користувачів. У цьому полягає подібність

чекбоксів і радіокнопок.

Зовнішній вигляд.

Традиційно склалось так, що чекбокси виглядають як квадрати, а

радіокнопки – як коло. Порушувати це правило не можна. Бажано

вертикально розташовувати чекбокси й радіокнопки в групі, оскільки це

полегшує пошук конкретного елемента.

Текст написів.

Кожен напис повинен однозначно показувати ефект від вибору

відповідного елемента. Оскільки радіокнопки і чекбокси не викликають

негайної дії, формулювати напис до них найкраще у формі іменників, хоча

можливе використання дієслів (якщо змінюється не властивість даних, а

запускається яка-небудь дія). Напис до кнопок краще робити приблизно

однакової довжини.

Взаємодія

У радіокнопках і чекбоксах повинні натискатися не тільки візуальний

індикатор перемикання, тобто коло або квадратик, але ще й підпис. Просто

тому, що закон Фітса однозначно вимагає великих кнопок.

Поля введення

Розміри

Основна частина вимог до полів введення стосується розміру.

Зрозуміло, що розмір по вертикалі повинен бути похідним від розміру тексту,

що вводиться – якщо тексту багато, потрібно додати кілька рядків

(порушенням цього правила регулярно грішать форуми, які змушують

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

Окремою проблемою є обмеження тексту, який вводиться. З одного

боку, обмеження гарне для бази даних. З іншого боку, завжди (з)найдуться

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

виявиться занадто малим. Тому це питання потрібно вирішувати відповідно

до конкретної ситуації.

Якщо ж підсумувати інформацію із двох попередніх абзаців, можна

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

полів введення. Щоразу, коли ширина поля введення більш максимального

об’єму тексту, який вводить в нього, при цьому набір тексту обмежений, і

користувачі не можуть ввести текст, хоча місце під нього на екрані є. Отже,

не можна робити поле введення ширше максимального об’єму тексту, що

вводиться в ньому.

Напис

Питання «де треба розміщати напис до полів введення?» є одним із

самих популярних серед програмістів. Аргументів і підходів тут безліч. У

часто використовуваних екранах напис повинен бути зверху від поля.

У полях введення напису можна розміщати не поруч з елементом, а

всередині нього, що дозволяє заощаджувати простір екрана. Напис при цьому

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

вводити.

Меню

- Типи меню

Поділяють меню на два типи:

- Статичні меню, які постійно присутні на екрані. Характерним

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

- Динамічні меню, у яких користувач повинен викликати меню, щоб

вибрати який-небудь елемент. Прикладом є звичайне контекстне меню.

У деяких ситуаціях ці два типи меню можуть зливатися в один:

наприклад, меню, що складається із кнопок доступу до меню, можуть

працювати і як статичні (користувачі натискають на кнопки) і як динамічні

(користувачі викликають меню).

Інша класифікація поділяє меню на два типи:

Меню, що розгортаються у просторі (наприклад, звичайне меню, що

випадає). Щоразу, коли користувач обирає елемент нижнього рівня, верхні

елементи залишаються видимими.

Меню, що розгортаються у часі. При використанні таких меню

елементи верхнього рівня (або, розуміючи ширше, уже пройдені елементи)

по тим або іншим причинам зникають з екрана.

Кожен тип меню в обох класифікаціях має як переваги, так і недоліки.

Статичні меню з першої класифікації, забезпечують високу швидкість

роботи, краще навчають користувачів, але займають місце на екрані. З

динамічними меню ситуація зворотна. У другій класифікації перший тип

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

обходиться втратою екранного простору. Другий тип більш дбайливо

використовує простір, але гірше підтримує контекст.

Дуже корисно навчитися аналізувати вплив і взаємопроникнення

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

- Пристрої окремих елементів

Найважливішою властивістю гарного елемента меню є його назва.

Назва повинна бути ефективнішою з можливого. На відміну від кнопок у

діалогових вікнах, елементи головного меню практично ніколи не несуть на

собі контексту дій користувача, просто тому, що в будь-який момент часу

доступні всі елементи. Це означає, що до найменування елементів меню

потрібно підходити досить ретельно.

Обов'язково потрібно переконатися, що обрана назва зрозуміла

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

назву елемента і попросити його сказати, що цей елемент меню робить.

- Піктограми в меню

Піктограми в меню, якщо вони повторюють піктограми в панелі

інструментів, мають чудову здатність навчати користувачів можливостям

панелі. Крім цього вони значно прискорюють пошук відомого елемента і

точність його вибору, так само як і загальна розбірливість меню.

- Передбачуваність дії

Користувачів потрібно постачати почуттям контролю над системою.

Стосовно меню це означає, що по виду елемента користувачі повинні

здогадуватися, що відбудеться після вибору. Зробити це важко, оскільки на

екрані немає місця під такі підказки. Можна зробити тільки одне, але зробити

це потрібно обов'язково: показати користувачам, який елемент запускає дію

або міняє параметр, а який відкриває вікно з продовженням діалогу.

Це правило стосується і гіпертекстових посилань взагалі (вони теж

меню). Користувачі почувають себе комфортніше, коли мають можливість

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

помилкових переходів). Таким чином, нестандартні посилання (тобто

посилання на інший сайт, на поштову адресу, на файл, на вузол FTP,

сторінку, і т.д.) корисно позначати характерними для них ознаками,

наприклад, посилання на поштову адресу піктограмою листа.

Угруповання елементів

Другою складовою якості меню є угруповання його елементів. У

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

потрібного елемента, ніж сама назва елемента, просто тому, що навіть

ідеальна назва не спрацює, якщо елемент не можна знайти.

- Логіка згруповання елементів меню

Кожний знає, або, у всякому разі, здогадується, що елементи в меню

потрібно групувати максимально логічно.

- Глибина меню

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

названими «каскадним помилкам»: вибір неправильного елемента верхнього

рівня неминуче приводить до того, що всі наступні елементи також

обираються неправильно. При цьому широкі меню більше подобаються

користувачам. Тому більшість розроблювачів інтерфейсів намагаються

створювати широкі, а не глибокі меню.

При переміщенні по меню користувач діє по певному алгоритму:

1. Обираючи елемент першого рівня, він обирає елемент, «потреба»

якого здається йому максимальною.

2. Після вибору користувач бачить список елементів другого рівня,

оцінює ймовірність відповідності всіх елементів другого рівня його завданню

і одночасно обирає найбільш імовірний елемент. При цьому в розумі він

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

3. Якщо жоден з елементів не здається користувачеві досить імовірним,

користувач повертається на перший рівень.

4. Якщо якийсь елемент задовольняє користувача, він обирає його і

одержує список елементів третього рівня. Дії із другого й третього кроків

повторюються стосовно до нових елементів меню.

- Скорочені меню

Останнім часом з'явилася така тенденція: при виборі кнопки головного

меню показується не весь його вміст, а тільки 4-7 елементів, якими

користувалися в останнє.

У цього нововведення є й переваги і недоліки. Якщо говорити про

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

однозначно підвищується. Порівняйте, що швидше, вибрати потрібну

функцію з 5 елементів або з 15? Але на цьому, на жаль, переваги

закінчуються й починаються недоліки.

Якщо користувач не знає точно який елемент йому потрібний, пошук

потрібної йому функції значно ускладняються.

- Контекстне меню

Перевага контекстного меню полягає в тому, що воно повністю

вбудовуються в контекст дій користувачів: не потрібно перекладати погляд і

курсор в іншу область екрану, практично не потрібно переривати поточну

дію для вибору команди. При цьому вони не займають місця на екрані. З

іншого боку, через те, що вони не перебувають увесь час на екрані, вони

майже нездатні чому-небудь навчити користувача.

Необхідно пам'ятати наступне: не можна робити контекстні меню

єдиним способом виклику якої-небудь функції.

Оскільки основною причиною появи контекстних меню є прагнення

максимально підвищити швидкість роботи користувачів, на їхній розмір і

ступінь ієрархічності накладаються певні обмеження. Якщо меню буде

довгим, користувачам доведеться порівняно довго повертати курсор на

колишнє місце, так що привабливість нижніх елементів виявиться під

сумнівом. Тому краще скорочувати розмір контекстних меню до розумного

мінімуму (порядку семи елементів).

Курсори

Курсори є чудовими засобами забезпечення зворотного зв'язку. Коли

користувач підводить курсор до вікна, курсор змінюється, показуючи

користувачеві, що форму вікна можна збільшити. На жаль, у курсорів є і

зворотна сторона: користувачі здатні примиритися з негарною піктограмою,

оскільки вони можуть не дивитися на неї, примиритися ж з негарним

курсором вони не можуть, тому що вони змушені дивитися на нього увесь

час, поки він присутній на екрані.

3) Графічний дизайн. Сформулювати завдання для дизайнера просто–

треба зробити красиво і зручно. Намалювати гарний і зручний інтерфейс –

найбільш складний етап всієї роботи над проектом.

По-перше, для графічного оформлення кожного проекту вигадується

своя унікальна ідея. По-друге, на основі цієї ідеї розробляється макет сайту.

Макет показує, як будуть виглядати різні сторінки, де буде розташовуватися

інформація, де буде перебувати навігаційні й керуючі елементи і т.і. Нарешті,

на основі макета проробляється зовнішній вигляд кожної категорії сторінок.

Наприклад, розробляється дизайн сторінок з новинами, дизайн сторінок з

інформацією про продукт і т.і. Фактично дизайнер вивчає технічне завдання і

малює шаблони для всього, що там описано.

При створенні веб-вузла необхідно дотримуватись основних принципів

і особливостей веб-дизайну.

Загальний розмір всіх файлів повинен бути зведений до мінімуму.

Рекомендується, щоб розмір файлу, який містить фонове зображення, не

перевищував 10 Кбайт, а загальний розмір сторінки, включаючи зображення і

інші зовнішні об'єкти, становив 45 Кбайт. Це необхідно для того, щоб сайт

швидко вантажився навіть при повільному з’єднанні Інтернету.

Користувачі можуть мати різну роздільну здатність екрана, розмір

браузерів теж можуть різнитися, тому дизайн сайтів намагаються зробити

«еластичним». Еластичний дизайн розтягується, коли браузер широкий, і

звужується, коли він робиться вузьким.

Правила, які дозволяють підвищити ефективність інтерфейсу:

1. Використовувати знайомі всім елементи, або елементи, призначення

яких очевидне.

2. Елементи сторінки повинні діяти так, як цього очікує користувач.

3. Вузол повинен забезпечувати роботу більшості передбачуваних

користувачів

4. Користувач повинен одержувати підтвердження своїх дій

5. Сторінки варто створювати так, щоб для перегляду їхнього вмісту не

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

Правила використання інтерактивних елементів:

1. Інтерактивні елементи повинні бути доступні всім користувачам, у

тому числі з фізичними обмеженнями.

2. Всі функціональні елементи повинні надійно працювати незалежно

від налаштувань браузера користувача.

3. Інтерактивні засоби повинні мати зрозумілий інтерфейс.

4. Користувач повинен знати, скільки часу буде потрібно для

копіювання об'єкта.

5. Користувач повинен мати можливість контролювати відображення

даних (запускати чи ні анімацію, тимчасово або повністю припинити

відтворення).

6. Не слід нескінченно повторювати фрагменти даних.

7. Необхідно забезпечити зворотний зв'язок.

Процес розробки користувальницького інтерфейсу починається з

формування подання торгівельної марки. Визначається, до яких вікових

категорій належать передбачувані користувачі. Образ компанії необхідно

адаптувати до передбачуваної аудиторії. Проаналізувавши інформацію,

представлену на вузлах конкурентів, необхідно сформувати відмінності

розроблювального проекту від вузлів конкуруючих організацій. Подання

торговельної марки створить бажане відношення користувача до компанії і

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

пов'язана з логотипом компанії.

Далі на основі інформаційної архітектури розробляється блок-схема

вузла. Блок схема допомагає у виборі структури вузла, спрощує створення

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

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

представляє взаємозв'язок між документами в складі Web-вузла. Інакше

кажучи, ілюструє ієрархію даних.

Не слід збільшувати число рівнів вузла і гіпертекстових посилань

всередині документа. Вважається, що вузел повинен мати таку структуру,

щоб до кожної зі сторінок можна було дістатися, зробивши 3 клацання

мишею, а на четвертий одержати необхідну інформацію.

Побудувавши блок-схему, для кожної сторінки складається список

елементів і гіпертекстових посилань (тексти, зображення, звуки, відео, аудіо

данні, карти зображень, анімаційні gif-зображення, java-аплети).

Далі елементи списку необхідно розподілити по категоріях: об'єкти, які

повинні бути присутніми на кожній сторінці і об’єкти, які повинні бути

включені в обмежену групу документів або до складу окремих документів.

Це допомагає виділити достатній простір для їхнього розміщення і знижує

імовірність того, що деякі з компонентів будуть упущені.

Наступним етапом проектування користувальницького інтерфейсу є

розробка посібника зі стилю. Він допомагає забезпечити погоджене подання

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

які будуть публікуватись: типи шрифтів, кольори, логотипи й ін. У веб-

дизайні метафора – символ, який позначає деяке поняття або дію. Далі

розробляється навігаційна схема.

А саме, до проектування розміщення елементів на сторінці.

Інформація повинна бути представлена так, щоб користувач міг швидко

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

При створенні інтерфейсу значно допомагає розмітка або координатна

сітка. За її допомогою формується каркас для уніфікованого подання

інформації. І нарешті складаються оповідання для типових сторінок вузла.

Оповідання – це своєрідний ескіз сторінки, який містить заголовок, огляд

основних елементів (у тому числі посилань, зображень, функціональність

інтерактивних елементів) і список ресурсів.

Результатом роботи на даному етапі є створення прототипу. Він являє

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

отримані від замовника, так і фіктивний текст. Це перший крок на шляху до

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

замовник і оцінити, як буде виглядати готовий вузол, тому що зміни набагато

простіше зробити на етапі створення прототипу, чим на наступних стадіях

роботи над проектом. Бажано представити 3 варіанти прототипу, при

створенні яких використані різні підходи до розміщення даних, колірні

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

графічні програми. Готовий прототип вживається як шаблон при створенні

сторінок.

Забезпечення доступу. Приступаючи до роботи над проектом веб-

дизайнер повинен поставити собі за мету зробити вузол доступним кожному

користувачеві незалежно від його географічного положення, культурних

традицій, фізичних обмежень.

Інтернаціоналізація – це створення матеріалів, вміст і оформлення яких

робить їх придатними для сприйняття користувачами різних країн і

культурних традицій [8].

Локалізація – це адаптація документа до відповідної мови і культурних

традицій [8].

Графічні зображення і піктограми, які часто використовуються в одній

країні можуть бути неприйнятні в інших країнах. Так само і кольори можуть

викликати різні асоціації серед різних країн і культур. Необхідно

враховувати, що різні країни відрізняються рівнем розвитку технологій. Слід

врахувати, що при перекладі тексту на інші мови обсяг його може

збільшитися, внаслідок чого він може не поміститися у відведений для нього

простір (рамку, таблицю). Для того, щоб адекватно перекласти текст, варто

викладати матеріал простою мовою. Бажано відмовитися від використання

абревіатур, скорочень або приводити відповідні пояснення. Неоднозначно

сприймаються жаргонні слова і жарти, які можуть стати джерелом

непорозумінь серед жителів різних країн.

Необхідно приймати до уваги формати даних, які використовуються в

різних країнах. Наприклад, числа 1.000, 1,000, дата 3/2, 12-ти чи 24-годинна

система. Необхідно вибирати одиниці виміру, які властиві даній країні.

Необхідно вказувати часовий пояс. Наприклад, конференція почнеться в 5:00

p.m. (Universal time+5). Також врахувати формат подання адрес і номерів

телефонів, терміни, специфічні для конкретної країни.

4. Верстка

Інтерфейс сайту, який розроблений дизайнером, – це ще тільки макет

остаточного інтерфейсу сайту. Фактично, він складається просто з набору

малюнків. Для того, щоб його можна було використати в програмному

продукті, потрібно провести верстку – розрізати макет інтерфейсу на

складові його графічні компоненти і описати правила розташування всіх цих

елементів на сторінці. Для опису використовується спеціалізована мова html-

мова розмітки гіпертекстових документів. Готові зверстані html шаблони далі

використовуються в наступних етапах реалізації проекту.

На цій стадії графічна картинка нарізається на окремі елементи і з

використанням технологій HTML і CSS трансформується в код, який можна

переглядати за допомогою браузера. Виконується кодером, програмістом.

5. Наповнення.

Основне завдання веб-сайту – це надання інформації відвідувачам.

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

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

легким, так і досить трудомістким завданням. Її можуть вирішити

розроблювачі, якщо замовник надасть всі дані, або ж цим може займатися

сам замовник, у тому випадку, якщо сайт обладнаний системою відновлення

вмісту. На практиці звичайно застосовується комбінований підхід – частину

інформації публікують розроблювачі, а частину – замовник.

Перш ніж розмістити інформацію на сайті, її потрібно підготувати:

написати тексти, зібрати і обробити інформацію про продукти, підібрати

фотографії і так далі. Так як процес цей досить довгий, його варто починати

відразу після затвердження технічного завдання.

Розроблювачі можуть допомогти замовнику і на цьому етапі, надавши

послуги копірайтера, перекладача і дизайнера. Копірайтер спеціалізується на

написанні текстових матеріалів. Він обробляє дану замовником інформацію і

друкує текст, який точно відповідає контент-моделі сайту, який

розробляється. Дизайнер готує надані фотографії, щоб вони відповідали

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

завантаження. Дані, які будуть представлені на сайті, повинні бути

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

Для забезпечення цих властивостей необхідно враховувати

перераховані рекомендації.

Підготовка тексту. Текст є найважливішим компонентом сторінки.

Дизайнер відповідає за те, щоб текст був написаний коротко і ясно, не містив

граматичних помилок, був оригінальним (якщо цитується текст іншого

автора, то необхідно вказати джерело), точним, своєчасним і відповідав

призначенню вузла. При створенні вузла варто брати до уваги, що при

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

трохи більше, ніж при читанні тих же символів, які надруковані на папері. У

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

Правила

1. Чорні символи повинні відображатися на білому фоні.

2. Текст повинен бути вирівняний по лівому краю. Для виділення

окремого фрагмента кілька рядків можна вирівняти по центру. Не повиннео

застосовуватися вирівнювання по ширині.

3. При складанні текстів необхідно уникати більших безперервних

текстових блоків.

4. Довжина рядка повинна становити не більше 80 символів (10-12

слів).

5. Мінімальний розмір шрифту 10-12 пунктів.

6. Інформація повинна бути представлена коротко. У тексті повинні

викладатися конкретні факти. Текст повинен складатися із

загальноприйнятих слів і фраз. Ключові слова повинні бути виділені.

7. Заголовки повинні відображати вміст розділів і підрозділів.

8. Абзаци повинні бути невеликими, у кожному має виражатися одна

думка. Схема побудови тексту наступна: у першій фразі викладається

основна думка, а в наступних реченнях вона конкретизується, роз'яснюється.

9. По можливості в тексті повинні використовуватися маркіровані

списки.

10. Треба намагатися максимально скоротити необхідність у

прокручуванні.

Підготовка зображень. Щоб підготувати зображення до публікації в веб

необхідно виконати наступні дії:

1. Введення

Звичайно зображення для вузлів одержують такими способами:

- сканування фотознімків або зображень, які представлені на папері;

- фотографування за допомогою цифрової камери;

- використання архівів або галереї зображень;

- генерація векторних або растрових зображень за допомогою

спеціальних програм.

2. Оптимізація:

- вирівнювання картинки;

- видалення шумів і подряпин;

- установка тонального діапазону;

- формування підсвічування і тіні;

- фокусування.

3. Редагування.

4. Зміна розмірів.

5. Збереження.

Створення анімаційних послідовностей. Існують два способи доставки

мультимедійних файлів користувачам: копіювання файлів і передача їх у

потоковому режимі. Недолік застосування потокової анімації – необхідність

установки додаткового модуля.

Анімаційні послідовності створюються за допомогою:

Dynamic html. Рух одиночного зображення управляється за допомогою

сценарію. Переваги: забезпечуються інтерактивні засоби, не потрібна

установка додаткових модулів, анімація створюється як одиночне

зображення, що скорочує обсяг файлу і час копіювання його по мережі. Але

при цьому існує величезний недолік – у налаштуваннях браузера користувача

може бути заборонене виконання сценаріїв.

Анімаційний GIF. Варто брати до уваги, що дві або більше

послідовності перевантажують сторінку візуальними даними. При підготовці

необхідно звернути увагу на наступні моменти: чи коректно обрані тимчасові

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

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

не відволікає увагу користувачів.

SWF. При наявності додаткового модуля відображається в будь-якому

браузері. SWF-анімація базується на векторній графіці, отже, зображення

більш чіткі, масштабуються без втрати якості, можуть включати аудіоданні і

інтерактивні елементи. Розмір файлів невеликий.

Цифрові аудіо- і відеодані. Музичний супровід створює необхідне

емоційне забарвлення. Ухвалюючи рішення щодо включення, необхідно

визначити, чи варто жертвувати якістю заради швидкодії, чи є в користувача

необхідне ПО. Процес підготовки до публікації складається з наступних

етапів: запис, редагування і включення до складу сторінки.

6. Вебмастерінг

На цій стадії здійснюються дії, які сприяють поширенню та ефективної

доставки сайту по мережі. Включає розміщення на хостингу і пошукову

оптимізацію. Виконується адміністратором, вебмайстром.

Методи оптимізації

Зменшити обсяг файлу, який містить зображення. Цього можна

домогтися шляхом зменшення розмірів, зниження кількості кольорів,

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

бути представлені у форматі gif, а деякі в jpeg. Рекомендується, щоб

сумарний обсяг зображень на сторінці був менше 30 Кб. Можна помістити на

сторінку зменшену копію зображення, оформлену як гіпертекстове

посилання.

7. Розміщення

Після завершення розробки сайту, треба зробити його доступним для

користувачів. Із цією метою сайт розміщається на сервері – потужному

комп'ютері, який з'єднаний з Internet швидкою й надійною лінією. Таке

розміщення називається хостингом (від англійського hosting) і звичайно

оплачується щомісячно [8].

Тут можливі два варіанти: встановити власний сервер, або розмістити

вузол на сервері будь якої іншої організації.

Встановлюючи власний сервер, компанія одержує повний контроль над

ним. Однак це вимагає значних витрат:

придбання ПО веб-сервера;

організація цілодобового Internet-доступу;

маршрутизатор;

брандмауер;

засоби створення резервних копій;

план забезпечення постійного функціонування сервера;

адміністратори.

Засоби, які необхідні для розміщення вузла на вилученому сервері,

визначаються наступними факторами:

вартість дискового простору;

обсяг переданих даних;

пропускна здатність ліній зв'язку;

платформа;

рівень контролю веб-вузла з вилученої машини.

Крім розміщення самого сайту на якій-небудь хостинг, потрібно дати

йому гарну адресу. Більше довідатися про реєстрації доменних імен можна за

адресою http://www.tld.by/instruction_new.html. Це чисто адміністративна

процедура й особливий інтерес не представляє.

8. Тестування

Як правило, тестування проводиться і замовником, і розроблювачем. У

результаті виявляються і виправляються дрібні недоліки й неточності,

виробляється коригування розміщеної інформації.

Готовий веб-вузол необхідно перевірити:

на погодженість;

на наявність помилок у тексті;

як виглядають документи в різних браузерах на різних платформах;

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

числі мультимедійна інформація;

чи правильно працюють інтерактивні елементи (форми, меню, кнопки,

вікна попередження, перемикачі опцій). Чи можна здійснювати навігацію,

якщо відображення графічних даних заборонено.

на наявність на Web-сторінках зруйнованих посилань;

на наявність помилок в html-коді. Можливі помилки:

1. Пропущений закриваючий дескриптор.

2.Неправильне вирівнювання.

3.Дескриптор відсутній або не відповідає його вмісту.

4. Відсутні атрибути alt, width, height.

Існують програми автоматичної перевірки коду. Інформацію про них

можна одержати за адресами http://validator.w3.org, http://netmechnic.com.

Розмістивши документи на вилученому сервері, тестування необхідно

повторити.

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

створенні сайту. Організується він у такий спосіб. Запрошуються 3 людини,

які працюють над сайтом, після цього, їм пропонується відповісти на ряд

питань.

9. Просування

З огляду на те, що сайтів в Internet надзвичайно багато, дуже важливо

зробити все можливе, щоб про новий, щойно розроблений сайт довідались як

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

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

3.1.10 Підтримка

За готовим програмним продуктом треба стежити: міняти інформацію,

усувати виникаючі в процесі роботи помилки, втілювати в життя нові ідеї.

Все це входить у поняття «підтримка». Вона здійснюється звичайно за

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

не містить у собі істотних змін сайту. У свою чергу, розроблювачі в рамках

підтримки сайту можуть:

• оновлювати матеріали на сайті. Розрізняють 3 рівні оновлення

інформації: заміна ключових даних, повторна структуризація тексту, повна

заміна вмісту сторінки;

• міняти структуру сайту: додавати нові розділи, змінювати або

видаляти старі;

• допомагати в аналізі функціонування сайту, а також вузлів

конкурентів, надавати рекомендації щодо його зміни;

• додавати нові функції, розширювати можливості вже наявних

функцій і сервісів сайту;

• робити графічні роботи: обробляти нові фотоматеріали, розробляти

банери, анонси і т.і.

• писати тексти для нових розділів сайту;

• коригувати мета-теги залежно від зміни контента.

Необхідно пам'ятати, що грамотна підтримка – це успішне

функціонування сайту.