x2bark.ru - блог веб-разработчика с инструкциями, важными статейками и колоссальным количеством полезной информации.


Главная страница сайта     Гав     Техподдержка     Реклама     Карта сайта    

ТЗ, техническое задание и с чем его едят.

        514     #инструкции     обязательно к прочтению

ТЗ или техническое задание.

Могу расшифровать этот термин как - инструмент для воплощения желания или задумки в реальном мире! Техническое задание может быть сделано не только для дизайнера, разработчика, художника или специалиста по рекламе, так и для профессий с которыми скорее всего сталкивался каждый человек, ТЗ бывает для электриков, строителей или даже сантехников.

Делаем вывод, что техническое задание это не какой-то миф древней греции или нахальное требование исполнителя, а существующая форма с конкретными требованиями для грамотного оказания оказания услуг.

Для чего нужно ТЗ?

Чем подробнее прописаны все (даже мельчайшие) хотелки в техническом задании, тем вероятность получения желаемого результата выше. В качественно описанном ТЗ эта вероятность достигает 100%. Чуть ниже мы будем говорить о Техническом Задании на создание сайта.

Для простоты восприятия участников технического задания поделим на две стороны - заказчик и исполнитель. Заказчик в данном случае - это субъект которому понадобился сайт, будь то организация, предприниматель или просто индивидуум которому понадобился сайт для определенных целей, а исполнитель уже субъект который сайт создает, в нашем случае веб разработчик.

ТЗ для заказчика.

Заказчику ТЗ необходимо воспринимать как чек-лист для проверки готового сайта исполнителем. Тем самым при наличии ТЗ заказчик может требовать исполнения в полном объеме, в мельчайших подробностях и в сроки указанные в утвержденном сторонами техническом задании.

ТЗ для исполнителя.

Исполнителю ТЗ необходимо для того, чтобы понять цели проекта, выполнить все необходимые задачи именно так, как их требует заказчик и спланировать график, чтобы выполнить проект вовремя.

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

Определимся с целями проекта.

Необходимо описать цели сайта - например упрощение работы с клиентской базой, прием оплаты, презентация услуг компании или рекламная страница товаров и услуг предпринимателя. Этот список можно продолжать довольно долго, так как сайт можно использовать для самых разнообразных целей! Опишите цели вашего проекта.

Определимся с предпочтениями.

Так же, действительно важно описать предпочтения к проекту. например добавление формы обратной связи на главной странице сайта или карты с местонахождением магазина или добавление калькулятора для рассчета цены услуг предпринимателя и так далее. Конкретно тут не стоит экономить место и торопится. Старайтесь описать как можно подробнее!

Проект.

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

Для удобства отображения откройте пожалуйста эту статью с компьютера или ноутбука!

#

На этой фотографии мы видим зарисовки начального баннера, того самого скелета сайта, расположения элементов!

Мы видим текстовые элементы помеченные t(text), кнопки - b(button), текстовые заглавные (выделенные) элементы h1(1 заголовок), h2(2 заголовок), больше информации о параграфах вы найдете в рекомендуемых статьях после прочтения этой статьи, перечеркнутые квадраты - изображения любого плана, jpg, svg, png итп, подпись в скобках (фото) - обозначает, что задний фон задан в качестве фотографии, и подписи в пунктире - определенный формат обозначения комментариев или заметок.

Я уверен вы так же заметили линии со стрелками сверху - те обозначают ширину блока по отношению к экрану, по стандарту - сетка сайтов состоит из 12 столбцов, а значит подпись 12/12 - обозначает, что элемент занимает полную часть блока.

Из этого так же следует, что 4/12 - занимают лишь одну третью. Более подробно об этом я так же опишу в статье ниже по странице.

#

Так выглядит этот элемент на этапе дизайна. Видим разницу, и соответствие макету!

#

Тут, почти, то же самое, но мы видим что фон разделен на две ровные части из которых одна - фотография а вторая цвет, так же видим выделенный блок в нижней части который наезжает на следующий элемент.

#

Таким образом это выглядит в чистовом варианте.

#

Далее мы видим слайдер, то есть изображения которые сменяют друг друга по времени и с помощью нажатия кнопок - флажков внизу и стрелок вправо-влево, на уровне страницы.

#

Таким образом это реализовано.

#

Далее текст который занимает 2/3 страницы и находиться по центру, изображение по высоте текста, и видим разделяющую текст линию.

#

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

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

#

Далее у нас полно-экранный блок с кнопкой, так называемый hook (крючок), по задумке заказчика отправляет посетителя к форме обратной связи. Так же мы видим изображение, которая в данном случае является картой, так же видим пунктирные пометки об анимации на этом элементе.

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

#

Ну и итог конечно же.

#

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

#

Тут мы видим применение на практике подобного способа экономии времени.

#

Естественно, я должен показать чистовой результат!

#

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

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

Ну и нет ничего зазорного в том, чтобы указать предполагаемую ширину элемента, пользуйтесь этим!

#

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

Больше информации об админ-панели собственной разработки, вы так же сможете в конце статьи.

#

Дальше мы видим классический шаблон формы обратной связи, как правило это имя, телефон и кнопка. И блок документов которыйв этом случае - последний блок, его еще называют footer (подвал).

#

Ну и результат.

Скорее всего понятно, что мы разбирали сайт Микрорайона "Зеленый Яр", который был так же написан веб-разработчиком, чью статью вы сейчас читаете. На всякий случай - сайт доступен по адресу: яр18.рф

Читайте так же:


Добро пожаловать на сайт!   обязательно к прочтению

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

 04.01.2019     286     о_сайте

Микроразметка и влияние на SEO.   поисковая оптимизация

В одной из прошлых статей мы с вами говорили на тему разметки текста и ее влияния на поисковую оптимизацию. А сегодня мы поговорим с вами о микроразметке, о различиях между микроразметкой и разметкой.

 10.02.2019     227     продвижение_сайта

Заголовки текста и их прямое влияние на SEO.  

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

 12.01.2019     199     продвижение_сайта

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

Все инструменты есть в бесплатном доступе и без смс, а еще интереснее то, что находятся они в самих поисковых сайтах, еще больше удивляет, что они располагаются в самой поисковой строке!

 13.01.2019     156     инструкции

RSS канал, и современное использование фидов  

На многих форумах и новостных сайтов, мы, довольно часто видим непонятно для нас аббревиатуру RSS, предложение подписаться на RSS-канал или предложение поделиться RSS-каналом, ну или просто непонятный значок скошенного Wi-Fi в оранжевом квадрате.

 15.02.2019     143     основные_знания