PDF de programación - Manual de Diseño y Estilo Web

Universidad Nacional Experimental del Táchira

Centro de Estudios en Teleinformática (CETI)

Laboratorio de Comunicación Multimedia (L@bcomm)

Manual de Diseño y Estilo Web

V.1.0

Revisión y Adaptación: Emir Medina

Traducción: Carlos Maldonado

Revisión Final: Ing. José Lopez

Fuente: Center for Advanced Instructional Media

Yale University.

2

Filosofía

Introducción

Lo que éste manual no es
Una nota acerca de los navegadores

Propósito de su sitio

¿Cuáles son sus objetivos fundamentales?
Conozca a su audiencia
Cibernautas
Usuarios ocasionales y novatos
Usuarios frecuentes y expertos
Usuarios internacionales

Estrategias de diseño

Cibernautas
Entrenamiento
Enseñando
Educación
Referencia

Diseño de interfaz

3

Introducción

Paginas web vs. Diseño de documentos convencionales
Antecedentes del diseño impreso
Hacer sus páginas independientes
Quien
Que
Cuando
Donde

Diseño básico de la interfaz

Diseño centrado en el usuario
Incluir ayudas para una navegación clara
Páginas ciegas

Acceso a la información

Brindarle acceso directo a los usuarios
Ancho de banda e interacción
Simplicidad y consistencia
Estabilidad de diseño
Retroalimentación y diálogo
Diseño para los incapacitados

Navegación

Provea contexto o pierda al lector

Enlaces y navegación

“Regresar” e ir a la página previa
Su primer sitio web

4

Porque las barras de botones son útiles

Enlaces relativos vs. Enlaces arreglados

Gráficos para paginas web

Introducción

Gráficos y módems
Gráficos e intranets

Modos de color
Pixeles y color
Profundidad de bits y archivos gráficos de color

Formatos de los archivos de gráficos

Compresión de los archivos GIF

Archivos GIF entrelazados

Archivos GIF transparentes

Gráficos JPEG

Guarde sus imágenes no comprimidas!
Artificios de las imágenes JPEG

Resumen, Formatos de archivo

Usos para los archivos GIF y JPEG
Ventajas de los archivos GIF
Ventajas de los JPEG

5

Ilustraciones

Procesando ilustraciones complejas o fotografías
Diagramas para la pantalla

Optimizando los gráficos, I

Color y los gráficos GIF
Paletas personalizadas y paletas de color del sistema

Optimizando los gráficos, II
Otra opción y una mejor

Alto y ancho a través de etiquetas

Colores de fondo

Cambiando los colores de los elementos de la página
Colores de fondo y legibilidad
Patrones de fondo Netscape

Imágenes "mapa"

Imágenes mapa servidor vs. Imágenes mapa cliente

Eficiencia del espacio e impacto gráfico
Flexibilidad gráfica

6

Filosofía

Introducción

Este manual de estilo se ha creado como resultado de nuestro desarrollo

de proyectos World Wide Web (Web). El mismo, refleja nuestros intentos de

aplicar algunas de las lecciones que hemos aprendido a lo largo de mas de 4

años, en el diseño de software multimedia, interfaces gráficas. Hay muy buenos

sitios web y libros que enfatizan el HTML (Lenguaje de Marcado Hipertexto), y

otros que enfatizan el diseño gráfico Web orientado artística o comercialmente. De

cualquier manera, pocas son las fuentes de documentación existentes que han

intentado alcanzar un diseño de sitios y páginas web, como un reto que combine la

edición tradicional, con el diseño gráfico, el diseño de interfaz, diseño de

información y las habilidades técnicas requeridas para optimizar el código HTML,

gráficos y texto en las páginas web.

Lo que éste manual no es

Nuestro acercamiento al lenguaje HTML y el generalizado problema del

diseño de información para el sistema World Wide Web, no esta basado en la

filosofía que maneja el desarrollo de información estructurada a través de

herramientas de publicación, tal como el lenguaje pariente del HTML, SGML

(Standard Generalized Markup Language). Las recomendaciones proporcionadas

aquí están dirigidas a los intereses prácticos de inclinar y adaptar una herramienta

de edición y publicación relativamente primitiva (HTML) a propósitos para los

cuales nunca se pensó que se utilizara (diseño de páginas gráficas). Si está

interesado en preguntas más amplias sobre publicación en sistemas altamente

estructurados independientes del software navegador (browser), sistema operativo

o restricciones tipográficas, usted debería empezar por consultar en el sitio del

Consorcio del World Wide Web (W3C), el cual tiene una gran cantidad de

referencias técnicas e históricas relacionadas, con el desarrollo de texto

estructurado y material histórico sobre el WWW.

7

Una nota acerca de los navegadores

La mayoría de los consejos de diseño y la información técnica contenida

aquí, plantean el cómo optimizar los gráficos en las paginas web y está adaptado a

las versiones recientes (3.0 o superior) de los navegadores Netscape Navigator y

Microsoft Internet Explorer. Existe poca información aquí que beneficie a los

usuarios de navegadores modo texto, ya que el enfoque principal de este manual

está en el diseño de páginas web gráficas.

8

Propósito de su sitio

El primer paso para diseñar un sitio web es asegurarse de que tiene un

conjunto de metas definidas, sabiendo lo que quiere lograr con su sitio web. Sin

tener un claro establecimiento de los propósitos y objetivos, el proyecto comenzará

a vagar fuera del camino y hundirse, o puede llegar al punto de reflejar escasos

resultados.

La planificación cuidadosa y un claro sentido de los objetivos, son las

claves para el éxito al crear un sitio web, particularmente si usted trabajará como

parte de un equipo para construir el sitio. Antes de comenzar a diseñar su propio

sitio usted debería:

Identificar el público al que desea dirigirse

§
§ Manifestar sus propósitos de manera explícita
§ Saber sus principales objetivos
§ Tener un conciso perfil de la información que su sitio va a tener

¿Cuáles son sus objetivos fundamentales?

Una concreta y corta manifestación de sus objetivos deberían conformar

las bases del diseño de su sitio. De allí se debe partir para expandir las metas

impuestas en los objetivos, lo cual también le servirá como herramienta para

analizar el éxito de su sitio web. Por ejemplo:

“Esperamos que el sitio web de la asociación cumpla estas metas en el

término de los próximos 12 meses:

El sitio web reducirá la demanda de información de rutina en la oficina

principal, tal como; actividades de la asociación, fechas tope, cuotas o

deudas pendientes e información sobre reuniones de la asociación.

Esperamos que el sitio web también traiga consigo el ahorro de una suma

significativa en envío y procesamiento de correspondencia de rutina entre
los miembros de la asociación. El sitio web también albergará todo el

9

contenido que actualmente se publica en la revista trimestral de la

asociación, pero también contendrá información más actualizada mientras se

van organizando eventos. Después de un año se encuestará a los miembros

de la asociación en temas como el éxito de la revista en el sitio web, y

explorar las posibilidades de cerrar la publicación de la revista en papel.”

La descripción de los objetivos debería continuar planteando un poco más

las metas financieras específicas y otras metas organizacionales que el sitio web

debe cumplir.

Construir un sitio web es generalmente un proceso dinámico, y no un

proyecto limitado con información estática. El manejo editorial a largo plazo y el

mantenimiento técnico debe ser considerado en sus planes para el sitio. Sin esta

gran perspectiva, su publicación electrónica sufrirá el mismo destino que muchas

otras, un comienzo entusiasta, pero sin logros duraderos.

Conozca a su audiencia

El próximo paso en el proceso de diseño es identificar los usuarios

potenciales que utilizarán su sitio web, de modo que pueda estructurarlo en

función de sus expectativas y necesidades. El conocimiento, antecedente, intereses

y las necesidades de los usuarios que varían desde principiantes que requieren una

presentación estructurada cuidadosamente, hasta los usuarios avanzados que

pueden irritarse ante cualquier cosa que parezca manipularlos o atrasarlos en su

búsqueda de información, son elementos a considerar. Un sistema bien diseñado

debe ser capaz de adaptarse a un rango de habilidades de usuario e intereses. Por

ejemplo, si la meta de su página web es manejar información interna de la

empresa, documentos de recursos humanos u otra información que suele

publicarse en manuales en papel, su sitio será utilizado por mucha gente que lo

visitará varias veces al día, y también por gente que lo consulte sólo de manera

ocasional.

10

Cibernautas

Las paginas web dirigidas a los navegantes deben ser análogas con las

portadas de las revistas. El objetivo es incitar al navegante casual con fortaleza de

gráficos y audaces planteamientos de contenido. Todos los enlaces en su página

web deben apuntar hacia las páginas internas del sitio. Proveer una clara y concisa

presentación de lo que hay en el sitio puede ser de interés para el lector.

Usuarios ocasionales y novatos

Estos usuarios dependen de una clara estructura, fácil acceso y los

comentarios que ilustran cómo está organizada la información en su sitio web. Los

novatos tienden a intimidarse por los complejos menús de texto y pueden sentirse

inseguros a navegar en un sitio que no es atractivo gráficamente ni está

estructurado claramente. De acuerdo Jakob Nielsen de Sun Microsystems, menos

del 10% de los lectores web alguna vez miran la parte inferior de una página web.

Usuarios poco frecuentes de un sitio generalmente aprovechan las páginas de

resumen, mapas jerárqu