HTML5 and mobile: Mobile Academy at Apps World

Slide 1

Slide 1 text

HTML5 and mobile Bruce Lawson, Opera Software

Slide 2

Slide 2 text

350 million active users dev.opera.com opera.com/smw

Slide 3

Slide 3 text

Myths and Legends about HTML5

Slide 4

Slide 4 text

Pah! Native already won “I think the biggest mistake that we made, as a company, is betting too much on HTML5 as opposed to native… because it just wasn’t there” Mark Zuckerberg

Slide 5

Slide 5 text

On the other hand… “I’m actually, on long-term, really excited about [html5]. One of the things that’s interesting is we actually have more people on a daily basis using mobile Web Facebook than we have using our iOS or Android apps combined. So mobile Web is a big thing for us.” Mark Zuckerberg

Slide 6

Slide 6 text

Failure of execution or strategy? “zuck should've built his mobile app in html rendered from php, with 40+ blocking script tags. oh wait, they did.” @brianleroux

Slide 7

Slide 7 text

HTML5 makes your site better

Slide 8

Slide 8 text

HTML5 is about mobile

Slide 9

Slide 9 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 10

Slide 10 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 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Interoperability

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 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 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

HTML5 does not replace HTML 4.01

Slide 21

Slide 21 text

HTML5 has more bling!

Slide 22

Slide 22 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 23

Slide 23 text

Webforms – more powerful form elements

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

standardise commonly-used rich form elements – without JavaScript

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Fewer clicks, thanks HTML5!

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Must encode videos twice (thanks Apple and Microsoft!)

Slide 32

Slide 32 text

storage

Slide 33

Slide 33 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 34

Slide 34 text

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

Slide 35

Slide 35 text

IndexedDB – domain's database in browser //Define a person var person = { name:name, email:email, created:new Date() } //Perform the add var request = store.add(person,1);

Slide 36

Slide 36 text

Appcache

Slide 37

Slide 37 text

Image: @jaffathecake See http://www.alistapart.com/articles/application- cache-is-a-douchebag/

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

navigator.registerServiceWorker("/*","/assets/v1/ctrl.js"). then( function(serviceWorker) { console.log("success!"); // window.location.reload() }, function(why) { console.error("Installing failed!:", why); });

Slide 40

Slide 40 text

is it all safe to use, right now?

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

caniuse.com

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

https://github.com/Modernizr/Modernizr/wiki/HTML5- Cross-Browser-Polyfills

Slide 48

Slide 48 text

NEWT New Exciting Web Technologies

Slide 49

Slide 49 text

Responsive Web Design ● CSS Media Queries ● Viewport meta - to become CSS Device Adaptation ('Viewport in CSS') ● CSS Flexbox

Slide 50

Slide 50 text

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

Slide 51

Slide 51 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 52

Slide 52 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 53

Slide 53 text

getUserMedia

Slide 54

Slide 54 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 55

Slide 55 text

More ... ● File API ● Fullscreen API ● Gamepad API ● Pointer Lock API ● Web Notifications ● Calendar ● Contacts

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Hybrid apps PhoneGap is a trademark of Adobe. Open-sourced at Apache Cordova

Slide 58

Slide 58 text

https://build.phonegap.com/

Slide 59

Slide 59 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 60

Slide 60 text

No content

Slide 61

Slide 61 text

Resources ● 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/ ● 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/

Slide 62

Slide 62 text

brucel@opera.com www.brucelawson.co.uk @brucel

Slide 63

Slide 63 text

Thanks Cover (many devices) - http://www.flickr.com/photos/brad_frost/7387827018/in/set- 72157630163121422 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 Appcache diagram by Jake Archibald, @jaffathecake, used with permission PhoneGap images are copyright Adobe