Tweet
Tweet

Slide 1

Slide 1 text

HTML5: sprinkling magical pixie dust wherever it goes Bruce Lawson Opera

Slide 2

Slide 2 text

www.speakerdeck.com/u/brucel/p/eseconf-zurich brucel@opera.com www.brucelawson.co.uk @brucel

Slide 3

Slide 3 text

HTML5 makes your site better

Slide 4

Slide 4 text

If your site is unusable, or an organisational vanity project rather than serving customers, HTML5 won't change that

Slide 5

Slide 5 text

HTML5 is about mobile

Slide 6

Slide 6 text

HTML5 is not just about mobile “Features should be designed for universal access. ... Features should, when possible, work across different platforms, devices, and media.” dev.w3.org/html5/html-design-principles/

Slide 7

Slide 7 text

Analyst nonsense (with spurious statistics!) “While most new mobile browsers support HTML5, some older browsers still don’t.” “By 2016, more than 2.1 billion mobile devices will have HTML5 browsers, up from just 109 million in 2010.” articles.businessinsider.com/2012-03-29/tech/31253432_1_mobile-experience-mobile-developers- mobile-devices www.totaltele.com/view.aspx?ID=466497

Slide 8

Slide 8 text

HTML5 isn't “ready” .. but that doesn't matter

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Interoperability

Slide 11

Slide 11 text

Thank you @mamipeko http://d.hatena.ne.jp/Mamipeko/

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

© Copyright 2004-2010 Apple Computer, Inc., Mozilla Foundation, and Opera Software ASA. You are granted a license to use, reproduce and create derivative works of this document. http://www.whatwg.org/specs/web-apps/current-work/

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

HTML5 does not replace HTML 4.01

Slide 18

Slide 18 text

HTML5 has more bling!

Slide 19

Slide 19 text

“...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, Editor of HTML5 lists.w3.org/Archives/Public/public-html/2009Jan/0215.html

Slide 20

Slide 20 text

Webforms – more powerful form elements

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

standardise commonly-used rich form elements – without JavaScript

Slide 23

Slide 23 text

built-in validation (of course you should still validate on the server) http://people.opera.com/brucel/demo/html5-forms-demo.html

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Fewer clicks, thanks HTML5!

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Must encode videos twice (thanks Apple and Microsoft!)

Slide 29

Slide 29 text

storage

Slide 30

Slide 30 text

localStorage/sessionStorage like cookies... document.cookie = 'key=value; expires=Thu, 15 Feb 2010 23:59:59 UTC; path=/' … /* convoluted string operations go here … */

Slide 31

Slide 31 text

localStorage/sessionStorage like cookies...on steroids! localStorage.setItem(key, value); localStorage.getItem(key); localStorage.clear(); localStorage.key = value; if (localStorage.key == '…') { … } …

Slide 32

Slide 32 text

Web Database – full relational DB / SQL var db = openDatabase(dbName, version, displayName, expectedSize); db.transaction(function(tx) { tx.executeSql(sqlStatement, [], function (tx, result) { /* do something with the results */ }); });

Slide 33

Slide 33 text

Web Database – full relational DB / SQL var db = openDatabase(dbName, version, displayName, expectedSize); db.transaction(function(tx) { tx.executeSql(sqlStatement, [], function (tx, result) { /* do something with the results */ }); });

Slide 34

Slide 34 text

offline support

Slide 35

Slide 35 text

application cache

Slide 36

Slide 36 text

is it all safe to use, right now?

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

feature-detection progressive enhancement, graceful degradation http://diveinto.html5doctor.com/everything.html

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

http://modernizr.com/ http://yepnopejs.com/ http://net.tutsplus.com/tutorials/javascript-ajax/easy-script-loading-with-yepnope-js/

Slide 42

Slide 42 text

NEWT New Exciting Web Technologies

Slide 43

Slide 43 text

WebGL JavaScript-generated 3D graphics without plug-ins.

Slide 44

Slide 44 text

Geolocation JavaScript API to get device's latitude and longditude, with user permission. Device Orientation Events: information about the physical orientation and motion of a hosting device.

Slide 45

Slide 45 text

Web Sockets, Server-Sent Events Web Sockets – a 2-way connection to server that ends wasteful polling and minimises bandwidth-hogging headers. Think chat / multi-player games. Server-Sent Events allow you to push information to the browser without polling. Think latest headlines/ stock prices.

Slide 46

Slide 46 text

Responsive Web Design

Slide 47

Slide 47 text

getUserMedia http://my.opera.com/desktopteam/blog/2012/04/17/camera-getusermedia-support

Slide 48

Slide 48 text

WebRTC WebRTC is a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple Javascript APIs. The WebRTC components have been optimized to best serve this purpose. The WebRTC initiative is a project supported by Google, Mozilla and Opera. http://sites.google.com/site/webrtc/ http://www.whatwg.org/specs/web-apps/current-work/complete/video-conferencing- and-peer-to-peer-communication.html

Slide 49

Slide 49 text

Native or HTML5? ● HTML is the Web, so works anywhere JavaScript runs (with polyfills for old browsers) ● HTML is simple to distribute and update – just a URL ● Native allows you access to more device capabilities (for now) ● Native is a little faster (does that matter?) ● Native apps are easier to control/ monetise

Slide 50

Slide 50 text

“When we update the Facebook product we have to update about seven different versions. We have to update the website that runs on your PC, the iPhone app, the Android app, the Blackberry app, the mobile site and a number of other device-specific versions of Facebook. It's becoming a real engineering challenge for us, as well as other technology companies. Because of that, I think we're spending a lot of our time investing in HTML 5.” Bret Taylor, Facebook CTO http://www.bbc.co.uk/news/business-12406171

Slide 51

Slide 51 text

Golden Rules of HTML5 Development ● Code to the standard, not browsers ● Validate and test in desktop and mobile (use Opera Mobile Emulator and Opera Dragonfly) ● Start with a base of valid, accessible HTML and progressively enhance ● No browser-sniffing. Use feature detection. ● Use all vendor prefixes in your CSS

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Resources ● These slides http://speakerdeck.com/u/brucel/p/eseconf-zurich ● Browser support matrix www.caniuse.com ● Modernizr www.modernizr.com ● Polyfill collection https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills ● HTML5 Spec (Web Developer's View) http://developers.whatwg.org/ ● Articles: http://dev.opera.com/ ● Articles: http://html5doctor.com/ ● Mobile-friendly: The mobile web optimization guide http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/ ● Dragonfly, Opera Mobile Emulator http://www.opera.com/developer/tools/

Slide 54

Slide 54 text

Thanks Fairy – Lisa Meek larissameek.com/2008/08/11/fairy-dust-a-free-desktop-wallpaper/ Brian May's site guide http://www.brianmay.com/siteguide.html Fingernails - Mamipeko NEWT + Shield - Rob Winters, Mike Brennan, W3C