В статье, где рассматривался вопрос о разработке сайтов по ТЗ, напомнили, что существуют 3 способа реализации сайтов. Там, как показывает практика, выбирают «автоматический» способ реализации сайтов. В этом случае верстальщики возьмутся за «ручной» или за «автоматизированный» способ создания сайтов, то есть от руки или при помощи удобных программ для предназначенных задач. Ведь в «автоматическом» нужно копаться в коде, исправлять то, что было испорчено. Лишняя трата времени.

Если для Вас эта статья нашего сайта попалась впервые в руки, то необходимо учесть, что фрилансеры без Технического задания не приступят к основной работе.  Поэтому не забудьте ознакомиться со статьёй о важности ТЗ.

Что такое вёрстка?

Вёрстка — процесс реализации структуры html-кода, благодаря которому размещаются необходимые элементы веб-страниц (медиафайлы, текст и т.д.) согласно макету.

 

verstka_sajta

Таким макетом можно продемонстрировать исполнителю, что вам именно такой таковы нужны итоги. Что с такими параметрами экранов монитора нужна адаптация к устройствам с такими показателями разрешения экрана.

Для нашего времени необходимы такие параметры:

  • HTML5 — такой язык для расстановки блоков страницы
  • CSS3 — такой язык для вёрстки в качестве оформления страниц
  • Кроссбраузерность (на многих браузеров чтоб корректно просчитывался сайт)
    • Mozilla Firefox
    • Safari
    • Google Chrome
    • Internet Explorer
  • Адаптивность
  • Чистый код

Вот эти пункты можно напомнить верстальщику, что у него такие задачи, актуальные на данный момент.

А теперь пойдём глубже в тех. моменты.

Что нужно учитывать в ТЗ?

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

Итак, по пунктам:

  • Описание. То есть информация, необходимая для посетителя будущего сайта.
    • Для кого? Целевая аудитория: Покупатели, продавцы, сервисные центры...
    • Для чего сайт: Для имиджа компании, для увеличения продаж, для комфортабельности клиентам
    • Тип: Сайт-визитка, корпоративные, Интернет-Магазин
    • Языковая аудитория: русская, английская
  • Функциональный блок
    • Нужна ли регистрация
    • Нужны ли новости
    • нужны ли виджеты/модули
    • Нужны ли рекламные блоки
    • Нужен ли скрипт рассылки
    • и т.д.
  • Описание функционала
    • О нас
    • О сайте
    • Контакты

Можно сюда добавить свои собственные иерархии файлов.

  • Логическая часть функционала сайта
    • Шапка статична или неподвижна
    • Новостная лента видна на главной или где-то ещё
    • Служба сервиса
    • Наличие обратной связи не только по почте
    • Новостная лента с указанием даты, рубрики, наименования, превью и первых n символов в превью новостей с кнопкой «Прочитать полностью»
    • Отображение архива за определённый месяц и год
  • Совместимость
    • Адекватная работа на различных ОС
      • MacOS
      • Windows
      • Linux-системы
    • Использование CMS-движков
      • WordPress
      • Joomla
      • и т.д.
    • Совместимость с браузерами
  • Техническая составляющая
    • Наличие боковой прокрутки, если сайт будет шире ширины экрана монитора
    • Наличие JavaScript для адекатных работ с виджетами/модулями
    • Характеристики HTML5-кода
      • Без устаревших тегов <br> или фреймов (готовых заранее кем-то шаблонов)
      • Структурный, код с комментариями. Отбивка Tab-ами
      • Семантическая развёртка
      • Наличие имена классов и идентификаторов (для более краткого кода и более удобного обращения для кодирования)
    • Характеристики CSS3-кода
      • Структурный, отбивание tab-ами
      • Комментарии обозначение начала и конец блока кода
      • Можно допустить внедрение вендорных префиксов.
    • Характеристики JavaScript-кода
      • Структурный, отбивание tab-ами
      • Имена переменных с определёнными названиями или по усмотрению исполнителя
      • Добавление комментариев: обозначение блока кодов:
        • Классов/методов
        • Функции
        • Условия
      • Для серьёзных задач используется раздел программирования как ООП (Объектно-Ориентированное Программирование), для простых — стандартные функции
      • Код необходимо написать работоспособный
    • Навигация
    • Ссылки

Напомню, что чем подробнее распишете ТЗ верстальщику, тем ему лучше брать заказ на исполнение. Тем комфортнее будет всем сторонам, и  ожидаемый и реальный результаты совпадут по-максимуму.

 

Читайте ещё: