Universidad de San Carlos de Guatemala

Prototipos de
Software
Análisis y Diseño de Sistemas I

http://www.ces2601.blogspot.com
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.

1
Índice

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

2
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.

3
 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

4
 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.

5
 Balsamiq -http://balsamiq.com/

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 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
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:

7
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
 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.

9
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

10
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

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

Mockingbird -https://gomockingbird.com/

Tutoriales en video

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

12
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/

13
 DesignerVistahttp://designervista.com/

Tutoriales en video

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

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

14