Juan Quintana

Introdiucción

World Wide Web (WWW) enlaza computadoras alrededor del mundo para comunicarse e interaccionar. Quien se conecta con una computadora a través de Internet se ubica en un Website o lugar de Web. Un sitio de Web es un grupo de archivos de computadora puestos en Internet y a los que se accesa usando un programa para rastrear como Netscape o Explorer.

Clases de Web

Existen cuatro clases sitios de Web. De información, para informar al visitante acerca de un tópico. De entretenimiento, diseñados para entretener al visitante. De promoción, diseñados para promover a la organización que patrocina el Website. De educación, diseñados para facilitar la enseñanza y el aprendizaje utilizando los recursos del Web.

Funciones de Web

Al momento de diseñar una página es conveniente tener en mente, además de las clases de sitios, las funciones de Web: 1. comunicación (habilidad para comunicarse con otras escuelas y comunidades); 2. acceso a la información (habilidad para accesar y usar información), y 3. uso común de los recursos (habilidad para compartir y publicar recursos de información para que otros accesen y la usen).

Clases de página Web

Estos son los términos que se utilizan en Web al referirse a las distintas clases de página:

Páginas o Documentos. Se refiere al archivo o archivos presentados por un "browser" de Web.

Home page. El nivel superior de la página o lo que el usuario observa al entrar en un sitio.

Páginas internas. Son parte de cualquier sitio de Web. La página interna contiene datos en otra página separada de Web y de cualquier tamaño. Se accesa mediante un enlace.

Páginas externas. Estas son páginas que se encuentran en otros sitios de Web. Se accesa mediante enlaces. Menú

Principios básicos de diseño en Web.

Planificación

1. Decidir las necesidades del estudiante

2. Desarrollar metas y actividades

3. Decidir el contenido

4. Organizar y clasificar la información

El autor de una página de Web debe hacerse las siguientes preguntas:

¿Qué quiero colocar en Web?

¿Quiero incluir información sobre el curso, osquejo el curso, asignaciones de la unidad o actividades en línea de los estudiantes?

¿Qué quiero que mis usuarios lleven a cabo accesando a estas páginas?

Construcción de un documento

Considerar lo siguiente:

-Usar el "home page" como sumario con una sinopsis del propósito de la página.

-Tener encabezamientos informativos en cada página

-Enlazar los objetivos con actividades en una página distinta.

-Proveer enlaces y el e-mail del autor en la parte inferior de la página. Menú

Diseño de la interfase en WWW

El creador del sitio de Web organiza los contenidos dentro de un grupo de archivos llamados páginas de Web. Un página de Web contiene todo lo que puede contener una página impresa (texto y gráficas) . Además puede contener campos (para que los visitantes entren información), animación, vídeo y audio; menús, botones e hipertexto (palabras en color que conectan al visitante con otra sección de texto).

Problemas con los sitios típicos de web

Muchas páginas de Web son diseñadas como páginas continuas, igual que un pergamino. Para muchos visitantes se les hace difícil usar la barra que da continuidad al rollo ("scroll bar"). Otras páginas son tan confusas y complicadas con un sinnúmero de direcciones que el visitante pronto se encuentra perdido, sin saber donde está, de donde viene y a donde va.

Interfase metafórica. Selección de una metáfora correcta

Una metáfora es "la concepción de una cosa en términos de otra". Ejemplos: utilizar la gráfica de un cartapacio para representar un directorio, una hoja de papel para representar un archivo. un mapa o un poblado para representar información relacionada con ese lugar.

Una interfase metafórica emplea una metáfora visual para que la pantalla aparezca como otra cosa distinta a la de la pantalla de un monitor lleno de texto o figuras. La pantalla puede aparecer como si fuera un libro, un escritorio, un edificio.

Partimos de que nuestro sitio de Web es promocional y educativo. Como promocional debe llamar la atención, crear una buena imagen e impresión de nuestro programa y atraer estudiantes potenciales. Como educativo debe proveer acceso a las aplicaciones, al registro, lista de profesores y opciones de aprendizaje. La metáfora que se utilice debe tener las propiedades de un contenedor que disponga de la información del lugar (todo el contenido será visible en la pantalla en una sola imagen de un mapa) enfatizando la exploración y combinando las imágenes dentro del mapa. Menú

Estrategias efectivas de diseño

Plantilla ("layout" y tamaño de la página

Es frecuente que al pasar a Web o al imprimir un documento de Web aparezcan las últimas palabras de la línea cortadas. La razón es porque Web no tiene plantilla como los procesadores de palabras. HTML fue diseñado por ingenieros y científicos que nunca pensaron en una página con "layout".

La decisión respecto al tamaño de la página es crítico. El documento de Web no es como una página del libro con veinticinco líneas más o menos, La página de Web parece no tener fin, al igual que un rollo de pergamino. A nadie le gusta pasar una veintena de pantallas para conseguir determinada información. De igual modo a nadie le gusta ir saltando de enlace tras enlace o de menú tras menú para llegar a la información deseada.

Las páginas no deben ser demasiado largas ni demasiado cortas.

El tamaño ideal de una página no debe ser mayor de dos o tres pantallas. Algunos expertos en Web recomiendan una sola pantalla. Si hay datos importantes que trascienden este tamaño el autor debe considerar cortar los datos (Stover & Zink 1996) colocándolos en una o más páginas internas y accesando a las mismas mediante enlaces ubicados en la página home page. No abusar de los enlaces. Una buena regla es que para conseguir cualquier información sea suficiente con un enlace, lo máximo tres (Stover & Zink 1996). Es tan indeseable los muchos como los pocos menús.

Dimensiones de la página de Web

Las páginas con mucha cantidad de texto deberán diseñarse para que puedan imprimirse de forma apropiada (muchas personas prefieren imprimir texto a leerlo directamente de la pantalla). Si la página es demasiado ancha podrían perderse las últimas palabras de cada línea.

	Dimensiones de la plantilla para imprimir bien	Dimensiones de la plantilla para el uso de la pantalla
Anchura máxima	535 "pixels"	595 "pixels"
Altura máxima	295 "pixels"	295 "pixels"

Los diseñadores de Web pensaron en una página con una sola columna. Para mayor legibilidad se recomienda el uso de la página con el diseño dos o más columnas de distintas dimensiones mediante el uso de tablas yo"frames.

Márgenes y alineamiento

Los márgenes definen el área de lectura. Las páginas Web contienen otros elementos de interfase (botones de navegación, enlaces, gráficas no relacionadas), además del contenido textual. Es importante usar los márgenes para delinear el texto de otros elementos sin contenido. Los márgenes contrastan el espacio positivo de la pantalla (texto) del negativo.

El texto centralizado o justificado a la derecha es difícil de leer. Se lee de izquierda a derecha; los ojos no deben esforzarse para buscar el principio de la línea.

Diseño gráfico

El diseño gráfico consiste en el manejo de la información visual usando las herramientas de la plantilla, la tipografía y la ilustración para dirigir los ojos del lector a través de la página. Lo más importante del diseño gráfico es crear una jerarquía visual consistente donde se enfatizan los elementos importantes y el contenido se organiza lógicamente.

Lo primero que ve el lector es una masa de forma y color con elementos que contrastan con el trasfondo. En segundo lugar empieza a detenerse en la información específica, primero en las gráficas, si las hubiera, y después de ver por encima el grosor del texto, es que empieza a leer palabras individuales y frases.

Una página sólida de texto repele a las masas. Pero una página con gráficas poco elaboradas y tipografía oscura repele a lectores sofisticados. Teniendo en cuenta la naturaleza del contenido y las expectativas del usuario hay que mantener un balance con elementos que atraigan la vista con contrastes visuales.

Al momento de tomar decisiones del diseño gráfico es necesario recordar que nuestros lectores leen de izquierda a derecha y de arriba hacia abajo. En la plantilla de la página el tope de la página es siempre el lugar dominante, pero en las páginas Web es mucho más importante, pues lo único que se ve a simple vista son cuatro pulgadas de tope en el monitor común de 14x16 pulgadas.

Elige colores de tono blanco o matices sutiles de colores muertos relacionados con la naturaleza para los fondos; evita el negro y los colores primarios o vivos, excepto en pequeñas áreas de gran énfasis. El color del texto ha de contrastar con el color del fondo. Si no tienes experiencia en diseño sé conservador, convencional y simple.

Uso razonable de imágenes

Nadie duda del valor pedagógico de las imágenes. Pero demasiadas imágenes pueden convertir la página en confusa, lenta y aburrida. Usar la versión pequeña para las imágenes muy grandes, y si el usuario desea ver la versión del tamaño completo poner un enlace que lleve a la misma. "Los autores han de considerar usar la misma imagen en diferentes lugares de un documento en lugar de usar una imagen distinta en cada lugar" (Maddux y Johnson, 1997). Ejemplo: usar la misma barra para separar las secciones de un documento en lugar de usar distintas barras de colores diferentes para cada sección; pues una vez es traída la imagen se puede usar repetidamente sin añadir más tiempo para traerla de nuevo.

Tipografía en las páginas Web

Debido a la resolución es mucho más difícil leer en la pantalla que en papel impreso. El contenido de las páginas educativas es principalmente textual. Las opciones tipográficas en Web son muy limitadas y malas (títulos demasiado grandes y demasiado oscuros) antes que buenas.

Ciertos tipos de letra se ven mejor que otros en la pantalla. El Times, considerado como uno de los mejor legibles en papel, no es el tipo que mejor se lee en la pantalla: el tipo es demasiado pequeño y sus formas son irregulares. Primero elige un "font" que ofrezcan las plataformas y que esté instalado en la mayoría de las máquinas. Después evalúa su legibilidad. Se recomiendan los tipos "serif" y "Arial" para el cuerpo del texto.

Énfasis

Sólo se requiere una variación mínima para hacer un contraste visual y llamar la atención del lector. La letra cursiva atrae la vista. Generalmente se usa cuando se mencionan los títulos de periódicos y revistas, palabras extrañas, pero también se puede usar para contrastar otras frases de importancia.

La letra negrita o "bold" también contrasta fuertemente y se usa preferiblemente para los títulos de los trabajos y de las secciones. En ambos casos nunca uses porciones grandes de texto con esas variaciones, perderían su efectividad.

El texto subrayado es propio de la era de las máquinas de escribir (era equivalente a la cursiva), pero en el lenguaje tipográfico no existe. En las páginas de Web, una palabra o una frase subrayada indica un enlace, pensando en los usuarios que tienen monitores monocolor.

El color es otra opción para producir contraste, pero el texto a color, al igual que el subrayado, tiene una función muy especial en Web: significan palabras con poder de enlace.

Una forma efectiva de crear énfasis en las páginas de Web es el uso de MAYÚSCULAS o "small caps".

Los documentos en Web son más complejos que en material impreso. A más ornamentos y variaciones, elementos de interfase y mecanismos gráficos que se usen en la página, se expresa con menos claridad lo que se quiere decir. La mejor estrategia para la página Web es ser económico y consistente en todas las páginas.

Proveer botones de navegación: enlaces para regresar al home page desde cada página interna

Botones para ir al home page, hacia la página siguiente y hacia la página anterior. Cada página interna debe tener un enlace con el "home page". El botón "BACK" del "browser" de Web no siempre lleva a uno al "home page".

Tanto el "home page" como las páginas internas deben tener en la parte inferior de la página un enlace que lleve al usuario a la parte superior de cada página. Esto elimina la necesidad de usar la herramienta de rastreo cuando se desea ir al principio de la página.

Crear reglas de seguridad

Por razones de seguridad, nunca deben aparecer en las páginas de Web identificadores de estudiantes, tales como teléfonos, apellidos, direcciones, fotos sin el consentimiento de los padres y otros.

Hacer revisiones y verificar periódicamente los enlaces externos

Eso demuestra al visitante que el sitio no es un lugar abandonado y que "vive" alguien ahí. No hay cosa más desagradable que pulsar un enlace y leer un mensaje de error indicando que tal cosa no existe en el servidor. Se recomienda revisar los enlaces cada una o dos semanas y si alguno no tiene uso verificar mediante un motor de búsqueda de Web si está en otro servidor para actualizarlo o removerlo.

Probar la página en distintos "browsers"

Es un error ver la presentación de la página en el "browser" favorito. Hay más de diez "browsers" y la página puede tener una apariencia muy distinta en cada uno de ellos. Y la razón es porque HTML (HyperText Markup Language) no está orientado hacia una plantilla o layout como un procesador de palabras, sino hacia una estructura para que pueda correr en distintas plataformas. El autor podrá especificar que una línea de texto sea un título principal, pero no puede especificar el tamaño exacto de letra, el cual variará de acuerdo a la plataforma, al "browser", al tamaño y a la resolución del monitor.

Para que la página sea funcional es conveniente probarla por lo menos en los dos "browsers" más comunes, Netscape y Explorer y, si es posible en el "browser" para texto sólo o no gráfico, como Lynx. Menú

Diseño del home page

Cada día aparecen más páginas de estudiantes y de profesores en las Internet. El problema mayor que se presenta es el del diseño y desarrollo de páginas por parte de estudiantes y educadores.

El principio de la página o home page es la primera página de las páginas de Web. En las cuatro pulgadas de alto por seis de ancho que tiene de visibilidad la pantalla de los monitores comunes, debe aparecer toda aquella información imprescindible que deseo lea de primera intención el usuario. El home page es como el vestíbulo de un edificio que tiene en primer plano la información específica y clara de todo cuanto se ofrece dentro del mismo.

Proveer identificadores esenciales

Identificar el título. Cada home page ha de tener un título bueno y descriptivo. Un título apropiado ayuda a los usuarios a decidir si sigue o no en ese sitio.

Identificar el autor, el título del autor y la organización que patrocina el sitio. El propósito de estos identificadores es para poder emitir un juicio acerca de la autoridad y credibilidad de la información suministrada en Web. En Internet cualquiera puede publicar cualquier cosa.

Incluir la dirección e-mail así como otras direcciones y el teléfono para facilitar la comunicación.

Indicar el propósito del sitio

McKenzie (1995) sugiere que la escuela o clase de los sitios educativos de Web pueden llevar a cabo tres funciones:

1. Proveer enseñanza apropiada y recursos de aprendizaje o enlaces a los recursos relacionados con lo que se va a enseñar en la escuela o clase.

2. Identificar recursos en la escuela o en el área geográfica local relacionado con lo que se va a enseñar, como documentos, artefactos u otros datos.

3. Proveer a los visitantes nuevos y otros que están en búsqueda de una escuela con información para ayudarle a tomar una decisión.

Para desarrollar estas funciones pueden hacerse muchas cosas, entre ellas:

Temas nuevos para los estudiantes y padres: fechas de las reuniones importantes, fechas de las asignaciones y de las pruebas...

Copia de los trabajos de los estudiantes.

Enlaces a otras páginas del mismo sitio para revisar información de distintos tópicos y reforzar la enseñanza y ayudar a los estudiantes que faltan.

Material suplido por el profesor para estudiantes interesados en el mismo o material más extenso del presentado en clase.

Enlaces a otros sitios de Web relacionados con el contenido de la clase.

Respuestas a los ejercicios que fueron asignados, con o sin explicaciones.

Ejemplos de trabajos ejemplares de otros estudiantes.

Respuestas a preguntas hechas en la clase o sometidas por escrito o por e-mail.

Notas diarias de la clase tomadas por estudiantes.

Enlaces a herramientas de referencia como diccionarios o enciclopedias.

Se recomienda que en el "home page" aparezca indicado el propósito en forma breve y sencilla, en una o dos frases. "El propósito de este sitio es..."

Proveer enlaces locales y externos

Entre los enlaces locales están los enlaces a las páginas internas y a la página de la escuela o universidad. La página del maestro o de la clase debe tener un enlace a la página de la Escuela y a la de cada uno de los estudiantes. De igual manera, el "home page" de cada estudiante ha de tener enlaces al "home page" del maestro y al de la Escuela.

Se entiende por enlaces externos aquellos que llevan a otros sitios de Web relacionados con el contenido que se presenta, tales como artículos, documentos y bibliografía.

Los enlaces locales se ubicarán en un lugar distinto al de los enlaces externos.

En los sitios de Web hay home page buenos y home page malos. Por ejemplo en www.diarioelpais.com se encuentran todos los elementos esenciales de un home page. Tal vez esta página está sobrecargada, con todo y eso hay espacios libres (los espacios libres deben estar al lado derecho, antes que del izquierdo). Un contraejemplo de un home page lo tenemos en www.inter.edu (la gráfica se queda con todo el espacio). Al diseñar el home page hay que tratar que el usuario no tenga que utilizar el ratón para hacer enlaces y averiguar el propósito del sitio.

Título y propósito		Gráficas
Enlaces internos     Enlaces externos Menú	Cuerpo	Más enlaces

Recomendaciones

El diseño de los lugares instruccionales de Web debe reflejar el hecho de que uno de los aspectos más interesantes para visitar estos lugares es la oportunidad para inspeccionar el trabajo de la clase de los estudiantes. El trabajo de los estudiantes, pieza central del curso, debe aparecer en un lugar prominente del lugar instruccional, y no medio escondido en una esquina o al final de la página.

Mantener balance entre enlaces internos y externos en una página.

Preferir muchos archivos pequeños a pocos grandes.

Un buen diseño instruccional para el Aprendizaje Basado en Web (WBL) requiere los mismos principios de cualquier diseño bueno de CBI (Computer-Based Instruction). Es importante tanto para WBL como para CBI definir objetivos, organizar la enseñanza y usar consistentemente los estándares de navegación. También hay que proveer retrocomunicación adecuada al usuario.

Lemay (1995) y Aronson (1994) recomiendan entre otras cosas lo siguiente:

1. no intentes poner mucho contenido en una página;

2. plantea los puntos principales en forma breve y concisa;

3. enumera

4. haz pequeños los archivos de gráficas;

5. pon la fecha y actualiza el archivo;

6. provee enlaces para el e-mail;

7. haz aquellos enlaces que sean relevantes al propósito de la página;

8. evita el uso de demasiados iconos diferentes; y

9. usa material con derechos de autor sólo con permiso.

Carvin (1996) propone que en lugar de presentar información en un formato convencional, lineal, el estudiante puede usar Web como una herramienta de publicación para crear profundos "hyper-informes", proyectos de multimedios en línea con enlaces hacia numerosos subtópicos y conexiones en la red."

Ingredientes para un buen diseño

1. Economía en tiempo y espacio. La mayor fortaleza de WWW es la habilidad para navegar dentro del mismo documento y entre documentos. De aquí que muchos desarrolladores piensen que mientras más enlaces mejor. Sin embargo, demasiados enlaces producen el efecto contrario: ignorarlos mientras se pasa la página, sobre todo si se presentan dentro de un párrafo. Los hypermedios poseen un gran poder para accesar a la información y motivar a la investigación si se usan apropiadamente. Organiza la información en un formato comprensible: Usa párrafos cortos, enumera los tópicos y haz enlaces sólo en las ideas principales. No hagas muy largas las páginas de Web para evitar los rollos. "Es mejor tener muchas páginas cortas con pocos enlaces que pocas páginas largas con muchos enlaces" (Shotsberger, 1996).

2. Consistencia. Todas las páginas deben tener una apariencia similar a la "homepage". Párrafos y enumeraciones tendrán un formato común en todas las páginas. Cada página debe ser capaz de sustentarse sola como si fuera un documento de Web. Cada página debe tener un encabezamiento (en muchos casos una versión reducida del logo usado en la "homepage"), así como información sobre los contactos y la dirección de los lugares http. Para cada enlace se han de proveer las opciones de "Página siguiente", "Página anterior", "Menú principal" o "Homepage", de tal forma que el usuario pueda volver al lugar abandonado sin perder el hilo.

3. No malgastar el tiempo de los usuarios. Cualquiera puede publicar cualquier cosa en WWW. Hay que colocar en el lugar de Web aquellos materiales necesarios y con contenido real; evitar los inapropiados, redundantes y extraños.

Evitar errores

Evitar el error "URL Not Found" verificando periódicamente la supervivencia del recurso de otros "sites" a los que se enlazó. No abusar de los medios audiovisuales; tener en mente que el equipo que usan los usuarios no es el más avanzado ni el más rápido: uno se siente frustrado esperando que llegue el audio o el video que nunca llega. Menú

Herramientas para educadores

Cómo diseñar las páginas en Web

Internet provee muchos recursos que ayudan para diseñar páginas, entre ellos están:

http://info.med.yale.edu/caim/StyleManual_Top.HTML

http://www.sun.com/sun-on-net/www.sun.com.uidesign

http//www.w3-tech.com/crash

http//www.hotwired.com/webmonkey/teachingtool

http//www.cwru.edu/help/introHTML/toc.html

Cómo hacer exámenes en línea

www.motted.hawaii.edu

wwwtools.cityu.edu.hk/quiz.htm

Compañías que ceden espacio para home page personal:

www.angelfire.com

www.geocities.com

www.tripod.com

www.infoseek.com

Y muchas más. Para verlas todas busca:

www.freeindex.com/webspace/all.html

Hyperbiblioteca

Revistas: www.edoc.com/ejournal

Periódicos: www.barnews.com

Diccionarios, enciclopedias, revistas, periódicos: www.ipl.org

Biblioteca de Puerto Rico: http://menu.coqui.net/jalmeyda

Sitios educativos

www.mrtc.org/~uh/metrd/#links

Razonamiento lógico: www.sonoma.edu/cthink

www.sjsu.edu/depts/itl.

Ingeniería y computadora: www.eecs.wsu.edu

Exposiciones y otros temas: www.si.edu

Listado comprensivo de recursos externos: www.utexas.edu/world/instruction/index.html

Buscadores en inglés y español

www.800go.com

www.ozu.es/index.html

http://dale.virtualizar.com

Combinación de Web con otras tecnologías

Evaluación de los recursos de Internet

Wilkinson et al. (1997) se dieron a la tarea de evaluar los documentos de Web articulando y categorizando los indicadores de calidad. Crearon 125 preguntas en 11 categorías. Se recogen las categorías con aquellas preguntas que se consideran más importantes.

Criterio 1. Acceso y uso del sitio

1.1 ¿Qué individuo, grupo o asociación mantiene el sitio?

1.2 ¿Tarda la página mucho tiempo en aparecer?

1.3 ¿Se requier pago para tener acceso?

1.4 ¿Requiere una clave para accesar?

Criterio 2. Identificación y documentación del recurso

Aronson, L. (1994). HTML. manual of style. Emerville, CA: Ziff-Davis Press.

Carvin, A. (1996). The Web as publishing house: Or, how anyone with Internet access can become an educational pamphetter. Ed Web: Exploring technology an School Reform. Online]. Available: <http://edweb.cnidr.org:90/web.publisher.html>

Lemay, L. (1995). Teach yourself Web publishing with HTML in a week. Indianapolis, IN: Sams Publishing.

Maddux, C. D. & Johnson, D. L. (1997) The World Wide Web: History, cultural, end a manual for develpers of educational information-based Web sites. Educational Technology, 37(5) 5-12.

McKenzie (1995). Net profit in a post moderm world [Web document]: http://pacificrim.net~/mckenzie/homesweet.html

Shostsberger, P. G. (1996). Instructional Uses of the World Wide Web: Exemplars and Precautions. Eduacational Technology, 36(2) 47-54.

Stover, M. & Zink, S. D. (1996). Word Wide Web home page design: Patterns and anomalies of higher education library home pages. Reference Services Review, 24(3), 7-20.

Apéndice A. Sitios de Web con enlaces a páginas educativas

Apéndice B. Enlces de sitios que proveen guías para el diseño

Apéndice C. Sitios que proveen información sobre citas electrónicas

Guía según MLA:

http://www.cas.usf.edu/english/walker/mla.html

Estilo APA

http://www.beadsland.com/weapas/

Williams College Library Web

http://www.williams.edu:803/library/library.www/cite.html

Apéndice D. Herramientas de búsqueda en Internet Menú