Archivo categoría Programacion

Estadísticas en JavaScript

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.

, , , , ,

No hay Comentarios

Función Random

En todos los lenguajes de programación modernos existe una manera de generar numeros aleatorios. Esta funcionalidad es necesaria en informática, y por lo tanto para todas las areas en las que influye.
La aleatoriedad se utiliza en teoría de juegos, criptografía, estadística, simulaciones y en general para cualquier fín en el que se desea un resultado no predecible. Esto no quiere decir no acotado.

En realidad los numeros aleatorios no son tal. Simplemente son series de numeros muy largas y complejas (o simplemente sin sentido) por lo que no se hace posible predecir el siguiente numero de la serie, por eso también se pueden encontrar llamados como pseudo-aleatorios.

Hace un tiempo ví que se comentaba el fallo en la funcion random en PHP en windows. El problema venía de la posible precibilidad de la función, por lo que la convertía en inútil. Aquí podeis encontrar el ejemplo que comento y como se acabó solucionando.

Con un sencillo programa en Java podemos comprobar que este lenguaje no sufre esa deficiencia.

Función Random en Java

Función Random en Java

Incluso Podemos hacerlo algo más artístico y generar colores aleatoriamente:

Si quereis probar a generar puntos aleatorios aquí está el código:

import java.awt.image.BufferedImage;
import java.awt.image.RenderedImage;
import java.io.File;
import java.util.Random;
import javax.imageio.ImageIO;

public class RandomImage {
	public static void main(String args[]){

		Random r=new Random();
		int num=r.nextInt();

		int x=350;
		int y=350;

		BufferedImage bi = new BufferedImage(x,y,BufferedImage.TYPE_INT_RGB);

		for(int i=0; i&ltx; i++){
			for(int j=0; j&lty; j++){
				num=Math.abs(r.nextInt()%2);
				if(num==1){
					bi.setRGB(i, j, 0xFFFFFF);
				}
				else{
					bi.setRGB(i, j, 0x000000);
				}
			}
		}

		try{
			ImageIO.write((RenderedImage)bi,"png", new File("randomJava.png"));
		}
		catch(Exception e1){}

	}
}

En general los métodos de generación de numeros pseudoaleatorios tanto en Java como en .Net se aunto inician con la hora del sistema. La hora en milisegundos se utiliza como semilla. Es una forma de escojer una posición inicial en la serie de numeros preexistiente. Es por esto que no hay que instanciar un objeto ‘Random’ cada vez que queramos un numero aleatorio, porque si se instancian dos objetos en el mismo milisegundo (cosa más posible de lo que parece a primera vista) las dos llamadas generarían el mismo numero.
Es por esto que exísten los metodos nextInt(), nextDouble() y en general nextCualquierCosa para generar el siguiente numero aleatorio en el formato deseado.

, ,

1 Comentario

Closures en JavaScript. Patrón Modulo

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.

, , , , , , ,

No hay Comentarios

Patrón Singleton implícito en JavaScript

Uno de los tantos patrones arquitectónicos en ingeniería del software es el llamado Singleton. No voy a explicar el patrón singleton por completo, simplemente decír que como idea principal se define una clase de la que solo existirá una instancia.

Por lo tanto en una clase qu cumpla con el singleton se define el método getInstancia() que solo se ocupa de devolver la única instancia existente. Así que el constructor no se ejecuta siempre, solamente invoca cuando no existe ninguna instancia. Cuando si la hay se devuelve la referencia a ella. Así de sencillo.

Y esto se implementa así en cualquier lenguaje orientado a objetos. De hecho incluso en JavaScript se puede implementar una clase con estas caracteristicas, el unico problema es que en JavaScript no hay métodos privados y siempre podría hacer un new miClase() y me devolveria una instancia nueva.

Pues bien, hay una caracteristica en JavaScript que me hace pensar que esto se puede hacer sin ningun problema, solo por las caracteristicas del propio lenguaje, ya que una funcion es una funcion y una variable también puede serlo etc. y jugando con esto podemos definir una clase que compla el partrón implicitamente y otra que no.

Definir el objeto

Objeto que no cumple el patrón singleton:

function objetoNoSingleton(){
   this.cadena = "cadena de texto";
   this.metodo = function(){
      alert(cadena);
   }
}

Objeto que cumple el patrón singleton:

var objetoSingleton = {
   cadena : "cadena de texto",
   metodo : function() {
      alert(cadena);
   }
}

Este objeto singleton es una variable y un objeto, pero es un objeto de clase irreproducible, de hecho al ejecutar new objetoSingleton() la instrucción falla.

Añadiendo funcionalidades

Existen diferencias de sintaxis debido al lenguaje. De hecho si queremos utilizar la propiedad prototype (no la libreria) para añadir métodos o variables a los objetos también existen diferencias.
Objeto que no cumple el patrón singleton:

objetoNoSingleton.prototype.valor2 = "valor dos";
objetoNoSingleton.prototype.metodo2 = function(){
   alert(valor2);
}

Para ser ejecutado necesitamos una instancia ya que estamos añadiendo funcionalidades a una clase no a un objeto en particular:

var instanciaNoSingleton = new objetoNoSingleton();
instanciaNoSingleton.metodo2();

Objeto que cumple el patrón singleton no hay que usar prototype. Crear un nuevo elemento en el objeto es simplemente nombrarlo y asignarle valor porque ya es una instancia.

objetoSingleton.valor2 = "valor dos";
objetoSingleton.metodo2 = function(){
   alert(valor2);
}

objetoSingleton.metodo2();

Con un objeto único se elimina el método getInstancia() típico del patrón Singleton, pero en si también desaparece la función new, por lo que en realidad el objeto a usar va a ser siempre la misma instancia.

, , ,

1 Comentario

Validar formularios en JavaScript

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:

http://vanadiumjs.com/

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):

http://yav.sourceforge.net/

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:

http://validatious.org/

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.

, , , ,

1 Comentario

CoffeeScript enriquece y optimizar JavaScript

Leo en GitHub que CoffeScript es un proyecto para JavaScrit que realiza la misma tarea que SASS en CSS (¿cueces o enriqueces?).

CoffeeScript ofrece una sintaxis concisa inspirado por Ruby y Python, listas por comprensión, los operadores existencial para eliminar los controles typeof molestos, y un modelo de herencia fiable para arrancar. CoffeeScript
Algunos proyectos ya están apareciendo, como en rack de café e incluso una reescritura de underscore.js, Se puede comarar la version en JS pura (0.5.8) con la reescrita en Coffee (0.5.7), aunque no son la misma versión, entre versiones no cambian muchas cosas, y se puede ver que se clarifica el código y se ahorran unas cuantas lineas.

En su web comentan que CoffeeScript tiene los mismos “genes” que JS pero distinto estilo (XD). Aun está creciendo pero tiene buena pinta el lenguaje.

Estos lenguajes orientados a programadores muy especificos parece que sean una locura, pero para aplicaciones web con mucho uso JS pueden ser útiles (y con programadores que conozcan ruby o pyton aun más). Se puede decir que son lenguajes en el final del long tail, muchos frameworks también empezaron siendo para unos pocos.

, ,

No hay Comentarios