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

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

6. HTML5
• Structural Tags
• Native video audio
• Geolocalization
• Form
• Off-line Apps (manifest)
• Cross browser
• Backward compatibility(Modernizr)
• Multi-device (responsive)
• Web storage

7. CSS3
• Opacity
• Border
• Shadows
• Web fonts
• Transitions
• Less - Sass

8. Responsive Design
• Mediaqueries
• Adaptive images
• CSS3 Grid
• Mobile version
• Interfaz Web

9. Semantic Web
• HTML5 Semantic tags
• Schema.org
• Microdatas

10. Web performance
• Load time efficiency
• Resources
• Page views
• Conversions
• SEO

11. Web vs App: Analytics
• Paradigm Shift
• Tracking
• Metrics
• Conversion

17. HTML5 Works?
• Structural Tags
• Native video audio
• Geolocalization
• Off-line Apps
• Cross browser
• Multi-device
• Local storage

18. 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;
}

19. 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";
}

20. DETECTION TECHNIQUES (Modernizr)
Techinque #1
if (Modernizr.geolocation) {
// let's 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) {
// 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
}

21. If browser does not support?
- Fallback JS
- Flash
- Do nothing
What about IE?
- IE >= v9 → OK
- IE < v9 → KO
· HTML5Shiv

22. 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

23. HTML5 APIs
Geolocation, Web Sockets, Web Workers, Web Storage, File
API, Device Orientation Events, Touch events, Full Screen
API, Web notifications,...

24. Video & Audio

25. Frameworks & Stuff

26. 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

27. Thanks!
Iñaki Gorostiza
igorostiza@LIN3S.com