Спонсорами мероприятия выступили Opera Software, LOVATA Group, Mail.RU Group, Интернет-магазин OZ.by, Active Technologies, Atlant Telecom, Работа.TUT.BY, IT.TUT.BY, Факультет переподготовки специалистов СПбГПУ. В рамках конференции своим опытом поделились веб-разработчики из Минска, Киева, Харькова, Санкт-Петербурга и Москвы. Были затронуты темы, которые касались разработки под мобильные устройства, создание анимации для веб, практического применения БЭМ, редактирования html в браузере и других возможностей.

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

Программа мероприятия

• Adobe Edge. Веб-анимация по стандартам. Андрей Головнев (Презентация) (Pacman)
• Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать. Игорь Зенич (Презентация)
• Мухи отдельно, котлеты отдельно: Conditional Comments, Conditional CSS, Modernizr, CSS Conditional Rules. Павел Ловцевич
• CSS3 Media Queries: легкость превращений. Артемий Ломов (Презентация)
• Прокрустовы окна. Как вписаться в устройство с минимальными потерями. Вадим Макеев (Презентация)
• Редактирование HTML в браузере. Как должно быть, как есть, и зачем это вообще нужно. Антон Немцев
• БЭМ. Реальный опыт двух компаний Mail.ru и hh.ru. Андрей Сумин
• Быстрая разработка. Краткий обзор средств для работы с кодом из консоли. Максим Червонный
• Презентация услуги CloudServer — облачного хостинга Active Technologies. Андрей Купченко

После вступительного слова организаторов настал черед докладов, и Андрей Головнев открыл конференцию с презентацией о создании веб-анимации с помощью инструмента Adobe Edge. Судя по опросу в зале, еще совсем немного людей знакомы с инструментом, не смотря на активную рекламную кампанию Adobe. Андрей рассказал о истории возникновения программы и ее возможностях, а также продемонстрировал прямо на сцене процесс создания простейшей анимации в Adobe Edge. После ответов на вопросы были показаны примеры уже готовых анимаций, среди них был также легендарный Pacman, созданный с помощью Adobe Edge.

Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать.

Как и неделю назад в Киеве доклад Игоря Зенича был ориентирован больше на тимлидов и менеджеров, но в этот раз уже на белорусских тимлидов и менеджеров, которые теперь смогут распознать что можно отдавать клиенту, а что нужно переделывать. Игорь подробно описал весь процесс проверки и тестирования верстки прежде чем она будет использована в «боевых» условиях. За основу презентации была взята статья, опубликованная Игорем на Хабрахабр в феврале этого года. Я уверен, что этот доклад и статья Игоря еще долгое время будут оставаться актуальным источником информации о тестировании и проверке верстки.

Мухи отдельно, котлеты отдельно: Conditional Comments, Conditional CSS, Modernizr, CSS Conditional Rules.

Павел Ловцевичначал свой доклад с демонстрации всевозможных конструкций Conditional comments, так же было новинкой для многих то, что с их помощью можно определять версию windows. Далее речь пошла о conditional-css, серверной надстройке, которая работает по принципу conditional comments, но отличие в том, что условия мы можем писать прямо в css файле. И это открывает небывалые возможности перед веб-разработчиками, позволяя делать код максимально гибким. Также Павел рассмотрел некоторые возможности Javascript-библиотеки Modernizer, предназначенной для детекции поддержки веб-стандартов и динамической подгрузки ресурсов.

CSS3 Media Queries: легкость превращений. 

Сразу после обеденного перерыва на сцену вышел Артемий Ломов со своим захватывающим докладом про Media Queries. В отличие от Киевской встречи в Минске он показал эксклюзивные энциклопедические слайды со списком спецификаций css :) В конце своего выступления Артемий рассказал о проходящем сейчас ежегодном конкурсе сайтов WebHiTech и напомнил, что участие в нем абсолютно бесплатное и заявки принимаются на конкурс до третьего ноября.

Прокрустовы окна. Как вписаться в устройство с минимальными потерями. 

«Вот он, вот он доклад моей мечты, воооот он» – так комментировали участники конференции доклад Вадима Макеева. И были правы, доклад получился душевным и откровенным, и в то же время достаточно живым и веселым. Вадим предложил вынуть айфон из задницы, ссылаясь на Питера Поль Коха, что сразу же оживило зал. Затем он рассказал о разных трюках-хаках для работы с viewport и media queries. На последок же привел статистику использования девайсов Android, iOS, Opera. И уже в секции ответов на вопросы, в процессе рассуждения о ширине и высоте объектов, признался, что смотрит на мир по другому :)

Редактирование HTML в браузере. Как должно быть, как есть, и зачем это вообще нужно.

Антон Немцев рассказал о личном опыте работы с крупными издательствами и о проблемах, с которыми они сталкивались при редактировании текста. Начав с исторической справки он отметил, что в 1990 году, в первом браузере уже можно было редактировать данные непосредственно на странице. Также напомнил, что работа свойства contenteditable не изменилась со времен Internet Explorer 5.5. Антон предложил 4 правила, которые по его мнению должны соблюдаться для оптимальной системы редактирования контента. Резюмируя доклад Антона можно сказать, что «панель администрирования должна быть интегрированна с пользовательской часть и иметь хотя бы минимальный функционал редактирования».

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

БЭМ. Реальный опыт двух компаний Mail.ru и hh.ru.

В первой части доклада Андрей Сумин поделился опытом использования БЭМ в проекте HeadHunter. Во второй же части на примере верстки некоторых элементов сайта Mail.Ru продемонстрировал структуру css. В целом, это был один из тех докладов про БЭМ, где от теории наконец перешли к практике. Андрей в очередной раз показал насколько удобен БЭМ для использования в крупных проектах.

Быстрая разработка. Краткий обзор средств для работы с кодом из консоли.

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

Презентация услуги CloudServer — облачного хостинга Active Technologies.

Андрей Купченко из компании Активные технологии рассказывал о новой и пока единственной услуге в Беларуси – облачный хостинг. Эта услуга позволяет создать свой собственный датацентр за 15 минут. Из основных возможностей Андрей отметил: возможность балансировки нагрузки и создание кластера высокой доступности.

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

На конференции были подведены итоги конкурса «Война браузеров«, организованным накануне компанией Mail.Ru Group при поддержке сообщества разработчиков «Веб-стандарты». Первое место занял Роман Комаров с работой «Замок», второго места удостоился Антон Немцев со своей не менее интересной работой «История». С остальными работами можно ознакомиться на странице конкурса.

И в завершение конференции прошло награждение самых активных участников встречи, которым были вручены книги, рекомендованные сообществом «Веб-стандарты». Книги любезно предоставил интернет-магазин OZ.by.

А это человек, который задал вопросы по существу ко всем докладам и он также был награжден книгой.

Пообещав встретиться в следующем году Вадим Макеев и Павел Ловцевич выступили с заключительным словом. После чего докладчики и участники конференции отправились в паб «Гвоздь» на традиционное afterparty для не менее традиционного неформального общения.

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

Ссылки на отчеты:

Фоторепортаж с конференции Web Standards Days в Минске от Артемия Ломова

Отчет о Web Standards Days в Минске от Владимира Туронка

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

За несколько недель до конференции уже был готов список докладчиков, но свою окончательную форму он приобрел только за день до конференции. Сначала за неделю до конференции было объявлено, что список ее докладчиков пополнит Андрей Головнев, собственно я, с докладом про анимацию в Adobe Edge и за день до конференции доклад Ольги Алексашенко был заменен выступлением Антона Немцева. И в конечном итоге сетка докладов выглядела следующим образом:

• Прокрустовы окна. Как вписаться в устройства с минимальными потерями. Вадим Макеев
• Sass и Compass. Сергей Дыниовский
• Когда Audio убьёт Flash? Николай Мациевский
• Редактирование HTML в браузере. Как должно быть, как есть, и зачем это вообще нужно. Антон Немцев
• Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать. Игорь Зенич
• CSS3 Media Queries: лёгкость превращений. Артемий Ломов
• Настоящий JavaScript. Антон Котенко
• Adobe Edge. Веб-анимация по стандартам. Андрей Головнев

Прокрустовы окна. Как вписаться в устройства с минимальными потерями.

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

Sass и Compass

Практикой использования sass с css фреймворком compass поделился Сергей Дыниовский. Sass – это метаязык на основе css, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей. Compass – это css framework, работающий под sass и позволяющий компилировать его в css. В целом, я считаю, подход интересный и удобный для использования в Ruby проектах.

Когда Audio убьёт Flash?

Николай Мациевский напомнил, что уже сейчас можно использовать HTML5 Audio и Video как альтернативу Flash, в частности в проектах для мобильных устройств. Для web же проектов существует достаточное количество фреймворков, позволяющих отдавать flash только тем браузерам, которые не имеют поддержки html5 video или audio.

Редактирование HTML в браузере. Как должно быть, как есть, и зачем это вообще нужно.

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

Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать.

Доклад Игоря Зенича был ориентирован больше на тимлидов и менеджеров, но все же безусловно полезен для разработчиков. Он подробно описал весь процесс проверки и тестирования верстки прежде чем она будет использована в «боевых» условиях. За основу презентации была взята статья, опубликованная Игорем на Хабрахабр в феврале этого года.

CSS3 Media Queries: лёгкость превращений

«Хотите немного CSS магии?» Такими словами можно было бы начинать доклад Артемия Ломова о CSS3 Media Queries. Тема разработки для мобильных устройств еще сравнительно нова и доклад Артемия закрывает еще одно белое пятно в ней.

Настоящий JavaScript

Участники конференции еще долго будут помнить о осьмикошках. Именно на их примере Антон Котенко рассказывал о наследовании и клонировании в Javascript в сложных проектах. В отличие от других докладов, доклад Антона включал в себя большое количество примеров кода и в основном был нацелен на javascript-разработчиков.

Adobe Edge. Веб-анимация по стандартам

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

Резюмируя все вышенаписанное могу сказать, что встреча прошла удачно, о чем также можно судить по переполненному залу до самого конца конференции и теплым отзывам участников. По доброй традиции после официальной части состоялось afterparty в пабе O’Brien’s, где общение продолжилось уже в неформальной обстановке.

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

Фото любезно предоставил Артемий Ломов.

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

Ключевой стала возможность добавлять события (event handler) любым элементам анимации и выполнять некоторые действия при их отработке. Все операции с действиями производятся в popup-окне (рис. 1), которое вызывается нажатием на кнопку  «Actions» слева от элемента.

Рис. 1

Добавлять действия мы можем к следующим объектам:

• Элементы (Elements) – редактор событий для элементов можно вызвать двумя способами: правым кликом по элементу в области редактирования/создания анимации и выбрав «Open Action for…» или кликом по кнопке  «Open Actions» в панели элементов, в панели Timeline или панели добавления свойств, которая располагается чуть левее имени элемента.
• Контейнер (Stage) – редактор для него вызывается теми же способами, что и для элементов. По сути это тот же элемент, но он является родительским для всех остальных элементов, участвующих в анимации. Кроме доступа ко всем событиям и действиям элементов, он позволяет работать с событиями «loaded», «scroll», «keydown/keyup».
• Временная шкала (Timeline) – с ней мы можем работать с такими событиями как «complete», «update», «stop», «play»
• Триггеры (Triggers) – это действия, которые происходят по достижении определенного отрезка времени. Добавлять триггеры можно с помощью меню «Timeline > Insert Trigger» или с помощью хоткеев Cmd+T на Mac OS X и Ctrl+T на Windows. Это добавляет  триггер в строку Timeline Actions и определяет функцию (действие), которая будет вызвана в момент, когда анимация достигнет этой точки. Двойной клик по кейфрейму триггера открывает редактор действий для него. Вы так же можете копировать и вставлять уже созданные ранее триггеры.

Действия, добавленные для элементов, описываются в файле edgeActions.js, который независим от всех остальных файлов ядра Edge и вы можете его редактировать вне редактора Adobe Edge и добавлять при необходимости свои обработчики событий.

Labels
Третья предварительная версия Adobe Edge позволяет добавлять  метки для необходимых точек Timeline. Сделать это можно с помощью меню «Timeline > Insert Label», Cmd+L или Ctrl+L. Чтобы изменить имя метки достаточно дважды кликнуть на нее. Также их можно копировать, удалять и перемещать.

Несколько анимаций на странице
За счет изменений в связывании элементов навигации с контейнером (stage) появилась возможность использовать на одной странице несколько анимаций, созданных в Adobe Edge. Также в этой версии используется jQuery.noConflict, что позволяет использовать анимации Edge на сайтах, где используются js-фреймворки отличные от jQuery.

Сворачивание/Разворачивание Timeline строк
С помощью меню «Timeline > Collapse Selected» теперь можно сворачивать и разворачивать элементы с их свойствами, используемые в анимации.

Другие обновления

• был проделан ряд изменений по улучшению скорости рендеринга анимации при воспроизведении
• улучшена работа с z-index, теперь это легко контролируется с помощью перетаскивания в панели элементов (кто выше в панели, у того z-index больше)
• появилось возможно задавать свойство overflow для элементов
• дублирование элементов с помощью Cmd+D (Ctrl+D)
• Edge Runtime API

Не за горами выход следующей версии – Preview 4 с еще более интересными обновлениями, но пока вы можете  скачать Adobe Edge Preview 3 и посмотреть все это в действии.

P.S. 20 октября был выпущен хотфикс проблемы запуска приложения на Mac OS X 10.7.2. Сейчас архив с программой обновлен и скачать исправленную версию можно по ссылке выше.