Frameworks CSS
0 recomendaciones396 vistas
Este documento introduce los frameworks CSS. Explica que son herramientas que abstraen tareas repetitivas de desarrollo CSS para aumentar la productividad. Explora ventajas como código más consistente y mantenible, e inconvenientes como curva de aprendizaje. Luego resume algunos frameworks populares como 1KB Grid, 960 Grid System, Blueprint y Bootstrap, destacando sus características como uso de retículas y facilidad de uso.
Frameworks CSS
- 1. Introducción a los FRAMEWORKS CSS Luis Miguel Martín I Betabeers Badajoz PCTEX - 20 Abril 2012
- 2. Introducción a los FRAMEWORKS CSS Luis Miguel Martín
- 3. ¿quién soy?
- 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. INTRODUCCIÓN
- 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. Problemática del desarrollo css
- 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. 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. ¿qué es un framework css?
- 11. ¿Qué es un Framework CSS? “Un conjunto de herramientas, librerías, convenciones y buenas prácticas que abstraen tareas repetitivas y rutinarias en elementos genéricos que pueden reutilizarse.” JEFF CROFT http://www.alistapart.com/articles/frameworksfordesigners/
- 12. ¿Y CUÁL ES SU OBJETIVO? “Que el desarrollador o diseñador se enfoque en las tareas que son exclusivas de un determinado proyecto, en lugar de reinventar la rueda una y otra vez.” JEFF CROFT http://www.alistapart.com/articles/frameworksfordesigners/
- 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. 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. 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. Inconvenientes • Curva de aprendizaje • Exceso de código HTML y CSS • Código y clases no semánticas • Código “ajeno”
- 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. Inconvenientes • Curva de aprendizaje • Exceso de código HTML y CSS • Código y clases no semánticas • Código “ajeno”
- 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. Inconvenientes • Curva de aprendizaje • Exceso de código HTML y CSS • Código y clases no semánticas • Código “ajeno”
- 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. CÓDIGO NO SEMÁNTICO DIV + 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. 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. Inconvenientes • Curva de aprendizaje • Exceso de código HTML y CSS • Código y clases no semánticas • Código “ajeno”
- 26. CÓDIGO “AJENO” • Podemos vivir con ello ;-) • Un framework es una herramienta. Hay que estudiarla y comprenderla para obtener resultados.
- 27. Inconvenientes • Curva de aprendizaje • Exceso de código HTML y CSS • Código y clases no semánticas • Código “ajeno”
- 28. Panorámica de frameworks css
- 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. ¿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. ¿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. 1Kb css grid ¡NO FUNCIONA! http://1kbgrid.com/
- 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. 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
- 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. 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. 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. 960 grid system EJEMPLO Diseño realizado sobre una plantilla para Fireworks de retícula de 960.gs (12 columnas)
- 40. 960 grid system 960 grider bookmark http://peol.github.com/960gridder/
- 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. blueprint
- 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
- 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. foundation Retícula adaptativa Anchos de 1024px y 600px
- 48. foundation
- 49. foundation Retícula adaptativa Sólida retícula base, adaptativa y móvil Elementos de interfaz Botones, formularios, tabs, sliders, tooltips, modales… DOCUMENTACIÓN Sencilla y completa EXTRA Gemas para Conpass/SASS y Rails
- 50. foundation Retícula adaptativa Sólida retícula base, adaptativa y móvil Elementos de interfaz Botones, formularios, tabs, sliders, tooltips, modales… DOCUMENTACIÓN Sencilla y completa EXTRA Gemas para Conpass/SASS y Rails
- 51. foundation Retícula adaptativa Sólida retícula base, adaptativay móvil Elementos de interfaz Botones, formularios, tabs, sliders, tooltips, modales… DOCUMENTACIÓN Sencilla y completa EXTRA Gemas para Conpass/SASS y Rails
- 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. 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. bootstrap
- 56. bootstrap
- 57. bootstrap
- 58. bootstrap
- 59. bootstrap
- 60. bootstrap BOOTStrap fireworks http://www.extendingfireworks.com/?p=133 http://bootstrapfireworks.com/
- 61. comparativa
- 62. comparativa PLANTILLAS Estilos Estilos retícula TIPOGRAFIAs PLUGINS gemas diseño FORMS IMPRESIÓN BOOTSTRAP F0UNDATION BLUEPRINT 960 GS 1KB GRID
- 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. ¿preguntas?
- 66. Muchas gracias Luis Miguel Martín @lmmartin