Посты с тэгом «домашка»

  • Домашка №2: результаты

    Во второй домашке приняло участие 11 человек, поэтому можно сделать мини-рецензии по каждому участнику. На этот раз победителя нет, так как большинство участников прекрасно справились с задачей (честно признаюсь, не ожидал такого) и каждый должен сам для себя выбрать оптимальный способ, исходя из своих отношений к IE6, который является главной головной болью при решении подобных задач. Всё-таки, его доля на рынке с каждым днём становится все меньше и меньше. Если чьё-то решение пропустил — пишите в комментарии, обязательно добавлю.

    Результат домашки состоит из двух частей, вторую размещу завтра/послезавтра.

    Ante

    http://stanut.by/_/dz02/quad/ — 5 элементов, 1 спрайт, 1 expression для IE6

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

    Степан Резников

    http://stepan-reznikov.appspot.com/static/homework2-decor/index.html — 10 элементов, 1 спрайт

    Решение получилось совсем без хаков для IE6 (фильтр AlphaImageLoader не считается), но смущает количество декоративных элементов — целых 10 штук.

    daer

    http://chikuyonok.ru/u/hw2/daer/templates/round.html — 8 элементов, 2 спрайта, DD_belatedPNG для IE6, не зависит от высоты контента

    Чем-то похоже на решение Стёпы, только элементов 8, а не 10, и используется два спрайта вместо одного. Однако это решение не ограничено по высоте, что является плюсом. Очень некрасиво моргает при ресайзе в IE6, требует много времени на инициализацию из-за DD_belatedPNG.

    GreLI

    http://chikuyonok.ru/u/hw2/greli/homework2.html — 6 элементов, 1 спрайт, очень много исправлений для IE

    Решение, в целом, неплохое, но очень сильно смущает обилие исправлений для IE — то, чего изначально нужно было избежать. Поддерживать такой код довольно сложно и трудоёмко. Однако решение интересно прежде всего тем, что GreLI виртуозно воспользовался багом IE для достижения необходимого результата:

    В моём примере кстати вообще нет overflow. Для обрезания в IE6 используется то, что за пределами элемента с hasLayout отображаются только блоки с position:relative. Ну или абсолютно позиционированные. Декоративные же либо позиционируются абсолютно с клипингом, либо проставлен position:static. Такое вот полезное применение бага.

    Отсутствие overflow означает, что в блок можно поместить элемент, который будет отображаться за его пределами (например, кнопка закрытия окошка). Отдельный плюс GreLI за подробное комментирование кода.

    kizu

    http://test.kizu.ru/crnrz/var-1001.html — 6 элементов, 1 спрайт, много исправлений для IE
    http://test.kizu.ru/crnrz/var-2002.html — 7 элементов, 1 спрайт, 1 expression для IE, много исправлений для IE, не зависит от высоты контента

    Скептически настроенный kizu прислал целых два очень неплохих варианта, один из которых не зависит от высоты контента, что обошлось ему в один дополнительный элемент и expression для IE. Ну а само решение грешит теми же проблемами, что и у GreLI: большое количество исправлений для IE.

    frozenbear

    http://epoint-group.ru/css-work/round-corners/ и http://epoint-group.ru/css-work/round-corners-v2/ — 4 элемента, 1 спрайт, очень тяжеловесное решение для IE6, проблемы в Opera 10

    Рекордсменом по экономии декоративных элементов стал frozenbear: его решение использует всего 4 элемента. Что вышло боком для IE6: мой бедный ослик сначала долго думал, открывать ли ему эту страницу, а после 2—3 минут раздумий таки очухался и показал решение во всей красе. А все из-за специального скрипта, который генерирует кучу блоков с фильтрами, тем самым сильно нагружая IE6. Кроме того, есть проблемы в браузере Opera с отображением инлайнового блока. Вывод: для Opera верстать сложнее, чем для IE6 :)

    Но больше всего мне понравился подход к созданию спрайта. В первом случае у части изображения отсутствовала тень, что позволило наложить друг на друга две половинки одной картинки без ненужных перехлёстов полупрозрачных областей. Но у такого подхода есть один недостаток — максимальный размер блока ограничен только половиной размера изображения. Этот недостаток был исправлен во втором примере тоже довольно необычным способом: прозрачность тени была увеличена в 2 раза. При наложении друг на друга двух половинок спрайта тень получалась именно такой, какой была в макете.

    Anton Poleshchuk

    http://chikuyonok.ru/u/hw2/ap/ — 6/5 элементов, 1 спрайт

    Очень хорошее решение: минимум исправлений для IE6 (вместо height: 1%; можно было бы написать zoom: 1 в основном CSS), нет expressions. Практически полностью повторяет моё решение :)

    Vii

    http://chikuyonok.ru/u/hw2/vii/ — 5 элементов, 1 спрайт

    Решение очень хорошее, особенно понравилось то, что декоративные элементы находятся рядом, а не разбросаны по всему блоку. Но маленький недостаток всё-таки есть: это необходимость указать отдельно для IE6 свойство clip.

    Revers

    http://rg-jam.ru/revers/block_shadow.html — 5 элементов, 1 спрайт, проблемы в Opera

    Тут особо нечего сказать: минимум элементов, минимум правок для IE6. Очень хорошее решение. Но есть проблемы в Opera при отображении инлайнового блока.

    Владислав Трушин

    http://chikuyonok.ru/u/hw2/sloter/ — 7 элементов, 1 спрайт, тяжелое решение для IE6 (VML, expression)

    Для IE6 решение получилось чересчур громоздким: некэшируемые expressions для размеров блока, VML для отрисовки PNG. Всё это отрицательно сказывается на производительности.

    Олег Коровин

    http://olegkorovin.spb.ru/magicframe/ — 6 элементов, 1 спрайт

    В сравнении с другими решениями, у Олега для декоративных элементов не используется position: absolute. У этих блоков относительное позиционирование, а нужного расположения блоков Олег добивается с помощью отрицательных марджинов. Довольно интересный подход, стоит обратить на него внимание.

    Только в IE6 все довольно плохо: при ресайзе окна начинают пропадать блоки, не работает инлайн.


    На этот раз домашка получилась именно такой, какой задумывалась изначально, а именно: обмен опытом при решении одной и той же задачи разными людьми. Лично я уже взял на вооружение некоторые приёмы, предложенные читателями. Большинство работ я комментировал очень кратко — всё потому, что у них используется одна и та же идея для организации элементов и спрайта, подробное описание которой — в следующем посте.

  • Домашка №2: тень

    Веб-технологи всего мира ненавидят дизайнеров, которые рисуют вот такие блоки:

    screenshot

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

    Предлагаю читателям придумать универсальный способ верстки таких блоков, на который можно будет спокойно ссылаться и дизайнерам, и технологам (и который попадет во все учебники по HTML/CSS :) ). В Техногрете уже есть что-то подобное, но лично меня этот способ не устраивает по многим параметрам: это и большое количество декоративных HTML-элементов (9 штук), и запредельное количество хаков для IE, и неспособность работать в IE с включенным доктайпом. Однако оттуда можно почерпнуть некоторые интересные мысли.

    Итак, хороший способ должен:

    • работать во всех современных браузерах, включая IE6;
    • не использовать JavaScript, только HTML и CSS;
    • одинаково хорошо работать как для блоков с заданной шириной (пиксели, проценты, em’ы), так и с шириной auto;
    • содержать как можно меньше декоративных HTML-элементов (количество элементов в дереве напрямую влияет на производительность сайта);
    • использовать как можно меньше отдельных изображений (в идеале должен получиться один спрайт).

    А настоящие джедаи должны выполнить следующие условия:

    • Способ должен одинаково хорошо работать как для блочных элементов, так и для инлайновых: структура HTML остается одинаковой, правки вносим только в CSS.
    • Не использовать expressions в IE. В крайнем случае — одноразовый expression.
    • Использовать как можно меньше хаков.

    Вот вам заготовки:

    decor1decor2

    На основе этих заготовок нужно сделать решение, выложить его куда-нибудь к себе на хостинг и оставить ссылку в комментариях. Если некуда выложить — присылайте архив мне по почте. Обсуждение результатов будет примерно через неделю.

  • Домашка №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

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

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

    Метки: , ,
  • Домашка №1: нестандартное меню

    Ну что, начнем делать домашки потихоньку?

    Я сейчас делаю проект, в котором есть вот такое меню:

    design1

    Вроде все стандартное, но за одним исключением: после первого пункта меню стоит логотип компании. Само меню набрано обычным шрифтом (Arial), а логотип — фирменным, поэтому вставляется картинкой. Дизайнер хочет, чтобы меню работало вот так:

    guides

    Расстояние между пунктами — 5% от ширины контейнера, все выравнивается по базовой линии. Как бы вы это сверстали? Даю наводку: крутое решение должно выдерживать любое (в разумных пределах) изменение размера шрифта и требовать минимального вмешательства в серверную часть, которое все это генерирует.

    Свое решение нужно выложить где-нибудь на сервер и запостить ссылку в комментариях (никаких архивов, ссылка прямиком на сверстанную страницу). Если выкладывать некуда — постите коммент и высылайте мне архив, я размещу у себя на сервере и поставлю ссылку. Итоги будут подведены через неделю, 4 сентября в понедельник, 31 августа.

    Правила домашки

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

    Все публикуемые задачи на 100% решаемы — это значит, что у меня либо есть готовое решение, либо я знаю, как это сделать.

    Метки: , ,