Blogger y los redireccionamientos personalizados

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

No es algo del otro mundo pero resizebrowser es una herramienta útil a la hora de verificar cómo se ve un sitio web en distintas resoluciones de pantalla ya que los avances que se ven en el tema monitores hacen que este sea un tema complicado. Antes era más fácil, 800x600 o 1024x640 y ahí se acababan las variantes pero hoy en día, las alternativas son múltiples y conviene verificar si lo que vemos es lo que otros verán.

Esto no significa que uno deba crear sitios para el 100% ya que sería casi imposible pero, siempre es bueno saber qué pasaría si ... y de ese modo decidir dónde estarán nuestros límites.

La herramienta funciona online y posee dos pestañas. La izquierda nos permite seleccionar las distintas resoluciones admitidas o agregar alguna personal y la superior usar un zoom y definir la proporción: 4:3, 16:10, 16:9 o móviles.

Luego, basta hacer click en cualquiera de los enlaces que se muestran de nodo gráfico, para que se abra el navegador en una nueva ventana, ya re-dimensionada y desde allí podemos navegar libremente o colocar la dirección URL del sitio que queremos verificar.

stroll es un script experimental creado por Hakimel que no pretende tener ningún uso práctico, simplemente, se trata de un efecto visual que funcionará sólo en los navegadores más modernos ya que hace un uso intensivo de las nuevas propiedades de estilo tales como transiciones, transformaciones y perspectivas.

Lo que permite es aplicar una serie de efectos a las listas que utilizan la propiedad overflow para mostrar sólo una parte del contenido y que el resto sea accesible mediante el uso de una barra de scroll vertical.

No tiene muchas explicaciones y en realidad, no son necesarias, podemos descargar el demo desde github y allí tendremos todo lo necesario para aplicarlo en nuestros propios proyectos. Para eso, basta tener dos cosas: los estilos y el script.

Los estilos se encuentran en el archivo stroll.min.css o stroll.css (son iguales) y no es necesario agregarlos todos, basta seleccionar el efecto deseado y descartar el resto. Lo más simple es copiar las reglas y agregarlas a nuestra plantilla.

El script también tiene dos versiones stroll.min.js y stroll.js; podemos usar cualquiera de ellas y la agregamos como siempre, antes de </head>

¿Y cómo lo usamos? Basta colocar la lista dentro de algún DIV contenedor al que identificamos mediante un ID y luego, llamar a la función:

<div class="demo">
  <ul class="zipper">
    <li>uno</li>
    <li>dos</li>
    <li>tres</li>
  </ul>
</div>
<script>stroll.bind('#demo ul');</script>

Todos los efectos funcionan de la misma manera y se distinguen estableciendo el atributo class en al etiqueta UL; en esta entrada, hay tres ejemplos distintos: curl, helix y zipper.

Un último detalle extra a tener en cuenta: establecer las propiedades mínimas de las etiquetas UL y LI de la lista a la que vamos a aplicar el efecto; un ejemplo:

#demo ul {
  height: 280px;
  list-style-type: none;
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 0;
  position: relative;
  width: 190px;
}
#demo ul li {
  background-color: #B0B9C1;
  color: #000;
  font-size: 20px;
  padding: 10px;
  position: relative;
  z-index: 2;
}
#demo ul li:nth-child(odd) {
  background-color:#EEE;
}

Este es un ejemplo sencillo para crear un menú desplegable que puede incluir submenús, que usa las posibilidades que nos brindan las nuevas propiedades del CSS3.

Como casi cualquier otro, el HTML se arma en una lista, utilizando etiquetas UL y LI que, se anidan si es que queremos crear un submenú. Esta sería una lista standard:

<ul class="mi-menu">
  <li><a href="URL_enlace_1"> texto_enlace_1 </a></li>
  <li><a href="URL_enlace_2"> texto_enlace_2 </a></li>
  <li><a href="URL_enlace_3"> texto_enlace_3 </a></li>
</ul>

y si quisiéramos que uno de esos enlaces fuera un submenú:

<ul class="mi-menu">
  <li><a href="URL_enlace_1"> texto_enlace_1 </a></li>
  <li>
    <a href="#"> texto_enlace_2 </a>
    <ul>
      <li><a href="URL_enlace_2.1"> texto_submenú_2.1 </a></li>
      <li><a href="URL_enlace_2.2"> texto_submenú_2.2 </a></li>
      <li><a href="URL_enlace_2.3"> texto_submenú_2.3 </a></li>
    </ul>
  </li>
  <li><a href="URL_enlace_3"> texto_enlace_3 </a></li>
</ul>

Así como está, veríamos algo similar a esto:

• texto_enlace_1
• texto_enlace_2
  • texto_submenú_2.1
  • texto_submenú_2.2
  • texto_submenú_2.3
• texto_enlace_3

Y ahora, el CSS que hará que esa lista se transforme en otra cosa:

• inicio
• un item
• un submenú
  • submenú 1
  • submenú 2
  • submenú 3
• otro item
• otro
• último

<style type="text/css">
  /* el menú en si mismo */
  .mi-menu  {
    border-radius: 5px;
    list-style-type: none;
    margin: 0 auto; /* si queremos centrarlo */
    padding: 0;
    /* la altura y su ancho dependerán de los textos */
    height: 40px; 
    width: 510px;
    /* el color de fondo */
    background: #555;
    background: -moz-linear-gradient(#555,#222);
    background: -webkit-linear-gradient(#555,#222);
    background: -o-linear-gradient(#555,#222);
    background: -ms-linear-gradient(#555,#222);
    background: linear-gradient(#555,#222);
  }

  /* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
  .mi-menu  br { display:none; }

  /* cada item del menu */
  .mi-menu  li {
    display: block;
    float: left; /* la lista se ve horizontal */
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  .mi-menu li a {
    border-left: 1px solid #000;
    border-right: 1px solid #666;
    color: #EEE;
    display: block;
    font-family: Tahoma;
    font-size: 13px;
    font-weight: bold;
    line-height: 28px;
    padding: 0 14px;
    margin: 6px 0;
    text-decoration: none;
    /* animamos el cambio de color de los textos */
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
  }
  /* eliminamos los bordes del primer y el último */
  .mi-menu li:first-child a { border-left: none; }
  .mi-menu li:last-child a{ border-right: none; }
  /* efecto hover cambia el color */
  .mi-menu li:hover > a { color: Crimson; }

  /* los submenús */
  .mi-menu ul {
    border-radius: 0 0 5px 5px;
    left: 0;
    margin: 0;
    opacity: 0; /* no son visibles */
    position: absolute;
    top: 40px; /* se ubican debajo del enlace principal */
    /* el color de fondo */
    background: #222;
    background: -moz-linear-gradient(#222,#555);
    background: -webkit-linear-gradient(#22,#555);
    background: -o-linear-gradient(#222,#555);
    background: -ms-linear-gradient(#222,#555);
    background: linear-gradient(#222,#555);
    /* animamos su visibildiad */
    -moz-transition: opacity .25s ease .1s;
    -webkit-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
  }
  /* son visibes al poner el cursor encima */
  .mi-menu li:hover > ul { opacity: 1; }

   /* cada un ode los items de los submenús */
  .mi-menu ul li {
    height: 0; /* no son visibles */
    overflow: hidden;
    padding: 0;
    /* animamos su visibildiad */
    -moz-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
  }
  .mi-menu li:hover > ul li {
    height: 36px; /* los mostramos */
    overflow: visible;
    padding: 0;
  }
  .mi-menu ul li a {
    border: none;
    border-bottom: 1px solid #111;
    margin: 0;
    /* el ancho dependerá de los textos a utilizar */
    padding: 5px 20px;
    width: 100px;
  }
  /* el último n otiene un borde */
  .mi-menu ul li:last-child a { border: none; }

</style>

REFERENCIAS:designmodo.com

Glyphish

Contiene 201 íconos de distintos tamaños en formato PNG. descargar

Pixicus

Contiene 106 íconos de distintos tamaños en formato PNG. descargar

Mimiglyphs

Contiene 80 íconos de 16x16 en formato PNG. descargar