Está en la página 1de 54

D

NOTAS DE CLASE
SOBRE

COMUNICACIN Y DISEO DE PGINAS WEB, 1

1- La percepcin visual en la comunicacin 2 - El significado en la composicin 3 - Movimiento, proporcin y forma 4 - Sobre la representacin del conocimiento

Espacio reservado para notas y apuntes personales

1 La Percepcin visual en la Comunicacin


1: La percepcin en el marco de la evolucin del hombre.
As pues, me propongo considerar al hombre en primer lugar como parte del mundo animal y en segundo lugar como algo diferente, en algunos aspectos slo, de los animales... W.H. Thorpe

2: El procesamiento de la informacin que recibimos. 3: Qu es ver?


Es difcil para mucha gente aceptar que lo que ven es una interpretacin simblica del mundo - todo parece verdaderamente real. Pero de hecho no tenemos conocimiento directo de los objetos del mundo. Esto es una ilusin producida por la gran eficiencia del sistema... Francis Crick

4: La primera aproximacin: el paralelismo ojo / cmara. a) El papel de la fovea centralis en el diseo y la visin b) Algo sobre la distribucin celular 5: Principios de organizacin holstica de la percepcin. a) Organizacin fondo / figura / significado b) Formas de presentarse el principio de economa visual c) El principio de complementariedad 6: Las formas primarias y su uso en la creacin grfica. Permetro / Geometra / Contraste / Pregnancia Encapsulado 7: El uso de las constancias perceptivas: concepto y aplicaciones. a) En la forma. b) En el color. c) En el tamao.

Espacio reservado para notas y apuntes personales

8: En busca de elementos para formar la tercera dimensin. a) La presencia de gradientes en la vida cotidiana. b) Los efectos de luz: propia, reflejada, dura, difusa... c) La eficacia de la ocultacin parcial: traslapo. d) El movimiento y su relacin con el volumen.

2. El significado en la composicin grfica


1: El campo perceptivo como dinmica de flujos de informacin:

2: Anomala perceptiva: un concepto bsico en la lectura de la informacin, directamente aplicable a la produccin de diseo icnico de todo tipo: grfico, multimedia, sealtico, corporativo... En el campo visual podemos distinguir: - Imgenes latentes - Imgenes salientes - Imgenes pregnantes 3: Usos de las diferentes formas de anomalas perceptivas:
Profesor: Juan Martnez -Val

3
www.juanval.net

a) Semnticas: choque en un significado presente. La funcionalidad biolgica del significado. La funcionalidad pragmtica. b) Formales: gran contraste en una de las formas usadas. c) Cromticas: contraste en una parcela del campo visual.

Espacio reservado para notas y apuntes personales

4: La lectura del espacio en los seres humanos. El concepto de campo anisotrpico: diferencias en la lectura en el campo visual. a) Origen evolutivo de la lectura del espacio. b) Anisotropa arriba / abajo. c) Anisotropa derecha / izquierda.

5: Lectura anisotrpica y estilos artsticos de composicin pictrica: entre la biologa y la cultura. Dos puntos de vista que no son irreconciliables. 6: Verticales y horizontales; tensin y relajacin en las tradiciones grficas del mundo occidental. Tradicin clsica versus tradicin nrdica. Clasicismo y romanticismo. 7: Imgenes naturales e imgenes tcnicas: lo que las imgenes parecen y lo que las imgenes son. Dos maneras opuestas de considerar la informacin contenida en una imagen. 8: Factor narrativo: un nuevo concepto de informacin icnica para ser usado de manera consciente y premeditada. La imagen suspendida en un instante temporal que necesita ser resuelto.

Profesor: Juan Martnez -Val

4
www.juanval.net

Espacio reservado para notas y apuntes personales

3. Tres aspectos de la imagen: Movimiento, proporcin y forma.


1: El movimiento de los objetos y de las cosas que nos rodean es de gran importancia para el sistema visual por razones bastante obvias: permite que actuemos de manera adecuada a una situacin dada. 2: Dos tpicas percepciones errneas del movimiento son las llamadas movimiento aparente y efecto del poste del barbero. Ambas se usan en la red. La primera puede apreciarse en los movimientos de los radios de una rueda, que giran en sentido inverso, o ms deprisa o despacio que el resto de la rueda. La segunda genera un movimiento global, corpreo. 3: El cerebro usa dos sistemas para el procesamiento del movimiento. Son los llamados: sistema de rango estrecho sistema de rango amplio El sistema de rango estrecho no distingue objetos o cambios formales, simplemente variaciones en los patrones de luz. Es la deteccin del movimiento puro, no del movimiento de un objeto. El sistema de rango amplio registra el movimiento de objetos. 4: El cerebro posee algunas herramientas especficas para la deteccin y valoracin del movimiento. Tres importantes son: La dilatacin: Forma que aumenta de tamao gradualmente. . El movimiento de campo conjunto . . Los gradientes secuenciados de movimiento: flujo visual. El uso en la red de estas tres formas no ofrece especiales dificultades tcnicas. El problema suele radicar en encontrar un uso adecuado y justificado.

Profesor: Juan Martnez -Val

5: Proporcin: la relacin formal entre objetos como valor independiente. La proporcin es un objeto visual y esttico. 6: La base matemtica de la proporcin y su correspondencia en la esttica: proporciones dinmicas y proporciones estticas. Las proporcionalidades enteras.

5
www.juanval.net

Espacio reservado para notas y apuntes personales

. Proporciones algebraicas: nmero de oro, ; 2, 3, 5 ... La serie de Fibonaci: 1, 1, 2, 3, 5, 8, 13, 21 ... 7: La forma como concepto. Sus diversas consideraciones: Como constructo o convencin social. Como elemento constructivo para el creador. Como expresin de las posibilidades de un material. Como necesidad marcada por una funcin. 8: La forma como metfora. Algunos modelos.

Profesor: Juan Martnez -Val

6
www.juanval.net

Espacio reservado para notas y apuntes personales

5. Sobre la representacin del conocimiento.


1: Percepcin y cognicin: un viejo dilema con un enfoque moderno. a) La mente y los sentidos: Aristteles. b) Filognesis y cultura: lo que sabemos al nacer. c) Informacin corprea e informacin extracorprea. 2: El papel de la memoria en el conocimiento: de los viejos de la tribu al CD Rom. a) La memoria y el tiempo: sensorial, corto plazo, largo plazo. b) Memorias: conceptual, procedural y episdica. c) Memorias especficas: rostros, palabras, msicas... 3: El uso de la memoria: establecer relaciones, multiplicar las conexiones y preocuparse por la recuperacin de la informacin. - Los vnculos repetidos tienden a reforzarse. - Los vnculos con significado se repiten ms. 4: La importancia del significado: el mero hecho de saber algo tiene capacidad para modificar toda nuestra conducta: El hombre que saba demasiado. - La falsa linealidad del lenguaje. - Relaciones sintagmticas y relaciones paradigmticas. - Todo concepto se da en un contexto. - Relaciones semnticas: taxonmicas / funcionales. - Cadenas semnticas: hacia la conduccin del mensaje. - Campos semnticos: el mar de los significados. 5: Concepto y memoria en el aprendizaje: el aprendizaje significativo. - La memoria asemntica en la infancia. - Pensamiento concreto y pensamiento formal. - Piaget y la evolucin de la madurez mental.

Profesor: Juan Martnez -Val

7
www.juanval.net

Espacio reservado para notas y apuntes personales

Una representacin grfica del papel del conocimiento previo en la comunicacin y el aprendizaje.

Aplicaciones a las comunicaciones en la red: pblicos potenciales, uso de iconos / objeto o de iconos / conceptos. 6: Diversos modos de pensamiento? - Pensamiento convergente: la lgica del camino nico. - Pensamiento divergente: en busca de alternativas. 7: Imgenes mentales: mapas cognitivos con funciones expresas. - Imagen mental e imagen percibida. - La imagen mental y la creatividad. - La imagen mental en el espacio y en el tiempo. - La imagen mental durante la exploracin web.

Profesor: Juan Martnez -Val

8
www.juanval.net

NOTAS DE CLASE
SOBRE

COMUNICACIN Y DISEO DE PGINAS WEB, 2

5- Visualizacin de informacin

PROFESOR: JUAN MARTNEZ - VAL

PARA MS INFORMACIN CONSULTAR LAS PGINAS DEL AUTOR EN www.juanval.net.

Espacio reservado para notas y apuntes personales

5. Visualizacin de Informacin
1: Comunicar con imgenes. Un fenmeno complejo que presenta numerosas variantes. Trataremos algunas: a) Micro y macrolecturas de las imgenes. b) Segmentacin y separacin de elementos icnicos c) Mltiples visuales d) El color como informacin e) Narracin del tiempo y del espacio Cada uno de estos puntos de vista presenta utilidades comunicativas distintas, que hay que aprender a usar segn los casos. 2: Micro y macrolecturas. La fluctuacin entre: una visin holstica una visin estructural y una visin del detalle y una visin particular

Profesor: Juan Martnez -Val

2
www.juanval.net

Michel Etienne Turgot, Plano de Pars (1739), fragmento.

Espacio reservado para notas y apuntes personales

Una versin moderna del mismo concepto de imagen la encontramos en el Mapa Isomtrico de Manhattan, 1989, Realizado por The Manhattan Map Company.

3. Segmentacin y separacin. Las imgenes permiten combinar mltiples miradas, puntos de vista y momentos, sin que por ello tengan que perder su unidad grfica o entidad visual. Esta propiedad es un factor de comunicacin de gran importancia, que permite construir imgenes de enorme poder informativo.

Profesor: Juan Martnez -Val

3
www.juanval.net

La imagen muestra el despiece de una copiadora IBM, que sirve tambin para catalogar todas sus piezas.

Espacio reservado para notas y apuntes personales

4. Teorema de Josef Albers: 1 + 1 = 3 e incluso ms.

+ + +

= = =

Abajo, un ejemplo de cmo los bordes comen informacin, a travs del principio 1 + 1 = 3, ya que se forman calles y contracalles blancas y negras que entorpecen la visualizacin. Ms abajo an, una solucin mejor: sin bordes y con un uso discreto del color.

Profesor: Juan Martnez -Val

4
www.juanval.net

Espacio reservado para notas y apuntes personales

5. Pequeos mltiples: la imagen informa de varias cosas que forman una unidad o la representa desde diversos puntos de vista.

Esta imagen de Christiaan Huygens, 1659, muestra 32 pequeos Saturnos, contemplados en distinto tiempo y desde distintos puntos de vista, que hacen comprensible la visin del planeta a lo largo de su rbita solar. La siguiente imagen, de un libro de caligrafa japons, muestra diversos momentos en el trazado de un signo, vistos desde dos puntos de vista. Uno informa sobre el movimiento del pincel; el segundo sobre su relacin vertical con el papel.

Profesor: Juan Martnez -Val

5
www.juanval.net

En la pgina siguiente, se reproduce una pgina del Johnsons New Atlas, de 1864, en el que se comparan ros y montaas del mundo. La parte de los ros es especialmente notable, ya que si bien la geografa no se respeta en su totalidad, la longitud y diversos aspectos de su transcurso quedan claramente reflejados. Obsrvese la presencia de los principales afluentes as como de lagos y deltas.

Espacio reservado para notas y apuntes personales

6. El color como informacin: No es fcil usarlo bien. Este mapa del Bureau of the Census de EEUU, muestra un uso inadecuado del color, que acta ms desinformando que estableciendo una diferenciacin clara de las partes a distinguir.

Profesor: Juan Martnez -Val

6
www.juanval.net

Espacio reservado para notas y apuntes personales

Cuando encontramos un uso similar en la web o los ordenadores, los efectos pueden ser devastadores, como puede apreciarse en las pginas reproducidas ms abajo. En vez de adornar, el uso incorrecto del color destruye el contenido.

Por el contrario, un uso adecuado del color, como en la reproduccin del mapa de la International Hydrographic Organitation, de Ottawa, Canad, ayuda a la comprensin del contenido. Algo que, desgraciadamente, no sucede con toda la cartografa que encontramos en la red o impresa.

Profesor: Juan Martnez -Val

7
www.juanval.net

Espacio reservado para notas y apuntes personales

Exponemos a continuacin algunas normas elementales para el uso del color en la comunicacin, que desgraciadamente no son tan conocidas como se debiera: 1 Norma: Utilizar el color manteniendo una relacin inversamente proporcional entre la saturacin y la superficie que ocupa. Es decir, colores muy brillantes y saturados deben ocupar las superficies ms pequeas del grfico; colores menos saturados y ms tranquilos, las superficies amplias. 2 Norma: Usar gamas que den entonaciones familiares y armnicas, evitando saltos cromticos chisporroteantes, que entorpecen y confunden la visin. 3 Norma: Usar grises para matizar y suavizar los colores, sobre todo cuando estn destinados a superfcies grandes. Agrisar suavemente un azul o un verde, por ejemplo, dar un resultado mejor que utilizarlos puros para un fondo de un sitio web. 4 Norma: Cuando un color se cierra con un perfil, que lo separa de otro color, parece ms oscuro. Por ejemplo:

El gris del rectngulo interior es el mismo en ambas imgenes.


Profesor: Juan Martnez -Val

7. Representacin del espacio y del tiempo. En numerosos casos, se usan imgenes para dar informacin de sucesos que tienen lugar en un tiempo o en un espacio determinado. Estas imgenes pueden contener, o no, gran nmero de letras

8
www.juanval.net

Espacio reservado para notas y apuntes personales

o palabras. Pero esto no garantiza que funcionen. Un caso es el representado en el cuadro adjunto, que reproduce un horario de autobuses por medio de una tabla tradicional, bastante confusa.

Por el contrario, en la representacin del ciclo de vida de la Popillia japonica, las palabras contribuyen con eficacia a comprender las distintas fases de la evolucin.

Profesor: Juan Martnez -Val

9
www.juanval.net

Espacio reservado para notas y apuntes personales

Grfico sobre la retirada de Napolen de Rusia, realizado en 1869 por Charles Joseph Minard. El ancho de la banda refleja el nmero de soldados que salieron (442.000) y los que regresaron (10.000) El camino de Napolen se refleja en su trayecto general, en ciudades importantes, junto con las maniobras, temperatura en grados Reamur, y distancias proporcionales a una escala dada. Las fechas de la marcha se dan junto con las temperaturas en el grfico inferior.

Si en el mapa de Minard encontramos un sentido de proporcionalidad simblica que nos sirve para una comprensin visual directa de fenmenos complejos, en el falso paralelismo de las estadsticas reproducidas abajo hallamos una completa desinformacin para numerosos lectores poco atentos (y una gran atencin no debe suponerse nunca para la comprensin de grficos) ya que las escalas entre la mortalidad de SIDA entre hombres y mujeres es radicalmente distinta si uno lee los nmeros de referencia con cuidado.

Profesor: Juan Martnez -Val

10
www.juanval.net

Espacio reservado para notas y apuntes personales

A pesar de la limitada calidad de las fotocopias, puede apreciarse que en la imagen superior (de un Estudio de Aplicaciones de Supercomputacin de la Universidad de Illinois) los bordes de la rejilla se alzan con un protagonismo demasiado alto y la imagen contiene escasas variables representadas en ella. La imagen inferior, rediseada por E. Tufte y C. Bushell, elimina el efecto de los bordes, mantiene el tamao de la imagen central, aade variables importantes, como la dimensin y la orientacin, e incluye un esquema del proceso, junto a una escala temporal, que avanza segn transcurre la animacin. Todo ello en el mismo espacio y con idnticos recursos.

Profesor: Juan Martnez -Val

11
www.juanval.net

Espacio reservado para notas y apuntes personales

Profesor: Juan Martnez -Val

12
www.juanval.net

La comunicacin visual tambin es una buena herramienta para engaar a presuntos indeseables, mediante el uso de tcticas diversivas; es decir, estrategias visuales que hagan suponer cosas distintas de las que queremos conseguir. Consideremos siempre que en comunicacin visual el factor interpretativo del mensaje es siempre muy elevado. En la imagen vemos la estrategia de un Stickleback macho, que trata de despistar a las hembras de su propia especie que pretenden atentar contra el nido que est cuidando. La estrategia consiste en picar el suelo en un lugar donde no hay alevines, imitando el acto de la alimentacin de los mismos; una imagen que lanza a las hembras a buscar por la zona para comerse a los rivales de sus propios hijos.

Espacio reservado para notas y apuntes personales

Es frecuente que, en comunicacin visual, una imagen refiera a otras imgenes u otras ideas o conceptos que a veces pueden no ser representados simultneamente en forma de mltiples o segmentos. Esto se denomina secuencia de lectura: una clave en la imagen nos lleva a otra imagen o a una lista de trminos. Pero no siempre es necesario este doble paso, que puede entorpecer la comprensin y puede hacerla muy lenta. En la imagen superior izquierda, el grfico remite a una imagen exterior; adems se han usado lneas para sealar, que son demasiado gruesas y crean entorpecimiento. En la imagen de la derecha, se han incluido los nombres, se distinguen las partes generales de las particulares con maysculas, y las lneas han sido afinadas para que sealen sin molestar.

Profesor: Juan Martnez -Val

13
www.juanval.net

Espacio reservado para notas y apuntes personales

En las imgenes tipogrficas enfrentadas encontramos un fenmeno similar. La de la izquierda, que remite a una lista numrica que a su vez refleja un concepto, pertenece al libro de E. Catich Letters Redrawn. El sistema hace que el lector tenga que buscar un nmero, que remite a otro (en dos zonas distintas) para hallar el concepto. La ilustracin rediseada por E. Tufte contiene las mismas denominaciones, a las que aade 10 ejemplos de otros tantos ejemplos tipogrficos, con sus propias denominaciones y referencias visuales stas. Las letras explicativas han sido reducidas de tamao, sin por ello perder legibilidad. El espacio de las listas ha sido redistribuido. De esta manera, conseguimos mejor y mayor cantidad de informacin.

Profesor: Juan Martnez -Val

14
www.juanval.net

Espacio reservado para notas y apuntes personales

Profesor: Juan Martnez -Val

15
www.juanval.net

Espacio reservado para notas y apuntes personales

En la pgina anterior se reproducen dos buenos ejemplos de multiplicidad visual, cada uno de ellos con su propio carcter y funcin. El primero es una comunicacin para la eliminacin de una planta que crea graves daos. El dibujo de la planta se complementa con escenas parciales y con explicaciones visuales. Su virtud consiste en que todos estos fenmenos, bien estructurados alrededor del propio dibujo de la planta, pueden recorrerse con una lgica independiente, y siempre encuentran comprensin. De esta manera averiguamos que la planta es alrgica, que se difunde rpidamente, que es resistente al arrancado, que no es utilizada por las abejas para hacer miel, que no es comestible, que tiene toxicidad para otras plantas, etc. En la imagen inferior, se reproduce un autorretrato de El Lissizky, titulado El constructor , en el que los elementos principales (la mano y el ojo, como herramientas constructivas de su oficio grfico) se unen con extraa naturalidad. El papel cuadriculado, las formas circulares, el comps y la tipografa, completan los elementos que aaden un significado simblico a la obra.

Profesor: Juan Martnez -Val

16
www.juanval.net

Pantalla de un producto multimedia basada en la metfora del album de fotos. El espacio perdido es enorme, ya que el 82 % de la superficie se dedica al manejo del programa o a nada en absoluto. La tipografa, de otra parte, es rudimentaria y heterognea.

Espacio reservado para notas y apuntes personales

Profesor: Juan Martnez -Val

17
www.juanval.net

Dos pantallas de los puntos de informacin de la National Gallery of Washington, diseadas por E. Tufte. En su concepto se unen el sentido funcional, estructural y esttico, que dan al conjunto una gran facilidad de lectura e informacin de calidad. Comprese con las imgenes de la pgina siguiente.

Espacio reservado para notas y apuntes personales

Profesor: Juan Martnez -Val

Dos pantallas del Companion: Ludwig van Beethoven; The Voyager Company, en el que se pone de manifiesto un uso abusivo de los elementos no informativos, como la orla hipertrofiada, que ocupa en conjunto un 30 % de la superficie total de la pantalla. Considerando que las pantallas en baja resolucin apenas pueden contener informacin, se trata de todo un derroche. En la segunda pantalla la orla ha sido eliminada, y slo eso sirve para mejorar considerablemente el resultado. Tratndose de un buen producto, la mala resolucin de los problemas de comunicacin, afectar a la efectividad de la comercializacin.

18
www.juanval.net

Espacio reservado para notas y apuntes personales

Profesor: Juan Martnez -Val

19
www.juanval.net

Una obra maestra del diseo editorial, que parece adelantarse al concepto de pgina Web de nuestros das: la portada del Leviathan, de Thomas Hobbes, 1651. Los conceptos esenciales de la obra se hallan resumidos visualmente con gran claridad y siguiendo un claro paralelismo. Dominndolo todo, el superpoder, como construccin de cientos de personas que crean una entidad imponente: el estado. A un lado, el poder militar, con sus casillas: la fortaleza, la corona, las armas, los emblemas del ejrcito y la batalla. En la vertical contrapuesta, el poder religioso: la iglesia o monasterio, la mitra papal, el rayo de la excomunin, las armas de la lgica, los concilios y reuniones teolgicas. Sera suficiente vincular cada una de estas casillas al contenido referente en el libro, para tener una versin una introduccin multimedia del mismo.

NOTAS DE CLASE
SOBRE

COMUNICACIN Y DISEO DE PGINAS WEB, 3

6- Algo sobre la edicin de pginas Web

PROFESOR: JUAN MARTNEZ - VAL

PARA MS INFORMACIN CONSULTAR LAS PGINAS DEL AUTOR EN www.juanval.net.

Espacio reservado para notas y apuntes personales

Profesor: Juan Martnez -Val

2
www.juanval.net

Espacio reservado para notas y apuntes personales

6. Algo sobre la edicin de Pginas Web


1: Qu es la edicin web?. Una mezcla de edicin, diseo de interfaz de usuario y tecnologa. - Las tres actividades fundamentales al visitar una pgina web son: - Ver imgenes - Leer textos - Interaccionar con el interfaz - El sitio web no debe ser un lugar para mostrar los talentos tcnicos de que se dispone. La tecnologa es una herramienta para mejorar el servicio: no es el fin. - El sitio web no debe ser un lugar para deslumbrar con habilidades grficas. El grafismo es otra herramienta, no el fin. 2. Cul es el xito de un sitio web? - Si se trata de un sitio comercial, lo que hay que preguntarse es qu se persigue: - Atraer nuevos clientes - Dar informacin sobre productos o servicios - Hacer investigacin de mercado - Conseguir pedidos directos - En un sitio comercial, la gente busca un tipo concreto de informacin: no quieren una experiencia web impactante. Sus expectativas van en las siguientes direcciones: - Qu productos hay? - Cunto tardan en servrmelos? - Qu garantas tengo?, etc - Cuando slo se quiere tener una presencia en la red, las compaas tienden a sobre dimensionar el aspecto grfico y los efectos especiales. Pero este tipo de trabajo debera iniciarse por una investigacin sobre las necesidades reales de la compaa. 3.- Una ley bsica: hacer que el sitio sea navegable. Hay que invertir la suficiente energa en establecer un mapa de todo aquello que vamos a necesitar y de las relaciones y caminos que vamos a establecer.

Profesor: Juan Martnez -Val

3
www.juanval.net

Espacio reservado para notas y apuntes personales

- Algunos editores web, como FrontPage, contienen una visualizacin del sitio web basada en su estructura. Esta es una herramienta til. - Algunas preguntas que hay que hacerse, son del siguiente tipo: - Si alguien viene con una cuestin concreta, cunto tardar en llegar al punto que desea? - Otro punto de navegabilidad es mostrar con claridad qu es nuevo y las cosas que han cambiado. - No olvidar que un sitio difcil de navegar, con caminos obligados, culos de saco, etc, tambin ser difcil de mantener. 4. Hay que pensar en los visitantes: en la red, cada uno que llega es diferente. Una cosa que atae tanto a la personalidad de la gente como en los aparatos y aplicaciones que usa para conectarse. - En un sitio comercial, es imprescindible probar que el sitio funciona bien cuando es visto a travs de variados navegadores, no slo en el Explorer o en el Netscape de ltima generacin. 5. El interfaz de usuario es la herramienta esencial donde se unen diseo y produccin. Aunque este ser un tema a desarrollar ms adelante, aqu se ofrecen algunos consejos clave: - Mantener el diseo uniforme. Que no cambie a cada vnculo que elijamos. - Que el visitante pueda ponerse al mando de lo que quiere: las cosas deben estar claras y bien definidas. - No usar subrayados para los textos porque se confundirn con vnculos. - No usar colores texturados para los fondos a no ser que sean significativos y necesarios. - Evitar los parpadeos y las animaciones gif innecesarias. Crear numerosas anomalas genera confusin. - Si una tipografa es importante para la imagen de la marca, hacer un grfico gif y no dejar la cuestin en un mero teclear del nombre. - En general, buscar soluciones sencillas y, en todo los posible, usar los valores por defecto. Casi nunca dan problemas.

Profesor: Juan Martnez -Val

4
www.juanval.net

Espacio reservado para notas y apuntes personales

5. Hacer un uso prudente del color. Salvo en sitios especiales por su contenido, el color debe usarse para mejorar el aspecto de las pginas y para dar informacin. - Es bueno dejar los colores de los vnculos en sus valores por defecto. - Textos de colores sobre fondos de colores pueden terminar en verdaderas catstrofes. - Los mapas de imgenes pueden ser muy tiles... pero hay que saber para qu usarlos, no ponerlos por capricho. - Si se usan mapas de imgenes para establecer vnculos, es bueno tener otra alternativa, como simples textos ordenados en filas o en columnas. - Si en la pgina de acogida se usa un mapa de imagen muy grande y complejo, la pgina tardar mucho en descargarse y esto puede tener consecuencias, sobre todo si la red va lenta. 6. Cada pgina debe tener un ttulo. El ttulo es importante. Ayuda a navegar y a saber dnde estamos. - No hay que olvidarse de informar a los visitantes de donde estn y a qu se dedica el sitio web. Somos la empresa Tal y Tal y nos dedicamos a esto y aquello. Nuestra sede est en ...; tenemos esta experiencia, etc 7. Mantenerse siempre dentro de las medidas, sobre todo de las medidas de pantalla. Es uno de los mayores problemas, porque el alto de la pantalla que se disee no importa demasiado si cada cosa est bien puesta en su sitio y los vnculos y materias son claros; pero un ancho sobredimensionado puede traer serios problemas. - Los anchos de pantalla ms habituales varan entre 640 y 1280 pxeles. Hay que acostumbrarse a medir y valorar los anchos de cada elemento con toda precisin. - En una pantalla puede haber varios tipos de elementos, pero todos se dividen en dos categoras: - Los que tienen un ancho fijo. - Aquellos que pueden tener un ancho variable. - Los que tienen un ancho fijo son imgenes (jpg, gif) y textos

Profesor: Juan Martnez -Val

5
www.juanval.net

Espacio reservado para notas y apuntes personales

marcados de esta manera en HTML, as como tablas marcadas con ancho fijo en pxeles. - Elementos cuyo ancho puede variar son textos normales, tablas ajustadas en porcentaje del ancho y celdas ajustadas de la misma manera. - Si una pgina se disea con la mezcla adecuada de elementos variables y fijos, debe funcionar bien en todo tipo de navegador. - Cuando el ancho fijo establecido es mayor que el ancho de pantalla, aparecer una barra de desplazamiento horizontal, y el visitante nunca podr ver la pgina como un conjunto ordenado. 8. Sobre las imgenes. Nunca presentar imgenes importantes o de calidad sobre fondos de color texturados. Los efectos de mezcla y sobreposicin son incontrolables - Los ficheros gif y jpg son los ms universalmente reconocidos en la red. - gif suele funcionar mejor con las imgenes que presentan colores planos o una gama escasa de matices, como textos, logotipos, grficos. Funciona con colores indexados. - jpg funciona mejor con imgenes tipo fotogrfico.. Puede tener prdidas de calidad, aunque en la mayora de los casos son inapreciables. - Los gif pueden entrelazarse, y entonces aparecen en pantalla poco a poco, definindose cada cierto tiempo. En muchos casos tal cosa no es una ventaja. - Con gif se hacen fcilmente animaciones. Lo lgico es utilizarlas no por tener de todo sino porque aadan algo al sitio y cumplan una funcin. Cuando hay ms de dos, pueden ser enervante. 9. Textos. No son un aadido ms. Son una de las principales fuentes de informacin en una pantalla, sino la principal en la mayora de los casos. - Antes de iniciar la produccin de un sitio web de cualquier clase es importante tener un buen guin literario, que debe comprender todos los textos que van a ser comunicados a los futuros visitantes. - Este guin literario se complementar con un guin de desglose, que contendr todos los elementos que acompaan a

Profesor: Juan Martnez -Val

6
www.juanval.net

Espacio reservado para notas y apuntes personales

los textos, con sus debidas especificaciones: jpg, gif, animaciones, Java... - Junto a estos dos guiones, el guin de navegacin es tambin imprescindible, ya que en l hay que establecer los vnculos que debern existir entre todos los elementos anteriormente citados. - En otro orden de cosas, siempre hay que cuidar de que el texto sea legible. Si no, es mejor no ponerlo. Algunos detalles a tener en cuenta son: - No ocupar todo el ancho de pantalla con textos en caracteres pequeos porque son difciles de leer y adems se pierde la interlnea en la vuelta. - No usar prrafos largos y engorrosos. - Evitar tipografas extraas que los visitantes puedan no tener en el ordenador. Para textos comunes, las mejores son las letras propias del sistema. 10. Tablas: uno de los grandes recursos del Diseo Web en el momento actual. - Hay que aprender a manejar tablas, una de las primeras herramientas html, porque en la red son mucho ms verstiles que las tradicionales tablas tipogrficas. En la web las tablas pueden regularse de manera fija o porcentual, pueden contener textos, imgenes u otras tablas, pueden servir como esquema de maquetacin, etc. - Su problema es que pueden descargar ms lentamente que si el texto va seguido, pero esta desventaja se aminora gracias a sus muchas funciones. - Un remedio, si la tabla ha de ser muy larga y ocupar varias alturas de pantalla, es dividirla en varias tablas, unas detrs de otras, que se descargarn de manera independiente. - Como costumbre para todos los elementos de un sitio web, ser necesario probar que las tablas funcionan con diferentes navegadores.

Profesor: Juan Martnez -Val

7
www.juanval.net

11. Marcos: lo mismo una gran ventaja que un gran inconveniente. Como con otros elementos, si su funcin no est clara, es mejor no usarlos. Cuando la funcin est bien definida, pueden resultar de gran utilidad.

Espacio reservado para notas y apuntes personales

- Los marcos pueden hacer que la impresin de una pgina no salga como se esperaba o falle. - Los marcos pueden hacer que el navegador falle cuando la pgina es vinculada o llamada desde otra aplicacin; por ejemplo, un enlace que nos han enviado por correo electrnico. - Aunque sepamos algo de programacin o mucho de diseo, para todos los temas que se refieren a programacin, efectos, etc, hay que contar con expertos informticos en el equipo de trabajo. 12. Probarlo todo antes de lanzarse. Pasar un auto test de calidad es fundamental. Y repetirlo a cada cambio o en cuanto se detecten problemas. - Si se dispone de un corrector electrnico, pasadlo. - Si se dispone de tiempo, leed todas las pginas. - Localizar distintos navegadores para comprobar como queda el sitio en todos ellos. - Haced lo mismo con diferentes sistemas operativos. - Lo mejor es que las pruebas las hagan personas que no sean los autores del proyecto. - Si alguien enva un mensaje de que algo no funciona en el sitio, prestadle toda la atencin. Por uno que se molesta en avisarlo, hay mil que pasaron de decirlo pero quedaron frustrados. 13. Mantenimiento: Es uno de los trabajos ms duros y ms necesarios. Las necesidades de una empresa suelen cambiar y lo mismo tiene que hacerlo una web. En ocasiones el cambio debe realizarse varias veces al da. - Si el sitio contiene enlaces a otros sitios, hay que comprobar cada cierto tiempo que stos no hayan cambiado de direccin. - Un problema es el de las pginas hurfanas. Aquellas pginas cuyo contenido caduca y que al final quedan aisladas, sin vnculos, como un peso muerto en el sitio, que ya hasta ignoramos. - Hay que considerar que aunque una pgina est sin vnculos desde el propio sitio, puede tenerlos desde otros ordenadores y, por tanto, considerar la posibilidad de que alguien llegue a nuestras pginas por esa va olvidada.

Profesor: Juan Martnez -Val

8
www.juanval.net

Espacio reservado para notas y apuntes personales

14. Una reflexin. Antes de disear un elemento para el sitio, hay que pensar en los equivalentes que tiene en el mundo real y usarlos para definir nuestro diseo. Si no existe ese equivalente real, es una mala seal.

Profesor: Juan Martnez -Val

9
www.juanval.net

NOTAS DE CLASE
SOBRE

COMUNICACIN Y DISEO DE PGINAS WEB, 4

7- Teora del color 8 - La fase de preedicin 9 - La estructura de la informacin 10 - Sobre el interfaz de usuario 11 - Principios del diseo interactivo 12 - Esquema del trabajo de guionado 13 - Navegacin: asociaciones e iconos 14 - Elementos bsicos de tipografa 15 - Texto e imagen
PROFESOR: JUAN MARTNEZ - VAL

PARA MS INFORMACIN CONSULTAR LAS PGINAS DEL AUTOR EN www.juanval.net.

Espacio reservado para notas y apuntes personales

Profesor: Juan Martnez -Val

2
www.juanval.net

Espacio reservado para notas y apuntes personales

7. Algunos aspectos de la Teora del Color


1: El color no existe. Slo existe la sensacin de color. No hay nada en la naturaleza, ni material ni ondulatorio o energtico que sea un color. El color es visto por nuestro sistema ojo - cerebro. De lo que se trata, pues, es de establecer los parmetros que determinan la sensacin de color. 2: El ojo humano interpreta que existen colores a travs de la estimulacin de una gama de ondas electromagnticas con longitudes entre 400 y 700 nanmetros. 1 nanmetro = 10 -9 metros. 3: La manera ms sencilla de introducirse en el estudio del color es a travs de la interpretacin de un modelo ocular que nos permita estudiar esquemticamente los procesos visuales. El esquema que vamos a usar es el de Kpper.

12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 R V A

N V c B

En este modelo se representan en el cuadro la intensidad de los tres estmulos retinianos (ondas cortas, medias y largas) y en el rectngulo de la derecha la composicin de la respuesta sensorial.
Profesor: Juan Martnez -Val

3
www.juanval.net

4: Del estudio de este modelo surgen varias conclusiones importantes para la teora del color, que definen una serie de equivalencias que se aplican en la produccin del color. Son las siguientes.

Espacio reservado para notas y apuntes personales

R+V=a R+A=m A+V=c

m+a=R m+c=A c +a=V

m+a+c=N R+V+A=B

R = rojo; V = verde; A = azul; m = magenta; c = cian; a = amarillo; B = blanco; N = negro. 5: Podemos afirmar que existen 8 colores elementales organizados en dos tradas (R - V - A) y (c - m - a) y dos colores acromticos: B y N. Como se aprecia, la suma de 2 colores de una trada da como resultado uno de la contraria; la suma de los tres de una trada da como resultado, blanco o negro. En partes proporcionales equivalentes, dar como resultado un gris. 6: Una de las tradas funciona a partir de ausencia de estimulacin, aadiendo partes de sus componentes: se llama sntesis aditiva. Otra trada funciona a partir de la estimulacin mxima, eliminando parte de sus componentes: se llama sntesis sustractiva. Naturalmente, existen otras muchas maneras de sintetizar color, pero estas dos son las bsicas. 7: Por lo dicho, puede deducirse que existen dos maneras de producir grises: los llamados grises acromticos, o mezclas de B y N. Y los llamados grises cromticos , o mezclas de partes equivalentes de los tres colores de una trada. De aqu surge el concepto de balance de grises . 8: En relacin a este modelo hay que entender tambin el concepto de color complementario, como aquel que complementa la trada contraria. Ejm.: R = (m + a) El complementario ser c ya que es el que falta para completar la trada m, c, a. De esto se deduce que el complementario de un aditivo es un substractivo y a la inversa.
Profesor: Juan Martnez -Val

4
www.juanval.net

9: Aqu se agota el modelo anterior a este respecto, ya que en l no se consideraba la capacidad adaptativa del ojo . Para entender el alcance de esta capacidad hay que desarrollar el concepto de temperatura de color. Experimentacin con el espectro visible a travs de la descomposicin de la luz: Newton.

Espacio reservado para notas y apuntes personales

Hallazgo de que la luz blanca no posee siempre los mismos componentes cromticos. Evidencia de que el ojo se adapta a estos componentes. Necesidad de un estndar comparativo. Experimentacin con el cuerpo negro y definicin del concepto de luz da estandarizada. Otros iluminantes estndares para otras necesidades. 10: Distincin de colores condicionalmente iguales e incondicionalmente iguales . Aplicacin del concepto de Metamerismo a la industria del color. 11: Otros aspectos que interaccionan en la visin y comparacin del color: el contraste simultneo y el contraste sucesivo .

Necesidad de establecer entornos estables para la comparacin y el trabajo con el color, tanto en lo que se refiere a los iluminantes como al entorno cromtico. 13: El uso del color en la industria se realiza a travs de varios sistemas, unos cientficos y otros industriales. Tratamos ahora de los ms usados. CIE (Comisin internacional de Iluminacin) tiene establecido los estndares ms usados. En el mundo informtico el ms usado hoy da es el CIE Lab. Sistemas aditivos para TV y monitores, basado en RVA (RGB) Sistemas substractivos, basados en cma, a cman, para las artes grficas. Sistemas industriales, como el Pantone, que posee sus propios colores elementales y su conversin a parmetros CIE, RGB o cman.
Profesor: Juan Martnez -Val

5
www.juanval.net

14: Concepto de profundidad de bit y concepto de lineatura: su importancia en el diseo web. Paletas naturales y paletas indexadas Consejos sobre su uso.

Espacio reservado para notas y apuntes personales

8. La fase de Preedicin
El concepto de Preedicin engloba todas las acciones de preparacin y planificacin de un producto web o multimedia. Considera de manera preferente el concepto de producto y el pblico. El concepto de producto plantea tres interrogantes. Tema: infantil, tcnicos, libro de referencia... Mercado: editorial, on-line, off-line... Contenido: textos, imgenes, enfoque...

Concepto:

Estos tres interrogantes del concepto de producto condicionan las respuestas a estas necesidades: Qu medios usaremos? Qu equipos necesitamos? Qu personas? El pblico objetivo plantea otros tres interrogantes: Qu interactividad? Existen ya ejemplos en la competencia? Qu espera el cliente?

Pblico

En la interactividad podemos encontrar tres grados: 1: Interaccin inmediata 2: Interaccin aplazada 3: Entorno desconocido Adems, respecto del pblico objetivo es interesante considerar: Edad Cultura Problemas psicomotrices . Problemas de accesibilidad - Necesidad de software especial - Incapacidades fsicas o psquicas

Profesor: Juan Martnez -Val

6
www.juanval.net

Espacio reservado para notas y apuntes personales

9. La estructura de la informacin.
La estructura de la informacin no slo atae a la relacin existente entre los diferentes mdulos que componen un producto; tambin al tipo de informacin y a las operaciones que pueda realizar el usuario. Instrumentales o lineales Tipos de operaciones: Experimentales o aleatorias Textual: Literaria, matemtica... Tipo de informacin: Icnica: Grfico, foto, vdeo, 3D... Hipertextual: mapas de imagen, etc Mixta Existen claros paralelismos y claras diferencias entre las necesidades productivas y de planificacin que son necesarias para elaborar productos tradicionales y productos interactivos. Entre ellas: No interactivos Texto, relato o historia... Volmenes, partes, captulos... Escenas, sucesos Dilogo Presentacin tipogrfica Interactivos Guin literario Navegacin Mdulos de opcin Enlaces Metfora, interfaz

10. Sobre el interfaz de usuario


La relacin hombre / mquina y la prioridad dada al hombre o a la mquina. Una evolucin: CUI: Interfaces de comando GUI: Interfaces grficos OOUI: Interfaces orientados al objeto

Profesor: Juan Martnez -Val

7
www.juanval.net

Espacio reservado para notas y apuntes personales

Los conceptos bsicos para desarrollar un buen interfaz de usuario, adems de los relativos al concepto y al pblico, vistos anteriormente, son: " Partir del conocimiento previo del usuario. " Informar sobre las partes esenciales del producto y cmo acceder a ellas. Esta informacin debe ofrecerla el propio interfaz. " Mantener siempre el mismo comportamiento en los enlaces. " Crear vas de entrada a cada informacin concreta, mediante sistemas de bsqueda u otros recursos. Evitar las secuencias prolongadas para acceder a una informacin. " No crear adornos confusos y no funcionales. Los grafismos deben dar personalidad al producto sin aadir confusin. " Antes de hacer el diseo, pensar en cosas del mundo real que tengan un sentido equivalente al del producto y usarlas como gua, ya que el usuario har referencia mental a ellas. " Disear el interfaz contando con los errores del usuario. De lo contrario, se sentir intimidado. " Cuando lo original no aporte mucho , recurrir a lo estandarizado. La originalidad vaca y a toda costa no aade nada al usuario.

11. Principios del Diseo Interactivo


1 " Sencillez: Dar prioridad a la facilidad de uso sobre la funcin, ya que el usuario no se beneficiar de ninguna funcin compleja si no puede usarla. 2 " Control: El usuario debe tomar enseguida el control del interfaz. No se deben prefigurar secuencias correctas e ineludibles de elecciones para ninguna operacin.

Profesor: Juan Martnez -Val

8
www.juanval.net

Espacio reservado para notas y apuntes personales

3 " Familiaridad: Construir el interfaz sobre los conocimientos previos del usuario. 4 " Obviedad: Todas las elecciones deben ser visibles e intuitivas. 5 " Refuerzo positivo: Todas las elecciones que el usuario tome deben tener resultados predecibles y adems deben ser reversibles. 6 " Satisfaccin: El interfaz debe crear en quien lo usa un sentimiento de que progresa. 7 " Accesibilidad: Los usuarios deben poder elegir el orden y las herramientas de acceso (teclado, ratn, men, icono, voz...) 8 " Seguridad: Todo error que el usuario pueda cometer tiene que ser fcil y rpidamente corregible, sin que genere consecuencias secundarias. 9 " Personalizacin: Un buen interfaz debera ser adaptable a las preferencias grficas (color, formas, objetos...) de quien lo usa. Es aconsejable visitar las siguientes pginas Web para ampliar conceptos: www.ibm.com/ibm/hci/designer/uiarch.html www.tlc-systems.com/webtips.shtml

12. Esquema del trabajo de guionado


Vamos a describir las cinco facetas bsicas que comprende el trabajo de guionado. Cada una de ellas funciona a un nivel distinto de la produccin. 1 " Guin literario: Describe la informacin que se desea introducir en el producto pero no contiene referencias a los enlaces entre ellas o a la presentacin. 2 " Metfora: Representa la cualidad del interfaz de usuario y, por tanto, la relacin del producto interactivo con el mundo fsico y el conocimiento previo del usuario.

Profesor: Juan Martnez -Val

9
www.juanval.net

Espacio reservado para notas y apuntes personales

3 " Guin de desglose: Ha de recoger todas las necesidades que tenemos para la realizacin del proyecto. 4 " Guin interactivo: Es el rbol de navegacin, con las referencias a los enlaces necesarios. 5 " Guin grfico: Recoge las normas bsicas para la diagramacin de las pantallas, el uso del color, la iconografa y los efectos. 6 " Guin tcnico: Hace uso de los guiones anteriores y determina las herramientas tcnicas necesarias para realizarlos.

Literario

Desglose

Tcnico

Artculo sobre el
hambre en el mundo Contenido: una visin del desarrollo desigual en el siglo XX. Patrocinio: Repsol

Destacar el ttulo en rojo y negritas Localizar imgenes para ilustrar los datos.

Usar HTML

Locutor que lea los contenidos.

Localizar logotipo de Repsol

Imagen GIF y animacin 2D del logotipo

13. Navegacin: Asociaciones e iconos.


1: Antecedentes. Se encuentran durante la Segunda Guerra Mundial, en los proyectos del asesor presidencial Vannevar Bush, que desarroll la idea terica del Memex. Ms tarde, en los aos 60, Theodor Nelson desarrolla Xanadu y crea el trmino hipertexto. La difusin a gran escala de tales proyectos se inicia en 1987 con el programa de Bill Atkinson Hypercard. 2: Desde el comienzo, la idea bsica de todos estos proyectos es

Profesor: Juan Martnez -Val

10
www.juanval.net

Espacio reservado para notas y apuntes personales

abandonar el concepto de archivo alfabtico secuencial en favor de una idea asociativa ms parecida al funcionamiento fenomnico de la mente humana. 3: Operaciones de jerarqua alfabtico / numrica: 1. 1.1 1.2 1.3 1.3.1 1.3.2 1.3.2.1 1.3.2.2 2. 4: Las nuevas asociaciones poseen un mayor carcter semntico, no son incompatibles con las anteriores formas de ordenacin y pueden mezclar distintos medios y tipos de comunicacin: textos de diversas clases (ciencia, prensa, anotaciones...) con fotos, msica, vdeo. 5: Este tipo de relaciones semnticas puede simularse a travs del uso de palabras, ya que las palabras quedan reducidas a cdigos binarios, y funcionan a gran velocidad. Adems, pueden establecerse filtros para establecer relaciones a travs del lgebra de Boole y de otros sistemas lgicos. 6: Las cuatro operaciones bsicas del lgebra de Boole. Interseccin: AYB

A A A

B B B

Unin:

AOB

Profesor: Juan Martnez -Val

Exclusin:

AXB

11
www.juanval.net

Diferencia:

A No B

Espacio reservado para notas y apuntes personales

Adems de estos operadores suelen emplearse otros, como los siguientes: Adyacencia: Operador de distancia: Operador de prrafo: Seales de truncamiento: Psicologa cognitiva Psicologa . n cognitivo Psicologa . P cognitivo * ? representan varios o un caract.

7: Los iconos son importantes en multimedia. Deben transmitir bien la idea del contenido y de su funcin y ser fcilmente memorizables. Hay algunas normas (no escritas o convencionalizadas oficialmente) que funcionan en ellos. Escoger imgenes arquetpicas

Los contenidos no son literales. Esta seal indica zapatos en general, no slo zapatos de tacn

La ltima tecnologa suele tener una imagen demasiado voltil

Bajar
Profesor: Juan Martnez -Val

Es muy importante respetar la direccin de lectura

12
www.juanval.net

Subir

Espacio reservado para notas y apuntes personales

Se pueden montar frases

Se pueden usar recursos analgicos

La flecha es siempre buen indicador

8: El uso de enlaces supone el paso de estructuras lineales de comunicacin a estructuras interactivas ms complejas. El diseo de la estructura de la comunicacin pasa a primer plano. La idea de contenido y forma, en gran medida, pierde sentido. Ahora, la forma de la comunicacin es tambin un tipo de contenido. 9: La configuaracin de un sistema de hipermedios consiste en la integracin de cuatro subsistemas. Sistema de informacin: Contiene la informacin, textos, imgenes, sonidos, en sus soportes correspondientes. Sistema de soporte fsico: Ordenador, pantalla, teclado, ratn, perifricos, altavoces... Sistema de programacin : Indizacin, interfaz, vnculos, navegacin, controladores... Sistema de comunicaciones: Internet, intranet, RDSI, LAN, satlites, etc.
Profesor: Juan Martnez -Val

13
www.juanval.net

10: A pesar de sus grandes ventajas, los sistemas multimedia pueden presentar problemas. He aqu algunos: - Lentitud de enlaces. - Falta de normalizacin. - Desorientacin y prdida del usuario. - Desbordamiento cognitivo. - Conocimiento superficial.

Espacio reservado para notas y apuntes personales

14. Elementos bsicos de tipografa


1: Relacin de la tipografa con la escritura. Influencia de los orgenes histricos de las formas escriturales sobre las familias tipogrficas modernas. 2: Esquema de la evolucin histrica de la escritura. Cuatro fases: Semasiogrfica Pictogrfica Fonogrfica . Hipergrfica 3: Evolucin de las formas fonogrficas segn un modelo (no paradigmtico) de etapas: Jeroglficas Silbicas - Protoalfabticas Alfabticas 4: Evolucin histrica de los alfabetos y de su uso social hasta el presente. Alfabetos griegos Griego Alfabeto romano ROMANO La escritura medieval Medieval Renacimiento e invencin de la imprenta. Ilustracin. Siglo XVIII ILUSTRACIN

Litografa y composicin en caliente Composicin electrnica SIGLO XX

5: Familias tipogrficas. Divisin en subfamilias segn el trazo, los ejes y las proporciones.
Profesor: Juan Martnez -Val

14
www.juanval.net

Superfinas, finas, medium, negras, supernegras... Rectas, cursivas, cursivas retrgradas... Redondas, chupadas o condensadas, expandidas o anchas... . Perfiladas, sombredas...

Espacio reservado para notas y apuntes personales

6: Elementos bsicos de la composicin tipogrfica, 1: la letra.

AaBbCc
7: Elementos bsicos de la composicin tipogrfica, 2: la palabra. Ejemplo Ejemplo Ejemplo 8: Elementos bsicos de la composicin tipogrfica, 3: la lnea y la paleta tipogrfica: Esto es una prueba con texto ciego que no merece la pena leer para ver los resultados que se consiguen con ligeras variaciones. Esto es una prueba con texto ciego que no merece la pena leer para ver los resultados que se consiguen con ligeras variaciones. Esto es una prueba con texto ciego que no merece la pena leer para ver los resultados que se consiguen con ligeras variaciones.

9: Elementos bsicos de la composicin tipogrfica, 4: la columna y la retcula.

Profesor: Juan Martnez -Val

15
www.juanval.net

10: El uso de la tipografa presenta dos campos especficos: el funcional y el icnico. Ambos pueden funcionar en conjunto o separadamente.

Rasgos cursivos

Rasgos sin serifa de inspiracin griega

Curso de Comercio Electrnico y Diseo Web

F2I2 16

Profesor Juan Martnez - Val

A mdfi A
Asta principal Modulacin Serifas o pies pices Rasgos inferiores

Espacio reservado para notas y apuntes personales

15. Texto e imagen: integracin de dos formas de comunicacin


1: La relacin de la imagen y la letra se remonta al inicio de la escritura. Las formas icnicas la preceden, pero la escritura se incorpora a ellas con una funcionalidad bien definida desde el comienzo. 2: La imagen reproducida o tcnica, contra lo que se suele creer, tiende a ser ms abstracta que la palabra. Por ello: La imagen muestra y ensea. La palabra narra y explica.

3: La imagen se acomoda bien al mundo de los smbolos genricos y representativos debido a varias de sus propiedades: Su carcter analgico, que proyecta relaciones. Su adecuacin a la representacin del espacio y la forma. Su presencia en el mundo onrico: ambigedad. Sus posibilidades de estructuracin secuencial La rapidez con que transmite el mensaje 4: La palabra escrita se acomoda al mundo del relato, el desarrollo y la argumentacin debido a varias razones: Su dependencia del lenguaje oral. Su existencia lineal en el tiempo. La versatilidad de su gama de significados (semntica). La versatilidad estructural de su sentido lineal.

Curso de Comercio Electrnico y Diseo Web

F2I2 17

Profesor: Juan Martnez - Val

Espacio reservado para notas y apuntes personales

La profundidad de sus conceptos. La mayor lentitud en la comunicacin 5: Imgenes y letras generan estructuras mixtas de fuerte carcter. Su fuerza radica en combinar rapidez de entrada con profundidad de contenidos. Existen combinaciones atpicas Y altamente funcionales a) Atpica, como creacin esttica:

b) Funcional, como elemento visual y semntico de un grfico:

Profesor: Juan Martnez -Val

18
www.juanval.net

6: El desarrollo de la interactividad ha generado nuevas oportunidades de establecer vnculos y relaciones entre imgenes y escritura: Con tecnologas diacrnicas, como el vdeo. A travs de referencias mutuas interactivas