Charla de Luz Caballero, Web Opener @ Opera Software, para Dynamic Languages Chile.

1. Una Web, todos los
dispositivos
Luz Caballero
Web Opener

2. La mejor experiencia en Internet, en todos los dispositivos

3. Una Web

10. #1: todos los navegadores
... ...

11. Estándares Web

12. Especificación HTML5 para desarrolladores Web
[En] http://developers.whatwg.org/

13. Soporte de HTML5 en los distintos navegadores
www.caniuse.com

14. Están las nuevas funcionalidades de HTML5
listas para usar en producción?
http://html5please.com

15. Progressive enhancement

16. navigator.userAgent
makes me a sad panda

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

19. #element {
background: -webkit-linear-gradient(black, white);
background: -moz-linear-gradient(black, white);
background: -ms-linear-gradient(black, white);
background: -o-linear-gradient(black, white);
background: linear-gradient(black, white);
}

20. Modernizr.prefixed('boxSizing') // 'MozBoxSizing'

21. Agrega los prefijos para todos los navegadores
http://leaverou.github.com/prefixfree/

22. #2: todos los dispositivos

26. #1: Dimensiones fluídas

27. section#main {
width: 33%;
float: left;
margin-left: 2%;
}
section#features {
width: 62%;
float: right;
margin-bottom: 3%;
}
Ejemplo: http://people.opera.com/cmills/mediaquery/

28. img {
max-width: 100%;
-o-object-fit: none;
overflow: hidden;
}

29. #2: Viewport

31. <meta name="viewport" content="width=device-width" />

32. #3: Media queries

33. @media screen and (max-width: 360px) {
img {
width: 96%;
background: #000;
}
}

34. @media screen and (-o-min-device-pixel-ratio: 3/2) {
body {
background-size: 250px;
}
}

35. <meta name="viewport" content="width=device-width,
target-densitydpi=device-dpi">

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/

38. Mini
Guía para desarrollar para Mini
http://dev.opera.com/articles/view/opera-mini-web-content-authoring-guidelines/

40. #1: La resolución es baja al tener en cuenta
que el usuario está lejos

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="...">

43. #3: Navegación espacial

44. button { position:absolute }
button#b1 {
top:0; left:50%;
nav-index:1;
nav-right:#b2; nav-left:#b4;
nav-down:#b2; nav-up:#b4;
}
button#b2 {
top:50%; left:100%;
nav-index:2;
nav-right:#b3; nav-left:#b1;
nav-down:#b3; nav-up:#b1;
}
button#b3 {
top:100%; left:50%;
nav-index:3;
nav-right:#b4; nav-left:#b2;
nav-down:#b4; nav-up:#b2;
}
button#b4 {
top:50%; left:0;
nav-index:4;
nav-right:#b1; nav-left:#b3;
nav-down:#b1; nav-up:#b3;
}

45. #4: Indicar el foco

46. :focus { background: #0f0; outline: 0 solid; }

47. Guía para desarrollar contenido para TV
http://dev.opera.com/articles/view/creating-web-content-for-tv/

48. Testing!

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/

50. Accesibilidad
Diseñando para la
inclusión
http://www.w3.org/WAI/
users/Overview.html
Técnicas para proveer
alternativas en texto
http://dev.w3.org/html5/
alt-techniques/
developer.html

51. Otros Recursos

52. http://dev.opera.com/
@gerbille

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