Index
Numbers & Symbols
3D graphics, 314
3D shaders, 315
A
Accessible Rich Internet Applications (ARIA), 5
addColorStop function, 41
addElement, 225
addEventListener() method, 21
addToPoint function, 57
Almost Standards mode, 9
animation, canvas, 37, 58, 59, 60, 61
Apple Safari, 21
arc function, 38
arcTo function, 38
Asyncore, 169
audio
Audio API, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 104, 105, 106
controls, 90
streaming, 85
unsupported, 85
audio APIs, 316
audio element
background noise in a page, 103, 104
browser support for, 86, 87, 88
declaring, 89
understanding, 89, 90, 91, 92, 93, 94
autobuffer attribute, 93
autocomplete attribute, 201
autoplay attribute, 92, 93, 104
bezierCurveTo function, 38
Broadcast.html, 182
Browser database storage
browser support
for HTML5, 313
for WebSocket API, 176
Browser support
for cookies, 263
for HTML5, 313
for Web SQL Database, 286, 290
for Web Storage, 264
C
canPlayType() function, 92
Canvas API, 23
about, 24
accessibility issues, 26
adding a canvas to a page, 27, 28, 29
animations, 37
applying transformations to drawings, 30, 32
building application with, 55, 56, 57, 58, 60, 61
canvas security, 54
concept of, 23
creating diagonal line on, 28, 29
CSS, 26
drawing operations supported by, 24
history of, 23
ID attribute, 27
paths, working with, 32, 33, 34
scaling canvas objects, 44, 45, 46
using transformations, 46, 47, 48
vs. SVG, 23
when not to use, 25
working with pixel adata, 52, 53, 54
canvas element, 314
adding, 96
updating content, 98
Canvas image data, 254
Carakan engine, 21
Cell phone geolocation data, 110
Chakra engine, 21
Chapter 1, Overview of HTML5, 22
Character set, 8
checkValidity function, 207
Chrome
Storage panel, 273
clear() function, 271
clearWatch() function, 120
clipping features, 37
closePath function, 33
Comet applications, 160
Communication API
MessageEvent interface and, 140
postMessage API. See postMessage API
XMLHttpRequest Level 2. See XMLHttpRequest Level 2
context.createImageData function, 53
context.getImageData function, 52, 53
context.putImageData function, 53
context.rotate(angle) function, 46
context.scale function, 45
control functions, 92
control points, 38
controls attribute, 90, 91, 93
createImageData function, 53
Cross Document Messaging, 135, 136, 137, 138, 140, 141, 142, 143, 144, 145, 146
browser support for, 139
using postMessage API, 139, 140, See also postMessage API
Cross Origin Resource Sharing (CORS), 147, 148
Cross-origin communication. See XMLHttpRequest Level 2, postMessage API
cross-origin resource sharing, 86
cross-origin XMLHttpRequests, 147, 149
cross-site scripting error, 138
Cross-window communication, 292, 293
currentSrc attribute, 93
currentTime attribute, 93, 100
custom validity errors, 206
customError constraint, 206
customError validation constraint, 213
D
dashboard widgets, 23
Data
sharing across windows, 292, 293
data property, 136
Data storage. See Web Storage API, 275
Database storage
future of browser, 286, 287, 288, 291
datalis%) element, 211
datalist element, 202
dataReturned function, 185
dataReturned() function, 186, 281
Device element, 316
Devices, 316
diagonal line on a canvas, 28, 29
diagonal lines using translation, 30, 31, 32
Disk space quota, 271
dispatchEvent() method, 21
displayLocation() routine, 279
distance function, 277
distance() utility method, 279
document.getElementById(), 278
drawPoint function, 57
dropEffect, 225
duration attribute, 93
E
EchoHandler, 170
ECMAScript 5 standard, 20
ECMAScript engine, 21
effectAllowed, 225
Embedded content type, 9
enableHighAccuracy attribute, 118
ended attribute, 93
error attribute, 93
Error messages
user-friendly, 184
Event building process, 221
Event capture process, 221
Event handlers
for gestures, 318
to display content of storage event, 273
event handlers for invalid events, 208, 209, 212
Event listeners
adding, to WebSocket, 178
evt.preventDefault(), 208
executeSql(), 288
executeSQL(), 288
External input, 138
F
File racerBroadcast.html, 282, 283, 284
fillRect convenience function, 36, 37
fillText function, 48
Flash video, 88
Flow content type, 9
form controls, 193
form%) element, 193
autocomplete attribute, 201
datalist element, 202
form validation
turning off, 209
validation feedback, 207, 208, 209
validation fields and functions, 207
list attribute, 202
max attribute, 203
min attribute, 203
placeholder attribute, 200
required attribute, 203
spellcheck attribute, 202
step attribute, 203
valueAsNumber function, 203
framebusting, 157
frameHeight variable, 97
frameWidth variable, 97
full-screen video, 86
functional forms, 194
G
Geolocation API, 107
browser support for, 111
building application with, 120, 121, 122
processing geolocation data, 123, 124, 125, 126
writing HTML display, 122, 123
checking for browser support, 114
location information, 107
cell phone data, 110
GPS data, 109
IP address-based, 109
latitude and longitude coordinates, 107, 108
user-defined data, 111
location tracker application and, 185, 186
position requests, 115
privacy, 112
dealing with location information, 114
privacy protection mechanism, 113
request attributes, optional, 118, 119
uses of, 107
Wi-Fi–based geolocation data, 110
Gestures, 318
getColor function, 57
getContext function, 31
getContext() function, 314
getCurrentPosition() function, 131
getElementById() function, 17
getElementsByName() function, 17
getElementsByTagName() function, 17
getImageData function, 52, 53, 54
getItem(key) function, 270
GL Shading Language (GLSL), 315
glass pane, 58
Google Chrome, 21
GPS geolocation data, 109
H
handleLocationError() function, 117
handleLocationError() Function, 117
Heading content type, 10
heads-up displays (HUDs), 314
height attribute, 95
Hickson, Ian, 161
HTML5, 1
3D shaders, 315
formal specification, 19
JavaScript methods, 17
JavaScript Methods, 17
QuerySelector methods, 17
audio data API, 316
browser support for, 313
candidate recommendation date, 2
design principles
compatibility and paving, cow paths, 3
interoperability simplification, 4, 5
presentation and content separation, 4
security, 4
universal Access, 5
utility and the priority of constituencies, 3, 4
device elements, 316
DOCTYPE and character set, 8, 9
DOM Level 3, 21
future of begin, 313
future of end, 321
gesture events, 318
HTML definition, 313
JavaScript logging and debugging, 19, 20
location-aware applications and WebSockets, 22
organizations, 3
orientation event, 317
overview end, 22
peer-to-peer networking, 320
plugin–free paradigm
APIs, 7
applications, 7
features, 6
Microsoft Paint, user interface, 7
Modernizr—a JavaScript library, 7
native functionality, 6
problems, 5
specification, 6
semantic markup, 16
CSS3 features, HTML5 page, 12, 13, 15, 16
HTML5 page, CSS styles, 11
Internet Explorer, 16
sectioning content type, 10
three dimensions, 314
touch events, 319
touchscreen device events, 317
video, 320
Web browser JavaScript engines, 21, 22
WebGL, 314
window.JSON, 20
HTML5 drag-and-drop, 217
clean up process, 233
data retrieval, 220
data transfer, 219
demo, styles for, 227
dispaly customization, 239, 240
drag source, 218
draggable member names and ages, 226, 227
dragleave and dragenter, 231
dragover Handler, 231
dragstart handler, 230
drop list target, 227
drop target, 218
drag, 223
drag participation, 224
dragend fire, 223
dragenter, 223
dragleave, 223
dragover, 223
dragstart, 222
drop, 223
transfer and control, 224, 225
event handler registration, 228
events, 221
feedback, 219
file handling, 235
dataTransfer object, 235
dragover and dragleave handler, 238
file drop demo, 237
file drop drag, 237
fileDrag.html, 236
items, 235
W3C file API, 235
negotiation, data flavors, 220, 221
notification, 229
propagation and prevention, 221, 222
racers sorted, 226
successful interaction, 219
variable declaration, 228
web, 218
Web, 217
HTML5 Forms
building application, 214
building application with, 209, 210, 211, 212, 213
functional behavior, 194
new attributes and functions, 200, 201, 202, 203, 204
new elements in, 195, 196, 197, 198, 199
overview, 193, 194, 195, 196, 197, 198
vs. XForms, 194
HTML5 offline web applications, 295
about:cache page, Firefox, 296
application cache API
.appcache extension, 299
browser support, 297
cache manifest file contents, 298
client and server configuration, 303
common events, 301
Content-type: text/cache-manifest, 299
FALLBACK entries, 300
manifest attribute, html element, 298
mime.types, 299
navigator.onLine property, 298
NETWORK specification, 300
process, manifest file, 301, 302
SimpleHTTPServer module, 299
six Cache States, 300
update() method, 301
window.applicationCache object, 300
window.applicationCache.status, 300
window.navigator object, 298
application cache entries, 297
application caching, 295
application resources, 306
applicationCache support, 309
browser support, 297
browser-only devices, 295
cache manifest file, 296
geolocation API, 303
geolocation tracking code, 310
HTML structure and CSS, UI, 306
intermittent connectivity, 295
offline event handling, 311
offline JavaScript, 307, 308, 309
offline storage, 296
Python –m SimpleHTTPServer 9999
chrome developer tools, 304, 305
text/cache-manifest content type, 305
storage code, 310
universal connectivity, 295
update button handler, 309
HTML5 Web SQL Database
HTTP request header, 165
HTTP request headers, 160
HTTP response header, 165
HTTP response headers, 160
HTTP/1.1 101 WebSocket Protocol Handshake, 168
ID attribute, 27
iframes, 136
communication between, 137
communication between HTML page and, 136
I
image data, 254
imageData objects, 255
imageData.data, 255
images inserting into a canvas, 39, 40
images processing, 254
Indexed Database, 287
Indexed databases, 286
Inkscape, 81
Interaction handling, 317
Interactive content type, 10
Internet Engineering Task Force (IETF), 3
IP address-based geolocation data, 109
IP geolocation, 303
J
JägerMonkey engine, 21
JavaScript engine, 21
JavaScript Object Notation (JSON)
JSON.parse() function, 291
Just-in-time (JIT) compilation engine, 21
K
Kaazing WebSocket Gateway, 168
key attribute, 272
key(index) function, 270
L
length attribute, 270
lineCap property, 35
lineTo(x, y) function, 32
load() function, 92
loadData() function, 291
loadDemo function, 56, 58, 176, 185
loadDemo() function, 123, 125, 126, 281
Long-polling, 160
M
max attribute, 203
maximumAge attribute, 118
maxLength constraint, 212
media elements. See video element, See audio element
media streaming, 85
Message processor function, 278
MessageEvent interface, 140
messageHandler function, 246
Metadata content type, 10
Microsoft Internet Explorer, 21
mime.types file, 299
min attribute, 203
mod_pywebsocket, 168
modifications, 30
mouseover video playback, 105, 106
moveTo function, 29
moveTo(x, y) function, 32
Mozilla
audio data API, 317
Mozilla Firefox, 21
Multipurpose Internet Mail Exchange (MIME), 219, 220
muted attribute, 93
N
Nitro engine, 21
noValidate attribute, 209
O
ocket.onmessage callback, 281
oldValue attribute, 272
onchange handler, 197
One-shot position requests, 115, 116, 117, 119
onload handler, 40
onmessage handler, 185
onmessage method, 163
onopen handler, 185
ontouchcancel event handler, 319
ontouchend event handler, 319
ontouchmove event handler, 319
ontouchstart event handler, 319
openDatabase() function, 287
OpenGL ES 2, 315
OpenGL shaders, 315
Opera
Storage panel, 274
Opera browser, 21
Origin header, 147
origin property, 136
origin security, 138
origin-clean canvas, 54
origins
comparing against white list, 140
serialization of, 138
P
Page load routine, 279
parse() function, 20
path routines, 46
paths, working with, 32, 33, 34
patternMismatch constraint, 205
pause() function, 92
paused attribute, 93
Peer-to-peer (P2P) networking, 320
Phrasing content type, 10
placeholder attribute, 200
plugins, 87
Polling, 160
Position information utility function, 277
poster attribute, 95
postMessage API, 135, 244, 255
browser support, 139
building application using, 139, 140, 141, 142
application in action, 146
portal page, 142
cross-site scripting attacks, 137
event listener for message events, 136
iframes, 137
origin security, 138
receiving messages, 140
secuity rules, 138
sending messages, 139
preventDefault(), 213
Priority of Constituencies, 3, 4
progress element, 198
putImageData function, 53
Python WebSocket echo server, 168
Q
quadraticCurveTo function, 38
Quake II, 314
Quake II game, 315
querySelector() function, 17
querySelectorAll() function, 17
Quirks mode, 9
QUOTA_EXCEEDED_ERR error, 270, 271
R
radial gradient, 42
range control, 197
range elements, 197
range input type, 197
rangeOverflow constraint, 206
rangeUnderflow constraint, 206
read-only media attributes, 93
readyState attribute, 150
readyState property, 150
readystatechange event, 149, 150
Real-time web
removeItem(key) function, 271
Repeated position requests, 119, 120
requestAnimationFrame function, 61
required attribute, 203, 205, 211
reset function, 56
reusable code, 30
S
Safari
Storage panel, 274
saveData() function, 292
Scalable vector graphics (SVG), 63
2D graphics creation, 66
addition, page, 67
closeup images, 66
content definition, 69
elements transformation, 68, 69
elements, ChromeWeb Inspector, 64, 65
Happy Trails!, 64
history, 63
interactive application, 74
AddTree function, 75
removeTree function, 76
trails-dynamic.html code, 77, 78, 79
markup document, 64
patterns and gradients, 70
text selection, 72
tools, 80
Scalable Vector Graphics (SVG), 23
scale function, 45
scaling canvas objects, 44, 45, 46
scriptable media attributes, 93
Sectioning content type, 10
security, canvas, 54
send method, 163
sendMyLocation() function, 186
server validation, 204
sessionStorage object, 264, 266, 267, 268, 269, 279, 280
setDragImage, 225
setItem(key, value) function, 270
shadowBlur property, 50
shadowColor property, 50
shadowOffsetX property, 50
shadowOffsetY property, 50
shape routines, 46
SimpleHTTPServer module, 299
slow-script warnings, 241
socket.onmessage handler, 187
socket.onopen callback, 281
spellcheck attribute, 202
split() routine, 278
split() utility, 187
SquirrelFish Extreme engine, 21
Standards (or no-quirks) mode, 9
startTime attribute, 93
step attribute, 203
stepMismatch constraint, 206
stopPropagation(), 213
stopTimeline function, 101
Storage interface, 269
storage.key(), 280
storageArea, 272
StorageEvent interface, 272
StorageEvent object, 272
storageLog.html page, 292, 293
Streaming, 160
stringify() function, 20
strokeStyle property, 43
strokeText function, 48
structured data, 156
successCallback function, 115
T
Tamarin technology, 21
TCPConnection, 161
Theora video codec, 85
timeout attribute, 118
toggleSound() function, 95
tooLong constraint, 206
Touch API, 319
Touchscreen device events, 317
transaction.executeSql() function, 288
translate method, 31
Tree Canopy, 71
two-dimensional context, 28
typeMismatch constraint, 205, 211
U
update() method, 301
updateInterval variable, 97
updateLocation function, 186
updateLocation() function, 116, 117
User-defined geolocation data, 111
V
V8 engine, 21
validationMessage attribute, 207
ValidityState object, 204, 205, 213
valueAsNumber function, 203
valueMissing constraint, 205
Vector Markup Language (VML), 23
video
attributes, 95
Flash, 88
full-screen, 86
streaming, 85
unsupported, 85
Video API, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 104, 105, 106
video element
adding, 96
adding variables, 97
browser support for, 86, 87, 88
creating video timeline browser, 95, 96, 97, 98, 99, 100, 101
declaring, 89
mouseover video playback, 105, 106
startVideo function, adding, 98, 99
stopTimeline function, adding, 101
timeline code, 101
understanding, 89, 90, 91, 92, 93, 94
updateFrame function, adding, 97, 98
using input, handling, 99, 100
working with, 95, 96, 97, 98, 99, 100, 101
videoHeight attribute, 95
videoWidth attribute, 95
volume attribute, 93
Vorbis audio codec, 85
W
watchPosition() function, 120, 121, 131
Web 2.0, 1
Web Accessibility Initiative (WAI), 5
Web Hypertext Application Technology Working Group (WHATWG), 3
Web Hypertext Application Working Group (WHATWG), 1
Web SQL Database, 286, 287, 288, 289, 291
Web Storage API, 263
applicatio
plugging data leaks, 268
application
checking for browser support, 264, 265, 280
communicating updates, 272, 273
local vs. session storage, 269
plugging data leaks, 267
setting and retrieving values, 266, 267
attributes and functions, 269, 270, 271
benefits of, 285
browser treatment of, 273, 275
building application with begin, 275
building application with end, 286
cross-window communication, 292, 293
database. See Browser database storage
Web Video Text Tracks (WebVTT), 88, 89
browser support for, 242
building application with, 250, 251
application in action, 256, 257
coding blur.html application page, 253
coding blur.js helper script, 252
coding blurWorker.js Web Worker script, 254
communicating with Web Workers, 254, 255
checking for browser support, 242, 243
coding JavaScript file, 246
communicating with web workers, 244, 245
creating Web Workers, 243
inline workers, 243
shared workers, 243
handling errors, 246
loading and executing JavaScript, 244
stopping Web Workers, 247
timers, 248
within Web Workers, 247
WebSocket, 281
Websocket API
definition, webSocket, 161
real-time and HTTP
complexity applications, 160
long-polling, 160
polling, 160
request and response headers, 160
streaming, 160
web server, 159
transport protocol, 161
applications
adding event listeners, 178
sending messages, 179, 180, 182
browser support for, 176
building application
adding Geolocation code, 185
adding WebSocket code, 185
tracker HTML code, 188, 189, 190
building application
adding Geolocation code, 186
framing
broadcast server, 170
broadcast.py code, 175
components, 169
EchoHandler, 170
masking, 169
server communication, 176
websocket.py, 170, 171, 172, 173, 174, 175
WebSocketConnection, 170
interface, 163
network traffic and latency
half-duplex polling solution, 166, 167
HTTP response header, 165
network overhead, 165
reduction, 166
vs. polling solution, 166
XMLHTTPRequest, 164
using
creating WebSocket object and connecting to WebSocket server, 177
using begin, 176
WebSocket interface, 163
WebSocket server implementations, 168
WebSocketConnection, 170
WebSocketConnection instance, 169
width attribute, 95
Wi-Fi geolocation data, 110
willValidate attribute, 207
window object, 269
window.openDatabase() function, 287
window.orientation property, 317
window.WebSocket command, 176
World Wide Web Consortium (W3C), 1, 3
X, Y
XForms, 194
XMLHttpRequest Level 2
application in action, 156
browser support, 150
client-side vs. server-side aggregation, 148
code for application, 154
cross-origin communication, 147, 149
using, 150
binary data, 152
building application, 152, 153, 154
making cross-origin requests, 151
progress events, 151
Z
Z-order, 47