- •О. Н. Романюк, д. І. Катєльніков, о. П. Косовець
- •О. Н. Романюк, д. І. Катєльніков, о. П. Косовець
- •1 Базові визначення. Основні етапи розробки веб-ресурсів
- •1.1 Основні принципи побудови та функціонування мережі Internet
- •Контрольні питання
- •1.2 Основні етапи розробки Web-сайта
- •1.2.1 Концептуальне проектування
- •1.2.2 Логічне проектування
- •4. Виробництво і контроль якості 5. Запуск і супровід
- •1.2.3 Фізичне проектування
- •Контрольні питання
- •2 Основи композиції
- •Контрольні питання
- •3 Основи шрифтового дизайну
- •3.1 Основні елементи побудови літер
- •3.2 Накреслення
- •3.3 Класифікації гарнітур і шрифтів
- •3.4 Метричні параметри тексту
- •3.5. Розмір пробілу, бокові поля і ємність шрифту
- •3.6. Виділення параграфів
- •3.7. Розміщення символів тексту
- •3.8 Комп’ютерні шрифти
- •3.9 Кодування шрифту
- •3.10 Особливості використання шрифтів у Web-дизайні
- •3.11 Рекомендована кількість шрифтів
- •3.12 Вибір кольору тексту
- •Контрольні питання
- •4 Розробка контента сайта
- •4.1 Особливості сприйняття текстової інформації на Веб-сторінці
- •4.2 Складання текстів для Internet
- •4.3 Поради щодо написання статей
- •4.4 Поради щодо написання заголовків
- •4.5 Джерела контенту та систематизація
- •4.6 Організація інформації
- •4.7 Тестування контенту
- •Контрольні питання
- •5 Теорія кольору
- •5.1 Сприйняття кольору через зоровий канал людини
- •5.2 Системи змішування основних кольорів
- •5.3 Основні характеристики та кутові поля зору людського ока
- •5.4 Особливості сприйняття кольору
- •5.5 Сприйняття кольору
- •5.6 Емоційний вплив кольору
- •5.7 Психологічне сприйняття окремих кольорів і їх поєднань
- •5.8 Вибір палітри для різних демографічних груп, національні особливості, сучасні тенденції
- •5.9 Вибір кольорів з використанням колориметричних кіл
- •Контрольні питання
- •6 Основи сканування
- •6.2 Рекомендації щодо сканування зображень
- •Контрольні питання
- •7 Розробка системи навігації
- •Контрольні питання
- •8 Розробка логотипу
- •8.1 Термінологія
- •8.2 Найбільш відомі логотипи
- •8.3 Класифікація логотипів
- •8.4 Характеристики логотипу
- •8.5 Особливості розробки логотипів
- •8.6 Вибір геометричних форм для логотипів
- •8.7 Вибір кольорової гамми для логотипу
- •8.8 Стиль у дизайні логотипів
- •8.9 Символізм зображень тварин
- •Контрольні питання
- •9 Формати графічних файлів та рекомендації до їх вибору
- •9.1 Аналіз форматів графічних файлів
- •9.2 Рекомендації для вибору графічних форматів
- •Контрольні запитання
- •Література
- •Науково-методичний відділ внту
- •21021, М. Вінниця, Хмельницьке шосе, 95, внту
- •Вінницького національного технічного університету
- •21021, М. Вінниця, Хмельницьке шосе, 95, внту
1.2.3 Фізичне проектування
На цьому етапі відбувається пошук рішень та застосування різних технологій, пов’язаних із технічною реалізацією сайта. На цьому етапі розробник повинен приділити увагу:
технологіям, які будуть застосовуватися на сайті;
програмному забезпеченню, що буде використовуватись;
можливим проблемам і способам їх усунення;
як буде обновлятися інформація.
Етап фізичного проектування передбачає візуальне оформлення та тестування (рисунок 1.3), виробництво і контроль якості (рисунок 1.4) та запуск і супровід (рисунок 1.4). Розглянемо ці складові детально.
Візуальне оформлення обличчя сайта, його сприйняття, графічний інтерфейс – це перше, з чим стикається користувач. Ще до оцінки зручності сайта користувачі бачать, як він виглядає. Розробка візуального оформлення будь-якого сайта - це творчий процес. На цій стадії створюються всі елементи дизайну сайта відповідно до стилю подачі інформації і загальної концепції, сформульованої у креативному брифі проекту. Після цього дизайн сайта затверджується, доводиться до досконалості та тестується.
Візуальне оформлення та тестування складається, в свою чергу, з трьох підетапів: створення, вивірення та переходу до виробництва.
Запуск
Рисунок
1.4
- Завершальні
стадії
етапу
фізичного
проектування
4. Виробництво і контроль якості 5. Запуск і супровід
Візуальний дизайн – це не тільки створення привабливого інтерфейсу, але й урахування вимог та інтересів користувачів. Яким би гарним не був дизайн сайта, якщо при цьому сайт використовувати незручно, то його оформлення вважається невдалим. Створення дизайну здійснюється у три кроки.
На кроці аналізу цілей сайта відбувається аналіз цілей сайта та технічних вимог. Розробнику слід ще раз прочитати креативний бриф та ознайомитись з майбутньою аудиторією сайта.
На кроці розробки концепцій розробник повинен здійснити концептуальний мозковий штурм та придумати візуальні рішення, які функціонують та відповідають усім цілям сайта. На цьому кроці дизайнери експериментують із кольорами та розташуванням об’єктів, піктограмами та ескізами. Перед пропонуванням замовнику на розгляд усі концепції повинні бути апробовані стосовно можливості їх реалізації.
На кроці подання дизайну та отримання ухвали розробник повинен зафіксувати досягнуті результати дизайну у згоді з замовником. Оскільки саме на цьому етапі замовник нарешті отримує змогу побачити зовнішній вигляд сайта і в зв’язку з цим у нього виникають нові ідеї, то важливо чітко відмежувати незначні покращення, які не виходять за рамки креативного брифу від тих, які складають окремий проект і потребують окремих строків та оплати. Розробнику доцільно отримати ухвалу розробленого дизайну у письмовому вигляді.
При роботі над візуальним дизайном розробник повинен знайти час на вивірення змісту, переходів сторінок, навігації та запропонованої функціональності, що були розроблені в ході логічного проектування. Перехід до формування HTML-коду без відповідного вивірення є ризикованим. Вивірення здійснюється у два кроки.
На кроці створення протосайта виробнича група починає працювати з HTML, у якому є тільки гіперпосилання. Такий “протосайт” дає можливість дослідити зміст, навігацію та розташування сторінок. Розробник повинен перевірити, чи дійсно користувачі мають змогу рухатись по сайта так, як вони це планували. В деяких випадках протосайт далі еволюціонує в сайт-результат.
На кроці перевірки функціональності відбувається додаткове тестування роботи сайта на деяких браузерах, та платформах усіх спеціальних ефектів, які заплановано використовувати: висхідні вікна, DHTML, низхідні меню, фрейми та інші. Це дозволить зменшити ризик виникнення серйозних проблем під час виробництва.
Підетап переходу до виробництва передбачає перенесення ухваленого замовником зовнішнього дизайну на множину Web-сторінок та підготовку кожної сторінки до оптимізації та виробництва HTML. На цьому підетапі здійснюються два кроки.
На кроці створення графічних шаблонів створюються графічні шаблони, які показують усю функціональність, у тому числі з урахуванням змін стану елементів сторінки в зв’язку з рухом покажчика маніпулятора миші. Таким чином, графічні шаблони містять усю необхідну інформацію для перенесення візуального дизайну в HTML.
На наступному кроці створюється керівництво зі стилю оформлення, яке встановлює стандарти для шрифтів, кольорів, заголовків та багатьох інших елементів оформлення. Це допоможе розробникам зберігати уніфікованість дизайну.
У ході виробництва і контроля якості (рисунок 1.4) всі наробки з окремих напрямків збираються докупи. Виробництво об’єднує контент, елементи дизайну та створення HTML та/або Flash у повноцінний сайт. Саме в цей момент розглядається необхідність внутрішнього програмування та здійснюється перевірка якості сайта. Сюди належать підетапи підготовки, компонування та тестування.
На підетапі підготовки слід перевірити, чи готові всі необхідні графічні шаблони та матеріали контенту сайта та підготуватись до стадії фактичного компонування сайта. Здійснюються наступні кроки.
На кроці визначення основоположних принципів приймаються рішення стосовно браузера, платформи, технології та файлової структури.
На кроці оцінювання стану проекту слід оцінити скільки годин заплановано в бюджеті та скільки вже витрачено, враховуючи те, що робота над різними аспектами відбувається нерівномірно. Саме в цей момент перед початком фактичного формування сайта ще є можливість переглянути ресурси і, можливо, запитати збільшення бюджету, якщо були зроблені помилки в попередніх оцінках, виникли додаткові вимоги або з’явились непередбачені технічні проблеми.
На кроці формування файлової структури слід упорядкувати структуру каталогів, узгодити найменування файлів у тому числі з перспективою масштабування.
На підетапі компонування починається виробництво HTML. Бажано, щоб кожна сторінка була закодована лише один раз. На цьому підетапі здійснюються такі кроки.
На кроці розбиття на частини та оптимізації графіки дизайнери розбивають графічні шаблони на окремі GIF та JPG файли, які перетворяться у звичайну графіку, анімацію та графіку, яка динамічно утворюється – все те, що заповнює HTML-шаблони та сторінки. На цьому ж кроці здійснюється максимально можлива оптимізація графіки.
На кроці створення HTML-шаблонів та сторінок утворюється майстер-сторінка або набір сторінок, які будуть використовуватись для створення решти сайта. На цьому ж кроці кодуються “полегшені” сценарії для глобальних елементів сайта.
На кроці вбудовування “полегшених” сценаріїв слід реалізувати та перевірити в HTML-шаблонах такі ефекти, як динамічна зміна графіки, форми, низхідні меню, висхідні вікна та фрейми.
Далі йде крок заповнення окремих сторінок. Саме на цьому етапі можливе гальмування через затримки з конвентом. Це треба передбачати заздалегідь, адже це може призвести до ефекту “доміно” і викликати непередбачені часові та матеріальні витрати. Не варто недооцінювати час, необхідний для поставки контенту. Доцільно встановити реальні строки та дотримуватись їх.
Якщо проект потребує внутрішніх програмних розробок, то далі йде крок інтеграції із внутрішніми розробками.
Підетап тестування передбачає, що вже сформовано працюючий сайт і прийшов час перевірити його в цілому, здійснити вичерпний контроль якості, щоб виявити помилки та досягти запланованих на першому етапі цілей. На цьому підетапі здійснюються такі кроки.
На кроці створення плану контролю якості слід утворити план, який потрібен при будь якому тестуванні – неформальному, напівформальному або повному. План контролю якості визначає методологію тестування сайта з врахуванням різних броузерів, платформ та технічних вимог. В ньому перераховуються ресурси, графіки задач, обладнання та очікувані результати., а також схема відслідковування та виправлення помилок.
На кроці перевірки якості спочатку здійснюється внутрішнє (альфа) тестування, а потім бета-тестування із залученням зовнішніх тестерів, Бажано щоб бета-тестування відбувалось на поточному сервері до запуску (якщо є допуск) або після запуску. Рівень тестування залежить від бюджету, часу, коштів та кваліфікації спеціаліста із тестування. Їх задача – – знайти якомога більше помилок, які повинні бути виправлені групою розробників.
На кроці розташування пріоритетів і видалення помилок слід проаналізувати результати попереднього кроку та ефективним чином організувати процес виправлення помилок за рахунок призначення відповідних пріоритетів.
Коли здійснюється перехід до кроку заключного тестування, сайт готовий до життя і працює на демонстраційній площадці або схованому URL. Але перед переміщенням сайта на постійний сервер слід провести заключне тестування дизайну, контенту, якості роботи та функціональності. Також слід упевнитись, що замовник поставив свій підпис у документах про прийняття сайта.
Запуск та супровід (рисунок 1.4) охоплює аспекти, які стосуються остаточного виправлення неточностей та гарного упакування для проекту перед переходом сайта до наступної фази – постійного супроводу.
Оскільки в переважній більшості випадків розробку сайта здійснює одна група фахівців, а його експлуатацію та постійну підтримку – інша, то на підетапі передачі сайта перша група передає всі матеріали та файли іншій. На цьому підетапі здійснюються такі кроки:
На кроці завершення керівництва зі стилю оформлення після запуску сайта до керівництва зі стилю оформлення, яке було створено на попередніх етапах, додаються необхідні додаткові рекомендації щодо виробництва: коди HTML-тегів, атрибути та визначення графічних елементів – тобто вся необхідна інформація для передачі від дизайнерів до групи супроводу.
На кроці створення пакета передачі всі необхідні матеріали з розробки та експлуатаційної підтримки сайта потрібно зібрати в єдиний пакет документів для передачі замовнику та групі супроводу.
На кроці розбору та архівування документації всі документи в електронній та паперовій формі, які мають відношення до проекту, слід зареєструвати та зберегти.
Заключна зустріч є наступним кроком, у ході якого можна зібрати разом представників обох сторін для конструктивного обговорення проекту з метою виявлення позитивних моментів роботи над проектом та врахування недоліків.
На кроці планування інструктажів щодо супроводження сайта здійснюється організація додаткових тренінгів для групи супроводу сайта.
На підетапі запуску сайт фактично отримує дозвіл та анонсується в мережі. Робиться це у наступні три кроки.
На кроці підготовки плану анонсування маркетингова група забезпечує необхідну рекламну кампанію. Зазвичай роботи на цьому кроці здійснюються ще до завершення розробки.
Далі йде крок реєстрації сайта у пошукових системах. На цьому кроці доцільно використовувати програмний пакет META Data Creation Tool, який дозволяє ефективно створювати теги ключових слів та заголовків.
Крок запуску завершує весь процес створення сайта. Старт сайта рекомендують здійснювати в час зменшення мережевої активності для того, щоб була можливість виправляти негаразди, якщо такі з’являться.
Останній підетап – супровід, передбачає необхідні кроки щодо забезпечення безперервного функціонування сайта, оновлення його контенту та інших необхідних дій.
