CSSing – Блог про CSS и все что с этим связано. Новые приемы и технологии и т д. View RSS

Displacement с помощью Pixi 15 Jul 2017 4:00 PM (8 years ago)

Стрим номер 7 и Displacement на SVG и Canvas, результат.

Летающие треугольники и шестой стрим 9 Jul 2017 4:00 PM (8 years ago)

Стрим номер 6 и летающие треугольники, пример того что делаю в видео.

Fragment shaders и стрим #5 2 Jul 2017 4:00 PM (8 years ago)

Пятый стрим и космические Фрагмент Шейдеры, пример того что делаю в видео.

Простой лендинг, GSAP, и немного User Timing API 25 Jun 2017 4:00 PM (8 years ago)

Четвертый стрим и простой лендинг с анимациями, результат в репозитории.

Желе эффект в канвасе 17 Jun 2017 4:00 PM (8 years ago)

Третий стрим и создание желе эффекта в canvas, результат в репозитории.

Верстка адаптивного макета за час 10 Jun 2017 4:00 PM (8 years ago)

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

Первый стрим 3 Jun 2017 4:00 PM (8 years ago)

Записал свой первый стрим, всё что делалось доступно в репозитории.
Буду благодарен за ваше мнение, и что можно сделать лучше :)

Слепая доступность 25 Dec 2016 3:00 PM (8 years ago)

Познакомился с парнем который не видит, но делает сайты.

Мастеркласс Blind Accessibility от Дмитрия Попова

Вчера побывал на мастер-классе незрячего разработчика Дмитрия Попова, он выступал на последнем киевском WSD, и ребята из Frontend-Science организовали отдельный развернутый воркшоп. И это было круто, немного информации, много ответов на вопросы, много реального опыта восприятия сайтов по-другому.

Что там было

Во-первых Дмитрий крутой перец.

Удивительное для лично меня

Совершенно и искренне перевернуло мой мир веб-разработчика когда Дмитрий Попов в Devtools браузера исправил HTML сайта, для того чтобы он стал более доступным для скринридера.

Подумайте об этом.

И еще немного.

Забавно, что Devtools браузера были свернуты так, что на экране их даже не было видно. Но все получилось. Потому что их и не надо было видеть. Ну да.
О том что Дмитрий абсолютно без проблем отредактировал html страничку в notepad, наверное даже лишне говорить. Но его родной редактор в котором он пишет код: Nodepad++, как он сказал.

Тестируем разные сайты на доступность, под рукой у Дмитрия его "шпаргалки" набранные шрифтом Брайля

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

Основное

• Вы никогда не узнаете кто использует ваш сайт.
• Сделать сайт доступным, несложно, обычно они почти все доступны из коробки. Но досадные ошибки разработчиков в мелочах, или их легкомысленность могут легко сделать сервис недоступным для других людей.
• Чтобы сделать сайт доступным обычно не нужно ничего переделывать. Лишь добавить немного смысла в код.
• Атрибут lang значит много, и если неверно задан доставляет много неудобств. Лучше не задавать никакой, чем неверный.

И несколько более конкретных примеров.

Кнопки-активные элементы

90% проблем при доступности сайтов возникает из-за того что активные элементы сделаны не кнопкой и не ссылкой. Если кнопка сделана как <div> то читалка не воспринимает его как активный элемент, и не помещает фокус на него при проходе страницы.

Чтобы решить эту проблему — просто используйте <button> или ссылку.

На худой конец используйте aria-label и role (role="button", например). Тогда читалка поставит фокус на этот элемент, и подскажет что он активный.

Например такая проблема есть на сайте Zakaz.ua

Кнопка сделана ссылкой без href, и читалка не воспринимает ее как управляющий элемент

Навигация по заголовкам

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

Отсылка к цветовой информации

Речь о всяких "Зеленые места свободны", это, причем распространяется не только на тех кто не видит, но и на тех кто видит цвета по-другому, а таких людей очень немало. Стоит дублировать эту информацию альтернативным способом.

Например, Яндекс Карты, показывая пробки, дублируют информацию о пробке(это красная заливка) плотностью стрелочек на дороге. Я и не задумывался зачем это, пока Сергей Пузанков не рассказал.

Обратите внимание на длину стрелочек там где пробка и где её нет

Атрибут lang

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

Не забывать об этом

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

• Главная страница о доступности в веб-стандартах
• Нашел случайно статью о том как работают другие незрячие разработчики
• Пара фото с воркшопа
• Чеклист доступности сайта от разработчиков государственных сайтов в России

Верстка вживую 10 Mar 2014 4:00 PM (11 years ago)

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

Результат: github.com/akella/screencast. Я ничего не исправлял кроме того что сделал в видео, хотя естественно макет не попиксельно точный, и могут быть какие-то мелкие неопрятности.

Буду рад комментариям или советам как это делать еще быстрее чем я это делаю сейчас. Я за то чтобы делиться опытом.

Ну и буду рад если кому-то окажется полезным :)

Использованный мною софт

• Alfred
• Colorsnapper
• Sublime
• Hayaku и Emmet
• PNG Hat
• CSS Hat
• Keyboard Maestro
• Livereload
• BetterTouchTool

Это наш маленький верстальщицкий флешмоб, если вам интересно:

• так верстает макет Роберт Харитонов (http://rhr.me/)
• а так Вячеслав Ефременко (http://brainsapiens.com/)

Узбекистан 9 Sep 2013 4:00 PM (12 years ago)

Случайно оказался в этой стране, набор удивлений и фотографий.

Сначала странные факты:

• Почти все машины белые. Белые машины стоят дороже чем небелые. Говорят, потому что черные больше греются. Но всякие крутые перцы ездят на черных.
• Существуют "Chevrolet Matiz" и "Chevrolet Nexia", их выпускают прямо в Узбекистане, и вобщем 70% машин это эти две модели.
• Несмотря на то что машины делают в Узбекистане, нельзя просто придти в магазин и купить машину. Нужно ждать год-два в очереди.
• Чтобы купить машину деньги привозят в коробках, и подсчет занимает час-два.
• В стране нет банкоматов. И карточками Visa-Mastercard рассчитаться тоже нельзя.
• Зато на рынке можно купить муку или рис за местную кредитку UzKart. Но снять с нее наличные нельзя.
• Курс доллара на рынке и в банке отличается в полтора раза.
• Из-за отказа от кириллицы "сантехника" теперь на узбекском пишется как Santexnika.
• Какой-то американский журнал поставил Узбекистан на 1-е место в мире по коррупции. Это чувствуется.
• В 1966 в Ташкенте было землетрясение, разрушено 90% зданий. Погибло 8 человек. 8.
• Арбузы и дыни не взвешивают, продают поштучно на глаз.
• Торговаться можно про все, даже на вход в государственный музей.
• Главный герой в стране сейчас, чьим именем называют улицу Ленина это: Амир Темур, или Тамерлан. Но в Узбекистане используется только имя Амир Темур.
• Много действительно древних огромных зданий, 11-16 века, это невероятно.

Фото

Чуть больше фоток лежит тут.

В конце

В Узбекистане очень хорошо, но немного портят все милиции-таможни-государство. Но фрукты-шашлык-плов-арбуз-дыня-спатьнаулице просто чудесное сочетание :)

Зубчики на CSS 30 Jul 2013 4:00 PM (12 years ago)

Внезапно пост! Небольшой странный чисто webkit трюк который вам пригодится разве что чтобы удивить свою девушку верстальщицу.

Что будет

Зззубчики: И вот что получилось в итоге или то же на codepen.

Как это сделать

Будем считать что у нас такой вот HTML:

1. <div class="pic">
2. <img src="pic.jpg">
3. </div>

Ничего такого, просто див.

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

CSS Маски

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

Как это работает: мы рисуем картинку (gif, png, svg), важно только что у нее есть прозрачные и не очень пиксели-области.
Потом «накладываем» на блок и получается:

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

Делается в CSS это как-то так:

1. mask-image: url(mask.png); // можно и svg
2. // или так:
3. mask-image: url(mask.svg) top left / cover; // можно и svg

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

-webkit-mask-box-image

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

А вот такой код сотворит магию:

1. -webkit-mask-box-image: url(mask.png) 0 3 0 3 repeat;

При этом вот такая картинка mask.png:

Числа 0 означают что ширина бордера-маски сверху и снизу равна 0, там у нас гладкая картинка. Два других числа это ширины двух зубчиков, по 3 пикселя.

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

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

Обводка

Тут все скучно, несмотря на то как красиво выглядят зубчики, ни border ни outline ни box-shadow не обходят всю границу, выглядит это примерно так:

Потому пришлось идти дедовским способом известным со времен не работающего в браузерах text-shadow:

1. .pic:before{
2. -webkit-mask-box-image: url(mask.png) 0 3 0 3 repeat; такая же маска
3. position: absolute;
4. top: -1px;
5. right: -1px;
6. left: -1px;
7. display: block;
8. height: 100%;
9. width: 100%;
10. padding: 1px; // Это важно, делает высоту блока ровно 100% + 2px
11. background: yellow;
12. z-index: 2;

То есть создать псевдоэлемент, точно такой же как эта картинка, с такой же маской, закрасить его каким-то цветом, и растянуть на 1px за пределы блока. Ничего гениального, но в сочетании с маской работает невероятно красиво.

Такая вот маленькая приятная штука получилась, надеюсь кому-то пригодится =) А вот codepen, поиграться с ней.
Я до сих пор не могу удивиться больше, понадобилась всего одна миниатюрная картинка для реализации того что, еще несколько лет назад казалось невозможным.

Еще почитать на тему

• Финальный результат
• Пост про clip, там есть фотка красивой модели
• На developer.apple.com
• Как работает border-image
• Еще разные идиотские маски, с анимацией

Префиксы, вебкит и вебстандарты 13 Feb 2012 3:00 PM (13 years ago)

В верстальщицкой сфере наконец хоть что-то происходит! И я даже не про свой первый пост за полгода! О забавной ситуации с браузерами на базе webkit и всеми остальными.

суть проблемы вкратце

В данный момент некоторые мобильные браузеры теряют аудиторию из-за того, что многие сайты сделаны исключительно под webkit-браузеры (iPhone, iPod, iPad). Чтобы сохранить свою аудиторию они (браузеры) хотят начать «притворяться» webkit и поддерживать -webkit-*** свойства, в частности -webkit-text-size-adjust и какие-нибудь другие.

Кроме этого, и, что я думаю важнее, им придется отдавать такой user agent, чтобы фильтры принимали их за вебкит браузер (deja vu?), несмотря на то, что они им не являются.

Из-за этого многие стандартисты в ужасе. «Интернет катится в ад» и все такое :)

Но мне все это кажется забавным, и это возможность заглянуть в мир стандартов.

Почему это многих пугает

Во-первых потому что это как-то философски неправильно. Вот написал я в CSS -webkit-border-radius:10px; а окажется что граница закруглится и в Мозилле. А я, может, не хотел.

А, предположим, я дурак, и я писал всегда только -webkit-border-radius и не добавлял просто border-radius (как это по стандартам должно быть). И сайт был красивый только в iPhone, но никогда в Опере. А потом вдруг Опера начала поддерживать -webkit-border-radius. И все стало красивым и в Опере, зачем мне тогда использовать что-то кроме -webkit-border-radius?

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

Вобщем, это неправильно. Но.

Почему это не так уж страшно все

Потому что все они видят только "ОНИ РЕАЛИЗУЮТ ВЕСЬ ВЕБКИТ", а на самом деле один из инициаторов этого всего Тантек Челик (представитель Mozilla, и «автор» IE5 Mac) говорит вот о чем:

One possible proposal is to only parse other vendors' prefixes in conjunction with parsing unprefixed. e.g. with -webkit-transform. We wouldn't parse that until we also parse transform.

plinss: You're telling authors to just use webkit prefixes, we'll make it work. Tantek: No, we're only implementing a small minimized number of these.

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

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

fantasai: What if -webkit- was implemented only for mobile? That would add the unreliability factor that Tantek was asking for, because it would not work on desktop. And that would bias authors to using unprefixed, which is what we want.

В конце концов все пришли к мнению что от всех префиксов надо избавляться :). Чего и вам советую.

Реальная статистика свойств

Чтобы исследовать этот вопрос мозилловцы даже распарсили кучу CSS файлов, чтобы понять насколько велика проблема и какие свойства с префиксами используются. Статистика 30 000 сайтов, и примерно 90 000 CSS файлов.

Среди прочего, рейтинг использования css-свойств вообще. Width уверенно побеждает.

Кстати одни из самых редкоупотребляемых свойств dispaly и heigth, я, периодически, их тоже использую! Yeah!

А вот рейтинг префиксных свойств.

Скругления и тени побеждают с отрывом

Забавно, но ни одному из этих свойств уже год префиксы не нужны. Потому, ну кому какой вред от того что -webkit-border-radius заработает в Mozilla? Вряд ли бы кто-то это вообще заметил.

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

Кто виноват

Конечно, все валят вину друг на друга.

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

И в конце концов многие вдруг решили что виноваты разработчики!

Более того, на некоторых популярных блогах можно прочитать даже такую идеологически правильную фигню:

We at Webmonkey hope it’s obvious that building WebKit-only sites is a waste of time.

О, да.
Конечно, по-хорошему надо делать для всех, но говорить что делать сайты только для вебкит - трата времени, перегиб в другую сторону.
Кого из нас когда-то просили сделать сайт для Fennec или Opera Mini?

Хоть код и надо писать правильно, для всех, но спихивать ответственность на разработчиков тут тоже не очень верно. Они делали то, за что им платили деньги.

Я думаю никто не виноват, просто веб стал меняться слишком быстро, и процесс стандартов-реализации не успевает за ним. А тут еще эти префиксы которые уже давно все можно было отменить, но CSS WG не решается это сделать толком. А еще этот вебкит который столько всего наделал нового, и за ним мало кто успел.

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

А все остальные просто пытаются сохранить свои доли на рынке. На самом деле браузеры ходили этим путем уже много-много-много раз. Достаточно почитать историю user agent string, чтобы понять что все притворяются всеми, и никто еще не умер. Хотя, порядка это тоже не добавляло.

Такие пироги в нашей веб-стандартной песочнице.

Почитать об этом же

• Update! Интервью в Тантеком о том что они собираются делать с этим в Мозилла
• «Исторические» разговоры браузеров и стандартистов о реализации -webkit- свойств
• Исследование префикс-свойств от Мозиллы
• Мысли на эту же тему от главы CSS Working Group
• Одна из полупанических статей которые меня забавляют
• Отличная объективная статья об этом всем от Remy Sharp

Что делать?

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

Буду рад и вашему мнению об этом всем, особенно если оно отличается от моего :)

TL;DR: Webkit популярен, CSS WG медленное и педантичное, разработчики ленивые, Opera-IE-Moz тоже хотят жить, Жизнь прекрасна.

Мастер-классы и конференции! 22 Sep 2011 4:00 PM (14 years ago)

На правах рекламы и все такое.
По стечению обстоятельств я проведу аж 3 мастеркласса в ближайшие пару месяцев, потому если кому-то интересно послушать про верстку в моем исполнении и попить со мной пива, буду рад :) Они повторяют прошлогодний с небольшими апдейтами. А еще! В Киеве Web Standards Days! Подробности под катом.

Новосибирск — 26 сентября (в рамках Сибирской Интернет Недели)

Киев — 8 октября (план и регистрация тут)

Харьков — 15 октября (план и регистрация тут)

Николаев — 29 октября. (план и регистрация).

Это не я устроил себе такие гастроли, оно само, поймите меня правильно, я слишком скромный и ленивый для такого :)

А еще! У нас (в Киеве) будет 22 октября Web Standards Days. И мы принимаем заявки от докладчиков, если вы клевый, или знаете что-то клевое о веб-стандартах, или знаете кого-то клевого кто знает что-то клевое про веб-стандарты, немедля ни секунды пишите мне в почту akella.a(wtf)gmail.com.

CSS1k 4 Jul 2011 4:00 PM (14 years ago)

Мы с genn не выдержали и сделали свою версию для этой галереи.

Для тех кто не в теме, задача такова: у нас есть фиксированный html, мы к нему можем написать не более 1024 байт CSS кода, без скриптов и картинок, только CSS. Вот какие красоты получаются у людей.
Не удержались и мы. Однако наш красивый дизайн, примерно такой:

в итоге занял почти 2 килобайта (О УЖАС!)

Аж 1834 байта. После чего я сыграл в игру «challenge accepted» и забыл пообедать.

Рассказать о том что было дальше трудно, лучше приложу скриншот нашего с genn чата:

Очень хорошо видно когда у меня пропал евпаторийский интернет :)

Жертвуя красотой дизайна и используя селекторы вроде:

1. header~a{/*...*/}
2. ul li,[role]>*>*:not(h2),ul li:hover a{/*...*/}
3. [role]>*+*+*:hover{/*...*/}

Мне и Гене таки удалось свести дело к 1000 байт. Вобщем, это было весело :).

Самое удивительное и любопытное, что я изначально писал сжатый CSS-код, и после того как я начал оптимизировать его, только без жертв дизайна удалось удалить 30% файла. И это не считая пробелов, и не считая упрощения дизайна — исключительно сокращение кода.

Впрочем, каждые сто байт оптимизации казалось что дальше уже некуда :)

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

Буду рад советам, и вашим собственным вариантам дизайна.

• Итоговый CSS на Github
• Живой пример Bbubles (лучше всего в Сафари и Хроме, ну как всегда)
• Отчет в блоге Genn.org

В завершение, несколько советов тем кто захочет поучаствовать в галерее.

Не бойтесь если у вас получилось 2kb

Мы все сильно недооцениваем то насколько наш код можно упростить. ;) Лучше отнеситесь к этому как к сложной задаче и попробуйте решить. Обычно в таких случаях абсолютно неважно добьетесь ли вы 1000 байт, но вы узнаете много нового и получите кайф =)

Где упрощать?

1. Группировать длинные свойства. Например, text-decoration или position:absolute стоит собрать в одном месте: div,p,section{position:absolute}
2. Использовать крутые селекторы вместо обычных. Например вместо article section p,article section ol можно написать: [role]>*>*:not(h2) А вместо section:last-child [role]>*+*+*
3. Вместо px использовать em. Запись 5em короче чем 50px
4. Короткую запись для цвета. Очевидно #f3f5f8 длиннее чем red или #fff
5. А еще, часть свойств из CSS можно просто удалить и ничего не изменится, мы же делаем под современные браузеры.

Оптимиизировать свой CSS очень интересно :)

HTML5 читалка для iPhone за сутки 29 Sep 2010 4:00 PM (15 years ago)

Вдохновились вместе с genn.org и за сутки сделали полноценную читалку для айфона, андроида, и всех кто поддерживает html5 чуть лучше утюга. О дизайне читайте в блоге у Гены, остальное у меня здесь и сейчас. Все очень просто.

Реклама, пам-пам:
Пользуясь случаем хочу анонсировать мастер-класс Николая Мациевского об ускорении сайтов (он кстати написал про это две книги, и участвует в W3C), 9 октября в Киеве.

Зачем оно вообще могло понадобиться?

Дело в том, что год назад я перепрошил свой айфон на чужом компьютере. И этот бедняга, уроженец Сан-Франциско, и без того залоченный, еще и заглючил. Я больше не смог ставить ничего из AppStore, и использование мной i2reader закончилось. Да, вот такой какой-то глюк с аккаунтами в itunes.

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

Я решил сделать читалку на HTML. После исследования этого вопроса, оказалось что меня спасёт HTML5. Стандарт еще не вышел, а уже помог мне прочитать несколько книг! Это для тех кто вечно спрашивает когда же HTML5 станет реальностью. Так вот, правильный ответ &#8212 вчера.

А потом мы c Геной вдохновились и решили сделать проект супербыстро. Хотя идея жила во мне давно. Так и получился этот проект за сутки:

Вот так это выглядит на моем iPhone 3G

Сразу оговорюсь, проект конечно же заточен под Webkit, просто потому что у меня айфон, а не что-то там еще с Оперой. И в Хроме и Сафари он выглядит ближе всего к дизайнерскому. Можно конечно заставить его выглядеть везде одинаково, но за сутки я этого не хотел и не мог сделать. Потом, ок.

Формально проект состоит из двух частей: каталога книжек (обычная себе версия сайта под айфон), и собственно книжки, в которой и есть элемент того самого HTML5.

Каталог

Обычный сайт, но в разработке столкнулись с интересными моментами.

Так как пикселов на новом экранчике iPhone 4 ровно в 4 раза больше чем в старых. То иконки в формате PNG выглядели достаточно размыто и не очень клёво. Однако, мы перевели их все в SVG (ага, именно поэтому пользователи Фаерфокса не видят иконок вообще) и на новых айфонах они выглядят просто офигительно. Чего и вам советую при разработке сайтов под айфон.

Вверху то, как это выглядит на старых айфонах (почти не видно разницы), а ниже скриншот из iPhone 4. Угадайте где PNG, а где SVG.

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

1. if (document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.1")) {
2. ...а тут например добавить class для body
3. }

Кроме этого, все градиенты сделаны через CSS, и потому выглядят всегда идеально и меняются достаточно легко.

Причем тут html5?

Это вторая часть сервиса.

В проекте используется часть спецификации называемая application cache и local storage (это вместо кук, только чтобы запомнить место последнего чтения книжки). Хорошая новость, что их почти все браузеры поддерживают. В том числе Сафари на iPhone.

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

Синтаксис примерно такой:

1. <!DOCTYPE HTML>
2. <html manifest="reader.manifest">

А внутри файла что-то вроде этого:

1. CACHE MANIFEST
2. js/jquery.js
3. css/style.css
4. img/read.png
5. img/read-gr.png

(вообще говоря это точная копия с reader.org.ua)

На самом деле в стандарте есть еще куча наворотов, но они мне не нужны были, вы же можете почитать.

Собственно это я и проделал, я сделал страницу с текстом книги офлайновым приложением.

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

Много пространства занято совершенно не относящимся к чтению интерфейсом

Тут на помощь приходят всякие крутые метатеги которые работают только для продуктов Apple:

1. <meta name="apple-mobile-web-app-capable" content="yes" />
2. <meta name="apple-mobile-web-app-status-bar-style" content="black" />

Подробнее о них на сайте apple.com.

В результате, если сохранить этот сайт на ваш Home Screen (в айфоне для этого есть кнопка «+» в сафари). Он превращается в нечто похожее на обычное приложение:

Здесь у меня сохранено много книг, в 4-й прошивке думаю их логично группировать

И после запуска выглядит вот так:

Максимально используется экран, никаких баров, ничего лишнего. Кроме этого, уже не нужен интернет чтобы читать эту книгу.

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

Полезные ссылки

• reader.org.ua
• Пост на genn.org про дизайн интерфейса
• HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript
• для девелоперов на apple.com

Из того что пока не удалось до конца победить или успеть:

• В каталоге порядка 10 000 книг, но есть дубли и пустышки. Скоро надеюсь залить новую базу.
• Настройки для чтения: размер и цвет текста и фона
• Если у вас не iPhone 3gs или 4 то может ощутимо тормозить и долго все делать
• Все что вызвано предыдущим пунктом, иногда лучше подождать, пока что-то произойдет
• Пока только portrait mode. Не придумал как сочетать оба.
• Постраничное перелистывание, есть идеи, но это уже сложнее чем 10 часов :)

Буду рад мнениям, советам и идеям. Или тому на что это вас может вдохновить.

Из Америк 22 Sep 2010 4:00 PM (15 years ago)

Опять совершенно случайно съездил на другой конец планеты, впечатления и фото. (осторожно, много фото)

DC

Случайно провел там ночь, сфоткал святую святых и улетел

Washington

LA

На этот раз запомнился: перуанской и японской кухней, бирманскими врачами, и сальса-вечеринками с живой музыкой. А еще буфетом в Caltech (тот самый вуз Шелдона и Леонарда) и USC. Все хорошие девчонки в USC. Калтех обитель ботанов, что и следовало ожидать.

Manhattan beach

Центральная Америка

Точнее, Никарагуа. Почему я туда поехал? Потому что ничего не знал о них.

Набор впечатлений:

• Я видел гуардабарранко.
• Самая бедная страна в регионе, четверть страны эмигрировала в Коста-Рику.
• Нет кранов с горячей водой. Никому не нужна.
• От лихорадки нет ни лекарств ни прививок. Вообще. Можно заболеть если укусит комар. Это почти как грипп. А малярия еще неприятней, и тоже комары.
• В пробках мальчики могут жонглировать факелами, потом собирать деньги с машин.
• Никто не говорит по-английски. Без испанского делать почти нечего. А испанский звучит круто.
• В словах Никарагуа и Манагуа (это столица)  — буква «г» не произносится
• Половина страны смуглая, а половина мулаты. И эти две части страны почти не сообщаются.
• Существует вулканобординг.
• Есть еще минимум 10 непохожих ни на что фруктов о которых я не знал. И у каждого десяток сортов.
• Есть реклама белорусских тракторов.
• В маршрутках и такси играет бачата, вместо шансона. А на дискотеках все танцуют под сальсу и реггетон. Но никто не танцует, то что в европе называют сальсой.
• Теперь я учу испанский.

Где-то у входа в хостел

Молодежь перед выступ лением

Юка, жареное сало, кукурузный лист, капуста перец и стакан с тамариндом. Типичное блюдо для центра Гранады, невкусно. Тамаринд, который коричневый в стакане — очень, очень вкусно.

В центре Гранады, кушал

У них почти все церкви такие вот.

Старая церковь

Набережная у большого озера

Дети

Атмосфера

Любимый фрукт моей знакомой и (красная) «пера»

Действительно, почему бы в фонтан в центре города не напустить черепах.

А в этом фонтане плавали черепахи, центр Масайи, О_о

Обычный рынок в Масайе

Мальчик

Кто-то припарковал лошадь

Все нарисовано на стенах от руки, тут я бы обратил внимание на 3д-эффект справа внизу. Не поленились :)

IT-бизнес в Никарагуа

Девочка в автобусе

Кокос

Очень непонятное существо, живет в мокром песке.

Муи-муи

А тут есть краб

«Автобусы» по Леону

Вулкано бордисты

Я разогнался на этой фанерке до 70км/час.

Вулкано бординг

3 часа ехал 100 километров

Чуть больше фоток можно посмотреть на фликре.

P.S.: Да, если захотите ехать, но не знаете испанского, лучше в Коста-Рику, там говорят по-английски, а в принципе тоже самое.

IE9 и Web Standards Days в Киеве 19 Sep 2010 4:00 PM (15 years ago)

Много событий за одну неделю, несколько фото и впечатлений.

IE9

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

Компания Microsoft оказала мне честь рассказать о поддержке CSS в ИЕ9, что я с удовольствием и сделал. Презентация включала много примеров, слайды же все равно можно посмотреть, там есть щенок, Дуглас Адамс и look of disapproval.

Из того, что обязательно надо знать, IE9 бета уже поддерживает:

• border-radius!
• RGBa
• WOFF
• calc() (например, width:calc(50%-20px))
• multiple backgrounds
• Data URI —, в полной мере и без ограничения в 32Кб как в IE8.
• SVG (причем проще чем все другие браузеры)
• HTML5 видео аудио

Ну и аппаратное ускорение которое можно посмотреть на разных демках вот здесь.

Сергей Байдачный из Microsoft об IE9

Какой-то парень в белой рубашке

Владимир Белоненко про поддержку SVG и HTML5

Презентация Владимира находится онлайн, и вот тут её можно посмотреть, рекомендую. Можно даже в IE9.

Еще фото с мероприятия и отчеты:

• Фотографии с мероприятия
• Страничка мероприятия
• На kit1980.ru

Web Standards Days

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

Мациевский перед докладом

Вадим Пацев, дизайнер-разработчик интерфейсов из Яндекса

Андрей Сумин из hh.ua рассказывал о специфике использования веб-стандартов в больших проектах

Люди

Тимофей Бабич из Mozilla

Какие-то чуваки

Мациевский рассказывает о рабочей группе W3C в которой он участвует

Очень интересно было узнать, что способы измерения скорости загрузки страницы и многих других параметров будут стандартизированы. И Николай сам является участником рабочей группы W3C занимающейся этой задачей. Кстати скоро он возможно приедет в Киев с мастер-классом, stay tuned ;-).

Виталий Рыбалка сделал обзор библиотек и способов разработки

Антон Немцев показал как нам будет хорошо, когда-нибудь :)

Вадим pepelsbey Макеев рассказал об SVG и способах его использования

Все фото © Михаил Баранов. Видео докладов появится на сайте WSD в ближайшие пару недель.

Credits

Без Евгения Некоза и Вадима Макеева мероприятие бы не состоялось. Спасибо им большое, и надеюсь мы сделали это не последний раз. Кроме этого спасибо нашим спонсорам и партнерам Opera, Mozilla Foundation и SmartMe, без них бы тоже мало что получилось. В целом все прошло гладко, только гостиница подставила нас с интернетом. Больше не допустим.

Будем надеяться мероприятий будет всё больше и они будут всё лучше =).
Буду рад услышать ваши мнения и впечатления, или просто ссылки на фото и отчеты (добавлю в пост).

overflow:hidden 25 Apr 2010 4:00 PM (15 years ago)

Незаслуженно непопулярный трюк. Я уже писал про display:table. Так вот, это &#8212 лучше. P.S.: оказалось трюк таки известен многим, надеюсь кому-то статья поможет.

Проблема

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

Картинка-float

к такому виду:

Картинка-float + display:table для текста

Для этого тексту задавалось свойство display:table. А для IE zoom:1.

overflow:hidden magic

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

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself. W3C, CSS 2.1

источник То есть это не хак, а документированное поведение. Всё дело в так называемом «контексте» или «контексте форматирования», такие правила как display и overflow создают этот контекст, и согласно правилам он (созданный контекст) не может пересекаться с флоатами. Что вобщем и происходит. В результате блок занимает все доступное пространство кроме флоата.

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts.

Как видим контекст можно создавать разными способами.

Важное отличие от display:table — ширина блока, я сделал специальный пример чтобы было видно, чем часто был неудобен именно display:table.

Именно это отличие позволяет делать с overflow более сложные вещи чем с display:table.

Когда мало текста, блок не занимает всю ширину

IE?

IE6 — не работает ни display:table ни overflow:hidden. Нужно использовать zoom:1; (или любой hasLayout). В результате эффект идентичен действию overflow в других браузерах.

IE7-8 — overflow:hidden работает также как во всех остальных возможных браузерах.

Резюмируя: можно добавить к overflow:hidden еще zoom:1; и забыть о проблеме.

Возможные применения

Самое простое и банальное, вёрстка блоков с текстом и картинкой:

Редкий сайт обходится без такого блока

Используя overflow:hidden можно их стилизовать для произвольной ширины картинок.

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

Обычное дело на резиновых сайтах

С подобной проблемой недавно столкнулся Глеб Арестов и успешно решил её как раз с помощью этого же свойства.

Более того, можно строить layout страниц. В частности в фреймворке OOCSS колонки строятся как раз с использованием этого свойства. Примерно так:

Можно не задавать ширину резиновой колонке

Конечно, тут минимум два недостатка. Во-первых, порядок контента — средняя колонка должна идти в коде после обоих боковых. Во-вторых, нестабильность при сжатии, когда что-то начинает не помещаться в блоке с overflow:hidden, его самым невероятным образом разрывает на части в IE. min-width мог бы спасти. Использовать осторожно.

Но, помнить о таком мощном приеме стоит.

Еще

• Пост Gunlaug про это же поведение
• Мой пост про display:table
• Мой простой пример, пример трехколоночного сайта
• Пост Flack на эту же тему
• Clear или overflow:hidden — очистка всего потока или создание контекста форматирования?
• Управление потоком в CSS: создаём контекст форматирования

Это не CSS3 и далеко не вчерашнее изобретение, но кажется многие недооценивают силу этого простого приема.

Буду рад если поделитесь своим опытом!

РИТ 2010, 12-14 апреля, Москва 14 Apr 2010 4:00 PM (15 years ago)

небольшой отчет о конференции и интересных докладах

Алекс Могилевский про IE9

Ключевое слово выступления — HTML5. Именно так, это один из приоритетов нового браузера. Уже работает и видео таг, и SVG, и скоро будет много другое, из того что уже устоялось.

Вторым, и даже более важным приоритетом является скорость. Команда заново переписала джаваскриптовую составляющую браузера, чтобы сделать всё еще более быстрым.
Они даже провели аудит 7000 сайтов, чтобы узнать какие части джаваскрипта используются чаще всего. На первом месте, к слову, оказался indexOf и где-то в десятке getElementById. Они очень серьезно относятся к будущему интернета, веб-приложениям и потому готовят браузер к отрисовке множества элементов на странице.

ИЕ9 будет иметь аппаратное ускорение. Алекс покаал несколько демок, которые работают в ИЕ9 в несколько раз быстрее чем в Фаерфоксе и Хроме (видео и анимация картинок). Вот такая демка в IE9 не тормозит даже когда весь экран в иконках.

Могилевский фактически поставил на место наши современные браузеры с их поддержкой CSS3. Вот так к примеру выглядит реализация border-type и border-radius.

Угадайте какой браузер слева

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

Еще один посыл Могилевского, и компании Microsoft — помогите нам избавиться от IE6. Он рекомендовал не поддерживать его, и не разрабатывать приложения только под него. Сама компания будет продолжать выпускать для него фиксы. Но удалить его насильным апдейтом у пользователей они не могут, очень многие используют приложения которые работают только в IE6.

Алекс Могилевский

Превью движка нового IE9 уже можно скачать. Каждые два месяца превью будет обновляться. В частности девелоперская версия уже поддерживает HTML5 video (с кодеком H.264). Про дату релиза нового IE Алекс рассказать не смог, но судя по предыдущим релизам ждать его следует ровно через год, на следующей весенней конференции MIX. IE9 можно будет ставить только на Windows 7 и Vista. Превью которую можно скачать не содержит интерфейса, потому пока непонятно как он будет выглядеть.

Другим браузерам нужно будет поднапрячься чтобы конкурировать с ИЕ9 в будущем. Вся прошлая репутация Internet Explorer была реабилитирована выступлением Могилевского.
А тут Ольга как будто грозит Алексу «не шали там с IE9!» @©martynov.

Фото Сергея Мартынова.

Чарльз Невилл, директор по стандартам Опера.

Чарльз Невилл

Выступление было в основном про то как ведется работа над стандартами и что такое эти стандарты вообще. Невилл начал с метафоры, что стандарты как сосиски, их едят все, но лучше нам не знать как они делаются ;)

Рассказывал про geolocation и проблемы с ним. Оказывается почти все браузеры уже его реализовали, но из-за нерешенных проблем с прайваси он до сих пор не запущен. В частности, что делать с тем что какой-то сайт будет знать географическое положение всех своих пользователей. Это уже гораздо круче чем просто пароль к имейлу ;).

CSS3 анимации, Сергей Чикуёнок

Вкратце рассказал о свойствах transition, animation и transform. После чего поделился некоторыми практическими советами по их применению.

Например, правильным скриптом по определению вендор-префикса:

Вендор-префиксы

Еще показал отличный способ определения поддержки 3д-трансформаций в браузерах.

1. .foo{
2. width:0
3. }
4. @media screen and (-webkit-transform-3d){
5. .foo{width:300px}
6. }

После этого можно проверить ширину блока джаваскриптом, и узнать поддерживает ли браузер 3д-трансформации.

Очень мило, что Опера 9 тоже прочитает правило про 300 пикселей, как будто она поддерживает трансформации. Красивого решения этой проблемы нет, так что Сергей пока решил ее проверкой window.opera.

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

Забавно было узнать что если анимировать картинки которые имеют размер больше 2000 на 1000 пикселей, то в начале анимации они будут мигать. Для айфона граничное число 1024 пикселя. Это вроде бы связано с ограничениями на размер текстур в openGL. (?)

Аппаратное ускорение (начиная с Mac OS 10.6) и субпиксельное сглаживание делают анимации в Сафари очень привлекательными.

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

Резюме: если вы делаете приложения под мак или айфон, обязательно нужно использовать для анимаций transition-transform-animation. Презентация.

Десктоп-подобные веб-приложения, Владимир Колесников

Рассказал о метафоре десктоп приложения, о том что она понятна пользователю даже онлайн, и что таких приложений становится все больше. Взять тот же mobile.me

Списки писем онлайн и на десктопе

Владимир автор новой библиотеки для построения десктоп-подобных интерфейсов Uki. Целью было сделать ее простой и быстрой, и это точно получилось. В действии можно посмотреть на примере копии интерфейса Mail App которую он сделал за пару дней. Вот тут можно почитать подробнее.

Следует упомянуть, что размер всего приложения с картинками и CSS в gzip — 65 килобайт. А сам фреймворк с картинками и стилями в сжатом виде 35 килобайт.

Владимир Колесников

Еще развеял некоторые мифы о таких библиотеках. Например, этот mail app работает отлично в IE6.

Из альтернативных вариантов для построения десктоп-подобных интерфейсов Владимир рекомендовал Sproutcore и Capuccino.

Ошибка. Осознание, анализ, извлечение пользы. Вадим Макишвили

Очередное великолепное выступление Вадима. Чтобы вы поняли, приведу короткий разговор в кулуарах:

- Ты же уже был на его выступлении? - Да, но только один раз.

Вадим Макишвили

Философский взгляд на ошибки, самооценку, работу верстальщика. Сдобренный несколькими реальными и интересными ошибками из опыта вёрстки сервисов Яндекса. Пересказывать бессмысленно, не пропустите если будет возможность ;).

Если конечно его отпустят теперь на конференции, во время выступления звучали признания в любви. А ведь он женат! ;)

Костыли это кошерно, Павел Кудинов

Это однозначно один из лучших докладов на конференции рекомендую всем. И ссылка на отчет самого Кудинова. Если вы еще сомневаетесь смотреть или нет — перестаньте, смотрите.

Ещё

• Фото первого дня
• Сайт конференции
• Слайды и тезисы
• Куча клёвых фотографий от Сергея Мартынова

К сожалению с третьего дня конференции пришлось уехать, потому слушал не все доклады. Будем ждать видео.

Спасибо организаторам за отличную конференцию.
Очень рад был встретить всех старых знакомых. :)
Буду рад и вашим впечатлениям!

Презентация про CSS3 и HTML5 на них же 30 Mar 2010 4:00 PM (15 years ago)

Я показывал ее на недавнем Openwebcamp. Презентация на CSS3 и HTML5 без джаваскрипта. Как надо работает только в Safari и Хроме, но вы уже привыкли, да?

Предыстория

Началось с того что мне нужно было сделать доклад об использовании новых технологий. Делать его в Powerpoint и потом все время говорить «Ну вы это легко проверите в своём браузере» мне не нравилось, и я решил сделать презентацию целиком на этих эффектах. Вот что получилось. То что получилось устроить все без Javascript — случайность. Приятная.

Сразу о поддержке браузеров

Это всего лишь презентация, и я c самого начала не преследовал цель полной кроссбраузерности. Мне было важно чтобы она работала в моем Сафари. Однако, в Опере и Фаерфоксе она будет работать, просто в некоторых местах коряво, а кое-где очень коряво. В Хроме она работает отлично, но иногда по непонятным мне причинам хром делает что-то вроде «Я устал от твоего CSS3» и опускает руки. Редко. Вобщем Сафари и Хром наш выбор сегодня.

Презентация

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

о том как это сделано

Структура кода примерно такая:

1. <body>
2. <section id="slide1">
3. <h1>CSS3 и HTML5</h1>
4. <p>Openwebcamp, Киев, 2010</p>
5. </section>
7. <section id="slide2">
8. ...

Каждый section — отдельный слайд. Всем им задан:

1. section{
2. position:absolute;
3. top:0;left:0;
4. height:100%;
5. opacity:0;/*по умолчанию все слайды скрыты*/
6. }

То есть они отображены все на одном месте, на весь экран, с прозрачностью 0. Кроме этого, в файле содержится навигация, просто список ссылок на все эти слайды-section:

1. <ul>
2. <li><a tabindex="100" href="#slide1">slide1</a></li>
3. ...

Навигации тоже заданы координаты через position:absolute;. tabindex тут не просто так, позднее станет ясно зачем он мне.

Но как же я переключаю слайды? Это делается с помощью псевдокласса :target.

Этот селектор указывает на блоки, которые являются «адресом» внутренней ссылки. То есть при blabla.html#slide21, для блока у которого id="slide21" сработает :target.

Результат в CSS выглядит так:

1. section:target{
2. opacity:1;
3. }

То есть при клике на любую ссылку из навигации, слайд на который она ссылается станет видимым. Известное свойство transition позволит нам сделать это плавно:

1. section{
2. transition:all 1s linear;
3. }

Таким образом вместо того чтобы отобразить слайд моментально, он будет плавно появляться. Более того, я добавил еще пару эффектов, такой например:

1. .effect-slideleft{
2. left:-100%;
3. opacity:1;
4. transition:all 1s ease-in-out;
5. }

Это значит по умолчанию слайд будет смещен влево от экрана, а при клике плавно изменит положение. (opacity:1 значит что прозрачность не будет анимироваться). А вот эффект кручения-исчезновения в центр:

1. .effect-rotate{
2. transform:rotate(360deg) scale(.01) translate(50%, 50%);
3. transition:all 1s ease-in-out;
4. }

Подробнее об играх с transform можно почитать в моем же посте

Как переключать слайды пультом?

Я написал небольшой applescript, который по нажатию Apple Remote табулировался по ссылкам навигации (вот зачем tabindex), и по нажатию на пульте «Play» — кликал на них. Это единственная часть которую по понятным причинам трудно реализовать совсем без скрипта.

Хотя у меня была идея построить все на -webkit-transition-delay (расписать в CSS появление каждого слайда по времени). Но тогда даже я сам считал бы себя психом.
Если кому-то интересно итоговый скрипт выглядел примерно так (табулирование + enter):

1. on nextElement()
2. simulate keycode 48 with option
3. simulate keycode 76
4. end nextElement

Это я позаимствовал из Sofa Control.

Почитать

• Сама презентация и ее ядро
• CSS3.info
• HTML5 спецификация
• Еще вариант движка на Django
• S5 один из первых движков для презентаций в браузере

Буду рад услышать ваши мысли про эту затею. Надеюсь она вдохновит кого-то на что-нибудь еще клёвое :)

Почетная грамота 23 Mar 2010 4:00 PM (15 years ago)

Мне была оказана большая честь.

Был рад возможности работать с командой настоящих профи над таким проектом! Фотоаппарат к сожалению нельзя было взять с собой, однако вот еще несколько фото с того дня.

OpenwebCamp, Киев 21 Mar 2010 4:00 PM (15 years ago)

Короткие впечатления и фотки с мероприятия. Плюс описание моей презентации.

Так как через пару дней я выступлю с таким же докладом на iforum, я решил не портить никому удовольствия и выложить презентацию и само ее описание сразу 1-го апреля. Если у вас хватит памяти не забыть до тех пор о ней, я посвящу ей целый пост. ;)

(На самом деле я просто еще не успел дописать описание презентации.)

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

Виталий Рыбалка из Ukr.Net

Доклад Виталия

Рассказывал о техниках оптимизации и ускорения сайтов, в том числе о тех что используются на актуальной версии ukr.net. Кроме того рассказал о множестве инструментов с помощью которых можно оценить слабые места сайтов. Вот тут находится его презентация, для тех кому интересна тема.

Тимофей Бабич про user scripts

Вот тут Тиму надо было загадать желание

Речь шла о скриптах для GreaseMonkey, Stylish и новом приложении от мозиллы Jetpack. Рекомендую подробнее с ним ознакомиться. Тема эта очень интересная, хотя я лично дальше adblock так и не пошел.

Игорь Кононученко про Canvas

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

Та самая женщина

Pepelsbey про универсальные сайты для мобильных

Вот что нужно сделать

Самая хорошая новость, что порядка 80% нашей аудитории используют браузер Opera Mini или Opera Mobile. Один так клево упрощает странички (и ориентирован на простые мобилы) что почти ни о чем можно не волноваться. А второй поддерживает столько крутого CSS3 что можно творить все что угодно. В том числе Вадим рассказал о media queries. Это, например, фильтрование CSS для браузера учитывая его размер экрана, вот как-то так:

1. @media screen and (max-device-width: 480px) {...}

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

1. input[type:text]{
2. background: url(pic.svg) no-repeat,
3. url(pic2.svg) no-repeat,
4. rgba(170,0,0, 0.5);
5. }
6. a:first-of-type{display:none}

И это на мобильных! Уму непостижимо :) Кроме этого, сегодня Опера объявила о виджетах для Opera Mobile Mini.

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

Еще несколько случайных фото

Это я в кого-то стреляю, by @klonfuture

А это мой и pepelsbey ноутбуки, у обоих открыты файлы презентаций, оба правим что-то

Вот такое у нас было расписание

Народ

А тут всем сказали что можно взять значки со стола

Другие отчеты и ссылки

• Твиты про openwebcamp
• Официальный сайт
• в блоге Vovanada
• от Kigorw (доклад о canvas)
• Доклад vitex о клиентской оптимизации

В целом круто, и побольше бы таких мероприятий Киеву, правда? Организаторам Тимофею Бабичу и Юрию Клековкину из Mozilla, отдельное спасибо! И слушателям спасибо за хорошие отзывы! =) Буду рад услышать и ваши впечатления!

P.S.: презентация в следующем посте.

Мастер-класс в Киеве, 10 апреля 16 Mar 2010 4:00 PM (15 years ago)

10 апреля в Киеве состоится мой мастер-класс по вёрстке.

Буду рассказывать о современных техниках вёрстки, опыте разработки ресурса kremlin.ru, подходах больших компаний (Yahoo, Yandex), ускорению загрузки сайтов, версиях для мобильных, поиске работы верстальщика, CSS3 и HTML5, и о чём меня только спросят, я готов подарить всем свой мозг. Ориентирован на людей которые уже умеют верстать. Примерно 4-5 часов с перерывами, затем с желающими в паб. :)
Подробнее на страничке воркшопа, тут же можно и зарегистрироваться.

Вход платный, до первого апреля стоимость 38 баксов.
Буду рад встретиться и поделиться всем что я знаю!

Слайсы на kremlin.ru 11 Mar 2010 3:00 PM (15 years ago)

Сегодня запустили слайсы на kremlin.ru. Небольшой рассказ чтобы упростить внедрение в будущем.

Что это вообще такое эти слайсы?

Это что-то вроде продвинутых закладок для IE8. Вы можете выбрать кусочек страницы, добавить его в Favorites. И после этого находясь уже на другом сайте, просмотреть этот кусочек. По клику на закладку откроется небольшое окошко с фрагментом другой страницы. Например это может быть погода, вот так это выглядит в слайсе от gismeteo:

Заметьте, что при этом я нахожусь на сайте Digg

Или это может быть десятка популярных линков Digg:

А теперь я на gismeteo, но держу руку на пульсе Digg! Я непредсказуем - согласитесь.

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

Картинка кликабельна

Такая вот полезная мелочь. А для больших сайтов, как известно, все мелочи значимы.

Что это такое для кодера

Не более чем набор микроформатов (за нас придуманных названий классов). Ничтоже сумняшеся перейдем к коду, он очень прост:

1. <div class="hslice" id="whatever">
2. <div class="entry-title">Название слайса.</div>
3. <div class="entry-content">А тут то что будет отображаться в окошке слайса.</div>
4. </div>

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

1. <div class="b-news-main hslice" id="news">
2. <h2 class="entry-title">Новости</div>
3. <ul class="entry-content">...список новостей... </ul>
4. </div>

Это код с главной. А результат получился такой:

Очень мило

Неприятные мысли стали посещать меня в этот момент. Но я снова воспрял духом едва прочитал документацию до конца. Оказалось, из стилей наложенных на этот фрагмент на оригинальной странице, берутся только инлайновые, и никаких наследованных (body{font-size:12px} не применяется).

style="font-size:12px;" применился бы, но кому интересно марать свой чистый код.

Правильный путь

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

В документации описано несколько путей. Нам подошел следующий.
Код на сайте:

1. <div class="b-news-main hslice" id="news-slice">
2. <h3 class="entry-title">Новости</h3>
3. <a rel="feedurl" href="/slice/news"></a>
4. ...
5. </div>

Параметр feedurl используется для указания альтернативного источника для слайса, как раз то что нам нужно в данном случае.

А по адресу /slice/news находится файл который я хочу чтобы отображался в браузере.

При этом важно помнить, что внутри этого файла снова должен быть размечен слайс, поскольку IE рассматривает его именно как альтернативный источник, который снова надо парсить. Если просто вставить в этом файле какой-либо HTML (было бы логично) слайс не будет работать в браузере. Вот такое там содержимое прямо сейчас:

1. <div class="hslice entry-content" id="documents">
2. <h2 class="entry-title">Новости</h2>
3. <!--Адрес куда IE будет ходить при обновлении, сюда же -->
4. <a rel="entry-content" href="http://news.kremlin.ru/slice/news" style="display: none;" ></a>
5. <ul class="entry-content">
6. список новостей
7. </ul>
8. </div>

Как видно, обычный слайс с которого мы начинали. И теперь наконец все работает! На этом мы пока и остановились. Слайс в действии можно видеть на этой страничке, а файл самого слайса берется отсюда. Выглядит это прямо сейчас вот так:

Слайс можно растянуть по вертикали чтобы уместилось больше новостей

А вот так распознается браузером:

После, я еще много игрался и комбинировал эти методы, если кому-то интересно, вы тоже можете окунуться с головой в увлекательный мир слайсов под IE8. Но я решил удовлетвориться одним рабочим вариантом :)

Ссылки

• Подробная статья на Хабрахабре
• Про слайсы на MSDN
• Слайсы на других русскоязычных сайтах

Надеюсь кому-то это сэкономит время в будущем, и буду рад вашему опыту!
В одном из следующих постов могу рассказать об опыте вёрстки этого большого проекта. И почему все получилось сделать валидным.

P.S.: Так как у меня windows XP, и в ней стоит родной IE6, который я не хотел терять, тестировал я все в SaaS решении Spoon.net. Нужно лишь установить плагин порядка 25 мегабайт, и можно запускать почти любой браузер (всё это работает правда пока под Windows).

Web Standards Days, 28 ноября, Минск 29 Nov 2009 3:00 PM (15 years ago)

Вернулся из Минска с первого мероприятия Web Standards Days. Впечатления и отрывки докладов.

Андрей Сумин и редизайн hh.ru

Три верстальщика, около 60 разных страниц сайта, и пара месяцев на полный редизайн, включая внедрение.

Андрей Сумин

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

Было-стало

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

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

Для работы над проектом ребята придумали некий движок:

Работа над страницами сайта

Там они разными цветами отмечали готовность верстки для разных страниц сайта. По словам Андрея подход очень помог в работе. (на фото видно что всё почти зеленое — это уже последние дни перед запуском, когда всё было готово)

Исповедь Макишвили

Настолько проникновенно и с чувством Вадим рассказывал что по-другому и не назовешь.

Рассказ начался с вот такого слайда:

Shame on you, Opera!

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

Также с сожалением сказал что quirksmode на страницах Яндекса возможно был не самым удачным решением.

Кроме того Вадим рассказал о нескольких наиболее вредных глюках. И его личном «любимом» баге на решение которого он потратил больше недели. Условий для бага целых 8, и он связан с флоат блоками и длинными неразрывными словами внутри таблиц.

В среднем на одну задачу приходится две ошибки

По количеству положительных отзывов Вадима можно однозначно считать рок-звездой минской встречи. :)

Макеев о веб-шрифтах

Первый слайд презентации:

Ответ Вадима Вадиму

Pepelsbey рассказывал о шрифтах для веб, их истории и самых последних обновлениях. О том как все уже намучились c .eot. И всяком другом интересном про шрифты.

Вадим также обмолвился, что во внутренней рассылке оперовцев идея WOFF была воспринята с энтузиазмом. Так что вполне может быть этот формат станет стандартом отрасли для веб-шрифтов. WOFF это на самом деле открытый и более совершенный вариант майкрософтовского EOT.

А ещё

Николай Мациевский рассказал о том что и когда лучше использовать для рисования, SVG или canvas. Доклад доступен у него на сайте. Результат сравнения примерно такой: сложные области или чисто растровая графика — Canvas, большие по пиксельной площади объекты, которые могут быть в векторе — SVG.

Ему вообще отдельная благодарность, так как много его хороших книг подарили по ходу мероприятия.

Николай Мациевский

Весь зал выглядел примерно так, почти полный:

Народу было очень много. Ловцевич об HTML5

Кроме этого выступали и Константин Ефимов (о современных технологиях в верстке и их правильном использовании) и Павел Ловцевич (об HTML5). Артемий Ломов рассказал о конкурсе WebHiTech который недавно закончился.

Ожидался Сергей Чикуёнок, но, жаль, кажется просто не хватило времени.

• Официальный сайт мероприятия и твиттер
• Отчет Вячеслава Олиянчука aka miripuni
• Отчет на хабре
• Отчет на WebHiTech
• Фотографии от Михаила Баранова

Видео и слайды докладов думаю скоро появятся на сайте WSTdays.

Было неожиданно много людей и отличная атмосфера. Очень приятно было увидеть кучу знакомых людей из интернета. Кажется теперь в Минске должна начаться большая активность. Приходите на следующие мероприятия организованные сообществом, возможно и в Киеве ;). Организаторам большое спасибо, и Opera как спонсор молодец. А я дурак, потому что не попал на афтепати в бассейне :)

Всё крутится и летает 3 Nov 2009 3:00 PM (15 years ago)

Я занимался сексом с webkit-transition, результат можно увидеть тут, да и тут впрочем тоже, а вот что придумал Genn узнав об этом (примеры работают пока только в Хроме и Сафари).

Дальше будет немного теории, можно сразу перейти к примерам внизу.

transition transform

Это CSS3 свойства, которые пока работают только в Safari и Chrome. Еще они будут в следующей версии Firefox и Opera. Но пока нет.

Если вам совсем нечего делать, можно прочитать о них в спецификации про 2d-transforms и про transitions. Это всё конечно draft, но вряд ли что-то изменится.

Вкратце всё обстоит так.

transform — совершает всякие странные эффекты с блоком. По сути похоже на text-transform, просто эффекты более странные.
Например можно писать так:

1. .weirdblock{
2. transform: rotate(45deg) scale(2);
3. }

Путем невероятных мыслительных усилий, вы уже могли бы догадаться что этот код повернет блок на 45 градусов, и увеличит его в размере в два раза, без анимации, просто такой моментальный эффект.

Был маленький и прямой, стал большой и кривой

Пока спецификация неактуальна, для Сафари и Хрома правило нужно писать с префиксом -webkit-. То есть вот так:

1. .weirdblock{
2. -webkit-transform: rotate(45deg) scale(2);
3. }

Вот вобщем и всё, transform уже работает в последнем Фаерфоксе, кстати. Подробнее о нём.

transition — определяет анимацию блока. Используется примерно так:

1. div{
2. opacity:0.5;
3. -webkit-transition: opacity 1s linear; /*opacity - что анимируем,1s - длительность эффекта, linear - плавность эффекта*/
4. }
5. div:hover{
6. opacity:1;
7. }

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

1. a{
2. color:green;
3. -webkit-transition:all 1s linear;
4. }
5. a:hover{
6. color:red;
7. }

А теперь примеры! ;)

Примеры (пока только для Safari и Chrome)

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

Первое что пришло в голову, сделать анимированный комикс ;) Вот что получилось, выглядит странно, но он целиком сделан на CSS! Подумать только!

Дальше, еще интересней, я решил анимировать слова. А потом, конечно, это случилось и с буквами. :) Удивительно в этом то, что эту анимацию совершают всего 3-4 строки CSS-кода. (ну и джаваскрипт который предварительно раскидывает буквы по всему экрану, но это его единственная задача)

Если добавить изменение размера, получается забавно. А потом их можно еще и крутить ;), тогда они похожи на муравьёв. Но с двумя лимериками уже начинает тормозить.

По дороге получился смешной неудачный вариант. Буквы тут довольно неуклюжие.

Genn сделал ASCII трибьют, и еще один, не менее клёвый. Еще один прекрасный с отложенной анимацией (-webkit-transition-delay). И синяя лужа.

Может и у вас есть варианты? :)

Если у вас вдруг нет ни Сафари ни Хрома, вот видео пары анимаций:

Opera & Firefox

В последних непубличных версиях этих браузеров эффекты уже работают, и вызываются соответствующими правилами -o-transform, -o-transition, -moz-transform, -moz-transition. Так что теоретически, если вы делаете эффект для сайта, правила можно продублировать с этими префиксами, авось потом заработает ;). Пока что свойства идеально деградируют в других браузерах, просто анимации нет, все происходит мгновенно. А красотами наслаждаемся в Хроме и Сафари.

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

Все примеры

• Комикс на CSS
• Трибьют от Genn и второй, а также суперкрутой третий, и ошеломляющий четвертый
• Крутящиеся буквы, буквы которые засасывает и поворачивающиеся буквы, и еще неудачный вариант
• Аналоговые часы с помощью transition

Ваш арт по теме и мнение более чем приветствуется! :)

P.S.: Лимерики взяты из журнала Трамвай,
автор Татьяна Петросян, остальные тут.

font-face оживление 23 Oct 2009 4:00 PM (16 years ago)

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

Практически, будущее наступило, во всех современных браузерах на данный момент можно вставить нестандартный шрифт на страничку только с помощью CSS. (Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10+, IE 5+)

Шрифты вообще

Способов за годы веб-разработки придумано множество. И SIFR (шрифты через Flash), которому скоро 5 лет стукнет, и Cufon (шрифты через <canvas>), и всякие другие вариации типа Typeface (там кстати уже можно выделять и копировать!).

Но еще с прошлого тысячелетия самым крутым способом было конечно просто подключить нужный шрифт на страничку, и написать им текст. Сначала это сделали в Netscape, потом в IE 4.0. А теперь это в грядущем CSS3. По спецификации это принято делать так:

1. @font-face {
2. font-family: Parampampam;
3. src: url(parampampam.ttf);
4. }

И затем использовать это:

1. p { font-family: Parampampam, serif; }

Именно такой подход на данный момент сработает в Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10+. То есть практически во всех последних версиях браузеров. Они поддерживают .ttf и .otf файлы.

В IE использование своих шрифтов работает еще с версии 4.0. Но, видимо, споткнувшись еще тогда на лицензировании (или по своим иррациональным причинам), они решили создать свой формат для подключаемых файлов Embedded OpenType (.eot). Который и является средоточием геморроя в этом шрифтовом вопросе.
В любом случае, подключение там работает примерно также:

1. @font-face {
2. font-family: Parampampam;
3. src: url(parampampam.eot);
4. }

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

Как создать EOT

Давно было известно о специальной программе WEFT от Microsoft. Но мне почему-то никак не удавалось ею воспользоваться, шрифты получавшиеся в результате никогда не работали в ИЕ. Я скидывал это на лицензии или какие-то еще заморочки. Но судя по последним постам, почти ни у кого не получалось заставить ее работать. Программа эта вообще довольно уникальна, стоит лишь пробежаться глазами по простому скринкасту для конвертации OTF в EOT.

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

Вариант 1: FontForge+ttf2eot

Появился отличный онлайн сервис ttf2eot для конвертации. Но, если в него просто засунуть первый попавшийся TTF файл, получившийся EOT не будет работать в IE. Чтобы он работал, нужно предварительно почистить атрибуты шрифта. Для этого понадобится FontForge.

Если открыть шрифт в FontForge, мы получим примерно такое окошко:

FontForge

Затем нам нужно будет открыть окно с «Font Info→TTF Names» и удалить все записи отсюда, красные не удалятся, ну и ладно:

Это окошко находится в меню Element>Font Info

Можно посмотреть как это разжевано в скринкасте.

После чего просто сохраняем шрифт (File→Generate Fonts) и скармливаем его сервису ttf2eot. Результирующий файл будет работать в IE.
В скринкасте кстати, сказано, что надо удалить все атрибуты, и добавить несколько своих. Я просто удалял все, и у меня все работает. Так что можно не заморачиваться.

Вариант 2: fontsquierrel

Однако увидев всю эту мороку из предыдущего варианта, люди ее автоматизировали. Это просто онлайн сервис. Вы загружаете шрифт, он вам генерирует .svg версию шрифта, .eot версию шрифта, и даже WOFF версию (формат для новых Firefox). Вдобавок ко всему, CSS файл с правильным подключением всех этих woff-eot-svg-otf (кошмар какой-то) в @font-face.

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

Как внедрить для всех

На данный момент оптимальным принят следующий код:

1. @font-face {
2. font-family: 'Graublau Web';
3. src: url('GraublauWeb.eot');
4. src: local('Graublau Web Regular'), local('Graublau Web'),
5. url('GraublauWeb.otf') format('opentype');
6. }

Подробнее почему именно так, можно прочитать здесь. local — означает, что браузер должен проверить есть ли в системе такой шрифт, прежде чем скачивать. Должен, но все равно не везде работает. =(

Еще можно подключать шрифты в формате .svg, тогда они отобразятся даже в iPhone.

А буквально на днях активно продвинулся WOFF, это «сжатый» truetype который пока будет работать только в Firefox 3.6. Просто чтобы веб-разработчикам было нескучно с OTF, TTF, SVG и EOT.

Оптимизация

Во-первых файлы шрифта можно просто gzip'ить. Как показывает опыт, можно ужать в два раза. Что вовсе не так мало, при размере порядка 100 килобайт.

Кроме того, если открыть файл шрифта тем же FontForge, то можно увидеть кучу символов, которые вряд ли будут вами использоваться:

Вся эта бяка, которая обычно никому не нужна, занимает такое же кол-во байт, как и нужные всем буквы

Прямо в этом же FontForge ненужные символы можно удалить:

Выделить с шифтом и сделать Clear

Благодаря удалению только таких символов, файл для шрифта Myriad у меня уменьшился с 96 килобайт, до 40. Соответственно уменьшается и файл .eot.

Лицензия

Не все шрифты можно использовать в @font-face. Просто потому что его же можно будет легко скачать, а он может стоить денег. И хотя на практике вряд ли кого-то будут доставать по этому поводу, для популярных сайтов лучше не рисковать. Уже есть сайты-сборники шрифтов доступных для @font-face. Такой список есть на Webfonts.info, например, и вот еще один отличный ресурс. (Спасибо Илья!) И время от времени на разных других сайтах.

Кириллических среди них конечно мало, но, пока никто толком не разобрался с этим вопросом, полагаю шрифты можно использовать какие найдете, или просто бесплатные. Вряд ли кого-то засудят за подключение Myriad на свой блог ;)

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

Ссылки

• Пример на живом проекте и искусственный пример (с WOFF и SVG сгенерированными на Fontsquirrel)
• Becoming a Font Embedding Master — подборка информации о современном font embedding
• Лучший способ использования @font-face на данный момент и оптимизация вставки шрифтов
• Тестирование gzip для шрифтов
• Where to get web fonts — отличная статья о лицензировании шрифтов и будущем этой проблемы
• Про WOFF
• @font-face или назад в будущее
• Внедрение шрифтов — EOT и @font-face
• Тест 16 кириллических шрифтов доступных для использования

Похоже, скоро мы забудем о SIFR и Cufon! Ура!

LA, LV, NYC and Grand Canyon! 25 Aug 2009 4:00 PM (16 years ago)

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

Америка!

Как-то так:

• Все очень большое (порции еды, проспекты, люди, каньон, американские горки)
• В чайниках не нашел накипи
• Хорошие джинсы могут стоить 10 долларов
• Европа современнее
• В Нью-Йорке в метро в среднем 5% европеоидов
• Красивых девушек почти нет. Вся надежда на латинскую америку и азиаток

Большая часть фото кликается, если что.

LA

Огромные широкие улицы. Жизнь немыслима без машины. Большие пустые пляжи, и нет жилых домов выше 3х этажей. Улицы Лос Анджелеса обычно пусты.

Сразу после заката в Санта Монике

Они почти не некрасивые! Для Америки это огого!

Очень спортивная нация. Манхэттен Бич

LV

Очень дешевые отели, казино в которых так и хочется все проиграть, классные буфеты и крутое фонтанное представление.

Ах! Отличный в Bellagio буфет

Пожалуй, лучшее место в Вегасе

NYC

Удивительный Манхэттен, своя непередаваемая атмосфера, и самая ужасная странная в мире из тех что я знаю навигация в метро. Несколько случайных фото:

Задираешь голову и почти всегда вот так

Ночной Манхэттен

И утренний ;)

Прощай здоровая еда! Здравствуй Нью-Йорк!

Суббота всё-таки

А вверху все то же

На кондиционеры похоже

Обычная улица, вообще ничего примечательного нет, кроме того, что она в Нью-Йорке

Grand Canyon

Большой Каньон красивый. Там где стояла наша палатка, паслись дикие олени. И это нормально!

Настоящий олень

Большой Каньон на рассвете

Слева внизу славная речка Колорадо

Закаты популярны

На закате очень красно

Каньон

Мне, разумеется, понравилось. Вернусь. =)

Еще немного фоток.

P.S.: А вот на этих горках (не бойтесь, вы забудете что видели это видео после первых 30 секунд аттракциона) я просто не смог не кричать (мне казалось что только это может меня спасти):

Вот эти парни сейчас начнут падать головой вниз. Понимаете?

Блог на HTML5 15 Jun 2009 4:00 PM (16 years ago)

Это было так просто, что я не удержался. Новые таги такие миленькие! ;-)

Доктайп и новые таги

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

1. <!DOCTYPE html>

Класс, да? =)

В HTML5 ввели несколько структурных тагов, собственно, они — почти единственное, что можно использовать из нового стандарта прямо сейчас. Потому я просто немного переписал HTML для блога, чтобы он стал более понятным.
Самые приятные новые таги будут: <header>,<footer>,<nav>,<article> — говорят сами за себя.

<aside> — вторичный контент, то, что обычно в сайдбаре.

<section> — какой-то смысловой раздел документа.

Собственно переход

Все очень просто, если у меня в коде было:

1. <!‐‐ BEGIN .hentry ‐‐>
2. <div class='hentry'>
3. content
4. </div>
5. <!‐‐ END .hentry ‐‐>

То стало:

1. <article class='hentry'>
2. content
3. </article>

И комментарии вобщем излишни. Я и класс-то оставляю только ради микроформатов, но по-хорошему они должны будут понимать и сам таг article. Таким же образом боковая колонка:

1. <!‐‐ BEGIN .secondary ‐‐>
2. <div class='secondary'>
3. боковая колонка
4. </div>
5. <!‐‐ END .secondary ‐‐>

превращается в:

1. <aside>
2. боковая колонка
3. </aside>

И если все показать целиком:

Новые таги

Их же можно увидеть если сделать View Source на этой страничке сейчас. Есть в этом какая-то красота :).

На самом деле оставшиеся классы и айди почти полностью мог бы заменить суперсемантичный атрибут role, но атрибутивные селекторы пока не всем доступны. А было бы красиво:

1. <section role="maincontent">

А в CSS:

1. section[role=maincontent] {
2. bla:bla;
3. }

Код почти читается.

Оговорки в использовании

IE по умолчанию не будет давать возможности стилизовать новые таги. Однако, с помощью джаваскрипта его можно заставить (возможно кто-то помнит, как это было с <acronym>):

1. <!‐‐[if IE]>
2. <script>
3. document.createElement('header');
4. document.createElement('footer');
5. document.createElement('section');
6. document.createElement('aside');
7. document.createElement('nav');
8. document.createElement('article');
9. </script>
10. <![endif]‐‐>

Это все новые таги, которые я использовал для блога.

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

1. header, nav, article, footer,section {
2. display:block;
3. }

С этим можно жить.

Третий и последний нюанс. Некоторые браузеры (Camino, Firefox2) будут некорректно строить DOM c новыми тагами. Чтобы решить этот вопрос, по злой иронии, вам придется отсылать вашу HTML5 страничку с контент-тайпом application/xhtml+xml. Но я голосую за вариант: «Наплевать».

Сладкое

В HTML5 добавили таги <video> и <audio>:

1. <video src='xxx.yyy' autoplay controls>
2. <a href=''xxx.yyy''>Download this video (или другой альтернативный контент, если видео на загрузится)</a>
3. </video>

Вот так выглядят сейчас дефолтовые проигрыватели видео в браузерах:

В Сафари, не очень красивые дефолтовые контролы

В Firefox 3.5b

Opera решила выпустить только одну версию своего браузера поддерживающую <video>. Потому чтобы увидеть видео в действии вам понадобится даунгрейдиться до 9.52. Спасибо @pepelsbey из Оперы за разъяснения ;) Однако, вот так выглядит там проигрывание видео:

В Opera 9.52, на иконку «Пауза» я навел курсор.

Во всех браузерах контролы исчезают когда курсор не на видео.

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

О том как использовать HTML5-видео уже сейчас читайте дальше.

Ссылки

Не стоит расстраиваться что HTML5 еще не стандарт, и получит статус «Proposed recommendation» лишь в 2022 году. Он уже частично поддерживается браузерами, и большие компании начинают с ним играться. Поиграйтесь и вы. ;) На самом деле войдет в обиход гораздо раньше, не стоит пугаться 22го года.

• HTML5 Editor's Draft — главная информация что есть на данный момент об HTML5
• HTML5 на YouTube и на сайте компании Apple
• Про использование html5-video уже сейчас
• HTML 5 elements test (и пример странички)
• Structural Tags in HTML5 от Steve Smith
• Поддержка всяких модных фич в браузерах
• Экспериментальный HTML5-валидатор да и обычный уже тоже проверяет HTML5
• Статья про HTML5 на A List Apart
• Готов ли HTML5?

Если с переходом на HTML5 что-то поломалось, я буду рад это услышать! Уж больно гладко все. Я даже прошел валидацию.
И, да, это все пока лишь эксперименты. Не для серьезного использования, конечно.

Но, с HTML5 снова стало приятно расставлять таги. Всё как в первый раз. :)

Копировать в буфер 14 Apr 2009 4:00 PM (16 years ago)

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

Что это и зачем

Обычно эту кнопку помещают возле всяких «кодов для вставки» видео, или картинок. Чтобы людям было проще копировать. Как-то так:

Копирование ссылки на одном из укоротителей ссылок

Копирование кода на dni.ru

Как это делают

Скопировать в буфер в IE можно обычным джаваскриптом:

1. window.clipboardData.setData('Text','Текст который будет в буфере');

У всех остальных браузеров настройки безопасности по дефолту не позволят это сделать. Потому обычно этот вопрос решали с помощью Flash. Динамически создавался флэш ролик, и в его параметры добавляли текст, который нужно было поместить в буфер. А сам флэш уже имеет доступ к буферу в любой системе-браузере, примерно так:

1. flash = '<embed src="copy.swf" FlashVars="clipboard='+encodeURIComponent(t)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
2. element.innerHTML = flash;

Ролик запрограммирован так, что при создании сразу копирует свой параметр clipboard пользователю в буфер. Так это всегда и работало. Но.

Проблема

Однако, осенью 2008 в флэше нашелся эксплойт, благодаря которому злоумышленники могли как угодно использовать буфер обмена пользователя без его ведома (собственно, метод описанный выше и был эксплойтом). Поэтому в Flash 10 было введено ограничение

With Flash Player 10, the System.setClipboard() method may be successfully called only through ActionScript that originates from user interaction.

Потому, на самом деле, вся та куча плагинов для jquery, например, которые вы нагуглите по запросу «jquery copy to clipboard» попросту не работает в 10м Flash плеере. При этом, они отлично работают в 8 и 9 версиях (что внесло кучу путаницы в разбирательство с ситуацией). Но учитывая что 10й имеет долю больше 50% нет никакого смысла его игнорировать. Копирование в буфер старым способом больше нельзя считать надежным.

Решение

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

• clipboard — текст который нужно скопировать в буфер
• normal — картинка для для дефолтового состояния кнопки
• hover — картинка для mouseover состояния кнопки
• pressed — картинка для нажатого состояния кнопки

hover и pressed можно не задавать, тогда кнопка просто не будет изменяться при клике и наведении курсора. Текст из переменной clipboard копируется в буфер при клике на кнопку. Для примера взял две такие картинки:

Зеленая дефолтовая, синяя для нажатого состояния. Потому что зеленый круче.

И самый простой пример иллюстрирующий применение, там же и другие примеры. Фактически с помощью одного этого ролика можно сделать почти любую нужную кнопку. Для чего я, собственно, это все и затеял =)

Ссылки

• Апдейт флэша в котором запретили копировать в буфер без действий пользователя
• Thanx for not killing the Flash clipboard
• Примеры кнопок (скачать файлы)
• Автоматизированный вариант с mootools
• Способ с джаваскриптом подставляющим поверх кнопок прозрачный флэш-ролик (Спасибо Иван!)
• Пост на mega.genn.org про эти кнопочки

Собственно пост я написал чтобы никто не пытался реализовать копирование в буфер с помощью старого джаваскрипта. И чтобы никогда больше не волноваться об этой проблеме самому. =)

Update: Как оказалось этот флэш-метод не работает на Ubuntu c Gnash/swfdec. Однако на этих эмуляторах не работают и никакие другие методы. Спасибо Владимиру за указание на проблему!

Простой аккордеон 29 Mar 2009 4:00 PM (16 years ago)

Это те самые, странно разворачивающиеся и очень редко нужные менюшки. ;)
Так как jquery стал почти стандартом в индустрии, дальше я буду говорить только о нем.

Проблема

На сайте понадобился такой элемент. Выглядят они обычно как-то так. Я буду считать что один из его блоков должен быть всегда открыт, но на деле, это не очень важно. Ну и предполагаем, что по невероятному совпадению на сайте уже есть jquery. Потому что подключать его только ради меню глупо, согласитесь. Но, если очень хочется, то, как всегда, можно. HTML — обычный dl, в котором dt будут кликаться, а dd раскрываться, вот такой:

1. <dl>
2. <dt class="b-acc">Заголовок</dt>
3. <dd>
4. Контент
5. </dd>
6. ...

И все видимые блоки имеют фиксированную высоту 150px.

#1: Своими силами

Сделать такой эффект своими силами вроде бы совсем несложно. Всего-то нужно схлопывать-расхлопывать два блока одновременно.

1. $(".b-acc").click(function(){
2. if($(this).hasClass('b-acc-active')) {
3. // сделать что-то если блок уже открыт
4. }
5. else{
6. $("dd:visible").slideUp();// закрыть «видимый» блок
7. $(this).next().slideDown();// открыть новый блок
8. // и переключить класс b-acc-active
9. ...
10. }
11. return;
12. });

Можно посмотреть в работе. На первый взгляд все отлично. Однако, если присмотреться, во время анимаций нижняя граница аккордеона скачет. В некоторых проектах на это и можно закрыть глаза, но когда под аккордеоном куча контента, который будет прыгать на 1-2 пикселя, это очень неприятно. Пришлось искать решение.

#2: Плагин

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

Я сделал простой пример работы плагина. Нижняя кромка больше не прыгает.
Однако добавилось 8 Кбайтов плагина.

#3: Улучшенный вариант

Но так хотелось все оставить простым, так не хотелось подключать кучу лишнего кода, который, я знал, никому на сайте уже не понадобится. И я решил раскопать проблему, почему же нижняя граница дергается, и как это все исправить. В конце концов оказалось, что функции slideUp и slideDown меняют высоту блоков не по целым значениям. То есть, в процессе анимации высоте блока присваиваются значения вроде 2.157305232px. При этом, округление в браузерах работает очень по-разному, что и приводило к «вибрации» нижней кромки аккордеона.

Наконец забравшись в недра плагина, я нашел решение, которое также познакомило меня с малоизвестными возможностями jquery.
Идея примерно такая: мы начинаем «схлопывать» видимый блок, при этом, на каждом шаге анимации, рассчитывать высоту расхлопываемого блока так, чтобы сумма их оставалась константой. То есть, если на каком-то шаге высота закрываемого 50 пикселей, то высота открываемого будет 100 (в сумме 150px).

Для этого в jquery есть специальный механизм. В функции animate, есть возможность исполнять что-то на каждом шаге анимации. Называется этот коллбэк — step.
Финальное работающее решение выглядит примерно так:

1. toShow = $(this).next();
2. toHide = $(".accordion dd:visible");
3.  
4. staticheight = toHide.height(); //определить высоту блоков, 150px
5. toShow.css({ height: 0,display: 'block' }); // открываемый делаем "видимым" с высотой 0, теперь он готов к анимации
6. toHide.animate({height:"hide"},{ // начинаем скрывать видимый
7. step: function(now) { // на каждом шаге выполняем, now - значение height в каждый момент
8. var current = staticheight - now; // собственно рассчет
9. if ($.browser.msie || $.browser.opera || $.browser.safari) { // все округляют по-своему
10. current = Math.ceil(current);
11. }
12. toShow.height(current); // присваиваем высоту
13. },
14. duration: 500
15. });

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

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

В конце

Все это далеко не rocket science, но мои долгие попытки найти легкое решение этой проблемы приводили только к плагину. Который я, ну никак не хотел подключать. Потому надеюсь кому-то это сэкономит усилия и код. И буду рад услышать ваше мнение об этом.

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

Ссылки

• Плагин для jquery
• Ссылку на документацию step, найти не удалось, был бы благодарен, если кто-то сталкивался
• Пример с плагином
• Пример своими силами
• Пример своими силами, с зафиксированной нижней кромкой

Яндекс-Субботник, 31 января, Москва 31 Jan 2009 3:00 PM (16 years ago)

День удался. Ездил в Москву послушать крымчан, и не только. Фотки и впечатления.

Вадим Макишвили и IntelliJ IDEA

Вадим начал с великолепного философского вступления о FAR и роботах. Он признался, что ему, к сожалению, не заплатили, и он не собирался никого агитировать за свой редактор (но не потому, что не заплатили!). Просто делился приятным опытом разработки в этом приложении.

Вадим Макишвили об IntelliJ IDEA

Дальше речь пошла о настройке и фичах IntelliJ IDEA. Похоже большая часть сервисов Яндекса написана именно в нем.

Редактор предназначался для Java, но в нем оказалось так много вкусных фич для вёрстки, что никто не устоял. Если вкратце, то, что особенно понравилось мне: удобная валидация, возможность добавления своих DTD для валидации, продвинутый автокомплит, удобство организации проектов и интеграция с SVN.

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

IntelliJ IDEA платный, но если скачивать бета-версии, которые почти не падают, можно пользоваться им бесплатно.

Подробнее об IntelliJ IDEA в блоге Вадима Макишвили

Наталья Макишвили и вёрстка под мобильные телефоны

Именно телефоны, а не ПДА, КПК и т д. Доклад про смартфоны будет следующим, как заявила Наталья.

Милый курьез, в докладе:

Вопрос из зала: -А как вы тестируете? У вас что, 50 мобильных там лежит что ли?!
Наталья со смехом: -Нет-нет, ну что вы, конечно не 50... Всего лишь 30.

Всего-то 24 на фото :-P

Сначала было просто интересно. Однако, после нескольких слайдов, когда оказалось, что часто нельзя менять шрифт или задавать фон, я сильно погрустнел.

Первое впечатление было конечно, что вообще ничего нельзя и лучше писать все в HTML-стиле 90х. Но в конце сказали что у Яндекса получается прятать все хаки в CSS, и отдавать всем мобильным один HTML. Что уже вобщем оглушительный успех, учитывая всякие такие штуки:

Русский италик не везде есть

И еще пара забавных слайдов которыми со мной любезно поделилась Наталья:

Так работает фон

И, да, часто нельзя менять размер-семейство шрифта

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

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

Занимательные факты: за прошедший год мобильная аудитория Яндекса выросла в 5 раз, айфоны составляют 2% от мобильной аудитории.

Любопытно, что самым популярным мобильным с которым ходят на Яндекс оказалась Nokia 6300. Такая же как у верстальщицы мобильных версий, как выяснилось. И почти такая же, как была у меня. ;)

Виталий Харисов про CSS Framework

Этот фреймворк не похож на другие, ибо в его основе лежит не «набор полезных CSS правил которые сэкономят вам время», а «идея упорядочивания CSS для проектов с неограниченным ростом». Звучит сложно, но на самом деле это просто формализированный ОО CSS. Который в той или иной мере применяют многие опытные верстуны. Но, на этот раз, правила установлены четко, и это работает для проектов Яндекса.

«ИЕ недобраузер, если это вообще браузер»

Фреймворк является логическим расширением старой идеи Виталия о независимых блоках. Но теперь кроме правил CSS-кода включает в себя правила упорядочивания CSS-файлов.

Идея, я считаю, очень сильная. Часть этого фреймворка, решающая типовые проблемы: вроде круглых уголков, и PNG прозрачности, была выложена Виталием в онлайн. И кто хочет, может ее поизучать. Фактически, живой кусочек будущей вёрстки Яндекса, без лишнего кода (конкретного дизайна страниц яндекса).

Не пугайтесь кол-ва CSS-файлов, для продакшн версии сайта они сливаются в один.
Можете сравнить например файл «до деплоймента» и в «боевом виде». Они абсолютно эквивалентны. Но первый используется только при разработке.

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

Было и несколько относительно свежих идей:

Таким образом, запрос к серверу только один. Идеей с Виталием поделился Алексей Тен.

Кешируемый expression, уже не раз упоминали, не лишне.

Вспоминали и про таблицы.

Фёдор Голубев про Яндекс.Карты

Наконец появился так называемый Static API, с помощью которого вы можете просто поставить точку на карте, и вставить себе в сайт статическую картинку которая будет показывать эту точку. То, что я уже десяток раз успел сделать вручную ;). Наконец-то это можно сделать вот тут:

Неизвестный смельчак перенёс в этой точке годы кормления манной кашей

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

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

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

Как они сами говорят, если бы дело было только в картах, то мы фактически создали себе конкурентов своим же API.

Евгения Фирсова про деплоймент и Вадим Макеев про Паровоз

Евгения руководит группой верстальщиков для проекта Яндекс.Деньги. Информации в докладе было просто адски много, но не про меня. Потому под конец дня ничего не улеглось в голове. Последние два года я удалился от сервисов массового обслуживания, и уже стал забывать времена стресс-апдейтов в ukr.net. Так что эту информацию лучше читайте в других отчетах, или в официальном.

Вадим, еще раз клево рассказал о всяких трюках с Photoshop'ом чтобы упростить жизнь верстальщикам. Прелюдно дал слово опубликовать статью с полным текстом доклада у себя в блоге. Ждем ;).

Вадим и Кнопка

Ссылки

• Презентации с субботника
• Фотоальбом субботника и еще один фотоотчет
• Другие отчеты
• Развернутый отличный отчет absolvo
• Короткое впечатление Андрея Мальцева
• Отзыв tachisis
• Отзыв от miripiruni

Отлично!

Спасибо Яндексу, спасибо его докладчикам. Клевый вышел день ;) Отличное уютное мероприятие. Много-много знакомых хороших людей.

Pssst! такая чисто верстальщицкая однодневная штука была бы интересна кому-то в Киеве? =)

CSSing 2008 29 Dec 2008 3:00 PM (16 years ago)

Самое интересное опубликованное в этом блоге за год.

В хронологическом порядке

• Как найти баг в вёрстке — самый простой и надежный способ обнаружить ошибку в верстке
• Envision, 14-15 января, Прага — отчет о конференции для дизайнеров, организатором был Microsoft, основными темами: будущее дизайна, инструменты дизайнеров
• Успеть всё или управление временем — мой перевод статьи Кейт Робинсон о том, как экономить время в повседневной айти-жизни
• Barcamp, 8-10 февраля, Рига — самое интересное с первого латвийского баркемпа
• Perl мова, 23 февраля, Киев — отчет о перловой конференции проведенной в Киеве
• 5 инструментов — несколько приложений без которых я не могу жить, а также чужие списки
• Миямото Мусаси и вёрстка — параллели между учением одного из знаменитейших японских воинов и бытом фрилансера-верстальщика
• Проблема со списками в IE — описание и решение стандартного бага со списками в ИЕ
• UA WEB 2008 состоялся! — отчет о первой конференции веб-разработчиков которую я организовал
• CSS print framework — безжалостная эксплуатация термина framework для некоторых советов по стилям для печати
• РИТ 2008, 14-15 апреля, Москва — фото, выступления
• От идеи к действию: что мешает? — мои мысли о том как перестать собираться что-то сделать, и начать это делать
• 5 советов верстальщику — мои, и не только мои советы верстальщикам, эстафета получилась большой и интересной.
• Интересное о мобильном интернете — некоторые знания вынесенные из конкурса на лучшую статью о мобильном интернет.
• Круглые уголки, интересные варианты — несколько подсмотренных техник для круглых уголков
• Какие-то сложные игры c флоатами — по-другому и правда не скажешь. Необычный clear'инг
• Адаптивные блоки — несколько способов адаптировать кол-во отображаемых в строку элементов в зависимости от размера экрана
• Применение clip для PNG в ИЕ — эмуляция свойства background-position для полупрозрачных PNG-картинок в ИЕ
• Альфа-каналы в PNG-8 — пост-напоминание, они (каналы) есть. Полупрозрачные картинки из 256 цветов
• Håkon Wium Lie, CSS и educamp — приезд одного из создателей CSS в Киев, видео, информация и фото
• Internet Explorer и z-index — описание одного распространенного и вредного бага в ИЕ
• Clienttech, 15-16 декабря, Москва — отчет о конференции посвященной клиентским технологиям

В прошлом

• Лучшее за 2005
• Лучшее за 2006
• Лучшее за 2007

Спасибо всем кто читал, надеюсь вам нравится.
С наступающим всех! ;)

Clienttech, 15-16 декабря, Москва 18 Dec 2008 3:00 PM (16 years ago)

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

Баги в вёрстке и печатные версии

Наталья Арефьева поделилась коллекцией свежих багов из её опыта работы в компании SUP. И с помощью веселых бегемотиков (руки ohyesya) описала основные правила поиска багов. Было интересно, и даже качество этой суперфотки не скрывает ужас одного из багов о которых она рассказала.

Один из багов.
Тень профессионала (слева внизу) уже упала на его дрожащий от страха код

Вряд ли там кто-то что-то разглядит, но ведь классно же фотки оформлены на блоге?

Медицинская тема в дебаггинге

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

base64 в массы

Николай Мациевский рассказал об очередной клевой технологии оптимизации загрузки сайтов. На этот раз ему удалось сэмулировать объединение всех CSS-картинок сайта в «в одну». Делается это с помощью base64-представления картинок для всех браузеров, и технологии mhtml для IE. Все отлично работает, есть только пара нюансов связанных с отключенным джаваскрипт и «плохо» (никак) не работающим mhtml в ИЕ7 под вистой.

Недостатки mhtml

Живой автор книги!

Вживую с алгоритмом сжатия можно ознакомиться на открытом Николаем вместе с Русланом Синицким сервисе Data URI [CSS] Sprites. Попробуйте сжать свой сайт ;-). Николай, также рассказывал о своей книге, которую можно будет купить в начале 2009-го. Очень насыщенная практической информацией, кстати.

Влияет ли вёрстка на анимацию в браузере

Любопытные тесты провел Сергей Чикуенок, технический директор студии Лебедева. Он тестировал то, что на самом деле давно волнует всех верстальщиков и джаваскриптеров. Связана ли сложность верстки с временем отработки джаваскрипта. Все понимают, что чем сложнее код, тем медленнее будет работать джаваскрипт. Но тесты в некоторых случаях все равно оказались удивительными. Я приведу лишь несколько из них, Сергей пообещал что выложит их на сайте студии в менее отвратительном качестве, чем мои фото.

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

В первом тесте сравнивались анимации (fps) когда блоки были relative и absolute. Почти везде оказалось одинаково, но в операх абсолюты сработали быстрее.

Во втором тесте страничку усложнили глубоким DOM-деревом, и сравнивали скорость анимации с неглубоким. Safari, Chrome и Опера оказались к нему чувствительны:

Наконец, как вела себя анимация в которой участвовала картинка растянутая на 1 пиксель. (это когда ее размер 100x100, а мы в коде явно указываем 100x101). Почти во всех браузерах анимация этой картинки сильно замедлилась:

Тестов было гораздо больше, и в конце много советов. Из тех которые стоит повторить: верстайте обязательно с учетом будущих анимаций. Используйте alphaimageloader не только для прозрачных PNG, но и для повышения производительности ИЕ при работе с обычными картинками. Так же, в некоторых случаях, в анимациях лучше использовать настоящие картинки (img) а не background-image.

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

Верстка для iPhone

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

Так было, просто уменьшенный сайт

После совсем простой оптимизации (немножко джаваскрипта и отдельный CSS)

Так стало, слегка оптимизированная версия

Мелочь, а приятно. В презентации есть нос Геннадия, кусочки кода и несколько полезных линков, для более глубокого изучения.

Диденко про IE8

Доклад вышел не совсем технологический, хотя и код показывали. В основном разговор пошел о новых фичах в ИЕ8, о слайсах. Их уже внедрили основные игроки российского рынка afisha.ru, yandex, gizmeteo, rutube и другие. Чем не преминул похвастаться Пётр. Слайсы, фактически, одно из применений микроформатов. Достаточно добавить определенные классы:

1. <div class="hslice" id="my-first-web-slice">
2. <p class="entry-title">Название слайса</p>
3. <div class="entry-content">
4. …например погода в Киеве…
5. </div>
6. </div>

И эта область будет подсвечиваться при наведении в ИЕ8, и можно будет следить за обновлениями именно в этом кусочке HTML. В результате погоду можно смотреть примерно так:

Слайс для gizmeteo

Напомнили также о поддержке некоторых вещей из HTML5, и событий onoffline-ononline.

В конце Петру Диденко задали забавный технологический вопрос, который сам по себе прозвучал как шутка:

Будет ли в IE8 Дом 2?

Конференция вышла интересной, и в чем-то, уютной. Хотя народу в этот раз было не так много как раньше, всё объяснили этой штукой на букву «К» о которой все говорят.

P.S.: за часть фото (те на которых что-то видно) спасибо Михаилу Баранову!

Internet Explorer и z-index 6 Dec 2008 3:00 PM (16 years ago)

ИЕ воспринимает z-index не совсем так, как все остальные браузеры. Это поведение настолько часто встречается в моей жизни, что я решил о нём написать целый пост.
Меня часто просят поправить ошибки в верстке. Так вот эта — входит в топ-5.

z-index работает?

Да, совершенно точно работает. Берем два блока, с position:absolute (для работы z-index нужен либо relative либо absolute) Задаем им обоим что-то такое:

1. #block1, #block2{
2. position:absolute
3. }
4. #block1{z-index:10}
5. #block2{z-index:20}

На самом деле, мне просто больше нравятся зеленые блоки.
Не обращайте внимания на Гитлера.

Блок с большим z-index отобразится поверх блока с меньшим z-index. Все как бы работает. И в IE в том числе.

работает, но...

Классическая обстановка для «проблемы в вёрстке».

В коде идут подряд два блока с position:relative. Например, два блока новости, или блоки вроде header и content. В relative ничего необычного нет, может добавили для absolute блоков внутри, или для хаков.
Как-то так:

1. <div class="entry"></div>
2. <div class="entry"></div>

И теперь, например, в одном из них появляется всплывающее окошко, или попап, или выпадающее меню:

1. <div class="entry">
2. <div class="popup">Попап</div>
3. </div>
4. <div class="entry"></div>

И такой вот дизайн:

Попап должен находиться в блоке 1

Будь вы мной, вы написали бы такой CSS:

1. .entry{
2. position:relative
3. }
4. .popup{
5. position:absolute;
6. z-index:10;
7. top:10px;left:100px;
8. }

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

Там это будет выглядеть так:

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

Я это понимаю так: ИЕ сравнивает не только z-index блоков, но и z-index их родителей. Причем родительский важнее. В моем примере роль «родительского z-index» исполняет просто последовательность блоков в коде. Какие блоки дальше в коде, те и отобразятся поверх.

Я сделал специальный пример, смайлик из acid-теста будет улыбаться всем браузерам кроме ИЕ. (его улыбка зависит от этого вот поведения с relative блоками)

решение?

1. Убрать position:relative для .entry
2. Задавать разные z-index для .entry. В случае новостей это невозможно, они ведь генерируются симметрично. Однако когда у нас header и content, вполне подходит.

Может быть есть еще?

В конце

Мне не хочется называть это багом, поскольку для него требуется куча обстоятельств, скорее всего не описанных w3c. (или описанных?) Поведение имеет место в IE5-7. И, наверное, 8. Как всегда буду рад вашему опыту и мыслям по этому поводу. Статьи на тему этого поведения:

• Stacking context
• Effect of z-index value to positioned elements

Håkon Wium Lie, CSS и educamp 17 Nov 2008 3:00 PM (16 years ago)

Познакомился с человеком придумавшим название для моего блога. Буквы, картинки, видео. Еще он придумал Acid2 и CSS.

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й комментарий). В зале, кстати, на моем выступлении было примерно половина девушек. Надеюсь в нашей профессии их будет все больше ;)

Вместе со мной выступал Геннадий Осипенко. Который очень весело рассказал о дизайне, его часть презентации называлась «Все мальчики - диджеи, все девочки - модели.»

Другие рассказы о приезде Håkon'а можно найти на блогах Олега Бурлака и masterpiecer'а

CSS3 и блочная модель 12 Nov 2008 3:00 PM (16 years ago)

Это так мило и забавно, и связано со старыми добрыми временами, когда нужно было верстать под IE5.

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

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

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

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

Нет, ну правда: вы задаете колонке ширину 100 пикселей, и небольшую границу в 2 пикселя.
И, вуаля, ширина уже 104 пикселя!
Почему? Если я сказал, чтобы она была 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.

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

Альфа-каналы в PNG-8 6 Nov 2008 3:00 PM (16 years ago)

Мало кто знает, но они действительно существуют.

Проблема полупрозрачных картинок медленно умирает вместе с 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 из заметки

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

BlogcampCEE, Киев, 17-19 октября 20 Oct 2008 4:00 PM (17 years ago)

Не мог пройти мимо этого события. Несколько впечатлений. И пара фоток.

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

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

Яндексовцы выступили со стандартной статистикой по украинским блогам. Как оказалось, сейчас в Украине уже 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 для PNG в ИЕ 30 Sep 2008 4:00 PM (17 years ago)

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

Как работает 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 все-таки.

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

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

Красота 20 Sep 2008 4:00 PM (17 years ago)

несколько вещей, которые восхитили меня за последний год. И продолжают восхищать.

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.: пост стал участником эстафеты

Адаптивные блоки 16 Sep 2008 4:00 PM (17 years ago)

Это когда блоки подстраиваются под ваш размер экрана изменяя ширину и положение. Звучит сложно, выглядит естественно. Далее несколько вариантов.

Cтолкнулся в одном из проектов. Было бы обидно оставить добытые знания пылиться бесполезной кипой в мозге. =)

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

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

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

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

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

Плюс 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, за текст лично Дугласу Адамсу!

Какие-то сложные игры c флоатами 28 Aug 2008 4:00 PM (17 years ago)

По-другому и правда не назовешь. Ах, эта обманчивая внешняя простота:

Всё красиво

Всё просто

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

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

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

Блок внизу одной из колонок 13 Aug 2008 4:00 PM (17 years ago)

О том как это сделать меня спросили 2 раза за последние 3 дня, потому... Простой приём, вряд ли это будет полезно опытным кодерам, но наверняка принесет кому-то пользу.

Проблема

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

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

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

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

Конечно, умный читатель сразу, подметит что эту картинку внизу можно было бы сделать и обычным фоновым рисунком, с 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. }

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

В конце

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

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

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

G-club, микроформаты и дизайн 7 Aug 2008 4:00 PM (17 years ago)

Выступали в g-club, замечательной инициативе от компании GlobalLogic. Я рассказывал о вёрстке и микроформатах, Гена забавно и увлекательно о том как делать сайты.

Презентация

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

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

Кроме рассказа о компаниях и проектах с кодом которых я сталкивался или работал, я рассказал о том, что такое микроформаты, на паре простых примеров показал, как легко их внедрять. Затем рассказал о гугловском 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

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

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

Зачем жить 12 Jul 2008 4:00 PM (17 years ago)

Некоторые мысли математика родившиеся когда стало совсем плохо. И возникли вопросы, вроде: "а зачем дальше-то жить?". А я знаю зачем, akella.

Когда

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

Вот

Я представил, что весь мир — это число, сумма чисел всех людей. Число человека — его поступки. Плохой поступок человека — «-1», хороший — «+1». Каждый человек непрерывно делает поступки, и мир, сумма этих поступков каждого человека. Сумма «чисел-людей». Возможно это «+1 000 000», когда мир хорош, или «-1000», когда всё скорее плохо, чем хорошо. Но, это такое вот число. И на него влияет каждый человек. Своими делами.

Если вас не станет, вы не сможете влиять на него, вы будете обычный 0. И так навсегда.
А если вы останетесь, и будете делать что-то хорошее, вы сможете изменить мир. Вы сможете сделать сумму мира — больше. Это же круто, делать этот мир лучше. Вместо того чтобы стоять в стороне с обиженным лицом и теребить свой 0.

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

Кому нужен хороший мир? Я не знаю ответа на этот вопрос. Но кому-то точно нужен. Скорее всего, и в первую очередь, вам самим.

Вы?

Это часть моей головы, она где-то рядом с кляксами, ни плохая ни хорошая, но часть.

И.. рад услышать мнения, и ваши же обоснования, зачем. Моменты такие (особенно с манкой), уверен, бывают почти у всех.

Круглые уголки, интересные варианты 22 Jun 2008 4:00 PM (17 years ago)

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

Обычный вариант

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

1. <!-- BEGIN блок с круглыми краями -->
2. <div class="content">
3. <div class="in1">
4. <div class="in2">
5. <div class="in3">
6. наконец контент!
7. </div>
8. </div>
9. </div>
10. </div>
11. <!-- END блок с круглыми краями -->

Для уголков соответственно берутся картинки вроде этой:

Закругленный уголок, обычно нужно 4 штуки, для каждого из углов

Расставляются уголки вот так:

1. .content{background:url(../img/top-left.png) no-repeat top left}
2. .in1{background:url(../img/top-right.png) no-repeat top right}
3. .in2{background:url(../img/bottom-left.png) no-repeat bottom left}
4. .in3{background:url(../img/bottom-right.png) no-repeat bottom right}

Вариант на wordpress.org, css only

1. .block{
2. -moz-border-radius: 3px;
3. -khtml-border-radius: 3px;
4. -webkit-border-radius: 3px;
5. border-radius:3px;
6. }

Это сработает везде кроме IE (и Opera всё собирается), а это сейчас уже, вобщем, немало. Потому для не очень важных мест, или для сайтов с известной статистикой, это можно делать уже сейчас.

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

Вариант на beta.ya.ru

Всем верстальщикам знаком неприятный момент при загрузке круглых уголков. Они грузятся по очереди, и иногда это выглядит довольно неопрятно. Решить эту проблему можно, если поместить все уголки в одну картинку, и затем просто смещением позиции фона, расставить их. Но возникает вопрос — «Как это сделать, черт возьми?».

В Яндексе эту проблему решили. На главной можно пронаблюдать кнопочку «Присоединиться». (тем кто залогинен, нужно выйти, на секунду)

При увеличении шрифта, кнопочка будет расти. Более того! Фоном для нее может служить любой рисунок или градиент(имеется ввиду подложка, которая сейчас белая)

Вот какой применяется HTML:

1. <a href="#" class="b-button b-button-orange">
2. <i class="t"><i></i></i>
3. <i class="r"><i></i></i>
4. <i class="b"><i></i></i>
5. <i class="l"><i></i></i>
6. <i class="rt"><i></i></i>
7. <i class="rb"><i></i></i>
8. <i class="lb"><i></i></i>
9. <i class="lt"><i></i></i>
10. <b>Присоединиться!</b>
11. </a>

Выглядит страшновато, но на самом деле все очень просто, и с помощью всего двух таких вот необычных картинок:

Все круглые края, а также верх и низ кнопки

Левый и правый края кнопки. Картинка на самом деле 32x1 пиксель, но я её растянул, чтобы было видно.

Настоящие математики думаю оценят красоту задачи: "парой картинок реализовать круглые края".

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

Полный код я приводить не буду, скажу лишь, что всё замешано на position:absolute и background-position. Кому интересно, весь CSS-код находится в начале этого файла.
Остается только преклониться перед мастерством, и я бы сказал, изворотливостью профессионалов работающих в Яндекс (Крыму привет!). =)

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

Cсылки

Проблема, мягко говоря, изучена вдоль и поперёк. Несколько полезно-интересных ссылок.

• Три примера из поста, вживую
• Закругленные уголки с помощью VML (IE) и border-radius(для всех остальных), работает в IE,Safari,Firfox
• Круглые уголки, все методы, классифицированные по способам реализации
• Roundedcornr.com ресурс для генерации картинок круглых уголков
• Curvy Corners генерируются джаваскриптом
• Spiffy Corners без джаваскрипта, без картинок, эмуляция с помощью нескольких дополнительных дивов
• Nifty corners, тоже самое что Spiffy, только с джаваскриптом
• Несколько интересных вариантов от Stu Nicholls (Спасибо Tutta)

Рад буду услышать Ваш оригинальный способ для круглых уголков! Я думал, что применял всё что известно, но оказалось что о двух рассказанных сегодня в посте, я всерьез не задумывался никогда.

ЗЫ: никогда никого не просил о помощи в этом блоге, но если Вы учитесь(учились, работаете) на физфаке МГУ и у вас добрая душа (или вы просто хотите улучшить карму, как это делает Earl), дайте знать пожалуйста, я в долгу не остаюсь.

wp_footer exploit, владельцам блогов на Wordpress 31 May 2008 4:00 PM (17 years ago)

Мой блог стал пропадать из гугла, причиной оказался практически незаметный эксплойт для Wordpress. О том как узнать о нем, и избавиться от него, этот пост.

Чтобы узнать об этих граблях мне пришлось наступить на них. Это было больно, половина страниц моего блога ушла из индекса гугла. Надеюсь с вами этого не случится.

Что вообще происходит?

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

Я заметил их случайно, просматривая HTML закешированной главной странички моего блога, вот скриншот кода (внизу странички, после футера, очень много ссылок):

Куча спама в коде cssing'a

Или вот кусочек кода, чтобы было видно:

<div id="_wp_footer"><a href="http://www.articulate.com/blog/?page=0" title="Acyclovir">Acyclovir</a>
<a href="http://www.articulate.com/blog/?page=1" title="Adderall">Adderall</a>
<a href="http://www.articulate.com/blog/?page=2" title="Adipex">Adipex</a>
<a href="http://www.articulate.com/blog/?page=3" title="Alprazolam">Alprazolam</a>
<a href="http://www.articulate.com/blog/?page=4" title="Ambien">Ambien</a>
...  и еще около 100 ссылок ...

Ссылки, конечно, могут быть и другие, но их будет очень много, и заметить их будет легко.

Обнаружить у себя этот спам очень просто:

1. Вводим в google адрес своего блога
2. Жмем на "cached" или "сохраненная копия"
3. В своём броузере нажимаем "View Source" (просмотр исходного кода, или HTML-кода)
4. В самом низу кода ищем огромный список левых ссылок (как показано выше на скриншоте, и в виде текста). Ссылки могут быть другие, но понять ваши они или нет, вы сможете легко.

Либо прописываем в фаерфоксе вместо User Agent - "Googlebot/2.1 (+http://www.googlebot.com/bot.html)". Типа для продвинутых.

Cсылки вставляются с помощью функции wp_footer(). Потому для быстрого исправления, достаточно ее закомментировать в footer.php. (она редко кем используется)

Как это всё убрать

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

1. Проверить .htaccess

В .htaccess возможны подозрительные редиректы. Обычно этот файл довольно маленький и без ссылок.

2. Проверить файлы внутри вашей темы

Проверить папку wp-content/wp-theme/YOUR_THEME/ на предмет подозрительных файлов. Например в некоторых случаях там появляется файл index2.php. Или еще что-то необычное.

3. Проверить папку wp-includes/

Искать нужно файл class-mail.php, если найдете: compat.php — (необходимо заменить на корректный с wordpress.org) class-mail.php — удалить.

4. Проверить файл wp-includes/default_filters.php

В файле default_filters.php поищите такую строку:

add_action('wp_footer','wpc7c16b8466d864eeefd20050625c7775');

Или похожие на нее. Они же могут вобщем-то быть в любых файлах.

5. Таблица wp_options

В базе данных следует обратить внимание на строку в таблице wp_options, где option_name=active_plugins. Там, в поле option_value вероятно могут находиться ссылки на вызываемый код, например так:

i:1;s:117:"../../../../../../../../../../../../../../../../../../../../../../tmp/tmpzv0zq2/sess_12d33bbd6fb1b4f67df11f089be43b20";
i:2;s:45:"../../wp-content/themes/cssing2/index_old.gif";

Не может не вызвать подозрения, неправда ли?
Обычно там что-то вроде этого:

i:6;s:25:"subscribe-to-comments.php";

Если у вас обнаружились похожие подозрительные значения в базе, скорее всего такой запрос вернет вам остатки эксплойта:

SELECT option_value FROM wp_options WHERE option_name = 'internal_links_cache'

Непосредственно в этом поле, у меня хранились ссылки выводимые поисковикам закодированные base64.

6. Проверить файлы *_new.giff *_old.pngg *_new.php, *_old.gif

В некоторых директориях инсталляции Wordpress могут появится файлы вроде index_old.gif, index_old.giff, whatever_new.php. И тому подобные. Их нужно обязательно удалить. Файлы могут быть во всех директориях: /wp-content/uploads /wp-content/plugins /wp-content/themes /wp-includes /wp-admins /

7. Поиск 'base64' в тексте

В идеале лучше сделать поиск по всем файлам Вордпресса таких строк: base64 (рядом с кучей непонятных символов) — рядом должно быть что-то вроде eval.... _wp_footer_ (в нормальном Wordpress не найдётся) (или кусочки HTML, который выводит у вас СПАМ-ссылки)

Эти кусочки кода могут оказаться в почти любом файле Wordpress.

Каково! Куча вариантов на выбор, как вставить вам спам! Вот где смекалка сегодня работает!

Интересно так же, что все методы позволяют вам апгрейдить Wordpress. Обновляйте его хоть каждый день, если эксплойт прописан, он останется. Умные спаммеры.

Полезные ссылки

Без информации из этих ссылок, я бы просто не справился с атакой за 2 часа.

• Пошаговая инструкция по выявлению эксплойта в базе данных (очень полезно) и вся история обнаружения и исследования атаки
• Еще одна пошаговая инструкция к исправлению ситуации
• О том как один блоггер расследовал этот хак, и "нашел" ответственных.
• More Random WordPress Blogs (and Al Gore) Owned by SEO Spammers, еще одно небольшое расследование ситуации
• Файл index_old.gif, для тех кому интересен хакерский код

У меня оказалось следующее:

1. wp-content/wp-theme/cssing/index_old.gif
2. Записи в таблице wp_options, в полях описанных выше.

P.S.: Об истоках:

I also found a signature name alxumuk...

Все дорожки ведут к славянам... На блоге Альберта Гора, кстати тоже был этот вид спама, один в один как на cssing. =).

Обновляйте wordpress почаще, и посматривайте не подцепили ли вы что-то вроде этого... Эксплойту, уверен, подвержено не так много сайтов, но лучше провериться.
Опыт, мысли, советы — приветствуются!

Интересное о мобильном интернете 28 May 2008 4:00 PM (17 years ago)

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

Всякое разное про мобильный интернет

Оказывается он уже очень популярен:

Мобильным интернетом по всему миру пользуется 25% владельцев мобильных телефонов, а это почти 825 миллионов человек

В Украине, по разным данным, любителей мобильно «прогуляться» по Сети около 5 млн, в России около 14 млн.

Почти 30% всех выходов в Сеть в 2007 году осуществлялись исключительно с мобильных телефонов

Под "выходами в сеть" имеются ввиду видимо люди, и правильнее (спасибо Андрею за поправку):

30 % тех, кто пользуется интернетом, пользуется им и с телефона

Забавный факт:

Также было установлено, что подавляющее большинство пользователей мобильного Интернета в Украине — это мужчины (91%). В то же время женщины практически его не используют — всего 9%.

Это перспективнее чем наркотики, порно и даже(!) недвижимость:

По прогнозам исследовательской компании Juniper Research, к 2012 году количество активных пользователей различных мобильных социальных сетей увеличится более чем в 40 раз — до 600 млн человек. Общий доход от этих сервисов вырастет более чем в 10 раз — до 5,7 млрд долларов.

Все больше производителей переходят на ОС Windows Mobile 6. Попытаемся сейчас спрогнозировать самые перспективные ОС, которые выберут большинство производителей. Это, конечно же Windows Mobile, Android и S60.

А значит в интернете нам стоит ждать Opera, Safari, Internet Explorer. Но iPhone сам по себе крут:

Apple's iPhone is the No. 1 mobile browser in the US and No. 2 in the UK

(броузер номер один в Америке, и на втором месте в Британии)

Как всегда в таких статистиках, всё покрыто мраком, и десятки разных чисел и систем подсчета, но общие тенденции ясны =)

Веб-разработческое

Считалось, что мобильникам, и КПК можно отдавать CSS используя media="handheld". Однако, как показало время, его почти все (кроме оперы, которой я как-то и не пользовался еще) игнорируют. В лучшем случае ваш сайт отобразят без стилей, в худшем — попытаются отобразить во всей красе на своем экранчике.

Очень полезной является в этом смысле заметка Dave Shea Mediatyping . Это всего лишь скрипт для определения устройств, с которых человек зашел на страничку. Фильтруются они на серверной части, и таким образом можно отдавать отдельный CSS для КПК примерно так:

1. <?php
2. if ($mediaVersion == "mobile") {
3. echo "Контент для мобильника, например CSS-файл";
4. }
5. ?>

Более того, можно показывать отдельные части страницы лишь для мобильных, облегчая им трафик.

Скрипт адски простой, но это и отличает наших программистов от "ихних", они умеют пиарить полезные простые вещи, а у нас... как-то по другому всё.

CSS3

Так же хорошие перспективы сулит нам CSS3. Это уже работает в Опере и Сафари 3 (а значит и в iPhone):

1. @media all and (min-width: 640px) {
2. #ya-pc{display:block}
3. }

Будет означать что этот кусочек CSS только для устройств с шириной (разрешением) экрана более 640px. А это для мобильных устройств с экраном не более 500px в ширину:

1. @media all and (max-width: 500px) {
2. #ya-mobilnik{display:block}
3. }

А вот живой пример CSS специально для iPhone:

1. <link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

Взят с сайта wordpress.org.

Спецификация, для интересующихся. Это действительно может сильно упростить стилизацию сайтов для мобильных.

Лично я

Я на своей Nokia 6120 проверяю почту, и админку блога. Иногда, в экстремальных ситуациях разыскиваю нужную информацию. И... всё.

Буду рад если вы поделитесь своим опытом разработки сайтов под мобильники! Или просто сёрфинга :)

P.S.: В конкурсе, кстати, заслуженно победила статья Сергея Гипша о Яндекс.Пробках.

5 советов верстальщику 20 May 2008 4:00 PM (17 years ago)

Принимаю всеобщее увлечение рекомендациями по вёрстке. Мои 5 советов верстальщику. Не тайные манускрипты, а всего лишь простые советы :)
Я в этом блоге только тем и занимаюсь, что пытаюсь дать полезные советы, потому слегка повторюсь.

1. Правильная замена на картинки

Заменяйте текст на картинки хорошими CSS-техниками, например, для кликабельного логотипа сайта, нужен такой html:

1. <h1><a href="#">Вау! Я логотип!<span></span></a></h1>

CSS:

1. h1 a{
2. width:250px;height:50px;
3. overflow:hidden;
4. display:block;
5. position:relative;
6. }
7. h1 a span{
8. position:absolute;
9. width:250px;height:50px;
10. top:0;
11. left:0;
12. background:transparent url(../img/kartinka.png) no-repeat 0 0;
13. }

2. Использовать табуляцию в CSS

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

Мне нравится. Как видно, иногда я пишу правила в одну строку, особенно когда подряд идут несколько правил с указанием лишь background

3. Выделенный текст

Очень простой и маленький приём. Иногда полезен. Вот такой код:

1. <h2><span>Ищу ту, особенную!</span></h2>

В дизайне дано такое:

Выделенный красным "маркером" текст

Если попробовать решать задачу "в лоб", пишем такое:

1. h2 span{background:red;padding:4px;}

получаем это:

Вторая строка "прилипает" к краю. Мелочь, а неприятно

Вариантов решения несколько, наиболее простой таков:

1. h2{border-left:4px solid red;}
2. h2 span{background:red;padding:4px 4px 4px 0;}

Результат:

Правильно выделенный текст

Я ранее решал этот вопрос повторением фонового рисунка и паддингом для H2. Подсказал genn.

4. Относитесь к вёрстке с чувством юмора

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

1. <div class="i-was-born-in-1494">

Или

1. <div class="usually-i-dont-use-such-a-long-names-for-classes-but-today-is-a-special-day">

Могут сильно повеселить программистов и любителей заглянуть в ваш код. Смешной селектор может быть и коротким, главное, остроумным.

Желательно конечно, чтобы такой класс или айди встречался в коде лишь один раз. Впрочем, возможны варианты. :) Еще можно шутить прямо в CSS.

5. Доводите вёрстку до конца

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

__END__

Адресую Виталию Харисову, Александру Шабуневичу, Вадиму Макишвили, Владимиру Агафонкину.

Все советы

• Александр RMcreative Макаров
• Павел Коноплицкий
• Владимир Mourner Агафонкин
• Виталий Харисов
• Никита Селецкий
• Александр Исаков
• Алекс Iline
• Александр Шабуневич
• Юрий Дроздов
• The Webmakers Lounge
• Engelside
• Марат Таналин
• Вадим Макеев
• Юрий Артюх
• Павел Корнилов
• kizu.ru

От идеи к действию: что мешает? 3 May 2008 4:00 PM (17 years ago)

Как прочитать Большую советскую энциклопедию и потерять девственность? Как завести щенка спаниеля с такими милыми большими глазами и высыпаться? Как выпить 10 литров Гинесса и не умереть? Как синтезировать золото из свинца? Об этом и многом другом я не буду рассказывать в этом посте.

Мой опыт преодоления пропасти между идеей и действием

Как начать делать зарядку и бегать по утрам? Как сесть и сделать стартап, который крутится в голове. Как спасти очаровательную девушку от гопников.

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

The most effective way to do it, is to do it.

Всего лишь мой личный опыт

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

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

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

Как это сделать?

После некоторых размышлений я понял, что мешает перейти от идеи-мысли к действию.

И это мой мозг.

Да, он бывает полезен. Но не в этом случае.

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

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

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

Та же идея

Совершенно та же идея фигурирует в трудах пикаперов. Там описывается методика «отключения внутреннего диалога». Все это, конечно, чтобы подойти и познакомиться с девушкой. Но важнее сама методика. Этот «внутренний разговор» с собой только мешает. Вот что писал об этом Филипп Богачев:

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

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

Нужно делегировать эту проблему. Весь процесс должен контролироваться подсознанием, а не сознанием.

Мне близко называть свое подсознание — «рациональным Я». Но у Стива, пикаперов и меня просто разные слова для одной и той же штуковины.

Даже в «Книге 5 колец», Миямото Мусаси, идеальная боевая позиция, это позиция "пустоты". Это, в частности, означает отсутствие каких бы то ни было помыслов. Некогда вести внутренний диалог, когда тебя могут зарубить.

Ссылки

• How to Get Up Right Away When Your Alarm Goes Off или Как научиться вставать по будильнику (перевод) — похожая идея для просыпания по будильнику
• Секреты уличных знакомств — интересная книжка, даже для тех, кто женат, или... девушка =) (если погуглить, можно скачать бесплатно...)

Это работает

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

P.S.: я уже месяц подтягиваюсь на турнике каждый день. И делаю утреннюю пробежку. Я делаю это не задумываясь, это как сон и еда.
А вы?

РИТ 2008, 14-15 апреля, Москва 17 Apr 2008 4:00 PM (17 years ago)

Мой отчет о конференции. Слушали людей из Facebook, Internet Exporer 8, и многих других. На конференции было около полутора тысяч человек. Много фото.

Microsoft, Петр Диденко

Вкратце все, что рассказывает и делает майкрософт сейчас можно сформулировать парой пунктов:

• S+S: дают понять, что они за продажу софта как услуги. Об этом, в частности был доклад Диденко, Хостинг 2.0
• Silverlight 2.0 и линейка Expression. На конференции проводился конкурс на лучший логотип компании Майкрософт, нарисованный в экспрешн дизайн. Я победил! =) Мое лого всех рассмешило...

Но знание этих двух трендов, дорогого стоит. Ибо они уже просматриваются и в мире повсюду. Возьмите Флекс, или нарастающую популярность SaaS в мире.

Apple vs Microsoft

Facebook, Александр Москалюк

Москалюк

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

• 5й по посещаемости сайт в мире
• Более 5000 серверов
• Более тысячи серверов под memcached
• Facebook на данный момент главные разработчики memcached
• Среди их команды создатели Firefox, Firebug, и наибольшего кол-ва патчей к MySQL
• 75 миллионов пользователей
• Основной язык, PHP.

Кроме PHP

Алексей Могилевский, Principal Development Lead в команде Internet Explorer

Может быть даже правил баги в ИЕ

На вопрос о затишье между версиями, Алекс рассказал красивую легенду. Которую, он придумал сам =)

Когда-то Интернет Экслорер конкурировал с Netscape 3. Но нетскейп перестал выпускать новые версии... И Эксплорер сам того не хотя, забрал 90% рынка себе. Опомнившись, они (IE) решили дать шанс сопернику и 6 лет не выпускали версии. Пока соперник не стал конкурентоспособен. И майкрософт не смог продолжить честную борьбу дальше.

Вообще было очень явно заметно, что пока Интернет Экслорер был чем-то абстрактным и злым, его можно было ненавидеть. Но когда у него появилось лицо Алекса, то у него было просто интересно спросить. Многие пересмотрели свое мнение о команде разработчиков ИЕ. Очень знаковый приезд, даже не так для фанатов и врагов ИЕ и Майкрософт, как для людей знающих, что такое веб-стандарты.

У Могилевского было два доклада, один про ИЕ8, второй о стандартах "изнутри". Он учавствует в CSS Working Group. И немного рассказал о том как стандарты выглядят оттуда. Например, одна из причин по которым ИЕ8 все еще не поддерживает CSS3 и CSS2.1 — они еще не стали стандартом, и они не хотят рисковать. Хотя, может это и отмазка =). Но, стало понятно, что слова об ответственности броузера имеющего самую большую аудиторию, не пустой звук, и действительно очень важны.

Вообще, многое стало ясным и понятным. Интересно, увидим ли мы когда-то девелоперов Фаерфокс? ;)

Справа: Чикуенок, Могилевский

Алекс о CSS

Кстати, Алекс дружит с Молли, и Джиной. =) После этой информации я вообще перестал его воспринимать как работника компании Microsoft. Настолько для меня "близки" эти две женщины.

Стартап-линч

Сформировали команду судей-инвесторов (ABRT фонд, R&R, Диденко и другие), по очереди выходили стартапщики, и по 3 минуты рассказывали о проекте.

Слушали такое: SaaS, нишевые видеохостинги, решение проблем бэкапа, нишевое онлайн телевидение и еще парочку. Пересказывать проекты смысла нет, но вот что нужно знать стартапщикам при 3х-минутном разговоре с инвесторами:

• Харизма, уверенность
• Команда
• Прототип
• Чью и какую проблему решает проект?
• На чем зарабатывать деньги?
• Кому продать проект?
• На что вам нужны инвесторские деньги?

Ответив на все эти вопросы, при вменяемой идее, вероятность получить инвестиции близка к 100%. Если вообще имеет смысл говорить о таких вероятностях... Идея вообще сильно вторична в пунктах, как легко заметить.

Другое

Рассказать обо всем, как всегда, нереально. Но вот что еще я бы порекомендовал:

• Доклад об индексации картинок, Алексей Лагутин — интересная технология, возможно это будущее. Можно делать поиск по фрагменту, или по подобным фото. Можно найти фотографии знакомых. Готов прототип http://photodate.ru/
• Доклад Сергея Коваленко о лингвистическом процессоре. Было забавно узнать механизмы работы, для разбора поисковых фраз.
• Доклад Алексея Байтина, об исправлении опечаток в запросах на Яндексе. Оказывается их помогаем исправлять мы, пользователи. Если после первого ввода, мы перезапишем кейворд на правильный, яндекс будет знать как оно пишется. Как оказалось, грамотных людей на вебе, больше чем неграмотных. А 15% запросов на яндексе — опечатки
• Доклад Сергея Чикуенка. Я захватил лишь краем уха. Но те кто был там, порывались уйти домой с конференции, и плакать. Очень талантливый человек. Обязательно посмотрите запись. Он, кстати, технический директор Студии Лебедева.

Всего было около 100 докладов, так что я даже посоветовать все хорошее не могу =)

Разные фото

PS3 в холле

Асхат Уразбаев, отличный рассказчик

Пуфики от рамблера

Xbox, гонки офигенные были

Слайд Алексея Капранова из блицдоклада, ЮТФ символ:

Менеджер-фокусник

Кружок вокруг IE8

Ашманов, где-то там в толпе

Было клёво =)

Такие дела. Все это безобразие показывали несколько российских каналов, в том числе РТР.

Кучу дополнительных фото и материалов можно найти на сайте РИТа.

Буду рад ответить на вопросы! =) Про ИЕ8 я услышал просто ВСЁ. =)

CSS Naked Day или что случилось с моим дизайном 7 Apr 2008 4:00 PM (17 years ago)

По старой традиции, 9 апреля, празднуем CSS Naked Day. Отключаем CSS на сайтах. Пусть все видят какие мы "внутри". ;)

Важно: 9 апреля на моём блоге были отключены CSS файлы. Сейчас они уже включены. =)

У меня вся разметка построена на иерархии заголовков. Потому выглядит не так красиво, как у фанатов списков =) Но...

Со мной празднуют

• Список всех сайтов
• Pepelsbey
• Вдохновленный тормоз
• Жилинский
• Tapazukk
• Strelban
• djfromrussia
• rAlex
• Артем Чертов
• FXposter
• Elv1s и все его проекты
• NunDesign
• Kotelnikov
• Denis.in.ua
• Mikolka
• Burnis

А у вас как? =)

CSS print framework 6 Apr 2008 4:00 PM (17 years ago)

Пафосное название для моего обычного стандартного print.css который я всюду инклюдю.

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

Разумеется, по-хорошему, каждый проект нуждается в своем печатном стиле. Но, на деле, когда вы верстаете 10 (вы монстр!) сайтов в неделю, такой вот шаблон print.css становится приятным бонусом, и знаком вашего профессионализма.

Файл состоит из нескольких условных групп правил. Сложного нет ничего. Просто экономлю мировую энтропию, чтобы кто-то не парился и украл у меня этот файл. =)

Общие стили

Шрифты и цвета. При печати лучше смотрится черный на белом, и текст с засечками:

1. body {
2. margin:.2in .55in; /*отступы от края страницы, для красоты*/
3. padding:0;
4. background:#fff;
5. color:#000;
6. font:12pt "Times New Roman", Garamond, serif;/*шрифт с засечками*/
7. }
8. form,
   #secondary,
   #sidebar,
   #nav,
   #whatever {/*прячем ненужные при печати блоки, единственная часть печатного файла которую нужно обновлять на новом проекте*/
9. display:none;
10. }

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

Текст

Самые обычные приятные отступы и размеры. h1 самый большой, h2 поменьше, h3 еще меньше. И все прижимаются к тексту (margin-bottom:0):

1. h1, h2, h3 {
2. margin:.6em 0 0 0;
3. font-family:Georgia,Serif;
4. font-weight:normal;
5. clear:both;
6. }
7. h2 {
8. font-size:240%;
9. margin:.3em 0 0 0;
10. }
11. ...
12. h3+blockquote,
    h2+blockquote,
    p+ul{ /*между заголовком и абзацем лучше иметь минимальный отступ*/
13. margin-top:.2em;
14. }

Ссылки

Псевдоселектор :after, работает только в "хороших" броузерах. В результате, в печати после текста ссылки добавляет её URL в скобочки.

URL

Вот, css-magic:

1. #content a[href]:after {
2. content: " (" attr(href) ") ";
3. font-size: 90%;
4. }
5. #content a[href^="/"]:after{/*для ссылок вроде href="/feed/"*/
6. content: " (http://cssing.org.ua/" attr(href) ") ";
7. }
8. abbr:after,
   acronym:after {/* аббревиатуры */
9. content: " ("attr(title)") ";
10. }

Результат

Этих стилей достаточно, чтобы ваша страничка начала печататься примерно так:

Версия для печати (pdf, 160Kb)

Мне, очень нравится. Все что нужно дальше, легко добавить в этот фреймворк. Но базу он задает. Обожаю маленькие фреймворки!

Читать дальше

• Мой CSS print фреймворк (осторожно! размер файла 1.3Kb)
• CSS Design: Going to Print
• CSS Styling for Print and Other Media
• Printing the Web: Solutions and Techniques
• На New York Times, кстати продают места в печатной версии (вверху справа) :)
• Печатные стили для CSSing — типичный пример моего фреймворка в работе, добавлено несколько специфических правил для блога
• Подбор материалов c семинара npj — очень всеобъемлющий материал, несмотря на возраст.
• Javascript для вынесения ссылок из текста в конец печатной версии
• Замена :after для IE (expression), нюанс — нет скобочек

Буду рад если поделитесь своими советами и печатными хаками. С радостью внесу в этот файл, чтобы он был еще более полезным!

Шанс длиною в 7 минут 1 Apr 2008 4:00 PM (17 years ago)

нигде не увидев информации о событии, решил известить всех о нем сам.

Итак, в Киеве 17 апреля состоится конференция TMT Ventures’08 на которой пройдет конкурс "7minut".

Идея такая: выступают предприниматели, которым нужны инвестиции. Каждому дается 7 минут на выступление. За эти 7 минут человек должен убедить инвесторов в успешности проекта.

Нужно успеть преподнести идею, показать харизму, и убедить их, что деньги нужно отдать именно тебе.

При всем том, что мне лично ситуация кажется слегка перекошенной в пользу инвесторов... Похоже именно такие сегодня правила рынка, нужно засветиться и "выиграть" деньги инвесторов. И это прекрасная возможность.

Принимаются заявки от стартапов на темы:

• Интернет и мобильные сервисы
• Мультимедиа инновации
• Web 2.0
• Интеграция офлайн и онлайн
• Инновации в электронных системах оказания услуг

И прочие современные айти-предприятия.

Всем у кого есть супер-идея, но нет денег на нее, настоятельно советую отсабмитить ее жюри! На сайте есть форма, специально для предпринимателей.

Среди тех кто будет судить, Юрий Бойко, Александр Орехов, представители сразу нескольких инвестиционных фондов.

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

Список жюри:

• Председатель жюри: Yuri Boyko HighTech Entrepreneur, Silicon Valley
• Paul Fisher Associate, Advent Venture Partners
• Andrzej Jasieniecki Investment Director, MCI Management
• Georgy Kolpachev Investment Manager in Russia, Intel Capital
• Nikolay Mitushin Investment Director, ABRT Venture Fund
• Oleksandr Oriekhov DPE Lead, Microsoft Ukraine
• Igor Semenov Investment Manager, AVentures Capital
• Maxim Shkolnick Chairman&CEO, Techobridge
• Andres Sussi Martinson Trigon Venture Partners

Главным призом будет гарантированное выступление на осеннем Seedcamp '08. А это наверняка инвестиции и известность.

Всем участникам UA WEB 2008 предоставляется скидка на вход! ;)

• Страничка конкурса, сайи очень мутный, надо заметить. Но это квест.
• Сайт конференции
• Регистрация участников

Когда же у нас уже появится куча стартапов и инвесторов :) Заждались.

Что думаете про такие конкурсы? Почему так мало стартапперов в стране?

UA WEB 2008 состоялся! 29 Mar 2008 4:00 PM (17 years ago)

UA WEB 2008 состоялся! =) Всякое забавное и результаты.

Сопутствующее

Во-первых, нас рекламировали по радио! Зацените:

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

Была и такая реклама:

Такие дела, киска

Специально для конференции напечатали UAWEB'ные материалы:

Блокноты, ручки, пакеты

Конференция

Как и планировалось, все прошло в конференц залах лучшей гостиницы Украины 2007 года — Президент Отеле. Несколько фото:

Пустой конференц-зал

Я и Олег слушаем Диденко

Тусовка на кофе-брейке

Шитов, прилетевший в Киев на пару часов, на UA WEB. Спасибо Андрей!

Больше фото можно найти в отчетах...

Присутствовало более 300 человек, среди них представители практически всех значимых украинских веб-компаний. Докладывались сотрудники ukr.net, yandex, rambler, sun, microsoft и т.п. и т. д. Вопреки бытующему мнению доклады Майкрософт и Битрикс были не спонсорскими. Как это ни странно звучит ) я действительно хотел чтобы про SaaS и Silverlight рассказывали те, кто имеет к этим словам прямое отношение.

Конференцию открыл я (akella), затем пару слов о российских инициативах сказал Олег Бунин. Некую философию о развитии интернет-технологий и конференций привнес Петр Диденко, не нуждающийся в представлении. О его приезде на UA WEB, никто до последнего момента не знал, кстати =).

Кроме Диденко присутствовало так же очень много других знаменитостей:

Бэн пришел с Джимми

Отчеты о конференции

• Видео-отчет!
• Первый и второй день на интернетных штучках
• Первый день на developers.org.ua и второй день
• Первый день на developer.co.ua и второй день
• Первый день на w2.com.ua и второй день
• На webdeveloping
• На Agile Ukraine
• О докладе Юрия Шиляева
• Отчет Сергеева Сергея
• Фотки на nundesign
• Резюме лучших докладов
• Резюме лучших от Егора Егорова
• Фотки с тагом ЮА ВЕБ
• Сайт конференции

Лично мне больше всего понравились рассказы Юрия Козлова из CEQA, Егора Егорова про высокие нагрузки из Telme, Алексея Колупаева про капчи, Пола Гокина из CEQA. Пол показал скринкапчу действий пользователя-тестировщика юзабилити сайта. 5 минут мы смотрели как бедный юзер безуспешно пытался найти ближайший ресторан со скидкой на сайте. Это было весело!

ЗЫ: Копирайты на фото принадлежат Сергею Волошину, Вадиму Макееву и Петру Диденко.

Спасибо Олегу Бунину, Павлу Рогожину, Евгению Бойко, Вике Галимуллиной и Дмитрию Лоханскому за помощь в организации конференции!

Файналли

Ур-ра! Первая конференция состоялась :) Буду рад услышать впечатления-мнения.

И, кстати, кого и о чем вы бы хотели послушать на следующей конференции?

Проблема со списками в IE 7 Mar 2008 3:00 PM (17 years ago)

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

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

1. <ul>
2. <li><a href="#"></a></li>
3. </ul>

css:

1. li a{
2. display:block;
3. }

И вуаля, вот что имеем в ИЕ6, например:

Отступы между элементами списка в IE

Примеры решений

Чтобы разобраться с этой проблемой раз и навсегда, я перебрал все возможные рабочие варианты, из них отобрал 7 наиболее удачных на мой взгляд. Ими и хочу пользоваться в будущем. Решения обычно сводятся к haslayout для LI, A. Или свойству vertical-align, или удалению пробелов, или изменению line-height.

Из этих вариантов у меня в ИЕ6 рабочими оказались такие: в первой колонке 3, 4, 5, 7, 8. Во второй: все кроме нулевого.

Колонки отличаются только размером line-height. Для первой это 1, для второй 1.4.
Значения 1.13-1.14 — являются граничными.

Резюме, или как с этим воевать

После кучи экспериментов пришел к тому же выводу, что и Bruno Fassino, глюки с непонятными отступами условно можно разделить на 3 категории:

отступы	чем вызвано	чем лечить
Большие отступы	a{display:block}	удалить пробелы в коде или haslayout для a (этот баг исправлен в IE7)
Маленькие отступы	li{haslayout}	li{vertical-align:top}
Маленькие отступы (второй вид)	маленький line-height + haslayout для li или а	увеличить line-height

Наконец-то я задокументировал самое тёмное для меня место в багах ИЕ =)

IE8 (не повторять на живых проектах!)

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

/*/ #nav a {position:relative;} /**/ 

Фиксит проблему с отступами между элементами списка в ИЕ8. Исправить на стороне броузера, наверное, было очень трудно. Будем надеяться, что баг с отступами в списках исправят одновременно с этим хаком. Я лично отсабмитил эту проблему разработчикам.

Ссылки

• Примеры списков с разными решениями для ИЕ (смотреть имеет смысл только в ИЕ)
• Примеры бага с блочными ссылками в списках, и очень хорошо задокументированный эксперимент. Фактически вдохновивший меня на его повторение.

Если у вас есть чем дополнить, буду рад выслушать и проапдейтить пост!

P.S.: под haslayout я имею ввиду width, height, zoom, position. Любой из этих параметров является триггером этого свойства для блока.

UA WEB 2008! 3 Mar 2008 3:00 PM (17 years ago)

Первая конференция украинских веб-разработчиков возвращается!

Осенний UA WEB 2007 возвращается весенним UA WEB 2008! =)
Для тех, кто не помнит, это конференция посвященная веб-разработке. Мы рассчитываем собрать наконец всех профессионалов в этой сфере вместе и познакомить. В программе конференции такие темы как серверное программирование, клиентское программирование, базы данных, инвестиции, аутсорсинг, фриланс, методики разработки и всё, всё, всё.

Конференция состоится 27-28 марта в Президент Отеле в центре Киева. Заявки на участие будут приниматься даже на самой конференции, если места вдруг не кончатся. А их не так и много, кстати. ;)

Доклады

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

Секция клиент

Докладчик (компания)	Название доклада
Владимир Агафонкин (Sonopia)	JavaScript и доступность web-приложений
Виталий Харисов (Яндекс)	Вёрстка независимыми блоками
Юрий Артюх	Микроформаты: здесь и сейчас
Вадим Макишвили (Яндекс)	Профессиональный верстальщик. Кто он?
Вадим Макеев (Яндекс)	С ножом против паровоза. Нарезка и оптимизация графики для вёрстки
Геннадий Осипенко (laboratory8)	Дизайн Онлайн Медиа
Сергей Байдачный (Microsoft)	SilverLight 2.0: первое знакомство
Алексей Затворницкий + Сергей Ковалев	RIA в перспективе Flex
Евгений Тютюнник	Adobe AIR. Десктоп приложения, для веб-разработчиков
Надежда Строганкова (Яндекс)	Комфортная разработка сайтов на XSL
Валентин Шибанов	Применение GWT для построения Web 2.0
Юля Климентовская (Sonopia)	Latest Guidelines for Web Usability

Секция серверного программирования и баз данных

Докладчик (компания)	Название доклада
Алексей Колупаев (lohika)	Теория и практика CAPTCHA-защиты интерфейсов
Александр Костюченко (ukr.net)	Запрос - ответ ? Это не наш метод!
Илья Хамушкин	Веб-разработка на django
Андрей Шитов	Многоязычные сайты
Егор Анчишкин (viewdle.com)	Video indexing, startup building experience, trends of web 2.0.
Дмитрий Маркелов (bigmir)net)	Рейтинг Bigmir.net, архитектура, перспективы
Алексей Клюкин	Репликация данных в PostgreSQL
Игорь Сысоев (rambler)	Вы можете задать свои вопросы разработчику nginx!
Дмитрий Сподарец	TYPO3 Web Content Management Framework

Доклады на другие темы

Докладчик (компания)	Название доклада
Юрий Бойко	Привлечение капитала в Start-Up
Егор Егоров (Telme)	Сrash course into high availabilty development
Владислав Флакс (owox)	Бизнес процессы в веб-разработке
Сергей Панарин	Управление проектами: требования, планирование, контроль
Станислав Малкин + Александр Махомет (artlab)	Как стать успешным фрилансером
Владимир Михалко (community8)	Особенности трансляции СМИ в интернете
Марина Дидковская	Тестирование и оценка времени
Денис Довгополый (svod.org)	Новые требования к интернет проектам в свете изменений на мировых финансовых рынках
Tim Boudreau (en) (Sun)	Application Development with NetBeans
Никита Семенов	Социальные сети, перспективы развития и способы монетизации
Алексей Кривицкий (agile-ukraine)	Подходы гибкого управления требованиями в бизнес-ориентированных проектах. (часовой семинар от тренера)
Алексей Сидоренко	SaaS, аренда приложений
Олег Серегин, Марина Власенко	Технологии будущего: Инновации в области самообучения и самомотивации. Новый формат IT - тренингов и корпоративов
Максим Ищенко	Зарплаты ИТ-специалистов: анализ developers.org.ua
Валерий Павлович Юриков	Использование скрытых психофизических возможностей веб-разработчиков для успешного создания и внедрения современных Интернет-проектов

Компания подобралась что надо: Яндекс, ukr.net, Rambler, Bigmir, Microsoft, Sun... OMG. И это не говоря о других талантливейших людях. Весь список докладов UA WEB 2008 — по этому адресу его еще немножко дополнят, и скоро появится точное расписание. Всего будет не более 40 докладов.

В целом, еще не поздно вскочить в поезд докладчиков со своим докладом, для этого нужно просто написать мне письмо на akella.a(?)gmail.com, если он действительно интересен, он появится в программе.
По всем вопросам можно обращаться ко мне, либо одному из организаторов

До 8 марта включительно у нас скидка.
Приглашаю всех посетить нашу супер-пупер-конференцию!

Могу ответить на любые вопросы, комментарии, пожелания. =)

• Официальный сайт конференции UA WEB 2008

ЗЫ: на конференции будем кормить!

ЗЫЫ: чтобы раз и навсегда закрыть популярный вопрос с "рубкой бабла": я на этой конференции заработаю меньше, чем ваша месячная зарплата. Это для меня идейное мероприятие, а не бизнес.

Миямото Мусаси и вёрстка 28 Feb 2008 3:00 PM (17 years ago)

ассорти из советов для фрилансеров-верстальщиков от одного из лучших воинов этой планеты.

Книга Пяти Колец

Книга написана в 17 веке, одним известным японским мастером, Миямото Мусаси. Я пытаюсь проводить параллели с современным миром.

Cостояние духа

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

Не позволяйте багам возникшим в верстке завладеть вами. Все равно, по опыту, они всегда решаются только когда успокаиваешься и перестаешь орать "Ну какого !@# IE!?".

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

Еще очень хорошо создать внутри состояние спокойствия, когда вы знаете, что сейчас вам начнут звонить, писать и всячески вас пытаться раздражать. Лучше в этот момент стать спокойным и обычным.

Стать противником

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

Когда вам кажется, что клиент вас убьет своими доделками, просто поставьте себя на его место. Он уже на исходе сил в написании 35го пункта(у меня это было!) в поправках к вёрстке =)

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

Люди с хорошим воображением, могут представить как тяжело на самом деле Интернет Эксплореру. Нет, он не черный непробиваемый ящик, который удивляет вас своими фокусами. Он просто загнанный нашими хаками в угол мышонок, который дрожит и своими неловкими испуганными движениями может порой удивить вас. Ну разве можно ругаться или злиться на маленького беспомощного мышонка?!

Много противников

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

А это о работе на несколько заказчиков. Или просто над несколькими проектами в одной компании. Часто замечал, что первым делом отвечаю и занимаюсь приятными проектами. Вместо того чтобы делать то, что "нужно на самом деле". То есть, отвечать тем "противникам", которые первые атакуют.

"Ожидание пагубно", а это вообще "Do It Now", прямым текстом.

Школы, использующие сверхдлинный меч

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

Под сверхдлинными мечами, очевидно, имеются ввиду супер-крутые редакторы. Dreamweaver, и прочие IDE. Часто люди охотятся за ними, пытаются узнать кто каким пользуется, обновляют их постоянно, надеясь таким образом удлинить свой меч. А некоторые, в свою очередь, агитируют за свои редакторы, софт. Мол, скачайте это, и вы начнете быстрее работать! Для меня редактор и меч очень четко ассоциируются, и я верен Мусаси. Главное "рубить врага любыми способами".

Тот же самый принцип в полной мере относится к языкам программирования, известные споры "PHP vs Perl", "Ruby vs PHP" etc. Главное рубить, ребята...

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

__END__

Книгу эту я считаю просто сокровищем. Кроме того, как я недавно узнал, в Японии она считается настольной для маркетологов. А ниппонцы знают, где настоящие знания. Конечно, стиль изложения не всем придётся по вкусу, но кому понравится, думаю оценят по достоинству. Только представьте, сколько в ней еще мудрых и ценных советов для современных "воинов".

• Миямото Мусаси. Книга Пяти Колец

Мастерство не имеет границ. Как прекрасно, что я могу в 21 веке поучиться у знаменитого воина 17 века.
Как сказал Мусаси:

Когда обретаешь Путь Стратегии, нет ничего, чего ты не смог бы понять. Ты будешь видеть Путь во всем.

А как часто Вы видите Путь? =)

5 инструментов 26 Feb 2008 3:00 PM (17 years ago)

5 штук на моём компьютере без которых не мыслимо его использование. Получил эстафету от Сагалаева.

5 инструментов без которых я не могу работать продуктивно

1. Mac

Не смогу я больше делать стрессовые задачи на других системах. Красивый "альт+таб" — Expose, сглаживание шрифтов и скорость покорили меня навсегда. А еще, вот эта реализация radio button в интерфейсе:

ну не прелесть?

Я влюблен.

2. Safari

Пока я не пользовался Сафари, я думал, что никакие силы не заставят меня съехать с Firefox. Ведь там так много плагинов, столько постоянных обновлений. И если, что-то и появляется под броузеры новенькое, то обязательно под Firefox. Тем не менее. Мда. =)

Почему никто не догадался делать автокомплит как у Сафари (он выкатывает первый вариант не внизу, а прямо в поле)? На одно нажатие клавиатуры меньше.

Safari

Firefox

3. Textmate (было Notepad++)

Уже писал об этом редакторе. Фантастическая расширяемость, ненагруженный интерфейс, приятная по дефолту подсветка. Да что там говорить, в нем просто приятно кодить!

Более того, все черновики и todo-шки я веду в нем. Одним словом если текст, то Textmate.

4. CSS

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

Иногда я его использую для TODO:

.todo{
	носки: постирать;
	кофе: купить;
	цветы: девушке;
	цветы: второй-девушке !important;
	etc..
	}

Долго думал над 5м инструментом, сюда подходят и Gmail, и Photoshop, и мой ftp клиент Cyberduck, и RSS читалка Vienna. Но все это слишком обычно, и так понятно. Потому мой 5й инструмент без которого я не могу жить:

5. iTunes

До мака, я просто обожал STP (не обращайте внимания на дизайн сайта, просто поверьте, это действительно один из лучших плееров ever под винду)

Но, при всей своей неминималистичности, iTunes покорил меня своими возможностями быстрого составления нужных плейлистов. Любой поиск по музыкальной коллекции автоматически превращается в playlist. Кол-во параметров и удобство упорядочивания по ним поражают. Я уж не говорю о всяких стандартных системах рейтингов, куче пре-обозначенных плейлистов вроде: "Последние добавленные", "Лучший рейтинг", "Самые часто играемые". Мелочи, но очень радуют, без музыки работать хоть и быстрее, но как-то вот... не то =)

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

__END__

А вот так выглядит мой десктоп прямо сейчас:

Рабочий стол

Так как я против цепочек вроде "я ставлю ссылку на тебя, напиши об этом", то никого перечислять не буду. Но с радостью поставлю ссылку на того, кто напишет свои 5 инструментов. И скажет об этом в комментах. Буду рад услышать ваши 5 инструментов в комментариях! По ним можно многое сказать о человеке...

Perl мова, 23 февраля, Киев 24 Feb 2008 3:00 PM (17 years ago)

Почти случайно оказался на интереснейшем мероприятии организованном московской и киевской перловыми группами. И в частности Андреем Шитовым.

Перл там

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

Аудитория

Средний возраст программиста на Perl довольно высокий. Начал воркшоп Андрей Шитов. Рассказывал обо всех изменениях, что он наблюдал в Киеве за последние два года, показал тучу классных фоток Киева, когда он только успел столько нащелкать! Вообщем, рассмешил всех =) Затем рассказал о сходствах и различиях в Perl 6 и Perl 5.10. А так же, показал замечательную презентацию на немецком, было очень забавно читать всякие "Von URL"

Рампочта

Затем выступал Алексей Капранов, один из разработчиков почты рамблера. Как оказалось, она тоже написана на перле. Некоторые факты:

• 100 серверов
• 50 тысяч строк кода на перл
• 598 ревизий главного файла с которым взаимодействуют юзеры
• 10млн принятых писем в день, полтора миллиона отосланных. Как сказал Алексей, это обусловлено всякими форумами и одноклассниками, которые шлют уведомления про каждый пук на сайте
• 2 сисадмина и пара программистов на Перле.
• 10-15% украинских пользователей
• 25 миллионов пользователей, из них 15 миллионов активных
• 3я почта в рунете

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

Алексей Капранов

Потом минут 20 его пытали о технических подробностях. Надо сказать, он отвечал ничего особо не скрывая. Что весьма показательно в сравнении с некоторыми украинскими специалистами, которые еще боятся делиться знаниями =)

Как продать Перл, доклад от portaone

Как продать ручку? Можно просто пытаться продать отличную золотую суперручку абстрактному клиенту. А можно попытаться узнать чего он хочет, и дать ему именно это. Из технических преимуществ, Андрей Жиленко упомянул такие:

• CPAN
• Понятность кода и известность языка, относительно некоторых других
• Скорость разработки

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

Укроп

Блиц доклад, Дмитрий Карасик (из Копенгагена) рассказывал об украинском языке программирования. Без лишних слов, вот кусочки кода:

Дмитрий Карасик об УКРОП

Или вот подлиннее:

дiйство початок(аргументи)
	нехай у;
	доки (у = 0; y < аргументи.длина; у++) то
		якщо ( аргументи[у].строка == '--')
			геть;
		читай( аргументи[у]);
	отож
отож

Код вполне рабочий, мы даже из командной строки запустили одну из таких вот программок. Автор предлагает развить конструкции "отож", до "отожбо" и "отожбойвоно". =) Оригинальное эссе об УКРОПе, где чуть более подробная инфа и предыстория.

Форекс

Сергей Гулько, один из разработчиков системы для Forex оговорился, что им запретили рассказывать что-либо важное. В результате рассказывал о memchached и spread. Такие штуки будут интересны только тем, кто работает с большими нагрузками, но если это так, вы просто обязаны знать эти два слова. В остальном было любопытно узнать что на форексе пользователи вообще не взаимодействуют с базой данных, только с кэшом. Memchached — для разгрузки базы данных, spread — для быстрого обмена сообщениями между серверами и не только.

Разговор плавно сполз в подробности использования spread и memcached в ПО Forex. Г-н Сережкин из Яндекс старательно выпытывал у Сергея всякие мелочи, прикрываясь "сбором статистики". Так я ему и поверил, хаха!

Jonathan Worthington

Примечательно, что на воркшоп приехали люди из Дании, Англии и Испании. В частности, Джонатан, уроженец Британии живущий в Испании, один из разработчиков компилятора для Перл 6.

Вот как надо про- граммить

Еще один британец рассказывал об интеграции перлового фреймворка Catalyst и джаваскриптовой библиотеки ExtJS.

Конференцию завершили докладом для начинающих программистов, "Perl 6 Tutorial". Андрей Шитов и Джонатан по очереди рассказывали о циклах, ООП, новых бинарных операторах и всем-всем-всем из Перл 6. Вышло очень динамично и интересно. В некоторые моменты запускался компилятор и начинался отлов ошибок в коде =). Особенно запомнился некто, несколько раз задавший вопрос: "Это ошибка исполнения или компиляции?". На который никто не мог никак ответить, без самого компилятора.

Worthi- ngton & Shitov

Андрей Шитов

Jonathan Worth- ington

В конце

Вообще, на такие мероприятия опасно ходить, можно начать забывать про HTML и писать на Perl...

• Український воркшоп «Перл мова» — 2008 - официальный сайт
• Другие воркшопы по перлу
• Видео с мероприятия (и я засветился, с незнакомым мне голосом)

За все фото огромное спасибо Андрею Шитову! =) Другие организаторы тоже постарались на славу! Все вышло без сучка и без задоринки.

Радует тенденция, в Украине и России все больше и больше таких вот качественных воркшопов-тусовок.

Новый вид спама — купленный мозг 16 Feb 2008 3:00 PM (17 years ago)

на блоге столкнулся с новым видом спама, раздумываю как победить

Виды спама

До последнего времени, весь спам был автоматический, и миникапча 2+2 обрубила его напрочь. Я считал что борьба со спамом окончена навсегда. Оказывается, нет.

Новый вид спама

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

не ну епт. вот это встреча. прикольные фотки

сиськи очень понравились :D

К посту про тайм-менеджмент:

да советы в принципе не хилые. полезные. спс. надо тоже себе time manadgment завести

Замечательно!

Очень дельные советы! Обязательно воспользуюсь ими!

Понравилось!

Cпасибо, Замечательно!

Я даже где-то встречал форум, где платили по 1WMZ за 10 или 20 комментариев на блогах.

Данные из первых рук

Работа заключаеться в следующем:

Топаем сюда
http://blogs.yandex.ru/top/standalone/

выбираем любой блог (не обязательно с первой страницы), открываем его. Быстренько пробегаемся глазами по какой ни будь записи там (не обязательно верхней), и пишем осмысленный отзыв или коментарий к записи. При этом можно там будет указать имя, почту, сайт. Имя и почту указывайте своё, а вот сайт мой (ниже напишу какой). Важно писать нормальный комент, а не тупо "Хорошая статья, афтар пишЫ есчё" иначе комент не пропустит админ.

Обрабатываем таким образом как можно больше блогов (не менее 10ти) и выкладываем сюда ссылки на те записи к которым есть комент с нашей ссылкой + z-кошёль

За каждые 13 таких коментов я плачу по 2 wmz.

Почему это бесит

Бесит это меня по нескольким причинам. Во-первых антиспам придумать теперь будет очень трудно. Единственный выход что я вижу, проверять комментарии на длину, но опять же, почему нормальный человек не может написать короткий комментарий? Может...

Вдобавок, все это в целом привносит кучу шума (Signal vs Noise) в информационное поле, при поиске релевантной информации приходится просто пропускать, а порой вчитываться в бессмысленный текст.

А вторая причина, что это же просто продажа своего мозга. Люди на самом деле часто его продают, но тут связь уж совсем какая-то прямая. Тебе платят деньги, за то что ты становишься "читателем блога", ты его читаешь и комментируешь в тему за деньги. Людей жалко =(. Неужели труд человека теперь стоит дешевле ботов?! Это как-то странно и грустно одновременно.
Хотя, я конечно понимаю, что боты видимо неэффективны стали.

Для меня это выглядит, как если бы людям платили за рассылку спамных писем деньги. По-большому счету это ничем не лучше обычного банального спама виагры и удлинителей. :( Мне вовсе не жалко подарить кому-то немного поискового веса, но когда это откровенный шум, так не хочется отдавать его в чей то мозг. Я ведь только ради этого не использую никакой рекламы на блоге.

Представляете, как вы за 1 бакс, рассылаете всем знакомым осмысленные письма, то есть спрашиваете о делах, отвечаете на вопросы. Но с рекламой виагры.

Ссылки по теме

Единственный выход что я вижу, парсить комментарий на предмет слов "замечательно, классно, очень, понравилось" и оставлять их все на модерацию если длина не более 2х строк. Может быть у кого-то есть другие идеи?

• Эффективная система борьбы со спамом очень интересная статья, очень похожие проблемы, возможно кому-то поможет побороть и другой спам
• Всеобъемлющая статья о спаме в комментариях

Было бы очень интересно послушать ваш опыт борьбы со спамом.

Barcamp, 8-10 февраля, Рига 12 Feb 2008 3:00 PM (17 years ago)

отчет о неконференции блоггеров в Латвии

22483

Всем участникам присвоили номера, они правда потом так и не пригодились. Но! Мой номер 22483 мне помог побороть бессонницу =), ночью в автобусе я решил разложить на множители 22483. Особую пикантность затее добавил тот факт, что число 22483 оказалось простым(не делится ни на что, кроме себя самого). Вышло очень увлекательно. Теперь вы знаете с каким психом имеете дело. =)

Вообще

Конференция прошла в шикарнейшем Reval Hotel в центре Риги:

Reval

Кто только там не был, USA, Англия, Франция, Германия, вся прибалтика, Россия, Украина, Беларусь, Азербайджан, Казахстан, Таджикистан и много других. География самая широчайшая

Человек 300 было

Вот так люди записывали свой доклад в расписание:

Йоха пишет!

А вот финальное расписание первого дня(кликабельно):

Расписание Barcamp

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

Geeky

Тематические блоги

Отлично выступил украинский кофеман и журналист Слава Баранский. Рассказывал о тематических блогах. О том, что блогосфера в опасности от блогов о заработке денег, которые не привносят в этот мир ничего. Параллельно пропиарил меня и блог о литературе. А многих вдохновил на начало тематических блогов. Вобщем и целом, рассказал как это круто иметь тематический блог, как на нем заработать не банальным способом, и как вообще его начать вести. За прямой и честный доклад о блогах, респект.

Баранский о блогах

Pupi.lv

Один из лучших докладов был в формате Печа Кучи, и посвящен сиськам. Артурс Меднис рассказал о всех реализованных фичах на своём проекте. Проиллюстрировал возможности Wordpress, поведал короткую предысторию проекта, его достижения, и оригинальные находки использовавшиеся в ходе разработки. Артурс просто великолепен.

Артурс про pupi.lv

Инкубатор проектов

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

Osogato — это десктопный софт подбирающий "музыку похожую на". Выглядит это так: выбираем несколько любимых песен, и несколько плохих, а программа анализирует всю вашу библиотеку музыки, и подбирает песни, которые вам понравятся. Как сказала главная разработчица, анализируется сам звук песни, а не метаинформация из гугла или last.fm. То есть алгоритм ищет песни с нравящимся вам "звучанием". Уже придумали 42 алгоритма для этого подбора, и до сих пор не остановились! Пока есть версия только для Mac Os (интегрирована c iTunes), но все это планируется портировать на винду и вывести в итоге в онлайн.
Проникся глубоким уважением, анализ музыки по звуку... это очень сильно.

Так же очень интересным оказался проект одного москвича. Они разрабатывают сложную систему для анализа любых коммьюнити. Представляете, есть у вас социальная сеть, 1000 человек из сферы веб-разработки. И тут вы приходите к ним, и с помощью этой системы находите людей идеально подходящих на роль руководителя проекта, главного программиста, и любую другую позицию. Все строится на анализе личных характеристик каждого члена сообщества.
Потрясающая иде, позволяющая современным кадровым агентствам эффективно использовать социальные сети. Система даже "тестировалась" на одном из курсов МГИМО, и получила высокую оценку от преподавательского состава, так что все очень серьезно.

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

Еще

• Фотографии с мероприятия
• Презентации с баркэмпа
• Первый и второй день на internetno
• Сайт БарКэмпа

Вышло клёво, спасибо Йохе, Максу, Артурсу, Диане и всем всем всем. :)

На афтепати

За фотки спасибо Oliver Berger, Nuakin.

Успеть всё или управление временем 26 Jan 2008 3:00 PM (17 years ago)

отличные советы по эффективному управлению временем от Кейт Робинсон

Перевод

Пост, фактически переработанный перевод заметки Keith Robinson "How i GTD". Его советы мне показались настолько полезными и по делу, что решил опубликовать на русском тут. Надеюсь кому-то это принесет пользу. Все что дальше будет от первого лица, это Кейт, не я =)

Записывайте всё!

Правило номер один: записывать всё! Я никогда не пытаюсь что-либо запомнить. Просто записываю все, что хотел бы помнить. Для этого у меня есть несколько записных книжек, а когда я добираюсь до компьютера то переписываю всё туда. Я делаю массу записей, составляю кучи списков, и пытаюсь записать все в тот же момент как это приходит мне в голову.

Всё это делается для того, чтобы очистить голову от мыслей, и сложить их в место, откуда я смогу их легко достать, если захочу. Это освобождает голову для других забот.

Делайте на месте

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

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

Концентрируйтесь, избегайте многозадачности

Перед большими задачами я убираю все другие, так что могу сфокусироваться на одной. Например, пока я пишу эти строки, я выключил все приложения. Я не проверяю почту, мессенжеры, телефон и прочее. Для задач в которых мне действительно нужна концентрация — дизайн, например — я буквально отключаю всё, что может отвлечь меня от процесса. Для этого я обычно выделяю блоки времени с запасом по 2-4 часа, в зависимости от задач. Это, вдобавок, помогает не потеряться в "потоке" выполнения задачи.

Такие правила не только увеличивают производительность. Качество работ сильно возрастает, когда можешь полностью на них сосредоточиться.

E-mail и пустой ящик каждый день.

“Inbox Zero” очень модная сейчас методика, и тому есть хорошие причины. Годами я стремился к пустому почтовому ящику в конце дня, и теперь понимаю, что это действительно помогает лучше сосредоточиться. Для моей почты у меня есть несколько правил:

• Не проверять почту постоянно. Дать письмам немного скопиться. Но только немного. :)
• Отвечать сразу на все, что отнимает меньше 5 минут. Я никогда не жду, чтобы ответить, только если нужен действительно сложный ответ, или какое-то действие.
• Архивировать все, на что я не могу ответить. У меня есть три места куда я все скидываю; первое, большой и хорошо организованный архив, второе, "waiting”-папка, для дел, где требуется дополнительная информация, и третья, "action"-папка, для задач, к которым нужно вернуться чуть позже и сделать их. Я просматриваю эти папки несколько раз в неделю.
• Удалять все, что не понадобится позже. Я часто использую кнопку Del.

Стремиться к порядку

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

Резюме

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

В конце от меня

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

Одно правило верно для всех GTD методик, если хотите что-то успеть, начните делать это прямо сейчас.

• оригинальная статья How I GTD
• Сделай это сейчас от Стива Павлины, можно использовать как допинг, когда почувствуете что время утекает сквозь пальцы
• Про "inbox Zero" и другие приёмы с почтой

Буду счастлив, если поделитесь своими приемами управления временем!

Envision, 14-15 января, Прага 20 Jan 2008 3:00 PM (17 years ago)

Конференция из-за которой меня занесло в Прагу. Что там было, и как это может повлиять на нашу жизнь.

Envision

Конференцию проводили в одном из самых пафосных мест Праги — Cafe Louvre. Там засиживались Кафка, Эйнштейн и братья Чапек. По слухам, там же частенько снимают всякие фильмы.

Вход в Louvre

Большая часть времени была посвящена обсуждениям, было лишь пару докладов. Потому довольно трудно пересказывать, что там было. Успели поговорить о всех темах которые только могли волновать дизайнеров. Я даже застал Crazydim'у и Genn'a обсуждающими с немецким профессором дизайна, то, как лучше располагать объекты для их сравнения. Они это на салфетках показывали...

Народу было человек 20-30. Посмотрите сами на весь зал:

Зал, где прошел Envision

Matt Bagwell (London 2012) из Conchango

Тенденции дизайна

О трендах в современном веб-дизайне рассказывал немецкий профессор дизайна, и по совместительству креативный директор Wolfgang Henseler (Syzygy). Основные мысли выглядят так:

• Представьте книгу. А теперь представьте что её экранизация выглядит как видеозапись переворачивания страниц этой книги. Затем, профессор, конечно, показал трэйлер Гарри Поттера, который все смотрели с раскрытыми ртами. Такую метафору использовал Вольфганг чтобы показать, как плохо мы пока используем потенциал веба. В ближайшем будущем профессор предрек переход именно к нормальному использованию. Более интерактивному.
• Уход от иерархии в сайтах (sitemap и прочее). В базе данных они могут быть и иерархическими, но для человека это должно быть представлено в другом виде, более подходящем для информации.
• От страниц к интерфейсам, тут все понятно, отдельных страниц будет меньше, но, станет больше веб-интерфейсов
• Click → Zoom; переход от кликов в интерфейсах, к более мягкому, увеличению. Эту идею кстати хорошо иллюстрирует продукт Microsoft Max, а также некоторые Mac OS приложения.
• Переход от GUI к NUI (graphical user interface — natural user interface) Это означает, что в вебе будет все больше родных нам в реальности поведений обьектов. Например We Feel Fine, Amaznode books search (тут проиллюстрированы связи путем деревьев, они же естественны нам), Amaztype, а так же Oskope (сейчас лежит, надеюсь подымут)

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

Справа Wolfgang Henseler

О дизайне

Следующим докладывал August De Los Reyes, полненький парень на предыдущей фотке. Но пусть вас его улыбчивый вид не вводит в заблуждение =). Он учится в Гарварде на факультете дизайна, и в MIT на программиста. И хотя вузы американские, зато их 2! Кроме того он работает в Microsoft дизайнером, и участвует в разработке Microsoft Surface. У него была пожалуй самая динамичная презентация, много рассказывал о диалектике в дизайне. О том что в дизайн и контент едины. Было много цитат психологов, историков, архитекторов. Произошло переполнение буфера, и я почти ничего не запомнил =)

Август, рассказал о тесте, когда молодые люди переходили канатный мост над пропастью. И в первом случае симпатичную флиртующую медсестру поставили в конце, а во втором в середине дороги по мосту. Она всем подмигивала, и писала свой телефон, как бы невзначай. В результате, во втором случае, ей в несколько раз больше людей позвонило =). Люди остались более довольными, и с хорошими воспоминаниями.
Затем мы долго прикладывали эту метафору к дизайну приложений...

Август о двух факторах дизайна

Он рассказал, что они, когда пьют пиво, до сих пор прикалываются с чувака, который придумал Office Mate (скрепка, котик и т. п.). Так же, похвастался, что в его отделе работают люди придумавшие колесико для мышки, и цвета для слотов микрофона, колонок и др, на вашем системнике (они там зеленые, розовые, и еще какие-то).

Слева-направо: Razorfish, Microsoft Surface, Syzygy, Microsoft Expression

Размытие границ и Microsoft Expression

Много говорили о размытии границ между разработчиками и дизайнерами. А позже, оказалось, что дизайнеры должны еще и понимать маркетинг.

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

Самое интересное

Завершилась конференция походом дизайнеров в люди. Все докладчики усадились за столы с нами, и мы с ними смогли вволю наговориться. За нашим столом, например, оказался Steve Guttman, продакт менеджер Expression. Ему адресовали вопрос об индексировании сложных Silverlight приложений (например в магазине интерфейс по выбору размеров одежды, как решить проблему с отдельными страницами для каждого размера, в случае Сильверлайт интерфейса ).

К слову, ответа на этот вопрос пока нет и для Flash. Но, Гатман вопрос понял, и кто знает, может ему приснится решение этой проблемы. Человек он опытный, работал раньше в Adobe... И хотя на вопрос он не ответил, вряд ли кто-то знает однозначный ответ в мире.

At Adobe, Steve Guttman was the first product manager for Photoshop and launched that revolutionary application in 1989, growing its revenues to over $90 MM

Так же он рассказал о выпуске Silverlight 2 в 2008 году, и новых версиях Expression Blend.

За столом, где уселись итальянские дизайнеры, и английский гуру дизайна Matt Bagwell, обсудили где и почем лучше брать софт, и кто кому какую скидку может обеспечить. Практичные люди. =)

Еще за одним столом, обсуждали размытие границ между дизайнерами, веб-разработчиками и сэйлсами.

Стол с Августом обсуждал философию дизайна, а так же выход Microsoft Surface. Компания решила следовать старой тактике, сначала эти устройства появятся в отелях и магазинах. Затем, поиграв, люди захотят их себе домой. И тут главное вовремя подсечь =)

Что это значит для нас

Все очень просто, то о чем сейчас говорят эти дизайнеры, случится у нас через год-два-три. В личной беседе, продакт менеджер пакета Microsoft Expression, признался, что на самом деле никто не ожидает, что все моментально кинутся применять новую технологию. Происходит постепенная подготовка и переход рынка к новым целям, и новым продуктам. Сами инструменты постепенно адаптируются под наши нужды. В этом году, кстати, планируется выход Silverlight 2.

Во время ланча, Genn нарисовал такого вот бандита

В конце

В конце первого дня, всех, и докладчиков и заезжих повели играть в бильярд =) Я чуть не выиграл у дизайнера логотипа London 2012. Черт. Всего один шар.... =)

Мероприятие получилось уютным, и очень интересным. Буду рад ответить на любые вопросы о темах, что были в Праге.

За часть фото спасибо Crazydima и Rey Mayson.

• Отчет Genn'a об Envision
• Сайт Envision

Я счастлив, что Microsoft оказало мне честь побывать на Envision! =)

Дизайн новостных сайтов, тренинг Геннадия Осипенко 18 Jan 2008 3:00 PM (17 years ago)

Посчастливилось первым побывать на тренинге замечательного талантливого дизайнера и просто классного парня =) Небольшой фото-отчет, и основные мысли.

Где и зачем проводилось?

Тренинг организовывала компания "Интерньюз" для белорусских журналистов. В течении дня предполагались различные тренинги посвященные организации онлайн СМИ. Я попал на завершающий, который проводил некто Осипенко Геннадий, и посвящен он был дизайну онлайн-изданий. Для тех, кто не в курсе, это креативный директор и дизайнер ответственный за дизайн таких проектов как Зеркало Недели, Интерфакс Украина, Rabota.ua, Новый канал и многих других...

Основные мысли

• Дизайн и контент едины, нельзя их разделять, избегайте этого дуализма. Это помогает делать по-настоящему качественные и гармоничные продукты. Скорее нужно говорить о визуализации информации, чем о дизайне, и его наполнении контентом.
• Идеальный новостной сайт, тот, на который человек заходит и читает новости, которые он хотел прочитать
• Нужно управлять действиями человека на сайте, не заставляя его осознавать это
• Не использовать более двух "выделенных" (ярких, с необычным фоном, с картинкой "new") блоков на странице
• Вместо привлечения внимания миганием лучше использовать движение, это меньше раздражает сетчатку. Но и движение нужно использовать с умом.
• В дизайне новостных сайтов важны приоритеты, нельзя отдавать новости как в блоге, лентой, это просто невкусно (приоритетность новостей видно, например на Korrespondent)

Вообще осталось дико приятное впечатление от людей, журналисты очень интеллигентный и внимательный народ. Хотя, разве они могли быть другими? ) Правда, их все время волновало в перерыве, что кого-то там посадили на 15 суток...

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

Цитаты

Если программист говорит, что он не может это сделать, скорее всего ему лень искать: "Я не знаю как это сделать, а пока буду искать решение, это станет уже неактуально. Пойду-ка лучше пропатчу свой Линукс или поиграю в Контру"

Моя девушка живет в Беларуси, и поверьте, это самая привлекательная в мире причина любить вашу страну

Фото

Журналисты

Было много вопросов

Идеальный новостной сайт (так же обратите внимание на два (!) макбука)

Дополнительную информацию можно почерпнуть на блоге Геннадия и в последнем отчете о тренинге:

• Отчет о тренинге в блоге у Genn'a

Тренинг получился клёвым и веселым =) Спасибо организаторам! Спасибо тренеру! Побольше бы таких мероприятий Киеву.

Прага 16 Jan 2008 3:00 PM (17 years ago)

Занесло меня в Прагу, немного фоток и впечатления.

Прага

Город просто замечательный! =) Приезжать лучше с девушкой, иначе сопьетесь в кабаках. Кол-во их огромное, и пиво везде вкуснейшее. Часто в том же здании и приготовленное. Лучшие заведения за поездку "U Fleku" и "Cafe Louvre" (говорят, там снимали Иллюзиониста).

В целом: маленький, аккуратный, романтичный и чем-то родной город (возможно, из-за кучи русских туристов и продавцов?). Но, скорее Европа чем мы.

Кто не хочет тут жить?!

С Карлова моста

Вид с моста

Кривые дома! (или руки?;-))

Ночная Прага

Где-то возле Карлова моста

Обычная улица

КПИ? Мехмат?

Набор удивлений:

• Цена за весь заказ в кафе не будет равняться сумме цен за блюда
• Тихие трамваи, такие же как у нас, но, ТИХИЕ
• Ужасни черстви потравыны — таки действительно, красивая свежая еда
• В некоторых кабаках, когда вы зайдете, вам могут не спрашивая поставить пиво
• Можно выпить 4 литра темного Козела, и почти не опьянеть, просто пиво такое
• Чешки красивые
• Украинки красивее =)

Что я там забыл зимой?

Об этом в следующем посте. Решил разделить из-за обилия фото. Ездил, кстати, не один.

Как найти баг в вёрстке 7 Jan 2008 3:00 PM (17 years ago)

Как часто вы тратите часы чтобы понять почему же эта эта вредная навигация сползла? Этот способ позволяет найти причину практически не думая за 5 минут. Наверное почти все пользовались этим методом поиска багов в вёрстке.

Зачем

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

Когда

Когда "сползла колонка", или "это гадское меню опять отображается не так как должно". Или еще тысячи глюков, которые вы наблюдаете и не можете понять, что заставляет сайт отображаться именно так. И какая строка в коде это делает.

Идея

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

Принцип очень простой, чтобы найти, например, точку на отрезке:

1. Делим отрезок пополам, определяем в какой половине содержится наша точка
2. Повторяем процедуру для полученной половины отрезка с точкой

И так, пока не получим нужную точность.

А так это выглядит в задаче про поимку льва в пустыне:

Делим забором пустыню пополам. Затем та часть, в которой остался лев, снова перегораживается посередине, и так далее — до тех пор, пока лев не окажется в тесном загоне.

Алгоритм в приложении к вёрстке мало отличается от классики. Львом будет кусочек кода делающий глюк. Пустыней — весь код.

Суперпупералгоритм

1. Удаляем половину или просто большой кусок HTML (CSS)
   • Если глюк остался виден, продолжаем процедуру для оставшегося кода
   • Если глюк исчез, возвращаем удалённый код и повторяем процедуру для него (удалив другую половину)

В результате останется только "глючный" HTML, обычно это пара блоков связанных с глюком. Тоже самое повторяем для CSS кода. Если в HTML еще нужно было соблюдать иерархию, то в CSS можно смело удалять по половине кода.

Таким образом, в конце у вас останется несколько строк CSS и только те блоки в HTML, которые составляют глюк. При таком количестве кода вам будет трудно не найти баг или опечатку.

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

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

Проделывать это все рекомендуется с копией кода. Чтобы можно было смело удалять и не беспокоиться.

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

В конце

Даже странно почему об этом способе так мало написано(может потому что это слишком просто?). Надеюсь кому-то он поможет, меня не раз выручал. Вдобавок, такие действия помогают начинающим лучше разобраться и прочувствовать как работает этот CSS. =) А при поиске глюка в чужом коде — это практически единственный путь.

Кстати, только с помощью этой методики удалось обнаружить странный баг с кодировкой CSS файлов.

Конечно же рад услышать Ваши способы решения своих проблем!

Зимняя Евпатория 6 Jan 2008 3:00 PM (17 years ago)

На пирсе не снег — замёрзшее море. Я не знаю что в этом фото особенного, но...

На утро стало повеселее правда:

Так выглядит море при -11° в 4 часа дня.

cssing 2007 25 Dec 2007 3:00 PM (17 years ago)

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

В хронологическом порядке

• Колонки “одинаковой” высоты с разделителем Красивая идея, связанная с отрицательными отступами. Один из вариантов колонок одинаковой высоты
• London, Designertopia 2007 Мой отчет о конференции в Лондоне посвященной новым завораживающим технологиям от Microsoft. Интересный доклад футуролога и фантаста
• Печатная версия с Javascript Вариант "быстрого" переключения странички в печатную версию. Похожее, как оказалось, было и на алистапарте, но ведь приятно повторять чужие гениальные идеи?
• РИТ-2007, Москва Отчет об одной из первых российских конференций собравших веб-разработчиков. Было интересно
• Еще один способ вертикального выравнивания в CSS Новый для меня способ вертикального выравнивания для IE, довольно практичный по сравнению со старыми
• HTML+CSS+HTML+CSS+ … =MAC! Моё мак-рождение! Сам пост — пустышка. А вот в комментариях много полезных советов для новоявленных мак-юзеров. Продолжение советов в следующем посте о маке, и завершающем полугодовом отчете
• Семинар Ратмира Тимашева Основные мысли и фотографии с семинара с интереснейшим человеком, ныне инвестором, а в прошлом предпринимателем
• Несимметричный фон на центрированном сайте Простая идея для реализации асимметричных сайтов, оказалось не все слышали...
• Платформа “WEB”, 28 сентября, Киев Конференция от Microsoft, на которой я был в качестве докладчика. Рассказывал о Silverlight. Мои впечатления, доклад и краткое содержание миниконференции
• Blogcamp 2007 Неконференция блоггеров! Мой отчет об этом необычном событии прошедшем в Киеве
• Оценка качества верстки Мои критерии "любви" к чужому HTML. В комментариях много интересных мыслей
• Эмо-стихотворение от лица броузера Genn зажигает своими HTML-стихами. =)
• ClientSide 2007, 6-7 ноября, Москва Вторая конференция на которой я читал доклад. На этот раз о доступности. Очень хотелось поднять эту тему на профильной для меня конфе. Доклад, впечатления, фотки
• Как написать CSS только для Safari CSS-фильтры для Сафари, часть работает, часть не очень. Но иногда без них никак
• Кляксы Простая теория, которую я придумал для описания гениальности и таланта людей
• Одноразовый expression О том как заставить выполняться expression(кусочки джаваскрипта для IE) один раз
• Микроформаты в жизнь Очередная попытка рассказать всем, что микроформаты это просто. А так же мои мысли о перспективах идеи
• Как верстать быстрее Мысли о комфортной и быстрой верстке, никаких чудес

Еще

Тем кто недавно читает мой блог, возможно будет интересно посмотреть "сливки" за прошлые годы:

• Лучшее за 2005
• Лучшее за 2006

!

Спасибо тем кто меня читает! Всех вас я считаю главной ценностью этого блога. И надеюсь, у меня получается вас за это отблагодарить полезной информацией. :-)

С наступающим всех! =) Успехов Вам! И отличных праздников!

Как ускорить вёрстку 23 Dec 2007 3:00 PM (17 years ago)

Несколько идей помогающих мне верстать быстрее и приятнее.

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

Войти в транс

Обычно вход в транс происходит после 15-30 минут непрерывного труда, без ответов в аську и других дел. Это такое чудесное состояние, когда вы полностью в вёрстке, и все что есть в этом мире, это текстовый редактор и Фотошоп (да, я фанат). Состояние очень похоже на "счастье", максимальная самоактуализация, LSD и ecstasy курят.

Общепринято, что идеальная работа должна происходить блоками по 90 минут. Обязательно нужно делать перерывы каждые полтора часа, иначе можно сгореть. Хоть бы самому не забыть это делать :)

Разделять HTML и CSS

Удобно разделить весь процесс кодинга на этапы HTML+CSS. Хотя бы потому, что на обоих этапах нужны разного рода навыки, хоткеи и мыслительные процессы.

Фактически, 99% HTML можно написать заранее, просто глядя на дизайн. Затем, я обычно делаю небольшой перерыв и принимаюсь за CSS. Часто перерывом служит ночь. Во сне можно придумать как сверстать самые трудные места дизайна. Я уже давно привык решать трудные задачи во сне.

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

От общего к деталям

Начинать легче с общего. Я обычно начинаю с построения лэйаута сайта. То бишь, некоего общего каркаса. Затем постепенно начинаю спускаться в детали.

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

Такой же подход, кстати, используется и при проектировании интерфейсов — человеку первым полем дают заполнить самое важное(e-mail при регистрации, например), после чего все остальные поля кажутся просто формальностями.

"Фреймворки"

Чисто психологически проще начинать не с нуля, не создавать все файлы и папки, а использовать некий шаблон. Я например ощущаю, что переименовывая папку "template" в "novaya-verstka", я уже практически сделал полдела.

Проще самому выработать свой стартовый шаблон, просто посмотрев, что вы делаете в начале каждого проекта. Так, например, сделал я.

Последний год стали очень популярными так называемые CSS-фреймворки, можно использовать один из них:

• CSS-Framework.ru — русский фреймворк, поддерживает и разрабатывает Алексей Романовский
• Blueprint — один из самых старых фреймворков
• YUI Grids CSS — мощнейший инструмент, преопределенные имена классов для практически всех видов лейаутов

У меня они не прижились, и я использую просто набор файлов, о котором я уже писал. Самую новую версию моего "фреймворка" можно скачать отсюда. Он настолько гибкий(в нем почти ничего нет), что может даже кому-то пригодится.

Помните, лучший фреймворк — ваш фреймворк. Эта идея подтверждается во всех отраслях.

Хоткеи или куски готового кода

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

1. <!-- BEGIN #name -->
2. <div class="name">
4. </div>
5. <!-- END #name -->

Это помогает оставлять код легко читаемым, и соответственно, ускоряет внедрение сайта программистами. Для таких сниппетов я использую: div и нажатие TAB.

1. <form action="/">
2. <fieldset>
3. <legend>name</legend>
4. <p><label for="ff1">Имя</label> <input type="text" id="ff1" /></p>
5. </fieldset>
6. </form>

Список ссылок — атрибут практически 90% сайтов на сегодня:

1. <ul>
2. <li><a href="#">name</a></li>
3. </ul>

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

Не верстать два сайта в один день

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

В конце

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

Микроформаты в жизнь! 20 Dec 2007 3:00 PM (17 years ago)

Мои(и не только) мысли о микроформатах. А так же нескольно примеров проектов, в которых я применял микроформаты.

Что это

Всего лишь предопределенные имена классов, и тагов. Не более того. Смотрите сами, ХТМЛ до микроформатов:

1. <dd>
2. Юрий Артюх,
3. +38 096 970-6428,
4. <a href="mailto:...">akella.a@mail.com</a>
5. </dd>

И после:

1. <dd class="vcard">
2. <span class="fn">Юрий Артюх</span>,
3. <span class="tel">+38 096 970-6428</span>,
4. <a class="email" href="mailto:...">akella.a@mail.com</a>
5. </dd>

Добавилися класс показывающий тип формата — vcard. Спаны, для того чтобы "машины" разобрались где телефон, имя и адрес. Вот и все. Делов то. Зато какие перспективы!

Зачем это

Представьте себе 1970 год. Вся информация об организациях хранится в бумажном каталоге, "Желтые страницы" например. Обновляется раз в год, а то и реже. А потом еще полгода чтобы издать.

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

А теперь представьте, год 2010й. Каждая фирма обновляет свою информацию у себя на сайте. Где она разметила ее в hcard. Таким образом, при наличии поисковика по формату, мы будем иметь всё те же "Желтые страницы", но обновляющиеся моментально. (я принимаю интернетизацию общества за данность).
Фирмам не нужно нигде регистрироваться, просто обновить инфо на своем сайте!

По сути это шаг от централизованных систем к распределенным. Тот же веб2.0 в некотором смысле шагнул, от централизованной генерации контента, к распределенной. И этот тренд видно практически во всех областях. Это наводит на мысли о правильности пути микроформатов.

В примере выше я упоминал формат hcard, но попробуйте представить распределенную систему оценок для фильма, или подписку прямо на страничке с форматом hAtom, без поиска RSS-каналов. Или обновление своей адресной книги, или то чудесное применение, что придумал Иван Сагалаев.

Примерно так бы я распределил сервисы и их аналоги по сущностям в микроформатах (на самом деле, мне просто нравится новый дизайн таблиц на блоге):

	Цетрализованная система	Распределённая
Новости	Feedburner, news.google.com	hAtom
Адресная книга	plaxo, linkedin, facebook (vkontakte)	hCard + XFN
Календари	upcoming, ckopo.in.ua	hCalendar

Микроформаты и Wordpress

Как пример микроформатизации можно рассмотреть Wordpress, хотя практически все новые темы выходят с учетом hAtom. Тем не менее, сейчас у меня вот такой кусочек кода в /wp-content/wp-themes/wpthemename/index.php выводит список заметок:

1. <div class="hentry">
2. <h2 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="пермалинк <?php the_title(); ?>">...</a></h2>
3. <abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO'); ?>"><?php the_time('j F, Y') ?></abbr>
4. <div class="entry-summary"><?php the_content('читать дальше'); ?></div>
5. </div>

Результатом будет такой HTML, я выделил жирным все, что добавлено для микроформатов:

1. <div class="hentry">
2. <h2 class="entry-title"><a href="#" rel="bookmark"> ... </a></h2>
3. <abbr class="published" title="2007-12-06T16:36:10+0200">6 октября, 2007</abbr>
4. <div class="entry-summary">Выдержка из поста</div>
5. </div>

Как видно, всего лишь классы. Для даты принят стандартный формат <abbr title="2007-12-06T16:36:10+0200", вдобавок вся новостная лента должна быть обернута в див с классом hfeed.

• Спецификация hAtom (draft)
• Спецификация hcard

XFN

Так называется формат нагружающий смыслом ссылки. XFN — XHTML Friends Network. Здесь вообще все элементарно, вот одна из ссылок в правой колонке моего блога:

1. <a href='http://uggallery.audiopeace.ru/' rel='acquaintance met colleague'>Александр Исаков</a>

Что означает, что я знаком с этим человеком(acquaintance), встречал его вживую(met) и являюсь его коллегой(colleague). Подробнее можно почитать на главной странице XFN

В конце

Несмотря на то, что идее уже третий год, и даже Билл Гейтс считает ее удачной, она(идея) все еще в развивающемся состоянии. И думаю во многом это зависит от разработчиков. Изучение микроформатов все же является неким риском. Никто не гарантирует во что это все выльется. Тем не менее, я их использую в большинстве своих проектов уже сейчас. Потому что это просто.

• microformats.org — главный ресурс где и находится wiki c полным описанием и возможностью проапдейтить формат или задать вопрос
• Этому сервису можно скормить УРЛ странички, он же выделит на ней все известные микроформаты, вот так например, к сожалению пока там легки проблемы с кириллицей =(. Но автор проекта Дмитрий Барановский уверен это поправит.
• Официальная страничка плагина Tails для Firefox и плагин для экспорта микроформатов в другие приложения
• Микроформаты убьют Facebook

Ваши мысли о перспективах микроформатов приветствуются!

Полгода на маке 13 Dec 2007 3:00 PM (17 years ago)

Устоявшийся софт, впечатления от работы и прочие мысли из-за этой стороны баррикад.

Софт

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

Textmate — текстовый редактор

Textmate

Просто отличный редактор, после постепенной кастомизации под свои привычки (хоткеи, сниппеты) становится просто мощнейшим инструментом оптимизации труда кодера. Честно признаюсь, мне просто не хватает мозга чтобы использовать все его возможности, я их могу только осознавать. Код стал писать примерно в полтора раза быстрее чем в Notepad++. Не то чтобы мегаускорение, но вполне ощутимо.

Есть еще Coda, CSSedit, textwrangler и куча всего красивого, но все это противоречит моим представляениям о минимализме.

Cyberduck — FTP клиент

Cyberduck

После привыкания оказался отличным ФТП менеджером. То, что я ценил больше всего — закладки, оказались организованными даже удобнее чем в SmartFTP(идеальном для меня). Работает шустро и надежно, последние две мечты: несколько одновременных сессий, и понадёжнее запоминание директорий в которых я был последний раз.

Вдобавок, как видно по иконкам на скриншоте, клиент удобно интегрируется с Textmate! Большего мне уже и не нужно. Я не feature-hunter =)

Vienna — RSS клиент

Vienna

Дизайн стандартный для RSS читалок (а ля аутлук), сам по себе простой и быстрый. Без лишних фич. И пересаживаться за джаваскрипт интерфейсы с него не хочется. Я перепробовал кучу RSS ридеров под виндой, все они мало чем друг от друга отличаются. Vienna пожалуй можно уличить в не до конца маковском подходе в дизайне, но в целом он на 100% справляется со своей задачей.

Parallels — Windows

Windows на Mac OS

А вот так выглядит запущенная в виртуальной машине Parallels Windows XP. Чудесное спасение для тестирования верстки под ИЕ.

Quicksilver и namely — запускалки

Quiksilver

Под виндой практически не имел с ними дела, однако под маком вошел во вкус. Что это такое? Примерно так: хочу я запустить Cyberduck. Жму Control+Spacebar(хоткей для Quicksilver) затем на клавиатуре "Сy", уже после буквы "C" можно нажимать на Enter и запустится Cyberduck угаданный по первой букве. Итого: 4 касания клавиатуры для запуска практически любого софта. Без мышки.

По ощущениям очень напоминает "~" + "say hf" + "Enter" (я это сочетание в CS набирал очень часто)

Quicksilver на самом деле помогает решать еще много других стандартных задач: ресайз картинок, отсылание файла по почте и т. п. О них можно прочитать например в статье "10 плагинов к Quicksilver".
Его более простой аналог - Namely, позволял запускать только программы, однако весь его интерфейс уже достоин аплодисментов:

Namely

Говорят в Леопарде родной поиск "Spotlight" уже решает задачу запуска приложений, но не суть важно. Я все ещё на Tiger. И Quicksilver, как мне кажется, нашел наиболее оптимальное интерфейсное решение для ланчеров.

Разное

Сёрфлю: Safari 3.0. Мессенжер: Adium (выбор небольшой, надо сказать). mp3: iTunes (кто бы мог подумать?). Видео: VLC.

В целом впечатления

Я очень рад что решился купить мак =). Я наконец избавился от всех старых виндовых привычек и наслаждаюсь жизнью. Ни о чем не жалею. С ним я сблизился гораздо сильнее чем с PC. Абсолютно нечего бояться переходить. Я писал о непривычной мышке - привык, не стоит извращаться пытаясь внедрить сенсу с винды в маке, просто расслабьтесь и через неделю вы привыкнете к мышке.

Свой Windows ноутбук я подарил.

Похоже я в секте.

Буду рад если маководы поделятся своим софтом =). Вопросы из-за той стороны баррикад приветствуются.

• Лучший софт под Mac OS

Одноразовый expression 5 Dec 2007 3:00 PM (17 years ago)

Все уже часто сталкивались с специфическими для IE expressions, однако не все знают (я например не знал), что их можно оптимизировать. Об одном из приемов и пойдет дальше речь.

Проблема

Наверняка многие хакеры замечали, что когда expression становится много, то сайт начинает притормаживать в IE. Оно и понятно — они ведь исполняются при каждом действии на странице, будь то клик, наведение мышки, или ресайз экрана. Cмотрите сами. Для некоторых скриптов так и должно быть (min-width например), другим же достаточно одного выполнения(PNG fix, :first-child etc). О том как заставить их исполняться только один раз при загрузке и идет дальше речь.

Решение

Все решения используют один и тот же прием. Есть некий "флаг", при наличии которого expression выполняется, скрипты же пытаются при первом же исполнении этот флаг убрать.

Вариант решения

Первый вариант выглядит так:

1. jscript: expression(
2. this.p ? 0 : (
3. //а здесь пишем нужный нам код,
4. this.p = 1
5. )
6. );

В данном случае в качестве флага используется абстрактное и несуществующее в спецификации свойство "p". При первом выполнении, переменной p будет присвоена 1, а также выполнено наше действие. Таким образом при каждом следующем выполнении скрипта будет выполняться только this.p = 0. Что гораздо быстрее любых других операций.

Яндекс вариант

Вариация(false true переставили местами) на тему этого способа используемая в верстке Яндекса:

1. b:expression(
2. !this.a?
3. (this.a=1, (this.previousSibling?this.innerHTML='&nbsp;&middot;' + this.innerHTML:0)):
4. 0
5. );

В частности, этот скрипт ставит точки-разделители перед всеми "чайлдами", кроме первого — такая вот эмуляция first-child. Скорее всего принадлежит руке большого и уважаемого мною профессионала в верстке — Виталия Харисова

Второй тип, я использую

Есть и второй тип, используется CSS свойство, которое потом в самом expression "сбрасывается", так, что expression при первом выполнении как бы "удаляет" сам себя:

1. background-image:expression(
2. this.runtimeStyle.backgroundImage = 'none',
3. //а здесь пишем нужный нам код
4. );

background-image тут играет лишь роль флага, на самом деле скриптить таким способом можно все, что вам нужно, как-то так выглядит эмуляция :first-child:

1. background-image:expression(
2. this.runtimeStyle.backgroundImage = 'none',
3. this.previousSibling?false:this.className += 'first-child'
4. );

Когда мы присваиваем свойству none, соответственно и expression перестает исполняться.

Безопасно вместо background-image использовать всякие редкие свойства вроде azimuth.

Изучать дальше

Вообще за поднятую тему оптимизации expression спасибо Павлу Корнилову выступившему с соответствующим докладом на ClientSide 2007.

Следует помнить, что одноразовые expression нельзя применять для min-width, min-height и прочего. По понятным причинам подсчеты произведутся только при загрузке страницы.

• Пример трех одноразовых expression а так же пример одного обычного
• Текст доклада Корнилова на ClientSide и жж-пост про это, рекомендую ознакомиться с презентацией(внизу текста на его сайте есть линк)
• PNG fix использующий прием оптимизации, в комментариях есть несколько способов оптимизации
• PNG прозрачность у Харисова с использованием "одноразовости"

Кляксы 29 Nov 2007 3:00 PM (17 years ago)

Простая модель, которую я придумал, чтобы показать что все люди гениальны. Без исключений. Это не про CSS.

?

Я всегда считал и буду считать, что все люди в чем-то талантливы. Кто-то классно водит машину, кто-то умеет решать дифференциальные уравнения в уме, другие очень быстро завязывают шнурки, а кто-то лучше всех в мире готовит кофе. И вот однажды, лет 8 назад, пришла в голову забавная метафора косвенно это показывающая. А вдруг не только мне она покажется забавной? Это уже давно часть моего мировоззрения.

Суть

Я размышлял так, талант каждого человека в какой-то дисциплине — проекция его личности на эту область знаний. Математика близка ему? Проекция личности на эту науку большая и человек в ней хорошо разбирается. И так далее.

Дальше понятия "проекция" и "тень" я буду нещадно путать. Ибо суть одна. Но "тень" мне как-то человекоподобнее кажется.

Представьте, что каждый человек — капля чернил, у всех одна и та же по обьёму. Если её брызнуть на бумагу — будет клякса, разной формы. Что-то такое:

Клякса

Форма кляксы, как и личность человека, уникальна.

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

Человек: длина теней это его способности

Понятно, что например "ось" стихотворства будет проходить где-то рядом с гуманитарной, так, что талантливые рифмоплёты волей-неволей будут "отбрасывать" большую тень и на гуманитарную ось:

Как-то так думаю выглядят нынешние программисты:

Программист

А так выглядел бы Лев Толстой, если бы мы его капнули на бумагу:

Гуманитарий

А это не Михаил Круг, нет, а просто равномерно развитый во всех отношениях человек:

Круглый умник

Ну разве можно сказать что одна клякса "лучше" другой, или, что еще грубее, "эта клякса тупая"? :) В такой метафоре — это просто смешно. Максимум, "мне эта форма больше по душе".
Все кляксы по-своему прекрасны и гениальны.

Развитие модели

Разумеется, было бы очень ограниченно полагать, что люди описываются всего лишь плоскими кляксами. Но что нам стоит вообразить вместо чернил — кусок пластилина, отбрасывающий всё те же тени-проекции на другие плоскости, теперь уже от реального света. И никто, разумеется, нас не ограничивает 2-3 измерениями...

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

!

Суть же одна, легко понять, что даже если в математике и сочинительстве у вас маленькая "тень", чернил и пластилина в вас ровно столько, сколько было в Эйнштейне. Просто нужно найти удачный ракурс, и отбросить тень побольше. ;)

Cколько-то способов min-height 28 Nov 2007 3:00 PM (17 years ago)

Несколько способов реализации min-height для всех броузеров. Короткий обобщающий пост. Надеюсь все оценили как я изящно избежал цифры в названии поста?=)

Свойство нужное, часто полезное, но в Internet Explorer не работает. Далее способы вразумить синюю букву Е.

1. min-height через height

Говорят, разработчики IE5-6 реализовали свойство min-height, просто решили его назвать height, так оно вобщем то и есть. height для 5й и 6й версий ведет себя как min-height. В 7й версии min-height уже работает. Потому вопрос лишь в том, как им всем отдать свои значения. Об этом позаботился Дастин Диаз:

1. .block {
2. min-height:200px;
3. height:auto !important;
4. height:200px;
5. }

Комментировать особо нечего - это работает. Первая колонка в примере.

На данный момент, в силу того что ИЕ7 уже поддерживает min-height, два другие способа я привожу скорее как историческую справку и пример интересных приемов.

• оригинальная статья

2. min-height с помощью padding

Так же можно эмулировать минимальную высоту с помощью комбинации:

1. .block{padding-top:200px}
2. .block .inner{margin-top:-200px}

Этот способ требует однако дополнительного элемента ".inner", тем не менее является пожалуй самым простым и иногда удобным. Что бы кусок кода был максимально универсальным - лучше добавлять аж 2 обертки:

1. .block .inner{padding-top:200px}
2. .block .inner1{margin-top:-200px}

В примере я вместо второй обертки использовал элемент h2.

• Подробнее в блоге у Dave Shea

3. min-height с помощью expression

Как всегда все можно решить с помощью джаваскрипт.

До того как вышла 7ая версия можно было делать так:

1. .block{height: expression('32px'); min-height: 32px;}

Однако этот вариант не работает в 7й версии.

Более универсально и в лоб, проблема решается так:

1. .block {
2. height: expression(this.scrollHeight < 201px ? "200px" : "auto" );
3. min-height: 200px;
4. }

Или что бы ускорить работу скрипта, как советует Павел Корнилов, this можно опустить:

1. .block {
2. height: expression(scrollHeight < 201px ? "200px" : "auto" );

Для body, однако, так нельзя оптимизировать.

В конце

• Пример с тремя методами

Буду рад услышать ваши методы и мысли по поводу решения этой проблемы!

Как написать CSS только для Safari 13 Nov 2007 3:00 PM (17 years ago)

Несмотря на экзотичность такого фильтра, он мне понадобился уже на двух проектах. Это, ясное дело, из-за того что у меня мак, и мне не все равно. Короткий грязный(невалидный и не future proof) но работающий здесь и сейчас хак для Safari 2-3.

Зачем это надо?

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

1. Когда вы стилизуете submit'ы, они, как известно в Mac OS Tiger не поддаются, и это иногда вызывает нежелательные эффекты для дизайна.
   Например на сайте UA WEB 2007 поле регистрации выглядит по разному в Safari и всех остальных броузерах:

2. На этом блоге я использовал для (всего)текста шрифт Myriad. Очень красивый и читабельный шрифт. Под виндой, однако, имеет совершенно неадекватное и нечитабельное сглаживание, догадайтесь какой скрин из винды:

Фильтр же позволил мне хотя бы для Сафари пользователей (а это дизайнер и верстальщик моего блога =)) отдавать сайт в первозданном виде с Myriad. Остальным же показывать красивый Arial.

Как

Фильтр является комбинацией двух фильтров (Safari 2 и 3).

Известно что Safari 2 очень чувствителен к посторонним невалидным символам в CSS, настолько, что не читает код после них. К примеру в вот такой конструкции:

1. p{color:red}
2. span{font-weight:normal;#}
3. p{color:green}

Все броузеры сделают параграф зеленым, в то время как в Сафари 2 он останется красным. На самом деле вместо # можно использовать кучу странных символов, но какая разница, если работает и этот. Разумеется, если эти три строки написать в самом начале CSS, сафари 2 его(файл) не прочитает вовсе. Вдобавок никто не мешает использовать вместо селекторов, например import, и отдавать целый отдельный CSS файл для Safari 2.

Safari 3

C Safari 3 все проще. Он вышел недавно, и как любой новый броузер поддерживает тьму-тьмущую интересных CSS3 псевдоклассов, до которых не додумались еще пока Windows броузеры, да и вообще все остальные. А значит есть большая вероятность что ближайшие несколько лет их будет поддерживать только он. Одно из таких свойств:

1. body:first-of-type{color:red}

Шрифт будет красным только в Safari 3. Псевдокласс, кстати сам по себе экзотический - вразумительного теоретического применения ему я так и не придумал. Официальное предназначение:

The :first-of-type pseudo-class represents an element that is the first sibling of its type in the list of children of its parent element

Вобщем, прямой перевод, "первый, среди всех подобных ему". Скорее всего другие броузеры скоро(или не очень) начнут его тоже поддерживать. Так что, он ни разу не future proof. Однако, если очень нужно(критично), есть javascript определение Safari 3. Выглядит примерно так:

1. <script type="text/javascript">
2. isSafari3 = false;
3. if(window.devicePixelRatio) isSafari3 = true;
4. </script>

Комбинация для Safari 2 и 3

Комбинируя эти два фильтра, можно скормить стили только для Safari 2-3. Вот как я делаю это на своем блоге, что бы любоваться Myriad:

1. body{font:62.5%/1 "Myriad Pro", arial, sans-serif;}
2. ...
3. /*В конце файла*/
4. span{font-weight:normal;#} /*Safari 2 дальше не читает, для него остался Myriad*/
5. body{font-family:Arial, sans-serif;} /*Для всех броузеров*/
6. body:first-of-type{font-family:"Myriad Pro", arial, sans-serif;} /*для Safari 3*/

Работает!. Несмотря на малый процент Сафари в целом, есть тенденция к тому, что среди современных заказчиков он очень распространен. В целом, Safari очень хороший и фильтры эти нужны крайне редко.

Буду рад если кто-то поделится своим опытом!

Update v.2

Финальная подборка фильтров (спасибо Antejan и Mester):

1. /*поймут только сафари*/
2. body:first-of-type .class{}
3. /*поймут только сафари*/
4. html:root*.class {}
5. /*поймут только сафари*/
6. html*.class {}
7. /*поймут только сафари и опера*/
8. @media screen and (-webkit-min-device-pixel-ratio:0){ .class { } }
9. /*поймут только сафари*/
10. body:first-of-type .class{}

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

• Тестовая страничка со всеми фильтрами для Сафари, все проверены на Сафари 3. Опера прочитает только 4й прием. Фаерфокс и ИЕ не прочитают ни одного.

Update (2009.07.06)

На данный момент из всех перечисленных хаков работает только один:

1. @media screen and (-webkit-min-device-pixel-ratio:0){
2. .class { }
3. }

Новая Opera, по своим каким-то причинам, перестала его читать.

Update: В силу выхода новых версий браузеров, обязательно тестируйте хаки.
Хороший вариант предложил Василий Половнёв в комментарии к этой заметке.

наиболее удачный на мой взгляд способ написать css только для Safari 3/Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) {
body:first-of-type .clazz {color: red}
}

ClientSide 2007, 6-7 ноября, Москва 10 Nov 2007 3:00 PM (17 years ago)

ClientSide 2007 удался на славу! Конференция прошла просто мегагладко, куча интересных вдохновляющих докладов, множество живого общения и целая гора полезной информации. Подумать только, успел поговорить с людьми ответственными за верстку Лепра, Хабрахабра, Dirty, ЖЖ, Yandex и его сервисов... И все эти люди веб-стандартисты!

Мой доклад "Как сделать сайт доступным"

Вкратце - мне казалось что эта тема в разрезе верстки, просто обязана была прозвучать. Главное, что я хотел донести, что делать сайты доступными это просто, профессионально и нужно. Донес я не совсем так, как хотелось бы, но главное для меня, что эта тема прозвучала, а к качеству своей выступательной речи и интересности слайдов я теперь отношусь на два порядка серьезней =). Доклад вобщем то сам себя поясняет, в конце много полезных ссылок на тематику доступности. Спасибо всем кто пришел! Спасибо Genn за дизайн презентации! =) Ты лучший!

Запомнившееся

Пересказывать все нет смысла, потому перечислю запомнившиеся моменты.

Артем Горбунов очень интересно рассказал о всевозможных дизайн-кейсах из его опыта, и просто встречавшихся ему. На рассказе об инфографике на шампуне - зал просто порвало =)

Так же красивым вышло сравнение отсылки SMS в iPhone и Fly телефонах: 3 экрана против 9. Вообще было просто интересно. Рекомендую посмотреть запись выступления Артема (когда она появится).

Павел Корнилов рассказывал о навороченных expression. В частности о том как ограничить их выполнение одним разом. Это очень актуально - так как даже для прозрачных PNG они буду выполняться при ресайзах и тп. Все так увлеклись ими что Харисов пошел показывать Макееву и еще паре человек, после доклада какие еще бывают экспрешны. Самый полезный, что я вынес для себя, превращает обычный UL список в перечисление через запятую.

Петр Диденко - евангелист из Microsoft рассказал о средствах accessibility в Windows и Офисе. Очень показательный и интересный выбор темы. =) Да и в целом рассказывал очень хорошо и интересно, чувствуется опыт.

Из нескольких докладов об оптимизации запомнилось: удаление пробелов в файлах и уменьшение HTTP запросов.

Виталий Харисов поведал об интересной верстальщицкой абстракции используемой в Яндексе — "Верстка независымыми блоками". Тем кто занимается версткой больших и сложных ресурсов с кучей ре-используемых частей - mustsee.

Фотки

тусовка

Дембицкий и кривые Безье

Петр Диденко

Андрей Сумин и белый светящийся экран

Не знаю кто это

no comments

no comments 2

Еда

Харисов о верстке блоками

Флипчарт сессия Филёва

Корнилов об expression

Артем Горбунов

В конце

Конференция вышла интересной, и образовательный эффект очень хороший. Мне лично попалось много интересных идей. И наверняка многие, кто не закрывал свое сознание колпаком "я крутой", тоже. Думаю компаниям таки действительно стоит отправлять сотрудников на эти конференции, цель Бунина, Рогожина и Филева достигнута. Создана атмосфера для обмена информацией между лидерами отрасли. Кто был на конфе, рад был бы услышать мнения! И кто не был, тоже. =)

P.S.: Отредизайнился! Буду рад услышать мнения о новом дизайне! Эластичность, микроформаты etc...

Эмо-стихотворение от лица броузера 2 Nov 2007 4:00 PM (17 years ago)

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

Потом контент, где спанов хоровод
Танцует в круге дивов и в костюмах стилей.
Таблицы видишь? Их разыгран лот!
Тут много классов и айди — мы победили!

Феерия внезапно подошла к концу:
Налево скобка, слеш и закрываем боди.
Закрытие эйчтиэмэл — отсыл к отцу.
Прочитан сайт от корки и до корки, вроде…

© Genn

Просто не удержался! =)
Вдохновение началось со второй строки HTML моего блога

Оценка качества верстки 23 Oct 2007 4:00 PM (18 years ago)

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

Инструменты

Так как делается это все в онлайне, и я лентяй, то для оценки верстки я использую обычно Firefox с плагином Web Developer.

Оценки в порядке важности (для меня)

0. Сайт должен нормально работать. Конечно это является важнейшим критерием. Это нужно а приори для оценки верстки, иначе какой смысл ее оценивать? Он должен быть достаточно кроссбраузерным: IE6-7, FF, Safari, Opera - мой список.

1. Семантика кода
Это я проверяю двумя способами.

1. Отключаем стили на страничке Ctrl+Shift+S(для мак Apple+Shift+S) и сразу видно - остается ли страничка в понятном виде? Видно ли навигацию? Заголовки? Или все сделано сплошным текстом в ДИВах...
2. смотрю в коде - сколько разных тагов и для чего используется. Обычно с первого взгляда видно если там одни ДИВы, или множество вложенных таблиц (оба варианта плохи).

2. Правильное использование тага TABLE
Сам по себе критерий часть предыдущего. Но ввиду распространенности упомяну отдельно.
Жмем Outline -> Outline Tables -> Table Cells и сразу видим где и для чего на странице использовались таблицы. Примерно так:

3. Читабельность
Критерий конечно субьективный, но тем не менее всегда видно, когда человек старался делать отступы и комментарии, а когда делал "абы как"... Увидеть легко - сделав View Source.
Так же в CSS сразу заметно когда человек пытался соблюдать хоть-какой то порядок. Я не говорю о каком-то конкретном именовании и комментариях - но хоть что-то...

4. Структура заголовков
Для меня важно как выстроена структура заголовков h1-h6, по идее они должны соблюдать строгую иерархию. Конечно отклонения на живых сайтах - вполне реальны и приемлемы, я очень хорошо понимаю как это трудно. Но тем не менее: в плагине Information -> View Document Outline выдаст на хороших сайтах что то вроде этого (пример сайта http://uaweb.in.ua/):

h1 должен быть один на всю страницу, далее структура должна быть ниспадающей.(вообще то их может быть несколько, но они должны четко описывать структуру сайта) Это хорошо видно по картинке. Конечно, строго именно такая структура нигде не задана в стандартах - но лично я считаю такую иерархию очень правильной. Она напоминает книжное оглавление, или тезисы дипломной работы.
Хотя существуют другие мнения по этому поводу (кол-во h1).

5. Доступность (accessibility)
Альтернативный текст к картинкам, смысловая нагруженность кода(семантика), изменяемые размеры шрифтов, и то как сайт выглядит без картинок(Images -> Replace Images With Alt Attributes) - все это вместе делает сайт доступным для пользователей и поисковиков. Последний хоткей кстати проявляет "плохие" image replacement техники.

6. Именование классов и ID
Неправильно: left-column-with-gray-border-at-top (привязано к отображению)
Правильно: secondary-content (привязно к смыслу блока)

7. Микроформаты
Это можно назвать "продвинутой семантикой". Их наличие легко определить плагином Tails. Если на страничке есть микроформаты то в статус баре будет активной их известная зеленая иконка, вот так:

А если микроформатов нет:

(Оранжевая иконка плагина Tails Export - для экспорта информации из страницы в другие места)

Хотел бы добавить валидность, но это слишком круто для живых проектов. И из-за редкости этого пункта - я его обычно даже не затрагиваю. Хотя валидация HTML в шаблонах перед реализацией проекта в жизнь обязательна для меня.

7 хорошее число.

В конце

Примерно таким способом я обычно оцениваю чужую верстку. В зависимости от наличия времени использую только первые 2 или первые 4 пункта...

Буду рад услышать ваше мнение и критерии!

Blogcamp 2007 14 Oct 2007 4:00 PM (18 years ago)

В Киеве 13-14 октября состоялся первый украинский Blogcamp. Получилось действительно клёво! =) Несколько фоток и воспоминаний.

неконференция

Вообще трудно что-то писать о Blogcamp. Что толку пытаться описать атмосферу, или ощущения от развиртуализации кучи знакомых, или искрометных докладов

началось

началось все с вступительного слова организаторов Максона Пуговского, Оксы Завойко и Александра Демченко (это не все организаторы конечно): Затем появился Яндекс и рассказал о статистике украинской блогосферы: Как оказалось самый популярный среди украинцев блогсервис - Liveinternet.ru. Так же выяснилось что в России средний блоггер это студентка 21 года(64% девченок). А у нас(в Украине) средний образ блоггера представлен парнем 24 лет и девушкой 21 года. В среднем наши украинские блоггеры пишут на 2 поста больше в месяц чем российские. Пообещали скоро опубликовать подробную статистику по ЮА блогам.

Брейншторм идей для стартапов

В одной из сессий, нас разделили на команды по 5-6 человек и устроили конкурс стартапов. Это стало пожалуй одной из самых веселых затей. У всех команд кроме идей интеграции мобильников, GPS, и социальных сервисов был припрятан свой порно-стартапчик =) Торжественно договорились в миру идеи не распространять...

kukutz

Один из последних докладов делал Kukutz. Одним словом - отжог. Доклад был тем самым фриковским докладом "Антисоциальные сети" - который насмеялся над всеми остальными. Социальные сети и веб2.0 набили оскомину за два дня. Рассказывалось о Дваче, его правилах, анонимусах и интернет мемах рождающихся в нем. Думается на каждой конференции должен быть доклад противопоставляющий себя всем остальным, и одновременно с этим не несущий ровно никакой серьезности. Расслабляет =)

WEB 2.0

Как верно предложил Алишер Хасанов на закрытии, нужно запретить использование термина web 2.0. Полностью его поддерживаю - применяют его куда-попало и все подряд, лучше уж не употреблять вовсе.

Вообще Алишеру нужно бы было вручить приз за лучшие комментарии. Часто они получались интереснее самих докладов. Если просуммировать время его вопросов и комментариев получилось бы наверно доклада на 2-3 времени =) Это не говоря о глубине мыслей.

Вот так происходила еда:

А вот к примеру кулуарное общение

В частности вот как wmas(затылок) пытал Юрия Синодова, а за этим наблюдали Kukutz и Phil. Слева направо: Кукуц, Фил, Вмас, Синодов:

Всего не расскажешь

Все рассказать нереально. Да и не нужно - эту (не)конференцию делали все, кто на нее пришел, а потому и отчет цельный нужно составлять читая все отчеты =)

За фотки огромное спасибо "Интернетным штучкам" и Артему Чертову.

• Blogcamp - тут скоро должны появится ссылки на хорошие фотографии с мероприятия
• О первом и о втором дне на интернетных штучках
• Подборка отчетов от Евгения Шевченко
• Презентации первого дня и второго
• Google & Yandex - вместе!
• Фотографии Артема Чертова с Блогкемпа
• Несколько высказываний и курьез с Кукуцом
• Классный подкаст с пересказом блогкемпа, жаль без половины второго дня, но все равно крайне позитивно =)
• Блогкемп на Roem.ru

Огромное спасибо всем организаторам и хелптим =) Будем ждать прибалтийский блогкемп в январе 2008!

Платформа "WEB", 28 сентября, Киев 8 Oct 2007 4:00 PM (18 years ago)

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

Конференция

Организована Microsoft и на очень высоком уровне! Были доклады:

• Новi можливостi Windows Server 2008 для хостерiв
• Live як платформа (спецiально запрошений гiсть Олександр Бойко, Microsoft)
• Microsoft Expression Studio (Юрiй Артюх)
• Live в Українi (Всеволод Леонов, Microsoft)
• Програма SPLA для хостеров (Сергiй Байдачний, Microsoft та представник партнера)
• Використання CardSpace (Вiктор Шатохiн, Microsoft)

Вкратце: Бойко в курсе всех трендов, Леонов остроумен и любит уколоть сервисы на букву Гэ, Байдачный улыбчив и знает всё, Шатохин профи докладчик :) Часто вспоминали конкурента на букву Гэ.

Мой доклад

Доклад назывался "Microsoft Expression Studio", и рассказывал я о всех продуктах из этой линейки, о том что они дают, и как помогают делать Silverlight приложения и дизайн для них. В отчете внизу страницы есть более подробное описание моего доклада, потому я не буду вдаваться в подробности. Вкратце, так:

• Expression Web - для редактирования кода (javascript, С#, HTML)
• Expression Design - для иллюстраторов, любой дизайн отрисованный в нем легко экспортируется в XAML понятный другим приложениям линейки Expression
• Expression Media Encoder - продукт предназначенный для конвертации видеофайлов, и их легкого экспорта в сильверлайтовский плеер
• Expression Blend - собственно то в чем можно создать Silverlight(ex WPF/E) и WPF приложения, работает с дизайном на уровне XAML импортированного из Design. Проекты сохраненные в Blend можно открыть в Visual Studio. Идея такова: Expression Blend - анимация, внедрение дизайна; Visual Stuido - C#, Javascript и прочая логика и кодирование.

Кроме того, продукты в целом позволяют внедрить что-то вроде новой философии разделения труда: дизайнер работает над дизайном приложения(XAML), разработчик над кодом(Javascript, C#) - и никто друг другу не мешает. :)

Презентация

Скачать pptx

Windows Live и Cardspace

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

Cardspace (en) - очень интересный рассказ Виктора Шатохина о том как уже сейчас использовать эту технологию аутентификации на своих сайтах, и ее интеграции в Vista. Кол-во информации которой поделился Виктор просто грандиозно, вопросы к нему пришлось прервать из-за недостатка времени.

Windows Live - очень интересно было послушать о том, в какую сторону планируется развивать сервисы, подробнее в отчетах.

После конференции больше всего вопросов вызвал Silverlight, я конечно клевый парень, но вызвано это было скорее новизной и недостаточной осведомленностью народа об этой технологии, тем не менее, факт. Cardspace+Silverlight больше всего заинтересовавшие пришедших темы.

Скоро состоится Developers Day, где будут более подробно описаны технические моменты девелоперства на Silverlight. Будьте на связи.

Фото

Регистрация и раздача футболок с лого Silverlight:

Народу пришло немало, считайте сами:

Бойко рассказывает о направлениях развития Live:

Доклад о Windows Server 2008

Виктор Шатохин, какой-то непонятный тип, Сергей Байдачный и Алекандр Бойко - отвечали на вопросы зала:

Кто-то доклад делает:

Сергей Байдачный улыбался весь день, тренированный :)

Всеволод Леонов из Москвы рассказывал об украинизации веб сервисов Microsoft

Еда и тусовка:

Не поймите неправильно(или поймите), но весь день хотел снять с этой девушки футболку, уж больно красивая она (футболка):

Ресурсы касающиеся Silverlight

• Silverlight - основной ресурс с кучей примеров, форумом и всей возможной информацией о Silverlight
• Microsoft Expression Studio - здесь можно скачать и ознакомиться с инфой по продуктам линейки Expression(Blend, Web, Design, Media Encoder), то с помощью чего разрабатываются Silverlight приложения
• Скачать Silverlight для вашего броузера - поддерживаются IE/Firefox Windows, Firefox/Safari Mac OS. После установки Сильверлайт - можно просто посмотреть на эту страничку как пример применения технологии.

Buzz

• Флэш-Потрошитель о конференции "Платформа WEB" - Silverlight, веб-технология от Microsoft: XAML = XAML = XAML (+ первая часть - Платформа Windows Live)
• Платформа WEB ... итоги (Сергей Демьянов)
• Отчет Евгения Некоза
• Отчет Кирилла Юна
• В студенческой газете "Выделенка" от Георгия Леонтьева

Буду рад, да что там, счастлив! Если кто то дополнит своими отчетами(или фотками) - к сожалению мало удалось найти откликов о конференции.

ЗЫ: первый отчет о конференции на которой я был докладчиком, интересное ощущение: совершенно не хочется писать о своем докладе.

Перенос конференции UA Web 4 Oct 2007 4:00 PM (18 years ago)

Уважаемые колеги!

Мы приняли решение перенести первую конференцию украинских веб-разработчиков UA Web с октября 2007 на март 2008 года.

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

Все достигнутые договоренности в силе; все деньги, уже уплаченные за участие в конференции будут по желанию плативших либо возвращены в полном объеме, либо перенесены на март 2008 года.

Спасибо за поддержку!

С уважением,
команда UA Web
Юрий Артюх, Евгений Некоз, Павел Рогожин и Олег Бунин
http://uaweb.in.ua/

Несимметричный фон на центрированном сайте 28 Sep 2007 4:00 PM (18 years ago)

Относительно часто встречаются макеты центрированные по горизонтали, но с уходящими влево и вправо разнымы фоновыми картинками, примерно так.

Делюсь своим способом решения этой задачи.

Конечный результат

Добиваться будем примерно следующего.

Кто понимает код - можно дальше и не читать =)

Центрирование

Вообще классическое центрирование обычно выглядит так: HTML:

1. <body>
2. <div id="out">
3. ...сайт...
4. </div>
5. </body>

CSS:

1. body{text-align:center}
2. #out{
3. width:700px;
4. margin: 0 auto;
5. }

Почему-то все еще часто можно услышать вопросы о центрировании или применении тага CENTER, потому не лишне наверно было упомянуть эту реализацию =)

несимметричный фон

Для реализации придется добавить пустой див(это стыдно и неправильно, да):

1. <body>
2. <div class="stupid-right"></div>
3. <div id="out">
4. ...сайт...
5. ...

и соответствующий этому диву CSS:

1. .stupid-right{
2. position:absolute
3. top:0;
4. right:0;/*правый верхний угол */
5. width:50%;/*половина экрана */
6. height:200px;
7. background:green;
8. }

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

Добавим:

1. #out{
2. position:relative;
3. }

Таким образом мы поменяли их местами "в третьем" измерении, и все выглядит как надо.

В конце

Паттерн до боли простой, если кто-то решал подобную задачу по другому, был бы рад опыту.

• Пример с разными фонами с обеих сторон

Семинар Ратмира Тимашева 12 Jul 2007 4:00 PM (18 years ago)

Вчера побывал на семинаре с Ратмиром Тимашевым.
Некоторые отрывочные запомнившиеся мысли и немного фоток...

Семинар был организован в форме дискуссии-диалога. Юрий Бойко задавал вопросы Ратмиру, и просил о чем то рассказать, позднее Тимашеву стали передавать записки из зала. Вобщем вышло довольно увлекательно.

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

Некоторые запомнившиеся мысли

• "Стартап лучше начинать со своим сокомнатником в общежитии" - все компании Ратмир Тимашев делал вместе со своим институтским другом Андреем Бароновым. Рекомендуется связка предприниматель-технарь.
• "Нет ничего хуже, чем много денег рано" (пословица из силиконовой долины) Это относится к предпринимателям которые ищут инвестиции. Как сказал Ратмир, что бы человек смог заработать миллиард он должен быть "голодным". Именно поэтому так много наших эммигрантов добиваются успеха. Потому большие инвестиции на ранних этапах могут загубить стартап.
• "Для первой версии любого продукта нужно от 3 до 6 месяцев и не более 2-3х программистов." Ратмир неоднократно предостерегал от разработки оторванной от нужд пользователей - "разработки в темной комнате", а так же избыточного функционала. Он всегда настораживается когда проекту необходим год до первой версии - ибо за год и технологии и нужды пользователей могут измениться так что продукт уже никому не будет нужен.
• Менталитеты аутсорсинговых и продуктовых компаний - противоположны, очень трудно вырастить стартап с хорошим software продуктом из аутсорсинговой компании. 1ые компании ориентируются на удовлетворение 100% нужд клиента и избыточный функционал, вторые на удовлетворение большинства нужд пользователей минимумом своего функционала. Так что бросайте вы этот аутсорсинг ;)
• Обычно венчурные капиталисты выкупают 30-40% от компании у владельцев. Просто любопытный факт
• Неденежная(советы и связи) помощь инвесторов гораздо важнее денежной. Потому при выборе VC Ратмир советовал обращать внимание больше на людей, чем на деньги.
• Если ваша компания стоит 1млн, и инвестор вкладывает в вас 500 тысяч, то доля инвестора в компании составит %=500/(500+1000)=33%

Многие мысли почти очевидные, но как жизнь показывает, ничего сложного в ней и не бывает.

Фотки

(Юрий Бойко зачитывает записки с вопросами Ратмиру) (Ратмир "катит бочку" на инвесторов из силиконовой долины)

Благодарности

Мероприятие просто классное! Хочется сказать огромное спасибо Юрию Бойко и компании BayView Innovations. На второй семинар пришло уже в два раза больше людей. И люди все весьма интересные.

Фотографиями со мной поделился хороший человек - Дмитрий Румянцев, за что ему огромное спасибо!

Ссылки

• BayView Innovations здесь вы можете найти всю информацию об этих семинарах
• ABRT Venture Fund инвестиционный фонд Андрея Баронова и Ратмира Тимашева
• "Как стать венчурным капиталистом" - статья о компании Ратмира Тимашева и Андрея Баронова

О маке 30 Jun 2007 4:00 PM (18 years ago)

Мои первые впечатления о маке.

Созерцание компа на столе доставляет просто эстетическое удовольствие. Красивый он.


Но начну с плохого.

Негатив

Не очень понравилась мышка (Mighty Mouse) я как геймер очень тонко к ним отношусь, и после моего Copperhead'а, Mighty странновато как то ездит по материи... Вот мой зверинец на ковре, воин и мирная белая овечка:

Во-вторых: где взять SmartFTP под Mac?(риторический видимо) Все что я пока попробовал вызывает лишь смех. Особенно порадовал один из самых популярных(!) клиентов - вот такой замечательный виджет там существует. Просто создан для веб разработчиков которым наскучило тупо аплоадить файлы :)

Позитив

Монитор вне всяких похвал - просто супер изображение. Не буду приводить ТТХ и бросаться терминами, но мои глаза расплакались от радости и сказали мне спасибо. После моего ноута как бальзам на глаза.

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

Без малейших проблем соединил iMac со своим ноутом и выкачал все что хотел. Удивился.

Textmate - мегаредактор, если в двух словах - то вы можете повесить на хоткей все что можно сделать со стрингом в php, perl, ruby. На этих языках можно описывать свои действия и команды. Всех приятных мелочей в редакторе и не упомнишь, и просто отлично, что при этом они сумели сохранить минимальный дизайн и не превратиться в дримвивер какой-то.
Пока я пишу в этом редакторе, я все время ловлю себя на мысли, что я могу касаться клавиатуры в 2 раза реже чем в notepad++.

Вообще

Общий дух операционки да и компа можно проиллюстрировать на таком условном примере. При копировании кучи файлов, например, выдает не "193 минуты" как в винде, а "около 3х часов". "3 часа" занимает меньше ячеек памяти в мозге чем "193 минуты" =). Тем более и так понятно что "193 минуты" это только "примерно 193 минуты". Это просто частный случай который похож по духу на всю ось(возможно и в винде уже так показывает - но я хочу показать само отношение). Вобщем операционка говорит не то что происходит на самом деле, а то что мне нужно знать об этом. Возможно иногда это нехорошо, но пока просто приятно, что тебя не грузят лишней инфо. Когда то я думал что это ограничение, мне "недоговаривают", но теперь я вижу что это хорошо. Это характерная черта МАК ОС вообще - она более дружелюбна к человеку. Ткаое впечатление.

Общее впечатление

Впечатление очень продуманной и хорошей ОС, в которой я пока правда не нашел свой путь(софт+хоткеи+привычка), под виндой я его вырабатывал полтора года =). Так что если через месяц я смогу успешно верстать и девелопить под маком со скоростью не меньшей чем под виндой - это уже будет мегауспех.

Вобщем - мак это хорошо. =) И даже лучше. После адаптационного периода напишу пост с устоявшимися привычками.
Буду только рад если мак-юзеры поправят мой субьектив - я мог и ошибиться в чем то...

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

Отчет о встрече докладчиков 28 Jun 2007 4:00 PM (18 years ago)

Короткий отчет о том что было и о чем говорилось на встрече.
Народу пришло хоть и немало, но гораздо меньше чем мы рассчитывали - около 35-40 человек. Наверно это немало, хотя судить очень трудно.

О чем говорили

Вкратце план встречи:

1. Я рассказал о том что такое UA WEB (это конференция для вебразработчиков в Украине)
2. Перезнакомились со всеми пришедшими
3. Немного поговорили о будущих секциях и темах которые стоит осветить
4. Коллеги из Москвы рассказали о своем опыте проведения РИТ 2007
5. В неформальной обстановке проводили сок-паузу, общаясь по интересам
6. См. последнее фото

Что решили

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

Во-вторых прояснили какие доклады хотели бы услышать люди, Евгений Шевченко например предложил интересную тему для доклада для которой тут же нашелся докладчик =).

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

Определились с набором секций предстоящей конференции. На данный момент он выглядит так:

• Серверное программирование
• Клиентское программирование
• Бизнес

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

Были выбраны кураторы некоторых секций (люди с которыми вы можете связываться по своим темам докладов, они контролируют непересекаемость тем и подбор докладов)
Секция качество (подсекция клиентского программирования, юзабилити, QA и так далее) Мария Дидьковская (ICQ - 344 577 222)
Секция серверного програмирования - Макс Ищенко. (ischenko(хм)gmail.com)
Секция бизнес - Дмитрий Румянцев(ICQ:22-625-769), Александр Рябцев (alex.riabtsev(хм)gmail.com)

Да и в конце концов просто пообщались, встречу посетили Алексей Мась(который кстати ищет Perl программиста), Евгений Шевченко(организатор ИМУ), Макс Ищенко(автор ресурса developers.org.ua), Олег Бунин и Павел Рогожин (организаторы РИТ-2007), Алексей Колупаев(каптчист) и много других =).

HTML+CSS+HTML+CSS+ ... =MAC! 26 Jun 2007 4:00 PM (18 years ago)

Свершилось. На одну материальную мечту меньше. :) Мой первый настольный ПК.
(формула из тайтла поста - работает, проверено)

Открывать страшно.

Приглашаю всех желающих на встречу докладчиков UA WEB 2007 16 Jun 2007 4:00 PM (18 years ago)

Собираем докладчиков на новую украинскую конференцию посвященную интернет технологиям!

Дамы и господа, коллеги!

27 июня, в Киеве, вечером в 19:00 состоится первое собрание докладчиков первой украинской конференции веб-разработчиков UA Web — 2007 ;)

Ждем всех желающих сделать доклады, а также сомневающихся, сочувствующих и тех, кому не все равно. Задачи на вечер:

• Познакомиться;
• Поделиться общей информацией о конференции (языки, состав, цель);
• Обсудить потенциальную программу - о чем нам было бы интересно поговорить друг с другом;
• Решить вопросы по продолжительности докладов;
• Обсудить имеющийся опыт, как не повторить ошибок;
• Выбрать ответственных за каждую секцию;
• Установить самим себе крайние даты подачи тезисов докладов;
• Сформировать план дальнейших действий.

Встреча пройдет в конференц-зале по адресу пр. Московский 23 а, гипермаркет Сити' ком (3 этаж) (на Петровке, после 20:00 пускать не будут - имейте ввиду)

Контактные телефоны:

• в Киеве, в Украине - Юрий Артюх, ICQ: 296395204, +38 096 970-6428, akella.a@gmail.com
• в Москве, в России - Олег Бунин, ICQ: 55370856, +7 916 635-9584, oleg.bunin@ontico.ru

С уважением,
Оргкомитет UA Web — 2007,
Юрий Артюх, Евгений Некоз, Олег Бунин, Павел Рогожин

Буду рад ответить на любые вопросы(и в комментах, и лично). Учитывая что это событие может стать некоей неожиданностью. =)

Еще один способ вертикального выравнивания в CSS 25 Apr 2007 4:00 PM (18 years ago)

Много копий сломано на ниве вертикального выравнивания без таблиц. Однако недавно я узнал о еще одном более простом способе. Этот пост, перевод статьи уважаемого мною Gunlaug о вертикальном выравнивании без дополнительного HTML и с помощью правда другого зла.
Оригинальная статья: fully centered across browser-land…

Задача

Отцентрировать что-нибудь вертикально внутри какого-либо элемента(экрана например).

Возьмем такой вот HTML:

1. <div id="out">
2. <p id="centered" >...</p>
3. </div>

Будем выравнивать этот абзац текста(с переменной высотой конечно, она зависит от текста). Высота #out не имеет особого значения - но пускай будет к примеру 500px(заведомо больше высоты параграфа).

Для всех современных броузеров(не IE) это достигается двумя простыми строками:

1. #out{
2. height:500px;
3. display:table-cell;
4. vertical-align:middle;
5. }

Только и всего. Теперь нужно это повторить для ИЕ...

IE+expression=нормальный броузер

Для эмуляции будем использовать expression (маленькие кусочки джаваскрипта который можно внедрять в CSS и работают лишь в ИЕ). Вот что сэмулирует нам вертикальное выравнивание в ИЕ для элемента #centered внутри другого элемента:

#centered {
margin-top: expression(((outer.offsetHeight/2)
-parseInt(offsetHeight)/2)  <0 ? "0" : 
(outer.offsetHeight/2)
-(parseInt(offsetHeight)/2) +'px') ;
}

(видно как внутри ЦСС правил для #centered мы получаем его высоту по айдишнику centered.offsetHeight и высоту div#outer) Или если мы выравниваем внутри body:

#centered{
margin-top: expression((
document.documentElement.offsetHeight/2)
-(parseInt(offsetHeight)/2) <0 ? "0" : 
(document.documentElement.offsetHeight/2)
-(parseInt(offsetHeight)/2) +'px') ;

Это правило определяет высоту родительского элемента(или body) и высоту центрируемого элемента - после чего добавляет нужный margin-top для вертикального центрирования элемента.

Был предложен также метод для классов:
margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px")
(parseInt убран для наглядности)

Как это работает

1. document.documentElement.offsetHeight/2
   определяет высоту body и делит ее на 2. Это дает нам отступ ровно в половину высоты экрана
2. -(parseInt(offsetHeight)/2))
   Определяет высоту самого центрируемого блока. Отнятое от высоты родителя дает нам конечный margin-top
3. <0 ? "0" :
   Если полученная разница отрицательная, то отступу присваивается значение 0.
4. <0 ? "0" :
   Если же полученный результат больше либо равен 0, то повторяем вычисления и берем margin-top равный полученному значению для вертикального центрирования

Словами

Что бы понять откуда взялись все эти вычисления. Представьте что наш блок отцентрирован по вертикали внутри другого блока. Вот так:

И теперь нам нужно посчитать расстояние от верха родительского блока - до отцентрированного элемента(x-y). Очевидно для этого нам придется отнять от половины высоты родителя(x), половину высоты отцентрированного(y). Вычисление этого расстояния и происходит в скрипте, после чего оно присваивается в качестве margin-top, что по сути визуально центрирует блок по вертикали.

Конечно это своеобразная дилемма - "3 обертывающих DIV" или "expression", зависит от случая, но как по мне, выбор тут однозначен ;).

Если Вам нужна валидность, да и просто ради красоты, эту строку для IE стоит перенести в отдельный CSS файл(СС), либо каким то образом оградить от других броузеров.

Ссылки

• Оригинал fully centered across browser-land… статья Gunlaug Sørtun про этот прием и центрирование вообще (там же в правой колонке несколько примеров)
• Пример центрирования в блоке
• Пример центрирования на экране
• Пример Gunlaug, для ИЕ там выводятся промежуточные числа вычислений..
• Информация об определении размеров блока на MSDN
• Информация о методе parseInt
• Вариант для классов, а не айди

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

РИТ-2007, Москва 22 Apr 2007 4:00 PM (18 years ago)

Наконец а москве состоялась первая конференция веб профессионалов - РИТ-2007. Короткий(и запоздалый) отчет о ней и второй встрече WSG.

Собрание

На конфу собралось больше 600 человек! Прослушали 80 докладов. Просто необьятное поле знаний на самом деле. Надо сказать что организовано все было просто отлично, и если и были мелкие недочеты, то это давка(а может просто тесное общение?) и одновременное чтение 4х докладов, что порой делало из нас всех буридановых ослов =).

Доклады

Я в основном отсидел доклады по клиентской части, все они были мне интересны с профессиональной точки зрения. Макс Россомахин отлично рассказал о Микроформатах, а затем произошло получасовое живое общение публики с Росcомахиным и Алексеем Рыбаковым. Последний кстати послал всех табличников гореть в аду, чем не слабо прославился :). Да и вообще отлично жог на своем докладе по QA верстки. Так же неплохие доклады вышли у Макеева (CSS management) и Марата Мамяшева(про javascript frameworks).

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

Ну и конечно Игорь Ашманов с пересказом своих правил. Речь вышла отличнейшая, зацепила. Запись уже пошла по инету, вот например его выступление на RuTube. Пожалуй один из лучших докладов на РИТе.

WSG

На конфе по плану состоялась вторая встреча русского крыла WSG. Из членов(WSG) были(кроме меня):

• Вадим Макеев
• Алексей Рыбаков
• Макс Россомахин
• Сергей Мезенцев
• Ольга Алексашенко
• Марат Мамяшев
• Виталий Харисов

И еще много других, кто предложил свою помощь и практически вошел в нашу открытую группу. Обсудили XHTML2, HTML5, что нас ждет в будущем. Одобрили тезис: "Табличная верстка дороже", который незамедлительно подтвердил Макс Лапшин(который кстати ищет верстальщика). Виталий Харисов вышел во второй раз, и разруливал ситуацию с XHTML2, HTML5, и глюками в сафари на яндекс-открытках ;). Вобщем было интересно. Следующая встреча... в питере.(?)

Тусовка ruWSG в комнате докладчиков(pepelsbey, rossomachin, flack, thebits, марат):

Максим Россомахин и Алексей Рыбаков(справа налево) отвечают на вопросы публики:

Свой доклад я не подготовил, но меня все равно засветил pepelsbey :P

А чем вы думали все закончится? )

За часть фото спасибо Марату.

Фотоотчеты

• Сайт конференции - отсюда кстати можно перейти на много фотоотчетов и других отзывов участинков и докладчиков, потому переписывать линки я не стал
• Слайды докладчиков
• Отчет Макса Россомахина
• на cssblast
• Фотки TheBits
• Фотки с WSG meeting

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

Можно ли назвать полезным мероприятие, которое сделало счастливыми порядка 700 человек? Как вы думаете?

(отсюда)

ЗЫ: организаторы планируют провести в конце лета конференцию посвященную высоким нагрузкам. Все желающие могут подписаться на сайте уже сейчас http://rit2007.ru

Печатная версия с Javascript 6 Apr 2007 4:00 PM (18 years ago)

Я всегда знал два подхода к печатным версиям: старого типа - ставим ссылку "печатная версия", пользователь переходит на новую страницу и видит печатную версию этой же страницы, и новый: добавляем css media="print", и только знающие люди могут нажать Print Preview или догадаться распечатать эту страницу. Вот и пришла маленькая идея комбинации лучших сторон этих двух подходов.

Что я хочу

А хочу я, что бы по клику на ссылку "печатная версия" какой то волшебник заменял media="print" на media="screen", и страница преображалась без перезагрузки в печатный вид. Таким образом и пользователь экономит время(хоть и мизерное), и видит сам печатный вид без лазания по меню броузера. Вроде как - все довольны.

HTML

Для примера понадобится страница с печатной версией, это будет что то вроде этой. В head файла добавим print.css два раза для разных медиа:

1. <!--Для собственно принтеров -->
2. <link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
3. <!--Для нашего превью с джаваскриптом -->
4. <link rel="alternate stylesheet" type="text/css" media="screen,projection" href="css/print.css" title="printview" disabled />

Атрибут disabled указан для того что бы в ИЕ эти стили корректно включались и отключались.(см. статью)

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

Javascript

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

Потому я обратился к другой статье(спасибо CB за наводку), где описывается метод буквального отключения CSS Disabling
По сути взял с минимальными изменениями джаваскрипт оттуда, вот что я использовал для решения задачи:

function setPrintCSS(isPrint) {
// Определяем поддержку нужного нам элемента в броузерах
  if (document.getElementsByTagName)
      x = document.getElementsByTagName('link');
  else if (document.all)
      x = document.all.tags('link');
  else
  {
      alert('Простите, этот скрипт не работает в вашем броузере');
      return;
  }
// Пробегая по всем элементам LINK в HTML  - включаем и отключаем нужные нам стили
// идентифицируя их по атрибуту title
// параметр isPrint - отвечает просто за вариант стилей для печти или монитора
  for (var i=0;i<x.length;i++) {
      if(x[i].title == 'printview'){x[i].disabled = !isPrint;}
      if(x[i].title == 'screenview'){x[i].disabled = isPrint;}
  }
}

(немного более логичный нейминг по сравнению с первым вариантом, спасибо CB)
В результате в HTML можно добавить две ссылки вида:

1. <a href="#" onclick="setPrintCSS(false)">Вернуться к стандартному виду</a>
2. <a href="#print" onclick="setPrintCSS(true)">Печатная версия</a>

По клику на которые всё и будет происходить. Вот простой пример этого приема.

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

if(document.location.hash=='#print') setPrintCSS(true);

Смотреть пример с работающим #print.

Ссылки

• Update: Пример с переработанным кодом, теперь работает #print, сам пример и печатная версия(в адрес добавлено #print)
• Мой пример
• Пример из апдейта(см. ниже)
• Статья PPK
• Второй пример
• Print to Preview - статья с похожей идеей на алистапарте

Для красоты в media=screen я скрываю ссылку переключения в обычный вид, а в печатной версии соответствующую ссылку на печатную версию.

В конце

Вот такой маленький приемчик - иногда может быть довольно приятным, да и наконец позволяет более явно использовать нам наши CSS для принтеров. А то бывает пишешь-пишешь эти стили.. А они скопируют в ворд и распечатают по привычке =) Кстати многие любят читать печатные версии на сайтах, что бы ничего не мешало - а таким образом мы ускоряем им это переключение. Вдобавок, можно давать одинаковые тайтлы нескольким ЦСС файлам и они будут отключены все разом. Буду рад услышать Ваши мысли, критику, приемы по этому поводу!

Обновлено: Спасибо Vladson за второй способ быстрой замены стилей, чуть менее абстрактный, но иногда возможно оптимальный. Задаем параметр id для элемента link(например main-css), и тогда

1. <a href="#" onclick="document.getElementById('main-css').href = 'css/base.css'">Вернуться к стандартному виду</a>
2. <a href="#" onclick="document.getElementById('main-css').href = 'css/print.css'">Печатная версия</a>

Оба споосба еще нуждаются в тестировании - но под виндой работают под всеми броузерами. А последний и под Konqueror.

London, Designertopia 2007 27 Mar 2007 4:00 PM (18 years ago)

Так уж сложились обстоятельства, что я стал участником этой конференции в Лондоне. Проходила она Marriot Hotel, симпатичной гостинице недалеко от Гайд парка . Впечатлений осталась масса, гуси, красные автобусы, ноутбуки на полу. (лучше поздний отчет чем никакого =))

Конференция

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

Microsoft наступает

Конференция началась со вступительной речи Эрика Зокера(человек отетственный за всю линейку expression). Разговор как водится зашел издалека. Начали с извечного конфликта дизайнера и программиста. Имеется ввиду, что делая GUI, программист часто перевирает дизайн(и никакой управы на него нет! ). Как логичное решение предлагается XAML(читается «кзамл») – формат на базе XML предназначенный для описания дизайна интерфейсов, который должен стать тем самым языком общения дизайнера и разработчика. Но не руками же писать дизайнеру XAML! Для этого и предназначается линейка Expression.

Каждый из продуктов предназначен для четко очерченной задачи, так: Expression Design – для дизайнера, здесь он рисует дизайн и(может) экспортирует его в XAML, Expression Web – программист-верстальщик, Expression Blend – продукт для программиста, сюда экспортируется XAML дизайнера, и в визуальном редакторе легко применяется точный дизайнерский стиль. Если пытаться строить аналогии то: Expression Web – Dreamweaver, Expression Design – Photoshop, Expression Blend – Macromedia Flash MX.

Далее Эрик плавно перешел к козырям Microsoft – технологии WPF/E. По сути мобильная версия уже известной WPF. Грубо говоря, некий аналог Flash. Это как раз тот продукт который получается в Blend. На данный момент свойства флэша эмулируются джаваскриптом. Для просмотра «WPF/E-роликов» необходимо устанавливать плагин – пока что есть версии для IE и Firefox под Win, и для Firefox и Safari под Mac.(1.1Mb)

Хотя сейчас принято сравнивать фичи WPF/E с уровнем всего 5й версии Flash, но достигнуты то эти результаты были всего за полтора месяца. (первая CTP WPF/E появилась в декабре 2006) Потому следует ждать на рынке еще одного серьезного «конкурента» Flash.

Подробнее о XAML и WPF/E можно почитать тут:

• Пример WPF/E приложения
• Здесь можно установить плагин для броузера(1.1Mb)
• Отзыв О ранней бете WPF/E
• Официальный сайт XAML
• Сайт с примерами WPF/E
• Официальная страничка линейки продуктов Expression
• Статья на Xakep о WPF/E

Что интересно, помогал Эрику со слайдами бывший продакт менеджер Macromedia Flash. =) Есть еще в этой линейке Expression Design – но это софт для умной каталогизации дизайнов-портфолио-фотографий, и лишь очень косвенно касается веба.

Примеры WPF

Самым интересным было пощупать новую технологию. Вообще говоря WPF изначально была доступна лишь для Windows XP SP2, Vista, 2003. Но WPF/E (WPF/Everywhere) мобильная версия WPF, слегка урезана в возможностях (нет поддержки 3d) и использует Javascript+XAML. Зато мы получили работу в основных броузерах под Mac и Win платформами. На вопрос о версии для Linux, Эрик ответил, что если они ощутят востребованность технологии этими пользователями, то такая версия обязательно появится. И никаких преград на данный момент они не видят.

Больше всего мне понравился «New York Times Reader», пример применения WPF,удачный дизайн сочетается с классной интерактивностью и множеством удобных фич. Им попросту приятно пользоваться. Советую попробовать – по сути это RSS-ридер для New York Times, но какой! Вот пара скриншотов, жалкое подобие реальной красоты:
Это главная страница темы «Technology »:

А это просмотр статьи:

По статистике пользователи проводят в 10 (!) раз больше времени читая новости через это приложение – чем на обычном HTML сайте.

Так же было приведено несколько других примеров применения WPF, в основном это была красивая визуализация разных сложных данных, по сути первые решения призванные помочь второй волне разработчиков. Например рассказали о приложении «Лондонское метро», онлайновой визуализации движения поездов, а так же некоторой информации о каждой станции метро. Поезда действительно в онлайне двигались. (хотя нам показали только видеоролик работы с приложением)

Схема позволяла переключиться из схематического вида к реалистичной схеме метро в 3D:

На фотке как раз взгляд на реальную трехмерную карту метро «из под земли» с ползущими по ней поездами – зал в этот момент замер.

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

На некоторых сессиях просто не хватало мест:

Грубо говоря оставляет впечатление флэша с активным использованием внешних источников информации(онлайновых или оффлайновых)

Expression Web

Так же весьма непривычно было слушать доклад об Expression Web(Jeff King) – в каком то смысле наследник Frontpage. Но наследник только по задачам. На этот раз вебстандарты играют очень важную роль, редактор обладает всеми стандартными фичами которе могут понадобиться для редактирования HTML, CSS и т. п. Среди прочих приятных неочевидных мелочей можно упомянуть:

• Встроенные доктайпы
• Встроенные шаблоны с готовыми CSS лейаутами
• Удобное(хотя и генерирующее порой кучу мусорного кода) визуальное редактирование
• Удобная работа с CSS – редактор распарсивает все селекторы из CSS файла и представляет их в удобном виде. Вдобавок радуют поразительные drag&drop – например если перетащить из файлового окошка .css файл внутрь .html файла – то редактор сгенерирует элемент и в итоге корректно вставит .css файл. Мелочь, а приятно.(или я отстал от жизни?)
• Валидация документов на лету
• Умное сжатие CSS – автоматически сжимает правила согласно сокращениям в CSS(padding:2px 3px 4px 5px;) и прочие приятные мелочи
• У меня грузится быстрее чем Dreamweaver

И это только те что сам успел заметить – на самом деле продукт действительно заслуживает внимания. И хотя сделан в Microsoft :) скорее всего наиболее вебстандартизированный из всех больших пакетов на рынке на сегодняшний день. Продукт предназначен для кодеров прежде всего, но присутствует и интеграция с ASP(можно вставлять контролы оттуда)

Для меня конечно основным недостатком таких программ служит тяжеловесность(старт несколько секунд) и трудность обнаружения многих полезных фич. Но для долгого использования в промышленных масштабах лучше не придумаешь.

Будущее

Последним докладчиком(не по интересности) стал Ray Hammond. По иронии, этот футуролог был единственым, кто не отвлекал нас красивыми эффектами на экране. Он использовал лишь своё красноречие. Однако по все той же иронии доклад его вышел наиболее захватывающим и интересным. Этот человек завладел аудиторией полностью. В выступлении он прошелся по всей истории человечества, и попытался заглянуть и предсказать направления развития человечества.

По его словам уже через лет 30 у каждого из нас будет маленький “друг”, он же мобильный телефон, интернет броузер, GPS устройство, кредитная карточка и все все все. Друга он посоветовал называть именем жены, дабы избежать возможных конфузов.

Примерно в то же время компьютеры наконец станут умнее людей. На опасения публики, Рэй ответил, что считает их полным отражением деятельности человека, и потому неспособных навредить а приори.

В конце доклада он прикинулся что пришел к нам из 2056 года со своим “другом” Марией. Как я понял это уже был отрывок из одной из его книг - а он писатель фантаст кстати.

Одна из его идей о будущем может быть полезна всем. Рэй считает что в ближайшее время разрастется рынок продажи бизнес информации. В пример он привел решение некоторых проблем с лондонским метро(бюджет более 100млн $). Если бы команда решавшая эти проблемы задокументировала все свои шаги, ошибки, удачные решения, итог проекта. То в результате такая информация могла бы стоить десятки миллионов долларов для похожих проектов в Нью Йорке например. И все равно все компании остались бы в выигрыше. Загововорил он об этом, потому что с развитием технологий цена на ведение такой документации стремительно падает.

Впечатления вообще

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

Постарался ничего важного не потерять, потому считайте что сэкономили пару тасяч баксов прочитав это ;)

Другие отчеты

• Все фотографии (и в том числе мои)
• Отчет Бена Холла
• Еще один отчет
• В деталях первый день и второй день

ЗЫ: вот бы и сюда попасть... Эх...

ЗЫЫ: пускай отчет получился слегка запоздалым, но это на самом деле важная победа над собой, я его сделал )

Колонки "одинаковой" высоты с разделителем 23 Feb 2007 3:00 PM (18 years ago)

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

Ситуация

Метод этот простой, и слово метод даже слишком сильное. Мелкий трюк возникший при верстке вот такого макета: Где не было известно в какой из колонок будет больше текста, а разделитель должен был быть по высоте максимально длинной колонки.

Самым очевидным решением было бы обернуть эти колонки в какой то div, и для этого дива правильно спозиционировать фоновый однопиксельный рисунок ("повторить" рисунок по вертикали). Так сейчас решена идентичная проблема на сайте "A list apart". Решение было описано в статье Faux columns (и я когда то писал об этом).

Однако, делать для этого картинку мне было лень.

border + margin

HTML был примерно такой:

1. <div id="c1">
2. тут контент
3. </div>
5. <div id="c2">
6. тут контент
7. </div>

Самый простой CSS, для того что бы колонки встали одна за другой:

1. #c1, #c2{
2. float:left;
3. width:281px;/*не имеет значения =)*/
4. }

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

1. #c1{border-right:1px solid #ccc}
2. #c2{border-left:1px solid #ccc}

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

1. #c2{
2. margin-left:-1px
3. }

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

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

Можно сразу же развить этот метод и на три колонки, вот что получается:

• Для трех колонок - интересно что разделители получаются - "умными", то есть они разделяют не до самого низу всю страницу, а разделяют только колонки. (можно поиграться с длиной колонок, что бы увидеть эффект)
• background вместо border - просто заменяем border на background, и выставляем margin-left равный ширине фоновой картинки.

В конце

Метод, конечно, до боли простой, но избавил от лишнего открытия фотошопа, да и сервер от лишнего миллиона ХТТП запросов, а это немало. :). Вдобавок при изменении ширины колонок, нам больше не нужно изменять параллельно и позицию фоновой картинки как в универсальном методе. И я уверен кто-то уже давно бессознательно пользовался приемом. По использованию отрицательных полей, он напоминает мой недавний пост про "Разделители в меню". Надеюсь это кому-то упростит жизнь так же как и мне.

Буду рад услышать Ваши мысли, советы и рекомендации!

Лондон 3 Feb 2007 3:00 PM (18 years ago)

Несколько вещей удививших меня в Лондоне:

• Вежливость водителей, уступающих дорогу, даже если охота постоять на перекрестке
• Кол-во аудио дисков в магазине просто неприличное, на каждую букву все исполнители со всеми альбомами - нельзя же так жестоко со мной!
• Красных автобусов больше чем машин, и даже больше чем людей местами. Мешают фотографировать здания
• Пабы в маленьких пустынных улочках - незабываемо разные и классные
• Гуси-беспредельщики в Гайд парке (см. ниже)

(не бейте за очевидные - я первый раз за границей) О причинах и других впечатлениях подробнее скоро...

cssing 2006 27 Dec 2006 3:00 PM (18 years ago)

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

• CSS для непослушных броузеров Несколько простых и сложных CSS хаков, которые порой могут сильно облегчить жизнь кодеру.
• Простой тултип или всплывающая подсказка Простой способ создать с помощью CSS подсказку для ссылок. Код. Примеры. И в будущем, видимо, unobtrusive скрипт для их автоматического создания.
• Некоторые техники замены текста картинками (image replacement) Обзор нескольких способов типичной замены текста на картинки.
• Графики Один из вариантов представления сложных данных в виде графиков с легкой CSS magic.
• Дротики - офисный релакс То чем мы развлекаемся нынче в офисе :). Успокаивает. Картонная мишень и дротики и поныне стоят на своем месте. Небольшой тюториал по созданию дартс из офисных принадлежностей.
• Идея раздвижных дверей в CSS Мое применение идеи раздвижных дверей. И посильное ее пояснение. Красивая идея, как и все красивые идеи, может легко найти свои применения не только в CSS.
• Изменяемые размеры шрифтов Способ создания страничек с изменяемыми размерами шрифтов(в ИЕ конечно), которым я постоянно пользуюсь. Рекомендую и Вам.
• Первая встреча русских вебстандартистов. Москва Таки состоялось историческое событие. Мы встретились в Москве. Доклады, присутствующие и небольшой фотоотчет.
• Разделители в меню Изящная идея реализации разделителей в меню с помощью свойства overflow.
• Меню на z-index Римейк меню двухлетней давности с той же самой идеей. Использование z-index для перекрывающихся пунктов навигации.
• CSS, UTF и Интернет эксплорер Глюк с разными кодировками в CSS и HTML файлах(для IE конечно). Пост-предостережение - не напарываться.

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

А ведь хороший год был! :) А какой следующий будет... Ух!

Счастливых праздников!
С наступающим Всех!

CSS, UTF и Интернет эксплорер 22 Dec 2006 3:00 PM (18 years ago)

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

Ответа в инете не нашел

Наверняка многие на него напарывались - но внятного ответа от гугла мне получить не удалось - потому я решил для экономии времени читателей озвучить этот гадкий и противный глюк. По незнанию такого глюка отладка может быть длительной. Глюк проявляется только в версиях интернет эксплорера 5.0-6.0

Типичная ситуация для бага

Вы верстаете сайт. Кодировка ваших CSS файлов по умолчанию выставлена windows-1251. После чего верстка попадает в реализацию, где она прикручивается к движку(в движке HTML отдается как UTF-8). Однако оказывается, что в ИЕ6 и ниже, сайт сильно расползается и часть CSS не работает. Причина - русские комментарии в CSS.

Пример

Для примера я создал CSS файл с русскими комментариями в кодировке windows-1251:

1. /*Русский комментарий*/
2. #content{
3. color:#fff;
4. background:#000;
5. }

И две HTML странички(страничка в windows-1251 и страничка в UTF-8), отличающиеся лишь метатагами

1. <meta http-equiv="content-type" content="text/html; charset=utf-8">

И

1. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

Обе странички ссылаются на один и тот же CSS файл. В результате в ИЕ6 и ниже, CSS на страничке с кодировкой UTF не срабатывает. Все из-за русских комментариев.

Решение

Есть несколько путей:

• Удалить русские комментарии из CSS
• Поменять кодировку CSS файла на UTF-8

Но лучше никогда не использовать кириллицу для комментирования CSS файлов. Мало ли к чему там будут прикручивать потом вашу верстку... а кодировку CSS файлов догадаются поменять в последнюю очередь.

Суть бага в том, что при наличии русского комментария(UTF кодировка страницы переносится и на CSS), IE сьедает символ закрытия комментария, в результате весь CSS после русских букв оказывается так же закомментированным. В IE7 этот "баг" не проявляется. Примеры смотреть в IE 6 и ниже.

Ссылки

• Страничка и CSS файл в кодировке windows-1251
• Страничка в кодировке UTF-8, CSS файл в кодировке windows-1251
• Страничка в кодировке UTF-8, CSS файл в кодировке windows-1251 без русских комментариев

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

Меню на z-index 15 Nov 2006 3:00 PM (18 years ago)

Больше чем два года назад(ужас) реализовывал свою идею меню, когда определенные пункты отображаются "впереди" всех остальных. Сейчас пришлось использовать идею повторно. Вот это меню в oldschool дизайне:

Идея

Идея тогда состояла в том, что бы впику методам моих гуру, у которых пересечение реализовывалось сложной логикой отрисовки картинок, сделать это при помощи простой отрисовки картинок, но с использоавнием свойства z-index, позволяющего как бы менять местами последовательность отображения блоков. То есть оставлять какой-то блок позади других. Свойcтво это по логике вещей как нельзя лучше подходит для данного случая, имхо.

Вобщем о том как CSS в очередной раз спас мне жизнь :) пошагово и пойдет дальше рассказ.

HTML

Очевидный список:

1. <ul id="nav">
2. <li><a id="n1" ...>Вакансии</a></li>
3. <li><a id="n2"...>Резюме</a></li>
4. ...
5. <li><a id="n6" ...>Советы</a></li>
6. </ul>

Проще некуда. id нужны так как каждый элемент навигации мы заменяем на картинку, потому нам нужно их различать.

Картинка

Для меню я буду использовать вот такую картинку: Как видно - в ней хранятся все пункты меню, вдобавок они же - но в положении "здесь" и :hover.(синие). Так же в отличие от техники которая меня вдохновила два года назад - картинки не пересекаются между собой - что заметно упрощает их отрисовку, в отличие от этого варианта.

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

CSS

Ну а теперь начинается самое интересное. z-index работает в ИЕ только для абсолютно позиционируемых элементов - это накладывает некоторые лишние правила на технику - которые я считаю ее основным недостатком. Но начнем с элементарных правил:

1. #nav a{
2. display:block;
3. width:159px;/*почти все пункты одинаковые у меня - но для двух я задаю отдельную ширину*/
4. height:25px;
5. background:transparent url(nav.gif) no-repeat 0 0;
6. position:absolute;
7. z-index:45
8. }

(я опустил технику замены текста внутри ссылок на картинки, для простоты)

Координаты каждого пункта(мы вынуждены их задавать, так как я хочу использовать z-index, а значит пункты должны быть с position:absolute), так что бы они пересекались так, как нам кажется красивым:

1. #n1{left:0}
2. ...
3. #n5{left:533px}
4. #n6{left:680px;}

Пункты навигации теперь расположены где надо, дело за фоновыми картинками...

Выше для каждого пункта (#nav a) мы уже указали фоновую картинку nav.gif, все что нужно теперь - указать координаты ее сдвига для каждого пункта меню, тут понадобятся рассчеты:

1. a#n1{background-position:0 0}
2. a#n1:hover, .a1 a#n1{background-position: 0 -25px}
3. a#n2{background-position:-159px 0}/*фон для 2го пункта положения "покоя"*/
4. a#n2:hover, .a2 a#n2{background-position:-159px -25px}/*фон для 2го пункта положения "здесь" и "hover"*/
5. ...
6. a#n6{background-position:-772px 0}
7. a#n6:hover, .a6 a#n6{background-position:-772px -25px}

a#n6 - собственно фон для 6го пункта навигации, для этого как видно надо сдвинуть наш фон на 772 пиксела влево. a#n6:hover и .a6 a#n6 - положение фоновой картинки при наведенной мыши, и в положении "здесь".

z-index для положения при наведенной мыши:

1. #nav a:hover{z-index:50}

Я задаю z-index:50(>45) что бы при наведении мыши пункты отображались поверх соседних - как бы всплывали из-за них. CSS для сигнализации "я здесь":

1. .a1 #n1, .a2 #n2, .a3 #n3, .a4 #n4, .a5 #n5, .a6 #n6{z-index:55}

Теперь нам достаточно менять класс для UL на a1,..,a6 и при этом будут подсвечиваться соответствующие пункты навигации, более того, так как z-index мы им задаем 55, то есть больше чем 50 и 45, то они будут отображаться еще и перед соседними пунктами(и даже перед соседними наведенными пунктами). Что и приносит собсно тот эффект ради которого это все и придумывалось. Полюбуйтесь этим меню в действии

Картинки конечно не ахти ) но это то с чем мне пришлось работать, к сожалению. Мечтаю уже два года отрисовать для этой идеи stunning картинки.) Жаль я не Дидье.

В конце

• Пример меню и чуть более навороченное
• Пример моего с той же идеей двухлетней давности
• "Навигация по-русски" - мой пост двухлетней давности про эту идею

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

Вообще такие сложности с position:absolute мне были нужны только для поддержки ИЕ5.0 5.5, если их поддержка вам не нужна, можно легко обойтись комбинацией margin-left:-10px;position:relative c соответствующими изменениями z-index для подсвеченных пунктов. Прямо как поступил Александр Шабуневич в своей красивой теме для PMA.

Разделители в меню 4 Nov 2006 3:00 PM (18 years ago)

Довольно часто на практике встречаются меню с разделителями - например:

О том как сделать такое меню с минимумом правильного HTML кода и пойдет дальше речь.

HTML

Очевидным HTML для подобных конструкций служит ненумерованный список UL, вот например такой:

1. <ul id="nav">
2. <li><a href="#">Главная</a></li>
3. <li><a href="#">Новости</a></li>
4. <li><a href="#">Каталог</a></li>
5. <li><a href="#">Рейтинг</a></li>
6. </ul>

Конечно если бы мы тупо и цинично рубили бабло © мы могли бы написать что то вроде:

1. <a href="#">Главная</a> | <a href="#">Новости</a> | <a href="#">Каталог</a> | <a href="#">Рейтинг</a>

Но по причине совсем не циничной рубки (© Flack), а так же истокам проблемы с этим меню, и вдобавок семантики кода так лучше не поступать.

Как обычно делалось

Обычно для получения результата - то есть меню с вертикальными разделителями, приходилось задавать левую (или правую) границу для каждого элемента(здесь я опускаю код позиционирующий меню, он есть в примерах):

1. #nav li{border-left:1px solid #000}

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

1. <ul id="nav">
2. <li class="first"><a href="#">Главная</a></li>
3. ...

И потом добавлением правила:

1. #nav li.first{border:none}

И все вроде бы работает как надо. Но. Оба эти подхода(с class="first" и с текстовыми разделителями "|") требуют от нас несимметричной генерации элементов - надо различать первый и все остальные LI.

Проблема(лень)

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

Решение

Идея простая как 5 копеек. Вот весь код:

1. #nav{
2. overflow:hidden;/* что бы UL растянулся до содержимых float во всех броузерах кроме ИЕ, а так же для нашего "обрезания"*/
3. width:100%;/* что бы UL растянулся до содержимого в ИЕ, к самому трюку имеет косвенное отношение*/
4. }
5. #nav li{
6. margin-left:-1px;/*сдвигаем все элементы влево*/
7. }

Суть такова. Задаем overflow:hidden для UL - таким образом все что выходит за пределы блока UL отображаться не будет. Затем задаем margin-left:-1px для всех элементов списка, то есть первый элемент выйдет на 1 пиксель за пределы элемента UL, но это как раз и будет тот лишний злополучный первый разделитель! Все же остальные разделители останутся в деле - так как не выйдут за пределы блока. А первый будет скрыт. В результате получим: Смотреть пример

Идея

Эта же идея только с заменой на border-top и margin-top:-1px сработает и для таких меню: Смотреть пример Более того такой прием можно применять и для графических разделителей. Будь они даже потолще одного пиксела - просто придётся задавать больший отрицателый отступ для элементов списка. Таким образом это работает и для разделителей в виде картинки.

В конце

Хотя прием и довольно узкоприменимый, но мне сэкономил время, да и идея мне понравилась. Тестировалось и работает во всех моих виндошных браузерах(IE5-7, FF, Opera). Думаю работает везде.

• Рабочий пример для горизонтальных разделителей
• Рабочий пример для вертикальных разделителей
• "Навигация по-русски" - пост двухлетней давности про эту идею

Буду рад услышать Ваше мнение или приемы которые вы используете!

Первая встреча русских вебстандартистов. Москва 29 Oct 2006 3:00 PM (18 years ago)

Наконец-то состоялась первая встреча русских веб-стандартистов в Москве. Надеюсь это станет традицией :). Далее небольшой отчет.

Организация и присутствующие

Отдельное спасибо за организацию хотелось бы сказать pepelsbey'у. На встрече присутствовали следующие личности: Вадим "pepelsbey" Макеев, Алексей "Flack" Рыбаков, Сергей "TheBits" Мезенцев, Александр "uggallery" Исаков, Марат “MT” Таналин, Марат Мамяшев, Ольга Алексашенко, виртуально Максим Россомахин ну и я.

Доклады

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

Про ASP (от Сергея Мезенцева): услышали историю, новые возможности ASP.NET, посетовали на потуги исключить верстальщика из цикла создания сайта..

Про jQuery и других (от Марата Мамяшева из cssblast.ru): на пальцах рассказал о возможностях, применении, тут же показав примеры использования двух джаваскриптовых фреймворков, настолько просто что даже я приехав не удержался и начал использовать в работе. За что ему отдельное спасибо. Было действительно интересно.

Про Типографику (от Александра "uggallery" Исакова): очень интересный доклад про русские(и не только) шрифты, их историю, и способы правильного употребления и еще много интересного. (этот доклад мне к сожалению не удалось дослушать до конца - не хватило времени...:()
Далее несколько фото(событие проходило в законспирированной квартире с несколькими кофе-ти-брейками):
(за фото спасибо uggallery)

Сергей Мезенцев рассказывает про то какая крутая новая ASP:


Доклад Марата Мамяшева о библиотеках javascript(видно один из пальцев на которых он нам все это обьяснил :) ):

Доклад Александра "uggallery" Исакова о типографике:

Обсуждение структуры сайта русского WSG:

• Доклад Александра Исакова
• Отчет на Вебмасконе
• Фотки с подписями смотрите в фликер аккаунте русского WSG сообщества.

В целом

Было круто. ) Была отличная атмосфера и такие вещи надо повторять.

И вот что интересно, есть ли украинцы желающие участвовать в подобных мероприятиях? Делиться опытом и знакомиться с коллегами и просто интересными людьми из смежных областей.
И вообще что думаете про подобные мероприятия? (не только украинцы)