Los juegos del proyecto AJDA se pueden embeber como iframe (hacer que el juego se muestre en una ventanita) en cualquier lugar que trabaje con código html: blogs, wikis, Moodle, páginas web...

Para embeber un juego en una ventana, se deberá introducir la siguiente instrucción en el código de la página en la que queremos introducir el juego:

<iframe src="dirección de la página donde se encuentra el juego" width="anchura en pixeles o %" height=”altura en pixeles o %"></iframe>

Vamos a poner un ejemplo. Queremos embeber en el blog del proyecto AJDA el juego artificieros, en su versión sin preguntas, en una ventana que tenga una anchura del 100% y una altura de 750 px. La dirección del juego en cuestión es: http://newton.proyectodescartes.org/juegosdidacticos/images/juegos/unzip-juegos/jug-artificieros/contenidos/artificieros-sin-preg.html

La instrucción quedaría por tanto de la siguiente forma:

 <iframe height="750" src="http://newton.proyectodescartes.org/juegosdidacticos/images/juegos/unzip-juegos/jug-artificieros/contenidos/artificieros-sin-preg.html" width="100%"></iframe>

Normalmente, el ancho del juego es superior al del sitio en el que se quiere embeber y el juego no se ve completo en pantalla, teniendo que usarse las barras de desplazamiento, como se muestra en la siguiente imagen.

Para evitarlo, se puede hacer un "zoom" sobre el contenido del elemento iframe utilizando las instrucciones de estilo css, que se deben poner al principio del código del documento y que se indican a continuación:

 

<style>

    #wrap { width: 100%; height: 550px; padding: 0; overflow: hidden; }
 

    #frame { width: 1020px; height: 750px; border: 1px solid black; }

 

    #frame {

 

        -ms-zoom: 0.70;

 

        -moz-transform: scale(0.70);

 

        -moz-transform-origin: 0 0;

 

        -o-transform: scale(0.70);

 

        -o-transform-origin: 0 0;

 

        -webkit-transform: scale(0.70);

 

        -webkit-transform-origin: 0 0;

 

    }

 
<style>

 

El código del iframe debe de quedar de la siguiente forma:

 

<div id="wrap">

 

<iframe id="frame" src="http://newton.proyectodescartes.org/juegosdidacticos/images/juegos/unzip-juegos/jug-artificieros/contenidos/artificieros-sin-preg.html"></iframe>

<div id="wrap">

 

El div "wrap", se pone para evitar que se quede espacio en blanco debajo del iframe y su altura (en el ejemplo 550 px), debe de ser la del tamaño del marco reducido.

En el css del #frame se debe indicar el tamaño real del juego y en el zoom o scale, debe indicarse el porcentaje de reducción que se quiere aplicar, en nuestro caso el 70 % (0.70).

El juego embebido quedaría de la siguiente forma:

La instrucción iframe admite muchos otros parámetros que se pueden consultar en Internet.

Si en lugar de embeber el juego, se quiere enlazar, es suficiente utilizar un hiperenlace, indicando la dirección web en la que se encuentra el juego, y el juego se abrirá en una nueva ventana.