HTML5 in online business: Web vs App

2,479 views
2,312 views

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,479
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
30
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

HTML5 in online business: Web vs App

  1. HTML5 in online business: Web vs App Alberto Varela Iñaki Gorostiza alberto@LIN3S.com igorostiza@LIN3S.com
  2. Web vs App•  Cross-platform•  Visibility•  Accesibility•  Interface•  Scalability
  3. HTML5•  Structural Tags•  Native video audio•  Geolocalization•  Form•  Off-line Apps (manifest)•  Cross browser•  Backward compatibility(Modernizr)•  Multi-device (responsive)•  Web storage
  4. CSS3•  Opacity•  Border•  Shadows•  Web fonts•  Transitions•  Less - Sass
  5. Responsive Design•  Mediaqueries•  Adaptive images•  CSS3 Grid•  Mobile version•  Interfaz Web
  6. Semantic Web•  HTML5 Semantic tags•  Schema.org•  Microdatas
  7. Web performance•  Load time efficiency•  Resources•  Page views•  Conversions•  SEO
  8. Web vs App: Analytics•  Paradigm Shift•  Tracking•  Metrics•  Conversion
  9. HTML5 Works? •  Structural Tags •  Native video audio •  Geolocalization •  Off-line Apps •  Cross browser •  Multi-device •  Local storage
  10. DETECTION TECHNIQUESTechnique #1function supports_geolocation() { return geolocation in navigator;}Technique #2function supports_canvas() { return !!document.createElement(canvas).getContext;}function supports_input_placeholder() { var i = document.createElement(input); return placeholder in i;}
  11. DETECTION TECHNIQUESTechnique #3function 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 #4function supports_colorpicker() { var i = document.createElement("input"); i.setAttribute("type", "color"); return i.type !== "text";}
  12. DETECTION TECHNIQUES (Modernizr) Techinque #1 if (Modernizr.geolocation) { // lets find out where you are!http://modernizr.com/ } else { // no native geolocation support available :( // maybe try Gears or another third-party solution } Techinque #2 if (Modernizr.canvas) { // lets draw some shapes! } else { // no native canvas support available :( } Techinque #3 if (Modernizr.video) { // lets 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 }
  13. If browser does not support?- Fallback JS- Flash- Do nothingWhat about IE? - IE >= v9 → OK - IE < v9 → KO · HTML5Shiv
  14. New elements/attributes- placeholder- autofocus Validation- email - required- url - pattern- number - min- range - max- datepicker - <form novalidate>- date– datetime– datetime-local– month– week– time- search- color
  15. HTML5 APIsGeolocation, Web Sockets, Web Workers, Web Storage, File API, Device Orientation Events, Touch events, Full Screen API, Web notifications,...
  16. Video & Audio
  17. Frameworks & Stuff
  18. 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
  19. Thanks!Iñaki Gorostizaigorostiza@LIN3S.com

×