Edufrikis Educación y tecnología

17ago/1029

Plantilla para Webquest al estilo 2.0

En este post vamos a aprender a crear nuestras propias webquest y a ponerlas en internet de una forma sencilla y gratuita. Para ello necesitamos tres elementos:

- Una plantilla de webquest.

- Un editor html.

- Un servidor donde colocarla.

La plantilla.

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

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. :D

5ago/102

Pequeño juego en html

Hoy traigo un pequeño juego. Se trata de un entretenimiento, una nota de color, que puedes meter en tus webquest y cazas del tesoro a modo de pista, ayuda, reto o diversión. Se puede utilizar para plantear o comprobar la solución a una pregunta de un modo más sugerente que un texto simple.

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.

Archivado en: Diseño, Frikadas 2 Comentarios