Håkon Wium Lie, что-то рассказывал кружку интересующихся.
Видите как размыта рука? Это специально!

Håkon приехал в Киев выступить от Opera в рамках Educamp. Это событие для студентов.

Для тех кто не в курсе: Håkon Wium Lie создал первую спецификацию CSS, тест Acid2 также является его идеей, кроме того он работал с Тимом Бернерсом Ли в CERN, на заре интернета.

Из разговора

Как попал в Opera (Håkon CTO в Opera Software): «в те времена я пытался помирить Netscape и Internet Explorer. Это было нелегко. И тут, я узнал, что мои коллеги из Норвегии разрабатывают свой броузер! И я поверил, что программное обеспечение можно делать за пределами США. Ну и влиять на разработку броузера, сделать его идеальным, было очень приятно.»

Почти половина интернет-траффика в Осло — Опера. Это из-за того, что Opera mini шлет туда адрес набранный в телефоне, а из Осло, пользователю высылается обработанная страничка. Примерно в 10 раз меньшая по размеру чем оригинальная, что экономит время и деньги.

Часто говорил об Opera «везде», на компьютерах, на мобильных, на приставках и т. п. Они активно продвигают идею использования броузера повсюду. Украина и Россия, кстати, входят в топ-5 стран по популярности Оперы. Я сам удивился кол-ву Опера пользователей на его презентации.

Спросили: насколько перспективен еще один броузер? Ответил: «Сейчас это кормит 500 сотрудников, и компания продолжает расти. Броузеры становятся все важнее, разные броузеры для разных целей. Поэтому, я за еще один броузер.»

Блочную модель придумал Håkon и Bert Bos. Сказал что вопрос спорный, и что теперь же у всех есть box-sizing, расслабьтесь. Его приверженность к той модели поясняется, вобщем, очень легко. Он технический человек, он уже много лет проверяет почту через emacs. Он shell-guy, про маки сказал, что это не совсем его стиль, да и дорогие они.

Его phD thesis’ом (это не тот, но похожий) в MIT стал… CSS.

Кажется, первая html-страничка.
Была на одном из слайдов в презентации

О группе CSS ему уже несколько раз говорили, но они ему не очень нравятся, не слушает. =)

Про микроформаты: «круто было бы реализовать поддержку мироформатов в Opera Mini, но к сожалению мобильные ОС не дают доступ к адресной книге…»
С микроформатами в обычной Opere они пока не торопятся, так как не видят ясного применения для них. Как оно вобщем и есть на самом деле. =(

Больше всего он сейчас жалеет, что в CSS1 они не реализовали border-radius. Неудобно ему за все эти обертки и хаки.

Очень заинтересован веб-шрифтами. Надеется, что в течении 10 месяцев font-face реализуют во всех броузерах. По крайней мере он активно продвигает это сейчас.

На вопросы о будущем веба отвечал так: сам веб не так сильно изменится, как способы его использования. Он станет (стал?) основным источником информации, а не одним из. Чтобы доказать это Håkon даже написал книгу на HTML . Ну и входит в правление проекта PrinceXML (генерация PDF из html+css)

Кроме оперы ему импонируют команды Webkit и Mozilla. Часто шутил про ИЕ, оно и не удивительно. Ведь это он тогда написал открытое письмо. Одному парню не ответил на вопрос (в шутку, разумеется), потому что у того была майкрософтовская футболка с IE. =)

Черт, ребята, да он придумал CSS! Вы понимаете? =)

Håkon и какой-то парень в полосатой рубашке

И короткое видео его общения в кулуарах, ничего сверхъестественного, но я сильно благодарен одной хорошей девушке, за то, что она оказалась там с камерой и поделилась со мной видео =):

Много информации из видео, я упоминал в посте.

Еще я там выступал

Моя презентация была об основах HTML, потому вряд ли будет интересна здешней публике. Я рассказал о том, как я стал HTML-верстальщиком (меня укусил другой HTML-верстальщик). Но, чтобы скрыть эту тайну, мне пришлось выдумать правдоподобную историю про укр.нет и мой блог (17й комментарий). В зале, кстати, на моем выступлении было примерно половина девушек. Надеюсь в нашей профессии их будет все больше ;)
Вместе со мной выступал Геннадий Осипенко. Который очень весело рассказал о дизайне, его часть презентации называлась «Все мальчики - диджеи, все девочки - модели.»

Блочная модель (box model)

Думаю все, кто начинал верстать, столкнулись с тем, что модель вычисления ширины блока вместе со всякими padding и border не очень логична.

синий блок 200px на 200px — контент. А padding и border, как видно, добавлены «извне».
Такова модель w3c.
Скриншот сделан в Firebug.
Еще можно посмотреть иллюстрацию

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

Нет, ну правда: вы задаете колонке ширину 100 пикселей, и небольшую границу в 2 пикселя.
И, вуаля, ширина уже 102 пикселя!
Почему? Если я сказал, чтобы она была 100? =)
Для тех кто не в курсе: если это сделать в ИЕ5, то ширина блока останется 100 пикселей.

Если продавщица хочет больше пространства в коробке, она просто кладет туда меньше товара. А не увеличивает коробку волшебной палочкой. Так работает этот мир.

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

Общепринятое пояснение: width — это не ширина «блока», а ширина его «содержимого». Что само по себе красиво в своей алогичной противоречивости. Надеюсь я применил достаточно букв, чтобы все поняли, что мне модель w3c не нравится.

Не то чтобы я винил кого-то, просто так сложилась история стандарта, просто в w3c на тот момент было слишком много технарей. Может быть разработчики броузеров даже сэкономили на этом пару строк кода. И, наверное, кому-то тогда так было проще.
Накипело, не упустил повод высказаться. ;)
Но, забавно не это.

В чем забава?

Забава в том, что на данный момент все современные броузеры (включая IE8 Beta) поддерживают свойство box-sizing. Его смысл: переключать блочную модель от W3C-шной к traditional (или от microsoft). Я сделал специальный пример, где хорошо видно, как лишь с помощью CSS в Safari, IE8, Firefox, Konqueror, Chrome и Opera можно сымитировать старую добрую блочную модель от IE5. Это правда круто, и могло бы сэкономить сотни тысяч дивов-оберток в наших верстках.

И… начинают появляться посты с обсуждением новой модели. Удивительно, неужели и правда можно задавать границу в 2 пикселя, а ширина блока по прежнему будет 100! Ура! CSS3 принесла нам еще одно полезное свойство!
Блочная модель 10-летней давности возвращается!

В конце

Я уже года три не вспоминал о блочной модели, я её просто запомнил. Но всплеск интереса к «новой» удобной блочной модели меня сильно позабавил.
Это не критика W3C, все равно я буду играть по их правилам, скорее просто любопытные наблюдения за тем как всё возвращается на круги своя. =)

• История модели в Википедии
• Пример box-sizing
• Более подробное описание box-sizing

P.S.: я называл модел «блочной», но это вольный перевод, её еще называют коробочной, боксовой, и чаще всего css box model.

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

Проблема полупрозрачных картинок медленно умирает вместе с IE5-6, но, тем не менее будет актуальна для популярных сайтов еще несколько лет. Вдобавок, дальше станет понятно, почему процентная прозрачность для PNG-8 будет важна и без ИЕ.

Чем они вообще отличаются, эти PNG?

PNG-24:

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

PNG-8 обычный:

доступны 256 цветов, прозрачность только на уровне 0 или 100%. Прозрачность в 50%, например, невозможна.

PNG-8 с альфа-каналами:

доступны 256 цветов, каждый из этих 256 цветов имеет свой показатель прозрачности от 0 до 100%. Возможна прозрачность в 42%.

Казалось бы, «Ну и что? Все равно альфа-каналы в ИЕ работать не будут, толку?».

Однако, толк в том, что полупрозрачные пикселы в PNG-8 при просмотре в ИЕ будут показаны полностью прозрачными. Все остальные броузеры честно отобразят их полупрозрачными. Более того, не будет никакого уродливого серо-белого фона, который видно при просмотре PNG-24 картинок в Интернет Эксплорере.

То есть: все пикселы с прозрачностью от 0 до 99% будут отображены IE как полностью прозрачные.

Как сохранить PNG-8 с альфа-каналами?

Это странно и дико, но сделать это в Photoshop нельзя. (возможно в CS4…?)

Зато такую картинку можно сохранить в Fireworks! Там это делается очень просто, при экспорте выбираем опции:

Трудно ошибиться, нужно выбрать формат PNG-8 и тип прозрачности «Alpha Transparency». Видно также, что в палитре все цвета имеют прозрачность кроме одного (крайнего справа)

Почему этого нет в Photoshop, загадка.

Также существуют утилиты, превращающие PNG-24 в PNG-8. Естественно, при этом качество страдает, но часто с этим можно жить.

Живой пример

Для примера, я сохранил одну и ту же картинку в трех форматах: PNG-24, PNG-8 обычный, и PNG-8 с альфа-каналами (из Fireworks). Все три поместил на узорчатый фон. Вот что вышло:

PNG картинки в Firefox

Ничего особо интересного, кроме размеров картинок. Обратите внимание на вес PNG-24 и PNG-8 файлов, при почти идентичном отображении.

А теперь, в ИЕ:

PNG картинки в IE. Хорошо видно «серо-белое уродство» упомянутое ранее

Вуаля! То, что называется «graceful degradation»!
Сами смотрите, если не верите. ;)
За фон благодарен.

Польза

Вряд ли это знание поможет вам познакомиться с девушкой вашей мечты, или начать наконец делать зарядку по утрам. Но, некоторая польза все же есть.
Во-первых, это экономит трафик. Во-вторых, в большинстве случаев отлично деградирует в ИЕ. То есть, можно применять для всяких некритичных украшательских штучек. В IE будет отображен обычный PNG-8 (а ля GIF), а для всех остальных полупрозрачная красота.

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

Еще по теме

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

• Библиотека превращающая PNG-24 картинку в PNG-8 с альфа-каналами. (и версия c интерфейсом для Mac OS)
• HOWTO: cross-browser alpha PNGs
• PNG8 alpha transparency from Fireworks
• Статья на Sitepoint
• Пример трёх типов PNG из заметки

Уверен, кто-то уже это использовал. Знание это совсем не новое, но малоизвестное почему-то. Потому, был бы рад если бы вы поделились опытом по теме.

Расписание как всегда заполняли с утра

Яндекс об украинской блогосфере

Яндексовцы выступили со стандартной статистикой по украинским блогам. Как оказалось, сейчас в Украине уже 270 тысяч блогов (это и всякие ЖЖ в том числе). Это аж 4% от всего кириллического сегмента блогов (интересно, болгары туда попадают?). За год количество UA-блогов увеличилось примерно в 2 раза. По сравнению с прошлым годом, рост замедлился.

Сервисы для украинских блоггеров

Тройкой самых популярных сервисов среди украинских блоггеров являются liveinternet.ru, mail.ru, livejournal.ru. Самым популярным украинским сервисом — bigmir.net. Но, в то же время, самым медленнорастущим, так что скоро сдаст свои позиции.

Средний украинский блоггер за год повзрослел на год, теперь ему 24 года. Что, по словам, Волнухина, означает что в блогосферу стало приходить меньше молодых блоггеров.
Вообще, общая тенденция такова, что много блогов начатых когда это было модно умерло, а теперь блоги начинают только те, кто правда хочет что-то сказать миру. Российский интернет пользователь вообще стал предпочитать блогам — социальные сети.

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

Маленький Кукуц и большой Яндекс

Конкурс блогов

Список финалистов и победилитей уже опубликован, как и список членов жюри, главой которого я кажусь, благодаря алфавиту и случайно нажатому Enter.

Мне не очень понравились правила конкурса, ведь в финал прошли не совсем лучшие блоги, а отчасти те, кто за себя просил проголосовать читателей. А это, ну, странно как-то. =) Побеждать ведь должны лучшие блоги. Но, это же первый конкурс, и организаторы обещали что-то изменить.
Тем не менее, среди победителей есть очень интересные блоги, Артура Оруджалиева из ITC, Романа Химича, и, слегка слишком многословного как по мне, Игоря Шаститко из Microsoft.
А так же, совершенно случайно набрел на блог Александра Москалюка из Facebook, я писал о его выступлении в отчете о РИТ 2008.

Награждение было очень похоже на оскаров. =) Будет клёво если и в следующем году проведут такой конкурс!
Призы дарил Asus, но ее представитель выступил с весьма странной речью, выставив компанию в не совсем хорошем свете. Во мне даже нет злорадства, но мне захотелось уйти из зала, чтобы они не испортили моё мнение об Asus окончательно. :) Ну, наверное, волновались, бывает.

Google Android

Про систему уже много написано, но было интересно послушать из первых уст. Приятно, что от компании приехало сразу несколько человек, включая инженеров. Основной посыл всего выступления — идеалистический: нам не нужны деньги за операционку, нам нужно увеличить интернет-аудиторию, чтобы больше людей пользовалось сервисами Google. «Будущее интернет = Будущее Google».

В америке устройства на базе Android уже начали продавать (сегодня). Но, насколько я понял, они «залочены». По словам представителя Google, в СНГ устройства появятся когда этого захочет T-mobile. И сам Google к этому уже не имеет отношения.
Платформа открытая и скоро планируются устройства от Nokia, Siemens, LG и еще кого-то там..
Для разработчиков приложений будет открыт сервис похожий на AppStore от Apple. Там можно будет продавать свои приложения, причем без комиссии Google. (как это принято в AppStore).

Затем был доклад о Chrome, но начался он так скучно и банально (рассказывал продажник), да и тема эта уже настолько нудная, что я не выдержал и убежал ;). Выступали также представители Opera и Mozilla. Но это было скорее «мы сюда пришли, смотрите», чем «давайте мы вам расскажем что-то интересное»

В конце

Что-то я много ворчал в посте, на самом деле все было классно, и все недочеты с лихвой покрыты знакомствами! =)
Отчет в этом году короткий и без фоток, ибо большую часть времени я общался с кем-то. Успел встретить Юрия Бойко, Александра Орехова, Макса Берёзу и Йоху, камбоджийского и кыргызского стартаперов и много много всяких разных блоггеров :) Получилось весело. Приходите в следующий раз ;)
Если верить статистике блогкемп посетило больше 800 человек!

Другие отчеты на сайте. И мой прошлогодний отчет.

Ну и забавная фотка про рыбу:

Вооот столько процентов!

За фото спасибо Дегтяревой Ольге, Артуру Оруджалиеву и Владимиру Хмельницкому.
Остальные фото

Как работает clip?

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

Неяркие части картинки на самом деле невидимы. А жаль, да?

Логика этих параметров нетривиальная. Проще всего запомнить что: 1е и последнее число — это координаты левого верхнего угла, а средние два числа — правого нижнего угла вырезаемого прямоугольника. Я сделал специальный интересный пример, чтобы это проиллюстрировать. Если считать что (x1, y1) и (x2, y2) координаты левого верхнего и правого нижнего углов, то вот так все выглядит:

1. clip: rect(y1 x2, y2 x1) /*Логично, не правда ли? может поэтому его никто и не использует?*/

Очевидно, подразумевается, что в будущем появится возможность вырезать эллипсы:

1. clip: ellipse(42px,14px,188px, 200px);

И где-то в CSS3D, я надеюсь, наконец появятся додекаэдры:

1. clip: dodecahedron(42px,16px, 188px, 100px); /*да! для построения додекадра достаточно знать координаты центра его симметрии, и радиус*/

Вы ведь знаете что:

Вселенная представляет собой набор бесконечно повторяющихся додекаэдров

clip: ИЕ и все остальные

Разумеется и тут не обошлось без нестыковок. Согласно спецификации расстояния должны писаться через запятую, вот так:

1. clip: rect(5px, 40px, 45px, 5px);

Однако, при использовании запятых ИЕ не воспринимает значения. Таким образом, приходится писать без них:

1. clip: rect(5px 40px 45px 5px);

Это не совсем валидно, но, тем не менее, воспринимается всеми броузерами. Такие вот милые казусы на окраинах CSS.

png-24 в ИЕ

Пожалуй все уже знают что полупрозрачные PNG-24 файлы в ИЕ6 и ниже не работают. И для их нормальной работы нужно задавать фон как-то так:

1. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src=’MYTERRIFIC.png’)

В этом методе прекрасно только одно: он вообще работает. Но он не позволяет нам использовать background-position. То есть вся крутость от прелоадов и спрайтов со всякими сдвиганиями фона теряется.

Мы можем заменить «crop» на «scale», тогда картинка просто растянется (не повторится), но контролировать background-posiiton не можем. Я думал, что не можем.

Можем! png-24 background-position в ИЕ!

Будем использовать, к примеру, такой вот рисунок, 200 на 200 пикселей. Для пущей простоты вычислений.

В картинке два состояния пункта меню. Каждое размером 200 на 100 пикселей. Если у вас старый ИЕ, она коряво отобразится, мне очень жаль.

Так как все кроме ИЕ уже отображают PNG нормально, то для них сработает обычное:

1. a{
2. height:100px; width:200px;
3. background:url(nav.png) no-repeat 0 0;
4. }
5. a:hover{
6. background-position:0 -100px; /*фоновый рисунок сместится на 100 пикселей вверх, и визуально цвет пункта меню изменится*/
7. }

Для начала заставим ИЕ нормально отображать полупрозрачный PNG (эти стили должен увидеть только ИЕ):

1. a{
2. background:none;
3. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”nav.png”, sizingMethod=”crop”);

Вот что нужно теперь сделать для ИЕ:

1. a{
2. height:200px;/*чтобы вся картинка поместилась в фон, и было из чего вырезать*/
3. clip:rect(0px 200px 100px 0px); /*Вырезаем верхнюю часть картинки*/
4. }
5. a:hover{
6. clip:rect(100px 200px 200px 0px); /*Вырезаем нижнюю часть картинки*/
7. top:-100px;/*Так как clip вырезал нижнюю часть, и оставил пространство вверху, нужно приподнять видимую часть картинки вверх, прямо как на фотках с Надин*/
8. }

Можно любоваться результатом. Работает!

Если словами: при наведении мышки, clip вырезает нижнюю часть ссылки (верхняя некликабельна становится). Таким образом, чтобы визуально она осталась на месте, приходится её поднять на высоту 100px вверх. А кликабельная область остается того же размера.

Ссылки

• Про clip на w3c
• Clip для PNG в ИЕ
• Clip для очаровательной девушки, забыл добавить её в предыдущий пост
• Баг в старых операх
• IE PNG Fix джаваскрипт автоматически производящий манипуляции с clip (спасибо Михаилу Валенцеву за ссылку).

И

Кроме clip, существует так же свойство crop. Отличается только тем, что crop не просто оставляет видимой часть блока, а еще и убирает все остальное (не остается отступов равных размеру картинки по сторонам, как на фотках с «Каталиной»).
Вторым важным отличием этого свойства от clip является то, что никто его не поддерживает. CSS3 Working Draft все-таки.

Свойство интересное, но найти ему применение нелегко. Кроме описанной техники для ИЕ, я слышал еще лишь об обрезании аватар, под квадратный размер, либо подобный же контроль за загружаемыми пользоваталем картинками (когда лень делать это на сервере).

Возможно у вас есть идея?

Canon in D major, Johann Pachelbel (мелодия)

Уже давно меня завораживает эта мелодия из 17 века. Самое меткое слово, которым можно описать её воздействие на меня: жизнеутверждающая. Упрощенная для узнаваемости:

Она настолько прекрасна, что список песен использующих её кусочки, и артистов её исполнявших исчисляется уже не десятками, а сотнями.

• Jerry C сыграл обработанный для гитары Канон
• Про канон, и песни на его основе, и еще один список
• Выступление Rob Paravonian, иллюстрация похожести песен на Канон

Среди тех, кто её использовал Oasis, U2, Coolio, The Beatles (let it be), Bob Marley (no woman no cry), Aerosmith (Cryin), Green Day, Avril Lavigne (Sk8ter boy), Natalie Imbruglia (Torn)….
В настоящее время трудно назвать группу не использовавшую Канон. Удивительно, почти все песни её использовавшие — хиты. =)
Как математик, я конечно понимаю, что это еще и из-за того, что в основе мелодии лежит простая идея. Тем не менее.

«Венский вальс» Штрауса (балет)

Возможно, это потому, что я был на балете впервые, но мелодия “Голубой Дунай”, и гармоничные музыке движения танцоров на сцене, буквально размазали меня по креслу. Были мурашки, холодок, и все прочее.
Чтобы вы поняли, о какой мелодии идёт речь, вот самый популярный ее отрывок:

Я был на балете, и мне понравилось. OMG.

Stop Crying Your Heart Out, Oasis (песня)

Не могу придумать почему она мне нравится, но я её обожаю. Я даже полюбил какую-то глупую типичную американскую комедию, только потому, что там в одном из эпизодов заиграл этот трэк.

Надеюсь братья Галлахеры не обидятся, и не посадят (или побьют?) меня за это.

5 сантиметров в секунду (аниме)

Очень трогательный и красивый фильм. Наверное лучшая работа этого режиссера, и одно из лучших снятых аниме. Красивая картинка, красивый конец, всё красиво. :)

Я до сих пор не понимаю, как жизнь японского школьника смогла настолько мне понравиться, но… Вообще аниме заслуживает отдельного поста, уж больно оно другое, чем всё остальное.
Еще я люблю Cowboy Bebop, но он клёвый, а не «красивый». Ой, черт, лучше отдельный пост!

Linda Bergkvist (художница)

Она рисует мой идеал женщины (или я сделал идеалом то, что она рисует? who cares..).

© Linda Bergkvist

© Linda Bergkvist

Автор картин, великолепная шведка, Linda Bergkvist. Обе картины кликабельны, там увеличенные кусочки, и большой формат.

• Официальный сайт
• Галерея на форуме, где собраны её работы

А еще!

Вот в таком виде мне подарили 4 сезона «House M.D.»:

5 DVD

Это самые красивые диски что мне дарили. Угадывающаяся буква «А», кстати, символизирует первую букву моего ника.

В конце

Эти «вещи» не обязательно понравятся вам, это мой вкус, на который повлияли множество факторов. Но я буду очень рад, если вы поделитесь своим. Я не фанат эстафет, но обязательно поставлю ссылку на ваш пост про красоту. Либо отметьтесь в комментариях.

Надеюсь этот пост скрасил чей-то день =)

P.S.: пост стал участником эстафеты

Простой способ

Задать блокам процентную ширину и min-width:

1. .block{
2. float:left;
3. min-width:200px;
4. max-width:300px;
5. width:25%;
6. }

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

Фактически, это означает, что блоки будут резиновыми при ширине экрана от 800 до 1200 пикселей (200*4 и 300*4).

Плюс javascript

Затем я решил слегка улучшить предыдущий способ, подсчитывая джаваскриптом ширину экрана.
Будем просто считать количество колонок (n), которое подходит для ширины экрана, и задавать соответствующую процентную ширину (100/n) для каждого из блоков.

Вот такой простой скрипт посчитает нам количество колонок (отрывок):

1. cc=Math.floor(document.documentElement.offsetWidth/(230));
   // максимальная ширина блока 230
2. document.getElementsByTagName(’body’)[0].className = ‘columns’ + cc;
   // присваиваем нужный класс для body

И примерно такой CSS, задаст им нужную ширину:

1. .columns1 .block{width:100%} //одна колонка
2. .columns2 .block{width:50%} //две колонки
3. .columns3 .block{width:33%} //три колонки
4. …

Это решение я в итоге и использовал в проекте. Пример.
Но, пока я пришел к нему, я решил понять как это делают Яндекс и Google.

Яндекс вариант, таблицы

В своей выдаче поиска по картинкам, Яндекс использует таблицы. И если страничку посжимать, видно как она подстраивается под ваш экран. Разумеется, я раскопал скрипт создающий этот эффект.

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

И, это работает. Пример. Авторство скрипта принадлежит Виталию Харисову.

Google вариант, массив

Только настоящим криптографам под силу расшифровать джаваскрипт на страничке гугла!

Потратив пару часов, я понял, что они еще на сервере генерируют джаваскриптовый массив с содержимым ячеек таблицы. И затем просто работают с самим массивом, не трогая DOM. На Яндексе сделано так же, только массив каждый раз при ресайзе окна создаётся заново, что, впрочем, происходит довольно быстро.
Массив выглядит как-то так:

1. dyn.Img(
2. “http:/…/micro.html”,”",
3. “1UaobYhmShe-WM:”,
4. “http://…/micro.png”,”119″,”117″,
5. “microformats.org MicroFormats logo”,
6. “”,”",”337 x 330 - 65k”,”png”,”www.andypemberton.com”,”",”",
7. “http://tbn0.google.com/images”,”1″,[]
8. );

Google вариант — это быстро, удобно, но не подходит для обычных людей. Вот страничка с их примером.

В процессе разборок с кодом google столкнулся с таким вот:

function K(a,c,d,b,e,f,h,k,n,p,M,N,O,P,Q,R,S)

Я нахожу это весьма милым. Хотя это и не писалось руками, а результат сжатия. Все равно мило.

На… flash

Удивительно, но один знакомый гениальный дизайнер, создал флэш-версию этой техники. Она занимает всего пару килобайт, и её оптимизации посвящен целый пост.
Людям не любящим flash посвящается. Было бы интересно услышать мнения о производительности примера. Я уже давно убедился, что стереотип чего-то плохого флэш получил незаслуженно.
И живой пример красивого адаптивного флэш-сайта.

В конце

Ссылки на примеры и похожие техники:

• Адаптивная таблица от Yandex (мой пример) и её живой вариант
• Адаптивные флоат-блоки (мой пример), и с джаваскриптом (мой пример)
• Адаптивная таблица от Google
• Switchy McLayout: An Adaptive Layout Technique — техника описанная на alistapart
• Dynamic layouts with adaptive columns — еще один пример адаптивного сайта
• Пример сайта с динамическим лэйаутом и статья об этом
• Красивый сайт на флэш иллюстрирующий эту же идею

Если у вас были похожие проблемы, буду рад если поделитесь опытом!

За фото спасибо shorpy.com, за текст лично Дугласу Адамсу!

Всё красиво

Всё просто

Скриншот нашей цели видно выше. Казалось бы, очевидным кодом будет:

1. <dl>
2. <dt>42</dt>
3. <dd>
4. <strong>Ответ на Вопрос</strong>
5. <a href="#">Купить</a>
6. </dd>
7. </dl>

Добавим такой CSS:

1. dl,dt,dd{
2. float:left;/*флоатим каждый из блоков DL, и оба подблока DT DD*/
3. }
4. dd strong{
5. display:block;/*чтобы название товара и кнопка «купить» были на разных строках*/
6. }

Добавив еще шрифтов и цветов получим это:

Ничто не предвещало беды

Oh my… not again =(

Однако, вот что происходит при ресайзе окна:

Так выглядит в ИЕ

Как видите, блоки в панике, и не могут найти себе места. Не хватает только знаменитого крика «А-а-а-а-а».
Признаюсь, после получаса тщетных усилий чувство паники овладело и мной. Я решил обратиться к умным ребятам в WSG.

WSG to the rescue!

Одно из замечательнейших онлайн сообществ на этой планетке. Веселые австралийцы там спорят о том «как делать сайты для слепых», «каким HTML лучше размечать логотип», и «что такое эти веб-стандарты в честь которых назвали наше сообщество». Но там всегда помогают умным CSS-советом.

Калифорнийский француз, многодетный отец (2!) и вообще положительный человек Thierry, как настоящий воин, не смог пройти мимо моей трудной задачи, и придумал своё решение. Все оказалось до постыдного простым, блоки нужно сделать inline, и задать white-space:nowrap;
Вот такой код нужно было добавить к первоначальному, чтобы все заработало:

1. /*Стили только для IE*/
2. dt,dd{float:none;} /*убираем флоаты*/
3. dt,dd{display:inline;zoom:1;} /*делаем DT и DD инлайновыми, но zoom наделяет их возможностью padding и другими блочными свойствами*/
4. dl{white-space:nowrap;}/*заставляем DT и DD быть на одной строке*/

Попутно, Тьерри поделился забавным ИЕ хаком (из разряда грязных):

1. dt,dd,{float:none;}/*лишняя запятая*/

Вся строка будет понята только IE6-7.
Всегда полезно общаться с иностранными коллегами.
Спасибо Thierry! Вот подправленный и теперь уже рабочий пример.

Идея и код очень простые, но именно потому могут кому-то пригодиться.

Еще об этом

Изначально я пытался решить проблему CSS-таблицами, но к сожалению мне не удавалось сэмулировать это поведение для ИЕ:

1. dl{display:table}
2. dt, dd{display:table-cell}

Это чтобы они вообще ни при каких обстоятельствах не переносились. При сильном сжатии окна, во всех предыдущих примерах, DD таки соскакивал вниз. При таком CSS, не соскакивает. Пример.

И еще вариант!

Как круто и гениально посоветовал в комментариях Влад, все это можно было бы решить вообще одной строкой для ИЕ:

1. dt,dd{clear:right}

Совершенно непонятно почему, что, впрочем, не редкость с ИЕ, но это работает =).
Великолепно иметь в запасе сразу две простых идеи решения такой задачи.

В конце

Хотя проблема специфична, она связана с «флоатами в одну строку». Что, вобщем, встречается нередко. Никогда не знаешь где может пригодиться inline или clear.
Интересной проблема мне показалась еще и из-за внешней простоты дизайна.

• Первый глючный пример
• Пример от Тьерри с display:inline
• Третий пример с table-cell
• Пример от vladfrandom c clear:right

Буду рад если поделитесь своими мыслями по теме! Или задачами =)

Проблема

Поместить блок в одну из колонок одинаковой высоты, и прижать к низу:

Блок внизу колонки

При этом, если вдруг контента в колонке станет много, поведение должно быть таким:

Поведение при длинной колонке

Конечно, умный читатель сразу, подметит что эту картинку внизу можно было бы сделать и обычным фоновым рисунком, с background-position:left bottom. Но что если вместо гениальной картины Малевича внизу будет фраза Ницше?

Текстовый блок внизу колонки

Согласитесь, картинка в формате JPG и Ницше, это как-то глупо.

Вобщем, это я к тому, что туда нужно поместить блок, а не просто фоновую картинку.

Будем считать, что кунг-фу колонок одинаковой высоты все уже умеют делать. Тогда после нехитрого CSS, у нас будет что-то вроде этого:

Обычные две колонки одинаковой высоты

CSS (который уверен все знают):

1. #out{
2. background:#fff url(str.png) repeat-y 0 0; /*колонки “одинаковой” высоты*/
3. }
4. #left{width:200px;float:left;}
5. #right{width:500px;float:right;}

Решение #1, обычное

Идея крайне простая. Так как колонки у нас на самом деле не одинаковой высоты физически (видимость одинаковой высоты создает картинка). То ориентироваться можно лишь по низу обертки, в данном случае #out. Таким образом, достаточно поместить цитату Ницше в левый нижний угол блока #out, освободив при этом место внизу колонки #left:

1. #out{
2. position:relative; /*точка отсчета для absolute*/
3. }
4. #left{
5. padding-bottom:200px; /*место в колонке для нижнего дива*/
6. }
7. #bottom{
8. position:absolute;
9. bottom:0; /*левый нижний угол #out и левой колонки*/
10. left:0;
11. }

Можно посмотреть как это выглядит и работает.

Решение #2

Второе известное мне решение, основано на отрицательных отступах. Мы просто помещаем блок с цитатой после блока #out, и задаем ему отрицательный отступ вверх, вот так:

1. #left{
2. padding-bottom:200px; /*место для нижнего дива*/
3. }
4. #bottom{
5. margin-top:-200px;
6. position:relative; /*чтобы блок отобразился поверх #out*/
7. }

Пример этого метода

В конце

Будь то Ницше или Малевич, мы всегда сможем их прижать к низу ;-)

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

Буду рад если поделитесь идеями на эту тему, или похожими проблемами, которые мы тут же решим все вместе.

Презентация

В ней куча скриншотов и картинок, основную часть информации я проговорил.

Краткое вступление

Кроме рассказа о компаниях и проектах с кодом которых я сталкивался или работал, я рассказал о том, что такое микроформаты, на паре простых примеров показал, как легко их внедрять. Затем рассказал о гугловском API для парсинга XFN связей. Вот несколько ссылок:

• Микроформаты в жизнь — мой старый пост о микроформатах
• microformats.org — официальный сайт микроформатов
• Google Social Graph API, тот самый интерфейс гугла, для получения XFN связей. На примере CSSing
• Portable Social Networks, The Building Blocks Of A Social Web — хорошая статья про социальные сети и XFN
• Fundamentos Web: Social Network Portability — презентация Тантека Челика.

Микроформаты для экономии времени

Проект toluu.com использует микроформаты для заполнения регистрационной инфо. Просто вводите ваш логин с Flickr, Upcoming или Twitter. Информация о вас будет взята оттуда: аватар, имя, сайт.

Убедиться можно на этой страничке (обратите внимание на блок «Use any of these?» справа).

Yahoo & μF

Яху уже может искать по микроформатам, и это замечательно. Запрос нужно отправлять вида:

searchmonkeyid:com.yahoo.uf.hcard YourKeyword

Для поиска по hCard. Ну и соответственно, поиск по hReview:

searchmonkeyid:com.yahoo.uf.hreview YourKeyword

На всякий случай, uf — одно из общепринятых сокращений слова микроформаты (u напоминает μ)
Вот несколько готовых интересных ссылок (скрины в презентации):

• Поиск всех hCard людей, где упоминается фамилия Artyukh, попробуйте со своим ником-именем-фамилией
• Поиск всех hCard, видно, что проиндексировано уже более миллиарда hCard
• Поиск всех hReview о фотоаппарате Canon 400D, забавно что если бы было видно звездочки (оценки), можно бы было судить о фотоаппарате не кликая по ссылкам вообще
• Поиск всех hReview о ресторанах со словом Higura, а вот тут уже видно звездочки, здорово, да?

Для тех кто поленился кликать, вот картинка, значения для сереньких полей берутся из соответствующих полей в hCard (class=”position” etc..):

Микроформаты в действии!

(Синим отвратительным маркером я обозначил места на которые нужно обратить внимание.)

А это уже означает, что микроформаты дают преимущество в поиске. А значит помогают SEO, а значит… приносят деньги.

для такого отображения используется механизм SearchMonkey, который в свою очередь использует микроформаты. Но в моих мечтах яху начнет отображать их автоматически при заданном поиске по hCard или hReview

И ведь ничего не мешает yahoomen поставить вместо этого сложного запроса радиобуттон: «Искать в ревью» (hReview), «Искать в людях» (hCard), «Искать в событиях» (hCalendar).

Кажется, именно так они решили проблему курицы и яйца. Как я уже говорил, поисковых механизмов по микроформатам нет, потому что недостаточно самих микроформатов в интернете. А микроформаты не внедряют на сайтах, потому что нет поиска по ним.

И вот, более миллиарда hCard и 46 миллионов hReview. And counting…

Подробнее о Searchmonkey (кастомизации результатов поиска) читайте в блоге талантливого разработчика Артемия Трегубенко «микроформаты, yahoo, searchmonkey». Там же, пример профиля сайта для mirtesen.ru.

Фотки

Гена решил разрядить обстановку

Геннадий, какой-то парень, зал и сложный вопрос (слева направо)

За фото спасибо Константину Кудрявцеву! Жаль только не видно, что выступали мы с Macbook Air, iBook и iPhone =)

В конце

• Отчет Геннадия Осипенко, там же его презентация с полным текстом доклада
• Другие мероприятия в g-club

Не то чтобы информация из доклада была сильно уникальна, но меня бы заели друзья за то, что я не пересказал свой доклад.

Получилось неплохо! Еще десяток выступлений и мои связки окончательно окрепнут. =)