El API de temas permite crear diseños personalizados para iGoogle, y proporciona a decenas de millones de usuarios herramientas para personalizar sus páginas principales. Los temas son diseños dinámicos; pueden cambiar a lo largo del día para mostrar un mensaje, una trama visual o cualquier otra cosa.
Este documento se ha modificado para reflejar los cambios introducidos por las funciones adicionales de iGoogle. Junto a las secciones aparece ¡Nuevo! o ¡Actualizado! para ayudar al usuario a identificar el contenido que ha cambiado desde la última versión.
En este documento aparecen las dos versiones distintas de la interfaz de usuario de iGoogle: la interfaz de usuario original y la nueva versión, que puedes consultar en la zona de pruebas de iGoogle. Con el tiempo, la nueva interfaz de usuario reemplazará a la versión anterior. La mayoría de parámetros de configuración descritos en este documento se aplican a ambas versiones de la interfaz de usuario, pero algunos sólo se aplican a una de las dos.
Un tema es un diseño personalizado para la página de iGoogle. Cada tema se define en un archivo XML básico que contiene pares clave-valor para atributos de página de iGoogle, como el color del texto y el del fondo. Un tema puede consistir simplemente en una configuración de color para el fondo del encabezado y el logotipo de iGoogle o tener varias imágenes y un comportamiento dinámico.
Un tema puede tener una o varias máscaras. Una máscara permite especificar un diseño para los atributos que deseas incluir en tu tema mediante la creación de un diseño sencillo para la página de iGoogle. Un tema con varias máscaras es un tema dinámico que modifica el diseño de la página de iGoogle en función del momento del día.
Cada máscara se representa en el archivo XML de temas mediante un mapa de configuración (ConfigMap) diferente. Un tema consiste esencialmente en un grupo de mapas de configuración.
A continuación se ofrece un ejemplo de la sintaxis básica del archivo XML de un tema. Observa que las máscaras se definen con las etiquetas <ConfigMap>. Un tema puede definir varias máscaras, cada una de las cuales estará definida en una sección <ConfigMap>. Un tema necesita al menos dos secciones <ConfigMap>: una para los metadatos y otra para los atributos de diseño de una máscara como mínimo. Por ejemplo:
| 
<?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>
<Meta name="author_email">Rowan@gmail.com</Meta>
<Meta name="thumbnail">http://gmodules.com/ig/images/skins/ig_thumb_beach.jpg</Meta>
</ConfigMap>
<ConfigMap type="Skin">
<Attribute name="header.background_color">teal</Attribute>
<Attribute name="header.logo">white</Attribute>
<Attribute name="header.link_color">blue</Attribute>
<Attribute name="header.text_color">black</Attribute>
<Attribute name="gadget_area.gadget.header.background_color">teal</Attribute>
</ConfigMap>
</ConfigMaps>
Para obtener una lista completa de campos de metadatos y atributos, consulta la referencia.
Los archivos XML de temas se pueden crear con cualquier editor de texto, por ejemplo, con Wordpad.
Para probar un tema, las imágenes del tema y el archivo XML se deben alojar en un servidor público. Por ejemplo, los archivos de imágenes y el archivo XML del tema se podrían alojar en el Editor de gadgets de Google o en Google Code, tal como se describe en esta página.
Una vez alojados tus recursos, el tema se puede probar añadiendo ?skin=<theme-url> al final de la URL de iGoogle. El sencillo tema del ejemplo anterior se podría probar en una versión internacional de iGoogle del siguiente modo:
http://www.google.co.uk/ig?skin=http://gadget-doc-examples.googlecode.com/svn/trunk/themes/theme_simple.xml
Nota: si eres nuevo, deberás hacer clic en "Ver tu página" en el cuadro de configuración para probar un tema.
Para probar el tema con las funciones más recientes de iGoogle, primero deberás registrarte en la zona de pruebas a través de http://www.google.com/ig/sandbox. A continuación, prueba el tema de nuevo, pero esta vez añade ?skin=<theme-url> al final de la URL de iGoogle. Por ejemplo, para probar el ejemplo sencillo en la zona de pruebas, regístrate y, a continuación, visita:
http://www.google.com/ig?skin=http://gadget-doc-examples.googlecode.com/svn/trunk/themes/theme_simple.xml
Para probar correctamente el diseño de tu tema, asegúrate de haber accedido a tu cuenta de Google. Revisa todas las zonas de la página, incluidas las nuevas funciones, como el chat.
Un tema de iGoogle se compone de una imagen de encabezado, una imagen de pie de página y estilos que se definen en una plantilla XML para distintas partes de la página. Para crear un tema se deben seguir tres pasos:
En las siguientes secciones se describen estos pasos de forma más detallada.
Antes de empezar a crear un tema, debes consultar la política del programa. A continuación se muestran algunas de las directrices de esta política:
La página de iGoogle consta de las siguientes secciones: el encabezado, el menú de navegación de la izquierda, el área de contenido y el pie de página.
No olvides que los temas pueden cambiar a lo largo del día, así que no te conformes con un solo diseño y crea un tema dinámico.
El encabezado es el área gráfica que aparece en la parte superior de la página de iGoogle. Incluye el logotipo de iGoogle, el cuadro de búsqueda, el texto, los enlaces, etc. También puede incluir las pestañas (en función de la versión de iGoogle del usuario). Por ejemplo, éste es el encabezado del tema "Salón de té" de iGoogle:
El encabezado se compone de las siguientes capas:
Antes de diseñar un encabezado y crear mosaicos, te resultará útil comprender cómo se crean las capas del encabezado . No es necesario que utilices todas las capas (más información sobre este tema más adelante). Los elementos del encabezado se disponen en el siguiente orden:
<Attribute name="header.background_color">teal</Attribute><Attribute name="header.tile_image.url">http://www.example.com/tile_img.jpg</Attribute><Attribute name="header.center_image.url">http://www.example.com/center_img.jpg</Attribute>La imagen del encabezado tiene 175 píxeles de altura; los mosaicos y la imagen central deben tener esta misma altura. La imagen central debe tener un ancho mínimo de 640 píxeles. La imagen puede ser tan ancha como se desee, siempre que el tamaño del archivo no supere los 40 kb (Sugerencia: las imágenes de menor tamaño se cargan con mayor rapidez y suelen tener más popularidad).
Al estar compuesto por una imagen de tamaño fijo, el encabezado se debe crear de forma que se ajuste perfectamente a las distintas resoluciones de pantalla y a los cambios de tamaño de la ventana del navegador que puedan realizar los usuarios. Para alcanzar esta flexibilidad, puedes crear el encabezado mediante una de las siguientes técnicas:
En las siguientes secciones se describen estas técnicas de forma más detallada.
Puedes utilizar un único color para el fondo de la imagen de tu encabezado. Al ampliarse la página, aparecerá este color en los laterales de la imagen del encabezado. Para conseguir una perfecta transición de color entre el encabezado y el fondo, el color utilizado para la combinación deberá ser igual en los laterales derecho e izquierdo de la imagen del encabezado. Ese color se podrá utilizar como fondo. Por ejemplo:
 |
Capa 1: Color de fondo - Negro seleccionado como color de fondo. Capa 2: Mosaicos del encabezado - Sin mosaicos. Capa 3: Imagen del encabezado - Los bordes de la imagen del encabezado son negros. Esto garantiza que el color de fondo y la imagen del encabezado coincidan. Capa 4: Cuadro de búsqueda y logotipo. La sencillez es compleja de John Maeda |
Puedes crear un mosaico repetitivo que sirva de fondo de todo el encabezado. Los bordes del mosaico deben coincidir de forma que la imagen se pueda repetir sin que se aprecien límites ni saltos. Con una imagen central transparente, puedes colocar objetos sobre el fondo de la imagen del encabezado, y dejando otras áreas transparentes para la representación del fondo. Por ejemplo:
 |
Capa 1: Color de fondo - Ningún color de fondo seleccionado. Capa 2: Mosaicos del encabezado - El mosaico del encabezado tiene 900 píxeles, que se repiten de izquierda a derecha. Los bordes de los mosaicos coinciden, de modo que el fondo de hierba y nubes se prolonga sin que se note el corte. Capa 3: Imagen del encabezado - Como el mosaico del encabezado, la imagen del encabezado tiene 900 píxeles. El mosaico del encabezado deber ser una imagen .gif transparente. Capa 4: Cuadro de búsqueda y logotipo. Parada de autobús de Google |
Es similar a la segunda técnica, salvo en que los mosaicos de situados en la mitad están cubiertos por una imagen central opaca. Para conseguir una perfecta fusión de la imagen central con el mosaico, deben coincidir el borde izquierdo de la imagen central con el borde derecho del mosaico, y el borde derecho de la imagen central con el borde izquierdo del mosaico. Para garantizar la alineación entre la imagen central y el mosaico en la página de iGoogle, la imagen del mosaico debe quedar uniformemente colocada tras la imagen central. Si la imagen central tiene 900 píxeles de ancho, el mosaico deberá tener 900 píxeles de ancho (si detrás debe situarse un mosaico), 300 píxeles (si son tres mosaicos), etc. De esta forma, al cambiar el tamaño de la página, los mosaicos y la imagen central se alinearán creando una imagen perfecta.
Por ejemplo:
 |
Capa 1: Color de fondo - Ningún color de fondo seleccionado. Capa 2: Mosaicos del encabezado - Los tres mosaicos de 300 píxeles de ancho. Los bordes de los mosaicos coinciden, de modo que el fondo de cielo y árboles se prolonga sin que se note el corte. Capa 3: Imagen del encabezado - La imagen de encabezado opaca tiene 900 píxeles, el ancho de tres mosaicos de encabezado. Los árboles de los mosaicos se alinean con los árboles de la imagen del encabezado, de modo que el fondo y el primer plano se fusionan perfectamente. Capa 4: Cuadro de búsqueda y logotipo. Salón de té de Google |
El API de temas permite especificar colores para el texto y para los enlaces del encabezado, el pie de página y el área de contenido (denominada "área de gadgets" en el API). Por ejemplo, este fragmento establece el color del texto y el enlace del encabezado en blanco. También puedes establecer los colores mediante valores hexadecimales, del mismo modo que hiciste con el color del enlace del área de contenido:
<Attribute name="header.link_color">white</Attribute>
<Attribute name="header.text_color">white</Attribute>
<Attribute name="gadget_area.gadget.header.background_color">#00B366</Attribute>
Todos los enlaces serán del mismo color y deberán estar visibles en la página. Se incluyen los siguientes enlaces:
Es posible que algunas versiones de iGoogle también incluyan los siguientes enlaces:
Elige el color del texto sin formato. Todo el texto sin enlaces será del mismo color y deberá estar visible en la página. El texto incluye:
Es posible que algunas versiones de iGoogle también incluyan el siguiente texto:
Cada tema debe incluir un logotipo de iGoogle, que se debe ver con claridad en la página. Para especificar un logotipo de iGoogle para tu tema, utiliza el atributo header.logo. El valor de este atributo puede ser uno de los indicados a continuación.
original: el logotipo multicolor original de iGoogle con un fondo transparente en vez de blanco. Si no especificas un logotipo, en tu tema aparecerá el logotipo original sobre un fondo blanco, que suele crear un efecto no deseado en la mayoría de los casos. beveled_original: el logotipo multicolor original de iGoogle biselado.color: uno de los colores de logotipo admitidos; puedes consultar la lista completa en la referencia. beveled_color: uno de los colores de logotipo admitidos, con un borde biselado. A continuación se muestran algunos ejemplos.
Logotipo blanco plano:
<Attribute name="header.logo">white</Attribute>
Logotipo amarillo biselado:
<Attribute name="header.logo">beveled_yellow</Attribute>
Logotipo original biselado:
<Attribute name="header.logo">beveled_original</Attribute>
Ten en cuenta que las pestañas se van a desplazar al menú de navegación de la izquierda. Mientras implementamos las nuevas funciones para los usuarios de iGoogle, algunos usuarios tendrán pestañas y otros tendrán el área de navegación de la izquierda. Recomendamos que se especifiquen ambos valores mientras tanto.
El API de temas permite modificar las siguientes características de las pestañas de iGoogle:
Por ejemplo, este fragmento
<Attribute name="gadget_area.tab.selected.background_color">white</Attribute>
<Attribute name="gadget_area.tab.selected.text_color">blue</Attribute>
<Attribute name="gadget_area.tab.unselected.background_color">gray</Attribute>
<Attribute name="gadget_area.tab.unselected.text_color">black</Attribute>
<Attribute name="gadget_area.tab.border_color">navy</Attribute>
crea este diseño de pestaña (mostrado sobre un fondo de encabezado verde azulado):
Nota: esto va a sustituir a las pestañas horizontales.
El API de temas permite modificar las siguientes características del menú de navegación de la izquierda:
Por ejemplo:
<Attribute name="navbar.background_color">#FFF9BF</Attribute>
<Attribute name="navbar.border_color">blue</Attribute> <Attribute name="navbar.icons.icon_color">aqua</Attribute> <Attribute name="navbar.tab.selected.link_color">teal</Attribute> <Attribute name="navbar.tab.unselected.link_color">teal</Attribute> <Attribute name="navbar.tab.unselected.border_color">teal</Attribute>
El API de temas permite modificar las características de la función de chat indicadas a continuación. La lista de chat aparece en la parte inferior del menú de navegación de la izquierda.
Por ejemplo:
<Attribute name="navbar.contacts.contact_color">#FF8080</Attribute> <Attribute name="navbar.contacts.status_color">#FF8080</Attribute> <Attribute name="navbar.contacts.hover_background_color">#FF0000</Attribute> <Attribute name="navbar.contacts.card.border_color">#B30000</Attribute> <Attribute name="gadget_area.chat.header.background_color">#FFBFBF</Attribute> <Attribute name="gadget_area.chat.header.highlight.background_color">#FF8080</Attribute>
El API de temas permite modificar las características del área de contenido indicadas a continuación. El área de contenido es la parte de la página en la que aparecen los gadgets:
Por ejemplo, este fragmento
<Attribute name="gadget_area.gadget.body.link_color">#00B366</Attribute> <Attribute name="gadget_area.border_color">#007D48</Attribute> <Attribute name="gadget_area.gadget.border_color">#007D48</Attribute> <Attribute name="gadget_area.gadget.header.background_color">#BFFFE4</Attribute> <Attribute name="gadget_area.gadget.header.text_color">#00B366</Attribute>
crea este esquema de color en el área de contenido:
Nota: sustituye la opción que permite especificar imágenes personalizadas en los iconos de botón.
El API de temas permite modificar los botones que aparecen en los encabezados de los gadgets. Puedes especificar el color de los botones que deseas con uno de los valores que aparecen en la sección Referencia del API.
Por ejemplo:
<Attribute name="gadget_area.icons.icon_color">#ffaa00</Attribute>
El diseño del pie de página es opcional y parecido al del encabezado. Los colores del texto y los enlaces pueden cambiar, existen restricciones de ancho y altura, y el pie de página se puede disponer en mosaico de la misma forma.
Existen tres opciones para diseñar el pie de página:
<Attribute name="footer.background_color">gray</Attribute>footer.tile_image.url para especificar un mosaico de fondo de pie de página, por ejemplo: <Attribute name="footer.tile_image.url">http://www.example.com/footer_img.jpg</Attribute><Attribute name="footer.center_image.url">http://www.example.com/footer_center_img.jpg</Attribute>
También puedes modificar el color de los enlaces y del texto del pie de página. Por ejemplo, este fragmento establece el blanco como color de los enlaces del pie de página y el negro como color del texto:
<Attribute name="footer.link_color">white</Attribute> <Attribute name="footer.text_color">black</Attribute>
El pie de página también es el lugar en el que puedes colocar tus atribuciones (por ej., tu nombre, firma o logotipo). El área de atribución mide 50 x 100 píxeles y está ubicada en la esquina superior derecha del pie de página. Para obtener información detallada, consulta la política del programa. Utiliza el atributo attribution.image.url para añadir una imagen de atribución. Por ejemplo:
<Attribute name="attribution.image.url">http://www.example.com/my_attribution_image.jpg</Attribute>
Recuerda que los colores del texto, el logotipo, la imagen del encabezado y otras muchas cosas pueden cambiar a lo largo del día según el momento el día. Puedes crear todos los diseños que quieras (ten en cuenta que los cambios realizados en horas nocturnas con frecuencia no se ven y que los usuarios podrían no llegar a ver algunas imágenes si incluyes demasiadas).
En los temas dinámicos se crean distintas máscaras para diferentes períodos de tiempo. Las máscaras deben estar completas, es decir, deben incluir todos los atributos necesarios. Utiliza la etiqueta <Trait> para especificar el período de tiempo aplicable a una determinada máscara. Por ejemplo:
<ConfigMap type="Skin">
<Trait name="TimeOfDay">12am-1am</Trait>
...attributes...
</ConfigMap>
<ConfigMap type="Skin">
<Trait name="TimeOfDay">1am-2am</Trait>
...attributes...
</ConfigMap>
....
Se admiten intervalos de tiempo comprendidos entre 12 a.m. y 12 a.m. Si la hora de finalización es anterior a la de inicio, se producirá un error al enviar el tema. Por ejemplo, supongamos que quieres especificar un intervalo de tiempo comprendido entre las 11 p.m. y las 5 a.m. Ese intervalo de tiempo no sería válido. Para que funcionase, tendrías que dividirlo en dos características (Traits), una con el valor 11 p.m. - 12 a.m. como hora del día (TimeOfDay) y otra con el valor 12 a.m - 5 a.m como hora del día (TimeOfDay).
Puedes ayudar a usuarios de todo el mundo a encontrar tu tema si incluyes campos de metadatos para países e idiomas concretos. Puedes localizar los siguientes campos:
title. Título que aparece en el directorio de temas.description. Descripción del tema y de su función. thumbnail. Las miniaturas que aparecen en el directorio de temas para ofrecer a los usuarios una vista previa de un tema. screenshot. Las capturas de pantalla que aparecen en el directorio de temas de la página de tu tema.Para localizar estos campos, incluye un <ConfigMap> adicional en tu archivo XML de temas para cada idioma y país que desees que sea compatible. Si hay un idioma o país que no está incluido en el tema, el directorio del tema utilizará de forma predeterminada el primer mapa de configuración (<ConfigMap>) que no tenga ningún idioma o país especificado. Por ejemplo:
<ConfigMaps>
<!-- These values are the defaults for all countries -->
<ConfigMap type="Skin">
<Meta name="title">Simple Theme</Meta>
<Meta name="description">Simple theme example.</Meta>
<Meta name="author">Rowan</Meta>
<Meta name="author_email">Rowan@gmail.com</Meta>
<Meta name="thumbnail">http://mysite.com/images/ig_thumb_beach.jpg</Meta>
<Meta name="screenshot">http://mysite.com/images/ig_screenshot_beach.jpg</Meta>
</ConfigMap>
<!-- Localized fields, which will replace the defaults for language ja, and country jp -->
<ConfigMap type="Skin">
<Trait name="Language">ja</Trait>
<Trait name="Country">jp</Trait>
<Meta name="title">単純なテーマ</Meta>
<Meta name="description">単純なテーマの例</Meta>
<Meta name="thumbnail">http://mysite.com/images/thumb_beach_jp.jpg</Meta>
<Meta name="screenshot">http://mysite.com/images/screenshot_beach_jp.jpg</Meta>
</ConfigMap>
No es obligatorio especificar un idioma y un país. Puedes únicamente especificar uno u otro. Por ejemplo, podrías crear un mapa de configuración (<ConfigMap>) para todos los francófonos o podrías crear un mapa de configuración (<ConfigMap>) que sólo se aplicara a los francófonos de Canadá. Esto depende de cómo desees dirigirte expresamente a una determinada audiencia.
Los valores válidos para Language son los códigos de idioma de dos dígitos ISO639-1, y para Country los códigos ISO 3166-1 alpha-2. Si deseas obtener una lista de idiomas y países compatibles con iGoogle, consulta Países e idiomas compatibles con iGoogle.
Puedes utilizar el API de temas para crear diseños sencillos para ti y para tus amigos. Sin embargo, a menos que un tema esté incluido en el directorio de temas de iGoogle, sólo podrás aplicarlo en "modo de prueba" a través de la URL, tal como se describe en Creación y prueba de temas. Para compartir tu tema con un mayor número de usuarios y hacer que puedan aplicar de forma continuada tu tema a iGoogle, deberás enviarlo al directorio de temas de iGoogle. Para que un tema se incluya en el directorio de temas de iGoogle, debe ser un diseño cuidado, atractivo y probado que cumpla las directrices especificadas en la política del programa. También debes incluir todos los campos de metadatos y asegurarte de que el acceso a todas las imágenes utilizadas en el tema sea público.
Una vez que el tema esté listo, podrás enviarlo a esta página. Una vez que Google acepte tu tema y lo incluya en el directorio de temas, tus imágenes se copiarán y alojarán en Google, de modo que no deberás de preocuparte del tráfico de tu host.
Si tienes problemas para enviar tu tema, asegúrate de que toda la sintaxis sea correcta y de que no haya líneas en blanco en tu archivo XML de temas. Si tienes alguna pregunta o comentario, visita el grupo del API de temas.
Si quieres realizar cambios en un tema que ya has enviado, sólo tienes que volver a enviarlo con la misma URL. El tema se actualizará en una o dos semanas.