Embeber juegos del Proyecto AJDA en entornos html

Los juegos del Proyecto AJDA pueden utilizarse o descargarse desde la web del proyecto o desde el DVD del mismo. Otra opción es crear un enlace desde nuestra web o blog a un juego determinado.

Otra posibilidad consiste en embeber un juego en la propia web o blog. La forma de hacerlo es a través de la instrucción iframe, que tiene básicamente la siguiente estructura:

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

Vamos a poner un ejemplo. Queremos embeber en el blog 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: https://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>

El ancho del juego sería superior al del blog y el juego no se vería completo en pantalla, teniendo que usarse las barras de desplazamiento.

Para evitar ésto, 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: 200%; 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>

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 el el zoom o scale, debe indicarse el porcentaje de reducción que se quiere aplicar, en nuestro caso el 70 % (0.70).

El código iframe admite muchos atributos tales como: border, scrolling, sandbox, seamless, etc.