Diseñando Páginas Web

ColnodoAriel Barbosa & Sylvia Cadena

02.2001

Hay que tener en cuenta…

• Apariencia: como la ven los lectores?

• Contenido: es interesante lo que dice?

• Navegabilidad: es fácil recorrerla?

Hay que tener en cuenta…

•Colores: son atractivos pero legibles?•Imágenes: son atractivas pero “bajan” rápido? •Estructura de directorios: me dice algo?

Apariencia

• Que tan llamativas son nuestras páginas?

• Cual es la primera impresión del Usuari@?

Contenido: consejos

Evitar:"Pique o empuje aquí""Volver a la página principal"Jerga innecesaria y coloquialismos

Incluir:Forma de contactarUna manera de salir!

ACME Bienvenida a ACME

Volver a la página principal...

Pique aquí para leer las últimas noticiasPique aquí para recibir una lista de productos.Una lista de nuestro personal está disponible.

Contenido

Pueden verse correctamente con todos los navegadores?

Las imágenes tienen alternativa (ALT)?

Hay una alternativa para ver las páginas sin marcos ("noframes")?

Contenido: chequee que...

• Sus páginas no tengan errores de:Tipo: <\H1>Sintáxis: <B>Bold<I>Italic</B>text</I>

• Que estén de acuerdo a los estándares

Navegabilidad

Piense en l@s demás...• Ofrezca un Motor de Búsqueda local• Use Barras de BotonesPiense si vale

la pena usar o no marcos (frames)• Piense cuidadosamente en la

estructura del sitio en Internet antes de empezar a escribir… y a trabajar!

Navegabilidad• Hay una estructura

de directorios evidente y lógica? esto facilitará las tareas de mantemiento y las búsquedas...

http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Page_Design_and_Layout/

ColoresConsidere qué:• Fácilmente pueden mejorar la

apariencia del sitio en Internet• Si modifica un elemento debe

modificarlos todos...

ColoresConsidere qué:• Hay personas que no pueden ver los

colores, sufren de daltonismo o de migrañas!

• No tod@s podrán ver sus efectos debido a la configuración de su navegador o a la resolución de su monitor

• Alguien va a imprimirlo… se verá bien?

ColoresImagen

corporativa:• Logo• Qué es? • Quienes la

conforman?• Que servicios

presta?• A quienes?

El Texto: es legible?

Para grandes bloques de texto:• No utilize MAYÚSCULAS• No centre el texto <CENTRE>• No justifique a la derecha• Use subtítulos

El Texto: es legible?Al decidir los

colores:• Elija colores que

hagan alto contraste (fondo y texto)

• No use imágenes de fondo brillantes

Las imágenes: cómo producirlas?

• Ajuste el tamaño de las fotografías• Sálvelas como 72dpi• Comprímalas!• Use paletas de 256 colores

(.gif .jpg, png)• Chequee regularmente:

GIF Graphic Interchange Format

• Acepta 356 colores• Sirve para gráficos, animaciones,

dibujos, iconos. También para fotografías...

• Usa gif89a que genera superficies transparentes y no gif87

• Da muy buena compresión• Permite interrelacionar: mayor eficiencia

al “bajar” la información

JPEG - Joint Photographic Export Group

• Acepta millones de colores• Compresión pobre• No es bueno para dibujos lineales o

bloques de color• Es excelente su resolución para

fotografías• Es intercambiable en la red: PNG -

Portable Network Graphic

Que programas usar?

• Paint Shop Pro para gráficas y dibujoshttp://www.jasc.com

• Gifbuilder, Animagic o GifConstructionSet para animaciones simpleshttp://www.rtlsoft.com/animagic/

• Photoshop para retocar fotografías

Mapas: Imágenes activas

• Procesados como scripts de CGI dentro del servidor

• Procesadas por el navegador del Usuari@, pero no todos aceptan esta opción

Por el navegador del Usuari@• Coordenadas para activar la imagen

• El rótulo IMG apunta al USEMAP• Fáciles de hacer y usar. No funcionan en

todos los navegadores

<MAP NAME="buttonbar">

<AREA SHAPE="RECT" COORDS="0,0,100,100" HREF="top.html">

<AREA SHAPE="RECT" COORDS="0,100,200,200" HREF="middle.html">

<AREA SHAPE="RECT" COORDS="0,200,300,300" HREF="bottom.html">

<AREA SHAPE="RECT" COORDS="0,0,159,59" NOHREF></MAP>

<IMG SRC="http://www.netskills.ac.uk/images/campus.gif" USE

MAP="#buttonbar">

Por el Servidor• Envían las coordenadas de cada pulsación del

mouse a un programa CGI en el servidor y un archivo independiente contiene las coordenadas server.map

<A HREF="server.map"><IMG SRC="http://..../image.gif" ISMAP></A>

server.map

rect rect.html 0,0,100,100

default error.html

Mapas en el Servidor

• Ya que las coordenadas son procesadas por un programa en el servidor se genera tráfico

• La sintáxis es específica para cada servidor. Los ejemplos anteriores pertenecen a un servidor Netscape.

Programas

• MapEdit ayuda en la creación de las coordenadas para activar mapas

ftp://src.doc.ic.ac.uk/packages/WWW/mapedit/

• Hay alternativas insertas en procesadores HTML: WebEdit!

Luego… a probar! Cómo lo vería alguien SIN imágenes? Cómo se vería en OTROS navegadores? Corre bien bajo otras plataformas? Como se ve la resolución a 256 colores? Ortografía!!! y gramática… Cuanto demora en “bajar” por modem? Es fácil de navegar a través de ella? Hay información de contacto en cada

página?

Algunas ideas... Incluya puntos de contacto Use subtítulos Use un diseño gráfico agradable y

sencillo… la gente volverá a consultar su servicio!

Use ideas prestadas de otras páginas Use iconos y palabras al mismo tiempo Sea coherente y consistente en lo que dice y

cómo lo presenta!

Algunas ideas...

• Use el mismo tipo de letra y estilo de escritura (edición)

• Recuerde que los navegadores tienen orientación de “paisaje”

• Tenga en cuenta que el tamaño del monitor y de la ventana pueden variar de un Usuari@ a otr@

• Las rejillas guía son de gran ayuda: use tablas y marcos (frames)

Malas ideas...

Usar el rótulo BLINK Decir que algo “está en

construcción” No tener textos alternativos para las

imágenes (ALT=Mujeres reunidas - Foto)

Malas Ideas...

Gráficos, dibujos y animaciones innecesariasTener la necesidad de “bajar” un programa para poder ver un contenido: video, sonido...

Malas ideas... Imágenes muy grandes como

fondo Olvidar incluir correos electrónicos

para recibir retroalimentación Usar o no marcos (frames) es

controversial? Tener información desactualizada URLs que no funcionan