<h2>1 — O que é um Design System (visão geral)</h2><p>Design System é o kit-base do projeto: <strong>cores, tipografia, espaçamentos e padrões</strong> que garantem consistência. Em vez de decidir tudo de novo a cada componente, você já tem as regras definidas. É isso que vamos aplicar aqui.</p><h2>2 — Design System do projeto “Card de Produto”</h2><p>No website Frontend Mentor, vamos trabalhar com este projeto:</p><p><a href="https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa"><span style="text-decoration: underline;">https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa</span></a></p><p>Que é um projeto de <strong>card de produto</strong> (imagem, título, descrição, preço antigo/novo e botão de ação), perfeito para treinar organização de estilos e começar a estruturar componentes.</p><p>A ideia até aqui é aplicar os conhecimentos que <strong>adquiri</strong> durante a leitura da seção inicial do Vue.js (fundamentos).</p><p>Nesse caso, eu realmente paguei pelo Figma proposto pelo Frontend Mentor e, por motivos legais, não posso compartilhá-lo. Mas não tem problema algum em eu compartilhar <strong>como escrevi o código,</strong> o resultado pode ser igual, mas o código faz parte da minha propriedade intelectual.</p><p>Aqui vão as <strong>variáveis globais</strong> do projeto, pegas de acordo com o Figma (se você não quiser pagar por isso, pode usar direto):</p><pre>:root {
  /* Colors */

  --black: #1c232b;
  --gray: #6c7289;
  --cream: #f2eae2;
  --white: #ffffff;
  --green-500: #3d8168;
  --green-700: #1a4032;

  /* Typography */

  --text-preset-1: 700 1rem/1 'Fraunces', serif;
  --text-preset-2: 700 0.875rem/1.1 'Montserrat', sans-serif;
  --text-preset-3: 500 0.875rem/1.6 'Montserrat', sans-serif;
  --text-preset-4: 500 0.75rem/1.2 'Montserrat', sans-serif;
  --text-preset-5: 400 0.8125rem/1.2 'Montserrat', sans-serif;

  /* Spacing */

  --spacing-50: 0.25rem;
  --spacing-100: 0.5rem;
  --spacing-200: 1rem;
  --spacing-300: 1.5rem;
  --spacing-400: 2rem;
  --spacing-500: 2.5rem;
}
<br></pre><p>O ponto aqui: não estamos estudando CSS agora e sim Vue. Seria ótimo você tentar fazer do seu jeito, mas <strong>não há problema</strong> em copiar o código e pular essa parte. Essas são as <strong>cores, fontes e espaçamentos</strong> que o design system fornece para o projeto.</p><h2>Importando as fontes (passo a passo)</h2><p>Além disso, será necessário importar duas fontes do Google Fonts: <strong>Montserrat</strong> e <strong>Fraunces</strong>.</p><p>Você pode fazer da forma que achar melhor, mas, de acordo com as boas práticas, as fontes devem ser importadas <strong>no &lt;head&gt; do HTML</strong>, para carregarem imediatamente junto com o site.</p><h3>Passo 1 — O Google Fonts geralmente te entrega algo assim (com repetições):</h3><pre>&lt;link rel="preconnect" href="https://fonts.googleapis.com" /&gt;
    &lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /&gt;
    &lt;link
      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&amp;display=swap"
      rel="stylesheet"
    /&gt;
    &lt;link rel="preconnect" href="https://fonts.googleapis.com" /&gt;
    &lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /&gt;
    &lt;link
      href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&amp;display=swap"
      rel="stylesheet"
    /&gt;
<br></pre><h3>Passo 2 — Remova as linhas repetidas (evita preconnect duplicado):</h3><pre>&lt;link rel="preconnect" href="https://fonts.googleapis.com" /&gt;
    &lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /&gt;
    &lt;link
      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&amp;display=swap"
      rel="stylesheet"
    /&gt;
    &lt;link
      href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&amp;display=swap"
      rel="stylesheet"
    /&gt;
<br></pre><h3>Passo 3 — Unifique as duas famílias em <strong>uma</strong> requisição:</h3><pre>&lt;link
      href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&amp;family=Montserrat:ital,wght@0,100..900;1,100..900&amp;display=swap"
      rel="stylesheet"
    /&gt;
<br></pre><p>Pronto. Com isso, você mantém o <strong>design system</strong> organizado e otimiza o carregamento (menos requisições).</p>

Começo do projeto Card de Produto do Frontend Mentor

Card de Produto - Criando variáveis CSS globais

<h2>Como criar conteúdo útil, confiável e focado em pessoas</h2><p>De acordo com a própria documentação do Google, o conteúdo de um site <strong>não deve ser criado para os buscadores, mas sim para os usuários</strong>. Isso significa que a prioridade deve estar em entregar informação clara e relevante, e não apenas tentar manipular o algoritmo.</p><p>Na prática, o Google deixa evidente seus padrões de classificação. Ele sempre se pergunta:</p><ul><li>As informações são <strong>confiáveis</strong>?</li><li>São <strong>úteis</strong> de verdade?</li><li>Foram feitas para <strong>beneficiar o usuário</strong>?</li></ul><p>Se a resposta for negativa, é bem provável que seu site não alcance uma boa posição nos resultados de pesquisa. Para quem quiser se aprofundar, o próprio Google disponibiliza <a href="https://developers.google.com/search/docs/fundamentals/creating-helpful-content?hl=pt-br#self-assess">este guia oficial</a> com perguntas que ajudam a avaliar se um conteúdo realmente atende ao que seus sistemas buscam.</p><h2>O conceito de E-E-A-T</h2><p>Quando o assunto é qualidade, o Google adota o conceito de <strong>E-E-A-T</strong>: <strong>Experiência, Expertise, Autoridade e Confiabilidade</strong>.</p><p>Traduzindo, isso significa que o conteúdo precisa deixar claro:</p><ul><li><strong>Quem escreveu</strong>: autores identificados, com credenciais ou experiência prática no tema.</li><li><strong>Quais fontes foram utilizadas</strong>: de preferência confiáveis e verificáveis.</li><li><strong>Se houve revisão e checagem</strong>: evitando erros factuais ou imprecisões.</li></ul><p>Quanto mais esses pilares estiverem presentes, maior a probabilidade de o conteúdo ser reconhecido como relevante e ganhar destaque na busca.</p><h2>Experiência do usuário conta (e muito)</h2><p>Outro ponto fundamental é que o Google não avalia apenas o texto, mas também a <strong>experiência da página como um todo</strong>. Isso envolve:</p><ul><li>Navegação intuitiva e bem organizada.</li><li>Layout responsivo e carregamento rápido.</li><li>Estrutura de texto clara, com subtítulos e listas que facilitam a leitura.</li><li>Ausência de poluição visual, como excesso de anúncios ou pop-ups invasivos.</li></ul><p>Ou seja: não basta ter um bom artigo, é preciso oferecer um ambiente agradável para quem visita seu site.</p><h2>Conclusão</h2><p>Criar conteúdo útil, confiável e focado em pessoas não é apenas uma exigência do Google. É uma estratégia sustentável para qualquer criador, empresa ou profissional que deseja crescer no digital.</p><p>Quando você coloca o usuário em primeiro lugar, oferece informação de qualidade e constrói credibilidade, o resultado vem naturalmente: mais confiança, mais engajamento e, claro, melhor posicionamento nos buscadores.</p>

Entenda como e porquê criar conteúdo útil, confiável e focado em pessoas

Princípios Básicos de SEO - Como criar conteúdo útil, confiável e que prioriza as pessoas

<p>Sempre que iniciamos um novo projeto Vue 3 com <strong>Vite</strong>, ele vem com alguns arquivos e configurações padrão. Para manter o projeto limpo e organizado desde o início, é interessante fazer um <strong>reset</strong> — ou seja, remover estilos e componentes automáticos que não serão utilizados.</p><p>Esse reset só precisa ser feito <strong>uma única vez</strong>, e este guia pode ser usado como referência em projetos futuros.</p><h2>Passo 1 — Limpando o App.vue</h2><p>No arquivo:</p><pre>src\App.vue</pre><p>Apague completamente a tag:</p><pre>&lt;style&gt;</pre><p>E também a tag:</p><pre>&lt;header&gt;</pre><p>Após a limpeza, o arquivo ficará assim:</p><pre>&lt;script setup&gt;
import { RouterView } from 'vue-router'
&lt;/script&gt;

&lt;template&gt;
  &lt;RouterView /&gt;
&lt;/template&gt;</pre><h2>Passo 2 — Ajustando o HomeView.vue</h2><p>No arquivo:</p><pre>src\views\HomeView.vue</pre><p>Apague a tag:</p><pre>&lt;TheWelcome /&gt;</pre><p>O arquivo ficará reduzido a:</p><pre>&lt;script setup&gt;
&lt;/script&gt;

&lt;template&gt;
  &lt;main&gt;
  &lt;/main&gt;
&lt;/template&gt;</pre><h2>Passo 3 — Removendo o CSS padrão</h2><p>No arquivo:</p><pre>src\main.js</pre><p>Exclua a linha:</p><pre>import './assets/main.css'</pre><p>Agora, na pasta:</p><pre>src\assets</pre><p>remova os arquivos:</p><ul><li>base.css</li><li>main.css</li></ul><h2>Passo 4 — Limpando componentes desnecessários</h2><p>Na pasta:</p><pre>src\components</pre><p>exclua <strong>todos os arquivos</strong>.</p><h2>Passo 5 — Ajustando as rotas</h2><p>No arquivo:</p><pre>src\router\index.js</pre><p>Remova toda a rota referente ao AboutView:</p><pre>{
  path: '/about',
  name: 'about',
  // route level code-splitting
  // this generates a separate chunk (About.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: () =&gt; import('../views/AboutView.vue'),
},</pre><p>O código final do arquivo ficará assim:</p><pre>import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
  ],
})

export default router</pre><h2>Reset Finalizado ✅</h2><p>Pronto! Agora temos um projeto <strong>limpo</strong>, sem estilos e componentes automáticos do Vue. Esse reset serve como base para qualquer aplicação que você venha a construir, garantindo mais controle sobre o código desde o começo.</p>

Para iniciarmos os estudos, iremos resetar todos os estilos.

Card de Produto - Limpando o Projeto Padrão

<p>Leitura em andamento, irei resumir aqui o primeiro capítulo</p>

Capítulo 01 - Os Elementos do Comportamento

Blog de Estudos e Aprendizado

Posts sobre

Card de Produto - Criando variáveis CSS globais

Princípios Básicos de SEO - Como criar conteúdo útil, confiável e que prioriza as pessoas

Card de Produto - Limpando o Projeto Padrão

Micro Hábitos - BJ Fogg. 1/8

Categorias

Posts Populares

Card de Produto - Criando variáveis CSS globais

Princípios Básicos de SEO - Como criar conteúdo útil, confiável e que prioriza as pessoas

Card de Produto - Limpando o Projeto Padrão

Micro Hábitos - BJ Fogg. 1/8