{"id":596,"date":"2015-03-25T13:31:40","date_gmt":"2015-03-25T12:31:40","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/?page_id=596"},"modified":"2015-03-28T12:46:31","modified_gmt":"2015-03-28T11:46:31","slug":"eines-recomanades","status":"publish","type":"page","link":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/prototipatge\/eines-recomanades\/","title":{"rendered":"Herramientas recomendadas"},"content":{"rendered":"<p>En la red hay multitud de herramientas para construir prototipos, desde programas profesionales hasta peque\u00f1as aplicaciones web que nos permiten a\u00f1adir enlaces a nuestros dise\u00f1os para hacerlos navegables. A continuaci\u00f3n os mostramos una selecci\u00f3n de herramientas y recursos destacados por su utilidad, facilidad de uso y popularidad.<\/p>\n<ul>\n<li><a href=\"http:\/\/www.cooper.com\/prototyping-tools\" target=\"_blank\">Cooper.com &#8211; Prototyping tools<\/a>. Interesante comparativa de herramientas de prototipado.\n<\/li>\n<li><a href=\"http:\/\/quirktools.com\/\" target=\"_blank\">Quirktools<\/a>. Ofrece acceso a tres \u00fatiles herramientas para el desarrollo de nuestros proyectos y prototipos. La versi\u00f3n gratuita (mediante registro) nos deja guardar hasta tres proyectos. <a href=\"http:\/\/quirktools.com\/smaps\/\" target=\"_blank\">Smaps<\/a> permite crear r\u00e1pidamente sitemaps u organizar jer\u00e1rquicamente la informaci\u00f3n en nuestro proyecto. <a href=\"http:\/\/quirktools.com\/wires\/\" target=\"_blank\">Wires<\/a> ofrece una librer\u00eda de widgets para crear wireframes f\u00e1cilmente. Por \u00faltimo, <a href=\"http:\/\/quirktools.com\/screenfly\/\" target=\"_blank\">Screenfly<\/a> es un visor \u00fatil de p\u00e1ginas web en diferentes dispositivos. <\/li>\n<li><a href=\"https:\/\/froont.com\" target=\"_blank\">FROONT<\/a>. Interesante herramienta que permite dise\u00f1ar p\u00e1ginas web responsivas directamente en nuestro navegador, pudiendo exportar luego el c\u00f3digo generado. Requiere registro.<\/li>\n<\/ul>\n<h2>Wireframes<\/h2>\n<ul>\n<li><a href=\"http:\/\/balsamiq.com\/products\/mockups\/\" target=\"_blank\">Balsamiq<\/a>. Una de las herramientas m\u00e1s populares por su facilidad de uso, permite realizar nuestros <em>wireframes<\/em> directamente en el navegador.<\/li>\n<li><a href=\"https:\/\/mockupstogo.mybalsamiq.com\/projects\/\" target=\"_blank\">Mockupstogo<\/a>. Librer\u00eda con controles de Android y otros SO para utilizar con Balsamiq.<\/li>\n<li><a href=\"https:\/\/moqups.com\" target=\"_blank\">Moqups<\/a>. Herramienta en l\u00ednea que permite desarrollar prototipos r\u00e1pidamente, gracias a una interfaz intuitiva con m\u00e1s de 300 elementos para construir nuestro prototipo. La versi\u00f3n gratuita permite tener dos proyectos activos, con algunas funciones limitadas.  <\/li>\n<li><a href=\"http:\/\/mockflow.com\/apps\/wireframepro\/\" target=\"_blank\">MockFlow<\/a>. Herramienta web que permite construir el esqueleto de una p\u00e1gina web o aplicaci\u00f3n, a\u00f1adiendo enlaces entre sus p\u00e1ginas para evaluar su estructura de navegaci\u00f3n. La versi\u00f3n gratuita solo permite un proyecto por usuario, sin l\u00edmite de p\u00e1ginas. <\/li>\n<li><a href=\"http:\/\/iplotz.com\/\" target=\"_blank\">iPlotz<\/a>. Permite crear prototipos navegables y compartirlos con otros usuarios para su revisi\u00f3n. La versi\u00f3n gratuita est\u00e1 limitada a un \u00fanico proyecto con un m\u00e1ximo de cinco p\u00e1ginas.<\/li>\n<\/ul>\n<h2>Prototipos<\/h2>\n<ul>\n<li><a href=\"http:\/\/www.axure.com\/\" target=\"_blank\">Axure<\/a>. Una de las herramientas m\u00e1s usadas en el \u00e1mbito profesional, permite crear prototipos de p\u00e1ginas web o aplicaciones m\u00f3viles con gran nivel de detalle e interacci\u00f3n. Cuenta con multitud de tutoriales y una activa comunidad de usuarios. <\/li>\n<li><a href=\"http:\/\/www.justinmind.com\/\" target=\"_blank\">Justinmind<\/a>. Esta <em>startup<\/em> espa\u00f1ola con oficinas en San Francisco ofrece Prototyper, un potente programa para construir prototipos en alta fidelidad de p\u00e1ginas web y apps. La versi\u00f3n gratuita, aunque con menos opciones, es plenamente funcional y permite publicar el prototipo en internet para su revisi\u00f3n por otros usuarios.<\/li>\n<li><a href=\"http:\/\/www.invisionapp.com\/\" target=\"_blank\">Invision<\/a>. Herramienta que permite a\u00f1adir enlaces a nuestros dise\u00f1os (web o apps), permiti\u00e9ndonos as\u00ed navegar adelante y atr\u00e1s por lo que antes eran im\u00e1genes est\u00e1ticas. Incluye un pr\u00e1ctico sistema para invitar a otros usuarios para que prueben nuestro prototipo y puedan ofrecer <em>feedback<\/em>. La versi\u00f3n gratuita es plenamente funcional, pero est\u00e1 limitada a un solo proyecto. <\/li>\n<\/ul>\n<h2>Espec\u00edficas para prototipos de apps<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.fluidui.com\/\" target=\"_blank\">Fluid UI<\/a>. Ofrece m\u00e1s de 2000 <em>widgets<\/em> para construir prototipos de apps para Android, iOS o Windows Phone. La versi\u00f3n gratuita est\u00e1 limitada a diez p\u00e1ginas por proyecto. Los prototipos se pueden probar en el navegador web o directamente en el dispositivo m\u00f3vil (mediante una app disponible para iOS y Android).<\/li>\n<li><a href=\"http:\/\/proto.io\" target=\"_blank\">Proto.io<\/a>. Permite reproducir en nuestros prototipos los gestos m\u00e1s habituales sobre una pantalla (tocar, tocar y aguantar, pellizcar con dos dedos, etc.) y animar las transiciones entre pantallas, dotando de mayor realismo a nuestros prototipos. Ofrece una versi\u00f3n de prueba plenamente funcional durante 15 d\u00edas.<\/li>\n<li><a href=\"http:\/\/concept.ly\/\" target=\"_blank\">Concept.ly<\/a>. Esta herramienta permite subir nuestros dise\u00f1os (im\u00e1genes planas) y a\u00f1adirles zonas activas para crear interacciones o simplemente enlazar las p\u00e1ginas entre ellas para navegar por el prototipo. Sencillo, pero \u00fatil. <\/li>\n<li><a href=\"http:\/\/appery.io\" target=\"_blank\">Appery.io<\/a>. Adem\u00e1s de crear prototipos, este programa permite incluso desarrollar las aplicaciones enteras (h\u00edbridas, usando PhoneGap), incluido el servicio de <em>backend<\/em>.<\/li>\n<\/ul>\n<h2>Aplicaciones <\/h2>\n<ul>\n<li><a href=\"https:\/\/popapp.in\/\" target=\"_blank\">POP<\/a>. Esta original aplicaci\u00f3n nos permite fotografiar con el m\u00f3vil nuestros wireframes hechos a papel y l\u00e1piz y a\u00f1adirles interacciones mediante enlaces, de modo que nuestros dibujos cobren vida. Los prototipos resultantes se pueden compartir con otros usuarios para que aporten <em>feedback<\/em>. Disponible de forma gratuita para iOS y Android.<\/li>\n<li><a href=\"http:\/\/getlaunch.com\" target=\"_blank\">Launch<\/a>. Permite crear prototipos tanto mediante su herramienta de dise\u00f1o como a\u00f1adiendo interacciones a im\u00e1genes creadas con otros programas o incluso fotograf\u00edas de wireframes hechos en papel. Funciona tanto sobre el navegador web como en aplicaci\u00f3n para iOS y Android.<\/li>\n<li><a href=\"http:\/\/realizerapp.com\/\" target=\"_blank\">Realizer<\/a>. Disponible solo para iOS, permite probar prototipos de aplicaciones para iPhone o iPad mediante la carga de las im\u00e1genes de las diferentes pantallas, que se pueden enlazar despu\u00e9s. <\/li>\n<li><a href=\"http:\/\/www.relativewave.com\/form\/\" target=\"_blank\">Form<\/a>. Disponible solo para iOS, permite crear prototipos directamente en el dispositivo.<\/li>\n<\/ul>\n<p><strong>Enlaces relacionados:<\/strong><br \/>\n&#8211; <a href=\"http:\/\/uxmag.com\/articles\/comparing-four-popular-page%E2%80%93based-interactive-prototyping-tools\" target=\"_blank\">Comparing four popular, page-based, interactive prototyping tools<\/a>.<br \/>\n&#8211; <a href=\"http:\/\/theappentrepreneur.com\/54-amazing-wireframing-tools-apps\" target=\"_blank\">54 amazing wireframing tools and apps <\/a><br \/>\n&#8211; <a href=\"http:\/\/mashable.com\/2013\/04\/02\/wireframing-tools-mobile\/\" target=\"_blank\">20 excellent wireframing tools for mobile<\/a> <\/p>","protected":false},"excerpt":{"rendered":"<p>En la red hay multitud de herramientas para construir prototipos, desde programas profesionales hasta peque\u00f1as aplicaciones web que nos permiten a\u00f1adir enlaces a nuestros dise\u00f1os para hacerlos navegables. A continuaci\u00f3n os mostramos una selecci\u00f3n de herramientas y recursos destacados por su utilidad, facilidad de uso y popularidad. Cooper.com &#8211; Prototyping tools. Interesante comparativa de herramientas &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/prototipatge\/eines-recomanades\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abHerramientas recomendadas\u00bb<\/span><\/a><\/p>\n","protected":false},"author":65,"featured_media":0,"parent":8,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"plantilla-pagina.php","meta":{"footnotes":""},"tags":[],"class_list":["post-596","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/comments?post=596"}],"version-history":[{"count":5,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/596\/revisions"}],"predecessor-version":[{"id":618,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/596\/revisions\/618"}],"up":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/8"}],"wp:attachment":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/media?parent=596"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/tags?post=596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}