Diseñando la web móvil con HTML5 y CSS3

0fe2973fa8d27d96547e43322341183a?s=47 Swwweet
February 11, 2012

Diseñando la web móvil con HTML5 y CSS3

Presentación de Javier Usobiaga en el Barcelona Visual Sound 2012.

0fe2973fa8d27d96547e43322341183a?s=128

Swwweet

February 11, 2012
Tweet

Transcript

  1. DISEÑANDO LA WEB MÓVIL con HTM L5 y CSS3 Javier

    Usobiaga · @htmlboy Barcelona Visual Sound 2012
  2. WEB MÓVIL

  3. 2012 los smartphones no son cosa de geeks

  4. PERO... ¿QUÉ ES UN MÓVIL?

  5. ¿un dispositivo con una pantalla pequeña?

  6. ¿un dispositivo que se puede llevar encima fácilmente?

  7. ¿un dispositivo que se utiliza normalmente en la calle?

  8. ¿cualquier dispositivo con una pantalla táctil y a color?

  9. ¿cualquier dispositivo que no sea un sobremesa?

  10. UN MÓVIL ES ESTO...

  11. ...Y ESTO

  12. UN MÓVIL ES ESTO...

  13. ...Y ESTO

  14. UN MÓVIL ES ESTO...

  15. ...Y ESTO

  16. UN MÓVIL ES ESTO...

  17. ...Y ESTO

  18. Y... ¿QUÉ HACEMOS?

  19. HABLEMOS DE APPS

  20. El debate de aplicaciones nativas vs. aplicaciones móbiles sigue siendo

    uno de los más polémicos. Me parece ridículo. Nadie tiene este problema respecto a las aplicaciones nativas vs. las aplicaciones de escritorio. Cennydd Bowles the-pastry-box-project.net/cennydd-bowles/2012-january-28
  21. 80% de las apps de marca no llegan a 1.000

    descargas bit.ly/app-fail
  22. None
  23. None
  24. None
  25. None
  26. +esfuerzo +costes +dolor app app web { { {

  27. ¿Y UNA TEMPLATE MÓVIL?

  28. Creo que es peligroso denegar a los usuarios el acceso

    al contenido y la funcionalidad “por su propio bien.” Asumir que sabes lo que el visitante a tu página web quiere y necesita basándote solo en su dispositivo es ser muy condescendiente. Jeremy Keith adactio.com/journal/1716
  29. None
  30. None
  31. None
  32. None
  33. { { { web web web +versiones +código +dolor

  34. UNA WEB

  35. La Web Móvil no existe. Sólo existe La Web, y

    la vemos de distintas formas. Tampoco existe la Web de Escritorio. Ni la Web de Tablet. Gracias. Stephen Hay the-haystack.com/2011/01/07/there-is-no-mobile-web
  36. CONTENIDO

  37. UNA WEB CÓMO SE VERÁ NUESTRA WEB ? ? ?

  38. None
  39. { web +flexible -control -costes

  40. REGLA DE ORO* web app = template *O DE BRONCE

    contenido = una web
  41. CON QUÉ HERRAMIENTAS CONTAMOS ¿ ?

  42. NUEVA FILOSOFÍA fallback detectar capacidades olvidarse del pixel perfect

  43. DETECTAR CAPACIDADES modernizr.com

  44. None
  45. VIEWPORT initial-scale width user-scalable maximum-scale = 1.0 = device-width =

    yes = NO!
  46. VIEWPORT <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

  47. MULTIMEDIA tags <video> y <audio> formato no unificado TIP: usar

    mp4 y webM Flash como fallback
  48. VIDEO & AUDIO <video controls> <source src="video.mp4" > <source src="video.webm"

    > <!-- Puedes añadir un reproductor Flash --> </video>
  49. FORMULARIOS nuevos input mejor experiencia de usuario validación nativa (o

    casi...)
  50. FORMULARIOS <input type=”email” /> <input type=”url” /> <input type=”number” />

    <input type=”date” />
  51. FORMULARIOS

  52. JS APIS local storage offline (cache) web workers web sockets

  53. CANVAS playbiolab.com

  54. GEOLOCALIZACIÓN

  55. PANTALLAS TÁCTILES más intuitivo móvil != pantalla táctil touch =

    touch + hover + click más interacción != mejor
  56. TOUCH EVENTS addEventListener('touchstart'...) ! addEventListener('touchmove'...) ! addEventListener('touchend'...)

  57. SWIPE plugins.jquery.com/project/swipe

  58. GESTURES jgestures.codeplex.com

  59. None
  60. CSS3

  61. ¿POR QUÉ? menos imágenes menos js menos peticiones

  62. WEBKIT MOZ MS O - - - - -( :

  63. BORDES REDONDEADOS

  64. BORDER RADIUS #box{ border-radius: 10px; } #circle{ border-radius: 50%; }

  65. TRANSPARENCIAS

  66. RGBA & HSLA #box{ background: rgba(84,69,54,.5); } #box2{ background: hsla(30,36%,33%,.5);

    }
  67. SOMBRAS

  68. BOX-SHADOW #box{ box-shadow: 5px 5px 10px #000; }

  69. TIPOGRAFÍA

  70. @FONT-FACE @font-face { font-family: 'myFont'; src: url('myFont.woff'); font-weight: normal; font-style:

    normal; } fontspring.com/blog/the-new-bulletproof-font-face-syntax
  71. DEGRADADOS

  72. DEGRADADOS leaverou.me/css3patterns

  73. DEGRADADOS www.colorzilla.com/gradient-editor

  74. GRADIENT #box { background-image: linear-gradient (45deg, red, black); }

  75. TRANSFORMAR

  76. TRANSFORM #box{ transform: scale(.5); }

  77. TRANSFORMAR

  78. TRANSFORM #box{ transform: rotate(45deg); }

  79. TRANSFORMAR

  80. TRANSFORM #box{ transform: translate(20px, 40px); }

  81. TRANSFORMAR

  82. TRANSFORM #box{ transform: skew(5deg, 30deg); }

  83. MOVIMIENTO

  84. TRANSITION #box{ transition: 1s background ease-in; }

  85. ANIMATIONS mzl.la/ieGCct

  86. MOVIMIENTO 3D

  87. 3D ANIMATIONS tympanus.net/Development/ImageTransitions/index4.html

  88. ADAPTAR LA WEB

  89. ADAPTAR LA WEB

  90. mediaqueri.es

  91. MEDIA QUERIES @media screen and (max-width:320px){ #container {width: 300px;} header

    nav {display: none;} }
  92. RESPONSIVE WEB DESIGN RESPONSIVE WEB DESIGN R W D abookapart.com/products/responsive-web-design

  93. RWD retícula fluida imágenes flexibles media queries

  94. TARGET CONTEXTO I .. alistapart.com/articles/responsive-web-design

  95. RESPONSIVE #container .column{ width: 67.0212765%; /* 630/940 */ margin-right: 2.12765%;

    /* 20/940 */ } .img-container img{ max-width: 100%; }
  96. MOBILE FIRST 1 2 3 abookapart.com/products/mobile-first

  97. RESUMIENDO las apps no son la (única) solución templates =

    posibles incoherencias el responsive web design es difícil
  98. ¿LA SOLUCIÓN?

  99. None
  100. GRACIAS ¿preguntas? Javier Usobiaga · @htmlboy Swwweet.com

  101. CRÉDITOS http://www.flickr.com/photos/joshfassbind/4683365102 http://www.flickr.com/photos/docsearls/2268395744 http://www.flickr.com/photos/hermida/5442243540 http://www.flickr.com/photos/yourdon/4064143718 http://www.flickr.com/photos/bendodson/5338445045 http://www.flickr.com/photos/rafelmiro/5090998436 http://www.flickr.com/photos/jaynev/5831853872