Guida SVG di JetPunk - Versione Italiana - #4 Domande Frequenti

In questa sezione puoi trovare le risposte alle domande più frequenti riguardo agli SVG su JetPunk. Se hai bisogno di aiuto su Inkscape in generale, vai alla sezione L'ABC degli SVG oppure a SVG Avanzati prima di leggere questa parte. Se non trovi il tuo problema in questa sezione, prova anche la pagina Troubleshooting. Se ancora non trovi una risposta adatta, scrivi pure un commento sotto a questo blog!

Purtroppo Inkscape è disponibile solo su computer, non esiste una versione per tablet o cellulare. Alcuni editor online funzionano anche da mobile, ma solitamente con molte meno funzionalità rispetto ad Inkscape.

Tuttavia ciò che invece puoi usare anche da mobile sono gli SVG Standard offerti da JetPunk. Non potrai modificare l'SVG, ma ti basterà navigare fino al Selettore SVG mentre crei un quiz da tablet o cellulare per selezionare una di queste mappe pronte per l'uso.

Ci sono vari modi per reperire SVG, ma fai sempre attenzione a non rubare le creazioni di qualcun'altro, potrebbero essere protette da copyright. Ecco alcune fonti per SVG:

La seconda è senza dubbio l'opzione più "potente", dal momento che ti permette di mantenere la colorazione di entrambi i path, oltre a permetterti di far illuminare anche solo uno dei due path. Per questa opzione dobbiamo sfruttare le classi. Riepiloghiamo come fare:

Con questo riepilogo dovresti vedere che è sufficiente dare la stessa classe a due path, e inserire quella classe nella prima colonna a sinistra nello Step 2 per farli illuminare con la stessa risposta.

Per fare un esempio pratico, immaginiamo di avere le capitali del Sudafrica. Nell'SVG Standard sulle capitali dell'Africa avremmo:

Ovviamente le capitali sono distinte. Tuttavia in alcuni quiz, per esempio sulle capitali di tutti i Paesi, potresti voler lasciare libero l'utente di indovinare una qualsiasi di queste tre capitali e far illuminare ugualmente tutti e tre i cerchi che le rappresentano. Visto che hanno tre id diversi, come facciamo?

Beh, come abbiamo visto nella sezione SVG e JetPunk, ognuno di questi cerchi avrà la classe "za-c", in quanto la mappa Standard segue le convenzioni di JetPunk sui nomi di classi e id. È proprio questa classe che ci permette di far illuminare tutte e tre le capitali nella mappa. 

Nota che potremmo anche combinare i tre path su Inkscape, ma questo porterebbe a problemi con lo zoom.

Quindi scrivendo "za-c" nella colonna più a sinistra nello Step 2, e inserendo per esempio "Bloemfontein | Città del Capo | Pretoria" nella cella per la risposta avremmo il risultato desiderato (nota che il carattere "|" funziona direttamente come "o, oppure" (OR) fra le capitali; avremmo potuto anche impostarlo semplicemente nei type-in).

Fatto! Spero che questo esempio più pratico ti sia stato d'aiuto per comprendere meglio l'uso delle classi su JetPunk. Sentiti libero di provare tu stesso altre combinazioni usando gli SVG Standard.

In realtà è abbastanza semplice; prendi la mappa che vuoi "svuotare" ed aprila in Inkscape. Seleziona tutto e modifica il Riempimento in bianco, poi rimuovi i contorni andando su "Stile contorno" e impostando la larghezza a 0. Ora, se stai usando un SVG Standard, dobbiamo fermare le classi che colorano automaticamente i path, come "country" e "border".

Per fare ciò, apri l'Editor XML di Inkscape e naviga fino alle prime righe. Devi cercare un nodo chiamato "svg:style". Se non c'è, puoi saltare questo passaggio. Se invece è presente nel tuo SVG, seleziona il nodo al suo interno. Potresti dover cliccare sul triangolo o sul "+" accanto per vedere il contenuto di "svg:style". Una volta selezionato dovresti vedere questa schermata:

Ora devi cambiare il valore di "content" in modo che sia vuoto; una volta cancellato tutto il testo e premuto Invio, dovrebbe apparire così:

Finito! La mappa vuota ora dovrebbe funzionare come vogliamo.

Fortunatamente questo si può fare usando la classe incorporata di JetPunk, "svg-hidden". Questa classe nasconde automaticamente il path fino a quando non viene indovinato. Il modo più semplice per aggiungere questa impostazione è andare nelle SVG Options e attivare gli "Hidden Paths". In questo modo nasconderai i path di tutte le risposte fino a quando non vengono indovinate. È anche compatibile con i quiz randomizzati.

Non è però compatibile con i quiz Click Map.

Se desideri nascondere solo alcuni path, puoi aggiungere manualmente la classe "svg-hidden" a questi path in Inkscape. Abbiamo già trattato come aggiungere una classe molte volte nella Guida, ma ripetiamolo velocemente.

Apri l'Editor XML e seleziona un path a cui vuoi aggiungere la classe. Se il path ha già delle classi, devi solo aggiungere "svg-hidden" alla fine, separandola dalle altre classi con uno spazio:

Se invece il path non possiede già classi, clicca sul "+" vicino a "Nome" per aggiungere un attributo, il cui nome deve essere "class" (per indicare che aggiungiamo una classe) e il valore, in questo caso, "svg-hidden":

Aggiungendo questa classe a dei path, JetPunk li nasconderà fino a quando non saranno indovinati.

Non impostare l'opacità dei path a 0 su Inkscape, JetPunk elimina automaticamente tutti i path trasparenti quando carichi un SVG.

Se invece volessi fare l'opposto, cioè far sparire il path una volta indovinata la risposta abbinata, basta usare un po' di CSS. Tutto ciò che devi fare è aggiungere questo codice nelle istruzioni del quiz. Visto che è racchiuso fra tag <style>, il codice vero e proprio non verrà mostrato nel quiz.

Analizziamo velocemente cosa stiamo facendo con questo pezzo di codice: innanzitutto stiamo selezionando il contenitore "svg-holder", al cui interno selezioniamo i path con la classe "svg-correct", che JetPunk assegna automaticamente ad un path quando la risposta abbinata viene indovinata. La proprietà di stile che andiamo a cambiare a questi path è l'opacità, che viene impostata a zero. Il risultato è proprio ciò che volevamo, cioè appena ad un path viene assegnata la classe "svg-correct", cioè viene indovinato, la sua opacità diventa zero.

Se invece vuoi nascondere le risposte sbagliate, per esempio per far sì che finito il quiz l'utente veda solo quelle a cui risposto correttamente, non devi far altro che sostituire ".svg-correct" con ".svg-incorrect"; come abbiamo visto, la prima è la classe con cui JetPunk identifica le risposte corrette nell'SVG, mentre la seconda è come identifica le risposte errate.

Invece se vuoi nascondere sia le risposte sbagliate che quelle corrette, puoi usare questo codice:

Questi estratti di codice funzioneranno solo con quiz di testo. Se vuoi modificare dei quiz Click Map, devi sostituire "svg" con "map" nelle varie classi, per esempio "map-correct" e "map-holder".

Se i contorni dei path del tuo SVG, per esempio i confini su una mappa, sono grossi e brutti da vedere quando ci zoomi sopra, sappi che c'è una soluzione molto semplice: basta aggiungere la classe "border" ai confini. Per vedere come si aggiunge una classe ad un path, scorri in alto fino alla sottosezione "Nascondere un path fino a quando viene indovinato".

Ricorda anche che se usi la classe "zoomable-circle" non serve aggiungere anche la classe "border"; questo poichè entrambe ereditano dalla classe "small-stroke". Facciamo un po' di chiarezza. Nel resto della Guida abbiamo già menzionato che la classe "small-stroke" è inclusa sia in "border" che in "zoomable-circle". Infatti è proprio questa classe a rimpicciolire e far sembrare più puliti i contorni, ossia a rendere small gli stroke. La classe "border" è in realtà una classe che cambia il colore del contorno di un path in quello standard per i confini su JetPunk, e poi richiama la classe "small-stroke".

Se il tuo SVG ha cerchi o ellissi, potresti voler fare in modo che si rimpiccioliscano quando si zooma sulla mappa su JetPunk. È molto comune, per esempio, nei quiz sulle città, dove in questo modo l'utente può vedere la posizione della città nella mappa in maniera più precisa zoomando. Per creare questo effetto non devi far altro che aggiungere la classe "zoomable-circle" al cerchio (o ellisse) che vuoi si rimpicciolisca. Se non sai come aggiungere classi ai path, guarda la sottosezione "Nascondere un path fino a quando viene indovinato".

Nota che la classe "zoomable-circle" rimpicciolisce anche i contorni dei path, quindi non serve aggiungere anche la classe "border".

Per ridimensionare un path mantenendo le sue proporzioni, basta trascinare una delle frecce (che appaiono ai quattro angoli quando selezioni il path) tenendo premuto Ctrl. Le frecce appaiono così:

In questo modo lo spessore dei contorni potrebbe non ridimensionarsi correttamente. In tal caso, puoi modificare la larghezza del contorno dalla schermata "Stile contorno" dentro a "Riempimento e contorni".

Se desideri avere delle misure precise, allora puoi modificare larghezza ed altezza del path direttamente nella barra editor oggetti, subito sotto la barra menù. Cliccando l'icona con il lucchetto fisserai le proporzioni, cioè scrivendo una qualsiasi altezza e premendo Invio, la larghezza si aggiornerà automaticamente per mantenere le proporzioni (e viceversa impostando una larghezza). Devi solo essere sicuro che il lucchetto sia selezionato.

Questi erano i colori più usati nelle mappe standard di JetPunk. Qui sotto trovi i colori che vengono assegnati dalle classi durante un quiz.

Con l'arrivo su JetPunk della Modalità Scura nel Settembre del 2021, per molti SVG lo sfondo bianco predefinito stona con il resto della pagina. Se il tuo quiz utilizza un JetPunk Standard SVG, non serve che tu faccia niente: verrà automaticamente aggiornato per la Modalità Scura. Se invece usi un SVG personalizzato sta a te modificarlo, se lo desideri.

Se il tuo quiz contiene un SVG simile a quelli Standard forniti da JetPunk, cioè sfrutta le classi "country", "light-water", eccetera, allora non devi far altro che aggiungere la classe "jetpunk-svg" al file. Per farlo basta aprire l'SVG con un editor di testo (per esempio il Blocco Note) ed aggiungere:

alla fine del tag "<svg", all'inizio del file. Per esempio la primissima riga dell'SVG della mappa del mondo su JetPunk appare così:

Ed ecco una lista dei colori aggiunti dalla Modalità Scura: