A la hora de integrar los servicios sociales de Facebook en una página web los desarrolladores disponían de dos métodos, o bien usando los archiconocidos iframes o usar el FBML, un lenguaje de etiquetas propio de Facebook que se reemplazaban en el código mediante la carga de un javascript.

Tras desarrollar este lenguaje de etiquetas y fomentar su uso entre los desarrolladores ahora Facebook cambia su estrategia y anuncia que “a partir de final de año no se podrán crean nuevas aplicaciones usando FBML, así que toda integración con las aplicaciones y páginas se realizarán mediante iframes y el JavaScript SDK“.

¿Qué es un GTUG?

Google Technology User Group (GTUG) es un grupo de usuarios para gente interesada en tecnologías Google, desde Android pasando por App Engine, Chrome así como APIs: Google Maps API, Youtube API, Google Calendar API…

Como podéis comprobar en esta lista hay GTUGs en todo el mundo. En España ya existe el grupo de GTUG Madrid y desde ahora también en Barcelona, lugar donde hay un interés suficiente sobre las tecnologías Google.

Barcelona GTUG es el grupo de usuarios de tecnologías de desarrollo de Google de Barcelona. Un grupo sin ánimo de lucro, formado por desarrolladores que tienen el objetivo de aprender e intercambiar conocimientos y experiencias acerca de las tecnologías de Google. La participación es abierta y gratuita, tanto para novatos como desarrolladores experimentados, lideres de proyectos y organizaciones en general interesadas en utilizar tecnología Google en sus proyectos.

Google ha lanzado un nuevo servicio esta vez relacionado con Android. App Inventor es un entorno de desarrollo para aplicaciones de Android pensado para gente que quiera crear aplicaciones simples sin necesidad de tener muchos conocimientos de programación a través de un editor online.

De forma muy visual (que nos recuerda a herramientas como Visual Studio) podremos añadir controles a nuestra aplicación y acceder a la mayoría de las funciones del terminal, incluyendo el GPS y los sensores de movimiento.

Tras probarlo inicialmente con un grupo reducido de personas, Google lo liberará en fase beta y con necesidad de invitación al resto de los usuarios que deseen probarlo.

Las buenas relaciones de Google con Adobe, promoviendo Flash en sus teléfonos Android, no tienen por qué ser un motivo de despreciar HTML5 y apoyar a los desarrolladores web a utilizar más esta tecnología.

A través de la web http://www.html5rocks.com/ Google ofrece presentaciones, tutoriales y ejemplos para dar a conocer entre los programadores las ventajas y capacidades de la unión de HTML + CSS + JS. Tutoriales por ejemplo para aprender como habilitar tu aplicación web para que funcione en modo offline, acceso a la geolocalización o leer archivos locales mediante JavaScript.

He creado un pequeño ejemplo para mostraros tres de las nuevas propiedades que encontraremos disponibles en CSS3: las transformaciones, las transiciones y las sombras. El ejemplo friki reproduce la animación del título en la introducción de la serie Lost (como tributo a su finalización).

Aviso: Este ejemplo solo funcionará en aquellos navegadores que ya tengan implementadas estas nuevas propiedades de CSS3, como por ejemplo Firefox 3.7, Safari 4, Chrome 5 y Opera 10.

El ejemplo muestra el texto LOST inicialmente con una opacidad, tamaño de fuente y rotación. Cuando se posiciona el cursor sobre el texto gracias a la propiedad transition aplicaremos una animación que cambiará estos tres valores iniciales y le añadirá una sombra al texto.

El código CSS necesario sería:

div{
-webkit-transform: rotate(-15deg) scale(1) skew(0deg);
-webkit-transition: all 3s ease-in;
}
div:hover{
text-shadow: 3px 3px 5px #CCC;
-webkit-transform: rotate(20deg) scale(1) skew(-30deg);
}

De este modo estaríamos indicando que el texto inicial tiene una rotación de -15 grados, sin plegamiento y sin escalado. La transformación que se va a aplicar afectará a todas las propiedades (all), durará 3 segundos y como se comportará durante el tiempo de animación (en este caso ease-in).

El punto final de la animación lo asignamos en el div:hover. Aquí indicamos una sombra para el texto (posición izq/der, posición arriba/abajo, tamaño y color) y la transformación final del texto.

Demostración | Descargar [55]

Google Font API es una de las nuevas herramientas anunciadas ayer en el evento I/O 2010. Esta herramienta nos permite incluir tipografías open source en nuestros desarrollos web de una forma sencilla simplemente añadiendo una línea de código.

Google se encargará de almacenar estas tipografías en un directorio de fuentes que podremos utilizar con tres sencillos pasos:

1.-Acceder al directorio de fuentes de Font API y seleccionar la fuente que deseamos utilizar haciendo clic sobre ella. En este ejemplo vamos a seleccionar la fuente Yanone Kaffeesatz:

2.- En la ficha de la fuente seleccionada tenemos una previsualización de la misma en diferentes tamaños de letra, así como la posibilidad de revisar todos los caracteres incluídos (por ejemplo, por si queremos ver si soporta tildes). Si nos movemos a la pestaña de Get Code tendremos el código necesario que tenemos que incluir en nuestra página para usar la tipografía:

Además tenemos marcado el nombre que tendremos que utilizar en la propiedad font-family de la hoja de estilos para vincular la tipografía a un elemento determinado.

3.- Finalmente añadimos esta línea dentro de la etiqueta head de nuestro código y antes de su utilización en el css. Un ejemplo sencillo sería:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Google Font API</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<style>body{ font-family: 'Yanone Kaffeesatz', arial, serif; font-size:75px; text-shadow:4px 4px 4px #aaa; }</style>
</head>
<body>
Google Font API : )
</body>
</html>

Y su resultado nos daría:

Y cabe destacar que Google Font API ofrece compatibilidad total con navegadores obsoletos. Por ejemplo, si entramos en la ficha de la fuente Yanone Kaffeesatz con el navegador Internet Explorer 6:

Más información: http://code.google.com/apis/webfonts/