Curso de creación de Dashboards Open Source

Formación en
Cuadros de Mando Open Source

Objetivos de la formación
- Obtener conocimientos básicos en HTML, JavaScript y CSS .
- Conocer las características de CDE para poder trabajar de forma autónoma.
- Conocer las principales librerías propias de CDE y saber cómo utilizarlas.
- Integrar librerías gráficas externas en CDE.
- Desarrollo de cuadros de mando avanzados con CDE.

PENTAHO CDE: INTRODUCCIÓN
1. ¿Qué es un cuadro de mando?
2. ¿Qué información mostrar y cómo hacerlo?
3. El mockup
3.1 Diseño de un mockup
4. Trabajando con Pencil
5. Diseño responsive
5.1 Vista de escritorio
5.2 Vista móvil

1. ¿Qué es un Cuadro de Mando?
-Un cuadro de mando (de ahora en adelante CDM) es un conjunto de indicadores que aportan
información sumarizada e inteligente al usuario a través de un conjunto de indicadores o medidas
que pueden ser de diferentes tipos: financieras, de cliente, de proceso, de desarrollo…
-Esta información ha de presentarse siempre teniendo en cuenta al usuario final que la va a
consumir, de modo que, indudablemente, un CDM ha de ser visualmente atractivo, útil,
comprensible, relevante y efectivo.
-Es una herramienta de medición del rendimiento.
-El cuadro de mando contribuye a reducir la incertidumbre.
-Resumiendo: el cuadro de mando es una herramienta de ayuda a la decisión.

2. ¿Qué información mostrar y cómo hacerlo?
-Hay que tener en cuenta a que público va dirigido y el uso que recibirá. Por ejemplo: un directivo
puede necesitar mucho detalle a nivel financiero y poco técnico, un cliente final puede necesitar
detalle a nivel de producto pero no de proveedores…
-La información semejante ha de ser mostrada de forma semejante, por ejemplo: la información
relativa a la evolución en el tiempo de los recursos económicos deberá ser representada siempre de
la misma forma, gráficos de barras todos o gráficos de líneas de tendencia todos o tablas todos; aquí
la variedad influye de manera negativa.
-La distribución uniforme y continua de la información es más productiva que un CDM muy
Impactante que tiende a cansar la vista; es mucho mejor buscar una interacción relajada y funcional.
-En función de lo que acabamos de comentar, definir un tipo de diseño y organización/detalle de
datos. Llegados a este punto la realización de un mockup puede sernos de gran utilidad.

3. El ‘Mockup’
- Un mockup es un boceto de lo que deseamos que sea el resultado final, por lo que es una buena
idea dedicarle tiempo y ser minucioso en su desarrollo.
- Cuantas más horas se dediquen a un mockup, menos se dedicarán al desarrollo del CDM y el
resultado final será mas aproximado al resultado esperado.
- Previa a la realización de un mockup es necesario hacer un estudio de cuales son los datos que
vamos a querer mostrar, su importancia dentro de el CDM y otras consideraciones.
- Los datos serán ficticios y los elementos a mostrar no tienen porque ajustarse a la realidad. Por
ejemplo, puede haber un mockup con tres gráficos de barras: será suficiente diseñar uno de ellos
y duplicarlo hasta tener tres elementos iguales y ubicados correctamente.
- Queremos presentar maquetación y diseño, no datos.

- Se debe organizar el contenido
diferenciando de manera clara los
distintos elementos (cabecera,
selectores, indicadores, gráficos….).
Existen dos tipos de mockup:
- Esquemáticos como el de la imagen,
orientados únicamente a la disposición
de elementos.
Su objetivo suele ser puramente
maquetación y disposición de
elementos a mostrar en el CDM,
dejando la parte artística en
responsabilidad del
desarrollador/diseñador del CDM.

Diseño de un mockup
- Mockup completos o mockup
tradicionales.
Son los más comunes. Se
suelen usar para que el cliente
o usuario final valide el
resultado antes del desarrollo.
- Como sabemos, hay que
intentar que el mockup sea lo
mas completo posible, por lo
que siempre que los tiempos lo
permitan se recomienda la
realización de un mockup
tradicional.

- Para realizar un mockup nos podemos ayudar de herramientas como Pencil:
http://pencil.evolus.vn/ [Disponible para Linux, Mac y Windows]
• Existen muchas alternativas a esta herramienta. Si quieres saber más, puedes echar un ojo en
el siguiente enlace:
http://mashable.com/2010/07/15/wireframing-tolos/

4. Trabajando con Pencil
- Herramienta de creación de CDMs open source, disponible para Windows, Linux y Mac.
- Pencil permite la incorporación de plugins para completar su galería de recursos.
Esta disponible a través de la siguiente página web:
https://code.google.com/archive/p/evoluspencil/downloads
- A continuación veremos el resultado de la creación
de un mockup con Pencil.

5. Diseño Responsive
- Un fallo común en la realización de mockups se
produce por no realizar un diseño adaptado a
todo tipo de dispositivos, y esto, acaba lastrando
el desarrollo del CDM.
- No buscamos tener un diseño totalmente
diferente, de hecho, lo ideal es que todos sean
muy semejantes pero con distinta disposición y
menor cantidad de datos.
- Para no cometer este error, tenemos que tener
en cuenta las diferencias entre vista de escritorio
y vista móvil.

5.1 Vista escritorio
- Toda la información sintetizada debe de ser “impresa” en esta vista como resultado final del
trabajo en la mayoría de proyectos.
- Ante todo, para poder estar satisfecho con nuestro trabajo, el CDM debe ser: fácil de usar,
mostrar información relevante y tener un diseño agradable para el cliente final.
- El exceso de información es tan perjudicial
como la ausencia de la misma.
- Diseño base que servirá como base
de la posterior vista móvil.
- Importante el analizar que vamos a mostrar.

5.2 Vista móvil
- Antes de diseñar una vista móvil, debemos plantearnos las siguientes cuestiones:
¿Qué debe de ofrecer? ¿Cuándo se utilizaría esta versión de los CDM?
- A veces será difícil o poco recomendable mostrar los mismos datos que en un CDM en
versión de escritorio, por tanto tendremos
que ser conscientes de en que situaciones
se usa una vista móvil y mostrar sólo el
contenido útil.
- Generalizando: en la mayoría de situaciones
los CDM con vista móvil tendrán una menor
cantidad de información, botones e indicadores
más grandes y menor cantidad
de imágenes y recursos.

Pentaho CDE
Community Dashboard Editor (CDE)
en la Arquitectura Pentaho

CONCEPTOS BÁSICOS
1. Introducción a CDE
2. Arquitectura CTools
2.1 CDF
2.2. CDA
2.3. CCC

1. Introducción a CDE
Espacio de trabajo para el desarrollo de cuadros de mando desarrollado por la
comunidad de Pentaho, concretamente por la empresa
portuguesa Webdetails liderada por Pedro Alves.
CDE, junto a la tecnología que hay bajo él –entre otras: Community Dashboard
Framework (CDF), Community Data Access (CDA) y Community Chart Components
(CCC)- permite el diseño, desarrollo, edición y vista previa de cuadros de mando
avanzados.

2. Arquitectura CTOOLS (Dashboards)
-Ctools (Webdetails) es un conjunto de herramientas y componentes de Pentaho para
la creación de cuadros de mando avanzados.
-Open Source.
-Centrado en Pentaho (Entreprise y Communnity) y en su comunidad.
-Para dispositivos escritorio , móviles y grandes formatos.
-Plugins documentados.
-Interfaz y entorno personalizables.
-Plataforma de código abierto: todos los usuarios pueden contribuir.

2.1. CDF (Comunity Dashboard Framework)
Librería de código abierto que permite la creación de cuadros de mando mediante HTML5, CSS y
JavaScript. Aprovecha otras librerías como jQuery o Bootstrap. Es una solución eficaz para combinar
datos y visualizarlos de forma atractiva y estandarizada.
Características:
-Basado en tecnologías de código abierto.
-Usa AJAX.
-Separación del modelo lógico (JavaScript) del visual (HTML5, CSS).
-Proporciona a los usuarios un alto nivel de personalización.
-Posibilidad de ampliar las librerías.
-Los usuarios avanzados pueden insertar su propio código.

2.1. CDF (Comunity Dashboard Framework)
Ventajas técnicas:
-Aplica la seguridad a través del modelo de seguridad de Pentaho.
-No es necesario crear páginas JSP para el desarrollo de los CDM.
-Posibilidad de elegir entre múltiples componentes
-Fácil de diseñar.
-Los objetos del CDM pueden ser reutilizados.
-Integración de Portlets.

2. 2. CDA (Comunity Data Access)
Plugin de Pentaho para el acceso a las fuentes de datos de una forma cómoda, flexible y elegante.
Fue desarrollado como una herramienta de abstracción entre bases de datos y CDF lo que permite
recuperar datos de múltiples fuentes y combinarlos en un único output que será pasado de forma
sencilla al correspondiente componente del cuadro de mando.
Además sirve para:
-Entregar los datos en diferentes formatos: CSV, XLS…
-Ordenar y paginar los datos del lado del servidor.
-Cachear consultas para mejorar el rendimiento.
-Unir consultas editando un fichero XML.
-Puede usarse como plugin independiente de CDE/CDF.
-Evita problemas de inyección de SQL.

2. 2. CDA (Comunity Data Access)
-CDA utiliza dos componentes:
•La conexión (connection, una base de datos o fuente de datos de Pentaho a utilizar)
•El acceso a los datos (dataAcces, una consulta sobre la conexión)
-Las conexiones y consultas se definen en un archivo XML (el archivo CDA) que se encuentra en el
repositorio de la solución.
-Cada dataAccess puede tener parámetros y columnas calculadas que se pueden añadir al resultado
de la consulta. Es posible tener elementos compuestos (compoundDataAccess) que representan
uniones (joins & unions) entre diferentes consultas.
-El contenido de este archivo está dentro de un bloque descriptor:
<?xml version="1.0" encoding="utf-8"?>
<CDADescriptor>
(...)
</CDADescriptor>

2.2. CDA (Comunity Data Access)
CDA cuenta además con:
•API (hablaremos más delante de ella) para extraer resultados de la consulta.
•Editor para modificar archivos CDA (no permite crear nuevos archivos CDA sólo
modificar los existentes sin necesidad de un editor externo)
•Controlador vista previa para visualizar los resultados de la consulta en forma de tabla.
Los resultados de las consultas pueden ser devueltos desde la API en varios formatos.
Actualmente están soportados:
jSON, XML, CSV, XLS y HTML (modo visual).

2.3. CCC (Comunity Chart Component)
-Es un poderoso conjunto de herramientas de visualización, gratuita y de código abierto basado en la
librería de gráficos JavaScript, Protovis (lo veremos posteriormente).
-Su objetivo es proporcionar la mecánica para incluir en los cuadros de mando todo tipo de gráficos
interactivos y personalizables sin perder un principio fundamental: la extensibilidad.
Gráficos en CDE ¿Qué podemos implementar?

CCC Area Chart:
CCC Bar Chart o Gráfico de Barras:

CCC Box Plot Chart o Diagrama de Cajas:
CCC Bullet Chart:

CCC Dot Chart:
CCC Heat Grid o ‘Rejilla de calor’:

CCC Line Chart o Gráfico de Línea:
CCC 100% Stacked Bar Chart:

2.3. CCC (Community Chart Component)
CCC Pie Chart:
CCC 100% Stacked Bar Chart:

Conceptos Básicos:
HTML- CSS- JAVASCRIPT

CONCEPTOS BÁSICOS
1. HMTL:
1.1. ¿Qué es?
2.1. Estructura básica
2.2. Etiquetas/Atributos
2. CSS:
2.1. ¿Qué es?
2.2. Selectores
2.3. Incluir CSS en un documento HTML
2.4. Orden CSS
3. JavaScript:
3.1. ¿Qué es?
3.2. Incluir JavaScript en un documento HTML
3.3. Sintaxis básica
3.4. Tu primer Script
3.5. Tipos de variables
3.6. Funciones básicas

1. HMTL: HyperText Markup Language
1.1. ¿Qué es?
-Lenguaje de etiquetas/TAGs estándar (W3C) que define la estructura y el contenido semántico web.

2. 1 Estructura
-Es un lenguaje extensible al que se le pueden añadir nuevas características, marcas y funciones
- Los documentos HTML están formados por una serie de bloques de texto (titulares, párrafos, listas...)
-Emplea TAGs o keywords entre símbolos para saber cómo debe ser mostrado el contenido
<encapsulamiento de inicio> Contenido </encapsulamiento de final>

2. 1 Estructura básica
-DOCTYPE indica que el tipo de documento va a ser HTML.
-El código entre tags <html> </html> describe el documento.
-Entre <head> </head> nos provee de info sobre el documento.
-Entre <title> </title> título del documento.
-Entre <body> </body> el contenido.
- <h1> </h1> título del contenido.
- <p> </p> párrafo.

-¿Cómo se aplican? Se abren y se cierran, encerrando entre ellas un contenido. Por ejemplo: <b>Esto
sería un texto en negrita</b> que se vería en su navegador web como: Esto sería un texto en negrita.
-Cada elemento de un documento HTML consta de una etiqueta de comienzo, un bloque de texto y una
etiqueta de fin con el siguiente formato:
<etiqueta> bloque de texto </etiqueta>

-Otros ejemplos de etiquetas son (HTML Tags):
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
This text contains<br>a line break.
<iframe src="http://www.w3schools.com"> Go to W3C </iframe>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form> <button type="button"> Click Me! </button>

-Muchos elementos tienen atributos (parámetros) que definen propiedades del elemento:
<etiqueta atributo="valor"> bloque de texto </etiqueta>
-En este bloque de código estamos definiendo una sección de un documento HTML en la cual el color
de la tipografía va a ser azul. Podemos definir muchas otras propiedades:
background: black;
text-align: center;
border: 1px solid #f1f1f1;
font-size: 14 px;
font-weight: bold;
…

2. CSS: Cascading Style Sheets
2.1. ¿Qué es?
-Lenguaje estándar (W3C) que determina como han de visualizarse (en papel, pantalla u otros medios)
los elementos HTML que a su vez definen la estructura web. Nos permite ahorro de trabajo/tiempo.
-Se utiliza para definir estilos, incluyendo el diseño, la disposición y variaciones en el ‘display’ para
diferentes dispositivos y tamaños de pantalla.
-Sintaxis:

2.1. Selectores
-Los selectores CSS se utilizan para "encontrar" (o seleccionar) elementos HTML en función de su
nombre de elemento, identificación , clase, atributo…
-Podemos seleccionar elementos en función del nombre de su selector:
p {
text-align: center;
}
-De su id:
#para1 {
text-align: center;
}
-De su clase CSS:
.center {
text-align: center;
}
-Todo lo específicamente que queramos:
p.center {
text-align: center;
}
-O agrupándolos:
h1, h2, p { text-align: center; }

2.3. Incluir CSS en un documento HTML
-Existen tres formas:
Hoja de estilos externa
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css“ >
</head>
Estilos internos
<style>
body {
background-color: blue;
}
</style>
Estilos en línea
<h1 style= “color:blue;margin-left:30px;">This is a heading.</h1>

2.4. Orden CSS
-Hay conceptos que controlan el orden en el que se aplican las declaraciones de CSS:
-Importancia: depende de dónde se ha especificado el estilo CSS
- Navegador
- Hojas de estilo externas
- Estilos en línea
- !important
- Especificidad: se calcula generando un nº que dota de peso diferente a cada elemento:

3. JavaScript (JS)
3.1. ¿Qué es?
- Lenguaje de programación que se utiliza, principalmente, para crear webs dinámicas.
- Una web dinámica es aquella que incorpora efectos, animaciones y acciones.
- Es un lenguaje interpretado, por lo que no es necesario compilar los programas para ejecutarlos.
- El código se encierra entre etiquetas <script> y se incluye en cualquier parte del documento.

3.2. Incluir JavaScript en un documento HTML
-Definir JavaScript en un archivo externo
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript" src="/js/codigo.js"></script>
</head>
-Incluir JavaScript en el mismo documento HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
</head>
-Incluir JavaScript en los elementos XHTML
<p onclick="alert('Un mensaje de prueba')">Un párrafo de texto </p>

3.3. Sintaxis básica
- No se tienen en cuenta los espacios en blanco y las nuevas líneas
- Se distinguen las mayúsculas y minúsculas
- No se define el tipo de las variables
- No es necesario terminar cada sentencia con el carácter de punto y coma (conveniente)
- Se pueden incluir comentarios:
*Ejemplo de comentario de una sola línea:
// a continuación se muestra un mensaje alert("mensaje de prueba");
*Ejemplo de comentario de varias líneas:
/* Los comentarios de varias líneas son muy útiles cuando se necesita incluir bastante
información en los comentarios */

3.4. Tu primer Script
Ejercicio:
Modificar el primer script para que:
-Todo el código JavaScript se encuentre en un archivo externo llamado codigo.js y el script
siga funcionando de la misma manera.
-Después del primer mensaje, se debe mostrar otro mensaje que diga "Soy el primer script“
-Añadir algunos comentarios que expliquen el funcionamiento del código

3.5. Tipos de variables
Numéricas
var iva = 16; // variable tipo entero
var total = 234.65; // variable tipo decimal
Cadenas de texto
var mensaje = "Bienvenido a nuestro sitio web";
var nombreProducto = 'Producto ABC';
var letraSeleccionada = 'c';
/* El contenido de texto1 tiene comillas simples, por lo que se encierra con dobles */
var texto1 = "Una frase con 'comillas simples' dentro";
/* El contenido de texto2 tiene comillas dobles, por lo que se encierra con simples */
var texto2 = 'Una frase con "comillas dobles" dentro‘;
Arrays
var nombre_array = [valor1, valor2, ..., valorN];
var x = nombre_array[0];
Booleanos
var clienteRegistrado = false;
var ivaIncluido = true;

Cadenas de texto:
Length
Concat
charAt
toUpperCase
indexOf

Arrays:
length
concat
join
push

Librerías en CDE:
BOOTSTRAP - jQUERY - PROTOVIS - BLUEPRINT

LIBRERÍAS EN CDE
1. BOOTSTRAP:
1.1. ¿Qué es?
1.2. Tu primer layout con Bootstrap
1.3. Un poco más difícil
2. jQuery:
2.1. ¿Qué es?
2.2. Añadir jQuery
2.3. Sintaxis
2.4. Selección de elementos
2.5. Eventos
2.6 Efectos
3. Protovis:
3.1. ¿Qué es?
3.2. Ejemplos
4. Blueprint:
3.1. ¿Qué es?
3.2. Ejemplo

1. Bootstrap: ¿Qué es?
-Framework de código abierto desarrollado por Twitter (actualmente versión 3).
-Sistema de 'grid' (rejilla) permite el diseño a través de la adición de filas (rows) y columnas (columns).

1.1. ¿Qué es?
-Podemos incluir columnas dentro de las filas creadas. Nosotros tendremos que definir el
número de columnas en que queremos dividir cada fila y su ancho para cada tamaño de pantalla.
Por ejemplo: 3 columnas de igual ancho ocupando todo el ancho = col-xx -4 col-xx -4 col-xx -4
-El máximo de columnas es 12
-Si el tamaño total de las columnas de una fila excede de 12 el sobrante se colocará en la siguiente fila
- El tamaño de las columnas se especifica con clases CSS definidas por Bootstrap para cada tamaño de
pantalla, por ejemplo: .col-md-XX, donde XX es el tamaño de la columna y podrá tomar valores
entre 1 y 12

1.1. ¿Qué es?
-En la siguiente tabla se muestra un resumen del sistema de rejilla de Bootstrap, su comportamiento
según el tamaño del dispositivo y las clases CSS que nos permiten controlarlo:

-Ejemplo de código HTML/Bootstrap

-Para entenderlo mejor, vamos a construir nuestro primer layout:

-Como ya sabes usar CSS, ¡dale un poco de color!
-¿Fácil? A ver el siguiente…

2. jQuery: write less, do more
2.1. ¿Qué es?
-jQuery es una biblioteca de JavaScript creada inicialmente por John Resig y presentada en 2006.
-Permite:
- simplificar la manera de interactuar con los documentos HTML
- manipular el DOM
- manejar eventos
- desarrollar animaciones
-agregar interacción con AJAX a páginas web
-jQuery es libre y de código abierto. En la actualidad, es una de las bibliotecas JS más utilizada

2.2. Añadir jQuery
-Download
- En http://jquery.com/download/
-Incluyendo jQuery desde CDN (Content Delivery Network)
*En CDE jQuery está integrado por defecto luego no es necesario añadir esta biblioteca

2.3. Sintaxis
-La sintaxis básica es: $(selector).action();
•El $ define el acceso a jQuery
•El (selector) indica “busca/encuentra" elementos HTML
•El jQuery action() acción que se realizará sobre los elementos
-Ejemplos:
- Es importante incluir los métodos jQuery dentro del evento document ready para evitar que el código
jQuery se ejecute antes de que la página haya terminado de cargarse.
$(document).ready(function(){
// jQuery métodos
});

2.5. Eventos
Un evento representa el momento preciso en que algo ocurre
$("p").click(function(){
$(this).hide();
});
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
$("input").focus(function(){
$(this).css("color", "#cccccc");
});

3. Protovis: visualización gráfica
2.1. ¿Qué es?
Librería de visualización gráfica desarrollada por Michael Bostock para visualizaciones complejas y
gráficos interactivos. De código abierto, utiliza JavaScript y SVG. Integrada en CDE.

2.1. ¿Qué es?
- Básicamente, permite manipular documentos basados en datos usando estándares abiertos de la
web. Así, los navegadores pueden crear visualizaciones complejas sin depender de un software
propietario.
-Actualmente no hay desarrollo activo para Protovis ya que su equipo está trabajando en D3.js
Características:
•Open Source (Licencia BSD)
•JavaScript
•Compatible con dispositivos móviles
•Compatible con Safari, Chrome, Firefox, Opera o IE8 (y posteriores)

4. Blueprint: CSS Framework ¿Qué es?
-Librerías de Hojas de Estilo en Cascada que contienen código para maquetar una web y aplicar
otros estilos tipográficos o de impresión, algo que comúnmente conocemos como Framework CSS.
-Framework CSS: declaraciones de estilos definidos de forma estándar para que sirvan como base
para el diseño de todo tipo de webs/cdm (usaremos Bootstrap de manera general/habitual)
-Características:
•Una rejilla: conjunto de clases CSS para posicionar cualquier elemento en un espacio de 950
píxeles de anchura dividido en 24 columnas ¿os recuerda a Bootstrap? ;)
•Una definición de tipografía predeterminada
•Estilos para formularios
•Estilos para impresión
•Estilos específicos para IE

Librerías externas:
jQuery UI ~ Font-Awesome ~ HighCharts

LIBRERÍAS EXTERNAS
1. Jquery UI:
1.1. ¿Qué es?
1.2. Otras funcionalidades
2. Font Awesome:
2.1. ¿Qué es?
2.2. Como usar los iconos
3. HighCharts:
3.1. ¿Qué es?

1. jQuery UI ¿Qué es?
- jQuery UI es una librería complemento de jQuery. Permite implementar componentes para
generar interfaces de usuario además de funcionalidades básicas para crear aplicaciones web
enriquecidas.
- Para comenzar realmente a usar jQuery UI necesitamos descargar las librerías, pero este sistema
es amplio por lo que nos interesa descargar sólo una parte para que no resulte demasiado pesado.
- Podemos acceder a la página de descargas en: http://jqueryui.com/download

1. jQuery UI ¿Qué es?
Una vez descargado nuestro paquete de jQuery UI obtendremos un comprimido con diversos
directorios y archivos, que tiene las siguientes carpetas principales:
Carpeta "css": CSS e imágenes para generar el tema o los temas escogidos.
Carpeta "development-bundle": contiene una serie de materiales útiles para los desarrolladores
que van a utilizar estas librerías. Veremos aquí páginas de documentación, ejemplos de uso…
Carpeta "js": scripts JavaScript de jQuery y jQuery UI necesarios para que todos los componentes
funcionen. Contiene el archivo JavaScript con el código de los componentes que hemos
seleccionado al hacer la descarga.
Este es el código con los archivos que vamos a necesitar:

1.2. Invocar métodos
Ejemplo Componente DatePicker:

2.1 Font Awesome ¿Qué es?
Lista de más de 400 iconos gratuitos que, al ser tratados como una fuente normal de
letra, son fácilmente escalables y editables mediante CSS. Además, tardan menos tiempo
en cargar que si usáramos imágenes.

2.2. Como usar los iconos
1. Descargar el kit de CSS y Font
2. Extraer los archivos .css en nuestra carpeta CSS y los archivos de fuente en nuestra
carpeta Fonts.
3. Copiar y pegar esta línea de código dentro de la etiqueta <head> de nuestro HTML,
poniendo la ruta correcta al archivo .css que se indica.
<link rel=”stylesheet” href=”tucarpeta/css/font-awesome.min.css“>

1. HighCharts ¿Qué es?
•Librería para la visualización de gráficas con JavaScript.
•No necesita plugins.
•Dinámica.
•Su compatibilidad es máxima ya que soporta incluso Explorer 6.
•Es muy fácil de usar una vez hemos instalado jQuery, Mootols o Prototype.

OSBI Magic Visualizations
The power of open source business intelligence
Info@stratebi.com
www.stratebi.com
91.788.34.10
93.425.50.10
Avda. de Brasil, 17 (Madrid)
C/ Valencia, 63 (Barcelona)

Curso de creación de Dashboards Open Source

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Curso de creación de Dashboards Open Source

Similar to Curso de creación de Dashboards Open Source (20)

More from Stratebi

More from Stratebi (20)

Recently uploaded

Recently uploaded (20)

Curso de creación de Dashboards Open Source