Макет -- Relax Clinic (с ТЗ)

[klierik]

 

Скрытый текст

 
Техническое задание.
 
Базовые требования
Платформы: Windows, Mac OS X.
 
Браузеры

• IE8 и выше
• Chrome последние 2 версии
• Firefox последнии 2 версии
• Opera последнии 2 версии (на базе движка Blink)
• Safari последнии 2 версии

В качестве эталонного браузера использовать Chrome или Firefox.
Это значит что в одном из них вёрстка должна как можно точнее соотвествовать макету, в остальных не должно быть визуальных отличий.
 
Соответствие макету
Вёрстка должна 1:1 соответстввовать дизайну, но допускаются незначительные различия. Данные различия, как правило, возникают из-за шрифтов или при использовании технологии адаптивной разметки. В помощь прийдет инструмет PixelPerfect -- расширение для браузера.
 
Отдельно отмечу что верстка должна быть написана в лучших традисиях graceful degradation. Т.е. всё современные фишки оформления должны быть выполнены средствами CSS. Браузеры которые не поддерживают CSS3 или некторые его свойства должны корректно рендерить страницу без них.
 
Стандарты
HTML5/CSS3. HTML - должен проходить валидацию. CSS - не обязательно.
 
В кажестве исходного кода для CSS использовать препроцессор LESS или SASS.
Не обязательно, но крайне желательно использовать Grunt для генерирования LESS/SASS в CSS с применением технологии сжатия.
 
Сброс стилей
В качестве сброса стилей браузера использовать Normalize.css.
 
Javascript:
За основу взять фреймворк jQuery версии 1.11.х или 2.x.x.
Для поддержки HTML5 тегов в IE можно использовать код:
 

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]-->

 
Допускается применение modernizr если потребуется.
 
Ширина сайта
Стандартная ширина сайта - 100%.
 
Изменение/наполнение контентом
Блоки могут и будут содержать иной контент, отличный от того что в макете. Контент может занимать как больше так и меньше пространства. При вёрстке следует это учесть что бы в будущем макет не "поехал".
 
Особености макета
Главная страница
1. Фоновое изображение должно занимать полностью область окна браузера. По умолчанию картинка имеет значение ширины 100%.
1.1. В случае если ширина окна браузера больше чем высота, ширина картинки 100%, высота "auto". Картинка приклеена к верху и обрезается снизу.
1.2. В случае если ширина окна браузера меньше чем высота, установить значение высоты для картинки 100%, а для ширины "auto". Картинка должна выравниватся по центру, тем самым обрезая края слева и справа.
1.3. Вышеуказанные пункты реализовать при помощи CSS3
2. Меню
2.1. Меню имее отступ сверху фиксированный.
2.2. Высота меню не фиксированна. Количество пунктов может менятся. Текст в пункте меню может быть в несколько строк -- такой пункт должен выглядеть более сжатым по отношении к другим за счет line-height.
2.3. Ширина меню фиксированна.
3. Слайдер
3.1. Блок с текстом всегда должен быть по-центру как вертикально так и горизонтально. Контент внутри может и будет менятся.
3.2. Ширина блока по-центру может занимать все доступное срастранство, но не может "налазить" на меню слева. Так же этот блок не должен "налазить" на индикацию в нижнем правом углу если там будет много слайдов.
3.3. Индикация слайдов размещается в нижнем правом углу. Отступы справа и снизу фиксированные. Элементы индикации могут выстраиваются в несколько строк при сужении экрана (в таком случае возможна ситуация конда индикация ложится поверх блока по-центру). Кликатебельная зона должна быть достаточной что бы в неё можно было тыкнуть пальцем на смартфоне.
3.4. Требуется поддержка touch-устройств.
 
Внутреняя страница
1. Блок с белой рамкой имеет фиксированную высоту, выравнивается по-центру области в которой размещается. Его ширина может достигать ширины всей строки, за вычитом ширины меню. Текст внутри данного блока должен выравниватся вертикально по-центру. Строк может быть как одна так и две. Если контент превышает область -- прятать излишки.
2. Белая область на странице.
2.1. Данная область занимает всё пространство области, при этом имея фиксированный отступ сверху и слева.
2.2. Левая колонка имеет фиксированную ширину
2.3. Правая область, с картой, занимает все доступное пространство.
 
Масштабирование страниц
Поддержка не обязательна. Пользователь сам на себя берет отвественность за результат отображения страницы применяя к ней любые инструменты которые влияют на её изменение.
Если есть желание все таки учесть поддержку масштабируемости, то советую почитать про Эластичные шаблоны, а так же опосля ознакомится с "rem"
 
HTML код

• Кодировка – utf-8
• Структурный, не комментируемый код
• Семантическая разметка на уровне грамотного использования тегов.
• Имена классов и идентификаторов – осмысленные, на усмотрение разработчика.
• Классы служат для привязки оформления, идентификаторы – скриптов.

LESS/SASS код

• Структурный, отбивка табами.
• Комментариями обозначены начало/конец крупных модулей/блоков разметки.
• Допускается использование вендорных префиксов.
• Стили для IE вынесены в отдельные CSS файлы, если они потребуются.
• Для реализации в IE не поддерживаемых CSS свойств использование javascript хаков, или каких либо других интсрументов, запрещено (выше уже упоминалось про graceful degradation)

Перед тем как приступить к работе настоятельно рекомендую ознакомится с темой Типичные ошибки начинающего верстальщика
 
Javascript код

• Структурный, отбивка табами.
• Имена переменных осмысленные, на усмотрение разработчика.
• Снабжен комментариями: описаны назначения
  • методов/классов
  • функций
  • условий
• Для объемных задач используется ООП, для простых – обычные функции.
• Код должен быть без ошибок.
• При использовании Ajax и не предоставления заказчиком api для взаимодействия с серверной частью, api создается на усмотрение разработчика.

Изображения

• Имена файлов осмысленные, на усмотрение разработчика.
• Графику следует оптимизацировать в Photoshop (использую инструмент "Save for Web") и ImageOptim (OSX) или OptiPNG (Windows)
• Малые изображения и иконки объеденить в спрайты.
  • Для полноцветных RGBA картинок можно использовать инструмент Stitches
  • Для векторных изображений иожно использовать IcoMoon

Организация структуры файлов и папок

• HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов.
• Стили в папке - /css/
• SASS/LESS в соответствующей папке - /sass/ или /less/
• Javascript - /js/
• Изображения оформления - /images/
• Изображения содержания - /thumbs/ или /pic/
• Шрифты - /fonts/

Наглядный пример
 
Краткий вариант - только директории:

Скрытый текст

 

.├── project
│   ├── css
│   ├── images
│   │   ├── carousel
│   │   ├── gallery
│   │   ├── icons
│   │   │   └── src
│   │   ├── ie
│   │   ├── loader
│   │   ├── table
│   │   └── title
│   ├── js
│   │   ├── plugins
│   │   │   ├── jcarousel
│   │   │   └── typeahead
│   │   └── scripts
│   ├── less
└───└── thumbs

 

 
Полный вариант -- директории и файлов:

Скрытый текст

 

.├── project
│   ├── 10.html
│   ├── 11.html
│   ├── 3.html
│   ├── 4.html
│   ├── 5.html
│   ├── 6_1.html
│   ├── 6_2.html
│   ├── 7_1.html
│   ├── 8.html
│   ├── 9.html
│   ├── css
│   │   ├── project.css
│   │   ├── project.ie8.css
│   │   └── project.min.css
│   ├── images
│   │   ├── carousel
│   │   │   ├── control_left.png
│   │   │   └── control_right.png
│   │   ├── gallery
│   │   │   ├── control_corner_next.png
│   │   │   └── control_corner_prev.png
│   │   ├── icons
│   │   │   ├── Readme.txt
│   │   │   ├── spritesheet.png
│   │   │   ├── src
│   │   │   │   ├── bank_atm.png
│   │   │   │   ├── bank_office.png
│   │   │   │   ├── close.png
│   │   │   │   ├── social_fb.png
│   │   │   │   ├── social_gplus.png
│   │   │   │   ├── social_li.png
│   │   │   │   ├── social_mail.png
│   │   │   │   ├── social_pin.png
│   │   │   │   ├── social_rss.png
│   │   │   │   ├── social_tw.png
│   │   │   │   └── tags.png
│   │   │   ├── stitches.txt
│   │   │   └── stylesheet.less
│   │   ├── ie
│   │   │   └── caption-bg.png
│   │   ├── loader
│   │   │   ├── ajax-loader.gif
│   │   │   └── ie.png
│   │   ├── logo.png
│   │   ├── table
│   │   │   ├── sort-asc.png
│   │   │   └── sort-dsc.png│
│   └── title
│   │   └── credits.png
│   ├── index.html
│   ├── js
│   │   ├── jquery-1.10.2.min.map
│   │   ├── jquery.min.js
│   │   ├── plugins
│   │   │   ├── jcarousel
│   │   │   │   ├── jquery.jcarousel-autoscroll.min.js
│   │   │   │   ├── jquery.jcarousel-control.min.js
│   │   │   │   └── jquery.jcarousel-core.min.js
│   │   │   └── typeahead
│   │   │   ├── countries.json
│   │   │   ├── typeahead.js.zip
│   │   │   └── typeahead.min.js
│   │   └── scripts
│   │   ├── project_navigation.js
│   │   └── project_scroll_gallery.js
│   ├── less
│   │   ├── block.less
│   │   ├── breadcrumbs.less
│   │   ├── buttons.less
│   │   ├── carousel.less
│   │   ├── close.less
│   │   ├── dropdown.less
│   │   ├── forms.less
│   │   ├── project.less
│   │   ├── icon.less
│   │   ├── jquery.jcarousel.less
│   │   ├── jquery.typeahead.less
│   │   ├── layout.less
│   │   ├── loader.less
│   │   ├── mixins.less
│   │   ├── modal.less
│   │   ├── navbar.less
│   │   ├── navs.less
│   │   ├── page.less
│   │   ├── pagination.less
│   │   ├── scaffolding.less
│   │   ├── std.less
│   │   ├── tables.less
│   │   ├── unit.less
│   │   └── variables.less
│   ├── thumbs
│   │   ├── block__banner.jpg
│   │   ├── google-map.jpg
│   │   ├── home-page__gallery_03.jpg
│   │   ├── home-page__gallery_05.jpg
│   │   ├── home-page__gallery_07.jpg
│   │   ├── home-page__gallery_09.jpg
│   │   ├── home-page__gallery_11.jpg
│   │   ├── jcarousel_slide.jpg
│   │   ├── navigation__dropdown__thumb_03.jpg
│   │   ├── news_thumb_03.jpg
│   │   ├── news_thumb_06.jpg
│   │   ├── news_thumb_08.jpg
│   │   ├── std__thumb_01.jpg
│   │   ├── std__thumb_02.jpg
│   │   ├── unit__thumbnail_03.jpg
│   │   ├── unit_promo__thumb_03.jpg
│   │   ├── unit_promo__thumb_05.jpg
│   │   ├── unit_promo__thumb_07.jpg
└───└───└── unit_promo__thumb_09.jpg

 

 
Удачи в обучении 
 
Автор макета -- Павел Борисенко предоставил данную работу на благо обучения начинающим 
За основу ТЗ был взят пример со статьи Техническое задание на верстку сайта

design 2 - relax clinic.zip

Edited March 26, 2016 by klierik

[AnimoValidus]

А что должно происходить при прокрутке слайдера? Меняется фон, затем меняется ли текст в рамке? (вместе с рамкой?). Ещё что-то меняется? + Можно ли прокручивать слайдер, когда открыто белое окно с контентом? 

[advokatua]

Не ТЗ, а жесть какая-то. Мозг сломать можно.

 

Например:

- п. 2.3 ширина меню фиксирована, после чего открываем спойлер и видим, что меню на внутренней странице очевидно шире и плюс ко всему заполнено непонятными пунктами. Как это верно понять? Дизайнер ступил? Когда мы клацаем на "Контакты" мы получаем одну страницу "Контакты", а меню остается старое или меняется на какое-то новое?

 

- в п. 1.1 и 1.2 говорится об разных пропорциях окна сайта, а вот о том какая минимальная ширина и высота может быть не указано. Судя по тому, что платформы PC, то ширина минимум 960px должна быть? 

 

-  2. Белая область на странице.  п. 2.1. Каким образом там будет фиксированный отступ слева, если меню увеличится допустим вдвое и очевидно начнет залезать/сливаться на область "Контакты"?

 

- ни слова не сказано о том как поведет себя белое окно "Контакты" при сужении окна по горизонтали или вертикали. Откуда попросту выплывает, что у нас все же должны быть минимальные ширина и высота для макета. В противном случае верстальщик делает как ему удобно, а не как надо.

Edited March 19, 2015 by advokatua

[Alok]

В самом начале ТЗ такие пункты:

Базовые требования
Платформы: Windows, Mac OS X.
 
Браузеры

• IE8 и выше
• Chrome последние 2 версии
• Firefox последнии 2 версии
• Opera последнии 2 версии (на базе движка Blink)
• Safari последнии 2 версии

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

Какими средствами это осуществляется?

Буду очень благодарен за ссылку на подробное описание этого вопроса. 

 

И еще вопрос. После написание ТЗ прошло уже полтора года. Список требуемых браузеров остается по прежнему актуальным на сегодняшний день?

IE8 вроде как уже меньше полпроцента пользуются.

Edited August 1, 2015 by Alok

[li4e]

В самом начале ТЗ такие пункты:

Базовые требования

Платформы: Windows, Mac OS X.

 

Браузеры

• IE8 и выше
• Chrome последние 2 версии
• Firefox последнии 2 версии
• Opera последнии 2 версии (на базе движка Blink)
• Safari последнии 2 версии

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

Какими средствами это осуществляется?

Буду очень благодарен за ссылку на подробное описание этого вопроса. 

Можно использовать VirtualBox

[afdw]

https://github.com/xdissent/ievms

https://www.modern.ie/ru-ru

http://htmlbook.ru/samlayout/internet-explorer/testirovanie-v-ie

[wwt]

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

 

Проблемы с вендорными префиксами к CSS свойствам можно решить с помощью постпроцессора Autoprefixer, там есть возможность выбирать для каких браузеров и каких версий вам нужно добавлять вендорные префиксы.

 

Mac ОС установить на виртуалке чтобы проверять результат.

 

Кстати есть онлайн сервисы для проверки результата. К примеру http://browsershots.org/

Вот тут в статье описано больше вариантов http://www.avalon.ru/OpenLessons/WebDev/Lessons/testing-tools/копировать не вижу смысла сюда.

[Alok]

Спасибо за подробные инструкции. Буду осваивать.

[klierik]

И еще вопрос. После написание ТЗ прошло уже полтора года. Список требуемых браузеров остается по прежнему актуальным на сегодняшний день? IE8 вроде как уже меньше полпроцента пользуются.

 

Если сам понимаешь что ТЗ писалось 1.5 года назад то зачем задаешь такой вопрос? А если бы ему было 10 лет уже то что? Здравый смысл же все имеют )

Да и каждый волен выбирать те браузеры которые хочет — это лишь обучение.