HTML5 in online business: Web vs App
Upcoming SlideShare
Loading in...5
×
 

HTML5 in online business: Web vs App

on

  • 403 views

Charla que utilizamos para la presentación del curso HTML5 que imparte la gente de M4F

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

Statistics

Views

Total Views
403
Views on SlideShare
390
Embed Views
13

Actions

Likes
0
Downloads
2
Comments
0

4 Embeds 13

https://si0.twimg.com 4
http://www.linkedin.com 4
https://twitter.com 3
https://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 in online business: Web vs App HTML5 in online business: Web vs App Presentation Transcript

  • HTML5 in online business: Web vs App Alberto Varela Iñaki Gorostiza alberto@LIN3S.com 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 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;}
  • 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";}
  • 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 }
  • 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- number - min- range - max- datepicker - <form novalidate>- date– datetime– datetime-local– month– week– time- search- color
  • HTML5 APIsGeolocation, 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 Gorostizaigorostiza@LIN3S.com