{"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\/es\/usab\/pautes-de-disseny-de-dispositius-mobils\/aplicacions-per-a-mobil\/","title":{"rendered":"Aplicaciones para m\u00f3vil"},"content":{"rendered":"<p>Hay muchos tipos de aplicaciones para m\u00f3vil. Fling (ved la bibliograf\u00eda) las agrupa en las siguientes categor\u00edas, en orden de menor a mayor complejidad:<\/p>\n<h3>SMS<\/h3>\n<p>Es el tipo de aplicaci\u00f3n m\u00e1s b\u00e1sico. Como casi todos los m\u00f3viles soportan SMS, puede ser una herramienta muy \u00fatil cuando se integra con otros tipos de aplicaciones (es el ejemplo de <a href=\"http:\/\/www.twitter.com\/\" target=\"_blank\">Twitter<\/a>).<\/p>\n<p>Los usos m\u00e1s frecuentes del SMS son transmitir contenido como texto, tonos o im\u00e1genes, o interactuar con servicios.<\/p>\n<p>Como desventajas, los SMS no pueden enviar m\u00e1s de 160 caracteres y pueden suponer un gasto importante para el usuario, dependiendo del contrato que este tenga con su operador.<\/p>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Websites<i> m\u00f3viles<\/i><\/h3>\n<p>Se trata de sitios web dise\u00f1ados espec\u00edficamente para ser ejecutados en navegadores de dispositivos m\u00f3viles.<\/p>\n<p>Se caracterizan por un dise\u00f1o simple, de p\u00e1gina trazada o una simple lista de enlaces que conducen a p\u00e1ginas de segundo nivel. Son webs b\u00e1sicamente informativas, que no tienen la mayor\u00eda de elementos interactivos que se espera de un sitio web tradicional.<\/p>\n<p>El problema consiste en c\u00f3mo mantener la consistencia a trav\u00e9s de los diferentes navegadores, aunque es un aspecto en el que progresivamente se va mejorando (en especial con la irrupci\u00f3n de Android o iPhone).<\/p>\n<p>Sus principales ventajas son que resultan f\u00e1ciles de crear, mantener y publicar, y se pueden generar usando las mismas herramientas que se utilizan para los sitios web habituales.<\/p>\n<p>Las desventajas son que est\u00e1n sujetas a las incompatibilidades entre navegadores, ofrecen una experiencia de uso limitada y pueden presentar una velocidad de descarga lenta.<\/p>\n<figure id=\"attachment_639\" aria-describedby=\"caption-attachment-639\" style=\"width: 230px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/elpaisMobil-230x3001.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-639\" alt=\"Website m\u00f3vil de El Pa\u00eds (www.elpais.com).\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/elpaisMobil-230x3001.png\" width=\"230\" height=\"300\" \/><\/a><figcaption id=\"caption-attachment-639\" class=\"wp-caption-text\">Website m\u00f3vil de El Pa\u00eds (www.elpais.com).<\/figcaption><\/figure>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Widgets<\/h3>\n<p>Son peque\u00f1as aplicaciones que no pueden funcionar por s\u00ed mismas, sino que necesitan ejecutarse sobre otra aplicaci\u00f3n. Algunos ejemplos son los\u00a0<a href=\"http:\/\/widgets.opera.com\/\" target=\"_blank\">Opera Widgets<\/a>,\u00a0<a href=\"http:\/\/www.forum.nokia.com\/Develop\/\" target=\"_blank\">Nokia Web Runtime<\/a>\u00a0(WRT),\u00a0<a href=\"http:\/\/mobile.yahoo.com\/developers\" target=\"_blank\">Yahoo Blueprint<\/a> y <a href=\"http:\/\/www.adobe.com\/es\/products\/flashlite\/\" target=\"_blank\">Adobe Flash Lite<\/a>.<\/p>\n<p>La principal ventaja de los <i>widgets<\/i> es que son f\u00e1ciles de crear utilizando HTML, CSS y Javascript. Asimismo, se pueden distribuir con facilidad en diferentes dispositivos y ofrecen una experiencia de uso y un dise\u00f1o mejor que el de los sitios web para m\u00f3vil.<\/p>\n<p>Por contra, en general requieren una plataforma compatible con el <i>widget<\/i>, de modo que no se pueden ejecutar en cualquier m\u00f3vil.<\/p>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Aplicaciones web<\/h3>\n<p>Son aplicaciones que no necesitan instalarse en el dispositivo m\u00f3vil. Utilizan XHTML, CSS y Javascript, y pueden proporcionar una experiencia similar a la de una aplicaci\u00f3n real, aunque en realidad se ejecutan sobre un navegador web. Permiten que el usuario interact\u00fae con el contenido en tiempo real. Algunos ejemplos son las versiones para m\u00f3vil 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\"><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<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Aplicaciones nativas<\/h3>\n<p>Se trata de aplicaciones desarrolladas para una plataforma espec\u00edfica, la m\u00e1s extendida de las cuales es la plataforma Java ME, seguida por C, C + + y Objective-C.<\/p>\n<p>Aunque una aplicaci\u00f3n se tendr\u00eda que ejecutar bien en todos los dispositivos con una misma plataforma, de hecho puede haber diferencias, de modo que las aplicaciones tendr\u00edan que comprobarse en todos los dispositivos de destino o al menos en los m\u00e1s extendidos.<\/p>\n<p>Las aplicaciones nativas permiten conectar con la mayor\u00eda de servicios del dispositivo, trabajar en l\u00ednea o fuera de l\u00ednea, geolocalizar, acceder a los archivos del sistema o la c\u00e1mara (si est\u00e1 disponible), entre otros.<\/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\"><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\u00f3n Skype para m\u00f3viles (www.skype.com\/en\/download-skype\/skype-for-computer\/)<\/figcaption><\/figure>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Juegos<\/h3>\n<p>Los juegos son en realidad aplicaciones nativas que utilizan una plataforma SDK similar para crear experiencias inmersivas. Rara vez se pueden reproducir mediante tecnolog\u00eda web, y suelen ser m\u00e1s f\u00e1ciles de instalar en m\u00faltiples plataformas que las aplicaciones nativas tradicionales.<\/p>\n<p>El n\u00facleo del inter\u00e9s de los juegos suele residir en la parte gr\u00e1fica y utilizan pocos recursos API del dispositivo. La din\u00e1mica del juego (es decir, c\u00f3mo interact\u00faa el usuario) es lo \u00fanico que se tiene adaptar a los diferentes dispositivos.<\/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\"><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\">Imagen de <em>The Secret of Monkey Island<\/em> para m\u00f3vil.<\/figcaption><\/figure>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Dise\u00f1ar para el contexto<\/h3>\n<p>Al dise\u00f1ar para dispositivos m\u00f3viles, es importante tener en cuenta que el\u00a0<b>contexto del usuario<\/b>\u00a0es m\u00e1s importante que nunca. Fling (p\u00e1gs. 45-67) distingue dos tipos de contexto:<\/p>\n<ul>\n<li>El Contexto (con <i>C<\/i> may\u00fascula) se refiere a las circunstancias reales del usuario y a c\u00f3mo se puede derivar valor de ellas. La experiencia de uso de un dispositivo m\u00f3vil puede mejorar de manera significativa la experiencia del entorno, al proporcionar contenidos que ayuden al usuario a entender mejor un lugar, un objeto o una situaci\u00f3n. Un ejemplo son las aplicaciones de realidad aumentada, mediante las cuales el usuario puede obtener informaci\u00f3n directa e inmediata sobre su entorno.<\/li>\n<\/ul>\n<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\"><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\u00f3n de realidad aumentada del Museum of London.<\/figcaption><\/figure>\n<ul>\n<li>El contexto (con <i>c<\/i> min\u00fascula) se refiere a la manera, el medio o el contexto f\u00edsico en el que el usuario desempe\u00f1a una tarea:\n<ul>\n<li>Contexto f\u00edsico: corresponde a la ubicaci\u00f3n del usuario. Dependiendo de si se encuentra en casa, en el despacho, paseando por una calle, en un coche, en un autob\u00fas o en un tren, cada entorno dicta la manera como accede a la informaci\u00f3n y el valor que esta adquiere.<\/li>\n<li>Contexto <i>media<\/i>: los dispositivos m\u00f3viles, a diferencia de los medios tradicionales, permiten obtener informaci\u00f3n en cualquier lugar y de manera inmediata. Adem\u00e1s, tienen la capacidad de conectar con su audiencia en tiempo real, lo que se puede utilizar de maneras no imaginables en antiguos <i>media<\/i> (por ejemplo, para sistemas de votaci\u00f3n).<\/li>\n<li>Contexto modal: se refiere al estado de \u00e1nimo o a los objetivos personales del usuario. Es con probabilidad el factor que tiene mayor influencia sobre el qu\u00e9, el cu\u00e1ndo y el d\u00f3nde tiene lugar una tarea. El estado de \u00e1nimo dirige nuestras acciones.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Para comprender el contexto de uso, el dise\u00f1ador tiene que responder a las siguientes preguntas:<\/p>\n<ul>\n<li>\u00bfQui\u00e9nes son sus usuarios? \u00bfQu\u00e9 conoce sobre ellos? \u00bfQu\u00e9 tipo de comportamiento puede prever?<\/li>\n<li>\u00bfQu\u00e9 est\u00e1 pasando mientras interact\u00faan? \u00bfEn qu\u00e9 circunstancias se asimilar\u00e1 mejor el contenido que intentamos presentar?<\/li>\n<li>\u00bfCu\u00e1ndo interact\u00faan, al estar en casa y tener mucho tiempo por delante? \u00bfEn el trabajo, en tiempos cortos y aislados? \u00bfEn momentos perdidos, mientras esperan el tren?<\/li>\n<li>\u00bfD\u00f3nde est\u00e1n, en un espacio p\u00fablico o privado? \u00bfDentro o fuera? \u00bfDe d\u00eda o de noche?<\/li>\n<li>\u00bfPor qu\u00e9 utilizan la aplicaci\u00f3n? \u00bfQu\u00e9 valor obtienen de su contenido o servicios?<\/li>\n<li>\u00bfC\u00f3mo utilizan su m\u00f3vil? \u00bfLo sostienen en la mano o lo llevan en el bolsillo? \u00bfC\u00f3mo lo sostienen? \u00bfAbierto o cercado? \u00bfEn horizontal o en vertical?<\/li>\n<\/ul>\n<p>En realidad, el n\u00facleo del contexto del usuario est\u00e1 en sus necesidades. Son sus necesidades las que determinar\u00e1n los objetivos y, en consecuencia, sus acciones. Si podemos conocer las necesidades del usuario, podemos definir su contexto.<\/p>\n<p>Por lo tanto, el dise\u00f1o para m\u00f3viles tiene unas particularidades que lo distinguen del dise\u00f1o de aplicaciones para escritorio (ved Fling, p\u00e1gs. 89-106). La importancia del contexto, los l\u00edmites t\u00e9cnicos y la necesidad de mostrar la informaci\u00f3n en una pantalla peque\u00f1a definen unas pautas espec\u00edficas que a escala general podr\u00edan resumirse en las siguientes:<\/p>\n<ul>\n<li>El contenido de una aplicaci\u00f3n para escritorio no puede trasladarse directamente al m\u00f3vil. El contexto cambia y las necesidades tambi\u00e9n. El contenido tiene que ser replanteado.<\/li>\n<li>Los usuarios tienen un tiempo limitado para ejecutar las tareas. Por lo tanto, las opciones del usuario tendr\u00edan que limitarse a cinco o menos. Cuantas m\u00e1s opciones haya, mayor ser\u00e1 la probabilidad de que el usuario cometa alg\u00fan error y se dirija a una p\u00e1gina incorrecta.<\/li>\n<li>A veces, es inevitable tener varios niveles de informaci\u00f3n y que el usuario tenga que desplazarse por categor\u00edas y subcategor\u00edas hasta llegar al contenido deseado. Incluir una breve informaci\u00f3n sobre cada categor\u00eda ayuda al usuario a saber que est\u00e1 avanzando en la direcci\u00f3n 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\"><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\">Fuente: www.flickr.com\/photos\/williamhook\/4742869256\/<\/figcaption><\/figure>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Bibliograf\u00eda<\/h3>\n<ul>\n<li><b>Brian Fling<\/b> (2009). <i>Mobile Design and Development<\/i>. Sebastopol, CA, Estados Unidos: O\u2019Reilly Media Inc.<\/li>\n<\/ul>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Hay muchos tipos de aplicaciones para m\u00f3vil. Fling (ved la bibliograf\u00eda) las agrupa en las siguientes categor\u00edas, en orden de menor a mayor complejidad: SMS Es el tipo de aplicaci\u00f3n m\u00e1s b\u00e1sico. Como casi todos los m\u00f3viles soportan SMS, puede ser una herramienta muy \u00fatil cuando se integra con otros tipos de aplicaciones (es el &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/usab\/pautes-de-disseny-de-dispositius-mobils\/aplicacions-per-a-mobil\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abAplicaciones para m\u00f3vil\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\/es\/wp-json\/wp\/v2\/pages\/436","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/comments?post=436"}],"version-history":[{"count":13,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/pages\/436\/revisions"}],"predecessor-version":[{"id":636,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/pages\/436\/revisions\/636"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/pages\/419"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/media?parent=436"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/tags?post=436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}