Mi nuevo colega Diego, de Serial Blogger, pone a disposición de todo el mundo esta estupenda herramienta a la que denomina: mini u2b (u= iu, 2= tu, b=b…… u2b=youtube). Y es precisamente eso, un youtube muy, pero muy chiquito. Personalmente, yo sí dejaré de visitar un poco youtube, cuándo lo único que me interesa es ver un video. Básicamente consiste en una API de youtube que nos permite realizar una búsqueda de videos alojados en el popular servicio adquirido recientemente por el gigante de la Internet Google. Una vez realizada la búsqueda, te devuelve los primeros 10 resultados encontrados, y al dar click, podemos ver el video.

Podría parecer una cosa bastante sencilla, pero a mí me parece algo fenomenal. Primero porque, cómo me lo dijo el mismo Diego, youtube tiene una interface muy fea poco atractiva, y él mismo se preguntaba: ¿Porqué no hacer algo más sencillo y menos feo más atractivo? Además, casi hace la misma función, de como particularmente yo utilizo youtube. Cuando yo quiero ver un video, abro youtube, introduzco la o las palabras clave, y sobre los resultados elijo el video que quiero ver. Es todo. Youtube nos ofrece una amplia gama de opciones en su portal como comentarios, sistema de rating, videos relacionados, y muchísimas cosas más, pero para los que como yo sólo les interesa buscar y ver un video, ésta es la mejor opción. Además, ya el mismo reproductor ya cuenta con opciones para copiar código html para incluirlo en tu blog o página, así como opciones de videos relacionadas con el video que se terminó de ver.

Mini u2b se puede utilizar vía web, y está libre para descargar y ser usado en cualquier sitio bajo licencia GPL, es ligero, tiene una interfaz atractiva, y tuve el privilegio de colaborar un poquitín con un toque Mootool-esco. Ampliamente recomendado.

Nota: Paris Hilton no patrocina de ninguna manera este espacio ni esta herramienta. Ignoramos porque aparece en los screenshots.

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!!