HTML5

sixmileugliestInternet και Εφαρμογές Web

24 Ιουν 2012 (πριν από 4 χρόνια και 11 μήνες)

317 εμφανίσεις

HTML5
Pete Freitag, Foundeo Inc.
www.petefreitag.com
Monday, January 10, 2011
HTML5

Work Started in 2004

Gaining adoption as browsers support it
Monday, January 10, 2011
HTML5 Support
0
22.5
45
67.5
90
IE8
FF3.6
Saf5.0
O10.6
Chr5
HTML5 % of Features Supported
source: caniuse.com
Monday, January 10, 2011
What’s New

Layout / Semantic Tags

Form Controls

Multimedia Support

Drawing API’s

Storage API’s
Monday, January 10, 2011
HTML5 Not Just Tags

HTML Consists of much more than new
tags and attributes

Also defines new JavaScript API’s
Monday, January 10, 2011
HTML5 DocType
Monday, January 10, 2011
HTML5 DocType

!doctype html

Puts Older browsers into standards
mode.

So you can use it now
Monday, January 10, 2011
Semantic Tags

Researchers found that some of the most
common classes or id’s placed on div are:

header

footer

nav

article

section
Monday, January 10, 2011
HTML5 Semantic Tags

header ... /header

nav ... /nav

article ... /article

section ... /section

footer ... /footer
Monday, January 10, 2011
HTML5 Semantic Tags

Can be styled with CSS on older browsers,
with one exception...

Can you guess which browser?
Monday, January 10, 2011
!--[if IE]

!--[if IE] to the rescue once again:

http://remysharp.com/2009/01/07/html5-
enabling-script/
Monday, January 10, 2011
Additional New Tags

aside

hgroup

figure

figcaption
Monday, January 10, 2011
Form Controls

HTML5 Defines new input typevalues
Monday, January 10, 2011
New Input Types

Search

Telephone

URL

Email

Date / Time
Monday, January 10, 2011
New Input Attributes

min

max

multiple (upload multiple files)

step

placeholder

autocomplete

pattern
Monday, January 10, 2011
Video
video
source src”video.mp4” /
source src”video.ogv” /
Browser Does not support video tag.
/video
video src”video.mp4” /
OR
Monday, January 10, 2011
Audio
audio
source src”tunes.mp3” /
source src”tunes.ogg” /
Browser Doesn’t Support Audio Tag
/audio
audio src”tunes.mp3” /
OR
Monday, January 10, 2011
Common Media
Attributes

controls

autoplay

preload

loop
Monday, January 10, 2011
Drawing API’s

canvas tag is used to mark a drawing
area on the page.

You can then draw 2d or 3d using
JavaScript.

Demo
Monday, January 10, 2011
Storage API’s

sessionStorage

Store data for a Single Window

sessionStorage.setItem(‘key’, ‘value’);
Monday, January 10, 2011
Storage API’s

globalStorage - Store across sessions

globalStorage[“example.com”].key  val;
Monday, January 10, 2011
Storage API’s

SQL Databases

Transactional SQL Database

Current implementations use sqlite
Monday, January 10, 2011
There’s even more

Geo Location API

Cross Document Messaging

Web Sockets

Web Workers

Much More
Monday, January 10, 2011
Links

Browser Support

http://caniuse.com
/

HTML5 Presentations

http://www.addyosmani.com/html5/

http://slides.html5rocks.com
/

http://slidesix.com/view/html5
Monday, January 10, 2011
Questions?
Thanks.
Monday, January 10, 2011