{"id":2365,"date":"2012-09-26T17:20:53","date_gmt":"2012-09-26T15:20:53","guid":{"rendered":"http:\/\/www.palentino.es\/blog\/?p=2365"},"modified":"2012-09-27T21:54:47","modified_gmt":"2012-09-27T19:54:47","slug":"frameworks-html-y-css-para-desarrollos-web-responsible-design","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/frameworks-html-y-css-para-desarrollos-web-responsible-design\/","title":{"rendered":"Principales Frameworks HTML y CSS para desarrollos web, concepto de responsible design"},"content":{"rendered":"<div id=\"palen-1472492820\" class=\"palen-antes-del-contenido palen-entity-placement\"><div class=\"palen-adlabel\">Anuncios<\/div><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2815317153396146\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:inline-block;width:300px;height:250px;\" \ndata-ad-client=\"ca-pub-2815317153396146\" \ndata-ad-slot=\"4593837716\"><\/ins> \n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div><p><strong>\u00bfQu\u00e9 es un &#8216;framework&#8217;?<\/strong><\/p>\n<p style=\"text-align: justify;\">De manera sencilla\u00a0podr\u00edamos\u00a0definirlo como un esquema (esqueleto, patr\u00f3n) para el desarrollo y\/o la implementaci\u00f3n de una aplicaci\u00f3n.<\/p>\n<p style=\"text-align: justify;\">El framework es \u00a0un marco de aplicaci\u00f3n o conjunto de bibliotecas orientadas a la <strong>reutilizaci\u00f3n<\/strong>\u00a0de componentes software para el <strong>desarrollo r\u00e1pido de aplicaciones<\/strong> (RAD).<\/p>\n<p style=\"text-align: justify;\">Las principales <strong>ventajas de la utilizaci\u00f3n de un framework son:<\/strong><\/p>\n<p style=\"text-align: justify;\">El<strong> desarrollo r\u00e1pido de aplicaciones<\/strong>. Los componentes incluidos en un framework constituyen una capa que libera al programador de la escritura de c\u00f3digo de bajo nivel.<\/p>\n<p style=\"text-align: justify;\">El programador\u00a0<strong>no necesita plantearse<\/strong>\u00a0una estructura global de la aplicaci\u00f3n, sino que el\u00a0framework\u00a0le proporciona un esqueleto que hay que &#8220;rellenar&#8221;.<\/p>\n<p style=\"text-align: justify;\">La <strong>reutilizaci\u00f3n<\/strong> de componentes software al por mayor. Los frameworks son los paradigmas de la reutilizaci\u00f3n.<\/p>\n<p style=\"text-align: justify;\">Facilita la\u00a0<strong>colaboraci\u00f3n<\/strong>. Cualquiera que haya tenido que &#8220;pelearse&#8221; con el c\u00f3digo fuente de otro programador (\u00a1o incluso con el propio, pasado alg\u00fan tiempo!) sabr\u00e1 lo dif\u00edcil que es entenderlo y modificarlo; por tanto, todo lo que sea definir y estandarizar va a ahorrar tiempo y trabajo a los desarrollos colaborativos.<\/p>\n<p style=\"text-align: justify;\">El uso y la programaci\u00f3n de componentes que siguen una pol\u00edtica de <strong>dise\u00f1o uniforme<\/strong>. Un framework orientado a objetos logra que los componentes sean clases que pertenezcan a una gran jerarqu\u00eda de clases, lo que resulta en bibliotecas m\u00e1s f\u00e1ciles de aprender a usar.<\/p>\n<p style=\"text-align: justify;\">Permiten crear un <strong>dise\u00f1o responsable<\/strong>.<\/p>\n<p>Las desventajas de los frameworks son:<\/p>\n<p style=\"text-align: justify;\">La <strong>dependencia<\/strong> del c\u00f3digo fuente de una aplicaci\u00f3n con respecto al framework. Si se desea cambiar de framework, la <strong>mayor parte del c\u00f3digo debe reescribirse.<\/strong><\/p>\n<p style=\"text-align: justify;\"><strong><\/strong><br \/>\nLa demanda de grandes cantidades de recursos computacionales debido a que la caracter\u00edstica de reutilizaci\u00f3n de los frameworks tiende a generalizar la funcionalidad de los componentes. El resultado es que se incluyen caracter\u00edsticas que est\u00e1n &#8220;de m\u00e1s&#8221;, provocando una sobrecarga de recursos que se hace m\u00e1s grande en cuanto m\u00e1s amplio es el campo de reutilizaci\u00f3n.<\/p>\n<p style=\"text-align: justify;\"><strong>Frameworks actuales.<\/strong><\/p>\n<p style=\"text-align: justify;\">En la actualidad, existe una gran cantidad y variedad de frameworks disponibles para el trabajo de\u00a0est\u00e1ndares\u00a0web. <strong>Ya no s\u00f3lo se habla en el entorno de desarrollo web<\/strong>, sino en otros campos. Los desarrolladores se est\u00e1n dando cuenta que el uso de frameworks es un camino bastante adecuado. Otra de las ventajas es que permiten estandarizar gran parte del trabajo.<\/p>\n<p style=\"text-align: justify;\">A\u00a0d\u00eda\u00a0de hoy existen multitud de frameworks para desarrollos web. Pero en este post vamos a ver s\u00f3lo una peque\u00f1a muestra de algunos de los m\u00e1s destacados &#8230;<\/p>\n<p style=\"text-align: justify;\"><!--more--><\/p>\n<p style=\"text-align: justify;\">Todos guardan una\u00a0similitud\u00a0unos con otros. Muchos de ellos parten de un framework base m\u00e1s sencillo que muchas ocasiones es el mismo.<\/p>\n<p style=\"text-align: justify;\">Los m\u00e1s conocidos son:<\/p>\n<p style=\"text-align: justify;\"><a href=\"http:\/\/html5boilerplate.com\/\" target=\"_blank\"><strong>HTML5 Bolilerplate<\/strong><\/a><\/p>\n<p style=\"text-align: justify;\">Traducido como repetitivo. Est\u00e1 pensado para el trabajo en proyectos <strong>HTML5<\/strong>.\u00a0Existen diversas versiones, la pelada, la documentada y a medida (en funci\u00f3n de determinados criterios). Soporta navegadores antiguos gracias a determinadas\u00a0librer\u00edas, se pueden crear proyectos HTML5 optimizando el c\u00f3digo. Se salvan problemas anteriores, se optimizan los CSS, los javascripts, la carga, etc &#8230;<\/p>\n<p style=\"text-align: justify;\"><strong><a href=\"http:\/\/www.anidocs.es\/bootstrap\/docs\/index.php\" target=\"_blank\">Bootstrap de Twitter<\/a><\/strong><\/p>\n<p style=\"text-align: justify;\">Es de twitter. Es muy potente, trabaja con mayor extensi\u00f3n de componentes y\u00a0funcionalidades. Tiene multitud de opciones a la hora de crear contenidos web. Se cambian los layouts, html y css y otros tipos de <strong>componentes<\/strong>. Multitud de botones, elementos desplegables, &#8230;<\/p>\n<p style=\"text-align: justify;\">Tiene una caracter\u00edstica fundamental que todo framework debe tener, no es muy <strong>intrusivo con el etiquetado. \u00a0<\/strong>Es decir es sencillo, otorga realizar cosas potentes, sin cambiar el c\u00f3digo que emplear\u00edamos de forma convencional. Los cambios en el\u00a0est\u00e1ndar\u00a0son\u00a0m\u00ednimos. Solamente cambiando las clases obtenemos un nuevo control, m\u00e1s potente.<\/p>\n<p style=\"text-align: justify;\">Usa sistemas avanzados de hojas de estilos como es el LESS.<\/p>\n<p style=\"text-align: justify;\"><strong><a href=\"http:\/\/www.yaml.de\/\" target=\"_blank\">YAML<\/a><\/strong><\/p>\n<p style=\"text-align: justify;\">Actualmente la versi\u00f3n 4. Ofrece aspectos similares a otros frameworks.\u00a0Compatibilidad\u00a0con los diversos navegadores (Explorer, Opera, Safari, Chrome, Firefox). Se caracteriza por ser muy ligero, ocupando pocos kbytes.<\/p>\n<p style=\"text-align: justify;\"><a href=\"http:\/\/www.blueprintcss.org\/\" target=\"_blank\"><strong>Blueprint<\/strong><\/a><\/p>\n<p style=\"text-align: justify;\">Frameworks de CSS que aporta soluciones para layouts (dise\u00f1os) y estilos. El\u00a0objetivo es reducir el tiempo de desarrollo. Te da una base s\u00f3lida para construir proyectos de f\u00e1cil uso, la tipograf\u00eda sensible, plugins \u00fatiles, e incluso una hoja de estilo para la impresi\u00f3n.<\/p>\n<p style=\"text-align: justify;\"><a href=\"http:\/\/lessframework.com\/\" target=\"_blank\"><strong>Less Framework<\/strong><\/a><\/p>\n<p style=\"text-align: justify;\">Versi\u00f3n 4. Framework de rejilla. Esto quiere decir que\u00a0implementa la infraestructura necesaria para trabajar con una rejilla, de modo que podamos maquetar una p\u00e1gina web ajustando los contenidos del dise\u00f1o a unas gu\u00edas, que delimitar\u00e1n los espacios disponibles para colocar los distintos elementos de la p\u00e1gina. Las rejillas son el mejor amigo del dise\u00f1ador, despu\u00e9s del\u00a0CSS\u00a0en si.<\/p>\n<p style=\"text-align: justify;\"><strong><a href=\"http:\/\/www.getskeleton.com\/\" target=\"_blank\">Skeleton<\/a><\/strong><\/p>\n<p style=\"text-align: justify;\">Nos aporta rejilla,\u00a0tipograf\u00eda, botones, formularios, media, query, etc &#8230;<\/p>\n<p style=\"text-align: justify;\">\n<p style=\"text-align: justify;\">En definitiva estos frameworks nos permiten realizar <strong><span style=\"color: #800000;\">dise\u00f1o responsable o\u00a0responsible design.<\/span><\/strong><\/p>\n<p style=\"text-align: justify;\"><strong>Que significa:<\/strong><\/p>\n<p style=\"text-align: justify;\">Los proyectos de Dise\u00f1o Responsable son aquellos que articulan de manera integral los componentes de la sostenibilidad: econom\u00eda, ambiente y sociedad. En este marco conceptual, los proyectos deben dimensionar la <strong>eficiencia en el proceso<\/strong> y en el resultado, el <strong>adecuado uso de los recursos<\/strong>, tanto materiales, <strong>econ\u00f3micos como humanos<\/strong>, impactar de manera positiva a las comunidades y al ambiente, todo ello acompa\u00f1ado de una reflexi\u00f3n permanente, que fortalezca la concienciaci\u00f3n y la promoci\u00f3n del concepto de Dise\u00f1o Responsable con <strong>sentido de innovaci\u00f3n para el mejoramiento en la calidad de vida<\/strong>.<\/p>\n<p style=\"text-align: justify;\">Dise\u00f1o Responsable implica tambi\u00e9n el desempe\u00f1o \u00e9tico del oficio, <strong>la responsabilidad social<\/strong>, la <strong>maximizaci\u00f3n de los recursos y de los beneficios<\/strong>, el crecimiento sostenible, la<strong> generaci\u00f3n de oportunidades comerciales<\/strong>, la consciencia responsable de los efectos que generan las conductas de producci\u00f3n y consumo, <strong>la creatividad y la experimentaci\u00f3n hacia la innovaci\u00f3n<\/strong>, entre otros.<\/p>\n<p>Saludos. Eso es todo &#8230;<\/p>\n<div id=\"palen-681431095\" class=\"palen-despues-del-contenido palen-entity-placement\"><div class=\"palen-adlabel\">Anuncios<\/div><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2815317153396146\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-2815317153396146\" \ndata-ad-slot=\"\" \ndata-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\u00bfQu\u00e9 es un &#8216;framework&#8217;? De manera sencilla\u00a0podr\u00edamos\u00a0definirlo como un esquema (esqueleto, patr\u00f3n) para el desarrollo y\/o la implementaci\u00f3n de una aplicaci\u00f3n. El framework es \u00a0un marco de aplicaci\u00f3n o conjunto de bibliotecas orientadas a la reutilizaci\u00f3n\u00a0de componentes software para el desarrollo r\u00e1pido de aplicaciones (RAD). Las principales ventajas de la utilizaci\u00f3n de un framework son: El desarrollo r\u00e1pido de aplicaciones. Los componentes incluidos en un framework constituyen una capa que libera al programador de la escritura de c\u00f3digo de bajo nivel. El programador\u00a0no necesita plantearse\u00a0una estructura global de la aplicaci\u00f3n, sino que el\u00a0framework\u00a0le proporciona un esqueleto que hay que &#8220;rellenar&#8221;. La reutilizaci\u00f3n de componentes software al por mayor. Los frameworks son los paradigmas de la reutilizaci\u00f3n. Facilita la\u00a0colaboraci\u00f3n. Cualquiera que haya tenido que &#8220;pelearse&#8221; con el c\u00f3digo fuente de otro programador (\u00a1o incluso con el propio, pasado alg\u00fan tiempo!) sabr\u00e1 lo dif\u00edcil que es entenderlo y modificarlo; por tanto, todo lo que sea definir y estandarizar va a ahorrar tiempo y trabajo a los desarrollos colaborativos. El uso y la programaci\u00f3n de componentes que siguen una pol\u00edtica de dise\u00f1o uniforme. Un framework orientado a objetos logra que los componentes sean clases que pertenezcan a una gran jerarqu\u00eda de clases, lo que resulta en bibliotecas m\u00e1s f\u00e1ciles de aprender a usar. Permiten crear un dise\u00f1o responsable. Las desventajas de los frameworks son: La dependencia del c\u00f3digo fuente de una aplicaci\u00f3n con respecto al framework. Si se desea cambiar de framework, la mayor parte del c\u00f3digo debe reescribirse. La demanda de grandes cantidades de recursos computacionales debido a que la caracter\u00edstica de reutilizaci\u00f3n de los frameworks tiende a generalizar la funcionalidad de los componentes. El resultado es que se incluyen caracter\u00edsticas que est\u00e1n &#8220;de m\u00e1s&#8221;, provocando una sobrecarga de recursos que se hace m\u00e1s grande en cuanto m\u00e1s amplio es el campo<\/p>\n<p><a href=\"https:\/\/www.palentino.es\/blog\/frameworks-html-y-css-para-desarrollos-web-responsible-design\/\">(M\u00e1s)\u2026<\/a><\/p>\n","protected":false},"author":1,"featured_media":2388,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[5,14,24],"tags":[208,254,67,255,665],"class_list":["post-2365","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacion","category-varios","category-web","tag-css","tag-diseno-responsable","tag-framework","tag-html","tag-web"],"views":4811,"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2012\/09\/Frameworks.png","jetpack_shortlink":"https:\/\/wp.me\/p2ECph-C9","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/2365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/comments?post=2365"}],"version-history":[{"count":15,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/2365\/revisions"}],"predecessor-version":[{"id":2395,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/2365\/revisions\/2395"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media\/2388"}],"wp:attachment":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media?parent=2365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/categories?post=2365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/tags?post=2365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}