Test Matemático(II)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Creación del entorno.-

El primer paso consiste en crear un marco para establecer en él la página, pensando en a quién va a estar dirigida la página, en quiénes van a ser los usuarios finales de ella.

En el caso que nos ocupa vamos a dirigirnos a niños de corta edad, ya que el problema que planteamos, suma de dos números, entra dentro de su marco de aplicación. Siendo así, debemos procurar crear una página alegre, con colores, que llame la atención de los niños y haga que la vean más como un juego que como un test de matemáticas.

Con este planteamiento inicial podemos optar por representar los números mediante unas imágenes consistentes en un rectangulo con un número dentro, y como color de fondo de la página vamos a usar el blanco, con objeto de que la vista de los niños no se despiste con un fondo de color, a ver si conseguimos así mantener su atención centrada en los números (además el blanco simboliza la pureza y ¿qué hay más puro que un niño?). Debemos procurar que la combinación de colores sea adecuada para ellos, que se distingan bien los números sobre el fondo y que el conjunto de todas las imágenes haga la página alegre. Para crear estas he usado el programa gráfico Paint Shop Pro, en el cual, selecionando la herramienta adecuada, he construido un cuadrado de 50x50 pixels, al que he dado un color de fondo, y sobre ella, usando la herramienta texto, he situado un número, en fuente Verdana y tamaño 22 pt, que resulta clara a la vista, y que he salvado con formato GIF, por el escaso número de colores de cada una de ellas. El peso final de cada imagen es de aproximádamente 1K, que puede resultar válido sin tener que recurrir a optimización por tiempo de carga.

Una muestra de las imágenes así obtenidas es la siguiente:

Con las imágenes ya creadas empezamos con la página en sí, y para ello situamos primero un cabecero con el título de la página. Y con este situado es momento de empezar a colocar las imágenes, para lo cual vamos a definir una capa para cada una de ellas, y las vamos a posicionar luego en nuestra página usando CSS Positioning.

Y alguno de vosotros preguntara ¿qué es eso de capas y CSS Positioning?. Bueno, para aclarar estos conceptos vamos a detenernos un poco en su estudio.