Documentos de Académico
Documentos de Profesional
Documentos de Cultura
El Diseno Web
El Diseno Web
Agropecuaria
www.inta.gov.ar
Manual de estilo y diseño
de sitios y páginas Web
Departamento de Comunicaciones
Marzo 2002
INTA - Manual de arquitectura de sitios y diseño de páginas Web
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
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
INTRODUCCION
QUIENES DEBEN LEER ESTA GUÍA
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:
sitios es el único
que puede ASPECTOS DE LA USABILIDAD
La usabilidad es más que una expresión de deseos y sus aspectos
asegurar que los pueden ser medidos por “pruebas de usabilidad” que cuantifican el
mismos grado de éxito de un sitio o proyecto en particular. Estas pruebas
utilizan diversas metodologías para evaluar el comportamiento de los
funcionen usuarios ante un determinado diseño y una serie de tareas específicas.
adecuadamente. 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.
Encabezado (<H1>)
Separación de párrafos
Vínculos a otras
secciones
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”.
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.
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.
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
Tómese un forma estructurada el contenido.
tiempo para El tema general del contenido de la página se traduce a un titular
organizar el 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
texto. 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,
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>
LECTURABILIDAD
Todo el esfuerzo que se haga para mejorar el índice de
lecturabilidad es poco si se entiende que el tiempo de atención del
usuario web es escaso y la lectura en pantalla dificultosa.
El proceso de lectura en general ha sido objeto de numerosos
estudios y pueden darse algunas recomendaciones que tienen mayor
validez aún, para la lectura en pantalla. El índice de lecturabilidad o
legibilidad disminuye cuando:
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.
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.
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.
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
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.
Puede No es recomendable agregar fragmentos de video de más de un
complementar minuto de duración, superado ese tiempo debería subdividirse el
mismo.
sus diseños
Si esta pensando en usar masivamente video, por ejemplo en
web editando actividades de formación, evalué la edición de un CD Rom que
Cds con contenga el video digitalizado y que complemente los contenidos Web.
contenido Al igual que en el apartado anterior en el rótulo de descarga de
multimedia. 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.
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
Un estudio 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
demostró la usuarios prefieren sitios rápidos antes que atractivos (muy pocos se
alta correlación quejan de la “pobreza visual”).
entre cantidad Un estudio de Jacob Nielsen en 1999 comparando los sitios más
de visitas y 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 rapidez de descarga. En los sitios web más visitados las páginas tenían
descarga. 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
10 segundos exitosa posible la velocidad de las páginas será el criterio más
importante de diseño de las páginas web.
es el tiempo
máximo para Los estudios de varias décadas sobre interfaces humanas indican
que 10 segundos es el tiempo máximo para mantener la atención del
mantener la usuario centrada en la tarea, por lo tanto el objetivo será que todas las
atención del páginas estén por debajo de los diez segundos de tiempo de
usuario. 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.).
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)
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
Existe por que la mayor parte de los usuarios los reconoce y les ayuda en la
correlacion navegación.
En pruebas de usabilidad se ha encontrado correlación positiva
positiva entre entre uso de colores estándar y porcentaje de éxito en las tareas.
uso de colores
estándar y Destino de los vínculos
usabilidad. 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:
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
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.
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:
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
El lenguaje significado particular, por ejemplo el encabezado de una página se
HTML se basó “marca” como <H1>, el subencabezado como <H2> y así
originalmente sucesivamente hasta <H6>.
en la La sintaxis general del marcado de texto indica que el bloque de
texto debe delimitarse por un marcador de inicio y un marcador de
codificación del cierre, ambos a su vez encerrados entre signos menor y mayor; además
significado de el de cierre lleva una barra “/” antes del nombre del marcador. En
la información. 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:
La fotosíntesis en cultivos
de verano
Un enfoque productivo
Bioquímica de la fotosíntesis
La estructura de las células .....
<p><font size="5"><b><i>Estación
Experimental Balcarce</i></b>
</font></p>
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.
Ejemplo:
<font size=”3”>Bloque de texto a marcar</font>
Anidamiento de etiquetas
En ciertos casos es necesario combinar etiquetas para lograr
efectos diferentes. Si quisiera lograr este efecto:
Distribución de nematodos
Germoplasma
El Tizón tardío
<html>
<head>
<title>INTA - Balcarce - Avances Agronomia -
Octubre 2001</title>
</head>
<body>
</body>
</html>
/* --- o --- */
Ejemplo de estructura
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?
¿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
El usuario Buenos Aires Norte (/ban) dentro del directorio de los centros
debe saber a regionales (/creg).
golpe de vista Estas recomendaciones apuntan a que el usuario, ya sea que entra
donde está. 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.
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.
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
Muchas gracias.