Front-End de Web Parte 2 (CSS e JavaScript)

101 de CSS e JavaScript

Continuando…

No último texto (disponível aqui) nós falamos sobre HTML, agora vamos falar o básico de CSS e JavaScript. A ideia é, novamente, nos basearmos no site que desenvolvemos para o Zero e Umas, como mostra a imagem abaixo.

CSS

Novamente, a melhor referência para aprender os básicos sobre CSS é no W3Schools. Vou deixar algumas referências em relação ao que estamos desenvolvendo!

Nós vamos trabalhar com o seguinte:

• Tags padrões do HTML no CSS;
• Nossas estruturas de posicionamento: linha e coluna;
• Imagens;
• Botões;
• Classes próprias para divs do HTML;
• Transições.

Vamos lá!

Para entenderem melhor, vou sempre colocar o código com uma numeração e logo abaixo a explicação de cada um dos números!

1. Precisamos garantir que o todo o nosso site esteja posicionado da forma correta, por isso fazemos o nosso *. Se não tratarmos as margens, as nossas seções não vão ocupar todo espaço. Mas se não tratarmos o box, vamos nos deparar com uma largura maior do que a disponível.
2. Em seguida, vamos fazer a configuração básica de todo o nosso html e body, colocando cores, a fonte que vamos utilizar, e as suas configurações.

Agora lembra tudo aquilo que eu estava falando sobre linhas e colunas? Vamos configurar tudo isso!

1. Precisamos considerar as características das nossas linhas. Cada uma vai utilizar 100% da largura, mas elas variam em relação ao espaçamento interno que queremos, podem ter alinhamentos diferentes para o texto.
2. Nossas colunas precisam ter o display block! Isso garante que elas comecem em linhas novas e que todos componentes ocupem toda largura. Note que as variações que fizemos são em relação à distância que possuem em relação às laterais.
3. Por fim, tratamos os .span-x-of-x. Neles, nós vamos tratar a largura dessas nossas colunas. Por exemplo, poderíamos querer mais do que 2 colunas por linha, então seria interessante diminuir a largura que elas ocupam.
4. Aqui nos componentes reutilizáveis, também temos as nossas seções. Para que a gente consiga utilizar a cor de fundo para elas, utilizamos uma padding de 80px!

1. As nossas headings, ou seja, boa parte do nosso texto, precisam ser estruturadas. Nesse caso, variamos a distância que elas têm da margem, o tipo de alinhamento, o tamanho da fonte e a largura. Explore isso nos seus sites, para trazer características diferentes para títulos, subtítulos e corpos de texto.
2. Algo interessante é a forma que tratamos o nosso texto. As tags de h1, h2, etc, são padrões do CSS, então não precisamos colocar o ponto antes, mas quando utilizamos uma classe que criamos em nosso HTML, o ponto vem antes.

Aqui temos as imagens que utilizamos na nossa plataforma.

1. Nós variamos a largura e altura delas, em porcentagem. Utilizamos a porcentagem ao invés de valores fixos para que ele se adapte nos diferentes tamanhos de telas.

Aqui estão os nossos ícones que utilizamos.

1. Quando fomos configurar os ícones das redes sociais, nós fizemos a mesma configuração. Isso foi decidido já que eles devem ter o mesmo tamanho.
2. Mas na hora de determinarmos como esses ícones funcionariam dentro do seu espaço conjunto, tratamos separadamente. Aqui mexemos nas margens para que as imagens ficassem alinhadas com o texto, ou com o footer.

Aqui nós temos os nossos botões: de inscrição e envio. Ambos os botões possuem configurações muito semelhantes. Vamos analisá-los em conjunto.

1. Em ambos os botões, o display é do tipo inline-block, porque precisávamos que o texto não quebrasse a linha.
2. Utilizamos uma fonte diferente nos botões em relação ao restante do site. Assim, adaptamos também seu tamanho e o espaçamento das letras.
3. Para o texto ficar de uma forma bonita e bem posicionada, mexemos no seu padding. Note que existe uma diferença entre os dois botões, já que eles têm tamanhos diferentes.
4. Mudamos a cor dos botões e de suas bordas. Escolhemos cores diferentes para cada botão.
5. Colocamos as margens necessárias para que eles ficassem posicionados corretamente. Aqui é de olho, então vá fazendo diversos testes.
6. O legal daqui foi a transição que adicionamos. Com ela, trocamos a cor de fundo do botão quando você passa por cima, para dar a sensação de seleção.
7. Para que essa mudança funcione, foi necessário adicionar input[type=submit]:hover e :active. Isso afeta ambos os botões. Aqui que determinamos qual será a cor da transição e a ação dela, nesse caso, o pointer do mouse.

1. Nós utilizamos o nosso logo somente em um lugar, na nossa barra de navegação.
2. Garantimos que ele ficasse na esquerda com o float: left.
3. Também colocamos margens para que ele ficasse posicionado exatamente onde queríamos.

1. O nosso header precisou ter uma cor e altura.
2. O legal aqui foi que colocamos a nossa altura como 100hv, isso garante que ela vai utilizar todo espaço da tela. No nosso caso, usamos somente uma cor, mas isso também ajuda a posicionar imagens.
3. Agora começamos a configurar a barra de navegação. A nossa main-nav tem os nomes das nossas seções. Ela tem o display: block, faz com que ela fique em uma nova linha e que use toda a sua largura; fica posicionada na direita; e uma margem para centralizar.
4. No li span dela, precisamos configurar a cor, posicionamento interno e a fonte.
5. Mas o mais importante foi a transição que adicionamos, que coloca uma borda sólida transparente abaixo do texto. Assim que o mouse passa por cima, acontece uma mudança.
6. Essa mudança acontece aqui, onde a cor da borda muda.
7. Mas, a nossa navegação não é só isso, ela também é uma barra que aparece em toda largura da tela. Essa é a nossa navegação grudenta. O principal dela em específico foi termos posicionado ela na frente de todos os outros componentes — z-index — , a sua cor e a sua posição fixa.
8. Por fim, os texto da nossa main nav fica dentro da ul. Por conta disso, é aqui que escolhemos o tamanho da fonte e o seu posicionamento.

Mas e o ícone e o texto que aparecem na nav? Bom, esses a gente já configurou lá em cima!

1. Nessa nossa seção de curso, precisamos determinar única e exclusivamente a sua cor e a sua altura.
2. Lembrando que essa altura continua 100vh para que seja possível ocupar todo o espaço focado da tela.

Agora entramos naquela atrevida seção do fale conosco…

1. Aqui já vemos a mudança na classe section-contact, sendo que a altura não é mais de 100vh, mas de 75vh. Isso foi feito para que logo nessa mesma tela, tenhamos o footer do nosso site.
2. Logo abaixo, nós mexemos com as text fields do formulário. Como vocês conseguem ver, nós fizemos isso de formas diferentes, mexendo com a classe, com a tag do HTML ou até mesmo a especificação do input. Assim vocês conseguem ver diferentes formas de acessar esses dados.
3. Tá, mas porque colocamos esse min e max ali? Se o conteúdo for menor que a largura mínima, a largura mínima será aplicada; se o conteúdo for maior que a largura mínima, a propriedade min-width não será executada. Isso impede que o valor da propriedade width se torne menor que a largura mínima.
4. Nós também escolhemos o padding deles aqui. A ideia de padronizá-los, é garantir que todos eles tenham o mesmo espaçamento interno para que o texto que aparece fique igualmente espaçado.
5. Só tratamos o textarea como algo a parte disso porque ele funciona de forma diferente. Se não quisermos que os usuários possam editar o seu tamanho, precisamos especificá-lo.
6. Por fim, tratamos o caso em que os dados são enviados com sucesso ou não, variando a cor de fundo.

Assim, chegamos na última parte do nosso CSS. Aqui vamos tratar o nosso footer mais especificamente. Já que o footer é uma tag padrão do HTML e CSS, não precisamos criar uma classe.

1. Para usarmos o último pedacinho da tela para o footer, vamos dizer que ele ocupa 25vh da altura (lembram que a gente colocou 100vh na anterior?).
2. A cor dela também deve ser adaptada.
3. Note que colocamos uma padding específica e igual em todos os lados. Isso vai deixar tudo que tivermos dentro centralizado.
4. Mexemos no tamanho da fonte, já que não precisamos de tamanhos de fontes diferentes, determinamos aqui qual será utilizada.
5. Por fim, mexemos no parágrafo que criamos em nosso footer, adaptando a sua cor, posicionando o texto à esquerda e adicionando uma margem em cima para ele ficar centralizado.

Assim, terminamos todo o nosso CSS para o site!!! Ufa hein hahaha.

JavaScript

Essa linguagem não é especificamente feita para websites. Na verdade, ela é utilizada em milhares de outras situações. Mas, ela também é muito útil aqui. Vamos dizer que você queira adicionar algo muito específico, como uma movimentação diferente para o seu site, é aqui que você brinca.

Mas, no nosso caso, foi aqui que fizemos a relação com o nosso Back-End (fique de olho que esse artigo vai sair nos próximos dias). Para isso, precisamos fazer duas coisas: a ligação com o HTML e o nosso código em JavaScript mesmo, vamos ver como eles funcionam!

No nosso HTML, além da ligação com o arquivo de JavaScript, nós também utilizamos a tag <script> para executar código em JavaScript dentro do próprio HTML.

1. Fizemos isso porque precisávamos adquirir os dados do nosso formulário, usando o .getElementByID().
2. Por fim, adicionamos um observador, que presta atenção e executa o código da nossa função handleFormSubmit() assim que o botão de submit for selecionado.

Bom, vamos ver como essa função funciona.

Essa função foi escrita dentro do nosso arquivo index.js.

1. Aqui, o documento procura a classe contactForm e pega os seus elementos.
2. Para que tenhamos as diferentes entradas do formulário, precisamos criar um novo FormData a partir dos dados adquiridos anteriormente.
3. Bom, agora começa a parte que vamos passar esses dados para o Back-End. Precisamos criar então uma nova solicitação de HTTP.
4. Feito isso, pegamos a URL da API que construímos para o Back-End.
5. Agora, de acordo com o CRUD, o que estamos executando é um POST, por isso precisamos especificá-lo. Isso acontece porque estamos criando dados novos.
6. O Header aqui faz parte do texto que será enviado para o servidor.
7. Por fim, transformamos os nossos dados em JSON, para que eles sejam recebidos da forma desejada no servidor.

Prontinho, agora os dados do formulários estão sendo passados corretamente para o nosso Back-End tratar!

Conclusões

Nesses últimos dias, aprendemos muito sobre o Front-End de Websites, com HTML, CSS e JavaScript. Acredito que todos podemos concordar que não é algo simples, é algo que necessita de muita atenção, cuidado e aprendizagem.

Estudem MAIS, aqui é só o comecinho, tem muito mais para aprender. Lembrando que nem mencionamos nada sobre responsividade! Mas acreditamos que esse pode ser o começo para vocês!

Busquem cursos e livros para estudarem tudo mais a fundo! Vamos deixar algumas referências para vocês logo abaixo.

Fiquem de olho porque ainda vamos explicar sobre como o Back-End desse site funciona, nos próximos dias.

Boa criação.

Referências

HTML e CSS: Projete e Construa Websites

Livro - JAVASCRIPT e JQUERY: Desenvolvimento de Interfaces Web Interativas no Submarino.com

https://www.udemy.com/share/101WqoAksfeVhURXw/