Кит Джереми - HTML5 для веб-дизайнеров

Ряд разделов спецификации HTML5 целиком посвящен новым API для создания веб-приложений. Описан, например, менеджер отмены ( UndoManager), который позволяет браузеру отслеживать изменения документа. Есть отдельный раздел по созданию офлайновых веб-приложений с помощью использования манифеста кэширования. Детально описан процесс перетаскивания объектов.

Как всегда, если уже существует реализация, спецификация будет опираться на нее, а не изобретать велосипед. В Internet Explorer уже несколько лет существует API для перетаскивания объектов, поэтому она и стала фундаментом для перетаскивания в HTML5. К сожалению, у API Microsoft – как бы помягче сказать – есть свои проблемы. Может быть, иногда не так уж плохо заново изобретать велосипед, если у тебя есть только велосипед с квадратными колесами.

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

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

История веба пестрит технологическими нововведениями. Одним из самых ранних добавлений к HTML стал элемент img, и это фундаментально изменило веб. Затем появление JavaScript позволило вебу стать более динамической средой. Наконец, быстрый рост количества Ajax-приложений позволил вебу стать средой, в которой возможны полноценные приложения.

Веб-стандарты продвинулись настолько, что сейчас возможно разработать практически все что угодно с помощью HTML, CSS и JavaScript.

В разнообразном наборе веб-стандартов есть пробелы. Если вы хотите опубликовать текст и картинки, вам ничего не нужно, кроме HTML и CSS. Но если вы хотите опубликовать аудио и видео, вам понадобится технология, существующая в виде плагинов, – например, Flash или Silverlight.

«Плагин» (дословно «подключаемый модуль») – вполне точный термин для этого типа технологий: они помогают заткнуть дырки в вебе. С помощью плагинов относительно просто выложить онлайн-игры, фильмы и музыку. Но эти технологии не являются открытыми. Они не создаются сообществом разработчиков, а контролируются отдельными компаниями.

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

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

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

Элемент canvas– среда для создания динамических картинок.

Сам по себе элемент очень прост. Все, что вам нужно определить в открывающем теге, – его размеры:

Если вы напишете что-нибудь между открывающим и закрывающим тегом, то это будет отображено только в тех браузерах, которые не поддерживают работу с Canvas ( рис. 3.01):

Браузер не поддерживает canvas? Тогда картинка, по-старинке:

Браузер не поддерживает canvas? Тогда картинка по старинке:

Рис. 3.01.Пользователи, браузеры которых не поддерживают canvas, увидят картинку очаровательного щенка

Вся сложная работа делается на JavaScript. Сначала вам нужно будет создать переменную, указывающую на Canvas и его контекст. Слово «контекст» в данном случае означает просто API. В настоящий момент контекст есть только один – двумерный:

var canvas = document.getElementById(‘my-first-canvas’);

var context = canvas.getContext(‘2d’);

Теперь вы можете начать рисовать на двумерной поверхности элемента canvas, используя API, задокументированное в спецификации HTML5 по адресу: http://bkaprt.com/html5/. [4]

В 2D API есть довольно большое количество тех же самых инструментов, которые есть в графическом редакторе (например, Adobe Illustrator), – обводка, заливка, градиент, тень, формы, кривые Безье. Разница в том, что вместо того чтобы использовать графический интерфейс, вам нужно писать все на JavaScript.

Вот так вы определяете, что цвет обводки должен быть красным:

context.strokeStyle = ‘#990000’;

Теперь у всего, что вы нарисуете, будет красный контур. Например, если вы хотите нарисовать прямоугольник, используйте такой синтаксис:

strokeRect (left, top, width, height)

Если вы хотите нарисовать прямоугольник размерами 100×50 пикселей, расположенный в 20 пикселях от левого края и в 30 пикселях от верхнего края элемента canvas, вы напишете так ( рис. 3.02):

context.strokeRect(20,30,100,50);

Это очень простой пример. 2D API предоставляет очень много методов: fillStyle, fillRect, lineWidth, shadowColorи многие другие.

Рис. 3.02.Прямоугольник, нарисованный на canvas

В теории любое изображение, которое можно реализовать в программе, аналогичной Illustrator, можно создать внутри элемента canvas. На практике делать это очень утомительно и, скорее всего, приведет к безумно длинному коду на JavaScript. Да и вообще смысл Canvas несколько не в этом.

Создавать картинки на лету с использованием JavaScript и Canvas – это все здорово и прекрасно, но если вы не убежденный мазохист, то зачем?

Истинная сила Canvas заключается в том, что его содержимое может быть обновлено в любой момент, на нем можно нарисовать новое содержимое в зависимости от действий пользователя. Эта способность реагировать на события, вызванные действиями пользователя, делает возможным создавать инструменты и игры, для которых раньше потребовалась бы технология плагина, например Flash.

Одна из первых флагманских демонстраций возможностей Canvas была разработана в Mozilla Labs. Приложение Bespin ( https://bespin.mozilla.com) – редактор кода, работающий внутри браузера ( рис. 3.03).

Он очень мощный. Очень впечатляющий. Но это прекрасный пример того, чего с Canvas делать как раз совершенно не нужно.