Skip to content

Latest commit

 

History

History
103 lines (72 loc) · 9.58 KB

Specification.md

File metadata and controls

103 lines (72 loc) · 9.58 KB

Техническое задание

Проект Пинк

Название сайта: Пинк

1. Общие технические требования

  • 1.1. Сетка: определена в макете.
  • 1.2. Адаптивность сетки: мобильная, планшетная и десктопная версии («фикс» или «резина»).
  • 1.3. Адаптивность графики: ретинизация, векторные изображения.
  • 1.4. Используемая методология: БЭМ.
  • 1.5. Используемый препроцессор: Less или Sass.
  • 1.6. Используемый инструмент автоматизации: Gulp.
  • 1.7. Используемые фреймворки: нет.
  • 1.8. Кроссбраузерность: Chrome, Firefox, Safari, Edge, Internet Explorer 11.
  • 1.9. Типографика: частично определена в макете (прочее — на усмотрение разработчика).
  • 1.10. Используемый шрифт: Open Sans.

2. Пояснения для учащихся

  • 2.1. Обязательными к вёрстке являются все 3 страницы (главная страница, страница с формой, страница с фотографиями пользователей).
  • 2.2. В макетах есть скрытые слои со всплывающими окнами. Такие слои выделены зелёным цветом в панели слоёв Photoshop.
  • 2.3. Макеты верстаются постепенно: сначала мобильная версия, далее от мобильной версии к планшетной, а затем и к десктопной.
  • 2.4. Готовить растровую и векторную графику для проекта не нужно, она будет добавлена в проект после лекции «Препроцессоры и автоматизация».
  • 2.5. Дополнительная ретиновая и адаптивная графика будет добавлена в проект после лекции «Адаптивная графика».

Пожелания к поведению блоков

3. Все макеты

  • 3.1. Между версиями (мобильная, планшетная, десктопная) сетка может быть как резиновой, так и фиксированной.
  • 3.2. При фиксированной сетке контентная область центруется и не может быть уже макетной ширины.
  • 3.3. Логотип на внутренних страницах — это ссылка на главную страницу.
  • 3.4. Главное меню в мобильной и планшетной версиях появляется под шапкой сайта (в макете в панели слоёв Photoshop меню выделено красным цветом).
  • 3.5. Мобильное меню может быть реализовано двумя способами:
    • реализация без JS;
    • реализация с использованием JS.
  • 3.6. При реализации без использования JS главное меню мобильной и планшетной версиях должно быть всегда открыто, а иконка с крестиком — скрыта.
  • 3.7. При реализации с использованием JS блок с главным меню в мобильной и планшетной версиях должен открываться при нажатии на иконку «гамбургера». Когда меню открыто, иконка «гамбургера» заменяется на крестик. При нажатии на иконку с крестиком меню закрывается.
  • 3.8. Все состояния элементов при наведении и нажатии указаны в макете pink-styleguide.psd. Состояние ошибки должно быть реализовано только для обязательных полей формы (в макете они помечены звёздочкой).
  • 3.9. Логотип Академии и ссылка HTML Academy в футере ведут на лендинг интенсива «Профессиональный HTML и CSS, уровень 2».

4. Главная

Мобильная версия (pink-index-mobile.psd):

  • 4.1. Логотип состоит только из названия приложения «Пинк».
  • 4.2. Кнопка в блоке «Скачать приложение» ведёт на маркет по умолчанию (iTunes).
  • 4.3. Иконки в блоке «Скачать приложение» являются так же ссылками и ведут на соответствующие маркеты.
  • 4.4. Блок «Характеристики приложения» (блок с телефоном): изображение на экране должно быть статичным, без пролистывания изображений на экране.
  • 4.5. Блок «Отзывы»: пролистывание отзывов реализовывать не обязательно. Достаточной реализацией будут свёрстанные 3 отзыва.
  • 4.6. Блок «Тарифы»: пролистывание тарифов реализовывать не обязательно. Достаточной реализацией будут свёрстанные 3 тарифа.
  • 4.7. Блок карты: необходимая реализация — интерактивная карта (карты Google или Яндекса), ширина подстраивается под ширину вьюпорта (но не уже контентной ширины макета), на карте размещён маркер (может быть как кастомным, так и дефолтным), центр карты соответствует центру блока в макете.

Планшетная версия (pink-index-tablet.psd):

  • 4.8. Блоки меняют размеры и расположение согласно макету.
  • 4.9. В состав логотипа добавляются новые элементы.
  • 4.10. Блок «Тарифы» располагается по центру страницы и не имеет элементов управления для переключения.
  • 4.11. После карты добавляется блок с подвалом.

Десктопная версия (pink-index-desktop.psd):

  • 4.12. Блоки меняют размеры и расположение согласно макету.
  • 4.13. В составе логотипа добавляются новые элементы.
  • 4.14. Главное меню всегда открыто вне зависимости от его состояния на мобильной и планшетной версии.
  • 4.15. В блоке «Отзывы» меняются элементы управления для переключения.

5. Форма

Мобильная версия (pink-form-mobile.psd):

  • 5.1. Должны быть реализованы кастомные элементы форм.
  • 5.2. У полей ввода телефона и почты должны быть указаны соответствующие типы для удобного заполнения с телефона.

Планшетная версия (pink-form-tablet.psd):

  • 5.3. Блоки меняют размеры и расположение согласно макету.

Десктопная версия (pink-form-desktop.psd):

  • 5.4. Блоки меняют размеры и расположение согласно макету.

6. Страница с фото и видео

Мобильная версия (pink-photo-mobile.psd):

  • 6.1. Все изображения являются ссылками на полноразмерный вариант (открытие полноразмерного изображения реализовывать не нужно).
  • 6.2. Инструмент обработки изображений в блоке перед подвалом реализовывать не нужно, достаточно только вёрстки.
  • 6.3. У каждого элемента обработки изображений есть свой ползунок для настройки, но в мобильной версии показывается только активный.
  • 6.4. Кнопка «Запостить» отправляет форму с обработанным изображением на сайт (реализовывать не нужно).
  • 6.5. Кнопка «Отмена» сбрасывает все настройки фильтров с исходное состояние (реализовывать не нужно).

Планшетная версия (pink-photo-tablet.psd):

  • 6.6. Блоки меняют размеры и расположение согласно макету.

Десктопная версия (pink-photo-desktop.psd):

  • 6.7. Блоки меняют размеры и расположение согласно макету.