{"id":970,"date":"2012-04-17T19:44:28","date_gmt":"2012-04-17T18:44:28","guid":{"rendered":"https:\/\/blogs.ua.es\/pi\/?p=970"},"modified":"2016-10-12T22:35:33","modified_gmt":"2016-10-12T20:35:33","slug":"diseno-web-responsivo-sensible-adaptable","status":"publish","type":"post","link":"https:\/\/blogs.ua.es\/pi\/2012\/04\/17\/diseno-web-responsivo-sensible-adaptable\/","title":{"rendered":"Dise\u00f1o web responsivo, sensible, adaptable, …"},"content":{"rendered":"

Por ahora, hay un poco de l\u00edo y en espa\u00f1ol hay diferentes formas de llamarlo. Pero lo que s\u00ed que sabemos es que en ingl\u00e9s se dice “responsive web design”<\/em>.<\/p>\n

Un dise\u00f1o web adaptable (es el t\u00e9rmino que m\u00e1s me gusta y el que mejor refleja lo que es) es un dise\u00f1o de un sitio web que se adapta a diferentes dispositivos con el fin de lograr la mejor experiencia en cada uno de ellos. Tradicionalmente se lograba creando diferentes versiones de un mismo sitio web (incluso hace m\u00e1s de 10 a\u00f1os hab\u00eda sitios web que ofrec\u00edan una versi\u00f3n para Netscape y otra para Internet Explorer, \u00a1incre\u00edble! pensar\u00e1 alguno), pero eso es un completo error por diferentes motivos que te dejo que pienses t\u00fa mismo. Gracias a un uso correcto de HTML y CSS, podemos tener un \u00fanico sitio web (un solo HTML), pero ofrecer m\u00faltiples posibilidades de visualizaci\u00f3n (m\u00faltiples CSS).<\/p>\n

Hasta hace unos a\u00f1os, la forma tradicional de ofrecer diferentes CSS era detectando en el lado del servidor las caracter\u00edsticas del navegador\/dispositivo del usuario que se conectaba (por ejemplo, a trav\u00e9s del user-agent<\/em>). Seg\u00fan las caracter\u00edsticas detectadas, se devolv\u00eda al usuario un CSS particular.<\/p>\n

Hoy en d\u00eda se puede seguir utilizando esa misma t\u00e9cnica, pero es mucho m\u00e1s sencillo y pr\u00e1ctico utilizar los “media query”<\/em>. Debido a que es mucho m\u00e1s sencillo y cualquiera lo puede hacer, en los \u00faltimos a\u00f1os se ha extendido su uso, en especial por el acceso a la Web desde dispositivos m\u00f3viles.<\/p>\n

En mi entrada Un par de ejemplos de dise\u00f1o responsive<\/a> est\u00e1n enlazados un par de ejemplos muy interesantes que aplican esta t\u00e9cnica.<\/p>\n

La siguiente infograf\u00eda en castellano (\u00a1por fin publicamos una infograf\u00eda en castellano!) nos resume qu\u00e9 es el dise\u00f1o web sensible: Dise\u00f1o web sensible. \u00bf\u00bf\u00bfSensible???<\/a><\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

[Actualizaci\u00f3n 12\/10\/2016]<\/strong><\/p>\n

Fundeu aclar\u00f3 que se debe decir dise\u00f1o adaptativo<\/a>:<\/p>\n

Dise\u00f1o web adaptativo, mejor que adaptable o responsivo, es la traducci\u00f3n m\u00e1s ajustada en espa\u00f1ol de la expresi\u00f3n inglesa responsive web design.<\/p>\n

Esta t\u00e9cnica de dise\u00f1o y desarrollo web busca que las p\u00e1ginas se adapten autom\u00e1ticamente al dispositivo en el que se visualizan.<\/p>\n

En este sentido, lo apropiado en espa\u00f1ol ser\u00eda hablar de adaptativo, t\u00e9rmino que significa \u2018perteneciente o relativo a la adaptaci\u00f3n o a la capacidad de adaptaci\u00f3n\u2019, tal como indica el Diccionario acad\u00e9mico, pues es precisamente lo que persigue este modo de dise\u00f1ar: que las webs tengan capacidad autom\u00e1tica de adaptaci\u00f3n al soporte.<\/p>\n

Adaptable, sin embargo, significa \u2018capaz de ser adaptado\u2019, y carece del sentido autom\u00e1tico de adaptativo. Una p\u00e1gina o un dise\u00f1o adaptable indicar\u00eda que da la posibilidad de que sea modificado, por ejemplo por el usuario, como una opci\u00f3n de configuraci\u00f3n (ajustar el tama\u00f1o de la letra, eliminar las im\u00e1genes, etc.).<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

Por ahora, hay un poco de l\u00edo y en espa\u00f1ol hay diferentes formas de llamarlo. Pero lo que s\u00ed que sabemos es que en ingl\u00e9s se dice “responsive web design”. Un dise\u00f1o web adaptable (es el t\u00e9rmino que m\u00e1s me …<\/p>\n

Dise\u00f1o web responsivo, sensible, adaptable, …<\/span> Leer M\u00e1s »<\/a><\/p>\n","protected":false},"author":40,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[159969,672],"class_list":["post-970","post","type-post","status-publish","format-standard","hentry","category-general","tag-adaptable","tag-diseno"],"_links":{"self":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/comments?post=970"}],"version-history":[{"count":3,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/970\/revisions"}],"predecessor-version":[{"id":4201,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/970\/revisions\/4201"}],"wp:attachment":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/media?parent=970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/categories?post=970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/tags?post=970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}