Архив за Сентябрь 2009

  • Zen Coding онлайн

    Специально для 404fest доделал новую версию Zen Coding под номером 0.5. Анонс этой версии и всех нововведений появится в ближайшие дни (сначала для Eclipse, потом через несколько дней и на остальных редакторах). Также, для этого фестиваля добавил поддержку еще одного редактора — editArea, который представляет собой редактор исходного кода, работающий прямо в браузере. Так что все прелести Zen Coding теперь можно оценить в онлайне и даже поставить его себе на сайт или в CMS.

    Метки: ,
  • Домашка №1: результаты

    Из 27 присланных работ результаты разделились следующим образом:

    • Холодно — 18
    • Тепло — 7
    • Горячо — 2

    В «Холодно» автоматически отправились все работы, где логотип находился между первым и вторым пунктом меню в HTML. Во-первых, это слишком просто и не интересно. Во-вторых — как правильно и своевременно заметил DeMx — такую конструкцию достаточно сложно сгенерировать на стороне сервера. Дело в том, что далеко не каждая CMS позволяет настолько легко вмешаться в генерацию стандартных компонентов. То есть упрощая себе работу на клиенте, сильно усложняем ее на сервере. Более того, в этом случае происходит смешивание данных и представления, а это вряд ли закончится чем-то хорошим. И если в контексте меню с логотипом особых проблем не видно, то в других ситуациях, когда дело будет касаться, например, контента и бокового меню — проблемы точно возникнут, в основном со стороны администрирования простым пользователем.

    Соответственно, правильным решением было отделить меню от логотипа, что и сделали другие 7 участников. Практически все они поступили одинаково: сместили первый пункт влево с помощью right: 100%; margin-right: 5%, тем самым выполнив условие с одинаковым расстоянием между пунктами меню. Однако засыпались на условии соблюдения выравнивания логотипа по базовой линии. Большинство «на глаз» подобрало значение смещения в em’ах, однако это не дает точного результата на разных ОС и при произвольном размере шрифта.

    Но два горячих парня — Ante и scorpix — решили поступить немного иначе. Правильно решив, что высокая картинка будет ровно стоять только на сплошной текстовой строке, они сделали все элементы инлайновыми. Scorpix просто написал все span’ами, а вот Ante сделал красивую и логичную HTML-конструкцию (которая совсем не понравилась IE и Fx2), превратив элементы в инлайн-блоки. Он и получает приз чикуёнковской симпатии.

    Я в своем решении поступил точно так же, как и ребята из категории «Тепло» — сместил первый пункт меню с помощью right: 100%; margin-right: 5%, разместив логотип абсолютом поверх меню. До первого пункта меню можно добраться двумя способами: через селектор :first-child и одноразовый expression для IE, либо указав этому элементу особый класс (что я и сделал). Естественно, я столкнулся с проблемой выравнивания логотипа по базовой линии. Можно было просто указать приблизительное смещение элемента в em’ах, чтобы выровнять логотип по тексту, а все нестыковки при изменении размера шрифта назвать придирками. Но если вы хотите заставить вашего дизайнера биться в экстазе, я покажу вам простой трюк, который позволит точно выровнять логотип по тексту.

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

    text1

    Это не совсем то, что нам нужно: размер строки должен зависеть только от размера шрифта. Поэтому мы просто избавляемся от влиния высоты элемента с помощью отрицательного марджина (в качестве значения указываем высоту картинки):

    text2

    Осталось, чтобы в нашем блоке с логотипом (он абсолютно спозиционирован, помните?) появилась полноценная строка. Для этого достаточно просто поставить пробел после картинки :) Смотрим, что получилось в итоге.

    Скоро будет второе задание, на этот раз создадим что-нибудь полезное для общества.

    Метки: , ,