Nueva plantilla adaptable o responsive

Vivimos en la era del móvil. Para bien y para mal. Y si no tienes un sitio web adaptado a este tipo de dispositivos, parece que hasta pierdes visitas. El diseño web adaptable o responsive web design ha llegado para quedarse. Y es que si una visita no es capaz de navegar cómodamente por tu web o blog, o no es capaz de encontrar lo que busca, lo va a abandonar sin pestañear. Así de claro.

Es por eso que me he liado a hacerme una "nueva" plantilla para este blog. La he basado un poco en la línea de mi (todavía en línea, a día de hoy) web del estudio, que ha sido adaptable desde el día cero. Pero lo de "nueva" lo he puesto entre comillas porque, como ando algo mal de tiempo, he optado por tomar una plantilla ya existente y modificarle lo necesario para que lleve la imagen de mi web del estudio, y la que venía teniendo, más o menos, en este mismo blog.

Comentarios de Google+ en Blogger, sin perder el sistema actual

Hace tiempo que no escribo sobre trucos de Blogger, pero la ocasión bien lo merece. Se está hablando mucho en la blogosfera, especialmente en la residente en Blogger, sobre el nuevo sistema de comentarios que Google nos quiere ofrecer como alternativa. Así que he indagado un poco sobre el asunto.

Hay varias ventajas y desventajas de hacer el cambio, que Oloman ya ha sintetizado de manera magistral, así que no es necesario que las repita por aquí. Sin embargo, a mi me pesan bastante más las desventajas (como la obligación de usar un perfil de Google+ para poder comentar, por ejemplo), aunque abrir la posibilidad a los plusers de comentar usando su ecosistema puede ser también una buena idea. Entre otras cosas, puede ayudar a difundir nuestro contenido, además de conocer, a un clic de distancia, qué es lo que se dice sobre un post o una página en concreto, o incluso del blog entero, en la red social de la gran G.

El sistema que propongo es mantener los comentarios tal como los tenemos (en mi caso, cambié a Disqus hace tiempo, aunque los tengo sincronizados con Blogger), pero añadiremos un enlace, que nos abrirá en un pop-up un iframe de Google+, con las publicaciones y comentarios relacionados con cualquier dirección de nuestro blog. Además, no es necesario conectar el blog con Google+.

Disqus no funciona en la versión móvil de Blogger [solución]

Aunque las visitas a través de navegadores de escritorio siguen siendo mayoría, es cada vez más frecuente que los blogs, y cualquier sitio web en general, sean visitados desde dispositivos móviles. De esas visitas es probable que a alguna le apetezca escribir y publicar un comentario en alguna entrada. Así es que debemos facilitar en lo posible que lo consiga con éxito.

Desde hace unos meses instalé Disqus en este blog. Se trata de un sistema de comentarios muy completo y mucho más sofisticado que el que tiene Blogger. Entre otras cosas interesantes, en las que podría entrar en detalles si a alguien le interesa, está la de poder comentar tanto como invitado como haciendo uso de una cuenta de Twitter, Google, Facebook, Yahoo, además del propio Disqus.

El caso es que unas horas atrás me estaba planteando desinstalar Disqus. El motivo era que en la versión móvil no funcionaba, y seguía mostrándose el formulario estándar de Blogger, tal como se puede ver en las capturas de arriba. Como consecuencia de este fallo, si alguien publicaba un comentario desde la versión móvil, el texto llegaba a la base de datos de Blogger y hasta era visible desde la propia versión móvil, pero al no llegar a Disqus, ese comentario no era visible desde la versión web.

Pruebas de HTML5 para reproducir audio y música

Para la reproducción de audios en este blog (me refiero a audios que alojo por mi cuenta en DropBox o en Archive.org), llevo un tiempo utilizando un script de Yahoo!, que descubrí en Ciudad Blogger [actualización]. Me ha ido bien hasta la fecha, pero dos son las limitaciones por las que decido cambiar de reproductor:

Versión móvil de Blogger para plantillas antiguas

Hace dos días, Pizcos avisaba de una nueva funcionalidad de Blogger: versión móvil de nuestros blogs. Y explicaba la manera de activar dicha funcionalidad desde Blogger in Draft. En su post lo podéis leer con más detalle.

Yo os voy a explicar cómo hacer una versión móvil para vuestro blog en Blogger, de manera muy fácil. Y sólo vamos a utilizar un poco de Javascript en la plantilla. Y es totalmente independiente de lo que explica Pizcos.

Este método lo he ideado a raíz de que los pasos a realizar en Blogger in Draft, explicados por Pizcos, a mi no me han dado resultado, y para no modificar excesivamente mi plantilla actual. Si es tu caso también, sigue leyendo.

CSS Viewer para Firefox 3.6

CSS Viewer es un sencillo complemento para Firefox. Su función es mostrar todas las propiedades CSS asignadas a la sección o fragmento de la página web que estamos viendo en esos momentos a través del navegador, con solo poner el ratón encima de ella.

Me ayudó mucho a crear mi actual plantilla, porque de un solo vistazo podía ver la clase o identificador a la que tenía que asignar determinada propiedad en la hoja de estilos.

Avatares de Wordpress en Blogger

Josepin hizo su comentario haciendo uso de la opción Nombre/URL... ¿Cómo es posible que veamos ahora su careto virtual o avatar en sus comentarios en este blog?

Esto tiene su explicación: he decidido premiar mis comentaristas, usuarios de Wordpress, o de cualquier otro gestor de contenidos, haciendo que se vean sus avatares de Gravatar (o el que tengan on-line) cuando comentan aquí. ¿Cómo? Muy sencillo. Aunque aviso que no es algo automático, sino que ha de hacerse manualmente, aunque lleva apenas cinco minutos hacerlo.

La Informática, la Música Digital y su Puta Madre v2

Antes, este blog era como en la captura de pantalla de arriba: una Mínima Black ligeramente modificada. Ahora es una Simplexive notablemente destrozada.

Llevaba mucho tiempo queriendo hacer el cambio, pero muchas cosas han sido las que lo han ido demorando, hasta que un día me dije: voy a dedicarme sólo a la nueva plantilla hasta que logre algo que medio me guste. Y como soy tan sólo un aficionado en temas de diseño web y de Blogger en concreto, pues me ha costado lo mío conseguirlo.

Es evidente que, aunque lo he hecho solo, tengo que agradecer a muchas personas, que son autores de varios blogs de los que se llaman "de ayuda", el esfuerzo que han hecho para que gente torpe y autodidacta, como un servidor, pueda hacer prácticamente lo que imagine de su rinconcito en la web.

¿Por qué era tan inestable el formulario incrustado?

Después de dar mil vueltas a la actual plantilla, y hacer otras mil pruebas con el "Vista previa" del formularo de comentarios incrustado, al fin he dado con la que parecía ser la causa del problema, porque ahora va perfectamente. La responsable era esta línea, que remarco en azul:

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' name='comment-editor' scrolling='no' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>

¿Solución al problema? Eliminarla sin miramientos. No sé para qué es realmente esa línea de código, pero tiene cierta relación con el gadget de seguidores. Sin embargo, sigue viéndose dicho gadget en la columna lateral, así que tampoco servirá para tanto, ¿no?

Ahora sí, creo que, por fin, podéis hacer uso tranquilamente del formulario incrustado, tanto in situ como a través de Lytebox. De todas formas, recordad que tenéis la opción también de usar el formulario clásico y, en breve, añadiré el enlace para comentar con pop-up.

En cuanto a la nueva plantilla, aún se va a hacer esperar un poco, pero ya queda menos.

Comentarios a través de Lytebox

Llevaba tiempo que quería hacer esto, pero ha sido una de las entradas más recientes de Vagabundia la que me ha dado el empujoncito definitivo: se trata de la visualización del formulario incrustado de comentarios a través de una ventana modal.

Pero a diferencia de JMiur, que lo hace con la aparatosa, aunque elegante LightWindow, yo lo he hecho con la más ligera y sencilla ventana modal Lytebox. Sistema que llevo utilizando hace tiempo en este mismo blog, que aprendí gracias a Gem@.

Problema en las entradas importadas con los avatares en los comentarios

Me di cuenta por primera vez comentando en el blog Música y Otras Ondas de mi amigo Mijel GLLV. Algo había cambiado, pero hasta que no me fijé bien no acabé de dar crédito: ¡los avatares de los comentaristas se ven en la página de los posts!

Más tarde, en mi habitual recorrido por los blogs que tratan temas de Blogger, como en Chica Blogger, Oloblogger, Vagabundia, Trucos Geek, Gem@ Blog...

Podría repetir el método para lograrlo en plantillas muy modificadas. De hecho, puede que lo haga más adelante, como anotación personal para tenerlo más a mano. Pero el motivo de este post no es como hacer que se vean los avatares, sino que he detectado un problema cuando se trata de entradas importadas.

Actualización: el procedimiento a seguir para habilitar la visualización de los avatares de los comentarios, en caso de que no se vean por tener una plantilla antigua o muy personalizada. Para verlo, pincha en el siguiente enlace.

Mostrar/ocultar

Primero hay que asegurarse que está marcado el si en ¿Mostrar imágenes de perfil en los comentarios? en Configuración - Comentarios.

Antes de continuar, comprobar si se ven o no los avatares en los comentarios, abriendo la página individual de un post cualquiera.

Después, si continúan sin verse los avatares, tras la copia de seguridad de la plantilla, hay que expandir artilugios, y buscar esto:


<dl id='comments-block'>

Y reemplazar esa linea por esta otra:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Después hay que buscar la línea:


<a expr:name='data:comment.anchorName'/>

Y añadir, a continuación de ella:

<b:if cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/>

</b:if>

Lo vi por primera vez en Chica Blogger.

Algunos de vosotros ya sabéis que estoy preparando un nuevo diseño para este blog. Cuando estará acabado, es una incógnita hasta para mi. El caso es que para facilitar el proceso de rediseñar el blog, lo más práctico que se me ocurrió fue exportar las entradas de éste e importarlas en el de pruebas, para que fuera lo más real posible.

Cuando descubrí la posibilidad de lo de los avatares, llevaba ya bastantes cosas hechas de la nueva plantilla. Hice los pasos que Chica Blogger (el primer sitio que vi para hacerlo) explica en su blog, pero para mi sorpresa, no funcionó.

Probé a hacerlo en este mismo blog, y lo conseguí a la primera. Aproveché para hacer unos cambios en los estilos de los comentarios, y el resultado fue este:

Si embargo, los mismos comentarios de la misma entrada en el blog de pruebas salen así:

Sin embargo, los avatares quieren salir. Prueba de ello es que, al seleccionar el texto de los comentarios, el lugar donde deberían salir se resalta también:

Un pequeño inciso: volví a la plantilla Mínima Dark para estas capturas, pero el resultado es el mismo. Es que no quiero que veáis aún mi nuevo diseño.

Tengo que decir que antes de saber la posible causa me volví loco buscando por la plantilla a ver qué podía ser o qué no. Hasta que se me ocurrió escribir en el blog de pruebas un nuevo comentario:

Pues eso era entonces: a los comentarios de las entradas importadas no se les ve el avatar. Más exactamente, debería decir que a los comentarios importados.

Seguramente la clave de todo está en el número de post o de comment que sale en el enlace permanente de los comentarios, cuando haces clic en la fecha o en la papelera para borrarlos, URL que es visible en la barra de estado:

Intenté abrir el archivo XML de exportación de las entradas en busca de la respuesta, pero todos los editores de texto con los que he probado se colgaban al intentarlo, debido a su enorme extensión.

Siento no ofrecer una solución para este problema, pero espero que al menos le sirva a alguien por si le pasa lo mismo que a mi, es decir, para saber que si importas entradas de otro blog, los avatares de los comentarios de las entradas importadas, en principio, no se van a ver.

Si consigo evitar que alguien más se vuelva loco o loca destrozando el código de sus plantillas para resolver este problema, me daré por satisfecho.

Cambios en el sistema de comentarios

Tenía previsto publicar otra cosa, pero las circunstancias me han obligado a escribiros este aviso.

Desde hace unos días, el sistema de comentarios incrustado daba problemas. Seguramente al dar al botón vista previa, desaparecía el texto y, claro, si uno ya ha escrito un comentario y se pierde de la manera más tonta, es natural que ya no escriba. Lo sé porque he probado a comentar sin tener la cuenta de Blogger abierta, y creo que era eso lo que pasaba.

He combinado el sistema clásico de blogger con un truco que aprendí de Vagabundia para que se vea el formulario sin salir de la página, pero con Lytebox en vez de con LightWindow, artefacto que conseguí implementar gracias a Gem@. Más adelante, si alguien está interesado, ya publicaré cómo lo hice, pero no aquí, sino en Blog Consejo.

Pero incluso así ha dado problemas. Según Io me dijo por e-mail, no salía la imagen de verificación de palabra, y al no ver la imagen antiespam y no poder introducirla, no me pudo dejar anoche este precioso comentario, en la entrada de Maya Filipic, que os copio a continuación:

Gracias Jose, ahora mismo estoy escuchando este cadencioso piano mientras me descargo el álbum. Es la una de la madrugada, la calle está en silencio y tan sólo se escucha el rumor del mar, así que el momento está siendo mágico.

Le paso el enlace de tu entrada a una amiga, que le va a encantar.

Cómo me gustaría saber tocarlo, pero es una pieza muy larga para mí, me llevaría demsiado tiempo aprenderla.
Besos.

Esta mañana me ha regalado otras palabras en esa misma entrada; También nuestro colega Armstrong Free Lance ha logrado enviarme una botella con un mensaje, con éxito, desde su isla en la misma entrada. Por lo tanto, ahora parece que sí funciona bien.

Pero para ello no me ha quedado más remedio que quitar la palabra antiespam, pero para tener el blog libre de comentarios no deseados, he tenido que habilitar la moderación de comentarios. Y seguirá de manera indefinida hasta que averigüe por qué no se ve la dichosa palabra de verificación.

De todas formas, sabéis que vuestras palabras siempre son bien recibidas. Sólo quiero prevenir publicidad, intercambio desmedido de votos en el concurso 20 Blogs, que está a punto de arrancar de verdad, y cosas de ese estilo.

Por favor, probad a comentar en esta entrada, a ver si funciona bien, y al menor problema, avisadme vía formulario de contacto, o por donde sepáis que me podéis localizar.

Y gracias por vuestra paciencia y perdón por las posibles molestias pasadas, presentes y futuras a causa de este problema.

Gracias también a Juan Duque, que fue el primero en ponerme sobre aviso.

Código para mostrar y ocultar

Este sencillo código lo aprendí en una entrada del blog de César. Lo utilicé para crear el menú de la barra lateral de Yenodeblog, y lo uso para ocultar y mostrar código en Blog Consejo. Y como le voy a dar bastante uso a partir de ahora también aquí, voy a compartirlo con vosotros y así, de paso, lo tengo localizado para cuando lo utilice.

Mostrar/ocultar

<script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse(postid){whichpost=document.getElementById(postid);if(whichpost.className=="shown"){whichpost.className="texthidden"}else{whichpost.className="shown"}}</script><ul id="nava"><b><a href="javascript:void(0);" title="Texto a mostrar al pasar el ratón" onclick="expandcollapse('contenido')">Mostrar/ocultar (Texto o imagen que hará de enlace)</a></b></ul><ul id="contenido" class="texthidden">CÓDIGO A CONTENER</ul>

Como veis, al hacer clic en el enlace se expande y se oculta el contenido que pongáis justo donde pone CÓDIGO A CONTENER.

Para utilizar este código hay que tener en cuenta que, si se utiliza varias veces en una misma vista de página, hay que cambiar la variable contenido, tanto en onclick="expandcollapse('contenido') como en <ul id="contenido" class="texthidden">. La variable puede ser cualquier palabra, excluyendo las palabras reservadas en JavaScript. Eso sí, dentro de un mismo elemento, ambas variables deben ser la misma palabra.

Poco a poco lo iré usando para hacer un poco más corta la barra lateral y así hacer más rápida la carga de la página. Pero no por ocultar carga antes, sino porque al acortar me permitirá reducir el número de entradas a mostrar en la página principal.

Quiero conseguir mostrar como mucho cuatro o cinco entradas, y que no quede descompensada el área de los artículos con la de la barra lateral, y que la carga de la página baje de los ocho segundos.

Bueno, ahí os dejo el código. Usadlo con moderación .

Blog Consejo

Casi cada uno de los cambios o extras al diseño en este blog os lo he comentado en una entrada, u os la he enlazado al lugar donde lo aprendí.

Pues bien, a partir de ahora este tipo de cosas las publicaré en Blogconsejo, la última iniciativa a cargo del Equipo de Yenodeblogs, del que me enorgullece formar parte, junto con Uve y Európides.

Se trata de una fuerte apuesta por nuestra parte en materia de ayuda al y a la blogger. Damos consejos sobre cómo administrar un blog, rediseñarlo, optimizar la carga en los navegadores, mejorar el posicionamiento en los buscadores... Y lo mejor de todo: lo que los lectores propongan y pregunten, en la medida de lo posible, lo explicaremos y aclararemos.

Y otra cosa, no nos cerramos en Blogger solamente, también buscamos soluciones para Wordpress y para cualquier otra plataforma bloguera para la cual se precise ayuda.

Por el momento, mis compañeros son los que están aportando sus primeras entradas, aunque no tardaré yo mismo en poner mi grano de arena, en la medida de lo que el tiempo y otros proyectos personales me lo permitan.

Aprovecho la ocasión para avisaros de que voy a activar la moderación en los comentarios, porque voy a estar ocupado en otros menesteres durante un tiempo, pero desactivaré la imagen antispam, por si alguien quiere comentar alguna entrada antigua... O ésta misma.

Ojalá Blogconsejo sea de vuestro agrado :).

Nube de etiquetas

Para instalarme en el blog la nueva nube de etiquetas o tags, de todos los sitios que busqué, la explicación que más me gustó fue la de Blog And Web. Como alli lo enseña muy bien, no voy a repetir lo que dice su autor, pero si voy a comentar unos detalles:

En la línea que dice:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

En Labels, si ya usabas el gadget de etiquetas de Blogger -el cual ha de estar colocado para que todo eso funcione-, y le cambiaste el nombre que tenía por defecto, verás ese nombre. Yo, por poner un ejemplo, tengo desde hace tiempo ¿Qué vas buscando?, así que tuve que sustituir esta línea, tal como la tenía:

<b:widget id='Label1' locked='false' title='¿Qué vas buscando?' type='Label'/>

Por lo que dicen en Blog and Web, en el paso 6, sin expandir los artilugios.

Para centrar el texto de la nube en la columna lateral, lo que hice fue buscar, en la plantilla, ésto, que se corresponde con la side-bar:

#sidebar-wrapper {

width: 220px;

float: $endSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Y añadir esta línea: text-align: center; quedándome así, al final:

#sidebar-wrapper {

width: 220px;

text-align: center;

float: $endSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Pero mucho ojo con este cambio, que afectará a todo cuanto hay en la barra lateral.

Para personalizar los textos, sólo hay que jugar con estos parámetros, hasta dar con el tamaño y el color deseados:

var cloudMin = 1;

var maxFontSize = 22;

var maxColor = [0,102,153];

var minFontSize = 10;

var minColor = [113,148,167];

var lcShowCount = false;

Para saber qué códigos tienen los colores, me ayudé del selector del colores de Gimp.

Por último, busqué, con los artilugios expandidos en la plantilla, la línea a.title = ts[t]+' Posts in '+t;y sustituí Posts in por entradas archivadas en para "traducir" al español este pequeño hackeo

.

Emoticonos en el blog ;)

Que me tome en serio, hasta cierto punto, el blog, no implica que no pueda poner detalles divertidos en él, que hagan vuestra estancia aquí más amena.

Los que soléis comentar por aquí ya os habréis dado cuenta que, desde hace algún tiempo, aparecen emoticonos entre el texto de las entradas y en los comentarios que, tanto vosotros como yo mismo, escribimos.

Pues bien, hace poco me topé de nuevo con el lugar exacto donde aprendí la manera de hacer ésto en Blogger, pues perdí la dirección y no me acordaba dónde fue exactamente. Se trata de Blogtecnia, en esta entrada, por si estáis interesados.

Aprovecho para volver a darle las gracias a su autor, Carlos Soler, no sólo por compartir este truquito, sino porque también se tomó la molestia de venir aquí a saludarme.

Entonces me planteé personalizar un poco más el tema de los emoticonos, y he buscado los que más me han gustado, que son éstos, junto a sus correspondientes atajos de teclado:

Emoticonos	Atajos	Emoticonos	Atajos
:)	:) o :-)	:S	:S o :-S
:D	:D o :-D	:$	:$ o :-$
xD	xD o x-D	:O	:O o :-O
;)	;) o ;-)	:(	:( o :-(
:brl	:brl	:E	:E o :-E
:H	:H o :-H	:idea	:idea
:P	:P o :-P o :p	:|	:| o :-|

Si vais a utilizarlos alguna vez, tened en cuenta que debe haber un espacio a cada lado del correspondiente atajo de teclado. Por ejemplo, si empezáis línea con un emoticono directamente, no funcionará.

Por supuesto, en un comentarios no serán visibles hasta que no lo publiquéis.

He puesto, siempre accesible, un archivo chuleta donde consultar los atajos en cualquier momento, sin salir de la página ni perder lo escrito. Funciona dándole a un enlace como éste, que ya he puesto en el formulario de comentarios.

Por cierto, si queréis saber dónde he conseguido estos simpaticos monigotes, están en http://smilies-gifs.com/.

Bueno... ¿A qué esperáis? ¡Venga, a probarlos! xD

Más cambios en el blog

He incluido otro truquito en este blog, que próximamente también agregaré al otro que tengo. Se trata de un elegante visor de imágenes. Para vosotr@s es muy fácil de utilizar. Por ejemplo, tenemos esta imagen de muestra:

Pues haced clic en ella y entenderéis para qué sirve.

De ahora en adelante, en las guías paso a paso que haga, las imágenes se podrán ver a tamaño natural simplemente clicando en ellas con el ratón, de la misma forma que la de muestra de este post.

Para quienes estén interesados en este truco para su blog, os envío a Vagabundia, concretamente esta entrada.

Tanto si os lo ponéis en vuestro blog como si sólo lo utilizáis viendo las imágenes de éste... Que lo disfrutéis.

Estreno menú

Ahora que he superado las dos mil visitas reales, ha llegado el momento de hacer unos retoques y un poco de limpieza al diseño de La Informática, la Música Digital y su Puta Madre.

Efectivamente, estreno nuevo menú: he retocado el que ya había -aprendido en Gem@ Blog- y he añadido uno desplegable, sencillo, pero funcional a la vez. Lo aprendí en el blog de César, para quién le interese -muy buen blog de ayuda, por cierto, lástima que su autor lo dejara-. Me iba haciendo falta, mi bitácora va creciendo en contenidos, y viene bien para tener todo a pocos clics de ratón. Aunque aún le haré algún retoque estético...

En los submenús de informática y música encontraréis los contenidos más habituales del blog. Tengo que destacar los menús esenciales y enlaces:

• Esenciales os llevará a esas entradas que he considerado esencial que todo el mundo tenga acceso a ellas. En un blog ya se sabe, las entradas antiguas van dejando paso a las nuevas, y al final se esconden. Por eso he estimado oportuno agrupar ciertas entradas ahí, que considero de especial interés. Ahí está, por ejemplo, la que escribí, y voy actualizando, sobre utilidades on line.
  
• Enlaces os encaminará a un blog accesorio que tengo tiempo abierto, con los enlaces a los blogs que sigo y a webs interesantes. También enlazaré con entradas de ese blog con enlaces de contenido más específico.

Estoy en... Incluye los links a los blogs colectivos en los que participo... Por si les queréis echar una ojeada.

También he eliminado el widget snapshots, que hacía un poco complicado acceder a algunos enlaces. Y he aseado un poco la barra lateral. ¡Ah! Y otro truquito, sacado del blog de César, que veréis la próxima entrada que tenga imágenes...

Próximamente publicaré la solución a un problema con el sonido de MuseScore en Ubuntu Studio, y otra entrega más de la serie Padres de los Sintetizadores.

Espero veros por aquí, pasaré lista...

¡¡Hasta muy pronto!! ;-)

Effect Generator - Efectos para tu blog

Si estás buscando una herramienta para crear efectos llamativos para tu web o blog, o quieres crear un banner o un icono más estático, tienes una herramienta on-line perfecta para esta labor. Se llama Effect Generator.

Nada más entrar te ofrece empezar a partir de una plantilla, así que no necesitas de grandes conocimientos para utilizarlo desde el principio.

Una vez tienes acabado tu trabajo, le das a guardar, introduces tu e-mail y te envían los códigos para que lo utilices en tus entradas, como gadgets, o como quieras.

El que he puesto en esta entrada es un objeto flash insertado (Flash Embed Code).

Gracias, Grupo Informático, por recomendármelo.

Entradas retráctiles

Este domingo pasado hice unos cambios a la plantilla de este blog. Quienes me habéis seguido con cierta asiduidad os habréis dado cuenta: las entradas largas ya no salen enteras en la página principal. Las he convertido en entradas ampliables. ¿Tienes un blog en blogger y te gustaría saber cómo lo he hecho? Pues...

El truquito lo aprendí de esta entrada de TodoBlogspot, blog que recomiendo para los temas del diseño de blogs, gadgets y cualquier modificación que se te pueda ocurrir hacer.

Para lograrlo, sigue estos pasos:

1. Ve a Diseño y luego a Edicion de HTML desde el Escritorio o Panel de Control de tu blog -antes de seguir es aconsejable hacer copia de seguridad de la plantilla, por si algo sale mal, para eso está el link Descargar plantilla completa-.

2. Activa la casilla Expandir plantillas de artilugios.
3. Busca en el código las líneas:

<div class='post-body entry-content'>

4. Justo a continuación, dejando un espacio, pegas ésto:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

5. Después de la línea:

<data:post.body/>

añadimos:

<a expr:href='data:post.url'>Leer más...</a>

Puedes sustituír el texto "Leer más..." por el que creas más conveniente para animar al lector a seguir leyendo la entrada.

6. Le das a Vista Previa. Si no da ningún error y se visualiza correctamente el blog, entonces le das a Guardar Plantilla.

7. El siguiente paso se va a dar en las propias entradas, pero para no tener que repetir el proceso cada vez que creamos una, guardaremos una plantilla. Para ello, ve a Configuración, luego a Formato y en el campo de texto donde pone Plantilla de Entrada, pegas ésto:

Inicio de la entrada (texto visible)
<span class="fullpost">
Resto de la entrada (texto oculto)
</span>

8. Guardas la configuración. La próxima entrada que crees, desde la Edición de HTML saldrá siempre por defecto este último código. Lo único que tienes que hacer con él es sustituir el texto "Inicio de la entrada (texto visible)" por el texto que estimes oportuno que se muestre desde la página principal del blog. Y luego, el resto de la entrada, consistirá en sobrescribir "Resto de la Entrada (texto oculto)" por la parte restante de tu artículo.

Naturalmente, es posible aplicar este último código a todas tus entradas ya publicadas. Sólo tienes que cuidar qué párrafos quieres que se vean, y respetar las etiquetas del código, es decir, si hay un <span> entre medias del código no puedes colocar el </span> correspondiente entre medias, sino después. De hecho, lo aconsejable es cerrar la etiqueta al final del todo de la entrada.

Ya para terminar, he de hacer una observación: aunque intentes prescindir de este gadget en alguna entrada, no podrás, siempre te saldrá al final de la entrada el texto que pusiste en la plantilla del blog (Leer más, Sigue Leyendo, etc...). Yo utilicé ese inconveniente en mi favor, poniendo el texto que pone: "Lee la entrada completa y los comentarios publicados aquí...", pues en el fondo, haciendo clic en el enlace, se hace lo mismo que si pinchas en el título de la entrada, es decir, mostrar en formato página web la entrada más los comentarios publicados.

Si alguien lo intenta, que le irá muy bien. Es un truco muy sencillo.

Sin embargo, para quienes os preguntáis: ¿Cómo has conseguido mostrar de esa manera fragmentos de código HTML, dentro de un código HTML, y con un recuadro y un icono de fondo? Ese tema es bastante más complejo. Lo dejaremos para otra ocasión.