Skip to content

Latest commit

 

History

History
51 lines (37 loc) · 5.46 KB

Specification.md

File metadata and controls

51 lines (37 loc) · 5.46 KB

Техническое задание на вёрстку

  • Название сайта: Техномарт
  • Домен: пока нет
  1. Общие технические требования
  • 1.1 Стандарты вёрстки: HTML5, CSS3, прогрессивное улучшение.
  • 1.2 Сетка: определена в макете.
  • 1.3 Адаптивность вёрстки: нет.
  • 1.4 Используемые фреймворки: нет.
  • 1.5 Кроссбраузерность: IE10+, Chrome, Firefox, Opera, Safari.
  • 1.6 Типографика: частично определена в макете (прочее — на усмотрение разработчика).
  • 1.7 Используемые шрифты: Cuprum, PT Sans (есть в папке с макетом и на Google Fonts).
  • 1.8 С макетом предоставлен styleguide.psd, содержащий прорисовку состояний элементов интерфейса. При любых расхождениях с макетами он должен иметь наивысший приоритет.
  1. Пояснения для учащихся
  • 2.1 В макетах есть скрытые слои с всплывающими окнами. Такие слои в блоке слоёв фотошопа выделены синим цветом.
  • 2.2 Макеты верстаются постепенно, не нужно сразу выполнять все требования.
  1. Пожелания к поведению блоков

Все макеты:

  • 3.1 Контентная область центрируется и не может быть уже макетной ширины.
  • 3.2 Логотип — это ссылка на главную страницу.
  • 3.3 Если пользователь сделал закладку или добавил что-то в корзину, соответствующий пункт в шапке сайта меняет цвет фона на красный (смотрите technomart-catalog.psd).
  • 3.4 Авторизованному и неавторизованному посетителю показывается разный вид блока авторизации (смотрите technomart-catalog.psd и technomart-index.psd).
  • 3.5 В блоке авторизованного посетителя имя и иконка пользователя являются ссылкой на профайл, а иконка выхода — на страницу деавторизации.

technomart-index.psd:

  • 3.6 Промо-блок («материалы», «инструмент», ...): ссылками являются только кнопки.
  • 3.7 Промо-блок («материалы», «инструмент», ...): смена слайдов в слайдере должна происходить мгновенно, без промежуточных состояний и анимации.
  • 3.8 Блок «Популярные производители»: карточка производителя является ссылкой.
  • 3.9 Блок «Сервисы»: слайдер с табами работает аналогично слайдеру промо-блока: по клику на таб меняется слайд мгновенно.
  • 3.10 Блок карты — достаточная реализация — обычное изображение, клик по ней приводит к переходу на сервис карт.
  • 3.11 Блок карты — реализация по желанию — часть интерактивной карты, клик на неё приводит к появлению полного размера интерактивной карты (смотрите папку слоёв «map hover»).
  • 3.12 При клике по кнопке «Заблудились?..» возникает модальное окно (смотрите папку слоёв «write us»), окно позиционируется относительно вьюпорта, а не страницы.

technomart-catalog.psd:

  • 3.13 Блок «Цена» — при наведении на любой из маркеров появляется указатель cursor: pointer, делать маркеры подвижными не обязательно, цена меняться не должна.
  • 3.14 Фильтр: верстать с помощью формы, кнопка «Показать» отвечает за отправку формы, при выключенном JavaScript должен осуществляться переход на отдельную страницу (отдельную страницу верстать не нужно).
  • 3.15 Количество товаров в правом блоке может быть любым, добавление товаров не должно ломать страницу.
  • 3.16 У любого товара может быть метка «new».
  • 3.17 При клике на кнопку «купить» возникает модальное окно с сообщением о добавлении в корзину (смотрите папку слоёв «cart +» в technomart-catalog.psd), окно позиционируется относительно вьюпорта, а не страницы.