HTML5 для мобильных устройств

HTML5 для мобильных устройств

HTML5 улучшает поддержку мобильных устройств в веб-приложениях. Новые возможности HTML 5 стандартизируют использование компонентов и технологий, общих для различных устройств. В прежних стандартах Mobile Web от WML, XHTML-MP и HTML4 часть этих возможностей просто недоступна, другая - доступна через расширения браузера, третья доступна только через специализированные API конкретных браузеров. С HTML5 расширенные возможности веб-приложений доступны всем мобильным браузерам, поддерживающим язык разметки, использующим единый, стандартный синтаксис. [1]

Содержание

Основные особенности HTML 5 для мобильных устройств

Поддержка оффлайн

AppCache и база данных делают возможным для мобильных разработчиков хранить информацию локально на устройстве, и разрывы в соединении не повлияют на способность кого-то сделать свою работу.[2]

Поддержка оффлайн помогает браузеру кэшировать статические страницы. Они больше зависят от заголовка ответа HTTP, отправленного веб-серверами, чтобы извлечь HTML, CSS и мультимедиа необходимые для того, чтобы визуализировать страницу. Если все необходимое, чтобы отобразить страницу, кэшированно, то страница загружается быстро, но если хотя бы одна часть не кэшированна, то все резко замедляется.

Чтобы обеспечить поддержку оффлайн, должна быть создана первая оффлайн декларация, и тогда она должна быть связана с браузером. В итоге, MIME должен быть размещен на сервере.[3]

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

CACHE MANIFEST
# Version 0.1
offline.html
/iui/iui.js
/iui/iui.css
/iui/loading.gif
/iui/toolbar.png
/iui/whiteButton.png
/images/gymnastics.jpg
/images/soccer.png
/images/gym.jpg
/images/soccer.jpg

После того, как декларирующий файл был создан, он должен быть связан с веб-браузером. Это делается с помощью использования элемента <html> и его атрибута manifest. Значение этого атрибута — это URL декларирующего файла.

<html manifest="manifest.mf">

Однако спецификация кэширующих деклараций заставляет браузер делать дополнительный шаг контроля данных во время загрузки и обработки кэширующей декларации. Он также обязан проверять ее MIME-тип, и этот тип должен быть text/cache-manifest.[3]

Рисование на странице

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

Поддержка видео и аудио потоков

Она находится на очень ранних стадиях и подвергается постоянным доработкам, но такие сайты, как YouTube и Pandora однажды смогут убрать Flash полностью и использовать потоки аудио и видео с синхронизированным воспроизведением и другими полезными особенностями.[4]

GeoLocation API

На самом деле это не является частью HTML 5, это отдельная спецификация. GeoLocatoin API позволяет показать ваше расположение с помощью доверенных сайтов. Широта и долгота доступны JavaScript на странице, которая по очереди может отправлять их обратно на удаленный веб-сервер и создавать иллюзию осведомления о том, где находится та или иная местная фирма, или где находитесь вы, и может показать это на карте.[5]

Ниже представлено известное API для нахождения местонахождения:

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

Geolocation — это объект, являющийся частью объекта Navigator. Он использует метод getCurrentPosition(). Нахождение местонахождения — это асинхронная операция, поскольку ему требуется разрешение пользователя для доступа. Следовательно, необходимы функции обратного вызова для положительного и отрицательного ответов.[6]

Пример

Данный пример демонстрирует функцию search в Twitter, которая ищет последние высказывания с данным ключевым словом в пределах 50-мильного радиуса от идентифицированного местонахождения. Когда пользователь вводит ключевое слово в поиск, в первую очередь проверяется, доступна ли функциональность geolocation для данного устройства, и если ответ приходит положительный, то используется функция getCurrentPosition() для нахождения местонахождения. Функция searchTwitter() принимает местонахождение как параметр. С помощью местонахождения в запрос поиска добавляются широта и долгота. Чтобы вызвать эту функцию в Twitter, используется динамический тег <script>.

<!DOCTYPE html>
<html>
    <head>
        <meta name = "viewport" content = "width = device-width"/>
        <title>Local Twitter Search</title>
        <script type="text/javascript">
            function startSearch(){
                var gps = navigator.geolocation;
                if (gps){
                    gps.getCurrentPosition(searchTwitter,
                           function(error){
                        alert("Got an error, code: " + error.code + " message: "
                              + error.message);
                     });
                } else {
                    searchTwitter();
                }
            }
            function searchTwitter(position){
                var query = "http://search.twitter.com/search.json?callback=showResults&q=";
                query += $("kwBox").value;
                if (position){
                    var lat = position.coords.latitude;
                    var long = position.coords.longitude;
                    query += "&geocode=" + escape(lat + "," + long + ",50mi");
                }
                var script = document.createElement("script");
                script.src = query;
                document.getElementsByTagName("head")[0].appendChild(script);
            }
        </script>
    </head>
    <body>
        <div id="main">
            <label for="kwBox">Search Twitter:</label>
            <input type="text" id="kwBox"/>
            <input type="button" value="Go!" onclick="startSearch()"/>
        </div>
        <div id="results">
        </div>
    </body>
</html>

[7]

Передовые формы

Даже такие простые вещи, как усовершенствования HTML 5 для форм, могут облегчить жизнь для мобильных приложений. Поля, которые могут быть утверждены браузером, являются усовершенствованием для мобильных приспособлений. Чем больше браузер может обработать, тем меньше времени нужно на загрузку кода на JavaScript и тем меньше нужно запросов серверу, если подтверждение может быть принято раньше, чем отправлена формы.[4]

Пример

Представленные ниже пример — это мобильная веб-форма для хранения счета гольфа. Основная идея состоит в том, чтобы избежать карандаша и протокола результатов на поле для гольфа. Чтобы сделать написание кода легче, используется jQuery. Такие типы веб-форм HTML5, как  “Placeholder”, “type”, “min”, “step” включены в данный пример.

<!DOCTYPE html> 
<html> 
  <head>
    <title>Golf score keeper</title>
    <script src="http://www.google.com/jsapi"></script>
    <script>
      google.load("jquery", "1.4.1");
    </script>
  </head>
  <body>
    <form action="upload.html" method="get">
      <div>
        <label for="1">Hole 1</label>
        <input type="number" min="1" value="4" name="1" size="2" step="1" />
      </div>
      <div>
        <label for="2">Hole 2</label>
        <input type="number" min="1" value="4" name="2" size="2" step="1" />
      </div>
      <div>
        <input type="email" placeholder="Enter your email address" size="40"/>
      </div>
      <div>
        <input type="submit" value="Upload Score" />
      </div>
    </form>
  </body>
</html>

[8]

Поддержка HTML 5 популярными мобильными устройствами

Mobile Web Metrics Report оценило поддержку возможностей HTML 5 в мобильных устройствах.[9] Компания проверила, какие свойства HTML 5 поддерживаются устройствами с мобильным интернетом. Для этого были проанализированы 15 наиболее популярных моделей мобильных устройств в магазинах США, Великобритании, Германии, Малайзии и Австралии.

5 возможностей с наилучшей поддержкой

  • GeoLocation API
  • поддержка веб-приложений оффлайн
  • WebStorage
  • Селекторы CSS 3
  • 2D-анимация

5 возможностей с частичной поддержкой

  • Misc-Тип элементов и его атрибуты
  • расширение концепции пользовательского взаимодействия
  • CSS 3
  • расширенная концепция форм
  • расширенная поддержка видео и аудио

5 возможностей с наихудшей поддержкой

  • Микроданные (Microdata)
  • 3D-анимация
  • FileReader API
  • IndexedDB
  • поддержка локального Device или WebWorkers

В статье делается вывод, что HTML 5 - желанное дополнение для мобильной стороны, но существует проблема фрагментация по операционным системам и устройствам.[10]

Структура для разработки приложений

С помощью HTML 5 и mobile web development появляются новые инструменты и структуры, чтобы обеспечить более согласованную и всестороннюю поддержку HTML 5 для мобильных браузеров. Вот несколько мобильных веб-структур HTML 5:

Sencha Touch

Sencha Touch – первая структура HTML 5 для мобильных устройств. Структура строит веб приложения, что имеет смысл для мобильных устройств. Она идет с встроенной и всесторонней UI виджет-библиотекой, законченной организацией события «прикосновение», с переходами CSS и богатым пакетом данных.[11]

SproutCore

SproutCore – это открытый ресурс HTML5/JavaScript для создания веб и мобильных приложений. С помощью использования Phone Gap, SproutCore приложения могут быть завернуты в родные приложения, которые запускаются на таких платформах, как iOS, Blackberry и Android.[12]

M-Project

M-Project – это структура HTML5 JavaScript, которая нацелена на платформы iOS, Android, BlackBerry и webOS. Она позволяет использовать jQuery в части JavaScript и содержит все UI и основные файлы со свойствами, такими как поддержка оффлайн, интернационализация и другие. [13]

jQTouch

jQTouch – плагин jQuery для мобильных веб разработок на iPhone, iPod Touch, Android 2.3+ и других думающих наперед устройств.[14]

Jo

Jo – структура JavaScript для браузеров и устройств, приспособленных для HTML 5. Изначально она была разработана для того, чтобы работать для мобильных платформ, таких как GUI и лучшие PhoneGap. Со времени создания Jo был хорошо протестирован как легкая структура для мобильных браузеров, более новых настольных браузеров и даже виджетов инструментальной панели.[15]

DHTMLX Touch

DHTMLX Touch – это базирующаяся на HTML 5 библиотека JavaScript для построения мобильных веб приложений. Это не только множество UI виджетов, но и законченная структура, которая позволяет создавать броские и яркие веб приложения для различных платформ мобильных и устройств с сенсорным экраном. Эта структура совместима с большинством веб браузеров для мобильных платформ. Приложения, созданные при помощи DHTMLX Touch успешно работают на iPad, iPhone, смартфонах на основе Android и других популярных устройствах.[16]

WorkLight

WorkLight – это платформа мобильных приложений, которая поддерживает разработки HTML 5, а также гибридные и родные приложения. IDE-платформы WorkLight Studio позволяют мобильным разработчикам полностью использовать всю существующую функциональность HTML 5, а также дополнительно улучшать возможности утилит и алгоритмов, таких как шифрование локально хранящихся данных, оффлайн авторизация, объединение HTML 5 и родного кода, связь с другими структурами (PhoneGap, Sencha Touch, JQuery, и другие), необходимых новым организациям.[17]

MobileNationHQ

MobileNationHQ – это базирующийся на вебе инструмент, который используется парадигмами визуального программирования для того, чтобы помочь созданию мобильных приложений на HTML 5 для iOS и Android. Этот инструмент также поддерживает интеграцию обычного JavaScript.[18]

Проблемы с HTML 5 в мобильных устройствах

Связанные с видео

В iPhone и iPad

iOS — это операционная система Apple, которая используется в iPhone, iPod Touch и iPad. IOS версии 3.2 сталкивается с некоторыми проблемами с HTML 5-видео.

  • iOS не распознает видео, если использовать аттрибут poster. Этот атрибут элемента [[<video>]] позволяет отображать простую картинку, пока видео загружается, или пока пользователь не нажмет воспроизведение. Эта ошибка была обнаружена в iOS версии 4.0
  • Если размножить элементы source, iOS распознает только первый. С тех пор, как устройства iOS поддерживают только H.264+AAC+MP4, MP4 должен быть первым. Эта ошибка также была обнаружена в iOS версии 4.0[19]

В телефонах, поддерживающих Android

В операционной системе Android младше версии 2.3 найдены следующие проблемы при работе с видео средствами HTML 5:

  • В элементе source атрибут type заставляет устройство на базе ОС Android "задумываться". Распознать видео-ресурс можно лишь опустив атрибут type полностью, и гарантировав, что имя вашего H.264+AAC+MP4 видео файла заканчивается расширением .mp4. Вы можете все же включить атрибут type на другие видео ресурсы, так как H.264 - единственный видео-формат, поддерживаемый Android начиная с версии 2.2.(Эта ошибка была обнаружена в Android версии 2.3)
  • Атрибут controls не поддерживается. Нет никаких отрицательных эффектов от его использования, но Android не покажет никаких пользовательских систем управления интерфейсом для видео. Вам придется создавать собственную систему управления интерфейсом. Как минимум, вам придется написать скрипт, который начинает воспроизведение, когда пользователь нажимает на видео. Эта ошибка также была обнаружена в Android версии 2.3. [19]

В телефонах, поддерживающих Windows Phone 7

Windows Phone 7 – это операционная система Microsoft, которая используется в различных телефонах и переносных устройствах. Браузер на ОС версии меньшей, чем 7.5 (Mango) имеет множество проблем с HTML 5 [20]

См. Также

Приложение

  1. ↑ HTML5 and Mobile Web 8 Июня 2010 года Gail Rahn Frederick
  2. ↑ HTML5 from a Mobile Perspective 22 Июля 2009 года Jason Grigsby
  3. ↑ 1 2 Make mobile Web applications work offline with HTML 5 , Michael Galpin, 29 Июня 2010 года
  4. ↑ 1 2 3 How HTML5 will change the use of web 1 Декабря 2009 года Kevin Purdy
  5. ↑ GeoLocation API Mark Pilgrims ,Dive Into HTML5
  6. ↑ Java Script Geo location Framework for the Mobile Web code.google.com
  7. ↑ Combine HTML 5, geolocation APIs, and Web services to create mobile mashups , Michael Galpin, 29 Июня 2010 года,
  8. ↑ Mobile HTML5, Ian Sefferman
  9. ↑ Netbiscuits 28 Февраля 2011 года, Netbiscuits
  10. ↑ Mobile Metrics Report 2011, Press Release 28 Февраля 2011 года Netbiscuits
  11. ↑ Sencha Touch
  12. ↑ SproutCore
  13. ↑ The M Project 21 Января 2011 года
  14. ↑ jqtouch.com
  15. ↑ Jo
  16. ↑ DHTMLX Touch
  17. ↑ WorkLight
  18. ↑ MobileNationHQ
  19. ↑ 1 2 Mark Pilgrim: Dive Into HTML5
  20. ↑ how well does your browser support HTML5?


Внешние ссылки


Wikimedia Foundation. 2010.

Игры ⚽ Поможем написать реферат

Полезное


Смотреть что такое "HTML5 для мобильных устройств" в других словарях:

  • Разработка приложений для мобильных устройств — Разработка приложений для мобильных устройств  это процесс при котором приложения разрабатываются для небольших портативных устройств таких как КПК, смартфоны или сотовые телефоны. Эти приложения могут быть предустановлены на устройство в… …   Википедия

  • HTML5 — (HyperText Markup Language) Расширение …   Википедия

  • Adobe Flash — У этого термина существуют и другие значения, см. Flash. Сюда перенаправляется запрос «Adobe Flash Player». На эту тему нужна отдельная статья. Adobe Flash …   Википедия

  • Mozilla Firefox — Запрос «Firefox» перенаправляется сюда; см. также другие значения …   Википедия

  • Opera — Иное название этого понятия  «Опера»; см. также другие значения. Opera …   Википедия

  • История браузера Opera — Основная статья: Opera История браузера Opera началась в 1994 году, прототипом будущего браузера стала разработка компании Televerket  крупнейшей телекоммуникационной компании Норвегии. В 1995 году проект выделился в разработку специально… …   Википедия

  • Symbian OS — Разработчик Nokia Семейство ОС Symbian Последняя версия Nokia Belle …   Википедия

  • Адаптивный веб-дизайн — (англ. Responsive web design)  дизайн веб страниц, обеспечивающий отличное восприятие на различных устройствах, подключённых к интернет. Целью адаптивного веб дизайна является универсальность веб сайта для различных устройств. Для того,… …   Википедия

  • Android — (Андроид) Операционная система Андроид от Google История развития Android, обновления Android, Android Market Содержание Содержание Раздел 1. Характеристики операционной системы . Android — это портативная (сетевая) операционная система для …   Энциклопедия инвестора

  • OpenStreetMap — OpenStreetMap …   Википедия


Поделиться ссылкой на выделенное

Прямая ссылка:
… Нажмите правой клавишей мыши и выберите «Копировать ссылку»