Manual estilo web

Instituto Nacional de Tecnología
Agropecuaria
wwwwww..iinnttaa..ggoovv..aarr
Manual de estilo y diseño
de sitios y páginas Web
Departamento de Comunicaciones
Ing. Agr. Marcelo H. Bosch
Marzo 2002

INTA - Manual de arquitectura de sitios y diseño de páginas Web
Ing. Marcelo H. Bosch Pág. -2-
Copyright
Se prohíbe la reproducción total o parcial sin permiso expreso del autor o del Instituto
Nacional de Tecnología Agropecuaria.

ANTES DE COMENZAR
Agradecimientos
El presente trabajo contiene el aporte de ideas, comentarios, sugerencias y
correciones de varias personas.
Marina Lopez Casoli, Estela María Varela y Silvia de Bellis cuyos agudos
ojos pulieron algunos de los muchos horrores ortográficos y de tipeo
cometidos durante largas jornadas de confección del documento.
Carlos Roig con su visión/utopía de Sistema Institucional de Información le
dio un marco más amplio al proyecto.
José Luis Vecchi a través de fuertes pero enriquecedoras discusiones sobre lo
que debe ser la Web.
A Colin Fraser y Sonia Restrepo, consultores internacionales en
comunicación, por sus comentarios específicos 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.
Aclaración
La intención del autor es la de resumir en pocas páginas la experiencia
acumulada internacionalmente y la investigación sobre desarrollos de sistemas
e interfaces de usuario desde las primeras aproximaciones, ya clásicas, en el
PARC de Xerox en California. No pretende establecer dogma sino más bien
fundamentar técnicamente 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 cómo encarar el desarrollo de un sitio web, más allá de las
herramientas, lenguajes y tecnologías, que por otra parte cambian o
desaparecen demasiado rápido, se habrá abierto entonces una senda de
racionalidad en el ejercicio de la profesión de diseñador 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 través de los mecanismos de interacción
electrónicos. Se habilitó un espacio para recibir críticas, sugerencias y aportes,
así como propuestas de temas y continuidad de este modesto aporte al trabajo
de muchos desarrolladores que contribuirán a la creación del sitio web del
INTA.
La plataforma de Internet esta en plena evolución y requerirá de los
profesionales una permanente actualización en el uso de las tecnologías más
apropiadas por lo que este trabajo puede considerarse como el primero de una
serie.
Póngase en contacto través de www.inta.gov.ar/manualweb/index.htm

Tabla de Contenido del Manual de estilo para publicación Web
Antes de comenzar................................................................................................................................ 3
Quienes deben leer esta guía................................................................................................................. 6
PARTE I: ASPECTOS CONCEPTUALES.................................................................................................. 7
Capítulo 1: La web.....................................................................................................................7
Qué es un sitio Web.............................................................................................................................. 7
Qué no es un sitio Web......................................................................................................................... 8
¿Para quién es un sitio Web?................................................................................................................ 8
Capitulo 2: La arquitectura de sitios web..............................................................................10
La visión y la misión .......................................................................................................................... 10
El análisis de requerimientos.............................................................................................................. 11
El anteproyecto................................................................................................................................... 11
La estructura ....................................................................................................................................... 11
La organización del espacio................................................................................................................ 12
El diseño de la entrada........................................................................................................................ 12
La planificación.................................................................................................................................. 13
Supervisión de obra ............................................................................................................................ 13
La terminación.................................................................................................................................... 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: Preparación del contenido...................................................................................18
Edición del texto de páginas............................................................................................................... 18
Los Textos Ocultos de una Página...................................................................................................... 29
Lecturabilidad..................................................................................................................................... 31
El contexto de la página...................................................................................................................... 34
Imágenes para la Web......................................................................................................................... 35
Multimedia: Sonido y Video para la Web ......................................................................................... 38
Capitulo 5: Diseño de páginas.................................................................................................42
Diseño independiente de los dispositivos de visualización ............................................................... 42
La utilización del espacio ................................................................................................................... 43
El Tiempo de descarga ....................................................................................................................... 44
Los hipervínculos ............................................................................................................................... 45
Marcos o Frames ................................................................................................................................ 49
La Impresión....................................................................................................................................... 50
Capítulo 6: La codificación......................................................................................................52
Codificación semantica....................................................................................................................... 52
Lenguaje HTML 4.0........................................................................................................................... 56
Una página al alcance de todos........................................................................................................... 57
Hojas de Estilo en Cascada (CSS)...................................................................................................... 62

Capitulo 7: Diseño de sitios .....................................................................................................68
Consideraciones generales.................................................................................................................. 68
Estructura de navegación.................................................................................................................... 69
Subsitios.............................................................................................................................................. 70
Funcionamiento del motor de búsqueda............................................................................................. 75
Bibliografía y referencias.........................................................................................................76
Apéndice I .................................................................................................................................78

INTRODUCCION
QUIENES DEBEN LEER ESTA GUÍA
Esta Guía, que surge como material de apoyo y
capacitación dentro del proyecto de desarrollo de Internet del
INTA, se divide en dos partes: la Parte I es de carácter conceptual
mientras que la parte II es de carácter técnico.
La Parte I puede ser leída por todos aquellos que tengan
interés en entender los conceptos de sitios web y la lógica que
debe guiar el trabajo de contenidistas y diseñadores. Cualquier
usuario de la web encontrará explicación a sus padecimientos en
la tarea de encontrar información 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 construcción de sitios y páginas: la
arquitectura y la usabilidad. Adquirir estos conceptos le
permitirá también convertirse en un usuario crítico 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 preparación de paginas y
sitios web del INTA ya sea para diseño o redacción de
contenidos. Las recomendaciones de esta Guía son de aplicación
universal y no una mera disposición burocrática y están basadas
en investigaciones y comprobaciones hechas por expertos de la
ingeniería de sistemas, ingeniería de usabilidad y por
recomendaciones del Web Consortium, organización
internacional de elaboración de estándares en Internet.
Los diseñadores y webmasters que incorporen a su
método de trabajo estas sanas prácticas, habrán dado un salto de
calidad en sus diseños, desarrollarán materiales reutilizables y
agregarán valor a los mismos. Los contenidistas que preparen
material para su publicación electrónica siguiendo las normas y
recomendaciones de este Manual, tendrán mayor probabilidad de
ser leídos por los usuarios, les brindarán contenido de mayor
calidad y una mejor experiencia web.
Por otra parte, los conceptos aquí desarrollados
perdurarán en el tiempo mucho después que las tecnologías
(lenguajes y herramientas) hayan quedado obsoletas y por lo
tanto es una buena inversión adquirir las disciplinas de diseño
que aquí se recomiendan.

PARTE I: ASPECTOS CONCEPTUALES
CAPÍTULO 1: LA WEB
QUÉ ES UN SITIO WEB
Un sitio web es un conjunto de páginas Web relacionadas a través
de una estructura de navegación, con el objetivo de hacer pública y
universalmente accesible una cierta cantidad de información. Para
alcanzar dicho objetivo, los sitios deben concebirse con un criterio
arquitectónico y construirse desde los cimientos, con una visión
sistémica y una lógica adecuada a su función específica.
Tom Berners Lee concibió la Web como una plataforma para
compartir documentos a través de redes. La unidad de información de
la web es un documento (archivo) llamado página Web que se aloja
en algún servidor web y puede ser localizada a través de su URL o
dirección desde cualquier computadora cliente, en cualquier ubicación
del mundo que posea acceso a Internet. Por ejemplo,
http://www.inta.gov.ar/informa.htm indica que el documento o página
informa.htm se localiza en el servidor de INTA (www.inta.gov.ar).
Para acceder a una página web se requiere de un programa o
cliente web que gestione la localización, recuperación, interpretación,
visualización, archivado e impresión eventual de la misma. Ese tipo de
programa se llama navegador Web, siendo los más 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, también 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 visualización de las páginas, generando un
problema de incompatibilidad dado que esas extensiones no son
reconocidas de manera universal.
Los programadores de páginas web deben preocuparse, desde
entonces, que sus diseños sean correctamente visibles en cualquiera de
los dos navegadores más utilizados del mercado en las versiones
actuales y anteriores, dado que el reemplazo es relativamente lento.
Nuestra recomendación es atenerse los estándares de Web
Consortium sobre el uso adecuado del lenguaje HTML lo cual
asegura la máxima compatibilidad. Asimismo recomendamos muy
fuertemente la utilización de hojas de estilo por razones que se indican
más adelante y hemos desarrollado una plantilla institucional de estilo
para dar consistencia a todas las páginas del sitio web de INTA.
Tom Berners
Lee concibió la
Web como una
plataforma
para compartir
documentos a
través de
redes.

QUÉ NO ES UN SITIO WEB
Aunque para muchos resulte obvio, un sitio web no es un libro así
como una página web no es una página impresa o un folleto. Esto que
parece fácil de entender no lo es tanto en la práctica diaria de
redacción de contenido para la web y menos todavía para el diseño
gráfico de las páginas. 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 económico para publicar
documentos cortos y con vínculos 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 también
las limitaciones que impone la edición de páginas web.
¿PARA QUIÉN ES UN SITIO WEB?
La respuesta aparentemente obvia sería: para la empresa o la
institución que lo desarrolla. Sin embargo la visión 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
construcción. 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 información, facilidad de acceso y velocidad.
Logrado eso es probable que “vuelva por más” 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 razón.
Lo que se intenta decir es que el sitio Web del INTA debe estar al
servicio de sus usuarios: productores rurales, estudiantes,
profesionales, funcionarios públicos, entidades vinculadas al sector
agroalimentario y público en general.
En el caso de la Intranet el cliente es interno: empleados, técnicos
e investigadores de la institución lo cual plantea un escenario diferente
y merecerá un análisis por separado. Las mejoras de usabilidad de la
Intranet se pueden cuantificar en términos económicos que justifican
ampliamente la inversión de recursos en su arquitectura y diseño.
Debe reflexionarse también acerca del comportamiento de los
usuarios ya que la comprensión del mismo debe guiar todas las
practicas de diseño. Mucha investigación sobre las “buenas practicas
de diseño web” se han elaborado tras largas sesiones de observación de
usuarios en laboratorios controlados y en estudios de campo en
empresas de tecnología. Otro tanto de lo que se sabe proviene de
Un sitio web
debe ser
concebido para
los usuarios y
visitantes
potenciales.

investigaciones realizadas desde los años setenta en laboratorios como
el PARC de Xerox sobre interfaz gráfica de usuarios (GUI) y muchas
de las recomendaciones de usabilidad se aplican también a la
interactividad en sitios web, aunque la arquitectura propia de la web
requiere atender otros aspectos.
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 más de mil millones de páginas, la ecuación es
muy sencilla:
página lenta = usuario molesto = visitante perdido
Por oposición decimos que el sitio Web no debe ser de los
webmasters, diseñadores, contenidistas o autoridades. La usabilidad de
los sitios dependen de factores técnicos y comportamientos humanos
que están más allá de los gustos personales, opiniones e intereses y la
optimización de Internet como medio puede lograrse subordinando el
diseño a la usabilidad, el arte a la ingeniería, la creatividad a la
funcionalidad y la estética a la eficiencia.
La buena noticia es que los métodos de la usabilidad son baratos y
no requieren aprendizajes complejos. Todo lo contrario: lo más
probable es que haya que “desaprender” y dejar de utilizar técnicas y
software sofisticado sin necesidad, solo por que rápidamente “hace
cosas maravillosas” pero que no respeta los estándares y tampoco
agrega valor al contenido.
Se debe desarrollar sentido crítico al navegar por la web para
discernir lo bueno de lo atractivo, sobre todo a la hora de copiar ideas.
Subordinar
el diseño a la
usabilidad, el
arte a la
ingeniería, la
creatividad a la
funcionalidad y
la estética a la
eficiencia.

CAPITULO 2: LA ARQUITECTURA DE
SITIOS WEB
Aunque no es objetivo de este manual desarrollar una teoría sobre
arquitectura de sitios web, lo que sí se pretende es transmitir los
conceptos básicos para poner de manifiesto la importancia que tiene en
la funcionalidad general del sitio. Para ello utilizaremos como
metáfora, la construcción de edificios, para comprender de qué se trata
y que importancia tiene disponer de una arquitectura. Veamos algunas
similitudes.
LA VISIÓN Y LA MISIÓN
Así como un edificio se construye con un objetivo y funciones
determinadas (residencia, centro comercial, hospital) los sitios se
construyen, o deberían hacerlo, con ciertos objetivos en mente:
comunicar, distribuir o comercializar información, 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 visión y la misión y
luego para quién se construye. Esa información orientará el resto del
proceso.
Existe una misión general asociada a la de la organización en su
conjunto y pueden coexistir misiones parciales y subordinadas para
cada subsitio. La misión del sitio web www.inta.gov.ar se ha propuesto
de la siguiente forma:
“Brindar al usuario un acceso rápido y simple a
la información que necesita y que le motive a
explorar el sitio para descubrir nuevas posibilidades
de servicios.
Difundir las actividades del Grupo INTA,
potenciando la función de transferencia, la creación
de servicios y la vinculación”.
La visión debería incluir no solo la descripción de lo que se desea
alcanzar sino una ubicación temporal. Por ejemplo:
“Constituirse en la fuente de información
agropecuaria de mayor calidad para productores,
estudiantes, profesionales, técnicos y funcionarios.
Alcanzar 10.000 páginas de contenido y registrar

3000 visitas diarias al sitio para fines del año
2002”.
La visión y la misión del sitio o subsitio debería elaborarse en
forma consensuada y alineada con la misión y visión organizacional.
EL ANÁLISIS DE REQUERIMIENTOS
Ya se sabe para qué será el edificio, pero ¿qué tamaño tendrá?
¿Cuántos 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 diseñar un sitio web se deben relevar las necesidades de
la organización: cantidad y tipo de contenido a publicar, servicios que
se pretende ofrecer: acceso a bases de datos, comercio electrónico,
foros de discusión, web mail, etc. Sobre la base de dichos
requerimientos se puede planificar y presupuestar no solo la
construcción 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 diseñadores 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
rápidamente 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
organización lógica de la información y el incremento vigoroso que
seguramente sufrirá en los próximos años.
Antes de diseñar la página de inicio (home page) deberá disponerse
del diagrama lógico de la estructura de información, así como el diseño
de directorios que almacenarán las diferentes partes del sitio y como se
van a agregar en el futuro.
Se debe
relevar las
necesidades
de la
organización.

Pantalla de Microsoft Front Page en vista Exploración
Este nivel de decisiones es de máxima importancia dado que su
modificación durante las etapas posteriores puede ser muy costosa.
Merece entonces una adecuada atención.
LA ORGANIZACIÓN DEL ESPACIO
Los arquitectos deben organizar el espacio disponible y disponer
las habitaciones y salones de manera de hacer que el conjunto sea lo
más funcional posible.
Los diseñadores de sitios también deben organizar el espacio de
información (hiperespacio) y para ello deben pensar como organizar la
información de manera tal que los usuarios puedan encontrarla y usarla
fácilmente (baja carga cognitiva), rápida y eficientemente (pocos
clics).
La posibilidad de relacionar páginas mediante vínculos confiere
mayor libertad en el diseño del acceso a la información, pero esta
nunca debe sustituir una buena arquitectura de base.
EL DISEÑO DE LA ENTRADA
Los arquitectos dedican significativo esfuerzo al diseño del frente y
la entrada de un edificio y no es casual. El aspecto visual (sobrio,
elegante, recargado, informal o académico), el acceso al interior
(escaleras, ascensores, puertas) y la señalización adecuada influyen
directamente en la forma en que las personas ingresan y circulan por el
edificio, en la percepción de calidad y en su experiencia general.
Los
diseñadores de
sitios deben
organizar el
espacio de
información.

Los visitantes a un sitio también ingresan, navegan tratando de
obtener aquello por lo que ingresaron y se retiran con una sensación
(grado de satisfacción) que estará en función del diseño de la página
principal y los instrumentos de navegación disponibles. Los diseños
cargados, inconsistentes y complejos dan una impresión poco
profesional y no reflejan el esfuerzo e inversión que se realiza en
imagen institucional.
LA PLANIFICACIÓN
Una vez consensuada y pulida la propuesta original y reunido el
contenido general a organizar, el arquitecto debe planificar el proceso
de producción, para asegurarse que dispone de los recursos necesarios;
elaborar el cronograma de desarrollo y coordinar a los diferentes
especialistas que participen de los procesos.
SUPERVISIÓN DE OBRA
Durante la ejecución aparecen cantidad de problemas que obligan a
tomar decisiones que no fueron previstas durante la etapa de diseño.
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 alineación con los objetivos de la organización y
que mantenga la orientación al usuario.
LA TERMINACIÓN
El “terminado” de un edificio lleva mucho tiempo y recursos,
pintores, albañiles, plomeros, electricistas, carpinteros y decoradores
trabajan duro para el día de la inauguración.
En los sitios web esta etapa es la de diseño, que la hemos dejado
para el final por que debe estar subordinada a la estructura. Muchos
diseñadores de sitios web comienzan su trabajo creando la página
principal con alguna herramienta de diseño. Lo que hemos tratado de
transmitir es que debe pensarse el sitio como un todo, como un sistema
de relaciones entre páginas web y no como un diseño 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 verán más
adelante.
La terminación es una etapa que requiere de paciencia y prolijidad
para cuidar esos detalles que “hacen la diferencia” entre páginas.

CAPITULO 3: LA USABILIDAD DE SITIOS
WEB
¿QUÉ ES LA USABILIDAD?
El diseño visual de las páginas de un sitio es su parte visible y
donde los diseñadores se lucen con su trabajo. En sus curriculum
enumeran los sitios diseñados y guardan copias de sus diseños para
mostrarlos orgullosamente. Sin embargo nadie escucha decir “he
diseñado una pagina sumamente usable”. Se descuenta que la página
se podrá usar sin problemas. ¡Que alejado de la realidad!
Los sitios y páginas difieren en su usabilidad, podemos encontrar
desde aquellos que no presentan ningún inconveniente al usuario para
obtener lo que busca hasta aquellos donde encontrar cierta información
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 significación económica para
las organizaciones. Las “pruebas de usabilidad” cuantifican dichas
variables y brindan información certera sobre la calidad de la
arquitectura de un sitio.
Todos podemos ponernos de acuerdo en que los sitios web deben
ser fáciles de usar, pero llevar este criterio a la práctica requiere un
cambio de enfoque y de disciplina de trabajo más que importante.
Usabilidad y arquitectura están relacionadas íntimamente: sin una
buena arquitectura no se dispone de accesos a la información simples y
ágiles; con diseños de página poco usables una buena arquitectura
queda desperdiciada.
El enfoque sistémico de construcción de sitios es el único que
puede asegurar que los mismos funcionen adecuadamente y sean
capaces de crecer sin procesos de reestructuración costosos.
ASPECTOS DE LA USABILIDAD
La usabilidad es más que una expresión 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 metodologías para evaluar el comportamiento de los
usuarios ante un determinado diseño y una serie de tareas específicas.
También se evalúa el grado de satisfacción 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
navegación. La observación y la opinión de los usuarios completan la
información que servirá para determinar la necesidad de rediseño a
distinto nivel.
El enfoque
sistémico de
construcción de
sitios es el único
que puede
asegurar que los
mismos
funcionen
adecuadamente.

Si las pruebas de usabilidad se efectúan durante el desarrollo, el
proyecto tendrá mayor sustento técnico y posibilidad de éxito.
Las pruebas sobre sitios ya implantados brindan buenas pistas para
enfocar el trabajo de
rediseño.
Si bien un sitio web
es un “sistema” y como
tal sus componentes
están 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
páginas y los sitios enteros. Obsérvese que el contenido (información
fuente) se vuelca en una página (elemento) que a su vez integra un
sitio (sistema) que es parte de Internet (red).
CONTENIDO PARA LA WEB
Ya dijimos que una página web no es una página 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 informáticos
también diferentes.
Todo ello debe ser suficiente para entender el desafío que significa
redactar contenidos para la web y en esta sección iremos dando pautas
y técnicas 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 comunicación.
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 demás indicadores.
Las páginas web con su capacidad multimedia despiertan la
imaginación de todos aquellos que ven en este medio una posibilidad
de comunicar mensajes de múltiples maneras. Analizaremos primero el
texto, las imágenes y otros componentes multimedia, siendo este el
orden de importancia, según iremos descubriendo.
TEXTOS PARA LA WEB
La práctica 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
Es el contenido
lo que los
usuarios buscan
primero.

competencias necesarias para generar contenido de calidad, uno de
los tres pilares del éxito.
La justificación económica 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 también 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 desempeñada por
periodistas y comunicadores que se interioricen sobre los nuevos
requerimientos de dicho medio pero también por los contenidistas
originales: profesionales técnicos, 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 páginas y lucharemos por todos los medios para reducirlos, pero
también tenemos que cuidar el tiempo del usuario orientándolo
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 vínculo para darse cuenta que no es de su
interés. En ambos casos, perdió su tiempo lo que equivale a dinero.
Para concebir un estilo de escritura para páginas 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 según 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 viñetas
o numeradas y texto enfatizado.
A los usuarios no les gusta desplazarse verticalmente por páginas
muy extensas, salvo que el material sea de gran valor y lo más
probable en ese caso es que lo imprima. El desplazamiento horizontal
es aún más odiado por los usuarios con justa razón y por ello deben
evitarse a toda costa los diseños que no se ajusten al ancho de pantalla.
Se ha comprobado también que la retención de lo leído en pantalla
es menor que lo leído en papel, por lo que conviene realizar una
cuidadosa planificación del hipertexto al convertir material impreso
para la web. Resulta obvio que no es efectivo simplemente copiar
dicho material para elaborar páginas web, sin embargo es demasiado
frecuente esta práctica.
Los usuarios
ojean el texto
en vez de
leerlo por
completo.
El estilo de
escritura para
páginas web debe
considerar el
comportamiento
del usuario y el
medio.

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 también es importante
como se dice y el cómo, esta ligado al medio y al uso que el receptor
hace del medio.
La lectura en pantalla es un 25% más lenta que en papel
fundamentalmente porque la calidad de los monitores es aún baja y
aunque se esperan mejoras en los próximos años, la tasa de reemplazo
de monitores es lenta. Los propietarios de PC son más proclives a
cambiar componentes internos (discos rígidos, memoria o procesador)
y dispositivos periféricos como impresoras o scanners, pero un cambio
de monitor en general es un recurso extremo, aunque es fácil mostrar
la influencia del monitor en la mejora de productividad en ciertos
trabajos informáticos.
Existe un cierto hábito de “zapping” que lleva al usuario a no
detenerse demasiado en una página y pasar rápidamente a otras. El
costo de conexión alienta esta conducta de hojear muchas páginas 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 deberíamos escribir páginas que sean: ojeables, breves,
concisas y claras, temas que trataremos en el capítulo siguiente.
La lectura en
pantalla es un
25% más lenta
que en el
papel.

PARTE II: ASPECTOS TECNICOS
CAPITULO 4: PREPARACIÓN DEL
CONTENIDO
EDICIÓN DEL TEXTO DE PÁGINAS
La lectura de largos textos impresos (novelas, monografías o
trabajos de investigación) es secuencial y su escritura desarrolla un
proceso lógico 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 información desde múltiples lugares y recorrerla de
infinitas maneras a través de los vínculos vínculos y por lo tanto
necesita “ubicarse” en dicha estructura sea cual fuera la forma en que
la abordó.
La percepción de dicha estructura y el diseño de las páginas
ojeables, breves, concisas y claras permitirá una rápida navegación y
asimilación del contenido útil por parte del usuario.
Páginas ojeables
Piense en aspectos de redacción y diseño que faciliten el
desplazamiento rápido de la vista por la página y la retención de los
conceptos clave. Algunas recomendaciones:
• Organice el texto con dos o tres niveles de titulares (según
la complejidad y extensión).
• Use listas numeradas o viñetas 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 información que no sea
central
• Separe los párrafos
En la página de Cnet (ver imagen) la columna editorial Web Shui
muestra un titular (H1) “Working the guide...” y más abajo un titular
de segundo nivel (H2) “Reviewing the research ...”.
Los párrafos son relativamente cortos, separados entre sí y se usan
hipervínculos a otros artículos de la columna.
Aunque la página es larga es posible una hojeada rápida de la
misma por los titulares y vínculos.
La estructura
y el diseño de
las páginas
claras permitirá
una rápida
navegación y
asimilación del
contenido útil
por parte del
usuario.

Encabezado (<H1>)
Vínculos a otras
secciones
Separación de párrafos
Sub encabezado (<H2>)

Páginas breves
Las páginas de navegación no deben exigir desplazamiento (scroll)
y los vínculos deben ser visibles aun en monitores pequeños.
Mirabilis en la Home Page the ICQ es un buen exponente de la
filosofía “póngalo todo aquí”: más de cien opciones en una página
principal que requiere varios desplazamientos hacia abajo para
abarcarla por completo y que confunden hasta a los más avezados.
Intente encontrar una opción allí: parece el “juego de los errores”.

No es recomendable superar las diez opciones por página de
navegación (páginas que llevan al contenido) y para ello debe
organizar el contenido en categorías jerárquicas.
Las páginas de contenido son por norma más largas y el usuario es
más tolerante en cuanto al desplazamiento, pero se debe balancear
contenido y diseño siguiendo estas recomendaciones.
Fraccione el texto en unidades lógicas de información y cree vínculos entre
ellas
• Si es necesario cree un índice de contenido que facilite la
navegación del conjunto
• Identifique fragmentos poco relevantes y sepárelos del
texto central
• En ocasiones deberá redactar de nuevo el cuerpo del texto
en forma resumida con vínculos al resto de los fragmentos.
• Utilice un esquema de pirámide invertida de manera que lo
más importante quede en la parte superior de la página y
luego agregue profundidad.
Páginas concisas e ideas precisas
En la web se da aquello de “escribir menos para comunicar más”
que no es otra cosa que evitar el exceso de retórica. La paciencia del
usuario no lo permite según se comprueba en los tiempos promedios
de permanencia en las páginas.
Algunas recomendaciones:
• Use una idea por párrafo y no incluya demasiada
información ya que muchos lectores no pasan de la primera
frase.
• Utilice un estilo informal, salvo cuando lo hace para
audiencias especiales (académicas, por ejemplo). Le
ayudará a evitar retórica innecesaria.
• En el intento de ser conciso no pierda precisión ya que
puede afectar la credibilidad de la información. El arte
consiste en balancear tamaño y calidad.
Además Las páginas breves y concisas se descargan rápidamente.
Las páginas
breves y
concisas se
descargan
rápidamente.

Lenguaje claro
Haga todo lo posible para que las páginas sean comprensibles por
el espectro más 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 opinión experta.
• Evite lenguaje o jerga excesivamente técnica a no ser que
este seguro que se dirige a una audiencia específica que lo
soporta.
• Evite los modismos locales del lenguaje dado que el sitio es
visitado desde muchos países y no solo de habla hispana.
Los usuarios de otros países pueden malinterpretar las
expresiones.
• Evite el lenguaje irónico por la misma razón, es difícil de
interpretar.
• Evite la jerga “marketinera” o de “vendedor de colectivo”
pues le quita seriedad y es rechazada por los usuarios.
Consejo: después de redactar la página, pruébela. Haga que la lea
otra persona que pueda darle su opinión sincera. Lo ideal es la
corrección editorial, pero si no dispone de editor hágalo con un
amigo.
Otros textos importantes: titulos y titulares
Aquí haremos una aclaración semántica: en este Manual de estilo,
cuando hablamos de títulos de página nos referimos a la etiqueta
(<title>) que se inserta en el código HTML de la página para que la
barra de título 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 también son llamados títulos y subtítulos, por eso la
aclaración.
Aunque subestimados por muchos diseñadores, estos son los
aspectos más importantes de la interfaz humana en páginas web
así como en publicaciones impresas según se sabe desde las

investigaciones clásicas de Xerox (Xerox Publications Standards
Manual).
Merece que tanto diseñadores como contenidistas le presten
atención a su redacción.
Títulos de página
Los títulos de las páginas son importantes por varias razones:
1. Aparecen en la barra de título del navegador , orientan al
usuario sobre su ubicación en el espacio de información y
sugieren el tema de la página.
2. Aparece como nombre en los botones Atrás 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 búsqueda presentan los resultados de
consultas como una lista de títulos de las páginas
encontradas. La información del título se constituye en el
principal elemento de decisión del usuario para explorar
los resultados.
6. Algunos algoritmos de los motores de búsqueda analizan
si la palabra clave buscada está en el título de la página y
otorgan puntaje a dichas páginas para mejorar la posición
en el ranking de resultados.
Inconvenientes por mal uso o inexistencia de títulos:
1. De no colocarse un título, el navegador lo reemplaza por el
nombre del archivo de la página, lo cual es mucho más
difícil de recordar.
2. Pierden utilidad los accesos directos en favoritos e historial
3. Pierden utilidad los vínculos de las páginas de resultado de
los motores de búsqueda.
4. La página pierde posiciones en el ranking de resultados de
búsqueda.
Recomendaciones para los títulos de página:
• Use el nombre de la organización en los títulos de todas las
páginas.
• Complete el título con el tema principal de la página
pensando que debe tener sentido por si mismo cuando se
lea fuera de contexto (como favorito por ejemplo).
• Deben ser diferentes para cada página de lo contrario se
confunden los accesos directos mencionados.
• Utilice 40 a 60 caracteres y elimine los artículos
No descuide
el título de las
páginas.

• Evite palabras sin sentido y elija en cambio unas pocas
palabras; ponga las más importantes a la izquierda.
En la pantalla de arriba se observa el inconveniente tratado al
hablar de “marcos”: a pesar de estar en una página interior (Cursos
etc.) el título nos indica la Pagina principal.
Al agendar en favoritos aparecerá dicho título y cualquier
otra página que se intente agendar sobrescribirá el favorito anterior.
Queda desactivada así una función importantísima del navegador
que es registrar la ubicación de páginas en el universo web (cientos
de millones de documentos).
En la pantalla de arriba se observa una página interior (investigación) que
lleva su título inequívoco y como aparece en la lista de Favoritos de la
izquierda del navegador.

A continuación se presenta una serie de títulos de páginas, el grado
de adecuación y mejores alternativas para que el lector haga el
ejercicio de repensar los títulos de las páginas que publique.
Ejemplos de títulos Comentario
Bienvenido a nuestra Home Page Pobre
Bienvenido al INTA Mejor
Bienvenido a la página principal del INTA Mejor
INTA Incompleto
INTA Instituto Nacional de Tecnología
Agropecuaria
Correcto para la
pág. Principal
INTA Boletín Informativo Jun 2001 Correcto para
páginas
interiores
INTA - Instituto de Clima y Agua Correcto para la
pág. Principal
INTA - Clima y Agua - Informe
metereológico 10 Mar 2001
Correcto para
páginas
interiores
INTA Estación Experimental Balcarce Correcto para la
pág. Principal
INTA Balcarce - Curso Manejo de Lanares Correcto para
páginas
interiores
http://www.inta.gov.ar/cr/balcarce/lana.htm Título
inexistente
El Programa Prohuerta del INTA Desplazar
INTA a la
izquierda
INTA - Programa Prohuerta Correcto para la
pág. Principal
INTA - Programa Prohuerta - Memoria 2000 Correcto para
páginas
interiores
Titulares de página
Ya aclaramos que los titulares de una página 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 página se traduce a un titular
de primer nivel (H1). El contenido de la página puede estar subdivido
en temas cuyos encabezados serán de segundo nivel (H2) y estos a su
vez podrían 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 categorías jerárquicas (tema,
Tómese un
tiempo para
organizar el
texto.

subtema etc.). Si el texto a publicar no se halla estructurado tómese un
tiempo para hacerlo y verá que le resulta más fácil planificar el
hipertexto. Para ello separe el texto en fragmentos lógicos y agrégueles
un titular significativo.
En la pantalla siguiente se observa un artículo sobre enfermedades
de maíz.
Si bien existe una estructura del texto no se ha evidenciado a través
de etiquetas HTML apropiadas las jerarquías del texto:
<H1> Enfermedades del Maíz
<H2> Vuelco por pudrición de la raíz y el tallo
<H3> Importancia
Una vez asignadas las etiquetas la página toma el aspecto de la
pantalla siguiente.

Allí queda clara la importancia jerárquica de los distintos
componentes de texto. En una etapa posterior al enlazar la página con
la hoja de estilo (CSS) correspondiente los titulares pueden
visualizarse con otros formatos (fuente, color, etc.) que tornen la
página más atractiva.
Otro ejemplo puede verse en el artículo de la National Geographic
con un titular (H1) bien destacado que atrapa la atención del lector
inmediatamente y le da una idea clara sobre el tema tratado.

En el ejemplo siguiente un artículo técnico sobre cría bovina no se
adapta a la lectura en pantalla por varios motivos:
• Texto excesivamente largo (para la pantalla)
• Falta de estructuración del contenido (sin titulares y sub-
titulares)
• Párrafos largos
Todo lo anterior dificulta el hojeado del documento obligando al
usuario a desplazarse a través de varias pantallas.
El titular de la página: “Algunas consideraciones básicas...” no
sugiere el tema del artículo, solo lo ubica temáticamente: manejo
nutricional de vientres, pero no avanza sobre lo específico (restricción
nutricional), el ensayo ni sobre las conclusiones. El usuario del sitio no
puede decidir de antemano si le interesa la página y debe descargarla
obligadamente.
Es preferible anticiparle al usuario algo más sobre lo que puede
encontrar si sigue leyendo y en un recorrido rápido hacerle conocer
los items principales.
Un mejor titular podría haber sido:
“Restricción nutricional de vacas al destete: una alternativa de
manejo”, lo cual acerca más al contenido del artículo.

Debería cambiarse también el rótulo (ancla) de acceso al artículo
en la página correspondiente. En la imagen siguiente se observa la lista
de artículos, en dicha página se podría agregar además del rótulo un
breve comentario sobre cada artículo listado que oriente aún más al
lector.
Es decir que rótulos y titulares deben pensarse para lograr que el
usuario no tenga dudas sobre el contenido del artículo en cuestión y así
pueda decidir si es de su interés.
LOS TEXTOS OCULTOS DE UNA PÁGINA
El lenguaje HTML incluye una serie de marcadores o etiquetas
que permiten incluir en la página ciertos datos sobre si misma, es decir
datos sobre los datos o información que contiene la página o lo que en
la jerga informática se llama “metadatos”. Por eso a estas etiquetas
especiales se las conoce en inglés como “metatags” o “etiquetas
meta”.
La información de las etiquetas meta no es visualizada por el
navegador sino que permanece “oculta” en el código HTML al que
puede accederse a través del menú Ver/Código Fuente del Explorer.
Por eso pasa desapercibida para la mayoría de los usuarios y muchos
programadores web las ignoran, seguramente debido al hecho que no
añaden valor a sus diseños 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 página, entendiendo como tal la facilidad con que
puede ser localizarla desde los buscadores, ya sea el del propio sitio o
El principal
motivo para
dedicarles
tiempo y
esfuerzo es la
accesibilidad
de la página.

cualquier otro motor externo. La calidad de la información obtenida
por un motor de búsqueda no solo depende de su programación interna
sino también de los datos que se “le brinden” sobre el contenido de las
páginas, datos con los que construirá sus bases de datos. Si las páginas
poco informan sobre su contenido, el motor no puede hacer mucho
para asignar relevancia a dichas páginas durante un proceso de
búsqueda basado en palabras clave.
Además de ser encontrada, la página debiera quedar bien
posicionada en el orden de los resultados de la búsqueda. De poco vale
que la página quede ubicada en posición 189 pues los usuarios no
revisan más que un número relativamente bajo de resultados.
Los motores usan diferentes técnicas 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
página entre las etiquetas correspondientes (<HEAD> y </HEAD>).
A continuación daremos un ejemplo de las etiquetas que se
deberían incluir en una página de contenido con información técnica
agronómica.
<META name="description" content="descripcion de la
página aquí">
<META name="keywords" content="palabra clave 1,palabra
2,palabra3">
<META name="author" content="Nombre del autor">
Por ejemplo una página con un documento técnico podría 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 técnico sobre
el comportamiento de cultivares de Cebadilla Criolla en
ensayos de fertilización NPK">
<META name="keywords" content="Cebadilla Criolla,
pastura, forrajeras, fertilizante, fertilización, Nitrógeno,
Fósforo, Potasio, dosis, rendimiento, materia seca, variedad,
variedades, foliar">
<meta name="author" content="Juan Martín Zubillaga">
<title>INTA - Pergamino – Novedades en pasturas</title>
Las páginas
deben quedar
bien
posicionadas
en un ranking
de resultado de
búsqueda de
un motor.

Observe el mismo texto fraccionado, sangrado, con
separación de párrafos y enfatizado de palabras que
atraen la atención. La tipografía utilizada (Verdana)
también es más apropiada para la lectura en pantalla.
Durante los dos meses de trabajo destinados
a esta etapa del proyecto, se trabajó con células
somáticas de diferentes individuos y con diferentes
características de interés tanto zootécnico como
biomédico.
En las trece sesiones de clonado que se
llevaron a cabo durante ese período, se pusieron a
fusionar un total de 819 óvulos con células
somáticas.
El éxito de la fusión fue muy alto puesto que
se observó un 91.7% de fusiones. La etapa
siguiente en la evaluación del proceso, fue la de
óvulos fusionados que comenzaron la división. Es
así que se observó que el 54% de estos óvulos eran
embriones que habían comenzado la división celular
entre las 24 y 36 hs después de ser activados.
Posteriormente, estos embriones de dos
células debían seguir creciendo durante 6 días para
llegar al estadio en que podían ser transferidos a las
vacas receptoras. En esta etapa es en general
donde se producen las mayores pérdidas ya que
es muy difícil 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 días después de la
fusión se observó que un 41% de los embriones que
habían comenzado la división alcanzaban el estadio
deseado (llamados mórula y blastocisto) lo cual
significa que un 22% de los óvulos fusionados
habían 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 técnica desde hace varios
años.
• Se utilizan palabras muy largas. Trate de encontrar
sinónimos que simplifiquen y acorten el texto.

• 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...
• Se utiliza todo en mayúscula
• No se alinea el texto a la izquierda
QUE SIENTE CUANDO TIENE QUE LEER UN
TEXTO COMO ESTE.
SI PRESTA ATENCIÓN DESCUBRIRA QUE
LECTURA EN MAYÚSCULA ES MAS LENTA
(UN 10 %) Y CANSADORA. EN EL CORREO
ELECTRÓNICO, POR EJEMPLO, SE CONSIDERA
UNA DESCORTESÍA QUE VA CONTRA LAS
REGLAS DE NETIQUETTE. ADEMÁS LA
ALINEACIÓN CENTRADA INTERFIERE CON EL
MOVIMIENTO NATURAL DE LA VISTA A LA
IZQUIERDA CADA VEZ QUE TERMINA UNA
LINEA.
En las páginas web además se debe cuidar el tamaño de la fuente,
ya que los tamaños muy pequeños se visualizan mal en pantalla y
en ese caso es preferible usar fuentes sans-serif.
Como norma pruebe sus diseños en todas las resoluciones
probables de monitor y utilice tamaños de fuente porcentuales para
dejar la posibilidad abierta al usuario de cambiar el tamaño de texto en
el navegador.
Como norma
pruebe sus
diseños en
todas las
resoluciones
probables de
monitor.

EL CONTEXTO DE LA PÁGINA
En ocasiones se accede a una página en particular desde un motor
de búsqueda, por lo tanto se desconoce la ubicación de la misma en la
jerarquía de contenidos, salvo que se ofrezca la información de
contexto en dicha página. Veamos un ejemplo.
La pantalla de arriba muestra una parte de los resultados de una
búsqueda por la palabra clave “trigo”. El 7º resultado indica
“Adelantos Producción Vegetal” que surge del título (title) de la
página.
Si observamos la página en cuestión en la imagen siguiente,
notamos la falta de contexto: no sabemos a que unidad, proyecto,
publicación o autor pertenece; no se indica la fecha del documento (de
máxima importancia en documentos técnicos) ni como contactarse
para obtener más información. Al no existir vínculos a la estructura, el
usuario tampoco tiene forma de navegar por información relacionada.
Se debe entonces prestar atención al contexto de todas las
páginas, dando toda la información relacionada que transforme simples
datos en información útil. La inclusión de la barra de navegación en la
parte superior de las páginas de INTA apunta al mismo concepto.
Preste
atención al
contexto de la
página.

IMÁGENES PARA LA WEB
Cuando usar imágenes
Las imágenes 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 páginas comerciales se precisan las fotografías de los
productos para que se los identifique correctamente y por su efecto
“vendedor”.
En documentos técnicos, académicos o educativos suele ser
necesario acompañar un relato con imágenes que demuestren lo que se
afirma de manera contundente o que clarifiquen conceptos demasiado
abstractos.
En otros casos, las imágenes tienen un sentido estético y
decorativo.
Pero en muchos casos las imágenes que se encuentran en páginas
Web no tienen ninguno de los dos sentidos mencionados y se incluyen
simplemente por que “hay espacio” y este no se cobra. Sin embargo,

no es del todo gratis pues el costo de descarga e impresión lo absorbe
el usuario.
Las imágenes que no cumplen una función significativa en la
página deben eliminarse por tres razones:
1. Incrementan el tiempo de descarga de la página.
2. Distraen la atención.
3. Interfieren con el mensaje.
Antes de incluir una imagen en la página pregúntese: para qué,
después de incluir la imagen en la página pregúntese: ¿agregó valor?
Los usuarios desean ver fotografías sobre temas específicos e
incluso están dispuestos a soportar los prolongados tiempos de
descargas de grandes fotos de calidad si son de su interés, por eso
deben evitarse las imágenes en las páginas de navegación (alto nivel en
la jerarquía) dado que en ese momento aún no ha seleccionado un tema
concreto. En esta etapa de su recorrido la velocidad es la máxima
prioridad. Una vez que se encuentra en páginas de contenido (por
ejemplo, un artículo sobre enfermedades del trigo) las imágenes
agregan valor al documento. Pero mantenga un ojo en el
cronómetro!
Escalado de imágenes
Una forma de superar la tensión que siempre existe entre el
tamaño total de la página (en bytes) y la necesidad de incluir
fotografías es utilizar miniaturas enlazadas a las imágenes a tamaño
completo. Esta técnica tiene la ventaja de no demorar el conjunto de la
página al mismo tiempo que se enriquece visualmente. Por otra parte el
detalle de las fotografías se conserva para quien realmente este
interesado en verla.
Las tres técnicas para crear miniaturas de fotos son: el recorte, la
reducción de resolución y la compresión. Las tres técnicas pueden
combinarse para obtener una miniatura que sea de tamaño mínimo
conservando sentido.
Si recorta una fotografía de 70 Kb, obteniendo una porción de
32% del original, y luego reduce el tamaño al 32% obtendrá una
fotografía del 10% del tamaño original o sea de 7Kb.
El formato jpg admite diferentes grados de compresión. Ud.
puede ensayar diferentes valores de compresión al guardar el archivo
de la miniatura observando la calidad obtenida.
Las siguientes imágenes ilustran las posibilidades mencionadas y
los tamaños de archivos obtenidos.
Deben
evitarse las
imágenes en
las páginas de
navegación.

La imagen
original
178 Kb
Recorte
25Kb
Recorte y
reducción
de tamaño
8.6 Kb
Idem
comprimida
6 Kb

El récord
Un mal ejemplo que bien podría aparecer en el libro de récords
de Guinnes es la página http://www.doangroup.com/specials.htm
que presenta un imagen escaneada del periódico 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 diseñadores y
contenidistas por igual pero también
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 inclusión de música corre el riesgo de disgustar.
Pero fundamentalmente su utilización debe cumplir una función
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

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 páginas excesivamente lentas que desalentarán su
uso.
Animaciones
El movimiento, es sabido, atrae la atención y los diseños de página
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 página
se coloca la
imagen
animada de
un sobre
para
representar
un vínculo
de correo electrónico, la visión periférica distraerá los ojos del lector
del texto principal (lo realmente importante) hacia un elemento
secundario.
Obsérvese esta pantalla:
Nótese que el buzón (animado) no agrega ningún mensaje al
vínculo de e-mail a su derecha y consume el valioso espacio superior
de la pantalla. Tal vínculo debería estar en la parte inferior de la
pantalla incrustado en un texto que explique que información se puede
solicitar a esa dirección.
Hay diferentes tecnologías disponibles para mover texto o
imágenes desde las más sencillas como los Gif animados hasta los
archivos de Shockwave o Flash de Macromedia pasando por applets de
Java.
La elección de una u otra debe obedecer a los criterios de :
1. Compatibilidad con los navegadores
2. Necesidad de utilización de plug-ins
3. Tamaño de los archivos generados
4. Posibilidad de errores de código

5. Capacidad para lograr los efectos deseados
¿Cuándo conviene usar animaciones?
1. Para mostrar la sucesión de diferentes estados, por ejemplo:
el desplazamiento de los continentes o las fases de división
celular.
2. Clarificar el significado de íconos que puedan ser mal
interpretados.
3. Para comunicar más mensajes en la misma zona de la
pantalla, por ejemplo, mapas de imágenes que cambien al
pasar el puntero por cada área.
4. Mejorar la interpretación de estructuras tridimensionales.
5. Atraer la atención hacia un elemento en particular, por
ejemplo novedades. En este caso se deben evitar las
animaciones continuas, más bien programar uno o dos
bucles y después detenerla.
Valen también las consideraciones hechas sobre el uso de
imágenes en el apartado “Cuando usar imágenes”.
Sonido
El audio proporciona una dimensión adicional al uso de la pantalla.
Puede utilizarse para agregar comentarios, complementar la interfaz de
usuario, reproducir música o sonidos.
El sonido de calidad mejora la experiencia del usuario por lo que,
tomada la decisión de incorporarlo, vale la pena dedicar esfuerzo en su
preparación o consultar un profesional que balancee la calidad con el
tamaño del archivo y elija el codificador adecuado.
Recomendaciones:
• No utilice sonidos como fondo de página salvo que tenga
un sentido particular y en páginas de contenido.
• De usar sonidos de fondo, indique uno o dos bucles de
reproducción, en vez de ejecución continua.
• Si utiliza descarga de archivos, indique el tiempo de
descarga aproximado y el reproductor de audio necesario.
• En el rótulo de descarga, indique claramente de que se trata
el sonido.

Video
Si bien la utilización de video tiene muchas ventajas desde
comerciales hasta educativas su incorporación a la web esta limitada
actualmente en nuestro país 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 producción de videos digitales es una especialidad y se debería
consultar a un profesional con experiencia en el tema antes de
embarcarse en alguna iniciativa de este tipo.
No es recomendable agregar fragmentos de video de más de un
minuto de duración, superado ese tiempo debería subdividirse el
mismo.
Si esta pensando en usar masivamente video, por ejemplo en
actividades de formación, evalué la edición de un CD Rom que
contenga el video digitalizado y que complemente los contenidos Web.
Al igual que en el apartado anterior en el rótulo de descarga de
archivos de video indique claramente de qué se trata el fragmento y si
es posible incorpore una pequeña fotografía de alguna escena del
mismo.
La evolución de las tecnologías de compresión, de streamimg,
servidores más potentes y mayor ancho de banda irán mejorando las
posibilidades de utilización de video on-line.
Puede
complementar
sus diseños
web editando
Cds con
contenido
multimedia.

CAPITULO 5: DISEÑO DE PÁGINAS
DISEÑO INDEPENDIENTE DE LOS DISPOSITIVOS DE
VISUALIZACIÓN
Una página web puede ser visualizada a través de un navegador en
dispositivos tan variados como monitores de 14” o 21”, pequeñas
computadoras de mano (Palm PC) y hasta en pantallas de teléfonos
celulares.
La cantidad de pixeles que
dispone un usuario para
visualizar una página varía
además en función de la
resolución de su pantalla con
valores tan dispersos como
1280 x 1024 en monitores
grandes hasta 180 x 320 en
algunas Palm.
Por otra parte, el usuario
puede controlar el tamaño de
visualización del texto
alterando la cantidad y
disposición del los elementos
de la página.
Los tamaños fijos de
fuentes y tablas ocasionan
problemas de visualización y
de impresión. El desafío,
entonces, es lograr páginas que
se vean bien en diferentes contextos.
SI Crear diseños adaptables a diferentes tamaños de pantalla..
NO Diseños para una determinada configuración de monitor. Ej:
800 x 600
Recomendaciones:
• Utilizar tamaños de fuente variables: porcentual o em.
• Utilizar tamaño de tablas porcentuales.
• Testear los diseños en diferentes pantallas y con distintos
tamaños de fuentes.
• Probar la impresión.
Los tamaños
fijos de fuente
ocasionan
problemas.

LA UTILIZACIÓN DEL ESPACIO
Los usuarios acceden a páginas web para obtener información
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 navegación debe mantenerse por
debajo del 20 % del espacio.
• El uso de gráficos debe limitarse y evitar aquellos que
comunican poco y ocupan mucho.
• Los espacios en blanco pueden usarse para agrupar el
contenido y evitar los diseños muy compactos y con
demasiadas opciones.
Observe la distribución del espacio en esta página y calcule el %
destinado a contenido (sombreada en celeste y punteada en rojo).
Fíjese también el exceso de elementos de navegación: marco
izquierdo y barra superior en forma de botones excesivamente
grandes.

EL TIEMPO DE DESCARGA
“Time is money”
El tiempo es dinero reza un proverbio inglés y en la Web
podríamos afirmar que es aún más valioso. Los estudios desde 1994 a
esta parte demuestran que los usuarios demandan más y más
velocidad. En las encuestas los usuarios se quejan de este aspecto
mucho más que de cualquier otro por lo que se concluye que los
usuarios prefieren sitios rápidos antes que atractivos (muy pocos se
quejan de la “pobreza visual”).
Un estudio de Jacob Nielsen en 1999 comparando los sitios más
visitados de la web contra los sitios de las corporaciones más grandes
de EEUU demostró la alta correlación entre cantidad de visitas y
rapidez de descarga. En los sitios web más visitados las páginas tenían
un promedio de 8 segundos de tiempo de descarga mientras que las
páginas de los sitios de las grandes corporaciones descargaban en
promedio en 19 segundos.
La tasa de abandono de páginas (antes que termine de descargarse)
también se incrementa notablemente cuando se supera el límite de los
diez segundos, comportamiento que se corrobora a nivel de servidor
analizando las estadísticas de visitas y permanencia en las páginas
especialmente en la principal. Hemos visto en ciertos períodos que un
60 % de las visitas contabilizadas en la web de INTA, son en la página
principal lo cual indica que muchos usuarios no siguen navegando.
Páginas veloces
Con el objetivo de hacer que la experiencia del usuario sea lo más
exitosa posible la velocidad de las páginas será el criterio más
importante de diseño de las páginas web.
Los estudios de varias décadas sobre interfaces humanas indican
que 10 segundos es el tiempo máximo para mantener la atención del
usuario centrada en la tarea, por lo tanto el objetivo será que todas las
páginas estén por debajo de los diez segundos de tiempo de
descarga. Para lograr esto el tamaño máximo de las páginas debe ser
de 20 Kb (a una tasa promedio de descarga 2 Kb/seg) sumando todos
los componentes de la misma (gráficos, plug-ins, objetos incrustados
etc.).
NO Diseñar páginas largas con gráficos pesados, animaciones y
componentes.
SI Utilizar el hipertexto para crear conjuntos de páginas
relacionadas discretas y ágiles.
Un estudio
demostró la
alta correlación
entre cantidad
de visitas y
rapidez de
descarga.
10 segundos
es el tiempo
máximo para
mantener la
atención del
usuario.

Recomendaciones para disminuir los tiempos de descarga:
• Fraccione los documentos largos en unidades de
información con sentido.
• Depure el código HTML. Vea el capítulo X
• Limite y optimice los gráficos. Vea el capítulo X
• Los hipervínculos 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 más simples.
• Diseñe las páginas con la información más importante
arriba (texto) y desplace las imágenes hacia abajo.
• Contabilice el tamaño de todos los componentes de la
página, imágenes, botones, applets, páginas incrustadas etc.
pues lo que importa es la suma total de Kilobytes.
Documentos muy largos
Cuando la página de contenido aún optimizada sea de excesivo
tamaño (que excedan 10 segundos) o contenga muchas imágenes, debe
indicar el tiempo de descarga aproximado y dejar libertad al usuario
para que tome la decisión de descargarla.
El mismo criterio debe usarse siempre para documentos en otros
formatos: pdf, zip, word, excel etc.
LOS HIPERVÍNCULOS
Los vínculos expanden el espacio de información permitiendo
relacionar información más allá de la estructura del sitio. Pueden
relacionarse páginas 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 páginas muy distantes entre sí físicamente pero muy
cercanas conceptualmente.
Por otra parte permite no “reinventar la pólvora” reutilizando e
integrando los esfuerzos de otros y liberando tiempo, energía y
creatividad para nuevos desarrollos.
La receta es: ¡si ya existe, solo utilícelo!
Los
hipervínculos
expanden el
espacio de
información.

Textos de hipervínculos (ancla)
Se refiere a la porción de texto que se activa con el clic del
mouse. Los textos de los hipervínculos deben ser significativos y
representar fielmente la información que encontrará el usuario al
seguir el vínculo 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 redacción de los hipervínculos y
sus títulos (apartado siguiente) y su coherencia con el resto del
sistema de rotulado: títulos y descripciones de páginas etc.
Recomendaciones:
• Evitar vínculos no descriptivos del tipo “Haga clic aquí” o
“Nota siguiente” pues no revela contenido.
Ejemplo correcto:
Más información sobre producción de soja en el NOA.
Ejemplos incorrectos:
Para más información sobre soja haga clic aquí.
Más información. (muy impreciso)
• El ancla de hipertexto no debe contener más de cuatro
palabras pero si fuera necesario puede ampliarse la
descripción como texto normal.
Por ejemplo:
Otros proyectos institucionales sobre mejoramiento animal
en Balcarce.
Títulos de vínculos
El atributo TITLE en los hipervínculos permiten desplegar una
etiqueta de pantalla al pasar el mouse sobre él, otorgando mayor
contexto sin alterar el texto del hipervínculo.
Por ejemplo:
El presidente del INTA Ing. Hugo Cetrángolo firmó un convenio...
El código del hipervínculo podría ser :
<a href="http://www.inta.gov.ar/presid.htm"
title="Ing. Cetrángolo">Hugo Cetrángolo</a>
y presentará el siguiente aspecto al pasar el mouse sobre él:

Recomendaciones:
• La longitud de los títulos de hipervínculos no deben
exceder los 70 caracteres.
• Debe agregar información de lo contrario no se justifica su
uso.
Por ejemplo (incorrecto):
<a href="http://www.inta.gov.ar/presid.htm"
title="Ing. Cetrángolo">Hugo Cetrángolo</a>
Colores de vínculos
Los colores estándar que utilizan los navegadores para diferenciar
a los vínculos ya visitados del los todavía no visitados deben respetarse
por que la mayor parte de los usuarios los reconoce y les ayuda en la
navegación.
En pruebas de usabilidad se ha encontrado correlación positiva
entre uso de colores estándar y porcentaje de éxito en las tareas.
Destino de los vínculos
Los vínculos deben abrirse en la misma ventana salvo
excepciones muy justificadas.
La apertura de nuevas ventanas está totalmente desaconsejada por
diversas razones, básicamente por que confunden a los usuarios,
alteran el funcionamiento del botón “Atrás” y muchos usuarios no
observan que se abrió otra ventana. Constituye además un uso no
autorizado de los recursos de la máquina del usuario.
Vínculos personales
Cuando se usa el nombre de una persona en un hipervínculo se
recomienda que la página de destino sea una “página personal” que
puede incluir un curriculum abreviado, vínculos a otras actividades o
publicaciones, las formas de contacto y quizás una foto.
Si lo que se desea es crear un vínculo de tipo “mailto”
(hipervínculo que dispara el envío de correo electrónico) es preferible
usar como ancla de texto la propia dirección de e-mail.
Por ejemplo:
Biblioteca y Archivo Documental - INTA Central
biblioteca@inta.gov.ar (vínculo mailto)
Bibliotecaria: Gabriela L. De Pedro (vínculo a su página personal)
Vínculos externos
Los vínculos externos (aquellos que llevan al usuario fuera de
www.inta.gov.ar ) agregan valor al sitio si se crean de manera
Existe
correlacion
positiva entre
uso de colores
estándar y
usabilidad.

contextualizada. De poco vale una lista de “Sitios de interés” sin
comentar y sin actualizar.
Recomendaciones:
• Siga las pautas generales para los vínculos.
• Seleccione los vínculos con criterio y solo si agregan valor al
texto fuente.
• En los vínculos contextuales no linkee a la página principal de
un sitio sino a la página específica de referencia. Así evitará el
esfuerzo de búsqueda una vez en el sitio.
Por ejemplo:
El INTA firmó un convenio con la Facultad de Agronomía
por el cual se otorgan 4 becas para el Programa de
Agronegocios de dicha institución.
La URL de destino no debe ser www.agro.uba .ar sino
www.agro.uba .ar/agrotxt/agroneg/principal.htm
• Si decide crear una lista de vínculos piense en su actualización.
Es sumamente frustrante seguir un vínculo recomendado para
encontrar un mensaje de error del servidor. Al crear una
sección de “Sitios recomendados” presupueste el tiempo que le
llevará mantenerla vigente.
• Un pequeño comentario acerca del sitio agrega valor editorial a
su lista y ayuda a la decisión del usuario.
• Si los vínculos de la lista son muchos clasifíquelos en forma
consistente con la forma de organización de información del
INTA. Consulte los directorios de información.
• En vez de incluir una lista extensa de vínculos, identifique unos
pocos portales verticales (temáticos) que posean material de
calidad. Los usuarios no pueden revisar mucha cantidad de
vínculos, pero si recuerdan unos pocos de gran valor.
• Acompañe los vínculos externos con el logo que los representa
Los vínculos entrantes
A priori no se puede hacer mucho para controlar los vínculos que
apuntan a nuestro sitio excepto por la estabilidad de las URLs y la
calidad del contenido.
1. Los usuarios externos que sigan un vínculo para descubrir
que la página caducó se llevarán una mala impresión del
sitio en lo que a credibilidad se refiere.
2. Debe prestarse especial atención a las páginas de noticias o
novedades y nombrarlas con “visión de futuro”. Por
ejemplo:
www.inta.gov.ar/balcarce/boletín/actual.htm presenta el
problema que dicha página cambia permanentemente y el
Piense en el
mantenimiento!

contenido debe pasarse a otra página o perderse.
www.inta.gov.ar/balcarce/boletín/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, además de todas las consideraciones
contenidas en este manual, el centrado de las páginas en
temas específicos ayuda a que el ancla del hipervínculo de
salida sea adecuado. Es difícil crear un buen rótulo de
hipervínculo si la página 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 recomendación es categórica. No usar
marcos.
La página web unifica la visión de pantalla del usuario, la forma en
que se organiza la información, se almacena, se explora y se recupera.
El uso de marcos rompe este esquema concebido en el diseño
original de la Web.
Problemas con los marcos:
1. La dirección URL es la del “frameset” (archivo que
contiene información sobre el conjunto de marcos
utilizados) en vez de la página 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 difusión boca a boca de las URLs.
4. Roban espacio valioso de pantalla a expensas de contenido
máxime en monitores de baja resolución y tamaño.
5. Se complica el proceso de impresión.
6. Confunden a los motores de búsqueda en la creación de
índices.
7. Las páginas externas vistas dentro de un marco se ven
diferentes al diseño original.
8. Si la página de destino también esta diseñada con marcos el
problema de usabilidad se agrava.
Trate por
todos los
medios de no
usar marcos
(frames).

Obsérvese que el título de la página y la URL
(www.inta.gov.ar) corresponden a la página principal
a pesar de estar en una página interna de bibliotecas.
Recomendación:
Antes de organizar su sitio con marcos piénselo 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 página larga con vínculos a marcadores de la misma página
o a otras páginas de contenido similar.
Por ejemplo, un índice alfabético con un marco horizontal que
contenga las letras del alfabeto como vínculos a partes o a páginas del
índice.
LA IMPRESIÓN
Los navegadores fueron diseñados para visualizar documentos en
pantalla y sus capacidades para el manejo de la impresión son
actualmente muy limitadas, sin embargo la mayoría de los usuarios
imprimen las páginas (de contenido) que les interesan lo cual requiere
que se preste atención al aspecto de las mismas una vez impresas.
Es muy común observar páginas impresas con un par de
centímetros del lado derecho cortado, debido a que el ancho de la tabla
que contiene el texto excede al de la página impresa.
Recomendaciones:

• Además de observar la página en la pantalla, pruebe
imprimiéndola en papel carta y A4 y cuide que no se pierda
nada.
• Cree y vincule versiones imprimibles de los documentos
más extensos o que se hayan dividido en varias páginas.
Esto disminuirá el trabajo de impresión y derroche de
papel.
• En la versión para impresión puede manejar otros
márgenes, espaciados de párrafos y tipografías que
considere más adecuadas.
• La versión imprimible puede también ser realizada en
formato .PDF o .doc y debe aclararse el formato en el
vínculo, así como su tamaño, tiempo de descarga estimada
y software necesario para utilizarlo.

CAPÍTULO 6: LA CODIFICACIÓN
Este capítulo 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 programación igualmente le sugiero que le de una
lectura rápida, lo que le permitirá adquirir algunos conceptos básicos
que utilizará luego cuando use editores de páginas web, aún sin
escribir una línea de código.
CODIFICACIÓN SEMANTICA
Con el objeto de que la web fuera universal, el lenguaje de
hipertexto HTML se basó originalmente en la codificación del
significado de la información (codificación semántica) y no en su
formato.
Mediante etiquetas se “marca” un bloque de texto y se le asigna un
significado particular, por ejemplo el encabezado de una página 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; además
el de cierre lleva una barra “/” antes del nombre del marcador. En
síntesis:
<marcador>Bloque de texto a
marcar</marcador>
Por ejemplo:
<H1>La fotosíntesis en
cultivos de verano</H1>
<p>Un enfoque productivo</p>
<H2>Bioquímica de la
fotosíntesis</H2>
<p>La estructura de las
células .....</p>
En el bloque anterior tenemos un marcador H1 que representa el
título del trabajo, dos marcadores <p> que representa párrafos
normales y un marcador <H2> que representa un subtítulo o
encabezado de segundo nivel. De manera estándar este bloque html se
verá en un navegador, como el Internet Explorer, en este formato:
El lenguaje
HTML se basó
originalmente
en la
codificación del
significado de
la información.

La fotosíntesis en cultivos
de verano
Un enfoque productivo
Bioquímica de la fotosíntesis
La estructura de las células .....
El texto encerrado entre estos “marcadores” es presentado en la
pantalla por los navegadores de una manera estándar, por ejemplo para
H1 el texto se muestra en tamaño 24 y negrita, pero otros formatos
adicionales pueden ser establecidos por reglas de estilo (CSS) como se
verá más 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 edición
resulta muy sencillo hacerlo.
Razones para utilizar codificación semántica:
1. La codificación semántica es interpretada por todos los
navegadores independientemente de la plataforma de hardware
y software en la que corren.
2. Es más rápido y sencillo asignar un estilo de Encabezado a un
bloque de texto que aplicarle varios formatos.
3. El código HTML resultante es más “limpio” lo cual aligera las
páginas web y facilita su revisión y depuración. Por ejemplo:
<h1>Estación Experimental Balcarce</h1>
es más simple que:
<p><font size="5"><b><i>Estación
Experimental Balcarce</i></b>
</font></p>
4. En el ejemplo anterior el segundo método de codificar provoca
pérdida del significado del texto, solo indica que va en tamaño
5, negrita e itálica, pero no se puede saber que se trata de un
título.
5. Si todos los documentos usan marcadores estándar, su
interpretación es más fácil pues el usuario se acostumbra a
relacionar determinados formatos con sus correspondientes
significados; en cambio cuando un subtítulo se presenta de
varias maneras diferentes, se pierde la idea de su significado.

6. Existen lectores de pantalla para no-videntes que reconocen los
“marcadores” estándar HTML. Algunos países 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
tecnologías de información 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 más adelante y que resuelve muchos de los
desafíos de diseño de páginas.
8. El mantenimiento y rediseño de las páginas y sitios enteros se
reduce enormemente al usar hojas de estilos en cascada, en
combinación con los marcadores estándar HTML. Por ejemplo:
podemos redefinir (declarar) el estilo del encabezado nivel 1
(<H1>) para que se presente con un tamaño, color, alineación,
interlineado y otros aspectos diferentes del estándar. Esto
implica crear o modificar una sola línea de código que afecta a
todos los marcadores H1 de todas las páginas del sitio. Vea la
sección de hojas de estilo.
9. A la inversa, si se ha usado codificación basada en formato, el
rediseño de sitios implica un trabajo gigantesco de reemplazo
de código. Esto sucede también cuando se copia y pega texto
de otras aplicaciones como Microsoft Word.
10. En un futuro no muy lejano las páginas podrán vincularse a dos
o más hojas de estilos diseñadas para diferentes dispositivos
(PCs, Palms, Web TV etc.) y el navegador elegirá la más
conveniente.
11. Los datos pueden sobrevivir en la Web por muchos años. Más
que lo que duran los lenguajes y las versiones de software y
mucho más que el hardware. Es necesario que los datos
(contenido estructurado) y su formato estén lo más 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 estándares y limitar las
diferencias que las compañías introducen al código original. La batalla
comercial entre ambas empresas por captar las preferencias de los
Truco: Si debe utilizar texto de otras aplicaciones use Pegado
especial, péguelo como “texto sin formato” y luego complete
el trabajo asignando los estilos necesarios.

usuarios ha provocado un problema de diseño importante: algunos
marcadores HTML (no estándar) no son soportados por el navegador
de la competencia.
El diseñador entonces se enfrenta al dilema de elegir para que
público realiza su trabajo: para usuarios de Explorer o para usuarios de
Netscape. La lógica indica que hay que diseñar “para todo el mundo” y
para ello se ha recurrido a distintas soluciones hasta el punto de tener
que diseñar dos versiones de la misma página para que sea vista
adecuadamente por los dos segmentos. Algunos estudios indican que el
25% del tiempo de diseño se emplea en resolver dicha situación lo cual
obviamente se refleja en los costos y duración de los proyectos.
Aquí predicamos el uso de un lenguaje universal mediante el uso
de marcadores HTML estándar que son soportados por la mayoría
de los navegadores, complementado por la tecnología 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 Estándar Project no ha logrado consenso aún en algunas
especificaciones y que estas evolucionan permanentemente por lo que
se hace necesario monitorear el desarrollo de los lenguajes, los
estándares y los modelos.
En este manual indicaremos cuales son los marcadores HTML
estándar que se pueden utilizar con seguridad y indicaremos cuales son
los marcadores que no se deben usar por no ser estándar o estar
desaconsejados por el Web Consortium por atentar contra la
codificación semántica.
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 más frecuentes y que podrá ser ampliada conforme se
adquiera el nivel de capacitación necesario para utilizarlo.
Cuando todos los documentos del sitio estén codificados de esta
manera, un cambio de diseño se podrá aplicar globalmente cambiando
algunas líneas de código en la hoja de estilo. En forma automática
todas las páginas del sitio reflejarán dicho cambio. Que capacidad de
trabajo y cuanto ahorro de recursos!
Nota Técnica:
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 dinámico en las páginas, también llamado DHTML o HTML dinámico.
Otro estándar que asoma en el horizonte es el XML o Extensible Marked Language que busca
resolver el problema de la catalogación de documentos para que sean fáciles de encontrar por los
motores de búsqueda y fáciles 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 más “duro” que requiere cierto entrenamiento antes de su utilización
segura.
Web
Consortium
trata de
imponer
estándares y
limitar las
diferencias que
las compañías
introducen al
código HTML
original.

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 estándar pero modificable a través de
especificaciones en hojas de estilo CSS.
La sintaxis básica 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 detrás 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 página 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 cañon del Colorado
Debería codificarse como:

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 gráfica las líneas 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 párrafos
completos e incluyen un salto de línea automático. Por ejemplo: H1,
P, BR, UL y TABLE.
Etiquetas incrustadas son aquellas que afectan a cadenas de
caracteres y no comienzan en una nueva línea. Por ejemplo: EM, B
e IMG.
Para una lista completa de etiquetas HTML consulte la
bibliografía y sitios de Internet recomendados.
UNA PÁGINA AL ALCANCE DE TODOS
No se requiere a un experto para crear una página Web, si se
tiene claro la estructura del contenido y las limitantes de la pantalla
como se comentó en el Capítulo 4. Básicamente una página web es un
archivo de texto y por lo tanto puede crearse con una herramienta tan
sencilla como un “Bloc de notas” de Windows. También puede
aprovechar texto que ya tenga tipeado en su procesador de texto, con la
precaución 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 opción “Texto sin formato”.
Debe tener en claro la jerarquía de los textos (encabezados,
subencabezados, las listas con viñetas o numeradas) y si lleva alguna
imagen deberá tener el archivo ya preparado para insertar.
Vamos a desarrollar el código HTML de un documento ya
escrito en un procesador de textos y que se muestra a continuación:
<h1>El gran cañon del <font color="#FF0000">Colorado</font></h1>

Informe de Avance Agronomía
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 optimización de técnicas de riego para las diferentes
categorías de semilla de los cultivares utilizados. Se desarrollaron métodos más
eficientes para la micropropagación de plántulas y para la producción de
minitubérculos. Además, se puso en funcionamiento el Laboratorio de Genética
Molecular Aplicada, lográndose la identificación de variedades de papa y se
mejoraron las técnicas de muestreo de suelo para la estimación de nematodos.
Distribución de nematodos
Se continuó con el estudio de la distribución de los nematodos cuarentenarios
incluídos en las listas A1 y A2 del COSAVE (1997
Germoplasma
Se coleccionó germoplasma de S.commersoni ssp commersoni en la región serrana
del sudeste de la provincia. Se conserva la colección de germoplasma de papa,
ºefectuándose el monitoreo de la viabilidad de las colecciones y la regeneración y
acondicionamiento de semilla sexual y/o mantenimiento de material clonal in vitro y
a campo.
El Tizón tardío
Se estudió la eficacia de 19 tratamientos para controlar el tizón tardío 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 síntomas
y defoliación de las plantas y al rendimiento de papa recibo, "semilla" y total. La
mayoría de los tratamientos químicos controlaron la enfermedad, encontrándose
diferencias significativas entre fungicidas, dosis e intervalos entre aplicaciones.

El código correspondiente para crear la página web sería:
<html>
<head>
<title>INTA - Balcarce - Avances Agronomia -
Octubre 2001</title>
</head>
<body>
<h1>Informe de Avance Agronomía</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 optimización de
técnicas de riego para las
diferentes categorías de semilla de los cultivares
utilizados. </p>
<p>Se desarrollaron métodos más eficientes para la
micropropagación de
plántulas y para la producción de minitubérculos.
Además, se puso en
funcionamiento el Laboratorio de Genética Molecular
Aplicada, lográndose la
identificación de variedades de papa y se mejoraron
las técnicas de muestreo
de suelo para la estimación de nematodos. </p>
<h3>Distribución de nematodos </h3>
<p>Se continuó con el estudio de la distribución de
los nematodos
cuarentenarios incluídos en las listas A1 y A2 del
COSAVE (1997 Germoplasma Se
coleccionó germoplasma de S.commersoni ssp
commersoni en la región serrana del
sudeste de la provincia. </p>
<p>Se conserva la colección de germoplasma de papa,
ºefectuándose el
monitoreo de la viabilidad de las colecciones y la
regeneración y
acondicionamiento de semilla sexual y/o
mantenimiento de material clonal in
vitro y a campo. </p>
<h3>El Tizón tardío </h3>
<p>Se estudió la eficacia de 19 tratamientos para
controlar el tizón tardío
de la papa en el cultivar Kennebec. Las condiciones
ambientales fueron
favorables para el desarrollo de la enfermedad.
</p>

<p>La incidencia de la misma se evaluó en base a
síntomas y defoliación de
las plantas y al rendimiento de papa recibo,
"semilla" y total. La
mayoría de los tratamientos químicos controlaron la
enfermedad, encontrándose
diferencias significativas entre fungicidas, dosis
e intervalos entre
aplicaciones.</p>
<hr>
</body>
</html>
En este ejemplo de código se han utilizado las siguientes etiquetas:
<html> : identifica el texto como HTML
<head> : marca el encabezado, donde se incluye el
título, las etiquetas meta, hoja de estilo
etc.
<title> : para incluir el título de la página
<body> : marca el cuerpo de la página e incluye el
resto de los elementos de la página
<h1> : define el encabezado de la página
<h2> : define el subencabezado de la página
<h3> : define el subencabezado de la página
<p> : define los párrafos normales
<hr> : inserta una línea horizontal
Como expresáramos anteriormente: no hace falta mucho para
codificar una página de texto, solo se requiere encerrar los bloques de
texto según su significado entre las etiquetas correspondientes. No hay
que olvidar el cierre de las etiquetas.
Es cierto que no se ganará un concurso de diseño con este
código, pero nadie puede negar que es eficiente, esta “limpio” y
muestra lo necesario. Cualquier técnico o personal administrativo
puede preparar estas páginas sencillas y enviarlas para su publicación
directa en el server. Si requiere algo más sofisticado puede destinarse
para su retoque gráfico o agregado de componentes de programación,
pero al menos ha quitado a los programadores el trabajo primario de
edición.

Así se ve nuestra página de ejemplo:

HOJAS DE ESTILO EN CASCADA (CSS)
CSS, es un estándar para formatear páginas Web que trasciende
las limitaciones del HTML. Promulgado por el World Wide Web
Consortium (W3C), CSS extiende HTML mediante más de 70
propiedades de estilo que pueden aplicarse a etiquetas (tags) HTML y
que cubren aspectos como color, espaciado, posicionamiento, bordes,
márgenes, cursores y otros.
Las hojas de estilos en cascada le otorgan más control sobre la
apariencia y la presentación de las páginas. Al utilizar hojas de estilos
en cascada, puede ampliar la habilidad de especificar con precisión la
ubicación y la apariencia de los elementos de una página y crear
efectos especiales. Asimismo puede hacer el sitio Web más accesible a
los visitantes que tengan exploradores o dispositivos de salida
especializados.
Las hojas de estilo pueden simplificar el trabajo de diseño de
sitios completo al centralizar el control de formatos, separándolo del
contenido de los documentos.
Internet Explorer 4.0 y posterior soporta la especificación HTML 4.0
y CSS2. Puede consultar más información 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 páginas o a los elementos de página. Cada definición de
estilo, o regla de estilo, consiste en un selector seguido de las
propiedades y los valores de ese selector.
A continuación 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 estándar. 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
tamaño fuente. Puede especificar propiedades múltiples para un
selector separando cada una de ellas con un punto y coma ( ; ).
Así además de las características normales de H1, se presentará
en color verde y tamaño 1em y H2 se presentará en color azul y
tamaño 12 pixeles. Cada vez que se usen!

.note { font-size: small }
Este ejemplo es un selector de clase. Un selector de clase se
puede aplicar a varias etiquetas HTML estándar, por ejemplo:
<p class= “note”> Párrafo cualquiera </p>
El párrafo se presentará en tamaño pequeño.
Al utilizar hojas de estilos en cascada, puede establecer una
variedad más amplia de propiedades que al utilizar sólo formato
HTML estándar, entre las que se incluyen:
• Efectos de fuente, como VERSALES y espaciado entre
caracteres expandido.
• Propiedades de párrafo, como sangría, interlineado y espaciado
antes o después.
• Propiedades de bordes y sombreado, como cuadros y colores
de fondo.
• Propiedades de ubicación, como ajuste de texto alrededor de
los elementos de página, ubicación absoluta o relativa de los
elementos de página y orden z (de adelante hacia atrás) de los
elementos de página.
Para obtener más información acerca de la estructura y las reglas
para definir una hoja de estilos en cascada y sobre propiedades válidas
y valores, consulte las especificaciones del World Wide Web
Consortium (W3C).
Utilizar la hoja de estilos con una página
Son tres las formas en que se pueden utilizar las hojas de estilos en las
páginas del sitio Web:
1. Vincular una página a una hoja de estilos externa.
2. Crear una hoja de estilos incrustada en una página.
3. Aplicar estilos definidos a los elementos individuales de
página.
Cada método 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
páginas del sitio Web. Al definir los estilos en una o más hojas
de estilos externas y vincularlas a las páginas, asegura la
coherencia de la apariencia en todas esas páginas. Si decide

cambiar un estilo, sólo necesita hacer un cambio, en la hoja de
estilos externa, y éste se verá reflejado en todas las páginas
vinculadas a esa hoja de estilos. Normalmente, una hoja de
estilos externa utiliza la extensión de nombre de archivo .css,
como intastyle.css.
2. Utilice una hoja de estilos incrustada cuando desee definir los
estilos sólo en la página 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 página. Los estilos de
una hoja de estilos incrustada sólo se pueden utilizar en esa
misma página.
3. Utilice estilos definidos para aplicar las propiedades de la hoja
de estilos en cascada a elementos individuales de una página.
Si una página está vinculada a una hoja de estilos externa, los
estilos incrustados o definidos que cree para esa página extenderán o
suplantarán 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 página en particular, vincule dicha página a la hoja de estilos. El
programa Front Page, por ejemplo, lo hace de forma automática
utilizando el comando Vínculos de hoja de estilos en el menú
Formato.
Para hacerlo de forma manual debe agregar en el encabezado de
la página (entre la etiquetas HEAD) una declaración 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 declaración debe agregarse en todas las páginas 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.

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
página ---- */
h1, h2, h3, h4, h5, h6 {font-weight:normal; font-
style: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 ;border-
right: 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; margin-
top: 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; letter-
spacing: 1pt; color: #008080; font-style:italic }
span.nota {font-weight: bold; color: red; text-
transform: uppercase; letter-spacing: 1pt;
background-color: yellow; font-style:italic }

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; list-
style-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 }
.dirección {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; font-
size: 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 }

.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; border-
right: 2 solid #808080;
.pandsup { background-color: #CCFFFF; border-
right: 2 solid #808080; border-bottom: 2 solid
#808080 }
.panimed { background-color: #CCFFCC; border-
right: 2 solid #808080; }
.pandmed { background-color: #CCFFFF; border-
right: 2 solid #808080;}
.paninf { background-color: #FFFFCC; border-top:
2 solid #808080; }
.pandinf { background-color: #FFFFCC; border-
right: 2 solid #808080; border-top: 2 solid
#808080; }
/* --- o --- */

CAPITULO 7: DISEÑO DE SITIOS
CONSIDERACIONES GENERALES
Un sitio web es un sistema de información y como tal debe ser
concebido y diseñado, es decir como un conjunto de piezas de
información (páginas) que cumplen un objetivo común. Dichas
páginas están conectadas entre sí y conectadas con el mundo exterior
(la web) lo cual tiene implicancias a nivel de diseño. Como sistema
puede tener diversos grados de complejidad y estar integrado por una
cantidad variable de subsistemas también interconectados.
Este comentario trata de jerarquizar el trabajo del diseñador de
sitios web que no debe ser visto como un mero artista gráfico o
programador de páginas sino que debe entenderse como un
planificador de sistemas de información. 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 programación,
diseño grafico, bibliotecología, documentalismo, comunicación,
marketing, análisis de sistemas y también la visión estratégica del
“negocio institucional”.
En la evolución de los sitios web hemos visto como el área de
sistemas ha monopolizado el desarrollo de sitios web por la base
informática de la tecnología web. Muchos programadores, con poco
esfuerzo, comenzaron a codificar primitivas páginas en HTML con
escaso criterio visual pero que deslumbraban por el solo efecto del
hipertexto y su potencialidad para enlazar documentos distantes. Más
tarde los diseñadores gráficos agregaron a su competencia laboral al
diseño de páginas web “subiéndose al caballo” de las herramientas de
software que evolucionaron en esa dirección pero desconociendo los
fundamentos del lenguaje web. Aparecieron páginas cada vez más
vistosas, con agregados multimedia de dudoso valor informativo pero
de gran espectacularidad. Las páginas fueron haciéndose cada más
“pesadas” y el lento crecimiento del ancho de banda decepcionó a
muchos usuarios que debían esperar demasiado sin tener muy en claro
que recibirían a cambio de su tiempo.
En toda esta evolución poco se ha dicho y evaluado respecto de
la estructura subyacente a los sitios web, más bien estamos
acostumbrados a discutir sobre páginas, su diseño y desempeño. Es
muy poco frecuente discutir sobre la arquitectura de tal o cual sitio en
principio porque dicho aspecto es “invisible”, aunque “esencial”, como
diría El Principito. Por otra parte es difícil conocer la arquitectura de
un sitio por simple observación dado que hay que deducir y suponer
muchas cosas y requiere experiencia en la disciplina específica de
arquitectura de información. De tal manera podemos afirmar que la
arquitectura, ha sido la gran ausente de la “fiesta Web” de los últimos
años y es muy probable que siga haciendo así por varias razones
aunque no es este el lugar para discutirlas.
Un equipo
interdisciplinario
que integre la
programación,
diseño grafico,
bibliotecología,
documentalismo,
comunicación,
marketing y
análisis de
sistemas.
Es muy poco
frecuente
discutir sobre la
arquitectura de
sitios porque
dicho aspecto es
“invisible”,
aunque
“esencial”.

La importancia de la arquitectura tiene relación con el tamaño 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. Quizás un albañil experimentado pueda hacerlo
muy bien. Resulta evidente que un sitio de la magnitud del que se
pretende para una organización tecnológico/científica 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 información (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 información y para aprovechar la sinergia que
significa integrar nuevos nodos a una red preexistente.
ESTRUCTURA DE NAVEGACIÓN
Uno de los aspectos más delicados en el diseño de los sitios es la
forma en que deberán navegar los usuarios ya que las satisfacción de
los mismos estará influida por la experiencia positiva o negativa
mientras trata de encontrar la información deseada. No me canso de
repetir que la simplicidad en el diseño y la facilidad de uso deben ser
los objetivos de todo desarrollo web.
Es muy poco lo que puede hacerse a nivel de página si no se ha
pensado la estructura de la información por lo cual le sugerimos que
antes de diseñar alguna página de su sitio comience por especificar el
objetivo del sitio/subsitio, luego convoque a todas las personas que
tengan interés o responsabilidad para aportar contenido al sitio de
manera de reunir la mayor cantidad de información 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 también similitudes. Explotar estas últimas para
simplificar y homogeneizar el diseño de los subsitios es el desafío que
nos hemos propuesto con el propósito 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 diseñado bajo esas premisas y se
pretende que los subsitios que lo integran sean diseñados con el mismo
criterio. Para simplificar la tarea de los diseñadores y mantener la
consistencia se ha relevado el contenido actual de los subsitios y se ha
diseñado una arquitectura tipo para algunos de ellos como es el caso de
las estaciones experimentales. Más allá del tamaño de las unidades y
del volumen de información 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 posición en la
Un aspecto
delicado es
decidir como
deberán
navegar los
usuarios.

estructura de la EERA Pergamino que en EERA Balcarce. Caso
contrario el usuario debería efectuar toda una investigación en cada
subsitio para encontrar información similar.
Ejemplo de estructura
Otros subsitios pueden tener una identidad única en la
organización como es el caso de determinados programas de
investigación o extensión por lo que deberá planificarse especialmente.
Pero en todos los casos la guía para el diseño 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 diseñadores.
SUBSITIOS
Un subsitio es un conjunto de páginas con estructura y
administración propia, que comparten un estilo y forma de navegación
y dispone de una página de inicio. En el INTA un subsitio puede ser de
una Estación Experimental, de un Instituto de Investigación, de un
Programa o de cualquier entidad organizacional que desee organizar su
espacio de información y/o aprovechar las tecnologías de redes para
implementar algún servicio al usuario.
En este apartado daremos algunas indicaciones sobre como
estructurar este tipo de subsistema de información y ofrecemos
algunos ejemplos de estructuras típicas que se han elaborado como
plantillas para uso de los diseñadores.

La página de inicio
La página inicial creemos que debe tener muy pocos elementos y
debe responder a dos preguntas básicas: ¿dónde estoy? y ¿dónde puedo
ir?
La inclusión de pocos elementos colabora con la definición del
objetivo del sitio; pregúntese el lector si queda claro cuál es la misión
y el objetivo del sitio de Mirabilis presentado en la página 16. Una
gran cantidad de opciones iniciales pueden confundir al usuario y
generalmente reflejan la falta de una arquitectura clara y definiciones
básicas sobre qué es y para qué es el sitio.
El usuario que no conoce el sitio necesita ser guiado hacia la
información que necesita y en ese sentido presentarle un pequeño
numero de opciones que se vayan abriendo (estructura jerárquica)
facilita la investigación y aprendizaje.

¿Donde estoy?
Aunque responder a esta pregunta no parece ser un desafío para
el diseñador, muchos sitios confunden al usuario por no prestar
atención a detalles aparentemente menores pero que sumados definen
la experiencia de navegación. Algunos a tener en cuenta son:
• Titulo de la página: debe asegurarse que la etiqueta “title” este
redactada correctamente. Ver página 18. Por ejemplo “INTA -
Pergamino - Estación Experimental - Página principal” es
preferible a “Página principal de la Estación Experimental INTA
de Pergamino” pues las palabras más significativas deben
desplazarse hacia la izquierda para que sean visibles en cualquier
tamaño de ventana del navegador.
• Logo de la institución: dado que se trata de un subsitio debe
utilizarse el logo oficial de INTA sin ningún tipo de alteración
particular en el centro de la página y con un tamaño de 100
pixeles de lado.
• Identificación de la Unidad: el nombre de la unidad o
programa en estilo Encabezado 1 <H1>
• URL: los subsitios de www.inta.gov.ar tendrán todos una pagina
principal con una dirección 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 página 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 través de un motor de búsqueda,
interprete a golpe de vista y sin lugar a dudas donde se encuentra.
Donde puedo ir?
La herramienta de navegación se debe diseñar en base a la
arquitectura del subsitio. Se ha propuesto una arquitectura tipo que
refleja las necesidades de publicación de la mayoría de las unidades.
Su utilización 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 límites
establecidos los diseñadores propongan interfaces originales.
El usuario
debe saber a
golpe de vista
donde está.

La imagen superior permite observar algunos inconvenientes de los
que hemos hablado en los capítulos anteriores:
• Título de página incompleto (no incluye la palabra INTA).
• Diseño visual no estándar.
• Uso no autorizado del logo oficial (animado y con recuadro
azul).
• Las opciones de navegación no se visualizan al disminuir el
tamaño de la ventana y el usuario debe desplazarse
verticalmente para verlas.
• La fotografía mide 12 Kb (un 60 % del tamaño máximo de
página admitido).
La propuesta institucional para las páginas de inicio de las
Estaciones Experimentales se ejemplifica con las pantallas de las
EERA Balcarce y Pergamino. Como puede observarse el diseño de la
página inicial es el mismo lo cual le otorga consistencia visual, a la vez
que brinda la sensación de “lugar conocido” al visitante.
La arquitectura de los sub-sitios debe ser la misma para facilitar
la navegación, el examinado (browsing) y la búsqueda (searching) de
La consistencia
visual brinda la
sensación de
“lugar conocido”
al visitante.

información. Es de vital importancia para mantener reducido el
esfuerzo cognitivo de los usuarios, que la información se estructure de
la misma forma y además este integrada en el espacio de información
de todo el sitio inta.gov.ar. Para poner un ejemplo: un documento
sobre fertilización de trigo debe tener la misma ubicación relativa en
Pergamino que en Balcarce, de manera que el usuario prácticamente
vaya “de memoria” al lugar adecuado y no tenga que adivinar en cada
Experimental donde reside esa información.
La página inicial de Pergamino.

La página inicial de Balcarce
FUNCIONAMIENTO DEL MOTOR DE BÚSQUEDA
Se sabe que un alto porcentaje de los usuarios utiliza el motor de
búsqueda del sitio para llegar a la información deseada, por lo que
resulta beneficioso dedicar tiempo de programación para optimizar su
rendimiento.
No es el lugar aquí para discutir los aspectos técnicos de la
programación e implementación de motores de búsqueda, pero conocer
ciertos detalles ayudará a comprender la importancia de la adecuada
catalogación de los documentos, tema que se trató al hablar de las
etiquetas META.

BIBLIOGRAFÍA Y REFERENCIAS
INTA, Plan Estratégico 2001
El Sistema de Información Institucional. Ing. Carlos Roig. INTA. Sep. 2001.
INTA, DECOM. (2001) Unificación de la imagen editorial del Instituto
Nacional de Tecnología Agropecuaria.
Arquitectura de la Información para el WWW. Louis Rosenfeld.
Intranets. Usos y aplicaciones. Randy J. Hinrichs.
Usabilidad y diseño de sitios web. Jacob Nielsen.
El libro Oficial de FrontPage 2000. Microsoft Press.
Front Page 2000. Edición especial. Tomo 1 y Tomo 2. Neil Randall.
Yale University Web Style Guide.
The Digital Library Toolkit. Sun Microsystems.
Los países en desarrollo y la revolución de las tecnologías de la información.
Parlamento Europeo. STOA. Evaluación de las opciones Científicas y
Tecnológicas. Marzo 2001. PE nº 296.692
Argentina se conecta a Internet2. Comunicado de RETINA (Red
Teleinformática Académica) http://www.retina.ar
Estudios varios del INAP. http://www.inap.gov.ar
Uso Aceptable de Internet en el sector público. Documento de la SGP.
http://www.gobiernoelectronico.ar
Gestión de los Recursos de Tecnología de la información en el contexto de la
modernización Gubernamental. BID. Mayo 2000.
Infotec. Sistema de información Científica y Tecnológica del sector
Agropecuario en las Americas. FORAGRO-IICA-GFAR.
http://www.infoagro.net.es
Programa Información Científica. Chile. http://www.conicyt.cl
La Educación en la empresa. Ernesto Gore. Granica. 1998.
Conocimiento en acción. Davenport y Prousak. Harvard Business Press. 2001
La gestión del Talento. Pilar Jericó. Prentice Hall. 2001.
La quinta disciplina. Peter Senge. 1992.
La investigación sobre enfoques organizativos en educación. Joaquín Gairín.
Organización y dirección de instituciones educativas. Joaquín Gairín. Grupo
Editorial Universitario.
Evaluación, 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.

Camino al futuro. Bill Gates.
La visión de los líderes en la era digital. Anne Leer. Prentice Hall.
Intranets: usos y aplicaciones. Hinrichs. Prentice Hall.
Tres culturas: organización 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
Información: habilidades para manejarla y mantener el control. Malanchuck.
Prentice Hall.
Post televisión: ecología de los medios en la era de Internet. Piscitelli. Paidos.
Internet y educación. Rey Valzachchi. Ediciones Horizonte.
Multimedios y educación. 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 investigación agropecuaria. Memorias IICA-FAO.
Una perspectiva integradora para el trabajo institucional. Documento interno
INTA.
La Era de los Negocios Electrónicos. Dan Tapscot. Mc. Graw Hill.
Hype Cycle de tendencias y tecnologías emergentes. Intermanagers 27-08-
2001. 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 Pública 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/
Artículos varios de usabilidad de Jakob Nielsen: www.useit.com
Malos ejemplos de diseño en www.webpagesthatsuck.com
Consultora de usabilidad en www.webword.com
Ingeniería de interfaces de usuario http://world.std.com/~uieweb/

APÉNDICE I
CHECKLIST PARA EVALUACIÓN DE DISEÑOS WEB
Puede asignar puntaje de 1 a 5 a cada ítem y calcular un valor promedio para su sitio/página o
simplemente apunte un tilde en cada ítem cumplido.
1 Las páginas son ojeables (scanning)
2 Las páginas son breves
3 El texto es conciso y preciso
4 El lenguaje es claro
5 Los títulos de las páginas son adecuados
6 El texto tiene estructura (tema, subtema etc.)
7 Se usan correctamente los titulares (H1, H2 etc.)
8 Se mantiene consistencia visual y estructural a lo largo del sitio
9 Se incluye el Metatag description
10 Se incluye el Metatag: keywords
11 Se incluye el Metatag: author
12 Las páginas son de buena lecturabilidad
13 Las páginas están contextualizadas
14 Imágenes: calidad
15 Imágenes: pertinencia (comunican el mensaje requerido, se entiende)
16 Imágenes: tamaño
17 Imágenes: se incluye texto alternativo
18 Imágenes: han sido optimizadas con un editor grafico
19 Sonido: justificación
20 Animaciones: justificación
21 Se usan los estilos CSS disponibles en la hoja de estilo oficial
22 Se usa codificación HTML semántica
23 No utiliza código de formateo (font, color, etc) de texto
24 Aprovechamiento del espacio de pantalla (porcentaje de contenido)
25 Tamaño total de la página y tiempo de descarga < 10 segs.
26 Se usan los hipervínculos para agregar valor al contenido
27 Hipervínculos: se usan textos (rótulos) apropiados
28 Hipervínculos: uso de título de hipervínculos
29 Hipervínculos: uso de colores estándar (visitado/no visitado)
30 Hipervínculos externos: especificidad, logo y rótulo.
31 No se usan Marcos (salvo excepciones)
32 Se diseña para múltiples tamaños de pantalla
33 La impresión de las páginas es correcta
34 Se describe (párrafo editorial) el contenido del documento a bajar.
35 Se informa el tamaño y formato del documento a bajar
36 El código HTML esta depurado y optimizado
37 Se utilizan los logos oficiales
38 Todas las páginas disponen de barra de navegación
39 Todas las páginas disponen acceso al a página de inicio en el logo INTA.
40 Todas las páginas hacen referencia al INTA y a su Unidad.
41 Todas las páginas poseen pie de página

INTA – DECOM
Marzo 2002
Este Manual está en permanente
revisión y las actualizaciones y
agregados se irán publicando en el sitio
web de INTA.
Para comentarios, aportes, críticas,
reporte de errores y consultas dirigirse
a mbosch@correo.inta.gov.ar
Muchas gracias.

Manual estilo web

Más contenido relacionado

Similar a Manual estilo web (20)

Último (20)

Manual estilo web