HTML5 Intro
•
0 gefällt mir•902 views
A basic introduction to HTML5 and it's new features. Created for the HTML5/CSS3 meetup Frankfurt in March 2010.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie HTML5 Intro
Ähnlich wie HTML5 Intro (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (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.
Hinweis der Redaktion
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n