Navegar etiquetas debajo de las entradas

Si entendí bien la pregunta de Josema, su idea es que, cuando se haga click en el enlace de una etiqueta, las entradas de esa etiqueta se muestren así como normalmente se muestran las entradas relacionadas debajo de cada post,es decir, una imagen y un resumen de la misma.

Hace mucho tiempo había puesto algo parecido que requería de la librería Prototype y que terminé quitando porque ... no me acuerdo por qué pero seguro que era una buena razón o no.

Ahora repito la experiencia y veremos qué pasa pero, sin librerías extras ya que luego de un par de años y doscientos mil quinientos treinta y dos errores, más o menos he logrado comprender como funciona esto de Json que es, claro, lo que debe usarse en cualquiera de estos casos porque no hay otra manera de filtrar y acceder a los datos de Blogger que no sea leyendo los feeds.

Lo que cuento es lo que puede verse en la parte inferior de las entradas individuales de este blog; allí, se ven las etiquetas que tiene la entrada (salvo cuando me olvido de ponerlas) y debajo, las entradas relacionadas que también se leen con Json y muestran cuatro entradas tomadas al azar. Los enlaces de esas etiquetas, abren las páginas por defecto que crea Blogger que son de tipo:

http://miblog.blogspot.com/search/label/NOMBRE_etiqueta

La idea es reemplazar esos enlaces para que, en lugar de abrir una página, se puedan ver sin salirse de la página y navegar por ellas, avanzando o retrocediendo por todas las entradas que existan con esa etiqueta, sin importar si son veinte o cientos ya que intentaremos no colapsar el sitio, cargando los scripts uno por uno y borrándolos de la memoria una vez que ya no se usan.

El criterio básico es utilizar el mismo esquema que en esta otra entrada y como no puedo pensar en abstracto y no existe un esquema idéntico en todas las plantillas, me limito a mostrar qué hice y las variaciones deberán ser investigadas ya que son casi infinitas.

Primero, expando la plantilla y busco el lugar donde tengo agregados los posts relacionados y allí, haré dos cosas, indicaré la altura del DIV que los contiene y debajo, agregaré una serie de etiquetas con IDs específicos que son en aquellas donde el script escribirá los datos:

<div class='post-footer-line post-footer-line-4'>
  <div id='postsrelacionados' style='height:190px;'>
    <script type='text/javascript'>mostrarrelacionados();</script>
  </div>
  <div style='clear:both;'/>
</div>

<div class='post-footer-line post-footer-line-5'>
  <div id='etiquetasbajopost' style='height:0px;'>
    <div id='navetiquetas'/>
    <div id='navetiquetassel'/>
    <div id='navetiquetasfooter'/>
  </div>
</div>

Si guardo, todo queda igual que antes, los posts relacionados no cambian y debajo hay etiquetas sin contenido que tienen altura cero justamente para ocultarlas ya que intentaré permutar entre ellos y el nuevo sistema, ocultando uno cuando se muestra el otro y viceversa.

Busco ahora el LOOP donde Blogger escribe las etiquetas y por las dudas, condiciono los enlaces porque sólo quiero que esto funcione en las páginas individuales:

<b:loop values='data:post.labels' var='label'>
  .......
  <b:if cond='data:blog.pageType == "item"'>
    <a expr:onclick='&quot;setnavetiquetas(\&quot;&quot; + data:label.name + &quot;\&quot;);return false;&quot;' href='javascript:void(0);' rel='tag'><data:label.name/></a>
  <b:else/>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
  </b:if>
  .......
</b:loop>

Y ahora, el script que va antes de </head> que también podemos condicionar.

<b:if cond='data:blog.pageType == "item"'>

<script type='text/javascript'>
//<![CDATA[
var laetiqueta; // es la etiqueta que se mostrará
var navetiquetasflagfirst = 0; // al inicio es cero
var labelsporpagina = 4; // definir cuántas entradas queremos ver
var labelanterior, labelsiguiente;

// esta es la función genérica que elimina las etiquetas y crea el resumen
// si ya la o usamos alguna similar no hace falta repetirla
function eliminartags(cual,longitud){
  var resumen = cual.split("<");
  for(var i=0;i<resumen.length;i++){
    if(resumen[i].indexOf(">")!=-1){
      resumen[i] = resumen[i].substring(resumen[i].indexOf(">")+1,resumen[i].length);
    }
  }
  resumen =  resumen.join("");
  resumen = resumen.substring(0,longitud-1);
  return resumen;
}

// inicializamos la etiqueta a mostrar porque un post puede tener varias
function setnavetiquetas(cual) {
  navetiquetasflagfirst = 0;
  laetiqueta = cual;
  navetiquetas(0);
  return false;
}

// es la función muestra las etiquetas y nos permite navegar por ellas
function navetiquetas(direccion){
  var p, parametros;
  if(direccion==-1) {
    // si navegamos hacia atrás
    p = labelanterior.indexOf("?");
    parametros = labelanterior.substring(p);
  } else if (direccion==1) {
    // si navegamos hacia adelante
    p = labelsiguiente.indexOf("?");
    parametros = labelsiguiente.substring(p);
  } else {
    // si es la primera vez que se ejecuta ocultamos los posts relacionados
    document.getElementById("postsrelacionados").style.height = "0px"; // ocultar
    // y mostramos este sistema
    document.getElementById("etiquetasbajopost").style.height = "270px"; // la altura
    // los parámetros para leer Json
    parametros = "?start-index=1&max-results=" + labelsporpagina + "&orderby=published&alt=json-in-script"
  }
  parametros += "&callback=shownavetiquetas";
  incluirscriptlabels(parametros);
}

// esta es la funcion que carga el script de manera dinámica
function incluirscriptlabels(parametros) {
  // si no es la primera vez, borramos el script anterior
  if(navetiquetasflagfirst==1) {removerscriptlabels();}
  // borramos todo y ponemos un texto o una imagen de carga
  document.getElementById("navetiquetas").innerHTML = "<div id='navetiquetasloading'></div>";
  document.getElementById("navetiquetassel").innerHTML = "";
  // este es el archivo con los feeds
  var archivofeeds = "/feeds/posts/default/-/" + laetiqueta + parametros;
  // lo cargamos y ejecutamos
  var nuevo = document.createElement('script');
  nuevo.setAttribute('type', 'text/javascript');
  nuevo.setAttribute('src', archivofeeds);
  nuevo.setAttribute('id', 'NAVLABELTEMPORAL');
  document.getElementsByTagName('head')[0].appendChild(nuevo);
  navetiquetasflagfirst = 1;
}

// esta es la función que remueve el script cargado previamente
function removerscriptlabels() {
  var el = document.getElementById("NAVLABELTEMPORAL");
  var padre = el.parentNode;
  padre.removeChild(el);
}

// esta es la función que cierra este sector y restaura los posts relacionados
function cerrarnavetiquetas() {
    document.getElementById("etiquetasbajopost").style.height = "0px"; // ocultar
    document.getElementById("postsrelacionados").style.height = "190px"; // la altura deende del diseño
}

// esta es la misma función de siempre que nos permite leer el feed
function shownavetiquetas(json) {
  var entry, posttitle, posturl, postimg, postcontent;
  var salida = "";
  labelanterior = "";
  labelsiguiente = "";

  // vamos a buscar las direcciones para navegar la lista
  for (var k = 0; k < json.feed.link.length; k++) {
    if (json.feed.link[k].rel == 'previous') {
      // esta es la página anterior
      labelanterior = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
      // esta es la página siguinte
      labelsiguiente = json.feed.link[k].href;
    }
  }

  // leemos tantas entradas como definimos
  for (var i = 0; i < labelsporpagina; i++) {

    // si no hay más, terminamos el bucle
    if (i == json.feed.entry.length) { break; }

    entry = json.feed.entry[i];

    // este es título de cada entrada
    posttitle = entry.title.$t;

    // buscamos la URL de la entrada
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

    // buscamos el contendio de la entrada y lo guardamos
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    } else {
      postcontent = "";
    }

    // buscamos la imagen o usamos una imagen por defecto
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = "URL_imagen_por_defecto"; // colocar dirección de la imagen
    }

    // terminada la lectura, vamos creando el código HTML
    // que en este caso tienen la misma clase CSS que los posts relacionados
    salida += "<div class='relsposts'>";
    salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
    salida += "<p>" + eliminartags(postcontent,75) + " ...</p>";
    salida += "</div>";
  }
  document.getElementById("navetiquetas").innerHTML = salida;

  // creo el HTML de la barra de navegación inferior
  salida = "<a href='javascript:cerrarnavetiquetas()' class='close'></a>"
  if(labelanterior) {
    salida += "<a href='javascript:navetiquetas(-1);' class='anterior'></a>";
  } else {
    salida += "<span class='deshabilitado anterior'></span>";
  }
  if(labelsiguiente) {
    salida += "<a href='javascript:navetiquetas(1);' class='siguiente'></a>";
  } else {
    salida += "<span class='deshabilitado siguiente'></span>";
  }
  salida += "<a href='javascript:navetiquetas(0);' class='inicio'>inicio</a>";
  document.getElementById("navetiquetassel").innerHTML = salida;

  // creo una línea más para dar la opcion de usar las páginas "normales"
  // y agrego un enlace para suscripciones 
  salida = "<a href='/search/label/" + laetiqueta + "' target='_blank'>ver p&aacute;gina de etiquetas</a>
  salida += "<a style='float: right;' href='/feeds/posts/summary/-/" + laetiqueta + "' target='_blank'>Suscribirse a " + laetiqueta + "</a>";
  document.getElementById("navetiquetasfooter").innerHTML = salida;

}
//]]>
</script>
</b:if>

Como siempre, algo de estilo a gusto de cada uno que también ponemos antes de </head>:

<style>
  /* el div contenedor */
  #etiquetasbajopost {
    height:0px;
    overflow:hidden;
  }
  /* el div con las entradas */
  #navetiquetas {
    height: 190px; /* la altura dependerá de los detalles personales */
    width: 100%;
  }
  /* cada una de las entradas */
  .relsposts {
    float: left;
    height: 180px;
    margin: 0 5px;
    overflow: hidden;
    padding: 5px;
    text-align: center;
    width: 130px;
  }
  .relsposts:hover {  /* si se quiere algún efecto */ }
  .relsposts a {
    color: #EEE;
    display: inline;
    font-family: Helvetica;
    font-size: 11px;
    line-height: 1;
  }
  .relsposts img {
    height: 72px;
    padding: 5px;
    width: 72px;
  }
  .relsposts h6 {
    display: table-cell;
    height: 5em;
    margin: 5px 0 0;
    overflow: hidden;
    padding-bottom: 2px;
    vertical-align: middle;
    width: 130px;
  }
  .relsposts p {
    color: #AAA;
    font-size: 10px;
    height: 4em;
    line-height: 1.2;
    margin: 5px 0 0;
    overflow: hidden;
    padding: 5px 0;
    text-align: left;
  }

  /* la navegación inferior */
  #navetiquetassel {
    height: 24px;
    line-height: 24px;
    margin: 20px auto 0;
    padding: 1px 10px;
    text-align: center;
    width: 500px;
  }
  /* las medidas dependerán de las imágenes */
  #navetiquetassel .anterior {
    background: transparent url(IMAGEN_ATRAS) no-repeat right 50%;
    float: left;
    height: 24px;
    width: 17px;
  }
  #navetiquetassel .siguiente {
    background: transparent url(IMAGEN_ADELANTE) no-repeat left 50%;
    float: right;
    height: 24px;
     width: 17px;
  }
  #navetiquetassel .close {
    background: transparent url(IMAGEN_CERRAR) no-repeat scroll left 4px;
    float: right;
    height: 24px;
    margin-left: 100px;
    width: 17px;
  }
  #navetiquetassel a { opacity: 0.8; filter:alpha(opacity=80); }
  #navetiquetassel a:hover { opacity:1;filter:alpha(opacity=100); }
  #navetiquetassel .deshabilitado { opacity:.3;filter:alpha(opacity=30); }

  /* la linea inferior */
  #navetiquetasfooter {
    height: 36px;
    line-height: 36px;
    margin: 0 auto;
    width: 500px;
  }
  #navetiquetasfooter a { /* propiedades de los textos */ }
  #navetiquetasfooter a:hover { /* si se quiere algún enlace */ }
  #navetiquetasfooter a.enlacefeed { float: right; }

  /* una imagen de carga temporal */
  #navetiquetasloading {
    background: transparent url(URL_IMAGEN) no-repeat 50% 50%;
    height: 190px;
    width: 100%;
  }
</style>

Swiffty es una herramienta de Google que convierte archivos de SWF de Flash en HTML5 y, pese a ser experimental, lo hace bastante bien con las limitaciones obvias de todo conversor, claro, ya que no funcionará en muchos casos y no tendrá sonidos pero de todos modos es más que interesante.

Lamentablemente, como para muchos, Chrome se ha transformado en el nuevo Dios Digital, la información que nos dan sobre el tema es errónea porque, en lugar de probar y ver y sacar conclusiones propias, hay quienes se limitan a repetir como loros lo que el mismo Google afirma, pese a que esa afirmación es falsa.

Uno entra en Swiffy y le aparece un cartel de advertencia diciendo que esto no funcionará en nuestro navegador (Firefox, por ejemplo) y claro, uno le hace caso porque es posible que así sea y quiere probar algo desconocido así que mejor seguir las reglas pero, uno también es de esos que usa el viejo método de ver para creer así que no se resigna a seguir las reglas a piejuntilla.

No, no es sólo por llevar la contra sino porque uno lee que lo que hace la herramienta es utilizar gráficos de tipo SVG (Scalable Vector Graphics) y esa clase de contenido, hace rato que está disponible en otros navegadores por lo tanto, es probable que también funcione y claro, así es; Firefox 5 lo muestra bastante bien, dependiendo del contenido ya que este tipo de cosas es algo que los navegadores van incorporando poco a poco y, como aún hay una monstruosa guerra de empresas e intereses, cada uno lo hace a su modo o como puede:

• w3.org
• Mozilla (Firefox)
• Microsoft (IE9)
• Webkit (Chrome y Safari)
• Opera

Tampoco lo de "HTML5" es tan así. Las etiquetas y scripts necesarios para mostrar este tipo de gráficos son genéricas así que pueden ser usadas en casi cualquier tipo de página web.

Basta de quejas que no le importan a nadie. Usé la herramienta para hacer pruebitas y funciona.

Uno selecciona el archivo SWF a convertir, acepta las condiciones y nos muestra el resultado junto con el original. Si vamos para abajo, allí veremos un enlace con la URL del archivo html que podemos descargar y utilizar en cualquier parte. Si lo abrimos con el block de notas, veremos algo así:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Swiffy output</title>
    <script src="http://www.gstatic.com/swiffy/v1/runtime.js"></script>
    <script> swiffyobject = { ... una larguísima cantidad de código ... }; </script>
    </head>
  <body style="overflow:hidden;margin:0;">
    <script>var stage = new swiffy.Stage(document.body, swiffyobject);</script>
    <script>stage.start();</script>
  </body>
</html>

Lo voy a poner en Blogger, olvidándome del HTML5; obvio, como es largo, lo pondré en un blog auxiliar copiando y pegando sólo los scripts; unos en el head y los otros en una entrada. Eso es todo, ahora, basta insertarlo con un IFRAME:

 

Un par de ejemplos más que se encuentran en l galería de Swiffy:

"¿Tiene usted transicionismo crónico?"

Dice Gem@ que su comentario no lo escribió ella sino su subconsciente pero poco importa ese detalle. Bien, diría yo ¿por qué no reconocerlo? SI ¿Será grave, doctor?

Así que acá vamos con el mismo slideshow originalmente llamado The trip of a lifetime y destruido por mi hace unos dias para poderlo probar en Blogger pero, ahora modificado aún más, haceindo uso y abuso de la propiedad transition para hacer casi lo mismo aunque claro, esta propiedad no es entendida por Internet Explorer pero igual, el slideshow seguirá funcionando normalmente.

No voy a inventar la rueda así que me basaré en lo que había antes que era bastante manual y seguiré en la misma línea para no complicarme la vida.

El HTML es similar:

<div id="contenedor2">
  <div id="screen2">
    <div id="pane2">
      <img src="URL_IMAGEN_1"/>
      <img src="URL_IMAGEN_2"/>
      <img src="URL_IMAGEN_3"/>
      <img src="URL_IMAGEN_4"/>
      <img src="URL_IMAGEN_5"/>
      <img src="URL_IMAGEN_6"/>
      <img src="URL_IMAGEN_7"/>
      <img src="URL_IMAGEN_8"/>
      <img src="URL_IMAGEN_9"/>
    </div>
    <div id="nav2">
      <div class="title2">ejemplo slideshow</div>
      <a href="javascript:void(0);" onclick="dtht(0,0);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(550,0);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(1100,0);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(0,400);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(550,400);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(1100,400);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(0,800);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(550,800);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(1100,800);" class="scrollTo"></a>
    </div>
  </div>
</div>

Nuevamente, todo se basa en la posición de las imágenes; sabiendo que todas miden 550x400 (o yo las fuerzo a que midan eso), las pongo una al lado de la otra y dimensiono el contenedor (pane2) para que "se acomoden" formando un rectángulo de 3x3; eso, lo hago dimensionando ese contenedor para que mida tres veces el ancho y tres veces el alto de cada imagen.

Luego, se mete ese enorme rectángulo dentro de otro más pequeño y a ese, se le pone la propiedad overflow:hidden para que sólo muestre una parte.

Como ese enorme rectángulo con las nueve imágenes, está posicionado de forma asoluta dentro el otro, basta cambiar sus propeidades left y top para mostrar otro sector y, como además, ese rectángulo tiene la propiedad tarnsition, cada uno de esos cambios se mostrará animado.

Todo eso, se define en el CSS que en este caso es este:

<style>
  #contenedor2 {
    background-color: #000;
    border-radius: 4px;
    box-shadow: 0 0 5px #ABC inset;
    height: 400px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    width: 550px;
  }
  #contenedor2 br {display:none;}
  #screen2 {
    height: 400px;
    left: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
    top: 0;
    width: 550px;
  }
  #pane2 {
    font-size:0;
    height: 1200px;
    position: absolute;
    top: 0;left: 0;
    width: 1650px;
    -moz-transition:all 0.7s ease 0s;
    -webkit-transition:all 0.7s ease 0s;
    -o-transition:all 0.7s ease 0s;
    transition:all 0.7s ease 0s;
  }
  #pane2 img {
    height: 400px;
    width: 550px;
  }
  #nav2 {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    left: 0;
    margin: 0;
    padding: 5px;
    position: absolute;
    top: 120px;
    width: 93px;
  }
  #nav2 a {
    background-color:#333;
    float: left;
    height: 25px;
    margin: 3px;
    overflow: hidden;
    text-decoration: none;
    width: 25px;
  }
  #nav2 a:hover, #nav2 a:focus { background: #F00; }
  #nav2 a:visited { background-color: #666; }
  #nav2 a:active, #nav2 a.active { background: #FFF; }
  .title {
    color: #FFF;
    font-family: Helvetica;
    font-size:12px;
    font-weight: bold;
    margin-bottom: 0.5em;
    text-align:center;
  }
</style>

Por último necesitamos JavaScript porque queremos cambiar esa posición con un click así que nos falta la función que es muy pequeña:

<script>
function dtht(l,t) {
  var obj = document.getElementById("pane2");
  obj.style.left = -l + "px";
  obj.style.top = -t + "px";
  return false;
}
</script>

ejemplo slideshow

Este es un script que permite agregar algo similar al Fan Box de Facebook pero, con los seguidores de Twitter.

Aunque no es un gadget oficial y es algo lento, parece funcionar bien.

Para usarlo, basta agregar lo siguiente en cualquier elemento HTML o donde quisiéramos verlo:

<div class="textwidget">
  <script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script>
  <div id="twitterfanbox">
    <script type="text/javascript">fanbox_init("minombre");</script>
  </div>
</div>

<style>
  .FB_SERVER_IFRAME {
    height: 250px !important;
    width: 290px !important;
</style>

Allí, sólo debemos cambiar minombre por el de nuestra cuenta y, eventualmente, modificar el tamaño en el estilo.

REFERENCIAS:blogtecnia

myustats es un sitio muy conocido que provee un gadget de estadísticas que puede ser agregado a cualquier página web.

Hasta acá, nada del otro mundo pero, ya son varios los que han preguntado por algo curioso y molesto que ocurre de modo aleatorio cada vez que se hace click en cualquier lugar de sus blogs.

La primera noticia de eso me llegó a través de Josep y no pude responderla ya que, como es algo que ocurre aleatoriamente, se hace difícil de ver sin embargo, él mismo descubrió el problema y tuvo la generosidad de informarme sobre eso en un comentario reciente.

Pasaron los dias y varios usuarios preguntaron lo mismo. Ahora, es Avibert quien consulta por lo mismo y me parece que es hora publicarlo ya que es un gadget de uso bastante común y el sitio en cuestión nada dice de ese detallecito lo cual es, a mi entender, una falta de respeto absoluta y una práctica bastante miserable como cualquier otra que usa el engaño para promover algo.

Lo que se abre es esta URL: http://www.polimalo.com/?u que no es otra cosa que el sitio del creador de myustats o por lo menos, eso dice la página: Created by David Fernández

¿Qué se debe hacer?

Eliminar cuaquier gadget de ese servicio y no usarlo nunca más. Así de simple.

Usar comentarios condicionales para eludir incompatibilidades con distintas versiones de Internet Explorer no es lo ideal porque lo ideal es resolverlas pero, tampoco es un pecado y es la forma más simple agrupar etiquetas específicas que sólo serán aplicadas a ese navegador y, sin duda, es un método mucho más flexible y seguro que utilizar hacks estrafalarios que no siempre dan resultados.

Este método permite agregar etiquetas de cualquier tipo, ya sean reglas de estilo específicas, como scripts o cualquier otra y las condiciones pueden ser utilizada tanto en el head de una página como en el body e incluso, dentro de una entrada de un blog.

El formato standard es el siguiente:

<!--[if IE]>
  ... acá ponemos las etiquetas que sólo se ejecutaran en Internet Explorer ...
<![endif]-->

Una serie de variantes permiten establecer las versiones de IE donde se aplicarán:

<!--[if IE 7]>
  ... sólo en IE version 7 ...
<![endif]-->

Con lt se indica menor que y con lte menor o igual que:

<!--[if lt IE 8]>
  ... versiones anteriores a la 8 ...
<![endif]-->

<!--[if lte IE 8]>
  ... IE8 o inferior ...
<![endif]-->

Con gt se indica mayor que y con gte mayor o igual que:

<!--[if gt IE 8]>
  ... versiones posteriores a la 8 ...
<![endif]-->

<!--[if gte IE 8]>
  ... IE8 o superior ...
<![endif]-->

También pueden usarse condiciones negativas con el carácter ! que indica NOT:

<![if !IE 7]>
  ... NO se está usando IE7 ...
<![endif]>

Algunos preguntan si es posible usar estos condicionales para detectar el navegador y crear condicionales para otros. La respuestas es no pero, sin embargo, si es posible condicionar algo para que sólo se ejecute en navegadores que no sean Internet Explorer y hay una confusión respecto a esa sintaxis que debe ser escrita de este modo:

<![if !IE]>
  ... esto sólo se ejecutará en navegadores que no sean Internet Explorer ...
<![endif]>

En este ejemplo, si se está utilizando IE se verá una imagen y en caso contrario, se verá otra:

<!--[if IE]>
  <img src="imagen_ IE_SI" />
<![endif]-->

<![if !IE]>
<img src="imagen_ IE_NO" />
<![endif]>

Para Microsoft, a todo navegador que no sea Internet Explorer se lo denomina downlevel browser y ellos simplifican las cosas de este modo:

<!--[if true]>
  ESTAS USANDO INTERNET EXPLORER
<![endif]-->

<![if false]>
  NO ESTAS USANDO INTERNET EXPLORER
<![endif]>

Así que con el ejmplo anterior, el resultado será el mismo:

Una animación con CSS es algo similar a una transisicón que se repite un número de veces y requiere de dos partes, establecer los intervalos y propiedades a modificar en @keyframes y la propiedad animation en cualquier etiqueta.

leer artículo actualizado

Dropdo es un servicio interesante ya que, a diferencia de otros que nos permiten compartir archivos, también nos da la opción de verlos sin necesidad de tener un programa instalado, algo que suele ser un problema sobre todo cuando se trata de documentos poco usuales.

Esta limitado a un máximo de 25MB por archivo y soporta imágenes (incluyendo las creadas con Photoshop, Illustrator o formatos como EPS y SVG); videos de diferente tipo, audio, documentos de Office u Open Opffice, PDFs, archivos de PowerPoint, RTFs, archivos de texto o conteniendo códigos, etc.

Todos los archivos pueden ser descargados o compartidos en Twitter y Facebook y no requiere registro alguno.

Además, ofrecen dos extensiones, una para Firefox y otra para Chrome que facilitan las cosas a la hora de subir archivos, agregando una opcion extra en el menú contextual.

Curiosamente, en los términos de uso, dicen que permiten el hotlinking de cualquier archivo lo que significa que podemos enlazarlos directamente desde cualquier página web y sólo piden que ... se haga con prudencia.

REFERENCIAS:Himsomnio

before es lo que está antes , after es lo que está después ... los pseudo-elementos ::after y ::before resultan ser muy sencillos de manejar y tener infinitas posibilidades ya que nos permiten agregar contenido utilizando el CSS.

leer artículo actualizado

Este es uno de los slideshows, sliders o rotadores de imágenes más simples de implementar que he visto últimamente, requiere el uso de jQuery y se llama Automatic Image Rotator.

En la página de los desarrolladores hay información abundante respecto a los detalles y una explicación clara de su funcionamiento pero, de todas maneras, para quien simplemente quiera copiar y pegar, las cosas son sencilla.

El HTML que va allí donde uno quiera mostrarlo, es un DIV donde hay dos contenedores, en el primero iran las imágenes y en el segundo los números que son los que controla, el slider:

<div class="main_view">
  <div class="window">
    <div class="image_reel">
      <a href="#"><img src="URL_IMAGEN_1.jpg" /></a>
      <a href="#"><img src="URL_IMAGEN_2" /></a>
      <a href="#"><img src="URL_IMAGEN_3" /></a>
    </div>
  </div>
  <div class="paging">
    <a href="#" rel="1">1</a>
      <a href="#" rel="2">2</a>
      <a href="#" rel="3">3</a>
  </div>
</div>

No hay limitaciones en cuanto a la cantidad de imágenes así que pueden agregarse todas las que se quiera.

Ahora el script..

Obviamente, debemos tener jQuery agregado en el head de nuestra página:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>

Y debajo, el plugin que funcionará cuando se haya cargado la página:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $(".paging").show();
  $(".paging a:first").addClass("active");
  var imageWidth = $(".window").width();
  var imageSum = $(".image_reel img").size();
  var imageReelWidth = imageWidth * imageSum;
  $(".image_reel").css({'width' : imageReelWidth});
  rotate = function(){
    var triggerID = $active.attr("rel") - 1;
    var image_reelPosition = triggerID * imageWidth;
    $(".paging a").removeClass('active');
    $active.addClass('active');
    $(".image_reel").animate({left: -image_reelPosition}, 500 );
  }; 
  rotateSwitch = function(){
    play = setInterval(function(){
      $active = $('.paging a.active').next();
      if ( $active.length === 0) {$active = $('.paging a:first');}
      rotate();
    }, 7000); // este es el valor que define la velocidad (7 segundos)
  };
  rotateSwitch();
  $(".image_reel a").hover(function() {clearInterval(play);}, function() {rotateSwitch();});
  $(".paging a").click(function() {$active = $(this);clearInterval(play);rotate();rotateSwitch();return false;});
});
//]]>
</script>

Un poco de CSS y eso es todo:

<style>
  .main_view { /* el contendor principal */
    position: relative;
  }
  .window {  /* el contendor con las imágenes */
    overflow: hidden;
    position: relative;
    /* debemos dimensionarlo */
    height: 175px;
    width: 550px;
  }
  .image_reel { left: 0; position: absolute; top: 0; }
  .image_reel img {
    float: left;
    /* conviene dimensionarlas */
    height: 175px;
    width: 550px;
  }
  .paging { /* la navegación a gusto de cada uno */
    background-color: rgba(146, 0, 0, 0.5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80920000,endColorstr=#80920000);
    zoom: 1;
    border-radius: 4px;
    bottom: 10px;
    display: none;
    height: 42px;
    line-height: 40px;
    position: absolute;
    right: 10px;
    text-align: center;
    width: 178px;
    z-index: 100;
  }
  .paging a { /* los números */
    color: #FFF;
    font-size: 20px;
    padding: 5px;
    text-decoration: none;
  }
  .paging a.active {
    background: #920000;
    border: 1px solid #610000;
    border-radius: 3px;
    font-weight: bold;
  }
  .paging a:hover { font-weight: bold; }
</style>

Elegant icons
	Contiene 100 íconos de 32x32, 64x64, 128x128 y 256x256, en formato PNG. descargar

Readability posee varios servicios gratuitos que permiten enviar páginas web a Kindle, el lector de ebooks. El primero es una extensión para Firefox que agrega un botón al navegador en el cual basta hacer click para enviar la página formateada. Esto, puede ser probado online en esta dirección.

El segundo, es un botón que puede ser insertado en cualquier página web y que permite que los visitantes guarden cualquier entrada en su propio sistema. Sólo basta copiar el código y pegarlo donde quisiéramos que se muestre:

<div class='rdbWrapper' data-show-send-to-kindle="1" data-show-read="0"></div>
<script type='text/javascript'>
(function() {
  var s = document.getElementsByTagName('script')[0],
  rdb   = document.createElement('script');
  rdb.type  = 'text/javascript';
  rdb.async = true;
  rdb.src   = document.location.protocol + '//www.readability.com/embed.js';
  s.parentNode.insertBefore(rdb, s);
})();
</script>

REFERENCIAS:labnol.org

CUENTAGOTAS pregunta como poner los comentarios en un pop-up al mismo tiempo que usamos el formulario incrustado en las páginas individuales de Blogger yademás, tener un enlace adicional en el home que permita agregar un comentario sin tener que abrir esas páginas individuales. En este caso, la pregunta se refiere fundamentalmente a que, hasta hace poco, era algo que se hacía utilizando una ventana modal y que, en el caso de LightWindow, es algo que ya no funciona.

No sé por qué no funciona más ni sé si con otro tipo de scripts pasa lo mismo; aparentemente, hay alguna clase de bloqueo que impide abrir ciertas direcciones de Blogger en un IFRAME que es lo que utiliza ese tipo de scripts y lo mismo ocurre con la variación que permite agregar Reply ya que usa el mismo criterio.

Como siempre me pareció bueno mantener esa posibilidad y para no andar dando vueltas tratando de entender lo que probablemente jamás pueda entender, decidí eliminar la sofisticación y usar el viejo sistema de pop-up y para eso, uso una función de JavaScript que agrego antes de </head>:

<script type='text/javascript'>
//<![CDATA[
function comPopUp(cual) {
  var wW = (screen.width-480)/2;
  var wH = (screen.height-550)/2;
  var enlacePopup = "<a class='comPopUp' ";
  enlacePopup += "onclick='javascript:window.open(this.href, \"bloggerPopup\", \"toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=480,height=550,left=" + wW + ",top=" + wH + " \"); return false;'";
  enlacePopup += "href='https://www.blogger.com/comment.g?blogID=NUESTRO_ID&postID=" + cual + "&isPopup=true'>";
  enlacePopup += " TEXTO O IMAGEN ";
  enlacePopup += "</a>";
  document.write(enlacePopup);
}
//]]>
</script>

donde NUESTRO_ID es un número que nos identifica en Blogger y que puede verse en la barra de direcciones del navegador cuando editamos la plantilla o creamos entradas:

http://www.blogger.com/html?blogID=0000000000

los valores 480 y 550 son el ancho y alto de esa ventana que, por supuesto, puede ser dimensionada de cualquier otra forma

y TEXTO O IMAGEN es eso que mostraremos; por ejemplo, un texto:

enlacePopup += "abrir comentarios en un pop-up";

o bien una imagen:

enlacePopup += "<img src='URL_imagen' />";

Ahora, hay que llamar a la función que lo único que hace es crear un enlace así que la agregaremos allí donde queremos verlo, por ejemplo, en el footer de las entradas:

<script type='text/javascript'> comPopUp(&#39;<data:post.id/>&#39;); </script>

El enlace generado tiene una clase llamada comPopUp así que podemos controlar sus detalles con CSS:

a.comPopUp {
  /* propiedades del enlace */
}
a.comPopUp:hover {
  /* efecto hover sobre el enlace */
}

Esto de tener que usar jQuery para todo, a mi no me convence. Será la nueva moda pero me gusta llevar la contra y buscar alternativas porque las librerías de scripts son cómodas pero, ya se sabe que el sedentarismo no es bueno así que siempre es mejor encontrar variantes o por lo menos, intentarlo.

En este caso se trata de Autogrow search, una forma de crear una etiqueta INPUT que es la que se utiliza en los buscadores para ingresar el texto y que tiene la característica de ampliarse y modificar otros detalles gráficos cuando se activa.

Evidentemente, la animación sin librerías externas es limitada pero, algo es algo y de este modo, no requerimos agregar scripts de ninguna clase ya que todo se hace con CSS.

El HTML es el que va donde se nos ocurra mostrarlo y sería algo así:

<div id="wrap-search">
<div id="search">
  <form class="form-search" method="get" action="/search" target="_blank">
    <input src="URL_IMAGEN" type="image"/>
    <input type="text" name="q" value="buscar" onfocus="this.value='';" onblur="this.value='buscar';" onmouseover="this.value='';" onmouseout="this.value='buscar';" />
    </form>
  </div>
</div>

En un DIV al que identificamos como wrap-search, colocamos otro llamado search; esta duplicación es la que nos permite crear un diseño gráfico diferente ya que hay dos rectángulos que ocupan el mismo espacio y a los que podemos aplicar propiedades distintas.

El contenido es una etiqueta FORM cuyo atributo action nos permite ver los resultados dentro del mismo sitio y el atributo target los abrirá en una nueva pestaña.

En una etiqueta INPUT de tipo IMAGE, colocamos una imagen que será la que funcionará como botón. Al hacer click en ella, se ejecutará el formulario.

En otra etiqueta INPUT de tipo TEXT, es donde se escribe el texto a buscar.

El CSS es la clave de todo y usa la propiedad transition para generar la animación que, por supuesto, no será visible en Internet Explorer así como algunas de las otras propiedades pero, de todas maneras, será totalmente funcional.

<style>
  #wrap-search {
    margin: 0 auto;
    width: 100px;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  #wrap-search br { display: none; }
  #wrap-search #search {
    background: -moz-linear-gradient(center bottom , #9B9B9B 0%, #A9A9A9 50%, #CACACA 50%, #D3D3D3 2550%);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9B9B9B),color-stop(0.5, #A9A9A9),color-stop(0.5,  #CACACA),color-stop(25.5, #D3D3D3));
     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9B9B9B', EndColorStr='#CACACA');
    border-radius: 5px;
    padding: 4px;
  }
  #wrap-search:hover { width:200px; }
  .form-search {
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#EBEBEB), to(#BCBCBC));
    background: -moz-linear-gradient(-90deg, #BCBCBC, #EBEBEB);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB', EndColorStr='#BCBCBC');
    border: 1px solid #747474;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF;
    height: 32px;
    position: relative;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  .form-search input[type='text'] {
    background: none;
    border: none;
    color:#6E7074;
    height: 34px;
    line-height: 34px;
    padding: 0 27px 0 6px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    text-shadow: 0 1px 0 #FFF;
  }
  #wrap-search:hover input[type='text'] { color:#597C84; }
  #wrap-search:hover .form-search {
    background: -moz-linear-gradient(-90deg, #9CC2CA, #DFECEF);
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#DFECEF), to(#9CC2CA));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#DFECEF', EndColorStr='#9CC2CA');
    box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
    color: #25464D;
  }
  .form-search input[type='image'] {
    height: 32px;
    opacity: .5;
    filter:alpha(opacity=50);
    position: absolute;
    right: 0px;
    top: 0px;
    width: 32px;
  }
  .form-search input[type='image']:hover {
    opacity: 1;
    filter:alpha(opacity=100);
  }
</style>

tutorialshock.com muestra varios modelos de cajas de textos creadas pura y exclusivamente usando CSS3 así que su uso en IE es limitado.

Complejos, bastante retorcidos y el demo de descarga sólo prevé el código para Chrome (es una nueva moda en muchos sitios) pero igual, se puede ver y sacar alguna idea.

Estos son sólo tres de los 16 modelos:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatatnon proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Si solemos insertar videos en nuestro sitio y hacemos esto con regularidad, es bastante fácil crear una función que genere el código de modo estandarizado para evitarnos la tediosa tarea de copiar y pegar una y otra vez.

leer artículo actualizado

Botones, botones y más botones. Eso es lo que está publicado en TripWire Magazine. Es una recopilación de 50 conjuntos de botones de todo tipo, listos apra descargar y usar en cualquier página web.

k_nelita pregunta cómo poner los distintos botones que ofrecen Facebook, Twiiter y otros servicios, debajo de las entradas, que se vean en una línea y que no se descompagine todo. Muchas veces me preguntan lo mismo y lo cierto es que no hay una solución universal porque todo depende de qué tipo de cosas se agregan, de cuales son sus tamaños y propiedades, etc, etc.

Algunos, sólo son enlaces, otros, iframes, otros scripts, otros, códigos especiales como los de Facebook o Google. Hay tantas posibilidades como sitios y servicios existen y por lo tanto, cada caso es diferente pero la base es siempre la misma, debemos saber qué ponemos y qué hace eso que ponemos ¿es un bloque y por lo tanto se generará un salto de línea?, ¿flota?, ¿tiene bordes? Demasiadas preguntas.

Normalmente, basta con usar propiedades como float y margin para acomodarlos pero, eso no siempre resulta y entonces, debemos volver a las fuentes y usar una simple tabla para evitar dolores de cabeza (Ver Malditas Tablas: 1, 2, 3, 4, 5).

Una tabla es como una hoja cuadriculada donde hay filas y columnas. En este caso, sólo requerimos una fila y una cantidad indeterminada de columnas; básicamente, esto es una tabla con tres columnas:

<table>
  <tr>
    <td> la celda de la izquierda </td>
    <td> la celda del centro </td>
    <td> la celda de la derecha </td>
  </tr>
</table>

¿Qué hace que usar estas etiquetas facilite las cosas? Que están pensadas para "acomodar" contenidos diversos y adaptarse a ellos.

En este ejemplo, voy a poner cinco contenidos diferentes:

el botón de Twitter que es un enlace y un script

<a class="twitter-share-button" data-count="horizontal" data-lang="es" data-via="Vagabundia" data-url="http://vagabundia.blogspot.com/" data-text="Vagabundia en Blogger" href="http://twitter.com/share" target="_blank">Tweet</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

el botón Me Gusta de Facebook con un iframe al que dimensionaré para que no sea tan ancho y tan alto:

<iframe src='http://www.facebook.com/plugins/like.php?href=http://vagabundia.blogspot.com/&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;height=60&amp;action=likefont=tahoma&amp;colorscheme=light' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px; height:25px'></iframe>

un enlace común a las etiquetas del blog y un par de imágenes cualesquiera.

Ahora, armaré la tabla:

<table class="tablapostfooter" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      ....... el código de Twitter .......
    </td>
    <td style="padding-top: 17px;">
      ....... el código de Facebook .......
    </td>
    <td>
      ....... una imagen .......
    </td>
    <td>
      ....... enlaces a etiquetas .......
    </td>
    <td>
      ....... otra imagen .......
    </td>
  </tr>
</table>

Y le agregaré propiedades elementales:

<style>
  .tablapostfooter {margin: 0 auto; border:none; width: 100%;}
  .tablapostfooter td {text-align: center; vertical-align: top;}
</style>

Por defecto, la tabla tendrá la altura de la celda más alta y los contenidos quedarán alineado verticalmente en su parte superior (vertical-align:top); luego, corregimos esos detalles usando padding-top si quermos "moverlos" individualmente una cantidad de pixeles que dependerán del contenido o bien usamos vertical-align:middle para centrarlos.

Obviamente, no es la única solución porque jamás hay una sola solución pero es simple y no requiere andar peleando con propiedades CSS que tal vez, no comprendemos.

Las tablas son odiadas por algunos pero, son como las lentejas: si quieres las usas y si no, las dejas.

Esta tarde, Gem@ me preguntaba si había visito la nueva opción que tiene Blogger Draft y que nos permite agregar un favicon en nuestro blog, algo elemental en cualquier sitio pero que en Blogger siempre ha tenido sus bemoles ya que no es sencillo encontrar servidores que acepten ese tipo de formato de imagen y se transforma en una odisea cuando hay anchos de banda restringidos.

Es fácil de aplicar. Basta entrar a nuestro blog pero via Blogger Draft y allí, en la parte superior de la primera ventana de Diseño, aparece la opción así que basta hacer click en Editar y seleccionar la imagen que debe estar en formato ICO.

Lo aconsejable es que esa imagen contenga dos tamaños, de 16x16 y de 32x32. Eso es algo que puede hacerse con muchos generadores online.

El resultado será que ... tal vez lo veamos y tal vez no.

¿Cuál es el problema? En realidad, ninguno. Hayamos agregado un favicon por este método o no, Blogger siempre incluirá el código porque lo hace mediante esta línea:

<b:include data='blog' name='all-head-content'/>

Así que, si vemos el código fuente de nuestro blog, allí encontraremos que dice esto:

<link href='http://miblog.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>

Y esa URL será nuestro favicon subido o el que usa Blogger por defecto; esto es lo que ha cambiado ya que antes, decía esto:

<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>

¿Y por qué no se ve? Porque los navegadores cachean las páginas que visitamos y una de esas cosas que se guarda en la caché es el favicon porque de ese modo, no deben cargarlo una y otra vez mientras navegamos; lo molesto es que esos favicons son remolones a al hora de actualizarse. Si han subido uno, coloquen la URL en el navegador y probablemente no vean la imagen; recarguen con CTRL+F5 para forzar la carga y seguramente verán la nueva imagen.

Usen un navegador alterno y es posible que vean el favicon nuevo, agréguenlo a un blog recién creado y también lo verán ya que nada tiene que ver con el tipo de plantilla que usemos.

La clave, entonces, es BORRAR la caché del navegador y dejarla limpita limpita limpita, eliminado todas las cookies ya que sino, no sólo no veremos el nuestro sino que tampoco veremos los que hayan cambiado otros ya que la caché permanece guardada cierto tiempo.

Usando JavaScript es sencillo cambiar las propiedades CSS de cualquier etiqueta, basta que las identifiquemos de alguna manera dándoles un ID, un nombre único. Es algo que usamos habitualmente para mostrar u ocultar cosas:

<script>
function permutardisplay(cual) {
  var micontenedor = document.getElementById(cual);
  if (micontenedor.style.display == "block") {
    micontenedor.style.display = "none";
  } else {
    micontenedor.style.display = "block";
  }
}
</script>

<div style="display: none;" id="micontenedor"> ... este es el contenido ... </div>

<a href="javascript:permutardisplay('micontenedor')"> click acá para permutar de estado </a>

click acá para permutar de estado

... este es el contenido ...

Pero, mostrar y ocultar no es lo único que puede cambiarse, lo mismo puede hacerse con cualquier otra propiedad ya que todas ellas tienen una equivalencia.

Las librerías como jQuery ya poseen una serie de funciones específicas para hacer eso lo que evita el trabajo de escribir códigos largos; por ejemplo, supongamos que queremos cambiar el color de los textos de un DIV, usando esa librería podríamos usar una función así:

function cambiarColorTexto(elcolor) { $("#nombreDIV").css("color",elcolor); }

Y de manera similar, podríamos cambiar el color de los enlaces que estén dentro del DIV:

function cambiarColorEnlaces(elcolor) { $("#nombreDIV a").css("color",elcolor); }

o el color del borde:

function cambiarColorBorde(elcolor) { $("#nombreDIV").css("border-color",elcolor); }

o el color de fondo de alguna otra etiqueta:

function cambiarColoFondo(elcolor) { $("#democolor span").css("background-color",elcolor); }

Lo podemos hacer mediante enlaces que llamen a esas funciones:

<a href="javascript:cambiarColorTexto('#F00')"> cambiar color textos </a>
<a href="javascript:cambiarColorBorde('#F00')"> cambiar color borde </a>
<a href="javascript:cambiarColorEnlaces('#F00')"> cambiar color enlaces </a>
<a href="javascript:cambiarColoFondo('#F00')"> cambiar color fondo </a>

Claro que no es necesario usar librerías, lo mismo puede hacerse sin ellas de distintos modos; una forma fácil es buscar ciertas etiquetas adentro del contenedor, guardarlas en una lista y cambiar su estilo:

<script>

// cambio el color de los enlaces buscando todas las etiquetas A que existan en ese DIV
function cambiarColorEnlaces(elcolor) {
  var contenedor = document.getElementById("nombreDIV");
  var lista = contenedor.getElementsByTagName("a");
  for(var i=0; i<lista.length; ++i) {lista[i].style.color = elcolor;}
}

// cambio el color de fondo de todas las etiquetas SPAN que existan en ese DIV
function cambiarColoFondo(elcolor) {
  var contenedor = document.getElementById("nombreDIV");
  var lista = contenedor.getElementsByTagName("span");
  for(var i=0; i<lista.length; ++i) {lista[i].style.backgroundColor = elcolor;}
}

// cambio el color del borde de ese DIV
function cambiarColorBorde(elcolor) {
  var contenedor = document.getElementById("nombreDIV");
  contenedor.style.borderColor = elcolor;
}

// cambio todo eso al mismo tiempo
function cambiarTodos(elcolor) {
  // el DIV
  var contenedor = document.getElementById("nombreDIV");
  // busco los enlaces y cambio el color
  var lista = contenedor.getElementsByTagName("a");
  for(var i=0; i<lista.length; ++i) {lista[i].style.color = elcolor;}
  // busco los spans y cambio el color
  var lista = contenedor.getElementsByTagName("span");
  for(var i=0; i<lista.length; ++i) {lista[i].style.backgroundColor = elcolor;}
  // cambio el color del borde
  contenedor.style.borderColor = elcolor;
}
</script>

<a href="javascript:void(0);" onclick="cambiarTodos('#FF0')"> todos amarillos </a>

Mauris sem nulla, tincidunt vel pretium sed, ultrices sit amet orci. Vivamus mi diam, scelerisque at congue in, gravida sit amet diam. Duis non quam orci. Sed a leo vel nisi rhoncus commodo in ac lorem. Pellentesque euismod, tortor id elementum fringilla, neque arcu facilisis lacus, sed aliquet neque magna lacinia odio. Nunc semper volutpat pellentesque. Curabitur hendrerit ullamcorper mi ut pharetra. Praesent tincidunt commodo gravida. In hac habitasse platea dictumst. Proin ante justo, iaculis nec accumsan vitae, blandit vel felis.

ENLACES: rojo | verde | amarillo | azul

FONDO: rojo | verde | amarillo | azul

BORDE: rojo | verde | amarillo | azul

TODOS: rojo | verde | amarillo | azul

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

Esos son dos ejemplos de acordeones creados sólo cón CSS que funcionan de manera normal en cualquier navegador pero que están preparados para soportar las animaciones que en este momento, sólo funcionan correctamente en Chrome, Opera y en Firefox 4.

El ejemplo de acordeón horizontal es el que mejor se adapta a cualquier stuación y puede utilizarse tanto con anchos fijos como con porcentajes; acá, a diferencia del original, usaré el primer método donde el HTML es una lista ordenada:

<ul class="accordion">
  <li class="slide-01">
    <div>
      <h2>Pestaña 1</h2>
      ....... el contenido .......
    </div>
  </li>
  <li class="slide-02">
    <div>
      <h2>Pestaña 2</h2>
      ....... el contenido .......
    </div>
  </li>
  <li class="slide-03">
    <div>
      <h2>Pestaña 2</h2>
      ....... el contenido .......
    </div>
  </li>
</ul>

Y el CSS sería algo así:

.accordion { /* el contenedor */
  list-style: none;
  overflow: hidden;
  margin: 0;
  width: 620px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
.accordion h2 { /* el título */
  color: #DEF;
  font-family: Helvetica;
  font-size: 20px;
  margin: 0 0 0.5em;
  text-align: center;
}
.accordion li { /* cada item de la lista */
  float: left;
  overflow: hidden;
  height: 210px; /* la altura máxima que le daremos */
  width: 200px; /* el ancho por defecto */
  /* las propeidades de animación */
  -moz-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  -moz-transition-delay: 0.15s;
  -webkit-transition-delay: 0.15s;
  -o-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.accordion li:first-of-type { /* bordes redondeados de la primera pestaña */
  -moz-border-radius: 10px 0 0 10px;
  -webkit-border-radius: 10px 0 0 10px;
  -o-border-radius: 10px 0 0 10px;
  border-radius: 10px 0 0 10px;
}
.accordion li:last-of-type{ /* bordes redondeados de la última pestaña */
  -moz-border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
  -o-border-radius: 0 10px 10px 0;
  border-radius: 0 10px 10px 0;
}
.accordion div { /* el contenido */
  padding: 10px;
}
.accordion:hover li {
   /* al colocar el cursor encima de cualquiera se reduce el ancho de todas */
  width: 100px;
}
.accordion li:hover {
   /* y aumenta el ancho de la que estamos seleccionando */
  width: 400px;
}
/* los colores de cada pestañ */
.slide-01 {background:#404951; color:#FFF;}
.slide-02 {background:#606971; color:#FFF;}
.slide-03 {background:#808991; color:#FFF;}

• Pestaña 1

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.

• Pestaña 2

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.

• Pestaña 3

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.

El vertical es un poco menos flexible porque para que funcione bien, requiere que la altura sea calculada; una variante de eso sería algo así:

#vertical {  /* el contenedor */
  height: auto;
  width: 600px;
}
#vertical li { /* cada item de la lista */
  height: 45px;
  width: 100%;
  /* las propeidades de animación */
  -moz-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  -moz-transition-delay: 0.15s;
  -webkit-transition-delay: 0.15s;
  -o-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
#vertical li:first-of-type { /* bordes redondeados de la primera pestaña */
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}
#vertical li:last-of-type { /* bordes redondeados de la última pestaña */
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  -o-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}
#vertical:hover li {
   /* al colocar el cursor encima de cualquiera se reduce el alto de todas */
  height: 45px;
  overflow: hidden;
  width: 100%;
}
#vertical li:hover {
   /* y aumenta la altura de la que estamos seleccionando */
  height: auto;
  width: 100%;
}

Para usarlo de este modo, basta agregar el ID a la etiqueta UL:

<ul class="accordion" id="vertical">

• Pestaña 1

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.

• Pestaña 2

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.

• Pestaña 3

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.

REFERENCIAS:csswizardry.com

WebIcons Pack 1 by procartoons
	Contiene 6 íconos de 128x128 en formato PNG. descargar

WebIcons Pack 2 by procartoons
	Contiene 6 íconos de 128x128 en formato PNG. descargar

WebIcons Pack 3 by procartoons
	Contiene 6 íconos de 128x128 en formato PNG. descargar