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

19 December, 2008

Общие, тусовка

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

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

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

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

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

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

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

base64 в массы

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

Недостатки mhtml

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

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

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

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

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

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

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

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

Тестов было гораздо больше, и в конце много советов. Из тех которые стоит повторить: верстайте обязательно с учетом будущих анимаций. Используйте 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 December, 2008

Ну вот ты всё и рассказал. Теперь и писать не о чем ))

Platosha | 2. 19 December, 2008

Ну прямо. Можно ещё рассказать про первый день. К примеру, про декоратор картинок Ictinus Сергея Чикуенка.

spawn | 3. 19 December, 2008

это не бегемотики, этож мумий-тролли =)

akella | 4. 19 December, 2008

@Platosha: я ведь и про второй-то, не весь еще рассказал…
Так что, Михаил, не отмазывайтесь :-P

@spawn: точно! я так и знал что узнаю кого-то не того!=)

kizu | 5. 19 December, 2008

Спасибо за отчёт, только в абзаце где «Медицинская тема в дебаггинге» забыли закрыть спан, из-за чего опера выдает примерно такое:
http://i.kizu.ru/trash/screens/screen-2008-12-19-12-13-4.png
:)

Mourner | 6. 19 December, 2008

Эх. А я бы поехал, если бы меня пригласили докладчиком. :) А так мотивации не хватило.

Виталий | 7. 19 December, 2008

Интересный материал. Может быть есть видео с конференции?

Zigzag | 8. 19 December, 2008

>> Используйте alphaimageloader не только для прозрачных PNG, но и для повышения производительности ИЕ при работе с обычными картинками.

с этого места подробнее, плз.

denisx | 9. 19 December, 2008

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

Cinic | 10. 19 December, 2008

@Zigzag, как сказал Чикуёнок, “увеличивается производительность ИЕ, но сжирается память компа”. Хм, что-то я мало запомнилиз того что говорил Сергей :(
Так что видимо тут стоит подумать.

sunnybear | 11. 24 December, 2008

Про память для AlphaImageLoader говорил уже я, имея в виду (еще не готовый к тому моменту) перевод
http://webo.in/articles/habrahabr/75-png-alphaimageloader/

slesar | 12. 29 December, 2008

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

akella | 13. 30 December, 2008

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

Влада | 14. 28 January, 2009

а есть видео конференции?

cinic | 15. 29 January, 2009

Вообще прошлогодние видео я смотрел тут http://ru-net.tv/events/ (я не думаю что akella будет сильно ругаться за линк в комменте)
А вот видео с этой конференции, я не знаю где :)

Михаил | 16. 2 February, 2009

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

cinic | 17. 2 February, 2009

Я нашел видео-файлы в вебинаре, заходишь в вебинар с профиклаба и есть возможность скачивать видео.

Михаил | 18. 2 February, 2009

Про вебинар я думал, но почему-то не раскопал.

Юрко | 19. 18 February, 2009

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

Оставить комментарий