P. 1
Prototipos de Software - Ejemplos, Tutoriales y Demo.

Prototipos de Software - Ejemplos, Tutoriales y Demo.

|Views: 10.509|Likes:
Publicado porces2601
Presentacion 5 herramientas de software para hacer prototipos.
Presentacion 5 herramientas de software para hacer prototipos.

More info:

Published by: ces2601 on Apr 24, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF or read online from Scribd
See more
See less

10/11/2013

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 Caretta Software Pencil Project Mockingbird Balsamiq DesignerVista Conclusiones Recomendaciones Anexos

3 3 4 5 6 9 10 10 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-realitywith-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

You're Reading a Free Preview

Descarga
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->