|
Añade un botón del sitio -->
Tutorial de Blogger en Firefox: abril 2011
Crear un botón con tu foto en la barra de Google
Vas a crear un botón con tu foto en la barra de Google para visualizar y actualizar las entradas de tu blog, para lo cual dentro del código html del botón, debes hacer 3 cosas, crear un icono con tu foto, enlazar ese botón al feed de tu blog que ya lo creaste en la práctica anterior y realizar un enlace a tu blog. Los pasos a seguir son: Tienes que tener la barra de Google instalada en el navegador. Ir a opciones de la barra de Google --- Botones personalizados --- Añadir más botones --- Documentación de la API. Los siguientes 4 apartados, debes leerlos con atención para que tengas una idea del proceso a realizar, en el apartado 7 ya nos ponemos manos a la obra. Las propiedades y los comportamientos de un botón personalizado se definen en un archivo XML con el elemento <custombuttons>, parecido a las etiquetas html estudiadas en prácticas anteriores, cuyo espacio de nombre se establece en "http://toolbar.google.com/custombuttons/" junto con el elemento <button> anidado. El botón personalizado más simple utiliza <site>, que define el vínculo de un sitio web. El siguiente código XML genera un botón que, al hacer clic en él, abre la página http://www.wikipedia.org en la ventana vigente del navegador: <?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<site>http://www.wikipedia.org</site>
</button>
</custombuttons>Cómo añadir un título y una descripción a un botón
Tal y como se indica a continuación, <title> sirve para añadir un título a un botón. El título, que puede aparecer a la derecha del botón (Configuración > Opciones > Más > Etiquetas con el texto de los botones > Todo el texto), permite identificarlo en la lista de botones personalizados (Configuración > Opciones > Botones personalizados).
Utiliza <description> para añadir una descripción del botón.
<?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>
- Cómo añadir un feed Rss Los feeds RSS utilizan el elemento
<feed>. A continuación se muestra un ejemplo de un feed de noticias de la CNN: <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.
Cómo crear un icono con tu imagen:
La 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>:
<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. Si has tenido paciencia para llegar aquí, la cuestión no es tan difícil, primero vas a crear un icono con tu foto: Abrimos la imagen con Gimp. Recortamos el rostro: Herramientas --- Herramientas de selección --- Selección rectangular --- y marcamos el rostro --- Pulsamos con el botón derecho encima de la imagen --- Recortar a la selección, y ya tenemos el rostro recortado. Vamos a darle a la imagen el tamaño de 24 x 24 pixel: pulsamos encima de la imagen con el botón derecho --- Imagen --- Escalar la imagen --- pulsamos con el ratón en la cadena para separar la altura y anchura --- ponemos 24 en altura y 24 en anchura --- Escala. Ya tenemos la imagen a 24 x 24 ahora la vamos a guardar como un icono de Windows: Archivo --- Guardar como --- en tipo elegimos icono de Microsoft Windows, extensión ico y lo guardamos en Mis documentos.
Ahora vamos a codificarlo en texto ASCII mediante base64: Haz clic aquí--- pulsa en Examinar y elige el icono con tu foto --- pulsa en Convert the source data --- y copia todo el texto que sale en la primera ventana en el bloc de notas y lo guardas con el nombre icono-mio.txt, debe salir algo parecido a esto:
AAABAAEAGBgAAAEAGABIBwAAFgAAACgAAAAYAAAAMAAAAAEAGAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAC9Wje+XUG7Vy+6Vji2VjexUC6zXDqOVT6NaV5/bHl9dIZ6dIJ7dINpZnpdXXFxYW22ZVLc
knHGiGTs38PcwovkoGL64avp1rW7XjzBY0O8Vji4VjSwVC/EYDvAZUKEYE1sX2B+aW+FcXaQgoiQ
gYeBdX9mY3NTU2R5WVy5bFPcq4jaxq/w1Zvmv4Pno2379cu+Xj6+Y0W1XD+vVjWvVjawWz14RTZa
TVNoWV+Da2qMdHK8oaH129fYvrujjJNybHpRSl2eXVfmuJ7iv5L34rPpzJbopWb+7aa+ZkPCakS6
XjqyVTS6Yj2ITDRbSkttX2N8anZ9bX+Bc4ihiJvmzdX/+fj06unZxMl2a3lzUlzKppXn1Z749crf
1Zrq0pnt25/BbkjBZ0u5ZEaxWT2yY0ZiQjxvYmtwZHJtZn1zbYaBc4+ljKbdvMr+6u3/9PP///+0
srR2WFnXvar9+dr59sb49sD//s//6trvzGbcqlCUazujZ06XYlBmVFZrZHNsZHVuYnl1ZHuBan+p
iaHluc3YrcCri5vez9Tp5OaRfHvWx7nk17vPuaa5oJeHcm+EcGvoyobbrmReURuNiHpza2xuZnJx
ZnNmV2JkUV9kTltqUV6EaHGlhIeWd3ivlJTYwL758fH38vOyn5xyZWNcTkRoZFuAh4KPkpDrxnjg
pVBqVhmJgXhpY21oX3NWR1ZQQ0xVT1JlV1pzW12fe3a9k4qafHqNeoKqmqnt5u7////GuLeKhIRi
V1BrYF6Jj4qHi4rv0Y/uvXd1WiWKgHlrantucJBoZodSTWtZUGpmW3aHd5fGs8fFt76Kf5V8c5jC
t9X59fz////Y0dOclJFuYl1gWVaGjouGj4jx2aLz0KeIYTqJfXdtboVveZxyeaJwc59kZYxlZo2L
hbXf1O7p5eeqo7u7q9Hq1u377vf//P7//v+tnJ1uX15YVFR/g3trbGfp3prw2aCPcUNTTUZuc4xr
dphucpRsb5Bobo1fZ4l/gqnZ1er37vO/sMaklLXNudT46/f////v5ubeysB8amNSSkVuZF43Jy3f
2d3O2cxjblpGPT9hZ4FcZYFsbIRxbIVyaIJjY4FpdZmyuNKxq7yAdY6PfJXWxtP9+Pr////k3d3W
sqDNn4CTe2pYX2FOWFePlJuDkZozKipBMzdaV2hYU2RXT1tjU1pkVmBgXGprcISHjqeBgJhvZ3pl
WmiLeYPQvbz++vXQz864lovowpzV0rOJoJh2kpXX0tGFhIQ0KCU7MTZRT11GQ1VDPkhJQkhRSk9g
V2FwbX5/fZhvaYBhWGZuZXGReIDYvrj//PTW09Kvopvq2rzcyauSl4qAhXrUy8x1Y2Q7LCtBNDdO
Ul9TYH5UY4JdbYtufpx8ial+jbB+j7eAkbmRnMLKv+L36vj+/P7////l3t/Trp7179Lo38qJdm1/
Z12yp6lYTEo/LC5CMzdNS1RYY39XbpFheZ1rgap4irOAj7aFkbiIlLyWocnHvuL27vr////////s
4eGvkIbv5MXx7NSUg3F+dGu3sa2ejYo6Kyo7LDA/OD1RWG1WbY5bdphpfaN0hq5+kbaDk7mHlL2V
oMjKw+X48vv///////+smZyyhHL458DVxrBiRThnPiyXjIh3b204LTI0KTA1Jys5MTpNVGZSaYpZ
dp1lhKxtjbV6lb6Ln8eisNPMz+/18v/29fqyq7V/ZmTLpoXx5MVcV1BEMDFNLyeVios9MTg3OEAz
MDsyKzE0Ky46MTVCRE9LWG5RZ4NbdJprgqqJm7+xudTEyN6ytsyBfo5gVViCaF3n0ru4p4dVS0RD
QEVEQEFBRF5ETGlVTmdbUWVDQE4yMjgyLTE3Li9CNTRRQUNSSE9PTlhdYGd1cXJ6cnF4ZmNgTkdr
XFXAoozpyqXBr5WPjH11d29fZ2TSy9/i4Ova09qGeX6Nentqdno4O0Q8Nj1ANThKODdgSEF7WEiN
YE2gdmLEn3/kuYyjiGeUfnmzoZy+uaSlp5eeqp2IjogrNT348fa8usalqLmIc3yAZ1+LtrmFjZBd
Xl5KS1NUTlJcTkxoU014XFKdcWDXqpDGqo6VkI5WZn5hbYRla2x8gn6hpJhiaGMnMDv++v6ytLOA
jZN9cXmCYleKsrCTpql3fYVXV2qKgIy5rKulm5GMg3ePgnagkYKZk4FdY1dKT1lucn9tb2mTmoyS
lYQ2PTwqKzX++/2rqquAjZl4and+W059pKOGoah0f4Q8RlaQkJv//////fa0raCHfnWHgXxgWlVD
SFA/Ql46MDloXFeXlIRgYlgqKCsrKTEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAA= Por último vamos a crear el fichero del botón personalizado con el bloc de notas, el 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>
<site>http://bgallardoe.blogspot.com/</site>
<title>Tutorial de Blogger en Firefox</title>
<description>Blog para experimentar con los elementos tecnológicos que
puede incorporar Blogger con la plantilla clásica</description>
<icon mode="base64">
AAABAAEAGBgAAAEAGABIBwAAFgAAACgAAAAYAAAAMAAAAAEAGAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAC9Wje+XUG7Vy+6Vji2VjexUC6zXDqOVT6NaV5/bHl9dIZ6dIJ7dINpZnpdXXFxYW22ZVLc
knHGiGTs38PcwovkoGL64avp1rW7XjzBY0O8Vji4VjSwVC/EYDvAZUKEYE1sX2B+aW+FcXaQgoiQ
gYeBdX9mY3NTU2R5WVy5bFPcq4jaxq/w1Zvmv4Pno2379cu+Xj6+Y0W1XD+vVjWvVjawWz14RTZa
TVNoWV+Da2qMdHK8oaH129fYvrujjJNybHpRSl2eXVfmuJ7iv5L34rPpzJbopWb+7aa+ZkPCakS6
XjqyVTS6Yj2ITDRbSkttX2N8anZ9bX+Bc4ihiJvmzdX/+fj06unZxMl2a3lzUlzKppXn1Z749crf
1Zrq0pnt25/BbkjBZ0u5ZEaxWT2yY0ZiQjxvYmtwZHJtZn1zbYaBc4+ljKbdvMr+6u3/9PP///+0
srR2WFnXvar9+dr59sb49sD//s//6trvzGbcqlCUazujZ06XYlBmVFZrZHNsZHVuYnl1ZHuBan+p
iaHluc3YrcCri5vez9Tp5OaRfHvWx7nk17vPuaa5oJeHcm+EcGvoyobbrmReURuNiHpza2xuZnJx
ZnNmV2JkUV9kTltqUV6EaHGlhIeWd3ivlJTYwL758fH38vOyn5xyZWNcTkRoZFuAh4KPkpDrxnjg
pVBqVhmJgXhpY21oX3NWR1ZQQ0xVT1JlV1pzW12fe3a9k4qafHqNeoKqmqnt5u7////GuLeKhIRi
V1BrYF6Jj4qHi4rv0Y/uvXd1WiWKgHlrantucJBoZodSTWtZUGpmW3aHd5fGs8fFt76Kf5V8c5jC
t9X59fz////Y0dOclJFuYl1gWVaGjouGj4jx2aLz0KeIYTqJfXdtboVveZxyeaJwc59kZYxlZo2L
hbXf1O7p5eeqo7u7q9Hq1u377vf//P7//v+tnJ1uX15YVFR/g3trbGfp3prw2aCPcUNTTUZuc4xr
dphucpRsb5Bobo1fZ4l/gqnZ1er37vO/sMaklLXNudT46/f////v5ubeysB8amNSSkVuZF43Jy3f
2d3O2cxjblpGPT9hZ4FcZYFsbIRxbIVyaIJjY4FpdZmyuNKxq7yAdY6PfJXWxtP9+Pr////k3d3W
sqDNn4CTe2pYX2FOWFePlJuDkZozKipBMzdaV2hYU2RXT1tjU1pkVmBgXGprcISHjqeBgJhvZ3pl
WmiLeYPQvbz++vXQz864lovowpzV0rOJoJh2kpXX0tGFhIQ0KCU7MTZRT11GQ1VDPkhJQkhRSk9g
V2FwbX5/fZhvaYBhWGZuZXGReIDYvrj//PTW09Kvopvq2rzcyauSl4qAhXrUy8x1Y2Q7LCtBNDdO
Ul9TYH5UY4JdbYtufpx8ial+jbB+j7eAkbmRnMLKv+L36vj+/P7////l3t/Trp7179Lo38qJdm1/
Z12yp6lYTEo/LC5CMzdNS1RYY39XbpFheZ1rgap4irOAj7aFkbiIlLyWocnHvuL27vr////////s
4eGvkIbv5MXx7NSUg3F+dGu3sa2ejYo6Kyo7LDA/OD1RWG1WbY5bdphpfaN0hq5+kbaDk7mHlL2V
oMjKw+X48vv///////+smZyyhHL458DVxrBiRThnPiyXjIh3b204LTI0KTA1Jys5MTpNVGZSaYpZ
dp1lhKxtjbV6lb6Ln8eisNPMz+/18v/29fqyq7V/ZmTLpoXx5MVcV1BEMDFNLyeVios9MTg3OEAz
MDsyKzE0Ky46MTVCRE9LWG5RZ4NbdJprgqqJm7+xudTEyN6ytsyBfo5gVViCaF3n0ru4p4dVS0RD
QEVEQEFBRF5ETGlVTmdbUWVDQE4yMjgyLTE3Li9CNTRRQUNSSE9PTlhdYGd1cXJ6cnF4ZmNgTkdr
XFXAoozpyqXBr5WPjH11d29fZ2TSy9/i4Ova09qGeX6Nentqdno4O0Q8Nj1ANThKODdgSEF7WEiN
YE2gdmLEn3/kuYyjiGeUfnmzoZy+uaSlp5eeqp2IjogrNT348fa8usalqLmIc3yAZ1+LtrmFjZBd
Xl5KS1NUTlJcTkxoU014XFKdcWDXqpDGqo6VkI5WZn5hbYRla2x8gn6hpJhiaGMnMDv++v6ytLOA
jZN9cXmCYleKsrCTpql3fYVXV2qKgIy5rKulm5GMg3ePgnagkYKZk4FdY1dKT1lucn9tb2mTmoyS
lYQ2PTwqKzX++/2rqquAjZl4and+W059pKOGoah0f4Q8RlaQkJv//////fa0raCHfnWHgXxgWlVD
SFA/Ql46MDloXFeXlIRgYlgqKCsrKTEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAA=
</icon>
<feed>http://feeds.feedburner.com/TutorialDeBlogger</feed>
</button>
</custombuttons>
Como se puede observar en el fichero se introducen las etiquetas del botón (button), sitio (site), descripción (description), icono (icon) y feed del sitio, estas etiquetas tienes que rellenarlas con los valores correspondientes a tu blog y el elemento <icon> corresponde a tu icono, es decir al texto guardado en el fichero icono-mio.txt El fichero con el botón lo vamos a guardar con el nombre boton-tunombre.xml, donde debes escribir tu nombre y apellido en lugar de "tunombre".
Alojamiento de un botón:
La 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. Es decir tienes que guardar el fichero boton-tunombre.xml en internet y guardar la dirección de acceso al fichero. Para conseguir esto vamos a utilizar un hosting gratuito, los pasos a realizar para subir a Internet el fichero boton-tunombre.xml son: En Internet Explorer escribe la siguiente dirección ftp://infor.host56.com/public_html/, aparece una ventana que te pide un nombre de usuario y contraseña, escribes a2498712 e infor11, respectivamente. En el menú Ver del navegador, pulsas en "Abrir el sitio FTP en el explorador de Windows", a partir de ese momento puedas arrastrar el fichero boton-tunombre.xml a esa ventana y queda almacenado en Internet.
Cómo enlazar tu sitio a tu botón: Si 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 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 de mi blog: <a href="http://toolbar.google.com/buttons/add?url=http://infor.host56.com/
boton-mio.xml">Añadir</a> La etiqueta de este vínculo es Añadir. Lo que tienes que hacer es crear una entrada en tu blog donde aparezca la dirección anterior con tus datos. Cuando un usuario haga clic en este vínculo, el botón de tu blog 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. Ver el resultado final al pulsar aquí.
Práctica con hoja de cálculo excel-1
Una vez dentro de Google Docs, vas a crear la siguiente hoja de cálculo, fíjate bien en las instrucciones para realizarla. El resultado final debe ser lo más parecido a esta imagen:
Para verla mejor solo tienes que pulsar encima de ella. Una vez tengas el documento terminado, debes subirlo por la forma habitual con el nombre excel-1 a la carpeta con tu nombre en Google Docs.
Práctica con Google Docs
Una vez dentro de Google Docs, vas a crear el siguiente documento con márgenes 1.5 cm arriba y abajo y 2 cm a izquierda y derecha. El tipo de papel es A4 y debes utilizar el editor de ecuaciones, el editor de dibujos y la inserción de imágenes, ésta que aparece es una ilusión óptica que debes encontrar en Internet. El resultado final debe ser lo más parecido a esta imagen:
Para verla mejor solo tienes que pulsar encima de ella. Una vez tengas el documento terminado, debes subirlo por la forma habitual a la carpeta con tu nombre en Google Docs.
|