Embeber código HTML

Embeber sitios web en Moodle ou eXeLearning
Ancho dos multimedia embebidos adaptable á pantalla
Embeber contidos multimedia

En canto aos dereitos de propiedade intelectual dos contidos embebidos, en xeral calquera servizo que é público e ofrece código para embeber, é dicir, incrustar o contido multimedia no noso espazo virtual (curso virtual, blog, web...), está permitido. Tamén a descarga se así o posibilita o propio sitio.

1. Embeber webs en Moodle ou eXeLearning.

Podemos embeber sitios web:

Dentro dunha etiqueta, páxina ou libro de Moodle
Dentro dun iDevice de eXeLearning

Retroalimentación

Código para embeber sitios web:

1. Copia este código:

2. En Moodle ou eXeLearning, cólao nun recurso de Moodle "Páxina" u "Libro" (1) usando a icona "Editar código HTML" ou dentro dun IDevice de eXeLerning usando a icona das ferramentas do editor de texto.

3. Abre o teu navegador na páxina web que queres inserir no curso virtual e copia a súa URL.

4. Copia a URL.

5. Cola a URL no código inserido no paso 1 no lugar de mmmmmmmmmmmmmmmmmm deixando as comillas.

6. Configura a altura da ventá na que aparecerá o sitio web co valor: height="xxx"

(1) Non é nada recomendable ligar deste xeito páxinas web na páxina principal do curso virtual co recurso "Etiqueta", pois dese xeito a páxina web cargaríase cada vez que se entra no curso, co cal ocupa recursos, especialmente aos usuarios que dispoñan de pouco largo de banda. É moito mellor ligar a páxina dentro dunha "Páxina" ou dun "Libro".

Por exemplo, este código:

<iframe width="100%" height="500" align="middle" src="https://www.edu.xunta.es/espazoAbalar/espazos/recursos/" border="0"></iframe> <br />

...produce:

Agustín Carracedo, Yolanda García e Pablo Camarero. Embeber un Sitio Web en eXelearning e Moodle. Licenza de atribución de Creative Commons (reutilización permitida)

2. Ancho dos multimedia embebido adaptable á pantalla

Cando "embebamos" (vaia palabro!) código HTML copiado de Vimeo, Youtube, Prezi, LIM... podemos configurar un ancho fixo: si a ventá na que se mostre é máis estreita que o ancho configurado no código o multimedia aparecerá cortado pola dereita. E si o ancho da ventá e maior, encherase con espazos en branco.

Podemos inserir o código HTML que adapte automáticamente o ancho do multimedia inserido ao ancho da ventá na que se mostre. Segue estes pasos:

Retroalimentación

1. Copia este código: (as cores destacan os anacos que nos interesan e non inflúen no resultado)

2. Cólao no iDevice de eXe / na Páxina ou Libro de Moodle onde vaias embeber o código.

3. En Youtube, Vimeo, Slideshare, Prezi... xera o código HTML(consulta as igazóns de máis abaixo), é dicir:

4. Deste código copia a parte resaltada en cor azul (o que está entre as comillas vermellas).

5. En eXe ou Moodle, no código colado no paso 1, cola o código copiado no paso 3 substituindo as mmmmmmm de cor azul. É dicir:

6. Situar o cursor no punto en que vai aparecer o vídeo

7. En eXeLearning, premer na icona: Pegar anaco de código HTML (código embebido)

Editor de eXe. Icona para embeber código.

Dominio público

Listo!! e deste xeito o ancho do vídeo adaptarase ocupando o 100% do ancho da pantalla: ao modificar o ancho da pantalla o multimedia colocado como código adáptase automáticamente, proba a modificar o ancho desta pantalla e observa o seguinte exemplo dun vídeo:

Mentres que si inserimos o código html co ancho e alto fixos, é dicir:

o resultado sería este:

Agustín Carracedo, Yolanda García e Pablo Camarero. Embeber multimedia con ancho adaptable. Licenza de atribución de Creative Commons (reutilización permitida)

3. Embeber contidos multimedia:

Para incrustar contidos multimedia nos paquetes de contidos de eXeLearning ou nos cursos virtuais de Moodle empregaremos o seu código HTML.

1º Localizamos e copiamos o código HTML do contido multimedia na súa páxina de orixe.

2º Colamos en eXeLearning, Moodle... ese código HTML

Empezamos polo 2º

2º Como colar o código HTML en eXe ou Moodle:

O código HTML debe "embeberse" como código e non como texto. Para iso, debemos

1. Premer na icona de edición de código HTML:
2. Colar o código HTML.
3. Gardar.

En Moodle 1.9:

Dominio público

En Moodle 2.6:

Dominio público

En eXeLearning:

Dominio público

Agustín Carracedo, Yolanda García e Pablo Camarero. Embeber código HTML en eXeLearning e Moodle. Licenza de atribución de Creative Commons (reutilización permitida)

1º Copiar o código HTML de...

Vexamos onde se localiza o código HTML <iframe> en diferentes páxinas de uso habitual:

Logotipo de Vimeo ... vídeos de Vimeo

Logotipo de Youtube ... vídeos de Youtube

.. Logotipo do Espazo Abalar . recursos LIM no Espazo Abalar

Retroalimentación

Dominio público

Para copiar o código dun LIM no Espazo Abalar:

No Espazo Abalar, localizar o LIM
Preme en Visualizar e abrirase o LIM
Botón dereito enriba do LIM
Copiar Código HTML
Usar a icona Pegar anaco de HTML (código embebido) en eXeLearning ou en Moodle
Colar deixando unicamente o <iframe>, (en vermello) eliminando o demais. É dicir:

--Object------------
<object type="application/x-shockwave-flash" id="objlim" data="http://www.edu.xunta.es/espazoAbalar/sites/espazoAbalar/files/datos/1381910744/contido/lim.swf?libro=libro_lim.lim" width="600" height="500" align="top" >
<param name="allowScriptAccess" value="always" />
<param name="movie" value="http://www.edu.xunta.es/espazoAbalar/sites/espazoAbalar/files/datos/1381910744/contido/lim.swf?libro=libro_lim.lim"/>
<param name="quality" value="high" />
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="libro=libro_lim.lim"/>
</object>

--Iframe------------

<iframe src="http://www.edu.xunta.es/espazoAbalar/sites/espazoAbalar/files/datos/1381910744/contido/lim.swf?libro=libro_lim.lim" frameborder="0" width="600" height="500" scrolling="auto"></iframe>

--Url---------------

http://www.edu.xunta.es/espazoAbalar/sites/espazoAbalar/files/datos/1381910744/contido/lim.swf?libro=libro_lim.lim