Reset.css y Normalize.css

viernes, 31 de mayo de 2013

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 -Creación de Dashboards

miércoles, 29 de mayo de 2013

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.
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"} 










Leer más...

Audio en HTML5

lunes, 20 de mayo de 2013

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.

implementación de audio en HTML5 compatible con todos los browsers

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...

Que es HTML5 y por qué es importante

miércoles, 15 de mayo de 2013

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

Logo de HTML5

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...