1 Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001

2 Hay que tener en cuenta… Apariencia: como la ven los lectores? Contenido: es interesante lo que dice? Navegabilidad: es fácil recorrerla?

3 Hay que tener en cuenta… Colores: son atractivos pero legibles? Imágenes: son atractivas pero “bajan” rápido? Estructura de directorios: me dice algo?

4

5 Apariencia Que tan llamativas son nuestras páginas? Cual es la primera impresión del Usuari@?

6

7 Contenido: consejos Evitar: "Pique o empuje aquí" "Volver a la página principal" Jerga innecesaria y coloquialismos Incluir: Forma de contactar Una manera de salir!

8 ACME Bienvenida a ACME Volver a la página principal... Pique aquí para leer las últimas noticias Pique aquí para recibir una lista de productos. Una lista de nuestro personal está disponible.

9 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")?

10 Contenido: chequee que... Sus páginas no tengan errores de: Tipo: Sintáxis: Bold Italic text Que estén de acuerdo a los estándares

11

12 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!

13 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/

14 Colores Considere qué: Fácilmente pueden mejorar la apariencia del sitio en Internet Si modifica un elemento debe modificarlos todos...

15 Colores Considere 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?

16 Colores Imagen corporativa: Logo Qué es? Quienes la conforman? Que servicios presta? A quienes?

17 El Texto: es legible? Para grandes bloques de texto: No utilize MAYÚSCULAS No centre el texto No justifique a la derecha Use subtítulos

18 El Texto: es legible? Al decidir los colores: Elija colores que hagan alto contraste (fondo y texto) No use imágenes de fondo brillantes

19 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:

20 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

21 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

22 Que programas usar? Paint Shop Pro para gráficas y dibujos http://www.jasc.com Gifbuilder, Animagic o GifConstructionSet para animaciones simples http://www.rtlsoft.com/animagic/ Photoshop para retocar fotografías

23 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

24 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

25 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 server.map rect rect.html 0,0,100,100 default error.html

26 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.

27 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!

28

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

30 Algunas ideas... u Incluya puntos de contacto u Use subtítulos u Use un diseño gráfico agradable y sencillo… la gente volverá a consultar su servicio! u Use ideas prestadas de otras páginas u Use iconos y palabras al mismo tiempo u Sea coherente y consistente en lo que dice y cómo lo presenta!

31 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)

32 Malas ideas... u Usar el rótulo BLINK u Decir que algo “está en construcción” u No tener textos alternativos para las imágenes (ALT=Mujeres reunidas - Foto)

33 Malas Ideas... u Gráficos, dibujos y animaciones innecesarias u Tener la necesidad de “bajar” un programa para poder ver un contenido: video, sonido...

34 Malas ideas... u Imágenes muy grandes como fondo u Olvidar incluir correos electrónicos para recibir retroalimentación u Usar o no marcos (frames) es controversial? u Tener información desactualizada u URLs que no funcionan