Mi rincón en Internet

A veces nos surge la necesidad de forzar que un enlace se abra en una ventana nueva o “popup”. El problema es que debemos mantener el HTML válido para que estos enlaces sean seguidos por motores de búsqueda o puedan ser utilizados por navegadores sin Javascript.

En todos los sitios se ve el típico tutorial que dice “… utiliza el window.open() de Javascript …“. Efectivamente, hay que usarlo, pero sin obstruir ni hacer HTML chapucillas.

Vamos a presentar 3 formas de abrir un “popup”, una “mala” y dos mejores.

1. Con HTML “guarrete”:

   <a href="#" 
       onclick="window.open('http://davidasorey.net',
           'popup1', 
           'height=800,width=600,resizable=1,scrolling=1')">Enlace 1</a>

   Fatal. El destino de este enlace está “falseado”. A veces también nos podemos encontrar algo como:

   <a href="javascript:void(0)">

   Esta forma de hacer los “popups” puede ser aceptable sólo si explícitamente queremos que este enlace no se siga.

2. Un poco mejor, dejando un href correcto:

   <a href="http://davidasorey.net" 
       target="popup2"
       onclick="window.open('', 
           'popup2', 
           'height=800,width=600,resizable=1,scrolling=1')">Enlace 2</a>

   Aquí jugamos con el atributo “target“. El evento “click” abre una ventana “vacía” pero con un identificador “popup2“. Cuando el navegador va a abrir el enlace, ya encuentra una ventana con este identificador y abre el enlace en esta nueva ventana.
   Es una mejora, desde luego: el enlace ya es un enlace “real” e indexable.

3. Una solución sin Javascript “inline”:

   <a class="popup3" href="http://davidasorey.net">Enlace 3</a>

   Obviamente, esta es la solución más limpia, pero requiere un poco más de trabajo adicional.
   Con jQuery (se puede hacer con cualquier otra librería o “framework”) hay que “capturar” todos los enlaces con la clase “popup3″ y alterar su comportamiento:

   $(document).ready(function (d) {
   	$('a.popup3').click(function (e) {
   		e.preventDefault();
   		var href = $(this).attr('href');
   		window.open(href, 
                              'popup3', 
                              'height=800,width=600,resizable=1,scrolling=1');
   	});
   });

   En pocas líneas alteramos el comportamiento de todos los enlaces con la clase ‘popup3‘. Nos ahorramos andar escribiendo el código Javascript en el evento onclick y todo el código y control de este comportamiento está en un sólo punto.

¿Qué versión os gusta más?

El nuevo IE8 lleva unos días disponible en su versión definitiva, y, en la mejor tradición de los navegadores de Microsoft, ya nos está dando quebraderos de cabeza a los diseñadores y desarrolladores web.

Ésta es la página web de Público (www.publico.es) vista en algunos navegadores:

Mozilla Firefox	Opera	Apple Safari
Google Chrome	Konqueror	MS Internet Explorer 6

Como pueden ver, la “cajita” con las previsiones metereológicas se ve bien, tres elementos que internamente son una lista que se crea dinámicamente con JavaScript y a los que se les ha dado estilo con CSS, alineándolos usando la propiedad float y eliminando el “bolo” que suelen tener las listas por defecto.

Todos los navegadores en los que hemos probado hasta ahora muestran este módulo correctamente, incluido el vetusto Internet Explorer 6.

Al probar la página en el nuevo IE8, nos hemos llevado una pequeña sorpresa:

La caja en las que se muestran las previsiones meteorológicas es como si no entendiese los estilos: los elementos de la lista no se muestran alineados horizontalmente y cada uno de ellos muestra el “bolo” típico de las listas. Podría pensarse que es un problema de los diseñadores, que no han sabido maquetar estos elementos correctamente, pero las reglas que han aplicado en este módulo son correctas.

Sin embargo, si activamos el botón de “Vista de compatibilidad“, la página se muestra correctamente, como con los demás navegadores, incluido el predecesor, IE7.

Según la página web de Microsoft, “no todos los sitios web están preparados para IE8″ — el original es éste:

“Internet Explorer 8 is a new release and some websites may not yet be ready for Internet Explorer 8″.

Tras una breve investigación, al final Rodrigo y Daniel encontraron el problema: IE8 parece que tiene algunas incompatibilidades con una de las librerías de JavaScript más usadas (Prototype), el atributo HTML “class” y la propiedad DOM “className“.
Los demás navegadores trabajan bien con el mismo código JavaScript, IE8 no. ¿Quién lo está haciendo bien y quién lo está haciendo mal?

Hasta ahora teníamos que hacer los desarrollos y diseños con tres navegadores: IE6, IE7 y el  resto de navegadores. Ahora tendremos que incorporar otro. Por fortuna, ya hay trucos para forzar a IE8 para que se comporte como su antecesor.

Escribíamos hace unas semanas sobre lo difícil que es para un diseñador de páginas web conseguir que el mismo diseño se vea igual de bien en todos los navegadores. Hoy ahondamos un poco más en la cuestión.

Para formatear y dar estilo a las páginas web actualmente se utiliza una tecnología llamada CSS (Cascading Style Sheets u Hojas de Estilo en Cascada).
La CSS permite que los elementos de una página web se vean de una forma u otra sin necesidad de tocar el contenido. Esto es una práctica muy aconsejable, puesto que conseguimos separar e independizar por un lado el texto o contenido de la página y por otro la presentación.

Hasta hace unos años, las páginas web se maquetaban y se les daba estilo con etiquetas HTML dentro del texto que no aportaban contenido, si no formato. Afortunadamente, casi nadie trabaja así actualmente.

El problema es que cada navegador interpreta un poco a su aire estas reglas CSS, con lo que surge el problema que comentábamos en la entrada anterior: los diseñadores tienen que saberse un montón de “trucos” para conseguir que la misma CSS sirva para todos los navegadores.

Existe una organización llamada “Web Standards Project” que promueve el uso de estándares y tecnologías compatibles en las páginas web. Se les conoce sobre todo porque han preparado una serie de pruebas para ver si un navegador es compatible e implementa correctamente las especificaciones de los distintos estándares (CSS, HTML, etc).
Esta prueba se llama “Acid Test” y tiene varias versiones, la que se supone que deberían pasar los navegadores actuales es la versión 2 (la versión 1 de la prueba la pasan los 5 navegadores más utilizados (Firerox, Explorer 6 y 7, Opera y Safari).

Vean la prueba Acid 2 en estos cinco navegadores. Lo que el navegador debería mostrar es una carita como ésta:

Y así la muestran …

Internet Explorer 6

Internet Explorer 7:

Mozilla Firefox:

Opera:

Safari:

La prueba Acid tiene detractores, pero para el propósito de esta entrada nos vale: es sorprendente comprobar cómo los distintos navegadores interpretan las mismas reglas. También es sorprendente cómo los navegadores menos usados (Opera y Safari) son los que mejor implementan las tecnologías web.

Resumen: la próxima vez que Ud. visite una página web en la que se vea algo extraño o descolocado, verifique (si tiene tiempo y ganas, claro) cómo se ve la página con otro navegador, especialmente si usa alguna versión de Internet Explorer.