[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,,Nós precisamos começar tentando entender formas, o básico.
Dialogue: 0,0:00:05.64,0:00:10.80,Default,,0000,0000,0000,,Mas não se preocupe, logo, suas formas estarão voando através da tela, mudando de cor e fazendo todo tipo de coisas legais que se consegue com programação
Dialogue: 0,0:00:10.80,0:00:12.77,Default,,0000,0000,0000,,Só fique conosco!
Dialogue: 0,0:00:12.77,0:00:14.64,Default,,0000,0000,0000,,Então vamos começar desenhando retângulos.
Dialogue: 0,0:00:14.64,0:00:20.87,Default,,0000,0000,0000,,A gente digita rect() para retângulos, depois abrimos parenteses, e depois quatro números, e eu vou explicar o que eles significam daqui a pouco
Dialogue: 0,0:00:20.87,0:00:23.94,Default,,0000,0000,0000,,...depois fechamos parenteses, e no final, nós só colocamos o ponto e vírgula
Dialogue: 0,0:00:23.94,0:00:26.00,Default,,0000,0000,0000,,Olhe, fantástico, um retângulo!
Dialogue: 0,0:00:26.00,0:00:29.67,Default,,0000,0000,0000,,E isso foi tão legal, então vão fazer de novo. Nós podemos tentar com números diferentes dessa vez.
Dialogue: 0,0:00:29.67,0:00:36.17,Default,,0000,0000,0000,,Talvez números maiores, e depois números menores no final, e olhe, outro retângulo.
Dialogue: 0,0:00:36.17,0:00:41.00,Default,,0000,0000,0000,,De fato, se nós tentarmos mudar o primeiro número para um menor, ele vai começar a se mover.
Dialogue: 0,0:00:41.00,0:00:47.97,Default,,0000,0000,0000,,Se nos mudarmos o último número para um maior e depois um menor, então ele só vai crescer e depois encolher. Interessante.
Dialogue: 0,0:00:47.97,0:00:51.88,Default,,0000,0000,0000,,Então como toda essa mágica acontece, você deve estar se perguntando?
Dialogue: 0,0:00:51.88,0:00:55.51,Default,,0000,0000,0000,,Bem, lembre-se que o seu computador é como um cachorro muito inteligente e obediente.
Dialogue: 0,0:00:55.51,0:01:00.22,Default,,0000,0000,0000,,Com o cachoro, talvez nós podemos dizer para ele sentar, ficar, e até rolar.
Dialogue: 0,0:01:00.22,0:01:03.30,Default,,0000,0000,0000,,Você só teria que dar a ele o comando sentar()
Dialogue: 0,0:01:03.30,0:01:07.05,Default,,0000,0000,0000,,Então em código, como você diria ao seu cachorro computador para sentar?
Dialogue: 0,0:01:07.05,0:01:19.72,Default,,0000,0000,0000,,Bom, o jeito que você faz isso é escrevendo o nome do comando, digamos "sentar", e depois 2 parenteses após que dizem para ele realizar o comando que você acabou de dizer, e depois um ponto e vírgula no final que diz "é, o comando acabou."
Dialogue: 0,0:01:19.72,0:01:22.22,Default,,0000,0000,0000,,E depois o seu cachorro computador iria sentar.
Dialogue: 0,0:01:22.22,0:01:32.37,Default,,0000,0000,0000,,Bem, é claro, o seu computador na Khan Academy não é um cachorro, então ele não sabe sentar ou rolar, mas ele sabe como desenhar retângulos, quando você chama a função rect(), e isso é bem legal também, certo?
Dialogue: 0,0:01:32.37,0:01:44.14,Default,,0000,0000,0000,,Então, isso é o que nós vamos fazer nessa linha. Nós chamamos o comando rect(), que é só o nome, e depois abrimos paranteses e fechamos parenteses para dizem "vá fazer aquilo", e depois o ponto e vírgula no final.
Dialogue: 0,0:01:44.14,0:01:47.44,Default,,0000,0000,0000,,É assim que o seu computador sabe ir até essa habilidade especial rect.
Dialogue: 0,0:01:47.44,0:01:49.97,Default,,0000,0000,0000,,Ok, então agora vamos voltar ao nosso rect.
Dialogue: 0,0:01:49.97,0:01:53.67,Default,,0000,0000,0000,,Nós temos o nome do comando bem aqui, nos temos aqueles parenteses.
Dialogue: 0,0:01:53.67,0:01:56.87,Default,,0000,0000,0000,,Mas e todos esses números loucos?
Dialogue: 0,0:01:56.87,0:02:01.55,Default,,0000,0000,0000,,Bem, a ideia é que o computador realmente não sabe o suficiente se você só dizer a ele rect.
Dialogue: 0,0:02:01.55,0:02:09.67,Default,,0000,0000,0000,,Para entender isso, imagine que eu tivesse acabado de dar a você um pedaço de papel, e quisesse que você desenhasse um retângulo exatamente do jeito que eu quero que ele seja.
Dialogue: 0,0:02:09.67,0:02:15.11,Default,,0000,0000,0000,,Bem, a menos que você possa ler minha mente, você iria ter algumas perguntas de cara.
Dialogue: 0,0:02:15.11,0:02:20.17,Default,,0000,0000,0000,,Primeiro, você poderia se perguntar, "bem, ok, onde você quer que eu desenhe o retângulo?"
Dialogue: 0,0:02:20.17,0:02:28.01,Default,,0000,0000,0000,,E depois, eu diria "que tal se a gente concordasse que esse lado esquerdo do papel, nós vamos chamar de 0."
Dialogue: 0,0:02:28.01,0:02:30.64,Default,,0000,0000,0000,,E vamos concordar que o lado direito vai ser 400.
Dialogue: 0,0:02:30.64,0:02:37.54,Default,,0000,0000,0000,,Depois eu poderia te dar um número, tipo 100, e você iria saber que isso seria na direita por aqui, mais ou menos.
Dialogue: 0,0:02:37.54,0:02:43.88,Default,,0000,0000,0000,,Isso vai satisfazer você por um momento, mas depois você vai ficar tipo ok, isso me diz o lado, mas e o quão alto e o quão baixo?
Dialogue: 0,0:02:43.88,0:02:56.30,Default,,0000,0000,0000,,Depois eu poderia dar a você outro número, tipo 200, e eu diria que esse é o topo 0, e de novo o fundo é 200, e você diria, bem 200 vai ser bem no meio.
Dialogue: 0,0:02:56.30,0:03:02.97,Default,,0000,0000,0000,,E isso é perfeito, porque agora você pensa, ok, eu vou desenhar o retângulo bem aqui.
Dialogue: 0,0:03:02.97,0:03:06.67,Default,,0000,0000,0000,,...porque é 100 pro lado e 200 pra baixo.
Dialogue: 0,0:03:06.67,0:03:09.89,Default,,0000,0000,0000,,Exceto que você ainda não tem informação suficiente, porque agora o que você está perguntando?
Dialogue: 0,0:03:09.89,0:03:12.84,Default,,0000,0000,0000,,Você está pensando, quão grande eu quero que o retângulo seja?
Dialogue: 0,0:03:12.84,0:03:17.47,Default,,0000,0000,0000,,Eu diria, o que você acha de, 150 de largura?
Dialogue: 0,0:03:17.47,0:03:27.72,Default,,0000,0000,0000,,E você pensa, bem, isso é 100, e isso é 400, então se eu quero 150 de largura, talvez eu deveria ir até aqui.
Dialogue: 0,0:03:27.72,0:03:30.27,Default,,0000,0000,0000,,Ok, legal, isso é mais ou menos 150 de largura.
Dialogue: 0,0:03:30.27,0:03:31.72,Default,,0000,0000,0000,,Então depois você diria, o quão alto você quer?
Dialogue: 0,0:03:31.72,0:03:33.47,Default,,0000,0000,0000,,E eu vou dizer, "que tal 50 de altura?"
Dialogue: 0,0:03:33.47,0:03:39.39,Default,,0000,0000,0000,,Você vai dizer, ok, 50, isso é mais ou menos dessa altura.
Dialogue: 0,0:03:39.39,0:03:45.44,Default,,0000,0000,0000,,Agora você vai dizer, fantástico, eu sei exatamente onde você quer o seu retângulo, e sei exatramente o quão grande você o quer, agora eu posso desenhá-lo.
Dialogue: 0,0:03:45.44,0:03:48.05,Default,,0000,0000,0000,,Isso é bastante trabalho pra um retângulo, não é?
Dialogue: 0,0:03:48.05,0:04:02.20,Default,,0000,0000,0000,,Mas a idéia é que dando apenas aqueles 4 números, 100 pro lado, 200 pra baixo, 150 de largura, 50 de altura, nós agora estamos pensando igual sobre como esse retângulo deve ser.
Dialogue: 0,0:04:02.20,0:04:04.55,Default,,0000,0000,0000,,É assim que o computador trabalha também.
Dialogue: 0,0:04:04.55,0:04:16.55,Default,,0000,0000,0000,,Você pode escrever só o nome do comando como nós dissemos mais cedo-abre parenteses, os 4 números-100,200,150,50, fecha parenteses, e depois o ponto e virgula.
Dialogue: 0,0:04:16.55,0:04:20.55,Default,,0000,0000,0000,,E ele vai desenhar o retângulo exatamente onde nós queremos que ele desenhe!
Dialogue: 0,0:04:20.55,0:04:26.14,Default,,0000,0000,0000,,Bem, se nós formos honestos com nós mesmos, ali não é realmente onde nós queremos o retângulo - ali não é onde nós o desenhamos, certo?
Dialogue: 0,0:04:26.14,0:04:31.64,Default,,0000,0000,0000,,Nosso números estão um pouco errados. Então vamos continuar e dizer que nós queremos que ele seja exatamente igual ao que desenhamos
Dialogue: 0,0:04:31.64,0:04:43.72,Default,,0000,0000,0000,,Nós iramos mover ele para que fique um pouco mais à frente, um pouco menos pra cima e pra baixo, um pouco mais magro, e talvez um pouquinho menor.
Dialogue: 0,0:04:43.72,0:04:52.80,Default,,0000,0000,0000,,Agora nós temos que o nosso retângulo esta praticamente igual ao que desenhamos, porque nós entendemos o que cada um desses números significa, e nós podemos mudá-los para que ele pareça com o que nós queremos.
Dialogue: 0,0:04:52.80,0:04:55.44,Default,,0000,0000,0000,,Agora vamos pensar sobre desenhar outro retângulo.
Dialogue: 0,0:04:55.44,0:04:59.72,Default,,0000,0000,0000,,A beleza disso, é que nós podemos desenhar retângulos onde nós quisermos agora.
Dialogue: 0,0:04:59.72,0:05:04.60,Default,,0000,0000,0000,,Que tal a gente desenhar um bem nesse canto superior, bem em cima?
Dialogue: 0,0:05:04.60,0:05:06.84,Default,,0000,0000,0000,,Vamos pensar sobre onde isso seria.
Dialogue: 0,0:05:06.84,0:05:17.38,Default,,0000,0000,0000,,Seria tipo 0 pro lado, 0 pra cima e pra baixo, e talvez bem pequeno, tipo 50 de largua e 10 de altura.
Dialogue: 0,0:05:17.38,0:05:26.55,Default,,0000,0000,0000,,Vamos fazer isso. Nós vamos digita rect, separar os parâmetros com vírgulas, e dizer, ok, estamos prontos.
Dialogue: 0,0:05:26.55,0:05:35.50,Default,,0000,0000,0000,,Mas uh oh, nós temos esse erro que diz que está faltando o parenteses de fechamento, e nós percebemos que está mesmo, então nós vamos colocá-lo de volta.
Dialogue: 0,0:05:35.50,0:05:38.72,Default,,0000,0000,0000,,Mas uh oh, agora nós temos outro erro que diz que está faltando o ponto e vírgula.
Dialogue: 0,0:05:38.72,0:05:43.61,Default,,0000,0000,0000,,Se nós clicarmos "show me where", ele vai apontar para a linha que nós acabamos de escrever...
Dialogue: 0,0:05:43.61,0:05:49.20,Default,,0000,0000,0000,,...e nós lembrados que ponto e vírgulas são como pontos finais no fim de uma frase, mas no fim de uma linha de código, e nós esquecemos um.
Dialogue: 0,0:05:49.20,0:05:53.38,Default,,0000,0000,0000,,Nós podemos colocá-lo de volta, nada demais, e tudo está bem de novo.
Dialogue: 0,0:05:53.38,0:05:56.14,Default,,0000,0000,0000,,Veja só, um pequenino retângulo, exatamente como nós queriamos.
Dialogue: 0,0:05:56.14,0:06:03.80,Default,,0000,0000,0000,,Assim como antes, nós podemos aumento para ficar maior, nos podemos move-lo por aí, e nós podemos posicioná-lo exatamente onde nós queremos que ele esteja.
Dialogue: 0,0:06:03.80,0:06:07.60,Default,,0000,0000,0000,,Então agora você sabe em detalhes exatamente como essa rect funciona.
Dialogue: 0,0:06:07.60,0:06:15.67,Default,,0000,0000,0000,,Nós falamos o que esses números significam, e como você sempre precisa botar o nome do comando, e os parenteses, separar os números com vírgula, botar o ponto e vírgula no final.
Dialogue: 0,0:06:15.67,0:06:19.67,Default,,0000,0000,0000,,Parece muito, mas você pode ir e tentar isso você mesmo e sentir como se faz.
Dialogue: 0,0:06:19.67,0:06:23.67,Default,,0000,0000,0000,,Na próxima vez, nós vamos aprender sobre como fazer mais formas, e depois nós vamos fazer coisas fantásticas como fazer as formas coloridas e fazê-las voar pela tela.