Diseño de la web para varias resoluciones.


En los equipos de hoy en día, la resolución a la que se suelen usar las monitores es 800x600 o 1024x768 píxeles. No obstante, en los equipos antiguos la resolución es de 640x480, y en los más modernos puede ser de 1280x1024 o superior. Por ello es conveniente desarrollar varias versiones del mismo sitio web adaptadas a cada monitor, con el fin de que se vean perfectamente. Para ello haremos lo siguiente:

La web la desarrollamos en un monitor de resolución 1024x768, para que al visualizarlo en un monitor similar se vea sin problemas.

Creamos tres carpetas extras en el sitio web. Las llamamos res640, res800 y res1024. Copiamos todo el contenido de la web a res1024. Esta carpeta contendrá la versión 'normal' que hemos creado y no tocaremos sus elementos. Copiamos también el contenido a las otras dos carpetas.

Ponemos nuestro monitor a una resolución de 640x480 píxeles. Abrimos la carpeta res640, y abrimos uno a uno los archivos de esa carpeta con FrontPage. Si se ven bien no los tocamos, y si no se ven como deberían los retocamos y guardamos. No tocaremos nada excepto la posición de los objetos, el tamaño de las imágenes y de las letras, y el tamaño de las tablas.

Hacemos la misma operación con res800, poniendo el monitor a 800x600 píxeles.

Ahora creamos la página principal de la web (normalmente index.html) y nos aseguramos de que contenga el siguiente código Javascript entre las etiquetas BODY:

<script language="JavaScript1.2">
//para resolucion 800x600
if (screen.width==800||screen.height==600) window.location.replace("res800/index.html")

// para resolucion 640x480
else if (screen.width==640||screen.height==480) window.location.replace("res640/index.html")

//para resolucion 1024x768
else if (screen.width==1024||screen.height==768) window.location.replace("res1240/index.html")

//para otras resoluciones
else
window.location.replace("res1240/index.htm ")
</script>

Este script detecta la resolución y carga el archivo index.html de la carpeta que más se adecue a la resolución. La página que contiene este código estará normalmente vacía para que el auténtico index se cargue en ella rápidamente. El código Javascript se estudiará con mayor profundidad en la unidad Programación Javascript, Java, PHP y ASP.








 


Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.