Imprimir esta página
Sábado, 16 Junio 2018 00:00

Embeber juegos del Proyecto AJDA en entornos html

Escrito por
Valora este artículo
(4 votos)
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="/descartescms/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="https://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="https://newton.proyectodescartes.org/juegosdidacticos/images/juegos/unzip-juegos/jug-artificieros/contenidos/artificieros-sin-preg.html"></iframe>
</div>
Visto 1550 veces Modificado por última vez en Domingo, 20 Marzo 2022 18:12

Utilizamos cookies para mejorar nuestro sitio web y su experiencia al usarlo. Las cookies utilizadas para el funcionamiento esencial de este sitio ya se han establecido. Para saber más sobre las cookies que utilizamos y cómo eliminarlas , consulte nuestra Política de Privacidad.

  Acepto las Cookies de este sitio.
EU Cookie Directive Module Information