Index
Symbols
“” (quotation marks), mismatched, 4, 6
. (period), in class syntax, 33
{} (curly braces), in JavaScript syntax, 25
Numbers
2D context, 46
3D
context, 46
parallax processing for 3D visuals, 290
A
absolute positioning, of tables, 161
actions, calling JavaScript functions, 23
acute angles, in nature, 276
Adobe Flash. See Flash
alpha (transparency) setting
for rectangle example, 47
in RGBA color model, 44
Android
email and URL fields and, 210–211
geolocation support, 174
angles, geometric
effects in nature that use acute angles, 276
example applying pattern of right triangles, 283–286
example showing selection of angles and other geometric and trigonometric functions, 286–290
in simulation of natural effects, 277–279
animation animated circle example, 80–81
building, 245–247
caveats regarding future of, 249
events and, 84
moving gradients, 82–84
multiple, 247–249
properties used with, 241
API (application programming interface)
W3C Geolocation API Specification, 167
Apple
Flash and, 240
VoiceOver, 186
application programming interface (API), 46
arc method, 53–56
arcs
altering, 57–58
continuous line arcs, 60
drawing, 53–56
<article> tag
in document structure, 190–191
example of use of, 191–193
interactive widgets and, 197
<aside> tag
in document structure, 193
example of use of, 193–196
attributes
changes in HTML5, 11
of HTML tags, 5
input attributes for forms, 206
number and range controls, 211
removed in HTML5, 12
standard attributes of HTML5 elements, 189
video, 109–110
audio
audio events, 121–123
<audio> element, 116–119
controlling with events attached to page items, 124–125
creating user interface for audio object, 212–214
overview of, 116
playing audio without audio player, 119–121
summary, 125
audio events
types of, 121
using, 121–123
audio files, 99
audio players
playing audio without audio player, 119–121
styled with CSS, 116
<audio> element
controlling with events attached to page items, 124–125
CSS applied to, 34–35
in game with editable content, 254–257
overview of, 116–119
autoplay attribute, video, 109
B
background-clip property, 231
background-image property, 230
background-repeat property, 231
backgrounds
multiple, 230–231
overview of, 230
placement of, 231–232
<body> tags, 6–7
border attribute, 11
border-image property, 235–236
border-radius property, 233
borders
creating, 234–235
CSS used for border colors, 67
images as, 235–237
overview of, 233
with rounded corners and shoulders, 233–234
border-shadow property, 233
box in a box, drag-and-drop example, 140–144
box shadows, creating, 234–235
cache, offline application caching multiple pages, 262–263
CACHE MANIFEST, 259
calculus, in visual representation, 276
callback functions, getCurrentPosition method and, 169
<canvas> element
CSS applied to, 35–36
displaying, 43
canvases
altering images by removing path statements, 55–57
continuous line arcs and many circles, 60
drawing arcs and circles, 53–56
drawing lines, 62–67
drawing on, 44–47
gradients on, 47–49
linear gradients, 49–51
loops used to make circles, 59, 61–62
overview of, 42–44
paths, 53
placing text on, 70–71
radial gradients, 51–53
shadow text, 74–77
summary, 74–77
using multiple canvases, 67–70
varying circular shapes, 58–59
vertical text, 71–74
Cascading Style Sheets. See CSS (Cascading Style Sheets)
circles
animated, 80–81
drawing, 53–56
drawing many circles on canvas, 60
loops used to create, 59, 61–62
varying circular shapes, 58–59
cite element, changes in HTML5, 11
classes, CSS, 33–34
clearPosition method, geolocation property, 168
clearTask method, handling storage and, 131–132
click event, 84
code
detecting offline code, 260–262
errors forgiven in HTML5, 7–8
codecs (compression/decompression), video, 98–99
color
gradients. See gradients
models, 44
color picker, adding to form, 207–208
color type, 207–208
comments, adding to web pages, 252
compression/decompression (codecs), video, 98–99
computer-generated art, 85–88
conditional branching, in JavaScript
conditional tests, 24–26
example combining conditional tests and branching, 272–274
if tests, 270–271
overview of, 270
switch tests, 271–272
contactName field, form validation and, 217
content, editable. See editable content
content managers
<article> tag and, 190
layout tags and, 187
context API (cntx)
built into canvas, 46
simple gradient, 49
controls
audio, 119–120
controls attribute
audio players, 119–120
conversion, of video files, 99–104
cookies, 128
coordinate system, linear gradient and, 51
copyright information, in footer, 188
cosines, showing variations in frequency and amplitude of, 279–281
createLinearGradient method, 51
createRadialGradient method, 51, 82–83
CSS (Cascading Style Sheets)
adding styles to shopping cart example, 153–154
applying to HTML5 multimedia tags, 34–36
applying to multiple canvases, 67
classes, 33–34
ID selectors, 31–33
layout using, 186
overview, 26–31
positioning and styling boxes, 142–143
styling audio element with, 116
upgrade from CSS2 to CSS3, 9
CSS3
animations, 244
background placement, 231–232
borders, 233
borders with rounded corners and shoulders, 233–235
building animations, 245–247
caveats regarding future animations, 249
font formats, 228–229
font rules, 228
images as borders, 235–237
modules, 226
multiple animations, 247–249
multiple backgrounds, 230–231
overview of, 226
summary, 249
transformations, 237–240
transitions, 240–244
upgrade from CSS2 to CSS3, 9
using fonts on web sites, 229–230
web fonts, 226–227
curly braces ({}), in JavaScript syntax, 25
CustomValidation function, 221
D
data
forms for collecting, 204
submitting to forms, 221–223
databases, persistent storage and, 128
dataTransfer object, drag-and-drop and, 140
date control, adding to form, 208–210
date type, 208
datetime type, 208
datetime-local type, 208
declarations, CSS selectors, 27
<details> tag, in document structure, 198–202
<div> elements
adding actions to drag-and-drop events, 145–148
attributes and events for drag-and-drop box example, 143–144
identifier attributes for, 31–32
layout using, 186
limitations of, 186–187
online shopping example (Add to Cart), 154–156
positioning and styling with CSS, 142–143
tic-tac-toe example, 159–163
using border-image around, 236–237
W3C definition of, 187
doctype, 4
document structure
<article> tag, 190–191
<aside> tag, 193
<details> and <summary> tags, 198–202
<figure> and <figcaption> tags, 196–198
<footer> tag, 187–190
<header> tag, 187
<hgroup> tag, 202
layout tags, 187–188
limitations of div element and, 186–187
<nav> tag, 193–196
overview of, 186
<section> tag, 191–193
summary, 202
do.while loops, JavaScript, 268, 270
drag function, JavaScript, 143–144, 155
drag-and-drop
adding actions to drag-and-drop events, 145–148
box in a box example, 140–144
online shopping example (Add to Cart), 148–156
overview of, 140
summary, 156–163
tic-tac-toe example, 156–163
draggable attribute, 143
draw() function, 65
drawing, on canvas arcs and circles, 53–56
lines, 62–67
rectangles, 44–47
drawing maps, 178–180
drawing tablet
code listing, 91–94
example of picture drawn on, 94
mouse events, 90–91
overview of, 88–89
drop function, JavaScript, 143–144, 161
E
editable content
editable regions and, 252
example of game using, 254–257
editable regions
creating, 252–254
editable content and, 252
example of game using editable content, 254–257
summary, 263
else if statement, JavaScript, 271
email field, adding to form, 210–211
email type, 210–211
embedded fonts, IE support for, 229–230
EOT (Embedded Open Type) fonts, 228
errors
coding errors forgiven in HTML5, 7–8
geolocation and, 172–174
events
audio events, 121–123
calling JavaScript functions, 23
controlling audio using events attached to page items, 124–125
drag-and-drop, 140
example creating computer-generated art, 85–88
mouse events, 90–91
overview of, 84
using with video, 110–111
external files
incorporating CSS from, 27
JavaScript code in, 26
F
fallback
audio element and, 118
overview of, 99
video element and, 106–107
fieldsets
containers for form fields, 205
form layout and, 217
<figcaption> tag, in document structure, 196–198
<figure> tag, in document structure, 196–198
files
JavaScript code in external files, 26
reformatting/converting video files, 99–104
fills
linear gradient, 51
putting shapes on canvas, 46
simple gradient, 49
Fire Vox, 186
Firefox. See also web browsers
converting to Ogg, 99–100
geolocation privacy issues, 168
geolocation support, 174
watching video on, 105
Flash
as animation tool, 249
font-face property, 227
fonts
declaring san serif, 71
formats, 228–229
rules, 228
using on web sites, 229–230
web fonts, 226–227
font-style property, 227
font-weight property, 227
<footer> tag, in document structure, 187–190
for statements, JavaScript, 26, 266–268
formats
audio, 116
converting/reformatting video, 99–104
font, 228–229
video, 98–99
forms
adding color picker, 207–208
adding date and time controls, 208–210
adding number and range controls, 211–214
adding search capacity, 214
adding telephone number box, 214
basic example, 205–206
comparing editable region with, 257
creating, 204–205
email and URL fields on, 210–211
input attributes, 206
input types, 204
laying out, 215–217
overview of, 204
safety/security of, 214–215
submitting data to, 221–223
summary, 223
validating, 217–220
FQDN (fully qualified domain name), 259
functions, JavaScript calling, 23–24, 70
calling repeatedly, 81
drag function, JavaScript, 143–144, 155
drop function, JavaScript, 143–144, 161
handling storage API tasks, 131–132
overview of, 274–275
passing data to, 275–276
G
Gears service, from Google, 174
geocoding (getting added to maps), 180–181
geolocation
detecting browser support, 174–176
example of location-aware web page, 170–171
finding locations, 168–170
geocoding (getting added to maps), 180–181
handling rejection and errors, 172–174
mapping and, 176–180
methods, 166
overview of, 166
privacy issues, 167–168
summary, 184
tracking movement, 181–184
Geolocation API Specification, W3C (World Wide Web Consortium), 167
geolocation property, navigator object, 168
geometry
acute angles in nature, 276
angles and sine waves in simulation of natural effects, 277–279
example applying pattern of right triangles, 283–286
example showing selection of angles and other geometric and trigonometric functions, 286–290
overview of, 275–276
sine and cosines showing frequency and amplitude, 279–281
varying height and color of sine waves, 281–283
getCurrentPosition method, of geolocation property, 168–170, 181–182
getItem method, localStorage object, 132, 137
gettask method, JavaScript functions for handling storage, 131–132
Global Positioning System (GPS). See also geolocation
detecting devices with GPS sensor, 177
overview of, 166
Gears service from, 174
validation errors and, 7–8
Google Chrome. See also web browsers
<details> tag supported by, 198, 200
geolocation privacy issues and, 167
geolocation support, 174
location-retrieval errors demonstrated in, 172–174
watching video, 105
Google Maps
adding maps to web sites/projects, 176–177
geocoding (getting added to maps), 180–181
map styles, 178
GPS (Global Positioning System). See also geolocation
detecting devices with GPS sensor, 177
overview of, 166
gradients
animated, 82–84
linear, 49–51
overview of, 47–48
radial, 51–53
simple example, 48–49
graphics, arranging images using local storage, 133–137
H
H.264 video format, 98
<head> element, changes in HTML5, 11
<header> tag, in document structure, 187
headings, <hgroup> tag and, 202
height attribute, video controls, 105, 107
<hgroup> tag, in document structure, 202
hidden attribute, element visibility and, 147–148
<hr> element, changes in HTML5, 11
.htaccess files, 107
HTML4, 10–14
Hulu, 98
I
<i> element, changes in HTML5, 11
ID (identifier) selectors, in CSS file
div tag with, 31–32
overview of, 32–33
id attribute
adding to header elements, 188
changes in HTML5, 11
IE (Internet Explorer). See also web browsers
embedded font support, 228–230
geolocation support, 174
video support, 98
if statement, JavaScript, 270–271
images
animating position on screen, 246–247
creating rotating image, 15–16
local storage for arranging, 133–137
using as borders, 235–237
<img> tags, 6
information, persistent storage and, 128
in-line styles, methods for incorporating CSS, 27
input attributes, forms, 206
<input> tag
input options and, 204
values for input types, 205
input types, 204–205
interactive widgets, <article> tag and, 197
internal style sheets, methods for incorporating CSS, 27
Internet Explorer. See IE (Internet Explorer)
IP addresses, determining location via, 166
iPod touch, 240
J
JavaScript
as animation tool, 249
applying to multiple canvases, 67
code in external files, 26
conditional branching, 270
drag-and-drop functions, 143–144
example combining conditional tests and branching, 272–274
for loop, 266–268
functions, 274–275
if tests, 270–271
looping used to make circles, 61–62
loops and conditional tests, 24–26
script placed at end of web page, 22–24
storage API task functions, 131–132
switch tests, 271–272
timing statements for animation, 80
web pages with script sections, 20–21
while loop, 269–270
Joomla
<article> tag and, 190
HTML5 layout tag use by content managers, 187
K
keyframe rules, animations and, 245, 247
key/value relationships, storage handled by, 129, 137
L
<label> tag, form layout and, 215
language attribute, changes in HTML5, 11
latitude
geocoding and, 180
geolocation and, 166
location-aware web page and, 171–172
layout, form, 215–217
layout tags
<article> tag, 190–191
<aside> tag, 193
<details> and <summary> tags, 198–202
example of simple page layout, 189–190
<figure> and <figcaption> tags, 196–198
<footer> tag, 187–190
<header> tag, 187
<hgroup> tag, 202
list of, 188
<nav> tag, 193–196
overview of, 187
<section> tag, 191–193
left property, use of proportional properties in CSS, 36
libraries, JavaScript, 266
linear gradients, 49–51
lines
elaboration of code for drawing, 65–67
methods for drawing, 62–65
selecting width of, 88–89
lineTo method, drawing lines and, 62–63, 65, 91
local storage
arranging images using, 133–137
JavaScript functions handling storage API tasks, 131–132
overview of, 128
retrieving stored data value, 130–131
setting up, 129–130
summary, 138
locations. See geolocation
longitude
geocoding and, 180
geolocation and, 166
location-aware web page and, 171–172
loop attribute, video, 105, 109
loops, JavaScript
creating circles with, 59, 61–62
for loop, 266–268
while loop, 269–270
M
manifest files
detecting offline code, 260–262
offline application caching multiple pages, 262–263
overview of, 257–258
preparing, 258
simple example, 258–259
maps
adding to web sites/projects, 176–178
drawing, 178–180
<figure> tag and, 196
geocoding added to, 180–181
Google styles, 176–178
mathematics
angles and sine waves in simulation of natural effects, 277–279
behind visual entities, 275
effects in nature that use acute angles, 276
example applying pattern of right triangles, 283–286
example showing selection of angles and other geometric and trigonometric functions, 286–290
geometry, trigonometry, and calculus, 275–276
sine and cosines showing frequency and amplitude, 279–281
varying height and color of sine waves, 281–283
max attribute, for validation, 218
maxLength attribute, form validation and, 217–218
media, arranging images using local storage, 133–137
<menu> element, changes in HTML5, 11
metadata
creating maps and, 180
<details> and <summary> tags and, 198
methods
gradients, 51
for incorporating CSS, 27
playing audio, 121
playing video, 111
for working with text, 70–71
Microsoft Narrator, 186
MIME types
adding to Apache server, 258
alternatives ways to specify, 106–107
specifying, 103
min attribute, for validation, 218
mismatched quotation marks, common HTML errors, 4, 6
missing tags, common HTML errors, 4, 7
mobile browsers, email and URL fields and, 210–211
GPS capabilities in, 166
<input> tag and, 204
modules, CSS3
animations, 244–249
backgrounds, 231–232
borders, 233–237
fonts, 226–230
overview of, 226
transformations, 237–240
transitions, 240–244
Mondrian, Piet, 85–86
month type, 208
.mov files, converting to MPEG-4, 103
moveTo method, drawing lines, 62–63, 65
MP3 audio format, 116
MPEG-4
converting .mov file to, 103
popular video formats, 98
watching video, 105–106
multimedia
applying CSS to multimedia tags, 34–36
arranging images using local storage, 133–137
new features in HTML5, 15–16
N
name attribute, changes in HTML5, 11
Narrator (Microsoft), 186
<nav> tag, in document structure, 193–196
navigator object
detecting browser support for geolocation, 175
geolocation and, 168
nested tags, common HTML errors, 4–5
Netflix, 98
number type, 211–214
O
objects color, 207–208
dataTransfer, 140
date and time, 208–210
email type, 210–211
input types, 204–205
navigator, 168
number and range, 211–214
search type, 214
tel type, 214
url type, 210–211
offline application
caching multiple pages, 262–263
example of, 259–260
offline sites
detecting offline code, 260–262
example of offline application, 259–260
manifest files and, 257–259
offline application caching multiple pages, 262–263
overview of, 257
summary, 263
Ogg
converting Firefox to, 99–100, 104
watching video, 105
Ogg (Theora), 98–99
Ogg (Vorbis)
audio formats, 116
interpreting audio part of Ogg format, 118–119
OJOsoft, Total Video Converter, 103
onchange event, arranging images using local storage, 136–137
onclick event, using with video, 111
ondbclick event, using with video, 111
online shopping (Add to Cart), drag-and-drop example, 148–156
onload events, calling JavaScript functions, 24
color object in, 207
date object in, 209
form features supported, 204
range and number controls in, 211
P
<p> tags
CSS treatment of, 27–31
incorrectly nested, 4–5
unclosed tags, 5
padding properties, managing text borders, 27–28
page layout, example using HTML5 tags, 13–14
paragraph tags. See <p> tags
parallax processing
code listing for, 291–293
example of a wagon in three views, 294–295
example using rocks and greenery, 292–294
movement as basis of, 290–291
overview of, 290
three-dimensional visuals and, 266
paths
altering images by removing path statements, 55–57
drawing lines and, 65
as drawing method, 53
pattern attribute, for validation, 214, 218, 220
period (.), in class syntax, 33
persistent storage, 128. See also local storage
pictures, <figure> tag and, 196
play method
audio, 121
video, 111
playback controls, 214
playme function, video, 111
playmusic() function, audio players and, 121
POST method, creating forms, 204
poster attribute, video, 109–110
prefixes, web browsers and, 226
privacy issues, geolocation and, 167–168
pull quotes, uses of <aside> tag, 193, 196
Q
quotation marks (“”), mismatched, 4, 6
R
radial gradients
animated, 82–84
overview of, 51–53
radians, in drawing circles and arcs, 54
range type, 211–214
rectangle, drawing on canvas, 44–47
Red, Green, Blue, Alpha (RGBA) color model, 44
Red, Green, Blue (RGB) color model, 44, 208
reformatting/converting video files, 99–104
regions, editable. See editable regions removeItem method, localStorage object, 132, 137
RGB (Red, Green, Blue) color model, 44, 208
RGBA (Red, Green, Blue, Alpha) color model, 44
right triangles, 283–286
rules, font, 228
S
Safari. See also web browsers
MPEG-4 and, 98
watching video, 105
safety/security, forms and, 214–215
screen readers, <div> element and, 186–187
search type, 214
searches, adding search capacity to forms, 214
<section> tag, in document structure, 191–193
security, forms and, 214–215
selectors
CSS, 27
ID selectors, 31–33
semantic tags
as alternative to <div> tags, 187
<input> tag and, 204
need for, 186
setData property, drag-and-drop and, 144
setInterval method, JavaScript
calling functions repeatedly, 81
calling functions with, 70
setItem method, localStorage object, 132
setTimeout method, JavaScript, 80
shadows
creating box shadows, 234–235
creating shadow text, 74–77
sidebars, uses of <aside> tag, 193
sine waves
showing variations in frequency and amplitude, 279–281
in simulation of natural effects, 277–279
varying height and color of, 281–283
<small> element, changes in HTML5, 11
<span> tags, incorrectly nested, 4–5
spinner, time control as, 208
src attribute, pointing to external file, 26
standards, W3C web standards, 4
stopme function, video, 111
storage, local. See local storage
stored data values, retrieving, 130–131
storepix function, arranging images using local storage, 136–137
storetask method, JavaScript, 131–132
streaming media, codecs (compression/decompression) for, 98
stroke method, drawing lines, 65
strokes
putting shapes on canvas, 46
text, 74
<strong> element, changes in HTML5, 11
<summary> tag, in document structure, 198–202
switch statements, conditional tests using, 25, 271–272
T
tables, absolute positioning of, 161
tags. See also by individual types
common HTML errors, 4–7
new tags in HTML5, 10
tel type, 214
telephone number box, adding to form, 214
tests, conditional, 24–26, 270–274
text
placing on canvas, 70–71
shadow text, 74–77
vertical text, 71–74
text boxes, email and URL fields and, 210–211
text editor, editable content feature as, 252
time control, adding to form, 208–210
time type, 208
timing functions, transitions and, 241
timing statements, animation and, 80
top property, use of proportional properties in CSS, 36
Total Video Converter, from OJOsoft, 103
tracking movement, via geolocation, 181–184
transformations, in CSS3
adding to poster, 239–240
functions and parameters, 238
overview of, 237
transitions, in CSS3
compared with animations, 244
overview of, 240
properties used with, 241
specifying, 242–244
timing functions, 241
transparency (alpha) setting
for rectangle example, 47
in RGBA color model, 44
triangles, example applying pattern of right triangles, 283–286
trigonometry, in visual representation, 276
TTF (True Type Fonts), 227–228
type attribute, changes in HTML5, 11
U
UI (user interface), creating for audio object, 212–214
unclosed tags, 4–7
URL field, adding to form, 210–211
url type, 210–211
user interface (UI), creating for audio object, 212–214
V
validation
CustomValidation function, 221
of e-mail and URL addresses, 211
of forms, 204, 217–220, 222–223
of telephone numbers, 214
validators, coding errors and, 7
vertical text, 71–74
video
attributes, 109–110
controls, 107–108
events and, 110–111
<figure> tag and, 196
formats and codecs, 98–99
overview of, 98
reformatting/converting files, 99–104
summary, 111–112
watching, 104–106
web browsers falling back to find right format, 106–107
<video> element
fallback in, 106–107
identifier for, 110
native in HTML5, 98
watching video, 104–106
Vimeo, 98
visibility, hidden and visible options, 147–148
vision impairments, semantic tags and screen
readers, 186
VoiceOver (Apple), 186
volume controls, 214
W
W3C (World Wide Web Consortium)
Geolocation API Specification, 167
HTML standards, 4
validator, 7
W3Schools, instruction in JavaScript, 26
watchPosition method, geolocation property, 168
watchPosition method, tracking movement and, 182–183
WAV audio format, 116
web browsers
audio formats, 116
canvas support, 42
color type support, 207
CSS compatibility, 226
dealing with differences in page display, 14
<details> tag support, 198, 200
editable region support, 252
email and URL fields and, 210–211
falling back to find right format, 106–107
font compatibility, 228
form support, 204
geolocation privacy issues and, 167–168
geolocation support, 174–176
interpreting audio part of Ogg format, 118–119
overcoming coding errors, 7–8
range and number control support, 211–212
search functionality, 214
video formats and, 98
watching video, 105–106
applying CSS to HTML5
multimedia tags, 34–36
CSS classes, 33–34
CSS overview, 26–31
ID selectors, 31–33
JavaScript and, 20
JavaScript code in external files, 26
loops and conditional tests, 24–26
overview of, 20
script placed at end of web page, 22–24
summary, 37
web pages with script sections, 20–21
web fonts, 226–227. See also fonts
web pages
adding comments to, 252
CSS used for page placement, 67
location-aware, 170–171
page navigation (<nav> tag), 193
script placed at end of, 22–24
with script sections, 20–21
with style setting in head section, 28–29
web sites
site navigation (<nav> tag), 193
using fonts on, 229–230
Web standards, W3C, 4
WebM
converting Firefox to, 103, 104
popular video formats, 98
watching video, 105
web-safe fonts, 226
week type, 208
WEFT (Web Embedded Font Tool), 230
while loop, JavaScript, 269–270
width attribute, video controls, 105, 107
width property, text borders, 27–28
WordPress
<article> tag and, 190
HTML5 layout tag use by content managers, 187
World Wide Web Consortium. See W3C (World Wide Web Consortium)
X
XHTML, 7
Y
Yahoo! 7–8
YouTube, 98