EL2-1_4ST BRACKETSAutore: __________________________________________ 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

PERCHE' CI SONO DUE ESERCITAZIONI 2.1?

Come spero avrai notato, esistono due esercitazioni numerate 2.1:

2.1 Visual Studio Code (VSC)2.1 Brackets

Queste due esercitazioni presentano due editor alternativi per scrivere codice HTML e JS: Visual Studio Code (VSC per brevità) e Brackets. Non devi svolgere tutte e due le esercitazioni! Scegli l'editor fra i due che preferisci e poi fai l'esercitazione corrispondente.

Per aiutarti nella scelta puoi dare un'occhiata a queste pagine di confronto - https://stackshare.io/stackups/brackets-vs-visual-studio-code

- https://www.codementor.io/mattgoldspink/best-text-editor-atom-sublime-vim-visual-studio-code-du10872i7

WARNING

Le mie esercitazioni successive (a partire dalla 2.2) sono state scritte usando VSC. Se scegli di usare Brackets incontrerai qualche piccola differenza e dovrai fare qualche modifica.

Se utilizzi Brackets e mi invii una versione riscritta delle esercitazioni (modificando i riferimenti a VSC e riscrivendoli per Brackets), verrai premiato in PerloCoin.

A) OPERAZIONI PRELIMINARI (ATTENZIONE AI PUNTI A5 E A6)

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 Brackets)

A4) All'interno della sottocartella EL2-1_4ST Brackets 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

Brackets è un editor gratuito e open source.

B1) Prima di tutto devi scaricarlo. Per fare ciò recati nella pagina di download http://brackets.io/ . 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 dal sito https://sourceforge.net/projects/bracketsportable/

B2) Dopo aver scaricato il file avvialo e nel passaggio successivo cambiare la cartella di destinazione in Informatica/Programmi (la cartella precedentemente creata). Dopo premere su Install

B3) A questo punto dovreste aver aperto Brackets ed avere una schermata del genere.

C) PLUG IN (ESTENSIONI)

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

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

C2) Nel campo di testo cerca “Beautify” e clicca su installa al primo risultato trovato. Questa estensione serve per riordinare i codici quando sono disordinati. (Vedrai il suo funzionamento tra pochi punti)

C3) Fai la stessa cosa per “HTMLHint” e “CSSLint”. Questi sono Validatori HTML, CSS e JS

D) 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.

D1) 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 Brackets, non in Word. Prova il funzionamento delle scorciatoie elencate in Brackets!

Comando Voce di menu FunzioneCtrl+S File > Salva Salva il fileCtrl+Z Modifica > Annulla Annulla l’ultima modificaCtrl+CCtrl+VCtrl+XCtrl+FCtrl+H

Ora invece sfruttiamo alcune delle shortcut native di Brackets

D2) Crea un file di nome tictactoe.html all’interno della cartella della esercitazione. Usa la shortcut CTRL+N per creare un Nuovo File.

D3) 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>

D4) Salva la pagina usando la combinazione Ctrl+S

D5) Ora prova a premere contemporaneamente Ctrl+Maiusc+B. Incolla il codice modificato da Brackets:

D6) 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:

D7) Crea un file di nome tictactoe.css all’interno della cartella della esercitazione (CTRL+N) 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;}

D8) Dopo aver salvato la pagina (Ctrl+S), premi nuovamente Alt+Maiusc+B per riordinare il tutto.

E) INTERFACCIA E CODICE

Il nostro gioco del TRIS 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.

E1) 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"; }}

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

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

VISUALIZZAZIONE BROWSER

Se vuoi visualizzare la pagina appena creata ma allo stesso tempo guardare i codici, premete il

pulsante sulla barra sinistra. Ogni volta che i codici verranno modificati e salvati, la pagina si aggiornerà e ti farà vedere quello che è stato fatto.

Bene, adesso finalmente il nostro gioco funziona.

F) 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.

F1) 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.

F2) 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.

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).

F3) 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).

G) VALIDARE

Già conosciamo bene l'importanza di validare il codice html e il foglio stile per individuare e correggere eventuali errori. Ecco un elenco 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

VALIDARE DIRETTAMENTE DA BRACKETS

I plugin HTMLHint e CSSLint precedentemente installati sono dei validatori che funzionano su HTML, CSS e JS. Per vedere gli errori presenti nella pagina, in basso a destra del programma si può trovare un simbolo. Se è presente il simbolo di pericolo significa che sono stati trovati degli errori. Invece se è presente questo simbolo , allora significa che è tutto apposto

G1) Controlla se ci sono errori e metti una schermata della validazione della pagina HTML. (scegli te se usare il programma oppure il sito è indifferente)

BONUS EXTRA +3 PC – 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

H) OPERAZIONI FINALI

H1) 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

H2) 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!

H3) 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 Brackets 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

incorporato

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