Tuesday, April 2, 2019

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.

Wednesday, March 27, 2019

Entradas con estilos variables segun la etiqueta

Para establecer estilos diferenciados en cierto tipo de páginas, en Blogger podemos usar los códigos condicionales ya que todo aquello que se encuentre dentro de esa condición, sólo se ejecutará si esta se cumple. Por ejemplo, si quisiéramos que el color de fondo del blog fuera rojo cuando se muestra una página estática, pondríamos algo así:
<b:if cond='data:blog.pageType != &:quot;static_page&:quot;'>
<style>
body {background-color:red;}
</style>
</b:if>
Pero hay cierto tipo de páginas un poco más complejas de diferenciar ya que no hay condiciones exactas. Por ejemplo, las páginas de etiquetas que son de tipo index al igual que muchos otros tipo de páginas incluyendo el home.

Una alternativa para reconocer este tipo de páginas es usar los selectores condicionales de CSS que nos permiten detectar el contenido de cualquier atributo que tenga una etiqueta y, de ese modo, definir reglas de estilo especiales para ellas.

¿Un poco confuso? En realidad es bastante simple. Supongamos que los enlaces de nuestro sitio son de color verde:
a {color:green:}
y quisiéramos que aquellos tienen el atributo target="_blank" fueran de color amarillo; agregaríamos lo siguiente, con o sin la palabra !important:
a[target="_blank"] { {color: yellow !important;}
¿Y si quisiéramos algo más genérico como diferenciar el color de los enlaces internos de los enlaces externos? En ese caso podríamos usar el atributo href que es el que contiene la dirección url y un "comodín" (el caracter asterisco) para que la regla se aplique a cualquier enlace que contenga parte de nuestra dirección. En el caso de este blog, podría ser algo así:
a[href*="vagabundia.blogspot.com"] { {color: yellow !important;}
la sintaxis en general es:
[atributo*="dato"]
Donde el comodín hace que se aplique a cualquier atributo cuyo contenido contenga el dato total o parcialmente.

Entonces, para establecer reglas de estilo diferentes en ciertas páginas como las etiquetas, podríamos utilizar este sistema pero debemos tener algo en donde mirar, debe haber alguna etiqueta que tenga algún atributo que podamos leer y actuar en consecuencia.

Se me ocurre que lo más sencillo es colocarlo en la etiqueta body que normalmente dice esto:
<body>
o esto:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
o cualquier cosa similar, no tiene importancia, basta que allí agreguemos un atributo extra como rel y la url de la página que obtenemos de los datos del mismo Blogger:
<body expr:rel='data:blog.canonicalUrl' .......
Hecho eso, nada cambiará así que ahora crearemos las reglas que se nos ocurran ya que sabemos que ese atributo contendrá algo así cuando estemos en una página de etiquetas:
rel="http://miblog.com/search/label/nombre_etiqueta"
Suponiendo que quisiera que las páginas de etiquetas Google de este blog tuvieran un color de fondo rojo, la regla sería:
body[rel*="label/Google"] {background: red;}
Y si quisiera cambiar el título de los posts:
body[rel*="label/Google"] .post-title { ....... acá las propiedades ....... }
y el header:
body[rel*="label/Google"]  #header-wrapper { ....... acá las propiedades ....... }
Aplicando after y before también podemos agregar "contenido".

Si pusiera esta regla, cuando se abre una página de etiquetas Google, se vería una imagen a la derecha del header:
body[rel*="label/Google"] #header-wrapper {position: relative;}
body[rel*="label/Google"] #header-wrapper:after {
content: url(url_imagen);
position: absolute;
right: 20rpx;
top: 20px;
}
En resumen, a partir del primer selector, puedo acceder a cualquier etiqueta, id o clase interna y definir reglas exactas que se apliquen en ciertas condiciones.

Obviamente, alguien preguntará si podríamos hacer lo mismo para diferenciar los posts según su etiqueta y ahí las cosas se complican porque, hasta donde sé, no hay ningún dato al que podamos acceder para conocer la etiqueta de una entrada hasta que esta es cargada en el includable post lo que significa que cualquier cambio que hagamos podría tardar en verse ya que puede haber otras partes de nuestra página que se mostrarían antes y si estas tardan, primero se mostrará el estilo general y luego el modificado.

El segundo problema es que allí podemos leer las etiquetas del post pero esto se debe hacer en un bucle y usar JavaScript para agregar el dato extra que necesitamos (el nombre de la etiqueta).

Entonces, haremos eso, buscaremos:
<b:includable id='post' var='post'>
y veremos que la siguiente linea dice algo como esto o similar:
<div class='post hentry uncustomized-post-template'>
Debajo, pondremos lo siguiente:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<script type='text/javascript'>
var postetiqueta=&#39;<data:label.name/>&#39;;
</script>
</b:if>
</b:loop>

<!-- con eso, tenemos el nombre de la última etiqueta (si es que el post tiene varias) guardada en una variable -->

<script type='text/javascript'>
// agregamos el atributo rel con el nombre en la etiqueta body
document.body.setAttribute(&#39;rel&#39;,postetiqueta);
</script>

</b:if>
Y si usamos jQuery podemos reemplazar document.body.setAttribute() por:
$(&#39;body&#39;).attr(&#39;rel&#39;,postetiqueta);
De acá en más, en las páginas individuales, la etiqueta body tendrá un atributo rel cuyo valor es el nombre de la etiqueta de la entrada así que, con un criterio similar al comentado inicialmente, podemos usar selectores y definir estilos particulares para esas entradas aunque, en este caso, no necesitamos el comodín.

En este ejemplo algunas de sus reglas son estas:
<style>
body[rel="rojo"] #header-wrapper {display: none;}
body[rel="rojo"] #sidebar-wrapper {display: none;}
body[rel="rojo"] #main-wrapper {width: 100%;}
body[rel="rojo"] {background: #800;}
body[rel="rojo"] .post-title a { ....... propiedades ....... }
body[rel="rojo"] .post-body { ....... propiedades ....... }
</style>
Lo mismo ocurre con otra entrada; simplemente, cambian las reglas:
body[rel="azul"] {background: #79B;}

Sunday, March 24, 2019

Servicios para agregar imágenes temporales

¿Imágenes falsas? ¿Para qué? Son útiles a la hora de probar cosas, nos evitan tener que subir alguna o re-dimensionarlas y están siempre listas.

Hay muchos sitios que brindan ese servicio. fakeimg nos permite definir su tamaño (ancho y alto), el color de fondo y del texto así como su contenido. Son todas opciones que se agregan de manera sencilla:
<img src="http://fakeimg.pl/200/" /> será una imagen cuadrada de 200x200
<img src="http://fakeimg.pl/300x200/" /> será una imagen rectangular de 300x200
<img src="http://fakeimg.pl/300x200/ffff00/" /> será una imagen rectangular de 300x200 con fondo amarillo
<img src="http://fakeimg.pl/300x200/ffff00/000" /> será una imagen rectangular de 300x200 con fondo amarillo y texto en negro
<img src="http://fakeimg.pl/300x200/?text=Hola" /> así establecemos el texto a mostrar
<img src="http://fakeimg.pl/300x200/?text=Hola&font=museo" /> y de este modo podemos indicar una fuente par el texto (lobster, bebas, museo)

Pero hay más alternativas. Tanto Dummy Image como placehold son similares en cuanto a opciones:
<img src="http://placehold.it/300x200" />
<img src="http://dummyimage.com/300x200" />

PlaceKitten excepto que lo que nos mostrará son imágenes de gatos definiendo su ancho y alto:
<img src="http://placekitten.com/300/200" />

y para que nadie se queje, Placedog lo hará mostrando imágenes de perros; si usamos Placeape serán monos y Placebear nos dará osos:
<img src="http://placedog.com/300/200" />
<img src="http://placeape.com/300/200" />
<img src="http://placebear.com/400/200" />

Si no se quieren animales, los hambrientos pueden usar Bacon Mockup y mostrar imágenes de comida.

Si se quieren calaveras (hay para todos los gustos, se puede usar PlaceSkull:
<img src="http://baconmockup.com/300/200" />
<img src="http://placeskull.com/300/200/" />

Y si nada nos convence, está Lorempixel que genera imágenes aleatorias con opciones diversas:
<img src="http://lorempixel.com/300/200/" /> es una imagen de 300x200
<img src="http://lorempixel.com/g/300/200" /> es una imagen en tonos de gris
<img src="http://lorempixel.com/300/200/sports" /> muestra una imagen de cierta categoría (abstract, animals, city, food, night, life, fashion, people, nature, sports, technics, transport)

Hay muchas opciones más y el sitio posee una herramienta que nos permite generar el código.

REFERENCIAS:paulund.co.uk

Wednesday, March 20, 2019

Efecto hover desde distintas direcciones

Aunque me ha costado armarlo para que funcionara acá porque hay cosas que no termino de entender bien, la idea de crear efectos hover que muestren contenidos distintos según sea la dirección desde la cual se entra con el cursor, no deja de ser interesante.

Lo básico es empezar con el HTML que no es otra cosa que un DIV donde incluimos cuatro etiquetas SPAN con los textos y una imagen.
<div class=multi-hover>
<span>hover desde la derecha</span>
<span>hover desde arriba</span>
<span>hover desde la izquierda</span>
<span>hover desde abajo</span>
<img src="https://lh5.googleusercontent.com/-RAUoNEersrc/UGt18u6HXyI/AAAAAAAACwo/QWa2I1zG7Y0/s400/24_0144.jpg">
</div>
Si se usa en una entrada de Blogger, habrá que tener en cuenta que todo debe ser escrito en una sola línea para evitar los saltos (etiquetas BR) que se agregan por defecto.

El resultado sería esto:

hover desde la derechahover desde arribahover desde la izquierdahover desde abajo

Y el CSS:
<style>

/* el contenedor y la imagen */
div.multi-hover {
overflow: hidden;
position: relative;
vertical-align: middle;
width: 100%;
/* tuve que establecer la altura para que los textos se centraran verticalmente */
height: 358px;
line-height: 358px;
}
div.multi-hover img {width: 100%;}

/* los textos que, por defecto, permanecerán ocultos */
div.multi-hover span {
color: #FFF;
font-size: 32px;
height: 100%;
opacity: 0;
position: absolute;
text-align: center;
transition: all 0.3s linear 0s; /* agregar los prefijos para cada navegador */
width: 100%;
}

/* y esto es lo que generará el efecto */

div.multi-hover span:nth-child(1) { /* desde la derecha */
background: none repeat scroll 0 0 rgba(216, 38, 38, 0.6);
left: 90%;
top: 0;
}
div.multi-hover span:nth-child(2) { /* desde arriba */
background: none repeat scroll 0 0 rgba(127, 216, 38, 0.6);
left: 0;
top: -80%;
}
div.multi-hover span:nth-child(3) { /* desde la izquierda */
background: none repeat scroll 0 0 rgba(38, 216, 216, 0.6);
left: -90%;
top: 0;
}
div.multi-hover span:nth-child(4) { /* desde abajo */
background: none repeat scroll 0 0 rgba(127, 38, 216, 0.6);
left: 0;
top: 80%;
}

/* los hacemos visibles ... */
div.multi-hover span:hover {opacity: 1;}

/* ... moviéndolos horizontalmente ... */
div.multi-hover span:nth-child(2n+1):hover {left: 0;}
/* ... o verticalmente ... */
div.multi-hover span:nth-child(2n):hover {top: 0;}

</style>
Para probar si los valors que colocamos son correctos, lo que conviene es poner opacity: 1; en la regla div.multi-hover span {} y ver el resultado. En este caso, debería verse algo así:


Al dejarlos "visibles", podemos ver como los SPAN se superponen un poco en la imagen que es, justamente, la forma en que serán detectados por el hover. De ese modo, una vez que los hayamos ubicado, tenemos listo el efecto y podemos ocultarlos definitivamente.

REFERENCIAS:demosthenes.info

Tuesday, March 12, 2019

Ultimos comentarios con avatares

Una variante para mostrar los últimos comentarios nos permitiría agregar la imagen con el avatar de cada comentarista.

Siguiendo el mismo criterio del script que se muestra en esta entrada y que no no hace otra cosa que leer los feeds utilizando Json, nos encontramos con que Blogger nos envía un dato que identifica al autor: entry.author y, un dato que es un array que leemos mediante entry.author[0]

Allí, se guardan cuatro valores:

entry.author[0].email.$t no nos sirve para nada ya que siempre dice "noreply@blogger.com"
entry.author[0].name.$t es el nombre del comentarista
entry.author[0].uri.$t es la dirección url del perfil
entry.author[0].gd$image son los datos de la imagen que se estableció en el perfil de Blogger

Esta última tiene un dato que es el importante:

entry.author[0].gd$image.src es la dirección url de la imagen agregada al perfil

y otros que no tienen uso práctico:

entry.author[0].gd$image.rel
entry.author[0].gd$image.width
entry.author[0].gd$image.height

Esto, quiere decir que podemos acceder a esa imagen y mostrarla siempre que exista aunque hay una serie de detalles a tener en cuenta.

Primero, el tamaño de la imagen. Lo que allí se guarda es la imagen original que hayamos utilizado y puede tener diversos tamaños (hay algunas enormes) por lo tanto, deberíamos tratar de usar una miniatura y así, agilizar la carga. Si la imagen está alojada en Blogger como la mayoría de ellas, esto se resuelve con cierta facilidad cambiando la url ya que el servicio nos provee de miniaturas diversas; si la imagen ha sido alojada en otro servidor, no tenemos otro remedio que cargar la original y re-dimensionarla con CSS.

El segundo problema lo generan los perfiles que no tienen una imagen o estas no son accesibles; en ese caso, también usaremos CSS para colocar una por defecto.

El script sería algo así y debería estar agregado antes de </head>:
<script type='text/javascript'>//<![CDATA[

var comsA_cantidad = 10; // definimos la cantidad de comentarios a ser mostrados
var comsA_longitud = 60; // definimos la longitud máxima de esos comentarios
var comsA_dimension = "/s16-c/"; // y establecemos el tamaño de esos avatares (en este caso 16x16)

var comsA_pattern1 = /\/s\d*\//;
var comsA_pattern2 = /\/s\d*-c\//;

function showrecentcomments_avatar(json) {
var entry, comulr, comcontent, comavatar, profile_img, elancho, salida;

// el bucle que leerá los comentarios
for (var i=0; i < comsA_cantidad; i++) {
entry = json.feed.entry[i]; // leo y guardo el dato
if (i==json.feed.entry.length)break; // si no hay suficientes, termino

// busco la dirección URL de comentarios
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
comulr=entry.link[k].href;
break;
}
}

// busco el comentario en si mismo
if ("content" in entry){
comcontent = entry.content.$t;
} else if("summary" in entry) {
comcontent = entry.summary.$t;
} else {
comcontent = "";
}
// lo transformo en texto puro y si es necesario, lo corto para que no supere el largo máximo
var re=/<\S[^>]*>/g;
comcontent=comcontent.replace(re,"");
if (comcontent.length>comsA_longitud) {
comcontent = comcontent.substring(0,comsA_longitud) + " &#133;";
}

// esta es la parte nueva, que define la imagen del avatar a utilizar
var profile_img = entry.author[0].gd$image.src; // la imagen del perfil de Blogger

// hay algunas imágenes alojadas en googleusercontent.com que no tienen el protocolo http asi que se lo agregamos
if (!/^http:/.test(profile_img)) {
profile_img = "http:" + profile_img;
}

// buscamos /sxxx/ o /sxxx-c/ en la url de la imagen que indica su tamaño
elancho = profile_img.match(comsA_pattern1) || profile_img.match(comsA_pattern2);
// y si encontramos eso, lo cambiamos por /s16-c/ que es lo que definí previamente
comavatar = profile_img.replace(elancho, comsA_dimension);

// listo, como ya tengo todos los datos, armo el HTML a mostrar
salida = "<li>";
salida += "<img src='"+comavatar+"' />";
salida += "<span>" + entry.author[0].name.$t + "</span>";
salida += "<a target='_blank' rel='nofollow' href='" + comulr + "'>" + comcontent +"</a>";
salida += "</li>";

// y finalmente, lo escribo
document.write(salida );
}
}

//]]>
</script>
¿Cómo uso esto? Agrego un elemento HTML donde quiera mostrarlo (la sidebar, por ejemplo) y allí, coloco la lista y la función donde sólo debo establecer la url de mi blog:
<ul id="ultimosComentariosAvatar">
<script src="http://nombreblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments_avatar"></script>
</ul>
El resto es cosa de CSS:
#ultimosComentariosAvatar { /* este el rectángulo contenedor (la etiqueta UL) */
list-style-type:none;
}
#ultimosComentariosAvatar li { /* cada item de la lista */
/* voy a usar una imagen por defecto como fondo por si el perfil no tiene una */
background: transparent url(http://img2.blogblog.com/img/b16-rounded.gif) no-repeat left 5px;
border-bottom: 1px dotted #234;
font-family: Tahoma;
font-size: 12px;
padding: 5px 0 5px 20px;
position: relative;
}
#ultimosComentariosAvatar li span { /* el nombre del autor */
color: #BCD;
font-weight: bold;
padding-left: 5px;
}
#ultimosComentariosAvatar li:hover {background-color: #171E27;}

/* el contendio es un enlace al comentario en si mismo */
#ultimosComentariosAvatar a, #ultimosComentariosAvatar a:link, #ultimosComentariosAvatar a:visited {
color: #BBB;
display: block;
font-weight: normal;
padding-left: 5px;
}

/* la imagen la posiciono para tapar el fondo por defecto y la fuerzo a dimensionarse */
#ultimosComentariosAvatar li img {
height: 16px;
left: 0;
position: absolute;
top: 5px;
width: 16px;
}

Sunday, March 10, 2019

blockquote o citas sencillas con CSS3

La etiqueta blockquote es esa que se suele utilizar para mostrar citas textuales y diferenciarlas del resto de los textos de una página y, a veces, se combina con una segunda etiqueta llamada cite que es una referencia al autor o al origen de dicha cita.

Ambas, tienen propiedades por defecto en cualquier navegador pero hay cientos de formas de personalizarlas agregándoles estilos; esta es una forma muy sencilla de hacerlo, utilizando las ventajas del CSS3.

Vestibulum a lectus libero, congue ultricies metus. Curabitur nisi dolor, tristique vel lacinia vitae, mattis sed risus. Morbi dignissim feugiat nulla vel vulputate. Ut scelerisque semper eros, vitae vestibulum nibh bibendum ac. Proin eget imperdiet nulla. Nulla hendrerit augue non sapien vestibulum id feugiat massa adipiscing? Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Vivamus ut nisi ante. Phasellus eget odio vel nulla ullamcorper lobortis quis sed nulla. Fusce varius erat non quam tincidunt blandit. Sed venenatis; purus quis hendrerit iaculis, ipsum ante lobortis est, at suscipit erat mi non ipsum. Nunc dictum congue sapien, laoreet tempus augue pharetra a. Morbi enim risus, placerat eget vulputate ac, venenatis vel mi. In venenatis sodales lectus! Quisque a massa a velit blandit ultrices.
el nombre del autor

<style>
blockquote.purocss {
color: #888;
font-family: Georgia,serif;
font-size: 18px;
font-style: italic;
line-height: 1.3;
margin: 20px auto;
padding: 0.25em 40px;
position: relative;
width: 500px;
}
blockquote.purocss:before {
color: #CCC;
content: "\201C";
display: block;
font-size: 80px;
left: -5px;
position: absolute;
top: -15px;
}
blockquote.purocss cite {
color: #CCC;
display: block;
font-size: 18px;
margin-top: 15px;
text-align: right;
}
blockquote.purocss cite:before {
content: "\2014 \2009";
}
</style>

<blockquote class="purocss">
....... el texto .......
<cite>el nombre del autor</cite>
</blockquote>