Создание Сайтов и их настройка

Заказчику Что такое верстка

Что такое верстка

Всем привет.

Довольно часто мне приходится сталкиваться с подменой некоторых понятий. Одно из них верстка. Разумеется, я имею ввиду верстку веб-страниц, а не «монтаж полос оригинал-макета» (цитата из вики). Что только не приходилось видеть касаемо верстки:

  • Верстка на (для) wordpress.
  • Верстка на (для) joomla.
  • Верстка на (для) других cms, в том числе самописных.
  • Верстка сайта под ключ. Это когда человек считает, что верстка, это полностью рабочий сайт с полным набором функционала и админкой.

Я считаю, что все это НЕ верно и является искажением или подменой понятия HTML-верстки. Что ж давайте попробуем разобраться что такое верстка? План по данной теме простой и понятный.

  • Что такое создание или разработка сайта
  • Что такое верстка?
  • Что входит в верстку?
  • Что НЕ входит в верстку?
  • Что следует знать и понимать, при заказе верстки?
  • Что в итоге вы должны получить от исполнителя при заказе верстки?

Что такое создание сайта

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

  1. Определение желаемой концепции и целей будущего проекта. И составление технического задания по разработке сайта
  2. Создание дизайн-макета
  3. Верстка по макету
  4. Интеграция или по-простому натяжка верстки на cms — она же панель управления сайтом. Или же написание самописной cms с необходимым функционалом с использованием ранее сделанной верстки. Или размещение верстки на хостинге без cms.
  5. Адаптация под мобильные устройства (При необходимости)
  6. И все это касается только технической стороны разработки сайта, и не охватывает такие темы, как наполнение, продвижение, администрирование и монетизация.

Я сразу хочу отметить, что список сильно сокращен, но этого достаточно для понимания этапов создания сайта. Некоторых этапов может не быть и порядок может быть немного иным, но этап с версткой будет всегда.

 

Из данного списка прекрасно видно, что верстка это всего лишь один шаг к заветной мечте иметь свой сайт. Отсюда можно сделать простой вывод, что понятий, которые можно встретить в сети связанных с cms или версткой под ключ быть не может, но по факту они есть.

Что такое верстка

Дизайн-макет представляет из себя набор изображений и текстов, с которыми взаимодействие возможно только с помощью специальных приложений, таких как фотошоп, фигма, adobe xd и прочими.

Задача верстальщика реализовать возможность взаимодействия с ранее придуманным дизайном с помощью браузера используя HTML и CSS код. То есть верстка — это создание структуры (каркаса) HTML-документа (страницы) с его оформлением на основе предоставленного дизайн-макета. Структура документа определяет с помощью HTML-кода порядок расположения элементов в окне браузера. А оформление структуры определяет размеры элементов и их местоположение в окне браузера, цвета, шрифты и прочее с помощью CSS-кода. Часто в верстке применяется и JS-код, который в свою очередь отвечает за работу всплывающих окон, слайдеров и прочего визуального функционала. Именно верстка предоставит вам возможность увидеть нарисованные страницы непосредственно в браузере, без использования специальных программ.

Если не понятно, попробую сформулировать еще проще на примере постройки дома. Постройка дома невозможна без фундамента и возведения каркаса дома. Если проводить аналогию, то HTML-код отвечает за фундамент и каркас. А CSS-код отвечает за цвета, расположение комнат и окон. Однако, коммуникации, такие как отопление, электричество и водопровод должны выполняться другими специалистами.

Часто заказчик не имеет какого-то багажа знаний в области создания сайтов и это нормально. Именно в этих случаях возникают такие понятия, не совсем правильные, как верстка на wordpress, верстка на bitrix, или же некоторые по ошибке могут полагать, что при заказе верстки, они получат полностью готовый сайт с полным набором функционала. А может и не ошибке.

Как разобраться, что вы должны получить в итоге отдавая макеты верстальщику, а чего не получите? Об этом далее.

В верстку входит

  • Создание файловой структуры будущего сайта. То есть именно на данном этапе будет определенно в каких папках будут находится те или иные файлы, то есть физические данные сайта
  • Непосредственное создание основных файлов для создания и оформления структуры сайта, а именно файлов в формате html, css и js, а также изображений. На самых простых страницах файлы в формате js могут отсутствовать, так как в них нет необходимости.
  • Внедрение различных анимаций, будь то движущиеся снежинки на экране или слайдеры, карусели и прочее. Разумеется, это должно быть обговорено дополнительно с исполнителем, так как некоторые моменты на основе макета могут быть не очевидны. Например, если имеется слайдер, это очевидно, что должен быть слайдер, так как он как правило имеет элементы управления, например, в виде стрелок. А если должна быть кнопка с пульсацией, это может быть не очевидно.
  • Эффекты при наведении или клике на тот или иной элемент. Это должно быть предусмотрено в макете дизайнером, в противном случае такие эффекты в верстке могут отсутствовать.

В верстку НЕ входит

  • Размещение файлов и папок на хостинге. Хостинг — это место для хранения физических данных сайта, то есть файлов и папок, а также баз данных (при необходимости)
  • Рабочий функционал, который связан с работой сайта или обработкой данных, такой как: отправка данных с форм, работа фильтров, поиска, работа с базами данных и прочего
  • Возможность редактирования страниц без редактирования непосредственно файлов. Проще говоря, не залезая в код. Данная возможность будет полностью отсутствовать, так как это уже относится к другому этапу, а именно интеграции верстки на cms

Я очень надеюсь, что представленные выше списки помогут понять, что следует ждать от верстальщика, а чего не стоит.

При заказе верстки важно понимать некоторые моменты

  • Если дополнительно не обговаривать какие-то детали с верстальщиком, в верстке по умолчанию будут присутствовать только те элементы, которые присутствуют в макете. Например, при нажатии на какую-то кнопку, должно появится всплывающее окно, но при этом этого окна нет в самом дизайн-макете, его также не будет и в верстке. Если при наведении на кнопку она должна поменять цвет, но этого нет в макете, разумеется эффект наведения будет отсутствовать и в верстке. Это все легко решается. Или поставить задачу дизайнеру доделать эти моменты. Или сообщить верстальщику о том, что данные элементы отсутствуют в макете, но должны быть в верстке. При этом скорее всего придется сообщить, как должны быть оформлены данные элементы, так как верстальщик ориентируется именно на макет. А при отсутствии элементов остается рассчитывать только на фантазию или же ваши пожелания. Думаю, никто не станет спорить, что лучше сразу озвучить свои пожелания и требования, чтобы при проверке работы не возникало вопросов и спорных моментов.
  • Как я ранее упоминал дизайн-макет состоит из набора изображений и текстов. Важно чтобы в макете все тексты были выполнены именно текстом, а изображения изображениями. Дело в том, что если в макете будет текст, который выполнен в виде изображения, то в верстке он будет выполнен также в виде изображения. Поэтому очень важно на этапе проверки дизайн-макета иметь это ввиду.

Если все ранее сказанное собрать воедино, в итоге вы должны получить от верстальщика архив, который будет содержать папки и файлы в формате html, css и js (если необходимо), а также изображения. Файлы в формате html можно будет открыть в браузере без выхода в интернет и сравнить, как выглядит страница перед глазами и в макете. При этом все анимации, слайдеры, выпадающие окна и прочие визуальные блоки должны работать, если это предусмотрено макетом или обговорено между исполнителем и заказчиком. Тему проверки верстки мы затронем немного позднее.

Хочу добавить, что все выше сказанное, это сугубо мое личное мнение. Если вы считаете, что я в чем-то не прав, добро пожаловать в комментарии.

На этом у меня все. Всем пока.

 

Расскажи друзьям:
Поделись ссылкой:
Комментарии
  1. Настенька

    Михаил прекрасные статьи и лаконичный язык :blush:

    Ответить
  2. Вячеслав

    Доброго времени суток. Очень доволен, что обнаружил этот сайт, на первый взгляд думаю, сайт будет полезен. Михаил, спасибо. Мне 78 лет, пенсии на приобретение курсов не хватает при их большой дороговизне, все что надо ищу в гугле. Михаил, можно обращаться за помощью? Вячеслав, г.Москва

    Ответить
    1. Михаил Веб

      Доброго времени суток.
      Если я не ошибаюсь, я ответил вам по почте.

      Ответить

Нажимая на кнопку "Комментировать" Вы согласшаетесь с условиями политики конфиденциальности

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Навигация по статье