una web todos los dispositivos
Post on 15-May-2015
1.467 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
• 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
top related