Master en Usabilidad, Diseño de Interacción y Experiencia de Usuario (online)

Inicio » B11. Fundamentos en tecnologías web » Breve introducción a Gliffy

Breve introducción a Gliffy

Breve introducción a Gliffy, una herramienta online para construir diagramas y esquemas

Joan Teran

Joan Marco. Big data, OpenData y Linked data. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Información Digital. Barcelona: Universidad Pompeu Fabra – BSM.


Sumario

1. ¿Qué es y para qué sirve Gliffy?

1.1. ¿Qué esquemas se pueden diseñar con Gliffy?

2. Opciones generales

3. Cómo empezar a trabajar con Gliffy

3.1. Alta de usuario

3.2. Dibujar diagramas

3.2.1. Crear y editar formas

3.2.2. Líneas y conexiones

3.3. Construir site maps con Gliffy

3.4. Compartir diagramas

3.5. Control de cambios

4. Bibliografía


1. ¿Qué es y para qué sirve Gliffy?

Gliffy es un software para la construcción de todo tipo de esquemas y diagramas que funciona online, es decir, que no requiere de la instalación de ningún software en el disco duro del ordenador. Aún así, existen tres versiones de pago de Gliffy que prevén el uso de distintos plugins (Atlassian Confluence o Atlassian JIRA) para facilitar más y mejores prestaciones.

Este tutorial se basa en el uso de la versión gratuita de Gliffy versión de prueba de Gliffy (14 días) y se acerca a las principales opciones que ofrece el programa.

Gliffy es una herramienta para construir esquemas y diagramas muy fácilmente. Para ello ofrece una amplia variedad de formas que el usuario puede manipular a su antojo, ya sea definiendo medidas, creando anotaciones, conectando los elementos o caracterizando las formas con colores.

Además, ofrece la posibilidad de trabajar en red, con un efectivo método para el control de los cambios introducidos y diferentes opciones para compartir los diagramas o esquemas que se van construyendo.

1.1. ¿Qué esquemas se pueden diseñar con Gliffy?

Gliffy ofrece un amplio abanico de formas preconstruidas para la elaboración de distintos tipos de esquemas y diagramas. Por ello Gliffy es considerada una herramienta tan versátil, porque es igual de fácil construir diagramas para objetivos y tareas completamente diferentes.

El programa ofrece 72 plantillas diferentes pertenecientes a 13 tipologías diferentes de diagramas, accesibles en Archivo > Nuevo, pulsando a continuación en la opción Crear desde plantilla:

01.png

Con 72 plantillas diferentes agrupadas en 13 tipologías diferentes Gliffy sorprende por la amplia variedad de objetivos y ámbitos de trabajo para los que puede ser de una gran eficacia

2. Opciones generales

Gliffy es un software que destaca por la facilidad de uso y por la simplicidad de sus opciones. El objetivo del presente tutorial es repasarlas de forma sintética, por lo que empezaremos por describirlas ahora de forma muy sucinta.

Gliffy permite:

  • dibujar y relacionar formas para diseñar un completo diagrama (se ofrece una amplia variedad de formas en el menú vertical de la parte lateral izquierda)
  • facilidades para compartir y/o publicar los diagramas y esquemas (“Compartir”), incluyendo la opción de exportarlos a diferentes tipos de archivos
  • usar los esquemas (convertidos en archivos gráficos o en código de html) en documentos de todo tipo, desde páginas web hasta cualquier tipo de documento que los admita
  • trabajar simultáneamente con otros usuarios de Gliffy en la elaboración del mismo diagrama
  • ejercer un control de cambios con el objetivo de poder recuperar en cualquier momento versiones anteriores del mismo trabajo

3. Cómo empezar a trabajar con Gliffy

En este apartado se detallan los pasos que hay que seguir para poder elaborar un diagrama o esquema con Gliffy, usando las diferentes opciones que el software ofrece.

3.1. Alta de usuario

El primer paso es dar de alta un usuario. Aunque Gliffy permite llevar a cabo una prueba sin registrarse como usuario, es necesario abrir una cuenta de usuario para poder guardar adecuadamente el trabajo realizado.

Pulsando el botón “Start free trial” que encontramos en la parte izquierda de la pantalla accedemos a la posibilidad de empezar a trabajar con Gliffy creando un nuevo documento, ya sea a partir de cero o a partir de una de las múltiples plantillas que el programa ofrece.

Por tanto, para abrir una cuenta nueva debemos clicar sobre el mencionado botón de “Start free trial”, tal y como aparece en la página de inicio de Gliffy, donde debemos proporcionar los datos que se nos piden:

02.png

En esta página hay que introducir la dirección de email que se quiere usar para la cuenta, el password y el tamaño de nuestra empresa u organización

3.2. Dibujar diagramas

La tarea fundamental que este programa permite llevar a cabo es la realización de esquemas o diagramas. Seguidamente desgranamos lo fundamental para poder empezar a trabajar con Gliffy.

3.2.1. Crear y editar formas

Lo primero que hay que hacer para dibujar un diagrama es escoger la forma más adecuada para ello. Para ello es necesario escoger la forma deseada de entre las que se nos ofrece en el menú lateral izquierdo. Hay una amplísima variedad de formas.

03.png

Es posible elegir entre 10 grandes tipologías correspondientes a otras tantas variedades distintas de esquema, mapa o diagrama a realizar

Para introducir una forma en el diagrama hay que clicar sobre la forma seleccionada y arrastrarla desde el menú hacia el sitio donde se quiere que aparezca en el diagrama.

04.png

Crear y mover objetos es muy sencillo gracias al sistema “drag and drop”

Una vez creado el objeto es muy fácil dotarlo de múltiples características: introducir texto, darle forma, modificar su posición, etc. Es posible llevar a cabo estas tareas con el ratón de forma intuitiva; pero también se puede hacer de forma más sistemática clicando sobre los botones que aparecen en la parte superior derecha del objeto cuando tenemos seleccionado el objeto. Para seleccionar un objeto tenemos que hacer un clic encima del mismo.

Para acceder al menú de propiedades del objeto este tiene que estar seleccionado

05.png

El menú de propiedades que aparece por defecto permite modificar el color del cuadro (tanto el relleno como el contorno), su posición, sus medidas, bloquearlas, rotar su posición y bloquear sus proporciones

La otra pestaña del menú de propiedades permite modificar las características del texto, incluyendo la posibilidad de crear enlaces

Cuando un diagrama o esquema está muy cargado de objetos, pueden ser muy útiles las opciones Traer al frente / Enviar al fondo. Al igual que en los programas de diseño gráfico que funcionan por capas, esta opción permite llevar al frente objetos que han quedado tapados, o al revés, enviar al fondo objetos para que otros queden superpuestos.

06.png

“Traer al frente” es una opción válida para superponer objetos que queremos destacar por encima de otros

3.2.2. Líneas y conexiones

Una herramienta fundamental para la creación de esquemas o diagramas son las líneas que permiten conectar los objetos. Gliffy ofrece un sistema muy sencillo y eficaz para crear y editar estas conexiones.

Existen dos grandes opciones para ello:

  • Herramienta línea recta”, que permite crear líneas completamente rectas
  • y “Herramienta del conector”, que permite crear líneas con curvas de diferentes tipos

07.png

La diferencia entre herramienta línea recta y herramienta del conector: rectas o curvas

Se trata, en el fondo, de la misma herramienta.

Es posible editar las características de los conectores. Como en el caso de los objetos, para acceder al menú de propiedades hay que clicar sobre el icono de propiedades que aparece cuando seleccionamos la línea o conector.

08.png

El cuadro de propiedades de las líneas permite un amplio abanico de posibilidades en cuanto a la forma y al texto

Es posible convertir el conector en diferentes tipos de flechas, colorearlo, definir qué tipo de curva queremos que dibuje, establecer su grosor y configurarlo como una línea de puntos.

El método para dibujar un conector es muy sencillo. En primer lugar se selecciona del menú superior una de las dos opciones descritas (Herramienta línea recta o Herramienta del conector). Seguidamente aparecen marcadas unas cruces alrededor de los objetos del diagrama. Estas cruces definen los puntos de salida / entrada de los conectores.

Se abren tres posibilidades:

  • Conectar dos objetos existentes: hay que clicar sobre una cruz y arrastrar el ratón hasta el punto de conexión deseado
  • Establecer una línea/curva que empiece en un objeto pero que no conecte con ninguno: en lugar de escoger uno de los objetos que la ventanilla ofrece, hay que clicar en cualquier otro punto del diagrama

3.3. Construir site maps con Gliffy

Una de las múltiples posibilidades que ofrece este software de construcción de esquemas y diagramas es la construcción de site maps, con formas y objetos que representan un amplio abanico de conceptos relacionados.

Según la wikipedia, un sitemap es

A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for Web design, or a Web page that lists the pages on a Web site, typically organized in hierarchical fashion

La mecánica para construir un sitemap en Gliffy es similar a la construcción de otro diagrama cualquiera, pero requiere el uso adecuado de cada forma para cada significado concreto. Se puede acceder a las formas propias de Sitemap clicando en Archivo > Nuevo y seleccionando la opción Crear desde plantilla. A continuación seleccionamos la opción Blank Sitemap de la categoría Site Maps.

09.png

Para acceder a las formas propias de un sitemap hay que acceder a la plantilla en blanco correspondiente

Situando el cursor encima de cada una de las formas del menú desplegable podemos ver los significados correspondientes a cada una de ellas.

El menú de formas contiene un apartado con múltiples objetos que permiten construir sitemaps de gran calidad y precisión

Como en los demás tipos de esquemas y diagramas que se pueden construir con Gliffy es posible conectarlos entre ellos para representar los links que conectan las diferentes páginas que conforman un sitio web, así como incorporar un texto para dar un nombre a cada página en el contexto del mapa.

3.4. Compartir diagramas

Hay tres grandes opciones que permiten compartir el trabajo realizado con otros.

  • Exportar: gracias a esta opción podemos convertir el diagrama realizado a distintos tipos de archivo. Concretamente: archivos de imagen (JPEG o PNG), archivos de imagen vectoriales (SVG) o archivos Gliffy. Estas opciones se encuentran en Archivo>Exportar

10.png

  • Publicar: Gliffy facilita un código html para incrustar el diagrama en una página web, o bien una serie de enlaces que contienen la imagen del diagrama en distintos tamaños. Es posible acceder a esta opción siguiendo la ruta Compartir > Publicar del menú superior. También permite compartir directamente con determinadas redes sociales.

11.png

Para acceder a estas opciones hay que marcar la opción “Compartir > Publicar”

  • Colaborar: También es posible compartir los diagramas con otros usuarios de Gliffy. Se accede siguiendo la ruta “Compartir > Colaborar” e introduciendo las direcciones de correo electrónico de los correspondientes usuarios. Esta opción es sólo accesible en las opciones de pago de Gliffy.

3.5. Control de cambios

El control de cambios es una herramienta fundamental no sólo para el trabajo colaborativo, sino incluso para un óptimo trabajo individual. El sistema que Gliffy ofrece a sus usuarios es muy sencillo pero muy eficaz al mismo tiempo.

Consiste simplemente en guardar un histórico de las diferentes versiones que el/los usuarios ha/n ido guardando. Se accede a ellas simplemente clicando sobre la opción de “Historial de revisión” disponible en el menú “Archivo”.

12.png

Historial de revisión: un sistema sencillo y eficaz para el control de cambios

4. Bibliografía

Sedes Web

  • Gliffy. Online Diagram Software and Flowchart Software:

http://www.gliffy.com/

  • Gliffy User Manual

http://www.gliffy.com/user-manual/

  • Wikipedia. Site map.

http://en.wikipedia.org/wiki/Site_map


© Autor/es del documento y Máster en Documentación Digital (IDEC-UPF)

Este obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported

No está permitido publicar total o parcialmente este documento sin el

consentimiento previo y por escrito de los autores, excepto que sean citas

de pequeños fragmentos entrecomillados indicando la fuente y la autoría