Lineamiento de Diseño Web

Instituto Nacional de Tecnologa
Agropecuaria
www.inta.gov.ar
Manual de estilo y diseo
de sitios y pginas Web
Departamento de Comunicaciones
Ing. Agr. Marcelo H. Bosch
Marzo 2002
INTA - Manual de arquitectura de sitios y diseo de pginas Web
Copyright
Se prohbe la reproduccin total o parcial sin permiso expreso del autor o del Instituto
Nacional de Tecnologa Agropecuaria.
Ing. Marcelo H. Bosch
Pg. -2-
ANTES DE COMENZAR
Agradecimientos
El presente trabajo contiene el aporte de ideas, comentarios, sugerencias y
correciones de varias personas.
Marina Lopez Casoli, Estela Mara Varela y Silvia de Bellis cuyos agudos
ojos pulieron algunos de los muchos horrores ortogrficos y de tipeo
cometidos durante largas jornadas de confeccin del documento.
Carlos Roig con su visin/utopa de Sistema Institucional de Informacin le
dio un marco ms amplio al proyecto.
Jos Luis Vecchi a travs de fuertes pero enriquecedoras discusiones sobre lo
que debe ser la Web.
A Colin Fraser y Sonia Restrepo, consultores internacionales en
comunicacin, por sus comentarios especficos y apoyo general al proyecto
web institucional.
Un especial reconocimiento al Ing. Carlos Torres por su fuerte apuesta al
proyecto web y la confianza depositada en el autor.
Aclaracin
La intencin del autor es la de resumir en pocas pginas la experiencia
acumulada internacionalmente y la investigacin sobre desarrollos de sistemas
e interfaces de usuario desde las primeras aproximaciones, ya clsicas, en el
PARC de Xerox en California. No pretende establecer dogma sino ms bien
fundamentar tcnicamente en la medida de lo posible cada una de las
decisiones de desarrollo que deben tomarse. Si el lector logra incrementar su
criterio respecto de cmo encarar el desarrollo de un sitio web, ms all de las
herramientas, lenguajes y tecnologas, que por otra parte cambian o
desaparecen demasiado rpido, se habr abierto entonces una senda de
racionalidad en el ejercicio de la profesin de diseador web y el esfuerzo
estar ampliamente compensado.
Aportes y Actualizaciones
La web nos proporciona una oportunidad nica de utilizar la inteligencia y
creatividad diseminada a travs de los mecanismos de interaccin
electrnicos. Se habilit un espacio para recibir crticas, sugerencias y aportes,
as como propuestas de temas y continuidad de este modesto aporte al trabajo
de muchos desarrolladores que contribuirn a la creacin del sitio web del
INTA.
La plataforma de Internet esta en plena evolucin y requerir de los
profesionales una permanente actualizacin en el uso de las tecnologas ms
apropiadas por lo que este trabajo puede considerarse como el primero de una
serie.
Pngase en contacto travs de www.inta.gov.ar/manualweb/index.htm
Pg. -3-
Tabla de Contenido del Manual de estilo para publicacin Web

Antes de comenzar................................................................................................................................ 3
Quienes deben leer esta gua................................................................................................................. 6
PARTE I: ASPECTOS CONCEPTUALES.................................................................................................. 7
Captulo 1: La web .....................................................................................................................7

Qu es un sitio Web.............................................................................................................................. 7
Qu no es un sitio Web......................................................................................................................... 8
Para quin es un sitio Web? ................................................................................................................ 8
Capitulo 2: La arquitectura de sitios web..............................................................................10

La visin y la misin .......................................................................................................................... 10
El anlisis de requerimientos .............................................................................................................. 11
El anteproyecto ................................................................................................................................... 11
La estructura ....................................................................................................................................... 11
La organizacin del espacio................................................................................................................ 12
El diseo de la entrada........................................................................................................................ 12
La planificacin .................................................................................................................................. 13
Supervisin de obra ............................................................................................................................ 13
La terminacin.................................................................................................................................... 13
Capitulo 3: La usabilidad de sitios web..................................................................................14

Qu es la usabilidad? ........................................................................................................................ 14
Aspectos de la usabilidad.................................................................................................................... 14
Contenido para la Web ....................................................................................................................... 15
Textos para la Web ............................................................................................................................. 15
PARTE II: ASPECTOS TECNICOS .......................................................................................................... 18
Capitulo 4: Preparacin del contenido...................................................................................18

Edicin del texto de pginas ............................................................................................................... 18
Los Textos Ocultos de una Pgina...................................................................................................... 29
Lecturabilidad..................................................................................................................................... 31
El contexto de la pgina...................................................................................................................... 34
Imgenes para la Web......................................................................................................................... 35
Multimedia: Sonido y Video para la Web ......................................................................................... 38
Capitulo 5: Diseo de pginas .................................................................................................42

Diseo independiente de los dispositivos de visualizacin ............................................................... 42
La utilizacin del espacio ................................................................................................................... 43
El Tiempo de descarga ....................................................................................................................... 44
Los hipervnculos ............................................................................................................................... 45
Marcos o Frames ................................................................................................................................ 49
La Impresin....................................................................................................................................... 50
Captulo 6: La codificacin......................................................................................................52
Codificacin semantica....................................................................................................................... 52
Lenguaje HTML 4.0 ........................................................................................................................... 56
Una pgina al alcance de todos........................................................................................................... 57
Hojas de Estilo en Cascada (CSS) ...................................................................................................... 62
Pg. -4-

Capitulo 7: Diseo de sitios .....................................................................................................68
Consideraciones generales.................................................................................................................. 68
Estructura de navegacin.................................................................................................................... 69
Subsitios.............................................................................................................................................. 70
Funcionamiento del motor de bsqueda ............................................................................................. 75
Bibliografa y referencias.........................................................................................................76
Apndice I .................................................................................................................................78
Pg. -5-

INTRODUCCION
QUIENES DEBEN LEER ESTA GUA

Esta Gua, que surge como material de apoyo y
capacitacin dentro del proyecto de desarrollo de Internet del
INTA, se divide en dos partes: la Parte I es de carcter conceptual
mientras que la parte II es de carcter tcnico.
La Parte I puede ser leda por todos aquellos que tengan
inters en entender los conceptos de sitios web y la lgica que
debe guiar el trabajo de contenidistas y diseadores. Cualquier
usuario de la web encontrar explicacin a sus padecimientos en
la tarea de encontrar informacin relevante y descubrir que no
es su incompetencia sino la mala arquitectura de los sitios la que
provoca muchos de sus fracasos.
Se explican aqu los dos conceptos principales que deben
guiar el trabajo de construccin de sitios y pginas: la
arquitectura y la usabilidad. Adquirir estos conceptos le
permitir tambin convertirse en un usuario crtico y exigente
respecto del servicio que le ofrecen diferentes sitios de Internet.
La Parte II es de lectura obligatoria para aquellos que
tengan alguna responsabilidad en la preparacin de paginas y
sitios web del INTA ya sea para diseo o redaccin de
contenidos. Las recomendaciones de esta Gua son de aplicacin
universal y no una mera disposicin burocrtica y estn basadas
en investigaciones y comprobaciones hechas por expertos de la
ingeniera de sistemas, ingeniera de usabilidad y por
recomendaciones del Web Consortium, organizacin
internacional de elaboracin de estndares en Internet.
Los diseadores y webmasters que incorporen a su
mtodo de trabajo estas sanas prcticas, habrn dado un salto de
calidad en sus diseos, desarrollarn materiales reutilizables y
agregarn valor a los mismos. Los contenidistas que preparen
material para su publicacin electrnica siguiendo las normas y
recomendaciones de este Manual, tendrn mayor probabilidad de
ser ledos por los usuarios, les brindarn contenido de mayor
calidad y una mejor experiencia web.
Por otra parte, los conceptos aqu desarrollados
perdurarn en el tiempo mucho despus que las tecnologas
(lenguajes y herramientas) hayan quedado obsoletas y por lo
tanto es una buena inversin adquirir las disciplinas de diseo
que aqu se recomiendan.
Pg. -6-
PARTE I: ASPECTOS CONCEPTUALES

CAPTULO 1: LA WEB
QU ES UN SITIO WEB
Un sitio web es un conjunto de pginas Web relacionadas a travs
de una estructura de navegacin, con el objetivo de hacer pblica y
universalmente accesible una cierta cantidad de informacin. Para
alcanzar dicho objetivo, los sitios deben concebirse con un criterio
arquitectnico y construirse desde los cimientos, con una visin
sistmica y una lgica adecuada a su funcin especfica.
Tom Berners
Lee concibi la
Web como una
plataforma
para compartir
documentos a
travs de
redes.
Tom Berners Lee concibi la Web como una plataforma para

compartir documentos a travs de redes. La unidad de informacin de
la web es un documento (archivo) llamado pgina Web que se aloja
en algn servidor web y puede ser localizada a travs de su URL o
direccin desde cualquier computadora cliente, en cualquier ubicacin
del mundo que posea acceso a Internet. Por ejemplo,
http://www.inta.gov.ar/informa.htm indica que el documento o pgina
informa.htm se localiza en el servidor de INTA (www.inta.gov.ar).
Para acceder a una pgina web se requiere de un programa o
cliente web que gestione la localizacin, recuperacin, interpretacin,
visualizacin, archivado e impresin eventual de la misma. Ese tipo de
programa se llama navegador Web, siendo los ms utilizados el
Explorer de Microsoft y el Navigator de Netscape.
Para que los documentos pudieran ser independientes de las
plataformas de sistemas de los usuarios se desarroll el lenguaje
HTML, tambin conocido como lenguaje de marcado de hipertexto.
Posteriormente, las empresas de software que desarrollan navegadores
han extendido por su cuenta dicho lenguaje, agregando etiquetas para
mejorar los efectos de visualizacin de las pginas, generando un
problema de incompatibilidad dado que esas extensiones no son
reconocidas de manera universal.
Los programadores de pginas web deben preocuparse, desde
entonces, que sus diseos sean correctamente visibles en cualquiera de
los dos navegadores ms utilizados del mercado en las versiones
actuales y anteriores, dado que el reemplazo es relativamente lento.
Nuestra recomendacin es atenerse los estndares de Web
Consortium sobre el uso adecuado del lenguaje HTML lo cual
asegura la mxima compatibilidad. Asimismo recomendamos muy
fuertemente la utilizacin de hojas de estilo por razones que se indican
ms adelante y hemos desarrollado una plantilla institucional de estilo
para dar consistencia a todas las pginas del sitio web de INTA.
Pg. -7-
QU NO ES UN SITIO WEB
Aunque para muchos resulte obvio, un sitio web no es un libro as
como una pgina web no es una pgina impresa o un folleto. Esto que
parece fcil de entender no lo es tanto en la prctica diaria de
redaccin de contenido para la web y menos todava para el diseo
grfico de las pginas. En este manual se har hincapi en las
diferencias que separan al medio impreso de Internet y sus
consecuencias sobre la usabilidad de sitios.
La web es una medio excelente y econmico para publicar
documentos cortos y con vnculos a otros documentos relacionados,
sin embargo no es tan adecuada para documentos largos con desarrollo
secuenciado. Por lo tanto hay que conocer las ventajas pero tambin
las limitaciones que impone la edicin de pginas web.
PARA QUIN ES UN SITIO WEB?
Un sitio web
debe ser
concebido para
los usuarios y
visitantes
potenciales.
La respuesta aparentemente obvia sera: para la empresa o la

institucin que lo desarrolla. Sin embargo la visin que se quiere
compartir aqu es que un sitio es para los usuarios y visitantes, ellos
son los destinatarios de todos los esfuerzos desplegados en su
construccin. Un visitante ocasional se transformar en un usuario si
vuelve al sitio. Volver al sitio solamente si es satisfecho en tres
aspectos: calidad de la informacin, facilidad de acceso y velocidad.
Logrado eso es probable que vuelva por ms y se transforme en un
cliente y difusor activo del sitio.
Caso contrario no solo no volver sino que ser un eficiente
detractor (por aquello de que un cliente insatisfecho desalienta a
muchos otros potenciales clientes) y seguramente con razn.
Lo que se intenta decir es que el sitio Web del INTA debe estar al
servicio de sus usuarios: productores rurales, estudiantes,
profesionales, funcionarios pblicos, entidades vinculadas al sector
agroalimentario y pblico en general.
En el caso de la Intranet el cliente es interno: empleados, tcnicos
e investigadores de la institucin lo cual plantea un escenario diferente
y merecer un anlisis por separado. Las mejoras de usabilidad de la
Intranet se pueden cuantificar en trminos econmicos que justifican
ampliamente la inversin de recursos en su arquitectura y diseo.
Debe reflexionarse tambin acerca del comportamiento de los
usuarios ya que la comprensin del mismo debe guiar todas las
practicas de diseo. Mucha investigacin sobre las buenas practicas
de diseo web se han elaborado tras largas sesiones de observacin de
usuarios en laboratorios controlados y en estudios de campo en
empresas de tecnologa. Otro tanto de lo que se sabe proviene de
Pg. -8-

investigaciones realizadas desde los aos setenta en laboratorios como
el PARC de Xerox sobre interfaz grfica de usuarios (GUI) y muchas
de las recomendaciones de usabilidad se aplican tambin a la
interactividad en sitios web, aunque la arquitectura propia de la web
requiere atender otros aspectos.
Subordinar
el diseo a la
usabilidad, el
arte a la
ingeniera, la
creatividad a la
funcionalidad y
la esttica a la
eficiencia.
Fundamentalmente, en lo que a tiempos se refiere, los usuarios son

extremadamente intolerantes a las demoras, sumado al hecho de que a
un clic de distancia hay ms de mil millones de pginas, la ecuacin es
muy sencilla:
pgina lenta = usuario molesto = visitante perdido

Por oposicin decimos que el sitio Web no debe ser de los
webmasters, diseadores, contenidistas o autoridades. La usabilidad de
los sitios dependen de factores tcnicos y comportamientos humanos
que estn ms all de los gustos personales, opiniones e intereses y la
optimizacin de Internet como medio puede lograrse subordinando el
diseo a la usabilidad, el arte a la ingeniera, la creatividad a la
funcionalidad y la esttica a la eficiencia.
La buena noticia es que los mtodos de la usabilidad son baratos y
no requieren aprendizajes complejos. Todo lo contrario: lo ms
probable es que haya que desaprender y dejar de utilizar tcnicas y
software sofisticado sin necesidad, solo por que rpidamente hace
cosas maravillosas pero que no respeta los estndares y tampoco
agrega valor al contenido.
Se debe desarrollar sentido crtico al navegar por la web para
discernir lo bueno de lo atractivo, sobre todo a la hora de copiar ideas.
Pg. -9-
CAPITULO 2: LA ARQUITECTURA DE
SITIOS WEB
Aunque no es objetivo de este manual desarrollar una teora sobre
arquitectura de sitios web, lo que s se pretende es transmitir los
conceptos bsicos para poner de manifiesto la importancia que tiene en
la funcionalidad general del sitio. Para ello utilizaremos como
metfora, la construccin de edificios, para comprender de qu se trata
y que importancia tiene disponer de una arquitectura. Veamos algunas
similitudes.
LA VISIN Y LA MISIN
As como un edificio se construye con un objetivo y funciones
determinadas (residencia, centro comercial, hospital) los sitios se
construyen, o deberan hacerlo, con ciertos objetivos en mente:
comunicar, distribuir o comercializar informacin, generar
comunidades, vincularse con el medio o crear cultura organizacional.
Antes de sentarse a pensar en el proyecto los arquitectos deben
tener en claro para qu se construye, es decir la visin y la misin y
luego para quin se construye. Esa informacin orientar el resto del
proceso.
Existe una misin general asociada a la de la organizacin en su
conjunto y pueden coexistir misiones parciales y subordinadas para
cada subsitio. La misin del sitio web www.inta.gov.ar se ha propuesto
de la siguiente forma:
Brindar al usuario un acceso rpido y simple a

la informacin que necesita y que le motive a
explorar el sitio para descubrir nuevas posibilidades
de servicios.
Difundir las actividades del Grupo INTA,
potenciando la funcin de transferencia, la creacin
de servicios y la vinculacin.
La visin debera incluir no solo la descripcin de lo que se desea
alcanzar sino una ubicacin temporal. Por ejemplo:
Constituirse en la fuente de informacin

agropecuaria de mayor calidad para productores,
estudiantes, profesionales, tcnicos y funcionarios.
Alcanzar 10.000 pginas de contenido y registrar
Pg. -10-
3000 visitas diarias al sitio para fines del ao

2002.
La visin y la misin del sitio o subsitio debera elaborarse en
forma consensuada y alineada con la misin y visin organizacional.
EL ANLISIS DE REQUERIMIENTOS
Se debe
relevar las
necesidades
de la
organizacin.
Ya se sabe para qu ser el edificio, pero qu tamao tendr?

Cuntos pisos, habitaciones, salones y sanitarios? Qu servicios se
necesitan? Habr gimnasio, ascensores, estacionamiento o seguridad?
Todo ello determinar la envergadura de la obra y los recursos
necesarios para el proyecto.
Antes de disear un sitio web se deben relevar las necesidades de
la organizacin: cantidad y tipo de contenido a publicar, servicios que
se pretende ofrecer: acceso a bases de datos, comercio electrnico,
foros de discusin, web mail, etc. Sobre la base de dichos
requerimientos se puede planificar y presupuestar no solo la
construccin sino el mantenimiento permanente.
EL ANTEPROYECTO
El arquitecto debe ahora realizar los primeros bocetos de la
arquitectura de su edificio para poder mostrar a los clientes su idea y
exponer como esta cumplir los requerimientos establecidos.
Los diseadores web en esta etapa deben valerse de modelos,
prototipos o maquetas de sitios web para depurar, junto a su cliente o
directivos, los aspectos que no hayan quedado claros durante las
reuniones de requerimientos. Existe software para realizar estas tareas
rpidamente como el FrontPage de Microsoft.
LA ESTRUCTURA
As como en un edificio se disponen las columnas para que
soporten el peso de los niveles superiores y un posible crecimiento
futuro, los sitios web deben basarse en una estructura que soporte la
organizacin lgica de la informacin y el incremento vigoroso que
seguramente sufrir en los prximos aos.
Antes de disear la pgina de inicio (home page) deber disponerse
del diagrama lgico de la estructura de informacin, as como el diseo
de directorios que almacenarn las diferentes partes del sitio y como se
van a agregar en el futuro.
Pg. -11-
Pantalla de Microsoft Front Page en vista Exploracin

Este nivel de decisiones es de mxima importancia dado que su
modificacin durante las etapas posteriores puede ser muy costosa.
Merece entonces una adecuada atencin.
LA ORGANIZACIN DEL ESPACIO

Los arquitectos deben organizar el espacio disponible y disponer
las habitaciones y salones de manera de hacer que el conjunto sea lo
ms funcional posible.
Los
diseadores de
sitios deben
organizar el
espacio de
informacin.
Los diseadores de sitios tambin deben organizar el espacio de

informacin (hiperespacio) y para ello deben pensar como organizar la
informacin de manera tal que los usuarios puedan encontrarla y usarla
fcilmente (baja carga cognitiva), rpida y eficientemente (pocos
clics).
La posibilidad de relacionar pginas mediante vnculos confiere
mayor libertad en el diseo del acceso a la informacin, pero esta
nunca debe sustituir una buena arquitectura de base.
EL DISEO DE LA ENTRADA
Los arquitectos dedican significativo esfuerzo al diseo del frente y
la entrada de un edificio y no es casual. El aspecto visual (sobrio,
elegante, recargado, informal o acadmico), el acceso al interior
(escaleras, ascensores, puertas) y la sealizacin adecuada influyen
directamente en la forma en que las personas ingresan y circulan por el
edificio, en la percepcin de calidad y en su experiencia general.
Pg. -12-

Los visitantes a un sitio tambin ingresan, navegan tratando de
obtener aquello por lo que ingresaron y se retiran con una sensacin
(grado de satisfaccin) que estar en funcin del diseo de la pgina
principal y los instrumentos de navegacin disponibles. Los diseos
cargados, inconsistentes y complejos dan una impresin poco
profesional y no reflejan el esfuerzo e inversin que se realiza en
imagen institucional.
LA PLANIFICACIN
Una vez consensuada y pulida la propuesta original y reunido el
contenido general a organizar, el arquitecto debe planificar el proceso
de produccin, para asegurarse que dispone de los recursos necesarios;
elaborar el cronograma de desarrollo y coordinar a los diferentes
especialistas que participen de los procesos.
SUPERVISIN DE OBRA
Durante la ejecucin aparecen cantidad de problemas que obligan a
tomar decisiones que no fueron previstas durante la etapa de diseo.
Por lo tanto, el arquitecto debe estar disponible para que el equipo de
desarrollo tenga el referente de consulta que asegure la consistencia
general del sitio, su alineacin con los objetivos de la organizacin y
que mantenga la orientacin al usuario.
LA TERMINACIN
El terminado de un edificio lleva mucho tiempo y recursos,
pintores, albailes, plomeros, electricistas, carpinteros y decoradores
trabajan duro para el da de la inauguracin.
En los sitios web esta etapa es la de diseo, que la hemos dejado
para el final por que debe estar subordinada a la estructura. Muchos
diseadores de sitios web comienzan su trabajo creando la pgina
principal con alguna herramienta de diseo. Lo que hemos tratado de
transmitir es que debe pensarse el sitio como un todo, como un sistema
de relaciones entre pginas web y no como un diseo visual
determinado.
Sin embargo, cuando se ha cumplido con las etapas anteriores, se
puede pasar a la parte divertida dando espacio a la creatividad dentro
de las pautas generales de estilo y usabilidad que se vern ms
adelante.
La terminacin es una etapa que requiere de paciencia y prolijidad
para cuidar esos detalles que hacen la diferencia entre pginas.
Pg. -13-
CAPITULO 3: LA USABILIDAD DE SITIOS

WEB
QU ES LA USABILIDAD?
El diseo visual de las pginas de un sitio es su parte visible y
donde los diseadores se lucen con su trabajo. En sus curriculum
enumeran los sitios diseados y guardan copias de sus diseos para
mostrarlos orgullosamente. Sin embargo nadie escucha decir he
diseado una pagina sumamente usable. Se descuenta que la pgina
se podr usar sin problemas. Que alejado de la realidad!
Los sitios y pginas difieren en su usabilidad, podemos encontrar
desde aquellos que no presentan ningn inconveniente al usuario para
obtener lo que busca hasta aquellos donde encontrar cierta informacin
es una odisea que muchas veces termina en el fracaso total, es decir
donde el usuario opta por abandonar su objetivo. En otros casos, el
efecto negativo se traduce en el exceso de tiempo utilizado para
completar una tarea aspecto con evidente significacin econmica para
las organizaciones. Las pruebas de usabilidad cuantifican dichas
variables y brindan informacin certera sobre la calidad de la
arquitectura de un sitio.
Todos podemos ponernos de acuerdo en que los sitios web deben
ser fciles de usar, pero llevar este criterio a la prctica requiere un
cambio de enfoque y de disciplina de trabajo ms que importante.
Usabilidad y arquitectura estn relacionadas ntimamente: sin una
buena arquitectura no se dispone de accesos a la informacin simples y
giles; con diseos de pgina poco usables una buena arquitectura
queda desperdiciada.
El enfoque
sistmico de
construccin de
sitios es el nico
que puede
asegurar que los
mismos
funcionen
adecuadamente.
El enfoque sistmico de construccin de sitios es el nico que

puede asegurar que los mismos funcionen adecuadamente y sean
capaces de crecer sin procesos de reestructuracin costosos.
ASPECTOS DE LA USABILIDAD
La usabilidad es ms que una expresin de deseos y sus aspectos
pueden ser medidos por pruebas de usabilidad que cuantifican el
grado de xito de un sitio o proyecto en particular. Estas pruebas
utilizan diversas metodologas para evaluar el comportamiento de los
usuarios ante un determinado diseo y una serie de tareas especficas.
Tambin se evala el grado de satisfaccin una vez que estas han sido
completadas. Se mide por ejemplo el tiempo necesario para completar
tareas, la tasa de abandonos y los errores cometidos durante la
navegacin. La observacin y la opinin de los usuarios completan la
informacin que servir para determinar la necesidad de rediseo a
distinto nivel.
Pg. -14-

Si las pruebas de usabilidad se efectan durante el desarrollo, el
proyecto tendr mayor sustento tcnico y posibilidad de xito.
Las pruebas sobre sitios ya implantados brindan buenas pistas para
enfocar el trabajo de
rediseo.
Si bien un sitio web
es un sistema y como
tal sus componentes
estn interrelacionados,
los mencionamos y
analizamos por
separado; el lector
deber esforzarse
permanentemente en anticipar los efectos que el cambio de un
elemento puede determinar en el resto del sistema: el contenido, las
pginas y los sitios enteros. Obsrvese que el contenido (informacin
fuente) se vuelca en una pgina (elemento) que a su vez integra un
sitio (sistema) que es parte de Internet (red).
CONTENIDO PARA LA WEB
Es el contenido
lo que los
usuarios buscan
primero.
Ya dijimos que una pgina web no es una pgina impresa, un

afiche, revista, libro o folleto. Es un medio diferente, que transporta
mensajes de manera diferente, con usuarios que se comportan de
manera diferente y que acceden desde dispositivos informticos
tambin diferentes.
Todo ello debe ser suficiente para entender el desafo que significa
redactar contenidos para la web y en esta seccin iremos dando pautas
y tcnicas para que contenidistas de cualquier disciplina puedan
explotar las ventajas que representa y evitar los problemas que surgen
por las limitaciones propias como medio de comunicacin.
El contenido web es lo que los usuarios buscan y ha sido
demostrado en las pruebas de usabilidad que primero se fijan en el rea
de contenido, en los titulares y dems indicadores.
Las pginas web con su capacidad multimedia despiertan la
imaginacin de todos aquellos que ven en este medio una posibilidad
de comunicar mensajes de mltiples maneras. Analizaremos primero el
texto, las imgenes y otros componentes multimedia, siendo este el
orden de importancia, segn iremos descubriendo.
TEXTOS PARA LA WEB

La prctica de escribir para la Web debe ser reconocida como una
especialidad y los responsables de organizaciones con presencia en la
web tienen que arbitrar los medios para disponer de personal con las
Pg. -15-

competencias necesarias para generar contenido de calidad, uno de
los tres pilares del xito.
El estilo de
escritura para
pginas web debe
considerar el
comportamiento
del usuario y el
medio.
La justificacin econmica de disponer de un editor web pasa no

solo por lo dicho sobre la calidad del contenido, lo cual eleva el valor
agregado del sitio, sino tambin por el ahorro del tiempo de los
usuarios y empleados (usuarios internos) en el caso de Intranets.
Editar para la web es una tarea que puede ser desempeada por
periodistas y comunicadores que se interioricen sobre los nuevos
requerimientos de dicho medio pero tambin por los contenidistas
originales: profesionales tcnicos, extensionistas o investigadores,
pueden escribir considerando el destino final de su material (la
pantalla) ahorrando un enorme trabajo editorial.
Ya hablaremos de la importancia de la velocidad de descarga de
las pginas y lucharemos por todos los medios para reducirlos, pero
tambin tenemos que cuidar el tiempo del usuario orientndolo
adecuadamente durante su recorrida por el sitio. Por ejemplo, un texto
confuso de un hipertexto hace dudar al usuario sobre su utilidad y un
porcentaje de ellos seguir el vnculo para darse cuenta que no es de su
inters. En ambos casos, perdi su tiempo lo que equivale a dinero.
Para concebir un estilo de escritura para pginas web hay que
entender dos realidades: el comportamiento del usuario y el medio.
Como leen los usuarios

Los usuarios ojean (scanning) el texto en vez de leerlo por
completo segn se ha comprobado en numerosas pruebas de
usabilidad. Durante el ojeado la vista se detiene en los elementos
resaltadores que encuentra: titulares de distinto nivel, listas con vietas
o numeradas y texto enfatizado.
Los usuarios
ojean el texto
en vez de
leerlo por
completo.
A los usuarios no les gusta desplazarse verticalmente por pginas

muy extensas, salvo que el material sea de gran valor y lo ms
probable en ese caso es que lo imprima. El desplazamiento horizontal
es an ms odiado por los usuarios con justa razn y por ello deben
evitarse a toda costa los diseos que no se ajusten al ancho de pantalla.
Se ha comprobado tambin que la retencin de lo ledo en pantalla
es menor que lo ledo en papel, por lo que conviene realizar una
cuidadosa planificacin del hipertexto al convertir material impreso
para la web. Resulta obvio que no es efectivo simplemente copiar
dicho material para elaborar pginas web, sin embargo es demasiado
frecuente esta prctica.
Pg. -16-
El medio no es el mensaje, pero lo condiciona

Estamos de acuerdo en que lo importante al publicar es lo que se
dice, pero cualquier comunicador sabe que tambin es importante
como se dice y el cmo, esta ligado al medio y al uso que el receptor
hace del medio.
La lectura en
pantalla es un
25% ms lenta
que en el
papel.
La lectura en pantalla es un 25% ms lenta que en papel

fundamentalmente porque la calidad de los monitores es an baja y
aunque se esperan mejoras en los prximos aos, la tasa de reemplazo
de monitores es lenta. Los propietarios de PC son ms proclives a
cambiar componentes internos (discos rgidos, memoria o procesador)
y dispositivos perifricos como impresoras o scanners, pero un cambio
de monitor en general es un recurso extremo, aunque es fcil mostrar
la influencia del monitor en la mejora de productividad en ciertos
trabajos informticos.
Existe un cierto hbito de zapping que lleva al usuario a no
detenerse demasiado en una pgina y pasar rpidamente a otras. El
costo de conexin alienta esta conducta de hojear muchas pginas en el
menor tiempo posible para luego leerlas off-line o imprimirlas.
Sobre la base de lo que sabemos del comportamiento del usuario y
del medio deberamos escribir pginas que sean: ojeables, breves,
concisas y claras, temas que trataremos en el captulo siguiente.
Pg. -17-
PARTE II: ASPECTOS TECNICOS

CAPITULO 4: PREPARACIN DEL
CONTENIDO
EDICIN DEL TEXTO DE PGINAS
La estructura
y el diseo de
las pginas
claras permitir
una rpida
navegacin y
asimilacin del
contenido til
por parte del
usuario.
La lectura de largos textos impresos (novelas, monografas o

trabajos de investigacin) es secuencial y su escritura desarrolla un
proceso lgico de encadenamiento de argumentos y descripciones que
permitan comprender y evaluar la idea del autor. La web por el
contrario no es secuencial sino aleatoria: el usuario puede abordar una
estructura de informacin desde mltiples lugares y recorrerla de
infinitas maneras a travs de los vnculos vnculos y por lo tanto
necesita ubicarse en dicha estructura sea cual fuera la forma en que
la abord.
La percepcin de dicha estructura y el diseo de las pginas
ojeables, breves, concisas y claras permitir una rpida navegacin y
asimilacin del contenido til por parte del usuario.
Pginas ojeables
Piense en aspectos de redaccin y diseo que faciliten el
desplazamiento rpido de la vista por la pgina y la retencin de los
conceptos clave. Algunas recomendaciones:
Organice el texto con dos o tres niveles de titulares (segn

la complejidad y extensin).
Use listas numeradas o vietas para organizar conjuntos de
elementos.
Si la lista es muy larga clasifique los tems
Resalte las palabras importantes.
Utilice reforzadores
Saque fuera del cuerpo del texto informacin que no sea
central
Separe los prrafos
En la pgina de Cnet (ver imagen) la columna editorial Web Shui
muestra un titular (H1) Working the guide... y ms abajo un titular
de segundo nivel (H2) Reviewing the research ....
Los prrafos son relativamente cortos, separados entre s y se usan
hipervnculos a otros artculos de la columna.
Aunque la pgina es larga es posible una hojeada rpida de la
misma por los titulares y vnculos.
Pg. -18-
Encabezado (<H1>)
Separacin de prrafos
Vnculos a otras
secciones
Sub encabezado (<H2>)
Pg. -19-
Pginas breves
Las pginas de navegacin no deben exigir desplazamiento (scroll)
y los vnculos deben ser visibles aun en monitores pequeos.
Mirabilis en la Home Page the ICQ es un buen exponente de la
filosofa pngalo todo aqu: ms de cien opciones en una pgina
principal que requiere varios desplazamientos hacia abajo para
abarcarla por completo y que confunden hasta a los ms avezados.
Intente encontrar una opcin all: parece el juego de los errores.
Pg. -20-

No es recomendable superar las diez opciones por pgina de
navegacin (pginas que llevan al contenido) y para ello debe
organizar el contenido en categoras jerrquicas.
Las pginas de contenido son por norma ms largas y el usuario es
ms tolerante en cuanto al desplazamiento, pero se debe balancear
contenido y diseo siguiendo estas recomendaciones.
Fraccione el texto en unidades lgicas de informacin y cree vnculos entre
ellas
Las pginas
breves y
concisas se
descargan
rpidamente.
Si es necesario cree un ndice de contenido que facilite la

navegacin del conjunto
Identifique fragmentos poco relevantes y seprelos del
texto central
En ocasiones deber redactar de nuevo el cuerpo del texto
en forma resumida con vnculos al resto de los fragmentos.
Utilice un esquema de pirmide invertida de manera que lo
ms importante quede en la parte superior de la pgina y
luego agregue profundidad.
Pginas concisas e ideas precisas

En la web se da aquello de escribir menos para comunicar ms
que no es otra cosa que evitar el exceso de retrica. La paciencia del
usuario no lo permite segn se comprueba en los tiempos promedios
de permanencia en las pginas.
Algunas recomendaciones:
Use una idea por prrafo y no incluya demasiada

informacin ya que muchos lectores no pasan de la primera
frase.
Utilice un estilo informal, salvo cuando lo hace para

audiencias especiales (acadmicas, por ejemplo). Le
ayudar a evitar retrica innecesaria.
En el intento de ser conciso no pierda precisin ya que

puede afectar la credibilidad de la informacin. El arte
consiste en balancear tamao y calidad.
Adems Las pginas breves y concisas se descargan rpidamente.
Pg. -21-
Lenguaje claro
Haga todo lo posible para que las pginas sean comprensibles por
el espectro ms amplio posible de lectores. No abandone la
profundidad de las ideas que quiere expresar pero no las convierta en
obscuras.
Sea objetivo o evite subjetividades u opiniones personales,
salvo que sea ese el valor del contenido: su opinin experta.
Evite lenguaje o jerga excesivamente tcnica a no ser que
este seguro que se dirige a una audiencia especfica que lo
soporta.
Evite los modismos locales del lenguaje dado que el sitio es
visitado desde muchos pases y no solo de habla hispana.
Los usuarios de otros pases pueden malinterpretar las
expresiones.
Evite el lenguaje irnico por la misma razn, es difcil de
interpretar.
Evite la jerga marketinera o de vendedor de colectivo
pues le quita seriedad y es rechazada por los usuarios.
Consejo: despus de redactar la pgina, prubela. Haga que la lea
otra persona que pueda darle su opinin sincera. Lo ideal es la
correccin editorial, pero si no dispone de editor hgalo con un
amigo.
Otros textos importantes: titulos y titulares

Aqu haremos una aclaracin semntica: en este Manual de estilo,
cuando hablamos de ttulos de pgina nos referimos a la etiqueta
(<title>) que se inserta en el cdigo HTML de la pgina para que la
barra de ttulo del navegador lo muestre.
En cambio, cuando hablamos de titulares nos referimos a los

encabezados y subencabezados (de varios niveles) del texto, que se
corresponden con las etiquetas HTML <H1> a <H6>. En el lenguaje
corriente tambin son llamados ttulos y subttulos, por eso la
aclaracin.
Aunque subestimados por muchos diseadores, estos son los
aspectos ms importantes de la interfaz humana en pginas web
as como en publicaciones impresas segn se sabe desde las
Pg. -22-

investigaciones clsicas de Xerox (Xerox Publications Standards
Manual).
Merece que tanto diseadores como contenidistas le presten
atencin a su redaccin.
Ttulos de pgina
Los ttulos de las pginas son importantes por varias razones:
1. Aparecen en la barra de ttulo del navegador , orientan al
usuario sobre su ubicacin en el espacio de informacin y
sugieren el tema de la pgina.
2. Aparece como nombre en los botones Atrs y Adelante del
navegador.
3. Constituye el nombre del acceso directo que el usuario
agenda como favorito.
4. Constituye el nombre del acceso directo que se conserva
en el historial del navegador.
5. Los motores de bsqueda presentan los resultados de
consultas como una lista de ttulos de las pginas
encontradas. La informacin del ttulo se constituye en el
principal elemento de decisin del usuario para explorar
los resultados.
6. Algunos algoritmos de los motores de bsqueda analizan
si la palabra clave buscada est en el ttulo de la pgina y
otorgan puntaje a dichas pginas para mejorar la posicin
en el ranking de resultados.
No descuide
el ttulo de las
pginas.
Inconvenientes por mal uso o inexistencia de ttulos:

1. De no colocarse un ttulo, el navegador lo reemplaza por el
nombre del archivo de la pgina, lo cual es mucho ms
difcil de recordar.
2. Pierden utilidad los accesos directos en favoritos e historial
3. Pierden utilidad los vnculos de las pginas de resultado de
los motores de bsqueda.
4. La pgina pierde posiciones en el ranking de resultados de
bsqueda.
Recomendaciones para los ttulos de pgina:
Use el nombre de la organizacin en los ttulos de todas las
pginas.
Complete el ttulo con el tema principal de la pgina
pensando que debe tener sentido por si mismo cuando se
lea fuera de contexto (como favorito por ejemplo).
Deben ser diferentes para cada pgina de lo contrario se
confunden los accesos directos mencionados.
Utilice 40 a 60 caracteres y elimine los artculos
Pg. -23-
Evite palabras sin sentido y elija en cambio unas pocas

palabras; ponga las ms importantes a la izquierda.
En la pantalla de arriba se observa el inconveniente tratado al

hablar de marcos: a pesar de estar en una pgina interior (Cursos
etc.) el ttulo nos indica la Pagina principal.
Al agendar en favoritos aparecer dicho ttulo y cualquier
otra pgina que se intente agendar sobrescribir el favorito anterior.
Queda desactivada as una funcin importantsima del navegador
que es registrar la ubicacin de pginas en el universo web (cientos
de millones de documentos).
En la pantalla de arriba se observa una pgina interior (investigacin) que

lleva su ttulo inequvoco y como aparece en la lista de Favoritos de la
izquierda del navegador.
Pg. -24-

A continuacin se presenta una serie de ttulos de pginas, el grado
de adecuacin y mejores alternativas para que el lector haga el
ejercicio de repensar los ttulos de las pginas que publique.
Ejemplos de ttulos
Bienvenido a nuestra Home Page
Bienvenido al INTA
Bienvenido a la pgina principal del INTA
INTA
INTA Instituto Nacional de Tecnologa
Agropecuaria
INTA Boletn Informativo Jun 2001
Comentario
Pobre
Mejor
Mejor
Incompleto
Correcto para la
pg. Principal
Correcto para
pginas
interiores
Correcto para la
INTA - Instituto de Clima y Agua
pg. Principal
Correcto para
INTA - Clima y Agua - Informe
pginas
metereolgico 10 Mar 2001
interiores
Correcto para la
INTA Estacin Experimental Balcarce
pg. Principal
Correcto para
INTA Balcarce - Curso Manejo de Lanares
pginas
interiores
http://www.inta.gov.ar/cr/balcarce/lana.htm Ttulo
inexistente
Desplazar
El Programa Prohuerta del INTA
INTA a la
izquierda
Correcto para la
INTA - Programa Prohuerta
pg. Principal
INTA - Programa Prohuerta - Memoria 2000 Correcto para
pginas
interiores
Titulares de pgina
Tmese un
tiempo para
organizar el
texto.
Ya aclaramos que los titulares de una pgina web se corresponden

con las etiquetas HTML <H1> a <H6> y sirven para organizar en
forma estructurada el contenido.
El tema general del contenido de la pgina se traduce a un titular
de primer nivel (H1). El contenido de la pgina puede estar subdivido
en temas cuyos encabezados sern de segundo nivel (H2) y estos a su
vez podran subdividirse en varios de tercer nivel (H3).
Asignar etiquetas de encabezado (head) a los titulares es muy
conveniente y sencillo pero requiere que el texto este estructurado, es
decir con su contenido organizado en categoras jerrquicas (tema,
Pg. -25-

subtema etc.). Si el texto a publicar no se halla estructurado tmese un
tiempo para hacerlo y ver que le resulta ms fcil planificar el
hipertexto. Para ello separe el texto en fragmentos lgicos y agrgueles
un titular significativo.
En la pantalla siguiente se observa un artculo sobre enfermedades
de maz.
Si bien existe una estructura del texto no se ha evidenciado a travs

de etiquetas HTML apropiadas las jerarquas del texto:
<H1> Enfermedades del Maz
<H2> Vuelco por pudricin de la raz y el tallo
<H3> Importancia
Una vez asignadas las etiquetas la pgina toma el aspecto de la
pantalla siguiente.
Pg. -26-

All queda clara la importancia jerrquica de los distintos
componentes de texto. En una etapa posterior al enlazar la pgina con
la hoja de estilo (CSS) correspondiente los titulares pueden
visualizarse con otros formatos (fuente, color, etc.) que tornen la
pgina ms atractiva.
Otro ejemplo puede verse en el artculo de la National Geographic

con un titular (H1) bien destacado que atrapa la atencin del lector
inmediatamente y le da una idea clara sobre el tema tratado.
Pg. -27-

En el ejemplo siguiente un artculo tcnico sobre cra bovina no se
adapta a la lectura en pantalla por varios motivos:
Texto excesivamente largo (para la pantalla)
Falta de estructuracin del contenido (sin titulares y subtitulares)
Prrafos largos
Todo lo anterior dificulta el hojeado del documento obligando al
usuario a desplazarse a travs de varias pantallas.
El titular de la pgina: Algunas consideraciones bsicas... no
sugiere el tema del artculo, solo lo ubica temticamente: manejo
nutricional de vientres, pero no avanza sobre lo especfico (restriccin
nutricional), el ensayo ni sobre las conclusiones. El usuario del sitio no
puede decidir de antemano si le interesa la pgina y debe descargarla
obligadamente.
Es preferible anticiparle al usuario algo ms sobre lo que puede
encontrar si sigue leyendo y en un recorrido rpido hacerle conocer
los items principales.
Un mejor titular podra haber sido:

Restriccin nutricional de vacas al destete: una alternativa de
manejo, lo cual acerca ms al contenido del artculo.
Pg. -28-

Debera cambiarse tambin el rtulo (ancla) de acceso al artculo
en la pgina correspondiente. En la imagen siguiente se observa la lista
de artculos, en dicha pgina se podra agregar adems del rtulo un
breve comentario sobre cada artculo listado que oriente an ms al
lector.
Es decir que rtulos y titulares deben pensarse para lograr que el

usuario no tenga dudas sobre el contenido del artculo en cuestin y as
pueda decidir si es de su inters.
LOS TEXTOS OCULTOS DE UNA PGINA
El principal
motivo para
dedicarles
tiempo y
esfuerzo es la
accesibilidad
de la pgina.
El lenguaje HTML incluye una serie de marcadores o etiquetas

que permiten incluir en la pgina ciertos datos sobre si misma, es decir
datos sobre los datos o informacin que contiene la pgina o lo que en
la jerga informtica se llama metadatos. Por eso a estas etiquetas
especiales se las conoce en ingls como metatags o etiquetas
meta.
La informacin de las etiquetas meta no es visualizada por el
navegador sino que permanece oculta en el cdigo HTML al que
puede accederse a travs del men Ver/Cdigo Fuente del Explorer.
Por eso pasa desapercibida para la mayora de los usuarios y muchos
programadores web las ignoran, seguramente debido al hecho que no
aaden valor a sus diseos visuales o por desconocimiento sobre su
utilidad.
Veamos entonces cual es el objeto de incluir etiquetas meta y
cuales son las posibilidades y alcance de las mismas.
El principal motivo para dedicarles tiempo y esfuerzo es la
accesibilidad de la pgina, entendiendo como tal la facilidad con que
puede ser localizarla desde los buscadores, ya sea el del propio sitio o
Pg. -29-
Las pginas
deben quedar
bien
posicionadas
en un ranking
de resultado de
bsqueda de
un motor.
cualquier otro motor externo. La calidad de la informacin obtenida

por un motor de bsqueda no solo depende de su programacin interna
sino tambin de los datos que se le brinden sobre el contenido de las
pginas, datos con los que construir sus bases de datos. Si las pginas
poco informan sobre su contenido, el motor no puede hacer mucho
para asignar relevancia a dichas pginas durante un proceso de
bsqueda basado en palabras clave.
Adems de ser encontrada, la pgina debiera quedar bien
posicionada en el orden de los resultados de la bsqueda. De poco vale
que la pgina quede ubicada en posicin 189 pues los usuarios no
revisan ms que un nmero relativamente bajo de resultados.
Los motores usan diferentes tcnicas para elaborar el ranking de
resultados y utilizan a tal fin el contenido de las etiquetas meta.
Las etiquetas META TAGs se deben colocar en la cabecera de la
pgina entre las etiquetas correspondientes (<HEAD> y </HEAD>).
A continuacin daremos un ejemplo de las etiquetas que se
deberan incluir en una pgina de contenido con informacin tcnica
agronmica.
<META name="description" content="descripcion de la
pgina aqu">
<META name="keywords" content="palabra clave 1,palabra
2,palabra3">
<META name="author" content="Nombre del autor">
Por ejemplo una pgina con un documento tcnico podra contener este
encabezado:
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<meta http-equiv="Content-Language" content="es">
<meta name="GENERATOR" content="Microsoft FrontPage
4.0">
<meta name="ProgId"
content="FrontPage.Editor.Document">
<meta name="Microsoft Border" content="none">
<META name="description" content="Informe tcnico sobre
el comportamiento de cultivares de Cebadilla Criolla en
ensayos de fertilizacin NPK">
<META name="keywords" content="Cebadilla Criolla,
pastura, forrajeras, fertilizante, fertilizacin, Nitrgeno,
Fsforo, Potasio, dosis, rendimiento, materia seca, variedad,
variedades, foliar">
<meta name="author" content="Juan Martn Zubillaga">
<title>INTA - Pergamino Novedades en pasturas</title>
Pg. -30-

<link rel="stylesheet" type="text/css"
href="_private/intastyle.css">
</head>
Los editores de cdigo como FrontPage incorporan

automticamente algunas etiquetas con informacin de lenguaje y del
programa. Existen muchas otras etiquetas y parmetros para controlar
algunos comportamientos e informacin de la pgina; para ms
informacin puede consultarse la bibliografa recomendada.
LECTURABILIDAD
Todo el esfuerzo que se haga para mejorar el ndice de
lecturabilidad es poco si se entiende que el tiempo de atencin del
usuario web es escaso y la lectura en pantalla dificultosa.
El proceso de lectura en general ha sido objeto de numerosos
estudios y pueden darse algunas recomendaciones que tienen mayor
validez an, para la lectura en pantalla. El ndice de lecturabilidad o
legibilidad disminuye cuando:
Se utilizan prrafos muy largos. El ejemplo siguiente

esta extrado de una pgina web de INTA.
Durante los dos meses de trabajo destinados a esta etapa del
proyecto, se trabaj con clulas somticas de diferentes
individuos y con diferentes caractersticas de inters tanto
zootcnico como biomdico. En las trece sesiones de clonado
que se llevaron a cabo durante ese perodo, se pusieron a
fusionar un total de 819 vulos con clulas somticas. El xito
de la fusin fue muy alto puesto que se observ un 91.7% de
fusiones. La etapa siguiente en la evaluacin del proceso, fue la
de vulos fusionados que comenzaron la divisin. Es as que se
observ que el 54% de estos vulos eran embriones que haban
comenzado la divisin celular entre las 24 y 36 hs. despus de
ser activados. Posteriormente, estos embriones de dos clulas
deban seguir creciendo durante 6 das para llegar al estadio en
que podan ser transferidos a las vacas receptoras. En esta etapa
es en general donde se producen las mayores prdidas ya que es
muy difcil de mantener en el laboratorio condiciones de
cultivo similares a las que se observan en el tero del animal
vivo. A pesar de ello, a los 7 das despus de la fusin se
observ que un 41% de los embriones que haban comenzado la
divisin alcanzaban el estadio deseado (llamados mrula y
blastocisto) lo cual significa que un 22% de los vulos
fusionados haban llegado a ser embriones susceptibles de ser
transferidos a las vacas receptoras. Esta performance general
puede ser considerada excelente ya que fue similar a la
obtenida en otros laboratorios del mundo que trabajan en la
misma tcnica desde hace varios aos.
Pg. -31-

Observe el mismo texto fraccionado, sangrado, con
separacin de prrafos y enfatizado de palabras que
atraen la atencin. La tipografa utilizada (Verdana)
tambin es ms apropiada para la lectura en pantalla.
Durante los dos meses de trabajo destinados
a esta etapa del proyecto, se trabaj con clulas
somticas de diferentes individuos y con diferentes
caractersticas de inters tanto zootcnico como
biomdico.
En las trece sesiones de clonado que se
llevaron a cabo durante ese perodo, se pusieron a
fusionar un total de 819 vulos con clulas
somticas.
El xito de la fusin fue muy alto puesto que
se observ un 91.7% de fusiones. La etapa
siguiente en la evaluacin del proceso, fue la de
vulos fusionados que comenzaron la divisin. Es
as que se observ que el 54% de estos vulos eran
embriones que haban comenzado la divisin celular
entre las 24 y 36 hs despus de ser activados.
Posteriormente, estos embriones de dos
clulas deban seguir creciendo durante 6 das para
llegar al estadio en que podan ser transferidos a las
vacas receptoras. En esta etapa es en general
donde se producen las mayores prdidas ya que
es muy difcil de mantener en el laboratorio
condiciones de cultivo similares a las que se
observan en el tero del animal vivo.
A pesar de ello, a los 7 das despus de la
fusin se observ que un 41% de los embriones que
haban comenzado la divisin alcanzaban el estadio
deseado (llamados mrula y blastocisto) lo cual
significa que un 22% de los vulos fusionados
haban llegado a ser embriones susceptibles de
ser transferidos a las vacas receptoras.
Esta performance general puede ser
considerada excelente ya que fue similar a la
obtenida en otros laboratorios del mundo que
trabajan en la misma tcnica desde hace varios
aos.
Se utilizan palabras muy largas. Trate de encontrar

sinnimos que simplifiquen y acorten el texto.
Pg. -32-
Se incorporan varias ideas en la misma frase. Trate de

limitar los conceptos que incluye en una frase y si es
necesario utilice varias frases.
Se utilizan dobles negativas, por ejemplo:
...nunca debe impedirse que las
vaquillonas accedan a...
es menos comprensible que

...las vaquillonas deben acceder
libremente a...
Como norma
pruebe sus
diseos en
todas las
resoluciones
probables de
monitor.
Se utiliza todo en mayscula

No se alinea el texto a la izquierda
QUE SIENTE CUANDO TIENE QUE LEER UN
TEXTO COMO ESTE.
SI PRESTA ATENCIN DESCUBRIRA QUE
LECTURA EN MAYSCULA ES MAS LENTA
(UN 10 %) Y CANSADORA. EN EL CORREO
ELECTRNICO, POR EJEMPLO, SE CONSIDERA
UNA DESCORTESA QUE VA CONTRA LAS
REGLAS DE NETIQUETTE. ADEMS LA
ALINEACIN CENTRADA INTERFIERE CON EL
MOVIMIENTO NATURAL DE LA VISTA A LA
IZQUIERDA CADA VEZ QUE TERMINA UNA
LINEA.
En las pginas web adems se debe cuidar el tamao de la fuente,

ya que los tamaos muy pequeos se visualizan mal en pantalla y
en ese caso es preferible usar fuentes sans-serif.
Como norma pruebe sus diseos en todas las resoluciones
probables de monitor y utilice tamaos de fuente porcentuales para
dejar la posibilidad abierta al usuario de cambiar el tamao de texto en
el navegador.
Pg. -33-
EL CONTEXTO DE LA PGINA
En ocasiones se accede a una pgina en particular desde un motor
de bsqueda, por lo tanto se desconoce la ubicacin de la misma en la
jerarqua de contenidos, salvo que se ofrezca la informacin de
contexto en dicha pgina. Veamos un ejemplo.
Preste
atencin al
contexto de la
pgina.
La pantalla de arriba muestra una parte de los resultados de una

bsqueda por la palabra clave trigo. El 7 resultado indica
Adelantos Produccin Vegetal que surge del ttulo (title) de la
pgina.
Si observamos la pgina en cuestin en la imagen siguiente,
notamos la falta de contexto: no sabemos a que unidad, proyecto,
publicacin o autor pertenece; no se indica la fecha del documento (de
mxima importancia en documentos tcnicos) ni como contactarse
para obtener ms informacin. Al no existir vnculos a la estructura, el
usuario tampoco tiene forma de navegar por informacin relacionada.
Se debe entonces prestar atencin al contexto de todas las
pginas, dando toda la informacin relacionada que transforme simples
datos en informacin til. La inclusin de la barra de navegacin en la
parte superior de las pginas de INTA apunta al mismo concepto.
Pg. -34-
IMGENES PARA LA WEB
Cuando usar imgenes

Las imgenes pueden comunicar mensajes de una manera que no
es posible hacer por medio de palabras. Es posible describir en un
texto la belleza del paisaje pero cada lector se har una imagen mental
diferente del mismo.
En pginas comerciales se precisan las fotografas de los
productos para que se los identifique correctamente y por su efecto
vendedor.
En documentos tcnicos, acadmicos o educativos suele ser
necesario acompaar un relato con imgenes que demuestren lo que se
afirma de manera contundente o que clarifiquen conceptos demasiado
abstractos.
En otros casos, las imgenes tienen un sentido esttico y
decorativo.
Pero en muchos casos las imgenes que se encuentran en pginas
Web no tienen ninguno de los dos sentidos mencionados y se incluyen
simplemente por que hay espacio y este no se cobra. Sin embargo,
Pg. -35-

no es del todo gratis pues el costo de descarga e impresin lo absorbe
el usuario.
Las imgenes que no cumplen una funcin significativa en la
pgina deben eliminarse por tres razones:
1. Incrementan el tiempo de descarga de la pgina.
2. Distraen la atencin.
3. Interfieren con el mensaje.
Deben
evitarse las
imgenes en
las pginas de
navegacin.
Antes de incluir una imagen en la pgina pregntese: para qu,

despus de incluir la imagen en la pgina pregntese: agreg valor?
Los usuarios desean ver fotografas sobre temas especficos e
incluso estn dispuestos a soportar los prolongados tiempos de
descargas de grandes fotos de calidad si son de su inters, por eso
deben evitarse las imgenes en las pginas de navegacin (alto nivel en
la jerarqua) dado que en ese momento an no ha seleccionado un tema
concreto. En esta etapa de su recorrido la velocidad es la mxima
prioridad. Una vez que se encuentra en pginas de contenido (por
ejemplo, un artculo sobre enfermedades del trigo) las imgenes
agregan valor al documento. Pero mantenga un ojo en el
cronmetro!
Escalado de imgenes
Una forma de superar la tensin que siempre existe entre el
tamao total de la pgina (en bytes) y la necesidad de incluir
fotografas es utilizar miniaturas enlazadas a las imgenes a tamao
completo. Esta tcnica tiene la ventaja de no demorar el conjunto de la
pgina al mismo tiempo que se enriquece visualmente. Por otra parte el
detalle de las fotografas se conserva para quien realmente este
interesado en verla.
Las tres tcnicas para crear miniaturas de fotos son: el recorte, la
reduccin de resolucin y la compresin. Las tres tcnicas pueden
combinarse para obtener una miniatura que sea de tamao mnimo
conservando sentido.
Si recorta una fotografa de 70 Kb, obteniendo una porcin de
32% del original, y luego reduce el tamao al 32% obtendr una
fotografa del 10% del tamao original o sea de 7Kb.
El formato jpg admite diferentes grados de compresin. Ud.
puede ensayar diferentes valores de compresin al guardar el archivo
de la miniatura observando la calidad obtenida.
Las siguientes imgenes ilustran las posibilidades mencionadas y
los tamaos de archivos obtenidos.
Pg. -36-
La imagen
original
178 Kb
Recorte
25Kb
Recorte y
reduccin
de tamao
8.6 Kb
Idem
comprimida
6 Kb
Pg. -37-
El rcord
Un mal ejemplo que bien podra aparecer en el libro de rcords
de Guinnes es la pgina http://www.doangroup.com/specials.htm
que presenta un imagen escaneada del peridico con la publicidad
de venta de autos usados que mide 1.075.496 bytes.
Si, ley bien, 1 MB o unos 9 minutos de tiempo de descarga.
MULTIMEDIA: SONIDO Y VIDEO

PARA LA WEB
El uso de multimedia en la web
entusiasma a diseadores y
contenidistas por igual pero tambin
debe someterse a las pautas generales
que venimos sosteniendo en materia de
velocidad de descarga, distracciones
etc.
Se debe considerar que no se puede anticipar el gusto de los
usuarios por lo cual la inclusin de msica corre el riesgo de disgustar.
Pero fundamentalmente su utilizacin debe cumplir una funcin
clara de agregar valor al contenido. De lo contrario es preferible
descartar el recurso.
En determinado tipo de contenidos, por ejemplo los educativos, se
torna necesario incluir este tipo de material, pero debe analizarse la
Pg. -38-

posibilidad a la luz de los destinatarios y los recursos de hardware y
software disponibles, tanto en el cliente como en el servidor. De lo
contrario se caer en pginas excesivamente lentas que desalentarn su
uso.
Animaciones
El movimiento, es sabido, atrae la atencin y los diseos de pgina
tratan de explotar dicha capacidad aunque muchas veces sin medir las
consecuencias para el conjunto visual y su principal objetivo:
comunicar
un mensaje
determinado.
Por ejemplo,
si en la parte
inferior
izquierda de
una pgina
se coloca la
imagen
animada de
un sobre
para
representar
un vnculo
de correo electrnico, la visin perifrica distraer los ojos del lector
del texto principal (lo realmente importante) hacia un elemento
secundario.
Obsrvese esta pantalla:
Ntese que el buzn (animado) no agrega ningn mensaje al
vnculo de e-mail a su derecha y consume el valioso espacio superior
de la pantalla. Tal vnculo debera estar en la parte inferior de la
pantalla incrustado en un texto que explique que informacin se puede
solicitar a esa direccin.
Hay diferentes tecnologas disponibles para mover texto o
imgenes desde las ms sencillas como los Gif animados hasta los
archivos de Shockwave o Flash de Macromedia pasando por applets de
Java.
La eleccin de una u otra debe obedecer a los criterios de :
1. Compatibilidad con los navegadores
2. Necesidad de utilizacin de plug-ins
3. Tamao de los archivos generados
4. Posibilidad de errores de cdigo
Pg. -39-

5. Capacidad para lograr los efectos deseados
Cundo conviene usar animaciones?

1. Para mostrar la sucesin de diferentes estados, por ejemplo:
el desplazamiento de los continentes o las fases de divisin
celular.
2. Clarificar el significado de conos que puedan ser mal
interpretados.
3. Para comunicar ms mensajes en la misma zona de la
pantalla, por ejemplo, mapas de imgenes que cambien al
pasar el puntero por cada rea.
4. Mejorar la interpretacin de estructuras tridimensionales.
5. Atraer la atencin hacia un elemento en particular, por
ejemplo novedades. En este caso se deben evitar las
animaciones continuas, ms bien programar uno o dos
bucles y despus detenerla.
Valen tambin las consideraciones hechas sobre el uso de
imgenes en el apartado Cuando usar imgenes.
Sonido
El audio proporciona una dimensin adicional al uso de la pantalla.
Puede utilizarse para agregar comentarios, complementar la interfaz de
usuario, reproducir msica o sonidos.
El sonido de calidad mejora la experiencia del usuario por lo que,
tomada la decisin de incorporarlo, vale la pena dedicar esfuerzo en su
preparacin o consultar un profesional que balancee la calidad con el
tamao del archivo y elija el codificador adecuado.
Recomendaciones:
No utilice sonidos como fondo de pgina salvo que tenga

un sentido particular y en pginas de contenido.
De usar sonidos de fondo, indique uno o dos bucles de

reproduccin, en vez de ejecucin continua.
Si utiliza descarga de archivos, indique el tiempo de

descarga aproximado y el reproductor de audio necesario.
En el rtulo de descarga, indique claramente de que se trata

el sonido.
Pg. -40-
Video
Si bien la utilizacin de video tiene muchas ventajas desde
comerciales hasta educativas su incorporacin a la web esta limitada
actualmente en nuestro pas por la disponibilidad de ancho de banda.
Su uso debe limitarse a casos excepcionales y preferentemente en
las porciones de la red donde la velocidad este asegurada, por ejemplo,
la Intranet central.
La produccin de videos digitales es una especialidad y se debera
consultar a un profesional con experiencia en el tema antes de
embarcarse en alguna iniciativa de este tipo.
Puede
complementar
sus diseos
web editando
Cds con
contenido
multimedia.
No es recomendable agregar fragmentos de video de ms de un

minuto de duracin, superado ese tiempo debera subdividirse el
mismo.
Si esta pensando en usar masivamente video, por ejemplo en
actividades de formacin, evalu la edicin de un CD Rom que
contenga el video digitalizado y que complemente los contenidos Web.
Al igual que en el apartado anterior en el rtulo de descarga de
archivos de video indique claramente de qu se trata el fragmento y si
es posible incorpore una pequea fotografa de alguna escena del
mismo.
La evolucin de las tecnologas de compresin, de streamimg,
servidores ms potentes y mayor ancho de banda irn mejorando las
posibilidades de utilizacin de video on-line.
Pg. -41-
CAPITULO 5: DISEO DE PGINAS

DISEO INDEPENDIENTE DE LOS
DISPOSITIVOS DE
VISUALIZACIN
Una pgina web puede ser visualizada a travs de un navegador en

dispositivos tan variados como monitores de 14 o 21, pequeas
computadoras de mano (Palm PC) y hasta en pantallas de telfonos
celulares.
La cantidad de pixeles que
dispone un usuario para
visualizar una pgina vara
adems en funcin de la
resolucin de su pantalla con
valores tan dispersos como
1280 x 1024 en monitores
grandes hasta 180 x 320 en
algunas Palm.
Los tamaos
fijos de fuente
ocasionan
problemas.
Por otra parte, el usuario

puede controlar el tamao de
visualizacin del texto
alterando la cantidad y
disposicin del los elementos
de la pgina.
Los tamaos fijos de
fuentes y tablas ocasionan
problemas de visualizacin y
de impresin. El desafo,
entonces, es lograr pginas que
se vean bien en diferentes contextos.
SI
Crear diseos adaptables a diferentes tamaos de pantalla..
NO
Diseos para una determinada configuracin de monitor. Ej:

800 x 600
Recomendaciones:
Utilizar tamaos de fuente variables: porcentual o em.
Utilizar tamao de tablas porcentuales.
Testear los diseos en diferentes pantallas y con distintos

tamaos de fuentes.
Probar la impresin.
Pg. -42-
LA UTILIZACIN DEL ESPACIO

Los usuarios acceden a pginas web para obtener informacin
relevante (contenido) por lo tanto, el espacio debe ser utilizado
mayoritariamente con ese fin.
Recomendaciones:
El contenido debe abarcar entre el 50 y el 80% del espacio

disponible (tener en cuenta el espacio que utiliza el
navegador).La barra de navegacin debe mantenerse por
debajo del 20 % del espacio.
El uso de grficos debe limitarse y evitar aquellos que

comunican poco y ocupan mucho.
Los espacios en blanco pueden usarse para agrupar el

contenido y evitar los diseos muy compactos y con
demasiadas opciones.
Observe la distribucin del espacio en esta pgina y calcule el %

destinado a contenido (sombreada en celeste y punteada en rojo).
Fjese tambin el exceso de elementos de navegacin: marco
izquierdo y barra superior en forma de botones excesivamente
grandes.
Pg. -43-
EL TIEMPO DE DESCARGA
Time is money
Un estudio
demostr la
alta correlacin
entre cantidad
de visitas y
rapidez de
descarga.
El tiempo es dinero reza un proverbio ingls y en la Web

podramos afirmar que es an ms valioso. Los estudios desde 1994 a
esta parte demuestran que los usuarios demandan ms y ms
velocidad. En las encuestas los usuarios se quejan de este aspecto
mucho ms que de cualquier otro por lo que se concluye que los
usuarios prefieren sitios rpidos antes que atractivos (muy pocos se
quejan de la pobreza visual).
Un estudio de Jacob Nielsen en 1999 comparando los sitios ms
visitados de la web contra los sitios de las corporaciones ms grandes
de EEUU demostr la alta correlacin entre cantidad de visitas y
rapidez de descarga. En los sitios web ms visitados las pginas tenan
un promedio de 8 segundos de tiempo de descarga mientras que las
pginas de los sitios de las grandes corporaciones descargaban en
promedio en 19 segundos.
La tasa de abandono de pginas (antes que termine de descargarse)
tambin se incrementa notablemente cuando se supera el lmite de los
diez segundos, comportamiento que se corrobora a nivel de servidor
analizando las estadsticas de visitas y permanencia en las pginas
especialmente en la principal. Hemos visto en ciertos perodos que un
60 % de las visitas contabilizadas en la web de INTA, son en la pgina
principal lo cual indica que muchos usuarios no siguen navegando.
Pginas veloces
10 segundos
es el tiempo
mximo para
mantener la
atencin del
usuario.
Con el objetivo de hacer que la experiencia del usuario sea lo ms

exitosa posible la velocidad de las pginas ser el criterio ms
importante de diseo de las pginas web.
Los estudios de varias dcadas sobre interfaces humanas indican
que 10 segundos es el tiempo mximo para mantener la atencin del
usuario centrada en la tarea, por lo tanto el objetivo ser que todas las
pginas estn por debajo de los diez segundos de tiempo de
descarga. Para lograr esto el tamao mximo de las pginas debe ser
de 20 Kb (a una tasa promedio de descarga 2 Kb/seg) sumando todos
los componentes de la misma (grficos, plug-ins, objetos incrustados
etc.).
NO
Disear pginas largas con grficos pesados, animaciones y

componentes.
SI
Utilizar el hipertexto para crear conjuntos de pginas

relacionadas discretas y giles.
Pg. -44-
Recomendaciones para disminuir los tiempos de descarga:
Fraccione los documentos largos en unidades de

informacin con sentido.
Depure el cdigo HTML. Vea el captulo X
Limite y optimice los grficos. Vea el captulo X
Los hipervnculos a directorios deben incluir la ltima barra

para evitar retardo por redireccionamiento.
Ej: http://www.inta.gov.ar/iffive/
Evite tablas complejas y anidadas y de ser necesario divida

la tabla en varias ms simples.
Disee las pginas con la informacin ms importante

arriba (texto) y desplace las imgenes hacia abajo.
Contabilice el tamao de todos los componentes de la

pgina, imgenes, botones, applets, pginas incrustadas etc.
pues lo que importa es la suma total de Kilobytes.
Documentos muy largos
Los
hipervnculos
expanden el
espacio de
informacin.
Cuando la pgina de contenido an optimizada sea de excesivo

tamao (que excedan 10 segundos) o contenga muchas imgenes, debe
indicar el tiempo de descarga aproximado y dejar libertad al usuario
para que tome la decisin de descargarla.
El mismo criterio debe usarse siempre para documentos en otros
formatos: pdf, zip, word, excel etc.
LOS HIPERVNCULOS
Los vnculos expanden el espacio de informacin permitiendo
relacionar informacin ms all de la estructura del sitio. Pueden
relacionarse pginas con otras similares o con noticias de actualidad
sobre el tema o con sitios externos.
Las posibilidades son infinitas y un uso criterioso de los mismos le
dar valor agregado al sitio. Aqu es donde Ud. puede construir un
verdadero hipertexto, es decir tejer las relaciones entre conceptos que
residen en pginas muy distantes entre s fsicamente pero muy
cercanas conceptualmente.
Por otra parte permite no reinventar la plvora reutilizando e
integrando los esfuerzos de otros y liberando tiempo, energa y
creatividad para nuevos desarrollos.
La receta es: si ya existe, solo utilcelo!

Pg. -45-
Textos de hipervnculos (ancla)

Se refiere a la porcin de texto que se activa con el clic del
mouse. Los textos de los hipervnculos deben ser significativos y
representar fielmente la informacin que encontrar el usuario al
seguir el vnculo y por que debe dejar el contexto actual. La idea es
que el usuario no tenga que adivinar sino que pueda decidir antes
de hacer clic.
Dedique tiempo a pensar en la redaccin de los hipervnculos y
sus ttulos (apartado siguiente) y su coherencia con el resto del
sistema de rotulado: ttulos y descripciones de pginas etc.
Recomendaciones:
Evitar vnculos no descriptivos del tipo Haga clic aqu o

Nota siguiente pues no revela contenido.
Ejemplo correcto:
Ms informacin sobre produccin de soja en el NOA.
Ejemplos incorrectos:
Para ms informacin sobre soja haga clic aqu.
Ms informacin. (muy impreciso)
El ancla de hipertexto no debe contener ms de cuatro

palabras pero si fuera necesario puede ampliarse la
descripcin como texto normal.
Por ejemplo:
Otros proyectos institucionales sobre mejoramiento animal
en Balcarce.
Ttulos de vnculos
El atributo TITLE en los hipervnculos permiten desplegar una
etiqueta de pantalla al pasar el mouse sobre l, otorgando mayor
contexto sin alterar el texto del hipervnculo.
Por ejemplo:
El presidente del INTA Ing. Hugo Cetrngolo firm un convenio...
El cdigo del hipervnculo podra ser :
<a href="http://www.inta.gov.ar/presid.htm"
title="Ing. Cetrngolo">Hugo Cetrngolo</a>
y presentar el siguiente aspecto al pasar el mouse sobre l:
Pg. -46-

Recomendaciones:
La longitud de los ttulos de hipervnculos no deben

exceder los 70 caracteres.
Debe agregar informacin de lo contrario no se justifica su

uso.
Por ejemplo (incorrecto):
<a href="http://www.inta.gov.ar/presid.htm"
title="Ing. Cetrngolo">Hugo Cetrngolo</a>
Colores de vnculos
Existe
correlacion
positiva entre
uso de colores
estndar y
usabilidad.
Los colores estndar que utilizan los navegadores para diferenciar

a los vnculos ya visitados del los todava no visitados deben respetarse
por que la mayor parte de los usuarios los reconoce y les ayuda en la
navegacin.
En pruebas de usabilidad se ha encontrado correlacin positiva
entre uso de colores estndar y porcentaje de xito en las tareas.
Destino de los vnculos

Los vnculos deben abrirse en la misma ventana salvo
excepciones muy justificadas.
La apertura de nuevas ventanas est totalmente desaconsejada por
diversas razones, bsicamente por que confunden a los usuarios,
alteran el funcionamiento del botn Atrs y muchos usuarios no
observan que se abri otra ventana. Constituye adems un uso no
autorizado de los recursos de la mquina del usuario.
Vnculos personales
Cuando se usa el nombre de una persona en un hipervnculo se
recomienda que la pgina de destino sea una pgina personal que
puede incluir un curriculum abreviado, vnculos a otras actividades o
publicaciones, las formas de contacto y quizs una foto.
Si lo que se desea es crear un vnculo de tipo mailto
(hipervnculo que dispara el envo de correo electrnico) es preferible
usar como ancla de texto la propia direccin de e-mail.
Por ejemplo:
Biblioteca y Archivo Documental - INTA Central
biblioteca@inta.gov.ar (vnculo mailto)
Bibliotecaria: Gabriela L. De Pedro (vnculo a su pgina personal)
Vnculos externos
Los vnculos externos (aquellos que llevan al usuario fuera de
www.inta.gov.ar ) agregan valor al sitio si se crean de manera
Pg. -47-

contextualizada. De poco vale una lista de Sitios de inters sin
comentar y sin actualizar.
Recomendaciones:
Siga las pautas generales para los vnculos.
Seleccione los vnculos con criterio y solo si agregan valor al
texto fuente.
En los vnculos contextuales no linkee a la pgina principal de
un sitio sino a la pgina especfica de referencia. As evitar el
esfuerzo de bsqueda una vez en el sitio.
Por ejemplo:
El INTA firm un convenio con la Facultad de Agronoma
por el cual se otorgan 4 becas para el Programa de
Agronegocios de dicha institucin.
La URL de destino no debe ser www.agro.uba .ar sino

www.agro.uba .ar/agrotxt/agroneg/principal.htm
Piense en el
mantenimiento!
Si decide crear una lista de vnculos piense en su actualizacin.

Es sumamente frustrante seguir un vnculo recomendado para
encontrar un mensaje de error del servidor. Al crear una
seccin de Sitios recomendados presupueste el tiempo que le
llevar mantenerla vigente.
Un pequeo comentario acerca del sitio agrega valor editorial a
su lista y ayuda a la decisin del usuario.
Si los vnculos de la lista son muchos clasifquelos en forma
consistente con la forma de organizacin de informacin del
INTA. Consulte los directorios de informacin.
En vez de incluir una lista extensa de vnculos, identifique unos
pocos portales verticales (temticos) que posean material de
calidad. Los usuarios no pueden revisar mucha cantidad de
vnculos, pero si recuerdan unos pocos de gran valor.
Acompae los vnculos externos con el logo que los representa
Los vnculos entrantes

A priori no se puede hacer mucho para controlar los vnculos que
apuntan a nuestro sitio excepto por la estabilidad de las URLs y la
calidad del contenido.
1. Los usuarios externos que sigan un vnculo para descubrir
que la pgina caduc se llevarn una mala impresin del
sitio en lo que a credibilidad se refiere.
2. Debe prestarse especial atencin a las pginas de noticias o
novedades y nombrarlas con visin de futuro. Por
ejemplo:
www.inta.gov.ar/balcarce/boletn/actual.htm presenta el
problema que dicha pgina cambia permanentemente y el
Pg. -48-

contenido debe pasarse a otra pgina o perderse.
www.inta.gov.ar/balcarce/boletn/11-2000.htm representa
una manera clara de identificar los archivos por fecha y la
URLs no tiene por que cambiar luego.
3. En cuanto a la calidad, adems de todas las consideraciones
contenidas en este manual, el centrado de las pginas en
temas especficos ayuda a que el ancla del hipervnculo de
salida sea adecuado. Es difcil crear un buen rtulo de
hipervnculo si la pgina destino contiene una variedad de
temas.
MARCOS O FRAMES
Salvo casos muy especiales y debidamente fundamentados para el
resto de los subsitios de INTA la recomendacin es categrica. No usar
marcos.
La pgina web unifica la visin de pantalla del usuario, la forma en
que se organiza la informacin, se almacena, se explora y se recupera.
El uso de marcos rompe este esquema concebido en el diseo
original de la Web.
Problemas con los marcos:

Trate por
todos los
medios de no
usar marcos
(frames).
1. La direccin URL es la del frameset (archivo que

contiene informacin sobre el conjunto de marcos
utilizados) en vez de la pgina de contenido.
2. Dejan de funcionar los marcadores: favoritos, historial,
copiado de URLs y pegado en otros documentos o emails.
3. Lo anterior impide la difusin boca a boca de las URLs.
4. Roban espacio valioso de pantalla a expensas de contenido
mxime en monitores de baja resolucin y tamao.
5. Se complica el proceso de impresin.
6. Confunden a los motores de bsqueda en la creacin de
ndices.
7. Las pginas externas vistas dentro de un marco se ven
diferentes al diseo original.
8. Si la pgina de destino tambin esta diseada con marcos el
problema de usabilidad se agrava.
Pg. -49-
Obsrvese que el ttulo de la pgina y la URL

(www.inta.gov.ar) corresponden a la pgina principal
a pesar de estar en una pgina interna de bibliotecas.
Recomendacin:
Antes de organizar su sitio con marcos pinselo dos veces, luego
vuelva a pensarlo y ante la dudad diga NO. Encuentre alguna otra
forma ingeniosa para hacer lo que pretende sin caer en los marcos.
Casos especiales
En una pgina larga con vnculos a marcadores de la misma pgina
o a otras pginas de contenido similar.
Por ejemplo, un ndice alfabtico con un marco horizontal que
contenga las letras del alfabeto como vnculos a partes o a pginas del
ndice.
LA IMPRESIN
Los navegadores fueron diseados para visualizar documentos en
pantalla y sus capacidades para el manejo de la impresin son
actualmente muy limitadas, sin embargo la mayora de los usuarios
imprimen las pginas (de contenido) que les interesan lo cual requiere
que se preste atencin al aspecto de las mismas una vez impresas.
Es muy comn observar pginas impresas con un par de
centmetros del lado derecho cortado, debido a que el ancho de la tabla
que contiene el texto excede al de la pgina impresa.
Recomendaciones:
Pg. -50-
Adems de observar la pgina en la pantalla, pruebe

imprimindola en papel carta y A4 y cuide que no se pierda
nada.
Cree y vincule versiones imprimibles de los documentos
ms extensos o que se hayan dividido en varias pginas.
Esto disminuir el trabajo de impresin y derroche de
papel.
En la versin para impresin puede manejar otros
mrgenes, espaciados de prrafos y tipografas que
considere ms adecuadas.
La versin imprimible puede tambin ser realizada en
formato .PDF o .doc y debe aclararse el formato en el
vnculo, as como su tamao, tiempo de descarga estimada
y software necesario para utilizarlo.
Pg. -51-
CAPTULO 6: LA CODIFICACIN
Este captulo ser de mucha utilidad para aquellos que tienen
nociones de HTML. Si a Ud. le asusta todo lo que tiene que ver con
lenguajes de programacin igualmente le sugiero que le de una
lectura rpida, lo que le permitir adquirir algunos conceptos bsicos
que utilizar luego cuando use editores de pginas web, an sin
escribir una lnea de cdigo.
CODIFICACIN SEMANTICA
Con el objeto de que la web fuera universal, el lenguaje de
hipertexto HTML se bas originalmente en la codificacin del
significado de la informacin (codificacin semntica) y no en su
formato.
El lenguaje
HTML se bas
originalmente
en la
codificacin del
significado de
la informacin.
Mediante etiquetas se marca un bloque de texto y se le asigna un

significado particular, por ejemplo el encabezado de una pgina se
marca como <H1>, el subencabezado como <H2> y as
sucesivamente hasta <H6>.
La sintaxis general del marcado de texto indica que el bloque de
texto debe delimitarse por un marcador de inicio y un marcador de
cierre, ambos a su vez encerrados entre signos menor y mayor; adems
el de cierre lleva una barra / antes del nombre del marcador. En
sntesis:
<marcador>Bloque de texto a
marcar</marcador>
Por ejemplo:
<H1>La fotosntesis en
cultivos de verano</H1>
<p>Un enfoque productivo</p>
<H2>Bioqumica de la
fotosntesis</H2>
<p>La estructura de las
clulas .....</p>
En el bloque anterior tenemos un marcador H1 que representa el
ttulo del trabajo, dos marcadores <p> que representa prrafos
normales y un marcador <H2> que representa un subttulo o
encabezado de segundo nivel. De manera estndar este bloque html se
ver en un navegador, como el Internet Explorer, en este formato:
Pg. -52-
La fotosntesis en cultivos
de verano
Un enfoque productivo
Bioqumica de la fotosntesis
La estructura de las clulas .....
El texto encerrado entre estos marcadores es presentado en la

pantalla por los navegadores de una manera estndar, por ejemplo para
H1 el texto se muestra en tamao 24 y negrita, pero otros formatos
adicionales pueden ser establecidos por reglas de estilo (CSS) como se
ver ms adelante. La pregunta de muchos es Por que no aplicar
directamente dichos formatos al texto del encabezado en vez de usar
H1? Sobre todo teniendo en cuenta que con los programas de edicin
resulta muy sencillo hacerlo.
Razones para utilizar codificacin semntica:
1. La codificacin semntica es interpretada por todos los
navegadores independientemente de la plataforma de hardware
y software en la que corren.
2. Es ms rpido y sencillo asignar un estilo de Encabezado a un
bloque de texto que aplicarle varios formatos.
3. El cdigo HTML resultante es ms limpio lo cual aligera las
pginas web y facilita su revisin y depuracin. Por ejemplo:
<h1>Estacin Experimental Balcarce</h1>
es ms simple que:
<p><font size="5"><b><i>Estacin
Experimental Balcarce</i></b>
</font></p>
4. En el ejemplo anterior el segundo mtodo de codificar provoca
prdida del significado del texto, solo indica que va en tamao
5, negrita e itlica, pero no se puede saber que se trata de un
ttulo.
5. Si todos los documentos usan marcadores estndar, su
interpretacin es ms fcil pues el usuario se acostumbra a
relacionar determinados formatos con sus correspondientes
significados; en cambio cuando un subttulo se presenta de
varias maneras diferentes, se pierde la idea de su significado.
Pg. -53-

6. Existen lectores de pantalla para no-videntes que reconocen los
marcadores estndar HTML. Algunos pases han elaborados
normas para proteger a las personas con discapacidades como
el Americans with Disabilities Act en EEUU que indica que
todas las iniciativas de organismos de gobierno en el rea de
tecnologas de informacin deben ser accesibles para todos.
7. Los formatos de etiquetas HTML se pueden controlar y
extender mediante el uso de hojas de estilo en cascada CSS,
tema que trataremos ms adelante y que resuelve muchos de los
desafos de diseo de pginas.
8. El mantenimiento y rediseo de las pginas y sitios enteros se
reduce enormemente al usar hojas de estilos en cascada, en
combinacin con los marcadores estndar HTML. Por ejemplo:
podemos redefinir (declarar) el estilo del encabezado nivel 1
(<H1>) para que se presente con un tamao, color, alineacin,
interlineado y otros aspectos diferentes del estndar. Esto
implica crear o modificar una sola lnea de cdigo que afecta a
todos los marcadores H1 de todas las pginas del sitio. Vea la
seccin de hojas de estilo.
9. A la inversa, si se ha usado codificacin basada en formato, el
rediseo de sitios implica un trabajo gigantesco de reemplazo
de cdigo. Esto sucede tambin cuando se copia y pega texto
de otras aplicaciones como Microsoft Word.
Truco: Si debe utilizar texto de otras aplicaciones use Pegado
especial, pguelo como texto sin formato y luego complete
el trabajo asignando los estilos necesarios.
10. En un futuro no muy lejano las pginas podrn vincularse a dos
o ms hojas de estilos diseadas para diferentes dispositivos
(PCs, Palms, Web TV etc.) y el navegador elegir la ms
conveniente.
11. Los datos pueden sobrevivir en la Web por muchos aos. Ms
que lo que duran los lenguajes y las versiones de software y
mucho ms que el hardware. Es necesario que los datos
(contenido estructurado) y su formato estn lo ms separado
posible.
El Lenguaje de marcado de hipertexto (Hypertext Marked
Language) HTML ha ido evolucionando de la mano de los esfuerzos
de las grandes casas de software, especialmente Netscape y Microsoft
y de la Web Consortium que trata de imponer estndares y limitar las
diferencias que las compaas introducen al cdigo original. La batalla
comercial entre ambas empresas por captar las preferencias de los
Pg. -54-

usuarios ha provocado un problema de diseo importante: algunos
marcadores HTML (no estndar) no son soportados por el navegador
de la competencia.
Web
Consortium
trata de
imponer
estndares y
limitar las
diferencias que
las compaas
introducen al
cdigo HTML
original.
El diseador entonces se enfrenta al dilema de elegir para que

pblico realiza su trabajo: para usuarios de Explorer o para usuarios de
Netscape. La lgica indica que hay que disear para todo el mundo y
para ello se ha recurrido a distintas soluciones hasta el punto de tener
que disear dos versiones de la misma pgina para que sea vista
adecuadamente por los dos segmentos. Algunos estudios indican que el
25% del tiempo de diseo se emplea en resolver dicha situacin lo cual
obviamente se refleja en los costos y duracin de los proyectos.
Aqu predicamos el uso de un lenguaje universal mediante el uso
de marcadores HTML estndar que son soportados por la mayora
de los navegadores, complementado por la tecnologa CSS (Cascading
style Sheets). Se puede acceder a ambas especificaciones de lenguaje
en el sitio del Web Consortium (www.w3.org). Es necesario aclarar
que el Web Estndar Project no ha logrado consenso an en algunas
especificaciones y que estas evolucionan permanentemente por lo que
se hace necesario monitorear el desarrollo de los lenguajes, los
estndares y los modelos.
En este manual indicaremos cuales son los marcadores HTML
estndar que se pueden utilizar con seguridad y indicaremos cuales son
los marcadores que no se deben usar por no ser estndar o estar
desaconsejados por el Web Consortium por atentar contra la
codificacin semntica.
El aspecto (formato) final de cada marcador se dejar en manos de
la hoja de estilo oficial del INTA que incluir estilos preparados
para los usos ms frecuentes y que podr ser ampliada conforme se
adquiera el nivel de capacitacin necesario para utilizarlo.
Cuando todos los documentos del sitio estn codificados de esta
manera, un cambio de diseo se podr aplicar globalmente cambiando
algunas lneas de cdigo en la hoja de estilo. En forma automtica
todas las pginas del sitio reflejarn dicho cambio. Que capacidad de
trabajo y cuanto ahorro de recursos!
Nota Tcnica:
Los programadores avanzados y expertos disponen de herramientas adicionales como el lenguaje
de guiones (scripts) y el Modelo de Objeto de Documento (DOM) que permiten junto al HTML y CSS
crear contenido dinmico en las pginas, tambin llamado DHTML o HTML dinmico.
Otro estndar que asoma en el horizonte es el XML o Extensible Marked Language que busca
resolver el problema de la catalogacin de documentos para que sean fciles de encontrar por los
motores de bsqueda y fciles de leer. Para ello separa el contenido del formato mediante el empleo de
hojas de estilo. Como desventaja, por el momento, tenemos que los navegadores no lo soportan
totalmente y es un lenguaje ms duro que requiere cierto entrenamiento antes de su utilizacin
segura.
Pg. -55-
LENGUAJE HTML 4.0
Reglas de sintaxis
Ya dijimos que el lenguaje HTML se basa en marcadores o
etiquetas que indican que tipo de texto encierran y se relacionan con un
formato determinado de manera estndar pero modificable a travs de
especificaciones en hojas de estilo CSS.
La sintaxis bsica es:
<marcador>Bloque de texto a
marcar</marcador>
a lo que en algunos casos debe agregarse los atributos de
marcadores o etiquetas que son opciones o variaciones adicionales. La
sintaxis en ese caso queda as:
<marcador atributo>Bloque de texto a
marcar</marcador>
A su vez los atributos pueden disponer de valores o medidas y
estas se declaran entre comillas detrs de un signo igual:
<marcador atributo=valor>Bloque de texto a
marcar</marcador>
Ejemplo:
<font size=3>Bloque de texto a marcar</font>
Aqu la etiqueta font lleva un atributo size a un valor de
3.
Aunque los navegadores reconocen muchas etiquetas del
lenguaje HTML el Web Consortium desaconseja el uso de un conjunto
de ellas, como la etiqueta font del ejemplo anterior y recomienda el
control del formato de los elementos de la pgina mediante las hojas de
estilo.
Anidamiento de etiquetas
En ciertos casos es necesario combinar etiquetas para lograr
efectos diferentes. Si quisiera lograr este efecto:
El gran caon del Colorado

Debera codificarse como:
Pg. -56-
<h1>El gran caon del <font color="#FF0000">Colorado</font></h1>
En el ejemplo anterior la etiqueta H1 contiene a la etiqueta font.

Note el orden de cierre de las etiquetas: de adentro hacia fuera o
dicho en forma grfica las lneas que conectan apertura y cierre no
deben solaparse.
Otro detalle importante es que las etiquetas de bloque pueden
contener etiquetas incrustadas, pero no a la inversa.
Etiquetas de bloque son aquellas que afectan a prrafos
completos e incluyen un salto de lnea automtico. Por ejemplo: H1,
P, BR, UL y TABLE.
Etiquetas incrustadas son aquellas que afectan a cadenas de
caracteres y no comienzan en una nueva lnea. Por ejemplo: EM, B
e IMG.
Para una lista completa de etiquetas HTML consulte la
bibliografa y sitios de Internet recomendados.
UNA PGINA AL ALCANCE DE TODOS

No se requiere a un experto para crear una pgina Web, si se
tiene claro la estructura del contenido y las limitantes de la pantalla
como se coment en el Captulo 4. Bsicamente una pgina web es un
archivo de texto y por lo tanto puede crearse con una herramienta tan
sencilla como un Bloc de notas de Windows. Tambin puede
aprovechar texto que ya tenga tipeado en su procesador de texto, con la
precaucin de que al copiar y pegar no debe trasladar los formatos
del texto del procesador. Para ello debe utilizar el comando Pegado
especial y elegir la opcin Texto sin formato.
Debe tener en claro la jerarqua de los textos (encabezados,
subencabezados, las listas con vietas o numeradas) y si lleva alguna
imagen deber tener el archivo ya preparado para insertar.
Vamos a desarrollar el cdigo HTML de un documento ya
escrito en un procesador de textos y que se muestra a continuacin:
Pg. -57-
Informe de Avance Agronoma

El cultivo de la papa
Estudios realizados
Se avanz en el conocimiento de la aptitud semillera de reas no exploradas
anteriormente y se ensay la optimizacin de tcnicas de riego para las diferentes
categoras de semilla de los cultivares utilizados. Se desarrollaron mtodos ms
eficientes para la micropropagacin de plntulas y para la produccin de
minitubrculos. Adems, se puso en funcionamiento el Laboratorio de Gentica
Molecular Aplicada, logrndose la identificacin de variedades de papa y se
mejoraron las tcnicas de muestreo de suelo para la estimacin de nematodos.
Distribucin de nematodos
Se continu con el estudio de la distribucin de los nematodos cuarentenarios
includos en las listas A1 y A2 del COSAVE (1997
Germoplasma
Se coleccion germoplasma de S.commersoni ssp commersoni en la regin serrana
del sudeste de la provincia. Se conserva la coleccin de germoplasma de papa,
efectundose el monitoreo de la viabilidad de las colecciones y la regeneracin y
acondicionamiento de semilla sexual y/o mantenimiento de material clonal in vitro y
a campo.
El Tizn tardo
Se estudi la eficacia de 19 tratamientos para controlar el tizn tardo de la papa en
el cultivar Kennebec. Las condiciones ambientales fueron favorables para el
desarrollo de la enfermedad. La incidencia de la misma se evalu en base a sntomas
y defoliacin de las plantas y al rendimiento de papa recibo, "semilla" y total. La
mayora de los tratamientos qumicos controlaron la enfermedad, encontrndose
diferencias significativas entre fungicidas, dosis e intervalos entre aplicaciones.
Pg. -58-

El cdigo correspondiente para crear la pgina web sera:
<html>
<head>
<title>INTA - Balcarce - Avances Agronomia Octubre 2001</title>
</head>
<body>
<h1>Informe de Avance Agronoma</h1>
<h2>El cultivo de la papa</h2>
<h3>Estudios realizados </h3>
<p>Se avanz en el conocimiento de la aptitud
semillera de reas no exploradas
anteriormente y se ensay la optimizacin de
tcnicas de riego para las
diferentes categoras de semilla de los cultivares
utilizados. </p>
<p>Se desarrollaron mtodos ms eficientes para la
micropropagacin de
plntulas y para la produccin de minitubrculos.
Adems, se puso en
funcionamiento el Laboratorio de Gentica Molecular
Aplicada, logrndose la
identificacin de variedades de papa y se mejoraron
las tcnicas de muestreo
de suelo para la estimacin de nematodos. </p>
<h3>Distribucin de nematodos </h3>
<p>Se continu con el estudio de la distribucin de
los nematodos
cuarentenarios includos en las listas A1 y A2 del
COSAVE (1997 Germoplasma Se
coleccion germoplasma de S.commersoni ssp
commersoni en la regin serrana del
sudeste de la provincia. </p>
<p>Se conserva la coleccin de germoplasma de papa,
efectundose el
monitoreo de la viabilidad de las colecciones y la
regeneracin y
acondicionamiento de semilla sexual y/o
mantenimiento de material clonal in
vitro y a campo. </p>
<h3>El Tizn tardo </h3>
<p>Se estudi la eficacia de 19 tratamientos para
controlar el tizn tardo
de la papa en el cultivar Kennebec. Las condiciones
ambientales fueron
favorables para el desarrollo de la enfermedad.
</p>
Pg. -59-

<p>La incidencia de la misma se evalu en base a
sntomas y defoliacin de
las plantas y al rendimiento de papa recibo,
"semilla" y total. La
mayora de los tratamientos qumicos controlaron la
enfermedad, encontrndose
diferencias significativas entre fungicidas, dosis
e intervalos entre
aplicaciones.</p>
<hr>
</body>
</html>
En este ejemplo de cdigo se han utilizado las siguientes etiquetas:

<html> : identifica el texto como HTML
<head> : marca el encabezado, donde se incluye el
ttulo, las etiquetas meta, hoja de estilo
etc.
<title> : para incluir el ttulo de la pgina
<body> : marca el cuerpo de la pgina e incluye el
resto de los elementos de la pgina
<h1> : define el encabezado de la pgina
<h2> : define el subencabezado de la pgina
<h3> : define el subencabezado de la pgina
<p> : define los prrafos normales
<hr> : inserta una lnea horizontal
Como expresramos anteriormente: no hace falta mucho para

codificar una pgina de texto, solo se requiere encerrar los bloques de
texto segn su significado entre las etiquetas correspondientes. No hay
que olvidar el cierre de las etiquetas.
Es cierto que no se ganar un concurso de diseo con este
cdigo, pero nadie puede negar que es eficiente, esta limpio y
muestra lo necesario. Cualquier tcnico o personal administrativo
puede preparar estas pginas sencillas y enviarlas para su publicacin
directa en el server. Si requiere algo ms sofisticado puede destinarse
para su retoque grfico o agregado de componentes de programacin,
pero al menos ha quitado a los programadores el trabajo primario de
edicin.
Pg. -60-

As se ve nuestra pgina de ejemplo:
Pg. -61-
HOJAS DE ESTILO EN CASCADA (CSS)

CSS, es un estndar para formatear pginas Web que trasciende
las limitaciones del HTML. Promulgado por el World Wide Web
Consortium (W3C), CSS extiende HTML mediante ms de 70
propiedades de estilo que pueden aplicarse a etiquetas (tags) HTML y
que cubren aspectos como color, espaciado, posicionamiento, bordes,
mrgenes, cursores y otros.
Las hojas de estilos en cascada le otorgan ms control sobre la
apariencia y la presentacin de las pginas. Al utilizar hojas de estilos
en cascada, puede ampliar la habilidad de especificar con precisin la
ubicacin y la apariencia de los elementos de una pgina y crear
efectos especiales. Asimismo puede hacer el sitio Web ms accesible a
los visitantes que tengan exploradores o dispositivos de salida
especializados.
Las hojas de estilo pueden simplificar el trabajo de diseo de
sitios completo al centralizar el control de formatos, separndolo del
contenido de los documentos.
Internet Explorer 4.0 y posterior soporta la especificacin HTML 4.0
y CSS2. Puede consultar ms informacin en
http://www.w3.org/TR/REC-CSS2/
Contenido de una hoja de estilos

Una hoja de estilos en cascada (CSS) define los estilos que puede
aplicar a las pginas o a los elementos de pgina. Cada definicin de
estilo, o regla de estilo, consiste en un selector seguido de las
propiedades y los valores de ese selector.
A continuacin se muestran ejemplos simples de reglas de estilo
definidas en una hoja de estilos CSS:
H1 { font-size: 1 em; color: green }
H2 { font-size: 12 px; color: blue }
H1 y H2 son selectores que modifican las propiedades de
formato de las etiquetas HTML estndar. Las propiedades de los
selectores y los valores se encuentran dentro de corchetes { },
font-size es una propiedad y x-large es el valor de la propiedad
tamao fuente. Puede especificar propiedades mltiples para un
selector separando cada una de ellas con un punto y coma ( ; ).
As adems de las caractersticas normales de H1, se presentar
en color verde y tamao 1em y H2 se presentar en color azul y
tamao 12 pixeles. Cada vez que se usen!
Pg. -62-

.note { font-size: small }
Este ejemplo es un selector de clase. Un selector de clase se
puede aplicar a varias etiquetas HTML estndar, por ejemplo:
<p class= note> Prrafo cualquiera </p>
El prrafo se presentar en tamao pequeo.
Al utilizar hojas de estilos en cascada, puede establecer una

variedad ms amplia de propiedades que al utilizar slo formato
HTML estndar, entre las que se incluyen:
Efectos de fuente, como VERSALES y espaciado entre

caracteres expandido.
Propiedades de prrafo, como sangra, interlineado y espaciado
antes o despus.
Propiedades de bordes y sombreado, como cuadros y colores
de fondo.
Propiedades de ubicacin, como ajuste de texto alrededor de
los elementos de pgina, ubicacin absoluta o relativa de los
elementos de pgina y orden z (de adelante hacia atrs) de los
elementos de pgina.
Para obtener ms informacin acerca de la estructura y las reglas

para definir una hoja de estilos en cascada y sobre propiedades vlidas
y valores, consulte las especificaciones del World Wide Web
Consortium (W3C).
Utilizar la hoja de estilos con una pgina

Son tres las formas en que se pueden utilizar las hojas de estilos en las
pginas del sitio Web:
1. Vincular una pgina a una hoja de estilos externa.
2. Crear una hoja de estilos incrustada en una pgina.
3. Aplicar estilos definidos a los elementos individuales de
pgina.
Cada mtodo tiene sus ventajas y sus desventajas:
1. Utilice una hoja de estilos externa cuando desee aplicar los
mismos estilos de forma coherente en algunas o en todas las
pginas del sitio Web. Al definir los estilos en una o ms hojas
de estilos externas y vincularlas a las pginas, asegura la
coherencia de la apariencia en todas esas pginas. Si decide
Pg. -63-

cambiar un estilo, slo necesita hacer un cambio, en la hoja de
estilos externa, y ste se ver reflejado en todas las pginas
vinculadas a esa hoja de estilos. Normalmente, una hoja de
estilos externa utiliza la extensin de nombre de archivo .css,
como intastyle.css.
2. Utilice una hoja de estilos incrustada cuando desee definir los
estilos slo en la pgina actual. Una hoja de estilos incrustada
es un tipo de hoja de estilos en cascada, es decir, "incrustada"
dentro de las etiquetas <HEAD> de una pgina. Los estilos de
una hoja de estilos incrustada slo se pueden utilizar en esa
misma pgina.
3. Utilice estilos definidos para aplicar las propiedades de la hoja
de estilos en cascada a elementos individuales de una pgina.
Si una pgina est vinculada a una hoja de estilos externa, los
estilos incrustados o definidos que cree para esa pgina extendern o
suplantarn las propiedades especificadas en la hoja de estilos externa.
Utilizar la hoja de estilos

Para utilizar los estilos definidos en una hoja de estilos externa en
una pgina en particular, vincule dicha pgina a la hoja de estilos. El
programa Front Page, por ejemplo, lo hace de forma automtica
utilizando el comando Vnculos de hoja de estilos en el men
Formato.
Para hacerlo de forma manual debe agregar en el encabezado de
la pgina (entre la etiquetas HEAD) una declaracin con la siguiente
sintaxis:
<link rel="stylesheet" type="text/css"
href="../ruta/intastyle.css">
donde href declara la ruta y el nombre de archivo de la hoja de

estilos oficial de INTA.
Esta declaracin debe agregarse en todas las pginas del sitio
INTA de manera tal que el aspecto final de las etiquetas HTML se
pueda definir en forma centralizada y los cambios afectan a la totalidad
del sitio.
Pg. -64-
La hoja de estilos de INTA

/* Hoja de estilos CCS - Ing. Marcelo H. Bosch Julio 2001 */
body {font-size:1em ; topmargin:0; font-family:
Verdana, Arial, Helvetica; }
/* ---- Estilos para encabezados (titulares) de
pgina ---- */
h1, h2, h3, h4, h5, h6 {font-weight:normal; fontstyle:italic; margin-top: 10; margin-bottom: 10;};
h1 {font-family: Bookman Old Style, Times New
Roman; font-weight: medium;font-size:1.4em ;align:
center }
h2
{ font-weight: normal; font-size:
1.2em; background-color: #FFFFCC;
border-right: 1 solid #808080;
border-bottom: 1 solid #808080 }
h3
{ font-weight: medium; font-size:
1.1em; background-color: #FFFFCC;
border-right: 1 solid #808080;
;
h4 {font-weight: medium; font-size:1em ;borderright: 1 solid #808080; border-bottom: 1 solid
#808080;}
h5 {font-weight: medium;font-size:0.9em; }
h6 {font-weight: medium;font-size:0.8em; }
h1.bk { background-color: #D1D1D1 }
h6.color
{ color: #008000 }
p {font-size:0.8 em; left-margin:2; margin-top: 0;
margin-bottom: 0; }
p.content { text-indent: 40; margin-top: 10;
margin-bottom: 10 }
p.tabla {font-size:0.8 em; left-margin:2; margintop: 0; margin-bottom: 0; }
em { color: #800000; font-weight: bold };
table {width:100% ; border:0;
cellspacing:0;
cellpadding:0;}
dt { font-size:80%;font-weight: bold;}
dd { font-size:80%;};
small {font-size: 0.75em }
div.grisclaro {background-color: #DBDBDB }
span.loco {text-transform: uppercase; letterspacing: 1pt; color: #008080; font-style:italic }
span.nota {font-weight: bold; color: red; texttransform: uppercase; letter-spacing: 1pt;
background-color: yellow; font-style:italic }
Pg. -65-

span.producto
{ color: #006600; font-style:
italic; font-weight: bold }
span.intaname
{ color: #ed1b24; font-style:
italic; font-weight: bold }
span.intanameb
{ font-family: ArialBlack,
Arial; color: #ed1b24; font-weight: bold }
a:hover {font-style: italic;};
ul {list-style-type: disc;
font-size: 0.8 em;
margin-top: 0; margin-bottom: 0}
ol {list-style-type: decimal;
font-size: 0.8 em;
margin-top: 0; margin-bottom: 0}
ul.red {color: red;}
ol.red {color: red;}
ul.rednews { font-size: 0.8em; color: red; liststyle-type: square; }
.autor { color: #800000; font-style: italic }
.barranav { font-family: Verdana, Arial,
Helvetica; font-size:0.8em }
.boletin_title { font-family: Times New Roman;
font-size: 1.4 em; font-style: italic;
align="center" }
.categ
{ font-size: 0.85em; font-weight: bold };
.clase
{ font-size: 0.85em; color: #FFFFFF;
font-weight: bold; background-color: #008000 }
.contenido { text-indent: 40; margin-top: 10;
margin-bottom: 10 }
.contraste
{ font-family: Arial, Verdana,
Helvetica; color: #FFFFFF; font-weight: bold;
background-color: #FF0000 }
.copyr { font-size: 0.75em; font-style: italic;
border-top: 1 solid #C0C0C0 }
.datofoto
{ font-size: 0.7em; text-align:
center; color: #FF0000;
border-top: 1 solid #C0C0C0 }
.direccin {font-size: 0.75em; font-style:
italic;};
.inta { font-size: 0.75em; font-style: italic;
border-bottom: 1 solid #C0C0C0 }
.explica
{ color: #800000; font-size: 0.8 em;
font-style: italic }
.obra { color: #0000FF; font-style: italic }
.new
{ font-family: Comic Sans MS; fontsize: 1 em; background-color: #FFFF00;
color: #FF0000; font-style: italic }
.pie { font-size: 0.8 em; font-style: italic }
.piefoto
{ font-size: 0.7em; text-align:
center; border-top: 1 solid #C0C0C0;
margin-left: 20; margin-right: 20 }
Pg. -66-

.recom
{ background-color: #C0C0C0; font-size:
0.9 em; font-style: italic;
text-indent: 10; border-style:
solid; border-width: 1;
margin-left: 10; margin-right: 10;
margin-top: 5;
margin-bottom: 5; padding-left: 5 }
.redline
{ border-bottom: 1 solid #FF0000 }
.slogan
{ font-size: 1 em; color: #800000;
font-style: italic; font-weight: bold;
text-align: right }
.subcateg {font-size: 0.75em;}
.year { color: #FF0000; font-family: Arial Black;
font-size: 1.2 em; font-style: italic }
/* Estilos para tablas */

thead {font-style: italic; font-weight: bold;
color:green;};
tbody {font-style: normal; };
tfoot {font-style: italic; font-size:0.7em;
background-color= #FFFFCC;};
.panisup
{ background-color: #99CCFF; borderright: 2 solid #808080;
.pandsup { background-color: #CCFFFF; borderright: 2 solid #808080; border-bottom: 2 solid
#808080 }
.panimed { background-color: #CCFFCC; borderright: 2 solid #808080; }
.pandmed { background-color: #CCFFFF; borderright: 2 solid #808080;}
.paninf
{ background-color: #FFFFCC; border-top:
2 solid #808080; }
.pandinf { background-color: #FFFFCC; borderright: 2 solid #808080; border-top: 2 solid
#808080; }
/* --- o --- */
Pg. -67-
CAPITULO 7: DISEO DE SITIOS

CONSIDERACIONES GENERALES
Un equipo
interdisciplinario
que integre la
programacin,
diseo grafico,
bibliotecologa,
documentalismo,
comunicacin,
marketing y
anlisis de
sistemas.
Es muy poco
frecuente
discutir sobre la
arquitectura de
sitios porque
dicho aspecto es
invisible,
aunque
esencial.
Un sitio web es un sistema de informacin y como tal debe ser

concebido y diseado, es decir como un conjunto de piezas de
informacin (pginas) que cumplen un objetivo comn. Dichas
pginas estn conectadas entre s y conectadas con el mundo exterior
(la web) lo cual tiene implicancias a nivel de diseo. Como sistema
puede tener diversos grados de complejidad y estar integrado por una
cantidad variable de subsistemas tambin interconectados.
Este comentario trata de jerarquizar el trabajo del diseador de
sitios web que no debe ser visto como un mero artista grfico o
programador de pginas sino que debe entenderse como un
planificador de sistemas de informacin. Es probable que dicha tarea
no recaiga en una sola persona sino que deba conformarse un equipo
interdisciplinario que integre reas tan diversas como la programacin,
diseo grafico, bibliotecologa, documentalismo, comunicacin,
marketing, anlisis de sistemas y tambin la visin estratgica del
negocio institucional.
En la evolucin de los sitios web hemos visto como el rea de
sistemas ha monopolizado el desarrollo de sitios web por la base
informtica de la tecnologa web. Muchos programadores, con poco
esfuerzo, comenzaron a codificar primitivas pginas en HTML con
escaso criterio visual pero que deslumbraban por el solo efecto del
hipertexto y su potencialidad para enlazar documentos distantes. Ms
tarde los diseadores grficos agregaron a su competencia laboral al
diseo de pginas web subindose al caballo de las herramientas de
software que evolucionaron en esa direccin pero desconociendo los
fundamentos del lenguaje web. Aparecieron pginas cada vez ms
vistosas, con agregados multimedia de dudoso valor informativo pero
de gran espectacularidad. Las pginas fueron hacindose cada ms
pesadas y el lento crecimiento del ancho de banda decepcion a
muchos usuarios que deban esperar demasiado sin tener muy en claro
que recibiran a cambio de su tiempo.
En toda esta evolucin poco se ha dicho y evaluado respecto de
la estructura subyacente a los sitios web, ms bien estamos
acostumbrados a discutir sobre pginas, su diseo y desempeo. Es
muy poco frecuente discutir sobre la arquitectura de tal o cual sitio en
principio porque dicho aspecto es invisible, aunque esencial, como
dira El Principito. Por otra parte es difcil conocer la arquitectura de
un sitio por simple observacin dado que hay que deducir y suponer
muchas cosas y requiere experiencia en la disciplina especfica de
arquitectura de informacin. De tal manera podemos afirmar que la
arquitectura, ha sido la gran ausente de la fiesta Web de los ltimos
aos y es muy probable que siga haciendo as por varias razones
aunque no es este el lugar para discutirlas.
Pg. -68-

La importancia de la arquitectura tiene relacin con el tamao del
sitio as como la necesidad de un arquitecto es obvia si de construir un
edificio se trata, en cambio es discutible si el objetivo es construir una
modesta vivienda. Quizs un albail experimentado pueda hacerlo
muy bien. Resulta evidente que un sitio de la magnitud del que se
pretende para una organizacin tecnolgico/cientfica como es el
INTA no puede concebirse sin una estudiada arquitectura. Y dado que
el sitio web est compuesto por numerosos subsitios, las arquitecturas
individuales deben ser consistentes, complementarias e integrables en
el conjunto: el sitio Web www.inta.gov.ar , este a su vez es un
subsistema del sistema integrado de informacin (SII) del INTA.
Los responsables del desarrollo de cualquier componente web
deben ser conscientes de la pertenencia a dicho sistema para evitar las
famosas islas de informacin y para aprovechar la sinergia que
significa integrar nuevos nodos a una red preexistente.
ESTRUCTURA DE NAVEGACIN
Un aspecto
delicado es
decidir como
debern
navegar los
usuarios.
Uno de los aspectos ms delicados en el diseo de los sitios es la

forma en que debern navegar los usuarios ya que las satisfaccin de
los mismos estar influida por la experiencia positiva o negativa
mientras trata de encontrar la informacin deseada. No me canso de
repetir que la simplicidad en el diseo y la facilidad de uso deben ser
los objetivos de todo desarrollo web.
Es muy poco lo que puede hacerse a nivel de pgina si no se ha
pensado la estructura de la informacin por lo cual le sugerimos que
antes de disear alguna pgina de su sitio comience por especificar el
objetivo del sitio/subsitio, luego convoque a todas las personas que
tengan inters o responsabilidad para aportar contenido al sitio de
manera de reunir la mayor cantidad de informacin posible sobre el
alcance que tendr en el mediano plazo.
Una vez que se conocen todos los tipos de documentos que se
desea publicar y sus formatos se puede pensar en como agruparlos,
organizarlos y conectarlos entre s. Cada subsistema tiene sus
particularidades pero tambin similitudes. Explotar estas ltimas para
simplificar y homogeneizar el diseo de los subsitios es el desafo que
nos hemos propuesto con el propsito de darle valor agregado al sitio
en su conjunto y disminuir la exigencia de aprendizaje de los usuarios
cada vez que acceden a un componente nuevo.
El sitio www.inta.gov.ar ha sido diseado bajo esas premisas y se
pretende que los subsitios que lo integran sean diseados con el mismo
criterio. Para simplificar la tarea de los diseadores y mantener la
consistencia se ha relevado el contenido actual de los subsitios y se ha
diseado una arquitectura tipo para algunos de ellos como es el caso de
las estaciones experimentales. Ms all del tamao de las unidades y
del volumen de informacin que generan, se pretende que la misma sea
accesible de la misma manera por los usuarios. Por ejemplo: un
documento sobre ensayos de soja debe tener la misma posicin en la
Pg. -69-

estructura de la EERA Pergamino que en EERA Balcarce. Caso
contrario el usuario debera efectuar toda una investigacin en cada
subsitio para encontrar informacin similar.
Ejemplo de estructura
Otros subsitios pueden tener una identidad nica en la
organizacin como es el caso de determinados programas de
investigacin o extensin por lo que deber planificarse especialmente.
Pero en todos los casos la gua para el diseo de las estructuras ser las
tareas que deben llevar a cabo los usuarios del sitio, lo cual nos obliga
a pensar como ellos, no como diseadores.
SUBSITIOS
Un subsitio es un conjunto de pginas con estructura y
administracin propia, que comparten un estilo y forma de navegacin
y dispone de una pgina de inicio. En el INTA un subsitio puede ser de
una Estacin Experimental, de un Instituto de Investigacin, de un
Programa o de cualquier entidad organizacional que desee organizar su
espacio de informacin y/o aprovechar las tecnologas de redes para
implementar algn servicio al usuario.
En este apartado daremos algunas indicaciones sobre como
estructurar este tipo de subsistema de informacin y ofrecemos
algunos ejemplos de estructuras tpicas que se han elaborado como
plantillas para uso de los diseadores.
Pg. -70-
La pgina de inicio
La pgina inicial creemos que debe tener muy pocos elementos y
debe responder a dos preguntas bsicas: dnde estoy? y dnde puedo
ir?
La inclusin de pocos elementos colabora con la definicin del

objetivo del sitio; pregntese el lector si queda claro cul es la misin
y el objetivo del sitio de Mirabilis presentado en la pgina 16. Una
gran cantidad de opciones iniciales pueden confundir al usuario y
generalmente reflejan la falta de una arquitectura clara y definiciones
bsicas sobre qu es y para qu es el sitio.
El usuario que no conoce el sitio necesita ser guiado hacia la
informacin que necesita y en ese sentido presentarle un pequeo
numero de opciones que se vayan abriendo (estructura jerrquica)
facilita la investigacin y aprendizaje.
Pg. -71-
El usuario
debe saber a
golpe de vista
donde est.
Donde estoy?
Aunque responder a esta pregunta no parece ser un desafo para
el diseador, muchos sitios confunden al usuario por no prestar
atencin a detalles aparentemente menores pero que sumados definen
la experiencia de navegacin. Algunos a tener en cuenta son:
Titulo de la pgina: debe asegurarse que la etiqueta title este
redactada correctamente. Ver pgina 18. Por ejemplo INTA Pergamino - Estacin Experimental - Pgina principal es
preferible a Pgina principal de la Estacin Experimental INTA
de Pergamino pues las palabras ms significativas deben
desplazarse hacia la izquierda para que sean visibles en cualquier
tamao de ventana del navegador.
Logo de la institucin: dado que se trata de un subsitio debe
utilizarse el logo oficial de INTA sin ningn tipo de alteracin
particular en el centro de la pgina y con un tamao de 100
pixeles de lado.
Identificacin de la Unidad: el nombre de la unidad o
programa en estilo Encabezado 1 <H1>
URL: los subsitios de www.inta.gov.ar tendrn todos una pagina
principal con una direccin del tipo
www.inta.gov.ar/xxx/unidad/index.htm por ejemplo.
www.inta.gov.ar/creg/ban/pergamino/index.htm que se interpreta
como la pgina principal del pergamino dentro del directorio de
Buenos Aires Norte (/ban) dentro del directorio de los centros
regionales (/creg).
Estas recomendaciones apuntan a que el usuario, ya sea que entra
por el sitio de INTA o directamente a travs de un motor de bsqueda,
interprete a golpe de vista y sin lugar a dudas donde se encuentra.
Donde puedo ir?
La herramienta de navegacin se debe disear en base a la
arquitectura del subsitio. Se ha propuesto una arquitectura tipo que
refleja las necesidades de publicacin de la mayora de las unidades.
Su utilizacin contribuir al fortalecimiento de la imagen
institucional, a la consistencia de todo el sitio y a la facilidad de uso
del mismo. Lo anterior no impide que dentro de los lmites
establecidos los diseadores propongan interfaces originales.
Pg. -72-
La consistencia
visual brinda la
sensacin de
lugar conocido
al visitante.
La imagen superior permite observar algunos inconvenientes de los

que hemos hablado en los captulos anteriores:
Ttulo de pgina incompleto (no incluye la palabra INTA).
Diseo visual no estndar.
Uso no autorizado del logo oficial (animado y con recuadro
azul).
Las opciones de navegacin no se visualizan al disminuir el
tamao de la ventana y el usuario debe desplazarse
verticalmente para verlas.
La fotografa mide 12 Kb (un 60 % del tamao mximo de
pgina admitido).
La propuesta institucional para las pginas de inicio de las
Estaciones Experimentales se ejemplifica con las pantallas de las
EERA Balcarce y Pergamino. Como puede observarse el diseo de la
pgina inicial es el mismo lo cual le otorga consistencia visual, a la vez
que brinda la sensacin de lugar conocido al visitante.
La arquitectura de los sub-sitios debe ser la misma para facilitar
la navegacin, el examinado (browsing) y la bsqueda (searching) de
Pg. -73-

informacin. Es de vital importancia para mantener reducido el
esfuerzo cognitivo de los usuarios, que la informacin se estructure de
la misma forma y adems este integrada en el espacio de informacin
de todo el sitio inta.gov.ar. Para poner un ejemplo: un documento
sobre fertilizacin de trigo debe tener la misma ubicacin relativa en
Pergamino que en Balcarce, de manera que el usuario prcticamente
vaya de memoria al lugar adecuado y no tenga que adivinar en cada
Experimental donde reside esa informacin.
La pgina inicial de Pergamino.
Pg. -74-

La pgina inicial de Balcarce
FUNCIONAMIENTO DEL MOTOR DE BSQUEDA

Se sabe que un alto porcentaje de los usuarios utiliza el motor de
bsqueda del sitio para llegar a la informacin deseada, por lo que
resulta beneficioso dedicar tiempo de programacin para optimizar su
rendimiento.
No es el lugar aqu para discutir los aspectos tcnicos de la
programacin e implementacin de motores de bsqueda, pero conocer
ciertos detalles ayudar a comprender la importancia de la adecuada
catalogacin de los documentos, tema que se trat al hablar de las
etiquetas META.
Pg. -75-
BIBLIOGRAFA Y REFERENCIAS
INTA, Plan Estratgico 2001
El Sistema de Informacin Institucional. Ing. Carlos Roig. INTA. Sep. 2001.
INTA, DECOM. (2001) Unificacin de la imagen editorial del Instituto
Nacional de Tecnologa Agropecuaria.
Arquitectura de la Informacin para el WWW. Louis Rosenfeld.
Intranets. Usos y aplicaciones. Randy J. Hinrichs.
Usabilidad y diseo de sitios web. Jacob Nielsen.
El libro Oficial de FrontPage 2000. Microsoft Press.
Front Page 2000. Edicin especial. Tomo 1 y Tomo 2. Neil Randall.
Yale University Web Style Guide.
The Digital Library Toolkit. Sun Microsystems.
Los pases en desarrollo y la revolucin de las tecnologas de la informacin.
Parlamento Europeo. STOA. Evaluacin de las opciones Cientficas y
Tecnolgicas. Marzo 2001. PE n 296.692
Argentina se conecta a Internet2. Comunicado de RETINA (Red
Teleinformtica Acadmica) http://www.retina.ar
Estudios varios del INAP. http://www.inap.gov.ar
Uso Aceptable de Internet en el sector pblico. Documento de la SGP.
http://www.gobiernoelectronico.ar
Gestin de los Recursos de Tecnologa de la informacin en el contexto de la
modernizacin Gubernamental. BID. Mayo 2000.
Infotec. Sistema de informacin Cientfica y Tecnolgica del sector
Agropecuario en las Americas. FORAGRO-IICA-GFAR.
http://www.infoagro.net.es
Programa Informacin Cientfica. Chile. http://www.conicyt.cl
La Educacin en la empresa. Ernesto Gore. Granica. 1998.
Conocimiento en accin. Davenport y Prousak. Harvard Business Press. 2001
La gestin del Talento. Pilar Jeric. Prentice Hall. 2001.
La quinta disciplina. Peter Senge. 1992.
La investigacin sobre enfoques organizativos en educacin. Joaqun Gairn.
Organizacin y direccin de instituciones educativas. Joaqun Gairn. Grupo
Editorial Universitario.
Evaluacin, cambio y calidad en organizaciones educativas. I. Canton Mayo.
FUNDEC.
Organizational learning. Argyris y Ch!n. Addison Wesley.
Organizational culture and leadership. Schein. Josey Bass Publishers.
Seis sombreros para pensar. Edward DeBono. Granica.
Pg. -76-

Camino al futuro. Bill Gates.
La visin de los lderes en la era digital. Anne Leer. Prentice Hall.
Intranets: usos y aplicaciones. Hinrichs. Prentice Hall.
Tres culturas: organizacin y recursos humanos. Garmendia.
La nueva riqueza de las organizaciones: el capital intelectual. Peters. Granica.
The power of Intranets. Microsoft white paper. 1999
Knowledge architecture. Microsoft Web case study. 2000
Informacin: habilidades para manejarla y mantener el control. Malanchuck.
Prentice Hall.
Post televisin: ecologa de los medios en la era de Internet. Piscitelli. Paidos.
Internet y educacin. Rey Valzachchi. Ediciones Horizonte.
Multimedios y educacin. Marabotto-Grau. FUNDEC.
Managing oneself. Peter Drucker. Harvard Business Review.
The social life of information. John Seely Brown. Prentice Hall.
Vision and strategies for knowledge management. Microsoft White Paper.
Retos para la investigacin agropecuaria. Memorias IICA-FAO.
Una perspectiva integradora para el trabajo institucional. Documento interno
INTA.
La Era de los Negocios Electrnicos. Dan Tapscot. Mc. Graw Hill.
Hype Cycle de tendencias y tecnologas emergentes. Intermanagers 27-082001. Gartner Group.
World Wide Wap: Internet en el celular. Intermanagers Feb. 2001.
Lectores e-book. www.libroline.com/ebook4.html (visitado 22/12/2000)
Biblioteca Digital Argentina. http://www.clarin.com/pbda/
Biblioteca Pblica Digital
http://www.educ.ar/educar/superior/biblioteca_digital/
The Berkeley Digital Library SunSITE http://sunsite.berkeley.edu/
The ACM Association for Computing Machinery Digital Library
http://portal.acm.org
Biblioteca Digital Miguel de Cervantes http://cervantesvirtual.com/
El Web Consortium www.w3.org/
Artculos varios de usabilidad de Jakob Nielsen: www.useit.com
Malos ejemplos de diseo en www.webpagesthatsuck.com
Consultora de usabilidad en www.webword.com
Ingeniera de interfaces de usuario http://world.std.com/~uieweb/
Pg. -77-
APNDICE I
CHECKLIST PARA EVALUACIN DE DISEOS WEB
Puede asignar puntaje de 1 a 5 a cada tem y calcular un valor promedio para su sitio/pgina o
simplemente apunte un tilde en cada tem cumplido.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
Las pginas son ojeables (scanning)

Las pginas son breves
El texto es conciso y preciso
El lenguaje es claro
Los ttulos de las pginas son adecuados
El texto tiene estructura (tema, subtema etc.)
Se usan correctamente los titulares (H1, H2 etc.)
Se mantiene consistencia visual y estructural a lo largo del sitio
Se incluye el Metatag description
Se incluye el Metatag: keywords
Se incluye el Metatag: author
Las pginas son de buena lecturabilidad
Las pginas estn contextualizadas
Imgenes: calidad
Imgenes: pertinencia (comunican el mensaje requerido, se entiende)
Imgenes: tamao
Imgenes: se incluye texto alternativo
Imgenes: han sido optimizadas con un editor grafico
Sonido: justificacin
Animaciones: justificacin
Se usan los estilos CSS disponibles en la hoja de estilo oficial
Se usa codificacin HTML semntica
No utiliza cdigo de formateo (font, color, etc) de texto
Aprovechamiento del espacio de pantalla (porcentaje de contenido)
Tamao total de la pgina y tiempo de descarga < 10 segs.
Se usan los hipervnculos para agregar valor al contenido
Hipervnculos: se usan textos (rtulos) apropiados
Hipervnculos: uso de ttulo de hipervnculos
Hipervnculos: uso de colores estndar (visitado/no visitado)
Hipervnculos externos: especificidad, logo y rtulo.
No se usan Marcos (salvo excepciones)
Se disea para mltiples tamaos de pantalla
La impresin de las pginas es correcta
Se describe (prrafo editorial) el contenido del documento a bajar.
Se informa el tamao y formato del documento a bajar
El cdigo HTML esta depurado y optimizado
Se utilizan los logos oficiales
Todas las pginas disponen de barra de navegacin
Todas las pginas disponen acceso al a pgina de inicio en el logo INTA.
Todas las pginas hacen referencia al INTA y a su Unidad.
Todas las pginas poseen pie de pgina
Pg. -78-
INTA DECOM
Marzo 2002
Este Manual est en permanente
revisin y las actualizaciones y
agregados se irn publicando en el sitio
web de INTA.
Para comentarios, aportes, crticas,
reporte de errores y consultas dirigirse
a mbosch@correo.inta.gov.ar
Muchas gracias.
Pg. -79-

Lineamiento de Diseño Web

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lineamiento de Diseño Web

Uploaded by

Copyright:

Available Formats

Instituto Nacional de Tecnologa

INTA - Manual de arquitectura de sitios y diseo de pginas Web

Ing. Marcelo H. Bosch

INTA - Manual de arquitectura de sitios y diseo de pginas Web

Ing. Marcelo H. Bosch

INTA - Manual de arquitectura de sitios y diseo de pginas Web

Tabla de Contenido del Manual de estilo para publicacin Web

Captulo 1: La web .....................................................................................................................7

Capitulo 2: La arquitectura de sitios web..............................................................................10

Capitulo 3: La usabilidad de sitios web..................................................................................14

Capitulo 4: Preparacin del contenido...................................................................................18

Capitulo 5: Diseo de pginas .................................................................................................42

Ing. Marcelo H. Bosch

INTA - Manual de arquitectura de sitios y diseo de pginas Web

Ing. Marcelo H. Bosch

INTA - Manual de arquitectura de sitios y diseo de pginas Web

QUIENES DEBEN LEER ESTA GUA

INTA - Manual de arquitectura de sitios y diseo de pginas Web

PARTE I: ASPECTOS CONCEPTUALES

Tom Berners Lee concibi la Web como una plataforma para

Ing. Marcelo H. Bosch

INTA - Manual de arquitectura de sitios y diseo de pginas Web

PARA QUIN ES UN SITIO WEB?

La respuesta aparentemente obvia sera: para la empresa o la

Ing. Marcelo H. Bosch

INTA - Manual de arquitectura de sitios y diseo de pginas Web

Fundamentalmente, en lo que a tiempos se refiere, los usuarios son

pgina lenta = usuario molesto = visitante perdido

Ing. Marcelo H. Bosch

INTA - Manual de arquitectura de sitios y diseo de pginas Web

Brindar al usuario un acceso rpido y simple a

Constituirse en la fuente de informacin

Ing. Marcelo H. Bosch

INTA - Manual de arquitectura de sitios y diseo de pginas Web

3000 visitas diarias al sitio para fines del ao

Ya se sabe para qu ser el edificio, pero qu tamao tendr?

Ing. Marcelo H. Bosch

INTA - Manual de arquitectura de sitios y diseo de pginas Web

Pantalla de Microsoft Front Page en vista Exploracin

LA ORGANIZACIN DEL ESPACIO

Los diseadores de sitios tambin deben organizar el espacio de

Ing. Marcelo H. Bosch

INTA - Manual de arquitectura de sitios y diseo de pginas Web

Ing. Marcelo H. Bosch

INTA - Manual de arquitectura de sitios y diseo de pginas Web

CAPITULO 3: LA USABILIDAD DE SITIOS

El enfoque sistmico de construccin de sitios es el nico que

Ing. Marcelo H. Bosch

INTA - Manual de arquitectura de sitios y diseo de pginas Web

CONTENIDO PARA LA WEB

Ya dijimos que una pgina web no es una pgina impresa, un

TEXTOS PARA LA WEB

INTA - Manual de arquitectura de sitios y diseo de pginas Web

La justificacin econmica de disponer de un editor web pasa no

Como leen los usuarios

A los usuarios no les gusta desplazarse verticalmente por pginas

Ing. Marcelo H. Bosch

INTA - Manual de arquitectura de sitios y diseo de pginas Web

El medio no es el mensaje, pero lo condiciona

La lectura en pantalla es un 25% ms lenta que en papel

Ing. Marcelo H. Bosch

INTA - Manual de arquitectura de sitios y diseo de pginas Web

PARTE II: ASPECTOS TECNICOS

La lectura de largos textos impresos (novelas, monografas o