Una web todos los dispositivos

Una Web, todos los dispositivos

Luz CaballeroWeb Opener

La mejor experiencia en Internet, en todos los dispositivos

Una Web

#1: todos los navegadores

... ...

Estándares Web

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

Soporte de HTML5 en los distintos navegadoreswww.caniuse.com

Están las nuevas funcionalidades de HTML5 listas para usar en producción?

http://html5please.com

Progressive enhancement

navigator.userAgent

makes me a sad panda

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 navegadoreshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

#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); }  

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

Agrega los prefijos para todos los navegadoreshttp://leaverou.github.com/prefixfree/

#2: todos los dispositivos

#1: Dimensiones fluídas

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/

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

#2: Viewport

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

#3: Media queries

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

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

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

Cómo usar viewport y media querieshttp://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

Galería de media querieshttp://mediaqueri.es/

Guía de Optimización para móvileshttp://dev.opera.com/articles/view/the-mobile-web-optimization-guide/

Adaptive Web Designhttp://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/

Mini

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

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

#2: Media queries: casi ninguna TV es identificable usando media="tv"

<link rel="stylesheet" media="screen and (min-width: 1920px)" href="...">

<link rel="stylesheet" media="screen and (min-width: 1280px) and (max-width: 1920px)" href="...">

<link rel="stylesheet" media="screen and (max-width: 1280px)" href="...">

Para Full-HD:

HD-ready:

para las más chicas que HD-ready:

#3: Navegación espacial

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

#4: Indicar el foco

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

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

Testing!

• 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/

AccesibilidadDiseñando para la inclusiónhttp://www.w3.org/WAI/users/Overview.html

Técnicas para proveer alternativas en textohttp://dev.w3.org/html5/alt-techniques/developer.html

Otros Recursos

http://dev.opera.com/

@gerbille

• 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

Image Credits