Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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.userAgent

makes me a sad panda
if (Modernizr.webgl){
          loadAllWebGLScripts(); // webgl assets can easily be > 300k
       } else {
          var ...
#element {  
    background: -webkit-linear-gradient(black,   white);
    background:    -moz-linear-gradient(black,   whi...
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 queries
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-
and-viewport/

Gal...
Mini

                         Guía para desarrollar para Mini
http://dev.opera.com/articles/view/opera-mini-web-content-a...
#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"

Para Full-HD:
<link rel="stylesheet" media="scr...
#3: Navegación espacial
button { position:absolute }

button#b1 {
    top:0; left:50%;
    nav-index:1;
    nav-right:#b2; nav-left:#b4;
    nav-d...
#4: Indicar el foco
:focus { background: #0f0; outline: 0 solid; }
Guía para desarrollar contenido para TV
http://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-profi...
Accesibilidad
Diseñando para la
inclusión
http://www.w3.org/WAI/
users/Overview.html

Técnicas para proveer
alternativas e...
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/3...
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.
Vous avez terminé ce document.
Télécharger et lire hors ligne.
Prochain SlideShare
Web standards and Visual Studio web tools
Suivant
Prochain SlideShare
Web standards and Visual Studio web tools
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

Partager

Una web todos los dispositivos.

Télécharger pour lire hors ligne

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

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.userAgent makes 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 navegadores https://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 queries http://dev.opera.com/articles/view/an-introduction-to-meta-viewport- and-viewport/ Galería de media queries http://mediaqueri.es/ Guía de Optimización para móviles http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/ Adaptive Web Design http://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 Mini http://dev.opera.com/articles/view/opera-mini-web-content-authoring-guidelines/
  27. 27. #1: La resolución es baja al tener en cuenta que 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 TV http://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. Accesibilidad Diseñando para la inclusión http://www.w3.org/WAI/ users/Overview.html Técnicas para proveer alternativas en texto http://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
  • skauch

    May. 13, 2012
  • miguelinux

    May. 13, 2012

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

Vues

Nombre de vues

1 996

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

4

Actions

Téléchargements

22

Partages

0

Commentaires

0

Mentions J'aime

2

×