Diseñando la web móvil con HTML5 y CSS3
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 14,452 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
14,452
On Slideshare
8,008
From Embeds
6,444
Number of Embeds
14

Actions

Shares
Downloads
241
Comments
3
Likes
11

Embeds 6,444

http://blog.javierusobiaga.com 6,159
http://ticsyformacion.com 217
http://masdemarketing.tumblr.com 32
https://twitter.com 16
http://us-w1.rockmelt.com 5
http://posterous.com 3
http://abtasty.com 3
http://t.co 2
http://cyberspace.com.es 2
http://ranksit.com 1
http://www.dominio.ws 1
https://si0.twimg.com 1
http://translate.googleusercontent.com 1
http://www.taringa.pro 1

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