diseñando páginas web colnodo ariel barbosa & sylvia cadena 02.2001
TRANSCRIPT
![Page 1: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/1.jpg)
Diseñando Páginas Web
ColnodoAriel Barbosa & Sylvia Cadena
02.2001
![Page 2: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/2.jpg)
Hay que tener en cuenta…
• Apariencia: como la ven los lectores?
• Contenido: es interesante lo que dice?
• Navegabilidad: es fácil recorrerla?
![Page 3: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/3.jpg)
Hay que tener en cuenta…
•Colores: son atractivos pero legibles?•Imágenes: son atractivas pero “bajan” rápido? •Estructura de directorios: me dice algo?
![Page 4: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/4.jpg)
![Page 5: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/5.jpg)
Apariencia
• Que tan llamativas son nuestras páginas?
• Cual es la primera impresión del Usuari@?
![Page 6: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/6.jpg)
![Page 7: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/7.jpg)
Contenido: consejos
Evitar:"Pique o empuje aquí""Volver a la página principal"Jerga innecesaria y coloquialismos
Incluir:Forma de contactarUna manera de salir!
![Page 8: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/8.jpg)
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.
![Page 9: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/9.jpg)
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")?
![Page 10: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/10.jpg)
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
![Page 11: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/11.jpg)
![Page 12: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/12.jpg)
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!
![Page 13: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/13.jpg)
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/
![Page 14: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/14.jpg)
ColoresConsidere qué:• Fácilmente pueden mejorar la
apariencia del sitio en Internet• Si modifica un elemento debe
modificarlos todos...
![Page 15: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/15.jpg)
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?
![Page 16: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/16.jpg)
ColoresImagen
corporativa:• Logo• Qué es? • Quienes la
conforman?• Que servicios
presta?• A quienes?
![Page 17: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/17.jpg)
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
![Page 18: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/18.jpg)
El Texto: es legible?Al decidir los
colores:• Elija colores que
hagan alto contraste (fondo y texto)
• No use imágenes de fondo brillantes
![Page 19: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/19.jpg)
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:
![Page 20: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/20.jpg)
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
![Page 21: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/21.jpg)
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
![Page 22: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/22.jpg)
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
![Page 23: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/23.jpg)
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
![Page 24: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/24.jpg)
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">
![Page 25: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/25.jpg)
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
![Page 26: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/26.jpg)
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.
![Page 27: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/27.jpg)
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!
![Page 28: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/28.jpg)
![Page 29: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/29.jpg)
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?
![Page 30: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/30.jpg)
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!
![Page 31: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/31.jpg)
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)
![Page 32: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/32.jpg)
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)
![Page 33: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/33.jpg)
Malas Ideas...
Gráficos, dibujos y animaciones innecesariasTener la necesidad de “bajar” un programa para poder ver un contenido: video, sonido...
![Page 34: Diseñando Páginas Web Colnodo Ariel Barbosa & Sylvia Cadena 02.2001](https://reader033.vdocuments.co/reader033/viewer/2022051820/553a17ec5503469c7e8b4a52/html5/thumbnails/34.jpg)
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