Неполный путеводитель по технологии
Новый стандарт языка гипертекстовой разметки – HTML5, намеченный к утверждению только в конце 2012 года (наверное, сразу после конца света), уже в полной мере присутствует в нашей жизни. Попытаемся понять, что собою представляет новшество и чем оно грозит нам – простым веб-разработчикам
История вопроса
История вопроса
Хотя... может, лучше обойтись? В конце концов сагу о том, что получилось (вернее, не получилось) из стандарта XHTML, почему так взбунтовались Mozilla, Opera и Apple против самого консорциума и чем это все закончилось, все заинтересованные лица знают и так.
Гораздо интереснее то, что появившаяся несколько лет назад черновая спецификация HTML 5 консорциумом W3C была приговорена к утверждению в очень отдаленном будущем. Сообщество веб-разработчиков приуныло, но тут случилось невероятное. Обычно консервативные производители браузеров вдруг наперегонки начали реализовывать не принятые спецификации. Причем не только их, а еще ряд давно назревших в мире решений, находящихся на той или иной стадии разработки. Все это, разумеется, тоже сейчас называют HTML5-технологиями и, возможно, правильно – ведь до утверждения стандарта еще довольно далеко. Как бы то ни было, многие новые технологии уже доступны для веб-программиста. Я хочу, не вдаваясь в термины. а просто хочусделать их краткий обзор.
Гораздо интереснее то, что появившаяся несколько лет назад черновая спецификация HTML 5 консорциумом W3C была приговорена к утверждению в очень отдаленном будущем. Сообщество веб-разработчиков приуныло, но тут случилось невероятное. Обычно консервативные производители браузеров вдруг наперегонки начали реализовывать не принятые спецификации. Причем не только их, а еще ряд давно назревших в мире решений, находящихся на той или иной стадии разработки. Все это, разумеется, тоже сейчас называют HTML5-технологиями и, возможно, правильно – ведь до утверждения стандарта еще довольно далеко. Как бы то ни было, многие новые технологии уже доступны для веб-программиста. Я хочу, не вдаваясь в термины. а просто хочусделать их краткий обзор.
Итак, приступим. Что нам принес HTML5?
DOCTYPE и другие
Честное слово, это просто революция, и я уже сразу полюбил новый стандарт. DOCTYPE теперь выглядит так:
это на законном основании).
Разметка
Давно обещанные новые элементы разметки, такие, как
<nav>, <header>, <article>, добавляющие осмысленности в структуру документа, уже воспринимаются современными версиями браузеров (правда не полностью и со многими нюансами). Разметка HTML5 выглядит следующим образом:
Про бесконечные </div></div><div class='footer'></div></div> можно забыть. Может, не совсем, но в большинстве случаев – тег <a> теперь означает блочный элемент и тоже может выполнять функции группировки:
Тут появилось много вкусностей, существенно облегчающих жизнь верстальщику и разработчику интерфейса.
Появились новые типы тега input:
number – для целочисленных данных
range – элемент управления в виде ползунка
date – вывод календаря для выбора даты (а еще time, datetime, month, week);
color – вывод цветовой палитры
search (так и тянет написать, что такой тег устанавливает поисковый движок на сайт, но нет, он всего лишь предполагает специфичное оформление поля ввода)
Введены новые атрибуты: placeholder – замещаемый контент в текстовых полях, autofocus, min, max и давно востребованный required (делающий заполнения поля обязательным).
Примеры работы с HTML5-формами смотрите на рис. 1-3.
Атрибуты data-*
Это не меньший прорыв, чем DOCTYPE. И столь же непонятный для людей, далеких от разработки. Но мы-то с вами знаем, какие усилия иногда требовались для передачи с тегом дополнительной информации для обработки скриптом.
Есть, конечно, выход в виде реконструкции data JavaScript-фрэймворка jquery, но по сути это не более чем «костыли».
Теперь же у нас есть специальная группа пользовательских атрибутов вида data-*, с помощью которых мы можем добавлять в тег любую дополнительную информацию.
Пример:
В HTML5 включены такие мощные инструменты, как Javascript-API, File System API, Web Audio API. Мощные они пока по большей части потенциально, но перспективы
очень вдохновляют. Что еще? Drag-and-drop, управление историей браузера, api-работы с микроданными.
Мультимедиаэлементы
Про тег <video>, наверное, знают все, как и о копьях, сломанных вокруг форматов представления видеоконтента. Единый свободный формат – это, конечно, важно, но посмотрите, как удобно теперь этот самый контент вставлять в веб-страницу:
Здесь атрибут controls отвечает за наличие элементов управления отображения видео.
Что же касается форматов кодеков, то вопрос все еще не решен (хотя свет в конце тоннеля вроде виден). Впрочем, HTML5 позволяет использовать кодеки на выбор:
Canvas
Это, наверное, самое известное новшество языка. Часто вообще происходит некоторая подмена понятий, и, говоря
о HTML5, подразумевают работу именно с canvas.
На самом деле этот элемент (ну, и WebGL, о нем позже) действительно очень эффектен. Для тех, кто еще не в курсе, canvas – это элемент, предназначенный для создания растовых изображений посредством JavaScript. Уже сегодня его поддерживают все наиболее популярные браузеры.
С помощью canvas строятся графики, анимация, разрабатываются браузерные игры. Существует несколько библиотек для создания сложных графических систем (при-мер – LibCanvas, jCanvaScript).
Рассказывать о возможностях сanvas можно долго, и есть большое искушение это сделать, но лучше пусть 'nj бу-
дет отдельная статья. А сейчас просто небольшой пример создания изображения средствами canvas:
Результат на рис 4.
WebGL
На самом деле эта спецификация в настоящее время не входит в стандарт HTML5, но она настолько связана с новым представлением о веб-графике вообще и с вышеописанным элементом canvas в частности, что не упомянуть здесь ее просто не представляется возможным.
WebGL – это развитие идеи сanvas 3D, представляет собой обвязку из JavaScript-скриптов к API OpenGL ES 2.0, реализованную на уровне браузера. Практически это позволяет внедрять аппаратно-ускоренную 3D-графику в вебстраницы без необходимости использовать специальные плагины на любой платформе, поддерживающей OpenGL или OpenGL ES. Фактически с помощью WebGL можно создавать полноценные 3D-миры, вроде изображенного на рис. 5. Правда, не все браузеры полноценно поддерживают возможности стандарта. Впрочем, это вопрос времени.
XMLHttpRequest 2
XMLHttpRequest2, или, точнее, XMLHttpRequest Level 2, – это тот самый, ответственный за AJAX-функционал объект XMLHttpRequest, оснащенный новыми возможностями.
Прежде всего теперь не нужно никаких хаков, чтобы выполнять такие операции, как кроссдоменные запросы, процесс загрузки файлов, загрузка и отправка двоичных данных.
Во-первых, это свойства responseType и response, позволяющие явно указать браузеру формат ожидаемых в результате ответа данных. После установки соответствующего значения responseType свойство XMLHttpRequestю response будет содержать значения в одном из следующих форматов: DOMString, ArrayBuffer, Blob, Document.
Для отправки данных есть обновленный метод send(), который теперь позволяет отправлять данные типов DOMString, Document, FormData, Blob, File, ArrayBuffer.
Проблема кроссдоменного взаимодействия решается в XMLHttpRequest2 с помощью технологии CORS (Cross Origin Resource Sharing). На практике это обозначает добавление к запросу одного заголовка:
Access-Control-Allow-Origin: http://othersite.com
который может быть выдан как одному сайту, так и целому домену.
Еще одно полезное свойство обновленного элемента – возможность работы с данными, поступающими из формы в виде единого объекта – FormData(), инкапсулирующего все элементы формы (да, да, и <input type="file">). Отправка данных при этом выглядит совершенно также:
Надо заметить, что разработчики по-видимому находились под сильным впечатлением от возможностей и подхо-
дов библиотеки jquery, но разве это плохо?
К другим возможностям XMLHttpRequest2 относятся отправка файла по частям, а также загрузка и сохранение файла в HTML5 File System.
Более подробно о работе с обновленным элементом XMLHttpRequest вы можете узнать из статьи «Новые возможности XMLHttpRequest2» [4].
Потери: frame, frameset и noframes
Да, да. Разработчикам phpMyAdmin, а также других приложений, интерфейс которых имеет фреймовую структуру, придется переверстывать свои детища. Это не единственная потеря – в прошлое уходят font, big, center, u, acronym. Удалось отстоять (с трудом) b, i. Тег <a> так-же, как это ни странно, был под угрозой, но, слава богу,
оставлен.
Под нож пошли также атрибуты bgcolor, cellspasing, cellpadding, valign и некоторые другие. Конечно, вместо них давно следует использовать CSS.
Вот какие технологии нас ожидают, большая часть из них уже доступна для использования и ждет разработчиков.
К сожалению, за бортом обзора остались Геолокация, HTML MicroData, Web Sockets API, FileAPI, Web Storage, Indexed DB, Web Workers и многое другое. Мы еще обяза-
тельно расскажем об этих инновациях, тем более что почти
каждая из них заслуживает отдельной статьи.
1. HTML5 (including next generation additions still in development) – текущий черновик стандарта.
2. Тест браузеров на количество реализованных возможностей стандарта HTML 5.
3. Отличия HTML 5 от HTML 4.
4. Новые возможности XMLHttpRequest2.
DOCTYPE и другие
Честное слово, это просто революция, и я уже сразу полюбил новый стандарт. DOCTYPE теперь выглядит так:
<!DOCTYPE html>И это прекрасно! Нет ни номера версии, ни ссылки на dtd, тем более всяких рудиментов вроде xml:lang. Идея очень проста – такой тип включает все версии html- и xhtml-документов, в том числе и будущие. И это закономерно – в конце концов данный тег предназначен в первую очередь для валидаторов. Теперь допустимы следующие конструкции:
<link href="file.css" rel="stylesheet"></link> <script src="file.js"> </script>(если вы верстали именно так, то теперь можете делать
это на законном основании).
Разметка
Давно обещанные новые элементы разметки, такие, как
<nav>, <header>, <article>, добавляющие осмысленности в структуру документа, уже воспринимаются современными версиями браузеров (правда не полностью и со многими нюансами). Разметка HTML5 выглядит следующим образом:
Пример веб-страницы HTML5 <!DOCTYPE html> <html> <head> <title>Пример веб-страницы HTML5</title> </head> <body> <header> <hgroup> <h1>...</h1> <h2 >..</h2 > </hgroup> </header> <section> <article> <h1>...</h1> <p>...</p> </article> <article> <h1>...</h1> <p>...</p> </article> <nav> <h2>Contents</h2> <ul> <li><a href="#Intro">Introduction</a></li> <li><a href="#History">History</a></li> </ul> </nav> </section> <footer> <p>...</p> </footer> </body> </html>
Про бесконечные </div></div><div class='footer'></div></div> можно забыть. Может, не совсем, но в большинстве случаев – тег <a> теперь означает блочный элемент и тоже может выполнять функции группировки:
<a href="/item.php&id=5"> <h2>Швабра</h2> <p>Необходимый инструмент для дома и самообороны</p> <img src = "shvabra.jpg"> </a>Формы
 |
| Рис 1 input type=date |
Появились новые типы тега input:
number – для целочисленных данных
range – элемент управления в виде ползунка
date – вывод календаря для выбора даты (а еще time, datetime, month, week);
color – вывод цветовой палитры
search (так и тянет написать, что такой тег устанавливает поисковый движок на сайт, но нет, он всего лишь предполагает специфичное оформление поля ввода)
Введены новые атрибуты: placeholder – замещаемый контент в текстовых полях, autofocus, min, max и давно востребованный required (делающий заполнения поля обязательным).
Примеры работы с HTML5-формами смотрите на рис. 1-3.
 |
| Рис 2 input type = color |
 |
| Рис 3 input type = range |
Атрибуты data-*
Это не меньший прорыв, чем DOCTYPE. И столь же непонятный для людей, далеких от разработки. Но мы-то с вами знаем, какие усилия иногда требовались для передачи с тегом дополнительной информации для обработки скриптом.
Есть, конечно, выход в виде реконструкции data JavaScript-фрэймворка jquery, но по сути это не более чем «костыли».
Теперь же у нас есть специальная группа пользовательских атрибутов вида data-*, с помощью которых мы можем добавлять в тег любую дополнительную информацию.
Пример:
<ol> <li data-length="2m11s">Beyond The Sea</li> ... </ol>API в спецификации
В HTML5 включены такие мощные инструменты, как Javascript-API, File System API, Web Audio API. Мощные они пока по большей части потенциально, но перспективы
очень вдохновляют. Что еще? Drag-and-drop, управление историей браузера, api-работы с микроданными.
Мультимедиаэлементы
Про тег <video>, наверное, знают все, как и о копьях, сломанных вокруг форматов представления видеоконтента. Единый свободный формат – это, конечно, важно, но посмотрите, как удобно теперь этот самый контент вставлять в веб-страницу:
<video src=10cc.ogv width=320 height=240 controls autoplay poster=10cc.jpg> </video>
Здесь атрибут controls отвечает за наличие элементов управления отображения видео.
Что же касается форматов кодеков, то вопрос все еще не решен (хотя свет в конце тоннеля вроде виден). Впрочем, HTML5 позволяет использовать кодеки на выбор:
<video width=320 height=240 poster=turkish.jpg> <source src=10сс.ogv type=video/ogg> <source src=10сс.mp4 type=video/mp4> </video>
Canvas
Это, наверное, самое известное новшество языка. Часто вообще происходит некоторая подмена понятий, и, говоря
о HTML5, подразумевают работу именно с canvas.
На самом деле этот элемент (ну, и WebGL, о нем позже) действительно очень эффектен. Для тех, кто еще не в курсе, canvas – это элемент, предназначенный для создания растовых изображений посредством JavaScript. Уже сегодня его поддерживают все наиболее популярные браузеры.
С помощью canvas строятся графики, анимация, разрабатываются браузерные игры. Существует несколько библиотек для создания сложных графических систем (при-мер – LibCanvas, jCanvaScript).
Рассказывать о возможностях сanvas можно долго, и есть большое искушение это сделать, но лучше пусть 'nj бу-
дет отдельная статья. А сейчас просто небольшой пример создания изображения средствами canvas:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Primer - Example: Using canvas</title>
<script type="text/javascript"><!—
window.addEventListener('load', function () {
var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');
context.fillStyle = '#008';
context.shadowOffsetX = 8;
context.shadowOffsetY = 8;
context.shadowBlur = 8;
context.shadowColor = 'blue';
var gr = context.createLinearGradient(150,50,100,100);
gr.addColorStop(0.0,'#008');
gr.addColorStop(1.0,'#0f0');
context.fillStyle = gr;
context.fillRect(150,50,100,100);
context.strokeStyle = '#f00';
context.shadowColor = '#f00'
context.shadowBlur = 4;
context.strokeRect(140,40,120,120);
}, false);
// -->
</script>
</head>
<body>
<p>
<canvas id="myCanvas" width="600" height="400">
Your browser does not have
support for Canvas.
</p>
</body>
</html>
Результат на рис 4.
 |
| Рис 4 Шедевр на canvas |
WebGL
 |
| Рис 5 Аквариум от Google |
WebGL – это развитие идеи сanvas 3D, представляет собой обвязку из JavaScript-скриптов к API OpenGL ES 2.0, реализованную на уровне браузера. Практически это позволяет внедрять аппаратно-ускоренную 3D-графику в вебстраницы без необходимости использовать специальные плагины на любой платформе, поддерживающей OpenGL или OpenGL ES. Фактически с помощью WebGL можно создавать полноценные 3D-миры, вроде изображенного на рис. 5. Правда, не все браузеры полноценно поддерживают возможности стандарта. Впрочем, это вопрос времени.
XMLHttpRequest 2
XMLHttpRequest2, или, точнее, XMLHttpRequest Level 2, – это тот самый, ответственный за AJAX-функционал объект XMLHttpRequest, оснащенный новыми возможностями.
Прежде всего теперь не нужно никаких хаков, чтобы выполнять такие операции, как кроссдоменные запросы, процесс загрузки файлов, загрузка и отправка двоичных данных.
Во-первых, это свойства responseType и response, позволяющие явно указать браузеру формат ожидаемых в результате ответа данных. После установки соответствующего значения responseType свойство XMLHttpRequestю response будет содержать значения в одном из следующих форматов: DOMString, ArrayBuffer, Blob, Document.
Для отправки данных есть обновленный метод send(), который теперь позволяет отправлять данные типов DOMString, Document, FormData, Blob, File, ArrayBuffer.
Проблема кроссдоменного взаимодействия решается в XMLHttpRequest2 с помощью технологии CORS (Cross Origin Resource Sharing). На практике это обозначает добавление к запросу одного заголовка:
Access-Control-Allow-Origin: http://othersite.com
который может быть выдан как одному сайту, так и целому домену.
Еще одно полезное свойство обновленного элемента – возможность работы с данными, поступающими из формы в виде единого объекта – FormData(), инкапсулирующего все элементы формы (да, да, и <input type="file">). Отправка данных при этом выглядит совершенно также:
formData = new FormData(form); XMLHttpRequest.send(formData);
Надо заметить, что разработчики по-видимому находились под сильным впечатлением от возможностей и подхо-
дов библиотеки jquery, но разве это плохо?
К другим возможностям XMLHttpRequest2 относятся отправка файла по частям, а также загрузка и сохранение файла в HTML5 File System.
Более подробно о работе с обновленным элементом XMLHttpRequest вы можете узнать из статьи «Новые возможности XMLHttpRequest2» [4].
Потери: frame, frameset и noframes
Да, да. Разработчикам phpMyAdmin, а также других приложений, интерфейс которых имеет фреймовую структуру, придется переверстывать свои детища. Это не единственная потеря – в прошлое уходят font, big, center, u, acronym. Удалось отстоять (с трудом) b, i. Тег <a> так-же, как это ни странно, был под угрозой, но, слава богу,
оставлен.
Под нож пошли также атрибуты bgcolor, cellspasing, cellpadding, valign и некоторые другие. Конечно, вместо них давно следует использовать CSS.
Вот какие технологии нас ожидают, большая часть из них уже доступна для использования и ждет разработчиков.
К сожалению, за бортом обзора остались Геолокация, HTML MicroData, Web Sockets API, FileAPI, Web Storage, Indexed DB, Web Workers и многое другое. Мы еще обяза-
тельно расскажем об этих инновациях, тем более что почти
каждая из них заслуживает отдельной статьи.
1. HTML5 (including next generation additions still in development) – текущий черновик стандарта.
2. Тест браузеров на количество реализованных возможностей стандарта HTML 5.
3. Отличия HTML 5 от HTML 4.
4. Новые возможности XMLHttpRequest2.
Выпьем Няня, где же кружка!
ОтветитьУдалить