Eso sí, el editor trata tu iframe como una caja fija sobre una cuadrícula, y ahí es donde fallan la mayoría de los juegos insertados en Google Sites. Aquí tienes la ruta exacta por el panel Insert (Insertar) y cómo dar tamaño a la caja para que no se recorte nada.
Insertar el juego con el cuadro de diálogo Embed
Copia el código del generador
Elige el tamaño del tablero y el tema en el generador y copia el fragmento completo: el iframe y el párrafo de crédito que va debajo. Google Sites acepta HTML completo, así que mantén las dos partes intactas en lugar de reducirlo a una URL.
Abre tu página y haz clic en Insert
Abre el sitio en sites.google.com, selecciona la página donde quieres el juego y usa el panel Insert (Insertar), a la derecha del editor.
Elige Embed y cambia a la pestaña Embed code
Haz clic en Embed en el panel Insert. El cuadro de diálogo ofrece dos formas de añadir contenido: una dirección web normal o una pestaña Embed code para HTML sin procesar. Selecciona la pestaña Embed code.
Pega el iframe y haz clic en Next y después en Insert
Pega el fragmento en la caja de código y haz clic en Next. Google Sites genera una vista previa de lo que va a mostrar; si en ella aparece el tablero del Buscaminas, haz clic en Insert para colocarlo en la página.
Ajusta la caja en la cuadrícula y publica
El juego aparece en el lienzo como una caja redimensionable. Arrastra los tiradores de las esquinas y los bordes hasta que se vea el tablero entero sin barra de desplazamiento interior, y haz clic en Publish (Publicar), arriba a la derecha, para que el cambio se publique.
La caja no se adapta: dale tamaño a propósito
Esta es la diferencia entre Google Sites y casi todas las demás plataformas de esta serie. WordPress y Neocities muestran tu iframe con el ancho que indicas y dejan que la página fluya a su alrededor. Google Sites, en cambio, coloca el juego en un contenedor sobre su cuadrícula de diseño, y el tamaño del contenedor es el que le hayas dado al arrastrar. La página de dentro nunca se escala para caber: lo que no cabe, simplemente se desplaza.
Así que primero arrastra y después comprueba. Ajusta la caja a estas dimensiones:
- Principiante 9×9: 344 × 472 píxeles. Cabe en cualquier columna, cualquier sección y cualquier móvil.
- Intermedio 16×16: 536 × 664 píxeles. Cabe en una sección normal en ordenador; en los móviles se desplaza.
- Experto 30×16: 956 × 664 píxeles. Necesita una sección a todo el ancho y una pantalla de portátil.
Dale a la caja unos 10 píxeles más de alto que la cifra del código. Si no, el relleno interno de Google Sites puede comerse la última fila de casillas, y un jugador que no llega a la última fila no puede terminar el tablero.
Qué cambia la capa extra de sandbox
Todo lo que insertas mediante Embed code se muestra dentro de un marco que controla el propio Google Sites, lo que significa que tu iframe acaba anidado un nivel más abajo de como lo escribiste. En la práctica:
- La partida no se ve afectada. El clic izquierdo para descubrir, el clic derecho para poner una bandera y un clic (o doble clic) sobre un número completo para hacer un acorde funcionan, porque es el propio juego el que anula el menú contextual del navegador.
- Puede que se pierdan los atributos de permisos. Las funciones que se piden con
allow="...", como el acceso al portapapeles para compartir un tablero terminado, pueden quedar filtradas por el envoltorio. - Nada de lo que pegues puede tocar el resto de tu sitio. Para eso está el sandbox, y por eso mismo Google Sites es un lugar seguro para alojar un juego de terceros.
- Una caja blanca vacía significa que el origen no permite ir dentro de un marco. Si lo pruebas con otras webs te pasará a menudo; esta página de inserción está hecha para ir dentro de un marco, así que aquí una caja vacía casi siempre significa una errata en la URL.
- La línea de atribución también queda dentro del sandbox. Todo lo que pegas en la caja Embed code se muestra en ese marco interior y no como parte del propio código de tu página. Déjala ahí, pero en Google Sites merece la pena añadir también un cuadro de texto (Text box) justo debajo del juego con el mismo enlace, para que el crédito esté en la propia página, donde lo encuentran de verdad los lectores (y los buscadores). Basta una línea: «Buscaminas de play-minesweeper.games», con las palabras enlazadas.
Notas para clases e intranets
Una gran parte de las páginas de Google Sites son webs de clase, páginas de clubes y espacios internos de equipos, y un tablero del Buscaminas encaja en los tres: no necesita inicio de sesión, no guarda nada, no hace ruido y se termina en menos de un minuto en el tablero de Principiante.
Antes de publicar para tus alumnos, comprueba dos cosas. Primero, el alcance de la publicación: el cuadro de diálogo Publish te deja limitar el sitio a tu organización, y el juego se comporta igual en los dos casos. Segundo, el filtrado de la red: las redes de los centros que bloquean en bloque los dominios de juegos también bloquearán el marco, y la página mostrará una caja vacía. Pruébalo en la red del centro y no en casa. Si el juego está bloqueado, nuestras notas sobre jugar al Buscaminas en clase explican qué suele pasar el filtro.
Para un acertijo lo bastante rápido como para terminarlo en un recreo, genera el código con un tablero personalizado más pequeño, por ejemplo ?size=8x8&mines=8, que cabe con holgura en una sección lateral de la página de clase.