Hay una propiedad CSS denominadatext-stroke que nos permite añadir fácilmente un borde a los textos que elijamos, al modo en que podemos hacerlo para una caja conborder. Pero es una propiedad no estándar y hasta el momento con muy poco soporte en los distintos navegadores. EnCan I use? podemos ver rápidamente que de entre los más populares sólo encontramos a Chrome en todas sus versiones.Por eso y a pesar de que no sea ni la manera más fácil ni la mejor estéticamente hablando, además de ver someramentetext-stroke, en esta entrada usaremos un sistema alternativo para simular esos bordes para texto. Será context-shadow.
Usando text-stroke
La sintaxis básica para usartext-stroke es como sigue.
Como veis sólo es cuestión de indicar un color de relleno context-fill-color y luego el ancho y el color del borde context-stroke. Ambas propiedades llevan el prefijo-webkit- que es la plataforma que funciona como base para Chrome, Safari, Opera y otros de menor uso, precisamente los únicos dónde hoy por hoy funciona.Con esa regla podremos usar el selector.stroke para que cualquier texto tenga un aspecto como este (efecto sólo visible en los navegadores antes indicados):
Texto con text-stroke
Nótese que el borde que creatext-stroke se "pinta" por dentro de la letra, así que si esta es muy pequeña de tamaño el borde se comerá una gran parte de ella.
Ñapa con text-shadow
La manera de simular esto context-shadow es añadiendo sucesivas sombras que irán rellenando el espacio circundante al texto. En un principio una sombra simple se verá desplazada a la derecha, izquierda, arribao debajo del texto, pero no en todas las dimensiones a la vez.Por ejemplo, este sería el resultado context-shadow: -2px -2px 1px #000; que nos proyectaría la sombra negra (#000) dos píxeles a la izquierda y otros dos arriba:
M
Pero comotext-shadow admite múltiples valores si los separamos con comas, podremos (más o menos) ir rellenando los huecos que queden añadiendo otros desplazamientos complementarios.De esta manera, para cubrir la parte derecha incorporamos un2px -2px 1px #000 (desplazamiento de 2 píxeles a la derecha, 2 píxeles arriba):
M
Haciendo lo propio para la parte inferior, combinada con la izquierda y luego con la derecha, podremos "rodear" totalmente el carácter. El código completo para ello sería:
Y ¡voilá!, letra M amarilla con un borde negro... o casi ;)
M
Combinando que es gerundio
Nada impide combinartext-stroke ytext-shadow para obtener un perfil exterior con la segunda y adicionalmente una línea interior más limpia que se verá en los navegadores que soporten la primera propiedad.
La estructura de un Blog es la base sobre la que se construye y distribuye todo su contenido. En ella existen dos partes fundamentales: una visible compuesta por los componentes que conforman su presentación y otra invisible que sirve para que los sistemas que acceden al mismo sean capaces de analizar y extraer correctamente su información.La correcta estructura de un Blog asegura una correcta experiencia de usuario del mismo y facilita su correcta indexación en los motores de búsqueda. A priori lo que puede parecer trivial se torna en vital para el correcto funcionamiento del mismo.Analicemos punto por punto cada aspecto que debemos tener en cuenta a la hora de configurar la correcta estructura de nuestro Blog.
¿Qué se considera estructura de un Blog?
Las entradas y su contenido son el "alma" del Blog, sin ello carece de sentido su existencia y se convierte en contenido digital inerte que subsiste en la red sin rumbo ni destino. Pero estas entradas a las que tanto tiempo dedicamos necesitan de una buena base para que los usuarios puedan leerlas confortablemente y los buscadores puedan acceder a ellas: eso es la estructura del Blog, esa base.La estructura de un Blog es la base sobre la que se construye y distribuye todo su contenido. En ella existen dos partes fundamentales: una visible compuesta por los componentes que conforman su presentación y otra invisible que sirve para que los sistemas que acceden al mismo sean capaces de analizar y extraer correctamente su información.
¿Qué es el SEO on Page?
ElSEOes el conjunto de técnicas que se aplican sobre un sitio web para que este sea indexado y correctamente rastreado por los motores de búsqueda, con el fin de mejorar o llegar a obtener un mejor posicionamiento.ElSEOON PAGE determina los estándares que una página web debe cumplir para ser correctamente rastreada, indexada y presentada en los motores de búsqueda.Sin una estructura correcta que apoye un buen SEO ON PAGE, las posibilidades de que un motor de búsqueda se decante por un resultado bien optimizado antes que por otro no optimizado son mayores. Es por ello que una buena optimización para motores de búsqueda de la estructura de una web y las páginas que la componen puede facilitar su posicionamiento.
¿Cuál es la parte visible y la no visible de un Blog?
Es importante no confundir la presentación con la estructura.La presentación se construye sobre la estructura pero no es la estructura. A continuación iré exponiendo cuál debe ser una estructura apropiada:El Blog contiene una parte que todos podemos ver, su presentación (las imágenes, el título, sus entradas...) pero para que su visualización sea posible existe una parte no visible que la dibuja, el código fuente.
1) La estructura de un Blog comienza desde su HEAD, aprende cómo debe estar formado.
Si bien hemos visto en más de una ocasión cómo se conformael código fuente de una plantilla Blogger, es básico y suficiente para entender la estructura no visible de un Blog que a parte de que en ella es donde indicamos cómo se colocan sus componentes, también podemos informar a los buscadores de qué contenido tenemos, quién es el autor, el idioma, qué palabras clave lo conforman... todo ese apartado lo informamos por medio de las meta etiquetas.Éstas proporcionan información a los diversos programas informáticos que acceden al contenido de nuestro Blog o bien para añadirlo al índice de un buscador o para analizar datos estadísticos con cualquier finalidad.
Para aplicar las mínimas meta etiquetas con las que debe contar tu Blog ejecuta esta guía paso a paso para ser capaz de informar a los sistemas informáticos que rastreen tu web de quién es el autor, el idioma, la descripción de tu Blog y sus palabras clave:las meta etiquetas básicas en un Blog.
Fundamentalmente son las explicadas en la guía sobre la meta etiquetas básicas en un Blog con los identificadores de verificación de propiedad deherramientas de webmaster de varios buscadores.La idea es que los sistemas que analicen tu Blog tengan los datos suficientes para reconocer su propiedad, idioma y de qué temática se trata.
2) Marcado de dominio canónico y URL canónica:
El dominio canónico sirve para informar a cualquier sistema que analice tu Blog de cuál es tu URL principal. Al igual que las metae eitquetas es parte del código no visible de la estructura de tu Blog.
Normalmente un Blog o una página web puede utilizar más de una URL. Por ejemplo, en Diarios de la nube hay dos URLs http://diariosdelanube.com y http://www.diariosdelanube.com.
La existencia de dos URLs que referencian al mismo contenido produce duplicidades que afectan a los motores de búsqueda que suelen tratar negativamente.
Para evitar este problema se utiliza la URL canónica, la URL que consolida en una única dirección toda tu información. En las herramientas para webmaster de Google existe la posibilidad de indicar la URL de dominio preferida pero además, puedes indicarlo directamente en tu código utilizando esta línea antes de que se cierre la sección /HEAD de tu Blog:
link href='http://www.TU_URL_PREFERIDA.com/' rel='canonical'/
En el caso de Diarios de la nube marco la URL canónica poniendo:
link href='http://www.diariosdelanube.com/' rel='canonical'/
La URL canónica en Blogger
En Blogger el marcado de URL es automático, No es necesario que marques la URL canónica. Observa en el código fuente de tu página principal, una vez se dibuja en el navegador, que en su interior aparece la línea con el nombre de tu web y rel='canonical'.
Luego verifica que la URL canónica en el interior de las entradas de tu Blog indica toda la dirección de la página de tu entrada:
Es importante que el marcado de URL canónico sea el de la página principal en la dirección de tu Blog y el de las entradas dentro del detalle de las entradas de tu Blog.
Marcado de dominio preferido en Google webmaster Tools:
Adicionalmente en las herramientas para webmaster de Google he indicado que mi dominio favorito es www.diariosdelanube.com. De esta manera evito duplicidades cuando se rastrean direcciones de mi Blog cuyo dominio sea diariosdelanube.com (a secas, sin el www. delante).Para más detalles a este respecto no dudes en pasarte por la guíaCómo evitar contenido duplicado en una web.
3) El título H1.
Algo tan obvio pero que debe contemplarse en la estructura de cualquier Blog. El título tiene una parte visible: en la que podemos ver cómo se llama nuestro Blog y otra invisible: el código fuente que conforma el título.
La parte visible del título:
El título de Diarios de la nube lleva un logo con la nube dibujada en un marco que a su derecha contiene las palabras "Diarios de la nube".
Por supuesto, no es necesario poner un Logo ni nada por el estilo al lado del título, pero si es necesario que exista el título y coincida al máximo con la dirección de tu Blog.
La parte no visible del título:En la parte no visible tenemos que distinguir dos zonas: la página principal y las entradas. El título se debe marcar con la etiquetah1, éstaSÓLO debe estar una vez en cada página del Blog.Se puede utilizar para indicar el título del Blog y en el detalle de las entradas para que seah1 el título de la entrada.El marcado conh1, por poner un ejemplo,facilita al buscador tener conocimiento del título que debe mostrar en el resultado de una búsqueda.En líneas generales, para concederle la relevancia adecuada a cada título, intenta marcas siempre así tu código:
Página principal:
Título del blog con h1
Lista de entradas con h2
Entradas del Blog:
Título del blog con h2
Título de la entrada h1
Marcado de un título en Blogger que utilza una imagen en lugar de texto:
Como utilizo un logo para "crear marca" (branding), me veo obligado a utilizar una imagen. La estructura que recomiendo en este caso es:h1a expr:href='data:blog.homepageUrl' style='display: block'img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block;padding-left:0px;padding-top:0px;'//a/h1Se puede apreciar como se indicah1y acto seguido va el hrefa expr:href=donde a continuación le sigue la imagenimg expr:alt='data:title'.Es de vital importancia en una imagen utilizar elaltporque semánticamente los robots rastreadores de los buscadores le concederán mayor importancia al atributoaltincluso que alh1.En Diarios de la nube utilizo el siguiente código para alternar entre el título del Blog o de una entrada y que éste siempre seah1 asegurándome de que sólo exista unh1 por página:Para visualizarlo haz clic aquí
Luego el código fuente del título es el estándar en Blogger pero indicando H1 para la imagen del nombre del Blog en la página principal y sin H1 en las entradas:
div id='header-wrap'div id='header-wrapper' b:section class='header' id='header' maxwidgets='1' showaddelement='no' b:widget id='Header1' locked='true' title='Diarios de la nube (cabecera)' type='Header' b:includable id='main' b:if cond='data:useImage' b:if cond='data:imagePlacement == "REPLACE"' !--Show just the image, no text--b:if cond='data:blog.pageType == "index"' div id='header-inner'h1a expr:href='data:blog.homepageUrl' style='display: block' img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block;padding-left:0px;padding-top:0px;'//a/h1 /div b:else/div id='header-inner' a expr:alt='data:title' expr:href='data:blog.homepageUrl' style='display: block' img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block;padding-left:0px;padding-top:0px;'/ /a /div/b:if b:else/ !-- Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth or scrollWidth, so we don't force a minimum width if the user is using shrink to fit. This results in a margin-width's worth of pixels being cropped. If the user is not using shrink to fit then we expand the header. -- div expr:style='"background-image: url(\"" + data:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrWNfl6kPWx0WzB0G4s8wyWDwB_mk9xZ51Q_AhGWz5TMWuM7_nI-hZPjEU-Xo5uVkynmWCj-a99pnavbMbnkE-JoDFSLObgSC3bqn1o8A3rYWCHBP7W_2Y2oPnuC0Z4hfZ1YJpJr8QrA/w60-h46-p-no/ + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "px;" + "_height: " + data:height + "px;" + "background-repeat: no-repeat; "' id='header-inner' div class='titlewrapper' style='background: transparent'h1 class='title' style='background: transparent; border-width: 0px' b:include name='title'//h1 /div b:include name='description'/ /div /b:if b:else/ !--No header image -- div id='header-inner' div class='titlewrapper'h1 class='title' b:include name='title'//h1 /div b:include name='description'/ /div /b:if/b:includable
El resultado en HTML será una correcta estructura de imagen con título en la página principal:h1
a href='http://www.diariosdelanube.com/' style='display: block'
img alt='Diarios de la nube' height='42px; ' id='Header1_headerimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-tEG2B2Igdd212VMik6pYQt5jPh2zuoR7FkMcM1QiApwVKg0qLizUHiwwdfBgi_swz8VtGXdB3appSHQfHt5b8lh_DnMvPwRr8c0HhBsgc8wRF5nbC7KThwYl1AbjrYkTlrKgBERcCg/s1600/Logo_pruebas5.png' style='display: block;padding-left:0px;padding-top:0px;' width='180px; '/
/a
/h1y en las entradas el h1 sólo será el título de la entrada.
Indica bien el marcado de título de página en el navegador
De esta manera, compartirás en redes sociales y mostrarás adecuadamente en los resultados de búsqueda de los buscadores y en los restreadores el título de tu Blog o entradas según corresponda:
Este código indica explícitamente que en la página principal el título sea el nombre del Blog pero en las entradas sea el nombre de la entrada seguido de ~ y el nombre de tu Blog.
3) El resto de literales y títulos del Blog H2, H3, H4...
Los literales que conforman las opciones de menú o los títulos de los Gadgets que se muestran a lo largo de todo el Blog no pueden tener marcado h1para que en primer lugar se puedan distinguir del título del Blog y en segundo lugar los buscadores puedan identificarlos como "Subencabezados" (h2) o "Encabezados secundarios" (h3).
Imagina que tienes un Blog que se llama "Blog de pruebas" y tiene varias entradas y literales de menú en su interior, deberás marcar cada título con la etiqueta apropiada:
Título del Blog h1 Blog de pruebas /h1
Menú del Blog h3 opción 1 /h3 h3 opción 2 /h3...
Lista de Títulos de una entrada h2 Entrada del Blog de pruebas 1 /h2
Lista de Títulos de una entrada h2 Entrada del Blog de pruebas 2 /h2...
En la página principal:La idea es que como se explica en el paso 2), sólo el título del Blog esté marcado como h1, los títulos de las entradas como h2 y el resto de literales según orden de importancia desde h3 hasta el hn que requieras.
En el detalle de las entradas:Dentro de las entradas es quizás más importante que los títulos de la entrada aumenten su relevancia poniéndose en h1. De esta manera el buscador concederá mayor relevancia al título de la entrada y la información que contiene la misma que al nombre del Blog, consiguiendo mayores posibilidades de que ésta aparezca en los resultados de búsqueda con mayor facilidad.
En Diarios de la nube, para alternar el uso de h2 en portada y h1 en el detalle de una entrada de los títulos utilizo el siguiente código.
4) Presentación de datos estructurados al usuario y al buscador:
Debes tener en cuenta que el buscador cuando analiza la información de tu Blog tiene en cuenta a parte de los detalles de estructura que estamos revisando en este articulo, los datos estructurados de tu Blog.
Los datos estructurados permiten a los buscadores como Google obtener información de una web que obedece a estructuras de información prefijadas dentro de la misma, para luego mostrarlos en los resultados de las búsquedas.
La utilización de los datos estructurados implica un ligero cambio en la presentación, ya que estos datos tienen una estructura clara e identificable que debe ser siempre visible.
Esto es cómo se muestran los datos estructurados en la portada de Diarios de la nube (author y updated)
Esto es cómo se muestran los datos estructurados en el detalle de una entrada de Diarios de la nube (author y updated)
El marcado de datos estructurados es vital para indicar al buscador quién es el autor de un determinado contenido en Internet y dónde y cómo está actualizando o escribiendo ese contenido. Para conseguir un buen marcado de autor te recomiendo que ejecutes la guíala autoría en Google paso a pasodonde además podrás realizar y completar satisfactoriamentela guía para datos estructurados.
5) Marcado de autor:
En el paso 1) con meta etiquetas y en el 4) con las primeras marcas de datos estructurados, hemos indicado a los buscadores y robots rastreadores de la autoría de nuestra web y sus contenidos.
Es necesario completar todo el marcado de autoría y conexiones a Google+ con los "gadgets" básicos para tu Blog y su conexión con esta red social:Conecta tu Blog con Google+.
Todos los gadgets informados en la guía son importantes, pero asegúrate de que pones en tu Blog el de tipo "Insignia".
Este Gadget te ayudará especialmente con el marcaje de datos estructurados de usuario. No dudes en comprobar si realizaste todo el marcado de datos estructurados correctamente:
La configuración del aspecto del gadget insignia puede modificarse para presentarlo horizontal, verticalmente y con o sin imagen del perfil Google+.
Prográmalo en un calendario, mételo en tu Blog, difunde tus contenidos de una nueva forma.Las posibilidades son infinitas: Comunicación en directo con tus usuarios, presentaciones en directo con difusión mundial en tiempo real, a través de Google+ y Youtube. Descubre la potencia que hay detrás de esta "herramienta" de Google creada para difundir más allá de tu Blog tus contenidos.Con motivo del estreno en Google Developers del botón oficial para los Hangouts, voy a explicarte cómo aprovecharte de esta magnífica aplicación en tu Blog para crear una experiencia de comunicación total con tus usuarios.La utilización de los Blogs como medio de comunicación multi-media ha generado para muchos creadores de esta clase de sitios web nuevas oportunidades de negocio.Google, con este propósito lanzó al mercado los Hangout. Una aplicación web que integra chat, vídeo en vivo, compartición de datos y documentos en tiempo real entre otros aspectos.En Diarios de la nube hemos tratado con anterioridadcómo retransmitir eventos en directode diversos canales y temáticas que pudieran enriquecer nuestros contenidos o servir de espacio de encuentro en un Blog. La utilización de servicios de streaming que permitieran darle valor añadido a nuestros contenidos.Hoy vamos a dar un paso más allá y vamos a explicar cómo retransmitir en directo y en nuestro propio Blog sesiones de Hangout en vivo con nuestros usuarios. Vamos a combinarlo con laprogrmación de eventos en calendariode manera que tus consumidores puedan conocer de antemano tus sesiones en vivo para conectarse y planificar diversas formas de interacción.
¿Qué es un Hangout?
Si nos dejamos de complicaciones técnicas, hacer un Hangout es establecer una comunicación multi-medio con uno o varios usuarios a través de la aplicación web creada por Google a tal efecto. El hangout puede ser de vídeo en tiempo real o puede ser de texto (chat del estilo del "antiguo" Google Talk).
Durante el Hangout los usuarios pueden compartir incluso archivos o información de toda clase residente en Google Drive o de Google Docs.
El Hangout, cuando es un evento en vivo, se puede retransmitir desde la propia herramienta de Google, en Youtube y en las webs donde copies su código "embed" (embebido), todo en tiempo real.
El evento puede guardarse y editarse después en Youtube.
Puedes ofrecer Hangout en Google+ con los usuarios de tus círculos o en público.
Un ejemplo de botón embebido en página web para iniciar un Hangout:
Este es un ejemplo de los nuevos botones oficiales que Google ha creado para utilizar el servicio de Hangout en una web.
¿Qué posibilidades me ofrece la utilización de Hangouts?
Las posibilidades de utilización de esta tecnología son mucho más amplias de lo que "a priori" podemos pensar. En el Hangout no sólo hablas tú, pueden hablar y participar en él todos los usuarios que se conecten, compartir escritorio, documentos y presentaciones... hay miles de aplicaciones prácticas para nuestros blogs, contacto con clientes, presentaciones en directo, cursos interactivos, reuniones privadas o públicas... los usuarios podrán conectarse desde sus terminales móviles, ordenadores, tablets, en cualquier punto donde se encuentren siempre que tengan conexión a Internet.Ahora incluso podremos difundir nuestroHangout en Directo por Google+,un paso adelante en las herramientas sociales. Te recomiendo visitar esta nueva forma de herramienta social que combina la potencia de Google+ a la vídeo-conferencia en directo.
¿Qué debo tener en cuenta antes de usar el servicio?
Nunca me canso de repetirlo y es algo que debería hacerse siempre en Internet, pero debes leer la política de privacidad, las condiciones del servicio y la política de conducta antes de comenzar a utilizarlo.
1)Para poder utilizar "Hangouts" de forma "integrada" con nuestro blog o página web, es necesario conocer el APP_ID o número de identificación que Google nos asigna para utilizar sus APIs (Application Program Interface) en nuestros sitios web:
Esto que puede sonarte técnico, es tan sencillo como hacer "clic" eneste enlacey al acceder simplemente copiar el código que Google APIs te asigne.
En el menú de la izquierda de "Google apis" encontrarás la sección "Overview", simplemente copia el código que ponga a la derecha de "Project Number" en tu página "Dashboard" (la página que se te ha abierto al hacer clic en la opción de menú Overview).
No toques nada más en esta página si desconoces lo que activas o desactivasen las diferentes opciones de menú.Sólo necesitas el código de Project Numberpara trabajar con "Hangouts" en tu Blog.
2)A continuación, tienes diversas opciones para hacerlo accesible desde tu sitio web. Puedes ponerlo accesible mediante una imagen, una opción de menú o una botonera. EnGoogle Developersofrecen el script para poder añadir el botón de hangouts para tu Blog:
Cuentas con botones de diversos tamaños 79x15, 86x20, 24x100, 60x230. El script es muy sencillo:
a href="https://plus.google.com/hangouts/_?gid=APP_ID" style="text-decoration:none;" img src="https://ssl.gstatic.com/s2/oz/images/stars/hangout/1/gplus-hangout-60x230-normal.png" alt="Start a Hangout" style="border:0;width:230px;height:60px;"//a
Donde pone gid=APP_IDdebes escribir el código de aplicación que Google te suministró tal como te expliqué en el paso 1).
Por último, aunque en la página de Google Developerspuedes seleccionar el código con los tamaños de los botones, deberás cambiar el tamaño de la lista que te proporcioné antes del código por el que deseas utilizar, en el ejemplo de código que te he puesto, el ancho del botón es de 230 píxeles por 60 de alto.
3)Puedes ponerlo en tu Blog en unabotonera personalizada de iconos para redes sociales. O añadirlo en un Gadgets HTML/Javascript para colocarlo en una barra de menú lateral. Dentro de Blogger en la opción "Diseño" selecciona "Añadir Gadget" donde prefieras y escoge"Gadget HTML/Javascript" para ponerlo donde prefieras.
B) Incorpora un Hangout mediante un calendario programado
1)Confecciona en Google Calendar tus planes, en primer lugar accede aGoogle Calendar:
Una vez dentro de Google Calendar, en la parte izquierda de la página, selecciona la "flechita" para "Crear un nuevo calendario". Si no lo haces, estarás publicando tu calendario personal. Atentos a esto porque si utilizas un Smartphone y haces anotaciones en el calendario, estás subiendo dichas anotaciones al calendario de tu perfil de GMAIL. Por ello, para el blog debes crearte un calendario nuevo (de manera que las personas del Blog no vean tus citas y recordatorios privados).
Al pulsar "Crear nuevo calendario" te aparecerá una página como la que puedes ver en el inferior.
Introduce un nombre para el calendario.
Una descripción aclaratoria de lo que va a contener ("Actividades del Blog tal...")
La ubicación de dónde se desarrollarán las actividades del calendario (opcional).
La opción de hacerlo público(no es necesario para publicar en Blog): lo bueno de esta opción es que en los resultados de búsqueda de los usuarios de Google, bajo el Blog,aparecerán los eventos señalados.
Por último pulsa el botón "Crear Calendario".
Al crear el calendario, saldrás a la página principal de Google Calendar de nuevo. Procura seleccionar a la izquierda, haciendo "clic" sobre él, el nuevo calendario que has creado (de lo contrario, trabajarás con el calendario personal de tu perfil de Google).
Creando eventos en el calendario para el Blog2)Sobre tu nuevo calendario creado, si haces clic en cualquier celda del mismo o pulsas el botón rojo "Crear" se te presentará la pantalla para añadir un evento nuevo rápido, con las opciones básicas y mínimas para el evento..
Si pulsas el botón rojo de la parte superior derecha llamado "Crear", Google Calendar te permitirá crear eventos con muchas más opciones que los eventos básicos. Lo mejor es que en el lado izquierdo de la pantalla selecciones la "flechita" de tu calendario y en el desplegable que sale pulses sobre la opción "Crear evento en este calendario" para asegurarte que lo estás creando en tu calendario para el Blog y no en el tuyo personal.
Creando el Hangout en vivo para tu calendario:
Rellena los datos de la página de creación de eventos y atento a las opciones que aquí tenemos, algunas son muy interesantes:
Introduce el nombre del evento.
La fecha y hora en la que se producirá.
El lugar donde se producirá el evento. Aquí puedes incluso meter unaURL de Google Mapsdonde configures el itinerario para llegar al sitio, o el propio itinerario del evento.
Si quieres realizar un Hangout, sólotienes que seleccionar la opción a tal efecto en esta página. Te permitirá realizar un Hangout en el que quedar en vivo con los usuarios de tu Blog. aquí todo depende de cómo decidas configurarlo. Esto viene genial paraBlogs de formación, presentaciones en directo, contacto con tus clientes, etc...
Después configura el color con el que quieres que aparezca el evento en el calendario y las opciones de privacidad
Al crear el evento volverás al calendario principal. Asegúrate de volver a hacer "clic" en el menú izquierdo en el calendario que has creado para tu Blog para poder ver el evento generado.
Preparando el calendario con el Hangout en vivo para integrarlo en tu Blog3)Una vez termines de introducir todos los eventos deseados, debes preparar el calendario para integrarlo en Blog. Para ello, en el menú de la izquierda, haz "clic" sobre la "flechita" desplegable al lado del calendario que creaste para el Blog y pulsa sobre la opción "Configuración de calendario".
Te saldrá la página de configuración de calendario. En este punto es fundamental fijarse en la sección inferior donde pone "Incrustar calendario". A la derecha de la opción debemos copiar el código que habrá que pegar posteriormente en Blogger.
Después en Blogger podrás establecer si quieres un tamaño mayor o menor para el calendario.
Insertando tu calendario de eventos con el Hangout en Blogger4)Dentro de Blogger dirígete al menú de la izquierda, a la opción Diseño.
En la página de Diseño pulsa "Añadir gadget" en la zona del Blog donde desees insertar el calendario y selecciona el Gadget "HTML/Javascript".
Añade el código fuente que recuepraste de la configuración de tu calendario en Google Calendar, dentro del paso 3 de "Incrustar calendario".
C) Mediante la creación de unHangout en vivoy su posterior adición del código EMBED en tu Blog:
En este punto vamos a ver paso a paso cómo crear un Hangout en vivo y añadir el código EMBED a nuestro Blog.
1)En la página principal de tu perfil de Google+, mueve tu ratón a la izquierda del todo para que se te presente el menú general de Google+. Selecciona la opción "Hangouts en vivo". Se te presentará la página para enlazar con Youtube tu perfil de G+.
2) Tendrás que unir tu perfil youtube al perfil de G+ para así disponer de los vídeos y la difusión en directo de tu evento.
3)Una vez unida tu cuenta G+ a Youtube puedes y comenzado a restransmitir tu hangout o justo antes de comenzar a hacerlo, puedes pulsar sobre la opción"Embed"y extraer el código fuente que almacenará el visor del Hangout para que lo pongas disponible en tu Blog. También puedes extraer el código "Embed" de tu canal de Youtube por donde también se retransmitirá el Hangout.
4)Para insetarlo en tu Blog,dentro de Blogger dirígete al menú de la izquierda, a la opción Diseño.
En la página de Diseño pulsa "Añadir gadget" en la zona del Blog donde desees insertar el Hangout y selecciona el Gadget "HTML/Javascript".
Añade el código fuente que recuperaste de la configuración de tu Hangout:
¡Eso es todo!, ahora ya podrás difundir tus contenidos en directo, ir más allá del Blog.
.PNG "Cómo utilizar hangout en un Blog")
.PNG "Cómo utilizar hangout en un Blog")
