22. Document Object Model (DOM)
• Check if a certain property exists on a global object (such as window
or navigator)
– Example: testing for geolocation support
• Create an element, then check if a certain property exists on that
element
– Example: testing for canvas support
• Create an element, check if a certain method exists on that
element, then call the method and check the value it returns
– Example: testing which video formats are supported
• Create an element, set a property to a certain value, then check if
the property has retained its value (think about forms)
– Example: testing which <input> types are supported
HTML5 – Up and Running: Mark Pilgrim
25. Tags
• <audio> tag defines sound content
• <canvas> tag defines graphics
• <footer> tag defines a footer for a section or
page
• <header> tag defines a header for a section or
page
• <nav> tag defines navigation links
• <time> tag defines a date/time
• <video> tag defines a video
45. Canvas vs. SVG
• Think of the difference between canvas and svg as the
difference betwee Photoshop and Illustrator (One deals
with bitmaps and the other vector art.
• With canvas, since you are drawing in bitmap, you can
smudge, blur, burn, dodge your images easily. But since it's
bitmap you can't easily draw a line and then decide to
reposition the line. You need to delete the old line and then
draw a new line.
• With svg, since you are drawing vectors, you can easily
move, scale, rotate, reposition, flip your drawings. But since
it's vectors you can't easily blur the edges according to line
thickness or seamlessly meld a red circle into a blue square.
You need to simulate blurring by drawing intermediate
polygons between objects.
46. SVG
• SVG stands for Scalable Vector Graphics
• SVG is used to define vector‐based graphics
for the Web
• SVG defines the graphics in XML format
• SVG graphics do NOT lose any quality if they
are zoomed or resized
• Every element and every attribute in SVG files
can be animated
50. File vs. Video Formats
• One of the biggest sources of confusion about
video is not realizing that the file format is
completely different from the video format. So
you're always dealing with two formats, not one.
• Examples of file formats are .mp4, .flv, f4v, .ogv,
or .avi. File formats are often called container
formats because they're containers for the actual
video.
• The video format is the flavor of compression
that's used on the video. This is often called
a codec.
53. OGV
A movie.OGV file is
primarily for Theora and
other even more obscure
formats.
It can't hold MPEG‐4 or
H.264, at least not easily.
To convert videos to the .ogg/.ogv format, install the Firefogg extension into your
Firefox browser.
56. Three Parts to Video
• The file format that holds the video, like .mp4,
.flv, .f4v, .ogv, or .avi
• The video format (aka codec), like H.264,
MPEG‐4, or Theora
• The player that makes it available to your site
visitors, such as the Adobe Flash Plugin, or the
new <video></video> tag.