HTML5 Intro                         basic basic, ripped from wikipedia                                        http://en.wi...
HTML5 what’s new?                  Markup / Tags                  APIs                  Details / Demos                  C...
HTML5 Markup                  <!DOCTYPE html>                  <nav> for <div id=”navigation”>                  <footer> f...
HTML5 APIs                                 scripting is in spec!                  drag-and-drop                  canvas sc...
HTML5 Web Storage   if(window.openDatabase){   !   ! / window.openDatabase(DatabaseName, DatabaseVersion, DisplayName, Est...
HTML5 Web Sockets                 / open a websocket                  /                 var conn = new WebSocket("ws://you...
Web Sockets and RTW              http://blog.new-bamboo.co.uk/2009/12/30/brain-dump-of-real-time-web-rtw-and-websocket03/2...
HTML5 Canvas          <canvas id="myDrawing">canvas is not supported</canvas>          ----          var drawingCanvas = d...
Demos and Links                  css3 keyframes                       http://webkit.org/blog-files/leaves/leaves.css       ...
HTML5 Compatibility          http://www.quirksmode.org/dom/html5.html03/2010 Rocco Georgi, PavingWays Ltd.
HTML5 Roadmap                  backwards-compatible syntax (ignored)                  "Last Call" state, Feb. 2010        ...
Upcoming SlideShare
Loading in …5
×

HTML5 Intro

1,952 views

Published on

A basic introduction to HTML5 and it's new features. Created for the HTML5/CSS3 meetup Frankfurt in March 2010.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

HTML5 Intro

  1. 1. HTML5 Intro basic basic, ripped from wikipedia http://en.wikipedia.org/wiki/HTML503/2010 Rocco Georgi, PavingWays Ltd.
  2. 2. HTML5 what’s new? Markup / Tags APIs Details / Demos Compatibility Roadmap03/2010 Rocco Georgi, PavingWays Ltd.
  3. 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, time03/2010 Rocco Georgi, PavingWays Ltd.
  4. 4. HTML5 APIs scripting is in spec! drag-and-drop canvas scripting Web Storage Web Sockets PUT und DELETE in <form method=”...”> ... some more03/2010 Rocco Georgi, PavingWays Ltd.
  5. 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/119103/2010 Rocco Georgi, PavingWays Ltd.
  6. 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. 7. Web Sockets and RTW http://blog.new-bamboo.co.uk/2009/12/30/brain-dump-of-real-time-web-rtw-and-websocket03/2010 Rocco Georgi, PavingWays Ltd.
  8. 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. 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.html03/2010 Rocco Georgi, PavingWays Ltd.
  10. 10. HTML5 Compatibility http://www.quirksmode.org/dom/html5.html03/2010 Rocco Georgi, PavingWays Ltd.
  11. 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 it03/2010 Rocco Georgi, PavingWays Ltd.

×