Es este post hablaremos sobre como poder nosotros diseñar y validar con el cliente nuestras pantallas, duro trabajo cierto? Creo que todos conocemos el valor que esto tiene. Además de los problemas de tipo económicos, de tiempo y muchos otros que nos pueden acarrear el probar las pantallas y desarrollar un sistema como a nosotros nos gusta, como nosotros creemos que se ve mejor. Y no como nuestro cliente lo requiere. Pues para eso ahora tenemos una excelente herramienta que seguramente nos permitirá ahorrar tiempo y algunos dolores de cabeza.
Pero que necesitamos para hacer uso de esta herramienta, aquí los requerimientos
– Visual Studio Ultimate, Visual Studio Premium, or Visual Studio Test Professional
– Office PowerPoint 2007 o superior
En este caso trabajare con Visual Studio 2012 Ultimate y Office Power Point 2013
Cuando nosotros instalamos Visual Studio 2012 en las versiones antes mencionadas automáticamente se nos agrega esta funcionalidad, la cual podemos encontrar al abrir Power Point veremos una pestaña llamada Guiones Gráficos tal como lo vemos en la siguiente imagen
Una vez seleccionada esta opción Formas de quins graficos veremos todas las figuras que tenemos disponibles para empezar a trabajar. Ahora veremos que aparece a nuestro lado derecho de la pantalla una ventana con las figuras básicas que utilizaremos, las opciones varían en este momento ya que yo tengo algunas figuras ya importadas, lo cual veremos cómo hacerlo más adelante en este mismo post.
Ahora podemos empezar a ver en cada una de las opciones las figuras disponibles, iniciaremos por la opción fondos ya que esta será la base de cualquier trabajo que realicemos con esta herramienta. Es en este punto donde decidiremos como lucirá nuestra aplicación, si será Web, Móvil, para Windows 8 entre otros.
Basta ahora con seleccionar el fondo que queramos y arrastrarlo a la diapositiva. Y veremos cómo se adapta automáticamente, en este caso utilizare un fondo de Explorador Web.
Ahora tenemos un fondo el cual primero editaremos de la forma que mejor nos parezca, ya que prácticamente cada elemento es posible editarlo. Iniciaremos por seleccionar el fondo en la diapositiva y hacer click sobre la estaña Formato y navegaremos por la cinta de opciones y cambiaremos el color de relleno de la figura. Como mencione antes esto lo podemos hacer con cada objeto que nosotros agreguemos dentro de la diapositiva. Quedándonos según nuestra opción de color de la siguiente manera
Ahora asumiremos que esta será la primera pantalla de nuestro sitio web por lo cual editaremos la url que se puede ver en la barra de direcciones de nuestro fondo, eso lo hacemos dando click cobre ella y editándola según nuestras necesidades.
Como podrán ver también edite el mensaje de bienvenida en el navegador. Ahora veremos del cuadro de opciones a nuestra derecha la opción “Común” donde encontraremos las figuras de los objetos más utilizados en el procesos de diseño de pantallas, como lo son los botones, Cuadros de Texto, Grid y muchos otros, al igual que cuando agregamos nuestro fondo a la Diapositiva para agregar estos objetos basta con arrastrarlos al lugar que deseemos dentro de nuestro fondo.
Como pueden ver en la imagen anterior lo que he hecho ha sido tratar de simular una pantalla de ingreso a nuestro sitio web, para lo cual he arrastrado dos cuadros de texto, un checkbox (casilla) y un botón al cual al igual que a nuestro fondo lo único que hice fue darle color, ahora mejoraremos un poco mas nuestro diseño agregándole algunos nuevos elementos.
Como pueden ver ahora nuestra pantalla luce un poco mejor. De esta forma nosotros podemos diseñar nuestras pantallas, luego agregamos interaccion entre ellas y tenemos idea de como nuestra aplicación lucirá al final, y podemos presentársela al cliente, y que el interactue con la aplicación hecha hasta el momento en powerpoint y asi realizar los cambios que sean necesarios en muy poco tiempo, para luego no tener que perder el tiemo haciendo cambios a nivel de desarrollo.
Christian González 