В прошлых материалах мы рассматривали общие вопросы разработки веб-сайтов — планирование веб-сайта, анализ целей и задач, разработка информационной архитектуры веб-проекта, базовые навигационные элементы и т.д. А сейчас — тема для веб-разработчиков, дизайнеров, верстальщиков, всех, кто создает веб-страницы, веб-сайты — для себя, для пользователей, для заказчиков ли, для поисковых машин… Небольшая заметка о логичной и нелогичной верстке.
Факт: у человека есть два полушария головного мозга. Исследования ученых: левое полушарие отвечает за логику и аналоговые сигналы (знаки), правое – за образы.
Когда мы создаем веб-страницу, мы формируем информацию так, чтобы воздействовать на оба полушария, задача визуального дизайна – образами показать посетителю, пользователю этой страницы, что он здесь получит (это – использование цвета, графическое оформление, подсказывающее, как распределена информация, подсветки и подчеркивания, выделение смысловых элементов, навигационных и текстовых, «выдавить» на первый план важный навигационный элемент), а задача семантики – отдать пользователю упорядоченные данные документа.
В irc канале webmascom (интересующимся – искать на irc.ircinfo.ru) один из участников дискуссии озвучил следующую информацию: «нет большого смысла ждать от браузеров корректной реализации display: table;, поскольку нет смысла в его использовании». Имелось ввиду, что для вывода табличных данных должно использовать стандартный html-тег table, и, с другой стороны, использовать для визуального дизайна, в частности, к примеру, для злополучной 3-колоночной верстки display: table – это тот же самый возврат к табличной верстке (имитации табличной верстки), т.е. — неправильно с точки зрения семантики web, типа — «назвали таблицы дивами и радуемся».
Тогда и стал вопрос по поводу того, что же такое «семантика в web». Тем же участником дискуссии было предложено официальное такое определение: «(от греч . semantikos — обозначающий):
1. значения единиц языка.
2. То же, что семасиология, раздел языкознания, изучающий значение единиц языка, прежде всего слов.
3. Один из основных разделов семиотики.»
О как! Не то, чтобы не понятно, но хотелось услышать более… близкое к 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 (Язык Разметки Гипертекста) — это язык, предназначенный для описания форматирования текста, задания ссылок и других элементов веб-страниц. В нём используются стандартизированные «тэги», такие как и , смысл и способ интерпретации которых задан универсально 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)
замените «(» на »
Источник: