Seteo de FB.Canvas.setAutoGrow

Al desarrollar apps de Facebook, es de esperar que las distintas páginas que la componen tengan diferentes altos, como sucede con cualquier sitio web.

Como las apps se cargan dentro de un iframe (el cual siempre tiene un alto), necesitamos hacerle saber a Facebook que a medida que navegamos entre pantallas, debe actualizar el alto del iframe.

Es así como Facebook nos da el maravilloso FB.Canvas.setAutoGrow,  que promete ser la solución a las molestas barras de scroll vertical del iframe.

Pero no lograrán deshacerse de ellas al menos que pongan estas líneas de CSS:


html, body{
    overflow:hidden;
}

No estaría mal que incluyan este código en el developers.facebook.

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.

Huevos de pascua

Calc StarWars

Si yo fuese un programador full time, sería de los que todo el tiempo estaría pensando en qué huevo de pascua agregar a mis desarrollos.

Para los que no sepan qué es un «huevo de pascua», se le llama así a aquellos «programitas», trucos, o chistes que los programadores agregan en forma oculta a aplicaciones, accediendo a ellos con combinaciones de teclas, o escribiendo mensajes en lugares particulares.

La magia de Photoshop

Por ejemplo, si me estuvieron leyendo este tiempo ya puedo asumir que conocen OpenOffice, y si lo instalaron para probarlo entonces abran el Calc y escriban en una celda =game(«StarWars»), y al presionar ENTER tendrán un jueguito al estilo Invasores. Visto en Puntogeek.

Pero como soy diseñador tengo que pasarles alguno con Photoshop. Acepto el desafío, y les digo que el truco consiste en que si dejan apretado ALT y van a «Opciones de paleta» de la ventana layers (capas), tendremos una pequeña ventana emergente con un simpático Merlín.

No es mucho, pero es algo.