Creare delle immagini interattive

Sommario

• 1. Presentazione di Xia
  • 1.1. Che cos'è Xia
  • 1.2. Procedimento generale
  • 1.3. Installare Inkscape e Xia
• 2. Creazione di una prima immagine interattiva con Inkscape e Xia
  • 2.1. Creazione delle risorse di supporto
  • 2.2. Creazione dell'immagine interattiva con Xia
  • 2.3. Utilizzo avanzato
• 3. Immagini interattive arricchite
  • 3.1. Formattazione del testo (motore wiki)
  • 3.2. Inserire delle risorse multimediali nei commenti
    • 3.2.1. Usare una risorsa locale
    • 3.2.2. Usare un'integrazione iframe
    • 3.2.3. Usare un'integrazione oembed
    • 3.2.4. Trucco: Creare una musica d'ambiente o una descrizione audio

  1. Presentazione di Xia

  1.1. Che cos'è Xia

  Xia è un software libero sviluppato dagli insegnanti dell'académie di Versailles. Viene distribuito con la licenza GPLv3. Il software xia trasforma un file .svg in un'animazione interattiva html5. Xia permette di creare dei giochi e delle attività interattive: giochi di drag and drop, selezione, individuazione ecc.

  La prima parte di questa documentazione (vedi la parte II) è dedicata alla creazione di una immagine interattiva semplice: individuazione dei dettagli e commenti senza formattazione del testo. Successivamente imparerai a creare delle immagini interattive arricchite (vedi la parte III).

  Tutti gli esempi utilizzati sono visibili on line (i link per vedere le animazioni e scaricare i file sorgente sono indicati all'inizio di ciascuna sezione). Alla fine di ciascuna parte, la rubrica «In sintesi» ricorda i punti essenziali da ricordare per creare un'immagine interattiva.

  1.2. Procedimento generale

  Xia è necessario solo alla fine del procedimento. Come si può vedere nell'immagine qui sotto, la maggior parte del lavoro è svolta con un programma di disegno vettoriale. Noi raccomandiamo l'utilizzo del software libero e multipiattaforma Inkscape, molto semplice da utilizzare (è il programma che sarà utilizzato in questo tutorial).

  

  Se hai dei progetti creati con il programma ImagesActives (file con un'estensione .xia), puoi cambiare l'estensione di questi file in .zip, scompattarli, recuperare il file .svg che si trova nella cartella che hai così ottenuto e aprirlo con Inkscape. Se usi GNU/Linux, esplora il file «.xia» e recupera il file «.svg».

  1.3. Installare Inkscape e Xia

  L'installazione diInkscape e di Xia sono i soli prerequisiti per proseguire nella lettura di questa documentazione. Troverai le informazioni necessarie all'installazione di Inkscape sul sito web del progetto https://inkscape.org/it/download//.

  Devi installare prima Inkscape e poi Xia, altrimenti non riesci ad accedeare a Xia direttamente da Inkscape.

  2. Creazione di una prima immagine interattiva con Inkscape e Xia

  2.1. Creazione delle risorse di supporto

  Guarda l' immagine interattiva creata per questa parte della documentazione. Scarica il file sorgente nel formato svg.

  Le operazioni descritte in questa parte della documentazione ti permetterano di creare un'immagine interattiva «di base», che comprenda:

  • i dettagli zoomabili
  • i commenti costituiti solo da testo non formattato

  Una volta scelta l'immagine, aprila con Inkscape -> File -> Apri

  Quando Inkscape ti chiede di scegliere tra Collega e Incorpora l'immagine, scegli Incorpora.

  Le informazioni inserite nei Metadati del documento (menu File) verranno salvate nell'animazione creata in html5: titolo, autore, diritti, ecc. Perciò è vivamente consigliato inserire queste informazioni; il risultato si può vedere nell'immagine qui sotto:

  

  Il titolo inserito nei metadati del documento compare sopra l'immagine interattiva e dà il suo nome alla pagina web in cui è visualizzata. L'autore e i diritti collegati compaiono nel pop up accessibile attraverso l'icona «i» collocata a destra del titolo dell'mmagine interattiva.

  Puoi salvare il tuo progetto in formato svg già all'inizio del tuo lavoro, andando nel menu -> File -> Salva come.

  Per chiarezza, puoi eliminare l'estensione di origine della tua immagine nel campo Nome della finestra di dialogo. Infine, nel menu a discesa, scegli il formato del file Inkscape svg:

  Inkscape SVG (.svg)

  Diversi strumenti di Inkscape possono essere essere utilizzati per segnare il contorno dei dettagli che diventeranno attivi nell'animazione creata da Xia. Tra questi:

  • Crea dei rettangoli e dei quadrati
  • Crea dei cerchi, delle ellissi e degli archi
  • Disegna delle rette a mano libera
  • Traccia delle curve di Bézier e dei segmenti di retta

  Senza entrare nel dettaglio del funzionamento dei differenti strumenti (Per questo leggi il manuale di Inkscape o il manuale Floss), ricordati che lo strumento Traccia le curve di Bézier e i segmenti di retta permete di delineare il contorno "clic per clic" (i punti di costruzione del poligono vengono allora chiamati «nodi»). Puoi richiudere il tuo poligono cliccando sul primo nodo dello stesso poligono. Puoi disegnare delle Curve di Bézier tenendo premuto il tasto del mouse dopo aver creato un nodo e poi spostando il cursore per far comparire le maniglie di controllo per modificare la forma della curva.

  Se in Inkscape lasci una forma aperta (una curva per esempio), Xia la richiuderà automaticamente unendo il suo punto di partenza con quello di arrivo.

  In Inkscape l'ordine di creazione dei dettagli sarà rispettato nell'immagine interattiva in formato html5 (per esempio, il primo dettaglio tracciato in Inkscape comparirà in alto nel modello "accordéon" o al numero 1 nel modello "boutons").

  Una volta tracciati i dettagli,(il colore del contorno dei dettagli nell'animazione creata da Xia sarà lo stesso scelto in Inkscape), puoi selezionarli con lo strumento Seleziona e trasforma gli oggetti per ridimensionarli, spostarli ecc.

  

  Se hai delle difficoltà a selezionare un dettaglio di cui hai delineato il contorno, applicagli un colore di sfondo. Qualsiasi colore andrà bene ad eccezione del bianco e del nero.

  Puoi accedere alle Proprietà dell'oggetto con un clic del tasto destro del mouse sul dettaglio selezionato. Da lì potrai accedere a una finestra di dialogo che ti permetterà di aggiungere il testo che sarà collegato al dettaglio nell'immagine interattiva:

  

  In questa finestra è necessario inserire le informazioni nei due campi Titolo e Descrizione. Il titolo diventerà quello del dettaglio, la descrizione sarà il suo commento. Non dimenticare di cliccare sul pulsante Imposta prima di chiudere la finestra delle Proprietà dell'oggetto.

  Il procedimento descritto qui sopra deve essere eseguito anche con l'immagine di sfondo: il titolo e la descrizione serviranno da introduzione generale all'immagine interattiva (si tratta di un titolo e di una descrizione che non sono collegati a un dettaglio particolare)

  2.2. Creazione dell'immagine interattiva con Xia

  Quando tutti i dettagli sono stati selezionati e i loro metadati inseriti, Xia può essere lanciato cliccando su > Estensioni > Esporta > Xia édu.

  

  Scegli un modello di esportazione e una cartella dove salvare l'immagine interattiva.

  Cliccando su una delle icone dei modelli di esportazione creerai un file html. Basterà un doppio clic per aprirlo nel tuo browser e vedere l'immagine interattiva nel formato html5.

  La risorsa così creata avrà bisogno di un accesso internet per funzionare pienamente.

  

  2.3. Utilizzo avanzato

  Puoi creare le tue animazioni html5 utilizzando il terminale con il comando xia. I parametri da utilizzare sono --input per indicare il file in ingresso, --output per indicare la cartella di esportazione, --theme per indicare il tema scelto.

  Con GNU/Linux, per esportare un file unico utilizzando il tema accordionBlack: xia --input miofile.svg --output ~/export --theme accordionBlack --export singlefile --quality 3

  Con Mac OS X, per un'esportazione utilizzabile senza conessione internet, con il tema gameDragAndDrop :

  cd /Applications/xia.app/Contents/Resources/
  python xia.py --input miofile.svg --output ~/export --theme gameDragAndDrop --export local
  

  Con Windows, per esportare un file unico con il tema accordionBlack, occorre utilizzare XIA in versione portabile (scaricabile dal sito di XIA). Una volta scompattato il file zippato,(supponiamo che tu l'abbia fatto in dans xia-windows), occorre modificare il file xia-windows/xia/xia.bat come segue:

  

  Poi doppio clic sul file xia.bat per lanciare l'esportazione.

  3. Immagini interattive arricchite

  Visualizza l'immagine interattiva creata per questa parte della documentazione. Scarica il file sorgente nel formato svg.

  In questa sezione l'obiettivo rimane la creazione di un'immagine interattiva «semplice» (cioè, in cui un dettaglio faccia comparire un commento). Però il testo dei commenti sarà arricchito da una formattazione o da risorse multimediali.

  3.1. Formattazione del testo (motore wiki)

  Per arricchire il testo e usare delle risorse multimediali, XIA si basa su una sintassi wiki semplificata. Come puoi constatare paragonando le due schermate qui sotto, basta aggiungere nel testo dei marcatori specifici per ottenere la formattazione o semplicemente scrivere i link verso le risorse da utilizzare.

  Testo inserito con i marcatori wiki :

  

  Risultato finale:

  

  Sintassi Wiki e utilizzo delle risorse.

  • ***Metti in grassetto***
  • **Metti in corsivo**
  • # titolo di livello 1, ## titolo di livello 2 ... (è la sintassi markdown dei titoli, si può arrivare fino a 6 livelli)
  • {{{scrivi del testo senza formattazione}}}
  • Per inserire un'immagine che si trova su internet, scrivi semplicemente il link verso questa immagine:

    https://xia.dane.ac-versailles.fr/img/xia.png
    

  • Per inserire un'immagine che si trova di fianco (allo stesso livello) alla risorsa XIA che hai creato, usa la sintassi dei percorsi relativi (il punto . significa a fianco di e .. significa risali alla cartella superiore) : ./mia_immagine.jpeg images/mia_altra_immagine.jpeg ../images/mia_immagine.png

  • Per creare un link al sito XIA, inserisci semplicemente l'url :

    https://xia.dane.ac-versailles.fr
    

  • Per creare un link a una parola o espressione:

    [https://xia.dane.ac-versailles.fr SITO XIA]
    

  • Per creare un link a un indirizzo mail, inserisci semplicemente l'indirizzo mail: dev-xia@ac-versailles.fr

  • Utilizza un elenco puntato (Lascia uno spazio davanti a ciascun asterisco) : `

    • elemento 1
    • elemento 2
    • elemento 2-1
    • elemento 2-2

  3.2. Inserire delle risorse multimediali nei commenti

  3.2.1. Usare una risorsa locale

  L'inserimento di risorse multimediali nei commenti è molto semplice: copia e incolla l'url della risorsa (indirizzo assoluto o relativo ) o il codice iframe del servizio web utilizzato per ospitare la tua risorsa e Xia crea automaticamente un lettore multimediale, a condizione che questa(immagine, audio, video) faccia parte dei formati supportati:

  • [Immagini] : jpg, jpeg, png, gif
  • [Audio] : ogg, mp3
  • [Video] : ogv, webm, mp4

  Il link deve essere inserito nel campo Descrizione delle Proprietà dell'oggetto.

  • [Link assoluto]: Se l'url della risorsa è http://web.crdp.ac-versailles.fr/02546.ogg, allora basta scrivere questo url nel campo Descrizione delle Proprietà dell'oggetto in Inkscape.

  • [Link relativo] : Se il file della risorsa multimediale si trova nella cartella di esportazione dell'immagine interattiva, o in una cartella contenuta in quella, indica semplicemente il percorso verso il file, considerando la cartella di esportazione come la cartella radice. Per esempio, se il file video.ogv si trova nella cartella video trovandosi lui stesso nella cartella dell'immagine interattiva, indica:

  ./video/video.ogv
  

  Per creare il lettore multimediale.

  Non tutti i browser visualizzano i formati video gestiti da Xia. Si consiglia di esportare i video nei tre formati supportati (mp4, ogv et webm), e di caricarli nella stessa cartella. Così, anche se un formato specifico è indicato nella descrizione (se seguiamo l'esempio precedente: video/video.ogv), se il browser non riesce a leggere la risorsa, cercherà di leggere automaticamente i file dello stesso nome, ma con un'estensione differente (cioè, video.mp4 e video.webm).

  3.2.2. Usare un'integrazione iframe

  Un'altra possibilità è quella di inserire un codice iframe. Questo verrà interpretato e comparirà il lettore del servizio web che darà accesso alla risorsa.

  3.2.3. Usare un'integrazione oembed

  Un'ultima possibilità, la più semplice di tutte, ti permette di inserire delle risorse utilizzando la tecnologia oembed. Attualmente, XIA sa gestire i seguenti servizi esterni:

  • Flickr : Utilizza direttamente il loro sistema di condivisione, come ad esempio https://flic.kr/p/jZ2A12
  • Scolawebtv (servizio dell'académie di Versailles) : Utilizza direttamente i loro link oembed come ad esempio https://scolawebtv.crdp-versailles.fr/?id=3740
  • WebTv (servizio dell'académie di Versailles) : Utilizza direttamente i loro link oembed come ad esempio http://webtv.ac-versailles.fr/spip.php?article1205

  3.2.4. Trucco: Crea una musica d'ambiente o una descrizione audio

  XIA è in grado di lanciare a richiesta dei file audio. Immaginiamo che tu voglia aggiungere un file audio che spiega la risorsa proposta all'avvio di quest'ultimo. Per esempio, supponiamo che tu abbia registrato il tuo commento nel file commento.mp3. Allora basterà scrivere nella descrizione dell'immagine di sfondo la riga seguente:

  ./commento.mp3 autostart
  

  Il . significa che il file è locale (collocato di fianco alla tua risorsa xia) e il codice autostart significa che XIA deve avviare immediatamente la risorsa senza un'azione specifica dell'utente.