В прошлый раз мы разобрали поэтапно шаги разработки сайта. Сегодня мы уделим особое внимание технической стороне этого процесса, ведь именно от него зависит работоспособность всего сайта.
Выделим несколько этапов:
👉 Вёрстка сайта
После того, как дизайн закончен и утвержден клиентом, в работу вступает верстальщик.
Его задачи:
– подробно изучить структуру всех блоков каждой страницы;
– спрогнозировать пути реализации данной структуры;
– предусмотреть трудности, которые могут возникнуть в процессе вёрстки.
Важно! Внимательно изучить структуру всех блоков дизайна: выявить повторяющиеся элементы, похожие друг на друга и абсолютно разные. Выделение одинаковых блоков поможет в будущем сэкономить не только время на их вёрстку, но и уменьшит количество кода. Можно будет скопировать уже готовый блок в другое место или даже другую страницу, что положительно скажется на скорости сайта в будущем.
Когда подготовительный этап закончен, приступаем к вёрстке. Как правило, вёрстка происходит на локальном сервере с помощью ряда инструментов, таких как Node.js, Gulp и плагинов для них, к примеру: Autoprefixer для кроссбраузерной вёрстки, CSS-minifier для меньшего веса файлов, плагинов конкатенации файлов стилей и скриптов, оптимизации изображений и других, в зависимости от необходимости в рамках данного проекта.
Вёрстка делается с помощью HTML5, CSS3 – по давно уже устоявшимся нормам в web-разработке. В плане функционала выручает Javascript версий ES6+, если проект не требует поддержки в устаревших браузерах.
На последнем этапе вёрстка проверяется на различных устройствах: Яндекс.Браузер, Google Chrome, Opera, Safari на десктопах и Google Chrome, Safari на мобильных устройствах.
👉 Натяжка сайта
Просто сделать вёрстку недостаточно, ведь контент сайта должен редактироваться, динамически выводиться в зависимости от типа страницы на основе имеющейся базы данных. Для этого существует целый ряд CMS, удовлетворяющих различные потребности. Для интернет-магазинов мы используем Bitrix, реже – WordPress. Для лендингов или небольших сайтов-визиток – WordPress.
Каждая CMS имеет свои особенности, которые необходимо учитывать при натяжке.
👉 Программирование форм
Одним из последних этапов создания сайта является программирование форм. Данные из формы должны отправляться на сервер, где они обрабатываются соответствующим образом и сохраняются в базу данных. Как правило, происходит повторная валидация данных, проверка на спам, запись в базу данных, отправка письма администратору сайта и пользователю, заполнившему форму (письмо с прайс-листом или подтверждением регистрации), обработка ошибок, отправка данных в сторонние сервисы.
Чтобы данные отправились на сервер, мы используем Ajax-запросы, так как они не перезагружают страницу, добавляют больше гибкости в обработке данных.
Пример: чтобы не выполнять лишнюю работу с отправкой данных на сервер, валидацией, сохранением в базу и отправкой писем, в WordPress мы используем плагин Contact Form 7, выполняющий большую часть необходимых действий автоматически без программирования. Однако, плагин выводит формы в своей уникальной вёрстке со своими классами и структурой тегов, которые почти всегда не удовлетворяют необходимым требованиям к дизайну. Вот почему важно знать, на какой CMS будет располагаться сайт ещё до того, как начинать вёрстку.
👉 Заключительный этап
После того, как сайт полностью создан, заполнен контентом, необходимо выполнить рекомендации Google PageSpeed по его ускорению.
Четкое и качественное соблюдение всех пунктов, которые мы разобрали в этом и предыдущем посте, позволит разработать сайт, эффективно решающий поставленные задачи.
