Firefox 3 ya está disponible!

Descarga ya Firefox 3

Pues ya podemos descargarnos Firefox 3, no para batir ningún record de descargas, sino para ver qué nos espera de esta nueva versión de tan fantástico navegador. En la web se promocionan con más de 15.000 mejoras (lo cual puede ser bueno o malo según como se mire… XD) pero yo me quedo con estas que he podido leer:

De mano me lo instalo en el portatil, si veo que la cosa va bien, haré lo propio en la oficina! Todos los comentarios sobre cosas destacables o fallas del navegador como ésta que nos indicó Zárate en sus comentarios, son bienvenidas :)

Firefox 3: Download Day

Spread the firefox 3 download day record guiness 2008

Interesante iniciativa la que se ha creado desde el entorno de desarrollo de firefox para extender este magnífico navegador. Con la excusa de batir el record guiness de descargas de un software en 24 horas, te piden que te suscribas para recibir el aviso de cuando podrás descargarte la nueva versión del popular navegador.

Spread Firefox | Download Day

Lo mejor de todo sin duda será que más gente conozca que existe un mundo más allá de Internet Explorer y que además es un mundo normalmente más bonito que lo que suele haber tras microsoft. Lamentablemente los desarrolladores tendremos que seguir velando por la compatibilidad, porque nuestros clientes así lo merecen, pero eso no quita que en un futuro las decisiones se decanten por el lado más coherente :)

De PNGs transparentes, navegadores y onLoads va la cosa

En el estudio he tenido que emplear PNGs transparentes, que como sabeís (y sino, deberíais) no son soportados por versiones de Internet Explorer 6 o anteriores, sino que vienen soportadas desde la versión 7 de nuestro amigo IE.

Hasta aqui no hay gran problema, porque empleando un pngfix de javascript se arregla el entuerto (bonito palabro).

PLAIN TEXT
JavaScript:
  1. /*
  3. Correctly handle PNG transparency in Win IE 5.5 & 6.
  4. http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
  6. Use in <HEAD> with DEFER keyword wrapped in conditional comments:
  7. <!--[if lt IE 7]>
  8. <script defer type="text/javascript" src="pngfix.js"></script>
  9. <![endif]-->
  11. */
  12.  
  13. var arVersion = navigator.appVersion.split("MSIE")
  14. var version = parseFloat(arVersion[1])
  15.  
  16. if ((version>= 5.5) && (document.body.filters))
  17. {
  18.    for(var i=0; i<document.images.length; i++)
  19.    {
  20.       var img = document.images[i]
  21.       var imgName = img.src.toUpperCase()
  22.       if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
  23.       {
  24.          var imgID = (img.id) ? "id='" + img.id + "' " : ""
  25.          var imgClass = (img.className) ? "class='" + img.className + "' " : ""
  26.          var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
  27.          var imgStyle = "display:inline-block;" + img.style.cssText
  28.          if (img.align == "left") imgStyle = "float:left;" + imgStyle
  29.          if (img.align == "right") imgStyle = "float:right;" + imgStyle
  30.          if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
  31.          var strNewHTML = "<span " + imgID + imgClass + imgTitle
  32.          + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
  33.          + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
  34.          + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
  35.          img.outerHTML = strNewHTML
  36.          i = i-1
  37.       }
  38.    }
  39. }

El tema se complicó (no iba a ser todo tan sencillo...) cuando además metía un evento onLoad para el body con la intención de lanzar una función javascript, y paso a describir el caso porque puede ser de ayuda para quien se encuentre en la situación:

LO QUE QUEREMOS LOGRAR
Tenemos una imagen de fondo de un cierto peso en KB (ya que no es una trama, sino una imagen plena de faculades), y sobre esa imagen han de colocarse unos botones que a su vez son imágenes, y que para que quede medianamente bonito han de ser transparentes.

PRIMER PROBLEMA
El primer problema es que la imagen de fondo que se crea por CSS, pesa lo suficiente como para que se dé durante unos segundos la situación de aparecer los botones sin el fondo que les da "sentido", un efecto poco deseable.

SOLUCIÓN PRIMER PROBLEMA
Para solucionarlo buscamos si existía algun método mediante CSS o XHTML para forzar la carga de los elementos de la hoja de estilos antes que se renderizara el HTML, pero..... no lo hemos encontrado. Si algún alma caritativa sabe cómo lograrlo mediante CSS (o de una manera más limpia que la que hemos empleado nosotros) que no dude en contárnosla.
Jorge tuvo la feliz idea de poner la misma imagen con propiedad display:none en el comienzo del body, con lo que la imagen se carga como HTML impidiendo así que se muestre lo que va a continuacion hasta que se completa dicha carga, y luego el CSS no tarda nada de tiempo en cargarla porque está en caché. Mientras esto ocurre, el div con los botones transparentes, permanece oculto también con la propiedad display, para por javascript hacerlo visible en el onLoad de la página.

SEGUNDO PROBLEMA
Cuando ya estábamos pegando saltos de alegría con el trabajo terminado, vemos que nuestro querido IE 6 no muestra los botones, no así en IE 7 o en firefox.... :(

SOLUCIÓN SEGUNDO PROBLEMA
El problema es debido a la mala compatibilidad del pngfix con métodos invocados en el onLoad. La solución pasa por usar una variante del pngfix (que ha salido a la luz porque también da problemas con el swfobject) y que permite mezclar estas dos necesiades: pngfix y onLoad. Lo que hicimos es "googlear" y emplear el citado pngfix adaptado además de colocar la llamada al mismo DESPUÉS (y ojo que esto es necesario para que se dispare el evento onLoad) de la etiqueta de apertura de BODY. Cuando decimos la llamada nos referimos a esto:

PLAIN TEXT
HTML:
  1. <!–[if lt IE 7]>
  2. <script defer type=”text/javascript” src=”pngfix.js”></script>
  3. <![endif]–>

El resultado lo podéis ver aquí, por cierto, la web está recien salida del horno... diseño por takeone dsgn y programación flash y adaptación del blog por [Q]. :)

Propiedades CSS

Una de CSS.

Algunos recursos de necesario acceso para estar un poco al día con las CSS.

CSS Properties Index
Interesante recurso para estar al tanto de todas las propiedades CSS soportadas por las diferentes especificaciones de CSS, de una forma clara y concisa. Acceso por orden alfabético y muestra de su valor por defecto.

W3Schools - CSS
Un gran lugar de consulta, no solo para CSS sino par aun montón de tecnologías y lenguajes web. No hay que confundirlo con W3C, pero sin duda un gran recurso cuando las cosas no cuadran o necesitas un refresco sobre alguna función o propiedad.

ILoveJackDaniels CSS Cheat sheet
Existen muchas y variadas cheet sheets pero para mi esta versión y web es una de las mejores. ¿Por qué?, descúbrelo tu mismo, pero propiedades, sintaxis, selectores, pseudo-selectores, mediatypes, modelos de caja, unidades, herencia... y en formato PNG y PDF. ¿Qué más quieres?

Advisory de Adobe
Una visión diferente de las CSS, pero que siempre está ahí, hasta el santo día en que los estándares lo sean de verdad, y los navegadores convivan en un mundo de felicidad y amor, todos unidos por un mismo criterio. Para estar al quite de lo que aquí llamamos 2FTF! (que por cierto acabo de tener uno que ya os contaré en otro post... vaya tela)

W3C Guía rápida (CSS 2 en castellano)
W3C CSS
Siempre hay que tener en cuenta quien crean los inventos del demonio!

Este post se lo dedico a todos aquellos que me llaman flashero, o que creen que no tengo en cuenta esta bonita herramienta para hacer webs... por el mero hecho de creer que flash moooola :) Pero luego cuando el ultimo li haga cosas raras en un navegador y en otro no... no me contéis historias... :-P

Bueno como en el fondo os comprendo y admiro, e incluso sufro vuestros mismos problemas en mis carnes... hagamos algo para que el mundo sepa que necesitamos su ayuda para no morir en el intento...

Save the developers

Salva a los desarrolladores!

Interesante artículo de diferencias IExplorer 7 y Firefox

Aqui os pogo una URL interesante donde comenta alguna de las diferencias entre Firefox e IExplorer 7.
Hay que tener en cuenta que éstas diferencias son para el iExplorer 7 no para el 6.

Espero que os sea interesante.

Diferencias Firefox e IExplorer7

Os pongo también el artículo de diferencias entre IExplorer6 y IExplorer 7
Diferencias IExplorer6 e IExplorer7

Máximo número de conexiones en firefox

Tras llevar dos días perplejo, a cuadros, o "bocas", como lo queráis llamar, viendo como mi conexión inalámbrica en casa había dejado de funcionar correctamente, y hacía cosas más que extrañas como:

  1. A veces abría las páginas a veces no.
  2. A veces abría una página pero no mostraba las imágenes.
  3. El messenger siempre funcionaba (Bill!! déjalo ya Bill!)
  4. Las conexiones de otras aplicaciones siempre funcionaban.
  5. Otros navegadores funcionaban pero en ocasiones dejaban de funcionar...

Me vi de repente como nuestro querido enjuto en el peor día de su vida. Enchufando y desenchufando modems, routers, reiniciando, .... enciendo apago router... reinicio ordenador... llamo servicio técnico .... reinicio el router.... apago el ordenador.... llamo al servicio técnico one more time... aAaaaaaRRRGGggghh!!!!

Pues como no, gracias a Andrés (y ya van 2 hoy... ya vale..), he dado con estas opciones que tenía modificadas casi con toda seguridad por algunas de las extensiones que tengo instaladas en firefox.

Paso 1: ir a la barra de direcciones y teclear "about:config".
Paso 2: buscar en la barra de filtro:

Los valores para estas dos variables son 24 y 2 por defecto respectivamente, y yo tenía 44 y 22. Los he restablecido y la conexión funciona correctamente. Se ve que Telecable (mi proveedor de Interné en casa, y que por cierto, ha renovado su web página de inicio) debe tener algún filtro para evitar demasiadas peticiones de forma simultánea, y estos valores de firefox hacían que bloqueara las peticiones que firefox lanzaba. Esto no ocurre en la conexión ADSL de telefónica que tenemos en la oficina.