В очередном параграфе Лебедева речь идёт о логике и эстетике в дизайне. В качестве иллюстрации приводится схема линий лондонского метро.

Схема линий лондонского метро — одно из величайших художественных произведений человечества. Я уже излагал такую свою точку зрения, но не могу не повториться; каждый раз, когда я вижу её, я восхищаюсь гениальностью её создателя. Это действительно очень красиво. Почему на месте, где должна висеть эта схема, висит Джоконда — для меня загадка.

Может быть, это французы из вредности? Они ведь ещё на «Hello» не отвечают или отвечают, сделав такое выражение лица, что разговаривать дальше не особо хочется... (Правда, если сказать «Bonjour, do you speak English?» — уже легче.)

См. также:

• Transport for London
• London Tube Map (PDF, 130 KB)

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

• Насколько уместен вариант главной полустраницы-полузаставки с возможностью выбора языка? Мне лично больше нравится, когда сайт сразу открывается на русском, а уже там можно переключить на английский (или наоборот, не важно, главное, что сразу открывается контент).
• Если мы читаем один из разделов по-английски, должен ли клик по логотипу вести на Самую Главную Страницу, или же на главную английскую страницу? Мне лично кажется, что если человек зашёл на английскую версию, то дальше вся навигация должна работать только по английской версии.

Приветствуются так же любые общие рассуждения на эту тему.

Некоторые интересовались что это и почему это — STOP. Рассказываю всё по-порядку.

В реестре e2 хранит текущую свою версию. При инсталляции он туда её записывает, и потом использует:

• Когда нужно показать, какие есть обновления (показывает обновления начиная с вашей версии + 1 и до последнего);
• В процессе скачивания обновлений, чтобы определить, какие именно файлы нужно скачать (скачивается только то, что изменилось);
• После скачивания обновлений, чтобы сделать нужные изменения в структуре базы и/или реестра.

После установки обновлений e2 записывает в реестр ту версию, до которой он обновился, и цикл повторяется.

Теперь предположим, следующее. Вы устанавливаете дистрибутив v555 и через некоторое время обновляетесь до v666. В ходе обновления база и реестр нужным образом переделываются, чтобы v666 продолжала работать как ни в чём не бывало. Неожиданно вы понимаете, что v555 вам нравится больше (потому что не такое страшное число) и решаете вернуться на неё, заменив core.php старым.

В результате e2 больше не открывается, а вместо этого умирает со словами:

STOP 0x0200 VERSION_CONTROL

Это происходит потому, что версия core.php меньше чем та, которая записана у него в реестре. Если бы в e2 не было этого сообщения STOP, то старый core.php бы попытался работать с данными, новый формат которых ему неизвестен. К чему это могло бы привести — никто не знает. Поэтому на всякий случай, чтобы ничего не повредить, e2 останавливается.

Что же теперь делать? Во-первых, как уже понятно, всё данные целы и невредимы благодаря этому STOP’у, поэтому не нужно паниковать. Во-вторых, есть два пути восстановления нормальной работы e2:

• Вернуть на место ядро v666 или более позднее и наслаждаться им, забив на суеверия (рекомендуется!)
• На свой страх и риск вручную изменить в реестре версию на v555, чтобы version control не догадался, что вы пытаетесь перейти на более старую версию (не рекомендуется!)

Если вы собираетесь производить манупуляции с реестром, то лучше сначала сохраните все свои данные куда-нибудь в надёжное место.

Клиент e2NP теперь может работать не только с e2. Если вы хотите отображать на своём сайте текущий играющий трэк, но не хотите ставить e2, то скачайте новый e2NP v3.2. В ini-файле пропишите:

[Server]
Host=yourserver.com
Fullpath=/np.php?password=yourpassword%%

Теперь np.php будет вызывать каждый раз при смене трэка. В нём вы можете проверять пароль, а также:

 
• $_GET[’track’] — название текущего трэка
 
• $_GET[’pos’] — позиция, в трэке в момент, когда e2NP его обнаружил
 
• $_GET[’length’] — длина трэка
 
• $_GET[’cv’] — версия e2NP (передаётся только один раз!)

Ещё для идентификации e2NP можно использовать строку юзер-агента, которая равна e2NP.

В $_GET[’track’] на самом деле содержится не название текущего трэка, а заголовок окна WinAMP. Разбивать эту строку на название группы и трэк вам придётся вручную.

Кроме того. $_GET[’pos’] — это не то же самое, что $content[’nowplayin’][’elapsed’] в шаблоне design_all в e2. Дело в том, что e2NP чаще всего будет обнаруживать ваш трэк через 1-2 секунды, после начала его воспроизведения; именно это число и будет передаваться вашему np.php. В случае же с e2, elapsed содержит именно текущую позицию, т. к. e2 прибавляет к позиции, полученной от e2NP, то время, которое прошло с тех пор, как эта позиция была получена... Уф. В общем, если вы хотите пользоваться e2NP без e2, то либо всё это нужно будет реализовывать самостоятельно, либо придётся ограничится только названием трэка.

Vibe Tribe, наконец выпускают альбом. Я его, разумеется, хочу, потому что то, что у меня есть от Vibe Tribe просто blows my socks off, как говорят всякие сумасшедшие наркоманы на разных форумах (смайлик). А обложка альбома, например, сделана с намёком на обложку Infected Mushroom «Classical Mushroom»

Студия Лебедева переделала логотип Инвестсбербанка, и уверждает, что «Новый логотип стал удобочитаемей и визуально заметнее».

Мне же кажется, что новый логотип стал вообще нечитаемым набором букв, хотя шрифт, конечно, красивее.

Заметка изначально опубликована под названием «Грейдеры, трактора» и изменена 20 мая 2020 года

Ну, и ещё одно моё детище, uds-germes.ru — сайт компании, которая продаёт всякие грейдеры, трактора и прочую технику жёлтого цвета.

См. также: Портфолио

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

Насколько я понимаю, табличная вёрстка deprecated в связи с тем, что таблицы, вроде как, не для этого придумали, а для таблиц: там, дебет — кредит. И, разумеется, это правильно — избавляться от таблиц в качестве элементов вёрстки. Точно так же, как правильно избавляться от <p></p><p></p> или, например <br /><br /><br /> в качестве отступов.

Тем не менее, идеология табличной вёрстки хороша и даже, как я уже сказал, часто работает лучше CSS. Мне кажется, что был бы весьма полезен элемент типа <mt> (markup table), который работает так же, как <table>, но а) никогда не рассматривается как смысловая таблица, и б) не имеет никаких зашитых в браузер стилей отображения.

Например, есть у нас <p>, а есть <div>. Они почти одинаковые, только <div> не несёт смысловой нагрузки и не имеет полей. Вот был бы <mt>, у которого нет полей, cellspacing’а и прочего cellpadding’а — жизнь была бы в радость.

Ну вот скажите мне, какой смысл писать длинные занудные заметки, подробно рассказывая о том, как решить ту или иную проблему? Читать их всем лень, комментируют их вяло, никакой романтики.

Всё-таки, если написать «Mozilla — гавно», жить становится намного веселее.

Update: Кстати, вот ещё что подумал. «Mozilla — гавно» довольно удобная фраза. Вот если написать заметку «2+2=4», то всем на неё будет наплевать — всем и так понятно, что это так, что тут говорить. Если написать «В Пекине, столице Индии, 2+2=4», то тут же начнут писать комментарии: «Дурак, Пекин — столица Китая!» — и будут правы. А вот про Мозиллу получается, и правду написал, и комментариев много, а если и скажут, что дурак, то, понятное дело, будут не правы. Надо такие фразы сохранять...

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

Описание существующих проблем браузеров интересно, описание решений этих проблем интересно вдвойне, крики «маздай» ничего кроме зевоты не вызывают.

Данил Иванов, imfo.ru, вот здесь

Попробую для разнообразия последовать этому принципу и написать вдвойне интересную заметку. Расскажу-ка я о том, как я верстал airlaid.ru и с какими проблемами столкнулся. (Чёрт возьми, не могу не заметить, что с этими проблемами я не столкнулся в Опере.)

Вот такую штуку мне надо было получить:

airlaid-markup/result.gif Результат

Думаю, очевидно, что имеется в виду вёрстка в три колонки, т. е. ширина главного меню (и нижней плашки под копирайты) составляет 1/3 ширины окна; выравнивается и то, и другое посередене. Для простоты я решил делать колонки шириной 33%, 34% и 33% соответственно. Всякая шелуха вокруг нас интересует мало, поэтому рассмотрим упрощённый вариант задачи:

airlaid-markup/airlaid1.gif Упрощённый вариант

Итак, нам нужно сделать просто трёхколоночную вёрстку. Сложность здесь представляет (как оказалось) задача скругления краёв у синих плашек. cutДля начала я нарисовал 4 вот таких вот уголка для разных мест, антиалиаснутых на нужном синем фоне (восьмикратное увеличение by Photoshop):

airlaid-markup/corner.gif Такой вот уголок

Думаю, что вы в курсе, что клетки, закрашенные в шахматном порядке — это прозрачность?

Эти уголки были расставлены в нужные места вот так:

#main-menu  {
  position: relative; 
  left: 33%;  top: 0;  width: 34%;  height: 170px;
  background: #189CC0;
}
#menu-lc  {  position: absolute;  left: 0;  bottom: 0;  }
#menu-rc  {  position: absolute;  right: 0;  bottom: 0;  }

<div id="main-menu">
<img id="menu-lc" src="menu-lc.gif" alt="" />
<img id="menu-rc" src="menu-rc.gif" alt="" />
</div>

Аналогично была сделана и нижняя плашка. Несмотря на то, что вроде бы всё в порядке (всё же в порядке, да?), это не захотело правильно работать в IE и Gecko-браузерах. А именно: при некоторых значениях ширины окна браузера получались вот такие глюки:

airlaid-markup/bug-ie.gif Глюк в IE 6 при 1024 и 1600 пикселях

Internet Explorer 6.0, при 1024 и 1600 пикселях

airlaid-markup/bug-gecko.gif Глюк в Firefox 0.9.2 при 800 и 1024 пикселях

Mozilla Firefox 0.9.2, при 800 и 1024 пикселях

Забавно, что при ширине окна 800 пикселей IE показывал всё правильно, а FF отлично справлялся с вариантами 1152 и 1600. Целенаправленно я проверял только более-менее вероятные ширины окон, однако в обоих браузерах наблюдался такой эффект: при плавном изменении горизонтальных размеров окна глюк то появлялся, то исчезал в совершенно хаотичном порядке.

Я специально повторил эту вёрстку для «упрощенной задачи», причём вотнул стили прямо в HTML, чтобы интересующиеся могли не сильно напрягаясь посмотреть, что да как. Откройте это с помощью IE и/или Mozilla, поизменяйте размеры окна.

airlaid-markup/see-yourself Открыть!

Первая приходящая на ум вероятная причина глюка: проценты в разных местах округляются по разным правилам — где-то в сторону меньшего, а где-то — в сторону большего. Однако такое объяснению проходит только в случае с IE; обратите внимание, когда изменяешь ширину его окна, он то показываёт всё правильно, то показывает уголок на один пиксель левее, чем нужно. В Mozilla же происходит намного более интересный эффект: она иногда показывает всё правильно, иногда показывает уголок на один пиксель правее чем нужно, а иногда — на один пиксель левее. Чтобы не быть голословным, приведу конкретные цифры: при ширине 800 пикселей уголок сдвинут вправо (как на рисунке выше), при 814 всё отображается правильно, а при 828 пикселях уголок сдвинут влево (как на рисунке про IE). Объяснения такому глюку я уже придумать не смог.

Начал я пытаться эту проблему решать. Сначала я попробовал запихать оба нижних уголка меню в таблицу, сделать её шириной 100%, поместить в левую колонку левый уголок, написать там align=«left», а правую — в правый и написать align=«right». Но в результате получил ровно тот же самый эффект (вроде бы, в обоих браузерах). Тогда у меня появилась сумасшедшая мысль: позиционировать уголок в нужные места javaScript’ом. Вариация на эту тему: подставлять в right: иногда -1px, иногда 0, иногда 1px, в зависимости от резрешения и браузера. Так можно было бы сделать, чтобы в стандартных разрешениях всё работало OK. Но этого я даже не пытался делать — слишком уж уродливое решение.

В конце концов я придумал вариант, при котором задача решается, а уродливость её решения, скажем так, остаётся на допустимом уровне. Я сделал вот что:

#menu-rc  {  position: absolute;  right: -1px;  bottom: 0;  }

И нарисовал для этого места специальный вариант уголка (посмотреть на специальный вариант уголка). Аналогичный спецуголок был нарисован и для нижней плашки. Результаты вы можете увидеть на сайте airlaid.ru.

Внимательные товарищи заметят, что под Gecko глюк немножко остался, но это уже совсем мелочи. Причина этого глюка частично в том, что у Gecko, как я уже сказал, не два, а три варианта расположения уголка (-1px, 0 и 1px), а моё решение 100% лечит только от варианта с двумя расположениями, т. е. как IE.

В общем, такие дела.