23 Декабрь 2010 Автор: admin

В прошлых материалах мы рассматривали общие вопросы разработки веб-сайтов – планирование веб-сайта, анализ целей и задач, разработка информационной архитектуры веб-проекта, базовые навигационные элементы и т.д. А сейчас – тема для веб-разработчиков, дизайнеров, верстальщиков, всех, кто создает веб-страницы, веб-сайты – для себя, для пользователей, для заказчиков ли, для поисковых машин… Небольшая заметка о логичной и нелогичной верстке.

Факт: у человека есть два полушария головного мозга. Исследования ученых: левое полушарие отвечает за логику и аналоговые сигналы (знаки), правое – за образы.
Когда мы создаем веб-страницу, мы формируем информацию так, чтобы воздействовать на оба полушария, задача визуального дизайна – образами показать посетителю, пользователю этой страницы, что он здесь получит (это – использование цвета, графическое оформление, подсказывающее, как распределена информация, подсветки и подчеркивания, выделение смысловых элементов, навигационных и текстовых, «выдавить» на первый план важный навигационный элемент), а задача семантики – отдать пользователю упорядоченные данные документа.

В irc канале webmascom (интересующимся – искать на irc.ircinfo.ru) один из участников дискуссии озвучил следующую информацию: «нет большого смысла ждать от браузеров корректной реализации display: table;, поскольку нет смысла в его использовании». Имелось ввиду, что для вывода табличных данных должно использовать стандартный html-тег table, и, с другой стороны, использовать для визуального дизайна, в частности, к примеру, для злополучной 3-колоночной верстки display: table – это тот же самый возврат к табличной верстке (имитации табличной верстки), т.е. – неправильно с точки зрения семантики web, типа – «назвали таблицы дивами и радуемся».

Тогда и стал вопрос по поводу того, что же такое «семантика в web». Тем же участником дискуссии было предложено официальное такое определение: «(от греч . semantikos – обозначающий):
значения единиц языка.
То же, что семасиология, раздел языкознания, изучающий значение единиц языка, прежде всего слов.
Один из основных разделов семиотики.»

О как! Не то, чтобы не понятно, но хотелось услышать более… близкое к css определение. Попыталась сформулировать нечто следующее (просто поток сознания):

«Я так понимаю, что если не путаться в терминах (семасиология, семиотика) – то, к примеру, если я закрою глаза и прослушаю открытую страницу, озвученная информация будет достоверной. Так? Т.е. если мне браузер говорит: Таблица, а в ней – заголовок (в th) – Прайс – то дальше будут табличные данные – название, цена… Описания стилей или назначенные id/class в этом случае браузер мне надиктовывать не будет. Вот. Т.е. если он дойдет до дива, в котором назначен display:table, он прочтет только содержимое этого дива, но диктовать мне табличную структуру не будет, так? Тогда где нарушение семантики?»

Что же касается злополучного вопроса о трехколоночном футере, стабильном и кроссбраузерном, без использования display: table; – было предложено использовать метод «отрицательных полей» (по статье на вебмасконе http://webmascon.com/topics/coding/43a.asp). Однако. Отрицательные поля – такой же обман браузера, как и в случае использования стилевых свойств типа display:table! Поэтому – выбор между двумя нарушениями логики – типа по вкусу как мне кажется.

В рамках семантических реализаций был супер главным оператором канала озвучен вывод урока: «сегодняшний урок: не важно, что мы там напишем в CSS, главное, чтоб ul был списком» (в первоначальной реализации звучало так: «сегодняшний урок: не важно, что мы там напишем в CSS, главное, чтоб ul выглядел как список», что не соответствует тем требованиям, которые предъявляются к семантической разметке – она не должна выглядеть, она должна быть – ее можно озвучить словом, словами).

Semantic Web – это вообще интереснейший проект, продвигаемый директором w3c.org, одним из основателей Web, и более внятно и подробно (определение, цели и задачи, плюсы и минусы) лучше прочесть на официальном портале семантической паутины на сайте консорциума или же в русскоязычной википедии. Однако великое и прекрасное будущее сети, видимо, еще достаточно далеко от нынешних разработчиков. Давайте немного поговорим об основах – стандартном html.

По определению HTML — Hypertext Markup Language (Язык Разметки Гипертекста) – это язык, предназначенный для описания форматирования текста, задания ссылок и других элементов веб-страниц. В нём используются стандарти­зированные «тэги», такие как <HEAD> и <BODY>, смысл и способ интерпретации которых задан универсально WWW-Консорциумом. К сожалению, современные разработчики, зачастую, не стремятся к изучению и соблюдению стандартов (не забывая при этом обижаться и злобить на разработчиков браузеров, которые так же не в полной мере те же стандарты блюдут, что, мол, «кривой браузер неверно отображает мою страницу», и старая больная тема – сделать кроссбраузерный, не разваливающийся и не расползающийся сайт). Более того, некоторые, довольно матерые интернетчики демонстративно игнорируют осовные требования к разметке страницы, намеренно рекомендуя новичкам «не возиться» с правильным, но трудно форматируемым документом, «не морочиться» с изучением документации, а сделать «как все» – поскольку главное – чтобы документ отображался в сегодняшних браузерах прилично, а начинающий дизайнер при этом – не переутомился, побыстрее сдал проект и забыл как о заказчике сайта, так и о его пользователях.

Совсем уже живой пример: на форуме в разделе, где обсуждаются дизайнерские проекты и проблемы по разработке, один из участников попросил помочь решить проблему: одна из картинок отображалась неправильно, а вернее, не так, как требовалось по замыслу дизайнера, причем не во всех браузерах, а только лишь в Мозилле (в ИЕ – ок).

Код был примерно следующим: в блоке (div с длинным и сложным описанием стиля) располагался тег параграфа P, внутри которого – картинка, т.е. примерно следующее:
<div id=»Layer8″ style=»position:absolute; left:161px; top:-410px; width:141px; height:598px; z-index:1;»>
<p align=»left»><img src=»images/shvarz.jpg» width=»138″ height=»600″></p>
</div>

Участники форума давали разные рекомендации – уйти от блочной верстки и сверстать сайт таблицами (не лучший совет, однако для этого дизайнера, возможно, и не худший, потому что «блочная» верстка анализируемого документа была ужасна), рекомендовали обнулить поля и отступы (задавая дополнительные описания стиля для параграфа) у внешних объектов.

Однако что говорит консорциум о правильном использовании тега параграфа?

P – это строчный (inline) элемент. Элемент P представляет параграф. Он не может содержать элементы уровня блока (включая сам P). в рамках стандарта допустимо заключать картинку в тег абзаца (поскольку она не является блочным элементом, а определена как empty – т.е. пустой объект, до тех пор, пока этому объекту не заданы дополнительные атрибуты и значения), картинку вообще можно ставить куда угодно , однако вовсе не обязательно заключать ее в тег параграфа; при этом простое решение для конкретного вопроса – убрать обрамляющий и не нужный тег параграфа и поставить перенос строки после картинки, т.е.
…
<img src=»images/shvarz.jpg» width=»138″ height=»600″><br>
…

Решение простое, и оно сработало. Однако настойчивые рекомендации других участников форума «забить на стандарты» и перейти к табличной верстке немного удивляло. А на замечание о том, что существует какая-то «логика сети», которая, вообще-то, должна соблюдаться, от весьма уважаемого участника форума (который, кстати, и порекомендовал не морочиться и перейти к традиционной табличной верстке) поступил странный ответ: «А не приходила мысль, что может быть логика эта – какая-то неправильная, раз большинство разумных, профессиональных разработчиков при создании хороших в общем-то сайтов ее нарушают?». Да почему же нарушают? Профессиональные разработчики как раз очень даже используют картинки в качестве иллюстраций к текстовому контенту, в том числе включают их в тег параграфа. А те картинки, которые не являются контентом, а представляют из себя элемент интерфейса, оформление – здесь уже другие решения используются.

И вот ведь странно… я не являюсь фанатом css и блочной верстки, и настаивать на какой-то конкретной модели не буду – да верстайте как хотите, однако странно – даже если не говорить о semantic web, зачем же рекомендовать начинающему разработчику использовать лишние теги для верстки параграфы/таблицы, усугубляя изрядным стилевым описанием, когда достаточно сделать по стандарту, (как в приведенном выше примере – добавить перенос строки после иллюстрации)? Решение, которое является избыточным, не может быть правильным.

Действительно, решение вставить картинку в тег параграфа не противоречит логике разметки, когда картинка является иллюстрацией к тексту параграфа. Однако противоречие наблюдается, когда в параграф включают картинки «элементов дизайна» интерфейса страницы. А теперь воспользуемся приведенным в начале заметки методом анализа семантической верности разметки и попробуем прочесть то самое неправильное решение голосовым, к примеру, браузером, для ленивых или плохо видящих, к примеру, пользователей: «а сейчас будет новый параграф текста: оп-па, картинка для оформления страницы; а сейчас – следующий параграф: оп-па, еще одна картинка для оформления страницы». И как? логично?