html5 intro
DESCRIPTION
An overview of HTML5TRANSCRIPT
![Page 1: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/1.jpg)
HTML5 IntroductionYnon Perek
Wednesday, January 30, 13
![Page 2: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/2.jpg)
Agenda
HTML History
HTML5 Rules
New Features
Browser Support
HTML5 Page Structure
Wednesday, January 30, 13
![Page 3: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/3.jpg)
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
![Page 4: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/4.jpg)
1991 HTML1
Described in a document called “HTML Tags”
Included 20 elements
Influenced by SGML
Wednesday, January 30, 13
![Page 5: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/5.jpg)
1995 HTML2
One year after Netscape was founded
Forms
Tables
Image Maps
http://www.flickr.com/photos/kalleboo/2214787531/
Wednesday, January 30, 13
![Page 6: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/6.jpg)
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
![Page 7: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/7.jpg)
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
![Page 8: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/8.jpg)
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
![Page 9: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/9.jpg)
HTML4Suitable for web sites, not web applications
Wednesday, January 30, 13
![Page 10: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/10.jpg)
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
![Page 11: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/11.jpg)
2009 HTML5
No more XHTML
Many new elements
Web Application Oriented
Wednesday, January 30, 13
![Page 12: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/12.jpg)
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
![Page 13: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/13.jpg)
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
![Page 14: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/14.jpg)
HTML5 Vision
Wednesday, January 30, 13
![Page 15: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/15.jpg)
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
![Page 16: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/16.jpg)
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
![Page 17: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/17.jpg)
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
![Page 18: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/18.jpg)
Plugin Free ParadigmProvide native APIs for everything that used to required a proprietary plugin
Flash is no longer mandatory
Wednesday, January 30, 13
![Page 19: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/19.jpg)
Paving The Cow Path
Utility over Purity
Separation of Content and Presentation
Plugin Free
HTML5 Vision
Wednesday, January 30, 13
![Page 20: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/20.jpg)
Q & A
http://www.flickr.com/photos/92163630@N00/95509221/
Wednesday, January 30, 13
![Page 21: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/21.jpg)
The Rules
Wednesday, January 30, 13
![Page 22: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/22.jpg)
Doctype
Remove old clutter from the doctype declaration
For an HTML5 page, use:<!DOCTYPE html>
MIME Type: text/html
Wednesday, January 30, 13
![Page 23: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/23.jpg)
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
![Page 24: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/24.jpg)
Tag Fun
No need to close void elements
both <br /> and <br> are valid
HTML Validator: http://validator.w3.org/
Wednesday, January 30, 13
![Page 25: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/25.jpg)
HTML5 New Features
New Syntactic Elements
New Semantic Elements
New APIs
Wednesday, January 30, 13
![Page 26: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/26.jpg)
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
![Page 27: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/27.jpg)
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
![Page 28: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/28.jpg)
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
![Page 29: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/29.jpg)
HTML PolyfillsReplacement library for older browsersMake a smooth switch to HTML5
http://www.flickr.com/photos/tuba/2424237036/
Wednesday, January 30, 13
![Page 30: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/30.jpg)
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
![Page 31: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/31.jpg)
Demo: HTML Boilerplate
Page Structure
Best practices
Feature Detection
Wednesday, January 30, 13
![Page 32: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/32.jpg)
HTML5 IDEs
WebStorm
Komodo Edit
Eclipse / Visual Studio
gVim
Aptana Studio
Wednesday, January 30, 13
![Page 33: Html5 intro](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54b72fd94a795916198b48fd/html5/thumbnails/33.jpg)
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