Y hacia allá vamos ...

PostRank es un servicio de estadísticas orientado a las redes sociales que fue adquirido por Google a mediados de este año y por lo tanto, está en pleno cambio. Entre esos cambios han incluido la posibilidad de agregar un gadget que muestra una lista con las entradas más populares de cualquier blog ... o lo que ellos han evaluado como más populares, claro.

Para quien le gusten estas cosas, basta entrar en la página correspondiente, configurar las opciones y luego, copiar y pegar el código que nos dan, allí donde queramos que se vea.

Quienes usen Wordpress, también disponen de un plugin que hace exactamente lo mismo.

Como el el gadget se adapta al ancho del contenedor donde será insertado, tal vez convenga que se incluya todo el código en un DIV que puede ser dimensionado y centrado; por ejemplo:

<div style="margin:0 auto;width:350px;">
  <!-- y acá pegamos el código que nos dan -->
</div>

Powered by Postrank

CSS3 Lightbox es una fantástica idea de codrops que hace uso de la pseudo-clase target por lo tanto, no funcionará en versiones anteriores a IE9 pero, de todos modos, vale la pena investigar porque permite crear algo así como una ventana modal para mostrar imágenes, son bastante sencillez.

Acá, me he limitado a "destruir" un poco el código de tal modo de hacerlo independiente pero, los demos originales pueden ser descargados del sitio del desarrollador y entendiéndolos, se puede jugar con diseños personales o estructuras diferentes.

cerrar

Básicamente, en este ejemplo, el HTML es el mismo que muestran en sus demos aunque le puse otros nombres a las clases para no confundirme; en lugar de usar una lista, como no quiero crear un álbum sino tener la posibilidad de mostrar esa ventana modal en cualquier circunstancia, uso un DIV:

<div class="vmcc3" id="ejemplo-1">
  <!-- la miniatura visible -->
  <a href="#image-1">
    <img src="URL_miniatura" />
  </a>
  <!-- la imagen completa oculta -->
  <div class="vmoverlay" id="image-1">
    <img src="URL_imagen" />
    <a href="#ejemplo-1" class="vmcerrar">cerrar</a>
  </div>
</div>

Alojando las imágenes en Picasa es bastante sencillo tener las dos direcciones URLs, la de la miniatura y la de la imagen completa.

El único detalle a tener en cuenta al crear el HTML es el ID que debe ser único (no repetido) y que se coloca en el DIV oculto y al que se debe hacer referencia en el enlace de la miniatura, anteponiéndole el carácter # ya que eso es l oque hará que funcione la pseudo-clase target.

A esto, le agregué otro ID al DIV contenedor que se utiliza en el enlace CERRAR para evitar que la página se desplazara demasiado; es algo que hay que perfeccionar y ver alternativas.

cerrar

Y ahora el CSS que incluye animaciones varias:

<style>
  /* el contenedor */
  .vmcc3 {
    display: inline-block;
    position: relative;
  }
  .vmcc3 > a, .vmcc3 > a img {display: block;}
  .vmcc3 > a {position: relative;}
  /* el div oculto donde se mostrará la imagen completa y ocupará toda la pantalla */
  .vmoverlay{
    background-color: rgba(0, 0, 0, 0.9);
    height: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    text-align: center;
    top: 0;
    width: 0;
    z-index: 99;
  }
  /* el enlace para cerrar la ventana modal es un texto pero puede ser una imagen */
  .vmoverlay a.vmcerrar {
    color: #FFF;
    font-size: 20px;
    left: 50%;
    line-height: 26px;
    margin-left: -25px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 70px;
    z-index: 1001;
    -moz-transition: opacity 0.3s linear 1.2s;
    -webkit-transition: opacity 0.3s linear 1.2s;
    -o-transition: opacity 0.3s linear 1.2s;
    -ms-transition: opacity 0.3s linear 1.2s;
    transition: opacity 0.3s linear 1.2s;
  }
  /* la imagen de tamaño completo */
  .vmoverlay img {
    max-height: 100%;
    position: relative;
  }
  /* la pseudo-clase es la que abrirá la ventana modal */
  .vmoverlay:target {
    bottom: 0;
    height: auto;
    padding-top: 100px;
    right: 0;
    width: auto;
  }
  /* las animaciones */
  .vmoverlay:target img {
    -moz-animation: fadeInScale 1.2s ease-in-out;
    -webkit-animation: fadeInScale 1.2s ease-in-out;
    -o-animation: fadeInScale 1.2s ease-in-out;
    -ms-animation: fadeInScale 1.2s ease-in-out;
    animation: fadeInScale 1.2s ease-in-out;
  }
  .vmoverlay:target a.vmcerrar { opacity: 1;}
  @-webkit-keyframes fadeInScale {
    0% { -webkit-transform: scale(0.6); opacity: 0; }
    100% { -webkit-transform: scale(1); opacity: 1; }
  }
  @-moz-keyframes fadeInScale {
    0% { -moz-transform: scale(0.6); opacity: 0; }
    100% { -moz-transform: scale(1); opacity: 1; }
  }
  @-o-keyframes fadeInScale {
    0% { -o-transform: scale(0.6); opacity: 0; }
    100% { -o-transform: scale(1); opacity: 1; }
  }
@-ms-keyframes fadeInScale {
    0% { -ms-transform: scale(0.6); opacity: 0; }
    100% { -ms-transform: scale(1); opacity: 1; }
  }
  @keyframes fadeInScale {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
</style>

En el demo original podrán ver muchas más alternativas tales como agregar títulos y textos así que parecería que todo se reduce a ir probando y viendo que sale:

cerrar

cerrar

En free-themes no hay muchas cosas pero son suficientes para divertirse un rato.

A Himsomnio le ha gustado la parte de cursores tipo mostacho ya que dice que serían perfectos para este blog pero, tengo mis dudas al respecto. De todos modos, acá están; son cinco modelos, cinco imágenes en formato PNG que puden ser utilizadas en la propiedad cursor de cualquier etiqueta aunque debe tenerse en cuenta que no serán visibles en Internet Explorer ya que en ese navegador, las imágenes de los cursores alternativos deben ser de formato CUR.

De todos modos, la sintaxis general de la propiedad es igual en todos los navegadores:

cursor:url(URL_imagen), auto;

Así que basta usar las imágenes que ellos nos proveen:

y agregar la propiedad a alguna clase CSS:

.bigote1 { cursor:url(http://free-themes.info/cursor/mustache/mustache2.png), auto }

Feliz Navidad para todos !!!Feliz Navidad

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

Agregar scripts es cosa de todos los días, hay que copiar, pegar y rogar que funcionen. En general, no hay problemas con eso pero, nunca está de más entender la sintaxis y, si es posible, mejorarla.

Es esto lo que nos recuerda un artículo de CSS Tricks y muestra las variantes que solemos encontrar en los distintos ejemplos que pululan en la web.

¿Cuál debemos usar? En realidad, casi cualquiera de ellos porque los navegadores las entienden todas y no se hacen problemas por los detalles que sólo quedan para ser discutidos por los puristas.

Lo cierto es que para agregar un script, basta poner la etiqueta y no es necesario ningún atributo extra aunque para la w3.org sigue siendo obligatorio excepto si se utiliza un documento de tipo HTML5:

<script>
  ....... el código .......
</script>

Si queremos ser prolijos, podemos agregar el atributo type aunque en realidad, este sólo es necesario cuando el código no es JavaScript cosa bastante inusual:

<script type="text/javascript">
  ....... el código .......
</script>

Lo que no deberíamos usar más es el atributo language; es totalmente innecesario y es considerado obsoleto:

<script language="javascript">
  ....... el código .......
</script>

<script type="text/javascript" language="javascript">
  ....... el código .......
</script>

En las plantillas de Blogger, tenemos una restricción extra, como se trata de un documento de tipo XHTML, ciertos caracteres como < > y & están "prohibidos" cuando se utilizan fuera de ciertos contextos y por eso, debemos agregar CDATA, para evitar que el sistema nos marque un error o cambie las comillas por entities como &quot;. Hacerlo de este modo, evitará que el código se "ensucie" o que, simplemente, no funcione:

<script type="text/javascript">
  //<![CDATA[
    ....... el código .......
  //]]>
</script>

Pero ... en Blogger siempre hay peros; esto sólo es válido en la plantilla misma, no lo es cuando se trata de elementos de tipo HTML o si agregamos scripts en las entradas.

Lo que lleva a recordar que no siempre es necesario que los scripts a utilizar estén en la plantilla; por el contrario, cuando se trata de cosas eventuales, efectos que usamos de tanto en tanto, podemos intentar agregarlas directamente en la entrada y de ese modo, ayudaremos a que nuestro sitio se abra con mayor velocidad ya que no se cargarán cosas innecesarias.

En un tiempo, esto era complicado porque había que escribir todo el script en una sola línea pero, en los nuevos editores de Blogger ese problema ya no existe y el script puede ser escrito de modo normal. Sin embargo, hay que ver caso por caso ya que hay ocasiones en que determinados caracteres como < siguen limitándonos ya que las reglas de Blogger son poco claras y las cambian cuando quieren.

A partir de enero, Microsoft comenzará a implementar una actualización automática para tratar de terminar de una buena vez con Internet Explorer 6 aunque eso tendrá un efecto relativo ya que afectará solamente a los usuarios que tengan activadas las actualizaciones automáticas de Windows y además, como cualquier otra, podrá ser cancelada.

De todos modos, Microsoft espera que de este modo, el uso de ese navegador se reduzca del 8% actual a menos del 1% lo cual lo relegaría a ser una pieza arqueológica; algo que ya es pero, aún no termina de ser asimilado por muchos usuarios.

Quienes usen XP serán actualizados a Internet Explorer 8 y quienes usen Vista o Windows 7 a la versión 9. De ahí en adelante, el navegador tendrá la opción de actualizarse automáticamente.

Muchos dicen ... yo no lo uso ... da igual, es parte de Windows así que, de todos modos, actualicen sí o sí.

Christmas icons by gakuseisean

descargar

The Real Christmas RSS Icons

descargar

Christmas Icon Set by IconEden

descargar

Christmas icons

descargar

More Christmas icons

descargar

Craftyslide es un pequeño plugin para jQuery que nos permite crear galerías de imágenes con mucha sencillez ya que basta agregarlas en una lista y llamar a la función, sin importar su tamaño original.

Para utilizarlo, basta descargar el ZIP que contiene el ejemplo básico, tener jQuery en nuestra plantilla y agregar el plugin y el CSS antes de </head> ya sea copiando y pegando directamente el código o utilizando archivos externos:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<link rel='stylesheet' href='URL_craftyslide.css' />

<script src='URL_craftyslide.min'></script>

El CSS sólo requiere que cambiemos una línea que es la que contiene la imagen que se utiliza para paginar la galería, subiendo esa imagen a cualquier servidor y colocando la nueva URL en esta regla de estilo:

#pagination li a {
  .......
  background: transparent url(URL_pagination.png) repeat 0 0;
}

Obviamente, cualquier otra parte del CSS puede ser personalizada, y en este ejemplo, he hecho eso con la paginación de tal modo que pueda verse correctamente, sin importar la cantidad de imágenes que tenga la galería.

#slideshow { /* es el DIV que contiene la galería */
  border: 15px solid #FFF;
  box-shadow: 0 3px 5px #999;
  margin: 0;
  padding: 0;
  position: relative;
}
#slideshow ul { /* la lista que contendrá las imágenes */
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}
#slideshow ul li { /* cada item de la lista */
  left:0;
  list-style-type:none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
}
#pagination { /* la paginación inferior optativa */
  clear: both;
  margin: 25px auto 0;
  padding: 0;
  text-align: center;
}
#pagination li { /* cada item de la paginación */
  display: inline;
  list-style-type: none;
  margin: 0 2px;
}
#pagination li a { /* cada imagen de la paginación es un enlace */
  background: transparent url(URL_pagination.png) repeat 0 0;
  display: inline-block;
  height: 10px;
  text-indent: -10000px;
  width: 10px;
}
#pagination li a.active { /* la imagen cambia cuando se activa */
  background-position:0 10px;
}
.caption { /* el texto optativo que se coloca en el atributo title */
  background: rgba(0,0,0,0.6);
  border-top: 1px solid #000;
  color: #FFF;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: lighter;
  left: 0;
  margin: 0;
  padding: 10px;
  position: absolute;
  width: 100%;
  z-index: 1;
}

Lo utilizamos colocando la lista allí donde se nos ocurra mostrar la galería:

<div id="slideshow">
  <ul>
    <li><img src="URL_IMAGEN_1" title="text imagen 1" /></li>
    <li><img src="URL_IMAGEN_1" title="text imagen 1" /></li>
    <!-- y seguimos agregando tantas etiquetas LI como querra,os -->
  </ul>
</div>

Y al final, llamamos a la función de este modo:

<script> $("#slideshow").craftyslide(); </script>

o establecemos parámetros:

<script>
 $("#slideshow").craftyslide({
    'width': 550,
    'height': 350,
    'pagination': true,
    'fadetime': 500,
    'delay': 2500
  });
</script>

donde:
width y height serán el tamaño total (por defecto 640x400)
pagination puede ser false en cuyo caso, funcionará como un slideshow
fadetime es el tiempo de demora entre dos imágenes
delay es el tiempo del slideshow si elegimos esa opción

Esta es una forma sencilla de agregar un efecto de reflejo en las imágenes, desarrollada por xhtml-lab.com. Está basada en algo simple, repetir las imágenes e invertir la de abajo usando para eso, la propiedad transform y, eventualmente, el filtro flipv en las versiones anteriores a IE9.

Si a esa imagen inferior, se le aplica opacidad, el resultado es algo similar a un reflejo.

Este sería el HTML básico:

<div class="image-block">
  <img src="URL_IMAGEN"/>
  <div class="reflection">
    <img src="URL_IMAGEN"/>
  </div>
</div>

Y estas las reglas de estilo:

<style>
  .image-block {
    height: 230px;
    overflow: hidden;
    width: 200px;
  }
  .reflection {
    position: relative;
  }
  .reflection img {
    opacity: 0.2;
    -moz-transform: scaleY(-1); /* Firefox */
    -webkit-transform: scaleY(-1); /* Chrome/Safari */
    -o-transform: scaleY(-1); /* Opera */
    -ms-transform: scaleY(-1); /* IE9 */
    transform: scaleY(-1); /* w3c */
    filter: flipv alpha(opacity='20'); /* IE8 */
  }
</style>

En la clase image-block defino width con el ancho de la imagen y height con un valor un poco superior al alto de la imagen para que, aplicando overflow: hidden; este DIV se corte.

En el artículo original, a todo esto se le agrega un DIV extra que se posiciona de modo absoluto sobre la imagen inferior y sobre la que se aplican ciertos filtros extras como gradientes. Esto puede dar cierto trabjo si el fondo no es oscuro pero, puede intentarse y ver qué sale:

<div class="image-block">
  <img src="URL_IMAGEN"/>
  <div class="reflection">
    <img src="URL_IMAGEN"/>
    <div class="reflection-over"></div>
  </div>
</div>

</style>
 reflection-over {
    position:absolute;
    top: 0;
    left: 0;
    height: 120px;
    width:200px;
    background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%);
    background-image:   -o-linear-gradient( rgba(255,255,255,0) 25%, rgb(255,255,255) 40%);
    background-image:     -webkit-gradient( linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0)));
    filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff);
}
</style>

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

Facebook ha ampliado su interacción con los sitios webs externos, permitiendo que se agregue un nuevo botón denominado Subscribe que permite que los usuarios, puedan suscribirse a las actualizaciones públicas de cualquier perfil, del mismo modo que se peude hacer en la misma red social (más información)

Puede ser agregado usando un IFRAME:

<iframe src="//www.facebook.com/plugins/subscribe.php?href=https%3A%2F%2Fwww.facebook.com%2Fminombre&layout=standard&show_faces=true&colorscheme=light&font=tahoma&width=450&appId=APP_ID" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px;" allowTransparency="true"></iframe>

o, si ya tenemos el script del API incorporado, podemos usar el código XFBML:

<fb:subscribe href="https://www.facebook.com/minombre" show_faces="true" font="tahoma" width="450"></fb:subscribe>

En cualquiera de los casos, hay que recordar que la URL a colocar es la de nuestro perfil ya que este botón no es para pages y que layout es el tipo de botón y puede ser standard (mínimo 225x35 pixeles), button_count (mínimo 90x20 pixeles) o box_count (mínimo 55x65 pixeles)

Asimismo, ya hace un tiempo, Twitter ha incorporado la posibilidad de agregar un botón extra llamado Follow Button que, a diferencia del común que permite compartir enlaces, es un botón pensado para ayudar a que los visitantes, se hagan seguidores de una determinada cuenta.

Las opciones son sencillas ya que casi no tiene, basta seleccionar la cuenta, si se va a visualizar sobre fondos claros u oscuros, definir si se mostrará la cantidad de seguidores y nada más.

Luego, hay que copiar el código que ellos nos indican y pegarlo allí donde se quiera verlo:

<a href="http://twitter.com/vagabundia" class="twitter-follow-button" data-lang="es">Follow @vagabundia</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

CSS3 Walking Man es un experimento de Andrew Hoyer sobre el que no se puede decir mucho, simplemente, hay que verlo en acción y, quien quiera más detalles, en el sitio del desarrollador está explicado paso a paso.

Funciona en Firefox, Safari, Chrome pero no en Internet Explorer. Simplemente, es increíble que todo sea hecho usando CSS: VER EXPERIMENTO.

Y para quien no pueda apreciarlo, este es el video:

Hacer una página web lleva su tiempo. Destruirla es rápido. Bueno, tampoco exageremos, podemos simular esa destrucción, sacarnos las ganas de ser un poco perversos y listo. Basta usar algunos de los tantos scripts que hay para eso y en este caso, los que vienen a ayudarnos son esos pajaritos de ceño fruncido que parece que están de moda.

A las múltiples versiones de los Angry Birds, ahora se le agrega esta posibilidad que ofrece Nokia Argentina. Mediante un bookmarklet que podemos agregar a los marcadores, haremos que los tan mentados pajaritos comiencen su tarea destructiva en cualquier página web a la que accedamos. Una vez que lo tenemos, hacemos click en él y esperamos un poco porque suele tardar un rato en cargarse. Luego, simplemente usamos el ratón para apuntar y lanzalos.

Quien quiera probarlo acá mismo, sólo debe hacer click en este enlace ... pero no abusen.

<a href="javascript:var%20s%20=%20document.createElement('script');s.type='text/javascript';document.body.appendChild(s);s.src='http://www.nokia.com.ar/NOKIA_ARGENTINA_78/Campaigns/PotenciaTuExperiencia/games/angryBirds/angrybirds.js?201111021138';void(0);"> jugar </a>

REFERENCIAS:labnol.org

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

La numeración con estilo que publican en 456 Berea Street es interesante y muy simple de aplicar. Utiliza el pseudo-elemento :before y dos propiedades de las listas que usualmente no incluimos: counter-reset y counter-increment que nos permiten generar contenido de modo automático es decir, en este caso, numerar una lista.

Vamos al ejemplo que es una variante del mostrado en CSS Tricks.

El HTML:

<dl class="numeros">
  <dt>Morbi porta facilisis leo, ut pretium elit gravida sed.</dt>
    <dd>consectetur felis</dd>
  <dt>Pellentesque malesuada sapien quis quam tincidunt.</dt>
    <dd>fringilla sed risus</dd>
  <dt>Donec scelerisque nisi ultricies felis varius luctus.</dt>
    <dd>lectus ipsum</dd>
</dl>

Y el CSS:

<style>
  .numeros { /* el contenedor es la etiqueta DL */
    background-color: #000;
    border: 1px solid #444;
    counter-reset: nombre_contador; /* ponemos el contador a cero */
    margin: 0 auto;
    padding: 20px 20px 0;
    width: 500px;
  }
  .numeros dt {
    font-size: 18px;
    position: relative;
  }
  .numeros dt:before { /* este es el número */
    content: counter(nombre_contador, decimal);
    counter-increment: nombre_contador;
    left: 0;
    position: absolute;
    top: -8px;
    /* los detalles de la fuente son a gusto de cada uno */
    background-color: #444;
    border-radius: 4px;
    color: #FFF;
    font-family: Arial;
    font-size: 48px;
    padding: 0 10px;
  }
  .numeros dd {
    color: #FFF;
    margin: 0 0 30px;
  }
  .numeros dt, .numeros dd {
    padding-left: 55px;
}
</style>

Morbi porta facilisis leo, ut pretium elit gravida sed.

consectetur felis

Pellentesque malesuada sapien quis quam tincidunt.

fringilla sed risus

Donec scelerisque nisi ultricies felis varius luctus.

lectus ipsum

¿Y para qué podría servir?

Justamente, elijo este demo porque usa las etiquetas DL DT y DD en lugar de las tradicionales etiquetas de lista (UL LI) ya que los comentarios de Blogger están armados con estas etiquetas así que, si quiseramos numerar los comentarios, podríamos utilizar este mismo esquema ya que todas estas propiedades funcionan en cualquier navegador, incluyendo IE8.

Si esa parte de nuestra plantilla tiene el código original y no hemos cambaido demasiadas cosas, bastaría agregar estas reglas antes de </b:skin>:

#comments-block {
  counter-reset: contadorcomentarios;
}
#comments-block dt {
  position: relative;
}
#comments-block dt:before {
  content: counter(contadorcomentarios, decimal);
  counter-increment: contadorcomentarios;
  position: absolute;
  right: 0;
  top: 0;
   /* las propiedades de la fuente del número */
  color: #888;
  font-family: Arial;
  font-size: 30px;
}

Y si hemos "manoseado" mucho esa parte de la plantilla, no hay problema, podemos hacer lo mismo e ir viendo qué otras propiedades debemos agregar o cambiar; en mi caso, funcionó perfectamente sin otro agregado y ahora, está aplicado a los comentarios del blog así que la numeración no depende ya de un script sino que es puro CSS.

El CSS3 nos permite agregar varios fondos en una misma etiqueta,; esto lo hacemos separándolos por comas; por ejemplo:

.demo {
  background-color: #FFF;
  background-image: url(IMAGEN1),url(IMAGEN2);
  background-repeat: no-repeat;
  background-position: left top, right bottom;
}

Como las gradientes son fondos, nada impide que las combinemos con otras imágenes:

.demo {
  background-color: #FFF;
  background-image: url(IMAGEN), -moz-linear-gradient(#FFF, #000);
  background-image: url(IMAGEN), -webkit-linear-gradient(#FFF, #000);
  background-image: url(IMAGEN), -o-linear-gradient(#FFF, #000);
  background-image: url(IMAGEN), -ms-linear-gradient(#FFF, #000);
  background-repeat: no-repeat;
  background-position: right bottom, left top;
}

Del mismo modo, podemos combinar varios tipos de gradientes, separándolas con comas:

background-image: linear-gradient(#000,#ABC,transparent), linear-gradient(right,#880, #234);

background-image: linear-gradient(#000000, #CBA, transparent), radial-gradient(#FF0, #F00,transparent);

background-image: linear-gradient(transparent, #000000, #ACA), linear-gradient(right, #DFD, #080)

Un slider es un control que permite "mover" cosas. Lo hemos visto muchas veces, por ejemplo, son lo que manejan el volumen de un video o audio y agregarlos a una web no es sencillo así que las librerías de JavaScript suelen incluir funciones especiales para que, manipularlos, se algo un poco menos dramático.

En script.aculo.us Slider Demos hay varios ejemplos de su uso que no es mucho y, tal vez, los más interesantes son aquellos que utilizan imágenes que sirven como botones para desplazarse.

<style>
  #track1-left { /* el límite izquierdo */
    background-color: #BDB76B;
    height:  12px;
    position:absolute;
    top:- 5px;
    left: 0;
    width: 1px;
  }
  #track1-right { /* el límite derecho */
    background-color: #BDB76B;
    height: 12px;
    position: absolute;
    top: -5px;
    left: 199px;
    width: 1px;
  }
  #track1 { /* el área de desplazamiento */
    background-color: #BDB76B;
  }
</style>

<div style="position:relative;">
  <!-- el slider -->
  <div id="track1" style="width:200px; height:2px;">
    <div id="track1-left"></div> <!-- el limite izquierdo -->
    <div id="track1-right"></div> <!-- el limite derecho -->
    <!-- el botón con la imagen -->
    <div id="handle1" style="width:15px; height:20px;">
      <img src="URL_slider" style="float: left;" />
    </div>
  </div>
</div>

<script>
  new Control.Slider('handle1', 'track1', { 
    onSlide: function(v) {
      // se detecta que se desplaza
    }, 
    onChange: function(v) {
      // se detecta que cambió de posición
    } 
  });
</script>

<style>
  #track2-top { /* el límite superior */
    background-color: #BDB76B;
    height: 1px;
    left: -5px;
    position: absolute;
    top: 0;
    width: 12px;
  }
  #track2-bottom { /* el límite inferior */
    background-color: #BDB76B;
    height: 1px;
    left: -5px;
    position: absolute;
    top: 199px;
    width: 12px;
  }
  #track2 { /* el área de desplazamiento */
    background-color: #BDB76B;
  }
</style>

<div style="position:relative;">
  <!-- el slider -->
  <div id="track2" style="width:2px; height:200px;">
    <div id="track2-top"></div> <!-- el limite superior -->
    <div id="track2-bottom"></div> <!-- el limite inferior -->
    <!-- el botón con la imagen -->
    <div id="handle2" style="width:19px; height:15px;">
      <img src="URL_slider.gif" style="float: left;" />
    </div>
  </div>
</div>

<script>
  new Control.Slider('handle2', 'track2', {
    axis: 'vertical',
    onSlide: function(v) {
      // se detecta que se desplaza
    }, 
    onChange: function(v) {
      // se detecta que cambió de posición
    } 
  });
</script>

Complicadito ... en fin, no es algo que tenga mucho uso; tal vez, una posibilidad interesante es la de poder cambiar las barras de desplazamiento que se ven en en cualquier elemento al que hemos dimensionado y cuyo contenido es muy grande. En Internet Explorer, las barras de desplazamiento pueden ser personalizadas utilizando CSS pero, lamentablemente, no pasa lo mismo en otros navegadores.

1. Phasellus nec urna nulla, quis cursus ante. Nullam luctus dapibus auctor!
2. Aliquam odio purus, tempus eu gravida vel, scelerisque quis mauris.
3. Vivamus viverra convallis lectus ut porttitor.
4. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
5. Pellentesque hendrerit sollicitudin elit, vitae venenatis arcu imperdiet nec.
6. Suspendisse sit amet lorem tortor.
7. Nulla congue porttitor leo, ac porttitor purus ultricies id?
8. Aliquam erat volutpat.
9. Sed ut magna sed tellus euismod lacinia eu at turpis.
10. Quisque risus arcu, sodales vitae sodales vitae, venenatis vitae diam.
11. Aliquam sagittis, quam ultrices interdum pulvinar, arcu purus ullamcorper erat, et aliquet sapien magna a velit!
12. Praesent vehicula risus eu est congue et vulputate ante egestas.
13. Aliquam posuere.

Usando Prototype + Scriptaculous y su plugin Slider que ya se carga de modo predeterminado si es que utilizamos las librerías de Google, es posible generar ese tipo de barra personalizada ... aunque no se si valdrá la pena.

De todos modos, acá hay un ejemplo:

<style>
  #scrollable2 {
    border-top: 2px solid #BDB76B;
    border-left: 2px solid #BDB76B;
    height: 120px;
    overflow: hidden;
    white-space: nowrap;
    width: 260px;
  }
  #wrap3 {
    border-left: 2px solid #BDB76B;
    height: 122px;
    left: 262px;
    position: absolute;
    top: 0;
    width: 10px;
  }
  #track3 { height: 120px; position: absolute; width: 15px; }
  #handle3 { height: 15px; width: 19px; }
  #wrap4 {
    border-top: 2px solid #BDB76B;
    height: 15px;
    left: 0;
    position: absolute;
    top: 120px;
    width: 262px;
  }
  #track4 { height: 10px; position: absolute; width:260px; }
  #handle4 { height:20px; width:15px; }
</style>

<div style="position:relative;">
  <div id="scrollable2">
    ....... acá colocaremos el contenido a mostrar  .......
    <div id="wrap3">
      <div id="track3">
        <div id="handle3"><img src="URL_imagen_slider_vertical" /></div>
      </div>
    </div>
    <div id="wrap4">
      <div id="track4">
        <div id="handle4"><img src="URL_imagen_slider_horizontal" /></div>
      </div>
    </div>
  </div>
</div>

<script>
  var slider3 = new Control.Slider('handle3', 'track3', {
    axis: 'vertical',
    onSlide: function(v) { scrollVertical(v, $('scrollable2'), slider3); }, 
    onChange: function(v) { scrollVertical(v, $('scrollable2'), slider3); }
  });
  var slider4 = new Control.Slider('handle4', 'track4', {
    onSlide: function(v) { scrollHorizontal(v, $('scrollable2'), slider4); },
    onChange: function(v) { scrollHorizontal(v, $('scrollable2'), slider4); }
  });
  function scrollVertical(value, element, slider) {
    element.scrollTop = Math.round(value/slider.maximum*(element.scrollHeight-element.offsetHeight));
  }
  function scrollHorizontal(value, element, slider) {
    element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
  }
  if ($('scrollable2').scrollHeight <= $('scrollable2').offsetHeight) {
    slider3.setDisabled();
    $('wrap3').hide();
  }
  if ($('scrollable2').scrollWidth <= $('scrollable2').offsetWidth) {
    slider4.setDisabled();
    $('wrap4').hide();
  }
</script>

Este es otro método sencillo para hacer que el home de un blog de Blogger no muestre las entradas sino algún tipo de presentación y, como cualquier otro, tiene sus pros y contras ya que todos ellos sólo son simulaciones incompletas (más información)

En este caso, vamos a usar la Configuración de Blogger para indicar, en la pestaña Formato, que la cantidad de entradas a mostrar en el home de nuestro sitio es cero:

Si hacemos esto, obviamente, no veremos nada de nada aunque las entradas seguirán mostrándose normalmente lo mismo que las páginas estáticas.

Lo que necesitamos ahora es aprovechar que Blogger nos permite agregar datos a las URLs sin que eso provoque errores; por lo tanto, si queremos ver completo ese blog con cero entradas en el home, podríamos usar una URL de este tipo:

miblog.blogspot.com/search?inicio

Con esas dos cosas en mente, trato de armar la plantilla.

Por ejemplo, voy a usar un blog "normal" y, justo antes de <div id='content-wrapper'> voy a poner esto que no es otra cosa que un simple enlace al blog completo:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <div id='homepage'>
    <a href='miblog.blogspot.com/search?inicio'> ENTRAR </a>
  </div>
</b:if>

Los detalles del CSS dependerán de muchas cosas, sobre todo, de la idea que se quiera llevar a cabo.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <style>
    #content-wrapper {
      display:none;
    }
    #homepage { /* es el DIV contenedor */ }
    #homepage a { /* es el enlace */ }
  </style>
</b:if>

Como estoy ocultando todo, no debo olvidarme de hacerlo visible en la página de diseño, sino, no podré acceder a los gadgets así que entre <b:skin> y </b:skin> coloco esto:

body#layout #content-wrapper {display:block;}
body#layout #homepage {display:none;}

Hay varios reproductores que permiten reproducir videos de YouTube sin utilizar el que provee el servicio. Aunque suelen ser archivos o scripts pequeños, para quien no quiera molestarse en alojar alguno de ellos en su propio servidor, siempre queda la alternativa de usar el JWplayer que puede ser configurado y personalizado, ayudándose con los datos que brinda su página de opciones.

La URL del reprooductor es http://player.longtailvideo.com/player.swf y el código a utilizar es similar al de cualquier otro archivo de Flash:

<object width="425" height="350" type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf?file=http://www.youtube.com/watch?v=XXXXXXXXXXX">
<param name="movie" value="http://player.longtailvideo.com/player.swf?file=http://www.youtube.com/watch?v=XXXXXXXXXXX" />
<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true"/>
<param name="allowScriptAccess" value="always" />
</object>

donde XXXXXXXXXXX son los once caraceteres que identifican a cada video y a l ocual, le podemos adosar otros parámetros tales como colores:

http://player.longtailvideo.com/player.swf?file=http://www.youtube.com/watch?v=XXXXXXXXXXX&screencolor=000000&backcolor=000000&frontcolor=FFFFFF&lightcolor=CCCCCC

Una variante de ese código, nos permite no tener que duplicar esos datos por comodidad, colocándolos en el parámetro flashvars:

<object width="425" height="350" type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="flashvars" value="file=http://www.youtube.com/watch?v=XXXXXXXXXXX">
<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true"/>
<param name="allowScriptAccess" value="always" />
</object>

Lo interesante de este reproductor, es que permite agregar otro tipo de archivos de video como FLV o MP4, utilizando la misma sintaxis:

<param name='flashvars' value='file=URL_archivo.FLV'>

"Entintar" una imagen, tiñéndola con un color es una idea de Impressive Webs y en su artículo, muestran varios métodos pero de tos ellos, me han gustado los dos que sólo requieren de CSS.

Opacidad, sombras, contraste, brillo. Muchos de esos efectos que podemos aplicar a las imágenes en cualquier software, también son propiedades que el CSS3 nos permite usar con cualquier elemento HTML de modo muy sencillo y en cualquier navegador de escritorio o dispositivo móvil.

leer artículo actualizado

El reciente anuncio de Google respecto a la eliminación de varios de sus servicios como Google Wave, Knol, Google Gears y otros, se suma a todos los que vienen dando de baja a lo largo del año. Si uno mira la lista, son muchos: Code Search, Google Buzz, Jaiku, Aardvark, Desktop, Google Pack, Google Web Security, Sidewiki; las listas se acumulan y hay de todo, productos conocidos y otros de los que seguramente nunca oímos hablar (más información 1 | 2 | 3)

Si esto sólo es el resultado de la indigestión del gigante que pretendió abarcar más de lo que podía o no, poco importa. Lo cierto es que entre los servicios que se eliminarán está Google Friend Connect y esto ha causado alguna preocupación entre los usuarios de Blogger ya que este sistema está integrado con el que se usa para los llamados Seguidores.

Friend Connect tiene previsto cerrar sus puerta en marzo del año 2012 pero, eso sólo será aplicado a todos los sitios excepto Blogger por lo tanto, estos blogs podrán seguir utilizando el gadget de Seguidores sin inconvenientes aunque ellos sugieren (obviamente), cambiar el perfil por el de Google+ y relacionar los blogs con su nueva red social, crear una page en Google+ y agregar el badge correspondiente.

En principio, que se elimine Google Friend Connect del gadget de Seguidores, debería aliviar sustancialmente la carga de este ya que es "pesado" y proclive a tener errores constantes. Se supone que si ellos eliminan toda esa parte, el código deberá ser más simple y por lo tanto, más estable ... en teoría, claro.

Así como hay gradientes lineales, también las hay de tipo radial donde el degradado se genera de modo circular.

Si nos limitamos a lo simple, la sintaxis de ambas no difiere demasiado, por ejemplo:

.gradiente-lineal {
  background: -moz-linear-gradient(#FFF, #000);
  background: -webkit-linear-gradient(#FFF, #000);
  background: -o-linear-gradient(#FFF, #000);
  background: -ms-linear-gradient(#FFF, #000);
}

.gradiente-radial {
  background: -moz-radial-gradient(#FFF, #000);
  background: -webkit-radial-gradient(#FFF, #000);
  background: -o-radial-gradient(#FFF, #000);
  background: -ms-radial-gradient(#FFF, #000);
}

Aunque en todos los casos debemos usar el prefijo necesario para que los distintos navegadores reconozcan la propiedad, en un esquema elemental, basta cambiar linear-gradient por radial-gradient indicando los colores inicial (comenzará el el centro ) y final.

Si queremos personalizarlas aún más, la sintaxis tampoco varía:

radial-gradient( posición, color-inicial, color-final )

donde la posición indica dónde comenzará la gradiente (top, right, bottom, left, center):

radial-gradient(center top, #FFF, #000); o radial-gradient(top, #FFF, #000);
radial-gradient(center bottom, #FFF, #000); o radial-gradient(bottom, #FFF, #000);
radial-gradient(left center, #FFF, #000); o radial-gradient(left , #FFF, #000);
radial-gradient(right center, #FFF, #000); o radial-gradient(right, #FFF, #000);

Claro que esto se complica un poco más ya que este tipo de gradientes posee otro parámetro opcional que podemos utilizar y que consta de dos palabras:

radial-gradient( posicion, shape size, color-inicial, color-final )

shape es "la forma" que adoptará y puede ser circle o ellipse
size indica la forma en que se expandirá y terminará y puede ser closest-side (o contain), closest-corner, farthest-side, farthest-corner (o cover)

radial-gradient(circle closest-side, #FFF, #000)

y todo puede combinarse:

radial-gradient(left top,circle closest-side, #FFF, #000)

Al igual que la lineales, si queremos usar varios colores, los vamos agregando uno tras otro, separados por comas:

radial-gradient(#FFF, #FF0, #000)
radial-gradient(#FFF, #F00, #FF0, #000)
radial-gradient(#FFF, #F00, #FF0, #0F0, #000)

Establecer el fondo de una etiqueta cualquiera es algo bastante común y no debería causar problemas si conocemos a forma en que funciona esta propiedad que, genéricamente, se define con background, con ella, podemos definir un color o una imagen como fondo de cualquier elemento.

leer artículo actualizado

Crear gradientes con CSS es uno de los métodos más sencillos para generar fondos que pueden ser aplicados a casi cualquier etiqueta HTML y si bien es algo que no está implementado en las versiones viejas de Internet Explorer, llegado el caso, podemos simularlas mediante filtros o ignorar ese navegador y establecer reglas de estilo diferenciadas.

Por ahora, los navegadores que aceptan esta propiedad, requieren que se utilicen prefijos distintos para cada uno de ellos así que deberemos usarlos todos para lograr el máximo de compatibilidad:

-moz-linear-gradient( parámetros ) /* en Firefox */
-webkit-linear-gradient( parámetros ); /* en Chrome/Safari */
-o-linear-gradient( parámetros ); /* en Opera 11 o superior */
-ms-linear-gradient( parámetros ); /* en Internet Explorer 10 */

Lo básico es entender que una gradiente no es otra cosa que un degradado de colores que se aplica a un fondo así que, lo más simple es crear una de dos colores y eso lo indicamos colocando como parámetros, esos dos colores, en formato hexadecimal, rgb(), rgba() o hsl():

.ejemplo {
  background: -moz-linear-gradient(#FFF, #000);
  background: -ms-linear-gradient(#FFF, #000);
  background: -o-linear-gradient(#FFF, #000);
  background: -webkit-linear-gradient(#FFF, #000);
}

Así, sin más datos, creamos una gradiente que va del blanco al negro y que llenará el espacio al que lo aplicamos, de modo proporcional:

Tal como está, el degradado será vertical pero la dirección es algo que podemos definir: en general, sería así:

linear-gradient( posicion, color-inicial, color-final )

La posición, indica dónde comenzará la gradiente y requiere de dos palabras o valores al igual que la propiedad background-position (top, right, bottom, left, center); si sólo ponemos una, se asume que la otra es center así que:

linear-gradient(center top, #FFF, #000); o linear-gradient(top, #FFF, #000);
linear-gradient(center bottom, #FFF, #000); o linear-gradient(bottom, #FFF, #000);
linear-gradient(left center, #FFF, #000); o linear-gradient(left , #FFF, #000);
linear-gradient(right center, #FFF, #000); o linear-gradient(right, #FFF, #000);

si queremos que los colores inviertan su orden reemplazamos top por bottom; si queremos que sea horizontal (de izquierda a derecha) usamos left y si usamos right:

Admite otros valores que no sean palabras, también pueden usarse pixeles, porcentajes o ángulos, tanto positivos como negativos y combinarse de cualquier forma pero esto, en Chrome/Safari, se complica bastante ya que, como siempre, los navegadores hacen lo que se les da la gana (más información) así que esto n oserá válido en Chrome:

linear-gradient(10px 90%, #FFF, #000);
linear-gradient(20px -45deg, #FFF, #000);

aunque podemos usar ángulos en cualquiera de ellos:

linear-gradient(45deg, #FFF, #000);

Bastaría seguir agregando colores separados por comas para que la gradiente se hiciera cada vez más complicada:

linear-gradient(#FFF, #FF0, #000)
linear-gradient(#FFF, #F00, #FF0, #000)
linear-gradient(#FFF, #F00, #FF0, #0F0, #000)

Los colores se muestran ordenados y se distribuyen proporcionalmente pero, basta agregarles un valor separado por un espacio para indicar la posición de cada uno de ellos:

linear-gradient(#FFF, #FF0 20%, #000)

Hasta acá, la gradiente la aplicamos a la propiedad background pero podríamos colocarla en al propiedad background-image y, de ese modo agregar colores de fondo, algo que tiene sentido si se utilizan golores en forma rgba() que nos dan al posibilidad de crear fondos con determinada opacidad:

background-color; red;
background-image: -XXX-linear-gradient(#000, rgba(200,150,200,.5), #000);

Templarian
	Contiene 265 íconos de 48x48, en formato PNG. descargar