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.
12/6 - 2007 css
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;
}
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;
}
Esta posibilidad de manejo es muy útil cuando se trabaja en diseños líquidos, o con elementos que requieren de esquinas redondeadas.
