Diseñando la página web de la asignatura

Indice de la página

• Introducción: Utilidad
• Tres elementos del diseño web
  1. Diseño de contenidos
  2. Diseño del sitio
  3. Diseño de las páginas
• Notas de diseño
  1. Frames (marcos)
  2. Uso de Tablas
  • CSS
  3. Applets de Java, Javascripts
  4. Gráficos con contenidos
  5. Colores

Introducción: Utilidad

Luego que ha definido sus objetivos pedagógicos para el sitio y ya sabe que componente serán incluidos, tales como notas de clase, programa de la asignatura, calendario, etc., es el momento de pensar acerca de cómo diseñar su sitio para que sea a la vez funcional y atractivo.

Una página web de una asignatura es un sitio de información por sobre cualquier otra consideración, y debe ser realizado con la idea de facilitar a los estudiantes la tarea de encontrar la información que necesitan sin perder demasiado tiempo en la búsqueda.

Esto que parece sencillo puede ser un desafío importante cuando el sitio se torna complejo y con muchos niveles, pero el tiempo invertido en la planificación justificará plenamente el esfuerzo.

El principio básico de diseño a tener en mente es la simplicidad. Recuerde que los contenidos de su página web son lo más importante. Es fácil dejarse arrastrar por la tentación de usar tecnología de punta en el diseño con animaciones y grandes imágenes. Esto puede ser apropiado para sitios comerciales, pero resultará contraproducente en sitios informativos.

Para algunas ideas acerca de lo que NO se debe hacer, visite estos sitios:

Tres elementos del diseño web

Se puede dividir el diseño de su sitio en tres elementos: diseño del contenido, el cual es la información que sus páginas intentan brindar, diseño del sitio, lo que implica como sus páginas estan conectadas entre si y con algunas otras, y diseño de las páginas, lo cual significa la forma en que las mismas se verán.

1. Diseño del contenido

El contenido es lo que buscan los usuarios. Cualquier otra cosa es solo el contexto. Según Jakob Nielsen en su libro Designing Web Usability, las tres guías principales para escribir una web son.

• a. Ser suscinto
• b. Escribir en forma sencilla. Usar párrafos cortos, sub títulos y listas de viñetas.
• c. Usar enlaces de hipertexto para ampliar la información en múltiples páginas.

2. Diseño del sitio

Planifiquela cantidad de páginas que nuestro sitio necesita y como se enlazarán entre ellas. ¿Tendrán enlaces a la página principal todas ellas?. Esto es bastante recomendable si su sitio es pequeño, pero algunos editores de HTML, tales como Dreamweaver, proveen herramientas que nos ayudan gráficamente a visualizar la estructura de su sitio, lo cual puede ser muy útil para grandes sitios.

Una importante ayuda a los navegantes es mantenerlos informados acerca de donde están en el sitio y del camino que han recorrido. Las barras de navegación en los topes superior e inferior de las páginas pueden ser muy útiles en este sentido.

3. Diseño de las páginas

¿Cómo se verán sus páginas?. Los gráficos pueden agregar interés, pero el contenido debe abarcar la mayoría del espacio de la página. Algunos consejos: ·

• Mantenga el diseño y los elementos de navegación en forma consistente de página en página. ·
• Trate de facilitar la lectura rápida de los usuarios manteniendo las páginas cortas y dividiendo el texto con múltiples niveles de subtítulos. ·
• Mantenga el tiempo de carga de la página bajo (minimice los grandes gráficos) ·
• Coloque la fecha de la última actualización y provea información de contacto en cada página. ·
• Genere los links en forma descriptiva (evitar el "haga click aquí") ·
• Pruebe su diseño en varios navegadores y plataformas distintas. ·
• Pruebe su diseño para monitores de pequeño tamaño. ·
• Pruebe como se imprimen las páginas. ·
• Genere los títulos de página en forma descriptiva.

Otros recursos

Notas de diseño

Frames (Marcos)

Los marcos (o frames) nunca fueron parte del lenguaje HTML original porque no respetan el concepto original de que una página web debbe ser una unidad de información con una dirección única. En términos generales, el uso de frames debe ser evitado por una serie de razones:

1. Pueden interferir en la navegación.
2. Algunos navegadores no pueden imprimir las páginas en los marcos correctamente.
3. Suele ser difícil conseguir que los frames funcionen correctamente.
4. Los buscadores tienen problemas con los frames.
5. Algunos navegadores no pueden agregar en forma correcta a su lista de bookmarks las páginas con frames.

Si, a pesar de todas esta advertencias decide usar frames, se debería usar el elemento "noframes" para prevenir a los usuarios y permitirles la opción de ver la información sin frames.

Uso de tablas

El lenguaje HTML fue escrito para presentar la estructura de documentos técnicos y nunca tuvo la intención de generar estructuras gráficas. Sin embargo luego los diseñadores de páginas web se las ingeniaron para usar las pocas herramientas del HTML para conseguir que sus páginas aparezcan como ellos querían.

El abuso más común fue (y aún lo es) el uso de tablas para generar complejos diseños de páginas. Se supone que las tablas deben contener datos en forma tabulada y eso es lo que los navegadores esperan mostrar.

Cuando una tabla contiene complicadas estructuras muchos navegadores no gráficos como Lynx o algunos lectores de pantallas para ciegos, leerán la tabla como una sucesión de filas en lugar de columnas generando una serie de datos sin sentido.

CSS

La solución al problema de cómo controlar la estructura de las páginas web está en el uso de Cascading Style Sheets (Hojas de Estilo en Cascada). CSS es un lenguaje de diseño diseñado para ser usado en conjunto con HTML para controlar la estructura de la página.

Con CSS se pueden definir la ubicación de elementos de contenido con gran precisión, utilizando medidas absolutas o relativas. CSS También ayuda a mantener la consistencia del diseño a través de un sitio utilizando la misma hoja de estilos para todas las páginas.

CSS es soportado en las últimas versiones de Netscape e Internet Explorer, pero para estar seguro es mejor probar con ambos navegadores y en múltiples plataformas si es posible.

Java applets, Javascripts y Gráficos que muestran contenidos.

¿Qué tienen en cmún estos tres elementos?. Que son características de los navegadores que los usuarios pueden, y de hecho lo hacen, desactivar. Algunos usuarios acostumbran a desactivar los gráficos y Java en sus navegadores para acelerar la navegación, sobre todo si están trabajando con un ancho de banda reducido (por ejemplo a través de modem).

También muchos desactivan la posibilidad de usar Javascript para proteger a sus computadoras por posibles fallas en la seguridad. Si usa Java o Javasccript en sus páginas para proveer contenidos que son necesarios, debe estar seguro que sus páginas no pierdan el sentido sin estas características o en todo caso proveer formas alternativas de acceder a dicho contenido.

Un ejemplo de gráfico que muestra contenido puede ser una imagen de un botón con una descripción del links en él. A menos que se use el atributo ALT agregado a la etiqueta "IMG", la funcionalidad del link se perderá para los usuarios que tienen desactivados los gráficos o que usan navegadores no-gráficos.

Colores

No hay que perder de vista que Ud. quiere que sus páginas se lean fácilmente. El experimentar con combinaciones poco usuales de colores puede refucir la legibilidad para los usuarios y puede convertir a sus páginas en ilegibles a la gente con problemas visuales.

Como ayuda puede ver la página de Lighthouse International sobre Contrastes de color efectivos.