22 septiembre 2007

CSS: hacks para igualar webs en distintos navegadores

A pesar de utilizar CSS, muchas veces no conseguimos que el resultado se vea igual en todos los navegadores. Para conseguir distinguirlos y crear estilos propios para cada uno, se han venido utilizando los famosos "hacks" que normalmente aprovechan bugs de los navegadores Internet Explorer (IE) para marcar diferencias y sobreescribir valores genéricos:

p{
color:#000; /* Definición genérica */
}
* html p {
color:#f00; /* Solo se modifica para IE6 */
}

p {
color: #000; /* Definición genérica */
#color: #f00; /* Se modifica sólo para IE */
}

.titulo {
height: 15px; /* Definición genérica */
#height: 15px; /* Se modifica sólo para IE */
_height: 21px; /* Se modifica sólo para IE6 */
}

#header {margin-bottom: 3em;} /* Definición genérica */
html>body #header {margin-bottom: 1em;} /* Se modifica sólo para IE6 */

.elemento {
width: 700px;
\width: 710px; /* Se modifica sólo para IE5.x */
wid\th: 710px; /* Se modifica para el resto de navegadores */
}

El uso de los hacks no es muy recomendable, puesto que en el futuro es probable que queden obsoletos y en los nuevos navegadores las páginas se vean incorrectamente. Además su uso hace que los documentos CSS puedan dejar de seguir el estándar. Así, siempre que sea posible, usaremos esta otra alternativa que nos permite cargar un css específico para cada navegador:

<!-- Usar ie6.css si el navegador es igual a Internet Explorer 6 -->
<!--[if IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css">
<![endif]-->

<!-- Usar ie.css si el navegador es Internet Explorer -->
<!--[if IE]>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!-- Usar ie56.css si el navegador es anterior a Internet Explorer 7 -->
<!--[if lt IE 7]>
<link href="/css/ie56.css" rel="stylesheet" type="text/css">
<![endif]-->

<!-- Usar estilo si el navegador es Internet Explorer 6 o posterior -->
<!--[if gte IE 6]>
<style>.titulo {width: 150px;}</style>
<![endif]-->

Enlaces relacionados:
http://metalize.liveonstyle.com/2007/07/08/evita-los-hacks-en-tu-css
http://www.albertofortes.com/blog/?p=290
http://www.disenorama.com/articulos/el-modelo-de-cajas-en-CSS
http://css-discuss.incutio.com/?page=BoxModelHack

12 septiembre 2007

Problema de apagado automático en XP

Si tenemos el problema de que al apagar el Windows nos aparece el mensaje "Ahora puede apagar su equipo" y no se apaga automáticamente (aún teniendo una fuente ATX), es probable que sea por la configuración de la gestión de energía del XP o por no estar correctamente configurada en la BIOS. Para solucionarlo se puede probar con las siguientes opciones:

OPCIÓN 1: Vamos a [Inicio > Panel de Control > Pantalla], luego seleccionamos la pestaña 'Protector de Pantalla' y pulsamos en [Energía...]. Si te aparece la pestaña APM, activas aí la compatibilidad de ahorro de energía.

OPCIÓN 2: Vamos a [Inicio > Panel de Control > Opciones de Energía] y si aparece la pestaña APM, activamos "Habilitar la compatibilidad con la administración avanzada de energía"

OPCIÓN 3: Vamos a [Inicio > Panel de Control > Sistema] y en la pesataña 'Hardware' pulsamos en [Administrador de dispositivos]. Vamos al menú Ver y seleccionamos 'Mostrar dispositivos ocultos' y luego buscamos en los dispositivos "Equipo compatible con Advanced Configuration and Power Interface (ACPI)" para habilitarlo.

OPCIÓN 4: Entramos en la BIOS (pulsando [Supr/Del] al encender el equipo), buscamos la opción APM (Advanced Power Management) o ACPI (Advanced Configuration and Power Interface) y la ponemos en ENABLED para activarla.

Enlaces relacionados:
http://www.configurarequipos.com/doc19.html
http://www.forospyware.com/archive/t-68546.html
http://www.yoreparo.com/foros/reparacion_de_computadoras/49108.html

01 septiembre 2007

Javascript: codificación hexadecimal de caracteres

Si vamos a enviar con Javascript (mediante GET o POST) parámetros de un formulario que contienen tildes, eñes o caracteres raros, podemos utilizar la función escape(cadena) para generar una cadena válida y unescape(cadena) para invertir el proceso.

La función escape retorna la codificación hexadecimal del argumento en el conjunto de caracteres Latinos ISO. La función unescape retorna la cadena ASCII para el especificado valor hexadecimal decodificado.

Ejemplos:

document.write(escape("¡Qué hermoso niño!"));
Salida: %A1Qu%E9%20hermoso%20ni%F1o%21

document.write(unescape("%A1Qu%E9%20hermoso%20ni%F1o%21"));
Salida: ¡Qué hermoso niño!


 

Existen otras funciones similares como:

  • encodeURI(cadena) / decodeURI(cadena)
  • encodeURIComponent(cadena) / decodeURIComponent(cadena),
  • encodeURL(cadena) / decodeURL(cadena)
  • encodeURLComponent(cadena) / decodeURLComponent(cadena)

Más info y codificador on-line (inglés):
http://www.barelyfitz.com/projects/encoder/

Nota: Estas funciones pueden ser útiles para el envío automático de formularios web a una dirección de correo electrónico, cuando en el email no se visualizan correctamente los caracteres (por ejemplo para usar cuando enviamos parámetros al famoso script formmail).