[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:02.80,0:00:05.64,Default,,0000,0000,0000,,Incominciamo a programmare. Dobbiamo iniziare imparando a capire le fome, la base.
Dialogue: 0,0:00:05.64,0:00:10.80,Default,,0000,0000,0000,,Ma non vi preoccupate, molto presto le vostre forme si imetteranno a svolazzare sullo schermo e a cambiare colore e a fare un sacco di cose simpaticissime che c'entrano con la programmazione.
Dialogue: 0,0:00:10.80,0:00:12.77,Default,,0000,0000,0000,,Continuate a seguirci!
Dialogue: 0,0:00:12.77,0:00:14.64,Default,,0000,0000,0000,,Allora, incominciamo disegnando dei rettangoli.
Dialogue: 0,0:00:14.64,0:00:20.87,Default,,0000,0000,0000,,Scriviamo rect() per rettangolo, poi aperta parentesi e poi quattro cifre e vi spiegherò fra un attimo che cosa significano
Dialogue: 0,0:00:20.87,0:00:23.94,Default,,0000,0000,0000,,... poi chiudiamo la parentesi e alla fine mettiamo un punto e virgola.
Dialogue: 0,0:00:23.94,0:00:26.00,Default,,0000,0000,0000,,Guardate, incredibile: un rettangolo!
Dialogue: 0,0:00:26.00,0:00:29.67,Default,,0000,0000,0000,,Ed è venuto così bene che ci riproviamo. Questa volta possiamo provare con dei numeri diversi.
Dialogue: 0,0:00:29.67,0:00:36.17,Default,,0000,0000,0000,,Magari dei numeri più grandi e poi dei numeri più piccoli alla fine e, guardate un po', un altro rettangolo.
Dialogue: 0,0:00:36.17,0:00:41.00,Default,,0000,0000,0000,,In realtà, se proviamo a cambiare questo primo numero per rimpicciolirlo, incomincerà a muoversi.
Dialogue: 0,0:00:41.00,0:00:47.97,Default,,0000,0000,0000,,Se cambiamo questo numero in fondo per aumentarlo e poi diminuirlo, allora incomincerà a crescere e poi a restringersi, interessante.
Dialogue: 0,0:00:47.97,0:00:51.88,Default,,0000,0000,0000,,E allora, come succede questa magia, vi domanderete?
Dialogue: 0,0:00:51.88,0:00:55.51,Default,,0000,0000,0000,,Beh, ricordatevi che il vostro computer è proprio come un cagnolino, molto intelligente e obbediente.
Dialogue: 0,0:00:55.51,0:01:00.22,Default,,0000,0000,0000,,Con un cane magari potreste dirgli di sedersi, fermarsi e persino rotolarsi per terra.
Dialogue: 0,0:01:00.22,0:01:03.30,Default,,0000,0000,0000,,Dovreste semplicemente dare il comando seduto().
Dialogue: 0,0:01:03.30,0:01:07.05,Default,,0000,0000,0000,,Quindi, in codice, come direste al vostro computer-cane di sedersi?
Dialogue: 0,0:01:07.05,0:01:19.72,Default,,0000,0000,0000,,Beh, il modo in cui lo fareste è questo: scrivereste il nome del comando, diciamo "seduto" e poi 2 parentesi dopo per dirgli di eseguire il comando che avete appena pronunciato e poi un punto e virgola alla fine per dire "sì, questo comando è terminato."
Dialogue: 0,0:01:19.72,0:01:22.22,Default,,0000,0000,0000,,E allora il vostro computer-cane si metterebbe a sedere.
Dialogue: 0,0:01:22.22,0:01:32.37,Default,,0000,0000,0000,,Beh, è ovvio, il vostro computer che usate per Khan Academy non è un cane, quindi non sa come sedersi o rotolarsi, ma sa come disegnare rettangoli, quando voi dite rect() e questa è una bella cosa davvero, no?
Dialogue: 0,0:01:32.37,0:01:44.14,Default,,0000,0000,0000,,Quindi è quello che faremo su questa linea. Diremo il comando rect(), che è semplicemente il nome, e poi parentesi aperta e poi chiusa per dire "vai a farlo" e poi il punto e virgola alla fine.
Dialogue: 0,0:01:44.14,0:01:47.44,Default,,0000,0000,0000,,Questo è il modo in cui il vostro computer sa come andare a fare quella cosa speciale rect.
Dialogue: 0,0:01:47.44,0:01:49.97,Default,,0000,0000,0000,,Okay, ora invece ritorniamo al nostro rect.
Dialogue: 0,0:01:49.97,0:01:53.67,Default,,0000,0000,0000,,Abbiamo il nome del comando esattamente qui, abbiamo queste parentesi.
Dialogue: 0,0:01:53.67,0:01:56.87,Default,,0000,0000,0000,,E tutti questi numeri strani?
Dialogue: 0,0:01:56.87,0:02:01.55,Default,,0000,0000,0000,,Beh, l'idea è che il computer in realtà non sa abbastanza se gli dite soltanto rect.
Dialogue: 0,0:02:01.55,0:02:09.67,Default,,0000,0000,0000,,Per capirlo, provate a pensare che vi abbia dato un pezzo di carta e vi avessi chiesto di disegnare un rettangolo esattamente come lo volevo che fosse.
Dialogue: 0,0:02:09.67,0:02:15.11,Default,,0000,0000,0000,,Beh, a meno che possiate leggere la mia mente, vi verranno subito spontanee delle domande.
Dialogue: 0,0:02:15.11,0:02:20.17,Default,,0000,0000,0000,,Innanzitutto potreste domandarvi: "d'accordo, ma dove vuoi che lo disegni il rettangolo?"
Dialogue: 0,0:02:20.17,0:02:28.01,Default,,0000,0000,0000,,E allora io direi "diciamo che concordiamo che questa parte sinistra del foglio la chiameremo 0."
Dialogue: 0,0:02:28.01,0:02:30.64,Default,,0000,0000,0000,,E concordiamo che questa parte destra sarà 400.
Dialogue: 0,0:02:30.64,0:02:37.54,Default,,0000,0000,0000,,Allora potrei darvi un numero, come 100, e voi sapreste che andrà a finire più o meno qui.
Dialogue: 0,0:02:37.54,0:02:43.88,Default,,0000,0000,0000,,Sarete soddisfatti per il momento, ma poi direste che, d'accordo, ora so quanto è distante in senso orizzontale, ma dove si trova in senso verticale?
Dialogue: 0,0:02:43.88,0:02:56.30,Default,,0000,0000,0000,,Allora potrei darvi un altro numero, come 200 e direi che questo è il margine superiore 0 e di nuovo che il margine inferiore è 400 e voi direste, beh, 200 sarà proprio al centro.
Dialogue: 0,0:02:56.30,0:03:02.97,Default,,0000,0000,0000,,E così ci siamo, perché adesso penserete; okay, ora disegno il tuo rettangolo proprio qui.,,
Dialogue: 0,0:03:02.97,0:03:06.67,Default,,0000,0000,0000,,... perché è 100 in orizzontale e 200 in verticale.
Dialogue: 0,0:03:06.67,0:03:09.89,Default,,0000,0000,0000,,Se non fosse che mancano ancora delle informazioni, perché ora che cosa domandate?
Dialogue: 0,0:03:09.89,0:03:12.84,Default,,0000,0000,0000,,Vi state domandando; quanto grande voglio che sia il rettangolo?
Dialogue: 0,0:03:12.84,0:03:17.47,Default,,0000,0000,0000,,Io direi, per esempio facciamo largo 150?
Dialogue: 0,0:03:17.47,0:03:27.72,Default,,0000,0000,0000,,E voi pensereste che, beh, questo è 100 e questo è 400, quindi se lo vogliamo largo 150, forse arriveremo più o meno fino a qui.
Dialogue: 0,0:03:27.72,0:03:30.27,Default,,0000,0000,0000,,Okay, bello, è più o meno largo 150.
Dialogue: 0,0:03:30.27,0:03:31.72,Default,,0000,0000,0000,,Allora poi direste; quanto lo vuoi alto?
Dialogue: 0,0:03:31.72,0:03:33.47,Default,,0000,0000,0000,,E io direi; "mah, non so, non lo voglio molto alto, che ne dite di farlo alto 50?"
Dialogue: 0,0:03:33.47,0:03:39.39,Default,,0000,0000,0000,,Voi direte; okay, 50, è più o meno alto così.
Dialogue: 0,0:03:39.39,0:03:45.44,Default,,0000,0000,0000,,Adesso direte; grande! so esattamente il punto in cui vuoi avere il tuo rettangolo e come deve essere fatto, ora lo posso disegnare.
Dialogue: 0,0:03:45.44,0:03:48.05,Default,,0000,0000,0000,,Un sacco di lavoro per un rettangolo, non vi pare?
Dialogue: 0,0:03:48.05,0:04:02.20,Default,,0000,0000,0000,,Ma l'idea è che, semplicemente dandovi questi 4 numeri - 100 orizzontale, 200 verticale, 150 larghezza, 50 altezza, ora siamo esattamente sulla pagina nel punto in cui il rettangolo dovrebbe trovarsi.
Dialogue: 0,0:04:02.20,0:04:04.55,Default,,0000,0000,0000,,E questo è anche il modo in cui funziona il computer.
Dialogue: 0,0:04:04.55,0:04:16.55,Default,,0000,0000,0000,,Potete semplicemente scrivere il nome del comando come abbiamo detto prima - aperta parentesi, i 4 numeri - 100, 200, 150, 50, chiusa parentesi e poi un punto e virgola.
Dialogue: 0,0:04:16.55,0:04:20.55,Default,,0000,0000,0000,,E lui disegnerà un rettangolo esattamente dove volevamo che si trovasse!
Dialogue: 0,0:04:20.55,0:04:26.14,Default,,0000,0000,0000,,Beh, ad essere sinceri, questo non è esattamente il punto in cui volevamo il rettangolo - non è il punto dove lo abbiamo disegnato, vero?
Dialogue: 0,0:04:26.14,0:04:31.64,Default,,0000,0000,0000,,I nostri numeri sono leggermente sfasati. Allora continuiamo e diciamo che vogliamo che corrisponda esattamente a quello che abbiamo disegnato.
Dialogue: 0,0:04:31.64,0:04:43.72,Default,,0000,0000,0000,,Sposteremo questo così va un po' più in là, un po' meno su e giù, leggermente più stretto e forse appena un po' più basso.
Dialogue: 0,0:04:43.72,0:04:52.80,Default,,0000,0000,0000,,Ora abbiamo ottenuto che il nostro rettangolo corrisponda quasi del tutto a quello che abbiamo disegnato, perché abbiamo capito che cosa significa ciascuno di questi numeri e li abbiamo potuti cambiare in modo da farlo diventare come lo volevamo.
Dialogue: 0,0:04:52.80,0:04:55.44,Default,,0000,0000,0000,,Ora vediamo di disegnare un altro rettangolo.
Dialogue: 0,0:04:55.44,0:04:59.72,Default,,0000,0000,0000,,La cosa bella è che ora possiamo disegnare rettangoli ovunque vogliamo.
Dialogue: 0,0:04:59.72,0:05:04.60,Default,,0000,0000,0000,,Che ne dite di disegnarne uno quassù in cima, in questo angolo in alto?
Dialogue: 0,0:05:04.60,0:05:06.84,Default,,0000,0000,0000,,Pensiamo a dove si troverebbe.
Dialogue: 0,0:05:06.84,0:05:17.38,Default,,0000,0000,0000,,Sarebbe una cosa come 0 in orizzontale, 0 in verticale e magari lo facciamo piuttosto piccolo, per esempio largo 50 e alto 10. Un rettangolo piuttosto piccolo, no?
Dialogue: 0,0:05:17.38,0:05:26.55,Default,,0000,0000,0000,,Andiamo avanti e facciamolo. Scriviamo rect, separiamo i parametri con virgole e diciamo, okay, siamo a posto.
Dialogue: 0,0:05:26.55,0:05:35.50,Default,,0000,0000,0000,,Ma, oh oh, arriva questo messaggio di errore che dice che ci manca una parentesi di chiusura e ci rendiamo conto che effettivamente è vero e quindi ce la rimettiamo.
Dialogue: 0,0:05:35.50,0:05:38.72,Default,,0000,0000,0000,,Ma, non va tanto bene, perché, oh oh, adesso arriva un altro messaggio di errore che dice che ci manca un punto e virgola.
Dialogue: 0,0:05:38.72,0:05:43.61,Default,,0000,0000,0000,,Se cliccassimo "show me where", ci indicherebbe la linea che abbiamo appena scritto...
Dialogue: 0,0:05:43.61,0:05:49.20,Default,,0000,0000,0000,,... e ci ricordiamo che i punti e virgola sono come i punti alla fine delle frasi, ma in questo caso sono alla fine delle linee di codice, e ne abbiamo dimenticato uno.
Dialogue: 0,0:05:49.20,0:05:53.38,Default,,0000,0000,0000,,Possiamo rimettercelo, non è un problema, e va di nuovo tutto a posto.
Dialogue: 0,0:05:53.38,0:05:56.14,Default,,0000,0000,0000,,Guardate, un rettangolino piccolo, proprio come lo volevamo.
Dialogue: 0,0:05:56.14,0:06:03.80,Default,,0000,0000,0000,,Proprio come prima lo possiamo espandere per renderlo più grande, lo possiamo spostare e possiamo posizionarlo esattamente dove desideriamo.
Dialogue: 0,0:06:03.80,0:06:07.60,Default,,0000,0000,0000,,Ora quindi conoscete bene tutti i dettagli su come funziona questa cosa dei rettangoli.
Dialogue: 0,0:06:07.60,0:06:15.67,Default,,0000,0000,0000,,Abbiamo parlato del significato di questi numeri e del fatto che dovete sempre mettere il nome del comando, le parentesi, separare i numeri con virgole, mettere il punto e virgola alla fine.
Dialogue: 0,0:06:15.67,0:06:19.67,Default,,0000,0000,0000,,Sembrano un sacco di cose, ma potete andare avanti e provare da soli e fare una prima esperienza.
Dialogue: 0,0:06:19.67,0:06:23.67,Default,,0000,0000,0000,,La prossima volta impareremo a creare altre forme e poi andremo avanti imparando cose fortissime come colorarle e farle volare in giro per lo schermo.