Часть 2. HTML5 и Flash в вебе: текущее и будущее

Материал подготовлен совместно Publicis Visage и DDM Studio

Часть 1. Погружение в HTML 5.

В прошедшем 2010 году  одним из самых обсуждаемых тем технологических споров была битва между Flash и HTML5 за то, чей «стандарт» больше. Трудно поверить, что нечто столь технологичное, как HTML5 очутилось на первых полосах СМИ. Все благодаря маленькому открытому письмо от Стива Джобса миру, после которого об HTML5 стал говорить весь мир. В своем письме Джобсс объяснил, почему популярные устройства iPhone и iPad не будут поддерживать де факто стандартную для отображения видео Adobe Flash, объяснив это, в том числе, тем, что Apple «не тратит энергию на старые технологии», а также обратив внимание публичности на то, что Flash «ест ресурс» и у него «дыры в безопасности».

Когда Джобс говорит, люди слушают. В результате, уровень применения HTML 5  гигантски вырос. К февралю 2011, как заявил MeFeedia, 63% он-лайн видео было доступно в формате HTML5. Цифры впечатляют, так как по данным того же ресурса еще в январе 2010 года этот уровень составлял всего 10%, то есть процент он-лайн видео доступного в формате HTML5 вырос в 6 раз всего за год.

Новый формат видео не единственная инновация в HTML5, хотя и самая популярная.  В этой статье я перечислю:

1. основные инновационные подходы HTML5, которые могут помочь решить одну из бизнес-задач ваших клиентов.

2. в пользу какой технологии HTML5 или Flash стоит сделать выбор, в зависимости от стоящей перед вами задачи.

3. чего ожидать в будущем от этих двух технологий.

HTML5: какие бизнес-задачи Клиента он поможет решить

Давайте, не вдаваясь в технические подробности,  вспомним основные «вкусности» HTML5.

1. HTML5 предоставляет новый формат вставки видео, который работает и в настольных браузерах, и в мобильных.

Как было до HTML5: для отображения видео в вебе был обязателен плагин, например, Apple QuickTime® или Adobe Flash®. Чтобы посмотреть видео, сначала нужно было пойти на сайт третьей стороны (Apple, Adobe), скачать оттуда плагин, а потом установить его в браузере.  

Как у HTML5:  HTML5 определяет новый элемент <video>, который отвечает за вставку видео в вашу веб-страницу в браузере.  Браузер же отобразит видео в том формате, который он понимает. Однако здесь кроется большое «но»:  суровая реальность HTML 5 такова, что браузеры не в состоянии согласовать, какой один формат видео поддерживать.

Видео-форматы - это как письменный язык. Если у вас две газеты, одна из которых написана по-русски, а другая по-английски, а вы читаете только по-русски, то, как ни печально, английскую вы не прочитаете. Переводя это на тему видео, чтобы браузер мог «прочитать» видео, он должен понимать, на каком языке оно написано. Язык видео называется «кодек» - это алгоритм, который используется для кодирования видео в поток битов. В мире существуют сотни кодеков, какой же использовать? Браузерам удалось сузить варианты до трех:

Формат H-264 - стоит денег из-за патентного лицензирования, но зато работает в Сафари и на iPhone, и еще кроме того поддерживается Flash.

Формат Theora (или Ogg, так  как именно так называет контейнер, в который упакован видео-формат Theora) - кодек бесплатный, работает с браузерах с открытым исходным кодом, таких как Chromium и Mozilla Firefox.

Формат VP8 и WebM (на основе VP8) - оба видео-кодека от Google: первый им куплен, а второй разработан на основе первого. Очень многообещающий видео-кодек, особенно, если YouTube решит использовать его по умолчанию для бекапа Flash-роликов.

В порядке популярности видео-кодеков в вебе их можно расставить в таком порядке: H-264 - Theora (Ogg) - VP8 (WebM).

Если клиент хочет, чтобы видео-контент его HTML5 сайта полностью поддерживался во всех браузерах, выбор между Flash, H.264, Ogg, и VP8 нельзя делать.   Видео необходимо сконвертировать в нескольких форматах и указать ссылки к каждому. Браузер просто пробежится по всем вариантам форматов, приписанных в коде, и найдет тот, который он сможет отобразить.

Пример:

This Shell - это экспериментальный HTML5-сайт, созданный для музыкальной группы, в частности для продвижения нового альбома Parts группы Gamit. Сайт представляет собой видео-пазл: если вам удастся собрать пазл до окончания трека, вам откроется ссылка на бесплатное скачивание mp3 файла песни.

2. HTML5 позволяет сохранять сайты off line так, что пользователь может отобразить весь контент сайта, не будучи подсоединенным к Интернету.

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

Как у HTML5: Когда вы первый раз заходите на сайте, в котором реализована эта функция HTML5, веб-сервер сообщает браузеру, какие файлы ему нужны, чтобы работать оффлайн. Это может быть что угодно - код, изображения, даже видео. Как только ваш браузер загрузил все файлы, вы может зайти на сайт, даже не будучи подсоединенным к Интернету. Ваш браузер видит, что вы находитесь оффлайн и отобразит запрашиваемый сайт c вашего компьютера. Если на сайте происходят изменения, файлы на вашем компьютере будут автоматически обновляться, как только вы подсоединитесь к интернету. Изменения в обратном направлении тоже возможны - если вы произвели какие-то изменения на сайте их можно загрузить на удаленный веб-сервер, когда вы будете он-лайн.

Пример.

Работающих полноценных сайтов я не нашла, а странно - так как опция очень многообещающая, особенно для производителей он-лайн игр.  Demo, однако, есть.  Например, http://html5demos.com/offlineapp. Зайдите по ссылке, отключитесь от Интернета, обновите страницу - она загрузится. Попробуйте то же проделать с другой страницей - браузер сразу выдаст ошибку подключения к Интернету. Или еще пример - очень базовая он-лайн веб-игра .

3. HTML5 позволяет пользователю рисовать прямо в браузере, не зависимо от того поддерживает он Flash или нет.

До HTML5: рисование в браузере было попросту невозможным. Браузеры не знали, как это делать. Если клиенту хотелось создать графический редактор он-лайн, то использование Adobe Flash было неизбежным. По сути, ни одно такое решение не могло работать в IPhone и IPad.

Как у HTML5: HTML5 определяет элемент <canvas>, который можно использовать для построения игровой графики, анимации, рисования и так далее. По сути  canvas - это прямоугольник на вашей странице, в котором вы, используя JavaScript, рисуете все, что хотите прямо в браузере.  HTML5 определяет ряд функций  (так называемый "canvas API") для рисования форм, определения путей, создания градиентов и применения трансформаций.

Пример:

Harmony Tool - один из самых старых  HTML 5 проектов, который я могу вспомнить. Этот инструмент позволяет рисовать разными текстурами прямо в браузере. Отличный инструмент - хоть и древний, но поражается воображение до сих пор. Картинка ниже, например, была нарисована, со слова автора, менее чем за три минуты.

Harmony tool не потерялся в дебрях Интернета и был использован командой B-Reel и Google Creative Labs при создание ролика для песни группы Arcade Fire "The Wilderness Downtown". Помните карточку во второй половине ролике, в которой вы пишете буквами, стиль которых напоминает прорастание корней и ветвей?

4. В HTML5 встроена возможность определения вашего географического положения.

Геолокация - это искусство определения, в какой точке мира вы находитесь, информацией о чем вы можете, если хотите, поделиться с людьми, которым доверяете. Есть несколько способов определить, где вы находитесь  - по  IP-адресу компьютера, за которым вы сидите в Интернете, в случае выхода в Интернет с мобильного устройства: то API определит, с какой вышкой ваш мобильный телефон в данный момент соединяется, либо определит ваше место положение с помощью соответствующего программного обеспечения (GPS), которые подсчитывает широту и долготу на основе информации, полученной от спутника в небе.

До HTML5: Геолокация онлайн доступна давно, но работала она только при подключении специальных интерфейсов от третьих сторон, например тот же Google Geolocation API.

Как у HTML5: HTML5 поддерживает открытый geolocation API, который позволяет с помощью нескольких тегов в коде определить место положения пользователя. Это существенное преимущество для разработчиков геолокационных сервисов, которые не должны привязываться к API третьей стороны.  Пример.

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

Почти все возможные функции и возможности HTML 5 применены командой B-Reel и Google Creative Labs при создании ролика для песни группы Arcade Fire "The Wilderness Downtown". 

Не буду писать про этот проект, так как он прогремел на весь интернет и заработал несколько престижных международных призов. Однако, возможно, не всем известно: карточки, которые вы в конце ролика рисуете и которые отправляются авторам песни, будут распечатаны и станут визуальным оформлению к большому Suburbs туру команды Arcade Fire. Карточки также будут распечатаны на специальной Wilderness Machine -специально созданном принтере, который «встраивает» в карточку семена березы. Так что те фаны, которые получат распечатанную Wilderness Machine карточку могут посадить ее и дерево прорастет!

Flash: что по другую сторону барикад?

Adobe Flash вышел на рынок в 1996 году, правда тогда он назывался Macromedia Flash и только в 2005 был переименован в Adobe Flash, когда Adobe купил Macromedia. 

За 15 лет Flash добился многого:

• 1.2 миллиарда мобильных телефонов работают с Flash
• 70% всех игровых сайтов работают на Flash
• 98% процентов Internet-enabled десктопов его используют
• 85% сайтов из top-100 вебсайтов используют Flash, в том числе Hulu, Disney и YouTube
• 2-3 миллиона людей принадлежат сообществу Flash-разработчиков
• У 90% креативщиков на рабочих столах установлены программные продукты Adobe

HTML5 и Flash: какую технологию выбрать

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

Например, скорее всего вам нужно:

Выбрать HTML5

• Если ваше видео будет отображаться на системах с низкой скоростью соединения.
• Если вы хотите сэкономить, либо не имеет возможности купить лицензию Adobe Flash.
• Если вы хотите, чтобы ваше видео\приложение работал на iPhone, iPad либо других платформах Apple
• Если вас важно работать со средой, открытой для разработки

Выбрать Flash:

• Если ваш продукт должен поддерживаться большинством существующих браузеров, включительно со старыми версиями, например IE6

         Для информации, сверьтесь с таблицей кросс-браузерной совместимости HTML5.

• Если вам нужен мощный ресурс с возможностями video streaming и video playback, например прямая трансляция с мероприятий
• Если вас беспокоит защита вашего контента и вы хотите предотвратить копирование информации с вашего сайта
• Если вы хотите динамически вставлять рекламу в разные отрезки видео
• Если вам нужна интеграция с веб-камерами и микрофонами для поддержки интерактивных опций, например видео-чат

2012: что же ждет нас впереди?

Несмотря на то, что лидером рынка на данный момент является Flash, HTML5 явно очень быстро становится новым стандартом технологии онлайн видео, и компании должны быть готовы к изменению своих стратегий роста, учитывая новый стандарт. С другой стороны, как бы быстро HTML5 не развивался, нельзя забыть того, что у Flash было 15 лет форы. Технология, с таким уровнем проникновения на рынке несомненно предлагает нечто, что ценят многие люди, и не исчезнет за ночь. Это мощный и полезный инструмент в ряде задач, и даже в битве против HTML5 им удалось решить некоторые из озвученных Стивом Джобсом проблемы, например связанные с  ресурсоемкостью технологии.

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

Более того, я думаю, что в схватке этих двух технологий и их продавцов не будет единого "победителя". Apple не выбьет с ринга  Adobe. Adobe не собирается искоренять HTML5.

На это указывает, как минимум то, что один из существующих конвертеров, которые преобразую swf-файлы в формат HTML5, выпускает Adobe под названием Adobe Wallaby. Это приложение нужно устанавливать, а тем, кому интересно посмотреть, как работают конвертеры прямо он-лайн, то рекомендую посмотреть Google Swiffy. Чистота кода после конвертации наверняка желает лучшего, как и всегда происходит после автоматической конвертации одного формата в другой, но со временем она наверняка станет лучше.

Adobe также месяц назад выпустила новый инструмент Adobe Edge , который предназначен для создания простого анимированного контента на открытых стандартах: HTML5, JavaScript и CSS3. Редактор в первую очередь создан для мобильного рынка, но никто не мешает делать с его помощью любую веб-анимацию HTML5, а в будущем - HTML5-игры и другие приложения. Да, это делает Adobe, который, естественно, пытается сохранить свои позиции как лидера на рынке ПО для веб-дизайна.

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

В следующей статье буду писать про мобильные платформы и HTML5, после чего займусь другой темой. Кстати, если есть пожелания, то, пожалуйста, сообщайте. Буду прислушиваться.