SlideShare una empresa de Scribd logo

Introducción a los Frameworks CSS

Luis Miguel Martín
Luis Miguel Martín
Luis Miguel MartínConsultor, diseñador y desarrollador web en Agencia Visual

Pequeña introducción al uso de los Frameworks CSS. Desde la problemática al desarrollo CSS al empleo de algunos frameworks (1kb CSS Grid, 960.gs, Blueprint, Foundation y Bootstrap) como mejora de la productividad.

Introducción a los Frameworks CSS

1 de 66
Descargar para leer sin conexión
Introducción a los

           FRAMEWORKS CSS
                        Luis Miguel Martín



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

FRAMEWORKS CSS
  Luis Miguel Martín
¿quién soy?
¿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
INTRODUCCIÓN
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?
Publicidad

Recomendados

Desarrollo Web: HTML + Bootstrap
Desarrollo Web: HTML + BootstrapDesarrollo Web: HTML + Bootstrap
Desarrollo Web: HTML + BootstrapWorkshop Digital
 
Desarollo rápido con Bootstrap
Desarollo rápido con BootstrapDesarollo rápido con Bootstrap
Desarollo rápido con Bootstrapbetabeers
 
Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5Cycle-IT
 
WPEuskadi 2015 - La potencia sin control no sirve de nada, claves para aprove...
WPEuskadi 2015 - La potencia sin control no sirve de nada, claves para aprove...WPEuskadi 2015 - La potencia sin control no sirve de nada, claves para aprove...
WPEuskadi 2015 - La potencia sin control no sirve de nada, claves para aprove...Darío BF
 

Más contenido relacionado

La actualidad más candente

Wordpress como framework - DarioBF en WordCamp Barcelona
Wordpress como framework - DarioBF en WordCamp BarcelonaWordpress como framework - DarioBF en WordCamp Barcelona
Wordpress como framework - DarioBF en WordCamp BarcelonaDarío BF
 
Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao
Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbaoDesarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao
Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbaoDarío BF
 
Introducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRIntroducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRvalgreens
 
Html5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyHtml5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyParadigma Digital
 
Conoce HTML5 y CSS3
Conoce HTML5 y CSS3Conoce HTML5 y CSS3
Conoce HTML5 y CSS3Marta Armada
 
Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Hernan Beati
 
Seminario html5
Seminario html5Seminario html5
Seminario html5UDECI
 
Buenas prácticas en el desarrollo con WordPress - #WCSantander
Buenas prácticas en el desarrollo con WordPress - #WCSantanderBuenas prácticas en el desarrollo con WordPress - #WCSantander
Buenas prácticas en el desarrollo con WordPress - #WCSantanderDarío BF
 
HTML5 y los desafíos del desarrollo web de HOY
HTML5 y los desafíos del desarrollo web de HOYHTML5 y los desafíos del desarrollo web de HOY
HTML5 y los desafíos del desarrollo web de HOYJuan Eladio Sánchez Rosas
 
Presentacion Wp Versión PDF
Presentacion Wp Versión PDFPresentacion Wp Versión PDF
Presentacion Wp Versión PDFJosé Fonseca
 

La actualidad más candente (19)

Wordpress como framework - DarioBF en WordCamp Barcelona
Wordpress como framework - DarioBF en WordCamp BarcelonaWordpress como framework - DarioBF en WordCamp Barcelona
Wordpress como framework - DarioBF en WordCamp Barcelona
 
Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao
Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbaoDesarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao
Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao
 
Taller maquetacion web
Taller maquetacion webTaller maquetacion web
Taller maquetacion web
 
Introducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRIntroducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGR
 
Html5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyHtml5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoy
 
Ria 03-html5-css3
Ria 03-html5-css3Ria 03-html5-css3
Ria 03-html5-css3
 
Conoce HTML5 y CSS3
Conoce HTML5 y CSS3Conoce HTML5 y CSS3
Conoce HTML5 y CSS3
 
Elementos de html5 y css3
Elementos de html5 y css3Elementos de html5 y css3
Elementos de html5 y css3
 
Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011
 
HTML5 y CSS3
HTML5 y CSS3HTML5 y CSS3
HTML5 y CSS3
 
Html 5 presente y futuro de la web
Html 5 presente y futuro de la webHtml 5 presente y futuro de la web
Html 5 presente y futuro de la web
 
Seminario html5
Seminario html5Seminario html5
Seminario html5
 
Manual de introducción a CSS3
Manual de introducción a CSS3Manual de introducción a CSS3
Manual de introducción a CSS3
 
HTML5 y CSS3 ¿Imprescindibles?
HTML5 y CSS3 ¿Imprescindibles?HTML5 y CSS3 ¿Imprescindibles?
HTML5 y CSS3 ¿Imprescindibles?
 
HTML5 Nuevas Etiquetas Semanticas
HTML5 Nuevas Etiquetas SemanticasHTML5 Nuevas Etiquetas Semanticas
HTML5 Nuevas Etiquetas Semanticas
 
Buenas prácticas en el desarrollo con WordPress - #WCSantander
Buenas prácticas en el desarrollo con WordPress - #WCSantanderBuenas prácticas en el desarrollo con WordPress - #WCSantander
Buenas prácticas en el desarrollo con WordPress - #WCSantander
 
HTML5 y los desafíos del desarrollo web de HOY
HTML5 y los desafíos del desarrollo web de HOYHTML5 y los desafíos del desarrollo web de HOY
HTML5 y los desafíos del desarrollo web de HOY
 
Presentacion Wp Versión PDF
Presentacion Wp Versión PDFPresentacion Wp Versión PDF
Presentacion Wp Versión PDF
 
Las Ventajas de usar HTML5 Y CSS3
Las Ventajas de usar HTML5 Y CSS3Las Ventajas de usar HTML5 Y CSS3
Las Ventajas de usar HTML5 Y CSS3
 

Destacado

Isabel: Reuniones, Clases y Congresos a través de Internet
Isabel: Reuniones, Clases y Congresos a través de InternetIsabel: Reuniones, Clases y Congresos a través de Internet
Isabel: Reuniones, Clases y Congresos a través de InternetJuan Quemada
 
Internet Ice091117
Internet Ice091117Internet Ice091117
Internet Ice091117Juan Quemada
 
Arquitectura del Web 2
Arquitectura del Web 2Arquitectura del Web 2
Arquitectura del Web 2Juan Quemada
 
Vishub description Global Excursion
Vishub description Global ExcursionVishub description Global Excursion
Vishub description Global ExcursionJuan Quemada
 
Google html5 Tutorial
Google html5 TutorialGoogle html5 Tutorial
Google html5 Tutorialjobfan
 
Herramientas para el desarrollo en plataformas móviles web
Herramientas para el desarrollo en plataformas móviles   webHerramientas para el desarrollo en plataformas móviles   web
Herramientas para el desarrollo en plataformas móviles webjoycesita
 
Nuevos retos de Internet: Movilidad y Cloud Computing
Nuevos retos de Internet: Movilidad y Cloud ComputingNuevos retos de Internet: Movilidad y Cloud Computing
Nuevos retos de Internet: Movilidad y Cloud ComputingJuan Quemada
 
Human Interaction, Social Protocols and Collaborative Applications
Human Interaction, Social Protocols and Collaborative ApplicationsHuman Interaction, Social Protocols and Collaborative Applications
Human Interaction, Social Protocols and Collaborative ApplicationsJuan Quemada
 
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5joycesita
 
GSI Research Group Presentation
GSI Research Group PresentationGSI Research Group Presentation
GSI Research Group PresentationCarlos A. Iglesias
 
Html5 Open Video Tutorial
Html5 Open Video TutorialHtml5 Open Video Tutorial
Html5 Open Video TutorialSilvia Pfeiffer
 

Destacado (20)

CSS
CSSCSS
CSS
 
Isabel: Reuniones, Clases y Congresos a través de Internet
Isabel: Reuniones, Clases y Congresos a través de InternetIsabel: Reuniones, Clases y Congresos a través de Internet
Isabel: Reuniones, Clases y Congresos a través de Internet
 
0 entorno php
0 entorno php0 entorno php
0 entorno php
 
Internet Ice091117
Internet Ice091117Internet Ice091117
Internet Ice091117
 
Arquitectura del Web 2
Arquitectura del Web 2Arquitectura del Web 2
Arquitectura del Web 2
 
Entorno PHP
Entorno PHPEntorno PHP
Entorno PHP
 
Presentación TEWC
Presentación TEWCPresentación TEWC
Presentación TEWC
 
Vishub description Global Excursion
Vishub description Global ExcursionVishub description Global Excursion
Vishub description Global Excursion
 
Google html5 Tutorial
Google html5 TutorialGoogle html5 Tutorial
Google html5 Tutorial
 
Introducción CSS
Introducción CSSIntroducción CSS
Introducción CSS
 
Herramientas para el desarrollo en plataformas móviles web
Herramientas para el desarrollo en plataformas móviles   webHerramientas para el desarrollo en plataformas móviles   web
Herramientas para el desarrollo en plataformas móviles web
 
Fundamentos de CSS
Fundamentos de CSSFundamentos de CSS
Fundamentos de CSS
 
Nuevos retos de Internet: Movilidad y Cloud Computing
Nuevos retos de Internet: Movilidad y Cloud ComputingNuevos retos de Internet: Movilidad y Cloud Computing
Nuevos retos de Internet: Movilidad y Cloud Computing
 
Empresa 2.0
Empresa 2.0Empresa 2.0
Empresa 2.0
 
Human Interaction, Social Protocols and Collaborative Applications
Human Interaction, Social Protocols and Collaborative ApplicationsHuman Interaction, Social Protocols and Collaborative Applications
Human Interaction, Social Protocols and Collaborative Applications
 
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
 
GSI Research Group Presentation
GSI Research Group PresentationGSI Research Group Presentation
GSI Research Group Presentation
 
Html5 Open Video Tutorial
Html5 Open Video TutorialHtml5 Open Video Tutorial
Html5 Open Video Tutorial
 
HTML5 Canvas
HTML5 CanvasHTML5 Canvas
HTML5 Canvas
 
Css - Tema 1
Css - Tema 1Css - Tema 1
Css - Tema 1
 

Similar a Introducción a los Frameworks CSS

CSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y ModularCSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y Modularrodboc
 
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIAAccesibilidad práctica con HTML5, CSS3 y WAI-ARIA
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIAManuel Razzari
 
Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5Cycle-IT
 
Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Gonzalo C.
 
Estándares Web con Chico UI
Estándares Web con Chico UIEstándares Web con Chico UI
Estándares Web con Chico UIGuillermo Paz
 
Sass: CSS con Superpoderes
Sass: CSS con SuperpoderesSass: CSS con Superpoderes
Sass: CSS con SuperpoderesEdgar Parada
 
Sesion01
Sesion01Sesion01
Sesion01UB Art
 
HTML5, CSS3, Responsive Design
HTML5, CSS3, Responsive DesignHTML5, CSS3, Responsive Design
HTML5, CSS3, Responsive DesignManuel Padilla
 
Hojas de estilo en cascada
Hojas de estilo en cascadaHojas de estilo en cascada
Hojas de estilo en cascadajazmin Vazquez
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbasPeter Concha
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbasAvanet
 

Similar a Introducción a los Frameworks CSS (20)

CSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y ModularCSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y Modular
 
CSS3
CSS3CSS3
CSS3
 
CSS3
CSS3CSS3
CSS3
 
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIAAccesibilidad práctica con HTML5, CSS3 y WAI-ARIA
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA
 
Programacion web
Programacion webProgramacion web
Programacion web
 
Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5
 
Web2 Quiensomos
Web2 QuiensomosWeb2 Quiensomos
Web2 Quiensomos
 
Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5 Desarrollo de aplicaciones con HTML5
Desarrollo de aplicaciones con HTML5
 
Estándares Web con Chico UI
Estándares Web con Chico UIEstándares Web con Chico UI
Estándares Web con Chico UI
 
Cap06
Cap06Cap06
Cap06
 
Estilos en React con styled-components
Estilos en React con styled-componentsEstilos en React con styled-components
Estilos en React con styled-components
 
Sass: CSS con Superpoderes
Sass: CSS con SuperpoderesSass: CSS con Superpoderes
Sass: CSS con Superpoderes
 
Sesion01
Sesion01Sesion01
Sesion01
 
Semana 3 Maquetación CSS
Semana 3   Maquetación CSSSemana 3   Maquetación CSS
Semana 3 Maquetación CSS
 
LayeRs Dyv
LayeRs DyvLayeRs Dyv
LayeRs Dyv
 
HTML5, CSS3, Responsive Design
HTML5, CSS3, Responsive DesignHTML5, CSS3, Responsive Design
HTML5, CSS3, Responsive Design
 
Hojas de estilo en cascada
Hojas de estilo en cascadaHojas de estilo en cascada
Hojas de estilo en cascada
 
Hojas de Estilo en Cascada - CSS
Hojas de Estilo en Cascada - CSSHojas de Estilo en Cascada - CSS
Hojas de Estilo en Cascada - CSS
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 

Último

Práctica 1. Aplicación de la herramienta Padlet
Práctica 1. Aplicación de la herramienta PadletPráctica 1. Aplicación de la herramienta Padlet
Práctica 1. Aplicación de la herramienta PadletDannyErazo5
 
Premio (tecnología actividad)combinación...
Premio (tecnología actividad)combinación...Premio (tecnología actividad)combinación...
Premio (tecnología actividad)combinación...NicolleAndrade7
 
Aplicación de la herramienta Formularios de Google
Aplicación de la herramienta Formularios de GoogleAplicación de la herramienta Formularios de Google
Aplicación de la herramienta Formularios de GoogleDannyErazo5
 
Desarrollar un plan de búsqueda en grupo (Grupos formados en clase), para el ...
Desarrollar un plan de búsqueda en grupo (Grupos formados en clase), para el ...Desarrollar un plan de búsqueda en grupo (Grupos formados en clase), para el ...
Desarrollar un plan de búsqueda en grupo (Grupos formados en clase), para el ...DannyErazo5
 
Tarea 1. Ensayo sobre "La sociedad de la ignorancia"
Tarea 1. Ensayo sobre "La sociedad de la ignorancia"Tarea 1. Ensayo sobre "La sociedad de la ignorancia"
Tarea 1. Ensayo sobre "La sociedad de la ignorancia"ferpatfut1109
 
Prueba Objetiva del Parcial 1_Grupo 1.pdf
Prueba Objetiva del Parcial 1_Grupo 1.pdfPrueba Objetiva del Parcial 1_Grupo 1.pdf
Prueba Objetiva del Parcial 1_Grupo 1.pdfFernandoCalapaqui
 
DIAPOSITIVAS RIESGOS DE LOS TRÁMITES ONLINE
DIAPOSITIVAS RIESGOS DE LOS TRÁMITES ONLINEDIAPOSITIVAS RIESGOS DE LOS TRÁMITES ONLINE
DIAPOSITIVAS RIESGOS DE LOS TRÁMITES ONLINEivelezutrera
 
Diapositiva_Aprendizaje-basado-en-problemas.pdf
Diapositiva_Aprendizaje-basado-en-problemas.pdfDiapositiva_Aprendizaje-basado-en-problemas.pdf
Diapositiva_Aprendizaje-basado-en-problemas.pdfDannyErazo5
 
FUNCIONES DEFINIDAS POR EL USUARIO Y VARIABLES SUPERGLOBALES
FUNCIONES DEFINIDAS POR EL USUARIO Y VARIABLES SUPERGLOBALESFUNCIONES DEFINIDAS POR EL USUARIO Y VARIABLES SUPERGLOBALES
FUNCIONES DEFINIDAS POR EL USUARIO Y VARIABLES SUPERGLOBALESNoemiZavalzaValderrr
 
Práctica 2. Aplicación de la herramienta Formularios de Google (4).pdf
Práctica 2. Aplicación de la herramienta Formularios de Google (4).pdfPráctica 2. Aplicación de la herramienta Formularios de Google (4).pdf
Práctica 2. Aplicación de la herramienta Formularios de Google (4).pdfFernandoCalapaqui
 
Ensayo sobre "La internet y su evolución"
Ensayo sobre "La internet y su evolución"Ensayo sobre "La internet y su evolución"
Ensayo sobre "La internet y su evolución"DannyErazo5
 
Ejercicios de búsqueda eficaz. Navegadores
Ejercicios de búsqueda eficaz. NavegadoresEjercicios de búsqueda eficaz. Navegadores
Ejercicios de búsqueda eficaz. NavegadoresDannyErazo5
 
Detalles Constructivos Puertas y anclaje.pptx
Detalles Constructivos Puertas y anclaje.pptxDetalles Constructivos Puertas y anclaje.pptx
Detalles Constructivos Puertas y anclaje.pptxLuisChili1
 
Prueba Objetiva del Parcial 1_Grupo 1...
Prueba Objetiva del Parcial 1_Grupo 1...Prueba Objetiva del Parcial 1_Grupo 1...
Prueba Objetiva del Parcial 1_Grupo 1...DannyErazo5
 
Detalles Constructivos piso acabados.pptx
Detalles Constructivos piso acabados.pptxDetalles Constructivos piso acabados.pptx
Detalles Constructivos piso acabados.pptxLuisChili1
 
DIAPOSITIVASTRÁMITESONLINEFORMACION.pptx
DIAPOSITIVASTRÁMITESONLINEFORMACION.pptxDIAPOSITIVASTRÁMITESONLINEFORMACION.pptx
DIAPOSITIVASTRÁMITESONLINEFORMACION.pptxivelezutrera
 
PS3 VS PS4-García_Iker_Guzman_Valentin.pdf
PS3 VS PS4-García_Iker_Guzman_Valentin.pdfPS3 VS PS4-García_Iker_Guzman_Valentin.pdf
PS3 VS PS4-García_Iker_Guzman_Valentin.pdfvguzman1
 
Detalles Constructivos anclaje acero.pptx
Detalles Constructivos anclaje acero.pptxDetalles Constructivos anclaje acero.pptx
Detalles Constructivos anclaje acero.pptxLuisChili1
 
Lista de datos (tecnología) combinación de...
Lista de datos (tecnología) combinación de...Lista de datos (tecnología) combinación de...
Lista de datos (tecnología) combinación de...NicolleAndrade7
 
Detalles Constructivos pasamanos de acero inoxidable.pptx
Detalles Constructivos pasamanos de acero inoxidable.pptxDetalles Constructivos pasamanos de acero inoxidable.pptx
Detalles Constructivos pasamanos de acero inoxidable.pptxLuisChili1
 

Último (20)

Práctica 1. Aplicación de la herramienta Padlet
Práctica 1. Aplicación de la herramienta PadletPráctica 1. Aplicación de la herramienta Padlet
Práctica 1. Aplicación de la herramienta Padlet
 
Premio (tecnología actividad)combinación...
Premio (tecnología actividad)combinación...Premio (tecnología actividad)combinación...
Premio (tecnología actividad)combinación...
 
Aplicación de la herramienta Formularios de Google
Aplicación de la herramienta Formularios de GoogleAplicación de la herramienta Formularios de Google
Aplicación de la herramienta Formularios de Google
 
Desarrollar un plan de búsqueda en grupo (Grupos formados en clase), para el ...
Desarrollar un plan de búsqueda en grupo (Grupos formados en clase), para el ...Desarrollar un plan de búsqueda en grupo (Grupos formados en clase), para el ...
Desarrollar un plan de búsqueda en grupo (Grupos formados en clase), para el ...
 
Tarea 1. Ensayo sobre "La sociedad de la ignorancia"
Tarea 1. Ensayo sobre "La sociedad de la ignorancia"Tarea 1. Ensayo sobre "La sociedad de la ignorancia"
Tarea 1. Ensayo sobre "La sociedad de la ignorancia"
 
Prueba Objetiva del Parcial 1_Grupo 1.pdf
Prueba Objetiva del Parcial 1_Grupo 1.pdfPrueba Objetiva del Parcial 1_Grupo 1.pdf
Prueba Objetiva del Parcial 1_Grupo 1.pdf
 
DIAPOSITIVAS RIESGOS DE LOS TRÁMITES ONLINE
DIAPOSITIVAS RIESGOS DE LOS TRÁMITES ONLINEDIAPOSITIVAS RIESGOS DE LOS TRÁMITES ONLINE
DIAPOSITIVAS RIESGOS DE LOS TRÁMITES ONLINE
 
Diapositiva_Aprendizaje-basado-en-problemas.pdf
Diapositiva_Aprendizaje-basado-en-problemas.pdfDiapositiva_Aprendizaje-basado-en-problemas.pdf
Diapositiva_Aprendizaje-basado-en-problemas.pdf
 
FUNCIONES DEFINIDAS POR EL USUARIO Y VARIABLES SUPERGLOBALES
FUNCIONES DEFINIDAS POR EL USUARIO Y VARIABLES SUPERGLOBALESFUNCIONES DEFINIDAS POR EL USUARIO Y VARIABLES SUPERGLOBALES
FUNCIONES DEFINIDAS POR EL USUARIO Y VARIABLES SUPERGLOBALES
 
Práctica 2. Aplicación de la herramienta Formularios de Google (4).pdf
Práctica 2. Aplicación de la herramienta Formularios de Google (4).pdfPráctica 2. Aplicación de la herramienta Formularios de Google (4).pdf
Práctica 2. Aplicación de la herramienta Formularios de Google (4).pdf
 
Ensayo sobre "La internet y su evolución"
Ensayo sobre "La internet y su evolución"Ensayo sobre "La internet y su evolución"
Ensayo sobre "La internet y su evolución"
 
Ejercicios de búsqueda eficaz. Navegadores
Ejercicios de búsqueda eficaz. NavegadoresEjercicios de búsqueda eficaz. Navegadores
Ejercicios de búsqueda eficaz. Navegadores
 
Detalles Constructivos Puertas y anclaje.pptx
Detalles Constructivos Puertas y anclaje.pptxDetalles Constructivos Puertas y anclaje.pptx
Detalles Constructivos Puertas y anclaje.pptx
 
Prueba Objetiva del Parcial 1_Grupo 1...
Prueba Objetiva del Parcial 1_Grupo 1...Prueba Objetiva del Parcial 1_Grupo 1...
Prueba Objetiva del Parcial 1_Grupo 1...
 
Detalles Constructivos piso acabados.pptx
Detalles Constructivos piso acabados.pptxDetalles Constructivos piso acabados.pptx
Detalles Constructivos piso acabados.pptx
 
DIAPOSITIVASTRÁMITESONLINEFORMACION.pptx
DIAPOSITIVASTRÁMITESONLINEFORMACION.pptxDIAPOSITIVASTRÁMITESONLINEFORMACION.pptx
DIAPOSITIVASTRÁMITESONLINEFORMACION.pptx
 
PS3 VS PS4-García_Iker_Guzman_Valentin.pdf
PS3 VS PS4-García_Iker_Guzman_Valentin.pdfPS3 VS PS4-García_Iker_Guzman_Valentin.pdf
PS3 VS PS4-García_Iker_Guzman_Valentin.pdf
 
Detalles Constructivos anclaje acero.pptx
Detalles Constructivos anclaje acero.pptxDetalles Constructivos anclaje acero.pptx
Detalles Constructivos anclaje acero.pptx
 
Lista de datos (tecnología) combinación de...
Lista de datos (tecnología) combinación de...Lista de datos (tecnología) combinación de...
Lista de datos (tecnología) combinación de...
 
Detalles Constructivos pasamanos de acero inoxidable.pptx
Detalles Constructivos pasamanos de acero inoxidable.pptxDetalles Constructivos pasamanos de acero inoxidable.pptx
Detalles Constructivos pasamanos de acero inoxidable.pptx
 

Introducción a los 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
  • 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
  • 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?
  • 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”
  • 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
  • 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
  • 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/
  • 60. bootstrap BOOTStrap fireworks http://www.extendingfireworks.com/?p=133 http://bootstrapfireworks.com/
  • 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)
  • 66. Muchas gracias Luis Miguel Martín @lmmartin