Recopilación de herramientas HTML5/Javascript para crear diagramas

Publicado en HTML5, Javascript. 1 Comment »

¿Qué es Node.js?

Esperando a que Jaime se anime y prepare el Un poco de Node.js me ha parecido conveniente como poco tener un primer post sobre esta tecnología con tantos fans (y algunos detractores también, que eso de programar en Javascript!!!):

Node es una plataforma que permite desarrollar sobre Javascript para la capa servidor a través del motor Javascript Google’s V8.

Una vez instalado (http://nodejs.org/download/) lanzamos la consola con >node

Node también puede ejecutar cualquier fichero con extensión .js:

Un Servidor en node:

Node incluye un sistema de módulos que permite:

· Importar un fichero .js:

· O bien buscar entre los módulos core y en la carpeta de la instalación node_modules:

En Internet podéis encontrar un buen número de tutoriales, desde los más simples a avanzados, quizás la primera referencia sería el Mastering Node: http://visionmedia.github.io/masteringnode/book.html o en formato videocast por el propio creador:

Tablas en jQuery para CSV y Excel: CSV2Table y Handsontable

No hace falta más que hacer una búsqueda por Google para encontraros con recopilatorios sobre las mejores tablas/grids en jQuery.

Me quedo con esta web:

http://www.jquery4u.com/plugins/30-amazing-jquery-tables/

y esta para tablas editables:

http://jquery-plugins.net/tag/table-editor

De entre todas las opciones disponibles me llamó la atención el plugin de jQuery CSV2Table que permite cargar un CSV y representar en un grid:

Si la documentación estuviese en un idioma inteligible sería perfecto!!! :D

Por suerte sus ejemplos son autodescriptivos, como este:

Si lo que buscáis/necesitáis es una representación tipo Excel con celdas editables una buena opción (hay más) es Handsontable que es muy sencillo de usar:

Pero ofrece opciones como

Renderers

Ordenado,

Movimiento y redimensionado columnas,

Paginado,

Highlight,

Scroll y fijado columnas:

JavaScript for Java developers

Imprescindible en estos tiempos de HTML5 y Node.js :D

JavaScript for Java developers

Sortable: JS para ordenar cualquier tabla

Sortable es una librería open-source Javascript +CSS (6 temas) que permite añadir la funcionalidad de ordenado a cualquier tabla.

Su principal ventaja/diferencia con otras enemil opciones es que es muy ligera (no llega a 2 Kb) y no tiene dependencias, funciona en cualquier navegador incluido dispositivos móviles.

La forma de usarla es muy sencilla:

1) Incluyo las importaciones: js y css:

2) Decoro mi tabla con el sortable (y le doy estilo):

Podéis ver sus opciones (no muchas) aquí y los temas aquí:

CodeMirror: Un editor de código fuente en Javascript

(Espero llegar a tiempo Pedro :D)

CodeMirror es un editor Javascript de código fuente open-source (licencia MIT).

Aunque hay algunos más completos (como ACE), CodeMirror ofrece características más que suficientes para la mayoría y es muy sencillo de usar.

Y cuando digo sencillo es que es muy sencillo (sólo un js J):

Para haceros una idea muy rápidamente podéis jugar con los ejemplos embebidos que trae:

Entre sus principales características:

· Soporte out-of-the-box de más de 60 lenguajes (entre ellos Java, Groovy, Javascript,…)

· Autocompletado

· Sistema para componer languajes

· Temas

· Split Views

· Mezclado de fuentes

· Addons

· API

Su documentación es correcta y más que suficiente para usar con sus ejemplos.

Si no os convence en estas páginas podéis encontrar una comparativa de diferentes editores de código fuente:

http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Podéis descargar su última versión (3.2.0) desde este link o incluso generar un JS minimizado online:

Node.js vs Java EE

No he podido resistirme a comentar este post de Marc Fasel en DZone en la que se compara el rendimiento de Node.js frente a JavaEE

La prueba consiste en leer un dato JSON de CouchDB y devolverlo, en el caso de Node.js

Y en el caso de Java tenemos:

Más allá de que este Servlet parece realmente creado por un programador Node.js (ni el init han usado :)) la realidad es que según comenta Marc:

“The Java servlet was run on an Apache Tomcat version 7.0.21, default configuration running on Java 1.6. The database driver was CouchDB4J version 0.30. The driver has no caching options available, so no configuration was done.”

Lo que implica que se está arrancando el Tomcat con un conjunto de Servicios (JSPs, Consola Web, JMX,…) que están consumiendo recursos y tiempo de proceso. En mi opinión para que la prueba fuese más veraz en lugar de un Tomcat podrían haber elegido un Jetty arrancado con sólo el Servicio de Servlets.

En cualquier caso ahí están los datos :):

En Java:

En Nojde.js:

Loggeo JavaScript en el servidor mediante GET

Hace un tiempo se comentaba en este blog el framework log4javascript para el loggeo de eventos Javascript en el servidor.

El framework tiene todo lo que se le puede pedir a un log de eventos JavaScript no basado en Aspectos:

· Que funcione en todos los navegadores modernos:

Internet Explorer > 6, Firefox > 9, Chrome en sus distintas versiones, Safari…

· Distintas categorías de traceo:

o FATAL: se utiliza para mensajes críticos del sistema, generalmente después de guardar el mensaje el programa abortará.

o ERROR: se utiliza en mensajes de error de la aplicación que se desea guardar, estos eventos afectan al programa pero lo dejan seguir funcionando, como por ejemplo que algún parámetro de configuración no es correcto y se carga el parámetro por defecto.

o WARN: se utiliza para mensajes de alerta sobre eventos que se desea mantener constancia, pero que no afectan al correcto funcionamiento del programa.

o INFO: se utiliza para mensajes similares al modo “verbose” en otras aplicaciones.

o DEBUG: se utiliza para escribir mensajes de depuración, este log no debe estar activado cuando la aplicación se encuentre en producción.

o TRACE: se utiliza para mostrar mensajes con un mayor nivel de detalle que debug.

· Uso de Appenders

Si interesa que las peticiones Ajax de los eventos JavaScript que aterrizan en el servidor no vaya van vía POST si no vía GET, por eso de tener también una traza del log en el Servidor Web basta con modificar una línea de la librería javaScript La línea en cuestión está en el fichero /js/log4javascript.js

xmlHttp.open(“POST”,url,true);

Y hay que sustituirla por esta otra

xmlHttp.open(“GET”,url + “?”+ postData,true);

Hay que tener en cuenta que no es conveniente mandar mensajes muy grandes a través del GET ya que los navegadores e incluso los servidores web tienen limitado la cantidad de caracteres que se pueden enviar por GET aunque el protocolo HTTP no lo restringe: http://www.w3.org/Protocols/rfc2616/rfc2616-sec3.html#sec3.2.1 http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.4.15

Limitaciones del tamaño de la petición web mediante GET:

  • Microsoft Internet Explorer (Browser): 2,083 caracteres
  • Firefox 1.5.x : No se muestra en la caja de la URL por encima de los 65536 caracteres aunque permite más
  • Safari (Browser): Al menos permite 80000 caracteres
  • El Servidor Web de Apache limita a 8192 byte el tamaño del campo en una request
  • Y el servidor Microsoft Internet Information Server tiene una limitación de 16384 aunque es configurable

amCharts: Otra librería de Charts Javascript

amChartses una (otra) librería muy completa para hacer chartings.

Soporta un gran número de gráficos: Column, Bar, Line, Area, Step, Step without risers, Smoothed line, Candlestick, OHLC, Pie/Donut, Radar/Polar, XY/Scatter/Bubble, Bullet, Funnel/Pyramid, Gauges.

Podéis ver en sus numerosos ejemplos (http://www.amcharts.com/javascript-charts/) lo que permite y lo sencillo que es usarlo:

Por ejemplo (código):

amCharts es una librería independiente que no requiere terceras librerías. Es una librería de pago, aunque el precio es muy asequible como para que esto sea un problema:

¿Qué es Hawt.IO?

hawtio es una consola Web HTML5 modular para gestionar aplicaciones Java.

Hawtio es modular porque ofrece el concepto de plugins ofreciendo además un gran número de plugins ya construidos como:

· dashboard: ofrece dashboards por defecto para mostrar gráficos y métricas y otros widgets en una vista con tabs personalizable. También permite crear tus propios dashboards.

· camel añade soporte a Apache Camel

· health: añade soporte para Health MBeans para comprobar la salud del sistema

· jboss, jetty, tomcat añade soporte para ver, arrancar, parar y refrescar aplicaciones en JBoss, Tomcat y Jetty

· jmx, maven, osgi, karaf, …

Podéis echarle un ojo rápido siguiendo su Getting Started.

En este vídeo puede verse un ejemplo de uso de Hawtio para un proceso Camel.

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 407 seguidores

%d personas les gusta esto: