Your SlideShare is downloading. ×
  • Like
Diseñando la web móvil con HTML5 y CSS3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 13,559 views
Published

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

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

Published 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,559
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
246
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