SketchFlow: Creando Prototipos – Parte II La Creación

Ya luego de la primera entrega donde se explicaba un poco la teoría que encierra el SketchFlow pues le daremos inicio a la parte practica de este tutorial.

Como les comente anteriormente el SketchFlow viene dentro del Expression Blend 3 por si no tienes una suscripción MSDN puedes descargarlo de este sitio: http://cut.ms/JTL

1. Simularemos una solicitud de un cliente en donde requiere que se muestre una lista de productos con fotos y su respectiva descripción, además de ver una ventana de inicio, una de login, una que mencione a la empresa. Con esto podemos comenzar 🙂

2. Ya luego de tener Expression Blend 3 instalado vamos a crear nuestra primera demostración y para ello seleccionaremos la plantilla “Aplicación SketchFlow de SilverLight 3” al Cual llamaremos “Prototipo” y trabajaremos con el lenguaje C# como se muestra en la imagen:

 Para continuar leyendo este post visiten esta dirección: http://ajdev.net/Publicacion/Articulo/58.aspx

 Post cruzado con http://cut.ms/Jn9

WebCast de Tecnología 2010 (Audiencia de MSDN y Technet)

Los próximos WebCast planificado por la gente de Microsoft donde los expositores son de Venezuela (Incluyéndome ya que abriré la tanda :))

Webcast

fecha

Hra

Zona Horaria

Audiencia

Link de Registro

Speaker

Preparandonos para Visual Studio 2010 28-Jan-10 03:00:00 p.m. -5 MSDN http://cut.ms/JSL Alexander Jimenez
Windows Worflow Foundation 21-Jan-10 03:00:00 p.m. -5 MSDN http://cut.ms/JSM Yonathan Arrivillaga
Trabajando Windows 7 y Windows Server 2008 R2 20-Jan-10 11:00:00 a.m. -5 Technet http://cut.ms/JSN Felix Gonzalez
Nuevas Caracteristicas de SQL Server 2008 R2 26-Jan-10 03:00:00 p.m. -5 Technet http://cut.ms/JSO Carlos Cemborain
Extendiendo las capacidades de manejo de Bases de Datos 04-feb-10 03:00:00 p.m. -5 MSDN http://cut.ms/JSP Manuel Mendez
Desarrollando aplicaciones interoperables 10-feb-10 03:00:00 p.m. -5 MSDN http://cut.ms/JSQ Norberto Planchart
Desarrollando Aplicaciones en la nube con Windows Azure 11-feb-10 03:00:00 p.m. -5 MSDN http://cut.ms/JSR Jose Francisco Herrera
Desarrollando aplicaciones para Windows Azure con Eclipse y Visual Studio 2010 25-feb-10 03:00:00 p.m. -5 MSDN http://cut.ms/JSS Jose Herrera y Eduardo Sojo
Reporting services con SQL Server 2008 R2 23-feb-10 11:00:00 a.m. -5 Technet http://cut.ms/JST Rafael Linares
Administrando servidores con VMM 24-feb-10 10:00:00 a.m. -5 TechNet http://cut.ms/JSU Eduardo Lakatos
Nuevas Caracteristicas de Sharepoint 2010 09-feb-10 11:00:00 a.m. -5 Technet http://cut.ms/JSV Marcos Sanchez
Configurando Servidores web interoperables con Windows Server 2008 R2 Server Core 03-mar-10 03:00:00 p.m. -5 MSDN http://cut.ms/JSW Eduardo Sojo

SketchFlow: Creando Prototipos – Parte I La teoría

image

Antes de empezar con el tutorial quiero hacer unas preguntas que estoy seguro que muchos de ustedes han pasado por ello.

Cuantas veces han cambiado de color una pantalla?

han estado en reuniones tan absurdas como que son para definir el tipo de fuente.?

Que el logo debe estar arriba en grande o mas pequeña?

Que la combinación de colores no son las correctas?

Que luego de la pantalla login que debe venir?

Cuando hacen una ppt’s de como se vera la aplicación, tus usuarios creen que ya todo esta listo?

Pierdes tiempo en tratar de adivinar como el usuario quiere ver la aplicación?

Dibujas todas las pantallas en papel o en una ppt?

El usuario a ultima hora te pasa una lista de cambios que afectan la visibilidad de la aplicación?

En fin podemos durar horas y horas mencionando preguntas que nos hacemos al momento de hacer un buen levantamiento de información y sobre todo al momento de crear prototipos de la aplicación que desea ver el usuario final, Te imaginas que puedas resolver la gran mayoría de estas preguntas y que lo mejor de todo que puedes entregar algo funcional para que el usuario interactúes para después llevarlo al desarrollo sin afectar mas tu preciado tiempo? que bien sabemos que en todo desarrollo tienes mucho por hacer y todo es para ayer 🙂

Pues con SketchFlow que viene en Expression Blend 3 puedes hacer todo esto y mucho mas como:

  • Crear prototipos de aplicaciones web (Con SilverLight 3) o para escritorio (Con WPF) sin necesidad de escribir código.
  • Crear interactividad, animaciones con componentes reales y totalmente funcionales.
  • A través de SketchFlow Player, puedes exponer tu aplicación en la web para que tus usuarios que se encuentre remoto o no tenga la posibilidad de hacer sus comentarios y checar el diseño.
  • Integrar esta retroalimentación dentro de la misma herramienta (Expression Blend 3) para hacer correcciones y centralizar los comentarios de todos los usuarios que revisaron el prototipo.
  • Producir automáticamente la documentación del proyecto como un archivo de Word.
  • Puedes importar tus presentaciones de PowerPoint.
  • Puedes importar tus archivos de Adobe Illustrator y PhotoShop.
  • Te permite incorporar datos de pruebas que vienen por defectos en Expression Blend 3, por lo que te evitas el tener que cargar datos para después ver como quedaría tu aplicación.

SketchFlow no es mas que prototipos rápidos, fáciles y baratos al momento de construirlos, lo que permite crear, explorar y comparar múltiples ideas antes de seguir adelante con una solución. Tradicionalmente los prototipos suelen ser redundante después de la fase de concepto y desechados. SketchFlow permite aprovechar cualquiera de los anteriores trabajos conceptuales, cada elemento creado son reutilizable en el proyecto al momento de pasarlo a la etapa de desarrollo.

Expression Blend 3 a través de SketchFlow te muestra una serie de controles con estilos muy parecidos a los que se dibujan a mano sobre un papel permitiendo centrar al Usuario en las necesidades y funcionalidades propias de la aplicación y no en el que color deben ir las cosas y demás y demás 🙂 Así lo comento Somasegar:

SketchFlow también proporciona un conjunto de controles de “estilo boceto” que dan al prototipo un aspecto de boceto para mantener el enfoque en los conceptos de la experiencia de usuario sin distraerse con los detalles de los elementos visuales demasiado pronto. Los controles de estilo boceto son completamente funcionales y se puede volver a los controles de alta fidelidad en cualquier momento. A continuación puede ver un ejemplo de cómo aparecen los controles de estilo boceto. Fuente: Blog de Soma en español

Cross-Posting con: http://cut.ms/Jn9