Archivo de Febrero de 2009

17/02/09 (Hace 564 días)

0 Comentarios

Movimiento Ondulatorio con JavaScript

Hace ya unas semanas mi compañero de fatigas y uno de mis grandes comentaristas del blog XD Alberto, me metió en la cabeza la fricada de representar el movimiento ondulatorio con JavaScript. En un principio pensé que estaría jodidillo el asunto pero como veréis a continuación es bastante sencillo.

Onda vaaaaaaaaaaaaaaaa!:

Lanzar la onda!

Para conseguir pintar nuestra onda simplemente nos servimos de la ecuación del movimiento ondulatorio:

y(x, t) = A * cos(wt - kx)

donde:

A =
Amplitud
w =
frecuencia angular
t =
tiempo
k =
Número de onda
x =
Posición sobre el eje x

A continuación os pongo el codiguillo JavaScript que utilizo para pintar la onda por si os sirve de ayuda

Código JS

var movimiento = "";
var n_posicion = 0;
var j = 0;
var longitud = 36;

/* CONFIGURACION DE LA ONDA */
var caracter = "*"; //caracter con el que se representa la onda
var xo = 0 // valor inicial de la posición de la onda sobre el eje x
var yo = 80; // valor inicial de la posición de la onda sobre el eje y
var v = 400; // velocidad de la onda
var A = 60; // Amplitud
var T = 18; // Periodo
var longitud_onda = 10; // Longitud de onda
/* FIN CONFIGURACION DE LA ONDA */


var w = ( 2 * 3.14 ) / T;
var k = ( 2 * 3.14 ) / longitud_onda;
$("li#pos0").css({ left: yo + "px" });

function movimiento_armonico(){
	$(document).ready(function(){
		movimiento = movimiento + "<li id='pos"+ n_posicion + "'>" + caracter + "</li>";
		$("#onda").html(movimiento);		
		
		for (i=0; i < n_posicion; i++)
		{
			x = xo + i
			t = i;
			y = yo + (A * Math.cos((k * x) - (w * t)))			
	
			$("li#pos" + i).css({ top: y + "px" });
			$("li#pos" + i).css({ left: x + "px" });
		}
		n_posicion++;
		j++;
		if(j == longitud + 1)
			clearInterval(onda);
		});
		$("#onda li:last").hide();	
}

onda = setInterval("movimiento_armonico()", v);

09/02/09 (Hace 572 días)

5 comentarios »

Validaciones con jQuery

Después de 120 días sin escribir :X, por fin me he dignado a escribir un post que espero que le pueda servir a alguien de ayuda, por lo menos a un eulalio que yo me se XD. Voy a escribir un post sobre como hacer validaciones en tiempo real, es decir, no esperaremos a que el usuario envíe el formulario sino que iremos validando cada uno de los campos según se vaya introduciendo la información. Para ver esto hare una demo apoyándome en la librería jQuery, que no solo nos da la posibilidad de realizar fáciles validaciones al momento sino que además nos permite jugar con una gran variedad de atractivos efectos.

Ejemplo de validaciones con jQuery

Como ya he dicho en la introducción queremos conseguir una validación de formulario en tiempo real, es decir cada vez que un campo del formulario pierda el foco, automáticamente comprobaremos que el campo modificado es correcto, además comprobaremos que todos los campos que preceden a este no se encuentran vacios y que la información es correcta. Con esto mejoraremos la experiencia de usuario ya que avisamos en el mismo momento de cada uno de los errores que está cometiendo al introducir los datos en los campos del formulario y estaremos evitando el tener que realizar varios envíos del form ya que se produjeron fallos en la validación de campos obligatorios.

Dentro de un formulario podemos fijar una serie de campos que sean de tipo obligatorio y sin los cuales el envío del formulario no es posible, pues bien en el ejemplo además de definir campos de tipo obligatorios y mostrar los errores producidos por los mismos, mantendremos informado al usuario con avisos de que la información introducida en un campo no obligatorio no es del todo correcta. En el ejemplo el usuario podrá enviar el formulario en caso de tener avisos pero no en el caso de que el formulario cuente con errores en campos de tipo obligatorio. En todo momento tendremos visible un listado de errores que mostrará al usuario el estado en el que se encuentra cada uno de los campos del formulario.

Este es un ejemplo de referencia y no aplicable a cualquier tipo de formulario ya que según vaya variando el código HTML del formulario habrá que realizar adaptaciones en el código JavaScript, de todas formas podréis ver que gracias a la sencillez de jQuery la adaptación de código según el formulario no es tan complicada. A continuación os muestro como quedaría el formulario con las validaciones:

Formulario de contacto

* Campos obligatorios

Datos personales

* Sexo

Otros datos

:: Listado de errores ::

  1.  
Descargar ejemplo: demo_validaciones.js (39,52kb)

Leer el resto de esta entrada »