- Una plantilla de webquest.

- Un editor html.

- Un servidor donde colocarla.

La plantilla.

Plantilla

Para este post he diseñado una plantilla html que te puedes descargar aquí. Como puedes ver, es una plantilla al estilo 2.0 en la que ya he creado la estructura de una webquest y le he aplicado un estilo a todos sus elementos.

Consta de 7 páginas:

- Introducción.

- Tarea.

- Proceso.

- Recursos.

- Evaluación.

- Conclusión.

- Autores.

La puedes ver en funcionamiento aquí.

El editor html.

Para editar la plantilla podrías usar el bloc de notas pero te aparecería el código. Para que sea mucho más fácil vamos a  utilizar un editor de html visual.

Desde aquí te puedes bajar el editor Nvu, gratuito y en castellano. Una vez que tengas el editor tienes que abrir con este editor el archivo index.html del paquete que te has descargado  y verás algo como esto:

Editor

Como puedes ver en la imagen es un programa muy sencillo en el que puedes cambiar todos los elementos de la webquest con gran facilidad.

Ve abriendo y editando cada uno de los archivos del paquete que te has descargado (tarea.html, recursos.html, ...) y tendrás tu webquest en unos minutos.

El servidor.

Una vez que ya hayas editado la plantilla para tu webquest tienes que ponerla en un servidor para que todo el mundo pueda acceder a ella.

Esta parte es en la que la mayoría de personas se pierde pero voy a intentar explicarlo de forma sencilla.

Para empezar necesitas tener un servidor. Los hay gratuitos y de pago. Los gratuitos suelen poner publicidad pero he encontrado uno que no pone publicidad y te da una cantidad bastante grande de espacio y transferencia. Se trata de 000webhost.com .

El primer paso es registrarse en 000webhost para obtener una cuenta gratuita.

Una vez que te hayas registrado tienes que solicitar el paquete de hosting gratuito ( Free hosting).

Después de haber solicitado el hosting y haber elegido tu dominio  te aparecerá una pantalla como la que tienes más abajo.  Tienes que pinchar en Go to CPanel. Esto te llevará al panel de administración del servidor.

En este panel tienes que pinchar en el icono que pone File Manager. Lo puedes ver en la siguiente imagen:

Cuando pinches en File Manager te saldrá una ventana como esta y tendrás que pinchar en el botón Java Upload:

Cuando pinches en Java Upload se te abrirá una pequeña aplicación java para subir archivos. Primero tienes que añadir la carpeta que quieres subir (+Add) , es decir, la carpeta /webquest donde están tus archivos editados. Una vez que los has añadido te sale otro botón que pone Upload. Pinchas en Upload y los archivos empiezan a subir, cuando terminen pincha en la flecha azul de arriba para volver al directorio.

Al volver podrás ver que tu carpeta /webquest se ha creado en el servidor y contiene todos tus archivos.

Se ha creado dentro del directorio /public_html , todo lo que pongas dentro de esa carpeta será lo que se verá en internet, lo que pongas fuera no se verá.

Si todo ha ido bien ya sólo tienes que ir a la dirección de tu webquest para ver si todo está en su sitio. Esa dirección será eldominioquetehayadado.com/webquest.

Bueno, pues esto es todo. Ya tienes a tu disposición un diseño 2.0 para tus webquest, has aprendido a editarlo y a ponerlo en un servidor y todo ello con software y servicios gratuitos.

Si tienes algún problema en cualquiera de los pasos para crear tu propia webquest deja un comentario y estaré encantada de responderte.

Lo encontré en Smashing Magazine un sitio dedicado al diseño web en el que hicieron un concurso de diseños webs basados en tipografías.  Había diseños muy buenos pero sin duda el más original fue el de Matthew Taylor. Este chico hizo una especie de laberinto utilizando solamente html y css.

No me he podido resistir a la tentación y he hecho el mío. Puedes probarlo aquí.

Veamos cómo se cambia el texto para que puedas hacer tus propios laberintos.

No hace falta que sepas html ni css. Tampoco que tengas ningún software instalado. Html y css se pueden editar con el bloc de notas o cualquier editor de texto plano.

Lo primero que tenemos que hacer es descargar los archivos. Aquí tienes los que yo he editado y aquí los originales de Matthew Taylor (vista del original).

El paquete que te has descargado tiene un archivo index.html, una carpeta /img y una carpeta /css. No cambies esa estructura. Lo único que tienes que hacer es abrir el archivo index.html con "abrir con" (si le pinchas directamente se te abrirá en el navegador y no podrás editarlo). Una vez le hemos dado a "abrir con" elegimos nuestro editor favorito y tendremos delante esto:

No te asustes, es muy fácil editarlo. Si te fijas el tal Matthew tiene el código ordenadito formando una especie de escalera. Si nos situamos al principio de esta escalera, en la cuarta línea podemos reconocer el texto que hemos visto en pantalla. Fijándote en el texto que sale en cada cuadro podrás ir editando paso a paso para construir tu texto.

Si observas el código (aunque no sepas html) puedes ver como el texto siempre está entre unas etiquetas como estas <span id="a4">. Como vemos empieza con id=a2,id=a3,… Cada una de esas etiquetas representa uno de los cuadrados que salen en la pantalla. Sólo tienes que cambiar ese texto y llevar cuidado de no borrar ningún símbolo como < o >.

Como puedes ver las palabras del título “El laberinto mágico de Edufrikis.com” están partidas. Eso es para hacer el efecto de texto desordenado a distinta altura.

La imagen la puedes cambiar en el archivo stylesheet.css que está en la carpeta /css. Allí hay otro porrón de código pero solo tienes que buscar donde pone silencio.jpg (en el de edufrikis) o saying.gif (en el de M. Taylor) y cambiarlo por tu foto. Eso sí, tu foto debe de estar en la carpeta /img.

Buscamos esta línea:

background:transparent url(../img/silencio.jpg) top left no-repeat;

y cambiamos sólo la foto.

background:transparent url(../img/tufoto.jpg) top left no-repeat;

También puedes sobrescribir la foto que hay en la carpeta /img y así no tendrás que tocar nada de código en el archivo stylesheet.css .

La parte de la foto tiene una zona visible de 100 píxeles de ancho. Si pones una foto mayor de 100px no se verá entera.

Por último, si tienes conocimientos de CSS y HTML puedes cambiar el tamaño, color y distribución de los bloques, pero eso ya es otro tema, demasiado largo para explicarlo en un post.

Si tienes curiosidad y quieres aprovechar el verano para aprender HTML y CSS,  te recomiendo los libros gratuitos "Introducción a XHTML" e "Introducción a CSS"  que puedes descargar en http://www.librosweb.es/ Muy claros, básicos y en castellano.

La mayoría de docentes no ha tenido una educación visual y mucho menos una formación sobre accesibilidad y usabilidad de contenidos interactivos. Por esto, es comprensible que nos encontremos muy buenos materiales didácticos con un diseño gráfico pésimo que, además de dar una mala sensación, dificultan su comprensión y uso.

A continuación presento dos páginas con el mismo contenido (Tipo A y Tipo B). Una representa el lado oscuro, todo lo que no se debe hacer, el camino del mal (xD). La otra sigue unas premisas básicas para un diseño funcional y accesible. Un diseño que centre la atención en el contenido, que no distraiga al lector, en este caso, al alumno.

Pincha en la foto de cada tipo para ver los ejemplos. Como podrás comprobar no se trata de una actividad didáctica. Es simplemente un texto de prueba para mostrar como un material con la misma información puede cambiar radicalmente según el diseño gráfico que se le aplique.

Tipo A

Tipo B

Si no quieres caer en el lado oscuro (tipo A), ahí van unos pequeños consejos:

La estructura.

Todo lo que hagas debe seguir una maquetación coherente. La simetría, el orden y la compensación de los espacios le da coherencia al diseño y ayuda al lector a situar rápidamente las distintas partes del contenido. Si pones las cosas donde te parece, sin ninguna planificación previa, el resultado final tendrá mal aspecto y hará que el lector se pierda con facilidad en un caos de gráficos y texto. Esto se puede solucionar de una forma sencilla.

Existen muchas páginas donde se pueden descargar layout o grid sobre los que diseñar. Muchos editores de HTML llevan incorporadas plantillas que podemos utilizar. Si vas a diseñar con programas como Photoshop, Gimp, Inkscape, Illustrator o Freehand  te puedes bajar grids en todos los formatos desde aquí .

Estas plantillas para maquetación se pueden aplicar a cualquier diseño que hagas ya sea una página web, un flash, un pdf, etc.

El fondo.

No uses imágenes de fondo, sólo colores planos. Estás haciendo una actividad didáctica en la que lo importante es el contenido. Los fondos de imágenes  repetidas o grandes imágenes dificultan la visualización del texto además de que añaden un peso considerable.

Los colores.

Un consejo sencillo, no pongas en una pantalla una combinación de colores que no llevarías puesta. Cuando vayas a elegir los colores piensa que estás delante del armario eligiendo la ropa que te vas a poner. Según el tipo de ropa y el contexto elegirás unos colores u otros. (Un verde manzana quizá no quede muy bien en una americana pero si en una camiseta para ir a la playa, cada situación tiene sus colores).

Normalmente un diseñador no elige los colores sobre la marcha sino que trabaja sobre una paleta que ha elegido previamente. Crea una paleta de 3 a 5-6 colores y  construye todo el material sobre esos colores.

Para ayudarte en la elección hay herramientas como kuler.adobe.com donde puedes crear tus propias paletas de colores y buscar dentro de las que ya han creado otros usuarios.

Supongamos que nuestro material trata sobre  “la primavera”. Nos vamos a Kuler y ponemos en la caja de búsqueda “spring” (sí, hay que buscar en inglés si quieres encontrar algo). Aparecerán toda una serie de paletas de colores creadas por los usuarios para la palabra primavera.

De esa paleta de colores procura que unos sean claros y otros oscuros. Utiliza los claros para los fondos y los oscuros para el texto pero ante todo asegúrate de que dispones de suficientes colores para crear varios contrastes.

La tipografía.

La tipografía es un elemento muy importante del diseño. Aunque te pueda parecer que cualquiera vale esto no es así.

Lo primero que debes tener en cuenta es que si tu actividad se va a ver en un navegador tienes que usar una serie de fuentes determinadas. Si usas un tipo de fuente que el usuario no tiene instalada la sustituirá por la fuente por defecto del navegador y tu diseño ya no aparecerá tal como lo hiciste.

No hay fuentes más bonitas que otras, cada una de ellas puede quedar muy bien en un contexto y fatal en otro. En nuestro caso las fuentes deben ser sencillas y muy legibles y usar como mucho dos tipos de fuentes en un mismo material.

En esta web puedes ver las fuentes más usadas y que sistemas operativos las traen de serie.

Como habrás comprobado son pocas las fuentes que se pueden usar con seguridad de que cualquiera las tendrá instaladas. Pero son suficientes para hacer muy buenos diseños y además son las más legibles.

Un consejo más, nunca uses la fuente “Comic sans” (por favor :S).  Sólo hay una cosa que un diseñador odie más que Internet Explorer 6 y es la fuente Comic Sans.

Por último, recuerda  no utilizar un tamaño de fuente menor de 12.

Las imágenes.

Gifs animados. Tus alumnos juegan en la consola a juegos en 3D desde que nacieron. Han visto explosiones y efectos especiales de todo tipo en cine y televisión. No los vas a impresionar con un gif animado de un perro bailando. Además, no tiene ninguna finalidad didáctica. Totalmente prohibidos los gifs animados.

Imágenes con transparencias. Si vas a usar este tipo de imágenes utiliza imágenes PNG en lugar de GIF. Los gifs dejan un borde blanco alrededor de la imagen que queda fatal. Si tu fondo no es blanco utiliza imágenes png y esos molestos píxeles no aparecerán.

Peso de las imágenes.  Procura que tus imágenes pesen lo menos posible. Esto ralentizan la carga y muchas veces no tiene justificación alguna (las vas a poner en un tamaño pequeño y no necesitas una gran resolución para que se vean bien). Tampoco debes agrandar las fotos pues éstas quedan pixeladas al aumentar de tamaño dificultando la visión y dando un mal aspecto a tu material.

Multimedia.

La musiquilla de fondo. Esto es una carga innecesaria para una página y además de distraer  molesta. Hay que eliminar todo aquello que no sea necesario para la actividad. No hay que adornar.

Flash. De esto hablaremos más profundamente en un post pero como adelanto te aconsejo que lo evites siempre que puedas. No es accesible y requiere de mucho trabajo, no merece la pena.

Extra:

Tipo C

Tipo C, en el que me salto algunos de los consejos que te he dado. Podría ser una buena opción para situaciones determinadas pero sin duda elegiría el Tipo B como material para la escuela. El Tipo B tiene mucho menos peso (las conexiones de las escuelas no son muy buenas) y el contenido queda mucho más limpio y claro.

Espero que os sirvan mis consejos.

Espero que no vuelva a suceder y poder aportar mi granito de arena en este mundo de las TIC aplicadas a la educación.

Gracias por vuestra paciencia.

Otros usuarios más avanzados utilizan  Joomla, Moodle, Wikis, etc. Estos gestores de contenido ofrecen muchas más posibilidades que un simple blog pero a su vez tienen una estructura rígida, es decir, hacen lo que están preparados para hacer, nada más. Como quieras variar algo la llevas clara.

Aquí es donde está la gran diferencia de Drupal . Joomla es algo así como Playmobil y Drupal como Lego (Intenta convertir el barco pirata de playmobil en una nave espacial xD).

Imagina que tienes un folio en blanco y Drupal es una caja de rotuladores con la que pintas todo lo que quieres. Los módulos no son estructuras cerradas que te permiten hacer determinadas cosas sino que son funcionalidades, en su mayoría básicas, que puedes usar donde y como quieras.

Realmente en la mayoría de CMS o LMS la pregunta que te planteas es ¿cómo puedo encajar lo que quiero hacer en esta estructura? Con Drupal esta pregunta se convierte en ¿qué quiero hacer?.

Pongamos un ejemplo práctico. Imaginemos que queremos hacer una actividad con niños de primaria cuyo producto final es una colección de fichas sobre animales. Queremos que tenga un título, un texto que lo describa, el nombre del alumno que ha realizado la ficha, una foto, un video y poder clasificarlo de distintos modos (especie, donde vive, alimentación, etc…)

Con un blog podríamos hacer un post sobre cada uno, agruparlos en una categoría llamada animales y asignarle tags como clasificación. Aún así el resultado no sería del todo satisfactorio.

Con Drupal, sin meter una sola línea de código quedaría así (pincha aquí).

Para editar mapas de Google disponemos de varias posibilidades, una de ellas es la que encontramos en la sección Mis Mapas de http://maps.google.es . Desde aquí podemos introducir multitud de elementos como rutas, imágenes, videos, etc, de una forma sencilla y guardarlos y compartirlos con otros usuarios. El problema que nos encontramos con este modo es que necesitamos una cuenta de google para poder utilizarlo. Si tus alumnos no tienen cuenta de Google o por cualquier motivo no quieres que la tengan esta opción ya no te sirve.

Otra opción es Google Earth, una herramienta maravillosa que nos ofrece multitud de posibilidades. El problema: hay que instalar el programa y en ocasiones esto no se puede hacer por múltiples motivos.

La forma que propongo permite utilizar mapas de Google sin necesidad de que tus alumnos tengan una cuenta ni de instalar nada. Es una forma sencilla para iniciarlos en el uso de Google Map, les permite familiarizarse con la herramienta y trabajar diversos conceptos en torno a los mapas. Me gustaría  señalar que esta propuesta no es más que una simplificación de una herramienta para su uso en primaria, la cual abre todo un abanico de posibles actividades en torno a ella.

Pasos a seguir:

1º Para utilizar los mapas de Google es necesario tener una cuenta en Google (la del profesor) y solicitar una clave. Esta clave es asignada por Google a cada sitio que utiliza sus mapas y está relacionada con un usuario y un página (el blog de aula, la página del cole, etc). Es decir, debes solicitar una “Google Map API KEY” (así se llama esta clave) para el dominio donde vas a alojar la actividad.

2º Descargar el siguiente archivo mapa01.rar . Una vez descargado lo tienes que abrir con un editor de texto (bloc de notas) o editor html para poder ver el código (no te asustes que es muy fácil).

3º Una vez que tenemos el archivo abierto en un editor de texto o html busca la siguiente línea:
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp; key=ABQIAAAAYt9pbwjJKMC1GwPYttpLZBT-IJsJO4B0hrc0D4HqkO38_RvR6xRK3vyJAITwdukWHA1r0xnN_tEXsQ" type="text/javascript"></script>

Debes sustituir toda esa fila de letras y números en rojo que siguen a “key=” (lo tienes indicado dentro del archivo)  por la clave que te ha proporcionado Google y subir el archivo modificado a tu servidor.

También puedes utilizar directamente el mapa de edufrikis ( pincha aquí ).

Esto es todo, de momento . En próximas entregas explicaré como guardar los mapas de cada alumno e iré añadiendo funcionalidades al mapa. De momento dispones de un mapa simple en el que trazar rutas y áreas y señalar lugares en el mapa. Sin estorbos donde los alumnos puedan pinchar por error. En definitiva, una forma sencilla de que los alumnos tengan un primer contacto con los mapas.

Nota: Dentro del archivo tienes indicaciones para cambiar el tamaño y zoom del mapa, la posición inicial y alguna indicación más. Recuerda que para ver el código lo tienes que abrir con un editor de texto (bloc de notas, por ejemplo) o un editor html, si lo abres con el navegador no verás el código.

La noticia ha corrido como la pólvora a través de la blogosfera. José Luis Zapatero da un impulso en su Proyecto Escuela Tic2.0 y ha decidido una nueva incorporación dentro del organigrama del Ministerio de Educación y Ciencia.

El presidente ha apostado fuerte por las NNTT y ha mirado hacia el norte en su elección. ¿Quién ha sido el agraciado? Pues nada más y nada menos que Néstor Alonso, más conocido en ambientes dospuntocerísticos como “Prrofesor Potâchov de Moldavia”.

¿Le pesará a Néstor su desnudo en la blogosfera (más de 2 millones de descargas) a finales del 2008  en su carrera política?

En efecto, Néstor Alonso ha demostrado durante una larga trayectoria su capacidad para impulsar las NNTT entre su alumnado de Educación Primaria y se ha destacado ampliamente por sus grandes dotes en el diseño gráfico. Esperamos que haga un buen diseño desde su puesto de Secretario General  y se acuerde de aquellos tuiteros que le seguimos fielmente.

La toma de posesión del Prrofesor se hará efectiva el próximo 29 de febrero del presente año. Como primicia, nos cuenta que su Secretaría estará llena de webs.

Podemos ver una foto, del encuentro del presidente con @Potachov, que da crédito a toda esta información y que no se incluye en este post por tener reservados todos los derechos.