📖 O que e:
Exportacao de Assets e o processo de extrair imagens, icones, logos e outros elementos graficos do seu design para formatos otimizados para web. Envolve escolher formatos corretos (PNG, JPG, SVG, WebP), resolucoes adequadas (1x, 2x para Retina), e nomear arquivos de forma organizada para facil implementacao.
🎯 Por que aprender:
- • Assets mal exportados deixam sites lentos e com visual ruim
- • Formatos errados podem aumentar 10x o tamanho dos arquivos
- • Nomenclatura organizada acelera desenvolvimento e manutencao
- • Assets @2x sao essenciais para telas Retina/HiDPI modernas
🔑 Conceitos-chave:
Formatos de Imagem
PNG (transparencia), JPG (fotos), SVG (vetores), WebP (moderno)
Resolucoes
@1x padrao, @2x Retina, @3x mobile high-end
Compressao
Lossy vs lossless, qualidade vs tamanho do arquivo
Sprites e Icon Fonts
Agrupamento de icones para reduzir requests HTTP
💬 Vocabulario para Prompts
"Exportar logo em SVG para escalabilidade e PNG @2x para fallback"
"Converter imagens para WebP com qualidade 85% para otimizacao"
"Criar sprite sheet com todos os icones do projeto em SVG"
"Exportar hero image em JPG progressivo com compressao otimizada"
📖 O que e:
Preparacao para Producao (ou Production Build) e o processo de transformar seu codigo de desenvolvimento em versao otimizada para usuarios finais. Inclui minificacao (remover espacos e comentarios), bundling (juntar arquivos), tree-shaking (remover codigo nao usado), e otimizacoes de performance que tornam o site rapido e eficiente.
🎯 Por que aprender:
- • Codigo minificado carrega 60-80% mais rapido que original
- • Google penaliza sites lentos no ranking de busca
- • Usuarios abandonam sites que demoram mais de 3 segundos
- • Build process automatiza tarefas repetitivas de otimizacao
🔑 Conceitos-chave:
Minificacao
Remover espacos, quebras de linha e comentarios do codigo
Bundling
Combinar multiplos arquivos JS/CSS em um unico arquivo
Tree Shaking
Eliminar codigo morto nao utilizado no projeto
Cache Busting
Adicionar hash aos nomes para forcar atualizacao de cache
💬 Vocabulario para Prompts
"Configurar build process com minificacao de CSS e JS para producao"
"Implementar tree-shaking para remover codigo nao utilizado"
"Adicionar hash nos nomes de arquivos para cache busting"
"Gerar production build otimizado com code splitting"
📖 O que e:
Hospedagem Estatica e o servico que armazena e serve seus arquivos HTML, CSS, JS e imagens para visitantes do site. Diferente de hospedagem tradicional com servidores, static hosting usa CDNs (Content Delivery Networks) que distribuem seu site globalmente, tornando-o extremamente rapido. Servicos como Vercel, Netlify e GitHub Pages sao opcoes populares e muitas vezes gratuitas.
🎯 Por que aprender:
- • Deploy em segundos com integracao Git automatica
- • HTTPS gratuito e automatico em todos os servicos modernos
- • CDN global significa site rapido para usuarios em qualquer lugar
- • Custos zero ou muito baixos para projetos pessoais e portfolios
🔑 Conceitos-chave:
CDN (Content Delivery Network)
Rede de servidores globais que servem conteudo proximo ao usuario
CI/CD
Deploy automatico quando voce faz push no repositorio Git
Preview Deploys
URLs temporarias para testar mudancas antes de publicar
Edge Functions
Logica serverless executada proximo ao usuario
💬 Vocabulario para Prompts
"Configurar deploy automatico no Vercel com integracao GitHub"
"Criar workflow CI/CD para build e deploy em cada push"
"Hospedar site estatico no Netlify com preview deploys"
"Publicar portfolio no GitHub Pages com dominio customizado"
📖 O que e:
Dominio e o endereco amigavel do seu site (meusite.com.br). DNS (Domain Name System) e o sistema que traduz esse nome para o endereco IP do servidor onde seu site esta hospedado. Configurar DNS envolve criar registros que apontam seu dominio para a hospedagem, configurar subdomínios (blog.meusite.com) e garantir que tudo funcione com HTTPS.
🎯 Por que aprender:
- • Dominio proprio transmite profissionalismo e credibilidade
- • Entender DNS evita horas de frustacao em configuracoes
- • Subdominios permitem organizar projetos (app.site.com, docs.site.com)
- • Email profissional depende de configuracao DNS correta (MX records)
🔑 Conceitos-chave:
Registro A
Aponta dominio para endereco IP (IPv4) do servidor
CNAME
Aponta subdominio para outro dominio (alias)
Nameservers
Servidores que respondem consultas DNS do seu dominio
TTL (Time to Live)
Tempo que registros DNS ficam em cache
💬 Vocabulario para Prompts
"Configurar registro A e CNAME para apontar dominio ao Vercel"
"Criar subdominio app.meusite.com com CNAME para hosting"
"Migrar nameservers para Cloudflare com DNS gerenciado"
"Verificar propagacao DNS e ajustar TTL para atualizacao rapida"
📖 O que e:
Analytics e a coleta e analise de dados sobre como usuarios interagem com seu site: quantos visitantes, de onde vem, quais paginas acessam, quanto tempo ficam. Monitoramento vai alem: acompanha performance (tempo de carregamento), disponibilidade (site no ar) e erros. Juntos, permitem tomar decisoes baseadas em dados reais, nao suposicoes.
🎯 Por que aprender:
- • Descobrir quais paginas funcionam e quais precisam melhorar
- • Identificar problemas de performance antes dos usuarios reclamarem
- • Entender seu publico para criar conteudo mais relevante
- • Monitorar uptime evita perder visitantes por site fora do ar
🔑 Conceitos-chave:
Page Views vs Sessions
Visualizacoes totais vs visitas unicas de usuarios
Bounce Rate
Porcentagem de visitantes que saem sem interagir
Core Web Vitals
LCP, FID, CLS - metricas de performance do Google
Error Tracking
Monitoramento de erros JavaScript em producao
💬 Vocabulario para Prompts
"Integrar Google Analytics 4 com tracking de eventos customizados"
"Configurar Plausible Analytics como alternativa privacy-friendly"
"Monitorar Core Web Vitals com Lighthouse CI automatizado"
"Implementar error tracking com Sentry para debug em producao"
📖 O que e:
Manutencao Continua e o trabalho pos-lancamento de manter seu site funcionando bem. Inclui atualizar dependencias para corrigir vulnerabilidades, otimizar conteudo baseado em analytics, fazer backups regulares, renovar certificados SSL, e iterar no design baseado em feedback. Um site nunca esta "pronto" - e um produto vivo que evolui.
🎯 Por que aprender:
- • Dependencias desatualizadas sao principal vetor de ataques
- • Conteudo atualizado melhora SEO e engajamento
- • Backups salvam meses de trabalho em caso de problemas
- • Iteracao continua transforma sites bons em excelentes
🔑 Conceitos-chave:
Dependency Updates
Manter pacotes npm/libraries atualizados e seguros
Security Audits
Verificar vulnerabilidades com npm audit e ferramentas
Content Refresh
Atualizar informacoes, imagens e textos periodicamente
Backup Strategy
Copias de seguranca automaticas do codigo e dados
💬 Vocabulario para Prompts
"Configurar Dependabot para atualizacoes automaticas de seguranca"
"Criar workflow de audit de seguranca mensal com npm audit"
"Implementar estrategia de backup com versionamento Git"
"Planejar iteracoes de design baseadas em dados de analytics"
📚 Vocabulario para Prompts - Resumo Completo
Termos essenciais para deploy e manutencao de sites em prompts para IAs:
Assets
export, PNG, JPG, SVG, WebP, @2x, Retina, sprites, compression
Build
minify, bundle, tree-shaking, cache-busting, production build
Hosting
static hosting, CDN, CI/CD, deploy, Vercel, Netlify, preview
DNS
domain, A record, CNAME, nameserver, TTL, subdomain, propagation
Analytics
pageviews, sessions, bounce rate, Core Web Vitals, tracking
Manutencao
dependencies, security audit, backup, content refresh, iteration
💡 Dica: Fluxo Completo de Deploy
Use este vocabulario para descrever o processo completo para IAs:
"Exportar assets em WebP, fazer production build minificado e deploy no Vercel"
"Configurar dominio customizado com DNS, HTTPS automatico e CDN global"
"Integrar analytics, monitoramento de performance e alertas de uptime"
📝 Resumo do Modulo
Parabens! Voce Completou o Curso WebP!
Voce agora domina o vocabulario essencial de design para comunicar suas ideias com IAs. Do conceito inicial ao deploy em producao, voce tem as palavras certas para criar qualquer projeto web.
🚀 Proximos Passos
- 1. Pratique: Crie seu primeiro projeto usando os termos aprendidos com uma IA de sua escolha
- 2. Experimente: Combine diferentes estilos e tecnicas para descobrir sua linguagem visual
- 3. Publique: Use o conhecimento de deploy para colocar seus projetos no ar
- 4. Itere: Analise os resultados, aprenda com os dados e melhore continuamente
💬 Seu Primeiro Prompt Completo
Agora voce pode criar prompts como este:
"Criar landing page minimalista com hero section glassmorphism, tipografia Inter bold,
paleta dark mode com acento purple. Cards com hover elevation, CTA com gradient button.
Layout responsivo mobile-first, animacoes com easing natural. Assets em WebP otimizado,
pronto para deploy no Vercel com HTTPS."