Your SlideShare is downloading. ×
0
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Edición de bolsillo: CSS3, HTML5 y JS para la web móvil

6,742

Published on

Published in: Technology, Design
0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,742
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
176
Comments
0
Likes
19
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. CSS3 HTML5 JSEDICIÓN DE BOLSILLO LA WEB EN DISPOSITIVOS MÓVILES JAVIER USOBIAGA SUBFLASH 2011
  • 2. L a Web Móvil no existe. Sólo existe La Web, yla vemos de distintas formas. Tampoco existe laWeb de Escritorio. Ni la Web de Tablet. Gracias. Stephen Hay - There is no Movile Web
  • 3. La web móvil no va de pantallas pequeñas.
  • 4. La web móvil no va de pantallas táctiles.
  • 5. La web móvil no va de conexiones lentas.
  • 6. La web móvil no va deaplicaciones para SO.
  • 7. La web móvil va del miedo a la pérdida de control.
  • 8. optimiza siempre
  • 9. La era de detectar elnavegador ha muerto.Llega la era de detectar las capacidades.
  • 10. 1ESTRATEGIAS3 SOLUCIONES A UN MISMO RETO
  • 11. No hacer nada.
  • 12. No hacer nada.Hacer una plantilla diferente.
  • 13. No hacer nada.Hacer una plantilla diferente. Adaptar la web.
  • 14. No hacer nada.Hacer una plantilla diferente. Adaptar la web.
  • 15. diseñar con fallback
  • 16. detectar capacidades http://modernizr.com
  • 17. rellenar huecoshttp://yepnopejs.com/ http://bit.ly/listofpolyfills
  • 18. 2 CSS3OPTIMIZANDO RECURSOS
  • 19. Menos imágenes.
  • 20. Menos imágenes.Menos Javascript.
  • 21. Menos imágenes.Menos Javascript.Menos peticiones.
  • 22. border-radius RGBabox-shadow @font-face gradients
  • 23. border-radius RGBabox-shadow @font-face gradients
  • 24. http://leaverou.me/css3patterns/
  • 25. http://www.colorzilla.com/gradient-editor/
  • 26. CSS transforms: scale rotate skew translate
  • 27. Transitions &Animations
  • 28. http://mzl.la/ieGCct
  • 29. 3D transforms
  • 30. http://css3.bradshawenterprises.com/
  • 31. -webkit-transform: translateZ(0);
  • 32. media queries@media screen and (max-width:320px){ #container{ width: 300px; } header nav{ display: none; }}
  • 33. http://mediaqueri.es
  • 34. responsive web design #container .column{ width: 31.12164296%; margin-right: 3.3175355%; } .img-container img{ max-width: 100%; } http://www.alistapart.com/articles/responsive-web-design
  • 35. responsive web design http://www.abookapart.com/products/responsive-web-design
  • 36. 3 HTML5EL NAVEGADOR RECUPERA EL CONTROL
  • 37. viewport<meta name = "viewport"content = "width = device-width, initial-scale = 1.0" >
  • 38. video / audio<video controls> <source src="vid.mp4" > <source src="vid.ogv" > <!-- Puedes añadir un reproductor Flash --></video>
  • 39. formularios<input type=”email” /><input type=”url” /><input type=”number” /><input type=”search” /><input type=”date” /><input type=”color” />
  • 40. formularios
  • 41. 4 HTML5 JSAMPLIANDO FUNCIONALIDADES
  • 42. local storageoffline (cache)web workersweb sockets
  • 43. canvas http://playbiolab.com/
  • 44. geolocalización
  • 45. 5 TOUCHDÍSELO CON GESTOS
  • 46. touch eventsaddEventListener(touchstart...) addEventListener(touchmove...) addEventListener(touchend...)
  • 47. touch = touch + click touchstart mouseover mousemove mousedown mouseup click estilos de :hover
  • 48. swipe http://plugins.jquery.com/project/swipe
  • 49. gestures http://jgestures.codeplex.com/
  • 50. 6FRAMEWORKS JS ¿SON NECESARIOS?
  • 51. http://jqtouch.comhttp://jquerymobile.comhttp://www.sencha.com/products/touchhttp://zeptojs.com
  • 52. pausa dramática
  • 53. :-)¡GRACIAS! ¿PREGUNTAS?@HTMLBOY SWWWEET.COM
  • 54. AGRADECIMIENTOS Y CRÉDITOS1 BRUCE LAWSON . . . http://brucelawson.co.uk2 PETER-PAUL KOCH . . . http://quirksmode.org3 ETHAN MARCOTTE . . http://unstoppablerobotninja.com4 JEREMY KEITH . . . http://adactio.com5 LUKE WROBLEWSKY . . http://lukew.com6 STEPHEN HAY . . . http://the-haystack.com

×