Definiciones de pantalla

En la web, hay que tener en cuenta que van a visitarnos muchos usuarios, con definiciones de pantalla distintas. Hay que hacer páginas que se visualicen bien en todos los casos. Veamos cómo.

Cuando trabajas a distintas definiciones, como en la web, debes elegir el publico objetivo de la página y construirla para que ese público la vea bien, pero no te debes olvidar de los demás, de modo que estos también la visualicen, a ser posible, sin ningún problema.

Por regla general, la mayoría de los internautas disponen de una definición de 800x600 o superior. Por ello, lo habitual es diseñar la web para que ese grupo de usuarios la vea correctamente.

También hay personas que acceden a Internet con definiciones menores, a 640x480, pero cada vez son menos. Para el caso de 1024x780, esta definición es bastante grande y sólo los usuarios con buenas pantallas, configuradas de manera correcta, la usan.

La definición de 1024x780 deja fuera a muchas personas, por lo que no debemos utilizarla todavía, además, estos usuarios podrán ver también la página a definición menor sin demasiado perjuicio. Por su parte, la definición de 640x480 es muy pequeña y ya muy pocos usuarios la utilizan, por ello es mejor diseñar utilizando un espacio mayor. No obstante, si la página a desarrollar es muy corporativa, porque pertenezca a una empresa importante y se tenga que ver bien en todas las máquinas posibles, sería razonable utilizar la definición de 640x480, pues esta nos asegura que todo el mundo podrá ver bien el web.

Una vez escogido el público objetivo, se han de componer las páginas y las imágenes para se vean bien en la definición de pantalla que utilicen estos, de modo que nunca salgan las feas barras de desplazamiento horizontales. Para ello calcularemos el tamaño de los elementos de la página concienzudamente.

Otra cosa que se puede hacer es aplicar a los elementos de la página los tamaños (atributo width) utilizando porcentaje, de este modo, se ajustarán al tamaño de la definición del usuario automáticamente. Sin embargo, las imágenes no soportan el tamaño en porcentajes, es decir, no podemos ajustarlas así automáticamente, y en cualquier caso, no desearemos que la imagen se deforme al alterar artificialmente sus tamaños a través de estos atributos. Así pues, para el caso de las imágenes seguiremos en la necesidad de crearlas sin pasarse del espacio disponible en la definición horizontal del público objetivo.

Vamos a ver cuál sería el modo de trabajo para maquetar una página con tablas.

Hablamos de un diseño con tablas porque casi siempre es más adecuado que un diseño con frames o capas, pero esto es otra discusión.
Crear una tabla al principio de la página, que incluya toda la página, y le asignamos el tamaño en pixels. Dependiendo de la resolución del tarjet de audiencia, el tamaño de la tabla variará, pero siempre serán 21 pixels menos que la definición objetivo. Estos pixels sobrantes se utilizan para las barras de desplazamiento verticales. Por ejemplo, si diseñamos para una resolución de pantalla de 800x600, el tamaño de la tabla será de 779 pixels. En Windows XP las barras de desplazamiento ocupan un poco más que en sistemas anteriores. Antes de la aparición de Winwdos XP, con reservar 20 pixels para las barras de desplazamiento era suficiente.
También se pueden crear las tablas en porcentajes, pero esto hará que la página se estire y se encoja dependiendo de la definición. No es un efecto muy deseable para los diseñadores, porque el efecto de ver la página más estirada o encogida de como la hemos diseñado suele resultar contraproducente, además de significar un esfuerzo extraordinario.

Incluimos en la etiqueta <BODY> de la página los atributos: topmargin=0 leftmargin=0 marginheight=0 marginwidth=0. Estos atributos sirven para eliminar los márgenes de la página y que las tablas se sitúen ocupando todo el espacio de la página. Los dos primeros atributos son para Internet Explorer, los dos siguientes son para Netscape Navigator, tenemos que poner los cuatro para asegurarnos que se vea bien en todos los navegadores más importantes.

Usuarios que han visto este tema también han visto...

- ¿Son rentables los sistemas de afiliación?
- Qué es un certificado de seguridad SSL
- Números naturales en Google y la Web
- Ventajas de usar METAS
- Enlaces patrocinados versus posicionamiento en resultados naturales

- Versión imprimible de este documento

- Enviar por e-mail este documento