Основы разработки мобильных приложений на HTML5 для устройств Nokia

Этот пост участвует в конкурсе „Умные телефоны за умные посты".

HTML5 — новая технология, которая позволяет создавать приложения различного уровня сложности. Конечно, не все мобильные браузеры поддерживают HTML5 в полном объеме.
Новые модели Nokia поддерживают html5.

Онлайн, офлайн и LocalStorage
Самой лучшей особенностью HTML5 я считаю, является поддержка работоспособности онлайн и офлайн, и конечно же LocalStorage.
Поддержка офлайн. Т.е вы сможете запустить приложение и использовать его без необходимости подключения к интернету.
Сейчас мы рассмотрим один из важных инструментов при создании приложений — AppCache. AppCache позволяет хранить информацию локально на устройстве, и разрывы в соединении не повлияют на работоспособность приложения. Для обеспечения данной поддержки нужно создать особый файл (Манифест), содержащий список файлов для хранения локально.

CACHE MANIFEST
CACHE:
/system/js/jquery-1.7.min.js
/system/css/style.css
NETWORK:
/system/php/login.php

Параметром CACHE мы говорим браузеру, что эти файлы нужно скачать. NETWORK – указывает что здесь нам необходим интернет. Т.е вы пользовались приложением, в этот момент возникла необходимость перейти на страницу login.php, приложение автоматически подключится к интернету, и вы спокойно продолжите использование.
Но создать манифест это еще не все, нужно дать понять браузеру, что он существует. Для этого его нужно привязать к странице с помощью тега . Значение атрибута manifest- путь к файлу-манифесту.

manifest="manifest.mf"

Идем дальше.
LocalStorage — вот это очень хорошая фишка HTML5, которая позволяет хранить данные в локальной БД браузера. Кто-то может сказать, что LocalStorage похож на cookies. Но это не так, он намного удобнее и функциональнее. Суть в чем, вы на javascript прописали несколько функций и работаете как с базой данных.


Данный код создаст локальную базу, которую вы видите на скриншоте выше.

var DB;
var shorlName='TestBase';
var versionBase='1.0';
var DisplayName='TestBase';
var maxsize=65536;
    DB=openDatabase(shorlName,versionBase,DisplayName,maxsize);
    DB.transaction(
       function(transaction) {
                transaction.executeSql(
                            'CREATE TABLE IF NOT EXISTS sites'+
                            '(url TEXT NOT NULL,'+
                            'name TEXT NOT NULL);'
					                  );
							}
					);

Параметром openDatabase() мы указываем, что нужно создать базу, по указанным параметрам.
Дальше с помощью transaction мы создаем необходимые таблицы. Весь принцип работы я показывать не буду, тут используется Sql, который как заявлено в спецификации поддерживает любые sql команды. Покажу еще, как добавить данные:

transaction.executeSql('INSERT INTO testbase (text, name) VALUES ("Значение 1","Значение 2")');

Данная строка добавит данные в таблицу, если конечно она существует.


JavaScript
Для разработки мобильного приложения, можно использовать Jquery(Jquerymobile).
Jquerymobile — это фреймворк, который слепили на основе jQuery и jQuery UI, и самое главное с поддержкой HTML5. Jquerymobile отлично работает с внешними и внутренними ссылками.
Например, при переходе на другую страницу – contact.php, Jquery выдернет href и сформирует ajax запрос, если произойдет ошибка, появится окошко, оповещающее об этом.
Внутренние ссылки должны бить построены следующим образом: Ссылка
Важным атрибутом при построении страниц, является data-role. Именно по нему Jquery, будет отыскивать нужные элементы.
Foo – это уникальный идентификатор, который будет использовать Jquery. Что еще хотелось бы отметить по Jquerymobile, это поддержка тем. По сути это Css файлы, уже содержащие стилизацию для элементов интерфейса.
Приведу небольшой код:

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

<div data-role="page">

    <div data-role="header">
       <h1>Заголовок</h1>
    </div>

    <div data-role="content">
        <p>Контент</p>
    </div>

    <div data-role="footer">
        <h4>The Footer</h4>
    </div>
</div>

Как мы видим – это стандартная разметка, ничего нового нет, кроме атрибута data-role.
Железо телефона.
У многих наверное возникает вопрос, но как же написать приложение на HTML5 которое сможет использовать железо телефона(камера, память и т.д). Тут к нам на помощь приходит PhoneGap. Полный принцип работы в нем я не буду рассматривать, лишь опишу некоторые особенности.
PhoneGap – фреймворк с открытым исходным кодом, который позволит получить доступ к железкам телефона. С чем позволяет работать PhoneGap:
1. Акселерометр
2. Камера
3. Компас
4. Устройство(сбор сведений об устройстве)
5. Geolocation
6. Уведомление (Визуальные, звуковые уведомления на устройстве)
7. Сеть (Быстрая проверка состояния сети, а так же информация о сети.)
8. Capture(Захват медиафайлов.)
9. Контакты (Работа с адресной книгой устройства)
10. Файлы (Работа с файловой системой)
11. Storage
12. Media(Запись и воспроизведение аудио файлов)
Фреймворк поддерживает следующие платформы: iPhone, Android, OS, WebOS, WP7, Symbian, Bada,
С появлением новых платформ этот список расширяется. Хотя все платформы нас не интересуют. Проект находится в стадии постоянной разработки, поэтому определенные свойства некоторые системы не поддерживают, что видно на скриншоте (хотя возможно он немного устарел).


Мы видим, что Symbian не поддерживает 3 свойства, будем надеяться, что это вскоре исправят. Строка Symbian показывает, что поддерживаются не только устройства с данной системой, но и их обновления(Anna, Belle… список постоянно пополняется). Как же работает PhoneGap?