Ir al contenido principal

Curso LibGuides

Guía de apoyo a la edición Web con LibGuides

Introducción

La herramienta Media/Widget permite insertar código HTML para incrustar en nuestras guías vídeos de YouTube, podcasts alojados en plataformas, mapas, widgets de búsqueda o widgets de otras aplicaciones de Springshare, como por ejemplo, horarios de LibCal.
A diferencia de los elementos de contenido de texto enriquecido/HTML, los recursos multimedia/widget se almacenan en la biblioteca de recursos (assets). Como resultado, una vez que alguien crea un recurso de media/widget, se puede reutilizar una y otra vez en otras guías.

Esta herramienta está diseñada para insertar código HTML, incluidos elementos que contienen código JavaScript <script> y CSS <style>. No se puede usar para insertar PHP.

 ADVERTENCIA: tenga cuidado al incrustar código

La inserción de código HTML tiene riesgos. Algunos widgets de terceros pueden incluir código JavaScript o CSS que entra en conflicto con la apariencia o la funcionalidad de nuestra página de LibGuides.

Cuando intentamos guardar un recurso de Medios/Widgets, LibGuides revisará nuestro código en busca inclusiones de jQuery, etiquetas no coincidentes y atributos no cerrados. Si se encuentra algún problema, aparecerá una alerta que muestra un resumen de los problemas y nos brinda la posibilidad de solucionarlos, o dejar de lado la precaución y guardar de todos modos.

Media Widget Validation Failed

 

 Si tenemos problemas después de agregar un recurso de medios/widget a nuestra guía (por ejemplo, los menús de la página dejan de funcionar), podemos ir a Content >Assets para editar el código o eliminar el asset, según corresponda.

Agregar un nuevo media/widget

  1. Mientras editamos nuestra guía clicamos en el botón  Add / Reorder, situado en la parte inferior de la caja donde deseamos añadir el contenido.
  2. Seleccionamos "Media / Widget" en el menú desplegable.
    Add Media / Widget

    La ventana emergente "Add Media / Widget", en la pestaña "Create New Widget", nos mostrará las distintas opciones para incrustar el contenido:
    Create New Widget
     
  3. Name: Asignamos un nombre al recurso. Así es como se identificará el recurso en la biblioteca de assets.
  4. Embed Code: introducimos o pegamos el código HTML del medio que deseamos incrustar. A menos que estemos creando nuestro propio código desde cero, el código nos lo proporcionará el proveedor de contenido.
    Por ejemplo, si deseamos incrustar un video de YouTube, obtenemos el código (en la página del vídeo de YouTube) clicando en el botón Compartir (Share) y después, en la ventana emergente, clicando en "Insertar" (Embed). Aquí mostramos un ejemplo de código:

    <iframe width="560" height="315" src="https://www.youtube.com/embed/fJOebpKBWqA?si=kzIaGBvS1otqRqka" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

    Para que el tamaño del vídeo se ajuste correctamente en nuestra guía (para los diferentes los tamaños de pantalla) tenemos que añadir los siguientes códigos (clases CSS):
    class="embed-responsive embed-responsive-16by9" en un "div" que envuelve el "iframe".
    class="embed-responsive-item" dentro del "iframe".

    De esta manera, el código que debemos insertar en el campo "Embed Code" sería el siguiente:

    <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/fJOebpKBWqA?si=kzIaGBvS1otqRqka" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </div>

     
  5. Position: el desplegable nos permite elegir dónde vamos a situar este elemento en la caja. Siempre podemos volver a reubicar el contenido posteriormente.
  6. Save: guardamos el recurso. Antes de guardar podemos clicar en la pestaña "Subject Associations" y asignar nuestro recurso-ítem (asset) a una categoría. Esto nos permitirá filtrar los assets por materia en la biblioteca de assets.

Reutilizar un Media/Widget existente

Se recomienda reutilizar los assets existentes tanto como sea posible. Esto ayuda a reducir su duplicación en la biblioteca de assets y facilita el análisis estadístico de cada asset en particular.

  1. Para reutilizar un recurso de multimedia/widget existente de la biblioteca de assets, mientras editamos nuestra guía, clicamos en el botón  Add / Reorder, situado en la parte inferior de la caja donde deseamos añadir el contenido.
  2. Seleccionamos "Media/Widget" en el menú desplegable.
    Add Media / Widget
     
  3. En la ventana emergente "Add Media / Widget", clicamos en la pestaña "Reuse Existing Widget".
    Reuse existing widget
     
  4. En el campo Buscar Multimedia / Widget (Search for Media / Widget), comenzamos a escribir el nombre del recurso que deseamos agregar.
  5. Seleccionamos el recurso que deseamos agregar de la lista desplegable de resultados.
  6. Aparecerá un resumen con la información del recurso. Si no se corresponde con lo que buscamos hacemos una nueva búsqueda y seleccionamos uno diferente.
    Resumen media reutilizado
     
  7. Copy: de forma predeterminada mapeamos el recurso del original, con lo que cualquier cambio que se realice en el original se reflejará automáticamente en nuestra guía. Para crear una copia del recurso original, seleccionamos la casilla de verificación Copiar.
    • El uso de una asignación o mapeado es conveniente porque cualquier cambio realizado en el recurso original se reflejará automáticamente en nuestra guía.
    • El inconveniente del mapeado es que no podremos editar el recurso nosotros mismos.
    • Si necesitamos personalizar el recurso reutilizado, seleccionamos la casilla de verificación Copiar. Esto creará una copia independiente del asset que podemos personalizar por completo.
  8. Position: el desplegable nos permite elegir dónde vamos a situar este elemento en la caja. Siempre podemos volver a reubicar el contenido posteriormente.
  9. Save: clicamos para guardar.

Editar y eliminar Media/Widget de una caja

Para administrar un recurso multimedia/widget en una caja de contenido:

  1. Si somos propietarios del recurso, seleccionamos  Edit para personalizar su nombre y código insertado.
  2. Para eliminar el recurso de la guía, seleccionamos  Remove. Esto solo eliminará el recurso de nuestra guía. No eliminará el asset de la biblioteca de recursos (Content > Assets) y aún se puede reutilizar.

Edit Remove Media