brucel@opera.com, http://dev.opera.com

www.brucelawson.co.uk twitter.com/brucel

Bullet point slide

Opera

Opera 10.50 the world's fastest browser

Opera Mini the world's most popular browser for mobile phones

Norwegian! (But I'm from the UK)

Bullet point slide

Bullet point slide

Tales from development trenches

Tales of the development of HTML5

Tales of developing with HTML5

Bullet point slide

A journey through tyme and spayce

Bullet point slide

1998

"In discussions, it was agreed that further extending HTML 4.0 would be difficult, as would converting 4.0 to be an XML application. The proposed way to break free of these restrictions is to make a fresh start with the next generation of HTML based upon a suite of XML tag-sets."

Dec 1999: HTML 4.01 Specification, W3C Recommendation

Bullet point slide

XHTML 2

Bullet point slide

XHTML 2

Bullet point slide

Web Applications 1.0

2003: Started by Opera

Then Mozilla (Apple cheering from sidelines)

WHATWG

(Later: Google, Microsoft involved)

Bullet point slide

HTML5

2006: W3C restarts HTML, using Web Applications 1.0 as a basis for HTML 5

2009: XHTML2 killed

2010 WHAT-WG goes to last call

Not yet completed, but getting there

Giant spec (900pp)

Already some implementations of some parts

Bullet point slide

HTML5

Bullet point slide

Evolution of HTML: monkey on left becomes human in 4 stages

THIS IS A TITLWTHIS IS A DESCRIPTIONBullet point slide

Evolution of HTML: 5th monkey (HTML5) is human but dressed in pimp clothing

Bullet point slide

HTML5

... extending the language to better support Web applications, since that is one of the directions the Web is going in and is one of the areas least well served by HTML so far.

This puts HTML in direct competition with other technologies intended for applications deployed over the Web, in particular Flash and Silverlight - Ian Hickson http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html

Bullet point slide

Why do Open Standards matter?

The most important program on your computer is your Web Browser.

Bullet point slide

Your web browser

Helps you search for information (Google, Yahoo!)

Bullet point slide

Your web browser

Lets you be social with friends (Facebook, Friendster, Twitter)

Bullet point slide

Your web browser

Lets you write boring work documents (Office online, Google Docs)

Bullet point slide

I email my girlfriend

Picture credit: : http://en.wikipedia.org/wiki/Angelina_jolie

Bullet point slide

Theresa goes shopping

Bullet point slide

Bullet point slide

What people really want to do

1footer 2content3header4logo5container6main8menu

11 search12 nav13 wrapper14 top17 sidebar19 banner20 navigation

http://devfiles.myopera.com/articles/572/idlist-url.htm

Bullet point slide

More semantics for structure

Bullet point slide

HTML 5/ ARIA overlaps

sometimes = role=banner

is sometimes role=contentinfo

is usually role=menu

In forms (next slide) required is aria-required=true

Draggable attribute matches aria-draggable

Validator.nu validates ARIA and HTML 5

Hixie: When theres a built-in way to do something, using that is the simplest and most reliable solution.

Me: Do both, for now

Bullet point slide

HTML5 forms (Webforms 2)

Coding form validation isn't much fun

Bullet point slide

Validate an email address

function echeck(str) {

var at="@"var dot="."var lat=str.indexOf(at)var lstr=str.lengthvar ldot=str.indexOf(dot)if (str.indexOf(at)==-1){ alert("Invalid E-mail ID") return false}

if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){ alert("Invalid E-mail ID") return false}

if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){ alert("Invalid E-mail ID") return false}

if (str.indexOf(at,(lat+1))!=-1){ alert("Invalid E-mail ID") return false }

if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){ alert("Invalid E-mail ID") return false }

if (str.indexOf(dot,(lat+2))==-1){ alert("Invalid E-mail ID") return false } if (str.indexOf(" ")!=-1){ alert("Invalid E-mail ID") return false }

return true}

function ValidateForm(){var emailID=document.frmSample.txtEmailif ((emailID.value==null)||(emailID.value=="")){alert("Please Enter your Email ID")emailID.focus()return false}if (echeck(emailID.value)==false){emailID.value=""emailID.focus()return false}return true }

Bullet point slide

HTML5 forms (Webforms 2)

Do what people want to do without scripting, so

Easier to write

Controls look the same across sites, so better UX

Built-in validation

Less to download

Demonstration

Bullet point slide

HTML5 forms (Webforms 2)

For a happy life of love, laughter and liquor

Bullet point slide

HTML5 forms (Webforms 2)

or TRIPLE your money back!!!

Bullet point slide

HTML5 forms (Webforms 2)

Image: http://www.flickr.com/photos/figgenhoffer/3662160468/

Bullet point slide

Canvas

Immediate graphics mode without plugins

Retro-specced, hence accessibility concerns

Native support in Opera, Safari, Firefox and Chrome

Demonstration

Bullet point slide

What does this code do?

Bullet point slide

HTML5 video

Anne van Kesteren, 2007:

Opera has some internal experimental builds with an implementation of a element. The element exposes a simple API (for the moment) much like the Audio() object: play(), pause(), stop(). The idea is that it works like except that it has special semantics much like has image semantics.

Bullet point slide

Video (future)

Bullet point slide

Video (future)

Bullet point slide

Video (future)

Bullet point slide

Video (future)

Bullet point slide

The take-homes

HTML5 doesn't break the Web

Is sometimes an ugly kludge

Can be serialised as XML: XHTML5

Defines HTML error-handling to keep consistent DOM

Adds new elements and APIs for open standard apps

Is coming soon, to a browser near you

Bullet point slide

Thank you Vegas Austin

Introduci

Bruce Lawson, Remy Sharp, July 2010 New Riders

03/18/10

03/18/10

The best Internet experience on any device