Source: http://www.webestilo.com/guia/articulo.phtml?art=29
Timestamp: 2018-07-19 13:29:38+00:00

Document:
Optimización de la página web para todas las resoluciones. Usabilidad y Accesibilidad. WebEstilo.
Inicio » Usabilidad y Accesibilidad » Artículos sobre Usabilidad » Optimización de la página web para todas las resoluciones
Optimización de la página web para todas las resoluciones
Valoración media: 3.79/5
Usuario desde: 22/12/2002
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 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.
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.
(Por Miguel Cruz,  http://www.signo-net.com)
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.
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 cgis 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.
Miguel Cruz Martínez es desarrollador web de aplicaciones avanzadas tales como e-comerce, contenidos dinámicos, bases de datos y tecnología wap. Trabaja desde 2000 en signo-net, empresa de creación propia (www.signo-net.com) dedicada a las nuevas tecnologías y ubicada en Sevilla (España).
Javascript. Imagen roll over para envío de formularios.
Javascript. Añadir a favoritos con flash, imagen, botón o texto.
Fecha publicación: 22/12/2002
Este artículo ha sido valorado 581 veces. Valor: [3.86/5]
Manuel López 24/12/2002
No entiendo qué hace este artículo en la sección de usabilidad. Si bien es interesante y útil, no tiene nada que ver con la usabilidad. De hecho, quizás debería estar en la sección JScript, por que eso es lo que ofrece a fin de cuentas, código jscript. Además, ¿realizar una versión del sitio web para cada resolución? No es muy eficiente no?, no sería mucho más utíl realizar un diseño autoadaptable al navegador, usar tamaños relativos y no abosolutos, etc... Ademas de 800x600,1024x768,640x... ¿Y las agendas electrónicas? ¿y el WebTV? ¿y ....
Joaquin Gracia 24/12/2002
Soy el responsable de WebEstilo.com, la principal motivación de publicar este artículo en esta sección, no ha sido el de explicar cómo hacer una web para varias resoluciones, sino el de crear un pequeño debate respecto al tema.
¿Se deben generar páginas para varias resoluciones específicas? En mi opinión, no. Pero seguro que hay gente que opina lo contrario y me gustaría escuchar sus argumentos.
Miguel Cruz (mcruz@signo-net.com) 27/12/2002
Por supuesto que lo mejor es tener una única versión compatible con todas las resoluciones, no lo discuto en absoluto.
Si el contenido de una pagina web es sólo texto, se incluye dentro de una tabla en % y las imagenes se situan centradas, la página se verá igual para todas las resoluciones con una única versión.
Pero eso es sencillamente imposible, cuando las imagenes cobran importancia en la maquetación de una pagina web, ya que el tamaño de las imágenes no se puede relativizar.
Por ello mi intención al escribir el artículo es sólo la de ayudar a aquellos desarrolladores profesionales que han creado una web compleja y no tienen más remedio que hacer distintas versiones para un acabado perfecto.
Félix Jara Falcón (fjaramail@yahoo.com) 30/12/2002
Le encuentro la razón a Miguel, ya que lo que se busca es la adaptación y no la deformación de la Web.
JC Pastor (jc8@airtel.net) 09/01/2003
A pesar de que me gustaría hacer páginas con una única resolución, comercialmente (con esto me refiero a los jefes no-informáticos) no suele ser posible, porque el Explorer suele deformar las páginas con el tema de los %, sobre todo si incluimos imágenes flotantes, frames y demás pijadillas.
Santiago Osorio Cortés (jusantoscor@hotmail.com) 09/01/2003
Comulgo con la filosofia de Miguel, creo que es un artículo bastante util en lo que se refiere a estética en la Web que a muchas paginas les hace falta.
Y hago incapie en la disciplina que ostenta en el artículo al mantener un orden en el desarrollo.
RG Gätjens Cruz (gatjens_cr@hotmail.com) 09/01/2003
Fuera de una polémica incipiente, el artículo me parece muy instructivo, soy nuevo en esto y el mismo me ha brindado una gran luz para optimizar mis páginas.
Doy Gracias Mil, a aquellos que sin mesquinda instruyen a otros, con sus explicaciones claras y sencillas.
Gracias Miguel por tu artículo y Gracias Joaquin por Webestilo.
Garagui (garagui@mail.com) 10/01/2003
Me pareció interesante el tema Optimización de la página web para todas las resoluciones, siempre hay que divulgar alternativas para mejorar los diseños, lo he probado y funciona, en algún momento puedo ponerlo en práctica, aúnque diseño para 800x600, muy rapidamente observo otras resoluciones con esta popular aplicación, la recomiendo, no es nada del otro mundo pero te saca del apuro. El sitio para bajarlo está en:http://www.axistek.com/browserresolutions/. Felicito al responsable de este Sitio.
Ana Mª Gil (ana@yifan.net) 10/01/2003
Creo que el hecho de hacer una web para más de una resolución es una cuestión de presupuesto, es más trabajo, luego cuesta más dinero.Es como el hecho de que los diseños se vean en navegadores netscape de versiones 4 o anteriores, es ridiculo para un diseñador o maquetador que tiene que calcular su trabajo en tiempo hacer desde un primer momento este planteamiento si luego el cliente no lo va a valorar, la única manera de que lo valore es cobrandoselo, si está dispuesto a pagar entonces se hace y sino no.
dirarck 12/01/2003
Yo soy principiante en html, y no se si es la forma más adecuada de hacer esa adaptación, pero lo que tengo claro es que quiero que mi página, la cual tiene imagenes y frames, entre otras pijadillas :), se pueda ver desde varias resoluciones y de esta forma no preocuparme por si mis visitantes la ven bien o no.
Gracias a Miguel Cruz
Bernardo (bernardoescoffie@hotmail.com) 12/01/2003
Hay algo que no se ha mencionado. Si lo que estás poniendo en tu página es una animación de Flash de esas que se abren en una ventana nueva (o de cualquier tipo) es muy común que las hagan pensando en 800x600 con elsubsecuente hecho de que si tienes tu monitor a 1024, por ejemplo, se te dificulta la lectura por lo peque de los tipos de letra, etc. Dado que la peli de Flash sí se puede escalar, vale la pena usar este Script, el que por cierto, encontré fácilmente gracias a WebEstilo.
Manuel López 13/01/2003
En mi comentario del 24/12/2002, no quería en absoluto menospreciar el artículo de Miguel Cruz. Simplemente cuestionaba si el artículo trataba usabilidad u otra cosa, aunque entiendo que en el campo del Desarrollo Web la línea que separa cada una de sus subdisciplinas es muy delgada, y este artículo bien puede valer para usabilidad o para programación Jscript.
Mi opinión personal sobre qué hacer con diferentes resoluciones, no es hacer un modelo diferente para cada resolución. Si con un solo modelo autoadaptable no nos basta, pues para eso estamos en la era Web dinámica (post-estática y pre-semántica). Actualmente se puede separar completamente datos y presentación (PHP, ASP, Java, dBs, ...). O hasta podemos utilizar tecnologías incipientes como XML y XSLT.
La opción descrita en el artículo no me parece la más eficiente, aunque en determinados proyectos puede ser tenida en cuenta.
Marcel Medina 22/01/2003
Estoy de acuerdo contigo Manuel Lopez, este metodo es algo antiguo, enciertas ocasiones puede sacarte de un apuro, pero considerando que iexplorer tiene un fallo de seguridad con los scripts i mucha gente tiene los scripts del anvegador descativdo, es mejor optar por un diseño acuoso, es mas complicado i el netscape47 se te reira...pero bueno aqui esta el trabajo del creador web ;)
Walter Paredes (walterphp@hotmail.com) 29/01/2003
Me parece que este articulo nos ayuda a lidiar con este problema... al fin y al cabo, cumple con el objetivo: ayudar a los desarrolladores web, proponiendo soluciones.
A los que no les parezca una buena solucion... podrìan adjuntar alguna solucion o proponer un metodo alternativo, lo que enriqueceria el debate
Carlos Amacaña Toledo (mitaly2000@hotmail.com) 12/02/2003
Manejo el desarrollo de Aplicaciones Web y comparto con varios de ustedes que es un pérdida de recursos y tiempo desarrollar 3 sitios a la par, más bien se debe manejar el código fuente y hacer ciertas funciones que adapte la mayoría de objetos suceptibles a dañarse, el script es bueno, yo uso algo parecido pero más bien lo adapto a modificar una sóla versión de la página.
david vialis (vialisx3@hotmail.com) 23/07/2003
A mi me parece una buena alternativa ya que nos permite realizar un diseño más depurado de las páginas según la resolución.
El problema es: que ocurre con los metatags o las 20 primeras lineas de texto (utilizadas como descripción de la página) como sería el caso de LYCOS?

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