Ó 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        ?
O F Í A            ILO S     V A F          fallbackN U E         detectar capacidades        olvidarse del pixel perfect
DETECTAR CAPACIDADES        modernizr.com
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
JS APISlocal storageoffline (cache)web workersweb sockets
CANVAS playbiolab.com
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
-   WEBKIT    -:-( -   MOZ        MS    -   O
BORDES REDONDEADOS
BORDER RADIUS#box{     border-radius: 10px;}#circle{     border-radius: 50%;}
TRANSPARENCIAS
RGBA & HSLA#box{     background: rgba(84,69,54,.5);}#box2{     background: hsla(30,36%,33%,.5);}
SOMBRAS
BOX-SHADOW#box{     box-shadow: 5px 5px 10px #000;}
TIPOGRAFÍA
@FONT-FACE@font-face {    font-family: myFont;    src: url(myFont.woff);    font-weight: normal;    font-style: normal;}  ...
DEGRADADOS
DEGRADADOS  leaverou.me/css3patterns
DEGRADADOS www.colorzilla.com/gradient-editor
GRADIENT#box {    background-image: linear-gradient       (45deg, red, black);}
TRANSFORMAR
TRANSFORM#box{    transform: scale(.5);}
TRANSFORMAR
TRANSFORM#box{    transform: rotate(45deg);}
TRANSFORMAR
TRANSFORM#box{    transform: translate(20px, 40px);}
TRANSFORMAR
TRANSFORM#box{    transform: skew(5deg, 30deg);}
MOVIMIENTO
TRANSITION#box{    transition: 1s background ease-in;}
ANIMATIONS   mzl.la/ieGCct
MOVIMIENTO 3D
3D ANIMATIONStympanus.net/Development/ImageTransitions/index4.html
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
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                               ...
CRÉDITOShttp://www.flickr.com/photos/joshfassbind/4683365102http://www.flickr.com/photos/docsearls/2268395744http://www.flick...
Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3
Upcoming SlideShare
Loading in...5
×

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

13,874

Published on

Presentación realizada por Javier Usobiaga en el Barcelona Visual Sound 2012

Published in: Technology
3 Comments
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
13,874
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
266
Comments
3
Likes
11
Embeds 0
No embeds

No notes for slide

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

  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 Barcelona Visual Sound 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. O F Í A ILO S V A F fallbackN U E detectar capacidades olvidarse del pixel perfect
  34. 34. DETECTAR CAPACIDADES modernizr.com
  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. JS APISlocal storageoffline (cache)web workersweb sockets
  43. 43. CANVAS playbiolab.com
  44. 44. GEOLOCALIZACIÓN
  45. 45. PANTALLAS TÁCTILESmás intuitivomóvil != pantalla táctiltouch = touch + hover + clickmás interacción != mejor
  46. 46. TOUCH EVENTSaddEventListener(touchstart...)!addEventListener(touchmove...)!addEventListener(touchend...)
  47. 47. SWIPEplugins.jquery.com/project/swipe
  48. 48. GESTURES jgestures.codeplex.com
  49. 49. CSS3
  50. 50. ¿POR menos imágenes menos jsQUÉ? menos peticiones
  51. 51. - WEBKIT -:-( - MOZ MS - O
  52. 52. BORDES REDONDEADOS
  53. 53. BORDER RADIUS#box{ border-radius: 10px;}#circle{ border-radius: 50%;}
  54. 54. TRANSPARENCIAS
  55. 55. RGBA & HSLA#box{ background: rgba(84,69,54,.5);}#box2{ background: hsla(30,36%,33%,.5);}
  56. 56. SOMBRAS
  57. 57. BOX-SHADOW#box{ box-shadow: 5px 5px 10px #000;}
  58. 58. TIPOGRAFÍA
  59. 59. @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
  60. 60. DEGRADADOS
  61. 61. DEGRADADOS leaverou.me/css3patterns
  62. 62. DEGRADADOS www.colorzilla.com/gradient-editor
  63. 63. GRADIENT#box { background-image: linear-gradient (45deg, red, black);}
  64. 64. TRANSFORMAR
  65. 65. TRANSFORM#box{ transform: scale(.5);}
  66. 66. TRANSFORMAR
  67. 67. TRANSFORM#box{ transform: rotate(45deg);}
  68. 68. TRANSFORMAR
  69. 69. TRANSFORM#box{ transform: translate(20px, 40px);}
  70. 70. TRANSFORMAR
  71. 71. TRANSFORM#box{ transform: skew(5deg, 30deg);}
  72. 72. MOVIMIENTO
  73. 73. TRANSITION#box{ transition: 1s background ease-in;}
  74. 74. ANIMATIONS mzl.la/ieGCct
  75. 75. MOVIMIENTO 3D
  76. 76. 3D ANIMATIONStympanus.net/Development/ImageTransitions/index4.html
  77. 77. ADAPTAR LA WEB
  78. 78. ADAPTAR LA WEB
  79. 79. mediaqueri.es
  80. 80. MEDIA QUERIES@media screen and (max-width:320px){ #container {width: 300px;} header nav {display: none;}}
  81. 81. RESPONSIVE WEB DESIGN RESPONSIVE WEB R W DESIGN Dabookapart.com/products/responsive-web-design
  82. 82. RWDretícula fluidaimágenes flexiblesmedia queries
  83. 83. TARGET I .. CONTEXTOalistapart.com/articles/responsive-web-design
  84. 84. RESPONSIVE#container .column{ width: 67.0212765%; /* 630/940 */ margin-right: 2.12765%; /* 20/940 */}.img-container img{ max-width: 100%;}
  85. 85. MOBILE FIRST 12 3 abookapart.com/products/mobile-first
  86. 86. RESUMIENDOlas apps no son la (única) solucióntemplates = posibles incoherenciasel responsive web design es difícil
  87. 87. ¿LA SOLUCIÓN?
  88. 88. C I ASG R ¿ A p re gu nta s? Javier Usobiaga · @htmlboy Swwweet.com
  89. 89. CRÉDITOShttp://www.flickr.com/photos/joshfassbind/4683365102http://www.flickr.com/photos/docsearls/2268395744http://www.flickr.com/photos/hermida/5442243540http://www.flickr.com/photos/yourdon/4064143718http://www.flickr.com/photos/bendodson/5338445045http://www.flickr.com/photos/rafelmiro/5090998436http://www.flickr.com/photos/jaynev/5831853872
  1. A particular slide catching your eye?

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

×