Despues del rediseño azul de su página principal, hace ya algun tiempo, el equipo de jQuery creo una API muy bien lograda, con el proposito de saber que hace cada una de las funciones de la famosa librería de Javascript.

Hasta hace algun tiempo, esa api era muy engorrosa de descargar y consultar, pues cada metodo y propiedad era un html distinto y al descargar guardabas las mismas imagenes una y otra vez. Ahora, el api nuevo es compacto, bonito y lo mejor de todo… se puede descargar!

Solo necesitas tener AIR instalado y usar el metodo de instalación que aparece en la web oficial:
API de jQuery

Espero que esto le sea de ayuda a mas de uno para no recurrir a cheatsheets

Locksley es una banda de cuatro integrantes originalmente conformada en Madison, Wisconsin en 2003, pero que ahora tiene como base Brooklyn. Su estilo de musica es derivativo de de bandas tempranas de la invasión británica como The Kinks, The Beatles y The Hollies, pero difiere significativamente con el estilo instrumental moderno de Locksley. El nombre “Locksley” viene de la villa inglesa de donde se supone nació Robin Hood.

- Vilmente perpetrado y traducido de Wikipedia(en)

Como bien dice la reseña, lo primero que se te viene a la cabeza al escuchar a Locksley es a los grupos de mediados de los 60, del Mersey Beat y la llamada invasión británica: Arreglos de voz, el contratiempo de la bateria, el ritmo del bajo. Sin embargo, el toque Franzferdinesco, la distorsión y los platillos un tanto más marcados y oscuros le dan un nuevo aire a este estilo.

Un grupo recomendado para inaugurar la categoria Musica del blog

En youtube pueden escuchar algo de este grupo:
Locksley - Let Me Know

Y ver el video cool de uno de sus singles:

Locksley - All Over Again

*Nota: Si, que verguenza no poner el reproductor flash. Pero no tengo acceso a la carpeta de plugins por … problemas

El propósito de este tutorial es aprender a crear plugins para jQuery, con las facilidades que la libreria ya trae. Antes de empezar te recomiendo leer el tutorial de introduccion a jQuery, si no conoces los conceptos basicos del lenguaje, y el tutorial de programacion orientada a objetos en javascript, para que entiendas como ocurre todo a la perfeccion.

Objetos a extender

Para la creacion de plugins con jQuery, hay dos objetos básicos que se extenderan: El objeto jQuery, que se encarga de practicamente todo el procesamiento interno y el objeto jQuery.fn, que es el que maneja la interaccion con elementos.

Si quisieramos crear una función general, usariamos jQuery, pero si quisieramos hacer uso de la potencia de los selectores built-in, usariamos jQuery.fn.

Creando el espacio de trabajo

Lo primero que tenemos que hacer es preparar un area de trabajo: Primero decidimos de que se tratará nuestro plugin. Con proposito de hacerlo sencillo creemos un plugin que alerte el texto (contenido) de un elemento cualquiera de diferentes formas. Acto seguido, creamos un archivo con el siguiente formato de nombre: jquery.nombre_del_plugin.js . Eso ayuda a identificarlo como plugin de jQuery.

Despues, creemos un archivo html en el que linkeamos la librería jQuery y nuestro plugin (que por ahora esta vacio). Ahora, abramos nuestro plugin en nuestro editor favorito, y comencemos la diversion.

Creando el objeto principal, sus metodos y propiedades

Vamos a crear dos tipos de funciones, cada una con uno de los objetos a extender, solo por aprendizaje. De esta manera, escribamos en nuestro archivo lo siguiente:


jQuery.comprobarAlert = function( mensaje ){
alert(mensaje);
}

jQuery.fn.alerter = function(){
this.each( function(){
alert(this);
});
}


Analizemos esas funciones:
La primera está extendiendo el objeto jQuery, creando una función con el nombre de comprobarAlert, cuyo propósito es muy simple: Pasar un parametro de mensaje, que sera alertado. Para probar la función vamos a nuestro html y añadamos las siguientes lineas a un tag script:


$(document).ready( function(){
$.comprobarAlert("Hola!");
});


Eso tiene que alertarnos “Hola!”.

La segunda función es algo más completa. Cuando usamos jQuery.fn, el “this” hace referencia a un objeto jquery que tiene “dentro” todos los elementos que recopila el selector. Entonces el “each” hace un bucle ejecutando la función para cada elemento, en este caso, alertando el objeto encontrado.

Para una representacion no tan abstracta, usemos un ejemplo concreto. Si en nuestro documento html tenemos lo siguiente …


$(document).ready( function(){
$("#victima").alerter();
});


… lo que le estamos diciendole al plugin es: Busca todos los elementos que tengan como id victima, y recogelos en una “lista” jquery. Luego, por cada elemento de esta lista, haz la función indicada, que es alertar el objeto.

Extendiendo el plugin: Opciones

Ya tenemos la idea basica de como nombrar un plugin y ponerlo a funcionar. Ahora examinemos como podemos hacer que el plugin tenga opciones, para que el usuario defina su comportamiento como mejor le parezca.

Añadamos a nuestro plugin de alerta la posibilidad de enviar una cadena adicional al comienzo y al final de el mensaje, sin que estos parametros adicionales sean obligatorios. Hay dos opciones: La primera es usar jQuery.extend, una función built-in de jQuery, pensada para proveer variables con valores “default”, modificables por el usuario. La segunda es hacerlo sin ayuda de extend, que puede ser más entendible.

Primera opcion:


jQuery.comprobarAlert = function( mensaje, opciones_user ){

opciones_default = {
inicio_str : "Alerta: ",
final_str: " /fin "
}
opciones = jQuery.extend(opciones_default , opciones_user);
alert(opciones.inicio_str + mensaje + opciones.final_str);
}


Segunda opcion:


jQuery.comprobarAlert = function( mensaje, opciones_user ){
if( opciones_user == undefined ){
opciones = ({
inicio_str : "Alerta: ",
final_str: " /fin "
});
}else{
opciones = opciones_user;
}
alert(opciones.inicio_str + mensaje + opciones.final_str);
}


La primera opcion es un poco abstracta pero es más compacta. La explicacion es la siguiente: Para crear la variable opciones se llama jQuery.extend. Esta función asigna los valores del primer parametro a la variable si el segundo parametro esta vacio o es “undefined” (no esta definido). De tal manera, si el usuario no ingresa opciones se toman las predeterminadas, y si las ingresa, se sobreescriben.

La segunda opcion es mas o menos la explicacion de la primera: Se comprueba si el usuario mando opciones. Si no es asi, se toman las predeterminadas. Si el usuario mandó, se toman estas.

Es importante notar que las opciones quedan como propiedades del objeto “opciones”, es decir, que para acceder a “inicio_str” tenemos que escribir “opciones.inicio_str”. Para el resto del tutorial usaremos la primera forma, por la razón a continuacion.

Usabilidad:

Si queremos que el usuario tenga control total del plugin, debemos proveer la capacidad de cambiar tanto los defaults para un llamado, como para todo el documento. Veamos este ejemplo de llamados:


// Aqui el mensaje va con opciones normales

$.comprobarAlert("Tengo opciones default");

// Aqui podemos cambiar el default:
$.comprobarAlert.op_default.inicio_str = "Wii: ";

//Y ejecutar el mismo llamado, que ahora dara un resultado distinto:
$.comprobarAlert("Tengo opciones default");


Esto es particularmente util para ser aplicado en escenarios diversos de manera sencilla. Supon que tienes un plugin que cambie el fondo de un elemento. El autor del plugin definió que el color normal de fondo es amarillo, pero tu pagina web es de tonos ocres, asi que te interesa que el color sea verde. Si no puedes controlar los defaults desde tu web, cada vez que quieras usar el codigo, deberás cambiar la llamada:


$("a").colorizar("fondo", ({
color: "verde"
});
$("body").colorizar("borde", ({
color: "verde"
});


En vez de eso, podrias hacer lo siguiente (con el metodo que ya casi explicaré):


$.colorizar.opciones.color = "verde":
$("a").colorizar("fondo");
$("body").colorizar("borde");

//E incluso, puedes cambiar el color de uno solo con el override (reemplazo) que ya hemos visto:
$("p").colorizar("texto", {
color:"naranja"
});


La manera de lograr esta maravilla de la usabilidad (XD) es la siguiente (con nuestro ejemplo de alerter):


jQuery.comprobarAlert = function( mensaje, opciones_user ){

// Primero creamos nuestra variable de opciones
var opciones = jQuery.extend( jQuery.comprobarAlert.op_default , opciones_user);
alert(opciones.inicio_str + mensaje + opciones.final_str);

}

jQuery.comprobarAlert.op_default = {

inicio_str : "Alerta: ",
final_str: " /fin "

}


Como verás, hemos dividido en dos la función. Al separar “jQuery.comprobarAlert.op_default” hacemos que esté accesible desde cualquier parte. Asi que, como ya vimos, bastaría substituir el contenido de la variable para cambiar los defaults:


$.comprobarAlert.op_default = {

inicio_str : "He reemplazado al default: ",
final_str: ". Oh si."

}


… o incluso cambiarlos por separado:


$.comprobarAlert.op_default.inicio_str = "Solo reemplazo el primer default";


Extensibilidad

Si queremos que el usuario final tenga todas las comodidades para usar nuestro plugin, podemos añadirle la extensibilidad. Si, digamos, nuestro plugin usara una función interna que transformara el texto de alguna manera, podemos tambien proveer una función “default”, que el usuario pueda cambiar si necesita. Miremos el ejemplo:


jQuery.comprobarAlert = function( mensaje, opciones_user ){

var opciones = jQuery.extend( jQuery.comprobarAlert.op_default , opciones_user);

// Aqui se llama a la función, que definimos externamente
var mensaje = jQuery.comprobarAlert.transformar(mensaje);

alert(opciones.inicio_str + mensaje + opciones.final_str);

}

jQuery.comprobarAlert.op_default = {

inicio_str : "Alerta:",
final_str: " /fin "

}
// Esta es nuestra “función modificable”
jQuery.comprobarAlert.transformar = function(texto){

return String( texto ).toUpperCase();

};


Como verás, estamos dejando que el contenido de la función sea modificable, de modo que podamos poner en nuestro html un reemplazo:


jQuery.comprobarAlert.transformar = function(texto){

return String( texto ).toLowerCase();

};


Por supuesto, hay que escoger bien las funciones que serán “abiertas”: No se debe comprometer el funcionamiento del plugin. Para crear funciones que sean privadas, haremos lo que se muestra en el tutorial de poo en javascript:


//...

jQuery.comprobarAlert = function( mensaje, opciones_user ){

var opciones = jQuery.extend( jQuery.comprobarAlert.op_default , opciones_user);

function transformar(msj){
return String( msj ).toUpperCase();
}
// Aqui se llama a la función, que es privada
var mensaje = transformar(mensaje);

alert(opciones.inicio_str + mensaje + opciones.final_str);

}

//…


De ese modo, nuestra función es inaccesible externamente.

Extendiendo el objeto jQuery

Hasta ahora hemos visto como modificar todos los aspectos de nuestro objeto plugin, ahora vamos a modificar el objeto jQuery.

Cuando a la función jQuery.extend se le pasa solo un parametro, y este es un objeto, esta extiende lo que la llamó. Esto nos permite por ejemplo, añadir un nuevo evento:


/* Si existieran pantallas holograficas donde los objetos fueran 3d y se
pudiera dar el siguiente evento built-in en un browser... sighs. */

jQuery.fn.rozar = function(fun){
return this.each(
// XD, ie demorará mucho implementando esto:
this.onrub = this.apply( fun );
);
};

// Y lo anterior se puede usar como

$(".holocube3dsuperdelux").rozar( function(){
$(this).css("z-index”,”3000");
});


Uso del alias $

Hasta ahora en los codigos vistos, se ha hecho un gran uso del jQuery.talcosa, en vez de $.talcosa. Usar “jQuery.*” es beneficioso: Si el usuario tiene dos librerias js (algunas usan el $ tambien), jquery no entrará en conflicto. Sin embargo usar solo “jQuery.*” es muy embarazoso para algunos, asi que hay una forma de usarlo en todos lados sin perder la compatibilidad con otros frameworks: Encapsular funciones.

Si antes teniamos un codigo como:


jQuery.comprobarAlert = function( mensaje, opciones_user ){

var opciones = jQuery.extend( jQuery.comprobarAlert.op_default , opciones_user);
var mensaje = jQuery.comprobarAlert.transformar(mensaje);
alert(opciones.inicio_str + mensaje + opciones.final_str);

}


Eso se transforma a:


(function($) {
$.comprobarAlert = function( mensaje, opciones_user ){

var opciones = $.extend( $.comprobarAlert.op_default , opciones_user);
var mensaje = $.comprobarAlert.transformar(mensaje);
alert(opciones.inicio_str + mensaje + opciones.final_str);

}
})(jQuery);


… con el uso del alias $, que es mas elegante y compacto. En resumen:


(function($) {
// Aqui pones tu codigo, el cual puede hacer uso de $ .... y $ =
})(jQuery);


Juntandolo todo:

Ahora que hemos visto todo ( o bastante de ) lo relacionado con plugins en jQuery, finalizemos nuestro cool plugin de comprobarAlert. Voy a cambiarle el nombre por uno corto (alerter) y lo implementaré como una extension al jQuery.fn, para usar selectores con él:


( function($) {

$.fn.alerter = function(atributo, opciones_user){

// Ponemos la variable de opciones antes de la iteración (each) para ahorrar recursos

opc = $.extend( $.fn.alerter.opc_default, opciones_user );

// Devuelvo la lista de objetos jQuery
return this.each( function(){
var atrib = $(this).attr(atributo);
var mensaje = $.fn.alerter.formato(atrib);
alert( opc.inicial_str + mensaje + opc.final_str );
});

};

$.fn.alerter.opc_default = {
inicial_str : "Mensaje: "
final_str : "."
};

$.fn.alerter.formato = function(texto){
var texto = String(text);
var primera_letra = texto.substring(0,1);
var resto = texto.substring(1, texto)length);
return primera_letra+resto;
};

})(jQuery);


Con eso podemos desde nuestro html hacer el llamado:

<code class="codigo javascript">
$("#victima").alerter("id");

Lo que nos retornará “Mensaje: victima.”. Si sobreescribimos los defaults con la siguiente llamada:


$.fn.alerter.formato = function(texto){
return String(texto).toUpperCase();
};

$("#victima").alerter("id", {
inicial_str: "Alerta:",
final_str: " ."
});


Nos retorna “Alerta:VICTIMA .”.

Resumen / puntos a recordar:

• Nombrar el plugin jquery.nombre.js
• Los metodos se añaden al objeto jQuery.fn, y las funciones al objeto jQuery.
• Tener en cuenta los ámbitos de las variables en el plugin (explicados arriba)
• Todos los metodos y funciones DEBEN terminar con ; o el codigo no funcionara al comprimirse
• Los métodos deben devolver el objeto jQuery (a menso de que se especifique lo contrario)
• Se debe hacer ciclo con los elementos usando “this.each”, para producir codigo limpio y compatible
• Siempre usar “jQuery” en vez de $ a menos de que se coloque la solucion ya mostrada.

Tambien hay un patron de desarrollo, propuesto por Mike Alsup, que trata de los puntos más importantes que hemos visto:

• Usar un solo nombre en el objeto jQuery: No satures el objeto jQuery o jQuery.fn con muchos objetos distintos para un solo plugin. Usa solo un nombre (objeto), al cual le añades métodos y propiedades
• Aceptar un argumento de “opciones” para controlar el plugin
• Proveer una manera de modificar los valores default del plugin.
• Proveer acceso a modificar funciones del plugin cuando sea posible
• Mantener las funcione principales privadas.
• Soporte del plugin Metadata (no cubierto en este tutorial, escribiré en el futuro sobre este)

Referencia:

• Pagina de autoría de plugins en jquery.com: http://docs.jquery.com/Plugins/Authoring
• Patrón de desarollo para plugins de jQuery con Mike Alsup: http://www.learningjquery.com/2007/10/a-plugin-development-pattern

Me encontraba algo cansado del theme viejo del blog pues era poco usable y un lío al tratar algo de su css, así que me dispuse a buscar un estilo de Wordpress el cual colocar. Encontré un magnífico theme, que tiene por nombre Ilacrimo

Este elegante theme tiene una bonita combinación de colores, con una gama de azules muy agradables. Además, el diseño da impresión de organización, y los ligeros tonos marrones contrastan muy bien.

Para descargarlo puedes visitar los posts del autor:

• Tema original
• Tema “widget ready”

Cuando queremos variar nuestros mensajes de estado en nuestros clientes de mensajería, a veces es útil poder poner lo que estamos esuchando, ya sea para mostrar nuestros gustos musicales o por falta de algo mejor que escribir

En mi caso uso el reproductor foobar2000, pues es ligero, sencillo, y potente. No conocía la forma de colocar lo que se esta reproduciendo con este programa, pues al seleccionar la opcion en, por ejemplo, Messenger, no aparecía nada.

Así que investigando un poco, encontre “MSN Now Playing”, un componente de Foobar2000 que permite emular que se está reproduciendo en Winamp, para que los mensajeros lo detecten y lo muestren.

Instalación

1. Descargar el componente aquí: MSN Now Playing
2. Mover el archivo dll a Carpeta de foobar2000/components
3. Reiniciar el programa foobar2000
4. Configurar cada programa mensajero para mostrar la canción

Configurando el programa mensajero

MSN Messenger

Ir a Herramientas -> Opciones -> Personal.
Buscar el siguiente checkbox y marcarlo:

Google Talk

Hacer click a la flecha azul al lado del mensaje de estado y selecciona “Show current music track” .

y listo! Saludos

El tema (theme) por defecto de Firefox 3, llamado Tango, tiene el “Look and Feel” del tema GTK que el usuario esté usando en el sistema, con el fin de conservar consistencia visual en las aplicaciones, y de que el sistema sea mas usable.
Por ejemplo, la siguiente imagen muestra como puede variar la apariencia del mismo theme:

Esto puede llevar a que el estilo visual de nuestro Firefox 3 no sea el más agradable o como lo queremos. A pesar de que no me molesta el tema, decidí instalar uno de mis habituales temas de cuando uso Firefox en windows: Kempelton

Sin embargo, cuando segui el link al tema Kempleton en Mozilla.org, me encontre con la siguiente sorpresa:

“Kempelton is not avaliable for Linux”

De modo que no podía instalarlo, eh? Decidí probar “por la fuerza”, es decir, buscando el archivo .jar e instalandolo directamente en Firefox. Encontré el linx facilmente en el html:

Acto seguido, use el link de descarga de Kempelton para windows, bajé el .jar a mi escritorio y lo arrastré hasta la ventana de temas de Firefox.

Voilá! La pantalla de instalación de themes apareció. Era cuestion de solo instalar y reiniciar.

La razón para que no este disponible en Linux parece ser la desaparición de los menus de FF cuando les haces click o hover. Para mi este no es un problema tan grave, pues estoy acostumbrado a usar shortcuts. Por ultimo, un preview de Kempleton corriendo en Firefox 3 (Ubuntu):

(Click para agrandar)

Todos nos hemos preguntado como hacen algunos sujetos sospechosos para obtener hosting gratis en nuestra amada Cristalab. Qué oscuro secreto vincula al querido webmaster de la comunidad con sujetos de dudosa confiabilidad (entiendase Yaraher, XK, Auyama) y logra que estos no tengan que pedir a la100rra? ( Te queremos la100rra U_U ).

Nota para entender este post: Esta es una crónica real, donde relato mi quest por entender por que algunos tienen host en clab y otros pobres mortales (lease Lunatic), no…

Era tarde, y los resquicios de la ultima partida de Counter Strike repercutían en mi cabeza todavía. Gritaba “Fire in the hole!!!” mientras dibujaba con emoción un rectángulo en Fireworks. De repente, sucedió. Encontré un alma que dudaba como yo de las oscuras estratagemas del hosting en Clab. Oh, pero cuanta inocencia:

Con los pocos usuarios que tiene Cristalab, debe ser relativamente fácil dar hosting gratis a todos, NO? . Update: Si, es sarcasmo ¬¬

Nota: Ya en serio, sé que estos contenidos light no suplen los posts “buenos”, con info, tutos o links interesantes. Pero de cualquier manera, puedes burlarte de elfleat y visitar tres blogs que se hospedan gratuitamente. Asi que PTJ

Update: Yaraher descubrió que faltaba el link hacia XK, e intuyó que era por cobardía a su reacción. Bueno, ya construi un bunker y contraté a Teh Loro’s Tm protection. Asi que ahi está el susodicho link. *snif, mi integridad física

En los blogs o sitios dedicados a la programacion o el desarrollo web es habitual encontrar montones de código. Y este código no se ve bien a menos de que este resaltado de manera correcta. Colorear el codigo facilita la visualización y por tanto la coomprension.

Gracias a las ventajas que trae el sh (syntax highliting) he decidido implementar una solucion basada en javascript, mas concretamente en jQuery. Es un plugin llamado chili, de uso relativamente sencillo (aunque su implementacion me costó un poco, pero más por mi culpa que por la del plugin).

Pasate por la web oficial de chili, y echale un vistazo, es recomendadisimo. Luego quizá haré un buen review indicando uso, instalacion, etc.

Para dar una pequeña demostración, pondré un ejemplo de código en Flex.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" initialize="init();">
<mx:Script>
<![CDATA[
public var clabRss:XML
public function init():void{
var req:URLRequest = new URLRequest("http://www.cristalab.com/rss.php");
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(req);
xmlLoader.addEventListener(Event.COMPLETE,onLoadComplete)
}
public function onLoadComplete(event:Event):void{
clabRss = XML(event.target.data);
main.title=clabRss.channel.title
posts.labelField = "title";
posts.dataProvider=clabRss.channel.item;
posts.selectedIndex=0;
titleTxt.text=clabRss.channel.item[0].title
description.text=clabRss.channel.item[0].description;
}
public function filter(evt:Event):void{
if(evt.target.text==""){
posts.dataProvider=clabRss.channel.item;
}else{
posts.dataProvider=clabRss.channel.item.(title.indexOf(evt.target.text)!=-1)
}
}
]]>
</mx:Script>
<mx:Panel id="main" width="100%" height="100%" layout="absolute">
<mx:Text y="10" text="Cargando…" fontWeight="bold" fontSize="36" id="titleTxt" height="168" left="10" right="10"/>
<mx:TextArea right="20" left="10" id="description" wordWrap="true" editable="false" bottom="75" top="150"/>
<mx:Button x="10" label="Copy Link" bottom="25" toolTip="{posts.selectedItem.link}" click="{System.setClipboard(posts.selectedItem.link)}"/>
</mx:Panel>
<mx:VBox height="100%">
<mx:Label text="Filtrar:" fontWeight="bold"/>
<mx:TextInput id="searchBox" width="100%" change="filter(event)"/>
<mx:List height="100%" id="posts" width="300" change="{titleTxt.text=posts.selectedItem.title;description.text=posts.selectedItem.description;}"></mx:List>
</mx:VBox>
</mx:Application>


y


package
{
import flash.display.*;
import flash.events.*;
import flash.ui.Keyboard;
import flash.utils.Timer;

public class Mario extends MovieClip
{
private var enMovimiento:Boolean = false;
private var temporizador:Timer = new Timer(10,0);
private var teclaPulsada:uint;
private var contendorPuntos:Sprite = new Sprite();

private var contactoConCamino_Arriba:Boolean;
private var contactoConCamino_Abajo:Boolean;
private var contactoConCamino_Izquierda:Boolean;
private var contactoConCamino_Derecha:Boolean;

public function Mario()
{
lineas.visible = false;
puntos.visible = false;
stage.addEventListener(KeyboardEvent.KEY_DOWN,tecla);
temporizador.addEventListener(TimerEvent.TIMER,mover);
}
private function tecla(e:KeyboardEvent):void
{
if (enMovimiento == false) {
this.contactoConCamino_Arriba= false;
this.contactoConCamino_Abajo= false;
this.contactoConCamino_Izquierda= false;
this.contactoConCamino_Derecha= false;

teclaPulsada = e.keyCode;
palparCaminos();
temporizador.start();
enMovimiento = true;
}

}
private function mover(e:TimerEvent):void
{

var velocidad:uint = 2;

if (teclaPulsada == 39 && this.contactoConCamino_Derecha == true) // 39 es RIGHT
{
mario.x += velocidad;
}
if (teclaPulsada == 37 && this.contactoConCamino_Izquierda== true) // 37 es LEFT
{
mario.x -= velocidad;
}
if (teclaPulsada == 38 && this.contactoConCamino_Arriba == true) // 39 es UP
{
mario.y -= velocidad;
}
if (teclaPulsada == 40 && this.contactoConCamino_Abajo== true) // 40 es DOWN
{
mario.y += velocidad;
}

for (var i:uint = 0; i <= puntos.numChildren-1; i++) {
// En el mc llamado mario hay un MC llamado centro que sirve como detector..
// ... de coliciones
// Si centro coliciona con cualquier punto se detiene
if (mario.centro.hitTestObject(puntos.getChildAt(i)) == true) {
temporizador.stop();
enMovimiento = false;
}
}
}
// Funcion que le indica a Mario, que caminos puede cojer
// Mas tecnico. Dependiendo de que lineas tenga arriba, abajo, derecha o izquierda...
// ...se podra mover en una direccion
// En el MC llamado mario hay 4 MC que sirven como vigotes de un gato, para saber..
// que lineas tiene cerca

private function palparCaminos():void
{
for (var i:uint = 0; i <= lineas.numChildren-1; i++) {
if (mario.arriba.hitTestObject(lineas.getChildAt(i)) == true) {
this.contactoConCamino_Arriba= true;
}
if (mario.abajo.hitTestObject(lineas.getChildAt(i)) == true) {
this.contactoConCamino_Abajo= true;
}
if (mario.izquierda.hitTestObject(lineas.getChildAt(i)) == true) {
this.contactoConCamino_Izquierda= true;
}
if (mario.derecha.hitTestObject(lineas.getChildAt(i)) == true) {
this.contactoConCamino_Derecha= true;
}
}
}
}
}


No siendo más… hasta otra

Algunos ya hemos oido hablar de AIR: La solucion para crear programas de escritorio que nos plantea Adobe. Cuando conoci la propuesta, que basicamente es poder transformar documentos html, flash, flex y javascript a aplicaciones, me llené de emocion.

Cuando bajé el alpha (hace ya algunos meses) y compilé mis primeras aplicaciones, sentí que le faltaba mucho por abarcar: No habia manejo de entorno, ni de ventanas… es decir, con html y javascript podias crear una aplicacion web de escritorio, pero no usar el sistema del cliente para nada.

Tuve una gran sorpresa cuando descargue el SDK de AIR beta 2. Este incorpora metodos mucho mas extensos, accesibles incluso desde Javascript simple, para controlar todo lo mencionado anteriormente simplemente incluyendo un archivo .js. El método de escribir la aplicacion se simplificó con esta version, asi como se ganó estabilidad y velocidad en el compilador. Un ejemplo de lo que podemos conseguir, usando solo javascript y air, es:

var sourceFile = air.File.documentsDirectory;
sourceFile = sourceFile.resolvePath("Apollo Test/test1.txt");
var destination = air.File.documentsDirectory;
destination = destination.resolvePath("Apollo Test/test2.txt");

if (sourceFile.copyTo(destination, true)) {
air.trace(”Done.”)
}


Simple y genial. Además, hay una documentación excelente al respecto. En lo personal, le veo un gran futuro al AIR. De hecho, ya vemos muchas aplicaciones que estan hechas en este formato. ¿Long live adobe?

Puedes descargar el ultimo SDK en el siguiente enlace, asi como la documentacion:
Adobe AIR

PD: Como nota curiosa… has visto ya adobeair.com? XD

De que se trata?

Por medio de Base64, un sistema de codificación, podemos transformar cualquier tipo de archivo a caracteres simples ( texto plano ). Esto resulta muy útil cuando no queremos crear por ejemplo multiples archivos de imagen para adjuntarlos.

Si conocen Stylish, una extension para firefox, se preguntaran como hacen los autores de un tema para que en un archivo de css vayan incluidas las imagenes. Pues… base64 es la solucion. Además es ideal para hostings restrictivos, pues lo que estas arhcivando es simple texto.

Estructura

La estructura basica que tiene un archivo codificado en base64 es la siguiente. El ejemplo es de un archivo png:

data:image/png;base64,MuChasLetrasyNum3r0s

Entonces… examinemos despacio cada uno de los componentes.

data:image/png
Nos indica que tipo de archivo estamos enlazando. Podemos reemplazar el “image/png” por el MIME type del tipo de archivo que vamos a usar. Una lista de MIME types esta disponible para que no te pierdas en esa parte.

Lo siguiente, base64, simplemente indica que el texto siguiente está codificado en base64.

MuChasLetrasyNum3r0s : Compone el archivo codificado en texto plano. Eso es lo divertido, lo que te voy a enseñar a continuacion

Codificar en Base64

Php tiene dos funciones nativas que nos pueden ser muy utiles en este aspecto: base64_encode y base64_decode

Entonces, sabiendo eso, solo nos queda crear una funcion sencilla para leer un archivo y convertirlo:

<?php
function codificarImagen ($imagen) {
	echo "data:image/png;base64,".base64_encode(file_get_contents($imagen));
};
codificarImagen("imagen.png");
?>

Lo anterior nos devuelve la imagen png convertida a base64. Fácil, no?

Usemos lo aprendido

Bueno, genial, tranforme mi linda imagen a un monton de numeros y letras raros. ¿Y?

La buena noticia es que no tienes que hacer nada mas. Simplemente usa tu supertexto para todo:

 Una imagen normal 
<img title="Imagen en Base64" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...." />

 Una imagen de fondo en css:
<style type="text/css">
div.imagen{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA....);
}
</style>

 Un css completo: 
<link href="data:text/css;base64,iVBORw0KGgoAAAANSUhEUgA.." rel="stylesheet" type="text/css" />

 Un js completo: 
<script src="data:text/javascript;base64,iVBORw0KGgoAAAANSUhEUgA..." type="text/javascript"></script>

Y creo que ya entendieron el mensaje.

Problemas?

Desafortunadamente, y como sucede normalmente con lo cool, ie6 no soporta la codificacion en Base64. Sin embargo, los otros browsers (los decentes, como Firefox, Opera, Safari, etc) si, e incluso hay hacks para que funcione en el “bendito”. Uno de los mejores es el siguiente:
Fix para Base64 en ie6, por Dean Edwards

Recomendaciones

Las imagenes y archivos aparte no son malos, de modo que usa esta tecnica cuando se justifique, no vayas a empezar a codificar todas tus imagenes XD (so, es decir que no abuses). Lo otro es que logicamente a archivos mayores, el tamaño de la cadena de texto generada es mayor. Y por ultimo, no siempre se gana tamaño al codificar una imagen: A veces (bueh, la verdad, no se si siempre) se gana tamaño al ser convertido en texto. Esperen comparativas U_U

Links

• Si no tienes php en tu maquina, usa este Conversor a Base64.
• Si quieres que vean tus cool imagenes en ie6, usa el Fix para Base64 en ie6, por Dean Edwards o la version sexy de este: Sexy Base64 fix para ie6
• Si quieres aprender de Base64, pues Base64

Un saludo