Del curso: HTML5 práctico: Visualización de datos

Descripción de las librerías para la infografía con HTML5 - Tutorial de HTML

Del curso: HTML5 práctico: Visualización de datos

Comenzar mi mes de prueba gratis

Descripción de las librerías para la infografía con HTML5

“

En este ejemplo tenemos pocos contenidos y parece, bueno, pues que es relativamente fácil crear esta página. Pero sin embargo, si nos planteásemos crear estos contenidos de la nada, desde cero, realmente sería un trabajo verdaderamente difícil, porque por un lado tenemos una serie de elementos interactivos que son muy cómodos de manejar y que funcionan muy bien, oor otro lado tenemos gráficas con animación y, además, tres tipos de gráficas distintos que muestran un montón de información de una manera muy clara y muy cómoda. El planteamiento de este tipo de trabajo siempre se hace en base a la utilización de librerías. Las librerías es código que ha generado otra gente y que yo puedo reutilizar. Algunas son gratuitas, otras son de pago, pero que, como digo, podré utilizar para realizar mis proyectos, ahorrando un montón de tiempo. Siempre merece la pena utilizar librerías. en este caso he utilizado, por un lado, jQuery para hacer que se conecten unos elementos con otros y para simplificar la programación. Por otro lado, he utilizado una librería que se llama noUISlider, que sirve para crear estos "sliders". En realidad no tienen ninguna dependencia y funcionan, como digo, muy cómodos. Además, es muy ligera. Y por último, he utilizado la librería Highcharts, que es una librería muy potente para la creación de gráficos. De hecho, personalmente creo que es la mejor librería que hay ahora mismo en el mercado. Para descargar todos ellos, pues simplemente tenemos que irnos a la web de descargas de jQuery, donde tenemos las distintas opciones de descarga. En el caso de noUISlider, más abajo, en la página de entrada, podemos encontrar el código para incrustar esta librería que, como vemos, son solamente dos archivos que me voy a poder descargar con el botón de descargas. Download, Download. Y eso, como digo, me va a descargar un archivo comprimido. Descomprimiendo este archivo vemos que tenemos varios archivos de JavaScript y CSS. Bueno, pues los que utilizaremos serán la versión 'min' de JavaScript y la versión 'min' de CSS, 'nouislider.min.css'. Y para el caso de los gráficos, pues aquí vemos la web de Highcharts, que tiene muchas opciones, que tiene unos gráficos verdaderamente fantásticos y que dentro de ella podemos navegar entre diferentes demos. Vamos a tener muchas demos diferentes. haciendo clic sobre Highcharts y sobre Nuestros productos, nos encontraremos con que esta librería en concreto no es una librería gratuita. Podemos utilizarla para fines no comerciales de manera gratuita y libre, pero si queremos utilizarla para fines comerciales, entonces tendremos que contratar el uso de la librería que, en principio, para un simple sitio serían 90 dólares. No es un precio excesivamente barato, pero, teniendo en cuenta las capacidades que tiene este tipo de generación de gráficos y teniendo en cuenta que con una sola licencia para un sitio puedo utilizar todos los gráficos que quiera, es una opción verdaderamente buena cuando estamos trabajando con webs de alta calidad. Para descargarlo podemos irnos a la misma web de Highcharts, dentro del producto, que es estas gráficas en concreto y pulsar en el botón Download. Dentro de ellos voy a descargar la versión 4. .9, que es la última en este momento, y al descomprimirlo pues me va a generar una serie de archivos. En principio, de todos estos archivos no voy a necesitar más que un par de ellos. Tenemos en realidad muchos ejemplos distintos, pero lo verdaderamente importante está dentro de la carpeta 'js'. Aquí, dentro de esta carpeta, utilizaremos el archivo 'highcharts.js'. Y por otro lado, también tendremos que utilizar los demás archivos que he descargado. Entonces los he colocado dentro de la carpeta 'css' de mi proyecto, he creado 'nouislider.min'. Por otro lado, en la carpeta 'js' he guardado el archivo de jQuery, he guardado por otro lado ese 'highcharts' y he guardado el 'nouislider.min'. Con esos archivos aquí guardados ya podemos empezar entonces a trabajar.

Contenido