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

Материал из Википедии — свободной энциклопедии
Перейти к: навигация, поиск

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

Предпосылки[править | править исходный текст]

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

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

  • Доступ к интернету не только по Wi-Fi, но и через сотовую сеть. Такой интернет может давать несколько сотен килобайт в секунду, но со значительным (до секунды) пингом.
  • Даже в крупных городах нет сплошного покрытия интернетом. Связь может время от времени пропадать.
  • Текст вводится с экранной клавиатуры. Чтобы упростить беглый ввод, «клавиш» намного меньше, чем на компьютерной клавиатуре — поэтому, чтобы меньше переключать регистры, делают отдельные клавиатуры для текста, цифр и адресов электронной почты.
  • Даже если нет GPS-приёмника, месторасположение устройства можно приблизительно узнать по сигналу мобильных сот или WiFi-радиоточек. Это позволит вывести нужный фрагмент карты и сэкономить дорогостоящий мобильный трафик.
  • В ОС включены жёсткие меры контроля доступа. Это не даёт вредоносному ПО (которое может следить за передвижениями пользователя и расходовать его деньги) без ведома пользователя инсталлироваться на устройстве, но и исключает плагины к браузеру. Некоторые развлекательные сайты (например, YouTube) полагаются на плагины, так что требуется какая-то замена. За неимением другого, в первых моделях iPhone сделали особый клиент для YouTube — но это, разумеется, полумера.
  • Из-за небольшого (по сравнению с ноутбуком) экрана страницу часто приходится перевёрстывать. Хотелось бы дать браузеру подсказки, как именно это делать. Например: превратить две колонки в одну, перенести навигационную панель на верх страницы, и т. д.

Основные особенности HTML 5 для мобильных устройств[править | править исходный текст]

Поддержка офлайн-работы[править | править исходный текст]

При работе в общественном транспорте сеть то появляется, то исчезает. Также в радиотелефонных сетях, как правило, большой пинг (до секунды), и даже одна незакэшированная картинка или CSS может добавить секунду или две к времени загрузки страницы. Чтобы в такой ситуации веб-приложение надёжно работало, HTML 5 позволяет хранить информацию у клиента. Для этого применяются две спецификации: AppCache позволяет держать на устройстве неизменяемую часть веб-приложения,[2], а база данных — хранить у клиента сотни килобайт пользовательских данных.

Для работы AppCache нужно создать особый текстовый файл — так называемый «манифест мобильного приложения» или «манифест кэша». В нём хранится список всего, что не изменяется и может понадобиться приложению. Как правило, в манифест добавляется какой-нибудь комментарий, который меняют, как только какой-нибудь файл изменился.[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

Этот файл нужно передать веб-браузеру. Это делается в новом атрибуте manifest элемента <html>.

<html manifest="manifest.mf">

Если сервер сообщает, что файл манифеста изменился, браузер по очереди проверяет все ресурсы, содержащиеся в этом файле. MIME-тип файла должен быть text/cache-manifest.[3]

Рисование на странице[править | править исходный текст]

«Холсты» — особые области на странице, на которых можно программно рисовать всё, что угодно: интерактивные картинки, таблицы и диаграммы, компоненты игр и другие задумки, которые могут взаимодействовать с пользователем, причём в Flash или других плагинах нет необходимости.[4]

Поддержка видео- и аудиопотоков[править | править исходный текст]

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

API геолокации[править | править исходный текст]

Геолокация — определение положения пользователя на карте с помощью навигационной спутниковой системы, привязки к сотам мобильного оператора или MAC-адресам близлежащих WiFi-радиоточек — это не неотъемлемая часть HTML 5, а отдельная спецификация. Доверенные сайты через специальное JavaScript-API могут получать широту, долготу, высоту над уровнем моря и направление движения пользователя, отправлять эти координаты на сервер и показывать карту окрестностей.[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]

Пример[править | править исходный текст]

Представленный ниже пример — это мобильная веб-форма для хранения счёта игры в гольф (для простоты приведены только две лунки, а не восемнадцать). Для тех браузеров, которые HTML 5 не поддерживают, используется jQuery. Здесь показано применение свойств 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">Лунка 1</label>
        <input type="number" min="1" value="4" name="1" size="2" step="1" />
      </div>
      <div>
        <label for="2">Лунка 2</label>
        <input type="number" min="1" value="4" name="2" size="2" step="1" />
      </div>
      <div>
        <input type="email" placeholder="Ваш e-mail" size="40"/>
      </div>
      <div>
        <input type="submit" value="Отправить счёт" />
      </div>
    </form>
  </body>
</html>

[8]

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

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

5 возможностей с наилучшей поддержкой[править | править исходный текст]

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 для создания веб и мобильных приложений.

M-Project[править | править исходный текст]

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

jQTouch[править | править исходный текст]

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

Jo[править | править исходный текст]

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

DHTMLX Touch[править | править исходный текст]

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

WorkLight[править | править исходный текст]

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

MobileNationHQ[править | править исходный текст]

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

Проблемы с 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[18]

В устройствах, поддерживающих 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. [18]

В устройствах, поддерживающих Windows Phone 7[править | править исходный текст]

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

См. Также[править | править исходный текст]

Приложение[править | править исходный текст]

  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 Pilgrim, 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. The M Project 21 Января 2011 года
  13. jqtouch.com
  14. Jo
  15. DHTMLX Touch
  16. WorkLight
  17. MobileNationHQ
  18. 1 2 Mark Pilgrim: Dive Into HTML5
  19. how well does your browser support HTML5?


Внешние ссылки[править | править исходный текст]