Frameworks CSS

325 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
325
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Frameworks CSS

  1. 1. Introducción a los FRAMEWORKS CSS Luis Miguel MartínI Betabeers BadajozPCTEX - 20 Abril 2012
  2. 2. Introducción a losFRAMEWORKS CSS Luis Miguel Martín
  3. 3. ¿quién soy?
  4. 4. ¿Quién soy?• Consultor, diseñador y desarrollador front-end especializado en crear sitios web centrados en el usuario• Más de 11 años experiencia en diversos aspectos del desarrollo web• Fundamentalista de los estándares web
  5. 5. INTRODUCCIÓN
  6. 6. Introducción• Problemática del desarrollo con CSS• ¿Qué es un Framework CSS?• Ventajas e Inconvenientes• Panorámica de Frameworks CSS• Comparativa• Entonces, ¿cuál elijo?
  7. 7. Problemática del desarrollo css
  8. 8. Problemática del desarrollo CSS• Es lento: – Diseño distinto en cada proyecto – Preparación y optimización de gráficos – Carácter artesano• Reutilización de código anterior• Se dedica mucho tiempo a tareas infructuosas (depurar para IE, extensiones propietarias,....)
  9. 9. Problemática del desarrollo CSS• No existen normas a la hora de programar en CSS (nomenclaturas, identación,...)• Dificultad con código de terceros (incluso, dentro de un mismo equipo)• El programador “puro” no sabe CSS: – NO es un lenguaje de programación• …
  10. 10. ¿qué es un framework css?
  11. 11. ¿Qué es un Framework CSS?“Un conjunto de herramientas, librerías,convenciones y buenas prácticas queabstraen tareas repetitivas yrutinarias en elementos genéricosque pueden reutilizarse.”JEFF CROFThttp://www.alistapart.com/articles/frameworksfordesigners/
  12. 12. ¿Y CUÁL ES SU OBJETIVO?“Que el desarrollador o diseñador seenfoque en las tareas que sonexclusivas de un determinadoproyecto, en lugar de reinventar larueda una y otra vez.”JEFF CROFThttp://www.alistapart.com/articles/frameworksfordesigners/
  13. 13. Ventajas e inconvenientes
  14. 14. Ventajas• Aumentan la productividad• Código más consistente y estructurado• Testeo y depuración minimizada• Facilidad de mantenimiento• Facilita el trabajo en equipo• Agilizan la repetición de procesos• Otras: preprocesado en servidor (LESS/SASS), integración en CMS,...
  15. 15. Inconvenientes• Curva de aprendizaje• Exceso de código HTML y CSS• Código y clases no semánticas• Código “ajeno”• ¿Más lento que partir de cero?• ¿Restricciones de diseño?
  16. 16. Inconvenientes• Curva de aprendizaje• Exceso de código HTML y CSS• Código y clases no semánticas• Código “ajeno”• ¿Más lento que partir de cero?• ¿Restricciones de diseño?
  17. 17. Inconvenientes• Curva de aprendizaje• Exceso de código HTML y CSS• Código y clases no semánticas• Código “ajeno”
  18. 18. CURVA DE APRENDIZAJE• La mayoría de los frameworks tienen una curva sencilla.• Al aportar una base común documentada facilita la incorporación de nuevos miembros al equipo.• Incluirlo en la metodología de trabajo mejora el proceso de desarrollo y disminuye el tiempo de aprendizaje.
  19. 19. Inconvenientes• Curva de aprendizaje• Exceso de código HTML y CSS• Código y clases no semánticas• Código “ajeno”
  20. 20. EXCESO DE CÓDIGO HTML Y CSS• ¿Es crítico para tu proyecto?• Emplea sólo lo que necesites• Comprime. Minimiza. Une. – Compresión HTTP – Minimiza JS y CSS: Eliminar espacios en blanco, saltos de carro, identaciones,… – Combina archivos CSS y JS – Otros: caché, CDN,…
  21. 21. Inconvenientes• Curva de aprendizaje• Exceso de código HTML y CSS• Código y clases no semánticas• Código “ajeno”
  22. 22. CÓDIGO NO SEMÁNTICO• DIV y SPAN no tienen significado semántico (son neutrales) The global structure of an HTML document http://www.w3.org/TR/html401/struct/global.html#h-7.5.4
  23. 23. CÓDIGO NO SEMÁNTICODIV + ID/CLASS = valor semántico nulo Etiq. HTML5 = valor semántico alto <div id="header"> <header> ... ... </div> </header> <div id="nav"> <nav> ... ... </div> </nav> <div class="article"> <article> ... ... </div> </article> <div id="footer"> <footer> ... ... </div> </footer>
  24. 24. CÓDIGO NO SEMÁNTICO LA SEMÁNTICA ESTÁ AQUÍ<etiqueta class="tomate queso">Merendola</etiqueta> No aquí La semántica web no incluye CSS
  25. 25. Inconvenientes• Curva de aprendizaje• Exceso de código HTML y CSS• Código y clases no semánticas• Código “ajeno”
  26. 26. CÓDIGO “AJENO”• Podemos vivir con ello ;-)• Un framework es una herramienta. Hay que estudiarla y comprenderla para obtener resultados.
  27. 27. Inconvenientes• Curva de aprendizaje• Exceso de código HTML y CSS• Código y clases no semánticas• Código “ajeno”
  28. 28. Panorámica de frameworks css
  29. 29. Panorámica de frameworks css• ¡¡Existe una enorme variedad!!• Hablaremos de 1 Kb CSS Grid, 960.gs, Blueprint, Foundation (Zurb) y Bootstrap (Twitter)• Algunos admiten plugins y extensiones para hacerlos más versátiles (responsive design, por ejemplo) o incorporar funcionalidades
  30. 30. ¿qué nos permiten hacer?• Resetear estilos para normalizar las propiedades básicas de los elementos a fin de eliminar diferencias de visualización entre navegadores. – reset.css• Realizar una gestión global de las tipografías que se usarán en la página. – text.css
  31. 31. ¿qué nos permiten hacer?• Maquetar un diseño de forma óptima y compatible con todos los navegadores. – layout.css, grid.css,…• Estilos específicos para impresión – print.css• Personalizaciones y código específco – style.css, custom.css,…
  32. 32. 1Kb css grid ¡NO FUNCIONA!http://1kbgrid.com/
  33. 33. 1Kb css grid• Enfocado únicamente a disposición de elementos en retícula.• Retícula de 12 columnas, 60px ancho con espaciado de 20px (personalizable)• Ancho total: 960px
  34. 34. 1Kb css grid<div class="row"> .grid_1 { width:60px; } <div class="column grid_4"> </div> .grid_2 { width:140px; } <div class="column grid_4"> </div> .grid_3 { width:220px; } <div class="column grid_4"> </div> .grid_4 { width:300px; } .grid_5 { width:380px; }</div> .grid_6 { width:460px; }<div class="row“> .grid_7 { width:540px; } <div class="column grid_8"> </div> .grid_8 { width:620px; } <div class="column grid_4"> </div> .grid_9 { width:700px; }</div> .grid_10 { width:780px; }<div class="row"> .grid_11 { width:860px; } <div class="column grid_2"> </div> .grid_12 { width:940px; } <div class="column grid_4"> </div> .column { <div class="column grid_3"> </div> margin: 0 10px; <div class="column grid_3"> </div> overflow: hidden;</div> float: left; display: inline; } .row { width: 960px; margin: 0 auto; overflow: hidden; } .row .row { margin: 0 -10px; width: auto; display: inline-block; html } css completo
  35. 35. 960 grid systemhttp://960.gs/
  36. 36. 960 grid system• Proporciona sistema de retículas mucho más completo.• Retículas base: – 12 columnas (60px ancho/20px espaciado) – 16 columnas (40px ancho/20px espaciado) – 24 columnas (30px ancho/10px espaciado)• Ancho fijo total: 960px (obviamente)
  37. 37. 960 grid system <div class="grid_12"> <p>940</p> </div> <!-- end .grid_12 --> <div class="clear"></div> <div class="grid_1“> <p>60</p> </div> <!-- end .grid_1 --> <div class="grid_11"> <p>860</p> </div> <!-- end .grid_11 --> <div class="clear"></div> <div class="grid_2"> <p>140</p> </div> <!-- end .grid_2 --> <div class="grid_10"> <p>780</p> </div> <!-- end .grid_10 --> html
  38. 38. 960 grid system• Incorpora: reset CSS, estilos tipográficos y soporte para idiomas RTL• Incluye plantillas de diseño• Extras: – Personalizable: http://grids.heroku.com/ – Retícula fluida: http://www.designinfluences.com/fluid960gs/ – Diseño adaptativa: http://adapt.960.gs/
  39. 39. 960 grid system EJEMPLO Diseño realizado sobre una plantilla para Fireworks de retícula de 960.gs (12 columnas)
  40. 40. 960 grid system 960 grider bookmark http://peol.github.com/960gridder/
  41. 41. blueprinthttp://blueprintcss.org/
  42. 42. blueprint• Sistema de retícula completo y versátil.• Retícula base de 24 columnas (30px ancho/10px espaciado)• Ancho fijo total: 950px• Incorpora: reset CSS, estilos para tipografías, formularios e impresión• También, soporte para idiomas RTL
  43. 43. blueprint
  44. 44. blueprint• Gran cantidad de plugins y extensiones (botones, tabs, retícula fluida,…)• Plantillas gráficas para diseñar sobre la retícula• Gemas para Rails• Más información y recursos: – https://github.com/joshuaclayton/blueprint- css/wiki
  45. 45. foundationhttp://foundation.zurb.com/
  46. 46. foundation• Sistema de retícula completo, adaptativo, móvil y muy flexible• Retícula base de 12 columnas (fluidas, fijas, combinables,…)• Ancho máximo y mínimo configurable• Nomenclatura muy sencilla y natural• Incluye: formularios, botones, elementos de interfaz, sliders, modales,…
  47. 47. foundationRetícula adaptativa Anchos de 1024px y 600px
  48. 48. foundation
  49. 49. foundation Retícula adaptativa Sólida retícula base, adaptativa y móvilElementos de interfazBotones, formularios, tabs,sliders, tooltips, modales… DOCUMENTACIÓN Sencilla y completa EXTRA Gemas para Conpass/SASS y Rails
  50. 50. foundation Retícula adaptativa Sólida retícula base, adaptativa y móvilElementos de interfazBotones, formularios, tabs,sliders, tooltips, modales… DOCUMENTACIÓN Sencilla y completa EXTRA Gemas para Conpass/SASS y Rails
  51. 51. foundation Retícula adaptativa Sólida retícula base, adaptativay móvilElementos de interfazBotones, formularios, tabs,sliders, tooltips, modales… DOCUMENTACIÓN Sencilla y completa EXTRA Gemas para Conpass/SASS y Rails
  52. 52. bootstraphttp://twitter.github.com/bootstrap/
  53. 53. bootstrap• Sistema de retícula completo, adaptativo, móvil y muy flexible• Retícula base de 12 columnas (60px ancho/20px espaciado)• Ancho fijo total: 940px• Construido y personalizable con LESS (variables, mixins, etc.)
  54. 54. bootstrap• Incluye: tipografías, retículas adaptativas y móviles, formularios, botones, elementos de interfaz,… EL MÁS COMPLETO!• Multitud de plugins jQuery: sliders, modales, tooltips, tabs,…• Extra: – Skins para Bootstrap: http://bootswatch.com/ – Themes ($): http://wrapbootstrap.com/
  55. 55. bootstrap
  56. 56. bootstrap
  57. 57. bootstrap
  58. 58. bootstrap
  59. 59. bootstrap
  60. 60. bootstrap BOOTStrap fireworks http://www.extendingfireworks.com/?p=133 http://bootstrapfireworks.com/
  61. 61. comparativa
  62. 62. comparativa PLANTILLAS Estilos Estilos retícula TIPOGRAFIAs PLUGINS gemas diseño FORMS IMPRESIÓNBOOTSTRAP       F0UNDATION      BLUEPRINT        960 GS      1KB GRID 
  63. 63. Entonces, ¿cuál elijo?
  64. 64. Entonces, ¿cuál elijo?• No hay frameworks mejores ni peores; sino el que mejor se adapta a tu proyecto: – ¿Qué tamaño va a tener el proyecto? – ¿Necesitas integrarlo en Rails o SASS? – ¿Quieres componentes ya listos para usar o únicamente una retícula?• Personalmente, eligiría 960.gs, Foundation o Bootstrap (personalizado)
  65. 65. ¿preguntas?
  66. 66. Muchas graciasLuis Miguel Martín @lmmartin

×