MINESWEEPER

Cómo insertar el Buscaminas en una página de Canvas

Canvas acepta iframes en cualquier campo del Rich Content Editor, así que un tablero del Buscaminas sin adivinar entra en una página, una tarea o un anuncio con un solo pegado en la vista HTML.

Tiempo necesario
Unos 2 minutos
Dónde
Pages > Add Page
Vista del editor
HTML Editor (</>)
Tablero que cabe
9x9, 344 x 472
<iframe
  src="https://play-minesweeper.games/embed/?size=beginner&noguess=1"
  width="344"
  height="472"
  frameborder="0"
  style="border:0;max-width:100%"
  loading="lazy"
  title="Minesweeper Game"
  referrerpolicy="no-referrer-when-downgrade"
  allow="clipboard-write"
></iframe>
<p style="font:12px/1.5 Tahoma,'MS Sans Serif',Geneva,sans-serif;color:#555555;margin:6px 0 0;max-width:344px">
  <a href="https://play-minesweeper.games/" style="color:#555555">play-minesweeper.games</a> — free Minesweeper, no download
</p>

Un tablero de Principiante 9×9 en modo sin adivinar (noguess=1), así que cada tablero se despeja con lógica y nadie en la clase pierde por un cara o cruz. El marco mide 344 × 472 píxeles.

El párrafo que sigue al iframe es el enlace de crédito que mantiene gratis el widget. Canvas conserva sus estilos en línea, así que en la página se ve igual que en la vista previa del generador.

Lo que falla casi siempre está fuera del editor: la lista de dominios permitidos de un administrador, un filtro web del centro o un tablero demasiado ancho para el diseño del curso.

Añadir el juego a una página de Canvas

  1. Copia el fragmento para clase

    Copia el código de abajo, o crea el tuyo en el generador y añade &noguess=1 a la dirección de src. Coge las dos partes: el iframe y el párrafo de crédito de una línea que va debajo. Canvas conserva todos los atributos de este fragmento al guardar la página.

  2. Crea una página: Pages > View All Pages > Add Page

    En tu curso, haz clic en Pages (Páginas) en la navegación del curso. Si el curso tiene página de inicio, haz clic antes en View All Pages; después haz clic en Add Page y ponle un título a la página. También sirve cualquier otro elemento que use el Rich Content Editor: una tarea (Assignment), un debate (Discussion), un anuncio (Announcement) o la descripción de un examen (Quiz).

  3. Cambia el Rich Content Editor a la vista HTML

    Haz clic en el icono HTML Editor (el botón </> abajo a la derecha del editor, con la etiqueta «Switch to the HTML view»). Canvas abre el editor HTML formateado, con números de línea. Haz clic donde debe ir el juego y pega el fragmento. Si prefieres no tocar HTML, usa Insert > Embed en la barra de menús del editor, pega el código en el campo Embed Code y haz clic en Submit.

  4. Vuelve atrás y comprueba la vista previa

    Haz clic otra vez en el icono HTML Editor para volver al editor visual. El tablero debería aparecer como vista previa en directo dentro del editor. Si en cambio ves el iframe como una línea de texto, lo pegaste en el editor visual y no en la vista HTML: deshaz, cambia a la vista HTML y pega de nuevo.

  5. Save & Publish, y míralo como alumno

    Haz clic en Save & Publish (o en Save para dejarla como borrador sin publicar). Después abre la página en Student View (el botón está en la página Settings del curso) y juega una partida para confirmar que el tablero se carga, que se registran los clics y que cabe entero.

El marco sale en blanco: los dominios permitidos del administrador

Canvas guarda el iframe sin protestar, así que un rectángulo en blanco en la página publicada rara vez es un problema del editor. Revisa esto por orden:

  • Content Security Policy. Un administrador de Canvas puede activar la política de seguridad de contenido (Content Security Policy) para toda la institución (Admin > la cuenta > Settings > Security). Una vez activada, Canvas solo deja que las páginas enmarquen dominios de la lista Allowed Domains, además de los propios de Canvas y los de las herramientas LTI instaladas. Pide a tu administrador que añada play-minesweeper.games en Domain Name y haga clic en Add Domain. Los administradores también pueden desactivar la política para un solo curso en sus Settings, aunque la mayoría preferirá añadir el dominio. Los docentes no pueden cambiar ninguno de los dos ajustes.
  • Filtro web del centro. Si el juego tampoco se abre en una pestaña normal del navegador en la red del centro, es el filtro el que bloquea el dominio, no Canvas. Nuestras notas sobre jugar al Buscaminas en clase explican qué pedir al departamento de informática.
  • Una dirección http://. Canvas se sirve por HTTPS y los navegadores rechazan los marcos no seguros dentro de él. El fragmento usa https://; mantenlo así si editas la URL.

Para distinguirlos, abre la página y después la consola de desarrollador de tu navegador. Un mensaje que mencione «Content Security Policy» y frame-src apunta a la lista de dominios permitidos; un filtro suele mostrar su propia página de bloqueo dentro del marco.

Dónde elimina Canvas el iframe

Al guardar, Canvas limpia todos los campos del Rich Content Editor según su lista de HTML permitido. El iframe pasa en las páginas, tareas, debates, anuncios, exámenes y el programa del curso (Syllabus). Hay dos sitios que se comportan de otra forma:

  • Las descripciones de eventos del calendario eliminan cualquier iframe que no sea de los medios propios de Canvas o del lanzamiento de una app. Pon el juego en una página y enlaza la página desde el evento.
  • Los atributos no admitidos se eliminan sin aviso, por ejemplo allow-top-navigation en un valor de sandbox. El fragmento no usa ninguno, así que si lo editaste y algo dejó de funcionar, compáralo con el original.

Cómo elegir un tamaño que quepa en el diseño del curso

Una página de Canvas está al lado de la navegación global y, cuando está abierto, del menú de navegación del curso, así que la columna de contenido en un portátil es mucho más estrecha que la pantalla. El marco no escala su tablero, así que elige un tamaño que quepa en la vista más estrecha que usen tus alumnos:

  • Principiante 9×9: 344 × 472 píxeles. El fragmento de arriba. Cabe junto a los dos menús, en la app Canvas Student y en los móviles.
  • Intermedio 16×16: 536 × 664 píxeles. Cabe en un portátil; úsalo con alumnos mayores. Cambia el src a ?size=intermediate&noguess=1 y ajusta el ancho y el alto.
  • Experto 30×16: 956 píxeles de ancho. Más ancho que una columna de contenido de Canvas en la mayoría de portátiles; enlaza al juego en su lugar.

Fija el ancho y el alto en la vista HTML en vez de arrastrar el marco en el editor visual, para que las cifras sean exactas. Si el tablero se ve recortado por abajo, la altura es demasiado pequeña; si queda espacio vacío debajo, no pasa nada.

Cómo usarlo en clase

La lección del Buscaminas para docentes es una actividad de lógica de 15 minutos pensada justo para este tablero, con preguntas para la puesta en común. Una página de Canvas le va muy bien: el tablero arriba, las reglas que deben descubrir los alumnos debajo y un enlace a los tableros del Buscaminas para imprimir para practicar en papel y como deberes. Añade la página a la lista de pendientes de los alumnos desde las opciones de la página si quieres que aparezca en la lista de todos para la clase.

Preguntas sobre insertar en Canvas

¿Canvas permite iframes en las páginas?

Sí. iframe está en la lista de HTML permitido del editor de Canvas (HTML Editor Allowlist) con los atributos src, width, height, frameborder, loading y allow que usa este fragmento, y style y title se permiten en todos los elementos. Canvas elimina las etiquetas object y embed de las páginas, y los iframes de las descripciones de eventos del calendario, pero conserva un iframe en una página, tarea, debate, anuncio o examen.

¿Por qué el marco del Buscaminas sale en blanco en Canvas?

La causa habitual es la Content Security Policy. Cuando un administrador de Canvas la activa en Admin > Settings > Security, Canvas solo permite marcos de los dominios de la lista Allowed Domains, y cualquier otro iframe se queda vacío. Pide a tu administrador de Canvas que añada play-minesweeper.games a la lista. La otra causa habitual es un filtro web del centro que bloquea las webs de juegos.

¿Qué tamaño debe tener el iframe en Canvas?

Usa el tablero de Principiante, de 344 por 472 píxeles, en la mayoría de páginas: cabe en el área de contenido con la navegación del curso abierta y en los móviles. El tablero de Intermedio, de 536 por 664 píxeles, cabe en portátiles. El de Experto mide 956 píxeles de ancho y es demasiado ancho para una página normal de Canvas.

¿Puedo usar Insert > Embed en lugar del editor HTML?

Sí. En el Rich Content Editor, elige Insert > Embed en la barra de menús (o haz clic en el icono Embed de la barra de herramientas, dentro del icono de opciones si tu ventana es estrecha), pega el fragmento en el campo Embed Code y haz clic en Submit. El resultado es el mismo iframe.

¿Funciona en la app Canvas Student?

Las páginas con el tablero se abren en la app como cualquier otro contenido de página. El fragmento incluye max-width:100%, así que el marco se estrecha en un móvil en vez de salirse, y los jugadores ponen banderas manteniendo pulsado. Usa el tablero de Principiante si los alumnos usan sobre todo el móvil.

¿El juego rastreará a mis alumnos?

No. El juego no necesita cuenta, no muestra anuncios y no carga rastreadores de terceros. Los mejores tiempos se quedan en el navegador con el que se jugaron, y las victorias sin adivinar, que es lo que reparte este fragmento, nunca se envían a la clasificación pública.

Todo lo de esta página empieza con un fragmento del generador: un marco con el juego y un enlace de crédito de una línea que va debajo. Elige el tamaño del tablero y el tema, decide si quieres mostrar la línea opcional «Powered by» dentro del juego y copia el código.

Abrir el generador para insertar el Buscaminas

También te será útil: el generador del widget del Buscaminas y las opciones del iframe, cómo jugar al Buscaminas y los tamaños de tablero personalizados.