:: Entendiendo algunas siglas de los altos cargos en las empresas

Son muchas las siglas que vemos a diario por lo que en la siguiente infografía nos ayudarán a conocer algunas de ellas.
CEO. Responsable de la gestión y dirección administrativa de la empresa

COO. Supervisor del funcionamiento del sistema de creación y distribución de productos de la empresa

CMO. Responsable de las actividades de marketing

CFO. Encargado de la planificación económica y financiera de la empresa

CIO. Responsable de los sistemas de tenologías de la información

Y hay muchos más.

:: UILang. Librería javascript para programar con lenguaje natural

Las interacciones del usuario con un portal web consisten a menudo en mostrar u ocultar una capa al pulsar sobre un elemento, lanzar cuadros de diálogo modales, etcétera.
Lograr estos comportamientos nos obliga a programar haciendo uso de html,css y javascript, a menudo con algún plugin o librería, lo que implica tener ciertos conocimientos técnicos.

UILang es una librería javascript de apenas 1 KB que nos permitirá definir estos comportamientos haciendo uso del lenguaje natural.
Por ejemplo si tenemos una capa que deberá ocultarse al pulsar sobre un botón, el código necesario será el siguiente:

< code >clicking on ".show" adds class "popup" on "#notification"< /code >

De esta manera, describimos por medio de determinados verbos el comportamiento deseado.
El código completo sería el mostrado a continuación:

< !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 >Tienes nuevos mensajes.< /p >
  < button class="hide">Ocultar

< /div >

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

Más información en: http://uilang.com/

:: AUI. Cuadro de diálogo modal

Alloy es un framework javascript utilizado - entre otros - por el CMS Liferay, que lo incluye de forma nativa a partir de las versión 6.0.

Este framework fue construido a partir de YUI 3, otro framework desarrollado por Yahoo, por lo que Alloy dispone de las funcionalidades originales.

En definitiva, Alloy implementa funcionalidades para la mayoría de código desarrollado para Liferay.



Ejemplo de diálogo modal:

< script type='text/javascript' >
AUI().ready('aui-dialog', function(A) {
   var instance = new A.Dialog({
      bodyContent: 'Contenido del cuadro de diálogo',
      centered: true,
      constrain2view: true,
     destroyOnClose: true,
     draggable: true,
     height: 250,
     resizable: false,
     stack: true,
     title: 'Ejemplo de diálogo modal',
     width: 500,
     modal:true,
     cssClass: 'clasePrueba',
     id: 'identificadorDialog',
     buttons: [
       {
           text: 'Alerta1',
           label: 'Aceptar',
           handler: function() {
           alert('alerta1');
       }
     },
      {
         text: 'Alerta2',
         label: 'Cancelar',
         handler: function() {
         alert('alerta2');
      }
    }
   ]
 }).render();
});
< / script >

El significado de los distintos parámetros es el siguiente:

bodyContent (string): Es el contenido del cuadro de diálogo, el cual puede contener texto plano, código o portlets

centered (boolean): Establece si el cuadro de diálogo aparecerá o no centrado en pantalla

constrain2view (boolean): Comprime el cuadro de diálogo para que sólo se vea la región visible del portlet.

destroyOnClose (boolean): Destruye el cuadro de diálogo cuando lo cerramos. En caso de no destruirlo, quedaría creado pero oculto

draggable (boolean): Establece si el cuadro de diálogo podrá ser o no re-ubicado en pantalla

height (int): Establece la altura del cuadro de diálogo

resizable (boolean): Establece si el cuadro de diálogo podrá ser o no re-dimensionado

title (string): Establece el título del cuadro de diálogo

width (int): Establece el ancho del cuadro de diálogo

modal (boolean): Establece si es cuadro de diálogo es o no modal

butons (array): Permite añadir botones al cuadro de diálogo, estableciendo la acción tras su pulsación

close (boolean): Muestra el  icono de cerrar el cuadro de diálogo

cssClass (string): Permite añadir una clase al cuadro de diálogo

id (string): Asigna un identificador al cuadro de diálogo