Exercício - Configure a estrutura do seu aplicativo Web

  • 5 minutos

Existem diferentes maneiras de criar e gerenciar projetos de sites. Algumas dessas diferenças dependem das ferramentas específicas que você tem e das preferências da sua organização. Ao criar um site, não é incomum que a estrutura do seu projeto mude ao longo do tempo, à medida que se torna mais complicada. Grandes projetos muitas vezes exigem um maior grau de cuidado e atenção para que muitas pessoas possam manter tudo organizado. A chave é manter uma aparência de organização, e existem estratégias comuns para ajudá-lo.

Nesta unidade, você cria uma pequena estrutura de projeto usando o Visual Studio Code. O projeto tem três arquivos: um arquivo HTML, um arquivo CSS e um arquivo JavaScript. Você também adiciona uma extensão de código do Visual Studio para simplificar a execução do site em seu navegador.

Criar uma nova pasta para o seu site

  1. Abra o Visual Studio Code.

    Quando você abre o Visual Studio Code, a página de boas-vindas é aberta. Observe que você pode criar um novo arquivo ou abrir uma pasta na lista Iniciar .

    Captura de tela da página Introdução ao código do Visual Studio.

    Se a página de boas-vindas não estiver visível, você poderá exibi-la selecionando Ajuda > Bem-vindo no menu. (Em alternativa, pode apresentar a seringa Página de boas-vindas abrindo a Paletade Comandos usando o atalho de teclado Shift+Ctrl+P em um computador Windows ou Shift+Cmd+P em um macOS, ou selecionando Exibir > Paleta de Comandos no menu Código do Visual Studio. Quando a Paleta de Comandos for exibida, digite no campo de pesquisa para abrir a >.)

  2. Selecione Abrir pasta na lista Iniciar da página de boas-vindas ou selecione > aberta de arquivo no menu Código do Visual Studio.

    Captura de ecrã da caixa de diálogo Abrir pasta do sistema operativo Windows.

    Quando você abre uma pasta, o sistema operacional tem uma opção de menu para criar uma nova pasta.

  3. Navegue até o local onde deseja criar a nova pasta para seu site e selecione Nova pasta.

  4. Nomeie a pasta simple-website e selecione Selecionar pasta.

    Importante

    Se uma caixa de diálogo Código do Visual Studio for exibida, selecione Confiar nos autores de todos os arquivos na pasta pai...; este é o recurso Confiança do Espaço de Trabalho que permite decidir se as pastas do projeto devem permitir ou restringir a execução automática de código. Você acabou de criar a pasta, então é seguro.

Criar alguns ficheiros

  1. Crie um novo arquivo selecionando > no menu ou usando Control+N no Windows ou Command+N no macOS.

  2. Salve o arquivo selecionando Control+S no Windows ou Command+S no macOS.

  3. Digite index.html o nome do arquivo e selecione Salvar.

  4. Repita as etapas anteriores para criar mais dois arquivos: main.css e app.js. Quando terminar, a pasta de projeto de site simples no Visual Studio Code Explorer deve conter os seguintes arquivos:

    • index.html
    • main.css
    • app.js

    Captura de tela de seus arquivos no modo de exibição Visual Studio Code Explorer.

Você pode criar um site incluindo todos os seus HTML, estilos CSS e código JavaScript em um único arquivo. No entanto, neste exercício, você está usando um arquivo HTML para seu conteúdo, um arquivo CSS para seu estilo e um arquivo JavaScript para sua interatividade.

Configurar três arquivos ajuda a manter seu projeto de site organizado. A separação de conteúdo, estilos e lógica é um exemplo de aprimoramento progressivo. Se o JavaScript não estiver ativado ou suportado pelos seus clientes, o CSS e o HTML continuarão a funcionar. No entanto, se o CSS não for suportado pelos seus clientes, pelo menos o seu conteúdo HTML aparecerá.

Instalar extensões ou pacotes

Você pode estender a funcionalidade do Visual Studio Code usando o mercado de extensões. Tenha em mente que essas extensões são recursos desenvolvidos pela comunidade e, muitas vezes, há várias soluções para o mesmo tipo de recurso. Você pode instalar extensões individualmente em seu editor ou várias ao mesmo tempo usando a linha de comando.

Para desenvolvimento web, tudo que você precisa agora é aberto no navegador. Esta extensão ajuda você a abrir rapidamente o site em seu navegador padrão, em vez de copiar e colar o URL do arquivo em seu navegador.

Para instalar essa extensão, use as seguintes etapas:

  1. Selecione o ícone Extensões na barra de atividades vertical (painel esquerdo).

  2. Digite abrir na caixa de pesquisa e, em seguida, selecione a extensão abrir no navegador publicada pelo TechER.

  3. Selecione Instalar e o Visual Studio Code instala a extensão.

    Captura de tela mostrando a barra lateral da extensão Visual Studio Code com as palavras 'open in' no campo de pesquisa e uma lista de extensões correspondentes.

  4. Volte para o Explorer clicando no ícone superior na barra de atividades ou use Control+Shift-E no Windows ou Command+Shift-E no macOS.

É isso mesmo! A instalação e a configuração levam um pouco mais de tempo, mas você só precisa instalar e configurar uma vez. Agora você está pronto para criar um site.