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

¿Que demo…?

Como sabemos, una de las ventajas de wordpress es su capacidad de extenderlo, con plugins y temas creados por el usuario. Como tambien muchos (lamentablemente) sabemos, Cristalab tiene la enorme desventaja de succionar al usuario a un mundo de posts descabellados y muchas veces sin sentido.

No sería perfecto unir esas dos cosas?

Descripcion

El plugin que presento hoy, es sencillo y a la vez divertido: Te permite, desde tu blog de wordpress, y en la total comodidad de tu panel de administrador, añadir lindas etiquetas a los comentarios de la gente. Cuantas veces no has querido poner una etiqueta NIF o TROLL? Bueno, ahora puedes:

AntiOMG para WordPress

Tipos de etiquetas

Con este divertido plugin puedes asignar ocho tipos de categoría a tus comentarios:

• NIF: Una victima del notisfunnyismo
• TROLL: Ese “tierno” usuario que ronda por ahi p*te*ndo dando su opinion
• PTJ: Lo siento, Pues Te Jodes
• NLP: Cuando la gente pregunta lo que esta explicito en el post, ¿No Leíste el j*dido Post?
• WTF: Que demo…?
• Cool: Cuando el post es instructivo, señala de manera positiva algo
• LUV: Para las fangirls enloquecidas (gracias a Semper)
• NotSMS: Para los lindos teens que tienen la costumbre de escribr kmo si ls kbrarn pr eso

El plugin vienen con una serie de lindos iconitos para ilustrar las categorias

Instalacion / Uso

El modo de uso es extremadamente sencillo: Solo debes, al editar el comentario que quieras marcar, añadir como un comentario el nombre del tag que le pondras al comment (por ejemplo “< ! - - troll - - >”) solo en minusculas y sin espacios

EL plugin se instala normalmente, en el gestor de plug-ins de wp

Nota

Si revisan el fuente, verán que es muy facil añadir categorias nuevas. Experimenten. Con el pack viene el source de las imagenes, editable con fireworks, por si quieren otros colores, etc

Este plugin esta en fase de betatesting, asi que no me ataquen demasiado si no sirve. Por favor solo comenten detalladamente que pasó y como pasó.

Lo más importante de todo

Este plugin no es idea mia! La idea original, es sacada de la web http://www.anieto2k.com/. Yo solo modifique y amplie, como todos pueden hacer, para adaptarlo a las frikieces de clab. El credito de la programacion, repito, es para http://www.anieto2k.com/. Estuve cerca de 3 horas modificando el codigo, achicandolo y viendo si podia funcionar de otra manera, y no me funcionó.

Asi que que esperan! Vayan ya a http://www.anieto2k.com/ y denle las gracias por tan maravillosa idea y sus skillz. (Lo haría yo también pero en este momento el site esta offline)

Update:(gracias Jorgelig ) el link original es el siguiente: Antitroll Plugin

Mis sinceros agradecimientos a la100rra, por aguantar todo el proceso de creación y encima hacer la estampilla de NoSMS. Pondría la url si supiera que blog usa actualmente… XD

Y para terminar

Un screenshot de como se ve el plugin en acción, con las imagenes de las categorias:

Muchas felicidades a todos