Visor Chess Tempo. El visor definitivo para tu web

Después de dos decepcionantes experiencias con los visores PGN4web y KnightVision Chess PGN viewer, continuamos con la búsqueda del visor ideal para poder visualizar partidas de ajedrez en el blog.

No es que dichos visores fueran malos. Todo lo contrario, son magníficos. El inconveniente es que están diseñados para funcionar dentro del protocolo http y dan problemas en sitios que utilizan el nuevo protocolo de páginas web seguras https.

Mi búsqueda me lleva, finalmente, al visor que proporciona Chess Tempo.


En realidad, el visor que promete, y mucho, es la versión beta. Lamentablemente, todavía no está disponible para poder utilizar en sitios externos.

El ejemplo que puedes ver a continuación está hecho con la versión anterior del visor de Chess Tempo:

Ejemplo:



Las instrucciones para insertar el visor en tu página web las encontrarás en esta página.

Al leer las instrucciones te darás cuenta de que, para poder incorporarlo a tu sitio, tienes que saber bastante de código HTML y CSS. Para facilitarte el proceso te cuento de manera resumida los pasos que tendrás que dar para insertar el visor en tu blog:

  1. El primer paso es ir al código HTML de tu plantilla del blog y pegar justo antes de la etiqueta <head> el siguiente código:


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

  2. Después, tienes que poner en el HTML de la entrada en la que quieras que aparezca el visor un código parecido al siguiente. (En este ejemplo se muestran dos partidas: Euwe - Alekhine, Eindhoven 1937 y Taimanov - Geller, Zurich 1953):

    3. <script> new PgnViewer( { boardName: "tablero1", pgnString: '[Event "Euwe - Alekhine World Championship Rematch"][Site "Eindhoven NED"][Date "1937.11.20"][EventDate "?"][Round "19"][Result "1/2-1/2"][White "Max Euwe"][Black "Alexander Alekhine"][ECO "E21"][WhiteElo "?"][BlackElo "?"][PlyCount "97"]1. d4 Nf6 2. c4 e6 3. Nc3 Bb4 4. Nf3 Ne4 5. Qc2 d5 6. e3 c5 7. Bd3 Nf6 8. cxd5 exd5 9. dxc5 Bxc5 10. O-O Nc6 11. e4 Be7 12. e5 Ng4 13. Re1 Nb4 14. Bb5+ Kf8 15. Qe2 Bc5 16. Nd1 Bf5 17. h3 h5 18. Bg5 Qb6 19. Nh4 Be4 20. hxg4 Nc2 21. Nc3 Nd4 22. Qf1 hxg4 23. Na4 Qc7 24. Rxe4 dxe4 25. Qc4 Rc8 26. Rc1 b6 27. Nxc5 bxc5 28. Ba6 Qxe5 29. Bxc8 Qxg5 30. Qxc5+ Qxc5 31. Rxc5 Rxh4 32. Rc4 Ne2+ 33. Kf1 Nf4 34. Kg1 g3 35. Ba6 gxf2+ 36. Kxf2 Rh6 37. Rxe4 Rxa6 38. Rxf4 Rxa2 39. Rb4 g6 40. Rb7 Kg7 41. Kf3 g5 42. b4 Kg6 43. b5 f5 44. b6 Ra3+ 45. Kf2 a6 46. Rb8 Rb3 47. b7 Kg7 48. Ra8 Rxb7 49. Rxa6 1/2-1/2 [Event "Zurich Candidates"][Site "Zurich SUI"][Date "1953.09.19"][EventDate "1953.08.30"][Round "12"][Result "1-0"][White "Mark Taimanov"][Black "Efim Geller"][ECO "E95"][WhiteElo "?"][BlackElo "?"][PlyCount "80"]1.d4 Nf6 2.c4 g6 3.Nc3 Bg7 4.e4 O-O 5.Nf3 d6 6.Be2 e5 7.O-O Nbd7 8.Re1 c6 9.Bf1 Re8 10.d5 c5 11.g3 Nf8 12.a3 Ng4 13.Nh4 a6 14.Bd2 h5 15.h3 Nf6 16.b4 b6 17.bxc5 bxc5 18.Rb1 N6d7 19.Qa4 Bf6 20.Nf3 h4 21.Nd1 hxg3 22.fxg3 Nb8 23.Re3 Nh7 24.Reb3 Bd7 25.Qa5 Qc8 26.Nf2 Bd8 27.Qc3 Ba4 28.R3b2 Nd7 29.h4 Ra7 30.Bh3 Qc7 31.Ng5 Nxg5 32.Bxg5 Bxg5 33.hxg5 Kg7 34.Qf3 Qd8 35.Rb7 Rxb7 36.Rxb7 Kg8 37.Bxd7 Bxd7 38.Ng4 Qxg5 39.Rxd7 f5 40.exf5 Rb8 1-0' } ); </script>

    <br />
    <div id="tablero1-container">
    </div>
    <div id="tablero1-moves">
    </div>
    <div style="clear: both; padding-bottom: 0.25em; text-align: justify;">
    </div>

  3. Puedes personalizar la apariencia cambiando los atributos de las etiquetas. Los más importantes son:

    • boardName es el nombre identificador del tablero actual (en este ejemplo, he llamado al tablero "tablero1"). Si se muestran múltiples tableros en la misma página, se debe proporcionar un único boardName a cada uno de ellos.
    • pgnString es una cadena que guarda una o más partidas en formato PGN para interpretarlas y mostrarlas. Todas las comillas simples dentro de sus partidas PGN deben llevar secuencia de escape, esto es "Petrosian's turn" debe cambiarse a "Petrosian\'s turn". Se admiten múltiples partidas en cada pgnString. Se detectará la existencia de múltiples partidas en un mismo archivo y se le ofrecerá al usuario una lista desplegable para elegir entre ellas (con la primera partida del archivo como opción por defecto).

    NOTA:
    La cadena pgnString no debe contener espacios; por tanto, el archivo PGN hay que trabajarlo antes de pegarlo eliminando todos los saltos de línea.

    Para más información, cambios de color de las casillas y otras personalizaciones avanzadas, consulta la página de instrucciones oficiales.

  4. Último paso. Eres libre de usar el visor que te ofrece Chess Tempo, siempre y cuando pongas el enlace http://chesstempo.com/ en la página donde has colocado tu visor.
Espero que te sirva este artículo para poder poner un visor de partidas en tu sitio web.

NOTA: ¡Éxito! Este visor se visualiza bien en el navegador Firefox. Por alguna extraña razón sí que hace compatible los códigos https con los http. Sin embargo, seguramente habrás observado que este visor da error y no se visualizan las partidas en Google Chrome. No he probado con otros navegadores, así que no sé cómo responderán. (Creo, finalmente, que no va a ser posible utilizar este visor en páginas https. Habrá que volver a las plantillas simples de Blogger...)

NOTA 2: Nuevamente, y de forma totalmente desconocida por mí, las partidas se pueden visualizar perfectamente desde mi móvil. ¿Será porque es un dispositivo antiguo? (Es que ya no se hacen las cosas como las de antes...). Seguiremos con la búsqueda del visor ideal en la páginas con https...

Comentarios

  1. Aarón16 de julio de 2017, 0:18

    Hola buenas tardes, quisiera saber como hizo para que las anotaciones y comentarios aparezcan a la derecha del visor pgn. Es que el que yo hice puse, el texto me aparece abajo y no a la derecho como lo tiene puesto usted, saludos :)

    ResponderEliminar
    Respuestas
    1. Ajedrez a la carta16 de julio de 2017, 1:18

      Para poner el texto a la derecha lo hago mediante una tabla. En este artículo: http://ajedrezalacarta.blogspot.com.es/2017/05/el-visor-de-chess-tempo-lo-mejor-que-le.html lo explico perfectamente. Si tienes cualquier otra duda, no dudes en preguntarme. Muchas gracias por tus comentarios y suerte con el visor.

      Eliminar

Publicar un comentario