Antro di Jacopo

Nuova grafica del sito: dietro le quinte


Il problema da risolvere

Il vecchio sito, benché piuttosto usato, era veramente un'accozzaglia di pezzettini di codice alla rinfusa uniti con lo scotch e la buona volontà.

Da tempo pensavo ad una seria ristrutturazione, anche perché non avevo nemmeno troppa voglia di scriverci più sopra visto l'enorme lavoro che bisognava fare ogni volta (vediamo dopo com'era strutturato l'accrocco). Tuttavia l'operazione è stata ritardata per ben due anni, visto che nel frattempo dovevo procedere a rifare il sito di RGBcraft che usava sempre il template OWMX di Jonas Jacek come base ed era completamente statico.

L'idea era quella di riutilizzare parti di codice create per RGBcraft anche qui su a-centauri, tuttavia la cosa non è andata proprio così, ma andiamo per ordine!

Sito precedente

Il sito vecchio era composto da una serie di pagine HTML statiche, basate sul template OWMX di Jonas Jacek. In seguito per semplificare la gestione erano state "dinamicizzate" aggiungendo un po' di PHP che andava a comporre il menù laterale partendo da un file .txt (orrore).

Il resto del sito era un'accozzaglia di script PHP messi alla bell'e meglio in varie cartelle.

Non c'era alcuna organizzazione o separazione tra pagine, script relativi alle pagine, asset e contenuti multimediali. In sostanza un disastro.

Su RGBcraft.com avevo fatto le cose un po' più ordinatamente (vari script PHP tutti uguali che richiamavano i metadati da un file XML e il contenuto da un altro file HTML per poter modificare le pagine facilmente) ma come potete intuire il risultato comunque era molto lontano dall'essere una buona soluzione.

Hosting

Il sito è hostato su un vecchissimo ma ultra-affidabile Sun SunFire V120 con Debian SPARC. Avendo solo 648MHz di CPU (benché sia superscalare) l'ottimizzazione è d'obbligo! Cambiare il server? Non se ne parla neanche! Quanti server sono viola oggi? NESSUNO! Solo robaccia nera o grigia. Solo Ubiquity osa un po' con gli UniFi bianco brillante :P

Obiettivi

Il nuovo sito doveva:

Va da sé che ho cercato a lungo un CMS già pronto in grado di rispondere a queste esigenze. Ho provato Pico e Grav ma c'era sempre qualcosa che non andava. Pico era troppo scomodo da gestire e nel tentativo di modificare il template sono riuscito a romperlo (mea culpa... però...). Grav invece richiedeva una marea di estensioni, che andavano tutte compilate a mano vista la situazione disastrosa di PHP su Debian SPARC, per cui ho deciso di fare il CMS da solo.

Mio CMS - Struttura

Il mio CMS non è certamente un capolavoro, certamente può essere migliorato e anche tanto, però il suo dovere lo fa e specialmente mi ci trovo bene e se manca qualcosa posso aggiungerla facilmente senza impazzire :D

Ecco com'è strutturato:

Il motivo di queste scelte è stato dettato dal fatto che volevo una soluzione "custom" ma non esageratamente complicata, dato che sono un dilettante e appunto mantenere questo sito dev'essere un diletto non una tortura :D

Mio CMS - Grafica

Detesto i siti carichi di Javascript che sono impossibili da vedere su un "misero" Pentium 4 da 3,2 GHz. Come se visitare un sito fosse una cosa più impegnativa di un videogioco in 3D. Però il Pentium 4 con una buona scheda grafica ti fa giocare, eccome se ti fa giocare! Half-Life 2 insegna!! :)

Ho deciso quindi che il Javascript doveva essere impiegato in modo da servire davvero e comunque con estrema parsimonia. Divieto assoluto di usare cdnjs o altre risorse esterne, solo JS vanilla. Massimo 30 righe per pagina. Massimo 500ms di esecuzione sul famoso Pentium 4 sopracitato.

Tuttavia, volevo un sito dall'aspetto moderno, anche un po' per dimostrare che non è la quantità di .js od il suo backend* che rende un sito moderno ma... la grafica!
Ho scelto quindi W3.CSS come framework perché mi ero trovato bene in passato e consente di sviluppare facilmente siti dall'aspetto moderno senza impazzirci troppo in mia opinione.

Ho voluto sperimentare anche con la grafica vettoriale (SVG) dato che consente di ridurre molto le dimensioni di schemi, disegni etc. ed essendo perfettamente scalabile si adatta benissimo agli schermi HiDPI moderni. Il risultato mi ha colpito, peccato solo che Internet Exploder (versioni precedenti alla 11) non supportino gli attributi width e height correttamente... ma chi è che usa IE nel 2020? :)

L'immagine di sfondo è stata realizzata con Trianglify e salvata come SVG. Il risultato è molto carino :)

HTML e supporto vecchi browser

Essendo appassionato di vecchia tecnologia ed essendo fermamente contrario all'obsolescenza programmata, volevo che questo sito fosse non dico compatibile al 100%, ma almeno utilizzabile decentemente anche su vecchissimi computer, senza però comportare un lavoro esagerato o pregiudicare le funzionalità moderne del sito.

L'obiettivo quindi era renderlo visitabile con i peggiori browser mai esistiti: Internet Exploder 5 e 6. Questo comportava una serie di problematiche da risolvere:

Alla fine dopo un po' di sperimentazione sono giunto alla conclusione che una volta trovato il modo di disabilitare HTTPS solo per IE precedenti all'8 per rendere utilizzabile il sito bisognava solo togliere il titolo "Antro di Jacopo" (che appariva in mezzo alla pagina) e servire immagini PNG invece delle SVG.

Così ho messo una regola Apache che disabilita la redirezione se l'user agent è Internet Exploder dalla versione 2 alla 8, e un'altra nel CMS che elimina il titolo sempre se l'utente naviga con IE pre-versione 8.

Ed ecco il risultato, sito un po' scarno ma perfettamente utilizzabile anche su Windows XP con IE6!

Il sito visualizzato con Internet Explore

Browser testuali

Per i computer ancora più vecchi (oppure in caso Xorg decida di non funzionare più) è bene supportare anche i browser testuali. Con poche modifiche Lynx, Elinks e Links visualizzano il sito in maniera più che soddisfacente!

Il sito visualizzato con Lynx

Il futuro

Mi piacerebbe implementare alcune cose in futuro per rendere più comodo ed efficace questo CMS. Ecco quali:

Spero che anche a voi piaccia questa ristrutturazione pesante :) buona navigazione!

Nota: Alcuni pensano che per fare un sito dall'aspetto moderno bisogni per forza usare NodeJS nel backend... avrei tanta voglia di imparare a usare AngularJS e le varie altre tecnologie "moderne" (o meglio... che vanno di moda ora!) lato client e poi come backend usare una Sun SPARCstation con Jigsaw come webserver e parte CGI scritta in Fortran, e sfidarli a capire che backend sto usando per poi vedere la loro faccia quando scoprono "l'accrocco" :D