Использование локального HTML5 контента на мобильном устройстве

Использование локального HTML5 - контента на мобильном устройстве

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

В настоящее время HTML5 - это огромный шаг к созданию единой веб-страницы для разных устройств, включая настольные компьютеры, смартфоны, планшеты, телевизионные и игровые консоли. Такой подход называется принципом "единого Интернета" (англ. "One Web"). В некоторой степени, это возможно уже сейчас, однако полной реализации принципа единого Интернета в ближайшие несколько лет ожидать не следует. Необходимо учесть, что при разработке мобильных приложений в качестве целевой платформы выступают устройства, очень сильно отличающиеся от настольных компьютеров. Самое заметное отличие представляет размер экрана, и это лишь первая проблема. Существует множество других, не столь заметных отличий. Одна из проблем состоит в том, что ситуации, в которых используются мобильные устройства, зачастую в крайней степени отличаются от тех комфортабельных условий, в которых мы используем наши настольные компьютеры, ноутбуки и нетбуки. Поэтому осуществление принципа "единого Интернета" остается открытой задачей и, чтобы обеспечить приемлемую функциональность в среде мобильного устройства, требуется некоторый учет их особенностей.

Старые языки разметки для мобильных устройств

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

HDML

HDML, первый язык разметки, специально предназначенный для мобильных устройств, появился в 1996 г. Почему же столь широко распространенный язык HTML не использовался с самого начала? Можно назвать несколько основных причин. Во-первых, в то время мобильные устройства обладали крайне низкой скоростью соединения и ограниченными вычислительными ресурсами, что потребовало создания очень небольшого браузерного механизма. Мобильный браузер не мог обработать нестрогую разметку и решить, что делать, если, к примеру, разработчик забыл закрыть какой-нибудь тег. Еще одна проблема заключалась в необходимости обеспечить в разметке специфичную для мобильных устройств функциональность, например, сочетания клавиш.

WML

WML был стандартизирован в 1998 году не консорциумом W3C (World Wide Web Consortium Консорциум Всемирной паутины), а организацией WAP Forum (позднее была преобразована в альянс ОМА), участниками которой стали ведущие игроки мобильной отрасли, занимающиеся разработкой стандартов для этого рынка. Включенный в состав стандарта WAP 1.1, язык разметки WML стал первым стандартом языка разметки для мобильных устройств. В настоящее время поддержка WML уже полностью прекращена. Любой мобильный телефон, за исключением смартфонов, по-прежнему сможет прочитать WML-разметку, но, тем не менее, этот язык следует считать не текущим стандартом, а, скорее, историческим языком, наподобие латыни.

CHTML

Одновременно с появлением языка WML в 1998 г. на рынке появился и язык CНТМL (compact HTML, компактный HTML). CHTML - это подмножество языка HTML с расширениями для поддержки таких мобильных функций, как клавиши быстрого доступа и смайлы. CHTML был утвержден в качестве стандарта консорциумом W3C, однако широко использовался главным образом в Японии, хотя отдельные реализации существовали и в других странах, таких как Голландия, Италия, Франция, Австралия и США. Ранние версии CHTML не поддерживали изображения JPEG, таблицы, фон, фреймы и таблицы стилей.

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

Новые элементы разметки языка HTML5

Тег состоит из элемента и его атрибутов. Тег обозначают в соответствии с его элементом. Например, в теге <hl> элементом является h1. Говоря о теге, мы, как правило, имеем в виду его элемент, но фактически тег составляют элемент и атрибуты.

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

Одни новые элементы, такие как <video> и <audio>, дают возможность вставлять в html-документы мультимедийные данные, представляя собой главную новинку в стандарте HTML, другие же, как, например, <ruby>, довольно специфичны, поэтому вы едва ли станете ими пользоваться, если только вам не нужны те или иные восточноазиатские символы.

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

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

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

Более подробно ознакомиться с возможностями HTML5 можно по многочисленным источникам, например [1-3], ориентированным на серверные веб-приложения.

По мере изучения возможностей HTML5, чтобы разнообразить свою деятельность, прежде чем работать с мобильным устройством или его эмулятором, рекомендуется создавать, отлаживать и просматривать приведенные ниже примеры страниц в настольном браузере. Все, что необходимо сделать, это переписать код в текстовый редактор БЛОКНОТ, сохранить с расширением .html и затем открыть в любом настольном браузере, поддерживающем HTML5 (Файл/Открыть). В дальнейшем так можно сравнивать работу настольных и мобильных браузеров.