¿Como puedo ver mi pagina Web en cualquier ordenador sin que la imagen se distorsione?
Acabo de terminar mi página web y al probarla en otra maquina con otra configuración de pantalla en esa maquina se distorsiona la vista de mi página, me dicen que hay algún código el cual puedo anexarle a mi página para que así, abriéndola en cualquier Pc con cualquier config. No se distorsione, ¿Qué puedo hacer?
1 respuesta
Respuesta de duogh
1
Es una explicación larga que la saque de yomaster. Te mandaría a tu correo pero no lo se. Espero te ayude
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.
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:
Crear una carpeta principal donde estará alojado el sitio web Ej. "miweb"
Dentro de mi web crear una carpeta llamada "imágenes" donde estarán las imágenes, 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.
Se crean dos carpetas llamadas es640480 y es1024768 dentro de "miweb"
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.
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.
Igualmente, se cambian la configuración del monitor a 1024x768 y se abren los archivos htm que corresponden, se editan y se guardan.
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.
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.
Pégalo como "Pegado especial" como "Tratar como HTML" en la vista Normal
<script language="JavaScript1.2">
/*
Diferentes versiones según la resolución
(Por Miguel Cruz, http://www.signo-net.com)
*/
//para resolucion 800x600
if (screen.width==800||screen.height==600)
window.location.replace("es800600/index.htm")
// para resolucion 640x480
else if (screen.width==640||screen.height==480)
window.location.replace("es640480/index.htm")
//para resolucion 1024x768
else if (screen.width==1024||screen.height==768)
window.location.replace("es1024768/index.htm")
//para otras resoluciones
else
window.location.replace("es1024768/index.htm ")
</script>
Recuerda que este código hace referencia a los archivos index.htm y no en index.html
o sea, con la diferencia de la letra L
debes de modificar el código si tus páginas contienen la letra L
Recomendamos meterlo dentro de una celda para localizarlo mejor.
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 cgi 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.
<<<<< Paso por paso >>>>>
Debes de crear estas tres carpetas en tu carpeta raíz (donde está todo lo que concierne a tu Web)
Crea una carpeta llamada es800600
Crea una carpeta llamada es640480
Crea una carpeta llamada es1024768
Empieza a crear la Web configurando antes tu monitor con la resolución de 800X600
Abre un nueva página e inserta algo en ella y la guardas como index.htm dentro de la carpeta es800600
A partir de aquí, puedes crear una Web guardando todas la páginas en dicha carpeta y siempre con la resolución que te dije (800X600).
Las imágenes y otros archivos las puedes meter donde quieras, esto no interfiere nada para este código.
Cuando termines la Web en esta carpeta (es800600) seleccionas todas las páginas que en ella insertaste, las copias y pegas en otra carpeta, por ejemplo en la de es640480 y vuelves a cambiar la resolución de tu monitor por la que corresponde, que será 640X480
Entonces debes de visionar todas las páginas de esta nueva carpeta (es640480) y reajustar su contenido de cada una de ellas a la nueva resolución.
Cuando termines con todas las modificaciones, haz lo mismo para la siguiente carpeta que será (es1024768) reajustando las páginas que en ella se encuentren a la resolución de 1024X768
Ahora, lo que nos falta es crear la página con el código que redireccionará al visitante a la carpeta correspondiente según sea su resolución.
Este código lo insertas dentro de las etiquetas <body> y </body> y guardas la página en la carpeta raíz... es aconsejable que sea la index.htm para que redireccione al visitante a la página index.htm de la carpeta que corresponda a su resolución.
Más claro... la página index.htm del Web (en carpeta raíz) redireccionará al visitante a la index.htm de la carpeta que corresponde a su resolución.
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.
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:
Crear una carpeta principal donde estará alojado el sitio web Ej. "miweb"
Dentro de mi web crear una carpeta llamada "imágenes" donde estarán las imágenes, 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.
Se crean dos carpetas llamadas es640480 y es1024768 dentro de "miweb"
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.
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.
Igualmente, se cambian la configuración del monitor a 1024x768 y se abren los archivos htm que corresponden, se editan y se guardan.
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.
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.
Pégalo como "Pegado especial" como "Tratar como HTML" en la vista Normal
<script language="JavaScript1.2">
/*
Diferentes versiones según la resolución
(Por Miguel Cruz, http://www.signo-net.com)
*/
//para resolucion 800x600
if (screen.width==800||screen.height==600)
window.location.replace("es800600/index.htm")
// para resolucion 640x480
else if (screen.width==640||screen.height==480)
window.location.replace("es640480/index.htm")
//para resolucion 1024x768
else if (screen.width==1024||screen.height==768)
window.location.replace("es1024768/index.htm")
//para otras resoluciones
else
window.location.replace("es1024768/index.htm ")
</script>
Recuerda que este código hace referencia a los archivos index.htm y no en index.html
o sea, con la diferencia de la letra L
debes de modificar el código si tus páginas contienen la letra L
Recomendamos meterlo dentro de una celda para localizarlo mejor.
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 cgi 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.
<<<<< Paso por paso >>>>>
Debes de crear estas tres carpetas en tu carpeta raíz (donde está todo lo que concierne a tu Web)
Crea una carpeta llamada es800600
Crea una carpeta llamada es640480
Crea una carpeta llamada es1024768
Empieza a crear la Web configurando antes tu monitor con la resolución de 800X600
Abre un nueva página e inserta algo en ella y la guardas como index.htm dentro de la carpeta es800600
A partir de aquí, puedes crear una Web guardando todas la páginas en dicha carpeta y siempre con la resolución que te dije (800X600).
Las imágenes y otros archivos las puedes meter donde quieras, esto no interfiere nada para este código.
Cuando termines la Web en esta carpeta (es800600) seleccionas todas las páginas que en ella insertaste, las copias y pegas en otra carpeta, por ejemplo en la de es640480 y vuelves a cambiar la resolución de tu monitor por la que corresponde, que será 640X480
Entonces debes de visionar todas las páginas de esta nueva carpeta (es640480) y reajustar su contenido de cada una de ellas a la nueva resolución.
Cuando termines con todas las modificaciones, haz lo mismo para la siguiente carpeta que será (es1024768) reajustando las páginas que en ella se encuentren a la resolución de 1024X768
Ahora, lo que nos falta es crear la página con el código que redireccionará al visitante a la carpeta correspondiente según sea su resolución.
Este código lo insertas dentro de las etiquetas <body> y </body> y guardas la página en la carpeta raíz... es aconsejable que sea la index.htm para que redireccione al visitante a la página index.htm de la carpeta que corresponda a su resolución.
Más claro... la página index.htm del Web (en carpeta raíz) redireccionará al visitante a la index.htm de la carpeta que corresponde a su resolución.
