Iconos: Color y oscuridad

Koloria
	Contiene 165 íconos de varios tamaños, en formato PNG. descargar

Pixeden dark social
	Contiene 129 íconos de 32x32, y 64x64, en formato PNG. descargar

¿Google no funciona? Cargar una librería alterna

Cargar las librerías desde los repositorios de Google usando las Google AJAX Library API es algo que se ha generalizado a tal punto que incluso los sitios "más grandes" utilizan ese método, transfiriéndoles a ellos la responsabilidad de mantener el sistema funcionando.

Pero ¿qué pasaría si un dia dejan de funcionar?

Seguramente, sería el pre-anuncio de un apocalipsis o algo por el estilo pero, de todos modos, en net.tutsplus.com nos muestran una alternativa que permitiría cargar un archivo alterno alojado en otro servidor y que deberíamos tener como respaldo ante eventuales catástrofes. En el caso de jQuery, sería algo así:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="URL_ARCHIVO"><\/script>')</script>

Dudo mucho que tal cosa sea necesaria pero ... por las dudas ...

Jugando con el botón de Pinterest

Una de las modas de estos nuevos tiempos es el uso de redes sociales, pseudo-sociales y todos esos sitios donde se comparten cosas. Algunos son exitosos porque "los usuarios los usan" y otros pasan al olvido rápidamente; hacia donde vamos o cuál será el modelo de internet que tendremos en unos años vaya uno a saber, por ahora seguimos caminando, probando y viendo de que se trata todo esto.

Uno de esos servicios que se está imponiendo es Pinterest y el botoncito para compartir ya se ve en muchos sitios.

Colocarlo es sencillo, se hace del mismo modo que con cualquiera de ellos, copiando y pegando el código que ofrecen y listo, funcionará sin problemas aunque , para mi gusto, es muy lento.

La forma de aplicarlo a Blogger la pueden ver en dos artículos escritos por Oloman donde se explica detalladamente su uso y las variantes que pueden elegirse: Pinterest, botón que se ve y funciona y Otras opciones para instalar el botón de Pinterest.

Ahora bien, para jugar un poco, me puse a ver si era posible hacer lo mismo pero de modo más específico, es decir, ver si podía agregarse ese botón a determinadas cosas y no a los posts en general; por ejemplo, adosar ese botón sólo en ciertas imágenes que uno quisiera que fueran compartidas y para ello, recurro a jQuery porque no se me ocurre nada más fácil.

El resultado, será algo como esto:

¿Cómo se identifica qué imagen quiero compartir y cuál no? Simplemente, le agrego una clase a la etqiueta IMG que, en este caso, será class="pin":

<img class="pin" src="URL_IMAGEN" />

Obviamente, lo primero que debo hacer es colocar el script del servicio que va al final de la plantilla, antes de </body>:

<script src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/>

Y para que esto funcione, el botón también lo voy a crear con JavaScript cuyo código colocaré antes de </head> o antes del script anterior.

Los datos que debemos enviar son tres:

url es la drección desde donde se envía es decir, nuestra página
media es la dirección de la imagen
description es un texto alternativo

Quiero enviarle esos tres datos y además, que al hacer click en el botón, no se abra la página de Pinterest en otra pestaña sino en una ventana tipo pop-up así que armo algo como esto:

<script type='text/javascript'>
//<![CDATA[

// esto evitará que el enlace se abra en otra pestaña
$(document).on('click', '.pin-it-button', function(e){
  e.preventDefault();
})

// esto hará que el enlace se abra en una ventanita de tipo pop-up
$(document).on('click', '.pinimg', function(e){
  var url = $(this).attr('rel');
  window.open(url,"pinshare","toolbar=0,status=0,width=620,height=320");
})

// y cuando se cargue la página
$(document).ready(function(){

  // buscaremos todas las imágenes de los posts que tengan la clase "pin"
  $('.post-body img.pin').each(function() {

    // con estos datos vamos a armar la dirección url que debe enviarse a Pinterest
    var post = location.href; // la dirección de nuestra página
    var src = $(this).attr('src'); // la imagen a compartir
    var texto = document.title; // la descripción será el título de la página
    if($(this).attr('alt')) {
      // y si colocamos el atributo alt en la imagen, allí podríamos mostrar un texto especial; si existe, lo usamos
      texto = $(this).attr('alt') + " : via MIBLOG";
    }

    // verifico si la imagen flota
    var cssflotar = $(this).css('float');

    // y creamos el botón con esos datos 
    var boton ="<a count-layout='none' class='pin-it-button' href='#'><img title='Pin It' src='//assets.pinterest.com/images/PinExt.png' class='pinimg' rel='http://pinterest.com/pin/create/button/?url="+post+"&amp;media="+src+"&amp;description="+texto+"' /></a>";
    // la etiqueta A tiene un href vacio justamente para evitar que se abra
    // el dato a enviar está en el atributo rel de la etiqueta IMG

    // rodeamos nuestra imagen con una etiqueta SPAN
    $(this).wrap('<span class="pinwrap"></span>');
    // que tiene la misma propiedad flaot que la imagen
    $(this).parent().css('float',cssflotar);
    // y le adosamos el botón 
    $(this).after(boton);
    // y si tiene, le sacamos la flotación a la imagen
    $(this).css('float','none');
  })

})

//]]>
</script>

Un poco de CSS para que el botón se superponga a la imagen y pueda aplicarse a cualquier imagen, centrada o flotante:

<style>
  .pinwrap {
    display: inline-block;
    position: relative;
  }
  .pin-it-button{
    bottom: 10px;left: 10px;
    position: absolute;
  }
</style>

Y terminamos.

Acá abajo, la imagen de la derecha puede compartirse y la de la izquierda no:

Varios métodos para diferenciar los enlaces

En CSS, un selector es un vínculo entre el HTML y la hoja de estilo. Todas las etiquetas son selectores y cada uno de ellas posee un conjunto de propiedades generales y particulares. Pero como esto es insuficiente, también existen selectores especiales que nos permiten crear reglas muy específicas.

leer artículo actualizado

Y un dia ... Google se comió al mundo

¿Será un error temporal o el hambre del gigante crece de tal manera que quiere que todos seamos parte de su merienda?

Este mensaje aparece cuando uno entra a Blogger utilizando Opera, sin importar si es la última versión o no. Efectivamente, puede "ignorarse" pero volverá a aparecer una y otra vez.

Tal vez, estadísticamente no sea algo que afecte a muchos usuarios pero, las estadísticas sólo son numeritos abstractos a menos que se coloquen en cierto contexto. Es verdad, los usuarios que usan este navegador son porcentualmente pocos pero hablamos de un universo con cientos de millones de usuarios así que aún un porcentaje pequeño implica DECENAS DE MILLONES de personas.

Y la clave de todo el asunto es responder la pregunta inicial ¿se trata de un error o tendremos que terminar usando sólo lo que a ellos se les ocurra? ¿Empezarán a aparecer cartelitos similares en el resto de los navegadores?

La verdad, no me sorprendería, Google ya lo hace con otros servicios como YouTube y es una costumbre bastante arraigada en muchos otros sitios, incluyendo blogs que muestran mensajes diciendo que está optimizado para tal o cual navegador y que sólo se verá bien en esos así que si uno es de esos tontos que no los usa ... ¿qué?

¿Qué queremos decir cuando ponemos un mensaje de ese tipo? ¿Que no eres bienvenido? ¿Que eres un tonto? ¿Que nosotros "sabemos" y tu eres un ignorante que has elegido usar un navegador "obsoleto"? ¿Que si uso Chrome soy cool? ¿Que lo que yo hago está perfecto y todos los demás están equivocados?

Hay cartelitos de todo tipo, la mayoría son "sutiles" pero hay otro que son casi burlones ¿Será necesario hacer eso?

Yo creo que no, de ninguna manera.

La esencia de este mundo es el OTRO. El OTRO no es otra cosa que UNO MISMO visto desde otro lado. La diversidad es básica para la evolución de cualquier cosa; los gustos son subjetivos y no discutibles. Si el sitio no se ve razonablemente bien en un navegador específico, la responsabilidad es mía. Si puedo o quiero resolver el asunto es un tema distinto; obviamente, no habrá forma de complacer a todos pero habrá que intentarlo o por lo menos, ser consciente de esas limitaciones.

Si un sitio no funciona correctamente en un navegador standard, más que un cartelito diciendo que cambies, debería haber un cartelito pidiendo disculpas. Es una simple cuestión de respeto.

REFERENCIAS:Planeta Botch

Blogs, webs: Todo depende

Todos los scripts se deben colocar antes de </head>
NO, no es cierto

Todos los scripts se deben colocar antes de </body>
NO, no es cierto

Entonces ¿dónde demonios se colocan TODOS los scripts?
La respuesta es la más fácil y la más difícil: DEPENDE

¿De qué depende? De lo que hagan, de cómo funcionen, de cada caso particular.

UFA!!! Ahí se acabó la sencillez del diseño web

¿No es que era fácil? Ahora, resulta que ¿DEBO APRENDER PENSAR SABER LEER?

Lo lamento, si creyeron en la publicidad de los distintos servicios que ofrecen el oro y el moro me temo que deberán re-plantearse las cosas porque aún no se ha inventado el botón donde hacer click-click-click y solucionar TODOS los problemas en un abrir y cerrar de ojos.

Hace años que me repito lo mismo y si alguna vez lo escribí, fue de puro atrevido: el diseño web y sobre todo, los blogs, no son ni arte ni técnica: son artesanías. Ahora, sigo siendo un atrevido pero esa intuición prematura se ha vuelto una convicción. Todo esto que hacemos se arma a fuerza de empeño, de pruebas y errores; son una mezcla singular de instinto y pura casualidad. El resultado final, jamás es idéntico, todo depende de muchas cosas. Copio y pego algo y todo está OK, lo hago otra vez y no funciona ¿por qué? No hay una respuesta única, obviamente, algo es distinto, no sabemos qué y eso es lo que hay que buscar y para buscar eso hay que ... aprender, pensar y rogar que nos demos cuenta.

¿Eso significa que esto es algo reservado sólo para ciertos "talentoso"? NOOOOOOO en absoluto pero, si está reservado para quienes son pacientes, perseverantes, curiosos y algo atrevidos.

Atreverse es intentar sabiendo de antemano que todo puede fallar. Si no se está dispuesto a perder es mejor no apostar. Hay que tomar recaudos, hay que guardar backups, hay que marcar un límite, hasta acá llegué, hasta ahora todo está bien pero quiero seguir adelante: OK, guardo, marco, señalo, recuerdo de tal forma de poder retroceder y empezar otra vez. Porque empezar otra vez será inevitable. No pasará hoy, no pasará mañana pero alguna vez ocurrirá, sin la menor duda.

Hay que aprender a decir "esto me supera". Por lo menos, por ahora, con lo que sé, con lo que aprendí, no puedo hacer más; tal vez en un tiempo le encuentre la vuelta o descubra que no era tan complicado como me parecía y pueda volver a intentarlo. Eso no es resignación, eso no es abandonar, eso es saber que tenemos limitaciones y descubrir esas limitaciones es lo que nos permite superarlas.

Que alguien pueda hacer algo y yo no pueda no me califica; no me hace ser menos y obviamente, lo inverso tampoco es cierto.

Los blogs son un TODO DEPENDE permanente y esa es la única regla que existe.

El selector universal

En CSS, un selector es un vínculo entre el HTML y la hoja de estilo. Todas las etiquetas son selectores y cada uno de ellas posee un conjunto de propiedades generales y particulares. Pero como esto es insuficiente, también existen selectores especiales que nos permiten crear reglas muy específicas.

leer artículo actualizado