Создание сайта с помощью программирования — это не весь проект, а один его этап. Ему предшествуют схема страниц (wireframe), дизайн и вёрстка, после него идут проверка и запуск. Программист пишет логику, которой нет в готовых решениях: личный кабинет, расчёты, обмен данными с другими системами. Ниже разберу, где в проекте начинается код, зачем до него рисуют wireframe, когда нужен framework, а когда хватит CMS. В статье два инструмента: конструктор wireframe и схема, которая показывает, во сколько обходится правка на каждом этапе.
Нужен сайт, где программирование есть только там, где без него никак? Я делаю сайты лично — от схемы страниц до запуска, по договору, с фиксированной ценой и гарантией 12 месяцев. Подробности — на странице создания сайтов.
Тридцать страниц поиска: учебники, обзоры языков и нейросети
По запросу «создание сайта программирования» я разобрал первые 30 результатов. Девять — инструкции «сайт на HTML, PHP или Python своими руками». Восемь — обзоры «что такое веб-разработка и какие бывают языки». Четыре — курсы и подборки обучающих материалов, три — нейросети, генерирующие код, ещё три — инструменты и онлайн-среды разработки. Две страницы описывают процесс создания сайта целиком, одна страница не открылась. И только в одном материале программирование показано как этап проекта, а не как предмет изучения.
О том, на каких языках пишут сайты и как написать первый код, у меня уже есть статьи — ссылки в конце. Здесь — взгляд со стороны проекта: где программирование нужно, где его можно избежать и что должно быть готово до того, как программист откроет редактор.
Создание сайта: этап «программирование» и что до него
Когда заказчики говорят «программирование сайта», обычно имеют в виду всю разработку. Но внутри неё разные работы, и это важно для цены.
- Вёрстка — перевод макета в HTML и CSS. Страница выглядит как надо, но ничего не «делает».
- Настройка CMS — установка готовой системы, модулей, шаблона. Логика уже написана кем-то, её настраивают, а не пишут.
- Программирование — свой код на JavaScript, PHP, Python: обработка форм, расчёты, личный кабинет, выгрузки, обмен с 1С или CRM через API.
На сайте услуг из десяти страниц своего кода может быть совсем немного — формы, калькулятор, мелкие доработки. На портале с личными кабинетами программирование — основная часть работы. Создание сайта через язык программирования с нуля оправдано тогда, когда готовых решений под задачу нет.
Wireframe для создания сайта: схема до кода
Wireframe — это схема страницы серыми прямоугольниками: где шапка, где первый экран, где форма. Без цветов, шрифтов и картинок. Его рисуют до дизайна, потому что на этом этапе передвинуть блок — дело секунд, а после программирования то же решение может стоить дня работы.
Wireframe в создании сайта отвечает на три вопроса: какие блоки есть на странице, в каком порядке и как они перестраиваются на телефоне. Попробуйте собрать схему сами: добавляйте блоки, двигайте их и переключайте вид «компьютер» и «телефон».
Добавить блок:
Обратите внимание, как меняется страница в режиме «телефон»: три колонки преимуществ встают друг под друга, и форма, которая на компьютере была на втором экране, на телефоне уезжает намного ниже. Это и есть главная польза wireframe для создания сайта — увидеть такие вещи до того, как над ними поработали дизайнер, верстальщик и программист.
Совет вебмастера: wireframe не обязан быть красивым. Лист бумаги, доска, Figma, любой сервис схем — неважно. Важно, чтобы его увидел заказчик и сказал «да, блоки и порядок такие». Это решение потом фиксируется в ТЗ.
Сколько стоит правка на каждом этапе
Правило, которое знает любой разработчик: чем позже вносится изменение, тем больше работы приходится переделывать. Каждый этап опирается на предыдущий, и правка в схеме тянет за собой макет, вёрстку, код и проверку. Выберите правку и этап, на котором о ней вспомнили, — схема покажет, какие слои работы затронуты.
Какую правку вносим?
На каком этапе проекта?
Поставьте «Добавить фильтр по цене в каталог» и переключите этап с «Wireframe» на «После запуска»: на первом этапе это одна строчка в схеме, на последнем — шесть слоёв переделки. Поэтому создание сайта с программированием я всегда начинаю со схемы и списка функций, а не с выбора языка. На этапе схемы переделка — это стёртый прямоугольник и пять минут разговора; после запуска — новая задача программисту, повторная проверка и обновлённая инструкция.
Framework для создания сайта: когда он нужен
Framework (фреймворк) — это каркас для программиста: готовые решения для типовых задач (маршруты адресов, работа с базой, формы, авторизация, защита от типовых атак), на которых пишется своя логика. Laravel и Symfony для PHP, Django для Python, Next.js для JavaScript — самые известные примеры. Фреймворк не даёт готового сайта, как CMS: админку, страницы и разделы программист собирает сам.
❌ Фреймворк ради фреймворка
Сайт услуг на 15 страниц на Laravel: каждую правку текста приходится делать через программиста или писать для этого админку. Дорого на старте и в поддержке.
✅ Фреймворк по задаче
Личный кабинет с расписанием, оплатой и уведомлениями, обмен с CRM по API, своя логика расчёта цен. Готовые CMS в такие задачи упираются, а фреймворк даёт порядок в коде.
Framework для создания сайтов-сервисов — разумный выбор. Для сайта, который в основном показывает информацию, CMS почти всегда проще и дешевле: у неё уже есть админка, которой владелец сможет пользоваться без программиста.
Совет вебмастера: спросите исполнителя заранее, кто будет поддерживать сайт на фреймворке через два-три года. У популярных фреймворков регулярно выходят новые версии, старые перестают получать исправления безопасности, и код приходится обновлять. С CMS ситуация похожая, но обновление там обычно сводится к нажатию кнопки и проверке модулей. С фреймворком это работа программиста, которую стоит заложить в бюджет поддержки — от 10 000 ₽ в месяц, если сайт активно развивается.
И ещё одно различие, о котором редко говорят: сайт на распространённой CMS может подхватить другой вебмастер, если прежний пропал. Сайт на фреймворке со своей логикой без документации разобрать гораздо сложнее. Поэтому чем больше в проекте своего кода, тем важнее, чтобы он лежал в репозитории, а у владельца были доступы и инструкция.
Как схема превращается в задачи программиста
Создание сайта с помощью языка программирования начинается не с кода, а с перевода схемы и ТЗ на язык задач. Я делаю это в таком порядке — он одинаково работает и для небольшой доработки, и для портала.
- Список функций. Из wireframe выписывается всё, что на странице что-то делает: форма, фильтр, кнопка «в корзину», личный кабинет. Блоки, которые только показывают информацию, программирования не требуют.
- Модель данных. Какие сущности хранит сайт и как они связаны: товар, категория, заказ, пользователь, заявка. Ошибка здесь — самая дорогая, потому что на модель данных опирается весь остальной код.
- Сценарии. Каждая функция описывается как последовательность действий: «посетитель выбирает дату, видит свободное время, оставляет телефон, получает подтверждение». По сценариям потом и проверяют работу.
- Оценка по задачам. Сценарии разбиваются на задачи по несколько часов. Только после этого можно честно назвать срок и цену программирования, а не угадывать их по общему описанию.
- Проверка по сценариям. Каждый сценарий проходят руками на компьютере и телефоне, с правильными и неправильными данными: пустая форма, буквы в поле телефона, двойное нажатие на кнопку.
- Инструкция для владельца. Что и где менять в админке, куда приходят заявки, что делать, если что-то сломалось. Без неё программирование сайта заканчивается зависимостью от одного человека.
Модель данных — раньше дизайна. Цвет кнопки можно поменять за минуту и после запуска. А если в каталоге товар не может принадлежать двум категориям, потому что так заложено в базе, исправление затронет и код, и уже заполненные данные.
Сайт по программированию: что ему нужно
Отдельный случай — создание сайта по программированию: блога разработчика, курса, справочника. Здесь программирования в самом сайте может быть немного, зато требования к оформлению кода особые.
- Подсветка синтаксиса для нужных языков и кнопка «скопировать» у каждого фрагмента кода.
- Код не ломается на телефоне — длинные строки прокручиваются внутри блока, а не растягивают страницу.
- Навигация по урокам: оглавление, «предыдущий» и «следующий», отметка пройденного.
- Поиск по названиям функций и ошибкам — именно так ищут программисты.
- Даты и версии: рядом со статьёй — для какой версии языка или библиотеки она написана.
Программирование: создание своего сайта, если делаете сами
Если вы учитесь и хотите создать свой сайт с помощью программирования, путь проверенный: HTML и CSS — сначала, JavaScript — для интерактива, затем серверный язык (PHP или Python) и SQL для базы данных. Первый работающий сайт на чистом коде даёт понимание, которое не даст ни один конструктор. Но для реального бизнеса делать сайт с нуля без опыта — долгий путь: формы, безопасность, резервные копии и обновления потребуют времени, которое разумнее вложить в сам бизнес.
- Начните со схемы — даже для учебного проекта. Wireframe экономит часы переделок.
- Один язык за раз. Создание сайтов на языке программирования начинается с одного серверного языка, а не со сравнения пяти.
- Код под контролем версий. Git с первого дня: он позволяет откатить неудачную правку.
- Безопасность с первой формы. Подготовленные запросы к базе, экранирование вывода, проверка данных на сервере, а не только в браузере.
Когда сайту действительно нужен программист
- Личный кабинет со своей логикой: записи, заказы, документы, роли пользователей.
- Интеграции: 1С, CRM, платёжные системы, службы доставки, складские программы через API.
- Калькуляторы и конфигураторы со сложными правилами расчёта.
- Каталог с нестандартными фильтрами, выгрузками и импортом из файлов поставщиков.
- Сервисы, где сайт — это продукт: бронирование, маркетплейс, онлайн-обучение.
Если ни одного пункта нет — скорее всего, хватит CMS с настройкой: лендинг от 15 000 ₽, визитка — 25 000 ₽, корпоративный сайт — 40 000 ₽. Интернет-магазин на OpenCart — от 60 000 ₽, портал со своей логикой — от 120 000 ₽: там программирование становится основной частью работы.
Как ищут: короткие ответы
- «сайт для создания программирования» — обычно ищут онлайн-среды, где можно писать код прямо в браузере: CodePen, JSFiddle, онлайн-IDE. Для обучения удобно, для рабочего сайта — нет.
- «создание сайта по программированию» — то есть сайта о программировании: блог, курс, справочник. Ему нужны подсветка кода, удобная навигация по урокам и поиск.
- «создания сайта через программирования» и «создание сайта через язык программирования» — оправдано, когда нужна своя логика; для информационного сайта хватит CMS.
- «создание сайтов на языку программирования» — чаще всего это PHP или JavaScript на сервере, Python — реже.
- «frame создание сайтов» — если речь о HTML-фреймах
<frame>и<frameset>, они устарели и в HTML5 не используются; для встраивания чужого содержимого есть<iframe>. Если о фреймворках — см. раздел выше. - «framework создание сайтов» — фреймворк выбирают под язык и задачу: Laravel или Symfony для PHP, Django для Python, Next.js для JavaScript; для сайта-визитки он избыточен.
- «wireframe создание сайта» — схема страниц серыми блоками до дизайна; попробуйте конструктор выше.
Ко мне приходят с вопросом «на каком языке будем писать?» раньше, чем с вопросом «что сайт должен делать?». А язык — последнее, о чём стоит думать. Сначала схема и список функций. Часто после этого выясняется, что писать почти ничего не нужно, и проект становится в разы дешевле.
— Александр Рожков
Нужен сайт, где начинают со схемы, а код пишут только там, где без него никак? Условия — на странице создания сайтов, ориентир цены — в калькуляторе.
Итог
Программирование — один из этапов создания сайта, а не синоним разработки. До него идут wireframe, дизайн и вёрстка, после — проверка и запуск, и чем раньше принято решение, тем дешевле его изменить. Своего кода нужно столько, сколько своей логики: сайту услуг хватит CMS с настройкой, личному кабинету или сервису нужен фреймворк, а разработка совсем с нуля оправдана редко. Начинайте со схемы и списка функций — язык и технология выбираются под них.
Если нужен сайт с программированием там, где оно действительно нужно, — условия на странице создания сайтов.
Опрос
Как вы делали свой сайт?
Проголосуйте, чтобы увидеть, как думают другие читатели
Часто задаваемые вопросы
Что входит в этап программирования сайта?
Логика, которой нет в готовых решениях: обработка форм, расчёты, личный кабинет, работа с базой данных, обмен с 1С, CRM и платёжными системами.
Вёрстка — это программирование?
В строгом смысле нет: HTML и CSS описывают, как выглядит страница. Программирование — это то, что сайт делает: считает, хранит, отправляет.
Что такое wireframe?
Схема страницы серыми блоками без цветов и картинок: какие блоки есть, в каком порядке и как перестраиваются на телефоне. Её рисуют до дизайна.
Что такое framework и чем он отличается от CMS?
Фреймворк — каркас для программиста с готовыми решениями типовых задач. CMS — готовая система управления сайтом с админкой. На фреймворке свою логику пишут, CMS в основном настраивают.
Нужен ли фреймворк для сайта услуг?
Обычно нет: CMS даёт админку и готовые функции дешевле. Фреймворк оправдан для личных кабинетов, сервисов и сложных интеграций.
На каком языке программирования делают сайты?
Вёрстка — HTML и CSS, интерактив в браузере — JavaScript, логика на сервере — чаще всего PHP, а также JavaScript и Python; данные хранятся в базе с запросами на SQL.
Почему правки в конце проекта стоят дороже?
Каждый этап опирается на предыдущий: правка в схеме после программирования тянет за собой переделку макета, вёрстки, кода и повторную проверку.
