Internet: Una historia de amores y odios

REFERENCIAS:thedoghousediaries.com

CSSload es un sitio donde podemos generar "imágenes" de carga que no son imágenes sino gráficos creados con CSS, aprovechando de ese modo, las facilidades que nos dan estas nuevas propiedades que nos permiten animar casi cualquier cosa y que funcionan en Firefox, Chrome, Safari y otros navegadores modernos.

No hay mucho que explicar. Basta entrar en la página y seleccionar alguno de los modelos disponibles y luego, establecer los parámetros de color y velocidad. Todos los cambios pueden ser previsualizados y una vez que nos hemos decidido, el botón Get code nos mostrará el código necesario para insertarlo en cualquier página web.

Ese código contiene dos partes, el estilo que es todo lo que está entre <style> </style> que podemos agregarlo en una entrada o en la misma plantilla y el HTML que son una serie de DIVs que deberemos ubicar allí donde quisiéramos mostrarlo.

Como no requiere librerías de ningún tipo y no usa JavaScript, podemos modificarlo a gusto y a mi entender, es una buena manera de aprender cómo funcionan estas cosas que a simple vista, son raras.

Ver/Ocultar otro ejemplo:

Tengo muchas direcciones de feeds y ahora, lo que quiero hacer es mostrarlos pero sin tener que escribir códigos especiales para cada uno de ellos y además quiero que se vean en un mismo lugar así que me aprovecho de jQuery y modifico un poco el script que se mostraba en esta entrada.

Allí, agregaré un par de funciones extras, una, llamada FEED_eliminartags() para que los contenidos puedan ser "recortados" y verlos como sumarios y otra para detectar la primera imagen que tengan FEED_primerimagen(); ambas cosas, son similares a cualquier otra función que interprete json que es el formato en que leeremos los feeds.

Agrego las funciones antes de </head>

<script type='text/javascript'>
//<![CDATA[
function FEED_primerimagen(cual) {
  var t = "", s, a, b, c, d;
  s = cual;
  a = s.indexOf("<img");b = s.indexOf("src=\"",a);c = s.indexOf("\"",b+5);d = s.substr(b+5,c-b-5);
  if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {t = d;}
  return t;
}

function FEED_eliminartags(cual,longitud){
  var r = cual.split("<");
  for(var i=0;i<r.length;i++){
    if(r[i].indexOf(">")!=-1){
      r[i] = r[i].substring(r[i].indexOf(">")+1,r[i].length);
    }
  }
  r = r.join("");
  var sss = "", p;
  var r2 = r.split(" ");
  for(var i=0;i<r2.length;i++){
    p = sss + r2[i] + " "
    if(p.length>=longitud) {break;}
    sss = p;
  }
  sss = $.trim(sss);
  if(sss) {sss += " …" }
  return sss
}

(function ($) {
  $.fn.FeedEk = function (lasopciones) {
    var opciones = {url: '', clase: '', cantidad: 3, lenres: 120};
    if (lasopciones) {$.extend(opciones, lasopciones)}
    var elID = $(this).attr('id');
    if (opciones.url == null || opciones.url == '') {
      $('#' + elID).empty();
      return
    }
    $.ajax({
      url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=' + opciones.cantidad + '&output=json&q=' + encodeURIComponent(opciones.url) + '&callback=?',
      dataType: 'json',
      success: function (data) {
        $('#' + elID).empty();
        $.each(data.responseData.feed.entries, function (i, entry) {
           var laimagen = FEED_primerimagen(entry.content);
           var contenido = FEED_eliminartags(entry.content,opciones.lenres);
           var salida = "<div class='ItemFeed "+opciones.clase+"'>";
           salida += "<div class='ItemTitle'><a href='" + entry.link + "' target='_blank' >" + entry.title + "</a></div>";
           salida += "<div class='ItemContent'>";
           if(laimagen){
             salida += "<img src='"+ laimagen +"' />";
           }
           if(contenido){
             salida += "<p>" + contenido + "</p>";
          }
          salida += "</div>";
          salida += "</div>";
          $('#' + elID).append(salida);
        })
      }
    })
  }
})(jQuery);
//]]>
</script>

Y en un elemento HTML, entrada, página estática o donde quiera que se muestren, el HTML que no es otra cosa que un DIV vacío y una serie de enlaces:

<div id="divRss"></div>

<div id="fenlaces">
  <a href="#" rel="1" class="ftwitter"> Twitter usuario </a>
  <a href="#" rel="2" class="ftwitter"> Twitter favoritos </a>
  <a href="#" rel="3" class="ftwitter"> Twitter menciones </a>
  <a href="#" rel="4" class="fyoutube"> YouTube usuario </a>
  <!-- coloco todos los enlaces que quiera -->
  <a href="#" rel="14" class="fstumble"> StumbleUpon blog </a>
</div>

Ahora, faltaría definir una lista de direcciones urls con los distintos feeds; uso un array o cualquier otro sistema:

<script type="text/javascript">
  var lista_feeds=new Array();
  lista_feeds[0] = "";
  lista_feeds[1] = "https://twitter.com/statuses/user_timeline/usuario.rss";
  lista_feeds[2] = "https://api.twitter.com/1/favorites/usuario.rss";
  lista_feeds[3] = "http://search.twitter.com/search.rss?q=to:@usuario";
  lista_feeds[4] = "https://gdata.youtube.com/feeds/api/users/usuario/uploads";
  // ....... sigo agregando las direcciones que quiera usar
  lista_feeds[14] = "http://www.stumbleupon.com/rss/stumbler/nombre/likes";

  // y el evento de jQuery apra detectar el click en esos enlaces
  $('#fenlaces a').live('click', function(e) {
    e.preventDefault(); // evito qe se ejecuta el href del enlace
    var url = lista_feeds[$(this).attr('rel')]; // leo el número de orden de la lista (1, 2, 3, 4, etc)
    var clase = $(this).attr('class'); // leo la clase de ese enlace
    // y ejecuto la función para leer los feeds
    // donde cantidad es el número de entradas a leer y lenres es la longitud máxima
    $('#divRss').FeedEk({url:url, clase:clase, cantidad: 3, lenres:200 });
  });

  // y por defecto, muestro el primero de la lista
  $(document).ready(function() {
    $('#fenlaces a').first().click();
  });
</script>

Por último, como siempre, el CSS que es lo que termina de personalizar las cosas:

<style>
  #divRss { /* el contenedor */
    background-color: #EEE;
    border: 1px solid #000;
    margin: 0 auto;
    outline: 3px solid #ABC;
    padding: 10px;
    width: 350px;
  }
  #divRss .ItemFeed { /* cada entrada */
    border-bottom: 1px dotted #000;
    color: #666;
    padding: 5px 0;
  }
  #divRss .ItemFeed:last-child {border: none;}
  /* y los detalles (título, contenido e imagen)
  #divRss .ItemTitle { }
  #divRss .ItemTitle a { }
  #divRss .ItemContent { }
  #divRss .ItemContent p { }
  #divRss .ItemContent img {height: auto;   width: 100%;}
</style>

Como los datos que nos muestran esos feeds pueden ser variables, la clase que se envia a la función, permite que los mostremos con alguna diferencia; por ejemplo:

#divRss .ItemFeed.ftwitter { }
#divRss .ItemFeed.fyoutube { }
#divRss .ItemFeed.fyoutube .ItemTitle { }
#divRss .ItemFeed.fstumble img { }

Hace ya unos cuantos días, en labnol.org publicaban un artículo donde enumeraba una larga serie de direcciones de feeds a los que podía accederse o leer su contenido; feeds de distintos servicios que, como casi todos ellos, son públicos y por lo tanto, podemos mostrarlos.

Para hacer eso, como los feeds suelen tener formatos diferentes, un método efectivo es usar la idea que se mostraba en esta entrada que no es otra cosa que un pequeño script que utiliza jQuery para enviar esa dirección de feeds a un API de Google que nos devuelve siempre un formato único; de tal modo, podremos emplearlo sin tener que tener en cuenta esas diferencias o andar averiguando en que etiquetas están los distintos datos.

Es cierto que el API no es muy flexible pero, lo que nos devuelve es más que suficiente para armar un gadget que nos permita mostrar una lista de feeds de distinto tipo en en el mismo espacio.

Empezamos con algunas de las direcciones de la lista de feeds:

las últimas actualizaciones de Twitter:
https://twitter.com/statuses/user_timeline/usuario.rss

los favoritos de Twitter:
https://api.twitter.com/1/favorites/usuario.rss

las menciones de Twitter:
http://search.twitter.com/search.rss?q=to:@usuario

cualquier búsqueda o hashtags) de Twitter:
http://search.twitter.com/search.rss?q=palabra

los últimos videos subidos a YouTube:
https://gdata.youtube.com/feeds/api/users/usuario/uploads

videos de YouTube con cierta etiqueta:
https://gdata.youtube.com/feeds/api/videos/-/etiqueta

cualquier búsqueda en YouTube:
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=relevance

lo mismo pero ordenadas por fecha:
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=published

lo mismo pero ordenadas según visitas:
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=viewCount

últimas actualizaciones de una página de Facebook:
https://www.facebook.com/feeds/page.php?format=atom10&id=ID_pagina

imágenes subidas a Pinterest:
http://pinterest.com/usuario/feed.rss

imágenes subidas a Flickr:
http://api.flickr.com/services/feeds/photos_public.gne?id=ID_usuario

imágenes de Flickr con cierta etiqueta:
http://api.flickr.com/services/feeds/photos_public.gne?tags=etiqueta

imágenes de Instagram con cierta etiqueta:
http://instagr.am/tags/etiqueta/feed/recent.rss

cualquier búsqueda de Picasa:
http://photos.googleapis.com/data/feed/base/all?alt=rss&kind=photo&q=palabra

últimas entradas en Tumblr:
http://nombre.tumblr.com/rss

últimas entradas en WordPress.com:
http://nombre.wordpress.com/feed/

últimas actualizaciones en StumbleUpon:
http://www.stumbleupon.com/rss/stumbler/usuario/likes

En todos los casos, lo que debe hacerse es cambiar el dato en amarillo por el que corresponda, ya sea nuestro nombre de usuario, ID, etiqueta o palabra a buscar.

Y lo que faltaría es ver cómo se podrían usar ...

Instant WordPress es un programa que nos permite instalar WordPress en nuestra PC sin necesidad de software extra.

Una vez descargado el ejecutable, hacemos doble click en él, seleccionamos la carpeta o unidad USB donde queramos instalarlo y nada más; funcionará de modo independiente como cualquier otro programa portable.

Incluye WordPress 3.2, Apache 2.2.15, PHP 5, MySQL 5 y una serie de posts y páginas demo donde pueden probarse plugins o temas.

En el sitio del desarrollador hay una abundante documentación (en ingles) que puede ayudar a quien quiera jugar un poco y ver de que se trata uno de los sistemas de blogs más utilizados en el mundo.

Instant WordPress

Instant WordPress.

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/jZFNuQWGzb8'><param name='movie' value='http://www.youtube.com/v/jZFNuQWGzb8' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

REFERENCIAS:blogtecnia.com

Los desarrolladores de Blogger se parecen a los hijos de esos amigos que son muy simpáticos cuando se los mira en fotografías pero, cuando los invitamos a cenar, se transforman en vendavales incontrolables y nos pasamos la noche atajando jarrones justo antes que se estrellen contra el piso, interponiéndonos entre esas tiernas manitos llenas de chocolate y la pared recién pintada o tratando de explicar por qué el gato no tiene ganas de jugar a la peluquería y sería mejor que dejaran esas tijeras y buscaran entretenerse con algo menos afilado. Adorables criaturitas.

Pues así es, uno cree que ellos (hablo de los desarrolladores de Blogger y no de los niñitos) SABEN, PIENSAN ... pero, a veces, da la impresión que no y para mi gusto, la nueva interfaz que nos han enchufado a la fuerza es una demostración más de ese presentimiento.

Es verdad que apenas la empezaron a mostrar y sugerir una y otra vez que la usáramos, probé y huí rápidamente así que ahora que es un cambio forzoso, mi subjetividad es nula y la miro con aprehensión aunque sea inevitable pero me pregunto ¿por qué se empeñan en cambiar lo que funciona en lugar de arreglar lo que no funciona?

Habrá a quien le guste, a mi no. Me parece incómoda, lo que antes estaba a la mano, ahora hay que buscarlo en distintos menús, está pensada para una resolución de pantalla específica ya que si uno tiene un monitor ancho, hay espacios enormes que no tienen uso pero ciertos botones se posicionan en los extremos y uno debe tomar un taxi para ir de uno a otro cosa que, evidentemente, nos permite ejercitar el antebrazo pero que es muy poco funcional. Por el contrario, en monitores con resoluciones bajas, ciertos botones desaparecen y si redimensionamos la ventana pasa lo mismo y debemos recargar la página para que vuelvan a su lugar.

Esta bien, lo sé, son detalles ... consecuencias de la modernidad pero ¿no podrían haberlo verificado? No es tan difícil, es algo casi elemental.

Lo más lindo es el cartelito de "Cargando" que se ve cada dos por tres; muy simpático. Uno va a hacerse un café, vuelve y allí sigue; amarillito y pequeñito ¿Recargamos la página con el botón del navegador? Bueno, a veces anda, a veces no porque muchas de las páginas internas se deben cerrar con un botón interno. UFA.

Suspiro. Veamos que hay. Uno no es un conservador por antonomasia así que siempre se está dispuesto a darle una oportunidad a lo nuevo pero ... ¿por qué sale siempre esta ventanita si no he hecho cambio alguno?

Y ¿en que quedamos? ¿se permiten 148 o 150 caracteres?

Mejor reviso las entradas por las dudas y ahí veo que todas tienen marcada esta opción, algo que jamás he usado:

y si quiero cambiar algo me dice:

¿Qué significa Omitir advertencia? Si hay un error hay un error y listo, hay que resolverlo y a otra cosa. Omito y todo sigue igual pero sin cartelito. Maravilloso. El error ha sido barrido bajo la alfombra. Total, si no lo veo: no existe.

Me olvido de las entradas. Veamos la plantilla, editar HTML ... y no, no han sacado el mensaje de advertencia, se abre una y otra vez porque, seguramente, ¿esperan que uno se resigne y no lo use más?

Eso es lo que presiento ¿Llegará el dia en que ya no habrá manera de editar las plantillas manualmente y habrá que usar siempre el nuevo editor? Me lo pregunto porque han desaparecido las plantillas tradicionales aunque ahí abajo, insólitamente, hay un enlace a las viejísimas, esas previas al Blogger Beta y con las que los que estamos acá desde hace años, alguna vez tuvimos que lidiar.

Quiere decir que ahora tenemos cuatro posibilidades: usamos las Vistas Dinámicas, usamos las engorrosas plantillas de nuevo estilo, usamos las clásicas que hace añares que nadie toca o tenemos que importar alguna descargada desde algún sitio y rogar que funcione y que siga funcionando.

OK, OK, ya no me quejo más

Hay varios sitios en la web como Pingdom que ofrecen servicios gratuitos para monitorizar que nuestro servidor o página esté funcionando y sea accesible; en general, son sencillos de usar pero, para quien quiera otra alternativa, en un artículo de Digital Inspiration explican como hacer algo similar, usando Google Docs con dos ventajas; por un lado, pueden montorizarse varios dominios simultáneamente y segundo, puede establecerse la opción de recibir mensajes de alerta SMS en un móvil.



El sistema es muy sencillo, debemos hacer una copia de la plantilla click acá y si estamos logueados en Google, nos pedirá autorización:

Hecho eso, la plantilla se agregará a nuestros documentos y veremos que el menú superior tiene un item extra llamado Website Monitor. Lo desplegamos y hacemos click en Initialize. Nuevamente, se nos mostrarán varias ventanas de autorización que debemos aceptar y terminado eso, aparecerá la plantila lista para ser editada (ver captura)



El siguiente paso es modificar los datos colocando la dirección de nuestro sitio en la celda B2 (si queremos agregar varios, los separamos con comas y en la celda B3 escribimos nuestra dirección de mail. Finalmente, en la celda B4 ponemos Yes si queremos recibir alertas SMS o No si no queremos.



Hay que tener en cuenta que si queremos esas alertas deberemos configurar Google Calendar con el número del móvil.

Cuando todo está listo, en el menú Website Monitor hacemos click en Start Monitoring y listo.



Para quien esté interesado en el tema, el código fuente del Google Apps Script se puede ver en esta página y, si por cualquier motivo no queremos eliminar la plantilla pero necesitamos deshabilitarla, basta editarla otra vez y dejar en blanco la celda B3 que es la que contiene nuestra dirección de mail.

Esta es una pequeña función muy interesante que usa jQuery para convertir cualquier dirección URL escrita como texto en un enlace. Es decir, escribimos esto:

http://jquery.com/

y se generará esto:

<a href="http://jquery.com/">http://jquery.com/<>

El código de la función sería el siguiente:

$.fn.crearLinks = function() {
  var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
  this.each(function() {
    $(this).html(
      $(this).html().replace(regexp,'<a href="$1">$1</a>')
    );
  });
  return $(this);
}

que ejecutaremos de acuerdo a nuestras necesidades; por ejemplo, si sólo quisiéramos que lo hiciera en determinadas circunstancias, bastaría indicar la clase o ID del contenedor; en este ejemplo uso un DIV con la clase crearlinksdemo así que sería:

$(document).ready(function() {
 $(".crearlinksdemo").crearLinks(); 
});

Morbi vitae est purus. Aliquam at leo nibh. Maecenas ultrices sem est, eget consectetur ante. Nulla lacus turpis; ullamcorper non tincidunt eget, mattis non ligula via http://vagabundia.blogspot.com/

Aliquam erat volutpat. Aliquam hendrerit dolor sed nisl dapibus condimentum? Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sollicitudin odio a ante semper eu interdum ipsum porta. Phasellus at libero quis sapien imperdiet faucibus auctor nec est Blogger http://www.blogger.com/home

Nullam vel nunc eu tellus vehicula congue. Quisque ut odio felis, vitae tempus ipsum? Quisque venenatis viverra augue, quis tempor lacus iaculis id? Pellentesque luctus egestas tortor, vehicula cursus leo mattis et. Sed molestie purus sed urna iaculis eu luctus nisl tincidunt. Proin eu massa velit, nec fermentum ipsum orci aliquam http://jquery.com/

Pero podría ser algo más global como tods las entradas de Blogger:

$(".post").crearLinks();

o todas las etiquetas P o cualquier cosa:

$("p").crearLinks();

Y, obviamente, podríamos modificar la función para que también se abrieran en otra pestaña:

$(this).html().replace(regexp,'<a target="_blank" href="$1">$1</a>')

agregarle otros atributos:

$(this).html().replace(regexp,'<a rel="nofollow" target="_blank" href="$1">$1</a>')

o una clase para definir reglas de estilo especiales:

$(this).html().replace(regexp,'<a class="enlacetexto" target="_blank" href="$1">$1</a>')

REFERENCIAS:webintenta.com

Muchos desarrolladores experimentan (que es una forma más profesional de decir "juegan") con JavaScript y CSS y crean cosas extrañas que no suelen tener aplicaciones prácticas pero, en este mundo excesivamente práctico, nos regalan un toque de frescura.

Este es el caso de Philippe-Antoine Lehoux que, entre otras "cositas", se le ocurrió hacer algo llamado fontBomb; una forma de "destruir" páginas web, agregando bombas donde uno quiera.

Para usarlo, basta entrar en la página y arrastrar el bookmarket a la barra de marcadores y así, tenerla a mano en caso de emergencia ...

En el rectángulo inferior puede verse el efecto aunque se solicita encarecidamente que no se abusen.

Click en cualquier parte para depositar un bomba ...

Desde que a Blogger se le ocurrió agregar los comentarios anidados, da la impresión que no sabe para que lado ir (o lo sabe y no lo quiere decir) porque constantemente está haciendo cambios sobre los cuales nada dice y cambiando, agregando y quitando códigos de las plantillas.

Hace ya un tiempo, han aparecido dos nuevos includables forzosos dentro del widget de los posts:

<b:includable id='iframe_comments' var='post'>
  <b:if cond='data:post.allowComments'>
    <script expr:src='data:post.commentSrc' type='text/javascript'/>
    <div class='cmt_iframe_holder'/>
    <b:if cond='data:post.embedCommentForm == "false"'>
      <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
  </b:if>
</b:includable>

El primero, vaya uno a saber qué hace ... por ahora, no parece hacer nada excepto agregar un script larguísimo y un div cuya clase es cmt_iframe_holder:

http://www.blogblog.com/dynamicviews/xxxxxxxxxxxxxxx/js/comments.js

¿Para qué será?
¿Tendrá algo que ver con ese ícono que se ve a veces en los comentarios de este tipo y que muestra un lapicito? ¿Será que están pensando en permitirnos editar nuestros propios comentarios?

El otro includable es este:

<b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.commentSource == 1'>
    <b:include data='post' name='iframe_comments'/>
  <b:else/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  </b:if>
</b:includable>

Que parece reemplazar toda esa parte que antes se mostraba separada. Ahora, en los posts veremos solamente:

<b:include data='post' name='comment_picker'/>

dentro de las condiciones para páginas estáticas y entradas individuales.

No parece nada más que una modificación menor, un cambio de lugar pero, allí hay cosas que llaman la atención, primero, una condición que carga o no carga el script del que hablaba antes y que, por el momento, parece que no se ejecuta nunca ya que el valor es siempre cero:

<b:if cond='data:post.commentSource == 1'>

Segundo, algo que estuvo desde que inventaron este sistema:

<b:if cond='data:post.showThreadedComments'>

que significa que si tenemos habilitados los comentarios anidados se muestren de ese modo y sino, que se muestren de modo "normal"; parece lógico excepto por una cosa, no hay nada dentro de la configuración de Blogger que nos permita elegir una u otra opción así que el valor, por ahora, siempre es true y por lo tanto, cualquier plantilla normal, tendrá los comentarios anidados si o si, a menos que eliminemos manualmente la condición.

Me parece que habrá que estar atentos a esos cambios, sobre todo quienes no usamos los comentarios anidados porque estas cosas, Blogger suele hacerlas sin informarnos nada.

Cuando a un elemento le agregamos la propiedad float, lo convertimos en un bloque pero con una característica especial: su ancho no ocupa el 100% del contenedor sino sólo el de su contenido pero, además, lo quitamos del orden natural de la página; de este modo, todo lo que lo rodea se moverá y se acomodará como pueda para hacerle lugar.

leer artículo actualizado

oridomi es un script para animar cualquier tipo de contenido, plegándolo con diferentes efectos, como si fueran hojas de papel pero, claro está, esto sólo ocurrirá en navegadores que soporten las nuevas propiedades de CSS3.

Aunque la documentación del script es abundante ya que se explica cada función de modo detallado, lamentablemente, es poco lo que se indica del modo en que debe usarse y las distintas opciones pero veamos lo que dicen.

Para empezar, oriDomi funciona con o sin librerías anexas así que, luego de agregar el script (el minimizado o el normal) que podemos descargar de Github, debemos indicar cual o cuales serán los contenidos a los que se aplicará y esto, lo hacemos estableciendo una clase o un id. Por ejemplo si lo usara en este tipo de contenido:

<div id="ejemplo" class="ejemplo"><img src="una_imagen" /></ldiv>

debajo, pondría lo siguiente:

<script>var domi = new OriDomi(document.getElementById('ejemplo'));</script>

o bien esto si se usan clases en lugar de ids:

var domi = new OriDomi(document.getElementsByClassName('ejemplo')[0]);

aunque es más sencillo usando jQuery

var $domi = $('#ejemplo').oriDomi();

Y si quiera aplciarlo a varios contenidos distintos, sólo debería usar variables diferentes para cada uno:

var $domiUNO = $('#ejemplo').oriDomi();
var $domiOTRO = $('#otro-ejemplo').oriDomi();

Inicializado de ese modo, las opciones serán las que tiene por defecto pero, pueden ser modificadas; por ejemplo:

var $domi = $('#ejemplo').oriDomi({ vPanels: 3, hPanels: 10, perspective: 200, speed: 500, shading: false });

donde:

hPanels es la cantidad de secciones horizontales
vPanels es la cantidad de secciones verticales
speed es la velocidad
perspective es el valor de la perspectiva
shading indica si se agregarán sombras o no

Todo muy lindo pero ¿cómo lo usaría? Ahí, ya depende de lo que uno quiera hacer. Si sólo deseo mostrar ese contenido (imagen, texto, casi cualquier otra cosa simple o más o menos compleja) bastaría llamar a la función correspondiente, por ejemplo, algo así:

$domi.oriDomi('stairs',50,'left');

donde $domi es el nombre de la variable que le asignamos ($domiUNO, $domiOTRO); .oriDomi es la función genérica y lo que se encuentra entre paréntesis es efecto a usar, sus parámetros y opciones.

Los parámetros son números (positivos o negativos) que indican el ángulo y las opciones básicas indican el sentido de la rotación (left, right, top, bottom) siendo left la opción por defecto.

Los efectos posibles son varios y estos son los que se muestran en el demo inferior:

$domi.oriDomi('accordion', -40, 'right');
$domi.oriDomi('curl', 70, 'left');
$domi.oriDomi('ramp',50, 'top');
$domi.oriDomi('collapse','left');
$domi.oriDomi('stairs',50,'left');
$domi.oriDomi('fracture',30,'right');
$domi.oriDomi('twist',40,'left');
$domi.oriDomi('reveal', -50, 'right');

Hay otros como collapseAlt, foldUp, unfold y uno en particular nos permite restaurar el contendido, o se, volverlo a su estado original:

$domi.oriDomi('reset');

Dicen que el éxito es el cumplimiento de una meta u objetivo y como toda definición ambigua, se dice que es lo inverso del fracaso que a su vez se define como falta de éxito. Resumiendo: un círculo vicioso que no conduce a ninguna parte.

Calidad, cantidad, éxito, fracaso, sólo son palabras vacías, palabras vanas, palabras que pueden no significar absolutamente nada a menos que se definan apropiadamente y yo, no tengo definiciones, sólo tengo dudas.

Un blog o cualquier otro emprendimiento no escapa a estas limitaciones y presiones pero, no hay que dejarse engañar por los cantos de sirena ya que no existe tal cosa como un exitómetro. No hay unidades de medida universales. Éxito es sentirse bien con uno mismo, satisfecho de lo que se hace, gozar, divertirse, aprender. Un blog con visitas es exitoso si quien lo hace se siente pleno y puede ser un fracaso total aunque tenga un millón de visitantes si quien lo hace es infeliz.

El tiempo también es otra palabra subjetiva que al final de cuentas, nada explica y termina siendo sólo una marca en el calendario.

1 2 3 4 5 6 pasaron seis años y unos cuantos días desde que empecé con este blog y de lo único que estoy seguro es que seis años son seis años.

Mucho tiempo. Mucho de todo. Muchas idas y vueltas. La distancia entre aquel día y hoy es larga o es corta, dependerá del punto de vista. En el camino se han perdido cosas, cosas que extraño pero que son imposibles de recuperar porque un blog termina siendo independiente de los deseos de quien lo hace, va buscando su forma, se va aburguesando, se va encerrando en si mismo y a veces, queda atrapado en ese corset que lo limita y le quita la frescura inicial, la frescura de la inocencia, del desconocimiento, del "no me importa nada".

Claro, desde Chaplin hasta ahora, uno debe adaptarse a los Tiempos Modernos pero no me convence mucho este nuevo mundo de titulados "bloggers", "webmasters" o expertos en redes sociales. ¿Qué serán los expertos en redes sociales? ¿Gente que te enseña a escribir en Twitter "estoy comiendo una mandarina"? En fin, a mi me siguen gustando los blogs, debe ser porque la edad nos va llenando de gustos decadentes. Pero me gustan los blogs hechos por personas. Me gusta que sean ascéticos y extravagantes; me gusta que sean simples y complejos; me gusta que algunos me gusten y otros no ¿Será posible estar en esta nueva web, ser sólo una persona común y seguir chapoteando entre las palabras que van saliendo del teclado y que eventualmente aparecen publicadas en lugar de desaparecer en el tacho de basura?

¿Será posible?

Uno comienza a dudar y a preguntarse: ¿en qué vereda quiero estar?

Hay algo seguro, la vida es un juego sinuoso, lleno de recovecos, donde los caminos se bifurcan constantemente, traspiés, incertidumbres, casualidades, azar, caos. El esfuerzo vale pero no para garantizar resultados, vale para apoyar la cabeza en la almohada y dormir con la conciencia tranquila y si acá sigo, es porque me he dado cuenta que los sabios sólo buscan la respuesta entre las cosas que saben y nosotros, los "no tan sabios", nos podemos dar el lujo de no buscar nada y encontrarnos a cada segundo, con algo nuevo y maravilloso.

Claro que, tal vez me resulta fácil decirlo simplemente porque no me considero muy normal. No miro las estadísticas salvo para apreciar los dibujitos; no estoy pendiente de los enlaces, no los vendo, no los compro, no los regalo. No exijo reciprocidad. No hago marketing ni relaciones públicas. Soy un lobo estepario que apenas comenta en algún sitio de tanto en tanto y con vergüenza. Hago lo que se me da la gana, cuando se me da la gana y cómo se me da la gana. No me siento obligado a nada. Es decir, soy un irresponsable porque no tengo responsabilidades y prefiero pasarme tres horas tratando que un maldito rectangulito quede justo ahí donde yo quiero que quede a recibir cuatrocientos millones de visitas.

Así que, bienaventurados los que hacen preguntas y sólo obtienen más preguntas que respuestas porque ellos no serán bendecidos pero se divertirán como nadie tratando de aprender, el resto ... el resto es como la fama: puro cuento.

Voy a cerrar los ojos en voz baja
voy a meterme a tientas en el sueño.
.......
Mi pesadilla es siempre el optimismo:
me duermo débil, sueño que soy fuerte,
pero el futuro aguarda. Es un abismo.

No me lo digan cuando me despierte.

Hasta Mañana - Mario Benedetti.

Las cosas se vuelven cada vez más complejas, las alternativas que combinan CSS y scripts van aprovechando las nuevas posibilidades que nos dan los navegadores más modernos y la imaginación de los desarrolladores hace el resto, presentándonos alternativas con las que nunca habíamos soñado.

Lamentablemente, a veces, esas complejidades se extienden más allá de lo razonable y se nos ofrecen efectos que uno trata de mirar y así, a simple vista, nos abruman porque nos posibilitan la descarga de los demos completos pero estos son excesivos, incluyen demasiadas cosas y hay que irlos simplificando para llegar al meollo del asunto. Lo curioso es que cuando se llega a ese punto, todo es más simple de lo que parecía y uno se queda pensando ¿por que no empezarán por lo sencillo?

Ese es el caso de estos dos scripts que utilizan jQuery para generar una serie de efectos gráficos muy llamativos.

El primero se llama Adaptor y es un slider de imágenes con algunos efectos originales tales como Vertical 3D scroll y Horizontal 3D scroll. El demo completo puede verse en este enlace.

Acá, intento usar uno de ellos, el llamado scrollVert3d:

Teniendo jQuery en la plantilla, sólo se requiere un script, el que se llama box-slider-all.jquery.min.js que, en este caso, alojé en un servidor externo como DropBox.

<!-- el CSS lo ponemos antes de </head> -->
<style>
<!-- los valores de width y height dependerán del tamaño de las imágenes a mostrar -->
#viewport-shadow {
  position: relative;
  width: 635px;
}
#viewport, #box, .slide {
  list-style:none;
  height: 375px;
  width: 635px;
}
.slide img{
  height: 375px;
  width: 600px;
}
#viewport {overflow: hidden;}
#time-indicator {
  background-color: #2EDBAC;
  height: 3px;
  left:0px;
  position: absolute;
  top:388px;
  width: 0px;
}
</style>

<!-- el HTML lo ponemos en un post o en un elemento HTML -->
<div id="viewport-shadow">
  <div id="viewport">
    <ul id="box">
      <li class="slide"><img src="URL_imagen1"></li>
        ..... todas las imágenes que uno quiera .......
      </ul>
    </div>
  <div id="time-indicator"></div>
</div>

<!-- el script lo ponemos al final de la pagina o después del HTML -->
<script src="URL_box-slider-all.jquery.min.js"></script>
<script>
$(function () {
  var $box = $('#box'), $timeIndicator = $('#time-indicator'), slideInterval = 5000;
  var switchIndicator = function ($c, $n, currIndex, nextIndex) {$timeIndicator.stop().css('width', 0);};
  var startTimeIndicator = function () {$timeIndicator.animate({width: '600px'}, slideInterval);};
  $box.boxSlider({
    speed: 1000, autoScroll: true, timeout: slideInterval, effect: 'scrollVert3d', blindCount: 15, onbefore: switchIndicator, onafter: startTimeIndicator
  });
  startTimeIndicator();});
</script>

No hay manera de explicar los detalles uno por uno y hay que ver la página del autor para descubrir las distintas opciones pero, si se quiere utilizar de modo elemental, no hace falta mucho más que eso.

El otro script se llama Flux y también es un slider que incluye sofisticadas transiciones en 3D y cuyo demo original con todas las alternativas podemos ver acá.

En este caso, sólo intentaé usar el último, uno llamado Turn:

El script que necesitamos es flux.min.js que también podemos alojar el un servidor o colocar directamente en la plantilla y, como en el anterior, necesitamos tener jQuery instalado.

<!-- el CSS y el script los ponemos antes de </head> -->
<style>
div.surface{
  -moz-box-sizing:content-box;
  -webkit-box-sizing:content-box;
  -ms-box-sizing:content-box;
  box-sizing:content-box
  width:100%;
}
</style>
<script src='URL_flux.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
  if(!flux.browser.supportsTransitions)
    alert("Flux Slider requires a browser that supports CSS3 transitions");
  window.f = new flux.slider('#slider', {autoplay: false,pagination: false});
  $('#trans3d').bind('click', function(event){
    event.preventDefault();
    if(!flux.browser.supports3d){alert("Teste navagedor no soporta transiciones");return;}
    window.f.next('turn');
  });
});
//]]>
</script>

<!-- y el HTML lo ponemos donde se nos ocurra mostrar el slider-->
<div class="container">
  <div id="slidercontainer">
    <div id="slider">
       <img src="URL_imagen1" />
        ..... todas las imágenes que uno quiera .......
    </div>
  <a id="trans3d" href="#turn" class="new">Turn</a></div>
</div>

Birdie Adium
	Contiene 18 íconos de 128x128 en formato PNG. descargar

3D Silver Social Media
	Contiene 12 íconos de 16x16 128x128 en formato PNG. descargar

Jigsoaicons
	Contiene 424 íconos de 16x16, 24x24, 48x48 y 64x64, en formato PNG. descargar