PDF de programación - Diseño web

Diseño Web

Tabla de Contenidos

odipáR oseccA le arap oñesi

B

sacitcárP saneu

D

D

D



Normas Mínimas para Facilitar el Acceso Vía Conexión Telefónic

sanigáP sal ed oseP .1
sanigáP sal ed nóicamargaiD .2
hsalF ne senoicatneserP ed osU .3
»semarF« o socraM ed osU .4
»dnuorgkcab« ed senegámI ed osU .5
sodaucedA »sgat atem« ed osU .6

Normas para Incorporar Elementos Grácos y Multimediales
I
dadilibareporetn

selanoicanretnI seradnátsE

dadilibiseccA al arap oñesi

B

sacitcárP saneu

sodadnemoceR socincéT seradnátsE
selanoicanretnI seradnátsE

oirausU led aicneirepxE al ed oñesi

nóiccaretnI ed amargaiD ed ollorraseD
Principales Actividades a Desarrollar en el Sitio
Pr

secafretnI e sametsiS ed sabeu
Pr
Pr

sacitsírueH sabeu
dadilibasU ed sabeu

soirausU sol a redneta omóC

kcabdeeF rareneG arap sametsi
S
F
oitiS led soiralumro
sedadevoN y saicitoN ed seniteloB
Sistemas para Recibir y Administrar Mensajes de Usuarios
Ocina de Información, Reclamos y Sugerencias (OIRS)
setraP ed anicifO
senoicacinumoC ed aerÁ
acitámrofnI ed aerÁ

Diseño Web

D iseño para el Acceso Rápido
Una de las características que hace tan popular a la tecnología web es su facilidad para mostrar
contenidos de manera gráca y para vincular de manera fácil documentos de diferentes orígenes.
No obstante, para que esta simpleza pueda darse efectivamente, es necesario que quienes desarrollan
sitios y contenidos en esta plataforma, cumplan con ciertos estándares que aseguren que la mayor
parte de los usuarios podrán ver lo que se publica.

Para ello, es de suma importancia que los sitios que se construyan cumplan efectivamente con
ciertas características de publicación que permitan conseguir dos objetivos muy concretos:

• Q ue las páginas se desplieguen rápidamente y sin dicultades técnicas en los computadores

• Q ue las páginas puedan ser visualizadas por los usuarios de la misma manera en que sus

de los usuarios;

autores las han construido.

Para conseguir ambos objetivos, es necesario que quienes construyan los sitios web hagan uso de
un conjunto de buenas prácticas que se han obtenido de la experiencia en la construcción de este
tipo de contenidos digitales, y también, que se aseguren de cumplir con estándares mundiales en
este ámbito, los que serán presentados en este capítulo.

Buenas Prácticas
Agrupamos en esta área una serie de recomendaciones extraídas de la experiencia en el desarrollo
de sitios web de todo tipo, que permiten asegurar una buena experiencia de los usuarios que los
visitan.

> Normas mínimas para facilitar el acceso vía conexión telefónica
La visualización de los sitios web depende de la transmisión de datos entre dos computadores, por
lo que es importante optimizar la cantidad de información que se envía entre ambos, de tal manera
que quien la recibe pueda verla adecuadamente.

Lo anterior se expresa en cinco áreas de recomendaciones muy concretas:

1. Peso de las Páginas
Los sitios web deben tener un peso máximo permitido por página que no supere una cantidad
razonable de kilobytes (kb) que impidan su visualización. En este sentido, lo «razonable» dependerá
directamente del tipo de sitio que se esté desarrollando y de la conexión con la que cuente la
mayor parte de los usuarios.

Por ejemplo, si se trata de un sitio dedicado a usuarios de regiones extremas que tienen una
conexión muy lenta, 50 kb será un tamaño considerable, respecto de si se compara eso con usuarios
que se conecten en una ciudad del centro del país.

Diseño Web
No obstante, se puede estudiar cuánto se demora en que una página llegue completamente al
computador de un usuario si se calcula lo siguiente:

A. Si un módem transmite a 56 kbps (kilobits por segundo) signica que por cada segundo
de transmisión, en condiciones ideales, es capaz de enviar 7 kb (kilobytes) de información.

B. Si una página pesa 70 kb, en condiciones ideales demorará 10 segundos en aparecer completa

en el computador del usuario.

C. Aunque no hay información técnica consistente para establecer la velocidad promedio de
un módem, puesto que depende de diversas variables técnicas, la experiencia indica que
éstos se conectan habitualmente a la mitad de su valor declarado. Entre las variables que
afectan la calidad de la conexión se cuentan la capacidad del computador, la congestión de
las redes y el nivel de visitas del servidor, entre otras.

D. Dado lo anterior, la página de 70 kb señalada en el ejemplo anterior, tardaría 20 segundos

en desplegarse completamente.

Con esa evidencia, la pregunta que debe hacerse cualquier desarrollador de sitios, es si sus usuarios
estarán dispuestos a esperar todo el tiempo que se demora una página web en bajar completamente.

Como lo más probable es que la paciencia de los usuarios se agotará más rápido que su deseo por
acceder a la página que tarda en desplegarse, es necesario preocuparse de que el tamaño de las
páginas siempre tienda a bajar y no a aumentar.

Las normas internacionales al respecto indican que un usuario no esperará más de:

•
•
•

5 segundos para que aparezca algo visible en la pantalla
10 segundos para que aparezca algo legible en la pantalla
30 segundos hasta hacer un click hacia otra parte del sitio o hacia otro sitio

Nota: El rendimiento de una conexión a Internet nunca es del 100%. Hay que
tener en cuenta que en estos tipos de conexiones (Módem analógico, RDSI, ADSL)
se utilizan diversos protocolos (PPP, TCP/IP) que ocupan ancho de banda (entre
un 2% y un 20% del 100% total, según el tipo de conexión y protocolo utilizado),
con lo que se reduce el ancho de banda útil para la descarga de datos. El resultado
que se muestra en las pruebas de velocidad de conexión existentes (por ejemplo en
http://testacceso.es.tdatacenter.com/) corresponde al ancho de banda útil, esto es,
equivale a la velocidad de transferencia de información, y no a la velocidad de
acceso. Adicionalmente, existen otros factores que no pueden ser medidos y que
contribuyen a reducir la velocidad de la conexión, como son la congestión en la
red, interferencias electromagnéticas, etc., que también afectan al resultado nal.

2. Diagramación de las Páginas
Aunque existen nuevas tecnologías para la diagramación de las páginas web (como las Hojas de
Cascadas de Estilo o CSS), lo habitual es que los contenidos que se muestran se dispongan en
tablas con el n de que cada elemento ocupe el lugar que se le ha asignado dentro de la página.

Diseño Web
Al respecto se recomienda construir una estructura de presentación de los contenidos que se
pueda fragmentar en varias tablas.

De esa manera, cuando el sitio se presente en el programa visualizador del cliente, siempre mostrará
la primera tabla (que normalmente llevará el logotipo y la identicación del sitio) de manera
rápida, dando al usuario la sensación de haber llegado al destino elegido. Luego en las siguientes
tablas se van poniendo los restantes elementos del sitio.

En la gura 1 se puede ver que el sitio está construido en tres tablas, de acuerdo al siguiente orden:

Tabla 1: Muestra el logotipo de la institución, la fecha y el menú del sitio.
Tabla 2: Muestra las Secciones del Sitio más los contenidos de diferente nivel.
Tabla 3: Muestra el pie de la página con la identicación corporativa de la institución.

Figura 1: Ejemplo de tablas para separar contenidos y conseguir despliegue rápido.

H ay que recordar que los estudios sobre acceso a Sitios Web indican que el usuario espera que al
primer segundo después de haber hecho clic sobre un enlace o haber ingresado una dirección en
un programa visualizador, ya quiere ver alguna reacción y notar que algo está ocurriendo.

Por lo anterior se debe evitar a todo lugar las tablas generales que incluyen en sí mismas a otras
(tablas anidadas), ya que el programa visualizador usará una parte del tiempo en calcular esa
relación de dependencia entre las tablas, antes de mostrar algo útil en la pantalla.

En la gura 2 se puede ver que el sitio está construido en tres tablas interiores, que son agrupadas
por una tabla general; también en la zona de Contenido 1 se dispuso una tabla que permite incluir
una foto junto al contenido:

Diseño Web

Figura 2: Ejemplo de tablas anidadas que dicultan el despliegue rápido

3. Uso de Presentaciones en Flash
Si se desea hacer una presentación en tecnología Flash de Macromedia para la portada del sitio, se
recomienda no hacerlo directamente en la portada. Un ejemplo concreto de hacerlo se muestra en
la siguiente imagen:

Figura 3: Ejemplo de página inicial para evitar la Presentación en Flash

Diseño Web

La razón para evitar el uso de Flash en la portada es que su uso recarga la presentación del
sitio y si la presentación no está bien hecha, puede impedir el acceso de los robots de búsqueda
al interior del mismo. Si eso ocurre, los contenidos del sitio no serán indexados en los
buscadores que emplearán los usuarios para buscar información sobre los temas que la
institución desea comunicar.

La buena práctica en este sentido es ofrecer una portada con la identicación de la institución
y dos enlaces: uno para ver la presentación y otro para ingresar directamente al sitio.
Adicionalmente se debe ofrecer la información que sea necesaria para que los usuarios puedan
ver el contenido sin experimentar problemas; dentro de esto se cuenta un enlace para obtener
el plug-in necesario.

D ado lo anterior y como pocos usuarios estarán dispuestos a ver repetidamente la
presentación, se recomienda utilizar esos recursos en el interior del sitio, para mostrar con
una tecnología de animación aquellos contenidos en los que desee poner énfasis o para
explicar procesos que grácamente resulten atractivos y que en texto sea difícil dar a conocer.

4. Uso de Marcos o «Frames»
La tecnología de marcos o «frames» consiste en agrupar varios ar