Etiqueta: css

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.

Altura 100% de un DIV

Setear un div al 100% de altura, o bien que siempre se estire según el contenido del div de al lado, es algo que sólo se puede cumplir en CSS mediante trucos. El viejo template de WordPress (creo que el que estaba en el 2.0), usaba una imagen para simular el alto 100%, seteando a la misma como fondo del div contenedor de los otros dos. El color de ambos divs estaba creado entonces por una imagen.

El truco que uso cuando me piden este tipo de funcionalidades, es el siguiente:


.contenedor{
 overflow:hidden;
 width:680px;
 margin:0 auto;
 }
 .left{
 float:left;
 width:100px;
 padding:20px;
 padding-bottom:9999em;
 margin-bottom:-9999em;
 background:#555555;
 }
 .main{
 float:left;
 width:500px;
 padding:20px;
 background:#bbbbbb;
 }

Mi .contenedor, sin height seteado, con overflow:hidden. Esto es importante porque en el .left seteamos un padding-bottom monstruoso, extremadamente grande, junto con un margin-bottom negativo igual de grande, que lo único que harán será estirar el contenido de ese div hasta el final de .contenedor, pero como el mismo tiene la instrucción de «ocultar» todo lo que sobresalga de él, nunca vemos el excedente.

Mejor es ver el html, no?

Más creatividad con CSS

Hace un tiempito escribía sobre la importancia para los diseñadores y creativos de aprender qué se puede hacer con CSS, más allá de que ellos mismos sean o no los que produzcan las páginas. Mi consejo era combinarlo con jQuery, por lo que la «tarea» era doble, aprender CSS y jQuery.

Hicieron la «tarea»? Les paso un ejemplo muy sencillo de lo que intentaba lograr, un sitio muy simple, con un jQuery de los mas fáciles de entender, y CSS de lo básico. Sé que este sitio en particular quizás no es la mejor combinación de creatividad + diseño + impacto + magia + etc. que pueda existir, pero era el complemento que me faltaba para cerrar mi posteo anterior, y no quería dejar de pasar la oportunidad.

PD: Gracias a Dumme por pasarme el link que genero este post.

Aprender para crear

2 comentarios

Al hablar con diseñadores web, o que diseñan para web, es innevitable terminar hablando, aunque sea un poco, de hasta dónde deben saber ellos de código HTML, CSS, jQuery, etc. Yo soy un bicho raro, porque soy diseñador y también programador. Ya lo asumí, soy ambas, suelo ejercer más como programador, pero eso es otra cosa. Al tener este doble rol, me es muy fácil entender a ambas partes, y qué encuentran molesto unos de otros.

Respecto a los diseñadores en sí, no pretendo en este post hacer un debate sobre dónde terminan sus obligaciones para con el «conocimiento». Admito que me da un poco de vergüenza haber escrito esa frase, me hace querer aprender algo nuevo en los próximos 5 minutos por respeto a la autocapacitación jajaja. Me interesa que vean esta creación en CSS.

Y ahora sí, pregunto: no te dan ganas de saber qué se puede hacer en CSS? El código usado para esa animación existe hace muchisimos años. Se trata de ser creativo con lo que se tiene. Con lo que sabemos. O sea, no hace falta saber hacerlo, pero sería un error grave ni siquiera saber los fundamentos básicos, que son los que te dan herramientas, a vos que te consideras «creativo», para construir algo nuevo. Dar un mensaje.

Sabén cuánto cuesta hacer este ejemplo en concreto? un par de horas de alguien que sepa los fundamentos de CSS 1 (no deja de ser un jpg con la textura de la lata mapeada). Los invito a aprender qué se puede hacer con CSS, pero especialmente con jQuery. Atención con lo que dije, aprender que se puede hacer, no aprender a hacerlo, es muy diferente.

Y a no se quedarse con que sólo flash puede hacer cosas lindas y animadas. Vamos, búsquen! O mejor dicho, encuentren!

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.