Использование локального 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 (Файл/Открыть). В дальнейшем так можно сравнивать работу настольных и мобильных браузеров.

Основная структура кода разметки

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

Заголовок должен быть максимально простым и содержать определенный с помощью тега h1 текст и/или логотип или баннер компании. Основная навигация - более пяти основных ссылок, упорядоченных по частоте использования в мобильном контексте (начиная с наиболее часто используемых). Назначение содержимого очевидно; "подвал" должен содержать краткую информацию об авторских правах, ссылку на домашнюю страницу, ссылку на предыдущую страницу и, опционально, другие относительные ссылки (например, ссылку "вверх страницы"). Конечно, это упрощенная схема, однако большинство мобильных html-страниц будут удовлетворять этой структуре. Если же страница обладает более сложной структурой, то стоит оценить ее необходимость.

Далее приведен пример простой HTML5 - разметки.

<!DOCTYPE HTML>
<html lang = "ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Список данных</title>
</head>
<body>
<header id="header">
<h2>Мои жизненные планы</h2>
</header>
<nav id="nav">
<ul>
 <li><a href="Flights">Поездки</a></li>
 <li><a href="Hotels">Гостиницы</a></li>
 <li><a href="Restaurants">Рестораны</a></li>
</ul>
</nav>
<section id="content">
<p> Надеюсь их выполнить!<p>
</section>
<footer id="footer">
<p> Создано в HTML5<p>
</footer>
</body>
</html>

Для добавления смыслового значения вместо привычных, традиционных тегов "div" в разметке использованы семантические элементы HTML5 <header>, <nav>, <section>, <footer>, добавляющие смысловое значение заключенному в них содержимому. Конечно, возможности, предоставляемые этим набором тегов, не потрясают воображение. Тем не менее, если воспользоваться CSS-стилями и рассчитанными на мобильные устройства библиотеками JavaScript (например, JQueryMobile), то сможем на основе этой разметки создать великолепную функциональность для устройств высокого класса. При этом использование простой структуры документа будет одной из лучших и позволит избежать дублирования кода.

Если приведенный выше пример набрать в блокноте, сохранив с расширением *.html, то открыв его в браузере Internet Explorer 9 (и выше) вы получите:

Результат запуска это же примера, как мобильного Cordova-виджета, в эмуляторе мобильного устройства, поддерживающего Windows Phone 8:

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

Вот некоторые из лучших практик:

Еще один пример разметки с реализацией вывода небольшого текста двумя способами - старым HTML с использованием тега <div> и более современным с семантической разметкой HTML5:

<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Управление тегами p и div</title>
</head>
<body>
<!--Старым способом-->
<div><h1>О самом главном</h1>
<p><h2>В поисках настоящей любви </h2></p>
<p><h2>Выбор профессии</h2></p>
<p><h2>Поиск места для парковки</h2></p></div>
<!--Лучше вот так -->
<header>
 <h1>О самом главном</h1>
</header>
<section>
 <h2>Поиск настоящей любви </h2>
 <h2>Выбор профессии</h2>
 <h2>Поиск места для парковки </h2>
</section>
</body>
</html>

Результат выполнения кода разметки на эмуляторе:

Разметка изображений

Иногда изображение стоит тысячи слов. Это справедливо и для мобильного Интернета. Тем не менее, всегда следует использовать оптимальное количество изображений в документе. Каждое дополнительное изображение увеличивает объем передаваемых данных, количество запросов и время загрузки. Рассмотрим тег <img>. Используйте этот тег только для следующих изображений:

Для следующих элементов тег img обычно нe используется:

Обязательными атрибутами тега img являются атрибуты src, width, height и alt. Очень важно определить ширину и высоту каждого из используемых в мобильном документе изображений с помощью атрибутов width и height. Это позволит уменьшить время первой визуализации страницы, поскольку в данном случае мобильному браузеру не требуется дожидаться загрузки изображения, чтобы узнать, сколько места оно займет, и как разместить остальное содержимое страницы.

Почти все мобильные браузеры понимают обычные форматы веб-изображений: GIF, JPEG и PNG. Лучше использовать формат PNG, поскольку, благодаря тому, что этот формат является открытым, PNG-изображение сможет отобразить практически каждый мобильный браузер. Далее приводится пример HTML5-разметки страницы, содержащей изображение. Смысловые теги позволяют улучшить читаемость кода.

<!DOCTYPE HTML>
<html lang = "ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Изображение</title>
</head>
<body>
<figure>
<img src="Images/Dog.jpg" width="800" height="900"> 
<figcaption>Бобик</figcaption>
</figure>
</body>
</html>

Результат выполнения кода настольным браузером Internet Explorer:

Результат выполнения кода в эмуляторе Visual Studio:

Основы работы с аудио- и видеоданными в языке HTML5

Возможность вставки звука на страницы позволяет разработчикам создавать самые разнообразные мобильные виджеты. Страницы, на которых есть музыка, несомненно, расширяют диапазон того, что можно сделать средствами языка HTML5. Один из наиболее интересных тегов в коллекции HTML5 - это тег <audio>. С его помощью можно воспроизводить аудиофайлы через гарнитуру мобильного устройства. Выбор звукового файла для воспроизведения имеет следующий формат:

<audio src=" jazz .mp3" </audio>

Атрибут src имеет то же назначение, что и в теге <img> - он служит ссылкой на источник файла. Однако для того чтобы аудиофайл воспроизводился на странице, нужно использовать присущие ему атрибуты. Список атрибутов для тега <audio>:

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

<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Основы работы со звуком</title>
</head>
<body>
Звук находится между линиями<br>
----------------------------------------
<br>
<audio src="jazz.mp3" autoplay></audio>
<br>
----------------------------------------
</body>
</html>

Работу этого кода также можно протестировать в любом браузере, мобильном или настольном, поддерживающим HTML5 (Примечание: замените в приведенной разметке файл "jazz.mp3" на тот, который есть у вас).

Тег <video> добавляет, воспроизводит и управляет настройками видеоролика на странице. Путь к файлу задается через атрибут src или вложенный тег <source>.

Атрибуты тега <video>:

В контейнерах <audio> и <video> можно разместить тег <source>, в котором указывается звуковой или видеофайл или его URL-адрес. Обобщенно такие файлы называются медийными. Атрибуты тега <source>:

В одном контейнере можно использовать несколько тегов <source>. В этом случае браузер конкретного мобильного устройства сам выбирает наиболее предпочтительный для себя формат файла. Пример использования <source> для двух разных форматов видеофайлов:

<video controls="" preload="auto">
   <source src="Simple.mp4"></source>
    <source src="Simple.3gp"></source>
 </video>

Текстовый ввод

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

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

В HTML для ввода текста используется тег <input> с атрибутом "text". Пример разметки, содержащей этот тег для ввода текста размером не более 15 символов:

<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ввод данных в мобильное устроство</title>
</head>
<body>
<header>
 <h1>Секретные сведения</h1>
</header>
<section>
 <p>Введите Ваш пароль:</p> <br>
 <input type="text" name ="parol" maxlength ="15" />
</section>
</body>
</html>

Результат тестирования кода приведенной разметки в браузере эмулятора:

В мобильных устройствах следует крайне осмотрительно применять многострочные поля ввода (определяемые с помощью тега <textarea>. Нельзя допустить, чтобы пользователь ввел в форму слишком много текста. Однако, возможно использовать тег <textarea>, когда требуется предоставить пользователю больше места для ввода (например, при создании сообщения электронной почты). При этом, как правило, пользователю предоставляются обычные возможности текстового ввода. В мобильном мире не очень распространено использование элементов управления для форматирования текста, которые очень сложно реализовать из-за присущих мобильным браузерам ограничений. Единственное решение состоит в том, чтобы перехватывать нажатия клавиш, используя события JavaScript и эмулировать свои собственные элементы управления.

Ссылки и гиперссылки

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

Главная страница может содержать список навигации - это любой список ссылок, расположенных друг за другом. Такие списки рекомендуется создавать с помощью тега навигации <nav>. Рассмотрим пример разметки главной страницы, содержащей три ссылки на другие страницы, которым соответствуют файлы fsguirrel.html, cats.html и dogs.html.

<!DOCTYPE HTML>
<html lang="ru">
<head>
 <style type="text/css">
body {font-size:25px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Anchors</title>
</head>
<body>
</article>
<header>
 <nav>
 <a href="fsquirrel.html">Белки-летяги</a>nbsp; | 
 <a href="cats.html">Кошки</a>nbsp; | 
 <a href="dogs.html">Собаки</a>
 </nav>
 <h1>Уход за домашними питомцами</h1>
 </header>
<section name="fsquirrel">
 <header>
 <h2>Уход за белками-летягами</h2>
 </header>
 <h3>Ангары</h3>
 <h3>ВПП</h3>
 <h3>Тренировки полетов</h3>
 <h3>Питание для полетов</h3>
 <h3>Багаж (у этих белок он большой...)</h3>
</section>
<section name="cats">
 <header>
 <h2>Уход за кошками</h2>
 </header>
 <h3>Корзинки для котят</h3>
 <h3>Когтетки</h3>
 <h3>Лотки для туалета</h3>
 <h3>Кошачья еда</h3>
 <h3>Игрушечные мыши и кошачья мята</h3>
</section>
<section >
 <div name="dogs">
 <header>
 <h2>Уход за собаками</h2>
 </header>
 <h3>Собачья будка</h3>
 <h3>Прогулки</h3>
 <h3>Питомец из собачьего приюта</h3>
 <h3>Корм для собак</h3>
 <h3>Игрушки для жевания и мячи</h3>
 </div>
</section>
<footer>
 <nav><a href="fsquirrel.html">Белки-летяги</a>nbsp; | 
 <a href="cats.html">Кошки</a>nbsp; | 
 <a href="dogs.html">Собаки</a></nav> 
</footer>
</body>
</html>

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

Ссылки для управления функциями мобильного устройства

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

Одним из таких стандартов является WTAI (Wireless Telephony Application Interface, интерфейс приложений беспроводной телефонии), входящий в стандарт WAP (созданный еще в прошлом тысячелетии). Библиотеки WTAI предусматриваются на мобильных устройствах и доступны для других приложений, таких как браузер. Для использования этих библиотек (если они доступны) применяйте следующий синтаксис:

wtai://имя_библиотеки/имя_функции [ (;параметр)*] .

Телефонный звонок

Не забывайте о том, что большинство мобильных устройств, помимо прочих функций, выполняют также функции телефона! Почему бы в таком случае не создавать ссылки для выполнения звонка? Если вы предлагаете пользователям бизнес-руководство, или даже телефонный справочник, большинство пользователей предпочтут выполнить звонок по ссылке, чем заполнять форму с помощью мобильного устройства. К счастью, существуют схемы, которые могут нам помочь. Первым стандартом де факто стала скопированная из японского стандарта i-mode схема tel: номер_телефона. Эта схема называется форматом i-mode:

<а href="tel:+79156505597">Звоню другу!</a>

Некоторые устройства также предоставляют возможность отсылать тональные сигналы после того, как на звонок ответит вызываемый абонент. Это позволяет использовать доступные в режиме тонального набора услуги, справочные системы или голосовую почту; вы можете, как бы сказать ссылке: "позвони по этому номеру телефона, когда ответит вызываемый абонент, набери цифру 2, подожди 2 секунды, а затем набери 913#". Для использования тонального набора разместите после номера телефона параметр postd, используя следующий синтаксис: postd=цифры. Можно использовать цифры, символы * и #, а также р для паузы в полсекунды и w для паузы с ожиданием тонального сигнала:

<а href="tel:+79123456789;postd=4">Звоню другу!</a>

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

Отсылка SMS-сообщения

Многие пользователи мобильных устройств используют SMS-сообщения, именно поэтому мобильные браузеры обычно позволяют открывать по ссылке окно для создания SMS-сообщения. Для этого можно использовать одну из двух доступных схем: sms:// и smsto://. К сожалению, не существует стандартного способа выяснить, какую из этих схем поддерживает браузер пользователя.

Синтаксис выглядит следующим образом:

sms[to]://[номер_назначения] [?параметры]

Можно убедиться, что номер назначения является опциональным, поэтому можно открыть окно для создания SMS-сообщения, не определяя никаких параметров. Параметры обычно определяют тело сообщения, однако некоторые мобильные устройства не поддерживают эту возможность из соображений безопасности (например, чтобы предотвратить отсылку веб-сайтом платных SMS-текстов). Как и в случае электронной почты, после активации ссылки SMS-сообщение не отсылается автоматически. Ссылка просто откроет окно для создания SMS-сообщения, после чего пользователь должен будет завершить отправку сообщения вручную. Вот пара примеров:

<a href = "sms://"> Послать SMS </a>
<a href = "sms://+3490322111"> Контакт по SMS </a>

Добавление контакта в список контактов

Иногда полезно предоставить пользователю возможность добавить контактную информацию вашей компании (только номер телефона или полную информацию) в список контактов, чтобы он мог связаться с вами впоследствии. Для выполнения этой операции на старых устройствах и новых устройствах с поддержкой WML можно использовать специальную функцию стандарта WTAI. Прибегнув к уловке, эту же функцию можно будет применить и на современных (более "умных"?) устройствах. Данной функцией является функция ap библиотеки wp, той же библиотеки WTAI, которая используется для выполнения звонка по ссылке. В качестве первого параметра задается номер телефона; опционально через точку с запятой указывается связанное с этим номером имя. Например:

<а href="wtai://wp/ap;+12 024 5 61111;White%20 House"> 
 Add <strong>White House </strong>to contacts 
</a>

Пользовательские атрибуты данных

Для того чтобы разработчикам было проще использовать и изменять кодом JavaScript данные из HTML-элементов страницы, в HTML5 был добавлен новый тип атрибута для любого элемента - специальный пользовательский тип данных data-*. Этот тип обеспечивает новый способ хранения данных из заголовков, списков, текстов или любого другого контента страницы. Имя пользовательского типа состоит из двух частей: "data-" и любого произвольного набора символов, который отражает смысл данных. Например, вы можете так определить информацию в теге <div>:

<div id ="user" data-name="Татьяна Самойлова" data-city="Смоленск"
 data-language="JavaScript" data-child_name="Михаил">
 </div>

Использовать эту информацию страницы в JavaScript -коде можно, например, так:

// фрагмент кода JavaScript
var city=user.dataset.city // присвоит переменной значение "Смоленск"
user.dataset.language='Java' //заменит на странице "JavaScript" на "Java"
user.dataset. child_name = null //очистит данные на странице