Colapsable

Están en todos lados… son lo más cool de lo cool… hijos directos de la Web 2.0, los famosos… can can can… colapsables. Bueno, como también me considero un seudo hijo de esta corriente, voy a explicar un poco como se hacen, a través de uno de los juguetitos regalones, Prototype.

Primero, comenzamos llamando esta librería javascript en el head de nuestro sitio

<head>
    <script type="text/javascript" src="http://www.isotipo.net/wp-includes/js/scriptaculous/prototype.js"></script>
</head>

Luego, tenemos nuestro pequeño código HTML donde describiremos el título de la página, un div contenedor, el ancla que despliega el div oculto con un conveniente id que será recogido para ejecutar la acción, y por supuesto, el div oculto, también con su respectivo id.

<body>
    <h1>Colapsable</h1>
    <div class="contenedor">
	<a href="#" title="ejemplo" id="colapsa">Despliegalo !!</a>
        <div id="oculto">
            <p>Texto dentro del contenedor que se colapsará y se desplegará.</p>
        </div>
    </div>
</body>

Pasando a nuestro texto en javascript, tenemos que:

    function ocultar(){
        if($('oculto')){
            $('oculto').hide();
            $('colapsa').href="javascript:mostrar()";
        }
    }
    function mostrar(){
        $('oculto').show();
        $('colapsa').href="javascript:ocultar()";
    }

    Event.observe(window,"load",ocultar);

, donde la funcion ocultar() define que si existe el id “oculto”, le otorga un display:none a través de la funcion hide() de prototype, al mismo tiempo que le dice al ancla con id “colapsa” que su comportamiento href sea llamar a la función mostrar(), que hemos creado nosotros. Luego, al hacer click en el ancla y ejecutarse la función mostrar, el div “oculto” se muestra a través de la funcion show(), y el ancla pasa a tener un comportamiento href que llama a la función ocultar(), que también hemos creado nosotros. Así, al volver a clickear en el ancla, se completa la recursividad del proceso.

Por último, cargamos nuestra funcion inicial ocultar() al final del script, a través del modo Event.observe() y .. can can can… , le tenemos un sencillo pero eficiente colapsable en Ajax.

Ver ejemplo

Por supuesto es absolutamente editable, y si se agrega la librería para efectos scriptaculous, se pueden tener muchas posibilidades para nuestro elemento colapsable.

Ver ejemplo

Posiciones absolutas dentro de relativas

Una de las cosas que aprendí a dominar últimamente en CSS es el manejo de los márgenes absolutos (top, left, right, bottom) para posiciones absolutas dentro de bloques con posición relativa. Esta posibilidad que me mostró el Max ha sido de gran ayuda para los últimos proyectos en los que he trabajado.

La teoría dice que un bloque X con posición absoluta posee márgenes absolutos respecto al html, esto quiere decir, que cualquier margen del tipo top, left, right y bottom, lo ubicarán respecto a los márgenes de la página completa.

div.contenedor{

}
div.x{
	position: absolute;
	bottom: 0;
	left: 0;
}

Ver Ejemplo

Sin embargo, al declarar el contenedor padre de X con una posición relativa, este se comportará como absoluto dentro de los márgenes de su contenedor padre.

div.contenedor{
	position: relative;
}
div.x{
	position: absolute;
	bottom: 0;
	left: 0;
}

Ver ejemplo

Esta posibilidad de manejo es muy útil cuando se trabaja en diseños líquidos, o con elementos que requieren de esquinas redondeadas.

Discapacidad

Contexto:

En mi pieza, sentado en mi escritorio, revisando detalles de mi nuevo blog. Entran a la pieza mi hermano y mi madre.

Personajes:

Madre: 47 años, 3 hijos, dueña de casa, educación media completa, experiencia mínima en computadores, usa anteojos.

Hermano: 20 años, soltero, 3er Año Ingeniería en Acuicultura, usuario promedio de Internet, sin anteojos.

Yo: 23 años, soltero, egresado en Diseño Gráfico, usuario experto en internet, sin anteojos.

Interlocución

Yo: Hola hola wn, que tal. Supe que te compraste mochila hoy.

Hermano: Sipo, esta re bakán, la compré a mitad de precio por no se que oferta.

Yo: Ahh, que buena. ¡Hola mamá!, mira, me estoy haciendo un sitio nuevo.

Madre: Que bien mi hijto, me alegro.

Yo: Siéntate, para que lo veas bien y lo pruebes.

Madre: Pero es que yo no sé!

Yo: No te preocupes, trata de hacer algo… (se sienta frente al monitor). Dale, sin miedo. Lee la pantalla para que entiendas

Madre: Es que no veo nada, no alcanzo a leer.

Yo: ¿Pero cómo?, ¿no alcanzas a leer nada de nada?

Madre: ¿A ver? ISO-TI-P-O.. (cuerpo 60px), Portafolio de trabajos (32px), mmm….

Yo: Dale, lee el párrafo que está mas abajo (cuerpo 12px)

Madre: Pero si no alcanzo, veo todo borroso, tengo que pegarme a la pantalla para alcanzar a distinguir algo.

Yo: De verdad, oooo, que heavy!. ¿Y tú? ¿Alcanzas a leer cierto?

Hermano: (parado, mirando la pantalla) mmmm, más o menos parece, porque desde lejos me cuesta mucho.

Yo: Ahh , pero sentado alcanzas a leer bien el párrafo de texto, ¿o no?

Hermano: (se sienta) Si, lo alcanzo a leer, pero me sigue costando un poco.