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

Рис. 3.03.Приложение Bespin, разработанное на Canvas

Редактор кода по своей природе имеет дело с текстом. Редактор Bespin работает с текстом внутри элемента canvas– вот только на самом деле это уже не текст; это набор фигур, которые выглядят как текст.

Каждый документ в вебе можно описать объектной моделью документа (Document Object Model, DOM). DOM может содержать большое количество различных узлов, самыми важными из которых являются узлы элементов, текстовые узлы и атрибуты. У элемента canvas нет DOM. Содержимое, нарисованное внутри canvas, нельзя представить как дерево узлов.

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

Недоступность содержимого Canvas для технологий специальных возможностей – большая проблема для HTML5. К счастью, очень умные люди работают вместе в рамках рабочей группы, которая может предложить решение этой проблемы ( http://bkaprt.com/html5/2) [5].

Доступ к Canvas – очень важный вопрос, и я не хотел бы, чтобы какие-либо внесенные предложения принимались поспешно. С другой стороны, мне не хотелось бы также, чтобы Canvas задерживал все остальное в спецификации HTML5.

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

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

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

Предположим, у вас есть таблица с данными. Скажем, вы хотите проиллюстрировать аналитические выводы из этих данных в диаграмме. Если данные статичны, то вы можете сгенерировать картинку диаграммы – например, используя Google Chart API. Если же данные редактируемы, если они меняются в ответ на события, вызванные действиями пользователя, тогда Canvas – отличный инструмент для того, чтобы сгенерировать изменившуюся диаграмму. Ключевой момент здесь тот, что то содержимое, которое выводится внутри элемента canvas, уже доступно в существующем элементе table.

Умные парни из Filament Group разработали jQuery-плагин как раз для такой ситуации ( рис. 3.04; http://bkaprt.com/html5/3) [6].

Рис. 3.04.Сгенерированная с помощью Canvas диаграмма из данных, введенных пользователями

Есть и другой вариант. Canvas – не единственная API для генерации динамических картинок. SVG (Scalable Vector Graphics, масштабируемая векторная графика) – XML-формат, в котором можно описать те же самые формы, что и в Canvas.

Поскольку XML – текстовый формат данных, содержимое SVG теоретически доступно программам, читающим текст на экране.

На практике SVG не захватило воображение разработчиков настолько, насколько это получилось у Canvas. Хотя Canvas – новый паренек в классе, у него уже отличная браузерная поддержка. Safari, Firefox, Opera и Chrome поддерживают Canvas. Есть даже JavaScript-библиотека, которая добавляет поддержку Canvas в Internet Explorer ( http://bkaprt.com/html5/4) [7].

Учитывая мантры WHATWG – «асфальтируйте тропинки» и «не изобретайте велосипед», – может показаться странным, что при этом они выступают за включение Canvas в HTML5, когда уже существует стандарт SVG. Как часто и бывает, спецификация HTML5 только документирует то, что браузеры уже поддерживают. Элемент canvas не был задуман специально для HTML5; он был разработан Apple и реализован в Safari. Другие производители браузеров увидели, что делает Apple, им это понравилось, они это скопировали.

Звучит как-то несуразно, но зачастую именно так рождаются наши веб-стандарты. Например, в конце XX века Microsoft создала объект XMLHttpRequestдля Internet Explorer 5.

Десятилетие спустя все браузеры поддерживают эту функцию, и в W3C она находится в статусе последней версии рабочего черновика.

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

Первым сайтом, который я сделал в жизни, был маленький сайт-визитка моей группы. Я хотел, чтобы посетители сайта могли слушать песни, которые исполняет моя группа. Так начался мой спуск в подземное царство огромного количества форматов и музыкальных проигрывателей. Многие из них боролись за мое внимание: QuickTime, Windows Media Player, Real Audio, – и я потратил слишком много времени, переживая из-за доли каждого на рынке и кросс-платформенной совместимости.

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

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

Встроить аудиофайл в HTML5-документ очень просто:

Наверное, это даже слишком просто. Наверняка вы хотите несколько более конкретно указать, что должен делать элемент audio.

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

autoplay>

Если вы когда-нибудь будете так использовать атрибут autoplay, знайте: я вас найду.

Обратите внимание, что у атрибута autoplayнет значения. Такие атрибуты называются булевыми, в честь Джорджа Буля, великого математика из Корка [8].

Компьютерная логика целиком основана на булевой логике: электрический ток либо течет, либо нет; двоичное значение – либо единица, либо ноль; результат расчета – либо истина (true), либо ложь (false).

Не перепутайте булевы атрибуты и булевы значения. Вас можно понять, если вы подумаете, что булев атрибут будет принимать значения true и false. В действительности булево по природе само существование элемента: присутствует он или нет. Даже если напишете атрибуту значение, никакого эффекта это иметь не будет. Написать autoplay="false"или autoplay="no thanks"– то же самое, что написать autoplay.