Que miedo!!!! No quiero hacer llamadas por skype…. y si alguien estuviera interviniendo la llamada???

Estaba preparando un script hace un rato, y cuando quedó listo en Mozilla Firefoz y lo quise probar en Microsoft Internet Explorer, me sucedió algo rarísimo, no jaló!!!!!!

Era una simple instrucción como la siguiente:

div2=new Element(’div’);

Después de un exhaustivo proceso de depuración, me dí cuenta que se corregía al poner

var div2=new Element(’div’);

Sólo hacía falta declarar la variable. Sé que es lo correcto, una variable debe inicializarse para definir el alcance, en este caso yo lo tenía dentro de un método de un objeto de Javascript , y pues se me pasó poner la definición var, cómo muchas otras cosillas que de repente a los programadores se nos pasan, pero por la flexibilidad de los lenguajes de programación o los navegadores de Internet nos dan. En fin, no indagaré más en el bug, simplemente declararé las variables donde tenga que hacerlo.

En Sentido Web publican esta entrada en la cual muestran el código con el que por medio de Javascript controlan el número de teclas pulsadas, con el fin de limitar el número de caracteres de entrada. Esto es útil sobre todo cuando la información que se está escribiendo se va directo a un campo de la base de datos, que esté limitado a un tamaño, y así hacer una buena validación de entrada a la base de datos. Bien, pues el ejemplo no impide que se continue escribiendo, pero si te indica con una barra en color rojo cuando te pasaste, y así permitirte reducir el texto deseado a fin e dejarlo en la longitud deseada. Luis Sacristán lo explica a detalle.

Lo que procedemos hacer acontinuación tomando como base el ejemplo de Luis Sacristán, y para todos aquellos que como yo ya no saben escribir Javascript sino MooTools, es Mootoorizar el ejemplo de la siguiente manera:

HTML____________________________________

JAVASCRIPT_______________________________

El ejemplo corriendo aqui.

Las barras de progreso han sido muy útiles desde que los sistemas de cómputo existen, o por lo menos desde que yo recuerdo que me inicié en este mundo del desarrollo de software mas o menos hace unos 15 años (ouch!!). Sirven básicamente para indicarle al usuario cuanto falta para que cargue lo que desea accesar. Bueno, pues ahora explicaré cómo hacer de manera sencilla una barra de progreso con el siempre fiel Mootools.

Comenzaremos escribiendo el html. Tan sólo se requiere de un contenedor para la barra, y un botón que activará la barra de progreso. Quedaría de la siguiente forma:

HTML |___________________
<div id="divProgressBar"> </div>
barra de progreso
<button id="btnBegin">Iniciar</button>

Sería todo el html necesario para nuestra barra de progreso. Ahora, lo divertido... el javascript, o el mootools, ya no recuerdo muy bien cómo se llama

JAVASCRIPT|______________

• Primero, definiriamos la clase

var progressBar = new Class({
initialize: function(){
}
});

• Luego initialize:

initialize: function(id,opt){
this.id = $(id); //El objeto que fungirá como barra de progreso
this.options=new $H({ //Hacemos un objeto 'options', con las características que la barra tendrá por default
width:100, //ancho de la barra de progreso
background: '#eee', //color de fondo de la barra de progreso
border:'1px solid #999', //borde de la barra de progreso
barBackground:'#0f0', //color de fondo de la barra de progreso
barInc:1 //incremento de avance en la barra
});

this.options.extend(opt); //extendemos las opciones, si es que le enviamos al crear la instancia de la clase
this.options=this.options.obj; //le pasamos el objeto generado a la variable options
this.setBeauty(); //método que utilizaremos para crear y estilizar la barra
this.go(0); //método encargado de la magia
}

• una maquilladita, setBeauty

setBeauty: function(){
this.divBar=new Element('div',{ // creamos la barra que mostrará el progreso
'styles':{ //la maquillamos
width:0,
top:0
background:this.options.barBackground,
position:'absolute',
}
}).setHTML(' ');
this.id.adopt(this.divBar); // La insertamos en el contenedor
this.id.setStyles({ // Maquillamos el contenedor
width: this.options.width,
background: this.options.background,
border: this.options.border,
position:'relative'
});
}

• La magia, go()

go: function(w){
this.divBar.setStyle('width',w); // ajustamos el ancho del div que muestra el progreso
if(w<this.options.width)
this.go.pass(w+this.options.barInc,this).delay(10); // si aún no se completa, seguimos llamando al método go. Aquí utilizo delay para fines demostrativos.
else
this.divBar.setHTML('Listo!!!'); // Acción a ejecutar tras completar la barra
}

• Instancear la clase, y crear el evento para llamarla

Site={
start:function(){
$('btnBegin').addEvent('click',function(){ // se añade evento click al botón que iniciará el progreso
new progressBar('divProgressBar',{width:200, barBackground:'#00f', barInc:5}); //se hace instancia a la clase, pasandole como argumentos el id del div contenedor, y las opciones
});
}
}
window.addEvent("domready", Site.start); // una vez listo el DOM, llamamos la función que prepara el evento del botón

• Listo, ahora veamos cómo funciona:

new progressBar('divProgressBar'); //Default
Iniciar

new progressBar('divProgressBar1',{width:400, barBackground:'#7394B8', barInc:10, border:'2px outset #23405F'});
Iniciar

new progressBar('divProgressBar2',{width:200, barBackground:'#ccc url(http://techniq.softr.net/assets/bgProgressBar.png) repeat-x', barInc:5}); // con una imagen de fondo
Iniciar

• Código completo:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SOFTr ProgressBar</title>
<script type="text/javascript" src="mootools11.js"></script>
<script type="text/javascript">
var progressBar = new Class({
initialize: function(id,opt){
this.id = $(id);
this.options=new $H({
width:100,
background: '#eee',
border:'1px solid #999',
barBackground:'#0f0',
barInc:1
});

this.options.extend(opt);
this.options=this.options.obj;
this.setBeauty();
this.go(0);
},
setBeauty: function(){
this.divBar=new Element('div',{
'styles':{
width:0,
background:this.options.barBackground,
position:'absolute',
top:0
}
}).setHTML(' ')
this.id.adopt(this.divBar);
this.id.setStyles({
width: this.options.width,
background: this.options.background,
border: this.options.border,
position:'relative'
});
},
go: function(w){
this.divBar.setStyle('width',w);
if(w<this.options.width)
this.go.pass(w+this.options.barInc,this).delay(10);
else
this.divBar.setHTML('Listo!!!');

}
});
Site={
start:function(){

$('btnBegin').addEvent('click',function(){
new progressBar('divProgressBar');
});
$('btnBegin1').addEvent('click',function(){
new progressBar('divProgressBar1',{width:400, barBackground:'#7394B8', barInc:10, border:'2px outset #23405F'});
});
$('btnBegin2').addEvent('click',function(){
new progressBar('divProgressBar2',{width:200, barBackground:'#ccc url(http://techniq.softr.net/assets/bgProgressBar.png) repeat-x', barInc:5});
});

}
}
window.addEvent("domready", Site.start);
</script>
</head>

<body>
<div id="divProgressBar"> </div>
barra de progreso
<button id="btnBegin">Iniciar</button>
</body>

• Descargar ejemplo

Pues inauguro este espacio con este primer post de bienvenida, por culpa de mi amigo Armando Sosa, ya que acaba de dejar un post donde hace mención de plOOtr, mi librería para graficar con Javascript, la cual es una adaptación a mootools de PlotKit. Más info en SOFTr Utils, que es el sitio donde estaré subiendo una serie de recursos para la programación nuestra de cada día. Bueno, la razón por la que me ví obligado a comenzar con este espacio denominado TechNiq, es porque el bueno Armando me enlazó, y pues por aquí no había nada. Porque? pues porque odio este template, y todos los que no sean hechos a la medida, exclusivamente para TechNiq.  En su momento, sé que tendré uno que me llene de orgullo y placer visual cada vez que lo vea, pero mientras tanto, comenzamos con este theme de wordpress llamado Fresh adaptado un poco por mí y a la brevedad lo cambiaré por el theme con el que ahora cuenta SOFTr Utils, el cual no tiene nombre, pero aunque siento que le falta algo, de momento me satisface.

Así que damos por inaugurado oficialmente este espacio donde se podran encontrar "Pequeñas dosis de la programación nuestra de cada día". Bienvenidos!!