Книга посвящена знакомству и незамедлительному началу использования на практике HTML5 – новому стандарту и флагману современных интернет-технологий. Все новые API (Canvas, Geolocation API, WebStorage, WebSockets, WebRTC, WebGL IndexedDB и многое, многое другое) рассмотрены на основе практических примеров, и большую часть
из них можно использовать прямо здесь и сейчас. Книга адресована веб-программистам, веб-верстальщикам, ведущим веб-проектов и вообще всем, кто имеет отношение к интернет-разработке.
Мы можем относиться к новому стандарту как угодно, это не важно – важно понимать: HTML5 – это уже не будущее, это настоящее.
И не приняв его, мы рискуем застрять в ХХ веке. Это, может, и не самое плохое время, но если мы работаем с информационными технологиями – давайте жить и творить сегодня!
Для хорошего понимания материла желательны знания HTML/DHTML/JavaScript и общее представление об устройстве Всемирной сети.
Введение 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
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
Теперь в движении 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
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