Optimización de la página web para todas las resoluciones

Optimización de la página web para todas
las resoluciones
Actualmente casi todas las páginas están optimizadas
únicamente para una resolución de 800 x 600 píxeles, y
aunque la mayoría de equipos actualmente están
configurados a dicha resolución, los monitores más antiguos
no soportan más de 640 x 480 píxeles, y por el contrario,
los equipos de última generación suelen tener configurado el
monitor a 1024 x 768 píxeles, y pueden soportar hasta 1280
x 1024.
Por Miguel Cruz
Artículos publicados: 3
Valoración media: 3.7/5
Usuario desde: 22/12/2002
La optimización de una página únicamente a una
resolución de 800 x 600 píxeles, puede llegar incluso a ser
algo más que molesto para monitores de 640 x 480 píxeles, e incluso llegar a imposibilitar la
navegación cuando se desactiva la opción de scroll de página en webs desarrolladas con
frames.
Para solucionar este problema existe una posibilidad y aunque es un poco laboriosa,
merece la pena ya que se consigue tener un sitio web optimizado para todas las resoluciones
que se deseen.
Para ello es muy importante una buena organización desde el principio. La estructura
de las carpetas si es la adecuada como se explica a continuación, permitirá ahorrar mucho
trabajo, ya que evitará tener que renombrar archivos, editar vínculos y repetir imágenes que
aumentan innecesariamente el tamaño del sitio con la consiguiente pérdida de tiempo al
subirlos.
Para ello se recomiendan los pasos siguientes:
1. Crear una carpeta principal donde estará alojado el sitio web Ej. "miweb"
2. Dentro de miweb crear una carpeta llamada "imágenes" donde estarán las imágines,
otra llamada "sonidos" donde estarán los sonidos, "videos"y así sucesivamente según
los recurso a utilizar. A continuación se crea una carpeta llamada es800600. Esta
última carpeta contendrá sólo los archivos htm, php , cgi del sitio web que serán
creados con una resolución de monitor de 800 x 600 píxeles.
3. Se crean dos carpetas llamadas es640480 y es1024768 dentro de "miweb"
4. Una vez que se tiene desarrollado el sitio web optimizado a 800x600 y se tiene ya la
versión definitiva, se copia el contenido de la carpeta es800600 y se pega dentro de
es640480 y es1024768.
5. Se cambia la configuración del monitor a 640x480 y se abren los archivos de la
carpeta es64048, sólo habrá que volver a editarlos, principalmente es un trabajo de
ajuste de tablas. NO HAY QUE RENOMBRAR LOS ARCHIVOS NI CAMBIAR LOS
ENLACES.
6. Igualmente, se cambian la configuración del monitor a 1024x768 y se abren los
archivos htm que corresponden, se editan y se guardan.
7. Si se desea crear una versión en inglés, sólo habrá que copiar las tres carpetas que
empiezan por las letras "es", renombrar el comienzo por "en" y sustituir el texto por
la versión inglesa, pero las imágenes no habrá que volver a subirlas, ni cambiar los
enlaces ni los nombres de los archivos.
8. Crear el archivo principal de la página que está dentro de "miweb" y fuera de las
anteriores carpetas. Dicho archivo principal, index.html debe contener el siguiente
código en el body.
9.
<script language="JavaScript1.2">
10.
/*
11.
Diferentes versiones según la resolución
12.
(Por Miguel Cruz,
http://www.signo-net.com)
13.
*/
14.
//para resolucion 800x600
15.
if (screen.width==800||screen.height==600)
16.
window.location.replace("es800600/index.html")
17.
18.
// para resolucion 640x480
19.
else if (screen.width==640||screen.height==480)
20.
window.location.replace("es640480/index.html")
21.
22.
//para resolucion 1024x768
23.
else if (screen.width==1024||screen.height==768)
24.
window.location.replace("es1240768/index.html")
25.
26.
//para otras resoluciones
27.
else
28.
window.location.replace("es1240768/index.htm ")
29.
</script>
30. Ahora automáticamente el archivo principal index.html detectará la configuración del
monitor del cliente y se cargará la versión correspondiente en función de la
resolución detectada.
NOTAS:
Aunque hay tres carpetas para tres resoluciones, las carpetas de recursos (imágenes,
sonido, video), son únicas, incluso si hacemos una versión en inglés, con lo que se ahorra
espacio al no existir archivos repetidos y además, al sustituir una imagen, por ejemplo, ésta
será sustituida en las tres versiones.
Asimismo hay servidores donde los cgis no funcionan fueran de la carpeta cgi-bin, con
lo cual se complicará un poco el trabajo teniendo que modificar enlaces y renombrar archivos
que era lo que se pretendía evitar.
Se puede añadir una cuarta carpeta: "otros" para añadir una cuarta versión de
resolución que se cargará cuando no se cumple ninguna de las tres resoluciones anteriores,
debido a que el monitor tiene una resolución mayor. Si no se va a realizar una cuarta
versión, que tampoco recomiendo, ya que con tres versiones está bastante aceptable, dejar
la versión para la resolución mayor que tengamos, ya que si no cumple ninguna de esas tres
resoluciones será porque, lo más probable es que tenga configurado el monitor para una
resolución mayor.
Bio:
Miguel Cruz Martínez es desarrollador web de aplicaciones avanzadas tales como e-comerce, contenidos
dinámicos, bases de datos y tecnología wap. Trabaja desde 2000 en signo-net, empresa de creación
propia (www.signo-net.com) dedicada a las nuevas tecnologías y ubicada en Sevilla (España).
Otros artículos recientes de este autor:


Javascript. Imagen roll over para envío de formularios.
Javascript. Añadir a favoritos con flash, imagen, botón o texto.
Fecha publicación: 22/12/2002