Если вам пришла идея создания сайта компании или сайта-визитки, то перед вами возникает следующий вопрос: "Как сделать и с чего начать?". Существует два пути: либо тратить массу времени на изучение HTML, CSS и прочих языков программирования, либо довериться профессионалам и заказать проект у них.

Независимо от того, какой выбран путь, вам необходимо знать как происходит создание сайта. В данной статье мы рассмотрим базовые понятия сайтостроения, а так же познакомимся с работой специалистов, которые создают веб-сайты.

Техническое задание

Создание сайта всегда начинается с составления и утверждения технического задания (ТЗ). Именно его в качестве плана нужно использовать при дальнейшей работе, поэтому необходимо тщательно проработать все пункты задания. Примерный макет может выглядеть так:

• Тип сайта
• Род деятельности фирмы
• Подробное описание главной и второстепенных страниц
• Текстовая и графическая информация
• Сроки выполнения

А также заполнение брифа, пример можно скачать по ссылке: Бриф

Работа дизайнера

После окончательного согласования нюансов и финансовой составляющей технического задания, проект обрабатывается специалистами и отправляется дизайнеру.

Веб-дизайнер – специалист, занимающийся обрисовкой проекта в графических редакторах. Эта работа может производиться в таких программах как Adobe Photoshop, GIMP, CorelDraw – суть остается одна и та же, в не зависимости от используемого программного обеспечения.

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

Необходимо знать! Если макет сделан по неправильному техническому заданию, то все правки всегда проводятся за счет клиента.

Работа верстальщика

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

Верстальщик – специалист, занимающийся процессом конвертации графического макета в исходный код. Другими словами, из картинки происходит процесс преображения в веб-сайт. На данном этапе необходимо логическое мышление, знание HTML и CSS. Что же это такое?

HTML – это язык гипертекстовой разметки, на нем построены все существующие сайта в сети интернет. Путем обработки html-кода браузеры преобразуют этот язык в элементы, которые привычно воспринимаются пользователем как веб-сайт со всеми составляющими его элементами.

С каждым годом HTML улучшается в целях удобства работы с ним, а так же в связи с развитием возможностей построения веб-сайтов. В связи с этими улучшениями некоторые браузеры могут некорректно отображать содержимое новых сайтов.

Кроссбраузерность – способность веб-ресурса одинаково корректно отображаться и сохранять задуманный разработчиками функционала на браузерах старых версий. Это либо не обновленные версии браузеров Google Chrome и Mozilla Firefox, либо морально устаревающие браузеры, которые имеют ограниченный функционал по сравнению с первыми. Самый яркий пример это Internet Explorer, также последние годы практически перестал пользовать спросом Opera или Safari для Windows.

CSS – язык разметки, описывающий как будет выглядеть документ. Если сравнить HTML и CSS, то первый это набор кирпичиков, из которых будет построен сайт. CSS это так, как эти кирпичики будут располагаться, под каким углом и какой высоты получится строение.

Работа копирайтера

Уже разработан дизайн, все сделано так, как было описано в техническом задании, но нет текстовой информации (или практически нет). Как правило, заказчики предоставляют исполнителям некорректные для дальнейшего продвижения текстовые материалы. Стоит помнить, что чем выше уникальность сайта, тем большее место он будет занимать в выдаче поисковой системы.

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

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

Работа программиста

Перед глазами предстает уже сайт во всей его красе и вроде бы он уже готов, но это лишь видимость. Слайдер не работает, форма отправки сообщений не отправляет нужные данный, вход в личный кабинет не активен, и так далее. Если сказать в двух словах, то программная часть не работает. И здесь приступает к своей работе еще один специалист (может быть и несколько, в зависимости от сложности проекта).

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

Без специалиста в области PHP, Java, Python и прочих сценарных языков, работа сайта напоминала бы обыкновенные обои на стенах – красиво, но не функционально.

Размещение проекта на сервере

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

Системный администратор – специалист, который занимается настройкой сервера и корректным размещением сайта в сети. Сервер это то место, где будут храниться все материалы вашего ресурса, начиная от текстов, заканчивая изображениями. Поэтому не следует забывать о лояльности клиентов, ведь чем быстрее будет загружаться контент веб-сайта, тем приятнее им будет находиться у вас.

В задачи администратора входит оптимизация серверной части и ее настройки под конкретный проект, ведь при использовании различных сценарных языков деятельность сервера может быть нарушена при не должной настройке. Так же, чем быстрее отклик вашего сервера, тем лучше станут ранжировать ваш проект поисковые системы Яндекс, Google и другие, т.к. для них важна оптимизация сервера и скорость доступа к ресурсу.

Выводы

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

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

Материал подготовлен: Денис Васильченко