HTML5The new kid on the block

5 is the right version, here’s why

1 = 3

5 is the right version, here’s why

1 = 3

5 is the right version, here’s why

1 = 3

5 is the right version, here’s why

HTML5 - new standard for HTML, XHTML, and the HTML DOM

Rules for HTML5:

• Features based on HTML, CSS, DOM, JavaScript

• Reduce the need for external plugins

• Better error handling

• More markup to replace scripting

• Should be device independent

HTML5 - new standard for HTML, XHTML, and the HTML DOM

• Video and audio elements for media playback

• Support for local storage & cache

• The canvas element for drawing

• New semantic elements: header, footer, section, article, nav

• New form control tags: calendar, date, time, email, url, search

New features in HTML5

• CSS 3 Selectors

• CSS 3 Fonts

• CSS 3 Backgrounds and borders

• CSS 3 Text

• CSS 3 Multi column

CSS3 is about breaking CSS into modules

• Transitions - translate, rotate, scale, skew

• Animations

CSS3 features

• Transformations

• Transitions

• Animations

• Spinning wheel

• Typography

Examples

A little help from jQTouch

• Open source module for mobile web on the iPhone, iPad and other devices

• Created by @davidkaneda

• Maintained by @jonathanstark

• Free download from http://www.jqtouch.com

Demo

Sencha Touch - commercial product

• Allows you to develop mobile web apps that look and feel native on iPhone and Android touch devices

• Created by @senchainc

• More info http://www.sencha.com/products/touch/

Demo

Browser support

“All animals are equal”

Browser support

“All animals are equal”

Browser support

“All animals are equal”“But some animals are more equal than others”

George Orwell, Animal Farm

Browser support

Browser support

Chrome gives a hand to IE with Chrome Frame

Chrome gives a hand to IE with Chrome FrameIE9 will join the party

Browser support

So, when will we be ready to use all this?

Well, let me think...

So, when will we be ready to use all this?

Well, let me think... NOW

So, when will we be ready to use all this?

Well, let me think... NOW

So, when will we be ready to use all this?

Here is WHY and HOW

Everything goes mobile

iOS devices

iOS devices

iOS devices

Android devices

Android devices

Android devices

60,000 Android shipments a day

Mobile browsers

Mobile browsers

95% Webkit basediOS, Android, Blackberry, Palm, Samsung

Native vs Web

Native vs Web

Web is the winner

Web is the winner

• Easier to produce

• Easier to test

• Easier to distribute

• Most standardized

But how to use the webfor native applications?

PhoneGap to the rescue

• Open source development framework for building cross-platform mobile apps

• Developed and maintained by @nitobi

• Free download from http://www.phonegap.com

Build apps in HTML and JavaScript and still take advantage

of core features in mobile SDKs

• iPhone/iTouch

• iPad

• Google Android

• Palm

• Symbian

• Blackberry

Native vs Web+PhoneGap

More HTML5 examples

• Video

• Virtual reality

• Photo gallery

• Canvas in 3D

• Cloth

And some more

• Gift box

• 360

• Light table

• Wilderness downtown

Thanks!This presentation is brought to you by

• Open standards

• @font-face Casual

• @mborca