Image Silider usando sólo CSS3

Deluxe Blog Tips nos muestra una forma de crear un slider de imágenes utilizando sólo CSS3. La idea es bastante simple pero, el problema es que no funcionará en ninguna versión de Internet Explorer ya que utiliza un selector que ese navegador aún no ha implementado. Del mismo modo, el resultado en Firefox no es tan interesante como lo es en Chrome, Safari y Opera ya que habrá que esperar a que salga la version 3.7 para que las transiciones se vean animadas.

Claro que todo esto no implica que no podamos jugar un rato y empezar a acostumbrarnos a lo que vendrá.

El slider lo creamos fácilmente:

<div id="elSlider">
  <img id="imgSlider1" src="URL_imagen_1" />
  <img id="imgSlider2" src="URL_imagen_2" />
  <img id="imgSlider3" src="URL_imagen_3" />
</div>
<div id="numSlider">
  <a href="#imgSlider1">1</a>
  <a href="#imgSlider2">2</a>
  <a href="#imgSlider3">3</a>
</div>

Y ahora, el CSS del demo:

<style>
  #elSlider {
    background-color: #000;
    height: 350px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    width: 450px;
    /* propiedades CSS3 */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 0 30px #666 inset;
    -webkit-box-shadow: 0 0 30px #666 inset;
    box-shadow: 0 0 30px #666 inset;
  }
  #elSlider img {
    height: 300px;
    left: -450px;
    opacity: 0;
    position: absolute;
    top: 25px;
    width: 400px;
    z-index: 1;
    /* propiedades CSS3 */
    -moz-transition: all linear 500ms; /* Firefox 3.7 */
    -webkit-transition: all linear 500ms;  /* Safari y Chrome */
    -o-transition: all linear 500ms;  /* Opera */
    transition: all linear 500ms;  /* w3org */
  }
  #elSlider img:target {
    left: 25px;
    opacity: 1;
    z-index: 9;
  }
  #elSlider img:first-child {
    left: 25px;
    opacity: 1;
  }
  #numSlider {
    text-align: center;
  }
  #numSlider a {
    background-color: #000;
    border: 1px solid #444;
    color: #FFF;
    font-family: Century Gothic;
    font-size: 24px;
    font-weight: normal;
    margin: 0 1px;
    padding: 1px 10px 3px;
    text-decoration: none;
    /* propiedades CSS3 */
    -moz-box-shadow: 0px 0px 20px #444 inset;
    -webkit-box-shadow: 0px 0px 20px #444 inset;
    box-shadow: 0px 0px 20px #444 inset;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
  }
  #numSlider a:hover {
    background-color: #222;
    border: 1px solid #666;
  }
</style>

123456

Simplexity
	Contiene 119 íconos de 256x256, en formato PNG.descargar

Onibari Light Icon Pack
	Contiene 18 íconos de 245x245, en formato PNG.descargar

Google debe haber comprado alguna licencia para monopolizar la etiqueta IFRAME porque la usa por todos lados. Ahora, en YouTube API Blog anuncia que están experimentando con un nuevo código para insertar videos que, justamente, hace uso de esa etiqueta:

<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0"></iframe>

Justifican el cambio explicando que con este nuevo código pueden verse los videos tanto con Flash como con los nuevos reproductores HTML5 dependiendo del navegador que se use y de las preferencias del usuario. Los navegadores compatibles son Firefox, Chrome, Opera, Internet Explorer 9, Safari y eventualmente, Internet Explorer con Google Chrome Frame instalado. Las preferencias debemos habilitarlas en nuestra cuenta, activando la versión beta de HTML5.

Por el momento, todo está muy verde pero, aparentemente, pasado el tiempo de pruebas, el nuevo código será el que nos ofrezcan por defecto.

En la práctica, por ahora podemos usar cualquiera de ellos sin notar grandes diferencias; basta saber que debemos colocar el ID del video a reproducir y establecer el tamaño modificando los atributos width y height.

REFERENCIAS:Google Operating System

Para quien utiilza alguno de los scripts de Dean Edwards que permiten agregar soporte para que Internet Explorer supere alguna de las limitaciones en la interpretación de ciertas propiedades CSS, ya hay una nueva versión disponible que ha agregado algunas funciones extras.

Hasta ahora, había dos versiones: IE7.js e IE8.js; ahora,se ha sumado IE9.js.

Cualquiera de ellas puede ser utilizada directamente desde los repositorios de Google Code así que no es necesario descargar los archivos. Para esta última versión, lo que deberíamos hacer es agregar lo siguiente antes de </head>:

<!--[if lt IE 9]>
<script src='http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js' type='text/javascript' />
<![endif]-->

No se trata de alguna clase de script milagroso, sólo sirve si nuestro diseño utiliza selectores ya que permite que IE interprete algunos de ellos:
::after, ::before, :active, :focus, :lang(), :checked, :disabled, :empty, :enabled, :first-of-type, :last-child, :last-of-type, :not(), :nth-child(), :nth-last-child(), :nth-last-of-type(), :nth-of-type(), :only-child, :only-of-type, :root, :target, etc

propiedades tales como:
border-spacing, box-sizing, content y opacity

y da soporte elemental para algunas etiquetas de HTML5:
article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time y video.

REFERENCIAS:Google Code

A medida que más sitios hablan del CSS3, algunos van descubriendo que ciertas caracterísiticas ya existian desde hace tiempo en los filtros de Internet Explorer. Sin duda, no son lo mismo pero algunas cosas pueden usarse con limitaciones y es bueno que los que crean tutoriales ejemplos los incorporen ya que sino, caemos en el error de creer que, o debemos limitarnos a lo que Internet Explorer decide u odiarlo porque no hace lo que quisiéramos que haga. Ninguna de las dos posturas es correcta, ese, como todos los demás navegadores, tienen bugs y tratan las propiedades de manera diferente así que, mejor nos acostumbramos a eso porque es algo que no va a cambiar jamás.

css3please.com es uno de esos tutoriales que ha comenzado a incorporar esos filtros y nos ayuda a utilizarlos, ya que nos permite ir viendo los resultados online y copiar el código necesario. Obviamente, no lo hará con todas las propiedades ya que no todas tienen un equivalente pero, es una buna forma de aprender.

La que me resultó más interesante es la rotación. Si bien en Internet Explorer hay un filtro para eso, está limitado a rotaciones simples de 90 grados o de 180 grados lo que hace que podamos "invertir" algo pero no "rotarlo" de manera libre:

-webkit-transform: rotate(VALORdeg);
-moz-transform: rotate(VALORdeg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=VALOR);
     donde:
          0 es no rotar
          1 rota 90 grados
          2 rota 180 grados
          3 rota 270 grados (-90 grados)

Gracias a otro filtro de IE llamado Matrix, también podemos rotar algo en ángulos diferentes. Es uno de esos filtros tan complejos que ni siquiera vale la pena entender si es que nos queremos limitar a hacer algo sencillo. Para eso está la página que nos ayuda con los datos y basta poner el ángulo para que nos de la respuesta.

Vamos a crear entonces un DIV con cualquier contenido y abusando un poco de algunas otras propiedades como las gradientes:

div.rotar {
  background-image: -moz-linear-gradient(100% 100% 90deg, #000, #662200);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#000), to(#662200));
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF000000', EndColorStr='#FF662200');
  border: 1px solid #FFF;
  color: #FFF;
  font-family: Verdana;
  font-size: 24px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  width: 250px;
}

<div class="rotar"> ....... </div>

Lo que veríamos es esto:

Aliquam luctus nisl vitae ligula pharetra quis sodales lectus suscipit!

Y ahora, lo rotamos 90 grados en un sentido:

.derecha90 {
  -moz-transform: rotate(45deg);  /* Firefox */
  -o-transform: rotate(45deg);  /* Opera */
   -webkit-transform: rotate(45deg);  /* Safari y Chrome */
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE */
}

<div class="rotar derecha90"> ....... </div>

Aliquam luctus nisl vitae ligula pharetra quis sodales lectus suscipit!

Y hacemos lo mismo en el otro sentido:

.izquierda90 {
   -moz-transform: rotate(-45deg);  /* Firefox */
  -o-transform: rotate(-45deg);  /* Opera */
  -webkit-transform: rotate(-45deg);  /* Safari y Chrome */
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476); /* IE */
}

<div class="rotar izquierda90"> ....... </div>

Aliquam luctus nisl vitae ligula pharetra quis sodales lectus suscipit!

Activity Feed es otro de los plugins sociales de Facebbok que podemos agregar en nuestro blog.

Lo que mostrará son las últimas referencias encontradas a un determinado sitio y será visible sin importar si los visitantes estan o no están logueados; si no lo están, se agregará automáticamente un botón para entrar. De alguna manera, es una forma de chequear quienes han marcado alguna entrada con Me Gusta o enlazado nuestra página.

Para usarlo, colocamos el Dominio del sitio que queremos mostrar (por ejemlo, el de nuestro blog) y luego, como con todos los demás, seleccionamos ancho, alto y alguna de las opciones gráficas disponibles, la última de las cuales llamada Recommendations, tildamos o destildamos según nos interese que se muestre algo si es que no se encuentra nada del sitio que seleccionamos.

Es importante establecer el dominio exacto porque el plugin permite rastrear dominios, subdominios o incluso páginas individuales.

Una vez que decidimos todo eso y estamos satisfechos con el resultado que puede ser previsualizado constantemente, hacemos click en Get Code y allí se nos dan dos opciones: usar un IFRAME o un script. Si elegimos el primero de ellos, basta copiar y pegar el código donde se nos ocurra mostrarlo, por ejemplo, en un elemento HTML de la sidebar.

Si elegimos el script, debemos verificar si ya tenemos agregado el cargador genérico para todos los plugins; si no es así, agregamos lo siguiente justo después de <body>:

<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({appId: 'PROFILE_ID', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>

Donde reeemplazamos PROFILE_ID por el número que nos identifica en Facebook y que veremos en la URL de cualquiera de nuestras páginas.

Hecho eso, agregamos el plugin donde se nos de la gana y para eso, basta colocar el siguiente código básico:

<fb:activity site="URL_elegida"></fb:activity>

o incluso, colocar las distintas opciones en el mismo código:

<fb:activity site="URL_elegida">" width="400" height="350" header="false" colorscheme="dark" font="tahoma" border_color="#FFF" recommendations="false"></fb:activity>

Una variante de este plugin es el llamado Recommendations y la forma de insertarla es exactamente la misma.

<fb:recommendations site="URL_elegida"></fb:recommendations>

El gadget Lista de blogs es interesante porque es una de las formas más sencillas de mostrar el contenido de los feeds de cualquier sitio pero, también lo podemos usar para mostrar los nuestros, por ejemplo, las últimas entradas.

Tiene una ventaja sobre otros sistemas: podemos mostrar miniaturas que se correspondan con las imágenes que haya en esas entradas pero tiene una limitación, sólo muestra una entrada por blog. Sin embargo, ya que los feeds son una dirección URL a la que podemos acceder agregándole algunos parámetros, podríamos utilizar esa facilidad para mostrar varias entradas del mismo sitio.

Los parámetros en cuestión son start-index max-results que son los mismos que se utilizan para agregar varios sitemaps. Lo empleamos agregándolos al final de la URL:

http://miblog.blogspot.com/feeds/posts/default?start-index=1&max-results=1

hará que se lea una sola entrada, la última ya que por defecto, los feeds están ordenados cronológicamente. Del mismo modo:

http://miblog.blogspot.com/feeds/posts/default?start-index=2&max-results=1 mostrará la segunda
http://miblog.blogspot.com/feeds/posts/default?start-index=3&max-results=1 mostrará la tercera

y así sucesivamente.

Entonces, vamos a agregar un elemento Lista de Blogs e iremos poniendo las URLs de nuestro sitio, cambiando start-index. Pondremos tantos como se nos ocurra y marcaremos las opciones a gusto.

Si guardamos eso veremos el gadget con las últimas entradas de nuestro blog pero, aún así, podríamos intentar personalizarlo más ya que tiene propiedades definidas por defecto por el mismo Blogger y como el código es accesible, nada impide que lo cambiemos. Entonces, primero crearemos un elemento Lista de blogs, agregaremos las URLs, guardaremos y luego, en la parte de Edición HTML expandiremos la plantilla y veremos el widget que se llamará BlogList1, BlogList2 o algo similar, dependiendo de si ya tenemos agregado otro gadget del mismo tipo:

<b:widget id='BlogList1' locked='false' title='EL TITULO' type='BlogList'>
<b:includable id='main'>
... borraremos todo lo que está acá y lo reemplazaremos ...
</b:includable>
</b:widget>

Ahora, borraré el contenido completo del includable y lo reemplazaré por otro donde he eliminado ciertas cosas y reemplazado las clases CSS para evitar conflictos:

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div class='milista' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<!-- el gadget es una lista -->
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<!-- cada item de la lista corresponde a una entrada -->
<li>
<!-- inicio rectángulo de cada entrada -->
<div class='UEcontenido'>
<!-- la imagen flotará a la izquierda -->
<div class='UEthumbnail'>
<b:if cond='data:item.itemThumbnail'> 
<!-- si en el post hay una imagen, la usamos -->
<img class='UEsithumb' expr:src='data:item.itemThumbnail.url'/>
<b:else/>
<!-- si no hay una imagen, ponemos una imagen personal -->
<!-- acá debemos poner la dirección URL de la imagen a utilizar -->
<img class='UEnothumb' src='URL_imagen_por_defecto'/>
</b:if>
</div>
<!-- el titulo y enlace de la entrada -->
<div class='UEtitulo'>
<a expr:href='data:item.itemUrl' target='_blank'><data:item.itemTitle/></a>
</div>
<!-- el texto con el resumen de la entrada -->
<div class='UEresumen'><data:item.itemSnippet/></div>
</div>
<!-- final rectángulo de cada entrada -->
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
</div>

Por supuesto, si se comprende qué es cada parte, esto podría organizarse de cualquier otra forma; en este ejemplo, sólo faltaría agregar el CSS antes de </head>:

<style>
.milista ul { border-bottom: 1px dotted #555; list-style-type: none; margin: 0; padding: 0; }
.milista ul li { background-color: #000; border-top: 1px dotted #555; clear: both; list-style: none; }
.milista ul li:hover { background-color: #123; }
.milista .UEcontenido { padding: 5px; }
.milista .UEtitulo { line-height: 50px; height: 50px; }
.milista .UEtitulo a { color:#ABC; font-family: Tahoma; font-size: 13px; font-weight: bold; }
.milista .UEtitulo a:hover { color: #CDE; text-decoration: none; }
.milista .UEthumbnail { float: left; margin: 0 5px 0 0; }
.milista img { height: 50px; width: 50px; }
.milista .UEresumen { clear: both; color: #999; font-family: Tahoma; font-size: 10px; }
</style>