4. Recursos visuales Elementos para el diseño Web.
46
4. Recursos visuales Elementos para el diseño Web
-
Upload
saulo-geronimo -
Category
Documents
-
view
9 -
download
2
Transcript of 4. Recursos visuales Elementos para el diseño Web.
4. Recursos visuales
Elementos para el diseño Web
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.
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
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.
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.
Diagramación
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).
“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).
“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.
“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”.
“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”.
La imagen muestra un ejemplo de “heatmap” para
ilustrar las zonas que son más vi stas por el usuario: mientras más rojo, más tiempo estuvo la persona
mirando esa zona; si es azul, simplemente no se detuvo allí.
Las fotografías no siempre son un punto de entrada a las páginas
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”.
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.
Fuentes disponibles
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.
Tamaños de las fuentes
Serif vs. Sanserif
Los usuarios “prefieren letras sans-serif a las que tienen serif, para el caso del texto plano”.
“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”.
“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”.
Antialias
Efecto de suavizado en los bordes Efecto de suavizado en los bordes
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”.
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”.
El interlineado es difícil de manejar en HTML.
Interlineado, justificación
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”.
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.
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.
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
El gráfico muestra la incidencia del largo de la línea en la rapidez de lectura y en la comprensión del texto
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.
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.
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.
Dos ejemplos de jerarquía en los contenidos: a la izquierda una foto que llama la atención por el
tipo de encuadre más su título, acompaña de otros titulares. A la derecha, dos títulos acompañados por imágenes menores, se destacan sobre el listado de títulos de menor importancia.
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.
Color
El diseño web se basa en una paleta segura de 256 colores aunque los monitores despliegan hasta millones de colores.
El diseño web se basa en una paleta segura de 256 colores aunque los monitores despliegan hasta millones de colores.
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ónSi 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ónSi 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.
Resoluciones
Imágenes-profundidad de bit
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
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.
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.
Entrelazados
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.
Slicing
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.
Mapas de imagen
Ejemplo de código html Etiqueta dentro de las mismas llaves, ismap
usemap="nombre_del_mapa". <img src="imagen_del_mapa.gif" width="720" height="528" ismap usemap="#mapa_principal">
Al pie, puede pegarse la definición del mapa de imagen:<map name="mapa_principal"> <area shape="rect" coords="503,15,583,50" href="guestbook.htm" ALT="Section_1"> <area shape="rect" coords="571,90,653,130" href="features.htm" ALT="Section_2"></map>
Pueden definirse zonas activas circulares o poligonales. Dar coordenadas de cada punto o coordenadas del punto de origen y el radio.
<MAP NAME="Mapa_2"> <AREA SHAPE="polygon" COORDS="40, 15, 121, 40, 87, 140, 143, 125, 152, 191, 27, 208, 13,
117, 76, 97, 39, 42" href="guestbook.htm"> </MAP><MAP NAME="Mapa_3"> <AREA SHAPE="circle" COORDS="33,27,23" HREF="front.htm"> </MAP>
Ejemplo de código html Etiqueta dentro de las mismas llaves, ismap
usemap="nombre_del_mapa". <img src="imagen_del_mapa.gif" width="720" height="528" ismap usemap="#mapa_principal">
Al pie, puede pegarse la definición del mapa de imagen:<map name="mapa_principal"> <area shape="rect" coords="503,15,583,50" href="guestbook.htm" ALT="Section_1"> <area shape="rect" coords="571,90,653,130" href="features.htm" ALT="Section_2"></map>
Pueden definirse zonas activas circulares o poligonales. Dar coordenadas de cada punto o coordenadas del punto de origen y el radio.
<MAP NAME="Mapa_2"> <AREA SHAPE="polygon" COORDS="40, 15, 121, 40, 87, 140, 143, 125, 152, 191, 27, 208, 13,
117, 76, 97, 39, 42" href="guestbook.htm"> </MAP><MAP NAME="Mapa_3"> <AREA SHAPE="circle" COORDS="33,27,23" HREF="front.htm"> </MAP>
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.
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.
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.
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
Bordes y esquinas
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.
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; }
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.
