CSS3                      HTML5                        JSEDICIÓN DE BOLSILLO   LA WEB EN DISPOSITIVOS MÓVILES    JAVIER US...
L   a Web Móvil no existe. Sólo existe La Web, yla vemos de distintas formas. Tampoco existe laWeb de Escritorio. Ni la We...
La web móvil no va de pantallas pequeñas.
La web móvil no va de  pantallas táctiles.
La web móvil no va de  conexiones lentas.
La web móvil no va deaplicaciones para SO.
La web móvil va del miedo a la pérdida de control.
optimiza siempre
La era de detectar elnavegador ha muerto.Llega la era de detectar    las capacidades.
1ESTRATEGIAS3 SOLUCIONES A UN MISMO RETO
No hacer nada.
No hacer nada.Hacer una plantilla diferente.
No hacer nada.Hacer una plantilla diferente.      Adaptar la web.
No hacer nada.Hacer una plantilla diferente.      Adaptar la web.
diseñar con fallback
detectar capacidades                 http://modernizr.com
rellenar huecoshttp://yepnopejs.com/                 http://bit.ly/listofpolyfills
2     CSS3OPTIMIZANDO RECURSOS
Menos imágenes.
Menos imágenes.Menos Javascript.
Menos imágenes.Menos Javascript.Menos peticiones.
border-radius   RGBabox-shadow @font-face  gradients
border-radius   RGBabox-shadow @font-face  gradients
http://leaverou.me/css3patterns/
http://www.colorzilla.com/gradient-editor/
CSS transforms:     scale    rotate     skew   translate
Transitions    &Animations
http://mzl.la/ieGCct
3D transforms
http://css3.bradshawenterprises.com/
-webkit-transform: translateZ(0);
media queries@media screen and (max-width:320px){    #container{      width: 300px;    }    header nav{      display: none...
http://mediaqueri.es
responsive web design  #container .column{    width: 31.12164296%;    margin-right: 3.3175355%;  }  .img-container img{   ...
responsive web design       http://www.abookapart.com/products/responsive-web-design
3         HTML5EL NAVEGADOR RECUPERA EL CONTROL
viewport<meta name = "viewport"content = "width = device-width,         initial-scale = 1.0" >
video / audio<video controls>    <source src="vid.mp4" >    <source src="vid.ogv" >    <!-- Puedes añadir un         repro...
formularios<input type=”email” /><input type=”url” /><input type=”number” /><input type=”search” /><input type=”date” /><i...
formularios
4 HTML5             JSAMPLIANDO FUNCIONALIDADES
local storageoffline (cache)web workersweb sockets
canvas         http://playbiolab.com/
geolocalización
5 TOUCHDÍSELO CON GESTOS
touch eventsaddEventListener(touchstart...)	addEventListener(touchmove...)	addEventListener(touchend...)
touch = touch + click  touchstart  mouseover  mousemove  mousedown  mouseup  click  estilos de :hover
swipe    http://plugins.jquery.com/project/swipe
gestures           http://jgestures.codeplex.com/
6FRAMEWORKS JS   ¿SON NECESARIOS?
http://jqtouch.comhttp://jquerymobile.comhttp://www.sencha.com/products/touchhttp://zeptojs.com
pausa dramática
:-)¡GRACIAS!     ¿PREGUNTAS?@HTMLBOY         SWWWEET.COM
AGRADECIMIENTOS       Y CRÉDITOS1 BRUCE LAWSON     .   .   .   http://brucelawson.co.uk2 PETER-PAUL KOCH .    .   .   http...
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Upcoming SlideShare
Loading in …5
×

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

7,259 views

Published on

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

No Downloads
Views
Total views
7,259
On SlideShare
0
From Embeds
0
Number of Embeds
443
Actions
Shares
0
Downloads
178
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide

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

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

×