03-08-2023
HTML5 улучшает поддержку мобильных устройств в веб-приложениях. Новые возможности HTML 5 стандартизируют использование компонентов и технологий, общих для различных устройств. В прежних стандартах Mobile Web от WML, XHTML-MP и HTML4 часть этих возможностей просто недоступна, другая - доступна через расширения браузера, третья доступна только через специализированные API конкретных браузеров. С HTML5 расширенные возможности веб-приложений доступны всем мобильным браузерам, поддерживающим язык разметки, использующим единый, стандартный синтаксис. [1]
Содержание |
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]
На самом деле это не является частью 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>
Даже такие простые вещи, как усовершенствования 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>
Mobile Web Metrics Report оценило поддержку возможностей HTML 5 в мобильных устройствах.[9] Компания проверила, какие свойства HTML 5 поддерживаются устройствами с мобильным интернетом. Для этого были проанализированы 15 наиболее популярных моделей мобильных устройств в магазинах США, Великобритании, Германии, Малайзии и Австралии.
В статье делается вывод, что HTML 5 - желанное дополнение для мобильной стороны, но существует проблема фрагментация по операционным системам и устройствам.[10]
С помощью HTML 5 и mobile web development появляются новые инструменты и структуры, чтобы обеспечить более согласованную и всестороннюю поддержку HTML 5 для мобильных браузеров. Вот несколько мобильных веб-структур HTML 5:
Sencha Touch – первая структура HTML 5 для мобильных устройств. Структура строит веб приложения, что имеет смысл для мобильных устройств. Она идет с встроенной и всесторонней UI виджет-библиотекой, законченной организацией события «прикосновение», с переходами CSS и богатым пакетом данных.[11]
SproutCore – это открытый ресурс HTML5/JavaScript для создания веб и мобильных приложений. С помощью использования Phone Gap, SproutCore приложения могут быть завернуты в родные приложения, которые запускаются на таких платформах, как iOS, Blackberry и Android.[12]
M-Project – это структура HTML5 JavaScript, которая нацелена на платформы iOS, Android, BlackBerry и webOS. Она позволяет использовать jQuery в части JavaScript и содержит все UI и основные файлы со свойствами, такими как поддержка оффлайн, интернационализация и другие. [13]
jQTouch – плагин jQuery для мобильных веб разработок на iPhone, iPod Touch, Android 2.3+ и других думающих наперед устройств.[14]
Jo – структура JavaScript для браузеров и устройств, приспособленных для HTML 5. Изначально она была разработана для того, чтобы работать для мобильных платформ, таких как GUI и лучшие PhoneGap. Со времени создания Jo был хорошо протестирован как легкая структура для мобильных браузеров, более новых настольных браузеров и даже виджетов инструментальной панели.[15]
DHTMLX Touch – это базирующаяся на HTML 5 библиотека JavaScript для построения мобильных веб приложений. Это не только множество UI виджетов, но и законченная структура, которая позволяет создавать броские и яркие веб приложения для различных платформ мобильных и устройств с сенсорным экраном. Эта структура совместима с большинством веб браузеров для мобильных платформ. Приложения, созданные при помощи DHTMLX Touch успешно работают на iPad, iPhone, смартфонах на основе Android и других популярных устройствах.[16]
WorkLight – это платформа мобильных приложений, которая поддерживает разработки HTML 5, а также гибридные и родные приложения. IDE-платформы WorkLight Studio позволяют мобильным разработчикам полностью использовать всю существующую функциональность HTML 5, а также дополнительно улучшать возможности утилит и алгоритмов, таких как шифрование локально хранящихся данных, оффлайн авторизация, объединение HTML 5 и родного кода, связь с другими структурами (PhoneGap, Sencha Touch, JQuery, и другие), необходимых новым организациям.[17]
MobileNationHQ – это базирующийся на вебе инструмент, который используется парадигмами визуального программирования для того, чтобы помочь созданию мобильных приложений на HTML 5 для iOS и Android. Этот инструмент также поддерживает интеграцию обычного JavaScript.[18]
iOS — это операционная система Apple, которая используется в iPhone, iPod Touch и iPad. IOS версии 3.2 сталкивается с некоторыми проблемами с HTML 5-видео.
poster
. Этот атрибут элемента [[<video>
]] позволяет отображать простую картинку, пока видео загружается, или пока пользователь не нажмет воспроизведение. Эта ошибка была обнаружена в iOS версии 4.0В операционной системе 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 – это операционная система Microsoft, которая используется в различных телефонах и переносных устройствах. Браузер на ОС версии меньшей, чем 7.5 (Mango) имеет множество проблем с HTML 5 [20]
HTML5 для мобильных устройств.