Javascript

Bluff: gráficas mediante Javascript

ByLuis September 17, 2008

Bluff es un script que nos permite realizar gráficas de forma sencilla en Javascript. Es necesario incluir la librería JS.Class para que simule canvas en IE.

Crear gráficas es muy sencillo y solo deberemos incluir un script parecido a este:

<canvas id="example"></canvas>
<script type="text/javascript">
var g = new Bluff.Line('example', 400);
g.theme_37signals();
g.title = 'My Graph';
g.data('Apples', [1, 2, 3, 4, 4, 3]);
g.data('Oranges', [4, 8, 7, 9, 8, 9]);
g.data('Watermelon', [2, 3, 1, 5, 6, 8]);
g.data('Peaches', [9, 9, 10, 8, 7, 9]);
g.labels = {0: '2003', 2: '2004', 4: '2005'};
g.draw();
</script>

Bluff

Javascript

inlineEdit: editor de contenidos con Mootools

ByLuis December 5, 2007

inlineEdit2 es un editor de contenidos inline realizado con Mootools.

Su uso es muy sencillo, tan solo es necesario aÃ±adir el siguiente cÃ³digo para poder utilizarlo:

$('element').inlineEdit();

Lo mÃ¡s asombroso es su tamaÃ±o, 20k sin comprimir, y para los que estÃ©n deseando mirar su funcionamiento, aquÃ va el cÃ³digo:

var inlineEdit = new Class({
getOptions: function(){
return {
onComplete: function(el,oldContent,newContent){
},
type: 'input'
};
},
initialize: function(element,options){
this.setOptions(this.getOptions(), options);
if(!element.innerHTML.toLowerCase().match('<'+this.options.type)){
this.editting = element;
this.oldContent = element.innerHTML;
var content = this.oldContent.trim().replace(new RegExp("<br>", "gi"), "\n");
this.inputBox = new Element(this.options.type).setProperty('value',content).setStyles('margin:0;background:transparent;width:99.5%;font-size:100%;border:0;');
if(!this.inputBox.value){this.inputBox.setHTML(content)}
this.setAllStyles(element,this.inputBox);
this.editting.setHTML('');
this.inputBox.injectInside(this.editting);
(function(){this.inputBox.focus()}.bind(this)).delay(300);
this.inputBox.addEvent('change',this.onSave.bind(this));
this.inputBox.addEvent('blur',this.onSave.bind(this));
}
},
onSave: function(){
this.inputBox.removeEvents();
this.newContent = this.inputBox.value.trim().replace(new RegExp("\n", "gi"), "<br>");
this.editting.setHTML(this.newContent);
this.fireEvent('onComplete', [this.editting,this.oldContent,this.newContent]);
},
setAllStyles: function(prevel,el){
if(prevel.getStyle('font'))el.setStyle('font', prevel.getStyle('font'));
if(prevel.getStyle('font-family'))el.setStyle('font-family', prevel.getStyle('font-family'));
if(prevel.getStyle('font-weight'))el.setStyle('font-weight', prevel.getStyle('font-weight'));
if(prevel.getStyle('line-height'))el.setStyle('line-height', prevel.getStyle('line-height'));
if(prevel.getStyle('letter-spacing'))el.setStyle('letter-spacing', prevel.getStyle('letter-spacing'));
if(prevel.getStyle('color'))el.setStyle('color', prevel.getStyle('color'));
}
});
Element.extend({
inlineEdit: function(options) {
return new inlineEdit(this, options);
}
});
inlineEdit.implement(new Events);
inlineEdit.implement(new Options);

Algo que nos puede ser Ãºtil en lugares como wikis o parecidos.

inlineEdit 2

Javascript

jsMSX: emulador de MSX con Javascript y Canvas

ByLuis June 25, 2009

MSX es un ordenador de hace la tira de años que cuando eramos pequeños nos parecía increíble y que ahora nos parece paleolítico. jsMSX es un emulador realizado en Javascript y Canvas que permite ejecutar juegos para ese sistema.

En sí la aplicación no tiene mucha utilidad, pero es interesante desde el punto de vista de lo que se está consiguiendo mediante Javascript y Canvas.
jsMSX
Via / @lardissone

Javascript

WireIt: librería Javascript para crear ‘cables’

ByLuis December 13, 2007

WireIt es una librerÃa basada en Yahoo Pipes que nos permite crear cables y conectar con ellos elementos. SÃ, algo difÃcil de entender, pero si decimos que es perfecto para crear diagramas o si sÃmplemente vemos la imagen, nos haremos una idea de cuÃ¡l es su funcionalidad.

EstÃ¡ montada sobre Yahoo! User Interface y nos permite mover objetos, conectarlos entre sÃ, desconectarlos y mucho mÃ¡s.
WireIt
Gracias ElÃas por el aviso

css | Javascript | Quicklinks

HTML5 Boilerplate

ByLuis August 11, 2010

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site. After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, perfo …

Post original

Javascript

typeface.js: hacer render de texto y fuentes con javascript

ByLuis March 12, 2009

typeface.js es una librería que nos permite crear texto usando fuentes mediante javascript (canvas, SVG o VML para IE). El uso es muy sencillo:

<div class="myclass typeface-js" style="font-family: Helvetiker">
Text here in Helvetiker font...
</div>

Además ofrece una utlidad en Perl que permite convertir truetypes a trucefaces.

typeface.js

Vía / WebAppers

Javascript

Plugin jQuery para validar contraseñas

ByLuis May 26, 2009

Aquellos que necesiten que en su aplicación web los usuarios introduzcan contraseñas seguras, podrán añadir este plugin jQuery que comprobará si las contraseñas tienen ciertas carácterísticas que las hacen seguras:

Uso de mayúsculas y minúsculas
Uso de números
Uso de caracteres especiales
Longitud de la contraseña
U opcionalmente similar a un username

El plugin mostrará un mensaje indicando la calidad de la contraseña y un color acorde a ésta.

jQuery plugin: Password Validation

Vía / Script & Style

Similar Posts