HTML5 Mini Template
HTML5 Mini Template is a HTML5 structured file who includes only minimum necessary CSS files to get you started with HTML5 development …
Similar Posts
Muestra gráficas con el API de Google
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
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
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
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|
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
VÃa / WebAppers
Crear ventanas tipo Netvibes con Prototype
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.
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);VÃa / WebAppers