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.

Archivado en: Diseño, Frikadas 4 Comentarios
19ene/100

NUEVO SECRETARIO DE ESTADO PARA LA WEB 2.0 EDUCATIVA

Leo en el blog matemático de Luis Miguel y me llevo una gratísima sorpresa.

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”.

Potachov

¿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.

Archivado en: Frikadas Sin comentarios