Ingeniera informtica

Materia: Herramientas Web

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:
Estructura lineal
Eventual insercin de fotografas y lneas de separacin
Baja definicin (proyectados para terminales ascii en blanco y negro)
Webs de segunda generacin:
Iconos en vez de palabras subrayadas con azul
Men de opciones
Fondos coloreados o con imgenes
Bordes azules alrededor de las figuras interactivas
Webs de tercera generacin:
Hegemona del diseo sobre la tecnologa
Utilizacin de metforas
Uso de un layout tipogrfico y visual para la descripcin de una pgina bidimensional
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. Los webmasters 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.
Son muchos los factores que hay que tener en cuenta a la hora de disear un sitio web. Sin
embargo, dos factores destacan sobre los dems: su contenido y el diseo de la interfaz. Los
arquitectos de la informacin se ocupan ahora del diseo centrado tanto en el uso, como en
el usuario para hacerle a ste las tareas lo ms sencillas posibles.
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.
En el diseo de una 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. Se debe elegir un
modelo y conservar la integridad, uniformidad y coherencia de ese diseo a lo largo de
todo el hiperdocumento. El diseo de la interfaz grfica engloba conceptos y nociones
provenientes de diferentes campos y disciplinas como el diseo grfico, la informtica, los
sistemas audiovisuales, la psicologa cognitiva, ergonoma, etc.
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. Para esta fase es muy til la utilizacin de mapas conceptuales, no slo para el
diseo, sino con el fin de integrarlos dentro del propio hipertexto a modo de mapa de
navegacin junto a otras herramientas de navegacin. Una de las ventajas que ofrece el hipertexto
es la posibilidad de organizar la informacin de ms de una forma, dejando al usuario la eleccin
de en qu modo acceder a ella, por lo tanto, se pueden conjugar varios criterios de organizacin y
ofrecer al usuario distintas formas de acceso para que elija la forma que le sea ms cmoda o la
ms adecuada para los fines que persigue. La web permite una estructuracin de la informacin
modular y descentralizada que por medio de los enlaces se podrn conexionar a otros mdulos,
atendiendo a diferentes perspectivas.
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. Hay que simplificar el
contenido y no mezclar varios temas en una misma pgina, jerarquizar la informacin no slo
dentro del propio hipertexto, sino dentro de la propia pgina colocando la informacin ms
importante en las ramas superiores o en la parte superior de la pgina dejando la informacin
complementaria o ms detallada para el final o para las ramas ms bajas, agrupar las opciones
importantes en la misma pgina, no ampliar el nmero de opciones en cada nivel hasta la
extenuacin. La organizacin de la informacin debe anticiparse en todo momento a los deseos
del usuario y a las tareas ms frecuentes para que el usuario llegue antes a ellas.
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 enlacesentre 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 Web.

Referencias:
DAVIS, Jack. MERRIT, Susan. Diseo de pginas web. Soluciones creativas para la
comunicacin en pantalla. Madrid, Anaya Multimedia, 1999.
FERNNDEZ-COCA, Antonio. Produccin y diseo grfico para WWW. Barcelona, Paids,
1998.
MARCOS, Mari Carmen. Interaccin en interfaces de recuperacin de informacin:
conceptos, metforas y visualizacin. Gijn, Trea, 2004.
SIEGEL, David. Tcnicas avanzadas para el diseo de pginas web. Madrid, Anaya
Multimedia, 1997
Desarrollo Web. http://www.desarrolloweb.com