22-08-2012, 10:37 AM
Developing with HTML5
Developing with HTML5.ppt (Size: 1.41 MB / Downloads: 54)
WHATWG Goals
Document real-world browser behaviour
Document and standardise useful extensions
Develop practical new features
Ensure backwards compatibility
Define robust error handling
Design Principles
Foundation of Design and Development
Organised into 3 Categories
Compatibility
Utility
Interoperability
Design Principles: Compatibility
Support Existing Content
Degrade Gracefully
Don't Reinvent the Wheel
Pave the Cowpaths
Evolution, not Revolution
Design Principles: Utility
Solve Real Problems
Priority of Constituencies
Media Independence
Universal Access
Support World Languages
Secure By Design
Separation of Concerns
Design Principles: Interoperability
Well-Defined Behaviour
Avoid Needless Complexity
Handle Errors
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
Benefits of XHTML
Strict XML Syntax
Integrate directly with other XML vocabularies
SVG, MathML
Use XML Processing
Using HTML and XHTML Together
Overview of Enhancements
Structure and Semantics
Embedded Content and Multimedia
DOM APIs
Forms
Repetition Model
Dates and Times
Microformats datetime-design-pattern
<abbr class="datetime" title="2007-08-02T23:30Z"> Fri, Aug 03 2007 at 09:30</abbr>
Misusing the abbr element
Accessibility Issues
Dates and Times
The time Element
<time datetime="2007-08-02T23:30Z"> Fri, Aug 03 2007 at 09:30</time>
Solves Accessibility Issue
Can be used in Microformats like hCalendar
Meter
Representing scalar measurements or fractional values
Useful for:
User Ratings (e.g. YouTube Videos)
Seach Result Relevance
Disk Quota Usage
Using Meter
<meter>60%</meter>
<meter>3/5</meter>
<meter>6 blocks used (out of 10 total)</meter>
<meter value="0.6">Medium</meter>
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
Using Progress
<progress>Step 3 of 6</progress>
<progress>50% Complete</progress>
<progress value="0.5"> Half way!</progress>
M
Marked or Highlighted text
Not to be confused with <em>
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)
Using M
<p>The highlighted part below is where the error lies:</p><pre><code>var i: Integer;begin i := <m>1.1</m>;end.</code></pre>
Datagrid
Interactive tree, list or tabular data
Extensive DOM API
Allows User Input
Editing
Sorting
Useful for:
File or folder lists
Web mail applications
Using Datagrid
<datagrid> <table> <!-- Insert tabular data here... --> </table></datagrid>
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…
Canvas Examples: Graphs
PlotKit
http://www.liquidxplotkit/
JavaScript library
Draws graphs from any data source, such as a table