- -
Oficina de Aprendizaje Digital

Árbol de páginas

Versiones comparadas

Clave

  • Se ha añadido esta línea.
  • Se ha eliminado esta línea.
  • El formato se ha cambiado.

...

Advertencia

Antes de añadir contenido a  H5P a lesons, debes aprender como crear contenido H5P con LUMI: 

UI Button
colorblue
iconinfo
titleCómo utilizar LUMI
urlhttps://wiki.upv.es/confluence/pages/viewpage.action?pageId=779321518


UI Tabs
UI Tab
titleCompartir H5P en Lessons


UI Steps


UI Step

En primer lugar, subimos el archivo HTML que nos ha generado Lumi a recursos. A continuación, desde la página de Lessons donde queremos que aloje nuestro Lumi, en la herramienta "Añadir contenido", elegimos la opción "Incrustar contenido en la página".

Image Added


UI Step

Pulsamos sobre "O seleccionar ficheros existentes en Recursos" y buscamos nuestro Lumi en la carpeta de recursos donde lo hemos subido previamente.

Tras añadir el contenido, veremos como nuestro Lumi ya se aloja en la página de Lessons, pero con el inconveniente de que ha generado mucho espacio en blanco. Para solucionar esto deberemos editar el contenido pulsando sobre el icono que se muestra en la siguiente imagen:

Image Added


UI Step

Se nos abrirá una ventana en la que podemos marcar los límites de ancho y alto que ocupe Lumi medido en píxeles:

Image Added


Es recomendable establecer un ancho de 2000 píxeles para que el contenido siempre quede centrado. En cuanto a el alto, se recomienda probar en escalones de 100 o 50 pixeles hasta encontrar el valor que más se ajuste.




UI Tab
titleEliminar barra lateral

El fichero HTML que hemos generado en 

UI Button
colorblue
iconinfo
titleCómo utilizar LUMI
urlhttps://wiki.upv.es/confluence/pages/viewpage.action?pageId=779321518
, tiene un fallo con PoliformaT. Este fallo consiste en que, por defecto al compartir nuestro LUMI en el apartado de lessons, se genera una barra lateral y mucho espacio en blanco hacia abajo, independientemente de si es  necesario o no. La forma de eliminar este fallo es corregir una línea del código HTML del LUMI.

Para realizar esta tarea, abriremos el archivo HTML con un editor de texto, como pueden ser: Notepad++, Sublime text, Visual studio, Vim, Atom, Ultra edit...

En este ejemplo, hemos utilizado Sublime text.

UI Steps


UI Step

Al abrir el archivo HTML, se nos muestra un código como el siguiente:

  Hacemos scrollhacia abajo, hasta llegar al final del código.


UI Step

Donde pone "margin: 20px 20px;" debemos cambiar los dos veintes, que se muestran en la imagen con un recuadro rojo, por ceros, de manera que ponga "margin: 0px 0px".



UI Step

Guardamos esta versión del HTML y una vez realizada la corrección de código, ya podremos compartir nuestro Lumi en Lessons con normalidad, como se muestra en el siguiente apartado.

UI Tab
titleCompartir H5P en Lessons
UI Steps
UI Step

En primer lugar, subimos el archivo HTML que nos ha generado Lumi a recursos. A continuación, desde la página de Lessons donde queremos que aloje nuestro Lumi, en la herramienta "Añadir contenido", elegimos la opción "Incrustar contenido en la página".

Image Removed

UI Step

Pulsamos sobre "O seleccionar ficheros existentes en Recursos" y buscamos nuestro Lumi en la carpeta de recursos donde lo hemos subido previamente.

Tras añadir el contenido, veremos como nuestro Lumi ya se aloja en la página de Lessons, pero con el inconveniente de que ha generado mucho espacio en blanco. Para solucionar esto deberemos editar el contenido pulsando sobre el icono que se muestra en la siguiente imagen:

Image Removed

UI Step

Se nos abrirá una ventana en la que podemos marcar los límites de ancho y alto que ocupe Lumi medido en píxeles:

Image Removed

Es recomendable establecer un ancho de 2000 píxeles para que el contenido siempre quede centrado. En cuanto a el alto, se recomienda probar en escalones de 100 o 50 pixeles hasta encontrar el valor que más se ajuste

.