2. Add all new web technology into a box labeled
HTML 5
SVG (Scalable Vector Graphics) 6 years old.
Web Forms 2.0 XMLHttp-Request (XHR)
HTML5
3. <audio> and <video> tags
<canvas> element
SVG
WebGL
Touch API
Flash has been replaced
4. W3C has been adding features to HTML
Major browsers support the standards
Latest version is HTML5
Has all of the power of native applications
Plus more!
6. Document real-world browser behaviour
Document and standardise useful extensions
Develop practical new features
Ensure backwards compatibility
Define robust error handling
7. Foundation of Design and Development
Organised into 3 Categories
Compatibility
Utility
Interoperability
8. Support Existing Content
Degrade Gracefully
Don't Reinvent the Wheel
Pave the Cowpaths
Evolution, not Revolution
9. Solve Real Problems
Priority of Constituencies
Media Independence
Universal Access
Support World Languages
Secure By Design
Separation of Concerns
11. HTML XHTML
5 5
text/html application/xhtml+xml
Document
DOM
12. 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
13. Strict XML Syntax
Integrate directly with other XML vocabularies
SVG, MathML
Use XML Processing
14.
15. No need for software updates
Everyone sees the latest version
Development can be done anywhere
No need for special software
Just a terminal and Firefox/Firebug
16. HTML5 and javascript are interpreted
No compilation
Can test UI changes with a console window
Firebug extension for
Firefox
17. Cross-platform
Most browsers (read: not IE) conform to the W3C
standards
The same code works on PC, Mac, Linux
19. <header>
<hgroup> : groups a set of h1-h6 elements when the heading has
multiple levels
<nav>
<section>
<article>
<header>
<aside>
<footer>
<time>
<mark>
20. Structure and Semantics
Embedded Content and Multimedia
DOM APIs
Forms
Repetition Model
23. 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
24. The time Element
<timedatetime="2007-08-02T23:30Z">
Fri, Aug 03 2007 at 09:30
</time>
Solves Accessibility Issue
Can be used in Microformats like
hCalendar
25. Representing scalar measurements or
fractional values
Useful for:
User Ratings (e.g. YouTube Videos)
Seach Result Relevance
Disk Quota Usage
26. <meter>60%</meter>
<meter>3/5</meter>
<meter>6 blocks used
(out of 10 total)</meter>
<meter value="0.6">Medium</meter>
27. Show completion progress of a task
Progress bars are widely used in other
applications
Works with scripted applications
Useful for:
Indicateloading progress of an AJAX application
Show user progress through a series of forms
Making impatient users wait
29. Interactive tree, list or tabular data
Extensive DOM API
Allows User Input
Editing
Sorting
Useful for:
File
or folder lists
Web mail applications
32. Dynamic and interactive graphics
Draw images using 2D drawing API
Lines, curves, shapes, fills, etc.
Useful for:
Graphs
Applications
Games and Puzzles
And more…
33. PlotKit
http://www.liquidx.net/plotkit/
JavaScript library
Draws graphs from any
data source, such as a
table
34. Yahoo! Pipes
http://pipes.yahoo.com/
Interactive, drag and
drop interface
35. CanvasPaint
http://canvaspaint.org/
Clone of MS Paint built
with Canvas
Could be used to build a
Shared Whiteboard
application
36. Canvex
http://canvex.lazyilluminati.com/
Experimental First-
Person Shooter Game
3D Graphics
37. Videos have become
very popular
Currently difficult to
embed videos in HTML
Flash has become the de
facto standard
Adding native support to
browsers
38. <video src="movie.ogg"
id="video">...</video>
<button onclick="video.play();">
Play
</button>
39.
40. 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
41.
42.
43. HTML 4 controls are too limited
Several new types added
48. 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
49.
50. 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.)
51. Team Members
<tr repeat-template="member" repeat="0">
id="member" repeat="template" repeat-start="2">
<td><input type="text" name="member0.rank"></td>
name="member[member].rank"></td>
Rank Name
<td><input type="text" name="member0.name"></td>
name="member[member].name"></td>
<td><button type="remove">Remove</button></td>
Colonel
</tr> Jack O'Neill Remove
<tr repeat-template="member" repeat="1">
<td><input type="text" name="member1.rank"></td>
Major Sam Carter Remove
<td><input type="text" name="member1.name"></td>
<td><button type="remove">Remove</button></td>
Civilian
</tr> Daniel Jackson Remove
Remove
<tr id="member" repeat="template" repeat-start="2">
Alien Team Member Teal’c
Add Continue
Remove
<td><input type="text" name="member[member].rank"></td>
<td><input type="text" name="member[member].name"></td>
<td><button type="remove">Remove</button></td>
</tr>
<button type="add" template="member">Add Team
Member</button>
52. Native 3D rendering in the browser
Makes use of the same <canvas> element
Syntax is like OpenGL
53. Works with iPad/iPhone/iPod and Windows
7 with Chrome & Firefox
54. Can store relational
data locally in the
browser
Especially useful for
offline apps (more later)
56. Lots of stuff that HTML5 leaves out for us:
Font metrics
Bitmap manipulation
Audio manipulation
More flexible security model (cross-domain). However new browsers
support some of this in XmlHttpRequest
3D support – hardware acceleration
Actionscript language
Desktop client support (AIR)
Totally cross-browser/cross-platform. With HTML5
57. Let the web browser developers do all the hard
work
Applications have never been more easy with
HTML5
Great features at a great price
Develop without the need for bulky IDEs