Tutorial visor de ajedrez de Chess Tempo (II)

He decidido publicar una segunda entrada sobre el visor de Chess Tempo por varios motivos. El primero de ellos es que casi todas las semanas recibo correos en relación al visor, la mayoría de ellos con dudas o problemas a la hora de implementarlo en un blog. Espero que este post pueda servir de ayuda a todos aquellos que me habéis enviado un correo y solucionar sus dudas, y también a los que estéis interesados en el tema. He intentado que sea más completo y más fácil de comprender que el primero que dedique a este visor de partidas de ajedrez. Otros motivo es que quiero mostrar alguna mejora importante. Esto lo haré al final de la entrada.

.

Os recuero que este visor tiene una licencia Creative Commons License. Podemos usarlo de forma gratuita en nuestro blog no comercial, con la condición de que coloquemos un enlace visible a http://chesstempo.com en él.

.

Este visor es muy bueno pero tiene un gran inconveniente: es muy engorroso de implementar en el blog. Creo recordar que en más de una respuesta a vuestros correos he comentado esto. Incluso en algún post propio he tenido que comentar una partida escrita tal cual apoyándome en los diagramas tradicionales porque no he sido capaz de montarla en el visor. Los comentarios de las jugadas provocaban infinidad de errores al montar el visor. Cuando arreglaba uno aparecía otro. Al final me rendí. ¡Y eso que ya lo tengo configurado! Es decir, no es manejable. Pero aún así, tener paciencia. Os propongo que lo intentéis.

.

Comenzamos.
.

Apartado 1. Copia de seguridad de la plantilla del blog.

.
En primer lugar y antes de hacer nada os recuerdo que debéis realizar una copia de seguridad de la plantilla de vuestro blog. Esto es muy importante. Si cometemos algún error y no somos capaces de arreglarlo el trastorno que supone deteriorar la plantilla del blog puede ser muy grave. La solución: restaurarlo con una copia correcta de la plantilla.

.

A continuación explico cómo hacer esta copia de seguridad de la plantilla.

.

1 – Accedemos al escritorio de nuestro blog a través de la cuenta de usuario. Una vez dentro nos dirigimos a la sección “Diseño”, que está marcada con la flecha y el círculo rojo de la imagen.

.

.

2 – Dentro de la sección “Diseño” encontramos varios apartados o sub secciones divididas por pestañas. Pulsamos con el ratón sobre la pestaña llamada “Edición de HTML”. En la siguiente imagen se corresponde con la flecha número 2.

.
.

3 – Por último, en la parte superior aparecerá una sección llamada “Realizar copia de seguridad / restaurar plantilla”. Ahí tenéis un texto en azul que pone “Descargar plantilla completa”. Se corresponde con la flecha número 3 de la imagen anterior. Al pulsar sobre este texto surgirá una ventana que os preguntará en que carpeta de vuestro disco duro deseáis descargar la plantilla. La imagen siguiente muestra este paso.

.
.

El archivo descargado estará en formato xml. Es decir, tendrá la extensión *.xml y lo podéis abrir y editar con un editor de textos (pero ojito con lo que hacemos con este archivo, así que mejor no tocarlo).

.

Alguien me ha preguntado por este tema de la copia de seguridad de la plantilla del blog. Espero que con esto queden solucionadas sus dudas.

.

Apartado 2. Enlaces códigos Javascript y estilos CSS.

.

Este paso nos permitirá llamar a las “librerías” del visor necesarias para mostrarlo. Para incluir estos enlaces tenemos que añadir un código HTML dentro de la plantilla de nuestro blog, y por lo tanto debemos dirigirnos a la sección “Edición de HTML” de nuestro blog (es la misma sección que se muestra en el paso 2 correspondiente a la copia de seguridad de la plantilla de nuestro blog).

.

Llegamos así al apartado “Editar plantilla” que muestro en la siguiente imagen.

.

.

La segunda flecha señala a un recuadro rojo que se corresponde con el contenedor de texto donde podremos editar la plantilla. Aquí es donde añadimos, eliminamos o modificamos el código necesario. Fijaros que en el lado derecho de este contenedor hay un scroll vertical, una barra que nos permite desplazarnos por toda la plantilla.

.

Para añadir el código HTML que llama a las librerías del visor tenemos buscar la etiqueta “head” que se encuentra al principio de la plantilla.

.

<head>

.

Un truco. Cuando queráis buscar una cadena de caracteres, (una palabra, por ejemplo ahora nos interesa “head”) pulsar la combinación de teclas Ctrl + F y aparecerá una pequeña ventana modal con un recuadro donde incluir en texto a buscar. Es muy útil.

.

Una vez que hayáis encontrado la etiqueta “head”, copiamos y pegamos el siguiente código justo antes de ella.

<!-- CHESSTEMPO.COM PGN VIEWER CODE BELOW -->
<!-- Support libraries from Yahoo's YUI project -->
<script src='http://chesstempo.com/js/pgnyui.js' type='text/javascript'>
</script>
<script src='http://chesstempo.com/js/pgnviewer.js' type='text/javascript'>
</script>
<link href='http://chesstempo.com/css/board-min.css' rel='stylesheet' type='text/css'> </link>

.

En la imagen figura un ejemplo de cómo quedaría este paso. Fijaros que en rojo he rodeado la etiqueta “head” y justo antes se encuentra el código HTML.
.
.
Antes de que alguien se adelante. El código que os ofrezco no es exactamente igual que el que aparece en la página de Chess Tempo. Si no es igual será por algún motivo… Confiar en mí.

.

Una vez colocado este código guardamos la plantilla, pero no cerréis la ventana ni salgáis de la esta página, manteneros en ella para continuar con tutorial.

.

Apartado 3. Definición de estilos CSS.

.

Utilizamos las hojas de estilo en cascada (CSS, Cascading Styles Sheets) para definir como visualizaremos el tablero, por ejemplo el color de las casillas, el tipo de piezas, si el tablero presenta un borde exterior y de que grosor, la velocidad de desplazamiento de las piezas al moverse, o el tamaño de la barra de los controles de navegación (esta barra aparece en la parte inferior del tablero con los botones de avance y retroceso de los movimientos de la partida).

.

Las posibilidades en el uso de estilos son tantas como los gustos particulares que cada uno tenga en la elección de colores, tamaños, etc. Me extendería muchísimo si explico cada uno de ellos (además no los conozco todos, sólo he probado a jugar con una pocas configuraciones). Para más información sobre este tema os tengo que remitir a la página Chess Tempo donde hace referencia a los estilos.

.

Este código de estilos CSS tenéis que colocarlo justo a continuación del final del código que se comento en el apartado anterior a cerca de los enlaces a las librerías de Javascript y estilos CSS.

.

Un ejemplo válido de código de definición de estilos para el visor sería este:

.

<style type="text/css">.ct-board-container{padding:5px;}.ct-board,.ct-black_square,.ct-white_square{display:block;}.ct-board-border{border:2px solid #363A3D;}.ct-board{overflow:hidden;text-align:center;}.ct-black-square,.ct-white-square{float:left;}.ct-black-square{background-color:#666;}.ct-white-square{background-color:#8D8D8C;}.ct-nav-buttons{padding-bottom:7px;padding-top:7px;}.ct-back,.ct-forward,.ct-start,.ct-end,.ct-play,.ct-stop{vertical-align:middle;}.ct-mainline-commentary{padding-left:15px;}.ct-board-move-mainline,.ct-board-move-variation{cursor:pointer;}.ct-board-move-mainline{font-weight:700;}.ct-board-move-comment{color:green;}.ct-board-move-current{color:red;}</style>

.

Y dentro de la plantilla el código pegado sería así:

.

Fijaros que el código añadido con los estilos queda enmarcado dentro del recuadro verde y está comprendido justo entre el final del código que llama a las librerías del visor y la etiqueta “head”, ambos rodeados por un recuadro rojo.

.

Guardamos los cambios y ya podemos salir de la sección “edición de HTML” dentro de nuestro blog.

.

Ahora no veremos nada. De momento no hay tablero, ni partida, ni nada, pero más adelante cuando creemos una entrada visualmente tiene que verse algo como esto:

.

Apartado 4. Implementar la partida en el visor.

.

Este es el último paso y el más delicado. Este apartado describe como incluir el código necesario para poder colocar una o varias partidas en el visor. En esta fase solo nos moveremos por la pantalla de edición de la entrada en la que coloquemos el visor.

.

Imaginar que estamos escribiendo una entrada que tiene el siguiente contenido:

.

“A continuación coloco en el visor la partida entre Anand y Loek van Wely:”

.

Este texto sería escrito en el contenedor que Blogger nos proporciona para ello utilizado en modo “Redactar” como muestra la siguiente figura (pestaña 1 en color verde):

.
.

.

A continuación, para incluir el visor pincharemos sobre la pestaña que habilita el modo “Edición de HTML” (pestaña 2 en color rojo). Ver siguiente figura:

.
.

Ahora copiamos a continuación esto:

.

<script> new PgnViewer( { boardName: "Amber2008ronda11", pgnString: '[Event "Amber 2008 Blind"][Date "27-03-2008"][Round "11"][White "Anand"][Black "van Wely"][Result "1/2-1/2"][WhiteElo "2799"][BlackElo "2681"] 1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6 6. Be2 e6 7. O-O Be7 8. a4 Nc6 9. Be3 O-O 10. f4 Qc7 11. Kh1 Re8 12. Bd3 Nb4 13. a5 Bd7 14. Nf3 Bc6 15. Qe2 Nd7 16. Bd4 e5 17. fxe5 dxe5 18. Be3 Nxd3 19. cxd3 Nc5 20. Ng5 Bxg5 1/2-1/2' } ); </script><div id="Amber2008ronda11-container"></div><div id="Amber2008ronda11-moves"></div><div style="clear:both; padding-bottom:0.25em"></div>

.

En la imagen queda así:
.

Y ahora bastaría con pulsar el "botón publicar" entrada para obtener esto:

.

.

¡Fácil, no!

.

Ahora vamos e explicar detenidamente el código script que acabamos de incluir en esta entrada porque es la parte más problemática.

.

Este código tiene dos partes bien diferenciadas. La primera de ellas es esta.

.

<script> new PgnViewer(
{ boardName: "Amber2008ronda11",
pgnString: '[Event "Amber 2008 Blind"][Date "27-03-2008"][Round "11"][White "Anand"][Black "van Wely"][Result "1/2-1/2"][WhiteElo "2799"][BlackElo "2681"] 1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6 6. Be2 e6 7. O-O Be7 8. a4 Nc6 9. Be3 O-O 10. f4 Qc7 11. Kh1 Re8 12. Bd3 Nb4 13. a5 Bd7 14. Nf3 Bc6 15. Qe2 Nd7 16. Bd4 e5 17. fxe5 dxe5 18. Be3 Nxd3 19. cxd3 Nc5 20. Ng5 Bxg5 1/2-1/2' } ); </script>

.

Sirve para crear una instancia del visor PGN. Los elementos entre las llaves “{“ y “}” permite configurar detalles del visor. En este caso sólo añadido “boardName” (siempre necesario) para denominar el contenedor de la partida y “pgnstring” que llama a una cadena de caracteres, que para nosotros no es más que nuestro archivo PGN.
.
Muy importante: entre la primera comilla simple que hay después de este elemento “pgnstring” “ ‘ “ y la segunda comilla simple “ ‘ ” colocada justo al final del PGN, normalmente será el resultado de la partida, no debemos incluir otra cosa que no sea estrictamente el texto que contiene el archivo PGN. La mayoría de los problemas vienen dados aquí. Cualquier espacio de más, cualquier carácter raro, no lo reconocerá y nos impedirá la ejecución correcta del visor. De hecho, una vez que tengamos montado el visor lo único que cambia es precisamente el archivo PGN.

.

La segunda parte es esta.

.

<div id="Amber2008ronda11-container"></div><div id="Amber2008ronda11-moves"></div><div style="clear:both; padding-bottom:0.25em"></div>

.

Aquí le decimos al visor dónde tiene que colocar el tablero y también donde tiene que colocar la lista de jugadas como veremos en un ejemplo más adelante.

.
Cuando se inicia el visor PGN buscará elementos entre etiquetas “div” con atributos id asociados con la opción de configuración boardName proporcionada arriba. Usando el ejemplo de arriba (boardName: 'Amber2008ronda11'), una etiqueta “div” con id 'demo-container' se usará como contenedor para el tablero y sus controles de navegación. La lista de jugadas usará la etiqueta “div” con id 'Amber2008ronda11-moves'. Fijaros que no deben quedan espacios entre las comillas simples “ ‘ “. La opción “padding-button:0.25em” se refiere a una configuración opcional de la barra de controles de navegación y no tiene mayor importancia.
.
Bien. Pues con esto es todo lo necesario para montar el visor. Veamos un par de cuestiones más.
.

Si queréis añadir los números y las letras asociadas a las filas y columnas del tablero podéis añadir “showCoordinates:1” a continuación del atributo “pgnString” (el texto pgn con la partida). Por ejemplo:
.

<script> new PgnViewer( { boardName: "Amber2008ronda11", pgnString: '[Event "Amber 2008 Blind"][Date "27-03-2008"][Round "11"][White "Anand"][Black "van Wely"][Result "1/2-1/2"][WhiteElo "2799"][BlackElo "2681"] 1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6 6. Be2 e6 7. O-O Be7 8. a4 Nc6 9. Be3 O-O 10. f4 Qc7 11. Kh1 Re8 12. Bd3 Nb4 13. a5 Bd7 14. Nf3 Bc6 15. Qe2 Nd7 16. Bd4 e5 17. fxe5 dxe5 18. Be3 Nxd3 19. cxd3 Nc5 20. Ng5 Bxg5 1/2-1/2' , showCoordinates:1} ); </script><div id="Amber2008ronda11-container"></div><div id="Amber2008ronda11-moves"></div><div style="clear:both; padding-bottom:0.25em"></div>

.


La imagen se vería así:
.

.

Otra novedad, esta es muy importante, se refiere a como mostrar la lista de jugadas. Un problema serio es que cuando colocamos una partida con comentarios y análisis, la lista de movimientos es muy grande y aparece alejada del tablero con lo que seguir la partida a la vez que leemos los movimientos junto con los comentarios es imposible. Para solucionar esto una idea es enmarcar el texto en un contenedor con un scroll vertical que nos permita navegar por la lista de movimientos a la vez que estamos visualizando el tablero. Visualmente sería algo así:
.
.
Fijaros que ahora la lista de movimientos junto con dos partidas añadidas están incluidas en un contenedor con un scroll vertical situado en l aparte derecha. Esto opción nos permite reproducir la partida pudiendo ver las jugadas sobre el tablero a la vez que los comentarios.

.

El código que he utilizado es este:

.

<script> new PgnViewer( { boardName: "Amber2008ronda11", autoScrollMoves: true, newlineForEachMainMove: false, pgnString: '[Event "Amber 2008 Blind"][Date "27-03-2008"][Round "11"][White "Anand"][Black "van Wely"][Result "1/2-1/2"][WhiteElo "2799"][BlackElo "2681"] 1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6 6. Be2 e6 7. O-O Be7 8. a4 Nc6 9. Be3 O-O 10. f4 Qc7 11. Kh1 Re8 12. Bd3 Nb4 13. a5 Bd7 14. Nf3 Bc6 15. Qe2 (15. Bb6 Qc8 (15... Qd7 16. Qe2 Nxd3 17. cxd3 Bd8 18. Bxd8 Raxd8 19. Nd4 Qc7 20. Qe3 Rc8 21. Qg3 Red8 22. Nxc6 Qxc6 23. e5 Ne8 24. Rae1 d5 25. f5 exf5 26. Rxf5 Nc7 27. Ref1 Rd7 28. Qf2 Rf8 29. Ne2 Ne6 30. Nf4 Nxf4 31. Qxf4 Re7 32. h3 h6 33. Rf3 Qe6 34. d4 Kh7 35. Rg3 Rc7 36. Kh2 Rg8 37. Rf3 Rf8 38. Rg3 Rg8 39. Rb3 Rd8 40. Rb6 Qe7 41. Rd6 Rdd7 42. Rh5 { 1-0 Lobron, E (2505) - Spraggett, K (2560) / Wijk aan Zee 1985}) 16. Qe1 Nd7 17. Bd4 Nc5 18. Qg3 f6 19. e5 Rf8 20. Bxc5 dxc5 21. Bc4 Bd5 22. Nxd5 exd5 23. Bb3 c4 24. Ba4 Nc6 25. c3 fxe5 26. Nxe5 Nxe5 27. fxe5 Qe6 28. Bc2 Rxf1+ 29. Rxf1 Rf8 30. Rxf8+ Bxf8 31. Qf4 g6 32. Bd1 Qf7 33. Qd4 Qf1+ 34. Qg1 Qxg1+ 35. Kxg1 Kf7 36. Bg4 b6 { 1/2-1/2 Anand, V (2725) - Kasparov, G (2795) / New York 1995}) 15... Nd7 16. Bd4 e5 17. fxe5 dxe5 18. Be3 Nxd3 19. cxd3 Nc5 20. Ng5 Bxg5 1/2-1/2' , showCoordinates:1} ); </script><div id="Amber2008ronda11-container"></div><div id="Amber2008ronda11-moves" style="OVERFLOW: auto; HEIGHT: 150px; BACKGROUND-COLOR: #ededed"></div><div style="CLEAR: both; PADDING-BOTTOM: 0.25em"></div>

.

¿Cuál es la diferencia con el anterior código?

.

En primer lugar he añadido 2 elementos nuevos justo después del boardName: “autoScrollMoves: true,” y “newlineForEachMainMove: false,”. Con ellos denominamos el contenedor que incluirá la lista de movimientos y los comentarios. En la segunda parte del script añadimos la configuración de este contenedor (tamaño y el color de fondo), y lo asociamos a la lista de movimientos: “div id="Amber2008ronda11-moves" OVERFLOW: auto; HEIGHT: 150px; BACKGROUND-COLOR: #ededed"”.
.
Esta idea de incluir la lista de movimientos en un contenedor con scroll es útil cuando la partida tiene muchos análisis y comentarios con la idea de facilitar su lectura. Cuando la partida no tiene muchos análisis no es necesario incluirla dentro de este contenedor porque la lista de movimientos no será extensa y entrara todo (tableros y lista de movimientos) en la misma pantalla.
.

Una última cosa más. Hay correos que me piden ayuda y no puedo dársela. En primer lugar no sé programación web y me cuesta mucha entender lo que estoy haciendo. Cualquier modificación que funciona es conseguida a base de prueba y error. En segundo lugar cuando tengáis una duda es necesario que me digáis exactamente cuál es el problema. Por ejemplo, recibo muchos correos diciéndome “el visor me da errores y no me deja poner la partida”. En vez de esto describir el error diciendo cuando surge y que mensaje reproduce. Si no estaremos dando palos de ciego.

.

Espero que os sirva de ayuda.

.

Un saludo.