La ballena de Twitter con CSS

Esto no es para copiar, esto no es para aprender, esto no es para ... nada excepto soprenderse por lo que vendrá y pasarse un rato largo intentando meter tanta cosa en una entrada de Blogger.

Pure CSS Fail Whale by Steve Dennis es eso, un dibujo realizado enteramente con CSS cuyo autor debe haberse tomado unas merecidas vacaciones luego de escribir semejante cantidad de códigos.

Lo que veremos dependera del navegador que utilicemos; en Internet Explorer no será otra cosa que un dibujo torpe [ ver captura ]; en Firefox 3.6 y Opera, será un dibujo estático; en Chorme y Safari será una animación que es el preludio de lo que nos depara el futuro, cuando el resto de los navegadores incorporen las propiedades necesarias.

Click para ver el resultado.

REFERENCIAS:Mamanunes en Twitter

En general, los comentarios condicionales son un recurso extremo que ayuda a que nuestra página web se vea correctamente en algunos navegadores. Es algo que siempre deberíamos evitar y buscar alternativas que suelen estar ahí aunque no las veamos.

Sin embargo, esto se hace cada vez más complicado, sobre todo, a partir de la llegada de la versión 8 de Internet Explorer que funciona de manera mucho más razonable que sus antecesores pero que sigue insistiendo con la tan mentada compatibilidad, haciendo que, si no lo indicamos expresamente, nuestras páginas se vean como si usáramos una versión anterior. Para colmo, no falta demasiado para que salga la versión 9 y allí, todo cambiará radicalmente porque se insiste en que incluirá la mayoría de las opciones que hoy no tiene y los demos demuestran que esto parece ser cierto.

Los comentarios condicionales son un hack, un truco inventado por Microsoft que nos permite ejecutar determinadas cosas sólo en su navegador; por ejemplo:

<!--[if lt IE 8]>
  [esto sólo se ejecutará en versiones inferiores a Internet Explorer 8]
<![endif]-->

Dentro de esas etiquetas puede ponerse cualquier cosa, estilos, scripts, etiqueta HTML, no hay demasaidas restricciones al respecto y las podemos agregar tanto en el head de la página como en el body. En Blogger, incluso, podemos utilizarlos en las mismas entradas.

Más allá de las condiciones normales, en impressivewebs.com muestran algunas otras que amplian las posibilidades.

Esta es una condición inversa que permite detectar todos los navegadores excepto Internet Explorer:

<!--[if !IE]>-->
  [esto sólo se ejecutará en todos los navegadores excepto en Internet Explorer]
<!--<![endif]-->

Esta es una variante de lo anterior donde entre "todos los navegadores" se agrega IE8:

<!--[if IE 8]><!-->
  [esto se ejecutará en todos los navegadores excepto en versiones inferiores a Internet Explorer 8]
<!--<![endif]-->

Las condiciones admiten operadores lógicos (AND y OR) así que:

<!--[if (IE 6)|(IE 7)]>
  [esto se ejecutará en IE6 o en IE7]
<![endif]-->

<!--[if (IE 6)&amp;(IE 7)]>
  [esto se ejecutará en IE6 y en IE7]
<![endif]-->

Aunque hace ya tiempo, en El escaparate de Rosa se mostraba la forma en que Blogger pagina los comentarios, son muchas las plantillas que no contienen los códigos necesarios y el tema sigue siendo motivo de consultas.

Si no utilizamos el sistema de avatares que es un agregado relativamente reciente, la forma de agregar el código faltante es el que muestra Rosa. En cambio, si utilizamos los avatares, el código es el mismo pero, la ubicación es levemente diferente.

En todos los casos, debemos buscar el includable correspondiente, expandiendo la plantilla y allí, agregaremos las líneas marcadas que son dos bloques idénticos ya que uno se muestra en la parte superior, antes del primer comentario y el otro en la parte inferior, luego del último.

<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>

      <h4>
        ......................................
      </h4>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
          &#160;
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
        </span>
      </b:if>

      <div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
        ......................................
      </div>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>
        ......................................
      </p>

    </b:if>

    <div id='backlinks-container'>
        ......................................
    </div>
  </div>
</b:includable>

Esta paginación es controlada pura y exclusivamente por Blogger mismo y se aplica sólo cuando hay más de 200 comentarios en una entrada.

Como todo lo que se agrega de modo automático, las posibilidades de personalización son pocas sin embargo, el código es editable y podemos modificarlo un poco. Para eso, debemos entender qué significa cada cosa y eso es bastante simple, sólo son cuatro enlaces de texto:

<data:post.oldestLinkText/> es el texto «El más antiguo
<data:post.olderLinkText/> es el texto ‹Más antiguo
<data:post.commentRangeText/> es el texto con la cantidad (por ejemplo 201 - 400 de 443)
<data:post.newerLinkText/> es el texto Más reciente›
<data:post.newestLinkText/> es el texto El más reciente»
&#160; es un caracter espacio

Como cualquier otro texto por defecto, podemos cambiarlos e incluso, colocar todo el SPAN dentro de un DIV para luego controlarlo con CSS:

<div class='paginacioncomentarios'>
  <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'> texto al primer comentario </a>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'> texto a la página anterior </a>
    <data:post.commentRangeText/>
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'> texto a la página siguiente </a>
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'> texto al último comentario </a>
  </span>
</div>

¿Podríamos usar una imagen? Sí, en lugar de poner el texto, colocamos una etiqueta IMG como lo haríamos con cualquier otro enlace.

Y por último, algo de CSS para modificar la parte gráfica:

.paginacioncomentarios { /* el div contenedor */
  text-align: center;
}
.paging-control-container {  /* sobrescribimos las propiedades por defecto de Blogger */
  float: none !important;
  font-family: Tahoma;
  font-size: 12px;
  margin: 0 !important;
}
.paging-control-container a { /* los enlaces */
  margin: 0;
  padding: 0 10px;
}
.paging-control-container a:hover {
  /* cualquier propiedad */
}
.unneeded-paging-control {
  /* si queremos que los enlaces que no se utilizan no se vean en absoluto, usamos display:none; */
}

Tweeties
	Contiene 12 íconos de 32x32, 48x48 y 80x80, en formato PNG.descargar

Twitter-Icons
	Contiene 8 íconos de 126x126 y 256x256, en formato PNG.descargar

TWcollagist
	Contiene 43 íconos de iferentes tamaños, en formato PNG.descargar

Twitter by Kamarashev
	Contiene 33 íconos de 32x32, 48x48, 128x128 y 256x256, en formato PNG.descargar

TweetMyWeb by LazyCrazy
	Contiene 10 en formato PNG.descargar

Twitter-Birds by SpoonGraphics
	Contiene 4 íconos en formato PNG.descargar

¿Qué puede decirse de PhotoFaceFun?

Que es eso, un sitio con muchos efectos para jugar, agergándolos a cualquier imagen de formato JPG.

Esta es otra variante de las Tablas de Contenido que, en lugar de mostrar las entradas ordenadas por categoría, lo hace ordenándolas por fecha.

Click para ver el ejemplo online.

Como la anterior, lo razonable es crear una página estática y agregar el código donde lo único que debemos modificar es la URL de nuestro sitio y si lo deseamos, el número de entradas a mostrar:

<script style="text/javascript" src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js"></script>
<script src="http://miblog.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>

La personalización no es tan sencilla ya que no utiliza clases y por lo tanto, para identificar las etiquetas deberemos encerrar toda nuestra entrada en alguna estiqueta con un ID, por ejemplo:

<div id="tablafechas">
  ... aquí ponemos todo ...
</div>

Con eso, podríamos agregar las propiedades para cada elemento:

<style>
#tablafechas { /* es el DIV contenedor /* }

/* las fechas /*
#tablafechas p { ... }
#tablafechas p a { ... }
#tablafechas p a:hover { ... }

/* el contenido de cada sector es una lista  /*
#tablafechas ul { ... }
#tablafechas li { ... }
#tablafechas li a { ... }
#tablafechas li a:hover { ... }
</style>

REFERENCIAS:abu-farhan.com/

Y seguimos jugando con esto del CSS3, viendo que las cosas se ponen muy interesantes porque no parece haber límites a la imaginación.

Esta vez, se trata de dos experimentos de W3avenue que crean acordeones desplegables sin necesitad de scripts de ninguna clase y que, para colmo, funcionan en todos los navegadores, incluyendo Internet Explorer. Uno de ellos genera un acordeón vertical y el otro un acordeón horizontal. En ambos casos, la página del autor nos facilita la descarga de los demos; un archivo CSS y un archivo HTML.

El HTML es la parte simple, sólo son listas de este tipo:

<ul>
  <li>
    <h3>Título 1</h3>
    <div> ... el contenido ...</div>
  </li>
  <li>
    <h3>Título 2</h3>
    <div> ... el contenido ...</div>
  </li>
  <li>
    <h3>Título 3</h3>
    <div> ... el contenido ...</div>
  </li>
</ul>

La única diferencia entre los dos modelos es que las colocamos dentro de DIVs que tienen una clase diferente:

<div class="verticalaccordion">
  ... aquí ponemos la lista y se generará un acordeón vertical ...
</div>

<div class="horizontalaccordion">
  ... aquí ponemos la lista y se generará un acordeón horizontal ...
</div>

Hasta acá, no debería haber problemas; puede haber tantas pestañas como se nos de la gana y el contenido de cada una es cualquier código HTML válido.

Lo que las diferencia es el CSS que es bastante sofisticado. El más simple y flexible es el del acordeón vertical:

<style>
.verticalaccordion>ul { /* este es el DIV contenedor que dimensionamos y en este caso lo centramos */
  margin: 0 auto;
  padding: 0;
  list-style: none;
  width: 500px;
}
.verticalaccordion>ul>li { /* definimos cada item de la lista  */
  display: block;
  height:40px; /* la altura de las pestañas */
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  text-align:center;
  width: 500px;
  /* la parte personalizable */
  background-color:#303941;
  transition: height 0.3s ease-in-out;
  -moz-transition: height 0.3s ease-in-out;
  -webkit-transition: height 0.3s ease-in-out;
  -o-transition: height 0.3s ease-in-out;
}
.verticalaccordion>ul>li>h3 { /* el titulo de cada pestaña   */
  display: block;
  margin: 0;
  padding: 10px;
  height: 19px;
  /* la parte personalizable */
  color: #000;
  border-top:1px solid #303941;
  font-family: Lucida Grande;
  font-size:20px;
  text-decoration:none;
  text-transform:uppercase;
  background: #CCC;
  background: -moz-linear-gradient( top, #999999, #cccccc);
  background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
}
.verticalaccordion>ul>li>div { /* el contenido oculto */
  margin: 0;
  overflow: auto;
  padding: 10px;
}
.verticalaccordion>ul>li:hover { /* que se despliega al poner el cursor del ratón encima */
height: 100%;
}
.verticalaccordion:hover>ul>li:hover>h3 { /* efecto hover sobre los títulos */
  color: #FFF;
  background: #000;
  background: -moz-linear-gradient( top, #454545, #000000);
  background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";
}
.verticalaccordion>ul>li>h3:hover {
  cursor:pointer;
}
</style>

Y este será el resultado:

• Mi primer ejemplo

  Suspendisse sed lacus eget urna tincidunt aliquet. Cras dignissim facilisis ligula non semper! Donec porta adipiscing bibendum. Integer sit amet sem at elit luctus faucibus. Sed sollicitudin sem sed velit euismod rutrum. Aliquam fringilla elit et enim dictum sodales. Fusce augue magna, vestibulum rhoncus vehicula vitae, interdum ac purus! Aenean tellus dolor, vulputate in congue sit amet, dignissim eu erat. Nam dapibus, mauris dictum auctor tempus, sem nunc volutpat nisl, at fermentum odio quam sit amet est. Aliquam et nisl eu elit bibendum malesuada.

• Una imagen

  

  café ... mucho café

• Buscador

  
  

El acordeón horizontal tiene diferencias importantes, una de ellas es que debemos establecer su altura como fija así que el resultado es menos flexible:

<style>
.horizontalaccordion>ul { /* este es el DIV contenedor que dimensionamos y en este caso lo centramos */
  margin: 0;
  padding: 0;
  list-style:none;
  height: 300px;
}
.horizontalaccordion>ul>li { /* definimos cada item de la lista */
  display: block;
  float: left;
  height: 300px;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 40px;
  /* la parte personalizable */
  background:#303941;
  transition: width 0.3s ease-in-out;
  -moz-transition: width 0.3s ease-in-out;
  -webkit-transition: width 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out;
}

.horizontalaccordion>ul>li>h3 { /* el titulo de cada pestaña */
  display: block;
  float: left;
  margin: 0;
  padding: 10px;
  height: 19px;
  width: 280px;
  /* la parte personalizable */
  border-left: 1px solid #303941;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  background:#CCC;
  white-space: nowrap;
  /* los efectos  para los diferentes navegadores */
  -moz-transform: rotate(90.0deg) translate(-40px,0px);
  -moz-transform-origin: 0 100%;
  -o-transform: rotate(90.0deg) translate(-40px,0px);
  -o-transform-origin: 0 100%;
  -webkit-transform: rotate(90.0deg) translate(-40px,0px);
  -webkit-transform-origin: 0 100%;
  transform: rotate(90.0deg) translate(-40px,0px);
  transform-origin: 0 100%;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0) progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)" "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
  background: -moz-linear-gradient( top, #999999, #cccccc);
  background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
}
.horizontalaccordion>ul>li>div {  /* el contenido oculto */
  display: none;
  float: left;
  height: 280px;
  margin: 0;
  overflow: auto;
  padding: 10px;
  position: relative;
  width: 320px;
  left: 40px;
  top: -40px;
  *left:0px; *top:0px; /* esto es necesario para evitar problemas en IE7 */
}
.horizontalaccordion>ul>li:hover { /* que se despliega al poner el cursor del ratón encima */
  overflow: hidden;
  width: 380px;
}
.horizontalaccordion:hover>ul>li:hover>div {
  display: block;
}
.horizontalaccordion:hover>ul>li:hover>h3 { /* efecto hover sobre los títulos */
  background: #000;
  color: #FFF;
  background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
  background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0) progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)" "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";
}
.horizontalaccordion>ul>li>h3:hover {
  cursor: pointer;
}
</style>

Y esto es lo que veremos:

• Mi primer ejemplo

  Suspendisse sed lacus eget urna tincidunt aliquet. Cras dignissim facilisis ligula non semper! Donec porta adipiscing bibendum. Integer sit amet sem at elit luctus faucibus. Sed sollicitudin sem sed velit euismod rutrum. Aliquam fringilla elit et enim dictum sodales. Fusce augue magna, vestibulum rhoncus vehicula vitae, interdum ac purus! Aenean tellus dolor, vulputate in congue sit amet, dignissim eu erat.

• Una imagen

  

  café ... mucho café

• Buscador