M2 Conceptos

Conceptos de diseo web
Mark Norman Francis Linda Goin Paul Haine Jonathan Lane

PID_00150461
CC-BY-NC-ND PID_00150461
ndice
Introduccin .......................................................................................... 1. Arquitectura de la informacin: planificacin de una web ............................................................. 1.1. Debis planificar la web que queris crear .................................... 1.1.1. Presentacin de The Dung Beatles ................................. 1.1.2. Y ahora qu? Trazado del mapa de la web ...................... 1.1.3. Nombres para las pginas ................................................. 1.1.4. Adicin de algunos detalles .............................................. Resumen ............................................................................................... Preguntas de repaso ............................................................................. 2. Qu necesita una buena pgina web? ...................................... 2.1. La pgina de inicio ........................................................................ 2.1.1. Qu significa para nuestra web? ...................................... 2.2. Navegacin ................................................................................... 2.3. Otros elementos comunes de una web ........................................ 2.4. El contexto lo es todo ................................................................... 2.4.1. Contenido relevante ......................................................... 2.4.2. Encabezamientos ............................................................... 2.5. Usabilidad ...................................................................................... 2.6. Accesibilidad .................................................................................. Resumen ............................................................................................... Preguntas de repaso .............................................................................. 3. Teora del color ................................................................................. 3.1. Colores, tonos y matices................................................................ 3.1.1. Combinaciones de colores monocromticas .................... 3.1.2. Combinaciones de colores complementarios .................... 3.1.3. Colores clidos y colores fros............................................ 3.1.4. Combinaciones de colores tridicas................................... 3.1.5. Combinaciones de colores tetrdicas................................. Resumen ............................................................................................... Preguntas de repaso ............................................................................. 4. Construccin del esqueleto de una pgina web ...................... 4.1. Lo que necesitis saber ................................................................. 4.2. Los primeros pasos ........................................................................ 4.2.1. La web imaginaria de ejemplo .......................................... 4.2.2. El logotipo ......................................................................... 4.2.3. La composicin ................................................................. 4.2.4. Sobre la publicidad en una web ........................................
7 7 7 9 12 12 13 13 15 15 16 17 18 19 19 19 20 20 21 22 23 23 25 26 27 29 31 33 33 35 35 36 39 40 42 45
4.2.5. Comprobacin de la composicin con validadores y el cliente .......................................................................... Resumen ............................................................................................... Preguntas de repaso ............................................................................. Lecturas complementarias .................................................................... 5. Combinaciones de color y modelos de diseo ........................... 5.1. Primer paso: consideracin de la tipografa ................................. 5.1.1. Sobre los tipos de letra o fuentes ...................................... 5.1.2. Sobre la legibilidad ............................................................. 5.2. Segundo paso: aadir tipografa ................................................... 5.2.1. Atencin a la alineacin .................................................... 5.3. Tercer paso: color .......................................................................... 5.4. Cuarto paso: pruebas ..................................................................... Resumen ............................................................................................... Preguntas de repaso .............................................................................. 6. La tipografa en la web ................................................................. 6.1. Limitaciones de la tipografa de la web ......................................... 6.1.1. Seleccin reducida de tipo de letra ................................... 6.1.2. Particin de palabras .......................................................... 6.1.3. Interletraje ......................................................................... 6.1.4. Falta de control ................................................................. 6.2. Cmo se trabaja la tipografa en la web? ..................................... 6.3. Algunos consejos rpidos ............................................................. 6.3.1. Seleccin de una serie de tipos de letra ............................. 6.3.2. Longitud de lnea .............................................................. 6.3.3. Interlineado ....................................................................... 6.3.4. Iniciales ............................................................................. 6.3.5. Versalitas ........................................................................... 6.3.6. Puntuacin libre................................................................. 6.3.7. Puntuacin tipogrficamente correcta y otras entidades ............................................................... 6.3.8. Destacados ......................................................................... Resumen................................................................................................ Preguntas de repaso ............................................................................. 75 76 76 76 46 48 48 49 50 50 51 53 54 57 59 64 65 66 67 67 68 69 70 71 72 72 72 72 73 73 74 74
Introduccin
Este mdulo no entrar en detalles de cdigos o etiquetado, y servir de introduccin al proceso de diseo para ms tarde empezar a crear grficos y cdigo y presentar conceptos de AI, navegacin, usabilidad, etc.
1. Arquitectura de la informacin: planificacin de una web

Jonathan Lane
En general, la fase de planificacin de una web (o de cualquier proyecto) puede ser un poco estresante. Todo el mundo tiene una opinin sobre cmo se habra de crear una web y a menudo todas las opiniones entran en conflicto entre ellas. El objetivo nmero uno de cualquier web debera ser crear algo que sea til para las personas que la utilizarn. Realmente no importa qu diga vuestro jefe, qu diga aquel tipo del fondo con un doctorado en ingeniera informtica, o incluso cules sean vuestras preferencias personales: al final, si creis una web para un grupo de personas concreto, la opinin de este grupo es la nica que cuenta.
Este apartado establecer las fases iniciales de la planificacin de una web y la disciplina que se suele denominar arquitectura de la informacin o AI. Ello implica pensar en cul ser el pblico objetivo, qu informacin y servicios necesita de una web y cmo se habra de estructurar para ofrecrselos. Deberis mirar todo el conjunto de informacin que ha de ir en la web y pensar cmo descomponerlo en fragmentos, y cmo estos fragmentos se deben relacionar entre ellos.
1.1. Debis planificar la web que queris crear
Puede ser que muy de vez en cuando os encontris con algn proyecto web al que os podis lanzar a trabajar directamente sin ningn planteamiento previo, pero sta es, de lejos, la excepcin y no la regla. Echemos un vistazo a una banda ficticia denominada The Dung Beatles e intentemos ayudarles a trabajar en las fases iniciales de la planificacin de su web. Hablaremos con la banda y averiguaremos qu objetivos tienen y qu les gustara ver en la web. Despus, empezaremos a trabajar en una estructura para la informacin de la banda.
1.1.1. Presentacin de The Dung Beatles
The Dung Beatles (TDB) tienen un problema. Son la banda preferida de homenaje a los Beatles de Moose Jaw, Saskatchewan, pero necesitan realzar su imagen de cara a una prxima gira norteamericana este verano. Tienen actuaciones programadas por todo Canad y Estados Unidos, pero son prcticamente desconocidos fuera de su ciudad natal. Si hubiera alguna manera,
mediante la tecnologa, de llegar a un gran nmero de admiradores de los Beatles por relativamente poco dinero...
Afortunadamente para TDB, tenemos esta cosa denominada web y rpidamente deciden que crear una pgina web es la solucin que han estado buscando. TDB necesitan un sitio para promocionar las fechas de la gira, construir una base de fans en otras ciudades y aumentar el conocimiento de la banda. Trabajaris sus ideas con ellos y veris si podis realizar una planificacin para su web.
Concertad una reunin con vuestros nuevos clientes para definir exactamente qu pretenden y para decidir fechas de entrega y costes. Iniciad la conversacin sugiriendo hablar sobre las finalidades y los objetivos de la web con el fin de tener una idea de qu quieren. Qu espera obtener la banda con su presencia en la red?
TDB empiezan a hablar sobre la prxima gira y dicen que estara bien que todos los fans de los Beatles los conocieran en cada una de las paradas previstas. Ahora estamos en febrero y esperan iniciar la gira dentro de cinco meses.
Esperad un momento! Una web por s misma no generar su propio trfico ni se har publicidad sola. A raz de la conversacin, deducs que el principal objetivo de la web es proporcionar un lugar de encuentro para los fans de TDB en la red, un lugar donde puedan estar al da de las ltimas novedades, fechas y sitios de conciertos. Mediante los fans (boca a boca) y otras acciones publicitarias se atraer gente nueva a la web, donde podrn descargar pistas de muestra, ver fotos de la banda (completamente disfrazados) y averiguar dnde y cundo pueden verlos en directo.
Raul McCoffee, el portavoz del grupo, seala que estara bien poder ganar ms dinero para la gira mediante la venta de algunos CD y merchandising de la banda. Reunid a la banda y dibujadles un esquema rpido de lo que puede querer el visitante cuando visite la web. Se trata slo de una lluvia de ideas; de momento hay muy poca estructura.
Hay dos grupos generales de personas que visitarn la web: gente que ya conocen a TDB y les gustan (fans), y gente que no lo tiene claro. Debis atender a estos dos grupos de manera diferente; a los fans potenciales se les ha de vender el grupo, mientras que los fans actuales quieren alimentar su adiccin (por as decirlo). Qu tipo de informacin buscar cada uno de estos grupos? La figura 1 nos lo indica: se trata de un borrador tpico de lo que haris en este punto en futuros proyectos de web. A partir de aqu, decidiris qu pginas necesita la web y cmo deben ir enlazadas entre ellas.
Figura 1
Lo que quieren los visitantes de la web.
Estableced un presupuesto y acordad publicar la web en un mes. Prometed volver a reuniros con la banda en un par de das con algunos planes que describan la direccin hacia la que va.
1.1.2. Y ahora qu? Trazado del mapa de la web
Mucha gente improvisar un mapa de la web en esta fase: parece un cuadro organizativo. Generalmente, es un grfico bastante sencillo que muestra simplemente los nombres de cada una de las pginas de la web y cmo se enlazan en la estructura global de la web. Personalmente, nos gusta poner un poco ms de informacin y comentar la finalidad y el contenido de cada pgina. Por ejemplo, una pgina puede tener el ttulo Home (inicio), pero qu es la pgina de inicio? Se trata del tpico mensaje bienvenido a nuestra web (eecs!), o se trata de una pgina ms dinmica que contiene elementos de noticias e imgenes atractivas? Dedicad unos minutos a pensar en las pginas en las que se podra convertir el borrador anterior y qu podra haber en cada una de ellas. Intentad dibujar vuestro propio mapa de la web antes de pasar al subapartado siguiente.
10
Ahora empecemos con los conceptos bsicos: uno de estos cuadros organizativos que hemos mencionado antes. La figura 2 muestra nuestro intento de convertir la lluvia de ideas en un cuadro organizativo de la web:
Figura 2
Primera versin de la estructura de la web.
Esto incluye definitivamente todas las pginas que necesitamos, pero no hay ninguna agrupacin real todava. Por ahora slo se trata de un batiburrillo de pginas y en esta fase todava no hemos meditado mucho cmo se llama cada cosa. Dimos un paso ms e intentamos fragmentar la informacin en agrupaciones ligeramente mayores; la figura 3 muestra lo que hicimos:
Hemos hecho un par de cosas con la estructura revisada de la web. La pgina Noticias de la banda ofrece a TDB un lugar para publicar cualquier cosa que quieran compartir con sus fans. Aunque su gira de verano haya acabado y la pgina Fechas y lugares de la gira ya no sea relevante, servir para publicar cosas. La adopcin de un formato de blog en este caso permitir a los fans comentar en contexto las diferentes historias, y ayudar a construir una comunidad en lnea en torno a TDB. Las noticias y los acontecimientos de la gira generarn la mayor parte de la discusin, de manera que es mejor agruparlas. Adems, la palabra Noticias es una palabra ms simple y genrica que la gente podr reconocer ms rpidamente si est echando un vistazo a la pgina buscando la informacin que desea.
11
Figura 3
Estructura de la web, revisada.
La nueva pgina Acerca de The Dung Beatles agrupa las biografas y fotografas de los miembros de la banda. Yendo por esta va, tenemos un punto de partida para las biografas individuales de los miembros de la banda. Siguiendo un argumento parecido al de antes, Acerca de es un trmino comn utilizado en muchas webs. Siempre que un visitante quiere saber ms sobre una empresa, un producto, un servicio o una persona, busca un enlace del tipo Acerca de....
Por ltimo, el trmino Discografa es un trmino un poco tcnico. Es posible que pocas personas entiendan que este trmino no quiere decir otra cosa que La msica. Adems, abre esta pgina a contenido adicional: fuentes de inspiracin, historia de una cancin en concreto, etc. Ya captis la idea, no? Creemos que ya estamos a punto para el despliegue. Despus de haber
12
hablado un poco sobre cmo llamar las pginas de manera razonable, continuaremos aadiendo un poco ms de informacin sobre cada pgina.
1.1.3. Nombres para las pginas
Los nombres de las pginas puede ser una de las decisiones ms cruciales que se tomarn durante el diseo de la web. No slo es importante para que los visitantes puedan encontrar el camino en la web, sino que tambin es una de las otras cosas que indican cmo es de fcil encontrar la web con un motor de bsqueda (a lo largo de la asignatura encontraris distintas noticias en cuanto a la optimizacin de motores de bsqueda).
En general, los motores de bsqueda miran todo el texto incluido en una web, el URL de la pgina y el texto de cualquier enlace en esta pgina a la hora de decidir cmo de importante es. Asignar nombres y URL sensatos a las pginas animar a cualquiera que enlace con vuestras pginas a utilizar descripciones juiciosas.
El nombre de la pgina Pongamos por caso que sois una empresa de automviles y tenis un modelo denominado The Speedster. Tenis una web para promocionar este automvil y una de las pginas enumera las prestaciones disponibles. Cmo llamarais a esta pgina: Prestaciones, Prestaciones disponibles, Prestaciones del Speedster o Elementos accesorios? Nosotros diramos que Prestaciones del Speedster es la mejor opcin de esta lista. Es especfico sobre qu contiene la pgina, probablemente el ttulo aparecer arriba del todo de la pgina y estar destacado (cosa que va muy bien para la indexacin de los motores de bsqueda), y quiz puede encajar incluso en el URL (algo parecido a www.autocompany.com/speedster/prestacionesspeedster/).
1.1.4. Adicin de algunos detalles
De momento no es necesario que lo planifiquis todo, pero como mnimo debis proporcionar una breve descripcin de qu tenis pensado para cada pgina. Una vez hayis decidido la estructura de la web, numerad cada una de las pginas y proporcionad una breve descripcin de cada una como hemos hecho en la figura 4 para la pgina de inicio. Esto es todo lo que debis hacer por ahora. No es necesario que describis la funcionalidad de la pgina, la tecnologa que utilizaris para construirla ni el diseo-formato con mucho detalle. Slo debis escribir lo que tengis en mente en trminos generales. El objetivo, en este caso, es comunicar al cliente lo que pensis y obligaros a pensar ms cosas. En esta fase puede suceder que os deis cuenta de que la web tiene demasiadas pginas y de que nunca podris encontrar contenidos para llenarlas. Podis volveros locos a la hora de crear una jerarqua de pginas. Por ejemplo, si los miembros de la banda slo queran publicar un prrafo sobre ellos mismos, no
Tendris la ocasin de crear una planificacin para el resto de las pginas en una de las preguntas de repaso al final del apartado.
13
habra que crear pginas biogrficas independientes para cada miembro. Se podran combinar todas en una nica pgina.
Figura 4
Informacin de la pgina de inicio.
Resumen Este apartado ha considerado la web como un todo y ha descrito cmo se debera plantear la estructura. En el siguiente apartado, pasaremos a la pgina en s y veremos qu supone crear una gran web: qu funciones incluir y dnde incluirlas. Seguiremos con los apartados 3, 4 y 5 y despus miraremos el diseo visual de una pgina. De manera que esto se realizar en tres pasos lgicos (verificadlo con el cliente en cada fase para aseguraros de que est de acuerdo): 1) En primer lugar, decidid el contenido de una web y decidid cmo estructurar este contenido en pginas. 2) A continuacin, decidid las funciones que se utilizarn realmente en la web. 3) La ltima cosa que haris antes de empezar realmente a sacar adelante y codificar la web es idear el diseo visual: los formatos de pgina, los colores, etc.
Preguntas de repaso 1. Mirad de nuevo la figura 1 e intentad desarrollar una lluvia de ideas similar para una web sobre un automvil (elegid cualquier automvil real o imaginario). a) Qu quieren saber los visitantes de la web sobre l? b) Hay algo en las webs de automviles existentes que consideris esencial o innecesario? 2. Con las notas extradas de la lluvia de ideas intentad organizar la informacin. Qu agrupaciones de pginas seran lgicas?
14
3. Otra actividad que a veces resulta til cuando se planifica una web es ver qu hace la competencia. Haced una busca de las webs de bandas (puntos adicionales si se trata de bandas de homenaje) y fijaos en qu ofrecen. Nos hemos dejado algo? 4. Echad un vistazo a la figura 4 e intentad desarrollar figuras parecidas para el resto de las pginas que habis identificado en la web.
15
2. Qu necesita una buena pgina web?

Mark Norman Francis
Continuando con el apartado anterior, en ste veremos el contenido de la web de The Dung Beatles para que veis lo que deben tener las buenas webs y pginas. Todava no veremos el cdigo real subyacente; en vez de ello, empezaris a examinar las diferentes pginas, pensando qu elementos habran de aparecer y teniendo en cuenta temas como la consistencia, la usabilidad y la accesibilidad.
2.1. La pgina de inicio En este punto, mucha gente tiende a pensar: comencemos por la primera pgina que vern los usuarios: la pgina de inicio. Parece lgico, no? Puede sonar lgico pero, una vez ms, realmente no es el mejor sitio para empezar. Un error comn es centrarse en la pgina de inicio. Las pginas de inicio de las webs pueden convertirse en una propiedad delicada que trate de resumir toda la web y todo para todo el mundo. Esto puede conducir a que se conviertan en un enorme desorden.
Pgina de inicio de MSN
Como ejemplo de lo que queremos decir, visitad unos instantes la pgina de inicio de MSN* (podis consultar tambin la figura 1). Maravillaos de la gran sobreabundancia de enlaces y contenidos. La red de webs MSN es muy extensa: desde viajes a televisin, citas, direcciones, aparatos, informacin ecolgica, etc. Y todos ellos disputndose vuestra atencin. Figura 1
* http://www.msn.com/
La pgina de inicio de MSN: hay un montn de cosas!.
16
Este tipo de pgina de inicio abrumador del tipo lanza todos los elementos excepto el ms retorcido... y despus aade el ms retorcido probablemente est bien para este tipo de gran recopilacin de webs, pero para la pgina de inicio de nuestra banda es definitivamente excesiva y asustara a ms usuarios de a los que atraera. Adems, es una idea errnea habitual pensar que la pgina de inicio es la primera pgina que vern los visitantes. Quiz si oyen hablar de la banda o consiguen una hoja de propaganda o una etiqueta o un distintivo/botn de la banda, introducirn la direccin de la web en el navegador de manera que acabarn en la pgina de inicio. Sin embargo, lo ms probable es que los visitantes acaben en vuestra web como resultado de una bsqueda. Si buscan por el nombre de la banda, es probable (aunque no del todo seguro) que el primer resultado sea la pgina de inicio de la web. Pongamos por caso que alguien busca Actuacin homenaje Beatles: es posible que aparezca la pgina Fechas de la gira como primer resultado. O, si la busca era banda Moose Jaw, el primer resultado puede ser la pgina Acerca de TDB porque menciona que la banda es de la poblacin de Moose Jaw, mientras que la pgina de inicio no lo menciona. En un artculo* sobre su decisin de dejar de cobrar por el acceso a contenido antiguo, el New York Times observaba que el comportamiento de sus visitantes haba cambiado. Lo que haba cambiado, deca el Times, era que
[...] muchos ms lectores empezaban a llegar a la web desde motores de bsqueda y enlaces de otras webs en vez de venir directamente a NYTimes.com. Estos lectores indirectos, que no pueden acceder a los artculos tras la pared de pago y es menos probable que paguen una cuota de suscripcin que los usuarios directos ms fieles, se consideraron como oportunidades de ms visionados de pginas y ms ingresos por publicidad.
* http://www.nytimes.com/2007/ 09/18/business/media/ 18times.html
2.1.1. Qu significa para nuestra web? Todo esto significa que aunque hay que subdividir el contenido en pginas individuales, deberais pensar cmo encontrarn los visitantes lo que realmente deben estar buscando, o dnde podran ir una vez empiecen a explorar ms. Aunque puede resultar tentador llenar la pgina de inicio con un poco de todo, realmente es mejor utilizarla para destacar otras reas de contenidos de la web y dirigir el trfico hacia stas. Tratad la pgina de inicio como cualquier otra pgina de la web y asignadle una finalidad definida (mostrar las novedades, ofrecer una visin global o simplemente presentar a la banda y dirigir a las personas a otros sitios de la web, etc.). La pgina tambin necesitar alguna manera de navegar a otras reas de la web y de crear su marca.
Ahora profundizaremos un poco ms y aprenderemos ms sobre estos aspectos...
17
2.2. Navegacin
Como navegar por una web es uno de los aspectos ms cruciales de la implementacin correcta, si no el ms crucial de todos, deberis investigar los destinos comunes de vuestra web y colocarlos en vuestra navegacin principal.
Existe otra idea errnea que podis haber odo sobre la navegacin por las pginas web: que cualquier pgina debera estar como mximo a tres clics de distancia. La proliferacin de esta idea ha supuesto algunos de los peores y ms complejos problemas de navegacin por Internet. Un ejemplo de la vida real: fijaos cmo la mayora de los lugares de comparacin de precios en Internet intentan meter el mximo de enlaces posible a causa del mantra de reducir los clics de sus clientes al mnimo antes de comprar algo, y todava menos que abandonen y utilicen la competencia. Al final, esto supondr demasiada informacin para que el usuario la pueda asimilar y utilizar de manera eficaz. Tener demasiadas opciones es tan paralizante como tener muy pocas.
Mientras haya un avance aparente de un enlace al siguiente y todo les indique que van por buen camino para llegar al objetivo final, los usuarios tendern a continuar en un sitio.
Si tenemos en cuenta lo que se ha mencionado anteriormente sobre la estructura de AI, la navegacin principal de la web de TDB debera contener enlaces a las pginas o secciones Tienda, Acerca de..., Contacto, La Msica y Noticias de la banda, y tambin un enlace de vuelta a la pgina de inicio. No es realmente necesario enlazar a las pginas situadas por debajo de stas, como las pginas Fechas de la gira y Letras. Los enlaces a estas pginas se habran de encontrar slo en esta rea; cualquiera que necesite saltar de la pgina de la letra de una cancin determinada a Fechas de la gira podr navegar a Noticias de la banda y desde all a Fechas de la gira.
Uno de los aspectos ms cruciales para conseguir una navegacin satisfactoria por una web es la consistencia.
Un ejemplo de web consistente Echad un vistazo a las pestaas de la parte superior de la pgina de dev opera* (podis ver la figura 2): enlaces como Home (Inicio), Articles (Artculos), Forums (Foros), etc. A medida que os movis por la web de dev.opera, esta barra de navegacin se mantendr. La navegacin cambiar para indicar dnde os encontris actualmente en la web y proporcionar ms enlaces para ampliar en esta rea. Por ejemplo, pinchando en la pestaa Artculos accederis al rea principal de artculos, que al mismo tiempo contiene enlaces a algunos de los artculos ms recientes y una coleccin de enlaces a reas secundarias sobre temas como Accessibility (Accesibilidad), CSS y Mobile (Mvil) (podis consultar tambin la figura 2).
* http://dev.opera.com/
18
Figura 2
* http://dev.opera.com/
La navegacin de dev.opera* es constante estis donde estis en la web.
2.3. Otros elementos comunes de una web Aparte de la navegacin, normalmente hay otras partes de una web que aparecen repetidamente en las pginas. La mayora de las webs tienen alguna forma de construccin de marca, logotipo o ensea para indicar la propiedad. El color, el formato, el uso de formas e iconos, la tipografa y las imgenes se combinan para crear una impresin global de una pgina como perteneciente a la web donde se encuentra: la consistencia es la clave. El uso de aspectos y disposiciones consistentes ayuda a mantenerse orientado sobre dnde hemos ido a parar en la web y crea una sensacin de familiaridad. Sabis que la pgina donde os encontris est relacionada y forma parte de la misma experiencia que las pginas anteriores porque estn visualmente conectadas y relacionadas. Cuando diseis la web, debis tener esto en cuenta y no crear una imagen general diferente para todas las pginas de la web. En nuestra web de TDB, el encabezamiento de la pgina contendra el logotipo y el nombre de la banda para reforzar esta imagen a los visitantes a medida que se mueven por el sitio y que as les d un sentido de familiaridad de estar to-
Logotipo Casi cada pgina de la web de Yahoo tiene el logotipo en la parte superior izquierda y este logotipo contiene la parte de la red de Yahoo donde os encontris (como Viajes, Pelculas, Autos, etc.).
19
dava viendo informacin sobre la banda. El pie contendra informacin de copyright sobre el sitio y sobre las letras, imgenes y muestras de sonido de la web; tambin habra de contener enlaces a pginas sobre cmo ponerse en contacto con la banda o cmo contratarla.
2.4. El contexto lo es todo Cada pgina, a pesar de todos los elementos comunes, debera ser nica. Una buena pgina web har una cosa, o una pequea cantidad de cosas, y las har bien.
2.4.1. Contenido relevante
Hacer que el contenido sea relevante e independiente es un factor clave para conseguir que las buenas pginas web sean muy buenas. El contenido debera tener una direccin nica (tener un lugar donde reside de manera definitiva, un URL nico) y ordenado de manera lgica (tanto en la web como en la misma pgina) para que se pueda encontrar fcilmente.
Pongamos por caso las prximas actuaciones que tendr la banda: aunque resultara tentador situar un mdulo de prximas actuaciones en cada pgina, esta informacin ha de tener su propio lugar donde residir. Un sencillo mdulo prxima actuacin que tambin enlace con la pgina de Fechas de la gira puede servir de promocin con la misma efectividad sin duplicar el contenido ni confundir potencialmente tanto a los usuarios como a los motores de bsqueda.
2.4.2. Encabezamientos La prxima vez que tengis en las manos un diario, miradlo atentamente. Observad cmo algunas historias tienen un tipo de letra mayor y ms oscuro, imgenes y titulares ms destacados. El diario os est diciendo de manera efectiva cules son las noticias ms importantes para leer si tenis prisa y slo queris leer las grandes noticias. Lo mismo se aplica a las pginas web. Cada seccin de contenido de una pgina debe ir presentada por un encabezamiento que indique su importancia relativa (esta seccin est subordinada a la anterior o se encuentran al mismo nivel) en la pgina.
Como ejemplo, en la parte actual de este mismo apartado estn las dos lneas Contenido relevante y Encabezamientos. Se trata de encabezamientos que se encuentran en un nivel inferior que El contexto lo es todo para indicar que se trata de secciones secundarias de la seccin Contexto de la pgina.
20
2.5. Usabilidad
Usabilidad es un trmino genrico para referirse a que una web se comporta de una manera racional y esperada.
Habis intentado alguna vez leer un artculo en un portal de noticias y entonces habis descubierto que os debais registrar antes de poder leerlo? Habis intentado alguna vez reservar un vuelo o un viaje en tren en lnea en menos de dos minutos (que sera el tiempo que se podra tardar normalmente en explicar el viaje para el que queris los billetes a alguien por telfono o en un mostrador)? Habis introducido una direccin o un nmero de tarjeta de crdito y os han dicho que lo habis introducido incorrectamente? Habis realizado una bsqueda que no ha dado resultados tiles aunque sabais que s que estaban o que una web no tenga una funcin de bsqueda? Todo esto son ejemplos de mala usabilidad, el resultado de no tener en cuenta las necesidades de los usuarios de la web. Dando prioridad a estas necesidades en la web que diseis y creis es muy posible que creis una web satisfactoria. Crear webs usables no es fcil, pero gran parte de los conocimientos se adquieren sencillamente por experiencia. Mantened un diario de las cosas que os molestan de otras webs y aprended a no hacerlas en la vuestra. Por otra parte, no hay nada mejor que probar la web con personas reales. Una vez la hayis creado, mirad a la gente mientras la utilizan: pueden encontrar las pginas que buscan? les da la bsqueda los resultados adecuados a partir de los trminos de bsqueda utilizados? funcionan las imgenes/sonido/vdeo en su navegador? les molesta algo? les satisface algo? Unas pruebas de usabilidad especficas son algo por lo que las empresas profesionales cobran mucho, pero incluso unas pruebas rpidas informales con amigos y familiares pueden daros pistas valiosas sobre problemas que no hayis detectado. Eso es porque sois vosotros quienes habis creado la web y ms o menos podis intuir las cosas, mientras que los otros no.
2.6. Accesibilidad Lamentablemente, la accesibilidad se suele entender como hacer que una web funcione para personas con ceguera. En realidad, sin embargo, los problemas de accesibilidad afectan a muchas personas ms.
21
Se utiliza el trmino tecnologa de asistencia o asistente para describir cualquier parte adicional de equipo informtico o de hardware que ayuda a una persona a interactuar con su ordenador ms correctamente. Esto normalmente hace pensar en los lectores de pantalla para personas que no pueden ver o en las instrucciones sonoras para aquellas personas que no pueden utilizar un ratn o un teclado. Pero y las gafas? La gente que necesita corregir su visin tambin utiliza una tecnologa asistente. Pero la mayora no se consideraran discapacitados.
A la hora de desarrollar buenas pginas web, es importante ser consciente de los problemas con los que se puede encontrar la gente cuando intenta utilizar Internet. No deis por supuesto que vuestros usuarios tendrn un ratn; no presupongis que las personas podrn ver las imgenes que habis utilizado; no asumis que todo el mundo tiene Flash instalado y ofreced un contenido alternativo para los que no lo tienen.
Adems de las personas que necesitan tecnologa asistente, hay otras personas a las que les sucede lo mismo con los telfonos mviles. La tecnologa Flash todava no es lo bastante madura incluso para los telfonos mviles que la tienen: el Apple iPhone no la tiene y probablemente no la tendr nunca, pero aun as puede navegar por la web casi como la versin de sobremesa del navegador Safari en un Mac (Opera Mobile s admite Flash). Las tecnologas como Opera Mini, que permiten que telfonos mviles de pocas prestaciones puedan acceder a la web, harn que se hayan de reescribir las pginas web para que sean ms ligeras y ms eficientes y que las imgenes de las pginas se puedan representar ms pequeas para la mayora de los usuarios, lo cual quiere decir que cualquier contenido que dependa de la sutileza del detalle se puede perder. En el caso de nuestra banda, deberais ser conscientes de que si utilizis muchas imgenes (fotos de la banda), habrais de describir el contenido de la imagen. Si utilizis un reproductor de msica Flash en la pgina para que la gente pueda escuchar la msica de la banda, tambin deberais enlazar directamente con la msica, de manera que quien no tenga Flash instalado pueda acceder igualmente a la msica de la manera que ms le guste.
Resumen En este apartado hemos tratado, en trminos generales, lo que se deber tener en cuenta cuando se empiecen a crear las pginas reales de la web, hacerlas ms usables, ms accesibles y que se ejecuten mejor. Todos los conceptos se explicarn con ms detalle a medida que avance esta asignatura.
22
Preguntas de repaso Para las preguntas de repaso de este apartado slo debis visitar muchas webs: visitad algunos de vuestros sitios preferidos y miradlos desde un punto de vista nuevo. Anotad algunas respuestas a las siguientes preguntas: 1. Tienen encabezamientos, pies y reas de navegacin consistentes? 2. Fijaos cmo cambia la navegacin a medida que os movis por la web. 3. Prestad atencin por si alguna cosa de la web os molesta o confunde y, si es as, pensad qu cosa habra de hacer la web en este punto. 4. Si podis, desactivad la compatibilidad con imgenes o el JavaScript de vuestro navegador, o bien utilizad el telfono mvil y comparad la experiencia cuando se utiliza la misma pgina en vuestro ordenador.
23
3. Teora del color

Linda Goin
Sin mucho color ni grficos, cualquier web se convertira en el sueo de Jakob Nielsen*. Aunque la filosofa de Nielsen de arquitectura web esencial tiene las ventajas de la accesibilidad y usabilidad, la mayora de los diseadores web quieren aadir un toque personal a sus webs con muchos elementos de diseo. Afortunadamente, un diseador puede aadir color a una web sin perder accesibilidad y usabilidad si la web est diseada teniendo en cuenta estas capacidades. Aunque muchos diseadores se sienten cmodos diseando una web para muchos usuarios, estos mismos diseadores se pueden sentir incompetentes cuando se trata de elegir colores y grficos. En este apartado, trataremos los conceptos bsicos del color y tres combinaciones cromticas sencillas para que os podis sentir seguros a la hora de elegir los colores para vuestra web. Continuaremos este apartado con otra parte sobre cmo simplificar estas selecciones de colores. Al fin y al cabo, es ms divertido disfrutar de los cumplidos sobre el diseo de la web que sudar a la hora de elegir las opciones de colores.
* http://www.useit.com/
3.1. Colores, tonos y matices Los colores, o tonos, se han dividido tradicionalmente en colores primarios, secundarios y terciarios. Los colores primarios son el rojo, el amarillo y el azul, y se denominan primarios porque no hay que mezclar colores para conseguirlos. Si queris traducir estos colores en colores web, podis reproducirlos utilizando sus equivalentes hex (hexadecimales) #ff0000, #ffff00 y #0033cc como se muestra en la figura 1:
Figura 1
Los colores primarios y secundarios, y sus equivalentes hexadecimales.
24
Los colores secundarios se mezclan a partir de los colores primarios, y son los siguientes: Rojo + amarillo = naranja (#ff9900) Amarillo + azul = verde (#00cc00) Azul + rojo = violeta (#660099) Los colores terciarios se mezclan a partir de los colores secundarios y se encuentran entre los colores primarios y secundarios mostrados en la rueda anterior. Aunque los colores web son diferentes de los colores normales de los pintores, puede ser til tener una rueda de colores (como la que se ve en la figura 2) y tenerla a mano mientras aprendis las diferentes combinaciones de colores. Adems, una rueda de colores os mostrar todos los colores, tonos y matices para empezar a ver las posibilidades de colores de las que disponis. A continuacin, se enumeran algunos trminos importantes que hay que aprender: Tono (tint): el color resultante cuando se aade blanco. Tonalidad (tone): el color resultante cuando se aade gris. Matiz (shade): el color resultante cuando se aade negro.
Figura 2
Una rueda de colores real.
Las flechas de la figura 2 indican cosas diferentes, a saber: Lado ms exterior: color terciario de amarillo naranja (amarillo + naranja). Segundo lado: tono de este color terciario (blanco aadido). Tercer lado: tonalidad del color (gris aadido). Lado ms interior: matiz sobre la rueda imprimida (negro aadido). Como se puede ver en la rueda de colores anterior, la cantidad de blanco, gris y negro aadido a un color es mnima, pero suficiente para alterar el color original y crear lo que se conoce como combinacin de colores monocromtica.
25
3.1.1. Combinaciones de colores monocromticas Las combinaciones de colores existen desde hace siglos, de manera que no hay que reinventar la rueda de colores. Aunque el color de la web sea diferente del color imprimido, los conceptos son los mismos. Slo es necesario cambiar los nmeros hexadecimales por nombres de colores y hacer que coincidan lo mximo posible. Una herramienta de la Red que recomendamos para esta tarea es Color Scheme Generator II*, como se observa en la figura 3, que permite determinar las combinaciones de colores de manera rpida y sencilla, e incluso determinar si los colores que habis elegido ofrecen suficiente contraste para los usuarios con poca visin o daltnicos.
Figura 3
* http://www.wellstyled.com/ tools/colorscheme2/index-en.html
Color Scheme Generator II.
Si queris ms ayuda para decidir si los colores que habis elegido ofrecen un buen contraste, probad el Contrast Analyser* de Paciello Group. Esta herramienta comprueba el contraste entre los colores de primer plano y del fondo.
* http://www.paciellogroup.com/ resources/contrast-analyser.html
Para conseguir el tono, la tonalidad y el matiz para el color amarillo naranja del generador de colores en lnea, seleccionad primero el color que seala la flecha en la imagen mostrada anteriormente. A continuacin, seleccionad Mono en el panel situado bajo la rueda de colores y Default (Predeterminado) en el panel del cuadro de la derecha. Seleccionad tambin Normal Vision (Visin Normal) en la seleccin del men desplegable de la parte inferior derecha. No marquis la casilla reduce to safe colours (reducir a colores seguros) situada sobre el cuadro de colores a no ser que seis unos puristas. Volvamos a la combinacin de colores monocromtica. Los resultados que debis obtener si segus los pasos descritos anteriormente son: amarillo naranja (#FFCC00), tono (#FFF2BF), tonalidad (#FFE680) y matiz (#B38F00). Estos nmeros hexadecimales son mucho ms fiables que cualquier intento de hacer coincidir una rueda de colores tangible con la pantalla retroiluminada de un navegador web. Tal como sugiere la palabra mono, esta combinacin se tradu-
El trmino web-safe colours El trmino web-safe colours (colores seguros para la web) proviene de un tiempo en el que los monitores podan mostrar 256 colores, de los que slo 216 eran los mismos en las diferentes plataformas Windows/Mac/Unix, de aqu la expresin seguro para la web. Mientras que algunos puristas todava se cien a la paleta de colores seguros para la web, los navegadores modernos son capaces de tratar lo que se conoce como color de 24 bits. El color de 24 bits real a entre diez y once bits por canal genera un total de 16.777.216 colores diferentes. En otras palabras, es seguro decir que la paleta de colores seguros para la web ya raramente es necesaria.
26
ce en una combinacin de colores monocromtica, como se puede ver en la figura 4.

Figura 4
Una combinacin de colores monocromtica.
Una combinacin de colores monocromtica equivale a un color y todos sus tonos, tonalidades y matices. Aunque esta combinacin es la ms sencilla de utilizar, para muchos diseadores no aporta mucho inters al diseo de una web. En vez de eso, quiz os atraiga explorar otras combinaciones para aadir variedad a vuestros enlaces, imgenes y banners.
3.1.2. Combinaciones de colores complementarios La siguiente familia de combinaciones de colores que cabe descubrir es la combinacin de complementarios, donde se emparejan los colores que se encuentran directamente opuestos entre ellos en la rueda de colores, como se puede ver en la figura 5.
Figura 5
Ejemplos de combinaciones de colores complementarios.
Cuando se elige un color y su color opuesto, tambin se incluyen todos los tonos, las tonalidades y los matices de ambos colores. Ello da una gama ms amplia de opciones y se traduce bien con la herramienta de colores en lnea; podis consultar la figura 6. En la figura 6, hemos elegido un color naranja con el color complementario opuesto: el azul. La configuracin que hemos elegido para conseguir esta combinacin incluye el ajuste del Contraste en la parte inferior izquierda, el valor predeterminado en el men situado bajo el generador y visin normal. Observad que el color principal seleccionado est marcado con un punto negro en el disco interior de la rueda de colores (tanto por encima como en lnea en la web del generador) y que el color complementario opuesto que se ha elegido automticamente est marcado con un crculo vaco en la anilla interior. Estas marcas facilitan que podis analizar vuestra combinacin de colores.
27
Figura 6
Una combinacin de colores complementarios en la herramienta de colores en lnea.
Este generador de colores facilita la eleccin de los colores de los enlaces, los enlaces visitados e incluso las imgenes, ya que proporciona los colores hexadecimales en la parte superior derecha. Podis mezclar y combinar cualquier color puro (el color de la parte superior) y su tono, tonalidad o matiz y de esta manera encontrar una buena combinacin de colores.
El caso de Greenpeace USA Greenpeace USA* (podis ver la figura 7) es uno de los muchos sitios que utilizan una combinacin de colores con contraste. S, se puede ver amarillo y naranja, pero los colores predominantes son el verde y el rojo, dos colores que estn directamente opuestos entre ellos en la rueda de colores. Con este mtodo de colores complementarios siempre realizaris una buena eleccin. De hecho, el uso de una combinacin de colores clidos y fros provoca que la web luzca con el contraste de colores. Figura 7
* http://www.greenpeace.org/usa/
La web de Greenpeace es un buen ejemplo de combinacin de colores complementarios.
3.1.3. Colores clidos y colores fros Las combinaciones de colores complementarios son geniales para utilizarlas en las webs porque contienen colores clidos y fros al mismo tiempo. El uso
28
de estos colores proporciona contraste y es muy fcil recordar qu colores son clidos y qu colores son fros, como se puede ver en la figura 8 (y en la web del generador de colores):
Figura 8
Colores clidos (warm) y colores fros (cold).
Los colores clidos son los colores que recuerdan el verano, el sol o el fuego. Van desde los violetas hasta los amarillos. Los colores fros pueden recordar la primavera, el hielo o el agua. Estos colores van desde el amarillo verde hasta el violeta. Si observis cmo funcionan los colores en la rueda, no tardaris en descubrir que no podis elegir un color sin elegir su opuesto en temperatura. De manera que si elegs un rojo caliente, el opuesto es un verde fro. O, si elegs un azul verde fro, acabaris con un rojo naranja picante en el otro lado.
Ecolution Un ejemplo de una web que utiliza de manera consistente una combinacin de colores clidos/fros es Ecolution*, como se puede ver en la figura 9. Figura 9
* http://www.ecolution.com/
Ecolution, un buen ejemplo de colores clidos/fros.
29
Ecolution generalmente utiliza el color rojo como acentuacin en su web en contraste con el logotipo verde. Despus, mezcla los dos colores en contraste con distintos tonos, tonalidades y matices de estos dos colores. Incluso los negros de una imagen pueden tender a ser clidos o fros, igual que los blancos. En conjunto, la fotografa es clida, lo que queda muy bien con el verde absolutamente puro. Aunque utiliza los mismos colores que Greenpeace, la web de Ecolution toma menos brillo con los tonos y matices ricos de la fotografa.
Nunca os habrais imaginado que la teora de los colores fuera tan fcil, verdad? Bien, pues... vamos a complicar el tema un poquito.
3.1.4. Combinaciones de colores tridicas Una combinacin de colores tridica (podis ver la figura 10) se crea eligiendo un color y despus eligiendo dos colores ms equidistantes entre ellos en torno al crculo, as:
Figura 10
Una combinacin de colores tridica.
Hemos elegido los colores primarios para esta combinacin porque queramos que se viera cmo las combinaciones de colores parecen dar un orden al caos. No es casualidad que los colores primarios estn donde estn en la rueda de colores, ya que cada color contiene una cantidad igual de colores secundarios y terciarios entre cada primario. Pero una combinacin de colores tridica puede parecer muy vista porque ya se ha utilizado en exceso. En vez de esto, podis elegir algunas otras opciones de colores en el generador de colores en lnea; algo parecido a la figura 11:
Figura 11
Una combinacin de colores tridica alternativa.
30
La combinacin de trada anterior se construye a partir de naranja amarillo, azul verde y rojo violeta. Hemos elegido el naranja amarillo en primer lugar (observad el punto oscuro en la seccin interior de la rueda de colores, a la izquierda) y, a continuacin, elegid la seleccin Triad situada bajo la rueda. El generador ha elegido automticamente las opciones tridicas incluyendo todos los tonos, tonalidades y matices. Los colores de acompaamiento estn marcados en la rueda de colores con los puntos vacos, de la misma manera que se indicaba el color complementario en el ejemplo monocromtico. Aqu es donde una rueda de colores real puede resultar til porque los resultados en lnea no coinciden mucho con los resultados de una rueda de colores manual. Sin embargo, cuando hemos colocado la herramienta Angle/Distance debajo de la rueda de colores hasta max, pareca coincidir con la rueda real que tenamos en la mano. Los resultados mostrados anteriormente son los que ms se acercaban a la rueda de colores. La combinacin de colores tridica tambin contiene colores clidos y fros, aunque predominar una temperatura. Generalmente, la temperatura que eclipsar a la otra es la que hayis elegido para el primer plano. En este caso, inicialmente nosotros preferimos el naranja amarillo, que es un color clido. Por lo tanto, predominarn los colores clidos mostrados anteriormente y uno de los otros dos colores tender al contraste fro. Puzzle Pirates*, que se muestra en la figura 12, utiliza una combinacin tridica en su pgina de inicio. Utilizan la combinacin primaria rojo-azul-amarillo y esta combinacin primaria es perfecta para una web de juegos infantiles. Observad que predomina el azul y que los rojos y amarillos se utilizan para acentuar y conducir la vista por la pgina.
Figura 12
* http://www.puzzlepirates.com/
Puzzle Pirates, una buena combinacin de colores tridica.
31
3.1.5. Combinaciones de colores tetrdicas Cuantos ms colores elijis, ms complicada ser la combinacin de colores. No obstante, un truco es encontrar un tono, tonalidad o matiz y limitarse a estas zonas del tablero en vez de mezclar colores puros y sus tonos, tonalidades y matices. Este mtodo funciona bien con una combinacin de colores como la combinacin tetrdica de cuatro colores. Esta combinacin (podis ver la figura 13) es casi igual que la combinacin complementaria, con la diferencia de que se utilizan dos complementarios equidistantes.
Figura 13
Combinaciones de colores tetrdicas.
En la figura 14 se muestra cmo funciona una combinacin tetrdica en lnea:

Figura 14
Una combinacin de colores tetrdica en el generador en lnea.
Fijaos en el punto negro bajo el rojo en la rueda de colores, a la izquierda. ste es el primer color que hemos seleccionado; despus, hemos pinchado en el botn Tetrad debajo de la rueda. Los cuatro colores que han aparecido esta vez tambin eran un poco diferentes de la rueda de colores que tenamos en la mano, pero cuando hemos colocado la herramienta Angle/Distance debajo de la rueda de colores hasta max, ha coincidido mucho con la rueda de colores que tenamos en la mano. Los resultados mostrados anteriormente son los que ms se acercaban a la rueda de colores. Esta combinacin de colores puede complicarse bastante, de manera que lo que podrais hacer, llegados a este punto, es elegir los cuatro tonos, tonalidades o matices de los colores de la columna de la derecha. Podis elegir vuestras opciones pinchando en las flechas del extremo derecho. Por ejemplo, la figura 15
32
muestra un ejemplo de bloque rellenado con los tonos de esta combinacin de colores:
Figura 15
Tonos tetrdicos.
Y en la figura 16 se muestra un ejemplo de las tonalidades de la gama de medios:

Figura 16
Tonalidades de la gama de medios tetrdica.
Si observis atentamente los cuadros anteriores, veris que el generador tambin facilita cuatro combinaciones de colores monocromticas. Estas combinaciones aparecen tanto en la columna de la derecha como en cada cuadrado del cuadrado mayor.
Jane Goodall Institute La web del Jane Goodall Institute (figura 17) es uno de los pocos sitios que realmente resuelve bien la combinacin de colores tetrdica. Observad el prpura, el tono amarillo, los reflejos rojos de la fotografa (la web contiene ms rojo ms adelante en la pgina) y los verdes. El prpura no coincide exactamente con la combinacin de colores generada por la herramienta de colores en lnea tiende a un rojo violeta, pero se acerca lo sufi-
33
ciente a l como para utilizarlo como ejemplo de cmo se puede utilizar tanto una rueda de colores como el generador de colores en lnea para crear ideas para vuestra web. Figura 17
La web del Jane Goodall Institute: un buen ejemplo de combinacin de colores tetrdica.
Ahora, cuando naveguis por la web buscando ideas de colores y diseos, tened a mano la rueda de colores para aprender ms cosas sobre cmo los diseadores utilizan las combinaciones de colores en vuestras webs preferidas.
Resumen Aunque las combinaciones de colores pueden parecer complicadas, todas suponen ciertas reglas. Estas directrices facilitan la comprensin de qu colores funcionan entre ellos para aadir inters y contraste a una web. El motivo por el que existen las ruedas de color es que la gente las utilice. Las ruedas y herramientas de colores como el Color Generator en lnea facilitan la eleccin del color, incluso a diseadores sin experiencia. Las cuatro combinaciones de colores que se tratan en este apartado son monocromticas, complementarias, tridicas y tetrdicas. Aunque existen otras combinaciones de colores, estas cuatro combinaciones son las ms fciles de entender e implementar.
Preguntas de repaso 1. Mencionad los tres colores primarios y explicad por qu se denominan colores primarios. 2. Mencionad los tres colores secundarios y los colores primarios que se utilizan para conseguir estas tonalidades secundarias. 3. Describid cmo se crea un tono, una tonalidad y un matiz.
34
4. Qu es una combinacin de colores monocromtica? 5. Qu es una combinacin de colores complementarios? 6. Describid los colores clidos y fros. 7. Qu es una combinacin de colores tridica? Podis seleccionar tres colores que encajaran en esta combinacin? 8. Qu es una combinacin de colores tetrdica? Podis seleccionar cuatro colores que encajaran en esta combinacin? 9. Qu combinacin de colores parece ms fcil de utilizar? 10. Qu combinacin de colores parece la ms complicada? Las ltimas dos preguntas no tienen respuestas del tipo correcta o incorrecta.
35
4. Construccin del esqueleto de una pgina web

Linda Goin
Todo diseador debera conocer y entender los parmetros de una web antes de empezar a disearla. En este apartado aprenderis los fundamentos necesarios para empezar a disear webs comerciales. Aunque esta informacin es til si deseis construir webs para otras personas, tambin puede servir como lista de comprobacin para las webs que queris crear para vosotros. sta es generalmente la fase que viene despus de la arquitectura de la informacin; debis recoger informacin sobre qu quiere al cliente en su web y cmo habra de estar estructurada, qu tipo de construccin de marca utiliza esta empresa y, entonces, utilizar esta informacin para crear un borrador de diseo visual que podis acordar con el cliente antes de aadirle grficos y combinaciones de colores. Concretamente, hablaremos de lo siguiente: Aunque el color y el diseo son importantes, debis entender lo que el cliente quiere conseguir con su web. Esta informacin afectar de manera importante al aspecto y al tono de la web. Por lo tanto, habris de gestionar una lista de comprobacin de elementos para aprender cosas sobre la web del cliente antes de intentar empezar a disear. Tambin necesitis saber ms sobre las acciones de marketing anteriores de la empresa, incluyendo la creacin de marca. Esta informacin influir en el diseo de la web. En funcin de toda la informacin recogida del cliente, crearis el diseo visual de la web de manera que el cliente pueda visualizar los fundamentos de los grficos y contenidos adicionales.
4.1. Lo que necesitis saber Generalmente, antes de que se decida el diseo de una web, la persona o la empresa deberan tener ideado un plan sobre la finalidad de la web. Aunque el color y los grficos son importantes, debera haber un plan que prevea un presupuesto, el mercado destinatario y los objetivos proyectados, y tambin los recursos para llevar a cabo estas tareas. La web slo dar informacin al usuario o tambin est pensada para vender productos o servicios? La web se ampliar en el futuro o est pensada para ser una accin a corto plazo para conseguir una posicin en el mercado (como la web de una campaa poltica o una web que intente aprovechar una tendencia actual)? Incluir la web un blog, pginas de aspectos legales y de informacin, galera de fotos, formulario
36
de contacto por correo electrnico? Qu ms necesita? Cmo se puede comparar esta web con la competencia? Por ltimo, pero no menos importante, queda saber si la compaa tiene una marca prevista, junto con directrices de marketing. Si no es as, entonces se debe atender a esta cuestin antes de iniciar el diseo de la web. El logotipo, la creacin de marca del merchandising o servicios dirigidos a un mercado especfico y un medio para llegar a este mercado pueden ser cuestiones que vayan ms all de vuestras capacidades. Si no habis intentado antes esta tarea, podrais incorporar un experto en marketing para ayudar a situar esta empresa en la direccin correcta. Por otra parte, si ya hay un plan ideado, entonces es importante seguir las directrices de la empresa para que la web encaje con otros materiales de marketing.
Aunque mucha de esta informacin se puede decidir antes de que la web propuesta llegue al diseador, las respuestas a estas preguntas os pueden ayudar a decidir qu tipo de web disear, los colores que se van utilizar y los tipos de grficos que se deben incluir. Hay algo que s se puede determinar de entrada en la mayora de los casos: la web debe ser accesible y usable. Por lo tanto, la atencin al cdigo y a la navegacin es una prioridad en todos los casos. Ms adelante, en esta asignatura, podris aprender ms sobre accesibilidad y algunos conceptos ms sobre usabilidad gracias a Jakob Nielsen*.
* http://www.useit.com/
La cuestin es mantener la simplicidad de la web utilizando HTML y CSS para el cdigo y el diseo, respectivamente. Evitad Flash a no ser que sea apropiado para algunos elementos del sitio (ltimamente se ha avanzado mucho por hacer Flash ms accesible*, y va muy bien para algunas tareas, como el vdeo) y pensad si son necesarios JavaScript y otros elementos tcnicos. Ello har que el diseo de la web sea ms fcil de crear para el diseador y el programador (especialmente si el diseador tambin es el programador) y ser ms compatible con todos los navegadores.
* http://www.sitepoint.com/ article/accessible-flash-parts-1-2
4.2. Los primeros pasos Para ayudaros con estos temas, crearemos una web comercial muy sencilla utilizando un conjunto de directrices que utilizamos para disear webs para nosotros mismos y para otros. Estas listas de control incluirn aspectos empresariales adems de los conceptos de diseo. Por comodidad, utilizaremos una empresa imaginaria ya desarrollada, de manera que ya ha utilizado materiales de marketing en el pasado. Los materiales impresos, incluyendo el logotipo y la marca, ya estn previstos. Si empezis desde cero, la planificacin del logotipo y la creacin de la marca se debern desarrollar antes de empezar a crear la web. Como diseadores de la web, necesitamos saber la informacin siguiente sobre una empresa antes de empezar su diseo. Necesitamos crear una lista de
37
todo lo que queremos que incluya el diseo de esta web, de modo que no haya que hacer cambios radicales ms adelante. Este hecho no es una situacin imaginaria, porque los temas indicados a continuacin se deben tratar con los propietarios/responsables de las decisiones de la empresa para asegurarse de que nuestra visin del proyecto coincide con la que ellos tienen.
1) Nombre del sitio web: el nombre refleja la empresa y su presencia en Internet? En este caso, el nombre de la web es el nombre de la empresa: Wiki Whatevers. Es posible que la empresa quiera desarrollar tambin un aadido o tag line* si es que todava no utiliza uno. El aadido se colocar entonces junto al nombre de la empresa y al logotipo en la web. 2) Logotipo y marca: necesitamos recopilar cualquier material impreso que se haya desarrollado antes de esta tarea, incluyendo el logotipo, folletos, etc., de modo que podamos crear un archivo que contenga informacin como nmeros de telfono y direcciones. Estos elementos tambin nos ayudarn a entender mejor el tono, la marca y el estilo de esta empresa a partir de las acciones realizadas en el pasado. En caso de que ninguno de estos elementos se haya desarrollado anteriormente, entonces trataremos de contratar un equipo de diseo para crear un logotipo (no soy diseador de logotipos, de manera que encargo este trabajo a otra persona, y vosotros tambin podis hacerlo y sumar este precio a la factura).
* http://www.powerhomebiz.com/ vol112/tagline.htm
3) Nombre de dominio de la web: junto con el nombre de la web, queremos saber si el nombre del dominio est disponible. El nombre del dominio es la direccin que utiliza una web para su identificacin y que el usuario escribir en la barra de direcciones de un navegador para llegar a esta web. El nombre de dominio tambin se utiliza como enlace a la web desde recursos exteriores. El nombre de dominio puede llevar cualquier nmero de registros de dominio de nivel superior*, como .com, .org, etc. Aunque un diseador normalmente no es responsable del registro del nombre de dominio, es conveniente saber si alguien lo ha elegido y registrado. En algunos casos hemos debido cambiar un nombre de dominio y algunos de los contenidos de la web porque ste no estaba disponible. Este problema supuso un gasto ms alto para el cliente, que podra habrselo ahorrado si antes de nada se hubiera elegido el nombre de dominio. 4) Investigacin de la competencia: es bueno saber cmo son las webs de la competencia con respecto a grficos y contenidos, de manera que la web que diseemos entre en el mercado con igual o mejor pie que los principales competidores de la empresa. 5) Arquitectura de informacin: necesita la web un carrito de la compra virtual o un blog? Qu planes de expansin tiene en mente el propietario de la web? Qu estructura sera mejor para enlazar las pginas entre ellas? Estos elementos son importantes porque necesitaris incorporarlos al diseo de la
* http://www.ipowerweb.com/ hostingdictionary/
38
web y su navegacin. Necesitis saber cmo se ampliar la web en el futuro, lo cual determinar tambin cmo se crear la web. 6) Contenido de la web: se ha desarrollado el contenido de la web? En caso afirmativo, necesitaris acceder al contenido inmediatamente para ayudar a determinar la navegacin, el diseo del tipo de letra y la disposicin. La categorizacin del contenido es la mejor manera de desarrollar la navegacin. El contenido puede ayudar a determinar tambin al aspecto y el tono de la web; por lo tanto, si el contenido no se ha desarrollado, puede ser positivo demorar el diseo. Aseguraos de que el contenido es relevante y planificad las actualizaciones porque el contenido de la web es lo que hace que los visitantes vuelvan a un sitio.
7) Buscad varios proveedores de espacio web: aunque el cliente puede tener un proveedor de alojamiento en mente, es posible que necesite alguna otra cosa, ya que no todos los alojamientos proporcionan el mismo soporte tecnolgico. Un alojamiento (hosting) web es la empresa que aloja webs y algunos proveedores de espacio web ofrecen acceso a bases de datos, que es posible que necesitis para un blog o para catalogar informacin o productos para un carro de la compra. Otros proveedores de espacio limitan el nmero de visitantes por web y esto puede crear problemas si la web se hace muy popular. Para obtener una gran lista de proveedores de espacio web y sus capacidades, podis visitar la base de datos de alojamiento web (WHDb)*. Aseguraos de que el cliente ha adquirido espacio en un alojamiento web antes de empezar el diseo de la web, de manera que conozca sus parmetros de diseo. 8) Salida dirigida: planificar la salida dirigida quiere decir que vosotros o vuestro cliente tenis el control sobre cmo los usuarios saldrn de la web. Los visitantes acabarn saliendo de la web, de modo que por qu no planificar su salida mediante la colocacin de un anuncio subvencionado o mediante intercambios de enlaces? Hacer planes en esta direccin puede aadir valor monetario a la web u ofrecer un servicio a sus usuarios. 9) Fechas lmite: en este punto hay que determinar cundo se pondr en marcha la web. Generalmente, un plazo de ocho semanas es suficiente para finalizar cualquier proyecto pequeo como ste, siempre que los clientes tengan preparado el contenido, sean flexibles con respecto a los diseos de colores y formatos que les presentis y no se necesite ninguna programacin difcil.
* http://whdb.com/
Una vez tengis resueltos estos puntos bsicos, podis sentaros, leer el contenido, planificar la navegacin y decidir cmo optimizar mejor la web para los motores de bsqueda. Aunque puede ser que no estis a cargo de la SEO (search engine optimization u optimizacin para motores de bsqueda), podis colaborar con un experto en SEO para determinar cmo aprovechar mejor el contenido de la web y vuestro cdigo* para generar ms trfico mediante palabras clave en el contenido y en los encabezamientos principales y secundarios.
* http://www.sitepoint.com/ article/ultimate-seo-checklist
39
De la misma manera que no elegirais las alfombras o un sof para un nuevo hogar antes de que el arquitecto haya creado el proyecto, tampoco crearais un diseo visual para la web hasta que hayis planificado la arquitectura de la web. La navegacin y los planes para la SEO* en esta fase inicial ahorrarn tiempo y dolores de cabeza en el futuro. Cuando est preparado para crear un plan visual, ya estar familiarizado con la direccin de la web y sus contenidos, y facilitar mucho el trabajo con el color y los grficos.
* http://www.seochat.com/
4.2.1. La web imaginaria de ejemplo
Esta web imaginaria es una empresa que proporciona cdigo abierto para wikis y se inventan como mnimo tres nuevas ideas de cdigo por semana. Dado que el uso y la modificacin del cdigo son gratuitos, los propietarios de la web quieren generar dinero a partir de ella mediante donaciones, colocacin de anuncios y servicios adicionales ofrecidos por sus programadores. El nombre de la web es Wiki Whatevers, y el nombre del dominio ha sido elegido. El contenido se ha desarrollado y contiene fragmentos de cdigo que se deben catalogar, artculos y biografas de los programadores implicados en este proyecto. El alojamiento web ofrece disponibilidad de bases de datos MySQL* y est preparado para aceptar las puntas de trfico ms intensas sin cadas. Ahora es el momento de juntar los elementos que se utilizarn en la web:
* http://www.mysql.com/
1) Utilizando el logotipo previamente existente de la empresa, queremos preparar una copia digital para utilizarla en toda la web del cliente. Necesitamos un escner para escanear la imagen en un programa grfico como Photoshop* o Gimp**. Ms adelante, ya adaptaremos el tamao del logotipo para la web, antes debemos determinar la composicin. Guardaremos la imagen a 72 dpi, que permitir un tiempo de descarga ms rpido. Probablemente tambin utilicemos este logotipo para el punto 4. 2) Pondremos fotos de los programadores en la pgina del personal (o en la pgina Acerca de...), de modo que necesitaremos imgenes digitales para ello. Debern proporcionarnos fotos para escanearlas o enviarnos imgenes digitales. Si envan imgenes digitales, necesitaremos una imagen con ms detalle que la que acabaremos utilizando, de manera que una imagen de 300 dpi est bien, o una imagen de tamao grande que se pueda reducir despus segn nuestras especificaciones. 3) El cliente ha decidido utilizar un blog porque tiene suficiente contenido para mantenerlo activo durante los prximos meses. Afortunadamente, el cliente ha elegido a un proveedor de alojamiento web que est familiarizado con los blogs y que tiene las capacidades necesarias para gestionar bases de datos y trfico intenso, incluyendo puntas de trfico. Este alojamiento tambin ofrece varias soluciones para la expansin, lo cual es un gran ofrecimiento si el cliente quiere crecer. Si el tiempo de actividad del alojamiento
* http://www.adobe.com/ products/photoshop/index.html ** http://www.gimp.org/
40
est garantizado, el cliente estar ms contento si puede mantenerse con el mismo alojamiento durante su fase de crecimiento hasta el final. Esta capacidad de mantenerse con un proveedor de alojamiento durante aos facilita mucho la vida.
4) Mediante FTP (hay varios productos de cdigo abierto para elegir en el mercado como Filezilla*, o fireftp** para Firefox, o un cliente propietario como CuteFTP***), cargaremos una pgina esttica que anuncie la web que existir. En construccin es una frase terrible de utilizar porque los visitantes de la web quiz no vuelvan si no saben cul es la fecha del gran lanzamiento. En vez de esto, utilizad una pgina que indique el nombre de la empresa, qu ofrecer, una fecha a partir de la cual estar activa la web y un contacto (el correo electrnico est bien; si se trata de una empresa que ya tiene una sede fsica, aadid una direccin postal y tambin un nmero de telfono). Todava mejor: utilizad un formulario de correo electrnico que las personas puedan utilizar para ser notificadas cuando la web est en activo. Esta ltima sugerencia proporciona a nuestros clientes consumidores potenciales, incluso antes de que la web empiece su actividad comercial. 5) Utilizando la informacin de contenido/estructura recibida del cliente y sabiendo que quieren un espacio publicitario diseado en todas las pginas, disearemos la arquitectura del sitio y planificaremos la navegacin y los enlaces de texto. Tambin utilizaremos este texto para planificar palabras clave para la SEO de la web. 6) Utilizando los colores del logotipo, elegiremos dos o tres combinaciones de colores para presentarlas al cliente para que las apruebe.
* http://filezilla-project.org/ ** http://fireftp.mozdev.org/ *** http://www.cuteftp.com/
7) Despus, elegiremos otras fotografas o ilustraciones de una web de fotografas de archivo, como iStock o Comstock. Pero aseguraos de buscar mucho, porque algunas empresas de fotografas de archivo ofrecen rebajas y otros tratos que quiz no podis desperdiciar. El uso de fotografas de archivo no es tan caro y ahorra dolores de cabeza con respecto a problemas de copyright. Tambin necesitaremos cualquier imagen que la empresa haya producido, o que vaya a producir, para acompaar cualquier cdigo, artculos de cmo hacer... y entradas de bloques.
Los ltimos dos pasos se tratarn en el prximo apartado. Tened en cuenta que querris obtener la aprobacin del cliente para el esbozo de composicin visual antes de empezar a rellenarlo de colores y grficos.
* http://www.istockphoto.com/ index.php ** http://www.comstock.com/ web/default.asp *** http://www.templetons.com/ brad/copymyths.html
4.2.2. El logotipo El logotipo es una parte esencial de la imagen de marca de cualquier empresa. Aunque muchas empresas no se precipitan, porque esta pieza de arte representar a su empresa durante muchos aos, otros clientes se preocupan menos de la imagen que representa a la empresa. Podemos deciros por experiencia que una empresa que no invierte tiempo y dinero en un logotipo profesional ge-
41
neralmente nunca invertir este dinero, por muy lgicos que puedan ser vuestros argumentos en sentido contrario. Los propietarios de la empresa Wiki Whatevers fueron todos al Instituto Tecnolgico de Georgia (Georgia Tech), de manera que utilizaron los colores de su alma mater: dorado y negro, en el diseo del logotipo. Sin embargo, aunque el logotipo es sencillo, como mnimo puede resultar fcil trabajar con el color y el formato. En la figura 1 se muestra el logotipo:
Figura 1
El logotipo de Wiki Whatevers.
El problema en este caso es que simplemente escaneamos un logotipo impreso y queramos utilizar el mismo logotipo en la red. Los colores impresos, que son CMYK* cyan (cian), magenta, yellow (amarillo) y key (negro), no coincidirn con los colores web, que consisten en RGB (red, green, blue, es decir: rojo, verde y azul). As pues, necesitamos realizar un poco de adaptacin del color para conseguir que los colores web coincidan el mximo posible con los del logotipo. Hay cuatro maneras de conseguir este objetivo:
* http://desktoppub.about.com/ cs/basic/g/cmyk.htm
1) Poneros en contacto con la imprenta para preguntar qu colores se utilizaron para imprimir el logotipo de Wiki de cualquier cosa en el material imprimido anteriormente. Generalmente, la imprenta utilizar los colores Pantone*, y Pantone ofrece herramientas que ayudan a los diseadores a adaptar los colores de impresin a los colores web. Este sistema de adaptacin de colores de Pantone es algo que la imprenta puede tener a mano, de manera que puede ser muy til para hacer coincidir los colores de impresin con los colores web correspondientes sin gastar dinero en herramientas Pantone.
* http://www.pantone.com/pages/ pantone/index.aspx
2) Como los propietarios de Wiki Whatevers utilizaron los colores de Georgia Tech, podemos ir a la web de Georgia Tech para ver si podemos adaptar los colores de la web. Podis utilizar un programa grfico* para extraer un color a una web haciendo una copia de pantalla y llevando esta imagen a un programa grfico para utilizar el cuentagotas u otra herramienta para hacer coincidir los colores. 3) Comparad mirando el material impreso y los colores web para intentar que coincidan lo mximo posible. En algunos casos, los colores pueden ser muy diferentes. En otros casos, los colores pueden ser demasiado parecidos para apreciar la diferencia.
* http://www.iopus.com/guides/ screenshot.htm
42
4) Escanead la imagen imprimida en un programa de escaneo que acepte CMYK y utilizad las cartas de colores Pantone de Photoshop para hacer que coincidan lo mximo posible. Esta ltima solucin slo funciona si nuestro escner acepta CMYK y disponis del programa Photoshop. En nuestro caso, pudimos hacer que este dorado coincidiese perfectamente a partir de la imagen de la mascota de la web Georgia Tech Athletic*. El dorado es #eab200 y el negro es, pues bien, negro (#000000). El fondo, que es un verde azul oscuro (#002123), se utiliz en la sombra del logotipo. As, lo que podra haber sido problemtico acab siendo sencillo gracias a una simple mascota de abejorro, como se puede ver en la figura 2:
Figura 2
* http://ramblinwreck.cstv.com/
Una parte de la mascota del Georgia Tech utilizada para adaptar los colores del logotipo.
Reflexin Casi nunca os encontraris con una empresa que no haya utilizado una imagen digital de su logotipo o marca en lnea para elementos como tarjetas comerciales y papel de cartas, incluso para su presencia real en la web. No obstante, muchas de estas empresas suelen aceptar los colores que presenta la web en vez de cambiar los colores para adaptarlos a su material impreso. As pues, no os fiis siempre de los colores web para crear la web de una empresa, especialmente si estos colores no coinciden con su material impreso, como folletos o papel de cartas. En vez de esto, preguntad a la empresa qu colores prefiere: de entrada, es posible que no se hayan dado cuenta de que los colores eran diferentes.
4.2.3. La composicin Para la composicin, y por la simplicidad de esta gua, mostraremos una nica composicin. Hemos elegido una disposicin de blog que promueve los cambios ms frecuentes en el texto central en la parte superior, fcil acceso a la navegacin entre el encabezamiento y el texto central reciente, y acceso a los apuntes anteriores por debajo del pliegue de la pgina de inicio. El trmino por debajo el pliegue tiene su origen en la produccin de diarios. Cuando un diario est en el montn, el lector slo ver el texto principal situado por encima del pliegue en el diario (es decir, el pliegue fsico del papel). Este texto principal incluyendo imgenes es importante porque debe seducir al lector para que compre el diario. La misma teora por encima del pliegue se aplica al diseo de una web. Cualquier cosa que aparezca en un monitor cuando el visitante entra en una web se encuentra por encima del pliegue. Y el texto principal que el lector debe
43
desplazar para poder verlo se encuentra por debajo del pliegue. De manera que el truco es mantener la atencin del visitante de una web en las primeras imgenes y el texto que ve en el monitor, independientemente de la resolucin (que es un buen motivo para probar vuestras webs en diferentes monitores/resoluciones de pantalla, un tema que abordaremos ms adelante en este apartado). En la figura 3, se muestra un ejemplo aproximado para la disposicin inicial del Wiki Whatevers:
Figura 3
Composicin aproximada (esqueleto o wireframe) de la pgina de inicio de Wiki Whatevers.
Esta disposicin seguir siendo la misma a lo largo de la web, pero puede cambiar para las pginas archivadas que enumeran los artculos y las entradas de los blogs sin imgenes. El motivo de esta consistencia es que el espectador no se confunda. Una vez que los usuarios aprendan a utilizar un sitio, generalmente no les gusta ver cambios de una pgina a otra. Esto es lo que contendr este diseo en concreto: 1) Encabezamiento: el encabezamiento es pequeo porque no queramos que el logotipo ocupara demasiado espacio en la pgina. Aunque el logotipo es una caracterstica menor, los colores del logotipo contribuirn a la combinacin de colores global de la web. El encabezamiento se encuentra en la parte superior, una
44
situacin tradicional, y el logotipo enlazar con la pgina de inicio del blog. El enlace desde el logotipo es cmodo y muchos usuarios se han acostumbrado a utilizar el logotipo como manera de volver a la pgina inicial de cualquier web.
2) Navegacin: situada inmediatamente bajo el encabezamiento, la navegacin es obvia y fcil de utilizar. Esta navegacin tambin se repetir en el pie. Repetimos la navegacin al pie sencillamente porque somos de la vieja escuela, donde la navegacin se repite como slo texto para aquellos usuarios que no visualizan imgenes en su navegador. Como todava no sabemos si utilizaremos imgenes para la navegacin en la parte superior, automticamente incluimos navegacin textual en algn otro lugar de la pgina, generalmente al pie. Este texto ayuda a los lectores ciegos* que utilizan un lector de pantalla para leer una web. Que coloquis este texto de navegacin en la parte superior o inferior de la pgina es irrelevante excepto para el diseo porque los lectores ciegos pueden escanear una pgina de abajo arriba y a la inversa tan rpidamente como una persona con visin. Por otra parte, es decisin del diseador y su cliente si se repite o no la navegacin en cualquier otro lugar de una pgina determinada. Si utilizis imgenes para la navegacin y no repets los enlaces de navegacin en forma de texto, aseguraos de incluir atributos alt descriptivos para las imgenes de navegacin. De esta manera, los usuarios que utilizan un lector de pantalla o que desactivan las imgenes todava sabrn para qu son estas imgenes. 3) Entrada ms reciente del blog: la entrada ms reciente del blog merece ser destacada y la posibilidad de que esta entrada tenga un tratamiento destacado en la pgina por encima del pliegue es una ventaja tanto para el cliente como para sus lectores. Cuando el lector llega a esta web, ste es el texto central que ver. No obstante, esta colocacin obvia significa que el cliente deber actualizar continuamente la web de modo consistente o se arriesgar a que los visitantes no vuelvan: la gente no volver a un blog si ste no ofrece contenidos nuevos. 4) Entradas anteriores en el blog: aqu es donde se situaran las entradas anteriores del blog; de tres a cinco entradas sera suficiente para que los espectadores pudieran saber, de un vistazo, qu se puede esperar de esta web de manera continuada. Aqu quedaran bien algunas imgenes, pero no son necesarias porque este rea se encuentra por debajo del pliegue, de manera que no es tan importante para atraer la mirada del espectador. La decisin de utilizar imgenes puede depender de si el tiempo de descarga es un problema o de si el apartado anterior realmente necesita una imagen para motivar al espectador a pinchar en toda la entrada del artculo/bloque. 5) Columna derecha: aqu es donde los lectores pueden acceder a las entradas del blog enumeradas por categoras, archivos y otros tipos de contenido de la web. Entre los ejemplos de otras pginas se encuentra la pgina Sobre la empresa, el ndice de una web y la informacin de contacto. Es importante decidir cmo queris enumerar estos elementos en una columna lateral, ya que el blog se crear en funcin de las categoras que creis, las pginas que
Podis ver el apartado 3 del mdulo El texto central de HTML para aprender ms sobre el uso correcto de los atributos alt.
* http://www.afb.org/ Section.asp?SectionID=57&TopicID =167&DocumentID=2757
45
construyis y el material de archivo. A medida que hagis crecer la web, estas listas se harn ms largas, posiblemente hasta el punto de que, en este caso, es posible que las categoras sean la nica lista que el espectador vea por encima del pliegue. Los clientes pueden decidir que las pginas son ms importantes que las categoras y la lista mostrada anteriormente se puede cambiar para situar las pginas por encima de las categoras. Como nota al margen, esta lista no incluye todo lo que se puede incluir en una barra lateral o columna lateral. Algunos clientes podran pensar que dos columnas seran preferibles, haciendo el blog de tres columnas en vez de las dos que hemos elegido nosotros. 6) Informacin al pie: la informacin al pie es esencial e importante porque proporciona a los visitantes informacin de antecedentes sobre la empresa y su web de un vistazo, en vez de tener que buscarla. El nombre de la empresa, posiblemente una repeticin del logotipo, direccin de correo electrnico, enlaces (con el formulario de contacto, avisos de privacidad, renuncias de responsabilidad, informacin legal), y tambin resmenes de noticias, son todos buenos candidatos para incluirse al pie de pgina. Como se ha mencionado anteriormente, tambin se puede repetir la navegacin en versin slo de texto. 7) Publicidad: en esta disposicin, la publicidad est situada a continuacin de la entrada ms reciente del blog y antes de las entradas anteriores de ste, en un banner horizontal. De esta manera, el cliente tiene la flexibilidad de elegir un texto o imgenes de banner para sus necesidades publicitarias. Este tipo de disposicin para publicidad sita slo un anuncio por encima del pliegue y otro anuncio por debajo de l. Esta cantidad de publicidad es ms que suficiente para la mayora de webs. Adems, relega la publicidad a una posicin secundaria, bajo el texto central del contenido de la web. Esta disposicin permite al lector pasar rpidamente del texto central a la navegacin sin desplazamiento, y tambin permite a los usuarios, como mnimo, ver otros temas que se pueden tratar en la web sin ms enlaces a las categoras de la web. Aunque el espectador nunca pase de la lnea roja del pliegue, la composicin proporciona todos los elementos importantes que puede necesitar el lector, todos situados por encima del pliegue.
4.2.4. Sobre la publicidad en una web
Es una ventaja para el cliente y un servicio para el lector que la publicidad de una web est relacionada con su contenido. En otras palabras, si el contenido del sitio es sobre flores, entonces la publicidad de esta web podra incluir servicios de jardinera, servicio de comida (para complementar los arreglos florales), etc. De manera que, para un sitio que proporciona materiales de cdigo abierto, podramos buscar anunciantes relacionados con contenido de cdigo abierto. Google Adsense*, como fuente, ayudara en este sentido, ya que los anuncios estn relacionados con el contenido. El uso de este tipo de publici* https://www.google.com/ adsense/
46
dad es una gran idea hasta que el trfico crezca lo suficiente como para motivar a otros anunciantes en vuestra web. Sin embargo, pensad siempre en las implicaciones de SEO antes de aceptar anuncios, ya que mucha publicidad puede afectar negativamente a la presencia del cliente en las pginas de bsqueda. A continuacin se muestran algunos buenos recursos de SEO: Intelligent site structure for better SEO* (Estructura inteligente de la web para una mejor SEO), por Joost de Valk.
* http://dev.opera.com/articles/ view/intelligent-site-structure-forbetter-se/
Semantic HTML and search engine optimization* (HTML semntico y optimizacin de motores de bsqueda), por Joost de Valk.
* http://dev.opera.com/articles/ view/semantic-html-and-searchengine-optimiza/
How Affiliate Programs Can Affect Search Rankings* (Cmo los programas de afiliados pueden afectar a las clasificaciones de las buscas), por Fredrick Marckini. New Report Explores how PPC Rank Affects Traffic*(Un nuevo informe analiza cmo el PPC afecta al trfico), por Jennifer Laycock.
Reflexin Es posible que no seis responsables de la publicidad como diseadores, a menos que estis diseando una web para vosotros mismos, pero si en el futuro pensis trabajar con una agencia de publicidad o de diseo, es posible que queris contribuir a la publicidad en estas empresas de diseo. Cuantos ms conocimientos tengis sobre qu provoca que una web tenga xito, ms xito podris tener en vuestra carrera de diseo. Cuando sea posible, aprended todo lo que podis sobre marketing (para vosotros y para vuestros clientes) y sobre tcticas de optimizacin en motores de bsqueda.
* http://www.clickz.com/ showPage.html?page=3497826
* http:// www.searchengineguide.com/ jennifer-laycock/new-reportexplores-how-ppc-rank-affectstraffic.php
4.2.5. Comprobacin de la composicin con validadores y el cliente Antes de implementar este formato con el cdigo, necesitamos confirmar la composicin o composiciones (o wireframes) con el cliente. Una tctica que utilizamos para convencer al cliente de que una composicin es mejor que otra es recordarle que la codificacin de composiciones adicionales cuesta dinero. Ello contribuye a hacer que el cliente elija una composicin sabiendo que el cdigo se puede modificar ms tarde para hacer algunos cambios estructurales. El siguiente paso es codificar el formato y despus validar este cdigo. Utilizamos el servicio de validacin de marcado* y el servicio de validacin de CSS** del W3C para confirmar que el HTML y el CSS utilizados para crear la composicin no contienen errores. Podis cargar los archivos directamente desde vuestro ordenador a estos servicios de validacin, de manera que no necesitis cargarlos en la web del cliente para probarlos. Esta prueba permite al diseador o al programador detectar cualquier error en la interfaz de usuario que se pue-
* http://validator.w3.org/ ** http://jigsaw.w3.org/cssvalidator/
47
da resolver antes de que la web quede saturada con cdigo de imgenes, publicidad y otros elementos aadidos a las pginas.
La accesibilidad es otra gran preocupacin, asegurarse de que la web sea utilizable para personas con discapacidades como ceguera o deficiencias motoras. Este proceso de validacin no es tan sencillo como el de validar CSS y HTML. Hay verificadores disponibles, como TAWDIS*, pero lo ideal es que probis con usuarios reales y hagis un anlisis cualitativo de vuestras webs con respecto a la accesibilidad; un comprobador mecanizado no puede concluir si una web es accesible o no, aunque puede dar alguna indicacin de qu es correcto y qu no. A veces tambin cometen errores. Se publicar mucha ms informacin sobre accesibilidad en la siguiente parte de la asignatura, de manera que estad atentos a este espacio. Tambin podis comprobar la composicin en los diferentes navegadores disponibles para garantizar que vuestra web pueda ser vista por el mximo nmero de usuarios de la web posible. Podris hacerlo si tenis sistemas Mac, Windows, Linux y mviles disponibles, todos con diferentes navegadores instalados, o utilizis emuladores como VMWare Fusion* para emular diferentes sistemas en un ordenador, pero esto es bastante complicado e interminable. Otra opcin es utilizar servicios de captura de navegadores, como BrowserCam**, ya que este servicio es rpido, cmodo y cubre una serie de posibilidades de navegadores diferentes (incluyendo la mayora de los navegadores antiguos). stos ofrecen una prueba gratuita de 24 horas para que uno pueda comprobar si el servicio es adecuado y, despus de la oferta gratuita, el coste para utilizar el servicio vale la pena, especialmente si se disea una gran cantidad de webs y se hacen pruebas con un gran nmero de navegadores diferentes. Por ltimo, es buena idea hablar con el cliente para hacerle saber que se ha generado el cdigo para la composicin y que se ha validado; tambin deberais decirle cuntos cambios ha habido que realizar en el esqueleto para que funcione en todos los navegadores. Slo una vez generado el cdigo, finalizada la validacin y recibido el visto bueno del cliente, se debe empezar a aadir colores, imgenes y otros tipos de cdigo como, por ejemplo, la publicidad. Aunque este trabajo puede parecer muy pesado, es mejor confirmar toda la validacin y obtener la aprobacin del cliente antes de poner la guinda en el pastel. En caso contrario, puede ser que acabis trabajando ms de la cuenta si encontris problemas de cdigo e incompatibilidades de navegadores una vez est hecho. Adems, cualquier pieza de arte o texto central puede suponer un descuido para el cliente cuando intente revisar la arquitectura real de la web. Una vez completado este proceso, podris empezar a trabajar en el texto, las imgenes y los colores de la web. Cmo empezar a hacerlo? La respuesta la encontraris en el siguiente apartado.
* http://www.tawdis.net/taw3/ cms/en
* http://en.wikipedia.org/wiki/ VMware_Fusion ** http://www.browsercam.com/ Default2.aspx
48
Resumen El diseador de webs a menudo debe saber hacer muchas cosas de diferentes mbitos porque el diseo web se basa en muchos factores. Crecer una web con el tiempo o seguir siendo esttica? Puede el alojamiento web proporcionar una calidad de servicio consistente y espacio para crecer, o necesitar el cliente moverse de un alojamiento web a otro con las nuevas adiciones en la web? Y, si el diseador no puede encargarse como sera necesario de todos los temas de diseo, dispone de una red de personas para ayudarlo? As pues, ms all del color y los grficos, hay que poner los fundamentos sobre los que construir la web. La empresa de crear una web afecta al diseo, y cualquier aspecto que se pueda convertir en un problema por el camino se puede limar en las fases de planificacin. Esta capacidad de resolver problemas antes de que surjan distingue a un diseador profesional. Una vez establecidos los fundamentos y desarrollada la arquitectura y la malla (o wireframe) de la web, el diseador puede empezar a trabajar con combinaciones de colores para desarrollar toda la web para la aprobacin del cliente.
Preguntas de repaso 1. Qu elementos hay que tener a mano antes de empezar a desarrollar el diseo de una web? 2. Por qu hay que enumerar todos los elementos que se piensan utilizar en una pgina web? 3. Por qu es importante investigar diferentes proveedores de espacio web? 4. Un diseador puede hacer muchas cosas diferentes, pero qu harais si vuestro cliente os pidiera que disearais un logotipo y no tuvierais ni idea sobre diseo de logotipos? 5. Mencionad dos buenas razones para investigar las webs de la competencia de una empresa. 6. Qu es CMYK y qu significan estas letras? 7. Mencionad como mnimo dos maneras de convertir un color CMYK en el correspondiente RGB. 8. Mencionad un motivo por el que un diseador debera utilizar texto para la navegacin como mnimo en una zona de la composicin de una pgina web. 9. Por qu un diseador mantendra una composicin consistente en toda una web?
49
10. Mencionad una razn de por qu el cdigo de una web se debera validar en las primeras fases de diseo.
Lecturas complementarias A continuacin se enumeran otras webs que ofrecen listas de control: Lista de control de Dive In Designs http://www.diveindesigns.com/home/dd1/page_17 Lista de control de usabilidad web de Net Mechanic http://www.netmechanic.com/news/vol7/design_no4.htm Lista de control de Max Design http://maxdesign.com.au/presentation/checklist.htm Lista de control de Usability First http://www.usabilityfirst.com/websites/index.txl Lista de control de David Skyrme and Associates http://www.skyrme.com/tools/webplan.htm Lista de control de diseo web de SCORE http://www.score.org/eb_42.html
50
5. Combinaciones de color y modelos de diseo

Linda Goin
Despus de que el diseador web presente la arquitectura de una web, o wireframe, al cliente para que le d el visto bueno, el siguiente paso es determinar el aspecto y el tono de la web mediante colores y grficos. En este apartado demostraremos cmo mantenemos este proceso de la manera ms simple posible, tanto para nosotros como para el cliente. Creo en la filosofa KISS (keep it simple, sweetie: las cosas, sencillas, querido). Existen dos motivos para utilizar esta tctica: en primer lugar, la vida ya es bastante complicada tal como es; en segundo lugar, un plan sencillo tambin contribuye a mantener una web ms accesible y usable para todos los implicados. En este apartado, haris lo siguiente: Determinar el tipo de letra para los encabezamientos, subttulos y texto central, junto con otros elementos tipogrficos. Planificar diferentes combinaciones de colores para la web. Crear un esbozo para el cliente para que decida el color y los grficos. Pensar en cmo probar la web antes de ponerla en activo.
5.1. Primer paso: consideracin de la tipografa Aprenderis algo ms sobre los aspectos tcnicos de la tipografa en el apartado sobre tipografa que viene a continuacin; ahora veris algunos aspectos que os sern tiles en esta fase.
Las fuentes* tambin se denominan tipos de letra y se utilizan para visualizar texto, nmeros, caracteres y otros smbolos. Tambin conocidos como glifos, estos smbolos, letras y nmeros se categorizan por familia (todos relacionados), estilo (cursiva, normal, oblicua, etc.), variante (normal o mayscula pequea), peso (negrita), estiramiento (reducir o ampliar el tipo en altura o anchura) y tamao (por puntos o por altura o anchura de pxeles). La tipografa es la disposicin y el aspecto del texto, de manera que est relacionado con el aspecto de los glifos y con cmo estn dispuestos en la pgina (columnas, prrafos, alineacin, etc.). La manera ms efectiva de controlar el aspecto de la tipografa en una pgina web es mediante las hojas de estilo en cascada (CSS)**. Uno de los primeros pasos para finalizar el diseo web es decidir las fuentes que utilizaris en todo el sitio web. Muchos estudios han demostrado que una gran variedad de tipos de letra en un sitio web puede confundir al lector. Por otra parte, una web que slo utiliza un tipo de letra para todo puede parecer insulsa.
* http://www.w3.org/TR/RECCSS2/fonts.htm
** http://www.w3.org/Style/CSS/
51
Nuestro consejo es utilizar un tipo de letra para los encabezamientos y subttulos y otro tipo de letra para el texto del cuerpo, especialmente si pensis aadir publicidad. La limitacin del nmero de fuentes aade continuidad a la web y permite al mismo tiempo al lector diferenciar entre los encabezamientos y el texto central cuando se mire la pgina. Los anunciantes aadirn la variedad; no se puede saber por adelantado qu tipo de letra o variedad de tipo de letra puede utilizar un anunciante en un banner o anuncio de texto. Nosotros solemos utilizar Verdana para el texto central y Times Roman o Georgia para los ttulos. Los tipos de letra Times Roman y Georgia son serifs, y la Verdana es una sans-serif. Como veris pronto, hemos decidido aplicar la Verdana al texto central de la web de ejemplo, pero como el logotipo se ha creado a partir de la Arial Black, tambin hemos utilizado este tipo de letra sans-serif para todos los ttulos. A veces se deben romper las propias normas y esta composicin ofrece un ejemplo excelente de esta contingencia. Pero, en primer lugar, permitidnos explicar la diferencia entre tipos de letra y por qu aplicamos unas opciones tan sencillas.
5.1.1. Sobre los tipos de letra o fuentes Hay cuatro tipos principales de fuentes, que son las siguientes:
1) Serif: cualquier tipo de letra que contenga un trazo acabado, acampanado o con extremos rematados, o que tenga extremos con filigranas (incluyendo serifs planas). A lo largo de la historia, se ha elegido siempre la fuente serif para imprimir texto central porque resulta fcil de leer sobre una pgina imprimida. Pero la web es diferente de la pgina impresa y algunos estudios* sobre la legibilidad de las fuentes** demuestran que algunas del tipo sans-serif son ms fciles de leer, como la que se muestra en la figura 2, cuando se utilizan como texto central en una pgina web.
Figura 1
* http://www.wilsonweb.com/ wmt6/html-email-fonts.htm ** http://www.webaim.org/ techniques/fonts/#readability
Ejemplo de tipo serif, Times New Roman, normal (no negrita ni cursiva), en 18 pt.
2) Sans-serif o de palo seco: cualquier tipo de letra que tenga los trazos de los extremos normales, sin ser acampanados ni tener trazos cruzados ni ornamentos de ningn tipo. Aunque algunos autores* argumentan que los estudios sobre la legibilidad de las fuentes son errneos, nos hemos fijado en que en sus webs utilizan el tipo sans-serif para el texto central. Incluso en los artculos que argumentan que los tipos de letra serif son ms legibles**, se utiliza el tipo sansserif en el texto central de su web. Por lo tanto, nos inclinamos por seguir a la mayora en este caso: utilizamos sans-serif como en la figura 2 porque se ha convertido en un tipo de letra tradicional para el texto central de la web.
**
* http://www.hgrebdes.com/ typefaces/fontresearch.php ** http://www.linotype.com/225816905/aboutlegibility.html
52
Figura 2
Ejemplo de tipo sans-serif, Verdana, normal en 18 pt.
3) Caligrfica o cursiva: estos tipos de letra suelen tener un aspecto ms parecido a la escritura a mano con bolgrafo o pincel que a la letra impresa, como el ejemplo que se muestra en la figura 3. Estas fuentes incluiran las que parecen escritas a mano, aunque no sean en cursiva. Un motivo para no utilizar este tipo de fuente en una web, especialmente en el texto central, es que resulta difcil de leer en fragmentos largos. Adems, no todos los navegadores muestran las mismas fuentes, de manera que si decids utilizar una fuente caligrfica o cursiva es posible que decida mostrarse como fuente serif en el navegador de alguien.
Figura 3
Lectura difcil Pensad qu difcil resultaba leer aquella carta escrita a mano de vuestra ta Mara o el manuscrito del siglo XII que visteis una vez en el museo.
Ejemplo de fuente caligrfica, Staccato, a 18 pt.
4) Especializada, incluyendo espacio nico: el nico criterio de una fuente de espacio nico es que todos los glifos tengan la misma anchura fija, similar a lo que podra ser una pgina escrita a mquina. Otras fuentes podran tener un tono de fantasa, como la que se muestra en la figura 4 a continuacin, y se utilizan nicamente para finalidades decorativas. Las fuentes de espacio nico son tiles en una web especialmente para mostrar cdigo de programacin*. Este tipo de letra se suele utilizar para esta finalidad porque una fuente de espacio nico muestra claramente cada letra y cada smbolo utilizado en el cdigo.
Figura 4
**
* http://www.lowing.org/fonts/
Ejemplo de fuente especializada, Jokewood, a 18 pt.
Si nos fijamos en las imgenes anteriores, veremos que no todos los tipos se crean de la misma manera, aunque se creen al mismo tamao de punto. El tamao de punto es la altura de una letra, y algunas fuentes sern ms altas a 18 puntos que otras. Tambin hay otras variaciones, como los espacios entre letras y palabras, o el hecho de que algunos tipos de letra, como Jokewood, no tienen letras minsculas. Pero podis ver cmo la Jokewood y el Staccato, la caligrfica, seran difciles de leer como texto central. Estas letras caligrficas podran utilizarse en zonas pequeas como los ttulos o anuncios.
Un punto que se debe tener en cuenta es que es posible que estas fuentes no se vean igual en todos los navegadores porque los navegadores diferentes son bsicamente incompatibles. Es posible que hayis captado nuestro comentario anterior sobre que no todos los navegadores muestran las mismas fuentes. El motivo de este problema es que no todos los sistemas operativos admiten las mismas fuentes. O es posible que admitan las mismas fuentes pero la variante, el peso y otros factores pueden mostrarse de manera diferente de un navegador a otro. Por este motivo, podis elegir utilizar una fuente genrica*, o simplemente un tipo se-
**
* http://www.upsdell.com/ BrowserNews/res_fonts.htm
53
rif o sans-serif para mostrar la tipografa de la web. O podis utilizar tanto el nombre genrico como el nombre de la fuente que elijis y cruzar los dedos, porque los usuarios tambin tienen la posibilidad de cambiar su fuente o su aspecto en algunos casos.
Reflexin La nica manera de poder utilizar un tipo de letra especfico en un estilo, variante o peso especfico, o que se adapte a todos los navegadores, es crear un grfico con esta fuente en un programa grfico. Sin embargo, no es recomendable hacerlo por muchos motivos, incluyendo que el texto es inaccesible (un lector de pantalla no puede leer el texto oculto en el interior de un grfico), que es ms difcil de cambiar el tamao (no todos los navegadores admiten el cambio de tamao de pantalla completa) y que es ms difcil de mantener (se debe volver a crear el grfico cada vez que se quiere cambiar el texto). Creednos, no sigis por esta va.
Por este motivo, como diseadores web, debis aprender a aceptar el hecho de que la web es, para todos los propsitos y finalidades, bsicamente un formato maleable. En el diseo de una web tenis control sobre muchas cosas. El tipo de letra es un elemento sobre el cual tenis control, pero slo si lo mantenis tan sencillo como sea posible. Y ste es el motivo por el que hemos sido fieles a Verdana para el texto central y a Times Roman o Georgia para los ttulos durante todos estos aos. Por otra parte, los diseadores de tipo de letra y los programadores intentan continuamente que las fuentes sean ms legibles y bonitas*. De manera que tomoslo con reservas e intentad algo nueva si creis que funcionar. Descubriris si funciona o no cuando probis la pgina web en diferentes navegadores (una tarea que explicaremos ms adelante en este apartado).
**
* http://brainstormsandraves.com/ articles/typography/webfonts/
5.1.2. Sobre la legibilidad Cuando mostris vuestro diseo de la web a un cliente, generalmente ste no sabr la diferencia entre un tipo de letra serif o sans-serif. Todo lo que el cliente sabr es si puede o no puede leer el contenido de esta pgina. De manera que, en definitiva, la legibilidad es lo que importa. Para tal fin, hay que garantizar lo siguiente: 1) Que vuestro tipo de letra sea lo suficientemente grande para que se pueda leer en diferentes resoluciones de navegador. Aunque los usuarios tienen los medios para cambiar un tamao de fuente en algunos navegadores (como por ejemplo, Opera), podis intentar aseguraros de que vuestras fuentes se pueden adaptar a diferentes resoluciones de navegadores*. Una manera de conseguir esta caracterstica es especificar el tamao de vuestras fuentes en porcentajes** o ems en vez de por altura de pxeles (se utiliza CSS para hacerlo). 2) Que ofrezcis un contraste suficiente entre el fondo y el texto central. Aunque un tipo de letra blanco o claro sobre un fondo negro para fragmentos grandes del texto central puede cansar la vista*, si lo vais a hacer de esta manera, intentad proporcionar una hoja de estilos alternativa de manera que los usuarios, en vez de esto, puedan leer un texto central oscuro sobre un fondo claro.
* http://www.456bereastreet.com/ archive/200608/ light_text_on_dark_background_vs _readability/
** **
* http://www.456bereastreet.com/ archive/200611/ resolution_vs_browser_size_vs _fixed_or_adaptive_width/ ** http://www.rnib.org.uk/xpedio/ groups/public/documents/ publicwebsite/ public_fontsizes.hcsp
54
3) Que los ttulos sean realmente diferentes del texto central. La capacidad de dividir los fragmentos grandes de texto central con ttulos y subttulos, o con listas (como sta) facilita que los usuarios puedan analizar una pgina para encontrar lo que es importante para ellos. Dividir una pgina con imgenes tambin est bien, pero aseguraos de que estas imgenes estn relacionadas con el texto central. En caso contrario, estis desperdiciando ancho de banda.
4) Que evitis alargar el texto central a toda la anchura de una pantalla con composicin fluida. Intentad leer un prrafo que se alarga por todo el espacio horizontal que proporciona un monitor grande: al cabo de un rato os cansaris porque estaris utilizando los ojos y tambin la cabeza para leer el texto de un lado de la pantalla al otro. Echad un vistazo a esta web sobre legibilidad*, que es lo mejor que hemos visto hasta ahora para ilustrar una anchura tpica legible para el texto central (tambin la ilustracin que se muestra a continuacin en la figura 5). Esta pgina tambin explica con detalle cmo la gente lee una pgina, independientemente de si se trata de una web o de pgina impresa. La imagen que se muestra a continuacin se captur en una pantalla de veinticuatro pulgadas con una resolucin de 1920 1200. Comparad esta imagen con la que se ve en la pantalla cuando pinchis en el enlace anterior. A continuacin, tomad nota de la resolucin de la pantalla para ver las diferencias. Algunas veces, una composicin fija es una buena opcin porque definir los parmetros del texto central en beneficio de vuestros lectores. No os preocupis del espacio en torno a este rea de texto central (como la que se muestra a continuacin). Ofreced un fondo agradable que no distraiga del diseo o del texto, y haris un favor a aquellos que disponen de pantallas grandes.
**
*http://www.bastoky.com/ Readability.htm
40-60 caracteres se consideran en general una buena longitud de lnea para el texto central, y esto vara en funcin de factores como el tamao de la fuente y el pblico a quien va destinado. Por ltimo, pero no menos importante, comprobad si el texto central y los ttulos contienen errores tipogrficos y ortogrficos. Hemos encontrado como mnimo un error tipogrfico y unos cuantos errores ortogrficos en aproximadamente la mitad de los enlaces que hemos facilitado hasta ahora para este apartado. Aunque errar es de humanos, la credibilidad de una empresa o de una persona puede quedar manchada por una ortografa deficiente y con palabras sin espacios u otros problemas que se pueden resolver fcilmente.
Figura 5
5.2. Segundo paso: aadir tipografa
Ejemplo de una anchura apropiada para el texto central, visualizado en una pantalla grande.
Una vez hayis elegido las fuentes que utilizaris para la web, deberis disponer los ttulos, subttulos y el texto central en la composicin de la web. En el aparta-
55
do anterior, introdujimos una empresa imaginaria, Wiki Whatevers, que quera compartir sus fragmentos de cdigo en una web como material de cdigo abierto. Diseamos una arquitectura de la web para su aprobacin, y nos complace informaros de que les encantaron las ideas que les presentamos. Aunque este esqueleto parece austero, evita cualquier colocacin de grficos o imgenes que puedan dar al cliente la nocin preconcebida de dnde podran ir las cosas, incluyendo el logotipo de la empresa. La imagen de este esqueleto se muestra a continuacin en la figura 6:
Figura 6
Esqueleto para Wiki Whatevers.
Ahora, para nuestra propia tranquilidad, queremos aadir el logotipo y parte del texto que la empresa nos facilit para determinar si fluir correctamente con esta composicin. El otro motivo por el que queremos aadir el logotipo y el texto en este momento es que la tipografa puede ayudarnos con la eleccin de colores que estamos a punto de llevar a cabo. El texto central, los ttulos y otras partes de la tipografa de una web aaden su propio color a una web. Slo hay que comparar la imagen que se ve a conti-
56
nuacin en la figura 7, con la que est directamente encima, en la figura 6, para ver la diferencia:
Figura 7
Texto central y logotipo aadidos al esqueleto.
El texto anterior aade color a la web, aunque el nico color que se ha aadido es el del logotipo. El texto ha aadido valor, no slo en contenido, sino tambin en tonos, tonalidades y matices de negro, blanco y gris. Hemos aadido slo los elementos que son esenciales para la web: el logotipo, el nombre de la web (que tambin es el nombre de la empresa), un aadido o tag line (Open Source Wikis), los enlaces y la suscripcin a un boletn o canal RSS en la columna central, la informacin del pie sobre la empresa, y tambin enlaces de texto y el texto
Reflexin Aunque decimos que utilizamos texto central, realmente utilizamos un relleno proporcionado por el generador Lorem Ipsum*. Este texto central falso puede representar el texto real si queris disear una web y todava no disponis del texto. * http://www.lipsum.com/
57
de los anuncios. El cuadro de bsqueda era demasiado grande para utilizar slo una columna, de manera que lo colocamos en el encabezamiento.
5.2.1. Atencin a la alineacin Llegados a este punto, nos gustara ensearos cmo tomamos la decisin de colocar el texto donde est, y cmo elegimos la alineacin. La alineacin significa cmo est colocado el texto en una determinada zona. Podis alinearlo a la izquierda y dejar bordes irregulares a la derecha, que sera el formato tradicional. O podis centrar el texto o justificarlo (alineado por igual a derecha e izquierda), o alinearlo a la derecha de manera que los bordes de la derecha sean rectos y los bordes de la izquierda sean irregulares. Elegimos la alineacin tradicional a la izquierda, donde el tipo de letra se alinea en lnea recta a la izquierda. Pero quiz notaris que el texto central est justificado ms a la derecha que los subttulos que acompaan a este texto. El logotipo fue el motivo por el que elegimos esta alineacin. A continuacin, puede observarse una ampliacin que explica por qu tomamos esta decisin en la figura 8:
Figura 8
Ilustracin de la alineacin entre el logotipo y el texto central.
Como el logotipo no es un diseo de premio, intentamos que el tamao fuera pequeo. Adems, el peso que proporciona el tipo de letra Arial Black hace que el logotipo parezca mayor y ms desproporcionado que cualquier otra caracterstica de la pgina. Aunque lo redujimos mucho, queramos que el logotipo fuera lo suficientemente grande para que cupiera el nombre de la empresa y su aadido Open Source Wikis en el espacio que proporcionaba la altura del logotipo. Por las lneas rojas que hemos colocado en la ilustracin anterior, podis ver que el nombre de la empresa est alineado en la parte superior del logotipo inclinado, y que el aadido est situado en la parte inferior de la W negra del logotipo.
Reflexin Volved a mirar tambin la figura 7: mirando hacia abajo desde la primera W del logotipo, veris que el encabezamiento de The Latest Wiki est alineado con el punto inferior izquierdo de esta letra. Como el logotipo est inclinado, el punto ms bajo intenta apuntar al ttulo de debajo de la navegacin. De hecho, provoca que la navegacin aparezca en segundo trmino, ya que el ttulo est tan en negrita como el nombre de la empresa.
58
Llegados a este punto, notamos que el tipo de letra Georgia que elegimos para el ttulo de entrada del bloque pareca demasiado apretado para esta zona. Por este motivo, decidimos cambiar los ttulos a Arial Black, un tipo sans-serif que es ligeramente diferente a Verdana, que utilizamos en el texto central, aunque no tan diferente como para generar confusin. Esta capacidad de alinear distintos elementos en el diseo de una pgina se facilita con CSS. Aunque algunos navegadores pueden descomponer la alineacin que hayis creado, en muchos casos va muy bien utilizar puntos exactos en una composicin para aplicar los elementos. ste es el motivo por el que tambin podis alinear un cuadro de bsqueda con la parte inferior de un aadido, o por el que podis alinear el lado derecho de este cuadro de busca con el lado derecho de un formulario situado ms abajo, tal como hicimos en el ejemplo mostrado anteriormente. Podra haber alineado el texto central con la esquina superior izquierda del logotipo y tambin con los ttulos, pero la justificacin mostrada anteriormente permite al lector mirar rpidamente los ttulos y leer el texto que le parezca importante. Por otra parte, cada pgina web es diferente y otro diseo de logotipo podra pedir una alineacin totalmente diferente. La cuestin es alinear todos los elementos importantes de la pgina de manera que fluyan correctamente. El lector no notar que os habis tomado esta molestia (ni tampoco el cliente, normalmente), pero slo hace falta que no alineis los objetos importantes de una pgina, para que alguien acabe haciendo el comentario de hay alguna cosa que no encaja del todo. El desplazamiento del texto central en una pequea cantidad tambin genera lo que se conoce como espacio blanco, o una forma (a veces denominada canal) en torno al texto y otros elementos que provocan que el lector vea claramente que una parte del texto est separada de la otra. El espacio a la izquierda del texto central se debe establecer generalmente de manera similar al espacio de la derecha del texto central (o cualquier imagen), de modo que se pueda crear un equilibrio en un espacio determinado. Este espacio blanco da a la web un poco de espacio para respirar, para que no parezca tan apretado.
Echad un vistazo a las webs la prxima vez que naveguis por Internet. Fijaos en las pginas que os parezcan bien diseadas o en las que simplemente encajen bien. Observad la alineacin del texto central, los ttulos, los logotipos y otros elementos de la pgina. Estn alineados? Parece que fluyan de un elemento al otro? Quiz el diseador dedic tiempo a los pequeos detalles como stos para que el diseo de la pgina fuera menos importante que el contenido, que, para todos los propsitos y finalidades, es el objetivo de un buen diseo. Es evidente que un diseo puede encontrarse con muchos problemas en diferentes navegadores. Es posible que el texto no se alinee correctamente en Safa-
Reflexin Es posible que algunos os preguntis por qu no hemos elegido Arial Black para los subttulos, as como para el nombre de la empresa. Hemos decidido seguir fieles a la opcin Times New Roman porque este tipo aporta contraste a la web, un principio de diseo que aumenta el inters por una pgina. El uso generalizado de Arial Black para todos los ttulos hara que esta web quedara aburrida.
59
ri, pero que aparezca perfectamente alineado en Opera o Firefox. ste es un problema que habr que solucionar pronto, pero slo despus de haber elegido los colores para la web.
5.3. Tercer paso: color Cuando preparamos un esbozo de web para un cliente, generalmente intentamos desarrollarlo al mximo una vez decidido el esqueleto inicial, antes de volver a mostrar los ejemplos al cliente. Siempre que sea posible, preferimos utilizar cdigo en vez de una imagen para el esqueleto. De esta manera podemos aadir elementos como el logotipo, el texto central e incluso esbozos de anuncios para mostrar al cliente cmo quedar todo en la web definitiva. Con esta disposicin completa, el cliente no se desilusiona por el aspecto que tendr la pgina con todos los elementos colocados. Despus, el cliente puede tomar decisiones sobre qu se puede aadir o eliminar. Adems, cuando podemos ensearle a un cliente una pgina web en un ordenador tal como quedara en la web, puede visualizar cmo quedara esta pgina si la visitara en tiempo real. El color forma parte de esta mentalidad de todo est en su sitio. El motivo es que las diferentes combinaciones de colores pueden cambiar una web completamente, incluso con todos los elementos situados. Adems, preferimos mantener las muestras de color al mnimo porque demasiadas muestras pueden llegar a confundir. En este caso, el cliente tena un presupuesto limitado, de modo que lo persuadimos de limitar las opciones a una combinacin de colores como muestra con la que trabajar. Cuando presentamos el Color Scheme Generator II, no mencionamos que se puede introducir un color hexadecimal en esta herramienta para generar una combinacin de colores a partir de un color especfico. Justo debajo de la rueda de colores, veris un enlace que dice Enter RGB (introducid RGB). En nuestro caso, el dorado del logotipo era el color ms fuerte, de manera que introdujimos este hexadecimal (#eab304) para conocer mejor qu opciones tenamos. La combinacin monocromtica resultante era un poco aburrida, pero la combinacin de colores de contraste era prometedora. Esta combinacin tena un azul violeta con el que podamos trabajar porque la sombra de detrs del logotipo tambin tena un toque de azul, como se muestra en la figura 9.
Figura 9
Podis ver el Color Scheme Generator II en el apartado 3 de este mdulo.
Combinacin de colores de contraste basada en #eab304.
60
Con los colores que se muestran aqu, decidimos utilizar el color dorado principal del logotipo como fondo para la navegacin superior. Utilizamos el azul ms oscuro (casi un azul violeta) #2b0da4 para los enlaces (que tambin subrayamos) y utilizamos una opacidad ms clara como el mismo color azul para el fondo de la publicidad. En la figura 10 podis ver cmo estas adiciones de colores alteran el aspecto de la disposicin:
Figura 10
Composicin con colores que crean contraste.
En la imagen superior podis ver que los colores son demasiado oscuros y duros para la web. Por lo tanto, redujimos la opacidad de la barra de navegacin hasta un 75% y la opacidad de las barras del texto publicitario hasta un 20%. En la figura 11 podis ver la diferencia inmediata. La reduccin del color en la barra de navegacin provoca que quede ms alineada con el color del logotipo. La reduccin de opacidad del color del fondo de la publicidad hace que encaje mejor con los colores de los enlaces. Como los anuncios consisten en enlaces, esta reduccin del color y adaptacin a los
61
enlaces de la web es adecuada. El hecho de que se haya aadido el color del ltimo de los anuncios es bueno (si alguna vez utilizis un servicio de publicidad como Google Adsense, descubriris que Google prefiere que destaquis los anuncios del resto del texto central) y la adicin de color contribuye a cumplir estos criterios. Tambin utilizamos el color de contraste oscuro #2B0DA4 para el aadido, y esta adicin contribuye a destacar el color de contraste azul en torno a todo el permetro de la pgina.
Figura 11
Composicin con opacidad reducida.
Aunque esta composicin puede parecer fcil de crear, estuvimos bastante tiempo utilizando los colores de la combinacin de colores de contraste para los fondos, para dar color a los ttulos y para cambiar la disposicin de los anuncios varias veces. Con cada cambio, los colores parecan saturar la sencillez de la composicin, de manera que los eliminamos y nos quedamos con el negro para toda la tipografa, excepto para el aadido. Aunque podamos utilizar un enlace de color visitado, creemos que nuestra mejor opcin es que-
62
darnos con una base sencilla de dos colores que acepte bien las imgenes en color sin crear una pesadilla cromtica. Por otra parte, podis ver cmo crear un esqueleto previamente puede simplificar tambin el trabajo: una vez tengis definido un mapa o una arquitectura, la adicin del color es ms o menos como pintar sin salirse de la raya. Si os ces a vuestra composicin, la podis utilizar para guiaros a la hora de elegir. Adems, si mantenis la sencillez, el diseo puede ser ms elegante a largo plazo, y tambin ms usable y accesible. Existe otra buena razn para mantener la simplicidad de esta composicin: las pginas interiores tendrn fragmentos de cdigo y utilizaremos una fuente de espacio nico para este cdigo con la finalidad de ceirnos a las mejores prcticas. ste es otro motivo por el que hemos decidido utilizar dos tipos de letra sans-serif diferentes de estilos parecidos. La aplicacin de una fuente de espacio nico en el interior de esta web aportar una buena variedad de tipo de letra, junto con cualquier variante publicitaria. Aseguraos de utilizar los elementos de encabezamiento (h1, h2, h3, etc.) para los ttulos y subttulos en vez de hacer que estn en negrita (strong) o en cursiva (em). El uso de elementos de encabezamiento har la web ms accesible. Podis modificar el modo en que estos ttulos aparecen en la hoja de estilos (CSS). Algunas cosas que cabe tener en cuenta sobre la pgina anterior: Hemos mantenido el nombre de la empresa de la parte superior de la pgina en negro porque el negro ayuda a conectar el negro del logotipo con la parte superior de la pgina. Hemos utilizado una alineacin centrada en la parte superior como la columna central para atraer la atencin a la funcin de registro. Como el formulario para el registro en un boletn llena la anchura de esta columna, el texto centrado queda compensado mediante esta alineacin y hace que la copia parezca pertenecer a la forma creada para este formulario. La alineacin centrada de la direccin en la parte inferior de la pgina al pie puede parecer descentrada, pero queramos que esta direccin formara parte de la zona que lleva el texto central de la web. A medida que vaya creciendo la web, esta columna derecha quedar llena de ms enlaces y posiblemente algunas imgenes, y queremos que esta zona quede completamente separada del texto central de la web. Esta separacin avisa a los espectadores de que la columna de la derecha es a donde debe ir para encontrar ms informacin. Para acabar, como ltimo retoque aadiremos las imgenes de la pgina. A no ser que el cliente tenga una imagen para utilizar, la que elijamos habr de encajar con la combinacin de la composicin. Dicho de otra manera: intentad encontrar una imagen apropiada que refleje los colores que habis elegido para la web. En este caso, hemos decidido aadir un poco de humor a la composicin con una foto de archivo de un geek. Uno de los motivos por los que hemos elegido esta foto
63
es que el hombre de la imagen est mirando directamente al espectador, lo que significa que esta imagen podra llamar la atencin del espectador antes que cualquier otra cosa del sitio. Como esta imagen es tan importante, nos fue bien que los colores de su camisa fueran semejantes al dorado y al azul de la web. Por ltimo, las gafas oscuras reflejan los puntos de negro fuerte de los ttulos de la web. Adems, aadimos una tonalidad azul a las sombras y una tonalidad amarilla a los puntos de luz de esta foto con Photoshop para que encajara mejor con la combinacin de colores global. Tambin metimos un aadido para contener las etiquetas de publicacin del blog y un sello de fecha y hora para que los espectadores puedan ver de cundo son las entradas del blog. Todos estos elementos, como podis ver a continuacin, aaden ms peso y confusin a la web. ste es slo un motivo ms por el que es recomendable mantener la informacin importante y esencial tan simple como sea posible: el espectador tendr bastantes opciones cuando pinche en esta web tal como est ahora. Podis ver la figura 12 a continuacin para comprobar el resultado final:
Figura 12
El diseo definitivo preparado para la presentacin al cliente.
64
La ventaja del diseo web es que no se trata de un diseo impreso. La impresin es para siempre, mientras que la web cambia constantemente. De manera que esta web puede cambiar con los aos para reflejar el crecimiento de este grupo. Los errores se pueden corregir y los colores se pueden modificar. No obstante, es preferible tener el producto ms perfecto en la red desde el principio. Este objetivo de ofrecer el mejor producto posible es bueno para el prestigio personal y tambin para el prestigio del cliente. A medida que creemos ms pginas, las llevaremos acabadas al paso siguiente y definitivo antes de que pasen otra vez al cliente.
5.4. Cuarto paso: pruebas Probar una web significa que el diseador pasar un fino tamiz a todas las pginas de la web para buscar distintos errores que se puedan resolver antes de que la web est activa. Existen diferentes opciones para estas pruebas, ya que se deben hacer varias.
1) Prueba de la tipografa y los enlaces: podis utilizar amigos, foros y editores profesionales para comprobar los errores tipogrficos y ortogrficos. Mientras esta gente mira las pginas por vosotros, pedidles que comprueben tambin los enlaces para asegurar que funcionan. Una advertencia: a muchos clientes no les gustara nada que sus contenidos sean de dominio pblico antes de estar en activo en la web. En este caso, aadid el coste de un editor a la factura sobre la interfaz de usuario y haced que el editor firme un acuerdo de no divulgacin (NDA*) de manera que sea responsable de la privacidad del contenido de la web.
**
* http://en.wikipedia.org/wiki/ Non-disclosure_agreement
2) Prueba de la validez del cdigo: utilizad los validadores del W3C para comprobar el cdigo HTML* y CSS** cada vez que aadis cdigo nuevo a la web. Sin este paso, el siguiente es un tema discutible, ya que un error de cdigo puede desajustar un diseo web en mltiples navegadores. Puede ser que mientras trabajis, descubris que alguna parte del cdigo que habis creado para la publicidad no valide. Sin embargo, no intentis cambiar el cdigo porque podrais negar el valor de los anuncios generando errores en el cdigo. En vez de ello, muchos diseadores han aprendido a aceptar el hecho de que el cdigo de la publicidad es como es, y no se puede hacer casi nada para cambiarlo. Por suerte, la mayor parte del cdigo publicitario no afectar a la composicin en el siguiente paso.
**
* http://validator.w3.org/ ** http://jigsaw.w3.org/ css-validator/
3) Prueba de compatibilidad de navegadores: quiz os preguntis si deberais ir corriendo a comprar unos cuantos ordenadores diferentes y distintos tamaos de monitor, junto con unos cuantos sistemas operativos diferentes para probar una web. No es necesario. Muy pocos diseadores web pueden permitirse esta extravagancia, de manera que utilizan distintas opciones* para probar la compatibilidad de una web en diferentes navegadores. Estas opciones incluyen descargar
**
* http://afterlight.110mb.com/ 2007/06/07/5-ways-to-test-webpages-across-several-webbrowsers/
65
distintas versiones de un sistema operativo en una mquina, el consejo de amigos y foros, y el uso de servicios que proporcionan capturas de pantalla. Los servicios de captura de pantallas proporcionan bsicamente una instantnea de una pgina web desde varios equipos diferentes.
Con este servicio, podis ver si el tipo de letra es demasiado grande para una resolucin o demasiado pequeo para otra. O quiz descubris si la composicin obliga a un usuario a desplazarse horizontalmente o si habis perdido completamente una columna en otro navegador. Nosotros normalmente utilizamos capturas de pantalla para las pruebas porque las dos primeras opciones han sido cuando menos complicadas. Adems, no nos gusta enviar el trabajo de nuestros clientes si podemos mantener la privacidad de su informacin mediante el uso de servicios de captura de pantallas. Hay servicios gratuitos de captura de webs, pero hemos aprendido que las colas son largas y las opciones para diferentes entornos de pruebas pueden ser limitadas. De manera que hemos invertido una cierta cantidad de dinero en BrowserCam* y este servicio nos ha ido bastante bien durante unos cuantos aos. Este servicio tambin ofrece una prueba gratuita, de modo que podis probar vuestro producto gratuitamente para entender cmo funciona.
**
* http://www.browsercam.com/ Default2.aspx
4) Prueba de usabilidad y accesibilidad: existen una serie de herramientas en lnea* para probar la accesibilidad. Algunas requieren el uso de sonido para poder or cmo una mquina hablante leera su pgina. Otros resultados de las pruebas pueden requerir un sencillo cambio de cdigo o un cambio de colores para ofrecer ms contraste a los usuarios con poca visin. Con respecto a la usabilidad, podis encontrar herramientas y listas de control** en la Red que os ayudarn a garantizar que la web que diseis sea fcil de usar tambin por el mximo nmero de lectores. Estas pruebas son una tarea aburrida y es posible que en el proceso descubris que vuestro bonito diseo sigue siendo bonito en algunos navegadores, pero en otros acaba como unos espaguetis recalentados de la semana pasada. Lo ms importante que cabe recordar es el contenido: mientras sea visible y legible en todos los navegadores, el hecho de que una fraccin de espacio os d problemas en la parte superior del encabezamiento en un navegador determinado no es tan importante. Si la mayora de los usuarios de una web no tienen problemas para acceder a los materiales en lnea de la web que habis diseado, entonces habris cumplido el objetivo que muchos diseadores olvidan a cambio de un diseo que creen que ganar premios.
**
* http://www.rnib.org.uk/xpedio/ groups/public/documents/ PublicWebsite/public_tools.hcsp ** http://www.pantos.org/atw/ 35317.html
Resumen Aunque el color y la composicin son muy atractivos para el diseador, tambin se deben tener en cuenta otros elementos del diseo. La tipografa, las imgenes y la posibilidad de incorporar las necesidades de un cliente con respecto a publicidad y financiacin son elementos importantes en el diseo de
66
una web. Las exigencias planteadas a un diseador para satisfacer los deseos de un cliente, satisfacer las necesidades de unos lectores que piden webs accesibles y usables, y a pesar de todo crear un gran diseo, pueden parecer abrumadoras en ocasiones. Pero todava ms frustrante es la falta de compatibilidad entre diferentes navegadores. Aunque en la ltima dcada se han realizado avances hacia una compatibilidad mayor, se ha de entender que el diseo acabado puede ser diferente en distintos navegadores. Adems, deberais comprender que en algunos navegadores los usuarios pueden cambiar toda una web slo pinchando en un botn. Se pueden eliminar imgenes, cambiar el color de fondo y del texto, y los usuarios pueden ignorar cualquier cosa que incluya JavaScript por pequea que sea. Por otra parte, los avances hacia un entorno ms compatible y una interesante nueva era de funcionalidad web pueden acabar siendo un reto interesante para los diseadores web de hoy. Y hay que pensar que todava no han pasado treinta aos desde que los ordenadores domsticos empezaron a estar ampliamente disponibles en el mercado minorista. Pensad qu puede aportar la prxima dcada para el diseador que se interesa por mantenerse al corriente de todos los cambios.
Preguntas de repaso 1. Cules son los cuatro tipos principales de fuentes? 2. Qu fuentes son mejores para el texto central y por qu? 3. Por qu es importante crear bastante contraste entre el texto central y el fondo del texto? 4. Mencionad como mnimo dos maneras de dividir una pgina llena de texto central. 5. Dad una razn de por qu es buena idea aadir tipografa a una pgina antes de aadir imgenes. 6. Mencionad cuatro tipos de alineacin. 7. Explicad cmo la alineacin puede ayudar a que una web parezca ms limpia. 8. Qu es un NDA y cundo se debe utilizar este documento? 9. Por qu es importante comprobar la ortografa de una web? 10. Mencionad cuatro maneras de probar una web antes de que est en activo.
67
6. La tipografa en la web
Paul Haine
Qu es la tipografa? Para decirlo de una manera sencilla, es el arte, el diseo y la configuracin del texto (al que nos referiremos como tipo). Es un concepto tomado prestado de la impresin tradicional. Se trata tanto de saber aquello que no se debe hacer nunca con el tipo, como de saber qu se debe hacer. En la web, normalmente se presta muy poca atencin a la tipografa y hay algunas limitaciones tecnolgicas que hacen que la tipografa de la web tenga menos posibilidades que la tipografa de la imprenta. No obstante, con las herramientas disponibles no existe ninguna razn por la que el tipo no se pueda presentar en la web en una amplia variedad de formas elegantes y atractivas. En este apartado explicaremos exactamente por qu la tipografa est tan limitada en la web (en comparacin con el diseo de imprenta) y daremos algunos consejos para conseguir una buena tipografa en ella, junto con un ejemplo de una pgina web que demuestra algunos de estos consejos. De momento no es necesario que os preocupis si no entendis el cdigo CSS y HTML; de lo que se trata es de que pensis en el diseo. A medida que vais leyendo el apartado, puede ser una buena idea tener un lpiz o un bolgrafo a mano y una hoja de papel para poder ir esbozando ideas sobre la maquetacin del texto.
6.1. Limitaciones de la tipografa de la web Los diseadores de la imprenta tradicional tienen un montn de posibilidades a su disposicin con respecto a la tipografa, que incluyen toda la gran cantidad de tipos de letras disponibles y muchas opciones para la distribucin del texto. La tipografa de la web es mucho ms limitada, ya que hay que crear el diseo utilizando tipos de letras, distribuciones de texto, etc., que sabemos de entrada que estarn disponibles en los ordenadores de todos los usuarios que naveguen por Internet. No sirve de nada disear la web pensando slo en uno mismo! Algunas de las limitaciones de la tipografa de la web son: Poca variedad de tipo de letra. No se pueden partir palabras, con lo que el texto justificado queda feo para las columnas de texto muy estrechas. Control limitado del interletraje (el espacio entre las letras). Falta de control sobre la visualizacin del resultado final. Los diseadores deben tener en cuenta la gran variedad de dimensiones de pantallas, resoluciones y entornos. A continuacin comentaremos cada uno de estos puntos con ms detalle.
68
6.1.1. Seleccin reducida de tipo de letra La poca variedad de fuentes es normalmente lo primero con lo que os encontraris a la hora de definir el estilo del texto. Aunque podis especificar el tipo de letra que queris en el cdigo CSS, las personas que visiten vuestros sitios web slo vern el texto en este tipo de letra si la tienen instalada en su ordenador; si no la tienen, su navegador utilizar el tipo de letra alternativo que hayis especificado en el CSS o recurrir al tipo de letra por defecto (normalmente, Times New Roman). Puede ser que os guste ver todo el cuerpo de texto con tipos de letra especiales como Trump Medieval o Avant Garde pero, a no ser que vuestro pblico objetivo no tenga una cierta propensin hacia los diseadores, es muy probable que no puedan apreciar nunca vuestros esfuerzos. Por ello, muchos diseadores de webs se limitan a utilizar los tipos de letras disponibles ms habitualmente en todos los sistemas, que normalmente son slo los siguientes: Andale Mono Times New Roman Georgia Verdana Arial/Arial Black Courier/Courier New Trebuchet MS Comic Sans (muchos creen que esta fuente es poco profesional y muy fea; no la utilicis si no es con mucha moderacin y en sitios web destinados a nios) Impact La figura 1 muestra el aspecto de estos tipos de letras.
Figura 1
Los tipos de letras disponibles ms habitualmente en todos los sistemas se limitan a stos.
69
Si especificis cualquiera de los tipos de letra anteriores, tendris muchas posibilidades de que tambin lo tengan la mayora de las personas que os visiten. Microsoft cre seis tipos de letra nuevos diseados para su uso en pantalla en Windows Vista y XP cuyos nombres, curiosamente, empiezan por la letra C. Si las queris utilizar, son Cambria, Calibri, Candara, Consolas, Constantia y Corbel. Sin embargo, nosotros no aconsejaramos su uso porque es muy probable que no estn disponibles en las plataformas Mac o Linux. Por lo tanto, en comparacin con los millares de tipos de letra disponibles para los diseadores grficos, los diseadores de sitios web slo pueden seleccionar entre poco ms de una docena. Pero se trata de una limitacin problemtica? La tipografa es mucho ms que el hecho de seleccionar un tipo de letra atractivo; tambin hay que tener en cuenta las longitudes de lnea, el interletraje y el espacio en blanco. Recordad que los tipgrafos anteriores a las tipografas electrnicas tambin se haban de enfrentar a unas limitaciones similares.
6.1.2. Particin de palabras Cuando se trata de alinear el texto dentro del espacio disponible hay cuatro opciones: alineado a la izquierda, alineado a la derecha, centrado y justificado. El texto justificado, en el que los mrgenes izquierdo y derecho del bloque estn alineados con los lados verticales del espacio que lo contiene, puede tener un aspecto ms atractivo que el texto con un margen irregular y se puede ver mucho en revistas y libros. En la web, sin embargo, esto es problemtico a causa de la falta de la particin de palabras automtica, que en otros soportes rompe las palabras en los puntos apropiados a fin de que encajen mejor dentro de la lnea. Con el fin de justificar el bloque de texto, lo nico que puede hacer el navegador es ajustar el espacio entre las palabras, lo cual puede provocar que aparezcan ros de espacio en blanco que fluyan verticalmente por el bloque de texto; esto suele pasar normalmente cuando la longitud de lnea del bloque de texto es demasiado corta y no hay suficiente espacio para realizar unos ajustes sutiles, tal como muestra la figura 2.
Tal como podis ver en esta figura, el hecho de que no se partan las palabras para cortarlas en los puntos naturales provoca que el espaciado entre algunas palabras llegue a tener unas dimensiones inaceptables. Para evitarlo, en la web la mayora de las veces hay que utilizar el texto alineado a la izquierda.
70
Figura 2
Los ros de espacio en blanco pueden estropear los bloques de texto justificados.
6.1.3. Interletraje El interletraje es el proceso de ajustar el espaciado entre parejas de letras concretas cuando el tipo de letra utilizado es proporcional (como Times New Roman, en el que el espacio entre los caracteres vara segn los caracteres de los que se trate) y no de anchura fija (como Courier, en el que el espacio entre los caracteres es siempre el mismo). El interletraje se utiliza en imprenta para ajustar el espacio entre letras que se alinean de una manera natural, como por ejemplo una W seguida de una A, y puede dar un aspecto ms profesional al texto. Los tipos de letra ms profesionales ya incorporan instrucciones de interletraje con el fin de dar informacin sobre el espaciado al dispositivo que deba reproducir el tipo. La figura 3 muestra la diferencia que representa el uso del interletraje.
Figura 3
El interletraje puede mejorar mucho el aspecto del texto.
En la figura anterior, la primera palabra est imprimida sin el interletraje ajustado. En la segunda palabra, en cambio, se ha reducido el espaciado entre la W y la A, mientras que el espacio entre la A y la S se ha aumentado ligeramente.
71
En la web, es totalmente imposible aplicar el interletraje con este grado de precisin. Lo nico que se le parece un poco es la posibilidad de utilizar el espaciado entre caracteres, lo cual, en el mundo de la impresin, significa ajustar la separacin entre los caracteres en todo el texto, sean cuales sean stos. De esta manera, se puede reducir el espacio entre la W y la A, pero ello tambin afectar al espacio entre todas las otras letras. En la web, el espaciado entre letras se controla con CSS; podemos ver un ejemplo en la figura 4.
Figura 4
En la web no se puede utilizar el interletraje propiamente dicho, lo ms parecido es el espaciado de letra general.
En la figura anterior se ha aumentado el espaciado entre cada uno de los caracteres en la misma medida. Esto ha servido para separar la A y la S, pero ahora el espacio entre la W y A es demasiado grande. A causa de esta caracterstica de todo o nada, es muy difcil utilizar el espaciado de letra con CSS de una manera adecuada; por ello, hay que utilizarlo con mucha moderacin.
6.1.4. Falta de control Despus de todas estas explicaciones sobre el mundo de la imprenta, hay algo muy importante que cabe tener siempre en cuenta, y es que la web no es una imprenta. As que, mientras el diseador grfico no se debe preocupar de si la persona que ve su trabajo redimensiona el texto, de si no tiene los tipos de letra necesarios o de s no ha activado el aliasing, nosotros, sin embargo, s que nos hemos de preocupar, y normalmente caemos en la tentacin de forzar un diseo concreto para el espectador, por ejemplo, definiendo un texto de un tamao rgido, metiendo el texto en un espacio de una anchura y una altura fijas o incluso sustituyendo fragmentos de texto por imgenes. Esta falta de control, sin embargo, no ha de ser necesariamente un problema. Slo es necesario tener en cuenta que la gente querr leer el contenido de la web utilizando muchos dispositivos diferentes con entornos diferentes y de maneras diferentes. Lo que no debis hacer es intentar que no lo hagan o ponerles dificultades. Si quieren leer vuestro contenido lo han de poder hacer de la manera ms sencilla posible. Quiz quieren leer el contenido de la web desde su dispositivo mvil mientras vuelven hacia casa despus del trabajo; quiz prefieren imprimirlo y leerlo en papel y no en la pantalla, o quiz tienen alguna discapacidad visual y deben aumentar el tamao del tipo de letra. Cuando defins el estilo del texto de la web, lo que estis haciendo en realidad es ofrecer una gua para todos los diferentes dispositivos de navegacin sobre cmo prefers que se visualice este texto. Evidentemente, los dispositivos pueden ignorar todo lo que vosotros les decs, pero esto no es ningn problema. Lo que
72
realmente importa es que no intentis imponer decisiones de diseo a todo vuestro pblico.
6.2. Cmo se trabaja la tipografa en la web? La tipografa en la web se controla totalmente con CSS; y con CSS se consigue un control importante: no slo se controla el tamao, el color y el tipo de letra, sino tambin el interlineado, el espaciado de letra, el uso de las maysculas (todo maysculas, maysculas iniciales, versalitas o sin ninguna mayscula) e incluso se controla el estilo de la primera letra o de la primera lnea del texto. Cuando se define el bloque que contiene el texto tambin se controla el grado de justificacin del texto y la longitud de lnea. Y no slo eso; slo es necesario crear unas normas de estilo en un lugar concreto (la hoja de estilo) y despus aplicar estas normas a todo el texto de todo el sitio web (o tambin se puede ser ms especfico y aplicarlas a prrafos o partes concretas de la pgina). Adems, si nunca os encontris con que debis aumentar el tamao del texto de la pgina web, o si debis cambiar el tipo de letra, slo deberis cambiar este valor en la hoja de estilo.
6.3. Algunos consejos rpidos A continuacin encontraris algunos consejos rpidos sobre la tipografa de la web.
6.3.1. Seleccin de una serie de tipos de letra Cuando especifiquis el tipo de letra de pantalla preferido, es aconsejable incluir algunas selecciones alternativas. Es decir, en lugar de especificar slo Georgia, podis especificar Georgia, Cambria, Times New Roman, Times, serif. De esta manera, el navegador intentar en primer lugar utilizar el tipo de letra Georgia, pero si no est instalado lo probar con Cambria, despus con Times New Roman, despus con Times y finalmente con el tipo de letra que el sistema operativo tenga asignado en la palabra clave "serif".
6.3.2. Longitud de lnea Para facilitar la lectura, la longitud de lnea media del texto que se encuentra dentro de un bloque debera ser de 40-60 caracteres por lnea, aunque este valor puede variar mucho en funcin del pblico objetivo (los nios prefieren
73
unas lneas ms cortas y los adultos ms largas). La figura 5 muestra una longitud de lnea ideal:
Figura 5
60 caracteres por lnea, la longitud de lnea ideal.
El texto de esta captura de pantalla tiene aproximadamente unos 60 caracteres por lnea. Si las lneas son ms largas, el lector debe empezar a mover los ojos, o incluso la cabeza, poder seguir el texto, lo cual puede hacer que aumente la fatiga ocular y sea ms difcil asimilar el texto.
6.3.3. Interlineado La interlnea es el espacio vertical que hay entre las lneas; el texto ser ms fcil de leer si esta interlnea es un poco mayor que el valor predeterminado del navegador (esto tambin har que haya espacio disponible para los caracteres de subndice y superndice). La figura 6 muestra la diferencia entre dos prrafos:
Figura 6
La interlnea puede hacer que el aspecto del texto sea muy diferente.
El primer prrafo de la figura anterior tiene la interlnea predeterminada, lo que le da un aspecto un poco apretado. El segundo prrafo tiene una interlnea mayor, con lo cual el texto tiene ms espacio para respirar y es ms fcil de leer. No obstante, una interlnea excesiva tambin har que el texto sea difcil de leer, de modo que hay que ir con cuidado.
6.3.4. Iniciales Si definimos el pseudoelemento first-letter con algo similar a p:firstletter { }, podremos crear un estilo diferente del del resto del texto para la pri-
74
mera letra. Estas primeras letras se conocen normalmente como iniciales, que son unas letras que ocupan el espacio de unas 3 o 4 lneas. Podis ver la figura 7.
Figura 7
Una inicial tpica.
6.3.5. Versalitas A menudo los tipos de letras incorporan una variante en versalitas, que son unas letras en maysculas pero que tienen el tamao de la versin en minsculas. Las versalitas son tiles cuando queremos escribir algo en maysculas pero no queremos destacarlo de una manera excesiva; se pueden utilizar, por ejemplo, para las siglas. Aunque el sistema no tenga ninguna variante en versalitas del tipo de letra especificado, ello no ser ningn problema; el navegador generar su versin propia utilizando las letras en maysculas y reduciendo los caracteres finos aproximadamente 70% de su tamao. La figura 8 muestra una frase en versalitas.
Figura 8
Una frase en versalitas.
6.3.6. Puntuacin libre Si una frase empieza con comillas, se puede utilizar un efecto tipogrfico muy efectivo. Se puede utilizar la propiedad CSS text-indent combinada con un valor negativo (ya sea un valor en ems (-10 em), puntos (-10 pt.), pxeles (-10 px.) o porcentaje (-10%) para desplazar las comillas hacia la izquierda y mantener la lnea vertical izquierda del bloque de texto, tal como se puede ver en la figura 9:
Figura 9
Puntuacin libre.
75
6.3.7. Puntuacin tipogrficamente correcta y otras entidades Se puede dar un aspecto ms profesional y elegante al texto mediante la amplia variedad de entidades tipogrficas HTML disponibles, como las comillas altas o inglesas y los guiones cortos y largos . Muchos programas para la publicacin de textos en bloques y de procesamiento de textos pueden hacerlo automticamente mientras se escribe. Estos programas convierten las comillas rectas en las comillas altas tipogrficamente correctas y convierten las cadenas de guiones en guiones cortos o largos. La figura 10 muestra algunos ejemplos de puntuacin tipogrficamente correcta.
Figura 10
Puntuacin tipogrficamente correcta.
Una vez empecis a rellenar vuestro texto con signos de puntuacin inteligentes, ste adquirir un aspecto mucho ms elegante y profesional, parecer ms el texto de una revista o de un libro que un texto en lnea. Es necesario tener en cuenta, sin embargo, que este tipo de puntuacin podr tener un aspecto un poco pixelado cuando se vea en pantallas un poco viejas o con el aliasing desactivado, por lo que hay que utilizarla con precaucin. Por otra parte, tenemos las entidades, que son cdigos HTML especiales que podis insertar en el texto para generar caracteres especiales que normalmente no estn disponibles desde el teclado. La figura 11 contiene varias entidades:
Figura 11
Entidades HTML.
76
Estas entidades se pueden introducir a mano, pero hay muchos gestores de contenido que permiten convertirlas o insertarlas muy fcilmente.
6.3.8. Destacados Un destacado es un fragmento corto del texto que aparece en algn otro punto de la pgina con caracteres de un tamao mayor y algunas veces tambin con un tipo de letra diferente a fin de que el lector se fije en l. Prcticamente, todas las revistas utilizan los destacados y son una manera muy efectiva de dividir el texto y destacar las citas o las frases ms importantes. Adems, son muy fciles de hacer en la web slo con unas cuantas etiquetas y definiendo el estilo. Slo hay que hacer que el texto tenga un tamao ms grande, quiz definir un tipo de letra diferente, colocarlo de manera que el texto normal lo rodee y listos. Tambin hay algunas soluciones ms avanzadas que utilizan JavaScript para seleccionar el texto y crear automticamente un destacado. Estas soluciones provocan que no haya que escribir el mismo texto dos veces en la etiqueta.
Resumen Ya hemos repasado todo lo que haba que decir sobre la tipografa y la tipografa en la web; esperamos que ahora ya tengis claro que el texto en lnea no debe limitarse a Verdana, small, #333333, sino que existen un montn de recursos y trucos tipogrficos que os pueden ayudar a hacer que el texto destaque por encima del resto. La gente visita bsicamente los sitios web para leer lo que han escrito sus autores; por lo tanto, lo ms sensato es hacer que la lectura sea tan agradable como sea posible.
Preguntas de repaso 1. Qu diferencia existe entre el interletraje y el espaciado entre letras? Cul est disponible para el diseador de webs? 2. Cmo se puede evitar que haya ros de espacio en blanco en medio del texto? 3. Nombrad cuatro usos diferentes de las maysculas disponibles con CSS. 4. Cul es la longitud de lnea ideal para el cuerpo del texto, y qu factores le afectan? 5. Qu diferencia hay entre un tipo de letra con serif y un tipo de letra de palo seco? Dad un ejemplo de cada uno.
77
6. Qu diferencia hay entre la puntuacin libre y la puntuacin normal? 7. Para insertar un smbolo de copyright dentro del texto se utiliza una entidad HTML. Navegad por Internet e intentad encontrar todas las otras entidades HTML. Hay unas 250!

M2 Conceptos

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

M2 Conceptos

Enviado por

Direitos autorais:

Formatos disponíveis

Conceptos de diseo web

Mark Norman Francis Linda Goin Paul Haine Jonathan Lane

Conceptos de diseo web

Conceptos de diseo web

Conceptos de diseo web

Conceptos de diseo web

Conceptos de diseo web

Conceptos de diseo web

1. Arquitectura de la informacin: planificacin de una web

1.1. Debis planificar la web que queris crear

1.1.1. Presentacin de The Dung Beatles

Conceptos de diseo web

Conceptos de diseo web

Lo que quieren los visitantes de la web.

1.1.2. Y ahora qu? Trazado del mapa de la web

Conceptos de diseo web

Primera versin de la estructura de la web.

Conceptos de diseo web

Estructura de la web, revisada.

Conceptos de diseo web

1.1.3. Nombres para las pginas

1.1.4. Adicin de algunos detalles

Conceptos de diseo web

Informacin de la pgina de inicio.

Conceptos de diseo web

Conceptos de diseo web

2. Qu necesita una buena pgina web?

La pgina de inicio de MSN: hay un montn de cosas!.

Conceptos de diseo web

* http://www.nytimes.com/2007/ 09/18/business/media/ 18times.html

Ahora profundizaremos un poco ms y aprenderemos ms sobre estos aspectos...

Conceptos de diseo web

Conceptos de diseo web

La navegacin de dev.opera* es constante estis donde estis en la web.

Conceptos de diseo web

2.4.1. Contenido relevante

Conceptos de diseo web

Conceptos de diseo web

Conceptos de diseo web

Conceptos de diseo web

3. Teora del color

Los colores primarios y secundarios, y sus equivalentes hexadecimales.

Conceptos de diseo web

Una rueda de colores real.

Conceptos de diseo web

Color Scheme Generator II.

Conceptos de diseo web

ce en una combinacin de colores monocromtica, como se puede ver en la figura 4.

Una combinacin de colores monocromtica.

Ejemplos de combinaciones de colores complementarios.

Conceptos de diseo web

Una combinacin de colores complementarios en la herramienta de colores en lnea.

La web de Greenpeace es un buen ejemplo de combinacin de colores complementarios.

Conceptos de diseo web

Colores clidos (warm) y colores fros (cold).

Ecolution, un buen ejemplo de colores clidos/fros.

Conceptos de diseo web

Una combinacin de colores tridica.

Una combinacin de colores tridica alternativa.

Conceptos de diseo web

Puzzle Pirates, una buena combinacin de colores tridica.

Conceptos de diseo web

Combinaciones de colores tetrdicas.

* http://filezilla-project.org/ http://fireftp.mozdev.org/ * http://www.cuteftp.com/

* http://www.istockphoto.com/ index.php http://www.comstock.com/ web/default.asp * http://www.templetons.com/ brad/copymyths.html