Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DINF-11912)
1. 2 December 2005
Web Information Systems
HTML5 and the Open Web Platform
Prof. Beat Signer
Department of Computer Science
Vrije Universiteit Brussel
http://www.beatsigner.com
2. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2
Hypertext Markup Language (HTML)
HTML is an application of the Standard Generalized
Markup Language (SGML)
simple human-readable markup language with a number of
markup tags that can be manipulated by any text editor
Various markup tags to define the structure and
presentation of a HTML document (webpage)
root element (<html>), header (<head>), body (<body>) and
title (<title>)
headings (<h1>, ... <h6>) and paragraphs (<p>)
tables (<table>, <tr> and <td>) and lists (<ol>, <ul> and <li>)
images (<img>)
...
3. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3
Hypertext Markup Language (HTML) ...
HTML documents are transformed into a Document
Object Model (DOM) by the browser
tree of elements (and attributes) with textual content
HTML DOM defines objects and properties for HTML elements
- document node, element nodes, text nodes, attribute nodes
and comment nodes
standard to create, read, update and delete HTML elements
Hyperlinks to connect different HTML documents
anchor tag (<a href="...">)
only embedded hyperlinks are supported
4. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4
HTML Example
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Vrije Universiteit Brussel</title>
</head>
<body>
<h1>News</h1>
<p>Internationalisation was this years theme of the academic opening of
the <a href="http://www.vub.ac.be">Vrije Universiteit Brussel</a>.
</p>
<p>The Vrije Universiteit Brussel will organise the new International
Business Arbitration post-graduate course from the new academic year
onwards.<img src="course.jpg" width="120" height="100" alt="Course">
</p>
...
</body>
</html>
5. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5
HTML DOM Example
News
html
head body
document
title
Vrije Univer ...
h1 p p …
…
Internationa ... a
Vrije Uni ...
href
http:// ...
document node
element node
attribute node
text node
root node
6. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6
History of HTML
HTML 1.0 (1993)
HTML 2.0 (1995)
at that time the Netscape Navigator offered much more
functionality than the HTML standard
- "browser war" between Netscape and Internet Explorer
HTML 3.2 (1997)
first version that was developed exclusively by the Word Wide
Web Consortium (W3C)
introduced tables
introduced a lot of new elements for the visual appearance of a
document (that was not the original idea of HTML!)
- e.g. <font> element or color attribute
- most elements now deprecated and cascading style sheets should be used
7. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7
History of HTML ...
HTML 4.0 (1997) and HTML 4.01 (1999)
internationalisation (Unicode)
introduction of Cascading Style Sheets (CSS)
In 1998 the W3C decided to not further evolve HTML!
XHTML 1 (2000) and XHTML 1.1 (2001)
XML version of HTML (draconian error handling)
XHTML 2.0 (never finished, discontinued in 2009)
revolutionary changes breaking backwards compatibility
Web Hypertext Application Technology Working Group
(WHATWG) founded in 2004 (led by Ian Hickson)
Web Forms 2.0 and Web Applications 1.0 HTML5
8. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8
History of HTML ...
In 2006 the W3C decided to work on HTML again
based on WHATWG's Web Applications specification
HTML5 specification is currently developed
simultaneously by the WHATWG and the W3C
HTML Working Group
HTML – Living Standard, WHATWG
HTML5 – A Vocabulary and Associated APIs for HTML and
XHTML, W3C Working Draft
Roadmap
HTML5 Proposed Recommendation on September 16, 2014
HTML5 W3C Recommendation predicted for the end of 2014
(originally 2022)
9. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9
HTML5
... HTML5 does not belong to a company or a specific
browser. It has been forged by a community of people
interested in evolving the web and a consortium of
technological leaders that includes Google, Microsoft, Apple,
Mozilla, Facebook, IBM, HP, Adobe, and many others. The
community and consortium continue to collaborate on
universal browser standards to push web capabilities even
further. The next generation of web apps can run high-performance
graphics, work offline, store a large amount of
data on the client, perform calculations fast, and take
interactivity and collaboration to the next level. ...
Why HTML5 Rocks, http://www.html5rocks.com
10. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10
HTML5 Design Principles
Compatibility
evolve the language for easier authoring of web applications
Utility
solve real problems (pragmatic approach)
separation of content and presentation (CSS)
Interoperability
interoperable browser behaviour
identical error handling across browsers resulting in the same
DOM tree for broken HTML
Universal Access
features should preferably work across different platforms
(cross-platform), devices and media
design features should be accessible to users with disabilities
11. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11
HTML5 Design Principles ...
Simple is better
new doctype: <!DOCTYPE html>
HTML5 APIs
...
Avoid external plug-ins
plug-ins are often not nicely integrated with HTML documents
plug-ins can be disabled or blocked (e.g. Adobe Flash on iPad)
plug-ins may crash
...
12. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12
HTML5 and Open Web Platform APIs
Sergey Mavrody, January 2013
13. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13
Current HTML5 Browser Support
When can I use..., http://caniuse.com/#cats=HTML5
14. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14
JavaScript/ECMAScript
Growing use of JavaScript frameworks and AJAX
JavaScript engine race
in 2006 Adobe donated their just-in-time (JIT) compilation engine
and ECMAScript virtual machine to the Mozilla project
healthy competition among browser vendors
- bring JavaScript performance closer to that of native desktop application code
Black Duck, 2011 http://www.whatbrowser.org
15. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15
Browser Performance
16. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16
Web Browsers (1990–2013)
WorldWideWeb
Internet Explorer
Trident Engine
Mozilla
Firefox
WebKit Engine
Opera
Presto Engine
Opera Mini
Chrome
Safari
Gecko Engine
http://en.wikipedia.org/wiki/File:Timeline_of_web_browsers.svg
17. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17
HTML Markup
Some elements have been added
structural elements such as <article>, <section>, <header>,
<footer> or <nav>
media elements including <video>, <audio> or <embed>
a <canvas> drawing element
Other elements have been removed
<big>, <font>, <strike>, <u>, <center>, ...
New form functionality (originally Web Forms 2.0)
form elements such as <datalist> or <output>
input types such as date, color, email, tel, range, ...
native functionality for client-side validation (no scripting)
W3C Proposed Recommendation
18. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18
Forms Example
19. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19
Forms Example ...
<!DOCTYPE html>
<html>
<body>
<form action="submit.html">
Name (required) <input type="text" name="name" required autofocus>
Title <input type="text" name="title">
Shoesize <input list="range" min="10" max="30" name="shoesize">
Email (required) <input type="email" name="mail" required>
Webpage <input type="url" name="webpage">
Date of Birth <input type="date" name="birthday">
<input type="submit">
</form>
</body>
</html>
20. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20
Video
<video> element can be used to play videos
in HTML pages
element has methods, properties and events
no external plug-in (e.g. Adobe Flash) is required
e.g. an HTML5 YouTube version (working without Flash) is
available at http://www.youtube.com/html5
No single video format is supported by all browsers
MP4, WebM and Ogg
<video width="640" height="480" controls="controls">
<source src="bullhead.mp4" type="video/mp4" />
<source src="bullhead.webm" type="video/webm" />
The video tag is not supported by your browser!
</video>
W3C Proposed Recommendation
21. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21
Video ...
Current limitations
no adaptive streaming
no copy protection
limited access to web cams and microphones but this is going to
change in the near future (via the Media Captue API)
HTML5 Video vs. Adobe Flash
... Our future work with Flash on mobile devices will be focused on
enabling Flash developers to package native apps with Adobe AIR for all
the major app stores. We will no longer continue to develop Flash Player
in the browser to work with new mobile device configurations (chipset,
browser, OS version, etc.) following the upcoming release of Flash
Player 11.1 for Android and BlackBerry PlayBook. ...
Adobe Systems Incorporated, November 9, 2011
W3C Proposed Recommendation
22. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22
Video Support
When can I use..., http://caniuse.com/#feat=video
23. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23
MP4 Support
MPEG 4 files with H264 video codec and AAC audio codec
When can I use..., http://caniuse.com/#feat=mpeg4
24. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24
WebM Support
WebM files with VP8 video codec and Vorbis audio codec
When can I use..., http://caniuse.com/#feat=webm
25. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25
Ogg Support
When can I use..., http://caniuse.com/#feat=ogv
Ogg files with Theora video codec and Vorbis audio codec
26. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26
Canvas 2D
<canvas> tag can be used in combination with
JavaScript to draw on a webpage (raster graphics)
define a canvas with an id and use it in the JavaScript code
draw lines, shapes (with optional gradient filling) etc. or add text
<canvas id="drawingArea" width="200" height="200">
The canvas tag is not supported by your browser!
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("drawingArea");
var context = canvas.getContext("2d");
context.fillStyle = "#0000FF";
context.fillRect(50,50,100,50);
context.moveTo(0,0);
context.lineTo(200,200);
context.stroke();
</script>
W3C Proposed Recommendation
27. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27
HTML5 Canvas and JavaScript Demo
http://www.youtube.com/watch?v=cnexWE5Rbx4
28. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28
Canvas 2D Support
When can I use..., http://caniuse.com/#feat=canvas
29. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29
Scalable Vector Graphics (SVG)
Vector graphics alternative to Canvas 2D
resolution independent
define graphics in XML format (embeddable in HTML)
good support for animations (declarative description)
full control over each element via the SVG DOM API
On the other hand, Canvas 2D offers better performance
W3C Recommendation
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="50" cy="50" r="100" fill="blue" />
</svg>
</body>
</html>
30. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30
SVG Support
When can I use..., http://caniuse.com/#cats=SVG
31. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31
Web Graphics Library (WebGL)
3D graphics API for JavaScript
getContext("3d") might be used in the future
currently getContext("webgl") or
getContext("experimental-webgl")
GPU accelerated
32. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32
Video: Google Body Browser (WebGL)
33. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33
WebGL Support
When can I use..., http://caniuse.com/#feat=webgl
34. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34
Web Storage
localStorage and sessionStorage JavaScript
objects to store data (key/value) on the client
localStorage has no time limit whereas sessionStorage is
deleted when the browser window is closed
- localStorage with same origin policy and sessionStorage per window
replace cookies for large amounts of data
- cookies are limited in size (maximal 4 KB) and are sent with each request
W3C Recommendation
<script type="text/javascript">
if (localStorage.counter) {
localStorage.counter = Number(localStorage.counter) + 1;
}
else {
localStorage.counter = 1;
}
document.write("Total of " + localStorage.counter + " visits");
</script>
35. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35
Web Storage Support
When can I use..., http://caniuse.com/#search=web%20storage
36. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36
Indexed Database API
Low-level indexed storage capabilities
other libraries to be developed based on top of the indexed core
In contrast to the Web Storage API, an object store may
have an arbitrary number of indexes
No space limit such as in the Web Storage API
Likely going to become the future structured storage
replacing the Web SQL API (which is now deprecated)
Introduces the concept of transactions and cursors
W3C Candidate Recommendation
37. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37
Indexed Database Support
When can I use..., http://caniuse.com/#search=indexed%20data
38. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38
Drag and Drop
Drag items and drop them anywhere in the browser
define draggable elements via the draggable attribute
define elements that can accept drops
exchange information via the dataTransfer object
Items can also be drag and dropped from the browser to
external applications
W3C Proposed Recommendation
39. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39
Drag and Drop ...
<!DOCTYPE html>
<html>
<head>
<!-- style sheet information for the div elements -->
<script>
function drag(event) {
event.dataTransfer.setData("text/plain", event.target.id);
}
function drop(event) {
event.preventDefault();
var data=event.dataTransfer.getData("text/plain");
event.target.appendChild(document.getElementById(data));
}
function allowDrop(event) {
event.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="wise.gif" draggable="true" ondragstart="drag(event)" id="d1">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
W3C Proposed Recommendation
40. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40
Drag and Drop Support
When can I use..., http://caniuse.com/#feat=dragndrop
41. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 41
Web Workers
When executing JavaScript in an HTML page, the
page becomes non-responsive until the script is finished
Web Workers can be used to execute JavaScript code in
a background process (thread)
to avoid the complexity of multi-threaded programming, Web
Workers have independent JavaScript contexts and can only
interact with each other via event-driven message passing
<script type="text/javascript">
var worker = new Worker("myScript.js");
worker.onmessage = function(event) {
alert("The worker received this: " + event.data);
...
};
worker.postMessage("Hello worker!");
</script>
W3C Candidate Recommendation
42. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 42
Web Workers Support
When can I use..., http://caniuse.com/#feat=webworkers
43. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 43
Offline Web Applications
Application cache is used for
offline browsing where users can use the web application while
they are offline
increased performance due to cache hits and reduced server load
Managed via a cache manifest (on every page)
W3C Working Group Note
<!DOCTYPE html>
<html lang="en" manifest="/myApp.appcache">...</html>
CACHE MANIFEST
CACHE:
index.html
default.js
NETWORK:
dynamic.js
FALLBACK:
time.js fallback-time.js
#version 3
44. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 44
Offline Web Applications Support
When can I use..., http://caniuse.com/#feat=offline-apps
45. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 45
Other HTML5 Features
Note that some other important HTML5 features
are introduced later in the course
Web Sockets
WebRTC
Geoloaction
Microdata
…
W3C Proposed Recommendation
46. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 46
When Can We Start to Use HTML5?
HTML5 is not yet an official standard – but many HTML5
features are already implemented by browser vendors
line between web apps and native apps gets blurry!
Seamless transition from HTML 4.01 to HTML5
backwards compatibility and fallback solutions
It is time to start using different parts of HTML5!
... In a recent online survey con-ducted
by Contemporary Analysis,
on behalf of appendTo, a JavaScript
and HTML5 consulting company,
84% of developers planned on using
HTML5 in projects within the next
6 months. ...
When can I use..., http://caniuse.com/#cats=HTML5 Contemporary Analysis, September 2011
47. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 47
Problems with HTML
Mix of content, structure and presentation
no separation of concerns
structure of content defines the presentation in the browser
"Forgiving" browsers weaken the standard
an HTML document with errors (e.g. missing tags etc.) will still be
rendered without any error messages
HTML documents can be checked against the standard
- http://validator.w3.org
most existing websites (>99%) contain errors
- exercise: can you find a webpage without any errors?
Lack of support for multiple presentations
48. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 48
Cascading Style Sheets (CSS)
Separation of presentation and content
visualisation of HTML elements defined by styles
enables multiple presentations of the same content
media-specific style sheets via the media attribute
<html>
<head>
...
<link ref="stylesheet" type="text/css" href="default.css"
media="screen, tv" />
<link rel="stylesheet" type="text/css" href="alternative.css"
media="print, handheld" />
</head>
<body>
...
</body>
</html>
49. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 49
CSS Syntax
The CSS syntax contains three parts
a selector
- HTML element
a property and a value
- surrounded by curly braces
- multiple properties are separated with a semicolon
Example
selector {property1:value1;propertyn:valuen}
h1 {color:red;font-size:10px}
p {color:blue}
50. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 50
CSS Inclusion
There are three ways how a style sheet can be inserted
inline style
internal style sheet
external style sheet
Inline style
defined via the style attribute of the corresponding
HTML element
still mixes content and presentation and should therefore be
avoided whenever possible
<h1 style="color:red;font-size:10px">Urgent Tasks</h1>
51. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 51
CSS Inclusion ...
Internal style sheet
used when single document has a unique style
defined in the <head> section
<html>
<head>
...
<style type="text/css">
h1 {color:red;font-size:10px}
p {color:blue}
...
</style>
</head>
<body>
...
</body>
</html>
52. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 52
CSS Inclusion ...
External style sheet (in *.css file)
changes to the overall appearance of an entire website can be
managed in a single file
- removes a lot of redundancy
- saves a lot of time
- leads to more consistent websites
<html>
<head>
...
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
...
</body>
</html>
53. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 53
Multiple Style Sheets
Multiple styles will cascade into a single one
properties/values are inherited from more specific style sheets
Overriding priorities
(1) default browser style
(2) external style sheet
(3) internal style sheet
(4) inline style (highest priority)
Note that if the link to the external style sheet in the
<head> section is placed after the internal style sheet, then the
external style sheet will override the internal one
54. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 54
Exercise 3
Java Servlet Technology
develop a servlet that processes data which has
been entered in an HTML form
55. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 55
References
HTML – Living Standard, WHATWG
http://www.whatwg.org/html
HTML5 – A Technical Specification for Web Developers
http://developers.whatwg.org
HTML5 – A Vocabulary and Associated APIs for HTML
and XHTML, W3C Working Draft
http://www.w3.org/TR/html5/
HTML Design Principles, W3C Working Draft
http://www.w3.org/TR/html-design-principles/
HTML Canvas 2D Context, W3C Working Draft
http://www.w3.org/TR/2dcontext/
56. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 56
References ...
Simon Sarris, HTML 5 Canvas: A Web Standard
for Dynamic Graphics (refcardz #151)
http://refcardz.dzone.com/refcardz/html5-canvas-web-standard
HTML5 Canvas and JavaScript Demo
http://www.youtube.com/watch?v=cnexWE5Rbx4
Scalable Vector Graphics (SVG) 1.1
http://www.w3.org/TR/SVG11/
Web Storage, W3C Candidate Recommendation
http://www.w3.org/TR/webstorage/
Indexed Database API, W3C Working Draft
http://www.w3.org/TR/IndexedDB/
57. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 57
References ...
Gerard Gallant, HTML5: IndexedDB,
(refcardz #195)
http://refcardz.dzone.com/refcardz/html5-indexeddb
Web Workers, W3C Working Draft
http://www.w3.org/TR/workers/
Gerard Gallant, HTML5 Web Workers: Multithreaded
JavaScript for High-Performance Web Apps
(refcardz #177)
http://refcardz.dzone.com/refcardz/html5-web-workers
Web Audio API, W3C Working Draft
http://www.w3.org/TR/webaudio/
58. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 58
References ...
HTML Tutorial
http://www.w3schools.com/html/
Andy Harris, Core HTML (refcardz #64)
http://refcardz.dzone.com/refcardz/core-html
James Sugrue, HTML5: The Evolution
of Web Standards (refcardz #123)
http://refcardz.dzone.com/refcardz/html5-new-standards-
web-interactivity
Mark Pilgrim, HTML5: Up and Running - Dive Into the
Future of Web Development, O'Reilly Media, August
2010, ISBN-13: 978-0596806026
59. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 59
References ...
Cascading Style Sheets (CSS) Snapshot 2010,
W3C Working Group Note
http://www.w3.org/TR/CSS/
Molly E. Holzschlag, Core CSS (Part I, II & III)
(refcardz #19, #25 and #34)
http://refcardz.dzone.com/refcardz/corecss-part1
http://refcardz.dzone.com/refcardz/corecss2
http://refcardz.dzone.com/refcardz/corecss3
CSS Tutorial
http://www.w3schools.com/css/
Offline Web Applications, W3C Working Group Note
http://www.w3.org/TR/offline-webapps/
60. October 10, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 60
References ...
Max Firtman, HTML5 Mobile Development,
(refcardz #186)
http://refcardz.dzone.com/refcardz/html5-mobile-development
W3C Markup Validation Service
http://validator.w3.org