{"id":1070,"date":"2012-06-22T10:00:21","date_gmt":"2012-06-22T09:00:21","guid":{"rendered":"https:\/\/blogs.ua.es\/pi\/?p=1070"},"modified":"2012-06-21T19:19:28","modified_gmt":"2012-06-21T18:19:28","slug":"analisis-de-un-diseno-adaptable","status":"publish","type":"post","link":"https:\/\/blogs.ua.es\/pi\/2012\/06\/22\/analisis-de-un-diseno-adaptable\/","title":{"rendered":"An\u00e1lisis de un dise\u00f1o adaptable"},"content":{"rendered":"

Un dise\u00f1o web adaptable<\/a>\u00a0(en ingl\u00e9s, responsive web design<\/em>) es aquel que se ha creado teniendo presente la posible visualizaci\u00f3n de una p\u00e1gina web en diferentes dispositivos con diferentes tama\u00f1os y resoluciones de pantalla,\u00a0con el fin de lograr la mejor experiencia en cada uno de ellos.<\/p>\n

Aunque supone un esfuerzo adicional a la hora de desarrollar un sitio web, yo lo intento utilizar desde hace tiempo en mis sitios web (por ejemplo, Introducci\u00f3n a la accesibilidad web<\/a> o HTML5 y CSS3 – El futuro de la programaci\u00f3n web<\/a>) y se lo recomiendo a todo el mundo.<\/p>\n

Acabo de leer el art\u00edculo\u00a0A Responsive Design Case Study<\/a>, en el que se realiza un an\u00e1lisis de las decisiones tomadas para realizar un dise\u00f1o web adaptable.<\/p>\n

El art\u00edculo empieza con el problema actual: dise\u00f1ar un sitio web para que se vea bien en pantallas desde 3,5” hasta 30” supone todo un desaf\u00edo<\/strong>. El art\u00edculo nos presenta un sitio web, Passenger Focus<\/a>, en el que se ha hecho frente a este desaf\u00edo. Para comprobarlo, no tenemos m\u00e1s que navegar a ese sitio web y cambiar el tama\u00f1o de la ventana del navegador. Podremos comprobar que el sitio web no tiene un \u00fanico dise\u00f1o, sino varios, aunque con muchos elementos en com\u00fan.<\/p>\n

Por ejemplo, as\u00ed se ve a 1366 p\u00edxeles de ancho:<\/p>\n

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

Y as\u00ed a un tama\u00f1o intermedio de 733 p\u00edxeles:<\/p>\n

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

Y por \u00faltimo, a un tama\u00f1o m\u00e1s peque\u00f1o de 573 p\u00edxeles:<\/p>\n

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

Interesante, \u00bfverdad?<\/p>\n

Pues hay m\u00e1s cosas interesantes en el art\u00edculo. Por ejemplo, en esta web han desarrollado una gu\u00eda de estilo<\/a>, en la que se define el estilo de los encabezados, las listas, etc. \u00bfHay que crear una p\u00e1gina nueva? No pasa nada, se consulta la lista y ya se sabe lo que se tiene que hacer.<\/p>\n

Otra curiosidad del art\u00edculo: c\u00f3mo ejecutar Internet Explorer 7, 8 y 9 en Mac mediante una m\u00e1quina virtual y de forma gratuita<\/a>.<\/p>\n

Y la \u00faltima, Opera Mobile Emulator<\/a>.<\/p>\n

Y recordad, para que un dise\u00f1o adaptable funcione correctamente en los dispositivos m\u00f3viles, hay que a\u00f1adir esto en el <head><\/code>:<\/p>\n

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=1\"><\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

Un dise\u00f1o web adaptable\u00a0(en ingl\u00e9s, responsive web design) es aquel que se ha creado teniendo presente la posible visualizaci\u00f3n de una p\u00e1gina web en diferentes dispositivos con diferentes tama\u00f1os y resoluciones de pantalla,\u00a0con el fin de lograr la mejor experiencia …<\/p>\n

An\u00e1lisis de un dise\u00f1o 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-1070","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\/1070","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=1070"}],"version-history":[{"count":2,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/1070\/revisions"}],"predecessor-version":[{"id":1075,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/1070\/revisions\/1075"}],"wp:attachment":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/media?parent=1070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/categories?post=1070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/tags?post=1070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}