HTML5 и обзор новых возможностей веб-программирования. Что нового в HTML5? Атрибут изображения srcset

Перевод: Влад Мержевич

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

Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML5 не просто определяет тег , он также сообщает DOM обо всех видео-объектах. Вы можете использовать интерфейс прикладного программирования (API) для поддержки разных видеоформатов, проигрывания ролика, его остановки, отключения звука, отслеживания загрузки файла и многого другого построенного на взаимодействии пользователя и тега .

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

Вот конкретный пример: HTML5 поддерживает все элементы форм, что и HTML4, а также включает новые элементы. Некоторые из них, вроде ползунков и выбора даты, напрашивались давно, другие не столь очевидны. К примеру, поле для ввода адреса электронной почты это рядовое текстовое поле, но современные браузеры для этого поля позволяют упростить набор адреса. Старые браузеры не поддерживают input type="email" , поэтому покажут обычное текстовое поле, и формы будут работать с ним без всяких дополнительных ухищрений. Это позволяет вам уже сегодня улучшить свои формы, даже если некоторые пользователи до сих пор привязаны к IE6.

«Обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент должен всегда располагаться в первой строке кода любой веб-страницы. Предыдущая версия HTML определяла несколько вариантов доктайпа и выбор правильного был делом нелегким. В HTML5 есть только один доктайп:

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

Если вы желаете сделать рисунок, проигрывать видео, улучшить функциональность форм или построить оффлайновое веб-приложение, то обнаружите, что HTML5 прекрасно поддерживается браузерами. Firefox, Safari, Chrome и мобильные браузеры работают с тегом , видео, геолокацией, локальным хранилищем и др. Google понимает аннотацию микроданных. Даже Майкрософт, который обычно тащится в хвосте стандартов, поддерживает основные возможности HTML5 в своем браузере Internet Explorer 9.

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

Тим Бернерс-Ли изобрел всемирную паутину в начале девяностых. Позже он основал W3C для поддержки веб-стандартов, организацию с более чем пятнадцатилетней историей. Вот что объявил W3C о будущем веб-стандартов в июле 2009:

Сегодня руководство заявило, что когда устав Рабочей Группы XHTML 2 завершится в конце 2009 года, он не будет продлен. Это сделано для повышения ресурсов рабочей группы по HTML. W3C надеется, что это ускорит продвижение HTML5 и разъясняет позицию W3C относительно будущего HTML.

HTML5 уже здесь. Давайте погрузимся в него.

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

а) Семантика (смысловое значение единиц языка)

В HTML5 появился ряд новых семантических тегов, позволяющих более осмысленно организовывать внутреннюю структуру веб-страниц. Это включает как блочные теги вроде header, footer, article, так и теги для разметки текста, например, mark, ruby, details. Ряд существующих тегов HTML4 признан устаревшим, отдельные теги поменяли свое значение, определенные изменения претерпели атрибуты.

б) Мультимедиа

HTML5 добавляет встроенную поддержку мультимедийного контента (аудио и видео) прямо в HMTL-разметке -- с соответствующим API для управления.

в) Графика

Работать с графикой на стороне клиента стало заметно проще. В HTML5 добавлен элемент canvas и специальный API на JavaScript для работы с ним. Canvas представляет собой динамическую «поверхность», поверх которой можно программного рисовать. Также в HTML5 официально включен тег svg, позволяющий внедрять векторную графику, описываемую соответствующим веб-стандартом SVG (Scalable Vector Graphics).

г) Веб-формы

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

д) JavaScript APIs.

В HTML5 включены новые возможности по перемещению объектов (Drag & Drop), работа с историей переходов (History API), а также ряд мелочей, вроде возможности сделать контент редактируемым прямо в текущем месте с помощью Content Editable атрибутов.

е) Новый DOCTYPE

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

В HTML 4 было 3 вида элемента :

• 1. Строгий (Strict)
• 2. Переходный (Transitional)
• 3. С фреймами (Frameset)

Зачастую выбор того или иного элемента DOCTYPE был достаточно затруднителен. В HTML5 DOCTYPE всего один он пишется так:

Эта короткая запись заменяет старую и длинную форму:

ж) Синтаксис

HTML 5 будет иметь два синтаксиса - "custom" HTML и XML. HTML синтаксис определяет детализированные правила синтаксического анализа (включая "обработку ошибок").

XML синтаксис совместим с документами XHTML1 и его реализациями. Чтобы использовать этот синтаксис нужно объявить MIME (Multipurpose Internet Mail Extensions) тип XML, а элементы должны быть выстроены согласно спецификации XML.

Рисунок 2 - основные свойства HTML5

HTML5 – новое поколения . С момента выхода рекомендации HTML 4.01 прошло уже более 10 лет (1999 год), а, стало быть, изменений и дополнений стоит ожидать достаточно много. Спецификация HTML5 на данный момент еще находится на стадии разработки. Консорциум всемирной паутины не разрабатывает стандарты, а выпускает лишь рекомендации. Начинается все с рабочих обсуждений, потом инициируется рабочий проект, потом выпускается кандидат на роль рекомендации и только потом спецификация окончательно получает статус рекомендации. Сейчас работы над HTML5 находятся еще на стадии рабочего проекта. Не смотря на это, большинство наиболее популярных интернет браузеров уже частично поддерживают нововведения HTML5. Перед тем, как сделать краткий их обзор повторюсь, что реализуют эту функциональность далеко не все браузеры и пока еще не в полном объеме. Сегодня мы можем рассчитывать на то, что в той или иной степени HTML5 поддерживают Opera, Chrome, Firefox, Safari и Internet Explorer.

А нового действительно много. Теперь веб-разработчики получат целый ряд дополнительных возможностей, таких как рисование геометрических фигур на веб-холсте, встроенную возможность перетаскивания элементов, воспроизведение видео и аудио файлов (раньше это можно было сделать только с использованием plug-in компонентов, таких как Adobe Flash Player) и многое другое, о чем будет сказано чуть позже. Для начала хотелось бы сказать пару слов об общих тенденциях развития HTML.

Та часть спецификации HTML5, которая “торчит” в виде новых тегов – это лишь “верхушка айсберга”. Большинство дополнительных возможностей HTML5 доступно только с использованием языка программирования сценариев , который является основой веб-программирования на стороне клиента. Если взять ту же функциональность рисования, реализованную с использованием тега , то речи не идет о “разметке рисунка” с использованием тегов геометрических фигур, как можно было бы предположить. Разметка холста заканчивается размещением элемента canvas на странице и все. Само рисование – это функция JavaScript, которая, получив доступ к холсту, будет выводить на нем фигуры примерно так же, как обычные приложения под Windows выводят графику на окна через интерфейсы GDI (Graphics Device Interface). Таким образом, спецификация HTML5 предъявляет достаточно серьезные требования к интернет браузерам в части реализации работы с JavaScript, которые во многом регламентируют программный интерфейс () работы с объектной моделью документа (DOM). Это не может не радовать, поскольку многие знают, что разные браузеры могут организовывать работу с объектной моделью через программные интерфейсы, отличающиеся друг от друга. Отчасти, спецификация программного интерфейса - это заслуга организации Web Hypertext Application Technology Working Group (WHATWG) , которая прикладывает усилия, направленные на стандартизацию не только языка разметки, но и API, используемого в приложениях, написанных на языках сценариев, таких как JavaScript. Организация WHATWG также участвует в разработке совместно с W3C.

Еще можно сделать вывод, что авторы HTML5 старались перенести реализацию некоторых популярных и востребованных задач веб-программирования в зону ответственности самих интернет браузеров. К примеру, используя HTML5, можно достаточно легко реализовать функциональность перетаскивания элементов, которая стала столь популярной в пользовательских интерфейсах интернет магазинов (выбор товаров в корзину). Раньше, для этого дела нужно было писать сценарий на JavaScript с использованием различного рода вспомогательных библиотек, таких как . Теперь реализовать перетаскивание намного легче, определив ряд дополнительных атрибутов и добавив несколько обработчиков событий для нужных вам тегов. Организация “drag&drop” с использованием jQuery тоже не отличается особой сложностью, но, в случае с HTML5, мы будем иметь дело с единой рекомендацией для всех программных интернет клиентов, а это уже совсем другой уровень поддержки и гарантии кроссбраузерности. Оказывается, что браузеры, поддерживающие рекомендации HTML5 теперь будут давать возможность сохранять и восстанавливать параметры сессии в контексте самого веб-сеанса. К примеру, при повторной загрузке страницы, введенная на ней ранее информация не будет потеряна, а будет восстановлена из окружения текущей сессии. Это уже “выход на территорию” веб-программирования на стороне сервера, поскольку ранее только средствами HTML и JavaScript этого сделать было нельзя.

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

Как уже было сказано, основная часть рекомендаций в части использования нового элемента - это спецификация программного интерфейса вывода на него графики. Для начала вы размещаете на странице тег определенной ширины и высоты, затем в коде JavaScript получаете к нему доступ (например, по id) и начинаете на нем рисовать. Рисование сводится к последовательному определению стиля линий strokeStyle , стиля заливки fillStyle и вызову методов рисования, таких как moveTo (перенести перо), lineTo (нарисовать отрезок), arc (нарисовать дугу) и т.д. Далее смотрите пример - простейший инструмент для рисования с помощью мыши. Ниже приведен его исходный код на JavaScript и HTML разметка. Для рисования "пером" нажмите левую кнопку мыши и водите курсором по холсту. В режиме "линии" или "полигоны" просто последовательно щелкайте по холсту, указывая тем самым вершины ломаных линий или площадных объектов.

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

//Код текущей операции var operation=0; //Статус операции var active=false; //Начало графической операции function startOperation(e) { if (operation==0) return; if (active) return; var context = getContext(); context.strokeStyle = getColor("stroke"); context.fillStyle = getColor("fill"); context.beginPath(); var point = getPoint(e); context.moveTo(point.x, point.y); active = true; } //Завершение графической операции function stopOperation() { if (!active) return; var context = getContext(); context.closePath(); active = false; } //События мыши function mouseDown(e) { var e = e || window.event; if (!active) { startOperation(e); return; } else { var context = getContext(); var point = getPoint(e); context.lineTo(point.x, point.y); context.stroke(); if (operation == 3) context.fill(); } return true; } function mouseUp(e) { var e = e || window.event; if (!active || operation != 1) return; stopOperation(); return true; } function mouseMove(e) { var e = e || window.event; if (!active || operation != 1) return; var context = getContext(); var point = getPoint(e); context.lineTo(point.x, point.y); context.stroke(); return true; } function getColor(control) { var color = document.getElementById(control).value; if (color == "") color = "#000"; return color; } //Элемент canvas function getCanvas() { return document.getElementById("canvas"); } //Контекст вывода 2d графики на элемент canvas function getContext() { return getCanvas().getContext("2d"); } //Элемент "выбранная операция" function getSelected() { return document.getElementById("selected"); } //Относительные координаты курсора мыши function getPoint(e) { var x = event.pageX || event.x; var y = event.pageY || event.y; var rect = getCanvas().getBoundingClientRect(); var point = {}; point.x = x - rect.left; point.y = y - rect.top; return point; } //Выбор операции function selectOperation(code) { stopOperation(); operation = code; switch(operation) { case 1: { getSelected().innerText = "Выбрано: перо"; break; } case 2: { getSelected().innerText = "Выбрано: линии"; break; } case 3: { getSelected().innerText = "Выбрано: полигоны"; break; } } }

перо линии полигоны Выбрано: цвет линий цвет заливки

Это не что иное, как поддержка браузерами классической модели “drag and drop”, которая очень популярна в обычных приложениях с графическим интерфейсом. Для элементов, которые будете “перетаскивать” определяете атрибут draggable , а для элементов, на которые будете “бросать” перетаскиваемые элементы определяете обработчики событий ondragenter , ondragover и ondorp . Вот, собственно, и все. Пример ниже.

Пример реализации операций drag and drop (перетаскивание элементов) средствами HTML5.

HTML5: Drag and Drop html, body { font-family: Arial font-size: 11px; } .basket { border: 1px solid #777; width: 105px; height: 120px; padding: 10px; border-radius:0 0 10px 10px; background-color: #eee; box-shadow: inset 0px 0px 5px #777; } .basket .ball { width: 30px; height: 30px; border-radius:15px; box-shadow: 5px 5px 10px #777; float: right; } .ball { border: 1px solid #FF7F50; width: 20px; height: 20px; border-radius:10px; background-color: #FF8C00; box-shadow: 0px 0px 5px #777; float: left; margin: 1px; } function startDrag(e) { var e = e || window.event; e.dataTransfer.setData("Ball", e.target.id); e.dataTransfer.effectAllowed="move"; return true; } function endDrag(e) { var e = e || window.event; e.dataTransfer.clearData("Ball"); return true; } function drop(e) { var e = e || window.event; e.target.appendChild(document.getElementById(e.dataTransfer.getData("Ball"))); e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; return false; } ...

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

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

Варианты элемента с различными значениями атрибута type:

Если значение адреса не соответствует формату url , то после нажатия [подтвердить] браузер предпримет попытку его исправить. Если он этого сделать не сможет, то выведет сообщение об ошибке. Если значение электронной почты не соответствует формату email , то после нажатия [подтвердить] браузер либо исправит адрес, либо сообщит об ошибке ввода.

Представление числовой величины в виде шкалы с возможностью указания интервалов ниже нормы low и выше нормы high , а также оптимальной величины optimum .

Элемент :

Визуализация процесса выполнения. Можно указать только максимальное max и текущее value значение.

Элемент Исходный HTML код

Число из интервала:

Целое число:

Дата и время:

Дата:

Время:

Месяц:

Неделя:

Цвет:

url:

email:

Появится возможность самостоятельно управлять переходом по загруженным ранее страницам с использованием JavaScript и объекта history . Например, вызов window.history.length вернет “длину предыстории”, а вызовы window.history.back() , window.history.forward() или window.history.go(stepCount) осуществят соответствующие переходы. Далее небольшой пример:

Вперед>

Эта замечательная функциональность позволит сохранять и восстанавливать данные сессии. Заполнили заказ, перешли на просмотр товара, вернулись (по ссылке) снова к заполнению заказа, а ранее введенные данные никуда не делись. Раньше, для того, чтобы обеспечить такое свойство страницы, без дополнительных усилий на стороне серверной части веб-приложения было не обойтись. Теперь будет возможность сохранять данные в контексте веб-сеанса (sessionStorage ) или локально в оперативной памяти браузера (localStorage ). Предполагается, что sessionStorage позволит сохранять данные, пока активен сеанс, в рамках которого они были инициализированы. Доступ к сохраненным данным может быть осуществлен с различных страниц сайта, загруженных браузером. Вариант с localStorage, судя по всему, должен сохранять данные, пока открыт сам браузер. Поскольку доступ к localStorage должен быть всегда, даже если нет связи с сервером, то и получить данные из localStorage сможет любая открытая браузером страница. Состояние сеанса работы в обоих случаях – это набор пар “ключ - значение”, доступ к которому осуществляется вызовами xxxStorage.setItem(key, value) и xxxStorage.getItem(key) .

Пример: В разделе о редактировании содержимого элементов с помощью нового атрибута contenteditable , появившегося в HTML5, есть. Ниже добавлены две кнопки, одна из которых сохраняет содержимое редактируемого блока, а вторая - его восстанавливает. Нажмите [Сохранить], отредактируйте содержимое блока и нажмите [Восстановить]. Если ваш браузер поддерживает функциональность HTML5 sessionStorage , то содержимое блока contenteditable будет восстановлено.

Восстановить

Сохранить Восстановить

Если ваша страница содержит элементы , которые загружают содержимое других страниц: не только страниц вашего сайта, но и страниц с абсолютно другого домена, то с внедрением рекомендаций HTML5 появится возможность обмениваться с такими окнами сообщениями. Страница, отправляющая сообщение делает это с использованием вызова функции window.postMessage(message, target) , а страница, принимающая сообщение должна содержать обработчик события “onmessage”, где она уже должна обработать текст сообщения event.data , если действительно является его адресатом – соответствует значению event.origin . До появления этого механизма, возможности общаться различным интернет ресурсам на стороне клиенте не было. Пример простейшей реализации общения двух страниц посредствам нового механизма сообщений HTML5 приведен далее. На первый взгляд может показаться, что ничего особенного в примере не происходит. Точнее не понятно, зачем все это нужно. На самом деле обмен сообщениями может стать популярным при создании информационных порталов, объединяющих в одном месте различные интернет сервисы. К примеру, пусть существует некий интернет сервис, услугами которого можно воспользоваться только после заполнения объемной электронной заявки. Также, пусть имеет место клиент, который довольно часто пользуется услугами этого сервиса, но его заявки каждый раз мало чем отличаются друг от друга (большинство параметров всегда одни и те же). Если бы подобный интернет сервис, помимо электронной формы для заполнения заявки поддерживал бы еще и “приемник сообщений” для автоматического оформления заказа на свои услуги, то его клиенты смогли бы “перетащить” окно этого сервиса на свои страницы (с использованием элемента ), создать там собственные (оптимизированные под себя) формы заполнения заявки и функции их отправки целевому сервису в виде сообщений. Большинство параметров в этом случае формировались бы автоматически, к примеру, реквизиты клиента. Безусловно, похожее общение можно реализовать посредством http запросов от клиента к серверу, в заголовке которых передавать требуемые параметры, но стоит заметить, что в случае с механизмом сообщений HTML5 трафик при передаче параметров нулевой, поскольку все происходит на стороне клиента.

Пример реализации обмена сообщениями между страницами средствами HTML5.

function init() { document.getElementById("form").onsubmit = sendMessage; } function sendMessage() { var location = window.location; var message = document.getElementById("message").value; var target = document.getElementById("target"); target.contentWindow.postMessage(message, location.protocol+"//"+location.host); return false; } ...

message_source.html:

Текст сообщения

function init() { if (window.addEventListener) window.addEventListener("message", receiveMessage, false); else window.attachEvent("onmessage", receiveMessage); } function receiveMessage(event) { document.getElementById("target").innerHTML = event.data; document.getElementById("origin").innerHTML = "от " + event.origin; } ...

messages_target.html:

Теперь с помощью определения атрибута contenteditable можно сделать редактируемым отдельные элементы разметки, например, блоки с текстом, списки и т.п. С помощью атрибута designmode можно сделать редактируемым всю страницу. Такая функциональность может быть полезна для организации обратной связи с владельцем ресурса, например, для заполнения и отправки ему заявления, заказа или чего-нибудь еще в этом роде. Вы создаете html страницу бланка в его первоначальном виде и отдаете пользователю для заполнения. После заполнения пользователь подтверждает введенные данные, и отредактированный документ отправляется на сервер. Пример редактируемой разметки приведен ниже:

Содержимое данного блока можно редактировать, поскольку для него определен атрибут contenteditable :

В ходе редактирования ячеек таблицы ширина колонок и высота строчек изменяется автоматически.

Для ввода нового элемента списка нажмите .

• Элемент списка 1
• Элемент списка 2
• Элемент списка 3

После добавления нового элемента в список нумерация будет обновлена автоматически.

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

Если вы видите геометрические фигуры ниже, то значит ваш браузер уже поддерживает svg.

Также ожидается поддержка MathML - языка разметки математических выражений на базе XML. Вот пример разметки формулы вычисления длины стороны треугольника по теореме косинусов:

a = b 2 + c 2 - 2 b c cos α

Если вы видите формулу с символом квадратного корня, то ваш браузер уже понимает MathML.

A = b 2 + c 2 - 2 b c cos α

В первую очередь хочется выделить группу новых элементов разметки страницы, которых в явном виде ранее не было. К ним относятся тег - статья, заметка, новость и т.д.; - заголовок статьи или верхний колонтитул - подвал или нижний колонтитул и - раздел или глава статьи. Для чего это нужно, если все то же самое можно сделать с помощью элементов различных классов? Нужно это для того, чтобы смысл вашей разметки был также понятен и тем, кто пытается ее анализировать. Я не про человека, читающего ваш текст (он разметку не видит, ему и без ее все понятно), а про автоматизированные системы и в первую очередь это относится к поисковым машинам. Семантическая нагрузка очень важна для поисковых машин при вычислении степени релевантности ваших страниц конкретному поисковому запросу. Отдельного внимания в этом контексте заслуживает элемент , поскольку он создан для того, чтобы выделить блок с основными навигационными ссылками на вашей странице. Возможно, поисковые машины будут как-то иначе относиться к подобным ссылкам. Ниже приведена сводная таблица с новыми тегами HTML5, которые добавляют разметке смысловой оттенок.

Ниже представлен пример HTML разметки с использованием перечисленных тегов.

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

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

HTML5 представляет собой последнюю версию основного языка разметки web – страниц. За последние 10 лет HTML не имел серьёзных изменений, что является немного странным в соответствии с тем как стремительно развиваться web-технологии. И вот наконец нам переставлен HTML5, и что же нового мы получили в этой версии, расскажет эта статья.

У HTML5 в сравнении с предыдущим XHTML не такие строгие правила, теперь вы можете:

• Вы можете не использовать закрывающие теги.
• Не использовать кавычки в значениях атрибута.
• Использовать символы верхнего регистра в элементах и атрибутах.

Новые теги.
И так в HTML5 появились новые теги.

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