Source: http://dominioyhost.blogspot.com/2009/05/optimizacion-de-la-pagina-web-para.html
Timestamp: 2020-08-03 09:04:53+00:00

Document:
Optimización de la pagina web para todas las resoluciones : DOMINIO Y HOST: AYUDA PARA BLOGGERS Y USUARIOS WEBS
Muchas veces te habrás preguntado cómo hacer para que tu web se vea bien en todo tipo de monitor, y distintas resoluciones de pantalla, o a lo mejor te dijeron que tu página web se ve distorsionada cuanto tu la vez perfectamente. Esto se debe a que no todos los usuarios usan la misma resolución en sus computadores, y otros usan un monitor de mayor o menor pulgadas que el tuyo.
La mayoría o el estandar es usar un monitor de 15 pulgadas con una resolución de 800x600 píxeles, y las web se suelen diseñar para ese estandar. Entonces si deseas que se vea bien en otras resoluciones debes tener en cuanta lo que detallo lineas abajo.
A la hora de elegir entre crear un sitio que se adapte a la resolución del usuario que lo visita o que este tenga fijo la resolución de 800x600, me termino basando en la cantidad de información y estructura del mismo.
Un sitio gráficamente rico, donde el sitio esta armado de trozos de imágenes y animaciones flash, y para poder garantizar el "cross-rowsing" (que se vea bien en distintos navegadores y sistemas operativos) es mas favorable resoluciones fijas, ya que las medidas de posiciones absolutas y relativas entre los distintos navegadores varia para div flotantes por ejemplo haciendo que la cantidad de calculos y de scripts necesarios para mantener la apariencia sea bastante grande.
Pero en sitios informativos donde existe una gran cantidad de textos y no tiene un trabajo complejo con respecto a la grafica, lo ideal es adaptarlo a las distintas resoluciones ya que es mas cómodo a los usuarios y se resuelve con tablas utilizando %.
Utilizar tablas es lo peor que se puede hacer. La manera adecuada de solucionar esto, es utilizar etiquetas <div> para delimitar la estructura del
documento, y hojas de estilos CSS para maquetar (posicionar y definir el
aspecto) de los contenidos.
Es en las hojas de estilos donde se deben definir espaciados en
porcentajes, y tamaños de letras y de determinados elementos en unidades como em y ex, que se ven igual en todas las resoluciones en todas las plataformas.
Además, utilizar tablas hace que la web deje de ser accesible, porque
confunde a p. ej. los lectores para ciegos (JAWS, etc). Las tablas son para datos tabulares, no para maquetar.
En cuanto a las imágenes, lo que se debe hacer es generarlas en el lado
del servidor, mediante programación PHP, JSP o similar. Los Flashes, SVGs y demás se pueden hacer autoadaptables a la resolución de pantalla, así que dan menos problemas en ese aspecto.
La resolución, por supuesto, se detecta usando Javascript.
Con la combinación de HTML, CSS, Javascript y PHP (o similar) que describo ahí arriba sólo hay que programar y diseñar la web UNA vez (eso sí, haciendo regresiones para calcular las ecuaciones que definirán los tamaños adecuados a cada resolución). Después, las hojas de estilos adaptan los espaciados y los textos al tamaño adecuado, y la programación server-side se ocupa de las imágenes. El ahorro en tiempo de desarrollo es abismal. De hecho, es más rápido (y por ende, barato para el cliente) hacer una web así que hacer una web para dos resoluciones (800x600 y 1024x768, p. ej.).
En lo personal suelo generar webs en 800x600, es mas fácil y rápido, a menos que el cliente pida que se adapte a todas las resoluciones donde allí el precio es mucho mayor ya que es mucho mas laborioso.
Otra solución seria generar distintas versiones de sitios para las distintas resoluciones, pero genera un aumento en el costo de desarrollo y mantenimiento, además del tiempo de desarrollo del mismo se alarga. Si deseas ver paso a paso como hacer esto lee abajo:
Dentro de miweb 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.
Pégalo como "Pegado especial" como "Tratar como HTML" en la vista Normal
if (screen.width==800screen.height==600)
window.location.replace("es800600/index.htm")
else if (screen.width==640screen.height==480)
window.location.replace("es640480/index.htm")
else if (screen.width==1024screen.height==768)
window.location.replace("es1024768/index.htm")
window.location.replace("es1024768/index.htm ")
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.
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.
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.
Mas 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.
Anónimo 14 de junio de 2012, 5:43
He hecho lo que explicas arriba y sigue sin funcionar bien..
Mi problema principal es que el fondo de mi web es una foto y dentro he incluido el resto, ya que para mi web lo quiero así, pero se ve diferente en mi portatil que en el de sobremesa...me estoy volviendo loca, casi había terminado y cuando lo pruebo en el otro ordenador se ve fatal...en fin seguiré probando, aunque no encuentro el fallo, gracias por tu escrito que igual está genial!
Fiesta y Chocolate 11 de octubre de 2013, 7:01
A mi me pasa lo mismo que ati. ¿Has poido solucionarlo?
Adolfo 3 de enero de 2013, 21:28
no funciona nada.. explícanos mejor has un vídeo en youtube

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución