Una Web, todos los      dispositivos           Luz Caballero           Web 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 navegadores             www.caniuse.com
Están las nuevas funcionalidades de HTML5       listas para usar en producción?            http://html5please.com
Progressive enhancement
navigator.userAgentmakes me a sad panda
if (Modernizr.webgl){          loadAllWebGLScripts(); // webgl assets can easily be > 300k       } else {          var msg...
#element {      background: -webkit-linear-gradient(black,   white);    background:    -moz-linear-gradient(black,   white...
Modernizr.prefixed(boxSizing) // MozBoxSizing
Agrega los prefijos para todos los navegadores    http://leaverou.github.com/prefixfree/
#2: todos los dispositivos
#1: Dimensiones fluídas
section#main {               width: 33%;               float: left;               margin-left: 2%;             }          ...
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...
Mini                         Guía para desarrollar para Minihttp://dev.opera.com/articles/view/opera-mini-web-content-auth...
#1: La resolución es baja al tener en cuentaque el usuario está lejos
#2: Media queries: casi ninguna TV es     identificable usando media="tv"Para Full-HD:<link rel="stylesheet" media="screen ...
#3: Navegación espacial
button { position:absolute }button#b1 {    top:0; left:50%;    nav-index:1;    nav-right:#b2; nav-left:#b4;    nav-down:#b...
#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-profil...
AccesibilidadDiseñando para lainclusiónhttp://www.w3.org/WAI/users/Overview.htmlTécnicas para proveeralternativas en texto...
Otros Recursos
http://dev.opera.com/     @gerbille
Image Credits• Ear phone-holder http://www.flickr.com/photos/slave/2524508820/• phone http://www.flickr.com/photos/ict4d/306...
Una web todos los dispositivos.
Una web todos los dispositivos.
Una web todos los dispositivos.
Una web todos los dispositivos.
Una web todos los dispositivos.
Una web todos los dispositivos.
Una web todos los dispositivos.
Una web todos los dispositivos.
Una web todos los dispositivos.
Una web todos los dispositivos.
Una web todos los dispositivos.
Una web todos los dispositivos.
Una web todos los dispositivos.
Una web todos los dispositivos.
Una web todos los dispositivos.
Upcoming SlideShare
Loading in...5
×

Una web todos los dispositivos.

1,535

Published on

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

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,535
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Una web todos los dispositivos.

  1. 1. Una Web, todos los dispositivos Luz Caballero Web Opener
  2. 2. La mejor experiencia en Internet, en todos los dispositivos
  3. 3. Una Web
  4. 4. #1: todos los navegadores ... ...
  5. 5. Estándares Web
  6. 6. Especificación HTML5 para desarrolladores Web [En] http://developers.whatwg.org/
  7. 7. Soporte de HTML5 en los distintos navegadores www.caniuse.com
  8. 8. Están las nuevas funcionalidades de HTML5 listas para usar en producción? http://html5please.com
  9. 9. Progressive enhancement
  10. 10. navigator.userAgentmakes me a sad panda
  11. 11. 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
  12. 12. #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);}  
  13. 13. Modernizr.prefixed(boxSizing) // MozBoxSizing
  14. 14. Agrega los prefijos para todos los navegadores http://leaverou.github.com/prefixfree/
  15. 15. #2: todos los dispositivos
  16. 16. #1: Dimensiones fluídas
  17. 17. 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/
  18. 18. img {  max-width: 100%;  -o-object-fit: none;  overflow: hidden;}
  19. 19. #2: Viewport
  20. 20. <meta name="viewport" content="width=device-width" />
  21. 21. #3: Media queries
  22. 22. @media screen and (max-width: 360px) {  img {    width: 96%;    background: #000;  }}
  23. 23. @media screen and (-o-min-device-pixel-ratio: 3/2) {  body {    background-size: 250px;  }}
  24. 24. <meta name="viewport" content="width=device-width,target-densitydpi=device-dpi">
  25. 25. 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/
  26. 26. Mini Guía para desarrollar para Minihttp://dev.opera.com/articles/view/opera-mini-web-content-authoring-guidelines/
  27. 27. #1: La resolución es baja al tener en cuentaque el usuario está lejos
  28. 28. #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="...">
  29. 29. #3: Navegación espacial
  30. 30. 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;}
  31. 31. #4: Indicar el foco
  32. 32. :focus { background: #0f0; outline: 0 solid; }
  33. 33. Guía para desarrollar contenido para TVhttp://dev.opera.com/articles/view/creating-web-content-for-tv/
  34. 34. Testing!
  35. 35. • 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/
  36. 36. AccesibilidadDiseñando para lainclusiónhttp://www.w3.org/WAI/users/Overview.htmlTécnicas para proveeralternativas en textohttp://dev.w3.org/html5/alt-techniques/developer.html
  37. 37. Otros Recursos
  38. 38. http://dev.opera.com/ @gerbille
  39. 39. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×