Заявка на услуги DST
Наш специалист свяжется с вами, обсудит оптимальную стратегию сотрудничества,
поможет сформировать бизнес требования и рассчитает стоимость услуг.
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>.
Сведите к минимуму изображения — всё, что возможно, должно прописываться текстом или кодом, и в последнюю очередь представлено в виде растровых картинок.
Front-end от разработчиков DST global
Напишите нам прямо сейчас, наши специалисты расскажут об услугах и ответят на все ваши вопросы.
Комментарии
Вам может быть интересно
Тема адаптивности сегодня как никогда актуальна, поскольку многие пользователи часто сталкиваются с проблемой невозможности использовать сайты с разных устройств. Если раньше веб-ресурсы создавались д...
JavaScript входит в число самых популярных языков программирования, а фронтенд-р...
Достаточно большое количество задач в верстке сейч...
Семантическая разметка сайта (микроразметка) – это...
Новые комментарии
Учитывая, что качество ранжирования хромает, то параллельно с SEO лучше уделить ...
Курс на Восток — это точно перспективное направление для российского бизнеса и н...
Оптимизация производительности веб-приложений — это не просто задача, а искусств...