4 Recursos visuales Elementos para el diseo Web

4. Recursos visuales Elementos para el diseño Web

Hacer el sitio accesible 1. 2. 3. 4. 5. Los discapacitados son parte del público. Construir accesible no es más caro. Si el sitio no es accesible no se puede usar. Permite al usuario prepararse para lo que viene. 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

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.

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.

Las fotografías no siempre son un punto de entrada a las páginas “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”.

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”.

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.

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.

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”.

Antialias Efecto de suavizado en los bordes

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”.

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

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.

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 sea n 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 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á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.

Resoluciones Para los monitores. En PC podemos tener hasta 96 px por pulgada. En Mac el máximo es 72 px. Ambos pueden tener resoluciones de despliegue de 768 x 1024 px 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.

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

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.

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.

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.

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.

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>

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.

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.

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

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 CSS 2 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 a { display: block; } #header { float: left; width: 100%; background: yello w; font-size: 93%; lineheight: normal; } #header ul { margin: 0; padding: 0; list-style: none; } #header li { float: left; margin: 0; padding: 0; } #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.