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

  • 13,484 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
13,484
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
243
Comments
3
Likes
11

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. WEB MÓVIL
  • 3. 2012 los smartphonesno son cosa de geeks
  • 4. PERO...¿QUÉ ES UN MÓVIL?
  • 5. ¿un dispositivo con una pantalla pequeña?
  • 6. ¿un dispositivoque se puedellevar encimafácilmente?
  • 7. ¿un dispositivo que se utiliza normalmente en la calle?
  • 8. ¿cualquierdispositivocon una pantallatáctil y a color?
  • 9. ¿cualquier dispositivo que no seaun 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 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. 8 0 % de las apps de marca no llegan a 1.000 descargas bit.ly/app-fail
  • 22. +esfuerzo +costes +dolorapp app web{ { {
  • 23. ¿Y UNATEMPLATE MÓVIL?
  • 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. +versiones +código +dolorweb web web{ { {
  • 26. UNAWEB
  • 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. CONTENIDO
  • 29. CÓMO SE VERÁ NUESTRA WEBUNA WEB ? ? ?
  • 30. +flexible -control -costesweb{
  • 31. REGLA DE ORO* web app = template contenido = una web*O DE BRONCE
  • 32. ¿CON QUÉ HERRAMIENTAS CONTAMOS ?
  • 33. O F Í A ILO S V A F fallbackN U E detectar capacidades olvidarse del pixel perfect
  • 34. DETECTAR CAPACIDADES modernizr.com
  • 35. VIEWPORTinitial-scale = 1.0width = device-widthuser-scalable = yesmaximum-scale = NO!
  • 36. VIEWPORT<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
  • 37. MULTIMEDIAtags <video> y <audio>formato no unificadoTIP: usar mp4 y webMFlash como fallback
  • 38. VIDEO & AUDIO<video controls> <source src="video.mp4" > <source src="video.webm" > <!-- Puedes añadir un reproductor Flash --></video>
  • 39. FORMULARIOSnuevos inputmejor experiencia de usuariovalidación nativa (o casi...)
  • 40. FORMULARIOS<input type=”email” /><input type=”url” /><input type=”number” /><input type=”date” />
  • 41. FORMULARIOS
  • 42. JS APISlocal storageoffline (cache)web workersweb sockets
  • 43. CANVAS playbiolab.com
  • 44. GEOLOCALIZACIÓN
  • 45. PANTALLAS TÁCTILESmás intuitivomóvil != pantalla táctiltouch = touch + hover + clickmás interacción != mejor
  • 46. TOUCH EVENTSaddEventListener(touchstart...)!addEventListener(touchmove...)!addEventListener(touchend...)
  • 47. SWIPEplugins.jquery.com/project/swipe
  • 48. GESTURES jgestures.codeplex.com
  • 49. CSS3
  • 50. ¿POR menos imágenes menos jsQUÉ? menos peticiones
  • 51. - WEBKIT -:-( - MOZ MS - O
  • 52. BORDES REDONDEADOS
  • 53. BORDER RADIUS#box{ border-radius: 10px;}#circle{ border-radius: 50%;}
  • 54. TRANSPARENCIAS
  • 55. RGBA & HSLA#box{ background: rgba(84,69,54,.5);}#box2{ background: hsla(30,36%,33%,.5);}
  • 56. SOMBRAS
  • 57. BOX-SHADOW#box{ box-shadow: 5px 5px 10px #000;}
  • 58. TIPOGRAFÍA
  • 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. DEGRADADOS
  • 61. DEGRADADOS leaverou.me/css3patterns
  • 62. DEGRADADOS www.colorzilla.com/gradient-editor
  • 63. GRADIENT#box { background-image: linear-gradient (45deg, red, black);}
  • 64. TRANSFORMAR
  • 65. TRANSFORM#box{ transform: scale(.5);}
  • 66. TRANSFORMAR
  • 67. TRANSFORM#box{ transform: rotate(45deg);}
  • 68. TRANSFORMAR
  • 69. TRANSFORM#box{ transform: translate(20px, 40px);}
  • 70. TRANSFORMAR
  • 71. TRANSFORM#box{ transform: skew(5deg, 30deg);}
  • 72. MOVIMIENTO
  • 73. TRANSITION#box{ transition: 1s background ease-in;}
  • 74. ANIMATIONS mzl.la/ieGCct
  • 75. MOVIMIENTO 3D
  • 76. 3D ANIMATIONStympanus.net/Development/ImageTransitions/index4.html
  • 77. ADAPTAR LA WEB
  • 78. ADAPTAR LA WEB
  • 79. mediaqueri.es
  • 80. MEDIA QUERIES@media screen and (max-width:320px){ #container {width: 300px;} header nav {display: none;}}
  • 81. RESPONSIVE WEB DESIGN RESPONSIVE WEB R W DESIGN Dabookapart.com/products/responsive-web-design
  • 82. RWDretícula fluidaimágenes flexiblesmedia queries
  • 83. TARGET I .. CONTEXTOalistapart.com/articles/responsive-web-design
  • 84. RESPONSIVE#container .column{ width: 67.0212765%; /* 630/940 */ margin-right: 2.12765%; /* 20/940 */}.img-container img{ max-width: 100%;}
  • 85. MOBILE FIRST 12 3 abookapart.com/products/mobile-first
  • 86. RESUMIENDOlas apps no son la (única) solucióntemplates = posibles incoherenciasel responsive web design es difícil
  • 87. ¿LA SOLUCIÓN?
  • 88. C I ASG R ¿ A p re gu nta s? Javier Usobiaga · @htmlboy Swwweet.com
  • 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