slide1

Alt1040. Noticias acerca de Internet, diseño, música, cine, opiniones, weblogs y medios

Es uno de los weblogs de tecnología más seguidos de la blogosfera hispana.

slide2

Bitelia. Blog de software, internet y servicios web

Software y aplicaciones para mejorar tu vida, guías de uso, trucos, listas, noticias y todo sobre tecnología.

slide3

Xataka. Publicación de noticias sobre gadgets y tecnología.

Últimas tecnologías en electrónica de consumo y novedades tecnológicas en móviles, tablets, informática, etc.

slide4

Wwwhatsnew. Aplicaciones, marketing y noticias en la web.

Servicios que os pueden ser útiles para dibujar, gestionar tareas, hacer amigos, encontrar restaurantes...

slide5

Fayerwayer. Discusiones y opiniones de lo ultimo en tecnología y gadgets

Con secciones dedicadas a Internet, Software o Redes Sociales es un referente a nivel de tecnología en español.

Mostrando entradas con la etiqueta Todo Blogger. Mostrar todas las entradas
Mostrando entradas con la etiqueta Todo Blogger. Mostrar todas las entradas

22 de enero de 2022

Introducción al uso de la API de Blogger v3

API Blogger
Una API o Interfaz de Programación de Aplicaciones (Application Programming Interface) es un protocolo que define cómo los dispositivos y las aplicaciones se comunican entre sí. Describe cómo los clientes que consumen las APIs pueden acceder a los recursos y qué métodos funcionan con su arquitectura.


A la hora de crear una API para la integración de software, el diseño REST (REpresentational State Transfer) destaca como el enfoque de arquitectura para el diseño de servicios web y se refiere al conjunto de reglas específicas que establecen como estos servicios se comunican a través de internet.

El estilo arquitectónico REST está compuesto por varios principios:

  • sin estado: las aplicaciones REST deben comunicarse con los recursos sin estado, es decir, no deben almacenar ningún contexto ni información de sesión.
  • separación cliente-servidor: la API se expone en un servidor y es consumida por clientes (apps, servicios).
  • sistema en capas: los componentes de los sistemas REST no deben poder ver más allá de su capa. Cada componente no debe influir en otro componente de la arquitectura.
  • cacheable: los datos del servidor REST deben marcarse como almacenables o no en caché. En caso afirmativo, el cliente puede reutilizar datos de la respuesta para solicitudes equivalentes posteriores.
  • interfaz uniforme: se hace hincapié en una interfaz uniforme entre los componentes (identificación y manipulación de recursos, hipermedia y mensajes autodescriptivos).

REST es independiente de cualquier protocolo subyacente y no está necesariamente unido a HTTP pero en las implementaciones más comunes de API REST, se usa HTTP como protocolo de aplicación.

De forma muy resumida, REST es un estilo arquitectónico y las API REST son servicios web que lo implementan.
Para complicar más las cosas, los desarrolladores llaman a una API HTTP que usa un estilo CRUD (Create, Read, Update, Delete) un servicio RESTful.

La API de Blogger v3 permite que las aplicaciones cliente vean y actualicen el contenido de Blogger. Tu aplicación cliente puede usar Blogger API v3 para crear nuevas publicaciones en tu blog, editar o eliminar publicaciones existentes y consultar publicaciones que coincidan con criterios concretos.

Cada solicitud que se envía a las APIs de Blogger debe identificar tu aplicación ante Google. Hay dos formas de identificar una aplicación: usando un token OAuth 2.0 (que también autoriza la solicitud) y/o usando la clave API de la aplicación.

  • si la solicitud requiere autorización (como una solicitud de datos privados de una persona), la aplicación debe proporcionar un token de OAuth 2.0 con la solicitud.
  • si la solicitud no requiere autorización (como una solicitud de datos públicos), la aplicación debe proporcionar una clave API o un token de OAuth 2.0, o ambos, la opción que consideres más conveniente.

Una vez que tengas una clave API, tu aplicación puede añadir el parámetro de consulta a todas las URL de solicitud con key=yourAPIKey

El formato específico para las URI de la API de Blogger es:
https://www.googleapis.com/blogger/v3/users/userId
https://www.googleapis.com/blogger/v3/users/self
https://www.googleapis.com/blogger/v3/users/userId/blogs
https://www.googleapis.com/blogger/v3/users/self/blogs
https://www.googleapis.com/blogger/v3/blogs/blogId
https://www.googleapis.com/blogger/v3/blogs/byurl
https://www.googleapis.com/blogger/v3/blogs/blogId/posts
https://www.googleapis.com/blogger/v3/blogs/blogId/posts/bypath
https://www.googleapis.com/blogger/v3/blogs/blogId/posts/search
https://www.googleapis.com/blogger/v3/blogs/blogId/posts/postId
https://www.googleapis.com/blogger/v3/blogs/blogId/posts/postId/comments
https://www.googleapis.com/blogger/v3/blogs/blogId/posts/postId/comments/commentId
https://www.googleapis.com/blogger/v3/blogs/blogId/pages
https://www.googleapis.com/blogger/v3/blogs/blogId/pages/pageId

Pongamos en práctica algunos métodos de la API de Blogger.

1- vamos a mostrar información del Blog usando la siguiente url:
https://www.googleapis.com/blogger/v3/blogs/byurl?url=https://www.tecnoblog.guru&key=yourAPIKey
<div id="api-blogger-v3" class="api-blogger-v3"></div>
<script>
function handleResponse1(response){
	document.getElementById("api-blogger-v3").innerHTML += "<div><a href='" + response.url + "' title='" + response.title + " target='_blank'>" + response.name + "</a></div><div>" + response.description + "</div><div>" + (response.published).substring(0,10) + "</div>";
}
</script>
<script async="true" defer="true" src="https://www.googleapis.com/blogger/v3/blogs/byurl?url=https://www.tecnoblog.guru&callback=handleResponse&key=yourAPIKey"></script>


2- ahora vamos a mostrar una lista con los cinco últimos post publicados en TecnoBlog invocando a la url:
https://www.googleapis.com/blogger/v3/blogs/blogId/posts
<div id="api-blogger-v3-2" class="api-blogger-v3"></div>
<script>
function handleResponse2(response){
  for(var i=0; i<5; i++){
	document.getElementById("api-blogger-v3-2").innerHTML += "<div><a href='" + response.items[i].url + "' title='" + response.items[i].title + " target='_blank'>" + response.items[i].title + "</a></div>" + (response.items[i].published).substring(0,10) + "<br/>" + "<div class='article'><em>" + response.items[i].content.substr(0,840) + "...</em></div><hr/>";
  }
}
</script>
<script async="async" defer="defer" src="https://www.googleapis.com/blogger/v3/blogs/5415513870832441455/posts?callback=handleResponse2&key=yourAPIKey"></script>


3- por último, vamos a mostrar cinco artículos publicados en la categoría "ciberseguridad" llamando a la siguiente url con el parámetro 'q' como etiqueta a buscar:
https://www.googleapis.com/blogger/v3/blogs/5415513870832441455/posts/search?q=ciberseguridad&callback=handleResponse&key=yourAPIKey
<div id="api-blogger-v3-3" class="api-blogger-v3"></div>
<script>
function handleResponse3(response) {
  for(var i=0; i<5; i++) {
	document.getElementById("api-blogger-v3-3").innerHTML += "<div><a href='" + response.items[i].url + "' title='" + response.items[i].title + " target='_blank'>" + response.items[i].title + "</a></div>" + (response.items[i].published).substring(0,10) + "<br/>" + "<div class='article'><em>" + response.items[i].content.substr(0,840) + "...</em></div><hr/>";
  }
}
</script>
<script async="async" defer="defer" src="https://www.googleapis.com/blogger/v3/blogs/5415513870832441455/posts/search?q=ciberseguridad&callback=handleResponse3&key=yourAPIKey"></script>



2 de abril de 2018

Calendario de publicación para Blogger (II)

Calendario publicación artículos - Blogger
Como ya sabréis la mayoría de vosotros, incorporar un calendario de publicación de artículos en un blog con tecnología Blogger es relativamente sencillo y en el post Calendario con todos los post publicados en Blogger ya daba unas instrucciones concretas para su implementación.


A modo de recordatorio:

  1. Selecciona la entrada Diseño del panel principal de Blogger.
  2. Pulsa sobre el link Añadir un gadget y se abrirá una ventana con diferentes alternativas
  3. Desplazamos el scroll de la nueva ventana hacia abajo hasta llegar a la opción:

    HTML/JavascriptAñadir
    Añade una característica de un tercero u otro código a tu blog.





  4. Introduce el Título del widgets (por ejemplo Calendario)
  5. En la caja Contenido pega el siguiente código:

    <div id='calendar'><strong>Loading...</strong></div>
    <script>
    var conf = {
     bgcolor: '#5692ce', 
     newtab:  1,         // 0:abre link en la misma ventana | 1:abre link en ventana nueva
     start:   1,         // 0:Domingo | 1:Lunes
     days:    "Lunes|Martes|Miercoles|Jueves|Viernes|Sabado|Domingo",
     months:  "Enero|Febrero|Marzo|Abril|Mayo|Junio|Julio|Agosto|Septiembre|Octubre|Noviembre|Diciembre",
     date:    "Ir al mes actual"
    }
    </script>
    <script src='https://cdn.jsdelivr.net/gh/jmacuna/calendar-widget@master/create-calendar.js' type='text/javascript'></script>
    <script src='https://www.tecnoblog.guru/feeds/posts/summary?max-results=1000&alt=json-in-script&orderby=published&callback=createCalendar' type='text/javascript'></script>
    
  6. Por último hacemos click sobre el botón Guardar

Los parámetros de configuración son:

  • bgcolor: color de fondo del calendario.
  • newtab: 0 para abrir el artículo seleccionado en la misma ventana o 1 para abrir el link en una ventana nueva.
  • start: 1 si queremos que el calendario empiece en Lunes o 0 si empieza en Domingo.
  • days: días de la semana. Nota: si ponemos la variable start a cero, el primer día de la semana en la variable days será el Domingo
  • months: meses del año.
  • date: texto que aparece cuando posicionamos el cursor encima de la fecha actual (parte inferior del calendario).
  • Tenemos que escribir la url de nuestro blog en el último script, dónde aparece https://www.tecnoblog.guru resaltado en negrita.

Puedes ver el ejemplo funcionando a continuación.


De hecho, me sorprende gratamente que numerosos lectores del blog hayan incorporado este widget a su bitácora.

También sois muchos los que me habéis enviado emails preguntándome si era posible realizar un diseño menos espartano y la respuesta es un SI rotundo.

Sin necesidad de modificar el código del gadget, tan sólo incorporando unas líneas de código o estilos de presentación, podemos personalizar nuestro diseño:

<div id='calendar'><strong>Loading...</strong></div>
<script>
var conf = {
 bgcolor: '#5692ce', 
 newtab:  0,         // 0:abre link en la misma ventana | 1:abre link en ventana nueva
 tooltip: false,      // false:title por defecto | true:tooltip con css3
 start:   1,         // 0:Domingo | 1:Lunes
 days:    "Lunes|Martes|Miercoles|Jueves|Viernes|Sabado|Domingo",
 months:  "Enero|Febrero|Marzo|Abril|Mayo|Junio|Julio|Agosto|Septiembre|Octubre|Noviembre|Diciembre",
 date:    "Ir al mes actual"
}
</script>
<script src='https://cdn.jsdelivr.net/gh/jmacuna/calendar-widget@master/create-calendar.js' type='text/javascript'></script>
<script src='https://www.tecnoblog.guru/feeds/posts/summary?max-results=1000&alt=json-in-script&orderby=published&callback=createCalendar' type='text/javascript'></script>

<style type="text/css">
@font-face {
  font-family: 'Catamaran';
  src: local('Catamaran Regular'), local('Catamaran-Regular'), url(https://fonts.gstatic.com/s/catamaran/v4/o-0IIpQoyXQa2RxT7-5r5TRA.woff2) format('woff2');
}
#contentDate *{font-family:'Catamaran'!important}
#spanLeft, #spanRight, #spanMonth, #spanYear{border:0;cursor:pointer;line-height:20px!important;background-color:#5692ce;padding:0!important}
#spanMonth,#spanYear{background-color:#fff!important;font-size:16px!important;color:#000!important;border:0!important;cursor:text!important;pointer-events:none}
#spanLeft:before{content:'<';font-size:15px;color:#fff;display:inline-block;padding:0 10px!important}
#spanRight:after{content:'>';font-size:15px;color:#fff;display:inline-block;padding:0 10px!important}
#spanLeft:hover, #spanRight:hover{background-color:#515151!important}
#spanLeft img, #spanRight img, #spanMonth img, #spanYear img{display:none}
#contentDate table{margin-bottom:0!important}
#contentDate table tr td{padding:0}
#contentDate table tr td a{width: 28px;display:inline-block}
#contentDate table tr td a[style='text-decoration:none;color:#000;cursor:default;border-radius:100%;border:2px solid #5692ce;cursor:pointer;'], #contentDate table tr td a[style='text-decoration:none;color:#000;cursor:default;border-radius:100%;border:2px solid #5692ce;cursor:pointer;border-radius:100%;border:2px solid #5692ce;cursor:pointer;'] {border:0!important;border-radius:0!important;background-color:#4080cc;color:#fff!important}
#contentDate table tr td a[style='text-decoration:none;color:#000;cursor:default;border-radius:100%;border:2px solid #5692ce;cursor:pointer;'] span {color:#fff!important}
#contentDate table tr td a[style='text-decoration:none;color:#000;cursor:default;border-radius:100%;border:2px solid #5692ce;cursor:pointer;']:hover {background:#515151}
#contentDate table{box-shadow:none!important;font-size:13px!important;width:100%!important}
#contentDate table tr{background:#fff!important}
#contentDate table tr td{text-align:center!important}
#contentDate{width:240px!important; display:inline-block}
#lblToday{background:#fff}
#lblToday a{color:#bd3434!important; font-size:medium; width:auto!important}
</style>


Y obtenemos un resultado asombroso.

Loading...


Si tienes conocimientos técnicos de css (siglas en inglés de Cascading Stylesheets) podrás personalizar el calendario a tu gusto cambiando fuentes de texto, tamaños, colores y un sinfín de propiedades de diseño.




28 de agosto de 2015

Como crear un índice para Blogger personalizable por Título o Categorías


Un índice es una lista o relación ordenada de datos que permite ubicar información concreta. En el caso de nuestro gestor de contenidos Blogger, nos va a permitir acceder a cada uno de los artículos publicados por categorías.


Hay muchos ejemplos en la red y desde el punto de vista funcional son válidos pero he querido dar un paso más y en este caso, vamos a personalizar o configurar la forma en que mostramos la información.
En el siguiente ejemplo tendremos la posibilidad de:

  • Ordenar alfabéticamente por Categorías.
  • Ordenar alfabéticamente por Título.
  • Ordenar por Fecha de publicación.
  • Mostrar la fecha de publicación.
  • Definir el texto o marca que aparece en los últimos artículos.
    Ejm: New!!
  • Determinar el número de artículos a los que poner la marca.
Lo primero que hacemos es acceder al panel de control de Blogger y nos situamos sobre la opción Páginas del menú de la parte izquierda

Páginas

A continuación hacemos clic sobre el botón Página nueva



En el campo con el texto Título de la página escribimos Indice y en el área de escritura de mayor tamaño introducimos el siguiente código:

<div id="all-post" class="all-post"></div>
<script>
var conf = {
 sortBy:   'orderlabel',  // forma en que se muestran las artículos publicados
 lastPost: 10,            // últimos post (10) a los que les pongo una marca
 date:     1,             // 0:no aparece la fecha de publicación | 1:mostramos la fecha de publicación
 newPost: 'Nuevo!!',      // texto o marca que aparece en los últimos artículos
 newtab:   1              // 0:abre link en la misma ventana | 1:abre link en ventana nueva
}
</script>
<script src="https://cdn.jsdelivr.net/gh/jmacuna/index-blogger@master/index-blogger.js"></script>
<script src="[URL DE TU BLOG]/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Vamos a analizar los parámetros de configuración:

  • sortBy puede tomar los siguientes valores:

    1. orderlabel: ordena alfabéticamente por Categorías
    2. titleasc: ordena alfabéticamente por Título del Post (de A a Z)
    3. titledesc: ordena alfabéticamente por Título del Post (de Z a A)
    4. dateoldest: ordena el Título del Post por fecha de publicación (del más antiguo al más reciente)
    5. datenewest: ordena el Título del Post por fecha de publicación (del más reciente al más antiguo).

  • lastPost: número de artículos que aparecerán como nuevos, ordenados por última fecha de publicación.
  • date: 0 si no queremos mostrar la fecha de publicación del artículo o 1 para mostrarla.
  • newPost: texto o etiqueta que aparecerán en los artículos nuevos.
  • newtab: 0 para abrir el artículo seleccionado en la misma ventana o 1 para abrir el link en una ventana nueva.
Como indicación final, sustituimos el texto [URL DE TU BLOG] por la dirección de nuestro blog (en mi caso: https://www.tecnoblog.guru).

Si además, queremos añadir estilos al Índice para que resulte más atractivo, podemos incluir clases de la siguiente forma:

<style type="text/css">
.all-post ol{
 list-style-type: circle
}
.all-post li a{
  text-decoration:none;
  padding:0 2px;
  color:#445;
  font-size:1.2rem
}
.all-post a:visited{
 color:#445;
 text-decoration:none
}
.all-post a:hover{
 outline:0;
 text-decoration:none;
 color:#eee
}
.all-post li{
  background:#eee;
  padding:.5rem 1rem;
  border-bottom:1px solid #c5c5c5
}
.all-post li span{
  color:#888;
  font-family:Impact,Charcoal,sans-serif;
  font-size:.7rem
}
.all-post li:nth-child(){
  background-color:#f5f5f5;
  border-bottom:1px solid #b5b5b5
}
.all-post li:hover{
 background:#1680c6
}
.all-post {
  margin:3px auto;
  font-size:1rem;
  font-weight:400;
  letter-spacing:1px
}
.all-post ol li strong em{
  font-style:italic;
  color:#d24f18
}
.all-post p a{
  margin:0 0 10px 0;
  padding:10px;
  color: #fff;
  font-size:1rem;
  line-height:16px;
  font-family:'Oswald',sans-serif;
  font-weight:normal;
  text-decoration:none;
  outline:1px dashed #98abb9;
  outline-offset:-2px;
  background-color:#1680c6;
  -webkit-box-shadow:2px 2px 2px #000;
  -moz-box-shadow:2px 2px 2px #000;
  box-shadow:2px 2px 2px #000
}
</style>


Screenshot del Indice aplicando los estilos:



Podéis ver el Índice del blog en el menú de navegación de la parte superior (versión de escritorio) o accediendo a la dirección https://www.tecnoblog.guru/p/indice.html




17 de agosto de 2015

Gadget para aumentar tu número de suscriptores - Blogger (Web Storage de HTML5)

Ya hablamos de la importancia del boletín electrónico o newsletter como herramienta de marketing y comunicación. También mencionamos las tres opciones de programación para implementar el código del gadget: a través de la ip del visitante, utilizando cookies o los métodos de almacenamiento del W3C Web Storage.

Y como lo prometido es deuda, voy a implementar el código de programación utilizando el método localStorage de HTML5.
Pero antes de ponernos a codificar vamos a realizar una breve introducción.

En las nuevas especificaciones de la W3C, HTML5 incorpora nuevos métodos para guardar información de los usuarios en los navegadores.
Para ello entran en acción Local Storage y Session Storage: estos dos métodos nos permiten guardar en el navegador pares de nombre/valor de manera muy sencilla.

¿qué ventajas fundamentales proporciona respecto de las cookies?

  • el almacenamiento DOM (DOM Storage) está diseñado para facilitar una forma amplia, segura y sencilla para almacenar información alternativa a las cookies.
  • la información se guarda en cliente web y no viaja con cada petición.
  • la capacidad de almacenamiento varía entre 2.5 y 5Mb dependiendo del navegador mientras que en las cookies el límite es de 4Kb.
    En la siguiente página web puedes comprobar cuantos caracteres puede almacenar tu navegador: Web Storage Support Test
  • el almacenamiento local es por dominio. Todas las páginas de un dominio pueden acceder a los mismos datos.
  • están soportados por los navegadores más modernos del mercado (IE/Edge, Firefox, Chrome, Safari, Opera, iOS Safari, Opera Mini, Android Browser, Blackberry Browser, Opera Mobile, Chrome for Android, Firefox for Android, IE Mobile, UC Browser for Android).
    Toda la información en Caniuse: Web Storage - name/value pairs

Estos son los pasos a seguir para añadirlo a nuestra web o blog


  1. Selecciona la entrada Diseño del panel principal de Blogger.
  2. Pulsa sobre el link Añadir un gadget y se abrirá una ventana con diferentes alternativas
  3. Desplazamos el scroll de la nueva ventana hacia abajo hasta llegar a la opción:

    HTML/JavascriptAñadir
    Añade una característica de un tercero u otro código a tu blog.





  4. En la caja Contenido pega el siguiente código:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jmacuna/subscription-feedburner@master/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    idleTime = 0;
    $(document).ready(function(){
    try{
     $limit = 5; //seconds
     if(!localStorage.test_status){
      function timerIncrement() {
       idleTime = idleTime + 1;
       if (idleTime > $limit) {
        $('html, body').css('overflow', 'hidden');
        $('.subs-popup ').fadeIn('slow');
        idleTime = 0;
       }
      }
      // Increment the idle time counter every second.
      var idleInterval = setInterval(timerIncrement, 1000); // 1 second
      // Zero the idle timer on mouse movement.
      $(this).mousemove(function (e) {
       idleTime = 0;
      });
      $(this).keypress(function (e) {
       idleTime = 0;
      });
      localStorage.test_status = 1;
     }
     $('.email-close').click(function() {
      $('.subs-popup').fadeOut('slow');
      $('html, body').css('overflow', 'auto');
      $limit = 9999;
     });
    }catch(e){
     alert(e.message);
    }
    });
    </script>
    <div class="subs-popup">
     <div id="newsletter">
      <div class="email-close">X</div>
      <div class="newsletter-wrap">
       <h4>Suscríbete y recibe<br/>contenido exclusivo</h4>
       <p>Las últimas novedades del blog<br/>directamente a tu email.<br/><br/></p>
       <form action="http://feedburner.google.com/fb/a/mailverify?loc=es-ES&uri=[FEED_DE_TU_BLOG]" method="post" onsubmit="$('.email-close').click();window.open('about:blank', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" novalidate="">
        <input name="uri" type="hidden" value="bloggertrix"/>
        <input name="loc" type="hidden" value="en_ES"/>
        <input type="email" value="" name="email" placeholder="Tu e-mail aqui..." required=""/><br/><br/>
        <input type="submit" value="Suscribirme" class="button-popup">
       </form>
      </div>
     </div>
    </div>
    
  5. Por último hacemos click sobre el botón Guardar

Vamos a analizar los parámetros que intervienen en el código:

  • $limit = 5: tiempo de espera en segundos (desde que se carga la página) para mostrar el popup de suscripción.
  • [FEED_DE_TU_BLOG]: feed de suscripción de tu blog.
    Más información en ¿Qué es el feed de un sitio?
Como indicación final, resaltar que la hoja de estilo que utilizo (style.css) así como el formulario son totálmente personalizables.




18 de febrero de 2015

Calendario con todos los post publicados en Blogger

Calendario Blogger
La mayoría de los gestores de contenido proporcionan herramientas precisas (widgets o plugins) para mostrar información acerca de los archivos publicados en el blog ordenados de forma cronológica. Si queremos dotar a nuestro blog de un diseño más atractivo, también podemos presentar un calendario de publicaciones.


Vamos a hacer ésto posible con tan sólo unas pocas líneas de código.

Éstos son los pasos a seguir:

  1. Selecciona la entrada Diseño del panel principal de Blogger.
  2. Pulsa sobre el link Añadir un gadget y se abrirá una ventana con diferentes alternativas
  3. Desplazamos el scroll de la nueva ventana hacia abajo hasta llegar a la opción:

    HTML/JavascriptAñadir
    Añade una característica de un tercero u otro código a tu blog.





  4. Introduce el Título del widgets (por ejemplo Calendario)
  5. En la caja Contenido pega el siguiente código:

    <div id='calendar'><strong>Loading...</strong></div>
    <script>
    var conf = {
     bgcolor: '#1e4e7e', 
     newtab:  1,         // 0:abre link en la misma ventana | 1:abre link en ventana nueva
     tooltip: true,      // false:title por defecto | true:tooltip con css3
     start:   1,         // 0:Domingo | 1:Lunes
     days:    "Lunes|Martes|Miercoles|Jueves|Viernes|Sabado|Domingo",
     months:  "Enero|Febrero|Marzo|Abril|Mayo|Junio|Julio|Agosto|Septiembre|Octubre|Noviembre|Diciembre",
     date:    "Ir al mes actual"
    }
    </script>
    <script src='https://cdn.jsdelivr.net/gh/jmacuna/calendar-widget@master/create-calendar.js' type='text/javascript'></script>
    <script src='https://www.tecnoblog.guru/feeds/posts/summary?max-results=1000&alt=json-in-script&orderby=published&callback=createCalendar' type='text/javascript'></script>
    
  6. Por último hacemos click sobre el botón Guardar

Vamos a analizar los parámetros de configuración:

  • bgcolor: color de fondo del calendario.
  • newtab: 0 para abrir el artículo seleccionado en la misma ventana o 1 para abrir el link en una ventana nueva.
  • tooltip: false para mostrar el tooltip por defecto o true para mostrarlo en forma de bocadillo.
  • start: 1 si queremos que el calendario empiece en Lunes o 0 si empieza en Domingo.
  • days: días de la semana. Nota: si ponemos la variable start a cero, el primer día de la semana en la variable days será el Domingo
  • months: meses del año.
  • date: texto que aparece cuando posicionamos el cursor encima de la fecha actual (parte inferior en color gris).
  • Tenemos que escribir la url de nuestro blog en el último script, dónde aparece https://www.tecnoblog.guru resaltado en negrita.

    Importante: si el calendario no se carga en tu página, lo más probable es que sea debido a la incompatibilidad del protocolo seguro como consecuencia de una redirección de tu blog a través de protocolo http (contenido mixto). En este caso, la solución es muy sencilla.
    Reemplaza la parte de la url https://www.tecnoblog.guru/feeds del script por https://www.blogger.com/feeds/TUIDDEBLOGGER, dónde TUIDEDEBLOGGER es el parámetro numérico que aparcen como blogID en tu blog.

    En mi caso: https://www.blogger.com/feeds/5415513870832441455/posts/summary?max-results=1000&alt=json-in-script&orderby=published&callback=createCalendar

    Y si aún así no funciona, no dudes en preguntarme a través del blog o de mi cuenta de correo info@tecnoblog.guru. Estaré encantado de ayudarte!!
Si ponemos la variable tooltip a true, tenemos que añadir la clase tooltip de la siguiente manera:

<style type="text/css">
.tooltip{
  position:absolute;
  display:none;
  border-radius:3px;
  background:#333;
  color:#fff;
  font-size:11px;
  font-family:Verdana,Geneva,sans-serif,Helvetica;
  padding:8px;
  white-space:pre-line
}
</style>


Instrucciones de uso:

  • Pulsa sobre las flechas ◀ y ▶ para moverte por los meses anterior/siguiente
  • Haz clic sobre el mes actual y aparecerá un desplegable con los doce meses del año
  • Haz clic sobre el año en curso y aparecerá un desplegable para seleccionar otro año.
    Deja pulsadas las flechas o para avanzar más rápido hasta el año deseado.
  • Si queremos volver a la situación inicial, haremos clic en la fecha actual que aparece en la parte inferior del calendario


Podéis ver el ejemplo funcionando a continuación.



Puedes descargarte el ejemplo para modificarlo o personalizarlo libremente en Calendario para Blogger.
Los ficheros que intervienen son:

Por último y a petición popular, os dejo el código html para insertar un calendario en cualquier blog (Blogger, Wordpress, Drupal, Joomla, etc) o Página Web:

<style type="text/css">
iframe#calendar html, #calendar body{
 overflow:hidden
}
iframe#calendar{
 position:absolute;
 border:0;
 width:240px;
 height:230px
}
</style>
<iframe id='calendar' src='about:blank' scrolling='no'></iframe>
<script>
var conf = {
    bgcolor: '#741826', //color del calendario
 start:   1, // 0:Domingo | 1:Lunes
 days:    "Lunes|Martes|Miercoles|Jueves|Viernes|Sabado|Domingo",
 months:  "Enero|Febrero|Marzo|Abril|Mayo|Junio|Julio|Agosto|Septiembre|Octubre|Noviembre|Diciembre",
 date:    "Ir al mes actual"
}
</script>
<script src='https://cdn.jsdelivr.net/gh/jmacuna/calendar-widget@master/create-calendar-iframe.js' type='text/javascript'></script>
Lo puedes visualizar en: Calendario web

Si quieres disponer del calendario en tu navegador Google Chrome, instala la extensión:

Calendario Anual en Google Chrome

Muchas gracias!!


6 de febrero de 2015

Librerías para Blogger alojadas en la CDN de Google

Una CDN (Content Delivery Network) o 'Red de Distribución de Contenidos' es un conjunto de servidores que redistribuyen localmente el contenido y guardan en caché los archivos permitiendo acelerar la carga de las páginas, mejorando los tiempos de respuesta y reduciendo el consumo de ancho de banda.

Vamos a poner como ejemplo un blog.

Todo el contenido del blog lo sirve el hosting dónde está alojado, haciendo uso de su propio ancho de banda.
Con el paso del tiempo tu blog irá creciendo en suscriptores y número de visitas.
Supongamos que publicas el post de tu vida que atrae centenares de miles de visitas y se te cae el servicio de hosting por exceso de peticiones o el acceso a tu página web es demasiado lento porque el ancho de banda se colapsa. Las consecuencias son evidentes: los usuarios acabarán no leyendo el artículo por lo que perderás clientes potenciales.

Entre otras cosas, una CDN evita esta situación:
si tu contenido (vídeos, imágenes, música, documentos, etc.) se replica en diferentes redes y países dirigiendo las solicitudes de los usuarios hasta la copia más cercana a su red, la probabilidad de que tu hosting se sature disminuye consiguiendo unos tiempos de respuesta más rápidos.


Imagen de Wikipedia: sistema tradicional de distribución de datos y CDN.

El espacio de almacenamiento que nos ofrece el servicio Blogger de Google es gratuito y está destinado exclusivamente para nuestro blog (entradas, texto, plantillas, comentarios, widgets y poco más), lo cual plantea ciertos inconvenientes.

Cuando publico un post, procuro dotarle de dinamismo añadiendo gráficos y vídeos explicativos. Blogger lo resuelve permitiendo subir imágenes en local, desde una url externa, desde su servicio Picasa, etc.
En el caso de los vídeos podemos publicarlos en Youtube y referenciarlos desde nuestra plantilla html.

Pero ¿qué ocurre si quiero utilizar ficheros de presentación css (hojas de estilo en cascada) o js (javascript) para implementar funcionalidades en mi web?

  • los alojamos en servicios externos: Google Drive, Dropbox ...
  • accedemos directamente a los que nos ofrecen las CDN de terceros
Blogger hace uso de sus CDN como podemos ver en las siguiente captura de pantalla de Firebug (haz clic en la imagen para ampliarla).



Google tiene su propia CDN con las librerías javascript de código libre y css más utilizadas por los desarrolladores web.
Ofrece un listado con el nombre de las librerías alojadas así como las versiones soportadas.

Para cargar una de sus librerías alojadas, copia y pega el fragmento HTML en tu página web. Por ejemplo, para cargar jQuery, insertamos el código <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>.

Recomienda cargar las librerías de la CDN a través del protocolo HTTPS, incluso si tu propio sitio web sólo utiliza HTTP.
Los archivos de la CDN se procesan con cabeceras CORS y Timing-Allow y permiten ser almacenados en caché durante un año.

Librerías disponibles:
(fecha de última actualización 2 de febrero de 2015)

Toda la información en https://developers.google.com/speed/libraries/devguide




Otras páginas que ofrecen librerías javascript y css en su Red de Distribución de Contenido son:


También podemos encontrar numerosas CDN para Wordpress.
Algunos plugins son gratuítos:


El siguiente vídeo (en inglés) nos habla de MaxCDN, una CDN de pago para integrar con WordPress, Drupal, Joomla, Magento, PrestaShop, Social Engine, X-Cart, IP.Board, vBulletin, OpenCart, PyroCMS, MODX, Custom.




12 de enero de 2015

Gadget para aumentar tu número de suscriptores - Blogger

Un newsletter o boletín electrónico es una poderosa herramienta de marketing y comunicación que informa a los usuarios acerca de noticias de interés, promociones y productos o servicios de forma regular y ayuda a construir una relación única con ellos, lo que conocemos como engagement y fidelización de clientes.

En el post anterior hablo de la importancia del Email Marketing en la fidelización de clientes. Échale un vistazo, no tiene desperdicio :)

Técnicamente, un newsletter es un mensaje en formato HTML que se envía por correo electrónico a una lista de suscriptores. Existen numerosas plantillas html gratis y de pago para newsletters pero el propósito de este post es proporcionar el código html necesario para su uso.

Los popups utilizados de forma correcta en tu web site pueden llegar a ser un instrumento muy útil para convertir a tus visitantes en suscriptores o clientes. Atrás quedaron las ventanas emergentes y banners molestos e intrusivos con anuncios o publicidad que nos asaltaban nada más visitar una página web.
En este sentido, debemos tomar en consideración la usabilidad como aspecto fundamental en el diseño.
Personalmente, me incomoda mucho que aparezcan ventanas emergentes de suscripción en todas y cada una de las páginas de un mismo sitio web. Para evitar ésto, contamos con tres posibilidades:

  • controlar la ip del visitante de tal forma que sólo nos la ofrezca la primera vez que visitamos la página. Ésto se hace desde el servidor o back-end.
  • almacenar la información del visitante en una cookie en la parte cliente o navegador web (front-end).
  • almacenar la información en el cliente web a través del método SessionStorage de html5 (lo soportan los navegadores más modernos del mercado).
En el ejemplo que muestro a continuación optaré por las cookies y me comprometo a codificar el resultado en html5 en un artículo posterior.

Éstos son los pasos a seguir:

  1. Selecciona la entrada Diseño del panel principal de Blogger.
  2. Pulsa sobre el link Añadir un gadget y se abrirá una ventana con diferentes alternativas
  3. Desplazamos el scroll de la nueva ventana hacia abajo hasta llegar a la opción:

    HTML/JavascriptAñadir
    Añade una característica de un tercero u otro código a tu blog.





  4. En la caja Contenido pega el siguiente código:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jmacuna/subscription-feedburner@master/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script>
    idleTime = 0;
    $(document).ready(function(){
     $limit = 5; //seconds
     if ($.cookie('test_status') != '1') {
      function timerIncrement() {
       idleTime = idleTime + 1;
       if (idleTime > $limit) {
        $('html, body').css('overflow', 'hidden');
        $('.subs-popup ').fadeIn('slow');
        idleTime = 0;
       }
      }
      // Increment the idle time counter every second.
      var idleInterval = setInterval(timerIncrement, 1000); // 1 second
      // Zero the idle timer on mouse movement.
      $(this).mousemove(function (e) {
       idleTime = 0;
      });
      $(this).keypress(function (e) {
       idleTime = 0;
      });
      $.cookie('test_status', '1', { expires: 30 });
     }
     $('.email-close').click(function() {
      $('.subs-popup').fadeOut('slow');
      $('html, body').css('overflow', 'auto');
      $limit = 9999;
     });
    });
    </script>
    
    <div class="subs-popup">
     <div id="newsletter">
      <div class="email-close">X</div>
      <div class="newsletter-wrap">
       <h4>Suscríbete y recibe<br/>contenido exclusivo</h4>
       <p>Las últimas novedades del blog<br/>directamente a tu email.<br/><br/></p>
       <form action="http://feedburner.google.com/fb/a/mailverify?loc=es-ES&uri=[FEED_DE_TU_BLOG]" method="post" onsubmit="$('.email-close').click();window.open('about:blank', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" novalidate="">
        <input name="uri" type="hidden" value="bloggertrix"/>
        <input name="loc" type="hidden" value="en_ES"/>
        <input type="email" value="" name="email" placeholder="Tu e-mail aqui..." required=""/><br/><br/>
        <input type="submit" value="Suscribirme" class="button-popup">
       </form>
      </div>
     </div>
    </div>
    
  5. Por último hacemos click sobre el botón Guardar

Vamos a analizar los parámetros que intervienen en el código:

  • $limit = 5: tiempo de espera en segundos (desde que se carga la página) para mostrar el popup de suscripción.
  • [FEED_DE_TU_BLOG]: feed de suscripción de tu blog.
    Más información en ¿Qué es el feed de un sitio?
Como indicación final, resaltar que la hoja de estilo que utilizo (style.css) así como el formulario son totálmente personalizables.

Puedes visualizar y descargar el ejemplo para integrarlo en tu blog en la siguiente dirección

Widget para Suscripción de Correo Electrónico




16 de diciembre de 2014

Comentarios con desplazamiento de texto para Blogger (efecto marquee)


Todos conocemos la importancia de un blog como herramienta de marketing online para cualquier actividad empresarial o negocio. Se trata de un instrumento muy competitivo y diferencial que actúa como canal de comunicación entre las empresas que ofrecen sus productos o servicios y los usuarios.

Un blog corporativo posibilita la interacción con nuestros clientes actuales y potenciales a través de comentarios, teniendo como finalidad aumentar la reputación de nuestra marca lo que se traducirá en la consecución de nuestros objetivos.
En cada acción que realizas o en cada comentario que alguien hace sobre ti, se está construyendo tú marca comercial o personal.

Para mostrar los comentarios recientes en nuestro blog, pagina o sitio web, podemos utilizar las herramientas que nos ofrecen los distintos gestores de contenido.
Ese plus de visibilidad nos los proporcionan los widgets o gadgets que permiten incrustar y presentar información relevante para el usuario final.

Blogger pone a nuestra disposición un gadget de muy fácil implementación y de máximo interés: un tablero con los últimos comentarios publicados en tu sitio web o blog..

Éstos son los pasos a seguir:

  1. Selecciona la entrada Diseño del panel principal de Blogger.
  2. Pulsa sobre el link Añadir un gadget y se abrirá una ventana con diferentes alternativas
  3. Desplazamos el scroll de la nueva ventana hacia abajo hasta llegar a la opción:

    HTML/JavascriptAñadir
    Añade una característica de un tercero u otro código a tu blog.





  4. Introduce el Título del widget (por ejemplo Últimos comentarios)
  5. En la caja Contenido pega el siguiente código:

    <script type="text/javascript">
     // Recent Comments Settings
     var
     numComments  = 10,
     showAvatar  = true,
     avatarSize  = 40,
     roundAvatar = true,
     characters  = 40,
     showMorelink = false,
     moreLinktext = "More »",
     defaultAvatar  = "http://i.imgur.com/3QqaBeS.png",
     hideCredits = true;
    </script>
    
    <script type="text/javascript" src="
    https://raw.githack.com/jmacuna/comments-avatar/master/recent_comments.html"></script>
    <script type="text/javascript" src="[URL DE TU BLOG]/feeds/comments/default?alt=json&callback=w2b_recent_comments"></script>
    
  6. Por último hacemos click sobre el botón Guardar

Vamos a analizar cada uno de los parámetros:

  • numComments: número de comentarios a mostrar.
  • showAvatar: 'true' si queremos mostrar el avatar (identidad virtual) del autor del comentario.
  • avatarSize: tamaño en píxeles de la imagen del avatar.
  • roundAvatar: 'true' para mostrar el avatar en forma redondeada.
  • characters: especifica el número de caracteres del comentario.
  • showMorelink: 'true' para que aparezca el link que nos lleva a la lectura de ese comentario.
  • moreLinktext: texto del enlace para acceder al comentario.
  • defaultAvatar: imagen por defecto para aquellos avatares que no disponen de imagen identificativa.
  • hideCredits: 'true'si queremos ocultar la url de la pagina del creador.
Como indicación final, sustituimos el texto [URL DE TU BLOG] por la dirección de nuestro blog (en mi caso: http://www.tecnoblog.guru).

Podéis ver el ejemplo funcionando en la columna derecha del blog, bajo la sección Suscribirse por Email (visible en la versión de escritorio).

Ahora vamos a dotar de mayor dinamismo al tablero con el efecto marquee (efecto de movimiento de los textos o comentarios).
Para ello, añadimos dos nuevas librerías javascript y la función jQuery para la ejecución del script.

El código resultante es el siguiente:

<table class="comments">
<tr><td class="title">Últimos comentarios</td></tr>
<tr><td><div class="scroller">
<script type="text/javascript">
var numComments  = 10,
    showAvatar  = true,
    avatarSize  = 40,
    roundAvatar = true,
    characters  = 40,
    showMorelink = false,
    moreLinktext = "More »",
    defaultAvatar  = "http://i.imgur.com/3QqaBeS.png",
    hideCredits = true;
</script>
<script src="https://cdn.jsdelivr.net/gh/jmacuna/comments-avatar@master/w2b_recent_comments_with_avatars.js"></script>
<script src="[URL DE TU BLOG]/feeds/comments/default?alt=json&callback=w2b_recent_comments"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jmacuna/comments-avatar@master/scrollForever.js"></script>
</div></td></tr>
</table>
<script type="text/javascript">$(document).ready(function({$(".scroller").scrollForever({dir:"top",container:"ul",inner:"li",speed:1000,delayTime:10,continuous:true,num:1});});</script>


Puedes visualizar y descargar el ejemplo para integrarlo en tu blog en la siguiente dirección:

Comentarios recientes con efecto 'marquee'


4 de diciembre de 2014

Carrusel de entradas recientes con imágenes para Blogger

Disponer de un diseño de calidad de tu web o blog es fundamental para el desarrollo de tu marca. El sitio web se convierte en la carta de presentación de tu proyecto. Del mismo modo que se juzgan personas por su apariencia, se juzgará y decidirá si tu negocio es interesante por el diseño de tu página web, al margen de que tus productos lo sean.

Existen estudios contrastados que señalan que la primera impresión es crítica:

  • El 75% de los usuarios evalúan la credibilidad de un sitio basándose en el diseño web.
  • El 68% de los compradores desconfían de un sitio que no parece profesionalmente diseñado.
Os invito a que leáis este interesante informe de una empresa de publicidad de San Francisco: Digital Strategies for Small Business [ pdf ]

Para atraer más visitantes y lectores a nuestro blog, pagina o sitio web, también utilizamos las herramientas que nos ofrecen los distintos gestores de contenido.
Ese plus de visibilidad nos los proporcionan los widgets o gadgets que permiten incrustar y presentar información relevante para el usuario final.

Blogger pone a nuestra disposición un gadget de muy fácil implementación y de máximo interés: Un carrusel o slider de imágenes con los artículos o entradas recientes.

Éstos son los pasos a seguir:

  1. Selecciona la entrada Diseño del panel principal de Blogger.
  2. Pulsa sobre el link Añadir un gadget y se abrirá una ventana con diferentes alternativas
  3. Desplazamos el scroll de la nueva ventana hacia abajo hasta llegar a la opción:

    HTML/JavascriptAñadir
    Añade una característica de un tercero u otro código a tu blog.





  4. Introduce el Título del widgets (por ejemplo Entradas recientes)
  5. En la caja Contenido pega el siguiente código:

    <link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
    <div id="slider-rotator" class="slider-rotator loading"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
    <script type="text/javascript">
    makeSlider({
       url: "https://www.tecnoblog.guru", // Add your blog URL
       numPost: 5,
       showDetail: true,
       summaryLength: 200,
       titleLength: 50,
       showThumb: true,
       squareThumb: false,
       autoHeight: false,
       crossFade: true,
       showNav: true
    });
    </script>
    
  6. Por último hacemos click sobre el botón Guardar

Nota importante


El autor de este widget, Taufik Nurrohman compartió libremente el código necesario para su funcionamiento pero los directorios de acceso público dónde se alojaban estas librerías ya no están disponibles.

Todos aquellos que quieran introducir el carrusel o hayan incorporado el carrusel a su blog y deseen seguir utilizándolo, tienen que realizar unos pequeños ajustes para que vuelva a funcionar de forma correcta. Los pasos a seguir son:



Vamos a analizar los parámetros de la función Slider:

  • url: añade la url de tu blog.
  • numPost: número de artículos a mostrar en el carrusel.
  • showDetail: 'false' si queremos ocultar el título y descripción del post.
  • summaryLength: número de caracteres a mostrar del resumen del artículo.
  • titleLength: 'auto' por defecto. Con este parámetro especificamos el número de caracteres del título.
  • showThumb: 'false' para ocultar los thumbnails del artículo
  • squareThumb: 'true' para mostrar la imagen en miniatura (thumbnail) a escala, con su ancho original y la relación de altura
  • autoHeight: 'true' para ajustar la altura del elemento que se muestra.
  • crossFade: para hacer el efecto de transición de imágenes de forma simultánea.
  • showNav: 'false' para ocultar la barra de navegación (contador numérico y flechas anterior y siguiente).
  • newTabLink: 'true' para abrir el link en una nueva ventana.
  • labelName: para especificar el nombre de la etiqueta del post o 'null' (por defecto) para mostrar todos los mensajes.
  • thumbWidth: tamaño en píxeles del thumbnail del post.
  • noThumb: especificamos una imagen por defecto para aquellos post que no tienen miniatura.
  • hoverPause: 'false' para que la presentación de imágenes siga corriendo aunque pasemos el ratón por encima.
  • interval: intervalo entre slides (en milisegundos).
  • speed: velocidad de presentación entre slides (en milisegundos).
  • navText: {
       prev: "&lt;", // Texto para mostrar el botón Anterior de navegación
       next: "&gt;" // Texto para mostrar el botón Siguiente de navegación
    },
Toda la información de la librería javascript en Blogger Feed Rotator Plugin

Podéis ver el ejemplo funcionando en la columna central del blog, bajo la sección Entradas Populares (visible en la versión de escritorio).



22 de enero de 2014

FeedBurner: como añadir entradas de un blog a tu web, sin plugins y en una línea de código.


FeedBurner es un proveedor de gestión de fuentes web propiedad de Google. Proporciona herramientas de gestión de fuentes web RSS a bloggers, podcasters, y otros publicadores de contenido basado en tecnología web.


A la velocidad con la que avanza la nueva era digital, hoy día, todo el mundo puede crear un blog o página web sin conocimientos avanzados de programación. Basta con utilizar uno de los numerosos CMS (Sistema de Gestión de Contenidos) en su versión gratuita o de pago de acceso en la red.
Todos los CMS ofrecen la posibilidad de instalar componentes extra (plugins, addons, widgets, etc), proporcionando al visitante del sitio web funcionalidades añadidas.

Si contamos con un blog y un sito web, es frecuente incorporar las publicaciones del blog en una de las páginas del sitio, por ejemplo en la sección 'últimas noticias'. Para tal propósito, podemos hacer uso de estos plugins.

En este post, utilizaremos el servicio FeedBurner para convertir el Feed (Fuente o Canal web) de cualquier blog en un fragmento de código HTML para integrar en tu página web.

Si tenemos una cuenta en Google, accederemos con los datos de la cuenta desde la dirección http://feedburner.google.com/

  • Puedes cambiar el idioma de la página al español en la parte superior derecha, haciendo clic en el enlace Languages.
  • Volvemos a la sección Mis feeds e introducimos la dirección de nuestro feed o blog como ilustra la siguiente imagen:



    Voy a hacerle un guiño a Bitelia, blog que sigo con asiduidad, por poner al alcance de todos información interesante acerca de software y aplicaciones para mejorar tu vida, guías de uso, trucos, listas, noticias y todo lo que necesitas para disfrutar de la tecnología.
    Escribimos http://feeds.hipertextual.com/bitelia en la caja de texto y pulsamos el botón Siguiente.
  • Aparece una pantalla en la que pondremos título al feed y una dirección que lo identifique (BlogBitelia). A continuación pulsamos el botón Siguiente.

  • Se nos muestra la confirmación de que el feed se ha creado correctamente:



    Hacemos clic en el botón Siguiente hasta llegar a la última pantalla:

  • Volvemos a la sección Mis feeds y accedemos al feed de Bitelia que acabamos de crear.
    Pulsamos en la pestaña Publicize(Publicita tu Feed) y hacemos clic en el servicio BuzzBoost(Publica tu blog como HTML).
    Prestemos especial atención a este apartado donde parametrizaremos la forma en que vamos a mostrar los artículos del blog: número de post a mostrar, título del feed, favicon, número de palabras por artículo, formato en texto plano o html, etc.
    Configuramos todos los parámetros de visualización del contenido y pulsamos el botón Activar.

  • Por último, copiamos el código generado para integrar en nuestra página web:

    <script src="https://feeds.feedburner.com/BlogBitelia?format=sigpro" type="text/javascript"></script>

    y vemos el resultado final:

Últimas noticias


15 de enero de 2014

Crea tu propio formulario de contacto para el blog o página web

email-contact

Vamos a diseñar un formulario de contacto de manera sencilla y sin conocimientos previos de programación, tan sólo usaremos un servicio externo y gratuito de creación y personalización de formularios.


Son numerosas las opciones disponibles para insertar un formulario en nuestro blog. Algunas de las más interesantes son:

  • Google Drive Formularios

    1. Un formulario es un documento de Drive y por tanto tiene su propio menú y su barra de botones. Se puede guardar con un nombre, duplicar, descargar y compartir.
    2. En la plantilla de formulario puedes añadir todos los elementos o campos que quieras. También puedes organizar el formulario añadiendo encabezados y dividiéndolo en varias páginas.
    3. Google también nos permite añadir un formulario a partir de una hoja de cálculo de Google Docs
    4. Información detallada: Cómo crear un formulario de Google.
    Google Drive Formularios
  • JotForm

    1. Debemos darnos de alta en su página web. En su versión gratuita podemos crear formularios de forma ilimitada, la restricción de espacio es de 100 megas y 100 envíos mensuales.
    2. Presenta un panel de personalización en castellano muy completo: cuenta con más de 50 plantillas diferentes, permite personalizar fuentes, colores, fondos, tamaño del formulario, etc.
    3. Podemos introducir campos de tipo cuadro de texto, áreas de texto, desplegables, botones de radio, casillas de verificación, campos para realizar pagos, podemos subir ficheros, imágenes, captcha.
    4. También tenemos la posibilidad de añadir al formulario vídeos de YouTube, Image Slider, SoundCloud...
    JotForm
  • EmailMeForm

    1. Para su uso, tenemos que registrarnos. La versión gratuita te permite crear un número ilimitado de formularios y ofrece hasta un máximo de 100 megas y 100 envíos al mes.
    2. Permite la subida de ficheros adjuntos de correo electrónico.
    3. Implementa la gestión de permisos de usuarios y protección por contraseña, así como código captcha anti-spam.
    4. Cuenta con versión adaptada para dispositivos móviles (Responsive Design).
    EmailMeForm
  • Foxyform

    1. Es el que utilizo para este blog por razones de peso:
      "no necesito registrarme, ofrece los campos suficientes para integrar en mi formulario y permite de forma básica configurar el color de fondo, color de fuente, fuente y tamaño de la fuente. Y todo en menos de un minuto".
      Podéis visualizarlo en este link.
      Nota: por motivos relativos al nuevo RGPD, finalmente he decidido migrar el formulario a JotForm.
    2. Además dispone de protección captcha y visualización previa.
    Foxyform
  • Kontactr

    1. Es necesario crear una cuenta en su plataforma.
    2. Dispone de protección Captcha.
    3. Permite personalizar el color de fondo del formulario y de las cajas de texto.
    4. Presenta el inconveniente de que los textos descriptivos de los campos están en inglés y no se pueden modificar.
    Kontactr
  • CloudContactForms

    1. Presenta características similares a la plataforma Kontactr.
    CloudContactForms