Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

El lenguaje para las interfaces de usuario

El lenguaje para las interfaces de usuario 02.SEP.14

Alvaro José Rios Ch
Fundador WebBizarro

Las interfaces de usuario son una parte muy importante de las aplicaciones web ya que estas son la carta de presentación de nuestro trabajo, hacer interfaces de usuario personalizadas puede complicarse un poco sobretodo para personas que no sean muy hábiles con el JavaScript por eso solemos usar librerías como JqueryUI para crear los elementos en estas interfaces.

Pero si queremos un diseño personal y queremos que sea fácil de crear y mantener tenemos una alternativa muy interesante llamada uilang, se trata de una librería que nos permite crear nuestras interfaces con CSS y añadirles acciones con un lenguaje muy simple de entender.

Por ejemplo, queremos mostrar una pequeña notificación colocamos el siguiente código html

<!doctype html>
<title>Example</title>
<script src=uilang.js></script>

<style>
  /* Font styles, colors, etc. omitted for clarity */
  #notification {
    transition: .8s
  }
  #notification.hidden {
    opacity: 0
  }
</style>

<div id=notification>
  <p>You have 3 unread messages.</p>
  <button class=hide>Hide</button>
</div>

Este código nos mostrara una pequeña notificación que podemos personalizar a nuestro gusto y que este acorde con nuestro sitio.

Ahora para que el botón Hide oculte la notificación colocamos el siguiente código.  

<code>
  clicking on ".hide" adds class "hidden" on "#notification"
</code>

Como pueden ver indicamos primero la acción que dispara el evento, luego el elemento sobre el que se espera la acción, seguido a esto colocamoslo que se debe haceren este caso agregar la clase hidden y finalmente el elemento sobre el cual se agregara la clase. Este es un lenguaje muy simple que les permitirá a diseñadores o maquetadores programar las acciones en las interfaces de usuario sin tener que ser expertos en JavaScript así que no debemos dejarla fuera de nuestros marcadores.