1. Desarrollo de Aplicaciones
para Móviles
Diseño de Interacción
Iphone - Blackberry

2. Convenciones de interacción de iPhone
¿Cómo diseñamos una aplicación para iPhone?
Veamos algunas estrategias que se pueden utilizar para poner en practica
una idea, revisar opciones de diseño, y generar una aplicación que le
resulte útil al usuario

3. Convenciones de interacción de iPhone
 Enumerar todas las características que pueden interesarle al usuario
 Determinar quiénes son los usuarios
 Filtrar la lista de características a través de la definición de la Audiencia

4. Convenciones de interacción de iPhone
Estrategia de diseño de la aplicación
Supongamos que la idea inicial es desarrollar una aplicación
que ayuda a la gente en el supermercado.
Confeccionamos la siguiente lista de posibles puntos a tener en
cuenta:
Creación de listas de articulos a adquirir
Comparar los precios
Localización los supermercados.
Anotar recetas
Obtener y utilizar cupones
Exploración de diferentes tipos de cocina
Encontrar sustituciones de ingredientes

5. Convenciones de interacción de iPhone
Determinar quienes son los usuarios
Sabemos que apuntamos a usuarios de smartphones, interesados en
aplicaciones de interaccion simple y alto rendimiento, pero
ademas, debemos establecer que los distingue y que es lo mas
importante para ellos.
.
Siguiendo con nuestro ejemplo de compras de supermercado, es
posible que pregunte si sus usuarios:
¿Cocinan en casa o prefiere los platos preparados?
¿Están interesados en los descuentos, o creen que los cupones
no valen la pena?
¿Compran pequeñas cantidades con frecuencia o hacen una
compra mensual?
¿Quieres mantener varias listas en curso para diferentes
propósitos o simplemente quieren recordar algunas cosas para
comprar?
¿Prefieren marcas específicas, o alternativas?

6. Convenciones de interacción de iPhone
Filtrar la lista de acuerdo a la definición de la
Audiencia
Basados en las respuestas anteriores, supongamos que
las siguientes caracteristicas, son las que describen
mejor a su publico objetivo:
• Quieren un ayuda memoria.
• Les gusta cocinar en casa
• Son ahorrativos.

7. Convenciones de interacción de iPhone
Establecemos la funcionalidad de la aplicación a desarrollar y a quien va
dirigida.
Para nuestro ejemplo podria ser:
"Una lista de compras para gente que le gusta cocinar sin gastar demasiado."

8. Convenciones de interacción de iPhone
Ya sabemos que hace la aplicación y a quien va dirigida. ahora hay que hacer
que la aplicación se vea como si hubiera sido diseñado expresamente para
un dispositivo basado en IOS.

9. Convenciones de interacción de iPhone
Patrones de diseño que siguen las aplicaciones nativas
de iOS.
- Botones, selectores, y deslizadores utilizados para accionar las
aplicaciones iOS.
- Estructura de aplicación fácil de navegar.
- Las aplicaciones de iOS a menudo utilizan animaciones precisas y
fluidas para mostrar los resultados de las acciones del usuario.
Indicadores de actividad, barra de estado, alertas y advertencias, son
utilizadas por iOS para interactuar con el usuario.
- Las aplicaciones deben funcionar bien tanto en iPhone como en iPad
A su vez, si está pensando en desarrollar una aplicación que se
ejecuta en el iPhone y el iPad, es necesario adaptar el diseño a cada
dispositivo.

10. Convenciones de interacción de iPhone
Aplicaciones iOS desde la web:
Si viene desde la web, es necesario asegurarse de dar al usuario una experiencia
de aplicación de iOS, no una experiencia en la web.
Recuerde, la gente puede visitar su sitio web en sus dispositivos basados en iOS
utilizando Safari en iOS.
.

11. Convenciones de interacción de iPhone
Estrategias que pueden ayudar a los desarrolladores web crear una
aplicación iOS:
- Enfoque la aplicación. Los usuarios de iOS esperan que la aplicación haga lo que
anuncia, y quieren ver el resultado en forma inmediata.
- Asegúrese de que su aplicación le permita a los usuarios hacer algo.
- No intente reproducir paradigmas de diseño de interfaz de usuario web en su
aplicación iOS. Familiaricese con los elementos de interfaz de usuario y los
patrones que iOS utiliza para mostrar contenido.

12. Convenciones de interacción de iPhone
Estrategias que pueden ayudar a los desarrolladores web crear una
aplicación iOS:
- La mayoría de los sitios web muestran la información más importante en la mitad
superior de la página. Para dispositivos basados en iOS, utilice el desplazamiento,
ya que si reduce el tamaño de fuente, divs, etc con el objetivo que toda la info se
vea en una sola pantalla, probablemente, resulte que la información es poco legible
y el diseño no se ajuste al estandar.
- Los sitios web suelen mostrar un icono que enlaza con la página de inicio en la
parte superior de cada página web.
Las aplicaciones de iOS no incluyen páginas de inicio, por lo que este
comportamiento no es necesario, en su lugar le permiten a los usuarios
desplazarse entre aplicaciones utilizando la barra de estado..

13. Convenciones de interacción de iPhone
Personalización a medida de la tarea
Utilizando el SDK de iOS, puede personalizar la interfaz de usuario de su aplicación
tanto o tan poco como usted elija.
Por ejemplo, imaginemos una aplicación que permite realizar llamadas telefónicas.
Ahora imaginemos que en lugar de un teclado, la aplicación muestra un dial.
El dial está diseñado para que los usuarios puedan saber de inmediato cómo
usarlo.
El dial se comporta de forma realista, gira y reproduce los sonidos originales.
Sin embargo, el uso del disco giratorio es mucho menos eficiente que el uso del
teclado, motivo por el cual, este diseño termina siendo un obstáculo para el usuario,
a pesar de su atractivo diseño:

14. Convenciones de interacción de iPhone
Personalización a medida de la tarea
Utilizando el SDK de iOS, puede personalizar la
interfaz de usuario de su aplicación tanto o tan
poco como usted elija.
Por ejemplo, imaginemos una aplicación que
permite realizar llamadas telefónicas.
Ahora imaginemos que en lugar de un teclado, la
aplicación muestra un dial.
El dial está diseñado para que los usuarios puedan
saber de inmediato cómo usarlo.
El dial se comporta de forma realista, gira y
reproduce los sonidos originales.
Sin embargo, el uso del disco giratorio es mucho
menos eficiente que el uso del teclado, motivo por
el cual, este diseño termina siendo un obstáculo
para el usuario, a pesar de su atractivo diseño:

15. Convenciones de interacción de iPhone
Esta aplicación, simula un ‘nivel de carpintero’ , el usuario la reconoce, sabe
cómo utilizar la herramienta física e inmediatamente sabe cómo utilizar la
aplicación.
La aplicación podría haber mostrado su información sin una representación
grafica tan realista pero esto habría hecho que la aplicación fuese menos
intuitiva y más difícil de usar.:

16. Convenciones de interacción de iPhone
La Transición a la IOS
Las personas utilizan dispositivos basados en iOS de manera muy diferente
de las que usan computadoras de escritorio y portátiles, y tienen diferentes
expectativas acerca de la experiencia del usuario. La transición de software
desde una pc a un dispositivo basado en IOS rara vez es una tarea sencilla.

17. Convenciones de interacción de iPhone
- Crear una experiencia interactiva y atractiva que atrae a la gente y les permita
acceder a los contenidos que le interesa de forma rápida y sencilla.
-El mayor porcentaje de usuarios (por lo menos el 80 por ciento) utilizan un
número muy limitado de funciones en una aplicación, mientras que sólo un
pequeño porcentaje (no más del 20) utilizar todas las características (80x20)

18. Convenciones de interacción de iPhone
De correo en el escritorio para correo en el iPhone
El correo es una de las aplicaciones más visibles, utilizada y apreciado en
Mac OS X.
Es un programa muy potente que permite a los usuarios crear, recibir, dar
prioridades, y almacene correo electrónico, realizar un seguimiento de los
elementos de acción y eventos, y crear notas e invitaciones.

19. Convenciones de interacción de iPhone

20. Convenciones de interacción de iPhone
De correo en el escritorio para correo en el iPhone
Correo en el iPhone se centra en la funcionalidad principal de correo en el
escritorio, ayudando a la gente para recibir, crear, enviar y organizar sus
mensajes.
Ofrece esta funcionalidad condensada en una interfaz de usuario adaptada a
la experiencia móvil.
La aplicación de correo en iPhone, no es mejor que el correo en el escritorio,
sino que es correo, rediseñado para usuarios móviles

21. Convenciones de interacción de iPhone
El correo en el iPhone innova la interfaz de usuario en varios aspectos clave.
-Distintas Pantallas.
Cada pantalla muestra un aspecto del correo:
Lista de cuentas
Lista de buzones de correo
Lista de mensajes
Visualización de mensajes

22. Convenciones de interacción de iPhone

23. Convenciones de interacción de iPhone
-Navegación fácil y predecible.
Cada pantalla muestra un título que le indica al usuario dónde están, y un
botón de retroceso que hace que sea fácil para ellos volver sobre sus pasos.
Controles sencillos.
Redactar un mensaje de correo electrónico y comprobar la existencia de uno
nuevo son las acciones primarias que el usuario puede ser que desee tomar en
cualquier contexto, el correo en el iPhone lo hace accesible en múltiples
pantallas.

24. Convenciones de interacción de iPhone
Diferentes tipos de información para diferentes tareas.
• Cuando el usuario elimina un mensaje, se anima el icono de la
papelera.
• Cuando envia un mensaje, pueden ver su progreso.
• Cuando finaliza el envío, se puede oír un sonido distintivo.

25. Convenciones de interacción de iPhone
Desde el navegador de escritorio de Safari en iOS
Basadas en estándares web se muestran correctamente en dispositivos
basados en iOS.
Teclado de Safari en iOS. Cuando un teclado y el asistente de
formulario son visibles, Safari en el iPhone muestra su página web en la
zona de debajo del campo de texto URL y por encima del teclado y el
asistente de formulario.

26. Convenciones de interacción de iPhone

27. Convenciones de interacción de iPhone
.
En Safari en el escritorio, aparecerá un menú emergente que contiene un
gran número de pantallas partidas como lo hace en una aplicación de Mac
OS X,
En Safari en iOS, un menú pop-up se muestra con elementos nativos, lo
que proporciona una experiencia de usuario mucho mejor.

28. Convenciones de interacción de iPhone
Los usuarios de iOS están
acostumbrados a las listas de
aplicaciones nativas, por lo que al ver las
listas de aplicaciones web, son más
propensos a pensar que el contenido de
la web es una aplicación

29. Convenciones de interacción de iPhone

30. Convenciones de interacción de Blackberry
Botones
• El usuario, pulsa el boton para iniciar la accion.
• Tener en cuenta:
• - Utilice etiquetas claras y concisas.
- Utilice las etiquetas de una sola palabra que sea posible.
- Utilice los verbos que describen la acción asociada, como en "Cancelar",
"Eliminar", o "Guardar".
• Use un icono en lugar de texto

31. Convenciones de interacción de Blackberry

32. Convenciones de interacción de Blackberry
Check box
• Utilizada cuando los usuarios pueden seleccionar varios elementos u
opciones. Los Usuarios simplemente deben tocar en una casilla de
verificación para activarla o desactivarla.
• También puede utilizar las casillas de verificación para permitir a los
usuarios elegir entre una lista de opciones. Estas cajas de verificación
requieren etiquetas.

33. Convenciones de interacción de Blackberry
Check box
• Utilizada cuando los usuarios pueden seleccionar varios elementos u
opciones. Los Usuarios simplemente deben tocar en una casilla de
verificación para activarla o desactivarla.
• También puede utilizar las casillas de verificación para permitir a los
usuarios elegir entre una lista de opciones. Estas cajas de verificación
requieren etiquetas.

34. Convenciones de interacción de Blackberry

35. Convenciones de interacción de Blackberry
Radio button
• Utilice los radio button botones de radio para indicar un conjunto de
opciones mutuamente excluyentes, pero relacionados.
• Utilice los botones de radio para indicar un conjunto de opciones
mutuamente excluyentes, pero relacionados. Los usuarios pueden
seleccionar una opción en un grupo. Los usuarios tocan un botón de
radio para activarla o desactivarla .

36. Convenciones de interacción de Blackberry
Toggle Switecs
• Usted puede usar interruptores de palanca para la mayoría de las
opciones binarias.
• Por ejemplo, puede utilizar un interruptor de palanca para una opción
que puede encenderse y apagarse.
• Los usuarios pueden aprovechar la opción alternativa o arrastre el
control deslizante hacia la izquierda o derecha para cambiar el estado
del interruptor

37. Convenciones de interacción de Blackberry

38. Convenciones de interacción de Blackberry
Text field
Si los usuarios necesitan para escribir en su aplicación, puede incluir
campos de texto de entrada.
Un teclado virtual aparece en la pantalla cuando el usuario toque un campo
de texto. Los usuarios pueden ocultar el teclado, toque la pantalla fuera del
campo de texto o pulsando la tecla Descartar teclado en el teclado

39. Convenciones de interacción de Blackberry
Text field
Los usuarios pueden tocar y mantener el dedo sobre el texto para resaltar
una palabra o una serie de personajes.
Alternativamente, los usuarios pueden seleccionar un bloque de texto al
tocar la pantalla en dos lugares al mismo tiempo

40. Convenciones de interacción de Blackberry

41. Convenciones de interacción de Blackberry

42. Convenciones de interacción de Blackberry
Media control
Los usuarios pueden reproducir, pausar, o pasar a la canción siguiente o
anterior o el vídeo pulsando el control específico.
Los usuarios pueden adelantar o retroceder una canción o un vídeo
arrastrando un dedo sobre la barra.
Llos usuarios pueden ajustar el volumen arrastrando un dedo sobre el control
deslizante de volumen.

43. Convenciones de interacción de Blackberry

44. Creación de una plantilla de pagina basica
Vamos a construir la primer pagina utilizando jQuery Mobile,
para lo cual vamos a seguir los siguientes pasos:
• Creamos un proyecto para android en phonegap, tal como fue
explicado en el tutorial de la clase 4 – Phonegap.
• Creamos la siguiente pagina html:

45. Creación de una plantilla de pagina basica
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></scri
pt>
</head>

46. Creación de una plantilla de pagina basica
<body>
<div data-role="page">
<div data-role="header">
<h1>Proyecto JQ</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

47. Creación de una plantilla de pagina basica
<body>
<div data-role="page">
<div data-role="header">
<h1>Proyecto JQ</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

48. Creación de una plantilla de pagina basica
Ejecutamos el codigo en
phonegap y obtenemos el
resulltado adjunto

49. Jquery mobile - Creacion de paginas multiples
• Source: multipage-
template.html
• Atributos jquery-mobile:
jquery-mobile.doc

50. Jquery mobile - Creacion de paginas multiples
Atributos Page – jquery mobile
Container with data-role="page"
data-add-back-btntrue | false (auto add back button, header only)
data-back-btn-textstring
data-back-btn-themeswatch letter (a-z)
data-close-btn-textstring (text for the close button, dialog only)
data-dom-cachetrue | falsedata-fullscreentrue (used in conjunction with
fixed toolbars) Deprecated in 1.1 - use on header and footer instead.
data-overlay-themeswatch letter (a-z) - overlay theme when the page is
opened in a dialog
data-themeswatch letter (a-z)
data-titlestring (title used when page is shown)

51. Jquery mobile - Creacion de una lista
• Source: index-lista-
basica.html

52. Jquery mobile - Creacion de una lista
• Source: index-lista-
basica.html

53. Jquery mobile - Creacion de una lista anidada
• Source: index-listas-
anidadas.html

54. Jquery mobile - Creacion de una lista anidada

55. Jquery mobile - Creacion de una lista numerada
• Source: index-lista-
numerada.html

56. Jquery mobile - Creacion de una lista ordenada
alfabeticamente
• Source: index-lista-
alfabetica.html

57. Jquery mobile - Creacion de una lista con filtro
de busqueda
• Source: index-lista-
search.html

58. Jquery mobile - Creacion de una lista con
formato de texto
• Source: index-lista-
texto.html

59. Jquery mobile - Creacion de una lista con
formato de texto
• Source: index-lista-
texto.html

60. Jquery mobile - Creacion de una lista con
imagenes
• Source: index-
imagenes.html

61. Jquery mobile - Creacion de un formulario
• Source: index-
formulario.html

62. Jquery mobile - Creacion de listas con
recuadros
• Source: index-listas-
con-bordes.html

63. Jquery mobile - Creacion de listas con
recuadros

64. Jquery mobile – Listas con cambios esteticos
• Source: index-mas-
listas.html

65. Jquery mobile – Listas con cambios esteticos

66. Jquery mobile - Creacion de listas con
recuadros
• Source: index-slider.html

67. FEEDBACK
¿Alguna duda?
¿Preguntas?

68. La próxima clase vamos a ver:
Almacenamiento local
• Local storage
• Session storage