Definiciones de pantalla

  • Por
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.

Actualizado: En el momento actual el panorama de definiciones de pantalla ha cambiado bastante. Estamos en 2010 y este artículo fue escrito en el año 2000. Actualmente la gran mayoría de los internautas navegan con monitores que igualan o superan la definición de 1024x780. Por ello la resolución objetivo de la mayoría de los proyectos web actuales es de 1024x780 píxeles.

En 2010 todavía hay un ligero porcentaje de usuarios (en torno del 2%) que utilizan resoluciones de 800x600, pero es suficientemente escaso para que no se tenga en cuenta. Esto se puede apreciar en alguno de los post que publicamos cada poco con rankings de las resoluciones de pantalla.

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.

  1. 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.
  2. 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.
  3. 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.
  4. Si deseamos incluir márgenes en las páginas, podemos jugar con los atributos cellspacing y cellpadding, en la tabla principal, para conseguirlos. En caso de que no nos guste este método podemos incluir celdas adicionales en la tabla principal, que sean transparentes (no meterles contenido), a las que les asignamos los tamaños deseados para los márgenes. El método que utilizo habitualmente es este último y casi siempre pongo los atributos cellspacing y cellpadding a cero.
El código de una página siguiendo estos consejos sería el siguiente:

<html>
<head>
   <title>Título</title>
</head>

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>

<table width=779 bgcolor=eeeeee cellspacing=0 cellpadinng=0 border=0 align=center>
<tr>
<td width=10></td>
<td>
<h1 align="center">Título de la página</h1>

Este es el cuerpo de la página
<p>
Más página
<p>
Y más..
<p>
<div align="center">
Barra | Navegación | Enlaces | Links
</div>
<br>
</td>
<td width=10></td>
</tr>
</table>
</body>
</html>


Eso es todo, recuerda que siempre puedes ver el código fuente de las páginas web que te gustan, para ver cómo lo han hecho otros diseñadores.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Guillermo Grande

16/11/2001
Decir que las ventas de nuevos monitores y equipos esta cambiando a un ritmo rápido la resolución a 1024x768 (fuente: http://www.nedstat.com/images/grafiek.jpg), por lo que una buena idea para que la web sea visible en varias resoluciones es diseñar las tablas en pixeles a la resolución menor y luego *alinearlas* de forma que cuando un usuario ve la página a una resolución menor de la que fue diseñada tan sólo aprecia cambios en el tamaño de los márgenes, no en la presentación de los contenidos.

darkside

27/10/2004
cambiando mi resolucion a 640 y creando mi pagina bajo esta resolución, permitira que todos los usuarios la visualicen adecuadamente?

Wilson Javier Peláez

02/4/2006
Aunque el maquetar una web empleando las tablas es lo que mas empleamos los diseñadores, no es lo adecuado pues las tablas son elementos contenedores de información mas no son de diseño. Lo recomendable sería diseñas empleando css y capas.

Yunner Moreno

19/8/2006
Sobre la resolución de la pantalla les recomiendo que trabajen en la más estandar o en la más baja, con el objetivo que si trabajamos en una resolución baja (por ejemplo la de 800X600) con tablas en pixeles que ocupen todo es espacio posible con el borde 0 (cero), y que dentro de ella tengamos otra tabla que es la que llevará en si la información, al cambiar la resolucion a una más alta (por ejemplo 1024X768) la pagina se verá completa, sufrirá cambio los espacios de margen, pero no tu pagina, es decir se puede ver siempre y cuando trabajes en una menor para que una mayor la pueda visualizar, si lo hacen al contrario va haber perdida de información.
Vale recordar que todo los monitores traen la resolución de 800X600 hasta los de pantalla LCD, TFT entre otros.
Cuando esten diseñando juegen con la configuración de la pantalla de su equipo o abran pagina web de sitios muy conocidos y cambien la resolución de su monitor para ver que efecto sufre la pagina y si es rentable pueden mirar el codigo de esa pagina.

Espero que este comentario les aya servido de algo.

Lluís

19/6/2007
Creo que la siguiente parte del código es incorrecta:

<table width=779 bgcolor=eeeeee cellspacing=0 cellpadinng=0 border=0 align=center>

Ya que bgcolor necesita # y el valor #eeeeee no lo puede tomar como máximo tomará #ffffff

enric_barrios_calderer

08/10/2009
imagen que ocupe todo el ancho de la tabla
Una pregunta: si yo quiero insertar una imagen que ocupe todo el ancho de la tabla de 779 píxels, de que tamaño debo crear la imágen de ancho, de 779 o menos?

Gracias,
Enric

julio

28/7/2010
Buen inicio
Muy buen inicio para alguien que parte desde cero. Muy fácil de entender.

camilo lopez

17/12/2010
publicidad
AQUÍ ESTA LO NUEVO, W-EL PRIMO, RAP Y REGUETOON UNICO 2011
VISITENOS A LA PÁGINA:
http://potenciadelamanodura.jimdo.com Y DEJANOS TU COMENTARIO?

fredii

17/4/2011
duda
e visto algunas paginas de
estas mas de musica
y chequee el codigo fuente de esta para ver
como hacia para que se acople tanto en
una pantalla de 800x600
y a una de 1600x1200
en las dos ocupa toda la pantalla probado en los 3 browser mas
conocidos,,
mi duda es como hacen esto ya que vi su codigo y ellos no usan estas tablas
si no divs o capas,, que codigo se pondria para que se acople a tantas resoluciones de pantalla?¿?

andres

23/5/2011
sexo
no hay nada pero la mujer esta sexy de echo quiero tener soxo con ella ya me inagino ella desnuda montada ensima nio tenienda sexo ella grita aci papi dale mas mas fuete si haci dale dale osi osi y ella antes de que yo llegara se msturva

henrry david guerrero vargas

20/1/2012
convertir en pdf
Doy un concejo como usuario y transito para las distintas informaciones transmitidas en esta web..... Doy prueba q es una exelente web a cuanto diseño se trata y consejos"" pero deberias tener en cuenta pasar todos estos consejos en un maual pdf.. como la hacen las demas paginas es decir no convertirteen ellas si no tratar de hacer una competencia agil y directa para un mejor servicio a la hora de tocar estos temas ya q esto no quita publicidad a lo contrario t aumenta mas la popularidad y quien no quiere eso.... exelente sigue asi

espero tu respuesta
henrry guerrero
henrrydavid_guerrero@hotmail.com
guerrahgv@hotmail.com
guerrahgv.blogspot.com