6 Librerías para gráficos y diagramas con PHP

En muchas ocasiones es inevitable utilizar gráficas para mostrar estadísticas o informes de datos en nuestros proyectos. Una imágen vale mas que mil palabras, de aquí la importancia que reviste el correcto uso de las gráficas, para visualizar de forma amena dichos datos.

A continuación os muestro una recopilación que realicé de varias bibliotecas para la implementación de gráficos y diagramas sobre web, de cada uno se explican sus características más importantes así como algunas ventajas o desventajas a mi consideración:

1. Open Flash Chart


Open Flash Chart

En mi opinión una de las mejores librerías para la realización de gráficos que existen en la actualidad en Internet, dentro de sus características fundamentales se destaca el dinamismo y la animación de sus gráficos, así como su diversidad en la implementación.

Open Flash Chart, esta basado principalmente en PHP para la lectura de los datos y en Flash para mostrar los mismos en forma de grafico. También encontraremos implementaciones en otros lenguajes, pero menos fiables según el autor.

A su favor: Gratis, Licencia GPL, diversidad de gráficos, diseño agradable.
En su contra: conocimientos medios o avanzados en PHP para su completa implementación.
Requerimientos: Flash player 9

Ejemplos | Descarga

2. FusionCharts


FusionCharts

FucionCharts es una librería libre y de código abierto para la creación de gráficos y diagramas en flash, dentro de sus mejores características están la interactividad y los excelentes efectos de animación en la muestra de los datos en forma de gráfico, además de que no sólo puede ser usado en webs, sino tambien en aplicaciones de escritorio y presentaciones.

A su favor: excelente diseño con buenos efectos de animación al mostrar los gráficos, se puede usar también en aplicacions de escritorio, puede usarse con PHP, ASP.NET, ColdFusion , Pyton.
En su contra: requerimientos medios o avanzados de programación
Requerimientos: Flash player 9.

Ejemplos | Descarga

3. XML/SWF Charts


XML/SWF Charts

Excelente librería para crear atractivos diagramas y gráficos que tiene al igual que el anterior un excelente diseño de presentación y diversidad de tipos. Esta librería se basa en XML para obtener los datos y en películas SWF para mostrar sus resultados en forma de gráficas.

A su favor: de licencia GPL, diversidad de gráficos, diseño agradable.
En su contra: si los datos son tomados de una BD es obligatorio la creación de un fichero XML intermedio entre la BD y la película de flash que muestra el gráfico.
Requerimientos: Flash player 9

Ejemplos | Descarga

4. Max’s Charts


Max’s Charts

Sencilla y simple librería para la creación de gráficos de tipo horizontal y vertical en PHP, se caracteriza por su facilidad en la implementación, aunque una de sus principales desventajas es que sólo puede usarse en gráficos verticales y horizontales, es decir, una buena recomendación para principiantes o para la creación de Webs con informes y gráficas sencillas. Los resultados se muestran utilizando CSS con un diseño relativamente agradable.

A su favor: de libre distribución, buen diseño, uso de CSS.
En su contra: poca diversidad en tipos de gráficos.
Requerimientos: cualquier navegador

Ejemplos | Descarga

5. pChart


pChart

pChart es una clase orientada al trabajo con framework, para la creación de gráficos y diagramas en PHP, los datos pueden ser tomados desde extructuras SQL, ficheros CVS o introducidos manualmente, esta librería está actualmente bajo desarrollo y pueden surgir nuevas versiones en un futuro. Los datos se muestran creando imágenes utilizando la librería GD de PHP.

A su favor: de libre distribución, puede tomar datos tanto de BD como de ficheros CVS
En su contra: no tiene un diseño tan refinado como las anteriores, y debe tener instalado la librería GD en su servidor de PHP.
Requerimientos: cualquier navegador.

Ejemplos | Descarga

6. QGoogleVisualizationAPI


QGoogleVisualizationAPI

Útil y excelente clase para generar gráficas con Google Visualization API. La misma provee una clase que puede generar código HTML el cual puede incluir gráficos generados por Google Visualization API en sus webs. También provee diferentes tipos de gráficos como son barras, pastel, lineales, etc.

A su favor: buena presentación de las gráficas, excelente para diagramas de pamas, diversos tipos de diagramas y graficos.
En su contra: conocimientos medios y avanzados de programación para la implementación.
Requerimientos: cualquier navegador

Ejemplos | Descarga

Mis recomendaciones finales para los programadores de conocimientos medios y avanzados es el uso de Open Flash Chart o Fucion Charts y los programadores principiantes pueden dar sus primeros pasos utilizando Max’s Charts, aunque como siempre sois vosotros mismos los que debéis hacer vuestros propios experimentos y aplicar el que mejor os sirva dada las condiciones del proyecto.

Google Browser Size: herramienta de google para mejorar usabilidad de tus sitios

Dentro de la diversidad de aspectos relacionados con la usabilidad a la que se afrentan los desarrolladores web en la actualidad, se encuentra uno que muchos pasan por alto, como tomar en cuenta el tamaño de los navegadores cuando se diseña una Web.

Bruno Borden especialista del Equipo de Desarrolladores de Google Earth, notó que muchas personas accedían a la página de descarga del sitio pero no realizaban la descarga, aunque como se puede ver este botón es muy difícil que sea pasado por alto:

Se preguntó si sería posible que muchas personas tuvieran el tamaño de las ventanas de su navegador demasiado pequeño como para ver este botón:

Página de Descarga de Google Earth

Para analizar esto, Bruno observó las dimensiones de las ventanas de los navegadores de los visitantes al sitio. Su primera idea fue no medir por completo la ventana del navegador si no solo el área del cliente (sin barras de herramientas, barra de estado, etc).

Su segunda idea fue controlar por varias semanas las dimensiones de las ventanas de los navegadores en una herramienta de visualización de contornos:

Controlando las dimensiones del Navegador

Teniendo en cuento esto, diseñaron una web que puede superponer un DIV que contenga un visualizador de contornos sobre un IFRAME el cual puede contener cualquier otra página web:

Google Browser Size

Esto resultó ser una buena forma de ver cuales controles eran visibles y cuales no, en los navegadores de tamaño normal, el único problema fue la superposición de los DIV que impide a los eventos del ratón llegar a la página dentro del IFRAME, por lo que no era posible interactuar con la página.

Para darle solución a esto dividieron el DIV en cuatro partes:

Solución a la interactividad

Cada una de las líneas anteriores (rojo, amarillo, azul, verde) representa un DIV por separado. A medida que se mueve el puntero del ratón, se redimensiona y reposiciona los DIVs para dejar un pequeño margen de espacio en blanco alrededor del puntero, y ajustar las compensaciones de fondo de cada DIV para hacer que el aspecto gráfico quede como una plantilla sin fisuras. (En un principio se hizo en un temporizador, pero encontraron una manera más simple: cuando el ratón toca alguno de los DIVs, cambiar el tamaño / reposición de todos los DIVs.) Resultado final: un diseñador puede hacer click y de esta manera interactuar con la página , y a la ves interactuar con el sitio normalmente en lugar de escribir varias veces en las URL.

Esta herramienta esta a disposición de todos en Google Labs. Para probarlo, basta con visitar browsersize.googlelabs.com e introducir la dirección de la pagina que deseas examinar.

Crea tu proveedor de busquedas para FF e IE 7+

Todos los usuarios de Firefox e Internet Explorer 7+ deben haber visto el cómodo buscador que trae incorporado. Para los que no lo han usado, es el selector que aparece en la esquina superior derecha, con un icono de Google por lo general. Cuando escribimos un texto en este selector, se lanza la búsqueda en un buscador específico. Esta característica se conoce como proveedores de búsqueda y es muy útil, no solo por la comodidad de no tener que abrir el sitio de búsqueda sino por su versatilidad: prácticamente se puede usar cualquier motor de búsquedas o en general, cualquier sitio que admita hacer búsquedas. La mayoría de los sitios que lo admiten dan la posibilidad de añadir un proveedor de búsqueda a nuestro navegador. Si entramos en un sitio que brinda un proveedor de búsquedas, veremos cómo el Firefox o el Internet Explorer nos resalta el selector, si lo desplegamos veremos que al final aparecerá una opción para añadir el proveedor de búsqueda. Esto se puede comprobar entrando a sitios como Wikipedia, Youtube y muchos otros. Pero… ¿qué hacemos si uno de nuestros sitios favoritos no tiene esta útil característica? Muy sencillo: la hacemos nosotros mismos.

Solo necesitamos un editor de texto y la plantilla que vemos a continuación:

1
2
3
4
5
6
7
8

<?xml version=”1.0″ encoding=”UTF-8″?>
<OpenSearchDescription xmlns=”http://a9.com/-/spec/opensearch/1.1/”xmlns:moz=”http://www.mozilla.org/2006/browser/search/”>
   <ShortName>NOMBRE</ShortName>
   <Description>DESCRIPCION</Description>
   <Image type=”image/vnd.microsoft.icon” width=”16″ height=”16″>ICONO</Image>
   <Url type=”text/html” method=”get” template=”PLANTILLA-DE-BUSQUEDA” />
   <InputEncoding>UTF-8</InputEncoding>
</OpenSearchDescription>

El texto que aparece en mayúsculas es el que tendremos que escribir nosotros, lo demás está predeterminado. Por ejemplo, si quisiéramos crear un proveedor de búsquedas para este propio sitio, http://www.bitacoradewebmaster.com/, solo tendríamos que sustituir NOMBRE por “Bitácora de Webmaster”, DESCRIPCION por “Búsqueda en la Bitácora de Webmaster” e ICONO por la URL del ícono predeterminado de la Bitácora: http://www.bitacoradewebmaster.com/favicon.ico. La parte más importante es la plantilla: se escribe la URL de búsqueda que utiliza el sitio. En el caso de la Bitácora, esta es:

http://www.bitacoradewebmaster.com/?s={searchTerms}

Observad que después de “?s=” debería ir el o los términos que se buscan (por ejemplo, para buscar AJAX, la URL sería: http://www.bitacoradewebmaster.com/?s=AJAX) pero hemos puesto “{searchTerms}” precisamente porque cuando se haga la búsqueda el navegador sustituirá esta cadena por el texto que el usuario desea buscar.

1
2
3
4
5
6
7
8

<?xml version=”1.0″ encoding=”UTF-8″?>
<OpenSearchDescription xmlns=”http://a9.com/-/spec/opensearch/1.1/”xmlns:moz=”http://www.mozilla.org/2006/browser/search/”>
   <ShortName>Bitácora de Webmaster</ShortName>
   <Description>Búsqueda en la Bitácora de Webmaster</Description>
   <Image type=”image/vnd.microsoft.icon” width=”16″ height=”16″>http://www.bitacoradewebmaster.com/favicon.ico</Image>
   <Url type=”text/html” method=”get” template=”http://www.bitacoradewebmaster.com/?s={searchTerms}” />
   <InputEncoding>UTF-8</InputEncoding>
</OpenSearchDescription>

Y bien, eso es todo con el proveedor. Lo siguiente es guardarlo como un archivo XML y luego registrarlo en el navegador. Para esto tenemos dos variantes: si lo hicimos para nuestro propio sitio solo tenemos que añadir este enlace en el encabezado de una de nuestras páginas (preferentemente, la principal):

1

<link title=”Bitácora de Webmaster” href=”Bitacora.xml” rel=”search” type=”application/opensearchdescription+xml” />

Tened cuidado de poner el en el atributo “title” el mismo texto que se puso en el proveedor como NOMBRE, sino el navegador permitirá añadir el mismo proveedor varias veces.

La próxima vez que alguien entre a esta página, podrá registrar el proveedor de búsqueda y usarlo en lo adelante para buscar en nuestro sitio. Por otro lado, si queremos usarlo para buscar en un sitio del que no tenemos el control (como mi caso con Bdw), solo tenemos que hacer un archivo HTML con el enlace dado anteriormente como su contenido. Al abrir esta página, el navegador permitirá registrarlo.

Espero que este tip os haya sido de utilidad, los proveedores de búsqueda son muy sencillos de implementar y muy cómodos de utilizar, como ya habréis visto. Si quieréis obtener muchos más ya “prefabricados”, puedéis ir a http://mycroft.mozdev.org/search-engines.html?language=es, donde encontraréis un extenso y variado repositorio, además de poder crearlos online, con un sencillo formulario.

Google envía información sobre sitios web hackeados

En un esfuerzo por promover la salud general de la Web, Google enviará a los webmasters fragmentos de códigos maliciosos con la esperanza de que los sitios web infestados puedan ser limpiados rápidamente.

Esta nueva información aparecerá como parte de las herramientas de google para webmaster, un paquete de herramientas que provee de datos acerca de un sitio web así como de sitios visitados.

Google Webmaster Tools Content Analysis

Google enviara e-mails a los administradores si el analizador automático detecta contenido malicioso en un sitio. Estas páginas estarán marcadas con un mensaje de advertencia en los resultados de la búsqueda.

Cada vez más, los delincuentes cibernéticos buscan hackear páginas web legítimas e insertar códigos maliciosos, ya que puede pasar mucho tiempo antes de que a estos sitios se le detecte estos códigos y se limpien. Desafortunadamente para los administradores, también puede haber una brecha significativa en el tiempo entre el momento en que el sitio es atacado y cuando se enteran que sitio Web ha sido colocado en una lista negra

A los webmaster que están registrados en Google, la compañía les enviará un correo electrónico notificándoles sobre contenido sospechoso junto con una lista de las páginas afectadas. También se podrá ver parte del código malicioso.

Cuando el sitio Web está limpio, los administradores pueden enviar un correo electrónico a Google, y su sitio será dado de baja de la lista negra.

Traducción instantánea con Google Toolbar

Google ha lanzado una nueva versión de su barra de herramientas en la que permite traducir cualquier página web con solo presionar un botón sin tener que abandonar la página en que te encuentras.

La opción es muy útil ya que cuando estés navegando en cualquier sitio en otro idioma la Barra de Google lo detectará automáticamente y te ofrecerá la opción de traducir la página con sólo hacer un clic.

Utilizando el mismo sistema automatizado de traducción de Google Traductor, es evidente que no tendrá la misma elegancia y precisión de una traducción humana pero será de mucha ayuda al conseguir traducir una página web completa en pocos segundos.

Además, Firefox 3.5 introduce la navegación privada con lo que Firefox no registra tu historial de búsqueda. La nueva versión de la Barra de Google para Firefox respeta esta opción con lo que no registra el historial de búsqueda en la barra de de búsqueda mientras estás en navegación privada.

Puede descargar esta última versión de la Barra de Google desde su web oficial

HTML Validator - Potente extensión de firefox para validación html

HTML Valitador es una extensión para Mozilla Firefox que permite validar el código HTML contra los estándares del W3C. Una vez que se instala, nos añade un icono en la parte inferior derecha del navegador, al hacer click sobre este, se muestra el código fuente de la página con una descripción de los errores de tipo HTML que sean encontrados. Esto nos permite hacer una validación local de las páginas que estemos desarrollando.

HTML Validator

La extensión está basada en los algoritmos Tydy y OpenSP. Ambos algoritmos fueron originalmente desarrollados por el Consorcio W3C que en la actualidad han sido perfeccionados.

Los errores encontrados se clasifican en tres grupos:

1. Errores HTML que no pueden ser solucionados.
2. Avisos de errores que pueden ser arreglados.
3. Aviso de errores de accesibilidad definidos en W3C WAI (este grupo es opcional)

Una de las principales ventajas de esta herramienta de validación es que podemos ver la línea exacta donde se localizan los errores y además una ayuda con ejemplos de cómo solucionarlos. La extensión se encuentra en estos momentos por la versión 0.8.5.8 y es compatible con sistemas Windows, Linux y MacOSX y para los navegadores Web Firefox desde la versión 1 hasta la 3.5.

Más Información: users.skynet.be
Descarga: Última versión