You are on page 1of 13

GUÍA PARA EL DISEÑO DE UN SITIO WEB COMO APOYO

A UN CURSO

Según Palloff y Pratt1, las secciones que debe tener un sitio web de un curso típico son:
• Un área introductoria, que incluye un lugar para anuncios importantes, los
lineamientos y normas del curso, y preguntas frecuentes y sus respuestas.
• Un área comunitaria en la cual los miembros del grupo pueden establecer
comunicación (asincrónica y sincrónica) e interactuar a nivel personal.
• Un área donde figuran los contenidos del curso, organizados de acuerdo a la
manera como el currículo fue construido.
• Un área dedicada a reflexiones sobre el aprendizaje a través de medios electrónicos.
• Un área destinada a la evaluación de los alumnos, que puede ser estructurada desde
el comienzo o agregada a medida que el curso progresa.
• Un área para exámenes y asignaciones o para enviar trabajos como temas de
discusión, dependiendo de la estructura del curso.
El sitio web debe complementarse con enlaces hacia otros sitios web que contengan
recursos de información relevantes para el contenido del curso, un calendario de
actividades y una sección de utilidades donde se puede encontrar “software” útil para
realizar diversas actividades referentes al curso. Concebido de esta forma, el sitio web,
además de ser el territorio virtual de la comunidad de aprendizaje es un almacén de
información, un aula de aprendizaje, un espacio de comunicación y un espacio que vincula
a la comunidad con el mundo exterior.
De esta manera algunos aspectos que se deben considerar a la hora de diseñar este sitio son:
1. Aspectos técnicos
a. Estructuración del sitio: contenidos y servicios ordenados y clasificados,
zonas de comunicación y facilidades para la navegación.
b. Corrección de los contenidos: actuales y veraces.
c. Presentación y diseño del sitio: entorno audiovisual, lectura fácil.
2. Aspectos funcionales
a. Los contenidos y los servicios deberán ser adecuados y del interés de los
usuarios.
b. Atractivo: capacidad de adicción para sus usuarios.
3. Aspectos pedagógicos
a. Claridad del planteamiento de los objetivos del sitio, su efectividad y
pertinencia.
b. El planteamiento pedagógico de los materiales didácticos y de los
contenidos debe estar de acuerdo a las tendencias actuales.
4. Servicios que ofrece:
a. Informativos: noticias, agenda, acceso a mass media.
b. Formativo: recopilación de información, cursos, consejos reflexiones.
c. Recursos didácticos: materiales para estudiantes.
1
Silvio, José. [jsilvio@cantv.net] “Las comunidades virtuales como conductoras del aprendizaje permanente”
http://funredes.org/mistica/castellano/ciberoteca/participantes/docuparti/esp_doc_31.html, julio 1999.

Mgtra. Giannina Núñez Marín Facultad de Informática, Electrónica y Comunicación 1


d. Asesoramiento: foro, e-mail, chat
e. Canales de comunicación: anuncios, foros, listas.
f. Instrumentos para la comunicación: e-mail, chat, foro
g. Entretenimiento: postales, juegos, felicitaciones.

De acuerdo con Guizado2, la planificación del sitio de un curso requiere de la definición


del entorno, en el que se debe describir:
1. Definición del sitio (necesidad y justificación)
2. Determinar los objetivos del sitio.
3. Identificar las necesidades de aprendizaje y audiencia.
4. Determinar quienes estarán involucrados en el proyecto.
5. Identificar la tecnología (recursos de software y hardware).

La misma autora señala que las etapas de la arquitectura de un sitio de contenido como
el sitio de un curso son las siguientes:
1. Recopilación de información y contenidos.
2. Diseño Conceptual: se genera un boceto de la arquitectura del sitio. Determinando
el esquema (característica y agrupación de los contenidos) y la estructura del sitio.
3. Diseño del Sistema de Navegación: escoger el sistema a utilizar, determinar los
elementos principales de navegación y los complementarios.
4. Diseño Comunicacional: se diseñan los mensajes, los mecanismos de interacción
con los usuarios determinando variables críticas del estilo gráfico y de lenguaje. Por
ejemplo: redacción de textos, bienvenidas al sitio, mensajes, anuncios, encabezados
de formularios, encuestas, contactos, etc. Como parte del diseño comunicacional se
especifican los criterios para el diseño: tipografía, colores predominantes o de
identidad, peso promedio de las imágenes, resolución de las imágenes, utilización
de medios (sonido, video, animación). Se crea un prototipo de diseño gráfico
(balance entre lo visual y el contexto), siguiendo los criterios para el diseño.
5. Diseño de los entornos de colaboración: Se eligen las herramientas que facilitarán
la comunicación y colaboración entre los usuarios, es decir se eligen los
mecanismos de interacción, espacio virtual de encuentro, etc.
6. Inventario del sitio: páginas, imágenes, aplicaciones. Se crea la estructura física del
sitio (directorios).

1 DISEÑO CONCEPTUAL3
Se refiere al sistema de organización del sitio y se basa en dos aspectos que permiten
agrupar y definir información: los esquemas y las estructuras.

1.1 LOS ESQUEMAS


Definen las características y agrupación de la información.

2
Guizado, María Raquel de. Guías de estudio. Seminario de Informática. Universidad Tecnológica de
Panamá, octubre de 2003.

3
Lois Rosenfeld & Peter Morville. Information Architecture: for the World Wide Web. O’Reilly. 1998.
Referenciado por María Raquel de Guizado.

Mgtra. Giannina Núñez Marín Facultad de Informática, Electrónica y Comunicación 2


♦ Esquemas exactos: agrupan información bien definida. Organizamos en esquemas
exactos cuando queremos facilitarle al usuario la búsqueda o ubicación de información
bajo un concepto conocido por él. Ej.: el directorio telefónico. Ventaja: fáciles de
diseñar y mantener. Desventaja: le exigen al usuario que sepa el nombre o el objeto
específico que está buscando.
 Alfabéticos : En orden alfabético. Ejemplo: Lista de escritores panameños. Ver :
http://www.pa/cultura/escritores
 Cronológicos: En orden a periodos de tiempo. Ejemplo: Lista de poetas
panameños. Ver : http://www.pa/cultura/cac/poetas/autores.html
 Geográficos: Visualización geográfica. Ej.: Parques ecológicos nacionales. Ver:
http://www.pa/turismo/ecoturismo/index.html

♦ Esquemas ambiguos: dividen o agrupan en categorías. Se toma una decisión


intelectual para seleccionar u organizar información. A menudo más útiles que los
esquemas exactos. Ejemplo: Un centro de documentación, material organizado por
tema, asunto y área. Ventaja: involucra elemento de aprendizaje asociativo de acuerdo
al tema por parte del usuario. Desventaja: difíciles de diseñar y mantener y pueden
llegar a ser difíciles de usar. Requiere más trabajo, introduce el elemento de
subjetividad.
 Tópicos: (es importante definir profundidad). Los podemos ver en sitios
comerciales (productos, servicios, promociones, etc.) o secciones de un periódico,
etc. Ver: Sitio del país, http://www.fisc.utp.ac.pa/oac2
 Por audiencia específica: cuando hay valor personalizado del contenido, es decir,
sus contenidos están dirigidos a uno, dos o más tipos definidos de personas y los
contenidos a su vez tienen un valor particular para cada uno de ellos. Sitios
dirigidos a médicos, sitios de entretenimiento para jóvenes, sitios infantiles, etc.
Ver: http://www.fisc.utp.ac.pa
 Manejo Metafórico: son web de uso intuitivo. Muchas veces usan elementos
gráficos, íconos, descripciones que ayudan a comprender mejor a los usuarios las
funciones o contenidos. Ejemplo: Un esquema gráfico de una librería virtual, un
hospital virtual, web de arquitectura de computadoras, una galería de arte, etc. Ver:
http://www.ipl.org/ref/ (Una biblioteca), http://viablesoftware.com/wallpag0.htm
(galería de wallpaper).
♦ Esquemas Híbridos: Son una mezcla de los anteriores. Deben mantener la integridad y
separación de cada esquema. Son los más comunes en el web. Ejemplo: en una
Biblioteca se pueden presentar ambos esquemas (autor, titulo / exacto) , (tema, asunto,
área/ambiguo). Ventaja: Nos dan mayor posibilidad de presentar una gama de
elementos y contenido en el web. Desventaja: Puede presentar confusión para el
usuario. Mayor cantidad de esquemas
mentales.

1.2 LAS ESTRUCTURAS


Definen las relaciones y el modelo
primario que se utilizará.

Mgtra. Giannina Núñez Marín Facultad de Informática, Electrónica y Comunicación 3


♦ Estructura Jerárquica: es una organización de arriba -abajo y modular. Considerar :
 La exclusividad. Presenta cada módulo bien definido e independiente, buscando
agilizar las tareas de mantenimiento del sitio.
 Equilibrio entre la anchura y profundidad. Demasiado ancha y poco profunda,
presenta demasiada opciones en el menú principal, perdiéndose el objetivo del sitio.
Muy estrecha y de gran profundidad, el usuario pierde noción del recorrido y pierde
lo que busca. Se recomienda una anchura no más de siete (7) ítem, sobre todo
cuando el esquema de organización es ambiguo. Ver diagrama.

♦ Estructura hipertexto:
involucra elementos de
multimedios y un conjunto de
enlaces, con una estructura no
lineal, no definida. Debe ser un
complemento y no una estructura
de organización primaria. Ver
diagrama. Ventaja: proporciona
gran flexibilidad. Desventaja:
puede presentar complejidad y
confusión para el usuario.

2 DISEÑO DEL SISTEMA DE NAVEGACIÓN4


El sistema de navegación busca la flexibilidad y el desplazamiento apropiado del usuario
dentro de un sitio web. Este desplazamiento se realizará tomando como base la estructura y
el/los esquema/s escogidos en el momento de la organización de la información, es decir,
el diseño del sistema de navegación debe ser cuidadosamente estudiado luego de la fase de
organización.
Los browser o visualizadores mantienen su propio sistema de navegación que permite
navegar entre páginas, más sin embargo, es importante considerar que todo sitio web
necesita su propio sistema de navegación ya que éste será permanente y se hará familiar
para el usuario o navegante que visite el sitio.
Los elementos de navegación externos del browser o visualizadores como el Internet
Explorer o el Nestcape Navigator son:
1. La dirección o URL
2. Los botones adelante y atrás
3. Menú de historia
4. Libro de direcciones o Favoritos
5. Enlaces de las páginas.
4
Lois Rosenfeld & Peter Morville. Information Architecture: for the World Wide Web. O’Reilly. 1998.
Referenciado por María Raquel de Guizado.

Mgtra. Giannina Núñez Marín Facultad de Informática, Electrónica y Comunicación 4


Todos estos son elementos que permanecerán sólo durante la sesión del usuario. Muchas
veces se da el caso de que al entrar a un sitio desde un buscador se llega a una página
intermedia que de no tener navegación, el sitio pierde oportunidad de que el usuario pueda
navegar en su contexto, pues los elementos de los visualizadores no servirán para
desplazarse a sus otras páginas. Ver documento sin navegación:
http://www.pananet.com/apabanco/VOL6.HTM

2.1 TIPOS DE SISTEMAS DE NAVEGACIÓN


♦ Navegación jerárquica: Sistema Primario, es decir, representa la estructura general del
sitio. Tiene limitaciones de
navegación, sólo opciones de: hacia
adelante, hacia atrás y hacia la
principal. Sólo muestra las opciones
de navegación global en la página
principal u Home Page.
Observación: este sistema se utiliza
si se ha organizado la información
con estructura jerárquica y modular. También lo utilizamos cuando queremos que el
usuario siga un recorrido a través del sitio sin distraerse con las opciones globales de
navegación. Ejemplo de sitio con navegación jerárquica:
http://www.binal.ac.pa/index.htm

♦ Navegación global: Tiene movimiento lateral y vertical entre sus módulos. Elementos
de navegación principal en cada página del sitio. Observación: este sistema se utiliza si
se ha organizado la información con estructura jerárquica y modular. Con este sistema
el usuario observará todas las opciones de navegación global y podrá desplazarse
arbitrariamente en el contexto del sitio. Ver : http://www.pa/cultura/museos/ciencias/

♦ Navegación local: Concepto de Subsitio-un sitio que agrupa a su vez módulos muy
independientes que pueden ser considerados como sitios propiamente. El diseño visual
debe ser o no estándar. El diseño visual de la estructura de navegación debe ser estándar
y ésta debe incluir navegación local del subsitio y la global del sitio. Recomendación:
No agobiar al usuario con demasiadas opciones, minimizar con el diseño gráfico la
confusión de navegación global y del subsitio. Ver: http://www.pa observe cada
módulo principal mantiene una estandarización del diseño visual en la estructura de
navegación. Puede observarse la navegación local del módulo y la global del sitio
completo.

♦ Navegación had-hoc /alterno: Tipo editorial (textual): Uso de Frases o palabras


(correspondientes a los tópicos o módulos de la estructura de organización de
hipertexto) dentro de un contenido textual. A menudo el usuario se desvía y no termina
de inspeccionar la página, no tiene estructura definida. Ejemplo: algunas páginas
personales, o páginas de sitios de contenido.

Mgtra. Giannina Núñez Marín Facultad de Informática, Electrónica y Comunicación 5


2.2 ELEMENTOS DE LA NAVEGACIÓN DEL SITIO
Luego de elegido el sistema de navegación que se utilizará para el sitio, se escogerán los
elementos de navegación que más convengan para darle flexibilidad de movimiento a
través del sitio a los usuarios.
♦ Barra de navegación: Proyecta los tópicos principales o contexto global del sitio.
Colección de hipertexto generalmente ubicados visualmente en la parte superior del
sitio o en al lado izquierdo. Son gráficos, generalmente a manera de botones. Ver:
http://www.pa/cultura/museos/ciencias/infogral.htm. Considerar: Tomar en
consideración el tiempo de bajada, gente que sólo ve texto, mantenimiento difícil,
mayores costos. Recomendación: Hay que ubicar la barra de navegación visualmente
dentro del sitio en un espacio flexible para adicionar nuevas opciones.
♦ Marcos/ Frame: Se utilizan varias ventanas en el contexto del sitio. Visualmente una o
más ventanas o marcos permanecen fijos.
Presenta navegación estática, es decir, el URL
en el Browser no cambia a medida que se da
la navegación. Útil para documentos de
mucha clasificación. Considerar: El estado
real de la pantalla principal puede ignorarse
por parte de los buscadores de información.
Diseño más complejo: diferencia de
despliegues por parte de los browser. Marcos
dentro de marcos. Existe conflicto al hacer un
enlace a otro sitio que tiene frame.
Recomendación: Úselo si es el caso de estructuras de gran profundidad o para facilitar
la exposición del tema.
♦ Uso de menú: Presenta una lista de opciones. Son flexibles para agregar opciones.
También se usan a manera de opciones de ventanas. Ver:
http://www.pa/cultura/museos/ciencias/index.html. Considerar: En el menú de
ventana, las opciones pueden pasar desapercibidas. Recomendación: Usar menú en el
pie de página como alternativa
textual que apoya el modo de barras
gráficas de navegación.

2.3 ELEMENTOS COMPLEMENTARIOS DE LA NAVEGACIÓN


♦ Tablas de contenidos
 Nos da la estructura de información del sitio o de un módulo o de una página del
sitio.
 Proporciona una vista completa del contenido a través de hipertexto
 Ideal para sitios organizacionales de mucho contenido
 Ideal para páginas de contenido largo con subpuntos.
 Son textuales
 Ver: http://www.utp.ac.pa/seccion/topicos/comercio_e/contenido.htm

♦ Índices
 Presenta uno o dos niveles de profundidad.

Mgtra. Giannina Núñez Marín Facultad de Informática, Electrónica y Comunicación 6


 Se utilizan palabras, frases, o párrafos.
 Llevan al usuario directamente al contenido.
 Utilizado en esquemas alfabéticos o cronológicos.
 Son textuales, y generalmente agrupan un conjunto de enlaces homogéneos. Ver:
http://www.pa/turismo/index.html http://www.pa/cultura/cac/poetas/autores.html

♦ Mapas
 Definición gráfica de la arquitectura de un sitio.
 Utilizados cuando se ha organizado la información con
esquema exacto, de manera geográfica.
 Ver: http://www.ipat.gob.pa/ecoturismo2,
http://viablesoftware.com/wallpag0.htm (galería de
wallpaper).
 Recomendación: Poner representación textual como alternativa.

♦ Guías
 Es una herramienta de ayuda a usuarios que desean ser guiados a través del sitio.
 Ofrece navegación lineal. Generalmente utilizada para sitios orientados a tareas o
funciones (ideal para contenidos de talleres).
 Ver: http://www.hotmail.com (para sacar un correo gratis hay que seguir una serie
de pasos a través del sitio). Ideal para llevar al estudiante a través de un contenido o
ejercicio.

3 DISEÑO VISUAL DEL SITIO WEB


Uno de los aspecto importantes a considerar dentro del desarrollo de un Sitio Web es el
diseño visual , puesto que a través de éste se manifiesta de una manera comunicacional lo
que se quiere transmitir. El diseño debe atraer la atención de los usuarios, emitir un mensaje
comunicacional y conseguir que el usuario muestre interés sobre lo que se publica.

3.1 EL PROCESO DEL DISEÑO


♦ Estudiar quién usará la interfaz y para hacer qué cosa.
♦ Elegir los elementos gráficos ( imágenes, botones o iconos, colores, tipo de letra, etc),
que representarán la imagen de sitio.
♦ Bosquejar un diseño para el Home Page y sus páginas internas, integrando en éste tanto
los elementos gráficos, así como la arquitectura y estructura de información. Utilizamos
cualquier medio (PowerPoint, papel, tablero blanco, etc.)
♦ Escoja y evalúe las herramienta a utilizar para la construcción gráfica del sitio.
♦ Optimizar, mejorar y crear los elementos del diseño (íconos, imágenes, etc.)
♦ Crear un prototipo del diseño visual con todos sus elementos, tanto gráficos como
textuales. Organizar la información visualmente.
♦ Evalúe junto al usuario y afine el diseño.

3.2 PRINCIPIOS A CONSIDERAR PARA EL DISEÑO VISUAL

Mgtra. Giannina Núñez Marín Facultad de Informática, Electrónica y Comunicación 7


♦ El diseño visual debe ser consistente, uniforme y coherente: La consistencia en un
diseño para web se refiere a que debe existir uniformidad entre el Home Page y
módulos o páginas asociadas. El propósito básico de la consistencia es permitir al
usuario familiarizarse con el sitio, navegar sin perderse y visualizar el contexto global
del sitio.
También involucra la utilización de simbología estándar como por ejemplo: Ir al Home
se representa con una casita, o flecha para adelante o hacia atrás, o un icono de carta
para correo electrónico. Debe existir una compatibilidad visual o aproximación
temática, coherente y uniforme, es decir, agrupar elementos por homogeneidad y unidad
temática.
♦ Debe tener claridad visual, es decir debe ser simple: La claridad involucra la forma
simple en que se presentan los elementos, destacar títulos y rótulos según su relevancia,
elementos entendibles, es decir, libres de complicaciones, pocos elementos, etc.
♦ Debe considerar la distribución adecuada de elementos tomando en consideración
el equilibrio entre éstos: Los elementos del diseño deben estar distribuidos
considerando el centro visual o de gravedad (centro de la pantalla), balance entre dos
fuerzas (izquierda y derecha) (arriba y abajo).
♦ Debe ser flexible para mantenerse en el tiempo: La flexibilidad del diseño busca
poder cambiar, renovar y mejorar el diseño sin complicaciones técnicas o lógicas, es
decir, debe fácilmente permitir agregar un icono, una opción adicional a un menú,
mejorar rápidamente un gráfico. Para esto ha de considerarse la tecnología que se utiliza
y prestar atención a lo complejo del diseño.

Consideraciones:
♦ Seguir las convenciones de diseño tales como íconos estándares (correo, inicio u
Home), ya que los usuarios están acostumbrados a éstos.
♦ El diseño visual no debe variar tan a menudo, ya que el usuario crea familiaridad
con los elementos gráficos.
♦ La estructura de información debe ser estable y flexible, es decir considerar la
facilidad para mantenimiento, quitar o agregar íconos, tópicos, etc.
♦ No recargar con imágenes o gráficos innecesarios.
♦ Utilizar letras y elementos gráficos según su estilo y tipo de web. Las letras pueden
ser romanas, clásica, sencillas o modernas.
♦ El texto debe ser legible, con tipografía adecuada (color y tamaño).
♦ El texto o contenido debe llevar un mensaje comunicacional y debe ser significativo
para el usuario.
♦ Ubicar información más estática a la izquierda (tópicos principales del sitio) y más
cambiante o dinámica a la derecha (noticia, promociones, etc.)
♦ Digitalizar imágenes en media o máxima resolución y luego optimizar según sea el
caso.
♦ No permita que el fondo compita con el contenido, es decir, que no debe sobresalir
más que el contenido y rótulos importantes.
♦ Ponga íconos para los temas más importantes de la página. Utilice pequeñas
imágenes con balance de tonos y contrastes.

Mgtra. Giannina Núñez Marín Facultad de Informática, Electrónica y Comunicación 8


♦ Utilizar jpg para imágenes con degradado y gif para imágenes con colores planos
(bandera, logos, etc.)
♦ Un área del problema de diseño de interfaz es el uso de colores y de fondos. Los
fondos oscuros con letras claras muchas veces son difíciles de leer si el contenido es
muy largo. Otras veces ambos colores son tonos que no conviven entre sí y hacen
que el texto se vea confuso. Evite utilizar marcas de agua, hacen muy confuso el
sitio.

3.3 NORMAS DE ESTILO5


Las normas de estilo son características o fundamentos a considerar para el diseño de los
componentes que integrarán las páginas web y de los cuales debemos prestar atención a la
hora de la construcción del servicio de contenido.

♦ Identidad del Sitio: La identidad del sitio debe estar de manifiesto en la página
principal, la cual debe reflejar el propósito, objetivos del sitio. Los usuarios deben
identificar con claridad, de dónde es el sitio, quiénes son los responsables.
Esto lo podemos lograr algunas veces en el contexto global a través de un texto breve,
explicativo, como por ejemplo una bienvenida o puede estar reflejado en el diseño
visual o a través de los componentes gráficos o tópicos que componen el sitio. Cuando
logramos identificar rápidamente en el primer pantallazo u Home Page del sitio,
entonces decimos que el sitio tiene una identidad. La identidad es como la imagen de
seriedad y responsabilidad de quienes ponen a disposición los contenidos. La identidad
debe ser reconocida localmente o globalmente si los contenidos son de uso público.
Otros aspectos que debemos considerar para la identidad son:
 Poner título completo del sitio, identificando el origen en todas las páginas de
contenido
 Poner el título de las páginas (en el código html, la sentencia Title)
 Poner pie de página completo, es decir los responsables, la institución u
organización, la fecha de creación y actualización de los documentos.
 Ver este ejemplo: Gobernantes de Panamá y verifique el concepto identidad.

♦ Estructura: Es el balance entre los componentes del sitio web, entre el Home Page y
páginas de menú, y entre sus páginas individuales. Estructura Recomendada:
Segmentación modular.

5
González y Cordero: "Diseño de páginas web", Mc Graw Hill, 2001. Referenciado por María Raquel de
Guizado

Mgtra. Giannina Núñez Marín Facultad de Informática, Electrónica y Comunicación 9


Estructura no recomendada

M = Menú /Home Page D = Documento

♦ Enlaces o Links
 Permiten conectar un documento con otros documentos.
 Deben surgir del lenguaje natural
 Escoger frases claras y de largo apropiado
 El texto del enlace de acuerdo al título del contenido
 Ver ejemplo primer párrafo de: http://www.pa/patria/index.html

♦ Largo de las Páginas


 De acuerdo a los requerimientos en particular del contenido.
 Debe visualizase en la parte central el objetivo del Home Page.
 Tomar en cuenta que hay contenidos que no se pueden fragmentar, pues se pierde el
interés del tema.
 Y si el contenido es extenso con varios puntos, se recomienda poner inicialmente en
la página una tabla de contenido de los puntos que están contemplados en esa
página. Ver ejemplo: http://www.ipat.gob.pa/legislacion/index.html

♦ Navegación
 Se refiere a la jerarquía de documentos que nos permiten viajar satisfactoriamente a
través del mismo.
 Recomendaciones:
 Iconos para desplazamiento, inicio, fin del documento. Ver:
http://www.ipat.gob.pa/cascoantiguo/capitulo1.html
 Tabla de contenido al inicio de documentos largos.
 Poner título a cada página.
 Colocar título en el encabezado del visualizador (browser).
 Proveer servicio de búsqueda.

Mgtra. Giannina Núñez Marín Facultad de Informática, Electrónica y Comunicación 10


 Comentario: Si tenemos dos sitios, un Sitio A que hace un enlace a una página
determinada de un Sitio B. Considere que los sitios deben contener sistema de
navegación interna, ya que de esa manera, cualquier usuario que llegue a una página
determinada desde otro sitio, puede desplazarse dentro del mismo, ganando una
oportunidad; es decir, el sitio B gana una oportunidad de ser visitado por un usuario
que viene del sitio A; de no tener navegación propia el sitio B, el usuario sólo

llegaría a la página del sitio B que tiene el enlace, quedando ésta suelta del resto del
sitio.
♦ Texto
 No utilizar diversidad de fuentes en las páginas. Dos fuentes como máximo es lo
recomendable.
 Utilizar fuentes que sean legibles (considerar la visión de los usuarios).
 Utilizar fuentes estándares: Times New Roman, Arial, etc.
 No abusar de las mayúsculas. El texto en minúscula es más fácil de leer.
 No abusar de texto móvil, ya que llega a ser molesto.

• Gráficas y elementos multimedia.


 Ayudan a explicar y demostrar lo que se quiere.
 Incrementan el tiempo de carga de la página.
 Mantener no más de 30-60 K en imágenes por página.
 Utilizar tecnología para minimizar u optimizar imágenes.
 Utilizar texto alternativo (ALT) para proporcionar información a quienes naveguen
sin imágenes.
 Proveer alternativas al navegante, es decir, si desea presentarle un gráfico de gran
tamaño, darle al usuario la oportunidad de verlo en tamaño pequeño y si desea verlo
en grande, entonces al hacer clic sobre la imagen, ésta se desplegará en grande. Ver
ejemplo: http://www.ipat.gob.pa/zonas/bastimentos.html

Mgtra. Giannina Núñez Marín Facultad de Informática, Electrónica y Comunicación 11


 No abusar de los sonidos de fondo, ya que pueden resultar molestos si se prolongan
por mucho tiempo.
 No abusar de íconos animados, si se usan como elementos meramente decorativos.

♦ Pie de Página o Autenticidad


 Identificar el origen, autor, contacto técnico, responsable y fecha de actualización.
Ver: http://www.pa

Recomendaciones
Considerar la tecnología y las limitaciones de cada usuario y en función de esto diseñar.
Promedio en peso de las páginas 50 - 90 Kb
♦ El texto 5 K
♦ El fondo 5 K
♦ Logo y encabezado 20 K
♦ Barras de navegación 8 K
♦ Botones (2 k) 10 K
♦ Otras gráficos (opcional) 20 K
Esto puede variar de acuerdo al tipo de página, es decir si ésta es más de contenido textual
o es más de diseño visual.

Otras Recomendaciones generales sobre el sitio


♦ Ofrecer una organización clara e intuitiva de la información que se publica (índice,
tablas de contenido).
♦ Crear una página principal de tamaño no muy grande para que se cargue rápidamente.
♦ Utilizar un mismo estilo para todos los íconos del sitio (utilizar los ya reconocidos
globalmente, como el de Home Page que es una casita, el de correo que es una carta, el
de las flechas de avanzar y retornar, etc.)
♦ Mantener un mismo estilo de diseño en todas la páginas para dar una imagen uniforme
al sitio.
♦ Proporcionar un mecanismo de navegación textual para los usuarios que naveguen con
las imágenes desactivadas.
♦ No colocar demasiados objetos en una misma página ya que esto retarda el tiempo de
acceso de las páginas.
♦ Utilizar fondos simples que faciliten las mejoras de las páginas.
♦ Dar un título significativo a la página pues es éste el que se almacenará en la libreta de
direcciones del visitante.
♦ Utilizar los elementos META del encabezado para proporcionar a los buscadores
información sobre la página.
♦ Indicar fecha de actualización de la página para una mejor referencia de los usuarios.

4 DISEÑO DE LOS ENTORNOS DE COLABORACIÓN

Mgtra. Giannina Núñez Marín Facultad de Informática, Electrónica y Comunicación 12


Considere que la actualidad existe una serie de herramientas de comunicación asíncronas y
sincrónicas que usted puede disponer para facilitar la comunicación y colaboración con los
usuarios de su sitio. En las herramientas más usuales se encuentran:
♦ Sincrónicas en el tiempo:
 Herramientas de conversación: Tal es el caso del chat.
 Audio y videoconferencia.
♦ Asincrónicas en el tiempo:
 Correo electrónico.
 Foros de discusión
 Listas de distribución.
 Grupos de Noticias

En la actualidad existen sitios, que además de ofrecer el alojamiento gratuito, también


ofrecen algunos de estos mecanismos de comunicación.

5 INVENTARIO DEL SITIO


Por cada página que implementará realice la identificación de los recursos y contenidos de
una manera organizada, estructurada y modulada. Por ejemplo siga el siguiente esquema:

Contenido Tipo de Documento Recursos de apoyo


Edición Página Web HTML Manuales en línea.

Mgtra. Giannina Núñez Marín Facultad de Informática, Electrónica y Comunicación 13

You might also like