Download - Introducción a los Frameworks CSS
![Page 1: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/1.jpg)
I Betabeers Badajoz PCTEX - 20 Abril 2012
Introducción a los
FRAMEWORKS CSS Luis Miguel Martín
![Page 2: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/2.jpg)
Introducción a los
FRAMEWORKS CSS Luis Miguel Martín
![Page 3: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/3.jpg)
¿quién soy?
![Page 4: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/4.jpg)
¿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
![Page 5: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/5.jpg)
INTRODUCCIÓN
![Page 6: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/6.jpg)
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?
![Page 7: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/7.jpg)
Problemática del desarrollo css
![Page 8: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/8.jpg)
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,....)
![Page 9: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/9.jpg)
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
• …
![Page 10: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/10.jpg)
¿qué es un framework css?
![Page 11: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/11.jpg)
¿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/
![Page 12: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/12.jpg)
¿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/
![Page 13: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/13.jpg)
Ventajas e inconvenientes
![Page 14: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/14.jpg)
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,...
![Page 15: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/15.jpg)
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?
![Page 16: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/16.jpg)
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?
![Page 17: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/17.jpg)
Inconvenientes
• Curva de aprendizaje • Exceso de código HTML y CSS • Código y clases no semánticas • Código “ajeno”
![Page 18: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/18.jpg)
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.
![Page 19: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/19.jpg)
Inconvenientes
• Curva de aprendizaje • Exceso de código HTML y CSS • Código y clases no semánticas • Código “ajeno”
![Page 20: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/20.jpg)
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,…
![Page 21: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/21.jpg)
Inconvenientes
• Curva de aprendizaje • Exceso de código HTML y CSS • Código y clases no semánticas • Código “ajeno”
![Page 22: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/22.jpg)
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
![Page 23: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/23.jpg)
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>
![Page 24: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/24.jpg)
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
![Page 25: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/25.jpg)
Inconvenientes
• Curva de aprendizaje • Exceso de código HTML y CSS • Código y clases no semánticas • Código “ajeno”
![Page 26: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/26.jpg)
CÓDIGO “AJENO”
• Podemos vivir con ello ;-) • Un framework es una herramienta. Hay
que estudiarla y comprenderla para obtener resultados.
![Page 27: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/27.jpg)
Inconvenientes
• Curva de aprendizaje • Exceso de código HTML y CSS • Código y clases no semánticas • Código “ajeno”
![Page 28: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/28.jpg)
Panorámica de frameworks css
![Page 29: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/29.jpg)
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
![Page 30: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/30.jpg)
¿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
![Page 31: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/31.jpg)
¿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,…
![Page 33: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/33.jpg)
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
![Page 34: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/34.jpg)
.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
![Page 36: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/36.jpg)
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)
![Page 37: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/37.jpg)
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
![Page 38: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/38.jpg)
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/
![Page 39: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/39.jpg)
960 grid system
EJEMPLO Diseño realizado sobre una plantilla para Fireworks de retícula de 960.gs (12 columnas)
![Page 40: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/40.jpg)
960 grid system
960 grider bookmark http://peol.github.com/960gridder/
![Page 42: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/42.jpg)
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
![Page 43: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/43.jpg)
blueprint
![Page 44: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/44.jpg)
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
![Page 46: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/46.jpg)
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,…
![Page 47: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/47.jpg)
foundation
Retícula adaptativa Anchos de
1024px y 600px
![Page 48: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/48.jpg)
foundation
![Page 49: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/49.jpg)
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
![Page 50: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/50.jpg)
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
![Page 51: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/51.jpg)
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
![Page 53: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/53.jpg)
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.)
![Page 54: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/54.jpg)
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/
![Page 55: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/55.jpg)
bootstrap
![Page 56: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/56.jpg)
bootstrap
![Page 57: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/57.jpg)
bootstrap
![Page 58: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/58.jpg)
bootstrap
![Page 59: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/59.jpg)
bootstrap
![Page 60: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/60.jpg)
bootstrap
BOOTStrap fireworks http://www.extendingfireworks.com/?p=133
http://bootstrapfireworks.com/
![Page 61: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/61.jpg)
comparativa
![Page 62: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/62.jpg)
comparativa
retícula TIPOGRAFIAs PLANTILLAS
diseño Estilos FORMS
Estilos IMPRESIÓN
PLUGINS gemas
BOOTSTRAP F0UNDATION BLUEPRINT
960 GS 1KB GRID
![Page 63: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/63.jpg)
Entonces, ¿cuál elijo?
![Page 64: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/64.jpg)
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)
![Page 65: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/65.jpg)
¿preguntas?
![Page 66: Introducción a los Frameworks CSS](https://reader037.vdocuments.pub/reader037/viewer/2022100220/55621c5cd8b42ad44d8b47e5/html5/thumbnails/66.jpg)
Muchas gracias
Luis Miguel Martín @lmmartin