"Tales from the development trenches": my talk about development of HTML5 and developing with HTML5, including new intelligent forms, canvas and open video.

1. [email_address] , http://dev.opera.com www.brucelawson.co.uk twitter.com/brucel

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

4. Norwegian! (But I'm from the UK)

5. </plug>

7. Tales of developing with HTML5

8. A journey through tyme and spayce

10. XHTML 2 <img>

11. XHTML 2 <img>

13. Then Mozilla (Apple “cheering from sidelines”)

14. WHATWG

15. (Later: Google, Microsoft involved)

17. 2009: XHTML2 killed

18. 2010 WHAT-WG goes to last call

19. Not yet completed, but getting there

20. Giant spec (900pp)

21. Already some implementations of some parts

22. HTML5

23. Evolution of HTML: monkey on left becomes human in 4 stages THIS IS A TITLW THIS IS A DESCRIPTION

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

25. HT M L5 “ ... 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

26. Why do Open Standards matter? The most important program on your computer is your Web Browser.

27. Your web browser Helps you search for information (Google, Yahoo!)

28. Your web browser Lets you be social with friends (Facebook, Friendster, Twitter)

29. Your web browser Lets you write boring work documents (Office online, Google Docs)

30. I email my girlfriend Picture credit: : http://en.wikipedia.org/wiki/Angelina_jolie

31. Theresa goes shopping

32. </soapbox>

33. What people really want to do 1 footer 2 content 3 header 4 logo 5 container 6 main 8 menu 11 search 12 nav 13 wrapper 14 top 17 sidebar 19 banner 20 navigation http://devfiles.myopera.com/articles/572/idlist-url.htm

34. More semantics for structure

36. <footer> is sometimes role=”contentinfo”

37. <nav> is usually role=”menu”

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

39. Draggable attribute matches aria-draggable

40. Validator.nu validates ARIA and HTML 5 Hixie: “ When there’s a built-in way to do something, using that is the simplest and most reliable solution. ” Me: “ Do both, for now ”

41. HTML5 forms (“Webforms 2”) Coding form validation isn't much fun

42. Validate an email address <script language = &quot;Javascript&quot;> function echeck(str) { var at=&quot;@&quot; var dot=&quot;.&quot; var lat=str.indexOf(at) var lstr=str.length var ldot=str.indexOf(dot) if (str.indexOf(at)==-1){ alert(&quot;Invalid E-mail ID&quot;) return false } if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){ alert(&quot;Invalid E-mail ID&quot;) return false } if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){ alert(&quot;Invalid E-mail ID&quot;) return false } if (str.indexOf(at,(lat+1))!=-1){ alert(&quot;Invalid E-mail ID&quot;) return false } if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){ alert(&quot;Invalid E-mail ID&quot;) return false } if (str.indexOf(dot,(lat+2))==-1){ alert(&quot;Invalid E-mail ID&quot;) return false } if (str.indexOf(&quot; &quot;)!=-1){ alert(&quot;Invalid E-mail ID&quot;) return false } return true } function ValidateForm(){ var emailID=document.frmSample.txtEmail if ((emailID.value==null)||(emailID.value==&quot;&quot;)){ alert(&quot;Please Enter your Email ID&quot;) emailID.focus() return false } if (echeck(emailID.value)==false){ emailID.value=&quot;&quot; emailID.focus() return false } return true } </script>

44. Controls look the same across sites, so better UX

45. Built-in validation

46. Less to download Demonstration

47. HTML5 forms (“Webforms 2”) For a happy life of love, laughter and liquor

48. HTML5 forms (“Webforms 2”) … or TRIPLE your money back!!!

49. HTML5 forms (“Webforms 2”) Image: http://www.flickr.com/photos/figgenhoffer/3662160468/

50. Canvas Immediate graphics mode without plugins Retro-specced, hence accessibility concerns Native support in Opera, Safari, Firefox and Chrome Demonstration

51. What does this code do? <object width=&quot;425&quot; height=&quot;344&quot;> <param name=&quot;movie&quot; value=&quot;http://www.example.com/v/LtfQg4KkR88&hl=en&fs=1&quot;></param> <param name=&quot;allowFullScreen&quot; value=&quot;true&quot;></param> <embed src=&quot;http://www.example.com/v/LtfQg4KkR88&hl=en&fs=1&quot; type=&quot;application/x-shockwave-flash&quot; allowfullscreen=&quot;true&quot; width=&quot;425&quot; height=&quot;344&quot;></embed> </object>

52. HTML5 video Anne van Kesteren, 2007: “ Opera has some internal experimental builds with an implementation of a <video> 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 <object> except that it has special <video> semantics much like <img> has image semantics.”

53. Video (future) <video src=video.ogv> </video>

54. Video (future)

55. Video (future)

56. Video (future)

58. Is sometimes an ugly kludge

59. Can be serialised as XML: XHTML5

60. Defines HTML error-handling to keep consistent DOM

61. Adds new elements and APIs for open standard apps

62. Is coming soon, to a browser near you

63. Thank you Vegas Austin

64. Introduci Bruce Lawson, Remy Sharp, July 2010 New Riders