Preliminarmente: Dal Web alla carta e viceversa


Gli esempi da me riportati nel sito e ripresi da miei vecchi scritti, essendo creati in tutta fretta, mancano di quei necessari accorgimenti e spiegazioni indispensabili per quanti intendessero fare qualcosa di analogo. Riporto allora in quest'area qualche breve esempio corredato, soprattutto, dei dati tecnici necesssari per quanti intendessero sperimentare qualcosa di analogo. (cliccare sulla gif)

Poi, ancora, cliccare qui, per una interessante variante che consente di ridurre le opzioni da tre a due, permettendo, inoltre, l'accesso a vari collegamenti multimediali ed ipertestuali.


Vai a ingredienti n.1

per visionare svariate semplici soluzioni

Vai a ingredienti n.2

per un singolare pannello di animazioni 3D realizzate con immediata trasformazione di immagini piani in animazioni tridimensionali

 Vai a ingredienti n.3

Rielaborazione di una presentazione ricavata dal libro "Il Biocapitalismo" di Vanni Codeluppi, mediante un mio sistema basato sulla riunione di due tabelle per ricavarne una base d'impiego universale. Oltre alla possibilità della sostituzione delle immagini c'è anche quella di aggiungere nuove pagine (v. oltre pag.11) attraverso numerazioni vuote (bianche) che, quando non usate, possono mimetizzarsi attraverso coloratura identica a quella di fondo tabella.

________ 

Notare l'aggiunta di una 12ma pagina che nulla ha a che vedere con le pecedenti, ma dimostra come sia possibile includere mappe concettuali interattive.

Vai a ingredienti n.4

ed ecco una serie di possibilità legate all'originale trasformazione di foto in disegni, accompagnati da scritte. E' possibile creare dei giornali online ed anche cartacei; non solo, si potrebbe andare oltre: estrapolare da un video osservato in Rete i fotogrammi più significativi, dribblando (attraverso la manipolazione originale-disegno) l'annosa questione dei diritti d'autore.

Vai a lngredienti n.5 

per un impiego particolare delle gif animate. Consultando il campione tener conto che potrebbe tornare utile, all'occorenza, giocare sulle diffenti temporizzazioni da assegnare a ciascun frammento dell'animazione.

Vai a lngredienti n.6 

per altre opzioni relative alle gif animate

Vai a lngredienti n.7 

contenente un piccolo esempio sulla possibilità di effettuare infografiche ricorrendo a Dia, software free ita e portable (che è anche possibile impiegare, da solo o congiuntamente a DiagramDesigner, nella costruzione di mappe concettuali semplici ed interattive).

VARIANTI sultema (7b)  

Oltre a quanto indicato al punto 7 mi sembra utile segnalare due interessanti software free, che non richiedono installazione risultando peraltro perfettamente in grado di produtte mappe concettuali, diagrammi ed altre svariate creazioni.
Si tratta di iPhotoDraw (prodotto dalla Microsoft) - VEDI ESEMPIO e di jfdraw (multipiattaforma edal peso di soli 480 Kb).

Vai a Ingredienti n.8

Inserimenti, fra testi in HTML, di vere stereo ricavate da istantanee scattate con fotocamere 3D, e quindi molto diverse dalle immagini presenti in altre parti del sito (v. ad esempio "ingredienti 2"). In questo secondo caso, infatti, sono state presentate elaborazioni in chiave tridimensionale di comuni riprese piane (2D).

  Vai a Ingredienti n.9

Un seguito del n.8, con la possibilità di effettuare video con il solo collegamento tra più gif 3D (qui le immagini non sono perfette in quanto derivate da tentativi sperimentali sull'immediata trasformazione di foto 2D). E, ancora, una dimostrazione di come sia possibile animare una tridimensionalizzazione ricavata dalla creazione di mappa di profondità.

  Vai a Ingredienti n.10

Particolare impiego della gif animata per svariate esizenze (dalla satira al messaggio di tipo commerciale).

Vai a Ingredienti n.11 

Un originale utilissimo impiego delle strips

Vai a Ingredienti n.12

Particolari tipi di trasformazioni di immagini piane in 3D ed in 3D lenticolare.

Vai a Ingredienti n.13
Ancora un insolito impiego delle gif animate

 Vai a Ingredienti n.14
Due possibilità da prendere in considerazione

Vai a Ingredienti n.15
Un'originale alternativa alle foto in successione realizzata in altra precedente opzioni opedrando mediante ricorso a codice Javascript. Qui si è preferito adattare un semplice software come OnLineGalerie (basta eliminare le immagini "thumb" per conservare le semplici jpg - ovviamente compresse in precedenza con ricorso al FileMinimizer- Sarà inoltre opportuno, dopo aver eliminato scritte e righe superflue, ridimensionare le tabelle sulla sola larghezza attribuendo valore di 900px. 
Un grosso vantaggio nel ricorso a questo sistema consiste nella possibilità di posizionare in successione "avanti/indietro" immagini di differente formato (basta impostare sulle opzioni "provino" larghezza 800px o di poco maggiore). Non è necessario, peraltro, attenersi al formato di immagini impostato in partenza, dal momento che risulta possibile rimpiazzare (dando lo stesso nome) qualsiasi immagine di qualsiasi formato direttamente in editor HTML (NVU).
Altro necessario accorgimento è quello di eliminare sotto ciascuna immagine la freccina verso l'alto ed ancora ingrandire quelle orientate a destra ed a sinistra (basta toccarle e ridimensionarle trascinandone adeguatamente lo spigolo.
Ovviamente sarà necessario eliminare il tipico collegamento con gli ormai sottratti ingrandimenti per rimpiazzarli con testi, video audio e quant'altro si volesse immettere. Nell'esempio mi sono limitato ad operare un collegamento dimostrativo solo sulla prima immagine.
Nota importante
Il grosso vantaggio di questo sistema sta anche e soprattutto nel fatto che, una volta realizzato il primo esemplare, se ne potranno ricavare rapidamente quanti se ne desidera.

Vai a Ingredienti n.16
Contiene, in bozza, un esempio di tabella composita e polifunzionale. Quando si crea una mappa interattiva contenente testi ed immagini si incorre facilmente nella necessità di dover frazionare, in una sola soluzione, figure e parole. Tanto comporta un doppio svantaggio. In primo luogo quello di appesantire il caricamento della pagina, e ancora quello  di precludersi la possibilità di cambiare o rimaneggiare il testo. Il sirema qui adottato risolve in molti casi tale problema. In pratica si predispone una tabella di due colonne (rispettivamente di 600 e 300 px) per collocarvi, nella prima, le scritte e, nella seconda, l'intera figura da mappare. Detta figura, trattata separatamente in e dimensionata in larghezza su 300px, recherà sul lato sinistro una stretta banda dello stesso colore dello sfondo di tabella. In essa (racchiusa in apposita e distinta cartella) verranno effettuati i collegamenti interattivi. Successivamente sarà poi suffciente effettuare un copia/incolla della mappa sensibile dall'HTML originale entro la colonna destra della pagina precedentemente predisposta.
Va da sè che, dovendo frazionare mappe disposte in banda orizzontale, sarà ancora più semplice dato che, in tal caso sarà sufficiente unire due tabelle.
Un'opzione utile e semplice (segnatamente per le bande orizzontali, ma praticabile per analogia anche in colonna verticale) riguarda circostanze in cui la larghezza o lunghezza dell'immagine da mappare risulti inferiore a quella della pagina HTML. In tal caso la banda da aggiungere sarà composta da due celle (una per l'immagine e l'altra destinata a didascalia, fregi ecc).