View
1.500
Download
0
Category
Tags:
Preview:
DESCRIPTION
An overview of HTML5
Citation preview
HTML5 IntroductionYnon Perek
Wednesday, January 30, 13
Agenda
HTML History
HTML5 Rules
New Features
Browser Support
HTML5 Page Structure
Wednesday, January 30, 13
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
1991 HTML1
Described in a document called “HTML Tags”
Included 20 elements
Influenced by SGML
Wednesday, January 30, 13
1995 HTML2
One year after Netscape was founded
Forms
Tables
Image Maps
http://www.flickr.com/photos/kalleboo/2214787531/
Wednesday, January 30, 13
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
Wednesday, January 30, 13
1999 HTML4Browser 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
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
HTML4Suitable for web sites, not web applications
Wednesday, January 30, 13
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
Wednesday, January 30, 13
2009 HTML5
No more XHTML
Many new elements
Web Application Oriented
Wednesday, January 30, 13
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
Wednesday, January 30, 13
Web Tech History1991 HTML
1995 HTML2
1996 CSS1 + JavaScript
1997 HTML3.2
1998 CSS2
1999 HTML4
2000 XHTML1
2002 Tableless Web Design
2005 Ajax
2009 HTML5
Wednesday, January 30, 13
HTML5 Vision
Wednesday, January 30, 13
Paving The Cow PathThe WHATWG took the time to understand what everyone does, analyzed good practices and standardized them
This leads to evolution and not revolution
Wednesday, January 30, 13
Utility Over PurityHTML5 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
Content & PresentationHTML5 deprecates many old presentational elements in favor of CSS.
Enhancements in CSS3 selectors enable better separation between content and presentation
Wednesday, January 30, 13
Plugin Free ParadigmProvide native APIs for everything that used to required a proprietary plugin
Flash is no longer mandatory
Wednesday, January 30, 13
Paving The Cow Path
Utility over Purity
Separation of Content and Presentation
Plugin Free
HTML5 Vision
Wednesday, January 30, 13
Q & A
http://www.flickr.com/photos/92163630@N00/95509221/
Wednesday, January 30, 13
The Rules
Wednesday, January 30, 13
Doctype
Remove old clutter from the doctype declaration
For an HTML5 page, use:<!DOCTYPE html>
MIME Type: text/html
Wednesday, January 30, 13
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 syntax
Wednesday, January 30, 13
Tag Fun
No need to close void elements
both <br /> and <br> are valid
HTML Validator: http://validator.w3.org/
Wednesday, January 30, 13
HTML5 New Features
New Syntactic Elements
New Semantic Elements
New APIs
Wednesday, January 30, 13
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
Semantic Elementsheader: header content
footer: footer content
section: a section of articles
article: articles are arranged inside sections
aside: related content
nav: navigational element
Wednesday, January 30, 13
New APIsWeb 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...
Wednesday, January 30, 13
HTML PolyfillsReplacement library for older browsersMake a smooth switch to HTML5
http://www.flickr.com/photos/tuba/2424237036/
Wednesday, January 30, 13
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
Wednesday, January 30, 13
Demo: HTML Boilerplate
Page Structure
Best practices
Feature Detection
Wednesday, January 30, 13
HTML5 IDEs
WebStorm
Komodo Edit
Eclipse / Visual Studio
gVim
Aptana Studio
Wednesday, January 30, 13
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
Wednesday, January 30, 13
Recommended