Вёрстка внутренней страницы

Требуется сверстать внутреннюю страницу сайта с динамическими элементами – (html, css, js)

макет в PSD, просмотр прилагается, более подробно можно обсудить уже с откликнувшимися.

Страница должна быть в 2 вариантах – для "квадратных" и широкоформатных экранов (2 макета, 1-основной, 2-ой должен быть при ширине окна 1024 и меньше)

Цена и сроки оговариваются отдельно.

Браузеры: IE7-11, Chrome (21+), Firefox (17+), Opera (11+), Safari (5+), Яндекс.Браузер (13+), – верстка полностью соответствует дизайну, скрипты работают в соответствии с ТЗ. В IE7-8, могут быть незначительные упрощения, скрипты, связанные с анимацией, могут работать в упрощенном виде.

Мобильные браузеры: Android Browser (4+), Mobile Safari (5+), ChromeMobile(28+),

Стандарты: HTML5/CSS3. HTML – должен проходить валидацию. CSS – не обязательно.

Javascript: используется фреймворк jQuery последней версии, возможно использование twitter bootstrap FW

Соответствие макету: при накладке допустимы незначительные различия.

Поведение верстки:

1. Ширина окна более 1024px – запускается первая версия макета

2. Ширина окна равна 1024px – запускается вторая версия макета

2. Ширина окна менее 1024px – запускается вторая версия макета с горизонтальной прокруткой

Подвал прижат книзу.

Расширяемость: блоки с изменяющимся содержимым подстраиваются в соответствии с дизайном при уменьшении/увеличении контента.

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

Масштабирование страниц: страницы при масштабировании страницы в диапазоне 70-150% в браузерах IE9, Chrome 21+, Opera 12+, Safari 5+, FF17+ должны выглядеть так же как и при 100%. Допускаются не большие погрешности, которые возникают из-за неправильных округлений координат браузеров.

Масштаб в IE7-8 не проверяется.

HTML код:

Кодировка – utf-8

Структурный, комментируемый код (обозначается начало/конец крупных блоков). Отбивка табами.

Семантическая разметка на уровне грамотного использования тегов.

Имена классов и идентификаторов – осмысленные, на ваше усмотрение.

Классы служат для привязки оформления, идентификаторы – скриптов.

CSS код:

Структурный, отбивка табами.

Названия стилей оформлены через – (пример )

Комментариями обозначены начало/конец крупных модулей/блоков разметки.

Допускается использование вендорных префиксов.

Стили для IE7-8 вынесены в отдельные CSS.

Для IE7-8 для реализации не поддерживаемых CSS свойство допустимо использование Javascript и expression.

Javascript код:

Структурный, отбивка табами.

Имена переменных осмысленные, на ваше усмотрение.

Снабжен комментариями: описаны назначения методов/классов, функций, условий.

Код должен быть без ошибок.

Изображения:

Имена файлов осмысленные, на ваше усмотрение.

Проходят базовую оптимизацию на уровне оптимизации для Веб в Photoshop.

Малые изображения оформления объединенные по назначению и склеиваются в спрайты.

Платформы/браузеры

Планшетники iOs

Планшетники Android

Файловая организация:

HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов.

Стили в папке /css/

Javascript – /js/

Изображения оформления – /image/

Изображения содержания – /static/

- Каждый текстовый файл css, js... должен иметь описание, содержащее назначение и где используется