En un comienzo el diseño de sitios web fue patrimonio exclusivo de programadores e

ingenieros en sistemas. Los programas de diseño web con interfaz gráfica, orientados a
usuarios que no sepan programar o no tengan una preparación en esto, permite hacerlo
más fácil.

Cuando nace Internet se buscaba algo que fuera fácil de usar, que no tuviera
demasiados requisitos de software y cuyos documentos fueran interpretados por
cualquier computadora, independientemente del sistema operativo. Como resultado de
este desarrollo tecnológico nació el lenguaje HTML (Hypertext Markup Language -
Lenguaje de marcación de hipertextos) y un protocolo de comunicación, el HTTP
(Hypertext Transfer Protocol - Protocolo de transferencia de hipertextos).

Lo que se transmite por Internet es esencialmente texto. Las imágenes se cargan sólo si
están “llamadas” por ese texto y no forman parte esencial del documento.

Los documentos HTML se pueden generar en el procesador de texto más rudimentario.

Al principio las páginas se creaban escribiendo el lenguaje en algún procesador de

textos, pero al pasar el tiempo se empezaron a desarrollar programas con interfaz
gráfica, en donde el usuario trabaja en forma visual y el programa se encarga de escribir
el código.

Cuando diseñamos una página web estamos creando un espacio común entre los
visitantes.

El mejor sitio web no sirve si el usuario no puede interactuar fácilmente

Usabilidad es la efectividad, eficiencia y satisfacción que puede alcanzar un grupo

determinado de usuarios, en un específico conjunto de tareas y en un entorno
particular.

Reglas de usabilidad

Previsibilidad: Un sitio web debe funcionar bien y producir los resultados esperados. No
deben existir enlaces rotos ni archivos de imagen inexistentes.

Uso de colores: Han de utilizarse con el cuidado de no dificultar la visualización a

usuarios con problemas de distinción de colores. Un 15 % de las personas tiene
problemas de este tipo

Metáforas: El uso de acertadas metáforas visuales puede ayudar en la comprensión de

las funciones del sitio y su navegación. Estas tareas pueden verse dificultadas por la
elección inadecuada de íconos y otros elementos gráficos.

Legibilidad: El color de los textos debe contrastar con el del fondo, y el tamaño de la
tipografía debe ser lo suficientemente grande.
Interfaz visible: Se deben evitar elementos invisibles de navegación que deban de ser
“adivinados” por los usuarios.

Optimizar el tiempo de espera: En sitios de descarga lenta es necesario prever algún tipo
de actividad o comunicación con el usuario mientras aquélla se completa. Además es
necesario que el usuario esté informado del tiempo que falta para que la descarga
termine.

Amigabilidad: Un sitio web no debe tratar al usuario de manera hostil. Si existe la

posibilidad que el usuario cometa un error, debe preverse la solución. Nunca emitir
avisos que sólo informen del error o culpen al usuario.

Autonomía: Los usuarios deben sentir que controlan su visita al sitio web y deben
conocer su ubicación en el mismo en todo momento.

Eficiencia del usuario: La navegación por el sitio no debe exigir habilidades especiales
de los usuarios. Evitar el uso comandos invisibles y otros recursos que necesiten de
información previa.

Aprendizaje: Los sitios web deben requerir el mínimo esfuerzo de aprendizaje y poder
ser utilizados desde el primer momento.

Productividad: Los usuarios deben alcanzar los objetivos buscados con el mínimo de
esfuerzo.

No a la sobrecarga de información: Cuando un usuario visita un sitio web y no sabe

donde comenzar a leer, existe sobrecarga de información.

Materiales que componen una web

Los elementos usados en el diseño de una página Web son textos e imágenes. También
podemos las animaciones realizadas en Macromedia Flash o a gifs animados.

Textos

Los textos pueden ser escritos dentro del mismo programa en que armamos la
página o ser importado de un procesador de texto por el método de copiar y pegar. Ya
veremos que el lenguaje HTML tiene tags que sirven para dar “formato” al texto
(tipografía, tamaño, color, etc.). Estos tags propios del HTML están desaconsejados.
Los Estilos en cascada (CSS) dan resultados más previsibles y permiten un rico
despliegue de diseño.

Imágenes

Las imágenes generalmente se crean o editan en programas como Adobe Photoshop

o Macromedia Fireworks. Se las usa para ilustraciones, fondos o botones. La totalidad
de los navegadores soporta dos formatos de imagen: GIF y JPG. Otros formatos, como
el PNG, generado por Fireworks no son soportados por las versiones antiguas de los
navegadores.

GIF
Este formato fue desarrollado en los comienzos de Internet por Compuserve para
compartir imágenes entre diferentes plataformas. Es un formato de mapa de píxeles, es
decir, describe la imagen a través de pequeños cuadrados de ese nombre, cada uno con
su propia información de color.
El formato GIF permite describir imágenes con una profundidad de color de uno
hasta ocho bits por píxel. Un bit es la medida de información más pequeña, es un
número binario que puede valer cero o uno. En el caso que el archivo GIF sea un bit
por píxel tendremos una imagen de dos colores y de muy poco peso. Al aumentar la
cantidad de bits por píxel aumenta la cantidad de colores, y también el peso de la
imagen. Con ocho bits por píxel tenemos una imagen de 256 colores. En la figura 10
vemos un mismo archivo guardado en tres variantes de este formato.
El GIF es ideal para imágenes de colores planos: logotipos o viñetas. Es bastante
liviano y permite la posibilidad de elegir la cantidad de colores. Otra de sus ventajas es
que admite la existencia de zonas transparentes en la imagen.

JPG

Este formato fue desarrollado por el Joint Photographics Experts Group para
compartir imágenes fotográficas entre diferentes plataformas. A diferencia del GIF, el
formato JPG puede representar millones de colores (tiene una profundidad de color de
24 bits por píxel). Es un formato de compresión de imágenes de relación variable: a
menor peso menor calidad de la imagen.
Es el formato adecuado cuando se trata de fotografías o imágenes con texturas o
degradados suaves. En la figura 11 vemos la diferencia entre este formato y el GIF.
Aquí se ilustra la conveniencia de usar JPG para fotografías y GIF para gráficos de
colores planos.

Gifs animados

Otra de las ventajas del formato GIF es la de poder describir animaciones: un

archivo que contiene diferentes dibujos que se presentan secuencialmente. Existen
muchos programas que crean GIFs animados. Estos archivos se pueden usar en tamaños
pequeños, ya que son algo pesados y hacen lenta la carga de la página.

Películas de Flash

Las animaciones en formato SWF, creadas por Macromedia Flash, están

compuestas por vectores, aunque pueden incluir imágenes de píxeles. Estas animaciones
sirven para hacer botones, banners, juegos, presentaciones o sitios web completos. Dado
la importancia y aceptación de este programa hace que en este curso lo estudiemos en
forma exhaustiva.

Dreamweaver

Barra objetos

Paleta flotante

Propiedades