Fundamentos de Front-End Web

Cartões · 55

Protocolo HTTP

Protocolo da camada de aplicação baseado em requisição e resposta para transferência de recursos na Web.

HTTPS

Versão segura do HTTP que criptografa a comunicação entre cliente e servidor usando SSL/TLS.

Método GET

Método HTTP utilizado exclusivamente para recuperar dados de um servidor sem alterar seu estado.

Método POST

Método HTTP que envia dados no corpo da requisição para criar ou processar um recurso no servidor.

Método PUT

Método HTTP que substitui integralmente a representação de um recurso existente ou o cria caso não exista.

Método PATCH

Método HTTP que aplica modificações parciais a um recurso existente no servidor.

Método DELETE

Método HTTP destinado a remover um recurso específico do servidor.

Idempotência no HTTP

Propriedade em que múltiplas requisições idênticas produzem o mesmo efeito no servidor que uma única requisição.

Código de status HTTP 200 (OK)

Indica que a requisição foi processada e respondida com sucesso pelo servidor.

Código de status HTTP 201 (Created)

Indica que a requisição foi bem-sucedida e resultou na criação de um novo recurso.

Código de status HTTP 204 (No Content)

Indica que a requisição foi bem-sucedida, mas o servidor não precisa retornar corpo de resposta.

Código de status HTTP 301 (Moved Permanently)

Indica que a URL do recurso solicitado foi alterada permanentemente para um novo endereço.

Código de status HTTP 400 (Bad Request)

Indica que o servidor não conseguiu processar a requisição devido a um erro de sintaxe do cliente.

Código de status HTTP 401 (Unauthorized)

Indica que a requisição requer autenticação de usuário válida para ter acesso.

Código de status HTTP 403 (Forbidden)

Indica que o servidor entendeu a requisição, mas se recusa a autorizá-la, mesmo autenticado.

Código de status HTTP 404 (Not Found)

Indica que o servidor não encontrou nenhuma representação para o recurso solicitado.

Código de status HTTP 500 (Internal Server Error)

Indica que o servidor encontrou uma condição inesperada que o impediu de atender à solicitação.

Cabeçalho Content-Type

Informa ao destinatário o tipo de mídia MIME original do conteúdo transmitido no corpo.

CORS (Cross-Origin Resource Sharing)

Mecanismo que usa cabeçalhos HTTP para permitir ou restringir recursos requisitados entre origens distintas.

HTML Semântico

Prática de usar tags HTML que conferem significado estrutural ao conteúdo em vez de mero estilo visual.

Tag <header>

Representa o cabeçalho introdutório de uma página ou seção, contendo títulos, logotipos ou navegação.

Tag <nav>

Delimita uma seção da página destinada exclusivamente a links de navegação principais.

Tag <main>

Encapsula o conteúdo principal e dominante do documento, devendo ser exclusivo por página.

Tag <article>

Representa uma composição independente e reutilizável, como um post de blog ou notícia.

Tag <section>

Define uma seção genérica autônoma e temática em um documento, geralmente acompanhada de um título.

Tag <aside>

Identifica conteúdo complementar ou indiretamente relacionado ao conteúdo principal ao redor.

Tag <footer>

Define o rodapé de um documento ou seção, contendo direitos autorais, autor ou links relacionados.

Tag <figure> e <figcaption>

Agrupa conteúdo ilustrativo independente, como imagens ou gráficos, associando-o a uma legenda explicativa.

Tag <time>

Representa uma data ou horário legível por humanos e estruturado via atributo datetime para máquinas.

Tag <mark>

Indica texto destacado ou marcado para fins de referência devido à sua relevância no contexto.

Hierarquia de títulos (h1 a h6)

Estrutura a ordem de importância das seções, essencial para SEO e navegadores de leitura de tela.

Tag <form>

Define uma seção interativa para coletar e enviar dados do usuário a um servidor.

Atributo action em formulários

Especifica a URL de destino para onde os dados do formulário serão enviados após o submit.

Atributo method em formulários

Define o método HTTP (geralmente GET ou POST) usado para enviar os dados coletados.

Tag <label>

Fornece uma legenda textual associada a um controle de formulário por meio do atributo for.

Atributo for da tag <label>

Vincula textualmente o rótulo ao atributo id correspondente de um elemento de entrada.

Tag <fieldset> e <legend>

Agrupa controles de formulário correlatos e define uma legenda explicativa para esse grupo.

Atributo name em controles de formulário

Define a chave que identifica o dado enviado na carga útil da requisição HTTP.

Atributo required

Validação nativa que impede o envio do formulário se o campo estiver vazio.

Atributo pattern

Especifica uma expressão regular que o valor do campo deve corresponder para ser válido.

Atributo placeholder

Exibe uma dica breve sobre o valor esperado no campo, sumindo quando o usuário digita.

Tag <select> e <option>

Cria um menu suspenso de seleção que permite ao usuário escolher uma ou mais opções pré-definidas.

Tag <textarea>

Permite a entrada de múltiplas linhas de texto simples sem formatação.

Tag <button type='submit'>

Botão padrão que aciona o envio e a validação do formulário pai.

Acessibilidade Web (a11y)

Prática inclusiva de projetar sites para que todas as pessoas, incluindo com deficiências, possam utilizá-los.

Diretrizes WCAG

Normas técnicas internacionais estruturadas nos princípios: perceptível, operável, compreensível e robusto.

Atributo alt em <img>

Fornece uma descrição textual alternativa para leitores de tela caso a imagem não carregue.

Imagens decorativas e alt vazio

O uso de alt='' orienta tecnologias assistivas a ignorarem imagens meramente visuais ou estéticas.

ARIA (Accessible Rich Internet Applications)

Conjunto de atributos que estende a acessibilidade de elementos quando o HTML nativo é insuficiente.

Atributo aria-label

Define uma string explícita que serve como o rótulo acessível para um elemento na interface.

Atributo aria-hidden

Oculta elementos específicos da árvore de acessibilidade e dos leitores de tela sem ocultá-los visualmente.

Atributo tabindex='0'

Insere um elemento não interativo na ordem natural de foco sequencial do teclado.

Atributo tabindex='-1'

Permite que um elemento receba foco via JavaScript, mas o remove da navegação comum por Tab.

Contraste de cores na WCAG

Proporção mínima recomendada de luminosidade entre texto e fundo para garantir legibilidade.

Indicador de foco visível

Contorno essencial que sinaliza visualmente a usuários de teclado qual elemento está focado no momento.