7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 1/23

Diseño de documentos HTML (Internet o Intranet)

Introducción

Aunque aplicaciones multimediales pueden ser creadas con diferentes "generadores de aplicaciones", comHyperCard, AuthorWare y Director, el lenguaje de hipertexto (HT! "HyperText ar#ing !anguage"$ e

hoy el recurso %&sico com'n ya que es el 'nico que permite la creacin de sistemas hipermediales qufuncionen tanto en forma independiente (en CD)*+ por ejemplo$ como en la red nternet- .u importancy omnipresencia es tal que generadores cl&sicos de soft/are multimedial como Director y AuthorWare ofrecen en nue0as 0ersiones que permiten la instalacin en /e% (01a HT!$ de los proyectos creados coellos-

2- 3l "lenguaje" HT! 4- !a creacin y composicin de las p&ginas 5- !a estructuracin de la p&gina de We% 6- Componentes de una p&gina 7- *ecomendaciones t8cnicas 

1. El lenguaje HTML

3l "HT!" ("HyperText Marking Language") o "lenguaje de marcacin de hipertexto" no es propiamente ulenguaje de programacin, ya que no se compone de "comandos" que determinen operaciones d procesamiento sino de instrucciones que indican de qu8 manera de%en ser exhi%idos en pantalla los distintcomponentes de una "p&gina"- 3n este sentido se parece m&s %ien a un procesador de pala%ras, aunque lo programas que se usan en uno y otro caso pueden ser %astante diferentes-

Cualquier aficionado a la computacin est& en condicin de usar este lenguaje, de estructura muy sencilla

 poder inmenso- A pesar de que existen aplicaciones especiales para crear p&ginas de /e%, si se aprende  %&sico, es posi%le crearlas con un simple procesador de pala%ras- 9or cierto existen tam%i8n editores dHT! que ofrecen crear la p&gina sin sa%er nada de este lenguaje-

:na p&gina creada en cualquier computador personal puede ser 0ista inmediatamente en el mismo si dispone de una aplicacin, llamada"%ro/ser" ("na0egador"$, sea ;etscape o 3xplorer, que son las dos madifundidas- ;etscape es hoy el m&s com'n, pero los comandos que expondremos son reconocidos por am%o

!as instrucciones que conforman el lenguaje HT! se llaman "etiquetas" (en ingl8s "tags"$- 9ermitedefinir las distintas partes de una p&gina, la forma en que se de%e u%icar el texto y las ilustraciones en  pantalla, los 01nculos para pasar de una p&gina a otra, las &reas en que el lector podr& e0entualmen

introducir datos (mediante "formularios"$, etTam%ien acepta la insercin de cdigos de un 0erdadero lenguaje de programacin, el que permite una mayointeracti0idad- De 8l ha%lamos en los complementos (cf- "Adiciones al HT! <a0a y <a0a.cript"$

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 2/23

2. La creación y comosición de las !ginas

!a creacin de una p&gina de /e% siempre ha de iniciarse con la redaccin del te"to que se 0er& en pantallasu adaptacin insertando )manualmente o mediante alg'n tipo de editor de HT!) las "etiquetas" (comandode HT!$ que aseguren su correcto despliegue-

3xisten hoy muchas aplicaciones que ayudan a colocar estas etiquetas sin necesidad de conocer el cdigHtml- !as 'ltimas 0ersiones de icrosoft Word para 9C permiten redactar un documento en el procesador d

 pala%ras y luego guardarlo como "Documento HT!"- ncluso permiten insertar ilustraciones (en"nsertar"$, pero se de%e disponer pre0iamente de las ilustraciones en el formato adecuado (gif o jpg$ parque la insercin funcione correctamente- (3ste sistema tiene %astante limitaciones, pero puede ser 'til pacrear p&ginas personales o "prototipos" iniciales$-

Tam%i8n existen otras aplicaciones, m&s directamente orientadas a la creacin de las p&ginas, como ;etscap=old ( que es una 0ersin del na0egador acompa>ada de un sistema de edicin$, Claris Home9age (paacintosh$ o ?uic#.ite (para 9C.i %ien estas aplicaciones son 'tiles para principiantes, es necesario tener en cuenta que pueden introducetiquetas in'tiles y )si no se tiene mucho cuidado) 01nculos de na0egacin errneos-

?uic#.ite 4-7 parece ser la mejor herramienta disponi%le hoy para usuarios de 9C (Windo/s@7 o ;T6-B$- .e puede o%tener una 0ersin de prue%a del sitio /e% del fa%ricante Delta9oint, y luego comprar una licencia por correo electrnico-

3n todos los casos, para apro0echar correctamente estas herramientas, es con0eniente tener un conocimien %&sico de las instrucciones HT!, a'n sin conocer el cdigo correspondiente- 3s lo que proponemos en  presente y la siguiente p&gina-

9ara un tra%ajo m&s profesional, tam%i8n existen editores de HT!, que incluyen una serie de men's  %arras de herramientas que ayudan a generar las etiquetas todas ellas aparecen a la 0ista, con lo cual  puede controlar muy de cerca la contruccin de la p&gina, lo cual no ocurre ha%itualmente con laplicaciones de dise>o W.W= (What You See Is What You Get $ como 9ageill-

9ara acintosh podemos recomendar el "HT! 3ditor" o el "We% Wea0er"- Am%os pueden encontrarse en las p&ginas "ac"  del ser0idor de share/are "Tuco/s", replicado en el ser0idor de nuestra uni0ersidad-3n las p&ginas  "Windo/s7" del mismo ser0idor, se encuentran 0arios para este sistema operati0o, con larespecti0a calificacin (;o los hemos pro%ado$-

Tam%i8n es posi%le escri%ir todo el texto y cdigo en el procesador de pala%ras, guardando el documentcomo "slo texto", ya que 8ste es el formato de los documentos HT!, si %ien la extensin (letras finales dnom%re que caracteriEan el tipo del documento$ han de ser "-htm" o "-html"-

La !gina

3s importante tener en cuenta que el na0egador lee la p&gina HT! (texto y etiquetas$ y empieEa sdespliegue en pantalla partiendo en la esquina superior iEquierda- .i el contenido de%e ser colocado al centro marginado a la derecha, es posi%le indicar al inicio (y e0entualmente cam%iarlo despu8s, por ejempdespu8s de los t1tulos$- Tam%i8n se puede definir de inmediato la existencia de una Ta%la que mejore ldiagramacin- .i tenemos en cuenta que el ancho de la 0entana en que el usuario 0er& la p&gina depende de y no del autor, hemos de deducir que las reales posi%ilidades de diagramacin son %astante m&s limitadas quen los productos en papel- Hoy, sin em%argo, se est& generaliEando el dise>o %asado en el supuesto de un0entana de F6B por 6GB pixeles, que es el tama>o m&s com'n de las pantallas de computadores personales-

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 3/23

!as 'nicas instrucciones que afectan la p&gina en su totalidad son las que la cortan e0entualmente en sectorediferenciados o "cuadros" ("frames" $ y la definicin de un color o de una imagen de #ondo-

$TE%&I'% Al nom%rar los documentos destinados a una /e% (cuando se "guardan"$, se de%e tener cuidado de colocar un nom%re corto sin acento y sin ningn esacio, de lo contrario los hiper01nculos nfuncionar&n-!o m&s com'n es usar nom%res de hasta G caracteres )aunque pueden ser m&s largos) y usar el undersco( $ para unir pala%ras o una pala%ra y un n'mero, si es necesario (por ejemplo foto2-jpg$-

*. La estructuración de la !gina de +e,

!a "p&gina" Html se estructura formalmente al menos en dos parte el enca%eEado ( Head   $ y el cuerp( ody $, m&s un e0entual pie de p&gina-

• 3l enca,e-ado  contiene algunas definiciones destinadas al procesador, no exhi%idas en pantallcomo una indicacin del tipo de documento y de algunas referencias (optati0as en la actualidadacerca de su contenido o cmo fue generado- Tam%i8n contiene un dato que se exhi%e en la "%arra dt1tulo" de la 0entana en que se 0er& la p&gina, dato que es llamado "t1tulo" ( "Tit!e"  $ y que no de%confundirse con el o los t1tulos del texto (llamados "Headings"  $-

• A continuacin se indica el inicio del "cuero" junto con las caracter1sticas generales de 8ste, como color del fondo y del texto y e0entualmente la imagen de fondo y la alineacin-

• 3n el ie (facultati0o$ se colocar&n e0entualmente datos identificadores del creador de la p&gina o dser0idor en el cual se encuentra, informacin facultati0a que pertenece estructuralmente al "cuerpo(la etiqueta de t8rmino de cuerpo se coloca despu8s, cerrando la p&gina$-

!a p&gina, sin em%argo, de%e ser considerada desde otro punto de 0ista el de su contenido- Aunque el Htmadmite distintos tipos de componentes, es el texto el que determina la p&gina- 3n una p&gina Html podrha%er 0arias ilustraciones (fotograf1as, gr&ficos planos o tridimensionales, 0ideos, sonidos$ pero hay un stexto y este texto es el que contiene todas las etiquetas que indican como exhi%ir el conjunto (el propio texty los dem&s componentes$- 30entualmente )caso l1mite) una p&gina podr& no contener ning'n texto destinada la lectura, pero, en este caso, contener instrucciones respecto de la o las ilustraciones por exhi%ir-

Todas las relaciones que permiten na0egar entre una p&gina y otra o entre un punto y otro de una mism p&gina se denominan "01nculos" (!inks $- 9ara que un 01nculo funcione, de%e estar identificado como taltener asociada la direccin del punto de destino, que es llamado "%lanco" ( target   $- !as etiquetas quidentifican de este modo los 01nculos son llamadas "anclas" (anhor  $

. Los comonentes de una !gina

• Textos • Diagramacin ) Ta%las • lustraciones • Iormularios • .cripts y applets 

Te"tos

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 4/23

!os textos pueden ser redactados tipeando de la manera ha%itual o haciendo "cortar y pegar" desddocumentos existentes- .in em%argo se de%e tomar en cuenta que los na0egadores no reconocen los espaciom'ltiples entre pala%ras (se reducen a uno slo$, ni las ta%ulaciones, ni las separaciones ha%ituales d p&rrafos- .e de%en insertar etiquetas especiales para asegurar los cortes (3sto ocurre en forma autom&tica "=uardar como Html" en Word y en los programas de dise>o W.W=, como tam%i8n muchas de las otrespecificaciones que mencionamos aqu1$-

.e de%e tomar en cuenta que la tiogra#/a  depende esencialmente de las preferencias fijadas por na0egador)cliente, es decir del usuario que leer& la p&gina- 9or ello, a pesar de que las 'ltimas 0ersiones dHT! permiten seleccionar una fuente tipogr&fica determinada, nada garantiEa que la tenga el cliente ni quno haya determinado pasar por alto las instrucciones al respecto que pudieran estar en el documento, parcolocar la tipograf1a que el prefiere- +curre lo mismo en relacin al tama>o de las letras, raEn por la cual locam%ios de tama>o se de%en hacer preferentemente usando etiquetas que indican un aumento o undisminucin en forma relati0a (un tanto m&s grande o un tanto m&s chico que el 0alor "normal" definido poel usuario por ejemplo Size=+2$-

!os t/tulos, llamados "Headings" , se definen jer&quicamente usando n'meros que 0an desde 2 (el mgrande posi%le$ hasta F (el m&s peque>o$- 3l 6 corresponde generalmente al tama>o del texto normaAdem&s de determinar el tama>o, este comando o%liga al texto a aparecer en una l1nea (o %loque de l1neasseparado del resto y en negrita-

9or otra parte, las ala,ras pueden ser marcadas para aparecer en negrita, en ursi#a o como "letras teletipo" (aspecto de m&quina de escri%ir$-

!os textos, adem&s, pueden ser ordenados de distintas formas (0er a continuacin$-

9&gina correlati0a en anual HT! 3l Texto 

Diagramación 0 Ta,las

3l texto puede ser alineado junto al margen iEquierdo o al margen derecho, o tam%i8n centrado- 3algunas 0ersiones recientes es posi%le indicar una justificacin a am%os lados- .in em%argo, estofrece poca flexi%ilidad- 3xisten 0arios complementos

• .e puede aumentar el margen iEquierdo transformando uno o 0arios p&rrafos en una " list

(tal como la entiende el HT!$, como lo hacemos en el presente caso- 3l HT! genera pdefecto la "%olita" (forma llamada "lista desordenada" o tam%i8n "men'"$, pero es posi%eliminar la %olita o reemplaEarla por letras o n'meros (en cuyo caso se ha%la de una "listordenada"$-

.e puede 0ol0er a ampliar el margen dando la instruccin de colocar otra lista en lugade un p&rrafo de la primera lista (y as1 sucesi0amente$-

• +tro sistema es el de las "listas de de#iniciones" se puede marcar una pala%ra ("entrada"enca%eEado de la definicin$ y luego el texto correspondiente, que ser& desplegado con unsangr1a, como en el siguiente ejemplo

3ntradaTexto de la definicin

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 5/23

3sto a'n no resuel0e el pro%lema de la confeccin de columnas, para lo cual se necesita crear unta,la, la que puede ofrecer una flexi%ilidad mucho mayor, pero a cam%io de cierta complejida(especialmente cuando se de%en com%inar filas o columnas que se su%di0iden slo en algunosectores$-De partida es importante tener claro que toda ta%la se compone primero de filas y cada una se di0iden celdas que corresponden a las columnas- !a ta%la puede tener (o no$ %ordes 0isi%les y espacio0aria%les (definidos por el dise>ador$ entre los m&rgenes y el contenido- =eneralmente recomenda%le crear las ta%las con %orde para 0er %ien qu8 ocurre, y luego )cuando todo est8 %i8n %orrar el %orde si no se lo desea (pero es necesario asegurarse que el programa utiliEado permite estipo de modificacin, de lo contrario se necesitar& corregir la etiqueta con otro procesador$-

3l uso de ta%las tiende a hacer m&s lenta la operacin del computador)cliente, especialmente si tienemuchas celdas, porque el receptor de%e calcular la mejor forma de exhi%irlas, seg'n la 0entandisponi%le- .e puede acelerar este c&culo predefiniendo el ancho de la ta%la (en pixeles$ y, en l0ersiones m&s recientes (5 o superior$, tam%i8n de la columnas-

9&ginas correlati0as en anual HT!en's y listas Ta%las 

Ilustraciones

!as ilustraciones m&s comunes ser&n di%ujos o fotograf1as, las cuales de%en ser preparadas con unaplicacin de gr&fica y guardadas en formato "=I" o "<93=" (el nom%re del archi0o de%e termincon "-gif" o "-jpg"$- 3stos formatos comprimen la imagen para acelerar su transmisin- 3l forma=I slo admite 47F colores (adecuado para gr&ficos$ mientras el <93= admite miles de colore(preferi%le para fotograf1as$-

Tam%i8n es posi%le, en teor1a, insertar documentos de audio y de 0ideo (en formatos comprimidoespeciales para /e%$, pero se de%e tener en cuenta que a pesar de la compresin estos archi0os somuy grandes y toma mucho tiempo transmitirlos (unos cuantos segundos de un 0ideo inferior a ucuarto de la pantalla ocupa 0arios % y requiere 0arios minutos para su transmisin$-

!as ilustraciones pueden insertarse a la iEquierda, al centro o a la derecha, entre dos p&rrafos de texto (si no son centradas$ con texto a un lado- .i no se utiliEa una ta%la para u%icar una ilustracin, etiqueta HT! que la llama siempre de%e ir A;T3. del texto que aparecer& a su lado (incluso si texto 0a a la iEquierda y la imagen a la derecha$-

9&gina correlati0a en anual HT!!as im&genes 

ormularios

3l sistema del HT! no slo permite traer p&ginas y sus componentes, tam%i8n permite en0iar datoa tra08s del sistema de correo electrnico- 9ara ello se ocupan formularios, que definen &reas en lcuales se puede tipear, men's desplega%les o %otones por seleccionar- Al final se adjunta un %ot"3n0iar" (Su$mit $, que es el que ordena al computador en0iar los datos tipeados o seleccionados en

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 6/23

formulario-9uede 0er un ejemplo cada 0eE que ingresa al curso, en la "9&gina de *egistro"-

crits y alets

Dado que el HT! slo se compone de instrucciones relati0as al despliegue de la informacin e pantalla, se recurre a otro lenguaje de programacin para ordenar al computador del cliente qu

realice alguna operacin, como por ejemplo 0erificar una respuesta dada en un formulario- 3sto puedlograrse sea incluyendo el cdigo (llamado "ja0ascript"$ dentro del documento HT! o %ien0iandolas instrucciones como componente anexo, que es lo que se llama "applet" (que correspondal lenguaje <a0a$- :n script es 0isi%le si se pide al na0egador que muestre el documento "fuent(%ie& as Soure$, mientras del applet slo se puede 0er la referencia en ese documento-

&s informacin en <a0a y <a0a.cript-

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 7/23

Diseño de documentos HTML (Internet o Intranet)

3. 4ecomendaciones t5cnicas

A modo de complemento y para terminar este cap1tulo, transcri%imos aqu1 la mayor parte de lrecomendaciones que utiliEamos para guiar la confeccin de los mdulos de una /e%

• 3structura •  ;om%res de archi0os • Iormatos • 9ortadas • +%jetos gr&ficos comunes • T1tulos • Di0isiones • Documentacin 

Estructura

!a "We%" de la :ni0ersidad ("Ariadna"$ contiene toda la informacin oficial, di0idida en "mdulos" (todlas entradas de primer ni0el jer&rquico a las cuales se llega desde la portada, que es nuestra "home page"!os mdulos se di0iden e0entualmente en su%)cap1tulos y luego en p&ginas (4J ni0el jer&rquico$, cada una dlas cuales constituye un documento de texto HT! (con ilustraciones anexas$- !as p&ginas se su%di0idee0entualmente en segmentos, que son las distintas partes de las mismas a las cuales se puede acceder desdun men' al inicio de la misma p&gina-

!a estructura lgica es por lo tanto /e% K mdulo K (su%)cap1tulo$ K p&gina K segmento-

:na p&gina puede tener p&ginas su%ordinadas, para detallar informacin que ser1a demasiado largo incluir duna 0eE con0iene 0erificar que una p&gina no se demore mucho en cargarse en el computador, lo cuadepender& tanto del texto como )so%retodo) de la cantidad de ilustraciones y de la predefinicin del tama>de 8stas-

%om,res de arc6i7os

9refiera poner todos los nom%res de los archi0os en min'sculas y de una longitud m&xima de G caractere(m&s la "extensin"$- :tilice solamente el alfa%eto ingl8s (;unca use acentos ni letras exclusi0as dcastellano u otro idioma en el nom%re con el cual guarda un archi0o$-

Iacilita reconocer los componentes utiliEar letras iniciales caracter1sticas, especialmente si no se agrupa cadtipo de componente en un directorio ("carpeta"$ separado- 3jemplos

• Lotones especiales %xxx-gif

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 8/23

• Iotos fxxx-jpg• 3stampillas exxx-gif o exxx-jpg• !ogotipos lxxx-gif• apas mxxx-gif• conos(pictogramas$ ixxx-gif• Mi>etas de titulacin ("%anners"$ txxx-gif

!os textos 0an ha%itualmente sin letra diferenciadora xxx-html

ormatos

• Iotos ("miles de colores" o 47F colores, a definir para cada proyecto$

9ara fotos insertas en el texto, se recomienda un tama>o m&ximo de 4BBx4BB pixeles (9uedeestar con lin# a una copia a plena pantalla$-Con0iene guardar copia de los originales en formato no comprimido al menos hasta que todest8 instalado y pro%ado-

•

3stampillas uniformar a B pixeles de alto-• Mi>etas de titulacin ("%anners"$ max- 65B pixeles de ancho y 2BB de alto, en 47F colores-

!os elementos gr&ficos que requieran fondo transparente de%en ir en 47F colores y formato "-gif" para qu puedan ser traspasados al formato adecuado-

9ara acelerar la recepcin de la informacin, se recomienda anotar en la hoja HT! el tama>o exacto dcada ilustracin N= WDTHO0alor H3=HTO0alor .*CO"--- "P (.e puede prescindir de esto para loiconos, ya que son muy chicos$- .e recomienda adem&s incluir un texto alternati0o para los casos en que nse %ajen las im&genes N= .*CO "---" A!TO "texto alternati0o"P

8ortadas

.e distinguir&n 0arios tipos de portadas, de acuerdo a su importancia jer&rquica, caracteriEadas por 0i>etas denca%eEamiento de diferente tama>o, por ejemplo

Q 9ortada A 9ortada de m&xima prioridad, con ilustracin de max- 65B pixeles de ancho y 46B de alto, men por "mapa sensi%le" (&reas de la ilustracin que responden a los "clics" del ratn$, texto limitado a los datodel pro0eedor de la informacin, contacto (e) mail$ y e0entual lin# a documento que detalla los integrantedel equipo a cargo de la confeccin del mdulo-

Q 9ortada L de ni0el jer&rquico medio, con 0i>eta de max- 65B pixeles de ancho y 2GB de alto, men' de listtexto e0entual (corto$, datos del pro0eedor, del contacto (mail$ y de los creadores si no est&n antes en un portada tipo A-

Q 9ortada C o p&gina con enca%eEamiento gr&fico ni0el jer&rquico %ajo, destinada a documentos %re0es, coo sin men' (de lista$- lustracin de max- 65B pixeles de ancho y hasta 24B de alto, men' solo por lista, texto

(3l ancho de 65B pixeles aqu1 especificado est& calculado para permitir la 0isualiEacin e impresicon el ancho de una hoja carta-$

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 9/23

',jetos gr!#icos comunes

Hemos creado %otones e iconos que se usan de la misma manera en todos los mdulos (no en mduloautnomos como este curso$- Tam%i8n est&n guardado en un directorio especial para facilitar su uso em'ltiples proyectos

  9otonesAl final de cada "p&gina", se incorporan 4 %otones

• Lotn que en01a al en' nicial• Lotn que en01a al en' del mdulo

  IconosContamos con iconos para se>alar la persona a contactar, el pro0eedor de informacin, el redactor y tam%i8n para insertar un lin# hacia una foto o un gr&fico no 0isi%le en la p&gina-

T/tulos

9referimos poner t1tulos en NH4P para titular la p&gina si no hay 0i>eta gr&fica, y los ponemos en NH5dentro de la p&gina- ;o usamos tama>os con numeracin NHP superior a 6 para e0itar que se achique texto-

Di7isiones

!os di0ersos segmentos de una misma "p&gina" estar&n separados por una l1nea NH*P (grosor a elecci

 para la primera y la 'ltima se mantendr& grosor m1nimo para las di0isiones interiores$-9ie de p&gina

3n todos los mdulos de%e quedar constancia (al final de la portada o en documento anexo a 8sta$ de lonom%res de los pro0eedores de informacin y de los realiEadores-3s con0eniente terminar siempre la hoja HT! con N9P para asegurar una %uena lectura de la 'ltima l1nde texto-

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 10/23

El diseño de :;e,s:

8rinciios generales ara un :sitio: de +e,

9ara el dise>o de un "sitio" o un mdulo de /e% es con0eniente aplicar las siguientes recomendaciones(Weinschen#, <amar y eo, pp-45G)46G$2- 9ro0eer contenidos sustanti0os y actualiEados (lo que la audiencia quiere reci%ir, no lo que el emis

quiere decir$, lo cual requiere conocer %ien los intereses de la audiencia-4- oti0ar %ien en la primera p&gina, para que el 0isitante marque el sitio como interesante-5- Dar prioridad a la facilidad de uso-6- Crear un dise>o gr&fico unificado (0i>etas y colores coherentes$-7- :na organiEacin jer&rquica de las p&ginas facilita la comprensin y la na0egacin, pero hay que asegur

al lector que al tercer @clic@ encontrar& lo que %usca (&s ni0eles slo de%en contener detalles m&s @clicde%er1an corresponder a na0egacin trans0ersal$-

F- !a p&gina inicial ("home page"$ de%e dar acceso a los di0ersos contenidos pero tam%i8n con0encer dinter8s del sitio se de%e informar y moti0ar a tra08s de la imagen y el men'-

R- .i se usa una imagen)mapa sensi%le, colocar texto equi0alente (para usuarios que no %ajen la imagen para los spiders, programas que a%astecen los "motores de %'squeda" de la World Wide We%$-

G- :sar su%menus si el sitio es muy grande-- Tener en cuenta el ancho de %anda (si el acceso ser& por modem, no puede ha%er ilustraciones pesadas

multimedia$-2B- Asegurar puntos de referencia permanentes, para que el 0isitante no se pierda (%arra de iconos o fram

con men'$- 9uede ser con0eniente incluir un mapa gr&fico del sitio y es siempre aconseja%le incluir unta%la de contenido con todos los lin#s pertinentes-

22- dentificar el mdulo o sitio en todas sus p&ginas y facilitar en todas un ancla que remita a la portada e0entualmente hacia las di0isiones mayores), ya que un motor de %'squeda puede hacer llegar el lectorcualquier p&gina-

24- Antes de incluir marcos (frames$ y rutinas en <a0a, hay que estar seguro de que los destinatarios disponede un na0egador con la capacidad requerida- .iempre hay que programar para un m1nimo y no um&ximo-

25- 30itar poner informacin solamente en forma gr&fica (el lector puede desha%ilitar la recepcin dim&genes para ir m&s r&pido$- ncluir siempre, por lo tanto, men's 0er%ales-

26- 30itar las anclas dentro de un texto (si no es un men'$ interrumpen la lectura- 3s mejor ponerlas al finde un p&rrafo- De%en sugerir con claridad lo que se o%tendr1a al acti0arlas (y el tama>o del documen por reci%ir, si es muy superior al promedio ha%itual$-

27- Tener mucho cuidado con lin#s secuenciales (p&gina pre0ia y p&gina siguiente$ ya que no estar& claro se refieren a la secuencia f1sica (pre0ista por el emisor$ o a la que est& siguiendo el lector (que puedha%er 0enido "saltando" desde otra "rama" u otro sitio$- Adem&s, la inclusin de secuencias es comple

 para la sustitucin de p&ginas ya que afecta la programacin de cada una-2F- antener en lo posi%le los colores estandar para los lin#s (0isitados y no)0isitados$, para e0it

confusiones-

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 11/23

La estructuración de contenidos ara +e,

:n proyecto de We% se presenta generalmente como un conjunto de p&ginas de hipertexto (HT!$ quconforman lo que podemos llamar

• "dulo nstitucional" cuando est& destinado a presentar una empresa o una organiEacin- .e tiendfrecuentemente a llamarlo "Home 9age" pero, en sentido estricto, la "Home 9age" es slo la primer

 p&gina o "portada", con la identificacin del organismo y el men' de los contenidos informati0osser0icios ofrecidos o• "dulo nformati0o" (o 3ducati0o$ cuando est& destinado a dar a conocer acontecimientos (como e

la "9rensa interacti0a"$ o conocimientos de di0ersos tipos (produccin acad8mica, narrati0a, etc-$-

+%0iamente tam%i8n existen )numerosas) producciones destinadas a la entretencin, pero no correspondenuestro propsito a%ordar este campo particular-

Cada mdulo de este tipo puede ser el 'nico instalado en el ser0idor de WWW (computador conectado a red$ de una institucin o estar instalado junto a otros en dicho ser0idor o en 8l de alg'n pro0eedor dser0icio- :n proyecto de tecnolog1a educati0a es muy similar a un "mdulo institucional" y todo lo qu

digamos en este cap1tulo es 0&lido, en principio, para las dos categor1as mencionadas-

:n mdulo de /e% )institucional o educati0o) contiene toda la informacin que se desea hacer circuladi0idida en cap1tulos (todas las entradas de primer ni0el jer&rquico a las cuales se llega desde la portada$- !ocap1tulos se di0iden e0entualmente en su%)cap1tulos y finalmente en p&ginas, cada una de las cualeconstituye un documento de texto HT! (con ilustraciones anexas$- !as p&ginas se su%di0iden a su 0eE esegmentos, que son las distintas partes de las mismas a las cuales se puede acceder desde un men' al inicde la misma p&gina (.on se>alados, en Html, por la etiqueta NA ;A3O---P$-

!a estructura lgica es por lo tanto dulo K cap1tulo K (su%)cap1tulo$ K p&gina K segmento- 3s con0enientque esta estructura quede reflejada en la agrupacin de los documentos en directorios y su%)directorios en

computador- As1, ha%r& un directorio general que incluir& todo el material correspondiente al mdulo, y dichdirectorio contendr& su%)directorios con funciones comunes y su%)directorios que agrupar&n las p&ginas dun mismo cap1tulo o su%)cap1tulo-

!lamaremos "dir2" el directorio principal (en la realidad podr& llamarse "///" o "datadocs", dependienddel soft/are del ser0idor$- De%er& contener la portada (llamada "index-html", de acuerdo a las normas$ y losu%directorios- .er& con0eniente reser0ar uno de 8stos para archi0os de uso com'n, como las ilustracione)1conos, %otones, 0i>etas, etc-) que se repetir&n en m'ltiples p&ginas- !e pondremos "dir22"-

9ara 0isualiEar mejor esta estructura, representaremos (=r&fico siguiente$ la agrupacin de las p&ginas (&reagrises$ en directorios (rect&ngulos numerados$ tal como el programador las agrupar& (cosa ha%itualmen

desconocida del cliente)lector$- !as l1neas grises horiEontales indican la secuencia %&sica de lectura- !a letraindica que el documento es un 1ndice, es decir una p&gina con un men', que da acceso a p&ginas dsu%directorios contenidos en el mismo directorio-

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 12/23

:n directorio puede contener p&ginas unidas en secuencia (para ser le1das una tras otra$ como en el caso dlos dir242 y dir244 (donde la letra 3 indica la p&gina que enca%eEa la secuencia$- 9ero tam%i8n puedcontener p&ginas o archi0os independientes entre s1, como en el caso del dir22, o una meEcsecuencialKparalela como en los dir254 y dir262- , como en el dir254, el acceso podr1a ser solamente partir de un lin# desde otro archi0o, y no desde un men'-

+%0iamente el =r&fico anterior no es un %uen ejemplo para un proyecto concreto, ya que hemos inclu1ddistintos modos de agrupar los archi0os, resultando de ello un todo poco coherente- 3n la realidad, con0ien

definir una estructura de acuerdo a la complejidad del proyecto, para lo cual podr1amos definir tres tipos dcasos

(&s adelante ha%lamos de los pro%lemas de na0egacin que pueden presentarse en esta estructura-$

a. 8royectos simles

3n proyectos muy simples (con un n'mero total de archi0os que no so%repase de una docena$, no resulcon0eniente crear su%directorios %asta un slo directorio- !os tipos de documentos se diferencian f&cilmen por su extensin ("-html" para los textos, "-gif" para las ilustraciones, etc-$

,. 8royectos de mediana comlejidad

3n este caso con0iene agrupar los archi0os (files$ de acuerdo a la naturaleEa de los documentos los texto juntos en un su%)directorio, las ilustraciones en otro-

3sto explica, por ejemplo, la estructura del dir25, donde un su%)directorio se reser0 al texto y otro a lfotograf1as

• en el dir252 tenemos dos p&ginas de texto, secuenciadas, mientras• en el dir254 tenemos dos pares de fotos, que son las requeridas por las p&ginas del dir252

 primera imagen de cada par es una "estampilla", e-d- una reproduccin de tama>o reducido qu

aparecer& en una de las p&ginas de texto y que podr& ser acti0ada como lin# hacia la segunda foto, cual es una reproduccin de mayor tama>o, que el lector reci%ir& como documento separado slo si desea (<ustificaremos este proceder m&s adelante$-

.e utiliEar& preferentemente este tipo de estructura en mdulos que pueden tener hasta dos o tres docenas d p&ginas de texto, por lo cual ya no es con0eniente mantener todos los archi0os en un slo directorio

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 13/23

c. 8royecto de alta comlejidad

3n proyectos de alta complejidad con0iene aplicar una regla general de agrupacin relacionada con locontenidos (cap1tulos y su%)cap1tulos$ primero y, e0entualmente despu8s, de acuerdo a la naturaleEa de lodocumentos-

3n el ejemplo del dir262 se muestran dos p&ginas de texto correpondientes a un mismo cap1tulo tem&ticacompa>adas cada una de dos ilustraciones- Como el total es un n'mero reducido de documentos, no e

necesario aumentar las di0isiones- 9ero, si este n'mero superase las dos docenas, ser1a con0eniente aplicar segundo criterio y su%di0idir de acuerdo a la naturaleEa (textos 0s- ilustraciones$, como en el dir25-

!as formas de agrupacin sugeridas en los casos %- y c- est&n destinadas a facilitar a la 0eE el tra%ajo d programacin y la posterior "mantencin", es decir la sustitucin de los documentos sin afectar lreferencias de unos a otros (hyperlin#s$-

3stas sugerencias en torno a la estructuracin formal son el fruto de nuestra experiencia en el desarrollo dmdulo institucional de la 9ontificia :ni0ersidad Catlica de Chile (httpKK///-puc-cl$-

La inter#a- gr!#ica en ;e,

8ara roseguir es con7eniente dominar los concetos ,!sicos del :Lenguaje Html: y de

:Estructuración de !ginas Html:.(Lea rimero esas !ginas si no domina esos temas). 

 ;o todo lo que es posi%le dise>ar en un determinado equipo puede ser considerado 0&lido para un mduque se instale en un ser0idor de /e%- Marios factores externos han de ser tomados en cuenta el "ancho d %anda" disponi%le (es decir la amplitud y 0elocidad del canal de transmisin$ y tam%i8n la "plataform(sistema operati0o$, el na0egador y la calidad del monitor (pantalla$ usados por la audiencia)tipo-

• Lro/sers • Ancho de %anda • 9o%lacin)meta • 9rue%a pre0ia • *eglas de dise>o 

9ro;sers

3n materia de 0isualiEadores (%ro/sers$, toma un a>o la difusin y actualiEacin a una nue0a 0ersin y otra>o el que los clientes se acostum%ren a las nue0as funciones y "extras" (plug)ins$, seg'n los c&lculos de firma .un %asados en las consultas a su ser0idor, los cuales pueden incluso estar so%redimensionados ya ques un sitio para expertos- 3xceptuando el caso de las ntranets, donde se puede esperar que todos tengaacceso a los mismos recursos, si el dise>ador no toma en cuenta este retraso de los clientes, causar pro%lemas a muchos de ellos- se de%e recalcar que los a0ances de HT! no hacen en a%soluto imposi%estar al d1a y, simult&neamente, ser0ir a'n a quienes slo tienen un na0egador de la primera generacin  posi%le hacer una "degradacin agraciada" (facilitando la recepcin para distintas 0ersiones de na0egador!os plug)ins de%en usarse con m&s cuidado, slo para elementos complementarios y se de%e a0isar de s presencia y rol (no pueden contener informacin importante$- (Helins#i, pp-5)64$ 

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 14/23

$nc6o de ,anda

!a 0elocidad de recepcin depende de la capacidad del canal de telecomunicacin, llamada "ancho d %anda"- De%ido al crecimiento explosi0o de la cantidad de usuario, esta capacidad siempre es menor de que pudiesemos desear, por lo cual no es lgico insertar muchos 01deos (muy "pesados" en cuanto a sdimensin en %ytes$ si el canal es estrecho y prximo a la saturacin- Tampoco lo es colocar ilustraciones dalta calidad "millones de colores"$ si la mayor1a de los usuarios slo tiene pantalla de 47F colores- Has2F se considera%a que la "norma" de la industria multimedial era la gr&fica de 47F colores- 9osteriormenthan ido creciendo paulatinamente los soft/ares y p&ginas en "miles de colores", especialmente para difusin de contenidos informati0os y cient1ficos, donde se hac1a m&s necesaria una calidad (casfotogr&fica-

8o,lación0meta

3n este sentido, no se de%e considerar que todos los que na0egan por nternet ser&n "clientes" siemprtendremos una po%lacin)meta preferencial (puede ha%er una primaria y una segundaria$ que es necesardefinir y caracteriEar, y para la cual se ajustar& el proyecto-

*ecordemos tam%i8n que, de acuerdo a las reglas del dise>o de todo tipo de proyecto informati0o formati0o, es indispensa%le definir %ien el o%jeti0o del mismo tanto del punto de 0ista del emisor como dreceptor y definir cmo y cu&ndo se espera que lleguen a 0isitar el sitio (/e% site$ por ejemplo parsolucionar alg'n pro%lema en su tra%ajo, para entretenerse, para in0estigar o preparar un informe-

Tam%i8n es necesario definir cmo llegar&n por un motor de %'squeda, por un men' (ntranet o nternet$,  por una direccin :*!-

8rue,a re7ia

gual que para otras interfaces, es indispensa%le hacer prue%as de la misma- De%e ser f&cil de usar, r&pida,entretenida, 'til, con informacin actualiEada, interacti0a- Def1nase un estilo y el1gense %uenas met&foras yrepresentaciones (cosa que a'n falta en muchos sitios /e%$- !os esquemas de na0egacin de%en ser preparados cuidadosamente, haciendo ojal& un guin del comportamiento esperado de los 0isitantes-(Helins#i(cf-Weinschen#---, pp-252)25R$ 

4eglas ara el diseño 

Teniendo en cuenta las reglas cogniti0as as1 como las reglas de la percepcin, se pueden precisar a'n malgunas reglas 'tiles para el dise>o de las portadas y de las p&ginas en general

• Dise>o de 9ortada • !ayout de p&gina • =r&fica • *edaccin 

Diseño de 8ortada

3n una "home page" o p&gina de men', es con0eniente que todas las opciones est8n en la primera 0entan0isi%le (sin necesidad de recurrir al scrolling$ es decir en un marco de F6Bx6GB pixeles como m&ximo (tama>o de pantalla m&s frecuente hoy$, ya que muchos clientes no ir&n m&s all&- De ser necesario, inclualgunos %otones como mapa sensi%le en esa &rea a pesar de que no todos los na0egadores los reconocer&

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 15/23

 podr&n ayudar a los que tengan al menos ya 0ersiones de 4J generacin- De%ido a la forma en que opera /e%, todo lo importante siempre de%e estar en la parte superior de la p&gina- 9ero si se trata de una p&gincon informacin 0er%al, la experiencia demuestra que el lector prefiere un scrolling largo antes que acti0repetidos lin#s- 3scri%ir %ien (claro y conciso$ es sin em%argo fundamental- !as anclas que se inserten en texto de%en agregarse con prudencia ya que producen tam%i8n pala%ras generalmente menos legi%les- Comya se>alado, es perferi%e colocarlos al final de un p&rrafo, ya que in0itan a cortar la lectura y pasar a otrlugar- nunca de%en en0iar a un texto irrele0ante- (Helins#i, p-64$ 

!as animaciones distraen e incluso molestan si son en ciclo permanente ("loop"$- ;o de%e ponerse m&s duna por p&gina- :na imagen de fondo tam%i8n es distracti0a y puede dificultar la lectura (preferir tramasfondos planos$-

.e de%e facilitar el reconocimiento de la u%icacin (y especialmente de la salida del mdulo si 8sto puedocurrir$, para lo cual un %uen sistema puede ser un peque>o logotipo o una delgada %arra de %otones enca%eEar cada p&gina o en el %orde iEquierdo, como lo hacemos en estas p&ginas- (Helins#i, p-65$ 

Layout general de !gina ;e,

Weinschen#, <amar y eo aconsejan aplicar las siguientes reglas en el dise>o de las p&ginas2- *ecordar que lo que se 0e de partida en la pantalla es cla0e- uchos 0isitantes no har&n un "scrollin

si no encuentran ah1 lo que %uscan-4- Toda p&gina de%er1a contener los siguientes elementos

o identificacin en la %arra de t1tulo,o t1tulo de p&gina,o lin#s hacia los principales tpicos del sitio So mdulo,o lin# hacia la portada, la identificacin de la institucin, el motor de %'squeda y el mapa d

sitio,o e)mail del /e%master-

5- Concentrar toda la funcionalidad (t1tulos y men's$ en la 0entana inicial (F6Bx6GB pixels$- De%ajo d8sta poner solamente informacin "no cr1tica" para la na0egacin-6- .i hay informacin importante m&s a%ajo, hacer e0idente la necesidad de scrolling (imagen o tex

cortado$-7- Determinar la longitud de las p&ginas seg'n la modalidad de acceso y tipo de contenido (larg

)completas) para explicaciones cortas para definiciones o informaciones puntuales, para respuestas %'squedas o si el acceso es por modem$- 30itar siempre que pase de 5 carrillas-

F- Crear un modelo %&sico (plantilla, "template"$ de p&gina para asegurar la unidad y consistencia- !ta%las (con ancho fijo$ son el mejor sistema para controlar el aspecto de las p&ginas- (Cuidado si a' puede tener lectores con un na0egador que no las reconoce$-

R- ;o ocupar m&s del 5BU del espacio con texto (RBU para espacio en %lanco e ilustraciones$, paasegurar una lectura agrada%le-

G- antener la regla de proximidad de texto e imagen (asociacin sem&ntica de lo que est& cercano$-- Agrupar los 1tems (men's anidados$, con no m&s de R en cada %loque-2B- ;o usar nunca el scrolling horiEontal-22- 3s poco con0eniente usar su%&reas (frames$ si se llega desde un motor de %'squeda, no se o%tiene

&rea de referencia (que contiene generalmente el men' o los %otones de desplaEamiento$ si se llegdesde la portada, es imposi%le marcar el acceso directo a la p&gina (%oo#mar#$ y es m&s dif1cimprimir o guardar copia de la p&gina-

24- .i se muestra r&pidamente un men' en texto (mientras %ajan las im&genes$ se ayuda a los clientesusar el ser0icio, na0egando m&s r&pido-

25- 30itar sonido de fondo repetiti0o-

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 16/23

26- *espetar los derechos de autor (3sto incluye no citar marcas registradas ni copiar logotipos s permiso$ y recordarlos a los dem&s indicando la reser0a de derechos para las p&ginas propia(Weinschen#---, pp-46G)4FB$ 

<r!#ica de !gina ;e,

3n relacin a la gr&fica propiamente tal, los mismos autores sugieren2- !os gr&ficos frenan la comunicacin incluirlos slo si aportan realmente algo, nunca "porque ha

falta una ilustracin"- 9ero tam%i8n cuidar que la imagen sea agrada%le- Dejar al usuario la opcin d0er una imagen a gran escala y alta definicin, ofreciendo slo una 0ersin reducida dentro del text ;inguna imagen de%er1a tener m&s de F6Bx6GB pixeles-

4- Asegurar con texto la correcta interpretacin de los gr&ficos (y de los pictogramas)%otones dna0egacin, sal0o que se haya pro%ado intensi0amente su comprensin en prue%as pre0ias$-

5- :sar texto alternati0 ("A!T"$ con todas las ilustraciones (para el caso de que el cliente no las pued0er o decida no "%ajarlas"$-

6- :sar 1conos para identificar diferentes secciones su repeticin no es m&s lenta (quedan en la memorcach8 del computador$ y ayudan a conceptualiEar la organiEacin de los contenidos (a'n mejor si usan tam%i8n las listas y men's$-

7- .i se desea usar una determinada tipograf1a para los t1tulos, usarla con un programa de gr&fica guardar los t1tulos como im&genes (.al0o dos o tres tipograf1as comunes, hay muy poca seguridad dque el cliente tenga instalada la que prefiera el dise>ador$-

F- :tiliEar las t8cnicas aceleradoras de 0isualiEacin de im&genes como "nterlaced =I", <peg de %aresolucin y especificacin de tama>o en la etiqueta de imagen-

R- ncluir las pala%ras importantes de una imagen de t1tulo en el texto o en una etiqueta "meta" de Htm para que los motores de %'squeda las puedan encontrar-

G- m&genes no fotogr&ficas de%er1an hacerse con un m1nimo de colores, tomados de la paleta de 42colores (que es la realmente disponi%le en /e% para monitores de 47F colores$ y todas lilustraciones de una misma p&gina de%er1an usar la misma paleta-

- *ecordar que el color se rinde de diferente manera en las distintas plataformas (0erificar el resultad

en 0arias, en lo posi%le$-2B- 9ara animaciones, preferir el "=if animado" es el sistema m&s compacto y simple, pero se de%e e0it

un ciclo permanente ("loop" infinito$-22- 30itar el di%ujo de manos como elementos gr&ficos (iconos o %otones$ puede ser mal interpretados e

ciertos am%ientes culturales-24- .i se quiere usar una imagen de fondo ("palmeta"$, hacerla del menor tama>o posi%le, para que

cargue con mayor rapideE- 30itar patrones analiEa%les (marcas de agua, logotipos, fotos, etcinterfieren con la lectura- .on preferi%les las tramas aleatorias-

25- .i se usa una imagen de fondo, definir pre0iamente un color de fondo en la misma gama 8ste se car primero y anuncia as1 al usuario que la p&gina se est& cargando-

26- 30itar colores fuertes y tam%i8n un texto %lanco so%re fondo negro- Tener en cuenta que el clien

 puede definir su color de fondo preferido (y anular as1 el que se transmite$ esto es importante para definicin del color del texto y de los lin#s- (Weinschen#---, pp-4FB)4FR$ 

La redacción de la !gina ;e,

Iinalmente, en relacin a la redaccin del texto2- *ecordar ante todo que la lectura en pantalla resulta generalmente m&s molesta que en papel-4- :sar oraciones cortas y precisas y e0itar redundancias-

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 17/23

5- :sar lo m&s que se pueda esquemas y "listas no)ordenadas" (con "%ullets" $6- Colocar los textos de ni0eles de detalle diferentes en p&ginas separadas (no o%ligar a leer detalles n

deseados$-7- ;o su%rayar nada (lo su%rayado indica ancla$ usar negritas, con mesura-F- 30itar el texto cont1nuo en cursi0a es de dif1cil lectura-R- !os p&rrafos no de%en tener m&s de 6 o 7 oraciones-G- :sar muchos su%t1tulos-- 30itar textos que no sean afirmati0os y e0itar los juicios de 0alor y apreciaciones personales-2B- .er consistente en la puntuacin y el uso de may'sculas-22- nformar adecuadamente de los cam%ios (9&gina de ";o0edades" y fechas de actualiEacin

(Weinschen#---, pp-4R2)4R7$ 

La creación de los documentos ara +e,

Al crear los documentos, con0iene asegurarse que una p&gina no se demorar& demasiado en cargarse en computador del lector, lo cual depender& tanto de la longitud del texto como )so%retodo) de la cantidad dilustraciones (0isuales o auditi0as$ que incluya- 3s cierto que la 0elocidad de recepcin depende de capacidad de las redes ("ancho de %anda" di0idido por el n'mero de usuarios simult&neos$, lo cual no puedser controlado por el emisor)programador- 9ero s1 es posi%le aumentar )o reducir) la 0elocidad controlando estructura de cada p&gina- .i el texto es %re0e y las ilustraciones pocas (y peque>as$, la transmisin sermucho m&s r&pida- 9ero la comunicacin en su conjunto puede tornarse tam%i8n ineficiente (y enojosa$ si sfragmenta demasiado el contenido, o%ligando al lector a acti0ar 01nculo tras 01nculo, lo cual puede tencomo resultado que ocupe m&s tiempo esperando la llegada de la informacin que leyendo 8sta-

Conocemos ejemplos en am%os extremos p&ginas que demoran 0arios minutos en llegar de%ido a sextensin e ilustraciones, y p&ginas que slo contienen un p&rrafo de texto y o%ligan a pedir otra en seguid3n este caso, slo pueden reci%ir las p&ginas en forma r&pida quienes est8n conectados por red local al mismser0idor de WWW- 9ero quienes est8n alejados se a%urrir&n de las esperas-

VCu&l ser1a el adecuado "t8rmino medio" ;uestra experiencia aconseja tra%ajar con documentos de unextensin no superior a 2B o 4BX%- en una p&gina de texto de este tama>o, e0itemos colocar m&s de trescuatro ilustraciones (o una ilustracin m&s algunos "%otones" o iconos$- Tam%i8n, si queremos agregar fotosdi%ujos ilustrati0os, utilicemos el sistema de "estampillas", que consiste en insertar reproducciones peque>a(como m&ximo de 27B pixeles por lado$ que sean anclas de las ilustraciones de plena p&gina que se quieraofrecer- (:n "ancla" es un o%jeto marcado que acti0a el 01nculo de na0egacin que lle0a a otro documento$-

Aumenta la 0elocidad de recepcin de una p&gina el indicar en su programacin el tama>o exacto de cadilustracin (= WDTHO0alor H3=HTO0alor .*CO---$ de este modo el texto podr& "saltar" el espacrequerido para las im&genes, lo cual permite empeEar r&pidamente a leer- Tam%i8n ayuda a reducir la esperel uso de ilustraciones de formato "-gif" e "interlaced", ya que 8stas aparecen en forma progresi0a (primer %orrosas y luego m&s y m&s n1tidas$- 9ero el formato "-gif" slo admite 47F colores, lo cual en algunos caso puede ser una calidad insuficiente- !a solucin consiste nue0amente en crear estampillas que remitanim&genes mayores, en miles de colores (formato "-jpg"$-

A su 0eE, si se usa el formato "jpg", es posi%le escoger el grado de compresin de las ilustracione=eneralmente una compresin media (para una reproduccin de mediana calidad$ es adecuada- :ncompresin menor (para lograr una mayor calidad$ no es aconseja%le- .e puede comprimir m&s que la medisi la menor calidad del resultado es acepta%le- (9rogramas de edicin de fotograf1a como 9hotoshop, o d

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 18/23

con0ersin como "=raphic Con0erter", ofrecen generalmente elegir el grado de compresin cuando formato lo permite$-

acilitar la :na7egación:

?ui8n haya na0egado con alguna frecuencia por alg'n "hipermedio" ha%r& descu%ierto que no es siemprf&cil descu%rir en qu8 "lugar del recorrido" est& uno ni menos a'n 0ol0er con facilidad a alguna de l posiciones anteriores- Consideraremos aqu1 los recursos de que dispone normalmente un "na0egante" de Wey cmo puede un programador ayudarle a encontrar su camino --- o a perderse m&s irremedia%lemente-

• !as complejidades de la na0egacin • Dnde falla el "hilo de Ariadna" • Lotones de na0egacin • Lotones que entorpecen • Dnde poner los %otones 

Las comlejidades de la na7egación

Todos los "%ro/sers" (aplicaciones de consulta$ disponen al menos de dos comandos %&sicos "Lac#" "Home", acompa>ados a 0eces de "Ior/ard" como en el ;etscape-

"Home" nos asegura que siempre podremos 0ol0er "a casa", es decir a la primera p&gina de alg'n ser0idor dWe% cercano, al cual nos "colgamos" cuando echamos a andar la aplicacin- Cuando ya hemos a0anEad"Lac#" nos permite 0ol0er a la p&gina anterior, es decir la 'ltima que 0imos antes de hacer "clic" en alg'01nculo - Con 0arios "Lac#", podemos retroceder paso a paso por el camino andado, ya que el %ro/sconser0a en memoria una lista de nuestros "saltos", a modo de "hilo de Ariadna"- "Ior/ard" estar& disponi%

despu8s de alg'n "Lac#", para 0ol0er a a0anEar por un camino ya recorrido-

9odemos graficar un recorrido t1pico como una lectura (o %re0e re0isin$ secuencial de una serie de p&gina.lo que estas p&ginas no est&n necesariamente en un orden tan simple como las de un li%ro- 3sto es lcaracter1stico )0entajoso y complejo a la 0eE) de los hiperarchi0os- 3ntre una p&gina y las otras, puede ha%muchos caminos posi%les-

9ara 0isualiEar mejor lo complejo del asunto, representaremos (0er =r&fico siguiente$ la agrupacin de l p&ginas (&reas grises$ en directorios (rect&ngulos numerados$ tal como el programador las agrup (comexplicado en una  p&gina anterior $- !as l1neas grises horiEontales indican la secuencia %&sica de lectura- !letra indica que el documento es un 1ndice, es decir una p&gina con un men', que da acceso a p&ginas d

su%directorios contenidos en el mismo directorio-

.i no existiesen los 01nculos hipermediales, slo podr1amos a0anEar y retroceder por las l1neas %&sicas (lgrises horiEontales del gr&fico$, lo cual es equi0alente a leer un li%ro- 9ero aqu1 tenemos )generalmentem'ltiples enlaces entre una serie y otra- .o%re el esquema %&sico colocamos ahora flechas negras para se>alael recorrido de un "na0egante" casual (que no ha%r& usado el comando "Lac#"$- Cada flecha correspondaqu1 a un @clic@ en un ancla y la na0egacin por el lin# que efect'a un cam%io de p&gina-

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 19/23

lustracin :na posi%le na0egacin

Dónde #alla el :6ilo de $riadna:

.i el na0egante se pregunta dnde se encuentra cuando llega a la 'ltima p&gina se>alada por las flechas, pcierto no tendr& punto de referencia para sa%erlo- Ha%r1a que ser experto y tener la intencin de "reconstruila estructura de directorios para sa%er por cuantos de ellos se puede ha%er pasado- ncluso ser1a muy posi%estar conectado en ese momento con otro ser0idor de We%, incluso u%icado en otro pa1s-

si en este instante el lector desea 0ol0er a la segunda p&gina del directorio 242, donde dej la secuenc

 %&sica para dar "hipersaltos", Vde%er& retroceder 6 pasos (con "Lac#"$ V si di un n'mero mucho mayor dsaltos y desea 0ol0er atr&s a sa%emos que los %ro/sers mantienen una "historia" de la secuencia de salto(0isi%le por ejemplo en el men' "=+---" y, m&s detalladamente, en la opcin "History" del men' Windo/ d ;etscape 0er =r&fico$-

9ero la lista de "=+---" o "History" no permanece completa- As1, por ejemplo, si le1mos algunas p&ginas ddirectorio 224 y luego 0ol0emos al 1ndice del cual depende (que enca%eEa el directorio "24"$ para entradesou8s a la serie del directorio 252, nuestro paso por el 242 desaparecer& y la lista se 0ol0er& a construir partir del 1ndice 25 hacia el 252- Del mismo modo si retrocedemos hasta el 2 y pasamos al 24 y al 242 o 244, ya no tendremos a la 0ista en el men' "=+---" las "%ajadas" anteriores al 25-

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 20/23

3sto es una caracter1stica de la estructura jer&rquica en forma de &r%ol cuando se 0uel0e por una rama hacel tronco y se elige otra rama, no queda rastro de la rama anterior- Aqu1 es donde falla el hilo de Ariadn9ero al contrario, si hemos saltado de una rama a otra (sin 0ol0er al nodo en que una se une a otras podremos a'n 0er los puntos de salto-

3sto lo puede 0erificar f&cilmente re0isando de tanto en tanto su men' "=o---"-

.i %ien esta dificultad slo puede ser superada gracias al conocimiento de la misma y a cierta disciplina d

na0egante, tiene consecuencias importantes para el programador en relacin a la inclusin de "%otones" dna0egacin- 3special cuidado requieren los que ofrecen formas de "retroceder" en la lectura-

acilitar la :na7egación:= 9otones

• Lotones de na0egacin • Lotones que entorpecen • Dnde poner los %otones 

9otones de na7egación

Tanto para "alegrar" gr&ficamente una p&gina como para facilitar la na0egacin, es usual que se inserte"%otones" especiales o "iconos de na0egacin" en las p&ginas- Ystos pueden estar en distintos lugarefrecuentemente de%ajo del t1tulo cuando son opciones de tipo "men'" o al final de las p&ginas cuandsugieren lecturas complementarias- =eneralmente es ah1, al final de las p&ginas, que encontramos tam%i8 %otones para a0anEar o retroceder longitudinalmente (es decir como en un li%ro$-

9ara que al lector le sea relati0amente f&cil entender a dnde ir& al acti0ar el %otn)ancla , es indispensa%que el autor haya pre0isto la dificultad- 3sto significa usar un s1m%olo monos8mico (e-d- interpreta%le de unsola manera$ o incluir un texto que dirima toda confusin posi%le-

ostramos aqu1 las con0enciones m&s comunes que, sal0o error gra0e del programador, no de%er1a prestarse a una mala interpretacin

O r al principio De%e en0iar al "1ndice" de mayor ni0el jer&rquico (la p&gina inicial, e-d- "index" del "dir2" de nuestro ejemplo$

O A0anEar a la p&gina siguiente, en una lectura secuencial (como si se leyera un li%ro$-

O *etroceder a la p&gina anterior, en una lectura secuencial- (9ero usar este %otn implica suponque el lector tendr& en cuenta que podr1a ha%er cam%iado de directorio$-

9otones >ue entorecen

+tros %otones sin em%argo, aunque tam%i8n con0encionales, pueden guiar por pistas equ10ocas y de%er1an s proscritos (o usarse siempre con un texto clarificador$- .on los siguientes

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 21/23

O "Anterior" de%er1a remitir a la p&gina que enca%eEa la serie secuencial ("3"$, pero tam%i8n usa a 0eces para 0ol0er al inicio de la misma p&gina o a la p&gina anterior (por una confusin con el sign"*etroceder"$-

O "*etroceder saltando" de%er1a ser al 1ndice del ni0el jer&rquico en el cual se est&, pero tam%i8retrocede, a 0eces, un ni0el m&s- Z3s la mejor forma de confundir al lector[

3n am%os casos inter0iene un retroceso jer&rquico, que lle0a al lector hacia un lugar totalmente inesperado generalmente incomprensi%le si hu%o antes un salto de un su%directorio a otro- Mol0amos a nuestro ejempl

con el na0egante en la p&gina se>alada del directorio 252 (0er a%ajo pen'ltimo paso marcado por laflechas$- .i ah1 oprime un %otn que lo en01a al enca%eEamiento (3$ o al 1ndice ($ que comandan esdirectorio, podr1a no entender en a%soluto qu8 tiene que 0er con la serie a la cual entr por el conducto %&sicinicial 2 )P 24 )P 244- .i slo fue leyendo y eligiendo lin#s que le interesa%an, ha pasado sin sa%erlo por directorio 24K244 y del 24 al 25 para llegar al 252- ientras piensa que el enca%eEado y el 1ndice de%en sdel 244, son en realidad del 252- Z slo mostramos un recorrido mucho m&s %re0e que lo que ocurrha%itualmente[ Zmag1nese despu8s de una docena de saltos[

3n consecuencia es recomenda%le e0itar este tipo de %otones- si es importante que el lector sepa en qulugar est&, hay un medio muy f&cil indic&rselo al principio de la p&gina, con un ep1grafe que indique deri0acin jer&rquica, como en la ilustracin que sigue- 9ero, pese a su utilidad, es poco frecuente encontraeste tipo de solucin )%astante sencilla) en la WWW- 3s de esperar que se 0aya generaliEando en los mdulode estructura compleja-

+tra solucin es que la usamos nosotros en este curso hay un logotipo que identifica el curso,el color del margen iEquierdo es caracter1stico del tipo de p&gina y el t1tulo principal siempreindica en qu8 cap1tulo se est&-

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 22/23

Donde oner los ,otones

Despu8s de na0egar por numeros1simas p&ginas de We%, podemos 0er que se encuentran principalmente dotipos de situaciones- !a primera corresponde a %otones colocados al final de las p&ginas, para sugerir al lect por dnde puede seguir o cmo 0ol0er a p&ginas anteriores- 3n este tipo de configuracin, se da por sentadque leer& la p&gina hasta el final y luego optar& por seguir por alguno de los caminos sugeridos (o usalguno de los comandos del %ro/ser$- Tam%i8n se estima que si no desea%a leer la p&gina, despu8s de 0er st1tulo, har& un "Lac#" o "=o---"

+tra situacin que tiene cierta frecuencia es la repeticin de los %otones del men' inicial (iguales o dtama>o menor$ de%ajo del t1tulo- Aqu1 se ofrece al lector un conjunto de opciones para des0iarse si no deseleer la p&gina- 30entualmente la misma serie se repite al final para que, si ley todo, no de%a 0ol0er a principio para seguir na0egando-

:na tercera alternati0a, poco frecuente, es la que hemos encontrado en el "anual de 3stilo" de l:ni0ersidad de ale- Aqu1 se recomienda colocar una %arra con %otones de na0egacin al principio (antes dt1tulo$ y al final de cada p&gina- ;o siempre puede sostenerse lgicamente esta sugerencia .i el lector llegesta p&gina, de%i tener alguna raEn para ello, y lo primero que desear& hacer es 0erificar si contienrealmente lo que espera%a- 3sto implica al menos leer el t1tulo y )seguramente) algo m&s, como un meninterno o p&rrafo introductorio- ientras no o%tenga esta informacin, no na0egar&, a menos que se d8 cuende que se ha%1a equi0ocado, en cuyo caso usar& el "Lac#" y no necesitar& otros %otones-Hemos seguido aqu1 la propuesta estil1stica de ale, pero teniendo cuidado de que se pueda leer de inmediatun texto significati0o, como el t1tulo del cap1tulo y del ac&pite-

!as nue0as especificaciones del lenguaje HT! permiten ahora di0idir la p&gina con marcos ("frames"$ crear uno en que se mantengan permanentemente los %otones de na0egacin o men' %&sico del mdulo- 9erhemos se>alado ya (0er "!ayout general de p&gina /e%, n-22"$que este sistema tam%i8n presenta numerosdes0entajas, que lo hacen pocas 0eces aconseja%le-

3n consecuencia, lo m&s indicado parece ser

• .i la p&gina es corta colocar los %otones de na0egacin sea de%ajo del &rea de titulacin sea al final-• .i la p&gina tiene mayor extensin colocar los %otones en el &rea de titulacin (encima o de%ajo d

men' o 1ndice del contenido de la p&gina, si lo hay$ y tam%i8n al final de la p&gina si 8sta es larga-

.i estamos en este 'ltimo caso, la serie de %otones del principio y la serie del final ser&n pro%a%lemente )perno necesariamente) las mismas- 3n efecto, el contenido puede dar origen a alg'n tema nue0o para el cual s justifique un %otn al final, el cual no tendr1a raEn de ser antes de realiEar la lectura- 9ero, o%0iamente, estipo de caso no ha ser el m&s generaliEado-

3n esta misma p&gina puede encontrar un %uen ejemplo de dnde colocar los %otones de na0egacin-

Documentación

Como en todo proyecto de computacin, se recomienda documentar adecuadamente los directorios y suscontenidos- Como m1nimo, de%er1a anotarse

• la estructura jer&rquica (directorios y nom%res de los documentos contenidos en cada uno$• las anclas y los lin#s estructurales (puntos de origen y de "destino"$ con nom%re H*3I y significado

 por ejemplo

?dir@121?= (&omutación) 

7/21/2019 Diseño de documentos HTML,WEBS E HIPERTEXTOS.doc

http://slidepdf.com/reader/full/diseno-de-documentos-htmlwebs-e-hipertextosdoc 23/23

9&ginasindex-htmlsdistr-html O .istema distri%u1doccien-html O Computacin cient1fica

.egmentada en ;A3O"o%jeti0os" +%jeti0os ;A3O"recursos" *ecursos Computacionalesetc-

•  para las ilustraciones hacer una lista de los nom%res codificados (fxxx-jpg$ junto con la indicacinde lo que representan (y es con0eniente anotar el tama>o de cada una$, por ejemplo

?#otos?

g%oard2-gif 6B4x45F other%oardemainfr-gif 4BBx25F Computador mainframef%a%%ag-gif Bx24G La%%age (cara$fchip-gif 24Bx27G Chipfmainfr-jpg 6BBx4R4 Computador mainframe (foto$

Aqu1

"g" indica gr&fico"e" indica estampilla"f" indica fotolo cual permite ordenar y reconocer con facilidad el tipo de ilustracin