Машина времени: восемь эпох одного сайта

Машина времени — приём курса: один и тот же сайт строят в восьми эпохах веба, от вёрстки таблицами 1996 года до ИИ-конструктора 2025-го.

«Прибытие поезда»

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

На главной странице учебника есть вступление, и оно названо так же. Вы отвечаете на три вопроса о своём проекте, и ваш собственный сайт собирается на глазах: сначала как в 1991 году, потом всё современнее, пока не дойдёт до сегодняшнего дня. Те же ваши слова, только в разных эпохах. Если вы пропустили вступление или хотите посмотреть ещё раз, на главной есть кнопка «Посмотреть вступление ещё раз».

Зачем учиться по истории

Можно было бы начать с сегодняшних инструментов: взять конструктор, написать запрос, получить сайт. Но тогда вы не поймёте, что именно сделал конструктор за вас, и не сможете проверить его работу. Любой инструмент в вебе появился как ответ на чью-то неудобную работу:

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

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

Проверьте себя: почему курс идёт по эпохам, а не начинается с сегодняшних инструментов?

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

Восемь эпох

Курс проходит восемь эпох. У каждой есть свой «способ сделать сайт»:

1. 1996. Разметка и таблицы: страница собирается из таблиц, текст украшается тегом font, посетителей считает картинка-счётчик.
2. 2005. Стили вынесены в отдельный файл, плавающие блоки, глянец и скруглённые углы: «веб 2.0».
3. 2010. WordPress: готовая тема, плагины, редактор для владельца сайта.
4. 2014. Адаптивная вёрстка: один сайт перестраивается под любой экран, сначала телефон.
5. 2019. Генератор статических сайтов: тексты лежат в Markdown, сайт собирается командой.
6. 2022. Headless CMS и Jamstack: содержимое хранится отдельно и приходит на сайт по запросу.
7. 2025. ИИ-конструктор: вы описываете сайт словами, а он его собирает.
8. Следующая. Бриф и интервью: Искин задаёт вопросы и строит по ответам сайт и сервис.

Между ними были и другие эпохи: заставки на Flash в 2000-м, «мобильные версии» отдельным адресом, конструкторы вроде Tilda. Мы коснёмся их там, где они объясняют следующий шаг.

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

Эпоха: 199119962000200520142025

Собираю страницы…

1991. Чистый HTML, написанный вручную: заголовки, абзацы, ссылки.

Проверьте себя: чем ИИ-конструктор 2025 года отличается от WordPress 2010 года?

В WordPress вы выбираете готовую тему и наполняете её. В ИИ-конструкторе вы описываете сайт словами, и он собирается по описанию сразу, без выбора шаблона.

Что остаётся неизменным

Посмотрите на схему внимательно. Страница 1991 года и страница 2025 года выглядят совершенно по-разному, но говорят одно и то же:

• Кто вы или что за идея.
• Для кого этот сайт.
• Что посетитель должен сделать: позвонить, записаться, купить, вступить, прочитать.

Эти три фразы и есть содержание сайта. Всё остальное, цвета, шрифты, анимации, технологии, это способ показать содержание. Он меняется каждые несколько лет, а содержание остаётся.

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

Проверьте себя: что из трёх фраз определяет, какая кнопка будет главной на странице?

Третья: что посетитель должен сделать. Главная кнопка и есть это действие.

Что было не так с каждой эпохой

У каждой эпохи был свой недостаток, и именно он породил следующую. В следующих частях у каждой эпохи будет страница «что с ней было не так»: что устарело и что до сих пор верно. Например, таблицы для раскладки плохи, а вот привычка начинать страницу с одного ясного заголовка идёт ещё с 1991 года и никуда не делась.

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

Сделайте сейчас

1. Если вы ещё не проходили вступление, пройдите его на главной странице. Если проходили, нажмите «Посмотреть вступление ещё раз».
2. Ответьте на три вопроса так, как вы ответили бы клиенту или другу: кто вы, для кого и что должен сделать посетитель.
3. Откройте настройки и проверьте, что в полях «Кто вы, или что за идея» и «Для кого сайт» стоят ваши слова. Подправьте, если нужно: они пойдут во все следующие уроки.
4. Нажмите «Завершить урок».

Бриф целиком, с разделами, содержимым, языками и тоном, вы составите в четвёртом уроке этой части. Пока достаточно трёх фраз.