Internet e Web

Internet

A Internet é uma rede mundial de computadores interconectados que permite a comunicação e o compartilhamento de informações entre usuários em todo o mundo. Ela é composta por milhões de dispositivos, servidores e roteadores, que trocam dados e informações usando um conjunto de protocolos de comunicação comuns.

Arquitetura Cliente/Servidor

Os bilhões de dispositivos ligados à Internet podem ser classificados como clientes ou servidores. Os clientes solicitam conteúdos/serviços. Os servidores provêm esses conteúdos/serviços.

Principais Serviços

Mídias Sociais
World Wide Web
Correio Eletrônico
Acesso Remoto
Colaboração
Compartilhamento de Arquivos
Streamming
VOIP

WEB

A World Wide Web (WWW ou WEB) é um sistema de documentos em hipertexto que são interligados e acessados pela Internet. Através da WWW, os usuários podem acessar uma ampla variedade de informações e recursos, como sites de notícias, redes sociais, blogs, fóruns e muito mais.

Arquitetura Cliente/Servidor

Principais Tecnologias

URL (Uniform Resource Locator)

Sequência de caracteres que identifica um recurso na Internet de maneira única e universal. Pode ser usada para identificar recursos como páginas da web, imagens, arquivos, serviços web, entre outros.

Sintaxe padrão: http://www.example.org/hello/world/foo.html

"http:" (protocolo) esquema de comunicação utilizado para acessar o recurso;
"www.example.org" (domínio) endereço do servidor que hospeda o recurso;
"/hello/world/foo.html" (caminho) caminho para o recursos no servidor.

HTTP (Hypertext Transfer Protocol)

Protocolo de comunicação utilizado para transferência de dados pela World Wide Web (WWW). Define a forma como as mensagens são formatadas e transmitidas entre os servidores e os clientes, permitindo o acesso a recursos como páginas Web, imagens, vídeos, arquivos, entre outros, disponíveis na Internet.

Modelo requisição/ resposta:

As requisições HTTP definem as ações que podem ser realizadas sobre um recurso identificado pela URI em uma aplicação Web. Existem oito verbos definidos pelo protocolo HTTP:

GET: solicita a representação de um recurso identificado pela URI;
POST: envia uma entidade para ser processada pelo recurso identificado pela URI;
PUT: substitui todas as atuais representações do recurso identificado pela URI pela entidade que acompanha a solicitação;
DELETE: remove o recurso identificado pela URI;
HEAD: solicita uma resposta que inclua apenas cabeçalhos;
OPTIONS: solicita informações sobre as opções de comunicação disponíveis para o recurso identificado pela URI;
TRACE: solicita um loopback de diagnóstico da mensagem solicitada;
CONNECT: inicia uma conexão em túnel para o servidor identificado pela URI.

Respostas HTTP, 5 famílias:

Exemplos:

Código

Mensagem

200

301

Movido permanentemente

302

Movido temporariamente

404

Não encontrado

500

Erro interno do servidor

503

Serviço indisponível

Acesso à API via HTTP:

Endpoint

Método

Ação

/users

GET

Retorna a lista de usuários

/users

POST

Insere um novo usuário

/users/{id}

GET

Retorna o usuário com o id = {id}

/users/{id}

PUT

Substitui os dados do usuário com id = {id}

/users/{id}

DELETE

Remove o usuário com id = {id}

HTML (Hypertext Markup Language)

Linguagem padrão usada para criar páginas da web na Internet. Linguagem de marcação, o que significa que consiste em um conjunto de tags de marcação que são usadas para estruturar o conteúdo em uma página da web.

Todo documento HTML é representado por uma estrutura de árvore conhecida como DOM (Document Object Model) que contém todos os seus elementos.

Tags base:

Tag

Descrição

<!DOCTYPE>

Tipo de documento

<html>

Início e fim do dDocumento

<body>

Corpo do documento

Cabeçalho do documento

<p>

Parágrafo

<br/>

Insere uma quebra de linha no texto

<hr/>

Linha horizontal

<!— ... -->

Define um comentário

Formatação de texto:

Tag

Descrição

<b>

Texto em negrito

<i>

Texto em itálico

<em>

Ênfase ao texto (itálico)

<a>

Define uma âncora

Ênfase ao texto (negrito)

<small>

Define um texto pequeno

<sup>

Define um texto sobrescrito

<sub>

Define um texto substrito

Formulários:

Tag

Descrição

Exemplo

form

Contêiner do formulário

<form> 
... 
</form>

input

Especifíca os campos de um formulário como:

text
submit
button
radio
checkbox
file
imagem
reset

<input type="text" name="Nome" /> 
<input type="checkbox" name="checkbox"/> 
<input type="radio" name="radiobutton"/>

textarea

Campo de texto muti-linha

<textarea name="critSuggest"></textarea>

select

Utilizado para listas selecionáveis

<select name="select">
   <option value="1">Unidade 1</option> 
   ... 
</select>

button

Botão do formulário

<input type="button" name="enviar" />

O uso de formulários é o meio mais simples para a prestação de serviços interativos na WEB;

O usuário precisa ter uma boa experiência, por esse motivo, torna-se imprescindível que o formulário seja compreensível, não só visualmente, mas também na sua formatação interna do HTML.

CSS (Cascading Style Sheets)

Linguagem de estilo utilizada para definir a aparência e o layout de uma página da web, incluindo cores, fontes, tamanhos de texto, posicionamento de elementos e outras características visuais.

Linguagem utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

Sintaxe básica:

seletor {propriedade: valor}

Seletor: em qual tag(s) HTML será aplicada a propriedade (i.e., body)
Propriedade: por exemplo, a cor do fundo (i.e., background-color)
Valor: por exemplo, a cor do fundo vermelha (i.e., #FF0000)

Exemplo:

#geral {width: 700px;}

JAVASCRIPT

Linguagem de programação de alto nível que é usada principalmente para criar interatividade em páginas da web e desenvolver aplicativos web.

Também é utilizada em desenvolvimento de aplicativos do lado do servidor, através do Node.js, que permite aos desenvolvedores usar JavaScript em ambientes de servidor.

Linguagem de programação popular e amplamente usada na criação de aplicativos da web, bem como em outras áreas, como aplicativos móveis, jogos e desenvolvimento de desktop.

Frequentemente usado em conjunto com outras tecnologias da Web como HTML e CSS, para criar aplicativos da web interativos e dinâmicos. Ele pode ser usado para validar formulários, criar animações, manipular o conteúdo da página e interagir com APIs de terceiros.

Possui ampla variedade de bibliotecas e frameworks disponíveis, como ReactJS, VueJS e Angular, que ajudam a tornar o desenvolvimento da web mais fácil e eficiente.

Anatomia de uma página Web

Frontend

HTML, CSS e JavaScript foram o grupo de tecnologias que definem o frontend de uma aplicação Web.

Bootstrap

É um framework de frontend para desenvolvimento de sites e aplicativos da web responsivos e mobile-first. Ele inclui um conjunto de componentes HTML, CSS e JavaScript pré-construídos que permitem criar rapidamente páginas da web com uma aparência consistente e profissional em uma variedade de dispositivos e tamanhos de tela.

Os componentes do Bootstrap incluem botões, formulários, taelas, tipografia, navegação, paginadores e muito mais. Ele também fornece uma variedade de utilitários de classe, como espaçamento e margem, cores, posicionamento e exibição, para ajudar na criação de layoutes personalizados.

Codepen

Plataforma online que permite aos desenvolvedores de frontend compartilhar e testar código HTML, CSS e JavaScript em tempo real. É uma ferramenta útil para prototipagem rápida e colaboração, bem como para aprender novas técnicas de codificação.

CodePen - Create a New PenCodePen

Pen (HTML, CSS e JavaScript)

Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo.

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Formulário de Cadastro</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="container">
        <form id="cadastroForm" action="#" method="post" enctype="multipart/form-data">
            <h2>Cadastro de Usuário</h2>

            <label for="matricula">Matrícula:</label>
            <input type="text" id="matricula" name="matricula">

            <label for="nome">Nome:</label>
            <input type="text" id="nome" name="nome">

            <label for="foto">Foto:</label>
            <input type="file" id="foto" name="foto" accept="image/*">

            <button type="submit">Enviar</button>
        </form>
    </div>
</body>
</html>

CSS

* {
    box-sizing: border-box; /* garante que padding + border não quebre o alinhamento */
}

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eef1f5;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

form {
    width: 380px;
    padding: 30px 25px;
    border: none;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0px 6px 18px rgba(0,0,0,0.1);
}

h2 {
    text-align: center;
    color: #222;
    margin-bottom: 25px;
    font-size: 22px;
}

label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #444;
    font-size: 14px;
}

/* Estilo padronizado para todos os inputs */
input[type="text"], input[type="file"] {
    display: block;
    width: 100%;
    padding: 12px 10px;
    margin-bottom: 18px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    transition: border 0.3s, box-shadow 0.3s;
}

input[type="file"] {
    padding: 8px; /* reduzindo o padding para alinhar melhor */
    background-color: #fff;
    cursor: pointer;
}

input[type="text"]:focus, input[type="file"]:focus {
    border-color: #4CAF50;
    box-shadow: 0px 0px 5px rgba(76,175,80,0.4);
    outline: none;
}

button {
    width: 100%;
    padding: 12px;
    border: none;
    background-color: #4CAF50;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #45a049;
}

JAVASCRIPT

document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("cadastroForm");

    form.addEventListener("submit", function (e) {
        const matricula = document.getElementById("matricula").value.trim();
        const nome = document.getElementById("nome").value.trim();
        const foto = document.getElementById("foto").files.length;

        let mensagensErro = [];

        if (matricula === "") {
            mensagensErro.push("O campo Matrícula é obrigatório.");
        } else if (!/^[0-9]+$/.test(matricula)) {
            mensagensErro.push("A matrícula deve conter apenas números.");
        }

        if (nome === "") {
            mensagensErro.push("O campo Nome é obrigatório.");
        }

        if (foto === 0) {
            mensagensErro.push("É necessário selecionar uma foto.");
        }

        if (mensagensErro.length > 0) {
            e.preventDefault(); // impede envio
            alert(mensagensErro.join("\n"));
        }
    });
});

PreviousAplicações Java com Spring Boot NextPadrão MVC

Last updated 5 months ago

hashtagInternet

hashtagArquitetura Cliente/Servidor

hashtagPrincipais Serviços

hashtagWEB

hashtagArquitetura Cliente/Servidor

hashtagPrincipais Tecnologias

hashtagAnatomia de uma página Web

hashtagFrontend

hashtagBootstrap

hashtagCodepen

hashtagHTML

hashtagCSS

hashtagJAVASCRIPT

Internet

Arquitetura Cliente/Servidor

Principais Serviços

WEB

Arquitetura Cliente/Servidor

Principais Tecnologias

Anatomia de uma página Web

Frontend

Bootstrap

Codepen

HTML

CSS

JAVASCRIPT