Slide 1

Slide 1 text

HTML5 Introduction Ynon Perek Monday, January 2, 2012

Slide 2

Slide 2 text

Agenda HTML History HTML5 Rules New Features Browser Support HTML5 Page Structure Monday, January 2, 2012

Slide 3

Slide 3 text

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/ Monday, January 2, 2012

Slide 4

Slide 4 text

1991 HTML1 Described in a document called “HTML Tags” Included 20 elements Influenced by SGML Monday, January 2, 2012

Slide 5

Slide 5 text

1995 HTML2 One year after Netscape was founded Forms Tables Image Maps http://www.flickr.com/photos/kalleboo/2214787531/ Monday, January 2, 2012

Slide 6

Slide 6 text

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.svg Monday, January 2, 2012

Slide 7

Slide 7 text

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/ Monday, January 2, 2012

Slide 8

Slide 8 text

After The Browser Wars W3C starts to work on XHTML, MathML, SVG and others XML based technologies HTML is considered “finished” Monday, January 2, 2012

Slide 9

Slide 9 text

HTML4 Suitable for web sites, not web applications Monday, January 2, 2012

Slide 10

Slide 10 text

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 HTML5 Monday, January 2, 2012

Slide 11

Slide 11 text

2009 HTML5 No more XHTML Many new elements Web Application Oriented Monday, January 2, 2012

Slide 12

Slide 12 text

State of HTML5 Still In Draft Candidate Recommendations stage during 2012 W3C Recommendation deadline: 2022 However, many parts of the recommendations are fully functional today Monday, January 2, 2012

Slide 13

Slide 13 text

Web Tech History 1991 HTML 1995 HTML2 1996 CSS1 + JavaScript 1997 HTML3.2 1998 CSS2 1999 HTML4 2000 XHTML1 2002 Tableless Web Design 2005 Ajax 2009 HTML5 Monday, January 2, 2012

Slide 14

Slide 14 text

HTML5 Vision Monday, January 2, 2012

Slide 15

Slide 15 text

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 revolution Monday, January 2, 2012

Slide 16

Slide 16 text

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. Monday, January 2, 2012

Slide 17

Slide 17 text

Content & Presentation HTML5 deprecates many old presentational elements in favor of CSS. Enhancements in CSS3 selectors enable better separation between content and presentation Monday, January 2, 2012

Slide 18

Slide 18 text

Plugin Free Paradigm Provide native APIs for everything that used to required a proprietary plugin Flash is no longer mandatory Monday, January 2, 2012

Slide 19

Slide 19 text

Paving The Cow Path Utility over Purity Separation of Content and Presentation Plugin Free HTML5 Vision Monday, January 2, 2012

Slide 20

Slide 20 text

Q & A http://www.flickr.com/photos/92163630@N00/95509221/ Monday, January 2, 2012

Slide 21

Slide 21 text

The Rules Monday, January 2, 2012

Slide 22

Slide 22 text

Doctype Remove old clutter from the doctype declaration For an HTML5 page, use: MIME Type: text/html Monday, January 2, 2012

Slide 23

Slide 23 text

Character Encoding Remove old clutter from encoding definitions Use: Note no need to close meta tags Can also use the old syntax Monday, January 2, 2012

Slide 24

Slide 24 text

Tag Fun No need to close void elements both
and
are valid HTML Validator: http://validator.w3.org/ Monday, January 2, 2012

Slide 25

Slide 25 text

HTML5 New Features New Syntactic Elements New Semantic Elements New APIs Monday, January 2, 2012

Slide 26

Slide 26 text

HTML5 Semantics WHATWG analyzed and learned the uses of
elements in many web sites They have found a few common usages HTML5 includes specialized elements for these common usages Can still use a
Monday, January 2, 2012

Slide 27

Slide 27 text

Semantic Elements header: header content footer: footer content section: a section of articles article: articles are arranged inside sections aside: related content nav: navigational element Monday, January 2, 2012

Slide 28

Slide 28 text

Semantic Element Monday, January 2, 2012

Slide 29

Slide 29 text

New APIs Web Storage Web SQL Application Cache Web Workers Web Sockets Desktop Notifications Drag & Drop File System API Geolocation Device Orientation Forms Audio & Video Canvas Web GL History API And More... Monday, January 2, 2012

Slide 30

Slide 30 text

HTML Polyfills Replacement library for older browsers Make a smooth switch to HTML5 http://www.flickr.com/photos/tuba/2424237036/ Monday, January 2, 2012

Slide 31

Slide 31 text

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-Polyfills Monday, January 2, 2012

Slide 32

Slide 32 text

Demo: HTML Boilerplate Page Structure Best practices Feature Detection Monday, January 2, 2012

Slide 33

Slide 33 text

HTML5 IDEs Komodo Edit Eclipse / Visual Studio gVim Aptana Studio Monday, January 2, 2012

Slide 34

Slide 34 text

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 Styling Monday, January 2, 2012