Инструкция по созданию Интернет-магазина. Часть 2. Верстка


Похожие статьи (10)
Инструкция по созданию Интернет-магазина. Часть 2.  Верстка
Инструкция по созданию Интернет-магазина. Часть 2. Верстка
Заказ HTML-верстки это второй этап по созданию Вашего Интернет-магазина, причем очень важный. Если верстка будет сделана не правильно, Ваш сайт остаться в аутсайдерах рынка даже с лучшими ценовыми позициями. Верстка это своего рода фундамент Вашего проекта. Итак, Вы имеет на руках макеты в psd-формате от дизайнера. Как выбрать верстальщика? Какое ТЗ ему передать? Сколько стоит его работа? Сколько стоит его работа? 
На 2013 год стоимость качественной верстки составляет 1000 руб за один макет на рынке фрилансе. Если Вам выставляют счет на большую сумму, можете смело отказываться, так как есть дешевле.

Требования для верстальщика

Какое ТЗ ему передать? Обязательными пунктами ТЗ на HTML-верстку должно быть: 

1. Кроссбраузерная вёрстка сайта. 
Кроссбраузерностью — называют способность сайта отображать информацию одинаково в любом браузере. Конечно, нет никакой необходимости делать верстку абсолютно под все браузеры, как правило, достаточно корректного отображения в нескольких наиболее популярных, таких как: Opera 9+, Mozilla FireFox3+, Google Chrome 1+, Internet Explorer 6+ («+» значит от указанной версии и выше). Порой бывает, что добиться идентичного отображения в разных браузерах весьма сложно, в таком случае лучше отказаться от некоторых эффектов, сохраняя при этом читаемость и функциональные возможности верстки. Взять, к примеру, свойство text-shadow CSS, которое не понимает IE 6, учитывая, что оно используется только как декоративный элемент, можно смело от него отказаться. CSS-HTML валидность вёрстки.
2. Валидность  есть ничто иное, как соответствие стандартам W3C CSS-HTML кодов страницы. Существует специальный онлайн – инструмент, называемый валидатор, который позволяет проверить верстку страницы на валидность:
- validator.w3.org это валидатор HTML;
- jigsaw.w3.org/css-validator соответственно CSS-валидатор; 
Валидатор, во время анализа HTML-страницы, сравнивает код с тем стандартом, который заявлен в doctype (доктайпе). 
Случается, что во время исправления каких-либо багов верстки при помощи хаков могут возникнуть проблемы с валидностью кода. В некоторых случаях на них можно и не обратить внимание, однако лучше использовать условные комментарии, позволяющие подключить отдельные CSS файлы, а от применения хаков отказаться.
3. Семантическая вёрстка страниц. Не стоит путать требование с блочно версткой (на div-ax). На самом деле семантическая верстка это полное соответствие элемента страницы и тега, используемого для верстки данного элемента. Несколько примеров для наглядности:
Картинки следует верстать тегом img, если они информационные и несут смысловую нагрузку, в противном случае надо использовать CSS-свойство background-image.
Контакты компании нужно располагать в теге address.
Навигацию и ненумерованные списки создавать с помощью ul и li, тогда как для нумерованных списков использовать ol и li.
Для аббревиатур предназначен тег abbr.
Для определений данных в тексте - тег dfn, а вот для списка определений используются: dl, dt, dd.
Блоки цитат должны необходимо заключать в blockquote.
Таблицы следует использовать только для того, чтобы выводить табличные данные.
Для заголовков, в зависимости от уровня предназначены такие теги как h1 – h6. 
Дополнительные требования, предъявляемые к вёрстке
Человекопонятный код, то есть код который будет удобно читать (разбирать) другому человеку. Для этого его следует разбивать на блоки, использовать комментарии, классам и идентификаторам присваивать понятные и логичные названия. 
Читаемость текста даже при отсутствии картинок. Для того чтобы добиться, потребуется для блоков кроме background-image, прописывать и background-color, это поможет сделать текст контрастным по отношению к фону, а значит, он будет более читабельным, даже в том случае если не будет картинки.
Минимизация объема, как самого кода, так и количества изображений.

Дата публикации: 30.03.2013 | Теги: Создать Интернет-магазин
Вы можете задать вопрос экспертам Нашего сайта и получить ответ по почте
expert
Комментарии к статье:
нет комментариев
Добавить комментарий
Ваше имя
Текст
Похожие статьи:
Аренда интернет магазина Обзор
Готовый интернет-магазин — купить.
Инструкция по созданию Интернет-магазина. Часть 1. Дизайн
Как создать Интернет магазин бесплатно
Что Вы думаете по этому поводу? Оставьте пожалуйста комментарий!