Философский взгляд на Web

9 августа 2008 года, 20:00

Сотую запись в своём блоге мне хотелось посвятить чему-нибудь особенному. В особенном я вижу именно немного необычный, философский взгляд на Web, в частности, на основной язык разметки этой необычной среды.

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

Размышления

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

Визуализация дерева элементов The Webmakers Lounge

Слепок блога The Webmakers Lounge

У ситуации есть и две другие стороны. Два документа могут выглядеть абсолютно одинаково, но их структура может различаться. Это достигается благодаря использованию CSS. Напротив: два документа могут коренным образом отличаться друг от друга, но, заглянув в структуру таких документов, мы сможем убедиться в том, что они являются идентичными. Такой результат достигается также с помощью CSS (вспомните хотя бы всем известный CSS Zen Garden).

Визуализация дерева элементов Web Zine

Слепок этого блога

Несмотря на CSS, структура документа всегда определяется однозначно. С этой структурой можно производить необходимые нам операции: перебор элементов (DOM), трансформации (XSL/T), выборка отдельных элементов, валидацию. Почему бы не попробовать добавить ещё один путь — визуализацию?

Под визуализацией я представляю себе представление структуры Web-документа. Да, именно его структуры, а не последсвтий её обработки различными браузерами. Достаточно один раз увидеть подобную схему, достаточно одного взгляда на структуру документа чуть выше, чем мы это делаем обычно, и можно разглядеть различные детали наших (и не только) документов. Можно найти какие-то недочёты, ошибки, можно, в конце концов, принимать такую визуализацию за конкретный анализ такого документа, принимая его всерьёз в качестве пособия по оптимизации последнего.

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

Анализ

Анализу подвергались только сайты некоторых моих коллег. Все они, я думаю, не будут против, если их структура появится здесь в виде этакого дерева, «слепка» их собственных документов.

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

Выводы

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

Визуализация дерева элементов Pepelsbey.net

Слепок блога Pepelsbey.net

Схемы, которые мы сегодня рассматривали, очень наглядно демонстрируют «заширменную часть» Web-документов в сети; это как бы взгляд изнутри, взгляд в обход браузерам и иным средствам просмотра Web-страниц.

Во всяком случае, исследование было полезным для меня самого. После того, как удаётся повернуть шестерёнки направления мыслей, начинаешь немного иначе смотреть на всё вокруг, в данном случае, на все вокруг документы. Может быть, это не случайность? Может быть, стоит проводить такие эксперименты намного чаще? Кто знает. Зато теперь я со спокойной душой могу сказать, что сотая запись в блоге Веб-Зайн не прошла даром для меня и, надеюсь, для вас. Кто знает, может это побудит читателей исследовать новые мыслимые и (желательно) немыслимые горизонты Web.

По-моему, я гикнулся. Желаю вам гикаться по чаще: оказывается, это приятно и очень полезно!

Мнения (16)

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

  • Arwen

    09 августа 2008 г.22:43

    Я так и не поняла, про что статья, но картинки хорошие. :))

  • Дин автор

    09 августа 2008 г.23:27

    @Arwen, :-)

    Забыл добавить, что для просмотра полной версии схем следует кликнуть на уменьшенные их копии.

  • platun

    10 августа 2008 г.08:55

    А слепок http://w3cast.ru/?

    Думаю, что при проектировании, это облегчило бы жизнь и верстальщикам и программистам. Ещё лучше если бы был спец.редактор, который проводил бы HTMLtoСхема и обратно. Схемку распечатать и повесить на стенку.

  • Дин автор

    10 августа 2008 г.09:25

    Сделал два слепка: горизонтальный и вертикальный.

    По поводу редактора какого-нибудь, у меня были раньше кое-какие соображения, но они были очень абстрактны.

  • Дин автор

    10 августа 2008 г.20:20

    Ах да, есть ещё слепки с атрибутами, как например, этого блога.

  • Miscђka

    13 августа 2008 г.14:33

    Перефразируя одну из рубрик журнала «Максим»: Мы разбираем на части ваши страницы и собираем их обратно. При этом у нас остаются лишние детали и понимание того, зачем они были нужны.

    Честно говоря, пока не вижу принципиальных отличий от графического построения DOM-дерева.

    ЗЫ: Дом-дерево… Как круто звучит! *ушол в свой блог отмечаться.

  • Дин автор

    13 августа 2008 г.14:45

    Я вообще не вижу, когда кто-то говорил о различиях…

  • Miscђka

    13 августа 2008 г.15:54

    мы попробуем осуществить сдвиг нашей точки зрения на другую позицию.

  • Дин автор

    13 августа 2008 г.15:57

    Это ты неправильно понял относительно чего сдвиг. DOM-дерево здесь капитально ни при чём.

  • Miscђka

    14 августа 2008 г.11:16

    ты неправильно понял относительно чего сдвиг

    Ога, поспешил. Вчера голова вообще не соображала.

    Ты здесь двигаешь не дерево, а взгляд на веб-страницу.

  • Никита

    31 августа 2008 г.17:13

    Немного ошибся в последнем абзаце блока «Размышления»:

    «Кажд*ый* визуализированная схема документа…»

  • Дин автор

    31 августа 2008 г.18:34

    @Никита, спасибо большое. Согласование стремится к нулю. :-)

  • Cake_Seller

    04 сентября 2008 г.02:35

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

    Мне гораздно проще для того чтобы разобраться в структуре документа воспользоваться Firebug'ом, в котором структура документа представлена в более привычном виде и есть возможность сворачивать и разворачивать содержимое обределенных элементов.

    Надеюсь автор не против небольшой критики ;-)

  • Дин автор

    04 сентября 2008 г.06:15

    @Cake Seller, это не критика, это субъективный взгляд на вещь. Не в обиду, да. ;-) Тем паче, что в статье сразу же декларировано: Даже говорить не нужно, что мне всегда было интересно видеть Web немного под иным углом, немного с другой точки зрения. Сегодня, в этой статье, мы попробуем осуществить сдвиг нашей точки зрения на другую позицию.

  • Добо

    19 октября 2008 г.10:09 В вашем сайте:

    Что это за .oml

    Как его создать и как она объязательна?

    Не UML ли это?

    Спасибо за ответ.

  • Дин автор

    19 октября 2008 г.16:20

    @Добо, .oml — это «на будущее», часть другой системы валидации XHTML-содержимого. Это необязательный документ для индикации его в атрибуте profile.

    OML не является и не имеет никакой связи с UML. OML — это самодостаточный формат обозначения связей элементов XML-подобных документов.

Я тоже знаю!

Для обращения к человеку используйте символ @, после которого следует имя того, к кому обращаетесь (пробелы заменяются на знак подчёркивания). Если вам интересно, можете подписаться на комментарии по RSS или по эл. почте. Ведите себя достойно, вы же не роботы, правда?

Вы можете использовать следующие XHTML-элементы в разметке комментария: strong, em, span[class=crossline], a[href=uri], code[type=язык], blockquote, ul и ol. В качестве языка кода может быть указан, например, javascript или css.