Веб-разработка — процесс создания веб-сайта или веб-приложения . Основными этапами процесса являются веб-дизайн , вёрстка страниц , программирование на стороне клиента и сервера, а также конфигурирование веб-сервера .

Этапы разработки веб-сайта

На сегодняшний день существуют несколько этапов разработки веб-сайта:

• Проектирование сайта или веб-приложения (сбор и анализ требований, разработка технического задания , проектирование интерфейсов );
• Разработка креативной концепции сайта;
• Создание дизайн-концепции сайта;
• Создание макетов страниц;
• Создание мультимедиа -объектов;
• Вёрстка страниц и шаблонов ;
• Программирование (разработка функциональных инструментов) или интеграция в систему управления содержимым ( CMS );
• Оптимизация и размещение ^{[ уточнить ]} материалов сайта;
• Тестирование и внесение корректировок;
• Публикация проекта на хостинге ;
• Обслуживание работающего сайта или его программной основы.

В зависимости от текущей задачи, какие-то из этапов могут отсутствовать.

Создание технического задания

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

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

1. Цели и назначение сайта.
2. Аудитория сайта.
3. Технические характеристики.
4. Содержание сайта (структура сайта с подробным описанием элементов и функций каждой страницы).
5. Интерактивные элементы и сервисы (формы обратной связи, поиск на сайте, форум на сайте).
6. Формы (отправки на почту, подписки на рассылку, обратной связи).
7. Система управления содержимым (контентом).
8. Требования к материалам.
9. Перенос на хостинг.

Дизайн основной и типовых страниц сайта

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

HTML-верстка

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

Программирование

Далее готовые HTML-файлы передают программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS — системы управления сайтом. Веб-разработчики часто называют CMS « движком ».
В случае с CMS надо сказать, что сама «CMS» в некотором смысле это готовый сайт, состоящий из заменяемых частей. «Программист» — в данном случае правильно будет назвать его просто специалистом по CMS — должен заменить стандартный шаблон, поставлявшийся с CMS, на оригинальный шаблон. Этот оригинальный шаблон он и должен создать на основе исходного «веб-дизайна».
При программировании сайта специалисту назначаются контрольные точки сроков.

Завершающим этапом разработки сайта является тестирование

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

Размещение сайта в Интернет

Файлы сайта размещают на сервере провайдера ( хостинга ) и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей.

Наполнение контентом и публикация

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

К стандартным текстовым блокам относятся:

• header сайта;
• footer сайта;
• навигационная цепочка, или "хлебные крошки".

Основные элементы текстового блока:

1. заголовки 1, 2 и 3 уровней;
2. изображения;
3. изображения в тексте;
4. галереи;
5. текст;
6. раскрывающийся блок текста, который содержит заголовок;
7. нумерованные и ненумерованные списки;
8. таблицы;
9. файлы для скачивания;
10. видео.

Внутренняя SEO-оптимизация

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

Внешняя SEO-оптимизация

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

Сдача проекта

Заказчик или его доверенное лицо просматривают готовый проект и в случае, если все устраивает, то подписывают документы о сдаче проекта.
Также, на этом этапе производится обучение представителя заказчика навыкам работы в администраторской зоне сайта.

Основные профессии

• Веб-дизайнер
• Юзабилити-инженер
• Верстальщик веб-страниц
• Программист
• Тестировщик
• Поисковый оптимизатор
• Копирайтер (писатель), контент-менеджер

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

См. также

• Вёрстка веб-страниц
• Веб-программирование

Примечания

Литература

• Марко Беллиньясо. = ASP.NET 2.0 Website Programming: Problem - Design - Solution. — М. : , 2007. — С. 640. — ISBN 0-7645-8464-2 .
• Олищук Андрей Владимирович. . — М. : , 2006. — С. . — ISBN 5-8459-0944-9 .
• Александр Дащинский Юрьевич. . — М. : , 2021. — ISBN 978-5-0055-4545-9 .
• Гото Келли, Котлер Эмили. Веб-редизайн, 2-е издание. — СПб. : , 2006. — С. 416. — ISBN 5-93286-082-0 .