4. Recursos visuales Elementos para el diseño Web.

Presentación del tema: "4. Recursos visuales Elementos para el diseño Web."— Transcripción de la presentación:

1 4. Recursos visuales Elementos para el diseño Web

2 Hacer el sitio accesible 1. Los discapacitados son parte del p ú blico. 2. Construir accesible no es m á s caro. 3. Si el sitio no es accesible no se puede usar. 4. Permite al usuario prepararse para lo que viene. 5. Por Responsabilidad Social. 1. Los discapacitados son parte del p ú blico. 2. Construir accesible no es m á s caro. 3. Si el sitio no es accesible no se puede usar. 4. Permite al usuario prepararse para lo que viene. 5. Por Responsabilidad Social.

3 Manual del diseñador responsable Entender el medio Entender sus herramientas Conocer los materiales Preocuparse de su audiencia Responder a un concepto Ense ñ ar a su cliente Agregar valor Ser innovador Ser valiente Entender el medio Entender sus herramientas Conocer los materiales Preocuparse de su audiencia Responder a un concepto Ense ñ ar a su cliente Agregar valor Ser innovador Ser valiente

4 Diagramación Es la estructura que dará orden a nuestra página. Establece los espacios y las jerarquías. Tiene que ver con la accesibilidad y la navegación. Puede ser a través de frames, tablas o layers.

5 Diagramación

6 Eyetrack Estudios realizados para determinar c ó mo se mueven los ojos en una pantalla, ( Poynter Institute, EU), han determinado que las personas se gu í an por los textos escritos en letras m á s grandes (t í tulos) y luego hacen lecturas parciales de los p á rrafos peque ñ os que los rodean (bajadas o res ú menes). Poynter Institute, Los titulares dominantes a veces atraen el ojo en primer lugar apenas se entra a la p á gina, especialmente cuando ellos est á n en la esquina superior derecha y con alguna frecuencia (no siempre) en la esquina superior derecha, indica el estudio. Estudios realizados para determinar c ó mo se mueven los ojos en una pantalla, ( Poynter Institute, EU), han determinado que las personas se gu í an por los textos escritos en letras m á s grandes (t í tulos) y luego hacen lecturas parciales de los p á rrafos peque ñ os que los rodean (bajadas o res ú menes). Poynter Institute, Los titulares dominantes a veces atraen el ojo en primer lugar apenas se entra a la p á gina, especialmente cuando ellos est á n en la esquina superior derecha y con alguna frecuencia (no siempre) en la esquina superior derecha, indica el estudio.

7 Los ojos se fijan m á s frecuentemente en la esquina superior izquierda de la p á gina; luego permanecen en esa á rea antes de ir a la izquierda o la derecha. S ó lo tras examinar la parte superior de la p á gina por un momento, los ojos exploraron m á s abajo. Las fotografías no siempre son un punto de entrada a las páginas

8 Columnas Los contenidos importantes se deben poner en una columna principal ú nica, de tal manera que los usuarios no tengan que revisar visualmente la p á gina y elegir elementos en un dise ñ o de dos dimensiones. Esto ayuda a quienes tienen problemas de visi ó n y a los usuarios de aparatos port á tiles (como los nuevos tel é fonos) que tienen campo de visi ó n estrecho. Los contenidos importantes se deben poner en una columna principal ú nica, de tal manera que los usuarios no tengan que revisar visualmente la p á gina y elegir elementos en un dise ñ o de dos dimensiones. Esto ayuda a quienes tienen problemas de visi ó n y a los usuarios de aparatos port á tiles (como los nuevos tel é fonos) que tienen campo de visi ó n estrecho.

9 Tipografía "Las letras sirven para formar palabras que, arregladas en frases u oraciones, deben transmitir un pensamiento. Para cumplir esta funci ó n han de ser legibles...". La legibilidad de los textos en la pantalla depende de la buena elecci ó n de la fuente tipogr á fica, del interlineado y del largo de la l í nea escrita. "Las letras sirven para formar palabras que, arregladas en frases u oraciones, deben transmitir un pensamiento. Para cumplir esta funci ó n han de ser legibles...". La legibilidad de los textos en la pantalla depende de la buena elecci ó n de la fuente tipogr á fica, del interlineado y del largo de la l í nea escrita.

10 Fuentes disponibles

11 Tamaño de las fuentes Una Mac trabaja por default a una resoluci ó n de 72 ppp por lo que existe una equivalencia exacta entre punto y p í xel, cosa que no ocurre en un PC con Windows, cuya resoluci ó n de trabajo por defecto es de 96 ppp. Mac: 12 pt ---------- 12 px PC: 12 pt ----------- 16 px Como consecuencia, el tama ñ o de una fuente definida en puntos es diferente en ambos sistemas, por lo que los usuarios de Mac ver á n las fuentes m á s peque ñ as que los de PC. Una Mac trabaja por default a una resoluci ó n de 72 ppp por lo que existe una equivalencia exacta entre punto y p í xel, cosa que no ocurre en un PC con Windows, cuya resoluci ó n de trabajo por defecto es de 96 ppp. Mac: 12 pt ---------- 12 px PC: 12 pt ----------- 16 px Como consecuencia, el tama ñ o de una fuente definida en puntos es diferente en ambos sistemas, por lo que los usuarios de Mac ver á n las fuentes m á s peque ñ as que los de PC.

12 Tamaños de las fuentes

13 Serif vs. Sanserif Los usuarios prefieren letras sans-serif a las que tienen serif, para el caso del texto plano.sans-serif serif las fuentes para pantalla tienen formas más abiertas, ojos más grandes, letras más anchas, mayor altura de x e interletra más generosa. Encajan perfectamente en la retícula de pixeles sin distorsionarse. Los usuarios prefieren letras sans-serif a las que tienen serif, para el caso del texto plano.sans-serif serif las fuentes para pantalla tienen formas más abiertas, ojos más grandes, letras más anchas, mayor altura de x e interletra más generosa. Encajan perfectamente en la retícula de pixeles sin distorsionarse.

14 Antialias Efecto de suavizado en los bordes

15 Interlineado Interlineado del texto: una investigaci ó n de la Wichita University,EU; muestra que el uso de espacio blanco promedio entre p á rrafos produce mayores niveles de satisfacci ó n y mayor preferencia que los textos muy densos o aquellos que usan mucho espacio entre ellos. investigaci ó n El interlineado es dif í cil de manejar en HTML. Interlineado del texto: una investigaci ó n de la Wichita University,EU; muestra que el uso de espacio blanco promedio entre p á rrafos produce mayores niveles de satisfacci ó n y mayor preferencia que los textos muy densos o aquellos que usan mucho espacio entre ellos. investigaci ó n El interlineado es dif í cil de manejar en HTML.

16 Interlineado, justificación

17 Caracteres 80 – 100 caracteres por línea es lo más adecuado en términos de rapidez de lectura. No obstante, la comprensión no es la mejor a este tamaño. los usuarios indican que leyendo párrafos de 95 caracteres por línea tenían la sensación de obtener más información de una página de manera más rápida aunque los estudios no son un á nimes, es preferible usar renglones de tama ñ o medio (60-80 cpl) antes que los de tama ñ o largo o corto. Adem á s, é stos son los preferidos de los usuarios. 80 – 100 caracteres por línea es lo más adecuado en términos de rapidez de lectura. No obstante, la comprensión no es la mejor a este tamaño. los usuarios indican que leyendo párrafos de 95 caracteres por línea tenían la sensación de obtener más información de una página de manera más rápida aunque los estudios no son un á nimes, es preferible usar renglones de tama ñ o medio (60-80 cpl) antes que los de tama ñ o largo o corto. Adem á s, é stos son los preferidos de los usuarios.

18 El ancho m á ximo del texto en pantalla deber á ir desde 60 cpl a 100 cpl. Menos que esa medida causar á molestia y distracci ó n en el usuario y m á s, atentar á contra la legibilidad de lo escrito. Aunque la diagramaci ó n ocupe el ancho total de la ventana o pantalla, el texto deber á tener l í mites concretos en su ancho y no estirarse junto con el sitio.

19 Ancho de columna El gr á fico muestra la incidencia del largo de la l í nea en la rapidez de lectura y en la comprensi ó n del texto

20

21 Disposición de bloques de texto Debe haber: Un titular que describa de forma clara el tema tratado. Un resumen de la informaci ó n ofrecida. Una serie de palabras clave destacadas (en forma de v í nculos, utilizando variables tipogr á ficas o cambios de color). Segementaci ó n de los contenidos en unidades m á s peque ñ as, reforzadas con í ndices y listas con items. Subt í tulos significativos, ú tiles. Una idea por p á rrafo. La mitad o menos de palabras que las que normalmente se utilizan en textos impresos. Debe haber: Un titular que describa de forma clara el tema tratado. Un resumen de la informaci ó n ofrecida. Una serie de palabras clave destacadas (en forma de v í nculos, utilizando variables tipogr á ficas o cambios de color). Segementaci ó n de los contenidos en unidades m á s peque ñ as, reforzadas con í ndices y listas con items. Subt í tulos significativos, ú tiles. Una idea por p á rrafo. La mitad o menos de palabras que las que normalmente se utilizan en textos impresos.

22 Consejos generales No abusar de la may ú sculas: S ó lo al principio de cada frase, nombres propios, t í tulos y subt í tulos. No usar textos de peque ñ o tama ñ o en tipos serif: se deforman y se hacen ilegibles. No abusar de las letras en cursiva: dif í cil de leer en pantalla. La inclinaci ó n provoca escalonado en los bordes de las letras y las deforma, m á s en tama ñ os peque ñ os. No abusar de los textos en negrita: s ó lo para reforzar importancia de un texto. Al dibujarla en pantalla se a ñ aden pixeles en los bordes. Peque ñ a produce efecto emborronado, grande produce efecto de escalonamiento. No usar, y menos a ú n abusar, de los efectos de parpadeo o deslizamiento: son irritantes, marean y confunden al usuario. No usar demasiados tipos de fuentes ni demasiados colores diferentes: rompen la armon í a. Riesgo de que el usuario no tenga alguna de las fuentes usadas instaladas y sean sustituidas. Cuidar la accesibilidad de la informaci ó n: si usamos caracter í sticas no compatibles con el sistema estamos eliminando visitantes Usar enlaces visualmente independientes: que los enlaces de la p á gina se distingan claramente del resto del texto. Presentar el texto de una forma l ó gica Usar siempre caracteres compatibles con el est á ndar: ASCII (letras, n ú meros, signos de puntuaci ó n y caracteres especiales como los tabuladores). ISO 8859-1 ó ISO Latin-1, es necesario especificarlo en la cabecera de la p á gina mediante la etiqueta CHARSET. A partir de HTML 4.0, se ha tomado como est á ndar el juego UNICODE. No abusar de la may ú sculas: S ó lo al principio de cada frase, nombres propios, t í tulos y subt í tulos. No usar textos de peque ñ o tama ñ o en tipos serif: se deforman y se hacen ilegibles. No abusar de las letras en cursiva: dif í cil de leer en pantalla. La inclinaci ó n provoca escalonado en los bordes de las letras y las deforma, m á s en tama ñ os peque ñ os. No abusar de los textos en negrita: s ó lo para reforzar importancia de un texto. Al dibujarla en pantalla se a ñ aden pixeles en los bordes. Peque ñ a produce efecto emborronado, grande produce efecto de escalonamiento. No usar, y menos a ú n abusar, de los efectos de parpadeo o deslizamiento: son irritantes, marean y confunden al usuario. No usar demasiados tipos de fuentes ni demasiados colores diferentes: rompen la armon í a. Riesgo de que el usuario no tenga alguna de las fuentes usadas instaladas y sean sustituidas. Cuidar la accesibilidad de la informaci ó n: si usamos caracter í sticas no compatibles con el sistema estamos eliminando visitantes Usar enlaces visualmente independientes: que los enlaces de la p á gina se distingan claramente del resto del texto. Presentar el texto de una forma l ó gica Usar siempre caracteres compatibles con el est á ndar: ASCII (letras, n ú meros, signos de puntuaci ó n y caracteres especiales como los tabuladores). ISO 8859-1 ó ISO Latin-1, es necesario especificarlo en la cabecera de la p á gina mediante la etiqueta CHARSET. A partir de HTML 4.0, se ha tomado como est á ndar el juego UNICODE.

23 Jerarquía M á s grande = m á s importante = m á s le í do ¿Qué quiere decir? ¿Cuál es el mensaje que quiere dar? ¿Qué objetivo quiere conseguir? Se debe poner lo más importante primero y así ir ofreciendo lo siguiente en orden decreciente de relevancia. M á s grande = m á s importante = m á s le í do ¿Qué quiere decir? ¿Cuál es el mensaje que quiere dar? ¿Qué objetivo quiere conseguir? Se debe poner lo más importante primero y así ir ofreciendo lo siguiente en orden decreciente de relevancia.

24

25 Márgenes M á rgenes del texto: otra investigaci ó n, demostr ó adem á s que la legibilidad de un texto aumenta cuando hay espacios adecuados en los m á rgenes de las l í neas, respecto de si é stas est á n ajustadas a los bordes de la p á gina. Si bien con m á rgenes amplios la lectura es m á s lenta, la comprensi ó n aumenta. M á rgenes del texto: otra investigaci ó n, demostr ó adem á s que la legibilidad de un texto aumenta cuando hay espacios adecuados en los m á rgenes de las l í neas, respecto de si é stas est á n ajustadas a los bordes de la p á gina. Si bien con m á rgenes amplios la lectura es m á s lenta, la comprensi ó n aumenta.

26 Color El diseño web se basa en una paleta segura de 256 colores aunque los monitores despliegan hasta millones de colores.

27 Resoluciones Para los monitores. En PC podemos tener hasta 96 px por pulgada. En Mac el m á ximo es 72px. Ambos pueden tener resoluciones de despliegue de 768x1024px y hasta m á s, en millones de colores. Las im á genes tambi é n dependen de la resoluci ó n Si disminuimos la resoluci ó n de la imagen, la anchura y la altura aumentar á n. Si aumentamos la resoluci ó n, la anchura y la altura disminuir á n. Si aumentamos la anchura o la altura, la resoluci ó n disminuir á. Si disminuimos la anchura o la altura, la resoluci ó n aumentar á. Cuando la resoluci ó n de la imagen es m á s alta que la resoluci ó n del monitor aparece la imagen en pantalla m á s grande que sus dimensiones especificadas para la impresi ó n. Para los monitores. En PC podemos tener hasta 96 px por pulgada. En Mac el m á ximo es 72px. Ambos pueden tener resoluciones de despliegue de 768x1024px y hasta m á s, en millones de colores. Las im á genes tambi é n dependen de la resoluci ó n Si disminuimos la resoluci ó n de la imagen, la anchura y la altura aumentar á n. Si aumentamos la resoluci ó n, la anchura y la altura disminuir á n. Si aumentamos la anchura o la altura, la resoluci ó n disminuir á. Si disminuimos la anchura o la altura, la resoluci ó n aumentar á. Cuando la resoluci ó n de la imagen es m á s alta que la resoluci ó n del monitor aparece la imagen en pantalla m á s grande que sus dimensiones especificadas para la impresi ó n.

28 Resoluciones

29 Imágenes-profundidad de bit

30 Formatos gráficos GIF Compresi ó n: Bueno para dibujos, con colores lisos o fotos peque ñ as. Transparencia: en ciertas partes del dibujo cualquier color. Efecto silueta. Colores: Utiliza paletas de colores (256 colores o menos). Menos colores menos peso del archivo. 256 colores 32 colores 4 colores GIF Compresi ó n: Bueno para dibujos, con colores lisos o fotos peque ñ as. Transparencia: en ciertas partes del dibujo cualquier color. Efecto silueta. Colores: Utiliza paletas de colores (256 colores o menos). Menos colores menos peso del archivo. 256 colores 32 colores 4 colores

31 Formatos gráficos JPG Compresi ó n: Algoritmo de compresi ó n hace ideal para guardar fotograf í as. Se puede definir la calidad de la imagen, con calidad baja el fichero ocupar á menos, y viceversa. Transparencia: No tiene posibilidad de crear á reas transparentes. Para que una imagen parezca transparente hacer que el fondo de la imagen sea el mismo que el de la p á gina donde se quiere colocar. Colores: JPG trabaja siempre con 16 millones de colores, ideal para fotograf í as. JPG Compresi ó n: Algoritmo de compresi ó n hace ideal para guardar fotograf í as. Se puede definir la calidad de la imagen, con calidad baja el fichero ocupar á menos, y viceversa. Transparencia: No tiene posibilidad de crear á reas transparentes. Para que una imagen parezca transparente hacer que el fondo de la imagen sea el mismo que el de la p á gina donde se quiere colocar. Colores: JPG trabaja siempre con 16 millones de colores, ideal para fotograf í as.

32

33 Formatos gráficos PNG: Portable network graphics. No funciona con versiones anteriores de los navegadores. Colores: Incluye cualquier modo de color. Compresi ó n: sin p é rdidas. Peso menor a los gif correspondientes. A color completo son algo mayores que los jpg, la calidad es perfecta. Transparencia: es graduada. Posibilita la fusi ó n perfecta con los fondos. Es extensible: se puede incluir informaci ó n adicional, la cual es simplemente ignorada en un visor que no la reconozca. PNG: Portable network graphics. No funciona con versiones anteriores de los navegadores. Colores: Incluye cualquier modo de color. Compresi ó n: sin p é rdidas. Peso menor a los gif correspondientes. A color completo son algo mayores que los jpg, la calidad es perfecta. Transparencia: es graduada. Posibilita la fusi ó n perfecta con los fondos. Es extensible: se puede incluir informaci ó n adicional, la cual es simplemente ignorada en un visor que no la reconozca.

34 Entrelazados

35 Pensar en las opciones Verificar la estructura de la p á gina para que el navegador la muestre correctamente: 1.Un mapa de imagen con la imagen completa. Resolverse con pocos colores y que contenga grandes á reas homog é neas. 2.Cortar el prototipo en fragmentos que se optimizar á n separadamente; algunos trozos no se guardar á n como gr á ficos, sino que ser á n casillas de una tabla, o el fondo mismo de la p á gina. Verificar la estructura de la p á gina para que el navegador la muestre correctamente: 1.Un mapa de imagen con la imagen completa. Resolverse con pocos colores y que contenga grandes á reas homog é neas. 2.Cortar el prototipo en fragmentos que se optimizar á n separadamente; algunos trozos no se guardar á n como gr á ficos, sino que ser á n casillas de una tabla, o el fondo mismo de la p á gina.

36 Slicing

37 Mapas de imagen Adapta los enlaces a una distribuci ó n de im á genes compleja para recrearla en forma de tablas y peque ñ as im á genes. Definir los hotspots. Admiten los eventos de javascript. Se pueden reutilizar una vez definidos. Se puede actualizar todo un sistema de navegaci ó n para una web cambiando s ó lo las im á genes. No hay que tocar el c ó digo html, siempre que se hayan mantenido las zonas activas en posiciones constantes. Son compatibles con cualquier navegador que existe. En cambio, determinados efectos de mouseover o dhtml funcionan s ó lo con las ú ltimas versiones de navegadores. Si no se cargan las im á genes, el mapa sigue siendo activo. A ñ adir etiqueta textual paramejorar identificaci ó n. Usos Mapas, digramas y todo aquello que en el dise ñ o ser í a dif í cil seccionar. Funcionan tambi é n sobre texto. Adapta los enlaces a una distribuci ó n de im á genes compleja para recrearla en forma de tablas y peque ñ as im á genes. Definir los hotspots. Admiten los eventos de javascript. Se pueden reutilizar una vez definidos. Se puede actualizar todo un sistema de navegaci ó n para una web cambiando s ó lo las im á genes. No hay que tocar el c ó digo html, siempre que se hayan mantenido las zonas activas en posiciones constantes. Son compatibles con cualquier navegador que existe. En cambio, determinados efectos de mouseover o dhtml funcionan s ó lo con las ú ltimas versiones de navegadores. Si no se cargan las im á genes, el mapa sigue siendo activo. A ñ adir etiqueta textual paramejorar identificaci ó n. Usos Mapas, digramas y todo aquello que en el dise ñ o ser í a dif í cil seccionar. Funcionan tambi é n sobre texto.

38 Mapas de imagen Ejemplo de c ó digo html Etiqueta dentro de las mismas llaves, ismap usemap="nombre_del_mapa". Al pie, puede pegarse la definici ó n del mapa de imagen: Pueden definirse zonas activas circulares o poligonales. Dar coordenadas de cada punto o coordenadas del punto de origen y el radio. Ejemplo de c ó digo html Etiqueta dentro de las mismas llaves, ismap usemap="nombre_del_mapa". Al pie, puede pegarse la definici ó n del mapa de imagen: Pueden definirse zonas activas circulares o poligonales. Dar coordenadas de cada punto o coordenadas del punto de origen y el radio.

39 Mapas de imagen Se puede mantener constante la definici ó n del mapa de imagen y cambiar para cada secci ó n de la web el archivo de imagen que lleva asociado. Es posible actualizar todos los mapas de imagen de un sitio modificando un s ó lo fichero. Basta asignar todos los mapas de imagen a una sola definici ó n, situada en un fichero html en concreto. Se pueden asignar acciones din á micas tipo mouseover o semejantes a una zona activa de un mapa de imagen. Se puede mantener constante la definici ó n del mapa de imagen y cambiar para cada secci ó n de la web el archivo de imagen que lleva asociado. Es posible actualizar todos los mapas de imagen de un sitio modificando un s ó lo fichero. Basta asignar todos los mapas de imagen a una sola definici ó n, situada en un fichero html en concreto. Se pueden asignar acciones din á micas tipo mouseover o semejantes a una zona activa de un mapa de imagen.

40 Efectos visuales no gráficos HTML, JAVA, CSS, Flash y otras tecnologías Considerar que parte de la audiencia no lograr á acceder a esos contenidos por una inadecuada configuraci ó n de su navegador. Cuando existe una diferencia muy significativa de tama ñ o de archivos, complejidad y efectividad, debe apostarse por la alternativa que resulta m á s claramente favorable. En caso de que realmente no haya una gran diferencia es mejor utilizar el html convencional. HTML, JAVA, CSS, Flash y otras tecnologías Considerar que parte de la audiencia no lograr á acceder a esos contenidos por una inadecuada configuraci ó n de su navegador. Cuando existe una diferencia muy significativa de tama ñ o de archivos, complejidad y efectividad, debe apostarse por la alternativa que resulta m á s claramente favorable. En caso de que realmente no haya una gran diferencia es mejor utilizar el html convencional.

41 Java Los applets de Java pueden aportar funciones extendidas. No es aconsejable que tengan un papel imprescindible a partir de las p á ginas iniciales. Los problemas de configuraci ó n en los usuarios son comunes y por tanto es conveniente preparar un sitio que ofrezca la mayor parte de contenidos y recursos sin Java, y ubicar los applets en p á ginas concretas. Avisar de que el funcionamiento correcto de é stas depende de la correcta configuraci ó n del navegador. Java Los applets de Java pueden aportar funciones extendidas. No es aconsejable que tengan un papel imprescindible a partir de las p á ginas iniciales. Los problemas de configuraci ó n en los usuarios son comunes y por tanto es conveniente preparar un sitio que ofrezca la mayor parte de contenidos y recursos sin Java, y ubicar los applets en p á ginas concretas. Avisar de que el funcionamiento correcto de é stas depende de la correcta configuraci ó n del navegador.

42 Fondos de repetición Un fondo puede hacerse a partir de repetición de grupos de pixeles a través de una imagen. Con código se repiten. Pueden ser sólidos, degradados o imágenes gif o jpg Un fondo puede hacerse a partir de repetición de grupos de pixeles a través de una imagen. Con código se repiten. Pueden ser sólidos, degradados o imágenes gif o jpg

43 Bordes y esquinas

44 Menú con solapas o pestañas CSS Una ventaja de CSS es la capacidad de superponer im á genes de fondo, lo que permite pasar una sobre otra para crear ciertos efectos. El estado actual de CSS2 requiere un elemento separado de HTML para cada imagen de fondo. Uno de estos casos es la navegaci ó n por pesta ñ as o solapas. Estos sistemas continuamente ganan popularidad como sistema b á sico de navegaci ó n en un sitio. CSS Una ventaja de CSS es la capacidad de superponer im á genes de fondo, lo que permite pasar una sobre otra para crear ciertos efectos. El estado actual de CSS2 requiere un elemento separado de HTML para cada imagen de fondo. Uno de estos casos es la navegaci ó n por pesta ñ as o solapas. Estos sistemas continuamente ganan popularidad como sistema b á sico de navegaci ó n en un sitio.

45 Pestañas con CSS inline, floats clear #header { float:left; width:100%; background:yellow; font-size:93%; line- height:normal; } #header ul { margin:0; padding:0; list-style:none; } #header li { float:left; margin:0; padding:0; } #header a { display:block; } #header li { float:left; background:url("norm_ right.gif") no-repeat right top; margin:0; padding:0; } #header a { display:block; } #header li { float:left; background:url("norm_ right.gif") no-repeat right top; margin:0; padding:0; }

46 Flash Bueno s ó lo para ciertos objetivos. Hay un uso indiscriminado -e inadecuado- en la web actual. Muchos de esos efectos pueden crearse de forma m á s sencilla con otros recursos. A veces las pel í culas son un obst á culo para acceder al contenido. La descarga de enormes animaciones que nada aportan es irritante para el usuario, que se pregunta ¿ para esto he tenido que esperar tanto? Flash debe utilizarse s ó lo cuando resuelva situaciones que dif í cilmente pueden abordarse con otros recursos. Flash Bueno s ó lo para ciertos objetivos. Hay un uso indiscriminado -e inadecuado- en la web actual. Muchos de esos efectos pueden crearse de forma m á s sencilla con otros recursos. A veces las pel í culas son un obst á culo para acceder al contenido. La descarga de enormes animaciones que nada aportan es irritante para el usuario, que se pregunta ¿ para esto he tenido que esperar tanto? Flash debe utilizarse s ó lo cuando resuelva situaciones que dif í cilmente pueden abordarse con otros recursos.