Angry Birds en cualquier página web

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