Mostrando las entradas con la etiqueta html. Mostrar todas las entradas
Mostrando las entradas con la etiqueta html. Mostrar todas las entradas

2022/03/12

Link hacia Whatsapp

 


¿Quieres crear un link que abra un chat en Whatsapp? Te cuento cómo lo solucioné con HTML.

  • Lo que necesitaba era que en el whatsapp del usuario se abriera un chat hacia cierto número y con un texto prestablecido.
  • Encontré que debía formar un url con un formato similar a https://api.whatsapp.com/send?phone=51999888777&text=Hola
    • El número de teléfono indicado por phone debe incluir el código del país (51 en este ejemplo)
    • El texto indicado por text debe ser url compatible, es decir que se pueda indicar a través del url.
      • Puedes usar una herramienta como URLEncoder para convertir tu texto. Incluso puedes poner emojis! 🙂
      • Si usas javascript para generar el enlace, la función encodeURI hace el trabajo.
  • De ese modo, es posible formar un enlace como este:
<a href="https://api.whatsapp.com/send?phone=51999888777&text=Hola%21%20%F0%9F%91%8D%F0%9F%99%82">Saludar por Whatsapp</a>
  • Cuando el usuario hace clic en el enlace, le aparece un diálogo para permitirle ir a la app whatsapp (si está instalada), donde abrirá el chat correspondiente al número indicado y con el texto indicado pre llenado.

¿Conoces otro modo de hacer esto, o quizás de manera más sencilla? Puedes compartirlo en los comentarios 🙏


Publicado originalmente en AKC Puroguramu

2017/12/04

CSS: Checkbox hack para controles personalizados

¿Cómo aplicar un estilo como respuesta a un click, usando sólamente CSS?

Se puede hacer con el checkbox hack.

Principio

  • Un label asociado a un input puede recibir el click por él
    • Puede haber varios labels para un mismo input
    • Ocultando el input (difícil de personalizar), queda el label para contener un control más fácil de personalizar
  • La pseudoclass :checked permite ubicar un checkbox seleccionado
  • El selector aaa + bbb permite seleccionar un bbb que esté (declarado) inmediatamente después de un aaa

Patrón 1

HTML:
<input id="checkbox-control" type="checkbox">
<label for="checkbox-control">Control</label>

CSS:
#checkbox-control:checked + label {...}

Patrón 2

HTML:
<label for="checkbox-control">Control</label>
<input id="checkbox-control" type="checkbox">
<div class="target">Target</div>

CSS:
#checkbox-control:checked + .target {...} 

Patrón 3

HTML:
<input id="checkbox-control" type="checkbox">
<label for="checkbox-control">Control</label>
<div class="target">Target</div>

CSS:
#checkbox-control:checked + label {...}
#checkbox-control:checked + label + .target {...}

Ideas de aplicación

  • Checkbox personalizado
    • Toggle
  • Tabs
  • Dropdown menu
  • Dot control para slider
  • Árbol desplegable
Ver unos ejemplos en A check studio, en CodePen

Referencias




2014/04/24

Un background con inline css es contenido funcional

Se prefiere que en el HTML esté el contenido y en el CSS la presentación.

De ese modo, viven independientes. Es posible cambiar el .css por otro y dar un aspecto totalmente nuevo a la página.

Una imagen en background se considera presentación. No le corresponde un tag ni un nodo de texto. Pero quizás se pueda hablar de contenido funcional.

Una imagen que es contenido:

index.html
<div class="foto"> <img src="imagen.jpeg" /> </div>

Si ahora pusiera la imagen como background definido en CSS:

style.css
.foto {
 background: url('imagen.jpg') no-repeat;
}

index.html
<div class="foto"> </div>

Al hacer eso, imagen.jpg deja de ser contenido y pasa a ser presentación.

Pero, si el css no estuviera en un archivo aparte, sino inline:

index.html
<div class="foto" style="background: url('imagen.jpg') no-repeat;"> </div>

Entonces, imagen.jpg se podría considerar como contenido.

Cierto que está definido usando CSS, pero es inline, está pegado al HTML y en el flujo de trabajo se puede tratar de modo similar a un img. Es como si fuera contenido.

Estas serían formas de definir contenido de manera no tradicional:
  • Usando background en inline css
  • Usando un inline script
    <div class="texto"><script>document.write('Hola Mundo!');</script></div>



2012/07/05

L Button

¿Es posible hacer hover de un botón con forma que no sea rectangular (por ejemplo, con forma de L)?

Aquí un ensayo de la idea: http://jsfiddle.net/rulokc/evbhg/

2012/05/28

Publicar página web en GitHub

Es posible usar GitHub para publicar una página web estática.

Por ejemplo, para un portafolio. A continuación, como empezar con el index.html.

  • Siendo usuario de GitHub, crear el repositorio portafolio. Elegir que cree el README.
  • Clonar el repositorio: git clone git@github.com:myusername/portafolio.git
  • Crear el branch gh-pages: git checkout -b gh-pages
  • Crear index.html y agregarlo: git add .
  • Commit: git commit -am "created index.html"
  • Push: git push origin gh-pages
  • Revisar http://myusername.github.com/portafolio/

2012/05/25

Vertical Site

Introducción
La motivación fue hacer un site similar a:
Revisando believein (pude bajar el site usando wget, Firebug y un poco de paciencia), me resultaba un poco difícil encontrar la clave del comportamiento que veía.

Encontré una aproximación en Curtain.js. Sin embargo, cuando requería modificar la presentación, también me resultaba un poco difícil encontrar dónde hacerla.

Decidí reinventar la rueda de este caso, para tratar de comprender las ideas del proceso de solución.

Los sites que revisé me dieron pistas.

En este tutorial trato de resumir el proceso.

vertical-site@github

Simple HTML
  • Todo el contenido está presente en el mismo documento.
  • El contenido se divide en secciones a las que denomino pages.
  • Cada page es el destino de un link del menú. Esto permite una navegación simple a enlaces internos.
Aplicando estilos básicos:

index.html
style.css

Nav fixed
  • Se fijan los elementos de navegación: cabecera y menú.
    En simple_html, estaban dentro de page-0 (para permitir ver el menú cuando se fuera a HOME). Como ahora serán siempre visibles, eso no es necesario.
  • Se implementa un indicador de posición, que señale en el menú la página activa.
    • En el menú, aparece resaltado el link a.active
    • El link se activa si el url cambia
    • El url cambia
      • cuando se ingresa a mano
      • cuando se hace click en un enlace del menú
      • cuando se hace scroll
    • El plugin address permite responder ante un cambio del url.
index.html
style.css
script.js

Scrollto
  • Scroll animado suave.

index.html
style.css
script.js

(continuará...)

2011/07/08

Generación modular de HTML

Actualmente, cuando desarrolla un sitio usando cierto framework, no lo puede modificar con otro. Si está metido en esto, puede parecer obvio y hasta natural. Pero, si lo vemos en perspectiva, es algo así como una limitación por diseño. Algo que se podría mejorar.

Sites estáticos y dinámicos
Aunque el objetivo final es enviar html al navegador, en el desarrollo de sites dinamicos el paso intermedio es crear un conjunto de archivos que generen el html que se desea.

Cuando se trata de sites estáticos es más simple. Uno coloca los archivos en el directorio web y el servidor web los envía al navegador tal cual. Esos archivos son html, css, javascript, o imágenes que el desarrollador puede modificar con la libertad de elegir entre muchas herramientas para eso.

Cuando se trata de sites dinámicos las cosas se suelen complicar. En general, primero se plasma el diseño en un site estático, que luego es desmantelado para ver el modo de generarlo. Finalmente, se obtiene el site dinámico, que actúa como un generador total del html que se desea.

Ese suele se el enfoque más usado. Practicamente siempre que use C, Java, PHP, Ruby, Python, o lo que sea, lo que construye es siempre un generador total de html.

Frameworks exclusivos
El enfoque de la generación total tiene el problema de tender a soluciones monolíticas, con sus vicios asociados.

Si quiere modificar el site, tiene que modificar el generador, y tiene que entender el framework-que-todo-lo-hace.

Cuando un framework mejora, esa nueva versión no le sirve para el site que hizo con la versión antigua y tendría que reescribir el site bajo los nuevos términos.

Si otro framework implementa una característica que le gustaría, tendrá que esperar hasta que sea implementada, otra vez, en los términos del framework que usted usa.

Un montón de trabajo repetido.

Frameworks inclusivos
Una alternativa podría ser hacer generadores modulares. En lugar de generar el html de toda la página, un generador modular sólo produce el html de cierta región específica.

Para indicar dónde colocar el html dinámico, habrían algunas alternativas:

  • Que la página use javascript, obtenga el resultado y lo coloque.
  • Que la página use un tag especial que se reemplace por el contenido dinámico.
  • Que el servidor ubique los lugares dónde hacer el reemplazo y los haga.

La primera alternativa es relativamente asequible con lo que ya tenemos. Para las otras, habría que hacer un framework que se encargue de hacer los reemplazos adecuados (por ejemplo uphp).

Ya mismo podríamos empezar a desarrollar sites de ese modo. Una ventaja grande de usar generadores modulares, es que no importa en que lenguaje de programación se hacen, ni que framework usan, ni que versión del framework. Simplemente se usan. Podría usar generadores modulares escritos en C, Java, PHP, Python y Ruby... todos juntos!

2011/04/27

.htaccess para proteger index.html

Se puede usar .htaccess para proteger el acceso a un determinado archivo en un directorio. En este caso, se desea proteger el acceso a http://example.com/protegido/

.htaccess
En el directorio que contiene a index.html:

<FilesMatch index.html>
AuthUserFile /var/www/.htpasswd
AuthType Basic
AuthName "Pagina Privada"
Require valid-user
</FilesMatch>

.htpasswd
/var/www/.htpasswd se puede crear usando el comando htpasswd:

cd /var/www
htpasswd -c .htpasswd uuu

Donde uuu es el nombre del usuario al que se quiere dar acceso a ese directorio.

Files o FilesMatch
Inicialmente habia usado Files en lugar de FilesMatch, pero me permitía entrar al directorio omitiendo index.html en el url.

Por ejemplo, si el url era:

http://example.com/protegido/index.html

Podía entrar con:

http://example.com/protegido/

En cambio, con FilesMatch se protegieron ambos accesos.

2011/02/16

Cómo centrar un bloque en una página 2

En el artículo Cómo centrar un bloque en una página, contaba sobre un método que venía utilizando para lograr centrar un bloque en una página.

Ayer, un amigo me mostró una página posicionada de ese modo que no cabía en la ventana de su navegador Safari. Este mostraba el centro pero no permitía alcanzar la cabecera, ni siquiera usando la barra de scroll. En otros navegadores, como Firefox, Chrome e incluso Internet Explorer, si un bloque no cabe en la ventana, se muestra lo que quepa, de arriba hacia abajo. Pero en el suyo lo hacía desde el centro hacia afuera.

Comprobé que otras páginas que había hecho usando ese método presentaban el mismo problema cuando las veía con Safari y reducía las dimensiones de la ventana.

Buscando la explicacion a esto, encontré el artículo Easy Vertical Centering with CSS, que muestra un método diferente a los usuales, bastante simple y que, sorprendentemente, funciona en todos los navegadores en los que lo he probado, incluyendo Firefox 3.6, Chrome 9, Safari 5, IE8 e IE6.

La idea
La idea básica es mover el top del bloque de contenido al centro de la página y luego corregir el desplazamiento subiéndolo la mitad de la altura del bloque de contenido.

Usualmente, en el bloque de contenido, se usa algo como:

#page {
  width: 960px;
  height: 684px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -342px;
  margin-left: -480px;
}

Pero presenta el problema del que estamos hablando, que cuando la página es mas alta que la ventana es difícil alcanzar la cima.

Hay otro método que usa una técnica ingeniosa: usar un bloque flotante para jalar al bloque de contenido. Una propiedad del bloque flotante es que jalará mientras se pueda; si algo se interpone (como otro bloque o el borde de la ventana), dejara de hacerlo. Es justamente lo que se necesita.

Aquí, el HTML de una página que usa ese método:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {
 height: 100%;
 margin: 0;
 padding: 0;
}
body {
 background-color: #eed;
 min-width: 960px;
 min-height: 683px;
}
#vertical-float {
 float: left;
 height: 50%;
 margin-top: -342px; /* half vertical height*/
 width: 100%;
}
#page {
 clear: both;
 background: #fff;
 width: 960px;
 height: 683px;
 margin: 0 auto;
 overflow: auto;
}
</style>
</head>
<body>
<div id="vertical-float"></div>
<div id="page-wrapper">
  <div id="page">
    <h1>Content</h1>
  </div>
</div>
</body>
</html>

Observar que la información de la altura del bloque de contenido (#page) está presente tanto en el bloque de contenido como en el bloque auxiliar (#vertical-float).

Referencias

2010/08/13

Personalizando la pantalla 404 en Apache

Cuando se intenta acceder a una dirección que no se reconoce en el site, el webserver responde con una página de Error 404: Document Not Found.

Es posible personalizar esta página para que sea más informativa o, al menos, más agradable de ver que el mensaje en blanco y negro que viene por default.

En un servidor web Apache , es posible hacerlo modificando la página de error 404 del sistema, o indicando en su archivo de configuración el nombre de otra que preparemos para usar en su lugar.

Sin embargo, hay una opción que me parece mas flexible. Es usar un archivo .htaccess en el directorio, indicando cuál será el archivo que se presentara para el error 404.

Esto requiere que Apache tenga activado el módulo mod_rewrite y permita el rewrite en ese directorio. Me parece que suele estar configurado de ese modo en la mayoría de hostings.

Si se tiene acceso a la configuración de Apache (/etc/httpd/conf/httpd.conf en Linux CentOS), debe haber un bloque similar a:


<Directory "/var/www/html/mydir">
    Options Includes Indexes FollowSymLinks MultiViews
    AllowOverride FileInfo
    Order allow,deny
    Allow from all
</Directory&gt


Donde mydir es el directorio donde queremos colocar el .htaccess. También puede ser AllowOverride All, que incluye la opción FileInfo.

La configuración afecta al directorio y todos sus subdirectorios, a menos que para ellos se indique otra cosa.

.htaccess
ErrorDocument 404 /error-docs/HTTP_NOT_FOUND.html

Esto indica la página que se presentará cuando ocurra el error 404. La ruta es relativa a la raíz del servidor web, como en un URL. Por ejemplo, la ruta /error-docs/HTTP_NOT_FOUND.html, puede corresponder al archivo /var/www/html/error-docs/HTTP_NOT_FOUND.html.

En la página 404.html, ya que puede ser llamada desde cualquier ubicación, los url que se usen deben ser absolutos.

Páginas de error

Las principales son:
400: Bad request
Cuando el servidor no entiende la solicitud por un error de sintaxis.
401: Unauthorized
Cuando el usuario no ha sido autenticado para acceder.
403: Forbidden
El servidor no puede ejecutar la solicitud.
404: Not Found
El servidor no puede encontrar la direccion solicitada.
500: Internal Server Error
El servidor ha encontrado una situacion inesperada que no le concretar la respuesta.
Esta es una lista más completa que se podría incluir en el .htaccess:

ErrorDocument 400 /error-docs/HTTP_BAD_REQUEST.html
ErrorDocument 401 /error-docs/HTTP_UNAUTHORIZED.html
ErrorDocument 403 /error-docs/HTTP_FORBIDDEN.html
ErrorDocument 404 /error-docs/HTTP_NOT_FOUND.html
ErrorDocument 405 /error-docs/HTTP_METHOD_NOT_ALLOWED.html
ErrorDocument 408 /error-docs/HTTP_REQUEST_TIME_OUT.html
ErrorDocument 410 /error-docs/HTTP_GONE.html
ErrorDocument 411 /error-docs/HTTP_LENGTH_REQUIRED.html
ErrorDocument 412 /error-docs/HTTP_PRECONDITION_FAILED.html
ErrorDocument 413 /error-docs/HTTP_REQUEST_ENTITY_TOO_LARGE.html
ErrorDocument 414 /error-docs/HTTP_REQUEST_URI_TOO_LARGE.html
ErrorDocument 415 /error-docs/HTTP_UNSUPPORTED_MEDIA_TYPE.html
ErrorDocument 500 /error-docs/HTTP_INTERNAL_SERVER_ERROR.html
ErrorDocument 501 /error-docs/HTTP_NOT_IMPLEMENTED.html
ErrorDocument 502 /error-docs/HTTP_BAD_GATEWAY.html
ErrorDocument 503 /error-docs/HTTP_SERVICE_UNAVAILABLE.html
ErrorDocument 506 /error-docs/HTTP_VARIANT_ALSO_VARIES.html

Notas de compatibilidad

Cuando no se define una página de error, el navegador puede presentar su propia versión personalida. Seguramente lo habra notado. Los mensajes de "Página no existe" son diferentes en IE, Firefox, Chrome, etc.

Algo curioso es que Chrome insistira en presentar su propia versión, a menos que la nuestra tenga al menos 512 bytes de tamaño.
IE7, Firefox 3.6.8 y Safari 5 sí muestran nuestra versión si estuviera disponible.

Referencias

Una forma de maquetear

El patrón base de la técnica que describo es usar un elemento posicionado absolutamente dentro de otro posicionado relativamente o absolutamente.

El uso de una imagen guía de fondo y la aplicación de transparencia a los elementos que queremos calzar es de mucha ayuda para posicionarlos con precisión.

Ojalá le sirva de ayuda en este tipo de tareas. Se agradecen comentarios y sugerencias.

Lea más aquí: http://www.scribd.com/doc/35824410/Una-forma-de-maquetear


2010/07/26

Fondo de página redimensionable

PROBLEMA

Cómo lograr que el fondo de una página sea redimensionable.

SOLUCION

La técnica consiste en colocar un img con un width=100%:

<img src="friends-and-moon.jpg" width="100%"/>

Sin embargo, a menos que se trate de un popup, aparecerán barras de scroll para permitir ver el resto de la imagen que no esté en pantalla.

Para evitar eso, se coloca el img dentro de un div con estilos adecuados:

body {
  margin:0;
}
#bg {
  width: 100%; height: 100%; left: 0px; top: 0px; position: fixed;
}
#container {
  position: absolute; top: 0; left: 0; width: 100%;
}
<!-- ... -->
<div id="bg"><img src="friends-and-moon.jpg" width="100%"/></div>
<div id="container">
<!-- content -->
</div>
Como se observa, luego el contenido de la página se puede colocar en un div posicionado absolutamente sobre la imagen. De ese modo se simula un fondo de página redimensionable.

El problema de la presentación del scroll se soluciona de este modo en los navegadores estandar, pero persiste en IE6.

Puede ver un demo aquí.

REFERENCIAS

2010/07/23

Personalizando bullets

Normalmente, una lista tipo ul luce así:
  • Item 1
  • Item 2
  • Item 3
Se puede usar CSS para cambiar el tipo del bullet (que por default es disc):
list-style:disc
  • Item 1
  • Item 2
  • Item 3
list-style:circle
  • Item 1
  • Item 2
  • Item 3
list-style:square
  • Item 1
  • Item 2
  • Item 3
list-style:none
  • Item 1
  • Item 2
  • Item 3
list-style:url(flecha_roja.gif)
  • Item 1
  • Item 2
  • Item 3
Para controlar la posición del bullet, se puede usar la técnica de poner la imagen como fondo del item.
En este ejemplo aplico los estilos en línea, para ilustrar la idea. Sin embargo, en un caso real, lo usual es que use clases y bloques u hojas de estilo para indicar lo mismo.

<ul style="list-style:none;">
<li 
  style="background:url(flecha_roja.gif) 1px 2px
  no-repeat; padding-left:10px;">
  Item 1: Bullet más cerca y centrado</li>
<li
  style="background:url(flecha_roja.gif) right 2px
  no-repeat; width: 250px;">
  Item 2: Bullet a la derecha</li>
</ul>

  • Item 1: Bullet más cerca y centrado
  • Item 2: Bullet a la derecha

Puede ver un demo en aquí

Crédito de la imagen: http://www.robbinssports.com

2010/07/09

Cómo centrar un bloque en una página

Centrar un bloque tanto horizontal como verticalmente es algo que se requiere a veces. Lo ideal es que el centrado se acomode automáticamente cuando la ventana del navegador se redimensiona. La solución podría ser más fácil, pero la familia IE, dificulta un poco el problema.

Nota
Estas soluciones funcionan en la mayoría de navegadores, incluso en IE6, pero recientemente encontré que no es así en Safari. Puede encontrar un método alternativo, que funciona en todos los navegadores, en el artículo Cómo centrar un bloque en una página 2.
    Soluciones
    • En los navegadores estandar (principalmente no-IE6), para lograr que un bloque, por ejemplo #content, de 400px por 100px, quede centrado en la página, se le puede aplicar los siguientes estilos:

          #content {
            width: 400px;
            height: 100px;
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            margin: auto;
            overflow: auto;
        }

      El truco aquí es que el margin: auto también sirve para el centrado vertical si se especifica height, position: absolute, y además top: 0; right: 0; bottom: 0; left: 0;
      Una limitacion de esta solución es que la altura es fija. El overflow: auto es para que, cuando el contenido haga que #content sobrepase la altura especificada, aparezca un scroll.
    • En IE6, lo anterior no funciona. Es necesario colocar #content dentro de un #container, y usar los siguientes estilos:

          #container {
            position: absolute;
            top: 50%;
        }
        #content {
            width: 400px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            top: -50%;
            overflow: none;
        }

      Aqui se usa la técnica de mover el top del #container hacia abajo el 50% de la altura de su contenedor, body, y luego el top del #content 50% hacia arriba de la altura del mismo #content (debería ser de su contenedor, #container, pero este es un bug de IE6, paradójicamente util para resolver este problema mejor que en el caso estándar, pues permite que la altura vaya más allá del inicial de 100px mientras el bloque se acomoda automáticamente siempre en el centro).
    • En IE7, lo anterior no funciona (así que hay cosas que funcionan diferente en IE6, IE7 y IE8). Es necesario agregar un #container2, y usar los siguientes estilos:

        #container {
          position: absolute;
          height: 50%;
          width: 100%;
        }
        #container2 {
          width: 100%;
          position: absolute;
          bottom: 0;      
        }
        #content {
          background-color: gold;
          width: 400px;
          height: 100px;
          overflow: auto;
          position: relative;
          margin: 0 auto;
          top: 50%;
        }

    • Para combinar estas soluciones en un paquete que funcione para ambos casos, se puede usar la técnica del hack underscore.
      La idea de la técnica es simple e ingeniosa: Normalmente, una propiedad css que comienza con un _, #, un punto, o un número es ignorada por los navegadores estándar (de hecho, anteponer un número al nombre de la propiedad es un truco util para desactivarla), pero IE6 filtra la cadena quitándole ese primer caracter, si es _ o #, para usárla normalmente. De ese modo, sólo para IE6, _position, o #position, se vuelven position, por ejemplo. Del mismo modo, IE7 filtra el punto y .position se vuelve position.
      Asi, luego de tener las cosas listas para los navegadores estándar, se puede intentar agregar o sobrescribir lo que necesitemos para IE6 e IE7, como se muestra a continuación:

        #container {
          _position: absolute;
          _top: 50%;
          .position: absolute;
          .height: 50%;
          .width: 100%;
        }
        #container2 {
          .width: 100%;
          .position: absolute;
          .bottom: 0;      
        }
        #content {
          background-color: gold;
          width: 400px;
          height: 100px;
          position: absolute;
          top: 0; right: 0; bottom: 0; left: 0;
          margin: auto;
          overflow: auto;
          _position: relative;
          _margin: 0 auto;
          _top: -50%;
          _overflow: none;
          .position: relative;
          .margin: 0 auto;
          .top: 50%;
        }

    Referencias

    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í.