Clienttech, 15-16 декабря, Москва

19 Dec, 2008

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

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

Наталья Арефьева поделилась коллекцией свежих багов из её опыта работы в компании 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.: за часть фото (те на которых что-то видно) спасибо Михаилу Баранову!

19 комментариев к “Clienttech, 15-16 декабря, Москва”

1.Михаил | 19 Dec, 2008
Ну вот ты всё и рассказал. Теперь и писать не о чем ))
2.Platosha | 19 Dec, 2008
Ну прямо. Можно ещё рассказать про первый день. К примеру, про декоратор картинок Ictinus Сергея Чикуенка.
3.spawn | 19 Dec, 2008
это не бегемотики, этож мумий-тролли =)
4.akella | 19 Dec, 2008
@Platosha: я ведь и про второй-то, не весь еще рассказал... Так что, Михаил, не отмазывайтесь :-P @spawn: точно! я так и знал что узнаю кого-то не того!=)
5.kizu | 19 Dec, 2008
Спасибо за отчёт, только в абзаце где «Медицинская тема в дебаггинге» забыли закрыть спан, из-за чего опера выдает примерно такое: http://i.kizu.ru/trash/screens/screen-2008-12-19-12-13-4.png :)
6.Mourner | 19 Dec, 2008
Эх. А я бы поехал, если бы меня пригласили докладчиком. :) А так мотивации не хватило.
7.Виталий | 19 Dec, 2008
Интересный материал. Может быть есть видео с конференции?
8.Zigzag | 19 Dec, 2008
>> Используйте alphaimageloader не только для прозрачных PNG, но и для повышения производительности ИЕ при работе с обычными картинками. с этого места подробнее, плз.
9.denisx | 19 Dec, 2008
людей мало, материалы на диске не выдали, люди выступали не подготовленные (некоторые). материала мало для выступлений. а вот времени для обсуждения можно было сделать больше. поговорить же надо... :)
10.Cinic | 19 Dec, 2008
@Zigzag, как сказал Чикуёнок, "увеличивается производительность ИЕ, но сжирается память компа". Хм, что-то я мало запомнилиз того что говорил Сергей :( Так что видимо тут стоит подумать.
11.sunnybear | 24 Dec, 2008
Про память для AlphaImageLoader говорил уже я, имея в виду (еще не готовый к тому моменту) перевод http://webo.in/articles/habrahabr/75-png-alphaimageloader/
12.slesar | 29 Dec, 2008
Про слайсы в ИЕ8. Я не совсем догоняю как это работает. Важны только имена классов или структура элементов тоже? Ведь логически правильнее это сделать на
13.akella | 30 Dec, 2008
Важна иерархия классов, сами таги не так важны как вложенность классов.
14.Влада | 28 Jan, 2009
а есть видео конференции?
15.cinic | 29 Jan, 2009
Вообще прошлогодние видео я смотрел тут http://ru-net.tv/events/ (я не думаю что akella будет сильно ругаться за линк в комменте) А вот видео с этой конференции, я не знаю где :)
16.Михаил | 02 Feb, 2009
Товарищи из ProfyClub сказали мне сегодня, что видео таки будет выложено в сеть. Но вот когда именно — этого они даже примерно не знают.
17.cinic | 02 Feb, 2009
Я нашел видео-файлы в вебинаре, заходишь в вебинар с профиклаба и есть возможность скачивать видео.
18.Михаил | 02 Feb, 2009
Про вебинар я думал, но почему-то не раскопал.
19.Юрко | 18 Feb, 2009
Вы тут непонятно чем занимаетесь, а батареи уже холодные. Энергетический кризис, а не только финансовый. Вам лишь бы хиханьки-хаханьки. Автор, выйди к народу!