Problemas visualización web y ppp (120)

albridi · #1 (**permalink**) 02/12/2008, 11:45

Hola gente

,

Hasta ahora, siempre había pensado que con un javascript que detecte la resolución de pantalla y un ccs para cada resolución, la cosa marchaba al 100%.

El caso es que acabo de configurar un PC a 1280x1024 y además he puesto la configuración de pixels por pulgada a 120, o sea = ppp (120), y para mi sorpresa (y absoluta frustración) los textos de mi página quedan descolocados y demasiado grandes con respecto a lo que debería ser.

Sin embargo he visto otras webs, y no tienen este problema. ¿Cómo lo consiguen? ¿Qué estoy pasando por alto?

Necesito ayuda con esto

Un saludo.

erlingfiallos · #2 (**permalink**) 02/12/2008, 12:09

Estoy entendiendo que tienes webs para diferentes resoluciones.. y que lo has probado en una web con resolucion de 1280 y que no te ha funcionado..

Mmm... pues en la practica ya no deberias de preocuparte por las resoluciones porque al hacer una web la diseñas o fija a un ancho estandar quizas 768 de ancho o haciendola liquida.. para que el contenido siempre se adapte al tamaño del monitor..

albridi · #3 (**permalink**) 02/12/2008, 16:39

Hola erlingfiallos, gracias por responder

Cita:

Iniciado por erlingfiallos

Estoy entendiendo que tienes webs para diferentes resoluciones...

No exactamente, lo que tengo es una única web, pero con CSS distintas según la resolución de pantalla.

El tema es que funciona genial siempre que no aumente los ppp de 96 (valor por defecto de Windows) a 120 ppp, ya que cuando lo hago, todos los textos se "descuadran".

Cita:

Iniciado por erlingfiallos

...pues en la practica ya no deberias de preocuparte por las resoluciones porque al hacer una web ...haciendola liquida...

Ahí me has pillado. ¿Qué es eso de hacerla "líquida"? Es la primera vez que me encuentro con este concepto.

Un saludo.

erlingfiallos · #4 (**permalink**) 02/12/2008, 16:44

Diseño liquido es un diseño fluido que adapta facilmente el contendio al tamaño del monitor.. es una muy buena opcion a la hora de diseñar.. pero todavia sigo con una duda.. puedo ver tu codigo donde utilizas ppp ¿? supongo q es algo en la configuracion de los estilos..

albridi · #5 (**permalink**) 02/12/2008, 17:43

Cita:

Iniciado por erlingfiallos

Diseño liquido es un diseño fluido que adapta facilmente el contendio al tamaño del monitor.. es una muy buena opcion a la hora de diseñar..

¿Pero en qué se basa? ¿CSS, AJAX, DHTML? ¿Dónde puedo leer sobre esto?

En cuanto a lo del ppp, veo que no nos entendemos. Lo de cambiar los ppp se hace en el sistema operativo, es decir, lo hace el usuario final. En XP se hace mediante click-derecho en el Escritorio -> Propiedades -> Configuración -> Opciones avanzadas -> General -> Configuración en puntos por pulgada, y se cambia de 96 a 120 ppp (tamaño grande). Esto es útil para que a una resolución de 1280x1024 se vean los iconos, menús de aplicaciones, etc., con un tamaño mayor, así si tienes problemas de visión puedes adaptar la pantalla para que se vea mejor.

El caso es que al hacerlo, mi web muestra los textos enormes y fuera de sitio, mientras en otras webs esto no ocurre. Me tiene desconcertado

.

Un saludo.

erlingfiallos · #6 (**permalink**) 02/12/2008, 18:42

Mmm.. que extraño.. porque lo he probado.. he cambiado los ppp de las fuentes y todas las paginas las sigo viendo igual.. o al menos en ffox..

pero vamos.. si asi fuerea que los usuarios cambiasen ese parametro en sus computadoras.. a ti no deberia de importarte.. es parte de la usabilidad, son preferencias de los usuarios.. aunque seguramente un porcentaje muy pequeño podrian utilizar tal configuracion..

Quizas hay usuarios que tengan discapacidades motoras o visuales y viendo la letra mas grande se les hace mas comodo.. sigo diciendo lo mismo, es un tema de usabilidad del cual tu no puedes hacer nada.. es parte de las preferencias seleccionadas por los usuarios y que tu no puedes forzar a ser diferente..

De todas maneras si quieres atentar contra una regla tan importante.. prueba setear desde el inicio con CSS el texto de tu pagina..

Y diseño liquido es todo mediante CSS.

kseso? · #7 (**permalink**) 02/12/2008, 19:09

Y los textos ¿cómo tienes definido su tamaño? ¿En px?
Si es así, al cambiar la superficie ocupada por un px (1/92 parte de pulgada ó 1/120) también cambiará su representación en pantalla.

La tendencia (pensando en la usabilidad) es definir el tamaño del texto en "em" y anchura de los elementos contenedores en %. Esto es, en función del usuario visitante: la resolución de su monitor, sus preferencias o necesidades de ver el texto más grande o más pequeño, etc

albridi · #8 (**permalink**) 03/12/2008, 07:22

erlingfiallos, se supone que estoy definiendo el tamaño desde el principio con CSS.

Código:

a{
	color:#993300;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size:10pt;
	font-style:normal;
	text-decoration:underline;
}

¿Quizás es que no debo hacerlo? ¿Lo pongo mejor en HTML mediante <font size="10">loquesea</font>?

En cuanto a lo del diseño líquido ¿Dónde puedo aprender más sobre esto? ¿Hay alguna web dedicada?

Hola kseso?, gracias por responder

Cómo puedes ver en el código que he puesto arriba, tengo definido el tamaño de los textos en "pt". O sea, que si cambio los "pt" por "em" deberían cambiar en función de la resolución del usuario ¿no?

Saludos.

kseso? · #9 (**permalink**) 03/12/2008, 12:32

Bueno Albridi.
los "pt" se recomiendan utilizarlos para definir el tamaño del texto cuando lo destinas a imprimir.
Puedes ver (y obtener) algunas plantillas adaptables a la ventana en
Esta página.
Pero hay cientos en la red.

Y a poco que busques algo en el foro de css, hallarás informaciónes/opiniones sobre el particular.
Suerte.

albridi · #10 (**permalink**) 04/12/2008, 09:31

Gracias kseso?, esto es la historia interminable, cuando crees que ya lo tienes todo controlado con la dichosa web, hay algo que falla y te toca aprender otro porrón de cosas

.

Por cierto he visto que hay gente que coloca su web siempre en el centro del navegador, yo lo mas que consigo es que se quede centrada, pero pegada a la parte superior, no sé si me explico. ¿Alguna idea de cómo hacer que la web sea equidistante a los 4 márgenes en cualquier resolución?

Saludos.

kseso? · #11 (**permalink**) 04/12/2008, 11:05

¿Hablamos de centrado de div´s mediante css?
¿Sí?
Sin entrar a fondo y de forma resumida se consigue colocando toda la página en un contenedor con medidas definidas y propiedad "margin: auto auto;"

P.D.: ¿no te han dicho nada acerca de tu firma?

albridi · #12 (**permalink**) 04/12/2008, 11:38

Vayamos por partes...

1) ¡¡¡¡Gracias!!!!

¡Eran los "pt", una vez cambiado todo a "px", se acabaron los problemas! Una cosa menos.

2) Yo tengo toda la página "encerrada" en un <DIV> tal que así:

Código:

<body>
<div align="center">...........toda la web...........</div>
</body>

¿Quitarías el align y pondrías sólo el margin?

Además tengo asignado en la CSS lo siguiente:

Código:

body{
	margin:auto;
	width:auto;
	border:0;
	padding:0;
}

Saludos.

Estoooo...¿Qué le pasa a mi firma?

kseso? · #13 (**permalink**) 04/12/2008, 12:29

¿Por qué maquetas en el html (div align) usando css?
Olvida el "center" en html. Centra mediante css con el "margin: auto", pero aplicado a la caja contenedora de toda la página.
Y sobre los propiedades del body, busca información sobre resetear css (se trato el tema hace bien poco en el foro de css).

albridi · #14 (**permalink**) 06/12/2008, 06:17

Cita:

Iniciado por kseso?

¿Por qué maquetas en el html (div align) usando css?

Pues... en su día me compré la suite Macromedia Studio MX, con Dreamweaver MX, me he mal acostumbrado a las "propiedades" de cada elemento de la página. Ahora estoy intentando reciclarme al uso de CSS, pero todavía me lio bastante.

Cita:

Iniciado por kseso?

Olvida el "center" en html. Centra mediante css con el "margin: auto", pero aplicado a la caja contenedora de toda la página.

Lo he intentado, pero la capa sigue pegada a la parte superior de la página

.

Cita:

Iniciado por kseso?

Y sobre los propiedades del body, busca información sobre resetear css (se trato el tema hace bien poco en el foro de css).

Ok tío, miraré en el foro. Gracias otra vez.

Un saludo.

Por cierto, no me has dicho que le pasa a mi firma.