Your SlideShare is downloading. ×
  • Like
Device Days 2012 - HTML5 y CSS3 para móvil
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

Device Days 2012 - HTML5 y CSS3 para móvil

  • 3,426 views
Published

Slides de la charla "Diseñando la web móvil con HTML5 y CSS3" del Device Days 2012.

Slides de la charla "Diseñando la web móvil con HTML5 y CSS3" del Device Days 2012.

Published in Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,426
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
41
Comments
0
Likes
6

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 Device Days 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. +
  • 34. SÍNDROMEDE FLASH
  • 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. OFFLINE - CACHE
  • 43. OFFLINE - CACHE
  • 44. LOCAL STORAGE
  • 45. LOCAL STORAGElocalStorage.setItem(miClave,miValor);localStorage.getItem(miClave);localStorage.removeItem(miClave);localStorage.clear();
  • 46. WEB STORAGESQL INDEXED DB
  • 47. CANVAS
  • 48. CANVAS playbiolab.com
  • 49. SVG
  • 50. SVGsvg-wow.org
  • 51. GEOLOCALIZACIÓN
  • 52. PANTALLAS TÁCTILESmás intuitivomóvil != pantalla táctiltouch = touch + hover + clickmás interacción != mejor
  • 53. TOUCH EVENTSaddEventListener(touchstart...)!addEventListener(touchmove...)!addEventListener(touchend...)
  • 54. SWIPEplugins.jquery.com/project/swipe
  • 55. GESTURES jgestures.codeplex.com
  • 56. CSS3
  • 57. ¿POR menos imágenes menos jsQUÉ? menos peticiones
  • 58. MENOS IMÁGENESborder-radiusrgba y hslabox-shadowgradientsfont-face
  • 59. MENOS JStransform:scaletransform:rotatetransform: translatetransform: skewtransition
  • 60. ANIMATIONS mzl.la/ieGCct
  • 61. 3D ANIMATIONStympanus.net/Development/ImageTransitions/index4.html
  • 62. GPU ACCELERATION-webkit-transform: translateZ(0);
  • 63. ADAPTAR LA WEB
  • 64. ADAPTAR LA WEB
  • 65. mediaqueri.es
  • 66. MEDIA QUERIES@media screen and (max-width:320px){ #container {width: 300px;} header nav {display: none;}}
  • 67. RESPONSIVE WEB DESIGN RESPONSIVE WEB R W DESIGN Dabookapart.com/products/responsive-web-design
  • 68. RWDretícula fluidaimágenes flexiblesmedia queries
  • 69. TARGET I .. CONTEXTOalistapart.com/articles/responsive-web-design
  • 70. RESPONSIVE#container .column{ width: 67.0212765%; /* 630/940 */ margin-right: 2.12765%; /* 20/940 */}.img-container img{ max-width: 100%;}
  • 71. MOBILE FIRST 12 3 abookapart.com/products/mobile-first
  • 72. O F Í A ILO S V A F fallbackN U E detectar capacidades olvidarse del pixel perfect
  • 73. DETECTAR CAPACIDADES modernizr.com
  • 74. RESUMIENDOlas apps no son la (única) solucióntemplates = posibles incoherenciasel responsive web design es difícil
  • 75. ¿LA SOLUCIÓN?
  • 76. C I ASG R ¿ A p re gu nta s? Javier Usobiaga · @htmlboy Swwweet.com