Patrones de diseño CSS

4,749 views

Published on

Presentación sobre patrones de diseño CSS para simplificar, crear y mostrar. Aplicando esto a drupal.

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

No Downloads
Views
Total views
4,749
On SlideShare
0
From Embeds
0
Number of Embeds
3,052
Actions
Shares
0
Downloads
23
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Patrones de diseño CSS

  1. 1. Patrones de diseñoen CSSpor Iván MejíaMonday, April 22, 13
  2. 2. La razón de los patrones de diseño es minimizar elimpacto de las tareas repetidas en el desarrollo deun diseño de página.http://onwebdev.blogspot.com/2011/01/css-design-patterns.htmlMonday, April 22, 13
  3. 3. pero...Monday, April 22, 13
  4. 4. los patrones tambiénsirven para crear ypresentarMonday, April 22, 13
  5. 5. Pero vamos al inicioMonday, April 22, 13
  6. 6. ¿De dónde venimos?Monday, April 22, 13
  7. 7. ¿Cómo diseñamospáginas web?Monday, April 22, 13
  8. 8. ¿Composiciones finaleso fragmentos?Monday, April 22, 13
  9. 9. Monday, April 22, 13
  10. 10. Monday, April 22, 13
  11. 11. Monday, April 22, 13
  12. 12. Monday, April 22, 13
  13. 13. STYLE TILEShttp://styletil.esEn su forma más simple, un Style tile es un grupo deelementos comunes como los colores, la tipografía,texturas, patrones y características de diseño. Esparecido a el material de un diseñador de interiores.Monday, April 22, 13
  14. 14. Proceso de diseñoSkecth > STYLE TILES > MockupsMonday, April 22, 13
  15. 15. Monday, April 22, 13
  16. 16. Monday, April 22, 13
  17. 17. Monday, April 22, 13
  18. 18. Patrones de css(un poco de código)Monday, April 22, 13
  19. 19. The Reset Patternhtml, body, h1, h2, h3, h4, h5,h6 {margin: 0;padding: 0;font-size: 100%;}The Font Size Patternbody {font-size: 62.5%} /* 1em= 10px */Monday, April 22, 13
  20. 20. a:link, a:visited {color: #0062A0;text-decoration: underline;}a:hover {color: #202124;text-decoration: none;}a:active {color: #202124;text-decoration: none;color: #000;}Monday, April 22, 13
  21. 21. ¿Cómo se aplica esto a drupal?Monday, April 22, 13
  22. 22. Modulo style guidehttp://drupal.org/project/styleguideMonday, April 22, 13
  23. 23. EjemplosMonday, April 22, 13
  24. 24. Trabajando conLas HMonday, April 22, 13
  25. 25. TableMonday, April 22, 13
  26. 26. ¿Que otro?Monday, April 22, 13
  27. 27. Para finalizarMonday, April 22, 13
  28. 28. Usa patrones para2-Ahorrar tiempo3-Diseñar mejor1-SimplificarMonday, April 22, 13
  29. 29. Proposal: A Style Guide forSevenhttp://groups.drupal.org/node/283223¡Extra!Monday, April 22, 13
  30. 30. correo: koffer@gmail.comtwitter: @KofferSitio: drupalmexico.commedioyforma.infoMonday, April 22, 13

×