Diseo de documentos HTML (Internet o Intranet)

Introduccin
Aunque aplicaciones multimediales pueden ser creadas con diferentes "generadores de aplicaciones", como
HyperCard, AuthorWare y Director, el lenguaje de hipertexto (HTML: "HyperText Marking Language") es
hoy el recurso bsico comn ya que es el nico que permite la creacin de sistemas hipermediales que
funcionen tanto en forma independiente (en CD-ROM por ejemplo) como en la red Internet. Su importancia
y omnipresencia es tal que generadores clsicos de software multimedial como Director y AuthorWare se
ofrecen en nuevas versiones que permiten la instalacin en web (va HTML) de los proyectos creados con
ellos.
1. El "lenguaje" HTML
2. La creacin y composicin de las pginas
3. La estructuracin de la pgina de Web
4. Componentes de una pgina
5. Recomendaciones tcnicas

1. El lenguaje HTML
El "HTML" ("HyperText Marking Language") o "lenguaje de marcacin de hipertexto" no es propiamente un
lenguaje de programacin, ya que no se compone de "comandos" que determinen operaciones de
procesamiento sino de instrucciones que indican de qu manera deben ser exhibidos en pantalla los distintos
componentes de una "pgina". En este sentido se parece ms bien a un procesador de palabras, aunque los
programas que se usan en uno y otro caso pueden ser bastante diferentes.
Cualquier aficionado a la computacin est en condicin de usar este lenguaje, de estructura muy sencilla y
poder inmenso. A pesar de que existen aplicaciones especiales para crear pginas de web, si se aprende lo
bsico, es posible crearlas con un simple procesador de palabras. Por cierto existen tambin editores de
HTML que ofrecen crear la pgina sin saber nada de este lenguaje.
Una pgina creada en cualquier computador personal puede ser vista inmediatamente en el mismo si se
dispone de una aplicacin, llamada"browser" ("navegador"), sea Netscape o Explorer, que son las dos mas
difundidas. Netscape es hoy el ms comn, pero los comandos que expondremos son reconocidos por ambos.
Las instrucciones que conforman el lenguaje HTML se llaman "etiquetas" (en ingls: "tags"). Permiten
definir las distintas partes de una pgina, la forma en que se debe ubicar el texto y las ilustraciones en la
pantalla, los vnculos para pasar de una pgina a otra, las reas en que el lector podr eventualmente
introducir
datos
(mediante
"formularios"),
etc.
Tambien acepta la insercin de cdigos de un verdadero lenguaje de programacin, el que permite una mayor
interactividad. De l hablamos en los complementos (cf. "Adiciones al HTML: Java y JavaScript")

2. La creacin y composicin de las pginas

La creacin de una pgina de web siempre ha de iniciarse con la redaccin del texto que se ver en pantalla y
su adaptacin insertando -manualmente o mediante algn tipo de editor de HTML- las "etiquetas" (comandos
de HTML) que aseguren su correcto despliegue.
Existen hoy muchas aplicaciones que ayudan a colocar estas etiquetas sin necesidad de conocer el cdigo
Html. Las ltimas versiones de Microsoft Word para PC permiten redactar un documento en el procesador de
palabras y luego guardarlo como "Documento HTML". Incluso permiten insertar ilustraciones (Men
"Insertar"), pero se debe disponer previamente de las ilustraciones en el formato adecuado (gif o jpg) para
que la insercin funcione correctamente. (Este sistema tiene bastante limitaciones, pero puede ser til para
crear pginas personales o "prototipos" iniciales).
Tambin existen otras aplicaciones, ms directamente orientadas a la creacin de las pginas, como Netscape
Gold ( que es una versin del navegador acompaada de un sistema de edicin), Claris HomePage (para
Macintosh)
o
QuickSite
(para
PC).
Si bien estas aplicaciones son tiles para principiantes, es necesario tener en cuenta que pueden introducir
etiquetas intiles y -si no se tiene mucho cuidado- vnculos de navegacin errneos.
QuickSite 2.5 parece ser la mejor herramienta disponible hoy para usuarios de PC (Windows'95 o NT4.0). Se
puede obtener una versin de prueba del sitio web del fabricante: DeltaPoint, y luego comprar una licencia por
correo electrnico.

En todos los casos, para aprovechar correctamente estas herramientas, es conveniente tener un conocimiento
bsico de las instrucciones HTML, an sin conocer el cdigo correspondiente. Es lo que proponemos en la
presente y la siguiente pgina.
Para un trabajo ms profesional, tambin existen editores de HTML, que incluyen una serie de mens y
barras de herramientas que ayudan a generar las etiquetas; todas ellas aparecen a la vista, con lo cual se
puede controlar muy de cerca la contruccin de la pgina, lo cual no ocurre habitualmente con las
aplicaciones de diseo WYSIWYG (What You See Is What You Get ) como PageMill.
Para Macintosh podemos recomendar el "HTML Editor" o el "Web Weaver". Ambos pueden encontrarse en las
pginas "Mac" del servidor de shareware "Tucows", replicado en el servidor de nuestra universidad.
En las pginas "Windows95" del mismo servidor, se encuentran varios para este sistema operativo, con la
respectiva calificacin (No los hemos probado).

Tambin es posible escribir todo el texto y cdigo en el procesador de palabras, guardando el documento
como "slo texto", ya que ste es el formato de los documentos HTML, si bien la extensin (letras finales del
nombre que caracterizan el tipo del documento) han de ser ".htm" o ".html".

La pgina
Es importante tener en cuenta que el navegador lee la pgina HTML (texto y etiquetas) y empieza su
despliegue en pantalla partiendo en la esquina superior izquierda. Si el contenido debe ser colocado al centro
o marginado a la derecha, es posible indicar al inicio (y eventualmente cambiarlo despus, por ejemplo
despus de los ttulos). Tambin se puede definir de inmediato la existencia de una Tabla que mejore la
diagramacin. Si tenemos en cuenta que el ancho de la ventana en que el usuario ver la pgina depende de l
y no del autor, hemos de deducir que las reales posibilidades de diagramacin son bastante ms limitadas que
en los productos en papel. Hoy, sin embargo, se est generalizando el diseo basado en el supuesto de una
ventana de 640 por 480 pixeles, que es el tamao ms comn de las pantallas de computadores personales.

Las nicas instrucciones que afectan la pgina en su totalidad son las que la cortan eventualmente en sectores
diferenciados o "cuadros" ("frames") y la definicin de un color o de una imagen de fondo.
ATENCION: Al nombrar los documentos destinados a una web (cuando se "guardan"), se debe tener el
cuidado de colocar un nombre corto, sin acento y sin ningn espacio, de lo contrario los hipervnculos no
funcionarn.
Lo ms comn es usar nombres de hasta 8 caracteres -aunque pueden ser ms largos- y usar el underscore
( _ ) para unir palabras o una palabra y un nmero, si es necesario (por ejemplo: foto_1.jpg).

3. La estructuracin de la pgina de Web

La "pgina" Html se estructura formalmente al menos en dos parte: el encabezado (Head ) y el cuerpo
(Body ), ms un eventual pie de pgina.
El encabezado contiene algunas definiciones destinadas al procesador, no exhibidas en pantalla,
como una indicacin del tipo de documento y de algunas referencias (optativas en la actualidad)
acerca de su contenido o cmo fue generado. Tambin contiene un dato que se exhibe en la "barra de
ttulo" de la ventana en que se ver la pgina, dato que es llamado "ttulo" ("Title" ) y que no debe
confundirse con el o los ttulos del texto (llamados "Headings" ).
A continuacin se indica el inicio del "cuerpo" junto con las caractersticas generales de ste, como el
color del fondo y del texto y eventualmente la imagen de fondo y la alineacin.
En el pie (facultativo) se colocarn eventualmente datos identificadores del creador de la pgina o del
servidor en el cual se encuentra, informacin facultativa que pertenece estructuralmente al "cuerpo"
(la etiqueta de trmino de cuerpo se coloca despus, cerrando la pgina).
La pgina, sin embargo, debe ser considerada desde otro punto de vista: el de su contenido. Aunque el Html
admite distintos tipos de componentes, es el texto el que determina la pgina. En una pgina Html podr
haber varias ilustraciones (fotografas, grficos planos o tridimensionales, videos, sonidos) pero hay un slo
texto y este texto es el que contiene todas las etiquetas que indican como exhibir el conjunto (el propio texto
y los dems componentes). Eventualmente -caso lmite- una pgina podr no contener ningn texto destinado
a la lectura, pero, en este caso, contener instrucciones respecto de la o las ilustraciones por exhibir.
Todas las relaciones que permiten navegar entre una pgina y otra o entre un punto y otro de una misma
pgina se denominan "vnculos" (links ). Para que un vnculo funcione, debe estar identificado como tal y
tener asociada la direccin del punto de destino, que es llamado "blanco" (target ). Las etiquetas que
identifican de este modo los vnculos son llamadas "anclas" (anchor )

4. Los componentes de una pgina

Textos

Textos
Diagramacin - Tablas
Ilustraciones
Formularios
Scripts y applets

Los textos pueden ser redactados tipeando de la manera habitual o haciendo "cortar y pegar" desde
documentos existentes. Sin embargo se debe tomar en cuenta que los navegadores no reconocen los espacios
mltiples entre palabras (se reducen a uno slo), ni las tabulaciones, ni las separaciones habituales de
prrafos. Se deben insertar etiquetas especiales para asegurar los cortes (Esto ocurre en forma automtica al
"Guardar como Html" en Word y en los programas de diseo WYSIWYG, como tambin muchas de las otras
especificaciones que mencionamos aqu).
Se debe tomar en cuenta que la tipografa depende esencialmente de las preferencias fijadas por el
navegador-cliente, es decir del usuario que leer la pgina. Por ello, a pesar de que las ltimas versiones de
HTML permiten seleccionar una fuente tipogrfica determinada, nada garantiza que la tenga el cliente ni que
no haya determinado pasar por alto las instrucciones al respecto que pudieran estar en el documento, para
colocar la tipografa que el prefiere. Ocurre lo mismo en relacin al tamao de las letras, razn por la cual los
cambios de tamao se deben hacer preferentemente usando etiquetas que indican un aumento o una
disminucin en forma relativa (un tanto ms grande o un tanto ms chico que el valor "normal" definido por
el usuario: por ejemplo Size=+2).
Los ttulos, llamados "Headings", se definen jerquicamente usando nmeros que van desde 1 (el ms
grande posible) hasta 6 (el ms pequeo). El 4 corresponde generalmente al tamao del texto normal.
Adems de determinar el tamao, este comando obliga al texto a aparecer en una lnea (o bloque de lneas),
separado del resto y en negrita.
Por otra parte, las palabras pueden ser marcadas para aparecer en negrita, en cursiva o como "letras de
teletipo" (aspecto de mquina de escribir).
Los textos, adems, pueden ser ordenados de distintas formas (ver a continuacin).
Pgina correlativa en Manual HTML: El Texto
Diagramacin - Tablas
El texto puede ser alineado junto al margen izquierdo o al margen derecho, o tambin centrado. En
algunas versiones recientes es posible indicar una justificacin a ambos lados. Sin embargo, esto
ofrece poca flexibilidad. Existen varios complementos:
Se puede aumentar el margen izquierdo transformando uno o varios prrafos en una "lista"
(tal como la entiende el HTML), como lo hacemos en el presente caso. El HTML genera por
defecto la "bolita" (forma llamada "lista desordenada" o tambin "men"), pero es posible
eliminar la bolita o reemplazarla por letras o nmeros (en cuyo caso se habla de una "lista
ordenada").
Se puede volver a ampliar el margen dando la instruccin de colocar otra lista en lugar
de un prrafo de la primera lista (y as sucesivamente).

Otro sistema es el de las "listas de definiciones": se puede marcar una palabra ("entrada" o
encabezado de la definicin) y luego el texto correspondiente, que ser desplegado con una
sangra, como en el siguiente ejemplo:

Entrada
Texto de la definicin

Esto an no resuelve el problema de la confeccin de columnas, para lo cual se necesita crear una
tabla, la que puede ofrecer una flexibilidad mucho mayor, pero a cambio de cierta complejidad
(especialmente cuando se deben combinar filas o columnas que se subdividen slo en algunos
sectores).
De partida es importante tener claro que toda tabla se compone primero de filas y cada una se divide
en celdas que corresponden a las columnas. La tabla puede tener (o no) bordes visibles y espacios
variables (definidos por el diseador) entre los mrgenes y el contenido. Generalmente es
recomendable crear las tablas con borde para ver bien qu ocurre, y luego -cuando todo est binborrar el borde si no se lo desea (pero es necesario asegurarse que el programa utilizado permite este
tipo de modificacin, de lo contrario se necesitar corregir la etiqueta con otro procesador).
El uso de tablas tiende a hacer ms lenta la operacin del computador-cliente, especialmente si tienen
muchas celdas, porque el receptor debe calcular la mejor forma de exhibirlas, segn la ventana
disponible. Se puede acelerar este cculo predefiniendo el ancho de la tabla (en pixeles) y, en las
versiones ms recientes (3 o superior), tambin de la columnas.
Pginas correlativas en Manual HTML:
Mens y listas
Tablas
Ilustraciones
Las ilustraciones ms comunes sern dibujos o fotografas, las cuales deben ser preparadas con una
aplicacin de grfica y guardadas en formato "GIF" o "JPEG" (el nombre del archivo debe terminar
con ".gif" o ".jpg"). Estos formatos comprimen la imagen para acelerar su transmisin. El formato
GIF slo admite 256 colores (adecuado para grficos) mientras el JPEG admite miles de colores
(preferible para fotografas).
Tambin es posible, en teora, insertar documentos de audio y de video (en formatos comprimidos
especiales para web), pero se debe tener en cuenta que a pesar de la compresin estos archivos son
muy grandes y toma mucho tiempo transmitirlos (unos cuantos segundos de un video inferior a un
cuarto de la pantalla ocupa varios Mb y requiere varios minutos para su transmisin).
Las ilustraciones pueden insertarse a la izquierda, al centro o a la derecha, entre dos prrafos de texto
o (si no son centradas) con texto a un lado. Si no se utiliza una tabla para ubicar una ilustracin, la
etiqueta HTML que la llama siempre debe ir ANTES del texto que aparecer a su lado (incluso si el
texto va a la izquierda y la imagen a la derecha).
Pgina correlativa en Manual HTML:
Las imgenes
Formularios
El sistema del HTML no slo permite traer pginas y sus componentes, tambin permite enviar datos
a travs del sistema de correo electrnico. Para ello se ocupan formularios, que definen reas en las
cuales se puede tipear, mens desplegables o botones por seleccionar. Al final se adjunta un botn
"Enviar" (Submit), que es el que ordena al computador enviar los datos tipeados o seleccionados en el

formulario.
Puede ver un ejemplo cada vez que ingresa al curso, en la "Pgina de Registro".
Scripts y applets
Dado que el HTML slo se compone de instrucciones relativas al despliegue de la informacin en
pantalla, se recurre a otro lenguaje de programacin para ordenar al computador del cliente que
realice alguna operacin, como por ejemplo verificar una respuesta dada en un formulario. Esto puede
lograrse sea incluyendo el cdigo (llamado "javascript") dentro del documento HTML o bien
enviandolas instrucciones como componente anexo, que es lo que se llama "applet" (que corresponde
al lenguaje Java). Un script es visible si se pide al navegador que muestre el documento "fuente"
(View as Source), mientras del applet slo se puede ver la referencia en ese documento.
Ms informacin en: Java y JavaScript.

Diseo de documentos HTML (Internet o Intranet)

5. Recomendaciones tcnicas
A modo de complemento y para terminar este captulo, transcribimos aqu la mayor parte de las
recomendaciones que utilizamos para guiar la confeccin de los mdulos de una web:

Estructura
Nombres de archivos
Formatos
Portadas
Objetos grficos comunes
Ttulos
Divisiones
Documentacin

Estructura
La "Web" de la Universidad ("Ariadna") contiene toda la informacin oficial, dividida en "mdulos" (todas
las entradas de primer nivel jerrquico a las cuales se llega desde la portada, que es nuestra "home page").
Los mdulos se dividen eventualmente en sub-captulos y luego en pginas (2 nivel jerrquico), cada una de
las cuales constituye un documento de texto HTML (con ilustraciones anexas). Las pginas se subdividen
eventualmente en segmentos, que son las distintas partes de las mismas a las cuales se puede acceder desde
un men al inicio de la misma pgina.
La estructura lgica es por lo tanto: web / mdulo / (sub-captulo) / pgina / segmento.
Una pgina puede tener pginas subordinadas, para detallar informacin que sera demasiado largo incluir de
una vez: conviene verificar que una pgina no se demore mucho en cargarse en el computador, lo cual
depender tanto del texto como -sobretodo- de la cantidad de ilustraciones y de la predefinicin del tamao
de stas.

Nombres de archivos
Prefiera poner todos los nombres de los archivos en minsculas y de una longitud mxima de 8 caracteres
(ms la "extensin"). Utilice solamente el alfabeto ingls (Nunca use acentos ni letras exclusivas del
castellano u otro idioma en el nombre con el cual guarda un archivo).
Facilita reconocer los componentes utilizar letras iniciales caractersticas, especialmente si no se agrupa cada
tipo de componente en un directorio ("carpeta") separado. Ejemplos:

Botones especiales: b_xxx.gif

Fotos: f_xxx.jpg
Estampillas: e_xxx.gif o e_xxx.jpg
Logotipos: l_xxx.gif
Mapas: m_xxx.gif
Iconos(pictogramas): i_xxx.gif
Vietas de titulacin ("banners"): t_xxx.gif

Los textos van habitualmente sin letra diferenciadora: xxx.html

Formatos

Fotos: ("miles de colores" o 256 colores, a definir para cada proyecto)

Para fotos insertas en el texto, se recomienda un tamao mximo de 200x200 pixeles (Pueden
estar
con
link
a
una
copia
a
plena
pantalla).
Conviene guardar copia de los originales en formato no comprimido al menos hasta que todo
est instalado y probado.

Estampillas: uniformar a 90 pixeles de alto.

Vietas de titulacin ("banners"): max. 430 pixeles de ancho y 100 de alto, en 256 colores.

Los elementos grficos que requieran fondo transparente deben ir en 256 colores y formato ".gif" para que
puedan ser traspasados al formato adecuado.
Para acelerar la recepcin de la informacin, se recomienda anotar en la hoja HTML el tamao exacto de
cada ilustracin: <IMG WIDTH=valor HEIGHT=valor SRC="... "> (Se puede prescindir de esto para los
iconos, ya que son muy chicos). Se recomienda adems incluir un texto alternativo para los casos en que no
se bajen las imgenes: <IMG SRC= "..." ALT= "texto alternativo">

Portadas
Se distinguirn varios tipos de portadas, de acuerdo a su importancia jerrquica, caracterizadas por vietas de
encabezamiento de diferente tamao, por ejemplo:
* Portada A: Portada de mxima prioridad, con ilustracin de max. 430 pixeles de ancho y 240 de alto, men
por "mapa sensible" (reas de la ilustracin que responden a los "clics" del ratn), texto limitado a los datos
del proveedor de la informacin, contacto (e- mail) y eventual link a documento que detalla los integrantes
del equipo a cargo de la confeccin del mdulo.
* Portada B: de nivel jerrquico medio, con vieta de max. 430 pixeles de ancho y 180 de alto, men de lista,
texto eventual (corto), datos del proveedor, del contacto (mail) y de los creadores si no estn antes en una
portada tipo A.
* Portada C o pgina con encabezamiento grfico: nivel jerrquico bajo, destinada a documentos breves, con
o sin men (de lista). Ilustracin de max. 430 pixeles de ancho y hasta 120 de alto, men solo por lista, texto.
(El ancho de 430 pixeles aqu especificado est calculado para permitir la visualizacin e impresin
con el ancho de una hoja carta.)

Objetos grficos comunes

Hemos creado botones e iconos que se usan de la misma manera en todos los mdulos (no en mdulos
autnomos como este curso). Tambin estn guardado en un directorio especial para facilitar su uso en
mltiples proyectos
Botones:
Al final de cada "pgina", se incorporan 2 botones:

Botn que enva al Men Inicial

Botn que enva al Men del mdulo

Iconos:
Contamos con iconos para sealar la persona a contactar, el proveedor de informacin, el redactor y tambin
para insertar un link hacia una foto o un grfico no visible en la pgina.
Ttulos
Preferimos poner ttulos en <H2> para titular la pgina si no hay vieta grfica, y los ponemos en <H3>
dentro de la pgina. No usamos tamaos con numeracin <H> superior a 4 para evitar que se achique el
texto.

Divisiones
Los diversos segmentos de una misma "pgina" estarn separados por una lnea <HR> (grosor a eleccin
para la primera y la ltima; se mantendr grosor mnimo para las divisiones interiores).
Pie de pgina
En todos los mdulos debe quedar constancia (al final de la portada o en documento anexo a sta) de los
nombres
de
los
proveedores
de
informacin
y
de
los
realizadores.
Es conveniente terminar siempre la hoja HTML con <P> para asegurar una buena lectura de la ltima lnea
de texto.

El diseo de "webs"
Principios generales para un "sitio" de Web
Para el diseo de un "sitio" o un mdulo de web es conveniente aplicar las siguientes recomendaciones
(Weinschenk, Jamar y Yeo, pp.238-248):
1. Proveer contenidos sustantivos y actualizados (lo que la audiencia quiere recibir, no lo que el emisor
quiere decir), lo cual requiere conocer bien los intereses de la audiencia.
2. Motivar bien en la primera pgina, para que el visitante marque el sitio como interesante.
3. Dar prioridad a la facilidad de uso.
4. Crear un diseo grfico unificado (vietas y colores coherentes).
5. Una organizacin jerrquica de las pginas facilita la comprensin y la navegacin, pero hay que asegurar
al lector que al tercer 'clic' encontrar lo que busca (Ms niveles slo deben contener detalles; ms 'clics'
deberan corresponder a navegacin transversal).
6. La pgina inicial ("home page") debe dar acceso a los diversos contenidos pero tambin convencer del
inters del sitio: se debe informar y motivar a travs de la imagen y el men.
7. Si se usa una imagen-mapa sensible, colocar texto equivalente (para usuarios que no bajen la imagen y
para los spiders, programas que abastecen los "motores de bsqueda" de la World Wide Web).
8. Usar submenus si el sitio es muy grande.
9. Tener en cuenta el ancho de banda (si el acceso ser por modem, no puede haber ilustraciones pesadas ni
multimedia).
10. Asegurar puntos de referencia permanentes, para que el visitante no se pierda (barra de iconos o frame
con men). Puede ser conveniente incluir un mapa grfico del sitio y es siempre aconsejable incluir una
tabla de contenido con todos los links pertinentes.
11. Identificar el mdulo o sitio en todas sus pginas y facilitar en todas un ancla que remita a la portada -y
eventualmente hacia las divisiones mayores-, ya que un motor de bsqueda puede hacer llegar el lector a
cualquier pgina.
12. Antes de incluir marcos (frames) y rutinas en Java, hay que estar seguro de que los destinatarios disponen
de un navegador con la capacidad requerida. Siempre hay que programar para un mnimo y no un
mximo.
13. Evitar poner informacin solamente en forma grfica (el lector puede deshabilitar la recepcin de
imgenes para ir ms rpido). Incluir siempre, por lo tanto, mens verbales.
14. Evitar las anclas dentro de un texto (si no es un men): interrumpen la lectura. Es mejor ponerlas al final
de un prrafo. Deben sugerir con claridad lo que se obtendra al activarlas (y el tamao del documento
por recibir, si es muy superior al promedio habitual).
15. Tener mucho cuidado con links secuenciales (pgina previa y pgina siguiente) ya que no estar claro si
se refieren a la secuencia fsica (prevista por el emisor) o a la que est siguiendo el lector (que puede
haber venido "saltando" desde otra "rama" u otro sitio). Adems, la inclusin de secuencias es compleja
para la sustitucin de pginas ya que afecta la programacin de cada una.
16. Mantener en lo posible los colores estandar para los links (visitados y no-visitados), para evitar
confusiones.

La estructuracin de contenidos para Web

Un proyecto de Web se presenta generalmente como un conjunto de pginas de hipertexto (HTML) que
conforman lo que podemos llamar
"Mdulo Institucional" cuando est destinado a presentar una empresa o una organizacin. Se tiende
frecuentemente a llamarlo "Home Page" pero, en sentido estricto, la "Home Page" es slo la primera
pgina o "portada", con la identificacin del organismo y el men de los contenidos informativos o
servicios ofrecidos; o
"Mdulo Informativo" (o Educativo) cuando est destinado a dar a conocer acontecimientos (como en
la "Prensa interactiva") o conocimientos de diversos tipos (produccin acadmica, narrativa, etc.).
Obviamente tambin existen -numerosas- producciones destinadas a la entretencin, pero no corresponde a
nuestro propsito abordar este campo particular.
Cada mdulo de este tipo puede ser el nico instalado en el servidor de WWW (computador conectado a la
red) de una institucin o estar instalado junto a otros en dicho servidor o en l de algn proveedor del
servicio. Un proyecto de tecnologa educativa es muy similar a un "mdulo institucional" y todo lo que
digamos en este captulo es vlido, en principio, para las dos categoras mencionadas.
Un mdulo de web -institucional o educativo- contiene toda la informacin que se desea hacer circular,
dividida en captulos (todas las entradas de primer nivel jerrquico a las cuales se llega desde la portada). Los
captulos se dividen eventualmente en sub-captulos y finalmente en pginas, cada una de las cuales
constituye un documento de texto HTML (con ilustraciones anexas). Las pginas se subdividen a su vez en
segmentos, que son las distintas partes de las mismas a las cuales se puede acceder desde un men al inicio
de la misma pgina (Son sealados, en Html, por la etiqueta <A NAME=...>).
La estructura lgica es por lo tanto: Mdulo / captulo / (sub-captulo) / pgina / segmento. Es conveniente
que esta estructura quede reflejada en la agrupacin de los documentos en directorios y sub-directorios en el
computador. As, habr un directorio general que incluir todo el material correspondiente al mdulo, y dicho
directorio contendr sub-directorios con funciones comunes y sub-directorios que agruparn las pginas de
un mismo captulo o sub-captulo.
Llamaremos "dir_1" el directorio principal (en la realidad podr llamarse "www" o "data_docs", dependiendo
del software del servidor). Deber contener la portada (llamada "index.html", de acuerdo a las normas) y los
subdirectorios. Ser conveniente reservar uno de stos para archivos de uso comn, como las ilustraciones
-conos, botones, vietas, etc.- que se repetirn en mltiples pginas. Le pondremos "dir_11".
Para visualizar mejor esta estructura, representaremos (Grfico siguiente) la agrupacin de las pginas (reas
grises) en directorios (rectngulos numerados) tal como el programador las agrupar (cosa habitualmente
desconocida del cliente-lector). Las lneas grises horizontales indican la secuencia bsica de lectura. La letra I
indica que el documento es un ndice, es decir una pgina con un men, que da acceso a pginas de
subdirectorios contenidos en el mismo directorio.

Un directorio puede contener pginas unidas en secuencia (para ser ledas una tras otra) como en el caso de
los dir_121 y dir_122 (donde la letra E indica la pgina que encabeza la secuencia). Pero tambin puede
contener pginas o archivos independientes entre s, como en el caso del dir_11, o una mezcla
secuencial/paralela como en los dir_132 y dir_141. Y, como en el dir_132, el acceso podra ser solamente a
partir de un link desde otro archivo, y no desde un men.
Obviamente el Grfico anterior no es un buen ejemplo para un proyecto concreto, ya que hemos includo
distintos modos de agrupar los archivos, resultando de ello un todo poco coherente. En la realidad, conviene
definir una estructura de acuerdo a la complejidad del proyecto, para lo cual podramos definir tres tipos de
casos:
(Ms adelante hablamos de los problemas de navegacin que pueden presentarse en esta estructura.)
a. Proyectos simples
En proyectos muy simples (con un nmero total de archivos que no sobrepase de una docena), no resulta
conveniente crear subdirectorios: basta un slo directorio. Los tipos de documentos se diferencian fcilmente
por su extensin (".html" para los textos, ".gif" para las ilustraciones, etc.)
b. Proyectos de mediana complejidad
En este caso conviene agrupar los archivos (files) de acuerdo a la naturaleza de los documentos: los textos
juntos en un sub-directorio, las ilustraciones en otro.
Esto explica, por ejemplo, la estructura del dir_13, donde un sub-directorio se reserv al texto y otro a las
fotografas:

en el dir_131 tenemos dos pginas de texto, secuenciadas, mientras

en el dir_132 tenemos dos pares de fotos, que son las requeridas por las pginas del dir_131: la
primera imagen de cada par es una "estampilla", e.d. una reproduccin de tamao reducido que
aparecer en una de las pginas de texto y que podr ser activada como link hacia la segunda foto, la
cual es una reproduccin de mayor tamao, que el lector recibir como documento separado slo si lo
desea (Justificaremos este proceder ms adelante).

Se utilizar preferentemente este tipo de estructura en mdulos que pueden tener hasta dos o tres docenas de
pginas de texto, por lo cual ya no es conveniente mantener todos los archivos en un slo directorio

c. Proyecto de alta complejidad

En proyectos de alta complejidad conviene aplicar una regla general de agrupacin relacionada con los
contenidos (captulos y sub-captulos) primero y, eventualmente despus, de acuerdo a la naturaleza de los
documentos.
En el ejemplo del dir_141 se muestran dos pginas de texto correpondientes a un mismo captulo temtico,
acompaadas cada una de dos ilustraciones. Como el total es un nmero reducido de documentos, no es
necesario aumentar las divisiones. Pero, si este nmero superase las dos docenas, sera conveniente aplicar el
segundo criterio y subdividir de acuerdo a la naturaleza (textos vs. ilustraciones), como en el dir_13.
Las formas de agrupacin sugeridas en los casos b. y c. estn destinadas a facilitar a la vez el trabajo de
programacin y la posterior "mantencin", es decir la sustitucin de los documentos sin afectar las
referencias de unos a otros (hyperlinks).
Estas sugerencias en torno a la estructuracin formal son el fruto de nuestra experiencia en el desarrollo del
mdulo institucional de la Pontificia Universidad Catlica de Chile (http://www.puc.cl).

La interfaz grfica en web

Para proseguir, es conveniente dominar los conceptos bsicos del "Lenguaje Html" y de
"Estructuracin de pginas Html".
(Lea primero esas pginas si no domina esos temas).

No todo lo que es posible disear en un determinado equipo puede ser considerado vlido para un mdulo
que se instale en un servidor de web. Varios factores externos han de ser tomados en cuenta: el "ancho de
banda" disponible (es decir la amplitud y velocidad del canal de transmisin) y tambin la "plataforma"
(sistema operativo), el navegador y la calidad del monitor (pantalla) usados por la audiencia-tipo.
Browsers
Ancho de banda
Poblacin-meta
Prueba previa
Reglas de diseo

Browsers
En materia de visualizadores (browsers), toma un ao la difusin y actualizacin a una nueva versin y otro
ao el que los clientes se acostumbren a las nuevas funciones y "extras" (plug-ins), segn los clculos de la
firma Sun basados en las consultas a su servidor, los cuales pueden incluso estar sobredimensionados ya que
es un sitio para expertos. Exceptuando el caso de las Intranets, donde se puede esperar que todos tengan
acceso a los mismos recursos, si el diseador no toma en cuenta este retraso de los clientes, causar
problemas a muchos de ellos. Y se debe recalcar que los avances de HTML no hacen en absoluto imposible
estar al da y, simultneamente, servir an a quienes slo tienen un navegador de la primera generacin: es
posible hacer una "degradacin agraciada" (facilitando la recepcin para distintas versiones de navegador).
Los plug-ins deben usarse con ms cuidado, slo para elementos complementarios y se debe avisar de su
presencia y rol (no pueden contener informacin importante). (Helinski, pp.39-42)

Ancho de banda
La velocidad de recepcin depende de la capacidad del canal de telecomunicacin, llamada "ancho de
banda". Debido al crecimiento explosivo de la cantidad de usuario, esta capacidad siempre es menor de lo
que pudiesemos desear, por lo cual no es lgico insertar muchos vdeos (muy "pesados" en cuanto a su
dimensin en bytes) si el canal es estrecho y prximo a la saturacin. Tampoco lo es colocar ilustraciones de
alta calidad "millones de colores") si la mayora de los usuarios slo tiene pantalla de 256 colores. Hasta
1996 se consideraba que la "norma" de la industria multimedial era la grfica de 256 colores. Posteriormente
han ido creciendo paulatinamente los softwares y pginas en "miles de colores", especialmente para la
difusin de contenidos informativos y cientficos, donde se haca ms necesaria una calidad (casi)
fotogrfica.
Poblacin-meta
En este sentido, no se debe considerar que todos los que navegan por Internet sern "clientes": siempre
tendremos una poblacin-meta preferencial (puede haber una primaria y una segundaria) que es necesario
definir y caracterizar, y para la cual se ajustar el proyecto.
Recordemos tambin que, de acuerdo a las reglas del diseo de todo tipo de proyecto informativo o
formativo, es indispensable definir bien el objetivo del mismo tanto del punto de vista del emisor como del
receptor y definir cmo y cundo se espera que lleguen a visitar el sitio (web site): por ejemplo para
solucionar algn problema en su trabajo, para entretenerse, para investigar o preparar un informe.
Tambin es necesario definir cmo llegarn: por un motor de bsqueda, por un men (Intranet o Internet), o
por una direccin URL.
Prueba previa
Igual que para otras interfaces, es indispensable hacer pruebas de la misma. Debe ser fcil de usar, rpida,
entretenida, til, con informacin actualizada, interactiva. Defnase un estilo y elgense buenas metforas y
representaciones (cosa que an falta en muchos sitios web). Los esquemas de navegacin deben ser
preparados cuidadosamente, haciendo ojal un guin del comportamiento esperado de los visitantes.
(Helinski(cf.Weinschenk..., pp.131-137)

Reglas para el diseo

Teniendo en cuenta las reglas cognitivas as como las reglas de la percepcin, se pueden precisar an ms
algunas reglas tiles para el diseo de las portadas y de las pginas en general:

Diseo de Portada
Layout de pgina
Grfica
Redaccin

Diseo de Portada
En una "home page" o pgina de men, es conveniente que todas las opciones estn en la primera ventana
visible (sin necesidad de recurrir al scrolling) es decir en un marco de 640x480 pixeles como mximo (el
tamao de pantalla ms frecuente hoy), ya que muchos clientes no irn ms all. De ser necesario, incluir
algunos botones como mapa sensible en esa rea: a pesar de que no todos los navegadores los reconocern,

podrn ayudar a los que tengan al menos ya versiones de 2 generacin. Debido a la forma en que opera la
web, todo lo importante siempre debe estar en la parte superior de la pgina. Pero si se trata de una pgina
con informacin verbal, la experiencia demuestra que el lector prefiere un scrolling largo antes que activar
repetidos links. Escribir bien (claro y conciso) es sin embargo fundamental. Las anclas que se inserten en el
texto deben agregarse con prudencia ya que producen tambin palabras generalmente menos legibles. Como
ya sealado, es perferibe colocarlos al final de un prrafo, ya que invitan a cortar la lectura y pasar a otro
lugar. Y nunca deben enviar a un texto irrelevante. (Helinski, p.42)
Las animaciones distraen e incluso molestan si son en ciclo permanente ("loop"). No debe ponerse ms de
una por pgina. Una imagen de fondo tambin es distractiva y puede dificultar la lectura (preferir tramas o
fondos planos).
Se debe facilitar el reconocimiento de la ubicacin (y especialmente de la salida del mdulo si sto puede
ocurrir), para lo cual un buen sistema puede ser un pequeo logotipo o una delgada barra de botones al
encabezar cada pgina o en el borde izquierdo, como lo hacemos en estas pginas. (Helinski, p.43)

Layout general de pgina web

Weinschenk, Jamar y Yeo aconsejan aplicar las siguientes reglas en el diseo de las pginas:
1. Recordar que lo que se ve de partida en la pantalla es clave. Muchos visitantes no harn un "scrolling"
si no encuentran ah lo que buscan.
2. Toda pgina debera contener los siguientes elementos:
o identificacin en la barra de ttulo,
o ttulo de pgina,
o links hacia los principales tpicos del sitio [o mdulo],
o link hacia la portada, la identificacin de la institucin, el motor de bsqueda y el mapa del
sitio,
o e-mail del webmaster.
3. Concentrar toda la funcionalidad (ttulos y mens) en la ventana inicial (640x480 pixels). Debajo de
sta poner solamente informacin "no crtica" para la navegacin.
4. Si hay informacin importante ms abajo, hacer evidente la necesidad de scrolling (imagen o texto
cortado).
5. Determinar la longitud de las pginas segn la modalidad de acceso y tipo de contenido (largas
-completas- para explicaciones; cortas para definiciones o informaciones puntuales, para respuestas a
bsquedas o si el acceso es por modem). Evitar siempre que pase de 3 carrillas.
6. Crear un modelo bsico (plantilla, "template") de pgina para asegurar la unidad y consistencia. Las
tablas (con ancho fijo) son el mejor sistema para controlar el aspecto de las pginas. (Cuidado si an
puede tener lectores con un navegador que no las reconoce).
7. No ocupar ms del 30% del espacio con texto (70% para espacio en blanco e ilustraciones), para
asegurar una lectura agradable.
8. Mantener la regla de proximidad de texto e imagen (asociacin semntica de lo que est cercano).
9. Agrupar los tems (mens anidados), con no ms de 7 en cada bloque.
10. No usar nunca el scrolling horizontal.
11. Es poco conveniente usar subreas (frames): si se llega desde un motor de bsqueda, no se obtiene el
rea de referencia (que contiene generalmente el men o los botones de desplazamiento); si se lleg
desde la portada, es imposible marcar el acceso directo a la pgina (bookmark) y es ms difcil
imprimir o guardar copia de la pgina.
12. Si se muestra rpidamente un men en texto (mientras bajan las imgenes) se ayuda a los clientes a
usar el servicio, navegando ms rpido.
13. Evitar sonido de fondo repetitivo.

14. Respetar los derechos de autor (Esto incluye no citar marcas registradas ni copiar logotipos sin
permiso) y recordarlos a los dems indicando la reserva de derechos para las pginas propias.
(Weinschenk..., pp.248-260)

Grfica de pgina web

En relacin a la grfica propiamente tal, los mismos autores sugieren:
1. Los grficos frenan la comunicacin: incluirlos slo si aportan realmente algo, nunca "porque hace
falta una ilustracin". Pero tambin cuidar que la imagen sea agradable. Dejar al usuario la opcin de
ver una imagen a gran escala y alta definicin, ofreciendo slo una versin reducida dentro del texto.
Ninguna imagen debera tener ms de 640x480 pixeles.
2. Asegurar con texto la correcta interpretacin de los grficos (y de los pictogramas-botones de
navegacin, salvo que se haya probado intensivamente su comprensin en pruebas previas).
3. Usar texto alternativ ("ALT") con todas las ilustraciones (para el caso de que el cliente no las pueda
ver o decida no "bajarlas").
4. Usar conos para identificar diferentes secciones: su repeticin no es ms lenta (quedan en la memoria
cach del computador) y ayudan a conceptualizar la organizacin de los contenidos (an mejor si se
usan tambin las listas y mens).
5. Si se desea usar una determinada tipografa para los ttulos, usarla con un programa de grfica y
guardar los ttulos como imgenes (Salvo dos o tres tipografas comunes, hay muy poca seguridad de
que el cliente tenga instalada la que prefiera el diseador).
6. Utilizar las tcnicas aceleradoras de visualizacin de imgenes como "Interlaced GIF", Jpeg de baja
resolucin y especificacin de tamao en la etiqueta de imagen.
7. Incluir las palabras importantes de una imagen de ttulo en el texto o en una etiqueta "meta" de Html,
para que los motores de bsqueda las puedan encontrar.
8. Imgenes no fotogrficas deberan hacerse con un mnimo de colores, tomados de la paleta de 216
colores (que es la realmente disponible en web para monitores de 256 colores) y todas las
ilustraciones de una misma pgina deberan usar la misma paleta.
9. Recordar que el color se rinde de diferente manera en las distintas plataformas (verificar el resultado
en varias, en lo posible).
10. Para animaciones, preferir el "Gif animado": es el sistema ms compacto y simple, pero se debe evitar
un ciclo permanente ("loop" infinito).
11. Evitar el dibujo de manos como elementos grficos (iconos o botones): puede ser mal interpretados en
ciertos ambientes culturales.
12. Si se quiere usar una imagen de fondo ("palmeta"), hacerla del menor tamao posible, para que se
cargue con mayor rapidez. Evitar patrones analizables (marcas de agua, logotipos, fotos, etc.):
interfieren con la lectura. Son preferibles las tramas aleatorias.
13. Si se usa una imagen de fondo, definir previamente un color de fondo en la misma gama: ste se carga
primero y anuncia as al usuario que la pgina se est cargando.
14. Evitar colores fuertes y tambin un texto blanco sobre fondo negro. Tener en cuenta que el cliente
puede definir su color de fondo preferido (y anular as el que se transmite): esto es importante para la
definicin del color del texto y de los links. (Weinschenk..., pp.260-267)

La redaccin de la pgina web

Finalmente, en relacin a la redaccin del texto:
1. Recordar ante todo que la lectura en pantalla resulta generalmente ms molesta que en papel.
2. Usar oraciones cortas y precisas y evitar redundancias.

3. Usar lo ms que se pueda esquemas y "listas no-ordenadas" (con "bullets" )

4. Colocar los textos de niveles de detalle diferentes en pginas separadas (no obligar a leer detalles no
deseados).
5. No subrayar nada (lo subrayado indica ancla): usar negritas, con mesura.
6. Evitar el texto contnuo en cursiva: es de difcil lectura.
7. Los prrafos no deben tener ms de 4 o 5 oraciones.
8. Usar muchos subttulos.
9. Evitar textos que no sean afirmativos y evitar los juicios de valor y apreciaciones personales.
10. Ser consistente en la puntuacin y el uso de maysculas.
11. Informar adecuadamente de los cambios (Pgina de "Novedades" y fechas de actualizacin).
(Weinschenk..., pp.271-275)

La creacin de los documentos para Web

Al crear los documentos, conviene asegurarse que una pgina no se demorar demasiado en cargarse en el
computador del lector, lo cual depender tanto de la longitud del texto como -sobretodo- de la cantidad de
ilustraciones (visuales o auditivas) que incluya. Es cierto que la velocidad de recepcin depende de la
capacidad de las redes ("ancho de banda" dividido por el nmero de usuarios simultneos), lo cual no puede
ser controlado por el emisor-programador. Pero s es posible aumentar -o reducir- la velocidad controlando la
estructura de cada pgina. Si el texto es breve y las ilustraciones pocas (y pequeas), la transmisin ser
mucho ms rpida. Pero la comunicacin en su conjunto puede tornarse tambin ineficiente (y enojosa) si se
fragmenta demasiado el contenido, obligando al lector a activar vnculo tras vnculo, lo cual puede tener
como resultado que ocupe ms tiempo esperando la llegada de la informacin que leyendo sta.
Conocemos ejemplos en ambos extremos: pginas que demoran varios minutos en llegar debido a su
extensin e ilustraciones, y pginas que slo contienen un prrafo de texto y obligan a pedir otra en seguida.
En este caso, slo pueden recibir las pginas en forma rpida quienes estn conectados por red local al mismo
servidor de WWW. Pero quienes estn alejados se aburrirn de las esperas.
Cul sera el adecuado "trmino medio"? Nuestra experiencia aconseja trabajar con documentos de una
extensin no superior a 10 o 20Kb. Y en una pgina de texto de este tamao, evitemos colocar ms de tres
cuatro ilustraciones (o una ilustracin ms algunos "botones" o iconos). Tambin, si queremos agregar fotos o
dibujos ilustrativos, utilicemos el sistema de "estampillas", que consiste en insertar reproducciones pequeas
(como mximo de 150 pixeles por lado) que sean anclas de las ilustraciones de plena pgina que se quieran
ofrecer. (Un "ancla" es un objeto marcado que activa el vnculo de navegacin que lleva a otro documento).
Aumenta la velocidad de recepcin de una pgina el indicar en su programacin el tamao exacto de cada
ilustracin (IMG WIDTH=valor HEIGHT=valor SRC=...): de este modo el texto podr "saltar" el espacio
requerido para las imgenes, lo cual permite empezar rpidamente a leer. Tambin ayuda a reducir la espera
el uso de ilustraciones de formato ".gif" e "interlaced", ya que stas aparecen en forma progresiva (primero
borrosas y luego ms y ms ntidas). Pero el formato ".gif" slo admite 256 colores, lo cual en algunos casos
puede ser una calidad insuficiente. La solucin consiste nuevamente en crear estampillas que remitan a
imgenes mayores, en miles de colores (formato ".jpg").
A su vez, si se usa el formato "jpg", es posible escoger el grado de compresin de las ilustraciones.
Generalmente una compresin media (para una reproduccin de mediana calidad) es adecuada. Una
compresin menor (para lograr una mayor calidad) no es aconsejable. Se puede comprimir ms que la media
si la menor calidad del resultado es aceptable. (Programas de edicin de fotografa como Photoshop, o de

conversin como "Graphic Converter", ofrecen generalmente elegir el grado de compresin cuando el
formato lo permite).

Facilitar la "navegacin"
Quin haya navegado con alguna frecuencia por algn "hipermedio" habr descubierto que no es siempre
fcil descubrir en qu "lugar del recorrido" est uno ni menos an volver con facilidad a alguna de las
posiciones anteriores. Consideraremos aqu los recursos de que dispone normalmente un "navegante" de Web
y cmo puede un programador ayudarle a encontrar su camino ... o a perderse ms irremediablemente.
Las complejidades de la navegacin
Dnde falla el "hilo de Ariadna"
Botones de navegacin
Botones que entorpecen
Dnde poner los botones

Las complejidades de la navegacin

Todos los "browsers" (aplicaciones de consulta) disponen al menos de dos comandos bsicos: "Back" y
"Home", acompaados a veces de "Forward" como en el Netscape.
"Home" nos asegura que siempre podremos volver "a casa", es decir a la primera pgina de algn servidor de
Web cercano, al cual nos "colgamos" cuando echamos a andar la aplicacin. Cuando ya hemos avanzado,
"Back" nos permite volver a la pgina anterior, es decir la ltima que vimos antes de hacer "clic" en algn
vnculo . Con varios "Back", podemos retroceder paso a paso por el camino andado, ya que el browser
conserva en memoria una lista de nuestros "saltos", a modo de "hilo de Ariadna". "Forward" estar disponible
despus de algn "Back", para volver a avanzar por un camino ya recorrido.
Podemos graficar un recorrido tpico como una lectura (o breve revisin) secuencial de una serie de pginas.
Slo que estas pginas no estn necesariamente en un orden tan simple como las de un libro. Esto es lo
caracterstico -ventajoso y complejo a la vez- de los hiperarchivos. Entre una pgina y las otras, puede haber
muchos caminos posibles.
Para visualizar mejor lo complejo del asunto, representaremos (ver Grfico siguiente) la agrupacin de las
pginas (reas grises) en directorios (rectngulos numerados) tal como el programador las agrup (como
explicado en una pgina anterior). Las lneas grises horizontales indican la secuencia bsica de lectura. La
letra I indica que el documento es un ndice, es decir una pgina con un men, que da acceso a pginas de
subdirectorios contenidos en el mismo directorio.
Si no existiesen los vnculos hipermediales, slo podramos avanzar y retroceder por las lneas bsicas (las
grises horizontales del grfico), lo cual es equivalente a leer un libro. Pero aqu tenemos -generalmentemltiples enlaces entre una serie y otra. Sobre el esquema bsico colocamos ahora flechas negras para sealar
el recorrido de un "navegante" casual (que no habr usado el comando "Back"). Cada flecha corresponde
aqu a un 'clic' en un ancla y la navegacin por el link que efecta un cambio de pgina.

Ilustracin: Una posible navegacin

Dnde falla el "hilo de Ariadna"

Si el navegante se pregunta dnde se encuentra cuando llega a la ltima pgina sealada por las flechas, por
cierto no tendr punto de referencia para saberlo. Habra que ser experto y tener la intencin de "reconstruir"
la estructura de directorios para saber por cuantos de ellos se puede haber pasado. Incluso sera muy posible
estar conectado en ese momento con otro servidor de Web, incluso ubicado en otro pas.
Y si en este instante el lector desea volver a la segunda pgina del directorio 121, donde dej la secuencia
bsica para dar "hipersaltos", deber retroceder 4 pasos (con "Back")? Y si di un nmero mucho mayor de
saltos y desea volver atrs? Ya sabemos que los browsers mantienen una "historia" de la secuencia de saltos
(visible por ejemplo en el men "GO..." y, ms detalladamente, en la opcin "History" del men Window de
Netscape; ver Grfico).

Pero la lista de "GO...;" o "History" no permanece completa. As, por ejemplo, si lemos algunas pginas del
directorio 112 y luego volvemos al ndice del cual depende (que encabeza el directorio "12") para entrar
desous a la serie del directorio 131, nuestro paso por el 121 desaparecer y la lista se volver a construir a
partir del ndice 13 hacia el 131. Del mismo modo si retrocedemos hasta el 1 y pasamos al 12 y al 121 o el
122, ya no tendremos a la vista en el men "GO..." las "bajadas" anteriores al 13.

Esto es una caracterstica de la estructura jerrquica en forma de rbol: cuando se vuelve por una rama hacia
el tronco y se elige otra rama, no queda rastro de la rama anterior. Aqu es donde falla el hilo de Ariadna.
Pero al contrario, si hemos saltado de una rama a otra (sin volver al nodo en que una se une a otras),
podremos an ver los puntos de salto.
Esto lo puede verificar fcilmente revisando de tanto en tanto su men "Go...".
Si bien esta dificultad slo puede ser superada gracias al conocimiento de la misma y a cierta disciplina del
navegante, tiene consecuencias importantes para el programador en relacin a la inclusin de "botones" de
navegacin. Especial cuidado requieren los que ofrecen formas de "retroceder" en la lectura.

Facilitar la "navegacin": Botones

Botones de navegacin
Botones que entorpecen
Dnde poner los botones

Botones de navegacin
Tanto para "alegrar" grficamente una pgina como para facilitar la navegacin, es usual que se inserten
"botones" especiales o "iconos de navegacin" en las pginas. stos pueden estar en distintos lugares,
frecuentemente debajo del ttulo cuando son opciones de tipo "men" o al final de las pginas cuando
sugieren lecturas complementarias. Generalmente es ah, al final de las pginas, que encontramos tambin
botones para avanzar o retroceder longitudinalmente (es decir como en un libro).
Para que al lector le sea relativamente fcil entender a dnde ir al activar el botn-ancla , es indispensable
que el autor haya previsto la dificultad. Esto significa usar un smbolo monosmico (e.d. interpretable de una
sola manera) o incluir un texto que dirima toda confusin posible.
Mostramos aqu las convenciones ms comunes que, salvo error grave del programador, no deberan
prestarse a una mala interpretacin:
= Ir al principio: Debe enviar al "ndice" de mayor nivel jerrquico (la pgina inicial, e.d. el
"index" del "dir_1" de nuestro ejemplo)
= Avanzar: a la pgina siguiente, en una lectura secuencial (como si se leyera un libro).
= Retroceder: a la pgina anterior, en una lectura secuencial. (Pero usar este botn implica suponer
que el lector tendr en cuenta que podra haber cambiado de directorio).
Botones que entorpecen
Otros botones sin embargo, aunque tambin convencionales, pueden guiar por pistas equvocas y deberan ser
proscritos (o usarse siempre con un texto clarificador). Son los siguientes:

= "Anterior": debera remitir a la pgina que encabeza la serie secuencial ("E"), pero tambin se
usa a veces para volver al inicio de la misma pgina o a la pgina anterior (por una confusin con el signo
"Retroceder").
= "Retroceder saltando": debera ser al ndice del nivel jerrquico en el cual se est, pero tambin
retrocede, a veces, un nivel ms. Es la mejor forma de confundir al lector!
En ambos casos interviene un retroceso jerrquico, que lleva al lector hacia un lugar totalmente inesperado y
generalmente incomprensible si hubo antes un salto de un subdirectorio a otro. Volvamos a nuestro ejemplo,
con el navegante en la pgina sealada del directorio 131 (ver abajo: penltimo paso marcado por las
flechas). Si ah oprime un botn que lo enva al encabezamiento (E) o al ndice (I) que comandan ese
directorio, podra no entender en absoluto qu tiene que ver con la serie a la cual entr por el conducto bsico
inicial 1 -> 12 -> 122. Si slo fue leyendo y eligiendo links que le interesaban, ha pasado sin saberlo por el
directorio 12/122 y del 12 al 13 para llegar al 131. Mientras piensa que el encabezado y el ndice deben ser
del 122, son en realidad del 131. Y slo mostramos un recorrido mucho ms breve que lo que ocurre
habitualmente! Imagnese despus de una docena de saltos!

En consecuencia es recomendable evitar este tipo de botones. Y si es importante que el lector sepa en qu
lugar est, hay un medio muy fcil: indicrselo al principio de la pgina, con un epgrafe que indique la
derivacin jerrquica, como en la ilustracin que sigue. Pero, pese a su utilidad, es poco frecuente encontrar
este tipo de solucin -bastante sencilla- en la WWW. Es de esperar que se vaya generalizando en los mdulos
de estructura compleja.

Otra solucin es que la usamos nosotros en este curso: hay un logotipo que identifica el curso,
el color del margen izquierdo es caracterstico del tipo de pgina y el ttulo principal siempre
indica en qu captulo se est.

Donde poner los botones

Despus de navegar por numerossimas pginas de Web, podemos ver que se encuentran principalmente dos
tipos de situaciones. La primera corresponde a botones colocados al final de las pginas, para sugerir al lector
por dnde puede seguir o cmo volver a pginas anteriores. En este tipo de configuracin, se da por sentado
que leer la pgina hasta el final y luego optar por seguir por alguno de los caminos sugeridos (o usar
alguno de los comandos del browser). Tambin se estima que si no deseaba leer la pgina, despus de ver su
ttulo, har un "Back" o "Go..."
Otra situacin que tiene cierta frecuencia es la repeticin de los botones del men inicial (iguales o de
tamao menor) debajo del ttulo. Aqu se ofrece al lector un conjunto de opciones para desviarse si no desea
leer la pgina. Eventualmente la misma serie se repite al final para que, si ley todo, no deba volver al
principio para seguir navegando.
Una tercera alternativa, poco frecuente, es la que hemos encontrado en el "Manual de Estilo" de la
Universidad de Yale. Aqu se recomienda colocar una barra con botones de navegacin al principio (antes del
ttulo) y al final de cada pgina. No siempre puede sostenerse lgicamente esta sugerencia: Si el lector lleg a
esta pgina, debi tener alguna razn para ello, y lo primero que desear hacer es verificar si contiene
realmente lo que esperaba. Esto implica al menos leer el ttulo y -seguramente- algo ms, como un men
interno o prrafo introductorio. Mientras no obtenga esta informacin, no navegar, a menos que se d cuenta
de que se haba equivocado, en cuyo caso usar el "Back" y no necesitar otros botones.
Hemos seguido aqu la propuesta estilstica de Yale, pero teniendo cuidado de que se pueda leer de inmediato
un texto significativo, como el ttulo del captulo y del acpite.
Las nuevas especificaciones del lenguaje HTML permiten ahora dividir la pgina con marcos ("frames") y
crear uno en que se mantengan permanentemente los botones de navegacin o men bsico del mdulo. Pero
hemos sealado ya (ver "Layout general de pgina web, n.11")que este sistema tambin presenta numerosas
desventajas, que lo hacen pocas veces aconsejable.
En consecuencia, lo ms indicado parece ser:

Si la pgina es corta: colocar los botones de navegacin sea debajo del rea de titulacin sea al final.
Si la pgina tiene mayor extensin: colocar los botones en el rea de titulacin (encima o debajo del
men o ndice del contenido de la pgina, si lo hay) y tambin al final de la pgina si sta es larga.

Si estamos en este ltimo caso, la serie de botones del principio y la serie del final sern probablemente -pero
no necesariamente- las mismas. En efecto, el contenido puede dar origen a algn tema nuevo para el cual se
justifique un botn al final, el cual no tendra razn de ser antes de realizar la lectura. Pero, obviamente, este
tipo de caso no ha ser el ms generalizado.
En esta misma pgina puede encontrar un buen ejemplo de dnde colocar los botones de navegacin.

Documentacin
Como en todo proyecto de computacin, se recomienda documentar adecuadamente los directorios y sus
contenidos. Como mnimo, debera anotarse:
la estructura jerrquica (directorios y nombres de los documentos contenidos en cada uno)
las anclas y los links estructurales (puntos de origen y de "destino"); con nombre HREF y significado,
por ejemplo:
/dir_121/: (Computacin)

Pginas:
index.html
sdistr.html = Sistema distribudo
ccien.html = Computacin cientfica

Segmentada en:
NAME="objetivos": Objetivos
NAME="recursos": Recursos Computacionales
etc.
para las ilustraciones: hacer una lista de los nombres codificados (f_xxx.jpg) junto con la indicacin
de lo que representan (y es conveniente anotar el tamao de cada una), por ejemplo:
/fotos/
g_board1.gif
e_mainfr.gif
f_babbag.gif
f_chip.gif
f_mainfr.jpg

402x236
200x136
90x128
120x158
400x272

Motherboard
Computador mainframe
Babbage (cara)
Chip
Computador mainframe (foto)

Aqu
"g_" indica grfico
"e_" indica estampilla
"f_" indica foto
lo cual permite ordenar y reconocer con facilidad el tipo de ilustracin