• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

html5

  • 2,006 views
Uploaded on

html5 - A new standard that will change the web

html5 - A new standard that will change the web

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • I love these slides! Did you know we’re running a competition on SlideShare to win a 3M PocketProjector MP180? To enter, simply tag your presentation with ‘3MInform’. Head over to our page for more details... and don’t forget to follow us to find out if you get shortlisted!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,006
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
67
Comments
1
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. HTML 5A NEW STANDARD THAT WILL CHANGE THE WEB
  • 2. Hi! I’m Lester
  • 3. I work at web agency Netlash.
  • 4. HTML5A NEW STANDARD THAT WILL CHANGE THE WEBTechmondays 29/11/2010
  • 5. HTML5 is the next major revision of the HTMLstandard, currently under development. Like itsimmediate predecessors, HTML 4.01 and XHTML 1.1,HTML5 is a standard for structuring and presentingcontent on the World Wide Web.http://en.wikipedia.org
  • 6. CSSHTML5 HTML JS
  • 7. HTML‣ Semantics‣ Web Forms‣ Multimedia‣ 2D & 3D drawing
  • 8. HTML‣ Semantics‣ Web Forms‣ Multimedia‣ 2D & 3D drawing
  • 9. DoctypeHTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • 10. DoctypeHTML5 <!DOCTYPE HTML>‣ No end tag‣ Not case sensitive
  • 11. New tags <header></header> <nav></nav> <section></section> <article></article> <aside></aside> <footer></footer> ...
  • 12. HTML‣ Semantics‣ Web Forms‣ Multimedia‣ 2D & 3D drawing
  • 13. New input elements ‣ <input type=”email” /> ‣ <input type=”date” /> ‣ <input type=”range” /> ‣ <input type=”search” /> ‣ <input type=”tel” /> ‣ <input type=”color” /> ‣ <input type=”number” />
  • 14. Other elements ‣ <meter /> ‣ <progress /> ‣ <output />
  • 15. New attributes ‣ placeholder=”Search...” ‣ pattern=”(?:[A-Z0-9-]+.)+” ‣ min=”1” max=”10” ‣ results=”10” ‣ required
  • 16. DEMOWEB FORMS
  • 17. HTML‣ Semantics‣ Web Forms‣ Multimedia‣ 2D & 3D drawing
  • 18. Multimedia Audio tag <audio id="audio" src="audio.ogg" controls /> Video tag <video id="video" src="video.mp4" controls />
  • 19. DEMOMULTIMEDIA
  • 20. HTML‣ Semantics‣ Web Forms‣ Multimedia‣ 2D & 3D drawing
  • 21. 2D & 3D drawing‣ Canvas‣ WebGL‣ SVG
  • 22. DEMO2D & 3D drawing
  • 23. JS‣ Client side storage‣ Communication‣ Desktop experience‣ Geolocation
  • 24. JS‣ Client side storage‣ Communication‣ Desktop experience‣ Geolocation
  • 25. Web storage‣ localStorage Store data with no time limit‣ sessionStorage Store data for one session
  • 26. DEMOWEB STORAGE
  • 27. Other storage techniques‣ Web SQL databases‣ Application cache
  • 28. JS‣ Client side storage‣ Communication‣ Desktop experience‣ Geolocation
  • 29. Communication‣ Web workers‣ Websockets‣ Noti cations
  • 30. JS‣ Client side storage‣ Communication‣ Desktop experience‣ Geolocation
  • 31. Desktop experience‣ Native drag & drop‣ Drag in & out
  • 32. JS‣ Client side storage‣ Communication‣ Desktop experience‣ Geolocation
  • 33. DEMOGEOLOCATION
  • 34. BROWSER COMPATIBILITYhttp://www. ndmebyip.com/litmus/
  • 35. Usefull links‣ HTML5 browser test - http://html5test.com/‣ HTML5 template - http://html5boilerplate.com/‣ HTML5 cheat sheet - http://goo.gl/Bof9/‣ HTML5 resources - http://www.html5rocks.com/
  • 36. POLLWhen will HTML5 be fully recognized as a standard?
  • 37. POLLGoodbye Adobe Flash?
  • 38. Questions?
  • 39. twitter.com/ElLessolester@netlash.comhttp://lester.be