Tutorial: Plataforma Web 2.0 Poliedro Online

[ TUTORIAL: CREACIÓN DE UNA PLATAFORMA WEB 2.0 DE PRODUCCIÓN COLECTIVA EN MUSICA]

5 pasos para la CREACIÓN DE UNA PLATAFORMA WEB 2.0 DE PRODUCCIÓN COLECTIVA EN MUSICA Por Mirta Arredondo y Fabián Esteban Luna

Imagen de un modelo de plataforma Web 2.0 en música - Poliedro [On line] www.poliedronline.blogspot.com

Poliedro On line es un proyecto en Internet creado en una plataforma con recursos de la Web 2.0 con el objetivo central de producir música colectivamente y a distancia.

www.poliedronline.blogspot.com 1

[ TUTORIAL: CREACIÓN DE UNA PLATAFORMA WEB 2.0 DE PRODUCCIÓN COLECTIVA EN MUSICA]

Cualquiera sea el lugar donde te encuentres podrás participar tanto de la composición de una pieza colectiva, o bien de su reproducción mediante su remix online.

Producción y reproducción Para participar de la producción de una composición colectiva en el contexto “Poliédrico”, en primera medida implica que se constituya un grupo de artistas sonoros. El siguiente punto requiere alcanzar una serie de acuerdos basados en diez puntos, entre los que se incluyen: tomar un eje temático en común, sus fuentes sonoras, tiempos para componer cada parte, entre otros más (visitar http://issuu.com/fabianestebanluna/docs/sistema_poliedro).

Luego, cada miembro del grupo subirá su audio a diferentes pistas que se encuentran en la plataforma de Poliedro Online. De este modo podrán ser escuchados en la Web sincrónicamente la totalidad de las partes.

www.poliedronline.blogspot.com 2

[ TUTORIAL: CREACIÓN DE UNA PLATAFORMA WEB 2.0 DE PRODUCCIÓN COLECTIVA EN MUSICA]

Imagen de la plataforma Poliedro On line con cuatro pistas que contienen los archivos de audio compuestos por cada miembro del grupo.

Cada composición colectiva queda así disponible en la Web para interactuar de modo online. ¿Qué significa esto? Significa que cualquiera que visite la plataforma Web podrá manipular en tiempo real parámetros musicales ubicados en cada pista de audio, tales como la amplitud, el paneo y la repetición (loop) de cada archivo sonoro. De este modo, cada internauta se convierte en un intérprete que permanentemente recrea la pieza, produciéndose una dinámica de retroalimentación continua.

www.poliedronline.blogspot.com 3

[ TUTORIAL: CREACIÓN DE UNA PLATAFORMA WEB 2.0 DE PRODUCCIÓN COLECTIVA EN MUSICA]

Producir una plataforma Web 2.0 en música En este tutorial explicaremos cómo desarrollar tu propio sitie en Internet con recursos provenientes enteramente de la Web 2.0. De este modo cualquiera podrá formar su propio grupo de artistas sonoros, y una vez compuestas sus partes podrán subir cada archivo de audio para poder realizar posteriormente sus remixes.

5 pasos básicos para la producción de una plataforma 1. Abrir una cuenta en un Blog. También podrá ser cualquier sitie con recursos Web 2.0 que permita “embeber” código HTML (ya comentaremos esto luego) 2. Elegir un reproductor de archivos de audio MP3 que pueda ser ejecutado desde la Web (luego daremos ejemplos sobre ellos, pero nosotros utilizaremos el reproductor MP3 creado para nuestra plataforma de Poliedro Online) 3. Abrir una cuenta en un HD ubicado en la Web (ejemplo Dropbox, etc.). Allí se subirá tanto el reproductor de audio MP3 elegido, como también cada uno de los archivos de audio compuestos por los integrantes del grupo 4. Invocar desde el Blog al reproductor de archivos de audio MP3. Esto se hará mediante el procedimiento de “embebido” (comentaremos luego) 5. Indicar las direcciones URL de cada archivo de audio para conectarlos a cada reproductor MP3. Esto se escribirá en código HTML “embebido” previamente en el Blog.

Una vez cumplidos estos cinco pasos se podrá disponer de una plataforma Web 2.0 en música que estará formada por el grupo de reproductores de audio, los que ejecutados al unísono permitirán realizar el remix de la pieza.

Paso a paso

1. Abrir una cuenta en un Blog u otro sitie que permita “embeber” archivos.

Abriremos una cuenta en Blogspot. Este recurso Web 2.0 permite “embeber” archivos. Por “embeber” entendemos aquel recurso que permite escribir e insertar código HTLM. En el caso de Blogspot observamos que en el modo de edición nos permite ingresar texto y gráfica haciendo visible la edición mediante el código HTML o sin el. Seleccionamos entonces la opción de edición HTML.

www.poliedronline.blogspot.com 4

[ TUTORIAL: CREACIÓN DE UNA PLATAFORMA WEB 2.0 DE PRODUCCIÓN COLECTIVA EN MUSICA]

Imagen del Blog sin opción de edición de código HTML y sus recursos asociados.

Imagen del Blog con opción de código HTML y sus recursos asociados

2. Paralelamente elegiremos un reproductor de archivos de audio MP3 que permita utilizarlos desde la Web. Existen multiplicidad de reproductores disponibles y de dominio público. En la actualidad, los más populares de podrían dividir en tres categorías: los programados directamente en HTML, en JavaScript, o bien los realizados en Flash, en combinación de algunos de ellos también con código JavaScript.

www.poliedronline.blogspot.com 5

[ TUTORIAL: CREACIÓN DE UNA PLATAFORMA WEB 2.0 DE PRODUCCIÓN COLECTIVA EN MUSICA]

a- WAudio player (programado en Flash) http://wpaudioplayer.com/

b- JWPlayer (programado en HTML5) http://www.jwplayer.com/

c- Audio Player (programado en JavaScript) http://osvaldas.info/audio-player-responsive-andtouch-friendly

Nosotros utilizaremos el reproductor MP3 programado en Flash y denominado Poliedro Online

Imagen de nuestro reproductor de archivos MP3 Poliedro Online (nombre el archivo Polionline)

3. Abriremos una cuenta en un HD ubicado en la Web. En nuestro ejemplo utilizaremos el HD de la empresa DropBox. Dentro de la carpeta “Public” vamos a colocar el archivo programado en Flash de nuestro reproductor de audio MP3 Poliedro Online (llamado Poli-online).

Colocaremos también en esta carpeta todos los archivos de audio de cada integrante del grupo, tantos como reproductores de audio MP3 vayamos a utilizar. En nuestro ejemplo solo serán dos archivos MP3.

www.poliedronline.blogspot.com 6

[ TUTORIAL: CREACIÓN DE UNA PLATAFORMA WEB 2.0 DE PRODUCCIÓN COLECTIVA EN MUSICA]

Imagen de la carpeta “Public” en la cuenta del HD en DropBox

Imagen de los tres archivos que se encuentran dentro de la carpeta “Public” en el HD de DropBox: el reproductor de audio MP3 (poli-online) y los dos archivos de audio (archivodeaudio1 y archivodeaudio2)

4. Invocaremos al reproductor de archivos de audio MP3 insertando código HTML desde el Blog. El procedimiento debe ser realizado a través del llamado “embebido”. Este consiste en escribir en el Blog con código HTML la invocación al reproductor de audio MP3 llamado “polionline”. Como sabemos, este reproductor de audio MP3 se encuentra físicamente almacenado en el HD de DropBox.

www.poliedronline.blogspot.com 7

[ TUTORIAL: CREACIÓN DE UNA PLATAFORMA WEB 2.0 DE PRODUCCIÓN COLECTIVA EN MUSICA]

Cada player reproductor de audio, de las características que aquí necesitamos utilizar, requiere de su propio código HTML que permitirá “embeberlo” en el sitio Web elegido. En nuestro ejemplo, el código que fue programado para el player de Poliedro On line “poli-online” es el siguiente:

<object data="http://dropbox.com/748994/Public/poli-online.swf " height="95" id="audioplayer1" type="application/x-shockwave-flash" width="420"> <param name="movie" value="http://dropbox.com/748994/Public/poli-online.swf"> <param name="FlashVars" value="src=https://dropbox.com/748994/Public/archivodeaudio1.mp3&amp;lp=si&amp;autoPl=s i&amp;duracion=127&amp;titulo=AUTOR1&amp;autor=_1/2_"> </object> Entre las llamadas etiquetas HTML “<object>” se encuentra delimitada una invocación al reproductor de audio MP3. Como se observa en los links de las direcciones URL subrayadas se advierte también que tanto el archivo del reproductor MP3 (poli-online.swf) como del archivo de audio (archivodeaudio1.mp3) están almacenados en la carpeta “Public” de DropBox. Solo resta invocar una vez más al reproductor de audio MP3 para poder indicar la ruta URL del otro archivo de audio número 2. Esto permitirá reproducirlos en player independientes.

Entonces volveremos a copiar el código anterior modificando solo el nombre del archivo de audio por el número 2: <object data="http://dropbox.com/748994/Public/poli-online.swf " height="95" id="audioplayer1" type="application/x-shockwave-flash" width="420"> <param name="movie" value="http://dropbox.com/748994/Public/poli-online.swf"> <param name="FlashVars" value="src=https://dropbox.com/748994/Public/archivodeaudio2.mp3&amp;lp=si&amp;autoPl=s i&amp;duracion=127&amp;titulo=AUTOR2&amp;autor=_2/2_"> </object> Nota: El código HTML de este reproductor de audio nos permite indicar otros parámetros que no modificaremos ahora y determinan en este player aspectos tales como el nombre de los autores, la duración de los archivos, si se auto-ejecuta (autoPl), etc.

Copiamos entonces estos dos códigos HTML en el Blog y dentro de la opción de edición HTML

www.poliedronline.blogspot.com 8

[ TUTORIAL: CREACIÓN DE UNA PLATAFORMA WEB 2.0 DE PRODUCCIÓN COLECTIVA EN MUSICA]

Luego “Publicamos” el código insertando la invocación de nuestros archivos a la plataforma del Blog.

Imagen final de los dos reproductores de audio MP3 “embebidos” en el Blog de una plataforma en música.

De este modo finalizamos la plataforma en música.

www.poliedronline.blogspot.com 9

[ TUTORIAL: CREACIÓN DE UNA PLATAFORMA WEB 2.0 DE PRODUCCIÓN COLECTIVA EN MUSICA]

5. ¿Cómo obtener la ruta URL donde hemos almacenado los archivos tanto del reproductor MP3, como de los archivos de audio?

En nuestro ejemplo (punto 4) las rutas URL de los archivos almacenados en DropBox ya estaban escritas en el código HTML. Pero este dato será el que con frecuencia se modificará en cada nuevo proyecto de plataforma, ya que cada usuario tendrá su propia dirección URL donde hubiera almacenado sus archivos.

Para obtener este dato deberemos ir a nuestra cuenta de DropBox, y de la carpeta “Public” acceder a la ruta URL. Entonces seleccionamos el archivo del cual deseamos tomar su ruta URL, botón derecho, y elegimos la opción “Copiar enlace público”.

De este modo estaremos copiando la dirección URL del archivo señalado. Ver ejemplo debajo de código copiado.. https://dropbox.com/748994/Public/archivodeaudio2.mp3 Este dato nos permitirá insertarlo en el código “embebido” y en nuestro caso desde el Blog.

Con estos cinco pasos tendremos en el Blog dos reproductores de audio MP3 con sus respectivos archivos de sonido para poder realizar mezclas online.

Mirta Arredondo y Fabián Esteban Luna Buenos Aires – Diciembre 2014 Proyecto Poliedro: http://www.sistemapoliedro.blogspot.com.ar/ Artículo sobre el proyecto: http://issuu.com/fabianestebanluna/docs/creacion_colectiva www.poliedronline.blogspot.com 10