Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frameworks CSS

Avatar for Betabeers Betabeers
April 21, 2012

Frameworks CSS

Ponente Luis Miguel Martín

Avatar for Betabeers

Betabeers

April 21, 2012
Tweet

More Decks by Betabeers

Other Decks in Education

Transcript

  1. I Betabeers Badajoz PCTEX - 20 Abril 2012 Introducción a

    los FRAMEWORKS CSS Luis Miguel Martín
  2. ¿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
  3. 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?
  4. 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,....)
  5. 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 • …
  6. ¿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/
  7. ¿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/
  8. 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,...
  9. 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?
  10. 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?
  11. Inconvenientes • Curva de aprendizaje • Exceso de código HTML

    y CSS • Código y clases no semánticas • Código “ajeno”
  12. 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.
  13. Inconvenientes • Curva de aprendizaje • Exceso de código HTML

    y CSS • Código y clases no semánticas • Código “ajeno”
  14. 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,…
  15. Inconvenientes • Curva de aprendizaje • Exceso de código HTML

    y CSS • Código y clases no semánticas • Código “ajeno”
  16. 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
  17. CÓDIGO NO SEMÁNTICO DIV + ID/CLASS = valor semántico nulo

    <div id="header"> ... </div> <div id="nav"> ... </div> <div class="article"> ... </div> <div id="footer"> ... </div> Etiq. HTML5 = valor semántico alto <header> ... </header> <nav> ... </nav> <article> ... </article> <footer> ... </footer>
  18. Inconvenientes • Curva de aprendizaje • Exceso de código HTML

    y CSS • Código y clases no semánticas • Código “ajeno”
  19. CÓDIGO “AJENO” • Podemos vivir con ello ;-) • Un

    framework es una herramienta. Hay que estudiarla y comprenderla para obtener resultados.
  20. Inconvenientes • Curva de aprendizaje • Exceso de código HTML

    y CSS • Código y clases no semánticas • Código “ajeno”
  21. 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
  22. ¿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
  23. ¿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,…
  24. 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
  25. .grid_1 { width:60px; } .grid_2 { width:140px; } .grid_3 {

    width:220px; } .grid_4 { width:300px; } .grid_5 { width:380px; } .grid_6 { width:460px; } .grid_7 { width:540px; } .grid_8 { width:620px; } .grid_9 { width:700px; } .grid_10 { width:780px; } .grid_11 { width:860px; } .grid_12 { width:940px; } .column { margin: 0 10px; overflow: hidden; float: left; display: inline; } .row { width: 960px; margin: 0 auto; overflow: hidden; } .row .row { margin: 0 -10px; width: auto; display: inline-block; } <div class="row"> <div class="column grid_4"> </div> <div class="column grid_4"> </div> <div class="column grid_4"> </div> </div> <div class="row“> <div class="column grid_8"> </div> <div class="column grid_4"> </div> </div> <div class="row"> <div class="column grid_2"> </div> <div class="column grid_4"> </div> <div class="column grid_3"> </div> <div class="column grid_3"> </div> </div> 1Kb css grid html css completo
  26. 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)
  27. 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
  28. 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/
  29. 960 grid system EJEMPLO Diseño realizado sobre una plantilla para

    Fireworks de retícula de 960.gs (12 columnas)
  30. 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
  31. 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
  32. 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,…
  33. 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
  34. 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
  35. 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
  36. 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.)
  37. 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/
  38. comparativa retícula TIPOGRAFIAs PLANTILLAS diseño Estilos FORMS Estilos IMPRESIÓN PLUGINS

    gemas BOOTSTRAP        F0UNDATION       BLUEPRINT        960 GS      1KB GRID 
  39. 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)