![HTML5 Web Storage if(window.openDatabase){ ! ! / window.openDatabase(DatabaseName, DatabaseVersion, DisplayName, EstimatedSize) / ! var db = window.openDatabase("app", "", "my app db name", 1024*1024); ! ! / transaction.executeSQL(SQLStatement, SQLParameters, ResultsetCallback, ErrorCallback) / ! db.transaction(function(tx){ ! tx.executeSql('SELECT * FROM MyTable WHERE CategoryField = ?', ! ! [ selectedCategory ], ! ! function (tx, rs) { displayMyResult(rs); }, ! ! function (tx, err) { displayMyError(err); } ); ! }); } http://creativepark.net/blog/entry/id/1191 03/2010 Rocco Georgi, PavingWays Ltd.](https://image.slidesharecdn.com/html5-101228172716-phpapp02/75/HTML5-Intro-5-2048.jpg)
Uploaded byPavingWays Ltd.
HTML5 Intro
The document provides an overview of HTML5, including its new markup elements, APIs, and features such as web storage and web sockets. It outlines specific implementations with code snippets and links to additional resources and demos. Furthermore, it discusses the HTML5 compatibility and its development roadmap towards finalizing the standard.
HTML5 Intro
- 1. HTML5 Intro basic basic, ripped from wikipedia http://en.wikipedia.org/wiki/HTML5 03/2010 Rocco Georgi, PavingWays Ltd.
- 2. HTML5 what’s new? Markup / Tags APIs Details / Demos Compatibility Roadmap 03/2010 Rocco Georgi, PavingWays Ltd.
- 3. HTML5 Markup <!DOCTYPE html> <nav> for <div id=”navigation”> <footer> for <div id=”footerarea”> <audio>, <video>, <canvas> ..., article, aside, command, details, datalist, dialog, embed, figure, header, hgroup, keygen, mark, meter, progress, output, rp, rt, ruby, section, source, time 03/2010 Rocco Georgi, PavingWays Ltd.
- 4. HTML5 APIs scripting is in spec! drag-and-drop canvas scripting Web Storage Web Sockets PUT und DELETE in <form method=”...”> ... some more 03/2010 Rocco Georgi, PavingWays Ltd.
- 5. HTML5 Web Storage if(window.openDatabase){ ! ! / window.openDatabase(DatabaseName, DatabaseVersion, DisplayName, EstimatedSize) / ! var db = window.openDatabase("app", "", "my app db name", 1024*1024); ! ! / transaction.executeSQL(SQLStatement, SQLParameters, ResultsetCallback, ErrorCallback) / ! db.transaction(function(tx){ ! tx.executeSql('SELECT * FROM MyTable WHERE CategoryField = ?', ! ! [ selectedCategory ], ! ! function (tx, rs) { displayMyResult(rs); }, ! ! function (tx, err) { displayMyError(err); } ); ! }); } http://creativepark.net/blog/entry/id/1191 03/2010 Rocco Georgi, PavingWays Ltd.
- 6. HTML5 Web Sockets / open a websocket / var conn = new WebSocket("ws://yourwebservice.com/service"); / act on incoming data / conn.onopen = function(e) { ... } conn.onread = function(e) { ... } conn.onclose = function(e) { ... } / push messages back to server / conn.send("Bi-directional!"); http://www.igvita.com/2009/08/18/smart-clients-reversehttp-websockets/ 03/2010 Rocco Georgi, PavingWays Ltd.
- 7. Web Sockets andRTW http://blog.new-bamboo.co.uk/2009/12/30/brain-dump-of-real-time-web-rtw-and-websocket 03/2010 Rocco Georgi, PavingWays Ltd.
- 8. HTML5 Canvas <canvas id="myDrawing">canvas is not supported</canvas> ---- var drawingCanvas = document.getElementById('myDrawing'); / check for browser support / if(drawingCanvas.getContext) { / Initaliase a 2-dimensional drawing context / var context = drawingCanvas.getContext('2d'); ! / Create the yellow face / ! context.strokeStyle = "#000000"; ! context.fillStyle = "#FFFF00"; ! context.beginPath(); ! context.arc(100,100,50,0,Math.PI*2,true); ! context.closePath(); ! context.stroke(); ! context.fill(); } http://carsonified.com/blog/dev/html-5-dev/how-to-draw-with-html-5-canvas/ 03/2010 Rocco Georgi, PavingWays Ltd.
- 9. Demos and Links css3 keyframes http://webkit.org/blog-files/leaves/leaves.css canvas https://developer.mozilla.org/en/Canvas_tutorial http://ponderer.org/download/canvas_demo/ http://9elements.com/io/projects/html5/canvas/ http://www.nihilogic.dk/labs/mario/mario_small_music.htm http://dev.opera.com/articles/view/html-5-canvas-the-basics/ http://billmill.org/static/canvastutorial/color.html 03/2010 Rocco Georgi, PavingWays Ltd.
- 10. HTML5 Compatibility http://www.quirksmode.org/dom/html5.html 03/2010 Rocco Georgi, PavingWays Ltd.
- 11. HTML5 Roadmap backwards-compatible syntax (ignored) "Last Call" state, Feb. 2010 W3C Candidate Recommendation stage during 2012 (Ian Dickson, Google, editor) other main editor: David Hyatt, Apple many big player are involved... finalizing the standard != using it 03/2010 Rocco Georgi, PavingWays Ltd.