Developing with HTML5

1
Developing with HTML5

• Lachlan Hunt
• 2007-08-03

2
WHATWG
The Web Hypertext Application Technology Working
Group
3
WHATWG Goals

• Document real-world browser behaviour
• Document and standardise useful extensions
• Develop practical new features
• Ensure backwards compatibility
• Define robust error handling

4
Design Principles

• Foundation of Design and Development
• Organised into 3 Categories
• Compatibility
• Utility
• Interoperability

5
Design Principles Compatibility

• Support Existing Content
• Degrade Gracefully
• Don't Reinvent the Wheel
• Pave the Cowpaths
• Evolution, not Revolution

6
Design Principles Utility

• Solve Real Problems
• Priority of Constituencies
• Media Independence
• Universal Access
• Support World Languages
• Secure By Design
• Separation of Concerns

7
Design Principles Interoperability

• Well-Defined Behaviour
• Avoid Needless Complexity
• Handle Errors

8
Document Representations
Document
DOM
9
Benefits of HTML

• Backwards compatible with legacy UAs
• Author familiarity
• Lenient and forgiving syntax
• No User-Hostile Yellow Screen of Death!
• Convenient shorthand syntax
• Can omit some tags and attribute values

10
Benefits of XHTML

• Strict XML Syntax
• Integrate directly with other XML vocabularies
• SVG, MathML
• Use XML Processing

11
Using HTML and XHTML Together
12
Overview of Enhancements

• Structure and Semantics
• Embedded Content and Multimedia
• DOM APIs
• Forms
• Repetition Model

13
Structure and Semantics
14
Structure
ltheadergt
ltdiv id"header"gt
ltsectiongt
ltnavgt
ltasidegt
ltdiv id"content"gt
ltdiv id"nav"gt
ltdivid"right"gt
ltarticlegt
ltdiv class"article"gt
ltfootergt
ltdiv id"footer"gt
15
Dates and Times

• Microformats datetime-design-pattern
• ltabbr class"datetime" title"2007-08-02T23
  30Z"gt Fri, Aug 03 2007 at 0930lt/abbrgt
• Misusing the abbr element
• Accessibility Issues

16
Dates and Times

• The time Element
• lttime datetime"2007-08-02T2330Z"gt Fri, Aug 03
  2007 at 0930lt/timegt
• Solves Accessibility Issue
• Can be used in Microformats like hCalendar

17
Meter

• Representing scalar measurements or fractional
  values
• Useful for
• User Ratings (e.g. YouTube Videos)
• Seach Result Relevance
• Disk Quota Usage

18
Using Meter

• ltmetergt60lt/metergt
• ltmetergt3/5lt/metergt
• ltmetergt6 blocks used (out of 10
  total)lt/metergt
• ltmeter value"0.6"gtMediumlt/metergt

19
Progress

• Show completion progress of a task
• Progress bars are widely used in other
  applications
• Works with scripted applications
• Useful for
• Indicate loading progress of an AJAX application
• Show user progress through a series of forms
• Making impatient users wait

20
Using Progress

• ltprogressgtStep 3 of 6lt/progressgt
• ltprogressgt50 Completelt/progressgt
• ltprogress value"0.5"gt Half way!lt/progressgt

21
M

• Marked or Highlighted text
• Not to be confused with ltemgt
• Indicates point of interest or relevance
• Useful for
• Highlighting relevant code in a code sample
• Highlighting search keywords in a document (e.g.
  in Google Cache)

22
Using M

• ltpgtThe highlighted part below is where the
  error lieslt/pgtltpregtltcodegtvar i Integerbegin
  i ltmgt1.1lt/mgtend.lt/codegtlt/pregt

23
Datagrid

• Interactive tree, list or tabular data
• Extensive DOM API
• Allows User Input
• Editing
• Sorting
• Useful for
• File or folder lists
• Web mail applications

24
Using Datagrid

• ltdatagridgt lttablegt lt!-- Insert tabular data
  here... --gt lt/tablegtlt/datagridgt

25
Embedded Content and Multimedia
26
Canvas

• Dynamic and interactive graphics
• Draw images using 2D drawing API
• Lines, curves, shapes, fills, etc.
• Useful for
• Graphs
• Applications
• Games and Puzzles
• And more

27
Canvas Examples Graphs

• PlotKit
• http//www.liquidx.net/plotkit/
• JavaScript library
• Draws graphs from any data source, such as a table

28
Canvas Examples Applications

• Yahoo! Pipes
• http//pipes.yahoo.com/
• Interactive, drag and drop interface

29
Canvas Examples Applications

• CanvasPaint
• http//canvaspaint.org/
• Clone of MS Paint built with Canvas
• Could be used to build a Shared Whiteboard
  application

30
Canvas Examples Games

• Canvex
• http//canvex.lazyilluminati.com/
• Experimental First-Person Shooter Game
• 3D Graphics

31
Video and Audio

• Videos have become very popular
• Currently difficult to embed videos in HTML
• Flash has become the de facto standard
• Adding native support to browsers

32
Using Video

• ltvideo src"movie.ogg" id"video"gt...lt/vide
  ogt
• ltbutton onclick"video.play()"gt Playlt/buttongt

33
DOM APIs
34
Server-Sent Events

• Allows immediate update notification from server
  to client
• Send any arbitrary data to the client, intended
  to be processed by a script
• Update content without reloading page
• Useful for
• Real-time chat or gaming
• Stock ticker updates

35
Server-Sent Events
36
Forms
37
Form Controls

• HTML 4 controls are too limited
• Several new types added

38
Form Controls Dates and Times

• ltinput type"datetime"gt
• ltinput type"date"gt
• ltinput type"time"gt
• And more

39
Form Controls Numbers

• ltinput type"number"gt
• ltinput type"range"gt

40
Form Controls Email and URIs

• ltinput type"email"gt
• ltinput type"url"gt

41
Form Controls Combo Boxes

• ltinput list"title-list"gtltdatalist
  id"title-list"gt ltoption value"..."gtlt/datalist
  gt

42
Form Validation

• New attributes to describe validity constraints
  for the expected input
• required, pattern, min, max, etc.
• New DOM APIs allow scripts to detect and deal
  with user input errors more easily

43
Repetition Model
44
Repetition Model

• Allows client side processing to repeat sections
  based on templates
• Traditionally required scripts or server side
  interaction to add additional sections
• Useful for
• Adding multiple players to a game
• Adding multiple, alternative contact details
  (e.g. home phone, work phone, mobile phone, etc.)

45
Using the Repetition Model
Team Members
lttr repeat-template"member" repeat"0"gt
lttdgtltinput type"text" name"member0.rank"gtlt/tdgt
lttdgtltinput type"text" name"member0.name"gtlt/td
gt lttdgtltbutton type"remove"gtRemovelt/buttongtlt/t
dgt lt/trgt lttr repeat-template"member"
repeat"1"gt lttdgtltinput type"text"
name"member1.rank"gtlt/tdgt lttdgtltinput
type"text" name"member1.name"gtlt/tdgt
lttdgtltbutton type"remove"gtRemovelt/buttongtlt/tdgt lt/t
rgt lttr id"member" repeat"template"
repeat-start"2"gt lttdgtltinput type"text"
name"membermember.rank"gtlt/tdgt lttdgtltinput
type"text" name"membermember.name"gtlt/tdgt
lttdgtltbutton type"remove"gtRemovelt/buttongtlt/tdgt lt/t
rgt
lttr id"member" repeat"template"
repeat-start"2"gt lttdgtltinput type"text"
name"membermember.rank"gtlt/tdgt lttdgtltinput
type"text" name"membermember.name"gtlt/tdgt
lttdgtltbutton type"remove"gtRemovelt/buttongtlt/tdgt lt/t
rgt
Name
Rank
Remove
Add Team Member
Add Team Member
Continue
Remove
Tealc
Alien
ltbutton type"add" template"member"gtAdd Team
Memberlt/buttongt
46
Any Questions or Comments?

• Lachlan Hunt
• http//lachy.id.au/
• http//whatwg.org/
• http//www.w3.org/html/