frameworks css

66
I Betabeers Badajoz PCTEX - 20 Abril 2012 Introducción a los FRAMEWORKS CSS Luis Miguel Martín

Upload: betabeers

Post on 11-Aug-2015

283 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Frameworks CSS

I Betabeers Badajoz PCTEX - 20 Abril 2012

Introducción a los

FRAMEWORKS CSS Luis Miguel Martín

Page 2: Frameworks CSS

Introducción a los

FRAMEWORKS CSS Luis Miguel Martín

Page 3: Frameworks CSS

¿quién soy?

Page 4: Frameworks CSS

¿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: Frameworks CSS

INTRODUCCIÓN

Page 6: Frameworks CSS

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: Frameworks CSS

Problemática del desarrollo css

Page 8: Frameworks CSS

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: Frameworks CSS

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: Frameworks CSS

¿qué es un framework css?

Page 11: Frameworks CSS

¿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: Frameworks CSS

¿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: Frameworks CSS

Ventajas e inconvenientes

Page 14: Frameworks CSS

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: Frameworks CSS

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: Frameworks CSS

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: Frameworks CSS

Inconvenientes

• Curva de aprendizaje • Exceso de código HTML y CSS • Código y clases no semánticas • Código “ajeno”

Page 18: Frameworks CSS

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: Frameworks CSS

Inconvenientes

• Curva de aprendizaje • Exceso de código HTML y CSS • Código y clases no semánticas • Código “ajeno”

Page 20: Frameworks CSS

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: Frameworks CSS

Inconvenientes

• Curva de aprendizaje • Exceso de código HTML y CSS • Código y clases no semánticas • Código “ajeno”

Page 22: Frameworks CSS

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: Frameworks CSS

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: Frameworks CSS

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: Frameworks CSS

Inconvenientes

• Curva de aprendizaje • Exceso de código HTML y CSS • Código y clases no semánticas • Código “ajeno”

Page 26: Frameworks CSS

CÓDIGO “AJENO”

• Podemos vivir con ello ;-) • Un framework es una herramienta. Hay

que estudiarla y comprenderla para obtener resultados.

Page 27: Frameworks CSS

Inconvenientes

• Curva de aprendizaje • Exceso de código HTML y CSS • Código y clases no semánticas • Código “ajeno”

Page 28: Frameworks CSS

Panorámica de frameworks css

Page 29: Frameworks CSS

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: Frameworks CSS

¿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: Frameworks CSS

¿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 32: Frameworks CSS

1Kb css grid

http://1kbgrid.com/

¡NO FUNCIONA!

Page 33: Frameworks CSS

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: Frameworks CSS

.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 35: Frameworks CSS

960 grid system

http://960.gs/

Page 36: Frameworks CSS

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: Frameworks CSS

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: Frameworks CSS

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: Frameworks CSS

960 grid system

EJEMPLO Diseño realizado sobre una plantilla para Fireworks de retícula de 960.gs (12 columnas)

Page 40: Frameworks CSS

960 grid system

960 grider bookmark http://peol.github.com/960gridder/

Page 41: Frameworks CSS

blueprint

http://blueprintcss.org/

Page 42: Frameworks CSS

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: Frameworks CSS

blueprint

Page 44: Frameworks CSS

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 45: Frameworks CSS

foundation

http://foundation.zurb.com/

Page 46: Frameworks CSS

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: Frameworks CSS

foundation

Retícula adaptativa Anchos de

1024px y 600px

Page 48: Frameworks CSS

foundation

Page 49: Frameworks CSS

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: Frameworks CSS

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: Frameworks CSS

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 52: Frameworks CSS

bootstrap

http://twitter.github.com/bootstrap/

Page 53: Frameworks CSS

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: Frameworks CSS

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: Frameworks CSS

bootstrap

Page 56: Frameworks CSS

bootstrap

Page 57: Frameworks CSS

bootstrap

Page 58: Frameworks CSS

bootstrap

Page 59: Frameworks CSS

bootstrap

Page 60: Frameworks CSS

bootstrap

BOOTStrap fireworks http://www.extendingfireworks.com/?p=133

http://bootstrapfireworks.com/

Page 61: Frameworks CSS

comparativa

Page 62: Frameworks CSS

comparativa

retícula TIPOGRAFIAs PLANTILLAS

diseño Estilos FORMS

Estilos IMPRESIÓN

PLUGINS gemas

BOOTSTRAP F0UNDATION BLUEPRINT

960 GS 1KB GRID

Page 63: Frameworks CSS

Entonces, ¿cuál elijo?

Page 64: Frameworks CSS

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: Frameworks CSS

¿preguntas?

Page 66: Frameworks CSS

Muchas gracias

Luis Miguel Martín @lmmartin