Cómo insertar tu ejercicio realizado con Hot Potaoes en tu blog

En el blog de Alejandro Valero, Apuntes sobre blogs vemos cómo incluir este tipo de ejercicios en el blog tenemos que contar con un servidor externo donde guardar los archivos HTML. Esto no es un problema para los docentes que están en un centro TIC; para aquellos que no disponen de espacio web en su centro, pueden disponer de un espacio gratuito que el ISFTIC (Instituto Superior de Formación y Recursos en Red para el Profesorado) del MEC pone a disposición de los docentes. Para solicitarlo; selecciona "Servicios para usuarios" (en el centro del menu superior) y luego en "Solicitudes" (en el menú de la izquierda).

Una vez tengamos disponible nuestro espacio, hay que transferir (copiar) el archivo HTML del test recién creado a este servidor web mediante un programa de FTP, y a continuación apuntamos la ruta o dirección Web (URL) donde está guardado, de modo que si escribimos esa ruta en el navegador, vemos el test como página web normal.

2º. Incorporamos ejercicio en nuestro blog mediante la etiqueta iframe. El texto siguiente, con los cambios necesarios, hay que insertarlo en el código fuente del texto: hacemos clic en la pestana Edición de HTML del editor de Blogger, y ahí lo pegamos donde deseemos que aparezca.

Estos son los parámetros de dicha etiqueta, que están colocados dentro de la etiqueta de apertura:

1. src: es la ruta o URL de donde se encuentra guardado el archivo jquiz.htm del test en otro servidor.
2. frameborder: es la anchura del borde del marco expresado en píxeles.
3. height: es la altura del marco. Hay que ajustar esta altura si se quiere que no se vea la barra de desplazamiento y parezca que el test está incrustado en el blog.
4. width: es la anchura del marco. Hay que tener cuidado de no poner una anchura que sobrepase los 500 píxeles, pues el marco podría invadir el lateral del blog.
5. scrolling: es la barra de desplazamiento. Escribimos auto para que la barra aparezca automáticamente cuando sea necesario. Si escribimos yes, la barra aparecerá siempre, y si ponemos no, no aparecerá nunca. En este último caso, hay que impedir que el test se esconda por debajo del marco y el usuario no pueda verlo entero.
6. No hay que olvidarse de las comillas y de cerrar el iframe con su etiqueta de cierre, que incluye una barra.
7. En texto azul he incluido la etiqueta div y el atributo align para centrar el marco en la página, aunque no es necesario. No hay que olvidar el div de cierre. Con este código podemos centrar cualquier elemento de la página.

Una pega del editor de Blogger

Y ya tenemos el test incorporado a nuestro blog. Pero en el editor de Blogger ocurre un pequeño error, pues cuando insertamos el texto de la etiqueta iframe, desaparece del editor todo el texto del artículo, quizá debido a que esta etiqueta obliga a salir a un servidor externo. En realidad, el texto sigue ahí, porque si vemos el artículo en Vista previa, aparece todo lo que teníamos escrito.

Para solucionar esta pega, tenemos dos soluciones: o dejar guardado el artículo con el editor en Edición de HTML o desactivar el editor visual del blog en el menú Opciones/Básico. En este caso establecemos como No la opción ¿Mostrar el modo de composición para todos sus blogs? Y después pulsamos el botón Guardar valores. En este caso, sólo aparecerá un marco en el editor donde se verá el texto junto al código HTML, es decir, el código fuente del artículo. Ahí podemos seguir escribiendo normalmente. Cuando no trabajemos con ese artículo podemos volver a activar el editor visual, que incorpora los botones de formateo.

Otra opción práctica consiste en escribir el artículo en su totalidad con el editor visual de siempre, y cuando ya esté listo para ser publicado, incluimos la etiqueta iframe, que es lo que yo estoy haciendo ahora. Y después lo guardamos. Cuando queramos modificarlo, entonces tendremos que desactivar el editor visual.

Vamos a ver si es verdad que funciona:

¡Parece que sí!