Программа html5 что это

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

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

Что такое HTML5?

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

Семантическая верстка сайта / Что я об этом думаю / HTML5 тэги

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

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

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

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

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

Что такое HTML?

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

Это приводит к другому пункту о спецификации 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. Создайте мобильный дружественный сайт

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

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

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

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

Доктип

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

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

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

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

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

AddType text/cache-manifest manifest

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

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

Источник: coderlessons.com

Зачем нам нужен HTML5: пять простых ответов

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

1. HTML5 — новый подход к разметке: мультимедиа внутри

В отличие от разработанного ещё в девяностых языка разметки HTML4, когда даже относительно несложный мультимедийный контент был слишком «тяжёлым» для подавляющего большинства пользователей интернета, в 2004 году, в котором фактически началась работа над новой версией стандарта, в Сети уже вовсю шло распространение аудио- и видеозаписей, как официальное, так и неофициальное. Хорошим тоном для веб-сайтов стало размещение на своих страницах анимационных фильмов и видеороликов, вошли в моду аудиоблоги-подкасты.

Однако действующий стандарт не предусматривал описания мультимедийного контента средствами самого языка: для этого использовалась функция вставки некоего объекта («object»), возможность воспроизведения которого зависела от того, установлены ли в браузере клиента совместимые с таким контентом дополнительные плагины третьих разработчиков.

Говоря о подобных плагинах, мы прежде всего имеем в виду Adobe Flash, QuickTime или менее распространённые Real Player и Silverlight. Всё это — «надстройки», дополнения к браузерам, не являющиеся их составной частью и выполняющие роль неких посредников, которые преобразуют загружаемый цифровой контент в видео и звук.

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

В стандарте HTML5, представляющем собой сочетание собственно HTML, а также CSS и JavaScript, изначально реализуется принципиально иной подход, в котором медиаконтент представляет собой неотъемлемую часть кода страницы. HTML5 обеспечивает единый стандартный способ описания (синтаксис) встраиваемого в страницы аудиовизуального контента.

Для интеграции аудио или видео в HTML5 достаточно использовать простой набор тэгов, описывающих, какой тип контента вы намерены поместить («video» или «audio»), и обычные ссылки на соответствующие медиафайлы.

Разумеется, у HTML5 есть и множество других нововведений, но это самое главное из них — изменение идеологического подхода.

2. Проблема обратной совместимости: сначала HTML, потом плагины

К сожалению, в мире остаётся значительная часть пользователей, у которых установлены устаревшие браузеры, вполне их устраивающие, но не поддерживающие все возможности HTML5. Прежде всего, речь идёт об Internet Explorer версии 8, до сих пор считающейся самой популярной для этого браузера. Последующие версии — IE 9 и 10 — уже практически полностью поддерживают HTML5. Что касается Chrome, Opera и Safari, то они уже в течение нескольких лет способны обрабатывать теги «video» и «audio».

Тем не менее для обеспечения обратной совместимость в HTML5 сохраняется поддержка использования плагинов (тега «object»), но по схеме «сначала HTML, а потом уже плагины». Это означает, что браузер должен сначала осуществлять рендеринг страницы с использованием тегов «video» и «audio» — и лишь при невозможности сделать это применять код плагинов.

Для обеспечения правильного функционирования такого подхода можно использовать одну из множества доступных библиотек JavaScript, часть из которых предоставляет полностью интегрированный программный интерфейс (API) для управления как HTML-контентом, так и встроенными объектами. Среди них, в частности, можно назвать Projekktor или программный видеоплеер Video.js, обеспечивающие полную совместимость как с HTML5, так и со старыми браузерами, в которых применяются плагины.

3. Единый подход к десктопным и мобильным платформам

Поддержка нового стандарта HTML5 обеспечивается и практически на всех современных мобильных устройствах, включая iOS, Android и Windows Phone, в чём заключается ещё одно его важное достоинство. Веб-мастеру уже не нужно размещать несколько версий медиаконтента для «полноценных» компьютеров и мобильных устройств. Известно, что iOS полностью несовместима с Flash, а ОС Android совместима лишь частично. В случае с HTML5 эта проблема полностью снимается.

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

4. Поддержка разных форматов видео и звука

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

Самые популярные контейнеры для интернет-видео — это AVI, MP4, FLV и WebM, а основных «сетевых» видеокодеков всего три: H.264, Ogg Theora и VP8. При этом каждому кодеку обычно (но далеко не всегда) лучше всего соответствует свой формат контейнера: H.264 — MP4, Theora — OGG, VP8 — WebV.

Кодек H.264 сжимает видео с потерями, чтобы получить файл высокого качества, но небольшого размера. При этом спецификация предусматривает несколько профилей с разным качеством и степенью сжатия, чтобы на маломощные мобильные устройства можно было транслировать «лёгкие» файлы, а на десктопы с широкополосными доступом — более качественное видео.

Хотя H.264 — коммерческий кодек, то есть предполагает лицензионные отчисления, он наиболее универсален: его встроенная поддержка есть в Internet Explorer, Chrome, Firefox, Safari, iOS и Android, а отсутствует лишь в Opera, где такое видео декодируется только через внешний плагин.

Кодек Ogg Theora, изначально рассчитанный на системы под Linux, вначале тоже был коммерческим, но теперь лицензируется бесплатно. Встроенная поддержка имеется в браузерах Chrome, Firefox и Opera, в Internet Explorer и Safari доступен только через плагины.

Кодек VP8, ориентированный на мобильные устройства, распространяется Google на условиях Open Source и обеспечивает качество, сходное с H.264, при меньшей сложности декодирования. Встроенная поддержка есть в Chrome, Firefox и Opera, а также в мобильных устройствах под управлением Android.

Таким образом, чтобы обеспечить воспроизведение видеоконтента практически на всех существующих системах, достаточно выкладывать файлы в контейнерах MP4 в стандарте кодирования H.264 и в формате WebM с кодеком VP8. Поскольку изо всех современных десктопных браузеров встроенная поддержка H.264 отсутствует только в Opera, такие сочетания будут самыми универсальными.

5. Существует обширная общедоступная документация

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

Прежде всего речь об официальной последней рабочей версии консорциума W3C, в рамках которого ведётся непосредственная разработка HTML5.

На сайте разработчиков Mozilla приводится справочник тэгов, причём элементы, которые были добавлены в HTML5, выделены особо.

Подробные описания подхода к интеграции видео в HTML5 можно найти здесь и здесь (тоже на английском языке).

На русском языке краткий справочник HTML5 с примерами применения новых элементов имеется на сайте Puzzleweb.ru.

Кроме того, на русский язык переведено уже довольно много книг по HTML5, среди которых, например, «HTML5 для профессионалов», «Погружение в HTML5» или «Самоучитель HTML5».

Источник: www.computerra.ru

Первый взгляд на HTML 5

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

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

Введение

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

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

Структура

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

На иллюстрации приведена типовая разметка страницы с двумя колонками, сделанная с помощью контейнеров div с атрибутами class и id . В ней содержится «шапка», горизонтальный блок навигационных элементов, блок для основного текста страницы, вспомогательная колонка справа от него и нижний колонтитул.

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

Контейнеры div заменяются в нашем примере новыми элементами: header , nav , section , article , aside , и footer . HTML-код при этом принимает следующий вид:

Существует ряд причин отдавать предпочтение перечисленным выше новым тегам. Например, при их использовании снимается существовавшее ранее ограничение в шесть уровней заголовков ( h1 — h6 ). В спецификации подробно описан алгоритм формирования оглавления, в котором не только учитываются новые структурные элементы, но и сохраняется обратная совместимость с предыдущей версией стандарта. Это нововведение может быть использовано для автоматической генерации оглавлений, что упростит навигацию внутри веб-страниц.

В следующем примере совместно используются контейнеры section и h1 :

Level 1

Level 2

Level 3

Обратите внимание, что для лучшей совместимости с существующими браузерами, помимо h1 так же возможно использование заголовков других уровней ( h2 — h6 ).

Когда предназначения секций страницы может быть автоматически определено по специфичным именам тегов, появляется возможность организации более легкой и эффективной навигации по документу. Например, пользователи смогут одним кликом проматывать оглавление, быстро переходя к содержательной части большого документа, или переходить от одной статьи к следующей. Что самое интересное, при этом становится вовсе необязательным добавление в страницу вспомогательных навигационных ссылок. Код при этом становится менее «захламлен» второстепенными деталями, без которых можно обойтись.
Элемент head интерпретируется как заголовок секции. Такие контейнеры при необходимости могут содержать не только, собственно, название, но и подзаголовок, историю изменений, ссылку на автора и любую другую информацию, которую логично отнести к заголовочной части.

A Preview of HTML 5

By Lachlan Hunt

Example Blog

Insert tag line here.

Элемент footer представляет собой завершающий блок секции, к которой относится (аналог нижнего колонтитула для страницы «бумажного» документа). Такие блоки, как правило, содержат вспомогательную информацию о секции. Например, ссылки на связанные материалы, информацию о правах на копирование и т.д.

nav предназначен для навигационных ссылок, что полезно как для межстраничных переходов внутри сайта, так и для внутристраничной навигации (для организации оглавления).

Контейнер aside используется для вспомогательных материалов, например, для определения дополнительных колонок с второстепенным текстом (сайдбаров).

Archives

Элемент section интерпретируется как секция общего назначения. Такой секцией может быть, например, параграф.

Chapter 1: The Period

It was the best of times, it was the worst of times,
it was the age of wisdom, it was the age of foolishness,
it was the epoch of belief, it was the epoch of incredulity,
it was the season of Light, it was the season of Darkness,
.

(в примере приведена выдержка из «Повести о двух городах» Чарльза Диккенса)

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

Comment #2
by Jack O’Niell

August 29th, 2007 at 13:58

Аудио- и видеоматериалы

В последние годы аудиозаписи и видеоролики получили широкое распространение в интернете благодаря многочисленным сервисам, облегчающим их публикацию (YouTube, Google Video, MySpace, etc.). Из-за недостатка встроенных возможностей HTML, большинство сайтов, размещающих подобный контент, используют Flash, в качестве вспомогательного средства. Выбор этой технологии обычно обоснован тем, что Flash на данный момент имеет наиболее широкую поддержку среди браузеров, по-сравнению с альтернативными технологиями, с помощью которых можно было бы обеспечить воспроизведение мультимедиа-контента (QuickTime, Windows Media).

Огромное количество мультимедиа-плееров, написанных на Flash, является подтверждением того, что разработчики чаще всего предпочитают самостоятельно формировать их интерфейс, не смотря на то, что в большинстве случаев пользователям предоставляется одна и та же функциональность (воспроизведение, пауза, перемотка и управление громкостью). Планируется, что в будущем эти функции будут поддерживаться самими браузерами, что обеспечит базовую возможность для встраивания аудио- и видеозаписей в веб-страницы, а так же возможность управлять этими элементами через DOM API.
С помощью новых тегов video и audio это будет действительно просто. Большая часть функций их API будет совпадать, с одной лишь разницей в ориентации на воспроизведение визуального и невизуального материала.

У Opera и WebKit уже есть релизы с частичной поддержкой тега video . Уже сейчас можно загрузить экспериментальную версию браузера Opera или последнюю еженочную сборку WebKit для демонстрации работы приведенных ниже примеров кода. Opera имеет поддержку Ogg Theora, а WebKit понимает все форматы, что и QuickTime, включая кодеки сторонних разработчиков.

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

Необязательный атрибут poster может быть использован для определения статического изображения, отображаемого в контейнере video до того, как начнется воспроизведение записи. Существуют форматы видео, которые имеют аналогичную встроенную возможность (напрмиер, MPEG4), но использование описанного выше подхода позволяет добиться этой функциональности без привязки к конкретному кодеку.

Точно таким же образом можно встраивать в документы аудиозаписи с помощью элемента audio . Большинство атрибутов у тегов audio и video совпадают, но у audio по понятным причинам отсутствуют width , height и poster .

В стандарте HTML 5 предусмотрен элемент source для вставки ссылок на аудио- и видеофайлы в нескольких альтернативных форматах, из которых браузер сможет делать выбор наиболее предпочтительного варианта, на основе поддерживаемых им кодеков и указанных в коде типов формата контента. При использовании вложенных тегов source , атрибут src контейнеров audio и video должен быть опущен, в противном же случае, теги source будут проигнорированы.

Для разработчиков, которые сами желают контролировать функционирование пользовательского интерфейса и обеспечивать лучшее его соответствие общему дизайну страниц, предоставлен специальный API, через который можно управлять процессом воспроизведения. В этом API определены методы play() и pause() (смысл которых понятен из названия), а так же свойство currentTime , которое в следующем примере используется для «перемотки» видеозаписи в начало.

var video = document.getElementById(«video»);

Существует множество других атрибутов и функций API, помимо перечисленных в данной статье. Их подробное описание можно найти в актуальной на данный момент рабочей версии спецификации.

Представление документов

В отличии от предыдущих версий HTML и XHTML, описанных в терминах их собственного синтаксиса, HTML 5 описывается согласно терминам Document Object Model (DOM). Для внутреннего представления документа браузером используется древовидная структура.

Ниже приведен простейший пример структуры документа, состоящего из названия страницы, заголовка и одного абзаца текста:

Такое дерево содержит в себе элемент title в контейнере head , а так же h1 и p в body .

Основная причина (и преимущество) выбора DOM для определения стандарта HTML 5 состоит в том, что сам язык в таком случае может быть описан независимо от синтаксиса. Существуют два основных типа синтаксиса, согласно которым может быть представлен HTML документ: HTML-сериализация (так же известная как HTML 5) и XML-сериализация (или XHTML 5).
HTML-сериализация основана на обычном для более ранних версий синтаксисе HTML (созданном на базе SGML). Ее определение ориентировано на лучшее соответствие тому, как в действительности браузеры обрабатываю HTML.

Example

This is an example HTML document.

Как и в предыдущих версиях HTML, некоторые теги остаются опциональными, и их наличие автоматически подразумевается.

XML-сериализация использует XML 1.0 и пространства имен, так же как и XHTML 1.0.

Example

This is an example HTML document.

В отличие от предыдущего примера, здесь присутствует атрибут xmlns , а так же закрывающий тег p (чье наличие в контексте XML обязательно). Для определения разницы между сериализациями, браузеры будут использовать значение MIME-типа. Любой документ, определенный как text/html , должен соответствовать требованиям HTML-сериализации. В случае же если MIME-тип имеет значение application/xhtml+xml , должны быть удовлетворены требования XML-сериализации.

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

• Обратная совместимость.
• Хорошо знакомый синтаксис по предыдущим версиям стандарта HTML.
• «Мягкие» синтаксические правила, которые прощают мелкие ошибки. Благодаря этому, пользователи с меньшей вероятностью смогут увидеть сообщение от браузера о невозможности отображения документа (даже если ошибки в нем действительно присутствуют).
• Удобный, лаконичный синтаксис, в котором можно опускать некоторые теги и значения ряда атрибутов.

• Жесткие синтаксические правила XML заставляют писать более качественную разметку, что часто облегчает дальнейшую работу с контентом.
• Интеграция с другими основанными на XML стандартами (например, SVG и MathML).
• Совместимость со стандартными средствами обработки XML (часто применяется при обработке и публикации материалов).

Содействие развитию стандарта

Не смотря на то, что работа над HTML 5 идет семимильными шагами, до ее завершения остается еще немалое количество времени (по сегодняшним оценкам потребуется еще 10-15 лет). В течении этого времени, отзывы со стороны веб-дизайнеров, разработчиков CMS и браузеров, а так же иных специалистов, остаются крайне актуальными для успешного развития проекта. Инициатива всех желающих внести свой вклад в развитие HTML 5 не только приветствуется, но и активно поощряется.

• Отличия от HTML 4, в которых перечислены все изменения, произошедшие относительно предыдущей версии.
• Принципы HTML-дизайна — обсуждение принципов, на основании которых сейчас принимаются решения относительно процесса проектирования.
• Руководство веб-разработчика по HTML 5 — предназначено для помощи веб-дизайнерам и разработчикам в понимании всего, что им необходимо знать относительно HTML 5. Содержит рекомендации и демонстрационные примеры.
• W3C’s HTML WG
• Список рассылки HTML WG
• Вики HTML WG
• Список рассылки WHATWG
• Форум WHATWG
• Блог WHATWG

Источник: habr.com

Что нового в HTML5 и почему лучше на него переходить —>

Многие наверняка знакомы или хотя бы слышали о HTML5. О нём говорят как о чём-то новом, современном и очень крутом. Какое-то время он мелькал в интернете везде, а веб-мастеры в свою очередь предлагали свои услуги с использованием HTML5 очень охотно, и, кстати, весьма успешно.

Так что же в нём особенного?

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

Многие говорят, что этот стандарт ещё слишком сырой — слишком много браузеров не способны поддерживать его и смысл тогда его использовать? С этим нельзя поспорить, но стоит сделать поправку — всё больше браузеров начинают поддерживать этот стандарт по ряду причин, главная из которых — борьба с конкурентами.

Даже если не ждать с моря погоды, есть ещё один хороший аргумент: HTML5 это не что-то неделимое, а скорей сборная модель.
Что это значит? В этой платформе, как известно, собраны множество тегов, которые взаимодействуют друг с другом в нашем HTML-документе. А HTML5 тем и хвалится — своими способностями связать эти элементы воедино и упорядочить их работу.

HTML5 не только следит за взаимодействием своих тегов, но и взаимодействия всех наших JS скриптах, видеофайлах в теге с помощью объектной модели документа — DOM.

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

Что нового в HTML5

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

Очень важный плюс состоит в том, что вам ничего не стоит перейти на HTML5, даже если вы так полюбили HTML4: всё потому что в новом стандарте ничего не было вырезано — вам не придется переучиваться. Достаточно просто начать и по желанию использовать новые элементы.

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

Новинка в HTML5:

1. Великолепные формы . Дополнительные возможности к функционалу и внешнему виду форм — вот что нового подготовил для нас новый HTML. Были добавлены множество новых значений, которые значительно упрощают работу с формой. Многие из них способны заменить собой некоторые скрипты и сделать код чище, не теряя в валидности. Среди прочих можно увидеть такие сочные новинки как: ползунок для прокрутки, выбор даты — неплохо, правда? Появился подсказывающий текст, позволяющий создать вполне уютный интерфейс формы. Он активируется во время активации формы и исчезает по истечению времени, либо по клику на него.Проблема формы email-почты частенько была проблемой у устаревших браузеров — они просто отказывались работать с ней. Теперь же этот приятный элемент доступен для всех, а если ваш браузер неактуален — будет выведена простая текстовая форма, взамен формы с типом email. Таким образом, мы ничего не теряем в использовании и получаем взамен очень удобную фичу.
2. Танк мультимедии — canvas . Canvas — это новый тег в HTML5. Его возможности многогранны. Пожалуй, это прорыв и главный огромный жирный плюс для этого стандарта. Этот тег позволяет делать такие крутые элементы как:
3. рисование
4. проигрывание видео
5. построение оффлайновых веб-приложения
6. создание и работа с геолокацией
7. создание локального хранилища
8. и даже создание игр!

Несомненно — вы поражены, если не знали об этих возможностях до сих пор!

Все эти возможности до HTML5 можно было реализовать только за счёт громоздкого Flash, Gears или же JavaScript. Теперь это доступно без применения этих плагинов и скриптов! Только чистый html без сложностей и нагрузки на сайте.

Самое интересное, что всё это УЖЕ доступно даже на IE9! Более того, уже идёт разговор о решении проблемы поддержки Canvas устаревшими браузерами.

Источник: drogin.ru

Учебник HTML5

С первого взгляда можно предположить, что HTML5 — это пятая версия языка HTML для создания веб-страниц. Но в действительности все не так просто.

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

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

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

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

Теоретический материал:

1. Введение в HTML5

• История HTML5
• Простой документ HTML5
• Синтаксис HTML5
• Семейства элементов
• Поддержка браузерами HTML5
• Семантические элементы
• Браузерная совместимость семантических элементов
• Текстовые семантические элементы
• Семантическая разметка и микроформаты

2. Веб-формы

• Формы HTML5
• Валидация форм
• Новые типы элемента
• Новые элементы форм
• HTML редактор

3. Аудио и видео

• Аудио и видео
• Поддерживаемые форматы аудио и видео
• Управление плеером с помощью JavaScript

4. Canvas

• Элемент Canvas
• Трансформации и прозрачность
• Простая программа рисования
• Браузерная совместимость элемента Canvas
• Вставка изображений и текста
• Тени и градиентная заливка
• Интерактивные фигуры
• Анимация
• Простая игра на Canvas

Источник: professorweb.ru