Para qué navegador he de programar

Publicado el 30 mayo 2010 por Javier Casares

En muchas ocasiones escucho una grandiosa frase del estilo: es que eso que me dices no funciona en Internet Explorer 6. A parte de que Explorer 6 es un producto caducado, y no lo digo yo, lo dice la propia Microsoft con una página sobre el upgrade a Explorer 8 que me parece especialmente divertida por la imagen que ofrece (verdad que no beberías leche caducada hace 9 años?), creo que vale la pena hacer cosas para cumplir el Principio de Pareto, también conocido como la regla del 80-20.

¿Esto que significa? Pues que, como en muchas ocasiones, Yahoo! dispone de una pequeña gráfica que viene a explicar qué navegadores son los que hay que utilizar, y lo lanza una vez por quarter (cada 4 meses). En este caso voy a hacer referencia a la que está en el momento de escribir esta entrada, que es el 1Q2010.

	Windows XP	Windows 7	Mac OS 10.5	Mac OS 10.6
Chrome 4.0	x
Explorer 7	x
Explorer 8	x	x
Firefox 3.6	x	x		x
Safari 4.0			x	x

¿Qué interpretación se puede hacer de esta tabla? Por un lado, que para determinadas versiones antiguas hay que simplemente obviar: Firefox < 3, Explorer < 7, Chrome < 4 y Safari < 4. Opera queda excluido por ser un navegador raro, como lo llaman ellos. Yo en estos casos lanzaría un mensaje de aviso de que tu navegador está caducado, actualiza gratis….

¿Qué otras más cosas? Pues que los navegadores nuevos pueden no estar preparados para ser 100% compatibles en los sistemas operativos, como pasa con Chrome.

En resumen: ¿para qué hay que desarrollar? Hay que desarrollar para Explorer 7 y 8 además de Firefox 3.6 (si hablamos de Windows) y para Safari 4 (si hablamos de Mac OS). Aunque no venga, yo para Linux dejaría el uso de Firefox 3.6 igualmente.

Con esto llegaremos a más del 80% de la población de Internet, con un trabajo simple, sin necesidad de dedicarle tiempo a la mayoría de tonterías que pueden dar los navegadores “raros” (entre comillas).

Otra cosa, como añadido… en un proyecto que tenemos actualmente en marcha, hemos puesto un mensaje de aviso a los usuarios de Explorer 5 y 6, y, la gente SÍ que actualiza su navegador, ya que desde que hemos puesto el mensaje, el 80% de las consultas para soporte que llegaban sobre “que la web no se veía bien”, han pasado a ser un 20% de las quejas… y si le sumamos a que según la analítica sólo tenemos un 10% de usuarios de Explorer < 7…

En definitiva, que cada uno haga lo que quiera con sus sitios, pero yo hace ya un tiempo que me he cansado de dar soporte y trabajar extra por culpa de un 10% de los usuarios de Internet que no se preocupan de su seguridad… así que si ellos no se preocupan por navegar correctamente, yo tampoco me preocupo por gente que no quiere preocuparse… y que seguramente luego me va a hacer perder tiempo.

Actualización: para los que me habéis preguntado, así se ve TuManitas en Explorer 6…

Usa el tipo de letra que quieras en tu sitio

Publicado el 27 mayo 2010 por Javier Casares

Estos días hablando con mi diseñadora favorita, Ana, hemos cruzado algunas cosas sobre la posibilidad de “incrustar tu fuente” en los sitios web. Ella últimamente hace diseños para algunos hoteles, y estos siempre quieren cosas especiales.

Al final de hablar sobre ello, comenzamos a ver el tema del @font-face del CSS3. Pero, claro está, nos encontramos con el asunto de que no funciona en todos los navegadores. Así que me he puesto a investigar y he encontrado un código, un poco extraño, pero que parece ser la solución a la compatibilidad con todos los navegadores, incluido Internet Explorer.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Font Face Demo</title> <style type="text/css" media="screen"> @font-face { font-family: 'AaarghNormal'; src: url('Aaargh-webfont.eot'); src: local('☺'), url('Aaargh-webfont.woff') format('woff'), url('Aaargh-webfont.ttf') format('truetype'), url('Aaargh-webfont.svg#webfont') format('svg'); font-weight: normal; font-style: normal; } h1 {font: 28px 'AaarghNormal', Arial, sans-serif;} p {font: 16px 'AaarghNormal', Arial, sans-serif;} </style> </head> <body> <h1>Font-face de Aaargh Font</h1> <p>Aaargh Normal - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </body> </html>

Para que quede claro que esto funciona, os dejo con la página tal y como se cargaría…

Un detalle interesante es el uso de esa “carita sonriente”, y es el parche para que funcione en todos los navegadores, ya que sino en algunos de ellos no funciona… parece ser que gracias a un código en UTF-8 que no es compatible con el navegador de turno hace que el resto no se siga leyendo y por tanto no de un error…

Otra cosa a tener en cuenta es de dónde sacar fuentes en EOT, WOFF, TrueType y SVG. El sitio así que mejor he encontrado se llama Font Squirrel.

Cómo precargar elementos CSS, JS y similares

Publicado el 26 mayo 2010 por Javier Casares

Seguro que alguna vez habéis pensado cómo hacer que vuestro sitio vaya todavía más rápido. Pues hay forma de hacerlo, sobretodo si la gente suele visitar vuestra página principal y luego sigue navegando.

La cuestión es que en muchas ocasiones los CSS y JavaScript de las páginas principales de los sitios difieren mucho del resto de la web… ¿qué hacer para mejorar esto? Pues tener un CSS y JS específico sólo para la página principal y pre-cargar los CSS y JS del resto de la página en la caché del navegador.

Para esto, que puede ser un poco complejo, podemos usar un código que he encontrado y que parece funcionar correctamente en todos los navegadores.


window.onload = function () {
  var i = 0, max = 0, o = null,
    preload = [
      'http://example.com/imagen.png',
      'http://example.com/javascript.js',
      'http://example.com/estilos.css'
    ],
    isIE = navigator.appName.indexOf('Microsoft') === 0;
  for (i = 0, max = preload.length; i < max; i += 1) {
    if (isIE) {
      new Image().src = preload[i];
      continue;
    }
    o = document.createElement('object');
    o.data = preload[i];
    //o.width = 1;
    //o.height = 1;
    //o.style.visibility = "hidden";
    //o.type = "text/plain"; // IE
    o.width  = 0;
    o.height = 0;
    document.body.appendChild(o);
  }
};

Con esto en la página principal conseguiríamos que se pre-cargasen en caché (en background) esas 3 direcciones que podrían corresponder a la imagen del CSS Sprite, la hoja de estilo y las funciones JavaScript.

Aunque esto a priori podría hacer que la página principal vaya algo más lenta, la carga de las páginas sucesivas puede aumentar en un 30% la velocidad.

Tanto va el webmaster a la fuente…

Publicado el 12 enero 2010 por Javier Casares

…que al final: Verdana.

Seguramente si eres de los que habitualmente hace sitios web te planteas usar tipos de letra estándar para que todo el mundo lo vea correctamente, en Windows, Linux, Mac, etc… El otro día, por un proyecto que estoy desarrollando, tuve que ponerme a investigar y he sacado “estas familias”:

Arial, Helvetica
style="font-family: Arial, Helvetica, sans-serif;"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

‘Arial Black’, Gadget
style="font-family: 'Arial Black', Gadget, sans-serif;"

‘Arial Narrow’
style="font-family: 'Arial Narrow', sans-serif;"

‘Century Gothic’
style="font-family: 'Century Gothic', sans-serif;"

Copperplate, ‘Copperplate Gothic Light’
style="font-family: Copperplate, 'Copperplate Gothic Light', sans-serif;"

‘Courier New’, Courier
style="font-family: 'Courier New', Courier, monospace;"

Georgia
style="font-family: Georgia, Serif;"

‘Gill Sans’, ‘Gill Sans MT’
style="font-family: 'Gill Sans', 'Gill Sans MT', sans-serif;"

Impact, Charcoal
style="font-family: Impact, Charcoal, sans-serif;"

‘Lucida Sans Unicode’, ‘Lucida Grande’
style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;"

‘Lucida Console’, Monaco
style="font-family: 'Lucida Console', Monaco, monospace;"

Tahoma, Geneva
style="font-family: Tahoma, Geneva, sans-serif;"

‘Times New Roman’, Times
style="font-family: 'Times New Roman', Times, serif;"

‘Trebuchet MS’, Helvetica
style="font-family: 'Trebuchet MS', Helvetica, sans-serif;"

‘Palatino Linotype’, ‘Book Antiqua’, Palatino
style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;"

Verdana, Geneva
style="font-family: Verdana, Geneva, sans-serif;"

HTML5 en Internet Explorer 8

Publicado el 4 enero 2010 por Javier Casares

Hace cosa de 2 años comencé a publicar alguna cosilla sobre HTML5. La verdad es que no era gran cosa, pero lo suficiente para hacernos una idea de que en SEO la cosa no iría nada mal. Y como hace ya 3 meses que puse este sitio web en HTML5 me he decidido ha hacer algún repaso poco a poco sobre los cambios.

Antes de nada comentar que “los buscadores” parece que ya leen el HTML5 y le están dando ya peso a las cosas como se las tiene que dar. Al cabo de las 4 semanas, sin cambios aparentes (ya que fui publicando lo mismo sin tener ningún enlace fuerte ni nada parecido) el tráfico del blog aumentó un 30%.

Eso sí, uno de los problemas más grandes que me he encontrado es que el CSS no se veía bien en Internet Explorer 8. Pero he encontrado una forma “un poco chapucera” pero efectiva de que funcione. Digo chapucera porque, como siempre, hay que meterle “algunas cosillas” al Explorer para que las trate antes de pintar por pantalla. Aún así, que conste, que no me quejo del navegador ya que HTML5 no es un estándar todavía y no tiene ninguna obligación de darle soporte, aunque he de reconocer que “lo poco que he usadO” en Opera, Chrome y Firefox se ve.

El problema

Si tenemos un código como el siguiente, todos los navegadores excepto Explorer saben tratar el nuevo DOM anidado…

<style type="text/css"> article { display: block; border: 1px solid red; } </style> ... <article> <h1>Bienvenido a JavierCasares.com</h1> <div>Esto es un mensaje de prueba.</div> </article>

En este caso, el DOM debería ser anidado de forma que “article” incluye “h1″ que a su vez incluye “div”. Pero no, Explorer aún tiene que “article” está al mismo nivel que “h1″ que, en este caso, sí que incluye “div”.

La solución

El pollo gordo viene a ser que el DOM no tiene en cuenta los elementos como tales, por lo que “hay que crearlos” en Explorer y así los tendrá en cuenta a la hora de poder ofrecer diseño con CSS o ejecuciones de procesos con JavaScript.

para ello, hay que añadir en el “head” de nuestra página el siguiente código:

De esta forma creamos todos los nuevos elementos (tags) del HTML5 que no existen en versiones anteriores y “de repente” la web se verá igual que en el resto de navegadores si navegamos con Internet Explorer 8…

NOTA: no tengo Internet Explorer 7, por lo que no sé si funcionará en versiones anteriores… aunque la teoría dice que debería.

Eliminar el borde cuando haces clic

Publicado el 31 mayo 2008 por Javier Casares

Seguro que en más de una ocasión te has encontrado que al hacer clic en algún enlace o similar aparece una especie de borde con línea discontinua y que, a veces, te desmonta incluso todo el sitio web…

¿Sabes que eso se puede arreglar de una forma muy sencilla? Pues sí, se hace con CSS y con el parámetro outline. La idea es que en el CSS añadas en 2 sitios esta propiedad:

body { outline: none; } a { outline: none; }

Tan sencillo y tan tonto como esto… en fin, a veces es cuestión de que alguien te de una chispa para que se encienda una mecha…

AntiSpam de correo vía CSS

Publicado el 24 abril 2008 por Javier Casares

Uno de los grandes problemas que en muchas ocasiones me encuentro es cómo poner una dirección de correo en una página web…

Hace un tiempo que un amigo me mandó un sistema que utilizaba y que he estado buscando y he encontrado de dónde podría haber salido, y la verdad es que la idea es muy buena, ya que hoy en día todos venimos utilizando XHTML y CSS… incluso, sólo con CSS ya sería posible hacerlo.

La idea es usar el sistema con un ID de estilo:

parte CSS
/* \40 se convierte en “@” */
#email:after {
content: ” <usuario\40dominio.ext>”;
}
parte HTML
<div id=”email”>Contacto:</div>

O usar el TAG <address>:

CSS code
/* \40 se convierte en “@” */
address:after {
content: ” <usuario\40dominio.ext>”;
}
parte HTML
<address>Contacto:</address>

En fin, si tienes el CSS separado en un fichero separado, funciona perfectamente y vas a ver algo como:

Contacto: <usuario@dominio.ext>

Javier Casares

Acelero Proyectos de Internet haciendo cosas que otros no hacen…

Archivo de la categoría: CSS