html5 in online business: web vs app
DESCRIPTION
TRANSCRIPT
![Page 2: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/2.jpg)
Web vs App
• Cross-platform • Visibility • Accesibility • Interface • Scalability
![Page 3: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/3.jpg)
![Page 4: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/4.jpg)
![Page 5: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/5.jpg)
![Page 6: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/6.jpg)
HTML5
• Structural Tags • Native video audio • Geolocalization • Form • Off-line Apps (manifest) • Cross browser • Backward compatibility(Modernizr) • Multi-device (responsive) • Web storage
![Page 7: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/7.jpg)
CSS3
• Opacity • Border • Shadows • Web fonts • Transitions • Less - Sass
![Page 8: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/8.jpg)
Responsive Design
• Mediaqueries • Adaptive images • CSS3 Grid • Mobile version • Interfaz Web
![Page 9: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/9.jpg)
Semantic Web
• HTML5 Semantic tags • Schema.org • Microdatas
![Page 10: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/10.jpg)
Web performance
• Load time efficiency • Resources • Page views • Conversions • SEO
![Page 11: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/11.jpg)
Web vs App: Analytics
• Paradigm Shift • Tracking • Metrics • Conversion
![Page 12: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/12.jpg)
![Page 13: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/13.jpg)
![Page 14: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/14.jpg)
![Page 15: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/15.jpg)
![Page 16: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/16.jpg)
![Page 17: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/17.jpg)
HTML5 Works?
• Structural Tags • Native video audio • Geolocalization • Off-line Apps • Cross browser • Multi-device • Local storage
![Page 18: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/18.jpg)
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; }
![Page 19: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/19.jpg)
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"; }
![Page 20: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/20.jpg)
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/
![Page 21: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/21.jpg)
If browser does not support?
- Fallback JS - Flash - Do nothing
What about IE?
- IE >= v9 → OK - IE < v9 → KO · HTML5Shiv
![Page 22: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/22.jpg)
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>
![Page 23: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/23.jpg)
HTML5 APIs
Geolocation, Web Sockets, Web Workers, Web Storage, File API, Device Orientation Events, Touch events, Full Screen
API, Web notifications,...
![Page 24: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/24.jpg)
Video & Audio
![Page 25: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/25.jpg)
Frameworks & Stuff
![Page 26: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/26.jpg)
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
![Page 27: HTML5 in online business: Web vs App](https://reader036.vdocuments.site/reader036/viewer/2022082309/54c7c0664a795931208b46a6/html5/thumbnails/27.jpg)
Thanks! Iñaki Gorostiza [email protected]