УДК 004.738.5:004.4HTML5
ББК 32.973.202-018.2
С89
Сухов К.
С89 HTML5 – путеводитель по технологии. – М.: ДМК Пресс,
2014. – 352 с.: ил.
ISBN 978-5-94074-997-4
Книга посвящена знакомству и незамедлительному началу использования
на практике HTML5 – новому стандарту и флагману современных
интернет-технологий. Все новые API (Canvas, Geolocation API,
WebStorage, WebSockets, WebRTC, WebGL IndexedDB и многое, многое
другое) рассмотрены на основе практических примеров, и большую часть
из них можно использовать прямо здесь и сейчас. Книга адресована вебпрограммистам,
веб-верстальщикам, ведущим веб-проектов и вообще всем,
кто имеет отношение к интернет-разработке.
Мы можем относиться к новому стандарту как угодно, это не важно
– важно понимать: HTML5 – это уже не будущее, это настоящее.
И не приняв его, мы рискуем застрять в ХХ веке. Это, может, и не самое
плохое время, но если мы работаем с информационными технологиями –
давайте жить и творить сегодня!
Для хорошего понимания материла желательны знания HTML/
DHTML/JavaScript и общее представление об устройстве Всемирной
сети.
УДК 004.738.5:004.4HTML5
ББК 32.973.202-018.2
Все права защищены. Любая часть этой книги не может быть воспроизведена
в какой бы то ни было форме и какими бы то ни было средствами без
письменного разрешения владельцев авторских прав.
Материал, изложенный в данной книге, многократно проверен. Но, поскольку
вероятность технических ошибок все равно существует, издательство
не может гарантировать абсолютную точность и правильность приводимых
сведений. В связи с этим издательство не несет ответственности за возможные
ошибки, связанные с использованием книги.
© Сухов К., 2014
ISBN 978-5-94074-997-4
© Оформление, ДМК Пресс, 2014
Стр.3
Содержание
Введение .......................................................................................... 7
Будущее www – какое оно? .......................................................... 8
История вопроса ............................................................................. 9
Актуальность стандарта .................................................................. 9
XHTML – стандарт для стандартизаторов ........................................ 9
За пределы разметки – ActiveX, Java, Flash .................................... 12
Рождение HTML5 ........................................................................... 14
RIA .................................................................................................... 16
Microsoft Silverlight ........................................................................ 17
Adobe Flex ..................................................................................... 19
JavaFX ........................................................................................... 21
Google Native Client ........................................................................ 23
RIA и HTML5 .................................................................................. 24
HTML5 сегодня ............................................................................. 25
О браузерах .................................................................................. 26
Проверять возможности, а не версии ............................................ 26
Moz-, webkit- и прочие vender-грабли ........................................... 27
Modernizr – бархатный путь в HTML5 ............................................. 29
HTML – это теги ............................................................................. 35
Структура страницы ...................................................................... 35
Воплощение концепции семантической разметки ........................ 37
Всякие полезности ........................................................................ 42
Атрибуты и аксессуары ................................................................. 46
Атрибуты data-* ............................................................................. 50
Отречемся от старого мира (что выбросили, что изменили) .......... 51
HTML5-формы – о чем мы мечтали ......................................... 55
Новые поля ввода .......................................................................... 55
INPUT... а OUTPUT? ........................................................................ 62
Не только разметка – объект ValidityState и другие ........................ 64
HTML5 Accessibility – всего лишь доступность
(ARIA, WCAG) .................................................................................. 68
WCAG – рекомендации, которые никто не слушал ......................... 68
WAI-ARIA – перманентно временное решение, которое работает .... 71
Проблемы доступности ............................................................ 72
Стр.4
4
Содержание
ARIA-роли ...................................................................................... 73
Абстрактные роли (Abstract Roles) ........................................... 73
Роли – виджеты (Widget Roles) .................................................. 74
Роли структуры документа (Document Structure Roles) ............. 75
Роли разметки (Landmark Roles) ............................................... 76
Состояния и свойства объектов – ARIA-атрибуты .......................... 77
Атрибуты виджетов .................................................................. 77
Атрибуты для Live Region .......................................................... 77
Атрибуты перетаскивания (Drag-and-Drop) .............................. 78
Атрибуты отношений ................................................................ 78
Применение WAI-ARIA ................................................................... 80
Web с нечеловеческим лицом (микроформаты
и микроданные) ............................................................................ 81
Когда тегов не хватает ................................................................... 81
Микроформаты ............................................................................. 82
Технология RDFa ........................................................................... 85
Микроданные ................................................................................ 89
Microdata DOM API ......................................................................... 96
Canvas – холст для рисования на веб-странице ................... 97
Черный ректангл ........................................................................... 97
Использование примитивов .......................................................... 99
Начинаем рисовать ..................................................................... 103
Работа с изображениями ............................................................ 111
За каждый пиксель! ..................................................................... 117
Трансформации .......................................................................... 119
Интерактивность и анимация ...................................................... 122
Свой Paint .............................................................................. 122
Как нам организовать анимацию? .......................................... 124
Play the Game! ............................................................................. 127
Библиотеки для работы с Сanvas ................................................ 130
SVG – векторная графика в www .............................................133
Рисуем тегами ............................................................................ 133
Кривая вывезет ........................................................................... 138
Группируй и властвуй .................................................................. 143
Усложняем жизнь – элементы symbol и image .............................. 145
SMIL – язык анимации SVG .......................................................... 147
Библиотеки для работы с SVG ..................................................... 150
Canvas vs SVG .............................................................................. 151
WebGL – врываемся в третье измерение ............................. 153
Браузеры и драйверы .................................................................. 153
Шейдеры .................................................................................... 159
Наконец-то 3D ............................................................................. 164
Стр.5
Содержание
5
Теперь в движении ...................................................................... 166
Объем ......................................................................................... 168
Текстура и освещение ................................................................. 171
Инструментарий для работы с WebGL ......................................... 179
Храним данные на клиенте –
WebStorage/WebSQL/WebNoSQL ............................................ 184
WebStorage – хранилище «ключ/значение» в браузере ................ 184
WebSQL – реляционная база данных на веб-странице ................. 185
IndexedDB – NoSQL в вебе ........................................................... 187
AppCache – управляем кэшированием вплоть
до полного offline! ...................................................................... 193
File, FileSystem и полный drag’n’drop .................................... 196
File API – Ура! Свершилось! ......................................................... 196
FileSystem API .............................................................................. 200
Все это drag’n’drop! ..................................................................... 205
Сервер, я здесь ........................................................................... 215
Server-Sent Events – сервер тебя не оставит ................................ 216
Web Messaging – легальный XSS .................................................. 219
XMLHttpRequest 2 ........................................................................ 223
Звуки audio ................................................................................... 227
MediaElement – медиаплеер на HTML .......................................... 229
WebAudioAPI ................................................................................ 234
Video............................................................................................... 240
WebRTC – коммуникации через веб-страницу .................... 243
Geolocation API. Непростой вопрос собственного
местонахождения ....................................................................... 250
Где это я? .................................................................................... 250
Позиционируем с помощью Google Maps .................................... 252
Откуда? ....................................................................................... 253
Вглубь Geolocaton API .................................................................. 254
WebWorkers – судьба сетевого пролетариата .................... 257
Параллельные вычисления
на веб-странице ......................................................................... 257
Sharedworker’ы – надо делиться ................................................. 263
WebSockets – забудем про HTTP? .......................................... 267
Web Sockets – TCP для веба ......................................................... 267
WebSocket-серверы .................................................................... 269
Работаем с phpDaemon ............................................................... 270
Стр.6
6
Содержание
Web Intents – средство общения приложений .................... 278
Web Speech API – счастье, когда тебя понимают
(распознавание речи на веб-странице) ................................ 282
Поговорим с веб-интерфейсом ................................................... 282
Ничего не получается! Ошибки .................................................... 288
Родная речь ................................................................................ 290
А поговорить? SpeechSynthesis ................................................... 291
MathML – история с математикой .......................................... 294
Введение в MathML ..................................................................... 294
Presentation MathML – разметка представления .......................... 298
Content MathML – «содержательная» разметка ............................ 305
А теперь все вместе! (Cмешанная разметка) ............................... 309
Прочие полезные вещи ............................................................. 312
События колесика мыши ............................................................. 312
Full-Screen API ............................................................................. 313
Состояние onLine ........................................................................ 314
Page VisibilityAPI .......................................................................... 314
History Api .................................................................................... 315
RequestAnimationFrame – решение проблем
JavaScript-анимации ................................................................... 317
Prerendering – отрисовываем страницы заранее ......................... 318
Selectors API – простой синтаксис доступа к DOM-элементам .... 319
Расширения DOM ....................................................................... 320
Web Notifications API – настоящие pop-up’ы ................................. 320
Mouse Lock/Pointer Lock API ........................................................ 323
Vibration API есть? А если найду?
HTML5 для мобильных устройств ........................................... 325
Battery Status – API, продиктованный жизнью .............................. 325
А как насчет ориентации? Device Orientation API .......................... 327
Ориентация экрана – объект Screen и его Orientation API ............. 332
«I'm pickin' up good vibrations» – Vibration API ................................ 334
Теплый ламповый API – Ambient Light Events ................................ 334
Proximity Events – они уже рядом ................................................. 335
Network Information API ................................................................ 336
Mozilla WebAPI – будущее наступило? .................................. 338
Приложение 1. Ресурсы для работы
с HTML5-технологиями ............................................................. 342
Приложение 2. Спецификации W3C, имеющие
отношение к HTML5-технологиям .......................................... 343
Предметный указатель ............................................................. 345
Стр.7