Imgenes de fondo

Las imgenes de fondo, al igual que todas las imgenes, tomar tiempo para descargar, mientras que los colores de fondo por s solo no lo hacen. Como resultado de ello, debemos utilizar imgenes de fondo con cautela, asegurndose de que el mayor impacto es la pena el hit descarga resultante. Otra consideracin es que ocupados imgenes de fondo suelen ser anatema para un buen diseo, rara vez se debe a fondo de la pgina ser el foco de atencin. Sin embargo, una imagen de fondo sutil puede mejorar el ambiente de un sitio.

El contraste de imagen de fondo

Una forma de asegurarse de que una imagen de fondo no va abrumar a la pgina o hacer ilegible el texto en primer plano, es el uso de una imagen de bajo contraste, como la imagen en la figura 6.30. Los colores de la imagen son muy similares en tono y valor, por lo que la imagen puede proporcionar inters sin abrumar a los elementos de primer plano. Mientras que el texto plano es de color oscuro, que se mostrar con eficacia.

Qu pasa si queremos utilizar una imagen existente, tal vez una foto, pero el contraste es demasiado alto? FIGURA 6.31A muestra slo una imagen tan alto contraste que distraer la atencin de cualquier contenido de la pgina y el texto rinde culto dificultades de descifrar. El remedio es disminuir el contraste de la imagen en un programa de edicin de imgenes. Basta con ajustar los "niveles" el brillo, el contraste o tono / controles de saturacin de color, o de superposicin toda la imagen con una capa semitransparente de color blanco, negro o de otro color. FIGURAS 6.31B y C mostrar dos mtodos que transforman la imagen de alto contraste original en una ms adecuado para un fondo.

Incluso si un fondo de alto contraste es apropiada, entonces debemos tener cuidado de que el texto oscuro no se coloca en las zonas oscuras del fondo, y el texto de luz no se coloca sobre las zonas claras, como se ilustra en la figura 6.32A.

Una solucin es tener mucho cuidado para bloquear elementos de primer plano de luz en lugar de una superficie de fondo oscuro y viceversa, aunque eso es ms fcil decirlo que hacerlo en la web. Alternativamente, se podra agregar un esquema o brillo que contrasta con elementos de primer plano, de tal manera que los elementos de primer plano de luz se resumen en un color ms oscuro, como en la figura 6.32B y elementos de primer plano oscuro se resumen en un color claro. De este modo, el texto es legible sin importar si cae en un local oscuro o una zona de luz de fondo. Esto todava presenta problemas. En primer lugar, aunque podemos crear imgenes con el texto indicado por un nmero limitado de elementos de pgina como encabezados, no podemos hacer eso por el texto HTML que comprende la mayora del contenido. Adems, no slo el fondo todava se ven "ocupado", pero ahora las

reas de texto para hacer, tambin. Ajetreo multiplicado rara vez es una buena idea en una pgina web. Echemos un vistazo a cada uno de los tres tipos generales de las imgenes de fondo: imgenes baldosas de fondo, imgenes de fondo de pantalla completa, y las imgenes parciales de fondo.

Fondo azulejo de Imgenes

Si una imagen es demasiado pequea para cubrir todo el fondo, los azulejos de tu navegador (repeticiones) en forma horizontal y verticalmente hasta que se llena el fondo. Porque una imagen en mosaico es, por definicin, ms pequea una imagen de fondo de pantalla completa que, es inherentemente un archivo ms pequeo. Antecedentes azulejos pueden aprovechar muchos efectos diferentes: rayas, texturas, gradientes de color, patrones aleatorios y tableros de ajedrez, para nombrar unos pocos. Figura 6.33 ilustra varios azulejos de fondo y los efectos que producen en mosaico en un rea de 200 x 200 pxeles. Qu dimensiones en pxeles son ideales para un fondo de azulejos? No d por sentado que la ms pequea es la imagen, mejor. Hay un momento en que la imagen es tan pequea que el ahorro de descarga es ms que compensado por el tiempo que tarda el navegador para repetir la imagen una y otra vez. Lo ideal sera que una imagen debe estar en el rango de 10.000 pxeles (100 x 100 pxeles, si la imagen es cuadrada). Ese nmero es slo una gua, el punto es tratar de evitar el uso de azulejos que son demasiado pequeos o demasiado grandes.

Adems, si usted est utilizando un patrn o la textura proporcionada por un programa de edicin de imgenes, debe utilizar un mltiplo de la repeticin del patrn (a menudo alrededor de 100 pxeles). Por ejemplo, el azulejo x 100 pxeles de 100 Marea negra en la figura 6.33 se repite sin problemas, mientras que las costuras muestran en el azulejo de 50 x 50 Marea negra. La mayora de los patrones y texturas integradas en Fireworks repetir sin problemas en torno a los 100 x 100 pxeles, ms o menos unos pocos pxeles, por lo que es fcil de crear azulejos de fondo. En Photoshop, puede utilizar el filtro> Creador de motivos para crear y probar patrones.

Existe una tcnica para crear manualmente sus propias baldosas transparentes tambin. Figura 6.34 ilustra el proceso:

Fondo de pantalla completa Imgenes

Una imagen de fondo de pantalla completa est, por supuesto, la intencin de llenar la ventana del navegador en la esquina superior izquierda a la esquina inferior derecha. Una imagen JPG de fondo de pantalla completa tiene el potencial de ser un archivo enorme, con un gran xito de descarga resultante. Por el contrario, una imagen GIF de pantalla completa con slo unas pocas formas, dos o tres colores, lneas horizontales, principalmente, y no degradados o patrones (como en la figura 6.30) podra ser un archivo bastante pequeo. En cualquier caso, debemos estar seguros de que la imagen suma suficiente dinamismo a la pgina para que la descarga no sea en vano.

La primera consideracin una imagen de fondo de pantalla completa es su tamao de pantalla. Si es lo suficientemente grande como para llenar las ventanas del navegador ms grandes (por ejemplo, 1600 x 1200 pxeles), puede aparecer truncada e incompleta cuando se muestran en las ventanas ms pequeas (como 800 x 600 pxeles). Usando una imagen ms pequea como un fondo para toda la pgina no va a funcionar, ya sea, porque, como hemos visto, a menudo poco atractivo azulejos para llenar toda la pgina. Figura 6.35 ilustra dos problemas. Una fotografa rara vez funciona en estas circunstancias, a pesar de un diseo abstracto bien planificada podra. En cualquier caso, es necesario probar un fondo de pantalla completa en mltiples tamaos de ventana.

Imgenes de fondo de pantalla completa desplazarse de forma predeterminada, lo que significa que se mueven junto con el contenido que el usuario se desplaza por una pgina. Podemos utilizar CSS para fijar una imagen de fondo en su lugar para que no entre en desplazamiento: body {background-image:url(someImage.gif); background-attachment:fixed;}

Ahora, el texto se desplaza sobre la parte superior del fondo fijo, al igual que crditos de la pelcula suele desplazarse una imagen de fondo fija sobre. En este caso, es especialmente crtico que la imagen de fondo es de bajo contraste internamente, pero tiene un alto contraste

con elementos de primer plano, con el fin de evitar elementos de primer plano convertirse en ilegible como bueno desplazarse sobre las zonas de fondo que son demasiado similar en valor.

No baldosas parciales imgenes de fondo

A veces, queremos una imagen de fondo que no llena la pantalla ni azulejos. Hay dos maneras de mostrar una imagen de fondo parcial: Especifique un color de fondo slido para toda la pgina, y la imagen de un fondo separado para el <div> o <table> que mantiene el contenido principal, como en la figura 6.36A. Tambin puede utilizar CSS (ver recuadro) para posicionar la imagen con precisin en la pgina, aunque puede ser ms difcil de alinear el contenido de la imagen de fondo. Haga la imagen de fondo de toda la pgina, y utilizar un color slido de fondo para la <div> o <table> que mantiene el contenido principal (como en la figura 6.36B) - en resumen, lo contrario del mtodo anterior. La principal ventaja de esta tcnica es que usted no tiene que preocuparse en absoluto acerca de si o no el fondo de la pgina afecta a la legibilidad de los contenidos.

El uso de CSS para posicionar una sola instancia de una imagen de fondo

Las variaciones en la siguiente etiqueta <body> se pueden usar para posicionar una sola copia de una imagen de fondo: <body style=background-color:#660000; background-image:url(backgroundImage.jpg); background-position: center 20px; background-repeat: no-repeat;> En este caso, la imagen de fondo se centra horizontalmente en la ventana y cae hacia abajo 20 pxeles desde la parte superior de la ventana. ____________________________________________________________________________________________________________

Una alternativa a una imagen de fondo

Como hemos visto, las imgenes de fondo pueden agregar inters a una pgina. Sin embargo, hay al menos una manera de conseguir el aspecto de una imagen de fondo sin tener que usar una imagen en todo, mediante la manipulacin de fondo de celda de tabla colores de efectos grficos. Figura 6.37 muestra cmo dicho bloqueo de color pueden dar una muy grfica, el efecto "Mondrian" a una pgina sin utilizar una sola imagen de fondo. Las celdas de tabla o <div> s utilizan los colores de fondo apropiadas, mientras que las lneas oscuras que se llevan a cabo fcilmente con un espaciamiento amplio que permite que el fondo oscuro para mostrar a travs, o con bordes anchos.

Indicaciones para el Trabajo con grficos

Aqu estn varios de trabajo-con-grficos sugerencias que no encajan perfectamente en las secciones anteriores de este captulo.

Piense en pxeles
Entrnate para pensar en pxeles; ni siquiera tratar de traducir pxeles a pulgadas o centmetros en la cabeza. Pronto, usted comenzar a no tener que averiguar consciente de que una columna de navegacin podra ser de 100-150 pxeles de ancho, una columna de contenido 500 pxeles de ancho, un logotipo de banner 100-200 pxeles de alto, una miniatura alrededor de 100 x 100 pxeles. Aunque los pxeles no se van a mostrar en el mismo tamao en todos los sistemas, como hemos visto en el captulo 4, estas pautas nos dan un punto de

partida. No se necesita tanto tiempo, de verdad, para convertirse en la facilidad con pensar en pxeles.

Emplear Echoes Visuales

La consistencia visual de un sitio se ve reforzada por la repeticin de elementos grficos en todo el sitio. Considere lo siguiente: Repetir un elemento del logo en otra parte de la pgina. Por ejemplo, elegir una forma simple de la insignia y repetirlo como un icono, un botn, o una bala. Elija un color en el logotipo o una fotografa y repetirlo en otra parte, en un segundo plano, en una bala, o en los enlaces de texto. Utilice las herramientas de cuentagotas recogedor / del color en Fireworks o Photoshop para identificar el cdigo de color. Elija un estado de nimo constante para grficos. Por ejemplo, las formas orgnicas se redondean, el fluir, e irregulares. Formas artificiales estn bien definidos, con lneas rectas y ngulos rectos. En general, los dos estados de nimo muy diferentes como estos no juegan bien juntos en una pgina web.

Mantenga un 1 x 1 pxel GIF a mano

A 1 x 1 pxel transparente GIF es una cosa til para tener a su disposicin. Se puede utilizar como material de relleno para las clulas vacas de la tabla para evitar la tendencia de los navegadores antiguos a ahogarse cuando se expone a una celda de la tabla vaca. Al mismo tiempo, se permite que las clulas que deben tomarse a tamaos muy pequeos, que, rellenando con un carcter no permitirn.

Un GIF transparente tambin es til como espaciador. Por ejemplo, podramos querer ms espacio entre dos imgenes. Aunque podramos usar varios caracteres de separacin, no entregar un nmero exacto de pxeles vacos. Un GIF transparente en un tag <img /> Sin embargo, podra indicar la altura y la anchura exacta. Normalmente evitamos estirar una imagen con la altura y la anchura, pero es aceptable en esta situacin, ya que no tenemos que preocuparnos por la calidad de la imagen estirada si es invisible, de todos modos. Un 1 x 1 pxel de color GIF puede ser til tambin. Podemos estirar para hacer una vieta cuadrada de cualquier tamao. Tambin se puede repetir o se estira en reglas horizontales o verticales (HTML no proporciona reglas verticales).

Evite los clichs Web

Evite los clichs web como hilado globos, araas y telaraas, o sobres animados para el correo electrnico. Un globo de giro puede ser apropiado para la NASA, pero no es adecuado para, por ejemplo, un sitio de venta de palos de golf, simplemente porque el sitio est en la web "todo el mundo".

Considerar el uso de bordes de la imagen

En los "viejos tiempos" de la web, las imgenes generalmente lucan las fronteras HTML predeterminados. Luego, durante un nmero de aos, las fronteras fueron vistas como pasado de moda y se apagaron por completo. En estos das, sin embargo, una frontera elegante, un pxel parece estar volviendo a ponerse de moda.

Si el borde est encendido pero no labrado de otro modo, HTML representa la frontera para una imagen normal en el mismo color que el texto normal, y para las imgenes de enlace en el mismo color que los enlaces de texto. Puede, por supuesto, utilizar CSS para especificar varios atributos de borde, de estilo (lnea doble de puntos, puntos, etc.) a la anchura de color. Siempre se puede insertar un borde en el grfico en s, tambin, antes de exportarla desde dentro de un programa de edicin de imgenes.

Utilice Dreamweaver para crear rollovers remoto

Nos fijamos en rollovers grficos (mouseovers tambin llamados) de profundidad en el captulo 3, ya que el uso ms comn de volcaduras es para las imgenes de navegacin. Aqu, sin embargo, tenemos que examinar rollovers remotos distintos de la navegacin, en el que rollovers en texto o imagen links cambian imgenes independientes en otra parte de la pgina. Estos vuelcos se utilizan para efectos grficos, slo para mostrar las imgenes alternas, en lugar de como affordances navegacin. Como rollovers navegacin, rollovers remotas requieren JavaScript de implementar, pero en realidad no tiene que escribir el cdigo JavaScript a nosotros mismos. De hecho, podemos utilizar Adobe Dreamweaver para crear un desplazamiento estndar, y luego convertir manualmente a un vuelco a distancia: 1. En Dreamweaver, seleccione Insertar> Objetos de imagen> Imagen de sustitucin. 2. En la forma resultante: Proporcione un nombre de imagen nica, o utilizar el nombre genrico que Dreamweaver sugiere. Proporcione la URL de la imagen original, as como la direccin URL de la imagen de rollover. Marque "imagen de sustitucin Preload". Proporcionar el texto alternativo para la imagen. Escriba "#" (se utiliza cuando la etiqueta <a> no pretende cargar otra pgina) en el "Al hacer clic, ir a URL:" campo.

3. Haga clic en "OK" para que Dreamweaver escribe el cdigo HTML y JavaScript para la reinversin. 4. Quite slo el tag <img /> dentro del tag <a> que Dreamweaver genera, y moverlo al rea de la pgina donde la imagen de sustitucin en realidad debera hacer. 5. Vuelva a colocar la imagen quitado en la etiqueta <a> con el texto o la imagen que en vez debe servir como disparador de vuelco. Independientemente de si se trata de un local o un vuelco a distancia, asegrese de que las dos imgenes son idnticas en tamao, o bien la imagen de sustitucin podra ser aplastada o alargada para adaptarse a la huella de la imagen original.

PRECARGA IMGENES DE SUSTITUCIN La primera vez que cualquier tipo de rollover se invoca, la imagen efecto de intercambio no se puede mostrar de inmediato, porque la imagen de sustitucin debe ser descargada. De hecho, el visitante puede tener mucho que movi el ratn en otro lugar antes de que la imagen de sustitucin est listo para aparecer. La solucin es precargar la imagen, lo que implica la descarga de la imagen de sustitucin en el momento en el resto de la pgina se carga inicialmente, a pesar de que la imagen no ser necesaria hasta ms tarde. De esta manera, la imagen est lista ya la espera de su primera aparicin. En Dreamweaver, puede comprobar "la imagen de precarga" al insertar la renovacin, o puede agregar "precarga" a la imagen ms tarde, en el panel Comportamientos.

Nombre imgenes por funcin, atributos no visuales

Al guardar las imgenes, asegrese de nombrarlos por su funcin, no por algn atributo visual, porque los atributos visuales podran cambiar en el futuro. Digamos que hemos creado un sitio web con los botones rojos de navegacin y botones azules para la presentacin de formularios. Si llamamos a los botones "buttonRed" y "buttonBlue" y luego la combinacin de colores de los cambios en el sitio web, los nombres de los botones carecen de sentido. Por otro lado, si nombramos los botones "buttonSave" y "buttonSubmit", entonces el orden repentina de la Gestin a cambiar el esquema de colores del sitio no nos llena de miedo y, de hecho, es relativamente indolora.

Animacin
Incluyendo animacin es, sin lugar a dudas, tentadora, tal vez incluso ms tentador que todos los elementos grficos-y basada en la fotografa que hemos discutido hasta ahora. Pero a menudo es ms agradable para el diseador para crear lo que es para el espectador de ver. Como "consumidores", tenemos todas las pginas del chapoteo experimentados (pginas introductorias diseados simplemente para entretener) que tardan una eternidad en cargar, no tienen ningn propsito real, son "pegado" a la pgina con ninguna relacin real con el

resto del sitio, y son imposibles de eludir. Todos hemos sufrido una animacin que cenizas continuamente FL en nosotros desde una esquina de la pantalla, atraer (ms como "distraccin") nuestra atencin a pesar de nuestros mejores intentos de ignorarlo. Y todos hemos tolerado (o no) las pginas ms irritantes que tienen varias animaciones que se encienden inmediatamente, todos compitiendo por nuestra atencin. Por ltimo, a pesar de que los usuarios no estamos pensando sobre esto conscientemente, con la animacin nos ponemos al da con el aumento de ficcin le tamaos y tiempos de descarga (ya que todas las animaciones contienen varias imgenes, incluso cuando se almacenan en un formato eficiente como Flash). Aunque la animacin no es intrnsecamente malo, hay que usarlo con moderacin. Si incluso una sola animacin en una pgina puede ser considerada como una animacin de ms, ni siquiera pensar en varias animaciones en una pgina. Por otra parte, la animacin es contraproducente si se distrae de lo que se quiere destacar. Por lo tanto, slo se debe utilizar para llamar la atencin a lo que es ms importante, si usted quiere que su espectador a hacer clic en el botn, entonces podra tener sentido para animar el botn de "venta". Por ltimo, evitar la animacin que se repite sin cesar-que puede ser infinitamente irritante. En su lugar, recorrer un par de veces y luego se detiene, o al menos proporcionar al espectador una manera de detener de forma manual.

Animacin Terminologa
Antes de examinar los formatos de animacin ms comunes, tenemos que ser claros acerca de la terminologa comn. Un marco (llamado una clula en la animacin tradicional) es un dibujo nico dentro de una animacin. Un fotograma clave es el principio o el final de una trayectoria de movimiento. Una bola que despide de animacin podra tener un fotograma clave en la parte superior de su despedida y otro cuando golpea el suelo. Puede haber diez cuadros entre el fotograma clave a nivel del suelo y el fotograma clave en la parte superior del arco de rebote, y otros 10 marcos de la media hacia abajo del rebote. Interpolacin es el proceso de creacin de los "intermedios" tramas entre dos fotogramas clave. La mayora de programas de edicin de animacin puede interpolar automticamente. Es decir, se especifica el principio y fotogramas clave finales, y el nmero de fotogramas / preadolescentes a insertarnos en el medio. Entonces, el programa crea las instancias intermedias con atributos interpolados. Por lo tanto, no habra que crear las diez tramas entre la parte inferior y la parte superior del bote de la pelota, ya que el programa de animacin interpolar por nosotros. Podemos utilizar la interpolacin para hacer algo ms que cambiar la posicin de un objeto. Interpolacin puede interpolar casi cualquier atributo de objeto, de forma que el tamao de color. Por ejemplo, la sombra de la pelota que rebota puede ser interpolada que se hacen ms grandes y de color ms claro que el baln se va para arriba, y ms pequea y oscura como la bola baja. Los ms tweens hay entre dos fotogramas clave, ms suave que aparezca la animacin. Tradicionalmente, la animacin ms suave ha sido siempre deseable. En estos das, la popularidad de algunos dibujos animados de televisin modernos como South Park, con la

animacin muy desigual, ha liberado a los diseadores web para experimentar con la suavidad de la animacin, o la falta de ella. Looping es el proceso de reproducir una animacin en varias ocasiones, ya sea un nmero predeterminado de veces o infinitamente. Papel cebolla se refiere a que muestra todos los marcos y objetos a la vez, en lugar de slo la trama actual. El cuadro actual se encuentra en pleno centro, mientras que los marcos inferiores que no se est editando actualmente estn algo "en gris".

La mayora de los objetos que se repiten en una animacin deben ingresar a la biblioteca de smbolos: un "lugar" eficiente del programa para almacenar cualquier nmero de elementos para su reutilizacin, lo que podra ser familiar de los programas de grficos basados en vectores como Illustrator. Edicin de objetos dentro de la biblioteca se actualiza automticamente cada instancia de ese "smbolo" que se utiliza en su diseo. Otra ventaja de la utilizacin de los smbolos es que el objeto se almacena en el archivo de una sola vez, no importa cuntas veces usted lo utiliza, lo que resulta en un tamao de archivo ms pequeo.

Formatos de Animacin
Hay tres formatos de animacin web comunes: JavaScript, animacin GIF y Flash. JavaScript animacin es mucho ms all del alcance de este libro, porque se trata de conocimientos de programacin bastante pesado. Afortunadamente, sin embargo, se pueden encontrar cientos de guiones, animacin pre-programados gratis en la web, la mayora de los cuales no requieren conocimientos de programacin en absoluto a implementar.

Animacin GIF
GIFs animados pueden ser creados en la mayora de programas de edicin de imgenes que soportan GIF estndar. Un GIF animado se compone de varias imgenes GIF apiladas una encima de la otra. Las imgenes se reproducen en secuencia para simular el movimiento. Como era de esperar, se puede especificar el nmero de veces que la animacin debera bucle y el retardo de tiempo entre los fotogramas. FIGURA 6.38 muestra dos marcos como daban a conocer en la reproduccin de una animacin GIF, y un cuadro con los objetos seleccionados para la edicin.

Desde GIF es un formato de mapa de bits, cada pxel en cada frame GIF debe ser especificado y se representa, lo que significa que el tamao del archivo puede tener gran rapidez, dependiendo de cuntos se utilizan marcos GIF y lo grande que cada uno es. Un GIF animado no requiere un plug-in, basta con incluir el GIF en un tag <img /> como lo hara cualquier otra imagen.

Animaciones Flash
Flash es un programa de grficos basado en vectores, que, como se explic anteriormente, significa que, en ella, se definen formas, en lugar de cada pxel individual. Como los grficos vectoriales son generalmente ms compacto que los grficos de mapas de bits, una animacin Flash suele ser un archivo ms compacto que su GIF animado equivalente. El hecho de que es basado en vectores tambin significa que las animaciones Flash redimensionar bien, sin ninguna prdida de calidad. Una opcin para las animaciones de Flash se especifica que la animacin comienza a reproducirse antes de que se descargue el archivo completo, y el resto del archivo se descarga en el fondo mientras que las secuencias que comienzan estn jugando. El visitante ve contenidos a mayor velocidad, pero al mismo tiempo, la animacin puede ser que necesite para hacer una pausa a mitad de camino a travs de la reproduccin para permitir la descarga para ponerse al da. El formato original de un archivo Flash editable tiene la extensin de archivo. Fla, pero las animaciones se debe exportar a un archivo SWF de slo lectura (Web Pequeo Formato, extensin de archivo. Swf) para su reproduccin en un navegador. Aunque Flash requiere un navegador plug-in en el sistema del espectador, ese plug-in se incluye con todos los navegadores modernos. Adobe afirma que en julio de 2007, el 98,7% de los ordenadores habilitados para Internet incluido Flash Player (www.adobe.com/products/player_census/flashplayer/). Aun as, el remedio para esos pocos visitantes flash con deficiencias restantes es ofrecer la opcin ya sea para descargar Flash Player o para saltar la animacin flash completo. Aunque Flash Player es gratis, programas para crear animaciones Flash a menudo no lo son. Adobe Flash es el programa ms comn para la creacin de animaciones en Flash, por supuesto.

Flash se puede usar para hacer un sitio entero, no slo la animacin. Sitios Flash pueden ser grficamente impresionante, mientras que al mismo tiempo generalmente ms pequeos que los archivos JPG o GIF de pantalla completa equivalentes. Un sitio Flash utiliza lo suficiente HTML para incrustar los archivos SWF y Flash hace que todo lo dems, desde imgenes a texto de los enlaces de navegacin a los datos extrados de una base de datos del servidor. Flash como una herramienta para hacer un sitio entero se analiza un poco ms a fondo en el captulo 4.

Grficos y Accesibilidad
Dado que los grficos son, por su propia naturaleza, un medio visual, nuestro principal objetivo es hacer que la informacin grfica accesible para los lectores de pantalla para personas con discapacidad visual. Hay varias formas en que podemos facilitar esto: Proporcionar alternativas equivalentes para el contenido visual. Como mnimo, cada elemento no es de texto (imgenes, applets, archivos Flash, archivos de vdeo y archivos de audio) debe incluir un atributo alt para describir el propsito del elemento. Aunque el texto alternativo debe ser lo suficientemente completa que el propsito es claro, sino que tambin debe ser lo suficientemente conciso que los visitantes con discapacidad visual no estn demasiado retrasados por descripcin innecesaria. Tenga en cuenta que el suministro no es ms que el nombre del archivo no es generalmente un uso aceptable del atributo alt. Si un elemento no textual es un enlace, llenar el atributo alt con una descripcin del destino del enlace. Si una descripcin ms larga es necesario para cualquier elemento que no sea texto, utilice el atributo longdesc en el tag <img /> para enlazar a otra pgina que contiene la descripcin. Para complejos elementos no textuales como grficos y tablas, complementarlas con descripciones detalladas de textos, ya sea en la propia pgina o accesible por longdesc. Para los elementos que son puramente decorativos, dispondrn de un breve atributo alt (alt = "Logotipo de la Compaa"), o un atributo alt vaco (alt = ""). Bajo ninguna circunstancia se debe omitir el atributo alt. Use los comandos "Informe" en Dreamweaver "Sitio" y para comprobar si hay lapsos de accesibilidad y faltan etiquetas alt. Ver www.w3.org/WAI/, www.usablenet.com/ y www.adobe.com/accessibility/ para obtener ms informacin.

Resumen
Los grficos son crticos en la definicin del ambiente, apelacin, y la profesionalidad de un sitio. Aunque tratamos de ofrecer grficos atractivos, tambin hay que sopesar el equilibrio de aumentar los tiempos de descarga que el uso intensivo de grficos puede acarrear. Guardar

imgenes en el formato adecuado, reduciendo el tamao de imagen y el uso de grficos apropiado puede recorrer un largo camino hacia la minimizacin de los tiempos de descarga.

Lista de verificacin de diseo La siguiente lista de control tiene dos funciones: resumir los puntos principales y "Reglas" se presentan en este captulo, y para ayudar a asegurar que usted ha hecho todo lo que debe antes de finalizar cualquier sitio web que est creando.