Nota: esta entrada del blog se ha traducido automáticamente del inglés al francés utilizando DeepL. La versión original en inglés de esta entrada de blog puede encontrarse aquí.

Cómo incrustar un diagrama de Gantt en el software Confluence de Atlassian

Recientemente recibimos una pregunta de uno de nuestros usuarios sobre cómo incrustar un diagrama de Gantt de Tom's Planner en una página de la aplicación Confluence de Atlassian. Puede hacerlo añadiendo un iFrame a una página, pero no es tan sencillo como nos gustaría. Así que aquí tienes una guía paso a paso:

En Confluence, abre la página a la que quieras añadir el diagrama de Gantt de Tom's Planner. Haga clic en el botón "insertar más contenido" de la barra de herramientas superior de esa página y elija la opción "Otras macros" en el menú que aparece:


Esto abre una ventana con una colección de diferentes macros. Una de las macros inserta un iFrame en tu página. Los iframes te permiten mostrar páginas web de otros sitios directamente en tu página de Confluence. Esta guía le explicará cómo insertar un iframe con su diagrama de Gantt de Tom's Planner en una página de Confluence.

Primero busque el término 'iframe' en la ventana con todas las macros:



A continuación, haga clic en la macro llamada 'iframe'. Se abrirá una ventana que le permitirá configurar el iframe que va a insertar en su página. Tienes que rellenar al menos dos cosas para que funcione correctamente. En primer lugar, la url (dirección de Internet) del diagrama de Gantt que quieres incrustar y, en segundo lugar, la anchura y la altura que quieres que tenga el iframe (y, por tanto, también tu diagrama).

Empecemos por la url del diagrama de Gantt que queremos mostrar en el iframe. En este caso, la url es la dirección de Internet del diagrama de Gantt de Tom's Planner.

Puede encontrar esa url en la aplicación Tom's Planner:

  1. abra la herramienta Tom's Planner en su navegador
  2. abra el gráfico que desea incrustar
  3. haga clic en el botón "compartir/colaborar en línea" de la barra de herramientas superior
  4. haga clic en el enlace "incrustar su horario" de la ventana que se acaba de abrir
  5. siga las instrucciones hasta llegar a esta ventana:


En el 'código de incrustación', como se muestra en la imagen de arriba, puedes encontrar la url de tu diagrama de Gantt que te permite incrustarlo en una página de Confluence. Está subrayada en rojo.

Copia toda la dirección. Asegúrate de empezar por la parte 'https' y terminar por la parte 'zoom=9'. ¡No incluyas las comillas simples al principio y al final!

Así, en este caso, la url completa es: https: //www.tomsplanner.com/embedded/?id=4500dd8c-f1c3-11e4-a73b-12313b0e4453&zoom=9

Si esta guía paso a paso no te da el resultado que quieres, este es el primer lugar para comprobar si algo ha ido mal. ¿Has copiado la url correctamente?

Después de haber encontrado y copiado la url volvemos a la aplicación Confluence y la pegamos en la ventana 'insertar macro iframe' que acabamos de abrir:



A continuación hay que desplazarse un poco por la columna izquierda de la ventana para introducir la anchura y la altura del gráfico:


La anchura y la altura se establecen en píxeles. Juegue con estas opciones para descubrir cuál es la que mejor se adapta a su gráfico y/o página.

Una vez que hayas establecido la anchura y la altura, puedes hacer clic en el botón Insertar situado en la parte inferior de la ventana. La macro insertará un iframe en tu página de Confluence. No parece gran cosa cuando aún estás editando la página, pero cuando hagas clic en el botón de vista previa de la página, el resultado será algo parecido a esto:



Bueno, ahí lo tienes. Ya está. Has incrustado un diagrama de Gantt de Tom's Planner en tu página de Confluence. Buen trabajo. Tiempo para otra taza de café, diría yo.

¡Únase a 178,134 clientes y tenga su primer
diagrama de Gantt en vivo hoy mismo!