Universidad de San Carlos de Guatemala

Prototipos deSoftwareAnálisis y Diseño de Sistemas I

http://www.ces2601.blogspot.com

1

Introducción

La presente introduccióna los prototipos de software tiene como objetivo presentar al lector las diferentes herramientas para realizar prototipos de software, un prototipo es un modelo, demostración o simulación de un software planificado, proporciona una retroalimentación temprana por parte de los usuarios acerca del software ya que es un modelo a escala de lo real, pero no lleva a cabo la totalidad de funciones necesarias del software final.

Realizar prototipos nos da ventajas para presentar al cliente un producto con el que está totalmente satisfecho tales como:

Evaluar el diseño e implementación antes de hacerlo Ayuda a los diseñadores y desarrolladores a evaluar propuestas de diseño y

funcionalidades Permite a los usuarios finales a probar la interacción con el producto para mejorar la

usabilidad del sistema.

2

Índice

Prototipos de Software 3Caretta Software 3Pencil Project 4Mockingbird 5Balsamiq 6DesignerVista 9Conclusiones 10Recomendaciones 10Anexos 11

3

Prototipos de Software

Un prototipo de software es una versión incompleta del software que se está desarrollando, se utiliza para simular aspectos y funcionalidades del producto final, además que provee los siguientes beneficios:

Se puede evaluar el diseño e implementación antes de hacerlo. Se puede comparar que el producto cumpla con las especificaciones Ayuda a los diseñadores y desarrolladores a evaluar propuestas de diseño Ayuda a estimar los plazos de tiempo y recursos necesarios Permite a los usuarios finales a probar la interacción con el producto

A continuación vamos a presentar herramientas que nos ayudan para hacer prototipos de software:

Caretta Software - http://www.carettasoftware.com/

GUI Design Studioes la herramienta que nos presenta Caretta Software que nos ayuda para diseñar interfaces, usando drag ‘n drop de los componentes, se puede copiar y pegar los componentes de las ventas, además de hacer anotaciones.

El primer paso es crear el diseño de la interfaz, para lo cual nos ayudamos de los componentes que dispone el software, posicionamos los elementos en su lugar y les damos la forma y tamaño deseado, si es un botón también disponemos de un editor para crear los iconos a gusto.

4

Al finalizar ya solo hacemos clic en “simular” para ver cómo quedaría la interfaz.

Pencil Project - http://pencil.evolus.vn/en-US/Home.aspx

Pencil Project es una herramienta que nos sirve para crear diagramas y prototipos de software, basicamente aplicaciones web, sus caracteristicas principales son:

Editor de Texto Los diagramas y prototipos se pueden exportar a HTML, PNG, PDF, etc. Se pueden crear nuevas plantillas y componentes Se puede alinear, redimensionar, rotar, etc los componentes. Multiplataforma

5

Mockingbird -https://gomockingbird.com/

Pencil Project es una herramienta que nos sirve para crear diagramas y prototipos de software, basicamente aplicaciones web, sus caracteristicas principales son:

Es un software web por lo que no necesita instalacion, ademas que puede ser accedido desde cualquier plataforma.

Se pueden maquetar tantas paginas como sea necesario, y se pueden enlazar como se espera en un sistema real.

La paleta contiene todos los componentes necesarios para diseñar todo un sitio web El diseño se puede exportar a PDF o PNG

El software se puede probar on-line https://gomockingbird.com/mockingbird/, a continuación un ejemplo:

A la izquierda aparece la paleta de componentes, entre los cuales podemos encontrar botones, etiquetas, entradas de texto, video, imágenes, links, etc.

A la derecha tenemos un documento en blanco al cual arrastramos los componentes que queremos agregar, y los podemos ir posicionando, el resultado sería:

Para exportar nos vamos al menú “File” > “Export” y escogemos la opción, ya sea PDF o PNG.

Balsamiq es un software que nos presenta la idea de hacer prototipos simples, fácil y rápidamente, junto a los stakeholders, la idea se

“Saca las ideas de tu cabeza frente a los stakeholders”

“Usa el estilo “borrador” para centrarse en la funcionalidad”

Balsamiq -http://balsamiq.com/

es un software que nos presenta la idea de hacer prototipos simples, fácil y rápidamente, junto a los stakeholders, la idea se resume en las siguientes imágenes:

“Saca las ideas de tu cabeza frente a los stakeholders”

“Usa el estilo “borrador” para centrarse en la funcionalidad”

“Haz cambios fácil y rápido”

6

http://balsamiq.com/

es un software que nos presenta la idea de hacer prototipos simples, fácil y resume en las siguientes imágenes:

7

El software se puede probar on-linehttp://builds.balsamiq.com/b/mockups-web-demo/, a continuación un ejemplo:

En la parte superior encontramos todos los componentes que podemos utilizar para llevar a cabo la maquetación de nuestro sitio:

Al hacer clic en un componente aparecerá en nuestro documento, el cual contiene una cuadricula para alinear todos los compontes:

Una de las características muy interesantes del software es que cuando se agrega un componente podemos cambiar su aspecto, tipo de letra, posición, etc:

Cambiando el color de fondo y tamaño de letra:

Así podemos ir agregando componentes y el

Nota:Cabe mencionar que no solo nos sirve para hacer prototipos de páginas web, sino de aplicaciones celulares:

Así podemos ir agregando componentes y el resultado sería;

Al terminar podemos exportarlo como PNG, PDF o bien como un XML para poder ser abierto posteriormente por MockingBird.

Nota:Cabe mencionar que no solo nos sirve para hacer prototipos de páginas web, sino de aplicaciones de escritorio e inclusive para celulares:

8

Al terminar podemos exportarlo como PNG, PDF o bien como un XML para poder ser abierto

Cabe mencionar que no solo nos sirve para hacer prototipos de de escritorio e inclusive para

9

DesignerVistahttp://designervista.com/

DesignerVista es una aplicación que nos permite hacer prototipos de aplicaciones de escritorio, web y de celulares. Está orientado a las aplicaciones para Windows por lo que ofrece soporte para aplicaciones de Escritorio, componentes de .NET, swing de Java, y estilos tipo MS Office 2007.

10

Conclusiones

El uso de prototipos nos da el beneficio de hacer cambios (si fuera necesario) en etapas tempranas del proyecto, lo que disminuye costos por cambios, así como discutir y acordar con los stakeholders el diseño y funcionalidad apropiada para cada componente del software.

Es sinónimo de calidad ya que por ser un prototipo puede ser moldeado al deseo del cliente, dándole el resultado deseado.

Permite además hacer estimaciones de tiempo y recursos necesarios para llevar a cabo el proyecto.

Ayuda a una mejor comprensión y comunicación entre los diseñadores y los desarrolladores.

Los prototipos ayudan a despejar dudas, además de estrechar la comunicaciones entre el equipo de trabajo y los clientes.

Recomendaciones

Se recomienda leer sobre prototipos antes de usar las herramientas expuestas

Los prototipos no deben ser usados cuando el equipo de trabajo es limitado y no se tiene mucho tiempo, ya que la construcción de prototipos demanda recursos humanos y tiempo.

Se recomienda enfocarse al usuario, ya que es él el que usará el software, por lo que el objetivo principal de un prototipo debe ser la retroalimentación para mejorar la aplicación.

Para continuar la lectura acerca de prototipos de software se recomienda leer el siguiente artículo, en el cual se encontrara una lista de aplicaciones para hacer prototipos de software

o http://c2.com/cgi/wiki?GuiPrototypingTools

11

Anexos

Caretta Software - http://www.carettasoftware.com/

Documentación

ftp://www2.adm.ula.ve/pub/windows/Aplicaciones/gui/GUIDesignStudio_manual.pdf

Demostración y tutorial en video

http://www.carettasoftware.com/guidesignstudio/gui-design-studio-demo.html

Pencil Project - http://pencil.evolus.vn/en-US/Home.aspx

Documentación

http://pencil.evolus.vn/en-US/UserGuides.aspx

Tutoriales en video

12

http://www.viddler.com/explore/sridhar/videos/9/http://www.viddler.com/explore/sridhar/videos/10http://www.viddler.com/explore/sridhar/videos/11/

Mockingbird -https://gomockingbird.com/

Tutoriales en video

http://www.youtube.com/watch?v=JCgQOz0qLpQ

13

http://au.video.yahoo.com/revision3-24367143/revision3-24367470/make-your-big-idea-reality-with-gomockingbird-com-tekzilla-clips-24371036.html

Balsamiq -http://balsamiq.com/

Documentación

http://balsamiq.com/support/documentation

Tutoriales en video

http://balsamiq.com/

14

DesignerVistahttp://designervista.com/

Tutoriales en video

http://designervista.com/demo/version40/Desktop/GettingStarted/GettingStarted.html

http://designervista.com/demo/version40/Phone7/GettingStarted/GettingStarted.html