Temas personalizados para iGoogle

La página personalizada de Google es sin duda uno de los servicios más populares que ofrece Google, a pesar de ello aún hay muchas personas que utilizan Google a diario y no conocen este servicio, todos los que estamos intimamente relacionados con Internet si lo conocemos, es una herramienta ideal para el usuario corriente.

Los temas de iGoogle son un elemento indispensable dentro de la página personalizada, hace unos días Google ha lanzado la API para desarrollar y crear temas personalizados, si no tienes mucha experiencia en el manejo de las diferentes APIs que ha ido lanzando Google en los últimos años te recomiendo que pruebes a crear tu tema personalizado en igThemer, una manera sencilla con la que crear temas para iGoogle.

iGoogle Themes API

iGoogle le da con esta herramienta a los usuarios la posibilidad de personalizar un poquito más si cabe su página de iGoogle, ahora que somos ya más de 10 millones de usuarios de iGoogle era hora de que cada uno pudiéramos diferenciarnos con temas personalizados.

Prueba la versión en negro de este tema
Prueba la versión en blanco de este tema

Nos permite modificar suficientes apartados de la página:

• Imagen de cabecera
• Imagen de pie
• Color de textos
• Color de enlaces
• Iframes de los gadgets

Una de las mejores funcionalidades de esta API que he podido ver en la documentación es la posibilidad de crear temas dinámicos que cambien de aspecto dependiendo de variables como la hora o el tiempo meteorológico.

Para estos datos dinámicos únicamente tendremos que introducir algunos atributos como estos (en la documentación hay mucha más información al respecto):

<ConfigMap type="Skin">
  <Trait name="TimeOfDay">12am-1am</Trait>
    ...attributes...
</ConfigMap>
<ConfigMap type="Skin">
  <Trait name="TimeOfDay">1am-2am</Trait>
    ...attributes...
</ConfigMap>
....

Ejemplo de tema personalizado

Este es un simple ejemplo de la sintáxis básica para un tema personalizado.

<?xml version="1.0" encoding="UTF-8" ?>
<ConfigMaps>
  <ConfigMap type="Skin">
    <Meta name="title">Simple Theme</Meta>
    <Meta name="description">Simple theme example.</Meta>
    <Meta name="author">Rowan</Meta>
  </ConfigMap>
  <ConfigMap type="Skin">
    <Attribute name="header.background_color">teal</Attribute>
    <Attribute name="header.logo">white</Attribute>
    <Attribute name="header.link_color">#ffffff</Attribute>
    <Attribute name="header.text_color">#ffffff</Attribute>
    <Attribute name="gadget_area.gadget.body.link_color">#8B4513</Attribute>
    <Attribute name="gadget_area.tab.unselected.text_color">gray</Attribute>
  </ConfigMap>
</ConfigMaps>

¿Cómo crear un tema?

Para crear un tema necesitamos un archivo XML como el citado anteriormente y que este archivo se encuentre alojado en un servidor público, como es habitual en estos caso Google ofrece alternaticas gratuitas para ello.

Una vez alojado el tema en un servidor público podemos testear nuestro tema añadiendo ?skin=theme-url a la url habitual de uso para iGoogle.

http://www.google.com/ig?skin=http://gadget-doc-examples.googlecode.com/svn/trunk/themes/theme_simple.xml

Por lo tanto si queremos un tema personalizado tendremos que pasar por estos tres sencillos pasos:

1. Crear el diseño para nuestro tema
2. Completar el comportamiento de todos los atributos del tema
3. Subir el tema al directorio de iGoogle

Como habréis comprobado si habeis accedido a la url anterior el tema de este primer ejemplo es realmente básico si queremos algo más completo disponemos de este conjunto de herramientas en las que tenemos los elementos básicos para componer nuestro tema… en este archivo comprimido tenemos diferentes archivos de imágenes y archivos PSD que nos falicitarán en gran medida el desarrollo del tema.

Creando nuestro tema personalizado

Para crear nuestro tema personalizado necesitaremos pocos conocimientos para su versión más básica, eso sí, si lo que queremos es algo más complejo si necesitaríamos algunos conocimientos de diseño ya que hay que trabajar con las diferentes capas que componen un tema personalizado.

Si por ejemplo lo único que queremos es un simple tema en el que modificar a nuestro gusto los colores de fondo y lo de las fuentes os recomiendo el uso de igThemer con esta aplicacón web podremos tener listo nuestro tema en unos minutos.

Si por el contrario queremos algo un pelín más complejo debemos descargarnos este archivo y seguir paso a paso las recomendaciones que podemos encontrar en la documentación.

Aquí os dejo mi humilde aportación al directorio de temas de iGoogle… espero no recibir críticas ya que no soy diseñador

Prueba la versión en negro de este tema!
Prueba la versión en blanco de este tema!

Y por último y si a alguien le interesa dejo el código del archivo xml con el que ha sido creado este tema, como he explicado antes todo está bastante bien explicado en la documentación.

<?xml version="1.0" encoding="UTF-8"?>
<ConfigMaps>
<ConfigMap type="Skin">
<Meta name="title">TuFuncion</Meta>
<Meta name="description">Tema desarrollado por TuFuncion</Meta>
<Meta name="author">Manuel Gutierrez Heredia</Meta>
<Meta name="author_email">manugut@gmail.com</Meta>
<Meta name="author_location">Malaga, Spain</Meta>
<Meta name="thumbnail">

http://www.tufuncion.com/igoogle_theme/thumbnail.jpg

</Meta>
<Meta name="screenshot">

http://www.tufuncion.com/igoogle_theme/screenshot.jpg

</Meta>
</ConfigMap>
<ConfigMap type="Skin">
<Attribute name="header.background_color">#000000</Attribute>
<Attribute name="header.tile_image.url">

http://tufuncion.com/igoogle_theme/header_tile.jpg

</Attribute>
<Attribute name="header.logo">beveled_orange</Attribute>
<Attribute name="header.link_color">#fb971c</Attribute>
<Attribute name="header.text_color">#fb971c</Attribute>
<Attribute name="gadget_area.tab.border_color">#fb971c</Attribute>
<Attribute name="gadget_area.tab.selected.background_color">#fb971c</Attribute>
<Attribute name="gadget_area.tab.selected.text_color">#666666</Attribute>
<Attribute name="gadget_area.tab.unselected.background_color">#ffbe6d</Attribute>
<Attribute name="gadget_area.tab.unselected.text_color">#999999</Attribute>
<Attribute name="gadget_area.border_color">#d6b07a</Attribute>
<Attribute name="gadget_area.gadget.border_color">#cf984a</Attribute>
<Attribute name="gadget_area.gadget.header.background_color">#ffbe6d</Attribute>
<Attribute name="gadget_area.gadget.header.text_color">#333333</Attribute>
<Attribute name="gadget_area.gadget.body.link_color">#0000cc</Attribute>
<Attribute name="gadget_area.menu_icon.image.url">

http://www.tufuncion.com/igoogle_theme/menu.gif

</Attribute>
<Attribute name="gadget_area.menu_icon.hover_image.url">

http://www.tufuncion.com/igoogle_theme/menu_hover.gif

</Attribute>
<Attribute name="gadget_area.delete_icon.image.url">

http://www.tufuncion.com/igoogle_theme/delete.gif

</Attribute>
<Attribute name="gadget_area.delete_icon.hover_image.url">

http://www.tufuncion.com/igoogle_theme/delete_hover.gif

</Attribute>
<Attribute name="gadget_area.collapse_icon.image.url">

http://www.tufuncion.com/igoogle_theme/collapse.gif

</Attribute>
<Attribute name="gadget_area.collapse_icon.hover_image.url">

http://www.tufuncion.com/igoogle_theme/collapse_hover.gif

</Attribute>
<Attribute name="gadget_area.expand_icon.image.url">

http://www.tufuncion.com/igoogle_theme/expand.gif

</Attribute>
<Attribute name="gadget_area.expand_icon.hover_image.url">

http://www.tufuncion.com/igoogle_theme/expand_hover.gif

</Attribute>
<Attribute name="footer.background_color">#000000</Attribute>
<Attribute name="footer.link_color">#0000cc</Attribute>
<Attribute name="footer.text_color">#eeeeee</Attribute>
</ConfigMap>
</ConfigMaps>

Durante la creación de estos temas personalizados he encontrado algunas curiosidades como esta se trata de un enlace que te muestra todos los logos disponibles para la creación del tema personalizado.

<Attribute name="header.logo">beveled_orange</Attribute>