adaptar mi página a diferentes resoluciones

[blink]

hola amigos
simplemente eso
ya hice mi pagina y quiero saber como adaptar mi página a diferentes resoluciones del monitor

[davidsanchez]

A mi me dijeron una vez que pusiera una tabla centrada de un poco de menos de 800 piseles de anchura

[baccxus]

blink, si usas CSS o tablas, usa medidas en porcentajes.

Saludos

[PP2]

Mira, lo que puedes hacer...
Elaborar dos versiones de tu web, digamos para dos resoluciones para las mas comunes hasta ahorita... 800 y la de 1024.
Haber si me explico bien, digamos que inicias tu pagina toda en 1024 y la terminas, creas una copia y la guardas en una carpeta llamada 1024 y luego modificas la resolucion de tu PC a 800, y acoplas la pagina que hiciste en 1024 a que se vea bien en 800, pero ahora la guardas en una carpeta llamada 800, por lo cual tenemos dos versiones de la resolución.

Ahora afuera de estas carpetas creas el index.htm que sera el que llamara a los index ubicados en las carpetas y mediante un JavaScript detectamos la resolucion y lo mandamos a llamar.

------ [1024]
------------index2.htm
------[800]
------------index2.htm
------[imagenes]
---- index.htm

Este es el codigo que debe de ir en index.htm

Código HTML:

<script>

if (screen.width==800 || screen.height==600)
 window.location.replace("800/index2.htm");
 else
 window.location.replace("1024/index2.htm");

</script> 

ESO ES TODO... asi cuando entre alguien en automatico detectara la resolucion y se ira a la que le corresponde.
Lo que mencionaron arriba respecto al porcentaje de el tamaño de las Tablas tambien se puede pero tiene desventajas y ventajas al igual de la solucion que te puse.

Lo de las tablas; pues la unica desventaja que tiene es que se acomodara el texto a la resolucion, osea hablamos de espacio en pantalla, pero las imagenes se quedaran del mismo tamaño y pues ocuparan el mismo espacio que en otras resoluciones corriendo toda la tabla.

Lo del script; la ventaja es que el usuario vera la pagina tal como tu quieres que la vea, pero la desventaja es que cuando hagas cambios tendras que hacerlo por cada resolución.

Usa la que mas te guste.

[CORE]

Ejemplos de Cajas por porcentajes

saludos

[PP2]

Oye CORE pero estas de acuerdo conmigo que eso solo hace que la pagina se ubique bien dentro de varias resoluciones, pero no modifica para nada el tamaño de las fotos???

[CORE]

estoy de acuerdo pp2. pero las imagenes tambien pueden estirarse desde css y si usas PNG es mas facil que no se pierda la resolucion, estaras de acuerdo que si tienes un sitio con 100 enlaces y 100 fotos tendrias que crear 200 htmls y 200 imagenes y estas de acuerdo que resoluciones no nada mas hay dos tipos

saludos

[PP2]

Ok. si tienes razon... en fin, bueno, pero es una alternativa mas...

[blink]

que lastima que no halla un script que automaticamente detencte en que resolucion esta hecha y que la acomode tambien automaticamente de acuerdo con la resolucion de cada maquina.
grax a todos

[PP2]

pues el que yo te puse arriba es un script.... y ahi se detecta en automatico.

Que no lo leiste???

[baccxus]

Aunque tarde, por qué usar script si pueden usar CSS?

En una de las páginas que hice, tengo un diseño en el que la página es de un color y encima tiene una capa con márgenes de 10px por cada lado, que además se puede ver SIMILAR en 800x600 y 1024 x 768, pero cuando un usuario usa una resolución más grande, esa página se vé horrible, así que el contenedor tiene un max-width de 955px y se ve de maravilla.

Todo esto, es simplemente una anecdota personal, pero sería interesante que la probaran.

Saludos.

[tunait]

Iniciado por CORE

si usas PNG es mas facil que no se pierda la resolucion

¿Sí? ¿cuántos colores almacena png?
la verdad que eso me vendría muy bien

[CORE]

Iniciado por tunait

¿Sí? ¿cuántos colores almacena png?
la verdad que eso me vendría muy bien

16,7 millones de colores,
fuente: Ventajas del formato gráfico PNG

saludos tunait

[tunait]

Gracias CORE excelente artículo

Sabía de la capacidad de transparencias de ese formato (y guarda con mejor calidad que el gif) pero no me había enterado que almacenaba tantos colores como el jpeg.

El inconveniente que veo es que el tamaño de archivo se dispara bastante

Por ejemplo, ahora estoy trabajando con unos encabezados gráficos que combinan varias imágenes. Si por ejemplo creo una sola versión de la imagen para 800x600 y le incremento las dimensiones al visualizarse a resoluciones mayores no perdería resolución al aumentar pero en cambio me encuentro con un archivo notablemente más pesado.

imagen para 800x600 (622x152px) en jpeg pesa 20.76 KB (21257 bytes)
imagen para 800x600 (622x152px) en png pesa 143.28 KB (146716 bytes)

En cambio la misma imagen creada para 1280x1024 (995x243) en jpeg pesa 42.94 KB (43975 bytes)

creo que al final me sale más a cuenta la duplicación de imágenes .... me parece excesivo 143kb sólo de cabecera para cargar con cada página

nch.. qué lástima

Igual muchas gracias por la info CORE

Un saludo