Шедевры вебмастеринга

От делать нечего решил сделать совершенно бессмысленную вещь. Взять и порвать какую-нибудь страницу. Порвать — в смысле составить полный список ляпов, багов, глюков и других насекомых, на ней водящихся. А в качестве подопытного таракана была выбрана страница ЦУП-М.

Итак, рвём главную страницу сайта ЦУП-М.

Во-первых, внешний вид. Совершенная прелесть. Смотреть на неё надо, конечно, из чего угодно, кроме IE. Желательно с отключенной графикой, конечно. Как это выглядит у меня. Сверху — пустое пространство, совершенно белое, как фон страницы. При вождении мышью по нему мышь в пяти местах принимает форму указателя на ссылку. Причём три из этих места при этом выделяются синим, однако прочитать на них и при таком раскладе ничего не удается. В строке статуса тоже ничего не показывается. Называется — догадайтесь куда вам надо. Или включайте бесполезную, по сути, графику.

Потом, впечатляет объём страницы. Прикол в том, что объём главной страницы — всего лишь 12 КБ. Однако, откуда-то берутся ещё 78 КБ инлайн-элементов — при выключенной графике, обратите внимание! Страница при этом состоит всего лишь из небольшого бокового меню, невидимой конструкции сверху, двух абзацев про то, какой у нас замечательный ЦУП и футера.

Включаем графику. Объём инлайн-элементов возрастает до 115 КБ. Ну, тут прицепиться не к чему — вид сразу становится довольно приличным, сама графика весит сравнительно немного, фон на странице хоть и есть, но читать не мешает. Правда, надписи на нафигационной панели сделаны графически, причём какими-то корявыми шрифтами, да и логотипа тоже какая-то пожёванная. Но с этим хоть жить можно.

Боковая менюшка, состоящая из последних новостей, тоже имеет свою особую прелесть — при наведении на неё мыши, в строке статуса показываются совершенно замечательные вещи вроде «javascript:na_open_window(‘win’, ‘new.htm#3’, 0, 0, 550, 400, 0, 0, 0, 1, 1)» — не правда ли, информативно?

Ещё очень радует то, что при разрешении 1280×1024 информативная часть занимает левую половину экрана. Правая заполнена исключительно фоном…

Теперь, типографика. Ну, тире вместо дефисов, три точки вместо многоточий — это само собой, как же без этого? Скажите спасибо, что кавычки русские типографские, а не APL. Правда, почему-то только в «воззвании», в новостях видимо пользоваться нормальными кавычками не принятно — и APL сойдут, типа ^_^ Отступ, хоть и сделан по-настоящему, а не эмулирован пробелами, маловат, на мой вкус — всего лишь 12px (кстати, удачные единицы измерения — особенно при высоких разрешениях!). Ещё очень радует способ сделать маркеры в списке новостей. При выключенной графике они выглядят как синие прямоугольники высотой в одну строку (т. е. что-то типа закрашенного пробела). А вот при включенной там появляется невнятная картинка тех же размеров. При ближайшем изучении путём открытия в новом окне эта картинка оказывается белой стрелкой вправо. Хм. Молчу про вред интерполяции растровой графики. Дополняют красоту дизайна списка новостей пробелы, стоящие перед каждым условным «многоточием».

Для полного кайфа надо ещё опустить футер. Ну, пропущенные пробелы в сочетаниях типа «г.Королев» — это так, для создания общего впечатления, конечно. Самое классное — это вот эта конструкция (разбиение на строки, пунктуация, а также расстановка и количество пробелов сохранены):

<картинка со счётчиком>
обращений к
странице с 4 февраля
2001 г.  redactor
или webmaster

Правда, здорово? «redactor» и «webmaster» — это, наверное вместо «н. э.» ^_^ Иначе почему это стоит сразу же после года? Ещё очень радует то, что слово «webmaster» написано чуть ниже слова «или», хоть и сразу после него. Ну и в довершение прелестного дизайна футера в предложении «При использовании материалов сайта ссылка на источник обязательна» забыта точка в конце. Типа, мысль не закончена — можно поставить и вопросительный знак, и многоточие, и вообще любой знак по своему вкусу. Думаю, если приглядеться повнимательнее, можно найти ещё массу типографических и пунктуационных ошибок, но с меня пока хватит.

Теперь осталось порвать реализацию. То есть код. Начну рвач с того, что страница написана на неофициальном, но, к сожалению, традиционном языке, который можно назвать «HTML Unknown Version». Это, понятное дело, следует из того, что нет обязательного для всех документов DOCTYPE. Но, конечно, было бы невежливым со стороны программистов (дизайнеров?) останавливаться на достигнутом и поэтому код имеет массу других достоинств. Например, в самом же начале заголовка включается скрипт объёмом 45 КБ (1862 строки). Честно скажу — не очень понимаю, зачем он нужен такой статичной страницы. Разбираться в нём не хочется, но можно предположить, что это для той самой невидимой нафигации с корявыми шрифтами. Правда, прелестно? Должно быть, разработчики очень постарались, выбирая из всех возможных решений наиболее эффективное в плане объёма — то есть наиболее эффективно этот самый объём занимающее ^_^

Код тела целиком анализировать я даже боюсь ^_^ Намечу основные баги и хватит. Ну, про элементы Transitional, который мастдай уже по-моему года этак с 99-го, я молчу. Причём элементы эти используются щедро и в огромных количествах в виде тегов вроде «font face=…». Впечатляют инлайн-стили вроде «style=»width:680px; height:150px; position:absolute; left:-3px; top:0px; z-index:1;»» чуть ли не на каждом параграфе (нет, к счастью абсолютное позиционирование для каждого параграфа не применяется!) — интересно, а зачем им тогда внешняя таблица стилей?

Огромная куча таблиц внутри таблиц тоже «приятно радует». Особенно с учётом того, что человек, не очень хорошо знающий HTML, взглянув на страницу увидит там всего лишь одну таблицу с двумя колонками посереди страницы и ещё одну таблицу из трёх колонок — футер. А человек, знающий HTML достаточно хорошо может, в принципе, придумать и решение вообще без таблиц.

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

Разумеется, все теги щедро разбавлены отступами, состоящими порой из нескольких десятков пробелов (конечно, без табуляций — зачем экономить на объёме?).

И это всё лишь малая доля всевозможных багов. Если же насильно впихнуть в страницу DOCTYPE HTML 4.01 Transitional, и прогнать это дело через валидатор HTML то можно увидеть ещё и как минимум 17 чисто синтаксических ошибок в коде.

Если верить тегу «meta», всё это безобразие обязано своим появлением на свет замечательному мелкомягкому редактору FrontPage 4.0. Но вообще-то, если по-хорошему, этим можно объяснить (не оправдать!) только кривизну кода. Типографика и грамотность остаются на совести дизайнеров и прочего народа.

И ещё — я вообще-то не дизайнер, не наборщик и вообще не очень дружу с русским языком. И даже при этом я нашёл тут такую охапку глюков, багов и других недостатков… Наводит на мысли… Вдобавок к этому факту прибавьте ещё тот, что вообще-то в качестве образца был выбран далеко не самый плохой сайт рунета ^_^ Я бы даже сказал — относительно неплохой… Во всяком случае ему далеко до сайтов некоторых относительно крупных компаний, при входе на главную страницу которых из чего-либо кроме IE, посетитель любуется на такую красивую пустоту весом килобайт этак в 100…

Автор: Alqualos

Неудачник, ничтожество. Монстр, неспособный получать удовольствие от убийств, пыток и прочей хрени, которую люди обычно называют словом «жизнь».