Índice
Entendendo o Modelo Cliente-Servidor (Client/Server)
O modelo cliente-servidor, do inglês "client/server", é um modelo de arquitetura de rede desenvolvido na década de 1970, nos Estados Unidos, baseado na troca de mensagens entre as requisições do cliente e o fornecimento das informações requisitadas, enviadas pelo servidor.
Essa estrutura é o modelo mais predominante para implementação de redes em larga escala, permitindo que as empresas personalizem
os componentes da forma mais conveniente para os seus objetivos, garantindo mais segurança das informações da empresa e facilidade no dia a dia.
Nesse modelo, diversos dispositivos podem se conectar a um servidor central para acessar recursos compartilhados, como arquivos, impressoras, bancos de dados, aplicativos e serviços de internet.
O cliente é relacionado aos dispositivos de computação, como computadores, notebooks, tablets e smartphones,
além de aplicativos que se conectam a servidores por meio de protocolos de rede para fazer uma requisição.
O servidor é o componente do sistema ou aplicação que recebe a requisição dos clientes e fornece as informações requisitadas
a partir de uma bases de dados, usada pelo servidor para armazenar e gerenciar dados usados pelos clientes.
Para que possa haver comunicação entre os dois lados, é necessário uma rede, que pode ser de área local (LAM) ou global (internet).
Convencionalmente, existe um conjunto de regras e procedimentos padrões que regem a comunicação entre cliente e servidor, os chamados protocolos de comunicação.
Os protocolos mais comuns são o HTTP (Hypertext Transfer Protocol) usado na web e o HTTPS, que certifica criptografia de ponta a ponta e garante a segurança do website.
O desenvolvimento back-end trabalha com linguagens server-side: JavaScript, Java, PHP, C#, Ruby, ASP.Retornar ao início ↑
O desenvolvimento front-end trabalha com linguagens client-side: CSS, JavaScript. Também usa o HTML, que é um arquivo de marcação.
Primeiros Passos com HTML
O HTML (HyperText Markup Language) é um arquivo de marcação que estrutura uma página web, responsável por organizar e apresentar informações para os navegadores, identificando cada elemento da página. Ele é formado por tags entre colchetes angulares e costumam vir em pares, com uma <tag de abertura> (opening tag) e uma <tag de fechamento> (closing tag) que abraçam o conteúdo entre elas. O HTML é um documento descritivo e pode ser aprimorado com outras linguagens para ampliar suas funcionalidades, como o CSS (Cascading Style Sheets) para estilizar a aparência da página (uma linguagem de estilos) e o JavaScript para definir sua interatividade (linguagem de programação).
Tags Básicas
| </> | Função |
|---|---|
| <!DOCTYPE html> | Define que o documento é HTML5 |
| <html> | Primeiro elemento do documento |
| <head> | Elemento que contém informações de metadados |
| <title> | Título da página que aparece na aba do browser |
| <h1> até <h6> | Títulos por tamanho (1 é maior, 6 é menor) |
| <p> | Elemento que define um parágrafo |
| <div> | Delimita espaço na página → display block: ocupa toda a horizontal |
| <span> | Delimita espaço na página para aplicar CSS → não é display block |
| <table> | Cria uma tabela → tags filhas: <tr> <th> <td> |
| <form> | Cria um formulário |
| <input> | Cria um campo de digitação |
| <a> | Adiciona um link |
| <button> | Cria um botão |
Retornar ao início ↑
HTML Semântico e HTML5
Como o HTML é o documento que estrutura uma página web, ele é o arquivo-fonte que será usado por mecanismos de busca da internet
para resumir o conteúdo do seu website, além de ser utilizado por leitores de tela para auxiliar usuários com deficiência visual.
Por tais motivos, é importante o uso de boas práticas do HTML, as chamadas tags semânticas.
Essas tags reforçam a função de cada elemento na página, fechando a janela de interpretação que usar apenas tags simples como
<div> podem gerar. No caso de um botão, por exemplo, a tag <button> carrega mais semântica que uma div, pois
o código será lido imediatamente como um botão.
HTML5 é a última versão do HTML e conta com melhorias nesse sentido, dando suporte a tags mais semânticas, criando estruturas mais claras, além de recursos de multimídia, como áudio, vídeo, gráficos vetoriais, animações e jogos, que exigiam o uso de JavaScript anteriormente, assim conferindo mais dinamicidade ao HTML. Isso também garante mais segurança para o website, pois depende menos de aplicações externas, como o Flash, contando com APIs que podem ser usados para criar aplicações web mais seguras.
Convenção de Tags no HTML5
É importante manter o código atualizado conforme as boas práticas de HTML5, para melhorar a experiência do usuário e a visibilidade
do seu website para mecanismos de busca e leitores de tela, além de proteger-se contra possíveis vulnerabilidades.
Algumas tags se tornaram obsoletas no HTML5, ou seja, não são mais suportadas por alguns navegadores, o que pode causar problemas
de compatibilidade, sendo aconselhável evitar usá-las. Confira abaixo algumas tags que estão obsoletas e como usar sua função no HTML5:
| Tag | Função | Substituir por |
|---|---|---|
| Centralizar o texto na página | Centralizar no CSS | |
| Alterar o tamanho, a cor e o estilo do texto | Estilizar no CSS | |
| Criar um quadro em uma página web | Estilizar no CSS | |
| Definir uma abreviação | <abbr> |
Retornar ao início ↑
Referências
Retornar ao início ↑