La frase Cause when the goin’ gets tough . . . the tough get goin’, leggermente deformata nel suo significato del titolo perchè riferita al contesto business, è stata attribuita a John Beluschi, che l’ha resa celebre in uno dei suoi film: “Animal House”, dove interpretava John “Bluto” Blutarsky, vedere https://it.wikipedia.org/wiki/Animal_House_(film). Per questo post finalizzato a mostrare che cosa possono fare HTML + CSS + Font Awesome che suonano all’ unisono Umbriaway Consulting  in piedi un progetto base all’ indirizzo https://www.farwebdesign.com/projectcsshtml/ che attinge alle risorse:

https://www.w3schools.com/icons/fontawesome5_icons_chess.asp

https://it.wikipedia.org/wiki/Lista_dei_colori

https://www.farwebdesign.com/playchess/

https://fontawesome.com/

La libreria grafica https://fontawesome.com/ è sempre utilizzata poco nei nostri progetti e invece può rendere di forte impatto le nostre architetture. Ottieni icone vettoriali e loghi social sul tuo sito Web con Font Awesome, il set di icone e il toolkit più famoso del Web. Come? Semplicemente con un link nella nostra pagina principale e la connessione internet aperta:

https://kit.fontawesome.com/a076d05399.js

Lo scopo del progetto è dimostrare come sia molto semplice implementare soluzioni grafiche di base usando queste librerie messe a disposizione da Font Awesome. Per la parte dinamica che manca si potrebbe pensare di implementare un motore JQuery che appende gli spostamenti di un pedone per esempio dal punto A al punto B in una sequenza che vede il pedone sparire dalla posizione iniziale per rimaterializzarsi a due passi di distanza davanti a se, marcando tutte le 64 caselle con ID univoci per consentire il Fetch allo script con una sequenza dove l’oggetto pedone si muove, scompare nel punto A e ricompare nel punto B e conosciamo che cosa possono fare i metodi hyde e show. Oppure semplicemente ci si affida a librerie esterne vedere appunto https://www.farwebdesign.com/playchess/. Qui le cose da fare sono in pratica:

  • costruire il telaio della pagina
  • costruire la tabella all’ interno di un DIV con il thead e il tbody e tutte le righe e le colonne pensando che una scacchiera ha sì 64 caselle ma potrei avere bisogni di identificare ogni punto della scacchiera con la famosa notazione algebrica tanto cara agli scacchi ma anche a battagli navale.
  • inserire i valori per le celle
  • stilizzare la scacchiera agendo sulla tabella, la riga, le celle, inserendo bordi, margini e dimensioni e anche centrando il tutto
  • contrassegnare delle classi nel foglio stile per ogni singola cella quindi e marcare l’alternanza bianco e nero per tutta la scacchiera
  • identificare i due schieramenti con giocatore uno e giocatore due, questo al fine di preparare il terreno alle icone che andremo a scaricare dal sito https://fontawesome.com/
  • inserire le icone con i classici tag <LI> nei punti di nostro interesse
  • modificare i colori delle icone usando le marcature delle classi presenti nelle righe contrassegnate da giocatore uno piuttosto che giocatore due (essendo le icone risorse implementate con il colore nero di default, sarà sufficiente modificare solo il colore del primo giocatore)

E così come poche mosse Font Awasome è implementato! Semplice come tracannare un bicchiere di whisky tutto di un fiato (un rimando al film citato nell’ incipit dove Beluschi, https://it.wikipedia.org/wiki/John_Belushi , si offrì di sostituirsi in carne e ossa a una scena che prevedeva effetti speciali ad alto tasso alcolico.