Introdução
A sigla IDE é um acrônimo em inglês para “Integrated Development Environment,” que, em português, pode ser traduzida como “Ambiente de Desenvolvimento Integrado.” Uma IDE representa um conjunto de software que congrega ferramentas essenciais destinadas ao desenvolvimento de sistemas, englobando, dentre outras, um editor de código, um compilador de código e um depurador de código (debugger). Essas ferramentas desempenham um papel crucial ao facilitar e otimizar o processo de programação.
Objetivos da aula
● Explicar o conceito de IDEs de desenvolvimento;
● Demonstrar o procedimento de instalação do Visual Studio Code (VS Code);
● Implementar a criação da primeira página HTML.
Resumo
As IDEs possuem funcionalidades que otimizam o processo de programação, abarcando desde correções de sintaxes incorretas até indentação automática de código, sugestão de código e esquema de cores para melhor visualização do código, dentre muitas outras características.
Entre alguns exemplos de IDEs estão: Netbeans, que é muito utilizado para programação em Java, assim como o Eclipse e Visual Studio Code (VS Code) que são muito populares para programação em diversas linguagens, incluindo o PHP, HTML e CSS.
Em nosso curso, iremos utilizar a IDE “Visual Studio Code” (VS Code). Para instalar o VS Code, é necessário fazer o download do aplicativo pelo seguinte endereço: https://code.visualstudio.com/Download. Em seguida, basta executar o programa para instalá-lo em sua máquina, seguindo as instruções do passo a passo da interface de instalação.
Explorando o VS Code e criando a primeira página HTML
O VS Code possui uma interface pela qual podemos instalar várias extensões que auxiliarão no cotidiano da programação. Dentre ~~~~essas extensões, destaca-se para este curso as extensões:
● IntelliSense for CSS class names in HTML: que fornece preenchimento de nome de classe CSS para o atributo de classe HTML, com base nas definições encontradas em seu espaço de trabalho ou em arquivos externos de folhas de estilo.
● Path Intellisense: que completa automaticamente os nomes dos arquivos que serão incluídos (como imagens) enquanto se digita o caminho deles.
● CSS Peek: essa extensão habilita a visualização ou navegação até a definição da classe CSS ao pressionar a tecla de atalho Ctrl e passar o mouse sobre a classe utilizada, ou ao clicar sobre a classe em questão, respectivamente.
Como criar a primeira página HTML do projeto?
Primeiramente, abra o Visual Studio Code, que você instalou em seu computador. Depois, clique em File, e em seguida em Add Folder to Workspace. Uma janela se abrirá, na qual você poderá escolher o local em seu computador onde você deseja criar a pasta do projeto. Escolha o local, crie a pasta do projeto e clique em Add. Agora, temos a pasta do projeto.
Em seguida, vamos criar o primeiro arquivo HTML do projeto. Para isso, clique com o botão direito do mouse na pasta do projeto que você criou e clique em New file. Aparecerá um campo para preencher o nome do novo arquivo. Vamos nomear este arquivo como index.html. Por que o nome index? Pois é, o nome do arquivo padrão para a página inicial de uma aplicação é o primeiro arquivo solicitado pelo servidor para ser exibido no navegador, caso nenhum outro seja especificado.
Agora, vamos adicionar algum conteúdo à página. Vamos escrever a frase “Olá, mundo!”. E por que esta frase? “Olá, mundo!” Ou “Hello, world!”, é convencionada para marcar a primeira frase utilizada a ser exibida por quem está iniciando um projeto e/ou aprendendo a programar!
Com a nossa primeira página HTML criada, surge a dúvida: como faremos para visualizá-la no navegador?