DEV Community: Wanderson Chaves

Como identificar sites falsos na Black Friday (guia definitivo)

Wanderson Chaves — Fri, 28 Nov 2025 19:10:40 +0000

Golpistas criam lojas falsas na Black Friday — entenda como funcionam e como se proteger

A Black Friday é um dos períodos preferidos dos brasileiros para comprar eletrônicos, roupas, itens para casa e presentes. Mas também se tornou um dos momentos mais explorados por golpistas digitais, que criam sites falsos para enganar consumidores.

De acordo com pesquisas citadas no G1, páginas falsas imitando Shopee e Havan foram identificadas recentemente, e o número de golpes cresce a cada ano.

🔍 Como funcionam os golpes de lojas falsas?

Criminosos replicam o visual das lojas oficiais usando prints, HTML copiado e imagens retiradas dos sites reais. Depois, divulgam essas páginas falsas através de:
• Anúncios impulsionados
• Redes sociais
• WhatsApp
• Grupos de ofertas
• E-mails falsos (phishing)

Esses golpes usam técnicas de engenharia social, como explica Daniel Barbosa, pesquisador da empresa de segurança ESET:

“Golpistas aproveitam momentos de alta demanda, como a Black Friday, para aplicar técnicas de engenharia social.”

🧩 Sinais de que a loja é falsa

1. URL suspeita ou incomum

Sites falsos usam endereços como:
• havan-loja.app
• ofertas-shopee.site
• superpromo.vip

Sempre procure por:
✔️ .com ou .com.br
✔️ Certificado SSL (cadeado)
✔️ Nome correto da empresa

2. Visual semelhante, mas com falhas

Mesmo quando o site parece autêntico, existem inconsistências:
• Ícones de redes sociais que não direcionam a lugar nenhum
• Fotos cortadas
• Links quebrados
• Informações duplicadas
• Layout “parecido, mas não igual”

3. Ofertas com preços muito abaixo do mercado

Um dos sinais mais claros de fraude.
Lojas sérias raramente vendem produtos com 60%–80% de desconto sem motivo.

Se parece bom demais, provavelmente é golpe.

4. Pressão emocional (urgência falsa)

Os falsários colocam avisos como:
• “Últimas unidades!”
• “Restam apenas 3 no estoque!”
• “Compre agora ou perde!”

Essa técnica chama-se urgência artificial, muito usada em fraudes.

5. Pagamento apenas via PIX

Esse é o maior alerta.
Lojas confiáveis oferecem:
• Cartão
• Boleto
• PIX
• PayPal
• Parcelamento

Se só houver PIX, desconfie imediatamente.

⚠️ Caiu em um golpe? Veja o que fazer imediatamente

Entre em contato com seu banco
Informe que foi vítima de fraude
Solicite o Mecanismo Especial de Devolução (MED) Esse procedimento pode reverter um PIX fraudulento, dependendo do caso.

Quanto mais rápido você agir, maiores as chances.

🛡️ Checklist de segurança para Black Friday

✔️ Verificar URL
✔️ Pesquisar CNPJ
✔️ Checar redes sociais
✔️ Confirmar meios de pagamento
✔️ Nunca comprar por impulso
✔️ Desconfiar de preços muito baixos
✔️ Procurar avaliações reais
✔️ Conferir se os links são oficiais

Conclusão

A Black Friday é uma oportunidade para economizar, mas também um terreno fértil para golpes digitais. Informar-se é a melhor maneira de evitar prejuízos.

⚠️ Compartilhe este artigo — você pode evitar que alguém caia em um golpe.

Como a Clean Architecture transformou meu código em algo mais simples e escalável

Wanderson Chaves — Mon, 18 Aug 2025 13:51:27 +0000

Introdução

Você já abriu um projeto seu depois de alguns meses e pensou: “Quem foi o maluco que escreveu isso?” (e depois percebeu que foi você mesmo 😅).
Isso acontece porque, no calor do desenvolvimento, priorizamos entregar rápido e acabamos deixando a organização de lado. Foi assim que descobri o poder da Clean Architecture — uma abordagem que mudou a forma como estruturo meus projetos no dia a dia.

Desenvolvimento

1. O problema: código que cresce sem controle

Em projetos pequenos, tudo parece caber em um único arquivo ou em poucas pastas. Mas conforme o sistema cresce, a bagunça aparece:

Regras de negócio misturadas com detalhes de banco de dados.
Controllers cheios de lógica que deveriam estar em outro lugar.
Dificuldade de testar partes isoladas do sistema.

Esse foi exatamente o cenário que vivi em um projeto usando NestJS + Prisma + PostgreSQL.

2. A solução: separar responsabilidades

A Clean Architecture propõe um princípio simples: separe as camadas e proteja as regras de negócio da bagunça externa.
Na prática, organizei assim:

Use Cases → onde fica a lógica de negócio pura.
Repositories → abstrações para o acesso a dados (ex.: Prisma).
Controllers / Resolvers → apenas responsáveis por receber requisições e devolver respostas.
DTOs → contratos de entrada e saída, deixando claro o que cada caso de uso espera.

3. Exemplo prático do dia a dia

Um caso real foi quando precisei criar um use case para gerar boletos Pix (Bolepix).
Antes, o controller fazia tudo: validava dados, chamava o banco e ainda se conectava à API da Celcoin. Resultado: um caos difícil de manter.

Depois da refatoração:

O Controller só recebia a requisição e chamava o CreateBolepixUseCase.
O Use Case cuidava da lógica de criação, validando as regras de negócio.
O Repository abstraía as interações com o Prisma.
A integração com a Celcoin ficou isolada em um service externo.

Isso tornou o código muito mais testável e fácil de evoluir.

4. Boas práticas que aprendi

Não deixe que a camada de banco de dados “contamine” a lógica de negócio.
Escreva testes primeiro para os use cases — eles são o coração da aplicação.
Mantenha os nomes claros: CreateOrderUseCase, ChargeWebhookUseCase, etc.
Lembre-se: simples é melhor do que complexo.

Conclusão

Adotar a Clean Architecture não é sobre seguir uma “receita de bolo”, mas sim sobre aprender a separar responsabilidades para manter o código limpo e saudável a longo prazo.
Hoje, quando volto a projetos antigos, consigo entender facilmente a estrutura e evoluir sem medo de quebrar tudo.

E você, já tentou aplicar Clean Architecture em seus projetos? Quais foram seus maiores desafios? 🚀
Conta aqui nos comentários — vou adorar trocar experiências.

🌐 Semantic HTML: Dando Significado ao Seu Código

Wanderson Chaves — Wed, 30 Jul 2025 02:16:29 +0000

Quando você começa a programar para web, logo aprende a usar <div> para tudo. Mas existe uma forma muito melhor de estruturar suas páginas: o Semantic HTML.
Vamos entender o que isso significa e por que é tão importante. 👇

⸻

🧩 O que é Semantic HTML?
Semantic HTML significa usar as tags certas para o propósito certo.
Em vez de empilhar <div> genéricos, você utiliza elementos que têm significado próprio, como:

• 📰 <header> – cabeçalho da página ou seção
• 🧭 <nav> – área de navegação com menus e links
• 📄 <main> – conteúdo principal da página
• ✍️ <article> – um artigo ou bloco de conteúdo independente
• 🗂️ <section> – uma seção temática dentro da página
• 📝 <aside> – conteúdo lateral ou complementar
• 📌 <footer> – rodapé da página ou seção

Isso não é apenas “estética do código” — é funcionalidade e acessibilidade!

⸻

⚡ Por que usar HTML Semântico?
Adotar Semantic HTML traz diversos benefícios:
• ♿ Acessibilidade – leitores de tela entendem melhor o conteúdo e ajudam pessoas com deficiência visual a navegar.
• 🔍 SEO (Otimização para buscadores) – motores de busca (como o Google) entendem a hierarquia e relevância da sua página.
• 🧑‍💻 Legibilidade do código – outros desenvolvedores (e até você no futuro!) entendem com clareza o papel de cada parte da página.
• 🤝 Manutenibilidade – facilita ajustes, colaboração e evolução do projeto.
• 🚀 Performance e renderização – navegadores processam melhor documentos bem estruturados.

⸻

🔍 Exemplo Comparativo
❌ Sem semântica (apenas <div>):

<div id="topo"></div>
<div id="menu"></div>
<div id="conteudo"></div>
<div id="rodape"></div>

✅ Com semântica:

<header></header>
<nav></nav>
<main></main>
<footer></footer>

Mais claro, não é? 😃

⸻

📚 Onde aprender Semantic HTML
Aqui estão alguns recursos gratuitos e premium para se aprofundar no tema:

🔓 Recursos Gratuitos
• 📘 Guide to Writing Semantic HTML – Um guia simples e prático para escrever HTML semântico.
• 📘 Semantic HTML – Conteúdo oficial do Google explicando boas práticas.
• 🎥 Why & When to Use Semantic HTML Elements over Div(s) – Vídeo mostrando na prática quando e por que usar elementos semânticos.
• 🧭 Frontend Developer Career Path – Trilha completa para dominar o front-end.
• 📱 Learn Responsive Web Design – Aprenda a criar layouts semânticos e adaptáveis.
• 🧠 Learn UI Design – Melhore a experiência do usuário com design e semântica.

⸻

💡 Dica Final: Pratique no seu Próprio Código!
Da próxima vez que você abrir o editor, substitua seus <div> genéricos por elementos semânticos.
Pode parecer um detalhe pequeno, mas faz uma enorme diferença para você, para quem usa seu site e até para os mecanismos de busca.

👉 Experimente hoje mesmo! E se tiver dúvidas, deixe nos comentários — vamos aprender juntos. 🚀

🚀 HTML Básico: O Começo da Sua Jornada no Desenvolvimento Web

Wanderson Chaves — Wed, 23 Jul 2025 14:16:01 +0000

🧱 O que é HTML?

HTML (HyperText Markup Language) é a linguagem de marcação usada para estruturar todo o conteúdo de uma página na web.

Para simplificar, imagine um site como um ser humano:
• 🦴 HTML é o esqueleto – ele define a estrutura da página (títulos, parágrafos, imagens, links…).
• 👕 CSS é a roupa – ele estiliza o conteúdo, deixando o site bonito e visualmente agradável.
• ⚙️ JavaScript é o movimento – ele traz interatividade, como cliques, animações e respostas dinâmicas.

Ou seja: sem HTML, não há site.

⸻

📚 Recursos para Aprender HTML

Abaixo estão algumas recomendações para você começar a estudar HTML com qualidade, seja de forma gratuita ou com cursos premium:

🔓 Recursos Gratuitos
• 📘 Aprenda HTML
Um guia direto ao ponto com explicações claras e exemplos práticos para quem está começando.
• 🎥 HTML Full Course – Build a Website Tutorial (YouTube)
Curso completo em vídeo onde você aprende a construir um site do zero com HTML. Ideal para iniciantes visuais!

⸻

💎 Recursos Premium (com 20% de desconto pela Scrimba)
• 🧭 Frontend Developer Career Path
Uma trilha completa que te guia da base até habilidades avançadas como HTML, CSS, JavaScript e mais.
• 📱 Learn Responsive Web Design
Aprenda a criar sites que se adaptam a qualquer tela — do celular ao desktop.
• 🎨 From Figma to Code
Transforme protótipos de design do Figma em código funcional usando HTML e CSS.
• 🧠 Learn UI Design
Um curso voltado para quem quer dominar o design de interfaces e melhorar a experiência do usuário.

⸻

💡 Dica Final: Mão na Massa! ✋💻

A teoria é importante, mas o aprendizado de verdade acontece na prática. Aqui vão algumas sugestões para você colocar seus estudos em ação:
• Use ferramentas como CodePen ou JSFiddle para testar seu código direto no navegador.
• Crie uma página simples com um título, um parágrafo e uma imagem.
• Explore os elementos mais comuns do HTML:

,

, , ,

, …

Não tenha medo de errar — é assim que se aprende.
Se surgir alguma dúvida, comenta aqui no post ou compartilha com alguém que também esteja começando.

Nos vemos no próximo conteúdo! 🚀

Backend: O Poder do Lado Oculto da Tecnologia

Wanderson Chaves — Wed, 21 Jun 2023 14:30:26 +0000

Introdução:

No mundo digital em constante evolução, a magia que ocorre nos bastidores muitas vezes passa despercebida. O backend, ou o lado oculto da tecnologia, é o motor que impulsiona a funcionalidade dos aplicativos e sites que utilizamos diariamente. Neste artigo, exploraremos o poder do backend, sua importância fundamental e como ele influencia o mundo digital em que vivemos.

O que é o Backend?

O backend, também conhecido como camada de servidor, refere-se à parte não visível de um aplicativo ou site. É responsável pelo processamento das solicitações, gerenciamento de dados, autenticação de usuários e a lógica que permite que tudo funcione perfeitamente. Enquanto o frontend se concentra na interface do usuário, o backend lida com os bastidores, tornando tudo possível.

A Importância do Backend

O backend desempenha um papel crítico no sucesso de qualquer aplicativo ou site. Aqui estão algumas razões pelas quais o backend é tão importante:

Funcionalidade robusta: O backend é responsável pela implementação de recursos avançados e complexos que tornam os aplicativos e sites mais funcionais e interativos.
Gerenciamento de dados: O backend lida com o armazenamento e a recuperação de dados, garantindo que as informações sejam processadas corretamente e estejam disponíveis quando necessárias.
Segurança: O backend é crucial para garantir a segurança dos dados dos usuários, implementando autenticação e medidas de proteção para evitar acessos não autorizados.
Escalabilidade: Com o backend adequado, os aplicativos e sites podem lidar com um grande número de usuários simultâneos e se adaptar às demandas crescentes à medida que a base de usuários aumenta.

Como o Backend Funciona?

O backend utiliza uma variedade de tecnologias e linguagens de programação para executar suas tarefas. Aqui estão algumas das principais tecnologias comumente usadas no backend:

Servidores: O backend é executado em servidores dedicados que hospedam aplicativos e sites. Esses servidores são responsáveis por receber solicitações dos usuários e fornecer respostas adequadas.
Bancos de Dados: O backend utiliza bancos de dados para armazenar e gerenciar informações. Isso permite que os aplicativos acessem dados relevantes e os atualizem conforme necessário.
APIs: As APIs (Interfaces de Programação de Aplicativos) permitem que diferentes partes de um sistema se comuniquem entre si. O backend usa APIs para integrar serviços externos e fornecer funcionalidades adicionais aos aplicativos e sites.

Perguntas Frequentes sobre o Backend

Qual é a diferença entre o backend e o frontend?

O backend lida com a lógica, o processamento de dados e a funcionalidade de um aplicativo ou site, enquanto o frontend se concentra na interface do usuário e na interação visual.

Quais habilidades são necessárias para se tornar um desenvolvedor de backend?

Para se tornar um desenvolvedor de backend, é necessário ter conhecimento em linguagens de programação como Python, Java, Ruby ou Node.js, bem como em bancos de dados e tecnologias relacionadas.

Como o backend contribui para a segurança dos aplicativos?

O backend implementa medidas de segurança, como autenticação de usuários, criptografia de dados e proteção contra ataques cibernéticos, garantindo a integridade e a confidencialidade das informações.

Conclusão

Embora muitas vezes o backend passe despercebido, sua importância não pode ser subestimada. É o alicerce invisível que permite que os aplicativos e sites funcionem de maneira eficiente e segura. Aprender sobre o backend pode abrir novas perspectivas para aqueles interessados em tecnologia e ajudar a compreender melhor o mundo digital em constante evolução.

FRONTEND: Desenvolvendo Experiências Digitais de Alta Qualidade

Wanderson Chaves — Fri, 16 Jun 2023 02:26:41 +0000

Introdução:

O FRONTEND é uma parte essencial do desenvolvimento web. É responsável por criar a interface com a qual os usuários interagem em um site ou aplicativo. Um FRONTEND bem projetado e otimizado pode melhorar significativamente a usabilidade e a experiência do usuário.

Neste artigo, vamos explorar o mundo do FRONTEND e descobrir como desenvolver experiências digitais de alta qualidade. Vamos discutir as melhores práticas, ferramentas essenciais e como otimizar o desempenho do seu site.

O que é FRONTEND?

O FRONTEND refere-se à camada visual de um site ou aplicativo. Envolve o design, a interação e a experiência do usuário. É a parte que os usuários veem e com a qual interagem diretamente. O FRONTEND é composto por HTML, CSS e JavaScript.

Por que o FRONTEND é importante?

O FRONTEND desempenha um papel crucial no sucesso de um site ou aplicativo. É a primeira impressão que os usuários têm e pode influenciar sua decisão de ficar ou sair. Um FRONTEND bem projetado e intuitivo melhora a usabilidade e a satisfação do usuário.

Melhores práticas de FRONTEND

Para desenvolver um FRONTEND de alta qualidade, é importante seguir algumas melhores práticas:

Design Responsivo: Certifique-se de que seu site se adapte a diferentes tamanhos de tela e dispositivos. Isso garantirá uma experiência consistente em todos os dispositivos.
Performance Otimizada: Otimize o desempenho do seu FRONTEND, minimizando o tempo de carregamento e melhorando a velocidade de resposta. Compressão de arquivos, uso adequado de cache e redução de solicitações HTTP são algumas técnicas que podem ser implementadas.
Acessibilidade: Certifique-se de que seu FRONTEND seja acessível a todos os usuários, independentemente de suas habilidades ou deficiências. Siga as diretrizes de acessibilidade, como as definidas pelo WCAG (Web Content Accessibility Guidelines).

Ferramentas essenciais para o desenvolvimento FRONTEND

Existem várias ferramentas essenciais que podem auxiliar no desenvolvimento FRONTEND:

Editores de Código: VS Code, Sublime Text, e Atom são alguns dos editores populares que oferecem recursos avançados para escrever código HTML, CSS e JavaScript.
Frameworks e Bibliotecas: Frameworks como React, Angular e Vue.js, e bibliotecas como Bootstrap e jQuery, ajudam a acelerar o desenvolvimento e oferecem recursos pré-construídos.
Depuradores: Ferramentas como o Chrome DevTools permitem inspecionar e depurar o código do FRONTEND, facilitando a identificação e correção de problemas.

Otimizando o FRONTEND para um melhor desempenho

Para otimizar o desempenho do seu FRONTEND, considere as seguintes dicas:

Minificação: Reduza o tamanho dos arquivos CSS e JavaScript, removendo espaços em branco e comentários desnecessários.
Compactação de Imagens: Comprima suas imagens para reduzir o tamanho do arquivo sem comprometer a qualidade visual.
Carregamento Assíncrono: Carregue recursos não essenciais de forma assíncrona para acelerar o tempo de carregamento da página.

Conclusão

Desenvolver um FRONTEND de alta qualidade é essencial para fornecer experiências digitais excepcionais aos usuários. Ao seguir as melhores práticas, utilizar as ferramentas adequadas e otimizar o desempenho, você estará no caminho certo para criar interfaces atraentes, intuitivas e responsivas.

Comece hoje mesmo a aprimorar suas habilidades de desenvolvimento FRONTEND e desfrute dos benefícios de oferecer experiências digitais de alta qualidade aos seus usuários.