Спонсор: Microsoft
Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 314 / 17 | Длительность: 11:36:00
Специальности: Программист
Лекция 4:

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

Аннотация: История языков разметки мобильных устройств, новые элементы языка HTML5. Теги, унаследованные от предыдущих версий, неподдерживаемые теги. Основная структура кода разметки для мобильных устройств. Разметка изображений. Основы работы с аудио- и видеоданными в языке HTML5. Текстовый ввод. Ссылки и гиперссылки. Ссылки для управления функциями мобильного устройства: телефонный звонок, отсылка SMS-сообщения, добавление контакта в список контактов. Пользовательские атрибуты данных. Приводятся результаты отладки HTML5 - разметки для локального контента с использованием эмулятора мобильного устройства Windows Phone.

Использование локального 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, чтобы поэкспериментировать с их возможностями.

Таблица 5.1. Новые элементы языка HTML5
Новый тег Описание
<article> Автономная структура в документе.
<aside> Содержимое, имеющее косвенное отношение к содержимому тега
article.
<audio> Контейнер звуковых данных.
<canvas> Контейнер графической разработки.
<command> Команда, выполнение которой может быть вызвано пользователем.
<datalist> Генератор списка, применяемый вместе с элементом <input> и его новым атрибутом list.
<details> Сообщает сведения об элементе.
<embed> Внешний интерактивный подключаемый модуль или содержимое.
<figcaption> Тег подписи к элементу figure.
<figure> Заключает в себе совокупность медиаданных и подписей к ним.
<footer> Контейнер для нижнего колонтитула раздела или страницы.
<header> Контейнер для заголовка раздела или страницы.
<hgroup> Заголовок раздела в документе, содержащем множественные элементы от h1 до h6.
<keygen> Отображение элемента управления, генерирующего пару ключей.
<mark> Текстовая строка в одном документе, отмеченная или выделенная для ссылки в другом документе.
<menu> Отображает список пунктов меню
<meter> Контейнер для значений из заданного диапазона (например, процент свободного места на диске).
<nav> Отображение области документа, предназначенной для навигации.
<output> Определение степени выполнения задания любого вида.
<progress> Отображение процесса выполнения задания (как, например, процент выполнения операции загрузки).
<rp> Индикатор, используемый в аннотациях языка программирования Ruby для определения того, что должны отображать браузеры, не поддерживающие элемент <ruby>.
<rt> Выделяет текстовый компонент аннотации ruby.
<ruby> Элемент, определяющий диапазоны аннотаций ruby.
<section> Идентификатор темы для группировки на основе содержимого.
<source> Контейнер для различных спецификаций медиаресурсов.
<summary> Информация об элементе <details>.
<time> Контейнер для даты/времени.
<video> Элемент, в котором задается ссылка на видеофайл.
<wbr> Отображение возможности расстановки переносов в длинных словах или текстовых строках с помощью разрыва строки.

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

Таблица 5.2. Теги, унаследованные от предыдущих версий
Типы тегов Унаследованный тег
Структура body, head, html, title
Текст abbr, address, blockquote, bdo, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, sup, var
Ссылки a
Представление b, big, hr, i, small
Таблицы стилей style
Списки dl, dt, dd, ol, ul, li
Формы form, input, label, button, select, option, textarea, fieldset, optgroup
Простые таблицы caption, table, td, th, tr
Другое img, object, param, meta, menu, link, base, script, span

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

Таблица 5.3. Теги, неподдерживаемые в HTML5
Удаленные теги Исключены или заменены
<acronym> Заменен тегом <abbr>.
<applet> Заменен тегом <object>.
<basefont> Лучше обрабатывается средствами CSS.
<bgsound> Заменен тегом <audio>.
<big> Лучше обрабатывается средствами CSS.
<blink> Исключен из HTML5.
<center> Лучше обрабатывается средствами CSS.
<dir> Заменен тегом <ul>.
<font> Исключен из HTML5.
<frame> Исключен из HTML5.
<frameset> Исключен из HTML5.
<isindex> Заменен более совершенным тегом <form>.
<marquee> Исключен из HTML5.
<multicol>x Исключен из HTML5.
<nobr> Исключен из HTML5.
<noframes> Исключен из HTML5.
<noscript> Только в соответствии с синтаксисом HTML.
<s> Лучше обрабатывается средствами CSS.
<spacer> Исключен из HTML5.
<strike> Лучше обрабатывается средствами CSS.
<tt> Лучше обрабатывается средствами CSS.
<u> Лучше обрабатывается средствами CSS.

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

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

Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?

Александр Бут-Гусаим
Александр Бут-Гусаим
Россия, Тула
Виктор Ефремов
Виктор Ефремов
Россия