Ó V I L                                    E B M                    L A W           C SS 3         N D O        M         ...
WEB   MÓVIL
2012  los smartphonesno son cosa de geeks
PERO...¿QUÉ ES UN MÓVIL?
¿un dispositivo       con una       pantalla     pequeña?
¿un dispositivoque se puedellevar encimafácilmente?
¿un dispositivo  que se utiliza  normalmente    en la calle?
¿cualquierdispositivocon una pantallatáctil y a color?
¿cualquier    dispositivo    que no seaun sobremesa?
UN MÓVIL ES ESTO...
...Y ESTO
UN MÓVIL ES ESTO...
...Y ESTO
UN MÓVIL ES ESTO...
...Y ESTO
UN MÓVIL ES ESTO...
...Y ESTO
Y...¿QUÉ HACEMOS?
HABLEMOS DE APPS
El debate de aplicaciones nativasvs. aplicaciones móbiles siguesiendo uno de los más polémicos.Me parece ridículo. Nadie t...
8 0 %  de las apps de     marca no llegan a 1.000 descargas   bit.ly/app-fail
+esfuerzo              +costes                +dolorapp   app   web{      {            {
¿Y UNATEMPLATE MÓVIL?
Creo que es peligroso denegar alos usuarios el acceso alcontenido y la funcionalidad “porsu propio bien.” Asumir que sabes...
+versiones              +código                +dolorweb   web   web{      {            {
UNAWEB
La Web Móvil no existe. Sóloexiste La Web, y la vemos dedistintas formas. Tampoco existela Web de Escritorio. Ni la Web de...
CONTENIDO
CÓMO SE VERÁ    NUESTRA WEBUNA WEB ?        ?       ?
+flexible        -control          -costesweb{
REGLA DE ORO*                    web app = template                    contenido = una web*O DE BRONCE
¿CON QUÉ HERRAMIENTAS     CONTAMOS        ?
+
SÍNDROMEDE FLASH
VIEWPORTinitial-scale = 1.0width = device-widthuser-scalable = yesmaximum-scale = NO!
VIEWPORT<meta name = "viewport"      content = "width=device-width,                 initial-scale=1.0" >
MULTIMEDIAtags <video> y <audio>formato no unificadoTIP: usar mp4 y webMFlash como fallback
VIDEO & AUDIO<video controls>      <source src="video.mp4" >      <source src="video.webm" >      <!-- Puedes añadir un   ...
FORMULARIOSnuevos inputmejor experiencia de usuariovalidación nativa (o casi...)
FORMULARIOS<input type=”email” /><input type=”url” /><input type=”number” /><input type=”date” />
FORMULARIOS
OFFLINE - CACHE
OFFLINE - CACHE
LOCAL STORAGE
LOCAL STORAGElocalStorage.setItem(miClave,miValor);localStorage.getItem(miClave);localStorage.removeItem(miClave);localSto...
WEB STORAGESQL        INDEXED              DB
CANVAS
CANVAS playbiolab.com
SVG
SVGsvg-wow.org
GEOLOCALIZACIÓN
PANTALLAS TÁCTILESmás intuitivomóvil != pantalla táctiltouch = touch + hover + clickmás interacción != mejor
TOUCH EVENTSaddEventListener(touchstart...)!addEventListener(touchmove...)!addEventListener(touchend...)
SWIPEplugins.jquery.com/project/swipe
GESTURES jgestures.codeplex.com
CSS3
¿POR   menos imágenes       menos jsQUÉ?   menos peticiones
MENOS IMÁGENESborder-radiusrgba y hslabox-shadowgradientsfont-face
MENOS JStransform:scaletransform:rotatetransform: translatetransform: skewtransition
ANIMATIONS   mzl.la/ieGCct
3D ANIMATIONStympanus.net/Development/ImageTransitions/index4.html
GPU ACCELERATION-webkit-transform: translateZ(0);
ADAPTAR LA WEB
ADAPTAR LA WEB
mediaqueri.es
MEDIA QUERIES@media screen and (max-width:320px){    #container {width: 300px;}    header nav {display: none;}}
RESPONSIVE          WEB         DESIGN   RESPONSIVE      WEB                        R                                 W   ...
RWDretícula fluidaimágenes flexiblesmedia queries
TARGET    I               ..  CONTEXTOalistapart.com/articles/responsive-web-design
RESPONSIVE#container .column{    width: 67.0212765%; /* 630/940 */    margin-right: 2.12765%; /* 20/940 */}.img-container ...
MOBILE FIRST                   12                                          3    abookapart.com/products/mobile-first
O F Í A            ILO S     V A F          fallbackN U E         detectar capacidades        olvidarse del pixel perfect
DETECTAR CAPACIDADES        modernizr.com
RESUMIENDOlas apps no son la (única) solucióntemplates = posibles incoherenciasel responsive web design es difícil
¿LA SOLUCIÓN?
C I ASG R  ¿   A  p re           gu nta s?                       Javier Usobiaga · @htmlboy                               ...
Device Days 2012 - HTML5 y CSS3 para móvil
Device Days 2012 - HTML5 y CSS3 para móvil
Device Days 2012 - HTML5 y CSS3 para móvil
Device Days 2012 - HTML5 y CSS3 para móvil
Device Days 2012 - HTML5 y CSS3 para móvil
Device Days 2012 - HTML5 y CSS3 para móvil
Device Days 2012 - HTML5 y CSS3 para móvil
Upcoming SlideShare
Loading in …5
×

Device Days 2012 - HTML5 y CSS3 para móvil

3,669 views
3,612 views

Published on

Slides de la charla "Diseñando la web móvil con HTML5 y CSS3" del Device Days 2012.

Published in: Design

Device Days 2012 - HTML5 y CSS3 para móvil

  1. 1. Ó V I L E B M L A W C SS 3 N D O M L 5 y E Ñ A o n H T S cDI Javier Usobiaga · @htmlboy Device Days 2012
  2. 2. WEB MÓVIL
  3. 3. 2012 los smartphonesno son cosa de geeks
  4. 4. PERO...¿QUÉ ES UN MÓVIL?
  5. 5. ¿un dispositivo con una pantalla pequeña?
  6. 6. ¿un dispositivoque se puedellevar encimafácilmente?
  7. 7. ¿un dispositivo que se utiliza normalmente en la calle?
  8. 8. ¿cualquierdispositivocon una pantallatáctil y a color?
  9. 9. ¿cualquier dispositivo que no seaun sobremesa?
  10. 10. UN MÓVIL ES ESTO...
  11. 11. ...Y ESTO
  12. 12. UN MÓVIL ES ESTO...
  13. 13. ...Y ESTO
  14. 14. UN MÓVIL ES ESTO...
  15. 15. ...Y ESTO
  16. 16. UN MÓVIL ES ESTO...
  17. 17. ...Y ESTO
  18. 18. Y...¿QUÉ HACEMOS?
  19. 19. HABLEMOS DE APPS
  20. 20. El debate de aplicaciones nativasvs. aplicaciones móbiles siguesiendo uno de los más polémicos.Me parece ridículo. Nadie tieneeste problema respecto a lasaplicaciones nativas vs. lasaplicaciones de escritorio. Cennydd Bowles the-pastry-box-project.net/cennydd-bowles/2012-january-28
  21. 21. 8 0 % de las apps de marca no llegan a 1.000 descargas bit.ly/app-fail
  22. 22. +esfuerzo +costes +dolorapp app web{ { {
  23. 23. ¿Y UNATEMPLATE MÓVIL?
  24. 24. Creo que es peligroso denegar alos usuarios el acceso alcontenido y la funcionalidad “porsu propio bien.” Asumir que sabeslo que el visitante a tu páginaweb quiere y necesita basándotesolo en su dispositivo es ser muycondescendiente. Jeremy Keith adactio.com/journal/1716
  25. 25. +versiones +código +dolorweb web web{ { {
  26. 26. UNAWEB
  27. 27. La Web Móvil no existe. Sóloexiste La Web, y la vemos dedistintas formas. Tampoco existela Web de Escritorio. Ni la Web deTablet. Gracias. Stephen Hay the-haystack.com/2011/01/07/there-is-no-mobile-web
  28. 28. CONTENIDO
  29. 29. CÓMO SE VERÁ NUESTRA WEBUNA WEB ? ? ?
  30. 30. +flexible -control -costesweb{
  31. 31. REGLA DE ORO* web app = template contenido = una web*O DE BRONCE
  32. 32. ¿CON QUÉ HERRAMIENTAS CONTAMOS ?
  33. 33. +
  34. 34. SÍNDROMEDE FLASH
  35. 35. VIEWPORTinitial-scale = 1.0width = device-widthuser-scalable = yesmaximum-scale = NO!
  36. 36. VIEWPORT<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
  37. 37. MULTIMEDIAtags <video> y <audio>formato no unificadoTIP: usar mp4 y webMFlash como fallback
  38. 38. VIDEO & AUDIO<video controls> <source src="video.mp4" > <source src="video.webm" > <!-- Puedes añadir un reproductor Flash --></video>
  39. 39. FORMULARIOSnuevos inputmejor experiencia de usuariovalidación nativa (o casi...)
  40. 40. FORMULARIOS<input type=”email” /><input type=”url” /><input type=”number” /><input type=”date” />
  41. 41. FORMULARIOS
  42. 42. OFFLINE - CACHE
  43. 43. OFFLINE - CACHE
  44. 44. LOCAL STORAGE
  45. 45. LOCAL STORAGElocalStorage.setItem(miClave,miValor);localStorage.getItem(miClave);localStorage.removeItem(miClave);localStorage.clear();
  46. 46. WEB STORAGESQL INDEXED DB
  47. 47. CANVAS
  48. 48. CANVAS playbiolab.com
  49. 49. SVG
  50. 50. SVGsvg-wow.org
  51. 51. GEOLOCALIZACIÓN
  52. 52. PANTALLAS TÁCTILESmás intuitivomóvil != pantalla táctiltouch = touch + hover + clickmás interacción != mejor
  53. 53. TOUCH EVENTSaddEventListener(touchstart...)!addEventListener(touchmove...)!addEventListener(touchend...)
  54. 54. SWIPEplugins.jquery.com/project/swipe
  55. 55. GESTURES jgestures.codeplex.com
  56. 56. CSS3
  57. 57. ¿POR menos imágenes menos jsQUÉ? menos peticiones
  58. 58. MENOS IMÁGENESborder-radiusrgba y hslabox-shadowgradientsfont-face
  59. 59. MENOS JStransform:scaletransform:rotatetransform: translatetransform: skewtransition
  60. 60. ANIMATIONS mzl.la/ieGCct
  61. 61. 3D ANIMATIONStympanus.net/Development/ImageTransitions/index4.html
  62. 62. GPU ACCELERATION-webkit-transform: translateZ(0);
  63. 63. ADAPTAR LA WEB
  64. 64. ADAPTAR LA WEB
  65. 65. mediaqueri.es
  66. 66. MEDIA QUERIES@media screen and (max-width:320px){ #container {width: 300px;} header nav {display: none;}}
  67. 67. RESPONSIVE WEB DESIGN RESPONSIVE WEB R W DESIGN Dabookapart.com/products/responsive-web-design
  68. 68. RWDretícula fluidaimágenes flexiblesmedia queries
  69. 69. TARGET I .. CONTEXTOalistapart.com/articles/responsive-web-design
  70. 70. RESPONSIVE#container .column{ width: 67.0212765%; /* 630/940 */ margin-right: 2.12765%; /* 20/940 */}.img-container img{ max-width: 100%;}
  71. 71. MOBILE FIRST 12 3 abookapart.com/products/mobile-first
  72. 72. O F Í A ILO S V A F fallbackN U E detectar capacidades olvidarse del pixel perfect
  73. 73. DETECTAR CAPACIDADES modernizr.com
  74. 74. RESUMIENDOlas apps no son la (única) solucióntemplates = posibles incoherenciasel responsive web design es difícil
  75. 75. ¿LA SOLUCIÓN?
  76. 76. C I ASG R ¿ A p re gu nta s? Javier Usobiaga · @htmlboy Swwweet.com

×