Optimizaci�n de la p�gina web para todas las resoluciones
| |
| Por Miguel Cruz |
 |
Art�culos publicados: 3
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.
<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)
// para resolucion 640x480
else if (screen.width==640||screen.height==480)
//para resolucion 1024x768
else if (screen.width==1024||screen.height==768)
//para otras resoluciones
else
</script>
- 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 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.
Bio:
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).
Otros art�culos recientes de este autor: |
Fecha publicaci�n: 22/12/2002
Valoraci�n
Este art�culo ha sido valorado 581 veces. Valor:
[3.86/5]
Comentarios
| 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.
El debate est� servido.
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.
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.
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.
Un saludo
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.
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.
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.
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.
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
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.
Salu2
| 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.
Un saludo!
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 ;)
Un Saludo a todos!
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
Gracias
Walter
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.
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?
A�adir un comentario
Si no est� de acuerdo con algo o quiere a�adir m�s informaci�n al respecto puede incluirla a�adiendo un comentario.
Colabora
�Te sientes capacitado para escribir un art�culo como este? �Te gustar�a colaborar escribiendo art�culos en WebEstilo? H�znoslo saber !!
