{"id":1114,"date":"2012-07-04T08:00:33","date_gmt":"2012-07-04T06:00:33","guid":{"rendered":"https:\/\/blogs.ua.es\/pi\/?p=1114"},"modified":"2012-06-30T08:13:40","modified_gmt":"2012-06-30T06:13:40","slug":"menus-adaptables","status":"publish","type":"post","link":"https:\/\/blogs.ua.es\/pi\/2012\/07\/04\/menus-adaptables\/","title":{"rendered":"Men\u00fas adaptables"},"content":{"rendered":"<p>El <a href=\"https:\/\/blogs.ua.es\/pi\/2012\/04\/17\/diseno-web-responsivo-sensible-adaptable\/\">dise\u00f1o web adaptable<\/a> (<em>responsive web design<\/em>)\u00a0es 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. En los \u00faltimos a\u00f1os se ha extendido su uso, en especial por el acceso a la Web desde dispositivos m\u00f3viles.<\/p>\n<p>En el art\u00edculo\u00a0<a href=\"http:\/\/mobile.smashingmagazine.com\/2012\/06\/28\/responsive-menus-enhancing-navigation-on-mobile-websites\/\">Responsive Menus: Enhancing Navigation On Mobile Websites<\/a> explican c\u00f3mo afrontar el dise\u00f1o de los men\u00fas para que sean adaptables.<\/p>\n<p>Al crear un men\u00fa adaptable, nos podemos plantear las siguientes modificaciones:<\/p>\n<ul>\n<li>Puede tener un aspecto visual diferente, por ejemplo, en un dispositivo m\u00f3vil puede tener la apariencia de un men\u00fa de una aplicaci\u00f3n nativa.<\/li>\n<li>Puede tener un contenido diferente, con enlaces apropiados al dispositivo en el que se ve la p\u00e1gina.<\/li>\n<li>Puede aparecer en una posici\u00f3n diferente en la p\u00e1gina web.<\/li>\n<\/ul>\n<p>En el art\u00edculo se presentan varios casos reales, como el de la empresa <a href=\"http:\/\/compass-design.co.uk\/\">Compass Design<\/a>.<\/p>\n<p><a href=\"https:\/\/blogs.ua.es\/pi\/files\/2012\/06\/compassdesign.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1120\" src=\"https:\/\/blogs.ua.es\/pi\/files\/2012\/06\/compassdesign-300x156.png\" alt=\"\" width=\"300\" height=\"156\" srcset=\"https:\/\/blogs.ua.es\/pi\/files\/2012\/06\/compassdesign-300x156.png 300w, https:\/\/blogs.ua.es\/pi\/files\/2012\/06\/compassdesign-1024x534.png 1024w, https:\/\/blogs.ua.es\/pi\/files\/2012\/06\/compassdesign.png 1350w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Este es el men\u00fa que se ve en un ordenador:<\/p>\n<p><a href=\"https:\/\/blogs.ua.es\/pi\/files\/2012\/06\/compassdesign-computer.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1121\" src=\"https:\/\/blogs.ua.es\/pi\/files\/2012\/06\/compassdesign-computer-300x48.png\" alt=\"\" width=\"300\" height=\"48\" srcset=\"https:\/\/blogs.ua.es\/pi\/files\/2012\/06\/compassdesign-computer-300x48.png 300w, https:\/\/blogs.ua.es\/pi\/files\/2012\/06\/compassdesign-computer.png 1000w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Este es el men\u00fa que se ve en un iPad:<\/p>\n<p><a href=\"https:\/\/blogs.ua.es\/pi\/files\/2012\/06\/compassdesign-ipad.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1122\" src=\"https:\/\/blogs.ua.es\/pi\/files\/2012\/06\/compassdesign-ipad-300x74.png\" alt=\"\" width=\"300\" height=\"74\" srcset=\"https:\/\/blogs.ua.es\/pi\/files\/2012\/06\/compassdesign-ipad-300x74.png 300w, https:\/\/blogs.ua.es\/pi\/files\/2012\/06\/compassdesign-ipad.png 764w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Y por \u00faltimo, este es el men\u00fa que se ve en un iPhone, adem\u00e1s, el men\u00fa est\u00e1 situado al final de la p\u00e1gina:<\/p>\n<p><a href=\"https:\/\/blogs.ua.es\/pi\/files\/2012\/06\/compassdesign-iphone.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1123\" src=\"https:\/\/blogs.ua.es\/pi\/files\/2012\/06\/compassdesign-iphone-150x300.png\" alt=\"\" width=\"150\" height=\"300\" srcset=\"https:\/\/blogs.ua.es\/pi\/files\/2012\/06\/compassdesign-iphone-150x300.png 150w, https:\/\/blogs.ua.es\/pi\/files\/2012\/06\/compassdesign-iphone.png 385w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>El dise\u00f1o web adaptable (responsive web design)\u00a0es un dise\u00f1o de un sitio web que se adapta &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"more-link\" href=\"https:\/\/blogs.ua.es\/pi\/2012\/07\/04\/menus-adaptables\/\"> <span class=\"screen-reader-text\">Men\u00fas adaptables<\/span> Read more \u2192<\/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-1114","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\/1114","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=1114"}],"version-history":[{"count":3,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/1114\/revisions"}],"predecessor-version":[{"id":1126,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/1114\/revisions\/1126"}],"wp:attachment":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/media?parent=1114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/categories?post=1114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/tags?post=1114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}