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

on

  • 14,376 views

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

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

Statistics

Views

Total Views
14,376
Views on SlideShare
7,933
Embed Views
6,443

Actions

Likes
11
Downloads
237
Comments
3

14 Embeds 6,443

http://blog.javierusobiaga.com 6159
http://ticsyformacion.com 216
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
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Diseñando la web móvil con HTML5 y CSS3 Presentation 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