Часть 2

Четыре стихии

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

Содержание — это, грубо говоря, «полезный груз» веб-страницы, тот текст, который вы видите, разглядывая ее в окошке браузера.

Содержание документа обычно не отделимо или трудно отделимо от его структуры. Структура описывает разные смысловые единицы контента: заголовки, подзаголовки, абзацы текста, списки, определения, цитаты, смысловые выделения и прочее. Если речь идет об одной и той же статье, то заголовок останется заголовком, а абзац — абзацем в любых условиях. (Статья, разумеется, может быть отредактирована; ее структура при этом может претерпеть изменения; может измениться и само содержание — но мы сейчас тут обсуждаем не этот случай.)

Вот представление — уже гораздо более независимая от структурированного содержания категория. Говоря о представлении, мы имеем в виду особенности отображения или воспроизведения контента. Внешний вид веб-страницы на экране монитора настольного компьютера или ноутбука — это одно ее представление. Внешний вид той же самой страницы на маленьком экране мобильного устройства — это уже другое представление. Внешний вид веб-страницы, распечатанной на принтере — ее третье представление. Мы привели некоторые примеры визуальных представлений, а могут быть и другие их виды. Например, воспроизведение текста страницы речевым браузером или какой-либо другой программой синтеза речи относится к аудиальным представлениям этого документа. Незрячие люди пользуются для чтения текстов рельефной азбукой Брайля — так вот, если речь идет о выводе контента веб-страницы на механическую строку Брайля или о печати этого документа на специальном брайлевском принтере, подразумеваются тактильные представления. Ну и так далее.

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

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

Большая тройка технологий

Если говорить о конкретной реализации, то, применительно к большинству веб-страниц, для структурирования контента в современном мире используется HTML (и XHTML — что бы это ни значило — сюда тоже запишем), за управление представлением отвечает CSS, а задачи управления поведением возложены на JavaScript. Это лишь базовые общеупотребительные технологии — очередные три кита, если хотите. Вообще разнообразных технологий, ответственных в той или иной мере за очерченные сферы, конечно же, гораздо больше — но сей вопрос мы обсудим, пожалуй, не в этот раз.

По мере развития HTML, CSS и JavaScript наблюдается смещение границ их сфер влияния.

Лет 15 тому назад для того, чтобы сделать шрифт надписи покрупнее и покрасить буквы красным, любой веб-мастер написал бы прямо в HTML-коде вот что: <font size="+1" color="#ff0000">очень важная надпись</font>. И оказался бы совершенно прав, ибо других способов добиться желаемого не существовало в принципе. Сегодня же за такое сразу выдают чугунную медаль за профнепригодность.

Лет 10 тому назад реализация эффекта «перекатывания» кнопок меню навигации не обходилась без JavaScript. Спецификация CSS2 уже даже была рекомендацией W3C, но это мало кого трогало — в распространенных на тот момент браузерах она толком не работала.

Лет 5 тому назад такую штуку, как изменение расположения и нюансов внешнего вида блоков на странице в зависимости от ширины окна браузера, можно было сделать только при помощи JavaScript. Сегодня уже можно пользоваться для этих целей возможностями Media Queries — одного из модулей CSS3. Пока, правда, осторожненько так, но, думаю, в ближайшие пару лет во всех вменяемых браузерах будет реализована адекватная поддержка этого великолепия.