Ver Mensaje Individual
Antiguo 20-ene-2011     #1
Predeterminado Tutorial de resolucion de pantalla (Diseño web)


Al diseñar una web nos encontramos con el problema de que se vea bien en todos los monitores.
En mi caso mi resolucion es 1024*768 y al intentar ver mi diseño en el pc de mi novia se veia muy diferente a lo que habia diseñado (resolucion 1280*768)
Con este tutorial no te preocuparas mas por eso.
Ya que al entrar automaticamente detectara la resolucion y se acoplara a ella.

Empezemos:

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 html 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.

Código PHP:
<script language="JavaScript1.2">
/*
Diferentes versiones según la resolución
*/
//para resolucion 800x600
if (screen.width==800||screen.height==600)
window.location.replace("es800600/index.html")

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

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

//para otras resoluciones
else
window.location.replace("es1240768/index.html ")
</script> 
9. 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.

saludos.


Responder Citando
Los siguientes 2 usuarios agradecen a Rekker por este mensaje:
baduser (20-ene-2011), jchierro (20-ene-2011)