Your SlideShare is downloading. ×
Año Nuevo,  Herramientas Nuevas
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

Año Nuevo, Herramientas Nuevas

611
views

Published on

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

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

Published in: Design, Technology, Art & Photos

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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