INGENIERIA EN TECNOLOGIAS DE LA INFORMACION

Y
COMUNICACIÓN

PROGRAMACIÓN WEB

P R E S E N T A
HERNÁNDEZ MENDOZA ETZAHU

LIBRERIAS DE JAVASCRIPT

GRUPO: T-61

FACILITADOR:
GALLARDO GODINEZ JOSE ANTONIO

TLALNEPANTLA DE BAZ, EDO. DE MÉXICO

JavaScript sigue creciendo y el número de frameworks y librerías que
se utilizan habitualmente comienza a ser muy elevado. Es imposible
para los desarrolladores poder conocerlos todos. Pero si que es
importante saber cuales son los más populares, vamos a echarles un
vistazo.
Qué es JavaScript
JavaScript es un lenguaje de programación que surgió, por primera vez y siendo
muy diferente a lo que conocemos hoy en día, en el año 1995, llamado Java.
Después de establecerse como un lenguaje muy útil para permitir funciones y
características en espacios digitales y en el navegador, Microsoft desarrolló algo
similar a la Java que se había desarrollado y lo llamó JavaScript para no tener
problemas con la marca registrada. Más tarde seguiría evolucionando y, tanto Java
como JavaScript, se posicionarían como un estándar a nivel de lenguaje de
programación y como algo imprescindible para los navegadores y para todos los
dispositivos y equipos del mercado. Y es que, gracias a JavaScript se pueden
ejecutar diferentes programas y aplicaciones de todo tipo en las páginas web y se
puede acceder a un montón de funcionalidades sin las que no podríamos estar y sin
que las plataformas digitales podrían funcionar, en muchos casos en los que se
trabaja con este lenguaje.

Así, vemos que es muy útil y muy importante para el mercado laboral y para el
mercado profesional, así como para los dispositivos electrónicos, los ordenadores y
las computadoras, los navegadores web y los dispositivos móviles de todo tipo, sean
smart-phones o tabletas. Millones de usuarios lo utilizan a diario y es prácticamente
imposible vivir sin conocer JavaScript o sin utilizarlo en nuestros navegadores y
nuestros equipos, pues vivimos conectados y continuamente empleando este tipo
de sistemas y equipos, lo que nos obliga a requerir de las funcionalidades y de las
utilidades de JavaScript en nuestro día a día.

El secreto de su éxito, su popularidad y su extensión por todo el mundo

Su éxito se entiende una vez que entendemos qué es y qué es lo que hace, aunque
las utilidades y los usos los comentaremos más adelante, para poder tratarlos con
algo más de profundidad y no dejándonos nada en el tintero. Ahora ya sabemos que
JavaScript es el lenguaje de programación estándar enfocado a objetos y empleado
para la ejecución de todo tipo de elementos en las páginas web y las plataformas,
como texto, animaciones, imágenes, vídeos, aplicaciones, etc. Vemos pues que,
para poder llevar a cabo casi cualquier acción en algunas páginas web o algunos
elementos de las mismas y para poder acceder a algunos vídeos o a algunos juegos
y componentes de dichos espacios requerimos de JavaScript. Si lo desconectamos
y no permitimos que el navegador lo use o le permita realizar las tareas que le son
propias, cuando visitemos una página web habrá elementos que no terminen de
cargar o que no lleguen a funcionar.

Su éxito está, de una forma muy clara y directa, relacionado con este hecho. Al
requerir de JavaScript para emplear ciertos objetos y ciertos contenidos en las
páginas web, los desarrolladores web y los profesionales la emplean, obligando a
su vez a que los usuarios y los visitantes o el público en general tenga descargado,
actualizado y habilitado JavaScript. Y no tiene tantas desventajas ni tantos puntos
negativos que podamos comentar, es decir, que sí se vuelve recomendable y es
muy interesante, ya que aporta una gran solución a los usuarios sin dar problemas
ni empeorar el funcionamiento del navegador. Más bien todo lo contrario, está
permitiéndole continuar con su actividad y con lo que se propone a hacer, sea ocio,
diversión, búsqueda de información o trabajo, e incluso desarrollo web en el caso
de empleados y profesionales.

Utilidad y usos como lenguaje de programación

Como vemos en el curso de javascript que ofrecemos en Madrid, este lenguaje de

programación permite a las personas que trabajan y se han formado en él elaborar
una serie de procesos y elementos para sus páginas web o para otro tipo de
plataformas y espacios digitales que requieren de este lenguaje como podrían
requerir de alguna alternativa o de otras opciones disponibles. Sin embargo, como
el más utilizado y popular es JavaScript, hasta el punto de haberse situado y
posicionado como el estándar para los equipos informáticos y los dispositivos
móviles, es el más recomendable y quizás el que mayor utilidad nos proporciona,
siendo aquel en el que la mayor parte de usuario y profesionales confían, pues ya
es de sobra conocido y aporta todo lo que podemos requerir, tanto a nivel de utilidad
como de uso en lo que respecta a lenguaje de programación.

Cualquier informático que se precie y cualquier desarrollador y diseñador web

conocerá JavaScript y se habrá formado en la materia, para sus encargos y
proyectos, así como para los trabajos que se dirija a elaborar y preparar, lo que le
ayudará mucho y le convertirá en un empleado o un profesional cualificado,
aportándole soluciones técnicas y toda una serie de facilidades con las que
elaborará las tareas y los trabajos en los que está esforzándose día a día e
invirtiendo su tiempo y su esfuerzo continuo. Así, vemos que JavaScript es muy
importante y muy útil para los profesionales que aprenden a dominar este y otros
lenguaje de programación para emplearlo, lo que no quita que sea a su vez
importante para los usuarios finales y para el público en general, además de para
las empresas y para la rama de diseño web, como veremos a continuación.

JavaScript enfocado a usuarios y al público en general

JavaScript es un lenguaje de programación del que los usuarios de todo el mundo

pueden beneficiarse y un estándar que se emplea en cualquier navegador. Siempre
compatible con los distintos sistemas operativos que encontramos en el mercado,
tanto de dispositivos móviles como de equipos de escritorio, tal y como hemos
comentado más arriba. Los usuarios y el público en general se benefician de
JavaScript porque, siendo un lenguaje que emplean sin un coste adicional ni un
pago mensual o suscripción alguna, pueden acceder a todas esas funciones y toda
esa accesibilidad que se busca, siendo o no conscientes de que muchas de esas
cosas que hacen a diario es gracias a JavaScript y a tantos diseñadores web y
programadores que lo hacen posible gracias a su esfuerzo y a su trabajo con dicho
lenguaje de programación y con su trabajo en la materia.

Como es lógico, los usuarios comunes y el público en general no tiene que saber
interpretar ni trabajar con el lenguaje de programación que es JavaScript, pero lo
emplean en su día a día. Quienes sí tendrán que investigar algo más, formarse y
conocer con una mayor o menor profundidad en la materia, serán las empresas y
los profesionales del diseño web, que se benefician de ello para su trabajo y para
los diseños o los proyectos que llevan a cabo en equipos dentro de las empresas o
por separado, incluso como autónomos.

JavaScript en empresas y diseño web

Cuando una empresa o una compañía pública o privada quiere ofrecer una serie de
aplicaciones y utilidades en su página web o sus espacios propios digitales,
requerirá de profesionales y empleados expertos que sean capaz de lograr que esos
objetos deseados puedan ejecutarse y llevarse a cabo con éxito y con un buen
resultado que no solo cumpla con las expectativas de las empresas que lo encargan,
sino que también satisfaga a los usuarios y resulte conveniente para la solución que
se pretende lograr o conseguir con ello.

Así, vemos que JavaScript también es una materia presente en las empresas y el
la materia del diseño web, además de entre los profesionales y los empleados.
Como el conocimiento en tantas otras materias y la formación en tantos otros
lenguajes de programación, JavaScript es importante para muchos y muy relevante
a la hora de trabajar, aunque está claro que será más destacado para los usuarios,
ya que ellos siempre lo emplean y, en cambio, las empresas no siempre solicitan
profesionales de este tipo que se enfoquen en JavaScript, sino informáticos y
desarrolladores que cuenten con la formación y el conocimiento en ello, además de
en tantos otros lenguajes y opciones.

¿Sigue siendo tan destacado JavaScript o ha perdido mercado e importancia?

Está claro que su momento de mayor crecimiento y extensión, en el que se dio a

conocer fue en la primera década del siglo XXI, cuando se volvió tan conocido y se
convirtió en estándar. Sobre todo teniendo en cuenta que es ideal y muy
recomendable, casi imprescindible, para los navegadores web de los equipos de
escritorio y para otro tipo de utilidades y usos menos destacados. Sin embargo, en
los dispositivos móviles hemos visto que se vuelve más complicada su extensión y
algo más limitada, ya que algunas marcas y algunos dispositivos no querían darle
un soporte completo a JavaScript para evitar que pudiera afectar al rendimiento de
la batería o a su duración entre carga y carga. Vivimos unos años complicados en
los que se estaban realizando los dispositivos y los prototipos de los productos que
hoy en día utilizamos tanto y que son aún más populares que los ordenadores
personales.

De esta forma, JavaScript no se volvió tan popular ni lo tuvo tan fácil en los
dispositivos móviles, ya que le ocurrió como a otras aplicaciones y otros elementos
digitales, como Adobe Flash Player y demás. Sin embargo y, pese a ello, ha
conseguido establecerse igual de bien que en los equipos de escritorio y, ahora sí,
está presente en ellos, siendo destacado y manteniendo su importancia, a la vez
que extendiéndose, pues los móviles y los equipos portátiles o las tabletas son
mucho más populares que los ordenadores y han llevado a conectar la sociedad y
hacer que cualquiera tenga acceso a la red y a internet con solo un par de clics o
un par de toques en la pantalla. Los profesionales y los estudiantes interesados
siguen viendo en JavaScript una gran oportunidad, debido a su utilidad y a sus usos
en la actualidad. No ha perdido relevancia.

Que es una librería en JavaScript:

Las librerías JavaScript son archivos con instrucciones para agregarle diversas
funcionalidades y efectos a las páginas de internet, usando este lenguaje de
programación.
Todos los navegadores modernos incluyen de forma nativa JavaScript, lo que les
permite interpretar funciones básicas, estas librerías agregan otros recursos para
manipular la estructura de las paginas (DOM) de forma dinámica y el estilo visual
(CSS), como demanda la web moderna.
Estos archivos son proporcionados por diferentes servicios en la red y se pueden
descargar libremente o enlazarlos a las páginas.
En varios artículos de este sitio hacemos referencias a algunas de estas librerías y
explicamos cómo usarlas.
En este artículo compartimos cuales son las más empleadas y populares y los
servicios CDN desde donde cargarlas.

Las librerías JavaScript más populares en internet

Para crear este artículo nos basamos en las estadísticas del servicio de W3Techs
Según sus datos, el 75% de todos los sitios de internet usan librerías de JavaScript.
De ellas las más populares son las siguientes:
JQuery
JQuery es la más popular de las librerías JavaScript de internet.
Es un archivo que contiene varias instrucciones, que permiten que el navegador
ejecute muchas funcionalidades adicionales.
JQuery es muy empleada para hacer cambios de forma dinámica en el DOM
(estructuras de las páginas), sin tener que recargarlas y agregarles gran cantidad
de efectos y animaciones.
Podemos cambiar el tamaño, la forma o el estilo de cualquier elemento de una
página.
Sobre JQuery se han desarrollado otras extensiones, como JQuery UI.
En otros artículos de nuestro sitio se puede conocer cómo usar JQuery y JQuery UI,
incluyendo en cada uno varios ejemplos prácticos.

✔ Sitio web: http://jquery.com/

Bootstrap
Bootstrap es un framework web (marco de trabajo) libre y de código abierto, muy
popular usado para crear sitios web.
Ofrece plantillas HTML, hojas de estilo CSS, fuentes y una librería para adicionar
funcionalidades adicionales a las páginas, por ejemplo botones, menús, barras de
navegación, paneles, visores de imágenes, etc.
Se apoya en JQuery, por lo que es necesario cargar esta librería previamente.
Bootstrap es uno de los proyectos más populares en Github.

✔ Sitio web: http://getbootstrap.com/

✔ Proyecto en Github: https://github.com/twbs/bootstrap

✔ Carga desde este sitio una página creada con Bootstrap.

Modernizr
Modernizr es una librería que detecta funcionalidades HTML5 y CSS3 en los
navegadores web.
Es empleada en muchas aplicaciones web como una herramienta imprescindible
para poder funcionar adecuadamente.
Es solo un método de detección y no agrega ninguna funcionalidad adicional.
Modernizr está disponible como un proyecto libre en Github.
MooTools
Es un JavaScript framework (marco de trabajo) modular, orientado a objetos.
Proyecto inspirado en Prototype, permite agregar efectos simples y básicos a las
páginas, usando una librería de pequeño tamaño, que se puede personalizar
completamente.
Sitio web: http://mootools.net/
ASP.NET Ajax
Librería JavaScript basada en ASP.NET, desarrollada por Microsoft. La usan todos
los sitios de esta empresa y varios sitios de internet.
Prototype
Es un JavaScript framework, enfocado principalmente en creación de contenido
dinámico y actualizaciones asíncronas en páginas y aplicaciones web.
Su librería es usada por varios proyectos.
Sitio web: http://prototypejs.org/
Script.aculo.us
Librería JavaScript basada en Prototype, al que agrega efectos visuales, controles
y utilidades. Su desarrollo no está actualizado.
AngularJS
Librería JavaScript de código abierto mantenida por Google y varios desarrolladores
independientes, para crear aplicaciones web de una sola página.
AngularJS es uno de los proyectos más populares en Github.

FusionCharts
 Características
Parte de InfoSoft Global (P) Ltd, es un proveedor privado de software
de productos de visualización de datos(gráficos de JavaScript, mapas,
widgets y paneles) con oficinas en Bangalore y Kolkata, India. FusionCharts
tiene 23,000 clientes y 500,000 usuarios en 120 países, incluyendo gigantes
tecnológicos
como Apple, Google, ZOHO, Cisco, Facebook, Intel, LinkedIn, Microsoft, He
wlett-Packard, IBM, EMC, Nokia, Tibco, así como The Weather
Channel, NASA y el Gobierno Federal de los Estados Unidos.
Un 100% bootstrap empresa, FusionCharts se ha ganado un ingreso 2010-
11 de $ 4.5 millones de y ha registrado unos ingresos de hasta $ 7 millones,
o Rs 39 millones de rupias.

 Móvil
Para la demostración, incrustaremos FusionCharts en una aplicación de
Android y crearemos los siguientes tres tipos de gráficos:
Un gráfico de columnas en 2D, para mostrar los ingresos trimestrales en
Harry's SuperMart
Un gráfico 2D circular para mostrar el número de visitantes para diferentes
grupos de edad durante un año
Una tabla detallada para mostrar los 3 sabores principales de jugo durante
un año
Siga los pasos que se indican a continuación para incrustar FusionCharts y
crear gráficos en una aplicación de Android:
Paso 1
o Inicia Android Studio. Se muestra la ventana Crear nuevo proyecto .
o Cree un nuevo proyecto y asígnele el nombre FusionCharts como se
muestra en la imagen a continuación.
 Paso 2
Seleccione el dispositivo de destino de la lista de factores de formulario
mencionados y el SDK mínimo requerido para su aplicación, como se muestra en la
siguiente imagen:

Paso 3
 Crea una actividad para el móvil. La clase de actividad es un bloque de código
que admite la pantalla y la interfaz de usuario. Para nuestro proyecto,
seleccionaremos Actividad vacía , como se muestra en la siguiente imagen:
 Cuando se selecciona la actividad, haga clic en Siguiente .
 Haga clic en Finalizar .
La siguiente imagen muestra la estructura del proyecto creado hasta el momento:

Etapa 4
 Desde la carpeta res , seleccione la carpeta de diseño y abra
el archivo activity_main.xml .
 Copie el código que se proporciona a continuación, para configurar el diseño de
la aplicación y péguelo en el archivo activity_main.xml .
La siguiente imagen muestra el diseño de la aplicación creada cuando se ejecuta el
código anterior. Este diseño se puede personalizar aún más según sea necesario.
Paso 5
 Desde la carpeta java , seleccione la carpeta com.fusioncharts.app.demo y
abra el archivo MainActivity.java .
 Copie el siguiente código en el archivo MainActivity.java .

Una vez que haya terminado de agregar el código anterior en

el archivo MainActivity.java , notará que al hacer clic en cada botón, se cargará
una página HTML dentro de la vista web.
Los siguientes pasos hablan de cómo se incluyen estas páginas HTML.
Paso 6
Desde la carpeta de la aplicación , seleccione Nuevo> Carpeta> Carpeta
de activos , como se muestra en la siguiente imagen:
Se abre la ventana Nuevo componente de Android .
Paso 7
 Seleccione la Fuente objetivo para su Carpeta de Activos , como se muestra en
la siguiente imagen:
 Haga clic en Finalizar

Paso 8
 La copia aparecerá la ventana. Inserte los archivos de la
biblioteca FusionCharts en la carpeta Activos . La imagen de abajo muestra
que el archivo fusioncharts.js se copiará en la carpeta Activos.

 Incluya todos los otros archivos de la biblioteca de la misma manera.

Paso 9
 Cree archivos HTML para cada tipo de gráfico que se va a representar.
 Para el gráfico 2D de la columna , copie el siguiente código en el archivo HTML
y guárdelo en la carpeta de activos
 .
 Para el gráfico 2D circular , copie el siguiente código en el archivo HTML y
guárdelo en la carpeta de activos .
 Para el gráfico detallado , copie el siguiente código en el archivo HTML y
guárdelo en la carpeta de activos
.
Paso 10
 Haga clic en Ejecutar , para ejecutar la aplicación.
 Si todos los pasos se han seguido correctamente, la salida se representará
como se muestra en la siguiente imagen:
Nota: La salida que se muestra a continuación es de 3 vistas diferentes para los
gráficos respectivos. Sólo se muestra uno a la vez.
Highcharts
 Características
Highcharts es un producto que fue creado por la compañía con sede en
Noruega, Highsoft . Highcharts se lanzó en 2009 y es una biblioteca de
gráficos escrita en JavaScript puro.
El producto se ha desarrollado en Vik, Noruega y se ha presentado
regularmente en los medios de comunicación nacionales,
como Finansavisen y Dagsrevyen.

 Móvil
1. Preparando tu proyecto.
En primer lugar, tienes que descargar el marco de trabajo de iOS Highcharts. Para
hacerlo, elija una de las tres opciones a continuación:

1. Una descarga directa desde Github .

2. Use Cocoapods agregando a su PodFile.pod 'Highcharts'
3. Usa Cartago agregando a tu
Cartfilegithub "https://github.com/highcharts/highcharts-ios" >= 1.0.2

Luego, incluya el marco a su proyecto copiándolo en la carpeta Marcos , si no

existe, cree uno. Recuerde marcar la opción " Copiar elementos si es necesario ",
luego haga clic en finalizar (vea las imágenes a continuación):
La última tarea de esta sección es ir a la configuración de su proyecto y agregar
Highcharts a los archivos binarios incrustados:
¡Ahora está configurado para usar el marco de trabajo de iOS Highcharts!

2. Uso de Highcharts (aplicación de demostración)

Para poder utilizar la demostración de la aplicación, debe importar Highcharts en la
parte superior de su AppDelegate . Abra el archivo AppDelegate.m y copie /
pegue esta línea #import <Highcharts/Highcharts.h>.

Para preajustar el chartView y establecer algunas opciones iniciales, debe insertar

la siguiente línea en su application:didFinishLaunchingWithOptions
[HIGChartView preload];

Luego incluya Highcharts.h al controlador de vista. Abra su archivo

ViewController.m y escriba #import <Highcharts/Highcharts.h>.

Si desea acceder fácilmente al gráfico, establezca la propiedad en ViewController

de la siguiente manera:

@interface ViewController () @property ( strong , nonatomic ) HIGChartView *

chartView ; @fin
Ahora, el proyecto está configurado para crear su primer gráfico.

3. Crea un gráfico
Los gráficos de columnas son muy populares y versátiles, por esta sencilla razón,
nuestro gráfico de demostración será un gráfico de columnas.
Para crear el chartView con origen y tamaño definidos, agregue la siguiente línea
en viewDidLoad :

uno mismo . ChartView = [[ HIGChartView alloc ] initWithFrame : CGRectMake ( auto

. vista . límites . origen . x , auto . vista . límites . origen . y + 20 , auto
. vista . límites . tamaño . anchura , 300.0f )];

La pieza principal importante del gráfico es la clase HIOptions , ya que contiene

toda la información necesaria para representar un gráfico. En realidad, solo se
requieren los datos para crear un gráfico básico, pero en aras de este artículo,
veamos cómo puede implementar información más útil.
Antes de implementar cualquier característica en su gráfico, debe crear una
instancia
de clase HIOptionsHIOptions*options = [[HIOptions alloc]init];

Es un buen hábito especificar el tipo de gráfico. Para hacerlo, crea un objeto de

clase HIChart y establece su tipo en "columna"

HIChart * chart = [[ HIChart alloc ] init ];

carta . tipo = @ "columna" ;
Opciones . chart = chart ;

Siempre es aconsejable establecer un título en un gráfico, ya que agrega más

claridad a los usuarios sobre el propósito del gráfico:

HITitle * title = [[ HITitle alloc ] init ];

título . texto = @ "gráfico de demostración" ;

Opciones . título = título ;

Ahora es el momento de introducir los datos. Tenga en cuenta que debido a que el
gráfico es un gráfico de tipo de columna, debe usar la serie de
datos HIColumn antes de comenzar a escribir los datos:

HIColumn * series = [[ HIColumn alloc ] init ];

la serie . datos = @ [@ 49.9 , @ 71.5 , @ 106.4 , @ 129.2 , @ 144 , @ 176 , @
135.6 , @ 148.5 , @ 216.4 , @ 194.1 , @ 95.6 , @ 54.4 ];

La característica de Opciones está diseñada para almacenar múltiples series. En

esta demostración, solo necesita una serie definida como matriz de un
elementooptions.series = @[series];
No olvide vincular la función de opciones a la vista de gráfico. Luego, agregue la
vista de gráfico como subvista a la vista de su Controlador de vista ¡ Eso es
todo! Ahora está configurado para ejecutar la demostración
:).self.chartView.options= options;
[self.view addSubview:self.chartView];

El archivo .m de View Controller debe tener este aspecto:

#import "ViewController.h" #import <Highcharts / Highcharts.h>

@interface ViewController () @property ( strong , nonatomic ) HIGChartView *

chartView ; @fin

@ implementación ViewController

- ( void ) viewDidLoad { [ super viewDidLoad ]; // Realice cualquier configuración

adicional después de cargar la vista, normalmente desde una plumilla. uno mismo .
ChartView = [[ HIGChartView alloc ] initWithFrame : CGRectMake ( auto . vista .
límites . origen . x , auto . Ver . límites . origen . y + 20 , auto .

vista . límites . tamaño . ancho , 300.0f )];

HIOptions * options = [[ HIOptions alloc ] init ];

HIChart * chart = [[ HIChart alloc ] init ];

carta . tipo = @ "columna" ;
Opciones . chart = chart ;

HITitle * title = [[ HITitle alloc ] init ];

título . texto = @ "gráfico de demostración" ;
Opciones . título = título ;

HIColumn * series = [[ HIColumn alloc ] init ];

la serie . datos = @ [@ 49.9 , @ 71.5 , @ 106.4 , @ 129.2 , @ 144 , @ 176 , @
135.6 , @ 148.5 , @ 216.4 , @ 194.1 , @ 95.6 , @ 54.4 ];
Opciones . serie = @ [ series ]; uno mismo . chartView . opciones
= opciones ;

[ Auto . ver addSubview : self . chartView ]; } - ( void )

didReceiveMemoryWarning { [ super didReceiveMemoryWarning ]; // Disponer de
cualquier recurso que pueda ser recreado. } @end
Presiona "Ejecutar" en XCode, y Voila! Tienes tu carta con solo unos pocos pasos.

XCharts

 Características
Uno de los mayores problemas que enfrentan las nuevas empresas es la
dificultad de poder explicar sus ideas de negocios, productos y servicios a
sus clientes, de manera simple y lo más rápido posible. Uno de los efectos
de la tecnología es que la capacidad de atención de la persona promedio es
más corta que nunca y cuanto más rápido pueda transmitir la información,
mejor. Desafortunadamente, unas pocas palabras no pueden articular un
concepto, y existe la posibilidad de perder la atención de la audiencia y perder
un cliente. Los propietarios de negocios, por lo tanto, necesitan un medio
para llamar la atención de su público objetivo y entregar su mensaje en unos
pocos segundos como sea posible.
Con un video explicativo animado , los dueños de negocios pueden explicar
mejor su producto o servicio en el menor tiempo posible. Nuestros videos
explicativos les ayudan a explicar su negocio de manera fácil y eficiente en
un minuto o menos. Los videos tienen un efecto muy poderoso en las
personas, ya que tienden a retener información, de los videos mejor que de
las palabras. Promover un nuevo producto, servicio o concepto plantea un
desafío. Hacerlo bien la primera vez es, por lo tanto, esencial y esto es lo que
nos esforzamos por lograr.
Rickshaw
Cubism.js

Es un complemento D3 para visualizar series de tiempo. Use Cubism para construir

mejores tableros en tiempo real, extrayendo datos de Graphite , Cube y otras
fuentes. El cubismo está disponible bajo la licencia Apache en GitHub .

Escalable

El cubismo recupera datos de series de tiempo de forma incremental: después de

la visualización inicial, el cubismo reduce la carga del servidor al sondear solo los
valores más recientes. El cubismo también se representa incrementalmente,
utilizando Canvas para desplazar los gráficos un píxel a la izquierda. ¡Este enfoque
le permite al cubismo escalar fácilmente a cientos de métricas que se actualizan
cada diez segundos! A pesar de la obtención asíncrona, la representación se
sincroniza para que los gráficos se actualicen simultáneamente, lo que mejora aún
más el rendimiento y la legibilidad.

Eficaz

El cubismo también se escala en términos de percepción: pequeños múltiplos

alineados por el tiempo facilitan la comparación rápida. Los gráficos de horizonte
del cubismo hacen un mejor uso del espacio vertical que los gráficos de área
estándar, lo que le permite ver muchas más métricas de un vistazo y aumenta la
probabilidad de descubrimiento. Si comprime un gráfico de área de 120 píxeles a
30 píxeles, pierde el 75% de la resolución y es más difícil ver pequeños cambios:

En contraste, los gráficos de horizonte reducen el espacio vertical sin perder

resolución. Los valores más grandes se sobreplotan en colores cada vez más
oscuros, mientras que los valores negativos se desplazan para descender desde la
parte superior. A medida que aumenta el número de colores, reduce el espacio
vertical requerido:
 Al combinar posición y color, los gráficos de horizonte mejoran la percepción : la
posición es altamente efectiva para discriminar pequeños cambios, mientras que el
color diferencia grandes cambios. Para aumentar aún más la densidad de datos, el
cubismo favorece las métricas por píxel donde cada píxel codifica un punto distinto
en el tiempo. El cubismo también incluye colores por defecto pensativos de Cynthia
Brewer .

Flexible

El cubismo es agnóstico de la fuente de datos. Tiene soporte incorporado

para Graphite y Cube , y se puede extender fácilmente para obtener datos de otras
fuentes. La aritmética de métricas del lado del cliente permite una mayor flexibilidad
al combinar métricas de múltiples fuentes. Los componentes modulares del cubismo
están diseñados para ser extensibles. También puede agregar nuevos tipos de
gráficos y modos de interacción. El cubismo se basa en D3 , lo que lo hace
altamente personalizable a través de CSS y JavaScript.

JQuery Sparklines

Este complemento de jQuery genera líneas de chispa (pequeños gráficos en línea)

directamente en el navegador utilizando los datos suministrados en línea en HTML,
o mediante javascript.

El complemento es compatible con la mayoría de los navegadores modernos y se

ha probado con Firefox 2+, Safari 3+, Opera 9, Google Chrome e Internet Explorer
6, 7, 8, 9 y 10, así como iOS y Android.

Cada ejemplo que se muestra a continuación toma solo 1 línea de HTML o javascript
para generar.

El complemento fue escrito por Gareth Watts para Splunk Inc. y publicado bajo
la Nueva Licencia BSD .

Ejemplos
ProtoChart
Es una nueva biblioteca de código abierto que utiliza Prototype y Canvas para crear
gráficos atractivos. Esta biblioteca está altamente motivada por las bibliotecas Flot,
Flotr y PlotKit. Caracteristicas

 Gráficos de líneas, barras, sectores, curvas, combinaciones y áreas

disponibles
 Múltiples series de datos en el mismo gráfico.
 Soporte de leyenda altamente personalizable
 Cuadrícula personalizable, borde de cuadrícula, fondo
 Valores de marca de eje personalizables (tanto x como y)
 Soporta: IE6 / 7, FF2 / 3 y Safari