HTML5 in online business: Web vs App Alberto Varela

alberto@LIN3S.com

Iñaki Gorostiza igorostiza@LIN3S.com

Web vs App

•  Cross-platform •  Visibility •  Accesibility •  Interface •  Scalability

HTML5

•  Structural Tags •  Native video audio •  Geolocalization •  Form •  Off-line Apps (manifest) •  Cross browser •  Backward compatibility(Modernizr) •  Multi-device (responsive) •  Web storage

CSS3

•  Opacity •  Border •  Shadows •  Web fonts •  Transitions •  Less - Sass

Responsive Design

•  Mediaqueries •  Adaptive images •  CSS3 Grid •  Mobile version •  Interfaz Web

Semantic Web

•  HTML5 Semantic tags •  Schema.org •  Microdatas

Web performance

•  Load time efficiency •  Resources •  Page views •  Conversions •  SEO

Web vs App: Analytics

•  Paradigm Shift •  Tracking •  Metrics •  Conversion

HTML5 Works?

•  Structural Tags •  Native video audio •  Geolocalization •  Off-line Apps •  Cross browser •  Multi-device •  Local storage

DETECTION TECHNIQUES

Technique #1 function supports_geolocation() { return 'geolocation' in navigator; }

Technique #2 function supports_canvas() { return !!document.createElement('canvas').getContext; } function supports_input_placeholder() { var i = document.createElement('input'); return 'placeholder' in i; }

DETECTION TECHNIQUES

Technique #3 function supports_video() { return !!document.createElement('video').canPlayType; } function supports_h264_baseline_video() { if (!supports_video()) { return false; } var v = document.createElement("video"); return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); }

Technique #4 function supports_colorpicker() { var i = document.createElement("input"); i.setAttribute("type", "color"); return i.type !== "text"; }

DETECTION TECHNIQUES (Modernizr) Techinque #1 if (Modernizr.geolocation) { // let's find out where you are! } else { // no native geolocation support available :( // maybe try Gears or another third-party solution } Techinque #2 if (Modernizr.canvas) { // let's draw some shapes! } else { // no native canvas support available :( } Techinque #3 if (Modernizr.video) { // let's play some video! but what kind? if (Modernizr.video.webm) { // try WebM } else if (Modernizr.video.ogg) { // try Ogg Theora + Vorbis in an Ogg container } else if (Modernizr.video.h264){ // try H.264 video + AAC audio in an MP4 container } } Techinque #4 if (!Modernizr.inputtypes.color) { // no native support for <input type="date"> :( // maybe build one yourself with Dojo or jQueryUI }

http://modernizr.com/

If browser does not support?

- Fallback JS - Flash - Do nothing

What about IE?

- IE >= v9 → OK - IE < v9 → KO · HTML5Shiv

New elements/attributes

- placeholder - autofocus - email - url - number - range - datepicker - date – datetime – datetime-local – month – week – time - search - color

Validation - required - pattern - min - max - <form novalidate>

HTML5 APIs

Geolocation, Web Sockets, Web Workers, Web Storage, File API, Device Orientation Events, Touch events, Full Screen

API, Web notifications,...

Video & Audio

Frameworks & Stuff

http://diveintohtml5.info/

http://caniuse.com/ http://www.whatwg.org/ http://html5doctor.com/ http://html5demos.com/ http://www.html5rocks.com/ http://html5test.com/ http://dev.w3.org/html5/spec/single-page.html

Thanks! Iñaki Gorostiza igorostiza@LIN3S.com