Una web todos los dispositivos.

1,834 views

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,834
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
22
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

×