5/9/2013

Blogger y Google Calendar


Este artículo es el primero de una serie dedicada a la integración entre Blogger con las herramientas productivas y colaborativas de Google, como por ejemplo Google Docs, Drive y Apps. Si al final de esta serie, logramos hacernos con las herramientas que vamos a mencionar, conseguiremos llevarnos literalmente la oficia a la nube. Esto implica que toda la gestión de documentos como textos, hojas de cálculo, presentaciones, calendarios lo gestionaremos única y exclusivamente a través de servicios web, algo que en realidad ya haces con Blogger.

El objetivo de este primer artículo es acercarte a Google Calendar, el servicio de Google para gestionar múltiples calendarios de manera online. Si te parece comenzamos con algo de teoría y luego pasamos a la práctica y a los ejemplos.



Integrando Blogger y Google Calendar
Blogger y Google Calendar

Qué es Google Calendar

Tal y como su nombre indica, Google Calendar te permitirá gestionar múltiples calendarios, estos quedarán vinculado a tu cuenta de Google. Una de las cosas que lo hace único es la capacidad para incrustar toda esta información en sitios web/blogs, con lo que podrías compartir con tus clientes/seguidores los eventos (cursos, presentaciones, ferias, etc) de tu empresa/actividad en tu propio blog.

Para que te sitúes, Google Calendar equivale por ejemplo Microsoft Outlook (la parte de calendario) o a iCal de Apple, con la gran diferencia que Google Calendar es un servicio web y por lo tanto accesible desde cualquier lugar y en cualquier momento, sin necesidad de tener que instalar nada, simplemente usando un navegador web.

Ejemplo de integración entre Blogger y Google Calendar

Imagina ahora el caso de un blog asociado a un club deportivo, éste podría contener una sección de torneos donde poder ver los próximos eventos, de estas forma sus socios/seguidores estarán siempre informados. Otro ejemplo puede ser los blogs de docencia donde puedes usar el calendario para informar a los alumnos y/o padres de los diferentes eventos del centro. Extrapola estos ejemplos a tus necesidades concretas por el fin de que puedas adaptarlo a tu caso particular.

Qué características están asociadas a un calendario de Google Calendar

Simplemente y a título informativo, te detallo aquellas características que podremos asociar a un calendario.
  • El nombre y descripción. 
  • La ubicación y la zona horaria. Importante para localizar el calendario y mostrar los cambios horarios si éste se visualiza desde otra zona.
  • Calendario publico o privado. En ejemplo de calendario publico es por ejemplo los días festivos nacionales. 
  • Compartir el calendario con otra persona, además puedes especificar si ésta ve los detalles o solo los huecos ocupados y libres entre otras opciones.

Qué son los recordatorios

Cuando añades un evento a tu calendario y le indicas la fecha y hora de comienzo/fin, además puedes especificar que quieres que te envíe un recordatorio bien a través de correo electrónico o bien a través de un SMS a tu teléfono móvil, previo a haberlo validado mediante un código.


Tutorial práctico, integrando Blogger y Google Calendar 

Llegados a este punto, vamos a poner en práctica este tutorial. Para ello te propongo hacer todo el ejercicio completo, desde crear un nuevo calendario hasta integrarlo en Blogger.

Paso 1. Crear un calendario en Google Calendar

Sigue estos pasos para crear tu primer calendario, piensa que será el que usarás para luego insertar en tu blog.
  1. Accede a Google Calendar
  2. En el panel de la izquierda, donde pone Mis calendario, haz clic el icono flecha abajo
  3. En el menú que se muestra, haz clic en Crear nuevo calendario
  4. Se abrirá una nueva ventana donde deberás indica el nombre, por ejemplo el nombre de tu blog o por ejemplo "calendario para blog"
  5. Cumplimenta el resto de datos, como son la franja horaria y demás.
  6. Marca el calendario como publico
  7. Una vez terminado, presiona el botón Crear calendario
Fíjate ahora, una vez creado el calendario éste se muestra en la zona de Mis Calendarios y está seleccionado. Cada calendario tiene
su propio desplegable que te permitirá acceder a un menú contextual, donde entre otras opciones tienes la de configuración, notificaciones, color para identificarlo, etc. (fíjate en la imagen de la derecha)

Paso 2. Crear tu primer evento en el calendario

Ya tenemos el calendario creado, vamos ahora a insertar en el un evento de pruebas para disponer de al menos un dato, para ello sigue estos pasos para crear un evento

  1. Haz clic en el botón rojo Crear
  2. En la nueva ventana que se abre indica básicamente lo siguiente:
    • Título del evento
    • El día y fechas de inicio y de fin
    • Puedes especificar si es todo el día e incluso si este evento se repite a lo largo del tiempo.
    • Asegúrate que en apartado Calendario se muestra el que acabas de crear.
  3. Puedes asociar a cada evento un recordatorio para que te avise antes del mismo.
  4. Presiona Guardar cuando lo tengas.
Una vez guardado nuestro evento de pruebas, verás nuevamente tu calendario y si todo va bien, ya tienes el primero de los eventos. Comentarte que puedes seleccionarlo y arrastrarlo de día, o alargarlo en el tiempo, además de acceder acceder a otras opciones, simplemente seleccionando el evento. Además fíjate que el calendario tiene una serie de pestañas (día, semana, mes, 4 días, agenda) que te permitirá cambiar de vista. 

Repite este segundo paso para crear nuevos eventos, trastea con los recordatorios y hazte con la herramienta. Si accedes al icono de configuración que tienes en la parte superior derecha accederás a la configuración general de Google Calendar que también debes revisar y configurar.

Paso 3. Crear el visor para incrustar tu(s) calendario(s) en el blog

Llegados a este punto, tienes el calendario el cual tiene un evento de prueba, ahora vamos a obtener el código HTML para poder insertar el visor del calendario en el blog. Para ello sigue estos pasos:

  1. Haz clic en tu calendario para que muestre el menú desplegable
  2. Haz clic en la opción que pone Configuración del Calendario
  3. Una vez dentro de la configuración del calendario, baja hasta que veas el apartado Incrustar este calendario
  4. Haz clic en el enlace que pone Personalizar el color, tamaño y otras opciones.
  5. Se abrirá ahora una nueva pestaña en el navegador. Tienes delante un pequeño asistente con el que vas a tener que experimentar un poco. Tienes un apartado Mostrar, donde decidir qué elementos quieres que tenga tu visor. Vista predeterminada, el ancho y el alto. También el día por el que empieza la semana, color y otros atributos de tu visor. Además fíjate que en el visor puedes combinar otros calendarios. Tendrás en todo momento una simulación de como va a quedar.
  6. Cuando tengas tu configuración, deberás copiar el código HTML que te ofrece la propia página. Copia y deja la pestaña con esta herramienta abierta.


Paso 4. Integrar el calendario en Blogger

Tienes el código copiado en el portapapeles, ahora vamos a insertarlo en el blog. Lo más lógico es que te crees una nueva página (no post).

A continuación te ofrezco unos pasos rápidos para crear tu página pero si nunca lo has hecho antes, te invito a que leas este artículo para completar estos pasos.


  1. Accede a Blogger
  2. Selecciona tu blog
  3. Haz clic sobre el apartado Páginas, a la izquierda
  4. Haz clic en el desplegable Página nueva y selecciona Página en Blanco
  5. Se abrirá el editor de páginas (muy similar al de post)
  6. Pon un título a tu página (Calendario, Cursos, Campeonatos....)
  7. Haz clic en el botón HTML
  8. Pega el código que tienes en el portapapeles
  9. Haz clic en el botón Publicar
  10. Si tenias el Gadget de páginas ésta ya debe mostrarte, si no lo tienes selecciona el desplegable Mostrar páginas como  y selecciona Pestañas principales.
  11. Visualiza tu blog y accede a tu nueva página donde muestras el calendario

Enhorabuena!, has terminado la integración de Google Calendar en Blogger.

Por continuar con el experimento, vuelve a tu calendario, agrega un nuevo evento y vuelve a consultar tu blog para que veas que éste ha cambiado también. Si una vez insertado el calendario quieres cambiar el aspecto, debes volver al constructor del visor y copiar nuevamente el código.

Conecta con el centro de ayuda de Google Calendar con el fin de acceder a la documentación oficial

Ejemplo de calendario de muestra de iniciaBlog

Yo he seguido trabajando en mi calendario, lo he incrustado en este mismo post con el fin de que veas cómo queda mi rutina de trabajo para mantener actualizado y monitorizado iniciaBlog.com. Puedes interactuar con mi calendario, el cual está hecho usando eventos periódicos. 




Espero que el tutorial te haya resultado práctico y puedas aplicarlo en tu caso. Por favor deja tus comentarios así como dudas y preguntas. Si te ha gustado, compártelo con tus seguidores.


Lecturas recomendadas:


¿Qué te ha parecido el tutorial?, ¿Conocías Google Calendar?, ¿Lo has aplicado en tu blog?




Más información ¿Cómo poner el botón de...:?