Grooveshark: Música, música, música

Para mi, Grooveshark es un vicio que vino a reemplazar al bloqueado Pandora y al famoso spotify que están vedados para quienes viven detrás de los muros del autodefinido primer mundo. Pero, para no llorar sobre la leche derramada ni sentirse un paria en un mundo donde hay hijos y entenados, Grooveshark, en muchos sentidos, es mejor que todos ellos por una simple razón: es un servicio gratuito, sin limitaciones y funciona rápido así que me parece que vale la pena que cualquiera que quiera escuchar música, lo pruebe.

Si bien podemos entrar en la página, buscar y escuchar casi cualquier cosa, al registrarnos gratuitamente, nos permiten crear y mantener listas de reproducción, favoritos y organizar nuestra música online, subiéndola directamente o accediendo a los millones de temas disponibles.

Para quienes no quieren usar el navegador para estas cosas, hay una alternativa llamada GrooveShark Portable y ya que estamos, a eso le podemos sumar SciLor’s Grooveshark Downloader, otro programa portable con el cual podremos descargar las canciones.

Quienes tengan una web y quieran agregar música, tambien pueden usar los widgtes que se crean al hacer click en el botón Exportar:

Se abrirá una ventana donde podremos definir el modelo gráfico (por ahora no hay muchos), los colores, tamaños, etc y luego, seleccionar canciones individuales o playlists completas; el resultado, será un código HTML que podemos agregar en cualquier sitio y que es similar a cualquier otro objeto de Flash. Como eso lo hacemos desde nuestra cuenta personal, podremos crear todas las que se nos ocurra y editarlas en cualquier momento.

Esto no es para quienes les gusta mantener el código minimizado. Son decenas de líneas pero nuestra las posibilidades del CSS3.

BonBon Sweet CSS3 Buttons está pensado para poder crear botones sofisticados pero no sé muy bien en qué navegador han pensado. En Internet Explroer no se ve nada (claro), en Firefox se muestran bien pero sin animaciones y en Chrome, aunque se supone que fue esta optimizado para ese navegador, se ven fondos grises indeseables. De todas maneras, es un buen intento y puede servir para aprender un poco.

No es difícil de usar, basta copiar y pegar el estilo del archivo buttons.css que se encuentra dentro del ZIP que podemos descargar en la página del autor y allí, cambiar la URL de una imagen que se utiliza como fondo transparente, llamada noise.png que también está junto al resto del demo.

Para aplicarlo, basta usar una clase CSS a cualquier enlace; por ejemplo:

<a href="la_URL" class="button"> el texto </a>

Eso crearía el botón más simple al que podemos agregarle más clases con diferentes opciones; por ejemplo, el color se define con cinco clases: orange, pink, blue, green, transparent así que si puesiéramos esto, veríamos un botón de color azul:

<a href="la_URL" class="button blue"> el texto </a>

Lo mismo podemos hacer con el tipo de fondo, podemos seleecionar glossy o glass. Simplemente las agregamos, separándolas con un espacio y en cualquier orden:

<a href="la_URL" class="button blue glossy"> el texto </a>

El tamaño dependerá del texto pero podemos forzar dos tamaños extras usando xs si queremos que sea más pequeño o xl si queremos que sea más grande:

<a href="la_URL" class="button blue xl glossy"> el texto </a>

La última clase posible define la forma: round, skew, brackets, oval, shield, back, knife, drop, morph y una más llamada icon mostrará el botón pero sin texto:

<a href="la_URL" class="button blue xl skew glossy"> el texto </a>

Lo interesante es que es posible agregarle íconos por medio de un atributo especial llamado data-icon donde podríamos colocar cualquier carácter Unicode:

<a href="la_URL" class="button blue xl round" data-icon="&#9658;"> el texto </a>

Un lindo juguete para pasar el rato.

Si se ha entendido el concepto de que las etiquetas pueden tener un atributo llamado ID que las identifica, y que ese nombre que les damos, debe ser unico, ya tenemos una de las herramientas básicas para trabajar con JavaScript porque son muchas las cosas que podemos hacer a partir de eso.

Por ejemplo, supongamos que hemos agregado una imagen de este modo:

<img id="miimagen1" src="URL_imagen_1"/>

con JavaScript, podemos "leer" sus propiedades; una de ellas, la más obvia es el atributo src que contiene la dirección URL de esa imagen que podríamos leer así:

var miurl = document.getElementById("miimagen1").src;

y como podemos leerla, también podemos escribirla:

document.getElementById("miimagen1").src = "URL_otra_imagen";

entonces, no resultaría complicado crear una función a la que ejecutamos con un enlace para que, al hacer click allí, la imagen cambie:

click para cambiar la imagen
[ reset ]

<script>
  function cambiarla() {
    document.getElementById("miimagen1").src = URL_otra_imagen;
  }
</script>

<img id="miimagen1" src="URL_imagen_1"/>
<a href="javascript: cambiarla();">click para cambiar la imagen</a>

No tiene mucho sentido ¿no? Mejor, usar una función más general y para eso, deberíamos usar más variables es decir, enviar a la función, datos que varien, en este caso, podríamos usar dos, uno con el ID para que la función cambie el contenido de cualquier imagen que se nos ocurra y otro con la URL de la imagen que quisiéramos cambiar:

cambio una | cambio otra
[ reset ]

<script>
  function cambiarimagen(id,url) {
    document.getElementById(id).src = url;
  }
</script>

<img id="miimagen2" src="URL_imagen_2"/>
<img id="miimagen3" src="URL_imagen_3"/>
<a href="javascript: cambiarimagen('miimagen2','URL_una_imagen);">cambio una</a>
<a href="javascript: cambiarimagen('miimagen3','URL_otra_imagen');">cambio otra</a>

Siempre necesito "algo" que ejecute la función, un "evento", por ejemplo, un click en alguna parte pero, no hace falta que sea un enlace, también puede ser la misma imagen y para eso está el onclick:

[ reset ]

<img onclick="cambiarimagen('miimagen4','URL_otra_imagen');" id="miimagen4" src="URL_mi_imagen"/>

¿Es necesario usar siempre un ID? Pues si y no, depende de lo que quisiéramos hacer. En este caso, podríamos hacer una función que no requiera ese dato porque en JavaScript hay varias formas de identificar las etiquetas y si nos basamos en el último ejemplo, donde el evento está en la etiqueta misma, en realidad, podemos decirle a nuestra función que "ESA" es la etiqueta a la que nos referimos y para decirle eso, usamos this:

<script>
  function otraimagen(cual,url) {
    cual.src = url;
  }
</script>

<img onclick="otraimagen(this,'URL_otra_imagen');" src="URL_mi_imagen"/>

Bueno, está bien pero ¿y si quiero restaurar la imagen original? Como la magia no existe e insisto, las computadoras no piensan, lo que debemos hacer es decírselo, métodos hay miles, cada uno para un caso específico, para una necesidad particular.

Una forma simple sería usar otros eventos, en lugar de usar onclick podríamos usar onmouseover y onmouseout que se ejecutan cuando ponemos el puntero del ratón encima de una etiqueta o cuando lo quitamos. Uso la misma función anterior de este modo:

<img onmouseover="otraimagen(this,'URL_imagen_2');" onmouseout="otraimagen(this,'URL_imagen_1');" src="URL_imagen_1" />

¿Y si quiero usar el onclick si o si? hay que decírselo expresamente de algún modo así que podría hacerse algo similar a lo que se mostraba en la entrada anterior. La función leerá cuál es la dirección URL de la imagen que está visible y luego, usando condiciones, la cambiará; si es la primera pondrá la segunda y si es la segunda pondrá la primera:

<script>
function permutarimagen(cual,url) {
  var imagen1 = "URL_imagen_original";
  var imagen2 = "URL_otra_imagen";
  var imagenactual = cual.src;
  if(imagenactual==imagen1) {
    cual. src = imagen2;
  } else  {
    cual. src = imagen1;
  }
}
</script>

<img onclick="permutarimagen(this);" src="URL_imagen_original"/>

Todas las plantillas de Blogger tienen (o deberían tener) un código en el <head> que es el que utiliza el servicio para agregar una serie de etiquetas extras, scripts que controlan los widgets, feeds, etc:

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

Hace un tiempo mostraba en una entrada que habían agregado una etiqueta nueva que podía verse si mirábamos el código fuente de las páginas individuales del blog:

<link rel="image_src" href="URL_imagen" />

Si en la entrada hay imágenes, esa etiqueta contiene la dirección URL de una miniatura de la primera imagen, por ejemplo, dice algo así:

<link rel="image_src" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Gf8DroI1SLblArr8oH_Tq64Ee2Lk2PA46MmHkL0yPMW-iuzDs7jFYwkoZCS3KfoIFkaXBZDvqzG9AX261XfLsH-eS9aDMuL51FnvfJuhvKS6v40AylmxnvL6Hf8MHshdB-X0/s72-c/tragichistory.png" />

Es una miniatura generada de manera automática y Blogger la usa cuando compartimos algo en Facebook o cuando agregamos un elemento Lista de blogs y establecemos la opción de mostrar miniatura pero, aparentemente, sólo funciona si la imagen ha sido alojada en Blogger mismo y no en otro servidor.

Simplemente, toma la URL de la imagen original que hayamos insertado y cambia el famoso directorio que indica su tamaño, apuntando a uno llamado s72-c que, obviamente, crea una miniatura de 72x72:


http://3.bp.blogspot.com/blablabla.../s00/tragichistory.png
http://3.bp.blogspot.com/blablabla.../s72-c/tragichistory.png


Aunque ese dato no es accesible de manera directa, al ser parte del código fuente, es posible leerlo utilizando JavaScript y manipularlo de alguna manera.

Como todo, dependerá mucho de gustos y necesidades. Partiendo de una plantilla Mínima, en cada post he colocado una imagen oculta:

<img src="unaImagen" style="display:none;" />

Que es la que usaré en la plantilla como fondo del DIV llamado content-wrapper así que voy a editarla y colocar la regla de estilo antes de </b:skin>:

#content-wrapper {background: transparent url() no-repeat left 50%;}

Y antes de </head> pondré un condicional que coloque una imagen genérica en todas las páginas que no sean entradas:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
#content-wrapper {background-image: url(imagenXdefecto);}
</style>
</b:if>

Inmediatamente después, otro condicional con un script que cree una regla de estilo, utilizando la imagen oculta como fondo de las páginas individuales:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// buscamos la imagen que haya en la etiqueta LINK
var laIMG = "";
var links = document.getElementsByTagName('link');
for ( var i = 0; i < links.length; i ++ ) {
if(links[i].rel=="image_src") { laIMG = links[i].href; }
}
// si hay una, la usamos como fondo
if(laIMG!="") {
// cambiamos la URL para que use el tamaño original y no la miniatura
laIMG = laIMG.replace("s72-c","s00");
// la regla de estilo será #content-wrapper {background-image:url(laImagen);} 
var regla = "#content-wrapper {background-image:url(" + laIMG + ");} ";
// agregamos una etiqueta STYLE
var nuevo = document.createElement("style");
nuevo.setAttribute("type", "text/css");
if(nuevo.styleSheet){
// agregamos la regla de estilo en Internet Explorer
nuevo.styleSheet.cssText = regla;
} else {
// agregamos la regla de estilo en el resto de los navegadores
nuevo.appendChild(document.createTextNode(regla));
}
document.getElementsByTagName('head')[0].appendChild(nuevo);
}
//]]>
</script>
</b:if>

Skull Bladimir Trejo Ecuador	Requiem para los del 3 de mayo Vladimir Sabillon Honduras	Pressed button Liene Rubane Letonia
One of us, all of us She-Ma Semsar Irán	Adieu! Jochen Shievink Germany	Better than Kamil Banach Polonia
Facing death Beetroot Design Group Grecia	Abolition2 Jean-Philippe Paumier Holanda	Knife Monika Prus Polonia

REFERENCIAS:posterfortomorrow.org

ShareSidebar es un servicio para quienes no quieran lidiar con códigos ya que de manera simple, nos permite agregar una barra lateral fija en nuestra web, con iferentes servicios que permiten a los visitantes, compartir las entradas en las redes sociales.

Sólo necesitamos completar el formulario con una dirección de mail, la URL del blog, definir si se mostrará a la izquierda o a la derecha y seleccionar los servicios que vamos a usar: Facebook, Twitter, Delicious, Digg, Google Buzz, StumbleUpon, Reddit y Yahoo Buzz.

Decidido eso, hacemos click en Get the code y listo. Ahí nos darán el código necesario que luego pegaremos en la plantilla, justo antes de la etiqueta </body>.

<!--ShareSidebar.com BEGINS-->
<style>
  .FBConnectButton_Small {
    background-position: -5px -232px !important;
    border-left: 1px solid #1A356E
  }
  .FBConnectButton_Text {
    margin-left: 12px !important;
    padding: 2px 3px 3px !important
  }
  #ShareSidebar {
    font-size: 9px;
    line-height: normal;
    overflow: hidden;
    position: fixed;
    right: 0 !important;
    text-align: center;
    top: 25%;
    width: 69px;
    z-index: 100000;
    _position: absolute;
  }
  #ShareSidebar a, #ShareSidebar a:hover, #ShareSidebar a:visited {
    font-size:9px;
    text-decoration: none;
  }
</style>

<div id="ShareSidebar">
  <div style="float:left; margin:10px 0 0 10px;">
    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>
    <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
  </div>
  <div style="float:left; margin:10px 0 0 10px;">
    <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
  </div>
  <div style="float:left; margin:7px 0 0 10px;">
    <a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a>
    <script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
  </div>
  <div style="float:left; margin:10px 0 0 10px;">
    <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
  </div>
  <div style="float:left; margin:10px 0 0 5px; color:#000000; font-family:Arial, Helvetica, sans-serif; background-color:#F4295C; padding:2px 3px;">
    <a href="http://sharesidebar.com" target="_blank"><font color="#ffffff">Share</font><font color="#000000">Sidebar</font></a>
  </div>
</div>
<!--ShareSidebar.com ENDS-->

Por supuesto, quien quiera, peude modificar el estilo para adaptarlo pero, así como está, funcionará normalmente en casi cualquier plantilla:

mostrar/ocultar

REFERENCIAS:wwwhatsnew.com

¿Quién es quién? Este es Juan y aquel es Pedro; más fácil, este es Juan y aquella es Antonia. Facílisimo. No es necesario saber sus nombres para identificarlos y no confundirlos pero, pese a lo que muchos creen, las computadoras son idiotas. Es decir, hacen cuentas muy pero muy rápido pero ignoran todo lo que no les explicamos con pelos y señales.

Ese es el problema con los IDs que tanto se utilizan y que tantos problemas causan cuando ponemos dos cosas con el mismo nombre y sólo funciona una de ellas.

El ID se utiliza para IDentificar algo y ese algo debe ser ÚNICO, sólo debe haber uno con ese nombre en toda la página; si no lo es, el navegador no sabrá a cuál nos referimos cuando le decimos que haga algo. Por eso, los IDs no se ponen en todas las etiquetas, sólo los usaremos cuando sea necesario y la regla genérica dice que deberíamos reservalos exclusivamente para los sectores importantes, para definir los grandes rectángulos que conforman un sitio web: el header, las columnas, el footer, etc.

Pero, también los usamos cuando requerimos identificar sectores auxiliares, cualquier cosa que se nos ocurra manipular con JavaScript.

Vamos a un ejemplo que no funcionará.

Una funcióm simple que permuta la visibilidad de una etiqueta. Dado su ID, si está oculta se muestra y si está visible se oculta:

<script>
  function toggletag(cual) {
    var elElemento = document.getElementById(cual);
    if(elElemento.style.display == 'block') {
      elElemento.style.display = 'none';
    } else {
      elElemento.style.display = 'block';
    }
  }
</script>

Ponemos dos DIVs y queremos ocultar el segundo pero ... en ambos hemos usado el mismo ID:

<div id="mi_id" style="display:block;"> Este es un DIV cualquiera ... </div>
<div id="mi_id" style="display:block;"> Este es el DIV que quisiera ocultar ... </div>
<a href="javascript:toggletag('mi_id');">click</a>

El resultado será este:

Este es un DIV cualquiera ...

Este es el DIV que quisiera ocultar ...

click

No funciona. Se oculta el primero y no el segundo ya que el navegador lo encontró primero e ignora al otro.

Todo se debe a ese detalle, ambos tienen el mismo ID así que, para que esto funcionara, deberíamos ponerles nombres diferentes:

<div id="mi_id_1" style="display:block;"> Este es un DIV cualquiera ... </div>
<div id="mi_id_2" style="display:block;"> Este es el DIV que quisiera ocultar ... </div>
<a href="javascript:toggletag('mi_id_2');">click</a>

Este es un DIV cualquiera ...

Este es el DIV que quisiera ocultar ...

click

Y todos felices ...