miércoles, 21 de enero de 2009

Diseño de una Web de Dibujo

Basándonos en la imagen superior se va explicar el funcionamiento de esta web de dibujo orientada a niños que no saben leer y con el objetivo de que puedan dibujar y colorear

La interfaz posee 4 barras de herramientras que rodean al lienzo para que sea más fácil el acceso a las distintas herramientas.

La barra de la derecha permite seleccionar una plantilla que los niños podrán colorear, además de dibujar en ella o alrededor de ella. En dicha barra se puede ver que hay dos flechas en los extremos inferior y superior que nos permitirán desplazarnos a través de las diferentes plantillas.

La barra inferior está dedicada exclusivamente a la selección de color tanto para pintar como para dibujar, y presenta un total de 32 colores, mostrándose el seleccionado a la izquierda en un icono de mayor tamaño que los de la ya mencionada lista.

La barra de la izquierda posee las herramientas típicas de cualquier software para dibujar. Podemos ver que se proporciona el lápiz para dibujar, la goma para borrar lo que hayamos hecho, la brocha para pintar manualmente, el cubo de pintura para rellenar áreas cerradas y una herramienta para crear estrellas. En cuanto a éste último he de aclarar que su aparición en este diseño se debe a que los niños suelen prestarle sobrada atención al dibujo de estrellas. Por último se ven unos cuadrados de color negro y distintos tamaño que nos permitiran elegir el grosor para la goma y la brocha.

La barra superior posee las herramientas de impresión de dibujo, eliminar o deshacer todo (esto nos llevaría a un lienzo vacío donde podemos volver a dibujar o seleccionar una plantilla), deshacer (retroceso) paso a paso y la operación opuesta, rehacer paso a paso. El sitio realiza guardados automáticos cada cierto tiempo.

Por último, Añadir que se ha montado el diseño con html, css, javascript y algo de php (aunque no es funcional) pudiendo seleccionar 5 plantillas y la herramienta de eliminar. En dicho diseño cuando pasamos el ratón por las barras de herramientas estas cambian de color indicando que están siendo usadas, y cuando el raton se posa en el lienzo este se expande para dar mayor comodidad a la hora de pintar y dibujar.

El diseño web se puede ver aquí. y los ficheros fuentes pueden descargarse desde aquí.