4. Recursos visuales

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.

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

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).
• 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.

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.

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.

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

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
(No Transcript)
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.

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.

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.

24
(No Transcript)
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.

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.

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

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.

32
(No Transcript)
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.

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.

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.

38
Mapas de imagen

• Ejemplo de código html
• Etiqueta dentro de las mismas llaves, ismap
• usemap"nombre_del_mapa".
• ltimg src"imagen_del_mapa.gif" width"720"
  height"528" ismap usemap"mapa_principal"gt
• Al pie, puede pegarse la definición del mapa de
  imagen
• ltmap name"mapa_principal"gt
• ltarea shape"rect" coords"503,15,583,50"
  href"guestbook.htm" ALT"Section_1"gt
• ltarea shape"rect" coords"571,90,653,130"
  href"features.htm" ALT"Section_2"gt
• lt/mapgt
• Pueden definirse zonas activas circulares o
  poligonales. Dar coordenadas de cada punto o
  coordenadas del punto de origen y el radio.
• ltMAP NAME"Mapa_2"gt
• ltAREA SHAPE"polygon" COORDS"40, 15, 121, 40,
  87, 140, 143, 125, 152, 191, 27, 208, 13, 117,
  76, 97, 39, 42" href"guestbook.htm"gt
• lt/MAPgt
• ltMAP NAME"Mapa_3"gt
• ltAREA SHAPE"circle" COORDS"33,27,23"
  HREF"front.htm"gt
• lt/MAPgt

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.

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.

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.

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

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.

45
Pestañas con CSS
inline , floats clear

• header a
• displayblock
• header li
• floatleft
• backgroundurl("norm_right.gif")
• no-repeat right top
• margin0
• padding0

header floatleft width100
backgroundyellow font-size93
line-heightnormal
header ul margin0 padding0
list-stylenone header li
floatleft margin0 padding0
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.