2010/06/11

Zen Coding para editar HTML+CSS

Zen Coding permite construir rápidamente bloques de código HTML y CSS a partir de secuencias mnemotecnicas.

Por ejemplo, html:4s puede expandirse para producir todo el esqueleto de una página HTM4 strict.

La siguiente secuencia:

div#page>div.logo+ul#navigation>li*5>a

Puede ser expandida para producir:

<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

Zen Coding es un plugin disponible para Notepad++, Aptana y Dreamweaver, entre otros. Está disponible en Zen Coding.

Zen Coding con Notepad++

La versión para Notepad++ puede descargarse de http://code.google.com/p/zen-coding/downloads/list.

En mi caso, descargue Zen.Coding-Notepad++.v0.6.1.zip, cuyo contenido copié en el directorio plugins del árbol de Npp (C:\Program Files (x86)\Dev\Notepad++\plugins).
Zen Coding usa Npp Scripting, que permite extender Npp mediante javascript.
Luego de eso, la siguiente vez que se inicie Npp encontrará el menú Zen Coding.

El uso básico es sencillo. Puede escribir una secuencia y luego expandirla presionando CTRL+E.

2010/06/01

Montando HTML sobre un flash

Problema:
Hay un objeto flash que debe funcionar como un botón que abra una ventana html flotante.

Solución:
Para abrir una ventana html flotante usaría window.open().
Encuentro que no es posible asociar a un objeto flash (definido con el tag object),un evento onclick.

Se me ocurre que podría cubrir el objeto flash con un bloque html de las mismas dimensiones al que si pudiera asociar un evento onclick.

Para eso, me baso en un patrón que aparece en Pro CSS and HTML Design Patterns, de Michael Bowers.
Consiste en posicionar absolutamente un div dentro de otro.

Hago que el div banner_container contenga al objeto flash, pero también al div banner_overlay, que lo cubrirá:

<div id="banner_container">
  <div id="banner_overlay">
  </div>
  <object...>...</object>
</div&gt

La clave está en hacer que banner_container tenga position:relative y banner_overlay tenga position:absolute. Además, ambos deben tener las mismas dimensiones del objeto flash, para que lo cubran exactamente.

#banner_container {
    position: relative;
    width: 200px;
    height: 100px;
}
#banner_overlay {
    position: absolute;
    width: 200px;
    height: 100px;
    border: 1px solid #abe;
}

Luego, se puede usar javascript sobre el div banner_overlay. Por ejemplo, con jquery:

$(document).ready(function() {
    $('#banner_overlay').click(function() {
        var w = window.open('ventana1.html', 'Ventana 1', 'width=400,height=300');
    });
});

Puede encontrar un demo aquí.