{"id":513,"date":"2015-03-17T12:59:47","date_gmt":"2015-03-17T11:59:47","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/?page_id=513"},"modified":"2015-03-17T13:12:12","modified_gmt":"2015-03-17T12:12:12","slug":"pautes-de-disseny-de-dispositius-mobils","status":"publish","type":"page","link":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/disseny\/pautes-de-disseny\/pautes-de-disseny-de-dispositius-mobils\/","title":{"rendered":"Pautas de dise\u00f1o de dispositivos m\u00f3viles"},"content":{"rendered":"<p><\/p>\n<h3>Pautas generales<\/h3>\n<ul>\n<li>Los dispositivos m\u00f3viles se usan en un <b>contexto muy variable<\/b>. El usuario tiene muchas interferencias ambientales que pueden distraer su atenci\u00f3n.<\/li>\n<li>El usuario es consciente de que el tiempo de conexi\u00f3n tiene un <b>coste econ\u00f3mico<\/b>.<\/li>\n<li>Estos dispositivos se utilizan en general para desempe\u00f1ar <b>tareas concretas<\/b> y poco para navegar err\u00e1ticamente.<\/li>\n<li>Hay una gran <b>heterogeneidad de los dispositivos<\/b>, en especial es importante en cuanto a la diversidad de formatos de pantalla.<\/li>\n<li>En el caso de que la interacci\u00f3n se realice mediante <b>teclado<\/b>, este suele ser dif\u00edcil de manejar. Por lo tanto, es mejor seleccionar opciones que escribir.<\/li>\n<li>Si aun as\u00ed hay que incluir campos de introducci\u00f3n de texto, es recomendable preinformar los campos (rellenarlos con el contenido m\u00e1s frecuente) siempre que sea posible.<\/li>\n<li>El estilo de escritura tiene que ser claro y conciso, m\u00e1s a\u00fan en el caso de aplicaciones dirigidas a otros soportes digitales.<\/li>\n<li>El espacio en blanco puede conducir al usuario a pensar que no hay nada m\u00e1s en la p\u00e1gina. En lugar de l\u00edneas vac\u00edas de separaci\u00f3n, es mejor introducir  \u00ab&#8212;&#8212;-\u00ab.<br \/>\n<a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/separacioentrelinies.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/separacioentrelinies-300x157.jpg\" alt=\"separacioentrelinies\" width=\"300\" height=\"157\" class=\"aligncenter size-medium wp-image-515\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/separacioentrelinies-300x157.jpg 300w, http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/separacioentrelinies.jpg 360w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/li>\n<li>Hay que evitar al m\u00e1ximo los <b>pasos innecesarios<\/b> o elementos que distraigan al usuario (como animaciones o <i>banners<\/i>).<\/li>\n<li>La <b>estructura de contenidos<\/b> tiene que ser lo m\u00e1s plana posible. Es mejor que haya muchas opciones y pocos niveles.\n<p><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/estructuramobils.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/estructuramobils-300x102.png\" alt=\"estructuramobils\" width=\"300\" height=\"102\" class=\"aligncenter size-medium wp-image-514\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/estructuramobils-300x102.png 300w, http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/estructuramobils.png 499w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/li>\n<\/ul>\n<ul>\n<li>Siempre tiene que haber una opci\u00f3n de <b>marcha atr\u00e1s<\/b> y es mejor si contemplamos un <b>acceso permanente <\/b>a las opciones principales de navegaci\u00f3n.<\/li>\n<\/ul>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>La pantalla<\/h3>\n<ul>\n<li>El tama\u00f1o de las pantallas de los dispositivos m\u00f3viles es mucho menor que el del escritorio. Por lo tanto, es probable que un dise\u00f1o que se ve completo en el escritorio necesite de <i>scroll<\/i> en un m\u00f3vil o implique el trabajo con <a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/web-adaptatiu\/\" title=\"Web adaptatiu\">dise\u00f1o responsivo<\/a>.<\/li>\n<li>Es recomendable no utilizar <b>men\u00fas desplegables<\/b> en pantallas peque\u00f1as a pesar de que es preferible a que las opciones de men\u00fa clicables sean demasiado peque\u00f1as.<\/li>\n<li>Las pantallas de los dispositivos m\u00f3viles:\n<ul>\n<li>presentan en general (aunque no todas) <b>menor contraste <\/b>que las de PC;<\/li>\n<li>suelen utilizarse en condiciones de <b>alta luminosidad ambiental<\/b>;<\/li>\n<li>el usuario puede optar por reducir el <b>grado de contraste<\/b> para ahorrar bater\u00eda.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Por todas estas razones, los dise\u00f1os para peque\u00f1as pantallas tienen que presentar un buen contraste entre fondo y contenido. Los cambios sutiles de color pueden llegar a ser invisibles.<\/p>\n<p>Hay una gran diversidad en el tama\u00f1o de las pantallas de los diferentes dispositivos. Adem\u00e1s, algunos de ellos permiten rotar el contenido, de modo que este se puede ver en formato horizontal o en vertical. Sin embargo, a pesar de las variaciones, la gran mayor\u00eda de dispositivos encajan en alguna de las siguientes resoluciones:<\/p>\n<ul>\n<li>128 x 160 p\u00edxeles<\/li>\n<li>176 x 220 p\u00edxeles<\/li>\n<li>240 x 240 p\u00edxeles<\/li>\n<li>320 x 320 p\u00edxeles<\/li>\n<li>480 x 320 p\u00edxeles (iPod, iPhone, Palm, HTC)<\/li>\n<li>960 x 640 (iPhone 4)<\/li>\n<\/ul>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Navegador<\/h3>\n<ul>\n<li>El navegador m\u00e1s utilizado en entorno m\u00f3vil es Opera.<\/li>\n<li>No se tienen que utilizar <b>marcos<\/b> (<i>frames<\/i>), ya que suponen un obst\u00e1culo especial en el caso de pantallas peque\u00f1as.<\/li>\n<li>No se tienen que utilizar <b>ventanas emergentes<\/b> (<i>pop-ups<\/i>).<\/li>\n<li>No se tienen que utilizar <b>men\u00fas contextuales<\/b>.<\/li>\n<li>Muchos dispositivos tienen un teclado muy limitado. Se tiene que evitar la <b>introducci\u00f3n<\/b> <b>de texto<\/b> o solo pedir el estrictamente necesario.<\/li>\n<li>Los dispositivos no tienen rat\u00f3n y el teclado es limitado. La navegaci\u00f3n tiene que basarse en el teclado u otros elementos de activaci\u00f3n de la pantalla t\u00e1ctil (cada vez son m\u00e1s los dispositivos que permiten la interacci\u00f3n directa mediante los dedos o mediante punteros).<\/li>\n<li>Los <b><i>events<\/i><\/b> <i>mouseover<\/i> y <i>mouseout<\/i> no son aplicables. Se utilizan <i>events<\/i> de clic. Se evitar\u00e1n los <i>events<\/i> de\n<ul>\n<li><i>mouseup<\/i> y <i>mousedown<\/i><\/li>\n<li><i>keydown<\/i> y <i>keyup<\/i><\/li>\n<li><i>right-click<\/i><\/li>\n<\/ul>\n<\/li>\n<li>Hay que tener en cuenta las <b>limitaciones de teclado<\/b>: no incluir la orden \u201cPulsa la tecla Y para continuar\u201d porque es posible que el dispositivo no disponga de esa tecla.<\/li>\n<li>Algunos dispositivos soportan <b>Java<\/b> y <b>Flash<\/b>, pero es posible que no los soporten en simult\u00e1neo en la misma p\u00e1gina.<\/li>\n<\/ul>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Dise\u00f1o de la cabecera<\/h3>\n<p>La cabecera es el t\u00edtulo que aparece en la zona superior de la pantalla. Las herramientas de maquetaci\u00f3n y de programaci\u00f3n se refieren a la cabecera como t\u00edtulo (<i>title<\/i>).<\/p>\n<p>Algunas aplicaciones (fundamentalmente los navegadores) pueden utilizar la cabecera como nombre de referencia al generar Favoritos (<i>bookmarks<\/i>), pero hay que tener en cuenta que algunos dispositivos no muestran la cabecera o que, aunque aparezca, no siempre es detectada por los usuarios.<\/p>\n<ul>\n<li>La cabecera no tiene que incluir en exclusiva informaci\u00f3n indispensable para entender la p\u00e1gina.<\/li>\n<li>En el caso de incluir <b>abreviaturas<\/b>, hay que evitar las que no sean convencionales.<\/li>\n<li>La cabecera tiene que <b>informar a los usuarios sobre lo que tienen que ejecutar en la p\u00e1gina<\/b>, salvo que no se requiera ninguna acci\u00f3n del usuario o que el objetivo sea obvio (por ejemplo, no hay que pedir al usuario que seleccione una opci\u00f3n en una lista, si la p\u00e1gina solo contiene la lista).<\/li>\n<li>Las cabeceras tienen que ser <b>breves<\/b>. La mayor\u00eda de dispositivos pueden leer solo los 12 primeros caracteres. Para abreviar el texto de cabecera, podemos eliminar los verbos (por ejemplo, en lugar de \u201cSelecciona una receta\u201d, podemos introducir simplemente \u201cRecetas\u201d).<\/li>\n<li>Utilizar <b>combinaciones de may\u00fascula y min\u00fasculas<\/b> para el texto de cabecera. Estas combinaciones son m\u00e1s f\u00e1ciles de leer que el texto en may\u00fascula.<\/li>\n<li>Cada p\u00e1gina tiene que tener su propia cabecera, ya que esta ser\u00e1 utilizada por algunos navegadores como t\u00edtulo de la referencia de Favoritos (<i>bookmark<\/i>). Si el t\u00edtulo es compartido por varias p\u00e1ginas, se generan referencias confusas.<\/li>\n<\/ul>\n<p>Extra\u00eddo de <a href=\"http:\/\/patterns.design4mobile.com\/index.php\/Screen_Design_Basics\" target=\"_blank\">http:\/\/patterns.design4mobile.com\/index.php\/screen_design_basics<\/a>.<\/p>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Estructura de la p\u00e1gina<\/h3>\n<ul>\n<li>Al dise\u00f1ar la p\u00e1gina, es importante asegurar que el contenido sea visible al acceder (es decir, que no exista un elemento o espacio vac\u00edo en la zona superior que impida ver inicialmente el contenido).<\/li>\n<li>Si el contenido consiste en una imagen, debe haber algo que sea visible al acceder, antes de que la imagen se descargue (el texto alternativo es una buena soluci\u00f3n).<\/li>\n<li>La p\u00e1gina tiene que mantener su estructura y resultar comprensible <b>sin gr\u00e1ficos<\/b> para los casos en los que el usuario tenga las im\u00e1genes desactivadas o si el tiempo de descarga es largo.<\/li>\n<li>Mantener la <b>coherencia<\/b> en la alineaci\u00f3n de los elementos y del texto para que los usuarios puedan leer la p\u00e1gina \u00e1gilmente.<\/li>\n<\/ul>\n<p>Extra\u00eddo de <a href=\"http:\/\/patterns.design4mobile.com\/index.php\/Screen_Design_Basics\" target=\"_blank\">http:\/\/patterns.design4mobile.com\/index.php\/screen_design_basics<\/a>.<\/p>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Redacci\u00f3n de contenidos<\/h3>\n<p>No es recomendable introducir textos muy extensos en aplicaciones para m\u00f3vil por varios motivos: las pantallas de los dispositivos son muy peque\u00f1as y se generan <i>scrolls<\/i> muy largos, aumenta notablemente el tiempo de descarga, el uso de memoria y el coste de conexi\u00f3n para el usuario.<\/p>\n<ul>\n<li>Adoptar un estilo de escritura conciso. Este estilo debe prevalecer incluso por encima de los criterios de estilo corporativos. Las frases tienen que ser directas y precisas. Los verbos deben estar en tiempos activos (evitar el uso de las voces pasivas). El contenido tiene que estar fragmentado en unidades l\u00f3gicas.<\/li>\n<li>Omitir las palabras innecesarias y evitar redundancias. Por ejemplo, se puede utilizar \u201cPIN\u201d en lugar de \u201cn\u00famero PIN\u201d.<\/li>\n<li>Utilizar t\u00edtulos (<i>headings<\/i>) para fragmentar de manera l\u00f3gica la informaci\u00f3n de la pantalla y para indicar al usuario lo que viene a continuaci\u00f3n.<\/li>\n<li>Utilizar p\u00e1rrafos cortos (de en torno a dos o tres frases por p\u00e1rrafo).<\/li>\n<li>Abreviar horas y fechas. Omitir los segundos a menos que sean realmente necesarios. Omitir el a\u00f1o en las fechas, si no es necesario. Si es posible, abreviar el mes con tres letras en lugar de utilizar cifras, ya que puede conducir a confusiones debido a las diferentes notaciones de cada pa\u00eds (por ejemplo, 11\/12 puede entenderse como 11 de diciembre en Bilbao o como 12 de noviembre en Chicago).<\/li>\n<li>Omitir fechas y horas innecesarias. Con frecuencia, una informaci\u00f3n de hoy necesita ser etiquetada con la hora, pero una de d\u00edas anteriores solo necesita la fecha.<\/li>\n<li>Sustituir la introducci\u00f3n de texto por listas de selecci\u00f3n siempre que sea posible (para el usuario de un dispositivo m\u00f3vil es m\u00e1s f\u00e1cil seleccionar que teclear texto).<\/li>\n<li>Poner el texto m\u00e1s importante en primer lugar (siguiendo el estilo period\u00edstico tradicional).<\/li>\n<li>No separar el texto mediante l\u00edneas vac\u00edas. Los usuarios pueden interpretar que ya no hay m\u00e1s texto y dejar de desplazar la p\u00e1gina para leerlo.<\/li>\n<\/ul>\n<p>Extra\u00eddo de <a href=\"http:\/\/patterns.design4mobile.com\/index.php\/Screen_Design_Basics\" target=\"_blank\">http:\/\/patterns.design4mobile.com\/index.php\/screen_design_basics<\/a>.<\/p>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Tipograf\u00eda<\/h3>\n<p>Los dispositivos m\u00f3viles suelen tener un n\u00famero bastante limitado de fuentes disponibles (la mayor\u00eda de ellos tiene un m\u00e1ximo de dos fuentes).<\/p>\n<ul>\n<li>Mantener un nivel de contraste alto para garantizar la legibilidad del texto. Teniendo en cuenta que algunos dispositivos no podr\u00e1n mostrar el color o las im\u00e1genes de fondo, el texto se tendr\u00eda que tratar siempre con color oscuro.<\/li>\n<li>Evitar distinciones sutiles de color. Si es realmente necesario distinguir textos mediante colores, la diferencia entre ellos tiene que ser evidente.<\/li>\n<li>Si se especifican fuentes, se debe incluir una fuente (fuente-<i>family<\/i>) gen\u00e9rica al menos en el \u00faltimo lugar de la lista, por si el dispositivo no puede mostrar ninguna de las anteriores.<\/li>\n<li>Utilizar fuentes \u2013como Geneva o Verdana\u2013 que est\u00e9n optimizadas para pantallas a baja resoluci\u00f3n.<\/li>\n<li>Utilizar un interlineado un poco superior al habitual para incrementar la legibilidad del texto.<\/li>\n<li>Dejar un espacio vac\u00edo a izquierda y derecha del texto (equivalente a tres o cuatro caracteres).<\/li>\n<li>Utilizar el tama\u00f1o <i>x-small<\/i> como est\u00e1ndar para el texto normal (en la mayor\u00eda de dispositivos, un tama\u00f1o mayor se ver\u00e1 excesivamente grande).<\/li>\n<li>Utilizar \u201cem\u201d en lugar de \u201ci\u201d para hacer texto en cursiva y \u201cstrong\u201d en lugar de \u201cb\u201d para destacar. De este modo, cada aparato muestra esta informaci\u00f3n de la manera que tenga por defecto.<\/li>\n<li>No especificar el tama\u00f1o del texto en p\u00edxeles. Si determinamos el tama\u00f1o por p\u00edxeles, puede ser que no est\u00e9 disponible en el dispositivo, de modo que este lo mostrar\u00e1 simplemente en el tama\u00f1o m\u00e1s parecido. Adem\u00e1s, el tama\u00f1o de los p\u00edxeles puede diferir seg\u00fan el dispositivo. Es m\u00e1s recomendable utilizar especificaciones de tama\u00f1o como <i>x-small<\/i>, por ejemplo.<\/li>\n<\/ul>\n<p>Extra\u00eddo de <a href=\"http:\/\/patterns.design4mobile.com\/index.php\/Screen_Design_Basics\" target=\"_blank\">http:\/\/patterns.design4mobile.com\/index.php\/screen_design_basics<\/a>.<\/p>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Enlaces<\/h3>\n<p>La apariencia de los enlaces puede variar seg\u00fan el m\u00f3vil.<\/p>\n<ul>\n<li>El texto de un enlace no tiene que superar los 116 caracteres, ya que algunos dispositivos pueden presentar error con cadenas de caracteres m\u00e1s extensas.<\/li>\n<li>El texto del enlace tendr\u00eda que caber en una sola l\u00ednea. Una buena pr\u00e1ctica es limitarlo a 11 caracteres como m\u00e1ximo.<\/li>\n<li>Evitar las ambig\u00fcedades en las etiquetas de enlaces.<\/li>\n<li>Las palabras completas son mejores que las abreviaturas. En caso de tener que utilizar abreviaturas, hay que evitar las que no sean est\u00e1ndar.<\/li>\n<li>En un grupo de enlaces que no tengan un orden natural, poner primero aquellos que los usuarios utilicen con m\u00e1s frecuencia.<\/li>\n<li>En el caso de p\u00e1ginas largas, utilizar enlaces para acceder a las zonas que no sean inicialmente visibles. Esto reduce la necesidad de utilizar el <i>scroll<\/i>.<\/li>\n<li>Utilizar enlaces de navegaci\u00f3n (como siguiente, anterior o inicio) solo en las zonas superior o inferior de la p\u00e1gina. Si la p\u00e1gina es larga, es recomendable incluirlos de manera simult\u00e1nea en ambas zonas para reducir la necesidad de <i>scroll<\/i>.<\/li>\n<\/ul>\n<p>Extra\u00eddo de <a href=\"http:\/\/patterns.design4mobile.com\/index.php\/Screen_Design_Basics\" target=\"_blank\">http:\/\/patterns.design4mobile.com\/index.php\/screen_design_basics<\/a>.<\/p>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Multimedia e im\u00e1genes<\/h3>\n<p>Como norma general, los gr\u00e1ficos para m\u00f3viles tienen que ser pocos, peque\u00f1os y sencillos. Hay que tener en cuenta, adem\u00e1s, que algunos dispositivos no soportan gr\u00e1ficos y que el soporte de color puede variar entre 65.000, 4.096, 256, 64, 16, 4 o 2 colores.<\/p>\n<ul>\n<li>Mantener la misma paleta de colores a lo largo de toda la aplicaci\u00f3n o web.<\/li>\n<li>Mantener la misma gama de grosor de l\u00ednea para toda la aplicaci\u00f3n o web.<\/li>\n<li>Mantener un alto nivel de contraste de colores (teniendo en cuenta que el dispositivo se puede utilizar en condiciones de alta iluminaci\u00f3n).<\/li>\n<li>Mantener la consistencia en el tama\u00f1o de las im\u00e1genes (que en el entorno m\u00f3vil siempre tiene que ser peque\u00f1o).<\/li>\n<li>Comprobar el aspecto de las im\u00e1genes cuando la orientaci\u00f3n del dispositivo cambia (es decir, cuando se coloca en vertical o en horizontal).<\/li>\n<li>Comprobar que las im\u00e1genes encajan bien en pantalla, sin distorsionar o producir <i>scroll<\/i>.<\/li>\n<li>Utilizar formatos de gr\u00e1fico est\u00e1ndar: PNG, JPG, GIF.<\/li>\n<li>Limitar el n\u00famero de im\u00e1genes por p\u00e1gina (es recomendable no superar las dos im\u00e1genes).<\/li>\n<li>No utilizar mapas de imagen.<\/li>\n<li>Asegurarse de que la p\u00e1gina contin\u00faa vi\u00e9ndose bien sin gr\u00e1ficos.<\/li>\n<\/ul>\n<p>Extra\u00eddo de <a href=\"http:\/\/patterns.design4mobile.com\/index.php\/Screen_Design_Basics\" target=\"_blank\">http:\/\/patterns.design4mobile.com\/index.php\/screen_design_basics<\/a>.<\/p>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Aplicaciones para m\u00f3vil<\/h3>\n<p>Hay muchos tipos de aplicaciones para m\u00f3vil.<\/p>\n<p><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/pautes-de-disseny\/pautes-de-disseny-de-dispositius-mobils\/aplicacions-per-a-mobil\/\" title=\"Aplicacions per a m\u00f2bil\">Leer m\u00e1s<\/a><\/p>\n<hr \/>\n<h3>Bibliograf\u00eda<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.mobiledesign.com\/\" target=\"_blank\">Mobile design<\/a><\/li>\n<\/ul>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Enlaces relacionados<\/h3>\n<ul>\n<li>Consideraciones y recomendaciones para el dise\u00f1o para m\u00f3viles:\n<ul>\n<li><a href=\"http:\/\/mobilewebbestpractices.com\/visual-design\/\" target=\"_blank\">Buenas pr\u00e1cticas<\/a><\/li>\n<li><a href=\"http:\/\/www.slideshare.net\/soreygarcia\/consideraciones-basicas-para-el-desarrollo-deaplicaciones-mviles\" target=\"_blank\">Dise\u00f1o y desarrollo de aplicaciones m\u00f3viles<\/a><\/li>\n<li><a href=\"http:\/\/sefid.info\/webdesign\/mobile-design\/responsive-design-trends-for-mobile-web\/\" target=\"_blank\">Tendencias y recomendaciones para el dise\u00f1o web en dispositivos m\u00f3viles<\/a><\/li>\n<li><a href=\"http:\/\/googlewebmastercentral.blogspot.com.es\/2012\/06\/recommendations-for-building-smartphone.html\" target=\"_blank\">M\u00e1s recomendaciones para el dise\u00f1o web en dispositivos m\u00f3viles<\/a><\/li>\n<li><a href=\"http:\/\/sixrevisions.com\/user-interface\/mobile-ui-design-patterns-inspiration\/\" target=\"_blank\">Patrones de dise\u00f1o para interfaces m\u00f3viles<\/a><\/li>\n<li><a href=\"http:\/\/www.circulodemaquetadores.com\/disenando-para-moviles-diseno-para-multiples-tamanos-de-pantalla\/\" target=\"_blank\">Dise\u00f1ar para m\u00faltiples resoluciones de pantallas m\u00f3viles<\/a><\/li>\n<li><a href=\"http:\/\/www.slideshare.net\/Afidalgo\/interfaces-tctiles-ux-spain\" target=\"_blank\">Dise\u00f1o para interfaces t\u00e1ctiles<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Dise\u00f1o para iPhone y para iPad:\n<ul>\n<li><a href=\"http:\/\/olgacarreras.blogspot.com.es\/2011\/11\/ipad-recomendaciones-de-usabilidad-para.html\" target=\"_blank\">Recomendaciones de usabilidad para iPad<\/a><\/li>\n<li><a href=\"http:\/\/www.gloobs.com\/blog\/diseno-para-iphone-ipad\/\" target=\"_blank\">Dise\u00f1o para iPhone y para iPad<\/a><\/li>\n<li><a href=\"http:\/\/www.slideshare.net\/mringlein\/designing-iphone-ipad-apps\" target=\"_blank\">http:\/\/www.slideshare.net\/mringlein\/designing-iphone-ipad-apps<\/a><\/li>\n<li><a href=\"http:\/\/www.slideshare.net\/createwithcontext\/how-people-really-use-the-iphone-presentation\" target=\"_blank\">http:\/\/www.slideshare.net\/createwithcontext\/how-people-really-use-the-iphone-presentation<\/a><\/li>\n<li><a href=\"http:\/\/www.slideshare.net\/stephenpa\/7-user-experience-lessons-from-the-iphone-introducing-ux\" target=\"_blank\">http:\/\/www.slideshare.net\/stephenpa\/7-user-experience-lessons-from-the-iphone-introducing-ux<\/a><\/li>\n<li><a href=\"http:\/\/developer.apple.com\/library\/ios\/#documentation\/UserExperience\/Conceptual\/MobileHIG\/Introduction\/Introduction.html#\/\/apple_ref\/doc\/uid\/TP40006556-CH1-SW\" target=\"_blank\">http:\/\/developer.apple.com\/library\/ios\/#documentation\/UserExperience\/Conceptual\/MobileHIG\/Introduction\/Introduction.html#\/\/apple_ref\/doc\/uid\/TP40006556-CH1-SW<\/a><\/li>\n<li><a href=\"https:\/\/developer.apple.com\/library\/safari\/ipad\/#documentation\/AppleApplications\/Reference\/SafariWebContent\/DesigningForms\/DesigningForms.htmlhttp:\/\/www.bufa.es\/responsive-design\/\" target=\"_blank\">Consideraciones que se deben tener en cuenta para el dise\u00f1o web con el navegador Safari (iPad y iPhone)<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Dise\u00f1o para Android:\n<ul>\n<li><a href=\"http:\/\/developer.android.com\/design\/index.html\" target=\"_blank\">http:\/\/developer.android.com\/design\/index.html<\/a><\/li>\n<li><a href=\"http:\/\/www.androidpatterns.com\/\" target=\"_blank\">http:\/\/www.androidpatterns.com\/<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/bb158602.aspx\" target=\"_blank\">Dise\u00f1o para Metro (Microsoft)<\/a><\/li>\n<li>Pensando en el usuario, la percepci\u00f3n y la usabilidad:\n<ul>\n<li><a href=\"http:\/\/www.slideshare.net\/mobile\/EveFife\/the-art-of-interaction\" target=\"_blank\">http:\/\/www.slideshare.net\/mobile\/evefife\/the-art-of-interaction<\/a><\/li>\n<li><a href=\"http:\/\/www.slideshare.net\/mobile\/laceves\/planeacin-de-diseo-centrado-en-el-usuario-de-la-experiencia-a-la-percepcin\" target=\"_blank\">http:\/\/www.slideshare.net\/mobile\/laceves\/planeacin-de-diseo-centrado-en-el-usuario-de-la-experiencia-a-la-percepcin<\/a><\/li>\n<li><a href=\"http:\/\/www.slideshare.net\/mobile\/jbarahona\/metodologa-del-diseo-centrado-en-las-personas\" target=\"_blank\">http:\/\/www.slideshare.net\/mobile\/jbarahona\/metodologa-del-diseo-centrado-en-las-personas<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Herramientas<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.opera.com\/developer\/tools\/mobile\/\" target=\"_blank\">Opera Mobile Emulator<\/a><\/li>\n<li><a href=\"http:\/\/www.webdesignerdepot.com\/2012\/11\/6-free-mobile-device-emulators-for-testing-yoursite\/\" target=\"_blank\">Emuladores <i>smartphone<\/i><\/a><\/li>\n<li>Utilidades Safari: seleccionando la opci\u00f3n \u201cDesarrollo\/Agente de usuario\/iPhone\u201d se ven las p\u00e1ginas tal y como se ven con un iPhone.<\/li>\n<\/ul>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Pautas generales Los dispositivos m\u00f3viles se usan en un contexto muy variable. El usuario tiene muchas interferencias ambientales que pueden distraer su atenci\u00f3n. El usuario es consciente de que el tiempo de conexi\u00f3n tiene un coste econ\u00f3mico. Estos dispositivos se utilizan en general para desempe\u00f1ar tareas concretas y poco para navegar err\u00e1ticamente. Hay una gran &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/disseny\/pautes-de-disseny\/pautes-de-disseny-de-dispositius-mobils\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abPautas de dise\u00f1o de dispositivos m\u00f3viles\u00bb<\/span><\/a><\/p>\n","protected":false},"author":65,"featured_media":0,"parent":469,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"plantilla-pagina.php","meta":{"footnotes":""},"tags":[],"class_list":["post-513","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/513","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=513"}],"version-history":[{"count":2,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/513\/revisions"}],"predecessor-version":[{"id":525,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/513\/revisions\/525"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/469"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/media?parent=513"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/tags?post=513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}