Front-end от разработчиков DST global

Вёрстка – это структура всех элементов на странице документа, сайта или другого информационного носителя. Такими элементами могут быть изображения, заголовки, подзаголовки, таблицы, инфографика и сам текст. Изначально понятие вёрстки было применимо к издательской деятельности. Книги, газеты, журналы содержат структурированную информацию. В них есть чёткая сетка, блоки, в которых текст и графические материалы упорядочены таким образом, чтобы максимально облегчить читателю процесс потребления информации и заинтересовать его. Сейчас актуальность вёрстки для издательств сохраняется, но к ним также примкнула и сфера веб-дизайна. В разработке сайтов вёрсткой называется перевод дизайн-макетов в интерактивный, читаемый браузерами вид. То есть, верстальщик пишет код, который формирует из предоставленного графического шаблона «живую» веб-страницу, с элементами которой может работать пользователь.

Разработчики Веб-студии DST Global (dstglobal.ru) рассказывают что в контексте создания сайтов есть два вида разработки:

Back-end — программирование функционала сайта;

Front-end — программирование внешнего отображения и интерактивных элементов сайта.

Вёрстка относится к front-end. Она не отвечает за базовые возможности сайта, например, за регистрацию пользователей, товарную корзину или прочие операции, связанные с вычислениями, внешними и внутренними запросами, хранением и загрузкой данных. Вёрстка правильно располагает все элементы на странице и делает так, чтобы с ними было удобно работать. Поэтому вёрстка сайта – это ответственная задача, требующая внимательности, терпения и постоянного тестирования. Вёрстку веб-страниц невозможно представить без HTML. Если говорить простыми словами, то HTML — это единый стандарт отображения всех элементов веб-страницы. Это язык разметки, с помощью которого браузеры показывают нам порядок, размер, формы и шрифт текста. С его тегами знакомы все, кто занимался созданием сайтов, например:<body> </body> — все содержимое страницы;<h1> </h1> — это обозначение заголовка;<h2> </h2> — подзаголовок;<img> — изображение;<strong> </strong> — жирный шрифт;<a> </a> — ссылка на другой ресурс, но между ними надо поставить атрибут href, который содержит адрес этой ссылки и так далее. К вёрстке предъявляются особые требования и она бывает нескольких видов.

Виды вёрстки

Табличная вёрстка

С неё начинался веб — первые простейшие страницы на одном только HTML в содержали набор таблиц, внутри которых располагался контент. При табличной вёрстке страница поделена на соседствующие друг с другом ячейки. Напоминает стандартную работу с таблицами в Excel. Побочный эффект использования такого подхода состоит в том, что придётся создавать дополнительные таблицы, которые, возможно, останутся пустыми. Например, когда необходимо разместить небольшое изображение и зафиксировать его положение, потребуется создать новую строку и разделить её на два или три столбца, если изображение располагается посреди страницы. Один из них будет содержать изображение, а другие служить «фиксаторами» для него, при этом не имея собственного контента. Из-за этого страница сайта может получиться «тяжелой». А как известно, поисковые системы не любят перегруженные сайты и не так охотно их ранжируют в итоговой выдаче. Однако есть и положительный момент: табличная вёрстка хорошо подходит для резиновой вёрстки, так как при растягивании окна браузера таблица меняется вместе с ним и автоматически подгоняет положение внутренних элементов. Табличная вёрстка создаётся с помощью тега <table>. Он задаёт основные параметры таблицы — длину, ширину и другие. Ниже в иерархии идёт тег <tr>, создающий новую строку, а под ним уже располагаются теги <td>, задающие столбцы.

Блочная вёрстка

Более современный тип вёрстки — блочный. В нём нет необходимости создавать лишние поддерживающие строки или столбцы. Контейнеры с содержимым задаются единственным тегом <div>, точные параметры размеров и расположения которых определяются сразу. Именно поэтому тег <div> — это номер №1 в такой верстке, потому что на его основе можно выделить шапку сайта, категории, отдельные текстовые элементы, логотип и так далее. При этом отдельный блок <div> может содержать в себе отдельные HTML-элементы. Например, <blockquote> служит для выделения цитаты. Если в этом блоке нужны заголовки, то в помощь <h1> </h1> и так далее — важно лишь, чтобы это выглядело удобно для потенциального пользователя. Блочная верстка идет бок о бок с так называемым CSS. С помощью CSS можно менять размеры, цвет, границы, расположение и другие свойства блоков <div>. Например, в HTML-редакторе прописывается <div class=»one»></div>, а его фоновый цвет задаётся background: red. В итоге получится красный блок. А если мы хотим ограничить его размеры 200 пикселями, то напишем так: width: 200px и height: 200px. Блоки выглядят чище, делают код более лёгким и быстрее читаются браузером. Вдобавок поисковые системы лучше распознают блочную вёрстку, что положительно влияет на ранжирование сайта.<div> обеспечивает адаптивный дизайн — это ценится в современных стандартах разработки и юзабилити.

Валидная вёрстка

Валидность вёрстки — широкое понятие, означающее соответствие кода стандарту W3C и корректное отображение сайта на пользовательских устройствах. Валидность обеспечивается соблюдением правил построения кода, его оптимизации, минимизации. Верстальщик должен быть знаком с методологией разработки, чтобы потом не приходилось за ним переделывать. Валидная вёрстка помогает сайту занять более высокие позиции SERM благодаря соответствия алгоритмам чтения сайтов поисковыми роботами. Как минимум, в HTML-коде элементы должны содержаться в соответствующих разделах. Должен быть прописан <!Doctype html>, теги:<html>;<head>;<body>

Признаки правильной вёрстки

Структура страницы составлена в HTML, в то время как стили вынесены в style.css.

В HTML остаются только наименования стилей, присвоенных элементам, но параметры стилям присваиваются в отдельном css.

У хорошего сайта при просмотре кода отображается только вёрстка.

Функциональный код, например, <?php> и часть javascript вынесена также в отдельные классы, недоступные пользователю.

Чистота кода необходима для быстрой проверки ошибок и доработки. Выносите стили и функционал во внешние классы, соблюдайте отступы, не плодите сущности.

Правильная вёрстка сохраняет размеры макета. Часто неопытные веб-дизайнеры сильно выходят за заданные ограничения шаблона, и внешний вид страницы отличается от дизайна. Более того, лишние пиксели могут привести к проблемам с адаптивностью, «поехавшей» вёрстке.

Используйте методологию Яндекса БЭМ. Она позволяет оптимизировать код.

Обязательно соблюдайте кроссбраузерность.

Современная вёрстка должна корректно отображаться в популярных браузерах при всех разрешениях: Chrome, Firefox, Opera, Safari. Это требование всегда есть в технических заданиях.

Используйте заголовки H1, H2, …, H6.Заполняйте атрибуты элементов: <title>, <alt>, <description>.

Сведите к минимуму изображения — всё, что возможно, должно прописываться текстом или кодом, и в последнюю очередь представлено в виде растровых картинок.

Комментарии
RSS
Вам может быть интересно
Тема адаптивности сегодня как никогда актуальна, поскольку многие пользователи часто сталкиваются с проблемой невозможности использовать сайты с разных устройств. Если раньше веб-ресурсы создавались д...
JavaScript входит в число самых популярных языков программирования, а фронтенд-р...
Достаточно большое количество задач в верстке сейч...
Что такое адаптивная верстка сайта и зачем она нуж...
Адаптивный дизайн сайта – это динамический дизайн,...
Мобильная версия сайта — это самостоятельная...
Все мы активно пользуемся смартфонами, планшетами ...
Адаптивный дизайн. Почему это важно?До недавнего в...
Семантическая разметка сайта (микроразметка) – это...
Верстка - один из важнейших факторов юзабилити, от...
В наши дни оптимизация сайта под мобильные телефон...

Новые комментарии

Pagelook достаточно старая Социальная сеть, основное направление развлечения, как я понял она хорошо подойдет тем кто приверженец старого ВК и в свое ...
Pagelook достаточно старая Социальная сеть, основное направление развлечения, как я понял она хорошо подойдет тем кто приверженец старого ВК и в свое ...
Pagelook достаточно старая Социальная сеть, основное направление развлечения, как я понял она хорошо подойдет тем кто приверженец старого ВК и в свое ...
Интересная и на редкость полезная Социальная сеть, а главное как я считаю это то что она тематическая, ничего лишнего

Заявка на услуги DST

Наш специалист свяжется с вами, обсудит оптимальную стратегию сотрудничества,
поможет сформировать бизнес требования и рассчитает стоимость услуг.

Адрес

Россия, Ижевск, ул.Салютовская,
д.1, офис 17

8 495 1985800
Заказать звонок

Режим работы: Пн-Пт 10:00-19:00

info@dstglobal.ru

Задать вопрос по почте

Укажите ваше имя
Укажите ваше email
Укажите ваше телефон