Oloblogger

Preguntas frecuentes y cosas sencillas IV

2013-06-14T11:45:00.000+02:00

NOTIFICACION DE PLAGIO BLOGGER

Una de las direcciones disponibles para poder denunciar un plagio o cualquier otro tipo de infracción relacionada con derechos de autor es esta.

http://support.google.com/bin/request.py?contact_type=lr_dmca&product=blogger

INSTALAR PLANTILLAS DE DISEÑO (2006)

¿Alguien echa de menos las plantillas que nos han acompañado en los últimos 6 años? Me refiero a esas bautizadas por Blogger como Plantillas de diseño y que salieron justo antes que las del Nuevo Diseñador y posteriormente a las muy obsoletas Clásicas.

Pues Ciudad Blogger tuvo el acierto y la precaución de salvarlas y las recopiló en su entrada Descargar las plantillas de diseño de Blogger, así que no hace falta que deis más vueltas. Ahí están todas.

MAYÚSCULAS EN GADGET ARCHIVO

¿Quieres que el artilugio dónde se muestra el árbol de fechas clasificando tus entradas luzca en mayúsculas? Pues este es el selector que controla eso y entre corchetes la propiedad que pasa cualquier contenido a mayúsculas.

ul.hierarchy{text-transform:capitalize;}

Cualquier quiere decir que también podéis aplicar esa propiedad a otros apartados. Sólo es cuestión de encontrar el selector oportuno.

CORRECTOR ORTOGRÁFICO EN EL EDITOR

Tantos posts redactados y por costumbre me había pasado desapercibido. Tuvo que ser otro, Chacien, amigo y lector habitual para más señas, quién me avisara de que NO estaba usando un cómodo corrector ortográfico que viene de serie en el editor de entradas. No es una maravilla, pero sirve para depurar bastante los fallos mecanográficos y en ocasiones, los ortográficos.

Pues por si hay algún despistado más, hablamos de ese icono que aparece en el lugar marcado en la imagen de abajo. Visible cuando accedemos desde la pestaña Redactar.

EL LIGHTBOX DE IMÁGENES NO FUNCIONA

¿Has cambiado de plantilla y ahora no funciona la ventana modal para imágenes aunque tienes la opción correcta activada en tu escritorio?
(Entradas y Comentarios > Mostrar imágenes con Lightbox > SI)

Bien, pues después de lo anterior comprueba si tienes esto en tu blog:

Si es así, normalmente todo se soluciona si añades una clase adicional. En concreto post-body para que quede así:

Una de esas pequeñas tonterías que nos complican la vida...

CAMBIAR FORMATO BOTON +1

El botón +1 de Google se monta con un código como este:

Si quieres cambiar su tamaño estándar sólo tendrás que añadir un data-size con alguno de estos valores: small, medium o tall.

Selectores CSS. Avanzados

2013-06-10T18:00:00.000+02:00

El otro día nos quedamos por los selectores descendentes como si la cosa acabara ahí, pero realmente todos los selectores CSS combinados pueden recibir este mismo adjetivo de descendentes.

En efecto, combinando selectores siempre podemos buscar determinado selector B que esté contenido dentro de otro A para darle estilo (a él y a todos los que estén dentro de A) pero no podemos darle estilo sólo al A que a su vez tenga dentro un selector B concreto. No podemos ir hacia arriba por así decirlo.

Si aplicamos reglas a A, estas serán para todos los elementos que tengan ese selector y no podremos discriminar en función de si A tiene dentro B, C, D o cualquier otra cosa. Por eso insisto en que CSS siempre es descendente.

Pero aún así las posibilidades son muchas más de las que vimos en el anterior post. Hoy por ejemplo vamos a ver cómo discriminar selectores (hacia abajo) siguiendo una especie de árbol genialógico, para poder seleccionar determinados hermanos, hijos, nietos y demás familia.

Selectores avanzados CSS

Bien, pues como decía, con los selectores básicos se pueden hacer muchísimas cosas, pero con estos que veremos a continuación podremos resolver algunos problemas determinados que nos pueden surgir a la hora de atacar con CSS el elemento exacto que queremos modificar.

Que les haya puesto el adjetivo de avanzados sólo es una manera de clasificarlos para distinguirlos de los básicos, pues como veréis, no tienen mucha dificultad.

Sólo añadir que algunos de estos selectores no serán interpretados por todas las versiones de los navegadores actualmente en comercialización, aunque los de esta entrada son soportados por prácticamente todos incluido IE desde su versión 8.

Para más información podéis ver esta tabla de compatibilidad.

Y para ver toda esta parte seguiré este esquema HTML cuyo código e interpretación son las siguientes:

<div class="adolfo">
  Adolfo Div
  <span class="beatriz">
    Beatriz Span
    <span class="casildo">
      Casildo Span
    </span>
    <div class="daniel">
      Daniel Div
      <div class="felicia">
        Felicia Div
      </div>
    </div>
    <div class="eduardo">
      Eduardo Div
    </div>
  </span>
</div>

Adolfo DivBeatriz SpanCasildo Span

Daniel Div

Felicia Div

Eduardo Div

Selector de hijos

Selecciona todos los elementos (hijo) que están contenidos dentro de otros (padre), pero sólo si son hijos directos, es decir, si no hay otras cajas distintas por en medio. Se utiliza un símbolo > entre los selectores simples.

En los descendentes, una vez el elemento cumpla con el selector, todos los otros elementos que haya dentro de él, sea a la altura del "árbol genialógico" que sea, quedaban también afectados por las mismas reglas, pero con este tipo de selector sólo los hijos se verán modificados por las propiedades declaradas. El resto de familia (hermanos, nietos, bisnietos, etc.) del elemento que cumpla -por así decirlo- la condición, no quedarán afectados.

Por tanto las diferencias son dos. Una está en el matiz que aporta la palabra "directo", porque sólo se seleccionará el hijo del par padre-hijo que cumpla lo declarado. Serían como familiares en primer grado descendentes, por lo que no afectaría a un par con mayor grado de separación (padre-nieto, por ejemplo).

Pero como puedo ser más confuso con mis palabras que esclarecedor, ahí va un ejemplo...

(Aplicar a los div que sean hijos directos de otro div un fondo negro y un color de fuente blanco)

div > div { background: black; color: white;}

Adolfo DivBeatriz SpanCasildo Span

Daniel Div

Felicia Div

Eduardo Div

Como se puede ver, sólo se cambia el fondo del único div (Felicia) que a su vez es hijo directo de otro div (Daniel).

Si no hubiéramos usado el símbolo de hijo (>) y hubiéramos escrito la regla directamente como div div {background:black; color:white;} (selector descendente simple) se habrían cambiado los fondos de TODOS los div que hubiera dentro del primer div (Adolfo) aún sin ser directos. Esto es Daniel, Eduardo y Felicia. Lo vemos.

(Aplicar a todos los div que estén contenidos dentro de otro div un fondo negro y un color de fuente blanco)

div div { background: black; color: white;}

Adolfo DivBeatriz SpanCasildo Span

Daniel Div

Felicia Div

Eduardo Div

Beatriz y Casildo no cambiarían de fondo en ningún caso por ser un span, ni en el caso del ejemplo ni en este último supuesto.

Para ver otro ejemplo ahora buscamos span que sean hijos directos de algún div.

(Aplicar a los span que sean hijos directos de algún div un fondo negro y un color de fuente blanco)

div > span {background:black; color:white;}

Adolfo DivBeatriz SpanCasildo Span

Daniel Div

Felicia Div

Eduardo Div

Beatriz es la única caja que cumple la condición porque por ejemplo Casildo es un span contenido en un div (Adolfo) pero no es hijo directo suyo. Si Felicia fuera un span también cumpliría la condición y su fondo sería negro.

Selector adyacente

Sirve para seleccionar un único elemento que es consecutivo de otro. Ni descendiente directo ni más abajo en el anidamiento, sino a la misma "altura" y justo detrás, sin otros elementos en medio. Para ello se utiliza el símbolo + entre dos selectores.

En este caso buscamos hermanos y además siameses.

(Aplicar a los div que sean justo precedidos por otro div y por ningún otro tipo de elemento)

div + div { background: black; color: white;}

Adolfo DivBeatriz SpanCasildo Span

Daniel Div

Felicia Div

Eduardo Div

¿Y cual era el único elemento en el ejemplo que cumplía la condición? Pues eso... Eduardo es el único div precedido (que no dentro) de otro div. Felicia está DENTRO de Daniel y no a la misma altura, por lo que como no son hermanos sino padre e hijo, la regla no le afecta.

E insistiendo en la idea de que CSS sólo se puede usar en sentido descendente el hecho de que haya dos div consecutivos no implica que el estido de div + div se vaya a aplicar a ambos. Como veis sólo se aplica al selector que queda más a la derecha en el selector combinado, el segundo div.

¿Imaginais que sucederá si usamos esto otro?

(Aplicar a los div que sean justo precedidos por un span y por ningún otro tipo de elemento)

span + div {background:black; color:white;}

Adolfo DivBeatriz SpanCasildo Span

Daniel Div

Felicia Div

Eduardo Div

Exacto. En ese caso se cambia de color el fondo de Daniel porque es el único div hermano adjunto a un span en nuestro esquema de ejemplo.

Nota: Los fondos de cada caja tienen forzado un color de fondo propio (blanco) para que no sea transparente (por defecto) y se vea con el mismo color que el de la caja contenedora.

Selectores CSS. Básicos

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

CSS es un lenguaje que permite programar la parte estética de un sitio web. Para ello se sirve de lo que se denominan reglas, unos elementos que a su vez se componen de un selector y una declaración.

El selector indica a qué hay que aplicarle la regla y la declaración especifica qué es lo que hay que hacerle.

Dentro de la declaración nos encontramos las propiedades y sus valores, que son los que al final marcarán el estilo de nuestro sitio: colores, tipografías, márgenes, etc.

Con un conocimiento básico de inglés pienso que cualquiera puede deducir qué hace cada una de las propiedades que se pueden usar, pero de todas formas aquí tenéis la utilidad de las más comunes.

Sin embargo con los selectores no basta con saber idiomas y creo que conociéndolos bien nos podríamos ahorrar en muchas ocasiones el tener que usar otros lenguajes -como JavaScript- que aumentan el peso de la página a veces innecesariamente. Así que hoy empezamos con los básicos y en otra ocasión vemos otros más avanzados.

Si quieres ir un paso atrás y ver dónde se debe poner este tipo de código, no olvides pasar por esta otra entrada: CSS básico. Ejemplo con imágenes redondas.

Y que me disculpen los puristas si le pego alguna patada a la terminología del estándar.

Selectores básicos CSS

Los selectores son como una especie de filtro. Con ellos podemos seleccionar subconjuntos de elementos de entre todos los existentes en una página web y así aplicarles idénticas propiedades para que finalmente tengan el mismo estilo.

La principal ventaja de usar CSS es que con una sola regla podemos dar un estilo determinado a todos esos elementos homogéneos de una sola vez, cosa especialmente útil cuando queremos modificar una parte importante de nuestro diseño.

Imaginad por ejemplo que vamos redactando entradas en un blog insertando en ellas código para forzar determinado color para la tipografía. El día que queramos cambiar dicho color tendremos que editar todas y cada una de las entradas para cambiarlo. Sin embargo, si asignamos ese color mediante un selector CSS, cuando queramos cambiarlo en todas las entradas sólo tendremos que alterar el valor de la propiedad en la regla correspondiente.

En Blogger y plantillas estándar, esto se haría aplicando propiedades a .post-body, que es el selector bajo el que está el contenido de las entradas propiamente dichas. Las reglas que tenga ese selector automáticamente afectarán a la estética de todas las entradas. Si queremos todo el texto centrado, pues allí incluiremos un text-align: center; Si queremos que todo el texto de la entrada sea verde, pues pondremos un color: green;.

Si el día de mañana queremos cambiar el color por otro, sólo habría que cambiar el valor green por el nuevo y TODAS nuestras entradas cambiarían de color.

Por explicarlo de otro modo, un selector viene a ser como una marca que ponemos en ciertos contenidos HTML. Esa marca por si sola no hará nada, pero cuando además se pone en CSS con unas reglas, el navegador es capaz de relacionar uno y otro lenguaje y aplica el estilo al contenido marcado.

Es más fácil verlo y hacerlo que explicarlo, pero esta es la magia de CSS (Cascading Style Sheets, Hojas de estilo en cascada). Pasamos a verlo y vuestra parte es hacerlo.

Selector universal

Sirve para seleccionar todos los elementos de la página. Se representa mediante un asterisco.

(Aplicar a TODOS los elementos de la página un margen cero)

* { margin: 0; }

Un ejemplo simple. Añadid a vuestra hoja de estilo esto y veréis que gracia. Bueno, en unas plantillas más que en otras.

* {
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}

Lo que hace esa regla es aplicar a TODOS los elementos de vuestra página una transición. Cualquier elemento que tenga en ella un cambio de tamaño, un cambio de posición, de color de fondo, etc., se hará poco a poco y no de golpe, a partir de que pongáis esa regla. Ya digo que según las plantillas será más o menos visible, pero en los enlaces y otros elementos en los que tengáis programado algún hover con algún efecto, lo veréis más claro.

Para este post he añadido esa regla. Al margen de que ya la llevan las etiquetas desde siempre, ahora se ha incorporado a los botones sociales entre sidebar y entradas. Probad también a cambiar el tamaño de la ventana y fijaros como a partir del ancho en el que desaparece la barra lateral izquierda, el resto de bloques se adaptan al tamaño disponible poco a poco, como a cámara lenta.

Este selector funcionará para todo aquello que no tenga su propia regla con distinta propiedad. Si usáis el selector universal con un background: red; por ejemplo, veréis que algunas cosas no cambian. Esto es porque tienen un fondo propio asignado mediante una regla. Sin miedo, que con Vista Previa se puede ver y no grabar.

Pues el resto de selectores funcionan igual, pero permiten seleccionar (valga la redundancia) elementos más concretos... según necesitemos. Vamos con el resto.

Selector de etiqueta

Selecciona todos los elementos marcados con determinada etiqueta HTML.

(Aplicar a TODOS los div un fondo rojo y un borde sólido de 2px y color negro)

div { background: red; border: 2px solid black;}

Y al igual que en el ejemplo hemos usado un div, podremos aplicar reglas a span, p, input, h1, etc.

Selector de clase

Sirve para dar estilo sólo a determinados elementos marcados con el atributo class y la clase definida.

(Aplicar a todos los elementos con una clase verde una fuente de color verde)

.verde { color: green; }

Este tipo de selectores son fundamentales para dar estilo a partes concretas del sitio web y para ello utiliza nombres arbitrarios que nosotros mismos generamos en lugar de etiquetas HTML.

Como nombre de clase podemos utilizar prácticamente lo que queramos (olvidémonos de los caracteres especiales), aunque conviene que sea nemotécnico para recordar que existe y lo que hace cuando para lo vayamos a necesitar. Para añadirlo a un elemento se utiliza el atributo class.

<div class="green">AQUÍ EL CONTENIDO DEL DIV</div>

Selector de ID

Iguales que los anteriores pero para elementos marcados con el atributo id. Este se utiliza para marcar un elemento único.

(Aplicar al elemento slider un color de fondo azul)

#slider { background: blue; }

Las clases y los identificadores son como los nombres comunes y los propios. Una clase se puede reutilizar para diversos elementos pero uno con id tiene que ser único (class="montes", id="Everest"). No puede haber más que un solo elemento con una determinada id en la misma página, de lo contrario el intérprete del navegador dará resultados a priori imprevisibles. No es que se vaya a auto-destruir el ordenador ni nada de eso, pero seguramente no hará lo que nosotros necesitamos.

Nótese que la diferencia al declararlos es que los de clase llevan un punto y los de id llevan un símbolo de sostenido (#).

Para añadirlo a un elemento se hace también igual que antes pero usando el atributo id:

<div id="slider">AQUÍ EL CONTENIDO DEL DIV</div>

Selector descendente

Las declaraciones se aplicarán sólo a los elementos de la etiqueta especificada que estén dentro de otra etiqueta concreta. Con este tipo de selectores restringimos el alcance de los simples, que evidentemente son más genéricos.

(Aplicar a todos los párrafos que se encuentren dentro de un span un relleno igual a 10px)

span p { padding: 10px; }

En este caso veis que hemos utilizado dos selectores (span y p) pero se pueden seguir añadiendo los que sean necesarios según el anidamiento de cajas que hayamos programado. El estilo siempre se aplicará al último. En el ejemplo a los párrafos (p).

(Aplicar a todos los elementos con clase textorojo que estén dentro de otro con id #slider, un color de fuente rojo)

#slider .textorojo { color: red; }

Se pueden combinar selectores de todos los tipos, de etiqueta, de clase y de id.

Selectores combinados

No sé si realmente están clasificados así, pero con el nombre de combinados me refiero a otros que utilizan todos los anteriores mezclados y que no son necesariamente descendentes.

(Aplicar a todos los párrafos con clase amplio que estén dentro de otro de un div con clase verde, un margen de 40px)

div.verde p.amplio { margin: 40px; }

Como veis en el ejemplo, el párrafo y el div son descendentes entre sí, pero tanto el div con respecto a su clase y el párrafo con respecto a la suya no lo son. En este último caso no se deja un espacio en blanco entre ambos selectores. Correspondería a esta estructura HTML:

<div class="verde">
<p class="amplio">TEXTO QUE SE VERÁ AFECTADO POR EL SELECTOR</p>
<p>TEXTO QUE NO SE VERÁ AFECTADO</p>
OTRO TEXTO QUE NO SE VERÁ AFECTADO
</div>

Y a medida que vamos complicando esto obtenemos selectores cada vez más potentes para poder hacer operaciones de microcirugía en nuestra plantilla y así lograr alcanzar el elemento que queremos modificar y no otro.

En próximas entradas veremos otro tipo de selectores más avanzados y una manera sencilla de usar jQuery para saltar la limitación CSS de sólo poder ir en sentido descendente.

Sí, es JavaScript, pero no encontré otra manera y por eso dije "saltar" y además nos servirá a los de Blogger para poder personalizar los comentarios del autor del blog dónde no llega el CSS.

Una de efectos tecnológicos

2013-06-01T12:00:00.000+02:00

El efecto Streisand es un fenómeno de Internet en el que un intento de censura u ocultamiento de cierta información fracasa resultando contraproducente para el censor, ya que ésta acaba siendo ampliamente divulgada recibiendo mayor publicidad de la que habría tenido si no se la hubiese pretendido acallar.

El término debe su nombre a un incidente ocurrido en 2003 con la actriz estadounidense Barbra Streisand, que denunció al fotógrafo Kenneth Adelman y la página de fotografías pictopia.com por 50.000.000 dólares, exigiendo que se retirase una foto aérea de su casa de una publicidad que contenía imágenes de la costa de California, alegando su derecho a la privacidad.

Adelman argumentó que se dedicaba a fotografiar las propiedades en primera línea de playa para documentar la erosión de la costa de California. El periódico San Jose Mercury News advirtió poco después que aquella imagen se había hecho popular en Internet. Con su intento de censura, Barbra Streisand consiguió que una información en un primer momento intrascendente acabase obteniendo una gran repercusión mediática.

Caso WikiLeaks

En Diciembre de 2010, el sitio de informes y documentos filtrados con contenido sensible en materia de interés público, WikiLeaks, fue objeto de un ataque DDoS y del bloqueo ISP como represalia por haber hecho una publicación masiva de documentos del Departamento de Estado de los Estados Unidos. La gente simpatizó con WikiLeaks y ofreció masivamente sus servidores para realizar sitios espejo (mirrors, copias) de manera que resultara imposible para nadie conseguir borrar completamente la información de la Red.

Se denomina Efecto Google a la tendencia a olvidar información que se puede encontrar fácilmente en Internet utilizando motores de búsqueda como Google en lugar de esforzarse en recordarlo.

Yo añadiría como segunda denominación la de efecto móvil o celular, según país de origen.

El problema del año 2000, también conocido como efecto 2000, error del milenio, problema informático del año 2000 (PIA2000) o por el numerónimo Y2K, es un bug o error de software causado por la costumbre que habían adoptado los programadores de omitir la centuria en el año para el almacenamiento de fechas (generalmente para economizar memoria), asumiendo que el software sólo funcionaría durante los años cuyos nombres comenzaran con 19. Lo anterior tendría como consecuencia que después del 31 de diciembre de 1999, sería el 1 de enero de 1900 en vez de 1 de enero de 2000.

Al acercarse el año 2000, surgieron muchos rumores de casos y catástrofes económicas en el mundo entero, un pavor generalizado a un eventual colapso de los sistemas basados en computadoras por causa de este problema (como con lo del fin de la era maya, pero más fundado). Las compañías aseguradoras incluso comenzaron a incluir una claúsula especial en todas sus pólizas para indicar la no cobertura del efecto 2000.

La corrección del problema costó miles de millones de dólares en el mundo entero, sin contar otros costes relacionados, pero finalmente no pasó nada... como en parte era previsible.

Se denomina obsolescencia programada u obsolescencia planificada a la determinación, la planificación o programación del fin de la vida útil de un producto o servicio de modo que tras un período de tiempo calculado de antemano por el fabricante o por la empresa de servicios durante la fase de diseño de dicho producto o servicio éste se torne obsoleto, no funcional, inútil o inservible.

Se considera que el origen se remonta a 1932, cuando Bernard London proponía terminar con la gran depresión a través de la obsolescencia planificada y obligada por ley (aunque nunca se llevase a cabo). Sin embargo, el término fue popularizado por primera vez en 1954 por Brooks Stevens, diseñador industrial estadounidense. Stevens tenía previsto dar una charla en una conferencia de publicidad en Minneapolis en 1954. Sin pensarlo mucho, utilizó el término como título para su charla.

Fuente: Wikipedia.

Emergencia Blogger: Recuperar imagen del propio avatar tras borrarlo

2013-05-28T19:00:00.000+02:00

Eso de borrar alguna imagen por accidente nos suele dar más de un disgusto, pero si encima es precisamente la que representa nuestro avatar, pues el cabreo ya es monumental ¿cómo no se va a ver en mis comentarios la imagen de mi avatar si estoy en mi propio blog?

Cuando eso ocurre no os quepa duda que lo sabréis enseguida, pues la señal de dirección prohibida que sale es inconfundible. La tenéis en grande aquí al lado.

El truco (o chapuza) para arreglar esto consiste en hacer una sustitución de imágenes con CSS, algo que aprendí hace muy poquitos días en Kseso CSS y que también sirve para cambiar imágenes en otras circunstancias distintas y no sólo por lo del borrado.

El procedimiento sería el siguiente:

Localizar la URL de la imagen borrada

Primero tenemos que averiguar la dirección de la imagen de nuestro avatar borrado que sigue cargando nuestra plantilla. Esta parte es fácil si tenéis Chrome, ya que sólo habrá que localizar un comentario propio reciente y pinchar sobre la imagen en cuestión (nuestra señal de dirección prohibida) con el botón derecho y accediendo a Inspeccionar elemento enseguida veremos la URL.

Si no disponemos de un inspector de este tipo tendremos que fijarnos en el texto de ese comentario, copiar un segmento significativo y acceder al código fuente. Con él a la vista buscamos ese comentario y lo seguimos hasta el final, dónde encontraremos unos datos etiquetados como timestamp, permalink, author y finalmente avatarUrl. La dirección tras esta última es la que nos interesa.

Si la probáis en el navegador saldrá con la señal de marras, pero esa es la que Blogger va a interpretar siempre que es la nuestra. La copiamos en algún sitio y como en las recetas de cocina, la reservamos para usarla después.

Preparar una nueva imagen

Creamos un nuevo avatar de al menos las mismas dimensiones que use nuestro blog (normalmente 45x45px), alojamos la imagen y conseguimos también la dirección que igualmente reservamos.

Para hacer esto podemos usar directamente Picasa o bien subirla a una entrada en borrador que podemos eliminar sin problemas tras conseguir la URL.

Insertar el CSS

Entre las etiquetas SKIN (lo más abajo posible) o incluso en el Diseñador de plantillas > Avanzado > Añadir CSS, insertamos este segmento de código, sustiyendo URL_BORRADA y URL_NUEVA por esas dos que tenéis guardadas.

.avatar-image-container img[src$="URL_BORRADA"] {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 45px; /* La anchura de la nueva imagen */
height: 45px; /* La altura de la nueva imagen */
padding-left: 45px; /* Igual a la anchura de la nueva imagen */
background: url(URL_NUEVA);
}

En URL_BORRADA ni siquiera hace falta poner la dirección completa, sino sólo el final, pero tened cuidado de que sea una parte significativa para que el navegador no la confunda con otra similar.

Explicación

En teoría tendríamos dos imágenes en el mismo bloque (la de img y la del background) pero la magia la hace ese box-sizing que limita el ancho del contenedor para el avatar a 45px. Al ponerle un padding de esa misma medida y tener prioridad este, el espacio para la imagen original pasa a 0 y esta "desaparece".

Sin embargo el background con la nueva imagen que ocupa precisamente todo el padding se verá perfectamente, simulando la sustitución que pretendíamos. Para más información sobre esto podéis acceder al artículo de Kseso Css.

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:

Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Con overflow:hidden

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Con white-space: nowrap;

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Con overflow: hidden y white-space: nowrap;

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Con overflow: hidden, white-space: nowrap y text-overflow: ellipsis

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Una manera de alinear y centrar los botones sociales

2013-03-17T20:00:00.000+01:00

..o lo que es lo mismo, que estén en perfecto orden de revista.

¿No os traen de cabeza los puñeteros botones sociales? ¿No os aparecen descuadrados cuando los incluimos en nuestra plantilla? Unas veces se van unos píxeles para arriba, otras para abajo, se separan mucho entre ellos o demasiado poco, no hay manera de centrarlos todos a la vez...

Bueno pues si no es así no hace falta que sigáis leyendo, pero a mí me han dado mucha guerra en el pasado y por eso he utilizado el término revista en su acepción más bélica.

Y cómo parece que ya encontré una manera sencilla de que salgan centrados y bastante bien alineados entre ellos, pues lo comparto con vosotros fieles y abnegados suscriptores y lectores de este vuestro blog.

Sí, hoy además de algo académico estoy un poco pelota (ver 12).

La solución más recurrente para esto de los botones es ponerlos con float y santas pascuas y alegrías. Los alineamos a un lado u otro, les añadimos algún que otro padding o margin rectificatorio y listo. También podemos usar tablas, pero eso nos complica un poco la parte HTML, ya de por sí larga por el propio código que genera los botones.

Así que lo solución que encontré se limita a encerrar cada botón en un div personalizado, todo el conjunto en otra caja y luego ya dar estilo desde el CSS, siendo la clave el uso de inline-block para poder alinear correctamente y una anchura adaptada a cada botón con un overflow: hidden para que no salgan algunos letreros que no queremos, como es el del botón +1 de Google Plus y también para que no haya diferentes márgenes entre unos y otros.

Este sería el código completo incluido el que genera los susodichos botones, listo para incorporar en la propia plantilla. Bajo el div con clase post-footer suele ser un buen sitio para ponerlo.

<style>
.redes {
 margin:10px auto 20px;
 text-align:center;
}
.redes .botfac, .redes .bottwi, .redes .botgoo {
 width: 100px;
 overflow:hidden;
 zoom: 1;
 *display: inline;
 display: inline-block;
 vertical-align: top;
}
.redes .botgoo {
 width:60px;
}
</style>

<div class='redes'>
 <!--Facebook-->
 <div class='botfac'>
  <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=20&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px'/>
 </div>
 <!--Twitter -->
 <div class='bottwi'>
  <a class='twitter-share-button' data-count='horizontal' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
 </div>
 <!-- Google +1 -->
 <div class='botgoo'>
  <g:plusone size='medium'/>
 </div>
</div>

Sólo están los tres de las redes más populares, Facebook, Twitter y Google Plus, pero pienso que con el mismo sistema se puede alinear cualquier otro.

Por ejemplo para el de Pinterest, sólo habría que añadir un nuevo selector en la lista del CSS (pongamos .botpint), ajustarlo en anchura (.redes .botpint {width:50px;}) como con el de G+ y luego poner su código de la misma manera:

<!-- Pinterest -->
<div class='botpint'>
 <a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());'><img height='21' src='http://1.bp.blogspot.com/-AikmtHZ_hG8/T10W-xJWozI/AAAAAAAACFw/2Y3UyLvGIPM/s1600/pin%2Bit.gif'/></a>
</div>

Funciona perfectamente hasta IE8 y centrados pero en líneas individuales en IE7, pero es que en este último ni siquiera se interpreta bien el código que genera el botón +1, así que ¿a quién le importa?

CSS básico. Ejemplo con imágenes redondas (y 2)

2013-03-13T19:05:00.000+01:00

Y vamos ya a redondear esta mini serie de entradas.

Decía en el anterior post que esto de hacer imágenes redondas con CSS, sin necesidad de estar editándolas una a una con un programa, es muy sencillo. Pero claro, esto es así si se sabe un poco de ese lenguaje, de lo contrario es poco menos que una m:i2.

Pero como ya hemos visto los conceptos básicos sobre CSS ahora intentaremos aplicarlos con este ejemplo.

De lo que se trata es de subir una imagen de manera normal (HTML) y luego añadir algo en nuestra hoja de estilo que la transformará de manera que la silueta exterior sea un círculo... o al menos una forma redonda. Esto dependerá de las proporciones de la imagen que utilicemos.

Digo que subiremos la imagen, pero también sirve para cualquiera ya subida y que se marque adecuadamente aunque sea a posteriori como veremos. De hecho podremos aplicar este efecto a una imagen en concreto, a todas las de una zona o a todas las del blog. Eso ya dependerá de vuestros gustos.

Marcando el HTML

Evidentemente lo primero que necesitamos para redondear una imagen es una idem. El código puede complicarse lo que sea, pero una imagen se construye con la etiqueta img y tiene básicamente esta pinta:

Así es como logramos que se vea algo como lo de la izquierda. Normalmente debería llevar también un alt con un texto y en ocasiones lleva unas dimensiones forzadas (con width y/o height). Cuando se suben desde el editor de Blogger ese código queda además dentro de un enlace que apunta a la imagen a tamaño original.

Pero si queremos que esa imagen pueda ser configurada desde CSS, necesita incorporar una marca. Esa marca será un selector que crearemos nosotros u otro que ya pudiera llevar previamente. Podemos encontrarlo (o añadirlo) de dos maneras: dentro de la etiqueta img o en la caja padre. Yo lo voy a bautizar como redondo y respectivamente, las dos maneras apuntadas antes serían estas:

La cuestión básica es que para que el intérprete del navegador sepa que esa imagen en concreto tiene que llevar un estilo determinado, evidentemente hay que etiquetarla de alguna manera. Esa etiqueta es sencillamente indicarle que tendrá la clase X, en este caso redondo.

Aplicando estilo a todos los elementos homogéneos

Pero por si sola esa marca no hará nada. Necesita ser relacionada con una regla de estilo que le indique qué hacer con ella. Por mucho que añadamos clases, si estas no están definidas en el CSS, el aspecto de la imagen (o el elemento que sea), no cambiará.

Para cambiar la forma de TODAS las imágenes de nuestro blog, esto sería lo que habría que añadir a nuestro CSS:

img {
border: 2px solid grey;
margin: 0;
padding: 0;
border-radius: 800px;
overflow: hidden;
}

¿Y esto cómo lo traduce nuestro navegador? De la siguiente manera:

Busca imágenes mediante su nombre de etiqueta (img) y aplícale los siguientes formatos

un borde de 2 píxeles, sólido y de color gris (grey)
si tiene márgenes o padding anúlalos y déjalos a cero
el marco de la caja que sea redondo en sus cuatro esquinas
por último, todo lo que sobresalga de ese marco, escóndelo, que no se vea (hidden)

Bueno pues ahora que tenemos esa regla en nuestra hoja de estilo sí que ya se verán TODAS las imágenes como queríamos, como en el ejemplo de la derecha.

Para declarar una propiedad correctamente tenemos que conocer qué hace y cómo se ha de redactar y eso lo podréis encontrar en muchos sitios, aunque la autoridad en esto es W3C.

Por ejemplo border-radius necesita en un principio 4 valores que leídos de izquierda a derecha representarían la curvatura de las esquinas superior-izquierda, superior-derecha, inferior-derecha e inferior-izquierda. Si se pone un sólo valor se sobrentiende que los cuatro serán iguales a ese.

También convendría conocer que cuando el valor de la curva supera las dimensiones de la caja, la curva se adapta a esta formando un círculo. Si pongo 800px es para pasarme de largo con cualquier imagen de tamaño "normal" en un blog y que no se quede ovalada si me quedo corto con el radio.

Evidentemente la tarea para casa es ir aprendiendo todas las propiedades que existen y su sintaxis, cosa que es imposible desarrollar en un par de posts.

Aplicando estilo a todos los elementos del mismo bloque

Pero seguramente no queramos que todas las imágenes del blog sean redondas, sino sólo las que nosotros queramos, porque de otra manera hasta la cabecera tendrá esta forma. Antes hemos usado una etiqueta html (img) y no un selector y por ese motivo el estilo afectará a todas las imágenes.

Para evitarlo podemos hacer una de las cosas que vimos al principio y que era meter la imagen dentro de un div con la clase redondo. De esa manera sólo las imágenes que estuvieran dentro de una caja con esa clase se verán afectadas por la regla que las hará redondas.

Pero la regla entonces no debería atacar a la etiqueta img directamente, sino al selector redondo. En ese caso habría que redactarla así:

.redondo img {
border: 2px solid grey;

etc...

Y la traducción sería algo así como aplicar el estilo sólo a las imágenes que estén dentro de una caja con clase redondo.

La ventaja de esto es que en muchas ocasiones no tendremos que crear ningún selector ex-profeso para modificar algo. Por ejemplo, en Blogger todas las imágenes del cuerpo principal para el contenido de las entradas ya están dentro de una caja que por lo general se llama post o post-body.

Así, si el selector que usamos es .post-body img, sólo las imágenes dentro del bloque de entradas se verán afectadas por el estilo que programemos con la ventaja de que no tendremos necesidad de crear un nuevo selector. Esto será normalmente lo que más utilicemos.

Aplicando estilo a un solo elemento

Lo último que me queda ya por explicar es cómo modificar el estilo de un solo elemento (una sola imagen siguiendo el ejemplo). Esto se hace añadiendo inline la clase por nosotros preparada y es lo que avanzamos al principio del post.

Pero como antes, el selector a utilizar no sería exactamente igual a los utilizados hasta ahora, sino...

img.redondo {
border: 2px solid grey;
margin: 0;
padding: 0;
etc...

...lo que se interpreta cómo busca sólo las etiquetas img que tengan la clase redondo.

Epílogo

Para cerrar el tema secundario de lo de redondear imágenes, tenéis que tener en cuenta que si estas no son cuadradas, en lugar de salir con forma circular os aparecerán como óvalos.

Para solucionarlo se deberá incluir en la regla que vimos un width y un height con idéntica medida (valor en píxeles) para forzar el recorte de la imagen y que esta aparezca perfectamente circular.

Y sobre el tema principal (hojas de estilo), esto que en principio era sólo para explicar lo de las imágenes redondas se ha convertido casi sin querer en un mini-cutre-cursillo-express de CSS bastante deficiente y según escribía me daba cuenta de que me quedaban muchas cosas por explicar o desarrollar. Pero sinceramente no me veo capaz de realizar un buen manual sobre este tema y pienso que aún así, esto le podrá venir bien a alguien para hacer entendible lo que muchas veces se reduce a copiar y pegar, así que... ¡ahí queda!