HTML puro — parte 2

Fazer um modal à mão significa: escurecer o fundo, travar a rolagem, prender o foco dentro dele, fechar no Esc, devolver o foco ao abrir e fechar. O <dialog> entrega tudo isso de fábrica.

<button id="abrir">Ver fotos do evento</button>

<dialog id="galeria">
  <img src="evento.webp" alt="Bar montado em casamento">
  <button id="fechar">Fechar</button>
</dialog>

const galeria = document.getElementById('galeria');

abrir.addEventListener('click', () => galeria.showModal());
fechar.addEventListener('click', () => galeria.close());

// fechar ao clicar fora (o ::backdrop é o próprio dialog)
galeria.addEventListener('click', (e) => {
  if (e.target === galeria) galeria.close();
});

dialog { border: 0; border-radius: 8px; padding: 0; max-width: 90vw; }
dialog::backdrop { background: rgba(0, 0, 0, .7); }

O ::backdrop é o fundo escuro — um pseudo-elemento que o navegador cria sozinho. Você não precisa daquela <div class="overlay">.

Um FAQ que abre e fecha, sem uma linha de JavaScript, já acessível por teclado e indexável pelo Google.

<details name="faq">
  <summary>Vocês atendem fora de Campo Grande?</summary>
  <p>Sim, atendemos todo o estado. Deslocamento cobrado à parte.</p>
</details>

<details name="faq">
  <summary>Qual o prazo mínimo para reservar?</summary>
  <p>Trinta dias para eventos até 100 convidados.</p>
</details>

O atributo name igual nos dois faz eles funcionarem como acordeão exclusivo: abrir um fecha o outro. Isso é recente e resolve mais um pedaço de JavaScript.

summary {
  cursor: pointer;
  font-weight: 600;
  padding: 16px 0;
  list-style: none;           /* tira a setinha padrão */
}
summary::-webkit-details-marker { display: none; }

/* sua própria seta, girando ao abrir */
summary::after {
  content: "+";
  float: right;
  transition: transform .2s;
}
details[open] summary::after { transform: rotate(45deg); }

O loading="lazy" adia o carregamento; ele não diminui o arquivo. Mandar uma imagem de 1600px para um celular de 400px continua desperdiçando banda. O srcset resolve: você oferece versões, o navegador escolhe.

<img src="hero-800.webp"
     srcset="hero-400.webp   400w,
             hero-800.webp   800w,
             hero-1600.webp 1600w"
     sizes="(max-width: 700px) 100vw, 800px"
     alt="Bar montado em festa ao ar livre"
     width="1600" height="900">

<picture> — trocar o formato ou a própria foto

Quando não é só tamanho: servir AVIF para quem suporta, ou usar um recorte vertical no celular e horizontal no desktop.

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source media="(max-width: 700px)" srcset="hero-vertical.webp">
  <img src="hero.jpg" alt="Bar montado em festa ao ar livre">
</picture>

Para tudo que aparece “por cima” mas não bloqueia a página: menu suspenso, tooltip, painel de filtro, aviso. Abre e fecha por atributo, sem JavaScript.

<button popovertarget="menu-mobile">Menu</button>

<nav id="menu-mobile" popover>
  <a href="#sobre">Sobre</a>
  <a href="#contato">Contato</a>
</nav>

Só isso. O navegador cuida de abrir, fechar ao clicar fora, fechar no Esc e colocar acima de tudo — sem z-index, porque popover vive numa camada própria, acima da página inteira.

São a forma moderna de trabalhar com listas. Em vez de um for com contador, você descreve o que quer.

const drinks = [
  { nome: "Negroni",  alcool: true,  preco: 32 },
  { nome: "Maracujá", alcool: false, preco: 18 },
  { nome: "Gin Tônica", alcool: true, preco: 28 }
];

// map — transforma cada item, devolve lista do mesmo tamanho
const nomes = drinks.map(d => d.nome);
// ["Negroni", "Maracujá", "Gin Tônica"]

// filter — devolve só os que passam no teste
const semAlcool = drinks.filter(d => !d.alcool);

// find — devolve o PRIMEIRO que bate (ou undefined)
const negroni = drinks.find(d => d.nome === "Negroni");

// reduce — reduz a lista a um único valor
const total = drinks.reduce((soma, d) => soma + d.preco, 0);  // 78

// some / every — devolvem true ou false
const temSemAlcool = drinks.some(d => !d.alcool);   // true
const todosCaros   = drinks.every(d => d.preco > 20); // false

// sort — ordena (cuidado: altera o array original)
const porPreco = [...drinks].sort((a, b) => a.preco - b.preco);

O ganho fica claro quando você encadeia — gerar o HTML da carta de drinks, só os sem álcool, ordenados por preço:

const html = drinks
  .filter(d => !d.alcool)
  .sort((a, b) => a.preco - b.preco)
  .map(d => `<li>${d.nome} — R$ ${d.preco}</li>`)
  .join('');

Sintaxe que aparece em praticamente todo código dos últimos anos. Saber ler isso é o que separa entender um exemplo da internet de copiar sem saber o que faz.

// DESTRUCTURING — extrair campos de um objeto
const drink = { nome: "Negroni", preco: 32, alcool: true };

const { nome, preco } = drink;        // cria duas variáveis
const { nome: titulo } = drink;       // renomeando
const { estoque = 0 } = drink;        // valor padrão se não existir

// SPREAD (...) — espalhar o conteúdo
const copia = { ...drink };                    // cópia rasa
const atualizado = { ...drink, preco: 35 };    // cópia com campo trocado
const juntos = [...listaA, ...listaB];         // juntar arrays

// ENCADEAMENTO OPCIONAL (?.) — não quebra se não existir
const cidade = cliente?.endereco?.cidade;   // undefined em vez de erro

// OPERADOR ?? — usa o padrão só quando é null ou undefined
const titulo2 = config.titulo ?? "Sem título";
// (diferente do ||, que também troca string vazia e zero)

// TEMPLATE LITERAL — texto com variáveis e quebras de linha
const msg = `Olá ${nome}, o preço é R$ ${preco}.`;

Dividir o JavaScript em arquivos que se importam entre si. Funciona nativamente no navegador, sem bundler — basta declarar type="module".

export const NUMERO = "5567999999999";

export function abrirWhatsApp(mensagem) {
  const url = `https://wa.me/${NUMERO}?text=${encodeURIComponent(mensagem)}`;
  window.open(url, '_blank', 'noopener');
}

<script type="module">
  import { abrirWhatsApp } from './whatsapp.js';

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    abrirWhatsApp('Olá! Vim pelo site.');
  });
</script>

Duas formas de conter eventos que disparam demais. Debounce espera a pessoa parar; throttle executa no máximo a cada X tempo.

function debounce(fn, espera = 300) {
  let t;
  return function (...args) {
    clearTimeout(t);
    t = setTimeout(() => fn.apply(this, args), espera);
  };
}

function throttle(fn, intervalo = 200) {
  let liberado = true;
  return function (...args) {
    if (!liberado) return;
    liberado = false;
    fn.apply(this, args);
    setTimeout(() => { liberado = true; }, intervalo);
  };
}

// buscar só quando parar de digitar
campo.addEventListener('input', debounce(buscarCep, 500));

// recalcular no máximo 5x por segundo ao redimensionar
window.addEventListener('resize', throttle(ajustarLayout, 200));

Recursos nativos que resolvem problemas reais de landing page — nenhum precisa de biblioteca.

Web Share — o compartilhar nativo do celular

Abre o menu do sistema, com WhatsApp, Instagram e tudo que a pessoa tem instalado. Faz muito mais sentido que uma fileira de botões de rede social.

botaoCompartilhar.addEventListener('click', async () => {
  if (!navigator.share) {          // desktop geralmente não tem
    botaoCompartilhar.hidden = true;
    return;
  }
  try {
    await navigator.share({
      title: 'Art Bar',
      text: 'Bar de drinks para eventos',
      url: window.location.href
    });
  } catch (e) { /* a pessoa cancelou — não é erro */ }
});

Clipboard — copiar com um clique

await navigator.clipboard.writeText('contato@artbar.com.br');
// exige HTTPS e um gesto da pessoa (clique)

Outras que aparecem

// artbar.com.br/?origem=instagram
const origem = new URLSearchParams(location.search).get('origem');

// entra na mensagem do WhatsApp — você descobre o que converteu
const msg = `Olá! Vim pelo site${origem ? ` (${origem})` : ''}.`;

PWA (Progressive Web App) é um site que o celular trata quase como aplicativo: instala na tela inicial, abre sem barra de navegador e funciona offline. São dois ingredientes.

1. O manifesto — dados de instalação

{
  "name": "Art Bar",
  "short_name": "Art Bar",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0B0B0B",
  "theme_color": "#7A1C30",
  "icons": [
    { "src": "/icone-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icone-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

2. O service worker — o que faz funcionar offline

É um script que fica entre o site e a internet, interceptando requisições. Ele guarda arquivos e responde com a cópia quando não há conexão.

const CACHE = 'artbar-v1';

self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(CACHE).then(c => c.addAll(['/', '/index.html']))
  );
});

self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then(r => r || fetch(e.request))
  );
});

Já vem no VS Code, ligado. Você escreve uma abreviação, aperta Tab, e ela vira HTML completo. É o item desta lista que mais economiza tempo por dia.

section.hero>h1+p+a.botao{Falar no WhatsApp}

<section class="hero">
  <h1></h1>
  <p></p>
  <a href="" class="botao">Falar no WhatsApp</a>
</section>

!                    → o esqueleto HTML inteiro, com head e meta
ul>li.item$*5>a      → lista de 5 itens numerados, cada um com link
.card*3>img+h3+p     → três cards com imagem, título e parágrafo

Funciona em CSS também: m10-20 vira margin: 10px 20px;, df vira display: flex;, p20 vira padding: 20px;.

Atalhos que mudam o ritmo

Extensões que valem para o seu fluxo

Snippets — seus próprios atalhos

Em Arquivo → Preferências → Configurar snippets, você cria abreviações suas. É aqui que entra aquele bloco de código que você copia de projeto em projeto.

{
  "Botão WhatsApp": {
    "prefix": "zap",
    "body": [
      "<a href=\"https://wa.me/$1\" class=\"botao\"",
      "   target=\"_blank\" rel=\"noopener\">$2</a>"
    ],
    "description": "Link de WhatsApp"
  }
}

Agora digitar zap + Tab insere o bloco, com o cursor parando em cada $1, $2. É a versão organizada do “copiar e colar do projeto anterior”.

O Prettier reescreve o seu código com formatação consistente — indentação, aspas, quebras de linha — toda vez que você salva. Você para de pensar em alinhamento.

{
  "printWidth": 90,
  "singleQuote": true,
  "tabWidth": 2
}

Para formatar ao salvar, ative Format On Save nas configurações do VS Code.

O Figma é a ferramenta padrão de design de interface. Mesmo que você não desenhe nele, vai receber layout nele — e saber extrair as informações certas economiza muita conversa.

Um hábito que evita retrabalho: antes de codar, pergunte ao designer o que acontece no celular. O Figma quase sempre mostra só a versão desktop, e adivinhar o comportamento responsivo é a fonte mais comum de “não era isso que eu queria”.

Os estilos de cor viram o bloco :root, como no tópico anterior. As Variáveis do Figma vão além: guardam cor, número (espaço, raio) e texto, podem apontar uma para a outra — o mesmo esquema de primitivo e semântico — e têm modos, que é como o designer desenha claro e escuro no mesmo arquivo.

O caminho de volta, do código para o Figma, passa pelo formato do Design Tokens Community Group do W3C: um JSON em que cada token tem $type e $value, e o alias é escrito entre chaves. Plugins de tokens para Figma, como o Tokens Studio, importam esse formato. A ferramenta Design system exporta nele.

{
  "cor": {
    "vinho-700": { "$type": "color", "$value": "#7A1C30" },
    "destaque":  { "$type": "color", "$value": "{cor.vinho-700}" }
  },
  "espaco": {
    "3": { "$type": "dimension", "$value": "16px" }
  }
}

Um único arquivo .html com tudo dentro: o CSS numa tag <style> no <head>, o JS numa tag <script> no fim do <body>. Sem arquivos separados, sem instalação, sem etapa de build.

Um meio-termo válido: trabalhar com arquivos separados e juntar tudo só na hora de entregar. Você ganha conforto durante o desenvolvimento e mantém a entrega de um arquivo só.

Em landing page, velocidade é conversão: cada segundo a mais de carregamento derruba a taxa de gente que fica. E quase sempre o culpado é o mesmo — imagem.

Imagens, na ordem de impacto

1. Redimensione antes de subir. Foto de celular tem 4000px de largura. Se ela aparece num espaço de 1200px, exporte em 1200px. É a economia mais fácil que existe.
2. Converta para WebP. Mesma qualidade visual, arquivo 25–35% menor que JPG.
3. loading="lazy" em tudo que está abaixo da dobra — nunca na imagem do topo.
4. width e height no HTML, para o navegador reservar o espaço e a página não pular enquanto carrega.

As três métricas que o Google mede

Outros pontos que rendem

• Fontes: use &display=swap e carregue só os pesos que realmente aparecem. Cada peso extra é um arquivo.
• Vídeo do YouTube: um embed direto custa centenas de KB antes de alguém apertar play. Use uma imagem estática com botão e só injete o <iframe> no clique.
• Teste no lugar certo: PageSpeed Insights, na aba de celular, com conexão lenta simulada. Seu notebook no wi-fi de casa mente.

SEO em landing page de serviço local é simples: título claro, descrição honesta, HTML semântico, site rápido e dados de negócio marcados. Não tem truque.

<title>Art Bar — Bar de Drinks para Casamentos | Campo Grande MS</title>
<meta name="description"
      content="Bar de drinks completo para casamentos e eventos
               corporativos em MS. Peça seu orçamento no WhatsApp.">
<link rel="canonical" href="https://artbar.com.br/">

<!-- Open Graph: como o link aparece no WhatsApp e redes -->
<meta property="og:title"       content="Art Bar — Bar de Drinks">
<meta property="og:description" content="Coquetelaria autoral para o seu evento.">
<meta property="og:image"       content="https://artbar.com.br/capa.jpg">
<meta property="og:url"         content="https://artbar.com.br/">
<meta property="og:type"        content="website">

JSON-LD — dados estruturados

Um bloco que descreve o negócio em linguagem de máquina. É o que permite ao Google mostrar endereço, telefone e avaliação direto no resultado da busca.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Art Bar",
  "telephone": "+5567999999999",
  "email": "contato@artbar.com.br",
  "areaServed": "Mato Grosso do Sul",
  "url": "https://artbar.com.br"
}
</script>

Checklist de SEO on-page

• Um <h1> por página, com a palavra que a pessoa busca
• <html lang="pt-BR">
• alt descritivo em todas as imagens
• URL limpa, sem parâmetro estranho
• Site rápido no celular
• Google Meu Negócio preenchido — para negócio local, pesa mais que o site

Deploy é o ato de colocar o site no ar. Para arquivo estático, hoje isso é gratuito e leva minutos.

Todas as opções gratuitas acima já vêm com HTTPS e CDN incluídos. Para um HTML único, a diferença prática entre elas é pequena — escolha pela facilidade de você mesmo atualizar depois. Mas gratuito não quer dizer liberado para cliente: a última coluna é o que os termos de cada uma dizem, e o que fazer com isso na hora de cobrar está em A mensalidade: o que ela compra.

Domínio é o endereço (artbar.com.br), alugado por ano. No Brasil, .com.br se registra no registro.br, direto e barato.

DNS é a lista telefônica da internet: traduz o nome do domínio para o endereço do servidor. Quando você aponta um domínio para a Netlify, está editando DNS.

HTTPS é a versão criptografada do protocolo, sinalizada pelo cadeado. Hoje é obrigatório: navegador marca site sem HTTPS como “não seguro” e o Google rebaixa. Nas hospedagens citadas, ele é automático e gratuito — você não precisa comprar certificado.

Git guarda o histórico do seu projeto: cada versão salva fica registrada, e você pode voltar a qualquer ponto. Resolve de vez o site-final-v2-AGORA-VAI.html.

git init                      # começa a versionar esta pasta
git add .                     # marca o que entra na próxima versão
git commit -m "Hero e menu"   # grava a versão com uma descrição
git log --oneline             # lista o histórico

git remote add origin URL     # conecta a um repositório no GitHub
git push                      # envia
git pull                      # traz o que mudou lá

O ganho direto para você: trabalhar sem medo. Pode reescrever a seção inteira sabendo que a versão anterior está guardada. E se o cliente disser “prefiro como estava antes”, você tem o antes.

F12 no Chrome. É a ferramenta que mais acelera aprendizado de front-end, porque mostra o efeito de cada mudança na hora.

No Elements você também consegue inspecionar qualquer site da internet e ver exatamente como um efeito foi feito. É a melhor forma de estudar layout que você achou bonito.

Sem medição, ninguém sabe se a landing page funcionou. Dois números importam: quanta gente chegou e quanta clicou no WhatsApp.

document.querySelectorAll('[href*="wa.me"]').forEach(link => {
  link.addEventListener('click', () => {
    if (typeof gtag === 'function') {
      gtag('event', 'clique_whatsapp', { local: link.dataset.origem });
    }
  });
});

XSS (Cross-Site Scripting) acontece quando conteúdo vindo de fora é inserido na página como HTML e o navegador executa. O caminho mais comum é o innerHTML.

// nome vem da URL: ?nome=<img src=x onerror="alert(1)">
const nome = new URLSearchParams(location.search).get('nome');

saudacao.innerHTML = `Olá, ${nome}!`;   // executa o código do atacante

saudacao.textContent = `Olá, ${nome}!`;   // insere como texto, não como HTML

Uma declaração que diz ao navegador de onde a página pode carregar coisas. Se um script de outra origem for injetado, o navegador simplesmente recusa.

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self';
               style-src  'self' 'unsafe-inline' https://fonts.googleapis.com;
               font-src   https://fonts.gstatic.com;
               img-src    'self' data:;
               script-src 'self' 'unsafe-inline'">

Outros cabeçalhos que a hospedagem configura

A regra é curta: tudo que está no front-end é público. Minificar, ofuscar ou esconder no meio do arquivo não muda isso — é só apertar F12.

Outras três precauções

• rel="noopener" em todo target="_blank". Sem isso, a página aberta consegue manipular a sua pela referência window.opener.
• Cuidado com script de CDN aleatório. Você está executando código de terceiro na página do seu cliente. Use CDNs conhecidas, com versão fixa — nunca @latest, que muda sem aviso.
• Nada de .env, backup ou .git na pasta publicada. Se o servidor entrega arquivo estático, ele entrega esses também para quem souber o caminho.