Moving To HTML5

HTML5 Introduction Ynon Perek Monday, January 2, 2012

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

In The Beginning While working at CERN in the 90s,
Berners-Lee develops WWW 1991 The ﬁrst web site (CERN’s info page) 1994 Berners-Lee founded the W3C http://www.ﬂickr.com/photos/tanaka/3212373419/ Monday, January 2, 2012

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

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

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

1999 HTML4 Browser war was over. MS won Many new
elements, including iframe, label, legend, object Deprecated: applet, center, font, menu, strike http://www.ﬂickr.com/photos/daniello/422213306/ Monday, January 2, 2012

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

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

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

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

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

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

HTML5 Vision Monday, January 2, 2012

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

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

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

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

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

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

The Rules Monday, January 2, 2012

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

Character Encoding Remove old clutter from encoding deﬁnitions Use: <meta
charset=”UTF-8”> Note no need to close meta tags Can also use the old syntax Monday, January 2, 2012

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

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

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

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

Semantic Element Monday, January 2, 2012

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

HTML Polyﬁlls Replacement library for older browsers Make a smooth
switch to HTML5 http://www.ﬂickr.com/photos/tuba/2424237036/ Monday, January 2, 2012

HTML5 Tools HTML5 Boilerplate. A base HTML5 template with backward
compatibility and feature detection Modernizr. A feature detection js library Polyﬁlls: https://github.com/Modernizr/Modernizr/wiki/ HTML5-Cross-browser-Polyﬁlls Monday, January 2, 2012

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

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

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

Moving To HTML5

Moving To HTML5

More Decks by ynonperek

Other Decks in Technology

Featured

Transcript