Responsive y Adaptive Design

jueves, 27 de febrero de 2014

Cuando se habla de Responsive y Adaptive web design suelen tomarse como lo mismo.

Pero buceando en la web podemos encontrar 3 visiones diferentes sobre estos términos: los que piensan que son dos cosas muy distintas que no tienen puntos en común ("tengo que elegir entre uno u otro"), los que sostienen que el Responsive Web Design (RWD) es un subconjunto del Adaptive Web Design (AWD) y otros (tal vez los menos?) que consideran que en realidad son dos conceptos que se complementan.

En una definición general podemos encontrar que se habla de Responsive Design cuando se piensa un sitio donde el contenido pueda ser reacomodado según el dispositivo donde se visualiza (desktop, tablet, celular, etc.) enviando siempre la misma información.

Muy genéricamente también encontramos que el diseño Adaptive se define como el diseño pensado en base a los dispositivos donde se visualizará una aplicación, diseñando una versión para cada uno de ellos, haciendo que sea el servidor el que detecte qué dispositivo lo está invocando y enviando el diseño adecuado para el mismo.

Tal como mencionamos, algunas visiones consideran al RWD como parte del AWD, como un subconjunto del mismo. Muchas puntualizan que el Resposive design tiene como objetivo el layout únicamente.

Si bien los dos conceptos tienen en común que se focalizan en permitir que los sitios puedan ser vistos en dispositivos de distintos tamaños o resoluciones buscando dar una mejor experiencia a los usuarios, Adaptive design es algo más amplio e íntimamente relacionado con la mejora progresiva, cosa de la que el RWD tampoco está ajeno. Es por ello que hay quienes consideran que ambos conceptos se complementan. Personalmente me inclino más por esta visión.

El AWD es un concepto más abarcativo y, según la definición de su creador Aaron Gustafson, utiliza mucho de los componentes de la mejora progresiva (PE - Progressive Enhancement) que se focaliza en el uso de los métodos de diseño necesarios que apunten al usuario y no a los browsers, donde el RWD debería ser una parte, pero siempre teniendo en cuenta  que el AWD es un "acercamiento más holístico del diseño web".

Desde el punto de vista de los usuarios de los sitios que desarrollamos, poco sabrán ellos sobre qué métodos fueron usados para crearlos. Sólo buscarán poder navegarlos de la forma más simple, rápida y clara desde cualquier "aparato" que se los permita y si no, simplemente los abandonarán. Es por eso que las herramientas y métodos que usemos en su creación deben llevarnos siempre a satisfacer de la mejor forma posible las necesidades de dichos usuarios.

Tomar lo mejor que cada uno nos brinda para lograr este objetivo puede ser una buena idea ...

    


Leer más...

Uso de texto en lugar de imágenes (icon fonts)

lunes, 24 de febrero de 2014

Desde hace ya un par de años una de las prácticas instaladas en desarrollos web es el uso de fuentes tipográficas en lugar de íconos o pequeñas imágenes o incluso sprites css. O sea, se manejan los íconos como textos lo que permite cambiar sus propiedades usando CSS.




El uso de estos “icon fonts” (icon web fonts) presenta muchas ventajas respecto de otras técnicas de inserción de imágenes dado que disminuyen la carga del servidor y las peticiones HTTP, no son tan complejos de implementar como los sprites, son adaptables a distintos dispositivos (los íconos pueden verse pixelados al cambiar de tamaño), se puede cambiar fácilmente sus propiedades, entre otras.

Varios son los sitios donde podemos encontrar conjuntos de font-icons – gratuitos y pagos - y abarcan una enorme variedad de temas. Algunas de estas colecciones hemos aplicado en nuestro web site.

Recomendamos aquí muy buenos artículos donde pueden leer más detalles sobre su implementación y sitios desde donde descargar colecciones:

CSS Tricks

(imagen: htttp://commons.wikimedia.org/wiki/File:Early_writing_tablet_recording_the_allocation_of_beer.jpg)

    
Leer más...

Probando Pentaho VI: esquema de un cubo con Mondrian

viernes, 14 de febrero de 2014

En un artículo anterior vimos que construir un esquema Mondrian adecuado es la base para cualquier análisis y visualización.
Comparto ahora algunas pruebas realizadas con Mondrian. Utilicé  la documentación provista por Pentaho.

Esquema Mondrian

Un esquema define una base de datos multi dimensional. Contiene un modelo lógico. Este modelo a su vez debe mapear a un modelo físico.
  • El modelo lógico consiste en las estructuras usadas para escribir consultas en lenguaje MDX. Esta formado por cubos, jerarquías, niveles y miembros.
  • El modelo físico  son las tablas de datos presentados previamente en  el modelo lógico. 
Los esquemas Mondrian son archivos de tipo xml. Se pueden editar manualmente, o bien por medio de la herramienta Workbench provista por Pentaho.

Workbench

Mondrian Schema Workbench es una aplicación que permite crear visualmente y testear esquemas Mondrian de cubos OLAP.

Creación del esquema de un cubo usando Workbench

1. Instalar Mondrian, que se puede bajar desde Source Forge
2. Descomprimir en el directorio donde se instalo el server de Pentaho.



3. Incluir el driver JDBC en el directorio 'Drivers': schema-workbench/drivers
4. Con el server de Pentaho activo, iniciar Workbench, (schema-workbench/workbench.bat ) obteniendo una pantalla del tipo



5. Conectarse a la base de datos, desde la opción 'options' del menú principal. Los parámetros para crear la conexión son los mismos que en el caso de la consola de usuario de Pentaho.



6. Este es un ejemplo de esquema de un cubo. Consulta la base en SQL 'AdventureWorksDW'. Tomando como tabla de 'hechos' o fact table FactInternetSales. La medida utilizada es 'SalesAmount'. Las dimensiones, dos básicas, son el tiempo (DimTime) y Región (tabla DimSalesTerritory).
Crear o editar los elementos en el esquema. Workbench valida los cambios contra las tablas del cubo y los nombres de las columnas.

En este caso, construimos la dimensión 'Region' contra la tabla 'DimSalesTerritory'.

 7. Para ver el código XML que subyace detrás del esquema, seleccionar View/XML. Muestra el XML del elemento actual, pero no se puede editar este archivo directamente.

<Dimension type="StandardDimension" visible="true" foreignKey="SalesTerritoryKey" highCardinality="false" name="Region">
    <Hierarchy name="Region" visible="true" hasAll="true" allMemberName="TODOS" primaryKey="SalesTerritoryKey">
        <Table name="DimSalesTerritory" schema="dbo">
        </Table>
        <Level name="Region" visible="true" column="SalesTerritoryRegion" nameColumn="SalesTerritoryRegion" type="String" internalType="String" uniqueMembers="true" levelType="Regular" hideMemberIf="Never" caption="Region" captionColumn="SalesTerritoryRegion">
        </Level>
    </Hierarchy>
</Dimension> 


8. Probar que la  estructura sea correcta, para esto abrir el  editor de MDX y conectarse. Si se hay algún error o campo mal indicado no se conecta y da error.
En ese caso muestra los resultados de la consulta MDX básica.


Resultaron de utilidad los artículos del blog Adventures with Open Source BI

    
Leer más...

Probando Pentaho V: instalando Pentaho 5 - Saiku Analytics

jueves, 16 de enero de 2014

La nueva versión de Pentaho BI-Server 5.0 está disponible.
Hay varias novedades, entre ellas una nueva interfase, mucho más moderna y amigable que la anterior
Por otro lado, la consola de usuario (Pentaho User Console) y la consola de adminstración están integradas, con lo cual no es necesario ahora configurar un server extra.
Se ha mejorado la instalación de plugins por medio de MarketPlace.

Instalamos entonces la nueva versión de Pentaho. El cambio que más nos gustó fue la presentación más moderna y austera, con una paleta de colores muy amigable. También el acceso fácil a todos los elementos.
Este es el detalle de los pasos básicos que seguimos para tener Pentaho 5 andando:
  1. Instalación.
  2. Conexiones a las bases de datos.
  3. Creación de Data Sources y consultas MDX.
  4. Presentaciones y gráficos.

-1-  Instalación

La instalación fue simple, bajamos los archivos desde Pentaho Community  (biserver-ce-5.0.1-stable)

-2- Conexiones

Las conexiones: basta instalar el driver adecuado en los directorios y crear la conexión en sí
    • Drivers: driver para acceso a SQL. jtds-1.3.0.jar en los directorios:
 bi-server/data/lib
 bi-server/tomcat/lib
    • Creación de una conexión. Desde la pantalla de Pentaho:
File /New/DataSource
SQL query, pantalla de selección de conexiones, agregar una nueva:














-3- Data Sources y consultas MDX.

Una diferencia importante en esta nueva versión de Pentaho es la posibilidad de configurar data sources. Se puede crear un data source a partir del esquema de un cubo creado con Mondrian. Basta tener el xml asociado al cubo. No es necesario publicarlo como en versiones anteriores de Pentaho.

Manage DataSources/ DataSource/ New Analysis

Seleccionar el archivo .xml correspondiente al esquema Mondrian generado por Workbench, y seleccionar el data source correcto.

El data source importado, cuya base es un cubo, se puede ver por medio de Jpivot y Saiku analytics. La creación de las consultas y gráficos es bastante intuitiva. 
JPivot:  permite, de una forma interactiva, analizar los datos del Data Warehouse a traves de una interfaz de tabla cruzada donde podemos navegar por las diferentes dimensiones definidas en el modelo dimensional.
Create New/ JPivot View permite seleccionar entre los cubos creados. En este caso, seleccionamos un cubo construido a partir de ventas de internet. Con solo dos dimensiones, región y tiempo. La consulta MDX relacionada es

select NON EMPTY [Region].[Region].Members ON COLUMNS,
  NON EMPTY {Hierarchize({[Time].[Years].Members})} ON ROWS
from [InternetSalesRegionTime]
(de la base AdventureWorksDW)



-4- Visualizaciones

Para probar Saiku Analytics, fue necesario descargar el plug-in por medio de la opción 'MarketPlace' desde la consola de usuario de Pentaho.

Create New/ New Saiku Analytics permite armar consultas  y generar gráficos. 
Estas son las consultas al mismo cubo que abrí con JPivot y gráficos generados. Tomé para el ejemplo un caso sencillo, pero muy ilustrativo.

Consulta Ventas por Región y Tiempo


Consulta Ventas por Región y Tiempo
Ventas por región por año

Gráfico líneas ventas por región


Región en las columnas y años para las filas


Mismo gráfico detalle por mes.


A mi entender es clave partir de un esquema Mondrian adecuado. En un próximo artículo compartiré un par de consejos para crearlos.


    
Leer más...

Por qué los rituales son importantes en Agile

Cuando leí este artículo de Len Lagestee sobre los rituales en Agile recordé una reunión de equipo que tuvimos hace algunos años donde revisábamos nuestra práctica de Scrum cuando recién empezábamos. Una de las conclusiones a las que llegamos en ese momento fue que los rituales de Scrum, en nuestro caso, son tan pocos y tan simples que no tiene sentido querer "darles una vuelta" o tratar de adaptarlos. Scrum es eso y cualquier cambio que se le quiera agregar lo convierte en otra cosa. Y lo mismo aplica a cualquier otro método ágil.

Con el tiempo y hablando con gente de otros equipos noté que eso que nosotros intentábamos (tal vez cierta resistencia inconciente?) es bastante común entre quienes empiezan con un cambio de metodología: queremos hacer una "adaptación libre" o una versión ajustada de la práctica. Es por eso que me pareció interesante resumir los conceptos de Len Lagestee sobre la importancia de respetar y mantener los rituales en de las metodologías ágiles.

Según Lagestee, una de las primeras dudas o quejas que despierta la práctica de metodologías ágiles es "la cantidad" de reuniones, dependiendo dle método las típicas son: planificación, daily stand-up, revisión del sprint o demostración, retrospectiva, revisión del backlog. El sólo hecho de pensar en tantas reuniones lleva a decir que "no habrá tiempo para trabajar". En estos casos es donde el autor subraya justamente la importancia de mantener estas prácticas: el tiempo que un equipo comparte junto, con un ritmo recurrente y consistente, es donde se fomentan las bases de los rituales de ese equipo.
En este punto Lagestee resalta una definición de wikipedia al respecto:

"los rituales hacen a la tradición de una comunidad"


http://milindageorge.files.wordpress.com/2013/03/scrum-team.png

Continúa diciendo Lagestee en su artículo que concretamente la importancia de los rituales está dada porque los mismos refuerzan las tradiciones de:

  • Reconocer el pasado: las retrospectivas permiten aprender de la experiencia pasada en un sano entorno de "comunidad". El equipo es el que aprende a corregir su propio rumbo. 
  • Marcar nuevos comienzos: más allá de las conclusiones sacadas para el sprint pasado, la planificación de un nuevos sprint permite a la "comunidad" (es decir, al equipo) centrarse en lo que viene por delante.
  • Tomar decisiones: la reunión de planificación y el timeboxing establecen la tradición de las "decisiones" => "podemos como equipo completar estas historias en este sprint o no?"
  • Desatar movimiento: las reuniones diarias sirven para poner en movimiento al equipo, trabajando mancomunado desde el inicio del día. Según nuestra experiencia, la reunión diaria establece el espacio explícito donde sabemos que contamos con los otros para darnos una mano cuando estamos complicados con algo.
  • Crear conexiones: compartir las reuniones diarias asegura que todos los días haya un punto de conexión entre todo el equipo. Y cuando alguien no esta, se siente la ausencia.  Len Lagestee compara esta práctica con el ritual de la cena en familia: es el momento en que todos se juntan para contar cómo les fue en el día. Puede parecer aburrido o sin sentido hacerlo con tanta frecuencia, pero la realidad es que cuando no se hace, sentimos que algo falta. En la experiencia particular de Tercer Planeta es casi imposible pensar en arrancar el día sin la reunión diaria.
  • Celebrar con los demás: las sesiones de revisión del sprint son los momentos donde el equipo puede reconocer y valorar realmente los logros del trabajo en conjunto.

Algo que aclara el autor es que es absolutamente normal al principio sentir que tenemos los días llenos de reuniones, pero al persisitir con el equipo en lograr un punto de verdadera comunidad, estas reuniones se vuelven más y más efectivas y se adoptan naturalmente porque se ven sus beneficios.

Desde nuestra experiencia podemos asegurar que esto es así, nos ha pasado de tener las mismas dudas mencionadas respecto de "tanto tiempo" destinado a reuniones pero hemos comprobado que el tiempo invertido en ellas deja ver sus frutos en la velocidad de producción y en la calidad del producto terminado, entre muchas otras ventajas que nos dan estos rituales.

Why the rituals of agile matter  (por Len Lagestee)

Otro artículo que puede resultar también interesante: La importancia del respeto los rituales  (en Agilmática)


    
Leer más...

Primeros pasos con Pure, un framework css modular, liviano y completo

miércoles, 15 de enero de 2014

Qué desarrollador hoy en día no implementa algún framework css como base al construir la maquetación de sus sitos/aplicaciones web? Todos deberíamos usar alguno ya que son muchísimas las ventajas que nos ofrecen.

Pero "primero es lo primero".....


A manera de repaso (o por si no conocés del tema) comentemos que un framework css es un conjunto de herramientas, style sheets y buenas prácticas que permiten al desarrollador olvidarse de estilos y funcionalidad que va a utilizar en muchos lados para centrarse en los elementos únicos de cada diseño en los que puede aportar valor.

Un framework css puede incluir solo archivos .css o bien algunos .js para complementar algún proceso como un diálogo modal.

El ejemplo más destacado en este ámbito es el famoso Twitter Bootstrap, un muy usado framework css, que tiene todo lo que el desarrollar necesita para construir aplicaciones totalmente funcionales sin mucho esfuerzo. Contiene estilos y funcionalidad para maquetación por medio de grillas, estilos para todos los elementos, formularios, slides de imágenes y formularios modales, entre otros.


Pero a veces nuestros proyectos no son lo suficientemente grandes como para necesitar semejante framework y fue en uno de esos momentos de duda cuando conocí a Pure.



Pure es un framework css muy pequeño, modular y que tiene todo lo necesario para un proyecto web de hoy en día. Está contruido sobre normalize.css. Sus características más destacadas (a mi criterio) son:

  • Es MUY liviano: Pesa apenas 4.4 kb. 
  • Está construido en pequeños módulos: Uno para estilos generales, otro para construcción de grillas, botones, formularios y uno podría solo incluir el que le interese en su proyecto. 
  • Es completo: No incluye ningún .js, ni construcción de elementos gráficos muy sofisticados como un slider pero aún así es lo suficientemente funcional como para construir un sitio de manera sencilla y que respete las buenas prácticas de maquetación. 
  • Es responsive: Como todo buen framework css, piensa en los dispositivos móviles. 

En el sitio web se pueden encontrar algunos ejemplos básicos construidos con Pure que muestran su poder y se puede descargar: blog, landing page, pricing table y otros.
La documentación del sitio es muy buena y sencilla de entender. Podría decir que no tiene curva de aprendizaje más que unos pocos minutos o un breve repaso sobre la documentación.


Que esperan para involucrar a Pure en sus proyectos?.


      
Leer más...

Open Data

viernes, 13 de diciembre de 2013

Uno de los temas de interés en Tercer Planeta es Open Data


http://galecia.com/blogs/lori-ayre/open-data-movement-great-graphic
http://galecia.com/blogs/lori-ayre/open-data-movement-great-graphic

Las conferencias de las Octavas Jornadas de Data Mining nos impulsaron a investigar, explorar varios links y discernir sobre los alcances del mismo. Aquí un resumen:



¿Qué es Open Data?

Podríamos definir Open Data como la  publicación sistemática de datos. Es una filosofía y práctica que propone que determinados datos estén disponibles de forma libre a todo el mundo, sin restricciones de copyright, patentes u otros mecanismos de control.

Open Data se relaciona con otros movimientos abiertos: open source (código y tecnología), open governance (decisiones y recursos) y open innovation (conocimiento). Estamos hablando de información de gestión, recursos compartidos, transparencia, colaboración y participación.
Surgen varios desafíos, entre ellos el entender a Open Data como un servicio público y  entender que esta información es un derecho ciudadano. Sin olvidar las responsabilidades que este nuevo derecho implica.


Open Data
http://www.flickr.com/photos/notbrucelee/5241176871/

Una de las primeras definiciones de open data fue publicada por la  Unesco: directrices para políticas de acceso abierto: 
"Mediante el Acceso Abierto, los investigadores y estudiantes de todo el mundo alcanzan cada vez más acceso al conocimiento, las publicaciones obtienen mayor visibilidad y número de lectores y el impacto potencial de la investigación es fortalecido [..] facilitan las oportunidades para el desarrollo económico y social equitativo, el dialogo inter cultural y tienen el potencial de estimular la innovación."

En 2007 el grupo de trabajo denominado Open Government Working Group reunido en Sebastopol
(California, EE.UU.) propuso estos 8 principios para la liberación del acceso a datos gubernamentales, los cuales se han convertido en la base de un estándar de facto.
Así, se denomina liberación del acceso a datos gubernamentales (open government data) a: la puesta en disponibilidad pública por parte de los estados de datos en forma digital a través de Internet de manera que permita y promueva su análisis y re utilización. 

El acceso a datos gubernamentales se considera abierto si los datos son puestos a disposición del público cumpliendo con los siguientes principios:




Hay comentarios muy lúcidos respecto a la aplicación 'real' de estos principios, en el blog de Alejandro Barros.


¿Qué es consumo de datos?

La apertura de datos no es un fin por sí misma. El consumo de datos sí. 
Entendamos que no basta con tener datos disponibles, es necesario poner manos a la obra para que se pueda sacar provecho de los mismos.

El consumo de Datos Públicos debería cumplir etapas:

1. Obtener los datos: implica el uso de datos publicados por distintas organizaciones
2. Asegurar el derecho a utilizar los datos: (tema de licencias, permisos)
3. Procesar los datos: (Analizar, entender, limpiar, relacionar de forma transparente, re producible)
4. Publicar
5. Hacerse cargo de lo realizado, en particular, posibilitar la reproducción y ser responsables de una retro alimentación a las fuentes


Data Journalism 

De acuerdo con el interesante Data Journalism Handbook, podríamos decir que es Periodismo a partir de Datos. Ambos términos, 'data' y 'periodismo' son  difíciles de definir.
Para muchos, 'data' es una colección de números, a lo sumo reunidos en una hoja de cálculo. Hasta ahora, este tipo de datos fueron los que los periodistas enfrentaron, pero hoy por hoy toda nuestra vida se podría definir con números, unos y ceros. Desde documentos hasta conexiones entre distintos usuarios, por ejemplo.
Qué diferencia al periodismo de datos del periodismo en general? Quizás las nuevas posibilidades que surgen al combinar el olfato por las noticias, con la habilidad para contar buenas historias y la magnitud de la información digital ahora disponible.
Data puede ser la fuente del periodismo de datos, puede ser la herramienta para contar una historia, o puede ser ambas. Debe ser tomado con el mismo escepticismo con el que se toma toda fuente, y como herramienta requiere tomar conciencia de la forma en que esta puede orientar y sesgar lo que se informa.

Las tecnologías de la información están cambiando  la forma como se publica la información pública. El Periodismo de Datos es una nueva rama, y tiene un papel importante en la capacitación masiva de lectores que puedan  comprender la información publicada.

En esta tarea es fundamental:
  • La recopilación y el asociación de diversas fuentes de datos no relacionados previamente.
  • El procesamiento de los datos que permita sintetizarlos (deductivamente) o generalizarlos (inductivamente) para explicitar conocimientos que no son accesibles directamente.
  • La visualización adecuada que permita que esta información “penetre” en el usuario de una manera física, sensorial y hasta irracional.

Armamos esta lista de portales de datos oficiales y de buenos ejemplos de consumo de datos:


Hablando de Periodismo, varios de los  premios 2013 corresponden a visualizaciones hechas a partir de datos públicos.

Finalmente, podemos profundizar  estos temas, con la ayuda de Jornalism in the Age of Data y el Data Journalism Handbook  mencionado previamente.

 
Leer más...

De JSON a objeto dinámico C#

lunes, 2 de diciembre de 2013

La anterior semana me encontré con el reto de usar un JSON gigante, que tenía alrededor de 22.000 líneas de código,  para simplemente ciclar por una de sus colecciones y extraer no más de 5 campos. Me pareció una locura intentar siquiera sumergirme en entender cómo estaba estructurado, qué colecciones tenía, etc.

Googleando bastante, encontré un Nuget que les puede facilitar mucho esta tarea: DynamicJson

DynamicJson es un Nuget, disponible a partir del framework .NET 4.0, que nos va a proporcionar una clase que transforma un JSON en un objeto dinámico con esta simple sintáxis:
 
    var myObj = DynamicJson.Parse(myJSON);

Como resultado, obtenemos un objeto iterable que respeta la estructura del JSON con todos sus valores y cuyo contenido es muchisimo más fácil de explorar, pasando de esto:


A esto:



Se nota la diferencia?

Este Nuget, además, nos proporciona algunos métodos para verificar existencia de algúna propiedad, eliminar elementos, serializador, deserializador y acceso a sus propiedades por medio de notación C#.

Espero que les sea de utilidad.

  
Leer más...