Una web todos los dispositivos.
-
Upload
philogb -
Category
Technology
-
view
1.467 -
download
0
description
Transcript of Una web todos los dispositivos.
![Page 1: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/1.jpg)
Una Web, todos los dispositivos
Luz CaballeroWeb Opener
![Page 2: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/2.jpg)
La mejor experiencia en Internet, en todos los dispositivos
![Page 3: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/3.jpg)
Una Web
![Page 4: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/4.jpg)
![Page 5: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/5.jpg)
![Page 6: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/6.jpg)
![Page 7: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/7.jpg)
![Page 8: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/8.jpg)
![Page 9: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/9.jpg)
![Page 10: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/10.jpg)
#1: todos los navegadores
... ...
![Page 11: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/11.jpg)
Estándares Web
![Page 12: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/12.jpg)
Especificación HTML5 para desarrolladores Web[En] http://developers.whatwg.org/
![Page 13: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/13.jpg)
Soporte de HTML5 en los distintos navegadoreswww.caniuse.com
![Page 14: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/14.jpg)
Están las nuevas funcionalidades de HTML5 listas para usar en producción?
http://html5please.com
![Page 15: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/15.jpg)
Progressive enhancement
![Page 16: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/16.jpg)
navigator.userAgent
makes me a sad panda
![Page 17: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/17.jpg)
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
![Page 18: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/18.jpg)
![Page 19: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/19.jpg)
#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); }
![Page 20: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/20.jpg)
Modernizr.prefixed('boxSizing') // 'MozBoxSizing'
![Page 21: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/21.jpg)
Agrega los prefijos para todos los navegadoreshttp://leaverou.github.com/prefixfree/
![Page 22: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/22.jpg)
#2: todos los dispositivos
![Page 23: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/23.jpg)
![Page 24: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/24.jpg)
![Page 25: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/25.jpg)
![Page 26: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/26.jpg)
#1: Dimensiones fluídas
![Page 27: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/27.jpg)
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/
![Page 28: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/28.jpg)
img { max-width: 100%; -o-object-fit: none; overflow: hidden;}
![Page 29: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/29.jpg)
#2: Viewport
![Page 30: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/30.jpg)
![Page 31: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/31.jpg)
<meta name="viewport" content="width=device-width" />
![Page 32: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/32.jpg)
#3: Media queries
![Page 33: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/33.jpg)
@media screen and (max-width: 360px) { img { width: 96%; background: #000; }}
![Page 34: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/34.jpg)
@media screen and (-o-min-device-pixel-ratio: 3/2) { body { background-size: 250px; }}
![Page 35: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/35.jpg)
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">
![Page 36: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/36.jpg)
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/
![Page 37: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/37.jpg)
![Page 38: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/38.jpg)
Mini
Guía para desarrollar para Minihttp://dev.opera.com/articles/view/opera-mini-web-content-authoring-guidelines/
![Page 39: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/39.jpg)
![Page 40: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/40.jpg)
#1: La resolución es baja al tener en cuenta que el usuario está lejos
![Page 41: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/41.jpg)
![Page 42: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/42.jpg)
#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:
![Page 43: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/43.jpg)
#3: Navegación espacial
![Page 44: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/44.jpg)
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;}
![Page 45: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/45.jpg)
#4: Indicar el foco
![Page 46: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/46.jpg)
:focus { background: #0f0; outline: 0 solid; }
![Page 47: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/47.jpg)
Guía para desarrollar contenido para TVhttp://dev.opera.com/articles/view/creating-web-content-for-tv/
![Page 48: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/48.jpg)
Testing!
![Page 49: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/49.jpg)
• 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/
![Page 50: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/50.jpg)
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
![Page 51: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/51.jpg)
Otros Recursos
![Page 53: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/53.jpg)
![Page 54: Una web todos los dispositivos.](https://reader033.fdocuments.co/reader033/viewer/2022060109/5555cf37d8b42aaf158b4c4d/html5/thumbnails/54.jpg)
• 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