Статьи

Приложения HTML5: что, почему и как

Март 7, 2019

Если вы хотите создавать веб-приложения, вы можете подумать об использовании HTML5. HTML5 — новая горячая черта, когда дело доходит до разработки приложений, и он может изменить способ производства и продажи программного обеспечения. Это также активирует миллионы людей, которые знают, как создавать веб-страницы, и никогда не думали, что их навыки могут быть использованы для чего-то другого. Но прежде чем перейти к разработке, вы должны кое-что знать о HTML5. В этом уроке я научу вас основам!

Что такое HTML5?

HTML5 — это спецификация W3C .

Это началось в WHATWG и является будущим золотым стандартом для HTML. Если вы были здесь некоторое время, вы знаете, что XHTML 2 была следующей основной версией, но она развалилась. Причины могут быть разными, но одно из основных утверждений состояло в том, что лишь немногие веб-сайты используют идеальный синтаксис, и XHTML 2 собирался обеспечить идеальный синтаксис. Также всегда было чрезвычайно сложно точно сказать, что такое совершенный синтаксис. Когда производители браузеров поняли, как трудно будет перейти на XHTML 2, все просто рухнуло.

В этот момент группа людей откололась от W3C и начала WHATWG. Эти ребята хотели переосмыслить не только HTML, но и весь процесс разработки стандартов. Они начали работу над новым стандартом HTML5. Они исходили из принципа, что нет идеального, и не их задача рассказать миру, как делать HTML. Вместо этого они сфокусировались на том, что происходит в реальном мире HTML.

Они также нашли время, чтобы кодифицировать некоторые соглашения, которые возникли в сообществе. Вот откуда появилось много новых элементов в спецификации HTML5 (например, индикатор выполнения, видео и аудио теги). Люди делают должное, и они просто хотели сделать определенные части разметки, чтобы помочь людям делать то, что они уже делали.

Помимо разметки, WHATWG начала создавать несколько новых API-интерфейсов JavaScript. Именно здесь HTML5 начал выглядеть как «приложение». Они создали стандарты для автономного хранения данных и автономного кэша приложений, чтобы целые приложения могли храниться в автономном режиме. Они также создали новые рабочие группы вокруг виджетов и доступа к устройствам (для использования таких устройств, как камеры и акселерометры).

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

WHATWG и другие всегда думали, что перехват браузера не был хорошей идеей. Что обычно рекомендуют сейчас, так это прогрессивное улучшение . Короче говоря, прогрессивное улучшение это. Вместо того, чтобы просто решить, что один браузер получит опыт Y, а другой — опыт Z, почему бы не обнаружить поддержку расширенных функций и создать отличный опыт? Если в какой-то момент браузер не поддерживает расширенную функцию X, пользователь просто получит опыт по умолчанию.

Последний пронумерованный спек

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

Так что же такое приложения HTML5?

Что такое HTML5 с определением HTML5?

По сути, приложение HTML5 использует все новые блестящие элементы черновика HTML5 для создания приложения, похожего на приложение.

Это означает, что данные должны храниться в автономном режиме, быть функциональными и работать как настоящее приложение, а не просто как контент для прочтения. Вы, наверное, сейчас используете веб-приложения, такие как Gmail. Gmail на самом деле имеет версию HTML5; если вы посещаете Gmail на iPhone или iPad, вы можете проверить это.

Почему я должен использовать HTML5?

Почему я хотел бы использовать HTML5 вместо Objective-C, Flash, Silverlight или какой-либо другой среды, специфичной для устройства? Во-первых, есть пара причин не использовать HTML5.

  1. Если бы я делал последнюю лучшую 3D-игру, я бы не использовал HTML5. Он просто не имеет богатых графических библиотек, необходимых для создания таких интенсивных игр; тем не менее, они работают над стандартами, позволяющими загружать 3D-программы в браузер.
  2. Если вам нужно использовать камеру на устройствах или в локальной файловой системе, HTML5 не будет лучшим выбором. Существуют обходные пути, использующие встроенную оболочку, о которой я расскажу в ближайшее время, а также появятся некоторые стандарты, которые помогут с этим.

Несмотря на то, что существуют конкретные случаи неиспользования HTML5, многие приложения, выпускаемые сегодня для iOS и Android, могут работать так же легко в HTML5. Помимо технической возможности сделать это, есть и другие веские причины использовать HTML5.

Вы уже знаете, как его использовать

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

Чем больше мы работаем со стандартами, тем полезнее они становятся.

Кроме того, веб-разработчики уже понимают кросс-браузерные проблемы. Хотя кросс-браузерных проблем будет больше, чем когда-либо, у веб-разработчиков есть явное преимущество перед другими разработчиками, потому что они уже имеют это в своем кармане. Другая часть кросс-браузерной разработки — это стандарты. Чем больше мы работаем со стандартами, тем полезнее они становятся. В некотором отношении веб-разработчики возглавили эту задачу, и теперь она окупается. Вместо того, чтобы изучать совершенно другое не отвечающее стандартам дополнение, вы можете просто положиться на то, над чем работали органы по стандартизации.

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

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

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

Как я могу использовать HTML5?

На самом деле использование HTML5 не так сложно. Он может варьироваться от пары строк кода до написания совершенно нового приложения. Вот несколько способов начать.

1. Создайте мобильный дружественный сайт

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

  <HTML>
     <Голова>
         <meta name = "viewport" content = "user-scalable = no, width = device-width" /> 
     </ HEAD>

Метатег viewport еще не является стандартом, но это широко распространенное соглашение. Многие мобильные браузеры используют этот тег для настройки определенных аспектов рендеринга веб-страниц.

Более подробную информацию о видового экрана, проверьте следующую документацию:

Помимо только области просмотра, убедитесь, что ваши веб-страницы являются гибкими; например, используйте динамическую ширину вместо статической ширины. Мобильные устройства имеют все формы и размеры, как окна браузера. Проектирование с идеей гибкости автоматически сделает ваши веб-страницы более мобильными.

Доктип

Отличная небольшая новость о следующей версии HTML5 заключается в следующем: doctype пошел по пути додо. Это все еще должно быть там, по многим причинам, но оно сморщилось, чтобы означать почти ничего.

1
<!DOCTYPE html>

Это круто. Нам больше не нужно копировать и вставлять длинную строку текста, потому что кто вообще может это запомнить?

2. Переведите ваш сайт в автономный режим

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

Однако кеш приложения не может быть изменен только путем изменения разметки. Вам понадобится возможность менять заголовки типа контента на сервере. Чтобы сделать это в Apache, вы можете поместить это в файл конфигурации или в файл .htaccess.

1
AddType text/cache-manifest manifest

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

1
<html manifest=»my.manifest»>

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

1
2
3
4
5
6
7
8
CACHE MANIFEST
 
# Version 1
 
my.html
my.css
my.js
my.png

Когда у вас все это настроено, проверьте это в браузере, который поддерживает кэш приложения.

Если вам нужно обновить ресурс, просто измените файл манифеста. Даже добавление комментария предложит браузеру обновить кэш приложения.

Кэш приложений, как известно, трудно отлаживать. В этой книге есть несколько хороших методов проверки состояния кэша вашего приложения.

3. Сделайте ваши видео доступными везде

Если вы размещаете видеоконтент на своем сайте и используете для его воспроизведения флэш-плеер, вы упускаете возможность показывать видео людям, использующим устройства iOS и телефоны, которые не поддерживают флэш-память (а это большинство телефонов).

HTML5 имеет два новых тега, которые облегчают отображение мультимедиа: audio и video . Вот пример video тега.

1
<video src=»myvideo.mp4″ controls />

Теперь, если вы хотите поддерживать как можно больше браузеров, вам нужно будет закодировать ваш контент в нескольких разных форматах. Затем перечислите их так.

1
2
3
4
5
<video poster=»myvideo.jpg» controls>
    <source src=»myvideo.m4v» type=»video/mp4″ />
    <source src=»myvideo.ogg» type=»video/ogg» />
    <embed src=»/to/my/video/player»></embed>
</video>

Это гарантирует, что ваш контент можно увидеть в Firefox, Safari, Chrome и мобильных телефонах. Наконец, для браузеров, которые не поддерживают тег video , вы все равно можете использовать флэш-плеер. Когда браузер не поддерживает тег, он, как правило, просто не будет иметь с ним дело и продолжит повторение до тех пор, пока не найдет тег, который он знает. Таким образом, если вы поместите embed или object внутри тега video , браузер, такой как IE, будет использовать этот object . Однако браузер, поддерживающий тег video будет игнорировать встроенную вспышку.

Вывод: начните использовать теги HTML5 сегодня

Такие теги, как header, footer, nav, aside, article и section хороши тем, что они семантические. Они информируют потребителей веб-страницы о ваших намерениях в отношении вашего контента. Приятно ими пользоваться. В будущем они будут более полезными, чем сейчас, но ничто не мешает вам использовать их сегодня.

Некоторые браузеры, такие как IE, будут «волноваться», если вы будете использовать эти новые теги, но не беспокойтесь. IE поддерживает добавление типов тегов в DOM, вам просто нужно проинформировать IE о них. Чтобы исправить это, Реми Шарп создал HTML5 Shiv . Если вы включите это в заголовок своей веб-страницы в условном комментарии IE, ваша страница будет отображаться очень хорошо.

Теперь вы используете семантически полезный HTML!

Бонус: продавайте свои приложения в магазине приложений

Да, прямо сейчас вы можете взять свои приложения HTML5 и продавать их в магазинах мобильных приложений. Два проекта помогают людям разрабатывать «нативные» мобильные приложения, используя только HTML, JavaScript и CSS. Проверьте это:

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

Чтобы подготовиться к категории, мы запустили конкурс с призами на сумму 7000 долларов . У вас есть две недели, чтобы войти , если это вас интересует!

Завершение

Ничто не должно помешать вам изучить HTML5, и если вы хотите быть впереди игры, вам следует создавать приложения HTML5 прямо сейчас. Спасибо за прочтение!

об авторе

35
Share: