Desde los inicios de la World Wide Web, tanto el diseo de las pginas como de la propia estructura de los hiperdocumentos,

ha variado enormemente. Si al principio, los hipertextos en la Web se limitaban a plasmar, sobre este nuevo medio, un texto impreso segmentndolo en pequeos bloques y colocando aqu y all algunos enlaces, en la actualidad, las pginas web se han convertido en verdaderas obras de diseo grfico, multimedia e ingeniera informtica. Integracin de bases de datos, servicios online, inclusin de sofisticadas herramientas de bsqueda y recuperacin de informacin, dinamismo, usabilidad e interactividad, stas son las claves de las pginas web actuales. Ya no importa slo el contenido presentado, sino su diseo y, sobre todo, su funcionalidad. En 1997, David Siegel en Tcnicas avanzadas para el diseo de pginas web distingua 3 generaciones en el desarrollo de las interfaces de la WWW: Webs de primera generacin: o estructura lineal o eventual insercin de fotografas y lneas de separacin o baja definicin (proyectados para terminales ASCII en blanco y negro) Webs de segunda generacin: o iconos en vez de palabras subrayadas con azul o men de opciones o fondos coloreados o con imgenes o bordes azules alrededor de las figuras interactivas Webs de tercera generacin: o hegemona del diseo sobre la tecnologa o utilizacin de metforas o uso de un layout tipogrfico y visual para la descripcin de una pgina bidimensional o estructura entrada -rea central- salida

Sin embargo, hoy podemos hablar de una cuarta generacin de webs en las que prima tanto el diseo grfico como la tecnologa. Loswebmasters ya no son slo diseadores grficos, sino expertos informticos que han de conocer los nuevos lenguajes, dominar las nuevas herramientas de programacin, conectividad a base de datos, seguridad, etc. El hipertexto ya no es una coleccin de textos enlazados, sino un espacio de intercambio de servicios de todo tipo: culturales, informativos, comerciales, sociales, etc. Francisco Tosete Herranz en La experiencia del usuario resume en la siguiente imagen, en forma de rueda, todas las disciplinas implicadas en el diseo de sitios web: arquitectura de la informacin: misin y objetivos estratgicos, clientes y sus expectativas, estudio

sectorial/anlisis competitivo, definicin y organizacin de los contenidos, interaccin, navegacin, rotulado, bsqueda, prototipado, etc. diseo de la interaccin: definicin de servicios, definicin de las tareas, diagrama de interaccin, storyboards, etc. usabilidad: mtodos de indagacin, mtodos de inspeccin, test de usabilidad, anlisis de logs, etc. accesibilidad: directrices y pautas de accesibilidad, test de accesibilidad, etc. diseo de la informacin/diseo grfico: aspectos y sensacin, diseo de contenido/pgina, diseo de la interfaz, diseo artstico/creativo, etc. programacin y tecnologas: hardware/software, estndares web, etc.

Fuente: Tosete Herranz, Francisco. La experiencia del usuario. En "Arquitectura de la Informacin para el diseo de sedes

Francisco Tosete fija el proceso de diseo de sitios web, en Arquitectura de la informacin: : abarca aspectos como la definicin de la finalidad del web, objetivos, expectativas y necesidades de los usuarios, estudio del sector y definicin de audiencias, identificacin y recopilacin del contenido, definicin de los servicios y funcionalidades. engloba todos los aspectos referidos al rotulado y organizacin de categoras; organizacin del sitio mediante un mapa, esquemas de organizacin y estructura de directorios; aspectos referentes a la buscabilidad como eleccin del motor de bsqueda y la poltica de indizacin de contenidos, metainformacin y metaestructuras. abarca las cuestiones referidas al prototipado como el diseo de prototipos y patrones, al estilo y diseo de la imagen grfica, a los aspectos relacionados con la usabilidad y accesibilidad. Una vez lanzado el producto, se proceder al seguimiento y anlisis mediante su posicionamiento en buscadores, feedback y medicin de resultados y propuestas de rediseo.
fundamentos del diseo de sedes en la World Wide Web, establece los siguientes aspectos a tener en cuenta en el diseo de una sede web: informacin: contenidos.

gestin: estructura, organizacin, esquemas. disposicin y presentacin: acceso, bsqueda, recuperacin y consultas. Y, por lo tanto, una sede web tendra que contar son los siguientes componentes: definicin de la sede: misin, objetivos y estrategias. Cules son la razones que tiene la organizacin para producirla? Por qu est aqu el usuario? gestin de los contenidos: identificacin, recopilacin, seleccin, produccin, mantenimiento y actualizacin de los contenidos. El contenido es la base de la sede, los usuarios acceden a la sede por el contenido o por los servicios. Para este autor, la clave del sitio web est en potenciar los contenidos, debe haber como mnimo un 30% de espacio en la web dedicado a contenidos.

sistemas de navegacin: para facilitar el desplazamiento por la sede y el acceso a los contenidos. La Web es interaccin, movimiento, accin, toma de decisiones y asimilacin. Un sistema de navegacin evita la desorientacin y el desbordamiento cognitivo. Hay que dotar al sistema de consistencia, predecibilidad y retroactividad. sistemas de rotulado: su funcin es representar, describir y transmitir de forma sinttica los contenidos. Los rtulos deben ser concisos y significativos para que el usuario comprenda con claridad y rapidez la informacin que hay detrs de ellos para tomar una decisin. El lenguaje ha de ser prximo al usuario, por eso surge una tensin entre los lenguajes controlados (lenguajes de clasificacin jerrquicos/ facetados, tesauros) y los lenguajes naturales. El sistema de rotulado tambin se ocupa de los microcontenidos, metadatos y marcado. sistemas de bsqueda: par facilitar la exploracin, el acceso y la recuperacin de informacin. Permiten expresar las consultas en lenguaje natural y acceder a los contenidos sin navegar por un gran nmero de seccione intermedias. Son complementarios y nos sustitutivos de la navegacin. Para disearlos hay que tener en cuenta las caractersticas del motor de bsqueda (operadores, capacidades de indizacin, personalizacin, funciones de feedback y ayuda automtica), el tipo de indizacin de los contenidos y la presentacin de los resultados.

etapas para el diseo Web: Delimitacin del tema: de qu va a tratar el sitio web. Delimitacin de contenidos. Recoleccin de la informacin: recopilar y seleccionar la informacin que se va a incluir. Agregacin: hacer un balance equilibrado entre linealidad y jerarquizacin. Creacin de pginas, nodos, secciones y subsecciones. Estructuracin de los contenidos: unin de los diferentes nodos y pginas teniendo en cuenta la jerarquizacin y ordenacin de los contenidos. Creacin de nodos de metainformacin sobre otros nodos y enlaces que permitan la estructuracin horizontal y vertical. Creacin de la pgina inicial y de las pginas principales. En esta etapa se definen tanto las estructuras jerrquicas y horizontales, como las taxonomas y esquemas de clasificacin. Creacin de los sistemas de navegacin y bsqueda: creacin de pginas gua, ayudas a la navegacin, tablas de contenido, ndices, sumarios, mapas de navegacin, glosarios, pginas de bsqueda, uso de iconos y barras de navegacin, utilizacin de metforas, etc. accesibles desde cualquier otra pgina del sitio web. Diseo y estilo grfico: estilos y formatos textuales, coherencia grfica, diseo de fondos y distribucin de los elementos dentro de la pgina, inclusin de material multimedia, cantidad y tamao de las imgenes, etc. Dar homogeneidad y coherencia a todo el sitio web. Utilizar metforas orgnicas, funcionales y visuales.

Ensamblaje final: ltimos enlaces, diseo de portadas y estilos grficos, logotipos, enlaces sobre autora, contacto, fechas de creacin o de actualizaciones, etc. Evaluacin y test de uso: comprobacin del funcionamiento, vnculos y pginas rotas, usabilidad, accesibilidad, ltimos ajustes, etc.

En el diseo de un sitio web, podemos distinguir 2 aspectos diferenciados: Diseo de la interfaz: para guiar al usuario por medio de un sistema visual e informativo adecuado. Para ello hay que disponer la interaccin con metforas, imgenes y conceptos que puedan transmitir significados a travs de la pantalla del ordenador.

Diseo de las pginas: disposicin de los elementos dentro de las pginas para ser vistos en pantalla, esquemas de

contenido, tipografa, rotulado, ttulos, disposicin de las imgenes y del contenido multimedia, equilibrio entre el contenido textual y grfico, y la sensacin visual, etc.

El proceso de diseo del sitio web abarca muchos y diferentes aspectos como son: Estructuracin del conocimiento: delimitar el mbito disciplinar, corpus de conocimiento y tema sobre el que vamos a tratar de acuerdo con el fin perseguido: informar, investigar, educar, vender, etc. La estructuracin del conocimiento en la web permite convertir la tradicional estructura secuencial en una estructura multisecuencial, por tanto, se atender pues ms a las relaciones entre conocimientos que a la informacin aislada. Estructuracin de la informacin: para ello se debe fragmentar la informacin en nodos que posteriormente se organizarn estableciendo distintas categoras que atiendan a diferentes aspectos: relaciones jerrquicas, cronolgicas, secuenciales, espaciales, etc. Adems de los nodos, se precisa la creacin de metanodos con informacin sobre otros nodos: sumarios, ndices, tablas de contenido, etc. Planteamiento general del diseo: hay que utilizar criterios de accesibilidad, plantearse el tipo servicios y funcionalidades que se van a ofrecer y con qu fin, y cmo se van a presentar al usuario, es decir, disear su usabilidad. La finalidad del sitio web debe condicionar la interfaz para adaptarse a las expectativas del usuario (un sitio de ocio no puede tener un diseo serio, poco atractivo y aburrido), pero la interfaz debe ser, ante todo, funcional. Organizar la informacin: hay que dotar al sitio de una buena organizacin para que el usuario pueda localizar lo que busca de la forma ms fcil, clara e intuitiva posible. Se deben crear tablas de contenido, ndices, diferentes secciones con ttulos significativos, etc.

Tipos de informacin e interfaz de usuario: disposicin de la pgina en la pantalla (utilizacin de marcos o frames,

distribucin de los contenidos, colores, fondos, presencia de logotipos, etc.); elementos textuales (determinar la amplitud de cada uno de ellos, seleccin de la informacin, palabras clave, enlaces, formatos y estilos de letra); seleccin y elaboracin de grficos; inclusin y uso de audio, vdeo y animaciones; seleccin de iconos, botones, barras de mens; presencia de campos de ayuda para la orientacin del usuario, etc. Interrelacin entre la informacin: estructuracin de los nodos de texto, audio, vdeo e interconexin de todas estas morfologas para convertir el hipertexto en hipermedia; establecimiento de enlaces entre documentos, partes de documentos, fragmentos de informacin, etc. dentro del propio documento y fuera de l.

Creacin de un sistema de navegacin: que posibilite una navegacin simple, intuitiva, consistente, transparente y flexible.

Se trata de interrelacionar la informacin y la interfaz. Se pueden elaborar una gran nmero de herramientas que ayuden a la navegacin en forma de botones, barras de navegacin, uso de metforas, mapas sensibles, FAQ o Preguntas ms frecuentes (Frequently Asked Question) que faciliten la navegacin y la hagan comprensible. Todas estas herramientas son imprescindibles si se trata de documentos largos y complejos en los que el peligro de prdida del contexto aumenta cuando el usuario se aleja de la pgina principal y se adentra por las ramas inferiores de una estructura profunda o demasiado amplia. Creacin de un sistema de bsqueda y recuperacin: Para ello es necesario el uso de herramientas de representacin de la informacin (metadatos, mtodos de indizacin, etc.), formas de presentacin de las consultas y los resultados, y otras herramientas de recuperacin y bsqueda tanto de la informacin interna como externa. Se pueden incorporar motores de bsqueda para que rastreen dentro del propio documento y/o en toda la World Wide El tipo de relacin entre los documentos: normas que indican qu documentos pueden relacionarse, lugares dentro del documento en donde se deben encontrar esas relaciones (en todo el documento o en una parte del mismo), presentacin visual de enlaces, etc.

El acceso a los documentos: recomendaciones para el uso del hipertexto en la bsqueda de informacin, etc. Los editores web actuales permiten automatizar una serie de tareas que antes constituan una afanosa labor, como la creacin automtica de tablas de contenido y herramientas de bsqueda, creacin de barras de navegacin y exploracin o botones con enlaces de trayectoria vertical y horizontal (de pginas primarias a secundarias y viceversa, de orden secuencial anteriorsiguiente-arriba, etc.) siguiendo el rbol y jerarquas establecidas en la estructura, etc. Al transferir textos impresos a hipertexto, la primera operacin que hay que realizar es convertir un texto completo en pequeos bloques de texto (o nodos) que luego uniremos en mltiples trayectos o recorridos mediante los enlaces. Sin embargo, este es slo un primer paso. El diseo de un hipertexto es una labor muy compleja. Los editores de pginas web que, en realidad, son sistemas de gestin de hipertextos, nos facilitan esta labor. palabras claves, referencias bibliogrficas, etc. Estas obras no se leen pgina a pgina y el hipertexto permite hojear los bloques de informacin ayudado por la estructura de navegacin y las bsquedas directas. Un buen hipertexto tiene que ofrecer al usuario una estructura de navegacin fcil de manejar, la fragmentacin de la informacin en bloques debe tener sentido en s misma y la estructuracin de los bloques de informacin por medio de los enlaces deber ser coherente conceptualmente. El autor de un sitio web debe ofrecer al usuario toda la estructura y la infraestructura necesaria para facilitar la exploracin, la navegacin y las bsquedas mediante un lenguaje de fcil comprensin y utilizacin por el lector. El diseo de la pgina principal es clave ya que es el primer sitio al que accede el usuario y esta primera impresin, tanto en relacin al diseo como a la informacin en ella ofrecida, condicionar al usuario para que sienta o no la necesidad de adentrarse en el sitio.

Tambin es un aspecto clave a tener en cuenta que, en la Web, el lector puede convertirse en lector activo, y pasar de ser lector a ser usuario si se incluyen las herramientas adecuadas para que este usuario interacte no slo con los contenidos, sino con el propio autor del sitio web (por medio de un formulario, un e-mail de contacto, etc.), o con otros usuarios a travs del establecimiento de un foro o una discusin en lnea, un chat dentro del propio sitio web, etc. Y, por supuesto, una vez creado un sitio web, lo ms importante es darlo a conocer. Esta labor se realiza dando de alta el sitio en los principales buscadores e incluyendo metadatos para que los principales robots y agentes indicen nuestras pginas. En resumen, los webmasters actuales deben aunar diferentes disciplinas a la hora de disear un sitio web, ya que la aproximacin al diseo del sitio se debe hacer, entre otras, desde mltiples perspectivas: cognoscitiva, conceptual, ergonmica (caractersticas del diseo, la dotacin fsica y el software lgico), funcional (qu servicios queremos ofrecer, etc.) y teniendo en cuenta ciertas condiciones de accesibilidad, usabilidad, diseo grfico, diseo de la interaccin, etc. Como dato curioso, podemos consultar la Gua de estilo para hipertexto en lnea escrita por Tim Berners Lee en los primeros das de la World Wide Web: Style Guide for online hypertext (http://www.w3.org/Provider/Style/) En esta Gua, se definen trminos como websmaster, la convencin "www.xxx.com", y unos puntos bsicos que hoy todava son vlidos. El documento no ha sido actualizado siguiendo los desarrollos del lenguaje HTML y otros lenguajes, por lo que est desactualizado en muchos mbitos, pero precisamente por esta razn, se considera un documento histrico. Y al igual que las pelculas cinematogrficas, las webs tambin tienen sus oscars, pues la International Academy of Digital Arts and Sciences convoca anualmente los premios Webby Awards a lo mejor de la World Wide Web, que premian la excelencia en el diseo web, la creatividad y la funcionalidad: http://www.webbyawards.com/webbys/index.php

CMAPTOOL