apuntes web 01

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS

01 ARQUITECTURA

02 DISEÑO

03 LA INTERFAZ

04 MAQUETACIÓN

05 PROGRAMACIÓN

06 ACERCA DE FLASH

07 PUBLICIDAD EN INTERNET

REGLAS GENERALES DEL DISEÑO GRÁFICO1. ConvencionalidadLos códigos gráficos deben ser culturalmente vigentes. La idea de «nuevos lenguajes gráficos» resulta absurda si no se en-tiende.

2. OriginalidadLa originalidad compensa la convencionalidad al darle rel-evancia al mensaje. No obstante cada caso requiere un grado de originalidad o de convencionalidad diferente. Se creativo, busca nuevas soluciones y formas de pensar.

3. EficaciaHa de cumplir, como mínimo, todas las funciones para las cuales ha sido creado. Valores, como por ejemplo la estética, no puede anteponerse a la eficacia de la comunicación, sino por el contrario, potenciarla.

4. PropiedadLa gráfica debe ajustarse a la identidad y la necesidad del cli-ente que efectúa el encargo; no consiste en hablar del emisor sino en hablar como él.

5. RespetoTal como sucede con el emisor, la gráfica debe ajustarse y respetar los códigos del receptor. Se habla para él, para que él entienda.

6. DensidadEntre lo vacío y lo lleno debe haber una relación de sentido. Nuiestro mensaje debe carecer de zona privadas de sentido. Si al eliminar un elemento nada se pierde, es porque ese elemento sobraba.

7. EconomíaEl despilfarro es comunicacionalmente negativo. No debe con-tener redundancias superfluas o excesos gráficos.

8. Anonimato La comunicación publicitaria debe ser autónoma, libre de refer-encias a su proceso productivo o su autor. Pertenece al emisor y su producción debe volverse invisible. El diseño es un servi-cio, trabaja y diseña con objeto de satisfacer las demandas de sus clientes y los grupos a los que está destinado su trabajo.

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOStema 0

A menudo se confunden los términos “sitio” y “pági-na”. El “sitio” hace referencia a una ubicación com-pleta, y no a una “página” concreta del mismo. Un sitio web se refiere siempre a la totalidad del conteni-do albergado en un servidor (host) en la World Wide Web, mientras que lo que muestra el navegador es una página web individual. La página principal de un sitio web se denomina página de inicio o portal.

El papel de un sitio web es crear presencia, comuni-cación y transparencia. El mantenimiento de un sitio web implica la atención hacia su estructura, diseño, funcionalidad y contenido; lo que no debe faltarle nunca es la calidad de contenido e información y un sistema de orientación intuitivo para el usuario.

Estas son las preguntas que uno debe hacerse al iniciar el desarrollo de un sitio web complejo:

• ¿Cuál es su propósito? ¿Qué es la web para el cliente?

• ¿De qué modo la construcción de un sitio web apoyará este propósito?

• ¿Cuáles son los objetivos a medio plazo?

• ¿Cuáles son los objetivos a largo plazo?

• ¿Qué estrategias relacionadas con la Red se utilizarán para alcanzar estos objetivos?

• ¿Cómo se medirá el éxito del sitio web?

1


n DEFINIENDO LOS OBJETIVOS

Una declaración clara identificando dos o tres de los objetivos debería ser la base de la construcción de un sitio web. Una declaración con las estrategias es-pecíficas acerca de cómo se va a edificar; cual será el tiempo dedicado al diseño, a la construcción y a la evaluación; y con las medidas cuantitativas y cua-litativas específicas para la posterior evaluación de su puesta en marcha. Construir sitios web no es un proyecto puntual donde se colocan contenidos es-táticos, sino un proceso que continúa en el tiempo. Aspectos como los contenidos editoriales a largo plazo o el mantenimiento deberían estar definidos ya en los primeros planes de producción y presupues-tos. Sin esta perspectiva, la publicación electrónica sufrirá el mismo destino que muchas iniciativas por parte de departamentos de comunicación de em-presas: un inicio entusiasta sin resultados ni a medio ni a largo plazo.

n EL BRIEFING

El término briefing (o reunión informativa) procede de la jerga militar estadounidense y hace referencia a una discusión inicial acompañada de una breve descripción de la situación y de una explicación de los objetivos de una operación, así como los detalles estratégicos.

Un briefing debe incluir toda la información necesa-ria para concebir, diseñar y llevar a cabo un encargo. Un buen briefing depende de la franqueza del encar-gado de realizarla y de su capacidad para expresar cuáles son los problemas de una manera compren-sible. El briefing debe ponerse por escrito.

Nota: si se da demasiada información se dificulta la toma de decisiones y se difumina la diferencia entre lo que es importante y lo que no lo es. La cantidad de información debe ser la adecuada para llevar a cabo el encargo.

Después del primer briefing, toda la información que falte es recabada e incorporada en un proceso co-

lectivo. El briefing posterior (re-briefing) es la discu-sión posterior con el cliente, una oportunidad de co-rregir cosas y aclarar conceptos una vez acordado el encargo.

Lista de comprobación: elementos del Briefing de una agencia

- Información acerca de la empresa (como actividades de la empresa o el sector corporativo).

- Descripción de la situación del marcado (punto da partida, competencia).

- Resumen del encargo, requisitos, restriccio-nes y objetivos.

- Grupo de target (grupos de objetivo esenciales).

- Objetivos de comunicación (mensajes bási-cos, posicionamiento, medios objetivo, mez-cla de comunicaciones).

- Información del producto (características, argumentos de uso, ventajas, razones).

- Presupuesto (por ejemplo parámetros de disponibilidad, servicios de agencia, otros servicios).

- Fechas límite (por ejemplo, lanzamiento) y ti-meline -línea temporal- (planificación del tiem-po y del proyecto).

- Materiales adicionales.


n CONOZCA A SU PÚBLICO

El siguiente paso es identificar a los usuarios poten-ciales del sitio web y así poder estructurar el diseño en función de sus expectativas y necesidades. Los conocimientos, procedencia, intereses y necesida-des de los usuarios cambiarán dependiendo de si es un usuario ocasional, que requiere una introducción cuidadosa y estructurada, o si se trata de un usuario experto que se sentirá ofendido si intuye cualquier intento de paternalismo o, simplemente, de retrasar su acceso a la información. Un sistema bien diseña-do debería ser capaz de acomodar distintos niveles de habilidad e intereses de los usuarios.

Principiantes y usuarios ocasionales. Este tipo de usuario requiere una estructura sin ambigüedades y un acceso fácil a visiones de conjunto que ilustren cómo se dispone la información dentro del sitio web. Los principiantes tienden a sentirse intimidados por menús de texto complejos, y si la página principal no está dispuesta de forma clara y atractiva, desistirán en traspasar el umbral y acceder al lugar. Los usua-rios ocasionales prefieren páginas que aporten una visión general o de conjunto, mapas jerárquicos y elementos gráficos o iconos que puedan retener con facilidad, como forma de saber o conocer dónde se almacena la información. Un glosario de términos técnicos, acrónimos, abreviaciones y una lista de las preguntas más frecuentes (FAQ - Frequent Asked Questions), pueden ser muy útiles para el principian-te o usuario ocasional.

Usuarios y expertos reincidentes. Estos usuarios confían en obtener de la web a la que acceden infor-mación certera y de forma rápida. Un usuario experto es generalmente impaciente ante una multiplicidad de menús gráficos de baja densidad que ofrecen pocas opciones a la vez. Tienen también objetivos específicos en mente”a la hora de consultar la web, y aprecian los menús de texto detallados, esquemas de la estructura del lugar, índices amplios y motores de búsqueda ágiles y bien diseñados que permitan una búsqueda y consulta rápida de los resultados.

n DESARROLLO DEL SITIO

Todo proyecto significativo de sitio web supone unos retos particulares, pero el proceso de desarrollo en su conjunto sigue generalmente estas seis grandes fases:

1 Definición del sitio y planificación 2 Arquitectura de la información 3 Diseño 4 Construcción 5 Marketing 6 Rastreo, evaluación y mantenimiento

DEFINICIÓN DEL SITIO Y PLANIFICACIÓNEn este estado preliminar definiremos los objetivos y las metas para el sitio web, y empezaremos a re-coger y analizar la información que será necesaria para justificar el presupuesto y los recursos que se requieren. Es hora también de definir el alcance de los contenidos, los apoyos en funcionalidad y tec-nología interactiva, y la amplitud y profundidad de los recursos de información que se requieren para llenar la web y así satisfacer las expectativas de los usuarios.

ARQUITECTURA DE LA INFORMACIÓNUn buen diseño web se basa en las siguientesreglas

• Presentación de la información de forma sencilla, clara y rápida.

• Centrado en los aspectos esenciales.

• Navegación lógica y manejable.

• Un principio de diseño uniforme aplicado a la totalidad del sitio.

• Tiempos de descarga aceptables para los usuarios y visualización correcta en todos los navegadores web principales.

1


En esta etapa se deberán detallar tanto la organi-zación como los contenidos para el sitio web. El equipo deberá inventariar los contenidos existentes, enunciar qué tipo de nuevos contenidos se requie-ren y definir la estructura de la organización. Una vez se ha delineado la arquitectura/estructura de los contenidos, se deberán construir pequeños prototi-pos de partes de la web, y así poder probar cómo se adapta el diseño a los contenidos y a la navegación. Estos prototipos parciales son útiles en dos senti-dos. Primero por ser una manera fantástica de pro-bar la navegación y desarrollar la interfaz de usuario definitiva. Un prototipo debería tener las suficientes páginas para poder comprobar con precisión cómo uno se desplaza de las páginas con menús a las pá-ginas con contenidos y viceversa. En segundo lugar, la creación de prototipos permite a los diseñadores gráficos probar distintas maneras de relacionar la apariencia visual con la interfaz de navegación y el diseño de la información. La clave para un buen pro-totipo debe ser, ante todo, la flexibilidad.

Diseño estructuralEsta fase implica la organización interna, es decir, estructurar desde el punto de vista informático y gráfico toda la información que manejará el usuario cuando utilice nuestro interactivo. El diseño de un interactivo requiere la organización de directorios, nombrar archivos y directorios, y adoptar un deter-minado diagrama de flujo. Entre otras tareas debe-remos planificar la creación de iconos y construir sistemas de ayuda.

LinealTodos los nodos son ordenados en línea a través de una secuencia única, permitiendo al usuario sólo avanzar (“forward”) y retroceder (“rewind”). Un ejem-plo son los videojuegos que reproducen una narra-ción de tres actos: presentación de los objetivos del usuario, desarrollo de la acción y desenlace o nodo de salida con los créditos de la aplicación.

RamificadaEsta estructura parte de una secuencia lineal de nodos (entrada-A-B-Csalida) a la que se han inclui-

do otros nodos subordinados. Así un nodo A puede ramificarse en Al y A2, el nodo B en Bi y B2, etcétera. Un ejemplo son los cuentos infantiles que emplean una estructura lineal para la narración principal y los nodos subordinados para crear las elecciones lúdi-cas interactivas.

ParalelaUna estructura formada por un nodo de entrada, un nodo de salida y varias cadenas de nodos lineales (A, Al, A2); (B, Bl,B2,); (C, Cl, C2); (D, Dl, D2). Permi-te la navegación lineal y la navegación en el mismo nivel (Al, BI, Cl). Narra la misma historia simultánea-mente desde distintos puntos de vista.

ConcéntricaEste modelo organiza el resto de nodos alrededor del nodo de entrada en secuencias lineales impi-diendo la navegación entre nodos del mismo nivel (Al, BI, Cl). Adoptan este modelo los videojuegos que solicitan de sus usuarios superar un nivel para pasar al siguiente.JerárquicaEste modelo es clásico y también se le conoce como “estructura en árbol” o “arborescente”. Consiste en un nodo de entrada inicial que se subdivide en otros (A, B, C...) y a su vez estos se subdividen en otros (Al, A2); (BI, B2,); (Cl, C2); y así sucesivamente hasta donde queramos.

ReticularEs el modelo más completo para la navegación por-que obedece a la estructura en red, malla o telaraña. Un nodo está conectado a todos los demás. preci-samente este modelo que ofrece más libertad que el resto es el más frustrante. Ello es debido a que, al no priorizar una trayectoria de navegación frente a otras, hace al sistema poco eficaz: “Si sólo hay un camino posible, no es interactivo; si todos los cami-nos son posibles, estoy perdido”.

MixtaCombina varios de los modelos explicados. Es la fórmula más frecuente en el diseño de interactivos.

1


n DISEÑO

Es en esta fase del proyecto donde el sitio web em-pieza a tener cara y ojos, en la medida en que se definen la retícula (grid) de la página, los elementos que la definirán y las líneas maestras a nivel gráfico de la web en su conjunto. Es el momento de encar-gar o generar las ilustraciones, las fotografías y de-más materiales gráficos y audiovisuales necesarios. También es el momento de investigar, escribir, orga-nizar, ensamblar y editar los contenidos en formato de texto. A su vez, los elementos de programación, diseño y entrada a bases de datos deberían estar ya concretados e iniciados. El fin es producir todos los componentes para que estén listos para la últi-ma fase de producción: la construcción material de cada una de las páginas web.

Al organizar un área de diseño, se debe procurar que el tamaño de la página web coincida con la resolu-ción del monitor, de forma que los elementos impor-tantes estén siempre visibles. Durante mucho tiem-po, se consideraba ideal diseñar las páginas para una resolución de 800 x 600 píxeles, posteriormente se usó una resolución de 1024 x 768 o de 1280 x 854 pixeles; pero todo esto ha cambiado radicalmente desde la irrupción de la navegación desde dispositi-vos móviles y tabletas.

Actaulmente nos enfrentamos a una web que de nuevo debe ser posible visualizar correctamente en multitud de formatos y tamaños de pantalla. A un diseño flexible a estas demandas se le denomina Di-seño Responsivo.

DISEÑO RESPONSIVO

El Responsive design, diseño receptivo y adaptivo o como quieran traducirlo es una tendencia totalmen-te nueva dentro del diseño Web, la cual consiste en reacomodar los elementos que componen el websi-te según el tamaño de dispositivo que la reproduzca.

Esto es responsive design y se logra con un conjun-to de técnicas de css3.

Ahora mismo nos encontramos en uno de los mo-mentos más excitantes de la tecnología, posible-mente desde la aparición en escena de la web social (conocida también como web 2.0): HTML5, Flash en dispositivos móviles y televisores, tablets, smartpho-nes y un largo etcétera.

Es en momentos como éste donde debemos recor-dar lo aprendido y no olvidar cosas como la usa-bilidad o accesibilidad justo en el momento en que se vuelven más importantes, sobre todo teniendo en cuenta que dispositivos como los smartphones y tablets nos exigirán repensar una y otra vez so-bre nuestras aplicaciones y el modo como nuestros usuarios interactuarán con ellas.

Crear sitios específicamente para móviles no es una idea novedosa, pero la aparición de dispositivos mó-viles con cada vez mayores capacidades le ha dado un nuevo auge, aún cuando creo estamos lejos de ver lo que realmente pueden llegar a ser. En el nue-vo mundo móvil tenemos browsers de verdad, ma-yor capacidad, Wi Fi, etc. que nos da todo un nuevo abanico de posibilidades.

Sin embargo, no podemos olvidar que estos dispo-sitivos no disponen de las ventajas que nos da un computador personal, ya sea en términos de reso-lución de pantalla, velocidades de conexión, etc. lo que nos obliga a crear una interfaz que funcione es-pecíficamente dentro de estas limitaciones. Lo ideal será pensar primero las interfaces con mayores limi-taciones y luego aumentar las prestaciones a me-dida que los recursos aumentan: móviles primero, luego tablets y de allí a ordenador.

La usabilidad es hacer que las webs sean herra-mientas de comunicación práctica. Es decir, que al-guien que entre en una web encuentre lo antes posi-ble lo que busca o -que también pasa-, se de cuenta lo antes posible de que está en el sitio equivocado.

La navegabilidad web en tres preguntas:- ¿Dónde estoy?- ¿Dónde he estado?- ¿Dónde puedo ir?

2


¿Qué implica diseñar para móviles?

Obliga a enfocar lo verdaderamente importante:Dadas las limitaciones que tenemos en un dispo-sitivo móvil (tamaño de pantalla, velocidad de co-nexión, etc.) es indispensable aprender a jerarquizar la información ¿qué es realmente lo que queremos que nuestros usuarios sepan? ¿Cuáles de los servi-cios que nuestro sitio ofrece son realmente usados como para aparecer de primero en nuestra lista de jerarquía? ¿Realmente es útil darle la bienvenida con un lindo texto de presentación o es mejor mostrar de una vez aquello que los usuarios realmente buscan en nuestro sitio?

Diseñar un sitio específicamente para móviles nos obliga a entender al usuario, a saber qué es lo que busca en nuestro sitio y darle justamente eso. Es im-prescindible que sepamos enfocar nuestro sitio en aquello que realmente queremos mostrar al usuario o aquello que sabemos que realmente quiere de no-sotros, desechando aquellas cosas que, por intere-santes que puedan ser desde nuestro punto de vis-ta, resulten secundarias o poco importantes para él.

Es fundamental conocer al usuario finalUno de los principales problemas que enfrentamos con nuestros clientes es que, por lo general, no piensan en sus usuarios a la hora de crear el sitio web, haciendo solicitudes que responden básica-mente a una mezcla entre sus gustos personales (o los suyos, los de su pareja, los de sus socios, etc.) y las cosas que desea que el sitio muestre sobre su producto.

En conclusión, hacer el cambio de paradigma de móviles a PC en vez de PC a móviles no sólo nos prepara para el futuro cercano en el que desarrollar sitios optimizados para estos dispositivos no será simplemente un lujo de grandes empresas sino una necesidad real del mercado sino que además nos permite hacer un necesario ejercicio de arquitectura de la información en pro de un producto más efec-tivo y usable.

ACCESIBILIDAD

La accesibilidad Web significa que personas con algún tipo de discapacidad van a poder hacer uso de la Web. Al hablar de accesibilidad Web se está haciendo referencia a un diseño Web que va a per-mitir que estas personas puedan percibir, entender, navegar e interactuar con la Web.

La accesibilidad Web también beneficia a otras per-sonas que no tienen ninguna discapacidad pero que, debido a determinadas situaciones, tienen di-ficultades para acceder a la Web (por ejemplo, una conexión lenta), también estaríamos hablando de aquellas personas que sufren una incapacidad tran-sitoria (por ejemplo, un brazo roto), y de personas de edad avanzada.

Otra consideración importante para las empresas es que la accesibilidad Web es un requisito establecido en algunos casos por leyes y políticas.

•Nota: ver documento de referencia: Introducción a la Accesi-

bilidad Web.pdf

n TIPOS DE IMÁGENES

JPG o JPEG Es el formato más común para compri-mir imágenes con relativamente poca pérdida de ca-lidad y bajo peso, generalmente usado en imagenes fotográficas. Es un formato óptimo para fotografías digitalizadas, imágenes que utilizan texturas, imáge-nes con transiciones de color en degradado.

Ventajas: Soporta millones de colores a un peso relati-vamente bajoAmpliamente soportado en todos los navega-dores y plataformas

Desventajas:No soporta transparenciasEl formato no es libre

Recomendación: Únicamente para imágenes fotográficas con muchos colores y detalles.

2


GIF Creado por CompuServe hace casi 20 años. Utiliza compresion de un máximo de 8 bits (256 co-lores), por lo tanto se reduce considerablemente la calidad si se trata de imagenes como fotografías o degradados complejos.El formato GIF calcula la cantidad de colores me-diante una formula que permite paletas de 2, 4, 8, 16, 32, 64, 128 y 256 colores, lo que nos da una amplia gama de posibilidades a la hora de optimizar gráficos sencillos, además soporta las transparen-cias de 1 bit, es decir, que un pixel puede tener un color, o ser totalmente transparente.También permite hacer animaciones por fotogra-mas, (muy sencillas) aunque la compresion en estos casos suele ser deficiente.

Ventajas:-Amplia compatibilidad en los navegadores La transparencia puede ser muy útil, si se sabe utilizar. -La compresión logra imagenes de muy bajo peso.

Desventajas: -Límite de 256 colores-No es formato libre.

Recomendación: No usar en ningún caso.

PNG Es un formato gráfico que esta basado en un algoritmo de compresion sin pérdidas, y fue desa-rrollado para resolver las deficiencias del GIF, princi-palmente en cuanto a profundidad de color.

Una de las principales ventajas de PNG, es que in-dependientemente de la profundidad de color que se use, la compresión permite archivos de muy bajo peso sin pérdida de calidad.

El número de canales depende de si la imagen es en escala de grises o en color y si dispone de canal alfa (canal de transparencia). La combinaciones permiti-das por PNG son:Escala de grises (1 canal) Escala de grises y canal alfa (2 canales) Canales rojo, verde y azul (RGB, 3 canales. También llamado “color verdadero”) Cana-

les rojo, verde, azul y alfa (RGB + alfa, 4 canales)PNG soporta tanto transparencia alfa (los bits pue-den ser “medio” transparentes) como transparencia de índice en sus tres versiones, Todos los navega-dores actuales tienen soporte para PNGs con trans-parencia alfa excepto Internet Explorer, que soporta PNGs con transparencia de indice, y transparencia alfa solo en imágenes de menos de 8 Bits (siempre interpretada como transparencia de índice).

Los diferentes tipos de PNG, se usan para lograr la mejor relación peso/calidad en todo tipo de gráficos:PNG 8, se pueden usar para gráficos sencillos, colo-res planos, logos, pequeñas sombras, y para image-nes que no requieran mucho color.

PNG 24 sirve para gráficos y degradados complejos de varios colores y fotografías no tan complejas.

PNG 32 para todo tipo de imágenes complejas, foto-grafías con mucho color etc. Las imágenes comple-jas suelen tener un mayor peso que las JPG en una calidad similar

Ventajas:-En la mayoría de los casos prácticos, se ob-tiene la mejor relación peso/calidad. -Formato libre. Recomendado por W3C. Acepta transparencias.

Desventajas: -Imágenes con mucho color y texturas suelen ser muy pesadas-El soporte de PNG no es tan amplio como los formatos anteriores.

Recomendación: Usar PNG al máximo, en todo tipo de gráficos, layouts, fondos, etc. No tanto en Imágenes de muchos colores y textu-ras, aunque nunca está de más probar.

2


n ELEMENTOS COMUNES EN LA WEB

• Los menúsLos menús se suelen aglomerar en una sola barra de informaciones y contienen grupos de comandos relacionados que están separados -en la mayoría de los casos por líneas-.

• Los cuadros de diálogoEl lector llega a los cuadros de diálogo cuando es-coge una entrada de menú a la que siguen puntos suspensivos (...). Los cuadros de diálogo son ventanas que contienen una serie de comandos relacionados que logran que se cumplan aquellas funciones que espera el usua-rio. Estos cuadros están compuestos a su vez por una serie de controles. Los más importantes son:

• Las fichasEs la posibilidad que ofrecen los cuadros de diálogo de operaciones múltiples. Generalmente funcionan mediante un “click” sobre iconos de pestaña que permiten visualizar distintos grupos de controles.

• Las áreasEl área es una zona delimitada por un borde y un título dentro del cuadro de diálogo o una ficha que agrupa un conjunto de comandos.

• Las listasLas listas aparecen en algunos cuadros de diálogo y consisten en un inventario de elementos que pueden ser seleccionados o editados.

• Los camposUn campo presenta forma rectangular y su función consiste en introducir un dato concreto, como nues-tro nombre, correo electrónico, etc...

• Los botones de radioLos botones de radio tienen la facultad de seleccio-nar entre diversas opciones que se excluyen mutua-mente.

• Las casillas de comprobaciónEstas casillas permiten al lector saber si ciertas op-ciones están activadas o desactivadas. Al activar una casilla de comprobación (al seleccionarla) se pueden activar otros controles; también puede su-ceder que al seleccionar o deseleccionar una casilla de comprobación se amplíe un cuadro de diálogo que muestre más controles.

• La botoneríaLos botones -que usualmente tienen forma rectan-gular activan una acción. Si el botón está enmarca-do por doble línea más gruesa, puede activarse me-diante la tecla “intro”. Existen botones que incluyen una lista desplegable, pudiéndose elegir un tipo de acción determinada.

• Cuadros de diálogo de advertenciaSon cuadros de diálogos que aparecen en la panta-lla del lector cuando surge un problema y, por lo ge-neral, suelen incluir información sobre el origen del problema y su posible solución.

3


n DISEÑO DE LA INTERFAZ

Las páginas web se diferencian de los libros y otros documentos en algo crucial: los enlaces de hiper-texto permiten al usuario acceder a una página web sin ningún tipo de preámbulo. Así, una página web deberá tener mucha más autonomía que las páginas de un libro convencional. Esto significa que, gene-ralmente, sus encabezamientos y pies de página de-berán ser más informativos y elaborados que en las páginas impresas. Sería absurdo repetir el copyright, el autor o la fecha de un libro al pie de cada una de las páginas. Pero las páginas web tal vez requieran esta información en todas ellas, pues puede darse la circunstancia de que ésta sea la única parte que el usuario visite del sitio web. Este carácter necesa-riamente independiente de cada una de las páginas web no es exclusivo de la Red.

Todo documento web requiere de:

• Un título informativo

• La identidad del creador (autor o institución)

• La fecha de actualización

• Al menos un enlace a la página principal

• La dirección URL de la página principal.Al menos en las páginas más importantes de la web

Incluir estos elementos básicos supone haber reco-rrido el 90 por ciento del camino a seguir para hacer más comprensible al usuario la interfaz web.

Por otro lado hemos de tener en cuenta los siguien-tes aspectos:

Interacción y ancho de banda. El usuario no tolera-rá demoras largas. Investigaciones acerca del factor humano demuestran que, para la mayor parte de ta-reas con el ordenador, el umbral de frustración está alrededor de los 10 segundos.Simplicidad y consistencia. El usuario no está inte-

resado en una complejidad gratuita, especialmente los que dependan de la web para una información oportuna y detallada relacionada con su trabajo. Las metáforas de la interfaz deberán tener un carácter sencillo, familiar y lógico -si se necesita una metáfo-ra para el diseño de la información, es mejor escoger un libro o una biblioteca que una nave espacial o un aparato de televisión. Los mejores diseños de la información son los que pasan desapercibidos a un usuario tipo.

Previsibilidad: Para una máxima funcionalidad y le-gibilidad, el diseño del sitio web y de cada una de las páginas debería estar construido basándose en un sólido patrón de unidades modulares que com-partirían una misma retícula base y los mismos te-mas gráficos, convenciones editoriales y jerarquías de organización. Se trata de conseguir consistencia y previsibilidad: al atravesar el sitio, el usuario debe sentirse cómodo y convencido de que va a encon-trar lo que busca. La semejanza gráfica en una serie de páginas de un sitio web proporciona pistas visua-les para la continuidad de la información.

Integridad y estabilidad en el diseño. Para con-vencer al usuario de que lo que se le ofrece es fiable y adecuado, es preciso cuidar el diseño de la web igual que lo haría en cualquier otro tipo de soporte; y utilizar los mismos niveles de calidad en el diseño y los contenidos editoriales. Una web de apariencia descuidada, con un diseño visual pobre y unos con-tenidos editoriales pobres, no transmite ningún tipo de seguridad.

Diálogo y retroalimentación. La web debería ofre-cer al usuario, a través de botones de navegación o enlaces de hipertexto colocados uniformemente, una confirmación visual y funcional consecuente con sus movimientos y decisiones. La retroalimenta-ción (o feedback) también significa estar preparado para responder a cualquier demanda o comentario de un usuario. Una web bien diseñada proporciona enlaces directos al webmaster o editor responsable del sitio. Para un éxito a largo plazo de la empresa, es fundamental una cuidada planificación de esta relación con el usuario.

3


n NAVEGACIÓN

En un sitio web, un conjunto fértil de enlaces y ele-mentos gráficos para la navegación atraerá la aten-ción del usuario, desplazándola de los botones de navegación incorporados en el propio navegador hacia los contenidos internos de la web. Proveer un conjunto de botones de navegación consistente y predecible supone también ofrecer al usuario una manera de percibir la estructura y organización del sitio web, manifestando visualmente su lógica y es-tructura; por otro lado un usuario necesita general-mente situarse dentro de un contexto, encontrar su lugar dentro de una estructura de información. En los documentos en papel, esta percepción del “dón-de estoy”, es una mezcla de signos de estructura y gráficos proporcionados por el diseño gráfico del libro, la organización del texto y la propia sensación física del libro como objeto.

DISEÑO DEL SITIO

La mayor parte de la información en la Red, está recogida en documentos de referencia cortos, para ser leídos no secuencialmente. Mucho antes de que la Red se inventara, los autores de temática técnica ya habían descubierto que un lector aprecia siempre los pedazos cortos de información que pueden ser localizados y visualizados de forma rápida. Esta ma-nera de presentar la información en la Red es válida por varias razones:

• Pocos usuarios de la Red permanecen largo tiem-po leyendo largos párrafos de texto en la pantalla. La mayoría o bien guardan en el disco duro este tipo de documentos, o bien los imprimen.

• Un troceado moderado de la información condu-ce, por sí mismo, a la utilización de enlaces. Pero no caiga tampoco en la extrema subdivisión de los contenidos, o emergerá la frustración por parte del usuario. La dimensión máxima para una correcta partición de la información en la Red sería lo corres-pondiente a una o dos páginas impresas en papel.

• Trocear la información puede facilitar su organiza-ción y exposición de manera uniforme. Esto permite al usuario aplicar tanto su experiencia a futuros si-tios con los que se vaya encontrando, como pre-decir cómo puede estar organizada una sección no conocida de una web.

• Fragmentos sintéticos de información encajan me-jor en la pantalla de un monitor, pues no hay espacio para visualizar grandes documentos. Las páginas web grandes tienden a desorientar al usuario medio, pues se le fuerza a utilizar la barra de desplazamien-to y a recordar lo que está fuera de la pantalla.

El concepto de trocear la información debe ser flexi-ble y con sentido común, con una organización lógi-ca y conveniente. Deja que la naturaleza de los con-tenidos sea la que sugiera cómo deben subdividirse y estructurarse. A veces tiene sentido proporcionar documentos largos como una sucesión enlazada de un conjunto de páginas. A pesar de que es preferible la poca longitud, parece obvio que dividir un docu-mento largo arbitrariamente puede tener muy poco sentido, especialmente si se quiere que el usuario pueda imprimirlo de una sola vez con facilidad.

Jerarquía de importancia. En la Red, una organización jerárquica es virtualmen-te una necesidad. La mayoría de sitios dependen de una jerarquía, moviéndose desde el plano general de conjunto -que correspondería a la página princi-pal o home-, hasta las páginas más específicas de subrnenús y contenidos. Los fragmentos de infor-mación deberían clasificarse según su importancia y estar organizados mediante las relaciones que se establecen entre unidades. Una vez determinado un conjunto lógico de prioridades, se puede edificar la jerarquía desde los conceptos más importantes o generales hasta los temas más específicos o deta-llados.

Relaciones. Al enfrentarse a un nuevo y comple-jo sistema de información, el usuario construye su propio esquema mental; éste le sirve para adivinar dónde encontrar lo que aún no ha visto. El éxito en la organización del sitio web vendrá determinado, por

3


encima de todo, por la manera en que el sistema que se crea responda a las expectativas del usuario. Si se confunde al usuario con una estructura que no es ni lógica ni predecible, se sentirá frustrado por las dificultades que se encontrarán al atravesarla.

Función. Una vez se ha creado la web, analiza su funcionalidad. Un diseño de web eficaz es el justo equilibrio en la relación que se genera entre las pági-nas menú y las páginas con contenidos específicos. El fin está en conseguir una gradación de menús y páginas que un usuario medio perciba como natural, y que no confunda o interfiera con el uso que haga del sitio.

Los sitios web con una estructura jerárquica poco profunda dependen demasiado de páginas menú extensas que pueden confundir de la misma mane-ra que una “lista de la compra” con información no relacionada:

Un esquema de menús puede, a su vez, ser tan pro-fundo, que la información quede enterrada bajo ex-cesivos niveles de menús. Cualquier usuario puede sentirse frustrado si la navegación que se le propone no le deja más opción, para acceder a los conteni-dos reales, que atravesar numerosas capas de me-nús vinculados:

Si la web está en continuo crecimiento, el equilibrio correcto entre menús y páginas de contenidos es un factor dinámico fundamental. La retroalimentación o feedback por parte del usuario (y el propio análisis del uso que nosotros hacemos del sitio) puede ayu-dar a decidir si el esquema de menús resiste su uso o tiene puntos débiles a mejorar. Estructuras com-plejas de documentos requieren jerarquías de me-nús más profundas, pero el usuario nunca debe ser forzado a una página de menús tras otra si el acce-so directo es factible. Con una jerarquía funcional y equilibrada de menús se puede ofrecer al usuario un acceso directo a la información y, a la vez, reflejar la estructura general de la web.

Diseño de la páginaCLARIDAD, ORDEN Y VERACIDAD es lo que más apreciamos cuando buscamos fuentes de infor-mación, sean documentos tradicionales en papel o páginas web. Esta confianza sólo la puede aportar un diseño de página web objetivo. La organización espacial de texto y gráficos en una página web, gra-cias a su impacto visual, puede implicar al usuario, puede dirigir su atención, priorizar la información a la que se enfrenta y hacer que la interacción con la web sea mucho más amena y eficaz.

Lógica visual. El diseño gráfico genera una lógica visual y persigue un óptimo balance entre el estí-mulo visual y la información gráfica. Sin el impacto visual de las formas, el color y el contraste, las pá-ginas pueden convertirse en aburridas y no motivar al usuario. Un documento de texto denso, sin con-traste ni alivio visual, es más duro de leer. Pero sin la profundidad y complejidad del texto, las páginas con preponderancia de elementos gráficos corren el riesgo de decepcionar al usuario al ofrecer un equi-librio pobre entre el estímulo visual, la información en formato de texto y los enlaces interactivos mul-timedia.

La continuidad visual y funcional de la organización, el diseño gráfico y la tipografía de la web son fun-damentales para convencer al público de que ésta puede ofrecerle una información útil, exacta y opor-tuna.

JERARQUÍA VISUAL

La primera de las tareas del diseño gráfico es crear una jerarquía visual fuerte y consistente, donde se enfatizan los elementos importantes y se organizan los contenidos de forma lógica y previsible.

El diseño gráfico es básicamente la gestión visual de información utilizando herramientas como la compo-sición, la tipografía y la ilustración, para guiar el ojo del lector a través de la página. El lector primero vi-sualiza una página como grandes masas de forma y color, con unos elementos en primer plano contras-tados con otros del fondo. Sólo en segundo lugar

3


empieza a escoger entre la información, primero en el ámbito de imágenes o gráficos -si es que existen-, para después empezar a analizar gramaticalmente el texto y a leer palabras concretas y frases:

El contraste es fundamental. El equilibrio y organi-zación general de los elementos gráficos de una pá-gina es esencial si se desea atraer al usuario hacia los contenidos. Una página aburrida, con sólo texto, provocará un rechazo del ojo, pues se encontrará ante una masa gris y monótona, sin claves evidentes de cómo se estructura la información. Por otro lado, una página diseñada de forma torpe, con grandes titulares en negrita o elementos gráficos demasia-do pesados, también distraerá o repelerá al usuario que esté buscando contenidos con más sustancia. Deberás conseguir un apropiado equilibrio entre la necesidad de atraer al ojo mediante el contraste vi-sual y la necesidad de ofrecer una organización clara

n EYETRACKINGEl usuario, con su comportamiento y comentarios ante la tarea contribuye a veces al análisis del pro-blema; pero sus expresiones acostumbran a ser am-biguas, poco concretas o incluso diferir en ciertos aspectos de sus pensamientos, por lo que a lo largo del tiempo han ido apareciendo técnicas y tecnolo-gías para extraer datos más objetivos. Una de ellas es el eyetracking.

El eyetracking es una tecnología que permite seguir los movimientos oculares de una persona para infe-rir qué mira y qué ve. Esto se consigue actualmen-te mediante un eyetracker, un monitor especial que lanza rayos infrarrojos a los ojos de quien lo usa. Es-tos rayos rebotan en su pupila y vuelven al aparato, permitiendo así calcular con precisión dónde está mirando.

Teniendo esto en cuenta, podemos saber en qué zonas de la web se fijan más los usuarios para op-timizar la colocación de botones o elementos que deseemos destacar.

n RETÍCULAS PARA PÁGINAS WEB

La consistencia y previsibilidad son características fundamentales en todo sistema de información bien diseñado. Las retículas de diseño que subyacen en la mayoría de las publicaciones en papel de calidad, son igualmente necesarias en el diseño de todo do-cumento electrónico o publicación en Red, donde las relaciones espaciales entre los elementos que aparecen en la pantalla cambian constantemente en función de las interacciones del usuario y de la acti-vidad misma del sistema.

No existe una retícula de diseño apropiada para la globalidad de páginas web. El primer paso es esta-blecer una retícula de composición básica. Con esta “espina dorsal”, puedes decidir cómo se relaciona-rán los bloques de texto y de imagen entre ellos, y puedes generar las líneas maestras de estilo que re-girán todas las páginas de la web, utilizando títulos, subtítulos, botones y enlaces para la navegación.

El fin es establecer una composición de pantalla ló-gica y consistente, que permita la flexibilidad sufi-ciente como para colocar gráficos y texto de distin-tas maneras, sin tener que reconsiderar el diseño de cada una de las páginas con las que te enfrentes. Sin una fuerte retícula de composición subyacente, la composición de las páginas de tu proyecto fluc-tuará según las decisiones del momento, y el diseño web, como globalidad, parecerá confuso e incom-pleto.

La disposición de los elementos visuales mediante el sistema reticular produce la impresión de armonía global, de transparencia, claridad y orden. El orden en la comunicación favorece a la credibilidad de la información y otorga confianza. Una retícula ade-cuada en la configuración visual posibilita:

- La composición del texto y de las ilustracio-nes de forma sistemática y rápida. - La composición de textos o ilustraciones de un modo compacto con su propio ritmo. - La disposición de material visual de modo que sea fácilmente inteligible y estructurado.

4


CONSISTENCIAEstablece en primer lugar una retícula base y un estilo para los textos y los elementos gráficos; apli-ca luego estos parámetros para construir un ritmo y una unidad a lo largo de todas las páginas de la web. La repetición no es aburrida, sino que aporta a la web una fuerte identidad gráfica que genera y re-fuerza la sensación de estar en un “lugar” memora-ble y diferenciado. Una aproximación consistente a la composición y a la navegación permite al usuario adaptarse rápidamente al diseño y prever con con-fianza la localización de la información y del control de la navegación a lo largo de todas las páginas de la web.

Si escoges una temática gráfica, utilízala por toda la web.

n TIPOGRAFÍA

CARACTERÍSTICAS TIPOGRÁFICAS DE LA RED

A pesar de que las reglas tipográficas básicas son las mismas tanto para los documentos web como para los documentos impresos convencionales, la tipo-grafía tiene características sustancialmente distintas se muestre en una pantalla o impresa en un papel. La pantalla de un ordenador reproduce las fuentes a una resolución muy inferior a la que encontramos en cualquier libro, revista o incluso cualquier página salida de una impresora corriente. La mayor parte de las fuentes de libros y revistas se reproducen a una resolución de 300 pixeles por pulgada o mayor, mientras que una pantalla de ordenador raramente supera una resolución de 72ppp.

Los documentos que se escriben para ser leídos en la pantalla deben ser concisos y estructurados. En lugar de leer palabra por palabra, la tendencia es leer las páginas web echándoles un vistazo. Uti-liza los títulos, listas y los énfasis tipográficos para destacar secciones o párrafos; en una visualización rápida, este tipo de elementos son los que atraen la atención del usuario. Manténlos claros y precisos.

Utiliza los titulares de sección para describir el ma-terial que se muestra

Al diseñar una tipografía, alguien ha pensado en cómo se percibirán las letras, las palabras, las ora-ciones y los párrafos se verá con el fin de que pue-da ser leído cómodamente, o nos hacen sentir de cierta manera cuando lo miramos. A veces se hace bien, otros no. Muchas veces somos nosotros los diseñadores gráficos que son los que deciden cómo se verá, en nuestros folletos, nuestros logotipos, nuestros sitios web y así sucesivamente.

La buena tipografía viene de prestar atención a los pequeños detalles ya que esto puede hacer la dife-rencia entre el trabajo de diseño gráfico que es acep-table o muy bueno. Se trata principalmente de hacer que nuestros textos sean legibles y de fácil lectura, así como de conseguir un resultado estético.

• Usa una tipografía de sin serifas para los bloques de texto

• Usa siempre un buen contraste. Texto oscuro sobre fondo claro

• Usa siempre colores web seguros

• Usa siempre tipografías para web

• Haz siempre los enlaces de hipertenso azu-les y subrayados

• Nunca uses itálicas

LEGIBILIDAD

La buena tipografía depende del contraste visual entre los distintos tipos de letra y entre los distin-tos bloques de texto, titulares y espacio en blanco circundante. Nada atrae más el ojo y la mente del usuario que un estudiado contraste o una adecuada diferencia en el tratamiento de cada uno de los ele-mentos. Esto se puede conseguir sólo con un dise-ño cuidado de las páginas. Si rellenas tupidamente

4


cada una de las páginas con texto, el lector se en-frenta ante una pared gris y ante la carencia de con-traste visual e, instintivamente, se siente rechazado. Tampoco ayuda hacer que todos los elementos de la página crezcan en tamaño de manera uniforme. Incluso las fuentes en negrita pueden convertirse en monótonas, ya que si todas tienen esta propiedad, ¿qué elementos se destacarán en “negrita?”.

Cuando el contenido es esencialmente texto, la ti-pografía se convierte en la herramienta para “pintar” y organizar la página. Los esquemas compositivos entre el texto y la imagen que se establecen cuida-dosamente en una sucesión de páginas, pueden ayudar a una mejor organización de la información y a incrementar la legibilidad. Para el usuario, es mu-cho más difícil reconocer la estructura subyacente cuando se enfrenta a una tipografía desigual o hete-rogénea, lo cual hace imposible prever y localizar la información en documentos no conocidos:

ALINEACIONESLos márgenes definen la zona de lectura al separar el cuerpo de texto de la zona que lo rodea. En todo tipo de documentos, los márgenes aportan una in-cuestionable tranquilidad visual. En el diseño web es importante un cuidadoso diseño no sólo de los márgenes, sino también del espacio en blanco, pues en cualquier pantalla de ordenador, los contenidos coexisten forzosamente con los elementos de la in-terfaz del propio navegador, e incluso con otras ven-tanas, menús o iconos de la interfaz de usuario del sistema operativo.

Los márgenes y en general el espacio pueden di-ferenciar el cuerpo principal de texto del resto de elementos de la página. Si se usan de forma consis-tente, pueden aportar unidad al sitio al edificar -a su largo y ancho- una estructura y apariencia fuertes. También aportan un mayor atractivo visual a la pági-na al añadir contraste entre el espacio positivo (texto y gráficos) y el negativo (espacio en blanco).

LONGITUD DE LÍNEAPara favorecer la lectura, las columnas de las revis-tas o de los libros son estrechas por razones psico-lógicas: ante un texto a distancias normales, el ojo abarca de forma correcta unos ocho centímetros de ancho, por ello, el diseñador intenta mantener los párrafos de texto en columnas no mucho más an-chas que esta distancia cómoda para el ojo, pues una línea de texto más ancha provocará en el lector la necesidad de girar su cabeza ligeramente, o forzar los músculos del ojo para seguir la pista de la línea. La agilidad de lectura también se ve afectada, pues el lector puede perderse al buscar el inicio de la línea siguiente.

MAYÚSCULAS Y MINÚSCULASEl uso de mayúsculas o de minúsculas afecta de for-ma importante a la percepción de un encabezamien-to. Al leer, no visualizamos cada una de las letras que componen una palabra y luego la construimos, sino que reconocemos ante todo la forma de la pa-labra como conjunto de letras.

Evita el uso de encabezamientos en mayúscula. Las palabras en mayúsculas tienen carácter de rectán-gulos monótonos que, formalmente, le dicen poco al ojo.

Para los encabezamientos o titulares recomenda-mos una escritura tipo oración (en mayúscula la pri-mera palabra y los nombres propios). Esto es mucho más cómodo, porque, al leer, lo primero que visuali-zamos es la parte superior de las palabras.

Puedes comprobar por ti mismo lo complicado que es leer la parte inferior de las palabras de la misma frase.

Si utilizas mayúsculas en las iniciales de cada pala-bra de los titulares, interrumpes la visualización de la forma de las palabras.

ESPACIO EN BLANCO

El interlineado afecta en gran medida la legibilidad de un bloque de texto: demasiado grande hace que

4


el ojo tenga dificultades para encontrar la línea si-guiente, mientras que, si es demasiado pequeño, confundimos las líneas, pues los rabos superiores de las palabras se interpolan con los inferiores de la línea superior.

En papel se considera un interlineado correcto aquel que está dos puntos por encima del tamaño de la letra. Por ejemplo, para una letra de 12 puntos uti-lizaríamos un interlineado de 14 puntos. Si utilizas el interlineado, aconsejamos que éste sea generoso, por ejemplo, letras de 12 puntos con un interlineado de 14 a 16 puntos.

Legibilidad en pantalla. En una pantalla de orde-nador, algunas fuentes facilitan la lectura más que otras. Una fuente tradicional, la Times New Roman es considerada como la más legible en el medio im-preso, pero su tamaño es demasiado pequeño en la pantalla, y la forma de sus letras demasiado irregular. Para la legibilidad en pantalla son muy importantes tanto la altura-x (la altura de la letra “x” minúscula) como la forma general de las letras.

Tipos de letra tradicionales adaptados. La Times New Roman es un buen ejemplo de tipografía tra-dicional que se ha adaptado para el uso en panta-llas de ordenador. Un tipo de letra no lineal como ésta (que en la mayoría de navegadores se presenta como la fuente por defecto para el texto), con una altura-x moderada, tiene una legibilidad en pantalla por encima de la media. Times New Roman es una fuente apropiada para documentos con mucho tex-to, que probablemente el usuario imprimirá para leer. El tamaño compacto de la letra Times New Roman hace que también sea conveniente su uso para em-paquetar, en poco espacio, gran cantidad de texto.

Diseños para la pantalla. Tipografías como Geor-gia o Verdana fueron diseñadas especialmente para facilitar la lectura en una pantalla de ordenador. Tie-nen una altura-x engrandecida y, comparadas con tipografías más tradicionales, su tamaño es mucho mayor para una misma dimensión en puntos. Estas fuentes aportan una mayor legibilidad a páginas web que se diseñan para ser leídas directamente en la

pantalla. Si las trasladamos a las altas resoluciones en las que se imprime en papel, su exagerada altu-ra-x y su pesado cuerpo presentan una apariencia poco delicada.

RECUERDA:

• Cuando se está seleccionando múltiples fuentes que han de convivir en un mismo di-seño es crucial mantener tanto la unidad y va-riedad.

El uso de múltiples fuentes en conjunto puede ser difícil y lograr la armonía un reto. Tenga-mos en cuenta el efecto general que se está tratando de lograr. las fuentes, como las per-sonas, tienen personalidad. Y personalidades fuentes que al igual que las personas, a veces pueden entrar en conflicto.

• Demasiadas tipografías con una personali-dad fuerte en un mismo espacio sólo pueden crear confusión.

• No hay reglas en cuanto al número de ti-pografías a usar, pero siempre conviene ser comedido y podemos trabajar con tipografías con una familia amplia que nos permitan una mayor variedad de soluciones.

• Al seleccionar los tipos de letra es impor-tante tener en cuenta la naturaleza del texto a diseñar. ¿Estamos hablando sobre todo el cuerpo del texto? ¿Existen distintos tipos de titulares, subtítulos?

ÉNFASIS

Si una página web contiene únicamente bloques de texto, se hace difícil visualizar en ella la estructura de los contenidos y dificulta también el escaneado al ojo. El énfasis o subrayado aporta estructura a la información y añade variedad visual, lo cual facilita el acceso a los contenidos por parte del lector. La clave en un subrayado efectivo está en la utilización eficaz y económica del énfasis tipográfico.

4


La tipografía tradicional posee ya unas buenas he-rramientas para añadir énfasis a un bloque de texto, pero asegúrate de utilizarlas siempre mesuradamen-te. Si pones un texto entero en negrita, nada resalta-rá y parecerá que estás gritando a tus lectores. Una buena regla que puedes utilizar es añadir énfasis al texto utilizando cada vez sólo un parámetro. Si de-seas que determinados titulares atraigan la atención del lector hacia secciones concretas, no utilices un tamaño grande, en negrita y además mayúsculas (es decir, todo de golpe); si quieres que se destaque, utiliza un tamaño de letra un nivel superior. Si pre-fieres la negrita, utiliza el mismo tamaño de fuente, pero en negrita. Descubrirás rápidamente cómo con sólo una ligera variación del estilo se puede conse-guir un gran contraste visual.

Cursiva. El texto en cursiva nos atrae por el contras-te respecto a la forma del cuerpo principal de texto. Es bueno utilizar las cursivas en los casos conven-cionales, por ejemplo al citar títulos de periódico o libros, o en el interior de un bloque de texto para señalar expresiones forzadas o palabras de otro idioma. Evita utilizar la cursiva en bloques de texto largos, pues de esta manera no facilitan la lectura.

Negrita. El texto en negrita contrasta con el normal por su color, aportando el énfasis necesario para, por ejemplo, los títulos de las subsecciones. El texto en negrita se lee bien en la pantalla, aunque si lo utilizamos para bloques de texto demasiado largos pierde su capacidad de contraste y, por tanto su efi-cacia.

Subrayado. El texto subrayado es una herencia de la época en que se utilizaban las máquinas de escri-bir, que no tenían la capacidad de escribir en cursiva ni en negrita. Además de sus deficiencias estéticas (es un recurso demasiado pesado e interfiere con las formas de las letras), en un documento web, subra-yar tiene un significado y funciones especiales. La mayor parte de los usuarios tienen configurado su navegadorpara que subraye los enlaces. Si introduces texto su-brayado en una página web lo más probable es que la gente lo perciba como un enlace de hipertexto.

Texto en color. A pesar de que el color es una op-ción más para diferenciar un determinado texto del cuerpo principal, en un documento web tiene un sig-nificado propio, al igual que el subrayado. Deberías evitar insertar texto en color en un bloque de texto, porque el usuario enseguida lo asociará a un enlace de hipertexto e intentará clicar en él. De todas for-mas, es muy apropiado cuando se utiliza sutilmen-te para distinguir los titulares de una sección. Por ejemplo, puedes usar tonos oscuros que contrasten con el fondo de la página, evitando los tonos que tradicionalmente vienen por defecto como color de enlace: el azul y el violeta.

Mayúsculas. El texto en mayúsculas es uno de los métodos más utilizados y menos efectivos en la vo-luntad de poner énfasis tipográfico a un texto. Reco-nocemos las palabras de dos maneras: mediante un análisis gramatical de grupos de letras y a través de las formas mismas de las letras.Las palabras o encabezamientos en mayúsculas forman una sucesión monótona de rectángulos, sin ningún resalte. Para leer un bloque de texto en ma-yúsculas, únicamente nos queda la posibilidad de analizar los distintos grupos de letras -leer el texto letra a letra- lo que aumenta la incomodidad en la lectura y ralentiza el proceso.

Fíjate en lo cansado que es leer este párrafo:

EL DISEÑO DEL SITIO DETERMINARÁ SU MARCO DE ORGANIZACIÓN. EN ESTA FASE DEL PROYEC-TO, SE TOMARÁN LAS PRINCIPALES DECISIONES ACERCA DE QUÉ ES LO QUE QUIERE EL PÚBLICO DE LA WEB, QUÉ ES LO QUE SE QUIERE DECIR Y CÓMO ORGANIZAR LOS CONTENIDOS PARA SATISFACER AL USUARIO EN LA MAYOR MEDIDA POSIBLE. A PESAR DE QUE A PRIMERA VISTA ES EL DISEÑO GRÁFICO LO QUE ANTES PERCIBE EL USUARIO, LA ORGANIZACIÓN DE LA WEB SERÁ EL ASPECTO QUE CAUSE UN MAYOR IMPACTO EN SU EXPERIENCIA.TIPOGRAFÍA COMO IMAGEN

En un sitio web, la tipografía no siempre puede ais-larse de los elementos gráficos o de las imágenes.

4


El texto, como elemento gráfico, puede estar estre-chamente integrado con la imagen, de manera que sea imposible mostrarlo en formato de texto HTML.

Por razones estéticas puedes decidir mostrar el tex-to como representación en formato de imagen, en lugar de trabajar directamente con el lenguaje HTML.

WEBFONTS

No poder hacer uso de la tipografía como elemen-to decorativo y de comunicación gráfica ha sido siempre una limitación en el diseño de paginas Web. Hasta hace muy poco si queríamos que nuestros di-seños se vieran más o menos igual para todos los usuarios había que conformarse con unas cuantas fuentes que ya sabíamos que estaban instaladas en la mayoría de los ordenadores, otra solución era la de convertir nuestros textos en imagenes que luego podiamos usar de fondo. El trabajo se complicaba cuando había que traducir esas paginas a diferen-tes idiomas, o necesitábamos que esos textos cam-biarán dinámicamente. En el primer caso habia que crear esas imagenes en todos los idiomas, el segun-do no tenia solución.

Durante estos años han ido surgiendo ideas muy ingeniosas para resolver el problema, pequeños “trucos” para engañar y obligar a los navegadores a mostrar nuestras fuentes, pero en su mayoría, al día de hoy, todas estas técnicas todavía presentan muchas limitaciones.

La más simple y flexible de todas estas tecnologías, la que ofrece mayor compatibilidad entre navegado-res y parece tener un futuro como la solución defi-nitiva al problema, es una simple regla css incluida en la pagina Web que enlazada directamente al ar-chivo de una tipografía en un servidor. Esta regla es interpretada por el navegador que es el encargado de embeber la tipografía.

Nota: Ver documento de enlaces

4


n ¿QUÉ ES CSS?

Siglas de “Cascading Style Sheets” (Hojas de Estilo en Cascada), es una tecnología desarrollada con el fin de separar la presentacion de la estructura del HTML. Funciona aplicando reglas de estilo a los elementos HTML, entre las que incluyen, tamaño, color de fondo, color del texto, posicion de los el-ementos, margenes, tipos de letra, etc... quedando de esta manera toda lo que tiene que ver con la parte gráfica de la web, separada completamente de la estructura del HTML.

Este lenguaje desarrollado por la W3C, ha venido haciendose cada vez mas importante entre los diseñadores, gracias a la facilidad de uso y a los optimos y flexibles resultados.

Aprender a conocer CSS nos dará como resultado un mejor flujo de trabajo, mayor organización de nuestro codigo, menos peso en las paginas, y mas flexibilidad a los cambios. Ademas una vez familiar-izados con sus capacidades, nos daremos cuenta de que es mas fácil y rápido diseñar con CSS que de la manera antigua.Bien, empecemos por el principio. Aqui intentare enseñar como hacer documentos validos y que sean bien interpretados por la mayoría de los nave-gadores actuales. Lograremos esto conociendo los tres principales elementos en el desarrollo de CSS: Atributos, valores y selectores.

AtributosSon las palabras que usaremos para indicar cual estilo queremos modificar, por ejemplo, si quere-mos cambiar el tipo de letra, usamos el atributo “font”, si es el fondo, el atributo “background”, etc.

ValoresSon para definir como vamos a modificar el atribu-to, o la propiedad que le daremos. Por ejemplo, si queremos que un tipo de letra sea rojo, usamos el atributo “font” y el valor “red”.

SelectoresSe usan para definir sobre cuales elementos HTML

vamos a aplicar los estilos, si queremos definir un estilo para toda la pagina, debemos usar el selec-tor “body” que se refiere a la etiqueta <body> del documento HTML.

Hay tres tipos de selectores: Los selectores de etiquetas HTML, se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo. Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas con un nombre. El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto “.” seguido del nombre que le queramos poner a la clase, de esta forma: .mi_clase.

La sintaxis:Es muy simple, primero se coloca el selector, luego se abre una llave “{“ y se empiezan a colocar los atributos, seguidos de dos puntos “:” y luego el valor seguido de punto y coma “;”, al final de todo se cierra el estilo para el selector con el cierre de llave “}”. Se pueden definir tantos atributos con sus respectivos valores como se desee, separandolos con un espacio o un salto de linea. En CSS se de-ben escribir los atributos y valores con minusculas y los comentarios se encierran con “/*” para abrir y “*/” para cerrar, como veremos en el siguiente ejemplo:

/*CSS sobre selector de etiquetas*/body { font family: arial; font size: 12px; color: black; background color: #cccccc;}

5

Este tipo de selector no requiere de aplicación en el documento HTML, las etiquetas a las que se les defina un estilo de esta forma automáticamente heredarán los estilos.

/*CSS sobre selector de identificador*/#header { background color: #ff0000; color: #ffffff; font size: 26px;}

En este caso, se lo aplicamos a la etiqueta con solo colocarle el identificador, como en este ejemplo:

<div id=”header”>Aqui el contenido</div>

/*CSS sobre selector de clase*/.mi_clase { margin: 5px; height: 100px; width: 200px;}

En los selectores de clase, usamos el atributo “class” en las etiquetas HTML para darles el estilo. Ejemplo:

<div class=”mi_clase”>Aqui el contenido</div>

Ademas de esto, existen tres formas de aplicar esti-los CSS a una pagina, la que recomiendo en primer lugar, haciendo un archivo de texto plano guardado como archivo.css, separado del archivo HTML, y vinculando la hoja HTML a el. Esto se hace colo-cando en la sección head de la página:

<link href=”archivo.css” rel=”stylesheet” type=”text/css”>

Para mi esta forma es la mas recomendable porque asi se puede vincular el archivo.css a todas las páginas del sitio, es mucho mas liviano al ver la pa-gina y ademas a la hora de modificar algo se hace solo una vez.

La segunda forma es aplicando los estilos directa-mente en la sección <head> del documento HTML. Se hace de la siguiente forma

<head><title>Pagina</title> <style type=”text/css”> <!-- body { font family: Geneva, Arial, Helvetica, sans serif; font size: 12px; color:#333333; } -- > </style></head>

Es buena idea colocarlos de esta forma si son esti-los exclusivos para la pagina a la que se le aplica.El tercer método no lo recomiendo, aunque algunas veces puede ser necesario. Consiste en aplicar el estilo directamente sobre el elemento HTML, de esta forma:

<table style=”background color:#333333; padding:2px; width:300px; height;100px;></table>

Como puede verse en algunos casos, los atributos pueden ser compuestos, como el atributo “font-family” o “background color”, puede llevar adi-cionalmente caracteristicas mas especificas, que van separadas por un guion “ “ como vimos en los ejemplos. Los valores tambien pueden ser de diferentes tipos, en los de medida, se pueden usar pixeles “px” centimetros “cm” o relativos como “em”, en los colores se puede usar la notacion hexadecimal (#FF3300) o directamente el nombre del color en ingles.De esta forma podemos aplicar estilos a todos y cada uno de los elementos HTML que constituyen una página web, y poco a poco ir separando el contenido de la presentación, ademas de lograr en un documento completamente válido cosas que solo el poder de CSS puede lograr, como cambiar completamente la apariencia de una página sin tocar el archivo HTML.Unicamente con el uso, se va uno acostumbrando a lo que se puede hacer con CSS, al principio,

5


seguramente , les pasará (como a mí) que solo lo usan para dar formato a los textos, tablas etc, pero luego uno va conociendo como trabaja y va añadi-endo elementos a los archivos CSS.El punto ideal sera cuando logremos separar com-pletamente el diseño del contenido, dominando las técnicas de posicionamiento con CSS, y eliminando el uso de tablas para diagramar el contenido.

FRAMEWORKSMarcos CSS pueden ayudar a hacer más fácil la construcción de su red. Se puede asegurar que los diseños potencialmente complejos se procesan correctamente en, ejem, navegadores difíciles - sí, estoy mirando a ti IE 6!

Según la definición de Wikipedia, un marco de CSS es: “Un marco de CSS es una biblioteca que está destinado a permitir la fácil estilo, más compatible con los estándares de una página web utilizando el lenguaje de Hojas de Estilo en Cascada. Al igual que los lenguajes de programación y scripting, marcos CSS paquete de una serie de opciones ya preparadas para el diseño y outlaying una página web “

Que todo suena bien. El objetivo de un marco de CSS es quitar algunas de las tareas repetitivas, sin dejar de ser seguro de que su sitio no se romperá si se construye otro diseño. Hay una serie de marcos que puedes descargar, que van desde el complejo, (como el marco de Yahoo! UI Library grid), a la simple 960.gs. Voy a hablar de un solo marco aquí - Blueprint - y específicamente cómo usarlo como base para el diseño de la red.

MEDIA QUERIESLa rápida distribución de dispositivos móviles, ha puesto el mundo del web de cabeza. Los usuarios ya no ven únicamente contenido web en com-putadoras de escritorio, sino en smartphones, tabletas y otros dispositivos con un amplio rango de dimensiones. El reto para los diseñadores web es asegurar que sus sitios puedan verse bien, no sólo en una pantalla grande, sino también en una pequeña pantalla de celular y cualquier pantalla de

por medio.

Los Media Queries, son una excelente forma de entregar diferentes estilos para diferentes disposi-tivos, y proveer la mejor experiencia para cada tipo de usuario. Como parte de la especificación CSS3, los Media Queries expanden el rol del atributo me-dia, que controla como se aplican los estilos. Por ejemplo: se ha vuelto una práctica común por años el uso de una hoja de estilos por separado para im-primir sitios web al especificar media = “print”. Los Media Queries, llevan esta idea al siguiente nivel, al permitir a los diseñadores asignar estilos basados en las propiedades de un dispositivo, como el an-cho de pantalla, orientación y así sucesivamente.

RESET CSSNuestro objetivo, es conseguir que nuestra WEB, se vea igual en todos los navegadores (o al menos, en los más importantes), pero muchas veces, el prob-lema viene por la manera que tiene cada navegador de mostrar los elementos.Por ejemplo, si sólo pones:

Código :<p>contenido</p>

Y lo renderizas con varios navegadores, verás que hay diferencias en el resultado entre algunos de ellos ya que cada navegador define como cree conveniente los margenes que le pone al elemento <p>, su padding, su tamaño de fuente, posición relativa...Esto no sólo le ocurre a los <p>, sino a casi todos los elementos que estamos acostumbrados a usar. Y cada navegador, tiene su “estilo por defecto”. Y nunca coinciden...¿cómo lo arreglamos? Reseteando el CSS.

Mediante este sencillísimo concepto, le diremos al navegador que visualice nuestra WEB, que no queremos que aplique “su estilo”, sino el que defi-namos nosotros. Para ello, sólo tenemos que “ini-cializar”, al principio de nuestra hoja de estilos, la propiedad que queremos “resetear”, del elemento que queramos tener “reseteado”.

5


Por ejemplo, el “reset” más conocido, es:

Código :

* {margin:0px;padding:0px;}

¿Qué hace esto? Pues puesto al comienzo de nuestra hoja de CSS, le dice al navegador: <<Qui-ero que le quites el margen y padding por defecto, a todos los elementos de mi WEB>> Desde enton-ces, todos los navegadores le quitarán el margen/padding a cualquier elemento, en consecuencia, este aspecto será igual en cualquier navegador.Después del reset, claro, tenemos que definir los valores que queramos usar.¿y hay algún reset más completo? Hay muchos. Encontraréis “CSS reset” para todos los gustos, unos más extensos que otros en GoogleEjemplo:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, big, cite, code, del, dfn, em, font, img, ins, kbd, strike,abbr, acronym, address, q, s, samp, small,strong, sub, sup, tt, var, dl, dt, dd, ol, ul, fieldset, form, label, legend, table, caption, tr, th, td, center, u, b, i{vertical-align: baseline border: 0; outline: 0;font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit;}li, tbody, tfoot, thead,*{margin: 0; padding: 0} {line-height: 1; height:100%} {outline: 0} {list-style: none} {border-collapse: col-lapse; border-spacing: 0;} {quotes: “” “”}body :focus ol, ul table blockquote, q hr height:1px} blockquote:before, blockquote:after, q:before, q:after {content: “”}

Como veréis, no sólo quita el margen/padding a todos los elementos, sino que hace otras muchas cosas, como “alinear abajo” los elementos de línea, o hacer que se hereden las fuentes en todos los elementos, o quitar el “marco punteado” de los elementos cuando los “seleccionamos”, o aplanar los bordes de las tablas, o poner a 1px las líneas <hr>... etcétera.

CONSEJOS:Para usar este reset (o cualquier otro), has de pon-erlo al principio de la primera declaración CSS que tengas, pues si no, te sobreescribirá las anteriores (“regla de la cascada”) Cuando uses un “reset”, resetea al principio de empezar a diseñar. Si aplicas este reset a un documento que ya tengas hecho y terminado, verás como muchas cosas puede que se te descuadren, y tendrás que “redefinirlas”.Una buena idea, puede ser, guardar el reset anterior en un documento nuevo (reset.css), y “linkearlo” al principio de vuestras webs, cuando empeceis a trabajar, de la siguiente manera:

<link href=”reset.css” rel=”stylesheet” type=”text/css” />

5


n FLASH

Flash como tal empezó como simplemente un soft-ware de animación vectorial con algunas acciones básicas y se ha convertido en lo que es ahora, un entorno multimedia de desarrollo de todo tipo de trabajos que requieran integración de medios inte-ractivos de fácil distribución multiplataforma; des-de animaciones para televisión hasta Rich Internet Applications para Intranets o aplicaciones web y es precisamente eso; sus inicios, lo que lo tienen mar-cado de nacimiento.

La mayoría de power users de cualquier sistema operativo tiene bastante experiencia con la web; alguna vez navegó con Internet Explorer y odia los popups emergentes y la publicidad intrusiva en un banner de 640x480 que te meten en la mitad del contenido de una pagina para que, supuestamente, hagas click de manera mas efectiva.

En que estará hecho este banner... ¿Como puedes hacer una súper animación que incluya todo tipo de efectos raros, sonido, bitmaps y la foto de tu perro, en menos de 30Kb? Si dijiste Flash, has acertado.

No digo que sea malo hacer banners; digo que si es malo meter publicidad intrusiva y encima abusar de flash para ello

Si eres novato en Flash seguramente lo primero que aprenderás es animación, seguro que luego apren-des a publicar para la web y seguro que haces una megaINTRO para tu web con muchos bonitos co-lores y animaciones shape morph(Interpolación de forma) por montón; ahora claro, avanzas un poco mas, aprendes a hacer botones y mejoras la expe-riencia de tu usuario metiendo un botón Skip IntroNo lo hagas y de hecho, repite después de mi

Un intro es malo Un intro es malo Un intro es malo

Si tienes una animación de intro en tu web, repetirás estas tres sabias frases todas las noches antes de dormir.

Un diseño debe ser funcional, usable y practico, ahora, si encima es bonito, pues tanto mejor, un buen diseño. Las intro no aportan nada, son aburri-das después de la primera vez, casi siempre (casi) son pesadas y te dejan como tonto pensando que esperaste todo eso para ver los bonitos colores ani-mados y al fin entrar a la web; no te engañes, una intro solo sirve para aumentar ego de diseñador.

Popups y fullscreen son palabras que el colectivo de power users relaciona con Flash Developer; si no, solamente miren cualquier pagina web de la película de turno y verán que, después de una intro de 1Mb, te abre un popup con la información de la película¿Es tan difícil hacer un fondo presentable para una web en Flash?; ¿Es necesario arruinar la experiencia del usuario con un intrusivo popup que te quita las barras de navegación?, ¿Tan poco éxito quieres te-ner con tu web?

El usuario no pidió que le abrieran una nueva venta-na (una mas de tantas), esto es incomodo, ¿Y si el quería seguir navegando en la ventana donde esta-ba? O peor aun ¿Si usa un navegador de verdad y esta usando pestañas? Acabas de arruinar por com-pleto su experiencia (Y la imagen de tu web de paso)No solo eso, sino que le quitas al usuario dos ele-mentos claves, la barra de dirección y las herramien-tas de navegación. ¿Qué de malo tiene que se vea la URL?, ¿Qué de malo tiene poder usar el botón Atrás?

¿Y si animo el logo? ¿Y si animo las noticias? ¿Y si animo la botonera?

Que el logo tiene una animacioncilla divertida, esta bien, siempre y cuando no sea fastidiosa a la vista y en lo posible no sea animada todo el tiempo Que las noticias van animadas en un scroll

Es cierto que Flash es poderoso en la animación; pero no tienes que abusar; una web es una web, he-cho en Flash no implica que todo deba ser anima-do; piensa en lo que te fastidiaría si no conocieras el contenido y quisieras leerlo, piensa en tu usuario, no en ti.

6


n EL DISEÑO PUBLICITARIO EN INTERNET

BannersDentro de las formas publicitarias más usuales que podemos diseñar para la WWW están los banners. Es publicidad pasiva que el internauta encuentra sin buscarla tal como sucede en los medios tradiciona-les. Estas ventanas publicitarias surgen automática-mente cuando el internauta está consultando pági-nas web. “Son espacios gráficos con enlaces a otras páginas que contienen la información extendida de los productos y servicios que publicitan y comercia-lizan en otros casos. Los “banners” son muy útiles; aunque el documento sea muy largo y tengamos que movernos por él, la ventana publicitaria siempre estará visible y disponible”

FORMATOS

Sus formatos tienden a estandarizarse. El más usual es el tamaño 468x60 píxeles (2x0,8 cm), aunque existen otras tablas de medidas. El lAB (“Internet Advertising Bureau”) ha confeccionado una guía de formatos publicitarios para evitar lo negativo de un mercado caótico de tamaños

Banner: Se llama banners a todos los formatos pero cada uno tiene su nombre. El banner sólo es el que mide 468×60 píxeles. Antes era muy común encon-trarlo en todas las webs pero hoy en día debido a su pequeño tamaño es muy complicado encontrar-lo. Aparecía en la parte superior de las páginas pero como ahora las resoluciones de los monitores son mayores hay más espacio y se utilizan formatos ma-yores.

Megabanner o Superbanner: En inglés lo conoce-mos como Leaderboard. Es la evolución del banner ya que es de las mismas proporciones pero más grande. Mide 728×90 píxeles y lo podemos encon-trar en las cabeceras de la mayoría de los periódi-cos online. Puede ser expandible, esto quiere decir que al pasar por encima muchos aumentan su ta-maño hacia abajo. Ese tamaño depende de la pági-na donde se encuentre y sus especificaciones pero normalmente suelen permitir que expanda al doble

del original. Esto quiere decir que si en reposo mide 728×90 expandido puede ser 728×180.

Rascacielos, Skyscraper o simplemente Sky: A diferencia de los otros dos formatos anteriores este es un formato vertical como su nombre indica (for-ma de rascacielos). El principal mide 120×600 pero ha evolucionado y también lo podemos encontrar un poquito más ancho: 160×600. Otra evolución mayor y que mucha gente llama doble-sky mide 300×600 y lo podemos encontrar en muchas páginas webs en sus laterales. Como el anterior puede ser ex-pandible, normalmente hacia la izquierda y como mucho al doble de su tamaño original, por ejemplo un 120×600 normalmente expandirá a 240×600 ó 300×600.

Robapáginas: Posiblemente este sea el formato más encontrado en internet. Sobre todo porque de-bido a sus dimensiones y proporciones es muy fácil de integrar con el contenido. Su tamaño es 300×250 pero tiene muchísimas variantes. Yo diría que todo lo que tiene unas proporciones “cuadradas” y está entre 200×200 y 400×400 puede ser llamado roba-páginas. Los más encontrados son el 300×250 y el 300×300 pero también hay muchos 200×200 y algún que otro 400×400 aunque este es un poco grande.

También los podemos encontrar expandibles (al pa-sar por encima de ellos) en muchos casos. El tama-ño de expansión varía mucho dependiendo de los soportes. Muchas veces expanden sólo hacia un lado, otras hacia arriba o abajo y otras en varias di-recciones. Lo “normal” es que expanda sólo hacia una dirección, por ejemplo un 300×250 expande a 600×250 (así es como expande en elpais.com por ejemplo).

Minibanner: Formato muy utilizado pero pequeño, su tamaño es 234×60 píxeles. Pensaréis por qué un formato tan pequeño es tan utilizado y la explicación la tenéis seguramente delante de vosotros . El sitio más común para encontrarlo es en el Messenger. Si abrís la aplicación para chatear lo podréis encontrar abajo del todo. Aparece también en muchos sitios web pero ese es el sitio por excelencia.

7


Como los anteriores se expande y lo normal, o por lo menos en el Messenger que es donde casi siempre lo podremos encontrar expandible, sea a 300×250. Es decir, un 234×60 expande a 300×250.

Botón o Botones: Con este nombre diría yo que agrupamos a todos los formatos que son más pe-queños que un minibanner. Por ejemplo un 120×60, un 90×90, etc… Es decir, son formatos que son muy pequeñitos y que muchos además van acompaña-dos de texto al lado. Suelen ser muchas veces sim-ples imágenes sin animación.

Text-link: Este no es un formato gráfico como los anteriores sino de texto. Tiene una limitación de caracteres, por ejemplo 30 caracteres y suelen ir acompañados de un botón de los anteriores (Botón + Text-Link). Para que os hagáis una idea os pongo aquí abajo un ejemplo de la home de Yahoo! con un Botón+Text-Link de autopromo (publicidad de sec-ciones suyas).

Por otro lado encontramos otros formatos de publi-cidad que los internautas consideran como “intrusi-vos” porque aparecen por encima del contenido in-terrumpiendo o molestando la correcta navegación y visualización de los contenidos.

Interstitial o Cortinilla: Posiblemente este sea el formato que peor fama tenga entre los usuarios. Es el que aparece antes de visitar una página web o en-tre sección y sección y ocupa casi toda la pantalla. Normalmente tiene un tamaño de 800×600 píxeles, a veces es un poco más pequeño: 640×480 píxeles. Las características que suelen tener para hacer de este formato lo menos molesto posible es que es obligatorio que lleve una cruz para poderlo cerrar (arriba a la derecha casi siempre) y tienen una dura-ción de tiempo que transcurrida esta aparece la web que se quiere visitar, está entre los 4 y 8 segundos.Casi siempre va acompañado de un formato de re-cuerdo. ¿Qué significa esto? Pues que si por ejem-plo nos aparece un Interstitial de Zara una vez se haya ido y estemos ya en la web de elpais.com por poner un ejemplo habrá o un robapáginas y un su-perbanner de Zara. Ese es el formato de recuerdo o

también conocido como reminder. Casi siempre en las planificaciones está así: Interstitial+Reminder.

Layer: Es un formato parecido al anterior pero más pequeño y que aparece una vez dentro de la página web por encima del contenido. or ejemplo si esta-mos en elpais.com (que no admite layers) aparecería por encima de la noticia un formato por ejemplo de tamaño 400×400. Tiene que tener las mismas carac-terísticas que el anterior, es decir que lleve una cruz para poder cerrarlo y que se vaya automáticamente cuando pasen X segundos.

Pre-Roll: Este es un formato que a muchos les pa-rece muy molesto. A mi personalmente no. Aparece cuando queremos ver un vídeo online antes del ví-deo. Es decir, pulsamos en el play para ver la noticia y aparece este formato como un anuncio de televi-sión. Cuando termina aparece la noticia que quería-mos ver.

Personalizaciones, Wallpapers, etc.: Estos forma-tos consisten en customizar el fondo de la página web con imágenes del anunciante. Además muchos de ellos no sólo son el fondo personalizado sino que todos los formatos que acompañan a la página web son también de ese anunciante. Lo vemos con ejemplos que siempre queda mejor: Por ejemplo en MSN se puede contratar para su página de inicio un Wallpaper. Este formato consiste en una imagen de fondo del anunciante más un robapáginas del anun-ciante más un superbanner del anunciante. Es decir, tú entras en la home de MSN y si por ejemplo Zara tiene contratado un Wallpaper todo lo verás de Zara.

Las malas prácticas de anunciantes y soportes con los banners

Es cierto que el banner es percibido como molesto por muchos usuarios. La culpa no es del anuncio sino del uso y abuso que ha tenido en estos últimos años por parte de los anunciantes y soportes web que lo publican en sus sitios.

Por una parte los anunciantes han querido aumentar su efectividad de manera infinita a través de técnicas

7


molestas e intrusivas. Por otra parte existen páginas web donde cuesta diferenciar lo que es el contenido real y lo que es la publicidad. Desgraciadamente los tipos de banners más moles-tos son los que mayor efectividad muestran. Aparte de los que tienen incluido sonido existen los siteun-ders que son una evolución del pop-up. En este caso se abre una ventana entera por debajo de la ventana en la que actualmente estás navegando.

Banners efectivos sin que sean molestos para el usuario

Si te importa tu imagen como empresa no te reco-miendo hacer uso de los formatos intrusivos. A corto plazo consigues resultados pero a largo plazo pier-des la confianza y credibilidad. Aunque cueste más trabajo merece la pena de invertir trabajo en un ban-ner efectivo que aporta valor al usuario que navega en la web. Para empezar tienes que elegir los sitios de tal manera para que haya un encaje entre el con-tenido de la web y tu oferta comercial.

TEN EN CUENTA…

Creatividad del banner: siguen existiendo aquellos banners que son lo suficientemente creativos para generar el interés por parte del usuario. Incluir per-sonas suele tener mejor resultados.

Integración de una animación flash o video: siem-pre existe un porcentaje de usuarios que percibe un banner animado más molesto que uno sin anima-ción. Hay para todos los gustos, pero es posible que llamar la atención pueda compensar más que dis-gustar a un porcentaje de los internautas.

Banner formulario: uno de los conceptos básicos de usabilidad es ahorrar cada clic que sobra. En este caso el banner se convierte en página de aterriza-je consiguiendo datos de usuarios como el correo electrónico directamente en el banner sin necesidad de tener que pasar por la web del anunciante.

Generar un banner con impacto que sea valorado de manera positiva por la mayoría de los usuarios no es una tarea fácil. No busques nunca el 100% porque es imposible de lograr. Jugar limpio y no hacer uso de técnicas agresivas cuesta más tiempo y esfuerzo pero al final merece la pena.

7

apuntes web 01

Documents