Всю жизнь человека преследуют компромиссы. Даже самые принципиальные люди, желающие жить в обществе, понимают, что есть моменты в которых компромисс просто необходим.

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

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

Процессом превращения картинок дизайна в HTML/CSS представление занимаются как раз выше упомянутые веб-разработчики, процесс этот называется версткой.

Вот в момент этого магического «превращения» картинок в сайт возникает проблема или правильнее сказать дилема. HTML сам по себе не служит для создания стиля или дизайна, это в первую очередь документ, его цель донести до пользователя содержимое (контент). Я уже писал про семантику, не буду повторяться в рамках этой статьи.

Перехожу к сути. Для настройки стиля (читай дизайна) HTML-документа в веб-стандартах предусмотрено использование CSS. Часто возникает ситуация, при которой в HTML документ попадает избыточное кол-во элементов, которые не несут никакого содержимого для пользователя, а используются только в CSS для придания стиля/дизайна документу. Это некорректно с точки зрения семантики HTML. Но это не так страшно. Более серьезная проблема в том, что частенько приходится нарушать сам стандарт разметки документа (HTML) ради придания ему определенных стилей (через CSS). Профессионалы называют это на сленге «невалидный код», от английского «valid — верный, корректный».

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

Так вот теперь о компромиссах. Есть еще не упомянутая сегодня веб-технология JavaScript. С помощью JavaScript и DOM можно в момент загрузки страницы браузером корректировать ваш код. В нашем случае интересует именно HTML. Так вот это и есть простой и эффективный компромисс, модифицировать готовый корректный HTML с целью добавления элементов, которые используются чисто для дизайна. При относительно небольшом кол-ве таких элементов, скорость загрузки/отображения страницы для пользователя останется незаметной.

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

PS: статья получилась довольно общая и возможно не совсем интересная для «бывалых», но это только первая статья из серии посвященной веб-стандартам. To be continued...

Сегодня подборка интересных ссылок по теме клиентских веб-технологий аля код для браузера.

• Visual Event почетно занимает в этом списке первое место! Отличный JavaScript инструмент, выполненный в виде букмарклета. Позволяет просматривать привязку событий JavaScript к элементам страницы визуально. Поддерживает jQuery, YUI и MooTools. Отличный инструмент для дебага JavaScript. Посмотреть демо.

• JS Bin — следующий инструмент для дебага JavaScript/HTML/CSS, позволяет интерактивно совместно нескольким разработчикам тестировать код. Поддерживает все мажорные JavaScript библиотеки (кроме ExtJS). Описать функционал трудно, попробуйте, в нем легко разобраться или посмотрите видео.

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

• JazzRecord JavaScript ORM — новый проект, один из немногих решивших попробовать реализовать ORM на JavaScript. Проект вполне актуален, т.к. уже есть ряд технологий, где он может быть использован (Adobe AIR, Google Chrome и другие, используещие браузерные базы данных). Синтаксис ORM подобен ActiveRecord из Ruby on Rails.

Решил сменить свою del.icio.us ленту в сайдбаре на более-менее регулярный постинг интересных ссылок.

А вот место в сайдбаре собираюсь заполнить блогроллом. Так что если хотите попасть в список — напишите мне на имейл или в комментарии свой сайт/блог. Добавляю на условии, что вы ставите на меня обратный линк.

Итак интересное, что я «нарыл» на просторах интернета за последние пару недель.

• StaticGenerator for Django — ссылка дня! очень полезный проект для django-разработчиков, может генерировать статический html вариант сайта из моделей, пользуясь методом get_absolute_url. Самое главное, что через сигналы он может автоматом обновлять html-страницы при изменении/добавлении объектов (т.е. буквально данных в базе).
• Evaluation of web based WYSIWYG-editors, test result 2007 — обзор онлайновых WYSIWYG редакторов (javascript и один на java), с него набрел на один интересный редактор (следующая ссылка).
• WYMeditor - web-based XHTML editor — простой интересный онлайн редактор, без возможности upload/insert images, но зато более семантичный и наглядный для тех, кто знает HTML.
• WYMstyle и css-boilerplate — css frameworks, хороши для веб проектов, когда у вас еще нет дизайна веб-сайта/веб-приложения, но вам нужно более-менее симпатично показать контент и функционал. Облегчают работу тем, кто не любит долгой возни с версткой.
• swfobject 2 — новая переработанная версия (на данный момент rc1) javascript библиотеки для включения в страницу flash/flex роликов или приложений. Кто еще не пробывал — советую, намного удобнее, чем писать кроссбраузерные теги и делать ручные проверки нужной версии flash. Еще можно почитать блог разработчиков — SWFFix Dev Blog.
• transdb — неплохая библиотека для локализации конента в django. Добавляет специальные многоязыковые текстовые поля в модель, что облегчает работу с базой и хорошо интегрируется с существующей системой i18n в django.
• PyAMF — Реализация на Python поддержки протокола обмена данными AMF (от Adobe) для клиент-серверного взаимодействия. Используется во flash и других проектах Adobe. Данные по этому протоколу передаются в бинарном виде, что более-продуктивно с точки зрения потребления траффика, автоматизирована сериализация/десериализация данных как на стороне сервера, так и клиента.

Сегодня в feed-ридер попало уведомление из django community про интересную python-библиотеку CleverCSS с примером кода для использования в Django, оригинальный пост автора.

Библиотека позволяет писать CSS на Python с последующей конвертацией "на лету" или генерации статических файлов. Т.к. стили описываются на Python, то следовательно можно использовать всю его мощь для автоматизации дизайна. Представьте, что можно сгенерировать персональные стили для каждого элемента в базе (например для каждой фотки по ее id). Или, например, предоставить пользователям возможность настраивать внешний вид сайта (цвета, шрифт), что особо полезно при создании тем веб-сайтов.

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

После недавнего общения с Иваном, систематизировал в голове свои идеи насчет семантической верстки и связанных с ней нюансов.

Главный вопрос: а зачем нужна семантика в верстке? Может это просто очередной понт, который не имеет реально важного значения?

Хорошо, перейду сразу к делу без всякой теории.

Итак случай первый, когда семантика мне оказалась необходима. Я думаю все, кто разрабатывали средние и мелкие веб-сайты, имели дело с текстовыми материалами заказчика (сделанные обычно в M$ Word). Или возможно Вам просто приходилось переделывать чьи-то текстовые документы (например при подготовке к диплому или редактировании статьи). Я уверен, что любой человек, читающий эту заметку, испытывал трудности при редактировании чужого текста. Типичные примеры это сбивка и прыгание абзацев, заголовков и особенно списков. Так вот любой среднестатистический пользователь ПК, скорее всего, при создании списков сам проставляет номера элементов, забивает пробелами отступы в абзацах, вместо того чтобы воспользоваться соответствующими пунктами меню. В принципе это вполне нормально для круга задач среднестатистического пользователя ПК. Но если пойти чуть дальше в использовании текстового материала, например экспорта в другой формат, то глюки в форматировании текста не заставят себя долго ждать. И даже хорошо поддерживаемый вордом RTF покажет пользователю все прелести несемантической верстки. А если Вам нужно конвертировать на другой носитель информации (например с экрана на бумагу, я не беру в пример стандартное распечатывание страниц в M$ Word), то тут скорее всего пользователя ждет еще больше сюпризов (наиболее часто замечаемый – это переносы строк). А при импорте неправильно сверстанных (читай несемантично сверстанных) документов в среду веб, необходимо перелопачивать весь текст и исправлять (обычно в ручную) неправильные элементы верстки. Далее, если даже осмотреться в самой среде веб, уже можно заметить все больше разноплановых устройств, с помощью которых можно читать веб-страницы. Особенности семантической верстки очень актуальны для мобильных устройств, т.к. они имеют нестандартные размеры экрана и сами браузеры имеют разный уровень качества по парсингу (x)HTML. Поэтому, чтобы оставить на совесть разработчиков мобильного устройства неправильное отображение сверстанных Вами страниц, нужно делать все по стандартам (в которые потом можно будет тыкнуть пальцем ;-)). Возвращаясь к началу моего первого пункта, замечу, что почти всех своих клиентов по разработке веб-сайтов я сначала консультировал, как правильно готовить контент к импорту и публикации на сайт.

Случай второй, когда семантика очень полезна. Семантика в верстке всегда несет смысловую нагрузку. На любом этапе работы с контентом можно понять что хотел сказать контент-менеджер или просто автор текста. Если текст не единичный, а имеет какую-то периодичность, то четкое типовое форматирование намного снижает рутинную работу кодера или верстальщика. Также это очень помогает при создании стилей и оформления документов дизайнерами. Род работ зависит от типа документа (журнал, газета или веб-публикация), но идея семантически верного текста везде одинакова. Для меня это всегда было важно при написании стилей (CSS) для веб-страниц. Т.е. чем больше типовых элементов текста, тем более легко сверстать их внешний вид корректно и тем понятнее, что хотел сказать автор текста на всех промежутках работы над ним. И не забывайте про друга верстальщика – copy n paste ;-), тут семантика будет на Вашей стороне.

Случай третий, самый важный. Автоматизация обработки текста. Часто один и тот же текстовый контент приходится держать в нескольки форматах. Типичный пример – страница веб-сайта доступная как pdf-документ и имеющая версию для печати. Все три варианта текста будут иметь разный внешний вид. Если просто веб-страницу и версию для печати можно просто настроить с помощью стилей (CSS), то с pdf такой вариант не пройдет. Тут нужна конвертация. Как раз на этом этапе будет видно качество верстки текста. Но это не совсем полный пример автоматизации. Некоторое время назад (достаточно давно) я писал на PHP CMS движок для веб-сайта. Одним из требований была синхронизация сайта по нескольким зеркалам. Синхронизация БД не была возможна по некоторым техническим причинам, поэтому был выбран вариант хранения всей информации в XML-файлах. Но немного поразмыслив я решил использовать XHTML формат для контента, в итоге в чистом XMLе хранилась только карта сайта, из которой генерировались URL. Почему же я выбрал XHTML? Дело в том, что XHTML может рендерить сам браузер (мне его остается только стилизовать, например с помощью CSS), поэтому отпадает нобходимость в конвертации текста в HTML формат. С другой стороны XHTML дает возможность работать с текстом средствами XML-утилит. В итоге получилась очень удобая смесь. При сохранении контента он строго семантически форматировался в нужные элементы с соответствующими аттрибутами, что давало возможность мне использовать их для стилизации на стороне клиента (через CSS) и обработки (фильтрации, выборки и поиска) на стороне сервера. Давайте рассмотрим пример.

Отличная погода сегодня в городе
2007/09/22
Весь город сегодня вышел на улицы, чтобы ощутить последнее осеннее тепло...
Подробнее ...


some other text

В данном примере я могу использовать названия элементов и аттрибутов в CSS файле для стилизации текста и в тоже время на стороне сервера, например с помощью xpath я могу выбрать все заголовки новостей. Вот пример xpath-выражения: /body[@id='root-node']/div[@class='news-node']/h1[@class='news-head']. Самое главное что такой четко структуированный документ всегда будет легко экспортировать в любой другой формат. В данном случае, спустя год я переделывал сайт на django и буквально за несколько часов написал скрипт, который перевел весь контент (без единой потери) в базу джанги.

На Python такой запрос будет выгялдеть так:

import libxml2
xml = """ .... """ # тут кусок xml приведенный выше
doc = libxml2.parseDoc(xml)
head_node = doc.xpathEval("/body[@id='root-node']/div[@class='news-node']/h1[@class='news-head']")[0]
print head_node.content

Конечно я привел не все случаи и варианты применения семантической верстки, но это то, с чем я сталкивался сам. Интересно узнать мнения других. Так что пишите в комментариях, кто как использует семантику в реальной жизни.