HTML5 для мобильных устройств. Примеры веб-приложений на HTML5

Иногда у разработчиков мобильных приложений возникает вопрос: создать гибридное приложения на HTML 5 по все платформы или нативное под одну? У каждого из этих вариантов есть свои плюсы и минусы. В этой статье мы рассмотрим все «за» и «против» и в конце подведем итоги.

Определения

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

Нативное (родное) приложение — приложение, созданное с использованием языка программирования и технологий определенной ОС. Например в Android приложения пишутся на Java с использовпнием фреймворка Android SDK, а в iOS используется язык программирования Objective-C или же Swift.

HTML 5-приложение — приложение, написанное основанное на HTML 5, CSS и JavaScript, и исполбзующее браузер ОС для работы.

Сравнение HTML 5 и нативных приложений

Мобильность

HTML 5 приложения могут быть портированы на различные ОС и устройства. Если при написании приложения использовалась адаптивная верстка, приложение может автоматически подстраиваться под различные размеры экранов. Если приложение обновилось, то обновление получают одновременно все устройства.

Нативные приложения, по определению, пишутся для одной ОС. Также при обновлении приложения для одной ОС, остальные не получают обновлений. Родные приложения выглядят более эстетично на различных размерах экранов, хоть это и требуется больше времени.

Победитель: HTML 5

Стоимость разработки

HTML 5-приложения, как правило, дешевле в плане разработки и поддержки, чем нативные приложения. Приложение на HTML 5 может быть разработано одним разработчиком. Нативные приложений для всех основных мобильных операционных систем обычно требуют специализированных разработчиков для каждой ОС (Java для Android, Objective-C/ Swift для iOS, C# для Windows), которые будут стоить значительно дороже, чем один веб-разработчик.

Победитель: HTML 5

Скорость и эффективность

Нативные приложения почти всегда более эффективные и быстрые, чем приложения на HTML 5. Несмотря на все попытки сделать интерпретатор JavaScript быстрее, HTML 5 не может работать быстрее нативных приложений.

Победитель: Нативные приложения

Использование «железа»

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

Победитель: Нативные приложения

Заключение

Если вам нужно разработать приложение за небольшую сумму для несколькох ОС, при этом скорость приложения не критична, выбирайте HTML 5. Если приложение использует конкретные аппаратные средства, а также большая скорость работы, то, безусловно, нужно разрабатывать нативное приложение.

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

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

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

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

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

Особенности:
Огромный охват возможностей языка
Простое управление
Подробные инструкции
Удобный интерфейс
Хорошее оформление
Актуальная информация

Вывод:
– карманный android справочник всех доступных возможностей современного языка разметки гипертекста, широко распространенного при разработках веб-страничек для сайтов.

Business Insider (BI) Intelligence специализируется на аналитике мобильного и веб-программирования. И они задались вопросом: смогут ли веб-приложения вытеснить мобильные с рынка мобильных утилит?

Что лучше?

Мобильные приложения, которые загружаются из AppMarket’ов и предназначены для использования только на Android или только iOS? Или веб-приложения на HTML5, которые могут быть запущены на любом устройстве, лишь бы имелся браузер?

BI Intelligence считает этот вопрос главным в развитии мобильного программного обеспечения. В ходе исследования ими были выявлены различия между приложениями, в частности, перспективы их развития и возможности представителей каждого из классов.

Результаты они представили в наглядной форме (англ. яз, см. ). Мы же несколько сократим объем графической информации, оставив лишь необходимое (графики, таблицы и т.п.).

Теперь доступ в сеть имеют не только ПК и ноутбуки

Объемы продаж мобильных устройств с доступом в интернет (планшетов и смартфонов) к 2012 году, согласно статистике компании Gartner, вдвое превосходили объемы продаж компьютеров (в том числе, ноутбуков). А в 2013 году этот коэффициент увеличился почти до 10! (Источник: статистика Gartner).

С точки зрения абсолютных величин, количество поставок компьютеров существенно снизилось, и такая тенденция продолжает сохраняться (хотя ситуацию на некоторое время изменил выпуск Windows 8).

Сами по себе планшеты обойдут компьютеры по объемам продаж уже в ближайшие два-три года. (также см. статистику Gratner, ссылка выше).

Так что будущее за мобильным интернетом.

Так как же мы будем общаться с нашими девайсами? Посредством интернет-версий или стационарных версий приложений? Давайте посмотрим, что же происходит сейчас на рынке программного обеспечения для старших братьев мобильных устройств – компьютеров. Уже там мы нередко делаем выбор в пользу веб-приложений: мало найдется людей, которые предпочтут Microsoft Outlook или другой почтовый клиент веб-приложению Gmail. Та же ситуация и в сфере обмена мгновенными сообщениями: переписка в социальных сетях составляет серьезную конкуренцию мобильным мессенджерам (да и не только мобильным).

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

И поэтому всего 20% своего времени пользования мобильными устройствами мы уделяем веб-серфингу.

А наши мобильные устройства уже изначально напичканы немалым количеством разного рода native приложений. Иконка браузера же может и вовсе не находиться на домашнем экране.

Однако…

HTML, язык всемирной паутины, получил новую версию – HTML5! И эта новая версия способна работать на всех мыслимых платформах. Ссылки на HTML5-приложения могут быть добавлены на рабочие столы устройств в качестве ярлыков. И многим разработчикам HTML5 по душе, ведь это все тот же, такой простой и доступный язык гипертекстовой разметки. И не приходится писать приложения для конкретной платформы: представьте, как это сокращает стоимость разработки.

Кто разработал HTML5?

World Wide Web Consortium (W3C) – консорциум всемирной паутины под руководством сэра Тима Бернерса-Ли, одного из изобретателей интернета. Какое-то время назад HTML5 еще был на стадии разработки, но сейчас доступен каждому и поддерживается всеми браузерами. И многие действительно серьезные приложения создаются на HTML5 (они работают как и традиционные мобильные приложения, но «живут в сети»): например, tradeMONSTER – приложение для биржевой торговли.

Но и у HTML5 жизнь не так легка

Между тем, HTML5 приходится преодолевать некоторые препятствия на пути к пользователю. И первое же заключается в «кросс-браузерности». К сожалению, не все браузеры поддерживают возможности HTML5 в равной степени (а кроме того, эти различия могут зависеть от версий браузеров).

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

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

И кроме того, у мобильных приложений есть серьезное преимущество: они знают об устройстве и платформе больше, чем их HTML5-аналоги. В сентябре 2012 года Марк Цукерберг признался, что считает ошибкой переход на HTML5 как полноценную замену мобильным приложениям. Того же мнения, видимо, придерживается и команда LinkedIn, создавшая свое приложение после, вероятно, неудачного опыта с HTML5.

К недостаткам веб-приложений HTML5, которые делают разработку непривлекательной, относится также и невозможность монетизации таких приложений в силу отсутствия единого рынка. Согласно расчетам BI Intelligence, HTML5-разработчики теряют суммарно около 6 миллиардов долларов по сравнению с разработчиками мобильных приложений. С другой стороны, отсутствие единого рынка служит залогом независимости от корпораций-держателей: например, не требуется верификация приложений Google или Apple. (И, к тому же, с ними не надо делиться прибылью!)

Но, видите ли, мы, пользователи, выросли на традиционном форм-факторе мобильных приложений. К чему нам что-то менять? И разработчики идут на определенные уступки: нередко HTML5-приложения запаковываются в native-оболочку, для чего существует немало различных инструментов.

Производительность HTML5-приложений

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

К тому же, очень важным в отношении использования HTML5 является вопрос безопасности: в мобильных приложениях эта проблема стоит не так остро, как в веб-приложениях.

Так что, в целом приходится признать, что у традиционных приложений есть ряд серьезных преимуществ.

Параметр

Победитель