Что такое html5: Что такое HTML5?

Зачем нам нужен 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».

HTML5 | это… Что такое HTML5?

HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого для всемирной паутины, а также основная технология, используемая в Интернете. Это пятая версия HTML-стандарта (изначально созданного в 1990 году и последней версией которого являлся HTML4, стандартизированный в 1997 году^[1]) и находится в стадии разработки по состоянию на ноябрь 2012 года. Основной её целью является улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями, при этом сохраняется лёгкость чтения кода для человека и ясность исполнения для компьютеров и приспособлений (веб-браузеры, синтаксические анализаторы и т. д.).

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

Он включает в себя детальные модели обработки, чтобы поддерживать больше взаимодействующих процессов; он расширяет, улучшает и рационализирует разметку, пригодную для документов, и вводит разметку и API для сложных веб-приложений.^[2]

HTML

HTML и HTML5 Динамический HTML XHTML XHTML Mobile Profile и CHTML Canvas Кодировки символов Document Object Model Семейство шрифтов Редактор HTML Элементы HTML Мнемоники в HTML Фреймы HTML HTML5 audio и HTML5 video Скрипты в HTML Браузерный движок Quirks mode Таблицы стилей Каскадные таблицы стилей Unicode и HTML W3C и WHATWG Цвета HTML Web Storage WebGL Сравнение языков разметки документов браузеров браузерных движков для HTML HTML5 HTML5 Canvas HTML5 Media XHTML (1. 1)

В HTML5 появляется множество синтаксических особенностей. Например, элементы <video>, <audio> и

<canvas>, а также возможность использования SVG. Эти новшества разработаны для упрощения внедрения и управления графическими и мультимедийными объектами в сети без необходимости обращения к собственным плагинам и API. Другие новые элементы, такие как <section>, <article>, <header> и <nav> разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удален. Некоторые элементы, например, <a> <menu> и <cite> были изменены, переопределены или стандартизированы. API и DOM являются фундаментальными частями спецификации HTML5.^[2] HTML5 также определяет некоторые детали для обработки недопустимых документов, поэтому синтаксические ошибки будут рассматриваться одинаково всеми приспособленными браузерами и другими пользовательскими агентами. ^[3]

Содержание 1 История 2 W3C процесс стандартизации 2.1 Разметка 2.2 Новые API 2.3 XHTML5 2.4 Обработка ошибок 3 Отличия от HTML4.01 и XHTML1.x 4 Логотип HTML5 5 Пример веб-страницы HTML5 6 См. также 7 Примечания 8 Ссылки 9 Литература

История

Рабочая группа по разработке Гипертекстовых Прикладных Технологий в Веб (WHATWG) начала работу над новым стандартом в 2004 году, когда World Wide Web Consortium (W3C) сосредоточился на будущих разработках XHTML 2.0, а HTML 4.01 не изменялся с 2000 года.^[4] В 2009 году W3C признал, что срок работы у рабочей группы XHTML 2.0 истек, и решил не возобновлять его. В настоящий момент W3C и WHATWG работают вместе над разработкой HTML5.^[5]

Даже несмотря на то, что HTML5 был хорошо известен среди веб-разработчиков в течение нескольких лет, он стал основной темой СМИ только в апреле 2010 года. После этого глава компании Apple Inc. Стив Джобс^[6][7][8][9] написал публичное письмо, заголовок которого гласил: «мысли по поводу Flash», где он заключил, что с разработкой HTML5 нет больше необходимости смотреть видеоролики или использовать другие виды приложений с помощью Adobe Flash.^[10] По этому поводу вспыхивали дебаты в кругу веб-разработчиков, причём некоторые намекали, что, хотя HTML5 и обеспечивает расширенную функциональность, разработчики должны принимать во внимание различия браузеров и необходимость поддержки различных частей стандартов, равно как и функциональные различия между HTML5 и Flash.^[11]

W3C процесс стандартизации

WHATWG начала работу над спецификацией в июне 2004 года под названием Web Applications 1.0.^[12] С января 2011 года спецификация в Draft Standard (Стандартизация проекта) утверждается в WHATWG, Working Draft (рабочий проект) утверждается в W3C. Ян Хиксон из компании Google является редактором HTML5.

[13]

Спецификация HTML5 была принята в качестве точки начала работы над новым HTML рабочей группой W3C в 2007 году. Эта рабочая группа опубликовала спецификацию как первый публичный рабочий проект 22 января 2008 года.^[14] Спецификация — это текущая работа, ожидают, что она останется на несколько лет, хотя части HTML5 собираются закончить и реализовать в браузерах до того момента, когда вся спецификация достигнет финального статуса «Рекомендовано».^[15]

Согласно расписанию W3C, предполагалось, что HTML5 получит рекомендации W3C в конце 2010 года. Однако оценка первого публичного рабочего проекта была перенесена на 8 месяцев, ожидалось, что одобрения и Last Call и Candidate Recommendation будут получены в 2008 году^[16], но в январе 2011 года он все ещё в стадии рабочего проекта в W3C.^[17] HTML5 из WHATWG получило одобрение от Last Call с Октября 2009 года.^[18][19]

Ян Хиксон, редактор спецификации HTML5, ожидает достижения Candidate Recommendation в течение 2012 года.

^[20] Для того чтобы спецификация получила статус «W3C рекомендована», необходимы две законченные на 100 % и полностью взаимодействующие реализации.^[20] В интервью с TechRepublic Хиксон предполагает, что это случится в 2012 году или позже.^[21] Однако многие части спецификации стабильны и могут быть реализованы в продуктах:

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

—WHAT Working Group, Когда HTML5 будет закончен?^[20]

В декабре 2009 года WHATWG переключилась на универсальную модель разработки для спецификации HTML5.^[22] W3C всё ещё будет продолжать публиковать кадры со спецификацией HTML5.^[23]

14 февраля 2011 года W3C увеличил срок работы для рабочей группы HTML с промежуточными отчетами для HTML5. Рабочая группа предполагала продвинуть HTML5 в Last Call, приглашая к полному соединению W3C, чтобы подтвердить техническое отсутствие дефектов в спецификации в мае 2011 года. Затем группа переключается на испытание своей реализации. W3C также разрабатывает всестороннюю проверку, чтобы добиться широкой функциональной совместимости для полной спецификации 2014 года — ожидаемой даты для Рекомендации.^[24]

«Даже как инновационное продолжение, продвижение HTML5 в «Рекомендуемое» обеспечивает всю веб-экосистему стабильным, проверенным и взаимодействующим стандартом. Решение наметить внедрение HTML5 в Last Call в мае 2011 года было важным шагом для урегулирования производственных ожиданий. Сегодня мы сделали следующий шаг, объявив о намерении осуществления цели с получением рекомендации к 2014 году.»

—Джеф Джэйф, Генеральный директор W3C^[24]

Разметка

HTML5 вводит несколько новых элементов и атрибутов, которые отражают типичное использование разметки на современных веб-сайтах. Некоторые из них — семантические замены для использования универсальных блочных (<div>) и строчных (<span>) элементов, например, <nav> (блок навигации по сайту), <footer> (обычно относится к нижней части страницы или последней строке HTML кода) или <audio> и <video> вместо <object>. ^[25][26][27] Некоторые устаревшие элементы, которые можно было использовать в HTML 4.01, были исключены, включая чисто оформительские элементы, такие как <font> и <center>, чьи эффекты выполняются с помощью Каскадных таблиц стилей. Также в поведении веб снова заострено внимание на важности скриптов DOM (например, Javascript).

Синтаксис HTML5 больше не базируется на SGML, несмотря на подобие его разметки. Однако он был разработан обратно совместимым с обычным парсингом более старых версий HTML. В HTML5 применяется новая вводная строка, которая выглядит, как Объявление типа документа в SGML, <!DOCTYPE html>, которая запускает соответствующий стандартам режим рендеринга.^[28] С 5 января 2009 года HTML5 также включает в себя Web Forms 2.0, ранее бывшие отдельной спецификацией WHATWG.

Новые API

В дополнение к определению разметки HTML5 устанавливает скриптовый интерфейс прикладного программирования (API). ^[29] Существующий интерфейс DOM расширен и фактически особенности зарегистрированы. Также существуют новые API, например:

элемент холст для непосредственного метода рисования в 2D. Смотрите спецификацию Canvas 2D API Specification 1.0[30] контроль над проигрыванием медиафайлов, который может использоваться, например, для синхронизации субтитров с видео[31] хранение баз данных оффлайн[32] редактирование документа

Drag-and-drop управление историей браузера тип MIME и регистрация обработчика протокола микроданные

Не все выше перечисленные технологии включены в спецификацию W3C HTML5, хотя они есть в спецификации WHATWG HTML.^[33] Немного связанных технологий, которые не являются частью ни одной из спецификаций, следуют далее. W3C публикует спецификации для них отдельно.

геолокация база данных SQL для Web, внутренняя база данных (больше не поддерживаемая)[34] Индексированная база данных API, индексирование по типу ключ-значение (прежде — WebSimpleDB).[35]

Файл API, дескриптор обновления файлов и управления ими.[36] Работа с системой. Этот API предназначен для того, чтобы обеспечить хранение информации со стороны клиента без управления базами данных. [37] Запись в файл, использование API для записи в файл информации из приложения.[38]

XHTML5

XHTML5 — это XML-сериализация языка HTML5. Документы XML должны быть снабжены XML Internet media type, например, application/xhtml+xml или application/xml.^[39] XHTML5 требует строгого и правильно оформленного синтаксиса XML. Выбор между HTML5 и XHTML5 сводится к выбору типа MIME/содержимого: тип медиа, который вы выберете, определит, какой тип документа должен быть использован. ^[40] В HTML5 и XHTML5 doctype html необязателен и может быть просто пропущен.^[41] HTML, который был написан, чтобы соответствовать техническим требованиям и HTML и XHTML — и который производит то же DOM дерево, разбирающее HTML или XML — назван многоязычным.^[42]

Обработка ошибок

Спецификация HTML5 предъявляет требования как к юзер-агентам (браузерам), так и к документам. Документы могут не всегда содержать корректный синтаксис, но HTML5-совместимые браузеры, так же, как и их предшественники, применяют алгоритмы разбора ошибок разметки в документах для построения правильной объектной модели (DOM). Чёткое определение требований к юзер-агентам делается с целью достижения совместимости между браузерами разных производителей. Так же, как и требования к синтаксису разметки документов с целью корректного отображения их в различных браузерах.^[43] В старых версиях браузеров новые теги HTML5 просто игнорируются.

Отличия от HTML4.

01 и XHTML1.x

Ниже представлен список отличий и несколько необычных примеров:

Новое правило синтаксического анализа Возможность использовать встроенные SVG и MathML в text/html Новые элементы: article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr

Новые типы средств управления за формой: dates and times, email, url, search, number, range, tel, color[44] Новые атрибуты: charset (в meta), async (в script) Глобальные атрибуты, которые могут быть применены ко всем элементам: id, tabindex, hidden, data-* (пользовательские атрибуты данных) Элементы, которые будут исключены: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt

Полный список изменений в HTML5 представляется в обновляющемся рабочем проекте W3C «Отличия HTML5 от HTML4» (последняя версия от 29 марта 2012). ^[45]

Логотип HTML5

Логотип HTML5

18 января 2011 года W3C ввел логотип, чтобы представить использование или добавить интерес к HTML5. В отличие от других знаков, выпущенных ранее компанией W3C, он не подразумевает соответствие определенному стандарту. С 1 апреля 2011 года этот логотип считается официальным.^[46]

Во время первого показа его публике, W3C объявил логотип HTML5 как символ «универсальной визуальной идентификации данных для широкого набора открытых Веб-технологий, включая HTML, CSS, SVG, WOFF и другие».^[47] Некоторые защитники веб-стандартов, включая и The Web Standards Project, раскритиковали это определение HTML5 как обобщенное и размытое понятие.^[47] Тремя днями позже W3C ответил на отзыв сообщества и изменил определение логотипа, убрав перечисление связанных технологий.^[48] Затем W3C заявил, что логотип «представляет HTML5, краеугольный камень для современных Веб приложений». ^[46]

Пример веб-страницы HTML5

<!doctype html>
<html>
  <head>
    <meta charset=utf-8>
    <title>(Это title) Пример страницы на HTML5</title>
  </head>
  <body>
    <header>
      <hgroup>
         <h2>Заголовок "h2" из hgroup</h2>
         <h3>Заголовок "h3" из hgroup</h3>
      </hgroup>
    </header>
    <nav>
      <a href=link1.html>Первая ссылка из блока "nav"</a>
      <a href=link2.html>Вторая ссылка из блока "nav"</a>
    </nav>
    <section>
      <article>
        <h2>Заголовок статьи из блока "article"</h2>
        <p>Текст абзаца статьи из блока "article"</p>
          <details>
            <summary>Блок "details", текст тега "summary"</summary>
            <p>Абзац из блога "details"</p>
          </details>
      </article>
    </section>
    <footer>
      <time>Содержимое тега "time" блока "footer"</time>
      <p>Содержимое абзаца из блока "footer"</p>
    </footer>
  </body>
</html>

См.

также

The cache manifest in HTML5 Canvas (HTML) Сравнение браузеров (HTML5) Comparison of layout engines (HTML5) CSS 3

HTML5 для мобильных устройств HTML5 video HTTP(P2P) Microdata (HTML5) WebGL

Примечания

1. ↑ HTML5 Differences from HTML 4. Working Draft. World Wide Web Consortium (5 Апреля 2011 года). Архивировано из первоисточника 7 июня 2012. Проверено 30 Апреля 2011 года.
2. ↑ ^{1 2} HTML5 Differences from HTML4. World Wide Web Consortium (19 Октября 2010 года). Архивировано из первоисточника 7 июня 2012. Проверено 4 Декабря 2010 года.
3. ↑ 1.9.2 Syntax Errors. HTML5 (16 Ноября 2010 года). Архивировано из первоисточника 7 июня 2012. Проверено 4 Декабря 2010 года.
4. ↑ HTML 4 Errata. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 4 Декабря 2010 года.
5. ↑ Frequently Asked Questions (FAQ) About the Future of XHTML. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 4 Декабря 2010 года.
6. ↑ FOX News: No Flash on the iPhone? Apple’s Steve Jobs Finally Explains Why
7. ↑ TIME: Steve Jobs: ‘Flash is No Longer Necessary’ and Other Musings
8. ↑ CBS News: Steve Jobs: Why Apple Banned Flash
9. ↑ FastCompany: Steve Jobs: Adobe’s Flash Is Old PC History, Open Web Is the Future
10. ↑ «Thoughts on Flash», by Steve Jobs, CEO of Apple, Inc.
11. ↑ Is HTML5 Replacing Flash?
12. ↑ [whatwg] WHAT open mailing list announcement. lists.whatwg.org Mailing Lists. Архивировано из первоисточника 7 июня 2012. Проверено 4 Марта 2010 года.
13. ↑ HTML5: A vocabulary and associated APIs for HTML and XHTML (Editor’s Draft).. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 12 Апреля 2010 года.
14. ↑ HTML5: A vocabulary and associated APIs for HTML and XHTML.. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 28 января 2009 года.
15. ↑ When Will HTML5 Be Finished?. WHATWG. WHATWG Wiki. Архивировано из первоисточника 7 июня 2012. Проверено 10 Сентября 2009 года.
16. ↑ HTML Working Group. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 4 Марта 2010 года.
17. ↑ HTML5. World Wide Web Consortium (25 Августа 2009 года). Архивировано из первоисточника 7 июня 2012. Проверено 4 Марта 2010 года.
18. ↑ [whatwg] HTML5 at Last Call (at the WHATWG). Lists.whatwg.org. Архивировано из первоисточника 7 июня 2012. Проверено 4 Марта 2010 года.
19. ↑ Dive Into HTML5.(недоступная ссылка — история)
20. ↑ ^{1 2 3} When Will HTML5 Be Finished?. FAQ. WHAT Working Group. Архивировано из первоисточника 7 июня 2012. Проверено 29 Ноября 2009 года.
21. ↑ HTML5 Editor Ian Hickson Discusses Features, Pain Points, Adoption Rate, and More. Архивировано из первоисточника 7 июня 2012. Проверено 21 Июня 2010 года.
22. ↑ Ян Хиксон WHATWG: Switching to an Unversioned Development Model. Архивировано из первоисточника 7 июня 2012. Проверено 21 Января 2011 года.
23. ↑ Ян Хиксон HTML Is the New HTML5. Архивировано из первоисточника 7 июня 2012. Проверено 21 Января 2011 года.
24. ↑ ^{1 2} W3C Confirms May 2011 for HTML5 Last Call, Targets 2014 for HTML5 Standard. World Wide Web Consortium (14 Февраля 2011 года). Архивировано из первоисточника 7 июня 2012. Проверено 18 Февраля 2011 года.
25. ↑ Introduction to HTML5 video
26. ↑ IBM Developer Works New elements in HTML5: Structure and semantics
27. ↑ ICAMD.org Finalcut Silverlight Films that Videographers share Quicktime in a Flash : Video on the Web using HTML5 and other Codecs
28. ↑ InstantShift [1] HTML5: Worth the Hype?
29. ↑ «HTML5 Differences from HTML 4 — APIs». World Wide Web Consortium.
30. ↑ «HTML Canvas 2D Context». World Wide Web Consortium.
31. ↑ Доступное видео в HTML5 с субтитрами на JavaScript (13 Января 2010 года). Архивировано из первоисточника 7 июня 2012.
32. ↑ «Web Storage Specification». World Wide Web Consortium.
33. ↑ HTML Standard
34. ↑ «Web SQL Database». World Wide Web Consortium.
35. ↑ «Indexed Database». World Wide Web Consortium.
36. ↑ «File API». World Wide Web Consortium.
37. ↑ «Filesystem API». World Wide Web Consortium.
38. ↑ «File API: Writer». World Wide Web Consortium.
39. ↑ Anne, van Kesteren HTML5 differences from HTML 4 – W3C Working Draft 19 October 2010. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 2 Ноября 2010 года.
40. ↑ Сергей Анатольевич Мавроди «Sergey’s HTML5 & CSS3 Quick Reference». Belisso Corp., 2010. ISBN 978-0-615-43321-9
41. ↑ The XHTML syntax ― HTML5. Web Hypertext Application Technology Working Group. Архивировано из первоисточника 7 июня 2012. Проверено 1 Сентября 2009 года.
42. ↑ Polyglot Markup: HTML-Compatible XHTML Documents, W3C Working Draft 05 April 2011
43. ↑ FAQ – WHATWG Wiki. WHATWG. Архивировано из первоисточника 7 июня 2012. Проверено 2 декабря 2010.
44. ↑ HTML5: The Markup Language Reference: Input Control. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 17 Февраля 2011 года.
45. ↑ HTML5 Differences from HTML4. FAQ. World Wide Web Consortium (29 мая 2012 года). Архивировано из первоисточника 7 июня 2012. Проверено 12 июня 2012 года.
46. ↑ ^{1 2} W3C HTML5 Logo FAQ. World Wide Web Consortium. — «Is this W3C’s «official» logo for HTML5? Yes, as of 1 April 2011.»  Архивировано из первоисточника 7 июня 2012. Проверено 21 Января 2011 года.
47. ↑ ^{1 2} HTML5 Logo: Be Proud, But Don’t Muddy the Waters!. The Web Standards Project. Архивировано из первоисточника 7 июня 2012. Проверено 22 Января 2011 года.
48. ↑ The HTML5 Logo Conversation. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 21 Января 2011 года.

Ссылки

• HTML5 (including next generation additions still in development)  (англ.) — текущий черновик стандарта.
• W3C HTML Working Group  (англ.)
• W3C Editor’s draft  (англ.)
• HTML5ROCKS — проект Google, посвящённый HTML5. См. также презентацию HTML5.
• Примеры использования HTML5 от Apple  (англ.)
• Тест браузеров на количество реализованных возможностей стандарта HTML5  (англ.)
• HTML 5 differences from HTML 4  (англ.)
• Справочник HTML5  (рус.)

Литература

• Питер Лабберс, Брайан Олберс, Фрэнк Салим HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений = Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development.  — М.: «Вильямс», 2011. — С. 272. — ISBN 978-5-8459-1715-7
• Стивен Хольцнер HTML5 за 10 минут, 5-е издание = Sams Teach Yourself HTML5 in 10 Minutes, 5th Edition. — М.: «Вильямс», 2011. — ISBN 978-5-8459-1745-4

Что такое HTML5? | Администратор WordPress

3.3/5 — (3 голоса)

HTML5: Все пользуются, но никто не знает, что это. Больше похоже на хедлайнер к какому-нибудь экзистенциальному фильму, как «В ожидании Годо» или экранизацию произведения Сартра, чем на утверждение относительно HTML5. Но это правда: большинство людей, используя HTML5, юзают его, как HTML4 , или даже HTML4 (а некоторые функции вообще не используют). Каков результат? Абсолютный провал, который может исправить HTML5. Не стоит отворачиваться, т.к. когда вы оглядываетесь назад, вы можете пропустить что-то очень важное: небольшой, но значительный переход, сфокусированный на HTML5.

В этой статье я хочу глубже рассмотреть HTML5. Есть простое предложение с большим количеством выводов: HTML5 одновременно что-то совершенно новое, но, тем не менее, не что иное как HTML; и как только вы поймете HTML5, изменится способ кодирования и даже восприятие web-пространства и приложений.

Возврат к первому правилу

HTML всегда был связан с перелинковкой. В стародавние времена, когда электроника была «крутой» и еще не называлась House music, еще до того как Rolling Stones занялись страхованием престарелых, все что связано с web, сопровождалось огромных количеством документации. Все было в точности до наоборот по сравнению с нынешними временами, когда большая часть людей воспринимают электронные книги всего лишь оберткой полноценной печатной версии.

В 90-х web был заполнен 15-страничными спецификациями, собранными в едином файле. Вам приходилось скролить по всему документу, как по энциклопедии. Более ранние версии HTML были связанны именно с этим, что наносило неоспоримый ущерб юзабилити web. Это связано с тем, что Тим Бернерс-Ли (Tim Berners-Lee), признанный отец HTML, был исследователем, дававшим возможность проводить исследования (в основном в CERN в то время). Если вы знакомы с исследователями, то знаете, что краткость – не их конек. Таким образом, чтение огромных кип документов онлайн было необходимостью, но скроллинг 15- (или 1500) страниц не являлось долгосрочной опцией.

Итак, ранее HTML не был связан с отображением многостраничных документов. Наиболее фундаментальной характеристикой HTML стал тег. Он давал возможность документу связаться с другим документом. Неожиданно 15-страничные документы превратились в 15 одностраничных, связанных между собой. Прощай скроллинг; здравствуй перелинковка. Все стандартно. И если вы узнали для себя что-то новое, то дальше можете просто «утонуть».

HTML5: Все еще соединяет

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

(Примечание: правильнее сказать, аудио и видео заменяют объекты и внедренные в веб-страницы коды на многие годы, как, например, «подтягивание» файлов с YouTube или Vimeo. Такие элементы семантически функционируют больше как элементы, которые размещают ссылку на странице, чем те, которые переносят вас в другой пункт. В этом смысле даже элемент изображения является линейным: он берет контент из другого места и размещает его на странице. Все это обычная перелинковка, все это HTML: перелинковка и соединение.)

Сейчас вы можете «подтягивать» изображения, аудио и видео файлы прямо в документ. Что еще важнее, благодаря тому, что эти элементы являются элементами первого порядка, вы можете ими манипулировать через JavaScript. Это важно, я вернуть к этой теме позже. Если коротко, то элементы первого порядка призваны поддерживать прямой программный доступ.

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

Прежде чем продолжать, вы должны понять, что возможность «подтягивать» аудио и видео не является (относительно) важной. Более важно то, что вы можете «подтянуть» остальные элементы. Таких может быть 20-25. Основное условие остается прежним: множество составляющих, которые разбросаны в разных местах, могут быть объединены семантическими элементами, легко доступными через JavaScript. В HTML5 эти «другие элементы», будучи аудио или видео, могут быть интересными, но, тем не менее, побочными.

Перелинковка HTML5 – новая мультимедийная реклама

И что теперь? Почему это так важно? На то есть 3 причины:

-Веб-страницы уже не должны выглядеть (и работать) как веб-страницы. Распространение Flash в последние годы попыталось преодолеть “ограничения” HTML. Flash изначально фокусировался на анимации и визуальных эффектах. Затем большая часть сайтов перешла на Flash, позволяя тем самым использовать различные виды навигации и организации страниц, предоставляя больше программных доступов к индивидуальным частям, и избегать недостатков JavaScript. (Здесь я пропущу обязательные комментарии относительно недостатков Flash.)

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

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

HTML5 представляет — хотя это и не единственное, что он поддерживает — парадигму, уходящую от этих ограничений. Во-первых, HTML5 и CSS3 предоставляют для JavaScript солидный набор инструментов, сравнимых с большинством Flash веб-сайтов. Я легко могу взять средний веб-сайт на Flash и воссоздать его на WordPress, HTML5, JavaScript (через jQuery), и CSS3 за неделю, если не быстрее. Преимущества велики: текст можно выбрать, закладки работают без каких-либо сложностей, и, конечно, владельцы веб-сайта могут апдейтить его, не обращаясь за помощью к вечно занятому Flash-программисту.

В результате HTML5 – наиболее пригодный и индексируемый инструмент, доступный для веб-контента, но этот контент больше, чем когда бы то ни было. Далее, этим контентом не нужно владеть, как было ранее. Эмоциональные и психологические характеристики аудио и видео элементов, подтягиваемых из других ресурсов. Когда вы видите видео, то внутренний голос как будто говорит: «Возьми это видео и размести его на своей странице!» Но если создателей веб-страниц будет больше, чем создателей видео, как можно заполучить это видео? Вы берете его у кого-то другого, кто, будем надеяться, использует Creative Commons лицензию. Такая же история с аудио: вы можете подключиться к чужому каталогу, и вы это с легкостью делаете. И как уже было сказано, аудио или видео файлы прекрасно проигрываются на телефоне или планшете, благодаря HTML5.

В этом обзоре ограничений есть более глубокий смысл: создатели контента переходят от создания уникального контента к созданию компиляции. Технически это совсем не ново, но внедряются такие вещи именно благодаря элементам HTML5: аудио и видео. И когда сеть разрастается, она гигантскими шагами приближается к «Лавине» Нила Стивенсона и «Нейромантику» Уильяма Гибсона. Человек создает видео, и ему уже не нужно размещать его или создавать веб-страницу. Он просто бросает его на файлообменные ресурсы, как YouTube или Vimeo. Другой человек просто переходит по внешней ссылке, но фактически интегрирует это видео (доступное и редактируемое через JavaScript, но гораздо проще) на веб-страницу. Человеку не нужно даже выходить из своего домена (видео и веб-страницы, соответственно), а в результате получает массу преимуществ.

А теперь умножим эти преимущества на 1,000. Или на 1,000,000. Добавляем данные и поиск, организуем и даже локализуем данные, как не делали ранее. Доступ к данным есть не через один браузер, а через большинство существующих, на всех возможных девайсах – ноутбуках, нетбуках, планшетах и телефонах. Добавляем очень дешевые файлохранилища и понимаем, что мы обязаны сказать об увеличении мощи JavaScript, свободном теге и его способности к манипулированию аудио и видео, о веб-мессенджерах, и вы очень быстро забудете, что мы разговариваем об HTML, а не о традиционных языках программирования Java или PHP!

JavaScript не есть объект внимания HTML5 … не так ли?

Большие возможности HTML5 концентрирует внимание на JavaScript. Если честно, то совсем не многое в HTML5 обращается к JavaScript. Да, проект HTML5, в соответствии с W3C, направлен на замену JavaScript API в более старых документах HTML4, XML1, и DOM Level 2. Нет, не ждите, что язык JavaScript будет радикально или сколько-нибудь заметно изменен в HTML5. Если вы решите поболтать о веб-программировании, то о JavaScript вы услышите больше, чем о любом другом языке.

Итак, во-первых, HTML5 добавил несколько важных и совершенно новых элементов первого порядка. Аудио и видео – ключевые, а вот следующий, который мы рассмотрим – это Канвас. Это означает, что больше не нужно тратить время на поиск элемента через тег (объект) или ИД-тег дополнительного элемента, чтобы работать с рекламой на веб-странице. Если подробнее, то эти элементы (в отличие от дополнительных элементов) обладают рекламно-ориентированными атрибутами: autoplay и предварительная загрузка. Это означает, что с помощью JavaScript, вы можете подтянуть видео, отобразить элементы управления, изменить URL и эффективно загрузить новое видео, а также контролировать загрузку (или предварительную загрузку), включать или выключать звук аудио.

Все это делается через JavaScript, но в самом JavaScript нет новшеств, которые предоставляли бы такой доступ. Все это – добавление семантически значимых элементов в HTML5, что и усиливает возможности JavaScript, или, по меньшей мере, упрощает данные задачи. Уверен, что грамотный JavaScript программист (который ставил метки и парсил) может получить желаемый результат, выгрузив необходимые атрибуты из дополнительных элементов, настроив их и т.д. Но это было бы слишком сложно и долго даже чтобы поставить точку с запятой в нужном месте.

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

Думаю, очевидно: чем больше семантического значения в документе, и чем меньше атрибутов или даже элементов вложено в качестве простого текста в скрытые элементы или объекты, тем лучше сам документ. Доступ, модернизация и отзывы к странице становятся легче с точки зрения JavaScript; CSS (CSS2 или CSS3) может применяться напрямую без псевдо- и вложенного выбора, а документ описывает все сам. Когда же у вас документы семантического значения, вы увидите, что JavaScript стал гораздо четче. На самом деле, многие программисты среднего уровня поймут, что они способны делать вещи, «подвластные» только продвинутым программистам: выкладывать видео на стр выключать звук и загружать разные части аудиодорожки, проигрывать эти разные части аудио и видео и ба-бах: у вас есть полное описание HTML5 от Hitler о JJ Abrams и Star Trek … без необходимости модифицировать оригинальные аудио и видео.

С другой стороны, страница HTML становится больше похожей на контейнер (которая содержит другие контейнеры и т.д.), чем на страницу. JavaScript получает легкий доступ к этим вложенным контейнерам, модифицирует их, модернизирует, перемещает и делает, все, о чем вы могли мечтать или кодить. CSS может также визуально стилизовать и работать с этими контейнерами, превращая HTML в инструмент организации, но это уже неправильно. Порядок и позиционирование элементов в HTML становятся лучшим проводником, если они, конечно, релевантны.

(Стоит отметить, что дисплей-подход, игнорирующий организацию и подчинение элементов в документах HTML – это плохая идея. Семантически значимые элементы пропадают, как только вы нарушаете позиционирование и иерархию. Это верно и для HTML4, и XHTML1, и HTML5, поэтому не буду заострять внимание на этом пункте.)

HTML5 — это настоящее и будущее

Это было время, когда Стив Джобс отказывался разрешить Flash на устройствах iOS, он оспаривал, что HTML5 может делать все, что делает Flash. Он был не совсем честен — поле уверенности в тот день было сильным, — но в конечном итоге Adobe проиграла, а Apple выиграла. HTML5 не похож на Flash, это технология, которая обновляет Интернет. Так что же это такое и что оно хочет от нас?

Что такое HTML5?

HTML5 — это новейшая версия HTML (языка гипертекстовой разметки), кода, который помогает в написании сценариев веб-страниц. На самом деле это три вида кода:

• Структура представлена ​​в основном HTML.

• Презентации создаются с помощью каскадных таблиц стилей (CSS).

• JavaScript, благодаря которому все происходит.

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

Это еще не все. HTML5 не имеет права собственности, поэтому вам не нужно платить за его использование. Используете ли вы планшет или смартфон, нетбук, ноутбук, ультрабук или Smart TV, ему все равно, поддерживает ли ваш браузер HTML5, он должен работать безупречно, потому что он также кроссплатформенный. Как и предполагалось, все немного сложнее.

Что делает HTML5?

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

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

Нужен ли мне браузер HTML5?

Скорее всего, он у вас уже был. Почти все названные браузеры, такие как Microsoft Edge, Firefox, Chrome и Opera, браузер Android и Mobile Safari, поддерживают HTML5, но не все они поддерживают одно и то же. Как и в случае с Firefox, он, как правило, поддерживает широчайший набор функций HTML5, за которыми последовали Safari и Chrome, но, как мы уже говорили ранее, HTML5 является развивающимся стандартом, и в ближайшее время появятся последние версии каждого браузера, которые будут охватывать основы. И если вы хотите узнать более подробную информацию о поддержке браузеров, блестящий Caniuse.com предоставляет подробную информацию о том, какой браузер что поддерживает.

Стандарты HTML5 поддерживают видео, но, к сожалению, никто не может прийти к единому мнению о том, какой формат(ы) поддерживать, потому что это означает, что разные браузеры поддерживают разные форматы видео HTML5. Основных три: H.264, который поддерживают все, кроме Firefox; OggTheora, который поддерживается всеми браузерами, такими как Internet Explorer, Safari, Chrome и т. д.; и VP8/WebM, который тоже везде поддерживается (хотя Safari требует физической установки).

Заменит ли HTML5 Flash?

В ряде случаев это уже произошло, например, устройства iOS не используют Flash, а несколько других видео-сайтов либо перешли с Flash на видео HTML5, либо, по крайней мере, представили HTML5 в качестве опции. Однако, поскольку многие владельцы контента предпочитают проприетарные форматы, поддерживающие DRM (управление цифровыми правами), такие как Flash, HTML5 не включает технологию (DRM) для предотвращения копирования. Например, британский видеосайт FilmLove отказывается от Flash и вместо HTML5. Хотя Adobe заявила, что прекратит разработку Flash Player для мобильных устройств. , Хотя это никуда не спешит, Flash также используется для значительно большего, чем просто показ видео.

Почему HTML5?

Компания, разрабатывающая популярные движки для 3D- и 2D-игр, представила свою новую версию на GDC 2014 Unity Technology Conference. Плагин Unity Player в Unity 5, который позволяет запускать игры в браузере, увеличенные в этом движке, был восстановлен с помощью экспортера HTML5 с использованием WebGL. Помимо Unreal Engine, Epic Games уже давно работает над его переходом на HTML5. Последняя версия Unreal Engine 4, аналогичная GameMaker, популярному редактору и движку, используемому для разработки 2D-игр, также поддерживает эту технологию.

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

• Построить 2

• ВоздействиеJS

• Вавилон

• Pixi.js

• Фазер

• Турбуленц

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

На рынке появляется все больше и больше HTML5-игр, и их авторы стараются наилучшим образом использовать их для максимально возможного количества устройств и платформ. В игры, разработанные с помощью HTML5, можно играть не только на ПК, Mac и устройствах на базе iOS или Android, но и на Firefox OS, и на всех остальных, поддерживающих стандарт HTML5. Это значительно увеличивает количество возможных клиентов.

Теперь перейдем к некоторым его преимуществам и недостаткам.

Преимущества HTML5:

• Предоставляет возможность создавать многопользовательские игры, используя, например, технологию WebSockets для связи клиент-сервер.

• Огромное, динамично расширяющееся общество

• Работает прямо в браузере без дополнительных плагинов.

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

• Единая кодовая база позволяет запускать игры на любом устройстве, поддерживающем HTML5.

• Игру не нужно устанавливать на устройство.

Недостатки HTML5: —

• Все еще неполная спецификация.

• Низкая эффективность на мобильных устройствах без оптимизации.

• Отсутствие или частичная поддержка WebGL на мобильных устройствах.

WebGL, который поддерживает аппаратное ускорение графики, используется для представления графики, и мы также используем Pixi.js, средство рендеринга 2D-графики на компоненте Canvas.

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

На устройствах, для которых WebGL недоступен, рендерер использует только компонент холста и ведет себя так же, как при использовании WebGL. Более многогранные игры требуют реализации физических движков. Для этого мы используем проверенные и более совершенные решения, такие как Box2D. Уникальные эффекты в играх создаются с помощью так называемых «частиц». Pixi распределяет частицы по движку рендеринга, благодаря чему мы можем дополнять наши игры эффектами иллюстраций.

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

В конце мы просто хотели бы сделать вывод, и, как мы уже говорили ранее, HTML5 — это не только будущее веб-дизайна, но и настоящее. Забавные функции HTML5 покоряют развивающиеся мировые технологии в разных областях. Он уже заменил плагин Adobe Flash в различных областях, таких как воспроизведение видео и игровые концепции. Хоть это и не законченная версия, но все же она пробилась в топ, заменив Flash и Silverlight. Мы надеемся, что вам понравится наш блог на HTML5. Если вы хотите нанять агентство по разработке HTML5, разместите информацию о своем проекте здесь, и один из наших консультантов по технологиям поможет вам связаться с предварительно проверенными специалистами по играм HTML5. в течение следующих 48 часов (гарантировано).

Теги:

игры HTML5 найм стартап игры аутсорсинг

Что является основным отличием html5 от html

Люди, плохо знакомые со сферой веб-дизайна, часто слышат слово «разметка» и задаются вопросом, что оно означает и как отличается от более широко известного термина «код». В основном язык разметки предназначен для обработки, определения и представления информации о тексте; теги стилей и текстовые аннотации записываются в файлах стилей, чтобы упростить работу с текстом для компьютера. Исторически сложилось, что термин «разметка» произошел от английского marking-up, а сам процесс от manuscript marking-up — процесса разметки рукописи перед отдачей ее в печать. Здесь речь пойдет о наиболее часто используемом языке разметки — HTML. Несколько лет назад для этого языка было выпущено обновление под названием HTML5. В этом руководстве мы расскажем, что такое HTML5 и поведаем о различиях между HTML и HTML5.

Изучаете веб-разработку? Создайте свой первый проект и опубликуйте его онлайн на нашем бесплатном хостинге! Да, мы помогаем тем, кто хочет учиться!

Что такое HTML?

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

Стандарт HTML был разработан W3C или Консорциумом Всемирной Паутины в 1997 году. В HTML для определения структуры текста используются теги; теги и элементы выделяются с использованием символов < и >. Вот лишь некоторые из примеров для ранее упомянутых тегов — это заголовки, таблицы, абзацы и т. д. В свою очередь, браузеры отвечают за визуализацию содержимого страницы с помощью этих тегов. HTML не был единственным стандартом веб-разработки. В первые дни развития Интернета все теги контента и стили присутствовали на одном гигантском, громоздком (и довольно сложном) языке. Со временем W3C пришла к решению о необходимости разделения контента и стиля страницы; Это привело к созданию таблиц стилей или CSS. В настоящее время теги, которые используются для определения стиля текста (например FONT), нежелательны и почти не используются, на их место пришли таблицы стилей и только теги определения содержимого (например h2) по-прежнему составляют ядро ​​HTML.

С течением времени в HTML было много обновлений, и в настоящее время его новейшей версией является HTML5. HTML5, конечно прежде всего является языком разметки, но он приобрел множество функций в отличии от HTML и устранил некоторые из строгостей, присутствовавших в XHTML. Хотя HTML5 обновляется практически каждый день, однако новых выпущенных пронумерованных выпусков нет. Основным различием между HTML и HTML5 может стать то, что ни аудио, ни видео не являются составной частью HTML, тогда как они оба могут рассматриваться как неотъемлемые части HTML5.

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

Каковы основные различия между HTML и HTML5

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

• SVG, canvas и другая виртуальная векторная графика поддерживаются в HTML5, тогда как в HTML использование векторной графики стало возможным только при использовании его в сочетании с различными технологиями, такими как Flash, VML, Silver-light и т.д.
• HTML5 использует базы данных SQL и кеш приложений для временного хранения данных, тогда как в HTML для этого используется только кэш браузера.
• Еще одно отличие между HTML и HTML5, о котором стоит упомянуть: первый не позволяет запуск JavaScript в коде (вместо этого он работает в потоке интерфейса браузера), тогда как последний обеспечивает полную поддержку JavaScript для запуска в фоновом режиме.
• HTML5 не основан на SGML, и это позволяет ему иметь улучшенные правила синтаксического анализа, которые обеспечивают улучшенную совместимость.
• В HTML5, в тексте могут использоваться встроенные MathML и SVG, тогда как это невозможно в HTML.
• Некоторые из устаревших элементов были полностью удалены: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike, tt.
• HTML5 поддерживает новые виды элементов управления, к примеру, dates and times, email, number, range, tel, url, search и т.д.
• В HTML появилось много новых элементов. Вот некоторые из самых важных: summary, time, aside, audio, command, data, datalist, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video.

Основные преимущества HTML5 для разработчиков

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

1. Постоянная обработка ошибок:

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

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

1. Улучшенная семантика для элементов:

Для упрощения и улучшения понимания кода были внесены улучшения в семантические роли различных существующих элементов. Section, article, nav и header — это новые элементы, которые заменили большинство из ныне устаревших div элементов. Это сделало процесс обработки ошибок менее сложным.

1. Расширенная поддержка функций веб-приложений:

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

1. Создание мобильных сайтов стало проще:

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

1. Элемент canvas:

Одной из самых обсуждаемых особенностей HTML5 является элемент <canvas>. Внедрение этого уникального тега произвело огромное влияние на Adobe Flash. Несмотря на то, что многие сайты до сих пор используют Flash, все больше людей склоняются к использованию HTML5, именно поэтому есть основание полагать, что Flash в ближайшем будущем полностью устареет.

Используя элемент canvas разработчики могут рисовать с помощью скриптов (например JavaScript) графические изображения с применением различных цветов. Стоит упомянуть, что canvas это обычный графический контейнер и для показа изображения необходимо выполнение скрипта. Вот пример использования JavaScript в сочетании с canvas:

1. Элемент menu:

Недавно добавленные элементы <menu> и <menuitem> являются составными частями интерактивных элементов, однако, они не очень популярны в сообществе разработчиков. Несмотря на это, эти два элемента могут быть использованы для обеспечения более лучшей интерактивности на странице.

Тег <menu> используется для простоты предоставления команд меню на мобильных приложениях и приложениях рабочего стола. Здесь показано возможное применение тега <menu>:

1. Настраиваемые атрибуты данных:

Добавление пользовательских атрибутов было возможно и до появления HTML5, но оно было связано с определенным риском, к примеру, в HTML4 пользовательские атрибуты могли приводить к остановке рендера страницы или что еще хуже, могли стать причиной неправильной работы документа. Атрибут data-* в HTML5 поставил точку в решении этой часто встречающейся проблемы. Этот атрибут имеет несколько предназначений, но основной целью его введения было хранение дополнительной информации о разных элементах. Теперь, благодаря этому атрибуту могут быть включены пользовательские данные, что дает разработчикам больше возможностей сделать привлекательные и эффективные страницы, без лишних запросов на сервер или вызовов Ajax.

1. (Возможное) прощание с Cookies:

Поддержка локального хранилища стала важным дополнением к HTML5. До появления HTML5, если разработчики хотели хранить что-либо на стороне пользователя, им приходилось использовать файлы cookie. Однако файлы cookie могут содержать лишь небольшой объем данных (не говоря уже о том, что все их ненавидят), это прибавило добавлению объекта localStorage в HTML5 еще больше преимуществ. Объект localStorage является частью глобального пространства имен и при использовании скриптов может быть доступен из любого места.

Шпаргалка HTML5

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

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

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

1. Мобильные браузеры теперь работают более стабильно, чем стандартные приложения. До появления HTML5 ситуация была иная.
2. Сегодня ставка на адаптивные сайты (дружелюбные к мобильным устройствам) очень высока, так как почти 30 процентов пользователей мобильных устройств не хотят загружать специальные приложения. Это стало еще одним преимуществом HTML5, к примеру, если пользователь хочет использовать услуги компании, но не хочет загружать специальное приложение, он может просто зайти на сайт компании, чтобы сделать это.
3. Искоренение необходимости использования Adobe Flash позволяет разработчикам обеспечить более эстетичный пользовательский интерфейс. Использование JavaScript и MPEG4 в сочетании с HTML5 сделало жизнь пользователей намного лучше.
4. Возможность поддержки собственных аудио и видео элементов означает, что пользователям не придется загружать дополнительные плагины для просмотра мультимедиа на вашем сайте. Поддержка мультимедиа, предоставляемая HTML5, является одной из самых значимых причин, по которой он используется намного чаще чем HTML.

Заключение

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

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

Елена имеет профессиональное техническое образование в области информационных технологий и опыт программирования на разных языках под разные платформы и системы. Более 10 лет посвятила сфере веб, работая с разными CMS, такими как: Drupal, Joomla, Magento и конечно же наиболее популярной в наши дни системой управления контентом – WordPress. Её статьи всегда технически выверены и точны, будь то обзор для WordPress или инструкции по настройке вашего VPS сервера.

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

Рубрика	Программирование, компьютеры и кибернетика
Вид	курсовая работа
Язык	русский
Дата добавления	17.02.2015
Размер файла	84,6 K

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

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

Размещено на http://www.allbest.ru

ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ СИСТЕМЫ HTML5

1. 1 История появления HTML5

1.3 Основные особенности HTML5

Глава 2. ОТЛИЧИЯ HTML5 ОТ ПРЕДЫДУЩИХ ВЕРСИЙ. СРАВНИТЕЛЬНЫЙ АНАЛИЗ ПЛЮСОВ И МИНУСОВ

2.1 Преимущества HTML5

2.3 Использование секционных элементов HTML5

2.6 Сравнение браузеров

Со времён языка разметки HTML4.1 прошло более 14 лет и на сегодняшний момент Html5 официально признан от 28 октября 2014 года. Сейчас во всю используется данный язык во всемирной паутине, но множество сайтов ещё не перешло на новый стандарт.

Первые задумки нового языка разметки веб-страниц появились в 2004 году, как раз на момент создания крупных деятелей веб-индустрии, таких как (Apple, Microsoft, Google и Mozilla).

Перед самим созданием HTML 5 компанией WHATWG создавались две спецификации Web Forms 2.0 и Web Apps 1.0, которые в следствие объединили и сделали частью спецификации языка HTML 5. С 2009 года к разработке присоединилась World Wide Web Consortium (W3C), который возглавляет британский учёный и один из изобретателей всемирной паутины Сэр Тимоти Джон Бернерс-Ли. Тогда же решили писать HTML5 без пробела.

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

Самые знаменитые возможности у нового языка — это появление таких тегов как aside, footer, header, nav и article, и полная поддержка новых типов полей ввода в формах, включая атрибут phone и email, обеспечивающих правильную валидацию, а также ряд новых медиа-элементов (audio, video, canvas), позволяющих динамически менять или рисовать контент.

Целью данной курсовой работы является изучение структуры HTML5.

Предметом курсовой работы является практика реализации сайтов на системе HTML5.

Объектом курсовой работы является стандарт HTML5.

Задачами курсовой работы является:

— изучение теоретических основ системы HTML5;

— анализ основных особенностей HTML5;

— изучение преимуществ и недостатков;

— исследование перспектив развития HTML5.

Структура курсовой работы:

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

ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ СИСТЕМЫ HTML5

1.1 История появления HTML5

История появления языка кроется в далёком 1969 году. Чарльз Гольдфарб, работавший в IBM, впервые создал прототип языка для разметки технической документации, названный в последствии GML. В 1986 году язык приобрёл статус международного стандарта и стал называться SGML, что означает Standard Generalized Markup Language. На этом этапе создатели старались избавиться от проблем отображения текста в различных программах, компьютерных платформ и устройствах вывода. SGML ещё не готовая система разметки текста, а лишь метаязык, позволяющий строить подобные системы для конкретных обстоятельств. Этот стандарт может установить правила определения новых элементов и структурных взаимоотношений между ними, а также указать синтаксис записи элементов разметки. Но для полноценной разметки документов необходимо приложение SGML, которое включает в себя набор элементов, представляющих формальное описание структуры документа.

Популярность SGML так и не набрал до 1991 года. Им заинтересовались сотрудники Европейского института физики частиц (CERN), занимавшиеся в то время созданием системы передачи гипертекстовой информации через интернет. Тогда же язык был переименован в язык разметки гипертекста HTML (Hyper Text Markup Language). HTML 1.2 обновлённый на июнь 1993 года имел уже в себе более 40 тегов, из которых лишь три могли применяться для определения физических параметров представления документа.

В апреле 1994 года языком занялся Консорциум Всемирной паутины (World Wide Web Consortium) сокращённо W3C, созданный в том же году. На тот момент 1994-1995 года членами W3C были исключительно университеты и научные учреждения. Появляется спецификация языка HTML 2.0 в которой реализован механизм форм для отсылки информации с компьютера пользователя на сервер, но окончательно она была утверждена в сентябре 1995 года.

Работа над HTML 3 началась в марте 1995 года и первая версия включала в себя множество нововведений таких как вставка обтекаемых текстом картинок, создание таблиц, математических формул и примечаний. Эта версия уже имела поддержку иерархических спецификаций (CSS). Система формально независима от HTML, имеет свой синтаксис и позволяет задавать параметры представления любого тега HTML, но CSS ещё далёк до завершения.

Корпорация Microsoft профинансировав W3C и наполнив его людскими ресурсами получила право едва ли не решающего голоса в этой организации. Проект HTML 3 заморозили и вместо него в очень краткие сроки создаётся проект HTML 3.2, который описывает большинство расширений Microsoft. HTML 3.2 утверждается в январе 1997 года.

В декабре 1997 года принят стандарт HTML 4.0, который заметно обогатился визуальными тегами. Обеспечилась и доступность многоязычных документов в различных средах. На этот момент в стандарте проведено чёткое разделение логических и визуальных тегов. Появляется объектная модель страницы (Document Object Model), элементами которой можно манипулировать посредствам скриптовых языков таких как JavaScript. HTML вместе с Document Object Model и JavaScript позволяли загруженной интернет странице изменять свой внешний вид в соответствии с действиями пользователя. 24 декабря 1999 года появляется HTML 4.01, являющийся последней редакцией четвёртой версии.

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

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

Разработчики web-браузеров из компаний таких как Opera Software и Mozilla Fuondation, не заставили себя долго ждать, всем хотелось расширить возможности XHTML, но когда попытки не увенчались успехом, компании Opera, Mozilla и Apple создали рабочую группу по технологиям гипертекстовых web приложений сокращённо WHATWG, с целью работы над новыми решениями языка.

Группа WHATWG ставила перед собой задачу постепенного расширения языка, в ходе которого были созданы две спецификации расширений: Web Applications 1.0 и Web Forms 2.0. В итоге спецификации «эволюционировали» и появился HTML5.

1.2 Состав HTML5

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

Итак, приведём список и краткое описание основных категорий функциональных возможностей, охватываемых в HTML5:

Эта часть содержит новые семантические элементы, улучшенные элементы управления для веб-форм, поддержку видео и аудио, а также холст для рисования на JavaScript.

Ранние возможности HTML5.

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

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

Из-за перехода поддержки HTML от одной организации W3C к другой WHATWG, а потом обратно, возникла довольно необычайная ситуация. С технической точки зрения организация W3C отвечала за определение, что именно является официальным HTML5, а что наоборот. И в то же самое время группа WHATWG не прекращала свою работу, разрабатывая и придумывая всё новые возможности языка. На сегодняшний день она предпочитает называть его не HTML5, а просто HTML, объясняя это тем, что HTML будет продолжать и в будущем в качестве «живого» языка.

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

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

1.3 Основные особенности HTML5

Самой важной задачей языка стал вопрос реализации правильного интегрирования мультимедийного контента, исключающего в дальнейшем использования дополнительных плагинов в веб браузерах, таких как Adobe Flash Player и другие. Заменяя их на довольно привычные веб разработчику теги.

Рассмотрим функцию «Canvas» в переводе «Холст». В данном языке он предназначен для создания растрового изображения при помощи JavaScript. Используется для создания простеньких векторных изображений, непосредственно прописываемых в самом HTML, было это до недавнего времени, на сегодняшний момент можно использовать полноценные 3D сцены у себя на сайте, с обновлёнными браузерами Google, Firefox и другими. Blend4Web если вкратце, то это открытая платформа для создания трёхмерных веб-приложений, открытый релиз которой прошёл в марте 2014 года. И в качестве основного инструмента в ней используется Blender -популярный пакет 3D моделирования с открытым исходным кодом.

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

Полностью меняется и способ хранения информации по новой технологии Web Storage на клиентской стороне храниться до 10 Мбайт данных. В Cookies информация хранится в специальной базе данных, что позволяет хранить не только частичную информацию о сайтах, но и специальные веб-приложений, способствующих работать без подключения к интернету.

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

В HTML5 элемент <video> предназначен для вставки видео на вашу страничку без использования сторонних плагинов, наподобие Apple QuickTime, Adobe Flash. Тег так настроен, что вам остаётся выбрать лишь видео файл, который будет размещён на вашем сайте, поддерживающий HTML5, и браузеры сами выберут тот формат, с которым они работают.

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

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

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

В полях ввода произошли различные добавления новых полей, после тега <form>. Перечислим их:

<input type=»search»> для поиска

<input type=»number»> для ввода чисел

<input type=»range»> ползунок

<input type=»color»> для выбора цвета

<input type=»tel»> для телефонного номера

<input type=»url»> для веб-адресов

<input type=»email»> для почтовых адресов

<input type=»date»> для выбора календарной даты

<input type=»month»> для месяца

<input type=»week»> для недели

<input type=»time»> для времени

<input type=»datetime»> для указания даты и времени

<input type=»datetime-local»> для местной даты и времени

Это небольшое изменение для формы, подсказывающий текст для тега <input>. Текст не отображается внутри поля, пока оно не будет очищенно или не получит фокус и при щелчке в поле, подсказывающий текст исчезает.

Веб сайты используют JavaScript для автоматического перемещения фокуса к первому элементу формы. К примеру, на сайте Google.ru автофокус перемещён на форму для ввода поискового запроса, и пользователям уже не приходится каждый раз наводить на него курсор. Ранее автофокус писался на JavaScript, теперь же для форм в HTML достаточно применить атрибут autofocus. Разработчики браузеров могут предложить пользователям возможность отключить в настройках автофокус.

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

Новая технология Web Forms 2.0. обеспечивает более быструю и качественную обработку, введённую пользователем данных, при этом количество тегов заметно увеличено.

Глава 2. ОТЛИЧИЯ HTML5 ОТ ПРЕДЫДУЩИХ ВЕРСИЙ. СРАВНИТЕЛЬНЫЙ АНАЛИЗ ПЛЮСОВ И МИНУСОВ

2.1 Преимущества HTML5

HTML5 привлёк к себе огромное внимание веб-разработчиков. И так отличия HTML5 от его предшественников.

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

Структурные возможности HTML5 создают структуру веб-документа более простой и понятной, а код намного «чище». Вместо контейнеров div, использующихся в HTML 4.01 можно использовать такие теги как header «заголовок», nav «навигация», section «раздел документа», article «содержимое сайта», aside «содержимое сайта» и footer «подвал сайта».

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

Пример 1. Вместо громоздкой записи HTML4.01:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»

в HTML5 это будет выглядеть гораздо короче:

<!DOCTYPE html>.
Пример 2. В HTML4 для создания заголовка необходим код:

В HTML5 используется элемент <header> вместо <div >:

Как видим, код становится проще и понятнее.

Мультимедийные возможности в HTML5 исключают использование Adobe Flash и других сторонних программ. Для добавления музыкальных и видео файлов можно воспользоваться любым браузером, поддерживающим HTML5, когда в HTML 4.0 и HTML 4.01 необходимо наличие дополнительных программ.

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

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

Анимации и графика. Здесь разработчики могут воспользоваться функцией Canvas, которая способна заменить Adobe Flash и подобные ему дополнительные программы. Появляется возможность разместить на своём сайте анимацию, графические элементы и даже небольшие игры, непосредственно на веб-сайте.

Преимущества для конечного пользователя. Здесь произошёл ряд полезных изменений:

— Не требуется установка многочисленных сторонних программ.

— Совместимость HTML5 в отличие от своих предшественников, доработана. Он совместим не только на персональных компьютерах и ноутбуках, но ещё и с планшетами, смартфонами, современными моделями DVD плееров, телевизоров, консолей, которые обеспечивают доступ к интернет ресурсам.

— В HTML5 единый стандарт отображения контента, независимо от типа браузера.

2.2 Недостатки HTML5

Adobe на фоне становления HTML5

На сегодняшний день хоть в HTML5 и есть нововведения, которые позволят заменить некоторые дополнительные программы как Adobe Flash, не стоит говорить об окончательном уходе этого знаменитого продукта за ненадобностью. Например, вот что говорят разработчики игр о недостатках в HTML5, явно мешающих использовать язык разметки в этом направлении:

Не каждый веб-браузер поддерживает игры, созданные в HTML5.

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

Открытость кода, что неприемлемо для платных игр.

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

Неудобство в создании векторной графики.

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

Philippe Le Hegaret — руководитель направления компании W3C отмечает, что в ближайшее и довольно длительное время технологии HTML5 и Adobe Flash продолжат свое сосуществование, поскольку резко отказаться от Flash не получится.

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

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

Мультимедийный контент в отношении к HTML5, который так же не позволяет сделать окончательный выбор. Как отметили в официальном блоге YouTube, поддержка видео в HTML5 воспроизводит мультимедийный контент сайта на PC и других устройствах, имеющих поддержку интернета, которые не имеют поддержки Flash Player. Однако в полной степени стандарт HTML5 всем этим потребностям не отвечает. В нём имеются не только недостатки, касающихся воспроизведения видео, но и создания игр и векторной графики. Но не смотря на всю эту критику со стороны веб- разработчиков, новый стандарт стоит внимания.

2.3 Использование секционных элементов HTML5

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

Элемент main отражает главное содержание вашей веб-страницы. Оно должно быть уникальным и не повторяться в других областях сайта.

Возможно использовать лишь один элемент <main> и его нельзя помещать внутри элементов <aside>, <article>, <footer>, <header> или <nav>.

Атрибут роли ARIA role=”main”, указывает на важность этого документа программам, которые не поддерживают этот элемент (некоторые скринридеры)

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

<p>Опубликовано: 15 ноября 2014</p>

Так же можно вкладывать элементы <article> один в другой. Всё это будет связанно с внешним элементом <article>.

Элемент section используется для представления секции или группы контента. Он похож на <article>, но здесь допускается отсутствие смысла содержимого внутри этого элемента вне контекста страницы. В этом случае рекомендуется применять теги h2…h6 для обозначения темы группы (секции).

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

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

<h2>Покупка акций газпром </h2>

<p>Данные о держателях акций</p>

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

<h2>Путешествие к центру земли</h2>

<p>Опубликовано: 10 ноября 2014</p>

Элемент footer в основном используется для такой информации о разделе, как авторские права, сторонние ссылки, автор.

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

Этот элемент часто используют внутри тега <footer>, который расолагается внутри элемента <article>.

Контакты <a href=»mailto:[email protected]»>Макс</a>

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

Это информация о вашем местонахождении и к тому же обмен этой информации со своими друзьями. Существует несколько способов определить местоположение:

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

GPS — это специальное оборудование, вычисляющее долготу и широту на основе данных, посылаемых спутниками.

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

Простейшее использование API геолокации:

Здесь нет проверки и других дополнительных функций.

В Mozilla Firefox вызов функции getCurrentPosition() приведёт к выводу вот такой информационной панели в верхней части вашего браузера.

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

На данном этапе у нас есть результат, возвращаемой getCurrentPosition().Информация выглядит следующим образом:

var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

Функция вызывается с единственным параметром, но с двумя свойствами объекта. Это timestamp и coords. Timestamp содержит дату и время, когда было вычислено место, а coords имеет свойства:

latitude, longitude — В градусах.

altitude, accuracy, altitudeAccuracy — В метрах.

Heading — Градусы по часовой стрелке от севера.

Speed — В метрах в секунду.

Рекомендуется использовать latitude, longitude, accuracy в остальных случаях возможно возвращение null, в зависимости от используемого устройства.

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

navigator.geolocation.getCurrentPosition (show_map, handle_error)

Второй аргумент функции getCurrentPosition() и есть функция обработки ошибок, на случай если что то пойдёт не так.

Свойство code принимает значения:

PERMISSION_DENIED (1) пользователь нажал на кнопку «Не сообщать» или запретил доступ к своему местоположению;

POSITION_UNAVAILABLE (2) если сеть не работает или нет связи со спутниками;

TIMEOUT (3) если сеть работает, но вычисление положения занимает слишком много времени.

UNKNOWN_ERROR (0) если что-нибудь еще пойдет не так.

Во многих популярных телефонах существует два метода определения местонахождения. Первый метод не точный, но быстрый. Он вычисляет положение на основе различных операторных вышек по близости. Метод не требует GPS оборудования.

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

На примере можно рассмотреть поиск местоположения на Google Maps на iPhone и других поддерживаемых устройствах. Сначала мы видим большой круг, который уточняет местоположение путём ближайших операторных вышек, после уточнения идёт получение точных координат через спутники GPS.

У функции getCurrentPosition() есть необязательный третий аргумент, объект PositionOptions. Его свойства могут быть не заданы или заданы как все, так и по одному.

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

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

MaximumAge — позволяет устройству отправлять данные о местонахождении незамедлительно из закэшированной раннее позиции.

Если требуется постоянный поиск геолокации, то используют функцию watchPosition(), которая имеет ту же структуру, что и getCurrentPosition(). Она имеет две функции, для успеха и ошибок. Так же может включать в себя и необязательный объект PositionOptions, имеющий те же свойства, описанные раннее. Разница лишь в том, что функция будет вызываться каждый раз при смене положения пользователя и нет необходимости постоянного опроса позиции, устройство само определит оптимальный интервал опроса и вызовет функцию при изменении местоположения.

Сама функция watchPosition() возвратит число, которое следует где-то хранить. Что бы остановить слежение за пользователем, то вызывается метод clearWatch() и передаётся ему это число.

При запуске видео в браузере, браузер воспроизводит его через сторонние плагины, такие как всем известный Flash, RealPlayer или QuickTime. Плагины были отлично интегрированы с браузером, и некоторые даже не догадываются о этом, пока не пытаются посмотреть видео на платформе, которая не имела поддержки плагина.

Как бы мы поступили, если бы не знали о существовании HTML5.

Существовало несколько способов добавить видео на веб-страницу:

Использовался элемент <object>, который представлял из себя универсальный контейнер для внешних объектов. Недостатками это метода была малая степень интерактивности и взаимодействия с другими элементами этой веб-страницы.

Второй подход напрямую связан с использованием подключаемого дополнительного модуля браузера, такого как Flash или Silverlight. Хотя и подобные технологии позволяли создавать или использовать уже готовый видеоплеер, видеофайлы нуждались в кодировке, а html-код становился громоздким.

Стив Джобс в апреле 2010 года отдал своё предпочтение HTML5, упомянув, что Flash «уже не нужен», что несомненно повлияло на решения веб-разработчиков. Перспективы HTML5 в видео и создания веб-сайтов выглядят довольно позитивно.

Отличия HTML5 от Flash.

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

SEO оптимизация. Применение в мобильной среде является очевидным преимуществом, но не единственным над Flash. Структура сайта, созданного при помощи Flash для поисковиков представляет из себя «чёрный ящик» с непонятным содержимым, тогда как HTML5 позволяет заглянуть внутрь поисковым системам и тем самым индексировать страницу для лучших поисковых запросов.

HTML5 предлагает вам два способа подключения видео на веб-страницу и оба они связанны с элементом <video>, к тому же очень похоже на добавление картинки через тег <img scr=». .»>.

Пример: <video src=»https://knowledge.allbest.ru/programming/vi.webm»> </video>

И подобно изображению, вы всегда должны указать атрибуты width и height в теге <video>. Атрибуты могут не совпадать с высотой и шириной видео, которую вы указали в процессе кодирования. И в этом нет ничего страшного, браузер будет центрировать видео внутри прямоугольника, заданного тегом <video>, пропорции видео не будут затронуты.

Пример: <video src=»https://knowledge.allbest.ru/programming/vi.webm» height=»240″ width=»320″> </video>

По умолчанию для элемента <video> не добавляются элементы управления. Можно создать собственные элементы с использованием CSS, HTML и JavaScript. Для этого существуют такие методы как pause (), play () и свойства currentTime, muted и volume. Всё это пригодится для создания собственного интерфейса.

Но для того что бы браузер выводил встроенные элементы управления, необходимо в тег <video> включить атрибут controls.

Пример: <video src=»https://knowledge.allbest.ru/programming/vi.webm» width=»320″ height=»240″ controls> </video>

Пример видео со встроенными элементами управления в браузере Google Chrome версии 39

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

<video src=»https://knowledge.allbest.ru/programming/vi.webm» width=»320″ height=»240″ preload></video>

А вот пример видео, которое не загружается при загрузке страницы:

<video src=»https://knowledge.allbest.ru/programming/vi.webm» width=»320″ height=»240″ preload=»none»></video>

Атрибут autoplay делает именно то, как и звучит. Загрузка видео начинается при загрузке страницы и воспроизводит его при возможности. Рекламодатели от этого в восторге, в то время как другие это просто ненавидят.

Пример автоматического воспроизведения на сайте:

<video src=»https://knowledge.allbest.ru/programming/vi.webm» width=»320″ height=»240″ autoplay> </video>

Но что делать, если у вас не один, а целых три видеофайла с разными форматами: OGV, MP4 и WebM? HTML5 может сделать ссылки на все три файла с помощью такого элемента как <source>. Один элемент <video> может содержать несколько и более тегов <source>. Браузер проходится по списку источников по порядку и выберет то, что он может воспроизвести.

И для того, чтобы не тратить сетевой трафик впустую, пока браузер пытается воспроизвести каждое видео, следует сообщить браузеру информацию о каждом видео. Это делается внутри тега <source> с помощью атрибута type. Посмотрим на примере, как это выглядит.

<video width=»320″ height=»240″ controls>
<source src=»https://knowledge. allbest.ru/programming/vi.webm» type=’video/webm; codecs=»vp8, vorbis»‘>
<source src=»https://knowledge.allbest.ru/programming/vi.mp4″ type=»video/mp4; codecs=»avc1.42E01E, mp4a.40.2″>
<source src=»https://knowledge.allbest.ru/programming/vi.ogv» type=’video/ogg; codecs=»theora, vorbis»‘>
</video>

Разберём подробнее. Элемент <video> определяет не ссылку на видеофайл, а высоту и ширину видео. Внутри элемента <video> есть три элемента <source>, каждый из которых ссылается на отдельный видеофайл с атрибутом src. Атрибут type даёт информацию о видеоформате.

Тип атрибута состоит из трёх частей: формат самого файла, видеокодек и аудиокодек. Для видеофайла .ogv форматом контейнера будет ogg, в примере он выглядит следующим образом «video/ogg» и является MIME-тип для видеофайлов ogg. Видеокодек Theora и аудиокодек Vorbis. Само значение должно быть заключено в кавычки, для этого необходимо использовать различные виды кавычек, чтобы окружить значение целиком.

Пример: type=’video/ogg; codecs=»theora, vorbis»‘

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

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

Всё рассказанное выше является лишь частью того, как правильно залить видео на сайт. Нужно убедиться, что ваш веб-сервер включает в HTTP-заголовок Content-Type соответствующий ему MIME-тип.

Если вы используете веб-сервер Apache или его производные, то сможете пользоваться директивой AddType в httpd.conf или файле .htaccess.В случае использования другого веб-сервера, необходимо обратиться к его документации о том, как установить HTTP-заголовок Content-Type для определённых типов файлов.

«AddType video/mp4 .mp4

AddType video/ogg .ogv

AddType video/webm .webm».

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

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

Итак, приведём список и краткое описание основных категорий функциональных возможностей, охватываемых в HTML5:

Эта часть содержит новые семантические элементы, улучшенные элементы управления для веб-форм, поддержку видео и аудио, а также холст для рисования на JavaScript.

Ранние возможности HTML5.

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

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

Из-за перехода поддержки HTML от одной организации W3C к другой WHATWG, а потом обратно, возникла довольно необычайная ситуация. С технической точки зрения организация W3C отвечала за определение, что именно является официальным HTML5, а что наоборот. И в то же самое время группа WHATWG не прекращала свою работу, разрабатывая и придумывая всё новые возможности языка. На сегодняшний день она предпочитает называть его не HTML5, а просто HTML, объясняя это тем, что HTML будет продолжать и в будущем в качестве «живого» языка.

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

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

Основные особенности HTML5

Самой важной задачей языка стал вопрос реализации правильного интегрирования мультимедийного контента, исключающего в дальнейшем использования дополнительных плагинов в веб браузерах, таких как Adobe Flash Player и другие. Заменяя их на довольно привычные веб разработчику теги.

Рассмотрим функцию «Canvas» в переводе «Холст». В данном языке он предназначен для создания растрового изображения при помощи JavaScript. Используется для создания простеньких векторных изображений, непосредственно прописываемых в самом HTML, было это до недавнего времени, на сегодняшний момент можно использовать полноценные 3D сцены у себя на сайте, с обновлёнными браузерами Google, Firefox и другими. Blend4Web если вкратце, то это открытая платформа для создания трёхмерных веб-приложений, открытый релиз которой прошёл в марте 2014 года. И в качестве основного инструмента в ней используется Blender -популярный пакет 3D моделирования с открытым исходным кодом.

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

Полностью меняется и способ хранения информации по новой технологии Web Storage на клиентской стороне храниться до 10 Мбайт данных. В Cookies информация хранится в специальной базе данных, что позволяет хранить не только частичную информацию о сайтах, но и специальные веб-приложений, способствующих работать без подключения к интернету.

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

В HTML5 элемент <video> предназначен для вставки видео на вашу страничку без использования сторонних плагинов, наподобие Apple QuickTime, Adobe Flash. Тег так настроен, что вам остаётся выбрать лишь видео файл, который будет размещён на вашем сайте, поддерживающий HTML5, и браузеры сами выберут тот формат, с которым они работают.

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

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

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

В полях ввода произошли различные добавления новых полей, после тега <form>. Перечислим их:

<input type=»search»> для поиска

<input type=»number»> для ввода чисел

<input type=»range»> ползунок

<input type=»color»> для выбора цвета

<input type=»tel»> для телефонного номера

<input type=»url»> для веб-адресов

<input type=»email»> для почтовых адресов

<input type=»date»> для выбора календарной даты

<input type=»month»> для месяца

<input type=»week»> для недели

<input type=»time»> для времени

<input type=»datetime»> для указания даты и времени

<input type=»datetime-local»> для местной даты и времени

Это небольшое изменение для формы, подсказывающий текст для тега <input>. Текст не отображается внутри поля, пока оно не будет очищенно или не получит фокус и при щелчке в поле, подсказывающий текст исчезает.

Веб сайты используют JavaScript для автоматического перемещения фокуса к первому элементу формы. К примеру, на сайте Google.ru автофокус перемещён на форму для ввода поискового запроса, и пользователям уже не приходится каждый раз наводить на него курсор. Ранее автофокус писался на JavaScript, теперь же для форм в HTML достаточно применить атрибут autofocus. Разработчики браузеров могут предложить пользователям возможность отключить в настройках автофокус.

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

Новая технология Web Forms 2.0. обеспечивает более быструю и качественную обработку, введённую пользователем данных, при этом количество тегов заметно увеличено.

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

Есть миллионы веб-страниц, доступных в WWW. HTML, что означает язык разметки гипертекста, описывает, как содержимое структурируется на веб-странице. Это основной язык для всех других веб-технологий, включая CSS, JavaScript, библиотеки JavaScript, такие как jQuery и т. Д. С другой стороны, HTML5 является последней версией HTML. Он поддерживает большинство веб-браузеров и предоставляет дополнительные функции, чем обычный HTML.

Ключевые области покрыты

1. Что такое HTML
— определение, функциональность
2. Что такое HTML5
— определение, функциональность, особенности
3. Какова связь между HTML и HTML5
— Схема ассоциации
4. В чем разница между HTML и HTML5
— Сравнение основных различий

Основные условия

Что такое HTML

HTML — это язык разметки для создания структуры веб-страницы. Он состоит из тегов, и веб-браузер отображает текст, таблицы, списки и другие элементы на веб-странице в соответствии с этими тегами. HTML легче изучать по сравнению с языками программирования, такими как C, C ++ и Java. Более того, программист может легко создать HTML-файл с помощью текстового редактора, такого как блокнот, и запустить его в веб-браузере.

На странице HTML есть два основных раздела. Это головная секция и секция тела. В разделе заголовка содержатся заголовок и метаданные страницы, а в разделе тела — весь видимый контент веб-страницы. Кроме того, в HTML есть теги для представления различных элементов, таких как абзацы, заголовки, таблицы и списки. Существуют различные версии HTML, такие как HTML 1, 2 и т. Д. Последняя версия HTML — это HTML5.

Что такое HTML5

HTML5 — это новая версия HTML, заменяющая HTML 4. 01, XHTML 1.0 и XHTML 1.1. Это сотрудничество между Консорциумом World Wide Web (W3C) и Рабочей группой по технологиям гипертекстовых веб-приложений (WHATWG). HTML5 поддерживает все веб-браузеры, такие как Firefox, Chrome, Safari и Opera. Кроме того, мобильные веб-браузеры, предварительно установленные на iPhone, iPad и Android, также имеют отличную поддержку HTML5.

Особенности HTML5

HTML 5 предоставляет ряд новых функций. Некоторые из них следующие.

Формы 2.0 — Улучшение HTML веб-форм. Есть новые атрибуты для тег.

WebSocket — Предоставить технологию двунаправленной связи для веб-приложения.

холст — Поддерживает двухмерное рисование поверхностей для программирования с JavaScript.

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

Видео и аудио — Позволяет встраивать видео и аудио на веб-страницу без использования сторонних плагинов.

геолокации — Позволяет новым посетителям поделиться своим местоположением с веб-приложением.

Отношения между HTML и HTML5

• HTML5 — это последняя версия HTML.

Разница между HTML и HTML5

Определение

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

Версия

Более того, HTML является более старой версией, тогда как HTML5 является новой версией.

Браузеры

Другое различие между HTML и HTML5 заключается в том, что HTML хорошо работает в старых браузерах, тогда как HTML5 хорошо работает в новых браузерах, а также поддерживает старые браузеры.

Кроме того, HTML менее детализирован, в то время как HTML5 более детален.

Векторная графика

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

мультимедиа

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

Поддержка автономного хранилища

Кроме того, автономное хранилище поддерживает еще одно различие между HTML и HTML5. Поддержка автономного хранения не очень хороша в HTML, тогда как HTML5 очень хорошо поддерживает автономное хранение.

Поддержка веб-сокетов

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

геолокации

Кроме того, HTML не поддерживает геолокацию, но HTML5 поддерживает.

Заключение

Вкратце, HTML является стандартным языком разметки для создания веб-страниц и веб-приложений, в то время как HTML 5 является языком разметки, который является более новой версией HTML, которая используется для структурирования и представления контента в World Wide Web (WWW). В этом основное отличие HTML и HTML5.

Что такое HTML5: особенности и преимущества

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

Развитие интернет-технологий

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

Динамический язык HTML

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

Появление мобильного интернета

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

• Мобильные устройства работают на множестве различных операционных систем.
• Разнообразие экранов компьютеров усложнилось появлением сенсорного управления.
• Часть мобильных платформ не поддерживала технологию Adobe Flash.

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

Эпоха HTML5

Хотя программисты постоянно говорят, что разработка нового языка HTML5 все еще далека от завершения – в интернете уже встречается огромное количество таких ресурсов.
Иногда пользователь хочет посмотреть размещенное на сайте видео, а там написано, что плагина для Flash нет в наличии. Что делать? И тут же услужливый сайт выбрасывает надпись, что если формат Flash вашему браузеру не доступен, то не желаете ли вы посмотреть ролик средствами HTML5?
В таком случае знайте – это и есть сайт, разработанный на основе новой кодировки.
Сложно ли создать сайт на базе HTML5? Нужно ли заново учить все эти теги и скрипты? Вспомните про системы управления контентом и конструкторы сайтов. Все самые последние версии этих программ для разработки и администрирования сайтов уже программируются в HTML5.

Преимущества HTML5

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

1. Высокая скорость работы сайта за счет удаления всего лишнего из кода и перераспределения функциональных элементов.
2. Сайты стали более легкими, что очень важно для мобильного интернета, который работает медленнее стационарного.
3. Сайты на HTML5 используют совместно ресурсы браузеров и удаленных серверов, чтоб делает серфинг и просмотр сайтов более комфортным.
4. Медиа и интерактивные функции сайтов теперь решаются не путем установки на компьютер специальных приложений, а ресурсами самого кода сайта.
5. Улучшены возможности по работе сайтов на разных операционных системах и с разными браузерами.

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

Руководство для начинающих по HTML5

HTML5 был разработан, чтобы делать практически все, что вы хотите делать в Интернете, без необходимости загружать плагины браузера или другое программное обеспечение. Хотите создавать анимации? Вставлять музыку и фильмы? Создавать сложные приложения, которые работают в вашем браузере? Вы можете с HTML5.

В этом посте мы расскажем все, что вам нужно знать о HTML5, в том числе:

• что это такое
• в чем разница между HTML и HTML5
• что нового в HTML5
• как использовать HTML5
• когда вышел HTML5
• какие браузеры поддерживают HTML5

Что такое HTML5?

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

Чтобы понять, как развивался HTML с годами, давайте рассмотрим различия между HTML и HTML5.

HTML против HTML5

HTML является основным языком разметки World Wide Web. Первоначально предназначенный для семантического описания научных документов, с тех пор он эволюционировал, чтобы описывать гораздо больше.

Большинство страниц в Интернете сегодня были созданы с использованием HTML4. Несмотря на то, что со времени написания первой версии HTML в 1993 году он значительно улучшился, HTML4 по-прежнему имел свои ограничения. Самым большим было, если веб-разработчики или дизайнеры хотели добавить на свой сайт контент или функции, которые не поддерживались в HTML. В этом случае им пришлось бы использовать нестандартные проприетарные технологии, такие как Adobe Flash, которые требовали от пользователей установки плагинов для браузера. Даже в этом случае некоторые пользователи не смогут получить доступ к этому контенту или функции. Например, пользователи iPhone и iPad не смогут этого сделать, поскольку эти устройства не поддерживают Flash.

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

Чтобы понять, как HTML5 может все это делать, давайте посмотрим, что нового в этой последней версии HTML.

Что нового в HTML5?

HTML5 был разработан с основными целями, в том числе:

• Облегчение чтения кода для пользователей и программ чтения с экрана
• Уменьшение перекрытия между HTML, CSS и JavaScript
• Повышение гибкости и согласованности дизайна в разных браузерах
• Поддержка мультимедиа без использования Flash или других плагинов

Каждая из этих целей повлияла на изменения в этой новой версии HTML. Давайте сосредоточимся на семи из этих изменений ниже.

Новые семантические элементы

HTML5 представил несколько новых семантически значимых тегов. К ним относятся

,

,