Magazine Historia

Click para ampliar las imágenes.

Publicidad de la agencia Respect APP de Eslovaquia.

REFERENCIAS:scaryideas.com

Snapfit es un script que permite generar puzzles de cualquier imagen y que puede ser utilizado en la mayoría de los navegadores de última generación.

Lo podemos incluir directamente en la plantilla o en una entrada, para eso, basta descargar el ZIP que incluye un demo y alojar el archivo snapfit.js en un servidor. Luego, lo agregamos como a cualquier otro:

<script type="text/javascript" src="URL_snapfit.js"></script>

Para utilizarla, basta que agreguemos onload="snapfit.add(this);" a la etiqueta IMG que conviene que este siempre contenida en un DIV:

<div>
<img onLoad="snapfit.add(this);" width="valor" height="valor" id="nombre" src="URL_imagen" />
</div>

Así, sin parámetros, ya podemos acceder a las distintas funciones que se manejan con el teclado o el ratón:

Mover: click y arrastrar
Rotar: con doble click gira 90º en el sentido de las agujas del reloj
Flip Horizontal: doble click + ALT o botón derecho
Flip Vertical: doble click + SHIFT o botón central
Reset: tecla ESC
Mezclar: tecla SUPR o BCKSP
Resolver: tecla ENTER

Con parámetros, podemos controlar la forma en que se mostrará la imagen:

Mezclar: snapfit.admix(ID_imagen);
Resolver: snapfit.solve(ID_imagen);
Cambiar el nivel: snapfit.reset(ID_imagen, valor); donde valor puede variar entre 0 y 6

Esto, lo podemos aplicar, por ejemplo, con un enlace:

<a href="javascript:void(0);" onclick="snapfit.solve(document.getElementById('ID_imagen'));"> Resolver </a>

Todo eso también lo podemos agregar en el el evento onload de la imagen como parámetros; por ejemplo, esto haría que se mostrara mezclado en el nivel más difícil:

onload="snapfit.add(this,{level:6,mixed:true});"

Hay más parámetros que controlan otros detalles:

mixed mezclado o no, true o false (por defecto es false)
simple mezcla solo las posicioes (por defecto es false)
level valores 0 a 6 (por defecto es 3)
nokeys si es true se deshabilita el uso del teclado (por defecto es false)
polygon si es true se usan polígonos en lugar de rectángulos (por defecto es false)
aimage si es true, el fondo es la imagen original (por defecto es false)
aborder si es true se agrega un borde (por defecto es false)
aopacity es la opacidad del fondo (por defecto es 0.33)
bopacity es la opacidad del borde de las piezas (por defecto es 0.50)
sopacity es la opacidad de la pieza activa (por defecto es 0.75)
mcolor, fcolor, acolor y bcolor controlan los colores

Hay muchos otros detalles y funciones para personalizar el script; la llamada callback la utilizamos para ejecutar funciones extras, por ejemplo, mostrar una ventana de alerta cuando el puzzle ha sido resuelto:

onload="snapfit.add(this,{callback: function() {alert('Ha resuelto el puzzle.');},level:4,mixed:true,polygon:true});"

Las pseudo-clases :first-xxxx seleccionan el primer elemento que cumple cierta condición; por el contrario, las pseudo-clases :last-xxxx hacen lo mismo pero contando de atrás hacia adelante.

leer artículo actualizado

Esto es una idea loca y absurda pero no importa. Se trata de intentar reproducir alguna de las facilidades de Tumblr para crear contenido con cierta facilidad, seleccionando algún tipo predefinido.

En realidad, como las posibilidades son muchísimas, las variantes son demasiadas como para tratar de mostrarlas así que me basaré sólo en algunas de ellas. En este caso, me imagino que mi blog tendrá entradas normales y además, tres tipos de entradas especiales que quiero generar rápidamente, sin escribir mucho código cada vez que publico algo y, por supuesto, quiero que esas entradas se muestren de manera diferente a las demás; que en el home no tengan títulos visibles ni comentarios, que sean una especie de miniposts que agrego porque si, porque sólo quiero compartir algo.

Para no ser demasiado imaginativo, se me ocurre que esas entradas serán Citas, Imágenes y Audio.

Entonces, me voy a aprovechar del campo de enlace que me permite agregar Blogger en cada entrada si tengo marcada la opción en la Configuración. En ese cuadro puedo poner una URL que luego, tal como mostraba en la publicación anterior, podemos leer desde la plantilla.

Pero, esa URL no tiene limitaciones, nadie dice que deben ser URLs reales así que voy a usar tres diferentes, simplemente, para poder reconocerlas en la plantilla y condicionarlas:

• cuando cree una entrada de tipo Citas, pondré: http://cita.me
• cuando cree una entrada de tipo Imagen, pondré: http://imagen.me
• cuando cree una entrada de tipo Audio, pondré: http://audio.me

Y el contenido será lo más simple posible; un texto, una etiqueta IMG, lo mínimo necesario y nada más.

Ahora, el tema es la plantilla así que me baso en al Mínima, expando los artilugios y busco <b:includable id='post' var='post'> que es donde está el LOOP que muestra las entradas. Voy a condicionar todo eso para separarlo en dos partes, la primera será la que mostrará esas entradas especiales y la segunda es la que mostrará las entradas de manera normal, sea la que sea:

<b:includable id='post' var='post'>
  <div class='post'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.link'>
      <!-- AQUÍ PONDREMOS EL CODIGO ESPECIAL -->
    <b:else/>
      <!-- AQUÍ DEJAMOS TODO TAL COMO ESTÁ YA QUE SON LAS ENTRADaS NORMALES -->
    </b:if>
  </div>
</b:includable>

Si guardase eso y no tuviera entradas con algún tipo de enlace agregado no pasaría nada y no habría cambios; si tuviera alguno, simplemente no lo vería ya que, todo lo que hemos hecho es condicionar la forma en que se ven las entradas y decirle a Blogger que si la entrada tiene una URL como vínculo, haga algo distinto a lo que hace con el resto de las entradas. Lo que nos falta, entonces, es decirle qué queremos que haga con cada una de esas entradas especiales y claro está, eso puede ser cualquier cosa.

No voy a hacer nada sofisticado, simplemente, voy a decirle que muestre la entrada en un DIV con una clase diferente a la que usa habitualmente:

<b:if cond='data:post.link == &quot;http://cita.me&quot;'>
  <div class='post-header'>
    <div class='post-cita'>
      <data:post.body/>
      <div style='clear: both;'/>
    </div>
  </div>
</b:if>

<b:if cond='data:post.link == &quot;http://imagen.me&quot;'>
  <div class='post-header'>
    <div class='post-imagen'>
      <data:post.body/>
      <div style='clear: both;'/>
    </div>
  </div>
</b:if>

<b:if cond='data:post.link == &quot;http://audio.me&quot;'>
  <div class='post-header'>
    <div class='post-audio'>
      <data:post.body/>
      <div style='clear: both;'/>
    </div>
  </div>
</b:if>

Por supuesto, todo eso se puede simplificar mucho más pero, basta como ejemplo.

Ahora, nos falta el CSS:

<style>
  /* las citas */
  .post-cita {
    color: #555;
    font-family: Times New Roman;
    font-size: 40px;
    letter-spacing: -1px;
    margin: 50px 0;
    text-align: center;
    text-shadow: 3px 3px 2px #CCC;
  }
  /* las imágenes */
  .post-imagen {
    text-align: center;
  }
  .post-imagen img {
    background-color:#CCC;
    border:4px double #EEE;
    padding:10px;
  }
  /* los audios usando un reproductor externo */
  .post-audio {
    -moz-box-shadow: 0 0 20px #000;
    background-color: #CCC;
    margin: 50px auto;
    padding: 10px 0 6px;
    text-align: center;
    width: 350px;
  }
</style>

Es muy probable que esto sea algo que nunca hemos usado y tal vez, que ni siquiera hayamos probado porque, tal como se muestra, parece un poco críptico pero, si vamos a la Configuración de Blogger, en la solapa Formato, entre otras cosas nos muestra esto:

Mostrar campo de título Sí No

Mostrar campo de enlace Sí No
Te da la opción de incluir en cada una de tus entradas enlaces para la transmisión de adjuntos a dispositivos móviles (podcasting) y una URL relacionada.

Por defecto, aparecen tal cual, Mostrar campo de título SI y Mostrar campo de enlace NO ¿Qué pasa si en ambos, colocamos SI?

Pues entonces, cuando abriéramos el editor de entradas, veríamos que debajo del cuadro donde podemos escribir el título de nuestra entrada, hay otro cuadro extra donde se nos dice "Utilice esta opcion para crear el enlace del título de un sitio web" y si queremos alguna explicación, nos envian a una teórica página de ayuda:

¿Para qué podría servir esto? Bueno, primero, veamos qué hace.

En ese cuadro extra puedo poner una dirección URL, cualquier dirección siempre que sea válida que comience con http://. Supongamos que lo hago y publico la entrada. Aparentemente, cuando la miro, todo parece normal pero, el título que por defecto es a dirección URL de esa misma entrada, ahora, es la dirección URL de ese otro enlace, del que puse en el segundo cuadro.

En este ejemplo, el título de la entrada es un enlace al home de este blog porque puse ese enlace. Blogger dice "... el campo Vínculo resulta especialmente útil si la mayoría de las entradas de su blog se refieren a otros artículos y desea que en su blog público aparezcan vínculos que enlacen con ellos ...".

Suena extraño, no parecería tener mucha utilidad salvo casos muy especiales (que ahora no se me ocurren) pero, es un dato extra, algo que podemos agregar y por lo tanto, que podemos leer y sacarle algún provecho o intentar sacárselo.

¿Cómo sabe Blogger que la URL ya no es la del post sino la otra?

Porque ese dato, está condicionado en al plantilla y lo debemos haber visto miles de veces sin prestarle demasiada atención (por lo menos yo).

Si expandimos lo artilugios, lo veremos en el includable post del widget que contiene las entradas; en la mayoría de las plantillas dice esto:

<b:if cond='data:post.title'>
  <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </b:if>
  </h3>
</b:if>

Esa es la parte que muestra el título de nuestras entradas y, si ese título existe, se crea una etiqueta H3 o cualquier otra, con un enlace pero, este enlace se condiciona:

si hay un enlace en el campo Enlaces: <b:if cond='data:post.link'>
la URL a usar será ese dato: <a expr:href='data:post.link'>
caso contrario, la URL será la del post: <a expr:href='data:post.url'>

Quiere decir que hay tres datos que podemos leer:

data:post.title es el texto con el título de la entrada
data:post.url es la URL de nuestra entrada (el vínculo permanente)
data:post.link es la URL que hayamos colocado en el campo adicional

¿Para qué puede servir saber todos eso? Ni idea. Por ejemplo, en una serie de entradas, he colocado en ese campo extra, la dirección URL de una imagen, una diferente en cada una de ellas y, modificando ese código que muestra los títulos e identificando los posts con un ID, voy a usarlas para que cada entrada tenga un fondo diferente:

<!-- el texto del título con el enlace a la entrada -->
<h3 class='post-title'>
  <a expr:href='data:post.url'><data:post.title/></a>
</h3>
<!-- verifiico si hay un enlace adicional -->
<b:if cond='data:post.link'>
  <!-- si lo hay, uso ese enlace que leo con data:post.link para poner el fondo co una regla de estilo especial -->
  <style>
    #post-<data:post.id/> {background:transparent url(<data:post.link/>) repeat left top;}
    .post-body {font-size:32px;padding:10px;}
  </style>
</b:if>
.......
<!-- aquí le agrego el ID a cada entrada -->
<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
  <data:post.body/>
  <div style='clear: both;'/>
</div>
.......

Otra variante simple. Usaré el cuadro vinculo para poner allí un video de YouTube así que esa entrada tiene un título, este enlace y nada más:
http://www.youtube.com/v/otKS5kyJYxc

Quiero que mi plantilla lea ambas cosas y escriba todo el código restante así que hago algo así:

<b:if cond='data:post.link'>
  <style>
    .post {display:none;}
  </style>
  <div style='margin:0 auto;text-align:center;width:450px;'>
    <object expr:data='data:post.link' height='350' type='application/x-shockwave-flash' width='425'>
      <param expr:value='data:post.link' name='movie'/>
      <param name='wmode' value='transparent'/>
      <param name='allowfullscreen' value='true'/>
      <param name='allowScriptAccess' value='always'/>
    </object>
  </div>
</b:if>

¿Puede tener más aplicaciones prácticas? Creo que si ... hay que pensar.

La entrada de CSS-Tricks habla de expandir imágenes usando HTML5 pero claro, eso no es posible en cualquier navegador así que vamos a tomar la idea, simplificarla y tratar que funcione en Mozilla, Chrome y por lo menos en IE8 ...

Ejemplo 1

En lugar de etiquetas de HTML5 vamos a usar el viejo y remanido DIV al que le asignaremos una clase CSS; adentro, colocaremos una imagen cualquiera que se redimensionará y ampliará al pasar el cursor por encima y eventualmente, pondremos un caption o texto aclarativo inferior dentro de una etiqueta SPAN:

<div class="figure">
<img src="URL_imagen">
<span class="figcaption"> el texto a mostrar </span>
</div>

Y ahora las definiciones del estilo:

<style>
/* en el div contenedor se verá la imagen en forma de miniatura */
.figure {
background-color: #FFF;
border: 10px solid #FFF;
left:40%; /* la posición en la pantalla es la parte engorrosa del asunto */
position: relative;
width:120px; /* el tamaño de la miniatura */
-moz-box-shadow: 0 3px 10px #CCC; /* algo de sombra en Mozilla y Chorme */
-webkit-box-shadow:  0 3px 10px #CCC;
-moz-transform: rotate(3deg); /* lo rotamos levemente en Mozilla y Chorme */
-webkit-transform: rotate(3deg);
}
/* la imagen */
.figure img { width:100%; }
/* el texto */
.figure span {
display: block;
text-align: center;
/* cualquier otra propeidad, color, tamaño y tipo de fuente, etc */
}
/* el efecto al poner el cursor encima */
.figure:hover {
z-index: 9999;
/* eliminamos la rotación y ampliamos la imagen por ejemplo tres veces */
-webkit-transform: rotate(0deg) scale(3);
-moz-transform: rotate(0deg) scale(3);
}
</style>
<!-- y le ponemos algún hack extra para adaptarlo a Internet Explorer 8>
<!--[if IE]>
<style>
.figure {
/* rotamos el DIV */
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9986295347545738, M12=-0.05233595624294383, M21=0.05233595624294383, M22=0.9986295347545738);
/* lo posicionamos como se pueda */
left:20%;
}
.figure:hover {
/* anulamos la rotación */
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1);
/* dimensionamos el DIV */
width:360px; 
}
</style>
<![endif]-->

Ejemplo 2

Erik Rothoff Andersson tiene 17 años y se le ocurrió que podíamos divertirnos detruyendo webs. Para eso, creó un script que podríamos agregar a nuestros marcadores y, de ese modo ... eliminar publicidades, comentarios indeseados, entradas que no nos gusten ... claro que, de manera virtual así que no hay daños posibles.

click acá para probar

La navecita la manejamos con los cursores y disparamos con la barra de espaciar

¿Queda algo intacto? No hay problemas, mantenemos apretada la tecla B y si ya estamos satisfechos, con la tecla ESC terminamos la tarea.