{"id":69,"date":"2013-01-10T11:00:02","date_gmt":"2013-01-10T10:00:02","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/?p=69"},"modified":"2018-10-21T16:55:41","modified_gmt":"2018-10-21T15:55:41","slug":"frameworks-css","status":"publish","type":"post","link":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/css\/frameworks-css\/","title":{"rendered":"Frameworks CSS"},"content":{"rendered":"<p>[\u00daltima actualizaci\u00f3n: 21\/10\/2018]<\/p>\n<p>Un <i>framework<\/i> es, en t\u00e9rminos inform\u00e1ticos, un conjunto de bibliotecas o clases, reutilizable, que nos permite economizar recursos a la hora de desarrollar aplicaciones. Cuando hablamos de CSS, un <i>framework<\/i> es un conjunto de archivos CSS con una serie de clases predefinidas y estilos aplicados tanto a los elementos est\u00e1ndar de HTML como a dichas clases. Muchos <i>frameworks<\/i> incluyen tambi\u00e9n elementos de dise\u00f1o de ret\u00edcula que ayudan en el proceso de maquetado. (Muchos <i>frameworks<\/i> incluyen, adem\u00e1s, partes sobre JavaScript o un archivo .htacess, por ejemplo.)<\/p>\n<p>Un buen <i>framework<\/i> nos permite, por tanto, dise\u00f1ar p\u00e1ginas de manera m\u00e1s r\u00e1pida y eficiente. Pero su uso no est\u00e1 exento de inconvenientes. El primero de ellos es inherente al uso de plantillas: todas las p\u00e1ginas dise\u00f1adas con un mismo <i>framework<\/i> tienden a tener un aspecto muy similar, por lo que es dif\u00edcil diferenciarlas entre s\u00ed. Un segundo problema es que, si no &#8216;limpiamos&#8217; el c\u00f3digo, muy probablemente acabemos cargando con un importante n\u00famero de definiciones para elementos y clases que no estamos usando, con el consiguiente impacto negativo sobre el rendimiento de la p\u00e1gina. Finalmente, un tercer problema principal es que, por su universalidad, las clases que se usan tienen nombres muy poco sem\u00e1nticos. Todos estos problemas son superables con un esfuerzo moderado, pero deben tenerse en cuenta en el proceso de dise\u00f1o.<\/p>\n<p>Dos ejemplos bastante populares de frameworks son <a href=\"http:\/\/html5boilerplate.com\/\">HTML5 Boilerplate<\/a> (<a href=\"https:\/\/github.com\/h5bp\/html5-boilerplate\/blob\/master\/dist\/doc\/TOC.md\">HTML5 Boilerplate documentation<\/a>, tambi\u00e9n cuenta con una <a href=\"http:\/\/html5boilerplate.com\/mobile\/\">versi\u00f3n m\u00f3vil<\/a>) y <a href=\"http:\/\/getbootstrap.com\/2.3.2\/\">Bootstrap<\/a>. Existe una herramienta web, <a href=\"http:\/\/www.initializr.com\/\">Initializr<\/a> (<a href=\"https:\/\/docs.spring.io\/initializr\/docs\/current\/reference\/htmlsingle\/\">gu\u00eda de referencia<\/a>) que permite generar proyectos usando cualquiera de estos dos frameworks.<\/p>\n<p>Otros frameworks:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/naileditdesign\/Bedrock\">Bedrock<\/a> es un framework <i>responsive<\/i>, <i>mobile first<\/i> de 18 columnas.<\/li>\n<li><a href=\"http:\/\/unsemantic.com\/\">Unsemantic<\/a> es un framework de ret\u00edcula de columnas fluidas.<\/li>\n<li><a href=\"http:\/\/yuilibrary.com\/\">YUI<\/a><\/li>\n<li><a href=\"http:\/\/foundation.zurb.com\/\">Foundation<\/a><\/li>\n<li><a> The Semantic Grid System<\/a><\/li>\n<\/ul>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>[\u00daltima actualizaci\u00f3n: 21\/10\/2018] Un framework es, en t\u00e9rminos inform\u00e1ticos, un conjunto de bibliotecas o clases, reutilizable, que nos permite economizar recursos a la hora de desarrollar aplicaciones. Cuando hablamos de CSS, un framework es un conjunto de archivos CSS con una serie de clases predefinidas y estilos aplicados tanto a los elementos est\u00e1ndar de HTML &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/css\/frameworks-css\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abFrameworks CSS\u00bb<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-69","post","type-post","status-publish","format-standard","hentry","category-css","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":15,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/69\/revisions"}],"predecessor-version":[{"id":474,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/69\/revisions\/474"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/media?parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/categories?post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/tags?post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}