Introducci³n a los Frameworks CSS

download Introducci³n a los Frameworks CSS

of 66

  • date post

    25-May-2015
  • Category

    Technology

  • view

    2.166
  • download

    3

Embed Size (px)

description

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.

Transcript of Introducci³n a los Frameworks CSS

  • 1. Introduccin a los FRAMEWORKS CSSLuis Miguel MartnI Betabeers BadajozPCTEX - 20 Abril 2012

2. Introduccin a losFRAMEWORKS CSSLuis Miguel Martn 3. quin soy? 4. Quin soy? Consultor, diseador ydesarrollador front-endespecializado en crear sitiosweb centrados en el usuario Ms de 11 aos experienciaen diversos aspectos deldesarrollo web Fundamentalista de losestndares web 5. INTRODUCCIN 6. Introduccin Problemtica del desarrollo con CSS Qu es un Framework CSS? Ventajas e Inconvenientes Panormica de Frameworks CSS Comparativa Entonces, cul elijo? 7. Problemtica del desarrollo css 8. Problemtica del desarrollo CSS Es lento: Diseo distinto en cada proyecto Preparacin y optimizacin de grficos Carcter artesano Reutilizacin de cdigo anterior Se dedica mucho tiempo a tareasinfructuosas (depurar para IE,extensiones propietarias,....) 9. Problemtica del desarrollo CSS No existen normas a la hora deprogramar en CSS (nomenclaturas,identacin,...) Dificultad con cdigo de terceros(incluso, dentro de un mismo equipo) El programador puro no sabe CSS: NO es un lenguaje de programacin 10. qu es un framework css? 11. Qu es un Framework CSS?Un conjunto de herramientas, libreras,convenciones y buenas prcticas queabstraen tareas repetitivas yrutinarias en elementos genricosque pueden reutilizarse.JEFF CROFThttp://www.alistapart.com/articles/frameworksfordesigners/ 12. Y CUL ES SU OBJETIVO?Que el desarrollador o diseador seenfoque en las tareas que sonexclusivas de un determinadoproyecto, en lugar de reinventar larueda una y otra vez.JEFF CROFThttp://www.alistapart.com/articles/frameworksfordesigners/ 13. Ventajas e inconvenientes 14. Ventajas Aumentan la productividad Cdigo ms consistente y estructurado Testeo y depuracin minimizada Facilidad de mantenimiento Facilita el trabajo en equipo Agilizan la repeticin de procesos Otras: preprocesado en servidor(LESS/SASS), integracin en CMS,... 15. Inconvenientes Curva de aprendizaje Exceso de cdigo HTML y CSS Cdigo y clases no semnticas Cdigo ajeno Ms lento que partir de cero? Restricciones de diseo? 16. Inconvenientes Curva de aprendizaje Exceso de cdigo HTML y CSS Cdigo y clases no semnticas Cdigo ajeno Ms lento que partir de cero? Restricciones de diseo? 17. Inconvenientes Curva de aprendizaje Exceso de cdigo HTML y CSS Cdigo y clases no semnticas Cdigo ajeno 18. CURVA DE APRENDIZAJE La mayora de los frameworks tienen unacurva sencilla. Al aportar una base comn documentadafacilita la incorporacin de nuevosmiembros al equipo. Incluirlo en la metodologa de trabajomejora el proceso de desarrollo ydisminuye el tiempo de aprendizaje. 19. Inconvenientes Curva de aprendizaje Exceso de cdigo HTML y CSS Cdigo y clases no semnticas Cdigo ajeno 20. EXCESO DE CDIGO HTML Y CSS Es crtico para tu proyecto? Emplea slo lo que necesites Comprime. Minimiza. Une. Compresin HTTP Minimiza JS y CSS: Eliminar espacios enblanco, saltos de carro, identaciones, Combina archivos CSS y JS Otros: cach, CDN, 21. Inconvenientes Curva de aprendizaje Exceso de cdigo HTML y CSS Cdigo y clases no semnticas Cdigo ajeno 22. CDIGO NO SEMNTICO DIV y SPAN no tienen significadosemntico (son neutrales) The global structure of an HTML document http://www.w3.org/TR/html401/struct/global.html#h-7.5.4 23. CDIGO NO SEMNTICODIV + ID/CLASS = valor semntico nulo Etiq. HTML5 = valor semntico alto

... ...
... ...
... ...
... ...

24. CDIGO NO SEMNTICOLA SEMNTICA EST AQUMerendola No aquLa semntica web no incluye CSS 25. Inconvenientes Curva de aprendizaje Exceso de cdigo HTML y CSS Cdigo y clases no semnticas Cdigo ajeno 26. CDIGO AJENO Podemos vivir con ello ;-) Un framework es una herramienta. Hayque estudiarla y comprenderla paraobtener resultados. 27. Inconvenientes Curva de aprendizaje Exceso de cdigo HTML y CSS Cdigo y clases no semnticas Cdigo ajeno 28. Panormica de frameworks css 29. Panormica de frameworks css Existe una enorme variedad!! Hablaremos de 1 Kb CSS Grid, 960.gs,Blueprint, Foundation (Zurb) yBootstrap (Twitter) Algunos admiten plugins y extensionespara hacerlos ms verstiles (responsivedesign, por ejemplo) o incorporarfuncionalidades 30. qu nos permiten hacer? Resetear estilos para normalizar laspropiedades bsicas de los elementos afin de eliminar diferencias devisualizacin entre navegadores. reset.css Realizar una gestin global de lastipografas que se usarn en la pgina. text.css 31. qu nos permiten hacer? Maquetar un diseo de forma ptimay compatible con todos losnavegadores. layout.css, grid.css, Estilos especficos para impresin print.css Personalizaciones y cdigo especfco style.css, custom.css, 32. 1Kb css grid NO FUNCIONA!http://1kbgrid.com/ 33. 1Kb css grid Enfocado nicamente a disposicin deelementos en retcula. Retcula de 12 columnas, 60px anchocon espaciado de 20px (personalizable) Ancho total: 960px 34. 1Kb css grid

.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_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;html } css completo 35. 960 grid systemhttp://960.gs/ 36. 960 grid system Proporciona sistema de retculas muchoms completo. Retculas 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

940

860

140

780

html 38. 960 grid system Incorpora: reset CSS, estilostipogrficos y soporte para idiomas RTL Incluye plantillas de diseo Extras: Personalizable: http://grids.heroku.com/ Retcula fluida:http://www.designinfluences.com/fluid960gs/ Diseo adaptativa: http://adapt.960.gs/ 39. 960 grid systemEJEMPLODiseo realizado sobreuna plantilla paraFireworks de retcula de960.gs (12 columnas) 40. 960 grid system960 grider bookmarkhttp://peol.github.com/960gridder/ 41. blueprinthttp://blueprintcss.org/ 42. blueprint Sistema de retcula completo y verstil. Retcula base de 24 columnas (30pxancho/10px espaciado) Ancho fijo total: 950px Incorpora: reset CSS, estilos paratipografas, formularios e impresin Tambin, soporte para idiomas RTL 43. blueprint 44. blueprint Gran cantidad de plugins y extensiones(botones, tabs, retcula fluida,) Plantillas grficas para disear sobre laretcula Gemas para Rails Ms informacin y recursos: https://github.com/joshuaclayton/blueprint-css/wiki 45. foundationhttp://foundation.zurb.com/ 46. foundation Sistema de retcula completo,adaptativo, mvil y muy flexible Retcula base de 12 columnas (fluidas,fijas, combinables,) Ancho mximo y mnimo configurable Nomenclatura muy sencilla y natural Incluye: formularios, botones, elementosde interfaz, sliders, modales, 47. foundationRetcula adaptativa Anchos de 1024px y 600px 48. foundation 49. foundation Retcula adaptativaSlida retcula base,adaptativa y mvilElementos de interfazBotones, formularios, tabs,sliders, tooltips, modales DOCUMENTACIN Sencilla y completaEXTRA Gemas paraConpass/SASS y Rails 50. foundation Retcula adaptativaSlida retcula base,adaptativa y mvilElementos de interfazBotones, formularios, tabs,sliders, tooltips, modales DOCUMENTACIN Sencilla y completaEXTRA Gemas paraConpass/SASS y Rails 51. foundation Retcula adaptativaSlida retcula base, adaptativay mvilElementos de interfazBotones, formularios, tabs,sliders, tooltips, modales DOCUMENTACIN Sencilla y completaEXTRA Gemas paraConpass/SASS y Rails 52. bootstraphttp://twitter.github.com/bootstrap/ 53. bootstrap Sistema de retcula completo,adaptativo, mvil y muy flexible Retcula base de 12 columnas (60pxancho/20px espaciado) Ancho fijo total: 940px Construido y personalizable con LESS(variables, mixins, etc.) 54. bootstrap Incluye: tipografas, retculas adaptativas ymviles, formularios, botones, elementosde interfaz, EL MS 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. bootstrapBOOTStrap fireworks http://www.extendingfireworks.com/?p=133 http://bootstrapfireworks.com/ 61. comparativa 62. comparativaPLANTILLAS EstilosEstilos retcula TIPOGRAFIAsPLUGINS gemasdiseo FORMS IMPRESINBOOTSTRAP F0UNDATIONBLUEPRINT 960 GS 1KB GRID 63. Entonces, cul elijo? 64. Entonces, cul elijo? No hay frameworks mejores ni peores;sino el que mejor se adapta a tu proyecto: Qu tamao va a tener el proyecto? Necesitas integrarlo en Rails o SASS? Quieres componentes ya listos para usar onicamente una retcula? Personalmente, eligira 960.gs,Foundation o Bootstrap (personalizado) 65. preguntas? 66. Muchas graciasLuis Miguel Martn@lmmartin