{"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\/disseny\/dissenyar-per-a-diverses-plataformes\/","title":{"rendered":"Dissenyar per a diverses plataformes"},"content":{"rendered":"<p><\/p>\n<h3>Tend\u00e8ncies de navegaci\u00f3 web<\/h3>\n<p>La &#8220;gran guerra&#8221; per al desenvolupador web ha estat fins ara aconseguir la compatibilitat entre tota l&#8217;enorme varietat i versions de navegadors web disponibles al mercat.<\/p>\n<p>Avui dia i com a tend\u00e8ncia creixent s&#8217;afegeixen altres complicacions. La tecnologia avan\u00e7a molt r\u00e0pidament i anem cap a un futur absolutament m\u00f2bil en tots els sentits, de manera que el desenvolupador web no nom\u00e9s haur\u00e0 de &#8220;batallar&#8221; amb els diferents navegadors, sin\u00f3 tamb\u00e9 amb els diferents dispositius que es fan servir per navegar per 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 varietat de dispositius, marques, versions, funcionalitats, mides, prestacions, evoluciona a una velocitat vertiginosa, fet que fa del tot impossible plantejar una versi\u00f3 web per a cada cas i alhora ens impossibilita plantejar les aplicacions web est\u00e0ndard i que siguin usables i visibles en tots els dispositius, sense excepci\u00f3.<\/p>\n<p>Podeu veure un <a href=\"https:\/\/youtu.be\/IZA9qjt2A48\" target=\"_blank\">v\u00eddeo resum d&#8217;estad\u00edstiques<\/a> d&#8217;\u00fas de dispositius m\u00f2bils:<\/p>\n<p>https:\/\/youtu.be\/IZA9qjt2A48<\/p>\n<h3>Experi\u00e8ncia d&#8217;usuari<\/h3>\n<p>Criteris per a dissenyar una bona experi\u00e8ncia d&#8217;usuari entre diferents plataformes <a href=\"http:\/\/www.nngroup.com\/articles\/transmedia-design-for-3-screens\/\" target=\"_blank\">d&#8217;acord amb Jakob Nielsen<\/a>:<\/p>\n<ul>\n<li><strong>Continu\u00eftat visual:<\/strong> les interf\u00edcies d&#8217;usuari o IU (en angl\u00e8s, UI) poden variar per a adaptar-se a les guies de la plataforma, per\u00f2 el disseny s&#8217;ha d&#8217;assemblar prou perqu\u00e8 l&#8217;usuari el reconegui a l&#8217;instant i no se senti perdut.<\/li>\n<li><strong>Continu\u00eftat en les funcions:<\/strong> per molt petit que sigui el dispositiu per al qual dissenyem, l&#8217;usuari ha de tenir la sensaci\u00f3 que les funcions principals de la nostra aplicaci\u00f3 estan igual de disponibles que en els seus \u201cgermans grans\u201d.<\/li>\n<li><strong>Continu\u00eftat en els continguts:<\/strong> haurem d&#8217;usar el mateix to i el mateix llenguatge en totes les plataformes, de manera que l&#8217;usuari \u201cens reconegui\u201d en totes.<\/li>\n<li><strong>Continu\u00eftat en les dades: <\/strong>la informaci\u00f3 que proporciona l&#8217;usuari ha d&#8217;estar disponible i actualitzada a l&#8217;instant en totes les plataformes i dispositius, sense que aquest hagi de fer res perqu\u00e8 la informaci\u00f3 se sincronitzi.<\/li>\n<\/ul>\n<h3>Com es pot aprofitar millor l&#8217;espai?<\/h3>\n<p>Quan dissenyem interf\u00edcies interactives, l&#8217;espai limitat que ens ofereix un dispositiu m\u00f2bil \u00e9s tot un desafiament, sobretot quan treballem en un mateix disseny per a diverses plataformes. Una de les maneres de resoldre la falta d&#8217;espai \u00e9s dissenyar \u201cen profunditat\u201d, \u00e9s a dir, superposant diferents capes d&#8217;interacci\u00f3 que podem mostrar o ocultar segons ho necessitem. D&#8217;aquesta manera, als coneguts eixos x i y afegim un tercer eix, z, que aporta profunditat al nostre disseny. L&#8217;estil <strong><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/material-design\/\" title=\"Material Design\">Material Design<\/a><\/strong> del sistema operatiu Android n&#8217;\u00e9s un bon exemple.<\/p>\n<p>Per a utilitzar aquest recurs correctament hem de tenir en compte dos elements:<\/p>\n<ul>\n<li><strong>Capes.<\/strong> S\u00f3n l&#8217;element b\u00e0sic quan dissenyem \u201cen profunditat\u201d. Podem usar capes per a mostrar el men\u00fa de navegaci\u00f3 i botons, o fins i tot quan recorrem a efectes com la paral\u00b7laxi (vegeu parallax scroll)<\/li>\n<li><strong>Transicions. <\/strong>Haurem d&#8217;animar les capes perqu\u00e8 l&#8217;usuari entengui la jerarquia entre les diferents capes utilitzades. Les transicions m\u00e9s habituals s\u00f3n el lliscament (per exemple, per a mostrar un men\u00fa ocult en una capa inferior) i el zoom, encara que en podem utilitzar d&#8217;altres.<\/li>\n<\/ul>\n<p><strong>Font: <\/strong> The Z-Axis: <a href=\"http:\/\/alistapart.com\/article\/the-z-axis-designing-for-the-future\" target=\"_blank\">Designing for the Future<\/a><\/p>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Tend\u00e8ncies de navegaci\u00f3 web La &#8220;gran guerra&#8221; per al desenvolupador web ha estat fins ara aconseguir la compatibilitat entre tota l&#8217;enorme varietat i versions de navegadors web disponibles al mercat. Avui dia i com a tend\u00e8ncia creixent s&#8217;afegeixen altres complicacions. La tecnologia avan\u00e7a molt r\u00e0pidament i anem cap a un futur absolutament m\u00f2bil en tots &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/disseny\/dissenyar-per-a-diverses-plataformes\/\" class=\"more-link\">Continua llegint <span class=\"screen-reader-text\">\u00abDissenyar per a diverses plataformes\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\/wp-json\/wp\/v2\/pages\/572","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/comments?post=572"}],"version-history":[{"count":11,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/572\/revisions"}],"predecessor-version":[{"id":648,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/572\/revisions\/648"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/649"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/media?parent=572"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/tags?post=572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}