DISEÑO DE PAGINAS WEB

6 MANERAS DE ORGANIZAR UN SITIO WEB

https://www.metacafe.com/watch/2315473/6_maneras_de_organizar_tu_sitio_web/

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 losenlaces 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 suusabilidad. 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 deherramientas 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.

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.

Fuente: Universidad de Zaragoza. Manual de Estilo WWW. https://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.

Fuente: Universidad de Zaragoza. Manual de Estilo WWW. https://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.

Fuente: Universidad de Zaragoza. Manual de Estilo WWW.
 https://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 lecturamultisecuencial  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 laWeb 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.

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. https://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(https://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: https://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:

•  Desarrollo Web: https://www.desarrolloweb.com
•  Maestros del Web: https://www.maestrosdelweb.com
•  Programación: https://www.programacion.com
•  Web Experto: https://www.webexperto.com

•  Tejedores del Web: https://www.tejedoresdelweb.com

FUENTE DE ESTA INFORMACION :https://www.hipertexto.info/documentos/diseg_web.htm