HTML5
66 likes6,543 views
An introductory session for HTML5, session was introduced in Mozilla Power'13, the first event for Mozilla in Egypt.
Convert to study guideBETA
Transform any presentation into a summarized study guide, highlighting the most important points and key insights.
![FORMS!
Placeholder, Required, Patterns
<input pattern="[0-9][A-Z]{3}"
name="product"
type="text"
title="Single digit then 3 UC letters."/>](https://image.slidesharecdn.com/html5-131220140709-phpapp02/85/HTML5-23-320.jpg)
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 !
- 4. Let's get back in History.. http://en.wikipedia.org/wiki/HTML 1995 1997 1998 1999 2000 2002 2004 2006 2009 2010
- 5. 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
- 6. Sir. Tim Berners-Lee The Father of The Internet
- 7. 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
- 8. 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
- 9. 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
- 10. 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
- 11. 2000->: The LEAP! XHTML 2.0 Up then DOWN!, Flash, Multimedia, and AJAX 1995 1997 1998 1999 2000 2002 2004 2006 2009 2010
- 12. 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
- 14. But.. WHY?!
- 15. Photo Credit: http://www.flickr.com/photos/hugo_provoste/522495023/ Sim plicity ..is the ultimate sophistication.. - Leonardo Da Vinci
- 16. !DOCTYPE
- 17. Before.. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html> After..
- 18. Interoperability
- 20. New Tags <article>, <aside>, <header>, <footer> <nav>, <section>, <audio>, <video> <embed>, <canvas>, <progress>, <meter>
- 21. FORMS! <input type=email /> <input type=url /> <input type=range /> <input type=date /> <input type=tel /> <input type=color /> <input type=number />
- 22. 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>
- 23. FORMS! Placeholder, Required, Patterns <input pattern="[0-9][A-Z]{3}" name="product" type="text" title="Single digit then 3 UC letters."/>
- 25. 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
- 26. Mobile Apps
- 27. Keywords HTML5 Mobile App Development HTML5 Boilerplate Modernizr Dive into HTML5 Book HTML5 Doctor HTML5 Rocks HTML5 Readiness caniuse.com
- 28. ? Questions
- 29. Thanks! :) Ibrahim A. Mohamed Tweet to me: @bingorabbit