...
| Advertencia |
|---|
Antes de añadir contenido a H5P a lesons, debes aprender como crear contenido H5P con LUMI: | UI Button |
|---|
| color | blue |
|---|
| icon | info |
|---|
| title | Cómo utilizar LUMI |
|---|
| url |
|---|
|
|
...
...
Una vez hemos descargado e instalado el programa, al abrirlo, nos aparece la siguiente ventana:
Image Removed Debemos elegir la opción "H5P Editor", como se muestra en la imagen.
A continuación, se nos muestra la siguiente ventana donde debemos escoger la plantilla que más se adapte a nuestras necesidades.
Image Removed
Tras haber completado el ejercicio en el editor, procederemos a exportarlo en HTML, pulsando sobre [File>Export] situado en la esquina superior izquierda de la pantalla.
Image Removed
Se nos mostrará la siguiente ventana:
| upv.es/confluence/pages/viewpage.action?pageId=779321518 |
|
|
| UI Tabs |
|---|
| UI Tab |
|---|
| title | Compartir 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 |
|---|
| title | Eliminar barra lateral |
|---|
| El fichero HTML que hemos generado en | UI Button |
|---|
| color | blue |
|---|
| icon | info |
|---|
| title | Cómo utilizar LUMI |
|---|
| url | https://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:  Image Added
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".  Image Added
|
| 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 |
|
|
|
...
