Este documento presenta MOSKitt Sketcher, una herramienta desarrollada para introducir técnicas de bocetado rápido en el desarrollo de interfaces de usuario utilizando MOSKitt. MOSKitt Sketcher permite crear bocetos de interfaces que pueden usarse como documentación, entrada para especificar modelos o diseñar interfaces de usuario, y como entrada para generar código. La herramienta utiliza la notación estándar de bocetado y permite transformar bocetos a modelos MOSKitt UIM.

1. Joan Fons
jjfons@pros.upv.es
Universitat Politècnica València
MOSKitt Sketcher
Diseño rápido de interfaces de
usuario
Marc Gil
mgil@prodevelop.es
Prodevelop
dimarts 30 de novembre de 2010

2. Índice
Modelando interfaces de usuario
Diseñando interfaces de usuario
MOSKitt Sketcher
Demo/Vídeo
dimarts 30 de novembre de 2010

3. Modelando
Interfaces de Usuario
dimarts 30 de novembre de 2010

4. Modelando
Interfaces de Usuario
dimarts 30 de novembre de 2010

5. Modelando
Interfaces de Usuario
Modelar interfaces de usuario no es una tarea
sencilla, dada la naturaleza compleja de la
Interacción Persona-Ordenador ...
diferentes tipos de
interacción IPO
lenguajes de
especificación
complejos
faltan estándares
gran cantidad de
conceptos a representar
...
comportamiento
interfaz
dimarts 30 de novembre de 2010

6. MOSKitt UIM apareció debido a la carencia
de estándares que formalicen el desarrollo
de interfaces de usuario.
Define un entorno MDD para trabajar con
interfaces de usuario que incluye:
lenguaje de especificación
editores y diagramas para representar los conceptos
flexible y adaptable a las necesidades de diferentes
organizaciones
!!
Modelando
Interfaces de Usuario
dimarts 30 de novembre de 2010

7. Modelando
Interfaces de Usuario
dimarts 30 de novembre de 2010

8. Modelando
Interfaces de Usuario
Puntos fuertes de MOSKitt UIM:
Expresividad (completitud)
Flexibilidad (uso de patrones de interfaz personalizables)
Abstracción tecnológica
Entorno MDD (transformación modelos y generación código)
dimarts 30 de novembre de 2010

9. Modelando
Interfaces de Usuario
Puntos débiles de MOSKitt UIM:
“Complejidad” de la notación
Requiere aprendizaje
Notación no estándar, ni “cercana al usuario”
No se pueden representar aspectos “estéticos”
dimarts 30 de novembre de 2010

10. Diseñando
Interfaces de Usuario
dimarts 30 de novembre de 2010

11. Diseñando
Interfaces de usuario
Diseñar una interfaz de usuario implica definir:
qué elementos/widgets tecnológicos se usarán para construir el
sistema
cómo se van a organizar, distribuir y comunicar estos elementos
en la solución final
cómo garantizar la satisfacción de los requisitos de análisis
Pero, cómo damos soporte a esto con MOSKitt UIM?
dimarts 30 de novembre de 2010

12. Diseñando
Interfaces de usuario
La creación de “bocetos” es una técnica
ampliamente aceptada para representar ideas u
objetos de una manera preliminar:
es un dibujo realizado de forma esquemática y sin preocuparse
de los detalles o terminaciones para representar ideas, lugares,
personas u objetos.
es un dibujo hecho a mano alzada, utilizando lápiz, papel y goma
de borrar, realizado generalmente sin instrumentos de dibujo
auxiliares. Puede ser un primer apunte del objeto ideado que aún
no está totalmente definido.
Wikipedia
dimarts 30 de novembre de 2010

13. Diseñando
Interfaces de usuario
En la actualidad, una de las técnicas más exitosas
para representar interfaces de usuario es utilizar
“bocetos” o sketches
El Sketching de interfaces de usuario permite
representar las interfaces, describiendo “a mano
alzada” la apariencia que tendrán una vez
desarrolladas
dimarts 30 de novembre de 2010

14. Diseñando
Interfaces de usuario
Existen numerosas herramientas para “bocetar”
interfaces de usuario en la actualidad:
Axure
Balsamiq
Expression Blend +
Sketchflow
ForeUI
iPlotz
Just In Mind
Prototyper
Pencil
Prototype
Composer
Stencils
Wireframe
Sketcher
XUL
dimarts 30 de novembre de 2010

15. Diseñando
Interfaces de usuario
dimarts 30 de novembre de 2010

16. Diseñando
Interfaces de usuario
Puntos fuertes del sketching:
proporcionan elementos para construir interfaces usando
notación cercana al usuario (ventanas, botones, listas, enlaces,
etc.)
permiten expresar una representación inicial de cómo será la
interfaz
se puede mostrar y validar con el cliente en etapas tempranas
(sin hacer desarrollo)
dimarts 30 de novembre de 2010

17. Diseñando
Interfaces de usuario
Puntos débiles del sketching:
los bocetos sólo sirven como documentación
no se puede asegurar que los bocetos sean válidos ni correctos
los bocetos no están “enlazados” con modelos conceptuales, y
por tanto, no se pueden usar en entornos MDD
dimarts 30 de novembre de 2010

18. MOSKitt Sketcher
dimarts 30 de novembre de 2010

19. MOSKitt Sketcher
Herramienta desarrollada para introducir técnicas
de sketching en desarrollos con MOSKitt
Los bocetos creados, se pueden usar como:
documentación
entrada para especificar modelos
diseño de la interfaz de usuario
entrada para la generación de código
dimarts 30 de novembre de 2010

20. MOSKitt Sketcher
MOSKitt Sketcher usa la notación
estándar en las herramientas de
Sketching
dimarts 30 de novembre de 2010

21. MOSKitt Sketcher
dimarts 30 de novembre de 2010

22. MOSKitt Sketcher
MOSKitt Sketcher permite un uso con diferentes
objetivos:
Diseñador de interfaces: especifica qué
componentes se usarán para desarrollar la
interfaz y cómo se organizarán en las pantallas.
En esta fase, es habitual disponer a priori de
diagramas de UML, UIM, BPMN, etc.
dimarts 30 de novembre de 2010

23. MOSKitt Sketcher
MOSKitt Sketcher permite un uso con diferentes
objetivos:
Analista de sistemas: desde fases de
desarrollo tempranas, se podrá bocetar la
interfaz, y a partir de ésta derivar otros modelos
(UIM, UML, etc...)
dimarts 30 de novembre de 2010

24. MOSKitt Sketcher
.sketcher_diagram
.uim
Sketch2UIM
(ATL)
dimarts 30 de novembre de 2010

25. MOSKitt Sketcher
.sketcher_diagram
.uim
UIM+Sketch2gvHidra
(XPand)
gvHidra (HTML/PHP)
dimarts 30 de novembre de 2010

26. Demo/Vídeo
dimarts 30 de novembre de 2010