Visor PGN de Ajedrez para Webs (Anexo)

A petición de algunos usuarios, he buscado la manera de que un mismo visor pueda mostrar varias partidas.

El funcionamiento es el siguiente: encima del marco donde se muestran el tablero y los movimientos de la partida, aparecerá una lista de opciones; cada opción es una de las partidas que se quiere mostrar en el visor. Al seleccionar una de estas partidas, automáticamente, se cargará en el visor.

Para poder hacer esto, hay que añadir código HTML en la página donde está el visor. Se seguirá el siguiente proceso:

Lo primero es crear tantos archivos PGN como partidas se quieran mostrar, en cada archivo irá una sola partida.

En el ejemplo que vamos a realizar, crearemos un visor que pueda mostrar 5 partidas, por lo tanto, he creado los siguientes 5 archivos alojados en mi servidor:

Al definir la “Anchura” y “Altura” del marco, hay que procurar que puedan visualizarse todas las partidas sin problemas; no obstante, esto puede optimizarse tras realizar varias pruebas y modificaciones.

<!-- ************************* -->
<!-- Visor PGN de Ajedrez -->
<iframe frameborder="0" scrolling="auto" width="765" height="544" src="http://www.edicionesma40.com/cgi-bin/bw_partida.py?urlarchivo=http://www.edicionesma40.com/blog/partidas/22-04-2013-1.pgn" style="border: 1px solid black;"></iframe><br>
<font size="1" face="Arial, Helvetica, sans-serif">Consigue este <a href="http://www.edicionesma40.com/blog/visor-pgn-de-ajedrez.htm">Visor PGN de Ajedrez</a> para tu sitio.</font>
<!-- Fin del Visor PGN de Ajedrez -->
<!-- ************************* -->

Nótese que las dimensiones del marco están definidas mediante los atributos “width” (anchura) y “height” (altura); cambiando estos valores, se modifican las dimensiones del marco.

Al código del visor hay que añadirle el atributo “id” para darle un nombre determinado. Si se instalaran más de un visor en una misma página, cada nombre deberá ser único.

Al visor de ejemplo le vamos a llamar “visor-1”; el atributo “id” lo colocaremos después de la etiqueta “<iframe” en la 3ª línea, de la siguiente forma: <iframe id='visor-1' frameborder="0"...

<!-- ************************* -->
<!-- Visor PGN de Ajedrez -->
<iframe  id='visor-1' frameborder="0" scrolling="auto" width="765" height="544" src="http://www.edicionesma40.com/cgi-bin/bw_partida.py?urlarchivo=http://www.edicionesma40.com/blog/partidas/22-04-2013-1.pgn" style="border: 1px solid black;"></iframe><br>
<font size="1" face="Arial, Helvetica, sans-serif">Consigue este <a href="http://www.edicionesma40.com/blog/visor-pgn-de-ajedrez.htm">Visor PGN de Ajedrez</a> para tu sitio.</font>
<!-- Fin del Visor PGN de Ajedrez -->
<!-- ************************* -->

Ahora, tenemos que definir las opciones mediante las cuales se cargarán las partidas. Como son 5 partidas, serán 5 opciones, y la partida que se muestra en el visor primeramente, será la opción que esté seleccionada por defecto.

El código es el siguiente, e irá justo encima del código que se ha creado en el paso 2º:

<form style="display:inline">
  <select name="list" onchange="document.getElementById('visor-1').src=this.value">
    <option selected value="http://www.edicionesma40.com/cgi-bin/bw_partida.py?urlarchivo=http://www.edicionesma40.com/blog/partidas/22-04-2013-1.pgn">Evans - Macdonnell (Londres - 1829) 1-0</option>
    <option value="http://www.edicionesma40.com/cgi-bin/bw_partida.py?urlarchivo=http://www.edicionesma40.com/blog/partidas/22-04-2013-2.pgn">Werle - Westlund (Estocolmo - 1947) 1-0</option>
    <option value="http://www.edicionesma40.com/cgi-bin/bw_partida.py?urlarchivo=http://www.edicionesma40.com/blog/partidas/22-04-2013-3.pgn">Frese - Schroeder (Marburgo - 1951) 0-1</option>
    <option value="http://www.edicionesma40.com/cgi-bin/bw_partida.py?urlarchivo=http://www.edicionesma40.com/blog/partidas/22-04-2013-4.pgn">Krogius – Ojanen (Helsinki - 1951) 1-0</option>
    <option value="http://www.edicionesma40.com/cgi-bin/bw_partida.py?urlarchivo=http://www.edicionesma40.com/blog/partidas/22-04-2013-5.pgn">Alekhine – Löwenfisch (Petersburgo - 1912) 1-0</option>
  </select>
</form><br>

a) En la 2ª línea, está definido el nombre del visor, que en nuestro ejemplo es “visor-1”. Si le hubiéramos dado otro nombre, sería ese nombre el que debería aparecer en lugar de “visor-1”.

b) Como el visor de ejemplo tiene 5 partidas, hay 5 opciones; éstas están definidas entre las líneas 3ª y 7ª. Si queremos aumentar o disminuir el número de partidas a mostrar, tendremos que cambiar el número de opciones, dejando tantas como partidas.

c) La primera opción (línea 3) es la seleccionada por defecto, y en ella deberá estar la partida que muestra el visor al iniciarse. En nuestro caso: http://www.edicionesma40.com/blog/partidas/22-04-2013-1.pgn. La parte de línea que contiene esta cadena de caracteres es la que define la URL donde se encuentra la partida, y deberá adecuarse a cada caso y en cada opción.

d) Por último, el texto que hay al final de cada línea de opción es el que aparecerá en la lista de las partidas. Se recomienda poner un texto identificativo para cada partida, por ejemplo, el nombre de los jugadores, lugar, fecha y resultado.

El código resultante de unir los dos códigos obtenidos en los pasos 3º y 2º será el que tendremos que incluir en nuestra web, en el caso del ejemplo, el código es el siguiente:

<form style="display:inline">
  <select name="list" onchange="document.getElementById('visor-1').src=this.value">
    <option selected value="http://www.edicionesma40.com/cgi-bin/bw_partida.py?urlarchivo=http://www.edicionesma40.com/blog/partidas/22-04-2013-1.pgn">Evans - Macdonnell (Londres - 1829) 1-0</option>
    <option value="http://www.edicionesma40.com/cgi-bin/bw_partida.py?urlarchivo=http://www.edicionesma40.com/blog/partidas/22-04-2013-2.pgn">Werle - Westlund (Estocolmo - 1947) 1-0</option>
    <option value="http://www.edicionesma40.com/cgi-bin/bw_partida.py?urlarchivo=http://www.edicionesma40.com/blog/partidas/22-04-2013-3.pgn">Frese - Schroeder (Marburgo - 1951) 0-1</option>
    <option value="http://www.edicionesma40.com/cgi-bin/bw_partida.py?urlarchivo=http://www.edicionesma40.com/blog/partidas/22-04-2013-4.pgn">Krogius – Ojanen (Helsinki - 1951) 1-0</option>
    <option value="http://www.edicionesma40.com/cgi-bin/bw_partida.py?urlarchivo=http://www.edicionesma40.com/blog/partidas/22-04-2013-5.pgn">Alekhine – Löwenfisch (Petersburgo - 1912) 1-0</option>
  </select>
</form><br>
<!-- ************************* -->
<!-- Visor PGN de Ajedrez -->
<iframe  id='visor-1' frameborder="0" scrolling="auto" width="765" height="544" src="http://www.edicionesma40.com/cgi-bin/bw_partida.py?urlarchivo=http://www.edicionesma40.com/blog/partidas/22-04-2013-1.pgn" style="border: 1px solid black;"></iframe><br>
<font size="1" face="Arial, Helvetica, sans-serif">Consigue este <a href="http://www.edicionesma40.com/blog/visor-pgn-de-ajedrez.htm">Visor PGN de Ajedrez</a> para tu sitio.</font>
<!-- Fin del Visor PGN de Ajedrez -->
<!-- ************************* -->

Y el resultado del visor mostrando las 5 partidas es el que se muestra a continuación:

VISOR PGN DE AJEDREZ PARA WEBS (Anexo)