Una curiosidad: Logos de GMail con CSS3

Es probable que a nadie se le ocurra usar algo como esto pero, no deja de ser una curiosidad y bien armada.

Digo que sería raro que alguien quisiera utilizarlo porque está armado exclusivamente con CSS3, no se vería en todos los navegadores y la cantidad de reglas es ... bueno, muchas.

.gmail-logo, .gmail-logo *, .gmail-logo *:before, .gmail-logo *:after{margin:0;padding:0;background:transparent;border:0;outline:0;display:block;font:normal normal 0/0 serif;}
.gmail-logo{margin:0 auto;background:rgb(201, 44, 25);width:600px;height:400px;border-top:4px solid rgb(201, 44, 25);border-bottom:4px solid rgb(201, 44, 25);border-radius:10px;}
.gmail-logo .gmail-box{overflow:hidden;float:left;width:440px;height:400px;margin:0 0 0 80px;background:white;border-radius:5px;}
.gmail-logo .gmail-box:before{position:relative;content:'';z-index:1;background:white;float:left;width:320px;height:320px;border:100px solid rgb(201, 44, 25);margin:-310px 0 0 -40px;border-radius:10px;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);}
.gmail-logo .gmail-box:after{content:'';float:left;width:360px;height:360px;border:2px solid rgb(201, 44, 25);margin:10px 0 0 40px;-o-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}
.gmail-logo:after{content:'';position:relative;z-index:2;content:'';float:left;margin-top:-404px;width:600px;height:408px;display:block;background:-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.1)));}
.gmail-logo:hover{background:#313131;border-color:#313131;}
.gmail-logo:hover .gmail-box:before{border-color:#313131;}
.gmail-logo:hover .gmail-box:after{border-color:#313131;border-bottom-color:#fff;border-right-color:#fff;}

Sólo son ejemplos que muestran la versatilidad de estas nuevas propiedades y además, en este caso, Irham Kendeni, que es su desarrollador, se ha esmerado en darnos as explicaciones paso a paso lo que permite tratar de entender la idea y de ese modo, poder aplicar esas cosas ara resolver nuestras propias necesidades que, seguramente, serán mucho más modestas.

Y si alguno cree que eso fue excesivo, es porque no vieron este otro:

     

Internet: Una historia de amores y odios

REFERENCIAS:thedoghousediaries.com

CSSload: Gráficos de carga con CSS

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:

Muchos feeds y un solo script para mostrarlos (2)

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 { }

Muchos feeds y un solo script para mostrarlos (1)

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: Una instalación portable

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.

REFERENCIAS:blogtecnia.com

Monitorizar sitios con Google Docs

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.

Convertir textos en enlaces utilizando jQuery

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

Jugando con fontBomb

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 ...

Comentarios en Blogger: ¿Habrá cambios?

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.

Flotaciones, fondos, problemas, alternativas

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: Contenidos plegables

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');

Dos sliders con efectos 3D

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>

Otros tres packs de íconos

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