25/01/2012

Hasta un bebé puede hacer una extensión para Chrome

Hace ya un buen tiempo que estuve jugando con firefox a realizar una extensión y me parecio muy facil, ya que anteriormente habia hecho algo con xulrunner.

Como sea ese es otro tema, el tema principal aqui es que al mirar en google dev, el potencial de desarrollo para Chrome me quede con el ojo pelón.

1.- Create una carpeta, ej: “HolaChrome”
2.- Crea un archivo llamado “manifest.json”, ojo, en utf8.


{"name": "Hola Chrome",
"version": "1.0",
"description": "Jugando a ser bebe.",
"browser_action": {
"default_icon": "icono.png",
"popup":"popup.html"
}
}

3.- Creamos el archivo “popup.html” ( Ponemos un simple mensaje ó algo ). Obviamente “icono.png” ya esta contemplado.

4.- Obvio, en Chrome, vamos al apartado de Herramientas->Extensiones->Marcamos en modo desarrollador->Click en cargar “extension descomprimida”->indicamos la ruta de la carpeta. Listo, se carga la extensión sin problema, lo que me encanto es que puedes seguir editando y se ve reflejado el cambio en la extensión sin necesidad de compilar, o de volver a cargar.

5.- Para empaquetar y distribuir, una vez ya cargada la extensión, click en “empaquetar extensión..”, indicamos la ruta y nos creara dos archivos.

El archivo con extensión .CRX es como tal el paquede de distribución, el archivo con extensión .PEM es donde se guarda una especie de clave que nos permitira posteriormente hacer actualizaciones.

¡Dios mio!.

21/12/2011

Hacer crop a imagenes con css

Hay varias formas de hacer un crop a una imagen con css.

Dos de ellas jugando con position y la que deberia utilizarse que es clip, disponible en css3. El problema con esta ultima alternativa es el soporte en algunas versiones de Internet Explorer.

Por ahí se me presento la necesidad de hacer un crop a una imagen, que, anteriormente ya trabajaba con PHP y sacaba un Thumbnail, sin embargo por las diferentes variantes de la misma tenia un excedente en la altura o en lo ancho.

Lo que hice en css, teniendo ya mi thumbnail fue lo siguiente:


div.Thumb {
height:100px;
width:100px;
overflow:hidden;
}

div.Thumb img {
display:block;
}

Me soluciono el problema por el tipo de proyecto, pero se pudo haber hecho algo mejor con PHP, pero más tardado.

Total, veanlo como otra alternativa.