Приложения

Два приложения к руководству. Первое — чек-лист «Сайт готов»: что должно быть на месте, чтобы сайт считался завершённым. Второе — «Что в планах»: что сознательно отложено и почему.

Приложение A. Чек-лист «Сайт готов»

Полный список того, что сделано по сайту. Проверяется по трём уровням: файлы, страницы, служебное.

A.1. Файлы в корне сайта

HTML-страницы:
  [x] index.html           главная, эталон структуры
  [x] services.html        услуги
  [x] about.html           обо мне
  [x] projects.html        кейсы
  [x] offer.html           коммерческое предложение
  [x] contacts.html        контакты
  [x] privacy.html         политика 152-ФЗ
  [x] 404.html             страница ошибки

CSS:
  [x] style.css            основные стили (10 секций)
  [x] scroll-top.css       кнопка «Наверх»

JavaScript:
  [x] script.js            бургер, активная ссылка, PDF
  [x] scroll-top.js        логика кнопки «Наверх»

Служебное:
  [x] .htaccess            SSI + ErrorDocument 404
  [x] robots.txt           инструкции роботам
  [x] sitemap.xml          карта сайта, 7 адресов
  [x] og-image.png         превью для соцсетей
  [x] google-site-verification.html
  [x] yandex-verification.html

A.2. Папка partials/

[x] partials/head-links.html   фавикон + og + стили
[x] partials/header.html       логотип «Е» + бургер
[x] partials/nav.html          меню (6 пунктов)
[x] partials/footer.html       реквизиты + Метрика

A.3. Каждая страница — что должно быть внутри

В head:
  [ ] meta charset="UTF-8"
  [ ] meta viewport
  [ ] title — уникальный
  [ ] meta description — уникальный
  [ ] og:title, og:description, og:url — уникальные
  [ ] SSI-инклюд head-links.html

В body:
  [ ] div.container — обёртка
  [ ] header.header с двумя SSI-инклюдами (header, nav)
  [ ] уникальное содержимое — секции
  [ ] SSI-инклюд footer.html — внутри .container

После .container:
  [ ] button#scrollToTopBtn с SVG-стрелкой
  [ ] script src="/script.js"
  [ ] script src="/scroll-top.js"

A.4. Работоспособность — что проверить в браузере

Навигация:
  [ ] SSI собирает страницы — шапка, меню, футер видны
  [ ] Активная ссылка в меню подсвечивается сама
  [ ] Бургер работает на мобильном
  [ ] Кнопка «Наверх» появляется после прокрутки
  [ ] Страница 404 открывается по несуществующему адресу

Адаптив (на ширине ≤ 768px):
  [ ] Бургер виден, меню скрыто
  [ ] Все сетки в одну колонку
  [ ] Футер вертикальный, текст по центру
  [ ] Кнопка «Наверх» уменьшена

SEO:
  [ ] Заголовки вкладок уникальны
  [ ] robots.txt открывается как текст
  [ ] sitemap.xml открывается как XML
  [ ] og-image показывается при шаринге

Аналитика:
  [ ] Метрика считает визиты (проверить в кабинете)
  [ ] Счётчик только один — нет дублей

A.5. Подача в поисковые сервисы

[x] Яндекс.Вебмастер — сайт добавлен, верификация пройдена
[x] Google Search Console — сайт добавлен, верификация пройдена
[x] sitemap.xml отправлен в оба сервиса
[x] robots.txt проверен на валидность
[ ] Отслеживание позиций по ключевым запросам — в работе

Приложение B. Что в планах

Список того, что сознательно отложено. Причины — в скобках.

B.1. Вернуть блог

Архивные файлы blog.html и article-template.html — готовы, лежат в архиве. Стили для блога тоже на месте: Секции 7 и 8 в style.css описаны, но не используются. Модуль 3 в script.js (кнопки «Скачать PDF» / «Распечатать») — тоже готов, но не задействован.

1. Восстановить два файла из архива:
   - blog.html
   - article-template.html

2. Добавить пункт «Блог» в partials/nav.html

3. Восстановить первую статью — она послужит образцом
   для остальных

4. При необходимости — подключить html2pdf.js
   на странице статьи (для кнопки «Скачать PDF»)

5. Обновить sitemap.xml — добавить URL статей

Стили и скрипты уже готовы — трогать их не нужно.

B.2. Вернуть видео

Ранее использовался YouTube. Из-за замедления и блокировок в РФ — перевод на RuTube. Архивные файлы video.html и сопутствующие video.* — в архиве.

1. Восстановить video.html из архива

2. Заменить встроенные плееры YouTube на RuTube
   (iframe или JavaScript-виджет)

3. Добавить пункт «Видео» в partials/nav.html

4. Обновить sitemap.xml

ВАЖНО: если YouTube-плееры останутся в коде —
они не загрузятся у пользователей из РФ.

B.3. Возможные архитектурные изменения

Сейчас сайт — статический HTML + SSI. Это работает, но имеет ограничения: блог неудобно вести вручную (каждая статья — отдельный HTML). Если объём контента вырастет — возможен переход на генератор статических сайтов.

Eleventy (11ty):
  + простой, JS-ориентированный
  + хорошо переносит существующий HTML
  + не требует изучать новый язык
  - нужен Node.js на машине разработчика

Hugo:
  + очень быстрый
  + один бинарник, ничего не нужно ставить
  + удобен для больших блогов
  - шаблоны на Go — нужен порог входа

Астро:
  + современный, гибкий
  + хорошие результаты по SEO
  - сложнее для понимания, если раньше не работал
    с фреймворками

Решение отложено: пока объём контента невелик,
SSI + HTML справляются быстрее и без сборки.

B.4. Возможные мелкие улучшения сайта

[ ] favicon.svg, favicon-32.png, apple-touch-icon.png —
    ссылки есть в head-links.html, файлы не загружены.
    Либо добавить файлы, либо убрать ссылки.

[ ] Форма обратной связи на contacts.html —
    сейчас только tel: и mailto:.
    Понадобится серверная обработка или сторонний сервис.

[ ] Страница «Благодарность» — на случай,
    если появится форма.

[ ] Расширение страницы projects.html —
    сейчас три кейса. При накоплении материала —
    разделить на категории.

[ ] Добавить микроразметку Schema.org на страницы
    (Organization, Person, Service) —
    для расширенного вида в выдаче.

Что сознательно НЕ делаем

Некоторые вещи обсуждались и были отклонены — не «забыли», а отказались осознанно.

Google Fonts
  Причина: подгрузка шрифтов вызывает «дёргание»
  текста при загрузке. Заменено системным стеком.

Prism.js (подсветка синтаксиса в учебнике)
  Причина: CDN cdnjs.cloudflare.com блокируется в РФ.
  Отказались, код оставили без подсветки.

realfavicongenerator.net
  Причина: сервис блокируется в РФ.
  Фавикон сделан вручную — SVG с data-URI.

БЭМ, OOCSS, Atomic CSS
  Причина: проект маленький, методология — оверхед.
  Классы простые: .card, .btn, .nav.

Sass / Less / препроцессоры
  Причина: чистый CSS вечен, компилятор устареет.

Фреймворки (Vue, React, Svelte)
  Причина: сайт из 8 страниц, фреймворк не нужен.
  HTML + SSI справляются быстрее и проще.

CDN для style.css и script.js
  Причина: один сервер, одна точка отказа.
  Локальные файлы работают быстрее и надёжнее.

Схема: состояние проекта

СДЕЛАНО                          ОТЛОЖЕНО
------------------------         ------------------------
8 HTML-страниц сайта             Блог (2 файла в архиве)
10 секций в style.css            Видео на RuTube (архив)
2 CSS-файла                      Формы обратной связи
2 JS-файла                       Микроразметка Schema.org
4 partials                       Генератор сайтов (11ty/Hugo)
robots.txt, sitemap.xml
og-image, favicon
Яндекс.Метрика
Подача в 2 поисковых сервиса
14 разделов учебника
3 partials учебника

Итог

• Сайт готов. Все 8 страниц, все стили, скрипты, partials, служебное — на месте.
• Учебник готов. 20 разделов + приложения описывают каждую часть проекта.
• Подача в поиске — Яндекс.Вебмастер, Google Search Console, sitemap, robots.
• Аналитика — Яндекс.Метрика, единый счётчик.
• Блог и видео — в архиве. Стили и скрипты для блога уже в style.css и script.js. При возврате — минимум работы.
• Архитектурные изменения — возможны, но пока не нужны. Порог входа в SSI ниже, чем в генераторы.
• Отклонённые решения — зафиксированы: Google Fonts, Prism.js, БЭМ, фреймворки, CDN.

Это конец технического руководства. Весь проект — от идеи до запуска и подачи в поисковые сервисы — описан.