Você sabia que há diferentes maneiras de criar e gerenciar projetos de site?
Algumas variações ocorrem dependendo das ferramentas específicas que você tem e das preferências da sua organização.
Ao criar um site, é comum que a estrutura do projeto sofra alterações ao longo do tempo, conforme ele se torna mais complicado.
A chave é manter um semblante de organização e há estratégias para ajudar com isso!
Projetos grandes, geralmente, exigem um maior grau de cuidado e atenção para que as muitas pessoas envolvidas possam manter tudo organizado!
Aqui você criará uma estrutura de projeto simples que inclui três arquivos: um HTML, um CSS e um JavaScript.
Você também adicionará uma extensão do Visual Studio Code para simplificar a execução do site no navegador.
Vamos iniciar pela criação de uma nova pasta, seguindo os passos abaixo:
APÓS CRIAR PASTA DE AMBIENTE TRABALHO SEGUE
Instalar extensões ou pacotes
Você pode estender a funcionalidade do Visual Studio Code usando o Marketplace de extensões.
Tenha em mente que essas são funcionalidades desenvolvidas pela comunidade.
Você pode instalar extensões individualmente em seu editor ou instalar várias ao mesmo tempo, com a linha de comando.
Para o desenvolvimento para Web, tudo que você precisa agora é da open-in-browser.
Essa extensão ajuda você a abrir rapidamente o site no navegador padrão, em vez de copiar e colar a URL do arquivo no navegador.
Para instalar essa extensão
- Selecione o ícone de Extensões na Barra de Atividade (painel esquerdo).
- Digite “open in” (abrir no) na barra de pesquisa.
- Selecione open in browser (abrir no navegador 2.0.0), publicada pela TechER, e escolha Instalar.A extensão é instalada!
CRIANDO HTML COM ATALHO “html:5” digitar tab:
RESULTADO
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
</head>
<body>
</body>
</html>
PAREI EDITAR CABEÇALHO
Continuação 16/04
Criação de conteúdo
<body>
<h1>Task List</h1>
<p id=”#msg”>Current Task:</p>
<ul>
<li class=”List”>Visual List</li>
<li class=”List”>Add Light and Dark Themes</li>
<li>Enable Switching The Themes</li>
</ul>
</body>
//comentários
Um atributo de ID (usado no <p>) pode ser empregado para estilizar um elemento, enquanto o atributo de classe (usado no <li>) é usado para estilizar todos os elementos da mesma classe.
Cada elemento <li> de item de lista é agrupado em uma lista não ordenada <ul>.
Para visualizar usando o Visual Studio Code, selecione index.html e, em seguida, Abrir no Navegador Padrão ou use o atalho de teclado Alt + B.
Exibir a página usando ferramentas de desenvolvedor
Se o seu navegador é o Google Chrome, pressione o atalho de teclado das Ferramentas para Desenvolvedores F12 ou (Option + Command + I).
A guia Elementos das ferramentas para desenvolvedores mostra o DOM (Modelo de Objeto do Documento) como renderizado no navegador.
Durante a depuração, geralmente, é importante ver como o navegador interpreta o código-fonte.
Inspecionar a página em um navegador fornece todos os tipos de informações úteis e pode ajudá-lo a solucionar problemas.
Você também pode exibir detalhes de CSS com o inspetor, mas isso você verá mais adiante neste curso.
MOD 3 APLICAR ESTILOS CSS
esignar um arquivo HTML para a estrutura da página e um arquivo CSS para a definição de estilos e arquivos JavaScript para interação ou eventos é chamado de separação de interesses.
Como mencionamos anteriormente, você também pode escrever CSS diretamente em HTML, o que é chamado de CSS interno.
Mesmo para um site básico, há tantas regras de CSS que a página HTML pode ficar desorganizada muito rapidamente. Com mais de uma página, o mesmo CSS seria repetido com frequência e se tornaria difícil de gerenciar.
Os atributos personalizados são chamados de .list e #msg.
A lista do seletor de classe tem um prefixo de período,
enquanto o seletor de ID é msg e tem um prefixo de sinal de libra.
Os nomes são arbitrários, desde que eles correspondam ao que você definiu no HTML.
O seletor de :root representa o elemento <html> na página HTML.
Para esse tipo de tarefa, uma melhor prática é definir um conjunto de variáveis CSS globais no elemento :root.
Aqui, você define três variáveis de cor anexadas à raiz da página.
Vincular ao JavaScript
Assim como o CSS, você pode adicionar JavaScript diretamente à página HTML, mas recomendamos a você não fazer isso.
Por exemplo, você pode criar um alerta de pop-up adicionando <script>alert(‘Hello World’)</script> em qualquer lugar no corpo.
A marca de script <script> nos permitirá vincular a um arquivo JavaScript externo.
No Visual Studio Code, digite script:src e pressione a tecla Enter (Return).
O elemento de script pode ser colocado no <head> ou em outro lugar no <body>.
No entanto, colocar <script> no final da seção <body> permite que todo o
conteúdo da página seja exibido na tela primeiro, carregando o script em seguida.
Geralmente, você pode omitir o ponto e vírgula em JavaScript, mas é uma boa prática
revisar quando ele é necessário, antes de tomar qualquer decisão sobre isso.
Para melhorar a aparência do botão, adicione um seletor de pseudoclasse, btn:focus, após o seletor de botão.
Ao definir a regra de outline-style como none, você elimina um contorno retangular quando o botão é selecionado (recebe foco).
Adicionar um manipulador de eventos
Para fazer com que o botão realize alguma tarefa ao ser pressionado, você precisará de um manipulador de eventos no arquivo JavaScript.
Para um botão, você precisa de um manipulador do evento click. A função do manipulador de eventos é executada quando o evento click ocorre.
Antes de adicionar o manipulador de eventos, você precisa de uma referência para o botão.
Adicionar um manipulador de eventos
Para fazer com que o botão realize alguma tarefa ao ser pressionado, você precisará de um manipulador de eventos no arquivo JavaScript.
Para um botão, você precisa de um manipulador do evento click. A função do manipulador de eventos é executada quando o evento click ocorre.
Antes de adicionar o manipulador de eventos, você precisa de uma referência para o botão.
const switcher = document.querySelector(‘.btn’);
- No arquivo JavaScript, use document.querySelector para obter a referência do botão.
- Em seguida, adicione o ouvinte e o manipulador do evento click.
- No código a seguir, você adiciona um ouvinte para o evento click.
- A função passada para o ouvinte de eventos é seu manipulador de eventos real.
switcher.addEventListener(‘click’, function(){
document.body.classList.toggle(‘dark-theme’)
});
No código anterior, você usou o método toggle para alternar o elemento para a classe dark-theme.
Isso aplica, automaticamente, os estilos de tema escuro em vez do tema claro. No entanto, o rótulo do botão também precisa ser atualizado para mostrar o tema correto, portanto, você precisa adicionar uma instrução if para verificar o tema atual e atualizar o rótulo do botão.
Confira como deve ser o código JavaScript completo:
‘use strict’
const switcher = document.querySelector(‘.btn’);
switcher.addEventListener(‘click’, function(){
document.body.classList.toggle(‘dark-theme’)
var className = document.body.className;
if(className == “light-theme”) {
this.textContent = “Dark”;
}
else {
this.textContent = “Light”;
}
});
DICA
É uma convenção JavaScript usar letras concatenadas para nomes de variáveis
com mais de uma palavra – por exemplo, a variável className.
FINALIZANDO//
Recapitulando
Este curso chegou ao fim e é um bom momento para fazermos um pequeno resumo dos tópicos que você aprendeu ao longo dos módulos.
Então, vamos recapitular?
- Configurar a estrutura do seu aplicativo Web
- Adicionar um HTML básico ao seu aplicativo Web
- Aplicar estilos ao HTML com o CSS
- Adicionar interatividade com JavaScript