Your SlideShare is downloading. ×
Clase7 diseñode interacciónblackberry–iphone
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Clase7 diseñode interacciónblackberry–iphone

526
views

Published on


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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Desarrollo de Aplicacionespara 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 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. 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. 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. 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 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. 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 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. 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. 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. 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 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. 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 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. Convenciones de interacción de iPhone
  • 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. 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. 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 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. 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 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. Convenciones de interacción de Blackberry
  • 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. 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. Convenciones de interacción de Blackberry
  • 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. 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. Convenciones de interacción de Blackberry
  • 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. 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. Convenciones de interacción de Blackberry
  • 41. Convenciones de interacción de Blackberry
  • 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. Convenciones de interacción de Blackberry
  • 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. 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. 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 basicaEjecutamos 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 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. 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