Crear widgets

Los Widgets son elementos de interfaz gráfica que permiten mostrar información (material de interés general, actualizaciones, calendarios de inscripciones, etc), o  proporcionar acceso rápido a ciertos sitios de interés como los cursos Minerva.

Los widgets del sistema Atenea siempre aparecerán en el Escritorio del usuario correspondiente (Administración, Alumnas, Profesores…etc).

 

PASOS PARA CREAR UN WIDGET

A tener en cuenta: crear widgets es complicado porque se utiliza código html, probablemente se requerirán consultas al soporte de Atenea para introducir información.

  • En el Escritorio hacer clic en el botón del lápiz arriba a la derecha para editar:

  • Una vez dentro de la ventana de edición del widget> Seleccionar “nuevo widget” en el desplegable de la derecha:

  • Escribir el Título y seleccionar el tipo de Widget “Código”

 

  • Se abrirá un campo de color negro para escribir el código correspondiente.
    A continuación se explicarán los distintos procesos para insertar texto, pdf o fotos

 

    • Textos:
      • En una ventana nueva entrar a un editor html (por ejemplo www.editorhtmlonline.com) y escribir el texto que se quiere añadir en el Widget

      • Copiar la traducción del texto en formato html y pegar en el espacio para insertar el código:

      • Guardar 

    • Para insertar un PDF

      •  Se debe subir el archivo pdf  a un  drive. En el mismo hacer  clic derecho> clic en Compartir> clic en Compartir> se abrirá una ventana donde hay que seleccionar “Cualquier persona con el enlace”> hacer clic en el botón “Copiar enlace”> por último hacer clic en el botón “Hecho”

      • El enlace copiado sale por ejemplo así: 

https://drive.google.com/file/d/1Z_sPj5M5EjF8P8-eJcqn3EKoTGQDlZBc/view?usp=sharing

      • Modificar el enlace anterior (puede ser en el bloc de notas, en word, o en el propio campo del widget para escribir código):
        Hay que pegar la parte del enlace marcado en azul, en el ejemplo, después de la fórmula que se muestra más abajo (en verde), a partir de src=”.
        Luego borrar desde la barra diagonal “/” (lo marcado en rojo en el ejemplo).
        Y reemplazarlo por: preview

Quedaría de esta manera:

<embed width=”100%” height=”600px” src=”https://drive.google.com/file/d/1Z_sPj5M5EjF8P8-eJcqn3EKoTGQDlZBc/preview” type=”application/pdf”

>

IMPORTANTE: al principio y al final del código es obligatorio poner < y > tal y como se ve en el ejemplo anterior.

Aclaración: 

El link vinculado (sale en azul) tiene que tener todas las letras azules y subrayadas, porque si no lo está el mismo dará error. Si no está todo unido, volver a iniciar el proceso hasta solucionarlo. 

      • Insertar la “fórmula completa” en el campo de código: 

<embed width=”100%” height=”600px” src=”https://drive.google.com/file/d/1Z_sPj5M5EjF8P8-eJcqn3EKoTGQDlZBc/preview” type=”application/pdf”

>

      • Guardar

    • Foto/ imágenes
      •  Se debe subir el archivo pdf  a un  drive. En el mismo hacer  clic derecho> clic en Compartir> clic en Compartir> se abrirá una ventana donde hay que seleccionar “Cualquier persona con el enlace”> hacer clic en el botón “Copiar enlace”> por último hacer clic en el botón “Hecho”

      • El enlace se vería como ejemplo, así:

https://drive.google.com/file/d/1lKlqf-FeP-lGKYuz3l_rPN3VIGVZ_xpR//view?usp=sharing

      • Modificar el enlace anterior (puede ser en el bloc de notas, en word, o en el propio campo del widget para escribir código):
        Hay que pegar la parte del enlace marcado en azul, en el ejemplo, después de la fórmula que se muestra más abajo (en verde),  “thumbnail?id=”.
        Luego borrar lo que va antes y después de la barra diagonal “/” (lo marcado en rojo en el ejemplo).


Quedaría de esta forma:

<img width=”300px” src=”https://drive.google.com/thumbnail?id=/1lKlqf-FeP-lGKYuz3l_rPN3VIGVZ_xpR/“>

IMPORTANTE: al principio y al final del código es obligatorio poner < y > tal y como se ve en el ejemplo anterior.

Aclaración

  • Si cuando se pega enlace aparece con un formato diferente, repetir pegado con la opción (pegar sin formato) 
  • El link vinculado (sale en azul) tiene que tener todas las letras azules y subrayadas, porque si no lo está el mismo dará error. Si no está todo unido, volver a iniciar el proceso hasta solucionarlo.

 

      • Insertar la “fórmula completa” en el campo de código:

<img width=”300px” src=”https://drive.google.com/thumbnail?id=/1lKlqf-FeP-lGKYuz3l_rPN3VIGVZ_xpR/“>

    • Imagen desde Google fotos 
      • Descargar la foto, ir a https://www.base64-image.de/ y convertir la imagen a base64.
      • Copiar el código haciendo clic en Show code> clic en Copy to clipboard .

Quedaría de esta manera:
<img src=”data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…..etc”>


IMPORTANTE: al principio y al final del código es obligatorio poner < y > tal y como se ve en el ejemplo anterior.

Anterior Lección
Volver a la Lección
Siguiente Tema