ReCreando

Lunes, 07 de noviembre de 2005

Se ve raro en mi explorador...

Está mas que comprobado que los un gran porcentaje de cybernautas siguen usando Internet Explorer... y otro tanto por ciento usan los exploradores alternativos que sin lugar a dudas son cien veces mejores que IE.
Lamentablemente, no todos los sitios webs se ven igual para todos... ya que, al usar distintos exploradores, verán la pagina web de distintas maneras, por ejemplo el tema de las letras:

Las Macintosh anteriores a OS X tienen un dpi de 72, mientras que el estándar para Windows es 96 dpi. Para complicar aún más las cosas, Internet Explorer 5 y Netscape 6 para Macintosh están configurados para representar texto en 96 dpi de manera predeterminada.

En tipografía, un "punto" es una unidad de medida relativa, igual a 1/72 de pulgada (una norma muy anterior a los sistemas informáticos). Por lo tanto, un texto de 12 puntos equivale a 1/6 de pulgada.

En una Macintosh, suponiendo que tiene 72 dpi, un texto de 12 puntos se representará en 12 pixeles (1/6 de 72 pixeles). En Windows, sin embargo, el mismo texto de 12 puntos se representará en 16 pixeles (o 1/6 de 96 pixeles). La diferencia puede arruinar hasta los mejores diseños.

Entonces un CSS como:

   

P {font-size: 12pt}

Traerá pequeñas diferencias entre exploradores... pequeñas... pero diferencias al fin. :(

Con ayuda de programacion dinámica todo puede solucionarse, es decir, usando php, ASP, SSI, de forma tal que podamos detectar el explorador del cliente que nos visita (el lector que lee nuestro sitio) y en base al explorador empleado, automáticamente nuestro sitio web coloque un CSS predeterminado por nosotros mismos.

Para aquel resto de los mortales que no pueden usar lenguajes del lado del servidor, existe la posibilidad de que JavaScript nos salve:

<script language="javascript">

<!--

if (navigator.userAgent.indexOf("Mac") && navigator.userAgent.

indexOf("MSIE")) {

document.write("<link rel=stylesheet href=\"styles\/mac_ie.CSS\" type=\"text\/CSS\">");

}

else if (navigator.userAgent.indexOf("Win") && navigator.userAgent.

indexOf("MSIE")) {

document.write("<link rel=stylesheet href=\"styles\/pc_ie.CSS\" type=\"text\/CSS\">");

}

else {

document.write("<link rel=stylesheet href=\"styles\/default.CSS\" type=\"text\/CSS\">");

} // -->

</script>

El codigo detecta el navegador o la plataforma del cliente (del cybernauta) y devuelve una hoja de estilos que nosotros tengamos dentro de la carpeta styles para dicha plataforma.

Es entonces tiempo de ponerse a realizar los distintos CSS para poder incluir dentro de nuestra pagina web, recuerden que debemos respetar los estandares de cada navegador, por ejemplo un texto estandar:

font-size: 12 px (para Macintosh Internet Explorer)
font-size: 1em (para Macintosh Netscape)
font-size: 80% (para Windows Internet Explorer)
font-size: 0.7 em (para Windows Netscape)

Citas tomadas desde Macromedia.es

Selectores hijo? Que es eso?
Algunos webmasters recomiendan que para no usar diversas reglas CSS para cada explorador, lo ideal seria usar el selector hijo, que Internet Explorer no interpreta, mientras que los demas exploradores si.

#header {margin-bottom:3em}

html>body #header {margin-bottom:1em}

El comando selector hijo implica dos elementos, uno de los cuales es el hijo del otro. Así pues, html>body refiere al hijo, body dentro del padre, HTML.
IE no puede entender la segunda regla del CSS (el comando html>body) por lo que sólo utilizará la primera regla. El resto de los navegadores utilizarán la segunda.
|| Via Baluart.net

Bueno gente... ahora no se pueden quejar.. eso de decir, en FF se ve bien, pero en IE se ve mal quiero que pare... estoy cansado de leerlo en los foros de Bitacoras.com ;)
Tema de discusion? Si... a un click de distancia.

Comentarios? Bienvenidos... =)

Por: ReC | WebMasters | Comentarios (4) | Referencias (0)

Referencia

URL para referencias o trackbacks

Comentarios

Yo utilizo Macintosh desde el sistema 7 y siempre los dpi soportados fueron mayores a 72 dpi.
Todo depende del monitor que utilizabas y no el sistema operativo, pero en aquella epoca no vi nunca alguna Mac que no usara un AppleVision a una resolución de 1024x768 o mayor, por ende necesita dpi mayores a 72.
Es mas recuerdo en muchas disertaciones que una de las cosas que se han jactado ha sido la resolución de video muy superior a la competencia de las ventanas.
No se de donde será esa cita, pero no está basado en la realidad o por lo menos a lo que he vivido yo.

Damián | 07-11-2005 16:33

Hmm ... pt para medidas de pantalla? Eso esta mal. Los puntos son unidades para impresion ... mejor PX o MUCHISIMO mejor em.

Lo mejor que podes hacer es poner todas tus unidades en EM y poner en el BODY un font-size de 62.5%, lo cual resetearía 1em a 10px en TODOS los navegadores (y de paso para hacer mas manejables los EM, que suelen tener comportamientos diferentes segun el tipo de letra).

Otra cosa, el browser sniffing es muuuuuy web 1.0™. En serio, los estandares se hicieron para no programar 2 veces ... vos estas mandando 2 versiones de tu css para cada navegador, lo cual no es bueno :S

Rodrigo | 07-11-2005 17:14

.............................................................................

Otra cosa, el browser sniffing es muuuuuy web 1.0™. En serio, los estandares se hicieron para no programar 2 veces ... vos estas mandando 2 versiones de tu css para cada navegador, lo cual no es bueno :S

Esta perfecto eso, estoy de acuerdo...
Pero Es una opcion para aquellos que siemrpe se quejan de que sus bitacoras no se ven bien si entran de alla o por aca, etc...
Quedate tranquilo que yo no voy a hacer mas de un css... ;)

Ahora bien, si los estandares se hicieron para eso... porque nadie los respeta? (ejem, si MS ni Flickr.com respeta estandares... imaginate el resto...) para pensar no?

SidV | 07-11-2005 17:40

Saludos !! Me interesaria saber si tienes tiempo para contestarme la siguiente inquietud ?
Tu pusiste un tutoria para poder instalar el RADIOBLOG pero solo te referiste a como hacerlo en bitacoras.com, Yo uso blogger y tengo MAC, quisiera saber si siguiendo los pasos que pusiste puedo instalarlo en mi MAC, o si tendria que hacer algo diferente ?
Nota:
Super tu blog y muy interesante.... te felicito !!!
GRACIAS DE ANTEMANO.

Qmenor | 11-11-2005 05:30

Comentar

Pre-Visualización:

Búsqueda

Acerca de ReC:

Un blog mas, de otro adicto a la red. Es un blog multi-temático siempre tratando de rescatar ése granito de arena que vale la pena de Internet, para mostrarselo al público.

Queres un radioblog?