HTML5 in online business: Web vs App                          Alberto Varela Iñaki Gorostiza                        albert...
Web vs App•    Cross-platform•    Visibility•    Accesibility•    Interface•    Scalability
HTML5•    Structural Tags•    Native video audio•    Geolocalization•    Form•    Off-line Apps (manifest)•    Cross brows...
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 A...
DETECTION TECHNIQUESTechnique #1function supports_geolocation() {    return geolocation in navigator;}Technique #2function...
DETECTION TECHNIQUESTechnique #3function supports_video() {  return !!document.createElement(video).canPlayType;}function ...
DETECTION TECHNIQUES (Modernizr)                        Techinque #1                        if (Modernizr.geolocation) {  ...
If browser does not support?- Fallback JS- Flash- Do nothingWhat about IE? - IE >= v9 → OK - IE < v9 → KO     · HTML5Shiv
New elements/attributes- placeholder- autofocus        Validation- email            - required- url              - pattern...
HTML5 APIsGeolocation, Web Sockets, Web Workers, Web Storage, File API, Device Orientation Events, Touch events, Full Scre...
Video & Audio
Frameworks & Stuff
http://diveintohtml5.info/http://caniuse.com/http://www.whatwg.org/http://html5doctor.com/http://html5demos.com/http://www...
Thanks!Iñaki Gorostizaigorostiza@LIN3S.com
HTML5 in online business: Web vs App
HTML5 in online business: Web vs App
HTML5 in online business: Web vs App
HTML5 in online business: Web vs App
HTML5 in online business: Web vs App
HTML5 in online business: Web vs App
HTML5 in online business: Web vs App
HTML5 in online business: Web vs App
Upcoming SlideShare
Loading in …5
×

HTML5 in online business: Web vs App

426 views

Published on

Charla que utilizamos para la presentación del curso HTML5 que imparte la gente de M4F
http://cursohtml5.m4f.es/

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

  • Be the first to like this

No Downloads
Views
Total views
426
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 in online business: Web vs App

  1. 1. HTML5 in online business: Web vs App Alberto Varela Iñaki Gorostiza alberto@LIN3S.com igorostiza@LIN3S.com
  2. 2. Web vs App•  Cross-platform•  Visibility•  Accesibility•  Interface•  Scalability
  3. 3. HTML5•  Structural Tags•  Native video audio•  Geolocalization•  Form•  Off-line Apps (manifest)•  Cross browser•  Backward compatibility(Modernizr)•  Multi-device (responsive)•  Web storage
  4. 4. CSS3•  Opacity•  Border•  Shadows•  Web fonts•  Transitions•  Less - Sass
  5. 5. Responsive Design•  Mediaqueries•  Adaptive images•  CSS3 Grid•  Mobile version•  Interfaz Web
  6. 6. Semantic Web•  HTML5 Semantic tags•  Schema.org•  Microdatas
  7. 7. Web performance•  Load time efficiency•  Resources•  Page views•  Conversions•  SEO
  8. 8. Web vs App: Analytics•  Paradigm Shift•  Tracking•  Metrics•  Conversion
  9. 9. HTML5 Works? •  Structural Tags •  Native video audio •  Geolocalization •  Off-line Apps •  Cross browser •  Multi-device •  Local storage
  10. 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. 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. 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. 13. If browser does not support?- Fallback JS- Flash- Do nothingWhat about IE? - IE >= v9 → OK - IE < v9 → KO · HTML5Shiv
  14. 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. 15. HTML5 APIsGeolocation, Web Sockets, Web Workers, Web Storage, File API, Device Orientation Events, Touch events, Full Screen API, Web notifications,...
  16. 16. Video & Audio
  17. 17. Frameworks & Stuff
  18. 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. 19. Thanks!Iñaki Gorostizaigorostiza@LIN3S.com

×