Curso HTML 5 - Módulo 3

458 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
458
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Curso HTML 5 - Módulo 3

  1. 1. Preguntas ¿Responsive Web Design hace más trabajoso el proceso de construcción de sitio web? ¿RWD es la panacea?
  2. 2. Diseños Fluidos
  3. 3. ¿Layout fijos para el futuro? No Un layout fijo hace que los diseños se vean diferentes en diferentes navegadores.
  4. 4. ¿Layouts proporcionales? Sí http://www.alistapart.com/articles/responsive- web-design Formula a recordar  target / context = result
  5. 5. Layouts proporcionales#wrapper { margin-right: auto; margin-left: auto; width: 960px;}#header { margin-right: 1.0416667%; /* 10 ÷ 960 */ margin-left: 1.0416667%; /* 10 ÷ 960 */ width: 97.9166667%; /* 940 ÷ 960 */}
  6. 6. Uso de ems en lugar de pixeles paratipografía font-size: 100% font-size: 16px; font-size: 1em; Importante recordar fórmula:  target / context = result
  7. 7. Imágenes Fluidasimg { max-width: 100%;}img, object, video, embed { max-width: 100%;}
  8. 8. Imágenes Fluidas (otra solución) http://filamentgroup.com/lab/responsive_images_ experimenting_with_context_aware_image_sizing / http://filamentgroup.com/examples/responsive- images/ http://adaptive-images.com/
  9. 9. CSS Grid systems Frameworks para dividir el sitio. CSS Frameworks  Semantic (http://semantic.gs)  Skeleton (http://getskeleton.com)  Less Framework (http://lessframework.com)  1140 CSS Grid (http://cssgrid.net)  Columnal (http://www.columnal.com)

×