Introduction to HTML5                            adrian.olaru@1and1.roFriday, December 10, 2010
What is HTML5?                  New Wave of Exciting Technologies for Making Web Apps.Friday, December 10, 2010
New doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">...
New Elements                            header    hgroup                             nav       details                    ...
Form enhancements                                  new input types                                 color             numbe...
Form enhancements                                 new attributes                              required           autocompl...
Video & Audio                <video>                <source src="movie.webm" type=video/webm; codecs="vp8, vorbis" />     ...
Canvas                <canvas id="mycanvas" width="150" height="150">                 fallback content here               ...
History                 manipulate the contents of the history stack                history.pushState({page: 1}, "page 1",...
Web Storage                localStorage                      data persists after the window is closed                     ...
Web Workers                var worker = new Worker(task.js);                worker.addEventListener(message, function(e) {...
But wait, there’s more                                selectors      inline editing                              drag & dr...
Resources  HTML5 Spec @ WHATWG                                            Using HTML5 Today  http://www.whatwg.org/specs/w...
Thank YouFriday, December 10, 2010
Upcoming SlideShare
Loading in...5
×

Introduction to HTML5

2,337

Published on

Introduction to HTML5

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,337
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
74
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Introduction to HTML5

  1. 1. Introduction to HTML5 adrian.olaru@1and1.roFriday, December 10, 2010
  2. 2. What is HTML5? New Wave of Exciting Technologies for Making Web Apps.Friday, December 10, 2010
  3. 3. New doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html>Friday, December 10, 2010
  4. 4. New Elements header hgroup nav details section summary article output aside progress footer menuFriday, December 10, 2010
  5. 5. Form enhancements new input types color number time month date datetime url range email search tel week datetime-local <input type="color" required="required" />Friday, December 10, 2010
  6. 6. Form enhancements new attributes required autocomplete autofocus pattern ... <input type="color" required="required" />Friday, December 10, 2010
  7. 7. Video & Audio <video> <source src="movie.webm" type=video/webm; codecs="vp8, vorbis" /> <source src="movie.mp4" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2" /> <source src="movie.ogv" type=video/ogg; codecs="theora, vorbis" /> fallback content here <video> <audio src="audio.mp3">fallback content here</audio> Video Formats: .mp4 = H.264 + AAC .ogg/.ogv = Theora + Vorbis .webm = VP8 + VorbisFriday, December 10, 2010
  8. 8. Canvas <canvas id="mycanvas" width="150" height="150"> fallback content here </canvas> var canvas = document.getElementById(mycanvas); var context = canvas.getContext(2d); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);Friday, December 10, 2010
  9. 9. History manipulate the contents of the history stack history.pushState({page: 1}, "page 1", "page1.html"); history.replaceState() window.onpopstate = function(e) { e.state; };Friday, December 10, 2010
  10. 10. Web Storage localStorage data persists after the window is closed data is shared across all browser windows. sessionStorage data doesnt persist after the window is closed data is not shared with other windows localStorage.setItem("size", "2"); //or localStorage.size = "2"; localStorage.getItem("size"); //or localStorage.size localStorage.removeItem("size"); localStorage.clear();Friday, December 10, 2010
  11. 11. Web Workers var worker = new Worker(task.js); worker.addEventListener(message, function(e) { e.data; }, false); worker.postMessage(Hello World); // Send data to our worker. worker.terminate(); //to terminate the running worker task.js: onmessage = function (event) { postMessage(e.data); }; importScripts(foo.js, bar.js); /* imports two scripts */ There are some HUGE stipulations, though: Workers dont have access to the DOM Workers dont have direct access to the parent page.Friday, December 10, 2010
  12. 12. But wait, there’s more selectors inline editing drag & drop offline apps web SQL database geolocation messaging server events web sockets ...Friday, December 10, 2010
  13. 13. Resources HTML5 Spec @ WHATWG Using HTML5 Today http://www.whatwg.org/specs/web-apps/current-work/multipage/ http://www.facebook.com/note.php?note_id=43853209391 W3C Spec HTML5 Demos and Examples http://www.w3.org/TR/html5/ http://html5demos.com/ Dive Into HTML5 by Mark Pilgrim Introducing HTML5 http://diveintohtml5.org http://introducinghtml5.com/ HTML5 Rocks Using HTML5s new Semantic Tags Today http://www.html5rocks.com/ http://msdn.microsoft.com/en-us/scriptjunkie/gg454786.aspx HTML5 Doctor Wrapping Things Nicely with HTML5 Local Storage http://html5doctor.com/ http://24ways.org/2010/html5-local-storage HTML5 Unleashed: Tips, Tricks and Techniques MDN HTML5 http://www.w3avenue.com/2010/05/07/html5-unleashed-tips- https://developer.mozilla.org/en/HTML/HTML5 tricks-and-techniquesFriday, December 10, 2010
  14. 14. Thank YouFriday, December 10, 2010
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×