WEB PROJECT PLAN

1. Brief e Benchmark

Obiettivi e finalità:

Utente tipo:

Competitors:

• Wikipedia / Architettura Rivoluzionaria: Wikipedia in qualità di risorsa a carattere enciclopedico analizza nel dettaglio la storia e i progetti architettonici (tra cui parecchi mai realizzati) ascrivibili all’architettura rivoluzionaria.
  Quest’ultima è quella fase del Neoclassicismo che, alla vigilia della Rivoluzione francese, si caratterizzò, sul piano formale, per l'alterazione del repertorio dell'antichità classica, assumendo nel contempo un'intensa valenza etica ed evocativa con forti slanci utopici, simbolici e visionari.
  I limiti di questa risorsa, per motivi di impostazione di una qualsiasi pagina Wikipedia, sono sicuramente la circospezione ad uno specifico sottogruppo delle "architetture fantastiche" e la mancanza di una puntuale raccolta ordinata.
• Inoltra va ricordato che il web è ricco di singoli articoli circa le "architetture fantastiche", che però analizzano in maniera più o meno sommaria l’argomento e mancano anch’essi di una raccolta omogenea del materiale.
  Alcuni esempi:
  • da Architetturasostenibile.it
  • da Onemag.it
  • da Istitutomariausiliatrice.it

2. Struttura e layout

La mappa dei concetti

I contenuti della pagina e i collegamenti tra loro presenti possono essere sintetizzati con questa mappa concettuale.
La risorsa contiene principalmente:

• i progetti selezionati, di cui si forniscono le specifiche informazioni (immagine, titolo, autore, data, supporto, dimensioni, ubicazione, descrizione, progetti correlati);
• gli autori dei progetti, di cui si forniscono le specifiche informazioni (immagine, nome, data di nascita e morte, biografia, progetti correlati);
• i luoghi/contesti in cui i progetti sono stati pensati e/o realizzati, di cui si forniscono le specifiche informazioni (immagine da mappa, titolo/nome, autori correlati, descrizione, ubicazione, progetti correlati)

Schema delle dipendenze

A livello gerarchico i contenuti della risorsa possono essere sintetizzati con questo schema delle dipendenze.
Ci sono tre pagine di primo livello:

• "Storia": una pagina dedicata alla spiegazione dell'evoluzione di questi progetti poco fortunati nella storia;
• "Esplora": canale per la navigazione nelle collezioni della pagina;
• "Extra": una sorta di blog della pagina su contenuti correlati all'argomento della risorsa.

Da "Eslpra" si può accedere a tre pagine di secondo livello:

• "Progetti": canale per la navigazione tra i progetti catalogati;
• "Artisti": canale per la navigazione tra gli artisti correlati ai progetti catalogati;
• "Luoghi": si immagina una mappa interattiva con i luoghi più significativi delle varie tappe dei progetti catalogati;

composte da collezioni della categoria che rappresentano.
Da queste ultime è possibile accedere a pagine di terzo livello con i singoli item presentati nelle collezioni.
È previsto che ogni pagina richiami l'altra attraverso link contestuali presenti nella section o nell'aside.
Dal footer è è possibile accedere ai social della pagina, alla pagina dei contatti e al web project plan.

Wireframe

Home

• testata uguale per tutte le pagine con immagine evocativa dei progetti e titolo della risorsa;
• barra di navigazione con i canali di navigazione primari uguale per tutte le pagine e la searchbar;
• dalla barra di navigazione primaria è possibile accedere alla barra di navigazione secondaria;
• sezione con immagini dei progetti e relative descrizioni side-by-side coronate da una frase riassuntiva sui contenuti della pagina;
• sezione con immagine di un artista e breve estratto dalla sua biografia in modo da incuriosire circa il canale di navigazione secodnario sugli artisti;
• sezione con anteprima di un'ipotetica mappa interattiva con i contesti di provenienza dei progetti, in richiamo all'ultimo canale di navigaizone secondario sui luoghi;
• sezione sugli ultimi articoli caricati nell'ultimo canale di navigazione primario, con relativa immagine e breve estratto;
• footer uguale per tutte le pagine con elementi di metanavigazione quali:
• link ai social network della pagina;
• link al web project plan;
• link ai contatti;
• link al copyright
• newsletter form.

Raccolta

• testata uguale per tutte le pagine con immagine evocativa dei progetti e titolo della risorsa;
• barra di navigazione con i canali di navigazione primari uguale per tutte le pagine e la searchbar;
• dalla barra di navigazione primaria è possibile accedere alla barra di navigazione secondaria;
• briciole di pane per la navigazione contestuale;
• bookmark;
• lista dei progetti con link per raggiungere i progetti;
• aside con link di navigazione contestuale;
• footer uguale per tutte le pagine con elementi di metanavigazione quali:
• link ai social network della pagina;
• link al web project plan;
• link ai contatti;
• link al copyright
• newsletter form.

Item

• testata uguale per tutte le pagine con immagine evocativa dei progetti e titolo della risorsa;
• barra di navigazione con i canali di navigazione primari uguale per tutte le pagine e la searchbar;
• dalla barra di navigazione primaria è possibile accedere alla barra di navigazione secondaria;
• briciole di pane per la navigazione contestuale;
• barra per la navigazione sequenziale dei progetti;
• descrizione del progetto in questione;
• aside con link di navigazione contestuale;
• footer uguale per tutte le pagine con elementi di metanavigazione quali:
• link ai social network della pagina;
• link al web project plan;
• link ai contatti;
• link al copyright
• newsletter form.

Usabilità

• un numero ristretto di voci nella navbar per favorire una più veloce e chiara navigazione;
• la navbar offre uno strumento di ricerca per qualsiasi contenuto presente sulla risorsa;
• la navbar resta invariata in tutte le pagine per evitare confusione;
• una homepage riassuntiva del materiale presente sulla risorsa per favorire un’immediata consapevolezza dei contenuti e stimolare la curiosità dell’utente;
• il footer rimane uguale in tutte le pagine e anch’esso consta di pochi elementi, tutti di metanavigazioni;
• inoltre il footer presenta icone standard e convenzionali per i social network connessi alla pagina;
• sono presenti le "briciole di pane" nella sezione più complessa, cioè quella di "Esplora", in modo da facilitare la navigazione interna ed evitare di tornare indietro;
• tutti i canali di navigazione secondari sono richiamati negli altri nell’aside, affinchè l’utente sia sempre cosciente di quali altri contenuti potrebbero interessargli;
• la risorsa presenta uno stile coerente al suo contenuto circa la scelta dei colori e dei font, in modo da richiamare l’antica carta dei documenti e dei progetti architettonici più famosi;
• nella scelta di questi ultimi ci si è limitati ad una cerchia ristretta di opzioni presenti sulla risorsa: un solo font, il Palatino, e quattro colori (bianco, grigio, marrone e color sabbia).

3. Linguaggi

HTML

CSS

• la scelta del font e dei colori dei vari elementi;
• la gestione della struttura delle varie componenti, come le dimensioni, il posizionamento, i margini, il padding, il line-height, ecc.;
• la modifica dei buttons, del form e degli input;
• l'uso della box shadow sulle card della homepage, dell'aside e delle immagini presenti sulla risorsa per dare maggiore risalto a questi elementi;
• la gestione grafica dei link presenti sulla risorsa;
• la gestione dell'accesso ai social.

XML

• identifier, l'identificativo dell'item;
• title, il titolo dell'item;
• description, una breve descriizone dell'item;
• creator, il nome del creatore;
• date, la data di creazione;
• source, la risorsa d'ispirazione o di primaria crezione;
• format, la dimensione dell'immagine e il supporto;
• relation, il riferimento a risorse collegate;
• publisher, il responsabile della pubblicazione;
• contributor, chi ha partecipato o contribuito alla realizzazione del contenuto.

Metadati

• title, il titolo della risorsa;
• creator, l'autore della risorsa ;
• subject, l'argomento generale della risorsa;
• description, una breve descrizione della risorsa;
• publisher, il responsabile della pubblicazione;
• date, data di creazione della risorsa, secondo il formato YYYY-MM(-DD);
• format, il formato della risorsa;
• identifier, l'identificativo univoco (url);
• language, la lingua in cui la risorsa è disponibile.

4. La collezione

La collezione è rappresentata dall’insieme di progetti architettonici che in qualche modo hanno messo in discussione il modo comune di pensare, proposto ideali, cercato di rendere reale il futuro, ma che purtroppo per varie motivazioni non sono mai stati realizzati.
La loro catalogazione è presentata in uno dei canali di navigazione secondari, "Progetti", in cui sono elencati con le seguenti informazioni: id, titolo, autore e data di creazione.
L’elenco è accompagnato a sinistra da un bookmark, realizzato appositamente per la risorsa grazie a Photoshop, che graficamente cerca di sintetizzare i progetti più interessanti della raccolta e a destra da un aside ricco di link ad altre pagine della risorsa.
Tramite link associato alla riga di riferimento del progetto si può raggiungere l’item desiderato, il quale si presenterà così strutturato (come per esempio è stato fatto con il progetto per l'Abbazia di San Gallo):

• l’immagine del progetto;
• al di sotto di essa un serie di informazioni essenziali sul progetto quali: il titolo, l’autore, la data, il supporto su cui si presenta, le dimensioni di quest’ultimo e l’ubicazione del documento;
• "Il progetto": una descrizione dettagliata del progetto;
• "Attualità": una sezione dedicata a quello che ne è stato del progetto, se ha magari avuto qualche applicazione o cosa è stato creato al suo posto;
• "Progetti correlati": una sezione dedicata ad una sommaria descrizione dei contenuti che questo specifico progetto ha saputo influenzare come ricerche, altre costruzioni, riflessioni filosofiche o altro, tutte raccolte in "Extra" e raggiungibili tramite link;
• un accordion diviso in:
  • "Formati disponibili" con il link al file XML relativo all’item
  • "Collegamenti esterni" con i link esterni ai vari "Progetti correlati", presumibilmente raccolti anche in "Extra"
  • "Bibliografia" con i link esterni relativi alle risorse da cui la descrizione dell’item ha preso spunto
• al di sopra dell'intera descrizione è possibile una navigazione sequenziale dei vari elementi della collezione.

5. Strumenti e servizi

Produzione:

• Sublime Text per la realizzazione delle pagine html, css e xml;
• Photoshop per la realizzazione dell’immagine di sfondo della testata e dei bookmark dei canali di navigazione secondaria e la modifica delle immagini presenti sulla risorsa;

Conservazione:

Arricchimento:

• dropdown in navbar;
• search bar in navbar;
• breadcrumbs (o "briciole di pane");
• accoridon;
• timeline;
• newsletter form;
• social media bottons;
• font awsome icons.

Valorizzazione:

• la possibilità di iscriversi alla Newsletter tramite l’apposito form e rimanere sempre aggiornati sulle ultime novità;
• la possibilità di contattare lo staff attraverso "Contattaci" per consigli, suggestioni o critiche;
• i vari social network per la comunicazione dei contenuti della pagina e l’interattività tra gli utenti (Twitter, Facebook, Instagram e Pinterest).

6. Bibliografia

Tutte le immagini utilizzate sono state prese da Wikisource o contrassegnate per riutilizzo con modifiche.
Per la realizzazione della risorsa sono state utilizzate le seguenti fonti:

• il materiale didattico online su iol.unibo.it per lo studio dei linguaggi e del progetto;
• "Metodologie informatiche e discipline umanistiche" di Francesca Tomasi per lo studio dei linguaggi;
• w3schools.com per l’approfondimento circa i linguaggi utilizzati;
• html.it per l’approfondimento circa i linguaggi utilizzati;
• treccani.it/ L'utopia nell'architettura per le informazioni circa l’argomento della risorsa;
• wikipedia.org/ Architettura rivoluzionaria per le informazioni circa l’argomento della risorsa;
• "Atlante delle architetture Fantastiche"di Philip Wilkinson per le informazioni circa l’argomento della risorsa;
• "Nel segno di Giano: passato e futuro nell’arte europea tra Sette e Ottocento" di Antonio Pinelli per le informazioni circa l’argomento della risorsa.