An Introduction to HTML5

An Introduction to HTML5
Minnebar 2009
Mike Bollinger

What is HTML5?

(Well, not yet.)

(Someday.)

(If we’re lucky.)

(Yes, it does.)

Today
What is new in HTML5?
What can I start using now?
What’s good, what’s bad?

What’s New
Structure & Semantics
New APIs

What’s New
APIs
--
NOT in Spec
APIs
--
HTML5 Spec

CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio
IE Support: http://excanvas.sourceforge.net

<ul>
<lidraggable></li>
<lidraggable></li>
</ul>
IE – Firefox 3.5 – Safari 4

Across domains
All the latest browsers

<html manifest=“cache.manifest”>
Firefox (kinda) – Safari (kinda)
(Kinda useless)

What’s New
APIs
--
NOT in Spec
APIs
--
HTML5 Spec

GeolocationLocal StoragePush EventsWorkers
Firefox 3.5 – Safari (iPhone only) – Opera (soon)
Not always accurate

Session Storage
Local Storage
Web Database Storage
Safari – IE – Firefox

What’s New
APIs
--
NOT in Spec
APIs
--
HTML5 Spec

DoctypeStructural ElementsWeb Forms
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML
text/html
XML
application/xhtml+xml

Layout<header> <footer> <nav> <section>
<article> <aside>
Inline<time> <details> <figure> <mark>
Interactive<audio> <video> <canvas>

header, footer, nav, section, article {
display: block;
}
document.createElement(‘header’);
document.createElement(‘footer’);
…

autofocus
required
type=email
type=url
type=date
type=number

www.livefront.com/html5

What HTML5 Means
For Users
Consistency
Faster & Lighter
For Developers
Faster development
Simpler development
More opportunities for creativity

</presentation>
Email: mike@livefront.com
Twitter: @mikebollinger
Website: www.livefront.com
Demo: www.livefront.com/html5
Mike Bollinger

An Introduction to HTML5

by Livefront on Nov 23, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 6

Statistics

An Introduction to HTML5 — Presentation Transcript