Entradas de Junio de 2007
19/6 - 2007 isotipo - poesia - programación
Algoritmo
Leonardo en un texto sublime, le dice al discípulo que quiere aprender a pintar: “detente ante ese muro derruido, y míralo mucho, mucho rato, y no una, sino mil veces y aprende a ver en íl las figuras más increíbles”. Y él dice: “como en el sonido de la campana se esconden todos los nombres posibles”.
Eso es la base con que se puede construir un algoritmo.
cita de: “Elogio a la unidad discreta”(Godofredo Iommi).
a:hover con background position
Cuando queremos construir anclas para botones o menús, que utilizan imágenes de fondo para sus distintos estados (link, hover, active), una buena idea para desarrollarlas es utilizar una sola imagen, trabajando con el background-position.
Primero, tenemos nuestra imagen, compuesta por los tres estados del botón o menú que construiremos. La idea es que todos los estados tengan la misma medida, para que no se produzcan descalces a la hora de moverlas con el background-position.
Luego, construimos el area activa de nuestro botón, la zona del ancla donde es visible sólo la parte que necesitamos, dependiendo del estado en que se encuentra.
HTML <a href=”#” class=”miboton” title=”ejemplo”>ejemplo</a>
CSS
a.miboton{
display:block;
width: 100px;
height: 40px;
background: url(http://www.midominio.com/miboton.jpg) no-repeat top left;
}
a.miboton:hover{
background-position: -100px 0;
}
a.miboton:active{
background-position: -200px;
}
Así, tenemos nuestro botón con distintos estados, sin la necesidad de llamar a otras imágenes.
Ver ejemplo
14/6 - 2007 interacción - programación
Diagrama de secuencia
Leyendo por ahí sobre flujos de procesos, me encontre con este tipo de diagrama, llamado diagrama de secuencia. La gracia de este modelo es que permite ordenar claramente los procesos particulares de un flujo en su orden cronológico, logrando una muy buena lectura de las acciones que se realizan. Se me ocurre que puede ser muy útil para la descripcción de procesos en los que se utilice Ajax, haciendo visibles las relaciones entre las funciones, xmls, y la página.
Esta es la descripción:
“Un diagrama de secuencia muestra los objetos que intervienen en el escenario con líneas discontinuas verticales, y los mensajes pasados entre los objetos como vectores horizontales. Los mensajes se dibujan cronológicamente desde la parte superior del diagrama a la parte inferior; la distribución horizontal de los objetos es arbitraria.”
14/6 - 2007 interacción - isotipo - programación
qué hago?
Pienso relaciones, programo condiciones y diseño interacciones.
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.
Por supuesto es absolutamente editable, y si se agrega la librería para efectos scriptaculous, se pueden tener muchas posibilidades para nuestro elemento colapsable.
