Cargando...
Menu Ver sumario
¿Te gustó lo que viste?
Recomiéndanos

Post aleatorio






Variante para usar YouTube como reproductor de audio

31/03/2011
Gracias a Mandelrot que nos comentó que había publicado este sistema en su blog, conocimos otra forma de conseguir el truco para insertar sólo audio desde YouTube.

En aquel, dejábamos la carátula del reproductor sin la parte de vídeo y luego podíamos ir acortando lo que quedaba por el centro. Pero siempre nos quedaban las puntas; al menos el botón del play, el del volumen y el de pantalla completa. Sin embargo, con este otro sistema podremos truncar por la derecha.

Para empezar, al iframe del reproductor original le cambiamos igualmente la altura por 27px. Lo diferente ahora es que luego  metemos todo dentro de un div más pequeño que el reproductor y a ese div le añadimos un overflow:hidden; para que trunque el contenido y no se vea la parte derecha.

Así, esto...

<iframe title="YouTube video player" width="425" height="349" src="http://www.youtube.com/embed/bg8EQdcud7Q?rel=0" frameborder="0" allowfullscreen></iframe>


...lo transformamos en esto:

<div style="overflow:hidden;width:252px;">
<iframe title="YouTube video player" width="425" height="27" src="http://www.youtube.com/embed/bg8EQdcud7Q?rel=0" frameborder="0" allowfullscreen></iframe>
</div>


Para calcular el ancho del div, usamos estas medidas de la barra del reproductor:


Por tanto, para quitar el primer trozo de la derecha, restamos al ancho del código original la cantidad de 173px. (425-173=252px, en el ejemplo)

Si queremos reducirlo más para dejar sólo los dos primeros botones, entonces fijamos el div en 63px.

<div style="overflow:hidden;width:63px;">
<iframe title="YouTube video player" width="425" height="27" src="http://www.youtube.com/embed/bg8EQdcud7Q?rel=0" frameborder="0" allowfullscreen></iframe>
</div>


Y si queremos un auténtico reproductor minimalista, lo dejamos en 32px:

<div style="overflow:hidden;width:32px;">
<iframe title="YouTube video player" width="425" height="27" src="http://www.youtube.com/embed/bg8EQdcud7Q?rel=0" frameborder="0" allowfullscreen></iframe>
</div>


Error bX-67oaj1 y otros problemas con enlaces de navegación

Ayer publiqué una entrada en la que además de informar de un problema con los enlaces de navegación Entradas más recientes/Entradas antiguas, pedía socorro de una forma descarada. Esto lo cuento lo primero,  para que los que creéis que por aquí anda algún experto en estos temas, os lo quitéis de una vez de la cabeza ☺

Había pasado por encima de la solución, pero se conoce que con tantas cosas que probé, la correcta no la apliqué bien. Menos mal que Pizcos y Balthazar! me hicieron insistir en la misma idea y gracias a ello, volví a retomarla.

El problema se manifiesta pinchando en dichos enlaces y las dos maneras en que se presenta es o bien mostrando directamente una página de error bX-67oaj1, o bien en la forma que expliqué en el post citado. Esto era que el enlace iba a una página extraña, que mostraba en el navegador la dirección de inicio y no la que debería (http://oloblogger.blogspot.com/search?updated-max=2011-02-09T12... etc). También afectaba a algunas condiciones que no se ejecutaban.

No he encontrado un patrón para saber a quién le dará problemas esto (plantillas antiguas, nuevas, algún gadget...), por lo que sospecho que se trata de un nuevo cambio interno de Blogger. En concreto, creo que nos ocurre a todos los que conservamos el código original del gadget que forma esos enlaces (nextprev), ya que la solución pasa por eliminar una de las variables que incluye (data:widget.instanceId). Sinceramente, no tengo ni idea para qué sirve, porque ni siquiera está en la lista "oficial" de etiquetas data, pero lo importante es que ahora estorba.

Como siempre, la solución es muy fácil... cuando se conoce, claro. Con plantillas de artilugios expandidas hay que buscar este trozo de código:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

¿Veis lo que está marcado en verde-negrita? Pues eso lo quitáis y listo.

Si alguna vez habéis sustituido el texto estándar (data:newerPageTitle / data:olderPageTitle) por una imagen, el código que pongo de referencia será algo distinto en vuestro caso, pero lo importante es borrar la expresión que incluye el data:widget.intanceld de los c..., lo demás, tal como lo tengáis.

A otra cosa mariposa.


Problemillas con los enlaces de navegación

30/03/2011
Actualizado: Solución al problema comentado en esta entrada en
"Error bx67oaj1 y otros problemas con los enlaces de navegación".

Esta entrada es sólo para comentar que desde hace unos días, existe algún tipo de problema con los enlaces de navegación Entradas más recientes/Entradas antiguas, que provoca que el sistema de sumarios no funcione. El caso es que no ocurre en todos los blogs y tras muchas comprobaciones, no he encontrado la causa.

En un principio, lo único que se aprecia es que cuando pinchamos en uno de estos enlaces, si bien el rótulo del title nos indica que nos va a enviar a una página del tipo...

http://oloblogger.blogspot.com/search?updated-max=2011-02-09T12%3A40%3A00-08%3A00&max-results=5

...que es la que corresponde a este tipo de navegación por fechas, lo que realmente aparece en el navegador, es la dirección de Inicio del blog:

http://oloblogger.blogspot.com


He restaurado por completo, sin éxito, el gadget nextprev original, que es el que controla el funcionamiento de estos enlaces. Incluso he copiado literalmente el código de un blog que sí me funciona bien, por si acaso, pero nada. El problema persiste.

Viendo con más detalle el código de este artilugio (nextprev), he visto que los enlaces a este tipo de direcciones, están controlados por una etiqueta data de esas que contienen datos internos de Blogger sobre nuestro blog, que nosotros no podemos manipular (data:widget.instanceId). Así que si es eso, ya vamos listos hasta que no lo arreglen.

Otra comprobación que me ha resultado muy extraña, es que si abría el enlace en nueva ventana, no daba el más mínimo problema. Las pegas surgen cuando se hace en la misma ventana. Esto realmente me desconcierta.

¿Y dónde se nota que algo va mal aparte de en la barra de direcciones? Pues por ejemplo, en las cosas que hayamos metido en condicionales. Parece que esa página extraña que tiene la dirección de Inicio, pero que sin embargo corresponde visualmente a una de navegación por fechas, no coincide con ninguno de los tipos que usamos en dichos condicionales.

He hecho también pruebas con todos los tipos de condiciones, visualizando los distintos tipos de páginas y la que se abre al pinchar en Entradas antiguas, me sale que es tipo Home. Evidentemente da ese resultado porque eso es lo que reza en la propia barra de direcciones del navegador, pero como por otra parte no es así, pues eso casi seguro que es fuente de conflicto.

De esta manera, no se ejecuta bien el código que a través de condiciones esté asociado a una página de navegación.

Así las cosas, si se tiene un sistema de sumarios hecho con condiciones y si tu blog es de los que falla, podrás ver que hay elementos que no se muestran correctamente en este tipo de páginas. Cada uno en su propio blog, sabrá apreciar qué es lo que falla. En mi caso, las entradas no se muestran resumidas y tampoco se ven algunos botones que tengo condicionados sólo para las direcciones de entradas.

Por último, la navegación por etiquetas funciona correctamente.

Llevo ya un par de días con el tema y no doy con la tecla correcta, así que si alguien descubre algo, por favor que lo diga. Mientras tanto a ver si me las apaño para reordenar las condiciones de alguna manera que no de problemas.

Actualización: Probado en blogs hechos con el nuevo diseñador, en plantillas clásicas, modificadas, no modificadas... El error parece no tener un patrón por ese lado.


La propiedad overflow de CSS

29/03/2011
La propiedad overflow de CSS sirve para indicar cómo se debe comportar el navegador, cuando se encuentre con una caja cuyo contenido desborda su contenedor. Es decir, cómo se vera algo que por tener una mayor medida, no cabe dentro del espacio reservado para ello.

Las capas (div) normalmente se van redimensionando para ajustar su tamaño a lo que pongamos en su interior.
Ocupan todo el ancho disponible y van creciendo en altura según haga falta. Si limitamos el ancho con un width, este se ajustará a nuestra exigencia pero la altura seguirá ajustándose automáticamente. Es el caso de esta caja de 300px de ancho y el de la de la izquierda, que tiene asignados sólo 200px.
width: 200px;
width: 300px;

Pero veamos que ocurre cuando fijamos un ancho y un alto y el contenido no cabe dentro de la caja:

width: 400px; height:100px;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.



Lo que podemos comprobar es que la capa mantiene la posición y medidas que le hemos asignado, pero el texto desborda la caja. Nótese que si no hubiéramos dejado intencionadamente un espacio lo suficientemente grande tras ese div, estas líneas estarían solapadas con las que rebosan de la caja:

width: 400px; height:100px;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.

Lo que podemos comprobar es que la capa mantiene la posición y medidas que le hemos asignado, pero el texto desborda la caja...

Este es el comportamiento por defecto y que sería el equivalente a asignarle a esa capa, una propiedad overflow con el valor visible. Por tanto, los valores más interesantes, son los que todavía nos quedan por ver y estos son: hidden, scroll y auto.


El primero se entiende bastante bien si sabemos inglés: escondido, oculto. Lo que hace el valor hidden es recortar el contenido allí dónde le marcan los límites de las dimensiones de la capa. Es como si la caja fuera una ventana y pusiéramos algo por detrás; sólo veríamos lo que la transparencia de los cristales nos dejara ver y el resto quedaría tapado por la pared que la circunda. En el caso de una página web, el texto se va escribiendo con normalidad, pero cuando llegamos al límite inferior, este desaparece:

width: 280px; height:100px; overflow: hidden;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.

Un pequeño alto para comentar que el texto siempre se imprimirá según el ancho disponible, pero con una imagen la cosa cambia un poco, ya que estas son elementos de bloque y no pueden ser automáticamente adaptadas. Por tanto, se desbordan tanto por abajo, como por la derecha:

width: 200px; height:100px;

Precisamente por este comportamiento de la imágenes, la mayoría de plantillas incluyen un overflow: hidden; en la capa correspondiente a las entradas. Así evitamos desbordamientos accidentales que se solaparían con el contenido adyacente, como por ejemplo, la sidebar. Si alguien tiene algún problema de este tipo, ya sabe la solución:

width: 200px; height:100px; overflow: hidden;


El valor scroll también nos sirve para que se oculte el contenido desbordado, pero a diferencia del anterior, siempre se generarán automáticamente unas barras de desplazamiento. Si el desplazamiento horizontal no es necesario, como ocurre en el caso del texto, la correspondiente barra aparecerá desactivada.

width: 400px; height:100px; overflow: scroll;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.

En el caso de imágenes, se activarán la vertical, la horizontal o ambas, según sea necesario. Hay que tener en cuenta que la barra vertical ocupa también espacio en la capa. Esto último quiere decir que si por ejemplo una imagen es de 300px y el div es de 300px, al ocupar la barra vertical algunos pixels, la imagen no cabrá en el ancho disponible, activándose también la barra horizontal aunque a priori pareciera que no era necesario:

width: 300px; height:100px; overflow: scroll;

width: 350px; height:100px; overflow: scroll;


Por último, nos queda el valor auto, pero este es el más fácil de imaginar. Siempre oculta el contenido que pueda desbordar, pero sólo muestra las barras de desplazamiento si es necesario. Además, no muestra siempre ambas, sino sólo aquella que se necesita:

width: 200px; height:100px; overflow: auto;

width: 400px; height:100px; overflow: auto;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.

width: 400px; height:150px; overflow: auto;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.

Como podéis imaginar, el valor auto soluciona también diversos problemas de una tacada.


Un valor adicional que podéis ver en un overflow, es el valor inherit. Este es una especie de  valor comodín que hará que la capa que lo lleve, herede el valor que tenga la capa padre. Supongo que tendrá su interés, pero hasta la fecha yo no lo he necesitado nunca.


Incluir una Fan Box de Facebook en el blog y unos apaños

24/03/2011
Esto no tiene ningún misterio, pero cómo nos hemos comprometido con los torpes, allá vamos. Atentos también los más avezados, porque explicamos un truquillo para que funcione bien la like box a los que les da problemas y al mismo tiempo, aprender a configurar su apariencia.

Una Fan Box es un simple gadget de Facebook, que permite mostrar en cualquier sitio web, datos relativos a una página Facebook. En concreto, un título con nuestra imagen de perfil más un botón Like y opcionalmente, una especie de stream con las últimas publicaciones en nuestro muro o los avatares de algunos seguidores elegidos al azar.


Ojo que esto es para páginas, no para perfiles personales. Las páginas son una modalidad especial de perfiles Facebook que en un principio estaban destinadas para sitios comerciales, pero que bien pueden ser usadas para otro tipo de sitios más amateur como los nuestros. Con la creación de una página podemos independizar nuestra actividad personal de la de nuestro sitio web.

Un ejemplo de mi perfil y un ejemplo de la página de Oloblogger. Son muy parecidos pero tienen algunas pequeñas diferencias. Por ejemplo, en un perfil tienes amigos, ya que este se supone que es el fin de esta red social. Sin embargo, en las páginas sólo puedes tener fans. Los primeros pueden ser invitados por tí, pero los segundos tendrán que pinchar en el Me gusta de la página (distinto del que sirve para compartir una entrada) para pasar a ser fans, sin existir ningún mecanismo automático de invitación o similar. Otra diferencia actualmente es que los perfiles permiten personalizar las imágenes superiores y en las páginas, estas salen aleatoriamente de entre los álbumes disponibles.

Hecho este preámbulo, la forma de conseguir el código para pegar en nuestra barra lateral o dónde se os antoje este artilugio, es accediendo a la página de Facebook para desarrolladores. Este sería el enlace directo para la fan box.

Ahora sólo hay que marcar las opciones de lo que se desea mostrar, teniendo en cuenta los siguientes conceptos:
  • Page URL: La dirección de nuestra página
  • Width: El ancho del gadget
  • Color Scheme: Fondo semi-transparente (light) u oscuro (dark)
  • Show Faces: Para mostrar los avatares de los fans
  • Show stream: Idem las últimas publicaciones
  • Show header: Idem la cabecera azul con el logo Facebook
Hay una vista previa, por lo que podemos experimentar lo que queramos, sabiendo de antemano cómo va a quedar la cosa.  Una vez a nuestro gusto, con el botón Get Code, conseguimos el código para sólo copiar y pegar.

Y ahora los problemas y sus soluciones.

Cuando no seleccionáis el stream pero sí los avatares, por un fallo del sistema de esa interface, el gadget reduce la altura del iframe que mostrará el artilugio, a sólo 62px. Esto hace que aparentemente el cacharro no funcione, pero realmente lo que pasa es que no tiene espacio para mostrarse, quedando fuera del marco visible.

Y esto me lleva a mostraros el código estándar para que sepáis cómo modificarlo.

&lt;iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/NOMBREPAGINA&amp;amp;width=500&amp;amp;colorscheme=dark&amp;amp;show_faces=true&amp;amp;stream=true&amp;amp;header=true&amp;amp;height=427" style="border: medium none; height: 427px; overflow: hidden; width: 500px;"&gt;&lt;/iframe&gt;

Lo que hay marcado en verde es lo que la interface que hemos visto en la página de desarrolladores, introduce de forma variable en el código, según nuestra selección. En este mismo orden, aparecen los siguientes valores que podemos modificar diréctamente en el código:
  • la dirección de la página (href)
  • el ancho del artilugio (width)
  • el tono del fondo, con las únicas opciones dark o light (colorscheme)
  • los avatares, con true para que se vean y false para que no se vean (show_faces)
  • las últimas publicaciones, idem anterior (stream)
  • la cabecera azul del gadget, idem anterior (header)
  • la anchura del iframe, que tiene que ser la misma que la del gadget (width)

Y para terminar, el truquillo.

Como habréis podido comprobar, el programa para crear el código no nos pregunta el alto (height) y lo inserta automáticamente según su criterio. Son las cifras marcadas anteriormente en azul (427). Este dato también lo podemos modificar, aunque sólo afectará a la parte inferior del iframe, es decir, principalmente a la cantidad de avatares a mostrar.

Así que conociendo las medidas de cada elemento podemos juguetear un poco. Hay que tener en cuenta que el logo y el nombre de la página saldrá siempre:
  • Cabecera: 31px
  • Logo y nombre página: 63px
  • Stream: 301px
  • Primera fila avatares: 119px
  • Segunda y siguiente fila avatares: 73px
Si por ejemplo marcamos (o cambiamos false/true) para mostrar sólo header y stream, pero para encoger el gadget, ponemos menos de 395px de altura (31px + 63px + 301px = 395px), parte del stream no se verá al no haber espacio suficiente. En ese caso concreto, no hay mayor problema porque seguiremos teniendo la barra de desplazamiento y nos podremos apañar. Si además hemos marcado mostrar los avatares (recordamos que seguimos con menos de 395px), estos no se verán, ya que quedarán fuera del marco.

Y el uso más práctico que veo para esto es el de poder mostrar la cantidad de filas de seguidores que nos plazca.

Por ejemplo, un gadget sin header, con stream y con cuatro filas de seguidores, tendría que tener 63px + 301px + 119px + (73px * 3) = 702px. Y de igual manera tenéis que calcular para cada uno de vuestros casos particulares.

Tened en cuenta que hay que cambiar los dos HEIGHT que aparecen en el código para que no pasen cosas raras. El primero no necesita los caracteres px, pero el segundo sí.

Y una vez más, ya estáis tardando en seguirnos en Facebook, que por allí también damos enlaces presuntamente interesantes, que posiblemente os vengan bien :D


Página principal sólo con títulos de entradas

20/03/2011
Este es uno de esos truquillos de idea feliz, que con poco muy poco trabajo solucionan cosas y dan buen resultado. Consiste en resumir las páginas que no sean entradas en sí mismas. Es decir, mostrar resumidas las páginas de inicio, las de navegación por etiquetas y las de entradas más recientes/antiguas.

No me refiero a los sumarios, ya muy comentados anteriormente, sino en algo más simple pero quizás igual de efectivo. En este caso, sólo mostraremos la fecha, el título y el pie de la entrada, escondiendo el texto del post.

El resultado sería algo así:

Ver blog de ejemplo

Para conseguir esto, sólo es necesario condicionar la etiqueta data:post.body, que es la que muestra precisamente el texto de cada entrada. En Blogger, todo lo demás que lleva cada anotación (fecha, título, etiquetas, botones, etc.) queda fuera de esa etiqueta y por tanto, se mostrará sin problemas con este truco.

Así que buscamos <data:post.body/> y lo sustituimos por esto:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<p><data:post.body/></p>
</b:if>

Si os fijáis, hay un par de condiciones. Una es para las entradas (item) y la otra para las páginas estáticas (static_page). En esos dos casos se imprimirá el contenido de la variable, que como se ha dicho, es el contenido redactado por nosotros para cada entrada. En todos los demás, no.

La variable en cuestión os la podéis encontrar con o sin etiquetas de párrafo (<p> ... </p>). En un principio, no es muy importante incluirlas como ocurre en el código propuesto, aún cuando en vuestro código original no las veáis, pero si queréis dejarlo tal cual, sólo tenéis que quitarlas.

Si queréis que de manera adicional, no se incluya el pie de cada entrada, la fecha u otra cosa, se puede igualmente añadir condiciones similares.

Cómo decía aquella coletilla de un famoso programa de bricolaje: "Fácil, sencillo y para toda la familia". Yo añadiría "...y rápido".


Personalizar el blog a criterio de los usuarios, de forma permanente

16/03/2011
No sabía cómo demonios titular este post para que quedara clara la idea y como seguro que no lo he conseguido, lo primero que haré será explicarla.

Lo que vamos a crear es un apartado con un formulario. Desde ese formulario, cualquier visitante de nuestro blog podrá marcar lo que quiere ver en él y lo que no. Esas opciones quedarán grabadas mediante cookies, de manera que los cambios solicitados por el usuario se mantendrán durante un tiempo determinado. O si así lo deseamos nosotros, de manera permanente.

Si todavía no se ve claro, podéis probar esta página de demostración.

Lo primero que necesitamos es insertar -si no lo tenemos ya- un sistema de gestión de cookies. En el enlace anterior están las indicaciones para instalar lo que nos permitirá grabarlas, leerlas y borrarlas. Como se explica en aquella entrada, nos sirve para cualquier ocasión en que tengamos que manejar galletitas.

A continuación y siempre antes del </head> insertamos dos funciones JavaScript. Una nos permitirá grabar las cookies que necesitamos para controlar de forma duradera las opciones marcadas por el usuario (function opciones). La otra (function comprobarseleccion) y la pequeña parte CSS (.visible/.invisible), sirven en este ejemplo para leer las cookies y, en función de su valor, mostrar u ocultar el bloque deseado.

<style type='text/css'>
.visible {display:block;}
.invisible {display:none;}
</style>

<script type='text/javascript'>
//<![CDATA[
function opciones(nombrediv,nombrecookie){
var elementos = document.getElementsByName(nombrediv);
var i;
for(var i=0; i<elementos.length; i++) {
if (elementos[i].checked)
break;
}
var expiracion = new Date();
expiracion.setTime(expiracion.getTime() + 30000),"/";
setCookie(nombrecookie,elementos[i].value,expiracion);
}
function comprobarseleccion (nombrediv,nombrecookie) {
var comprobar = getCookie(nombrecookie);
var elemento = document.getElementById(nombrediv);
if (comprobar == "1" ){elemento.className="invisible";}
else {elemento.className="visible";}
}
//]]>
</script>

El 30000 marcado en verde es el tiempo que tardarán en desaparecer las cookies que grabemos con este sistema. Ese tiempo viene en milisegundos, por lo que desaparecerán a los 30 segundos. Lo he hecho así para que podáis hacer pruebas sin esperar mucho. Una vez que esté todo a vuestro gusto, podéis cambiar ese tiempo por el valor que queráis. Para que la cookie dure un año sólo tendríais que usar el valor 60000*60*24*365. Si multiplicáis adicionalmente por 99, creo que la cookie ya se podrá considerar eterna.
Bien. Ya tenemos la base para que todo funcione. Ahora sólo nos falta el formulario y retocar los bloques (div) que queremos dejar afectos a este sistema.

El formulario lo podemos crear en un página estática o si os parece oportuno, en un gadget tipo HTML/JavaScript. Debería tener una estructura más o menos así:

<div style="background: #eeeeee; border: 1px solid #000000; margin: 0px auto; padding: 20px; width: 300px;color:#000000;">
<form name="seleccion">
&#9675; Ver DIV Carlota

<input name="carlota" type="radio" checked value="0" />Si
<input name="carlota" type="radio" value="1" />No

&#9675; Ver DIV Mercedes

<input name="mercedes" type="radio" checked value="0" />Si
<input name="mercedes" type="radio" value="1" />No

<input name="guardar" onClick="opciones('carlota','carlotacookie');opciones('mercedes','mercedescookie');document.location.reload();" type="button" value="Guardar" /></form>
</div>

Aquí hay tres cosas a tener en cuenta. La primera es que los botones radio que pertenecen a la misma pregunta, tengan el mismo nombre (name). En el ejemplo, las preguntas son dos. Una se llama carlota (ambos botones radio tienen idéntico nombre) y la otra mercedes (idem), pero podéis escoger el nombre que mejor os venga.

Otra es que tiene que haber una llamada a la función opciones(), por cada pregunta que se plantee. Estas funciones estarán en el input que forma el botón y en concreto, dentro del onClick. En el código de arriba quizás se ve más claro que en esta explicación.

Por último, cada función tiene que pasar dos parámetros. El primero será el nombre del campo que hayamos utilizado para cada pregunta (carlota o mercedes en el ejemplo). El segundo será el nombre que queramos poner a la cookie correspondiente (carlotacookie o mercedescookie).

Con los nombres de las cookies hay que ser creativos. Tened en cuenta que al ir a la demo de este código, se os grabará una cookie con ese nombre que yo he elegido. Si vosotros ponéis el mismo, cualquiera que haya pasado por aquí o por otro blog que no se haya molestado en cambiar el nombre, tendrá grabadas las opciones que eligió al visitar la demo. Ese es otro motivo por el que he usado sólo 30 segundos en el ejemplo. Una buena opción sería incluir una especie de prefijo/sufijo personalizado, como podría ser un número personal o incluso el nombre de vuestro blog (cookie1234olobloggercarlota, por ejemplo). Lo dicho, para pruebas podéis copiar y pegar tal cual, pero si definitivamente dejáis instalado esto, mejor que cambiéis los nombres de las cookies.
Ya tenemos el código para la gestión de cookies, las funciones que las graban, leen e interpretan, y el formulario para el usuario. Ya sólo nos falta adaptar los elementos a mostrar/esconder. Pero una vez hecho bien todo lo demás, esta es la parte más fácil.

<div id="carlota" class="visible">
ESTE ES EL DIV CON ID=CARLOTA
</div>
<div id="mercedes" class="visible">
ESTE ES EL DIV CON ID=MERCEDES
</div>
<script type="text/javascript">
comprobarseleccion('carlota','carlotacookie');
comprobarseleccion('mercedes','mercedescookie');
</script>


A cada capa habrá que añadirle una ID única y la clase creada al principio del todo y que llamamos visible. Después se utiliza la función comprobarseleccion con todas y cada una de las capas que queramos condicionar, enviando como parámetros el nombre del ID y el de la cookie asociada a ese ID.

Voila.
Todo esto se me ha ocurrido a partir de una entrada que Pizcos publicó hace unos días, en referencia a la conveniencia o no de usar los botones sociales en nuestros blogs. Esta podría ser una opción para que cada usuario eligiera si quiere verlos o no. Por cierto, que ya podéis estar votando allí sobre el tema. La encuesta la tenéis en su barra lateral y son sólo 4 preguntas.

También se puede aplicar a los bloques de publicidad o incluso, en plantillas líquidas (las que llevan las columnas en %, para que se pueda elegir si se desea ver la sidebar. En fin, para cualquier elemento de bloque que pueda tener vuestro sitio.

Se podría utilizar para configurar otro tipo de cosas a criterio del visitante, modificando la función comprobarseleccion, como por ejemplo, el color de fondo o el tamaño de letra. ¿Se os ocurre algo más?


Sumarios automáticos sin JavaScript para Blogger

09/03/2011
Hay diversos sistemas para crear sumarios en Blogger y así conseguir que nuestras entradas se muestren resumidas con el consabido "Leer más" (página principal y de navegación: etiquetas/recientes/antiguas).

Los primeros que descubrimos requieren entrar manualmente algún código extra en los post, como puede ser el caso del viejo truco con la clase .fullpost o del mejorado corte (<--more-->) que Blogger tuvo a bien ponernos en nuestro editor no hace demasiado.

Pero para poder hacer lo mismo automáticamente, sólo nos quedaba o bien hacer una chapuza CSS o bien utilizar alguna utilidad JavaScript que hiciera el trabajo por nosotros.

Sin embargo, en Blogger Buster han tenido la genial idea, de utilizar algunas de las nuevas etiquetas DATA que se han ido incorporando en los últimos meses, para simplificar todo esto.

Tengo que comentar, sin quitarle ni el más mínimo mérito a Amanda, que eché de menos algunas cosillas en el código original y que este que presento más adelante, contiene ciertas modificaciones.

Por ejemplo, no se tuvo en cuenta las páginas estáticas y en estas aparecía también el "Leer más" sin ninguna necesidad. En segundo lugar, aquel código anulaba los more que el administrador hubiera introducido hasta la fecha, dando prioridad al resumen del snippet. Por último, también duplicaba el enlace ya nombrado cuando pre-existía.

A mi parecer, los cortes que alguien haya podido introducir manualmente en una entrada, tienen mucho más sentido, que los resúmenes del snippet, amén de que estos últimos, no suelen pasar de los 150 caracteres. Por ese motivo principalmente, he decidido introducir modificaciones. Al que le venga bien tal y como estaba, siempre puede tomarlo del Blogger Buster.

Y aclarado esto, seguimos...


Se trata de montar una serie de condiciones y usar algunas etiquetas DATA, para mostrar sólo lo que nos interesa, justo dónde nos interesa. Con ello  se puede montar este bonito código que resulta suficiente y sobrado para crear los susodichos sumarios. Sólo hay que buscar en la plantilla (con Expandir plantillas de artilugios marcado) la variable <data:post.body/> y sustituirla por esto otro:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>

Con esto ya tenemos nuestros sumarios funcionando, pero como seguramente también queramos darle nuestro toque personal, entonces tenemos que recurrir al CSS.

La clase que controla la miniatura es la .thum img, por lo que si la insertamos entre nuestras etiquetas SKIN, podemos hacer flotar la imagen a derecha o izquierda del texto, así como añadir márgenes o bordes. También podemos hacerla más grande añadiendo un WIDTH, pero sin pasarse de píxeles porque la redimensión se hace sobre la miniatura, lo que provoca una perdida de calidad:

.thumb img {
float: left;
margin: 0 10px 10px 0;
}

Actualización: Debido a que Blogger ha cambiado el código que inserta cuando subimos una imagen al blog, la clase correcta para controlar la miniatura sería .item-thumbnail img. Por tanto, el anterior código tendría que ser así para los que tengáis problemas:

.item-thumbnail img {
float:left;
padding: 0 10px 0 10px;
}

Una segunda modificación sería la del aspecto del corte, cosa que ya vimos anteriormente y para lo cual usaremos la clase .jump-link.

Todo esto lo podéis ver funcionando en esta página de demostración.


Y para los que quieran profundizar más...

Algunas de estas variables ya las conocía pero otras no; y realmente vienen de fábula para lo que se pretende:
  • data:post.hasJumpLink (si hay salto 'more' o no en la entrada)
  • data:post.jumpText (el texto que servirá de enlace al 'more')
  • data:post.snippet (texto truncado de cada entrada publicada)
  • data:post.thumbnailUrl (miniatura de la primera imagen de cada entrada)
Y por supuesto, la tan antigua como imprescindible data:post.body, la que recoge todo el contenido tecleado por nosotros en las anotaciones.

La estructura del código comienza por distinguir mediante condiciones anidadas, si estamos (data:blog.pageType) en una entrada (item) o en una página estática (static_page). En estos casos no hacemos nada salvo lo usual, que es imprimir el contenido del post (data:post.body) tal cual.

Ya sabemos que estamos en la página principal o en una de navegación, por lo que lo siguiente es comprobar si hay corte en la entrada (data:hasJumpLink) para si lo hay, dejar actuar dicho corte y tampoco hacer nada especial.

Y ahora entramos en el resto de casos.

<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>

Primero comprobamos si hay resumen generado por Blogger (data:post.snippet), porque si no, tampoco nos molestamos en hacer nada. Descartados todos los casos en que no hay que hacer nada, si hay resumen comprobamos también la existencia de miniatura (data:post.thumbnailUrl) para mostrarla. Por último, dentro de esa misma rama, añadimos el resumen y el código que monta el corte (jump-link). Sumarios listos.

Nótese en la página demo, que cuando la entrada contiene sólo una imagen o un vídeo sin texto, no existe resumen, por lo que se mostrará completa. Sin embargo, en cuanto haya un solo carácter, se verá el Leer más aunque sea innecesario. Ocurre lo mismo cuando hay más de una imagen.

Son casos extremos no habituales, pero se podrían solucionar si existiera alguna DATA que nos sirviera para saber el número de caracteres que tiene un post o encontráramos otro sistema análogo. Otra posibilidad, sería la de poder controlar el snippet. El problema es que yo no conozco ninguna manera ¿A alguno de entre los presentes se le ocurre algo?


Usando formularios para crear una lista de enlaces en poco espacio

08/03/2011
Esto no requiere demasiada explicación. Simplemente se trata de dar una idea para acortar esas interminables listas de enlaces que algunos tenemos, de manera que ocupen menos espacio en nuestra barra lateral... o dónde sea.

Para ello usaremos HTML y en concreto, el código necesario para construir un campo desplegable de un formulario. El código básico sería este:

<form name="formulario" method="post" action="">
<label>MIS SITIOS</label>
<select name="destinos">
<option value="http://google.es">Google</option>
<option value="http://youtube.com">YouTube</option>
<option value="http://gmail.com">GMail</option>
</select><input onclick="location.href=formulario.destinos.value;" type="button" value="IR" name="button">
</form>

Por cada nuevo enlace habría que añadir una nueva OPTION, con sus correspondientes etiquetas de apertura y cierre, incluyendo un VALUE igual a la dirección de destino. La etiqueta LABEL justo después de abrir el formulario, sólo contiene texto para servir de título sobre lo que el desplegable contiene. Se puede eliminar si se desea. El resultado sería este:



Notaréis que la etiqueta INPUT genera el botón que sirve para ir al enlace seleccionado. El texto del VALUE puede ser el que queráis (en el ejemplo "IR").

Pero también podríamos modificar un poco el código, para que se acceda al enlace sin necesidad del botón. Esto haría que fuéramos directamente a la dirección, nada más cambiar nuestra selección:



En este segundo caso, suprimiríamos el mencionado INPUT (botón "IR") y tendríamos que colocar un ONCHANGE en la etiqueta SELECT:

<form name="formulario2" method="post" action="">
<label>MIS SITIOS</label>
<select name="destinos2" onchange="location.href=formulario2.destinos2.value;">
<option value="http://google.es">Google</option>
<option value="http://youtube.com">YouTube</option>
<option value="http://gmail.com">GMail</option>
</select>
</form>


Actualización.

Para abrir el resultado de la selección en una ventana/pestaña nueva, sustituimos dentro del onclick, location.href por window.open.

<form name="formulario" method="post" action="">
<label>MIS SITIOS</label>
<select name="destinos">
<option value="http://google.es">Google</option>
<option value="http://youtube.com">YouTube</option>
<option value="http://gmail.com">GMail</option>
</select><input onclick="window.open(formulario.destinos.value);" type="button" value="IR" name="button">
</form>


Suscribirse a: Entradas (Atom)
Recibe por correo las últimas publicaciones.
Teclea tu dirección.


No rights reserved
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace. Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.

El botón que
no hace nada El botón que no hace nada

Ir Arriba