Explorer atrasa

En mi vuelta al desarrollo web en relación de dependencia, me he vuelto a encontrar con un viejo conocido por todos aquellos que se dedican al diseño/programación/maquetación web: Internet Explorer 6.

Habiendo ya betas del IE9 dando vueltas, y estando en el mercado el IE7 e IE8 desde hace tanto tiempo ya, no tengo manera de imaginarme el tipo de usuario que elige al IE6 para navegar diariamente.

Justamente hoy, me entero de ie6countdown.com, una iniciativa que parte desde el mismísimo Microsoft.

Quienes me conocen saben la cantidad de luchas que le he ganado al IE6, como así también saben que ya no quiero hacer más nada compatible con este navegador.

Para todos aquellos que como yo aún deben «solucionar problemas» del IE6, les dejo un listado de herramientas que les pueden ser útiles:

  • Explorer 6: para testear, necesitamos el navegador. Antes solía usar Multiple-IE, pero hoy en día utilizo IETester, sobretodo por si lo que hay que testear es un formulario (los formularios en Multiple-IE no funcionan).
  • ie7.js Project: con este javascript convertimos al explorer 6 en casi casi un navegador en el que se puede maquetar un sitio web.
  • Companion JS: para cualquier versión de explorer, este javascript te permite tener un Firebug en el explorer, y hacer debug de javascript.

Hay miles de cosas más para testear y usar, acá les dejo un compilado más completo que el mío.

CSS y Javascript

En lo que a diseño web se refiere, este año los desarrolladores y maquetadores lo empezamos teniendo en mente HTML5 y CSS3. Uno piensa en la etiqueta <video> por ejemplo, y no puede más que gustarle eso. Después seguís soñando, y lo imaginás con jQuery. Genial. Por último, te acordás que la gente usa internet explorer, y te querés matar.

La curva de aprendizaje del usuario común en verdad no la conozco. Es muy fácil para mí y cualquier geek, imaginar que los usuarios de internet leen e investigan. Nada más lejos de la verdad. A los usuarios de internet, hoy en día lo único que les importa es Facebook, como hace tres años atrás le importaban Fotolog y MySpace, y más atrás aún, revisar su cuenta de email de Yahoo.

Como me gusta leer sobre maquetación, me encuentro con algún truco de CSS. El post está bueno, salvo con que no sirve para ie. Entonces, se usan un par de librerías en javascript que al cargarlas, «corrigen» lo que está mal en el navegador favorito por todos.

Y si directamente no hacemos nada para que se vea bien en IE?

Imagen en el submit de un form

Adlatina es un portal de comunicación. Tiene unos cuantos años online, si trabajan en publicidad lo conocen por obligación (si trabajan y no lo conocen, que esperan?). Algo que me molesta, y mucho, es que en su formulario de login no funciona el «enter». O sea, pongo mi email, mi password, toco enter……… y muevo el mouse hasta el boton «Ingresar» para hacer click y loguearme. Horrible…

El otro día me puse a pensar en esto, porque simplemente no puede ser que suceda. Pensé un poco más, y la conclusión es que si está hecho de esa forma (y hace años), es porque no saben hacerlo bien. Alguno dirá «pero es un botón de submit, cómo no van a saber hacerlo?». Corrección, es un botón de submit con una imagen, es otra cosa.

Veamos el código que usaron para este botón sin usabilidad:

<div class="box">
	<div class="content2">
		<a tabindex="7" class="boton" title="ingresar" onclick="document.formulario.submit();" href="#"><span>ingresar</span></a>
		<div class="clear"> </div>
	</div>
</div>

Como se puede ver, no hay ningún elemento de formulario que haga el submit. En vez de un <input type=»submit»>, hay un <a><span>, donde el atributo onclick del <a> es un javascript que hace el submit de un form. Espantoso.

Según mi teoría, el que hizo este formulario no supo cómo resolver el poner una imagen en el submit del formulario. El problema con los input, es que cuando se trata del <input type=»submit» /> el css empieza a comportarse extraño con todos los navegadores. Mientras en Firefox funciona, Explorer falla siempre. Entonces, en su lugar hay que usar un elemento que no lo usa nadie, el <button>.

El código quedaría así:

<div class="box">
	<div class="content2">
		<button tabindex="7" type="submit" class="boton_usable"><div><span>ingresar<span></div></button>
		<div class="clear"> </div>
	</div>
</div>

A la etiqueta button se le puede poner como contenido un <div> o un <span>, si son maquetadores y no conocían <button>, se acaban de dar cuenta que es su nuevo mejor amigo.

Les dejo el link con el formulario tal cuál como está hoy, y mi propuesta. Chusmeen el CSS.

Truco CSS para escalar imágenes

Hace unas semanas me encontraba leyendo sobre este truco de css para escalar imágenes en Internet Explorer sin que se vean pixeladas. Quedó como una curiosidad, pero no le ví un uso práctico.

Hoy se lo encontré. Estas semana estuve arreglando un back office y un front, y hoy notaron que las imágenes de los productos subidos por BO tienen un tamaño distinto al utilizado en el front. Como las subidas eran más grandes, bastó con esa simple línea de css:

img{
-ms-interpolation-mode: bicubic;
}

y listo.

El náufrago

Sigo pensando en los navegadores, por la nota de Enrique Dans. Cuál de los navegadores está mejor parado? Me animo a trazar un paralelo con Rocky III (la de Mr. T… vamos, se acuerdan).

IE (Rocky) le ganó a Netscape (Apollo), y cuando se presentó un nuevo rival, en vez de prepararse para una nueva pelea, hizo lo que Rocky… Clubber Lang se entrena como bestia mientras Rocky firma autógrafos.

La diferencia con la película es que tendría que ganar Clubber, y si bien lo hace para aquellos que son diseñadores, se sabe que la victoria no es total.

Cuál es el panorama? Supongamos que en una semana se publican el IE8, el Firefox 3 y el Opera 9.5, sumando al Safari 3.1, quién gana?

Creo que cada navegador conservará su actual porción del mercado. Es una lástima por Opera, es un buen navegador, pero que no sabe venderse (ya escribí sobre esto). Quizás termine por ganar el mercado de navegadores móviles.

Batalla Naval II

Safari para Windows

Desde hace poco más de una semana que estoy testeando el Safari para Windows. Para los que no saben, es el navegador de Apple. Sé que la versión anterior tenía serios problemas, esta parece ser una versión más estable, aparte de ser el mejor navegador con respuesta en javascript. Si son diseñadores, ya lo tienen que estar bajando.

Y desde hace unos días el sitio tiene pequeñas modificaciones de diseño, con mejor distribución de algunos elementos, algunos nuevos, y algunos cambios que quedarán para más adelante.

Y a partir de ahora, voy a empezar a quitar todos los hacks para IE6, ya no me importa tener un sitio que se vea bien en ese navegador. Por qué? porque no quiero tener que pelear contra IE6, IE7 e IE8. Creen que exagero? Así es cómo se ve Google Maps en la beta de IE8:

Explorer Apesta - Usa Firefox, Opera o Safari

Sí, ya sé, el botón de estándares está en modo on, si estuviese off se vería bien. Por eso, no trabajo más con hacks, la solución ahora se convierte en problema.

Batalla Naval

Otra vez no puedo tener la frecuencia de posteo que me gusta. Ya podré encajar todo como corresponde.

En la batalla de navegadores hace un tiempito mencioné algo sobre el Opera mini, y ahora se sabe que Firefox quiere participar del mundo de dispositivos móviles. Qué se puede esperar? Que Opera tenga competencia, porque si bien Firefox es conocido por incorporar más tarde funciones de Opera, ambos son buenos navegadores.

Y el explorer? Bueno, como diseñador hay que contemplar todo, incluso que haya gente que use un programa tan malo, entonces lo que pasa es que el ie7 puede instalarse en cualquier XP, sea este pirata o no. Hasta hace poco, la versión del sistema operativo debía ser original (o debías intentar de que lo sea ;)), ahora ya no más restricciones. Por qué? experiencia del usuario: qué es más simple, software en regla y bajar un navegador mediocre, o software pirata libre con navegadores open source y downloads sin restricciones?

Parece que este no ha sido el año de Microsoft bajo ningún punto de vista (cuak).

Estadísticas

Semanas movidas las que pasaron. No me dejaron demasiado tiempo ni para postear algo, ni leer blogs, ni para continuar con las imágenes que tengo empezadas para el concurso de Ballistic, ni etc.

Lo que si pude hacer es revisar algunos datos estadísticos de mis sitios, para eso siempre hay tiempo. Asi que vean lo siguiente:

Esto corresponde a los navegadores de las visitas de este sitio, según Statcounter (es gratuito, no es la gran cosa, pero cumple), en donde sigue dominando el peor navegador, no sólo de la actualidad sino desde hace unos años. Sin embargo, el 39% no lo usa. Eso es positivo, a pesar de que hay alguien que usa la versión 5. El Opera es un gran navegador, pero casi nadie lo usa. Mi teoría al respecto es la pésima campaña de marketing que tienen. Hace unos meses quise poner un banner para bajarlo, sin encontrar un sitio del estilo SpreadFirefox. Por supuesto que no busqué profundamente. Lo cierto es que al de Firefox no lo busqué, llegué, mientras que hoy encuentro My Opera. Se entendió la diferencia entre encontrar el sitio y llegar al mismo, no? porque no quiero que me digan «ehh… hace años que existe», aunque si me guío por las estadísticas, nadie hará ese comentario.

Sigo con estadísticas y comparo ahora con Google Analytics. Interesante, el 61% usa Explorer, y Firefox tiene el 31%. Un lindo porcentaje, mayor al que midió Statcounter. A cuál de los dos creerle? En eso no me meto, pero lo que es una certeza es que Analytics registró correctamente mi celular. El servicio de estadísticas de Google cambió su servicio hace unas semanas. Lo que puedo aportar a tooooodos los análisis del sistema que se leen por todos lados, es que efectivamente es mucho más simple y efectiva la distribución de los reportes. Nada que no sepa un geek.

Y por supuesto, el IE6 sigue ganando en el ranking. Me cuesta entender esto. Creo que es en este tipo de dato cuando uno puede tomar la real dimensión de las técnicas de «monopolio» de Microsoft. Porque el usuario es libre de instalar el navegador que le guste, eso está claro. También está claro que entrar a un sitio, bajar un programa e instalarlo es una pérdida de tiempo para el usuario medio, ni hablar si le sumamos unos minutos para conocer el mercado y decidir cuál es el mejor navegador.

Finalmente, saben que significan estos números? Si dijeron que voy a cambiar el diseño del sitio para darle prioridad a resoluciones mayores a 800×600, están en lo cierto. Porque es otra de las cosas que siempre quise hacer, y estoy adaptando las hojas de estilo para tener un alto rendimiento de resoluciones. Sin javascript que cargue una hoja u otra, sin javascript que escriba un código u otro. Una solución que tiene hacks, pero no scripts. ¿Validar CSS? y para qué sirve eso? Sobretodo si la mayoría usa IE6. Cuando el porcentaje de ese ¿navegador? disminuya al 10%, mis sitios validaran todo. Mientras tanto, me aseguro que más o menos vean las cosas como quiero.