Задачи читателя и устройство длинного урока

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

В серии «Дизайн учебного сайта» вы разработаете оформление длинной статьи на основе ProfessorWeb. Сохраним тёмную палитру, фиолетовые акценты и зелёные ссылки, но сделаем расположение элементов последовательным. Для работы достаточно понимать HTML и основные правила CSS. Генератор Markdown уже предоставил разметку; задача этой серии — её визуальная организация.

Что нужно увидеть в существующем материале

Рассмотрим старый урок «Запросы LINQ to XML». В его локальном исходнике есть последовательное объяснение, несколько листингов, изображения результатов и большой пример с XML. Для дизайнера это содержательная нагрузка: текст чередуется с элементами разной ширины и высоты. Такой материал полезнее короткого демонстрационного абзаца, который хорошо выглядит почти при любых настройках.

При чтении сначала назовите действия, для которых нужен каждый фрагмент. Введение объясняет место темы в курсе. Заголовок помогает вернуться к определённой операции. Листинг нужен, чтобы сопоставить синтаксис с пояснением. Изображение показывает результат. Если все эти блоки оформить одинаковыми карточками, внешнее единообразие появится, но различия учебных ролей станут слабее.

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

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

При составлении реестра полезно отличать обязательное содержание от необязательного окружения. Объяснение результата листинга относится к уроку: его нельзя удалить, чтобы сократить страницу. Предложение прочитать другую тему относится к навигации: его можно переместить ниже или сделать компактнее. Эта разница позволяет обновлять внешний вид без потери учебной логики. Если же вы пока не понимаете назначение блока, сохраните его и отметьте вопрос для автора, вместо того чтобы объявлять лишним по одному впечатлению.

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

Готовая разметка reading-lab

Рабочий стенд называется reading-lab. Его полный HTML docs/tutorial-series/examples/article-design/reading-lab/index.html и начальный CSS docs/tutorial-series/examples/article-design/reading-lab/base.css сохранены вместе с серией. Скопируйте эти два файла в отдельную учебную папку с теми же именами. Документ можно открыть в браузере как обычный HTML; новых библиотек и сборщика для основного блока не требуется.

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

Основная структура уже задана. Следующий фрагмент показывает её связь, а не заменяет полный файл:

<div class="lab-layout">
  <article class="lab-article">
    <header class="lab-heading">...</header>
    <div class="lab-prose">...</div>
    <nav class="lab-pager">...</nav>
  </article>
  <aside class="lab-aside">
    <nav class="lab-toc">...</nav>
  </aside>
</div>

Обёртка lab-article объединяет один материал, lab-prose содержит собственно объяснение, а lab-aside хранит оглавление. Многоточия в этом обзорном фрагменте обозначают уже предоставленное содержимое. Не вставляйте их вместо текста страницы. Все классы полного документа определены в base.css; следующие уроки будут уточнять их свойства, сохраняя имена.

Три читательских маршрута

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

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

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

Не нужно измерять все маршруты секундомером на первом занятии. Сначала сформулируйте действие и признак завершения: «нашёл раздел сравнения», «увидел окончание строки кода», «понял, куда ведёт переход». Такие признаки позволят обсуждать изменения предметно. Оценка «выглядит современно» останется полезным впечатлением, но не заменит объяснение поведения страницы.

Что сохраняем при обновлении

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

Содержимое старого урока и его адрес не становятся материалом для свободной перестановки. Пример на LINQ должен оставаться рядом со своим пояснением; изображение результата — относиться к соответствующему листингу. Если ради красивой колонки вы удалили трудный пример, задача оформления не решена. В уроке совместимости мы отдельно разберём старые HTML-обёртки без переписывания учебного смысла.

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