Progetto Adalgisa: una mappa di percorsi ciclo-pedonali per promuovere una mobilità sostenibile

L’Adalgisa senza fretta
va a Cusano in bicicletta.

Come nasce il progetto Adalgisa

L’idea di creare una mappa interattiva usando uMap mi è venuta nel giugno scorso ed è nata dal fatto che da settembre la nostra scuola, l’IIS Carlo Emilio Gadda di Paderno Dugnano avrebbe avuto una sede staccata a Cusano Milanino. Tra le due sedi meno di tre chilometri di distanza: mi sembrava una buona occasione per fornire ai nuovi studenti e a quelli che dovevano spostarsi una mappa che mettesse in rilievo i percorsi ciclo-pedonali tra le due scuole, ho pensato poi di aggiungere anche le biblioteche e le stazioni delle ferrovie Nord Milano che costituiscono l’asse del trasporto pubblico tra le due località.

Mappa del progetto Adalgisa : percorsi ciclo-pedonali tra Paderno Dugnano e Cusano Milanino
Clicca sull’immagine per aprire la mappa

Ma che nome è?

Insieme all’idea è nato anche il nome del progetto, all’apparenza misterioso: “Progetto Adalgisa”. In realtà è la ripresa del titolo di uno dei racconti più conosciuti di Carlo Emilio Gadda, “L’Adalgisa” appunto, pubblicato nel 1944 all’interno della raccolta L’Adalgisa. Disegni milanesi.

Chi volesse avventurarsi nel testo di Gadda e far la conoscenza anche del suo bellissimo dialetto milanese lo può trovare online a questo link:

http://www.gadda.ed.ac.uk/Pages/resources/fiction/laparco2.php

Un piccolo saggio della lingua di Gadda

Insieme al titolo sono spuntati inaspettati anche i due ottonari che aprono questo post 🙂

La mappa dei percorsi ciclo-pedonali

La mappa, che si può trovare a questo indirizzo:

http://u.osmfr.org/m/635446/

era stata pensata per le attività di accoglienza rivolte alle classi prime, ma si può usare a scuola ed anche in altri contesti come strumento di informazione per promuovere l’uso della bicicletta e più in generale una mobilità più sostenibile.

Selezione_594 È una mappa interattiva, perciò cliccando sulle diverse icone ed etichette presenti compaiono delle informazioni che sono state inserite (testi, link, immagini, video).


Selezione_597  Ma è anche una mappa “sfogliabile” costruita su livelli sovrapposti: cliccando sul pulsante dei livelli (nel menu a sinistra) si può scegliere quali informazioni visualizzare, selezionando ad   esempio il livello delle scuole, quello delle biblioteche, dei percorsi ciclo-pedonali o tutti e tre insieme.Selezione_598

La mappa è un piccolo esempio delle funzioni e delle potenzialità di uMap, nel corso del suo sviluppo si è un po’ allargata e adesso comprende alcuni percorsi ciclo-pedonali anche dei comuni vicini (Bresso, Cinisello, Cormano, Senago) e naturalmente può essere integrata e completata con altre informazioni.

uMap il software libero per creare mappe interattive personalizzate

La mappa di Progetto Adalgisa è costruita con il software libero uMap che permette di creare mappe interattive personalizzate, si tratta di un’applicazione web che si basa sulle mappe di OpenStreetMap, l’alternativa libera e collaborativa a GoogleMaps, offre la possibilità di inserire nella mappa informazioni anche in formato multimediale (audio, video, immagini), può essere utilizzata per diverse attività didattiche o di formazione come mappatura di un territorio, percorsi per uscite didattiche, cacce al tesoro ecc.
Anche Framasoft mette a disposizione in rete un’istanza di uMap: Framacarte.

L'home page di http://umap.openstreetmap.fr/it/

Durante l’estate ho tradotto alcuni tutorial che contengono tutte le istruzioni necessarie per costruire delle mappe interattive con uMap, a questo indirizzo trovate un articolo introduttivo con l’elenco dei tutorial e alcuni esempi di mappe: https://nilocram.wordpress.com/2021/07/12/umap-un-software-libero-per-creare-mappe-personalizzate/.

I tutorial sono disponibili sia in formato .pdf: dgxy.link/uMap-pdf

che come “bouquet” di link in formato .html: dgxy.link/uMap.

Ora i tutorial si trovano anche su Wikibooks grazie all’infaticabile Paolo Mauri che ha trascritto i primi otto e ne ha tradotto un nono:

https://it.m.wikibooks.org/wiki/Umap_guida_all%27uso

Spread the word

La mappa è un primo contributo per sviluppare sul territorio delle iniziative che promuovano la mobilità sostenibile e verrà inviata alle scuole, alle biblioteche e alle amministrazioni locali del territorio.

Sono molto gradite osservazioni e critiche e anche indicazioni su altri percorsi/informazioni che possano completarla. I dati contenuti nella mappa sono a disposizione di chi volesse riprenderla o rielaborarla.

Se potete, diffondete questo post e segnalatelo a chi potrebbe essere interessato a costruire delle mappe personalizzate e a promuovere il software libero e una mobilità sostenibile.

Pedalando con l’Adalgisa 🙂

Un grazie anche al mio caro collega Maurizio del team digitale del Gadda che, ai miei ottonari, ha aggiunto i suoi settenari:

L’Adalgisa che ostenta
la sua bici a Cusano
non è certo da meno
a Paderno Dugnano.
Se poi lesta pedala
anche sino a Cormano
scopre assai più vicino
ciò che crede lontano.

Pedalate piano 🙂

Pubblicare una mappa e controllarne l’accesso

Ultima traduzione dei tutorial su uMap pubblicati sul wiki di Carto Cité, in questo mese e mezzo delle vacanze estive sono stati tradotti e pubblicati 9 articoli. Non male 🙂
Spero possano essere utili a una più larga diffusione di uMap che continuo a pensare sia un ottimo strumento da utilizzare anche a scuola.
Anche se il programma nelle sue funzioni essenziali si capisce, la traduzione italiana dell’interfaccia di uMap è ancora da precisare e completare in diversi punti, spero ci sarà modo e tempo per farlo.

Ancora una volta un ringraziamento ad Antoine Riche, l’autore di questi tutorial.

Buon divertimento con uMap 🙂


Cosa impareremo

  • Inserire una mappa in una pagina HTML
  • Pubblicare una mappa su WordPress
  • Adattare le funzioni della mappa
  • Definire chi può vedere o modificare la mappa

Andiamo per gradi

1. Inserisci una mappa in una pagina HTML

icona_condividi Nel tutorial Come consultare una mappa uMap abbiamo visto che il menu di condivisione consente di incorporare una mappa in iframe, senza fornire ulteriori dettagli. Vediamo come si fa.

Un iframe è un tag del linguaggio di marcatura HTML che consente di incorporare (embed) il contenuto di una pagina Web in un’altra pagina Web. In realtà è molto semplice e abbiamo già utilizzato questo meccanismo per incorporare un video nel tutorial Creare finestre pop-up multimediali.

export-iframeEcco i passaggi da seguire:

  1. apri il pannello Includi e condividi questa mappa

  2. copia tutto il testo sotto Includi la mappa (suggerimento: posiziona il cursore sul testo quindi usa le scorciatoie Ctrl + a per selezionare tutto quindi Ctrl + c per copiare la selezione)

  3. incolla il testo copiato nel codice sorgente del file HTML in cui vuoi incorporare la mappa (scorciatoia da tastiera: Ctrl + v)

Ecco un esempio minimalista di un file HTML in cui è stato incorporato l’iframe di una mappa uMap:

<! DOCTYPE html> 
<html> 
    <head> 
        <title> Esempio di mappa uMap incorporata in una pagina web </title> 
        <meta charset = "UTF-8"> 
    </head> 
    <body> 
        <div> 
            <h1> La mappa del festival </h1> 
            <iframe width = "100%" height = "300px" frameBorder = "0" src = "https://umap.openstreetmap.fr/fr/map/festival-des-3-continents_26381 ? ScaleControl = false & minimappa = false & scrollWheelZoom = false & ZoomControl = true & AllowEdit = false & moreControl = true & searchControl = null & tilelayersControl = null & embedControl = null & datalayersControl = true & onLoadPanel = caption & captionBar = false "> < / iframe> 
            <p> <a href =" http://umap.openstreetmap.fr/ fr / map / festival-des-3-continents_26381 "> Visualizza a schermo intero </a> </p> 
            <p> Questa mappa è offerta da Carto'Cité :-) </p> 
        </div> 
    </ body> 
</html>

Ecco la mappa incorporata in questa pagina, utilizzando le opzioni di esportazione di default:



Ovviamente questo presuppone la conoscenza di un po’ di HTML e di avere un server su cui pubblicare un file del genere. Ma il principio è stabilito e non è così complicato. Ora diamo un’occhiata a un caso più comune.

2. Pubblica una mappa su WordPress

La pubblicazione di una mappa su un sito WordPress funziona come sopra, copiando il codice HTML dall’iframe nell’editor di WordPress. Però è necessario utilizzare l’editor di testo (scheda Testo) e non l’editor visuale.

Pubblica la pagina e il gioco è fatto!

Nota bene: i siti su https://wordpress.com per ragioni di sicurezza non permettono di incorporare iframe. 
È perciò impossibile pubblicare una mappa uMap su questi siti.

3. Adattare le funzionalità della mappa

La mappa incorporata sopra non è molto pratica: la sua altezza è insufficiente e il pannello laterale è solo parzialmente visibile. I pulsanti disponibili a sinistra non sono necessariamente adatti, ad esempio non vogliamo inserire il selettore di livelli.

La scheda Opzioni di esportazione iframe ti consente di controllare tutto questo. Alcune di queste opzioni corrispondono alle opzioni dell’interfaccia viste nel tutorial Come modificare e personalizzare una mappa di uMap. Tutto quello che devi fare è attivare queste opzioni per il codice di importazione dell’iframe da modificare. Una volta scelte le opzioni, copia questo codice e poi incorporalo nella tua pagina web.

opzioni_esp_iframe Le prime opzioni sono specifiche per l’esportazione in iframe e meritano di essere commentate:

  • la larghezza del 100% permette di utilizzare tutta la larghezza disponibile della pagina. Puoi impostare una larghezza fissa sostituendo il testo con una larghezza in pixel, ad esempio 800 px

  • il collegamento “schermo intero” indica il collegamento Visualizza a schermo intero sotto la mappa. Ciò consente all’utente di visualizzare la mappa uMap come l’abbiamo vista finora.

  • L’opzione Vista attuale anziché vista predefinita consente di applicare all’esportazione la posizione corrente e il livello di zoom della mappa. Questa opzione è ad esempio interessante per produrre più zoom della stessa mappa.

  • L’opzione Mantieni i livelli attualmente visibili consente di scegliere i livelli inclusi nella mappa esportata. Questa opzione è utile per produrre più schede per più profili utente.

  • Abilitare lo zoom con la rotella non è molto adatto se la mappa è incorporata in una pagina lunga, che gli utenti faranno scorrere con la rotella: una volta raggiunta la mappa, la pagina non scorrerà più e la mappa si rimpicciolirà. Niente di grave, ma questo comportamento può sorprendere.

Ad esempio, ecco la stessa mappa di cui sopra, con una vista e una scelta di livelli diverse e la maggior parte delle opzioni disabilitate. È possibile spostare la mappa ma non ingrandire o modificare i livelli.

4. Definisci chi può vedere o modificare la mappa

umap_edit_rights Il pulsante Cambia permessi ed editor dà accesso al pannello aggiorna autorizzazioni. Questo permette di controllare, per ogni mappa, chi può vederla e chi può modificarla.

cambia_permessi Quando crei una mappa, questa è visibile nel tuo catalogo mappe il cui indirizzo è http://umap.openstreetmap.fr/fr/user/<tuo-account>/: è selezionata l’opzione Chiunque (pubblico) dal menu a discesa Chi può vedere. Le altre opzioni di questo menu sono:

  • chiunque abbia il link: la mappa non compare più nel tuo catalogo, ma le persone che ne conoscono il link possono visualizzarla.

  • solo autori: solo le persone che hanno il diritto di modificare la mappa, e identificate come tali, possono consultare la mappa. A chiunque altro sarà negato l’accesso. Non utilizzare questa opzione se stai incorporando la mappa in un iframe.

Quando crei una mappa, solo tu puoi modificarla. Puoi invitare altri utenti a modificarlo selezionando l’opzione Solo gli editor possono fare modifiche nel menu Chi può modificare, quindi inserendo il nome dell’account degli utenti invitati uno per uno nel campo Editor della mappa.
Il nome di ciascun utente viene aggiunto dopo questo campo.

L’opzione Chiunque può modificare è utile per creare una mappa in maniera collaborativa.

Nota bene: uMap non permette a più editor di modificare la mappa contemporaneamente. Il programma ti avvisa quando l’operazione Salva rischia di cancellare le modifiche di un altro utente, devi scegliere tra le sue modifiche, confermando  Salva o le tue, annullando le sue. Se più editor lavorano a una stessa mappa devono accordarsi prima di modificare la mappa.

Infine puoi trasferire la proprietà di una mappa ad un altro utente: cancella l’attuale proprietario (tu) cliccando sulla crocetta a destra del campo Proprietario della mappa, quindi inserisci il nome dell’account dell’utente a cui stai cedendo la mappa.

Facciamo il punto

In questa fase sappiamo creare una mappa strutturata con contenuti multimediali, sappiamo pubblicarla e incorporarla in una pagina web, sappiamo anche modificarla in modo collaborativo. Presto potremo passare al livello avanzato, dove impareremo come importare dati in una mappa ed esploreremo le capacità di apertura di uMap.

Ma prima di questo, finiremo il livello intermedio occupandoci del caso dei poligoni

Usare i poligoni in uMap

Ecco la terza traduzione dei tutorial del “livello intermedio” pubblicati sul wiki di Carto Cité, questa volta presentiamo l’utilizzo dei poligoni, una delle “geometrie” usate da uMap e come importare dei dati da OpenStreetMap. Ho lasciato per ultimo il tutorial sulla pubblicazione delle mappe e il controllo degli accessi.

Un grazie ad Antoine Riche, l’autore di questi tutorial.

Buon divertimento con uMap 🙂


Perché trattare i poligoni separatamente se sono solo una linea chiusa? Un poligono in realtà è molto più di una linea chiusa. Questa linea separa l’interno del poligono dal suo esterno, questo è importante perché uMap può reagire a un clic all’interno del poligono. Inoltre, un poligono può essere forato, perciò è definito da più linee.

Cosa impareremo

  • Creare un poligono e modificarlo
  • Disegnare un poligono: riempimento e contorno
  • Associare un URL a un poligono
  • Estrarre i confini amministrativi da OpenStreetMap
  • Importare i dati in una mappa

Andiamo per gradi

1. Crea un poligono

Torniamo alla mappa delle nostre vacanze a Crozon. In una giornata di sole affittiamo un gommone e navighiamo nella zona definita dal circolo nautico. Aggiungiamo quest’area alla mappa.

icona_poligoni Il pulsante Disegna un poligono permette di disegnare punto per punto il perimetro di un poligono, e di terminarlo cliccando nuovamente sull’ultimo punto come per disegnare una linea. C’è però una differenza: dal terzo punto l’interno del poligono è colorato.

Proprietà di un poligono

proprieta_forma_it

  • Le opzioni relative a tratto e riempimento consentono di non visualizzare il perimetro o l’interno del poligono: se nessuno dei due viene visualizzato il poligono è invisibile.

  • il colore del riempimento è di default quello della linea, ma può essere modificato.

  • una bassa opacità del riempimento permette di vedere lo sfondo della mappa sotto il poligono. [N.d.t. quello che nell’interfaccia italiana viene chiamato “peso” (?!) è lo spessore del tratto]

Creare un foro in un poligono

A volte è utile creare uno o più fori in un poligono, ad esempio per disegnare una radura in una foresta o un’isola in mezzo a uno stagno.

afggiungi_foroÈ possibile creare un poligono con uno o più fori cliccando sull’opzione Aggiungi percorso interno quando si seleziona un poligono in modalità di modifica.

Il primo punto del perimetro interno viene creato direttamente nel punto in cui si è cliccato prima di scegliere Aggiungi percorso interno .

Osserva che le proprietà del perimetro di un poligono si applicano a tutti i perimetri – esterni e interni.

2. Definire le interazioni con un poligono

permetti_interazioneLa scheda Opzioni di interazione fornisce due opzioni specifiche per i poligoni.

Qualsiasi interazione può essere disabilitata selezionando OFF per l’opzione Permetti interazioni. Nessuna finestra pop-up viene quindi visualizzata quando si clicca sul poligono. Questa opzione è interessante per mettere in rilievo un’area della mappa senza che l’utente possa interagire con essa.

 

visualizza_dati Ecco un esempio che mostra l’Ile de Nantes circondata da una grande linea rossa e senza riempimento. Non è possibile cliccare sul contorno o all’interno del poligono.

L’interazione con il poligono rimane disabilitata in modalità  Modifica. Per poter modificare il poligono è poi necessario passare attraverso il pannello Visualizza dati (sempre accessibile tramite il pannello Legenda, esso stesso accessibile dal link Informazioni in basso a destra della mappa).

opzioni_interazione_it Al contrario, è possibile associare un poligono ad un URL: cliccando sul poligono si apre direttamente la pagina Web corrispondente, senza passare per una finestra pop-up. Tutto quello che devi fare è definire il Link to… quindi inserire l’URL.
Ci sono tre opzioni per definire
dove verrà aperta la pagina web:

  • nuova finestra: la pagina si apre in una nuova scheda del browser

  • stessa finestra: la pagina si apre nella stessa scheda di quella della mappa

  • iframe: se la mappa è integrata in un iframe, la pagina web viene quindi aperta all’interno dell’iframe

L’associazione di un URL ad un poligono consente di creare un menu cartografico, ovvero una mappa che consente l’accesso a più pagine Web a seconda della zona su cui l’utente fa clic. Ecco un esempio che mostra i diversi quartieri di Nantes: cliccando su un distretto si apre la pagina corrispondente del sito http://www.nantes.fr

[N.d.t. Come si può vedere questa immagine non è interattiva, perché il sito wordpress.com non accetta questo tipo di embedding; la pagina a cui rimanda è comunque questa:
https://umap.openstreetmap.fr/fr/map/quartiers-de-nantes_126581]

Ecco i passaggi per realizzare questa mappa.

a. Recupera i contorni dei quartieri

Il contorno dei quartieri di Nantes proviene dai confini amministrativi di OpenStreetMap (per maggiori informazioni, vedere questa pagina Wiki). Il sito OSM Boundaries ti consente di selezionare i confini amministrativi uno per uno, quindi esportarli in diversi formati.

OSM Boundaries

Segui questi passaggi:

  1. accedi al tuo account OpenStreetMap (necessario per poter esportare i confini amministrativi)
  2. seleziona uno ad uno i confini amministrativi, aprendo successivamente i diversi livelli: nazione – regione – dipartimento ecc.
  3. seleziona il formato di esportazione JSON: viene quindi utilizzato il formato GeoJSON
  4. clicca su Esporta

importa_datiPoi recupererai nella cartella dei download un file con estensione .geojson.

b. Importa i contorni del quartiere in una mappa

icona_importa In una nuova mappa, clicca su Importa dati. Nel pannello che poi compare, seleziona il file prodotto nel passaggio precedente.

Il selettore di formato si posiziona automaticamente su geojson , selezionalo in caso contrario, ad esempio perché l’estensione del file non è .geojson. Clicca su Importa: le curve di livello vengono visualizzate sulla mappa.

c. Configura la mappa uMap

Configura il livello per visualizzare o meno un’etichetta al passaggio del mouse, quindi modifica ogni poligono per associare l’URL alla pagina web corrispondente, come abbiamo visto sopra.

limiti_geografici E infine è possibile, nelle Impostazioni della mappa, definire i limiti di confine (geografici) della mappa. Questo per evitare che l’utente sposti la mappa oltre questi limiti.

d. Incorpora la mappa in un iframe

Recupera il codice dell’iframe, come abbiamo visto nel tutorial precedente , avendo cura di disattivare tutte le opzioni di interazione: pulsanti di zoom, zoom con la rotella, pulsante “Altro” ecc.

Copia questo codice iframe nella tua pagina web e il gioco è fatto!

Quando si modifica la mappa, è necessario ricaricare completamente la pagina contenente l’iframe per svuotare la cache del browser, ad esempio su Firefox. utilizzando Ctrl + F5

Facciamo il punto

Questo tutorial segna la fine del livello intermedio. Sai come strutturare il contenuto di una mappa con i livelli e come utilizzare gli stili predefiniti. Sai come formattare i le finestre pop-up e integrarvi contenuti multimediali. Sai come incorporare la tua mappa in una pagina web e controllare chi può vederla e modificarla.

Testo originale: https://wiki.cartocite.fr/doku.php?id=umap:8_-_le_cas_des_polygones

Traduzione italiana: nilocram
Testo distribuito con licenza CreativeCommons Attribution-Share Alike 4.0

Organizzare una mappa uMap con i livelli

Continuiamo l’avventura tra i tutorial del “livello intermedio” della raccolta pubblicata sul wiki di Carto Cité, ecco la seconda traduzione, questa volta facciamo la conoscenza dei livelli (i layer) che ci permettono di organizzare la mappa in modo da potere selezionare i dati che vogliamo visualizzare.

Un grazie ad Antoine Riche, l’autore di questi tutorial.

Buon divertimento con uMap 🙂


Cosa impareremo

  • Creare dei livelli e organizzare i contenuti della mappa
  • Definire le proprietà di un livello
  • Gestire i livelli di una mappa

Andiamo per gradi

1. Creare un livello

Prendiamo la mappa del Festival dei 3 continenti vista nel tutorial Come consultare una mappa uMap. I dati in questa mappa sono organizzati in diversi livelli:

  • cinema: marcatori gialli
  • gli altri luoghi del festival: marcatori marroni
  • linee di trasporto pubblico
  • stazioni di bike sharing Bicloo
Elenco livelli della mappa

Il selettore di livelli consente all’utente di zoomare sull’insieme degli elementi di un livello, di nasconderlo o visualizzarlo a piacimento. Ogni livello può essere descritto nel pannello laterale della mappa. Organizzare gli elementi di una mappa è quindi pratico per consultare la mappa, vedremo anche che questo rende più facile la sua creazione.

icona livelli Il menu Manage layers (Gestisci livelli), disponibile in modalità Modifica, visualizza l’elenco dei livelli esistenti e consente di creare un nuovo livello. Clicca poi su Aggiungi un layer comparirà allora il pannello Proprietà layer del nuovo livello

proprieta_livelli Inserisci il nome del livello e una descrizione della categoria di elementi a cui vuoi che questo livello appartenga: verranno visualizzati nel pannello Informazioni. Di seguito il risultato corrispondente alle proprietà inserite a destra.
info_livelli

Salta una riga all’inizio della descrizione in modo che appaia sotto il nome del livello e non accanto ad esso nel pannello Informazioni.

2. Organizza il contenuto della mappa

 Quando aggiungi un elemento alla mappa, nella parte superiore del pannello delle proprietà dell’elemento è presente un menu a discesa che ti consente di scegliere il livello in cui posizionare l’elemento.

Ovviamente è possibile modificare il livello di un elemento già creato. Quindi non esitare, quando la tua mappa si arricchisce, a organizzare il suo contenuto su più livelli.

Come definire i livelli di una mappa?

Non esiste un metodo prestabilito per definire i livelli: dipende molto dai dati posizionati sulla mappa e dall’esperienza del cartografo. Ecco per alcune tematiche, e come esempio, una proposta di elenco di livelli:

  • turismo: alloggi, ristorazione, trasporti, musei, punti panoramici…
  • logistica di un festival: accessi, palchi, ristorazione, servizi igienici, rifiuti, postazioni di pronto soccorso, rete elettrica, ecc.
  • evento internazionale: uno o più livelli per lingua
  • strutture di una rete: strutture portanti, membri della rete, partner
  • progetto di sviluppo: i diversi scenari o varianti del progetto

Vedremo più avanti che quando una mappa è incorporata in una pagina Web, è possibile creare più presentazioni della stessa mappa e selezionare per ognuna quali livelli sono visibili. Potrai quindi, dalla stessa mappa uMap, distribuire più mappe il cui contenuto è adattato al pubblico di destinazione.

Quindi per una mappa multilingue è possibile distribuire la mappa in diverse lingue selezionando il/i livello/i di ciascuna lingua. Per l’esempio di una mappa della logistica di un festival, potrai distribuire una mappa per il pubblico (accesso, palchi, ristorazione, servizi igienici), un’altra per le squadre tecniche (WC, rifiuti, rete elettrica), una terza per la protezione civile (accessi, posti di pronto soccorso, rete elettrica), ecc.

3. Definire le proprietà di un livello

Uno dei principali vantaggi dell’utilizzo dei livelli è la possibilità di definire, per ogni livello, lo stile predefinito degli elementi che verranno aggiunti al livello. Eviterai così il noioso compito di definire lo stile di ogni singolo elemento e la mappa sarà molto più leggibile perché omogenea. È importante sottolineare che se decidi che i cinema devono essere visualizzati non più in giallo ma in rosso, effettuerai la modifica solo una volta per l’intero livello e non per ciascuno degli elementi.

info_livelli Nel pannello di gestione dei livelli, fai clic sulla matita per modificare le proprietà del livello. Le schede Shape properties (Proprietà forma) e Proprietà avanzate consentono di impostare gli stili predefiniti per il livello. Troverai le stesse proprietà usate nel tutorial Registrare un account e creare una bella mappa.

 

legenda marcatori Qui sono disponibili tutte le proprietà che si applicano a marcatori, linee e poligoni. Un livello può infatti contenere tutti e tre gli elementi, quindi puoi definire le proprietà predefinite per ogni categoria.

Una nota, però: puoi definire uno e un solo colore, che si applica a tutti gli elementi indipendentemente dalla loro tipologia. Questo vincolo mira a creare una mappa leggibile, associando un colore ad ogni livello. Questo colore appare nella legenda del pannello Informazioni, come nell’esempio a lato.

4. Gestire i livelli

 Torniamo al pannello di gestione dei livelli (Manage layers). Abbiamo visto come creare un nuovo livello e definirne le proprietà.

Il quadrato a destra consente di modificare l’ordine dei livelli trascinandoli e rilasciandoli. L’ordine così definito è quello che si trova nel selettore dei livelli e nell’elenco dei livelli nel pannello Informazioni.

L’icona dell‘occhio permette di nascondere/visualizzare un livello (Mostra/nascondi layer) e la lente di ingrandimento serve a zoomare il suo contenuto, come per il selettore di livelli. Vedremo in seguito l’utilità di Modificare il contenuto del livello in una tabella. Elimina livello ti chiederà di confermare l’operazione, operazione che cancella il contenuto del livello.

 

azioni_avanzate_it Infine, la scheda Azioni avanzate consente di svuotare un livello: questo elimina i suoi dati ma mantiene il livello. Puoi anche clonare un livello: questa operazione copia il contenuto e le proprietà del livello.

Per creare rapidamente un nuovo livello le cui proprietà sono vicine a un livello esistente, puoi clonare il livello iniziale e quindi rinominare il clone e svuotarne il contenuto.

[N.d.t. L’interfaccia attuale di Azioni avanzate comprende anche la funzione Scarica che permette di fare il download dei dati della mappa. Per “Vuoto” si intende “Svuota”.]

Per creare rapidamente un nuovo livello le cui proprietà sono simili a quelle di un livello esistente è possibile clonare il livello iniziale, rinominare il clone e poi svuotarlo dal contenuto.

Facciamo il punto

Anche se è un po’ astratto, il concetto di livello (layer) è uno dei punti di forza di uMap. Quando crei una mappa, prenditi il ​​tempo necessario per definire i livelli principali anticipando gli usi e gli aggiornamenti della mappa. Familiarizzati con l’uso dei livelli, li useremo molto nell’utilizzo avanzato.

Ora abbiamo tutti gli elementi per creare mappe strutturate e utili con contenuti ricchi e accattivanti. È ora di imparare a pubblicare una mappa su un sito Web, questo è l’argomento del prossimo tutorial.

Testo originale: https://wiki.cartocite.fr/doku.php?id=umap:6_-_je_structure_ma_carte_avec_des_calques

Traduzione italiana: nilocram
Testo distribuito con licenza CreativeCommons Attribution-Share Alike 4.0

Creare finestre pop-up multimediali in uMap

Completata la traduzione dei tutorial del “livello principiante” ci avventuriamo tra quelli del “livello intermedio” della raccolta di tutorial sull’uso di uMap pubblicata sul wiki di Carto Cité.

Questo è forse il tutorial più “tecnico” tra quelli pubblicati perché contiene le indicazioni sul linguaggio di marcatura necessario per rendere multimediali i marcatori delle nostre mappe.

Un grande ringraziamento ad Antoine Riche che ho scoperto da poco essere l’autore di questi tutorial.

Buon divertimento con uMap 🙂


Cosa impareremo

  • Formattare il testo della finestra pop-up
  • Aggiungere un link verso una pagina web
  • Inserire una foto e definire le sue dimensioni
  • Incorporare un video

Andiamo per gradi

formattazione testoAbbiamo visto nel tutorial consulto una mappa uMap come associare un nome e una descrizione ad un elemento della mappa. Questo nome e la descrizione vengono visualizzati in una finestra pop-up che compare quando si clicca sull’elemento.

Il contenuto di questa finestra pop-up può essere arricchito in diversi modi:

  • formattando il testo: titoli, grassetto e corsivo

  • inserendo uno o più link ad una pagina web

  • inserendo un’immagine o un video

[N.d.t.  La traduzione presenta qualche approssimazione: per “italico” naturalmente si intende corsivo e per “testo marcato” si intende grassetto]

La formattazione di una finestra pop-up richiede l’utilizzo della sintassi mostrata qui sopra che compare cliccando sul punto interrogativo visibile a destra dell’intestazione descrizione.

1. Formattare il testo di una finestra pop-up

esempio formattazioneUn esempio è meglio di una lunga spiegazione: la descrizione sotto produce la finestra pop-up sulla destra.

sintassi formattazione

Osserva i seguenti punti:

  • una riga che inizia con # definisce una riga del titolo, è necessario inserire uno spazio tra il carattere # e il testo del titolo
  • un’area vuota viene aggiunta automaticamente sotto ogni titolo
  • è possibile combinare grassetto e corsivo utilizzando ***
  • trascinando il triangolo in basso a destra si ingrandisce il campo di inserimento

Torniamo alla mappa delle nostre vacanze a Crozon. Il 3° giorno di vacanza un forte vento di ponente ci ha portato ad Anse de Morgat, ben riparata dal vento. Decidiamo di documentare questa visita sulla mappa. Aggiungiamo un indicatore sulla mappa, quindi scopriamo con interesse l’articolo di Wikipedia su Morgat: https://fr.wikipedia.org/wiki/Morgat.

Morgat1Per aggiungere un link all’articolo alla nostra finestra pop-up, è sufficiente copiare l’indirizzo della pagina web, visualizzato nella barra degli indirizzi del browser e inserirlo tra doppie parentesi quadre. La finestra pop-up sulla destra corrisponde alla descrizione di seguito:

Morgat è un antico villaggio di pescatori.

Articolo di Wikipedia:
[[https://fr.wikipedia.org/wiki/Morgat]]

Morgat2Possiamo anche nascondere l’indirizzo del collegamento e sostituirlo con un testo. Per fare ciò, segui semplicemente l’indirizzo con una barra verticale (AltGr + 6 su una tastiera francese) e il testo:

Morgat è un antico villaggio di pescatori.

[[https://fr.wikipedia.org/wiki/Morgat| Articolo di Wikipedia]]

Questa forma è particolarmente utile per indirizzi lunghi.

3. Inserire un’immagine

uMap non consente l’archiviazione delle immagini, ma può visualizzare le foto pubblicate su un server web.

Morgat immagineL’articolo di Wikipedia mostra una bellissima foto di Anse de Morgat. Le foto visibili su Wikipedia sono sotto licenza libera Creative Commons, quindi possiamo utilizzare questa foto. Per questo dobbiamo:

  1. copiare l’ indirizzo dell’immagine (questa operazione è accessibile nel menu visualizzato cliccando sulla foto con il tasto destro del mouse)

  2. mettere questo indirizzo tra doppie parentesi graffe:

Morgat è un antico villaggio di pescatori.

{{https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Morgat_8006.jpg/330px-Morgat_8006.jpg}}

[[https://fr.wikipedia.org/wiki/Morgat|Articolo Wikipedia]]

Visualizzare le tue foto

Se hai un server puoi usarlo per archiviare le tue foto oppure puoi salvarle su un servizio cloud.

Modificare le dimensioni di un’immagine

stile_popupLa dimensione della foto è limitata dalla dimensione della finestra di pop-up. Per ingrandire un’immagine è necessario utilizzare una finestra di pop-up più grande. Per fare questo, apri la scheda  Default interaction options, clicca su Definisci di fianco a Forma del Popup, quindi scegli Popup (grande).

All’inverso puoi ridurre le dimensioni di un’immagine , facendo seguire il link alla foto da una barra verticale e un numero che definisce la larghezza in pixel dell’immagine, ad esempio:

{{https://framapic.org/xxx/yyy.jpg|400}}

Collegare  un’immagine al link di una pagina web

È possibile incorporare un’immagine che apre una pagina Web quando l’utente ci clicca sopra. In realtà si tratta di creare un collegamento a una pagina web (sintassi [[link | text]] ), utilizzando come testo il collegamento a un’immagine (sintassi {{image}} ). Ecco un esempio con il sito e il logo di Framasoft:

[[https://framasoft.org/| {{https://framasoft.org/nav/img/logo.png}}]]

4. Inserire un video

L’inserimento di un video è più complesso. Infatti il ​​browser web ha bisogno di un player per visualizzare un video. I siti di condivisione video come Youtube, DailyMotion o Framatube di Framasoft offrono un collegamento per ogni video che consente di incorporarlo in un’altra pagina Web utilizzando un iframe .

Troviamo su YouTube un video delle Grotte Marine di Morgat, visitabili in barca. Per incorporare questo video in una finestra pop-up, segui questi passaggi:

  • sotto il video clicca su Condividi e poi su Incorpora
  • copia l’indirizzo dopo src = (senza le virgolette), nota che ha il termine embed che significa incorporare
  • incolla questo indirizzo tra triple parentesi graffe nella descrizione comando: ‘{{{https://www.youtube.com/embed/sKvjd8bGsZM}}} ‘
  • per un miglior risultato usa uno stile popup grande, annota l’altezza e la larghezza e imposta la dimensione dell’iframe sugli stessi valori:

{{{https://www.youtube.com/embed/sKvjd8bGsZM|315*560}}}

Ecco il risultato, il video può essere visualizzato direttamente nella nostra finestra pop-up :

Facciamo il punto

Ora abbiamo tutti gli elementi per produrre una bella mappa, con elementi stilizzati e finestre pop-up che li descrivono con contenuti formattati e multimediali: link, foto e video.

La sintassi per la formattazione di una finestra pop-up è un po’ complessa, ma la buona notizia è che questa stessa sintassi può essere utilizzata su uMap in altri due posti:

  • la descrizione della mappa, definita nel menu Modifica impostazioni della mappa
  • la descrizione dei livelli, che scopriremo nel prossimo tutorial.

Testo originale: https://wiki.cartocite.fr/doku.php?id=umap:5_-_je_cree_des_infobulles_multimedia
Traduzione italiana: nilocram
Distribuito con licenza Creative Commons Attribution-Share Alike 4.0 Internazionale

Come modificare e personalizzare una mappa di uMap

Con questo tutorial ho completato le traduzioni del “livello principiante” della raccolta di tutorial sull’uso di uMap pubblicata sul wiki di Carto Cité.

L’estate è ancora lunga e quindi è possibile che ci sia tempo per tradurre qualcuno dei tutorial del “livello intermedio” 🙂

Come promesso, ecco il link per ritrovare i tutorial in formato pdf:

https://s.devol.it/tutorial-umap

Questa volta mi sono affidato a Canoprof, il servizio opensource disponibile per tutti gli insegnanti francesi, ma anche per quelli italiani che vogliono registrarsi.

Buon divertimento con uMap 🙂


Cosa impareremo

  • Gestire il catalogo delle mappe
  • Scegliere uno sfondo della mappa
  • Selezionare le opzioni dell’interfaccia

Andiamo per gradi

1. Ritrova una mappa

Se hai riavviato il browser o il computer e vuoi modificare una mappa per migliorarla o aggiornarla, la prima cosa da fare è trovare la mappa! Se hai creato questa mappa con il tuo account, come abbiamo visto nel tutorial Registro un account e creo una bellissima mappa, la visualizzazione di una delle tue mappe avviene con tre semplici operazioni:

  1. accedi al tuo account uMap
  2. visualizza il tuo catalogo delle mappe
  3. clicca sul nome della mappa, visualizzato sotto l’anteprima della mappa

matita La mappa viene quindi visualizzata in modalità Consultazione. Clicca sulla matita in alto a destra della mappa per passare alla modalità Modifica: potrai quindi modificare la mappa. Ricordati di salvare la mappa una volta completate le modifiche.

Può essere fastidioso passare ripetutamente dalla modalità Modifica alla modalità Consultazione. Un trucco consiste nell’utiizzare per la stessa mappa due schede del browser o due browser l’uno in modalità Modifica e l’altro in modalità Consultazione. Devi comunque salvare la mappa nella scheda in modalità Modifica, prima di aggiornarla (per esempio con il tasto F5) nella scheda in modalità Consultazione

Puoi tornare al catalogo delle tue mappe in qualsiasi momento cliccando su Home in basso a destra della mappa.

2. Cambia lo sfondo della mappa

Abbiamo visto nel tutorial Come consultare una mappa uMap che sono disponibili diversi sfondi della mappa. Quando si modifica una mappa è possibile scegliere lo sfondo che verrà utilizzato durante la visualizzazione della mappa.

fondo Clicca sul pittogramma Cambia I livelli di sfondo: un pannello sulla destra mostra una ventina di sfondi. Devi solo cliccare su uno di essi: fai la tua scelta e non dimenticare di salvare la modifica.
La scelta dello sfondo è una questione di gusti. Il contesto della mappa può aiutarti a scegliere quello che si adatta alle tue esigenze, ad esempio:

  • gli sfondi Outdoor, Landscape o OpenTopoMap mostrano il rilievo: sono consigliati per una mappa escursionistica
  • OpenCycleMap mostra le principali piste ciclabili, come l’EuroVelo (Atlantic Coast, Loire à Vélo …)
  • Positron , Toner e OSM-Monochrome sono in bianco e nero: i tuoi marcatori, linee e poligoni saranno più visibili
  • lo stile HOTOSM , creato dal gruppo umanitario di OpenStreetMap, ti permette di arrivare ad un elevato livello di zoom (livello 20): interessante se l’estensione della tua mappa copre un quartiere o il tuo giardino

Tutti gli sfondi utilizzati da uMap, ad eccezione delle immagini aeree di IGN, sono realizzati a partire da dati OpenStreetMap. Sono prodotti da associazioni, aziende o volontari che li mettono a disposizione gratuitamente. Osservate il testo visualizzato in basso a destra della mappa: accredita gli autori degli sfondi, ad esempio Map tile di Stamen Design – Map Data © OpenStreetMap contributors.

3. Scegli le opzioni dell’interfaccia

Puoi configurare gli elementi della mappa disponibili per gli utenti che visualizzeranno la tua mappa. Puoi ad esempio aggiungere una mini-mappa della situazione o una barra della legenda o anche decidere quali pulsanti verranno visualizzati.

impostazioni Per fare questo, apri la scheda Opzioni interfaccia utente nel menu Modifica impostazioni della mappa. Puoi attivare o disattivare una decina di opzioni, di seguito trovi il loro significato .

Compare quindi un lungo pannello che permette, per ciascuno dei pulsanti a sinistra della mappa, di controllarne la visibilità:

  • sempre indica che il pulsante è sempre visibile all’utente

  • mai significa che il pulsante non sarà disponibile

  • nascosto significa che il pulsante è accessibile solo dopo aver cliccato sul pulsante maggiori strumenti.
    I pulsanti nascosti saranno ovviamente accessibili solo se è stata attivata l’opzione Vuoi visualizzare il controllo “Altro”? (più in basso sul pannello).

     

La parte inferiore del pannello non riguarda questi pulsanti, ma altri elementi che completeranno la mappa:

[N.d.t: in questo caso l’interfaccia di uMap è stata leggermente modificata e anche la traduzione italiana non è delle più precise. Qui sotto l’immagine delle opzioni dell’interfaccia nella versione italiana: “mini carte” viene tradotta con “mappa panoramica” e “legende” con “didascalia” (?)]

Alcune osservazioni:

  • se si nascondono i pulsanti di zoom e si disattiva lo zoom con la rotellina del mouse, gli utenti non potranno aumentare o diminuire lo zoom se non scoprono che la funzione è accessibile cliccando sulla mappa col tasto destro del mouse.
  • i pulsanti di navigazione nella parte inferiore delle finestre di pop-up permettono di far scorrere gli elementi della mappa

condividi Osserva che queste opzioni – e altre – sono disponibili anche in Opzioni di esportazione iframe del menu Includi e condividi questa mappa, dove possono controllare le stesse opzioni dell’interfaccia quando la mappa viene incorporata in una pagina Web (embedding).

4. Copia o elimina una mappa

Nella parte inferiore delle proprietà della mappa, la scheda Opzioni avanzate offre due operazioni poco utilizzate che è bene conoscere:

  • Cancella elimina la mappa dal server uMap, insieme ai dati associati!
  • Clona fa una copia della carta e dei suoi dati. La nuova mappa viene aggiunta al tuo catalogo.

In entrambi i casi un messaggio chiede di confermare l’operazione.

Facciamo il punto

Questo tutorial ci porta alla fine del livello principiante. Sai come creare, modificare e personalizzare una mappa. Sai come modellare i tuoi marcatori, linee e poligoni e per finire, sai come gestire il tuo catalogo di mappe.

Una volta padroneggiate queste operazioni, i tutorial di livello intermedio ti insegneranno come strutturare le tue mappe con i livelli e arricchire il contenuto dei tuoi pop-up. Imparerai anche come pubblicare una mappa su un sito Web e definire chi può vederla e modificarla.

Torna all’elenco dei tutorial uMap

Testo originale: https://wiki.cartocite.fr/doku.php?id=umap:4_-_je_modifie_et_personnalise_ma_carte

Traduzione italiana: nilocram
Testo distribuito con licenza CreativeCommons Attribution-Share Alike 4.0

Registrare un account uMap e creare una bella mappa

Ecco un’altra traduzione dalla raccolta di tutorial sull’uso di uMap pubblicata sul wiki di Carto Cité.

Procedendo nel lavoro mi sono accorto che oltre alla traduzione c’era bisogno anche di qualche adattamento: l’interfaccia di uMap ha nel frattempo subito qualche modifica, la versione italiana dell’interfaccia presenta diversi comandi ancora in inglese, alcuni sono invece tradotti in modo impreciso. Alcune “Note del traduttore”(N.d.t) in rosso segnalano alcuni passaggi critici e alcuni adattamenti. Per la versione italiana dell’interfaccia, cercherò di capire se e come è possibile aggiornarla.

Buon divertimento con uMap 🙂


Cosa impareremo

  • Usare un account per trovare le tue mappe
  • Cambiare la forma, il colore e il pittogramma di un marcatore
  • Creare e modificare una linea
  • Controllare la visualizzazione delle etichette

Andiamo per gradi

Nel tutorial precedente abbiamo imparato come creare una mappa anonima che contenga un marcatore. Ora creeremo una mappa più completa: la mappa delle nostre vacanze al Camping de la Plage Goulien sulla penisola di Crozon in Bretagna.

Invece di creare una mappa anonima, utilizzeremo un account per creare questa mappa.

1. Registra un account

uMap ti permette di associare le tue mappe a un account, questo ha due importanti vantaggi rispetto alla creazione di mappe anonime:

  • le mappe create con un account costituiscono un catalogo che consente un facile accesso alle tue carte
  • puoi modificare ogni mappa nel catalogo senza bisogno di conservare un link di modifica

Il software umap non gestisce direttamente gli account utente: la gestione degli account dipende dalla configurazione del software. Su http://umap.openstreetmap.fr , puoi utilizzare un account che hai aperto su un sito web di tua scelta: OpenStreetMap, Twitter, Github o Bitbucket. Se non hai un account su questi strumenti, ora è il momento di registrarti su www.openstreetmap.org: fai clic su Crea un account nell’angolo in alto a destra e segui le istruzioni – ti verrà chiesto un indirizzo email.

Creare mappa senza account

Clicca su Accedi / Registrati quindi sul pittogramma corrispondente all’account che vuoi utilizzare. Compare quindi la pagina di login del sito: inserisci username e password. La pagina successiva ti chiede di autorizzare l’applicazione uMap a utilizzare questo account: autorizza questo accesso. Troverai quindi la home page di uMap, in cui il link di connessione è stato sostituito dal link Le mie mappe che ti consente di accedere a tutte le mappe create con questo account.

Osserva l’URL nella barra degli indirizzi quando consulti il ​​catalogo delle tue mappe: contiene il nome del tuo account – per esempio http://umap.openstreetmap.fr/fr/user/cartocite/. Puoi usarlo per accedere al tuo catalogo di mappe, anche senza aver effettuato l’accesso al tuo account: puoi diffondere questo URL, i destinatari non potranno modificare le tue mappe.

Tutte le mappe che crei mentre sei connesso al tuo account vengono aggiunte al tuo catalogo.

2. Crea un bel marcatore

Iniziamo creando una mappa: assegnale un nome, definisci l’estensione e aggiungi un marcatore alla posizione del campeggio. Abbiamo visto nel tutorial precedente come eseguire queste operazioni.

Questo grande marcatore blu non è molto esplicito nel rappresentare un campeggio. Risolviamo il problema. Nel pannello laterale visibile quando viene selezionato un marcatore, il menu Shape properties consente di modificare l’aspetto del marcatore:

  • prop_formaColore : cliccando su definisci puoi scegliere un colore. Nota che puoi definire un colore con il o con il suo codice esadecimale, che puoi scegliere ad esempio con questo selettore di colori .

  • Forma dell’icona : La scelta predefinita corrisponde al marcatore corrente, le altre scelte sono Cerchio, Goccia e Palla.

  • Simbolo dell’icona : clicca su definisci per scegliere tra un centinaio di pittogrammi. Si noti che il pittogramma viene visualizzato solo per le forme dell’icona Predefinito e Goccia.

Ecco il marcatore ottenuto con le proprietà definite qui sopra:

marcatore campeggio

Modifica un marcatore

MOD_marcatorePer modificare un marcatore della mappa, ci sono diverse possibilità:

  • facendo clic sul marcatore è possibile visualizzare il pannello di modifica (penna) o eliminare il marcatore (cestino)

  • shift-click è una scorciatoia che visualizza direttamente il pannello di modifica

  • trascina e rilascia ti consente di spostare il marcatore sulla mappa

 

3. Crea una linea

Il primo giorno di vacanza andiamo con il kayak a Pointe de Dinan a ovest della spiaggia di Goulien. Tracciamo il percorso seguito.

min_linea Il pulsante Disegna una polilinea permette di disegnare punto per punto una linea composta da più segmenti. Cliccare di nuovo sull’ultimo punto disegnato per terminare la linea: sulla destra compare un pannello che permette di dare un nome e una descrizione alla linea, come per i marcatori.

Modifica una linea

In qualsiasi momento puoi selezionare una linea facendo doppio clic su di essa. Puoi quindi modificare le sue proprietà nel pannello laterale o modificare il suo percorso sulla mappa:

  • eliminare un punto dalla linea, indicata da un quadrato bianco, cliccandoci sopra
  • spostare un punto trascinandolo e rilasciandolo
  • inserire un punto cliccando sul quadrato grigio al centro di ogni segmento
  • allungare la linea con un Ctrl-Click quando il cursore è posizionato sul primo o sull’ultimo punto
  • tagliare la linea in due: fai clic con il pulsante destro del mouse su un punto, quindi scegli l’opzione Dividi linea (N.d.t: ? nella traduzione italiana non ho trovato questo comando)
mappa con esempio di tratteggio e indicazioni comandi

Proprietà della linea

prop_linea

Le proprietà di una linea consentono di definirne il colore e altri parametri che ne definiscono lo stile:

  • l’opacità varia da trasparente, a sinistra, a completamente opaca, a destra. Più spesso è il tratto più trasparente può essere.

  • lo spessore (peso) è definito in pixel, il suo valore predefinito è 3: trascina il cursore verso destra per un tratto più spesso (che sarà più facile da selezionare).

Le proprietà avanzate permettono di:

  • semplificare il tracciato, permette di ridurre il numero di punti per adattarlo al livello dello zoom. In generale è inutile semplificare un tracciato fatta a mano .

  • definire una linea tratteggiata attraverso una serie di cifre separate da virgole: lunghezza visibile (in pixel), lunghezza invisibile, lunghezza visibile, ecc. Lo spessore della linea deve essere preso in considerazione: più le linee sono spesse, maggiori devono essere gli intervalli.

Ecco lo stile di linea ottenuto con le proprietà indicate qui sopra:

4. Aggiungi etichette

Per aiutare a identificare i diversi elementi della nostra mappa, possiamo associarli a un’etichetta. La scheda etichettaInteraction options consente di controllare la visualizzazione di un’etichetta associata a ciascun elemento:

  • Mostra un’etichetta ne attiva la sua visualizzazione, e viene posizionata automaticamente

  • Direzione dell’etichetta permette di fissarne la posizione, a destra o a sinistra dell’elemento, o anche sopra o sotto

  • [Visualizza solo al passaggio del mouse è un’opzione interessante se la mappa è densa: la visualizzazione di tutte le etichette sovraccarica la mappa] (N.d.t: questa funzione è stata spostata all’interno dell’opzione “Mostra l’etichetta”, in italiano è tradotta come “in sovraimpressione”)

  • Etichette cliccabili  l’opzione permette di visualizzare la finestra del pop-up corrispondente anche se l’utente clicca sull’etichetta e non solo se clicca sulla forma dell’elemento.

Facciamo il punto

La nostra seconda mappa è già più interessante della prima e sappiamo ritrovarla facilmente. Abbiamo visto come creare, modellare e modificare I punti e le linee. Non ci siamo occupati qui dei poligoni, che rappresentano le superfici. Alcune caratteristiche specifiche dei poligoni meritano di essere approfondite, cosa che faremo nel tutorial Il caso dei poligoni .

Nel prossimo tutorial vedremo come possiamo personalizzare ulteriormente la nostra mappa (per il momento ancora in francese, un po’ di pazienza…).

Testo originale: https://wiki.cartocite.fr/doku.php?id=umap:3_-_j_utilise_un_compte_et_cree_une_belle_carte
Traduzione italiana: nilocram
Distribuito con licenza Creative Commons Attribution-Share Alike 4.0 Internazionale

Creo la mia prima mappa con uMap

Cosa impareremo

  • distinguere la modalità modifica dalla modalità consultazione
  • individuare i passaggi necessari per creare una mappa
  • creare una prima mappa e diffonderla

Procediamo per gradi

L’obiettivo della nostra prima mappa è semplice: posizionare uno o più luoghi (casa, vacanze, lavoro, ecc.). Procediamo per gradi.

1. La modalità modifica

Visita il sito http://umap.openstreetmap.fr/ e fai clic su Crea una mappa. Viene visualizzata nel browser una mappa che si presenta così:

Mappa in modalità consultazione

Troviamo a sinistra i pulsanti disponibili al momento della consultazione della mappa. Diversi elementi visibili sopra e a destra della mappa sono visibili solo quando si crea o si modifica una mappa, vale a dire in modalità modifica:

  • il nome della mappa in alto a sinistra
  • i pulsanti Annulla e Salva in alto a destra
  • a destra una serie di tre pulsanti per aggiungere elementi alla mappa: marcatori, linee e poligoni
  • sotto una serie di sei pulsanti per configurare la mappa

2. Dare un nome alla mappa

min_impostazioni Una mappa deve avere un nome che fornisca informazioni su ciò che la mappa rappresenta. Per impostare il nome della mappa, fai clic sul pulsante Modifica le impostazioni della mappa.

A destra della mappa viene visualizzato un pannello, che contiene in alto un campo di inserimento per il nome della mappa, con il testo Mappa senza nome: posiziona il cursore in questo campo, elimina il testo esistente e digita il nome della tua mappa, per esempio il mio domicilio .

Osserva che il nome in alto a sinistra della mappa è stato immediatamente modificato. È anche possibile inserire un testo più lungo nel campo della descrizione, che apparirà nel pannello con la legenda – ci torneremo.

Ora salva la mappa con il pulsante Salva: nella parte superiore della mappa viene visualizzato un testo come quello qui sotto.

Questo testo spiega che hai appena creato una mappa anonima e ti dà un link (URL) per modificarla. Infatti la mappa che hai creato non è associata a un account, e uMap ritiene che solo chi ha il link segreto può modificarla. perciò devi conservare questo link se vuoi modificare la mappa. Vedremo nel prossimo tutorial come creare un catalogo di mappe utilizzando un account, allora non sarà più necessario conservare il link segreto.

3. Aggiungere marcatori

Comincia a spostare e a ingrandire la mappa per vedere l’esatta posizione della tua casa, del luogo di lavoro o vacanza.

goccia Quindi fai clic sul pulsante Aggiungi un marcatore. Il cursore diventa un segno + : spostalo sul luogo che vuoi marcare e fai clic sul pulsante sinistro del mouse: un marcatore blu quadrato viene creato in questo luogo e compare un pannello sulla destra.

Questo pannello permette di associare un nome e una descrizione al marcatore:

  • il nome verrà visualizzato quando il mouse passa sopra al marcatore
  • il nome e la descrizione saranno visibili in una finestra di pop-up che appare quando si fa clic sul marcatore.

Vedremo poi l’utilità dei livelli e come modificare le proprietà del marcatore: forma, colore, icona, ecc.

Ripeti l’operazione per aggiungere i marcatori che ritieni utili per la tua mappa.

4. Impostare l’estensione della mappa

È importante impostare l’estensione iniziale della carta, cioè la parte del planisfero che verrà visualizzata durante la consultazione della mappa.

Questa estensione dovrebbe includere i marcatori e permettere di individuare il contesto della mappa. Dovrebbe essere un compromesso tra uno zoom troppo lontano e uno troppo vicino. Un buon compromesso dipende essenzialmente dai contenuti della carta: deve essere visibile la maggior parte dei marcatori, delle linee e dei poligoni e deve utilizzare al meglio l’estensione della mappa.

Si può anche considerare il pubblico della mappa: una mappa inviata al tuo vicino di casa può avere uno zoom molto ravvicinato, una mappa inviata a un corrispondente straniero deve permettere di riconoscere il paese in cui si trova la mappa.

min_centra Per impostare l’estensione, sposta e ingrandiscila mappa per visualizzare l’estensione desiderata e fai clic sul pulsante Salva il centro e lo zoom.

uMap in realtà salva il centro e il livello dello zoom. La parte visibile potrà variare secondo le dimensioni della finestra in cui è visualizzata la mappa. È utile prevedere un margine attorno ai contenuti della mappa.

5. Salvare la mappa

Qualsiasi modifica della carta deve essere salvata sul server uMap facendo clic sul pulsante Salva in alto a destra. Questa operazione salva tutte le modifiche dopo l’ultimo salvataggio: perciò puoi fare più modifiche di seguito e poi salvarle. Il pulsante Annulla permette invece di eliminare tutte le modifiche fatte dopo l’ultimo salvataggio.

Dopo aver salvato le modifiche, il pulsante Annulla è sostituito da Disabilita la modifica. Questo permette di abbandonare la modalità modifica per vedere la mappa in modalità consultazione. È quindi possibile testare la tua mappa: clicca sul marcatore per visualizzare la finestra pop-up e controllare il suo nome e la descrizione.

Complimenti! hai creato la prima mappa uMap. È possibile distribuirla ai tuoi conoscenti copiando l’URL nella barra degli indirizzi del browser o copiando la sua URL breve disponibile nel menu Condividi visto nel tutorial Consultare una mappa uMap.

Facciamo il punto

Hai creato la tua prima mappa in pochi passaggi. L’operazione è abbastanza semplice, ma il risultato è ancora abbastanza sommario. Il prossimo tutorial ci permetterà di creare una mappa più bella.

Testo originale: http://wiki.cartocite.fr/doku.php?id=umap:2_-_je_cree_ma_premiere_carte_umap
Traduzione italiana: nilocram
Testo distribuito con licenza CreativeCommons Attribution-Share Alike 4.0 Internazionale

Come consultare una mappa uMap

Cosa impareremo

  • Utilizzare una mappa uMap
  • Condividere una mappa uMap
  • Conoscere le caratteristiche principali di uMap

Andiamo per gradi

1. Manipolare la carta

Hai ricevuto un collegamento a una mappa uMap via e-mail. Ecco gli elementi principali della mappa e le operazioni disponibili per manipolarla. La mappa uMap mostrata di seguito è disponibile qui.

Mappa uMap in modalità Modifica

A destra della mappa e a seconda della scelta del suo autore, può essere visualizzato uno dei seguenti due pannelli:

  • Informazioni: il titolo della mappa, una possibile descrizione e l’elenco dei livelli
  • Visualizza i dati: tutti gli elementi della mappa, suddivisi per livelli (vedi sotto)

Il pannello Informazioni (À propos/About) è visualizzabile cliccando sulla scritta “Informazioni”, sempre visibile nella scheda in basso a destra.

Come nella maggior parte delle mappe interattive puoi:

  • spostare la mappa trascinandola e rilasciandola
  • aumentare e diminuire lo zoomcon i pulsanti + e – o con la rotellina del mouse
  • selezionare un elemento della mappa facendo clic con il mouse: viene visualizzata una finestra pop-up con la descrizione dell’elemento. Questo può includere testo, un’immagine, un collegamento a un sito web. Nel nostro esempio la descrizione di ogni cinema contiene un’immagine che è un link al sito web del cinema.

Nota: i pulsanti in alto a sinistra della mappa, così come la barra della legenda, potrebbero non essere disponibili se l’autore della mappa ha scelto di nasconderli.

Ora diamo un’occhiata ad alcune caratteristiche specifiche di uMap.

2. Il selettore dei livelli

Gli elementi di una mappa uMap possono essere distribuiti in più livelli (layer). Questo aiuta a strutturare una mappa, rendendola più chiara e più facile da mantenere. L’utente può scegliere di mostrare o nascondere ogni singolo livello.

sel_livelli Il selettore di livelli è l’icona visibile in alto a sinistra della mappa sotto i pulsanti di zoom. Quando si posiziona il mouse su questo pulsante, viene visualizzato l’elenco dei livelli, è quindi possibile visualizzare o nascondere ciascun livello o persino centrare la mappa sul contenuto di un livello.

In questo esempio il livello “Stations Bicloo” è nascosto: cliccando sull’icona dell’occhio di questo livello lo si visualizza.
L’elenco dei livelli, eventualmente con la descrizione di ogni livello, è visibile anche nella legenda della mappa.

3. Il pulsante Maggiori controlli

controlli Sotto il selettore della carta c’è un pulsante con il testo “Maggiori controlli“. Facendo clic su questo pulsante vengono visualizzati una serie di pulsanti.

cerca permette di cercare una località e di centrare la mappa su di essa:inserisci il nome di un comune e premi il tasto Invio.

s_interomette il browser in modalità schermo intero, che può essere chiusa con lo stesso pulsante o con il tasto Esc della tastiera.

condividi permette di condividere la mappa o esportare i dati; viene visualizzato un pannello a destra della mappa, spiegato di seguito.

centra ti permette di geolocalizzare1, cioè centra la mappa sulla tua posizione attuale.

1La geolocalizzazione richiede l’autorizzazione dell’utente, quindi il tuo browser web potrebbe chiederti di accettare o di attivare la geolocalizzazione.   

sfondi visualizza sulla destra diversi sfondi della mappa, cliccando su uno di essi si cambia lo sfondo della mappa.

OSM apre la mappa in un editor di Openstreetmap per migliorarla, ma l’argomento va oltre lo scopo di questo tutorial.

misura è uno strumento di misura. L’attivazione di questo strumento ha due effetti: da un lato visualizza la lunghezza degli elementi lineari della mappa e l’area degli elementi di superficie; dall’altro permette di tracciare sulla mappa una linea di cui viene visualizzata la lunghezza. Fare nuovamente clic sul pulsante per disattivare questo strumento.

Condividere la mappa

Il pannello di condivisione delle mappe offre tre possibilità. La tua scelta dipende da come desideri condividere la mappa:

  • URL breve ti consente di copiare un URL abbreviato – equivalente all’URL della scheda – che puoi ad esempio inviare in un’e-mail.
  • Incorporare la mappa in iframe ti permette di includere la mappa in una pagina web: devi solo copiare il codice HTML e inserirlo in quello della tua pagina web. Questa possibilità è esplorata in dettaglio nel tutorial Je publie ma carte et en contrôle l’accès.
  • Il download dei dati consente di ottenere i dati visibili sulla mappa, in diversi formati. Questo potrebbe consentire di utilizzare questi dati con un altro strumento.

4. Visualizza i dati

vis-dati L’elenco degli elementi della mappa può essere visualizzato con un clic su Visualizza dati , accessibile dal selettore dei livelli, dalla barra della legenda o nella parte superiore del pannello Legenda.

Il pannello visibile a destra mostra tutti gli elementi della mappa, organizzati per livelli. La lente di ingrandimento a sinistra di ogni elemento mostra il pop-up che descrive questo elemento sulla mappa. Il testo da inserire sopra l’elenco permette di cercare un elemento, mostrando solo quelli i cui nomi contengono il testo inserito.

Facciamo il punto

Questo primo tutorial ci ha permesso di scoprire le principali caratteristiche di una mappa uMap. Ora impareremo a creare una mappa.

Testo originale: https://wiki.cartocite.fr/doku.php?id=umap:1_-_je_consulte_une_carte_umap
Traduzione italiana: nilocram
Distribuito con licenza Creative Commons Attribution-Share Alike 4.0 Internazionale

La Digitale: software educativo libero e responsabile

Riprendo e traduco praticamente per intero la home page di La Digitale, una raccolta di applicazioni e programmi liberi e responsabili creata dal formatore francese Emmanuel Zimmert.

La Digitale
software educativo libero e responsabile

In questa pagina troviamo una presentazione dei principi che stanno alla base di La Digitale e l’elenco degli strumenti realizzati dal suo infaticabile creatore.

Alla traduzione della home page aggiungo, perché mi ha particolarmente impressionato, l’elenco delle modifiche e delle nuove applicazioni che, più veloce del vento, Emmanuel Zimmert, ha realizzato tra febbraio e luglio di quest’anno. A lui, naturalmente, un grande ringraziamento per i suo lavoro.

La Digitale è sicuramente un esempio di buone pratiche da diffondere e sostenere.

Questo articolo è distribuito con licenza Creative Commons BY-NC-SA .

LA DIGITALE…

  1. progetta e sviluppa strumenti e applicazioni digitali libere e responsabili per gli insegnanti (di lingua).
  2. sensibilizza alle buone pratiche e alla sobrietà digitale in ambito educativo.
  3. difende una tecnologia digitale educativa virtuosa e inclusiva lontana dalle grandi aziende guidate dalla corsa al profitto e dalla raccolta e vendita dei dati.

STRUMENTI PER INSEGNANTI

La tecnologia digitale è una delle principali sfide per l’istruzione (e la società) nel 21° secolo.

Nella sua volontà di essere utile alla comunità educativa, La Digitale offre strumenti digitali responsabili ( Che cos’è uno strumento educativo digitale responsabile? ) e gratuiti per accompagnare il processo di insegnamento e apprendimento in presenza e a distanza.

La Digitale applicazioni online

Applicazioni online

DIGISCREEN
uno sfondo interattivo per la classe (interfaccia disponibile anche in italiano)
Scopri l’uso

DIGIPAD
per creare bacheche multimediali collaborative (interfaccia disponibile anche in italiano)
Scopri l’uso

DIGIDOC
per creare semplici documenti collaborativi (interfaccia disponibile anche in italiano)
Scopri l’uso

DIGIBUNCH
per creare raccolte (bouquet) di link
Scopri l’uso

DIGILINK
per generare link abbreviati
Scopri l’uso

DIGIPLAY
per guardare i video di YouTube senza distrazioni
Scopri l’uso

DIGITOOLS
una serie di strumenti di animazione semplici e utili
Scopri l’uso

DIGISTORM
per creare brainstorming, questionari, ecc.
Scopri l’uso

DIGICARD
per creare semplici composizioni grafiche
Scopri l’uso

DIGIWORD
per creare nuvole di parole (wordcloud)
Scopri l’uso

DIGIFACE
per creare avatar
Scopri l’uso

DIGIREAD
per semplificare la visualizzazione di pagine e articoli online
Scopri l’uso

DIGIBUZZER
per giocare intorno a un buzzer
Scopri l’uso

DIGIQUIZ
per leggere e condividere contenuti H5P online
Scopri l’uso

DIGIMIND
per creare semplici mappe mentali
Scopri l’uso

Software multipiattaforma

Software per Windows, macOS e GNU/Linux

LOGIQUIZ
per creare e riprodurre offline i contenuti di H5P
Scopri Scarica

LOGIMIX
per semplici modifiche di file audio
Scopri Scarica

LOGIKEY
per lavorare con software gratuito portatile su una chiavetta USB
Scopri Scarica

Software per Raspberry

Sistema operativo Raspberry Pi

EDUBOX
uno spazio di lavoro digitale offline
Scopri

DIGIBOX
tutti gli strumenti de La Digitale offline
Prossimamente ⏳

Modello economico

Lo sviluppo e l’hosting di questi strumenti si basa su un modello economico semplice. Gli strumenti sono messi a disposizione gratuitamente e senza limitazioni: le funzioni sono uguali per tutti. 

Un sistema di finanziamento partecipativo consente di coprire i costi di produzione. Se trovi utili questi strumenti, puoi sostenere il progetto per garantirne la duratao addirittura far crescere il tuo digitale 😉. 

Sostengo il progetto ❤️.

Il design di questo sito fa parte di un approccio etico e responsabile 💚. 

È fatto a mano al 100%, non raccoglie alcun dato e non utilizza alcun cookie.

È ospitato in Svizzera, presso Infomaniak , in data center alimentati al 100% da energia rinnovabile 🌍 e raffreddati dall’aria esterna, senza aria condizionata 🌬️.  

Un progetto libero e solidale realizzato da Emmanuel ZIMMERT // ez [at] ladigitale.dev

Supportato da AFT-RN

La Digitale su LinkedIn // La Digitale su Mastodon