Контент vs. дизайн

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=10 WIDTH=80%> <TR VALIGN=TOP> <TD><IMG SRC="../img/cover_kirsanov.jpg" WIDTH="100" HEIGHT="132" BORDER="0" ALT=""></TD> <TD><FONT FACE="Verdana" SIZE="2"><B>Веб-дизайн</B></FONT><BR> <FONT FACE="Verdana" SIZE="1"><I>Д. Кирсанов</I><BR> Книга написана замечательно. В каждой главе видна тщательная работа с материалом и столь же тщательный подбор слов и метафор. Нигде Дмитрий не позволяет себе обойтись штампом, общими словами и описанием того, в чем сам не разобрался.<BR></FONT> <FONT FACE="Verdana" SIZE="2" COLOR=red><B>104 руб.</B></FONT> </TD> </TR> </TABLE>

Если рассматривать код с точки зрения контента и дизайна, то сразу же становится видно, что эти категории в коде переплетаются и с первого взгляда сложно сказать, что есть информация, а что есть средство визуального представления информации. Например, фотография обложки - это файл cover_kirsanov.jpg, однако в тэге <IMG> данная информация теряется, потому что она находится в атрибуте SRC, а кроме него тэг <IMG> содержит еще несколько атрибутов. Кроме того, если в коде присутствуют элементы графического оформления страницы, то отличить элемент оформления от графического элемента контента можно только по расположению элемента IMG в коде. Если обобщить эти рассуждения, то можно сделать вывод, что при такой разметке понятие контент размывается, и отсутствует четкая структурированность информации. Давайте проанализируем, к чему это ведет.

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

• перенести название книги, автора и цену вправо от фотографии обложки и выровнять их по правому краю;
• описание книги выровнять не по верхнему краю, а по центру;
• изменить весь шрифт на Arial;
• увеличить шрифт названия книги на одну единицу;
• увеличить общую ширину фотографии и описания с 400 до 450 пикселей.
• сделать рамку шириной в один пиксель.

В этом случае нам понадобиться переписать весь код. Он станет вот таким:

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=90% BGCOLOR=black><TR><TD> <TABLE BORDER=0 CELLSPACING=1 CELLPADDING=10 WIDTH=100%> <TR VALIGN=TOP BGCOLOR=white> <TD ALIGN=right width=110><FONT FACE="Arial" SIZE="3"><B>Веб-дизайн</B></FONT><BR> <FONT FACE="Arial" SIZE="1"><I>Д. Кирсанов</I></FONT><BR> <FONT FACE="Arial" SIZE="2" COLOR=red><B>104 руб.</B></FONT> </TD> <TD><IMG SRC="img/cover_kirsanov.jpg" WIDTH="100" HEIGHT="132" BORDER="0" ALT=""></TD> <TD VALIGN=middle><FONT FACE="Arial" SIZE="1"> Книга написана замечательно. В каждой главе видна тщательная работа с материалом и столь же тщательный подбор слов и метафор. Нигде Дмитрий не позволяет себе обойтись штампом, общими словами и описанием того, в чем сам не разобрался.<BR></FONT> </TD> </TR> </TABLE> </TD></TR></TABLE>

Как видите, понадобились коренные изменения в структуре кода на странице и добавление значительных фрагментов. Пришлось воспользоваться вложенными таблицами для создания рамки, потому что иначе средствами HTML такую рамку не реализовать. Причем это совершенно простой и тривиальный пример, но даже на нем ясно видно, что изменение визуального представления информации ведет к коренному изменению структуры страницы. Иными словами, при изменении дизайна изменяется и структура информации. Очевидно, что средствами HTML невозможно добиться разделения контента и дизайна. Но чем же это плохо? Чтобы ответить на этот вопрос, надо рассмотреть принципиальные подходы к созданию сайтов. Во-первых, весь сайт целиком можно сделать только на основе HTML. Плюсы:

• низкая себестоимость проекта;
• быстрота обработки запросов по сравнению со страничками, генерируемыми на основе баз данных (это совершенно ясно, потому что когда страничка генерируется, то затрачивается время на обращение к базе данных и на обработку программным модулем полученной информации);

Минусы:

• сложность обновления веб-сайта;
• сложность создания больших сайтов с числом страниц более 30-40;

Кроме того, можно сделать сайт на основе языка программирования Perl или PHP, с помощью которых можно генерировать HTML-страницы. Информация для наполнения страниц в таком случае содержится в реляционной базе данных, например, MySQL или MSSQL. Для генерации страниц достаточно нескольких шаблонов, а если сайт совсем простой, то и одного. Проблема замедления загрузки сайта решается следующим образом. Все необходимые страницы генерируются заранее, и только потом размещаются на сервере. Фактически, пользователи сразу получают HTML-страницу в ответ на запрос. Плюсы такого подхода:

• относительная простота обновления ресурса;
• относительная простота изготовления больших сайтов, потому что в данном случае число страниц практически не имеет значения.

Минусы:

• удорожание проекта, так как приходится привлекать программистов и увеличивается время, затраченное на разработку сайта;
• в том случае, если все страницы генерируются заранее, необходимы сервера большой мощности, иначе на генерацию большого сайта (общим объемом около 600 мегабайт) понадобится несколько дней, а это сильно затрудняет устранение мелких недочетов в шаблонах и внесение небольших изменений.

Очевидно, что простота обновления сайта, в случае реализации его на программном движке, следует из того, что:

1. информация содержится в базе данных, поэтому она уже прилично структурирована;
2. для полной смены дизайна необходимо переделать всего несколько шаблонов. Хотя если сайт очень большой, то число шаблонов доходит до 30, а это уже немало.

Итак, для легко обновляемого сайта необходимы HTML-шаблоны (зачастую с фрагментами PHP и Perl), отдельные скрипты на языках PHP или Perl и реляционная база данных. При этом программисту совершенно необходимо знать хотя бы основы HTML, а верстальщику хотя бы поверхностно ознакомиться с PHP. Но даже несмотря на это, достаточно часто возникают ситуации, когда программисту нужна помощь верстальщика, потому что он не знает некоторых нюансов кода, а верстальщику - помощь программиста, потому что правильная организация шаблонов лучше известна программисту.

Вот реальное положение дел в настоящий момент. Как мы уже установили ранее, средствами HTML невозможно добиться приемлемого разделения дизайна от контента. Что же в идеале принесет это пресловутое разделение, к которому всеми силами стремятся многие разработчики стандартов консорциума W3 и простые веб-разработчики. В идеале контент должен создаваться один и только один раз. То есть мы помещаем информацию в какой-либо файл или в базу данных и при изменении дизайна сайта мы никоим образом не должны менять содержимое этого файла или базы данных. Заметьте, фактически база данных+шаблоны+скрипты и есть разделение контента от представления. Информация хранится в базе данных, она четко структурирована и остается неизменной при смене дизайна, но придется полностью переделать шаблоны и внести некоторые исправления в скрипты. Так что долгожданное и совершенно необходимое разделение контента и отображения уже реализовано, к примеру, на основе связки MySQL+PHP+HTML. Почему же на этом не остановиться?

Вернемся к нашему идеалу. Кроме неприкосновенности контента нам необходима максимальная простота при изменении дизайна. Более того, нам нужна максимальная простота при внесении небольших исправлений в дизайн сайта. Очевидно, что связка MySQL+PHP+HTML нам желаемой простоты не обеспечивает. Внесение изменений - это достаточно трудоемкий процесс. Допустим, нам понадобилось все заголовки сделать не темно-красными, а черными, тогда придется искать и заменять все тэги <FONT>. В чем же причина этой сложности? Давайте разложим на составляющие нашу связку:

• В базе данных хранится чистая информация, которая сама по себе структурирована, но эта структура никоим образом не влияет на структуру документа.
• Скрипты PHP обеспечивают взаимодействие информации из базы данных с HTML-шаблонами.
• HTML-шаблоны определяют структуру документа и визуальное представление документа.

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

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

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

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

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

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

<DIV id="brd"><BR> <DIV id="title"><BR> <H2>Веб-дизайн</H2><BR><BR> <H3>Д. Кирсанов</H3><BR><BR> <SPAN class="prise">104 руб.</SPAN><BR> </DIV><BR> <DIV id="image"><BR> <IMG SRC="../img/cover_kirsanov.jpg" WIDTH="100" HEIGHT="132" BORDER="0" ALT=""><BR> </DIV><BR> <DIV id="description"><BR> <CITE>Книга написана замечательно. В каждой главе видна тщательная работа с материалом и столь же тщательный подбор слов и метафор. Нигде Дмитрий не позволяет себе обойтись штампом, общими словами и описанием того, в чем сам не разобрался.</CITE><BR><BR> </DIV><BR> </DIV><BR>

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

<style type="text/css"> CITE {font: 10px arial} H2 {font: bold 16px arial; display: inline;} H3 {font: italic 10px arial; display: inline;} .prise {color: red; font: bold 12px arial} #brd {border: 1px solid black; width: 500px;} #title {float: left; width: 130px; text-align: right; padding: 10px} #image {float: left; border-left: 1px solid black; border-right: 1px solid black; padding: 10px} #description {position: relative; top: 10%; float: left; padding: 10px} </style>