HTML5

5,742 views

Published on

An introductory session for HTML5, session was introduced in Mozilla Power'13, the first event for Mozilla in Egypt.

Published in: Technology, Design
8 Comments
65 Likes
Statistics
Notes
No Downloads
Views
Total views
5,742
On SlideShare
0
From Embeds
0
Number of Embeds
862
Actions
Shares
0
Downloads
128
Comments
8
Likes
65
Embeds 0
No embeds

No notes for slide

HTML5

  1. > le ml > it ht n” /t E 5< ”e = YP ML CT ang HT > l DO <! ml ead> itle t <h <t <h d> ea h </ > Ibrahim Abdel Fattah Mohamed @bingorabbit bingorabbit.com
  2. W lcom !
  3. Let's get back in History.. http://en.wikipedia.org/wiki/HTML 1995 1997 1998 1999 2000 2002 2004 2006 2009 2010
  4. I just had to take the hypertext idea and connect it to the TCP and DNS ideas and — ta-da!— the World Wide Web. –- Sir, Tim Berners-Lee Known as the Creator of WWW
  5. Sir. Tim Berners-Lee The Father of The Internet
  6. 1995: HTML 2.0 Just standardized rules what people have been already using before..and it wasn't that good! 1995 1997 1998 1999 2000 2002 2004 2006 2009 2010
  7. Strict Transitional Frameset 1997: HTML 3.2, Proposing 4.0 Adding standard support for tables and applets.. 1995 1997 1998 1999 2000 2002 2004 2006 2009 2010
  8. 1999: HTML 4.01 Stable syntax and structure for HTML till it became the standard for web authoring. 1995 1997 1998 1999 2000 2002 2004 2006 2009 2010
  9. 2000: XHTML 1.0 Trying to move structure more towards XML's, but browsers manufactures were kinda stubborn! 1995 1997 1998 1999 2000 2002 2004 2006 2009 2010
  10. 2000->: The LEAP! XHTML 2.0 Up then DOWN!, Flash, Multimedia, and AJAX 1995 1997 1998 1999 2000 2002 2004 2006 2009 2010
  11. 2004 - Present: HTML 5 Rise WHATWG, W3C adopts WHATWG work, Rich applications, Video, Audio, APIs. Large companies involved. 1995 1997 1998 1999 2000 2002 2004 2006 2009 2010
  12. But.. WHY?!
  13. Photo Credit: http://www.flickr.com/photos/hugo_provoste/522495023/ Sim plicity ..is the ultimate sophistication.. -– Leonardo Da Vinci
  14. !DOCTYPE
  15. Before.. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html> After..
  16. Interoperability
  17. New Features.. (Syntax)
  18. New Tags <article>, <aside>, <header>, <footer> <nav>, <section>, <audio>, <video> <embed>, <canvas>, <progress>, <meter>
  19. FORMS! <input type=”email” /> <input type=”url” /> <input type=”range” /> <input type=”date” /> <input type=”tel” /> <input type=”color” /> <input type=”number” />
  20. FORMS! <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
  21. FORMS! Placeholder, Required, Patterns <input pattern="[0-9][A-Z]{3}" name="product" type="text" title="Single digit then 3 UC letters."/>
  22. Geo Location DEMO! http://html5demos.com/geo
  23. ● ● ● ● ● ● ● ● 20 Things I learned about Browsers and Web: www.20thingsilearned.com Angry Birds: http://angrybirds.com/ Evolution of the Web: http://evolutionofweb.appspot.com/ HTML5 Test: http://html5test.com HTML5 Demos: http://html5demos.com/ Arena5: http://www.kevs3d.co.uk/dev/arena5/ Asteroids: http://www.kevs3d.co.uk/dev/asteroids/ HTML5 Visual Cheat Sheet: http://goo.gl/fL8DCa
  24. Mobile Apps
  25. Keywords HTML5 Mobile App Development HTML5 Boilerplate Modernizr Dive into HTML5 Book HTML5 Doctor HTML5 Rocks HTML5 Readiness caniuse.com
  26. ? Questions
  27. Thanks! :) Ibrahim A. Mohamed Tweet to me: @bingorabbit

×