Edufrikis Educación y tecnología

5ago/104

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.

Be Sociable, Share!
Comentarios (4) Trackbacks (2)
  1. Muy bueno! creo que me voy a entretener un rato esta tarde, jeje
    Gracias

  2. Gracias! Si haces algún laberinto envía un comentario con la dirección que lo veamos.

  3. Una oficina sin sala de juntas no esta completa, en Oficina en Renta podrás organizar entrenamientos y juntas de negocios de hasta
    18 personas.

  4. Bola,Agen Bola,Judi Bola Online,Taruhan Bola,Situs Bola,Agen Bola
    Terpercaya,Bola Online,Sbobet Online,Dunia Bola,Agen Sbobet,Situs Judi Bola,Agen Judi Bola,Pasaran Bola,
    Agen Bola Online,Judi Online Bola


Deja un comentario


*