Olá, aluno(a)! Não importa a sua idade, sua profissão e suas metas, aprender lógica e programar, muitas vezes, torna-se um constante desafio. Seu aprendizado nesta disciplina será útil não apenas para começar a desenvolver páginas na web, mas também para entender o funcionamento de aplicações que utilizam a internet e, quem sabe, criar um programa ou sistema para seus amigos, familiares e organizações que necessitam de profissionais capacitados no mundo atual em que vivemos.

O segredo é praticar e praticar. Não há limites para a sua imaginação, então, para aprender a programar, também não temos limitações. Seja bem-vindo(a) à esta jornada de aprendizado e conhecimento ao universo da lógica e da programação de softwares. Nesta lição, aprenderemos sobre o que faz um desenvolvedor Front-End, quais as linguagens de programação estudadas por ele, como HTML, CSS, JavaScript e TypeScript, e quais as regras de negócios que são desenvolvidas conforme a necessidade do cliente, no nosso caso, como fazer um pedido de uma pizza. Vamos lá!

Como aprender lógica de programação? Primeiramente, devemos praticar as técnicas de programação e desenvolver pequenos programas, começamos a pensar na forma como os sistemas funcionam na prática. É semelhante ao processo de aprendizado de uma criança. A criança não começa a ler um livro em seu primeiro dia de aula. Primeiro, ela começa a entender a diferença entre vogais e consoantes e treina muito para formar palavras que fazem sentido à sua necessidade do dia a dia. Depois que compreender a junção das palavras, como pai, mãe, pão, entre outras, começa o esforço para a etapa da leitura de uma página, até que leia um livro ou vários livros. Isto é semelhante a começar a aprender algoritmos e lógica de programação.

Começaremos com o conceito de página de internet: para que serve? Como é desenvolvida? Quais as linguagens de programação que existem para criar uma página de internet, por exemplo, a página do Google (https://www.google.com), do Facebook (https://www.facebook.com), da Netflix — Plataforma de Filmes e Séries Online — (https://www.netflix.com/br/), entre outras? 

Para implementar um site, primeiramente, devemos aprender sobre a linguagem HTML, tanto que os sites citados anteriormente abrangem e exploram essa linguagem. Para um desenvolvedor Front-End, é de suma importância entender e dominar seus conceitos e propriedades, como quais tags existem, como desenvolver uma página estruturada (semântica) e como criar sua própria tag ou elemento.

Nesta lição, começaremos a aprofundar e criar as estruturas conforme a necessidade do cliente, seja para desenvolver uma página de internet, um aplicativo para web ou mobile. O desenvolvedor de Front-End deve estar preparado para este tipo de desafio e saber utilizar ferramentas que facilitam o acesso à informação ao usuário de seu sistema.

Nesta lição, aprenderemos a desenvolver páginas de internet. Para isto, é essencial recordar um pouco de lógica de programação. A ideia é planejar a estruturação da página que implementaremos. Assim, devemos estar atentos aos detalhes e às regras de negócios que estudaremos. O objetivo é aprender a desenvolver pequenos programas para entender os conceitos e, também, a lógica de programação, para, depois, interagir com sistemas que estão disponíveis em nosso cotidiano. 

Pensemos no seguinte exemplo: sábado, à noite, o que gostamos de comer? Pense em algo com seus amigos e, de preferência, que seja em casa, ou seja, você precisará realizar um pedido. A situação é propícia para uma pizza, por exemplo. Então, você acessa a internet ou aplicativo, realiza a busca de quais pizzarias estão disponíveis e seleciona uma em seu smartphone para realizar seu pedido. Na maioria das vezes, esses sistemas são adquiridos pela empresa. Então, nesse exato momento, começamos a aprender sobre a regra de negócio que a pizzaria disponibiliza para seus clientes.

O cliente, para realizar o pedido, precisa conhecer o cardápio ou menu dos produtos disponíveis que a pizzaria fornece. Assim que o cliente realiza seu pedido, escolhendo o tamanho da pizza, a quantidade de sabores e as bebidas, este pedido é enviado em uma ordem de sequenciamento para o setor de produção de pizza da empresa, ou seja, a pizzaria terá um tempo para que a pizza seja produzida, e o mais complexo é como fazer para chegar quente na casa do cliente. Após realizado o pedido, o cliente precisa saber o valor que pagará e, também, a forma de pagamento a ser utilizada. O cliente pode optar por buscar a pizza até o local ou a pizzaria realiza a entrega e cobrará um valor, chamado taxa de entrega. Ao finalizar o pedido pelo cliente, a pizzaria deseja que o cliente responda um questionário rápido de, no máximo, um clique ou um toque no celular. Qual a satisfação em nosso atendimento? Sugestões, informações ou reclamações? E assim, sucessivamente.

Com esse exemplo, podemos observar a necessidade da programação no nosso cotidiano. Vamos, então, aprender um pouco mais sobre suas linguagens, como HTML, CSS, JavaScript e TypeScript, e também as regras para desenvolver o modelo de negócio que o cliente necessita realmente, conforme seu ramo de atividade.

Antes de começar a implementar, aprenderemos o básico sobre a linguagem HTML. O mais importante é saber escrever seus próprios programas e aprender a executá-los em tempo ágil. No mundo da programação, que envolve sistemas e computadores, existem diversas linguagens de programação, como citadas anteriormente, as quais estudaremos, separadamente, nas próximas lições.

Nesta lição, escolheremos a linguagem de programação HTML, que, como todas as outras, possui vantagens e desvantagens, porém o seu aprendizado neste momento é muito adequado, e uma das vantagens da linguagem é que não necessitamos instalar nenhuma interface ou software para começar a desenvolver nosso raciocínio lógico voltado para a programação de sistemas, ou seja, programação Front-End.

 Os desenvolvedores de Front-End trabalham no desenvolvimento de sites utilizando algumas linguagens, como: HTML, CSS e JavaScript. Esses desenvolvedores criam códigos que permitem aos usuários interagir com eles, de maneira amigável e, também, de forma que o site ou aplicativo tenha uma aparência desejável, fazendo com que os usuários acessem as informações ali depositadas (SILVEIRA; ALMEIDA, 2013).

A Linguagem de Marcação Hipertexto foi desenvolvida pelo britânico Tim Berners-Lee, que se refere a Hiper Text Markup Language, sendo um componente essencial para desenvolver sites e aplicativos. Permite inserir conteúdos e informações que sejam relevantes para os usuários que acessam o site. Um exemplo é quando realizamos uma busca pela palavra Front-End no site do Google. Como fazemos isso? Primeiramente, precisamos abrir um navegador (browser), neste caso, utilizarei o Chrome, navegador que a empresa Google disponibiliza para acessarmos as páginas de internet e realizarmos busca de conteúdos e informações. 

Digite, em seu navegador, o seguinte site: https://www.google.com.br/. Logo após, no campo de busca, informe a palavra Front-End. Perceba que, em menos de um segundo, o servidor do Google buscou, aproximadamente, 4.630.000.000 de resultados sobre o assunto. O que chama a atenção é a estruturação do layout do site, e é sobre isso que nos aprofundaremos nas próximas lições.

Para tornar-se um desenvolvedor em Front-End, é necessário dominar o HTML. O desenvolvedor Front-End é o responsável por elaborar e zelar pela qualidade, pelo excelente desempenho, pela estruturação, pela semântica e pela validação do HTML para o acesso de informações disponíveis no site. Por exemplo, se a semântica for ruim, o site não aparecerá nos resultados de busca do Google. Para uma organização, nos dias de hoje, isso se torna crucial para que tenha vantagem competitiva e seu produto seja destaque no mercado (GRONER, 2018).

Por exemplo, um supermercado precisa publicar suas ofertas e promoções toda a semana. Repare que, quando buscamos por ofertas de alimentos, para nós elas são disponibilizadas de acordo com a busca, todas as empresas que estão realizando suas promoções e alguns supermercados conseguem utilizar uma excelente semântica para que as promoções possam aparecer em primeiro lugar no site, facilitando, assim, a nossa pesquisa por esta informação, e quais os produtos estão disponíveis para realizarmos a compra.

Assim, precisamos entender e aprofundar um pouco mais no HTML para que esses erros não aconteçam com nossos códigos. HTML não é apenas decorar os códigos e despejar as informações para aparecerem no site, precisamos diferenciar títulos em nosso texto. Por exemplo, quais as etapas para escrevermos uma redação na escola? Qual a forma básica que aprendemos? Uma redação deve conter, no mínimo: título, parágrafos e conteúdo, como introdução, desenvolvimento e conclusão, de acordo com a temática sugerida. No título, teremos subtítulos e, ao escrever, conseguimos destacá-los em diferentes tamanhos. Se sabemos a diferença entre título e parágrafos, isto quer dizer que sabemos o que é semântica. Isto aplica-se às páginas de internet que acessamos. Se acessarmos uma página de notícias, por exemplo, teremos a semântica que foi criada para ela, obedecendo à validação e às regras que se aplicam ao seu desempenho (LEPSEN, 2018).

Para sabermos mais sobre como criar páginas de internet, estudaremos o conceito de tags, que são comandos que servem para criar um cabeçalho, identificar o título de uma página de notícias, como inserir uma imagem em seu texto, e assim sucessivamente. Ao criarmos um título, utilizamos sempre as tags <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. O código só pode ser inserido entre os sinais menor e maior. Por exemplo, no título da página, a tag utilizada é o <h1>. A letra h quer dizer heading (em português, significa “cabeçalho”) e o número representa o nível que estamos, no nosso caso, é o nível 1 (UZAYR, 2022).

Na primeira linha, a tag <div>, que serve para criar uma divisão, ou seja, um bloco em nosso código. Na segunda linha, temos um texto explicativo. Na terceira linha, surge a tag <a href="#">, muito utilizada para criar hiperlinks e serve para inserirmos outra url. Por exemplo, o Blog do Zezinho poderia ser uma url, como: https://www.blogzezinho.com.br. Assim que o usuário clicar no nome Blog do Zezinho, o navegador vai direcioná-lo para uma outra página, essa é a ideia de hiperlink. Assim, temos que fechar a página do Blog do Zezinho, e a semântica ou estrutura correta é utilizar </a>. Repare que, para fechar, é só utilizar a barra inclinada para a direita, com a tag específica. No caso da tag <div>, para fechá-la, é só utilizar a barra inclinada </div>. Um exemplo interessante, para entender melhor, é a tag <div>, observe a Figura 1.

Criar este código e compreendê-lo não é difícil, o problema é que os computadores não conseguem interpretar textos, mas, sim, números, ou seja, a linguagem que os computadores conseguem codificar são chamadas bits, que são compreendidos em apenas dois números: 0 e 1. Outro cuidado que devemos ter é quando queremos validar nosso modelo. Precisamos utilizar, em nosso código, informações complementares que são úteis para que outras pessoas possam entender. Veja o mesmo código disponível na Figura 2. 

A informação apresentada na Figura 2 deve ser acessível para qualquer ambiente. Se nós conseguimos ler, os computadores, também, devem conseguir interpretá-las e informar o modo correto para facilitar a leitura e para que a informação possa ser utilizada da maneira correta. Quanto mais detalharmos nossa informação, por meio de tags e estruturação, nomeadas semântica, mais usuários, inclusive os computadores e deficientes visuais, terão acesso à informação disponível em sua página de internet.

O desenvolvedor Front-End deve estar preparado para sempre aperfeiçoar seu código. Para isso, temos que estudar constantemente, isso não é uma tarefa fácil de fazer, mas é compensadora e satisfatória para obtermos conhecimento. Nesta seção, criaremos nosso primeiro código, de maneira simples, e o executaremos em um navegador, que, para nosso aprendizado, será o Google Chrome.

Para criar nossa primeira página com a linguagem HTML, abra o bloco de notas, disponível no menu do Windows, conhecido como editor de texto comum. Para abrir, clique na janela do Windows, localizada na parte inferior esquerda de sua área de trabalho. Clique em acessório do Windows e, depois, em bloco de notas.

Assim que abrir o bloco de notas, insira o seguinte código: <h1> Minha primeira experiência com HTML. </h1>. Dê um enter e digite a seguinte linha de comando: <p> Estou aprendendo a desenvolver minha primeira página em HTML. </p>. Salve seu arquivo em qualquer diretório do seu computador, por exemplo, na pasta documentos ou em sua área de trabalho, com o seguinte nome: minhaPagina.html. Não esqueça de trocar a extensão do arquivo de .txt para .html, senão, o arquivo não abrirá no navegador do Chrome. Para executar o arquivo minhaPagina.html, dê um duplo clique com o botão esquerdo do mouse do seu computador, então, abrirá no navegador padrão que está utilizando nesse exato momento. Como resultado, você tem um título, com a frase inserida dentro da tag <h1>, e, depois, em outra linha, o conteúdo do parágrafo indicado pela tag <p>. 

Agora saiba aplicar: crie um arquivo na linguagem HTML com o elemento <h1> com a seguinte frase: Como aprender sobre a disciplina de Programação Front-End. Depois, insira um parágrafo com o elemento <p> com a seguinte frase: A disciplina de Programação Front-End está relacionada à codificação de linguagens, como HTML, CSS e JavaScript, desenvolvendo seus próprios documentos que interagem com o usuário final.

Nas próximas lições, implementaremos o sistema de pizzaria, de maneira simples e prática, e também aprenderemos sobre a estilização das páginas por meio dos estilos em cascata de elementos, conhecido como CSS.