Una de las cosas que estoy haciendo para el nuevo sitio es montar una radioa treavés de shoutcast, para que la gente pueda oir algo de musiquilla chula. Tras hacerlo todo y ver que funciona ben, he decidido montar este tutorial para que cualquiera pueda hacerlo también. Es bastante fácil.

Lo primero que necesitas es el servidor de Shoutcast, un programa que permite enviar el contenido de tu radio a cualquiera que se conecte a ella. Para ello, haz click aqui y despues en el link que dice "PROCEED TO LICENSE AGREEMENT TO DOWNLOAD SHOUTCAST DNAS".
Una ve lo hayais descargado, simplemente haced doble click en el icono y seguid aprteando en siguiente sin cambiar nada hasta que la instalación termine.

Una vez terminada la instalación, debemos configurar el servidor, para ello, nos vamos a C:\Archivos de Programa\SHOUTcast y abrimos un archivo llamado sc_serv.ini. Si os pregunta con que programa quereis abrirlo, elegid Wordpad, ya que con el Bloc de notas el formato no se muestra correctamente.
Una vez abierto, debeis editar las tres siguientes lineas:

MaxUser -> Número máximo de usuarios que pueden conectarse a la vez a la radio
Password -> Password que utilizarás para conectarte como broadcaster
PortBase -> Puerto base que usaremos para enviar el contenido de la radio

Hay que tener en cuenta que SHOUTcast usa realmente 2 puertos, el base y el base+1, es decir, si elegimos el 8000 (por defecto) realmente se usarán el 8000 y el 8001.

A continuación deberias mirar como puedes hacer forward de puertos en tu firewall y en tu router, y hacer forward de los dos puertos que hayas elegido.

El siguiente paso es tener el Winamp instalado, si no lo tienes: www.winamp.com

Abre winamp y ve a las preferencias (Control+P), una vez ahí, baja en la parte izquierda hasta una opción debajo de plugins que diga: DSP/Effect. Haz click en ella, y después elige la opción que se llama Nullsoft SHOUTCASTSource DSP. Al hacerlo aparecerá la ventana de control de tu futura radio.

Selecciona la pestaña Output, rellena las cajas con los datos correspondientes a tu radio, esto es, el password que elegiste, y el purto desde el que quieres emitir. Address DEBE contener localhost.
En esa misma pestaña, haz click en el boton 'Yellowpages' y rellena los datos sobre tu radio, si quieres que al escuchar la radio la gente vea que tema está sonando, en la parte de abajo chequea 'Enable Title Updates' y deja marcadas las casillas 'Auto'

Ahora abre la pestaña Encoder, y elige una calida para emitir. Si tu conexión de subida no es muy buena, te recomiendo usar 64 u 80, no más, ya que de otro modo la gente recibiría una señal entrecortada.

Por último, en la pestaña Input, asegurate que está seleccionado Winamp como input device.

Ahora debemos encencer el servidor de shoutcast, para ello nos vamos a la carpeta donde lo instalamos (lo primero que instalamos) y ejecutamos sc_serv.exe. Una vez esté corriendo, volvemos al winamp, elegimos la pestaña Output y le damos al botton 'Connect'.

Listo! tu emisora ya está emitiendo. Para que la gente pueda escucharla, ya sea en winamp o en Windows media, deben añadir una URL al playlist (en winamp es en la parte de abajo de la ventana de playlist Add>Add URL). Esta URL está compuesta asi: http://xxx.xxx.xxx.xxx:puerto

Las xxx las tienes que sustituir por tu IP (puedes saber cual es en esta pagina) y el puerto es el que has elegido (por defecto 8000).

Y hale, a disfrutar! Preguntas y dudas en los comentarios.

El hotlink es, a dia de hoy, un problema para los creadores de contenido. A mi no me importa que me cojan una imagen para colgarla en una página, es más, creo que en cierto modo ayuda a que se extienda por ahí mis obras. Pero el problema del hotlinking es más grave, porque entran en juego otros factores como el ancho de banda disponible para una página. Para los que no teneis muy claro qué es el hotlinking, os pongo un ejemplo:

Imagina que tienes una pagina: "Mipaginadelahostia.com". Ok,ahora, tu navegas por mi página y ves una imagen que te encanta, y quieres ponerla en la tuya. Puedes hacer dos cosas:
1. Te bajas la imagen, la subes a tu server y pones el tag como siempre para mostrar la imagen.
2. No tienes server propio, no tienes ni idea o lo que sea, así que coges y pones el tag así: img xsrc="imagen.jpg"

Pues la segunda manera es lo que se llama hotlinking, un problema, porque cada vez que alguien entra en tu página, la imagen se pide a mi servidor, por lo que se gasta ancho de banda, pero yo no he conseguido ninguna visita. El problema principal reside en que en estas páginas no se suele dar ningún tipo de crédito a las páginas de las que cogen las imágenes, ni un mísero link.

Así que ayer, tras ver que a mi me hacían algo parecido, decidí crearme un script para al menos conseguir algo de crédito. Se trata de una combinación entre el uso del .htaccess, PHP y la librería GD, una de las combinaciones más potentes para web de hoy en día.

El sistema a utilizar es sencillo, cuando el server reciba una petición de un jpg desde fuera de nuestro propio dominio, debe redireccionarla a un fichero PHP, que colocará una marca de agua o watermark sobre la imagen solicitada y luego la mostrará.

Si pulsais sobre leer más, teneis un tutorial sobre como configurar todo esto.

Configurar el servidor
El primer paso es configurar el servidor para que redireccione las peticiones, para ello, debes crear o editar el fichero .htaccess en el directorio principal de tu servidor (donde debe estar el index de tu página). Si hay algo escrito ¡no lo borres! simplemente añade el siguiente código al final:

El código puede llegar a ser un poco complicado, si quereis profundizar más en el mod_rewrite (que he de deciros que es muy MUY potente, podeis encontrar un tutorial sobre lo básico aqui.

RewriteEngine On
Esta línea activa el motor para realizar las conversiones del mod_rewrite.

RewriteCond %{REQUEST_FILENAME} .*jpg$ [NC]
Con esta línea hacemos que sólo se procesen las peticiones de ficheros jpg.

RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !tuweb.com [NC]
RewriteCond %{HTTP_REFERER} !webamigo.com [NC]
RewriteCond %{HTTP_REFERER} !google. [NC]
RewriteCond %{HTTP_REFERER} !search?q=cache [NC]
Con estas líneas lo que hacemos es que sólo se procesen las peticiones que vienen de algún dominio, que no sea el tuyo, ni el de tu amigo, ni de google. Recordemos que sólo deben pasar las peticiones que queremos marcar con marca de agua.

RewriteRule (.*) /hotlinks.php?src=$
Si el proceso ha llegado hasta aquí es porque se trata de una petición de un jpg realizada desde una web que no queremos que lo haga impunemente. Por lo que llamamos al fichero que procesará la imagen, pasando como parámetro la ruta completa de la imagen.

Preparar el Script
El siguiente paso es preparar el script. Para ello, debemos primero crear con Photoshop una imagen que queramos usar como watermark (marca de agua). Recomiendo que sea una imagen pequeña, de unos 80-100 píxeles de ancho y unos 15-30 de alto. Debemos guardarla como PNG-8 (PNG-24 produce errores con algunas versiones de la librería GD) y con el nombre "watermark.png".

Una vez tengamos la imagen, pasemos de lleno al script:

1. Dado que lo que se está pidiendo es una imagen, debemos cambiar la cabecera para que se muestre la imagen correctamente, ya que por defecto es de tipo texto (daría un error mostrando la imagen de dejarlo así)

header('content-type: image/jpeg');

2. Tras esto, debemos cargar en memoria la imagen que vamos a usar como marca de agua, y además tomarle las medidas.

$watermark = imagecreatefrompng('watermark.png');
$watermark_width = imagesx($watermark);
$watermark_height = imagesy($watermark);

3. Ahora creamos una imagen nueva a partir de la imágen que se ha solicitado. Recordemos que la ruta se pasaba como parámetro (src).

$image = imagecreatetruecolor($watermark_width, $watermark_height);
$image = imagecreatefromjpeg($_GET['src']);
$size = getimagesize($_GET['src']);

4. Con las dos siguientes líneas, establecemos la x e y para la posición donde colocaremos la marca de agua (abajo a la derecha y con cinco píxeles de margen).

$dest_x = $size[0] - $watermark_width - 5;
$dest_y = $size[1] - $watermark_height - 5;

5. Por último, colocamos la imagen watermark sobre la imagn solicitada, y mediante la función imagejpeg() la mostramos. Después destruimos de memoria las imágenes utilizadas (para no ocupar recursos, lo que se borra está en memoria, no se borra la imagen real)

imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);
imagejpeg($image);
imagedestroy($image);
imagedestroy($watermark);

Y con esto ya estaría listo. El código completo es el sigiente:

hotlinks.php:

header('content-type: image/jpeg');
$watermark = imagecreatefrompng('watermark.png');
$watermark_width = imagesx($watermark);
$watermark_height = imagesy($watermark);
$image = imagecreatetruecolor($watermark_width, $watermark_height);
$image = imagecreatefromjpeg($_GET['src']);
$size = getimagesize($_GET['src']);
$dest_x = $size[0] - $watermark_width - 5;
$dest_y = $size[1] - $watermark_height - 5;
imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);
imagejpeg($image);
imagedestroy($image);
imagedestroy($watermark);

?>

Sólo nos quedaría ahora subir tanto las modificaciones del .htaccess como el fichero hotlinks.php. Acordaos de poner vuestro sitio en el .htaccess!

Espero que os sea útil, podeis contactar conmigo a través de los comentarios, o mandando un mensaje desde el área de contacto