HTML 5

  • DOCTYPE declaration (not needed for XHTML)
<!DOCTYPE html>
  • The XHTML variant of this is XHTML 5
  • As of 2009, the standard has not been officially defined.
  • SVG and MathML elements can be used

Features

  • Web Forms 2.0
  • Canvas
  • Audio
  • Video
  • Geolocation
  • Web workers
  • Offline storage

Web Forms 2.0

Summary

  • Basic type and validity checking
  • Allowable behavior for some form elements
  • Additional input types
  • Extensions to submit buttons
  • Error handling for unexpected elements and values
  • Event model for form elements
  • Updated form submission specification

Additional input types

  • datetime, datetime-local, date, month, week, time, number, range, email, url, search, color
  • For most of these input types, min, max and step attributes can be used.
datetime
  • UTC time zone
  • YYYY-MM-DDTHH:MM[:SS[.SS]]Z
  • 1995-01-02T12:34:56.78Z
  • step attribute is in seconds (default: 60)
datetime-local
  • No time zone info
  • YYYY-MM-DDTHH:MM[:SS[.SS]]
  • 1995-01-02T12:34:56.78
  • step attribute is in seconds (default: 60)
date
  • YYYY-MM-DD
  • 1995-01-02
  • step attribute is in days (default: 1)
month
  • YYYY-MM
  • 1995-01
  • step attribute is in months (default: 1)
week
  • YYYY-WNN
  • 1995-W32
  • step attribute is in weeks (default: 1)
time
  • No time zone info
  • HH:MM[:SS[.SS]]
  • 12:34:56.78
  • step attribute is in seconds (default: 60)
number
  • The submission format is [-NN].NN[e[-]NN]
  • step attribute defaults to 1
range
  • step attribute defaults to 1
  • min defaults to 0
  • max defaults to 100

Canvas

  • Created by Apple
  • Standardized by WHATWG (Apple, Mozilla, Opera)
  • Not yet standardized by W3C
  • Grid coordinates are similar to screen coordinates (the top-left corner is 0, 0)
  • Supported: FF, Safari, Chrome, Opera
  • Not supported: IE8
<canvas id="myCanvas" width="150" height="150"></canvas>
...
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    ...
}

Limitations

Contexts
  • The only context defined in the early specification is '2d'
  • Later specifications may also have a '3d' context
Gradients
  • Gradients using more than 2 color points are not supported (i.e. a rectangle or triangle with a different color point at each corner)
  • Only simple gradients are possible
  • Transparency and composites blend color in a different way than gradients and as such are not useful for faking complex gradients

Hacks

3D textures
  • 3D texture mapping can be approximated in a 2D canvas by breaking up the surface into small triangles and drawing and clipping each triangle separately
  • The end result is as if all of the pixels for each individual triangle are at the same distance

Animation

setInterval(myDrawFunction, 500);   // Update the canvas every 500 milliseconds
setTimeout(myDrawFunction, 500);    // Update the canvas one time after 500 milliseconds
var img = new Image();
function init(){
    img.src = 'images/icon.png';
    setInterval(draw, 100);
}
function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.drawImage(img, 50, 50, 100, 100);
    ...
}

Basic functions

beginPath()
...
closePath()

fill()         // For a filled shape
stroke()       // For an outlined shape

save()         // Push the canvas state to the stack
...
restore()      // Pop the canvas state
Values saved in the canvas state
  • Properties: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation
  • Transformations: translate, rotate, scale
  • Clipping path

Rectangles

fillRect(x, y, width, height)     // Filled rectangle
strokeRect(x, y, width, height)   // Rectangular outline
clearRect(x, y, width, height)    // Clear the area and make it transparent

rect(x, y, width, height)         // Adds a rectangular path to the path list

Polygons

moveTo(x, y)
lineTo(x, y)   // Adds a path to the path list

Curves

arc(x, y, radius, startAngle, endAngle, anticlockwise)   // Adds a curved path to the path list

quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Images

drawImage(image, x, y)
drawImage(image, x, y, width, height)   // Scaled image
drawImage(image, srcx, srcy, srcWidth, srcHeight, destx, desty, destWidth, destHeight)    // Clipped, scaled image
Creating an image from scratch
var img = new Image();
img.src = 'myImage.png';

Color

fillStyle = color
strokeStyle = color
Sample values
"orange"
"#FFA500"
"rgb(255, 165, 128)"
"rgba(255, 165, 128, 1)"
"hsl(50%, 50%, 50%)"

Transparency

globalAlpha = transparencyValue
Values
0.0  : fully transparent
1.0  : fully opaque (default)

Line styles

lineWidth = value
lineCap = type          // 'butt', 'round', 'square'
lineJoin = type         // 'round' (rounded edges), 'bevel' (flattened edges), 'miter' (sharp edges)
miterLimit = value      // How far the ends of joined lines can be extended for a sharp edge

Gradients

createLinearGradient(x1, y1, x2, y2)
createRadialGradient(x1, y1, r1, x2, y2, r2)

addColorStop(position, color)    // Position: 0.0 - 1.0
var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
lingrad.addColorStop(0, '#00ABEB');
lingrad.addColorStop(1, '#fff');

ctx.fillStyle = lingrad;
ctx.fillRect(10, 10, 130, 130);

Patterns

createPattern(image, type)   // Type: 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'
var ptrn = ctx.createPattern(img, 'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, 150, 150);

Shadows

shadowOffsetX = float    // Default: 0
shadowOffsetY = float    // Default: 0
shadowBlur = float       // Default: 0
shadowColor = color      // Default: fully-transparent black

Font

font = type
ctx.font = "20px Times New Roman";
ctx.fillStyle = "Black";
ctx.fillText("Hello", 5, 30);

Transformations

translate(xby, yby)   // Move the canvas origin to a different point on the grid
rotate(angle)         // Rotate the canvas around the current origin
scale(xby, yby)       // Scale the units in the canvas grid (the scaling is centered on the current origin)
transform(m11, m12, m21, m22, dx, dy)      // Multiply the current transformation matrix with the specified values
setTransform(m11, m12, m21, m22, dx, dy)   // Set the transformation matrix to the specified values

    m11   m21    dx
    m12   m22    dy
      0     0     1

Compositing

globalCompositeOperation = type
Compositing values
source-over        The new shape is drawn on top of the canvas content (default)
destination-over   The new shape is drawn below the canvas content

source-in          The new shape is clipped to the canvas content; everthing else is made transparent
destination-in     The canvas content is kept where it overlaps with the new shape; everything else is made transparent

source-out         The new shape is only drawn outside of the canvas content
destination-out    The canvas content is kept where it doesn't overlap the new shape

source-atop        The new shape is clipped to the canvas content
destination-atop   The canvas content is clipped to the new shape

lighter            Adds the color values for overlapping areas
darker             Subtracts the color values for overlapping areas

xor                Shapes are transparent where both overlap
copy               Draws the new shape and removes everything else

Clipping paths

clip()    // Use the current path list as a clipping shape for the canvas

Supporting IE

  • There are independent efforts to support it in IE using VML and JavaScript (without requiring a plug-in)
  • ExplorerCanvas: Created by Google
  • XForms processor plugin: Provides support for the canvas element; created by Novell

Web workers

  • Similar to threads
  • Spawn background workers that run scripts in parallel to the main page
  • Uses message-passing to coordinate the threads

Offline storage

  • Local database and application cache
  • Based on SQLite
  • This may have been changed to a standalone specification outside of HTML 5

HTML DOM

  • getElementsByClassName()
  • getSelection()
  • activeElement
  • hasElement
  • designMode
  • execCommand()

Forms

  • New form controls: dates and times, email, url, search, color
  • The form attribute (input, output, select, textarea, button, fieldset) allows controls to be associated with a form, without having to nest them within the form
  • Empty form tags can be nested within the head tag
  • The action, enctype, method, novalidate, and target attributes on input and button elements have been renamed to formaction, formenctype, formmethod, formnovalidate, and formtarget, respectively.

Tags

Added

  • header
  • footer
  • section
  • article
  • aside
  • nav
  • canvas
  • audio
  • video
  • progress
  • meter
  • time
  • datagrid
  • datalist
  • details
  • dialog
  • figure
  • mark
  • command
  • output
  • keygen
  • bb
  • embed

Dropped

  • basefont
  • big
  • center
  • font
  • s
  • strike
  • tt
  • u
  • frame
  • frameset
  • noframes
  • acronym (use abbr)
  • applet (use object)
  • isindex (use form controls)
  • dir (use ul)

Attributes

Global attributes available for every tag

  • id
  • tabindex
  • hidden

Added

  • async (script)
  • charset (meta)
  • draggable
  • contenteditable
  • ping (a, area)

Dropped

  • language (script)
  • target (link)
  • name (img, a) (use id)
  • shape and coords (a)
  • version (html)
  • scheme (meta)
  • accesskey (a, area, button, input, label, legend and textarea)
  • rev and charset (link, a)
  • longdesc (img, iframe)
  • nohref (area)
  • profile (head)
  • archive, classid, codebase, codetype, declare and standby (object)
  • valuetype and type (param)
  • summary (table)
  • axis and abbr (td, th)
  • scope (td)
  • align (caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr)
  • alink, link, text and vlink (body)
  • background (body)
  • bgcolor (table, tr, td, th and body)
  • border (table, img, object)
  • cellpadding and cellspacing (table)
  • char and charoff (col, colgroup, tbody, td, tfoot, th, thead, tr)
  • clear (br)
  • compact (dl, menu, ol, ul)
  • frame (table)
  • frameborder (iframe)
  • height (td, th)
  • hspace and vspace (img, object)
  • marginheight and marginwidth (iframe)
  • noshade (hr)
  • nowrap (td, th)
  • rules (table)
  • scrolling (iframe)
  • size (hr)
  • type (li, ol, ul)
  • valign (col, colgroup, tbody, td, tfoot, th, thead, tr)
  • width (hr, table, td, th, col, colgroup, pre)

Browser support

  • IE8 has very limited support for HTML 5.
  • Other browsers are implementing portions of it.

Existing Usage

  • Google Wave requires a browser that supports HTML 5.
  • Google has been most interested in canvas, video, web workers, geolocation, and offline storage.


Resources

Sources

  • http://en.wikipedia.org/wiki/HTML_5
  • http://www.cmswire.com/cms/web-content/html-5-supersedes-web-forms-20-004054.php
  • http://www.webmonkey.com/blog/HTML_5_Support_by_Browser - Google Wave
  • http://itknowledgeexchange.techtarget.com/overheard/html-5-the-browser-is-a-web-platform/
  • http://dev.w3.org/html5/html4-differences/
  • http://dev.w3.org/html5/markup/
  • http://www.whatwg.org/specs/web-forms/current-work/
  • http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
  • http://developer.mozilla.org/en/docs/Canvas_tutorial