Glossário Completo — Rede Daora

UX + Web Design Empreendedor — Programação e Desenvolvimento Express com IA

Referência de termos usados ao longo do curso. Definições simples, com exemplos quando necessário.

A

Acessibilidade (A11y) Prática de tornar sites utilizáveis por pessoas com deficiências visuais, motoras, auditivas ou cognitivas. Exemplo: textos alternativos em imagens para leitores de tela, contraste adequado, navegação por teclado.

Algoritmo Sequência de passos que resolve um problema. É como uma receita de bolo: se eu sigo os passos na ordem, o resultado sai; se troco a ordem ou pulo um passo, quebra. Computadores executam algoritmos o tempo todo. Quando eu descrevo um site pra IA, estou descrevendo um algoritmo (a receita).

Agente de IA Sistema de IA que pode planejar, executar tarefas e acessar ferramentas (arquivos, terminal, navegador). Diferente de um chat simples, o agente age — cria arquivos, publica sites, corrige erros. Exemplos: OpenCode, Claude Code.

Alucinação (IA) Quando a IA gera informação que parece verdadeira, mas não existe. Pode ser links, telefones, funcionalidades ou dados inventados. Nunca confie cegamente no que a IA gera — sempre teste.

API (Application Programming Interface) Interface de Programação de Aplicações. É uma “ponte” que permite que dois softwares se comuniquem. Exemplo: um site que consulta o estoque de um produto em um banco de dados.

Armazenamento em Nuvem (Cloud) Salvar dados em servidores remotos acessíveis pela internet, em vez de no computador local. Exemplos: Google Drive, Dropbox, AWS.

AST (Abstract Syntax Tree) Árvore de Sintaxe Abstrata. Representação hierárquica do código-fonte que a IA usa para entender a estrutura do programa.

B

Backend Parte do site que funciona nos bastidores. Processa dados, armazena senhas, envia e-mails. O visitante não enxerga.

Banco de Dados Local onde os dados são organizados e armazenados. Pode conter informações de usuários, produtos, pedidos, etc.

Biblioteca (Library) Conjunto de código reutilizável que resolve problemas comuns. Exemplo: React, jQuery.

Bitbucket Plataforma de hospedagem de código-fonte baseada em Git, similar ao GitHub.

Blog Site com artigos ou posts organizados cronologicamente. Usado para conteúdo educacional, notícias ou compartilhar ideias.

Botão de Ação (CTA) Elemento visual que convida o visitante a fazer algo: “Compre agora”, “Entre em contato”, “Cadastre-se”. O CTA (Call to Action) é o botão mais importante da página.

Build Processo de compilar e empacotar o código para produção. No contexto de IA, “Build Mode” é quando o agente executa e cria os arquivos de verdade.

C

Cache Armazenamento temporário de dados para carregamento mais rápido. O navegador guarda cópias de sites visitados.

Canva Ferramenta online de design gráfico para criar imagens, posts, apresentações e outros materiais visuais sem necessidade de software profissional.

Cardápio Digital Página web que mostra produtos ou serviços de um negócio, com preços, fotos e informações.

CDN (Content Delivery Network) Rede de servidores distribuídos geograficamente que entrega conteúdo mais rápido ao usuário. Exemplo: Cloudflare, Vercel Edge Network.

Chatbot Programa que simula conversa humana. Pode ser baseado em regras ou em IA generativa.

Chrome Navegador web mais popular do mundo, desenvolvido pelo Google.

Ciclo do Arquiteto Metodologia de trabalho com IA em 5 passos: dividir o projeto em pedaços, pedir à IA um pedaço por vez, olhar o resultado, corrigir o que precisar, avançar pro próximo.

Cloudflare Plataforma que oferece CDN, proteção contra ataques, DNS e hospedagem gratuita de sites (Cloudflare Pages).

CMS (Content Management System) Sistema de Gerenciamento de Conteúdo. Ferramenta para criar e gerenciar sites sem escrever código. Exemplo: WordPress.

Código Aberto (Open Source) Software cujo código-fonte é público e pode ser modificado por qualquer pessoa. Exemplo: Linux, React, DeepSeek.

Código Fantasma Código gerado pela IA que parece correto visualmente, mas não funciona quando executado. Não apresenta erro — mas também não faz nada.

Contraste Relação de luminosidade entre cores. Para acessibilidade, o contraste entre texto e fundo deve ser suficiente para leitura confortável.

CSS (Cascading Style Sheets) Folha de estilo que define o visual do site: cores, fontes, espaçamentos, posicionamento. É a “roupa” do HTML.

Cursor Editor de código com IA integrada. Permite que a IA veja e edite o código diretamente no ambiente de desenvolvimento.

Custom Domain Domínio personalizado. Endereço próprio do site (ex: meusite.com) em vez de um endereço genérico.

D

Deploy Processo de publicar um site na internet para que fique acessível a todos.

Design Responsivo Abordagem de design que faz o site se adaptar a diferentes tamanhos de tela — celular, tablet, desktop.

Design System Sistema de Design. Conjunto de reutilizáveis de componentes, cores, fontes e padrões visuais que garantem consistência em todo o site.

DevTools (Ferramentas de Desenvolvimento) Conjunto de ferramentas do navegador para inspecionar, depurar e testar sites. Acessível pela tecla F12.

DNS (Domain Name System) Sistema que traduz nomes de domínio (google.com) em endereços IP numéricos.

DOM (Document Object Model) Representação em árvore dos elementos HTML que o navegador monta para exibir a página.

Domínio Endereço único de um site na internet. Exemplo: rede-daora.com.br.

Drag and Drop Técnica de interface onde o usuário arrasta e solta elementos. Usado em ferramentas como Vercel Drop e Netlify.

E

Economia Criativa Setor que combina criatividade e tecnologia para gerar negócios e renda. Inclui artistas, designers, artesãos, músicos, etc.

Efeito de Colapso (CLS) Cumulative Layout Shift. Métrica de performance que mede quanto o layout da página se move inesperadamente durante o carregamento.

Empreendedorismo Digital Atividade de criar e gerir negócios usando ferramentas e canais digitais.

Endpoint Ponto de acesso de uma API. É o endereço URL onde o servidor recebe requisições.

Espaço em Branco (White Space) Área vazia do design. Importante para legibilidade e organização visual.

Esqueleto Metáfora para o HTML — a estrutura fundamental de um site.

Estado (State) Dados que mudam ao longo do tempo em uma aplicação. Exemplo: itens no carrinho de compras.

Estrutura Semântica Uso correto das tags HTML para descrever o significado do conteúdo. Exemplo: <h1> para título principal, <nav> para navegação.

F

5F (Formato, Fluxo, Fala, Fatos, Fonte) Metodologia de 5 letras para criar prompts de texto. Formato (tipo de texto), Fluxo narrativo (início/meio/fim), Fala (tom de voz), Fatos (informações reais), Fonte (de onde vem a informação).

Ferramenta de Desenvolvimento (DevTools) Conjunto de ferramentas do navegador para inspecionar, depurar e testar sites. Acessível pela tecla F12.

Figma Ferramenta de design profissional para criar protótipos, interfaces e sistemas de design. Funciona no navegador.

Fine-tuning Processo de ajustar um modelo de IA para uma tarefa específica. Exemplo: treinar uma IA para responder sobre legislação trabalhista.

Flexbox Modelo de layout CSS que permite alinhar e distribuir elementos de forma flexível.

Footer Rodapé do site. Geralmente contém informações de copyright, links úteis e dados de contato.

Framework Estrutura de código que fornece uma base para desenvolvimento. Mais completo que uma biblioteca. Exemplos: React, Vue, Angular.

Frontend Parte do site que o visitante enxerga e interage. Inclui layout, cores, botões, formulários.

G

Galeria de Imagens Componente visual que exibe múltiplas imagens em formato de grade ou slideshow.

Gerador de Sites Estáticos (SSG) Ferramenta que cria sites HTML puro a partir de arquivos Markdown ou outros formatos simples. Exemplos: Hugo, Jekyll, Astro, Eleventy.

Gestor de IA Papel de quem gerencia o que a IA executa, em vez de executar diretamente. Define o que precisa ser feito, escolhe quais agentes usar, valida cada resultado.

Git Sistema de controle de versões. Permite rastrear mudanças no código e colaborar com outras pessoas.

GitHub Plataforma baseada em Git para hospedar repositórios de código e colaborar em projetos.

GitHub Actions Sistema de automação do GitHub para executar tarefas automaticamente (build, test, deploy) quando código é enviado.

GitHub Pages Serviço gratuito do GitHub para hospedar sites estáticos diretamente a partir de um repositório.

Grayscale Escala de cinza. Modo de exibição de imagens sem cores, usando apenas tons de cinza.

H

Hamburger Menu Menu representado por três linhas horizontais (≡). Comum em sites mobile, esconde a navegação até o usuário clicar.

Header Cabeçalho do site. Geralmente contém logo, navegação e有时 chamada para ação.

Hospedagem (Hosting) Serviço que mantém um site disponível na internet 24h. O site fica armazenado em um servidor.

HTML (HyperText Markup Language) Linguagem de marcação que define a estrutura e o conteúdo de uma página web.

HTTP (HyperText Transfer Protocol) Protocolo de transferência de hipertexto. Base da comunicação na web.

HTTPS (HTTP Secure) Versão segura do HTTP. Criptografa os dados transmitidos. Essencial para sites que coletam dados.

I

IA Generativa Tipo de inteligência artificial capaz de criar conteúdo novo: texto, imagens, código, áudio, vídeo.

IDE (Integrated Development Environment) Ambiente de Desenvolvimento Integrado. Editor de código com funcionalidades como autocompletar, depuração e terminal.

Identidade Visual Conjunto de elementos visuais que representam uma marca: cores, tipografia, estilo, logo. É o “rosto” do site.

Imagem Responsiva Imagem que se adapta ao tamanho da tela do dispositivo. Usa tag <picture> ou propriedades CSS.

Indexação Processo pelo qual motores de busca (Google) catalogam páginas web para exibir nos resultados de busca.

Inline Styles Estilos CSS aplicados diretamente no elemento HTML, usando o atributo style. Não é recomendado por dificultar manutenção.

Inspecionar Elemento Ferramenta do navegador (F12) que permite ver o código HTML/CSS de qualquer elemento na página.

Integração Conexão entre dois ou mais sistemas ou serviços. Exemplo: integrar um formulário com um serviço de e-mail.

IP (Internet Protocol) Protocolo de internet. Endereço numérico único que identifica um dispositivo na rede.

Iteração Processo de repetir e refinar. No design, significa criar, testar, ajustar e repetir.

J

JavaScript Linguagem de programação que adiciona interatividade aos sites. Funciona no navegador do usuário.

JSON (JavaScript Object Notation) Formato leve de dados baseado em texto. Usado para transmitir dados entre servidor e cliente.

K

Kanban Método de gestão de projetos com quadro de tarefas organizadas em colunas (A Fazer, Fazendo, Feito). Ferramentas: Trello, Notion.

Keyframe Quadro-chave em animações CSS. Define o estado inicial ou final de uma animação.

L

Landing Page Página de aterrissagem. Página única com um objetivo claro: converter visitantes em clientes.

Layout Disposição dos elementos na página. Define a estrutura visual do site.

Layout Shift Mudança inesperada no layout da página durante o carregamento. Ruim para experiência do usuário.

Linguagem de Programação Forma de escrever um algoritmo (a receita) de um jeito que o computador entende e executa. Exemplos: JavaScript, Python, Java, PHP, C#. HTML (marcação) e CSS (folha de estilo) organizam e estilizam a página, mas não são linguagens de programação.

LLM (Large Language Model) Grande Modelo de Linguagem. Modelo de IA treinado com grandes quantidades de texto para gerar linguagem natural.

Local Storage Armazenamento local do navegador. Permite guardar dados no computador do usuário.

Logo Símbolo visual que representa uma marca. Pode ser texto, imagem ou combinação dos dois.

M

Markdown Linguagem de formatação simples para criar textos. Usa símbolos como #, *, ** para indicar títulos, listas, negrito.

Meta Tag Tag HTML invisível que fornece informações sobre a página para buscadores e redes sociais.

MCP (Model Context Protocol) Protocolo que permite à IA acessar ferramentas externas (bancos de dados, APIs, serviços). É como dar à IA um “kit de ferramentas”.

Mobile-First Abordagem de design que prioriza a experiência em dispositivos móveis antes de adaptar para desktop.

Mockup Representação visual de como um site ou aplicativo ficará. Pode ser estático ou interativo.

Modelo de Linguagem Sistema de IA treinado para entender e gerar texto. Exemplos: GPT-4, Claude, Gemini.

N

Navegador (Browser) Software que acessa e exibe páginas web. Exemplos: Chrome, Safari, Firefox, Edge.

Netlify Plataforma de deploy e hospedagem de sites. Oferece deploy por drag-and-drop e integração com Git.

Nuvem (Cloud) Armazenamento e processamento de dados em servidores remotos acessíveis pela internet.

Nível de Desenvolvimento Escala de 1 a 5 que indica o quão avançado é o uso de IA na criação de sites. Do Nível 1 (prompt vago) ao Nível 5 (gestor de multi-agentes).

O

Open Source (Código Aberto) Software cujo código-fonte é público e pode ser modificado por qualquer pessoa.

OpenCode Ferramenta de IA para assistência no desenvolvimento de software. Permite planejar (Plan) e construir (Build) projetos via conversa.

Otimização para Motores de Busca (SEO) Conjunto de técnicas para melhorar a visibilidade de um site nos resultados de busca do Google.

P

Padrão de Design Conjunto de regras e componentes visuais usados de forma consistente em todo o site.

Palette (Paleta de Cores) Conjunto de cores escolhidas para um projeto. Geralmente 2-4 cores: dominante, destaque e neutra.

Parallax Efeito visual onde camadas de fundo se movem em velocidades diferentes durante o scroll.

Performance Velocidade com que um site carrega e responde. Métricas: LCP ( Largest Contentful Paint), FID (First Input Delay), CLS (Cumulative Layout Shift).

Plan Mode Modo de planejamento do OpenCode. A IA analisa o projeto e cria um plano de execução sem modificar arquivos.

Portfólio Coleção de trabalhos anteriores usada para demonstrar habilidades e experiências. Essencial para freelancers e profissionais de design.

Prompt Instrução ou pedido feito para uma IA. A qualidade do prompt determina a qualidade da resposta.

Prompt Engineering Engenharia de prompt. Técnica de criar prompts eficazes para obter melhores resultados de IAs.

Protótipo Versão preliminar de um site ou aplicativo. Usado para testar ideias antes da versão final.

Q

Quadro de Tarefas Ferramenta visual para organizar trabalho em colunas (Kanban). Exemplos: Trello, Notion, GitHub Projects.

Query Consulta feita a um banco de dados ou API. Exemplo: “buscar todos os produtos da categoria ‘bolos’”.

R

RAG (Retrieval-Augmented Generation) Técnica que conecta a IA a fontes externas de dados para respostas mais precisas. Exemplo: um chat que consulta o cardápio da loja.

Recomendação de Design Sugestão baseada em padrões de design reconhecidos. A IA pode recomendar cores, layouts e componentes.

Recapitulação Revisão do que foi aprendido na aula anterior. Usada no início de cada encontro.

Rede Social Plataforma digital para interação entre usuários. Exemplos: Instagram, TikTok, Facebook.

Regra da Média Conceito de que a IA equaliza: quem não sabe fazer algo, ela ajuda a ficar razoável. Mas quem é expert e não souber usar a IA pode ser rebaixado à média. Os níveis de desenvolvimento existem pra evitar isso.

Regras de UI Princípios visuais que a IA não aplica sozinha: hierarquia visual, contraste e respiro visual.

Responsivo (Responsive) Site que se adapta a diferentes tamanhos de tela. Funciona bem em celular, tablet e desktop.

Replit Editor de código online. Permite criar e executar projetos diretamente no navegador.

Repositório Local onde os arquivos de um projeto são armazenados e versionados. Exemplo: repositório no GitHub.

Redirecionador de E-mail Serviço que encaminha e-mails de um endereço para outro. Exemplo: enviar contato@meusite.com para meuemail@gmail.com.

S

Scroll Ação de descer ou subir o conteúdo de uma página web.

SDK (Software Development Kit) Kit de Desenvolvimento de Software. Conjunto de ferramentas para criar aplicações em uma plataforma específica.

SEO (Search Engine Optimization) Otimização para Motores de Busca. Técnicas para melhorar o posicionamento do site no Google.

Servidor (Server) Computador que fornece serviços a outros computadores via rede. Pode armazenar sites, processar dados, etc.

Servidor de Produção Servidor onde o site fica disponível para o público. Diferente do servidor de desenvolvimento.

Slug Parte da URL que identifica uma página de forma legível. Exemplo: meusite.com/sobre-nos.

SSG (Static Site Generator) Gerador de Sites Estáticos. Ferramenta que cria sites HTML puro a partir de arquivos Markdown.

Stack Conjunto de tecnologias usadas em um projeto. Exemplo: stack frontend = HTML + CSS + JavaScript.

Subdomínio Parte de um domínio principal. Exemplo: blog.meusite.com — “blog” é o subdomínio.

T

Tag Elemento HTML que define o tipo de conteúdo. Exemplo: <h1> para título, <p> para parágrafo.

Template Modelo pré-definido que serve como base para criar um site ou página.

Terminal Interface de linha de comando. Permite executar comandos de texto no computador.

Teste de Usabilidade Processo de avaliar um site com usuários reais para identificar problemas de experiência.

Tipografia (Typography) Arte e técnica de arranjar tipos. Escolha de fontes, tamanhos, espaçamentos e cores do texto.

Tipo de Fonte (Font Family) Família de tipografia. Exemplos: Arial, Times New Roman, Montserrat.

U

UI (User Interface) Interface do Usuário. Parte visual do site com a qual o usuário interage.

URL (Uniform Resource Locator) Endereço uniforme de recurso. O endereço completo de uma página na internet.

Usabilidade Grau de facilidade com que um usuário consegue usar um site para atingir seu objetivo.

UX (User Experience) Experiência do Usuário. Como o usuário se sente ao usar o site: satisfeito, frustrado, confuso.

UX Research Pesquisa de Experiência do Usuário. Técnicas para entender como as pessoas usam um produto.

V

Vercel Plataforma de deploy e hospedagem de sites. Oferece CDN global, deploy por drag-and-drop (Vercel Drop) e integração com Git.

Vibe Coding Metodologia de desenvolvimento assistido por IA. O desenvolvedor conversa com a IA para criar código, em vez de escrever manualmente.

Vibe Design Metodologia de design assistido por IA. O designer usa prompts visuais para criar interfaces com ajuda da IA.

Viewport Área visível da página web no navegador. Muda conforme o tamanho da janela.

VS Code (Visual Studio Code) Editor de código popular da Microsoft. Gratuito e com muitas extensões.

W

Webpack Ferramenta de empacotamento de módulos JavaScript. Agrupa vários arquivos em um só para produção.

Wireframe Esqueleto visual de um site. Mostra a disposição dos elementos sem estilo.

WordPress Sistema de gerenciamento de conteúdo (CMS) mais popular do mundo. Usado para blogs, lojas e sites institucionais.

Y

YAML (YAML Ain’t Markup Language) Linguagem de dados legível por humanos. Usada em arquivos de configuração.

Z

Zero Configuration (Zero-Config) Ferramentas que funcionam sem necessidade de configuração manual. Exemplo: Vercel, Netlify.

Termos por Encontro

Encontro 01 — Web + IA + Prompts Básicos

Navegador, DNS, IP, HTTP/HTTPS, Servidor, Frontend, Backend, Sites Estáticos vs Dinâmicos, Algoritmo, Linguagem de Programação, HTML, CSS, JavaScript, LLM, IA Generativa, Prompt, Prompt Engineering, Níveis 1-5, Replit, Vercel, Deploy.

Encontro 02 — Prompts Avançados e Identidade Visual

Estilos de Mercado, Design Persuasivo, Identidade Visual, Cores, Tipografia, Tom Visual, Nível 2.

Encontro 03 — GitHub e Deploy

Git, GitHub, Repositório, Deploy, GitHub Pages, Cloudflare Pages, Performance, PageSpeed.

Encontro 04 — OpenCode

Plan Mode, Build Mode, Agente de IA, Contexto Visual, Referências.

Encontro 05 — Inspeção de Sites

DevTools, F12, HTML, CSS, Análise Visual, Padrões de Design.

Encontro 06 — UX

Experiência do Usuário, Experiências Curtas vs Longas, 6 Blocos de Conteúdo, Regra de Ouro, Consistência.

Encontro 07 — UI

Hierarquia Visual, Contraste, Respiro Visual, Regras de UI, Identidade Visual, Cores, Tipografia.

Encontro 08 — SSG

Gerador de Sites Estáticos, Hugo, Jekyll, Astro, Markdown, Consistência Visual, Multi-páginas.

Encontro 09 — Formulários

Formulário, Validação, Feedback Visual, Web3Forms, Formspree, Netlify Forms, Labels, Placeholders.

Encontro 10 — Domínios e DNS

Domínio, DNS, Registro.br, Cloudflare, E-mail Profissional, Redirecionador, Confiança.

Encontro 11 — Teste de Usabilidade

Teste de Usabilidade, Revisão por Pares, Bugs, Acessibilidade, Correções.

Encontro 12 — Precificação

Precificação, Proposta Comercial, Valor do Design, Custos, Mercado.

Encontro 13-16 — Projeto Integrador

Kanban, Wireframe, Sprint, Portal de Talentos, Deploy Final, Mostra.

Fim do Glossário