HTML 5

Хоть HTML 5 еще не закончен, он уже привносит множество своих изменений в разработку для мобильных устройств.

Стандарт

HTML 5 заменит XHTML 1.1 и HTML 4.0, добавляя новые элементы разметки и JavaScript API и, одновременно, убирая некоторые теги (например, <font> и <center>). Последнюю версию спецификации можно найти на http://dev.w3.org/html5.

Мобильным браузерам очень не хватает новых функций для веб-приложений и именно поэтому мобильные браузеры стали хотя бы частично поддерживать HTML 5 даже раньше декстопных браузеров. Многие из предложенных новых элементов являются семантическими тегами, предназначенными для борьбы с злоупотребление тегом <div>. Для этой цели в спецификацию включены такие новые теги как <section>, <article>, <footer>, <nav>, <video>, <audio>, <canvas> и <command>.

Также в стандарт добавлены новые типы элементов управления формой: tel, search, url, email, datetime, date, month, week, time, number, range и color. Для тега <input> добавлены атрибуты placeholder, autofocus, required, autocomplete и pattern. (О многих из этих новых атрибутов мы говорили в Главе 6).

Хоть эта книга и не про основы HTML или JavaScript, мы все равно подробнее рассмотрим некоторые из новых функций HTML 5, потому как мало еще веб-разработчиков хороши с ними знакомы.

К сожалению, практически во всех браузерах (кроме, разве что, некоторых — смотри в таблице 9.11) поддержка HTML 5 ограничивается областью дополнений в JavaScript API и почти не затрагивает область непосредственно самой разметки и атрибутов.

Тем не менее, многие из новых семантических тегов (например, <section>, <article> или <footer>) можно применять для браузеров в смартфонах — они просто будут игнорироваться, пока не появится соответствующая поддержка. А пока мы сможем эмулировать несовместимые теги и определенные события поведения при помощи средств CSS и JavaScript.

На устройствах с наличием необходимой поддержки использование тегов <video> и <audio> позволяет пользователю при помощи атрибута src работать с мультимедийными объектами без Adobe Flash Player или любого другого плагина. Управление объектом (проиграть/пауза/остановить/регулирование громкости) осуществляется при помощи JavaScript. Есть отличный способ использования прогрессивного улучшения: для несовместимых устройств мы при помощи тегов можем вставлять дочерние элементы и использовать какой-нибудь другой способ проигрывания мультимедийного контента:

	<video src="video.avi" controls>
		<!-- Несовместимые браузеры будут отображать это -->
		<object data="player.swf" type="application/x-shockwave-flash">
			<param value="video.flv" name="movie"/>
		</object>
	</video>

В таблице 9.11 приведена информации об уровне поддержке в различных браузерах тегов HTML 5, возможности эмуляции тегов и средств управления формой.

Редактируемый контент

В HTML 5 есть атрибут под названием contenteditable, который позволяет пользователю редактировать практически любой текстовый элемент HTML. Например:

	<p contenteditable="true"> </p>
	<div contenteditable></div>

Элемент будет реагировать на такие события текстового поля как blur или focus. Практически все настольные браузеры поддерживают этот атрибут. Даже в Explorer 6 этот атрибут работает, так как изначально, это было, вообще-то, расширение именно для IE6. Применение атрибута: онлайновые инструменты для документов, электронных таблиц и управления презентациями.

Сейчас еще ни один мобильный браузер не поддерживает атрибут contenteditable, но WebKit-браузеры вроде Android и Safari способны эмулировать его поведение используя <textarea> с -webkit-appearance: none :

	<textarea style="-webkit-appearance: none"></textarea>

CSS уберет визуальное оформление (в том числе и границы) текстовой области.

Новые типы полей

Как уже упоминалось в Главе 6, в HTML 5 были добавлены новые типы полей ввода, применять которые можно на устройствах с соответствующей поддержкой. В браузерах, где такой поддержки нет будет отображено обычное текстовое поле (type=text).

Новые типы полей ввода включают в себя: number, email, search, url, color, date, datetime, time, week, month и range.

Даже когда новые поля предлагают пользователю вставить дату или числа, мы всегда будем получать эти значения в виде строки. Единственное отличие от type=»text» — своего рода визуальная подсказка, которая помогает пользователю заполнять поля: например, когда текстовое поле определяется как поля для ввода email — виртуальная клавиатура на экране меняется на ту, в которой есть символ @, с range пользователь получает слайдер, для поля даты — списки с возможностью выбора.

На момент написания этой статьи полная поддержка новых типов полей ввода была только в BlackBerry 5.0. В Safari на iOS частично поддерживаются некоторые из них и, вполне может быть, что в скором времени и другие платформы предоставят необходимую поддержку.

Типы со специфическими атрибутами — date и range (а также другие, связанные с датами, например month), добавляют два новых атрибута для обозначения граничных значений: min и max. Пример:

	<input type="date" min="2010-01-01" max="2020-01-01" id="date" />
	<input type="range" min="21" max="110" id="age" />

Новые элементы управления также понимают атрибут step. Например, отображение каждых 10 минут в поле time. Но, кажется, на момент написания этой статьи еще ни в одном мобильном браузере не была добавлена поддержка.

Списки данных

Также в HTML 5 добавлен новый тег datalist, нужный и полезный для функции автозаполнения. На момент написания этой статьи был совместим только с браузером BlackBerry версии 5.0 и выше.

Список данных мы можем определить при помощи ID и ряда дочерних элементов <option>:

<datalist id="dataCountries">
	<option>France</option>
	<option>Portugal</option>
	<option>Spain</option>
</datalist>

Потом мы можем использовать этот список для предложения возможных вариантов ввода в текстовом поле, сопоставляя атрибут list с id списка данных:

	<input type="text" id="txtCountry" list="dataCountries" />

Если список данных не связан с одним или несколькими элементами формы — у него не будет никакого UI. Когда пользователь наводит фокус на связанное текстовое поле — браузер предложит доступные для списка данных опции.

В несовместимых браузерах пользователь может увидеть значение опции. Для решения этой проблемы мы можем заменить <option>value</option> на <option label=»value» />.

Элемент <canvas>

В 90-е каждый веб-дизайнер мечтал о возможности рисования при помощи API, но только сейчас это стало возможно. <canvas> — это элемент HTML, который определяет прямоугольную область, в которой мы уже можем рисовать с использованием JavaScript API. Полученный в результате рисунок не является векторным и, соответственно, его невозможно просмотреть при помощи DOM или какого-нибудь подобного механизма. <canvas> нисколько не конкурирует с SVG — это просто другой способ генерирования динамической графики в окне браузера.

Впервые <canvas> появился благодаря Apple в WebKit и это самая старая функция в HTML 5. В Интернете ты можешь встретить множество ресурсов с использованием этого элемента.

Единственные обязательные атрибуты для элемента <canvas> — id и размеры width и height:

<canvas width="300" height="300" id="canvas">
	Здесь идет текст, изображения или другие теги для браузеров, не поддерживающих canvas
</canvas>

Контекст

Как только <canvas> определен — мы получаем то, что называется 2D-контекстом: JavaScript-объект, который мы можем использовать для рисования растровых изображений на canvas.

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

При помощи следующего кода мы можем получить указатель контекста:

var canvas = document.getElementById('canvas');
if (canvas.getContext) {
	// canvas поддерживается
	var context = canvas.getContext('2d');
}

Линии и штрихи

Когда у нас есть контекст — мы можем определять тип линии при помощи свойств цвета fillStyle и strokeStyle и целочисленного свойства lineWidth. И вот теперь мы можем начинать рисовать.

Методы рисования

В таблице 9.12 приведены доступные для 2D-контекста методы рисования.

В документации Mozilla есть отличный пример рисования кривых на холсте (canvas), который демонстрирует, как при помощи следующего кода нарисовать диалоговое окно:

	context.beginPath();
	context.moveTo(75,25);
	context.quadraticCurveTo(25,25,25,62.5);
	context.quadraticCurveTo(25,100,50,100);
	context.quadraticCurveTo(50,120,30,125);
	context.quadraticCurveTo(60,120,65,100);
	context.quadraticCurveTo(125,100,125,62.5);
	context.quadraticCurveTo(125,25,75,25);
	context.stroke();

Не забывай, что в Canvas API углы определяются в радианах, а не в градусах. Для преобразования в градусы можно использовать формулу (Math.PI/180)*degrees.

Расширенные функции

Расширенные функции canvas включают в себя текстовую тень, градиенты, масштабирование изображения, прозрачность, шрифты, стили линий, шаблоны и другие функции для рисования. Не все эти функции работают даже в тех браузерах, где есть поддержка canvas, поэтому важно принимать во внимание результаты тестов на совместимость (рис. 9.8)

Рис. 9.8. Хороший пример рисования на canvas (создается с помощью всего нескольких строк кода).

Поддержка canvas

В Таблице 9.13 перечислены браузеры, которые поддерживают базовый функционла canvas. Если тебе нужна более подробная информация, примеры или код — все можно найти на этой сайте http://www.mobilexweb.com/go/canvas.

Работа в автономном режиме

HTML 5 позволяет нам создавать веб-сайты, которые при помощи механизма AppCache могут работать в оффлайн-режиме. Сама концепция очень проста. Сначала пользователь открывает сайт в нормальном онлайн-режиме и браузер таким образом получает специальный заранее сформированный текстовый файл, который называется manifest file. В этом файле перечислены все элементы (изображения, таблицы стилей, JavaScript и др.), которые мы хотим закэшировать для дальнейшей работы в автономном режиме.

При следующем посещении этой страницы пользователем, браузер попытается снова загрузить файл manifest, чтобы отследить возможные изменения. Если файл не изменился или отсутствует соединение с Итернетом — HTML-документ загружается из кэша (так же как и все элементы в файле manifest).

Google Gears (доступен в Android) поддерживает LocalServer API, который эмулирует оффлайновый файл manifest с JavaScript API. Со временем в более новых устройствах Android этот механизм будет вытеснен и заменен средствами HTML 5.

Архитектура нашего сайта остается точно такой же, как если он был загружен с сервера. Изображения, таблицы стилей и JavaScript точно так же загружаются, но при этом мы получаем их из кэша, а не с сервера.

manifest file

manifest — это текстовый файл, который передается как text/cache-manifest и определяется как атрибут элемента <html>:

	<html manifest="oursite.manifest">

Файл должен начинаться со строки . Эта строка может сопровождаться серией относительных или абсолютных URL, которые мы мы хотим кэшировать для возможности доступа к ним в офлайновом режиме. Мы также можем прокомментировать строки, используя в начале строки решетку:

	CACHE MANIFEST
	# This is a comment
	ourscript.js
	images/logo.gif
	images/other_image.jpg
	ourstyles.css

После первоначальной загрузки страницы браузер посылает запрос для файла manifest, чтобы «увидеть» изменения (если они вносились). Если изменился хотя бы один символ — все элементы будут загружены заново.

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

	CACHE MANIFEST
	# Updated 2010-08-01

Стандарт выделяет две подгруппы в файле manifest, но в мобильных браузерах (по крайней мере сегодня) они не очень хорошо поддерживаются. В файле manifest есть три группы: CACHE — скрытая папка, которую мы определили ранее — и подгруппы NETWORK и FALLBACK. В группе NETWORK мы можем указать серию папки, домена или файлов, которые будут переданы с сервера; в группе FALLBACK мы перечисляем серии префиксов (папок или ресурсов) пар. Если получится так, что что браузер не сможет загрузить с сервера какой-то элемент или ресурс, браузер сможет использовать другую папку или ресурс, определенный в этой строке.

Помни, что элементы/ресурсы из файла manifest могут быть заново загружены только после апдейта самого файла или очистки AppCache.

Эти группы определяются следующим образом:

	CACHE MANIFEST
	# resources
	NETWORK:
	# resources
	FALLBACK:
	# folder_first_option folder_if_fail
	CACHE:
	# This list is continuing the first resource list

Обнаружение кэша

window.applicationCache это объект JavaScript представляющий механизм AppCache. У него есть свойство status которое, собственно, и говорит нам, что происходит с кэшэм в данный момент. В Таблице 9.14 перечислены возможные значения status.

Для использования AppCache нам нужно в файле HTML применять HTML 5 DOCTYPE (<!DOCTYPE html>).

Если статус кэша приложения 0 — документ загружается из Сети или из кэша приложения.

Используя метод applicationCache.update() мы можем в ручном режиме начать режим обновления кэша. Но пока страница не будет перезагружена или не будет применен метод applicationCache.swapCache() новые ресурсы не будут переданы из кэша. >

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

События кэша

Объект applicationCache поддерживает множество событий (таблица 9.15).

Отладка AppCache на iPhone

Исправление ошибок AppCache может быть довольно проблематичным. В iPhone чтобы очистить кэш нужно перейти к Settings→Safari→Clear Cache.

Если хочешь увидеть, что находится внутри AppCache, нужно в iPhone Simulator в /Library/Application Support/iPhone Simulator/User/Library/Caches/com.apple.WebAppCache/ApplicationCache.db найти базу данных SQLite.

Больше информации о дебагинге AppCache можно найти на сайте http://www.mobilexweb.com/go/appcache.

В таблице 9.16 приведена информация о поддержке AppCache в разных браузерах.

В HTML 5 есть функция Web Workers, которая позволяет JavaScript обрабатывать несколько разных потоков одновременно. На момент написания этой статьи ни один мобильный браузер не поддерживал такую возможность.

Хранилище

Возможность работать в автономном режиме — это замечательно, но здесь есть одна проблема: где веб-приложению хранить важные статистические данные и другую информацию, когда отсутствует соединение с Интернетом? Если у устройства нет доступа к соединению, как наши приложения могут получить доступ к нужной информации или базам данных? Решение этой проблемы приходит к нам в виде клиента хранения в двух вариантах: хранилище key/value и баз данных SQL (да, с JavaScript и без привлечения сервера).

Естественно, у нас есть еще и cookie, но они намного проще (доступно только строковое хранение (string storage)) и, к тому же, нет гарантий их работы в браузере.

Хранение пар ключ/значение

В HTML 5 хранение таких пар определяется двумя объектами localStorage и sessionStorage. Они во многом очень похожи, но области их применения все же различаются: локальное хранилище используется для долговременного хранения, а хранилище сеанса не сохраняется после закрытия пользователм вкладки или окна.

При сохранения отдельных элементов нужно использовать try/catch на случай, если возникают проблемы с хранением или превышен максимальный доступный для хранения объем.

Оба хранилища применяются идентично:

	// Сохраняет объект или переменную в хранилище
	localStorage.setItem("name_in_the_storage", object_to_store);
	// Считывает объект из хранилища
	var object = localStorage.getItem("name_in_the_storage");

Используя clear мы можем удалить все объекты сразу или же удалять по одному используя removeItem. Также существует событие storage, которое мы можем отследить с помощью window.addEventListener, котрое сообщит что содержимое хранилиза изменилось.

База данных SQL

Реляционная база данных в JavaScript — это звучит мощно. Основной метод определения доступности JavaScript SQL базы данных это window.openDatabase:

	var db = window.openDatabase(shortName, version, displayName, sizeExpectable);

Используя try/catch мы можем перехватывать ошибки во время выполнения операции. Этот метод открывает или создает (в случае, если мы применяем его впервые) базу данных. Чтобы выполнить какое-то действие без записи (CREATE TABLE, INSERT т.д.) мы можем выполнить транзакцию при помощи метода transact, который использует функцию как параметры. Пока транзакиция не пройдет, другие операции не доступны:

	db.transact(function(t)) {
	t.executeSql('CREATE TABLE countries (id INTEGER NOT NULL PRIMARY KEY
	AUTOINCREMENT, name TEXT NOT NULL)', [], function() {}, errorHandler);
	});

Массив параметров после строки запроса представляет собой массив из параметров которые будут заменены в запросе (используя внутри знак ?). Затем следует параметр — функция обработки данных (не используется для запросов без записей), а последний параметр — функция-обработчик ошибок в запросе.

HTML 5 не указывает, какой механизм баз данных должен использоваться. Мобильные браузеры используют SQLite (механизм баз данных с открытым исходным кодом), так что нужно проверить документацию SQLite на предмет типов данных и поддержку SQL синтаксиса.

Для создания типичного оператора SELECT с цикличным выполнением записей мы можем применять следующий шаблон:

	db.transact(function(t)) {
	t.executeSql('SELECT * FROM countries', [], countriesHandler, errorHandler);
	});
	function countriesHandler(transaction, data) {
	var record;
	var id;
	var name;
	for (var i=0; i<data.rows.length; i++) {
	// Мы получаем текущую запись
	record = data.rows[i];
	id = record['id'];
	name = record['name'];
	// Делаем что-либо с записанной информацией
	}
	}
	function errorHandler(transaction, error) {
	alert('Error getting results');
	}

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

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

Safari на iOS может в автономном режиме хранить до 5 MB информации без участия пользователя. Если ты захочешь, чтобы сохранялось больше 5 MB — пользователь уже должен дать свое согласие (пользователю покажется вопрос).

Хранилище Gears

Google Gears ( http://code.google.com/apis/gears ) — проект с открытым исходным кодом, который предоставляет расширенную функциональность для веб-браузеров и JavaScript (большая часть дополнительного функционала HTML 5). В Android 1.X поддерживается только Gears, и мы с помощью Gears можем использовать базы данных SQL. В обычном режиме применять механизм очень просто, что и доказывает следующий пример:

	<script type="text/javascript" src="gears_init.js"></script>
	<script type="text/javascript">
		var db = google.gears.factory.create('beta.database');
		db.open('countries');
		db.execute(CREATE TABLE countries (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL)');
		var rs = db.execute('SELECT * FROM countries');
		while (rs.isValidRow()) {
			var id = rs.field(0);
			var name = rs.field(1));
			// Сделать что-то
			rs.next();
		}
		rs.close();
	</script>

К счастью, Google работает над проектом с открытым исходным кодом, который позволит нам немного абстрагироваться от обоих вариантов баз данных (HTML5 и Gears) — используя, при этом тот же самый код. Проект называется Web Storage Portability Layer и всю нужную информацию можно найти на http://code.google.com/p/webstorageportabilitylayer.

В Safari на iOS можно просматривать и удалять сохраненные базы данных применяя такую последовательность действий: Settings→Safari→Databases.

Для запросов select на обоих платформах с этим новым уровнем мы можем использовать следующий код:

	var database = google.wspl.DatabaseFactory.createDatabase('countries', 'http://yourdomain/dbworker.js');
	var statement = google.wspl.Statement('SELECT * FROM countries;');
	database.createTransaction(function(tx) {
	tx.executeAll([statement], {onSuccess: function(tx, resultSet) {
		// Statement succeeded
		for(; resultSet.isValidRow(); resultSet.next()) {
		var id = resultSet.getRow()['id'];
		var name = resultSet.getRow()['name'];
	}
	}, onFailure: function(error) {
		// Statement failed
		}});
	}, {onSuccess: function() {
		// After transaction commits, before any other starts
		}, onFailure: function(error) {
		// After transaction fails, before any other starts
	}});

Клиент-хранилище JSON

Адаптированный для мобильных устройств Lawnchair локальный JSON-клиент использует функции JSON и очень простой API. Загрузить библиотеку можно здесь http://brianleroux.github.com/lawnchair.

Для создания хранилища используем такой код:

	var countries = new Lawnhair('countries');

Потом можем сохранить объект синхронно:

	countries.save({id: 5, name: 'Spain'});
	// Object saved

Потом можем сохранить объект синхронно:

	countries.save({id: 5, name: 'Spain'}, function() {
	// Object saved
	});

Также можно сохранить объект используя для легкого поиска (исправления, восстановления) пары ключ/значение:

	countries.save({key: 5, value: 'Spain'});
	var spain = countries.get(5);

Легко и просто получить все документы можно используя такой код:

	countries.all(function(country) {
	// В этой функции мы получаем каждую страну
	});

Можно также удалить документы, очистить все хранилища и создать для легкой фильтрации итерации:

Тест на веб-совместимость

В 2010 году W3C сделали тест для оценки мобильных браузеров по параметрам поддержки RIA, Ajax и HTML 5. Web Compatibility Test for Mobile Browsers доступен на http://www.w3.org/2010/01/wctmb2. Этот тест проверят браузер на совместимость с Ajax, HTML5 тегом <canvas>, атрибутом contenteditable, функцией геолокации, HTML 5 полями формы, офлайновым AppCache, HTML 5 тегами <video> и <audio>, Web Workers, локальным хранилищем, хранилищем сессии и, наконец, с @font-face. В настоящее время еще нет мобильных браузеров, которые на 100% выполняют условия теста.

Вот некоторые результаты:

• iPhone 3.0: 83%;
• Firefox 3.5 для Maemo: 83%;
• Bada Browser: 75%;
• Android 1.6–2.1: 67%;
• Opera: 33%;
• Symbian 5й выпуск: 17%;
• webOS: 17%;
• NetFront 3.5: 8.33%;

Куда дальше

• следующая — Глава 10 (скоро будет)
• предыдущая — Мобильные Rich Internet Applications
• содержание

По теме

• Структурная разметка с HTML5. Часть 1
• Структурная разметка с HTML5. Часть 2
• Секции и структура документа в HTML5