18 de julio de 2007
Una buena opción a la hora de diseñar para blogs o sitios con un contenido dinámico, es utilizar imágenes con tamaños fluidos, en porcentaje, para que se comporten en relación a su contenedor padre.
Por ejemplo, el típico problema para los editores de blog es utilizar imágenes de un máximo de ancho, para que así no desestructuren las cajas de contenido. A través de este método, es posible dar una solución a esta complicación, ajustando el width de la imagen con porcentajes, en relación a su contenedor padre.
HTML
<body>
<div id="contenedor">
<h1>Contenedor de la imagen</h1>
<img src="ejemplo.jpg" alt="Flor. Ejemplo de imagen en porcentaje" title="Flor. Ejemplo de imagen en porcentaje" />
</div>
<body>
CSS
#contenedor{
width: 100%;
height: 50%;
}
img{
width: 94%;
margin: 2% 3% 3% 3%;
}
Ver ejemplo
Categorias: ayerviernes, css, xhtml | 1 Comentario »
19 de junio de 2007
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).
Categorias: isotipo, poesia, programación | Sin Comentarios »
19 de junio de 2007
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
Categorias: css, xhtml | 3 Comentarios »
14 de junio de 2007
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.”
diagramas de secuencia
Categorias: interacción, programación | Sin Comentarios »
