ECMAScript Menu System

Via Roger Johansson (456 Berea Street): Permanentemente hablo/escribo sobre la separación de contenido y presentación y de la combinación XHTML/CSS para lograrlo, pero he evitado conscientemente el tema de la separación de la capa lógica porque no es mi fuerte. Sí, puedo hacer JavaScript, DOM y todo eso si lo necesito, pero no es mi tema.

Para entender mejor el concepto de la separación de lógica y contenido, podemos recurrir a la separación de contenido y presentación. Para hacer el contenido independiente del diseño o presentación removemos toda descripción visual del contenido y le damos a éste una estructura semántica que lo describa y enriquezca. La presentación la delegamos a tecnologías como CSS que se encargan, idealmente, de la descripción visual sin afectar la estructura subyacente del contenido. Dada esta separación de capas el contenido es mucho más versátil y puede ser reciclado o reutilizado de modo independiente.

Del mismo modo, la tendencia mayoritaria es utilizar scripting (normalmente JavaScript) de un modo que se mezcla con el contenido dentro del HTML. La idea de la separación de lógica y contenido es la misma que citábamos antes: independizar el contenido de la funcionalidad. Así, mediante técnicas estándares como ECMAScript y DOM se genera una capa independiente de lógica que complementa al contenido, pero no lo contamina.

La excusa para plantear la separación de la lógica y el contenido la encuentro en el artículo de Gez Lemon ECMAScript Menu System. En él describe detalladamente el proceso de creación de un script para menús colapsables separando completamente la lógica del contenido. El ejemplo, operativo en IE, Mozilla y Opera (no sé del comportamiento en otros browsers), es incluso completamente accesible mediante el soporte de la activación de eventos mediante teclado, alternativamente al puntero.

Se los recomiendo.