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

HTML5 in online business: Web vs App

on

  • 2,571 views

 

Statistics

Views

Total Views
2,571
Views on SlideShare
2,567
Embed Views
4

Actions

Likes
5
Downloads
27
Comments
0

2 Embeds 4

https://twitter.com 3
https://si0.twimg.com 1

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