Logotipo Ediciones MA40

Libros de Ajedrez

Inicio   Blog   Enlaces   Utilidades  


 

Logotipo del Torneo de Ajedrez de Candidatos de 2013

Logotipo del Torneo de Ajedrez de Candidatos de 2013





VISOR PGN DE AJEDREZ PARA WEBS (Anexo)

Publicado por MA40 el lunes 22 de abril de 2013.

Este artículo es una continuación del “VISOR PGN DE AJEDREZ PARA WEBS” http://www.edicionesma40.com/blog/visor-pgn-de-ajedrez.htm (se requiere su lectura previa).

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:

1er PASO

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:

- http://www.edicionesma40.com/blog/partidas/22-04-2013-1.pgn
- http://www.edicionesma40.com/blog/partidas/22-04-2013-2.pgn
- http://www.edicionesma40.com/blog/partidas/22-04-2013-3.pgn
- http://www.edicionesma40.com/blog/partidas/22-04-2013-4.pgn
- http://www.edicionesma40.com/blog/partidas/22-04-2013-5.pgn

2º PASO

Mediante el formulario de http://www.edicionesma40.com/blog/visor-pgn-de-ajedrez.htm obtendremos el código HTML de la partida que se quiera mostrar por defecto en el visor, por ejemplo, puede ser la primera partida.

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.

Para nuestro ejemplo, el código que obtenemos es:

<!-- ************************* -->
<!-- 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"...

Por tanto, el código queda de la siguiente forma:

<!-- ************************* -->
<!-- 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 -->
<!-- ************************* -->

3er PASO

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>

Las cosas que hay que tener en cuenta en este código son las siguientes:

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:

 


Consigue este Visor PGN de Ajedrez para tu sitio.
 
 
comments powered by Disqus
 


Todos los artículos de este blog están bajo una licencia Creative Commons Reconocimiento-NoComercial 3.0 Unported.
Licencia Creative Commons