Diseño de una página web

María Jesús Lamarca Lapuente. Hipertexto: El nuevo concepto de documento en la cultura de la imagen.

Inicio      navega al azar mapa conceptual  buscar

Desde los inicios de la World Wide Web, tanto el diseño de las páginas 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 segmentándolo en pequeños bloques y colocando aquí y allá algunos enlaces, en la actualidad, las páginas web se han convertido en verdaderas obras de diseño gráfico, multimedia e ingeniería informática. Integración de bases de datos, servicios online, inclusión de sofisticadas herramientas de búsqueda y recuperación de información, dinamismo, usabilidad e interactividad, éstas son las claves de las páginas web actuales. Ya no importa sólo el contenido presentado, sino su diseño y, sobre todo, su funcionalidad.

En 1997, David Siegel en Técnicas avanzadas para el diseño de páginas web distinguía 3 generaciones en el desarrollo de las interfaces de la WWW:

  •  Webs de primera generación:
    • estructura lineal
    • eventual inserción de fotografías y líneas de separación
    • baja definición (proyectados para terminales ASCII en blanco y negro)
  •  Webs de segunda generación:
    • iconos en vez de palabras subrayadas con azul
    • menú de opciones
    • fondos coloreados o con imágenes
    • bordes azules alrededor de las figuras interactivas
  •  Webs de tercera generación:
    • hegemonía del diseño sobre la tecnología
    • utilización de metáforas
    • uso de un layout tipográfico y visual para la descripción de una página bidimensional
    • estructura entrada -área central- salida

Sin embargo, hoy podemos hablar de una cuarta generación de webs en las que prima tanto el diseño gráfico como la tecnología. Los webmasters ya no son sólo diseñadores gráficos, sino expertos informáticos que han de conocer los nuevos lenguajes, dominar las nuevas herramientas de programación, conectividad a base de datos, seguridad, etc. El hipertexto ya no es una colección 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 diseñar un sitio web. Sin embargo, dos factores destacan sobre los demás: su contenido y el diseño de la interfaz. Los arquitectos de la información se ocupan ahora del diseño centrado tanto en el uso, como en el usuario para hacerle a éste las tareas lo más 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 diseño de sitios web:

  •  arquitectura de la información: misión y objetivos estratégicos, clientes y sus expectativas, estudio sectorial/análisis competitivo, definición y organización de los contenidos, interacción, navegación, rotulado, búsqueda, prototipado, etc.

  •  diseño de la interacción: definición de servicios, definición de las tareas, diagrama de interacción, storyboards, etc.

  •  usabilidad: métodos de indagación, métodos de inspección, test de usabilidad, análisis de logs, etc.

  •  accesibilidad: directrices y pautas de accesibilidad, test de accesibilidad, etc.

  •  diseño de la información/diseño gráfico: aspectos y sensación, diseño de contenido/página, diseño de la interfaz, diseño artístico/creativo, etc.

  •  programación  y tecnologías: hardware/software, estándares web, etc.

rueda de la experiencia del usuario Tosete Herranz

Fuente: Tosete Herranz, Francisco. La experiencia del usuario.
En "Arquitectura de la Información para el diseño de sedes web.
http://www.imaginas.net/esquemas.htm#experienciausuario

La World Wide Web ya no se entiende como un macrotexto, sino como un espacio de relación y de servicios de todo tipo. Quizás haya triunfado la visión mercantil de la Web como un hipermercado global para hacer negocios, pero a la par, se han desarrollado otros servicios con fines menos crematísticos y con un enfoque centrado en la transmisión de conocimientos, la puesta en común y el desarrollo colaborativo para crear cultura, pensamiento, ciencia, saber y, en suma, conocimiento.

Francisco Tosete fija el proceso de diseño de sitios web, en Arquitectura de la información:

  •  Definición: abarca aspectos como la definición de la finalidad del web, objetivos, expectativas y necesidades de los usuarios, estudio del sector y definición de audiencias, identificación y recopilación del contenido, definición de los servicios y funcionalidades.

  •  Estructuración: engloba todos los aspectos referidos al rotulado y organización de categorías; organización del sitio mediante un mapa, esquemas de organización y estructura de directorios; aspectos referentes a la buscabilidad como elección del motor de búsqueda y la política de indización de contenidos, metainformación y metaestructuras.

  •  Producción: abarca las cuestiones referidas al prototipado como el diseño de prototipos y patrones, al estilo y diseño de la imagen gráfica, a los aspectos relacionados con la usabilidad y accesibilidad. Una vez lanzado el producto, se procederá al seguimiento y análisis mediante su posicionamiento en buscadores, feedback y medición de resultados y propuestas de rediseño.

Este mismo autor, en Arquitectura de la información: fundamentos del diseño de sedes en la World Wide Web, establece los siguientes aspectos a tener en cuenta en el diseño de una sede web

  •  información: contenidos.

  •  gestión: estructura, organización, esquemas.

  •  disposición y presentación: acceso, búsqueda, recuperación y consultas.

Y, por lo tanto, una sede web tendría que contar son los siguientes componentes:

  •  definición de la sede: misión, objetivos y estrategias. ¿Cuáles son la razones que tiene la organización para producirla? ¿Por qué está aquí el usuario?

  •  gestión de los contenidos: identificación, recopilación, selección, producción, mantenimiento y actualización 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 mínimo un 30% de espacio en la web dedicado a contenidos.

  •  sistemas de navegación: para facilitar el desplazamiento por la sede y el acceso a los contenidos. La Web es interacción, movimiento, acción, toma de decisiones y asimilación. Un sistema de navegación evita la desorientación y el desbordamiento cognitivo. Hay que dotar al sistema de consistencia, predecibilidad y retroactividad.

  •  sistemas de rotulado: su función es representar, describir y transmitir de forma sintética los contenidos. Los rótulos deben ser concisos y significativos para que el usuario comprenda con claridad y rapidez la información que hay detrás de ellos para tomar una decisión. El lenguaje ha de ser próximo al usuario, por eso surge una tensión entre los lenguajes controlados (lenguajes de clasificación jerárquicos/ facetados, tesauros) y los lenguajes naturales. El sistema de rotulado también se ocupa de los microcontenidos, metadatos y marcado.

  •  sistemas de búsqueda: par facilitar la exploración, el acceso y la recuperación de información. Permiten expresar las consultas en lenguaje natural y acceder a los contenidos sin navegar por un gran número de seccione intermedias. Son complementarios y nos sustitutivos de la navegación. Para diseñarlos hay que tener en cuenta las características del motor de búsqueda (operadores, capacidades de indización, personalización, funciones de feedback y ayuda automática), el tipo de indización de los contenidos y la presentación de los resultados.

Así pues, antes de elaborar cualquier sitio web, es preciso seguir un plan ordenado. Se pueden establecer las siguientes etapas para el diseño Web:

  •  Delimitación del tema: de qué va a tratar el sitio web. Delimitación de contenidos.

  •  Recolección de la información: recopilar y seleccionar la información que se va a incluir.

  •  Agregación: hacer un balance equilibrado entre linealidad y jerarquización. Creación de páginas, nodos, secciones y subsecciones.

  •  Estructuración de los contenidos: unión de los diferentes nodos y páginas teniendo en cuenta la jerarquización y ordenación de los contenidos. Creación de nodos de metainformación sobre otros nodos y enlaces que permitan la estructuración horizontal y vertical. Creación de la página inicial y de las páginas  principales. En esta etapa se definen tanto las estructuras jerárquicas y horizontales, como las taxonomías y esquemas de clasificación.

  •  Creación de los sistemas de navegación y búsqueda: creación de páginas guía, ayudas a la navegación, tablas de contenido, índices, sumarios, mapas de navegación, glosarios, páginas de búsqueda, uso de iconos y barras de navegación, utilización de metáforas, etc. accesibles desde cualquier otra página del sitio web.

  •  Diseño y estilo gráfico: estilos y formatos textuales, coherencia gráfica, diseño de fondos y distribución de los elementos dentro de la página, inclusión de material multimedia, cantidad y tamaño de las imágenes, etc. Dar homogeneidad y coherencia a todo el sitio web. Utilizar metáforas orgánicas, funcionales y visuales.

  •  Ensamblaje final: últimos enlaces, diseño de portadas y estilos gráficos, logotipos, enlaces sobre autoría, contacto, fechas de creación o de actualizaciones, etc.

  •  Evaluación y test de uso: comprobación del funcionamiento, vínculos y páginas rotas, usabilidad, accesibilidad, últimos ajustes, etc.

En el diseño de una sitio web, podemos distinguir 2 aspectos diferenciados:

  •  Diseño de la interfaz: para guiar al usuario por medio de un sistema visual e informativo adecuado. Para ello hay que disponer la interacción con metáforas, imágenes y conceptos que puedan transmitir significados a través de la pantalla del ordenador. Se debe elegir un modelo y conservar la integridad, uniformidad y coherencia de ese diseño a lo largo de todo el hiperdocumento. El diseño de la interfaz gráfica engloba conceptos y nociones provenientes de diferentes campos y disciplinas como el diseño gráfico, la informática, los sistemas audiovisuales, la psicología cognitiva, ergonomía,  etc.

  •  Diseño de las páginas: disposición de los elementos dentro de las páginas para ser vistos en pantalla, esquemas de contenido, tipografía, rotulado, títulos, disposición de las imágenes y del contenido multimedia, equilibrio entre el contenido textual y gráfico, y la sensación visual, etc.

El proceso de diseño del sitio web abarca muchos y diferentes aspectos como son:

  •  Estructuración 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 estructuración del conocimiento en la web permite convertir la tradicional estructura secuencial en una estructura multisecuencial, por tanto, se atenderá pues más a las relaciones entre conocimientos que a la información aislada.

  •  Estructuración de la información: para ello se debe fragmentar la información en nodos que posteriormente se organizarán estableciendo distintas categorías que atiendan a diferentes aspectos: relaciones jerárquicas, cronológicas, secuenciales, espaciales, etc. Además de los nodos, se precisa la creación de metanodos con información sobre otros nodos: sumarios, índices, tablas de contenido, etc. Para esta fase es muy útil la utilización de mapas conceptuales, no sólo para el diseño, sino con el fin de integrarlos dentro del propio hipertexto a modo de mapa de navegación junto a otras herramientas de navegación. Una de las ventajas que ofrece el hipertexto es la posibilidad de organizar la información de más de una forma, dejando al usuario la elección de en qué modo acceder a ella, por lo tanto, se pueden conjugar varios criterios de organización y ofrecer al usuario distintas formas de acceso para que elija la forma que le sea más cómoda o la más adecuada para los fines que persigue. La web permite una estructuración de la información modular y descentralizada que por medio de los enlaces se podrán conexionar a otros módulos, atendiendo a diferentes perspectivas.

  •  Planteamiento general del diseño: hay que utilizar criterios de accesibilidad, plantearse el tipo servicios y funcionalidades que se van a ofrecer y con qué fin, y cómo se van a presentar al usuario, es decir, diseñar 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 diseño serio, poco atractivo y aburrido), pero la interfaz debe ser, ante todo, funcional.

  •  Organizar la información: hay que dotar al sitio de una buena organización para que el usuario pueda localizar lo que busca de la forma más fácil, clara e intuitiva posible. Se deben crear tablas de contenido, índices, diferentes secciones con títulos significativos, etc.  Hay que simplificar el contenido y no mezclar varios temas en una misma página, jerarquizar la información no sólo dentro del propio hipertexto, sino dentro de la propia página colocando la información más importante en las ramas superiores o en la parte superior de la página dejando la información complementaria o más detallada para el final o para las ramas más bajas, agrupar las opciones importantes en la misma página, no ampliar el número de opciones en cada nivel hasta la extenuación. La organización de la información debe anticiparse en todo momento a los deseos del usuario y a las tareas más frecuentes para que el usuario llegue antes a ellas. 

  •  Tipos de información e interfaz de usuario: disposición de la página en la pantalla (utilización de marcos o frames, distribución de los contenidos, colores, fondos, presencia de logotipos, etc.); elementos textuales (determinar la amplitud de cada uno de ellos, selección de la información, palabras clave, enlaces, formatos y estilos de letra); selección y elaboración de gráficos; inclusión y uso de audio, vídeo y animaciones; selección de iconos, botones, barras de menús; presencia de campos de ayuda para la orientación del usuario, etc.

  •  Interrelación entre la información: estructuración de los nodos de texto, audio, vídeo e interconexión de todas estas morfologías para convertir el hipertexto en hipermedia; establecimiento de enlaces entre documentos, partes de documentos, fragmentos de información, etc. dentro del propio documento y fuera de él.

  •  Creación de un sistema de navegación: que posibilite una navegación simple, intuitiva, consistente, transparente y flexible. Se trata de interrelacionar la información y la interfaz. Se pueden elaborar una gran número de herramientas que ayuden a la navegación en forma de botones, barras de navegación, uso de metáforas, mapas sensibles, FAQ o Preguntas más frecuentes (Frequently Asked Question) que faciliten la navegación y la hagan comprensible. Todas estas herramientas son imprescindibles si se trata de documentos largos y complejos en los que el peligro de pérdida del contexto aumenta cuando el usuario se aleja de la página principal y se adentra por las ramas inferiores de una estructura profunda o demasiado amplia.  

  •  Creación de un sistema de búsqueda y recuperación: Para ello es necesario el uso de herramientas de representación de la información (metadatos, métodos de indización, etc.), formas de presentación de las consultas y los resultados, y otras herramientas de recuperación y búsqueda tanto de la información interna como externa. Se pueden incorporar motores de búsqueda para que rastreen dentro del propio documento y/o en toda la World Wide Web.

No vamos a analizar aquí de forma pormenorizada cómo se crea una página web, ya que existen en la Web un gran número de manuales que lo explican de forma detallada, sin embargo, sí abordaremos 2 aspectos fundamentales para la creación de páginas, por un lado, el diseño de la estructura y, por otro, el diseño la página propiamente dicha.

Diseño de la estructura

En la Web no existe una metodología concreta para crear hiperdocumentos o sitios web completos. Por el contrario, existen multitud de estructuras organizativas tanto en lo visual como en lo conceptual, que pueden provocar una gran desorientación al usuario. Es por eso, que a la hora de elaborar un hipertexto se deben establecer una serie de reglas para que el sistema sea coherente (visual y cognoscitivamente), y para que no se produzca duplicación de informaciones o reiteración de esfuerzos a la hora de recopilar o introducir la información, y de crear la red hipertextual. Como la macroestructura común de información debe constituirse a partir de una serie de microestructuras, éstas deben construirse siguiendo unas reglas mínimas que favorezcan su articulación en la estructura global. Por lo tanto, las reglas deben establecer:

  •  Los tipos de documentos que pueden entrar a formar parte del sistema

  •  Los datos de identificación del documento: título, autor, descripción, localización, fecha de introducción, fecha de la última consulta, nivel de acceso, etc.

  •  El formato de introducción del texto: estructuración del texto, posición de las páginas, modelo gráfico utilizado, etc.

  •  El tipo de relación 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), presentación visual de enlaces, etc.

  •  El acceso a los documentos: recomendaciones para el uso del hipertexto en la búsqueda de información, etc.

esquema estructuración en un nodo    

esquema estructuración nodos

Los editores web actuales permiten automatizar una serie de tareas que antes constituían una afanosa labor, como la creación automática de tablas de contenido y herramientas de búsqueda, creación de barras de navegación y exploración o botones con enlaces de trayectoria vertical y horizontal (de páginas primarias a secundarias y viceversa, de orden secuencial anterior-siguiente-arriba, etc.) siguiendo el árbol y jerarquías establecidas en la estructura, etc. Un aspecto clave y fundamental es la facilidad que ofrecen estos editores para organizar los archivos y carpetas del sitio web y para construir la propia estructura del sitio y los enlaces entre documentos, ofreciendo esquemas visuales generales de todo el conjunto de nodos y sus relaciones jerárquicas y horizontales, o esquemas parciales de parte de esa estructura jerárquica y/o en red. Sólo hay que seleccionar la carpeta o archivo elegido, arrastrarla y soltarla sobre el lugar que queramos que ocupe en el árbol que representa la estructura de nodos, y ya tenemos creada de forma automática la red jerárquica y sus relaciones, los enlaces estructurales y de trayectoria, etc.

Por otro lado, los editores web también facilitan otras labores al ofrecer plantillas de diseño general de sitios web y "esqueletos" completos de estructuras y modelos para webs personales, webs de presencia corporativa, webs de discusión, webs de proyectos, webs de soporte al cliente, webs de colaboración en grupo, etc. Utilizando dichas plantillas, sólo tenemos que introducir el contenido y añadir o quitar las páginas que falten o sobren a lo largo y ancho de la estructura propuesta. Los editores actuales también suelen incluir una serie de herramientas y complementos que facilitan otras labores complejas o tediosas para el diseñador web, como asistentes para interfaz de bases de datos, inclusión de contadores, barras de vínculos, efectos dinámicos, subprogramas java, controles ActiveX, etc.

Diseño de la página

Es importante tener en cuenta que la unidad básica de información de un documento hipertextual no es la página, sino la pantalla.

Así pues, el diseño de la página y la disposición de los elementos dentro de ella para ser vistos en pantalla, son uno de los aspectos principales a la hora de diseñar el hiperdocumento. Las páginas deben tener un esquema ordenado y legible de un vistazo. He aquí dos ejemplos de disposición de página, la imagen de la izquierda muestra una página ilegible y desordenada, mientras que la imagen de la derecha, que sigue un esquema ordenado, facilita la navegación y comprensión del contenido.

página ilegible                 página legible

Fuente: Universidad de Zaragoza. Manual de Estilo WWW. http://wzar.unizar.es/cdc/manual/M_2_8.1.html

En el encabezamiento de los documentos es imprescindible que aparezca el título destacado y el uso de gráficos sensibles o botones de cabecera que indiquen los recorridos posibles para orientar la navegación.

orientar la navegación

Fuente: Universidad de Zaragoza. Manual de Estilo WWW. http://wzar.unizar.es/cdc/manual/M_2_7.html

También es corriente la utilización de un logotipo u otro sello gráfico que identifique la imagen institucional u oficial, comercial, etc. del sitio web.

En el diseño de las páginas hay que tener en cuenta una serie factores como: enlaces locales y ayudas a la navegación, encabezamiento de documentos, tipografía (contraste visual, esquema y diseño de páginas, tipos de letras, establecimiento de títulos y subtítulos, etc.). Creación de pies de página con información sobre el autor, e-mail de contacto, enlaces a otras páginas relacionadas, fechas de creación y actualización, etc.

En este sentido, también los editores web actuales facilitan la labor de ofrecer un diseño de páginas homogéneo y coherente para el sitio web ya que ofrecen diferentes modelos y estilos de plantillas para todo un sitio web o para páginas concretas: páginas principales, páginas de búsqueda, formularios, página de preguntas más frecuentes, tablas de contenido, página con diseño a dos columnas, etc., o realizan otras labores de forma casi automática, como poner al día las páginas si se utiliza un sistema modular de actualización para tratar un conjunto enorme de páginas que puedan actualizarse de forma conjunta.

red de documentos

Fuente: Universidad de Zaragoza. Manual de Estilo WWW.
 
http://wzar.unizar.es/cdc/manual/M_2_3.html

Los documentos hipertextuales destinados a ser leídos mediante la pantalla de un ordenador tienen su propio lenguaje. En muchos casos, se convierte en una práctica común convertir un texto en hipertexto, por medio de la simple traslación de un texto a lenguaje HTML y la partición del texto secuencial completo en bloques de texto más pequeños que pasan a convertirse en nodos y que se conectan unos a otros mediante unos enlaces que siguen más o menos la misma estructura lineal que tenía el texto primitivo.

Hay que tener en cuenta que el texto impreso en papel necesariamente presenta una disposición para la lectura secuencial, mientras que el hipertexto permite otro tipo de disposición: la lectura multisecuencial  y que esta posibilidad o facultad de lectura se lleva a cabo por medio del establecimiento de otro tipo de estructuras que le diferencian del texto tradicional. El hipertexto en la Web implica una nueva manera de presentar el texto y el conocimiento que nada tiene que ver con el texto lineal.

Al transferir textos impresos a hipertexto, la primera operación que hay que realizar es convertir un texto completo en pequeños bloques de texto (o nodos) que luego uniremos en múltiples trayectos o recorridos mediante los enlaces. Sin embargo, este es sólo un primer paso. El diseño de un hipertexto es una labor muy compleja. Los editores de páginas web que, en realidad, son sistemas de gestión de hipertextos, nos facilitan esta labor.

Por supuesto que existen tipos de documentos, en los cuales no tiene ningún sentido separar el texto en bloques de nodos más pequeños para ser puestos en la red. Una novela de intriga se debe leer empezando por el principio y siguiendo, de forma secuencial, hasta el final. La tecnología hipertextual se debe aplicar con algún fin coherente. Es muy útil para las obras de consulta y referencia, los artículos y textos científicos, manuales, etc. Estas obras impresas ya contienen básicamente todo lo que también necesita el hipertexto: capítulos, párrafos, contenido, índices de palabras claves, referencias bibliográficas, etc. Estas obras no se leen página a página y el hipertexto permite hojear los bloques de información ayudado por la estructura de navegación y las búsquedas directas.

Un buen hipertexto tiene que ofrecer al usuario una estructura de navegación fácil de manejar, la fragmentación de la información en bloques debe tener sentido en sí misma y la estructuración de los bloques de información 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 exploración, la navegación y las búsquedas mediante un lenguaje de fácil comprensión y utilización por el lector.

El diseño de la página principal es clave ya que es el primer sitio al que accede el usuario y esta primera impresión, tanto en relación al diseño como a la información en ella ofrecida, condicionará al usuario para que sienta o no la necesidad de adentrarse en el sitio.

Virtual Tourist home page

Página principal de Virtual Tourist. Ofrece un buen diseño acorde con el tema, contenidos y servicios ofrecidos (mapa mundi navegable, directorio, acceso a los servicios, foro), junto a unos excelentes sistemas de navegación y búsqueda. http://www.virtualtourist.com/

También 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 interactúe no sólo 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 través del establecimiento de un foro o una discusión en línea, un chat dentro del propio sitio web, etc.

Y, por supuesto, una vez creado un sitio web, lo más 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 páginas.

En resumen, los webmasters actuales deben aunar diferentes disciplinas a la hora de diseñar un sitio web, ya que la aproximación al diseño del sitio se debe hacer, entre otras, desde múltiples perspectivas: cognoscitiva, conceptual, ergonómica (características del diseño, la dotación física y el software lógico), funcional (qué servicios queremos ofrecer, etc.) y teniendo en cuenta ciertas condiciones de accesibilidad, usabilidad, diseño gráfico, diseño de la interacción, etc.

Como dato curioso, podemos consultar la Guía de estilo para hipertexto en línea escrita por Tim Berners Lee en los primeros días de la World Wide Web: Style Guide for online hypertext (http://www.w3.org/Provider/Style/) En esta Guía, se definen términos como websmaster, la convención "www.xxx.com", y unos puntos básicos que hoy todavía son válidos. 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 razón, se considera un documento histórico. 

Y al igual que las películas cinematográficas, las webs también 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 diseño web, la creatividad y la funcionalidad: http://www.webbyawards.com/webbys/index.php

A continuación se ofrecen una serie de enlaces y referencias de sitios web sobre Diseño Web (manuales, programación, documentación, artículos, servicios, etc.), en español:


Bibliografía:

Alzado.org. Diseño de información, desarrollo web, presentación de datos multimedia. http://www.alzado.org

ARONSON, L. The HTML Manual of style. Emeriville, California: Ziff-Davis Press, 1994.

BERNERS-LEE, Tim. Style Guide for online hypertext. http://www.w3.org/Provider/Style/

CUADRA DE COLMENARES, Elena de la. En Bibliotecas y centros de documentación: Internet para bibliotecarios y documentalistas. Madrid, Servicios de Documentación Multimedia UCM y Fundación Sánchez Albornoz, julio, 2001. http://multidoc.rediris.es/avila/paginas/elena.pdf

DAVIS, Jack. MERRIT, Susan. Diseño de páginas web. Soluciones creativas para la comunicación en pantalla. Madrid, Anaya Multimedia, 1999.

Desarrollo Web. http://www.desarrolloweb.com

DÜRSTELER, Juan Carlos. Visualización de información. Gestion 2000.com, 2002.

FERNÁNDEZ-COCA, Antonio. Producción y diseño gráfico para WWW. Barcelona, Paidós, 1998.

G3: Diseño. http://www.bitacoras.sidar.org/g3/

HOFFMAN, Michael. Clarifying the real goals of hypertext. http://www.hypertextnavigation.com/htgoals.htm

HOFFMAN, Michael. Enabling Extremely Rapid Navigation in Your Web or Document.
 http://www.hypertextnavigation.com/infoaxcs.htm

HELLER, H.; RIVERS, D. "So you wanna design for the web". ACM Interactions, (mar. 1996). 

LYNCH and HORTON. Web style Guide. http://www.webstyleguide.com/index.html

Lista cadius. Al servicio de la comunidad de profesionales de la Arquitectura de la información y la usabilidad.
http://www.cadius.org

Maestros del Web. http://www.maestrosdelweb.com

MANDEL, T. The elements of user interface design. New York: Wiley, 1997. 

MARCOS, Mari Carmen. Interacción en interfaces de recuperación de información: conceptos, metáforas y visualización. Gijón, Trea, 2004.

MARRERO EXPÓSITO, Carlos. Diseño Web ¿Por dónde empezar? http://www.telefonica.net/web2/chr55/chr5/articulos/artic_disenoweb_00.html

MILLER, R. Web interface design: learning from our past, 1996 http://athos.rutgers.edu/~shklar/www4/rmiller/rhmpapr.html

NIELSEN, Jakob. "Who should you hire to design your web site?". The Alert Box (oct. 1995), http://www.useit.com/alertbox/9510.html

NIELSEN, Jakob. Useit: Jakob Nielsen's Website. http://www.useit.com/

Programación. http://www.programacion.com

RIC. Recursos y referencias en línea para diseño interactivo y multimedia. http://www.unav.es/digilab/ric/textos/diseno.html

ROUET, Jean-Francois(ed). Hypertext and Cognition. Lawrence Erlbaum Associates, 1996.

SKALID, Boony. Web Design for Instruction. http://www.usask.ca/education/coursework/skaalid/index.htm

SHNEIDERMAN, B. "Designing information-abundant web sites: issues and recommendations". Int. J. Human-Computer Studies, 47:1. 1997.

SHNEIDERMAN, B. Designing the user interface: Strategies for effective human-computer interaction (3rd ed.) . Reading, MA: Addison-Wesley Publishing, 1998.

SIEGEL, David. Técnicas avanzadas para el diseño de páginas web. Madrid, Anaya Multimedia, 1997. [Volver]

Tejedores del Web. http://www.tejedoresdelweb.com

TOSETE HERRANZ, Francisco. "Arquitectura de la información: fundamentos del diseño de sedes en la World Wide Web". IV Jornadas de Gestión de la Información. “Nuevos escenarios: contenidos, colaboración y aprendizaje” Sociedad Española de Documentación e Información Científica (SEDIC). 2002, noviembre 26 -27. http://www.imaginas.net/ponenciasedic.pdf [Volver]

TOSETE HERRANZ, Francisco. Arquitectura de la información. http://www.imaginas.net/pdf/arquitectura_informacion.pdf [Volver]

TOSETE HERRANZ, Francisco. La experiencia de usuario. En "Arquitectura de la Información para el diseño de sedes web".http://www.imaginas.net/esquemas.htm#experienciausuario  [Volver]

 Universidad de Zaragoza. Manual de estilo de la WWW. http://wzar.unizar.es/cdc/manual/manual.html

Useit. com. Jakob Nielsen' s Website. http://www.useit.com/

Web Experto. http://www.webexperto.com

Webby Awards. http://www.webbyawards.com/


 

 Título: Hipertexto, el nuevo concepto de documento en la cultura de la imagen
 Autora: María Jesús Lamarca Lapuente (currículo personal)

 Contacta

 Tesis doctoral. Universidad Complutense de Madrid

 URL: http://www.hipertexto.info

 Fecha de Actualización: 08/12/2013   

 184 páginas web. 2.627 archivos. 2.208 imágenes. Tamaño: 52.406Kb.
 34.389 enlaces (10.436 externos y 23.953 internos)
  

Esta obra está licenciada bajo las siguientes condiciones: 
Creative Commons License
Creative Commons Reconocimiento-NoComercial-NoDerivados-Licencia España 2.5.

 


OTRAS PÁGINAS DE LA AUTORA
 

           Blog El Cultural a la PuertaBlog El Cultural a la Puerta:: http://puertadetoledo.blogspot.com/ 

                                                                                                                AGETECA. Base de Datos de Gestión Cultural
                                                                                                                 Ageteca. Base de Datos de Gestión Cultural:
      
                                                                                                    http://www.agetec.org/ageteca

Fundación Ricardo Lamarca, ajedrez y cultura

Fundación Ricardo Lamarca, Ajedrez y cultura http://www.fundacionlamarca.es

 

 

La artesa digital

Blog La artesa digital
http://artesadigital.blogspot.com.es

Especial Poesía: Hasta allí hemos llegado

Blog La artesa digital Flickr La artes@ digital: Galería de fotos mundo
 digital y mundo analógico: http://www.flickr.com/photos/artesadigital/

Blog miembras

Blog Miembras: usos lingüísticos, políticos y sociales del lenguajeBlog Miembras: Usos lingüísticos, políticos
 y sociales del lenguaje http://miembras.blogspot.com

 

Mapa de navegación / Tabla de contenido / Mapa conceptual / Tabla de documentos / Buscador / Bibliografía utilizada / Glosario de Términos / Índice Temático / Índice de Autores