Surtido publicitario

PageGlimpse es un servicio que nos permite generar miniaturas de páginas web y mostrarlas en nuestro sitio, sin necesidad de crearlas previamente, utilizando sólo etiquetas HTML o JavaScript.

Implementar esto es extremadamente sencillo. Primero que nada, debemos crear una cuenta gratuita, enseguida nos enviarán un correo a través del cual nos informarán cuál es nuestra clave (una serie de números y letras).

Para utilizar el servicio, en 925html.com han creado una librería de apenas 4KB que nos permite manejar estas miniaturas pero, en realidad, si miramos la documentación del API de PageGlimpse, nos daremos cuenta que no hace falta todo eso y que todo se reduce a crear una URL o un enlace con los parámetros correctos.

Una función muy interesante que nos ofrecen es que, si la miniatura no existe, ellos la generarán en menos de 24 horas.

¿Cómo creamos esa URL? Lo mínimo que debemos escribir es algo así:

http://images.pageglimpse.com/v1/thumbnails?url=http://XXXXXXXXXX&devkey=XXXXXXXXXX

La base es:

http://images.pageglimpse.com/v1/thumbnails?

a lo que le agregamos algunos parámetros uniendolos con el símbolo &:

• devkey es un texto obligatorio, la clave que previamente nos adjudicaron
• url es un texto obligatorio con la dirección URL de la página que queremos mostrar y siempre, debe comenzar con http:// o https://
• size es un texto opcional que tiene tres valores posibles y que establecen el tamaño de la miniatura a mostrar:
• • small muestra una imagen de 150x108 (es el valor por defecto)
  • medium muestra una imagen de 280x202
  • large muestra una imagen de 430x310
• root es un texto opcional que indica si se mostrará la miniatura de la raiz del dominio y no de una página interior si esa miniatura no está disponible. Por defecto es yes.
• nothumb es u texto con la URL de una imagen alternativa que será mostrada en caso que la miniatura no esté disponible.

Un ejemplo:

http://images.pageglimpse.com/v1/thumbnails?url=http://www.blogger.com/&size=large&devkey=XXXXXXXXXX

Esa URL la podemos aplicar a cualquier etiqueta, por ejemplo IMG:

<img src="http://images.pageglimpse.com/v1/thumbnails?url=http://www.blogger.com/&size=large&devkey=XXXXXXXXXX" />

Con un poco de JavaScript, podríamos simplificar als cosas aún más. Podríamos crear una función que creara esa etiqueta IMG por nosotrso, enviándole algunos datos.

Agreguemos esto antes de </head>:

<script type='text/javascript'>
// <![CDATA[ 
function getMiniaturaPG (cual,como) {
if (cual == null){return}
if (como == null){como = 'small'}
document.write('<img class="miniPG" src="http://images.pageglimpse.com/v1/thumbnails?url=' + cual + '&size=' + como + '&devkey=XXXXXXXXXX" />');
}
// ]]>
</script>

Por supuesto, reemplazando XXXXXXXXXX por nuestra clave personal.

Y lo usaríamos de este modo:

<script>getMiniaturaPG('http://unaDireccion');</script>

En cuyo caso, se mostrará la miniatura de tamaño mínimo, o bien, podemos agregarle el parámetro para mostrar miniaturas más grandes:

<script>getMiniaturaPG('http://unaDireccion','small');</script>
<script>getMiniaturaPG('http://unaDireccion','medium');</script>
<script>getMiniaturaPG('http://unaDireccion','large');</script>

Como en el script, la etiqueta tiene una clase (miniPG), podríamos darle propiedades CSS para mostrarla con cierto diseño: por ejemplo:

.miniPG {
background-color: #000;
border: 2px solid #456;
margin: 5px;
padding: 5px;
}

Algo que siempre causa alguna confusión cuando escribimos CSS es determinar si debemos aplicar esas definiciones como clases o IDs ¿Cuál es la diferencia?

Tanto una como otra sirven para identificar una etiqueta y, de ese modo, nos resulta más sencillo agregarle propiedades. Por ejemplo:

<style>
  #nombreID {color: red;}
  .nombreClase {color: blue;}
</style>

<div id="nombreID"> este texto será rojo </div>
<div class="nombreClase"> este texto será azul </div>

Para definir las propiedades de un ID le anteponemos el símbolo # al nombre y para definir una clase, usamos un punto.

Una regla elemental y que no debe violarse dice que sólo usaremos un ID si esa etiqueta es única, no debería haber dos etiquetas con el mismo ID en la misma página; en cambio, usaremos class si es un estilo que repetiremos en diferentes etiquetas.

Además, suele decirse que el atributo ID se utiliza para definir áreas específicas de una página (el header, el footer, un menú, etc) y una clase se usa para definir estilos de tipo general (enlaces, listas, etc).

Los ID nos permiten organizar el estilo e identificar etiquetas para luego manipularlas con JavaScript. Las clases, nos evitan escribir códigos repetidos y esa es su mayor utilidad.

Hay varias formas de implementarlas:
a.green {color: green;}
hará que los enlaces que contengan esa clase, se muestren de color verde:
<a class="green"> el enlace será de color verde </a>
<p class="green"> este párrafo NO será de color verde </p>

En cambio, esta otra:
.green {color: green;}
hará que cualquier etiqueta que contengan esa clase, se muestren de color verde:
<a class="green"> el enlace será de color verde </a>
<p class="green"> este párrafo también será de color verde </p>

Tanto las clases como los IDs pueden combinarse asi que no es extraño ver cosas como estas:

<div id="unNombre" class="unaClase"> ....... </div>

o bien:

<div class="unaClase otraClase"> ....... </div>

¿Para qué usamos ID y class juntas? Por ejemplo:

<style>
  .ejemploCSS {
    background-color: #000;
    border: 1px solid #CCC;
    float: left;
    height: 50px;
    margin-right: 10px;
    padding: 10px;
    width: 150px;
  }
  #ejemploCSS1 {color: white;}
  #ejemploCSS2 {color: yellow;}
  #ejemploCSS3 {color: red;}
</style>

Tenemos una clase donde hemos definido una serie de propiedades como fondo, bordes y tamaño que aplicaremos a un DIV así que, si colocamos tres, uno al lado del otro, se verán iguales. Ahora bien, le agregaremos un ID a cada uno de ellos para darles una propiedad exclusiva, el color del texto:

<div id="ejemploCSS1" class="ejemploCSS"> ... </div>
<div id="ejemploCSS2" class="ejemploCSS"> ... </div>
<div id="ejemploCSS3" class="ejemploCSS"> ... </div>

Se vería esto:

BLANCO

AMARILLO

ROJO

¿Y qué pasa si hay propiedades contradictorias? Por ejemplo, definimos el color de fondo tanto en la clase como en el ID ¿Cuál se verá? ¿será negro como dice la clase o variará como dicen los IDs?:

<style>
  .ejemploCSS {background-color: #000;}
  #ejemploCSS1 {background-color: white;}
  #ejemploCSS2 {background-color: yellow;}
  #ejemploCSS3 {background-color: red;}
</style>

Como se ve, el fondo será el del ID y el de la clase será ignorado.

BLANCO

AMARILLO

ROJO

Claro, uno puede decir, lo que ocurre es que, primero le decimos que es negro y luego le decimos que es de otro color, lo sobrescribimos, es lógico pero, veamos si lo escribimos al revés:

<style>
  #ejemploCSS1 {background-color: white;}
  #ejemploCSS2 {background-color: yellow;}
  #ejemploCSS3 {background-color: red;}
  .ejemploCSS {background-color: #000;}
</style>

Ahora ponemos el fondo negro al final ¿qué se verá?

BLANCO

AMARILLO

ROJO

Pués, lo mismo ya que, para decirlo de alguna manera, un ID es "más importante" que una clase (más información). Para hacer que una clase "sobrescriba" una propiedad de un ID, le agregamos la palabra !important:

<style>
  .ejemploCSS {background-color: #000 !important;}
  #ejemploCSS1 {background-color: white;}
  #ejemploCSS2 {background-color: yellow;}
  #ejemploCSS3 {background-color: red;}
</style>

BLANCO

AMARILLO

ROJO

Wallpapers (infantiloides)

PicFont es un sitio que permite agregarle textos a las imágenes ya sea que estas las tengamos en la PC o que estén alojadas en la web.

Nos da tres formas diferentes de hacerlo: con Picture seleccionamos la imagen y agregamos un texto directamente (con o sin borde), con Canvas definimos un rectángulo de color donde agregaremos los textos; en Shape seleccionamos alguno de los diseños predeterminados. En el editor de textos colocamos este y además, podemos elegir fuentes, tamaños y colores, rotamos los textos, los posicionamos, etc.

PicSlice divide una imagen en partes más pequeñas, lo cual es útil cualdo esta es muy grande. Definimos la cantidad de sectores y el resultado lo podemos descargar en un archivo ZIP. Eventualmente, también nos permite recortar una imagen.

PicShadow genera una sombra y nos da como resultado otra imagen semitransparente que podemos descargar.

PicReflect es similar pero, esta vez, lo que se crea es una imagen reflejada en cierta dirección.

TextAnim genera textos animados con múltiples opciones.

El tema de las tan mentadas mudanzas y los alojamientos inconstantes me provocó varios dolores de cabeza. Es que, dada la forma en que hago las cosas, no se trataba sólo de reubicar archivos y modificar los enlaces. Muchísimas entradas tienen scripts individuales que son los que uso como modelo o ejemplo para tal o cual cosa. No podrían agregarse a la plantilla porque lo único que se conseguiría es un volumen inmanejable de códigos que no son de uso corriente sino eventual, sólo se ejecutan en una entrada en particular. Para estos casos, no hay más remedio que usar archivos externos.

Cambiarlos de un sitio a otro es tedioso pero a esto le sumamos un segundo inconveniente, hay que editar esas entradas individuales y volverlas a publicar ¡Sólo encontrarlas ya es un problema!!!

Comencé a hacerlo y decidí detenerme porque pensé: "Ahora lo hago ¿y la próxima vez?" Ya van tres veces, esta debe ser la última.

Entonces, se me ocurrió que lo mejor era ... usar otro script ... combatir fuego con fuego.

La idea era esta. En lugar de tener que escribir algo como:

<script src="http://.../unScript.js"></script>

Tal vez fuera posible tener alguna clase de lista o índice y una fucnión que escribiera automáticamente el código ese en una entrada, diciéndole algo así como aquí va el script número 24. De esa manera, no habría que modificar jamás el post, bastaría cambiar esa lista.

Al grano. Lo que hice fue agregar un elemento HTML al inicio de la plantilla en esa sección especial que alguna vez comenté:

<b:section class='contenedorScripts' id='contenedorScripts'/>

Y allí coloco la función:

<script type="text/javascript">
function leerScript(cual) {
scriptLISTA=new Array(
// esta es la lista con las direcciones URL de los diferentes scripts en uso
0,"", // no lo uso
1,"http://.../unScript.js",
2,"http://.../otroScript.txt",
.......
49,"http://.../cualquierScript.txt"
);
regNum = cual * 2 +1;
document.write('<script src="' + scriptLISTA[regNum] + '"><\/script>');
}
</script>

Cada uno tiene la misma estructura: un número de orden correlativo, una coma y la dirección URL entre comillas. Terminan todas con una coma excepto la última que no debe tenerla.

En las entradas o donde se nos ocurra, podemos cargar el script de este modo:

<script>leerScript(unNumero);</script>

así que:

<script>leerScript(49);</script>

cargará el script que está alojado en http://.../cualquierScript.txt

De esta forma, si el archivo es modificado, ya sea en su contenido o en su ubicación, basta modificar la lista para que siga funcionando.

Una variante es la que me propuso Nico, en lugar de utilizar un array con una lista correlativa idenficada con números, usar variables con un nombre exclusivo, algo que puede ser útil si se trata de algunos pocos scripts. Por ejemplo:

<script type="text/javascript">
// primero definimos los nombres
var animcollapse = "http://.../unScript.js";
var emoticones = "http://.../otroScript.txt";

// luego la función
function leerScript(cual) {
document.write('<script src="' + cual + '"><\/script>');
}
</script>

Y si quisiéramos usar el script de emoticones, lo cargaríamos así:

<script>leerScript(emoticones);</script>

Sea cual sea el método, debe tenerse en cuenta que la función siempre debe estar antes que su llamada porque sino, no funcionará.