Diseo de Webs Educativos

Andrea Gngora Rojas

El presente trabajo est basado en mi experiencia en los cursos de formacin que he impartido en los centros Grimm, y a otros enseantes de diversos niveles. Todo ello en la esperanza de que pueda servir a otros profesores interesados en la creacin de materiales educativos, especialmente, y aqu, en el diseo de web educativos. 1.Proceso de diseo de un web educativo De manera similar a lo que ocurre en el diseo de cualquier material didctico, independientemente del formato en que ste sea editado, los pasos en la planificacin de un web con fines educativos consisten en: La definicin de los objetivos educacionales del material. La seleccin de los contenidos que deben incluirse en el web, en funcin de los objetivos en principio establecidos y de las necesidades de aprendizaje de los alumnos a quienes va dirigido el material. Los contenidos resultantes de la seleccin seran el punto de partida para la construccin de la estructura conceptual que pretende ensearse a los alumnos. La eleccin de las estrategias instruccionales ms adecuadas para llevar a cabo el proceso de enseanza; en la seleccin de dichas estrategias es indispensable considerar las caractersticas propias del soporte en el que ser presentado el material. Hasta aqu, el proceso de diseo de un web educativo no difiere del que se requiere para la creacin de materiales en otros formatos. La particularizacin del proceso se da en los pasos siguientes: la organizacin de los contenidos en bloques de informacin en funcin de las caractersticas del formato, pgina web, y la definicin de las relaciones entre dichos bloques (las pginas), es decir, los enlaces o hipervnculos. La organizacin de la informacin en bloques de contenido consiste en la traduccin de la estructura conceptual inicialmente planteada a la luz de las estrategias instruccionales elegidas al soporte de pgina web. El objetivo es que la estructura conceptual se reproduzca fielmente en la estructura del web, optimizando las posibilidades que ofrece este medio de presentacin de la informacin. Es muy importante evitar que la fragmentacin propia del sistema hipertextual altere el significado de lo que se quiere expresar; tal fragmentacin debe ser aprovechada como una herramienta para conseguir la adaptacin de los materiales a las necesidades de aprendizaje de los alumnos, en un marco de interactividad.

Una vez que se ha establecido qu debe ir en cada pgina del web, es necesario determinar las relaciones que existen entre las pginas. Estas relaciones definirn la colocacin de los enlaces o hipervnculos del web. Es importante tener en cuenta que las conexiones entre las pginas deben contribuir a recrear la estructura conceptual definida en un primer momento: dichas conexiones aportarn informacin a los alumnos que naveguen por el web y pueden incidir en el sentido que ellos den a los contenidos. Adems, resulta muy recomendable que todo el proceso hasta aqu referido se realice sin ms ayuda que un lpiz y un papel, pues la ejecucin de un web ha de ser el resultado de la toma de muchas decisiones que difcilmente pueden efectuar-se ``sobre la marcha". Volviendo al tema de la definicin de los hipervnculos del web, hay que considerar que estos elementos mediarn las lecturas que harn los alumnos del web de manera significativa: en algunos casos, la presencia de una conexin entre una pgina y otra, aunque sta sea meramente mecnica, connota la existencia de una relacin semntica entre las dos pginas. El problema est en si esa connotacin contribuye o no a aclarar o enriquecer los contenidos que se presentan, de all que rada una de las conexiones que existan en el web deben ser claramente intencionales. Ejemplo: si en la pgina principal de un web aparece una lista de hipervnculos que conectan esta pgina con todas las dems del web, puede leerse que la pgina principal se encuentra en el primer nivel del web y todas las dems pginas, a las que se puede acceder desde la lista de hipervnculos, se encuentran en el segundo nivel de la estructura del web. Las preguntas derivadas del ejemplo expuesto seran: Realmente todas las pginas referidas en la pgina principal se encuentran en el mismo nivel, el segundo? Es esto lo que se quiere expresar? No se trata slo de hacer explcitas las relaciones entre las pginas en una lista general de hipervnculos, lo cual puede conseguirse utilizando ndices, vietas o cualquier otro elemento grfico, sino de intentar reproducir con fidelidad la estructura conceptual, que subyace a la estructura del web, en todos los posibles recorridos que efecte el usuario utilizando los hipervnculos. En algunas ocasiones los hipervnculos no tienen implicaciones semnticas ya que queda suficientemente explicito que cumplen slo la funcin de exploracin, por ejemplo: ``haga clic aqu para ver mejor esta imagen. En resumen, ha de procurarse que los hipervnculos del web se definan en funcin de los posibles recorridos que har el alumno. Es muy importante que en tales recorridos no se distorsione el sentido de la estructura conceptual que se pretende ensear. Otra de las cuestiones vitales en la planeacin del web es la referente a los mecanismos de navegacin pensados para contrarrestar la desorientacin que con frecuencia sufren los usuarios de este tipo de sistemas. De acuerdo con Adell (1994), tal desorientacin se caracteriza por los siguientes sntomas:

a.el usuario no sabe dnde se encuentra;

b.no sabe cmo regresar a un lugar conocido; c.no sabe cmo buscar la informacin que necesita o desea; y d.tiene la sensacin de que se est perdiendo algo importante a pesar de sus esfuerzos.

Es muy frecuente encontrar en la WWW pginas principales que presentan una lista tan amplia de hipervnculos que resulta muy fcil desorientarse en la exploracin del web. Asimismo, hay otras en las que aparece solamente el tipo de enlace ``ir a la pgina siguiente", lo que constituye una ``linealizacin" de la lectura del web en el sentido de que las posibilidades de navegacin del usuario se limitan a las establecidas por el emisor. Aunque puede resultar contrario a la filosofa del hipertexto, en esencia no lineal, puede servir para facilitar la lectura, si esa es la intencin del autor del documento (Adell, 1994). Sin embargo, es importante recordar que en un sistema hipermedia es fundamental que el alumno pueda acceder a los contenidos en funcin de sus necesidades. Se debe ofrecer al alumno la posibilidad de ``elegir entre varios caminos y propiciar con ello que l mismo gestione su proceso de aprendizaje. En ocasiones, la ruta propuesta por el autor aparece junto a otras posibilidades, lo que puede entenderse como una frmula en la que se le ofrece al usuario la opcin de navegar a su gusto o siguiendo un mapa claramente preestablecido. Otras herramientas de navegacin que pueden contribuir a contrarrestar la desorientacin de los usuarios son aquellas que representan de manera transparente las relaciones entre las diferentes secciones del web, tales como mapas que reflejan la estructura del documento y sus conexiones. Adell resume las posibilidades de contrarrestar el sndrome de la desorientacin con las siguientes frmulas: a.Incluir visitas guiadas, es decir, restringir la navegacin en aras de la legibilidad, aunque se trate de una lectura lineal. b.Incluir mapas o diagramas del espacio hipertextual que le ayuden al lector a comprender la estructura del material, saber dnde se encuentra y acceder directamente a los lugares a los que quiere ir. c.Incluir en el diseo uno o varios lugares clave que el usuario pueda identificar y recordar fcilmente. Esto puede conseguirse utilizando metforas significativas, como suele hacerse al consolidar la asociacin de la pgina principal con el icono home. Otros autores coinciden mencionan el uso de metforas como una de las frmulas ms sencillas y eficaces de orientar al lector (vase Daz, P., Catenazzi, N., y Aedo, 1., 1996; y Cacheiro, M.L. 1997). d.Incluir ndices del contenido del web, aprovechando la experiencia lectoescritora tradicional de los usuarios. 2. Algunas consideraciones relativas a los aspectos formales del diseo de webs educativos

1.os aspectos formales del diseo de materiales web merecen una amplia reflexin, especialmente si se tiene en cuenta que el formato hipertextual se constituye en un nuevo lenguaje es decir, que posee claves expresivas propias, genera nuevas formas de estructurar la informacin y nuevas formas de leer y que tal lenguaje est viviendo un rpido desarrollo en aras de la consolidacin de un sistema de signos propios (un cdigo) y en formas expresivas inherentes al medio. Nos referimos, por ejemplo, a los iconos que denotan conceptos como ``volver a la pgina principal", ``ir hacia atrs", etc.; a la evolucin de ciertos conceptos de diseo como los colores de los fondos de las pginas, como los tamaos y tipos de las letras, como la distribucin de la informacin en la pantalla, entre otras cosas. Est claro que, en gran parte, las claves de expresin de Ia WWW son el resultado de la adaptacin de las frmulas comunicativas propias de la publicidad impresa o televisiva, de libros expositivos e, incluso, de elementos cinematogrficos; sin embargo, la corta edad de la WWW explica la inmadurez del cdigo. Si bien todava queda mucho por ver en la evolucin del lenguaje del formato hipertextual, en el caso concreto de los webs con fines educativos har falta mucho ms tiempo para sacar en claro qu caractersticas formales ha de reunir un material didctico hipertextual para ser, comunicacionalmente, ms eficaz. La capacidad explicativa de un material didctico en soporte web depender de la fidelidad con la que los aspectos formales representen los contenidos conceptuales de dicho material. En otras palabras, la funcin del diseo formal es la de representar de la manera ms clara posible los contenidos que sern objeto del proceso de aprendizaje. Para conseguir esta fidelidad es fundamental que la inclusin u omisin de los posibles elementos que componen un web (textos, imgenes, tablas, fondos, etc.) responda a una intencionalidad pedaggica. Adems, la economa de recursos, en favor de la simplicidad y la transparencia de la expresin, contribuye a hacer ms fluida la comunicacin. El primer paso en el diseo de los aspectos formales de un web es la toma de decisiones sobre los elementos que se van a incluir en las pginas para presentarlos contenidos, es decir, las imgenes estticas, las imgenes en movimiento, las imgenes mapeadas, las tablas, la apariencia y ubicacin de los enlaces, los marcos, la distribucin de la informacin en las pginas, la parcelacin de las pginas en secciones, etc. Esta toma de decisiones debe estar guiada siempre por preguntas como ``des realmente necesario incluir esto?", ``cul es la forma ms clara y sencilla de expresar esta idea?". Es fundamental no claudicar ante impulsos meramente esteticistas. A continuacin analizaremos algunos de los elementos que componen una pgina web, sus caractersticas, aspectos que influyen en su capacidad expresiva y, en algunos casos, las ventajas y desventajas que trae consigo su inclusin en un web educativo. 2.1.Los textos Es muy importante procurar la concisin de los textos que se incluyen en una pgina web: la brevedad y la economa de medios para expresar una idea con exactitud contribuyen a que el lector reconstruya el sentido del mensaje.

Es aconsejable estructurar los textos en prrafos cortos e incluir slo una idea por prrafo. Los tipos de letra (fuentes) que se utilicen deben garantizar la legibilidad de los textos: existen fuentes de gran valor artstico, pero su funcin, en ocasiones, es meramente esttica, en detrimento de su misin primordial, la de ser legibles. En la decisin de cul ha de ser el tamao de las letras ha de considerarse que los materiales podrn ser impresos, as que hay que buscar el equilibrio entre lo que se ve en pantalla y lo que resulta en el papel; sin olvidar que algunos visualizadores presentan la opcin de aumentar o reducir el tamao de las letras en la pantalla a gusto del usuario. Es importante considerar que, en caso de distribuir espacialmente los textos en la pantalla, la visualizacin de los mismos vara de acuerdo con la resolucin de los monitores y los programas de navegacin. El color del texto es otro de los aspectos que determinan su legibilidad. Ha de procurarse un alto contraste entre el fondo de la pgina y el color de texto. Es aconsejable evitar contrastes demasiado inquietantes, para no abusar de la capacidad de atencin de los lectores. Con lo anterior no quiere decirse que existan combinaciones idneas ni limitar las posibilidades creativas del diseador del web, sino hacer hincapi en la necesidad de dar prioridad a la funcionalidad por encima de la esttica. 2.2.Los fondos Existen posibilidades ilimitadas para dar fondo a una pgina web: color slido, matizado o degradado; texturas variadas; fotografas escaneadas, imgenes elaboradas en el ordenador, etc. La decisin de cul debe ser el fondo de las pginas del web, igual que los dems elementos que lo componen, debe guiarse por los objetivos pedaggicos del mismo: es frecuente encontrar pginas con fondos de gran valor artstico que, sin embargo, constituyen un estorbo para la legibilidad del texto y un obstculo para la rpida visualizacin de los materiales. Los fondos pueden y deben cumplir una funcin expresiva dentro del web; pueden, por ejemplo, convertirse en elementos de identificacin de partes de la estructura del material, caracterizando cada seccin. Esto contribuye a facilitarla orientacin de los usuarios en el web. 2.3.Las imgenes De acuerdo con la funcin que cumplen en la pgina del web, las imgenes pueden clasificarse en los siguientes tipos: a.Ilustrativas y/o explicativas, cuando guardan una relacin de complementariedad con el texto, contribuyendo a ampliar el significado del mismo o a aportar nuevos sentidos al mensaje que se pretende expresar. b.Icnicas o metafricas, cuando su misin es sintetizar grficamente un concepto especfico. c.Botones, cuando se constituyen en mecanismos de exploracin del web como en el caso de las imgenes enlace y de las imgenes mapeadas.

d.Parceladoras, cuando contribuyen a organizar la informacin en la pantalla, separando un prrafo de otro, una seccin de otra, etc. Ms que esttica, su misin es comunicativa, pues ayudan a garantizar una mejor legibilidad de los textos y una distribucin ms cmoda de la pantalla. e.Decorativas, cuando su inclusin en las pginas del web es meramente esttica y no obedece a argumentos pedaggicos o comunicacionales. Es evidente que las imgenes deben incluirse slo cuando resultan pertinentes de acuerdo con los objetivos pedaggicos que subyacen al material. Davis (1996) propone algunas categoras generales para el anlisis de las imgenes que bien pueden aplicarse al caso de las imgenes de una pgina web sencilla, estas categoras son las siguientes: apariencia: los atributos reconocibles de las imgenes (color, forma, lmites, contraste, opacidad, textura, etc.); medidas: la escala de las imgenes (cmo de grande o cmo de pequea es una cosa con respecto a otra); dimensiones: construcciones temporales incorporadas en las imgenes (ideas relacionadas con la duracin); y perspectiva: los aspectos de la perspectiva de una imagen segn la posicin relativa del espectador (posicin privilegiada, perspectivas de 1, 2 y 3 puntos, perspectivas mltiples) (Davis, 1996). Las categoras de Davis pueden servir para una fase inicial del diseo formal del web, es decir, para la toma de algunas de las decisiones bsicas como los colores que se utilizarn en las pginas, las caractersticas generales de las imgenes que se quiere incluir, etc.

2.4.La distribucin de la informacin en la pantalla Las tablas son la forma ms usual de organizar la informacin en una pgina web. Son muy tiles para presentar sintticamente las ideas y permiten representar de manera esquemtica los conceptos, lo que facilita la identificacin de las relaciones entre los mismos. Tienen la desventaja de que su visualizacin depende de las capacidades del navegador que utilice el alumno (El-Tigi y Maribe, 1997). Los elementos de parcelacin de la pantalla, en secciones de informacin, en zonas de mayor o menor captacin de la atencin, etc. son otros de los factores que intervienen en la ubicacin de la informacin de las pginas web. Uno de las herramientas ms utilizadas para segmentar la pantalla y con ello establecer diferentes secciones informativas, son los marcos o frames. Estos permiten crear algunas dinmicas de navegacin y presentar de manera organizada la informacin. De acuerdo con El-Tigi y Maribe, las implicaciones cognitivas que tiene la utilizacin de marcos en un web educativo son las posibilidades de comparacin y contrastacin de la informacin y las facilidades que se le ofrecen al alumno para reestructurar los contenidos de acuerdo con sus necesidades. Segn los mismos autores, una de las desventajas de utilizar marcos es la imposibilidad de visualizarlos en algunos navegadores El-Tigi y Maribe, 1997). Adems, los marcos incrementan el tiempo de recuperacin de la informacin; pueden contribuir a la desorientacin de los usuarios (algunos mecanismos de navegacin quedan invalidados cuando se navega usando marcos) y a la excesiva fragmentacin de la informacin.

Algunos editores de pginas web permiten establecer una segmentacin clara de las pginas que facilitan la inclusin de informacin; del mismo modo que los marcos, actan como pginas autnomas, aunque no incluyen barras de desplazamiento. La utilizacin de argumentos de diseo grfico para optimizar la presentacin de la informacin merece especial atencin, pues con estos puede conseguirse capturar la atencin del usuario, el alumno, hacia zonas especficas de la pantalla y, as, transmitirle una esquematizacin de la informacin. Por otra parte, es muy importante conseguir que el usuario deba hacer un mnimo esfuerzo en la exploracin del web, especialmente en la pgina principal: si se aprovecha al mximo el espacio de la pantalla, se evita que el lector deba recurrir a las barras de desplazamiento para explorar la informacin y, as, la comunicacin resulta ms clara y transparente. 2.5.El sonido Detrs de la inclusin de msica en las pginas web debe existir un claro objetivo comunicativo y una intencionalidad evidente. Adems de que el tiempo de recuperacin de una pgina web sonora se incrementa sensiblemente, este elemento puede provocar prdida de atencin y cansancio si su inclusin no cumple una funcin pedaggica explcita. Est claro que nos referimos a los sonidos incorporados de manera gratuita y no a aquellos sonidos que contribuyen eficazmente a cumplir con las metas educativas del material. 3.Conclusiones En el diseo de webs con fines educativos interviene un variado abanico de elementos que pueden analizarse siguiendo criterios de ndole diversa: aspectos pedaggicos, como el modelo instruccional que subyace al material; factores concernientes a las estrategias comunicativas utilizadas para transmitir el mensaje didctico, como el uso de imgenes, las caractersticas de los textos, la inclusin o no de sonido, etc.; elementos relacionados con el campo de la sicologa cognitiva, para entender la reconstruccin que hace el alumno del sentido de los contenidos estructurados hipermedialmente, por ejemplo; cuestiones tcnicas, como las herramientas utilizadas para crear el material; entre otros. La larga lista de posibilidades de aproximacin al anlisis del diseo de un web educativo hace evidente la imposibilidad de abarcar el problema desde una perspectiva no multidisciplinar y la necesidad de construir una representacin global de la cuestin basada en las aportaciones de diversas disciplinas y campos del saber.