Escribir tabs de bajo no es una tarea tan tediosa, la verdad… pero casi cualquier tarea que uno se empeñe a realizar con el computador es susceptible de optimización y esta, desde luego no es la excepción. Así que me puse manos a la obra, hace una hora y media, aproximadamente, para escribir un programa en php que facilitara la creación de tabs.

Mi idea inicial era hacer algo que recibiera datos en formato coordenada, como «A3 E5 G1 D7» y lo transformara en una tab inmediatamente en:

E|---5-----|
A|-3-------|
D|-------7-|
G|-----1---|

Busqué con gran dificultad (porqué soy muy muy novato en PHP y no sabía qué términos ocupar) y no encontré el modo apropiado de lograr lo que quería (aunque sospecho que tiene que ver con str_replace) así que repensé y concluí en otro mecanismo que estaba a mi alcance.

 

Manos a la obra. index.htm

Mi plan fue el siguiente: una serie de campos de texto ordenados de tal modo que el usuario estuviera escribiendo directamente en la tab, luego con un botón convertiría todo a un texto plano, ideal para copiar y pegar en algún sitio de tabs o imprimir sin mayor problema.

Con tal idea hice un formulario que, escrito en código, es muy largo así que solo pondré acá un extracto:

<form action="tab.php" target="uno" method="post">
E|-<INPUT type=text name="e1">-<INPUT type=text name="e2"><br>
A|-<INPUT type=text name="a1">-<INPUT type=text name="a2"><br>
D|-<INPUT type=text name="d1">-<INPUT type=text name="d2"><br>
G|-<INPUT type=text name="g1">-<INPUT type=text name="g2"><br>
<input type="reset" value="Resetear"><input type="submit" target="uno" value="Crear"></form>

Entonces, cada campo que corresponde a la cuerda E se llamará e1, e2, e3, etc; igual con A (a1, a2, a3), D y G. Consideré que un número prudente de campos por cuerda sería 16, así que nombre de e1 á e16 (lo mismo con las otras cuerdas).

Todo está dentro del formulario que llama a «tab.php» (que es donde ocurre la magia), está con el método «post» (es decir, envía información) y el objetivo es en «uno» (más adelante explicaré porqué). Puse dos botones, uno para resetear el contenido de todos los campos y otro para convertir la tab escrita.

 

La magia de las computaciones, tab.php

El archivo tab.php que es el que recibe los datos del formulario desde el que se invoca y hace cosillas con él. La estructura de este archivo es:

<pre>
<?php
 echo "E|-"; echo $_POST['e1']; echo "-"; echo $_POST['e2'];
 echo "A|-"; echo $_POST['a1']; echo "-"; echo $_POST['a2'];
 echo "D|-"; echo $_POST['d1']; echo "-"; echo $_POST['d2'];
 echo "G|-"; echo $_POST['g1']; echo "-"; echo $_POST['g2'];
?>
</pre>

El string extraído del archivo anterior ( $_POST[‘nombre_del_campo’] ) que llamé lo repetí 16 veces por cada cuerda, reemplazando cada vez la coordenada correspondiente. Como le antecede el comando echo el resultado será el contenido de cada campo. Esta página no tiene mayor información o contenido por lo que explicaré a continuación.

 

La presentación, usando iframes. De vuelta a index.htm

En el archivo index.htm, luego del formulario incluí lo siguiente:

<hr>
<iframe src="" name="uno" width="400" height="200" scrolling="auto" frameborder="0">
 <p>Buuh! tu navegador que no acepta iframes.</p>
</iframe>

Hr crea una línea divisoria y luego viene el iframe, que es una ventana integrada a la página en la que se puede ver otro archivo (o página). En este caso, el iframe se llama «uno» y, como recordaremos, el formulario tenía como objetivo a «uno» y llamaba a «tab.php», entonces… sí, adivinaste: en el iframe se muestra la tab creada.

 

Ultimos ajustes: que todo calce bien

Los campos de index.php tienen un tamaño muy grande a menos que haga algo y además, están en blanco (lo que aproblema el resultado final, porque no quedan bien encuadrados cuando se ponen números de un sólo dígito. Para resolver estas tres situaciones, reemplazaré

<INPUT type=text name="e1">

por

<INPUT size="1" maxlength="2" value="--" type=text name="e1">

Y así con cada campo (son 64 en total, obviamente los hice con la herramienta buscar y reemplazar). Size indica el tamaño que tendrá el campo, maxlength la cantidad de caracteres que se podrán escribir y value el contenido que tendrán por defecto (y que el usuario podrá modificar). Este último elemento es importante porque es el que garantiza que el resultado final quede bien ordenado. Acá me encontré con otro problema de novato y no encontré más solución que pedir al usuario que, si va a poner sólo un dígito, le anteponga un guíon, para no descuadrar el resultado.

 

Conclusiones

El sistema es completamente funcional, sin embargo, me quedo con el desafío que espero poder enfrentar y vencer luego:

  1. Lograr el sistema de creación por coordenadas que expliqué al comienzo. Esto implica escribir otro programa desde cero.
  2. Prescindir de que el usuario, si quiere poner un sólo digito necesite poner un guión.
  3. Poder agregar la tab creada a otra creada previamente, para así escribirlas una a una y no tener que crear, copiar, pegar, crear, copiar pegar.

 

Finalmente, el link.

Ciertamente, todo lo que expliqué, ya lo hice yo… y puedes acceder al creador de tabs HACIENDO CLICK ACÁ.
VERSIÓN 0.2

Anoche, cuando terminé de escribir esto posteé el link en un foro de bajistas y recibí un comentario en que me decían que no se veía bien en el navegador Safari (navegador por defecto en iOS) y además me dieron la sugerencia de reemplazar los campos por comboboxes, en los que se pueda elegir que número va en cada parte. Lo hice y quedó así. Ahora, les explico como lo hice.

Primero que todo, cambié:

<INPUT size="1" maxlength="2" value="--" type=text name="e1">

Por:

<select name=»e1″><option value=»–«> </option> <option value=»-0″>0</option> […] </select>

Con cada una de las líneas, obviamente. La gracia es que select crea un combobox, como el siguiente:

No sé mucho más qué explicar… porqué no hay mucho más que explicar. El resto del sistema es lo mismo.
VERSIÓN 0.3

Esta, más que una nueva versión consistió en un agregado a la versión 0.2: además de aparecer el número del traste, el combobox indica la nota que se está poniendo. Esta fue una sugerencia que recibí en el foro de BigBassTabs. Haz click acá para usar la app.

Edición noviembre 2015: Esta entrada ha recibido muchos mensajes de spam… 🙁 así que por eso, cerré los comentarios. Cualquier observación o idea que me quiera alguien hacer llegar respecto al creador de tabs de bajo, hágalo a contacto (arroba) cvillavicencio (punto) com. Pueden descargar este código de la sección Apps.