{"id":436,"date":"2013-04-18T12:33:10","date_gmt":"2013-04-18T11:33:10","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/?page_id=436"},"modified":"2013-12-17T10:58:48","modified_gmt":"2013-12-17T09:58:48","slug":"aplicacions-per-a-mobil","status":"publish","type":"page","link":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/usab\/pautes-de-disseny-de-dispositius-mobils\/aplicacions-per-a-mobil\/","title":{"rendered":"Aplicacions per a m\u00f2bil"},"content":{"rendered":"<p>Existeixen molts tipus d&#8217;aplicacions per a m\u00f2bil. Fling (vegeu la bibliografia) les agrupa en les seg\u00fcents categories, ordenades de menys a m\u00e9s complexitat:<\/p>\n<h3>SMS<\/h3>\n<p>\u00c9s el tipus d&#8217;aplicaci\u00f3 m\u00e9s b\u00e0sic. Com que gaireb\u00e9 tots els m\u00f2bils admeten SMS, pot ser una eina molt \u00fatil quan s&#8217;integra amb altres tipus d&#8217;aplicacions (\u00e9s l&#8217;exemple de <a href=\"http:\/\/www.twitter.com\" target=\"_blank\">Twitter<\/a>).<\/p>\n<p>Els usos m\u00e9s freq\u00fcents de l&#8217;SMS s\u00f3n transmetre contingut com text, tons o imatges, o interactuar amb serveis.<\/p>\n<p>Com a desavantatges, els SMS no poden enviar m\u00e9s de 160 car\u00e0cters, i poden suposar una despesa important per a l&#8217;usuari, depenent del contracte que aquest tingui amb el seu operador.<\/p>\n<hr \/>\n<h3>Llocs web per a m\u00f2bils<\/h3>\n<p>Es tracta de llocs web dissenyats espec\u00edficament per a ser executats en navegadors de dispositius m\u00f2bils.<\/p>\n<p>Es caracteritzen per un disseny simple, de &#8220;p\u00e0gina tirada&#8221; o una simple llista d&#8217;enlla\u00e7os que condueixen a p\u00e0gines de segon nivell. S\u00f3n webs b\u00e0sicament informatius, que no tenen la majoria d&#8217;elements interactius que s&#8217;esperen d&#8217;un lloc web tradicional.<\/p>\n<p>El problema consisteix en com mantenir la consist\u00e8ncia a trav\u00e9s dels diversos navegadors, encara que \u00e9s un aspecte en el qual progressivament es va millorant (especialment amb la irrupci\u00f3 d&#8217;Android o iPhone).<\/p>\n<p>Els principals avantatges s\u00f3n que resulten f\u00e0cils de crear, mantenir i publicar, i es poden generar usant les mateixes eines que s&#8217;utilitzen per als llocs web habituals.<\/p>\n<p>Els desavantatges s\u00f3n que estan subjectes a les incompatibilitats entre navegadors ofereixen una experi\u00e8ncia d&#8217;\u00fas limitada, i poden presentar una velocitat de desc\u00e0rrega lenta.<\/p>\n<figure id=\"attachment_427\" aria-describedby=\"caption-attachment-427\" style=\"width: 230px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/elpaisMobil.png\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-427\" alt=\"Website m\u00f2bil de El Pa\u00eds\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/elpaisMobil-230x300.png\" width=\"230\" height=\"300\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/elpaisMobil-230x300.png 230w, http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/elpaisMobil.png 320w\" sizes=\"auto, (max-width: 230px) 100vw, 230px\" \/><\/a><figcaption id=\"caption-attachment-427\" class=\"wp-caption-text\">Lloc web per a m\u00f2bils d&#8217;El Pa\u00eds (www.elpais.com)<\/figcaption><\/figure>\n<hr \/>\n<h3>Ginys<\/h3>\n<p>S\u00f3n petites aplicacions que no poden funcionar per si mateixes, sin\u00f3 que necessiten executar-se sobre una altra aplicaci\u00f3. Alguns exemples s\u00f3n els <a href=\"http:\/\/widgets.opera.com\/\" target=\"_blank\">Opera Widgets<\/a>, <a href=\"http:\/\/www.forum.nokia.com\/Develop\/\" target=\"_blank\">Nokia Web Runtime<\/a> (WRT), <a href=\"http:\/\/mobile.yahoo.com\/developers\" target=\"_blank\">Yahoo Blueprint<\/a>\u00a0i <a href=\"http:\/\/www.adobe.com\/es\/products\/flashlite\/\" target=\"_blank\">Adobe Flash Lite<\/a>.<\/p>\n<p>Els principals avantatges dels ginys \u00e9s que s\u00f3n f\u00e0cils de crear utilitzant HTML, CSS i Javascript. Aix\u00ed mateix, es poden distribuir f\u00e0cilment en diferents dispositius, i ofereixen una experi\u00e8ncia d&#8217;\u00fas i un disseny millor que el dels llocs web per a m\u00f2bil.<\/p>\n<p>En contra, generalment requereixen una plataforma compatible amb el giny, de manera que no poden ser executats en qualsevol m\u00f2bil.<\/p>\n<hr \/>\n<h3>Aplicacions web<\/h3>\n<p>S\u00f3n aplicacions que no necessiten instal\u00b7lar-se al dispositiu m\u00f2bil. Utilitzeu XHTML, CSS i JavaScript i poden proporcionar una experi\u00e8ncia similar a la d&#8217;una aplicaci\u00f3 real, encara que en realitat s&#8217;executen sobre un navegador web. Permeten que l&#8217;usuari interactu\u00ef amb el contingut en temps real. Alguns exemples s\u00f3n les versions per a m\u00f2bil de Facebook, Flickr o Google.<\/p>\n<figure id=\"attachment_428\" aria-describedby=\"caption-attachment-428\" style=\"width: 208px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/GoogleMobileApp.png\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-428\" alt=\"Google Mobile App\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/GoogleMobileApp-208x300.png\" width=\"208\" height=\"300\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/GoogleMobileApp-208x300.png 208w, http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/GoogleMobileApp.png 321w\" sizes=\"auto, (max-width: 208px) 100vw, 208px\" \/><\/a><figcaption id=\"caption-attachment-428\" class=\"wp-caption-text\">Google Mobile App (http:\/\/www.google.com\/mobile\/)<\/figcaption><\/figure>\n<hr \/>\n<h3>Aplicacions natives<\/h3>\n<p>Es tracta d&#8217;aplicacions desenvolupades per a una plataforma espec\u00edfica, la m\u00e9s estesa de les quals \u00e9s la plataforma Java ME, seguida per C, C + + i Objective-C.<\/p>\n<p>Encara que una aplicaci\u00f3 s&#8217;hauria d&#8217;executar b\u00e9 en tots els dispositius amb una mateixa plataforma, de fet poden existir difer\u00e8ncies, de manera que les aplicacions haurien de comprovar-se en tots els dispositius de destinaci\u00f3, o almenys en els m\u00e9s estesos.<\/p>\n<p>Les aplicacions natives permeten connectar amb la majoria de serveis del dispositiu, treballar en l\u00ednia (<em>online<\/em>) o fora de l\u00ednia (<em>offline<\/em>), geolocalitzar, accedir als arxius del sistema o la c\u00e0mera (si est\u00e0 disponible), etc.<\/p>\n<figure id=\"attachment_429\" aria-describedby=\"caption-attachment-429\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/skypeMobile.png\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-429\" alt=\"Aplicaci\u00f3 Skype per a m\u00f2bils\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/skypeMobile-300x263.png\" width=\"300\" height=\"263\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/skypeMobile-300x263.png 300w, http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/skypeMobile.png 360w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-429\" class=\"wp-caption-text\">Aplicaci\u00f3 Skype per a m\u00f2bils (www.skype.com\/en\/download-skype\/skype-for-computer\/)<\/figcaption><\/figure>\n<hr \/>\n<h3>Jocs<\/h3>\n<p>Els jocs s\u00f3n en realitat aplicacions natives que utilitzen una plataforma SDK similar per a crear experi\u00e8ncies immersives. Rarament es poden reproduir mitjan\u00e7ant tecnologia web, i solen ser m\u00e9s f\u00e0cils d&#8217;instal\u00b7lar en m\u00faltiples plataformes que les aplicacions natives tradicionals.<\/p>\n<p>El nucli d&#8217;inter\u00e8s dels jocs sol residir a la part gr\u00e0fica, i utilitzen pocs recursos API del dispositiu. La din\u00e0mica del joc (\u00e9s a dir, com interactua l&#8217;usuari) \u00e9s l&#8217;\u00fanic que ha de ser adaptat als diferents dispositius.<\/p>\n<figure id=\"attachment_430\" aria-describedby=\"caption-attachment-430\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/jocsMobil.png\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-430\" alt=\"Imatge deThe Secret of Monkey Island per a m\u00f2bil\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/jocsMobil-300x197.png\" width=\"300\" height=\"197\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/jocsMobil-300x197.png 300w, http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/jocsMobil.png 436w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-430\" class=\"wp-caption-text\">Imatge de The Secret of Monkey Island per a m\u00f2bil<\/figcaption><\/figure>\n<hr \/>\n<h3>Dissenyar per al context<\/h3>\n<p>En dissenyar per a dispositius m\u00f2bils, \u00e9s important tenir en compte que el <strong>context de l&#8217;usuari<\/strong> \u00e9s m\u00e9s important que mai. Fling (p\u00e0g. 45-67) distingeix dos tipus de context:<\/p>\n<ul>\n<li>Context (amb <em>c<\/em> maj\u00fascula): es refereix a les circumst\u00e0ncies reals de l&#8217;usuari, i a com es pot derivar valor d&#8217;elles. L&#8217;experi\u00e8ncia d&#8217;\u00fas d&#8217;un dispositiu m\u00f2bil pot millorar significativament l&#8217;experi\u00e8ncia de l&#8217;entorn, proporcionant continguts que ajudin l&#8217;usuari a entendre millor un lloc, un objecte o una situaci\u00f3. Un exemple s\u00f3n les aplicacions de realitat augmentada, mitjan\u00e7ant les quals l&#8217;usuari pot obtenir informaci\u00f3 directa i immediata sobre el seu entorn.\n<p><figure id=\"attachment_432\" aria-describedby=\"caption-attachment-432\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/picadilly.png\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-432\" alt=\"Aplicaci\u00f3 de realitat augmentada del Museum of London\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/picadilly-300x200.png\" width=\"300\" height=\"200\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/picadilly-300x200.png 300w, http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/picadilly.png 369w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-432\" class=\"wp-caption-text\">Aplicaci\u00f3 de realitat augmentada del Museum of London<\/figcaption><\/figure><\/li>\n<li>Context (amb <em>c<\/em> min\u00fascula): es refereix a la manera, el medi o el context f\u00edsic en qu\u00e8 l&#8217;usuari realitza una tasca:\n<ul>\n<li>Context f\u00edsic: correspon a la ubicaci\u00f3 de l&#8217;usuari. Depenent de si es troba a casa, al despatx, passejant per un carrer, en un cotxe, en un autob\u00fas o en un tren, cada entorn dicta la manera com accedeix a la informaci\u00f3, i el valor que aquesta adquireix.<\/li>\n<li>Context dels mitjans: els dispositius m\u00f2bils, a difer\u00e8ncia dels mitjans tradicionals, permeten obtenir informaci\u00f3 en qualsevol lloc i de manera immediata. A m\u00e9s, tenen la capacitat de connectar amb l&#8217;audi\u00e8ncia en temps real, cosa que es pot utilitzar de maneres no imaginables en antics mitjans (per exemple, per a sistemes de votaci\u00f3).<\/li>\n<li>Context modal: es refereix a l&#8217;estat d&#8217;\u00e0nim o els objectius personals de l&#8217;usuari. \u00c9s probablement el factor que t\u00e9 m\u00e9s influ\u00e8ncia sobre qu\u00e8, quan i on realitza una tasca. L&#8217;estat d&#8217;\u00e0nim condueix les nostres accions.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Per comprendre el context d&#8217;\u00fas, el dissenyador ha de respondre a les seg\u00fcents preguntes:<\/p>\n<ul>\n<li>Qui s\u00f3n els usuaris? Qu\u00e8 coneix sobre ells? Quin tipus de comportament pot preveure?<\/li>\n<li>Qu\u00e8 est\u00e0 passant mentre interactuen? En quines circumst\u00e0ncies assimilaran millor el contingut que intentem presentar?<\/li>\n<li>Quan interactuen? Quan s\u00f3n a casa i tenen molt de temps per davant? A la feina, en temps curts i a\u00efllats? En moments perduts, mentre esperen el tren?<\/li>\n<li>On s\u00f3n? En un espai p\u00fablic o privat? Dins o fora? De dia o de nit?<\/li>\n<li>Per qu\u00e8 utilitzen l&#8217;aplicaci\u00f3? Quin valor obtenen del seu contingut o serveis?<\/li>\n<li>Com utilitzen el m\u00f2bil? El sostenen a la m\u00e0 o a la butxaca? Com el sostenen? Obert o tancat? En horitzontal o en vertical?<\/li>\n<\/ul>\n<p>En realitat, el nucli del context de l&#8217;usuari est\u00e0 en les seves necessitats. S\u00f3n les seves necessitats les que determinaran els seus objectius i conseq\u00fcentment les seves accions. Si podem con\u00e8ixer les necessitats de l&#8217;usuari, podem definir-ne el context.<\/p>\n<p>El disseny per a m\u00f2bils, per tant, t\u00e9 unes particularitats que el distingeixen del disseny d&#8217;aplicacions per a escriptori (vegeu Fling, p\u00e0g. 89-106). La import\u00e0ncia del context, els l\u00edmits t\u00e8cnics i la necessitat de mostrar la informaci\u00f3 en una pantalla petita defineixen unes pautes espec\u00edfiques que de manera general podrien resumir-se en les seg\u00fcents:<\/p>\n<ul>\n<li>El contingut d&#8217;una aplicaci\u00f3 per a escriptori no pot traslladar-se directament a m\u00f2bil. El context canvia, i les necessitats tamb\u00e9. S&#8217;ha de replantejar el contingut.<\/li>\n<li>Els usuaris tenen un temps limitat per a realitzar les tasques. Per tant, les opcions de l&#8217;usuari s&#8217;haurien de limitar a cinc o menys. Com m\u00e9s opcions hi hagi, m\u00e9s gran \u00e9s la probabilitat que l&#8217;usuari cometi algun error i es dirigeixi a una p\u00e0gina incorrecta.<\/li>\n<li>De vegades \u00e9s inevitable tenir diversos nivells d&#8217;informaci\u00f3 per tal que l&#8217;usuari es desplaci per categories i subcategories fins a arribar al contingut desitjat. Incloure una breu informaci\u00f3 sobre cada categoria ajuda l&#8217;usuari a saber que est\u00e0 avan\u00e7ant en la direcci\u00f3 correcta.<\/li>\n<\/ul>\n<figure id=\"attachment_433\" aria-describedby=\"caption-attachment-433\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/dissenyMobils.png\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-433\" alt=\"Disseny per a m\u00f2bils\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/dissenyMobils-300x212.png\" width=\"300\" height=\"212\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/dissenyMobils-300x212.png 300w, http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/dissenyMobils.png 321w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-433\" class=\"wp-caption-text\">Font: www.flickr.com\/photos\/williamhook\/4742869256\/<\/figcaption><\/figure>\n<hr \/>\n<h3>Bibliografia<\/h3>\n<ul>\n<li><strong>Fling, Brian<\/strong> (2009). <em>Mobile Design and Development<\/em>. Sebastopol, CA, EUA: O&#8217;Reilly Media Inc.<\/li>\n<\/ul>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Existeixen molts tipus d&#8217;aplicacions per a m\u00f2bil. Fling (vegeu la bibliografia) les agrupa en les seg\u00fcents categories, ordenades de menys a m\u00e9s complexitat: SMS \u00c9s el tipus d&#8217;aplicaci\u00f3 m\u00e9s b\u00e0sic. Com que gaireb\u00e9 tots els m\u00f2bils admeten SMS, pot ser una eina molt \u00fatil quan s&#8217;integra amb altres tipus d&#8217;aplicacions (\u00e9s l&#8217;exemple de Twitter). Els &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/usab\/pautes-de-disseny-de-dispositius-mobils\/aplicacions-per-a-mobil\/\" class=\"more-link\">Continua llegint <span class=\"screen-reader-text\">\u00abAplicacions per a m\u00f2bil\u00bb<\/span><\/a><\/p>\n","protected":false},"author":35,"featured_media":0,"parent":419,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"tags":[],"class_list":["post-436","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/pages\/436","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/comments?post=436"}],"version-history":[{"count":13,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/pages\/436\/revisions"}],"predecessor-version":[{"id":636,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/pages\/436\/revisions\/636"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/pages\/419"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/media?parent=436"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/ca\/wp-json\/wp\/v2\/tags?post=436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}