cmd.fm, un servicio on-line de radio controlado por línea de comandos

Vamos con una de las frikadas de la semana: cmd.fm

¿Qués es cmd.fm? Pues es un servicio on-line de radio que se nutre de música alojada en Soundcloud. No suena a nada especialmente revolucionario pero tiene una característica que lo hace curioso: se maneja desde una interfaz de línea de comandos. Es un módulo de cmd.to, un sistema operativo en línea con diversas utilidades a través de comandos.

A través de fm help obtenemos la siguiente lista de comandos, que nos explican como manejar esta aplicación:

fm {cmd}..................Lista géneros y ejecuta comandos de fm
fm genres.................Lista todos los géneros. fm genres
fm play {o}...............Este comando permite reproducir un género o volver a arrancar una pista pausada. fm play chillout | fm p username/playlist | fm p me/playlist
fm pause..................Pausa la reproducción. fm pause
fm resume.................Vuelve a reproducir tras pausa. fm resume
fm next...................Salta a la siguiente pista fm next | fm skip
fm previous...............Salta a la pista anterior fm prev | fm back | fm previous
fm info...................Muestra información sobre la pista que se está reproduciendo fm i | fm info | fm information
fm loop {n}...............Repite la pista actual el número N de veces que digamosfm loop
fm unloop.................Detiene el bucle actual de repeticiones fm unloop
fm forwards {n}...........Avanza N segundos en la pista actual. fm fw 5 | fm forwards 5
fm backwards {n}..........Retrocede N segundos en la pista actual. fm bw 5 | fm backwards 5 | fm rewind 5
fm volume {n}.............Define el volumen en porcentaje fm v 50 | fm vol 50 | fm volume 50
fm mute...................Silencio! fm m | fm mute
fm unmute.................Desactiva el mute. fm um | fm unmute
fm share..................Comparte la pista actual. fm share
fm like...................Marca un like en la pista actual. fm like
fm unlike {track_id}......Retira el like a la pista actual. fm unlike | fm unlike {track_id}
fm likes..................Muestra o reproduce tus likes. fm likes | fm likes play
fm playlists {username}...Muestra tus listas de reproducción o explora las de otros usuarios. fm playlists
fm test {genre, mood}.....Test test
fm playlist {cmd, playlist_name}Gestiona o escucha listas de reproducción fm playlist new / add / remove / show / play / edit / destroy {playlist_name}
fm help...................Muestra la ayuda (esta lista pero en inglés). fm help
fm migrate................Permite migrar listas de reproducción de cmd.fm fm migrate

Ventanas modales con jQueryUI

Como soy masoquista, tras un duro día desarrollando en PHP/Javascript creo que voy a hacer una entrada sobre informática en mi blog… por seguir esta racha.

Hoy he tenido mi primera experiencia con jQueryUI, una biblioteca para el framework jQuery. Lo he utilizado para crear un formulario de correo en una ventana modal y… oye, qué fácil, qué productividad reporta esta librería. En este enlace tenéis a vuestra disposición dicha librería, con muchas demos y documentación.

Para el caso de las ventanas modales tendremos que recurrir al widget “dialog”, que nos permitirá hacer desde una suerte de alert más sofisticado hasta introducir todo un formulario (como era mi caso).

El uso de dialog() puede resumirse con facilidad en el siguiente ejemplo:

<html>
    <head>
        <link rel="stylesheet" href="css/darkness/jquery-ui-1.8.18.custom.css">
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
        <script>
            $(function(){
                $("#ventanaModal").dialog({
                   title:"Título a elegir",
                   modal: true
                });
            })
        </script>
    </head>
    <body>
        <div id="ventanaModal"></div>
            <p>Aquí metes lo que quieras</p>
        </div>
    </body>
</html>

Con esto tenéis lo mínimo para tener una ventana modal: un div con el contenido al que aplicáis el método dialog pasándole como parámetros el título y el parámetro modal como true (si no le pasárais modal: true se abriría también, pero no bloquería los elementos del fondo, como debe hacer una ventana modal). Pero esto queda muy soso, así que vamos a ir haciendo cosillas.

Lo primero es meter algo más de contenido, para que veas las posibilidades. Por ejemplo, una pregunta que requiera confirmación (como en un window.confirm de los de antaño):

<div id="ventanaModal">
<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    ¿Acepta usted las condiciones de uso y que le espiemos impunemente?
</div>

Ahora ya tenemos un aviso de seguridad, vamos con lo siguiente, meterle algún efectillo a la página para que quede chulo cuando se despliega en pantalla:

               $("#ventanaModal").dialog({
                   title:"Título a elegir",
                   modal: true,
                   show: "slide",
                   hide: "explode"
                });

Con esto aparecerá deslizándose y desaparecerá explotando en mil pedazos (bueno, realmente en nueve pedazos). En cualquier caso te habrás fijado en que no hay botones dentro del div. ¿Por qué? Porque los creó la desde javascript definiendo la propiedad buttons, que recibe como parámetro un objeto json con la información y con su función:

           buttons: {
            "Sí": function(){
                alert("has aceptado, tu alma es nuestra");
            },

            "No": function(){
                alert("no has aceptado, te jodes y te quedas sin servicio");
            }
        }

Como resumen entonces el javascript completo quedaría tal que así:

$("#ventanaModal").dialog({
   title:"Título a elegir",
   modal: true,
   show: "slide",
   hide: "explode",
   buttons: {
            "Sí": function(){
                alert("has aceptado, tu alma es nuestra");
            },

            "No": function(){
                alert("no has aceptado, te jodes y te quedas sin servicio");
            }
        }
});

En este caso son dos alerts chorras, pero sirve para que te hagas una idea del potencial que tiene este widget si ya has trabajado antes con javascript.

Nos queda añadir un botón, mismamente, en el html que llame a la ventana y la abra (es decir, el botón en el marcado y el script con la acción). Algo tipo:

<input type="button" name="accept" id="accept" value="Aceptar"/>
<script>
    $("#accept").button().click(function() {
	$("#ventanaModal").dialog("open");
    });
</script>

Y con esto y un bizcocho… se acabó el ejemplo. Ahora te recomiendo que te pelees un rato con esta librería, porque parece que puede dar muchas alegrías.