Мастер-класс в Петербурге о веб-стандартах на пороге эры HTML5 и CSS3

 и  в Санкт-Петербурге состоялась IV ежегодная конференция СПИК. Компания RU-CENTER приняла участие в этом мероприятии во многих различных качествах — как официальный регистратор, экспонент выставки и организатор тематических секций. А координатор проекта WebHiTech Артемий Ломов представил на конференции выступление о положении дел в области веб-стандартов на пороге эпохи HTML5 и CSS3.

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

В начале выступления Артемий обратил внимание на то, что во многих презентациях западных гуру, демонстрирующих возможности HTML5 и CSS3, основное внимание уделяется внешней стороне явления — разнообразным «вкусностям» и «красивостям», которые ждут веб-разработчиков и пользователей сайтов в скором будущем, по факту массового внедрения этих стандартов. Совместно с HTML5 часто демонстрируется великое множество смежных технологий, формально не входящих в спецификацию HTML5 и развивающихся отдельно (API для доступа к локальной файловой системе, Geolocation API, Web Sockets, Web Workers и уйма других вещей), в результате чего у не слишком подкованной аудитории создается впечатление, будто бы HTML5 — это какой-то необозримый и непостижимый монстр.

Чтобы в какой-то мере компенсировать этот «перекос», Артемий счел необходимым акцентировать внимание аудитории на принципиальных вопросах — чем является HTML5 и чем он не является, как будет развиваться CSS в обозримом будущем, какими элементами этих спецификаций можно пользоваться при разработке сайтов уже сегодня и с какими целями следует это делать.

Слушателям был продемонстрирован практический пример простого шаблона сайта, сверстанного с применением HTML5 и CSS3 и имеющего такие ключевые особенности, как:

  • применение новых синтаксиса и семантических элементов языка разметки;
  • обеспечение совместимости с устаревшими браузерами;
  • использование Media Queries для «интеллектуальной» адаптации визуального представления страницы к областям просмотра той или иной ширины;
  • внедрение шрифтов, создание скругленных уголков, теней и градиентов без графики.

Уровень подготовки аудитории показался весьма неравномерным. В целом, конечно, ее основу составили отнюдь не технологи — но в данном случае это даже и к лучшему, поскольку гуру от веб-технологий вряд ли узнали бы из доклада что-то новое для себя, а вот задача информирования менеджеров проектов и начинающих разработчиков о преимуществах современных технологий представляется весьма важной. Задавались вопросы как по существу (например, о том, почему в тех или иных случаях более целесообразно использовать элемент <div> вместо <section>), так и совершенно не по делу (скажем, о том, где скачать бесплатные шаблоны для оформления сайтов). В целом, по впечатлениям Артемия, выступление вызвало интерес, и участие в конференции прошло с пользой.

Презентация выступления

Вы можете скачать архив материалов, демонстрировавшихся Артемием в ходе мастер-класса (объем файла — 6 мегабайт). Презентация и практический пример представляют собой набор веб-страниц, созданных с использованием HTML5 и CSS3. Для просмотра первого слайда нужно открыть файл index.html каким-нибудь современным браузером. Слайды можно переключать с клавиатуры аналогично тому, как это делается в MS PowerPoint.

Фоторепортаж

У Дома молодежи
Площадкой проведения конференции стал Дом молодежи «Царскосельский»
Артемий Ломов
Артемий Ломов рассказывает что-то про CSS3 с явно удовлетворенным видом
Демонстрация использования Media Queries
Практический пример, помимо прочего, демонстрирует применение Media Queries
Демонстрация принципа Graceful Degradation
Иллюстрация Graceful Degradation в IE8

Видеозапись

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