Diseño de un sitio WEB

El diseño de un sitio web

Ya tienes elegido el contenido y la estructura de tu sitio. Ahora debes elegir como mezclar el texto y las imágenes de tu sitio para que sea atractivo. Llega el momento de diseñar las páginas. El primer paso es darse un paseo por internet y visitar fundamentalmente sitios con contenidos similares a los nuestros. No se trata, por supuesto, de copiar diseños web sino de sacar una idea de lo que podemos hacer, de como quedan las combinaciones de colores, del uso de imágenes, de tipografías, etc. Pero nunca olvides una cosa: el diseño es únicamente un envoltorio para presenar el contenido, que a fin de cuenta es lo que al final importa. Verás multitud de páginas con un diseño sumamente atractivo pero que luego no dicen casi nada. La palabra mágica es equilibrio.
Tambien encontrarás páginas recargadas de imágenes y archivos flash muy bonitas, pero que tardan minutos en mostrarse en el explorador si el usuario no tiene una conexión ultrarápida. Una página que tarde más de 15 segundos en cargarse no será muy vista, el visitante se irá a otro sitio más rápido.
El texto en las páginas
Leer en una pantalla de ordenador no es demasiado cómodo ni recomendable para nuestros ojos. ¿Entonces si necesitamos poner un texto largo que hacemos? De entrada procura repartirlo en páginas con cierta coherencia. El periódico te servirá de ejemplo, los temas están agrupados por secciones: deportes, espectáculos, actualidad ... En la web las secciones podrían ser páginas o grupos de páginas. Observa que el texto que estás leyendo está distribuido en diferentes páginas web. Pero si aún así tienes mucho texto procura trocearlo con elementos que rompan la continuidad, elementos que pueden ser simples líneas o pequeños gráficos que tengan relación con lo escrito. Si aún así queda mucha lectura en las páginas plantéate poner una versión pdf (para el visor de adobe) o un archivo de texto descargable por el visitante. Y recuerda: párrafos cortos donde destaque claramente la idea que quieras transmitir.

Las imágenes

Que duda cabe de que cualqueir página web va a contener imágenes y otros componentes multimedia como animaciones flash o sonidos. Dicen que una imagen vale más que mil palabras, pero en la web habría que añadir: y puede ocupar diez veces lo que ocupan esas mil palabras. Las imágenes dan peso a las páginas y por tanto las enlentecen, usarlas equilibradamente y con moderación es la regla. Usar imágenes como simples adornos debe ser la excepción. Los exploradores soportan varios tipos de imágenes y es conveniente conocer las ventajas e inconvenientes de cada formato para que las imágnes en nuestro sitio rindan al máximo.

ImÁgenes en la web

Bien sea para ilustrar la información contenida en nuestras páginas o para integrar un largo texto o, por que no, por cuestiones estéticas, es prácticamente imposible evitar colocar alguna que otra imagen en nuestras páginas. Al emplear las imágenes debemos guiarnos por unas cuantas reglas básicas:
Procurar que las imágenes sirvan para algo, que den información. Esta es una de las razones por las que debemos usar los atributos ALT.
No pasarnos. La página no debe pesar demasiado. Un visitante que ve como la página tarda en cargarse más de 15 o 20 seg lo más probable es que se vaya y, lo que es peor, que no vuelva.
Procurar un equilibrio entre tamaño del archivo de imagen y calidad de ésta. A veces una imagen muy grande requiere una compresión tal que al final tenemos una calidad pésima. En estos casos debemos plantearnos el tipo de imagen a usar.

Tipos de imágenes

Fíjate en las imágenes mostradas en tu monitor. Estas imágenes están formadas por unos puntos muy pequeños llamados pixels. Si tu monitor fuera de aquellos en blanco y negro utilizados en la época de los pioneros, cada pixel podía estar encendido (color blanco) o apagado (color negro). En los monitores de color actuales cada pixel o punto de pantalla no representa esos dos únicos colores, como sabes puden mostrar millones de colores y tonalidades. Pero la idea es la misma. La imagen está formada por puntos y el ordenador los maneja como bits. A la hora de codificar esta imagen para poder guardarla en un archivo existen dos técnicas básicas: los mapas de bits y las imágenes vectoriales
Mapas de bits
Volvamos al monitor en blanco y negro. Cada punto de la pantalla es o blanco o negro, almacenar esa imagen en un archivo es sumamente fácil: cada punto (blanco o negro) es un bit (1 o 0). Si la imagen tiene 240 puntos ocupa 240 bits (240:8 = 30 bytes). Pero en realidad cada punto representa más de dos colores, 16 millones (si usamos 24 bits para cada pixel). En este caso la imagen anterior ocupará algo más: 240 puntos x 24 bits : 8 son 720 bytes. Ten en cuenta que 240 puntos es una imagen pequeñita, de 15 pixels de alto por 16 pixels de ancho por ejemplo. En este método se basan los formatos JPG, PNG o GIF utilizados en las páginas web y que usan diferentes algoritmos para comprimir los archivos y ocupar así menos espacio. Si estas imágenes se escalan (se se les varía el tamaño) la calidad se ve degradada.

Imágenes JPG

Usando este formato pueden almacenarse imágenes de hasta 24 bits de color. Es recomendable para fotografías o imágenes con degradados. Cualquier programa editor de gráficos permite guardar una imagen en este formato con diferentes grados de compresión. Lógicamente cuanto más comprimamos la imagen menor es su calidad. Si queremos imágenes de alta calidad debemos soportar archivos de tamaños elevados. Recientemente ha aparecido una variación de este formato denominada JP2 o JPG2000, especialmente destinado a la red. Pero aún no es admitido por todos los exploradores.

Imágenes GIF
Este otro formato se usa para imágenes con hasta 256 colores ( 8 bits de color). Frente a esta limitación nos ofrece la posibilidad de definir zonas transparentes y además existe una variante que permite imágenes animadas, muy útil para llamar la atención sobre algo en concreto como puedan ser las novedades de nuestro sitio o un anuncio de algún servicio. Pero conviene no abusar de las animaciones, son archivos muy grandes y pueden llegar a resultar pesados. En nuestro sitio Gifsanimados tienes una excelente colección para elegir

Imágenes PNG

El formato PNG es el gran desconocido de internet, pese a su magnífico comportamiento. Realmente existen varios formatos PNG: PNG8, que almacena imágenes de hasta 256 colores, PNG24 para imágnes de 24 bits y PNG32 para imágenes de 32 bits. Permite transparencias como los GIF y transparencia graduada (colores cuya opacidad van desde el 0% hasta el 100%), aunque los exploradores no aprovechan esta utilísima propiedad. Por contra no admiten animaciones.
Imágenes vectoriales
Ese otro método de almacenar imágenes se basa en encontrar funciones matemáticas para representar la imagen completa. Este método no sólo se usa para figuras regulares (rectángulos, cuadrados, círculos) tambien se puede usar para imágenes tipo fotografía. Si alguno de los que leeis estas líneas ha oido hablar de una cosa llamada figuras de Mandelbrot sabrá que es eso de encontrar una función matemática para representar la formas tan poco regulares como un paisaje de montaña y similares. Estas imágenes dan una calidad excelente y permiten ser escaladas (modificar su tamaño) sin pérdida de calidad. Un ejemplo son los archivos DXF y otros usados en programas CAD. Estos formatos no se usan en las páginas web.

¿Qué formato es el mejor?

Ya has podido comparar los diferentes formatos de los que vas a disponer a la hora de colocar gráficos en tus páginas. ¿Que formato elegir? La respuesta va a depender del tipo de gráfico, de la calidad que desees. En principio las fotografías quedan mejor en formato JPG, mientras que las imágenes con colores muy definidos y sin degradados puedes colocarlas en formato GIF o PNG. Evidentemente si lo que necesitas son imágenes animadas estas obligado a usar archivos GIF. Pero en general lo mejor es que pruebes las distintas posibilidades. En general los programas de edición de gráficos te ayudarán a la hora de exportar tus imágenes par la web.
Y ojo no pongas imágenes por ponerlas, sin más motivo que el hecho de que quedan bonitas. Procura que sirvan para algo, para atraer la atención sobre algo en concreto (un enlace, una novedad) o que den información, pues a fin de cuentas es lo que buscan quienes viajan por la red. En este sentido no olvides nunca rellenar el atributo ALT de los elementos img usados en HTML para colocar las imágenes. Este detalle también te ayudará a situarte en los buscadores.