Olá, pessoal. Sejam bem-vindos à aula dois de programação paraa web 2. E nessa aula a gente vai fazer uma tela de login usando HTML 5.
Essa aula é uma revisão de programação para web 1, mas nessa aula aí, nessas nas próximas três ou quatro aulas, a gente vai criar uma tela de login, usar, trabalhar com a o CSS dessa tela e também da das telas que vão ser usadas no projeto final. e trabalhar também com as telas de PHP. Então, é importante que você entenda cada passo dessa aula.
Se você não entender essa aula, pode voltar e tentar entender novamente, mas mesmo assim, se você não entender, manda um e-mail pro e-mail institucional do professor que ele vai responder. Tudo bem? Então, a gente inicia a aula de hoje abrindo Dramwever, que foi instalado na na sua máquina das aulas aula um, né, durante a aula um, aula passada.
Eu vou ensinar como é que cria, né, um arquivo HTML com o Dram. Tudo bem? Então, estamos iniciando o software aqui.
Enquanto isso, eh, vamos lembrar também de mandar um e-mail pro professor pedindo o acesso da pasta Drpbox de web, todas o o código fonte da aula de hoje e todo tudo que tá acontecendo na na aula de programação para web 2. Tá bom? Então, tá aberto o Dram Waver.
Aqui eu venho em arquivo novo e aí vai aparecer essa caixa de diálogo. Eu vou clicar em HTML e vou clicar em criar. Tudo bem?
E com isso é aberta uma janela, né? Aqui com código HTML 5 básico, né? Eu vou salvar isso.
Como é que eu salvo, né? Esse essa página, né? Eu venho em arquivo, salvar como.
Bom, geralmente eu salvo no C, no perdão, no D, mas na máquina de vocês vocês geralmente devem salvar no C. Então cliquem ou no C ou no ou no disco local C ou no disco D para poder salvar. Vou clicar no D, mas pode ser que na sua máquina você tenha que clicar no C e clique em nova pasta.
Aí essa nova pasta eu vou chamar aqui de web 2. Bom, criando uma nova pasta aqui. Vou clicar do lado de fora para criar a pasta.
A pasta já está criada. Em seguida, eu dou dois cliques para salvar, para entrar fisicamente na pasta, né? Para entrar eh na pasta que eu acabei de criar.
E aqui eu vou chamar de aula dois. Então, todo arquivo HTML tem a extensão ponhtm ou ponhtml. Você sabe disso, de programação para web 1.
Então aqui eu vou criar a aula 2. html, tudo bem? Então dentro da pasta, o disco de web 2, vai ter uma página lá dentro chamado aula 2.
Pessoalou, página já tá salva. Agora eu quero executar essa página. Então você vem aqui embaixo, ó, na na inferior direita e clica aqui, né, em visualizar.
E aqui você tem as opções de visualizar no seu browser, no browser que tá instalado. No meu qu, no meu caso, são quatro, quatro navegadores e também tem a opção de você poder executar no teu mobile usando o QRcode. Eu vou selecionar aqui o Google Chrome e aqui está a nossa página executada, né?
Não tem nada porque eu não coloquei nada, mas eu vou vou ao longo da aula vou explicando para vocês o que que vai acontecer, tudo bem? Bom, eh vamos voltar paraa tela do Dram Weaven, né? Lembrando aqui, eh, HTML e barra HTML significa que nós temos um documento que é HTML e precisa ser interpretado pelo navegador da web.
Ah, o que tá em head/head são informações do cabeçalho da página e não vão aparecer na página. São informações como autor, para que que essa a página serve, para mecanismo de de busca das da da página do por parte dos pesquis dos pesquisadores da internet, né, dos buscadores da internet. Então, eh, isso aqui que a gente coloca entre barra head geralmente não vai aparecer na página, a não ser o ícone da página, mas são informações de controle da página.
Tudo que vai acontecer na página eu coloco entre o body e o barra body. Por exemplo, se eu colocar aqui, ó, H1, que é uma tag que escreve o texto grande, né? E aí é H1/H1.
Tudo que tá entre essas duas tags, o texto vai aparecer com o maior tamanho de formatação, né? E clico aqui, visualizar canto inferior direito. Ele pergunta se você quer salvar a sua página.
Lembrando, toda vez quando a página não tiver salvo, aqui nessa aba do nome da página, vai aparecer o nome da página e um asterisco informando que a página não foi salva ainda. Quando eu salvo esse asterisco vai sumir. Tudo bem?
Ó, cliquei em sim e aqui já tá aparecendo o código no entre o bore e o barra bor. Tranquilo até aí, pessoal? E também aquilo que eu falei, o asterístico sumiu dizendo que eu não fiz nenhuma modificação na página.
E a página tá salva por completo. Não necessito mais salvar a página. O asterístico então mostra quando eu preciso salvar a página para poder eh a página ficar atualizada no no disco, tá bom?
Bom, seguido as formalidades, a gente vai voltar para o nosso slide, né? Então, o que que eu fiz na aula de hoje, né? A cham didático, eu fui fazendo aqui no PowerPoint e vou deixar o código disponível para vocês lá na pasta do Drpbox.
Então, se se você não tem acesso ainda, peça acesso essa pasta. Essa pasta é importante pra gente. Eu só quero que você entenda o passo a passo da aula de hoje.
A disciplina web 2, ela é muito ligada à disciplina projeto final. Então, o ideal é que todos os alunos do grupo estejam programando para poder ir mais rápido. Com as aulas que eu tô tentando projetar, eu acho que vai ficar mais fácil para todo mundo poder acompanhar as aulas, OK?
Então, o que acontece? Professor acabou de falar da estrutura de uma página HTML, que tudo acontece nessas e entre as tags da linha, entre as linhas C e s, entre o body e o barra B. Se eu quiser que alguma coisa apareça na tela, eu coloco aqui dentro, tudo bem?
Então, a primeira as informações da do título da página, né, aqui não faz sentido para pra gente mexer agora. São apenas informações que tá em vermelho ali que não vão aparecer na tela. Eu só queria que vocês dessem uma olhada na linha seis, aonde eu tenho lá o link hell, né, e tenho toda uma uma linha, né, que que que tá tratando dos arquivos em CSS, do arquivo CSS da página, né?
Eu vou explicar isso mais na próxima aula, mas uma coisa que eu queria falar é que esse sinal de maior asterisco e eh dois ifens diz que você tá iniciando um comentário, né? Um comentário em HTML que é terminado pelo ifen, ifen e sinal de maior, tá? Então, sinal de menor asterisco, ifen, ifen, é um comentário e o e dois ifens de sinal de maior termina o comentário da página.
Tudo bem? Então, vamos avançar. Então, o professor começou lá eh entre as linhas 9 e 16, ele colocou lá o comando div, né?
O div dizendo que é um contêiner. O o comando div, né? serve é um, é dito tecnicamente chamado de contêiner, né?
Então, o que que é um contêiner? Um contêiner é algo que eu vou colocando coisas ali dentro. E nesse caso, os meus, eu tenho dois contêiners aqui, um chamado contêiner, né?
Porque ali tem na linha nove, você tem classe igual a contêiner. Então eu criei uma um contêiner chamado contêiner e na linha 13 eu criei outro contêiner chamado content, né? o conteúdo inglês.
Então, que que o que que é interessante? Eu posso agrupar elementos da minha tela dentro de um contêiner, tudo bem? E no CSS eu posso me referir a esses contêiners dando propriedades gráficas e de cor, independentemente para cada contêiner, tudo bem?
Então, a ideia do contêiner é justamente isso, tá bom? Eu comecei com um outro contêiner chamado login. Então tenho três contêers aí.
Contaêiner chamado contêiner, um outro contêiner chamado content e outro contêiner chamado login. A gente vai aprender por disso melhor na próxima aula, tá bom? Bom, avançando.
E aí eu criei dentro do container login um um elemento chamado formulário. Um formulário é como se fosse um formulário de papel, né? Você tem lá um conjunto de campos que você tem que preencher e esse conjunto de campos juntos tem um um significado.
No nosso caso da aula de hoje vai ser um formulário aonde o usuário vai colocar o seu login e a sua senha. vai apertar um botão e isso vai me levar para uma outra página, tá bom? Que é uma página que vai verificar se o login e senha do usuário geralmente existe.
Então, eu tô criando um formulário. Então, eh, eu faço isso através do comando form do HTML. Tudo bem até aí?
Esse método post, né, a gente aprendeu em programação para webin, né, o o mundo real, geralmente a gente não usa muito método get por questão de segurança, a gente vai usar o método post. Então esse método post é um método novo que é usado muito amplamente quando você programa em páginas eh PHP, tá? Tá?
Então, só memoriza eh que você tem que colocar o valor post agora e e não get. Tudo bem? Então, nós criamos ali um formulário e vamos avançar.
Bom, criado o formulário, o professor criou ali um um rótulo, né, um label, quer dizer, um texto na tela, tá? Tá? Então, eu posso pegar um texto na tela também e colocar eh colocá-lo entre as taglabel e bar label indicando que ele é um rótulo.
Rótulo é um texto, tá? E aí eu posso nomear esse rótulo, mas né, a princípio eu só tô fazendo isso e ele não tem muita utilidade agora, só vai ter utilidade no CSS. Mas na linha 20, né, eu tenho realmente um elemento que eu vou chamar de input.
Input é uma caixa de texto aonde o usuário digita qualquer coisa ali. Então o input seria esse elemento aqui, ó. Bem, dúvida até aí, pessoal?
Então, esse aqui é o rótulo, que é um texto solto na tela. Esse aqui também poderia ser um rótulo, tá? Mas esse aqui é um label.
Eh, se eu não me engano, Java tem tem um conceito de rótula, né, que é o J Label, né? Não sei se vocês já estudaram. Você tem lá um um elemento chamado J label.
Aqui é um input. Aqui é um label. Tudo bem?
E esse esse input ele tem um nome, né? Qual o nome dele? Nome underline login.
Tudo bem? Aqui, ó. Nome underline login.
Ele tem uma ID. Esse ID não é importante pra gente agora, mas o nome é uma propriedade importante para uma caixa de entrada. required significa que ele é um campo que você tem que preencher obrigatoriamente, tá?
E ele é do tipo texto, tá? Texto, ele pode ser tanto números, el é alfa numérico, pode ser tanto número quanto letra. E o place holder é o que ele vai ter quando eu carregar a página.
Nesse caso, ele vai ter, ele tá escrevendo a mesma coisa aqui que eu coloquei aqui. Esse código, pessoal, eu vou falar no final, é um código, ele não é ele não é da minha autoria, mas eu tô explicando ele por achar que ele é mais didático. No final, eu vou dar a citação desse dessa página, tá bom?
Então, nós fizemos aí uma caixinha aonde tá escrito assim: seu nome. Tudo bem? Vamos fazer uma outra caixinha que também tá escrito sua senha ou senha.
Vamos lá. Então, que eu coloquei aqui entre as linhas 23 e 27, tá ali a caixinha, tem um label escrito sua senha e tem uma outra caixinha chamada eh senha login. Tudo bem?
Então, eu tenho uma caixinha chamada nome login em cima e tem uma caixinha chamada senha login embaixo. Agora tá faltando o quê, pessoal? Tá faltando eu colocar o botãozinho para a gente poder clicar e passar para uma outra página.
Bem, professor, quando o senhor quando a gente clicar no botão, a gente vai para qual página? Por enquanto nenhuma, porque na linha 16 o parâmetro action tá vazio, né? A gente tem que colocar aqui no parâmetro action qual vai ser a próxima página que a gente vai e avançar.
Isso a gente vai aprender na na aula na na terceira aula depois dessa, né? Essa na primeira, segunda, na terceira aula a gente vai aprender a mexer com esse parâmetro é. Tudo bem?
Eu não sei. Agora vamos botar o botãozinho. Como é que eu boto o botãozinho?
É um outro input chamado submit. Então esse submit é um botão de subção, né? submeter a informação para o submeter a informação para o para o do formulário para alguma outra página.
Então, quando eu clico no submit, ele vai diretamente pra página que tá escrito aqui no parâmetro action da linha 16, tá? E o value significa o que vai tá escrito nesse botão submit, tá bom? Então aqui vai tá escrito a palavra logar.
Bom, pessoal, eh se tudo deu certo, né, eh a gente já criou a nossa nosso formulário de login, a nossa tela inicial de login que a gente vai usar no projeto final. Eu para fazer uma firulinha ainda, eu ainda acho interessante você perguntar pro seu seu pro seu usuário se ele ainda não é cadastrado, né? Então aqui você coloca aqui eh a palavra ainda não tem conta, né?
E aí você coloca aqui um link para ele se cadastrar. No meu caso, ele não tá indo para lugar nenhum porque eu ainda não tenho a tela de cadastro. Assim que a gente criar a tela de cadastro, a gente vai voltar na tela de login e colocar o endereço da tela de cadastro.
Esse jogo da velha que indica que essa página não vai para lugar nenhum. Quando você clica nela, ela permanece nesse nessa mesma página. Tudo bem?
E aqui eu dou os créditos da onde veio esse esse código fonte, tá bom? Essa é a nossa aula dois, né? A gente aprendeu bastante coisa.
Mais uma vez eu reitero a importância de vir sempre na tela, né, né, perdão, nessa aula e tentar fazer essa tela. Eh, é importante, né, dar, né, a importância paraa web 2 no projeto final. E eu espero que vocês estejam bem.
Qualquer dúvida, mande um e-mail institucional, professor. Não deixem de perguntar. Fiquem bem.
