Medios Informticos

Bloque II. Diseo Web. HTML y CSS

2 Grfica publicitaria Curso 2011/12

Diseo Web. Aspectos de diseo.

El proceso de generalmente para desarrollar un sitio web sigue estos pasos: La definicin del sitio y presupuesto. La arquitectura de la informacin. El diseo del sitio. La construccin del sitio. La comercializacin del sitio. El rastreo y evaluacin del sitio. Mediante el diseo grfico se crea la lgica visual y se busca un equilibrio entre la sensacin visual y la informacin grfica. Sin el impacto visual de forma, color y contraste, las pginas sern grficamente poco interesantes y no motivarn al usuario. Un texto denso en documentacin pero que carezca del contraste de otros elementos y el alivio visual tambin ser duro de leer. Pero sin la complejidad de texto y el aporte de informacin del mismo, nos encontraremos del riesgo de pginas muy grficas pero que defraudarn al usuario por carecer del equilibrio entre la informacin textual, la sensacin visual y los enlaces interactivos. Las dos primeras fases hemos de suponer que a estas alturas ya estn realizadas y las dos ltimas son post-elaboracin, podemos decir, por lo que nos quedaremos con las ideas centrales, el diseo y la construccin del sitio. Para llevar a cabo este recorrido seguiremos algunas de las pautas marcadas por Joshua David McClurg-Genevese en su columna Design in Theory and Practice publicada en www.digital-web.com.

1. Diseo Web apropiado

En muchas ocasiones los propios profesionales hacen demasiado hincapi en el hecho de que estn desarrollando Diseo Web, lo cual provoca que se olviden principios del Diseo Grfico que resultan fundamentales en la creacin de mensajes efectivos y atractivos. A la hora de comenzar un debate sobre los fundamentos del diseo en lo que se refiere a Diseo Web, tenemos que entender que un amplio margen de herencia proveniente de otras formas de artes. Cuando se habla de conceptos fundamentes hay que, inevitablemente, mirar ms all de la propia disciplina y adoptar una perspectiva ligeramente ms grande. Vamos por tanto a hacer una breve aproximacin a todos los elementos relevantes del mundo del Diseo que puedan influirnos.

2. Principios del diseo

Existen unos principios fundamentales a los cuales acompaan una serie de elementos complementarios. Vamos a comenzar por los axiomas principales: Equilibrio Resulta de observar las imgenes y contrastarlas con nuestras ideas sobre fsica (masa, gravedad o las partes de una pgina). Es la disposicin de los objetos siguiendo un determinado diseo en funcin de su peso visual dentro del conjunto de la composicin. Por lo general se representa de dos formas: Simtrico Se produce cuando el peso de la composicin est uniformemente distribuido por los ejes horizontal y vertical. En circunstancias normales se colocan formas iguales a ambos lados de los ejes, si no coinciden exactamente, hablamos de aproximacin a la simetra. Adems, es posible construir una composicin en torno a un punto central creando una simetra radial. El equilibrio simtrico se conoce como equilibrio formal. Asimtrico Se produce cuando el peso de la composicin no est uniformemente distribuido alrededor del eje central. Se trata de una organizacin de objetos de diferente tamao en una composicin de tal modo que el equilibrio entre s se crea con sus pesos visuales. A menudo hay una forma dominante que se compensa con muchas formas pequeas. En general, las composiciones asimtricas tienden a tener una mayor tensin visual. El equilibrio asimtrico se conoce como equilibrio informal.

Simetra Horizontal

Aproximacin a la Simetra Horizontal

Simetra Radial

Asimetra

Ritmo
Es la repeticin o alternancia de elementos, a menudo con intervalos definidos entre ellos. El ritmo puede crear sensacin de movimiento, y puede establecer patrones y texturas. Hay diferentes tipos de ritmo, a menudo definidos por la sensacin que evoca al mirar la composicin. Regular

Se produce cuando los intervalos entre los elementos y, a menudo, los elementos por s mismos, son similares en tamao y longitud. Fluido Da sensacin de movimiento. Progresivo Muestra una secuencia de formas que siguen una serie de pasos.

Ritmo Regular

Ritmo Fluido

Ritmo Progresivo

Proporcin
Es la comparacin de las dimensiones o las formas de distribucin. Es la relacin de escala entre uno y otro elementos, o entre el conjunto de objeto y un elemento aislado. Diferentes proporciones dentro de una composicin pueden relacionarse con diferentes tipos de equilibrio o simetra, y puede ayudar a establecer el peso visual y profundidad. En los ejemplos que se muestran a continuacin parece que los elementos de mayor tamao ocupan el primer plano, mientras que los menores parecen pertenecer al fondo.

Predominio o nfasis
Se relaciona con los distintos grados de nfasis en el diseo. Determina el peso visual de una composicin, establece el espacio y la perspectiva, y a menudo determina el recorrido del ojo a la hora de contemplar el diseo. Hay tres niveles de posicin dominante, relacionadas con el peso dentro de la composicin. Dominante El objeto de mayor peso visual, de primordial importancia en el primer plano de la composicin. Subdominante Tiene una importancia secundaria. Se trata de los elementos que tienen una importancia media en la composicin. Subordinados El objeto tiene menos peso visual, que lo lleva al fondo de la composicin. En el siguiente ejemplo, los rboles actan como el elemento dominante, la casa y colinas como secundario, y las montaas como elementos terciarios.

Unidad
Describe la relacin entre las partes individuales y el conjunto de la composicin. Investiga los aspectos de un determinado diseo que le dan a la composicin una visin de conjunto o de variedad de elementos. Este concepto proviene de algunas teoras de la Gestalt de la percepcin visual y psicologa, especialmente aquellas que tratan del modo en que el cerebro humano organiza la informacin visual en categoras o grupos. La Teora de la Gestalt es amplia y compleja, tratando varios niveles de abstraccin y generalizacin, aunque podemos extraer algunas ideas bsicas. Cierre El cerebro tiende a llenar la falta de informacin. Los objetos pueden ser construidos en grupos de partes ms pequeas, y cuando alguna de estas piezas falta, el cerebro se encarga de agregar la informacin necesaria. Continuidad Una vez que comienzas a mirar en una direccin, continuars hacindolo hasta que algo ms significativo capte tu atencin. La perspectiva, o el uso de lineas dominantes, tienen a guiar la mirada de los espectadores hacia un lugar determinado. Similitud, proximidad y alineacin

Los elementos de similar tamao, forma y color tienden a ser agrupados por el cerebro, y se establece una relacin semntica entre ellos. Adems, los elementos muy prximos o alineados tienden a agruparse.

3. Conceptos relacionados
Hay algunos otros conceptos relacionados con estos principios que pueden incluir trminos especficos y/o tcnicas basadas en estos principios. Completan la coleccin de herramientas disponibles para el uso del diseador. Contraste Trata la nocin de tensin dinmica o de grado de conflicto que existen dentro de un diseo entre los diferentes elementos visuales de la composicin. Espacio Positivo y Negativo Se refiere a la yuxtaposicin de una figura y el fondo en una composicin. Los objetos del entorno representan el espacio positivo, y el entorno en s mismo es el espacio negativo. Regla de los tercios Es una herramienta de composicin que defiende que las composiciones ms interesantes son aquellas en las que el elemento principal est en el centro. Bsicamente, se trata de dividir cualquier plano en tercios verticales y horizontales y colocar los elementos de la composicin entre las lneas generadas por los diferentes segmentos. Centro Visual Est ligeramente ms arriba y a la derecha que el centro matemtico. Esta tiende a ser la posicin natural del foco visual Color y tipografa Hay mucho lugar para el color y la tipografa dentro de los principios mencionados anteriormente.

Conclusin
En el Diseo Web es fcil quedar condicionado por las propias caractersticas del medio y obviar algunos conceptos fundamentales que pueden fortalecer cualquier diseo. Por tanto, hay que echar la vista atrs para analizar los axiomas fundamentales que componen el Diseo como disciplina general para tener una visin de conjunto enriquecedora.

4. Diseando para la Web

Hemos visto algunas generalidades que integran el Diseo Web dentro de una disciplina mucho mayor. Existen otra serie de conceptos aplicables, aunque quiz sera ahondar demasiado en otra disciplina. Por tanto, centrmonos ahora en las peculiaridades del diseo aplicado a la web, que tienen su origen en las caractersticas diferenciadoras y limitaciones del medio que tratamos. Un o de los aspectos ms interesantes, a la par que frustrantes, es que las reglas estn en constante cambio. Los diseadores necesitan adaptarse a las nuevas necesidades. En cualquier caso, resulta evidente que dentro de estas particularidades, cada proyecto tendr una caractersticas singulares que hacen que haya que adaptar todos estos conceptos.

Resolucin
Este trmino puede referirse a diferentes aspectos, aunque guarden cierta relacin entre ellos. Aclaremos algunos conceptos: Resolucin de pantalla Es un trmino que puede inducir a equvocos. La mayora de los monitores de ordenador tiene una resolucin de entre 72 y 96 ppp (pxeles por pulgada). Por tanto, cuando nos referimos a la resolucin de pantalla, realmente estamos hablando de tamao de pantalla, o del nmero de pxeles que se muestran al mismo tiempo. El tamao de la pantalla refleja la cantidad de espacio que los usuarios tienen en sus pantallas y, en consecuencia, cunta informacin pueden ver de una sola vez. Resolucin de la imagen Es el tamao total de la imagen, tanto en pantalla como fuera de ella. Normalmente est definido por las dimensiones de pixel y la resolucin espacial, que trabajan juntos para crear la resolucin de una imagen. Dimensiones de pixel Describe el nmero de pxeles que conforman una imagen. Las dimensiones se pueden expresar en altura y anchura o megapxels. Un megapixel es un milln de pxeles, y puede ser entendido como (anchura x altura / 1.000.000). Resolucin espacial Es la resolucin tal y como se define por un nmero de pxeles por pulgada. Las resoluciones ms comunes son 72 ppp (resolucin de pantalla) y 300 ppp (resolucin de impresin).

Los Navegadores
El navegador es la interfaz que el usuario utiliza para interactuar con la informacin de una web. Proporciona un marco para mostrar la informacin y las herramientas de navegacin para la interaccin en diversos niveles. Cuando diseamos una web, por tanto, lo hacemos para su visualizacin en un navegador.

El problema viene de la multiplicidad de navegadores existentes y la difcil eleccin de cual ser en el que nos basemos. Las diferencias entre ellos en la mayora de los casos son sutiles, aunque no siempre es as. Por tanto, es necesario conocer el comportamiento del usuario para intentar adaptarse a la mayora aunque, no obstante, ser un buena estrategia evitar los elementos conflictivos en la medida de lo posible. Este es uno de los aspectos que nos obligan a mantener nuestra atencin, ya que el comportamiento de los usuarios es algo que va variando y evolucionando. Adems aparecen nuevas versiones y cambios en las tecnologas de los cuales no podemos mantenernos ajenos.

Dimensiones de la pgina
Entonces, como hemos visto anteriormente, la resolucin de la pantalla determina la cantidad de informacin que ve el usuario en pantalla. Tambin hemos convenido que el navegador es la interfaz que permite la interaccin con la web. No obstante, como sabemos, el navegador no deja disponible el 100% de la pantalla, sino que sus propias herramientas ocupan una parte. Esto vara en funcin del navegador, pero hay que tener en cuenta este aspecto. Por tanto, dentro de las consideraciones previas al diseo de la aplicacin en s misma habr que determinar el tamao de la pgina.

Ancho fijo o variable

Una posible alternativa de diseo es la de hacerlo en funcin de un porcentaje del espacio disponible, por lo que el contenido se adaptar a cada momento segn las caractersticas del navegador y la ventana que se encuentre activa en ese momento. La eleccin que hemos de hacer entre utilizar ancho fijo o un porcentaje adaptable se basar en las necesidades del producto que se est diseando en cada momento, ya que ninguno de los dos mtodos es ms ventajoso que el otro en trminos absolutos.

Creacin de la maqueta
Hasta ahora todos los pasos que hemos dado han ido encaminados a la planificacin y a las decisiones previas al comienzo del trabajo de diseo propiamente dicho. Una vez tenemos bien pensado hacia dnde vamos a encaminar nuestros pasos llega la hora de crear la macroestructura que conformar la retcula general de la pgina. Existen tantos diseos posibles como ideas seamos capaces de generar. De todos modos, si intentamos ver todas estas posibilidades agrupadas en pequeos grupos, se puede crear una especie de clasificacin de los diseos ms comunes dentro de los cuales, en menos o mayor medida, es posible encuadrar todos los dems. En principio, no hay ningn diseo recomendable como superior en cuanto a sus prestaciones si lo comparamos con otras alternativas posibles. En funcin del mensaje, las caractersticas singulares del proyecto, el pblico objetivo, tendencias estticas,... se tomar la decisin. Los criterios para llegar a esta conclusin son mltiples y variables, no obstante, no se puede convertir en un asignacin del azar, sino que todas las decisiones que nos lleven a realizar un trabajo concreto deben estar completamente razonadas. Podemos analizar algunos ejemplos. Columna de navegacin a la izquierda Independientemente de que el ancho sea fijo o lquido, esta distribucin resulta la maquetacin ms extendida en el diseo web. Como ya hemos dicho antes, no es ni mejor ni peor que otras posibilidades. Por un lado, es un diseo fcilmente reconocible y que al usuario le va a motivar pocas dudas en cuando a su funcionamiento. Adems, est relacionado con la disposicin occidental de la informacin, donde la lnea se lee de izquierda a derecha. De esta forma, tenemos en el margen que primero vemos los apartados ms importantes y los puntos de acceso a la informacin que se encuentra fragmentada a los largo de toda la pgina. Como primera contrapartida de este modelo de diseo se encuentra que puede traslucir cierta falta de creatividad y de trabajo novedoso. Columna de navegacin a la derecha Este modelo de navegacin no est tan extendido utilizado digamos en estado puro, sino que normalmente se combina con otras modalidades. La columna de la derecha no suele ser destinada tradicionalmente al soporte de la navegacin principal, sino a elementos secundarios como anuncios, opciones de subnavegacin, o aparicin de contenido secundario o bien de elementos a destacar por su naturaleza no homloga al contenido principal. Esta accin de dejar los contenidos de segundo nivel, por denominarlos de alguna forma, en la parte derecha en lugar de la navegacin principal, se deriva precisamente de lo que decamos anteriormente del sentido de la lectura occidental, de izquierda a derecha. No obstante, en los ltimos aos, sobre todo a partir de la multiplicacin exponencial de la tecnologa relacionada con los weblogs, estos modelos de navegacin se han extendido debido a la claridad de la naturaleza del sitio. El usuario entiende directamente que el blog est compuesto por una serie de contenidos o posts vinculados al factor temporal y que, normalmente, vienen expuestos en sentido cronolgico. Esta sencillez al mostrar los contenidos le resto importancia a la claridad de la navegacin, ya que adems, la similitud entre todos estos sitios genera una amplia experiencia de usuario en pginas similares.

Tres columnas Este diseo, a la vez que recoge conceptos extrados de los dos modelos anteriores tambin posee una serie de caractersticas propias. Normalmente se utiliza cuando la informacin adicional al contenido principal es muy amplia, por ejemplo, cuando existen muchas entradas de navegacin a un segundo nivel. Este modelo de navegacin suele ser muy utilizado en portales temticos que incluyen grandes cantidades de informacin. Otro tipo de pgina tpico en adoptar las tres columnas suelen ser las

tiendas virtuales o webs e-commerce. Normalmente, en la columna de la izquierda suelen aparecer las opciones ms comunes de navegacin y las secciones principales, as como buscadores y otros puntos de entrada. Una opcin bastante frecuente en estos casos puede ser la ubicacin de las columnas que contienen la navegacin justificadas a izquierda y derecha y el contenido central de manera flexible, para que las lneas se vayan autoajustando. Recalcamos que la eleccin de los diseos, el ancho, la posicin de la navegacin son decisiones totalmente libres que deben ser tomadas por el diseador, aunque no deben ser nunca arbitrarias, sino perfectamente motivadas por la naturaleza propia del proyecto. En el caso de la imagen, la parte central tiene un ancho fijo porque la disposicin de los diferentes elementos de la gama de productos si es relevante para el acabado final.

Algunos ejemplos de diseos alternativos Un ejemplo alternativo de navegacin derivado de los nuevos canales rss de noticias y la concentracin de la informacin en la pgina inicial. En este caso se dejan las opciones de navegacin repartidas por cabecera, pie y bloque central debido al gran desglose de informacin. En la columna derecha, de un ancho considerable se publican las ltimas noticias del organismo.

Otro posible modelo de maquetacin es la creacin de una columna de navegacin a la derecha con mltiples pestaas y secciones como consecuencia de una alta categorizacin del contenido. En la parte central, ya que los elementos grficos tienen una importancia primordial, se maqueta por bloques prestando atencin nicamente a las imgenes.

Otra de las tipologas de diseo extendidas con el uso de los blogs es la de la creacin de una zona en la parte izquierda de la pgina con los contenidos y en la parte derecha una doble columna de navegacin, para as poder dar cabida a las secciones, el archivo cronolgico, comentarios, nuevas formas publicitarias, etc.

5. La Tipografa
Leer un texto en una hoja de papel es muy distinto que leerlo en la pantalla de un ordenador. Disear para la pantalla, recordamos una vez ms, tiene toda una serie de inconvenientes y limitaciones que si no se tienen en cuenta pueden producir una mala experiencia al lector. Una forma habitual de trabajar es seleccionar fondos blancos puros, ya que mediante los ajustes del monitor se rebaja la intensidad del color. Sobre este fondo, se suele utilizar para el texto plano alguna tonalidad de la gama de los grises lo suficientemente oscura para lograr una alta legibilidad. De esta manera, tambin podemos destacar los enlaces mediante colores llamativos y otras combinaciones de contrastes. La fuente tipogrfica Cuando se trata de elegir una fuente para introducir en la web no hay que centrarse en las fuentes instaladas en el propio equipo, sino en el comn de los usuarios. Existe una lista breve de fuentes seguras para todos los sistemas que se establecen como las recomendadas para la introduccin de texto en la web (ver typetester.com) En software de creacin de pginas web, como Adobe Dreamweaver, se incluyen en las opciones de fuente la lista de fuentes recomendadas para todos los sistemas. Adems, al incluirlas mediante CSS se proponen una serie de fuentes alternativas separadas por comas, y de menos a ms genricas, para que, en el caso de que el usuario no tenga instalada alguna tipografa, no se altere la visualizacin de manera sustancial. La lista de fuentes seguras es la siguiente: Arial, Helvetica, sans-serif Times New Roman, Times, serif Courier New, Courier, monospace Georgia, Times New Roman, Times, serif

Verdana, Arial, Helvetica, sans-serif Geneva, Arial, Helvetica, sans-serif Como recomendacin general, no conviene el abuso en cuanto a la utilizacin de excesivos tipos de letra. Para diferencias partes de la web se puede hacer uso de colores, peso y espaciado del texto, por ejemplo, fondos, elementos grficos,.. La fuente ms extendida en la web probablemente sea la Verdana, seguida de Arial, y otras fuentes similares sin serifa, que facilitan la lectura en pantalla. Justificacin del texto El formato ptimo para la legibilidad en la web es la alineacin a la izquierda, ya que est de acuerdo con el modo de lectura occidental, de arriba abajo y de izquierda a derecha. Los textos centrados y alineados a la derecha pueden dificultar la lectura, aunque pueden ser utilizados para diferencias algunos elementos que tienen alguna caracterstica singular. Organizacin del contenido textual Una vez tenidos en cuenta los aspectos visuales y grficos del texto, tendremos que centrarnos en la organizacin de los contenidos para facilitar el escaneo visual que realizan normalmente el usuario de Internet. Deberemos para ello cuidar ciertos detalles que nos permitan acercar ese contenido y facilitar la bsqueda y transmisin del mismo. Los norteamericanos tienen un dicho, Content is the King, o sea, que el contenido es el rey. Esto se sustenta en el hecho de que al fin y al cabo lo que le interesa conseguir al usuario en web es acceder al contenido. Leer en un monitor en un 25% ms lento que desde el papel. Tambin debemos mencionar que a la gente no le gusta hacer scroll sobre las pginas y que normalmente visualiza de una forma rpida el contenido encontrado en la pgina. Es por ello que tendremos que hacer un esfuerzo por organizar correctamente el contenido de nuestra pgina as como por reforzarla con elementos visuales de buena calidad que sean atrayentes y que vengan a ubicar mejor el tema general de la pgina as como nuestra propia identidad en la web. Una primera consideracin sera organizar el contenido textual para que sea ms efectivo de cara al usuario web. Palabras clave destacadas (en forma de vnculos, o utilizando variables tipogrficas, o cambios de color); Subttulos significativos; tiles; Listas de tems; Una idea por prrafo (los lectores generalmente saltan cualquier idea adicional si no son capturados por las primeras palabras del prrafo); El estilo de pirmide invertida, empezando por la idea primordial y organizando las ideas en funcin de su importancia. No hay que olvidar que en una pgina web el usuario, en una informacin textual extensa tiene que verla desplazndose a travs de las barras de desplazamiento, por lo que en el rea visible de la pgina deber aparecer lo ms importante. Muchos autores sealan la importancia de dotar a la pgina de un resumen del contenido de la misma al principio de cada pgina, aunque si la estructura es correcta puede resultar redundante. La mitad o menos de palabras que las que normalmente se utilizan en textos impresos. Hay que ser concisos en la exposicin de las ideas y en la no repeticin de las mismas. En la web es necesario que las informaciones no sean demasiado extensas; algunos autores llegan a recomendar escribir el 50% del mismo material que hubiramos utilizado en una publicacin impresa. La credibilidad de un sitio decrece si se exagera as como si se reduce demasiado la velocidad de lectura. En la web es posible dar el mismo nivel de informacin a travs de los hipervnculos, que le permitirn al usuario ir accediendo a distintos niveles de informacin si est interesado en ello, pero sin colocar toda la informacin en un mismo bloque de pgina. Asimismo, es recomendable que separemos el texto en bloques cortos que tengan una unidad conceptual, eso permitir mejorar la facilidad de lectura. Con ttulos o subttulos que ubiquen fcilmente el contenido. El estilo del lenguaje que utilicemos debe ser directo y objetivo. Normalmente el usuario huye de contenidos subjetivos o de un estilo claramente comercial. En cuanto a los ttulos de pgina, ttulos generales y aclaraciones sobre un link o todo lo que podramos denominar microcontenido, deberemos cuidarlos an ms. Los ttulos son visualizados usualmente fuera de su contexto como parte de listas de artculos, en e-mails y la cantidad de informacin de contexto que dispone el usuario es menor y ms difcil de leer que en otro medio. Entonces, el texto del ttulo debe sostenerse por s mismo y tener sentido aun sin estar junto al cuerpo del contenido. Debemos explicar claramente sobre qu es el artculo, en trminos que el usuario entienda. Deberemos tratar de no utilizar artculos (la, el) en la primera palabra de la descripcin o ttulo para que las listas de artculos al ordenarlo alfabticamente lo clasifiquen mejor. Mejor an si podemos hacer que la primera palabra tenga un significado importante. No hacer que los ttulos empiecen todos con la misma palabra, ya que se vuelven difciles de diferenciar. En lo que es la informacin textual, otro de los temas a tener en cuenta sera la correcta presentacin de datos (Edward Tufte): Analizar primero qu queremos mostrar y el objetivo primordial de nuestra informacin. Cada objetivo comunicacional tendr una presentacin distinta y distinta forma en cuanto a informacin textual, grfica o representacin de datos para una posible observacin ms rpida y comprensible. Mostrar informacin que realmente sea interesante, no mostrar informacin que sea irrelevante o se salga del objetivo primordial. Aumentar el volumen de informacin oscurece la informacin que sea realmente relevante.

6. Elementos grficos y visuales

Actualmente muchas pginas estn basadas casi por completo en la imagen; al menos en las pginas de bienvenida o portada. Esta prctica de incluir pginas sin contenido es algo que cada da se ve con peores ojos, ya que provoca un mayor tiempo de navegacin y un mayor nmero de clics sin llegar a aportar ningn valor aadido. Tambin es cierto que si queremos aportar contenido a la web, debemos recurrir al texto convencional.

Una de las cuestiones que siempre tendremos que tener en cuenta a la hora de utilizar una serie de elementos ser la velocidad media de transmisin de nuestras pginas y los equipos y tecnologas que mayoritariamente estn implantadas en el usuario medio. Este usuario medio variar tambin dependiendo del tipo de pblico objetivo que estemos buscando. Las proporciones de transmisin de datos reales variarn, dependiendo de la conexin del usuario, velocidad de servidor web, conexin de Internet, y otros factores, pero el punto global est claro: cuantos ms grficos incorporemos a nuestras pginas, ms larga ser la espera de nuestro usuario. Una buena estrategia ser que los grficos se carguen gradualmente en la pgina, haciendo que el usuario vaya viendo algo en la pantalla. Veamos algunas recomendaciones con respecto a los grficos o imgenes: Utilizar grficos o iconos que no sean complicados de interpretar y no sean imgenes demasiado abigarradas, ya que slo generarn confusin o ruido y no aportarn claridad ni una correcta informacin. Las imgenes en lnea y diagramas pueden funcionar correctamente, slo habr que cuidad que las lneas no sean excesivamente finas y se pierdan por la baja resolucin; por otro lado, habr que cuidar las imgenes que incorporen muchas curvas o ngulos o las lneas que no sigan la rejilla de pixeles, ya que aparecern dentadas. No escalemos nunca una imagen en el propio programa de edicin HTML, ya que realmente el peso de la imagen seguir siendo el de la original y no la del tamao adaptado. La imagen debe estar realmente al tamao en que vayamos a utilizarla en nuestro documento HTML, optimizndolas previamente con el software apropiado. Los fondos coloreados: nos permitirn hacer un cambio en nuestro site, destacar nuestros elementos de primer plano, pero sin incorporar un mayor peso a nuestras pginas. Estos fondos coloreados tambin nos pueden permitir crear una atmosfera determinada de nuestro site, sealar un cambio entre distintas partes del sitio y ayudar incluso en la legibilidad de las pginas. Las texturas de fondo: los fondos tambin pueden estar formados por una imagen que dote de una determinada textura a nuestra web. Estas imgenes pueden ser pequeas, ya que mediante la colocacin de la imagen como fondo se genera un mosaico en ella. Mapas de imagen: mediante la caracterstica HTML de mapas de imagen podremos definir ms de una enlace sobre un grfico. Mediante esta caracterstica incluso podremos construir de una forma sencilla y fcil de modificar barras de navegacin u otro tipo de grficos que contengan diversos contenidos enlazados. Imgenes y accesibilidad: siempre que utilicemos elementos que no sean textuales, estaremos reduciendo la accesibilidad de nuestras pginas. Por lo tanto, habr que tener previstos estos problemas y darle las soluciones oportunas. Cuando coloquemos una imagen en nuestra pgina deberemos pensar no slo en lo que es, sino cmo funciona dentro del contexto de nuestra pgina y la pertinencia de la utilizacin de la misma. Elementos audiovisuales Al incorporar elementos audiovisuales en nuestras pginas lo primero que deberemos medir es la exigencia que tiene esos medios en cuanto a ancho de banda, tiempos de transmisin o tecnologas residentes en los equipos de nuestros usuarios. Si nuestras pginas estn pensadas para un pblico en general con diversidad de equipos, software y conexiones, deberemos ser cautos en la utilizacin de estos medios. El que tengamos un gran trabajo de elementos multimedio no quiere decir que debamos utilizarlo directamente en la red, ya que siempre deberemos adecuar ese trabajo a las especificaciones que tiene el medio y las limitaciones normales del mismo. Por otra parte deberemos considerar el refuerzo que estos elementos suponen para nuestra comunicacin. Por ejemplo, la utilizacin de audio puede ser una forma extremadamente eficiente de dar la informacin y de reforzarla. La consideracin de reforzar nuestra presentacin o contenidos con el audio, debe siempre considerarse cuando el audio puede comprimirse y optimizarse correctamente. En el caso del vdeo, deberemos considerar un volumen de vdeo que se comprima eficazmente y tenga la suficiente calidad para que no d una sensacin de pobreza visual. En cuanto a las animaciones, una de sus exigencias primordiales es disponer del plugin apropiado que le permita poder visualizarlo desde el navegador del usuario. Cuando coloquemos una animacin, deberemos siempre valorar el peso de esta animacin (cuanto ocupa), la exigencia de que sea siempre visualizada por el usuario en la pgina y los inconvenientes en general que tienen las animaciones de romper la concentracin del usuario que puede tener en otros contenidos importantes de la pgina. Sin embargo, tambin una animacin simple puede ser un elemento fundamental para la ilustracin de conceptos o procedimientos.