La necessità

Sabato 11 agosto 2012, mi appresto ad entrare in un negozio di videogiochi con l'intento di acquistare The Witcher 2: Assassins of Kings Enhanced Edition. Erano anni che non visitavo uno di questi posti dove, a differenza delle credenze comuni, si trovano persone di tutte le età, sia maschi che femmine, appassionati e non. Da molto tempo preferivo acquistare su internet dove generalmente c'è più scelta soprattutto per quel che riguarda l'ambito pc. Vi garantisco che rimasi stupito della quantità di titoli che erano ammassati in scrupoloso ordine alfabetico in uno scaffale dedicato. Senza accorgermene trascorsero due ore in cui mi persi tra novità, edizioni speciali, edizioni budget, collezioni. Uscii con in mano il gioco che desideravo e con altri due che mai avrei pensato di acquistare, Lego Star Wars: La Saga Completa e Jedi Knight: Dark Forces II con relativa espansione (classe 1998!!!). E proprio quest'ultimo (regalato peraltro) mi fece sorgere una necessità che avevo già ravvisato in passato, scrivere una guida in cui elencare tutti i passaggi per l'installazione dei miei videogiochi preferiti. Sembra una cosa inutile ma accade spesso che quando se ne reinstalla uno dopo tanti anni non ci si ricordi più cosa bisogna fare ed essendo io un appassionato di retrogame è un evento piuttosto frequente, vuoi per un eventuale cambio di pc, vuoi per un cambio di sistema operativo, vuoi per il fatto di non riuscire più a trovare del materiale aggiuntivo. Eh già, perché uno dei vantaggi del pc rispetto alle consolles è proprio la possibilità di modificare un videogioco a piacimento e quindi il più delle volte ci si trova a dover installare in un certo ordine patch, mod, riconfigurare video e audio in seguito ad un cambio di hardware, tutte operazioni che ci si dimentica in che ordine devono essere eseguite e con che modalità. Unitamente a questo sarebbe stato interessante scrivere anche delle porzioni di soluzione per i passaggi più complicati, fare una raccolta di immagini, descrivere il tipo di personaggio utilizzato nel tal gioco di ruolo, ecc. e quindi mi sono chiesto se potesse esistere un sistema per organizzare tutto questo materiale in un unico archivio sempre disponibile e di facile consultazione senza dover scrivere foglietti o salvare documenti elettronici tutti separati tra di loro.

L'ispirazione

È da quasi vent'anni che lavoro e gioco con il computer, ho sperimentato le gioie e i dolori del DOS, l'acerbo Windows 3.0 (che fungeva soltanto da interfaccia grafica), la rivoluzione di Windows 98 che iniziava ad integrare le proprie funzioni con quelle del Web, ho provato alcuni emulatori di consolles del passato ed ho utilizzato lo straordinario DOS-BOX per far rivivere alcuni vecchi videogiochi degli anni Novanta, non ho mai avuto il tempo di analizzare Linux e i nuovi sistemi operativi come Android non so nemmeno come siano fatti. Ma come credo quasi tutti mi sono confrontato, e in modo massiccio, con una realtà che si chiama internet. Sono dieci anni che utilizzo questo strumento tanto che nel corso del tempo sono arrivato a ritenere che "Internet logora chi non ce l'ha". Sono sempre rimasto affascinato dai siti web, dall'aspetto estetico, dall'ipertestualità, dai layout, dalle immagini in movimento, dalla possibilità di racchiudere un'enciclopedia in uno spazio virtuale a disposizione di tutti e realizzai che forse poteva essere quella la soluzione alla mia necessità. Già due anni prima mi ero confrontato con un mio collega che è consulente informatico chiedendogli banalmente come si fa a fare un sito e lui mi parlò di pagine scritte in HTML con annessi fogli di stile esterni e di web dinamico in PHP e io rimasi inebetito al punto tale da non averci capito nulla e da ritenere che la cosa fosse troppo difficile. Ma quando si ha un bisogno si delinea anche un obiettivo e io ce l'avevo e con esso anche l'idea per poterlo raggiungere, creare un mio sito web partendo da zero senza la benché minima conoscenza della materia. Un giorno cercando una recensione di un vecchio gioco di ruolo, Fallout 2, mi imbattei casualmente su La Maschera Riposta, un sito visivamente molto semplice e di facile consultazione, ricco di testi e con una buona quantità di immagini, e privo di quella confusione che si nota sempre di più in altre realizzazioni. Mi colpì il nome dell'autore, Mosè Viero, perché era uno dei collaboratori della mia rivista preferita di videogiochi (purtroppo chiusa dopo quasi quindici anni di attività) e soprattutto ciò che c'era scritto nella sezione in cui spiegava il motivo per cui aveva deciso di realizzarlo. A quel punto capii di essere sulla strada giusta. Ciò che volevo però era costruire uno spazio dove inserire le mie guide, le mie soluzioni senza assolutamente voler competere con lavori molto più professionali e dettagliati che si trovano più o meno facilmente sulla grande rete, un modo per poter dare la mia interpretazione personale della risoluzione di un videogioco. Essendo un appassionato di giochi di ruolo è facile capire cosa intendo dire. Il fulcro di queste produzioni è basato su varie forme di libertà (non tutte sempre presenti contemporaneamente), interpretazione di personaggi diversi come caratteristiche e abilità, quest (missioni) risolvibili in modi differenti, mappe esplorabili non linearmente, combattimenti diversificati non solo per il nemico che si ha di fronte ma anche per le capacità del personaggio utilizzato. Tutti questi aspetti, e anche altri, permettono al giocatore di vivere la propria esperienza videoludica in modo diverso dagli altri e quindi di darne un'interpretazione personale, nei limiti di ciò che il gioco in questione ti permette di fare ovviamente. Quindi, per esempio, non troverete sempre i modi migliori per risolvere una quest ma il sistema adottato da me che, probabilmente, non è sempre il più semplice, non è sempre il più lineare ma è quello che ho espresso io interpretando un particolare personaggio o utilizzando talune abilità che magari non sono le più facili da gestire ma che ho preferito per il mio modo di vivere il gioco.

Lo studio e la realizzazione

Non nascondo che mi sentivo come Davide contro Golia, realizzare qualcosa di cui non conoscevo nulla, una sfida che però nasceva in un periodo particolare della mia vita, un momento in cui il mio lavoro al quale avevo dedicato tanti sforzi non mi dava più soddisfazione, un motivo in più per imparare qualcosa di nuovo e per dimostrare, soprattutto a me stesso, che avevo ancora delle capacità da esprimere. Studiare non mi ha mai spaventato e la mia, seppur parziale, conoscenza del mondo del computer mi dava già un bel vantaggio nell'avvicinarmi a questa nuova materia. Iniziai quindi ad analizzare il materiale che avevo raccolto in tutti questi anni ed in particolar modo alcune soluzioni scritte in formato HTML da un'altra rivista di videogiochi. Vi confesso che era come leggere una lingua sconosciuta ma proprio questo fu la spinta ad andare avanti, volevo imparare a tutti i costi, doveva essere una rivincita personale anche contro un ambiente lavorativo che non apprezzava più ciò che facevo. Il mio primo approccio fu di provare ad impostare delle semplici pagine utilizzando uno strumento ben poco adeguato, OpenOffice (sono un amante dei software open-source), sfruttando il sistema dei frame come facevano nelle guide citate prima e visualizzando i risultati su un browser assolutamente inadatto, Internet Explorer 7. Così facendo però non capivo cosa stessi facendo, inoltre il risultato non era per nulla soddisfacente. Il passo successivo fu quindi il più logico, mi procurai dei testi dedicati ed iniziai a leggere e a studiare realmente partendo dai rudimenti teorici e sperimentando di volta in volta i singoli tag. E lo feci utilizzando lo strumento più banale che possa esistere ma che, col senno di poi, è anche quello a mio avviso più funzionale ed efficiente, un editor testuale, Notepad++, il software che mi ha accompagnato sinora nella realizzazione del mio sogno. Può sembrare una cosa assurda ma scrivere tutto il codice a mano si è rivelata un'esperienza entusiasmante ed appagante perché si ha il totale controllo di ciò che si inserisce e soprattutto si diventa padroni assoluti delle proprietà di ogni elemento. Comprendere finalmente l'HTML era già di per sè un bel passo avanti ma la prima svolta cruciale che avvenne di lì a poco fu l'uso dei CSS. Ciò che avevo visto sinora erano siti dal layout tabellare ma dappertutto leggevo che struttura e formattazione devono essere tenuti distinti e che l'HTML e i CSS dovevano occuparsi rispettivamente della prima e della seconda. Ci volle qualche prova ma alla fine capii la notevole importanza di questo aspetto, pagine più leggere e controllo assoluto di ogni più piccolo elemento estetico. E da qui iniziò la stesura vera e propria del mio progetto, puro HTML per la struttura e puro CSS per tutto lo stile in un foglio esterno. Lentamente (ma neanche così tanto in verità) il sito cominciava a prendere forma, visualizzavo il risultato su qualsiasi browser per accertarmi che tutto funzionasse regolarmente e lo spavento iniziale si tramutò sempre di più in soddisfazione, ritrovai una felicità persa da tempo. Ci fu poi una seconda svolta, quella che diede l'anima al mio lavoro, la scoperta dei CSS 3. Ancora in fase di sviluppo, le proprietà implementate in questa terza versione mi permisero di donare un cuore a ciò che stavo costruendo. Sono sempre stato convinto che l'aspetto primario di ogni produzione deve essere la funzionalità e la facilità d'uso e che la grafica deve essere un aspetto complementare e di supporto a questo obiettivo. Con l'uso dei CSS 3 il mio sito da piatto e visivamente poco appariscente divenne ciò che vedete, le uniche immagini presenti sono quelle estrapolate dai videogiochi trattati, tutto il resto è puro codice scritto manualmente. Come se non bastasse decisi che il mio sito doveva rispettare gli standard dettati dal W3C (il consorzio che segue lo sviluppo del web a livello mondiale), di conseguenza in ogni pagina sono presenti i loghi per verificarne la validazione. A questo punto ero soddisfatto di ciò che ero riuscito a fare ma c'era qualcosa che mancava. Le pagine cominciavano ad essere parecchie e c'erano dei contenuti che si ripetevano su ognuna di esse ed ogni volta che volevo apportare una modifica a queste parti condivise dovevo intervenire manualmente su ogni singola pagina, cosa questa che richiedeva tempo e attenzione per non incorrere in sbagli. Qui ci fu la terza svolta, l'implementazione del PHP, un linguaggio di programmazione lato server che permette di generare codice HTML ottenendo un contenuto differente creato dinamicamente in base alle istruzioni fornite. Dovetti quindi riconvertire tutte le pagine HTML in PHP ed aggiungere delle funzioni che permettessero di includere del codice presente in alcuni file esterni creati appositamente. In questo modo se volevo apportare delle variazioni potevo farlo su questi piccoli file e la modifica avveniva automaticamente su tutte le pagine in cui era presente l'istruzione in PHP. Comodo, funzionale e, una volta comprese le potenzialità, molto divertente.

Il sogno continua... E la sfida pure...

Questo sito rappresenta il mio primo ingenuo approccio al mondo del web design e mi sono divertito moltissimo a realizzarlo, l'ho scritto e modificato più volte nel corso del tempo ed è sempre in fase di evoluzione. Ora che ne ho appreso le basi voglio esplorare questo ramo dell'informatica sin dove le mie capacità me lo consentiranno, approfondire lo studio dei CSS 3, analizzare l'HTML 5 (magari riconvertendo la struttura del sito scritta in HTML 4.01), capire la programmazione in PHP unita a MySQL per creare applicazioni web e, se possibile, superare lo scoglio del linguaggio JavaScript (quello che anima il piccolo orologio che vedete sulla sinistra) e di AJAX.

Impresa ardua? Senza dubbio si tratta di una sfida di non poco conto considerando che non ho studi specifici in programmazione ma la volontà di imparare non mi manca e soprattutto c'è chi crede nelle mie capacità e mi è sempre stata vicino in questa mia nuova passione.

Spero che questa produzione amatoriale possa essere di gradimento a chi di voi avrà voglia di consultarla e se avete segnalazioni, consigli, critiche non esitate a scrivermi!

Buona lettura!!!

Primo Aggiornamento

Sabato 12 aprile 2014. Questa è una serata particolarmente felice per me. Il lavoro di ristrutturazione di questo sito è giunto finalmente al termine. Ci sono voluti quasi quattro fine settimana più qualche ora serale per riuscirci, ma ora posso finalmente annunciare che questo mio primo esperimento nel mondo del web-design ha assunto la forma desiderata sin dall'inizio.

Chi lo ha già visitato in passato potrebbe pensare che in fondo l'unica cosa che ho fatto è stato di cambiarne l'aspetto grafico e di aggiungere la galleria animata dei portatili Santech, ma in realtà ciò che ho modificato è tutta la concezione del sito stesso.

Quattro sono le novità sostanziali che ho introdotto e che mi hanno permesso di accrescere ulteriormente la mia poca esperienza in questo settore.

Strutturazione delle pagine partendo dal contenuto

Spesso, specialmente quando si è inesperti, si tende a scrivere il codice HTML partendo da quello che sarà l'aspetto visivo che avrà la pagina web. Questo succede anche quando si utilizzano gli editor visuali, si dispongono gli elementi e il codice viene creato automaticamente, motivo per cui molti degli utilizzatori di questi strumenti conoscono poco o per nulla il linguaggio HTML. Io personalmente, come ho già avuto modo di scrivere, non ho mai usato nessuno di questi editor e ho iniziato scrivendo il codice interamente a mano. Anche così facendo però si può incorrere nell'errore di creare la struttura della pagina pensando a come verrà vista sul monitor. Per superare questa errata impostazione progettuale mi è stato di grandissimo aiuto studiare il libro Olre i CSS: la sottile arte del web design di Andy Clarke, un testo del 2006 pubblicato in italiano nel 2008 che pur essendo ormai obsoleto da un punto di vista tecnico racchiude in sé una filosofia e un metodo lavorativo tuttora più che valido. In quegli anni i CSS3 erano ancora in fase poco più che embrionale e le discussioni vertevano soprattutto sulla necessità di eliminare i layout tabellari in favore di un uso coscienzioso dei fogli di stile. Per vari motivi le tabelle venivano utilizzate per creare i layout, ma il loro vero ruolo non è mai stato questo. Nel suo libro, Andy Clarke spiega come una pagina debba essere costruita partendo dall'analisi del suo contenuto al fine di strutturarla in modo logico utilizzando i tag HTML più appropriati in base al loro significato semantico. Per fare un esempio, può accadere che un menù di navigazione orizzontale si possa trovare graficamente prima del titolo principale del sito, ma ciò non vuol dire che il codice HTML debba seguire questa disposizione degli elementi. Anzi, è vero esattamente il contrario. Il titolo principale di un sito è obiettivamente l'informazione primaria che deve essere fornita al navigatore e quindi deve comparire prima del menù di navigazione. Questo permette di dare logicità alla struttura della pagina. Poi se si vogliono disporre gli elementi in un dato modo ci penseranno i CSS a fare il loro lavoro in tal senso. Questa è l'applicazione del famoso concetto di separazione della struttura dalla presentazione.

Tag HTML5

Per dare un maggior significato semantico al contenuto ho riscritto tutte le pagine utilizzando i nuovi tag introdotti dall'HTML5, i vari nav, article, section, hgroup, time, figure, ecc. In questo modo ogni elemento acquisisce una propria personalità ancora più definita rispetto a prima e diventa subito riconoscibile il suo ruolo all'interno della pagina. Questo permette anche a chi dispone di un browser testuale o è impossibilitato a visualizzare lo stile grafico di capire esattamente ciò che rappresenta il testo che sta leggendo, un menù di navigazione principale, un articolo indipendente, un raggruppamento di titoli, un elemento grafico che accompagna un paragrafo e che consente di comprendere meglio ciò di cui si sta parlando, ecc. Tutto ciò dovrebbe contribuire a rendere il sito più moderno, accessibile, e rintracciabile dai motori di ricerca.

Layout a box flessibili

Da un punto di vista grafico la novità migliore che ho adottato nel rifacimento di tutto il sito è stato l'utilizzo massiccio del flexible module layout che ora è pienamente supportato da tutti i browser moderni. Di cosa si tratta? Torniamo indietro alla discussione sui layout tabellari. Perché molti designer preferivano usare le tabelle per creare i layout? Perché permettono di creare riquadri flessibili in modo semplice in cui allineare i contenuti in orizzontale e in verticale senza sforzi. Purtroppo, però, esse non sono nate a questo scopo. C'è da dire però che nemmeno i CSS per quanto potenti e versatili possedevano delle proprietà specifiche destinate ai layout di pagina. Nel corso degli anni i designer sono riusciti a sfruttare le proprietà float e display per ottenere risultati notevoli, ma che spesso necessitavano di sforzi notevoli per giungere al risultato sperato. Ora però le cose sono cambiate ed è stato implementato il nuovo valore "flex" per la mitica proprietà display. Questo, unito a tutte le altre proprietà, permette di rendere flessibili i blocchi di contenuto e di disporli all'interno dello spazio a nostra disposizione in maniera semplice ed efficace. Possiamo creare così colonne della stessa altezza, centrare gli elementi figli sia in orizzontale che in verticale all'interno dei blocchi genitori, distribuire lo spazio vuoto in modo uniforme, creare griglie multi-riga o multi-colonna. E' stato piuttosto impegnativo capirne bene il funzionamento, ma provando e riprovando studiandone a fondo la teoria sono riuscito ad apprenderne le potenzialità al punto da ritenerlo un cavallo di battaglia per l'immediato futuro. Se vogliamo un sito moderno che non rimanga legato alle limitazioni dei vecchi browser questo è lo strumento che può cambiarne il volto.

Programmazione con utilizzo di controller e template

Questa è indubbiamente la novità che mi ha portato più soddisfazione perché rappresenta un notevole passo in avanti nel mio processo di apprendimento del linguaggio PHP. Cosa ho fatto di così importante da essere così tanto felice? Ho realizzato ciò che volevo sin dall'inizio, creare un sito composto da una singola pagina dinamica. La versione precedente prevedeva la chiamata di singole pagine che in parte erano dinamiche, ma che però erano già costruite. Ora invece ho una singola pagina vuota il cui contenuto viene generato dinamicamente in base alla richiesta che viene effettuata. In pratica ho un template, ovvero un modello di pagina che rappresenta la struttura portante, lo scheletro che contiene al suo interno dei valori fissi e dei valori variabili. Questi ultimi, che sono il cuore di questo meccanismo, vengono generati da un controller, ovvero da un file che contiene tutte le istruzioni necessarie a crearli. E come fa a crearli? In base ai parametri che vengono passati nella query-string presente nella barra di navigazione. Tutti i contenuti sono delle variabili che vengono generate sul momento, le parti statiche sono pochissime, e ciò permette di avere un sistema estremamente flessibile, facilmente mantenibile, soggetto a minori sbagli. Le cose vengono scritte una volta soltanto e tutto il resto si adatta subito ai cambiamenti. Ovviamente devo ringraziare il mio collega informatico perché lo spunto me l'ha dato lui, ma come sempre se si ragiona sulle cose tutto poi diventa meno difficile di quanto potesse sembrare in un primo momento. Come già sapete io non ho studiato informatica, ma per riuscire a mettere in piedi questo sistema di controller + template è risultato molto più utile e necessario produrre dei ragionamenti logici e procedurali che non conoscere perfettamente il linguaggio di programmazione. La cosa primaria è analizzare, creare un diagramma di flusso mentale o scritto su carta. Una volta fatto questo, il lavoro è per la maggior parte fatto. Creare il codice diventa abbastanza agevole quando si conoscono le basi del linguaggio e le difficoltà in cui si possono incappare riguardano più la creazione di funzioni ad hoc (che peraltro io non sono ancora riuscito ad apprendere bene), o la realizzazione di passaggi più complicati.