Переходим на XHTML 1.1

Я недавно ходил в одну контору устраиваться на работу и первый вопрос который я получил это "что такое DOCTYPE" и "расскажи про Strict, Transitional, Quirks". Само собой вопрос не совсем по моей специальности - я не верстальщик, но всё равно я любопытный. В год назад такая же история была со Skype - в итоге я тесно познакомился с Postgre. Так что не долго думая я решил блог по возможности привести к правильному XHTML 1.1, хотя продвигать или уж тем более требовать то же самое от своих коллег я не собираюсь - каждый сам решает уровень своей дисциплинированности.

XHTML приближен по к XML, парсер не должен гадать как то было в Transitional-mode правильно ли автор расставил порядок тэгов. Более того, это передний фронт развития стандарта, следующая фаза будет в версии 2.0. Параллельно с XHTML развивается HTML 5, но почему-то я ему не доверился, наверно интуиция. XHTML советуется объявлять при помощи MIME application/xhtml+xml, но IE как всегда тормозит и не понимает. Приведу некоторые стандартные ошибки, которые я заметил у себя в процессе стандартизации.

Незакрытые тэги, < и &

Я давно уже привык закрывать <br />, но многие input и img на автомате остались без моего внимания. До этого я часто замечал в чужом коде что внутри ссылок параметры разделяются не просто символом &, а кодом амперсанда &. Как оказалось то же обстоит и с символами тэгов. Все параметры тэгов так-же обязаны быть помещены в кавычки. Очевидно это нужно что-бы ускорить работу парсера. Хотя помоему это чуть излишне.

Всё есть object

Embed это нестандартный тэг часто используемый для вставки видео с youtube (а я советую vimeo), который по всей видимости начал использоватся как совместимость с перекупленным у Netscape движком IE для внедрения объектов внутрь страницы. Он уже отжил своё и его использование в XHTML невозможно. Советы от Elisabeth Castro, Bernie Zimmerman подтверждают это и советуют использовать нечто подобное:

<object type="application/x-shockwave-flash" width="425" height="350" data="http://www.youtube.com/v/7_6B6vwE83U">
<param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U" />
</object>

Но проблема в том, что даже если использовать версию без embed, то по крайней мере у моей версии tinymce-редактора (а она без wordpress и без плагина) возникает проблема редактирования и повторного открытия - объект начинает играть сразу в редакторе. Благо при переходе на tinymce 3 объект остаётся спрятанным в коде.

Iframe тоже оказывается пережитком прошлого, его как и svg надо использовать через object-тэг.

CDATA в inline script и style

Character Data активно используется в XML что-бы представить символьные данные, на которые не должны накладываться законы формирования документа - знаки обозначения тэгов и амперсандов. В XHTML использовать такая открывающая и закрывающая строка просто необходима для обозначения CSS и Javascript, иначе всякое упоминание & и < будет считаться параметрами или тэгами.

//<![CDATA[
alert "Для javascript добавляются ещё знаки комментирования"
//]]>

Обязательные и не существующие элементы

Не существующие тэги и параметры

  • img.border
  • img.align
  • ol.start
  • a.name раньше использовался для навигации по якорям в ссылках (добавляется символ решётки, например #top), теперь заменен на использование параметра id.
  • center

И наоборот, некоторые параметры и вложенные тэги стали строго обязательными

  • ul li - раньше я просто оставлял пустой список, если он заполняется ajax'ом, теперь надо прятать и добавлять пустой li-элемент
  • head title
  • textarea.cols
  • img.alt - приучает развивать фантазию на случай если картинки отключены или грузятся. Глядишь - и print-версию css напишешь.

Для тестирования я использовал как валидатор W3C, так и плагинами для браузеров.

Файлы

Какой doctype вы используете?

  1. HTML4 (20 голосов)
  2. XHTML1 (25 голосов)
  3. Никакой - Лебедеву виднее (21 голосов)

XFN и FOAF

Не основываясь ни на чём я могу сказать что 40% читаемых мною блогов обращают какое-либо внимание на шумиху Web 2.0, 4% из них задумываются о будующем web 3.0, о семантике и только единицы реально изучают микроформаты и пытаются об этом писать.

FOAF это практическое применение формата семантики RDF, а цель раскрывает значение этого сокращения - друг моего друга, т.е. формат связей некоего блога или ресурса с другими. Документация и весь формат разрабатывался с 2000 года и с того времени завоевал популярность в основном среди прогрессивных web-разработчиков.

XFN это микроформат проще реализующий смысл FOAF, технически в виде отношения многое к многим как и тэги. Отвечает стандартам XHTML,и всё что от вас требуется так это добавить параметр rel='friend' в каждую ссылку из списка. Параметр может быть не только friend, но и другим отвечать значениям - см. XFN 1.1. creator. А что-бы показать всем пример и выпендиться, можно использовать иконки.

Цель и перспективы

  1. Децентрализованная сетка друзей. Заходите на любую социальную сеть, регистрируетесь, находите друзей, и объединяете всех в один список. Для этого надо, что-бы популярные сервисы поддерживали формат FOAF. И некоторые уже это делают - Livejournal, Liveinternet.
  2. Поиск по сетке. Вообще поиск по людям в интернете отсутсвует, чего бы не писала seobaby. Всему причина как я уже писал, политика конфиденциальности. Конечно вы можете попробовать умерший поисковик Rubhub. Mindsack.com предлагает создать список в виде JSON, и прыгаеть с одного списка на другой.
  3. Визуализация. Построить граф всея интернета хочет разве что параноик-детектив, но видеть нечто отличное от текстовых списков всегда приятно, особенно когда в качестве узлов выступают фотки знакомых людей. Однако достаточно взглянуть на граф от six apart что-бы понять что графы неудобны. Можно использовать xfngraph.

Работы

  • Для работы с XFN Дима Джус например уже нахимичил паука с такими аббревиатурами как XSLT, Python, tidy.
  • Oliver Brown наваял неудачно какой-то географический проект с отображением друзей.
  • Дикий попробовал mindsack и даже Бишопа с Флинтом подключил до момента перезапуска блога последним.
  • Optimus конвертит XFN в нужный xml или json.

Якобы вывод

FOAF и XFN это всего лишь "фича" блогеров, которая предоставляет данные тем кто их понимает (поисковикам и программам) и если он наберёт популярность, то его будут учитывать большие игроки... например livejournal уже учитывает. Но для коммерческих систем естественно такой формат для услуг не нужен. Тем временем можно занять нишу rubhub, хитро скомбинировать это с блогами и сделать подобие blogowar , Дима ты меня слышишь?

В заключение можно заметить, что на протяжение всей истории интернет-поиска, крупные поисковики никак не пытались повлиять и навязать форматы данных которые сайт должен показывать. Sitemap, favicon, robots.txt, meta и headers не в счёт. Когда же появятся "Google рекомендует"?

RSS generator

Все знают про RSS и то как это читать и даже парсить , но как переделать из html-кода статью в валидный RSS для веб-разработчика может быть проблематично.

К типичным проблемам можно отнести присутсвие символов <, >, &. Кроме того сложности с присутсвием тэгов object внутри description приводят к тому что сделать видео объект в rss нельзя.

Пробуем FeedCreator. Громадина, поддерживает всевозможные ATOM, RSS 0.9-RSS 2.0, OPML, MBOX. Надо вручную менять на UTF8 кодировку, объект хочет сразу создать xml файл. Хорошо, это в принципе разумно, кэширование в один час для блога не критично, для новостных сайтов надо уменьшать до пары минут.

$rss = new UniversalFeedCreator();
$rss->useCached();
$rss->title = "Artjom Kurapov";
$rss->description = "Personal Blog";
$rss->link = "http://kurapov.name/";

Валидатор всё равно ругается на flash (следовательно object не поддерживается) . Кроме того не нравятся относительные пути. Конешно можно изменить WYSIWYG что-бы он сразу генерировал абсолютные пути, но в случае если надо будет менять домен прийдётся много с базой работать. Поэтому мы их генерируем вместе с RSS.

$recEntry->description=preg_replace("//i",'',$recEntry->description);
$recEntry->description=str_replace("href='/","href='http://kurapov.name/",$recEntry->description);
$recEntry->description=str_replace('href="/','href="http://kurapov.name/',$recEntry->description);
$recEntry->date = date('r',$item->unix_added);
$rss->addItem($recEntry);
echo $rss->saveFeed("RSS2.0", "feed.xml");
И в результате
[Valid RSS]

WSDL

Никогда не задумывались как работает гениальный copy/paste? Правильно, благодаря всяким OLE и COM, которые продвигал Microsoft. В чём же гениальность этой функции? Interoperability, о как!

WSDL это формальный стандарт для описания сервизов сервисов. Под сервисом естественно подразумевается какой-то сайт, портал или просто скрипт. А зачем его описывать? Затем что-бы использовать в других таких же скриптах, программах и сайтах, а это и есть interoperability.

Этот стандарт выглядит как обычный XML файл, разрабатывается W3C и всевозможными корпорациями. Файл состоит из 4 основных тэгов:

  • types в котором под-тэги elements описывают "переменные"
  • interface в котором operations описывают возможные "функции"
  • binding в котором детально объясняется каждая operation
  • service в целом описывает местонахождение конкретного сервиса и используемые им операции

Более старые версии WSDL 1.1 имели иную структуру с portType тэгами.

В завершение можно сказать что такой стандарт предназначен для ПО, где важно предоставление некоторых программных интерфейсов для открытого доступа, которые могут использовать третьи лица на совершенно другом языке, другими алгоритмами и тп.

См. также SOAP, типы wsdl операций,