HTML5 Intro
•
0 recomendaciones•902 vistas
A basic introduction to HTML5 and it's new features. Created for the HTML5/CSS3 meetup Frankfurt in March 2010.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a HTML5 Intro
Similar a HTML5 Intro (20)
Último
Último (20)
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 and RTW 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.
Notas del editor
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n