Más variantes del efecto :hover

En dabblet.com hay ejemplos con muchas de las posibles opciones que tiene el efecto hover sobre los enlaces de texto; la mayoría de ellas son comunes

Entre ellas, hay dos que me parecieron interesantes. La primera sólo es apta para espíritus alocados, se trata de agregar un color de fondo multicolor:

<style>
a.colorido:hover { 
  color: #FFF;
  padding=0 5px;
  background-image: -moz-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
  background-image: -webkit-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79); 
  background-image: -ms-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79); 
  background-image: -o-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
}
</style>

<a class="colorido" href="#">el enlace</a>

este es un un enlace muy colorido

La segunda, utliza los llamados selectores condicionales para mostrar la dirección URL del enlace cuando nos ponemos sobre él:

<style>
a.selector:hover:after {
  content: " [" attr(href) "] ";
  color: LightBlue;
  font-size: 11px;
}
</style>

<a class="selector" href="http://vagabundia.blogspot.com/">el enlace</a>

este otro muestra la URL de referencia

Y sobre esta última, podemos general variaciones; por ejemplo, en lugar de mostrar el contenido del atributo href, podríamos mostrar cualquier otro (title, rel, etc) y con CSS, transformar eso en alguna clase tooltip rápida:

<style>
  a.informacion {position: relative;}
  a.informacion:hover:after {
    background-color: CornflowerBlue;
    border-radius: 5px;
    color: #FFF;
    content: attr(rel);
    font-size: 12px;
    left: 2em;
    padding: 2px 10px;
    position: absolute;
    top: -1.5em;
    white-space: pre;
  }
</style>

<a class="informacion" href="#" rel="información detallada">el enlace</a>

y este enlace muestra cualquier otro texto adicional

Redirecciones en Blogger y el traductor de Google

Hace unos dias, Jorge A. Verón Schenone planteaba un problema que se relacionaba con el nuevo sistema de re-direcciones de Blogger que adosa el prefijo del país de quien visita nuestros sitios en al URL y que, en principio, somos muchos lo que intentamos solucionarlo con un script que haga exactamente lo contrario.

El problema se generaba cuando se usaba el traductor de Google, ya sea porque lo tenemos en algún enlace de nuestras páginas o ingresando directamente en ese servicio. En cualquier caso, el sistema enloquecía y el resultado era nulo.

Lo que se me ocurrió como solución temporal es filtrar esas direcciones, es decir, si se entra via el traductor, no ejecutar el script de re-direcciones y para eso, el código quedaría de esta manera:

<script type='text/javascript'>
//<![CDATA[
  (function(){
    var esTRADUCIR = top.location.href.indexOf("://translate.googleusercontent.com/translate_c");
    if(esTRADUCIR!=-1){
       // SE QUIERE TRADUCIR LA PAGINA Y NO HAGO NADA
    } else {
      if( document.URL.match(/\.blogspot\.(com\...\/|..\/)/) ){
        var URL = document.URL
        URL = URL.replace(URL.match(/\.blogspot\.(com\...\/|..\/)/)[0],".blogspot.com\/ncr\/")
        document.location = URL
      }
    }
  })()
//]]>
</script>

Obviamente, es una solución precaria porque mis conocimientos sobre el asunto son menos que escasos así que si alguien ( Emilio Cobos ) tiene una idea de cómo hacerlo de modo más "elegante" será bienvenida.

El nuevo botón share de Google+

Google ha creado un nuevo botón que puede agregarse a cualquier página web y que, en lugar de marcar entradas con un +1, permite compartir esa entrada en Google Plus.

Para utilizarlo, basta ingresar a la página de los desarrolladores, seleccionar el tipo, tamaño y lenguaje y, eventualmente, alguna de las opciones avanzadas.

Por defecto, el código que nos dará es algo así:

<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share"></div>

<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'es', parsetags: 'onload'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Pero, si ya tenemos agregado el script con el botón de Google +1, el script es innecesario por lo tanto, basta colocar el botón de este modo, allí donde quisiéramos que se viera:

<div class="g-plus" data-action="share"></div>

o usar este otro código:

<g:plus action="share"></g:plus>

En cualquier caso, podemos eliminar el texto Compartir esto en Google+ que se muestra a la derecha, estableciendo el ancho máximo:

<g:plus action='share' width='85'></g:plus>

La dirección URL a compartir será la de la página donde se encuentre el botón; en el caso de colocarlo en el home, donde hay varias entradas y querer que cada una de ellas se pueda compartir individualmente, debemos colocarlo en alguna parte dentro del post-footer, indicando la dirección de este modo:

<g:plus action='share' expr:href='data:post.url' width='85'></g:plus >

El futuro y la propiedad @supports

Así como hace más de dos años, se mostraba el uso de una propiedad de CSS3 llamada @media que permite especificar las propiedades que tendrá nuestro sitio según sea el medio en el cual se mostrará y hoy se va generalizado a partir de la intención de muchos desarrolladores de tener diseños adaptables; esta otra, llamada @supports, es probable que pronto se convierta en una de esas cosas imprescindibles.

Por ahora, su uso práctico es limitado o nulo ya que sólo está soportado por Opera 12 y Firefox 17 e incluso en este último, sólo funciona si se coloca en TRUE el valor layout.css.supports-rule.enable en la configuración del navegador (about:config) pero, se espera que pronto sea algo corriente y Chrome dice que lo implementará a partir de la versión 24.

¿Para qué serviría esto? Para algo que el CSS aun es incapaz de manejar, detectar el navegador que se está utilizando de tal forma de poder condicionar el uso de determinadas reglas o propiedades.

La sintaxis sería.

@supports una_condición {
  /* y aquí las reglas de estilo si la condición se cumple */
}

Por ejemplo, supongamos que quiero que una etiqueta tenga una animación que use @keyframes sólo si estas son soportadas y, caso contrario que no se vean:

#mi_animacion {display:none;} /* por defecto no lo muestro */
@supports (animation-name: un_ejemplo) {
  /* y sólo se verá si el navegador soporta animaciones */
  @keyframes un_ejemplo  {
    from {background-color:#000;border: 0px solid #444;} 
    to {background-color:#F00;border: 15px solid #FF0;}
  }
  #mi_animacion {
    display:block;}
    animation: un_ejemplo 1s infinite alternate;
  }
}

En ese caso, sólo hay una condición pero puede haber varias y combinarse con OR y AND:

@supports (animation-name: un_ejemplo) or (-webkit-animation-name: un_ejemplo) {
  /* las reglas se aplicarían en cualquiera de los dos casos */
}

@supports (animation-name: un_ejemplo) and (box-shadow: 1px 1px 5px #FFF) {
  /* las reglas se aplicarían si ambas propiedades son reconocidas por el navegador */
}

O incluso, puede usarse el NOT para hacer lo contrario:

@supports not (display: flexbox) {
  /* estas reglas se aplicarían si la propeidad no es reconocida por el navegador */
}

Si bien la condición debe tener un valor, este puede ser cualquiera y no es necesario que se utilice en las reglas de la condición así que, por ejemplo, esto sería válido (inútil pero válido):

@supports (background: red) {
  body {background: white;}
}

Sí, ya sé, no tiene utilidad pero ... el tiempo pasa volando.

TWITTER APLICACION

Twitter Follow Box es un plugin para jQuery que nos permite agregar un gadget de Twitter que copia el estilo del plugin Lilke Box de Facebook. Es fácil de integrar a cualquier sitio y posee varias opciones que permiten adaptarlo a nuestros gustos personales.

Descargamos el ZIP que ofrecen en al página de los desarrolladores y allí nos encontraremos con cuatro archivos:

followbox.css son las reglas de estilo; podemos copiar su contenido y agregarlo en la plantilla o un elemento elemento HTML colocándolo entre etiquetas <style> y </style>; obviamente, podemos modificarlo aunque así como está, funcionará perfectamente

jquery.followbox.js es el plugin en si mismo, podemos usar ese archivo o su versión minimizada llamada jquery.followbox.min.js; cualquier a de ellos, lo alojamos en un servidor externo o lo agregamos antes de </head>, copiando y pegando el contenido del archivo:

<script type='text/javascript'>
//<![CDATA[
  ... acá pegamos el contenido del archivo ...
//]]>
</script>

Por último, deberíamos cambiar la URL de un pequeño ícono que se utiliza en el gadget; la imagen llamada icon_twitter.png que alojamos donde nos plazca y luego, buscamos esto en el script:

var d="followbox/icon_twitter.png";

y lo cambiamos por la dirección URL de nuestra imagen.

var d="http://mi_imagen.png";

Con eso, ya estamos listos para mostrarlo donde se nos ocurra. Por ejemplo, si agregamos un elemento HTML en la sidear, allí, escribimos lo siguiente:

<div id="MIfollowbox"></div>
<script>
  $('#MIfollowbox').followbox({
    'user' : 'NOMBRE_USUARIO'
  });
</script>

Y eso es todo. Es un DIV vacío, al que le damos un ID único (en este ejemplo lo llamo MIfollowbox) y la llamada a función donde sólo es necesario colocar nuestro nombre de usuario en Twitter.

Como decía, una serie de opciones extras permiten configurar algunos detalles:

width es el ancho en pixeles
height es el alto en pixeles
border_color el color del borde
bg_color el color del fondo
bg_image una imagen de fondo optativa
title_color el color del texto del título
total_count_color el color indicando la cantidad de seguidores
follower_name_color el color de los enlaces a los seguidores
theme permite seleccionar un estilo global; puede ser light, dark o custom

Todas ellas son optativas y se agregan en el mismo script, separándolas con comas:

$('#MIfollowbox').followbox({
  'user' : 'NOMBRE_USUARIO',
  'theme' : 'dark'
});

Hablando de márgenes

Muchas propiedades CSS requieren que se agreguen unidades de medida para indicarle al navegador qué es lo que que queremos que haga; anchos, altos, separaciones, márgenes, etc, etc, etc. Esas unidades, deben ser agregadas inmediatamente después del valor y sin espacios intermedios.

Hasta acá, no habría problemas más allá de algún posible error de sintaxis pero, como hay distintas unidades, esa diferencia suele generar dudas o generar problemas aparentes que se resuelven sólo de un modo: entendiendo qué significan.

Básicamente, en al web, encontraremos que se usan tres tipos de unidades: px, em y %. Aunque de tanto en tanto nos encontraremos con alguna otra, estas son las más utilizadas y cada una de ellas tiene su uso específico, ninguna es mejor o peor en abstracto, todo depende de lo que queramos hacer.

px es una unidad sencilla de comprender, son pixeles; depende de la resolución de la pantalla del monitor; si dimensionamos algo en pixeles y le ponemos un margen expresado en pixeles, la distancia entre los bordes del contenedor y ese elemento, será exactamente ese valor y es fácil de verificar cuando se captura la pantalla y se mide en algún editor de imágenes:

Suponiendo que tengo un contenedor de 500 de ancho y un contenido de 200x100:

.contenedor {width:500px;}
.MIcontenido {height:100px;width:200px;}

<div class="contenedor">
  <div class="MIcontenido"> </div>
</div>

si le agrego margin:20px a MIcontenido, el rectángulo (en este caso con un color de fondo celeste), se separá esa distancia del borde superior y del borde izquierdo:

también lo hará esa distancia del borde derecho pero, como allí no hay nada, no será evidente. Por eso, siempre es mejor indicar los márgenes con cierta exactitud, poniendo el valor cero cuando no son necesarios; en este caso, le pondría cero al margen derecho:

margin: 20px 0 20px, 20px,

Pixeles, entonces, es una unidad "evidente", fácil de visualizar y "constante".

em, en cambio, es una unidad completamente distinta ya que es una unidad relativa que depende del tamaño de la fuente del texto; dicen los expertos que 1em es, aproximadamente, igual al ancho de la letra M del tipo de fuente que se esté usando.

Que sea "relativa" tiene sus ventajas y desventajas. Si en mi ejemplo, establezco un margen expresado como em: margin: 1em; la separación de mi contenido, dependerá del tamaño de la fuente del texto ¿de cuál? del definido para ese contenido y si no existe, del definido para el contenedor y si tampoco existe, se sigue buscando hasta encontrar alguna fuente; eventualmente, si no hay ninguna, se usará la fuente por defecto del navegador.

Con una fuente Arial de 16px:

Con una fuente Georgia de 32px:

Noten que no hace falta que haya un texto, lo que define la separación es la propeidad font aunque no la estemos usando. Eso nos puede llevar a confundirnos porque, supongamos dos imagenes flotando una al lado de la otra y separadas por un margen expresado en unidades em; todo esta bien ya que la fuente del texto definida cuando lo armé, era una y lo que vi, me pareció correcto:

pero, un día se me ocurre cambiarla, poner una más grande y entonces ... zas, la segunda imagen se va para abajo:

Obviamente, deberé cambiar el margen así que, en general, no conviene usar este tipo de unidades salvo que estemos creando algo que deba adaptarse al texto.

Hay una tercera unidad que puede ser usada y que también es relativa; el porcentaje; por ejemplo:

margin: 10%;

Como es un porcentaje, también depende de algo, en este caso, el ancho/alto del contenedor lo que hace que su uso sea aún más restringido::

Los comentarios de Google+ en cualquier página

Por si a alguien le interesa, esto acaba de ser publicado en Google Operating System

Se trata de agregar los comentarios de Google+ a cualquier página de modo independiente.No es algo oficial así que ... prudencia:

<script src="https://apis.google.com/js/plusone.js"></script>
<div class="g-comments"
    data-href="url"
    data-width="642"
    data-first_party_property="BLOGGER"
    data-view_type="FILTERED_POSTMOD">
</div>

donde debe reemplazarse url por la dirección de la página.

En el caso de un blog, esa url es dinámica, varia y en Blogger sería algo así siempre y cuando el script se coloque dentro del includable post de manera similar a como se hace con otros plugins de redes sociales:

data-href="'<data:post.url/>'"

y, eventualmente, imagino que si se coloca en cualquier otra parte, podría usarse esto:

data-href=location.href;

El valor 642 de data-width es el ancho y deberán probar qué pasa si se cambia porque yo no pienso hacerlo.

A diferencia del sistema que propone Blogger, esto no sincroniza los comentarios sino que funcionan de manera independiente, algo similar a lo que se puede hacer con los comentarios de Facebook.

Social Media Icons (3)

Social Media Buttons
	Contiene 15 íconos de 260x45, en formato PNG. descargar

Social Media by designsidea
	Contiene 24 íconos de 32x32 y 48x48 en formato PNG. descargar

Hand drawn Marc G
	Contiene 30 íconos de tamaños diversos, en formato PNG. descargar

jQuery 2.0: IE8 y cómo resolver problemas

Hace pocos meses, comentaba sobre las actualizaciones de la librería jQuery y de los recaudos que había que tomar si los implementábamos. Ahora, que ya está disponible la versión 2, todo lo dicho en ese momento sigue siendo válido pero, le debemos agregar un punto extra: la nueva librería NO es compatible con las versiones de Internet Explrorer anteriores a la 9.

Esto, no significa que funcionará mal significa que directamente: NO FUNCIONARÁ en IE8 por ejemplo porque los desarrolladores han dejado de dar soporte a ese navegador, ahorrando, de este modo, decenas de líneas de código.

¿Qué debemos tener en cuenta si es que utilizamos esta librería?

Primero que nada, sólo necesitamos una; es muy común ver que se cargan varias versiones porque se copian los códigos tal como se muestran en las páginas de ejemplo sin tener en cuenta que, cualquier cosa que agreguemos o querramos probar, debe pasar por el filtro del sentido común y tratar de entender qué estamos haciendo.

Por otro lado, si bien es fácil agregar la librería con algo así:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

Esto, cargará siempre la última versión con lo cual, ciertas cosas que antes funcionaban, pueden dejar de funcionar.

La nueva versión ya está disponible en los repositorios de Google así que podemos usarla cambiando el número:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js' type='text/javascript'/>

Ahora bien ¿Y que hacemos con IE8? Recuerden que jQuery 2 no funcionará en ese navegador.

Una alternativa es aprovecharse de los condicionales que inventó Microsoft para lidiar con estas cosas. Hay varios sitios que hablan sobre l tema e incluso el mismo blog de jQuery propone una alternativa pero, es completamente errónea así que, acá está la solución tal como define Impresive Webs y que funciona de manera correcta aunque el código parezca un poco absurdo.

<!--[if lt IE 9]>
  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>
<![endif]-->

<!--[if (gte IE 9) | (!IE)]><!-->  
  <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js' type='text/javascript'/>
<!--<![endif]--> 

Lo que hará eso es cargar la versión 1.9.1. en Internet Explorer 8 o inferior y la versión 2 en cualquier otro navegador.

Si quieren verificarlo, el código está colocado tal cual en este mismo blog.

CSS Arrow please

CSS Arrow please nos ayuda a crear flechas con distintos estilos y nos da las reglas necesarias para copiarlas y aplicarlas a nuestras páginas web.

Basta entrar al sitio y seleccionar las distintas opciones que terminarán generando algo similar a esto:

.arrow_box {
  position: relative;
  background: #88b7d5;
  border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
  left: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.arrow_box:after {
  border-left-color: #88b7d5;
  border-width: 30px;
  top: 50%;
  margin-top: -30px;
}
.arrow_box:before {
  border-left-color: #c2e1f5;
  border-width: 36px;
  top: 50%;
  margin-top: -36px;
}

Colocando eso en una etiqueta STYLE, luego, podemos usar la clase de este modo:

<div class="arrow_box"> abcde </div>

abcde

A partir de allí, nada impide modificarla, establecer su ancho, el tipo de fuente, cambiar los colores o las distintas propiedades para adaptarla a nuestras necesidades y gustos personales:

ejemplo
ejemplo
ejemplo
ejemplo

Todo es cuestión de probar y de entender el funcionamiento de los pseudo-elementos :after y :before:

Curabitur aliquam sem ut risus auctor auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

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.

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 ...

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:

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.

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

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

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.

leer artículo actualizado

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

Divagaciones a la hora del naufragio

La gente, en su inmensa mayoría, lo único que pretende de internet es pasarla bien; se contenta con leer y mandar mails, con mirar algún video en YouTube; con charlar un rato con alguien que también está interesado en esas otras cosas que conforman la vida ordinaria de todos los días.

Son muchos los que hoy se olvidan de eso que es tan pero tan pequeñito.

Los geeks de hoy ya no juegan como antes, ahora, sólo compran juguetes ... juguetes caros.

Es una pena porque en ese camino, todos hemos perdido un poco; ellos nos desprecian o nos miran con piedad y se nos acercan para dar consejos inaplicables; y nosotros porque ya no tenemos referencias en las cuales apoyarnos para aprender. Si consultamos por un problema de Windows, nos dicen que instalemos Linux; si preguntamos por qué tal cosa no nos funciona en Internet Explorer, se ríen y nos responden que cambiemos de navegador. Usan Twitter porque allí esta la "gente linda"; odian Facebook porque allí sólo hay "gente común"; usan Chrome porque es cool; si se les nombra MySpace, les da úlcera; Microsoft es basura monopólica pero las Mac son geniales; usan WordPress pero sus sitios parecen haberse creado con una máquina de hacer chorizos y no se les cae una idea original ni aunque se los de vuelta y se los sacuda. Critican y encima, nos hablan de técnicas para atraer visitantes en cinco rápidas lecciones.

Cuando yo era chiquito chiquito chiquito, los geeks no existían. Lo que había entonces eran cerebritos, tragalibros, gente parecida al Profesor Chiflado de Jerry Lewis. No eran los pulcros o los chupamedias de las maestras, eran todo lo contrario; eran los que sabían cosas casi sin proponérselo y lo cierto es que sus vidas no eran sencillas. Eran los que elegíamos para jugar porque no había más remedio, los que jamás eran invitados a una fiesta, los primeros en tener acné y los últimos en besar a una chica.

Que nadie crea que hablo de un complot pero, mientras crecían en medio de la humillación, no me cabe duda que iban tejiendo su venganza y esta no tardó en llegar porque un día, el mundo se transformó de la noche a la mañana y la tecnología nos invadió. Entonces ellos se rieron de nosotros que empezamos a tocar botones equivocados, a no saber nada de play y stop, a volvernos locos programando una videocasetera o a comprar una computadora personal que sólo podíamos utilizar para jugar al Tetris y terminaba arrumbada en el fondo de un placard o transformada en un florero exótico.

Ellos sabían lo que venía y nosotros no. Nosotros soñábamos con los Supersónicos pero a decir verdad, no éramos mucho más que Pedro Picapiedra.

Eran esos que podían abrir una radio con una moneda, transformarla en un televisor y les sobraban piezas. Hablo de los geeks en serio y no de los que van a hacer cola a la cuatro de la mañana para comprarse un I-Phone. Hablo de los que apenas podían soñar con tener un computador de última generación pero que se manejaban perfectamente con un cacharro atado con alambre porque la diversión estaba en el desafío de la escasez.

En algún momento y esto no fue hace mucho, las cosas cambiaron. Las palabras dejaron de tener el mismo significado y hoy definimos como geek a ese que escribe sobre navegadores que no usa nadie, sobre sistemas operativos que jamás oímos nombrar, alguien que nos cuenta lo que ve en una publicidad, alguien que cree que sabe porque tiene cosas.

Los geeks de antes estaban apartados de la gente porque la gente los rechazaba; los geeks de ahora están apartados de la gente porque la subestiman y es así que basta que un servicio se haga popular para que el antiguo dios se transforme en el nuevo demonio.

Hoy es este, mañana aquel. Modas pasajeras a la velocidad de la luz.

¿Habrá por ahí alguien que sepa hacia donde va el futuro? ¿Será que el futuro es el regreso a la web contemplativa? Esta era de hiper-comunicación ¿nos comunica?

Tal vez, hubo un tiempo en que la humanidad era feliz porque estábamos tan lejos los unos de los otros que, cuando nos encontrábamos, siempre había algo que contar y, sobre todo, ganas de escuchar.

Hoy, hay muchas voces y demasiado silencio.