Foro de Ayuda IntercambiosvirtualeS

Foro de Ayuda IntercambiosvirtualeS (https://www.intercambiosos.org/index.php)
-   Tutoriales & Videos Tutoriales (https://www.intercambiosos.org/forumdisplay.php?f=72)
-   -   Tutorial de resolucion de pantalla (Diseño web) (https://www.intercambiosos.org/showthread.php?t=15108)

Rekker 20-ene-2011 00:36

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.


Eloy58 20-ene-2011 07:37

Gracias amigo Rekker.

Saludos.

baduser 20-ene-2011 10:50

graciasssss, muy util !!!!

rodrigo40 01-nov-2023 19:35

te recomiendo este lugar si quieres aprender mejorar en web y diseño y seo web: https://posicionamiento-web-barcelona.com/

anthrax 02-nov-2023 04:08

Cita:

Iniciado por rodrigo40 (Mensaje 438775)
te recomiendo este lugar si quieres aprender mejorar en web y diseño y seo web: https://posicionamiento-web-barcelona.com/

lee las normas amigo, no puedes poner enlaces a otras web's, es considerado como spamm


La franja horaria es GMT -4. Ahora son las 20:38.

Desarrollado por: vBulletin® Versión 3.8.1
Derechos de Autor ©2000 - 2024, Jelsoft Enterprises Ltd.

Ad Management by RedTyger