Основи web проектування (О.Герасимчук)

Завдання для практичного виконання

1. Вивчіть особливості формування технічного завдання та що таке бриф. 

2. Розробіть ТЗ на Ваш сайт/портал/інформаційну систему (обсягом 2-3 сторінки) та здайте файл на перевірку.

3. Перевірте своє (колеги) ТЗ згідно чеклиста. 

Опис створення ТЗ (використати при розробці власного ТЗ)

Приклад ТЗ

Теорія 

Питання, які необхідно опрацювати студентові самостійно:

- Що таке технічне завдання.

- Особливості створення технічного завдання.

Технічне завдання (ТЗ) — це письмовий опис сайту, який розроблятиметься. Розробка технічного завдання включає в себе: визначення основних характеристик сайту, його ідеї, напрямку, дизайну, технічних параметрів. ТЗ розробляється і узгоджується із замовником, що дозволяє чітко сформувати всі критерії створення сайту до початку роботи над його візуальною та технічною частиною. Якісно розроблене ТЗ, дозволяє значно зменшити час розробки сайта.

Основними пунктами розробки технічного завдання є:

• Визначення характеру сайту (рекламний, корпоративний, сайт електронної комерції...)
• Детальне вивчення стилю, змісту:
  • Вибір назви сайту, його основних рекламних слоганів (за потребою)
  • Розробка загального плану головної сторінки
  • Розробка схеми меню та карти сайту
  • Розробка текстової частини сайту (контенту)
  • Розробка загальних планів ключових сторінок сайту
• Визначення параметрів технологічної бази:
  • Вибір доменного імені сайту
  • Вибір CMS cайту (системи управління контентом)
  • Вибір хостингу

Для чого потрібне ТЗ

ТЗ - технічне завдання на розробку сайту. Це документ, який регламентує складові сайту, який буде створено: технічні, функціональні а також контекстні. В залежності від детальності цього документу залежатиме отримання замовником саме того, що він хотів, а виконавцем реалізація саме того, що від нього очікували.

Звісно, можна обійтись і без ТЗ для розробки сайту, проте недоцільно так працювати. Мало хто із галузі веб-розробки працює без технічного завдання.

Чим ТЗ допомагає замовнику

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

Чим ТЗ допомагає виконавцю

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

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

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

Технічне завдання на розробку сайту - хто та як його створює 

Найкращим варіантом є створення ТЗ замовника разом із виконавцем, таким чином обидва зможуть поділитися своїм баченням проекту та тим, як він буде реалізований. Проте, зазвичай технічне завдання створює виконавець, оскільки замовник не розбирається у всіх тонкощах створення сайту, пояснює всі тонкощі та деталі й подає вже готовий документ на узгодження замовнику.

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

Приклад попереднього брифу на розробку сайту:

Приклад структури сайту:

1. Головна сторінка
2. Товари (каталог)
   2.1. Розділи
   2.1.1. Товар
   2.2. Корзина
   2.3. Замовлення та його оформлення
3. Новини/статті
   3.1. Новина/стаття
4. Акції/пропозиції
   4.1. Акція/пропозиція
5. Контакти
6. Про нас
7. Доставка та оплата

Додатково у брифі замовник має надати інформацію про свою компанію: галузь, ЦА, продажі та їх специфіка, канали з яких залучаються клієнти. Таким чином виконавець матиме можливість зрозуміти які потреби має бізнес та як створити сайт таким аби він відрізнявся від конкурентів та задовольнив побажання клієнта.

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

Технічне завдання зазвичай має декілька розділів, які можуть мати різні назви, але мати однаковий сенс.

Питання щодо організації

• Дедлайн здачі сайту. Не можна назвати оптимального терміну до визначення особливостей проекту, проте приблизні терміни - можна. Розробка сайту на шаблоні може тривати 2-4 тижні. Якщо ж це лендінг на шаблоні, то термін ще скорочується. Проте, якщо сайт робиться не з шаблону, а “з чистого листка” без наявного дизайну, із складними функціями, то така робота може зайняти щонайменше місяць.
• Об’єм роботи в деталях. Складність задач визначає об’єм роботи. Лендінг із однієї сторінки та інтернет-магазин (із залученням підтримки сторонніх сервісів) матимуть зовсім різні задачі та відповідно різний об’єм робіт для виконавця.
• Етапи роботи та детальних опис кожного із них. Сюди входять і програмні рушії і дизайн і основні розділи сайту, вміст, контент, доменне ім’я та особливості усього перерахованого.

Які є вимоги до сайту

1. Використання сайта та сценарій
2. Вимоги до структури
   a.до навігації
   b. до дизайну
   c. до юзабіліті сайту
   d. до функціональних можливостей
   e. до технологій

Це досить узагальнений список, проте достатній для розуміння що потрібно мати у ТЗ для розробки сайта.

Приклад технічного завдання на розробку сайту на відображення головної сторінки:

1. Вміст Головної сторінки
2. Шапка
   2.1. Логотип (при натисканні веде на головну сторінку)
   2.2. Номери телефонів
   2.3. Пошук
   2.4. Корзина (вказано кількість обраних позицій та загальна сума)
   2.5. Зворотній зв’язок (кнопка)
3. Меню навігації
   3.1. Каталог (включно із функцією випадаючого меню із блоками категорій)
   3.2. Акції
   3.3. Оплата та доставка
   3.4. Блог
   3.5. Контакти

Детальніше про головні пункти у ТЗ на розробку сайту

Програмний рушій

В технічному завданні має бути вказано який програмний рушій сайту є в пріоритеті. Варіанти:

• Wix або Tilda - SaaS-платформи (спосіб оренди програмного забезпечення)
• framework (платформа для створення, шаблон) або самописний програмний рушій
• Wordpress, Drupal або OpenCart - CMS (система керування контентом, набір скриптів для створення, редагування і управління ним на сайті)

Для вибору відповідного програмного рушія на допомогу прийдуть такі питання:

1. Адміністрування сайту. Хто буде займатись? Професійний веб-майстер чи замовник бере це на себе?
2. Публікація контенту. Хто буде займатись?
3. Обслуговування сайту. Хто обслуговуватиме? Розробник чи замовник бере це на себе?

Якщо компанія не має власного розробника, то краще обирати коробочні CMS. У свою чергу SaaS-сервіси своєрідні та обмеженіші у типах сайтів до яких можуть примінятись.

Найпопулярніші безкоштовні CMS

Дизайн

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

• Шрифти: головні та другорядні
• Тематика зображень
• Кольори: головні та другорядні
• Поєднання кольорів (які можна, а які суворо недопустимі)
• Візуальний простір та його компонування

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

Розділи на сайті

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

Приклади типів структури: лінійна та блокова

Навігація зазвичай стандартна, проте якщо є якісь особливі побажання, обов’язково потрібно вказати їх у ТЗ.

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

Вміст сторінок

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

Опис елементів вмісту сторінок

Елементи сторінок - кнопки, шапка сайта, футер (нижній колонтитул) та сайдбар (бічна панель навігації або додаткової інформації). У ТЗ для елементів сторінок мають бути прописані всі деталі (ідентичність шапки, футера на кожній сторінці, шрифти тощо).

Генерація сторінок

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

Фільтри

Ця частина найбільш корисна для комерційних сторінок. Сторінки із фільтрами зазвичай дуже загружені, оскільки із безконтрольно перезагружають, скидають вже вибрані позиції тощо. Консультація та поради розробників допоможе у вирішенні питань сторінок-фільтрів та їх генерації.

Інтернет-магазин

Якщо в ТЗ є інтернет-магазин, то варто звернути увагу на прописання оптимізації фільтрів. Варіант вимог для фільтрів:

• Перший рівень сторінок-фільтрів або ж там, де перетинаються два та більше параметри, потрібно задіяти статистичні посилання (URL повинен бути семантичним). Також такі сторінки повинні мати можливість налаштування тегів таких як Title, заголовки H1-H6, Description та Keywords власноруч.
• Формуючи URL фільтри потрібно продумати порядок, оскільки можна в результаті зіткнутися із помилками та непрацюючими параметрами.
• Також будуть корисними налаштування індексації сторінок-фільтрів та коректна внутрішня перелінковка.

Контент

Якщо не прописати наявність контенту під час формування технічного завдання, можна отримати пустий сайт. Варто прописати цей момент у ТЗ на розробку сайта. Контент може надати як замовник так і виконавець, прописавши вимоги до текстів, фото тощо у технічному завданні. (Цікаво на тему контенту: 10 основних правил створення високоякісного контенту).

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

Вимоги щодо технічних особливостей до сайту варто прописати в окремому списку. Для прикладу:

1. Мобільна версія та адаптивний шаблон
2. Верстка під всі браузери
3. Відповідність параметрам щодо:
   a. швидкості загрузки основного контенту (до 2,5 сек.)
   b. переміщення елементів протягом завантаження сторінки (до 0,1 бала)
   c. очікування першої взаємодії із контентом (до 100 мілісек.)
4. Пошукова оптимізація головних сторінок
5. Коректний код відповіді сервера на усіх сторінках
6. Доступ через FTP
7. Семантичний URL
8. Карта сайта

Ім’я та зона домену

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

Для обрання вірного імені варто надати чек-ліст із вимогами для доменного імені:

1. Продаючі слова в імені такі як kupi, sale тощо
2. Назва компанії в імені
3. Ключові слова (бажано мати список слів які можна використати в доменному імені)
4. Тематика або категорія доменного імені: реклама, продукти, спорт тощо.

Хостинг-провайдер та вимоги до нього

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

• тип - віртуальний, VPS або ж сервер
• швидке встановлення CMS
• доступ по SSH, захист від DDoS-атак, backup
• статична нагрузка на акаунт (за планом)
• трафік (за планом: к-сть користувачів/добу)
• файловий менеджер
• безкоштовне перенесення сайту