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 
Introduccion
JavaScript es un lenguaje de programacion/scripting ampliamente subestimado e infravalorado. La principal razón de esto es por como surgió: Fue desarrollado primero para un solo navegador (Netscape Navigator) pero pronto, al ver su potencial, fue integrado a la mayorÃa de navegadores web por sus fabricantes.
Como suele suceder con los lenguajes de creación web, pronto surgió el caos: Extensiones, atributos o métodos no estandares fueron implementados por uno u otro navegador, causando que muchas veces se tuviera que crear un código dos veces, para que corriera en cualquier escenario. AsÃ, gracias a esta falta de estandarización, muchos tomaron al JavaScript como una mala práctica (No les recuerda al CSS?).
Otra de las razones que existen para las criticas hacia JavaScript, es que no esta basado en clases, si no en prototÃpos (más adelante la explicacion). Para muchos hardcoders que programan en Java o C++ es preferible la construcción de objetos con clases, por ventajas que ya conocemos, y un lenguaje que no las posea no es tan extensible o usable. Además, la extrema simplicidad del JS y su mal uso han originado horrores que todos hemos sufrido (popups, SnapShots, textos parpadeantes, propagandas dinamicas, etc). Y principalmente a eso le debemos el preconcepto hacia el JS.
Sin embargo, gracias a que el ECMAscript es basado en prototÃpos, el JavaScript tambien lo es lo que lo convierte en un lenguaje orientado a objetos (OOP, por Object Oriented Programming o POO, en español, por Programación Orientada a Objetos). Este tutorial pretende observar como se construyen los objetos en javascript, y como se pueden usar.
Clases vs prototÃpos
Como ya se mencionó, JS es basado en prototÃpos. Un prototÃpo es un objeto abstracto, capaz de contener otros objetos dentro, los cuales pueden ser distintos tipos de datos: variables (numeros, cadenas de texto, valores lógicos), vectores, funciones e inclusive otros grupos de objetos.
Entonces, en vez de programar una clase, para estar orientados a objetos en JS definimos un prototÃpo. Las variables dentro de este serán las propiedades, y las funciones serán los métodos:
[Objeto = PrototÃpo]{
[ Propiedad = Variable ]
[ Método = Funcion ]
}
Creación del objeto
Entonces, iniciemos la creación del objeto: Para este ejemplo usemos los tradicionales animales. La creación de un objeto se hace con una funcion, que será la constructora, y a la vez la que identifique el objeto.
Creemos una “clase” Gato para empezar… por que todos aman crear las clases “gato”. (Si no me crees, revisa los tutoriales de POO. Si no hay un Gato ahi, el tutorial no vale la pena XD).
Hay dos formas de definir la funcion constructora: Definir una funcion o definir una variable cuyo contenido sea una función. Puede parecer redundante, pero lo es =_=. Veamos ambas formas:
function Gato( parametros ){
// Codigo
};
o
var Gato= function( parametros ){
// Codigo
};
Nota: Para el resto del tuto vamos a usar la segunda forma 
Propiedades del objeto
Como vimos anteriormente, las propiedades del objeto se definen en forma de variables. Estas variables deben estar situadas dentro de la funcion constructora, marcadas con “this”, para poder ser accesadas como parte del objeto. Las variables reciben parametros que se envian al crear una nueva instancia del objeto (para nuestros propositos, al crear un nuevo gato).
Entonces veamos el ejemplo con nuestro objeto Gato. Un gato tiene como propiedades básicas… digamos que su nombre, su color, y su edad. Entonces estas propiedades serán las que reciba la funcion constructora para ser asignadas, Veamos como:
var Gato= function(nombre, color, edad){
this.nombre= nombre;
this.color= color;
this.edad= edad;
}
Con lo anterior, definimos el Gato, y cómo es ese gato. Sin embargo, algunos de los que son conocedores de la OOP ya deben estar pensando… ¿Y el strict data typing?. El script data typing es lo que regula el tipo de datos que entran a un objeto, y asi mismo el cómo se comportan. Por lo general, los lenguajes basados en clases son muy estrctos con respecto a los tipos de datos que se usan.
Por fortuna, en JS podemos emular el SDT, asignando los tipos de variables de entrada y (si eres un maniaco) chequeando que los valores sean correctos:
var Gato= function(nombre, color, edad){
this.nombre= new String(nombre);
this.color= new String(color);
this.edad= new Number(edad);
//Por ejemplo
if( isNaN ( this.edad ) ){
alert("Error en el data-typing, edad no es un numero");
}
}
Pues perfecto. Hemos creado la definición de nuestro objeto. Sin embargo nos falta un pequeño detalle. ¡Usar el objeto! Asi que vamos a crear un gato nuevo, y a asignarle las propiedades que ya vimos arriba:
var Michi= new Gato("Michifu", "azul", 2);
Con esto hemos creado una instancia de nuestro objeto, un simpatico “Gato” que se llama Michifu, tiene dos años y es … azul. Azul? Lo importante es que el código funcione, no?
Si queremos comprobar alguna de las propiedades de nuestro objeto lo harÃamos asÃ: Variable_que_define_el_objeto (punto) propiedad_deseada. Asi que, por ejemplo, veamos el color del gato Michifu:
alert("El gato es de color "+Michi.color);
Lo que nos da el resultado: “El gato es de color azul”;
Métodos
Ahora, veamos los métodos del objeto. Como mencioné arriba, un metodo es una funcion dentro del objeto. Hay varios metodos para crear un método nuevo: Extendiendo el prototÃpo, creando una variable tipo funcion, o vinculando una funcion externa al objeto. Veamos todos los casos, y de paso creemos un par de “acciones” para nuestro gato. En los comportamientos basicos del gato, encontramos comer y descansar, asi que:
Método 1: Vinculación externa
Con este metodo declaramos que una de las propiedades, llamará a una funcion externa:
[...]
this.comer= comerExterna;
[...]
function comerExterna(){
alert(”El gato “+this.nombre+” se comió un ratón”)
}
[...]
Michi.comer();
[ Salida = "El gato Michifu se comió un ratón" ]
Método 2: Extension del prototipo
Como los objetos estan compuestos por prototipos en JavaScript, nosotros podemos aumentarle metodos al prototipo del objeto directamente, de la siguiente manera:
[ No tocamos la funcion constructora ]
Gato.prototype.comer= function(){
alert(”El gato “+this.nombre+” se comió un ratón”)
}
[...]
Michi.comer();
[ Salida = "El gato Michifu se comió un ratón" ]
Método 3: Definicion en la funcion constructora
Con este método, asignamos una propiedad como funcion dentro de la constructora:
[...]
this.comer= function(){
alert(”El gato “+this.nombre+” se comió un ratón”);
};
[...]
Michi.comer();
[ Salida = "El gato Michifu se comió un ratón" ]
Nótese que en los tres métodos, es posible pasar parametros a la funcion de la manera normal en que cualquier funcion trabaja. Además, en cualquiera de los metodos, this se refiere al objeto (en este caso Gato)
Herencia
Uno de las caracteristicas más interesante de la OOP, es la herencia de métodos / propiedades. En JavaScript lo podemos lograr mediante los prototÃpos. Entonces, ya tenemos un Gato, verdad? Ahora, creemos una raza de gatos, la raza Siamés. Entonces creemos dos constructoras apartes para cada una, y hagamos que siamés herede de gato:
var Gato= function(){
this.ojos= 2;
this.piernas= 4;
};
var Siames= function(){
this.color= "blanco";
this.color_ojos= "azul";
}
//Como vemos, ambos tienen propiedades distintas.
//Ahora, heredemos:
Siames.prototype= new Gato();
//Eso hace que se copie el prototipo de Gato y se añada al de Siames.
//Probemos a ver si es cierto
var Catboy= new Siames;
alert(Catboy.ojos);
//Retorna 2! ^_^
alert(Catboy.color);
//Retorna "blanco", asi que conserva sus propiedades
Métodos y propiedades privadas
En lo que hemos visto hasta ahora, los metodos y funciones eran totalmente publicos: Modificables y legibles desde cualquier parte. Echemos un vistazo a como “privatizar” variables:
var Gato= function(nombre){
this.nombre= nombre;
//Creamos una variable privada sin asignarle "this" a esta
var frecuencia= "moderada";
// Creamos un metodo privado en muchos aspectos (XD) definiendo una funcion normal
function irAlBano(frecuencia){
alert("El gato va al baño con frecuencia "+frecuencia);
};
irAlBano(frecuencia);
}
var Michin= new Gato("Michifu");
El código anterior crea la variable privada “frecuencia”, y la funcion privada “irAlBano”. Para comprobar que la variable sea privada, ejecutemos alert(Michin.frecuencia), lo que devuelve undefined
Sin embargo, aun podemos usar esas variables o funciones tanto en la funcion constructora, como por funciones “getter” o “setter”… las cuales no tienen un atributo “get” o “set” definido, simplemente son funciones que nos permiten leer las propiedades:
var Gato= function(nombre){
this.nombre= nombre;
//Creamos una variable privada sin asignarle "this" a esta
var frecuencia= "moderada";
// Creamos un metodo privado en muchos aspectos (XD) definiendo una funcion normal
function irAlBano(frecuencia){
alert("El gato va al baño con frecuencia "+frecuencia);
};
this.leerFrec= function(){
irAlBano(frecuencia);
};
}
var Michin= new Gato("Michifu");
Michin.leerFrec();
//Nos retorna "El gato va al baño con frecuencia moderada" 
Extension de objetos nativos mediante el prototÃpo
Como todos los objetos de JS tienen prototipo, nos podemos divertir añadiendo utilidades a nuestros objetos de siempre. Añadamole una funcion a Array, por ejemplo:
Array.prototype.coincidencias= function(palabra){
coincidencias= 0;
for(i=0; i< this.length; i++){
if( this[i] == palabra ){
coincidencias++;
}
}
alert(”Se encontraron “+coincidencias+” coincidencia(s) de la palabra”);
};
// Podemos usar el array siguiente:
clabbers= Array(”Freddie”,”Mx”,”Neo_JP”,”Zarzamora”,”Ramm”,”Fael”);
// O este
clabbers= Array(”Freddie”,”Mx”,”Neo_JP”,”Zarzamora”,”Mx”,”Mx”);
//Y luego
clabbers.coincidencias(”Mx”);
//Entonces la funcion nos notificará cuantas veces esta una palabra en un array. Cool, no?
Conclusiones
Como vimos, entender la composición del prototipo de un objeto en JS puede ser terriblemente útil. Y entender como trabajar con clases en este lenguaje nos puede hacer más facil la vida: Reutilizar código, ganar velocidad en desarrollo, o dividir el trabajo entre varias personas se vuelve muy sencillo (como ocurre con la POO en general).
Adicionalmente a lo visto, si se quiere mayor similitud la POO clásica, se puede mandar un valor de retorno a cada funcion (como Void usamos True o False) y comprobar si los tipos de datos son correctos con condicionales.
Ahora, una implementacion de POO en JS combinada con jQuery u otra librerÃa similar, puede resultar muy potente cuando de DOM se trata. A desarrollar
Navegando en mi habitual falta de ocupación por la red, se me ocurrió buscar algún webcomic interesante. Y fue ahi donde
encontré Geek in Love
Geek in love es una interesante y divertido webcomic, creado por Ramón Redondo Pérez. Es un webcómic en español, y su principal tema es el geekismo, como se menciona en el titulo. Abarca situaciones donde aparecen geeks, otakus, SEOs, Microsoft fanboys y más.
Tiene un estilo de dibujo muy simple, pero muy atractivo, con colores brillantes y únicamente rellenos (fills). Su protagonista es nada menos que un “tÃpico geek”, que vive con su madre y compra cuanto widget encuentra. Tiene, además, una pésima vida sentimental (algo como var love:Number = new Number(0) )
Vale destacar la frecuencia de actualización del cómic, que es muy corta: Hay uno cada 2 o 3 dias, lo que lo hace muy interesante de seguir (Update: Ramón Redondo me ha comentado que la actualización se realiza los dias laborales y no los de descanso). Además, estando orientado hacia geeks por geeks, trata tematicas con las que estamos habituados: El dominio del mundo por parte de Google, la ignorancia de la sociedad acerca del frikismo y similares…
En conclusión es un must see para todos los que aprecian los webcomics. Felicitaciones, geek in love.
Update
Como wordpress quita los iframes, no puedo poner el código de ultimo cómic de la web, pero aqui les pongo el primero de sus cómics:
Nos muestra la triste relación entre un geek y las chicas, no es asi?
De Los Geeks Ligan?
Saludos a todos! ^^
Powered by ScribeFire.
Quedaron atrás las épocas de chantajear n00bs en los foros con cuentas de gmail, de burlarte de tus compañeros de trabajo y de vender tus invitaciones en el mercado negro.
Pues si, tan terrible (o c00l) como pueda sonar, ya es posible crear una cuenta en Gmail, de forma fácil y rápida. No lo crees aún?
Que qué es Gmail? Si no lo sabes, el primer párrafo de este post debe ser ignorado y olvidado. Ya mismo.
Gmail es el servicio de correo de Google. Su interfaz es buena y relativamente rápida y te dá mucho espacio (2600 Mb y sigue creciendo) que hasta puedes usar como espacio en internet para archivos.
Ya no hay excusa para seguir usando jotmeil, ni para bombardear blogs con peticiones de invitaciones. God bless google.
Usas Internet Explorer?
Hoy esa pregunta se ha vuelto muy de moda. Con la salida de navegadores de código abierto, y la mejora de otros ya existentes, el navegador de Microsoft, Internet Explorer, se ha visto en graves problemas.
Muchas de las personas que usan IE, lo usan por que no han probado otros o sienten una cierta “lealtad” hacia él, ya que lo usan desde Win98. Por eso, me he propuesto escribir este articulo. Me parece que muchas personas pueden beneficiarse, y otras, llegar a odiar ese navegador (si, ese es mi verdadero fin U_U)
Por que IE es un navegador malo?
Uf…. esa pregunta tiene gran variedad de respuestas, que intentaré resumir en lo siguiente:
Si, seguro
La principal razón que hace a este navegador pésimo son sus fallas de seguridad. Por medio de él puedes ser afectado por montones de virus, spyware, adware y otras amenazas. Esto ocurre por que IE permite un acceso casi total al equipo, por medio de la tecnologia ActiveX, de Microsoft. Es extremadamente vulnerable cuando se trata de seguridad, puede ser bombardeado con popups, y tiene leaks de memoria, es decir que si corres varias paginas o RIAs en él se volverá desesperadamente lento.
Esta pagina se ve mejor en IE?
Algunas webs afirman que son visualizadas mejor en IE. Esto es gracias a que Internet Explorer siempre ha tratado de forma “peculiar” los estándares web. Estos estándares, son las normas que siguen las páginas para ser compatibles al máximo.
Con IE, los desarrolladores y diseñadores web siempre ven su trabajo afectado: Como IE no acata las reglas, siempre hay un gran trabajo, adaptando la página para “el maligno”. Esto no le importa a Microsoft, y no se preocupa por implementar las nuevas tecnologias.
Como ejemplo pongamos el CSS. En resumen, CSS es un lenguaje que permite dar estilos a tu pagina web con muchas mas caracterÃsticas que el HTML normal. Este lenguaje actualmente esta en su version 2, aunque ya hay avances de la versión 3. Este lenguaje es muy común y útil, y no obstante IE no ha implementado siquiera la versión 1 de una manera correcta.
Es bonito pero… tiene algo nuevo?
Internet Explorer (y Microsoft mismo) últimamente se ha dedicado a copiar las caracterÃsticas de otros navegadores (o OS en vez de inventar nuevas. Ejemplo de esto son la navegación por pestañas, la búsqueda integrada y las extensiones.
Uf, no puedo actualizar!
Microsoft, como debes saber, emite y desarrolla software privativo. Esto quiere decir que no hay modo de editarlo, adaptarlo o mejorarlo y además se debe pagar por él. Has intentado instalar el nuevo IE7? Debes tener Windows original, y además es muy grande, lento y no es compatible con Windows 98 o 2000. Además, para “sorpresa” de todos, trae sus propios bugs e irrespeta a los estándares. Keep the good work, M$
Oh, dios mio. IE apesta! Que puedo hacer?
Las buenas noticias son que puedes cambiar, y navegar feliz. Las alternativas que te recomiendo son (con respectivas caracterÃsticas):
Mozilla Firefox:
Es un navegador muy seguro y rápido, con caracterÃsticas novedosas. Es de código libre y es gratuito, lo que significa que siempre lo mejoraran. Tiene búsqueda integrada, bloqueo de pop-ups y más. Su caracterÃstica más impresionante es que puede mejorarse con las extensiones: Con ellas, puedes añadir desde un editor de blog hasta un reproductor de música a tu explorador. 100% recomendado.
Opera:
Hasta hace algunos años, Opera era de pago. Sin embargo la nueva versión es gratuita y es bastante buena. Posee un lector de RSS integrado, un panel de descargas de torrents y su interfaz es muy bonita. Lo único es que no es open-source, pero muy recomendado igual
Navegadores basados en Gecko
Gecko es el “motor” que usan navegadores como Mozilla Firefox. Es libre y muy potente. Algunos de los navegadores que lo usan son:
- Netscape Browser
- K-meleon
- Mozilla Suite (no es el mismo Firefox, es otro navegador que trae integradas un editor de páginas y más)
Safari y Konqueror
Excelentes navegadores para Mac y Linux respectivamente.
SeaMonkey / Flock
también excelentes navegadores multiplataforma, y open-source. En teorÃa soportan las extensiones y temas de Firefox, salvo algunas que invocan métodos especificos de FF…..
Si has leÃdo todo el articulo, encontrarás razones de sobra para probar un nuevo navegador. Si no quieres reunciar a IE (cosa que debes hacer, y luego iluminar a todos los que puedas), igual puedes probar los otros browsers. Quien sabe, tal vez acabes con dos navegadores favoritos?
Patea IE, y déjalo sólo para probar (si eres designer o developer). Caso contrario, borra los iconos de acceso directo, instala IE Tab en Firefox (por que hay morons que aun diseñan sólo para IE) y olvidate de navegar en el lado oscuro.
Coman torta de frutas!
