Joan [email protected]
Universitat Politècnica València
MOSKitt SketcherDiseño rápido de interfaces de
usuario
Marc [email protected]
Prodevelop
dimarts 30 de novembre de 2010
Índice
Modelando interfaces de usuario
Diseñando interfaces de usuario
MOSKitt Sketcher
Demo/Vídeo
dimarts 30 de novembre de 2010
Modelando Interfaces de Usuario
dimarts 30 de novembre de 2010
Modelando Interfaces de Usuario
lenguajes de especificación complejos
dimarts 30 de novembre de 2010
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
lenguajes de especificación complejos
faltan estándares gran cantidad de conceptos a representar
...
comportamiento interfaz
dimarts 30 de novembre de 2010
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
Modelando Interfaces de Usuario
lenguajes de especificación complejos
dimarts 30 de novembre de 2010
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
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
Diseñando Interfaces de Usuario
dimarts 30 de novembre de 2010
DiseñandoInterfaces 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
DiseñandoInterfaces 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
DiseñandoInterfaces 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
DiseñandoInterfaces de usuario
Existen numerosas herramientas para “bocetar” interfaces de usuario en la actualidad:
AxureBalsamiq
Expression Blend + Sketchflow
ForeUIiPlotz
Just In Mind Prototyper
Pencil
Prototype Composer
Stencils
WireframeSketcher
XULdimarts 30 de novembre de 2010
DiseñandoInterfaces de usuario
dimarts 30 de novembre de 2010
DiseñandoInterfaces 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
DiseñandoInterfaces 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
MOSKitt Sketcher
dimarts 30 de novembre de 2010
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
MOSKitt Sketcher
MOSKitt Sketcher usa la notaciónestándar en las herramientas de Sketching
dimarts 30 de novembre de 2010
MOSKitt Sketcher
dimarts 30 de novembre de 2010
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
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
MOSKitt Sketcher
.sketcher_diagram
.uim
Sketch2UIM(ATL)
dimarts 30 de novembre de 2010
MOSKitt Sketcher.sketcher_diagram
.uim
UIM+Sketch2gvHidra(XPand)
gvHidra (HTML/PHP)dimarts 30 de novembre de 2010
Demo/Vídeo
dimarts 30 de novembre de 2010