Hace un rato terminaba un sitio, en el que por cuestiones de logística requería convertir una cadena con nomenclatura “camelCased” a una cadena del tipo “hyphen-ated”. No tengo la menor idea que signifiquen esos términos. Básicamente la necesidad es pasar cadenas del tipo “yoLeoTechniqCadaDia” a cadenas del tipo “Yo leo techniq cada dia”. En MooTools es cosa sencilla, haciendo lo siguiente:

[js]“yoLeoTechniqCadaDia2000″.hyphenate(); //la salida es: “Yo-Leo-Techniq-Cada-Dia2000″[/js]

El problema es que yo lo quería hacer con php, y además no quería los guiones, ni las mayúsculas, excepto por la primera; y además que si hay una cadena que comience por número, haga lo mismo. Comencé a hacer una función que haga dicho proceso. Pero me dije: – Tiene que haber una manera sencilla, así que procedí a hacer lo propio. Buscar en San Google. Y efectivamente, encontré la manera exacta de hacer lo que necesitaba. De la siguiente forma:

[php]echo ucfirst(strtolower(ereg_replace(“([A-Z])|([0-9].+)”,” \\0″,”yoLeoTechniqCadaDia2000″)));
// Efectivamente, eso me devuelve lo buscado, “Yo leo techniq cada dia 2000″
[/php]

Explicando brevemente la línea, lo que hace es buscar un patrón a partir de una expresión regular, en este caso busca cualquier letra mayúscula de la A a la Z, ó una cadena que comience con un número, dentro de la cadena de texto que se le pasa como tercer parámetro a la función ereg_replace. Una vez que encuentra el patrón, lo sistutuye por lo mismo que se encontró, pero antecedido por un espacio. Luego, a esto que se obtuvo, se le aplica la función strtolower que se encarga de pasarnos toda la cadena de texto a minúsculas. Y por último, le aplicamos mayúscula sólo a la primer letra de la cadena resultante, con la función de php “ucfirst”.

Eso es todo, ese renglón me sacó de un gran apuro. La instrucción puede ser tremendamente útil, y muy variada, con tan sólo cambiar la expresión regular por otra. Ya depende de lo que se necesite hacer, y utilizando un poco de creatividad.

Nuevamente Luis Sacristán de Sentido Web al ataque. Ahora con este laboratorio donde nos muestra el código para mostrar la valoración de las contraseñas, para conocer la calidad de las mismas. No por haber escrito antes algo sobre Luis Sacristán quiere decir que soy una clase de fan o algo así. El motivo tan sólo es que escribe mucho código MooToorizable, como el caso de este indicador de calidad de contraseñas.

El código original estaba muy bueno, muy limpio… Aún así, creo que con el querido por todos (los que lo hemos usado) MooTools viene mucho mejor. La mejor parte creo que es cuando se maneja la parte del color.

antes de MooTools:

[js]
getColor: function(porc) {
var color = new Array();
var color1 = porc < 50? __PASSWORD__.colorKO:__PASSWORD__.color50;
var color2 = porc < 50? __PASSWORD__.color50:__PASSWORD__.colorOK;
color[0] = parseInt(color1[0]-((color1[0] -color2[0])*porc/100));
color[1] = parseInt(color1[1]-((color1[1] -color2[1])*porc/100));
color[2] = parseInt(color1[2]-((color1[2] -color2[2])*porc/100));

return color;
}
[/js]

y ya MooToorizado:

[js]
getColor: function(porc) {
return new Color(__PASSWORD__.colorKO).mix(__PASSWORD__.colorOK,porc);
},
[/js]

El truco del indicador, es una imagen que funge como máscara para sólo permitir ver parte del background del control Input.

El ejemplito completo aquí….

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____________________________________

[html]

[/html]

JAVASCRIPT_______________________________

[js]
var Site={
max:250,
w:300,
start:function(){
var args=[$('progreso'), textarea=$('txtArea')];
textarea.addEvent(‘keyup’,Site.progreso_tecla.pass(args)).fireEvent(“keyup”, args);
},
progreso_tecla:function(progreso,obj){
progreso.setStyles(
(obj.value.length < Site.max)?
{backgroundPosition:"-"+(Site.w-((Site.w*obj.value.length.toInt())/Site.max).toInt())+"px 0px", backgroundColor:'#FFF',backgroundImage:'url(textarea.png)',color:'#000'}:
{backgroundColor:'#C00',backgroundImage:'url()',color:'#fff'}
).setHTML("("+obj.value.length+" / "+Site.max+")");
}
}
window.addEvent('domready',Site.start);
[/js]

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