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.

Firefox 3

Hoy es/fue el Download Day de Firefox 3. Para los que no saben, te invitaban a bajar en navegador hoy para establecer un record Guinness.

Ya lo baje en el laburo, y estoy haciendo lo mismo en casa. Pero acá no lo voy a instalar aún, porque lo mejor que tiene Firefox son las extensiones, y con esta versión no son compatibles las que más uso, como el Firebug.

En cuanto estén (que calculo será mañana, o a lo sumo pasado) lo instalaré acá también.

Todavía no pude testearlo a fondo, pero ya vi es que no se llevó para nada bien con Mootools, especialmente con el nuevo header en el que tanto trabajé estos días.

Habrá que ver… si mal no recuerdo, al salir el Firefox 2 en menos de una semana había una actualización.

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.