4E e 4I Sia: Creare la mappa con Leaflet, Php e file di testo - Supplemento esplicativo per studenti DSA

Esercizio: Creare con leaflet e Leaflet macchine una pagina php che inserendo la via e la città di partenza e la via e la città di destinazione tracci il percorso della mappa con i monumenti e la descrizione visibili nel percorso, tutti i dati devono essere salvati in php su un file di testo compreso le coordinate satellitari. Creare una pagina che visualizzi i dati registrati. Nella pagina di inserimento del percorso deve essere possibile inserire la via e la città ad esempio via: "via San Bassiano, 18" città "Lodi" e destinazione via " Viale Pavia, 28 A" città "Lodi" Per implementare un geocoding dinamico, considera l'uso di servizi come OpenStreetMap tramite Nominatim.

Soluzione

Per realizzare l'applicazione in PHP utilizzando Leaflet e il geocoding dinamico tramite il servizio di Nominatim di OpenStreetMap, dovremo seguire alcuni passi.

Struttura del progetto

Pagina di Inserimento Percorso (index.php)
- Questa pagina consentirà agli utenti di inserire l'indirizzo di partenza e di destinazione (via e città).
- Verrà utilizzato un modulo HTML per l'inserimento dei dati.
- Utilizzeremo JavaScript e Leaflet per tracciare il percorso sulla mappa.
- All'invio del modulo, i dati verranno salvati in un file di testo (ad esempio dati_percorso.txt).
Pagina di Visualizzazione dei Dati (visualizza.php)
- Questa pagina mostrerà i dati registrati dal file di testo, inclusi i dettagli dei percorsi e le coordinate satellitari.
Geocoding Dinamico
- Utilizzeremo Nominatim per convertire l'indirizzo in coordinate geografiche.

Passo 1: Creazione della pagina di inserimento percorso

Iniziamo creando il modulo HTML e integrando Leaflet nella pagina.

index.php

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inserisci Percorso</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
    <style>
        #map { height: 400px; }
    </style>
</head>
<body>
    <h1>Inserisci Percorso</h1>
    
    <!-- Modulo di inserimento indirizzo -->
    <form action="index.php" method="POST">
        <label for="partenza">Via e Città di Partenza:</label>
        <input type="text" id="partenza" name="partenza" required><br><br>
        <label for="destinazione">Via e Città di Destinazione:</label>
        <input type="text" id="destinazione" name="destinazione" required><br><br>
        <input type="submit" value="Calcola Percorso">
    </form>
    
    <div id="map"></div>

    <?php
    // Salvataggio dei dati
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        $partenza = htmlspecialchars($_POST['partenza']);
        $destinazione = htmlspecialchars($_POST['destinazione']);
        
        // Scrivere i dati in un file di testo
        $data = [
            'partenza' => $partenza,
            'destinazione' => $destinazione,
            'data' => date('Y-m-d H:i:s')
        ];

        // Aggiungi i dati in un file di testo
        $file = fopen("dati_percorso.txt", "a");
        fwrite($file, json_encode($data) . "\n");
        fclose($file);
        
        // Uscita del form
        echo "<h2>Percorso registrato!</h2>";
    }
    ?>

    <script>
        // Inizializzazione della mappa
        var map = L.map('map').setView([45.0467, 9.3852], 13); // Impostiamo un centro iniziale (ad esempio Lodi)

        // Aggiungi il layer di OpenStreetMap alla mappa
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // Funzione per geocodificare gli indirizzi (via e città)
        function geocodeAddress(address, callback) {
            var url = "https://nominatim.openstreetmap.org/search?format=json&q=" + encodeURIComponent(address);
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data.length > 0) {
                        var lat = parseFloat(data[0].lat);
                        var lon = parseFloat(data[0].lon);
                        callback(lat, lon);
                    } else {
                        alert("Indirizzo non trovato: " + address);
                    }
                })
                .catch(error => console.log(error));
        }

        // Esegui il geocoding per i campi di partenza e destinazione
        document.addEventListener("DOMContentLoaded", function() {
            var partenza = "<?php echo isset($_POST['partenza']) ? $_POST['partenza'] : ''; ?>";
            var destinazione = "<?php echo isset($_POST['destinazione']) ? $_POST['destinazione'] : ''; ?>";
            
            if (partenza && destinazione) {
                // Geocodifica Partenza
                geocodeAddress(partenza, function(lat1, lon1) {
                    var markerPartenza = L.marker([lat1, lon1]).addTo(map);
                    markerPartenza.bindPopup("Partenza: " + partenza).openPopup();

                    // Geocodifica Destinazione
                    geocodeAddress(destinazione, function(lat2, lon2) {
                        var markerDestinazione = L.marker([lat2, lon2]).addTo(map);
                        markerDestinazione.bindPopup("Destinazione: " + destinazione).openPopup();

                        // Traccia il percorso tra i due punti
                        var route = L.Routing.control({
                            waypoints: [
                                L.latLng(lat1, lon1),
                                L.latLng(lat2, lon2)
                            ]
                        }).addTo(map);
                    });
                });
            }
        });
    </script>
</body>
</html>

Passo 2: Creazione della pagina di visualizzazione dei dati

La pagina visualizza.php mostrerà tutti i percorsi registrati nel file di testo. Ogni percorso sarà visualizzato con i dettagli di partenza, destinazione e le coordinate.

visualizza.php

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visualizza Percorsi Registrati</title>
</head>
<body>
    <h1>Percorsi Registrati</h1>

    <?php
    // Leggi i dati dal file di testo
    $file = fopen("dati_percorso.txt", "r");

    if ($file) {
        echo "<ul>";
        while (($line = fgets($file)) !== false) {
            $data = json_decode($line, true);
            echo "<li><strong>Partenza:</strong> " . $data['partenza'] . " <strong>Destinazione:</strong> " . $data['destinazione'] . " <strong>Data:</strong> " . $data['data'] . "</li>";
        }
        echo "</ul>";
        fclose($file);
    } else {
        echo "<p>Non ci sono percorsi registrati.</p>";
    }
    ?>

</body>
</html>

Passo 3: Salvataggio dei dati in un file di testo

Nel codice index.php, quando l'utente invia il modulo, i dati vengono salvati nel file dati_percorso.txt. Ogni percorso è memorizzato come una stringa JSON, che contiene la partenza, la destinazione e la data.

Funzionamento del Geocoding

Abbiamo utilizzato la funzione geocodeAddress che invia una richiesta al servizio Nominatim di OpenStreetMap per ottenere le coordinate geografiche (latitudine e longitudine) degli indirizzi di partenza e destinazione. Queste coordinate vengono poi usate per tracciare il percorso sulla mappa con Leaflet Routing Machine.

Conclusione

Con questo approccio, hai una pagina per inserire il percorso, geocodificarlo, e tracciare il percorso sulla mappa. Inoltre, i dati vengono salvati in un file di testo e possono essere visualizzati in una seconda pagina.

Supplemento esplicativo per studenti DSA

Gli studenti con DSA (Disturbi Specifici dell'Apprendimento), come dislessia, discalculia, disgrafia, e disortografia, possono incontrare difficoltà nel leggere, scrivere, calcolare e organizzare le informazioni. Per rendere il contenuto di una pagina web accessibile e facilmente fruibile anche per loro, è necessario progettare con attenzione. Ecco alcuni suggerimenti su come adattare le due pagine (la pagina di inserimento percorso e la pagina di visualizzazione) affinché siano più adatte agli studenti con DSA.

1. Utilizzo di Linguaggio Semplice e Chiarezza

Gli studenti con DSA potrebbero avere difficoltà con la comprensione di testi complessi o troppo ricchi di termini tecnici. È quindi fondamentale utilizzare un linguaggio semplice, diretto e comprensibile.

Pagine di Inserimento Percorso (index.php)

Esempio:

Semplicità nelle istruzioni: Invece di usare frasi complesse, fornisci frasi brevi e chiare che spieghino cosa fare in ogni parte del modulo.

Prima:

<label for="partenza">Inserisci il nome della via e la città di partenza:</label>

Dopo:

<label for="partenza">Scrivi la tua via e città di partenza:</label>

Rimozione di informazioni non necessarie: Evita di aggiungere troppe informazioni. Mantieni solo ciò che è essenziale per il compito da svolgere.

Pagine di Visualizzazione Dati (visualizza.php)

Sintesi e chiarezza nei dati visualizzati: Gli studenti con DSA potrebbero sentirsi sopraffatti da troppi dettagli. Mostra solo le informazioni più rilevanti e organizza il contenuto in un formato semplice da seguire, per esempio in liste puntate, con un font leggibile.

2. Tipografia e Impostazioni di Layout

Gli studenti con DSA, in particolare quelli con dislessia, possono trarre beneficio da una tipografia chiara e da un layout ben strutturato.

Font leggibili: Utilizza font sans-serif (come Arial, Helvetica o Open Sans) che sono più facili da leggere per le persone con dislessia. Evita i font decorativi.
Dimensioni del testo: Assicurati che il testo sia abbastanza grande e facilmente leggibile (minimo 14px per il corpo del testo).
Spaziatura: Usa ampi margini e spaziatura tra i paragrafi. Le righe di testo non devono essere troppo lunghe. Una larghezza di 60-70 caratteri per riga è ideale.

Esempio di CSS per migliorare la leggibilità:

body {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background-color: #F4F4F9;
    color: #333;
}

h1, h2 {
    font-weight: bold;
    color: #0044cc;
}

input[type="text"], input[type="submit"] {
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

3. Uso di Colori e Contrasto

Il contrasto tra testo e sfondo è essenziale per gli studenti con DSA, soprattutto per quelli con difficoltà visive. Utilizza colori con un buon contrasto, in modo che il testo risulti visibile facilmente.

Contrasto elevato: Usa il testo scuro su sfondo chiaro (o viceversa).
Evitare combinazioni di colori problematiche: Alcuni colori (come il verde e il rosso) possono essere difficili da distinguere per chi ha dislessia o problemi visivi. Utilizza una combinazione di colori ben contrastata.

Esempio di colori con contrasto elevato:

body {
    background-color: #FFFFFF;
    color: #333333;
}

button {
    background-color: #4CAF50;
    color: white;
}

input[type="submit"] {
    background-color: #FF6347;
    color: white;
}

4. Navigazione e Interazione Semplificate

Gli studenti con DSA potrebbero avere difficoltà a navigare tra i vari elementi di una pagina web se la navigazione non è chiara o se ci sono troppe opzioni visibili contemporaneamente. Ecco come semplificare l’interazione:

Uso di pulsanti chiari e grandi: I pulsanti e gli input devono essere abbastanza grandi da essere facilmente cliccabili o selezionabili.
Indicare il flusso di lavoro: Mostra chiaramente cosa ci si aspetta che l'utente faccia, per esempio, etichettando i campi del modulo in modo chiaro e con un ordine logico.

Esempio di semplificazione del flusso di lavoro nel modulo:

<form action="index.php" method="POST">
    <label for="partenza">Scrivi la tua via e città di partenza:</label>
    <input type="text" id="partenza" name="partenza" required placeholder="Esempio: via San Bassiano, 18 Lodi">
    
    <label for="destinazione">Scrivi la tua via e città di destinazione:</label>
    <input type="text" id="destinazione" name="destinazione" required placeholder="Esempio: Viale Pavia, 28 A Lodi">
    
    <input type="submit" value="Calcola Percorso">
</form>

Inoltre, puoi utilizzare strumenti di supporto come i pulsanti di "conferma" o "annulla" per migliorare l'interazione e la navigazione.

5. Feedback Visivi Chiari

Gli studenti con DSA potrebbero aver bisogno di un feedback immediato ed esplicito per comprendere quando hanno completato correttamente un'azione (ad esempio, l'inserimento di un indirizzo).

Messaggi di errore chiari: Quando un campo non è stato compilato correttamente, fornisci un messaggio chiaro che spieghi il problema.

Esempio di messaggio di errore chiaro:

if (!lat1 || !lon1) {
    alert("Errore: Non siamo riusciti a trovare l'indirizzo di partenza. Per favore, controlla l'input.");
}

6. Supporto Multimediale per l'Apprendimento

In alcuni casi, potrebbe essere utile fornire spiegazioni vocali o altre forme di supporto audiovisivo che possano aiutare gli studenti con DSA a comprendere meglio il contenuto.

Esempio di miglioramento:

Aggiungi una voce automatica che guida l’utente nel completamento del modulo (ad esempio usando un lettore di testo per leggere le istruzioni).
Fornisci brevi video o immagini che spieghino come utilizzare il sito.

7. Supporto per la Personalizzazione

Ogni studente con DSA potrebbe avere esigenze diverse. È utile dare loro la possibilità di personalizzare l'esperienza utente.

Controllo sulla dimensione del testo: Aggiungi un'opzione che permetta agli utenti di aumentare o ridurre la dimensione del testo.
Modalità ad alto contrasto: Una modalità con colori ad alto contrasto o una modalità “dislessia” (con un font specifico come OpenDyslexic) potrebbe essere utile.

Esempio di attivazione di una modalità ad alto contrasto:

<button onclick="toggleHighContrast()">Attiva Modalità Alta Visibilità</button>

Funzione JavaScript:

function toggleHighContrast() {
    document.body.classList.toggle('high-contrast');
}

8. Facilità di Comprensione dei Dati Visualizzati

Quando mostri i dati (come i percorsi salvati in visualizza.php), cerca di presentare le informazioni in modo strutturato, con un linguaggio semplice. Utilizza liste o tabelle per organizzare i dati e includi descrizioni per ogni parte.

Esempio di visualizzazione:

<ul>
    <li><strong>Partenza:</strong> Via San Bassiano, 18, Lodi</li>
    <li><strong>Destinazione:</strong> Viale Pavia, 28 A, Lodi</li>
    <li><strong>Data del percorso:</strong> 08/01/2025</li>
</ul>

Conclusione

Per gli studenti con DSA, l'obiettivo è creare un ambiente che sia chiaro, semplice da navigare e che riduca il rischio di sovraccarico cognitivo. Utilizzando una tipografia leggibile, un linguaggio semplice, un buon contrasto, feedback visivi chiari e opzioni di personalizzazione, possiamo rendere le pagine web più accessibili e adatte a studenti con disturbi specifici dell'apprendimento.

Cerca nel blog

Il BLOG di Paolo Latella