Procedura per la determinazione analitica della distanza di separazione

ingegnerianelweb

Capitolo S.3 Compartimentazione – S.3.11.3

La distanza di separazione serve a capire quanto deve essere “lontano” un elemento esposto (ad esempio una facciata, un serbatoio, un deposito o un edificio vicino) da una possibile sorgente d’incendio, in modo che il calore irradiato non diventi pericoloso. Con il metodo analitico si fa una stima più realistica: si rappresenta la zona da cui escono le fiamme come una “superficie radiante” e si calcola quanta energia termica arriva al bersaglio in funzione della distanza, delle dimensioni dell’apertura e dell’intensità dell’incendio.

Aumentando la distanza, l’irraggiamento diminuisce, finché scende sotto un valore di sicurezza scelto come soglia. Questo approccio richiede qualche calcolo in più rispetto al metodo tabellare, ma è molto utile quando il caso reale non rientra bene negli schemi standard o quando si vuole ottimizzare la progettazione senza rinunciare alla sicurezza.

Leggi l’articolo…

JavaScript Notification API: notifiche di sistema dal browser

ingegnerianelweb

Nel contesto delle moderne applicazioni web, l’interazione con l’utente non si limita più alla semplice visualizzazione di contenuti all’interno della pagina. Sempre più spesso è necessario comunicare eventi rilevanti anche quando l’utente non sta attivamente navigando il sito. È proprio in questo scenario che entra in gioco la JavaScript Notification API.

Questa API consente alle applicazioni web di mostrare notifiche a livello di sistema operativo, simili a quelle delle applicazioni native, permettendo di raggiungere l’utente anche quando il browser è in background o la scheda non è in primo piano.

Notifiche API
Le notifiche della Notification API vengono mostrate dal sistema operativo, non dalla pagina web.

Cos’è la Notification API

La Notification API è una specifica Web che permette a JavaScript di interagire direttamente con il sistema di notifiche del dispositivo dell’utente. A differenza di un alert o di un messaggio HTML, la notifica non fa parte del DOM della pagina ma viene gestita dal sistema operativo.

Dal punto di vista ingegneristico, questo approccio consente di separare il livello di presentazione dell’applicazione web dal canale di comunicazione asincrono verso l’utente, migliorando visibilità ed efficacia dei messaggi.

Flusso concettuale: dalla pagina web al centro notifiche del sistema operativo.

Per motivi di sicurezza, l’uso della Notification API è generalmente consentito solo su connessioni HTTPS, fatta eccezione per localhost durante la fase di sviluppo.

Un’API basata sul consenso dell’utente

La Notification API è basata su un modello permission-based. Prima di poter mostrare una notifica, l’applicazione deve ottenere il consenso esplicito dell’utente, che può essere concesso, negato oppure lasciato nello stato predefinito.

Il browser gestisce direttamente la richiesta di autorizzazione.

Verifica del supporto nel browser

Prima di utilizzare la Notification API è buona prassi verificare che il browser la supporti: 

if (!("Notification" in window)) {
  console.log("Questo browser non supporta le notifiche di sistema.");
}

Richiesta del permesso e gestione asincrona

La richiesta del permesso avviene in modo asincrono e non blocca il thread principale. È consigliabile richiederlo solo dopo un’azione esplicita dell’utente, come il click su un pulsante. 

async function richiediPermessoNotifiche() {
  if (!("Notification" in window)) {
    console.log("Notifiche non supportate da questo browser.");
    return;
  }

  const permesso = await Notification.requestPermission();

  if (permesso === "granted") {
    console.log("Permesso notifiche concesso.");
  } else if (permesso === "denied") {
    console.log("Permesso notifiche negato dall’utente.");
  } else {
    console.log("Permesso notifiche non ancora deciso.");
  }
}

Creare e visualizzare una notifica

Una volta ottenuto il consenso, è possibile creare e visualizzare una notifica personalizzando titolo, messaggio e icona.

Esempio di notifica visualizzata sul sistema operativo.
function mostraNotifica(titolo, messaggio) {
  if (Notification.permission !== "granted") return;

  const notifica = new Notification(titolo, {
    body: messaggio,
    icon: "/img/notifica.png"
  });

  notifica.onclick = () => {
    window.focus();
    window.location.href = "/articoli/dettaglio";
  };
}

Limiti e buone pratiche

L’abuso delle notifiche porta quasi sempre l’utente a negare il permesso. È fondamentale utilizzare questo strumento solo per eventi realmente rilevanti e coerenti con le aspettative dell’utente.

Inoltre, la Notification API da sola non consente l’invio di notifiche con browser completamente chiuso. Per questo scenario è necessario introdurre Service Worker e Push API.

Conclusioni

La JavaScript Notification API rappresenta un ponte tra il mondo delle applicazioni web e quello delle applicazioni native. Se utilizzata correttamente, migliora l’esperienza utente e abilita flussi di comunicazione asincroni efficaci e moderni.

Risorse VVF

ingegnerianelweb
immagine_risorse_vvf

In questa sezione sono raccolti i principali collegamenti a risorse e strumenti utili per il personale operativo e tecnico-amministrativo dei Vigili del Fuoco. Manuali, piattaforme istituzionali, normative e applicativi di supporto: un punto di accesso rapido per agevolare il lavoro quotidiano e rimanere sempre aggiornati sulle procedure e i servizi disponibili.

https://webmail1.vigilfuoco.it (Accesso alla webmail @vigilfuoco.it)

https://protocollo.dipvvf.it (Accesso al protocollo informatico Vigili@)

https://statri-web.dipvvf.it/ (Accesso all’applicativo Stat Ri Web per la compilazione dei rapporti di intervento)

https://sipecinfo.dipvvf.it (Accesso all’applicativo SipecInfo per la consultazione dei dati personali )

Per accedere alla risorsa è necessario cliccare sul link e autenticarsi inserendo le proprie credenziali istituzionali (nome.cognome@dipvvf.it e relativa password).

Arduino: Rivoluzione Open Source nell’Elettronica Embedded

Arduino: Rivoluzione Open Source nell’Elettronica Embedded

ingegnerianelweb

Arduino rappresenta una pietra miliare nell’evoluzione dei sistemi embedded, introducendo un approccio rivoluzionario alla prototipazione elettronica attraverso una piattaforma hardware e software completamente open source. Nato nel 2005 all’Interaction Design Institute di Ivrea, questo progetto ha democratizzato l’accesso alla programmazione dei microcontrollori, trasformando radicalmente il panorama dell’elettronica digitale.

Al cuore di ogni scheda Arduino troviamo un microcontrollore AVR, tipicamente della famiglia ATmega, che opera come unità di elaborazione centrale. L’architettura hardware è stata progettata con particolare attenzione all’interfacciamento I/O, offrendo una vasta gamma di pin digitali e analogici che supportano protocolli di comunicazione standard come UART, SPI e I2C. Questa flessibilità permette l’integrazione con un’ampia varietà di sensori e attuatori, facilitando lo sviluppo di sistemi embedded complessi.

L’ambiente di sviluppo integrato (IDE)

L’ambiente di sviluppo integrato (IDE) di Arduino merita particolare attenzione per la sua elegante implementazione. Basato su Processing, offre un framework di programmazione in C++ semplificato ma potente, strutturato attorno alle funzioni setup() e loop(). Questa architettura software permette di gestire efficacemente le routine di inizializzazione e il ciclo principale del programma, mantenendo al contempo accesso alle funzionalità avanzate del linguaggio C++.

Un aspetto particolarmente rilevante dal punto di vista ingegneristico è la gestione del real-time. A differenza di sistemi più complessi come Raspberry Pi, Arduino eccelle nelle applicazioni che richiedono temporizzazioni precise e risposte immediate agli eventi esterni. L’assenza di un sistema operativo elimina il overhead computazionale, garantendo latenze minime e predicibilità nelle operazioni di I/O, caratteristiche fondamentali per il controllo di processo e l’automazione industriale.

L’ecosistema Arduino si è evoluto includendo una vasta gamma di shield e moduli di espansione, che estendono le capacità della piattaforma base. Particolare menzione meritano le implementazioni di comunicazione wireless (WiFi, Bluetooth, LoRa) e le interfacce per motori e attuatori di potenza, che hanno aperto la strada ad applicazioni IoT e robotica avanzata.

Dal punto di vista della progettazione elettronica, Arduino ha introdotto un paradigma innovativo nella gestione dell’hardware. Gli schemi elettrici e i layout PCB sono completamente open source, permettendo analisi approfondite e ottimizzazioni. Questo approccio ha facilitato lo sviluppo di varianti specializzate per applicazioni specifiche, dalla robotica al controllo industriale.

La piattaforma continua a evolversi, con l’introduzione di nuove board basate su architetture ARM e RISC-V, mantenendo la compatibilità software ma offrendo maggiore potenza di calcolo e funzionalità avanzate. Questa evoluzione apre nuove possibilità nell’elaborazione dei segnali digitali e nell’implementazione di algoritmi complessi, mentre mantiene la semplicità e l’accessibilità che hanno reso Arduino un punto di riferimento nell’elettronica embedded.

In un’epoca dominata da dispositivi chiusi e tecnologici, Arduino ricorda il valore dell’open-source, della condivisione e della sperimentazione hands-on. Non è solo una scheda elettronica: è un movimento culturale che celebra il diritto di capire, modificare e inventare. Come disse una volta Massimo Banzi, “Arduino è un tentativo di rendere il mondo dell’elettronica più simile a quello del software: aperto, collaborativo e accessibile a tutti”. E in questo, ha davvero cambiato il gioco.

8 JavaScript Tricks per un Codice Pulito ed Efficiente

ingegnerianelweb

JavaScript è un linguaggio estremamente flessibile e in continua evoluzione. Esistono funzioni e metodi spesso poco conosciuti che possono semplificare di molto il lavoro di sviluppo. Di seguito troverai 8 trucchi utili, sintetizzati in brevi esempi di codice, che potrai subito integrare nei tuoi progetti per renderli più puliti e performanti.

1. Convertire stringhe e altri iterabili in array con Array.from()

const str = "Uvais";
const arr = Array.from(str);
console.log(arr);
// Output: ["U", "v", "a", "i", "s"]

Come funziona

  • Array.from() converte qualunque oggetto iterabile (come una stringa) in un array.
  • Questo può tornare molto utile per manipolare separatamente i caratteri di una stringa, oppure per clonare facilmente strutture simili ad array (come ad esempio gli arguments di una funzione o i nodi di un NodeList nel DOM).

2. Funzioni freccia (Arrow Functions)

function add(a, b) {
  return a + b;
}

// Versione arrow function
const addArrow = (a, b) => a + b;

Come funziona

  • Le arrow functions semplificano la sintassi delle funzioni in JavaScript.
  • Quando il corpo della funzione è una singola espressione che ritorna un valore, non c’è bisogno di scrivere la parola chiave return.
  • Attenzione: le arrow function ereditano il this dal contesto lessicale esterno e non possiedono un proprio this. È quindi importante conoscerne i pro e i contro rispetto alle funzioni tradizionali.

3. Visualizzare i dati in forma tabellare con console.table()

const person = {
  name: "John",
  age: 25,
  profession: "Programmer"
};

console.table(person);

Come funziona

  • Se vuoi mostrare i dati in forma tabellare nella console del browser (o di Node.js), console.table() è la soluzione ideale.
  • Invece di stampare semplici righe di testo, otterrai una tabella con intestazioni e valori, utile per analizzare meglio gli oggetti o gli array.

4. Svuotare rapidamente un array impostando la length a 0

let numbers = [1, 2, 3, 4, 5, 6];
numbers.length = 0;
console.log(numbers);
// Output: []

Come funziona

  • In JavaScript, la proprietà length di un array è modificabile.
  • Impostare numbers.length = 0; è un modo veloce per svuotare completamente l’array senza dover usare altri metodi come splice() o ricreare l’array.
  • È una tecnica semplice e pulita, soprattutto quando vuoi resettare una lista di dati.

5. Convertire stringhe JSON in oggetti JavaScript con JSON.parse()

const jsonStr = '{"name": "John", "age": 25}';
const person = JSON.parse(jsonStr);
console.log(person);
// Output: { name: 'John', age: 25 }

Come funziona

  • JSON.parse() trasforma una stringa in formato JSON in un oggetto JavaScript.
  • Questo è essenziale quando si ricevono dati da un’API o da un file JSON, e si vuole poi manipolarli nel proprio codice in modo nativo.

6. Trasformare gli elementi di un array con map()

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);

console.log(numbers);  // [1, 2, 3, 4]
console.log(doubled);  // [2, 4, 6, 8]

Come funziona

  • Il metodo map() crea un nuovo array trasformando gli elementi in base a una funzione di callback.
  • A differenza di forEach(), map() restituisce un nuovo array senza modificare l’originale. Ciò favorisce la immutabilità dei dati, un concetto molto importante in alcune architetture e librerie (come React).

7. Rimuovere duplicati in un array con Set

const arrayDupli = [1, 12, 2, 13, 4, 4, 13, 12, 11];
const mainArr = [...new Set(arrayDupli)];
console.log(mainArr);
// Output: [1, 12, 2, 13, 4, 11]

Come funziona

  • Creando un Set a partire da un array, i duplicati vengono eliminati automaticamente, perché un Set non può contenere valori ripetuti.
  • L’uso dell’operatore spread [...new Set(arrayDupli)] permette di riconvertire il Set in un array normale, ora privo di duplicati.

8. Scambiare valori di due variabili con la destrutturazione

let x = 7, y = 13;
[x, y] = [y, x];
console.log(x, y); 
// Output: 13 7

Come funziona

  • La destrutturazione di array in JavaScript permette di estrarre valori in modo rapido.
  • In questo esempio, [x, y] = [y, x] scambia i valori delle variabili senza bisogno di variabili temporanee o di altre righe di codice.
  • È una soluzione più pulita e leggibile rispetto al tradizionale swap con una variabile di appoggio.

Creare Layout Moderni con CSS Grid: Guida Completa

ingegnerianelweb

CSS Grid è un sistema di layout potente e flessibile che permette di creare griglie bidimensionali, organizzando i contenuti su righe e colonne. È particolarmente utile quando si desidera disporre sezioni come header, aside, content e footer in modo elegante e responsivo.

Nell’immagine di esempio, vediamo un layout con:

  • Header in alto,
  • Sidebar e Content affiancati al centro,
  • Footer in basso.

Vediamo come replicare lo stesso risultato con HTML e CSS Grid.

Il markup (HTML)

Creiamo una struttura semantica semplice, utilizzando il tag <main> per contenere tutti gli elementi principali:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8" />
  <title>CSS Grid Esempio</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <main>
    <header>Header</header>
    <article>Content</article>
    <aside>Sidebar</aside>
    <footer>Footer</footer>
  </main>

</body>
</html>
  • <header>, <article>, <aside> e <footer> sono tag HTML semantici: descrivono con chiarezza il ruolo di ciascun blocco nel layout.
  • Tutto è racchiuso nel <main>, che utilizzeremo come container della griglia.

Il foglio di stile (CSS)

Nel file style.css, imposteremo il layout a griglia e definiremo come gli elementi verranno posizionati:

/* Diamo uno stile di base alla pagina (non indispensabile ma aiuta la leggibilità) */
body {
  margin: 0;
  font-family: sans-serif;
}

/* Contenitore principale */
main {
  display: grid;                             /* Attiva CSS Grid */
  grid-template-areas: 
    "head head head"                         /* RIGA 1: tre celle, tutte 'head' */
    "side content content"                   /* RIGA 2: 'side' + 'content' + 'content' */
    "foot foot foot";                        /* RIGA 3: tre celle, tutte 'foot' */
  
  grid-template-rows: 50px auto 50px;        /* Altezza delle righe */
  /* Se desideri un layout più complesso, puoi specificare anche le colonne:
     grid-template-columns: 1fr 2fr 1fr; 
     (Esempio con una colonna più stretta per la sidebar e due più ampie) */
}

/* Assegnazione delle aree alle singole sezioni */
header {
  grid-area: head;   /* Il tag <header> occuperà l'area definita come 'head' */
}
article {
  grid-area: content;/* Il tag <article> occuperà l'area definita come 'content' */
}
aside {
  grid-area: side;   /* Il tag <aside> occuperà l'area definita come 'side' */
}
footer {
  grid-area: foot;   /* Il tag <footer> occuperà l'area definita come 'foot' */
}

/* Stili di base per distinguere le sezioni */
header, article, aside, footer {
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #ffffff;
}

header {
  background-color: #f39c12; /* Arancione */
}
article {
  background-color: #3498db; /* Blu */
}
aside {
  background-color: #2ecc71; /* Verde */
}
footer {
  background-color: #95a5a6; /* Grigio */
}

Spiegazione del CSS

  1. display: grid;
    Abilita la modalità a griglia sul contenitore <main>.
  2. grid-template-areas
    Definisce il layout riga per riga, stabilendo i nomi delle aree in cui le celle di griglia verranno suddivise.
    • RIGA 1: "head head head"
    • RIGA 2: "side content content"
    • RIGA 3: "foot foot foot"
  3. grid-template-rows
    Specifica le altezze delle righe: 50px per la prima, auto per la seconda (in modo che si adatti al contenuto), e 50px per la terza.
  4. (Opzionale) grid-template-columns
    Puoi specificare anche quante colonne e le loro dimensioni (es. 1fr 2fr 1fr) se desideri un maggiore controllo sulle larghezze.
  5. grid-area
    All’interno di <header>, <article>, <aside>, <footer> utilizziamo grid-area: nomeArea; per assegnare ciascun elemento alla sua area corrispondente definita in grid-template-areas.
  6. Stili di base
    • Aggiunti bordi, colori di sfondo e centrature per distinguere visivamente le varie sezioni.

Background Position in CSS: Guida Rapida

ingegnerianelweb
laptop with code

Quando si lavora con le immagini di sfondo in CSS, uno degli aspetti più importanti è il loro posizionamento all’interno dell’elemento che le contiene. La proprietà background-position ci permette proprio di regolare l’allineamento orizzontale e verticale dell’immagine di sfondo.

Nell’esempio mostrato in figura, abbiamo un contenitore di classe .bg-example al cui interno viene applicata un’immagine di sfondo. Vedremo come impostare il codice e quali valori utilizzare per ottenere posizionamenti diversi (come left top, center center, 10% 80%, ecc.).

Il markup di base (HTML)

Per prima cosa, ipotizziamo di avere un semplice file HTML in cui inseriamo un contenitore che utilizzerà l’immagine di sfondo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8" />
  <title>Background Position - Esempio</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="bg-example">
    <!-- Questo div avrà l’immagine di sfondo impostata via CSS -->
  </div>
  
</body>
</html>

Il file CSS (style.css)

Nel file style.css definiremo la classe .bg-example che conterrà tutte le regole per la gestione dell’immagine di sfondo:

.bg-example {
  background-image: url("/img/css/stella.jpg"); /* Percorso dell’immagine */
  background-repeat: no-repeat;                 /* Evita la ripetizione dell'immagine */
  background-position: left top;                /* Valore iniziale di esempio */
  height: 350px;                                /* Altezza fissa per mostrare l'immagine */
}

1. background-image

  • Utilizziamo background-image per assegnare l’URL dell’immagine che vogliamo usare come sfondo.
  • La sintassi è:
background-image: url("percorso/della/tua/immagine.jpg");

2. background-repeat

  • Con background-repeat: no-repeat; l’immagine non viene ripetuta in orizzontale o in verticale.
  • Se omettessimo questa proprietà, di default l’immagine verrebbe ripetuta a mosaico.

3. background-position

  • Questa è la proprietà principale per il posizionamento.
  • Accetta due valori (orizzontale e verticale), che possono essere:
    • Parole chiave: left, right, top, bottom, center.
    • Valori percentuali: 10% 80% (il primo valore si riferisce all’asse orizzontale, il secondo all’asse verticale).
    • Valori in unità fisse: ad esempio, 50px 100px.

Valori comuni

Nell’immagine di esempio sono mostrati questi valori:

  • left top (sinistra in alto)
  • left center (sinistra al centro verticale)
  • left bottom (sinistra in basso)
  • right top (destra in alto)
  • right center (destra al centro verticale)
  • right bottom (destra in basso)
  • center top (centrato orizzontalmente in alto)
  • center center (centrato orizzontalmente e verticalmente)
  • center bottom (centrato orizzontalmente in basso)
  • 10% 80% (posizionamento personalizzato: 10% dallo spigolo sinistro, 80% dallo spigolo superiore)

Esempi di codice:

/* Sinistra in alto */
.bg-example {
  background-image: url("/img/css/stella.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  height: 350px;
}

/* Destra al centro verticale */
.bg-example {
  background-image: url("/img/css/stella.jpg");
  background-repeat: no-repeat;
  background-position: right center;
  height: 350px;
}

/* Centra orizzontalmente e verticalmente */
.bg-example {
  background-image: url("/img/css/stella.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  height: 350px;
}

/* Valori percentuali personalizzati */
.bg-example {
  background-image: url("/img/css/stella.jpg");
  background-repeat: no-repeat;
  background-position: 10% 80%;
  height: 350px;
}

Naturalmente, non potrai scrivere tutte queste regole contemporaneamente per la stessa classe .bg-example; normalmente ne usi solo una a seconda del risultato che vuoi ottenere. In uno scenario reale, potresti creare diverse classi per ognuno di questi posizionamenti, oppure modificare il valore di background-position dinamicamente tramite JavaScript o con classi CSS alternative.

Spiegazione del posizionamento personalizzato

Prendiamo l’esempio background-position: 10% 80%;. Cosa significa?

  • 10% indica che il punto di riferimento orizzontale dell’immagine di sfondo è spostato verso destra del 10% rispetto al contenitore.
  • 80% indica che il punto di riferimento verticale dell’immagine di sfondo è spostato verso il basso dell’80% rispetto al contenitore.

In questo modo, hai un controllo più fine rispetto alle parole chiave come left, center o right.