Vagabundia

Los comentarios y el salto al final de la página

2012-01-26T19:03:00.001-03:00

Otra más.

Con el nuevo sistema de comentarios, cuando uno entra a una página individual de cualquier blog que lo utilice, el navegador nos posiciona al final de la pagina, un poco más arriba del formulario en lugar de hacerlo como lo haría normalmente, al principio de ella.

En realidad no es así, no pasa en todos los navegadores, es algo que ocurre en IE, Firefox y Opera es decir, en todos ... menos en Chrome ... ¿casualidad?

Cuando buscamos información en los Grupos de Ayuda de Blogger, vemos que son muchos se quejan de lo mismo y las respuestas de los moderadores son "hemos comunicado el problema a los ingenieros" o "usen Chrome que ahí anda bien".

Son ese tipo de respuestas que dan ganas de patearlos desde acá a la luna sin etapas; de la segunda, NI HABLAR, yo quiero usar el navegador que se me de la gana porque se me da la gana y sin tener que dar explicaciones a nadie por mis elecciones.

La primera respuesta llama la atención: "informaremos del problema" ¿Quiere decir que los mentados ingenieros nunca miraron si su creación funciona en los distintos navegadores tal como hace cualquiera de nosotros que tenga dos dedos de frente? ¿Será posible que sean tan negligentes? Es una pregunta retórica, no hace falta contestarla.

De todos modos, una solución muy parcial al problema pueden verla activada en la misma entrada demo de siempre.

Digo que es parcial porque no soluciona el problema en Internet Explorer aunque parece hacerlo en Firefox y en Opera.

Para conseguir esto, que espero que sólo sea temporal, tenemos que hacer dos cosas sencillas. Primero, buscamos el script de los comentarios anidados y allí, modificamos el atributo defer tal como indica Oloman en una de sus entradas más recientes. En lugar de esto:

<script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/>

ponemos esto:

<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

Ahora, agregamos algo así antes de </head>

<style>
#comments {
    left: -10000px;
    position: fixed;
    top: -10000px;
}
</style>
<script>
//<![CDATA[
window.onload = (function(){
  document.getElementById("comments").style.position = "static";
}
//]]>
</script>

La regla de estilo sacará el DIV contenedor de los comentarios fuera de la ventana del navegador así que no lo veremos y el script, se ejecutará cuando se haya cargado la página, restaurando la posición de ese DIV y haciéndolo visible otra vez; de ese modo, se evitará que el script interno de Blogger que escribe ese contenido, afecte al resto el sitio.

Si se usa jQuery, en lugar de document.getElementById() podría ponerse algo así:

$("#comments").css({"position":"static"});

es indistinto, ambas cosas hacen lo mismo.

No hay garantías de que esto funcione en todos los blogs pero, se puede probar y ver.

Más problemas con los comentarios de Blogger

2012-01-25T02:42:00.006-03:00

¿No cansa este manoseo que hace Blogger de sus usuarios? Si Google quiere terminar con el servicio, que lo haga de una buena vez y listo; si quiere que todos nos mudemos a su red social y nos pasemos allí las horas mientras hacemos clicks en sus avisos y los aplaudimos: que lo digan; sólo pido que nos eviten esta tortura del hacer y rehacer cada vez que a alguno de sus cráneos desarrolladores se le ocurre que es mejor toquetear el sistema en lugar de ir al jugar un rato al Pacman y de esa manera, aparentar que "labura".

Durante la tarde, Gem@ me había comentado que veía algo raro, los avatares de los comentarios estaban mal y había otros detalles extraños. Me fijé, no vi nada y pensé que era uno de esos errores temporales a los que nos tiene acostumbrados Blogger pero ... hace un rato, entro a contestar comentarios y oh surprise, los comentarios se ven ... digamos mal para no ser exagerado; avatares desproporcionados o recortados, letras pequeñas, todos los detalles gráficos perdidos en la nada.

¿Qué ocurre?

La respuesta es simple, en el nuevo sistema de comentarios anidados, el CSS se encontraba en la misma plantilla, dentro de:

<b:includable id='threaded_comment_css'>

Lo había incluido Blogger en su momento pero ahora, ha desaparecido.

No lo ha hecho en todos los blogs, en mi cuenta, algunos aún sigue estando allí pero, tengo la sospecha que comenzará a ser quitado de todos porque se ha incluido dentro de uno de los archivos CSS que Blogger carga de modo automático. Si miramos el contenido de ese archivo, veremos las reglas de estilo originales.

¿Qué efecto tiene esto?

En los blogs que utilicen el nuevo sistema y hayan modificado esas reglas de estilo lo más probable es que deban comenzar de nuevo y agregar las reglas a la plantilla manualmente. Si aún están allí, les recomendaría hacer una copia de esa parte antes que se pierda; si ya no están ... habrá que comenzar de nuevo y agregar las reglas para sobrescribir las de Blogger. Para esto, lo más seguro es colocarlas entre etiquetas <style> </style> pero poner eso justo después de <body>

En los blogs que NO usan el nuevo sistema (como este) la solución puede ser más sencilla; el problema surge porque todas esas reglas de estilo afectan al DIV cuya clase es comments; si no usamos reglas indicando esa clase sino reglas usando el ID que se llama igual, basta ir a la plantilla y buscar esto:

<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>

y allí, solamente cambiamos el atributo class poniéndole otro nombre (insultos a Blogger son aceptados) o lo eliminamos:

<b:includable id='comments' var='post'>
  <div class='miscomentarios' id='comments'>

Con eso, estaremos a salvo un rato más, hasta que a alguien se le ocurra otra idea excitante ...

ACTUALIZACIÓN:

Sugeriría que la clase comments, no sólo se cambie en los blogs que no usan el nuevo sistema sino también en los que lo usan; de ese modo, el CSS será más corto y ya no sufrirá cambios cada vez que a Blogger se le de la gana modificarlo.

Para eso, basta buscar:

<b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments'>

y darle otro nombre:

<b:includable id='threaded_comments' var='post'>
  <div class='OTROScomments' id='comments'>

de ahí en más, busquen las referencias a las reglas:

.comments

y cámbienlas por

.OTROScomments

o el nombre que le hayan dado a esa nueva clase.

Esto es lo que hice en el demo y me ahorró dolores de cabeza.

Alternativas para numerar los comentarios

2012-01-24T00:05:00.002-03:00

Respondiendo a Chary Cirujano y otros visitantes que preguntan cosas parecidas, esta es una de las formas de modificar la numeración de los comentarios para que las "respuestas" anidadas se ven un poco distintas o se numeren de otro modo.

En el mismo ejemplo de siempre, pueden verse las tres variantes, basa hacer click sobre los enlaces para verlas en acción y todas ellas tienen como base lo explicado en esta entrada.

La primera opción es la más simple: hacer que el contador de respuestas tenga un estilo diferente, por ejemplo, un color o una fuente; para eso, agregaríamos esta regla:

.comments .comment-replies .comment-block:before {
  color: #08C;
  font-size: 20px;
}

dependiendo del orden en que tengamos las reglas, puede requerir el agregado de la palabra !important; por ejemplo:

color: #08C !important;

La segunda opción lo que hará es resetear el contador de respuestas de tal modo que los comentarios tendrán numeraciones distintas:

.comments .comment-replies {
  counter-reset: contadorcomentarios;
}
.comments .comment-replies .comment-block:before {
  color: #08C;
  font-size: 20px;
}

La tercera opción combina ambas cosas, acá se agrega un segundo contador y se muestran ambos:

.comments .comment-replies {
  counter-reset: contador_reply;
}
.comments .comment-replies .comment-block:before {
    color: #08C;
    font-size: 20px;
    content: counter(contadorcomentarios, decimal) " [" counter(contador_reply, decimal) "]";
    counter-increment: contador_reply;
}

En este último caso, lo que hacemos es armar la salida visible, uniendo los datos y cualquier otro carácter.

Emoticones en el nuevo sistema de comentarios

2012-01-23T00:04:00.001-03:00

Si usamos los comentarios de nuevo estilo, otra vez vamos a tener que cambiar el script que agrega los emoticones ya que el viejo sistema, no funcionará (las viejas entradas: 1 | 2 | 3)

El problema surge porque Blogger añade los comentarios usando JavaScript así que ahora, debemos "esperar que sean escriots" y recién luego, analizar el texto y cambiar las imágenes.

Desplegamos los artilugios y buscamos el includable cuyo ID es threaded_comments y veremos estas líneas:

<div id='comment-holder'>
  <data:post.commentHtml/>
</div>

donde eso en color son los comentarios en si mismo; allí es donde interceptamos la página y agregamos la llamada al script:

<div id='comment-holder'>
  <data:post.commentHtml/>
  <script type='text/javascript'>NEWemoticonComentario();</script>
</div>

Ahora, deberíamos agregar el script antes de </head> y allí, pondré dos funciones, la primera, será la lista de los emoticones y es muy similar a lo que ya usábamos; la segunda es la que hará los cambios:

<script type='text/javascript'>
//<![CDATA[

// llega con el texto del comentario y lo devuelve modificado
function DRAWemo(cualTexto){
  cualTexto = cualTexto.replace(/:\)/g,'<img width="15" height="15" src="URL_imagen" />');
  // ....... sigo agregando la lista
  // y termino así:
  return cualTexto;
}

// busca los textos de los comentarios
function NEWemoticonComentario() {
  // vamos a cambiar aprte del contenido del DIV cuyo ID es comment-holder
  var  c = document.getElementById("comment-holder");
  if(c!=null) {
    // si existe, creamos una lista con todas las etiquetas BLOCKQUOTE que es donde estan los textos
    var listacoms = c.getElementsByTagName("blockquote");
    if(listacoms.length>0){
      // si hay comentario, lo leemos uno por uno
      for(var i=0; i<listacoms.length; ++i) {
        // leemos el contenido del comentario en formato HTML
        comlTexto = listacoms[i].innerHTML;
        // y lo cambiamos     
        listacoms[i].innerHTML = DRAWemo(comlTexto);
      }
    }
  }
}

//]]>
</script>

Si se usa jQuery, la segunda creo que podría simplificarse de este modo:

function NEWemoticonComentario() {
  $("blockquote.comment-content").each(function(index) {
    var nuevoTexto = DRAWemo($(this).html());
    $(this).html(nuevoTexto);
  });
}

Eso es todo y el ejemplo sigue estando en la misma entrada del blog de pruebas

Textify: Imágenes transformadas en textos

2012-01-21T00:03:00.001-03:00

Textify es una idea extraña pero divertida; convierte cualquier imagen que arrastramos o subimos, en otra, donde sólo se utilizan caracteres de texto.

El servicio es realmente rápido y posee un panel con una serie de opciones que podemos elegir e ir viendo el resultado para, finalmente, poder descargar neustra obra de arte en formato PNG.

REFERENCIAS:webappers.com

Comentarios anidados: Los estilos paso a paso (2)

2012-01-19T00:04:00.003-03:00

Seguimos con los comentarios anidados y vamos a establecer las reglas del texto del comentario en si mismo:

.comments .comments-content .comment-content {
  color: #666;
  font-family: Trebuchet MS;
  font-size: 13px;
  line-height: 1.3;
  margin: 0;
  padding: 15px 5px 10px;
}

y los enlaces Responder y Suprimir

.comments .comment .comment-actions a {
  background-color: #FFF;
  border-radius: 8px;
  box-shadow: 0 0 2px #000 inset;
  color: #888;
  float: right;
  font-family: Tahoma;
  font-size: 11px;
  margin: 0 2px;
  opacity: .7;
  padding: 1px 10px 3px;
  text-decoration: none;
  text-transform: lowercase;
}
.comments .comment .comment-actions a:hover {
  opacity: 1;
}

Y los comentarios anidados los separamos un poco hacia la izquierda y les quitamos la secuencia de color par/impar:

.comments .comments-content .comment-replies {
  clear: both;
  margin: 15px 0 0 25px;
}
.comments .comments-content .comment-thread ol li ol li {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

Debajo de todo eso, está el enlace "Responder" y nos queda un enlace que dice "Respuestas" que despliega y contrae las respuestas si es que las hay:

.comments .continue {
  display:inline-block;
}
.comments .continue a {
  background-color: #FFF;
  border-radius: 8px;
  box-shadow: 0 0 2px #000 inset;
  color: #888;
  font-family: Tahoma;
  font-size: 11px;
  margin: 0 2px;
  opacity: .7;
  padding: 1px 10px 3px;
  text-decoration: none;
  text-transform: lowercase;
}
.comments .continue a:hover {
  opacity: 1;
}
.comments .thread-toggle {
  background-color: #FFF;
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0 0 2px #000 inset;
  cursor:pointer
  display: inline-block;
  margin: 0 2px;
  opacity: 0.7;
  padding: 1px 10px 3px;
}
.comments .thread-toggle:hover {opacity: 1;}
.comments .thread-toggle a {
  color: #888;
  font-family: Tahoma;
  font-size: 11px;
  text-decoration: none;
  text-transform: lowercase;
}
.comments .comments-content .comment-thread:empty {
  display:none;
}

Dejamos las flechitas que usa Blogger:

.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 7px;
  width: 10px;
}
.comments .thread-expanded .thread-arrow {
  background: transparent url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat 0 0;
}
.comments .thread-collapsed .thread-arrow {
  background: transparent url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat 0 0;
}

Lo único que nos faltaría es el formulario de comentarios sobre el que mucho no podemos hacer, solo trataré de centrarlos. Hay dos tipos básicos:

.comment-replybox-thread  { /* el que está debajo de los comentarios */
  padding: 10px 0 0 20px;
}
.comments .comment-replybox-single { /* el que se muestra dentro de los replies */
  padding: 5px 0 0 0px;
}

Un detale extra, el enlace "Carar más ..." que se muestra al final cuando hay demasiados o no se han terminado de cargar:

.comments .comments-content .loadmore {
  background-color: #F0F0F0;
  border-radius: 16px;
  box-shadow: 0 0 10px #888 inset;
  font-family: Tahoma;
  height: 32px;
  line-height: 32px;
  margin: 20px auto;
  text-align: center;
  text-transform: lowercase;
  width: 80%;
}
.comments .comments-content .loadmore a {
  color: #888;
  font-size: 20px;
}
.comments .comments-content .loadmore:hover a {
  color: #000;
}
.comments .comments-content .loadmore.loaded {
  opacity: 0;
  overflow: hidden;
}

Y el resultado final es el que puede verse en este demo online aunque quedan cosas sin resolver con reglas de estilo que no tngo idea qué uso tendrán ya que hacen referncia a clases que no existen o carecen de contenido:

.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}

Comentarios anidados: Los estilos paso a paso (1)

2012-01-18T00:04:00.000-03:00

¿Y que pasa si quito todo el CSS de los nuevos comentarios?

No es que lo recomiende pero, sin duda, si quiero personalizar esa parte del blog, prefiero empezar desde cero antes que tratar de modificar las propiedades existentes ya que los desarrolladores de Google suelen ser poco eficientes a la hora de simplificar códigos y no me gusta andar emparchando cosas.

En estos casos, siempre hago lo mismo, olvidarme de lo que está y verlo al desnudo, sin propiedades, quitando márgenes, flotaciones, paddings, bordes y cualquier otra detalle para poder tener una idea básica de cómo están armadas la etiquetas que no son otra cosa que rectangulitos a los que luego podré manipular (o no).

Como no soy suicida, lo haré en un blog auxiliar, en este caso, en uno de pruebas donde hay una plantilla mínima para que sea lo más genérico posible y donde importé alguna entrada con viejos comentarios fuera de contexto pero que sirven para experimentar.

Ni siquiera debo borrar cosas, busco:

<b:include name='threaded_comment_css'/>

y "lo comento" para que no se ejecute:

<!-- <b:include name='threaded_comment_css'/> -->

Tendré entonces los comentarios anidados sin detalles gráficos más allá de los definidos genéricamente en la plantilla y tal como los mostraría el navegador por defecto [ ver captura ]

Si miro el código fuente, los comentarios, incluyendo el formulario, están en un rectángulo cuyos atributos ID y class tienen el mismo nombre, se llaman comments. Arriba, una etiqueta H4 muestra el texto con la cantidad de comentarios y debajo, otro DIV con la clase comments-content sirve de contenedor genérico que, a su vez, tiene otro DIV interno llamado comment-holder y otro DIV más y otro y otro ... y recién luego está la etiqueta OL con el contenido de cada comentario en etiquetas LI:

<div id="comments" class="comments">
  <h4> XX comentarios: </h4>
  <div class="comments-content">
    <div class="comment-holder">
      <div id="bc_XXXXXX" kind="c">
        <div id="bc_XXXXXX">
           <div id="bc_XXXXXX" class="comment-thread" u="0" t="0" kind="r">
             <ol id="bc_XXXXXX">
                <li id="bc_XXXXXX" class="comment" kind="b"> ............ </li>
                ..................
                <li id="bc_XXXXXX" class="comment" kind="b"> ............ </li>
             </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Comienzo entonces, borrando todo el contenido del CSS que es lo que está en:

<b:includable id='threaded_comment_css'>
  <style>
    ....... borro todo .......
  </style>
</b:includable>

y allí, entre <style> y </style>, es donde agregaré las reglas de estilo que vaya definiendo.

Lo primero que haré será colocar las del contenedor general; si no se tiene idea del espacio real que ocupa ese rectángulo, puede ponerse un color de fondo aunque sea provisorio y si quiero establecer las propiedades del título, las colocaré en #comments h4 {} que suele estar definido en otra parte de la plantilla; en este ejemplo, las ignoraré:

.comments {
  clear: both;
  margin: 0;
  padding: 0;
}

Como voy a numerarlos, definiré el contador:

.comments .comments-content {
    counter-reset: contadorcomentarios;
    overflow: hidden;
    position: relative;
    width: 100%;
}

Todos esos DIVs internos no me sirven de nada así que estableceré las reglas de la lista OL LI, separando verticalmente estas últimas porque les quiero poner un color de fondo que permute (los impares tendrán un color y los pares otro):

.comments .comments-content .comment-thread ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.comments .comments-content .comment {
background-color: #F0F0F8;
  border-bottom: 1px solid #CCE;
  border-top: 1px solid #CCE;
  margin: 5px 0;
  padding: 10px;
}
.comments .comments-content .comment:nth-child(2n+1) {
  background-color: #E8E8F0;
}

Hasta acá, tendré algo como lo que muestra esta imagen.

Y ahora voy a tener que meterme en el contenido de cada etiqueta LI que también es bastante engorroso pero, allá vamos; tiene cuatro grandes secciones:

<li id="bc_XXXXXX" class="comment" kind="b">
  <div class="avatar-image-container"> ....... </div>
  <div id="XXXXXX" class="comment-block"> ....... </div>
  <div id="bc_XXXXXX" class="comment-replies"> ....... </div>
  <div id="bc_XXXXXX" class="comment-replybox-single"> ....... </div>
</li>

La imagen del comentarista a la izquierda; defiimos su tamaño máximo, bordes y detalles decorativos varios:

.comments .avatar-image-container {
  background-color: #FFF;
  border: 1px solid #88B;
  float: left;
  height: 45px;
  line-height: 45px;
  overflow: hidden;
  padding: 1px;
  text-align: center;
  width: 45px;
}
.comments .avatar-image-container img {
  max-height: 45px;
  /* eventualmente, usar max-width: 45px; */
}

El DIV inferior con la numeracion:

.comments .comment-block {
  position: relative;
}
.comments .comment-block:before {
  color: #00BFFF;
  content: counter(contadorcomentarios, decimal);
  counter-increment: contadorcomentarios;
  font-family: Helvetica;
  font-size: 30px;
  position: absolute;
  right: 0;
  top: 0;
}

El DIV comment-block inferior contiene tres partes; en comment-header está el nombre del comentarista y a fecha:

.comments .comment-header {
  height: 50px;
}
.comments .comments-content .user {
  padding: 10px 0 0 10px;
}
.comments .comments-content .user, .comments .comments-content .user a {
  color: #00BFFF;
  font-family: Tahoma;
  font-size: 18px;
  font-style: normal;
}
.comments .comments-content .datetime {
  color: #666;
  display: block;
  font-family: Arial;
  font-size: 11px;
  padding: 2px 0 0 60px;
}

Esa parte también incluye una etiqueta que, por ahora, no parece tener ningún uso:

<span class="icon user blog-author"></span>

Ya va tomando forma [ ver captrura ] pero sigo ,mañana

Numerar los nuevos comentarios de Blogger

2012-01-16T00:01:00.000-03:00

Quienes tenían aplicadas personalizaciones en los comentarios y hayan decidido usar el nuevo sistema que los anida e incluye la posibilidad de Reply, se habrán visto en problemas ya que esa personalización se ha perdido y deben empezar otra vez.

El nuevo sistema ha dejado de ser lo que era y, bien o mal, Blogger ha decidido mostrar los comentarios utilizando JavaScript con lo cual, ciertas cosas se complican.

La más simple de resolver es la numeración de los comentarios ya que, tal como mostraba en esta otra entrada, es algo que podemos agregar usando sólo CSS y que funcionará en cualquier navegador.

En el nuevo modelo, debemos modificar y agregar algunas reglas; expandimos la plantilla y buscamos:

<b:includable id='threaded_comment_css'>

adentro, están las reglas de estilo de los comentarios, una de ellas es la clase .comments .comments-content, allí, agregamos esto:

.comments .comments-content {
  .......
  counter-reset: contadorcomentarios;
}

luego, verificamos qoe esta regla tenga la propiedad position: relative; si no la tiene, la agregamos:

.comments .comment-block {
  .......
  position: relative;
}

Por último, debajo de la anterior ponemos lo siguiente:

.comments .comment-block:before {
  /* el contador */
  content: counter(contadorcomentarios, decimal);
  counter-increment: contadorcomentarios;
  /* la posición dentro del rectángulo */
  position: absolute;
  right: 0;
  top: 15px;
  /* las propiedades gráficas de la fuente */
  color: #9AB;
  font-family: Century Gothic;
  font-size: 36px;
}

Y listo.

Esa regla escribirá el número de modo automático y, por supuesto, puede cambiarse. La posición del número la controlaremos con top, right, bottom y left y el el resto con las propiedades de estilo normales para cualquier texto.

Originales íconos sociales

2012-01-15T00:05:00.000-03:00

Social media icons by carizzo
	Contiene 17 íconos de 600x600, en formato PNG. descargar

Isometric 3D by pixeden
	Contiene 376 íconos de 32x32, 64x64, 128x128 y 256x256, en formato PNG. descargar

Starry Site
	Contiene 16 íconos de 68x65, en formato PNG. descargar

Old bottle crowns
	Contiene 20 íconos de 200x200, en formato PNG. descargar

Blogger: Comentarios anidados, reply y dudas

2012-01-12T20:46:00.001-03:00

Blogger ha implementado el sistema de comentarios anidados con opción de Reply en cada uno de ellos y esto trae algunos dolores de cabeza ya que el sistema se aplica a todos los blogs, sin importar la plantilla que se use, sea esta de las nuevas o no.

En todas ellas, veremos (en realidad hace tiempo que ya está pero no tenían uso), estos cuatro elementos includable dentro del widget llamado Blog1 que es el que contiene las entradas:

<b:includable id='threaded_comment_js' var='post'>
...
</b:includable>

<b:includable id='threaded_comments' var='post'>
...
</b:includable>

<b:includable id='threaded-comment-form' var='post'>
...
</b:includable>

<b:includable id='threaded_comment_css'>
...
</b:includable>

El primero es el script que usa Blogger para mostrar los comentarios; el segundo es el contenedor de esos comentarios de nuevo estilo, el tercero es el formulario para ese modelo y el ultimo son las reglas de estilo de esa sección.

Por ahora, los dolores de cabeza y dudas que se presentan son tres:

tengo todo eso pero no se ve nada
tengo todo eso y se ve pero no funciona
tengo todo eso, se ve, funciona pero no lo quiero usar

Como dije, los includables están en todas las plantillas pero, si alguien quiere utilizar el sistema y no lo ve implementado, es posible que falte un código que es el que va en el includable llamado main; allí, seguramente veremos una o dos veces, el siguiente código:

<b:include data='post' name='comments'/>

y ninguna referencia al nuevo sistema así que bastaría reemplazar eso por esto:

<b:if cond='data:post.showThreadedComments'>
  <b:include data='post' name='threaded_comments'/>
<b:else/>
  <b:include data='post' name='comments'/>
</b:if>

Y al revés, si NO quisiéramos usar el nuevo sistema, borraríamos eso y dejaríamos sólo:

<b:include data='post' name='comments'/>

El tercer error que he visto afecta a quienes usamos Prototype+Scriptaculous; en ese caso, lo que no parece funcionar es el "Responder" y eso se corrige cambiando la forma de cargar estas librerías ya que es un error similar al que ocurría con los Seguidores; si usamos las API de Google, podemos cargarlas de este modo aunque esto es dudoso:

<script src='http://www.google.com/jsapi'/>
<script>
  google.load(&quot;prototype&quot;, &quot;1&quot;);
  window.JSON = {
    parse: function (st) { return st.evalJSON(); },
    stringify: function(obj) { return Object.toJSON(obj); }
  };
  google.load(&quot;scriptaculous&quot;, &quot;1&quot;);
</script>

Por último, hay que tener en claro que el nuevo sistema no usa las mismas reglas de estilo que el anterior y por lo tanto, el resultado gráfico, si es que se ha personalizado toda esa parte, podrá ser ... cualquier cosa y habrá que comenzar a toquetear las cosas para acomodarlas nuevamente.

Todas las definiciones de estilo de este modelo se encuentran en threaded_comment_css y pueden ser modificadas allí ... con paciencia, prudencia y tratando de no insultar demasiado a los desarrolladores de Blogger.

Veremos si a lo largo de los días puedo ir poniendo los detalles de eso y de que manera ir re-acomodando las cosas y los distintos trucos o personalizaciones que ya han sido publicadas.

La etiqueta CANVAS (introducción)

2012-01-12T00:03:00.001-03:00

Canvas es una nueva etiqueta de HTML5 que permite generar gráficos de manera dinámica en una página y es soportada por Firefox, Opera, Safari e Internet Explorer 9 o superior.

Aunque por ahora es poco utilizada, se supone que será una de esas cosas que en un futuro cercano, transformarán la web.

Es una etiqueta vacía, un contenedor donde puede escribirse, dibujarse o agregarse imágenes que se controlan con JavaScript y por lo tanto, pueden ser modificados en tiempo real, creándose ilustraciones, animaciones, juegos ... casi cualquier cosa.

Hay muchos demos dando vueltas en la red; los diseñadores están experimentando y con esfuerzo, han conseguido cosas notables.

Por ejemplo, somethinghitme.com ha creado una réplica del viejo juegoSpace Invaders al que ha llamado Canvas Invaders y que podemos ver funcionando haciendo click en este enlace, ejecutándose aca mismo, en una ventana modal .

Algo similar se puede ver en un puzzle llamado Lights Off o en una réplica de Juego de la Vida de Conway, el Pacman de arandomurl.com, el extraño personaje animado creado por hakim.se, los puzzles de ~jcm, los demos de Kevin Roast, Mario Kart, CubeOut, Harmony, Biolab Disaster, el Canvas 3D de dhteumeuleu, Google Images Gift Box, los juegos de Dustin Montgomery, etc, etc.

Ya que no es una etiqueta que soporten las viejas versiones de Internet Explorer, hay una serie de proyectos que intentan solucionar el tema aunque lo logran de manera parcial o limitada. Uno de los más difundidos es el llamado ExplorerCanvas que no es otra cosa que un script que podemos agregar de manera condicional.

Por ejemplo una aplicación como Canvas Painter que también esta agregada a esta entrada y se abre en una ventana modal, debería funcionar en Internet Explorer 8.

La mayor parte de estos experimentos pueden descargarse e incluirse en cualquier página web y hacer eso no tiene demasiados secretos, se agregan como cualquier otro script; por ejemplo, este es uno llamado canvascape que funcionará de manera errática en IE8:

Hasta ahí no hay mayores problemas, hacemos un copypaste de algo y listo pero me da la impresión que estas facilidades van a ir más allá porque no es demasiado difícil generar nuestros propios gráficos así que vamos a ver si por lo menos, logramos empezar a descubrir de qué se trata esta nueva etiqueta, cómo utilizarla y luego, como siempre, todo quedará en manos de nuestra paciencia e imaginación.

text-decoration y el CSS3

2012-01-11T00:01:00.001-03:00

Es bastante común que uno lea algo interesante, algún truco o script que nos llama la atención y luego, cuando abrimos el demo, aparece un cartelito que nos dice que eso no funciona en nuestro navegador o, peor aún, no nos dice nada y nos quedamos preguntándonos ¡qué demonios pasa!

Lamentablemente, la moda-fiebre Chrome hace que eso sea un problema permanente y en lo personal, me parece muy molesto ya que, bastaría advertirlo previamente o dar alternativas porque, salvo que el Dios Google disponga lo contrario y exija lo contrario, siempre habrá muchísimos usuarios que usarán otros navegadores, sin importar cuál y sin importar por qué.

En fin, al margen y para compensar un poco tanta chromemanía, estas son propiedades de CSS3 definidas por la w3org que no funcionarán en Chrome y que si lo harán en Firefox y en las versiones beta de Internet Explorer.

text-decoration es una propiedad muy vieja, jamás ha cambiado y es poco flexible; en principio, tiene unos pocos valores elementales: none, underline, overline, line-through y blink de las cuales, solemos usar sólo las dos primeras y lo que hacen es subrayar un texto o evitar que quede subrayado que es lo que por defecto ocurre con todos los enlaces.

este es un texto subrayado

Por ahora, las nuevas propiedades propuestas con la w3org son tres y en Firefox debemos usarlas, agregando el prefijo -moz:

text-decoration-color: color;
text-decoration-line: tipo;
text-decoration-style: tipo;

text-decoration-color es sencilla de entender, es el color de ese subrayado que, por defecto es siempre el mismo que el del texto.

text-decoration-line indica la posición del subrayado y posee las mismas opciones de siempre: none (ninguno) underline (debajo) overline (arriba) line-through (tachado)

Así que si quisieramos que ese texto se subraye con otro color distinto al del texto, podríamos poner algo así:

.ejemplo {
  /* colores, fuentes, etc */
  text-decoration: underline; /* se subraya en los navegadores que no aceptan la propiedad */
  -moz-text-decoration-color: red;
  -moz-text-decoration-line: underline;
}

este es un ejemplo subrayado en rojo en Firefox

text-decoration-style es la propiedad más interesante ya que agrega una serie de estilos distintos al tipo de línea que son los mismos valores que se utilizan en la propiedad border-style: solid, double, dotted, dashed:

estilo solid

estilo double

estilo dotted

estilo dashed

Y un valor extra llamado wavy que muestra una línea ondulada:

.ejemplo {
  /* colores, fuentes, etc */
  text-decoration: underline; /* se subraya en los navegadores que no aceptan la propiedad */
  -moz-text-decoration-color: red;
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: wavy;
}

este es un ejemplo subrayado con wavy

Puzzle de redes sociales

2012-01-09T00:02:00.002-03:00

Los íconos sociales estilo puzzle de daddydesign son originales y pueden ser descargados gratuitamente pero, como son PNGs transparente, pueden servir para armar algo más divertido tal como usa ese sitio en su sidebar; simplemente, colocando cada uno de ellos de tal forma que se superpongan y de ese modo, crear un puzzle completo o parcial.

Es sencillo de armar, basta crear una lista de enlaces con las imágenes y eventualmente, como en este ejemplo, en lugar de colocar un ícono, colocamos una imagen transparente para crear un "agujero":

<div id="puzzleredes">
  <ul>
    <li>
      <a href="URL_SERVICIO">
        <img src="URL_IMAGEN.png">
      </a>
    </li>
    <!-- y seguimos agregando todas las que se nos ocurra -->
</ul>
</div>

Ahora, falta el CSS que simplemente se basa en hacer que cada item de la lista flote y dimensionarlas de tal modo que los rectángulos sean más pequeños que las imágenes para que se superpongan.

Sólo basta un poco de aritmética y probar los distintos valores que, es este caso se refieren a los íconos de 128x128:

<style>
  #puzzleredes {
    height: 390px;
    margin: 0 auto;
    position: relative;
    width: 470px;
  }
  #puzzleredes a {
    display: block;
  }
  #puzzleredes ul {
    list-style-type:none;
    margin: 0;
  }
  #puzzleredes li {
    float:left;
    height:85px
    width:85px;
  }
</style>

Cupidita

2012-01-07T00:06:00.000-03:00

REFERENCIAS:Infinitos Mundos en facebook

Mejoras para compartir entradas en Facebook

2012-01-05T00:05:00.001-03:00

El enlace es LARGO ... a primera vista: ASUSTA pero, cuando lo vemos más detalladamente ... ES PEOR; sin embargo, funciona y es una buena forma de eludir los problemas que generan los distintos modos de compartir entradas de Blogger en Facebook.

Quién quiera leer de esos problemas puede ver esta entrada pero, la base del asunto es que Blogger no nos permite establecer los datos necesarios en las etiquetas META correspondiente que deben estar SI o SI en el HEAD de la plantilla para que sean leídas correctamente por Facebook.

Uno de esos datos es la imagen miniatura que "adornaría" el post y el otro es el resumen de ese post, es decir, el texto explicativo; ambos datos, no son accesibles en Blogger salvo en el includable post y, como eso es parte del BODY, no hay manera de ponerlos en el HEAD ya que usando JavaScript, serán ignorados; por lo tanto, el resultado a compartir depende siempre de la buena voluntad de Blogger.

Facebook dispone de un plugin para enviar, pero, los datos de ese envío son automáticos, no tenemos control sobre ellos; otra forma es usar un simple enlace, algo que el sistema parece haber depreciado pero, que aún sigue funcionando e imagino que funcionará por mucho tiempo ya que es utilizado por incontables sitios y es la forma más sencilla de agregar un botón para este sistema ya que no requiere aplicaciones o scripts extras.

El enlace básico sería este:

<a href="http://www.facebook.com/sharer.php?u=URL_PAGINA&amp;t=TITULO_ENTRADA"> Compartir en Facebook </a>

Se envían dos parámetros:

u es la dirección URL de la página
t es el título de la entrada

El resultado es pobre pero, según se ve en la web, muchos sitios hablan de la posibilidad de agregar parámetros extras y de ese modo, crear un botón de compartir personalizado; para eso, los parámetros serán otros:

p[url] es la dirección URL de la página
p[title] es el título de la entrada
p[summary] es el texto de la entrada
p[images][0] es la miniatura de la entrada (100x100)

el resultado, sería algo como esto:

http://www.facebook.com/sharer.php?s=100&p[title]=TITULO_ENTRADA&p[summary]=RESUMEN&p[url]=URL_PAGINA&&p[images][0]=URL_IMAGEN

Y ahora, agregaremos el botón de compartir en alguna parte de las entradas, por ejemplo, en el post-footer y allí, empezaremos a colocar los datos que nos provee Blogger:

p[url] la dirección URL de la página = data:post.url
p[title] el título de la entrada = data:post.title
p[summary] el texto de la entrada = data:post.snippet
p[images][0] la miniatura de la entrada = data:post.thumbnailUrl

Abriremos ese enlace en una ventana de tipo pop-up y crearemos dos enlaces diferentes, uno para las entradas que tengan definida una imagen miniatura y otro para las que no las tengan en cuyo caso, agregaremos una imagen por defecto; para esto, usaremos los condicionales de Blogger y el monstruo final, sería este:

<b:if cond='data:post.thumbnailUrl == &quot;&quot;'>
  <a expr:onclick='&quot;window.open(\&quot;http://www.facebook.com/sharer.php?s=100&amp;p[title]=&quot; + data:post.title + &quot;&amp;p[summary]=&quot; + data:post.snippet + &quot;&amp;p[url]=&quot; + data:post.url + &quot;&amp;&amp;p[images][0]=URL_IMAGENxDEFECTO\&quot;,\&quot;sharefb\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript: void(0)'> Compartir en Facebook </a>
<b:else/>
  <a expr:onclick='&quot;window.open(\&quot;http://www.facebook.com/sharer.php?s=100&amp;p[title]=&quot; + data:post.title + &quot;&amp;p[summary]=&quot; + data:post.snippet + &quot;&amp;p[url]=&quot; + data:post.url + &quot;&amp;&amp;p[images][0]=&quot; + data:post.thumbnailUrl + &quot;\&quot;,\&quot;sharefb\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript: void(0)'> Compartir en Facebook </a>
</b:if>

Para quien no quiera sufrir ataques de stress, pueden usar este archivo de texto donde sólo deben colocar la imagen por defecto y cambiar los textos "Compartir en Facebook" por cualquier otro o por una imagen.

La ventana pop-up que se abriría sería algo así:

Y el resultado en Facebook sería este:

Este es el sistema que ahora está funcionando en el blog, así que pueden probarlo online.

Fade de imágenes con y sin jQuery

2012-01-04T00:03:00.001-03:00

Esta son dos formas sencillas de crear un efecto fade sobre una imagen, permutando una por otra.

En la primera, sólo usaremos CSS así que el el efecto no funcionará en versiones inferiores a IE9; el HTML para ambos es este:

<div id="ejemplo">
  <img src="URL_IMAGEN"/>
</div>

Y el CSS sería algo así:

<style type="text/css">  
  /* al DIV contenedor lo centramos centramos y dimensionamos */
  #ejemplo {
    cursor: pointer;  
    height: 375px;  
    margin: 0 auto;
    position: relative;
    width: 500px;  
    /* y acá, colocamos la segunda iamgen como fondo */
    background: transparent url(URL_OTRA_IMAGEN) no-repeat left top;  
  }  
  /* a la etiqueta IMG interna, le agregamos el efecto y la transición */
  #ejemplo img {
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    opacity: 1;
    /* agreamos el filtro para que en IE8 funcione aunque no sea animado */
    filter:alpha(opacity=100);
  }
  /* al poner el cursor encima, la imagen se oculta así que lo que veremos es el fondo de la segunda imagen */
  #ejemplo:hover img {
    opacity:0;
    filter:alpha(opacity=0);
  }
</style>

La otra forma simple es utilizando la librería jQuery.

Como dije, el HTML es exactamente el mismo y el CSS es más corto:

<style type="text/css">  
  /* al DIV contenedor lo centramos centramos y dimensionamos */
  #ejemplo {
    cursor: pointer;  
    height: 375px;  
    margin: 0 auto;
    position: relative;
    width: 500px;  
    /* y acá, colocamos la segunda imagen como fondo */
    background: transparent url(URL_OTRA_IMAGEN) no-repeat left top;  
  }  
</style>

Obviamente, nos falta el script:

<script type="text/javascript">
  $(document).ready(function() {
    $("#ejemplo").hover(function(){
      $(this).find("img").fadeOut();
    }, function() {
      $(this).find("img").fadeIn();
    });
  });   
</script>

Tratando de optimizar la carga de Google Fonts API

2012-01-02T00:05:00.002-03:00

El uso de las fuentes de la llamada Google Font API se va extendiendo pero, en sistemas de blogs como Blogger suele tener algunas limitaciones. Por un lado, hay una demora notable entre la carga de los sitios y la carga del API por lo que suelen mostrarse las fuentes con los valores por defecto establecidos para las etiquetas y, pasado un tiempo, cambian.

Esto no es fácil de resolver pero hay algunas alternativas; una de ellas es ocultar temporalmente el body de la página y mostrarla pasados unos cuantos segundos; puede hacerse de modo sofisticado o, simplemente, poniendo algo así antes de </head>

<style> body { visibility:hidden; } </style>
<script>
//<![CDATA[
  setTimeout(demora,3000); 
  function demora() { document.body.style.visibility = "visible"; }
//]]>
</script>

donde 3000 es el tiempo que se expresea en milisegundos (1000 = 1 segundo)

Otra forma es la que indica el mismo Google y es más razonable pero, para eso, en lugar de usar la etiqueta LINK:

<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css' />

debemos cargar las fuente con JavaScript:

<script type='text/javascript'>
//<![CDATA[
  WebFontConfig = {google: { families: [ 'Shadows Into Light' ] } };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
//]]>
</script>

y luego, establecer las reglas para una serie de clases que define el mismo API:

<style>
  .wf-loading { visibility: hidden; }
  .wf-active, .wf-inactive { visibility: visible; }
</style>

De este modo, cualquier etiqueta que utilice esas fuentes, permanecerá invisible hasta que sea cargada.

En el script, esta línea indica los tipos de fuente:

WebFontConfig = {google: { families: [ 'Shadows Into Light' ] } };

si usamos varias, las separamos con comas:

WebFontConfig = {google: { families: [ 'Shadows Into Light', 'Paytone+One' ] } };

Quisque et elit mi? In volutpat accumsan est ut auctor! Vivamus vulputate turpis non urna dignissim vehicula. Praesent id tortor et turpis lacinia elementum ut nec libero. Maecenas mollis tincidunt mi, vitae scelerisque sapien porttitor vitae. Nulla sed risus non orci interdum ultricies.

Vagabundia

Otra dificultad se genera cuando queremos usar "fuentes especiales" en alguna entrada en particular y no en todo el sitio. Eso, no lo podemos hacer utiizando la etiqueta LINK pero podemos usar la etiqueta STYLE e "importar" la fuente de este modo:

<style type="text/css"> @import url("http://fonts.googleapis.com/css?family=Shadows+Into+Light"); </style>

Obviamente, dependiendo de cada sitio, tendrá el mismo inconveniente de la demora así que, llegado el caso, también podemos usar el script cargador porque funcionará perfectamente, tanto en una entrada como en la plantilla.

En todos los casos, utilizaremos esta fuente del mismo modo que usamos cualquier otra, ya sea en una etiqueta, ID, una clase o directamente inline:

h1 { font-family: Paytone One,Arial,serif; }
#titulo { font-family: Shadows Into Light,Arial,serif; }
.mifuente { font-family: Paytone One,Arial,serif; }

<div style="font-family: Shadows Into Light,Arial,serif;"> ....... </div>

Un detalle interesante es que se nos permite reducir el tiempo de carga de cualquier fuente que vayamos a utilizar, seleccionado los caracteres deseados, algo que es útil cuando, por ejemplo, sólo quemos emplearla para el logo o algo semejante (más información).

Esto, se hace agregado el parámetro text=valor y, aunque es una función en desarrollo, parece funcionar perfectamente:

http://fonts.googleapis.com/css?family=Paytone+One&text=Vagabundia

donde es necesario codificar la URL, transformando los caracteres que no sean alfanumericos, por sus equivalencias. Por ejemplo %20 es un espacio:

http://fonts.googleapis.com/css?family=Inconsolata&text=Google%20World

Otros caracteres usuales:

á %c3%a1
é %c3%a9
í %c3%ad
ó %c3%b3
ú %c3%ba
ñ %c3%b1
¡ %c2%a1
¿ %c2%bf

Y llegó el 2012 y llegamos al 2012

2012-01-01T00:00:00.003-03:00

Año nuevo ... vida nueva

La misma vida de siempre salvo que uno quiera cambiarla y para eso no hace falta que el almanaque nos defina el cuando.
Basta hacerlo de una buena vez ...
... ahora mismo.

¡Feliz Año y Feliz Vida para todos !!!

Y hacia allá vamos ...

2011-12-31T00:08:00.000-03:00

El gadget de PostRank

2011-12-29T00:08:00.002-03:00

PostRank es un servicio de estadísticas orientado a las redes sociales que fue adquirido por Google a mediados de este año y por lo tanto, está en pleno cambio. Entre esos cambios han incluido la posibilidad de agregar un gadget que muestra una lista con las entradas más populares de cualquier blog ... o lo que ellos han evaluado como más populares, claro.

Para quien le gusten estas cosas, basta entrar en la página correspondiente, configurar las opciones y luego, copiar y pegar el código que nos dan, allí donde queramos que se vea.

Quienes usen Wordpress, también disponen de un plugin que hace exactamente lo mismo.

Como el el gadget se adapta al ancho del contenedor donde será insertado, tal vez convenga que se incluya todo el código en un DIV que puede ser dimensionado y centrado; por ejemplo:

<div style="margin:0 auto;width:350px;">
  <!-- y acá pegamos el código que nos dan -->
</div>

Una ventana modal usando CSS3

2011-12-28T00:08:00.001-03:00

CSS3 Lightbox es una fantástica idea de codrops que hace uso de la pseudo-clase target por lo tanto, no funcionará en versiones anteriores a IE9 pero, de todos modos, vale la pena investigar porque permite crear algo así como una ventana modal para mostrar imágenes, son bastante sencillez.

Acá, me he limitado a "destruir" un poco el código de tal modo de hacerlo independiente pero, los demos originales pueden ser descargados del sitio del desarrollador y entendiéndolos, se puede jugar con diseños personales o estructuras diferentes.

cerrar

Básicamente, en este ejemplo, el HTML es el mismo que muestran en sus demos aunque le puse otros nombres a las clases para no confundirme; en lugar de usar una lista, como no quiero crear un álbum sino tener la posibilidad de mostrar esa ventana modal en cualquier circunstancia, uso un DIV:

<div class="vmcc3" id="ejemplo-1">
  <!-- la miniatura visible -->
  <a href="#image-1">
    <img src="URL_miniatura" />
  </a>
  <!-- la imagen completa oculta -->
  <div class="vmoverlay" id="image-1">
    <img src="URL_imagen" />
    <a href="#ejemplo-1" class="vmcerrar">cerrar</a>
  </div>
</div>

Alojando las imágenes en Picasa es bastante sencillo tener las dos direcciones URLs, la de la miniatura y la de la imagen completa.

El único detalle a tener en cuenta al crear el HTML es el ID que debe ser único (no repetido) y que se coloca en el DIV oculto y al que se debe hacer referencia en el enlace de la miniatura, anteponiéndole el carácter # ya que eso es l oque hará que funcione la pseudo-clase target.

A esto, le agregué otro ID al DIV contenedor que se utiliza en el enlace CERRAR para evitar que la página se desplazara demasiado; es algo que hay que perfeccionar y ver alternativas.

cerrar

Y ahora el CSS que incluye animaciones varias:

<style>
  /* el contenedor */
  .vmcc3 {
    display: inline-block;
    position: relative;
  }
  .vmcc3 > a, .vmcc3 > a img {display: block;}
  .vmcc3 > a {position: relative;}
  /* el div oculto donde se mostrará la imagen completa y ocupará toda la pantalla */
  .vmoverlay{
    background-color: rgba(0, 0, 0, 0.9);
    height: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    text-align: center;
    top: 0;
    width: 0;
    z-index: 99;
  }
  /* el enlace para cerrar la ventana modal es un texto pero puede ser una imagen */
  .vmoverlay a.vmcerrar {
    color: #FFF;
    font-size: 20px;
    left: 50%;
    line-height: 26px;
    margin-left: -25px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 70px;
    z-index: 1001;
    -moz-transition: opacity 0.3s linear 1.2s;
    -webkit-transition: opacity 0.3s linear 1.2s;
    -o-transition: opacity 0.3s linear 1.2s;
    -ms-transition: opacity 0.3s linear 1.2s;
    transition: opacity 0.3s linear 1.2s;
  }
  /* la imagen de tamaño completo */
  .vmoverlay img {
    max-height: 100%;
    position: relative;
  }
  /* la pseudo-clase es la que abrirá la ventana modal */
  .vmoverlay:target {
    bottom: 0;
    height: auto;
    padding-top: 100px;
    right: 0;
    width: auto;
  }
  /* las animaciones */
  .vmoverlay:target img {
    -moz-animation: fadeInScale 1.2s ease-in-out;
    -webkit-animation: fadeInScale 1.2s ease-in-out;
    -o-animation: fadeInScale 1.2s ease-in-out;
    -ms-animation: fadeInScale 1.2s ease-in-out;
    animation: fadeInScale 1.2s ease-in-out;
  }
  .vmoverlay:target a.vmcerrar { opacity: 1;}
  @-webkit-keyframes fadeInScale {
    0% { -webkit-transform: scale(0.6); opacity: 0; }
    100% { -webkit-transform: scale(1); opacity: 1; }
  }
  @-moz-keyframes fadeInScale {
    0% { -moz-transform: scale(0.6); opacity: 0; }
    100% { -moz-transform: scale(1); opacity: 1; }
  }
  @-o-keyframes fadeInScale {
    0% { -o-transform: scale(0.6); opacity: 0; }
    100% { -o-transform: scale(1); opacity: 1; }
  }
@-ms-keyframes fadeInScale {
    0% { -ms-transform: scale(0.6); opacity: 0; }
    100% { -ms-transform: scale(1); opacity: 1; }
  }
  @keyframes fadeInScale {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
</style>

En el demo original podrán ver muchas más alternativas tales como agregar títulos y textos así que parecería que todo se reduce a ir probando y viendo que sale:

cerrar

Cursores mostacho y otras rarezas

2011-12-26T00:02:00.000-03:00

En free-themes no hay muchas cosas pero son suficientes para divertirse un rato.

A Himsomnio le ha gustado la parte de cursores tipo mostacho ya que dice que serían perfectos para este blog pero, tengo mis dudas al respecto. De todos modos, acá están; son cinco modelos, cinco imágenes en formato PNG que puden ser utilizadas en la propiedad cursor de cualquier etiqueta aunque debe tenerse en cuenta que no serán visibles en Internet Explorer ya que en ese navegador, las imágenes de los cursores alternativos deben ser de formato CUR.

De todos modos, la sintaxis general de la propiedad es igual en todos los navegadores:

cursor:url(URL_imagen), auto;

Así que basta usar las imágenes que ellos nos proveen:

y agregar la propiedad a alguna clase CSS:

.bigote1 { cursor:url(http://free-themes.info/cursor/mustache/mustache2.png), auto }

Feliz Navidad para todos

2011-12-24T00:02:00.002-03:00

Feliz Navidad

falta poco ...

2011-12-23T00:04:00.000-03:00

Títulos con efectos usando :after y :before

2011-12-22T00:06:00.002-03:00

Esta es otra variante del uso que podemos darle a las propiedades :after y :before que funcionará sin demasiados problemas en cualquier navegador incluyendo IE8.

La idea de css-tricks es generar una especie de flecha o señalador de este estilo:

Pero, como la parte interesante es la forma en que está armada la parte de los títulos, me limitaré a mostrar sólo esa parte aunque el resto puede ser consultado en la página del autor que incluye una descarga con el ejemplo completo.

El HTML es muy sencillo y podría adaptarse perfectamente a los títulos de la sidebar de Blogger pero, ese es otro tema:

<div class="module blue">
  <h2>Título de este módulo <a href="#">Azul</a></h2>
</div>
<div class="module yellow">
  <h2>Otro título <a href="#">Amarillo</a></h2>
</div>
<div class="module green">
  <h2>Lo mismo para el verde <a href="#">Verde</a></h2>
</div>
<div class="module red">
  <h2>Y para cualquier color <a href="#">Rojo</a></h2>
</div>

Son DIVs con dos clases CSS, module es la clase genérica y la otra varía y en este caso tiene el nombre del color; estas últimas son lasque se usarán para diferenciar unos de otros.

Lo básico para este ejemplo,sería esto:

<style>
.module h2 { /* el rectágulo de la izquierda con el título */
  background-color: #BBB;
  border-radius: 20px 0 0 20px;
  color: #FFF;
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 32px;
  margin: 0;
  padding: 0 0 0 20px;
  text-shadow: 2px 1px 1px #222;
}

.module h2 a { /* el rectángulo de la derecha con el subtítulo */
    /* el color del fondo y el borde son iguales al color de fondo de la página */
    border-left: 5px solid #101921;
    color: #101921;
    float: right;
    /* la fuente del texto */
    font-size: 18px;
    text-decoration: none;
    text-shadow: none;
    /* efectos varios incluyendo una transición */
    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
}
.module h2 a:hover { /* se agranda al poner el cursor encima */
  padding: 0 32px;
}

/* las reglas genéricas de after y before */
.module h2 a:before, .module h2 a:after {
    content: "";
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}
.module h2 a:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #101921; /* el color es igual al fondo de la página */
    border-top: 8px solid transparent;
    left: -12px;
    margin-top: -8px;
}
.module h2 a:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    left: -6px;
    margin-top: -6px;
}

/* y los colores de cada uno de los enlaces */
.module.blue h2 a {background-color: #A2D6EB;}
.module.blue h2 a:hover {background-color: #C5F0FF;}
.module.blue h2 a:after {border-right: 6px solid #A2D6EB;}
.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}

.module.green h2 a {background-color: #9CF1A4;}
.module.green h2 a:hover {background: #BBFFCF;}
.module.green h2 a:after {border-right: 6px solid #9CF1A4;}
.module.green h2 a:hover:after {border-right-color: #BBFFCF;}

.module.red h2 a {background-color: #F0A5B5;}
.module.red h2 a:hover {background-color: #FFC7D2;}
.module.red h2 a:after {border-right: 6px solid #F0A5B5;}
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}

.module.yellow h2 a {background-color: #FCE98D;}
.module.yellow h2 a:hover {background-color: #FFD700;}
.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}
.module.yellow h2 a:hover:after {border-right-color: #FFD700;}
</style>

Vagabundia

Los comentarios y el salto al final de la página

Más problemas con los comentarios de Blogger

Alternativas para numerar los comentarios

Emoticones en el nuevo sistema de comentarios

Textify: Imágenes transformadas en textos

Comentarios anidados: Los estilos paso a paso (2)

Comentarios anidados: Los estilos paso a paso (1)

Numerar los nuevos comentarios de Blogger

Originales íconos sociales

Blogger: Comentarios anidados, reply y dudas

La etiqueta CANVAS (introducción)

text-decoration y el CSS3

Puzzle de redes sociales

Cupidita

Mejoras para compartir entradas en Facebook

Fade de imágenes con y sin jQuery

Tratando de optimizar la carga de Google Fonts API

Y llegó el 2012 y llegamos al 2012

Y hacia allá vamos ...

El gadget de PostRank

Una ventana modal usando CSS3

Cursores mostacho y otras rarezas

Feliz Navidad para todos

falta poco ...

Títulos con efectos usando :after y :before

Título de este módulo Azul

Otro título Amarillo

Lo mismo para el verde Verde

Y para cualquier color Rojo