Desarrollo de Aplicacionespara Móviles         Diseño de Interacción           Iphone - Blackberry
Convenciones de interacción de iPhone ¿Cómo diseñamos una aplicación para iPhone? Veamos algunas estrategias que se pueden...
Convenciones de interacción de iPhone   Enumerar todas las características que pueden interesarle al usuario   Determina...
Convenciones de interacción de iPhoneEstrategia de diseño de la aplicaciónSupongamos que la idea inicial es desarrollar un...
Convenciones de interacción de iPhoneDeterminar quienes son los usuariosSabemos que apuntamos a usuarios de smartphones, i...
Convenciones de interacción de iPhoneFiltrar la lista de acuerdo a la definición de la    AudienciaBasados en las respuest...
Convenciones de interacción de iPhone  Establecemos la funcionalidad de la aplicación a desarrollar y a quien va          ...
Convenciones de interacción de iPhoneYa sabemos que hace la aplicación y a quien va dirigida. ahora hay que hacer que la a...
Convenciones de interacción de iPhone          Patrones de diseño que siguen las aplicaciones nativas          de iOS.    ...
Convenciones de interacción de iPhone                       Aplicaciones iOS desde la web:Si viene desde la web, es necesa...
Convenciones de interacción de iPhoneEstrategias que pueden ayudar a los desarrolladores web crear unaaplicación iOS:- Enf...
Convenciones de interacción de iPhoneEstrategias que pueden ayudar a los desarrolladores web crear unaaplicación iOS:- La ...
Convenciones de interacción de iPhone                      Personalización a medida de la tareaUtilizando el SDK de iOS, p...
Convenciones de interacción de iPhone                        Personalización a medida de la tarea                   Utiliz...
Convenciones de interacción de iPhoneEsta aplicación, simula un ‘nivel de carpintero’ , el usuario la reconoce, sabe  cómo...
Convenciones de interacción de iPhone                            La Transición a la IOS  Las personas utilizan dispositivo...
Convenciones de interacción de iPhone- Crear una experiencia interactiva y atractiva que atrae a la gente y les permita   ...
Convenciones de interacción de iPhoneDe correo en el escritorio para correo en el iPhoneEl correo es una de las aplicacion...
Convenciones de interacción de iPhone
Convenciones de interacción de iPhoneDe correo en el escritorio para correo en el iPhoneCorreo en el iPhone se centra en l...
Convenciones de interacción de iPhoneEl correo en el iPhone innova la interfaz de usuario en varios aspectos clave.-Distin...
Convenciones de interacción de iPhone
Convenciones de interacción de iPhone   -Navegación fácil y predecible.   Cada pantalla muestra un título que le indica al...
Convenciones de interacción de iPhone   Diferentes tipos de información para diferentes tareas.   •   Cuando el usuario el...
Convenciones de interacción de iPhone         Desde el navegador de escritorio de Safari en iOS   Basadas en estándares we...
Convenciones de interacción de iPhone
Convenciones de interacción de iPhone.En Safari en el escritorio, aparecerá un menú emergente que contiene ungran número d...
Convenciones de interacción de iPhone                      Los usuarios de iOS están                      acostumbrados a ...
Convenciones de interacción de iPhone
Convenciones de interacción de BlackberryBotones•   El usuario, pulsa el boton para iniciar la accion.•   Tener en cuenta:...
Convenciones de interacción de Blackberry
Convenciones de interacción de BlackberryCheck box• Utilizada cuando los usuarios pueden seleccionar varios elementos u  o...
Convenciones de interacción de BlackberryCheck box• Utilizada cuando los usuarios pueden seleccionar varios elementos u  o...
Convenciones de interacción de Blackberry
Convenciones de interacción de BlackberryRadio button• Utilice los radio button botones de radio para indicar un conjunto ...
Convenciones de interacción de BlackberryToggle Switecs• Usted puede usar interruptores de palanca para la mayoría de las ...
Convenciones de interacción de Blackberry
Convenciones de interacción de BlackberryText fieldSi los usuarios necesitan para escribir en su aplicación, puede incluir...
Convenciones de interacción de BlackberryText fieldLos usuarios pueden tocar y mantener el dedo sobre el texto para resalt...
Convenciones de interacción de Blackberry
Convenciones de interacción de Blackberry
Convenciones de interacción de BlackberryMedia controlLos usuarios pueden reproducir, pausar, o pasar a la canción siguien...
Convenciones de interacción de Blackberry
Creación de una plantilla de pagina basicaVamos a construir la primer pagina utilizando jQuery Mobile,   para lo cual vamo...
Creación de una plantilla de pagina basica<!DOCTYPE html><html>        <head>        <title>My Page</title>        <meta n...
Creación de una plantilla de pagina basica<body><div data-role="page">         <div data-role="header">                   ...
Creación de una plantilla de pagina basica<body><div data-role="page">        <div data-role="header">                 <h1...
Creación de una plantilla de pagina basicaEjecutamos el codigo en   phonegap y obtenemos el   resulltado adjunto
Jquery mobile - Creacion de paginas multiples                       • Source: multipage-                         template....
Jquery mobile - Creacion de paginas multiplesAtributos Page – jquery mobileContainer with data-role="page"data-add-back-bt...
Jquery mobile - Creacion de una lista                       • Source: index-lista-                         basica.html
Jquery mobile - Creacion de una lista                       • Source: index-lista-                         basica.html
Jquery mobile - Creacion de una lista anidada                           • Source: index-listas-                           ...
Jquery mobile - Creacion de una lista anidada
Jquery mobile - Creacion de una lista numerada                           • Source: index-lista-                           ...
Jquery mobile - Creacion de una lista ordenada                  alfabeticamente                           • Source: index-...
Jquery mobile - Creacion de una lista con filtro                   de busqueda                            • Source: index-...
Jquery mobile - Creacion de una lista con              formato de texto                         • Source: index-lista-    ...
Jquery mobile - Creacion de una lista con              formato de texto                         • Source: index-lista-    ...
Jquery mobile - Creacion de una lista con                  imagenes                         • Source: index-              ...
Jquery mobile - Creacion de un formulario                         • Source: index-                           formulario.html
Jquery mobile - Creacion de listas con                recuadros                       • Source: index-listas-             ...
Jquery mobile - Creacion de listas con                recuadros
Jquery mobile – Listas con cambios esteticos                          • Source: index-mas-                            list...
Jquery mobile – Listas con cambios esteticos
Jquery mobile - Creacion de listas con                      recuadros• Source: index-slider.html
FEEDBACK¿Alguna duda?                ¿Preguntas?
La próxima clase vamos a ver: Almacenamiento local                 • Local storage                • Session storage
Upcoming SlideShare
Loading in...5
×

Clase7 diseñode interacciónblackberry–iphone

562

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
562
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Clase7 diseñode interacciónblackberry–iphone

  1. 1. Desarrollo de Aplicacionespara Móviles Diseño de Interacción Iphone - Blackberry
  2. 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. 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. 4. Convenciones de interacción de iPhoneEstrategia de diseño de la aplicaciónSupongamos 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. 5. Convenciones de interacción de iPhoneDeterminar quienes son los usuariosSabemos 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. 6. Convenciones de interacción de iPhoneFiltrar la lista de acuerdo a la definición de la AudienciaBasados 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. 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. 8. Convenciones de interacción de iPhoneYa 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. 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. 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. 11. Convenciones de interacción de iPhoneEstrategias que pueden ayudar a los desarrolladores web crear unaaplicación iOS:- Enfoque la aplicación. Los usuarios de iOS esperan que la aplicación haga lo queanuncia, 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 suaplicación iOS. Familiaricese con los elementos de interfaz de usuario y lospatrones que iOS utiliza para mostrar contenido.
  12. 12. Convenciones de interacción de iPhoneEstrategias que pueden ayudar a los desarrolladores web crear unaaplicación iOS:- La mayoría de los sitios web muestran la información más importante en la mitadsuperior 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 sevea en una sola pantalla, probablemente, resulte que la información es poco legibley el diseño no se ajuste al estandar.- Los sitios web suelen mostrar un icono que enlaza con la página de inicio en laparte superior de cada página web.Las aplicaciones de iOS no incluyen páginas de inicio, por lo que estecomportamiento no es necesario, en su lugar le permiten a los usuariosdesplazarse entre aplicaciones utilizando la barra de estado..
  13. 13. Convenciones de interacción de iPhone Personalización a medida de la tareaUtilizando 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 delteclado, motivo por el cual, este diseño termina siendo un obstáculo para el usuario, a pesar de su atractivo diseño:
  14. 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. 15. Convenciones de interacción de iPhoneEsta 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. 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. 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. 18. Convenciones de interacción de iPhoneDe correo en el escritorio para correo en el iPhoneEl correo es una de las aplicaciones más visibles, utilizada y apreciado enMac OS X.Es un programa muy potente que permite a los usuarios crear, recibir, darprioridades, y almacene correo electrónico, realizar un seguimiento de loselementos de acción y eventos, y crear notas e invitaciones.
  19. 19. Convenciones de interacción de iPhone
  20. 20. Convenciones de interacción de iPhoneDe correo en el escritorio para correo en el iPhoneCorreo en el iPhone se centra en la funcionalidad principal de correo en elescritorio, ayudando a la gente para recibir, crear, enviar y organizar susmensajes.Ofrece esta funcionalidad condensada en una interfaz de usuario adaptada ala 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. 21. Convenciones de interacción de iPhoneEl 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. 22. Convenciones de interacción de iPhone
  23. 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. 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. 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. 26. Convenciones de interacción de iPhone
  27. 27. Convenciones de interacción de iPhone.En Safari en el escritorio, aparecerá un menú emergente que contiene ungran número de pantallas partidas como lo hace en una aplicación de MacOS X,En Safari en iOS, un menú pop-up se muestra con elementos nativos, loque proporciona una experiencia de usuario mucho mejor.
  28. 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. 29. Convenciones de interacción de iPhone
  30. 30. Convenciones de interacción de BlackberryBotones• 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. 31. Convenciones de interacción de Blackberry
  32. 32. Convenciones de interacción de BlackberryCheck 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. 33. Convenciones de interacción de BlackberryCheck 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. 34. Convenciones de interacción de Blackberry
  35. 35. Convenciones de interacción de BlackberryRadio 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. 36. Convenciones de interacción de BlackberryToggle 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. 37. Convenciones de interacción de Blackberry
  38. 38. Convenciones de interacción de BlackberryText fieldSi los usuarios necesitan para escribir en su aplicación, puede incluircampos de texto de entrada.Un teclado virtual aparece en la pantalla cuando el usuario toque un campode texto. Los usuarios pueden ocultar el teclado, toque la pantalla fuera delcampo de texto o pulsando la tecla Descartar teclado en el teclado
  39. 39. Convenciones de interacción de BlackberryText fieldLos usuarios pueden tocar y mantener el dedo sobre el texto para resaltaruna palabra o una serie de personajes.Alternativamente, los usuarios pueden seleccionar un bloque de texto altocar la pantalla en dos lugares al mismo tiempo
  40. 40. Convenciones de interacción de Blackberry
  41. 41. Convenciones de interacción de Blackberry
  42. 42. Convenciones de interacción de BlackberryMedia controlLos 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. 43. Convenciones de interacción de Blackberry
  44. 44. Creación de una plantilla de pagina basicaVamos 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. 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> <scriptsrc="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script></head>
  46. 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. 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. 48. Creación de una plantilla de pagina basicaEjecutamos el codigo en phonegap y obtenemos el resulltado adjunto
  49. 49. Jquery mobile - Creacion de paginas multiples • Source: multipage- template.html • Atributos jquery-mobile: jquery-mobile.doc
  50. 50. Jquery mobile - Creacion de paginas multiplesAtributos Page – jquery mobileContainer with data-role="page"data-add-back-btntrue | false (auto add back button, header only)data-back-btn-textstringdata-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 dialogdata-themeswatch letter (a-z)data-titlestring (title used when page is shown)
  51. 51. Jquery mobile - Creacion de una lista • Source: index-lista- basica.html
  52. 52. Jquery mobile - Creacion de una lista • Source: index-lista- basica.html
  53. 53. Jquery mobile - Creacion de una lista anidada • Source: index-listas- anidadas.html
  54. 54. Jquery mobile - Creacion de una lista anidada
  55. 55. Jquery mobile - Creacion de una lista numerada • Source: index-lista- numerada.html
  56. 56. Jquery mobile - Creacion de una lista ordenada alfabeticamente • Source: index-lista- alfabetica.html
  57. 57. Jquery mobile - Creacion de una lista con filtro de busqueda • Source: index-lista- search.html
  58. 58. Jquery mobile - Creacion de una lista con formato de texto • Source: index-lista- texto.html
  59. 59. Jquery mobile - Creacion de una lista con formato de texto • Source: index-lista- texto.html
  60. 60. Jquery mobile - Creacion de una lista con imagenes • Source: index- imagenes.html
  61. 61. Jquery mobile - Creacion de un formulario • Source: index- formulario.html
  62. 62. Jquery mobile - Creacion de listas con recuadros • Source: index-listas- con-bordes.html
  63. 63. Jquery mobile - Creacion de listas con recuadros
  64. 64. Jquery mobile – Listas con cambios esteticos • Source: index-mas- listas.html
  65. 65. Jquery mobile – Listas con cambios esteticos
  66. 66. Jquery mobile - Creacion de listas con recuadros• Source: index-slider.html
  67. 67. FEEDBACK¿Alguna duda? ¿Preguntas?
  68. 68. La próxima clase vamos a ver: Almacenamiento local • Local storage • Session storage
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×