![]() |
|
|
Página principal de la API Procedimientos iniciales para la API Documentación de la API Añade tu botón a la Galería Galería de botones |
Guía de creación de botones personalizados de la barra Google 4 para Internet ExplorerEn este documento se describe el procedimiento que se debe seguir para crear botones personalizados. Por ahora, estos sólo serán compatibles con Internet Explorer.Índice¿Qué es un botón personalizado?Un "botón personalizado" es un botón en el que se puede hacer clic y que puede añadirse a la barra Google. Asimismo, se caracteriza por incorporar capacidades personalizadas de navegación, búsqueda, envío y actualización. Este botón es compatible con el motor de búsqueda de prácticamente cualquier sitio web, no sólo el de Google. Al hacer clic en un botón de búsqueda, este permite:
Un botón personalizado puede presentar las siguientes características de interfaz:
Además de las propiedades de interfaz mencionadas, un botón personalizado puede presentar las siguientes características (en un archivo XML) para llevar a cabo las tareas anteriores:
En la siguiente barra Google aparecen resaltados ejemplos de botones personalizados de Slashdot, Wikipedia y BBC. El botón de BBC corresponde a un feed de noticias que ofrece una lista desplegable de titulares accesibles a través de la flecha hacia abajo.
Cómo añadir un botón personalizadoPara añadir o administrar un botón personalizado en la barra Google:
Cómo crear y añadir automáticamente un botón de búsqueda personalizado
Resultado: el botón de búsqueda en cuestión se instala y ya se puede utilizar. Por su parte, el proceso crea un archivo XML del botón personalizado con un icono y lo guarda bajo un nombre asociado en el directorio siguiente:
Este procedimiento presenta una ventaja frente a la creación manual del botón en tanto que resulta útil para sitios web que emplean solicitudes POST complejas o redireccionamientos que dificultan la identificación de Archivo XML del botón personalizado
Las propiedades y los comportamientos de un botón personalizado se definen en un archivo XML con el elemento
<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<site>http://www.wikipedia.org</site>
</button>
</custombuttons>
NOTA: Se permite añadir líneas y espacios nuevos en las cadenas de URL del archivo XML; la barra Google los extraerá cuando interprete el archivo. Esto significa que si la URL que introduces requiere espacios y, por lo tanto, no deben extraerse, reemplázalos por "%20", si el navegador no lo ha hecho. En la mayoría de los ejemplos siguientes se muestra la URL en dos líneas con una línea nueva entremedio, lo cual no supone problema alguno.
NOTA: En todos los ejemplos ilustrados en esta guía, sólo varía la parte del código XML que contiene el elemento
Creación e instalación manual de un botón personalizadoPara instalar un botón personalizado en la barra Google:
Cómo añadir un título y una descripción a un botón
Tal y como se indica a continuación,
Utiliza
<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<site>http://www.wikipedia.org</site>
<title>Wikipedia</title>
<description>The Free Encyclopedia</description>
</button>
</custombuttons>
Botón de búsqueda personalizadoLa barra Google también ofrece la posibilidad de crear un botón para buscar el término introducido en el cuadro de búsqueda de la misma mediante el motor de búsqueda de prácticamente cualquier sitio web. En los dos ejemplos siguientes se incluye un botón para realizar búsquedas en wikipedia.org mediante el motor de búsqueda de Wikipedia, y otro para efectuar búsquedas en Internet a través del motor de búsqueda de Google.
Para ello, añade un elemento de búsqueda en formato NOTA: El elemento Botón personalizado para realizar búsquedas en Wikipedia
Supongamos que quieres crear un botón para realizar búsquedas en wikipedia.com mediante el motor de búsqueda de Wikipedia; empieza con un término de consulta de lo más simple, por ejemplo, "perro":
<search>http://en.wikipedia.org/wiki/Special:Search?search=
Si añadimos este elemento de búsqueda al botón anterior, obtendremos el resultado siguiente:
<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<site>http://www.wikipedia.org</site>
<title>Wikipedia</title>
<description>The Free Encyclopedia</description>
<search>http://en.wikipedia.org/wiki/Special:Search?search=
Observa que se ha utilizado " Botón personalizado para la búsqueda en Google
Si deseas crear un botón para realizar búsquedas en Internet mediante el motor de búsqueda de Google, empieza con un término de consulta de lo más simple, por ejemplo, "perro":
<search>http://www.google.com/search?q={query}</search>
Ejemplo: Búsqueda en Slashdot
<search>http://slashdot.org/search.pl?query={query}</search>
Envío de acciones de búsqueda como consultas POST
Para enviar acciones de búsqueda como consultas POST en lugar de consultas GET, incluye el atributo Búsquedas en The OnionEn el siguiente ejemplo, utilizaremos el método POST para enviar datos POST (aparecen resaltados): <search method="post">http://www.theonion.com/content/search/node ?edit%5Bkeys%5D={query}</search> Actualización de un botón personalizadoLa URL de descarga que sirve para albergar el archivo XML del botón se convierte en el ID exclusivo para su posterior actualización. Si se produce un segundo intento de descargar un botón desde la misma URL, la barra Google te permitirá reemplazar el existente, pero no añadir uno nuevo.
De los cinco métodos para añadir un botón descritos anteriormente, el primero y el último detectan automáticamente la ubicación de las actualizaciones del botón, y se omite todo valor <update>http://buttons.com/updated_button.xml</update> Opciones de los botones
Un botón puede especificar una cadena de opción localmente definida mediante la etiqueta
<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<title>Weather</title>
<option>
<title>Zip code</title>
<description>Enter a US zip code. For example, 94043 is Mountain View, CA</description>
<default>94043</default>
</option>
<site>http://www.google.com/search?q=weather+{option1}</site>
</button>
</custombuttons>
El título de la opción es obligatorio, mientras que no lo son el valor predeterminado y la descripción. Para insertar el texto del usuario, utiliza la variable {option1} en cualquier especificación de plantilla de URL. En esta fase no se valida ni se eliminan espacios en blanco del texto introducido, y la variable {option1} inserta caracteres de escape en el texto introducido mediante parámetros de escape CGI y UTF-8, tal y como ocurriría en el cuadro de edición de texto al enviar un formulario. Inclusión de la URL actual
Además de enviar la consulta de búsqueda, también es posible especificar la URL que el navegador muestra en esos momentos de tres formas distintas: con codificación,
En los ejemplos siguientes, el elemento
<site>http://web.archive.org/web/*/
El ejemplo siguiente ilustra la misma búsqueda en archive.org, pero se utiliza
<site method="post">http://www.archive.org/searchresults.php?search=
Para que las búsquedas en el sitio web vigente las realice el motor de búsqueda de Google, utiliza
<search>http://www.google.com/search?q=site:
Inclusión del sufijo de dominio de Google
La barra Google dispone de una variable,
Te recomendamos emplear la variable
<search>http://www.google.
Envío de texto seleccionado por el usuarioUn botón personalizado también permite enviar el texto sin formato que el usuario seleccione en una página web. Esto podría resultar útil para un servicio de traducciones, o una aplicación de blogs o mensajes. Al seleccionar el texto, el botón muestra un pequeño icono de texto.
Esta operación exige el elemento
<send>http://www.google.com/search?hl=en&lr=&q=define%3A+
Los botones personalizados que incluyan operaciones de envío también aparecerán en el menú contextual que se activa al hacer clic con el botón derecho del ratón sobre el texto seleccionado. Comprobación de la existencia de variables
A medida que vayamos desarrollando la barra Google, se irán implementando más variables de URL. Para que estas nuevas variables sean totalmente compatibles con versiones futuras y anteriores, la sintaxis {param_to_be_tested?use this text if the param is implemented:use this text if not}
En resumen, permite al autor de un botón personalizado avanzado utilizar una nueva función de forma segura, y ofrece compatibilidad con analizadores anteriores que no conocen esta nueva función. Por ejemplo, si introducimos la variable {locale}, la plantilla de URL siguiente nos permitirá asegurarnos de que no es válida para versiones anteriores de la barra: <site>http://google.com/{locale??hl={locale}}</site>
Si la barra admite la variable {locale}, la URL sería: <site>http://google.com/?hl=en</site> Si no la admite: <site>http://google.com/</site>
Las expresiones <site>http://google.com/{locale??hl={domain?{domain}:{query}}}</site>
Cabe destacar también que si se utiliza un carácter de escape no reconocido por el sistema, el analizador sustituye la cadena vacía. Así pues, Hol{blah}a Mundo. resultará en Hola Mundo. Además, si se produce un número desigual de llaves "{' or '}", o cualquier otro conflicto de análisis, la URL se restablecerá a una cadena vacía. Cómo crear iconos atractivosLa mayoría de los iconos que se utilizan como iconos favoritos o "faviconos" pueden servir también como iconos de botones personalizados. Ello incluye imágenes BMP, ICO, GIF y JPEG de 16 x 16; tan sólo deberás codificarlas en texto ASCII mediante base64. En Internet encontrarás varios sitios para hacerlo de forma automática; haz clic aquí para acceder a uno de ellos. Una vez accedas al sitio en cuestión, utiliza el botón Browse…(Examinar...) para seleccionar el botón que deseas codificar. A continuación, haz clic en el botón Convert the source data (Convertir el código fuente) para iniciar el proceso. Los códigos JavaScript y PHP también ofrecen comandos de una línea para la codificación base64.
A continuación se ofrece un icono de Gmail codificado en base64, para el que se ha utilizado el elemento
<icon mode="base64" type="image/x-icon">
AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4ONr/ODja/6en+f+np/n/p6f5/6en+f+np/n/p6f5
/6en+f+np/n/p6f5/6en+f+np/n/p6f5/zg42v84ONr/ODja/zg42v/i4v//////////////////
/////////////////////////////////////+Li//84ONr/ODja/zg42v84ONr/p6f5/+Li////
/////////////////////////////////////////+Li//+np/n/ODja/zg42v84ONr/ODja/+Li
//+np/n/4uL/////////////gYHy/4GB8v///////////+Li//+np/n/4uL//zg42v84ONr/ODja
/zg42v//////4uL//6en+f+2tv//gYHy/1pa6f9aWun/gYHy/7a2//+np/n/4uL///////84ONr/
ODja/zg42v84ONr///////////+2tv//gYHy/1pa6f84ONr/ODja/1pa6f+BgfL/trb/////////
////ODja/zg42v84ONr/ODja////////////gYHy/1pa6f84ONr/trb//7a2//84ONr/Wlrp/4GB
8v///////////zg42v84ONr/ODja/zg42v//////gYHy/1pa6f84ONr/trb/////////////trb/
/zg42v9aWun/gYHy//////84ONr/ODja/zg42v84ONr/gYHy/1pa6f84ONr/trb/////////////
//////////+2tv//ODja/1pa6f+BgfL/ODja/zg42v84ONr/ODja/zg42v84ONr/trb/////////
/////////////////////////7a2//84ONr/ODja/zg42v84ONr/ODja/zg42v84ONr/gYHy/6en
+f+np/n/p6f5/6en+f+np/n/p6f5/6en+f+np/n/gYHy/zg42v84ONr/ODja/wAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAA//8AAP//AAD//wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAD//wAA//8AAA==
</icon>
Si bien es posible utilizar iconos superiores a 16 x 16, la barra los escalará a dicho tamaño; la imagen no sólo será más grande de lo necesario, sino que además no tendrá el aspecto que tendría si se escalara con un editor de imágenes de calidad. Los mejores iconos son los que se crean con 24 bits de color (RGB) y 8 bits de alpha, y se guardan como iconos RGBA de estilo XP. También puedes guardar el icono como PNG de 16 x 16 con transparencia alpha, convertirlo en un icono 16 x 16 de estilo XP mediante un programa como IconWorkshop y, a continuación, codificarlo en base64. Los archivos PNG no son compatibles directamente, ya que Windows no los admite de forma nativa sin antes enlazar varios elementos. La razón por la que debe emplearse un canal alpha es que no todos los fondos de las barras Google serán del mismo color gris, plateado o beige. Windows XP permite al usuario personalizar los colores, incluido el fondo de las barras de herramientas. Otra opción es crear un icono cuadrado sin ninguna transparencia, aunque no resulta igual de atractivo. Las imágenes creadas con canales alpha de un solo color, como las imágenes GIF, presentarán bordes redondeados y granulados; en cambio, el aspecto que ofrecen los iconos basados en canales alpha con una mezcla de colores, como los de la barra Google o Internet Explorer, es inmejorable. Actualización automática de los iconos y las descripcionesUna de las prestaciones más interesantes de un botón personalizado es su capacidad para actualizar su imagen y descripción mediante un servidor remoto, basándose en intervalos especificados. El proceso de actualización se sirve de un feed RSS. Gracias a esta característica, el botón hace las veces de notificador o informador, por ejemplo, en el caso de un botón que ofrezca la previsión meteorológica. El botón también puede incluir un menú desplegable que, a su vez, ofrezca elementos independientes con texto o iconos. Por su parte, cada elemento de menú puede tener una URL dinámica propia, que se ejecuta al hacer clic en él. En la sección siguiente encontrarás ejemplos ilustrativos de ello. Cómo añadir un feed RSS
Los feeds RSS utilizan el elemento <feed refresh-interval="1800">http://rss.cnn.com/rss/cnn_topstories.rss</feed> El protocolo para obtener la actualización de estos feeds es Atom 1.0, Atom 0.3, RSS 2.0 o RSS 1.0. Los feeds estándar también suelen ser válidos. Actualización del icono y de la descripción de un botón mediante un feedPara cambiar el icono o la descripción de un botón de la barra Google a partir de un feed, habrá que añadir una extensión específica de dicha barra al feed RSS o ATOM mediante un espacio de nombre. A continuación se ofrece el ejemplo de un botón de anillo sobre el estado de ánimo que se actualiza a partir de un feed: <?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<title>Mood ring</title>
<description>Your virtual mood ring</description>
<site>http://www.google.com/search?q=mood+ring</site>
<feed menu="false" refresh-interval="900">
http://www.example.com/custombuttons/samples/feeds/mood</feed>
</button>
</custombuttons>
Observa que se especifica Si esto se ejecutara en un servidor real, el resultado del feed sería parecido al siguiente: <?xml version='1.0'?>
<feed xmlns='http://www.w3.org/2005/Atom'
xmlns:gtb='http://toolbar.google.com/custombuttons/'>
<id>http://www.example.com/custombuttons/samples/feeds/mood</id>
<title>Mood</title>
<link href='http://www.google.com/search?q=+ring' />
<link rel='self'
href='http://www.example.com/custombuttons/samples/feeds/mood' />
<gtb:description>Bluegreen:
Inner emotions charged, somewhat relaxed</gtb:description>
<gtb:icon mode="base64" type="image/x-icon">
AAAAAAMAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAwAAAAMAA
AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAA
AAAAAAAAAAAGAAAAHAAAAEAAAABhAAAAcwAAAHQAAABpAAAAVQAAAD4AAAApAAAAGAAAAAoAAAAD
AAAAAQAAAAAAAAAAAAAAESZIXl4zdJvAXbHS8m3C3f9LnrrLFUtsmwILEX4AAABzAAAAYQAAAEcA
AAAqAAAAEwAAAAcAAAACAAAAACs9RTNOjrDtW6nS/53u/f+n/P//hej//2bP/P9Fq93wHGaNrxEv
O4kAAAB6AAAAXwAAADwAAAAfAAAADAAAAANihaWST6XK/0h/kcAdKCyWKTtAgVJ/kIhytNKse873
9E+w6v9RuN39SXuJpgQHCIoAAAB2AAAAUQAAACsAAAAPb6nU7mK65v9jqs76KkNPqAUICJoAAACE
AAAAaxUgJWBkrMiwsvv+//D+/v+y1NniIj1FnAAAAIgAAABcAAAALHS74PV1zPn/c835/1Oezv9N
iq7vNVRjrxUiJ5kBAgORAQICh3uLjZz3+vr1+f///4PL5/wvVmusAAAAigAAAFNyu+TPdtL8/0Cp
7v8ng8X/CFOH/ytpjv86gJ//R46z+Th6jsovVmCsd56pxNf2/f9TuPH/W7fs/ypGV6UAAAByf77Y
r02y7P9Zwfb/puH3/y+AtP8jZ5f/KWKH/0p7hP+ZrVr/zcUt/9vMKf/bzSz/tsBP/3OzrP9kl7Pp
AAAAgHGdpThatuT/0fn+//b///+V0uv/NICu/4mvfP/czjL/3M0v/9rMKP/dzzT/3c83/9vNLf/b
zS//nrWA/gAAAIMAMzMFbrrd2d/+///5////t+n6/4q6nf/czzX/3tA+/97QPf/czjP/3dA7/97R
Qv/czjD/3M4z/9DHLPoAAAB/AAAAAWShtUix5+//5v7+/5Hf7//Bvjn/3M0v/9/SSP/g1FL/39RR
/+DVWv/e0kf/3tFA/9zNL//bzCj/AAAAbwAAAAAAAAADcq7Fmpzo8f9rsL3/2ssl/93POf/f0kj/
49pu/+ffhP/q45b/49pp/97SSv/czS//yb0q4wAAAE8AAAAAAAAAAF54hhNrq77BXpCj/7+7Of/c
zjH/3tFH/+bdeP/w7cv/9PLa/+zlnf/g1VP/1so5/mBfJHsAAAArAAAAAAAAAAAAAAABa5GgIHWs
t/dymG3/3tE//9/UUv/o4Ij/9PHT//v67P/v6a3/08xY/3uMX6UAAAAuAAAAEAAAAAAAAAAAAAAA
AAAAAAKSvb9YSoWa+WyagP+wv2X/4NRO/+ngfv/m4Zf/rLeB+lpubIkAAAAlAAAADgAAAAMAAAAA
AAAAAAAAAAAAAAAAAAAAAoqvuDxkkp2gYo+c51mHkv9lk5v/Y4eNtlBfaEgAAAAWAAAACQAAAAIA
AAAAAAMAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAwAAAAMAA
AADgAAAA8AEAAA==
</gtb:icon>
</feed>
El ejemplo anterior ilustra un feed Atom 1.0, cuyo espacio de nombre de los botones personalizados de Google se especifica de la manera siguiente: xmlns:gtb='http://toolbar.google.com/custombuttons/' Para sobrescribir la descripción que incorporaba el botón, escribe: <gtb:description> new-description </gtb:description> Para sobrescribir el icono que incorporaba el botón, escribe: <gtb:icon> icon-base64-code </gtb:icon> La secuencia de comandos PHP que ejecuta este complejo sistema de análisis de "estado de ánimo" es parecida a la siguiente: <?php
header('Content-type: text/xml');
switch(rand(1, 7)) {
case 1:
$icon = "amber.ico";
$desc = "Amber:\nNervous, on edge, uncertain";
break;
case 2:
$icon = "black.ico";
$desc = "Black:\nTense, stressed, working too hard";
break;
case 3:
$icon = "blue.ico";
$desc = "Blue:\nComfortable, breeze, at rest, loveable";
break;
case 4:
$icon = "bluegreen.ico";
$desc = "Bluegreen:\nHeightened inner emotional state, moderately relaxed";
break;
case 5:
$icon = "gray.ico";
$desc = "Gray:\nAnxious, ill at ease, strained";
break;
case 6:
$icon = "green.ico";
$desc = "Green:\nSteady, stable, no emotional turmoil";
brea;
case 7:
$icon = "purple.ico";
$desc = "Dark Blue:\nImpassioned, delighted, whiff of romance";
break;
}
$icon = base64_encode(file_get_contents($icon));
echo "<?xml version='1.0'?>";
echo "\n<feed xmlns='http://www.w3.org/2005/Atom' xmlns:gtb='http://toolbar.google.com/custombuttons/'>";
echo "\n<id>http://www.example.com/custombuttons/samples/feeds/mood</id>";
echo "\n<title>Mood</title>";
echo "\n<link href='http://www.google.com/search?q=$mood+ring' />";
echo "\n<link rel='self' href='http://www.example.com/custombuttons/samples/feeds/mood' />";
echo "\n<gtb:description>$desc</gtb:description>";
echo "\n<gtb:icon mode='base64' type='image/x-icon'>$icon</gtb:icon>";
echo "\n</feed>";
?>
Los iconos deben almacenarse en la misma carpeta que la secuencia de comandos. Actualización de los iconos del botón y del menú desplegable mediante un feed
También es posible añadir iconos personalizados basados en servidor a los elementos del menú desplegable de feeds. A continuación, se ofrece el ejemplo de un botón de previsión meteorológica que consta de un feed con un menú desplegable (valor predeterminado), y que además incluye
<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<title>Weather 94043</title>
<description>Weather updates for Mountain View, CA</description>
<site>http://www.google.com/search?q=weather+94043&num=1</site>
<feed refresh-interval="3600" refresh-menuitem="false">
http://www.example.com/custombuttons/samples/feeds/weather?zip=94043</feed>
</button>
</custombuttons>
A continuación, se proporciona una muestra del aspecto que tiene un feed sobre previsión meteorológica, con un icono personalizado junto a cada uno de los elementos del menú desplegable; para mayor claridad, se ha eliminado gran parte de la codificación base64 del icono. Si retomamos el ejemplo anterior, esta sería la página de visualización: <?xml version='1.0'?>
<feed xmlns='http://www.w3.org/2005/Atom'
xmlns:gtb='http://toolbar.google.com/custombuttons/'>
<id>http://www.example.com/custombuttons/samples/feeds/weather</id>
<title>Weather Mountain View, CA</title>
<link href='http://www.google.com/search?q=weather+94043/' />
<link rel='self'
href='http://www.example.com/custombuttons/samples/feeds/weather' />
<gtb:description>Mountain View, CA
63F Mostly Cloudy
Humidity: 48%
Wind: NW at 8 mph</gtb:description>
<gtb:icon mode='base64' type='image/x-icon'>
R0lGODlhKAAoANUAAEuc/Pz8/Fik/Ii00k9daZGPivLy8tbW1k2R0uvr6wZj3HSq0f/QMMfHx7a2
tj2F0fu0EePj4yx81neUp4J/eKanphJq3IJtOGB3iI3C5BFt5B5XnWis7H2346jO5/6+IWKo8923
... and so on...
</gtb:icon>
<entry>
<title>Today: Mostly Cloudy 65 | 50</title>
<link href='http://www.google.com/search?q=weather+94043/' />
<id>http://www.example.com/custombuttons/samples/feeds/weather/0</id>
<gtb:icon mode='base64' type='image/x-icon'>
R0lGODlhKAAoANUAAEuc/Pz8/Fik/Ii00k9daZGPivLy8tbW1k2R0uvr6wZj3HSq0f/QMMfHx7a2
tj2F0fu0EePj4yx81neUp4J/eKanphJq3IJtOGB3iI3C5BFt5B5XnWis7H2346jO5/6+IWKo8923
... and so on...
</entry>
<entry>
<title>Thu: 66 | 51</title>
<link href='http://www.google.com/search?q=weather+94043/' />
<id>http://www.example.com/custombuttons/samples/feeds/weather/1</id>
<gtb:icon mode='base64' type='image/x-icon'>
R0lGODlhKAAoAPcAAAAAAP///4WOwPT1+tDT3unr8sHG1ff5/6Wy0mZ8rGqAr3mJrJakxa+zvHSK
tcDBw1R2slBql110njBXjztmqS9OfjtekTZWhGeJuoqctklLTgJYyQJQtQ9hzhRr3BZlzBVRoS1S
... and so on...
</gtb:icon>
</entry>
<entry>
<title>Fri: 67 | 51</title>
<link href='http://www.google.com/search?q=weather+94043/' />
<id>http://www.example.com/custombuttons/samples/feeds/weather/2</id>
<gtb:icon mode='base64' type='image/x-icon'>
R0lGODlhKAAoANUAAObm52ms7k2Q0Uuc/Fmk+v2zDoS01HOp0avP5tvb26CPXQZj3DqG14yLh05Y
Yf/IKv/VN3mCiMPDw6SkpCt82GhxePz8/JG+2pd5NRZu3hBq3fb29rCAFrm5uSN549OWE4WltqHI
... and so on...
</gtb:icon>
</entry>
<entry>
<title>Sat: 67 | 50</title>
<link href='http://www.google.com/search?q=weather+94043/' />
<id>http://www.example.com/custombuttons/samples/feeds/weather/3</id>
<gtb:icon mode='base64' type='image/x-icon'>
R0lGODlhKAAoANUAAObm52ms7k2Q0Uuc/Fmk+v2zDoS01HOp0avP5tvb26CPXQZj3DqG14yLh05Y
Yf/IKv/VN3mCiMPDw6SkpCt82GhxePz8/JG+2pd5NRZu3hBq3fb29rCAFrm5uSN549OWE4WltqHI
... and so on...
</gtb:icon>
</entry>
</feed>
El código PHP que ejecuta esta secuencia de comandos emplea el formato de respuesta de previsión meteorológica. <?php
// Script to convert Google xml weather interface to custom buttons AtomFeed 1.0
// Sample input at http://www.google.com/ig/api?weather=94043
// To see sample output, run this script with ?zip=94043
$zip = $_GET['zip'];
header('Content-type: text/xml');
// http://www.google.com/ig/api?weather=94043
$dom= domxml_open_file("http://www.google.com/ig/api?weather=$zip");
$xpath = xpath_new_context($dom);
// $params = $dom->documentElement->firstChild->getElementsByTagName('param');
$temp = $xpath->xpath_eval('//city/@data');
$city = $temp->nodeset[0]->value;
$icons = $xpath->xpath_eval('//current_conditions/icon/@data');
$icon_url = $icons->nodeset[0]->value;
$icon = base64_encode(file_get_contents("http://www.google.com$icon_url"));
$conditions = $xpath->xpath_eval('//current_conditions/condition/@data');
$condition = $conditions->nodeset[0]->value;
$temp = $xpath->xpath_eval('//current_conditions/temp_f/@data');
$tempf = $temp->nodeset[0]->value;
$temp = $xpath->xpath_eval('//current_conditions/humidity/@data');
$humidity = $temp->nodeset[0]->value;
$temp = $xpath->xpath_eval('//current_conditions/wind_condition/@data');
$wind = $temp->nodeset[0]->value;
echo "<?xml version='1.0'?>";
echo "\n<feed xmlns='http://www.w3.org/2005/Atom' ";
echo "xmlns:gtb='http://toolbar.google.com/custombuttons/'>";
echo "\n<id>http://www.example.com/custombuttons/samples/feeds/weather</id>";
echo "\n<title>Weather $city</title>";
echo "\n<link href='http://www.google.com/search?q=weather+$zip/' />";
echo "\n<link rel='self' href='http://www.example.com/custombuttons/";
echo "samples/feeds/weather' />";
echo "\n<gtb:description>$city\n$tempfF $condition\n$humidity\n$wind";
echo "</gtb:description>";
echo "\n<gtb:icon mode='base64' type='image/x-icon'>$icon</gtb:icon>";
$days = $xpath->xpath_eval('//forecast_conditions/day_of_week/@data');
$conditions = $xpath->xpath_eval('//forecast_conditions/condition/@data');
$icons = $xpath->xpath_eval('//forecast_conditions/icon/@data');
$highs = $xpath->xpath_eval('//forecast_conditions/high/@data');
$lows = $xpath->xpath_eval('//forecast_conditions/low/@data');
for ($i = 0; $i < count($conditions->nodeset); $i++) {
$day_of_week = $days->nodeset[$i]->value;
$condition = $conditions->nodeset[$i]->value;
$high = $highs->nodeset[$i]->value;
$low = $lows->nodeset[$i]->value;
echo "\n<entry>";
echo "\n<title>$day_of_week: $condition $high | $low</title>";
echo "\n<link href='http://www.google.com/search?q=weather+$zip/' />";
echo "\n<id>http://www.example.com/custombuttons/samples/feeds/weather/$i</id>";
$icon_url = $icons->nodeset[$i]->value;
$icon = base64_encode(file_get_contents("http://www.google.com$icon_url"));
echo "\n<gtb:icon mode='base64' type='image/x-icon'>$icon</gtb:icon>";
echo "\n</entry>";
}
echo "\n</feed>";
?>
Se puede utilizar el mismo espacio de nombre "http://toolbar.google.com/custombuttons/" y descripción o etiquetas de icono de los feeds RSS 1.0, RSS 2.0, Atom 1.0 y Atom 0.3 para los feeds de la barra Google. Varios idiomasUn botón personalizado admite URL, iconos y texto alternativo específico de las distintas configuraciones regionales compatibles con la barra Google. Aunque existen dos procedimientos, se recomienda emplear el primero, que se detalla a continuación. Atributo locale
El método recomendado es crear una lista de etiquetas XML, donde cada una de ellas utiliza el atributo <?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<title>Wikipedia</title>
<site>http://www.wikipedia.org</site>
<site locale="fr">http://fr.wikipedia.org</site>
<site locale="es">http://es.wikipedia.org</site>
<description>The Free Encyclopedia</description>
<description locale="fr">L'encyclopdie libre</description>
<description locale="es">La enciclopedia libre</description>
</button>
</custombuttons>
Si la configuración regional del idioma de la barra no se encuentra directamente en la etiqueta XML, se utilizará como predeterminada la primera etiqueta de la lista anterior. Variable {locale}
Como alternativa, te proponemos utilizar la variable Tabla ISO de nomenclatura de configuraciones regionalesA continuación se enumeran las configuraciones regionales admitidas por la barra Google:
Alojamiento de un botónLa URL de descarga que utilices para albergar el archivo XML del botón es bastante importante, ya que se convierte en el ID exclusivo del botón para su posterior actualización. Si se produce un segundo intento de descargar un botón desde la misma URL, la barra Google te permitirá reemplazar el existente, pero no añadir uno nuevo. Para obtener más información al respecto, consulta el apartado Actualización de un botón personalizado. Cómo añadir un botón a la Galería de botones de GoogleGracias a la Galería de botones de Google, podrás ofrecer tu nuevo botón al resto de usuarios. El archivo XML correspondiente debe estar alojado en alguna ubicación, a la cual enlazará directamente la Galería de botones. Además, el botón debe cumplir con nuestras directrices editoriales. Si el botón que has creado es de un sitio tuyo, deberás alojar el archivo XML en el mismo dominio. En la Galería de botones de Google, los botones que se alojan en el mismo dominio al que este accede, aparecen marcados como "botón oficial", lo que facilita a los usuarios poder encontrar el botón oficial de tu sitio. Cuando hayas terminado, rellena el formulario de envío de la Galería para informar a Google sobre tu botón. Cómo enlazar tu sitio a tu botónSi deseas que el botón esté disponible en tu sitio, crea un vínculo de instalación. Cuando un usuario de la barra Google 4 haga clic en dicho vínculo, se le solicitará si desea instalarlo. Si la versión de la barra que tiene instalada es incompatible, el vínculo redireccionará el sistema a la página de descarga de la aplicación. La sintaxis de URL siguiente permite a un programador crear un vínculo de instalación: http://toolbar.google.com/buttons/add?url=url
donde url señala el archivo XML del botón personalizado. A continuación se muestra un ejemplo de vínculo para instalar el botón Slashdot.com: <a href="http://toolbar.google.com/buttons/add?url=http://www.slashdot.org/slashdot_button.xml">Add</a> La etiqueta de este vínculo es Añadir. Cuando un usuario haga clic en este vínculo, el botón Slashdot.com se instalará en su barra Google. La URL de Google anterior sirve básicamente para activar la instalación de cualquier botón personalizado por parte de la barra. Si la versión que tiene instalada el usuario es incompatible con esta acción, el sistema le solicitará que instale una versión válida. Una vez instalada la barra, el botón personalizado se añadirá de forma automática. Administración del tráfico de un feedEl tráfico web que generan los feeds puede convertirse en un problema. El feed del botón que crees no debería señalar a un servidor de banda ancha de baja capacidad, sobre todo si tienes la certeza de que será muy popular y que, por lo tanto, generará un volumen considerable de tráfico. El servidor podría sobrecargarse debido a las consultas de actualización. El botón personalizado dispone de un atributo para feeds propio, refresh-interval. La barra Google concede el tiempo definido en Expires que el servidor proporciona en la cabecera HTTP. Este ajuste sobrescribirá el atributo refresh-interval del botón. De sobrecargarse el servidor, podrías aumentar el tiempo de Expires para así reducir dicho flujo. Por ejemplo, si el botón debe actualizarse cada hora, el valor de Expires podría establecerse en una vez al día, lo que reduciría considerablemente el tráfico, en detrimento, obviamente, de la capacidad de renovación del botón.
A continuación, se ofrece la secuencia de comandos PHP para definir
<?php
$expires = gmdate("D, d M Y H:i:s", time() + 3600 * 24 * 7) . " GMT";
Header("Expires: " . $expires);
?>
Ejemplo de respuesta HTTP del servidor: HTTP/1.1 200 OK Date: Thu, 05 Jan 2006 23:39:54 GMT Server: Apache/2.0.47 (Red Hat Linux) Accept-Ranges: bytes X-Powered-By: PHP/4.3.2 Expires: Thu, 12 Jan 2006 23:39:54 GMT Transfer-Encoding: chunked Content-Type: text/htmlReferencia Referencia XMLEl archivo XML de un botón personalizado presenta la estructura siguiente:
<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<!-- XML elements -->
</button>
</custombuttons>
Los siguientes elementos XML pueden aparecer en el elemento
Caracteres de escapeLas cadenas de los archivos XML, y HTML, deben contener los tres caracteres de escape siguientes, como las entidades HTML que se muestran:
Referencia de variables
NOTA: Existe la sintaxis condicional
Las variables siguientes, o parámetros de escape, se utilizan en los elementos del ámbito especificado. Por ejemplo,
|