Desenvolvimento Web

O que é?

Quando pensamos em desenvolvimento web, normalmente pensamos em criação de sites. Porém, essa área da programação vai muito além.

Com o avanço das tecnologias principalmente pela internet e a necessidade das pessoas em estarem sempre conectadas, essa área de desenvolvimento cresceu e evoluiu muito.

Os sites antes com informações estáticas, agora estão sempre atualizados e com seus conteúdos mudando constantemente. Passaram de simples páginas web para sistemas web.

As linguagens de desenvolvimento evoluíram, e a cada dia surgem novas ferramentas de desenvolvimento, facilitando cada vez mais a criação e manutenção desses sistemas.

Desenvolvimento web é uma área da programação voltada para a criação de sites e sistemas web.

Para entendermos melhor o desenvolvimento web, vamos ver a diferença entre site e sistema.

Site

Site é um conjunto de páginas da internet com objetivo de divulgar, vender ou entreter seus usuários. A maioria das empresas possuem sites para divulgar suas marcas e produtos, podemos encontrar também sites de notícias, humor ou apenas um site institucional.

Todo site possui um endereço pelo qual ele pode ser acessado pelo navegador web. Este endereço é conhecido por domínio, URL, link, entre outros.

Site é uma página ou conjunto de páginas web.

Endereço da página.

Como um site funciona?

Basicamente quando acessamos o navegador web e inserimos o endereço do site, nós já conseguimos visualizar o seu conteúdo. Para podermos ter esse acesso é necessário que esse site esteja disponível, que ele esteja hospedado em algum servidor web.

Então, se eu decidir ter o meu próprio site, quais são os passos? O que eu preciso fazer para ter o meu site disponível na internet? Vamos à resposta.

Comprar um domínio

Domínio é o endereço web de um site, a sua URL. Devemos registrar um domínio fazendo a compra em um site responsável como por exemplo o Registro.br.

Criar um site

Desenvolver o site em questão, existem diversas empresas especializadas na criação de sites, porém isto tem um certo custo, que varia de acordo com o layout, conteúdo, tempo de desenvolvimento, etc. Para facilitar você pode usar sites como a Wix que ajudam a montar ou já te fornecem um layout pronto, bastando apenas alterar o conteúdo.

Hospedar seu site

Para seu site ficar online, é necessário hospedá-lo em um servidor. Existem alguns servidores grátis, porém com velocidade/quantidade de acesso limitada. Temos também várias empresas renomadas que fornecem esse serviço como a Locaweb e a Hostgator.

Para quem tem um conhecimento maior em configuração de servidores, temos também o Google e a Amazon que possuem serviços de nuvem e possibilitam hospedar sites e sistemas.

Se você optou por criar seu site na Wix por exemplo, você já tem a hospedagem de seu site oferecido pela plataforma

Existem diversas maneiras de criar e hospedar seu site, vale a pena pesquisar e tentar encontrar as ferramentas mais acessíveis que facilitem esse processo.

Estrutura de um site

Um site é construído através de marcações HTML, uma série de tags que interpretadas pelo navegador, geram o conteúdo na tela.

<h1> Marcação HTML para título </h1>

O código fonte de uma página pode ser visto pelo usuário da seguinte maneira:

Acesse a página web
Clique com o botão direito do mouse
Escolha a opção "Inspecionar"

Na direita da tela irá aparecer o código fonte da página.

Você pode acessar esse recurso através da tecla F12

Podemos ver uma nova guia com o código fonte com o comando Ctrl + U

Como criar um site

Criar uma página HTML é extremamente simples, basta você estudar marcações HTML.

Embora existam muitas tags diferentes, cada uma com uma função específica, você não precisa decorar todas, apenas conhecer as mais utilizadas, conhecer a estrutura de uma página HTML e utilizar a própria internet, que possui milhares de sites, vídeos e tutorias para te dar suporte. Por exemplo o site W3 Schools que possui muito conteúdo referente a HTML.

O arquivo pode ser criado em qualquer editor de texto, porém algumas ferramentas nos dão diversas vantagens em termos de velocidade e facilidade de desenvolvimento, como por exemplo o Visual Studio Code.

Como você pode ter notado ao acessar esses sites, muitos conteúdos estão em inglês, portanto para ser um bom desenvolvedor é necessário noções básicas de inglês.

Estrutura da página

Observe o código abaixo:

<html>
    <head>
        <title>Título da página</title>
    </head>

    <body>
        <h1>Exemplo de uma página HTML</h1>
    </body>
</html>

Essa é a estrutura básica de uma página HTML. Observando o código podemos identificar as tags e os elementos. Toda tag inicia com o sinal "<" e termina com ">" e dentro dele temos a tag. Algumas tags precisam ser iniciadas e finalizadas, assim recebem o símbolo "/" após o símbolo "<".

Por exemplo, para fazermos o título da página utilizamos a tag title. Então iniciamos com <title> e finalizamos com </title>. Dentro desse intervalo colocamos o título desejado:

<title>Título desejado</title>

Tag é a marcação html usada para compor um elemento html. EX: <title>

Elemento é o resultado das tags e seus conteúdos. EX: <title>Título desejado</title>

Para o título ser exibido, a tag <title> precisa estar dentro da tag <head>, que por sua vez precisa estar dentro da tag <html>. Parece confuso, mas é bem simples, veja só, todo conteúdo da página precisa ficar envolto da tag <html>, então teremos a seguinte estrutura inicial:

<html>

  "O conteúdo da página vai aqui!"

</html>

Feito isso, agora só precisamos definir o cabeçalho da página, que fica envolto da tag <head>, assim:

<html>
    <head>
        <title>Título da página</title>
    </head>
</html>

Agora colocamos o corpo da página, o seu conteúdo principal, que fica envolto da tag <body>. Iremos inseri-lo logo após a tag <head>:

<html>
    <head>
        <title>Título da página</title>
    </head>

    <body>
        <h1>Criando uma página HTML</h1>

        <p>
            Como você pode ver, criar uma página HTML até que é bem simples,
            basta prestar atenção onde se inicia e termina uma tag de marcação.
        </p>

        <p>Aqui temos um exemplo de um parágrafo!</p>
    </body>
</html>

Dentro da tag <body>, colocamos uma tag <h1>, que é uma tag usada para texto, no caso um texto destaque como um título. Usamos também a tag <p> pra criar parágrafos de texto.

Agora basta salvar esse conteúdo com extensão ".html" e o resultado será um arquivo que vai ser executado pelo navegador web.

Hora do exemplo!

Abra um editor de texto e insira o código fonte abaixo:

<html>
    <head>
        <title>Minha página HTML</title>
    </head>

    <body>
        <h1>Criando uma página HTML</h1>

        <p>
            Como você pode ver, criar uma página HTML até que é bem simples,
            basta prestar atenção onde se inicia e termina uma tag de marcação.
        </p>

        <p>Aqui temos um exemplo de um parágrafo!</p>
    </body>
</html>

Salve o arquivo com o nome index.html
Abra o arquivo index.html, o resultado será exatamente assim:

Título da página
Título do conteúdo
Parágrafo

É claro que isso é apenas o básico de uma página web, para se ter um site é necessário muito mais conhecimento na área, porém, você já consegue ter uma ideia de como funciona essa tecnologia.

Estilizar uma página html

O código acima monta uma simples página html, porém notamos que é muito diferente das páginas que costumamos visitar na internet, páginas coloridas, cheio de imagens e efeitos visuais.

Style

Para montarmos páginas mais bonitas é necessário aprofundar mais nossos estudos. O próprio html possui um atributo para estilizar um elemento. Atributos são parâmetros que colocamos em uma tag para que ela seja exibida da forma esperada.

    <h1 style="color: red">Exemplo de uma página HTML</h1>

Pelo atributo style podemos estilizar um elemento, alterando suas propriedades como cor, tamanho da fonte, alinhamento, etc. Veja mais no site W3 Schools

Observe o exemplo abaixo usando atributos para estilizar o nosso exemplo.

<html>
    <head>
        <title>Título da página</title>
    </head>

    <body>
        <h1 style="color: red; text-align: center; margin-top: 30px;">
            Exemplo de uma página HTML
        </h1>

        <p style="text-align: center;margin-top: 150px; color: blue;">
            Como você pode ver, criar uma página HTML até que é bem simples,
            basta prestar atenção onde se inicia e termina uma tag de marcação.
        </p>

        <p style="
            text-align: center;
            font-weight: bold;
            font-size: 20px;
            padding: 30px;
            color: white;
            background-color: blue">
            Aqui temos um exemplo de um parágrafo!
        </p>
    </body>
</html>

Resultado do código acima:

Note como já conseguimos alterar as características dos elementos da página, centralizando texto, alterando cores, etc. Porém esse recurso é mais interessante quando temos uma página simples com pouco código para dar manutenção, conforme um site vai crescendo esse recurso se torna insuportável e difícil de fazer alterações, sem falar que deixa o código visualmente poluído.

CSS

O código CSS é usado para estilizar uma página html usando um arquivo .css separado da página html, assim temos de forma bem defina e organizada cada parte do site. Na página html é necessário apontar a localização do arquivo css e colocar os atributos necessários nas tags que se quer estilizar. O arquivo css fica com os códigos de estilo e ajustes.

Hora do exemplo!

Crie uma pasta com o nome de exemplo-css para organizarmos nossos arquivos.

Dentro da pasta criada no passo anterior, crie um arquivo chamado index.html com o seguinte código:

<html>
    <head>
        <title>Exemplo CSS</title>

        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <h1 class="titulo">Este título de ser vermelho e centralizado</h1>

        <p class="texto-1">
            Este parágrafo deve ter uma borda azul e ficar centralizado, a fonte deve ter 18px.
        </p>

        <p class="texto-2"> Este parágrafo deve ter uma cor de fundo verde, texto branco, tamanho 20px e ficar centralizado! </p>

        <img class="imagem" src="https://cetesc.com.br/assets/img/Banner/Banner-01.webp" alt="Cetesc">
    </body>
</html>

Dentro da pasta exemplo-css crie um novo arquivo chamado styles.css e adicione o seguinte código a ele.

.titulo {
    color: red;
    text-align: center;
}

.texto-1 {
    border: 1px solid blue;
    text-align: center;
    font-size: 18px;
    padding: 10px;
}

.texto-2 {
    background-color: green;
    color: white;
    font-size: 20px;
    text-align: center;
    padding: 20px;
}

.imagem {
    max-width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Salve os arquivos e abra o arquivo index.html, o resultado será o seguinte:

Entenda o que foi feito

Apontamos o arquivo css que será utilizado para estilizar a página através da tag <link>
```
<link rel="stylesheet" href="styles.css">
```
Usamos o atributo class para informar o nome da classe de estilo que vamos usar em cada elemento
```
<h1 class="titulo">Este título deve ser vermelho e centralizado</h1>
```
No arquivo css, declaramos a classe e alteramos alguns atributos do elemento como cor, tamanho, alinhamento, etc.
```
.titulo {
    color: red;
    text-align: center;
}
```

Você pode aprender mais sobre css no site W3 Schools

Exemplo Online

Podemos usar o site Codepen para reproduzir este exemplo de forma online.

Esta ferramenta permite criarmos exemplos html, css e Javascript de forma simples e rápida.

Note que no Codepen não precisamos montar a estrutura inteira da página, apenas inserimos o seu conteúdo. Tão pouco precisamos apontar o arquivo css, apenas colocamos a classe e estilizamos no quadro CSS.

Esta ferramenta é muito útil para testarmos o que aprendemos, porém, para criarmos sites profissionais, vamos optar por usar um editor de texto mais profissional, que facilite o desenvolvimento, como o Visual Studio Code.

Bootstrap

É um framework gratuito que possui diversos componentes prontos para a criação de páginas html. É uma forma bem rápida e fácil de criar sites e com uma grande vantagem de seus componentes serem responsivos, ou seja, o conteúdo do site se ajusta conforme o tamanho da tela do dispositivo.

Hora do exemplo!

Para o nosso exemplo, vamos reproduzir esta página que foi feita apenas com recursos do bootstrap.

Crie uma pasta chamada exemplo-bootstrap

Dentro dessa pasta, crie um arquivo chamado index.html e insira o código inicial com a estrutura básica a página.

<html>
    <head>
        <title>Exemplo bootstrap</title>
    </head>

    <body>

    </body>
</html>

Para entendermos melhor, vamos dividir esse tutorial em partes, e implementá-las passo a passo.

Conforme o tutorial de instalação da página oficial do bootstrap, podemos usá-lo de duas maneiras, através do início rápido (jsDelivr) ou baixando seus arquivos. Para nosso tutorial, optamos por usar o jsDelivr.

Dentro do cabeçalho da página, vamos apontar o link do bootstrap.

<head>
    <title>Exemplo bootstrap</title>

    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
        crossorigin="anonymous">

    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous">
    </script>
</head>

Agora dentro das tags <body>, vamos iniciar o conteúdo de nossa página, começando pela navbar, a barra de navegação que fica no topo da página.

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <a class="navbar-brand" href="#">MINHA PÁGINA</a>

            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Contatos</a>
              </li>
            </ul>
          </div>
        </div>
    </nav>
</body>

O resultado no navegador é parecido com esse:

E no celular, a navbar fica no estilo mobile:

Agora vamos incluir o banner com a imagem principal.

<img src="https://cetesc.com.br/assets/img/Banner/Banner-02.webp" alt="Banner" class="w-100">

O resultado agora é esse:

O próximo passo é inserir a lista de áreas.

<div class="container">
    <div class="row justify-content-center mt-4">
        <div class="col-12 text-center mb-3">
            <h4>Cursos</h4>
        </div>

        <div class="col-4">
            <div class="card">
            <img
                src="https://cetesc.com.br/assets/img/SuperLiga/Cetesc-Informatica.svg"
                class="card-img-top mt-2" alt="Informática" style="max-height: 150px;">
            <div class="card-body">
                <h5 class="card-title">Informática</h5>
                <p class="card-text">Confira todos os cursos da área da informática</p>
                <a href="#" class="btn btn-primary">Ver cursos</a>
            </div>
            </div>
        </div>

        <div class="col-4">
            <div class="card">
            <img
                src="https://cetesc.com.br/assets/img/SuperLiga/Cetesc-Saude.svg"
                class="card-img-top mt-2" alt="Saúde" style="max-height: 150px;">
            <div class="card-body">
                <h5 class="card-title">Saúde</h5>
                <p class="card-text">Confira todos os cursos da área da saúde</p>
                <a href="#" class="btn btn-primary">Ver cursos</a>
            </div>
            </div>
        </div>

        <div class="col-4">
            <div class="card">
            <img
                src="https://cetesc.com.br/assets/img/SuperLiga/Cetesc-Beleza.svg"
                class="card-img-top mt-2" alt="Beleza" style="max-height: 150px;">
            <div class="card-body">
                <h5 class="card-title">Beleza</h5>
                <p class="card-text">Confira todos os cursos da área da beleza</p>
                <a href="#" class="btn btn-primary">Ver cursos</a>
            </div>
            </div>
        </div>
    </div>
</div>

E a página vai tomando forma.

Agora vamos implementar a parte de contato, onde temos uma informação de telefone e um formulário.

<div class="container">
    <div class="alert alert-success text-center mt-4" role="alert">
    Entre em contato pelo telefone (XX) XXXX-XXXX
    </div>

    <div class="row justify-content-center mt-5">
        <h6 class="text-center fw-bold">Se preferir, mande uma mensagem e entraremos em contato!</h6>

        <div class="col-6 p-2">
          <div class="mb-3">
            <label for="name" class="form-label">Nome</label>
            <input type="text" class="form-control" id="name" placeholder="Nome Sobrenome">
          </div>

          <div class="mb-3">
            <label for="email" class="form-label">E-mail</label>
            <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
          </div>

          <div class="mb-3">
            <label for="mensagem" class="form-label">Mensagem</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
          </div>

          <div class="d-grid gap-2">
            <button class="btn btn-primary" type="button">Enviar</button>
          </div>
        </div>
      </div>
    </div>

E por fim vamos inserir o rodapé da página.

<footer class="text-center mt-5 bg-dark p-3">
    <p style="color: #fff">Totos os direitos reservados</p>
</footer>

Pronto, página finalizada, em poucos minutos conseguimos montar uma página com recursos bem interessantes. É claro, que pra termos um resultado melhor, precisamos dedicar mais tempo nos estudos de layout, estilos, css, entre outros. Assim podemos desenvolver nossas páginas, criar elementos, estilos, cores e não depender dos estilos prontos que usamos em nosso exemplo.

Hora do exemplo!

Agora que você viu o básico de html e css, separamos alguns vídeos bem interessantes para ajudá-lo a aprofundar seus estudos:

Como criar um site HTML . Hostinger Brasil

Curso de HTML para iniciantes - Aprenda HTML em 1 hora - Matheus Battisti . Hora de Codar

Curso de HTML Para Completos Iniciantes - Felipe Rocha . dicasparadevs

Curso de CSS Para Completos Iniciantes - Felipe Rocha . dicasparadevs

Sistema

É um aplicativo online que pode ser acessado através de um browser por qualquer dispositivo. Possui a vantagem de ser mais acessível, visto que não é necessário baixar ou instalar no dispositivo para ser usado, porém, tem seu uso inutilizado caso o usuário não tenha acesso a internet.

Um sistema web visualmente pode até se parecer com um site, mas possui camadas de programação mais avançadas. Alguns possuem várias camadas, back-end, front-end, banco de dados, fazendo com que o desenvolvedor tenha que saber muito mais do que apenas html e css.

É necessário aprender alguma linguagem de desenvolvimento como Javascript, PHP. Conhecer alguns frameworks de desenvolvimento como Angular, ReactJs para facilitar o desenvolvimento. Ter noções de banco de dados, requisições web entre outros.

Para uma empresa ter um sistema web é muito vantajoso, pois facilita o gerenciamento de dados, pode ser acessado a qualquer momento e em qualquer lugar, pode evoluir e ter novos recursos facilmente entre outros.

Sistema web é um software que pode ser acessado pelo navegador.