Плагины и расширения

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

Adobe Flash

Де-факто Flash Player уже стал стандартом для декстопных браузеров: на сентябрь 2009 года он поддерживался в 99,5% браузеров. Но мобильный мир все же сильно отличается. Adobe пытается обеспечить такую же поддержку и в мобильных устройствах, но пока что здесь много препятствий.

На сегодняшний день у Adobe есть два основных продукта для мобильных устройств: Flash Lite и основной Flash Player 10 для мобильных устройств. Первый вариант предназначается для low- и mid-end устройств (и для high-end устройств, выпущенных до 2010 года), а основной плеер будет доступен для Android, Symbian и Palm Pre (но не для iPhone) устройств начиная с 2010 года. В таблице 6.19 показаны версии ActionScript и наличие или отсутствие поддержки Flash Video в зависимости от версии Flash в мобильном браузере.

На рисунке 6.16 демонстрируется, что увидит пользователь устройства без поддержки Flash, если используешь на своем сайте Flash-контент.

Плеер Flash Lite может применяться для меню, фонов, игр/приложений и непосредственно в браузере. Но наличие установленного на устройстве Flash Lite не означает, что Flash плеер может использоваться прямо из браузера.

Рис. 6.16. Как видно из рисунка, применять Flash контент на неподдерживающих устройствах это большая ошибка.

Apple vs Adobe

Apple против Adobe, Adobe против Apple — это одна из великих войн сегодняшнего мобильного Интернета. Когда в 2008 году появился iPhone SDK, Adobe сразу захотели сделать для него Flash Player. И в Apple дали согласие. Через год Adobe обвиняет Apple в отсутствии какой-либо помощи, а спустя всего несколько месяцев в Apple заявляют, что в iPhone вообще не будет поддерживаться Flash. Основной причиной называлась высокая энергоемкость и, как следствие, быстрое расходование ресурса батареи при воспроизведении в браузере Flash-контента да и вообще, во Flash нет никакой необходимости, ведь CSS и JavaScript расширения для iPhone позволяют разработчику создавать не менее классный контент.

Ну а неназванная причина такая: если Apple разрешит Flash-контент на iPhone, то, скорее всего, потеряет власть и контроль над контентом, приложениями и играми.

В начале 2010 года компания Adobe объявила, что начиная с Adobe Flash CS5 инструментарий будет поддерживать экспорт SWF в нативные iPhone-приложения, размещенные в App Store. Но Apple так просто не сдается и меняет условия, уверяя, что такие приложение не будут допущены в App Store.

Даже несмотря на все большее проникновение Adobe в мобильный мир, различия между Flash Lite 1.0 и 4.0 остаются по-прежнему огромными. Например, во Flash Lite 1.0 нет поддержки массивов. Именно поэтому возможность использования Flash в мобильных сайтах нужно рассматривать, только если ты точно знаешь, с какими устройствами работают потенциальные пользователи и, конечно, контент нужно тщательно протестировать. Если ты используешь или планируешь использовать Flash, то не забывай о некоторых правилах:

1. ActionScript можно оптимизировать только если ты действительно в этом разбираешься.
2. Избегай применения тех эффектов, которые требуют сложной математической обработки.
3. Не используй объектно-ориентированное программирование.
4. Не рассчитывай на события мыши, если разрабатываешь для не-сенсорных устройств.
5. Постарайся максимально улучшить юзабилити при помощи обработки событий клавиатуры.
6. Максимально сжимай изображения и звуки.

Flex для мобильных

Adobe Flex — фреймворк (с открытым исходным кодом) ActionScript 3.0, предназначенный для разработки Rich Internet Applications. Сегодня Flex-приложения не работают на мобильных устройствах, но, начиная с 2010 года все изменится и они будут работать на устройствах с Flash Player 10.1. Сейчас команда Flex 4 работает над выпуском Flex-контроллеров для улучшения производительности на мобильных устройствах.

В таблице 6.20 указано, на каких мобильных платформах есть поддержка Flash.

Flash на iPhone? Да, это возможно!

Некоторые люди с нестандартным мышлением действительно могут меня удивить (в хорошем смысле). Тобиас Шнайдер (Tobias Schneider) сделал на JavaScript и SVG рантайм Flash с открытым исходным кодом. Называется рантайм Gordon.

Gordon — совместимая с SVG-браузерами библиотека JavaScript, которая обеспечивает рендеринг файла Adobe Flash SWF в тех браузерах, где не используется Flash Player. Ты можешь удивиться, но это решение отлично работает на iPhone. Но, это тяжелая JavaScript-библиотека, так что постарайся не злоупотреблять и пользуйся ею только для действительно нужной и важной анимации. Некоторые примеры анимации можешь протестировать на http://paulirish.com/work/gordon/demos.

На момент написания этой статьи была только первая версия библиотеки и она поддерживала сабсет формата SWF, но, при этом, не было поддержки ActionScript 2 или 3. Такое решение отлично подходит для анимации и создания простых кнопок и здесь есть совместимость с форматом SWF 1 и предрелизной версией формата SWF 4.

Пользоваться библиотекой просто: нужно загрузить ее с http://github.com/tobeytailor/gordon и вставить файл gordon.js в папку src на твоем веб-сайте. HTML-код должен быть похож на этот пример:

<html xmlns=>http://www.w3.org/1999/xhtml>>
	<head>
		<title>Gordon: An open source Flash> runtime written in pure JavaScript</title>
		<script type=>text/javascript> src=>gordon.js>></script>
	</head>
	<body onload=>new Gordon.Movie('movie.swf', {id: 'stage', width: 500,	height: 400})>>
		<div id=>stage>></div>
	</body>
</html>

Как ты можешь увидеть в коде, в событии onload библиотека заменяет <div> на определенный .swf .

Помни, что Gordon — это не Flash Player для iPhone, это просто рантайм. Для его работы пользователю не нужно ничего устанавливать, но в целом он не гарантирует автоматической работы любого сайта с Flash-котентом. Тебе нужно вставить библиотеку в свой код, экспортировать клип (фильм, видео movie в оригинале) SWF 1.0 и вставить JavaScript-код, если обнаружишь, что браузер — Safari на iOS.

Microsoft Silverlight

Silverlight — это технология для разработки похожих на Flash Rich Internet Application. На рынке декстопной разработки это довольно новая вещь, ну а в мобильном мире Silverlight вообще только начинает распространяться. На момент написания этой статьи были доступны бета-версии для Windows Mobile, Windows Phone и Symbian 5-го поколения, так что мы вполне можем ожидать, что в будущем Silverlight Player уже будет предустановлен на мобильных устройствах.

Пока что Silverlight не подходит для мобильной разработки.

SVG

Standard Vector Graphics (Стандарт Векторной Графики) — открытая XML-спецификация для отображения 2D векторной графики. SVG-документ может быть статичным (разметка тегами в XML-файле) или динамически сгененрированным из файла JavaScript. Прелесть этого формата — возможность адаптации к разным экранным размерам без потери качества.

SVG — стандарт W3C для декстопных платформ с двумя подготовленными для мобильных платформ версиями: SVG Basic и SVG Tiny, которые между собой конкурируют (ситуация как и с мобильными версиями XHTML).

Последняя доступная версия SVG Tiny 1.2, но в мобильных устройствах лучше всего поддерживается версия SVG Tiny 1.1. (SVGT 1.1), в которой есть поддержка анимации. Эта же версия была принята OMA и 3rd Generation Partnership Project (3GPP). Прозрачность и градиенты не входят в мобильный стандарт, но некоторые устройства все же обеспечивают их рендеринг. На рынке это дополнение известно как SVGT 1.1+. С совместимостью SVGT есть только одна проблема в устройствах с SVGT — поддержка текста. В некоторых устройствах для добавления текста в SVG мы можем использовать системные шрифты, но в других такой возможности нет и необходимо в программе для графического дизайна текст преобразовывать в кривые.

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

В таблице 6.21 отображена информация о текущем уровне поддержки SVG на мобильных веб-платформах.

Инструменты для SVGT

Большинство программ для работы с векторной графикой поддерживают SVG в качестве формата экспорта. Adobe Illustrator, например, может экспортировать в SVGT 1.1, SVGT 1.1+ и SVGT 1.2. Corel Draw — еще один полезный инструмент для преобразования SVG. Иногда в разметке, сгенерированной в Illustrator присутствует больше тегов чем тебе на самом деле нужно, так что, возможно, ты захочешь открыть его в другой программе и заново его экспортировать. Сейчас из предложенных на рынке инструментов для работы с SVG самый лучший — Ikivo Animator. Он предназначен для мобильных устройств и в нем можно создавать анимацию с использованием SVGT 1.1. Пробную версию можешь загрузить на http://www.ikivo.com/animator.

Среди программного обеспечения с открытым исходным кодом поддержку SVG предлагает Inkscape, а для Windows мы можем использовать SVGmaker Tiny — драйвер принтера, который конвертирует любой печатный документ в формат SVGT.

Рекомендации для документа SVG Tiny:

• Сохраняй минимальным размер и количество используемых объектов.
• Не применяй большие области градиента — они отрицательно влияют на производительность.
• Уменьшай количество точек в пути.
• Если объект слишком сложен, возможно, лучше использовать PNG.
• Всегда, когда есть возможность, используй GZIP.
• Также по возможности объединяй пути
• Для каждого объекта поддерживай одну его копию онлайн
• Экспортируй текст в виде кривых
• Не используй инструментарий для графического дизайна для простых форм.

SVG для начинающих

Конечно, полный курс SVG никак не поместится в эту книгу, но я все же очень кратко пробегусь по основам SVG Tiny. Документ SVG — это XML-документ с корневым тегом <svg>, который определяет исходный размер области просмотра (ширину и высоту). Но не забывай что мы говорим о векторном изображении, а значит ты можешь изменять его размер. Внутри изображения мы можем нарисовать такие формы:

• прямоугольники (<rect>);
• круг (<circle>);
• эллипс (<ellipse>);
• линия (<line>);
• ломанная линия (<polyline>);
• полигон (<polygon>);
• путь (<path>).

Ниже приведен пример совместимого с SVG Tiny 1.1+ документа (используется LinearGradient, который не входит в стандарт SVGT 1.1):

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px">
	<linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="54" y1="61"
	x2="147" y2="61">
		<stop offset="0" style="stop-color:#FFFFFF"/>
		<stop offset="1" style="stop-color:#000000"/>
	</linearGradient>
	<rect x="0" y="0" fill="url(#grad1)" stroke="#000000" width="193" height="84"/>
	<ellipse fill="#FF0000" stroke="#000000" cx="30" cy="100" rx="25" ry="25"/>
</svg>

Результат этого кода: SVG изображение размером 200х200 пикселей с прямоугольником (тег <rect>) и кругом (тег Κellipse> с радиусами равными rx и ry, c центром в точках cx, cy). Круг залит простым красным цветом, прямоугольник — линейным градиентом, который определяется при помощи id grad1. Это градиент не совместим с SVGT 1.1 (без +).

В Google Docs есть бесплатный онлайн-инструментарий векторной графики для создания диаграмм и схем и, главное, в нем есть возможность экспорта в SVG.

Размер рассматриваемого нами документа (SVG файла ) — 670 байт (0.6 KB). 24-разрядный PNG-файл с таким же изображением «весит» уже 5.77 Кбайт, а 8-разрядный PNG с потерей качества изображения весит уже 1.31 Кбайт. Понятно, что с точки зрения размера и трафика SVG гораздо привлекательнее. Сложности состоят в том, что браузеру нужно представить изображение на мобильном устройстве (хотя с прокси-браузера вроде Opera Mini или на устройствах BlackBerry ситуация отличается — здесь есть пре-рендеринг SVG на сервере).

Встраивание SVG

Для того чтобы вставить файл SVG в документ XHTML мы можем использовать тег <object>, определить атрибут data с URL адресом файла SVG, атрибут type как image/svg+xml, а также width и height. Так как SVG — векторное изображение, то для атрибутов размера мы можем использовать процентные значения для адаптации контента под область просмотра. Если же нет возможности использовать SVG, то можно сделать альтернативное изображение в другом формате как дочерний элемент тега <object>:

<object data="logo.svg" type="image/svg+xml" width="100" height="30">
	<img src="logo.jpg" width="100" height="30" alt="Logo not SVG" />
</object>

В некоторых браузерах (например в Safari на iOS) для SVG-файлов можно использовать классический тег <img>:

<img src="logo.svg" width="100" height="30" />

Canvas

В HTML 5 есть новый тег <canvas>, позволяющий разработчиком создавать динамические изображения при помощи графических примитивов в JavaScript. Сам синтаксис и проблемы с поддержкой мы рассмотрим позже. А пока просто помни, что существует такой способ вывода небольших изображений без дополнительных запросов к серверу.

Куда дальше

• следующая — Глава 7. CSS для мобильных браузеров. Куда вставлять CSS
• предыдущая — Фреймы
• содержание