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: 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>
 
El juego embebido quedaría de la siguiente forma:



Como puede apreciarse, el ancho del juego es superior al del blog y el juego no se ve 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>

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.
Visto 131 veces Modificado por última vez en Domingo, 17 Junio 2018 16:47

Deja un comentario

SiteLock

Módulo de Búsqueda

Frase Clave

Título del artículo

Categoría

Etiqueta

Publicador

Ayuda

Acceso

Canal Youtube

Calculadora Descartes

Versión 3.1 con estadística bidimensional

ComparteCódigo para embeber

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