Comecando-nosso-codigo

Prévia do material em texto

1 
Módulo 02 
Começando nosso código 
 
00:00:00 Então vamos seguir agora. Você já deve ter feito seu cadastro aí no site do Repl.it, e aqui 
eu estou no site do Repl.it a gente vai logar junto. 
Depois que eu fiz o cadastro, coloquei lá o meu login, criei o meu login, eu vim aqui, nesse cantinho 
superior “login”. 
E aqui é onde eu vou fazer; digitar o meu e-mail no campo e-mail, e a minha senha aqui no campo 
senha. 
E entramos aqui no Repl.it, tá? Vai abrir essa página aqui. 
No meu já tem algumas coisas que provavelmente vai ser diferente do seu, porque eu já uso o 
Repl.it faz um tempinho, então ele vai acumulando ali os projetos. 
E agora a gente vai começar a desenvolver o nosso site da Ada. 
Então para isso a gente vem aqui, nesse botão onde está escrito “+”, tem um símbolo de mais no 
Repl.it, que é aqui onde a gente vai criar um novo diretório, uma nova pasta, para o nosso site da 
Ada. 
Vai abrir aqui, essa janelinha, e vai ter um campo ali de busca, que é “Search for a language. Então 
procure uma linguagem. 
Qual é a linguagem que a gente vai começar? A primeira vai ser HTML. Então a gente coloca aqui 
nesse campo “HTML”. 
Reparem que ele dá uma sugestão aqui, “HTML, CSS, JS”, que é exatamente essa função que a 
gente vai usar. 
JS é abreviação para JavaScript. 
Então é aqui, olha, basta escolher essa opção, e clicar aqui embaixo em “Create Repl”. 
Okay, vamos ver o que vai acontecer aqui. Beleza, vai abrir essa página, esse quadradinho que 
está sobreposto aqui, ele vai pedir o nome do projeto. 
O nosso site vai ser “siteada”, tudo junto, minúsculo, sem acento, tá? 
Isso é um padrão, uma boa prática para nomes de pastas quando a gente está trabalhando com 
projetos de desenvolvimento de um site. Então vamos lá, “siteada”. 
Esse próximo campo aqui embaixo, ele fala “adicione uma breve descrição para este repositório”. 
Caso a gente queira colocar alguma descrição, a gente pode colocar nesse campo, mas o campo 
não é obrigatório. 
Então a gente vai colocar aqui só o nosso nome, “siteada”, e beleza. 
A gente clica aqui fora para começar. Okay, beleza, e aí que abriu a nossa pasta, do site da Ada. 
 
2 
Vemos aqui na tela do Repl.it que ela é dividida em três principais partes: essa parte aqui do canto, 
a do meio e a do outro canto. 
Vamos entender o que é cada uma delas no momento adequado. 
Começando aqui por esse canto, a gente vê aqui que tem a nossa estrutura de pastas. 
É aqui que vai ficar toda organização de pastas e arquivos que a gente vai utilizar nosso projeto. 
00:02:58 Por padrão, ele já começa com “index.html” depois “script.js” depois “style.css”. 
São três arquivos diferentes que já tem aqui por padrão. 
Nesse primeiro momento, a gente só vai precisar deste primeiro arquivo, “index.html”. 
O “script.js” a gente não vai precisar agora, e nem do “style.css”, então vamos deletar eles para 
deixar somente que a gente vai precisar. 
Para deletar esses dois, a gente vai vir aqui, passar o mouse em cima dele, vai abrir essas três 
bolinhas aqui, clica aqui nas três bolinhas, escolhe a opção “delete”. 
Vai abrir esse quadro, e vai perguntar “você tem certeza de quer deletar esse arquivo?”. Aí a gente 
clica em “Yes, delete this file”, o que significa “sim, delete esse arquivo”. 
A mesma coisa a gente vai fazer aqui para o “script.js”, que nós não vamos precisar neste 
momento. Então a gente só está com “index.html”. 
“.html” é a extensão do arquivo index, assim como o “.doc” é uma extensão de um arquivo de texto. 
Significa que a gente, quando coloca essa extensão, está falando para o computador, para o 
navegador, olha todo o texto que eu vou digitar que agora é da linguagem HTML então traduza e 
interprete como HTML. 
Então é por isso que a gente coloca essa extensão. 
Aqui na parte central é a parte onde a gente vai construir esses códigos, onde a gente vai digitar os 
nossos textos para construção do site da Ada. 
Como esse software, esses sites são modernos, eles tendem a facilitar a vida das 
desenvolvedoras. 
Ele já traz alguns códigos aqui que já são como pré-estabelecidos, padrão. 
Mas como a gente está aprendendo do zero, e vai ignorar essa dica que eles dão inicialmente. 
Como que a gente vai fazer isso? Vamos ignorar. Então clica, seleciona e arrasta. 
Selecionei todas essas 12 linhas, e deleto. Vou deletar tudo que ele colocou aqui no meio. 
Repara que agora que eu só tenho, ficou tudo em branco, eu só tenho o número 1 e um aviso. 
O que é esse número 1? Esse número 1 é o número de linhas. 
Cada linha aqui no nosso código HTML vai ser numerada. 
Então se eu der um enter aqui, ele pula para linha 2. Mais um enter, linha 3, e assim por diante. 
Numerar as linhas enquanto a gente constrói os nossos códigos é muito importante. 
Lá no futuro a gente vai entender bem melhor como essa numeração de linhas vai nos ajudar. 
 
3 
Então vou voltar aqui para a minha linha 1. E aqui é onde a gente vai digitar. 
Daqui a pouquinho a gente fala desse cantinho aqui, vamos entender melhor para que ele serve. 
Então agora vamos fazer o nosso primeiro exercício, nosso primeiro site. 
Esse daqui vai ser o site que a gente vai fazer, deixa eu ligar aqui minha canetinha. 
00:05:58 Então vai ter aqui, olha, um cabeçalho, aí tem outro parágrafo falando da importância das 
mulheres na tecnologia, e um outro parágrafo aqui. Esse é o nosso primeiro exercício. 
No dia a dia de desenvolvimento, a gente não precisa se preocupar com os textos. 
Geralmente os textos vem da equipe de textos, que passa para as desenvolvedoras e fala “olha, 
cria este site”. 
Então a preocupação da desenvolvedora é só codar, é só escrever os códigos para criar a página. 
Os textos geralmente vêm prontos, então aqui a gente já deixou o texto pronto para vocês também. 
Caso você ainda não tenha pego, é só pausar esse vídeo e voltar na atividade e pegar o texto para 
que a gente siga juntas, tudo bem? 
Eu já deixei aqui o meu texto num bloco de notas. Aqui eu vou copiar, assim como vocês aí, e vou 
colar aqui onde o meu cursor está piscando na linha 1. 
Ótimo, ficou muito bom. Vamos aqui, como é um cabeçalho, vamos pular uma linha aqui, para ficar 
cabeçalho, parágrafo, e outro parágrafo, assim como está aqui na referência do nosso primeiro 
exercício. 
Então vamos voltar lá para o Repl.it, legal. 
Tudo que a gente faz aqui no ambiente de desenvolvimento aqui no Repl.it, a gente precisa salvar, 
porque pode ser que aconteça que eu clico em algum botão errado, ou cai energia e a internet, e 
se a gente não salva, a gente com risco de perder tudo. 
Então é muito importante salvar cada linha nova que a gente insere, cada coisinha que a gente 
digita aqui. 
E aqui no Repl.it a gente vai salvar clicando aqui neste botão “run” verde, aqui em cima. Repara 
que está escrito e tem uma setinha. 
Eu clico e aí, olha só, agora apareceu alguma coisa aqui na terceira parte do o meu Repl.it. 
Essa terceira parte aqui é como se fosse o navegador na internet. 
Então repare que aqui eu tenho o endereço, e aqui é a renderização da página. 
Renderização da página é a forma como o computador vai lendo nosso código e vai mostrando 
para gente. Tudo o que ele mostra para a gente, a gente chama de renderizar. 
A página está sendo construída, desenhada de forma que a gente entenda na tela do computador, 
então a gente chama de renderizar a página 
Então a gente pode ver aqui como ficou o nosso site. 
Se eu clico aqui nesse símbolo, que é um quadradinho com uma seta, eu transporto. 
 
4 
O que aconteceu? Abriu uma nova aba aqui no meu navegador com o site que eu acabei de 
construir, certo? 
Aqui eu posso ver, nessa aba, eu posso ter essa visualização menorzinha, ou eu posso abrir o meu 
site. Se eu quero ver numa aba toda no navegador, eu posso ter essa visualização também. 
Era para ter ficado assim, certo? Uma coisa assim, bonita, aqui minha canetinha, com cabeçalho, 
com parágrafo, outro parágrafo. 
Mas seu site estáassim? Seu exercício ficou assim? 
Não, né, está estranho ainda, não está muito igual, não ficou separada aqui a palavra 
“PrograMaria”, aqui eu tenho várias linhas, e aqui eu só tenho duas, três, não está igual. O que 
aconteceu? 
Eu fiz, eu copiei lá, igualzinho como estava aqui, e na hora de renderizar, renderizou assim, tudo 
estranho, tudo errado. Por que será que isso aconteceu? 
A gente vai entender o que aconteceu e aprender mais daqui a pouquinho