HTML5/CSS3 верстка сайта

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

На главной странице разместить ссылки в верхнем подменю на группы в социальных сетях:

VK https://vk.com/alakris1FB https://www.facebook.com/alakrismoscow/ОК https://ok.ru/group/53644720865518Инстаграмм https://www.instagram.com/alakris_internet_agentstvo/Ютуб https://www.youtube.com/channel/UCA5zTB4IATfesSaUHIipyegГугл + https://plus.google.com/+AlakrisRusБиханс https://www.behance.net/alakriscorpТвиттер https://twitter.com/alakrismoscowТелеграмм https://web.telegram.org/#/im?p=@alakris

1.1.2. Сделать переключение языка с EN-RU.При переключении языка настроить редирект на англоязычную версию alakris.com с ограниченной копией сайта только на англ языке.Перевод предоставим, перечень страниц также отдельно скину.1.1.3. При клике на первом экране http://prntscr.com/fcqdgo должно открываться попап окно с текстом 700-1000 симв (текст предоставим)

1.1.5. При клике на кнопку дополнительные услуги http://prntscr.com/fcqk1h должен раскрываться весь перечень услуг.1.1.6. Прикрутить скрипт отправки письма заявки http://prntscr.com/fcqkst на почту [email protected], после успешной отправки делать редирект на страницу благодарности. С отправкой письма необходима передача адреса страницы, поле телефон сделать обязательным, поставить валидацию и сообщение о некорректном заполнении поля, номер должен быть в виде +7(910)900-00-00. При неудачной отправке выводить сообщение"Что-то пошло не так, попробуйте ещё раз"1.1.7. Карусель сделать постоянно передвигающейся с задержкой в 1-2 сек http://prntscr.com/fcqoy3 при клике на иконку проекта открывать в новом окне соответсвующую иконке страницу портфолио.1.1.8. Раздел Наши клиенты1.1.9. Раздел Отзывы http://prntscr.com/fcqqnh сделать автопрокрутку с задержкой, такой чтобы можно было прочитать текст . Сделать ссылку с открытие в новом окне на профиль в соцсети автора отзыва. Реализовать возможность переключения отзыва при клике http://prntscr.com/fcqrp51.1.10. В разделе Наши клиенты при наведении на логотип должен проявляться его цвет http://prntscr.com/fcqxvx1.2.1 прикрутить слайдер отзывов, в отзывах должна быть ссылка на профиль вк1.2.2. Футер и Хидер берём за образец с главной страницы.1.2.3. При заходе с мобильных устройств должна открываться мобильная версия, в проекте пристутствуют отдельно макеты мобильные.1.2.4. Сделать фиксированное верхнее меню1.2.5. Поставить кнопку прокрутки вверх.1.2.6. Все формы захвата (обратной связи) должны иметь чекбокс с галкой по умолчанию и ссылкой на страницу конфиденциальности. Ghbvth ljv nehbcnf gjhnajkbj http://prntscr.com/gy0cpc1.2.7. На всех страницах разместить код google tag manager, код скину.1.2.8. На страницах услуг в разделе портфолио выводить страницы относящиеся к этой категории услуг (сео-сео, смм-смм и тд) список есть в файле перечне страниц. И какая страница портфолио к какой категории услуги относиться также есть.

2.1.1. Проставить на всех страницах сео теги (в файле с перечнем страниц) Title Description Keywords H1/2/3 2.1.2. Использовать микроразметку (OpenGraph и Schema.org ) особенно на страницах услуг должны выводиться цены, фото, видео.2.1.3.

2.1.2. Слайдер портфолио на мобильных использовать как образец в проекте дом туриста.

 Требования к верстке.

4.1 Общие требования к качеству верстки

1. Верстка при ширине экрана равной или большей ширины контентной части макета должна максимально соответствовать дизайну.
2. Придерживайтесь следующего стандарта поддержки браузеров актуально на начало 2016.
3. Для поддержки стандарта html5 старыми браузерами используйте html5shiv
4. Используйте смысловые названия классов. Придерживайтесь логики названия классов для обеспечения контекстной независимости стилей. По примеру БЭМ или другой подобной логике задания классов. Но делайте это уместно.
5. Не задавайте высоту элементов без особой на то необходимости.
6. Верстка не должна отображаться с горизонтальным скроллом.
7. Ошибки при валидации не должны быть критическими и должны быть сведены к минимуму.
8. Делайте сброс стилей.
9. Сайт должен занимать всю ширину: не должно быть отступов слева и справа

4.2 Качество кода

1. Структурируйте логически css код. Комментируйте логические блоки кода.
2. Комментируйте html код в местах начала и конца основных структурных элементов страницы.
3. В html разметке используйте теги html5, где это уместно
4. При использовании нестандартных свойств css3, уточняйте их поддержку браузерами. Используйте вендорные префиксы разумно.
5. Придерживайтесь единого стиля кода, чтобы дальнейшая его модификация не вызывала затруднений.
6. Используйте utf-8 для кодировки файлов.

4.3 Структура папок, файлы

1. Используйте логичные названия файлов изображений
2. Файлы и папки структурированы по назначению (images, js, css)

4.4 Размер файлов, изображения

1. Используйте оптимизированные изображения. Png оптимизируйте отдельно, например здесь
2. Используйте png только в случаях, где нужны изображения с прозрачностью для наложения слоя или при создании сложных градиентов. В остальных случаях используйте jpg.
3. Следите за оптимальным соотношением вес/качество изображения.
4. Где это возможно не используйте целый фон дизайна: используйте повторения фона.

4.6 Отзывчивость

1. Минимальная ширина соответствует ширине контентной области.
2. Если в дизайне ширина контентной области больше 1024px, то на экранах с разрешением в пределах этой ширины (от 1024px до ширины контентной обл. ), нужно уместить контентную область в экран монитора без горизонтальной прокрутки (ширина в процентах или initial scale width="xxx")
   Initial scale на мобильных = 1.0
3. Точка перехода верстки в мобильный дизайн - 1024px
4. Мобильный дизайн будет предоставлен в отдельных макетах psd.

4.7 Типографика и элементы взаимодействия.

1. Создайте глобальные стили для основных типографских элементов (заголовки, списки и .д.), чтобы в дальнейшем администратор наполняя сайт, не использовал классы. Если элементы отсутствуют в дизайне, уточните стиль отображения у дизайнера.
2. Проверьте правильно ли конвертированы подключаемые шрифты, поддерживают ли они кириллицу.
3. При использовании rgba цвета, задавайте альтернативный цвет в и фильтр для IE.
4. Все кнопки должны содержать состояния: наведение, нажатие. Курсор над кнопками - pointer.
5. Инпуты должны содержать состояния: в фокусе.
6. Ссылки имеют состояния: наведение, посещенная
7. Размеры, цвет, итерльяж, межстрочное и межбуквенное расстояние должны соответствовать дизайну.

4.8 Оптимизация, скорость загрузки.

1. Используйте css3 для градиентов и скруглений
2. Подключайте скрипты в конец страницы.
3. При необходимости рабочий вариант css можно минифицировать, но его копия должна быть удобной для чтения и дальнейшей поддержки.
4. Оптимизируйте код стилей, используйте наследование, удаляйте избыточные свойства и неиспользуемые стили.
5. При проверки инструментом https://developers.google.com/speed/pagespeed/insights/?hl=ru верстка должна соответсвовать требованиям Google не менее 95 % для десктопной и для мобильной версии.