Taller de UX & Usabilidad
Sesión 2/3
Diseño de Interacción e Interfaces
!
!
!
!

23 de noviembre de 2013
Mejorando.la
Resumen Sesión Nº1
Resumen Sesión Nº1
Estrategia

Investigación

Arquitectura

!

!

!

•Brief

• Usabilidad

• Historia

• Comportamiento de...
Resumen Sesión Nº1
Estrategia

Investigación

Arquitectura

!

!

!

•Brief

• Usabilidad

• Historia

• Comportamiento de...
Resumen Sesión Nº1
Estrategia

Investigación

Arquitectura

!

!

!

•Brief

• Usabilidad

• Historia

• Comportamiento de...
Sesión Nº2
Sesión Nº2
Mapas de Clases

Diseño de Interacción

Partituras de Interacción

Wireframes

2

Diseño tipográfico y
cromático...
Sesión Nº2
Mapas de Clases

Diseño de Interacción

Partituras de Interacción

Wireframes

2

Diseño tipográfico y
cromático...
Diseño de Interacción
Diseño de Interacción
Diseño de Interacción
•¿Qué es?
•Mapas de Clases
•Partituras de Interacción
•Wireframes
¿Qué es el Diseño de Interacción?
¿Qué es el Diseño de Interacción?
•Se ocupa de las experiencias
interactivas
•Servicios
•Productos
•Actos vivos
•Es diseña...
¿Qué es el Diseño de Interacción?
•Se ocupa de las experiencias
interactivas
•Servicios
•Productos
•Actos vivos
•Es diseña...
¿Cómo conversa un
sistema complejo con un
ser humano?
Verbos

¿Cómo conversa un
sistema complejo con un
ser humano?
Verbos

¿Cómo conversa un
sistema complejo con un
Físicos y
ser humano?
digitales
Verbos

¿Cómo conversa un
sistema complejo con un
Físicos y
ser humano?
digitales
También
complejos
Principios de
Diseño de Interacción
!
!

Bruce Tognazzini
asktog.com
Anticipación
Anticipación
Anticipación
Anticipación
Autonomía
Autonomía
Daltonismo
Daltonismo
Consistencia (niveles)
1. Interpretación del comportamiento del usuario.
2. Estructuras invisibles.
3. Estructuras visible...
Eficacia del usuario
Busca la productividad del usuario, no del computador
Eficacia del usuario
Mantén ocupado al usuario
Eficacia del usuario
Mantén ocupado al usuario
Mapas de Clases
Mapas de Clases
Nivel 1

Footer
A) Team
B) Blog (con categorías de
Mark, Ventas y Gestión)
D) Condiciones
E) API

Home

Ge...
ter
Team
Blog (con categorías de
k, Ventas y Gestión)
Condiciones
API

Mapas de Clases
Home

Getting Started, Login, Idiom...
ter
Team
Blog (con categorías de
k, Ventas y Gestión)
Condiciones
API

Mapas de Clases
Home

Getting Started, Login, Idiom...
ter
Team
Blog (con categorías de
k, Ventas y Gestión)
Condiciones
API

Mapas de Clases
Home

Getting Started, Login, Idiom...
ter
Team
Blog (con categorías de
k, Ventas y Gestión)
Condiciones
API

Mapas de Clases
Home

Getting Started, Login, Idiom...
Mapas de Clases
Mapas de Clases
Ai

Id

Login

Login
Número de cédula
Dígito verificador
Clave
Recuperar Clave
Entrar
Mapas de Clases
Ai

Id

Login

Login
Número de cédula
Dígito verificador
Clave
Recuperar Clave
Entrar
Mapas de Clases
Ai

Id

Login

Login
Número de cédula
Dígito verificador
Clave
Recuperar Clave
Entrar
Partituras de interacción (Pi)
• ¿Qué son las Pi?
• ¿Para qué sirven?
• ¿Qué soluciona?
• ¿Cómo se usan?
Partituras de interacción (Pi)
Partituras de interacción (Pi)
• Acciones del usuario
• Contacto directo
• Proceso interno
• Trabaja con sistema
visual ún...
Partituras de interacción (Pi)
• Acciones del usuario
• Contacto directo
• Proceso interno
• Trabaja con sistema
visual ún...
Partitura de Interacción (Pi)
• Niveles
• Páginas
• Módulos de
Interacción
Partitura de Interacción (Pi)
• Niveles
• Páginas
• Módulos de
Interacción
http://wiki.ead.pucv.cl/index.php/Partituras_de_Interacción
Wireframes
Wireframes
Wireframes
Wireframes
Ventajas de hacer wireframe
• Pueden ser dibujos rápidos y concretos
• No es necesario un software o algo especial
• Permi...
Características de un wireframe
• Simples y directos (Cajas y líneas)
• Cada pantalla está representada por un wireframe
•...
Herramientas para hacer WFs
Herramientas para hacer WFs
• Lápiz & papel
• Omnigraffle
• Mocking Bird https://gomockingbird.com
• Moqups https://moqups...
Herramientas para hacer WFs
• Lápiz & papel
• Omnigraffle
• Mocking Bird https://gomockingbird.com
• Moqups https://moqups...
Mobile first
https://vimeo.com/38187066
Diseño de Interfaces
Interfaces

• http://www.jbarahona.com/la-interfaz-es-el-negocio/
Interfaces

• http://www.jbarahona.com/la-interfaz-es-el-negocio/
Interfaces

• http://www.jbarahona.com/la-interfaz-es-el-negocio/
Principios de Dierter Rams

https://vimeo.com/7917568
http://es.wikipedia.org/wiki/Dieter_Rams
Principios del buen diseño
• Innovador
• Hace útil a un producto
• Es estético
• Ayuda a entender un producto
• No molesta...
User Interfaces (UI)
User Interfaces (UI)
• GUI (Graphics User Interface)
• Es el lado emocional del sistema
• Es la capa final (o inicial) de ...
Semántica

Contenido

Presentación

HTML

CSS
Diseño tipográfico
• Las tipografías tienen significado y sentido
• Dan el carácter y adjetivo a un sistema
• Diseñarlas pe...
Sin Serif

Con Serif

Aa Aa
Características
• Tipografía o fuente
• Cada fuente tiene estilos
• Cada estilo un tamaño expresado en
• Pixeles (px)
• Un...
Diseño cromático
RGB
Colores y usabilidad
www.mejorando.la

Lorem ipsu

Lorem ipsu
Dirección de Arte
• Diseñar la fotografía
• Determinar qué tipo y cómo será
• Aspectos a definir
• Cromática y ambiente
• ...
Diseño de Interfaces UI
Diseño de Interfaces UI
Framework
• Componentes de interfaz
• Patrones de interacción
• Incluyen
• Grilla
• Componentes
• ...
Diseño de Interfaces UI
Framework
• Componentes de interfaz
• Patrones de interacción
• Incluyen
• Grilla
• Componentes
• ...
Grilla
• Fundamental para mantener la coherencia del diseño
• Permite diseñar muy rápido en responsive
• Se lleva desde el...
Grilla
• Fundamental para mantener la coherencia del diseño
• Permite diseñar muy rápido en responsive
• Se lleva desde el...
Componentes
Componentes
• Son todos los elementos básicos de interfaz que actuarán en
el diseño del sistema o servicio
• Están identif...
Componentes
Componentes
Patrones de Interacción
• Estilos de textos
• Estilos de párrafos
• Estilos de listas
• Tablas
• Formularios
• Botones
• B...
Patrones de Interacción
• Estilos de textos
• Estilos de párrafos
• Estilos de listas
• Tablas
• Formularios
• Botones
• B...
Resumen Taller UX
Próxima Sesión Nº3
“Usabilidad”
¿Preguntas, dudas,
ideas, ejemplos, etc.?
¡Ahora!
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Upcoming SlideShare
Loading in …5
×

Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces

5,191 views

Published on

Sesión Nº2 Diseño de Interacción e Interfaces en Mejorando.la

Published in: Education
2 Comments
36 Likes
Statistics
Notes
No Downloads
Views
Total views
5,191
On SlideShare
0
From Embeds
0
Number of Embeds
967
Actions
Shares
0
Downloads
0
Comments
2
Likes
36
Embeds 0
No embeds

No notes for slide

Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces

  1. 1. Taller de UX & Usabilidad Sesión 2/3 Diseño de Interacción e Interfaces ! ! ! ! 23 de noviembre de 2013 Mejorando.la
  2. 2. Resumen Sesión Nº1
  3. 3. Resumen Sesión Nº1 Estrategia Investigación Arquitectura ! ! ! •Brief • Usabilidad • Historia • Comportamiento de las Personas • Indexación de Contenidos •Contrabrief •Propuesta Comercial •Debrief •Benchmark •Brief final • Personas & escenarios • Etnografía • Taxonomía • Card Sorting • Mapas de • Conversaciones Navegación guiadas
  4. 4. Resumen Sesión Nº1 Estrategia Investigación Arquitectura ! ! ! •Brief • Usabilidad • Historia • Comportamiento de las Personas • Indexación de Contenidos •Contrabrief •Propuesta Comercial •Debrief •Benchmark •Brief final • Personas & escenarios • Etnografía • Taxonomía • Card Sorting • Mapas de • Conversaciones Navegación guiadas
  5. 5. Resumen Sesión Nº1 Estrategia Investigación Arquitectura ! ! ! •Brief • Usabilidad • Historia • Comportamiento de las Personas • Indexación de Contenidos •Contrabrief •Propuesta Comercial •Debrief •Benchmark •Brief final • Personas & escenarios • Etnografía • Taxonomía • Card Sorting • Mapas de • Conversaciones Navegación guiadas
  6. 6. Sesión Nº2
  7. 7. Sesión Nº2 Mapas de Clases Diseño de Interacción Partituras de Interacción Wireframes 2 Diseño tipográfico y cromático Diseño de Interfaces Dirección de Arte Fotográfico Diseño de Interfaces de Usuarios (UI)
  8. 8. Sesión Nº2 Mapas de Clases Diseño de Interacción Partituras de Interacción Wireframes 2 Diseño tipográfico y cromático Diseño de Interfaces Dirección de Arte Fotográfico Diseño de Interfaces de Usuarios (UI)
  9. 9. Diseño de Interacción
  10. 10. Diseño de Interacción
  11. 11. Diseño de Interacción •¿Qué es? •Mapas de Clases •Partituras de Interacción •Wireframes
  12. 12. ¿Qué es el Diseño de Interacción?
  13. 13. ¿Qué es el Diseño de Interacción? •Se ocupa de las experiencias interactivas •Servicios •Productos •Actos vivos •Es diseñar la manera de hacer formar parte a los usuarios •No son meros espectadores
  14. 14. ¿Qué es el Diseño de Interacción? •Se ocupa de las experiencias interactivas •Servicios •Productos •Actos vivos •Es diseñar la manera de hacer formar parte a los usuarios •No son meros espectadores • Estética • Función • Mediación entre personas y servicios
  15. 15. ¿Cómo conversa un sistema complejo con un ser humano?
  16. 16. Verbos ¿Cómo conversa un sistema complejo con un ser humano?
  17. 17. Verbos ¿Cómo conversa un sistema complejo con un Físicos y ser humano? digitales
  18. 18. Verbos ¿Cómo conversa un sistema complejo con un Físicos y ser humano? digitales También complejos
  19. 19. Principios de Diseño de Interacción ! ! Bruce Tognazzini asktog.com
  20. 20. Anticipación
  21. 21. Anticipación
  22. 22. Anticipación
  23. 23. Anticipación
  24. 24. Autonomía
  25. 25. Autonomía
  26. 26. Daltonismo
  27. 27. Daltonismo
  28. 28. Consistencia (niveles) 1. Interpretación del comportamiento del usuario. 2. Estructuras invisibles. 3. Estructuras visibles pequeñas. 4. Consistencia interna. 5. Consistencia con la plataforma.
  29. 29. Eficacia del usuario Busca la productividad del usuario, no del computador
  30. 30. Eficacia del usuario Mantén ocupado al usuario
  31. 31. Eficacia del usuario Mantén ocupado al usuario
  32. 32. Mapas de Clases
  33. 33. Mapas de Clases Nivel 1 Footer A) Team B) Blog (con categorías de Mark, Ventas y Gestión) D) Condiciones E) API Home Getting Started, Login, Idioma Nivel 2 Definir Orden Ingreso a Clerk Marketing Ventas Gestión Hazte cliente Nivel 3 Planes Comunidad Redes Sociales Skype Encuentros Hoteleros Contáctanos Formulario de registro 1) Hotel website 2) Template 3) Diseño responsive 4) Tripconnect 1) Motor de reservas 2) Medios de pago 1) OTAs 2) Channel Manager Wizard
  34. 34. ter Team Blog (con categorías de k, Ventas y Gestión) Condiciones API Mapas de Clases Home Getting Started, Login, Idioma Defi Ingreso a Clerk Ventas de reservas os de pago Gestión Hazte cliente Formulario de registro 1) OTAs 2) Channel Manager Wizard Planes
  35. 35. ter Team Blog (con categorías de k, Ventas y Gestión) Condiciones API Mapas de Clases Home Getting Started, Login, Idioma Defi Ingreso a Clerk Ventas de reservas os de pago Gestión Hazte cliente Formulario de registro 1) OTAs 2) Channel Manager Wizard Planes
  36. 36. ter Team Blog (con categorías de k, Ventas y Gestión) Condiciones API Mapas de Clases Home Getting Started, Login, Idioma Defi Ingreso a Clerk Ventas de reservas os de pago Gestión Hazte cliente Formulario de registro 1) OTAs 2) Channel Manager Wizard Planes
  37. 37. ter Team Blog (con categorías de k, Ventas y Gestión) Condiciones API Mapas de Clases Home Getting Started, Login, Idioma Defi Ingreso a Clerk Ventas de reservas os de pago Gestión Hazte cliente Formulario de registro 1) OTAs 2) Channel Manager Wizard Planes
  38. 38. Mapas de Clases
  39. 39. Mapas de Clases Ai Id Login Login Número de cédula Dígito verificador Clave Recuperar Clave Entrar
  40. 40. Mapas de Clases Ai Id Login Login Número de cédula Dígito verificador Clave Recuperar Clave Entrar
  41. 41. Mapas de Clases Ai Id Login Login Número de cédula Dígito verificador Clave Recuperar Clave Entrar
  42. 42. Partituras de interacción (Pi) • ¿Qué son las Pi? • ¿Para qué sirven? • ¿Qué soluciona? • ¿Cómo se usan?
  43. 43. Partituras de interacción (Pi)
  44. 44. Partituras de interacción (Pi) • Acciones del usuario • Contacto directo • Proceso interno • Trabaja con sistema visual único y universal
  45. 45. Partituras de interacción (Pi) • Acciones del usuario • Contacto directo • Proceso interno • Trabaja con sistema visual único y universal
  46. 46. Partitura de Interacción (Pi) • Niveles • Páginas • Módulos de Interacción
  47. 47. Partitura de Interacción (Pi) • Niveles • Páginas • Módulos de Interacción
  48. 48. http://wiki.ead.pucv.cl/index.php/Partituras_de_Interacción
  49. 49. Wireframes
  50. 50. Wireframes
  51. 51. Wireframes
  52. 52. Wireframes
  53. 53. Ventajas de hacer wireframe • Pueden ser dibujos rápidos y concretos • No es necesario un software o algo especial • Permiten diseñar lo esencial obviando lo accesorio • Se pueden hacer pruebas de usabilidad • A TI empieza hacerle sentido todo • El cliente participa en su elaboración (!) • Permite discutir e iterar en torno al diseño
  54. 54. Características de un wireframe • Simples y directos (Cajas y líneas) • Cada pantalla está representada por un wireframe • Se puede adicionar explicaciones laterales • Se usan para cualquier interfaz digital (web, móviles, app, etc.) • Se hacen siempre en escala de grises (nunca color!) • Todos los elementos se representan esquemáticamente • Se usa sólo una familia tipográfica
  55. 55. Herramientas para hacer WFs
  56. 56. Herramientas para hacer WFs • Lápiz & papel • Omnigraffle • Mocking Bird https://gomockingbird.com • Moqups https://moqups.com • UX Pin http://uxpin.com • eZine de wireframes: http://wireframes.linowski.ca
  57. 57. Herramientas para hacer WFs • Lápiz & papel • Omnigraffle • Mocking Bird https://gomockingbird.com • Moqups https://moqups.com • UX Pin http://uxpin.com • eZine de wireframes: http://wireframes.linowski.ca
  58. 58. Mobile first https://vimeo.com/38187066
  59. 59. Diseño de Interfaces
  60. 60. Interfaces • http://www.jbarahona.com/la-interfaz-es-el-negocio/
  61. 61. Interfaces • http://www.jbarahona.com/la-interfaz-es-el-negocio/
  62. 62. Interfaces • http://www.jbarahona.com/la-interfaz-es-el-negocio/
  63. 63. Principios de Dierter Rams https://vimeo.com/7917568 http://es.wikipedia.org/wiki/Dieter_Rams
  64. 64. Principios del buen diseño • Innovador • Hace útil a un producto • Es estético • Ayuda a entender un producto • No molesta • Es honesto • Es duradero • Es minucioso hasta el último detalle • Se preocupa por el medio ambiente • Es tan poco diseño como sea posible
  65. 65. User Interfaces (UI)
  66. 66. User Interfaces (UI) • GUI (Graphics User Interface) • Es el lado emocional del sistema • Es la capa final (o inicial) de relación del sistema con los usuarios • Comunica, da énfasis e instrucciones al usuario a través de la propia forma (en diseño industrial) y las imágenes que se apropian de esa forma (color, tonos, tipografías, imágenes, íconos…) • Todos inter-relacionados a partir de sus tamaños y énfasis
  67. 67. Semántica Contenido Presentación HTML CSS
  68. 68. Diseño tipográfico • Las tipografías tienen significado y sentido • Dan el carácter y adjetivo a un sistema • Diseñarlas permite jerarquizar y distribuir en capas la lectura del contenido • Fuentes como un objeto asociado al diseño • Está en las CSS • Webfonts
  69. 69. Sin Serif Con Serif Aa Aa
  70. 70. Características • Tipografía o fuente • Cada fuente tiene estilos • Cada estilo un tamaño expresado en • Pixeles (px) • Unidades en em • Unidades de porcentaje
  71. 71. Diseño cromático
  72. 72. RGB
  73. 73. Colores y usabilidad www.mejorando.la Lorem ipsu Lorem ipsu
  74. 74. Dirección de Arte • Diseñar la fotografía • Determinar qué tipo y cómo será • Aspectos a definir • Cromática y ambiente • Uso, cómo se verá • Directrices de profundidad de campo • Directrices de escena
  75. 75. Diseño de Interfaces UI
  76. 76. Diseño de Interfaces UI Framework • Componentes de interfaz • Patrones de interacción • Incluyen • Grilla • Componentes • Patrones
  77. 77. Diseño de Interfaces UI Framework • Componentes de interfaz • Patrones de interacción • Incluyen • Grilla • Componentes • Patrones
  78. 78. Grilla • Fundamental para mantener la coherencia del diseño • Permite diseñar muy rápido en responsive • Se lleva desde el papel a la pantalla manteniendo criterios http://960.gs
  79. 79. Grilla • Fundamental para mantener la coherencia del diseño • Permite diseñar muy rápido en responsive • Se lleva desde el papel a la pantalla manteniendo criterios http://960.gs
  80. 80. Componentes
  81. 81. Componentes • Son todos los elementos básicos de interfaz que actuarán en el diseño del sistema o servicio • Están identificados como código de CSS y sus clases • Imágenes como íconos deben estar en código
  82. 82. Componentes
  83. 83. Componentes
  84. 84. Patrones de Interacción • Estilos de textos • Estilos de párrafos • Estilos de listas • Tablas • Formularios • Botones • Banner
  85. 85. Patrones de Interacción • Estilos de textos • Estilos de párrafos • Estilos de listas • Tablas • Formularios • Botones • Banner
  86. 86. Resumen Taller UX
  87. 87. Próxima Sesión Nº3 “Usabilidad”
  88. 88. ¿Preguntas, dudas, ideas, ejemplos, etc.? ¡Ahora!

×