EL2-1_4ST VISUAL STUDIO CODEAutore: __________________________________________ Data: _________Classe: ____

ATTENZIONE

Il significato dei simboli usati in questa e nelle prossime esercitazioni è spiegato dettagliatamente nella guida http://www.classiperlo.altervista.org/Materiale/Generale/Simboli.doc (scaricala e consultala in caso di dubbi).

Il simbolo della manina in colore blu indica una domanda alla quale bisogna OBBLIGATORIAMENTE rispondere scrivendo in colore blu.

Il simbolo della manina in colore blu con la scritta Cou New indica un codice che va incollato usando Courier New in colore blu.

Il simbolo della manina in nero indica una o più immagini o schermate da incollare (protette col tuo watermark, le tue iniziali di Nome e Cognome)

Il simbolo della manina con colori attenuati indica un'operazione che bisogna svolgere, senza rispondere a nessuna domanda (non vuol dire che non devi fare nulla – significa solo che non devi scrivere niente!).

Il simbolo della manina col ciak video indica un video da registrare con Gif Recorder (http://gifrecorder.com/) e da salvare in formato gif nella cartella dell'esercitazione.recupero.

Questo simbolo indica un video di esempio o di spiegazioni da guardare su YouTube

A) OPERAZIONI PRELIMINARI

A1) Compila l'intestazione del documento scrivendo Nome, Cognome e Classe

A2) Nel tuo disco Z (di rete), nella sottocartella Informatica/Esercitazioni, crea una nuova cartella di nome ES2

A3) Crea una sottocartella di ES2 con nome uguale a quello di questa esercitazione (EL2-1_4ST Visual Studio Code)

A4) All'interno della sottocartella EL2-1_4ST Visual Studio Code salva questo file Word

A5) Incolla qui sotto una schermata dove si veda la struttura di cartelle e sottocartelle della tua cartella Informatica in File Explorer (sostituisci la mia immagine con la tua espandendo tutte le cartelle principali):

A6) Svuota la tua cartella Download, cancellando o spostando da altre parti tutti i file che contiene. Incolla qui sotto una schermata nella quale si veda Download vuota e la data dell'orologio di sistema (sostituisci la mia schermata con la tua):

B) INSTALLAZIONE E PRIMO UTILIZZO

Visual Studio Code (VSC) è un editor gratuito e open source sviluppato da Microsoft.

B1) Prima di tutto devi scaricarlo. Per fare ciò recati nella pagina di download https://code.visualstudio.com/Download. Se stai lavorando a casa, puoi scaricare la versione installabile per Windows. Se invece lavori da scuola, devi scaricare la versione portable in formato .zip

B2) Estrai il programma nella cartella Programmi/Visual Studio Code ed esegui il programma Code.exe

B3) A questo punto dovreste aver aperto Visual Studio Code ed avere una schermata del genere.

B4) Se VSC richiede l'installazione di un plug in aggiuntivo per la lingua italiana, installalo cliccando su Installa.

SE VSC NON È IN LINGUA ITALIANA

Può darsi che in alcune installazioni VSC venga installato senza il supporto della lingua italiana. Per risolvere il problema:

1) vai sul Market di VSC cliccando sull'icona 2) digita "italian language pack" nella casella di ricerca3) installa il plug in aggiuntivo per la lingua italiana

B5) Puoi invece ignorare la richiesta di installazione di GIT

B6) Puoi usare VSC per aprire un singolo file HTML con File > Apri. Oppure puoi usarlo per esplorare tutti i file contenuti in una data cartella con File > Apri Cartella… (oppure nella schermata principale cliccando sul link “Apri cartella…”)

B7) Apri con File-Apri di VSC un qualsiasi file html che hai nelle tue precedenti esercitazioni e incolla una schermata:

ATTENZIONE

Devi aprire il file precedente in VSC (non in Chrome!). Inoltre devi usare File > Apri i e NON File > Apri Cartella

C) SCORCIATOIE (SHORTCUT)

Le shortcut, o scorciatoie, sono un elemento comune in tutti gli editor di testo e forniscono un modo veloce per eseguire vari comandi all’interno dell’editor, usando solo la tastiera. Infatti l'uso del mouse può rallentare il lavoro al computer e i programmatori esperti, se possono, ne fanno a meno.

UN TRUCCO

Se in VSC premi i tasti CTRL+K+S insieme, ottieni una lista di tutte le principali scorciatoie. Insomma, questa è una scorciatoia per le scorciatoie...

C1) Iniziamo con le shortcut standard alla maggior parte degli editor (molte le conosci già). Completa la tabella seguente scrivendo la Voce di Menu e la Funzione (cioè a cosa serve) ciascuna scorciatoia (le prime due le ho compilate già io). ATTENZIONE: devi compilare la tabella con la funzione di ciascuna scorciatoia in VSC, non in Word. Prova il funzionamento delle scorciatoie elencate in VSC!

Comando Voce di menu FunzioneCtrl+S File > Salva Salva il fileCtrl+Z Modifica > Annulla Annulla l’ultima modificaCtrl+C

Ctrl+VCtrl+X

Ctrl+Y o Ctrl+Maiusc+ZCtrl+FCtrl+H

Ora invece sfruttiamo alcune delle shortcut native di Visual Studio Code

C2) Crea un file di nome tictactoe.html all’interno della cartella della esercitazione. Usa la shortcut CTRL+N per creare un Nuovo File e poi Ctrl+S per salvarlo.

C3) Incolla all’interno di tictactoe.html il seguente codice HTML:

<!DOCTYPE html><html lang="it">

<head> <meta charset="windows-1252"> <title>TIC TAC TOE</title><link href="tictactoe.css" rel="stylesheet"><script type="text/JavaScript" src="tictactoe.js"></script></head> <body> <div> <div class="riga"> <div onclick="cambia(this)"></div> <div onclick="cambia(this)"></div> <div onclick="cambia(this)"></div> </div> <div class="riga"> <div onclick="cambia(this)"></div> <div onclick="cambia(this)"></div> <div onclick="cambia(this)"></div> </div>

<div class="riga"> <div onclick="cambia(this)"></div> <div onclick="cambia(this)"></div> <div onclick="cambia(this)"></div> </div></div></body> </html>

C4) Ora prova a premere contemporaneamente Alt+Maiusc+F. Incolla il codice modificato da VSC:

C5) Spiegami cosa è successo:

SE NON RICORDI LA SCORCIATOIA

Se non ricordi la scorciatoia, puoi trovare il comando precedente col menu contestuale, cliccando col tasto destro in un punto qualsiasi della finestra di codice:

C6) Crea un file di nome tictactoe.css all’interno della cartella della esercitazione (CTRL+N e poi CTRL+V) e incollaci dentro il seguente codice:

.riga { display: table-row; }

.riga div { width: 60px; height: 60px; line-height: 60px; border: 1px solid; text-align:center; display: table-cell;}

C7) Ora premi nuovamente Alt+Maiusc+F.

Come avrai notato non è cambiato niente. Perché?

Di default Visual Studio Code non supporta la formattazione automatica dei file CSS.Per ovviare al problema dovremo installare un plug-in esterno per aggiungere il supporto.

D) PLUG-IN (ESTENSIONI)

Visual Studio è un editor che può essere considerato modulare. Infatti è possibile estendere le sue funzionalità attraverso micro-programmi esterni chiamati plug-in (o estensioni).

D1) Per accedere al Market dei plug-in bisogna cliccare su nella barra laterale sinistra.

D2) Nel campo di testo cerca “Beautify css” e clicca sul primo risultato

D3) Ti aprirà una finestra simile alla sottostante, clicca il pulsante blu “Installa”.

D4) Ora riapri il file CSS tramite il menu laterale sinistro e riprova a formattare il testo ( Alt+Maiusc+F ). Incolla il codice formattato (ATTENZIONE: potrebbe essere necessario premere prima su Ricarica per ricaricare il plug in).

D5) Visualizza la pagina tictactoe.html nel browser e incolla qui sotto una schermata:

UN PLUG IN PER APRIRE DIRETTAMENTE LA PAGINA NEL BROWSER

Se vuoi aprire la pagina nel browser direttamente da VSC puoi installare questo comodo plug in:

Dopo l'installazione del plug in, potrai aprire le pagine da VSC direttamente nel tuo browser di default usando la scorciatoia CTRL+F1.

In alternativa, se il plug in precedente non funzionasse (su alcuni PC non funziona, non so perché), cerca Open in browser e troverai molti altri plug-in che fanno la stessa funzione:

ATTENZIONE: Ogni plug in ha una diversa scorciatoia (combinazione di tasti) per aprire la visualizzazione nel browser. Guarda la scheda di spiegazione del plug in che hai scelto per vedere qual è la scorciatoia usata.

E) EMMET

VSC incorpora al proprio interno un utile strumento per scrivere più rapidamente il codice HTML. Si chiama emmet e per usarlo non devi fare nulla, perché è già incorporato nell'editor.

E1) Ti mostro subito come funziona. Crea una pagina di nome emmet.html nella cartella di questa esercitazione. Salva la pagina con l'estensione html prima di continuare.

E2) Digita html nella pagina e quindi scegli html:5 dal menu a discesa che compare, come mostrato in figura:

E3) VSC genera automaticamente un template vuoto per la pagina. Incolla qui sotto una schermata:

E4) Modifica il template eliminando le parti che non ci servono e mettendo it (italiano) come lingua predefinita per il documento e cambiando il title della pagina:

E5) Nel body della pagina scrivi:ul>li*5e poi premi INVIO per confermare.

E6) Incolla il codice HTML che viene prodotto automaticamente:

Che cosa è successo? Emmet ha creato automaticamente una lista non ordinata UL con 5 elementi LI al suo interno.

E7) Prova il codice seguente:div>p*4>br*2e poi premi INVIO per confermare.

E8) Incolla il codice HTML che viene prodotto automaticamente:

Supponiamo adesso di voler creare una TABLE con 3 righe TR ciascuna delle quali contiene 4 celle TD. Ecco come si fa...

E9) Nel body della pagina scrivi: table>tr*3>td*4e premi INVIO per confermare.

E10) Incolla il codice HTML che viene prodotto automaticamente:

Ormai dovresti aver capito come funziona.

E11) Cosa devi scrivere per generare automaticamente il seguente codice HTML?<ol> <li><strong></strong></li> <li><strong></strong></li> <li><strong></strong></li> <li><strong></strong></li></ol>

E12) Scrivi qui sotto il codice Emmet per generare l'HTML precedente:

Ci sono molti altri trucchi e scorciatoie che si possono usare.

E13) Nel body della pagina scrivi:p.rosso

E14) Incolla il codice HTML che viene prodotto automaticamente:

Come vedi posso generare un elemento e assegnargli immediatamente una classe senza nessuna fatica!

E15) Prova adesso questo codice meraviglioso:table#tabella>tr*5>td.verde*3

E16) Incolla il codice HTML che viene prodotto automaticamente:

Osserva che per generare automaticamente un elemento appartenente a una certa classe bisogna usare il . (es. div.pippo); per generare automaticamente un id si usa # (es. div#pippo).

E17) Adesso tocca te. Supponi di voler generare il codice HTML seguente:<p id="tizio"><span class="pluto"></span></p>

E18) Scrivi qui sotto il codice Emmet per generare l'HTML precedente:

E19) Prova ancora questo:img[src="foto.jpg" alt="Uomo che ride"]

E20) Incolla il codice HTML che viene prodotto automaticamente:

Come vedi Emmet permette di generare automaticamente anche gli attributi di un certo elemento (usando le parentesi quadre, come nell'esempio qui sopra).

Potrei andare avanti ancora per molto, ma mi fermo qui. Puoi trovare l'elenco di tutti i comandi di Emmet, qui: https://docs.emmet.io/abbreviations/syntax/

F) INTERFACCIA E CODICE

Torniamo adesso al nostro gioco del TRIS, che ancora non funziona. Se provi a cliccare su una cella non accade nulla. La ragione è che finora abbiamo costruito solo l'interfaccia del nostro programma, mentre manca ancora il codice.

In generale qualunque programma (da Internet Explorer a Minecraft), può essere pensato come costituito da due parti ben distinte:

1. un'interfaccia2. il codice del programma

L'interfaccia è quella parte del programma con cui l'utente interagisce direttamente.

Potremmo paragonare l'interfaccia al pannello di controllo di un macchinario. Usando l'interfaccia (tipicamente attraverso la tastiera e il mouse) l'utente può inserire dati, scegliere opzioni, ricevere risultati eccetera.

Il codice è la parte nascosta del programma, quella che si occupa di eseguire i comandi forniti attraverso l'interfaccia.

Possiamo paragonare il codice al motore di una macchina. Senza il codice nessun programma può funzionare, ma senza un'interfaccia un programma non può comunicare con l'esterno.

.

Nel caso della nostra pagina dinamica per il gioco del tris, l'interfaccia è costituita da html+css, mentre il codice è il javascript.

F1) Dentro la cartella di questa esercitazione, crea un file di nome tictactoe.js e poi incolla all'interno del file il codice seguente:

var segno = "X";function cambia(cella){if (cella.innerHTML !== "") { alert("ERRORE!"); }else { cella.innerHTML = segno; if (segno == "X") segno = "O";

else segno = "X"; }}

F2) Risistema il codice precedente con ALT+MAIUSC+F e poi incollalo di nuovo qui sotto:

F3) Visualizza la pagina precedente nel tuo browser (prova anche a cliccare sulle caselle) e incolla qui sotto una schermata:

https://youtu.be/rm6XqcoF01Y Bene, adesso finalmente il nostro gioco funziona.

G) FILE ESTERNI O CODICE INCORPORATO

Il file html contiene la struttura logica della pagina e i collegamenti con gli altri due file (quello contenente gli stili e quello con il javascript).

Come noti la struttura dell'area di gioco del tris è stata realizzata con una serie di elementi DIV annidati uno dentro l'altro. Un altro modo per ottenere lo stesso risultato sarebbe stato usare un elemento TABLE.

G1) Sebbene dal punto di vista grafico, la realizzazione con TABLE e quella con DIV siano equivalenti, usare il DIV è una scelta più "pulita" dal punto di vista logico. Spiegami perché

La pagina html è collegata col foglio stile css per mezzo dell'elemento:

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

Come sappiamo, una possibilità alternativa consiste nell'usare i fogli stile incorporati, cioè nello scrivere gli stili direttamente dentro la pagina html.

G2) Crea una copia di tictactoe.html di nome tictactoe2.html (sempre nella cartella di questa esercitazione) in cui utilizzi gli stili incorporati nella pagina html (devi eliminare il foglio stile esterno e copiare tutti gli stili all'interno della pagina dentro a un elemento <style> nell'head).

I fogli stile esterni sono equivalenti agli stili incorporati, ma sono spesso una soluzione più elegante e più efficace (specialmente quando si devono gestire molte pagine con gli stessi stili).

Oltre al foglio stile CSS, la pagina html contiene anche un collegamento al file javascript con le istruzioni del programma:

<script type="text/JavaScript" src="tictactoe.js"></script>

Anche le istruzioni javascript, volendo, possono essere incluse all'interno del file html. Questo è in effetti il metodo che abbiamo sempre usato prima di ora (nelle esercitazioni sugli Algoritmi).

G3) Crea una copia di tictactoe2.html di nome tictactoe3.html nella quale anche il codice javascript si trova all'interno del file html.

Anche in questo caso il codice incorporato funziona esattamente come il codice in un file esterno. Tuttavia, specialmente quando il programma da eseguire è grande e contiene molte istruzioni, l'uso di un file esterno js è la soluzione migliore. Inoltre, anche in questo caso, con un file esterno è possibile applicare le stesse istruzioni javascript a pagine diverse (esattamente come si fa con i fogli stile).

H) VALIDARE

Già conosciamo bene l'importanza di validare il codice html e il foglio stile per individuare e correggere eventuali errori. Ecco un elenco dei validatori da usare:

1. Nu Validator (per Html 5.0): https://validator.w3.org/nu/2. CSS Validation Service: https://jigsaw.w3.org/css-validator/3. Esprima: http://esprima.org/demo/validate.html

H1) Usando Nu Validator valida la correttezza del codice di tictactoe.html. Correggi eventuali errori e poi incolla qui sotto una schermata con la validazione corretta:

In alternativa a Nu Validator possiamo scaricare un comodo plug in di VSC che effettua la validazione del codice HTML real time (cioè mentre scriviamo).

H2) Cerca e installa l'estensione HTMLHint, come mostrato in figura:

H3) Ricarica l'estensione, dopo averla installata e poi visualizza la finestra di tictactoe.html. Introduci un qualsiasi errore nel codice HTML e osserva come viene indicato l'errore. Sostituisci la tua schermata al posto della mia (e poi elimina l'errore che avevi introdotto):

Per validare gli errori nel foglio stile CSS e nel codice JS non è invece necessaria nessuna estensione.

H4) Introduci adesso un errore tictactoe.css e osserva come ti viene segnalato (sostituisci la tua schermata al posto della mia). Elimina poi l'errore che avevi introdotto:

H5) Introduci infine un errore tictactoe.js e osserva come ti viene segnalato (incolla una schermata). Elimina poi l'errore che avevi introdotto:

BONUS EXTRA +3PC – TRIS CON I FOGLI STILE (EL2-1_4ST – BONUS1)

Se una pagina dinamica è molto semplice, è possibile realizzarla con solo i fogli stili CSS3 (transizioni, traslazioni, animazioni), senza ricorrere all'uso del javascript.

Prova a realizzare un gioco del tris identico (senza la visualizzazione dei messaggi di errore) a quello di questa esercitazione, ma usando solo fogli stile CSS (cioè senza usare javascript).

Invia l'esercitazione di bonus separatamente su Classiperlo in un file zippato di nome EL2-1_4ST – BONUS1

I) OPERAZIONI FINALI

I1) Controlla di aver risposto a tutte le domande e incollato tutte le schermate. Tutte le

caselline dovrebbero avere un segno X, per indicare che hai risposto

I2) Comprimi le immagini contenute in questo file Word (seleziona un'immagine, scheda Formato e poi Comprimi immagini e infine Applica a tutte le immagini del documento) in modo da ridurne le dimensioni.

ANTIVIRUS GOOGLE E FILE JAVASCRIPT

L'antivirus di Google blocca tutti gli allegati che contengono file con estensione .jsPer riuscire a inviare l'esercitazione devi prima rinominare tutti i file .js in .jss (o qualsiasi altra estensione). In assenza di questa operazione, la tua esercitazione non verrà consegnata!

I3) Controlla che la cartella di questa esercitazione contenga i seguenti file con i nomi qui indicati:

Nome del file Tipo del file DescrizioneEL2-1_4ST Visual Studio Code Word Il file di questa esercitazionetictactoe.html Html Pagina htmltictactoe.css CSS Foglio stiletictactoe.jss (cambia estensione) Javascript Codice javascripttictactoe2.html Html Pagina con stili incorporatitictactoe3.html Html Pagina con stili e javascript

incorporatoemmet.html Html Pagina con le prove di Emmet

I4) Chiudi tutti i file, zippa la cartella di questa esercitazione e inviala all'insegnante su Classiperlo.