Closures- Un primer enfoque

Vamos a tocar un tema que estos últimos días a los integrantes de 3p nos tuvo algo ocupados: Closures en javascript.

"Un closure es un tipo especial de objeto que combina dos cosas: una función y el contexto en el que fué declarada". La definición no ayuda mucho a entender el concepto, así que vamos a plantear un ejemplo sencillo

En Javascript podemos definir funciones en cualquier momento, incluso dentro de otra función. Por ejemplo:

Ver ejemplo en JSFiddle

Dentro de la función sumar tenemos:

• La variable total que posee la sumatoria resultante y será el resultado de la ejecución de la función
• La función suma que agrega a total el número que recibe pro parámetro
• Un ciclo for que recorre una serie de número de números y los suma
• Retorno de la función: Se devuelve la sumatoria total

Lo importante del código anterior es que entendamos que una función puede convivir dentro de otra. Ahora, será más sencillo comprender que son. Vamos a un nuevo ejemplo donde usemos uno:

Ver ejemplo en JSFiddle

incrementar es un clousure porque, usando la definición que dimos arriba, incorpora una función (sumar) y su contexto (el totalizador i). Ambos, existian cuando se llamó a crearFuncion() para instanciar la variable incrementar

Twittear Seguir a @3p_ar

Leer más...

Metodologías de Trabajo - Kanban

Después de varios años aplicando metodologías ágiles en nuestro trabajo, nos resulta muy enriquecedor compartir con nuestros clientes nuestra experiencia en el uso de las mismas.

En algunas reuniones que tuvimos con varios de ellos vimos cómo se entusiasmaban con la idea de empezar a implementar cambios pero se encontraban con las dudas y miedos lógicos de los equipos que quieren iniciarse en este campo. La complicación, en muchos casos, es tener que repartir las tareas diarias entre la resolución de incidentes de sus propios usuarios internos y el desarrollo planificado de mejoras o modificaciones en las aplicaciones.
Más allá de recomendar que en estos casos recurran "a su profesional de confianza" quien sabrá guiarlos en la adopción de nuevas metodologías, nos pareció interesante compartir un artículo publicado por Vikram Gupta en InfoQ, donde en un reportaje al Dr. Arne Roock - trainer y coach de Lean y Kanban (inglés) en it-agille de Alemania - twitter - nos presenta un "quick-start guide" sobre la implementación de Kanban.

Dejamos aquí un resumen del artículo en español y el link a la versión original - en inglés - del artículo Implementing Kanban in practice.

Decisión de cambiar

El punto inicial que el Dr. Roock destaca para los equipos que están evaluando empezar a implementar Kanban es que el equipo debe estar convencido y de acuerdo en la necesidad de cambiar. Agrego aquí que esa convicción es crucial para lograr cualquier cambio, independientemente de qué herramientas se estén evaluando. Además, según indica el Dr. Roock, el equipo debe acordar qué tipo de cambio quiere hacer

• un cambio Revolucionario, es decir, algo radical que de vueltas todo "patas para arriba"
• o un cambio "Evolucionario", algo gradual, duradero y natural, que es para lo cual Kanban está pensado.

Objetivos

En el reportaje al Dr. Roock éste aclara que para tomar Kanban como base de un cambio "evolucionario", existen 3 objetivos principales que deberían lograrse:

• Predictibilidad y mejoras en las entregas
• Visibilidad de las tareas a realizar, del trabajo completo
• Feedback Interno: observar, discutir y mejorar

Con todo esto, el 1er logro de implementar Kanban es tener una visualización general del trabajo, lo cual permite ordenarlo y mejorarlo.

Primeras consecuencias del cambio

Según la experiencia que el entrevistado ha tenido, algo normal en los equipos que se están iniciando con Kanban es que al tener a la vista la dimensión total del trabajo puede aparecer como primer preocupación la cantidad real de tareas que están "En progreso" (Work in Progress), es decir, tareas sin terminar. Este es un punto importante a partir del cual se puede comenzar a administrar mejor el trabajo.
Otra cosa que suele suceder es que al mejorar en el punto anterior, las tareas se empiezan a acumular en la columna de "Testing", para lo cual no siempre la mejor solución es incorporar nuevos testers, reacción normal de los equipos con este problema. Tal vez mejorar la calidad del trabajo que llega a Test,  automatizar algunas tareas o hacer que algunos desarrolladores hagan ese trabajo pueden ser soluciones alternativas con mejores resultados.

Herramientas
La mayoría de los equpos que trabajan con Kanban tienen por lo menos algunas de estas prácticas:

1. Daily stand-up meetings o "reuniones diarias"
2. Retrospectivas
3. Kaizen meetings

Además, el Dr. Roock recomienda llevar algún tipo de métricas para saber si se está yendo en el sentido correcto y se están logrando los objetivos.
Una de las herramientas que más destaca es la Pizarra (Kanban Board), que podemos ver en este ejemplo:

(imagen tomada de http://commons.wikimedia.org/wiki/File:Simple-kanban-board-.jpg)

 Ante la pregunta sobre cuáles deberían ser las columnas que formen parte de esa pizarra, el Dr. Roock dice que éstas DEBERIAN REFLEJAR LA FORMA REAL DE TRABAJO. Con lo cual, en el caso de equipos de desarrollo, por lo menos se necesitan dos, una para Desarrollo y otra para Testing.
El riesgo de tener mucha granularidad en las columnas (muchas columnas) hace que la pizarra deje de ser transparente. Para explicar esto el Dr. Roock refiere a la llamada regla de 3x3: "si se está parado a 3 metros de la pizarra, en 3 segundos debería verse fácilmente cómo va el trabajo". No se puede leer el detalle de cada tarea, pero se puede ver dónde se están apliando los papeles y dónde la gente se quedó sin cosas para hacer. Cuantas más columnas tenga la pizarra, esa visión general empieza a perderse.

La importancia de las Tareas En Progreso (WIP)

En scrum se manejan, en general, una cierta cantidad de historias que, si no se terminan en el sprint en curso pasan al siguiente, teniendo en cuenta el tiempo restante y la velocidad a la que se mueve el equipo. En Kanban esto es diferente, aunque el principio es el mismo. En Kanban se deben poner límites a los WIP - establecer una cantidad de tareas - por columnas, por swim lane o por persona. El truco está en balancear la demanda contra la capacidad, no se debe aceptar más trabajo del que se puede completar.

Cómo tratar las urgencias ("expedites")

Cualquier error que aparece en una aplicación que está en ambiente de Producción en Kanban es llamado expedite o urgencia. Si no se los atiende en forma inmediata el costo de dejarlos puede ser muy alto. En este caso una urgencia puede romper el límite establecido para los WIP. Este tipo de imprevistos debe resolverlo el equipo como tal y estar atento a la cantidad de urgencias que surgen para evaluar qué se puede hacer para achicar el costo de tener que afrontarlos.

Expansión de la práctica

Al momento de decidir la implementación de Kanban el Dr. Roock aconseja "empezar con las cosas sobre las que el el equipo tiene control" que en general están más relacionadas con temas de desarrollo. No es aconsejable involucrar en la pizarra tareas que corresponden o dependen de otros equipos. No hay que tratar de evangelizar, la mejor manera de expandir  la práctica, según el Dr. Roock, es lograr resultados y hacerlos visibles.
La idea primaria de Kanban es empezar de a poco con lo que se tiene, de a un equipo por vez, para después ir evolucionando.
Uno de los principios más importantes al empezar con esta práctica es respetar los roles actuales, los procesos y responsabilidades. Es decir, mantener los títulos, roles y responsabilidades, al menos al inicio. A medida que se va avanzando en la práctica y los miembros van ganando confianza en la forma de trabajo, se pueden introducir otros tipos de cambios.

Equipos distribuidos

(imagen http://barcelona.agile-spain.org/page/2/)

Volviendo al tema de la pizarra como herramienta importante dentro de esta forma de trabajo, el Dr. Roock recomienda cómo se puede usar cuando tenemos equipos distribuidos. Si bien hay varias herramientas para Kanban en el mercado, él recomienda tratar de mantener la pizarra física presente la mayor cantidad de tiempo posible, aún estando en dos locaciones distintas. El mayor desafío es la sincrinización de los equipos, pero hoy en día hay muchos medios que ayudan a la comunicación a distancia, además de usar algún esquema de soporte ("buddy system") en cada región.
Me pareció muy interesante este esquema que sugiere el Dr. Roock. Se trata de tener un responsable en cada equipo que refleje los cambios de la pizarra que se dan en el otro equipo. Esto suena a hacer "doble trabajo", y lo es, pero por otro lado ayuda a mantener a los eqiupos comunicados no solamente para la tarea de mover los tickets.
La idea de la pizarra física ya no es tan sostenible en el caso de tener más de 2 equipos distribuidos y con grandes diferencias horarias. Aquí sí recomienda usar herramientas electrónicas además de aumentar el "ancho de banda" en la comunicación entre los miembres de todos los equipos . El objetivo principal deber ser la construcción de confianza, cosa que es más difícil de lograr a la distancia.
Buscar horarios comunes y nunca dejar de hacer las reuniones diarias, aunque sea con un solo miembro que represente a alguno de los equipos, son otras de las cosas que aconseja el entrevistado.

Consejo final

Según el Dr. Roock, lo que se trata de lograr con Kanban es entender el trabajo en sí y la manera en la que lo estamos haciendo. Este es el valor básico que tiene Kanban. SIn tener una idea clara de estos puntos es muy difícl mejorar. Con lo cual, no hay que tratar de aplicar Kanban "según los libros" sino, tratar de entender por qué son necesarios los límites a los WIP, por qué es necesaria la transparencia en el trabajo a hacer, entre otras cosas que nos permite ver Kanban.


Esperamos que este artículo sea de utilidad para aquellos que están empezando o evaluando la idea de un giro importante en la forma de llevar adelante el trabajo en equipo.

Para quienes quieran seguir entendiendo mejor Kanban, este otro artículo en español me pareció muy claro y merece ser leído Kanban como herramienta visual.

Twittear Seguir a @3p_ar

Leer más...

Reset.css y Normalize.css

Este pretende ser un artículo de opinión desde mi experiencia en el diseño acerca de los estilos predefinidos en los navegadores

Todos sabemos que por defecto los navegadores traen consigo estilos: Si escribimos en un .html un <h1> seguramente este se dibuje más o menos al doble de tamaño que la fuente normal y que esté en negrita. Pero  esto puede variar. No hay ninguna regla ni estándar que lo indique así que cada browser implementa el suyo

La problemática que esto nos genera es que ya desde el inicio estamos teniendo problemas para que nuestra web ofrezca la misma experiencia de usuario desde todos sus posibles puntos de acceso. Es ahí donde surgen 2 alternativas:

Reset.css

Reset.css es una hoja de estilos que quita todo el formato de los elementos: margin, padding, bordes, estilos de lista, tamaño de fuente, etc. De esta manera, tenemos la posibilidad de darle estilo propio a cada elemento

En un principio, en mis primeros diseños, era amante de esta hoja de estilos, porque me permitía configurar todo desde mi hoja de estilos. Pero con la práctica fui encontrando una debilidad: Cuando estoy maquetando, al no tener estilos predefinidos, cuesta distinguir que es cada cosa y eso no ayuda, es incómodo volver a ponerle valor a los elementos que reset.css le quitó. Es por esto que decidí inclinar la balanza y empezar a usar normalize.css

Normalize.css

Normalize.css lleva la funcionalidad de Reset.css a un nuevo nivel: ¿Para qué quitar todos los valores por defecto si podemos poner valores útiles a las etiquetas y usarlas para nuestro provecho? Y mi vida fue un poco más feliz

Con normalize, logro tener valores que me sirven visualmente y facilitan mi maquetación, es cierto que muchas veces algunos valores hay que modificar, pero son la minoría, con reset.css hay que modificar todos y cada uno

Para ser mucho más gráficos y dejar todo bien claro, vamos a utilizar el siguiente código html

Aquí visualizamos el resultado usando Reset.css

Y aquí usando Normalize.css (Comentando la linea donde se usa reset.css y descomentando la que importa normalize)

Espero que a alguno le sirva mi opinión y tampoco es la verdad, es simplemente una cuestión que resolví fijándome en la comodidad que me ofrece cada una de las herramientas

Twittear Seguir a @3p_ar

Leer más...

Probando Pentaho II -Creación de Dashboards

Continuando con visualización ...

Es muy interesante ver presentaciones hechas por otros. Encontrar relaciones inesperadas, comprender y comparar datos. Es el momento en el que decimos manos a la obra! Fácil? No!

Aquí tiene sentido tener en cuenta los consejos de otros. Uno de los gurúes en ese tema es Ben Shniderman., autor del  Visual Information-Seeking Mantra:

Overview first, zoom and filter, then details-on-demand.

Overview
'Visión de conjunto': Proveer un contexto general para entender los datos. Es el cuadro de la entidad completa que nuestra representación quiere mostrar. Muchos patrones en los datos solamente se pueden ver desde un punto de vista global.  La forma general de los datos en sí puede sugerir información subyacente.
Se pueden encontrar características significativas, para ser ser analizadas en forma particular. De la misma manera, la visualización de datos extraños nos permite no tenerlos en cuenta en el análisis.
Zoom
'Zooming' es una de las formas básicas de interacción con un gráfico. Es la técnica que permite salvar las limitaciones de resolución que para mostrar grandes cantidades de información.
Filtering
Otra de las formas básicas de interacción, permite achicar la cantidad de información mostrada por medio de un criterio de selección o búsqueda.
Details on Demand
. Permite proveer información adicional punto por punto, sin cambiar el enfoque. Es útil para poder relacionar el punto en particular con el resto del dataset, para identificar un elemento puntual entre varios o para relacionar atributos de varios datos. Brindando estos detalles por una acción simple, como 'mouse-over-selection', se puede mostrar información sin modificar el contexto general de la representación. Un ejemplo de información adicional en una base punto a punto son los 'tooltips'

Nos pusimos como objetivo mostrar datos por medio de gráficos con un poco de interacción.

Como comentamos en el artículo anterior, Pentaho resulta ser una buena opción Open Source. En particular, la opción de tableros de control o Dashbords.

Para esto, investigamos dos herramientas:

• Pentaho Design Studio
• WebDetails

Manos a la obra…con Pentaho Design Studio

Pentaho Desing Studio (PDS) es una herramienta de la suite Pentaho que se utiliza para describir y mantener Xactions. PDS está basado en el IDE de Eclipse (entorno integrado de desarrollo), esto nos da la pauta de que la UI (User Interface) es sumamente familiar e intuitiva.

Se puede bajar desde el mismo sitio en que se bajaron el resto de los componentes de Pentaho.

http://community.pentaho.com/projects/bi_platform/design_studio.php      ó

http://sourceforge.net/projects/pentaho/files/Design%20Studio/4.0.0-stable/

Para instalarlo, es conveniente descomprimir la carpeta de design-studio en el directorio 
…\design-tools\design-studio

Manos a la obra …con Pentaho y WebDetails

Por otro lado hay un framework creado por ‘Webdetails’,  disponible desde Pentaho (las últimas versiones)

Webdetails: es una compañía de 5 años de antigüedad, con base en Portugal, dedicada a desarrollar soluciones de Business Intelligence a medida para la plataforma de Pentaho.

Community Chart Components (CCC): es una librería de CTools,   sobre Protovis ( herramienta muy poderosa de visualización y open source) El propósito general de CCC es permitir incluir en los dashboards los gráficos básicos, sin perder extensibilidad. Heredan las propiedades de Protovis y permiten un alto nivel de customización.
Community Dashboard Framework (CDF) Proyecto que permite crear dashboards en forma amigable, poderosa y con ricas funcionalidades. Sobre Pentaho business intelligence Server. Es importante destacar que esta herramienta es mucho más amigable que la anterior (PDE) puesto que no exige grandes conocimientos de programación.

Algunos ejemplos que me gustaron son los dashboards de Webdetails.

Creación de Dashboards con CDE

Para crear el primer gráfico interactivo, fue muy útil el blog de Slawomir Chodnicki.

Tomamos varias ideas, incorporamos componentes no tradicionales e interacción.

Así salió un mapa de calor o 'heat-map' de las ventas por Internet de la base de Microsoft AdventureWorks. En el mapa de calor cada entrada tiene asignado un color de acuerdo con el valor asociado. De esta manera se pueden ubicar de un vistazo los regiones donde las ventas son mayores (amarillo), clickeando en el cuadro de la grilla es posible ver el detalle de ventas por región. Incorporamos así la interacción del usuario. El detalle a demanda está provisto por el tooltip sobre cada cuadro.

DashBoard: imagen inicial

Click cuadro valor chico

Click cuadro mayor valor, tooltip

Cómo llegar a esto?

1. Desde la consola general de Pentaho, Herramientas/ MarketPlace, hay una toolbar para instalar Saiku (C*Tools plug-ins). Se necesitan como mínimo  CDE, CDA y CDF .

2. Estamos consultando la base de datos de pruebas de Microsoft, AdventureWorksDW. Crear una conexión a la misma, usando el driver para SQL. Recordar instalarlo en:
...\biserver-ce\data\lib\jtds-1.3.0.jar

3. Crear un nuevo dashboard (New CDE Dashboard). Está compuesto por Layout, Components, Data Sources.

Dashboard -->Datasources:

Las queries para las dos consultas CustomerSales y RegionSales son:

 
SELECT EnglishProductcategoryName,EnglishCountryRegionName,SUM(salesamount)as sales 
FROM  dbo.FactInternetSales fs 
INNER JOIN DimCustomer c on fs.CustomerKey= c.CustomerKey
INNER JOIN DimProduct p on p.ProductKey = fs.ProductKey
INNER JOIN DimGeography g on g.GeographyKey = c.GeographyKey
INNER JOIN DimProductSubcategory ps on ps.ProductSubcategoryKey = p.ProductSubcategoryKey
INNER JOIN DimProductCategory dpc on dpc.ProductCategoryKey = ps.ProductCategoryKey
GROUP BY EnglishCountryRegionName,EnglishProductcategoryName

SELECT g.StateProvincename as State,
 cast(SUM(salesamount)/1 as int) as Sales 
FROM  dbo.FactInternetSales fs 
INNER JOIN DimCustomer con fs.CustomerKey= c.CustomerKey
INNER JOIN DimProduct p on p.ProductKey = fs.ProductKey
INNER JOIN DimGeography g on g.GeographyKey = c.GeographyKey
INNER JOIN DimProductSubcategory ps on ps.ProductSubcategoryKey = p.ProductSubcategoryKey
INNER JOIN DimProductCategory dpc on dpc.ProductCategoryKey = ps.ProductCategoryKey
WHERE EnglishProductcategoryname =${categoria} 
AND EnglishCountryRegionName = ${region}
GROUP BY StateProvincename

Los filtros de la segunda query dependen de dos parámetros. Es necesario crearlos previamente e ingresarlos en la propiedad Parameters del DataSource.

4. DashBoard-->Componentes:

Los componentes son los elementos que serán ubicados en el  layout.

• CCC Heat Grid
• Parameters 
• Table

Hay dos parámetros, categoría y región. Se usaran en la tabla de valores para filtrar la segunda consulta armada.
Hay una tabla, que tiene como parámetros región y categoría, como datasource 'RegionSales' y está ubicada en el elemento 'DetalleTabla' del html.
Finalmente un Chart, la tabla de doble entrada o Heat Grid.
No tiene parámetros. El datasource es 'CustomerSales'.
Hay dos colores asociados a máximo y mínimo valor.
Cómo se da la interacción en esta grilla?
Está definida como clickleable, y en el click action la siguiente función:

 
function f(scene){
    
var nuevaategoria=this.scene.atoms["series"].value;
var nuevaregion=this.scene.atoms["category"].value;
document.getElementById('vecategoria').innerHTML=nuevacategoria;
document.getElementById('veregion').innerHTML=nuevaregion;
 region=nuevaregion;
Dashboards.fireChange('categoria',nuevacategoria);
}

Dashboards.fireChange--> modifica el contenido del parámetro y el contenido de la tabla. Importante: la tabla debe tener los 'Listeners' configurados.

Tenemos dos elementos, con ids 'vecategoria' y 'veregion', que son actualizados con la última selección en la grilla.

El valueFormat de la grilla está asociado a una función que divide y agrega la unidad de medida, en este caso 'mil'

 
function f(scene){var sales=scene/1000 ; return sales.toFixed(0) +' K'}

5. Dashboard --> Layout

Para mostrar la categoría seleccionada en el click de la grilla, hay usamos el elemento 'vecategoria' . De la misma manera, está definido el elemento 'veregion'.



Quiero destacar el uso de dos 'Resources' que son .css asociados a la imagen. Se usaron para los colores de los encabezados, y en particular para customizar la tabla con el detalle por estado. Teniendo en cuenta que 'DetalleTabla' es el nombre asignado en la solapa layout para el contenedor de la tabla.

#DetalleTabla   tr
{  background-color:transparent;}
#DetalleTabla   td
{ background-color:transparent;font:"15px Arial"} 

Twittear Seguir a @3p_ar

Leer más...

Audio en HTML5

Audio y video son dos características sobrasalientes de HTML5 (del cual ya dimos un primer pantallazo en este post). Hoy vamos a aprender a implementar esta etiqueta y a hacerla compatible con todos los navegadores modernos (Que puedes mirarlos aquí).

Primer enfoque

El tag <audio> implementa audio en los navegadores sin necesidad de algún plugin (Flash por ejemplo). Es muy fácil de usar. Vamos a ver un ejemplo básico:

Tranquilos, estamos empezando, vamos a analizar nuestro código:

• width y height: configuran el ancho y alto del reproductor.
• src: indica la ruta donde está alojada la canción. Igual que con el tag <img>.
• controls: indica al navegador que muestre los controles mínimos para el manejo visual por parte del usuario (Play/Pause, Seek bar y volúmen).
• autoplay: indica al navegador si el audio iniciará su reproducción automáticamente cuando la página haya sido descargada.
• preload: especifica si el audio se descarga con la página, sólo su metadata o cuando el usuario de play.

Compatibilidad

Ahora que ya conocemos la implementación básica de esta etiqueta hablemos un poco de compatibilidad entre los navegadores.

Cada navegador utiliza un motor de renderizado. Para definirlos brevemente digamos que es el encargado de dibujar en el navegador lo que especifica el código (HTML + CSS), en este caso, la implementación del control audio.

Estos son los navegadores más importantes hoy en día y los nombres de sus respectivos motores de render:

• Chrome: webkit (Hoy en día están desarrollando Blink, su propio motor de render).
• Mozilla: gecko.
• Safari: webkit.
• Opera: presto.
• IE: trident.

Cada uno de estos motores implementa la etiqueta audio de manera distinta: los códecs que utiliza para reproducir el sonido es diferente en cada uno y cada cual apoya el que considera necesario (Es una pelea muy fuerte, tengamos en cuenta que empresas como Microsoft, Google, Apple y Mozilla Foundation están detrás de cada navegador).

Quieren que sea más claro? El ejemplo de código que vimos arriba NO FUNCIONA EN TODOS LOS NAVEGADORES (Sólo lo haría en IE9 o superior y en Chrome).

Por lo que es necesario modificar levemente nuestro código inicial para modificar el atributo src e indicarle a cada navegador que audio utilizar y con que códec reproducirlo.

Con este código estamos seguros que nuestro audio podrá oirse en todos los navegadores modernos. Aquellos que no implementen esta característica del estándar simplemente mostrarán: "Tu navegador no soporta audio HTML5".

Como pueden ver no cambió mucho, solo aislamos el atributo src a un tag dentro de audio y lo configuramos de acuerdo a nuestras necesidades.


Pueden ver la documentación oficial del tag audio en HTML5 en este enlace.

Twittear Seguir a @3p_ar

Leer más...

Que es HTML5 y por qué es importante

Estamos viviendo en una época de constantes avances, especialmente en la tecnología, dispositivos móviles y todo el mundo de las tecnologías de la información. Dentro de ese mundo HTML5 es un término del que toda la web hoy en día habla y te voy a contar por que

HTML es el markup con el que se construye la web, el "lenguaje" (Entre comillas porque no es un lenguaje) que interpreta el navegador para entender el contenido de nuestros sitios que como toda tecnología fue madurando hasta nuestros días donde tenemos entre nosotros la versión 5

HTML5 es la revolución que de repente llegó. Entender y usar HTML5 es comprender que hoy las tablets y los smartphones tienen un lugar fundamental en la vida de las personas, es entender que la web ha evolucionado (Mucho y para bien)

Y no solo me refiero a una versión más de HTML; HTML5 es un arco iris de cosas bonitas que permiten hoy crear la web de una manera sencilla, veloz y eficaz

Pero para que realmente sea aceptado este conjunto de tecnologías, se necesita que las empresas líderes en el desarrollo web estén ocupadas en empujar este crecimiento. Y eso es lo que hace Google, Apple, Microsoft, Adobe, Mozilla. No existe una sola empresa que viva y cree de la web que no enfoque sus esfuerzos en empujar hacia el futuro que se está construyendo con HTML5

Más arriba hablé acerca de un "arco iris de cosas bonitas", vamos a analizar de que está compuesto HTML5: 

• HTML5 Semantics: Permite hacer un SEO más eficiente y que Google entienda mucho mejor el contenido de mi web. También se mejora la accesibilidad
• Offline storage: Capacidad de llegar a disco
• Device access: Nos hace capaces de acceder al hardware como el acelerómetro, interfaces touch y geolocalización
• Connectivity: Con la ayuda de websockets se pueden diseñar aplicaciones en tiempo real
• Multimedia: Se implementa la etiqueta audio, video, canvas
• 3D Grapichs and effects: Podemos crear gráficos, efectos y animaciones
• Performance and integration: HTML5 y Javascript ahora son realmente poderosos
• C33: Se mejoró muchísimo el lenguaje por excelencia para aplicar diseño a la web. CSS3 es un lenguaje que todo diseñador debe manejar

Pero no sólo esto, también tenemos responsive design, retina design, web icons, font-face (Que está disponible desde IE6 pero se masificó su uso gracias a CSS3), frameworks como Bootstrap, validadores, precompiladores, minificadores y mil herramientas más que hoy están al alcance de nuestra mano

Que están esperando para aprender HTML5?



Cómo un primer pantallazo creo que esto es suficiente, dejo a continuación algunos links que me parecieron interesantes para seguir profundizando en el tema:

- HTML5 boilerplate:
Generador de plantillas básicas para nuestros proyectos con html5

- Como perder peso en el navegador:
Tutorial para mejorar el rendimiento de nuestro frontend

- Phonegap:
Framework enfocado a generar apps con html y javascript que puedan correr en plataformas móviles

- Introducción a HTML5:
Un análisis más detallado y profundo acerca de HTML5

Twittear Seguir a @3p_ar

Leer más...

Probando Pentaho I - Instalación

Como comenté en un artículo anterior,  Tercer Planeta se está introduciendo en el tema visualización de información. 
Generada la inquietud, fue necesario encontrar herramientas que nos permitan asociar los datos de nuestras bases con gráficos. Herramientas hay miles. Espectaculares. Pero, por supuesto, con altos costos de licencias. Una muy buena, es Tableau. Nos resultó muy fácil de instalar y usar. 
Existen también librerías de Javascript que nos permiten construir visualizaciones interesantes, entre ellas  protovis y D3.js. En este caso, el desarrollo no es sencillo.
Continuando nuestra búsqueda, consideramos que para visualizar datos, no podíamos descartar las soluciones de Business Intelligence. Así, encontramos opciones de código abierto  y de implementación sin costos de licencia, relativamente simples.

 Herramientas Open Source para Business Intelligence

En el área de Inteligencia de Negocios han surgido varias iniciativas de desarrollo de soluciones e implementación de herramientas Open Source. Existen en el mercado varias suites, entre ellas: Pentaho, SapgoBI, Vanilla,OpenI.
Todas parten de Mondrian (motor OLAP) + jpivot (interfase para OLAP) + kettle (ETL). Tienen diferentes políticas Open Source. En este artículo voy a contar nuestra experiencia con Pentaho (http://www.gravitar.biz)

 

Qué es Pentaho

Es un proyecto iniciado por una comunidad OpenSource, provee una alternativa de soluciones de BI en distintas áreas como en la Arquitectura, Soporte, Funcionalidad e Implantación. Estas componentes, al igual que su ambiente de implantación, están basadas en JAVA, brindando entonces gran flexibilidad.
Gracias a la integración funcional de diversos proyectos de OpenSource permite ofrecer soluciones en áreas como: análisis de información, reportes, dashboards, flujos de trabajo y minería de datos.
Las principales son:

• Plataforma BI : provee la arquitectura y la infraestructura a la vez. Mondrian, forma parte del motor OLAP integrado en el SUITE BI de PENTHO.
• Pentaho Reporting JfreeReport/ Pentaho Reporting: herramienta de Reportes.
• Kettle Pentaho Data Integration (Extraction Transformation Load): usando una interface grafica “SPOON” permite diseñar “jobs” de transformación de datos para ser procesados bajo las herramientas de Kettle (PAN y KITCHEN)
• WEKA : minería de datos.

Instalación y configuración de Pentaho

Mi primera aproximación fue por medio de las versiones comerciales disponibles. Bajé la versión para Windows 7. La instalación fue sencilla. Armé un pequeño data warehouse para un trabajo académico, con Oracle como base de datos.
Encontré buena documentación. Pude acceder bien a los datos, armar reportes y tableros de control.
Fue una experiencia útil para entender la herramienta y plantear nuevos problemas a resolver. De todas maneras, el desafío fue configurar la versión Open Source.
En los siguientes párrafos ennumero los pasos seguidos.  Hubo mucho 'google' y prueba y error! Hay mucha información disponible. Hice un resumen de todo lo leido, que ahora quiero compartir. Bienvenidos los comentarios y aportes!

Bajar zips y descomprimirlos en el lugar adecuado

Las herramientas de código abierto se pueden bajar de Pentaho community y sourceforge.
Bajé algunas de las herramientas que componen Pentaho y armé un cuadro con el detalle. Tomé como guía un artículo de la wiki de la comunidad.

A continuación la instalación de los tres primeros componentes.

1. Crear directorio c:\Pentaho
2. Descomprimir en el mismo el servidor BI de Pentaho (biserver-ce).
3. Crear el directorio c:\Pentaho\design-tools.
4. Dentro del mismo descomprimir las herramientas cliente. (prd-ce y psw-ce)

Java y variables de entorno

 La plataforma Pentaho BI necesita una JVM (Java Virtual Machine) instalada. Podemos bajarlo desde Sun Developer Network download page.
Pentaho usa las variables de entorno: JAVA_HOME y JRE_HOME.
En mi caso la dí de alta, esta es la imagen del setup

                     

 Arrancando el Server de Pentaho y la consola de Administración

Arranque del Server:
pentaho/biserver-ce> startup.bat

Acceso a Pentaho User Console:
http://localhost:8080/pentaho
(Usuario: joe Password: password)

Arranque de consola de Administración:

Pentaho/Administration-console/start-pac.bat
Acceso a la consola:
http://localhost:8099
(Usuario: admin Password: admin)

Hasta acá los pasos mínimos de instalación. Con esto es posible investigar los ejemplos y crear algún reporte o gráfico con las conexiones disponibles. Para trabajar con datos propios, un par de pasos más.

Conectar a una base de datos

 Instalar primero el driver adecuado para la base de datos. O archivo JAR. Este archivo normalmente se puede bajar desde el sitio oficial del motor a usar. Es importante instalar en cada directorio solamente la última versión del driver.

En mi caso, investigué las conexiones a SQL Server (motor para las aplicaciones que desarrollamos en Tercer Planeta). Tomé los drivers desde el sitio oficial de Microsoft. Probé también con los drivers de codigo libre. Estoy usando estos últimos.

Copié el driver jtds-1.3.0.jar en los siguientes directorios correspondientes al server, a la herramienta de reportes y al schema-workbench. Esta es la lista de directorios:

1. Pentaho\administration-console\jdbc
2. Pentaho\biserver-ce\tomcat\lib
3. Pentaho\biserver-ce\data\lib
4. Pentaho\design-tools\report-designer\lib\jdbc
5. Pentaho\design-tools\schema-workbench\drivers

Una vez copiado el driver en los diretorios, reiniciar el servicio.

Creación de una conexión desde la pantalla de administración: (referencia Pentaho)

Nombre: es el que se usará desde los distintos componentes de Pentaho
Driver Class: lista de los drivers default de Pentaho. Debería incluir el instalado previamente. (net.sourceforge.jtds.jdbc.Driver)
Usuario: un usuario con permiso a la base de datos a acceder.
Password: para la base de datos
Url:jdbc:jtds:sqlserver://NombreServer:1433/BaseDatos;instance=nombreInstancia

Consideraciones de configuración

Para publicar reportes creados con el report-designer, o esquemas generados con schema-workbench:
Ingresar password en el archivo: Pentaho\biserver-ce\pentaho-solutions\system\publisher_config.xml

<publisher-config>

<publisher-password>password</publisher-password>

</publisher-config>

Para acceder a la consola desde otra máquina, reemplazar localhost por la IP en:

 Pentaho\biserver-ce\tomcat\webapps\pentaho\WEB-INF\web.xml

<!--  FullyQualifiedServerUrl is used only in the case of offline content generation and whenever something need to talk back to the server -->
<context-param>
<param-name>fully-qualified-server-url</param-name>
<param-value>http://TIERRA:8080/pentaho/</param-value>
</context-param>

Hasta acá la instalación inicial de Pentaho. Desde la consola es muy intuitiva la consulta los reportes y los cubos de ejemplo.
En próximos artículos generación de reportes (report-designer), herramientas de análisis (squema-workbench) y dashboards. ( CDF: community dashboard framework).

Leer más...

Sublime Text 2

Como en tantos otros equipos, a la hora de trabajar en los proyectos web usamos como principal herramienta Visual Studio. Pero muchas veces nos encontramos con que no es necesario un IDE tan poderoso para crear ejemplos, probar scripts, tags nuevos, simplemente leer un código o editar cualquier texto.

En reiteradas ocasiones hemos usado Notepad++ y nos hemos maravillado por su simplicidad, su integración con Windows y atajos de ejecución. Hoy se ha ganado un lugar Sublime Text 2.

Sublime Text 2 es un editor de texto/código que se distribuye libremente pero no es gratuito. De igual manera, no limita ninguna funcionalidad al usuario que lo esté usando. 

Tiene muchas características que lo destaca sobre sus pares:

- Es multiplataforma: Hace falta aclaración al respecto?.
- Tiene un minimapa: Consiste en un preview de la estructura de nuestro código que se sitúa a la derecha del editor (Podemos ocultarla). Es muy útil para desplazarse por el archivo cuando conocemos bien la estructura del mismo.
- Multiselección: No es una característica que destaca pero si muy útil.
- MultiCursor: Permite la escritura paralela en diferentes posiciones del documento.
- Soporte nativo para infinidad de lenguajes: HTML, CSS, Python, XML, PHP, SQL, JavaScript, C#.
- Edición de múltiples archivos mediante solapas.
- Archivos de configuración: Permiten configurar desde la coloración de la sintaxis hasta los atajos de teclado.
- Búsquedas dinámicas: Se puede buscar por expresiones normales y regulares en archivos, proyectos, directorios o todo a la vez.
- Autocompletado de código: Por ejemplo, al abrir etiquetas de html, al dar tab se autocompleta su cierre automáticamente.
- Soporte de plugins y snippets para aumentar la funcionalidad.
- Modos de uso: Podemos "codear" a pantalla completa o en modo sin distracciones.

Instalación

Desde la página oficial podemos descargar los instaladores (Para Windows y Mac) o su versión portable para Linux (También es posible descargarlo vía PPA).

Primer uso

Esta herramienta tiene una interfaz minimalista, cómoda y muy productiva. No te asustes la primera vez

El comando Ctrl + K + B, que permite visualizar los documentos abiertos actualmente en una barra lateral que se despliega por la izquierda

Luego tenemos una de las opciones indispensables que es "GoTo Anything" (Ctrl + P) que te permitirá localizar los archivos rápidamente y a medida que escribas irá filtrando los archivos que por nombre coincidan. Si te desplazas con las fechas de dirección, podrás obtener una vista previa y al dar enter irás a parar al archivo en cuestión

Una vez dentro del documento, podemos especificar más nuestra búsqueda de la siguiente manera. Escribiendo:

:[Número] iremos a parar a una línea en concreto
:@ verás los métodos utilizados anteriormente
:# podrás buscar en el interior del fichero

(En el comando incluir los dos puntos)

Tambien podemos crear proyectos desde el menú "Project" para gestionar mejor tus documentos/proyectos. Incluso tiene un plugin para GIT!

Escribiendo código

Sublime text 2 posee un motor de autocompletado para etiquetas html y css (entre otros lenguajes) que permite hacer más fluida nuestra escritura y ganar tiempo de desarrollo. Por ejemplo, en html si escribimos div.contenedor y pulsar tab, el editor completará y cerrará la etiqueta quedando así:

<div class="contenedor"></div>

Lo mismo sucede para un id.

En el caso de css es algo parecido, al escribir estilos generalmente reconoce los atributos y te permite autocompletarlos (Salvo features nuevos de html5)

Personalización del entorno

Sublime text 2 por defecto tiene una serie de temas instalados que se pueden utilizar desde Preferences - Color scheme. Si ninguno te gusta puedes descargarte otros o crear el tuyo

Instalar un plug-in: Package control

Posiblemente el plugin más necesario que existe para sublime text es Package control. Este permite instalar cientos de otros plugins. Su instalación es muy sencilla y está detallada en instalación de Package control

Una vez completa su instalación podemos acceder al Package control mediante Ctrl + Shift + P y escribiendo Package Control: Install Package (Y posterior enter) se listarán los paquetes para instalar

Una pequeña de plugins que he probado y me resultaron útiles son:

- SublimeLinter: Subraya los potenciales errores de un programa, muy útil para ahorrar tiempo detectando la falta de un punto y coma o el cierre de paréntesis.
- Alignment: Formatear código rápido presionando Ctrl + Alt + a.
- Git: Conexión al repositorio Git. También funciona con GitHub y Bitbucket.

Snippets

Los snippets son pequeños fragmentos de código guardados en archivos individuales que te permitirán insertar de forma fácil y rápida partes de código simplemente escribiendo una palabra y pulsando tabulador, o bien asignándole una combinación de teclas.

Por defecto el programa ya cuenta con unos cuantos snippets por ejemplo "lorem". Prueba a abrir un nuevo documento y escribir lorem y luego tabulador (Seguro te sorprenderás como yo)

Hasta acá la revisión. Espero que le den una oportunidad a Sublime Text 2 y estemos atentos que la versión 3 ya está en beta (Sólo para usuarios registrados)

Leer más...