Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Patrones de diseño CSS

4,950 views

Published on

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

Published in: Design
  • Be the first to comment

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

×