17. if (Modernizr.webgl){
loadAllWebGLScripts(); // webgl assets can easily be > 300k
} else {
var msg = 'With a different browser you’ll get to see the
WebGL experience here:
get.webgl.org.';
document.getElementById( '#notice' ).innerHTML = msg;
}
Polyfills HTML5 para soporte en todos los navegadores
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
36. Cómo usar viewport y media queries
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-
and-viewport/
Galería de media queries
http://mediaqueri.es/
Guía de Optimización para móviles
http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/
Adaptive Web Design
http://dev.opera.com/articles/view/love-your-devices-adaptive-web-
design-with-media-queries-viewport-and-more/
Cómo usar Web Storage (local y session storage)
http://dev.opera.com/articles/view/web-storage/
Nuevas funcionalidades de formularios en HTML5 (HTML5 forms)
http://dev.opera.com/articles/view/new-form-features-in-html5/
37.
38. Mini
Guía para desarrollar para Mini
http://dev.opera.com/articles/view/opera-mini-web-content-authoring-guidelines/
39.
40. #1: La resolución es baja al tener en cuenta
que el usuario está lejos
41.
42. #2: Media queries: casi ninguna TV es
identificable usando media="tv"
Para Full-HD:
<link rel="stylesheet" media="screen and (min-width: 1920px)"
href="...">
HD-ready:
<link rel="stylesheet" media="screen and (min-width: 1280px)
and (max-width: 1920px)" href="...">
para las más chicas que HD-ready:
<link rel="stylesheet" media="screen and (max-width: 1280px)"
href="...">
49. • Dragonfly, el debugger de Opera http://www.opera.com/dragonfly/
• CSS profiler http://my.opera.com/dragonfly/blog/style-profiler-preview
• Remote debugger http://www.opera.com/dragonfly/documentation/remote/
• Opera Mobile emulator http://www.opera.com/developer/tools/mobile/
• Opera TV emulator http://www.opera.com/business/tv/emulator/ & http://
dev.opera.com/articles/view/opera-tv-emulator-user-guide/
• Opera Mini simulator: http://www.opera.com/developer/tools/mini/
• Guía de emuladores y simuladores de móviles http://www.mobilexweb.com/
emulators
• web driver api http://www.opera.com/developer/tools/operadriver/
54. Image Credits
• Ear phone-holder http://www.flickr.com/photos/slave/2524508820/
• phone http://www.flickr.com/photos/ict4d/3067291623/
• iPad as writing device http://www.flickr.com/photos/66879463@N00/4946025923
• Chris at Sight Village, Birmingham http://www.flickr.com/photos/mroche/4801465011/
• CES Intel Booth http://www.flickr.com/photos/godzilla128/3204821198/
• Lab http://www.flickr.com/photos/strawberrymaya/480057790
• Lego Man Evolution Wallpaper http://www.wallchan.com/wallpaper/1741/
• Statue With Mobile Phone http://www.flickr.com/photos/rhan/4449429251
• Worship me http://www.flickr.com/photos/bdunnette/2072709902
• TV vs mobile http://www.flickr.com/photos/24374884@N08/6714342003
• Crash Test Dummies http://wot.motortrend.com/seeing-kias-namyang-rd-center-new-
forte-sorento-108497.html/hyundai-kia-namyang-crash-test-dummies/
• Mobile Phone Experiments - me jumping http://www.flickr.com/photos/roger_gordon/
752927445