{"id":572,"date":"2015-03-24T12:30:15","date_gmt":"2015-03-24T11:30:15","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/?page_id=572"},"modified":"2015-04-07T12:41:15","modified_gmt":"2015-04-07T11:41:15","slug":"dissenyar-per-a-diverses-plataformes","status":"publish","type":"page","link":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/disseny\/dissenyar-per-a-diverses-plataformes\/","title":{"rendered":"Dise\u00f1ar para varias plataformas"},"content":{"rendered":"<p><\/p>\n<h3>Tendencias de navegaci\u00f3n web<\/h3>\n<p>La \u201cgran guerra\u201d para el desarrollador web ha sido hasta ahora conseguir la compatibilidad entre toda la enorme variedad y versiones de navegadores web disponibles en el mercado.<\/p>\n<p>Hoy en d\u00eda, y como tendencia creciente, se a\u00f1aden otras complicaciones. La tecnolog\u00eda avanza con mucha rapidez y vamos hacia un futuro absolutamente m\u00f3vil en todos los sentidos, de modo que el desarrollador web no solo tendr\u00e1 que batallar con los diferentes navegadores sino tambi\u00e9n con los diferentes dispositivos que se utilizan para navegar por Internet.<\/p>\n<figure id=\"attachment_583\" aria-describedby=\"caption-attachment-583\" style=\"width: 129px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/this-is-the-web_BradFrostWeb-com.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/this-is-the-web_BradFrostWeb-com-129x300.jpg\" alt=\"Font: BradFrostWeb.com\" width=\"129\" height=\"300\" class=\"size-medium wp-image-583\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/this-is-the-web_BradFrostWeb-com-129x300.jpg 129w, http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/this-is-the-web_BradFrostWeb-com-440x1024.jpg 440w, http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/this-is-the-web_BradFrostWeb-com.jpg 600w\" sizes=\"auto, (max-width: 129px) 100vw, 129px\" \/><\/a><figcaption id=\"caption-attachment-583\" class=\"wp-caption-text\">Font: BradFrostWeb.com<\/figcaption><\/figure>\n<p>La variedad de dispositivos, marcas, versiones, funcionalidades, tama\u00f1os y prestaciones evoluciona a una velocidad vertiginosa, hecho que hace del todo imposible plantear una versi\u00f3n web para cada caso y a la vez nos imposibilita plantear las aplicaciones web est\u00e1ndares y que sean usables y visibles en todos los dispositivos, sin excepci\u00f3n.<\/p>\n<p>Pod\u00e9is ver un <a href=\"https:\/\/youtu.be\/IZA9qjt2A48\" target=\"_blank\">v\u00eddeo resumen de estad\u00edsticas<\/a> de uso de dispositivos m\u00f3viles:<\/p>\n<p>https:\/\/youtu.be\/IZA9qjt2A48<\/p>\n<h3>Experiencia de usuario<\/h3>\n<p>A continuaci\u00f3n citamos algunos criterios para dise\u00f1ar una buena experiencia de usuario entre diferentes plataformas, <a href=\"http:\/\/www.nngroup.com\/articles\/transmedia-design-for-3-screens\/\" target=\"_blank\">de acuerdo con Jakob Nielsen<\/a>:<\/p>\n<ul>\n<li><strong>Continuidad visual:<\/strong> las interfaces de usuario (UI) pueden variar para adaptarse a las gu\u00edas de la plataforma, pero el dise\u00f1o tiene que parecerse lo suficiente para que el usuario lo reconozca al instante y no se sienta perdido.<\/li>\n<li><strong>Continuidad en las funciones:<\/strong> por muy peque\u00f1o que sea el dispositivo para el que dise\u00f1emos, el usuario ha de tener la sensaci\u00f3n de que las funciones principales de nuestra aplicaci\u00f3n est\u00e1n igual de disponibles que en sus \u201chermanos mayores\u201d. <\/li>\n<li><strong>Continuidad en los contenidos:<\/strong> deberemos usar el mismo tono y lenguaje en todas las plataformas, de modo que el usuario \u201cnos reconozca\u201d en todas ellas.<\/li>\n<li><strong>Continuidad en los datos:<\/strong> la informaci\u00f3n proporcionada por el usuario ha de estar disponible y actualizada al instante en todas las plataformas y dispositivos, sin necesidad de que este tenga que hacer nada para que la informaci\u00f3n se sincronice.<\/li>\n<\/ul>\n<h3>C\u00f3mo aprovechar mejor el espacio<\/h3>\n<p>Cuando dise\u00f1amos interfaces interactivas, el espacio limitado que nos ofrece un dispositivo m\u00f3vil supone todo un desaf\u00edo, sobre todo cuando trabajamos un mismo dise\u00f1o para varias plataformas. Una de las maneras de resolver esta falta de espacio es dise\u00f1ando \u201cen profundidad\u201d, es decir, superponiendo diferentes capas de interacci\u00f3n que podemos mostrar u ocultar seg\u00fan necesitemos. De esta manera, a los conocidos ejes x e y a\u00f1adimos un tercer eje, z, que aporta profundidad a nuestro dise\u00f1o. El estilo <strong><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/material-design\/\" title=\"Material Design\">Material Design<\/a><\/strong> del sistema operativo Android es un buen ejemplo.<br \/>\nPara utilizar este recurso correctamente hemos de tener en cuenta dos elementos:<\/p>\n<ul>\n<li><strong>Capas: <\/strong>son el elemento b\u00e1sico cuando dise\u00f1amos \u201cen profundidad\u201d. Podemos usar capas para mostrar el men\u00fa de navegaci\u00f3n, botones o incluso cuando recurrimos a efectos como el <em>parallax<\/em> (ver parallax scroll).<\/li>\n<li><strong>Transiciones:<\/strong> deberemos animar las capas para que el usuario entienda la jerarqu\u00eda entre las diferentes capas utilizadas. Las transiciones m\u00e1s habituales son el deslizamiento (por ejemplo, para mostrar un men\u00fa oculto en una capa inferior) y el zoom, aunque podemos utilizar otras.<\/li>\n<\/ul>\n<p><strong>Fuente:<\/strong> <a href=\"http:\/\/alistapart.com\/article\/the-z-axis-designing-for-the-future\" target=\"_blank\">The Z-Axis: Designing for the Future<\/a> <\/p>","protected":false},"excerpt":{"rendered":"<p>Tendencias de navegaci\u00f3n web La \u201cgran guerra\u201d para el desarrollador web ha sido hasta ahora conseguir la compatibilidad entre toda la enorme variedad y versiones de navegadores web disponibles en el mercado. Hoy en d\u00eda, y como tendencia creciente, se a\u00f1aden otras complicaciones. La tecnolog\u00eda avanza con mucha rapidez y vamos hacia un futuro absolutamente &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/disseny\/dissenyar-per-a-diverses-plataformes\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abDise\u00f1ar para varias plataformas\u00bb<\/span><\/a><\/p>\n","protected":false},"author":65,"featured_media":0,"parent":649,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"plantilla-pagina.php","meta":{"footnotes":""},"tags":[],"class_list":["post-572","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/572","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/comments?post=572"}],"version-history":[{"count":11,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/572\/revisions"}],"predecessor-version":[{"id":648,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/572\/revisions\/648"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/649"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/media?parent=572"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/tags?post=572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}