JMiur [E]

Mandelrot tenía una inquietud que expresaba en varios comentarios. Había agregado el script Fabtabulous e intentaba agregar contenidos automáticos.

Empecemos por el principio.

Fabtabulous es un pequeño script que usa la librería Prototype y que nos permite crear un bloque con solapas que tengan diferente contenido por lo que en poco espacio, podemos mostrar varias cosas sin tener que extendernos a lo largo de la sidebar.

Para mi gusto es una de los mejores scripts ya que es muy pequeño, sencillo de usar y tiene la característica de poder personalizarse gráficamente con CSS. Los archivos necesarios para usarlo y las explicaciones respectivas pueden verse en el este post [más información]

La pregunta de Mandelrot apuntaba a un ejemplo concreto: poder colocar las etiquetas del blog en una de esas solapas.

La idea me pareció interesante y el uso de solapas me gusta, de hecho, con el mismo script, era lo que usaba en WordPress pero en Blogger ¿cómo hacerlo?

Hubo un largo feedback de ideas y fracasos. El problema radica en que en Blogger, ciertos datos sólo son accesibles cuando se encuentran incluidos en un elemento (widget) determinado. Por ejemplo, los datos del post solo podemos leerlos en el elemento Entradas del Blog y los datos de los archivos en el el elemento Archivos. Lo mismo ocurre con las etiquetas que sólo podemos leer en un elemento Labels. Esta es la gran limitación de Blogger, si pudiéramos leerlas en cualquier parte de la plantilla incluyendo el header, sabríamos la categoría del post a mostrar antes de hacerlo y podríamos manipularlo; por ejemplo, mostrar un diseño diferenciado según fuera de un tipo o de otro.

Esta bien, entonces, si sólo podemos leer las etiquetas en un elemento Labels ¿podemos usar el elemento Labels para agregar otro tipo de contenido? Esa era la idea que quedó flotando y en principio, no veo porque no debería poder hacerse. Claro, no podremos agregar datos de otros elementos exclusivos pero podemos agregar contenido propio como hacemos con los elementos HTML.

Si bien el ejemplo está implementado con Fabtabulous, en realidad, podríamos usar cualquier otro script del mismo tipo.

Lo que vamos a aprovechar es la posibilidad de crear tantos elementos Label como se nos ocurra. Si ya tenemos uno, agregamos otro desde Elementos de la Página, le ponemos un título y establecemos las opciones que nos parezcan convenientes. Guardamos y ahora vamos a Edición HTML de la plantilla y expandimos los artilugios.

Buscamos el código del nuevo elemento (por eso es bueno colocar un título claro aunque después lo cambiemos). Si ya teníamos un elemento similar, lo que veremos será algo así:
<b:widget id='Label2' locked='false' title='NOMBRE' type='Label'>
<b:includable id='main'>
<!-- este es el título del elemento -->
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<!-- este es el bucle que lee las etiquetas del blog y las muestra -->
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<!-- este es el ícono para editar el elemento -->
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Como en este momento no estoy usando un script con solapas en mi blog, decidí entonces colocarlo en uno de pruebas y, para probar las cosas, simplemente copié el ejemplo del post anterior
<b:widget id='Label2' locked='false' title='NOMBRE' type='Label'>
<b:includable id='main'>
<!-- este es el título del elemento -->
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<!-- AQUÍ COLOCO EL CÓDIGO DE LAS SOLAPAS -->
<ul id='tabs'>
<li><a class='active-tab' href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
<li><a href='#tab4'>Tab 4</a></li>
</ul>
<div class='demoTabs'>
<div class='panel active-tab-body' id='tab1'>El contenido de la primera solapa.</div>
<div class='panel' id='tab2'>El contenido de la segunda solapa.</div>
<div class='panel' id='tab3'>El contenido de la tercera solapa.</div>
<div class='panel' id='tab4'>El contenido de la cuarta solapa.</div>
</div>
.......
Obviamente la parte gráfica no se ve muy bien pero las solapas funcionan así que probemos que pasa si movemos el loop de Blooger y lo colocamos en el contenido de una ellas.

En lugar de:
<div class='panel' id='tab2'>
El contenido de la segunda solapa.
</div>
Ponemos:
<div class='panel' id='tab2'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
</div>
Parece que no hay problemas, es aceptado y las etiquetas se muestran correctamente aunque, claro, deberá adaptarse el estilo con CSS.

¿Y el resto de las solapas? En principio, cualquier contenido es válido excepto otro elemento de Blogger.

¿Podría hacerse con el elemento Archivos? No lo he probado pero imagino que sí, sólo habría que seguir el mismo criterio, copiar el contenido del elemento (todo lo que está entre el título y el ícono de edición) en la solapa donde quisiéramos verlos.

15 comentarios:

Mandelrot  

Esto es como cuando uno va al mecánico diciéndole "mi coche no arranca", y va el tipo, mete la llave y prueba... Y va a la primera. Cuando leí la solución pensé "pero si esto es lo que hice yo y no funcionaba", probé y efectivamente las pestañas no iban; así que decidí borrar lo que tenía, empezar desde el principio siguiendo los pasos de cero y... ¡Voilà! Supongo que había algo en mi código que por alguna razón funcionaba fuera del elemento tipo Label y no dentro de él, y al borrarlo todo y copiar/pegar esta vez no había fallos. Muchas gracias JMiur, esto sí que es una solución elegante...

De todas formas, y pensando en los que quieran hacer estas cosas y tengan menos experiencia en diseño, te voy a hacer una sugerencia si no te importa: tu post empieza haciendo referencia al script, luego explicas cómo ha sido tu proceso lógico para encontrar la solución, etc; pero quizá fuera más fácil para quien no sea capaz de seguirlo poner por ejemplo un archivo de texto con algo como "instala prototype.js y fabtabulous.js en tu servidor, luego copia este código (el style) allá, y luego expande artilugios y donde pone 'widget...' tú sustituyes ese trozo por esto: 'blablablá'".

Vamos, lo digo porque yo he podido seguirlo -dándome cuenta, por ejemplo, de que el código que copié de tu post sobre fabtabulous no es exactamente el mismo que el del texto con el código que has aplicado en tu blog de pruebas- pero seguro que si no fuera por las horas que me he pasado leyéndote a ti y a otros para aprender me habría perdido seguro.

Pero vamos, en lo que a mi respecta, tu solución elegante al problema es perfecta... :-D Quizá parezca una cosita pequeña, pero tu idea tiene más posibilidades de las que a primera vista parece: por una parte, el hecho de que tanta gente en WordPress use este sistema me dice que hay un montón de gente en Blogger que lo usaría si lo conociera; y por otra, las posibilidades que se abren para hacer plantillas en Blogger con diseños tipo magazine (por ejemplo ésta tan bonita) son enormes. Ya te lo dije, si Blogger llega a un nivel técnico comparable a otros sistemas más abiertos será sólo gracias a gente como tú...

Responder
JMiur  

Me alegro que funcionara, Mandelrot. Como ves, no difiere mucho de lo que charlamos en el otro post.

Lo que dices, si, es cierto, pero, me pareció que repetir desde el inicio todo era repetir el post anterior y hacerlo demasiado largo. Veremos como resuelvo el tema.

De cualquier manera, las solapas son interesantes así que, probablemente, haya más sobre el tema y entonces se podría explicar todo en conjunto, no sé, es sólo una pensamiento en voz alta.

Responder
Mandelrot  

Es verdad lo de hacer un post demasiado repetido, por eso te hice la sugerencia de poner un link a un documento de texto con las instrucciones... Yo creo que si no hay más gente que usa este sistema en Blogger es porque no lo comprende bien, le parece muy difícil o no lo ha visto funcionando; porque no es posible que aquí a pocos le interesen y que en WP se haya extendido tanto y tan rápidamente (yo he visto en foros de WP a un MONTÓN de gente preguntando por ello).

Además es que tiene enormes ventajas: para empezar, la información más "fea" o menos útil sigue estando a disposición del usuario pero no se ve a menos que éste señale la pestaña correspondiente (en mi caso, por ejemplo, la información legal); se ahorra mucho espacio -sidebars menos interminables-, y al haber menos elementos destaca más la publicidad que en su caso alguien quiera poner; es elegante, la personalización e integración es absoluta -yo voy a manejar cinco páginas y el diseño encaja perfectamente con cada una-; y encima, con la solución que tú has encontrado, ahora sí que se puede meter cualquier cosa.

Ya digo, estoy al 100% seguro de que si este post no trae más "cola" y no genera una minirrevolución en los diseños más personalizados de Blogger será, en todo caso, por ser demasiado difícil de digerir para muchos; porque el potencial ahí está...

Responder
JMiur  

Estoy de acuerdo, amigo. Creo que tal vez merezca explicaciones un poco más amplias así que veremos a donde llego y si es posible mostrar más ejemplos desde cero para que resulte sencillo de implementar.

Responder
Motorola  

Hola JMiur ¡Finalmente encontré el post que necesitaba! En un site encontré una plantilla XML que me gustó y quise poner en mi blog. Ya tiene el código de las tabs incorporado, pero no sé cómo desarrollar el contenido de éstas y asignarles un link propio. Entiendo que deben ser páginas separadas...
Debo diseñarlas aparte? Otros blogs? Auxilio!

Responder
ERALDO  

Hola
Soy Gabriel y debo de confesar mi absoluto desconocimiento en programación, pero por cosas de la vida quiero crear un blog, por eso escribo para solicitar ayuda¡¡.
Mi idea es poner un blog con secciones de películas, programas, antivirus y tutoriales con insertos de publicidad para lo cual le he insertado un menu debajo de la cabecera donde se puede acceder a las distintas secciones del blog, pero no se como crear efectivamente estas secciones o paginas dentro de mi blogg y enlazarlo vía vinculo interno o referencia.
Este es la URL de mi página http://gratisbajadas.blogspot.com/ y mi correo es: 7.eraldos.@gmail.com para que puedas ver y ayudar a realizar lo que quiero.
Con respecto a tu página me parece excelente he aprendido un poco desde que la leo; me parece que deberías ser un poco más gráfico en desarrollar tus ideas para que todos podamos entender y puedan acceder personas con el nivel de conocimiento que tengo pero con hambre de aprender, por ejemplo no me queda claro las secciones donde se insertan estos códigos y como deberían de funcionar.
Un saludo y felicitaciones por tu labor.

Responder
JMiur  

ERALDO:
En Blogger no hay secciones especiales ni nada semejante, sólo hay entradas y un menú (como el de este blog) sólo apunta a esa dirección de esa entrada individual que puedes ver cuando se publica.
El resto sólo es una "simulación". Esas entradas del índice, por ejemplo no teinen comentarios ni título, etc. Ese detalle en particular está explicado acá pero lo escencial es que son entradas normales.

Responder
Manuel de la Fuente  

Puedes poner en solapas cualquier elemento que quieras si haces una sección independiente para cada uno y luego metes la sección entera en la pestaña. Así le hice yo para poner en pestañas un feed y el Blogroll.

Responder
Manuel de la Fuente  

Si me permites decirlo, creo que así es más fácil ya que puedes hacerlo sin expandir los artilugios.

Responder
JMiur  

Por suerte, no hay un solo camino. Todo dependerá del tipo de script que se utilice y de la plantilla donde se aplicará. Cualquier cosa que sirva para obtener el resultado deseado es válida.

Responder
Island Ipsum  

Hola

Siguiendo esta idea seria posible poner los comentarios en una solapa en las entradas?

Te hago referencia a una página para que se vea mas claro lo que quiero decir.

http://24ways.org/2010/circles-of-confusion


Un abrazo! :)

Responder
JMiur  

Tendría que pensarlo. No sabría que responderte ahora. Imagino que si. Voy a probar :D

Responder
Island Ipsum  

Ojala puedas hacer un articulo sobre ello!!!

Un Abrazo :D

Responder
Anónimo  

Hola.
Espero me puedas ayudar con un problema. Estoy editando una plantilla pero al momento de poner un Widget de "Etiquetas" en la Sidebar "content-right" este no se ve. Te dejo el link de la plantilla http://www.mediafire.com/?pepriaom1ec7mut

Desde ya gracias....

JMiur  

Tendría que ver tu ejemplo para intentar responder.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR