Successfully reported this slideshow.

Año Nuevo, Herramientas Nuevas

802 views

Published on

Drupaleada Enero 2012. Hablamos sobre nuevas herramientas que nos facilitan el desarrollo, HTML5, CSS3 y Responsive Web Design.

Published in: Design, Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

Año Nuevo, Herramientas Nuevas

  1. 1. AÑO NUEVO, HERRAMIENTAS NUEVAS DRUPALEADA ENERO 2012José Leiva - @leivajd
  2. 2. 2011, CSS3, HTML5, RWD,WebFonts, y más
  3. 3. CSS3 magic! 1!
  4. 4. Flash killer! 2!
  5. 5. http://code.google.com/p/html5shim/
  6. 6. Web fonts 3!
  7. 7. http://www.webtypography.net/
  8. 8. Salvadoras! 4!
  9. 9. RWD 5!
  10. 10. 1. Fluid Grid2. Media Queries3. Imágenes, videos, fonts, flexibles.
  11. 11. .col1 { width: 6.25%;} /*60 / 960*/.col2 { width: 14.58333333333333%;} /*140 / 960*/.col3 { width: 22.91666666666667%; } /*220 / 960*/
  12. 12. @media screen and (max-width: 600px) { .class { background: transparent; }}*Aplica si es menor a 600px.
  13. 13. @media only screen and (min-width: 768px) {}*Aplica si es mayor a 768px.
  14. 14. @media screen and (min-width: 600px) and(max-width: 900px) { .column { float: none; }}*Aplica si es entre 600px - 900px.
  15. 15. img,embed,object,video { max-width: 100%;}
  16. 16. h2 { margin-bottom: .75em; font-size : 2em; /* 36 / 16 = 2 */ line-height : 1.2;}
  17. 17. Mobile First
  18. 18. @media only screen and (min-width: 768px) {}*Aplica si es mayor a 768px.
  19. 19. Frameworks 6!
  20. 20. Qué tal uno propio?

×