Thursday, April 18, 2019

Comentarios, Google+, blogs y el final de una era

Seguramente, todos han recibido el mail de Blogger anunciando la integración de los comentarios de Google+ en Blogger; algo que permite sincronizar los comentarios entre ambos servicios. Los detalles (en inglés) y en español.

Dicen: "Este mensaje se ha enviado a porque nos indicaste que querías recibir avisos sobre las funciones nuevas de Blogger."

Pero, si en casi siete años, esta es la primera vez que envían un mail ... uno se pone a pensar ¡pucha!, se ve que este asuntito es algo que REALMENTE les interesa ¿A quién? ¿a mi? no, a Google.


Para algunos, es un sueño hecho realidad, para otros, entre quienes me incluyo, es la confirmación de eso que uno viene suponiendo hace tiempo: que Blogger terminará siento integrado, absorbido o deglutido por Google+ ya que estamos en tiempos de redes sociales

Los blogs fueron la explosión de la participación activa pero, al parecer, ahora, cuando ya no nos quedan muchas palabras, le llegó el turno al micro-blogging y a las redes sociales, ese "cruce entre patio andaluz con sus cotilleos y foro romano" o "una fuente de información para poder crear un medio o apoyar uno ya existe".


Todo el mundo ama a Google ... hasta que es demasiado grande. Demasiado poder para alguien aunque sea un angelito sin malas intenciones.

Llegó Google+ y algunos se enamoraron, a otros les resulta indiferente. Si es bueno, si es malo, si es lindo, si es feo, si es mejor o peor que otro servicio carece de importancia. Habrá quien lo use para esto y otro para aquello. Habrá quién lo use mucho y habrá quien lo use menos. Cada cual atenderá su juego como pueda.

Pero que nadie se olvide que no hay monopolios buenos y monopolios malos. Todos son malos. El gran imperio de la web tiene muchos pretendientes al trono y la verdad, como soy un simple mortal, andar levantando tal o cual bandera para que otro se llene los bolsillos me parece una tremenda estupidez.

Distopía: utopía perversa donde la realidad transcurre en términos opuestos a los de una sociedad ideal, es decir, en una sociedad opresiva, totalitaria o indeseable. El término fue acuñado como antónimo de utopía y se usa principalmente para hacer referencia a una sociedad ficticia frecuentemente emplazada en el futuro cercano en donde las tendencias sociales se llevan a extremos apocalípticos.

Seguir a alguien no es estar junto a alguien, es ir detrás.

Creo que la idea de la web es otra: es ir juntos y no en fila india. Creo que la idea de la web es ir para cualquier lado y encontrarse con otros en el camino, sin tratar de venderles nada.

Tuesday, April 16, 2019

Librerías: ¿Si? ¿No? ¿Cuál? ¿Por qué? Socorro!!!

Las librerías de JavaScript son un gran invento pero, no son otra cosa que herramientas, tan útiles o inútiles como cualquier otra. Ninguna de ellas es una solución universal, uno las puede agregar fácilmente pero debemos estar conscientes de lo que eso significa.

Primero que nada, hay que saber que no son elementos neutros. Una vez que decidimos usar una, la carga del sitio se incrementará, a veces de manera sustancial, ya que son archivos de cierto volumen, muchos de los cuales requieren de otros agregados es decir, de otros archivos que también se cargan; el caso típico es Prototype que suele ser combinado con Scriptaculous, bulider.js, effects.js, dragdrop.js, controls.js, slider.js y sound.js; todo eso suma unos 60/70KB; la versión no minimizada de jQuery pesa más o menos lo mismo pero, ninguna de ellas se compara con las decenas de scripts que se agregan de manera automática en Blogger o el peso que tienen los distintos servicios: botones de compartir, estadísticas, etc, etc.

En definitiva, según mi opinión, utilizar o no utilizar librerías no es una decisión que deba tomarse pensando en tiempos de carga o por lo menos, ese no es el elemento fundamental a tener en cuenta.

Obviamente, mientras seamos conscientes de las cosas, cualquier decisión es aceptable pero, mi experiencia personal me dice que las librerías tienen sentido sólo si vamos a usarlas de verdad; es decir, si vamos a sacarles provecho porque en eso reside su utilidad. Si sólo las agregamos para usar un efecto eventual, su utilidad se reduce; no es que esté mal pero entendamos que, de alguna manera, es un desperdicio.

Definir la librería a usar también implica una limitación básica; de ahí en más, estaremos "atados" a esa librería; si vamos a agregar alguna otra cosa, deberemos verificar que sea compatible.

Es muy usual que pregunten por que no anda algo y al mirar, uno ve que el sitio usa jQuery y quiere usar un plugin para Prototype o viceversa. Tiene que quedar claro que por lo general, las librerías de este tipo son incompatibles entre si, o usamos una o usamos otra y, si bien hay alguna posibilidad de usar dos o más juntas, esto no es conveniente de ninguna manera ya que sólo estaremos duplicando funciones, incrementando la carga del blog sin beneficio alguno y abriendo la puerta a conflictos que a veces no tienen solución. No vale la pena, lo que puede hacerse con una, seguramente puede hacerse con otra.

Y ese es problema ... si bien, lo que puede hacerse con una también puede hacerse con otra, no siempre es sencillo encontrar la respuesta porque a menos que sepamos cómo funcionan y nosotros mismos creemos nuestros propios scripts, encontrar las respuestas en la web puede ser una tarea imposible.

En un tiempo, no hace mucho, la mayoría de ellas tenían una difusión pareja y los desarrolladores las usaban de manera indistinta y según sus gustos personales pero, eso ha cambiado y la decantación propia de estas cosas ha transformado a jQuery en la nueva vedette hasta, casi casi, convertirla en una especie de standard que usan muchos sitios e incluso las grandes empresas, desde Google hasta Facebook. Por lo tanto, será más fácil encontrar información sobre esta librería que sobre cualquier otra lo cual no significa que sea obligatoria ni que sea la mejor.


En la web hay una tendencia a canonizar herramientas (navegadores, sistemas operativos, software, redes sociales) y las librerías no están exentas de esa plaga bastante ridícula. "El martillo es lo mejor y quien no lo usa es un tonto" ... cambien martillo por una marca cualquiera y verán de lo que hablo.

El problema de estas dicotomías es que quien pondera el martillo probablemente, sólo conoce el martillo y por lo tanto, cree que es una herramienta universal, única e irreemplazable, cosa que, cualquiera con dos dedos de frente sabe que es falso. Nada es mejor o peor en abstracto y la mayoría de estas cosas que insisto, sólo son herramientas, es buena o mala porque carecen de moral. Simplemente, me gustan o no me gustan, me resultan útiles o no y punto.

Es más ... me resultan útiles hoy ... ¿pero mañana?

Entonces, ¿si usaba una librería y ahora quiero cambiarla?

Ahhhh buena pregunta ...

Monday, April 15, 2019

El plugin Recommendations Bar para Facebook

Recommendations bar es un nuevo plugin social de Facebook que se encuentra en estado beta es decir, podemos usarlo pero aún está en desarrollo y puede tener algún tipo de problema eventual o sufrir algún cambio en el futuro. Por ahora, aparentemente, sólo será visible para desarrolladores.

En principio, lo que hace es establecer nuevos métodos para permitir que los usuarios compartan artículos en sus perfiles.

El plugin se adosa siempre a la parte inferior página, quedado fijo a derecha o izquierda y apenas se carga, se colapsa para transformarse en un botón con el texto Me Gusta o Recomendar y un ícono extra que permite expandirlo:

Recommendations Bar para Facebook

Por defecto, veremos un enlace diciendo Social Reading is Off; si hacemos click en él, se abrirá la típica ventana de Facebook solicitando autorización para que el plugin interactue con nuestra cuenta. De ahí en más, el usuario sólo deberá hacer click en Recomendar para que la entrada sea publicada en su perfil de Facebook.

Recommendations Bar para Facebook
Recommendations Bar para Facebook

Es importante aclarar que nuestra plantilla debe incluir la etiqueta META correspondiente porque sino, no funcionará:
<meta property="og:type" content="article"/>
El plugin se agrega como cualquier otro usando código XFMBL así que debemos tener esto inmediatamente después de <body>
<div id="fb-root"></div>
<script>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1&appId=APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
Con eso, ya podemos agregar la etiqueta correspondiente de modo simple:
<fb:recommendations-bar action='recommend' />
o incluyendo opciones como la URL del sitio:
<fb:recommendations-bar action='recommend' site='http://vagabundia.blogspot.com/'/>
Cuando vemos la página de los desarroladores, uno de los datos que podemos modificar es URL of the article pero, desconozco a que hace referencia y por l oque probé, no parece necesario ya que toma siempre la direccion de la página donde estemos.

Hay otros parámetros configurables:

Trigger indica la forma en que se lanzará el plugin, por defecto dice onvisible y puede seleccionare un valor (X%) o manual
Verb to display es el texto a mostrar (Recomendar o Me Gusta)
Side es left o right, la posición donde se mostrará
Domain es el dominio de nuestro blog

Tambien hablan de read_time, ref, num_recommendations y max_age que no son muy claras pero, con las que se agregan por defecto es más que suficiente para la mayoría de los sitios.

¿Y donde poner esto en la plantilla? En cualquier parte porque siempre se mostrará fijo en al parte inferior; probablemente, lo mejor es condicionarlo para que sólo funcione en las entradas individuales:
<b:if cond='data:blog.pageType == "item"'>
<fb:recommendations-bar action='recommend' site='http://vagabundia.blogspot.com/'/>
</b:if>
No es el el único plugin en modo beta, en este momento también hay otro llamado Add to timeline pero, no puedo decir nada de él porque me ha resultado confuso de entender su funcionamiento y para qué sirve

jFontSize: Manejar el tamaño de los textos

Hay muchos scripts que hacen lo mismo que jFontSize pero este es bastante simple ya que usa la librería jQuery.

En general, no creo que sea algo demasiado útil ya que hacer zoom es algo que cualquier navegador admite de modo nativo pero, aún así, muchos sitios lo utilizan así que no hay nada de malo en tenerlo como opción. La idea es facilitar la generación de botones que permitan aumentar o disminuir el tamaño de las fuentes de los textos.

El script es muy pequeño y puede descargarse desde la web del desarrollador aunque lo que ahí nos ofrecen no admiten las opciones que posee el plugin (es raro pero es así) entonces, lo mejor, es descargar el zip con los scripts y los ejemplos. Allí, en la carpeta JS, veremos el archivo que necesitamos: jquery.jfontsize-1.0.js

Una vez agregado a nuestro sitio, antes de </head> deberíamos establecer las reglas de estilo de esos botones. En este caso, puse lo siguiente pero, puede ser cualquier otra cosa:
<style>
.jfontsize-button {
background-color: #EEE;
border-radius: 4px;
box-shadow: 0 0 0.2em #888 inset;
color: #000;
cursor: pointer;
display: inline-block;
font-family: Arial;
font-size: 13px;
font-weight: bold;
margin: 0 1px;
opacity: 0.8;
padding: 0.3em 0;
text-align: center;
text-decoration: none;
width: 2em;
}
.jfontsize-button:hover {
opacity: 1;
}
.jfontsize-disabled, .jfontsize-disabled:hover {
opacity: .5;
pointer-events: none;
}
<style>
Y de manera genérica, lo ejecutamos de este modo:
$(document).ready(function() {
$('#nombreID').jfontsize();
// o bien esto otro si queremos hacer referencia a la clase
$('.nombreCLASE').jfontsize();
})
Donde nombreID o nombreCLASE deben indicar la etiqueta sobre la que funcionará, teneindo en cuenta que esa etiqueta debe tener una regla de estilo con un tamaño de fuente ya sea específico o heredada de su contenedor. Por ejemplo, si quisiéramos aplicarlo a todas las entradas de este blog, debería usar algo así:
$('.post-body').jfontsize();
ya que los textos se encuentran en un DIV con esa clase sin embargo, si dentro de esa etiqueta, hay otras que especifican un tamaño, estas no se verán afectadas; veamos un ejemplo concreto:
<div id="demojfontsize">
<div style="text-align:right;">
<a id="jf1-b1" class="jfontsize-button" href="#">A-</a>
<a id="jf1-b2" class="jfontsize-button" href="#">A</a>
<a id="jf1-b3" class="jfontsize-button" href="#">A+</a>
</div>
... un texto cualquiera ...
<span style="color:#FF0; font-family:cursive; font-size:20px;">otra fuente y otro tamaño</span>
... un texto cualquiera ...
</div>
si el script lo ejecutamos así:
$('#demojfontsize').jfontsize({
btnMinusClasseId: '#jf1-b1',
btnDefaultClasseId: '#jf1-b2',
btnPlusClasseId: '#jf1-b3'
});

Los botones A- y A+ aumentarán o disminuirán el tamaño del texto y el botón A central restaurará el tamaño a su valor original pero, nada de eso afectaría el span de color amarillo ya que en la etiqueta, el tamaño del texto es explícito porque se encuentra en un atributo style o está definido en alguna otra regla.

La cantidad de clicks sobre los botones es infinita así que llegará un momento en que el tamaño sea gigantesco o no se vea nada. Eso es algo que podemos controlar con las opciones:

btnMinusMaxHits es un valor (por defecto 10) que establece la cantidad de veces que puede decrementarse el tamaño
btnPlusMaxHits es un valor (por defecto 10) que establece la cantidad de veces que puede incrementarse el tamaño
sizeChange es un valor que establece cuanto aumenta o disminuye y por defecto es 1y está expresado en pixeles

Si el script dijera esto:
$('#demojfontsize2').jfontsize({
btnMinusClasseId: '#jf2-b1',
btnDefaultClasseId: '#jf2-b2',
btnPlusClasseId: '#jf2-b3',
btnMinusMaxHits: 5,
btnPlusMaxHits: 5,
sizeChange: 1
});
Habría un máximo de cinco clicks disponibles y al llegar a ese límite, el botón se deshabilitaría.


Para usarlo en distintas etiquetas de la misma página, debemos indicar al script, el ID o la clase de los botones que es lo que hacemos con estas opciones:

btnMinusClasseId es el ID o clase del botón decrementar
btnDeafultClasseId es el ID o clase del botón incrementar
btnPlusClasseId es el ID o clase del botón restaurar

Thursday, April 11, 2019

Codigos QR en colores

¿Se puede generar un código QR que no sea blanco y negro? Eso propone la herramienta de unitag.

¿Servirá? ¿Será legible? Ni idea pero, crearlo es fácil, hay que entrar en el sitio y comenzar a definir los parámetros; el tipo de dato a agregar (un texto, una dirección web o de email, etc); luego, lo diseñamos seleccionando colores, sombras, tamaño y calidad. Finalmente, descargamos la imagen en formato PNG y ya podemos agregarla a cualquier página.

Recomiendan usar contrastes de color importantes y obviar opciones como "agregar logo" ya que de lo contrario, no funcionará. Para quien esté interesado, todos esos detalles son explicados en una página de ayuda del mismo sitio.


REFERENCIAS:labnol.org

Wednesday, April 10, 2019

Crear plugins para las entradas: insertar videos

Si solemos insertar videos en nuestro sitio y hacemos esto con regularidad, es bastante fácil crear una función que genere el código de modo estandarizado para evitarnos la tediosa tarea de copiar y pegar una y otra vez.

Tuesday, April 9, 2019

Mejoras en el editor de plantillas de Blogger

El editor de plantillas de Blogger ahora incluye una serie de modificaciones que parecen interesantes y lo hacen bastante más amigable de lo que era.

Si entramos en Plantilla y hacemos click en Editar HTML, se nos mostrará el código mucho más organizado, con las líneas numeradas y las palabras claves de CSS, HTML y JavaScript, coloreadas, diferenciando propiedades, valores y etiquetas.


Arriba, una serie de botones nos permiten usar opciones extras.

Ir al widget es un menú desplegable conde se listan los gadgets o widgets que hayamos agregado y basta un click sobre los nombres para posicionarnos en el código que, como siempre, se verá contraído pero podremos desplegar individualmente con el icono que se mostrará a la izquierda.

Vista previa de la plantilla, la mostrará allí mismo y no en una nueva ventana, Basta hacer click otra vez en Editar Plantilla para regresar al código.

Por último, Plantilla de formato re-ordena el código, agregando indentación de forma automática.

Como siempre, debemos usar el botón Guardar para que los cambios sean efectivos o bien Revertir cambios.

REFERENCIAS:buzz.blogger.com