A.S. 2018-2019

Istituto di Istruzione Superiore G. Marconi

TPSI

Benvenuti ragazzi!

Questo materiale riepiloga quanto detto a lezione negli scorsi giorni.

Le risposte alle domande dei compiti in classe sono tutte incluse in questo materiale.

I riferimenti al libro di testo sono tra parentesi quadre, come ad esempio [pag. 1].

Il testo in questi box sono per approfondimento. La lettura di questo materiale non è strettamente necessaria per le verifiche, ma è consigliata per vostra cultura personale e in quanto sapere indispensabile per chi vuole diventare un informatico.

Buon studio e buon lavoro.

Il World Wide Web è nato nel 1989 sotto la guida del londinese Tim Burners-Lee: una rete di pagine di testo collegate tra di loro. La sintassi utilizzata per scrivere queste pagine è l'HTML, che trova una sua prima definizione standard nel 1991.

Nel 1994 Tim Burners-Lee fonda il w3consortium (w3c) con lo scopo di standardizzare le nuove tecnologie emergenti per il World Wide Web. Gli standard per HTML continuano fino al 2001, quando differenti opinioni si scontrano: da una parte w3c propendeva per lo standard XHTML, dall'altra un gruppo di persone ed aziende stava proponendo uno standard chiamato HTML5 e formato da 3 elementi: HTML+CSS+JS. La diatriba si concluderà nel 2014 con la pubblicazione dello standard HTML5 da parte del w3c.

Lo standard HTML5 si basa su tre tecnologie fondamentali:

• le pagine html, che definiscono la struttura della pagina
• i fogli di stile css, che definiscono come la pagina deve essere visualizzata
• i file js, ovvero JavaScript, che definiscono il comportamento dinamico del sito

Per ora concentriamoci sui primi due: HTML e CSS. Di seguito i punti su cui consiglio di prestare maggiore attenzione, con i relativi link su w3school o altri siti di riferimento.

Importanti:

• elementi block e inline
• layout
• liste
• come collegare i fogli di stile

Approfondimenti:

• responsive web design

Importanti:

• sintassi e selettori CSS
• box model

Approfondimenti:

• layout inline-block
• proprietà display e visibilità
• flexbox
• responsive tables (vari articoli, fatevi una cultura)
• transition basics
• transitions vs animations

Altri link interessanti:

• csszengarden: esempi di come può cambiare la stessa pagina HTML con differenti CSS
• uplabs: sito dove potete trovare molti esempi di layout

Importanti:

• Code conventions

Tutta la storia del web ebbe inizio con delle pagine rappresentate da un singolo file con estensione .html che comprendeva tutte le informazioni necessarie per visualizzare la pagina. All'inizio, nei primi anni '90 del secolo scorso, le pagine erano statiche e lo stile per visualizzare gli elementi non era distinto dalle altre informazioni della pagina.

Tim Berners Lee dal 1989 al 1993 lavorò in team per proporre le nuove tecnologie web come uno standard di Internet, e finalmente nel 1993 divenne a tutti gli effetti uno standard IETF (Internet Engineering Task Force).

Le versioni dello standard si sono succedute velocemente fino alla versione 4.01 del 2001, dove viene separato il contenuto HTML dallo stile CSS, ma ancora non è chiaro come rendere dinamiche le pagine.

Diverse grandi aziende, tra cui Apple, Mozilla, Opera e Google, non erano d'accordo con le decisioni del w3c e fondarono un nuovo gruppo di lavoro chiamato WYSIWYG (Web Hypertext Application Technology Working Group). Cominciò così la cosidetta "guerra dei browser", con diversi standard in competizione. Questa guerra finì nel 2014, anno in cui il w3c pubblico lo standard proposto dal WYSIWYG e che fu chiamato HTML5, che aggrega fondamentalemente le tre tecnologie HTML, CSS e JS.

Oggi ognuna di queste tre tecnologie ha un'evoluzione propria con una diversa numerazione degli standard che le caratterizzano. In particolare, in questo momento (aprile 2019) gli ultimi standard sono:

• HTML 5.2 (2017)
• CSS 3 (2014)
• ES8 (2017) per JavaScript

Immaginiamo che il reparto di design ci abbia consegnato questo visual da realizzare:

Inoltre ci ha fornito inoltre gli artefatti grafici qui di seguito:

In un contesto reale il reparto design potrebbe (auspicabile, ma non è detto) averci fornito anche le distanze in pixel o percentuale tra i vari elementi, ma in questo caso li deduciamo direttamente dal visual.

È fortemente consigliato di provare prima ad implementare da soli l'HTML e il CSS, e poi vedere l'implementazione proposta qui. Non c'è una implementazione giusta o sbagliata in assoluto, l'importante è che rispetti il visual e sia quanto più possibile "pulita" e facile da rendere responsive. Nota: per salvare gli artefatti grafici, cliccate con il tasto destro e premere salva.

Quando avete finito o se volete vedere subito la soluzione...cominciamo!

Possiamo implementare questa lista in vari modi. Ad esempio:

• con i tag <ul> e <li>: in questo caso definiamo le varie righe come elementi di una lista
• con i tag <table>: da evitare, perché sarebbe difficile da gestire in maniera responsive
• con le proprietà CSS display: table-*: usiamo solo il tag div nell'HTML e definiamo il layout nel CSS.

Proviamo la terza strada, perché molto usata e ci permette di impratichirci sia con l'HTML che con il CSS.

Dobbiamo quindi dividere il visual in vari elementi, in accordo con le proprietà display:table-*. Per riferimento guardate qui.

Ora scriviamo l'HTML e agganciamo le classi che andremo a definire nel foglio di stile.

Per prima cosa definiamo il <div> per l'intera tabella:

<div class="table">
 <!-- la tabella qui -->
</div>

Notare che il nome table assegnato alla classe è a nostra discrezione. Ci serve per poter in seguito agganciare il CSS.

Aggiungiamo due righe della tabella, la prima per l'intestazione e la seconda per la prima riga del corpo. Le altre righe del corpo sono del tutto identiche, basterà fare copia-incolla.

<div class="table">
  <div class="tablerow">
      <!-- mettere intestazione tabella qui -->
  </div>
  <div class="tablerow">
      <!-- mettere prima riga del corpo tabella qui -->
  </div>

</div>

Riempiamo ora la riga di intestazione:

<div class="table">
  <div class="tablerow">
      <div class="tablehead">WHEN & WHAT</div>
      <div class="tablehead">WHERE</div>
      <div class="tablehead">OWNER</div>
      <div class="tablehead">ME</div>
  </div>
  <div class="tablerow">
      <!-- mettere corpo tabella qui -->
  </div>
</div>

Anche qui tablehead è un nome che abbiamo scelto noi. Notare che abbiamo definito una classe specifica per le celle dell'header perché avranno uno stile diverso rispetto a quelle del corpo.

Ora aggiungiamo le quattro celle per la riga del corpo della tabella. Per ora le creaimo vuote:

<div class="table">
    <div class="tablerow">
        <div class="tablehead">WHEN & WHAT</div>
        <div class="tablehead">WHERE</div>
        <div class="tablehead">OWNER</div>
        <div class="tablehead">ME</div>
    </div>
    <div class="tablerow">
        <div class="tablecell">
            <!-- mettere contenuto cella -->
        </div>
        <div class="tablecell">
            <!-- mettere contenuto cella -->
        </div>
        <div class="tablecell">
            <!-- mettere contenuto cella -->
        </div>
        <div class="tablecell">
            <!-- mettere contenuto cella -->
        </div>
        </div>
    </div>
</div>

Ora dobbiamo riempire ognuna delle quattro celle, con il contenuto ed il layout corretto.

Cominciamo con la prima cella, la dividiamo nei seguenti <div>, con le relative classi:

L'implementazione in HTML sarà la seguente:

<div class="date">25<br><span class="month">DEC</span></div>
<div class="datename">Christmas Dinner<br>
    <img src="img/clockblack.png" class="iconclock">
    <div class="hour">8:30 pm</div>
</div>

Ragionando in maniera del tutto analoga anche per le altre celle, otteniamo il seguente codice HTML dell'intera riga:

<div class="table">
    <div class="tablerow">
        <div class="tablehead">WHEN & WHAT</div>
        <div class="tablehead">WHERE</div>
        <div class="tablehead">OWNER</div>
        <div class="tablehead">ME</div>
    </div>
    <div class="tablerow">
        <div class="tablecell">
            <div class="date">25<br><span class="month">DEC</span></div>
            <div class="datename">Christmas Dinner<br>
                <img src="img/clockblack.png" class="iconclock">
                <div class="hour">8:30 pm</div>
            </div>
        </div>
        <div class="tablecell"><img src="img/locationsmall.png" class="iconlocation">
            <div class="locationname">Family House<br><span class="address">24th Ave, New York</span></div>
        </div>
        <div class="tablecell"><img src="img/avatar1.png" class="avatar">
            <div class="name">Manuel Smith</div>
        </div>
        <div class="tablecell"><img src="img/checkblue.png" class="iconcheck">
            <div class="answer">I AM GOING</div>
        </div>
    </div>
</div>

Questa pagina renderizzata (ovvero aperta in un browser) appare così:

Bene, c'è tutto!

Ma perché gli elementi vengono visualizzati tutti uno sotto l'altro? Questo dipende dal fatto che abbiamo usato i tag <div> che sono di tipo block, che per definizione partono sempre da una nuova riga e occupano tutta la larghezza possibile. Per vedere gli ingombri "dal vero" possiamo aprire i developer tools di Firefox, Chrome o Safari e selezionare un elemento, per esaminare lo spazio occupato dal suo box.

Ad esempio, in questa immagine abbiamo selezionato la cella "WHERE" con i developers tool di Firefox Quantum.

Come facciamo ad ottenere il layout corretto? Useremo delle proprietà CSS che vedremo tra poco.

Qui potete trovare una versione modificabile online della nostra pagina HTML, per studiare e sperimentare il codice HTML.

L'HTML è fin da subito nato come uno standard aperto: questo all'inizio ha creato delle difficoltà, ma con il passare del tempo si è rivelato un aspetto vincente.

La definizione del CSS è un tipico esempio di quanto detto. Nei primi anni di diffusione (1993-1996) le diverse aziende concorrenti che hanno creato i primi browser (Netscape e Internet Explorer in particolare) crearono delle estensioni proprietarie dell'HTML con l'aggiunta di confusione e difficoltà per gli sviluppatori. Il w3c decise quindi di affrontare questo problema creando un gruppo di lavoro che produsse uno standard nel 1996 chiamato Cascading Style Sheet (CSS).

Questa divisione si rivelò estremamente efficace per risolvere i problemi che si sono posti con il passare degli anni. In particolare, riuscì in modo eccellente a risolvere il problema della diversa dimensione degli schermi dei palmari prima e degli smartphone poi.

Oggi CSS include moltissime funzionalità che permettono l'animazione degli elementi nelle pagine, le trasformazioni (es. rotazione, scalatura), i gradienti e molte altre cose.

Il CSS si basa su questi due passaggi:

1. selezionare gli elementi a cui si vuole applicare un certo stile
2. dichiarare le proprietà da applicare a quegli elementi.

I selettori di base sono di 3 tipi:

• tag: non hanno nessun prefisso, selezionano tutti gli elementi con il tag selezionato. Ad esempio div {background-color:red} colora di rosso lo sfondo di tutti gli elementi con il tag div
• id: ha come prefisso # (cancelletto), seleziona l'elemento che ha come attributo id il valore specificato. Ad esempio #my-title {font-weight:bold} rende grassetto l'elemento che ha come attributo id="my-title"
• class: ha come prefisso . (punto), seleziona tutti gli elementi che hanno come attributo il valore specificato. Ad esempio .small-images {width=5%} imposta la larghezza di tutti gli elementi che hanno come attributo class="small-images al 5% della larghezza dello schermo.

Un altro concetto fondamentale del CSS è che la pagina è come se fosse uno scaffale, in cui ogni elemento è una scatola (box). La scatola è composta dalla confezione (border), al cui interno c'è un contenuto (content) protetto dall'imballaggio (padding). Le scatole sono distanziate l'una dall'altra da un margine di spazio (margin).

Ricapitolando, la nomenclatura del box-model utilizzato da CSS è:

• box: ogni elemento della nostra pagina
• content: il contenuto vero e proprio, ad esempio il testo, l'immagine o altri elementi annidati
• padding: l'imballaggio, sta all'interno della nostra scatola, quindi coprirà anche l'eventuale colore o immagine di sfondo
• border: la confezione, ovvero il rettangolo che include padding e contenuto
• margin: il margine tra una scatola e l'altra

Fate attenzione che i margini tra due elementi si sommano: quindi se un elemento ha margine destro pari a 10px, e il successivo ha margine sinistro pari a 15px, il margine totale sarà 25px.

Creiamo il nostro foglio di stile e lo chiamiamo style.css. Lo linkiamo alla pagina HTML inserendo all'interno del tag <head> questa riga:

<link rel="stylesheet" href="style.css">

In VSCode, digitando link:css, si avvia l'autocompletamento.

In questo caso non avrebbe senso mettere lo stile inline perché dovremmo ripeterlo per ogni tag di riga e cella. Avremmo potuto mettere lo stile in testa alla pagina, ma è buona norma metterlo in un file separato, per poterlo gestire più facilmente.

Apriamo il nostro foglio di stile e cominciamo a scaldarci. Per prima cosa, cambiamo il font di default a tutta la pagina, usando il selettore universale asterisco:

* {
    font-family: Arial, Helvetica, sans-serif
}

In VSCode, digitando font-family, si avvia l'autocompletamento di tutta la riga, compresi i valori della proprietà.

Aggiorniamo la pagina e vediamo se è cambiato qualcosa:

Wow, il font è cambiato davvero :)

Ora creiamo lo scheletro del nostro CSS in accordo con le classi che abbiamo definito nell'HTML:

* {
    font-family: Arial, Helvetica, sans-serif
}

.table {

}

.tablerow {

}

.tablehead {

}

.date {

}

.hour {

}

.month {

}

.datename {

}

.locationname {

}

.avatar {

}

.iconclock {

}

.iconlocation {

}

.iconcheck {

}

.address {

}

.name {

}

.answer {

}

Per prima cosa inseriamo le proprietà display, per creare la tabella:

.table {
    display: table;
}

.tablerow {
    display: table-row;
}

.tablehead {
    display: table-cell;
}

.tablecell {
    display: table-cell;
}

Che viene renderizzato così:

OK, abbiamo una disposizione a tabella. Ora dobbiamo lavorare sulle singole classi per adattare lo stile.

Per prima cosa lavoriamo sulla classe .table: vogliamo che occupi tutto lo spazio disponibile, quindi aggiungiamo la proprietà width: 100%.

.table {
    display: table;
    width: 100%;
}

Ora lavoriamo sull'header. Vogliamo che:

• ci sia una linea continua sotto, di color grigio chiaro (border-bottom)
• il testo sia leggermente spostato in alto rispetto al bordo (padding)
• il carattere sia di 8 punti e grassetto (font-size e font-weight)

Aggiungiamo le proprietà per queste modifiche:

.tablehead {
    display: table-cell;
    border-bottom: 1px solid lightgrey;
    padding: 0 0 1% 0;
    font-size: 8pt;
    font-weight: bolder;
}

Attenzione al campo padding: come per tutte le proprietà del box model, se si specificano quattro valori vengono interpretati come:

Ed ecco il risultato:

Lavoriamo sulle celle del corpo della tabella. Vogliamo che tutte le celle di default abbiano le seguenti caratteristiche:

• un po' di padding in alto ed in basso
• il carattere di 8 punti e grassetto
• allineamento verticale in alto, invece del default in basso (vertical-align)

.tablecell {
    display: table-cell;
    padding: 1% 0 1% 0;
    font-size: 8pt;
    font-weight: bold;
    vertical-align: top;
}

Ora lavoriamo sulla prima cella. Come abbiamo visto prima, questa cella è divisa in due parti: la data a sinistra e i dettagli a destra.

Per il <div> della data, dobbiamo fare le seguenti cose:

• il campo data deve essere un quadrato (width e heigth) con i bordi arrotondati (border-radius)
• lo sfondo blu (background) e cambiamo anche il colore del testo (color)
• il font di dimensione 12 punti e grassetto, centrato (text-align)
• un po' di padding in tutte e quattro le direzioni
• un po' di margine solo a destra (margin-right)

.date {
    width: 40px;
    height: 40px;
    border-radius: 3px;
    background: #5c00ff;
    color: #00fdff;
    font-size: 12pt;
    font-weight: bolder;
    text-align: center;
    padding: 2%;
    margin-right: 5%;
}

Uhm...la data è OK ma il testo dovrebbe stare a destra, invece che sotto. Per risolvere questo problema possiamo usare la proprietà CSS float, che imposta il blocco in modo che deve flottare e non occupare tutta la larghezza disponibile nella pagina. Nel nostro caso il blocco <div> deve flottare a sinistra, quindi usiamo la prorietà float con valore left:

.date {
    ...
    float:left;
}

Hooray! Prima di andare avanti però attenzione: la proprietà float ha un effetto che si propaga a tutti gli elementi che ha accanto ed in cui è contenuto, e questo può avere degli effetti indesiderati. È buona norma quindi interrompere la propagazione da qualche parte con la proprietà clear:both: noi la aggiungiamo alla classe .tablecell.

.tablecell {
    ...
    clear: both;
}

A questo punto abbiamo tutti i pezzi che ci servono, ci rimane solo da aggiungere le proprietà giuste nel posto giusto. Il risutato finale è questo.

* {
    font-family: Arial, Helvetica, sans-serif
}

.table {
    display: table;
    width: 100%;
}

.tablerow {
    display: table-row;
}

.tablehead {
    display: table-cell;
    border-bottom: 1px solid lightgrey;
    padding: 0 0 1% 0;
    font-size: 8pt;
    font-weight: bolder;

}

.tablecell {
    display: table-cell;
    padding: 1% 0 1% 0;
    font-size: 8pt;
    font-weight: bold;
    vertical-align: top;
    clear: both;
}

.date {
    width: 40px;
    height: 40px;
    border-radius: 3px;
    background: #5c00ff;
    color: #00fdff;
    font-size: 12pt;
    font-weight: bolder;
    text-align: center;
    padding: 2%;
    float: left;
    margin-right: 5%;
}

.hour {
    color: #161616;
    font-size: 7pt;
    margin: 5px 0 0 5px;
    float: left;
}
.month {
    font-size: 9pt;
    font-weight: bold;
}

.datename {
    float: left;
    margin-top: 12px;
    color: #5c00ff;
}

.locationname {
    font-size:7pt;
    margin:13px 0 0 20px;
}

.avatar {
    width:32px;
    height:32px;
    border-radius:100px;
    float:left;
    margin-top:10px;
}

.iconclock {
    float: left;
    margin-top: 2px;
}

.iconlocation {
    float:left;
    margin-top:13px;
}

.iconcheck {
    float:left;
    margin-top:18px;
}

.address {
    font-size:6.5pt;
    color:grey;
}

.name {
    margin:22px 0 0 40px;
    font-size:6.5pt;
}

.answer {
    color: #5c00ff;
    margin:20px 0 0 22px;
}

Che ci porta a questo risultato:

Era proprio quello che volevamo :D

Adesso avete tutte le basi che vi servono per realizzare le vostre pagine. Buon lavoro.

Qui potrete trovare la versione live della nostra pagina, completa di HTML e CSS.

La pagina fin qui creata è statica, ovvero i dati degli eventi sono scritti in maniera fissa, non modificabile, all'interno del file HTML. Chiaramente non è quello che vogliamo, perché il nostro obiettivo è che ogni volta che l'utente apre la pagina, gli mostri gli eventi aggiornati in quel momento: vogliamo una pagina dinamica. Per fare questo ci serve l'ultimo componente di HTML5: JavaScript.

JavaScript è nato all'interno della Netscape, la società americana che sviluppò nel 1993 il primo web browser grafico di larga diffusione (ricordiamo che il web è nato nel 1989 in Europa). Nel 1995 cercavano una tecnologia per rendere dinamiche le pagine web, e diedero l'incarico al neo-assunto Bernard Eich di creare un linguaggio di programmazione per competere con i rivali (Java e Microsoft). Gli diedero 10 giorni di tempo, nel maggio 1995.

Eich riuscì nell'impresa e creò il linguaggio JavaScript, definito nel suo annuncio ufficiale come "open, cross-platform object scripting language" che avrebbe dovuto "complementare il linguaggio Java".

Sembra che il prefisso Java sia stato scelto intenzionalmente per creare confusione e per scherzo. In ogni caso la Sun Microsystem, che deteneva i diritti di Java a quel tempo, non protestò, e cosi è rimasto questo nome.

Da allora il linguaggio è cresciuto in funzionalità e diffusione, fino ad arrivare nel 2019 ad essere tra i 10 linguaggi più usati al mondo, in continua crescita. La sua vitalità è testimoniata dagli standard in continuo aggiornamento. Le funzionalità di JavaScript sono infatti definite e standardizzate dalla ECMA (European Computer Manufacturers Association), con sede a Ginevra. L'ultima versione dello standard JavaScript si chiama ES2017 (anche detto ES8, giusto per creare un po' più di confusione).

La nascita un po' casuale di questo linguaggio è uno dei motivi per cui molte cose in JavaScript non hanno una ragione particolare, almeno nella versione classica (fino allo standard ES5 del 2009).

Inoltre, JavaScript lascia molta libertà agli sviluppatori di decidere il loro stile di programmazione. Questo fa sì che, senza delle linee guida condivise tra sviluppatori, il codice scritto da persone diverse finisce per essere incompatibile o incomprensibile. Per evitare il problema, è necessario scegliere una linea guida comune. Ne esistono molte, io personalmente suggerisco questa di Douglas Crockford, semplice ma completa.

Cominciamo creando un file nella stessa cartella dell'index, e lo chiamiamo app.js. Per fare una prova, per ora mettiamo solo la visualizzazione di un pop-up, che in JavaScript si ottiene con la funzione alert().

alert("JS test");

Se proviamo ora ad aggiornare la nostra pagina, non succede niente. Perché?

Come abbiamo detto, tutto parte sempre dall'HTML. Il nostro browser comincia a leggere il file HTML che abbiamo indicato con l'URL nella barra di navigazione, e riga dopo riga interpreta quello che c'è scritto. Dobbiamo quindi mettere nel nostro index.html l'istruzione per dirgli di andare a leggere il file.

Il tag necessario per questa operazione è <script>, a cui bisogna specificare come attributo il nome del file che vogliamo caricare. Ecco il codice che ci serve:

<script src="app.js"></script>

Dove mettiamo questo codice? Nei testi viene suggerito di mettere il tag <script> all'interno del tag <head>, e noi seguiremo questo suggerimento. Ma attenzione: di default il browser eseguirà tutto il codice dentro il nostro script e solo dopo continuerà ad interpretare la pagina, con la conseguenza l'utente potrebbe avvertire una fastidiosa sensazione di lentezza.

Se volete evitare che la lettura dello script rallenti il caricamento della pagina, avete diverse possibilità:

• spostare il tag script alla fine della pagina, subito prima della chiusura del tag </body>, oppure
• aggiungere l'attributo "async" o "defer" al tag script, per dettagli vedi HTML script tag nella sezione "Tips and Notes"

Come sempre in VSCode, digitando script:src si avvia l'autocompletamento.

Avviando la pagina otteniamo la seguente cosa.

Bene, il file JavaScript è collegato correttamente! 🥳

Prima di andare avanti, vogliamo semplificarci un po' le cose usando una libreria molto diffusa che permette di ridurre drasticamente il codice da scrivere per eseguire operazioni comuni: jQuery.

Un'altra libreria molto usata è Lodash, che semplifica la manipolazione di array, stringhe e oggetti.

jQuery (pronuncia jeiquiri) è una delle librerie più diffuse per JavaScript, perché permette di semplificare e velocizzare operazioni che altrimenti richiederebbero un bel po' di linee di codice. Per scaricare l'ultima versione, andate sul sito ufficiale, sezione Download, e selezionate la versione "Download the compressed, production jQuery". Se volete scaricare il file, vi conviene premere con il tasto destro sul link e selezionare "Salva destinazione con nome..." o l'equivalente nel vostro broser. Come al solito, salvate il file nella stessa cartella dove si trova il file html.

Attenzione: la semplificazione offerta da jQuery non è gratis. Questa libreria è piuttosto pesante ed il browser ci metterà un po' di tempo a caricarla, con il rischio di inficiare l'esperienza utente. Quando diventerete sviluppatori front-end professionisti, dovrete fare attenzione anche a queste cose. Il codice JavaScript "puro", senza l'uso di nessuna libreria, è anche detto VanillaJS; qui trovate un sito scherzoso sull'argomento.

Colleghiamo il file nel nostro progetto, mettendo il tag script prima dell'inclusione del nostro file JavaScript. Questo è fondamentale perché, come abbiamo detto, il browser interpreta le linee in ordine, quindi è necessario prima importare jQuery, e dopo il nostro codice che dipende da questa libreria.

<script src="jquery-3.3.1.min.js"></script>
<script src="app.js"></script>

È interessante notare come non sia possibile importare una dipendenza direttamente all'interno del file JavaScript, ma bisogna passare per il file HTML.

Per risolvere questo problema, sono nati vari framework più o meno complessi che permettono di gestire le dipendenze in maniera efficente ed efficace. Chi è interessato, può ad esempio studiarsi Webpack.

Per cominciare ad usare jQuery, dobbiamo inizializzare la libreria. Andiamo sul nostro file JavaScript e aggiungiamo il seguente snippet di codice.

var init = function() {
  alert("JS test with Jquery");
}

$(document).ready(init);

Vediamo in dettaglio cosa abbiamo fatto. Partiamo dall'ultima riga.

$(document).ready(init);

Il simbolo $ è il nome della variabile oggetto messa a disposizione dalla libreria jQuery. In JavaScript infatti, il dollaro è un carattere valido per l'inizio di una nome di una variabile o funzione.

jQuery mette a disposizione solo la variabile $. Pubblicare una sola variabile è una cosa molto comune in JavaScript, come vedremo.

La variabile document è invece messa a disposizione dal browser e contiene tutte le informazioni che riguarda la pagina html e i relativi fogli di stile CSS. È il nostro punto di contatto tra l'html e gli script JavaScript.

L'espressione $(document) serve a inizializzare la libreria jQuery con il documento corrente. In questo modo inoltre jQuery prende il controllo del documento, e noi non andremo mai più ad usare la variabile document direttamente, ma passeremo sempre attraverso l'oggetto $().

Immediatamente dopo l'inizializzazione viene chiamato il metodo .ready(), che richiede come parametro una funzione. Passare come parametri funzioni è una cosa estremamente comune in JavaScript, e anche noi la useremo estensivamente. Il metodo ready invocherà la funzione passatagli come parametro, nel nostro caso init, quando il caricamento della pagina sarà completo e quindi saremo pronti per il processamento del documento.

Vediamo ora come abbiamo dichiarato la funzione init.

var init = function() {
  alert("JS test with Jquery");
}

Facciamo particolare attenzione a questa sintassi. Abbiamo dichiarato la variabile init, ed abbiamo usato l'operatore di assegnazione (il simbolo =) per assegnarli come valore una funzione. In questo modo abbiamo di fatto creato una variabile che può essere invocata come una funzione (ovvero con le parentesi tonde, init()).

La funzione dichiarata in questo modo non ha un nome suo, infatti non c'è nessun identificativo fra la keyword function e le parentesi tonde che seguono. Questo tipo di funzioni si chiamano anonime, in inglese anonymous-functions. Chi vuole approfondire può leggere questo articolo.

Se ora ricarichiamo la pagina, otteniamo un comportamento molto simile al procedente.

Prima di andare avanti, è bene impostare correttamente il file JavaScript. Questo linguaggio infatti lascia moltissima libertà ai programmatori nell'organizzazione del codice, e questa è una buona cosa perché è possibile creare librerie e framework molto potenti, ma senza un po' di disciplina si finsce con lo scrivere del codice che è completamente non mantenibile e soggetto ad infiniti tipi di bug. Rimandiamo al link all'inizio di questa pagina per una syle-guide.

Fate particolare attenzione quando copiate-incollate codice da Internet. Assicuratevi che sia scritto bene, e che segua le vostre convenzioni. Alcune stime non ufficiali dicono che l'80% del codice JavaScript reperibile su Internet è monnezza, quindi state in guardia.

Per cominciare, bisogna sapere che le variabili in JavaScript dichiarate con var hanno uno scope di funzione, ovvero sono visibili in tutta la funzione in cui sono state dichiarate, indipendentemente dal file o dal blocco in cui si trovano.

Cosa significa in pratica? Significa che i seguenti due snippet di codice sono equivalenti:

function() {
    var myName = "Harry";
    if (myName == "Harry") {
        var myFriend = "Ron";
        alert("myFriend name is "+ myFriend);
    }
}

function() {
    var myName = "Harry";
    var myFriend = "Ron";
    if (myName == "Harry") {
        alert("myFriend name is "+ myFriend);
    }
}

Come vedete, la variabile myFriend è salita fino in cima alla funzione, uscendo dallo scope dell'if da cui era definita. Questo è un comportamento inusuale, rispetto ad altri linguaggi, e potenzialmente rischioso! Infatti si rischia un conflitto di nomi tra variabili dichiarate anche lontano fra loro.

Questo comportamento si chiama hoisting. Vedi la documentazione ufficiale per dettagli.

La cosa è particolarmente pericolosa se si dichiarano variabili al di fuori di tutte le funzioni. Cosa succede in questo caso? Le variabili vanno a finire nella funzione globale del browser, che si chiama window(). Come sappiamo, le variabili globali sono estremamente pericolose perché potrebbero andare in conflitto in qualsiasi momento e in modo imprevedibile con altre variabili dichiarate chissà dove, da noi o da altre librerie.

Per evitare il più possibile di usare variabili globali, ci sono varie strategie. Noi ne useremo una semplice e molto diffusa:

• dichiariamo un unica variabile globale con lo stesso nome del file
• mettiamo tutte le variabili (stringhe, numeri, funzioni e altri oggetti) come proprietà e metodi di questo oggetto

Se avete fatto attenzione, questo è anche il metodo usato da jQuery con la sua variabile $.

Creiamo quindi il nostro oggetto globale. Per dichiarare un oggetto in JavaScript si usano le parentesi graffe. Un oggetto vuoto è quindi dichiarato così:

var app = {};

Ogni proprietà e metodo all'interno dell'oggetto viene dichiarato con la sintassi nome:valore. Se vogliamo dichiarare ed assegnare la nostra funzione init all'interno di questo oggetto, la sintassi quindi sarà la seguente.

var app = {
  init: function() {
    alert("JS test with Jquery");
  }
};

A questo punto il nostro file app.js avrà il seguente aspetto.

var app = {
  init: function() {
    alert("JS test with Jquery");
  }
};

$(document).ready(app.init);

Notiamo che all'interno del metodo ready abbiamo messo ora app.init. Questo perché la variabile init non è più visibile dallo scope gloale, e dobbiamo quindi richiamarla all'interno dell'oggetto app.

Attenzione: non confondete le notazioni app.init (senza parentesi) e app.init() (con le parentesi). La prima notazione è la variabile che contiene la funzione: quando l'usate, la funzione stessa non viene richiamata. La funzione verrà realmente chiamata solo quando il documento è effettivamente pronto. Con la notazione app.init() invece noi stiamo chiamando la funzione, e passiamo alla funzione ready il valore di ritorno della funzione app.init. Siccome nel nostro caso la funzione init non ritorna nessun valore, verrà passato il valore undefined, che è una keyword del linguaggio ed un valore speciale. Provare per credere.

Come si fa a fare il debug di una applicazione in JavaScript?

Per fortuna quasi tutti i browser (a parte Explorer) hanno degli ottimi strumenti di sviluppo.

Quindi il flusso tipico di lavoro è questo:

• scrivete il codice con l'edito che preferite (VSCode, Notepad++, etc.)
• fate il debug con gli strumenti per sviluppatori del browser

Per aprire gli strumenti sviluppatori, il modo più semplice è cliccare con il tasto destro da qualche parte nella pagina e selezionare "Analizza elemento" su Firefox, "Ispeziona" su Chrome e Safari, etc.

L'uso della funzione alert() per comunicare informazioni di debug può risultare molto scomoda perché interrompe le operazioni dell'utente. Per evitare questo problema, potete usare la funzione console.log() che stampa sulla console di debug del browser.

Ad esempio il seguente codice:

console.log("JS Test");

Risulterà nella seguente stampa di debug:

In questo capitolo vedremo i vari modi per testare e distribuire il vostro software. Per dettagli vedi questa pagina di Wikipedia.

In questo capitolo tradurremo la parola inglese "deploy" con "dislocazione".

Un'azienda invece di dislocare le proprie risorse e servizi su una macchina all'interno dei locali dell'azienda stessa, può scegliere di dislocarli su macchine non di sua proprietà posizionate da qualche parte nel mondo in dei locali insieme ad altre decine, centinaia o migliaia di macchine che servono anche altre aziende. Questi locali vengono chiamate server-farm o data center. Per farvi un'idea, potete guardare il tour virtuale dei data center di Google.

Negli ultimi anni, c'è stato un forte trend nello spostamento dei servizi da un'infrastuttura on-premises verso il cloud. Questo per diversi motivi:

• non dover gestire una infrastruttura interna, con relativo personale
• possibilità di pagare solo i servizi usati, senza costi iniziali
• rischi di perdita dati o interruzione di servizio molto bassi
• maggiore sicurezza dagli attacchi informatici

Tutto questo è reso possibile anche dalla diffusione capillare della fibra ottica in molte città del mondo.

Alcuni svantaggi invece sono legati all privacy: i dati sono fisicamente ospitati su qualche server remoto, con minor controllo sull'accesso ai dati da terze parti. Alcune leggi europee limitano l'utilizzo del cloud per alcune categorie di enti pubblici e privati, per esempio richiedendo che i data center siano risiedano sul territorio della comunità europea (in altre parole, non si possono usare data center in USA o Cina).

Anche per uso personale il cloud ormai è estremamente diffuso: pensate ad esempio a Dropbox, Google Drive, Google Docs, la web mail e servizi analoghi. Sono tutte applicazioni che conservano e gestiscono file ed informazioni in cloud.

Con l'aumentare dell'uso del cloud, i data center sono aumentati di numero e di dimensioni, e la loro gestione è diventata un problema anche dal punto di vista ambientale. Alcune stime di Nature prevedono che nel 2030 le attività legate al networking ed Internet arriveranno al 20% del consumo dotale di energia elettrica, con i data center con la percentuale maggiore.

Una parte significativa del traffico è generato da video virali, magari di pochi secondi o minuti. Pensate anche all'ambiente quando condividete sui social!

Il panorama dei gestori Cloud, come si può immaginare, è molto variegato e dinamico. Esistono comunque alcune grandi aziende che in questo momento gestiscono la maggior parte degli utenti:

• Amazon Web Service
• Google Cloud Platform
• Microsoft Azure Platform
• Alibaba Cloud

In Italia abbiamo Aruba Cloud, che fornisce servizi con particolare attenzione al rispetto delle normative europee.

Noi utilizzeremo i servizi di Amazon Web Services (abbreviato: AWS), perché è uno dei gestori più utlizzati e grazie da una convenzione, abbiamo del credito gratuito per gli studenti della nostra scuola.

Per cominciare, chiedete al docente di invitarvi ad AWS Educate, e seguite le indicazioni che vi arrivano via email.

Nel form di registrazione mettete i seguenti dati:

• Institute: Marconi Civitavecchia
• Level: Graduate
• Graduation Date: il mese (nel futuro) in cui prevedete di diplomarvi

Una volta completata la registrazione, aprire AWS Educate e fare il login.

Dopo aver fatto il login, nella pagina che vi si presenta selezionare "Go to Classroom" e quindi la propria classe.

Dopo un paio di click si dovrebbe aprire una pagina di Vocareum, dove potete vedere il vostro credito residuo. Cliccate sul bottone AWS Console.

Ora vi ritrovate in una console reale di AWS! Ricordatevi di rimanere sempre in Virginia Settetrionale, altrimenti il vostro credito non funzionerà.

Dalla lista dei servizi in alto, selezionate EC2. Nella pagina che si apre, selezionate il bottone blu per lanciare una nuova istanza. Lasciate tutto di default: Linux Amazon 2 AMI su x86 a 64bit, e t2.micro.

Generate una nuova chiave privata quando richiesto. ATTENZIONE! mettete la chiave privata in un luogo sicuro, per esempio inviatevela per posta o copiatela su una chiavetta. Se perdete il file, non potrete più accedere alla vostra istanza; se qualcuno entra in possesso del file, potrà entrare e modificare la vostra istanza cloud.

Una volta lanciata l'istanza, andate nella lista delle istanze, premete su "Connect", lasciate il default "A standalone SSH client". Come SSH Client, Amazon (e anche io) per Windows consiglia Git Bash, che avete già installato. PuTTY è supportato ma più difficile da configurare e far funzionare. Seguite le indicazioni per accedere e finalmente vi troverete dentro la vostra macchina remota!

Queste operazioni vanno fatto solo la prima volta.

Dal terminale sulla macchina remota, lanciate i seguenti comandi.

sudo yum update -y

# install docker and docker-compose
sudo yum install docker -y
sudo groupadd docker
sudo usermod -aG docker $USER # logout per avere effetto
sudo systemctl start docker
sudo curl -L "https://github.com/docker/compose/releases/download/1.23.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
docker-compose --version

# install git
sudo yum install git -y

Uscire con ctrl-D e rientrare per fare in modo che tutte le modifiche abbiano effetto.

Ora ci manca un ultimo passo per poter accedere da remoto alla nostra macchina: aprire la porta http.

Riferimenti:

• Docker
• Docker compose

Di default, l'unica porta aperta su un'istanza appena creata è la 22 per la connessione SSH. Se vogliamo poter accedere via browser, ci serve aprire anche le porte per l'accesso HTTP. Anche queste operazioni vanno fatte una sola volta per ogni istanza.

Andare sulla lista delle istanze, scorrere a destra finché non si arriva alla colonna "Security Group" e selezionare il link "launch-wizard-1". Nella finestra che si apre cliccare sul bottone "Actions"->"Edit inbound rules" e quindi "Add rule". Selezionare come tipo "HTTP" e come valore della porta mettete quella del vostro sito. Per sapere il numero di porta esatto, consultate il vostro file docker-compose.yml: è quel numero che va da 8080 a 8089.

A questo punto la nostra istanza è pronta per il deploy. Le istruzioni sono le stesse del deployment locale, che riassumo di seguito. Ricordatevi di sostituire l'URL del repository con il vostro.

# we are on the remote instance
git clone <URL-del-vostro-repository-su-github>
cd <cartella-del-progetto-appena-scaricata>
docker-compose up

Fatto, la macchina è pronta!

Ora siamo pronti per accedere alla pagina web della nostra istanza dal browser. Tornate sulla lista delle istanze e nei dettagli sotto, copiate il "Public DNS" e copiatelo sul vostro browser. Ricordatevi di aggiungere la porta. Il link risultante dovrebbe essere una cosa di questo genere:

ec2-18-215-229-80.compute-1.amazonaws.com:8080

Se tutto va bene, vedrete la vostra pagina in cloud. Complimenti!

Dopo che avrete fatto le vostre prove, ricordatevi di fermare l'istanza: infatti per il semplice fatto che è running, state consumando credito, indipendentemente dagli accessi.

Per fermare l'istanza, andate sulla lista delle istanze, selezionate "Actions", quindi su "States" selezionate "Stop" se volete fermarla e prevedete di riutilizzarla in seguito, o "Terminate" se volete completamente eliminarla.

Precisazione: in generale, anche quando una istanza è stopped, continuate a consumare de credito per lo storage che state utilizzando. Ma nel nostro caso la quantità di storage utilizzata è minima e quindi anche questa componente del costo.

I database NoSQL sono un'alternativa ai database SQL particolarmente utilizzata per le applicazioni web.

Caratteristiche:

• non hanno uno schema che definisce la struttura del database
• alcuni dati sono ripetuti in diverse parti del database per migliorare le performance di lettura (a scapito di quelle di scrittura e spazio utilizzato)
• hanno una struttura ad albero e non a tabelle
• non esistono chiavi primarie esplicite, ma solo per convenzione dello sviluppatore
• non si interrogano con SQL, ma con altri metodi, tipicamente Restful (vedi dopo)

Vantaggi:

• più semplice modificare i campi dei database, utile se i requisiti cambiano continuamente
• può scalare orizzontalmente, ovvero può essere distribuito facilmente su più computer

Svantaggi:

• la lettura dei campi deve essere molto difensiva perché non si hanno certezze sulla struttura dei dati ricevuti

E' caldamente consigliato vedere questo video fino al minuto 9:45 per avere un chiaro confronto tra database SQL e NoSQL. Il video è in inglese con sottotitoli in inglese, ma è di facile comprensione.

• REST, una filosofia di scrittura delle API per la quale al centro di tutto c'è la risorsa che viene manipolata attraverso vari metodi. Molto spesso associata all'HTTP. Con REST si possono effettuare le operazioni CRUD per un database, in questo link potete vedere una tabella di confronto tra NoSQL e SQL.
• Guida di Firebase su come strutturare i dati, rende molto bene operativamente cosa significa programmare per un database NoSQL
• Pagina di confronto tra SQL e NoSQL.

Quando si vogliono gestire funzionalità complesse come sincronizzazione dello stato locale della pagina con il database remoto, lavoro offline, etc., può essere molto utile usare un framework che permetta di gestire queste cose in modo più semplice.

Attualmente (giugno 2019) tra i framework più usati ci sono:

• Angular, mantenuto da Google, usa TypeScript
• React, mantenuto da Facebook (per l'esattezza è una libreria) e utilizza i concetti di stateful, properties e Virtual DOM
• Flutter, anche questo mantenuto da Google, è l'ultimo nato ma sta riscuotendo un enorme successo. Basato sul linguaggio Dart.

Per capire meglio come funzionano i database NoSQL, useremo Google Firebase.

Google Firebase è estremamente semplice da usare e molto potente. Per usarlo basta avere un account Google con Clout Platform attivato.

Andare sul sito di Firebase, quindi:

• accedere con il proprio account Google
• cliccare su "Vai alla console" in alto a destra
• cliccare su Add Project
• scegliere un nome per il database e lasciare tutto il resto di default, quindi premere su "Create project"
• nel progetto appena creato, andare nel menu a sinistra su "Database".

A questo punto dobbiamo fare una scelta. La versione del database consigliato oggi da Google è il nuovo Cloud Firestore, più potente ma richiede un minimo di pratica per cominciare. Noi possiamo usare la versione Real-time Database, che era la versione standard fino a poco tempo fa ma è comunque ancora supportata. Il vantaggio di quest'ultima versione è che è più immediata da usare.

Quando viene richiesto, selezionare le regole di test per l'accesso al database, in modo tale che in questo momento possiamo non preoccuparci dell'autenticazione dell'utente per le operazioni di lettura o scrittura.

Configurazione completata :)

Quando interagiamo con un qualsiasi database, sappiamo bene che esistono diverse categorie di comandi per interrogarlo e manipolarlo. In generale, i diversi comandi rientrano all'interno delle operazioni cosiddette CRUD: Create, Read, Update e Delete.

I database SQL e NoSQL usano strategie diverse per eseguire queste operazioni. Di seguito una tabella riassuntiva di confronto.

In NoSQL, per selezionare l'elemento che si vuole creare o modificare, bisogna identificare l'URL della risorsa.

In generale, avremo un URL base che identifica il database, e un path relativo che identifica la risorsa all'interno del db.

Facciamo un esempio con il database di Google Firebase che abbiamo creato.

Il path base del database in questo caso è https://projectx-marconi.firebaseio.com/. Per scaricare una risorsa, dobbiamo aggiungere .json alla fine del path. Per esempio, se vogliamo scaricare tutto quanto il database, possiamo usare:

https://projectx-marconi.firebaseio.com/.json

Provando a cliccare su questo link con il browser, vedrete che scaricherete tutto il database in formato JSON. Questo perché quando clicchiamo su un link, il browser di default usa il metodo GET.

Se vogliamo invece scaricare solo il contenuto, ad esempio, di dronedetail, dobbiamo usare:

https://projectx-marconi.firebaseio.com/dronedetail.json

Come vedete cliccando sul link, in questo caso abbiamo ottenuto solo la porzione di db che ci interessa.

Per modificare la risorsa, il ragionamento è simile. Troviamo il path della risorsa da modificare, ed usiamo POST e PUT in base al tipo di operazione che vogliamo eseguire.

Quale usiamo tra POST e PUT? Per rispondere, introduciamo brevemente il concetto di idempotenza. Un comando si chiama idempotente se "richieste ripetute identiche devono portare al medesimo stato dei dati sul server". Per semplificare, pensate ad esempio ad una UPDATE in SQL. Se chiamate più volte UPDATE con gli stessi parametri, le chiamate successive alla prima non avranno effetto sulla riga da aggiornare. Pensate ora alla INSERT. Se chiamate più volte INSERT con gli stessi parametri (ipotizzando una assegnazione automatica della chiave primaria), ad ogni chiamata il database andrà ad aggiungere una nuova riga.

La stessa cosa per le chiamate HTTP con NoSQL.

PUT è idempotente: facendo più richieste HTTP PUT, il DB viene (eventualmente) modificato solo la prima volta.

POST non è idempotente: facendo più richieste HTTP POST, ad ogni chiamata verrà aggiunta una nuova risorsa e creata una chiave primaria per noi.

Approfondimento sul concetto di idempotenza qui.

Provare una chiamata HTTP con il metodo GET è facile: basta scrivere l'indirizzo sulla barra di un browser. Provare gli altri metodi è più complesso, e può involvere la scrittura di un programma di test in qualche linguaggio, ad esempio JavaScript. Il problema di questo approccio è che fare il test di tante richieste diverse diventa complicato, e si perde più tempo a scrivere e modificare lo script che a fare i test.

Per risolvere questo problema, esistono delle suite di test specifiche per le chiamate HTTP. Una delle applicazioni più usate al momento è Postman.

La prima volta che lanciamo l'applicazione ci viene chiesto di registrarci, ma possiamo saltare questo passaggio premendo su "skip" in basso.

Una volta aperta l'applicazione, creiamo una nuova collezione dando un nome a piacere, ad esempio "Book HTML5"

All'interno della collezione appena creata, aggiungiamo una "Request" che possiamo chiamare ad esempio "Get drone details". Mettiamo nel campo URL il link alla risorsa, nel nostro caso https://projectx-marconi.firebaseio.com/dronedetail.json, e premiamo Send.

Nella parte in basso ci sono i dati relativi alla riposta del server, in cui possiamo leggere il JSON restituito dal database.

Immaginiamo ora di voler modificare il valore della batteria, e portarlo al 70%.

Creiamo una nuova request premendo il "+" nella barra in alto di Postman, quindi:

• seleziamo il metodo PUT
• inseriamo nel campo URL il link alla risorsa di nostro interesse, nel nostro caso https://projectx-marconi.firebaseio.com/dronedetail/batteria.json
• subito sotto l'URL, selezionamo "Body", quindi "raw" e cambiamo il formato da "text" a "json"
• inseriamo il nuovo valore in formato JSON, in questo caso "70%" (compresi i doppi apici)
• premiamo SEND

Nel body della response in basso vedremo lo stesso valore che abbiamo inserito, che corrisponde al nuovo valore nel database. In pratica ci da conferma che l'operazione è andata a buon fine.

Per avere un esempio pratico di quanto detto, rimando al progetto di classe dell'applicazione del bar.

In questo esempio, viene fatta una GET per scaricare tutto il database, ed una PUT per modificare la quantità richiesta di un certo prodotto.

Realizzare un sito bello, che funziona bene e che rispetti le richieste del cliente non è ancora abbastanza. Oggi infatti non possiamo più ignorare che qualsiasi nostra azione e progetto che realizziamo è strettamente interconnesso con tutto ciò che ci circonda ed ha un impatto sulla vita di tante persone e sull'ambiente, anche in modi che non ci potremmo immaginare.

L'Organizzazione delle Nazioni Unite nell'assemblea generale del 2015 ha fissato 17 obiettivi da raggiungere entro il 2030, per rendere più sostenibile la vita sul nostro pianeta.

Tutti i goal sono associati a degli indicatori che possono essere misurati in maniera oggettiva: l'obiettivo è quindi raggiungere delle metriche chiave per ognuno di questi goal, o quantomeno migliorare le metriche attuali, per sapere se stiamo andando nella giusta direzione. Cliccando sull'immagine qui sopra potrete avere maggiori dettagli su ognuno di questi goal.

Ma cosa significa esattamente sostenibilità? Per rappresentare graficamente cosa si intende possiamo fare riferimento all'immagine qui sotto.

Possiamo pensare alla sostenibilità, ad esempio della nostra azienda, come l'intersezione di tre diversi campi:

• economico: dobbiamo poter ricavare del profitto, ovvero ricavare più di quanto spendiamo;
• ambientale: deve avere il minimo impatto possibile sull'ambiente in termini di consumi energetici, materie prime, consumo del territorio, etc.
• sociale: dobbiamo promuovere lo sviluppo sociale ed i diritti di tutti i nostri lavoratori e delle persone coinvolte dalla nostra azienda

Noi lavoriamo nel campo dell'Internet Economy, dove spesso i consumi energetici sono nascosti. Pensiamo ad esempio quanta energia consumiamo quando vediamo un film su Netflix. Dobbiamo considerare:

• il consumo del dispositivo su cui stiamo guardando il film (es. SmartTV)
• il consumo del router a cui è connessa la TV
• il consumo di tutti gli switch ed altre apparecchiature che collegano il nostro router ai data center di Netflix
• il consumo dei server nei data center di Netflix
• il consumo per la produzione di tutte le apparecchiature qui sopra

Un articolo di Nature mostra delle stime in percentuale di come sono suddivisi questi consumi.

Come si può vedere, i data center e le apparecchiature di rete diventeranno un fattore enorme di consumo energetico nei prossimi anni. Per questo bisogna agire, anche come consumatori responsabili di tecnologie, per fare in modo che questi valori di consumi crescano il meno possibile.

Di seguito un podcast che vi consiglio di ascoltare, sempre dall'articolo di Nature sopra citato.

Come facciamo nella pratica? Ovviamente non c'è una risposta semplice, ma qualcosa possiamo sicuramente farlo, per prima cosa informarci. Ad esempio, un report di Greenpeace del 2017, ClickGreen, cerca di fare un po' di luce sulle fonti di energia usate dalle grandi aziende di Internet.

L'executive summary all'inizio del report riassume tutti i punti più importanti. La buona notizia è che le aziende legate ad Internet sono le tra le più virtuose dal punto di vista delle fonti rinnovabili, e stanno facendo da traino anche per le altre società. Purtroppo però le aziende basate in Cina, come noto, si basano fortemente su fonti di energia non rinnovabili; considerando che sono anche le aziende in maggior crescita, questo crea un problema globale di notevoli dimensioni che ci coinvolge tutti. È altrettanto vero però che la Cina è il paese che investe di più al mondo sull'energia rinnovabile, e quindi anche in questo campo sta innovando molto, a differenza degli Stati Uniti rimangono praticamente fermi...

Insomma lo scenario sulla sostenibilità è in continuo e rapido movimento, e bisogna rivedere continuamente le nostre "certezze" o credenze, lasciando da parte i luoghi comuni. Consiglio a tutti gli studenti di cercare di farsi delle conoscenze di prima mano, andando in giro per il mondo come viaggiatori e non come turisti e conoscendo persone di vari paesi...Buon viaggio, mandatemi una cartolina!

• Ministero dell'ambiente italiano
• Banca d'Italia
• Comunità Europea
• Lifegate
• Noi siamo pari
• Pari opportunità
• Centro Regionale di Informazione delle Nazioni Unite