|

Muestra gráficas con el API de Google

ByLuis

Aunque a veces no es bueno depender de librerías externas, no todo el mundo puede permitirse usar recursos propios, por lo que esta librería de Google nos puede ser de mucha ayuda. Se trata de un API que nos permite mediante una llamada mostrar una imagen con una gráfica. Eso sí, hay que tener que el uso de esta librería está limitado a 50.000 queries por día y si se sobrepasa este límite se bloqueará temporalmente su uso y si se excede aún más el uso se bloqueará indefinidamente.

Por ejemplo esta llamada tendrá el siguiente resultado:

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World

Gráfica de Google

La API es muy completa y nos permite indicar datos en varios formatos, diferentes tipos de gráficas (líneas, barras, tarta…), colores, relleno, background y mucho más.

Ejemplos

http://chart.apis.google.com/chart?cht=lc&chd=s:9gounjqGJD&chco=008000&chls=2.0,4.0,1.0&chs=200x125&chxt=x&chxl=0:||c|d|a|o|x|v|V|a|&chm=a,990066,0,3.0,9.0|c,FF0000,0,1.0,20.0|d,80C65A,0,2.0,20.0|o,FF9900,0,4.0,20.0|s,3399CC,0,5.0,10.0|v,BBCCED,0,6.0,1.0|V,3399CC,0,7.0,1.0|x,FFCC33,0,8.0,20.0|h,000000,0,0.30,0.5

Gráfica de Google

http://chart.apis.google.com/chart?cht=lc&chd=s:pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkeggjp&chco=FF0000&chls=4.0,3.0,0.0&chxt=x,y&chxl=0:|1|2|3|4|5|1:|0|50|100&chs=200x125&chf=c,lg,45,ffffff,0,76A4FB,0.75|bg,s,EFEFEF

Gráfica de Google

http://chart.apis.google.com/chart?cht=bhs&chco=ff0000,00ff00,0000ff,&chs=200x125&chd=s:FOE,THE,Bar&chxt=x,y&chxl=1:|Dec|Nov|Oct|0:||20K||60K||100K|

Gráfica de Google

http://chart.apis.google.com/chart?cht=s&chd=s:984sttvuvkQIBLKNCAIi,DEJPgq0uov17zwopQODS,AFLPTXaflptx159gsDrn&chxt=x,y&chxl=0:|0|2|3|4|5|6|7|8|9|10|1:|0|25|50|75|100&chs=200x125

Gráfica de Google

Google Chart API

Vía / WebAppers

Similar Posts

Actualización de pagerank

ByLuis

Desde ayer Google está actualizando el pagerank de las webs en sus Data Centers. Por lo que parece además está implementando también el nuevo valor de pagerank en estos servidores y que puede tener importantes consecuencias en el de algunos sitios, especialmente agregadores de noticias.
No os asusteis si veis que vuestro pagerank se queda en 0 porque con casi toda seguridad es algo temporal mientras se produce el baile. Podeis consultar el valor del pagerank de vuestra web en este sitio.
Curiosamente durante la tarde de ayer sitios como Digg o Barrapunto tenían un pagerank de 0.
http://sentidoweb.com/img/2007/01/pagerank-thumb.png

Snipplr: trozos de código

ByLuis

snipplr.pngA todos nos pasa que nos gusta reutilizar (copy/paste) aquellas trozos de código (snippet) que hemos creado en algún proyecto anterior y que no nos apetece volver a pensar cómo hacerlo. En vez de tener que buscar entre todo el código que tenemos y pasarse todo el tiempo diciendo “recuerdo haber hecho esto en tal sitio”, podemos usar Snipplr para guardar nuestros propios snippets o para usar los que comparten otros usuarios, organizados por lenguaje de programación y por tags.
Snipplr
Vía / Criterion

Crear ventanas tipo Netvibes con Prototype

ByLuis

Crear ventanas flotantes en HTML es una de las cosas más difíciles de realizar en una página web. En alguna ocasión hemos hablado de cómo realizar ventanas con HTML y Javascript.

En este caso se trata de una extensión para Prototype que con unas simples líneas de código seremos capaces de crear nuestras ventanas de forma rápida.

ventanas_prototype.png

Para usarlo primero nos deberemos crear la estructura HTML:

<div id="page">
<div id="widget_col_0"></div>
<div id="widget_col_1"></div>
<div id="widget_col_2"></div>
</div>

Con sus CSS:

#page {
margin: 10px auto;
}
#widget_col_0 {
float:left;
width: 30%;
}
#widget_col_1 {
width: 50%;
float:left;
}
#widget_col_2 {
float:left;
width: 20%;
}

Instanciar la clase:

var  portal = new Xilinus.Portal("#page div")

Y por último añadir el contenido:

portal.add(new Xilinus.Widget(), 0)
// O con título y contenido
portal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("El texto que sea"), 1);

Prototype Portal Class

Vía / WebAppers

|

Hadoop: plataforma para trabajar con gran cantidad de datos

ByLuis

hadoop.pngHadoop es una plataforma que nos permite desarrollar aplicaciones que tengan que tratar con grandes cantidades de datos, hasta petabytes. Se trata de un subproyecto de Lucene, un proyecto de Apache que desarrolla software para realizar búsquedas.
Hadoop es muy útil cuando vamos a realizar proyectos que necesiten de escalabilidad, ya hemos dicho que puede almacenar y procesar petabytes de informacion. A su vez, es perfecto para un cluster de servidores, distribuyendo la información entre los nodos, siendo posible disponer de miles de nodos. Al disponer los datos de forma distribuida, la búsqueda se puede realizar muy rápidamente ya que Hadoop puede acceder a ella de forma paralela. Y aunque los datos estén distribuidos, no hay que preocuparse de fallos ya que dispone de un sistema de seguridad.
hadoop.gif
Hadoop implemente el MapReduce de Google, usando un sistema distribuido para dividir las aplicaciones en pequeñas tareas.
Hadoop se ha llegado a probar en un cluster de 2.000 máquinas y se está intentando alcanzar la cifra de 10.000 máquinas. Es necesario Java para su desarrollo y Linux, aunque se puede usar Windows para desarrollo, aunque el cluster no funciona del todo bien.
Hadoop

Diferencias entre un buen diseñador y un gran diseñador

ByLuis

Estando a la espera de que nos cuenten las diferencias entre un mal diseñador y un buen diseñador, que sería algo que necesitamos algunos, nos quedamos con un buen artículo que nos explica las diferencias entre un buen diseñador y un gran diseñador.

Se trata del típico post que todo el mundo referencia y que uno se da cuenta que se entera de las cosas el último, por eso voy a referenciar donde lo he visto originalmente, donde lo he leido en español y por su puesto el original.

Entre las cosas que más me han gustado destaco lo siguiente:

Mientras un buen diseñador dispone de ciertos elementos y los organiza de manera estética, un gran diseñador se preocupa además porque el mensaje que expresa su diseño llegue a destino.

…los artistas crean problemas, los diseñadores los solucionan. Pero un gran diseñador se adelanta a un problema potencial, tiene visión.

La conclusión a estas ideas nos lleva nuevamente a la razón de ser del trabajo de diseño, que es justamnente lo que diferencia además a un diseñador de un artista: las necesidades y problemas que atiende el diseño suelen ser -por lo general- ajenas al diseñador. El diseñador no es más que un instrumento comunicativo en esencia.

Nine skills that separate good and great designers

9 habilidades que separan buenos y grandes diseñadores

Vía / Criterion

| | | |

Cómo destacar en el menú de navegación el acceso en que nos encontramos

ByLuis

Imaginemos que tenemos un menú de navegación y queremos diferenciar la opción de Home, el About, el Contacto… ya que en esos momentos estamos en uno de ellos.

¿Cómo hacerlo? En Babblative nos enlazan algunos métodos para hacerlo:

Method 1 – WordPress: WordPress actually has this feature built-in. WP-List-Pages

Method 2 – PHP: Jem’s Trendy Active CSS Tabs or Matt’s Intelligent Menu’s. I’ve personally had middling success with PHP on a manually maintained site and little success with it on Textpattern.

Method 3 – Textpattern: You can either muck around with multiple templates, which is bloated and unnecessary, or you can use this method. If you choose to use the multiple templates then you’ll need to read how do I use a different page layout for each section?

Method 4 – Manually Maintained Sites: Use Hicksdesigns method to highlighting current page with CSS

Keep Reading: Keeping a ‘current state’ on navigation, Keeping Navigation Current With PHP, EasyNav, Setting the Current Menu State with CSS

Vía / Babblative