Sei sulla pagina 1di 8

14 Herramientas de prototipado de aplicaciones Web

Men

Los mejores cursos online


para programadores

CATEGORAS

VDEO: Cmo programar los mapas en dispositivos mviles Apple iOS |


GAMBADAS: Hay quien se pasa con la seguridad

14 Herramientas de prototipado de
aplicaciones Web
Escrito por campusMVP el 19 mayo 2014 11:00

Algo muy habitual en los equipos de desarrollo Web es dibujar maquetas de las pantallas de las aplicaciones y sus
elementos, de forma que podamos transmitir mejor la idea de lo que queremos a los programadores que lo van a
implementar. Esto es vlido tambin para los clientes, que a veces no se hacen una idea de lo que les estamos contando
si no lo ven dibujado.
Este tipo de croquis o prototipos pintados a mano de las Webs (llamados generalmente wireframes) son muy tiles,
pero hacerlos realmente a mano es problemtico porque no suelen quedar muy bien y luego muchas veces ni siquiera
se hacen. Una herramienta especializada viene de maravilla para hacerlo mejor, ms rpido y que quede de manera
presentable.
A continuacin proponemos una lista de productos, tanto gratuitos como comerciales, que sirven para hacer este tipo

http://www.campusmvp.es/recursos/post/Herramientas-de-prototipado-de-aplicaciones-Web.aspx[07/09/2016 08:58:05 a.m.]

Buscar

14 Herramientas de prototipado de aplicaciones Web

de prototipos y que te resultarn muy tiles:


Axure RP: Es una herramienta de prototipado profesional que permite crear wireframes para hacer el prediseo de una pgina web. Disponible tanto para plataforma Windows como Mac. Puedes dibujar tanto
wireframes estticos como interactivos que simulan una experiencia de navegacin del usuario real. Tiene
una funcin de colaboracin para compartir las maquetas Web con otras personas y poder recibir feedback
en tiempo real.
Balsamiq: Con ella puedes hacer prototipos interactivos de webs. Puedes usar esta herramienta como un
servicio web o bien descargarla en tu equipo (funciona con Windows, Mac y Linux). Su cuenta gratuita te
permite crear un nmero ilimitado de wireframes que duran 7 das. Tambin posee la funcin de
colaboracin.
FlairBuilder: herramienta web que te permite hacer bocetos de tus webs y de tus Apps para iPhone. No tiene
posibilidad de colaborar con otras personas ni tampoco es posible exportar caractersticas.
gliffy: Basada en un servicio web, permite dibujar bocetos de tu pgina web y crear wireframes tanto
estticos como dinmicos. Tambin puedes colaborar con otras personas y recibir su opinin en tiempo real.
La cuenta gratuita te deja hacer hasta 5 croquis no cifrados pero llevan publicidad.
iPlotz: Esta herramienta permite hacer maquetas navegables de sitios web y de aplicaciones. Lo puedes
descargar en tu ordenador (Windows/ Mac) o bien puedes usar el servicio va web. Tiene una cuenta gratuita
con la que puedes hacer prototipos que tengan hasta 5 pginas navegables.
Jumpchart: es una aplicacin de planificacin de webs basadas en el navegador la cual posibilita esbozar el
contenido de la pgina web. Es posible crear wireframes tanto esttico como interactivos que simulan la
navegacin entre las pginas web de la maqueta.
Justinmind: Herramienta profesional para prototipado de sitios web, aplicaciones de software y aplicaciones
mviles. Puede trabajar con Windows o con Mac.
MockFlow: Herramienta web muy sencilla de utilizar para disear SItios web y aplicaciones de software.
Permite colaboracin y navegar por la pgina web adems de visualizar su estructura. La versin gratuita
est limitada en relacin al nmero de prototipos que podemos hacer.
Mockingbird: Se trata de un servicio web gratuito con el que se pueden hacen prototipos de pginas web.
Puedes disear tu sitio web en el propio navegador aprovechando que dispone de una gran biblioteca de
objetos web para personalizar tus pginas.
Napkin: Aunque es una herramienta basada en Java, tambin est disponible para Windows, Mac y Linux. Los
bocetos realizados solo pueden ser estticos, pero posee una extensa biblioteca de smbolos GUI para usar
en tus maquetas. No ofrece posibilidad de colaboracin ni de exportar a otros formatos. Lo positivo, es
totalmente gratuita y la cuenta es ilimitada.
Pencil project: Es un complemento open-source de Firefox que permite crear wireframes dentro de Firefox.
No existe la posibilidad de colaboracin.
Smartdraw: totalmente integrada con Microsoft Office. Muy til para hacer organigramas, cuadros de
flujo,....Sin embargo, no dispone de wireframes interactivos ni diseos para mviles.
Visio: Esta herramienta pertenece a la suite de Microsoft Office que se puede adquirir de forma
independiente de otros componentes de Microsost Office. Slo est disponible para equipos que trabajen
con Windows. Puedes crear varios tipos de proyectos visuales como diagramas de flujo, diagramas de Venn,
mapas y maquetas de sitios web (estndar y mvil), as como prototipos de aplicaciones de software.
http://www.campusmvp.es/recursos/post/Herramientas-de-prototipado-de-aplicaciones-Web.aspx[07/09/2016 08:58:05 a.m.]

14 Herramientas de prototipado de aplicaciones Web

Si trabajas con el entorno de programacin Eclipse, puedes usar tambin WireframeSketcher, que est muy
bien y se integra dentro del entorno a la perfeccin.
A continuacin encontrars una tabla donde hemos intentado hacer una comparativa de las caractersticas ms
importantes:

Tipo de Software/ Biblioteca

Wireframes

Sistema Operativo

interactivos

de

Colaboracin Formatos de exportacin

Smbolos
GUI
Axure RP

Windows, Mac

Balsamiq Mockups Servicio

web

HTML, JPEG, PNG, BMP, GIF

/ S

XML, PDF, PNG

Windows / Mac /
Linux
FlairBuilder

Servicio web

NO

N/A

Gliffy

Servicio web

SVG, Gliffy XML, JPG, PNG

iPlotz

Servicio

/ S

PDF, PNG, JPG, HTML

web

Windows / Mac
Jumpchart

Servicio web

NO

CSS / XHTML, WordPress

Justinmind

Windows, Mac

HTML, PNG, JS

MockFlow

Servicio Web

HTML5, PDF, PowerPoint,


PNG

Mockingbird

Servicio web

Napkin

Windows / Mac / S

PDF, PNG

NO

NO

N/A

NO

HTML, PDF, PNG, MS Word,

Linux
Pencil Project

Complemento

de S

Firefox
SmartDraw

Windows

OpenOffice.org
S

NO

PSD, SWF, JPEG, PNG, GIF,


TIFF, SVG, BMP, EMF, WMF,
HTML

Visio

Windows

SVG, EMF, GIF, JPEG, PNG,


TIF, BMP, WMF, XML, PDF,
XPS, HTML

WirfraneSketcher

Windows / Mac / S

NO

NO

PDF, PNG

Linux

http://www.campusmvp.es/recursos/post/Herramientas-de-prototipado-de-aplicaciones-Web.aspx[07/09/2016 08:58:05 a.m.]

14 Herramientas de prototipado de aplicaciones Web

Nota: Autor de la imagen de la cabecera Jayel Aheram. Uso de la imagen bajo licencia CC

campusMVP es la mejor forma de aprender a programar online y en espaol. En nuestros


cursos solamente encontrars contenidos propios de alta calidad (teora+vdeos+prcticas)
creados y tutelados por los principales expertos del sector. Nosotros vamos mucho ms all de
una simple coleccin de vdeos colgados en Internet porque nuestro principal objetivo es que t
aprendas.
Ver todos los posts de campusMVP

Te ha gustado este artculo? Comprtelo!

Archivado en: General | Herramientas


8 comentarios

Publicaciones relacionadas
Qu son las Aplicaciones Web Progresivas o "Progressive Web Apps"
ltimamente se est escuchando mucho una nueva buzzword, PWAs, que se refiere a las Aplicaciones Web...
Origami: Prototipado espectacular de aplicaciones de aplicaciones mviles
Facebook es una empresa que, aunque naci en la Web, est completamente orientada al m...
Plantillas para prototipado manual de aplicaciones Web y mviles
Existen multitud de herramientas informticas para prototipado de interfaces web y tambin para apli...

Comentarios (8)

Luis

20/03/2015 15:28:47

Hola!

Yo recomendara tambin https://moqups.com

Es online, gratuita ( algunas limitaciones ) y bastante sencilla de usar.

Un saludo

http://www.campusmvp.es/recursos/post/Herramientas-de-prototipado-de-aplicaciones-Web.aspx[07/09/2016 08:58:05 a.m.]

14 Herramientas de prototipado de aplicaciones Web

Responder

Jos Manuel Alarcn

23/03/2015 10:47:20

Gracias por la recomendacin.

Saludos!
Responder

cassandraochoa

15/04/2015 0:47:13

Gracias me hicieron mi tarea


Responder

campusMVP

15/04/2015 11:18:32

De nada Cassandra. Nos alegra que te haya servido de ayuda!

Un saludo,

campusMVP
Responder

Lorena

16/07/2015 21:21:18

Gracias (y) buenas recomendaciones.... ;)


Responder

violeta

05/09/2015 4:16:51

Quien puede ayudarme, darme una idea de comom hacer o que puedo hacer un prototipo
Responder
Carmen Villamizar
09/08/2016 18:50:29

Muy valioso tu artculo. Gracias.Sabes si alguno o cules de ellos tienen versin en espaol?
Responder
Jos Manuel Alarcn
10/08/2016 8:16:49

Hola Carmen:

http://www.campusmvp.es/recursos/post/Herramientas-de-prototipado-de-aplicaciones-Web.aspx[07/09/2016 08:58:05 a.m.]

14 Herramientas de prototipado de aplicaciones Web

Ni idea, la verdad. Yo todo el software, desde el sistema operativo a la utilidad ms pequea, lo uso
siempre en ingls por diversos motivos, y es algo en lo que no suelo fijarme. Lo siento.

En sucesivas ocasiones, si hago otra lista de este estilo procurar prestar atencin a ese detalle para
ponerlo.
En cualquier caso creo que es necesario asumir que, hoy en da por lo menos, si te dedicas
profesionalmente a cualquier disciplina que tenga visos tcnicos, el ingls es un idioma indispensable para
leer documentacin y usar software como mnimo y no debera suponer nunca una barrera. Puede
gustarnos ms o menos, pero en mi opinin, esa es la realidad.

Saludos!
Responder

Agregar comentario

Nombre*
Correo Electrnico*
Sitio Web
Comentario*

Notificarme cuando se publiquen nuevos comentarios

Guardar comentario
Huevo, perro, abeja o viernes, cul es un da de la semana?

Artculos recientes
Entrate automticamente de las nuevas versiones de proyectos Open Source

http://www.campusmvp.es/recursos/post/Herramientas-de-prototipado-de-aplicaciones-Web.aspx[07/09/2016 08:58:05 a.m.]

14 Herramientas de prototipado de aplicaciones Web

Llevas toda la vida cargando el mvil mal... y no lo sabes


Cmo ejecutar aplicaciones grficas Linux en el shell Bash de Windows 10
VDEO: Montar Linux Bash en Windows 10 y primeros pasos
Qu son las Aplicaciones Web Progresivas o "Progressive Web Apps"

Nuestros Cursos y Libros


Cursos de Programacin Web
Programacin para Mviles y Tablets
Cursos de Acceso a Datos
Cursos de Visual Studio y .NET
Preparacin de Certificaciones de Desarrollo
Otros cursos y libros

ltimos vdeos

RecentComments
El panorama de .NET en 2016: plataforma completa o .NET Core? (8)
Jos Manuel Alarcn escribi: Hola Pepe:
F# ya est soportado actualmente en ... [Ms]
El panorama de .NET en 2016: plataforma completa o .NET Core? (8)
pepe escribi: Buenas: que hay acerca de usar en el futuro VB o ... [Ms]
La evolucin de Windows, de Windows 1 a Windows 10 (5)
camusMVP escribi: Fuenteovejuna (https://es.wikipedia.org/wiki/Fuent... [Ms]
La evolucin de Windows, de Windows 1 a Windows 10 (5)
Angie C escribi: quien a escrito este post? :) [Ms]
5 caractersticas de Sublime Text que deberas conocer (8)
Jos Manuel Alarcn escribi: :-)
Estupendo, me alegro! [Ms]
Comment RSS

http://www.campusmvp.es/recursos/post/Herramientas-de-prototipado-de-aplicaciones-Web.aspx[07/09/2016 08:58:05 a.m.]

14 Herramientas de prototipado de aplicaciones Web

Por qu campusMVP

Nuestros tutores y autores

Cmo aprender a programar

Servicios para empresas

Cursos gratuitos para empresas

Contacta con nosotros

Descuentos

Preguntas Frecuentes

Boletn de Novedades

Libros Krasis Press

Cursos de programacin Web

Cursos de bases de datos

Cursos de Visual Studio y .NET

Certificaciones de Microsoft

Otros cursos y libros

Cursos de desarrollo mvil

Ver catlogo completo de cursos y libros


CampusMVP.com - Aviso Legal - Preferencias de cookies

http://www.campusmvp.es/recursos/post/Herramientas-de-prototipado-de-aplicaciones-Web.aspx[07/09/2016 08:58:05 a.m.]

Potrebbero piacerti anche