HTML5 for developers

MarkXA.com

HTML5 for developers

Mark Allan

MarkXA.com

MarkXA.com

What we’ll be covering

An overview of what HTML5 actually is

The main features and a few demos

Emphasis on what’s of interest to

developers rather than designers

When you can use it (and how much of it)

Other caveats

Windows 8

MarkXA.com

What is HTML5?

Usually a catch-all term for the next

generation of web client technologies.

• HTML5

• CSS3

• JavaScript APIs

MarkXA.com

HTML5 Semantics - Structure

Tags for document structure,

semantic versions of <div>

and <span>:

• <header>, <footer>, <nav>

• <section>, <article>

• <hgroup>, <aside>

• <time>, <mark>

Used for document outlining,

syndication and accessibility

MarkXA.com

HTML5 Semantics - Forms

New input tags for• Date/time

• Colour

• Numbers

• Ranges

• Email addresses

• URLs

• Telephone numbers

• Searches

Validation, autofocus, watermarks

MarkXA.com

HTML5 Multimedia

<video>

<audio>

Multiple codecs

Only limited control

No DRM yet

MarkXA.com

HTML5 Graphics & Effects

<canvas> - 2D bitmaps

<canvas> - 3D with WebGL

<svg> – 2D vectors

MarkXA.com

CSS3

Media queries

Transitions, transforms and animations

Web Fonts

Gradients

Flexible box model

Columns

etc…

MarkXA.com

HTML5 Offline & Storage

Offline access and events

File API

Local storage

Session storage

IndexedDB

Web Database (SQL)

MarkXA.com

HTML5 Connectivity

Web sockets

Server-sent events

MarkXA.com

HTML5 Device Access

Geolocation API widely

supported

Also proposals and

implementations for

• Accelerometer

• Microphone

• Camera

• etc…

MarkXA.com

HTML5 Performance & Integration

Web Workers

XMLHttpRequest 2

• Cross-origin requests

• Progress updates

• Timeouts

• Binary streams

Drag and drop

Notifications (toast)

MarkXA.com

How much HTML5 can we use?

Current FutureIE 9.0: 54% 10.0: 80%Firefox 7.0: 87% 8.0: 88%Safari 5.1: 77% 6.0: 78%Chrome 14.0: 90% 15.0: 90%Opera 11.5: 71% 12.0: 76%iOS 4.3: 63% 5.0: 68%Android 2.3: 52% 3.0: 69%

MarkXA.com

Problems

For general use, need Modernizr and

polyfills

Security becomes harder

Offline brings sync problems

Spec is still fluid

Device performance varies

MarkXA.com

Windows 8

Uses IE10 with hardware accelerated

rendering

Extra layout options (grid submitted to

W3C)

Access to WinRT

But doesn’t carry over to the web

MarkXA.com

Conclusions

HTML5 allows you to build powerful apps

If you have to write for everyone, it’s still

hard

But if you know exactly who you’re

targeting, you can get native-quality

experience

MarkXA.com

Questions?