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

Para un próximo artículo vamos a analizar más ejemplos y entrar más a fondo: patrón module, ocultar código e interfaces públicas

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.

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

Leer más...

Probando Pentaho II

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.

Sacamos varias ideas, e 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 (rojo), clickeando en el cuadro de la grilla es posible ver el detalle de ventas por estado. 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 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
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"}

Leer más...

Iniciandonos en CSS3

En un principio, las páginas de internet sólo transmitían texto e imágenes y eran en blanco y negro o a lo sumo con muy pocos colores. Hoy no es de esta manera, la web evolucionó y el diseño gráfico no es la excepción. Vamos a profundizar un poquito en este tema: vamos a hablar de CSS


CSS es el lenguaje que se emplea para aplicar diseño visual a los elementos de nuestro documento .html. No es un lenguaje que presente una curva elevada de aprendizaje y posee una sintaxis sencilla. Las letras CSS hacen referencia a Cascade Style Sheets porque los estilos se van aplicando por orden de escritura desde el principio al final. Hoy día continúa en desarrollo pero podría decir que casi no existen limitaciones para diseñar y estilizar un sitio web

CSS: Solución a un gran problema

El .html nunca debe contener estilos. Para eso existen las hojas de estilo: la forma más adecuada de aplicar estilos es mediante ellas. Recordemos que el .html sólo debe contener la estructura semántica de nuestros documentos. Por lo tanto, aislar la presentación del mismo es ideal: permite paralelizar la semántica del diseño y que dos personas o más puedan trabajar cómodamente (Este caso no aplica para los correos electrónicos, pero es un caso aparte)

Por otro lado, al tener asilada la presentación de la semántica, permite que, teniendo una sola hoja de estilos, apliquemos estilos idénticos en diferentes páginas y en todo nuestro sitio muy fácilmente  Pensemos que aplicar un estilo antes era modificar cada hoja que lo usara: hoy modificamos un archivo externo y la solución es inmediata

¿Como empezamos a usar CSS?

• Estilo en línea: aplicamos bajo el atributo style el estilo para ese elemento. No es una manera recomendada, estructurada y óptima de dar formato a nuestros sitios, pero sí sencilla y rápida. No se recomienda usar esta metodología. Como mencionabamos antes, esta regla no aplica para los correos electrónicos, por lo que si queremos aplicarles estilos debemos hacerlos mediante estilos en línea
• Hoja de estilo interna: está incrustada dentro del <head>, marcada por la etiqueta <style>. De esta manera se separa la información de los estilos. Esta técnica tiene el mismo problema que los estilos en línea, deberiamos replicarlo en cada página
• Hoja de estilo externa: es un archivo de extensión .css diferente al archivo donde se almacena el código HTML. Esta es la forma más recomendada porque permite separar el estilo de la estructura

¿Cómo escribimos código .CSS?

La sintaxis de CSS puede resumirse de la siguiente manera:

• Selector
• Propiedad y valor

El selector (en este caso: todas las etiquetas p) hace referencia a los elementos del DOM a los que se le aplicarán los estilos (color de fondo rojo). Estos elementos pueden ser seleccionados en función de su tipo, id, clase y posición, entre otros. CSS en su version actual incluye pseudo clases y pseudo elementos. Pseudo clases son :hover, :active, :visited, etc. Y pseudo elementos son :before, :after, -first-letter, first-line, etc

Propiedad y valor se refiere a que atributo de esos elementos será modificado y que valor se le establecerá. La lista de atributos CSS que pueden utilizarse puede encontrarse aquí

El mismo CSS funciona igual en todos los navegadores?

Hay muchas funcionalidades de CSS que no están disponibles en todos los navegadores y menos en todas sus versiones. Es ahí donde entran en juego los prefijos propietarios (-webkit-, -moz-, -o-, etc). Por suerte existen herramientas que nos permiten hacer compatibles nuestros códigos con todos los navegadores más usados

Para ser más específico hablemos de un caso en particular: múltiples columnas (column-count). Esta propiedad permite dividir y estilizar un texto en columnas

Vamos a can i use y buscamos la propiedad para ver su integración: link acá

La fila que nos interesa es: Current

Como vemos en el gráfico, todos los navegadores modernos y más usados ofrecen soporte para esta funcionalidad, pero algunos no de forma nativa, necesitan de un prefijo propietario (Señalado con una pequeña etiqueta de color amarillo). Este prefijo indica que es una propiedad en desarrollo o que quizás no forme parte del estándar y sea un experimento. Para usar esta propiedad y que funcione en todos los navegadores deberíamos usar un estilo similar a este:

Con -moz- le indicamos al motor de render Gecko que use la funcionalidad, y con -webkit- hacemos lo mismo pero para Webkit. En los demás navegadores, como IE desde su versión 10, la funcionalidad funciona sin ningún prefijo. Si seguimos mirando más arriba en esa misma columna, notamos que para las versiones 8 y 9 de internet explorer la propiedad no está presente. Si nuestro sitio debe ser compatible con estas versiones tendremos que lograr la funcionalidad de otra manera

Lo sé, es incómodo todo esto pero existen herramientas como prefix-free que nos facilitan este trabajo. Prefix free es un script que debemos importar ANTES de nuestros estilos y se encargará de agregar automáticamente los prefijos propietarios. Siguiendo el ejemplo anterior, bastaría con escribir algo como esto:

Y como si fuera poco, existe CSS3 PIE que logra que los features de CSS3 estén disponibles en IE6, 7, 8 Y 9! (Magia negra?)

Espero que esto sirva como un buen comienzo

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.

Leer más...

Video en HTML5

Hablar de video en HTML5 es hablar de una intensa lucha que se da entre pesos pesados de internet y de la singular batalla por la estandarización de un códec. En años pasados (2004/2005) la manera que tenian los administradores web de compartir videos en sus web era mediante el recordado Quicktime, Windows media player o los archivos .swf que popularizó Adobe.

Hoy en día, apelamos a Youtube o Vimeo para compartir videos y Steve Jobs para sus dispositivos jamás quiso flash así que se reabrió el debate por tener un estándar para manipular video desde los navegadores.

Pensemos en video como las imágenes. Pueden ser .jpg, .png, .gif, pero no dejan de ser una imágen y el navegador es el encargado de implementarlas a todas. Con el video pasa lo mismo.

Cómo se usa?

Para incluir un video con HTML5 usas el siguiente formato:

Además del ancho y el alto y tal como ocurre con la etiqueta <audio>, tenemos atributos adicionales:

• Preload: Carga el video junto con la página. Opción recomendada solo si el video es contenido muy importante en nuestra página

Por el contrario, si es un información secundaria, ¿para que penalizar al usuario con espera si quizás no vea el video?. En este caso usaremos algo como esto:

donde le especificamos al navegador que no descargue información del video a menos que el usuario de Play.

• Autoplay: Esta opción dará play al video automáticamente al terminar de descargarse la página. Lo implementamos de la siguiente manera:

• Controls: Manipula la visibilidad de los controles para el video (Play, Pause, Seek bar y volúmen).

Compatibilidad

Como ocurre con el tag <audio>, necesitamos especificar varios sources para garantizar la reproducción del video en la mayor cantidad de navegadores. Podemos escribir un código similar a este:

De esta manera, con el primer <source> nos aseguramos que el video funcione en el mundo Apple y con la otra apoyamos una versión más liberal empujada por Google.

Con respecto a IE en sus versiones viejas está de más aclarar que no soporta el tag video, pero podemos contar con flash para solucionar nuestro problema: Incluyendo el código embed justo debajo del último <source>, encerrado también dentro del tag <video>

La documentación oficial del tag video está aquí



Existe un proyecto interesante para utilizar y cuanto menos mirar que es VideoJS. Si te vas a tomar en serio la cuestión de alojar los videos en tu sitio y no depender de terceros, este es tu proyecto. Es un proyecto libre y tiene skins para imitar los principales sitios de video de la web.

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

Leer más...