Service Unavailable: El nuevo Blogger

Los rumores dicen que Blogger cambiará de nombre por Service unavailable pero sólo son rumores, nada está confirmado ...

Algunos usuarios están reportando inconvenientes similares y Blogger está al tanto de este tema.
Por de pronto te sugiero pruebes borrar cookies y temporales de internet, o utilizar otro navegador. También recargar la página puede servir.
Si el problema persiste, por favor contanos.

No vale la pena hacerlo. Sólo hay que soportar digo ... esperar.

La librería jQuery posee una serie de funciones simples que facilitan la forma en que podemos acceder a los datos de un feed en forma Json. La función getJSON es uno de esos métodos simplificados donde, en principio, bastaría colocar la dirección URL a leer.

$.getJSON('URL_A_LEER', function(variable) {
  // aca hacemos algo con los datos 
});

Usando esa función, podríamos leer cierta información que nos da Facebook, por ejemplo, algunos datos relativos a una página web o a las entradas de Blogger tales como la cantidad de Me Gusta que tiene, las veces que fue compartida, etc.

Esos datos son accesibles en esta dirección:

http://api.ak.facebook.com/restserver.php?v=1.0&method=links.getStats&urls=URL_PAGINA&format=json

así que podemos crear un script que la lea y luego, interpretar lso datos para mostrarlos en un DIV cualquiera que agregamos ahí donde quisiéramos verlo:

<div id="FBejemplo"></div>

y lluego, debajo de eso, podríamos poner el script para leer los datos de la página donde nos encontremos:

<script>
  var jsonUrl = "http://api.ak.facebook.com/restserver.php?v=1.0&method=links.getStats&urls="+location.href+"&format=json&callback=?";
  $.getJSON(jsonUrl, function(data) {
    // armamos la salida de esos datos
    var salida = "Me Gusta: " + data[0].like_count); // la cantidad de Me Gusta de esa página
    salida+ = "Comentarios: " + data[0].comment_count); // la cantidad de comentarios de Facebook
    salida+ = "Compartido: " + data[0].share_count); // la cantidad de veces que fue compartida
    // y la escribimos
    $("#FBejemplo").html(salida);
  });     
</script>

Hay otros datos accesibles tales como data[0].click_count, data[0].commentsbox_count y un dato general que suma todas las interacciones: data[0].total_count

No hace falta que los datos sean de la página que estamos viendo, podrían ser de cualquier otra, por ejemplo, acá se muestra lo que devuelve Facebook cuando coloco la URL del home:

Una serie de ejemplos de botones animados con CSS3 publicados por codrops. Todos ellos hacen un uso intensivo de las posibilidades que nos dan las propiedades CSS3 pero me concentro en el el ejemplo numero cuatro que es el que más me ha llamado la atención.

El botón es un enlace simple con una clase determinada pero, su contenido está formado por una serie de etiquetas SPAN:

<a href="#" class="a-btn">
  <span class="a-btn-text">un botón</span>
  <span class="a-btn-slide-text">animado</span>
  <span class="a-btn-icon-right">
    <span></span>
  </span>
</a>

Ese cúmulo de etiquetas internas es lo que nos permite crear la animación ya que podemos establecer propiedades diferentes para cada una de ellas.

• la clase a-btn-text será el texto visible
• la clase a-btn-slide-text el texto oculto que se mostrará al colocar el cursor encima del enlace
• la clase a-btn-icon-right será el contenedor de la imagen derecha

un botónanimado
varios ejemplosflexibles

Y ahora, las propiedades de estilo:

<style>

  /* el enlace es el contenedor */
  .a-btn {
    background:#CDE;
    background:-moz-linear-gradient(#CDE, #678);
    background:-webkit-linear-gradient(#CDE, #678);
    background:-o-linear-gradient(#CDE, #678);
    background:-ms-linear-gradient(#CDE, #678);
    background:-linear-gradient(#CDE, #678);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#CDE', endColorstr='#678',GradientType=0 );
    border:1px solid #89A;
    border-radius:20px;
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    display:inline-block;
    height:40px;
    line-height: 40px;
    margin:10px 0px;
    padding: 0 70px 0 20px; /* esto dependerá del tamaño de la imagen */
    position:relative;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    -ms-transition:all 0.3s linear;
    transition:all 0.3s linear;
  }

  /* el texto visible */
  .a-btn-text {
    color:#456;
    display:block;
    font-size:20px;
    text-shadow:0 1px 1px #FFF;
    white-space:nowrap;
    -moz-transition:all 0.2s linear;
    -webkit-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    -ms-transition:all 0.2s linear;
    transition:all 0.2s linear;
  }

  /* el texto oculto */
  .a-btn-slide-text {
    background:#456;
    color:#FFF;
    font-size:20px;
    font-family: Georgia;
    height:100%;
    line-height:40px;
    overflow:hidden;
    position:absolute;
    right:52px;
    text-align:left;
    text-indent:10px;
    text-shadow:1px 1px 1px #000;
    top:0px;
    white-space:nowrap;
    width:0;
    -moz-transition:width 0.3s linear;
    -webkit-transition:width 0.3s linear;
    -o-transition:width 0.3s linear;
    -ms-transition:width 0.3s linear;
    transition:width 0.3s linear;
  }

  /* el contenedor de la imagen derecha */
  .a-btn-icon-right {
    border-left:1px solid #89A;
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    height:100%;
    position:absolute;
    right:0;
    top:0;
    width:52px;
  }
  /* y la imagen */
  .a-btn-icon-right span {
    background:transparent url(arrow_right.png) no-repeat 50% 55%;
    height:38px;
    left:50%;
    margin:-20px 0px 0px -20px;
    opacity:0.7;
    position:absolute;
    top:50%;
    width:38px;
    -moz-transition:all 0.3s linear;
    -webkit-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    -ms-transition:all 0.3s linear;
    transition:all 0.3s linear;
  }

  /* los efectos hover */
  .a-btn:hover {
    padding-right:180px;
  }
  .a-btn:hover .a-btn-text {
    color:#000;
    text-shadow:0px 1px 1px #000;
  }
  .a-btn:hover .a-btn-slide-text {
    width:100px;
  }
  .a-btn:hover .a-btn-icon-right span {
    opacity:1;
  }

</style>

El contenedor es bastante flexible y, llegado el caso, si los textos son largos, lo que debemos hacer es aumentar los valores de estas dos reglas:

.a-btn:hover {} 
.a-btn:hover .a-btn-slide-text {}

todo el botón ...es un enlace

Cada día hay más herramientas online que nos permiten acceder a información de manera sencilla o compartirla de diversos modos. No todas nos sirven, no todas duran en el tiempo, algunas aparecen publicitadas en muchos sitios y uno quiere probarlas y son "privadas" o prometen que un futuro harán algo pero, por el momento, son inaccesibles para los simples mortales. algunos sitios de "noticias" se especializan en eso, en promover lo inexistente pero ... algo siempre queda.

En este caso, son sitios que vale la pena mirar y ver si pueden ser útiles.

CSS3 Click chart es una página donde podemos encontrar referencias rápidas a distintas propiedades con algunos ejemplos sencillos, advertencias y enlaces a artículos que amplían la información de cada tema.

Html 5 please es similar aunque la información que muestra es mucho más detallada.

Un poco más amplio es el servicio que ofrece DocHub tanto para CSS como para HTML, JavaScript, jQuery y otros lenguajes.

¿Quien probar si cierto script funciona y editarlo online? Puede usarse la herramienta de debug de w3schools.com ingresando a través de cualquier enlace Try it yourself de sus tutoriales; funcionan tanto con Javascript "clásico como con jQuery.

SnipSave permite crear, editar y guardar trozos de códigos para poder acceder a ellos desde cualquier parte.

Mozilla Thimble es una aplicación de Mozilla que nos permite escribir código HTML e ir viendo la previsualización de modo instantáneo en al misma pantalla. Lo interesante es que incluye la opción de publicar el resultado y compartirlo. Aunque aún está en desarrollo, el resultado es más que aceptable.

¿Más?

• HTML Instant
• codepad
• ideone
• cssdesk

Una de las nuevas opciones para configurar Blogger que sólo podemos ver en la nueva interfaz es la llamada Errores y re-direccionamientos que se encuentra en el apartado Preferencias de búsqueda. Allí, junto con la opción de crear páginas de error personalizadas hay otra que se titula Re-direccionamiento personalizado ¿Qué es esto?

La ayuda de Blogger nos dice algunas cosas pero lo mejor es probar y ver que sale ... sin temor a destruir nada. Si hacemos click en Editar, veremos algo así:

Allí, nos dicen que debemos agregar dos direcciones ¿cuáles? ¿cómo? ¿para qué?

Lo que nos permite esta opción es redirigir una página interna a otra página interna con una particularidad, esa dirección puede no ser una página inexistente ¿Confuso? Veamos un ejemplo sencillo. Si tengo una página estática con datos referidos a mi perfil, ontacto o cualquier otra cosa cuya URL es:

http://miblog.blogspot.com/p/el-titulo-de-la-pagina.html

y quisiera que esa URL fuera más corta, más clara, más "linda" y llamarla, por ejemplo:

http://miblog.blogspot.com/perfil

bastaría colocar esos datos en la opción de Blogger para que cualquier enlace a miblog.blogspot.com/perfil se re-direccionará automáticamente a la página real sin ventanas de advertencia ni problemas ya que se trataría de un re-direccionamiento desde el mismo servidor.

¿Cómo colocaría esos datos?

En De pondría la dirección "falsa" como un path interno, sin el protocolo http ni el dominio ni el subdominio; antecediendo todo con una barra: /perfil

Y en A pondría la dirección "real" con el mismo criterio: /p/el-titulo-de-la-pagina.html

Luego, guardaría y listo. Al acceder al enlace indicado en De, se abriría la pagina indicada en A.

¿Cuántas re-direcciones pueden hacerse? No hay información al respecto pero, evidentemente, puede haber varias así que si queremos agregar otra, basta repetir los mismos pasos.

¿Qué diferencia hay entre marcar y desmarcar el cuadro Permanente? No tengo idea.

¿Para qué podría servir esto aparte de crear URLs más amigables?

Podría usarse para redirigir entradas viejas o desactualizadas a una nueva entrada; para redirigir entradas eliminadas ... quien sabe; la opción existe, funciona bien y cada uno sabrá sacarle provecho o descartarla.

Concretamente, en este blog, no existe esta URL:

http://vagabundia.blogspot.com/ejemplo

pero si se hace click allí, se abrirá la página a la que se re-direcciona.

Para quienes no usamos la nueva interfaz de Blogger porque no nos gusta, nos resulta muy incómoda o simplemente no queremos cambiar, este mes de mayo era clave y, si bien aún no ha terminado y la espada de Damocles sigue pendiendo sobre nuestras cabezas, tal vez podamos tener un tiempo de respiro extra ya que, curiosamente, el mensaje de Blogger indicando que el cambio sería forzoso a fines de este mes, ahora ha cambiado por otro indicando que eso ocurrirá "en los próximos meses" o sea ... vaya uno a saber cuando. Mañana, en julio, nunca ... con Blogger, no se sabe; lo temporal puede ser permanente y lo permanente puede ser efímero.

Aparentemente, lo que hay son muchos problemas no resueltos en esa interfaz que han obligado a Blogger a demorar el cambio programado. En este momento, en mi caso, la opción Descripción de búsqueda parece haber desaparecido y sin embargo ... allí está, en el código fuente pero oculta ¿por qué?

Hay otras opciones ocultas que jamás habia visto: Etiquetas de robots personalizados que no sé que puede significar:

Y Enlace permanente que parecería servir para cambiar la URL de la entrada algo que sería muy útil ya que muchas veces aparecen cortadas o son "feas":

Veremos, veremos, veremos o ... no veremos nada. Blogger es una caja de sorpresas.

Este es un efecto creado exclusivamente con CSS donde ciertas palabras se animan, "cayendo" ordenadamente y son reemplazadas por otras usando transiciones y animaciones. En el sitio d los desarrolladores hay varios ejemplos con variaciones pero, todos comparten la misma idea general. En principio, empezamos con el HTML, una serie de etiquetas SPAN dentro de un DIV:

<div class="rw-sentence">
  <span>Un ejemplo</span>
  <span>donde las palabras</span>
  <span>se van cayendo:</span>
  <div class="rw-words rw-words-1">
    <span>uno</span>
    <span>dos</span>
    <!-- etc etc etc -->
    <span>tres</span>
  </div>
</div>

Eso es simple aunque si se coloca dentro de un psot de Blogegr, hay que tener cuidado con los saltos de línea.

Un ejemplo donde las palabras se van cayendo:

unodostrescuatrocincoseis

Y claro, el CSS:

<style>
  .rw-sentence { /* el DIV donde se verá el efecto */
    margin: 0 auto;
    text-align: left;
    width: 400px;
  }
  .rw-sentence span { /* cada uno de los párrafs */
    color: #AAA;
    font-size: 30px;
  }
  .rw-words { /* las palabras que caen */
    display: inline;
    text-indent: 10px;
  }
  .rw-words-1 span { /* la primera palabra */
    color: White;
    position: absolute;
    opacity: 0;
    overflow: hidden;
    /* la animación */
    -moz-transform-origin: 10% 75%;
    -webkit-transform-origin: 10% 75%;
    -o-transform-origin: 10% 75%;
    -ms-transform-origin: 10% 75%;
    transform-origin: 10% 75%;
    -moz-animation: rotateWord 18s linear infinite 0s;
    -webkit-animation: rotateWord 18s linear infinite 0s;
    -o-animation: rotateWord 18s linear infinite 0s;
    -ms-animation: rotateWord 18s linear infinite 0s;
    animation: rotateWord 18s linear infinite 0s;
  }
  /* la animación de las siguientes */
  .rw-words span:nth-child(2) { /* la segunda */
    color: Red;
    -moz-animation-delay: 3s; 
    -webkit-animation-delay: 3s; 
    -o-animation-delay: 3s; 
    -ms-animation-delay: 3s; 
    animation-delay: 3s; 
  }
  .rw-words span:nth-child(3) { /* la tercera */
    color: Aqua;
    -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    -o-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
    animation-delay: 6s;
  }
  .rw-words span:nth-child(4) { /* la cuarta */
    color: Bisque;
    -moz-animation-delay: 9s; 
    -webkit-animation-delay: 9s; 
    -o-animation-delay: 9s; 
    -ms-animation-delay: 9s; 
    animation-delay: 9s;
  }
  .rw-words span:nth-child(5) { /* la la quinta */
    color: CadetBlue;
    -moz-animation-delay: 12s; 
    -webkit-animation-delay: 12s; 
    -o-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s;
  }
  .rw-words span:nth-child(6) { /* la última */
    color: Yellow;
    -moz-animation-delay: 15s; 
    -webkit-animation-delay: 15s; 
    -o-animation-delay: 15s; 
    -ms-animation-delay: 15s; 
    animation-delay: 15s;
  }
   /* y las reglas de las animaciones para cada navegador */
  @-moz-keyframes rotateWord { /* Firefox */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -moz-transform: rotate(0deg); }
    19% { opacity: 1; -moz-transform: rotate(98deg); }
    21% { opacity: 1; -moz-transform: rotate(86deg); }
    23% { opacity: 1; -moz-transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; -moz-transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
  @-webkit-keyframes rotateWord { /* Chrome/Safari */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -webkit-transform: rotate(0deg); }
    19% { opacity: 1; -webkit-transform: rotate(98deg); }
    21% { opacity: 1; -webkit-transform: rotate(86deg); }
    23% { opacity: 1; -webkit-transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; -webkit-transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
  @-o-keyframes rotateWord { /* Opera */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -o-transform: rotate(0deg); }
    19% { opacity: 1; -o-transform: rotate(98deg); }
    21% { opacity: 1; -o-transform: rotate(86deg); }
    23% { opacity: 1; -o-transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; -o-transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
  @-ms-keyframes rotateWord { /* IE IE9/10 */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -ms-transform: rotate(0deg); }
    19% { opacity: 1; -ms-transform: rotate(98deg); }
    21% { opacity: 1; -ms-transform: rotate(86deg); }
    23% { opacity: 1; -ms-transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; -ms-transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes rotateWord { /* genérica */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; transform: rotate(0deg); }
    19% { opacity: 1; transform: rotate(98deg); }
    21% { opacity: 1; transform: rotate(86deg); }
    23% { opacity: 1; transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
</style>

REFERENCIAS:codrops