HTML5 Introduction                 Ynon PerekWednesday, January 30, 13
Agenda                  HTML History                  HTML5 Rules                  New Features                  Browser S...
In The Beginning                                                                    While working at CERN                 ...
1991 HTML1                  Described in a document called “HTML Tags”                  Included 20 elements              ...
1995 HTML2                  One year after                  Netscape was founded                  Forms                  T...
1997 HTML3.2                  Standardizing browser                  wars                  Dropping Netscape’s            ...
1999 HTML4                  Browser war was over.                  MS won                  Many new elements,             ...
After The Browser Wars                              W3C starts to work on                              XHTML, MathML, SVG ...
HTML4             Suitable for web sites, not             web applicationsWednesday, January 30, 13
2004 WHATWG                  The Web Hypetertext Application Technology                  Working Group came to life in 200...
2009 HTML5                  No more XHTML                  Many new elements                  Web Application OrientedWedn...
State of HTML5                  Still In Draft                  Candidate Recommendations stage during 2012               ...
Web Tech History                  1991 HTML      1999 HTML4                  1995 HTML2     2000 XHTML1                  1...
HTML5 VisionWednesday, January 30, 13
Paving The Cow Path                  The WHATWG took the time to understand what                  everyone does, analyzed ...
Utility Over Purity                  HTML5 is overwhelmingly practical, allowing                  many code that used to b...
Content & Presentation                  HTML5 deprecates many old presentational                  elements in favor of CSS...
Plugin Free Paradigm                  Provide native APIs for everything that used to                  required a propriet...
HTML5 Vision                  Paving The Cow Path                  Utility over Purity                  Separation of Cont...
Q&A                            http://www.flickr.com/photos/92163630@N00/95509221/Wednesday, January 30, 13
The RulesWednesday, January 30, 13
Doctype                  Remove old clutter from the doctype declaration                  For an HTML5 page, use:         ...
Character Encoding                  Remove old clutter from encoding definitions                  Use:                  <me...
Tag Fun                  No need to close void elements                  both <br /> and <br> are valid                  H...
HTML5 New Features                  New Syntactic Elements                  New Semantic Elements                  New API...
HTML5 Semantics                  WHATWG analyzed and learned the uses of <div>                  elements in many web sites...
Semantic Elements                  header: header content                  footer: footer content                  section...
New APIs                  Web Storage            Geolocation                  Web SQL                Device Orientation   ...
HTML             Polyfills             Replacement library for             older browsers             Make a smooth switch ...
HTML5 Tools                  HTML5 Boilerplate. A base HTML5 template with                  backward compatibility and fea...
Demo: HTML                  Boilerplate                  Page Structure                  Best practices                  F...
HTML5 IDEs                  WebStorm                  Komodo Edit                  Eclipse / Visual Studio                ...
HTML5 Lab                  Build a home page for your resume in HTML5 with                  no styling                  De...
Upcoming SlideShare
Loading in …5
×

Html5 intro

2,316 views

Published on

An overview of HTML5

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,316
On SlideShare
0
From Embeds
0
Number of Embeds
749
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 intro

  1. 1. HTML5 Introduction Ynon PerekWednesday, January 30, 13
  2. 2. Agenda HTML History HTML5 Rules New Features Browser Support HTML5 Page StructureWednesday, January 30, 13
  3. 3. In The Beginning While working at CERN in the 90s, Berners-Lee develops WWW 1991 The first web site (CERN’s info page) 1994 Berners-Lee founded the W3C http://www.flickr.com/photos/tanaka/3212373419/Wednesday, January 30, 13
  4. 4. 1991 HTML1 Described in a document called “HTML Tags” Included 20 elements Influenced by SGMLWednesday, January 30, 13
  5. 5. 1995 HTML2 One year after Netscape was founded Forms Tables Image Maps http://www.flickr.com/photos/kalleboo/2214787531/Wednesday, January 30, 13
  6. 6. 1997 HTML3.2 Standardizing browser wars Dropping Netscape’s blink and MS marquee On the right: Blue - IE Light green - Netscape http://en.wikipedia.org/wiki/File:Browser_Wars.svgWednesday, January 30, 13
  7. 7. 1999 HTML4 Browser war was over. MS won Many new elements, including iframe, label, legend, object Deprecated: applet, center, font, menu, strike http://www.flickr.com/photos/daniello/422213306/Wednesday, January 30, 13
  8. 8. After The Browser Wars W3C starts to work on XHTML, MathML, SVG and others XML based technologies HTML is considered “finished”Wednesday, January 30, 13
  9. 9. HTML4 Suitable for web sites, not web applicationsWednesday, January 30, 13
  10. 10. 2004 WHATWG The Web Hypetertext Application Technology Working Group came to life in 2004 to bring life into HTML It was founded by Apple, Mozilla and Opera Published a proposal for Web Applications 1.0 spec, which has later evolved into HTML5Wednesday, January 30, 13
  11. 11. 2009 HTML5 No more XHTML Many new elements Web Application OrientedWednesday, January 30, 13
  12. 12. State of HTML5 Still In Draft Candidate Recommendations stage during 2012 W3C Recommendation deadline: 2022 However, many parts of the recommendations are fully functional todayWednesday, January 30, 13
  13. 13. Web Tech History 1991 HTML 1999 HTML4 1995 HTML2 2000 XHTML1 1996 CSS1 + 2002 Tableless Web JavaScript Design 1997 HTML3.2 2005 Ajax 1998 CSS2 2009 HTML5Wednesday, January 30, 13
  14. 14. HTML5 VisionWednesday, January 30, 13
  15. 15. Paving The Cow Path The WHATWG took the time to understand what everyone does, analyzed good practices and standardized them This leads to evolution and not revolutionWednesday, January 30, 13
  16. 16. Utility Over Purity HTML5 is overwhelmingly practical, allowing many code that used to be invalid and making developers lives easier Less code, less headaches, more fun.Wednesday, January 30, 13
  17. 17. Content & Presentation HTML5 deprecates many old presentational elements in favor of CSS. Enhancements in CSS3 selectors enable better separation between content and presentationWednesday, January 30, 13
  18. 18. Plugin Free Paradigm Provide native APIs for everything that used to required a proprietary plugin Flash is no longer mandatoryWednesday, January 30, 13
  19. 19. HTML5 Vision Paving The Cow Path Utility over Purity Separation of Content and Presentation Plugin FreeWednesday, January 30, 13
  20. 20. Q&A http://www.flickr.com/photos/92163630@N00/95509221/Wednesday, January 30, 13
  21. 21. The RulesWednesday, January 30, 13
  22. 22. Doctype Remove old clutter from the doctype declaration For an HTML5 page, use: <!DOCTYPE html> MIME Type: text/htmlWednesday, January 30, 13
  23. 23. Character Encoding Remove old clutter from encoding definitions Use: <meta charset=”UTF-8”> Note no need to close meta tags Can also use the old syntaxWednesday, January 30, 13
  24. 24. Tag Fun No need to close void elements both <br /> and <br> are valid HTML Validator: http://validator.w3.org/Wednesday, January 30, 13
  25. 25. HTML5 New Features New Syntactic Elements New Semantic Elements New APIsWednesday, January 30, 13
  26. 26. HTML5 Semantics WHATWG analyzed and learned the uses of <div> elements in many web sites They have found a few common usages HTML5 includes specialized elements for these common usages Can still use a <div>Wednesday, January 30, 13
  27. 27. Semantic Elements header: header content footer: footer content section: a section of articles article: articles are arranged inside sections aside: related content nav: navigational elementWednesday, January 30, 13
  28. 28. New APIs Web Storage Geolocation Web SQL Device Orientation Application Cache Forms Web Workers Audio & Video Web Sockets Canvas Desktop Notifications Web GL Drag & Drop History API File System API And More...Wednesday, January 30, 13
  29. 29. HTML Polyfills Replacement library for older browsers Make a smooth switch to HTML5 http://www.flickr.com/photos/tuba/2424237036/Wednesday, January 30, 13
  30. 30. HTML5 Tools HTML5 Boilerplate. A base HTML5 template with backward compatibility and feature detection Modernizr. A feature detection js library Polyfills: https://github.com/Modernizr/Modernizr/wiki/ HTML5-Cross-browser-PolyfillsWednesday, January 30, 13
  31. 31. Demo: HTML Boilerplate Page Structure Best practices Feature DetectionWednesday, January 30, 13
  32. 32. HTML5 IDEs WebStorm Komodo Edit Eclipse / Visual Studio gVim Aptana StudioWednesday, January 30, 13
  33. 33. HTML5 Lab Build a home page for your resume in HTML5 with no styling Describe your job history, hobbies and education Use the boilerplate and semantic elements Bonus: Add some CSS StylingWednesday, January 30, 13

×