zaterdag 26 oktober 2024

You Tube of Chess.com content toevoegen

You Tube of Chess.com content toevoegen

Wat bedoelen we hier met chess content ?


Welnu in deze blog hebben we het over de plugins die mogelijk maken een partij analyse hier in te voegen in je artikel en op te fleuren met een puzzel, de puzzel van de dag, een diagram/stelling vertrekkende van een fen of een pgn. Je kan ook video streams invoegen van andere kanalen of de google kalendar om 2 niet direct schaakgerelateerde plugins te vermelden.

Wat doet zo een plugin ? Deze ingevoegde code maakt het mogelijk om content (een partij op chess.com bijvoorbeeld) aan te spreken (iedere partij heeft een identifier op die desbetreffende site) en te herbergen in je artikel.

Wat is een "fen". Fen is een standaard notatie om een specifieke bordpositie van een schaakpartij samen te vatten. De Forsyth-Edwards Notaton is ontleend aan de uitvinders David Forsyth en Edwards

Wat is een "pgn". PGN staat voor Portable Game Notation, en het is een standaard formaat om een partij te registreren in een tekstbestand. 

Zoals jullie weten kan je partijen op chess.com of lichess.org exporteren naar een bestand. Als het een stelling is die je hebt ingevoerd dan is de uirvoer een fen. Zijn er zetten geregistreerd in je partij, dan is de uitvoer naar pgn.

Invoegen is NIET hetzelfde als een link toevoegen. Want wat er gebeurt met een link is dat je ofwel deze pagina (je blog) verlaat en doorverwezen wordt naar de url van de stream (als het bvb over een you tube stream gaat) of dat er in je browser een nieuwe pagina wordt geopend met daarin de video van bvb je you tube kanaal waarnaar je verwijst.

Wat is Invoegen dan wel ? Invoegen betekent dat je blog artikel open blijft en dat de stream in een klein kadertje binnen je artikel wordt getoond. Idem dito voor schaakpartijen, puzzels e.d. meer.


 You Tube Content


  • You Tube Filmpje toevoegen is er een aparte optie

Selecteer You tube en zoek naar je filmpje met een keyword en kies in je opties dewelke je wil invoegen



Bovenaan je keuze opties





Bovenaan het you tube filmpke dat je kan afspelen vanaf je artikel maar ook pauzeren.

Chess.com Content

1. Puzzel van de Dag


Als je de puzzel van de dag wil toevoegen aan je artikel, in het artikel, dan kopieer je dit

<iframe style="width: 560px; height: 400px;" src="https://www.chess.com/daily-chess-puzzle" frameborder="0"></iframe> 

in je HTML weergave (druk op de pencil in het tekstverwerkingsdeel links boven).
Wat zegt die code ? Haal die puzzel op, de url die er staat en presenteer die in een 560 bij 400 pixel formaat.



Hierboven de chess.com puzzel of the day
 
Ik heb gemerkt dat de chess.com website dit niet meer toelaat omdat men via een andere website (deze blog) connecteert dan dewelke je browser afkomstig is , daarom is deze  embedded content, aangeboden op onze blogspot maar ook op andere blogsites niet meer funktioneel. Chess.com blokkeert deze content omdat dit kan aanzien worden als een vorm van clickjacking. De rechtstreekse url naar de puzzel van de dag werkt wel , maar de omgeleide connectie via deze blogspot (of andere intermediaire sites) werkt eensklaps niet meer.
 
Meer hierover kan je lezen op :
 
Misschien dat ze het alsnog terug toelaten maar voorlopig heeft chess.com gekozen om dit "lam" te leggen. U zal het wel merken indien op deze pagina (met firefox want is de enige browser die u echt aangeeft wat er aan de hand is ) de volgende boodschap verschijnt
"Firefox Can’t Open This Page" . In andere browsers ziet u een blanco object instead zonder foutmelding.
 
 

2.Chess.Com Gifs Delen

Wat is een Gif ?
Een Gif is een geanimeerde afbeelding.
Gifs zijn een gemakkelijke en populaire manierom schaakpartijen de delen op sociale media. Je kan op chess.com GIFSs delen op  Chess.com/gifs of selecteer een partij in chess.com en ga in de optie DELEN (share). Kies vervolgende de optie "Animated GIF" en druk op downloaden


Hierboven de Animated GIF Download optie van de Anmated Gif Tab


Hierboven een selfplaying Game van uw keuze. Je kiest de optie om een afbeelding in te voegen en verwijst naar het het board.gif bestand dat je net hebt opgeslaan.

3.Invoegen (& embedden) van games en puzzels

 

Het voorbeeld van de game

De wellicht meest gebruikte feature van alle invoeg opties is het delen van je chess.com games met of zonder analyse en/op puzzels. 
Vooreerst wend u tot uw partij en/of analyse zoals in https://chess.com/analysis
Druk dan op het "share icoon "  of delen feature, selecteer vervolgens de "Embed" tab en indien het zich om een puzzel betreft selecteer de optie "Puzzle" rechtsonderaan.



                                            Figuur : in de analyse sectie de feature delen in de rechter beneden hoek 



In de tab PGN Image , Animated Gif en Embed, selecteer embed


Kopieer vervolgens de code die in "Embed" staat en switch van Opstelweergave naar html weergave in je  blog artikel (linker bovenhoek) en kopieer die onderaan en druk op de knop Update in het oranje rechts boven

De code ziet er ongeveer zo uit ( in tekstopmaak). De analyse 12333485 is de verwijzing naar onze partijop chess.com
<iframe id="12333485" allowtransparency="true" frameborder="0" style="width:100%;border:none;" src="//www.chess.com/emboard?id=12333485"></iframe><script>window.addEventListener("message",e=>{e['data']&&"12333485"===e['data']['id']&&document.getElementById(`${e['data']['id']}`)&&(document.getElementById(`${e['data']['id']}`).style.height=`${e['data']['frameHeight']+37}px`)});</script>


Dit geeft dit nadat ik het in  HTML weergave onderaan heb toegevoegd en geactualiseerd (Update button). U kan in die ingevoegde content, navigeren net zoals op chess.com/events maar u mooi netjes ingevoegd (Imbedded) in uw column of artikel waarvan u wenst verslag uit te brengen of aan te kondigen voor andere lezers.



Het voorbeeld van een Puzzel 

 
Eerst maak je een stelling, diagram op
Daarna laad je die stelling actief en tenslotte voer je de winnende combinatie uit.
Daar na druk je op "sharing" en Ga naar het tabblad "Embed" en selecteert "Puzzle"
Daarna embed je de code in de HTML Weergave na de plaatst waar je de laatste tekstupdate hebt gemaakt .
 
De Code kan iets van deze aard zijn
<iframe id="12334973" allowtransparency="true" frameborder="0" style="width:100%;border:none;" src="//www.chess.com/emboard?id=12334973"></iframe><script>window.addEventListener("message",e=>{e['data']&&"12334973"===e['data']['id']&&document.getElementById(`${e['data']['id']}`)&&(document.getElementById(`${e['data']['id']}`).style.height=`${e['data']['frameHeight']+37}px`)});</script>
Hieronder de screenshot van de "Embed code" die je dien te copieren vanaf chess.com

 
 
 Kopieren we dit in HTML na onze teskst die eraan voorafgaat en klaar is kees
 


Hieronder de Partij Alexander Alekhine - Emanuel Lasker , Sint-Petersburg 1914.
 
 
 
 

4. Chess.com Events

Het is ook mogelijk je lezers op te hoogte te houden van het tornooi waaraan je deelneemt of eerder nog eentje dat live wordt verslaan op chess.com

De lijst van events op chess.com vind je op de pagina. 
https://chess.com/events

Een screenshot als je er rechtstreeks naar navigeert.



Selecteer de event daar vervolgens in het rechterdeel waar een opsomming is van de events. Kopieer vervolgense de volledige url en substitueer de teskt in het VET met de url van uw event z
Ik heb hier gekozen voor het Fide WK 2024 dat zal doorgaan van 25 november tot 13 december. 


Om dit in te voegen copieer je volgende content in de HTML weergave

<iframe width="512" height="295" frameborder="0" src="https://www.chess.com/events/embed/2024-fide-chess-world-championship"></iframe>

Noot :

 Wil je het venster in de blog comfortabel groot kies dan

width="1366" height="786"

Wil je het venster iets breder dan het blad 

width="683" height="293"

Wil je dat het venster fit in de breedte van uw artikel kies dan voor 512  en 295 al is het dan wel klein , zoals in dit onderstaand geval

              

 

In dit  artikel heb ik je getoond hoe je :

  1. Een you tube filmpje kan invoegen
  2. Hoe de puzzel van de dag dient ingevoerd te worden, ofschoon momenteel chess.com de zaak blokkeert
  3. Hoe je van je partij een animated gif maakt van de zetten uit je pgn op de chess.com/analysis site en deze vervolgens invoegt gelijk een afbeelding maar dan met de *.gif extensie
  4. Hoe je een pgn kan invoegen (met de Embed code)
  5. Hoe je een puzzel maakt door een stelling in te voeren ( door eerst het bord leegte maken en je figuren op het bord aan te brengen) , vervolgens laden te klikken, de oplossing in te voeren door de zetten uit te voeren. Doe je dit niet dan krijg je de stelling maar kan je geen zetten uitvoeren en geschik je ook niet over de next move en back toetse ! Vervolgens share je dit, selecteer het Embed Tabblad en selecteerd Puzzles in de rechter beneden hoek. Je copieert de "Embed Code" en kopieert die in je HTML weergave na de laatste tekst van waar je wil dat de code wordt ingevoegd. Onthoud dat in html objecten altijd ingesloten worden als <div> en de sectie of instructie wordt afgesloten met </div>, dit duidt op een begin en eind van een sectie.De code invoegen is altijd na een </div> en voor de <div> van een nieuwe sectie.
  6. Hoe je een eventpublished of aankondigt voor je bloggemeenschap van volgers

 

Geen opmerkingen:

Een reactie posten

Puzzel of the Day on Lichess