Google Closure: Mejora tu código JavaScript

La gente de Google no deja de sacar aplicaciones o herramientas útiles, todas las semanas nos encontramos con varias entradas en los blogs de Google sobre nuevas ideas que han surgido de la empresa, ya sea por iniciativa propia o como parte del tiempo que los Googlers pueden usar para proyectos propios.

En este caso, se trata de un proyecto que ha surgido del tiempo de varios de los trabajadores de Google para proyectos propios y se trata de una herramienta para optimizar y depurar el JavaScript de las páginas de los desarrolladores.

En concreto se trata de un compilador (Closure Compiler) que se encarga de traducir entre el javascript que se le pasa a una versión mejorada, en el que se elimina el “código muerto” y reescribe y minimiza el código para poder optimizar la carga del mismo por parte de los navegadores. Además, incluye una herramienta de inspección (Closure Inspector) como extensión de Firebug y que permite el mapeo del código, tracearlo e integrar pruebas unitarias al código.

Además, incluye una librería (Closure library) y unas plantillas (Closure Templates) para el uso eficiente de JavaScript en las páginas web.

Esta herramienta puede ser muy útil para los desarrolladores que tenemos grandes archivos JavaScript y que queremos mejorar y optimizar el resultado de nuestras páginas, con lo que se permitiría realizar aplicaciones ricas usando JavaScript al más puro estilo de Google Maps o Gmail.

Vía: Google Code Blog

Guía completa para conocer Google Wave

Ayer recibí mi invitación para usar la ultima aplicación estrella de Google: Google Wave, el servicio que según Google va a revolucionar la forma de comunicarse y dejar el correo electrónico desfasado.
Allá por Junio había visto la conferencia de Google en el Google IO en la que presentaron Google Wave y me impresionó y gustó mucho, parecía una de esas aplicaciones que saca Google que revolucionan el mundo de internet.

Pues bien, después de un uso bastante corto, me he quedado con ganas de saber qué incorpora de utilidad, no es que no crea que lo tiene, si no que al no tener con quién utilizarlo, la herramienta parece un poco inútil.

Por eso mismo me ha encantado cuando me he encontrado una entrada en mi lector de Feeds sobre un libro que explica los entresijos de Google Wave, y es que entre que los vídeos propios de Google muestran errores y el poco uso que he tenido de la aplicación, necesitaba un empujón dar una oportunidad a Google Wave y parece que este manual incorpora toda la información requerida para hacerse un experto en el uso de Google Wave y para que acabe de convencerme de su utilidad.

Como los autores del libro dicen: la guía completa de Google Wave.

Especificar la licencia de una imagen de tu sitio web

Acabo de leer una entrada del blog de webmasters de Google donde indican la forma en la que podemos indicar a Google qué tipo de licencia tienen las imágenes de nuestra web (las que son realmente nuestras) para que, de esta forma, Google pueda mostrar en los resultados de las imágenes aquellas liberadas bajo licencias que permitan su publicación.

La forma de hacer esto es indicarlo a través de RDFa en cada una de las imágenes a las que queramos incluir dicha semántica.

La forma concreta de hacerlo sería incluir un elemento div (con un atributo about que haga referencia a la imagen) que envuelva a la imagen y al enlace a la licencia concreta con la que se encuentra una imagen, de la siguiente forma:


No me ha quedado claro si realmente el atributo about debe tener el mismo nombre del src de la imagen, pero así aperecia en el ejemplo que dan desde Google, así que mejor dejarlo así.

Podéis ver el vídeo que lanzaron desde Google con subtítulos en español aquí mismo:

Google AJAX Feed API

He probado una nueva herramienta de Google, en este caso se trata de Google AJAX Feed API, que permite incluir feeds en una página web de forma sencilla y sin necesidad de tener que programar nada.

Como el resto de APIs de Google es fácil de usar y altamente configurable, se puede encontrar información básica, una guía para el desarrollador, ejemplos e incluso un asistente para crear fácilmente un control de feeds.

Uno de los posibles usos para esta herramienta es la posibilidad de crear un “gadget” de los feeds de un sitio para poder mostrar los más recientes (estáticos o en movimiento) , como por ejemplo para incluir los últimos post de tu blog en tu página personal o diapositivas con las fotos de algunos servicios de imágenes

Se pueden incluir resultados de varios sitios y los resultado se muestran en dos formatos (XML y JSON).

Google Custom Search

Logo de Google Custom Search

Hacía tiempo que quería incluir una herramienta de búsqueda en mi sitio web y ayer dando una paseo por la red encontré algo que se adapta perfectamente a mis necesidades. Para no variar, se trata de una herramienta de Google, que cada vez que hace algo lo suele hacer bien. El nombre de la herramienta es Google Custom Search, que es una herramienta vieja de Google pero que se ha actualizado en la última semana y de la que ya había hablado indirectamente en el blog con el buscador de torrents.

La herramienta en sí es muy sencilla, permite realizar búsquedas personalizadas en el/los sitio(s) que le indiques, pero además te permite incluir adsense en las búsquedas (con lo que se puede hacer dinero), se puede modificar el aspecto y posición tanto de la caja de búsqueda como de la de los resultados. Lo mejor de todo es que utiliza la tecnología Google y en concreto Google AJAX Search API, con lo que es muy rápido, las búsquedas son precisas y da un aspecto “resultón” a la página.

Además de esto, existe una versión para empresas de la herramienta, que permite extender un poco la funcionalidad, pero que por contra es de pago.

Lo más importante de esta herramienta es que cada uno puede tener su propio motor de búsqueda personalizado, incluirlo en su sitio web y no tener que preocuparse de crear un propio.

Para todo el que tenga algún interés, puede visitar mi página web o el sitio de Google de mi motor de búsqueda.

La apariencia del buscador por defecto es algo como:

Google Custom Search Engine

Sombras en CSS3

Como ya he dicho en alguna ocasión anterior, CSS3 va a traer muchos cambios, entre ellos algunas propiedades muy interesantes que van a facilitar ciertas labores que antes eran difíciles de hacer.

En este caso hablo de las sombras, que aunque no sea una de las cosas más usadas, si puede llegar a ser interesante en determinados diseños, como por ejemplo la sombra de la cabecera o de un objeto concreto para darle sensación de volumen.

Todo este se conseguirá en CSS3 con las propiedades text-shadow y box-shadow, para dar sombra a texto y cajas respectivamente.

Algunos navegadores ya tienen implementada cierta funcionalidad de CSS3 y por tanto se puede ver ejemplos en funcionamiento.

En general las dos propiedades tienen un comportamiento parecido, en ambas hay que indicar en el valor de la sombra su desplazamiento lateral, el vertical, así como el valor de lo “borroso” de la sombra (blur) y el color de la misma (que puede ir al principio o al final). Además se permite la inclusión de varias sombras por cada elemento.

El código para las sombras de dos elementos (texto y caja) podrían ser:

.texto {
   //Sombra hacia derecha, arriba,  color negro, poco difuminada
   text-shadow: 10px -10px 2px rgb(0,0,0)
}

.caja {
   //Sombra hacia izquierda, abajo,  color negro, algo difuminada
   box-shadow: -10px 10px 10px rgb(0,0,0)
}

Donde se podría modificar cualquiera de los parámetros al gusto hasta encontrar algo que se asemeje a lo que se busca

Tutorial de posicionamiento CSS

Si estás aprendiendo CSS (o convirtiéndote en un experto) y tienes algún tipo de problema o te cuesta entender la forma de posicionar elementos con CSS, hay un tutorial de 10 “pasos” que te puede ayudar y mucho, puesto que tiene todas las posibilidades perfectamente explicadas y con unos ejemplos con los que no te costará nada entender como funciona.

Está en Inglés pero se entiende perfectamente.

Nueva infraestructura del motor de búsqueda de Google

Acaban de anunciar desde Google que se ha puesto a disposición de los desarrolladores la nueva versión en desarrollo de la infraestructura del motor de búsqueda de Google para que se pueda ir probando e ir aportando “feedback”. Pretenden que se les informe de los posibles problemas y sobre todo los posibles cambios de posicionamiento entre la versión actual y la de prueba.

Según indican, la nueva versión pretende mejorar en tamaño, velocidad y precisión a la versión actual.

Si eres desarrollador y/o técnico SEO, sería conveniente ir probando esta nueva versión para mejorar el posicionamiento en la misma de tus páginas.

Transparencias en CSS3

Con la llegada de la nueva versión del estándar CSS (CSS3), tendremos muchísimas novedades, una de las más importantes y comentadas es la posibilidad de incluir valor para la opacidad de los colores, dicho de otra manera significa que se podrá especificar transparencias para los elementos, lo que puede dar mucho juego.

Para poder llevar a cabo la especificación de la transparencia, se ha añadido una nueva forma de indicar los valores de los colores, se trata de una extensión de la forma anterior rgb(R,G,B), que ahora queda rgba(R, G, B, A), teniendo que ser el valor de alpha(A) entre 0.0(total transparencia) y 1.0(total opacidad, valor por defecto). Un ejemplo de la misma sería:

.transparente {

color: rgb(0,0,0); // Color de letra negro, para IE

color: rgba(0,0,0, 1); // Color de letra negro, no transparencia

color: rgba(0,0,0, 0.5); // Color de letra negro, transparencia del 50%

background-color: rgb(256, 256, 256); // blanco, para IE

background-color: rgba(256, 256, 256, 0.5); // blanco, transparencia 50%

background-color: rgba(256, 256, 256, 0); // blanco, transparencia 100%

border: 1px solid rgb(128, 128, 128); // gris, para IE

border: 1px solid rgba(128, 128, 128, 0.6); // gris, transparencia 40%

}

Dicha forma de indicar los colores se permite para todas las especificaciones, ya sea color de fondo, de letra, de borde o cualquier otro.

Se puede ver un ejemplo del uso de transparencias en CSS dentro de las pruebas que realizo.

Para más información sobre las transparencias, lo mejor es buscar en la información oficial de la especificación de CSS3.

Reemplazar por consola en Linux

En un post anterior ya hablé sobre la potencia de la consola de Linux para realizar una acción tan común como buscar cadenas, ahora traigo un nuevo comando que puede ser usado junto con el anterior para aumentar la potencia de éste y así realizar una acción de búsqueda y reemplazo en distintos archivos.

En concreto se trata del comando sed (Stream EDitor), que permite la edición de cadenas para filtros y transformación de texto. El comportamiento por defecto es la captura de la entrada de un texto (ya sea por teclado o fichero) y la modificación para su salida por pantalla, pero para el caso que nos interesa (modificación de archivos), la sintaxis básica es:

$ sed -i ‘s/cadenaIni/cadenaFin/’ archivo

Que realiza la modificación de la cadenaIni por cadenaFin en el archivo indicado.

Se puede realizar en todos los archivos de un directorio con el comando:

$ sed -i ‘s/cadenaIni/cadenaFin/’ *

O en todos los que acaben o empiezan de una determinada forma con:

$ sed -i ‘s/cadenaIni/cadenaFin/’ archivo*
(sustituye la cadena en todos los archivos que empiezen por archivo)
$ sed -i ‘s/cadenaIni/cadenaFin/’ *.html
(sustituye la cadena en todos los archivos html)

El comando es muy completo y, a parte de lo dicho, permite ejecutar scripts para la modificación de cadenas, eliminar espacios y muchas acciones más, pero la función que más veces he utilizado es la de reemplazo en ficheros.
Puede ser muy útil junto con grep para buscar y modificar posibles fallos en algún archivo que hayas programado o para incluir modificaciones en varios archivos a la vez (como cuando se modifica la plantilla de archivos html) y para muchas más cosas.