Diseño Interactivo Dandole vida a nuestras aplicaciones          @ricdex
¿Que entendemos por    interacción?
• Causa - Efecto
• Causa - Efecto• Comunicación bidireccional.
• Causa - Efecto• Comunicación bidireccional.• Evento - respuesta
¿Que entendemos por  diseño interactivo?
Emergente disciplina que explora, analiza y mejora elcomportamiento del    usuario        frente a un    ente externo, y q...
El fin del DIes mejorar la experiencia del usuario (UX) palabras muy usadas con el auge de la denominadaWeb2.0 y la creació...
Forma                                Contenido                                       Arquitectura informaciónDiseñadores g...
¡Esto es lo mas  importante!  Jefe de marketingDiseñador de “Wilson”                        Forma                         ...
¡Esto es lo mas                                                                            ¡No no! ¡El contenido es  impor...
¡Esto es lo mas                                                                             ¡No no! ¡El contenido es  impo...
USER EXPERIENCE (UX)no es solo gráficos, no es solo contenido ni es solo                    interacción.  es la suma de tod...
Para el éxito de algún producto esnecesario tener roles y tareas especificas en un equipo a lo largo del proceso de        ...
Desarrollo “orientado al usuario”
* del libro                                    About Face 3Desarrollo “orientado al usuario”
Para el equipo una aplicación tiene que ceñirse a las   buenas practicas y a la optimizacion de tareas. Para el cliente, u...
Para el equipo una aplicación tiene que ceñirse a las   buenas practicas y a la optimizacion de tareas. Para el cliente, u...
Para el equipo una aplicación tiene que ceñirse a las   buenas practicas y a la optimizacion de tareas.  Feedback Para el ...
Para el equipo una aplicación tiene que ceñirse a las   buenas practicas y a la optimizacion de tareas.  Feedback Para el ...
Para el equipo una aplicación tiene que ceñirse a las   buenas practicas y a la optimizacion de tareas.  Feedback         ...
Pero.. ¿que es sentido        común?
simplemente.. serhumano un paradigma*
simplemente.. serhumano un paradigma*
simplemente.. serhumano un paradigma*
simplemente.. serhumano un paradigma*                                * representación             de la realidad de un con...
Mas obvio                                Requiere pensar                          Hmmmm                           Hmmmm. P...
El sentido común es indirectamente proporcional    al tiempo tomado para realizar una acción.                Mas obvio    ...
El sentido común es indirectamente proporcional    al tiempo tomado para realizar una acción.                Mas obvio    ...
No hay que diseñar y programar para nosotros;hay que diseñar y programar para el pequeño ogro    insípido sin sentimientos...
No hay que diseñar y programar para nosotros;hay que diseñar y programar para el pequeño ogro    insípido sin sentimientos...
y bueno... ¿como hago paramejorar mis skills de usabilidad   y de diseño interactivo?
aplicando patrones de diseño usados     desde tiempos inmemoriales
•   80/20•   Percepción de lo estético.•   Efecto de cercanía•   Color•   Confirmación (mensajes de alerta)•   La regla de ...
•   80/20•   Percepción de lo estético.•   Efecto de cercanía•   Color•   Confirmación (mensajes de alerta)•   La regla de ...
•   80/20•   Percepción de lo estético.•   Efecto de cercanía•   Color•   Confirmación (mensajes de alerta)•   La regla de ...
80/20
80/20El 20% de la funcionalidad es  usada el 80% del tiempo.
Percepción de lo    estético
Percepción de lo          estéticoDiseños altamente estéticos son percibidos comomas fáciles de usar y mas tolerante a err...
Efecto de cercanía
Efecto de cercanía Tendencia a identificar un grupo de ítems como unasola unidad en vez de múltiples ítems independientes
Algo mas sobre RIA
Rich InternetApplications (RIA)
Rich Internet       Applications (RIA)  Poder y rendimiento deuna aplicación de escritorio
Rich Internet       Applications (RIA)  Poder y rendimiento deuna aplicación de escritorio       iMac/3g
Rich Internet          Applications (RIA)     Poder y rendimiento de   una aplicación de escritorio          iMac/3gdrag&d...
Rich Internet          Applications (RIA)     Poder y rendimiento de   una aplicación de escritorio      +          iMac/3...
Rich Internet          Applications (RIA)     Poder y rendimiento de   una aplicación de escritorio      +   característic...
Rich Internet          Applications (RIA)     Poder y rendimiento de   una aplicación de escritorio      +   característic...
Rich Internet          Applications (RIA)     Poder y rendimiento de   una aplicación de escritorio      +   característic...
Rich Internet          Applications (RIA)     Poder y rendimiento de   una aplicación de escritorio      +   característic...
Rich Internet          Applications (RIA)     Poder y rendimiento de   una aplicación de escritorio      +         caracte...
Los 4 capas de unaaplicación interactiva      en la web
• Estructura o esqueleto de la aplicación.
• Estructura o esqueleto de la aplicación.• Screen layouts.
• Estructura o esqueleto de la aplicación.• Screen layouts.• Controles UI.
• Estructura o esqueleto de la aplicación.• Screen layouts.• Controles UI.• Interacciones.
• Estructura o esqueleto de la aplicación.• Screen layouts.• Controles UI.• Interacciones.                           *Toda...
Estructura de la   aplicación
Estructura de la   aplicación
Screen layouts
Screen layouts
Screen layouts
Screen layouts
Screen layouts
Controles UI
Controles UI
Interacciones
Interacciones
Interacciones1. Hacerlo directo2. Mantenlo simple3. Quedate en la pagina4. Provee una invitación5. Usa transiciones6. Reac...
Herramientas
Herramientascuales y cuando deberían usarse
• Prototipado : Omnigraffle,Visio
• Prototipado : Omnigraffle,Visio• Frontend HTML & Flash: JQuery, Flex
• Prototipado : Omnigraffle,Visio• Frontend HTML & Flash: JQuery, Flex• Diseño: Photoshop, Illustrator, Gimp.
• Prototipado : Omnigraffle,Visio• Frontend HTML & Flash: JQuery, Flex• Diseño: Photoshop, Illustrator, Gimp.• User Feedbac...
• Prototipado : Omnigraffle,Visio• Frontend HTML & Flash: JQuery, Flex• Diseño: Photoshop, Illustrator, Gimp.• User Feedbac...
PrototipadoOmingraffle
Prototipado      Omingraffle•Solo para Mac
Prototipado       Omingraffle•Solo para Mac•Uso de plantillas.
Prototipado       Omingraffle•Solo para Mac•Uso de plantillas.•Exportar a múltiples formatos deimágenes
RUAG S.R.L                                                               Inicio        Quienes somos        Proyectos     ...
HTML & JSJQuery
HTML & JS           JQuery•Orientado a Eventos (callback).
HTML & JS          JQuery•Orientado a Eventos (callback).•Manejo del DOM (Document ObjectModel).
HTML & JS           JQuery•Orientado a Eventos (callback).•Manejo del DOM (Document ObjectModel).•Uso de plugins (basadose...
HTML & JS           JQuery•Orientado a Eventos (callback).•Manejo del DOM (Document ObjectModel).•Uso de plugins (basadose...
<!doctype html><html>  <head>    <meta charset="utf-8">    <title>Demo</title><link href="style.css" TYPE="text/css"MEDIA=...
Selector               Resultado                         Selecciona los <div>$("body > div")                           hij...
FlashAdobe Flex & Air
Flash Adobe Flex & Air•Base en el motor de flash.
Flash Adobe Flex & Air•Base en el motor de flash.•Lenguaje similar a html & js.
Flash Adobe Flex & Air•Base en el motor de flash.•Lenguaje similar a html & js.•Recibe conexiones http, servicios weby meto...
Flash Adobe Flex & Air•Base en el motor de flash.•Lenguaje similar a html & js.•Recibe conexiones http, servicios weby meto...
DASHBOARD
DASHBOARD
DASHBOARD   MOBILES
DASHBOARD   MOBILES
DASHBOARD   MOBILES DESKTOP
DASHBOARD   MOBILES DESKTOP
DASHBOARD    MOBILES            MULTITOUCH DESKTOP
Recomendaciones   al usar Flex
Recomendaciones       al usar Flex• Evitar realizar procesamiento demasiado  cargado (logica). Dejar todo eso al servidor.
Recomendaciones       al usar Flex• Evitar realizar procesamiento demasiado  cargado (logica). Dejar todo eso al servidor....
Recomendaciones       al usar Flex• Evitar realizar procesamiento demasiado  cargado (logica). Dejar todo eso al servidor....
Recomendaciones       al usar Flex• Evitar realizar procesamiento demasiado  cargado (logica). Dejar todo eso al servidor....
Recomendaciones       al usar Flex• Evitar realizar procesamiento demasiado  cargado (logica). Dejar todo eso al servidor....
User FeebackBouncehttp://www.bounceapp.com/
User Feeback           Bounce            http://www.bounceapp.com/•Facil y practico de usar (notasflotantes sobre el screen...
User Feeback           Bounce            http://www.bounceapp.com/•Facil y practico de usar (notasflotantes sobre el screen...
User Feeback           Bounce            http://www.bounceapp.com/•Facil y practico de usar (notasflotantes sobre el screen...
User Feeback           Bounce            http://www.bounceapp.com/•Facil y practico de usar (notasflotantes sobre el screen...
¿Cual es la tendencia de la  tecnologia para RIAs?
¿Cual es la tendencia de la    tecnologia para RIAs?• Separacion total Frontend-Backend (uso de  APIs, RESTful, Node.js)
¿Cual es la tendencia de la    tecnologia para RIAs?• Separacion total Frontend-Backend (uso de  APIs, RESTful, Node.js)• ...
¿Cual es la tendencia de la    tecnologia para RIAs?• Separacion total Frontend-Backend (uso de  APIs, RESTful, Node.js)• ...
¿Cual es la tendencia de la    tecnologia para RIAs?• Separacion total Frontend-Backend (uso de  APIs, RESTful, Node.js)• ...
http://www.w3.org/html/logo/
•   Aplicaciones offline (similar a gears)•   Tiempo real (websockets)•   Multimedia (<video>)•   Efectos 3d•   Mobiles•   ...
Libros•   Universal Principles of Design (2003)•   Dont make me think (2006)•   Designing web interfaces (2009)•   Measuri...
GRACIAS!
GRACIAS!
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Diseño interactivo : Dandole vida a nuestras aplicaciones
Upcoming SlideShare
Loading in …5
×

Diseño interactivo : Dandole vida a nuestras aplicaciones

1,425 views

Published on

Como reza el viejo dicho: "los hijos de uno nunca son feos" , y mucha gente lo aplica a todas sus creaciones - incluso cuando desarrolla - y no toma en cuenta a nuestro principal involucrado: el usuario final. En esta webinar analizaremos - de manera introductora - nuestros "hijos" desde un punto de vista funcional para saber que tan interactivos, inteligentes y usables pueden llegar a ser; y a mejorarlos en base a ciertos principios, herramientas y metricas usadas para crear un impacto mas intuitivo y transparente.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,425
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Diseño interactivo : Dandole vida a nuestras aplicaciones

    1. 1. Diseño Interactivo Dandole vida a nuestras aplicaciones @ricdex
    2. 2. ¿Que entendemos por interacción?
    3. 3. • Causa - Efecto
    4. 4. • Causa - Efecto• Comunicación bidireccional.
    5. 5. • Causa - Efecto• Comunicación bidireccional.• Evento - respuesta
    6. 6. ¿Que entendemos por diseño interactivo?
    7. 7. Emergente disciplina que explora, analiza y mejora elcomportamiento del usuario frente a un ente externo, y que tiene como bases laexperiencia humana, la ciencia y la creatividad.
    8. 8. El fin del DIes mejorar la experiencia del usuario (UX) palabras muy usadas con el auge de la denominadaWeb2.0 y la creación de aplicaciones ricas en internet (RIA)
    9. 9. Forma Contenido Arquitectura informaciónDiseñadores gráficos Animaciones y/o vídeos Artistas Archivos Eventos Diseñadores de interacción
    10. 10. ¡Esto es lo mas importante! Jefe de marketingDiseñador de “Wilson” Forma Contenido Arquitectura información Diseñadores gráficos Animaciones y/o vídeos Artistas Archivos Eventos Diseñadores de interacción
    11. 11. ¡Esto es lo mas ¡No no! ¡El contenido es importante! el rey en una pagina! Jefe de marketingDiseñador de “Wilson” Periodista con mucho cafe encima Blogero y tuitero de masas Forma Contenido Arquitectura información Diseñadores gráficos Animaciones y/o vídeos Artistas Archivos Eventos Diseñadores de interacción
    12. 12. ¡Esto es lo mas ¡No no! ¡El contenido es importante! el rey en una pagina! Jefe de marketingDiseñador de “Wilson” Periodista con mucho cafe encima Blogero y tuitero de masas Forma Contenido Arquitectura información Diseñadores gráficos Animaciones y/o vídeos Artistas Archivos Eventos ¡What! ¡Que hablan! Esa Diseñadores pagina no sirve sin de interacción animaciones a lo 2.0 Programador fanatico de jquery Un flashero frustrado
    13. 13. USER EXPERIENCE (UX)no es solo gráficos, no es solo contenido ni es solo interacción. es la suma de todo eso + la visión del negocio
    14. 14. Para el éxito de algún producto esnecesario tener roles y tareas especificas en un equipo a lo largo del proceso de desarrollo.
    15. 15. Desarrollo “orientado al usuario”
    16. 16. * del libro About Face 3Desarrollo “orientado al usuario”
    17. 17. Para el equipo una aplicación tiene que ceñirse a las buenas practicas y a la optimizacion de tareas. Para el cliente, una aplicación tiene que ceñirse al sentido común y a la facilidad de uso.
    18. 18. Para el equipo una aplicación tiene que ceñirse a las buenas practicas y a la optimizacion de tareas. Para el cliente, una aplicación tiene que ceñirse al sentido común y a la facilidad de uso.
    19. 19. Para el equipo una aplicación tiene que ceñirse a las buenas practicas y a la optimizacion de tareas. Feedback Para el cliente, una aplicación tiene que ceñirse al sentido común y a la facilidad de uso.
    20. 20. Para el equipo una aplicación tiene que ceñirse a las buenas practicas y a la optimizacion de tareas. Feedback Para el cliente, una aplicación tiene que ceñirse al sentido común y a la facilidad de uso.
    21. 21. Para el equipo una aplicación tiene que ceñirse a las buenas practicas y a la optimizacion de tareas. Feedback Test Para el cliente, una aplicación tiene que ceñirse al sentido común y a la facilidad de uso.
    22. 22. Pero.. ¿que es sentido común?
    23. 23. simplemente.. serhumano un paradigma*
    24. 24. simplemente.. serhumano un paradigma*
    25. 25. simplemente.. serhumano un paradigma*
    26. 26. simplemente.. serhumano un paradigma* * representación de la realidad de un contexto dado
    27. 27. Mas obvio Requiere pensar Hmmmm Hmmmm. Puede ser trabajos.Trabajos!! [milisegundos pensando] Pero suena mas que eso. Click Trabajos!! Click ¿Debo hacer click o seguir mirandolo? Trabajos Oportunidades Emple-o-rama de empleo
    28. 28. El sentido común es indirectamente proporcional al tiempo tomado para realizar una acción. Mas obvio Requiere pensar Hmmmm Hmmmm. Puede ser trabajos. Trabajos!! [milisegundos pensando] Pero suena mas que eso. Click Trabajos!! Click ¿Debo hacer click o seguir mirandolo? Trabajos Oportunidades Emple-o-rama de empleo
    29. 29. El sentido común es indirectamente proporcional al tiempo tomado para realizar una acción. Mas obvio Requiere pensar Hmmmm Hmmmm. Puede ser trabajos. Trabajos!! [milisegundos pensando] Pero suena mas que eso. Click Trabajos!! Click ¿Debo hacer click o seguir mirandolo? Trabajos Oportunidades Emple-o-rama de empleo * del libro “Dont make me think”
    30. 30. No hay que diseñar y programar para nosotros;hay que diseñar y programar para el pequeño ogro insípido sin sentimientos y amargo que existe en el corazón de cada usuario.*
    31. 31. No hay que diseñar y programar para nosotros;hay que diseñar y programar para el pequeño ogro insípido sin sentimientos y amargo que existe en el corazón de cada usuario.* * dedicado a todos aquellos pobres programadores que nunca se ganaron el cariño del pueblo.
    32. 32. y bueno... ¿como hago paramejorar mis skills de usabilidad y de diseño interactivo?
    33. 33. aplicando patrones de diseño usados desde tiempos inmemoriales
    34. 34. • 80/20• Percepción de lo estético.• Efecto de cercanía• Color• Confirmación (mensajes de alerta)• La regla de Fibonacci• Y mas (cerca de 100+).
    35. 35. • 80/20• Percepción de lo estético.• Efecto de cercanía• Color• Confirmación (mensajes de alerta)• La regla de Fibonacci• Y mas (cerca de 100+). * Universal Principles of Design (2003)
    36. 36. • 80/20• Percepción de lo estético.• Efecto de cercanía• Color• Confirmación (mensajes de alerta)• La regla de Fibonacci• Y mas (cerca de 100+). * Universal Principles of Design (2003)
    37. 37. 80/20
    38. 38. 80/20El 20% de la funcionalidad es usada el 80% del tiempo.
    39. 39. Percepción de lo estético
    40. 40. Percepción de lo estéticoDiseños altamente estéticos son percibidos comomas fáciles de usar y mas tolerante a errores que diseños pobremente estéticos
    41. 41. Efecto de cercanía
    42. 42. Efecto de cercanía Tendencia a identificar un grupo de ítems como unasola unidad en vez de múltiples ítems independientes
    43. 43. Algo mas sobre RIA
    44. 44. Rich InternetApplications (RIA)
    45. 45. Rich Internet Applications (RIA) Poder y rendimiento deuna aplicación de escritorio
    46. 46. Rich Internet Applications (RIA) Poder y rendimiento deuna aplicación de escritorio iMac/3g
    47. 47. Rich Internet Applications (RIA) Poder y rendimiento de una aplicación de escritorio iMac/3gdrag&drop, explorador de archivos,uso de camara y microfono, alertas
    48. 48. Rich Internet Applications (RIA) Poder y rendimiento de una aplicación de escritorio + iMac/3gdrag&drop, explorador de archivos,uso de camara y microfono, alertas
    49. 49. Rich Internet Applications (RIA) Poder y rendimiento de una aplicación de escritorio + características comunes de una aplicación web iMac/3gdrag&drop, explorador de archivos,uso de camara y microfono, alertas
    50. 50. Rich Internet Applications (RIA) Poder y rendimiento de una aplicación de escritorio + características comunes de una aplicación web Web Page Title http://domain.com Google iMac/3gdrag&drop, explorador de archivos,uso de camara y microfono, alertas
    51. 51. Rich Internet Applications (RIA) Poder y rendimiento de una aplicación de escritorio + características comunes de una aplicación web Web Page Title http://domain.com Google This is the Title of the Video One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed... More... 16:9 URL Embed 0:00 / 4:59 iMac/3gdrag&drop, explorador de archivos,uso de camara y microfono, alertas
    52. 52. Rich Internet Applications (RIA) Poder y rendimiento de una aplicación de escritorio + características comunes de una aplicación web Web Page Title http://domain.com Google This is the Title of the Video One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed... More... 16:9 URL Embed 0:00 / 4:59 Tab Tab Tab Tab iMac/3gdrag&drop, explorador de archivos,uso de camara y microfono, alertas
    53. 53. Rich Internet Applications (RIA) Poder y rendimiento de una aplicación de escritorio + características comunes de una aplicación web Web Page Title http://domain.com Google This is the Title of the Video One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed... More... 16:9 URL Embed 0:00 / 4:59 Tab Tab Tab Tab iMac/3gdrag&drop, explorador de archivos, hyperlinks, navegacion, tags, popups,uso de camara y microfono, alertas CSS, back button
    54. 54. Los 4 capas de unaaplicación interactiva en la web
    55. 55. • Estructura o esqueleto de la aplicación.
    56. 56. • Estructura o esqueleto de la aplicación.• Screen layouts.
    57. 57. • Estructura o esqueleto de la aplicación.• Screen layouts.• Controles UI.
    58. 58. • Estructura o esqueleto de la aplicación.• Screen layouts.• Controles UI.• Interacciones.
    59. 59. • Estructura o esqueleto de la aplicación.• Screen layouts.• Controles UI.• Interacciones. *Todas estas capas se pueden realizar con un buen diseño y uso de las herramientas apropiadas
    60. 60. Estructura de la aplicación
    61. 61. Estructura de la aplicación
    62. 62. Screen layouts
    63. 63. Screen layouts
    64. 64. Screen layouts
    65. 65. Screen layouts
    66. 66. Screen layouts
    67. 67. Controles UI
    68. 68. Controles UI
    69. 69. Interacciones
    70. 70. Interacciones
    71. 71. Interacciones1. Hacerlo directo2. Mantenlo simple3. Quedate en la pagina4. Provee una invitación5. Usa transiciones6. Reaccionainmediatamente
    72. 72. Herramientas
    73. 73. Herramientascuales y cuando deberían usarse
    74. 74. • Prototipado : Omnigraffle,Visio
    75. 75. • Prototipado : Omnigraffle,Visio• Frontend HTML & Flash: JQuery, Flex
    76. 76. • Prototipado : Omnigraffle,Visio• Frontend HTML & Flash: JQuery, Flex• Diseño: Photoshop, Illustrator, Gimp.
    77. 77. • Prototipado : Omnigraffle,Visio• Frontend HTML & Flash: JQuery, Flex• Diseño: Photoshop, Illustrator, Gimp.• User Feedback: Bounce, Notable
    78. 78. • Prototipado : Omnigraffle,Visio• Frontend HTML & Flash: JQuery, Flex• Diseño: Photoshop, Illustrator, Gimp.• User Feedback: Bounce, Notable
    79. 79. PrototipadoOmingraffle
    80. 80. Prototipado Omingraffle•Solo para Mac
    81. 81. Prototipado Omingraffle•Solo para Mac•Uso de plantillas.
    82. 82. Prototipado Omingraffle•Solo para Mac•Uso de plantillas.•Exportar a múltiples formatos deimágenes
    83. 83. RUAG S.R.L Inicio Quienes somos Proyectos ContactenosLogo y descripcionQuienes somos 1Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,there live the blind texts. Separated they live in Bookmarksgrove right at the coast of theSemantics, a large language ocean.A small river named Duden flows by their place and supplies it with the necessaryregelialia. It is a paradisematic country, in which roasted parts of sentences fly into yourmouth. 2Even the all-powerful Pointing has no control about the blind texts it is an almostunorthographic life One day however a small line of blind text by the name of LoremIpsum decided to leave for the far World of Grammar. The Big Oxmox advised her not todo so, because there were thousands of bad Commas. Servicio 1 Servicio 2 Servicio 3 Far far away, behind the word Far far away, behind the word Far far away, behind the word mountains, far from the countries mountains, far from the countries mountains, far from the countries Vokalia and Consonantia, there live Vokalia and Consonantia, there live Vokalia and Consonantia, there live the blind texts. the blind texts. the blind texts. Mas del servicio 1 Mas del servicio 2 Mas del servicio 3 3RUAG S.R.L Telefax : (051) 446–0515 Mail : ruagsrl@ruag.pePaseo de la Republica Nº4956 Celular: (051) 99830-3028Miraflores – Lima18 Perú Nextel : 830*3028
    84. 84. HTML & JSJQuery
    85. 85. HTML & JS JQuery•Orientado a Eventos (callback).
    86. 86. HTML & JS JQuery•Orientado a Eventos (callback).•Manejo del DOM (Document ObjectModel).
    87. 87. HTML & JS JQuery•Orientado a Eventos (callback).•Manejo del DOM (Document ObjectModel).•Uso de plugins (basadosespecialmente en la función selector).
    88. 88. HTML & JS JQuery•Orientado a Eventos (callback).•Manejo del DOM (Document ObjectModel).•Uso de plugins (basadosespecialmente en la función selector).•No modularizable.
    89. 89. <!doctype html><html> <head> <meta charset="utf-8"> <title>Demo</title><link href="style.css" TYPE="text/css"MEDIA=screen><script src="jquery.js"></script> <script> $(document).ready(function(){ // tu elegante codigo aqui }); </script> </head> <body> //la estructura DOM </body></html>
    90. 90. Selector Resultado Selecciona los <div>$("body > div") hijos de <body> Selecciona links hacia$("a[href$= pdf ]") pdfs Selecciona <div> que$("body > div:has(a)") contengan links
    91. 91. FlashAdobe Flex & Air
    92. 92. Flash Adobe Flex & Air•Base en el motor de flash.
    93. 93. Flash Adobe Flex & Air•Base en el motor de flash.•Lenguaje similar a html & js.
    94. 94. Flash Adobe Flex & Air•Base en el motor de flash.•Lenguaje similar a html & js.•Recibe conexiones http, servicios weby metodos remotos.
    95. 95. Flash Adobe Flex & Air•Base en el motor de flash.•Lenguaje similar a html & js.•Recibe conexiones http, servicios weby metodos remotos.•Modularizable.
    96. 96. DASHBOARD
    97. 97. DASHBOARD
    98. 98. DASHBOARD MOBILES
    99. 99. DASHBOARD MOBILES
    100. 100. DASHBOARD MOBILES DESKTOP
    101. 101. DASHBOARD MOBILES DESKTOP
    102. 102. DASHBOARD MOBILES MULTITOUCH DESKTOP
    103. 103. Recomendaciones al usar Flex
    104. 104. Recomendaciones al usar Flex• Evitar realizar procesamiento demasiado cargado (logica). Dejar todo eso al servidor.
    105. 105. Recomendaciones al usar Flex• Evitar realizar procesamiento demasiado cargado (logica). Dejar todo eso al servidor.• Evitar el uso desmedido de renderers en los componentes del tipo lista.
    106. 106. Recomendaciones al usar Flex• Evitar realizar procesamiento demasiado cargado (logica). Dejar todo eso al servidor.• Evitar el uso desmedido de renderers en los componentes del tipo lista.• Modularizar modularizar modularizar!!
    107. 107. Recomendaciones al usar Flex• Evitar realizar procesamiento demasiado cargado (logica). Dejar todo eso al servidor.• Evitar el uso desmedido de renderers en los componentes del tipo lista.• Modularizar modularizar modularizar!!• Evitar la creación de formularios extensos (no es una pagina html).
    108. 108. Recomendaciones al usar Flex• Evitar realizar procesamiento demasiado cargado (logica). Dejar todo eso al servidor.• Evitar el uso desmedido de renderers en los componentes del tipo lista.• Modularizar modularizar modularizar!!• Evitar la creación de formularios extensos (no es una pagina html).• Usar Maven o Ant.
    109. 109. User FeebackBouncehttp://www.bounceapp.com/
    110. 110. User Feeback Bounce http://www.bounceapp.com/•Facil y practico de usar (notasflotantes sobre el screenshot).
    111. 111. User Feeback Bounce http://www.bounceapp.com/•Facil y practico de usar (notasflotantes sobre el screenshot).•Incluye “memory test”.
    112. 112. User Feeback Bounce http://www.bounceapp.com/•Facil y practico de usar (notasflotantes sobre el screenshot).•Incluye “memory test”.•Compartido con varios usuarios.
    113. 113. User Feeback Bounce http://www.bounceapp.com/•Facil y practico de usar (notasflotantes sobre el screenshot).•Incluye “memory test”.•Compartido con varios usuarios.•No privado. (para ello existe laversión de pago : “Notable”)
    114. 114. ¿Cual es la tendencia de la tecnologia para RIAs?
    115. 115. ¿Cual es la tendencia de la tecnologia para RIAs?• Separacion total Frontend-Backend (uso de APIs, RESTful, Node.js)
    116. 116. ¿Cual es la tendencia de la tecnologia para RIAs?• Separacion total Frontend-Backend (uso de APIs, RESTful, Node.js)• Consumir mas recurso del cliente en vez que del servidor (aplicaciones corriendo en cliente).
    117. 117. ¿Cual es la tendencia de la tecnologia para RIAs?• Separacion total Frontend-Backend (uso de APIs, RESTful, Node.js)• Consumir mas recurso del cliente en vez que del servidor (aplicaciones corriendo en cliente).• Un nuevo puesto: UX Designer = Diseñador + programador.
    118. 118. ¿Cual es la tendencia de la tecnologia para RIAs?• Separacion total Frontend-Backend (uso de APIs, RESTful, Node.js)• Consumir mas recurso del cliente en vez que del servidor (aplicaciones corriendo en cliente).• Un nuevo puesto: UX Designer = Diseñador + programador.• HTML5! (mas html y mas js)
    119. 119. http://www.w3.org/html/logo/
    120. 120. • Aplicaciones offline (similar a gears)• Tiempo real (websockets)• Multimedia (<video>)• Efectos 3d• Mobiles• Rendimiento• Semantica• CSS3
    121. 121. Libros• Universal Principles of Design (2003)• Dont make me think (2006)• Designing web interfaces (2009)• Measuring the user experience (2008)• About face 3 (2007)
    122. 122. GRACIAS!
    123. 123. GRACIAS!

    ×