Oi, hoje nós finalmente vamos escrever algum código, e
eu vou te mostrar como você pode usar um editor.
Uma das maiores armadilhas que eu já vi muitos dos meus alunos fazerem é que eles ouvem
com muita atenção o que eu estou dizendo, em vez de realmente tentar mergulhar e
começar a codificar, eles mesmos.
Por isso, enquanto te encorajo a sentar e ver o que vou fazer agora, daqui a
pouco espero que te sentes e que vás codificar comigo.
O primeiro passo é que você precisa criar e editar seus arquivos.
Uma das maiores armadilhas que você vai encontrar é que você
estará salvando seus arquivos em todo o lugar, você não será capaz de encontrá-los mais tarde.
Então decida como organizará seus arquivos.
Qual é o nome da sua pasta?
Onde você vai colocá-lo?
Em segundo lugar, você precisa decidir sobre uma convenção de nomenclatura.
Esta é apenas uma maneira chique de dizer para decidir como você vai nomear seus arquivos.
Então, embora muitas pessoas usem um Mac, e você tem permissão para usar espaços em seus
nomes de arquivos, isso não é algo que você queira fazer quando você está escrevendo código.
Então decida que se você tem duas palavras que deseja juntar,
você vai usar sublinhados para conectá-los ou usar algo que chamamos CamelCase,
onde você capitaliza a primeira letra de cada palavra.
Basta lembrar, nunca use espaços e
seja muito consistente sobre sua capitalização se você estiver indo para usá-lo.
Finalmente, você precisa decidir sobre um editor.
Se estiver usando um computador Windows, o bloco de notas já está integrado.
Você também pode considerar o uso do Notepad ++ ou Sublime.
Se você estiver usando um Mac, TextEdit é o editor padrão,
embora muitas pessoas também usem TextWrangler.
Vou usar o Sublime durante todo o resto do curso, mas por hoje
vou mostrar-lhe exemplos de como editar no Bloco de Notas e TextEdit também.
Então, para começar, vamos rever rapidamente os cinco passos que vamos
fazer, alguns deles repetidamente.
Você vai começar abrindo seu editor, e então você vai salvar seu arquivo,
adicionar algum conteúdo, salvar o arquivo novamente e abri-lo em seu navegador.
Quero mostrar-vos um exemplo rápido, e
vou usar o Sublime para o fazer.
Mas não se preocupe, eu vou seguir em frente e
mostrar-lhe algumas das outras maneiras de fazê-lo também.
Então eu trouxe o meu editor Sublime aqui, um belo arquivo preto.
Vou começar indo para o arquivo.
E salve.
E eu vou nomeá-lo apenas firstpage.html.
Agora, uma das coisas que você precisa decidir imediatamente é onde
você vai salvar isso.
Espero que tenha decidido isso antes mesmo de começar a trabalhar.
Vou manter o meu numa pasta chamada páginas Web que coloquei na minha área de trabalho.
Mas você pode escolher qualquer coisa aqui, ou mesmo se você quiser,
se você clicar para o lado aqui, você pode criar uma nova pasta.
O que você não quer fazer é salvar todo o seu código em sua área de trabalho.
Vamos salvar.
E agora, embora haja muitas vezes que vou forçar-te a sentar-te e
ver-me a escrever horrivelmente no ecrã, esta, só para poupar tempo,
vou fazer batota e colar um código que já escrevi.
Como podem ver, tenho o meu tipo de médico, a secção da cabeça e o corpo.
Na cabeça, incluí minha codificação e meu título.
No corpo, só vamos dizer olá.
Eu entrei e salvei usando Ctrl+S.
Você sempre pode fazer Arquivo > Salvar, mas acho que Ctrl+S é muito mais rápido.
E para cada editor que você usa, há essas pequenas
chaves úteis para ajudá-lo a saber se você mudou ou não alguma coisa.
Então, se você olhar agora para firstpage.html, o que pode ser difícil
para você ver, se eu fosse entrar e mudar alguma coisa.
Você realmente tem um pequeno círculo para que você saiba que você não economiza em
um pouco de tempo.
Então eu fui em frente, eu criei conteúdo e agora é hora de eu abrir minha página.
Uma forma de o fazer é ir até aqui para a minha pasta.
E oh, aqui está firstpage.HTML.
Para mim, há um pequeno ícone do Chrome para o lado.
Para você, pode ser um navegador diferente.
Eu vou ir em frente e clicar nele e trazer minha FirstPage, e eu tenho sucesso.
Eu não posso enfatizar o suficiente que na maioria das vezes quando você digita algo no início,
na verdade não vai funcionar para você.
Para mim, felizmente, tenho o poder de editar.
Você não tem idéia de que me levou algumas tentativas para fazer o arquivo funcionar,
porque eu estava mexendo com algumas coisas.
Ao longo de todo o curso,
vou tentar mostrar-lhe áreas onde você pode ter um problema.
Espero que não, mas se o fizer, eles são muito simples de consertar.
Um dos problemas mais comuns é que quando você clica com o botão direito
do mouse no arquivo, em vez de abrir bem no navegador, ele abre seu editor.
Se você quiser corrigir isso, tudo que você precisa fazer é clicar com o botão direito do mouse no arquivo e
selecionar Abrir com.
Outra questão que acontece bastante é que quando você abre seu arquivo, em vez
de ver uma página da web bem formatada, você realmente vê todas as suas tags.
Quando isso acontece, você precisa verificar sua extensão de arquivo e
certificar-se de que ela diz .html, e não algo como .text ou .rtf.
Outro problema que acontece um pouco é que você altera seu código, mas
sua página parece exatamente a mesma.
Há duas razões pelas quais isso tende a acontecer.
Um deles é que você tem que fazer algo chamado atualizar seu navegador.
Isso só significa que você carrega o conteúdo.
A segunda coisa que acontece com bastante frequência é que você esqueceu de verificar o
nome do arquivo.
Deixe-me mostrar-lhe um exemplo deste.
Então vamos voltar ao nosso arquivo original.
Como você pode ver, eu tenho Hello World escrito aqui.
Isto é um tipo de ciência informática para se dizer e
como estou a tentar parecer mais normal, vou mudar isto para “Olá a todos”.
Entro e guardo o meu ficheiro.
Feito.
Bem, quando eu voltar para a minha página web, ainda diz “Olá Mundo”.
Não mudou e estou meio chateada com isso.
Então, agora eu me lembro que muitas vezes é necessário atualizar sua página.
Há várias maneiras que você pode fazer isso,
você pode normalmente ir para a pequena área circular aqui em cima e clicar em Atualizar.
Você pode clicar com o botão direito do mouse e clicar em Recarregar ou você também pode ir para Exibir, desculpe.
Você também pode fazê-lo através da barra de ferramentas na parte superior.
Então, eu vou em frente e refrescar-me bem aqui.
E você pode ver agora que eu tenho o Hello Everybody.
O outro problema que mencionei é que às vezes as pessoas mudam seu nome de arquivo.
Então talvez você não esteja mais trabalhando em sua FirstPage.
Então você decidiu que eu vou salvar isso como Arquivo > Salvar como segunda página.
Salve isso.
Eu vou voltar aqui e vou atualizar o arquivo.
Olá a todos.
Bem, nada aconteceu.
Vais descobrir que isto está a acontecer uma e outra e outra vez.
Quando você está lidando com muitos arquivos ao mesmo tempo,
você tem que se certificar de que o que você está olhando no navegador corresponde ao
que você está digitando.
Como mudei o nome do meu arquivo,
preciso lembrar de alterá-lo aqui na barra de URL também.
Boom.
Outra questão que surge com bastante frequência é essa idéia que você tem,
o que vamos chamar, personagens estranhos.
Uma das razões número um para
isso acontecer é o meu antigo favorito, copiar e colar.
Sempre que eu lhe dou código e você está olhando para ele através do PowerPoint,
o problema é que quando você copia e cola, muitos dos caracteres não traduzem
exatamente como você esperava, e você recebe o que chamamos de caracteres estranhos.
O culpado número um são as aspas.
Então, sempre que você estiver digitando e tiver algum tipo de coisa estranha que você não está
esperando, volte e tente digitar o código manualmente.
Então eu mostrei a você como criar e editar um arquivo no Sublime.
Mas quero ter certeza de que todos tenham a chance de ver
como posso criar arquivos usando os editores que eles têm em seu próprio computador.
Então eu também vou mostrar um exemplo no TextEdit e também no Bloco de Notas.
Eu realmente espero que quando você assistir esses exemplos, você terá seu computador fora,
e você vai digitar junto comigo.
Vá em frente e pare, pare as coisas, não vá em frente no vídeo até se sentir
confiante de que está no ponto em que cheguei a mim mesmo.
Olá a todos!
Agora vamos fazer um arquivo com o TextEdit.
E se eu quisesse ser mau, eu iria através e
mostraria a vocês um exemplo muito rápido e simples de fazer um arquivo no TextEdit.
Mas em vez disso, vou ser muito honesto com você e admitir que demorei cerca de
15 ou 20 minutos para descobrir como fazer um arquivo realmente simples no TextEdit.
Então, primeiro, deixe-me mostrar o que fiz de errado.
Tudo bem?
Vou em frente e colar o meu código para a minha página muito simples.
Certo, vamos nos livrar disso.
Lá vamos nós. Acabamos de receber o nosso cabeçalho e o nosso conteúdo.
Então, você pode digitar isso à medida que avançamos, ou você pode esperar.
Então é hora de eu salvar o arquivo.
E o que eu preciso fazer é ter certeza de que estou salvando na pasta apropriada
com o nome do arquivo.
Então eu vou ir em frente e chamar este FirstPage e
eu vou descer aqui e eu quero ter certeza de que eu salvar isso como uma página web.
Então, uma das opções é .html, então eu vou clicar sobre isso.
Eu sei que tenho o meu firstpage.html,
está na pasta que eu quero e eu realmente sinto que devemos ser bons para ir.
Então eu vou em frente e salvá-lo.
Agora, eu vou até aqui para a pasta de páginas da web, abri-lo.
E vai abrir no Chrome.
Então, vamos ver como vai.
Não era isso que eu esperava quando gravamos este segmento pela primeira vez,
e levei muito tempo para descobrir o que estava acontecendo.
A primeira coisa que eu fui verificar, deixe-me fechar isso,
é que eu quero ter certeza de que minha extensão de arquivo realmente tinha sido .html.
E foi, não havia um .txt ou um .rtf depois dele.
A próxima coisa que eu entrei e
verifiquei é que todas as minhas citações estavam indo no caminho certo.
Então vamos em frente e colocá-los, porque se você se lembra,
eu estou sempre dizendo que copiar e colar às vezes pode dar citações ruins.
Então podemos voltar de novo.
Ainda sem sorte.
Se você estiver usando TextEdit, você realmente precisa entrar e
fazer algumas alterações no Programa TextEdit.
Não tem nada a ver com o que está digitando.
Tem a ver com o Programa TextEdit.
Então eu vou continuar, copiar isso caso eu perca, e limpá-lo.
E eu vou até TextEdit, selecionar Preferências, e
você pode ver que temos duas opções.
Novos documentos e Abrir e Salvar.
Então, uma das primeiras coisas que vou dizer é: “
Sempre que eu tiver um novo documento, eu gostaria que ele fosse em texto simples.”
Não rtf, ou rich text, mas texto sem formatação.
A segunda coisa que você quer fazer é vir aqui para abrir.
Veja os arquivos HTML de exibição é código HTML?
Vamos em frente e clicar nisso.
E, finalmente, a coisa mais importante é quando você salva seus arquivos,
queremos salvá-los como utf8.
Então eu vou fazer uma pausa aqui por um segundo,
apenas um segundo, enquanto você olha para o seu próprio menu TextEdit.
Você quer ter certeza de que você tem essas caixas marcadas e
você as alterou para Unicode, utf8.
Ok?
Se você estragou tudo, desça para restaurar todos os padrões e tente novamente.
Vou fechar isto.
Vou em frente e fazer New, colar meu código.
Isso é muito pequeno para você, mas tudo bem.
Faça Arquivo > Salvar.
E vamos chamá-lo de FirstPage2.html.
Você pode ver imediatamente ele diz, você quer usar a extensão HTML ou
o texto ponto?
E eu vou dizer, use HTML.
Antes de clicar neste embora eu quero apontar que aqui em baixo,
ele está mostrando que ele vai salvar como Unicode utf.8.
Eu posso me livrar deste aviso, se eu quiser, desclicando neste,
se nenhuma extensão for fornecida, use .txt.
Então vamos usar html.
Vamos passar por aqui, vamos cruzar os dedos, vamos esperar pelo melhor.
E agora tenho uma página de sucesso.
Então, se você estiver usando TextEdit, não há realmente muito que você precisa fazer,
exceto pela primeira vez que você configurá-lo.
Certifique-se de ir para as preferências.
De lá eu posso agora entrar, fazer mudanças, nós fizemos isso.
Salve e atualize.
Então, espero que agora você possa salvar e editar um arquivo com sucesso.
Ok, então digamos que você está usando um PC para criar seus arquivos.
O que você quer fazer é provavelmente você quer usar o Bloco de Notas no início, já que
é a versão gratuita do editor que já está em sua máquina.
A primeira coisa que eu fiz,
foi que eu fiz uma pasta direita na área de trabalho onde eu posso manter meus arquivos.
Eu sei que é pequeno, você provavelmente não pode vê-lo, mas é chamado de páginas web.
Se você não sabe como criar uma pasta, só para
saber, você pode clicar com o botão direito do mouse na parte superior da mesa, ir para Novo e Criar uma pasta.
Depois de criar a pasta onde você deseja salvar seus arquivos, eu vou,
imediatamente, ir em frente e dizer Arquivo > Salvar,
e eu vou nomear este firstpage.html.
É muito, muito importante que você inclua o .html.
Se você não incluir isso,
o computador vai pensar que você está apenas trabalhando em qualquer outro tipo de arquivo antigo.
Então eu vou descer aqui e mudá-lo de documentos de texto para todos os arquivos.
Vá em frente e salve.
Opa, já existe, mas vou dizer que está bem.
Agora, é hora de eu colocar em algum conteúdo.
Vou trapacear um pouco aqui e copiar e colar meu conteúdo,
mesmo que você tenha que digitar pouco a pouco.
Então, novamente, eu tenho meu doctype, minha linguagem HTML é igual a Inglês,
meta charset é igual a UTF-8, meu título e meu conteúdo.
Só por precaução, vou entrar aqui e colocar minhas citações de volta.
Porque citações sempre me deixam nervoso quando eu faço copiar e colar, que talvez eu tenha colocado
em algum tipo de personagem que meu editor não vai reconhecer.
Agora que eu estou muito feliz e certeza que eu tenho as coisas que eu quero no meu
arquivo, eu vou ir em frente salvá-lo novamente,
ir para a minha pasta, e clicar em FirstPage.
E lá vamos nós.
Então, agora, toda vez que você vai mudar seu arquivo você pode simplesmente manter
ambas as janelas abertas se você tiver a sala.
Faça suas alterações.
Job, eu tenho um arquivo.
Salvar.
E recarregue.
Bom trabalho.
Você criou um arquivo usando o Bloco de Notas.