Esta semana hemos descubierto una herramienta de programación interesante para web designers. Uilang es un lenguaje de programación sencillo, centrado en la interfaz de usuario que permite escribir código, declarar de forma sucinta en inglés, directamente en el código HTML y utilizando un elemento <code>.
La lógica de uilang se basa en la manipulación de clases existentes en elementos de HTML y utiliza estas clases de CSS para transformar elementos cuando se realiza un clic. En este momento es posible mostrar, esconder o animar elementos. Uilang permite que se creen comportamientos de interfaz de usuario típicos, tales como tabs, popovers, o menús deslizantes, entre otros.
Ejemplo
Acordeón
Este ejemplo del sitio web oficial de uilang lo que se hace, una vez creado el acordéon, es añadir una clase "open" al elemento en que se ha hecho el clic, por ejemplo en "TRANSPIRA".
Código
<!doctype html> <title>Example</title> <script src=uilang.js></script> <style> h1, h1::before, p { transition: .4s } h1 { cursor: pointer } h1::before { background: url(blue-arrow.svg); transform: rotate(-90deg) } h1.open::before { transform: none } h1.open ~ h1 { /* slide down all the h1 following the open one */ transform: translateY(24px) } p { opacity: 0; pointer-events: none } h1.open + p { opacity: 1; pointer-events: auto; transform: translateY(8px) } </style> <h1 class=open>ASPIRA</h1> <p>Mentoring, coaching, evaluación y valoración profesional... <h1>TRANSPIRA</h1> <p>Ecosistema de contratación entre inusuales... <h1>INSPIRA</h1> <p>Reconocimiento y visibilidad de los perfiles de profesionales... <code> clicking on "h1" removes class "open" on "h1.open" clicking on "h1" adds class "open" on "target" </code>
Resultado
ASPIRA
Mentoring, coaching, evaluación y valoración profesional...
TRANSPIRA
Ecosistema de contratación entre inusuales...
INSPIRA
Reconocimiento y visibilidad de los perfiles de profesionales...
clicking on "h1" removes class "open" on "h1.open"
clicking on "h1" adds class "open" on "target"
En el mismo sitio web es posible encontrar otros ejemplos interesantes que se pueden bajar y experimentar.
Consideraciones
- uilang es una herramienta sencilla, pero útil y práctica para no programadores. Infelizmente algunos de sus elementos necesitan ser repensados. El elemento <code>, por ejemplo, que es el responsable por la magia, puede generar confusión, pues es el elemento que se utiliza regularmente para representar "un fragmento de código". El equipo de uilang reivindica solo se ejecutará el <code> relacionado con uilang.
- Las declaraciones básicas que se hacen con uilang se podrían hacer con Jquery, la ventaja es que además de uilang ser casi en lenguaje natural esta declaración pesará menos que un script de Jquery.
- Uilang solamente reacciona a clics y es posible que sea poco para toda una biblioteca, pero por algún sitio hay que empezar y podrán existir en el futuro otras aplicaciones. Eso sí, si no se muere por el camino.
Como otros elementos de la programación declarativa, uilang me parece una forma interesante de hacer que no programadores se familiaricen con herramientas de programación. De hecho esta parece ser una de las razones por que Benjamin de Cock decidió crear uilang. La verdad es que es apasionante poder dar una orden a un script, entenderlo y ver que funciona¡
Fuentes:
