Oloblogger

Más ideas para el blog desde #cursobloggers

2013-05-24T18:00:00.000+02:00

Continuamos con los apuntes que forman este extenso resumen de lo que aconteció en el #cursobloggers de Murcia del pasado miércoles. Si esta fue tu página de aterrizaje, mejor que empieces por el principio.

SEO para blogs

Alex Navarro (Vivir de la red)

Imagen: Isabel Romero

A estas horas, sobre lo que se hablaba en el templo de la UCAM era sobre cómo aplicar técnicas SEO en una bitácora de forma "legal", de manera que los buscadores no te penalicen. Y es que el oso panda y el pingüino tienen muy mala leche.

Alex propone conseguir lo mismo que Carlos Bravo pero centrando los esfuerzos en otro sitio distinto. Ya no será tan importante publicar mucho sino hacer que llegue a más personas.

Hay más de 200 factores que influyen en el SEO de un blog
De nuevo se cita la importancia de los contactos y no sólo los del correo, sino también los personales. El que tiene un amigo tiene un tesoro SEO
Haz promoción en la vida real ¿Tu familia y tus amigos conocen tu blog? Si hablas de otras aficiones tuyas ¿por qué no hablar de tu blog?
Los enlaces entrantes que no tiene tu competencia son sin duda los mejores
Mantén una conversación online real con tus lectores. Cuida tu red. Sé visible. Participa.
Pide expresamente que te enlacen y te den difusión
Crea alianzas con blogs de tu nivel, respeta a los de abajo y hazte notar con los de arriba
Botones sociales bien visibles
Servicios recomendados: Karmacracy y Besocial
Replica las entradas de tu competencia con argumentos

Desde la perspectiva SEO:
Contenido óptimo = 1000 palabras, 3 fotos y un vídeo. Contenido bueno = 400 palabras 2 fotos

Tu blog, el oasis. Sobreviviendo en el desierto

Paco Viudes (Paco Viudes)

Este es paisano y probablemente el mayor culpable de que este evento se haya celebrado en Murcia. Su exposición se ha basado en hacer un símil entre un oasis y un blog con la conclusión de que lo importante es abrir caminos para poder llegar al resto del mundo. Y lo bueno es que propone que nos olvidemos un poco de lo virtual porque las personas, que son los que realmente te leen, están en el mundo real. De esa manera, la mejor promoción es la que puedas hacer off-line.

La diferencia entre sobrevivir y vivir está en la cantidad y calidad de tus relaciones, de tus amigos
Habla de tu blog con los que conoces, no te cortes. Obliga incluso a tu familia a suscribirse... pero no hagas spam
Conectados con gente podemos hacer cualquier cosa
Comentar es igual de importante que participar
Colabora en otros medios
Preséntate o no te saludarán
Las redes sociales no van de tecnología, sino de sociología
Busca gente que te lea, no que te sigan
No tengas miedo a difundir contenido. Siempre hay alguien que sabe menos sobre eso que compartes que tú
Hazlo tú mismo, no esperes a Google
Sal de tu blog y participa en otros 5 veces cada día

Propuesta de mejora: Seguir la Regla +1 "Cada día, alguien más en la vida real debe conocer tu blog" ...porque tú se lo hayas presentado

Imagen: @MarayAlvarez

Me he dejado adrede para el final, un argumento de Paco para participar sin dudarlo en Google+. "Google+ y Google... llevan el mismo nombre ¿veis la relación?" Lo que quería decir es que lo que pase en G+ normalmente va a ser bien tratado por Google.

Y en este punto me gustaría que "alguien" hiciera la misma reflexión comparando el buscador y la plataforma de su propiedad, Blogger.

Combatir problemas con tu blog sin llegar a la violencia (física)

José Román Hernández Martín (EmezetaBlog)

Imagen: Google+

El también conocido como Manz tiene uno de los blogs españoles con más visitas. Trata sobre tecnología -muy geek-, pero lo hace siempre con un excelente sentido del humor acompañado de unas también extraordinarias ilustraciones que creo que hace él mismo (Confirmado: son suyas). Es ingeniero en informática de gestión y su especialidad son las telecomunicaciones, por lo que su tema central fue sobre la parte hardware de un blog, servidores y optimización, aunque también tocó la parte social y la seguridad.

Comprobar que servidor va a ser el más adecuado para nuestro tipo de blog: Compartido, VPS, dedicado, elástico...
El sistema de caché para optimizar el flujo de la información: Un puzzle para ahorrar
PNG, mejor para colores planos. JPG, mejor para fotografías y texturas
Cuidar los detalles, hasta los errores. Incorporar utilidad en página 404 para mostrar posibles posts relacionados
Respeta la autoría, cita y enlaza la fuente
Trolls, no confundir con un usuario que opina diferente. El hellbanning o baneo fantasma
Las interacciones en internet son sagradas y siempre habrá alguien que te critique. No debe preocuparte. Aprende de ello
Importancia del efecto Meneame en la promoción de un sitio. Otros agregadores hispanos: Divúlgame, DivoBlogger...
La seguridad está en las claves. No utilices contraseñas simples ni previsibles

Toque simpático: "El 90% de todo es una mierda". Definición de @manz sobre lo que es un Troll (Revelación de Sturgeon)

Más allá del blog: cómo llevar tu blog al siguiente nivel

Isra Garcia (Isra García)

Puro nervio, todo corazón, tanto que sin entender al principio de qué estaba hablando, con el tono que utilizaba ya me estaba poniendo las pilas (os recuerdo que eran las 4 de la tarde y recién comido). Al menos un Red Bull llevaba seguro. Y con otra afición tan diferente como ser corredor de triatlón ultraman, lo cual lo hace medio primo mío.

Lo importante no es tener una idea, sino hacerla realidad
Lo que ayer tuvo éxito, hoy no. Hay que guardar un estado de reinvención permanente
Utiliza borradores para hacer tus pruebas
Lee un 80% y escribe un 20%. Así generarás ideas
Tus escritos léelos en voz alta y mójate tomando posición
Tu blog tiene que ser una extensión de tu personalidad, no de otra
Cada vez que escribes practicas y practicando mejoras
El mejor CV no es sobre lo que has hecho, sino sobre lo que has conseguido
Cada entrada ha de tener un propósito. Haz que tu blog trabaje para tí
Usa títulos raros. Te encontrarán por ellos porque no tendrás mucha competencia
La importancia de un "Acerca de" que cuente un historia humana
Mejor que se suscriban por email, no por RSS. Pon un botón claro y atractivo para ello
La bandeja de entrada del correo es la mejor red social. Las últimas las podrán ver o no, pero el correo lo vemos siempre
Estructura Lego para el blog. Pequeños bloques de información perfectamente distinguibles
El éxito de los artículos tipo "Cómo hacer..."
La gente que te lleva arriba está abajo

Imagen: Google+

Corolario: Empiezas un blog, continúas, obtienes el hábito, produces, no te detienes, te golpeas contra la pared. Entonces abandonas, vuelves, practicas más, más todavía, más aún, te estrellas de nuevo una y otra vez y si vuelves, escribes para siempre.

Y aunque esto no es todo, sí que es todo lo que consigo recordar. Sólo añadir que Alfonso Alcántara de Yoriento no pudo finalmente participar como estaba previsto y por eso no está en la lista. Una lástima.

Un montón de ideas para el blog desde #cursobloggers

2013-05-23T18:00:00.000+02:00

Algunos habréis visto que ayer mi cuenta en twitter fue algo más activa de lo normal. Bueno realmente he posteado casi más de lo que sumo en toda una semana, pero es que suelo seguir la máxima de Lincoln:

Mejor es callar y que sospechen de tu poca sabiduría que hablar y eliminar cualquier duda sobre ello.

Pero es que estuve rodeado de tipos -ni una sola fémina entre los ponentes- que sí que sabían y lo que contaba era por boca de ellos. Ha sido en Murcia, en la UCAM y con motivo del Curso Bloggers para jóvenes desempleados y emprendedores.

La cosa no ha estado nada mal. Bueno, algo sí y es que 8 horas seguidas aún con hora y media repartida en dos descansos para repostar, para mis años ya resultan agotadoras. Eso y el constipado que arrastro, aunque supongo que a la mayoría de los otros más de 800 que había por ahí y que eran en su mayoría bastante más jóvenes, les habrá parecido más breve.

Sin embargo mereció la pena y tan bien ha estado que me he traído un buen puñado de datos y sobre todo ideas. De eso se trataba, así que voy a extractar las que me han parecido más novedosas o al menos más interesantes para compartir con vosotros.

Resumir 6 horas y media en un post es bastante complicado así que permitirme que sólo os de prácticamente los titulares, a modo de pinceladas sobre las que reflexionar y actuar.

Montar un blog con WordPress

Berto López (Ciudadano 2.0)

Este es el sujeto y aquí la prueba :D
Imagen de @CMRancel

Mal empezábamos con un primer consejo radical: no uséis Blogger sino WP, con el principal argumento de su limitación y dependencia de Google que elimina servicios por la cara (ya hablamos de esto), pero luego la cosa se enderezó con unos cuantos buenos consejillos para montar nuestro primer blog. Unos los habituales (URL's amigables, plantillas y tipografías que lo hagan legibles, etc.) y otros:

Cada blog es un mundo. Lo que en uno funciona en otro no
Invierte la mayor parte de tu tiempo en el contenido y menos en el continente
Actualmente los posts no se leen, se escanean
Tu primer arma de promoción es tu lista de contactos del correo. La segunda el RSS
Parece más útil que los comentarios más recientes se vean los primeros
Fiverr, un sitio dónde diseñan tu logo por sólo 5$
Destacar el formulario de suscripción RSS como fuente futura de visitas fieles
Páginas importantes que a veces olvidamos: Acerca de, Los mejores posts, ¿Nuevo por aquí?, Recursos y descargas, Anunciantes aquí y Aviso legal

Y un mensaje final para busquemos una buena motivación antes de comenzar: El 95% de los blogs se abandonan durante el primer año.

Personal branding: ideas y creatividad

Pau Garcia-Milà (Pau García-Milá)

Imagen: Google+

No es la primera vez que veo a Pau en acción y creo que todos coincidiréis conmigo en que es un gran comunicador con su torrente de ideas para todo. Risas a costa de la asistente virtual de RENFE y ejercicio sobre cómo podríamos sacarle beneficio a una vaca. Descubrimos que además de las formas más o menos corrientes, podemos usarla de cortacésped ecológico y que con el estiércol podemos abonar otras casas de vecinos para plantar más césped. Así redondeamos el negocio generando nuevos potenciales clientes que necesitarán sin duda nuestra vaca.

Para conseguir buenas ideas como esta, un sistema:

Observar lo que hacemos. Hay muchas rutinas que nos pasan desapercibidas.
¿En qué somos expertos? Encontrar un espacio intermedio entre mis propias pasiones y lo que le importa a los demás
Hacernos las preguntas correctas ¿Qué pretendo?
Feedback. Contarlo buscando opiniones: ¿Lo usarías? ¿Pagarías por ello?
Reiniciar desde 1 hasta encontrar la idea buena
Aterrizar la idea. Concretarla.
Poner en marcha el proyecto. La importancia del dónde, cuándo y cuánto

Apunte: El momento es ahora. Nunca serás más joven de lo que lo eres hoy.

Cómo conseguir un blog que se lea

Carlos Bravo (Marketing guerrilla)

Carlos tiene un blog dónde se propuso escribir un post diario de manera muy disciplinada. Gracias a eso y sobre todo a que el contenido es propio y de calidad, ha conseguido acelerar el proceso natural de crecimiento de su blog. Predica sobre el contenido por encima del SEO.

Y además de esto nos dió algunos consejos más para que todos podamos conseguir lo mismo:

El concepto "Grifo de Google". El buscador no se fía de tí al principio
Nombre de dominio fácil de recordar y preferentemente corto
Más importante que el precio del dominio es la usabilidad de la plataforma
Un .com es más premium que un .es o un .net
Imprescindible facilitar la navegación: Entradas, páginas y etiquetas para organizarlas
Su experiencia con comentarios: Los posts cuyo título es una pregunta y que se cierran con otra pregunta, reciben el triple de comentarios de lo habitual
Vigila tus estadísticas. Principalmente tiempo de permanencia, páginas por usuario, velocidad de carga y tasa de rebote

Lo principal: Se tardan normalmente varios años en conseguir ser leído por un número aceptable de personas. Publica regularmente buen contenido y acortarás ese tiempo. Para ello busca un nicho dónde seas realmente bueno sin engañarte a tí mismo.

Me está quedando el post demasiado largo y según veréis en la continuación, he aprendido que eso no es muy conveniente, así que mañana más ;)

Botón Pin It oficial que aparece al hacer hover... y algo más

2013-05-20T17:20:00.000+02:00

Hay que ver lo que facilita la vida lo de estar al día. Hace ya bastante tiempo vi un script que permitía colocar un botón sobre las imágenes para pinearlas (en Pinterest, claro) y que aparecía sólo cuando se pasaba el puntero por encima de ellas. Lo que ocurre es que todo el código estaba comprimido y aunque funcionaba como prometía, al no poder verificar su contenido preferí no publicarlo.

El motivo es que el código que no vemos podría incluir algún código no conveniente cuando no directamente malicioso y siempre intento no participar en la difusión de este tipo de software. Ya hablaremos en otra ocasión algo más sobre esto.

Pero resulta que no hace mucho el propio Pinterest incluyó en su script esta misma utilidad y eso ya es otra cosa. Cierto es que tampoco puedo ver el código, pero la fuente ya es de absoluta confianza. Además, usando el código oficial ahora resulta muy fácil de implementar esta utilidad. De hecho tan sólo hace falta una línea de código y si ya tenemos instalados los botones en nuestro sitio con otros sistemas, pues apenas cuatro palabras adicionales.

Probando que es gerundio.

¿Y cuál es ese fantástico código? Pues este. Una línea que hay que insertar preferentemente antes del cierre del body (</body>):

Y las palabras que hacen la magia son esas de data-pin-hover='true'. Como decía al principio, si ya teníais cargado el script de Pinterest (sólo hay que buscar si tenéis pinit.js en vuestra plantilla), entonces simplemente añadid esa data-pin-hover='true' dentro de la llamada al script tal y como se ve arriba.

El sistema es automático con las ventajas e inconvenientes que ello puede suponer. Las primeras nos importan poco porque son beneficiosas, pero entre los inconvenientes está el de que a veces se agrega el botón a imágenes que no deseamos que lo tengan.

Si os ocurre algo de eso sólo hay que añadir un data-pin-no-hover='true' a la imagen en cuestión:

De las dos siguientes la segunda no tiene nada especial y a la primera le he añadido ese parámetro.

Y ya que estamos, una manera también muy fácil de embeber determinado pin en una entrada. Sólo hay que copiar del navegador la dirección del pin (en verde) y ponerla como enlace con un data-pin-do="embedPin":

Gadget para contacto Blogger. Cambiar estilo. Instalar en una página estática

2013-05-16T21:37:00.000+02:00

Bueno, pues ya tenemos un nuevo cacharrito que viene de serie con Blogger. Se trata de un formulario de contacto que permite remitir un mensaje al administrador del blog.

Es muy básico, pues -al menos de momento- no permite incorporar ficheros o enviar nada que no sea texto plano. Es decir, que si estáis ya pensando en enviarme una plantilla o código por ahí, olvidaros (no voy a explicar de nuevo el truco para lo segundo ☺).

Pero tan simple es su formato como la manera de instalarlo.

Como con otros gadgets sólo hay que ir a Diseño > Añadir gadget y en la ventana emergente que sale, seleccionar este del que hablamos: Formulario de Contacto.

Si de primeras no lo veis es porque está en el segundo apartado del menú de la izquierda, en Más gadgets, marcado en amarillo en la captura adjunta.

Cambiar estilo

Como el fondo es transparente, el formulario se integrará bien dónde lo pongáis, estéticamente hablando, pero no obstante es fácilmente modificable aplicando estilo (CSS) a los selectores adecuados. Aquí un sencillo ejemplo:

/* Contenedor general */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #ddd;
color: #000;
}
/* Cajas para insertar datos y botón de envío */
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-button-submit {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-button-submit {
border-color: #fff;
background: #000;
color: #fff;
}

En una página estática

Esto ya es una chapucilla no muy ortodoxa, pero fácil de hacer y que funciona. El truco consiste en añadir el gadget, cortar la parte del código justo para que no salga dónde debería (en las zonas normales para gadgets) y luego añadir ese mismo código en una página.

Lo de añadir primero el gadget y luego anularlo parcialmente, es porque si Blogger no encuentra el gadget (original) en algún sitio, no carga la parte JavaScript que lo ejecuta. Con esto logramos engañarlo para que lo cargue pero que no se vea el formulario en su ubicación natural.

Así que el primer paso es añadir el gadget (desde Diseño) y el segundo editar la Plantilla para eliminar casi todo el gadget. Hay que buscar la cadena "ContactForm", desplegar el widget pinchando en la flecha negra de la izquierda (lo mismo con el includable) y borrar las que a continuación he coloreado en gris.

<b:widget id='ContactForm1' locked='false' title='Contacta' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        BLA, BLA, BLA
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

Al final no lo he reproducido entero, porque con dejar las dos primeras y las dos últimas será suficiente.

El problema es que para que el código del gadget nos sirva a todos, este incluye variables data cuyos valores controla Blogger y a los que sólo se puede acceder si incluimos esas variables en la plantilla. Por tanto, así a pelo no funcionará en una página.

Pero en este caso los datos personalizados para cada blog se reducen a cero, al menos los importantes, así que la solución que se me ocurrió fue pegar ese código y sustituir las data por los datos necesarios.

Abreviado sólo un poco, esto es lo que habría que pegar en una nueva Página en blanco con el título que queramos, para que el formulario funcione en ella:

<div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Nombre<p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>Correo electrónico *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Mensaje *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div>

Y para comprobar que funciona, en esta página tenéis la prueba que hice. Es una cuenta que no uso, así que no esperéis contestación.

Si hay cambios en el código del gadget puede que este truco deje de funcionar, pero también puede que valga para siempre ;)

Blogger no cierra el quiosco... y este sitio tampoco

2013-05-09T23:32:00.000+02:00

Es increíble lo que la gente como masa global de pensamientos podemos llegar a generar. Lleva uno una racha de 15 días sin publicar y ya me han preguntado en tres ocasiones si es que iba a dejar de publicar y otros muchos seguro que han pensado algo similar aunque no lo manifestaran expresamente.

Pero eso no es lo más gordo. Lo tremendamente curioso es que algunos vean en eso y en la casualidad de que otros colegas como Ayuda Bloggers, Vagabundia, Ciudad Blogger, KsesoCss -y otros que seguro olvido- que están o han estado en unas circunstancias parecidas al mismo tiempo, una razón más para corroborar las conclusiones de otros sobre que Blogger está en peligro inminente de cierre.

No me lo estoy inventando. Casi literalmente me han llegado a decir que probablemente habíamos dejado ya de publicar ante la próxima conclusión del servicio: "Es que cómo van a cerrar el Reader pues..." ¡Paparruchas!

¿Cómo se le ocurre a alguien pensar que un servicio en el que se están invirtiendo recursos esté cercano a ser cerrado por esos mismos que se dejan ahí la pasta? Porque si hay desarrolladores gastando su tiempo en integrar los comentarios de Google+ en Blogger o en actualizar el editor HTML, por citar los ejemplos más recientes, ten por seguro que esos tipos cobran a final de mes y que si yo fuera su jefe y estuviera pensando en chapar, mejor los pondría a hacer otra cosa más productiva para no perder mi dinero tontamente.

Blogger es una sensacional plataforma para Google en la que los receptores del servicio, los administradores de los blogs, voluntaria y casi desinteresadamente cooperan con el negocio principal del buscador de las letras de colorines: la venta de publicidad. ¿O es que el resto de los servicios como YouTube, Maps o el propio GMail viven de otra cosa?

Por cierto que creo que hace mucho tiempo que no actualizan estos servicios y que casi no publican en los respectivos blogs de producto, así que como también van a cerrar Google Reader... OMG! ¡Voy a salvar mis vídeos antes de que desaparezcan! Ahora vuelvo...
...
...
Listo. Prosigamos.

Y lo de desinteresadamente es porque todos sabemos cuánto reportan los anuncios que ponemos cuando se tienen menos de 20.000 visitas diarias (por decir algo).

Pero volviendo al tema ¿Cuántos escaparates menos tendría Google si no diera este servicio? Porque hay que añadir que es casi irresistible incluir publi aunque sólo sea para probar porque te lo ponen a huevo. Desde el propio panel de control, sin necesidad de ir a Adsense a crear bloques ni nada.

Decir que Blogger nos necesita sería demasiado, pero al igual que nosotros sacamos un beneficio de ellos, ellos lo sacan de nosotros. Una simbiosis casi perfecta en la que no veo motivo de divorcio con base suficiente como para poder acudir al juzgado.

No me gusta ser categórico porque no tengo datos ni conocimientos suficientes sobre casi ningún tema como para serlo, pero eso no es lo mismo que piensan otros y ya me toca un poco las narices el tema, así que si otros afirman que Blogger desaparecerá pronto, yo mantengo todo lo contrario, ea.

Desconozco los motivos por los que siempre hay tanta gente empeñada en intentar convencernos de que nos pasemos a otra plataforma llegando a asegurar eso que ahora yo intento rebatir. Hasta he leído cosas del estilo que en Blogger no puedes tener dominio propio, que no se puede aplicar SEO, que no tienes control sobre tus publicaciones...

Bueno, alguna sospecha sí tengo para las causas en algunos casos, puro esnobismo. Porque eso de apellidarse como los de alta alcurnia queda muy bien y lo de blogspot, como que es muy corriente y nada profesional ¿Cómo era eso que dije al principio? Ah, sí ¡Paparruchas!

¿Y lo mío? Lo mío es sólo una pequeña gran crisis en mi vida no-virtual que me deja muy poco rato para Internet mientras me adapto. Pero nada grave, en serio. Nada que el tiempo, sea más o menos prolongado, no pueda solucionar.

Comentarios de Google+. Ventajas e inconvenientes

2013-04-24T16:00:00.000+02:00

Y voy ya por el quinto post seguido sobre Google+ y el cuarto sobre el tema de los comentarios, pero es que este nuevo sistema cambia demasiadas cosas como para no tener todo muy claro antes de tomar cualquier decisión.

Hay mucha gente entusiasmada con esta utilidad, pero también hay otros que ven en esto de adoptar el sistema de comentarios de Google+ para su web, más inconvenientes que ventajas.

Las virtudes han sido ampliamente enumeradas llegando algunos a asegurar que con ellos el social media cambiará para siempre.

Pero lógicamente también hay quién valora la parte más negativa del tema por ahondar en el cuasi monopolio o que consideran muy a las claras que hay que estar loco para implantarlos.

Por mi parte voy a tratar de ser lo más objetivo posible (no me va a salir del todo pero lo intentaré) y enumeraré los pros y contras que observo.

LOS COMENTARIOS GOOGLE+ MOLAN

Viralidad. Muchas más personas compartirán los enlaces a tus entradas al estar marcada por defecto esta opción cuando se comenta. Unos lo harán conscientemente y otros involuntariamente pero sin duda se incrementan los enlaces en circulación
Edición de comentarios. Ante un errata o la necesidad de cambiar el contenido de una comentario, ahora se podrá hacer. Antes había que hacer un comentario adicional o borrar el anterior y escribir uno nuevo completo
Simplificar tareas sociales. Podrás compartir tus posts en Google+ al tiempo que lanzas un primer o sucesivos comentarios, evitando además tener que salir del propio sitio
Contestar comentarios desde un solo sitio. Ya no hay necesidad de estar acudiendo a un sitio u otro para atender a tus lectores. Desde la caja de Google+ atenderás a ambos tipos de usuarios de una
Valoración de comentarios. La posibilidad de utilizar el +1 para cada comentario sirve como medio de dar relevancia a los usuarios que aportan más valor con sus textos de una manera muy democrática
Posts más valorados. En número de visitas y otros indicadores son un medio, pero el +1 al enlace compartido del post es un dato algo más fiable para saber si el contenido realmente fue del interés del visitante
Ordenación. Ahora podrás reordenar los comentarios para visualizarlos, bien por proximidad en el tiempo (más recientes primero) bien por "calidad" (mejores comentarios)
Filtros. Si sólo te interesa saber lo que dicen las personas añadidas a tus círculos, existe un botón-filtro para poder ver de entre todos los cometnarios, sólo estos que en teoría son más relevantes para tí
Detalles de actividad en el hilo de comentarios. Cuando revises los comentarios podrás ver las veces que la entrada ha sido compartida y por quién, aportando al administrador una información agrupada en un solo lugar muy útil
Adiós (casi) al spam. Todos los usuarios que comentan deberán estar registrados en Google+ y adicionalmente, cualquiera puede marcar un comentario como spam o inapropiado. La propia red marca directamente algunos comentarios como posible spam

Buenas prestaciones para el análisis y la organización por parte del administrador

Optimización e incremento de las interacciones con el blog

LOS COMENTARIOS GOOGLE+ APESTAN

No hay un sistema de anidados. Las respuestas a un comentario concreto ya no existen por lo que quedarán intercaladas con otros comentarios que nada tienen que ver, complicando el seguimiento de un "diálogo"
Comentarios perdidos si se revierte el sistema. Una vez que los comentarios se hagan desde G+, si volvemos al antiguo sistema todos esos ya no aparecerán en el blog, aunque seguirán en la red como hasta ahora. Sería como hacer reset en el blog con la fecha en que pusimos el sistema
Ojito con cambiar de dominio. Si cambias la URL de tu blog, desaparecerán los comentarios de Google+ que tuvieras. No hay más, así de duro
Duplicidad de cabeceras. Cuando alguien por error o intencionadamente comenta desde el formulario superior en lugar de responder, se genera un nuevo hilo de comentarios cuyo encabezamiento es idéntico a otro u otros que se hubieran hecho de la misma manera, aparentando ser repeticiones
Discriminación de visitantes. Las personas que no estén registradas y logueadas en Google+ no podrán participar en el blog, perdiendo una parte de las posibles opiniones. Opiniones al menos igual de interesantes que las de los usuarios de la red social
Datos sin valor para el visitante. La inclusión de "Fulanito ha compartido esto a través de Google+" y otros datos de actividad, entorpece la lectura de los comentarios, no siendo de utilidad para los lectores
Incompatibilidad estética. La integración en el diseño del propio blog es de momento imposible al tratarse de un iframe fuera de nuestro control y no podrás resaltar tus propios comentarios (1)
Desaparece el feed de comentarios. No se podrán construir utilidades basadas en él y los gadgets que tuvieras montados con él (comentarios recientes, por ejemplo) ya no funcionarán.
Imposibilidad de moderar. No podrás controlar los comentarios vertidos en tu blog por otros y tendrás que quedar a expensas de que los demás marquen como inapropiado o spam en número y forma
Incompatible con otros sistemas de comentarios... como Disqus. Se podría habilitar una forma de compaginarlos, pero a la larga eso sólo nos llevaría a un pequeño caos en el que tendríamos que ir atendiendo dos focos distintos de comentarios, cosa que se hará más notable cuantos más recibas

Hilo de comentarios más complicado de seguir y administrar

Inconvenientes diversos para el mantenimiento con libertad del blog

He intentado resumir en 10 puntos cada uno de los apartados, indicando sólo los que me parecen más relevantes y por qué no decirlo, porque eso de los decálogos es la costumbre y además queda muy mono. Pero sin duda se me han quedado en el tintero muchos de un tipo y de otro, así que ya sabes que puedes añadir lo que considere en los comentarios :)

(1) Más bien hay que adaptar la estética del blog a los comentarios para que puedan quedar bien. Pero bueno, como muchos tienen últimamente una estética casi uniforme, esto quizás no sea tan grave para la mayoría

Integrar comentarios Google+ en cualquier sitio. Simultanearlos con los clásicos

2013-04-22T10:30:00.000+02:00

Ahora mismo podéis ver en este blog una manera de tener los comentarios de G+ sin dejar de usar los que estábamos utilizando hasta ahora y que he llamado clásicos para entendernos más fácilmente. Es un simple enlace que abre en una ventana emergente los de Google Plus de manera totalmente operativa y que pienso funcionará en cualquier plataforma con un pequeño cambio.

Pero dándole vueltas al tema se me ocurrió que quizás pudiera simultanear los dos sistemas en el blog sin necesidad de abrir más ventanas y así ha sido, por lo que vamos a ver ambas cosas.

Advierto que no he profundizado mucho ni me he molestado en crear un sistema estéticamente óptimo, porque todo esto está muy en pañales y cualquier día Google comienza a cambiar cosas y se queda obsoleto todo. Así que lo que he hecho han sido cambios muy básicos y un poco toscos, pero que funcionan y al mismo tiempo permiten una desinstalación fácil si fuera necesario. Las virguerías las dejo para los demás.

1. Ver comentarios en una ventana emergente

El primer sistema consiste en insertar un enlace con determinados parámetros que lleva al "generador" de los nuevos comentarios. Se podría poner en diversos lugares, pero para que se vea sólo cuando no tenemos activada la opción de Usar comentarios de Google+ en este blog ? (si los hemos activado no nos hará falta el botón) y que cuando no haya todavía comentarios también aparezca, el lugar que encontré más adecuado fue en el gadget comment_picker.

En gris las líneas de referencia y en negro lo que habría que insertar. Ambos segmentos insertados son idénticos y lo único que hay que cambiar son todas esas xxxxxxxxxxxxxxx por la ID de vuestro blog.

<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.forceIframeComments'>
<b:include data='post' name='iframe_comments'/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
<b:else/>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:else/>
<b:if cond='data:post.showThreadedComments'>

<a class='gplus-comment-link' expr:href='"https://plusone.google.com/_/widget/render/comments?bsv&href=" + data:post.url + "&first_party_property=BLOGGER&legacy_comment_moderation_url=https://www.blogger.com/moderate-legacy-comment.g?blogID=xxxxxxxxxxxxxxxxxxx&view_type=FILTERED_POSTMOD"' onClick='window.open(this.href, this.target, "width=670,height=400,scrollbars=yes"); return false;' target='_blank' title='Comentar en Google+'>Interacciones en Google+</a>
<b:include data='post' name='threaded_comments'/>
<b:else/>

<a class='gplus-comment-link' expr:href='"https://plusone.google.com/_/widget/render/comments?bsv&href=" + data:post.url + "&first_party_property=BLOGGER&legacy_comment_moderation_url=https://www.blogger.com/moderate-legacy-comment.g?blogID=xxxxxxxxxxxxxxxxxxx&view_type=FILTERED_POSTMOD"' onClick='window.open(this.href, this.target, "width=670,height=400,scrollbars=yes"); return false;' target='_blank' title='Comentar en Google+'>Interacciones en Google+</a>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:if>
</b:includable>

Actualización: Incluido un scrollbars=yes en el código para que la barra de desplazamiento vertical se vea en IE y Firefox. Detalle aportado por JorgeMG. Gracias.

Para poder dar estilo al enlace he incluido la clase .gplus-comment-link por lo que es a ese selector al que habrá que añadirle propiedades en el CSS de cada cual para que cambie su aspecto.

Para otras plataformas supongo que el enlace funcionará igual sólo con adaptar ese expr:href y la variable data:post.url, que es la que usa Blogger para guardar la dirección de cada post y sospecho que hasta el parámetro con la ID del blog es prescindible, pero como dije al principio, no he profundizado mucho.

Tras probar el nuevo sistema de comentarios Google+ en Blogger, cada vez me cuesta más llamarlo así y por eso puse lo de Interacciones, ya que en el iframe además de comentarios salen otras cosas como notificaciones de +1 hechos sobre el post y los posts de Google+ en los que alguien compartió el link de la entrada correspondiente.

2. Integrar los comentarios Google+ y los clásicos

Esta parte estaba a punto de terminarla cuando encontré una publicación de Browsing the Net que me facilitó mucho la cosa. En ella se detalla cómo montar los comentarios de Google+ en cualquier plataforma.

Con los códigos que allí se muestran se pueden realizar muchas variantes y esta seria sólo un ejemplo adaptada para Blogger y que podéis ver en la parte inferior de esta entrada de prueba.

Para hacer la instalación lo más sencilla posible para vosotros he usado jQuery y CSS inline, pero el que se atreva puede reordenar esto de mejor manera y modificar el código al gusto. El lugar también más simple que he encontrado para ponerlo sería justo después de <b:include data='post' name='post'/>

El data-width sirve para fijar el ancho de la caja de comentarios, por lo que la cifra ahí indicada tendréis que cambiarla según el diseño de vuestro blog.

Por similitud con el anterior sistema, el de la ventana emergente, es de suponer que podríamos añadir a este código un nuevo parámetro con la ID del blog en la forma data-legacy_comment_moderation_url='https://www.blogger.com/moderate-legacy-comment.g?blogID=xxxxxxxxxxxxxxx' y de hecho la prueba está montada con esa data, pero sinceramente aún no sé para qué sirve identificar el blog de origen. Por si acaso mejor incluirla.

Además de jQuery hace falta la librería de la API del botón +1, así que si no os funciona el tema es porque os falta alguna de las dos (o ambas). En ese caso estas serían las líneas para cada una de ellas que habría que insertar antes del </head> . Blogger lleva de serie la del +1, así que creo que en la inmensa mayoría de casos no os puede faltar otra que no sea jQuery.

Comentarios de Google+ en plantillas modificadas y un par de cosillas más

2013-04-20T21:43:00.000+02:00

Los que tenemos plantillas no estándar siempre nos llevamos algún que otro disgustillo con las novedades de Blogger, ya que su actualizador de gadgets suele pasar de largo por nuestro blog cuando no encuentra ese código que intenta sustituir para actualizarlo. Posiblemente es porque va buscando segmentos completos y exactos y cuando nosotros tenemos algo en ellos alterado, simplemente decide dejar las cosas como están.

Esto es lo que ha pasado en aquellos sitios que no pueden habilitar los nuevos comentarios de Google+, pero tras investigar un poco vamos a ver cómo podemos solucionar eso.

Imagen

Una solución rápida la encontré en Amor Sevillista, que a pesar de su título y de su contenido dedicado a este club de fútbol español, también es un sitio dónde el autor publica con frecuencia truquillos para Blogger. Añado que normalmente con acierto.

Accediendo al enlace anterior veréis que una simple línea en el lugar adecuado hará que tras marcar en la casilla de Usar comentarios de Google+ en este blog del Escritorio, este tipo de comentarios sean visibles sin problemas.

Posiblemente hay varias maneras como esta anterior -sencilla y que funciona- de arreglar este tema, porque esto de los comentarios incluye varios trozos de código relacionados entre sí para hacer funcionar los antiguos, los anidados y ahora estos de Google+, incluyendo diversas condiciones que hacen los desvíos pertinentes y que conforman -para mí- una maraña difícil de descifrar.

Así que la que viene a continuación es otra que encontré y que aclaro de antemano que no sé si es la óptima, pero que me parece un poco más adecuada. Está probada y actualmente activa en este mismo blog para cuando decida habilitar este tipo de comentarios.

Se trata de recuperar el que creo que es el código actual del gadget de comentarios, quitando el que tuviéramos modificado.

Para aplicarlo tienes que localizar la línea <b:include data='post' name='post'/> en tu plantilla y justo después deberías tener este código o alguna variante. Lo reconocerás por esos include con name='comments' y/o name='threaded_comments' y por las condiciones que hacen que se ejecuten en entradas y páginas estáticas:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
  <b:else/>
    <b:include data='post' name='comments'/>
  </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
  <b:else/>
    <b:include data='post' name='comments'/>
  </b:if>
</b:if>

Cuando lo localices lo único que hay que hacer es sustituir todo el trozo, incluidas todas las condiciones por:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include data='post' name='comment_picker'/>
</b:if>

Por si las flies, como esto no se verá desde Vista Previa, en lugar de eliminar del todo el trozo original, simplemente anularlo poniendo símbolos de comentario para poderlo recuperar fácilmente en caso de que no funcione bien el cambio ( al final).

Y probando, probando, también encontré que el código que sirve para mostrar el número de comentarios y también como enlace para ir directamente a la sección de comentarios de la entrada había sido igualmente actualizado.

Si quieres que se muestre el nuevo número, que será mayor porque incluirá todas las interacciones que hubiere en Google+, sean comentarios u otra cosa, tendrás que cambiarlo.

En este caso las palabras mágicas para encontrar el código usado hasta ahora es post-comment-link:

<span class='post-comment-link'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <b:if cond='data:post.allowComments'>
        <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
          <data:post.commentLabelFull/>:
        </a>
      </b:if>
    </b:if>
  </b:if>
</span>

Todo eso habrá que sustituirlo por este otro que es el actual:

<span class='post-comment-link'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <b:if cond='data:post.allowComments'>
        <b:include data='post' name='comment_count_picker'/>
      </b:if>
    </b:if>
  </b:if>
</span>

Y otro hallazgo.

Si queremos seguir mostrando el formulario de comentarios clásico aunque tengamos activada la opción Usar comentarios de Google+ en este blog, deberemos buscar la línea <b:includable id='iframe_comments' var='post'> y bien justo después de ella o justo antes de su cierre </b:includable> (según queramos que salga antes o después del iframe de G+) añadir este código:

<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
</b:if>

Eso no permitirá ver los comentarios clásicos, pero sí que se registrarán y quedarán almacenados como antaño por lo que si desactiváis lo de G+, aparecerán como siempre. También estarán accesibles desde el apartado Comentarios del Escritorio.

Esto puede ser útil si luego acoplamos algún sistema para que se puedan ver simultánea o alternativamente ambos sistemas, cosa que todavía tengo por ver.

Comentarios Google Plus en Blogger... y morir en el intento

2013-04-19T01:06:00.001+02:00

Esto ya sí que ha sido demasiado para mí. El otro día lo del nuevo editor HTML y ahora otro nuevo sistema de comentarios integrado e interactivo con el perfil de Google+. Todo con el mismo estilo y funciones que en la capa social del gigante del buscador.

Como niño con juguete nuevo (lo de los zapatos habrá quién no lo entienda), me he puesto enseguida a trastear con el invento y lo que en un principio me pareció una buena idea logró terminar tras algo más de una hora con mi paciencia. Y luego vino la letra pequeña...

Al parecer y como viene siendo ya costumbre -mala, pero costumbre a fin de cuentas- los inicios de la nueva utilidad no generan mas que problemas: blogs en los que no funciona, otros en los que algunas cosas concretas fallan, comentarios tradicionales que no se ven, otros que aparecen dónde no deben indiscretamente...

Parte del caos se debe a ~~nuestra~~ mi propia inexperiencia con el sistema, pero otra parte seguro que no. El cambio sospecho que está siendo blog a blog porque en uno con el que estaba probando infructuosamente, de repente me comenzó a funcionar. Y no tiene que ver con que sean plantillas modificadas o no.

Algunos me han comentado que tienen plantillas estándar y no les iba. Yo mismo probé una nueva del todo, sin modificar, y tampoco. Y luego están dos modificadas en las que me funcionó el sistema, en una bien del todo y en otra regular. En esta última tras pinchar en la opción correspondiente para comenzar a usar los comentarios, no se veían ni los nuevos ni los antiguos, sólo el número indicando la cantidad.

Pero en fin, nada que un Restablecer plantillas de artilugios a valores predeterminados no pueda seguramente solucionar. Lo problemático para mí es lo que comento más adelante.

Y es que lo han puesto tan fácil que es complicado no caer en la tentación de pinchar en esa casilla que nos permite inmediatamente Usar comentarios de Google+ en el blog. Y por si no lo habías visto, una atenta misiva de Blogger nos ha avisado a todos indicándonos como llegar allí y qué es lo que hay que pinchar.

La utilidad hace un buen puñado de cosas, pues permite votar cada comentario, silenciar o eliminar, ordenar por fechas o por relevancia, filtrar según el comentarista esté en tus círculos o no...

Todas orientadas a convertirse en algo parecido a lo que hacen las cajas de comentarios de Facebook, que replican lo escrito en ellas tanto en el blog como en el propio Facebook. Una de las ventajas con respecto a esta última red es precisamente que los comentarios originales del blog y los de Google+ se integran en una única caja.

Otra cosa que no quiero olvidar es que hay una casilla en el formulario de comentarios del blog que nos permite NO compartirlo en G+, porque ¿a quién le importan la mayoría de cosas que comento en un blog? No sé, habrá veces que sea oportuno comentar en blog y red social simultáneamente y otras que no, así que me parece afortunado que esto sea opcional, porque hay que tener en cuenta que ahora los comentarios tendrán la misma viralidad que el post al que pertenecen.

Por si no ha quedado claro lo que realmente hace este invento es:

Si se publica un enlace de una entrada de un blog, se verá en el blog una nota al respecto en los comentarios
Cuando se comente en una entrada del blog, aparecerá un nuevo posteo con enlace a la entrada en G+ (si se deja marcada la casilla "Compartir también en Google+")
Al responder a cualquier comentario en el blog, ese comentario aparecerá también en el post correspondiente de G+
Si se comparte un comentario del blog en Google+, las respuestas que reciba aparecen en el blog... y viceversa

Pero no me agrada tener que usar un iframe para que se vean los comentarios, no me gusta esa estética, no me apetece que se pierda la posibilidad de responder con el sistema de anidados a los comentarios históricos...

Y para terminar la parte de la letra pequeña que encontré aquí y que representa lo que menos me gusta:

Para poder comentar sobre tu blog, los usuarios deben tener una página o un perfil de Google+

Si cambias la URL de tu blog, desaparecerán los comentarios de Google+ que tenías

Si utilizas un sistema para comentar de otro fabricante (Disqus, por ejemplo), perderás tus comentarios antiguos cuando habilites los de Google+

Si un comentario no se ha compartido con el autor del blog, este no puede verlo en ninguno de los dos sitios.

No suelo mojarme porque no me gusta influir en vuestras decisiones, pero así las cosas, hasta que no encuentre más ventajas que inconvenientes o no tenga más remedio, mis comentarios se quedan como están.

Posiblemente el slider jQuery más sencillo

2013-04-17T12:41:00.000+02:00

¿Tenéis jQuery en vuestro blog y espacio para insertar 10 líneas de código? Sí la respuesta es afirmativa y además queréis tener un carrusel de imágenes automático, este es el código más simple que he visto hasta la fecha y seguro que no hay otro que lo sea mucho más. Si acaso con algún que otro carácter menos, pero pocos, pocos menos.

Ese código que después veremos y una sucesión de imágenes simples metidas dentro de una caja, con un contenedor general común, nos daría este resultado:

1. Instalación JavaScript necesario

Por empezar desde cero, si no tenemos jQuery primero añadimos esta línea justo después de }]]></b:skin> para cargar esta conocida librería:

Una vez seguros de que tenemos la librería en nuestra plantilla, a continuación de esa misma línea añadimos lo que hace que la serie de imágenes funcionen como slider:

<script type="text/javascript">//<![CDATA[
$(function(){
    $('#slider div:gt(0)').hide();
    setInterval(function(){
      $('#slider div:first-child').fadeOut(0)
         .next('div').fadeIn(1000)
         .end().appendTo('#slider');}, 4000);
});
//]]></script>

Podemos guardar los cambios en la plantilla porque eso es todo. Es simple pero veréis que funciona y hace lo que tiene que hacer. Ahora ya sólo tenemos que poner las imágenes dónde queremos que aparezcan, de la manera que veremos a continuación.

2. Crear el slider

Con esto anterior en nuestra plantilla (aunque nada impide ponerlo directamente en un gadget, en una página o incluso en una entrada como veis aquí) ya podremos crear un visor como el que habéis visto arriba. Sólo tenemos que usar esta estructura HTML para añadir las imágenes:

<div id="slider">
    <div><img src="URL_IMAGEN1"/></div>
    <div><img src="URL_IMAGEN1"/></div>
    <div><img src="URL_IMAGEN1"/></div>
</div>

No sé cómo lo veis pero ya está todo lo necesario.

Para mí esto es bastante ligero y eficiente, mucho más que la mayoría de librerías que se usan quizás demasiado habitualmente.

Ajustes

Los tres últimos números del plugin permiten ajustar algunas cosillas. Todos van expresados en milisegundos (4000 = 4 segundos)

fadeOut(0): Tiempo en desaparecer la imagen saliente
fadeIn(1000): Tiempo en aparecer la imagen entrante
('#slider');},4000): Tiempo de permanencia de cada imagen

Cómo funciona

Y para los curiosos que quieren aprender cosas...

$('#slider div:gt(0)').hide();
Con gt(x) seleccionamos todos los div a partir del número x. En este caso 0 es el primero, así que lo que hacemos con esta línea es esconder (hide) todas las cajas excepto la primera, que será la imagen inicialmente visible.

setInterval(function(){ [lo que haremos] }, 4000);
Necesitamos reiterar una serie de cosas cada cierto tiempo y eso lo hacemos con setInterval, indicando el tiempo de retardo entre cada serie.

$('#slider div:first-child').fadeOut(0)
Dentro de cada uno de esos intervalos hacemos desaparecer (fadeOut) la primera caja (div:first-child) que haya en la relación de imágenes...

.next('div').fadeIn(1000)
... y hacemos que la siguiente caja (next) aparezca poco a poco (fadeIn).

.end().appendTo('#slider');
Por último tomamos la que hasta ese momento es la primera imagen y la situamos al final (appendTo) de la "lista".

end() resetea el contador de elementos que hicimos avanzar con next(). De esa manera, el primer hijo que antes hicimos desaparecer es el que enviamos al final de la pila y no la imagen que ahora tenemos visible. Para el siguiente ciclo la que hasta este momento era visible (que era la segunda) será la primera y por tanto la que haremos desaparecer.

Referencias sobre las funciones usadas:

Variantes y personalización

Como habéis visto no es necesario CSS para que el slider funcione, pero si lo usamos podremos cambiar su aspecto, permitir el uso de imágenes de diferente tamaño, incluir rótulos e incluso mejorar la transición. A continuación algunas ideas.

Cuestión de centímetros

Buscando a Nemo

No sabe hablar, pero se fija mucho

Limitar el tamaño del contenedor general y evitar el desbordamiento para que las imágenes más grandes no ocupen más espacio. Y ya que estamos le ponemos unas esquinas redondeadas, un borde y lo centramos. El position:relative nos vendrá bien para otra cosa que haremos después.

#slider {
position: relative;
overflow: hidden;
width: 500px;
height: 300px;
border:10px solid #333;
border-radius: 40px;
margin: 0 auto;
padding: 0;
}

Si situamos las cajas padre de las imágenes de manera absoluta con respecto al contenedor general (para eso pusimos antes el relative), estas se dispondrán solapadas una encima de otra. De esta manera al fadeOut le podremos dar un tiempo para que sea "visible" (hemos cambiado el 0 por un 1000) y la transición entre imágenes más suave. Es esa mezcla de imágenes que se produce en la segunda demo.

En las imágenes, el max-width nos sirve para que siempre ocupen todo el ancho y el min-height para que aunque sean deformadas, no se nos quede hueco por debajo cuando sean de menos de 300px de alto.

#slider > div {
position:absolute;
top:0;
left:0;
}
#slider img {
width:100%;
min-height:300px;
margin:0;
padding:0;
border:0;
}

Y ya si queremos añadir otros elementos sobre las imágenes (en este ejemplo un texto), sólo tendremos que etiquetarlos con un span o como párrafo (p) y en el CSS posicionarlos de manera absoluta, ubicándolos en el lugar exacto dónde queramos con top/bottom - left/right.

#slider p {
position: absolute;
bottom: 30px;
left: 0;
display: block;
width: 400px;
height: 24px;
margin:0;
padding: 5px 0;
color: #eee;
background: #990000;
font-size: 22px;
line-height:22px;
text-align:center;
}

El marcado en el HTML para esto último, incluyendo además un enlace sobre la imagen, sería tal que así:

<div id="slider">
<div><a href="URL_ENLACE1"><img src="URL_IMAGEN1" /></a><p>TEXTO1</p></div>
<div><a href="URL_ENLACE2"><img src="URL_IMAGEN2" /></a><p>TEXTO2</p></div>
<div><a href="URL_ENLACE3"><img src="URL_IMAGEN3" /></a><p>TEXTO3</p></div>
</div>

Crear un gadget con las actualizaciones de Google+

2013-04-14T12:37:00.000+02:00

Como hoy es festivo y no me toca "trabajar" sólo voy a presentaros un artículo que hace unos días me remitió Pedro Méndez, autor de Reinspirit, un blog sobre desarrollo y diseño de sitios.

En él se explica cómo aprovechar determinado servicio gratuito que es capaz de generar un feed sobre Google+ y que podremos utilizar para mostrar fácilmente las actualizaciones de nuestro perfil o página en un blog. Con Pedro os dejo...

Hasta el momento no hay muchas formas de incluir un widget en Blogger dónde podamos mostrar una lista de nuestros últimos posteos en Google Plus.

Una de las formas de hacerlo es a través de Google+ to RSS, un servicio gratuito online que nos permite generar un feed RSS de las páginas, que posteriormente podremos agregar a un simple dispositivo de feed en Blogger.

Justo a la derecha puedes ver una captura de la salida que resulta cuando se aplica esta técnica.

Importante. Si cuando lo pruebes ves que sólo te salen fechas, es porque al enviar las noticias a tu muro no has puesto un título o una entradilla en la misma. Es decir, sólo pusiste el link de la noticia.

Ahora vamos a seguir leyendo para averiguar cómo agregar un widget con actualizaciones de Google+ en tu propio sitio de Blogger.

Para empezar, dirígete a Google+ to RSS y crea un feed para tu perfil de Google+. Tendrás que iniciar sesión con tu cuenta de Google+ para permitir a la aplicación acceder a tu perfil.

Tan pronto como hagamos esto ya seremos capaces de gestionar las entradas.

Para conseguir la dirección URL del perfil de Google+ Feed entramos en el icono derecho del RSS al lado de la ID del perfil y elegimos con botón derecho del ratón Copiar la ubicación del enlace. Esta es la URL feed de las actualizaciones del perfil personal.

Para publicar las actualizaciones de una página de Google+, entramos en el botón verde "New" y pegamos el ID del perfil de tu página de Google+, después seguimos el procedimiento de arriba para obtener la URL.

Es importante saber que solo se pueden crear dos canales para cada cuenta de Google+. Esto evita el uso indebido del servicio gratuito proporcionado.

Una vez que tenemos la URL de la página de perfil, entramos en el panel de Blogger y optamos por añadir un nuevo gadget de Feed. Ahí podemos pegar la URL de tu Google+ feed y cambiar el título/opciones para modificar el gadget a tus necesidades.

Ahora seremos capaz de obtener una vista previa del gadget y podemos adaptarlo para que coincida con el aspecto general del sitio. Por último guarda el gadget y disfruta con las actualizaciones de Google+ en tu blog.

¿Qué te parece?

Es cierto que este es un gadget bastante básico y en particular depende de un servicio de terceros. Aún así esta técnica resulta útil para aquellos que quieran añadir un canal de Google+ en Blogger. Si quieres también saber como posicionarte en esta red social te recomiendo leer este artículo.

Por favor, siéntete libre de dejar tus opiniones y comentarios sobre este tutorial a continuación y si conoces otros métodos para añadir actualizaciones de una página de Google+ en Blogger se agradece que la compartáis.

Cómo usar el nuevo editor HTML de Blogger y no morir en el intento

2013-04-10T21:51:00.000+02:00

Algunos lo han recibido como desayuno pero un servidor ha merendado con este nuevo aspecto del editor HTML de Blogger, sobre el cual vamos a comentar un poco ya para la hora de la cena. Como anticipo os diré que tras una primera y no muy extensa andadura, mi primera impresión es que va a hacer más fácil esto de cambiar cosas en la plantilla.

Para empezar vemos todo el código con líneas numeradas y coloreado según los distintos componentes de código: etiquetas, variables, propiedades, etc. según se trate a su vez de HTML, CSS, JavaScript e incluso el lenguaje propio de Blogger. Ya sabéis, esos include, b:if y otras ocurrencias.

Esto es lo que ya hacía cualquier editor externo decente, pero sin duda ahora será mucho más fácil encontrar ese pequeño error que nos vuelve locos cuando omitimos unas comillas o ponemos un punto y coma de más. Echo en falta que esto también se aplique al CSS, que aparece todo en azul oscuro sin distinguir selectores y reglas, pero el resto ya es una mejora importante.

Lo de los números que parece banal tiene también su utilidad para corregir errores ¿o no os suenan de nada los mensajes de este tipo?: "No se ha podido cargar la vista preliminar de la plantilla: Error al analizar XML, línea 3316, columna 7: The element..." Pues ahora ya podréis localizar con exactitud cual es esa línea dónde tenemos el error. Otra ayuda.

Luego vemos unas pequeñas flechas negras sobre algunas líneas que son las que indican bloques de código desplegables. Por ejemplo todo el CSS está ahí plegadito, así como los gadgets propios de Blogger y las rutinas (includable) .

Esto es lo que sustituye en cierta forma al anterior "Plantillas de artilugios expandidas", casilla con lo que expandíamos todo necesaria y obligatoriamente. Ahora sólo desplegaremos lo que necesitemos desplegar por lo que la plantilla no será ya tan laaaaaaarga, sino simplemente laaarga.

Y todavía hay más utilidades en el menú principal.

En primer lugar aunque no es esta su posición en el menú, destacaría el botón . Si lo pincháis -sin miedo, que hasta que no guardéis no pasa nada- veréis que todo el código se reorganiza con sangrados de distinta profundidad que nos permiten apreciar con claridad cuáles son las etiquetas de apertura y sus correspondientes cierres, así como el anidamiento de cajas que existe.

El nombre del botón acojona un poco por eso de que lleva la palabra Plantilla, pero sólo nos va a cambiar el formato del código. Si no veis claro ahora para qué sirve esto, ya veréis cómo agradecéis ese botón cuando montéis por ejemplo algún sistema de condiciones un poco complicado.

también presenta una novedad y esta es que ya no se abre en ventana nueva, sino dentro del mismo editor. En un principio pensé que ahora podría ver cómo quedan las páginas distintas de la principal sin necesidad de guardar, pero ya os confirmo que no, que aunque permite navegar por las páginas, no se aprecian los cambios mas que en la de inicio.

Por criticar un poco y que no parezca que estoy encantadísimo con el cambio -sólo estoy lo justo- lo de la ventana nueva me incomoda un poco, pero en el fondo es cuestión de dar a un botón para ir y otro para volver, casi igual que antes que tenía que pinchar en la pestaña del navegador para volver al editor.

¿Qué me queda? Ah, sí... Lo de . Ese botón es un desplegable que nos muestra los gadgets añadidos por nosotros y los propios de Blogger.

Esta es una forma rápida de ir directos al gadget en cuestión y ese de Blog1 seguro que lo usaréis mucho.

¿Y cómo buscamos por nuestra cuenta sin atajos? Pues como siempre, con CTRL+F y el buscador del navegador.

La diferencia es que ahora si tenemos el foco en el área del código, se nos abre un segundo buscador propio del editor. Otra vez echo de menos cosas y es un Anterior/Siguiente, pues para ir de una ocurrencia a otra hay que ir pulsando intro y siempre va hacia adelante.

Por contra tenemos la ventaja de que se marcan en amarillo todas las palabras coincidentes y sobre todo otra novedad que también puede ser muy útil. Se trata de un sistema para reemplazar determinados caracteres.

Este se activa con CTRL+SHIFT+F preguntándonos la cadena a buscar. Luego nos pide la cadena nueva a poner en su lugar y por último, nos va pidiendo confirmación para cambiar o no según va encontrando la cadena original.

Epílogo

Seguro que como es habitual e incluso razonable por ser algo inherente a la condición humana, este cambio no gustará a muchos. Lo mismo pasó con el lightbox para imágenes, las plantillas del nuevo diseñador, el nuevo escritorio y otras cosas nuevas que han ido incorporando en el pasado. Pero ¿quién se acuerda ahora de que alguna vez fueron nuevas?

Inconvenientes y al mismo tiempo tarea para casa: Acostumbrarnos aunque no apreciemos las ventajas. No queda otra

La noticia en Blogger Buzz.

Blogger. Página estática como portada del blog.

2013-04-09T17:00:00.000+02:00

Este es un sistema que nos permitirá crear una portada para el blog de una forma sencilla, sin necesidad de editar siquiera la plantilla.

El truco está en redireccionar al visitante que acceda mediante la dirección principal del blog a una página estática. En ella podremos poner el contenido que nos parezca, pero el sentido de hacer esto sería el de convertirla en una especie de portada o frontal del blog.

Además de no ser necesario editar la plantilla, el hecho de que usemos una página como lugar de aterrizaje nos permitirá convertir el blog en una especie de web con secciones fijas (el resto de páginas estáticas) y mantener el acceso al blog normal como si fuera un apartado más de esa web. Todo ello sin salir de nuestro subdominio. Enlazado en esta imagen podéis ver un ejemplo.

El invento no es de un servidor, sino de Blogger Tips Pro quién además ha hecho pruebas para ver la forma en que Google indexa esa página redirigida, con resultados satisfactorios. Así que prácticamente sólo os solucionaré el trabajo de traducir el texto y las capturas de pantalla.

Los pasos a seguir son los siguientes:

Añadimos una página estática para nuestro nuevo Inicio

Accedemos al escritorio y en apartado Páginas seleccionamos Página nueva > Página en Blanco.

A la página la titularemos como Inicio o cualquier otra denominación similar que se nos antoje, excepto el nombre que estemos usando para la actual página de inicio, que en el ejemplo es la que viene por defecto en Blogger (Página principal).

En está será dónde pondremos todo lo que queremos que se vea en la página de aterrizaje, pero de momento y por seguir la explicación, podemos incluir cualquier texto, que luego ya la confeccionaremos a nuestro gusto.

Hechas ambas cosas la publicaremos.

Ahora vemos en nuestra lista de páginas al menos estas dos citadas, la que teníamos originalmente (Página principal) y la nueva creada (Inicio). Si teníamos más páginas también se verán en la lista y quizás sea un buen momento para reordenarlas poniendo la nueva creada (Inicio) al principio. Da igual que esté la primera o la segunda porque luego ocultaremos la pre-existente (Página principal).

Si reordenamos habrá que pinchar arriba a la derecha para que los cambios se salven.

Añadimos otra página que nos servirá como enlace al blog

Como lo que se pretende es que cuando accedamos a la dirección principal de nuestro sitio acabemos en la portada y desde ahí no se verá el blog en sí mismo, tenemos que habilitar una manera de que nuestros visitantes puedan acceder y esto será con un enlace. Este enlace lo incorporaremos a nuestro menú como otra página. Esta será del tipo Dirección web y la dirección en cuestión tiene que ser forzosamente la de nuestro blog más index.html.

Cuando se abre la ventana emergente de rigor, en el primer casillero escribiremos Blog y en la segunda la dirección en la forma antes expresada: http://DIRECCION-BLOG/index.html.

Como no es la primera vez que me pasa, insisto en que en lugar de DIRECCION-BLOG hay que poner vuestra propia dirección.

Tras Guardar observaremos que ya tenemos tres páginas, Página principal, Inicio y Blog, siempre siguiendo el ejemplo.

Lo podemos hacer más tarde, pero creo que es el momento de mostrar nuestras pestañas del menú de páginas que estamos modificando asegurándonos de que NO tenemos la opción para Mostrar páginas en situación de No mostrar. Tenemos que seleccionar Pestañas principales o Enlaces laterales.

Redireccionar la Página principal por defecto a la nueva Inicio

Ahora viene el paso clave del truco y el único con el que tendremos que tener algo más de cuidado. Se trata de aplicar una redirección para que cuando se acceda a la dirección principal de nuestro blog, automáticamente se nos lleve a la portada que hemos creado (Inicio).

Para ello entramos en la sección Preferencias para motores de búsqueda y en Redireccionamiento personalizado pinchamos en Editar.

Aquí tenemos que marcar las dos casillas de verificación que hay (De: http://... y Permanente) y lo más importante, teclear en el primer casillero una simple barra (/) y en el el segundo la dirección de la nueva página de Inicio antes creada.

Sólo es necesario incluir a partir de la primera barra de la dirección. Esto es que si nuestra página es http://nombre.blogspot.com y la página nueva http://nombre.blogspot.com/p/inicio.html, lo único que hay que teclear es /p/inicio.html.

Repasamos que todo esté como en la captura y pinchamos primero en el pequeño enlace Guardar bajo Permanente y luego en el botón naranja .

Ocultar Página principal original

Por último lo que haremos será esconder el enlace del menú de páginas primitivo que teníamos y que ahora no servirá para nada porque nos llevará al mismo sitio que el nuevo Inicio, es decir, a la página estática que usaremos como portada.

Para eso nos vamos ahora a Diseño y desde allí editamos el gadget de Páginas.

Otra ventanita emergente, pero aquí sólo hay que desmarcar la casilla de Página principal. En el bloque de la derecha veremos que desaparece esa página. y le damos más abajo a Guardar para terminar.

Ya que estamos aquí, si queréis cambiar el orden en que esas páginas saldrán en el menú sólo es cuestión de pinchar el bloque correspondiente y moverlo de sitio.

Y tranquilos, que no hemos borrado esa página. Sólo la hemos ocultado. Si volvemos al apartado Páginas comprobaremos que esta aparece ahora en un bloque inferior al que vimos antes, con el título Oculto.

Construir nuestra portada

Esta ya es la parte creativa y no puedo detallar qué es lo que se podría hacer aquí, pero sí puedo hacer un resumen: TODO.

Pensad que es una página estática y que se puede incluir cualquier cosa: texto, imágenes, marcas HTML, vídeos, etc.

Incluso podemos añadir directamente CSS entre etiquetas STYLE y el estilo sólo afectará a esta página.

Con eso podemos por ejemplo ocultar la sidebar, cambiar el color de fondo, modificar los colores... cualquier cosa.

En la imagen de al lado podéis acceder a un blog que tiene este sistema y a continuación el código que yo puse en la página de inico de la demo cuya captura estaba al principio de esta entrada. Y sí... sólo con eso en la página tenemos una landing page como la que vistéis.

Ver código

<div class="mapa_imagen">
<img src="http://2.bp.blogspot.com/-NqwLz-3421M/UWAS-OJJK-I/AAAAAAAAAFg/_FxQ1hk9KGI/s1600/landing.jpg" />
<ul class="notas">
<a href="http://casi-web.blogspot.com.es/p/pagina-estatica_31.html">
<li id="nota1">
<p>Esto es lo que verás aquí</p>
</li>
</a>
<a href="http://casi-web.blogspot.com.es/p/pagina-estatica_31.html">
<li id="nota2">
<p>Contempla nuestro lorem</p>
</li>
</a>
<a href="http://casi-web.blogspot.com.es/p/pagina-estatica.html">
<li id="nota3">
<p>Ipsum sit amet ¡Seguro!</p>
</li>
</a>
<a href="http://casi-web.blogspot.com.es/index.html">
<li id="nota4">
<p>Nuestra publicaciones periódicas</p>
</li>
</a>
</ul>
</div>

<style>
/* Ocultar-Modificar parte de la estructura original */
.tabs-inner, .main-inner .fauxcolumn-right-outer, .sidebar, h3.post-title, .post-footer, .comments, .blog-pager, .feed-links { display: none;width: 0;}
.main-inner, .main-inner .columns {padding: 0;}
.header-inner .Header .titlewrapper {padding: 0 30px;}
.post img {padding:0;border:0;}

/* Mapa para la imagen */
* {-moz-transition:all 1s ease-out; -webkit-transition:all 1s ease-out; transition:all 1s ease-out; }
div.mapa_imagen {position: relative;}
ul.notas li {list-style: none; opacity: 0; position: absolute; border: 2px dashed #ffd966; border-width: 0 0 4px 0; width: 130px; height: 63px;}
div.mapa_imagen:hover ul.notas li { opacity: 1;}
ul.notas li p { margin: 5px 0 0 0; padding: 10px; position: absolute; top: 100%; text-align: center; color: white; background: black; opacity: 0; }
ul.notas li:hover p { opacity: .8;}
ul.notas li#nota1 { top: 190px; left: 375px;}
ul.notas li#nota2 { top: 175px; left: 549px;}
ul.notas li#nota3 { top: 274px; left: 530px;}
ul.notas li#nota4 { top: 465px; left: 679px;}
</style>

Nota: Este mismo código puede no funcionar bien en tu blog porque está preparado para una plantilla de las del nuevo diseñador con los selectores que estas incluyen. Cada plantilla usa sus propios nombres de selectores.

Enlaces sobre imágenes, con efecto fade

2013-04-04T18:03:00.000+02:00

Al título le falta algún adjetivo tal que "estilosos" o algo así, pero no encontré ninguno adecuado. Ya he dicho otras veces que lo de los títulos de las entradas no es lo mío.

Lo que intentamos en esta ocasión es mostrar una imagen y sobre ella solapar una serie de enlaces. Algo muy sencillo pero que con un poco de CSS puede quedar bien y ofrecernos un resultado curioso.

Como utilidad se me ocurre que podría servir para colocar en la sidebar con algunos enlaces prioritarios para el sitio, que quedarían algo más destacados por la imagen que los va a acompañar. Eso o cualquier otra cosa que se os pueda ocurrir, of course.

El resultado sería este y pasando por encima de los enlaces veréis el efecto. Una tontada pero como decía, puede quedar bien según los casos.

Inicio|Bio|Contacto

Para conseguir esto tenemos que utilizar un par de cajas. Una que incluya lo que serán los enlaces (links) y otra padre que además de los enlaces contenga la imagen (imagelinks). En consecuencia el HTML quedaría así:

<div class="imagelinks">
<div class="links">
<a href="URL1">Inicio</a>|<a href="URL2">Bio</a>|<a href="URL3">Contacto</a>
</div>
<img src="URL_IMAGEN" />
</div>

Ahora ya sólo es cuestión de añadir nuestro CSS para hacer la magia:

.imagelinks {
display: block;
position: relative;
width: 100%;
max-width: 300px;
margin: 0 auto;
padding: 0;
border: 4px solid black;
}
.imagelinks img {
max-width:100%;
border: 0;
vertical-align: top;
}
.links {
width: 100%;
position:absolute;
bottom:0;
text-align:center;
background: #FFFFFF;
-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
.links a {
display: inline-block;
padding: 8px;
color:#000000;
}
.links:hover {
zoom: 1;
filter: alpha(opacity=100);
opacity:1;
}

Si no fuera por la diversidad de navegadores el código se quedaría en cerca de la mitad, pero lo fundamental de esto es hacer que la caja interior (.links), la de los enlaces, tenga un posicionamiento absoluto (position: absolute;) con respecto a su contenedora (position: relative;) para que la podamos situar solapada y justo abajo del todo (bottom: 0;).

La segunda cuestión importante es que los enlaces se muestran inicialmente semitransparentes (opacity: .5;) y que es al hacer hover cuando los hacemos totalmente opacos. El resto sólo sirve para hacer el diseño adaptable y configurar padding, colores y fuentes. ¡Ah,sí! ..y el transition para que salga con el efecto fade que anunciamos en el título.

Blogger. Cambiar enlaces a entradas recientes/antiguas por sus títulos

2013-03-31T17:34:00.000+02:00

Esto es algo que vi en Ciudad Blogger pero que formaba parte de un código algo más largo y que servía para hacer aparecer en un recuadro con un efecto cuando se hace scroll, los enlaces de navegación que casi todos tenemos en la parte inferior del blog.

Pero lo que me resultó más curioso de su lectura fue la parte que sustituía los típicos Entrada antigua / Entrada más reciente por los títulos de las correspondientes entradas. Y eso es lo que vamos a ver a continuación.

Lo podéis ver abajo del todo en esta página de pruebas. He enlazado un post y no la página principal porque salvo que tengáis una configuración de Mostrar un máximo de entradas en la página principal, el truquillo no funcionará bien del todo en otro tipo de páginas y por ese mismo motivo, de manera genérica lo mejor será condicionarlo para que sólo se ejecute en las entradas individuales (tipo item).

Se trata de un pequeño código que requiere de jQuery así que lo primero de todo será comprobar si se tiene esa librería en la plantilla y si no pues incluirla. Esto se hace añadiendo esta línea justo después de }]]></b:skin>.

A continuación de ella o incluso en cualquier lugar posterior antes de </head>, es dónde tendremos que insertar el JavaScript que se encarga del trabajo:

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
// <![CDATA[
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$(".blog-pager-newer-link").html( newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$(".blog-pager-older-link").html(olderLinkTitle);
});
});
// ]]>
</script>
</b:if>

Y nada más... Con eso ya aparecerán los títulos de las entradas anterior y posterior en lugar de los rótulos habituales.

Como decía esto sólo será efectivo en las páginas de posts individuales, así que el Vista Previa no os servirá de nada para comprobar. Hay que grabar (prueba de fe) y luego acceder a una entrada para poder ver el resultado.

Si usáis títulos muy largos, los tres enlaces (reciente-home-antiguo) podrían no caber en una sola línea, así que como ajuste adicional se podría esconcer el enlace a la Página principal con un display: none; al enlace correspondiente para hacer más hueco.

Y ya que estamos por aquí pues también podemos añadir unos símbolos que nos ayuden a resaltar más los enlaces. Este sería el CSS para esos pequeños cambios con un resultado que es exactamente el que se muestra en la página demo que enlacé al principio.

#blog-pager {
text-align: center;
font-size: 20px;
font-weight: bold;
}

a.home-link {display:none;}

a.blog-pager-newer-link:before {
content:"\25C4";
}
a.blog-pager-older-link:after {
content:"\25BA";
}

Eliminar estilo de enlaces para imágenes

2013-03-26T16:20:00.000+01:00

Últimamente estoy publicando pequeños truquillos con CSS que alguna vez me hicieron falta y que no quiero que se me olviden. Son esos que en el argot algunos denominan con la palabra inglesa snippets (fragmentos) y que realmente son sólo pequeños trozos de código que por sí solos no sirven para nada pero que son útiles para resolver determinados problemas de diseño web.

El de hoy sirve para cuando aplicamos determinado estilo a los enlaces y ese mismo estilo nos aparece de manera no deseada en una imagen que a su vez tiene un enlace a otra a tamaño original. Esto es lo que suele pasar cuando subimos una imagen en Blogger o cuando usamos algún tipo de lightbox para poder ampliarlas a demanda.

En la imagen de la izquierda podéis ver lo que ocurriría con una imagen con enlace si estos los tenemos definidos con un fondo rojo. Ese cerquillo alrededor de la foto es lo que NO queremos que se vea.

Esto ocurriría con un código como este:

a {background: red;}

El mismo problema tendríamos por ejemplo con un borde añadido a modo de subrayado u otros elementos. La excepción sería con los subrayados hechos con text-decoration y otras propiedas similares que sólo afectarán a los enlaces de texto.

Y la solución sería filtrar los enlaces con un selector de atributos para buscar los enlaces que apuntan a imágenes. Estos los distinguiremos fácilmente por su extensíón, así que sólo debemos crear una regla como esta y poner dentro propiedades que anulen las que hayamos definido para el resto de enlaces:

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
background-color: none;
border: 0;
}

De esta manera, todos los enlaces que terminen en jpg, jpeg, jpe, png y gif adoptarán un nuevo estilo, en el ejemplo, sin color de fondo y sin borde. Para ver con más detalle cómo formular este tipo de selectores podéis ver esta entrada que publicamos hace tiempo.

Ejemplo de imagen con enlaces definidos con borde inferior:

La misma imagen con enlace tras aplicar el filtro para eliminar el borde:

Solución provisional para el lightbox de Blogger que no funciona

2013-03-23T14:39:00.000+01:00

02/04/2013 Problema solucionado. El que haya incluido este código ya puede retirarlo

Desde hace unos días, no sé exactamente cuántos, el sistema de ventanas modales para imágenes (lightbox) que viene de serie con Blogger está fallando.

Como en el blog de problemas conocidos no decían nada y yo siempre estoy trasteando cosas, lo achaqué a haber borrado algo accidentalmente, pero tras tres comentarios de otros tantos amigos al respecto, ya se confirmó que la cosa era general.

Bien, pues parece que Soraya ha dado con el origen del problema y este es que el fichero JavaScript que se ocupa de esa tarea ha sido cambiado.

Eso es algo que carga Blogger directamente en nuestras plantillas y se conoce que han sacado una nueva versión, la han instalado y, como en otras ocasiones similares, no funciona como debería. De hecho esta vez es que no funciona nada. Esta historia quizás le suene a alguien...

Sabiendo esto la solución pasa por forzar que se cargue el fichero anterior y mientras lo sigan teniendo alojado en sus servidores no habrá el menor problema.

Para eso, se edita la plantilla y al final del todo, justo tras el cierre del body (</body>), tenéis que insertar esta línea

Y con eso el problema queda solucionado.

Como dato adicional, la versión que se está cargando actualmente con el conocido fallo es la 525304238-lbx__es.js. Con una página vuestra en el navegador, sólo tenéis que ver el código fuente de vuestro sitio y buscar "lbx__es.js". Con eso podréis comprobar qué versión se está cargando. Si el blog está en otro idioma distinto del español, el fichero llevará otro nombre, pero se puede cargar sin miedo el que dije, ya que sólo cambiará un palabra en la galería de miniaturas.

Importante

Como dice el título de la entrada esta es una solución provisional. Cuando tengamos constancia de que el nuevo vuelve a funcionar correctamente, lo mejor sería quitar esa línea que ahora hemos incluido. De esa manera tendremos las mejoras que -se supone- llevará ese nuevo lightbox.

Avisaré tan pronto me entere y os agradecería que me avisarais a mí si vosotros os dais cuenta antes.

Títulos en sumarios que no cuadran: text-overflow

2013-03-21T16:10:00.000+01:00

Cuando montamos un sistema de sumarios uno de los problemillas que surgen es qué hacer con los títulos de las entradas cuando por necesidades del diseño tenemos que encuadrarlos en un espacio limitado. Estos son de longitud variable, unas veces más cortos y otras más largos y por tanto lo mismo nos ocupan una línea, que dos, que tres... Lo mismo sucede si tenemos una plantilla adaptable (al ancho, se entiende), porque al reducir la ventana el número de líneas también van a incrementarse.

Lo normal cuando se monta una caja es que esta no tenga un ancho y alto definido para que su contenido sea el que marque el tamaño y de esta manera, la caja es más grande o más pequeña según la extensión de lo que haya dentro, sea texto, sea imagen, sea otro tipo de elemento.

El planteamiento de esta entrada es sólo para texto y voy a ilustrarlo con capturas de la plantilla Blogger Store. Esta sería la primera, con el caso general de una caja para el título sin altura definida.

.grid h3 {
width: 138px;
}

Como podéis ver, cuando se deja la caja contenedora de los títulos a su libre albedrío, esta se adapta a la longitud del texto estirándose en altura. Vamos, lo normal... En el ejemplo se ve perfectamente cómo dos son mas altas por ese motivo, cosa que provoca el descuadre del diseño. Aquí quizás no se aprecia demasiado, pero según la página va teniendo más entradas, más feo se pone el asunto.

Una primera solución sería ponerle un height fijo del doble de la altura de la fuente. Con esto minimizamos el problema porque se producirá con muchos menos títulos, ya que la mayoría entrarán en esas dos líneas.

.grid h3 {
width: 138px;
height: 34px;
}

Pero cuando ocupen tres líneas volveremos a la misma historia y además al haber limitado la altura, el texto desbordará su contenedor con un efecto chungo, así que como medida adicional podemos añadir un overflow:hidden para que no se vea lo que debería sobresalir. Un ejemplo con espacio reservado para una sola línea de altura:

.grid h3 {
height: 17px;
overflow: hidden;
}

Como podéis ver, la segunda línea queda oculta al haber limitado el alto y escondido el sobrante que quedaría por debajo. Y lo mismo podemos hacer si en lugar de usar overflow, usamos white-space: nowrap. En este caso lo que evitamos es que exista más de una línea y el ancho será el que limite el contenido y esconda lo que sobra por la derecha.

.grid h3 {
white-space: nowrap;
}

Pero si ya es desagradable que el texto se corte por palabras dónde el borde exterior manda, casi peor es esto de que una letra se pueda quedar a medias.

Pues bien, hace muy poco descubrí una propiedad CSS -para mí curiosa- que arregla esto un poco y que lo que hace es cortar los textos de una forma más elegante y que consiste en añadirles tres puntos suspensivos. Se trata de text-overflow, que en conjunción con overflow:hidden y white-space:nowrap, produce esta otra salida:

.grid h3 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

Lo que hace esta propiedad es cortar la palabra por un carácter determinado y añadirle los puntitos, de manera que siempre queda todo dentro de la caja. No es una solución óptima, pero es sencilla y digna, además de que para plantillas adaptables creo que viene muy bien ¿no?

Para quién quiera profundizar en la propiedad la tiene explicada (en inglés) en un borrador de W3C que incluye otras características actualmente en discusión.

Y a modo de resumen unas pequeñas demos con efecto hover para ver qué pasaría en cada caso con cajas adaptables: