ELEMENTOS PRINCIPALES Y REGLAS DE CONSTRUCCIÓN

DE UNA PÁGINA WEB

El especialista Thomas Powell define una página Web como la unión de textos, e
imágenes que forman el documento que aparece en una ventana del navegador
cuando el usuario accede a una dirección electrónica.

Consideraciones a tener en cuenta:

.. El tamaño máximo recomendado de una página no debe superar los 30 kb,

actualmente se está trabajando con un estándar de 60 kb.

.. Algunos expertos consideran que una página debe ocupar máximo el

especio de dos pantallazas, sin embargo, todavía no hay un consenso en cuanto a
la altura de los documentos.

.. Se toma como ancho base la resolución que utilicen los monitores. Según
www.thecounter.com, el 47% de las personas tiene monitores entre 14 y 15
pulgadas, los cuales cuentan con una resolución de 800*600 pixeles. Además,
afirma que el 40% de los computadores usados para navegar tienen una
resolución de 1024*768 píxeles.

Nota: Para Colombia, son más populares los monitores de 14 y 15 pulgadas, y se

trabaja a una resolución generalmente de 800*600.

Si diseña a una resolución mayor sus páginas, aparecerán barras de Scroll para
desplazarse por el resto del contenido.

.. No utilice letreros que digan al usuario que el sitio que están viendo se verá
mejor si utilizan una resolución de 800*600 o que se aconseja tener el navegador
tal, lo anterior espantan al visitante.

El experto Thomas Powell en su libro Diseños de sitos Web, menciona dos tipos
de páginas Web:
.. Principales o de inicio: Páginas de entrada al sitio, son claves para que el
usuario regrese y se basa en renovar la información de esta página.

.. Paginas interiores o subpaginas: Se desarrollan los contenidos propuestos

de la página principal.

.. Ventanas flotantes que van en las páginas interiores generalmente, su

función es mostrar datos relacionados de un enlace y las páginas de búsqueda,
que se usan para ofrecer los resultados de una herramienta de búsqueda.
ZONAS DE UNA PÁGINA

8
7
5

1
2
3
4
6
Descripción de cada zona

1
Área editorial o de contenido

Aquí se desarrolla todo el contenido: noticias, titulares, descripciones y reseña

histórica, entre otros. Comprende la parte central de las páginas, algunas
empresas la dividen en dos columnas de tamaños diferentes para incluir material
gráfico y fotografías de respaldo.

En esta área pueden mezclarse varios tipos de contenidos que hablen del mismo
tema. Por ejemplo, una página que presenta un cuaderno podría tener su
descripción (con características y precios) junto a comentarios de sus usuarios y
enlaces a páginas de productos relacionados como esferos o lápices.

2
Textos

Hay que tener especial atención en la letra de las páginas Web. Recomiendan
usar fuentes planas que carezcan de adornos, tales como: Verdana, Tahoma y
Arial.

El tamaño más usado es de 2 píxeles, que en Word equivale a una letra de

tamaño 11 o 12.

El color de letra recomendado es negro sobre un fondo blanco, el uso de fondos

negros con letras claras sólo mortifica al lector.

Para los enlaces (hipervínculos) a otras páginas Web, el color estándar es el azul
y el estilo subrayado. Hacerlo de otra forma confunde al usuario.

No haga que todo el texto que quiere mostrar quede en una página, si hay mucha
información se recomienda convertir este texto en un archivo para que el usuario
lo descargue.

3
Barra de navegación
Contiene la lista de vínculos de las secciones y servicios principales del sitio d
e
Internet, se ubica a la izquierda de la página y brinda una visión global de su
estructura.

Utilice para esta barra nombres cortos, en lo posible de una sola palabra. Que
sean directos, es decir permitan deducir que es lo que va a encontrar y no utili
zar
modismos propios de nuestra región.
Por ejemplo, si alguien ve el titular Deportes el usuario sabrá que ahí encontrará
una sección que habla sobre el tema, por el contrario cositas ricas podría
significar para alguien: sitios pornográficos, comida, chismes, entre otras.

Según Jacob Nielsen experto en el tema, recomienda que los vínculos de esta
barra estén en orden alfabético para que los visitantes tengan una opción lógica
de la información a encontrar. Sin embargo, algunos recomiendan priorizar de
acuerdo con la importancia de de sus secciones más visitadas.

4
Imágenes

Estas son uno de los mayores inconvenientes a la hora de diseñar una página
Web, su uso excesivo termina por hacer lenta su carga en los navegadores.

Las imágenes se utilizan especialmente en:

.. Los gráficos del cabezote

.. Los botones de herramienta de búsqueda
.. Banners publicitarios
.. Títulos de las secciones
.. Fotografías de soporte
.. Animaciones con flash o gif

Actualmente, la mayoría de los sitios Web consideran que el peso máximo de una
página Web debe ser de 60 Kb. Una imagen con un tamaño mediano con
seguridad duplica esta cifra.

Por ello, los sitios de comercio electrónico donde el usuario necesita conocer los
productos, se recomienda anexar pequeñas imágenes a la página del artículo, con
enlaces a ventanas emergentes que muestran fotos más grandes.

Los formatos recomendados para trabajar son GIF y JPEG. Según, Andrés
Arboleda, trabajador de la empresa AXESNET menciona que una imagen debe
pesar como máximo 20 Kb.
5
Banners

Son utilizados para hacer una promoción animada de un producto. Se utiliza para
su construcción el software FLASH generalmente o en algunos casos versiones
alternativas en formato GIF.
Actualmente, se utilizan frases directas con vínculos (en lugar de imágenes) para
mejorar la velocidad de la página.

Empresas como TERRA fijaron el peso máximo de cada BANNER entre 12 y 15

Kb para un tamaño de 468*60 píxeles y solo permiten hasta dos por cada página.

6
Barra derecha

Se le conoce también como BARRA DE ENLACES ESPECIALES , se utiliza

para secciones que no son fijas.

El uso de esta barra va de acuerdo con las necesidades de cada empresa.

Algunas por ejemplo, la utilizan para promocionar sus tiendas en línea y separar
su área comercial de la editorial.

Empresas de noticias la emplean para poner allí sucesos de última hora, o la

utilizan incluso para poner banners publicitarios o herramientas de búsqueda.

Nota: Si el área editorial necesita más espacio en las páginas interiores pueden
desaparecer.

7
Herramientas de búsqueda

Se utilizan para que los usuarios encuentren información o los productos que
necesitan, para ello se utilizan palabras claves.

Se basan en su sencillez y simplicidad. No utilice nunca nombres que confundan

por ejemplo: un usuario entiende más fácil si coloca una casilla para escribir texto
con un botón que dice buscar que cuando emplea un letrero que diga Encuentre
su producto haciendo clic aquí .

No restrinja tampoco la búsqueda de la información colocando una lista que

contenga buscar por: titulo, autor, editorial
 El éxito de amazon radica en que se puede escribir cualquier cosa para la
búsqueda . Recuerde también que la ortografía es una parte integrante de muchos
de nosotros o que sepan la palabra exacta de lo que quieren buscar, una
herramienta tan poco flexible, que no permita caracteres especiales sin duda no
contribuye a que el usuario la utilice.
8
Cabezote

Aquí se ubica el logotipo de la empresa y los elementos permanentes de

navegación del usuario. Siempre va en la parte superior de la página y muestra los
colores que identifican la compañía.

No debe ser un elemento estático de decoración, una parte de él puede tener

enlaces a servicios asociados (archivos), a algunas secciones o la sección de
ayuda.

En las páginas interiores el logotipo siempre debe tener un enlace a la página de

inicio, es definitivamente el medio para que un usuario perdido se escape.

El tamaño del cabezote no debe ser tan grande que elimine espacio para la
información, ni tan pequeño para que no se vea.

Terra Colombia sugiere que las medidas máximas sean de 476 píxeles de ancho
por 70 píxeles de altura.

Es un sitio ideal para poner la fecha y el lugar de origen del sitio Web.

El presente documento está basado en un articulo publicado en la revista

ENTER edición Nro 56.