Archivo etiqueta Web
Estadísticas en JavaScript
Por Scipion - JavaScript, Web - 5 Junio 2010
Ya que hace tiempo que no escribo nada, voy a mostra una extensión de jQuery que hace maravillas con gráficas para representar los datos indicados. La biblioteca es bastante útil para los que necesiten mostrar estadísticas en una web.
Aunque hace tiempo que existe, Highchars me ha sorprendido por la gran versatilidad que tiene. Gráficas de barras, de rectas, acumulados etc y varias posibilidades de diseño para cada tipo.

Usarla es igual de fácil que cualquier extensión de jQuery con la única diferencia que hay que indicar los datos a representar:
var chart1; // globally available
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart-container-1',
defaultSeriesType: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
En la variable series es donde se encuentran los datos indicados, ahí cada campo data es un vector con toda la información a representar. Pero de todas formas ellos explican bien como se debe de usar la biblioteca. Si tienes ya experiencia con jQuery no te resultará dificil para nada. La biblioteca completa la podeis descargar aquí de la página oficial.
Algunos gráficos vinenen preparados para introducir movimiento en la representación, los llaman dinamic chars. Vienen al pelo para trabajar con ajax y descargar datos de la web periodicamente sin necesidad de recargar la página.
Así que parece que se lo han montado bastante bien los chicos de HighChars.
Closures en JavaScript. Patrón Modulo
Por Scipion - Ingenieria del software, JavaScript - 19 Marzo 2010
Si hace un tiemplo comentaba que en JavaScript el patrón singleton es implícito, voy a revisar otro patrón que sirve para modularizar nuestro código. Las clausuras de JavaScript o Closure es algo que tiene que conocer cualquiera que se dedique en profundidad a este lenguaje.
Closures
Una closure es en definitiva un objeto que es definido e instanciado en el momento de su declaración. Así hay que tener en cuenta que esta metodología cumple el patron modulo, al declarar el módulo, y el singleton, ya que no permite reinstanciaciones del mismo objeto porque se declara y se ejecuta.
var clos = (function(){
var vprivada=999; // solo accesible desde esta closure
function fprivada(param){
vprivada=param;
}
var prop={};
prop.funcion=function(){
document.write("123456789");
}
prop.variable=119;
return prop;
}());
Como la función es ejecutada al mismo tiempo que es declarada es necesario devolver el objeto que se genera dentro de ella. Si no asignamos la función a nada la closure es anónima, pero no deja de ejecutarse por ello.
Aumentar la closure
Para ampliar las propiedades de nuestro objeto podemos escribir otra closure y asignársela, el problema es que si lo hacemos sin más perdemos las propiedades anteriores, por eso debemos pasarle por parámetro todo el código anterior, es decir, la misma closure.
var clos=(function(prop2){
prop2.funcion2=function(){
document.write("999888777");
}
prop2.variable2=219;
return prop2;
}(clos));
En caso de que no exista podemos crear una nueva closure al vuelo para evitar los errores de ejecución.
var clos=(function(prop){
...
return prop;
}( clos|| {} ));
De esta manera podemos distribuir nuestro código entre distintos archivos en caso de que fuese necesario. En una página donde tengamos implementadas pocas funcionalidades esto no es necesario, pero cuando va creciendo la cantidad de cosas que queremos hacer con JavaScript, modularizar el código de esta manera resulta bastante útil.
También es importante saber que podemos extender nuestra closure con otras para hacerla más rica. Así incorporando librerías de terceros (como jQuery) podemos personalizar el producto a nuestras necesidades. Esto podria considerarse un tipo de herencia implicita, para ver la herencia explicita aquí.
Ya he visto que en ciertos perfiles laborales se indica explícitamente el conocimiento de closures. Cuando estamos programando en paralelo con un compañero de trabajo y se dividen las funcionalidades a programar, debe de hacerse con aumentos de closures, que hace fácil unificar el código y también puede permitir acotar a la hora de buscar fallos.
Validar formularios en JavaScript
Por Scipion - Aplicacion web, JavaScript - 19 Febrero 2010
En toda aplicación web de hoy en día no pasa sin que el usuario meta la pata, aunque sea de forma premeditada, por eso los fromularios hay que comprobar que no nos la cuelan. Validar los datos hay algo que siempre hay que hacer en el lado del servidor, pero le podemos dar agilidad a la web si antes de mandar el formulario lo verificamos en el lado del cliente.

Esto para nada es un problema nuevo, y ya se ha intentado solucionar de muchas maneras en JavaScript. Algunas de las librerias(bibliotecas) son especificas para validación, otras son usos especificos de otras más genericas. En cualquier caso si quieres ponerte a escribir tus funciones JS que validen los formularios que sepas que estas Reinventando la Rueda, porque ya se ha hecho unas cuantas veces:
Ketchup basado en JQuery:
http://demos.usejquery.com/ketchup-plugin/
Vanadium:
JQuery:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/ (demo)
Validation con Prototype:
http://tetlaw.id.au/view/javascript/really-easy-field-validation (demo)
MooTools:
http://mootools.floor.ch/en/demos/formcheck/ (demo)
JsVal:
http://jsval.fantastic-bits.de/
Validanguage:
http://www.drlongghost.com/validanguage.php (demo)
Django (basado en Google App Engine):
http://code.google.com/appengine/articles/djangoforms.html
LiveValidation:
http://livevalidation.com/ (demo/ejemplos)
wForms:
http://www.formassembly.com/wForms/ (demo)
Yav (última versión del 2008):
JSValidate/JValidate:
http://www.jsvalidate.com/ , http://www.jvalidate.com/
fValidator:
http://zendold.lojcomm.com.br/fvalidator/
qForms (últmia versión del 2007):
http://www.pengoworks.com/index.cfm?action=get:qforms
Validatious:
Si te quieres montar tu propia libreria puedes empezar con los ejemplos propuestos en w3schools.
Libreria de validacion abandonada en 2004 chrysalis.
A parte de la validación el elemento visual es también algo que deja que desear bastante en los formularios. CustomFormElements da un aspecto agradable a los formularios web, incluso se pueden parecer a aplicaciones de escritorio. Está disponible para usar con Mootools y JQuery.