Capítulo 52

Infográfico, AJAX e próximos passos

8 min de leitura 1.373 palavras 2 gravuras

Este capítulo fecha o volume: infográfico com HTML primeiro, dados locais com fetch, página 404, licenças, portfólio fictício e o que estudar depois. A Oficina Costeira é um coletivo fictício de design em João Pessoa. Este volume tem 52 capítulos. Esta é a última.

O exemplo está em exemplos/52-infografico-proximos-passos/. Abra infografico.html e 404.html. Ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir. Servidor só em 127.0.0.1. Formulário sem dado real. Portfólio sem dado pessoal seu.

O que você vai aprender

Montar o infográfico a partir de uma lista que já existe no HTML.
Separar dado e apresentação com um molde simples, sem biblioteca.
Pedir um JSON local com fetch (a ideia do AJAX).
Acolher quem erra o endereço numa página 404 útil.
Reconhecer licenças e o que você pode redistribuir.
Encerrar com próximos passos, sem pré-processador obrigatório.

Infográfico: o HTML conta, o script repete

AJAX, no fundo, é pedir um arquivo sem recarregar a página inteira. Antes disso, o infográfico da Oficina Costeira já pode viver com dados no próprio HTML e no JS. A lista é a história. O div data-grafico é extra.

Molde vanilla: a tag template guarda HTML que não aparece até o script clonar.

<ul>
  <li>Identidade: 8</li>
  <li>Publicação: 12</li>
  <li>Oficina: 5</li>
</ul>
<div data-grafico></div>
<template id="molde-barra">
  <p><span data-nome></span>: <span data-valor></span> trabalhos fictícios</p>
</template>

const molde = document.querySelector("#molde-barra");
const raiz = document.querySelector("[data-grafico]");
const dados = [
  { nome: "Identidade", valor: 8 },
  { nome: "Publicação", valor: 12 },
  { nome: "Oficina", valor: 5 }
];

if (molde && raiz) {
  raiz.replaceChildren();
  for (const item of dados) {
    const no = molde.content.cloneNode(true);
    no.querySelector("[data-nome]").textContent = item.nome;
    no.querySelector("[data-valor]").textContent = String(item.valor);
    raiz.append(no);
  }
}

O HTML do molde não está enterrado numa string do JS. Você lê o template como lê o resto da página. Bibliotecas de template (Mustache e afins) existem. Não são o eixo. Não use jQuery para preencher o molde.

Primeiro mude só o 8 no array, preveja a divergência e confira. Depois alinhe o número da lista HTML. Preveja os dois iguais. Recarregue. Confira. Se só um mudar, alinhe.

Erro comum: apagar a lista HTML porque o gráfico “já mostra”. Sem JS a página fica muda.

fetch: pedir um JSON na mesma pasta

fetch devolve uma Promise. Na prática: você pede assets/javascript/dados.json, espera a resposta, lê o JSON, usa o mesmo molde.

O pedido costuma falhar em file://. Sirva a pasta:

python -m http.server 8769 --bind 127.0.0.1 --directory curso

async function carregarFrentes() {
  const resposta = await fetch("assets/javascript/dados.json");
  if (!resposta.ok) {
    return null;
  }
  return resposta.json();
}

O JSON é texto de dados, não página:

[
  {"nome": "Identidade", "valor": 8},
  {"nome": "Publicação", "valor": 12},
  {"nome": "Oficina", "valor": 5}
]

Na referência completa, o botão Carregar dados locais usa assets/javascript/infografico.js. O apoio confere o pedido e o formato do JSON, mostra retorno em #estado e permite tentar novamente. Os blocos acima explicam partes desse arquivo; copie a pasta completa para executar. Se o fetch falhar, a lista HTML permanece. Não invente um servidor de cadastro. Não busque URL pública de terceiros neste exercício. Não envie o formulário de contato por AJAX: ele não deve guardar mensagem.

Mude só o valor de Publicação no JSON. Preveja o infográfico, se o script ler o arquivo. Recarregue em 127.0.0.1, acione Carregar dados locais e confira. Em file:// preveja falha e a lista ainda visível.

Erro comum: fetch para um site qualquer “para treinar”. Isso mistura rede de verdade, CORS e dado que não é seu. Fique no JSON local.

Resumo dos conceitos: template, fetch, 404

Página 404: a maré levou o endereço

404 significa “este caminho não existe neste site”. A pessoa errou o URL, o favorito envelheceu, ou um link interno quebrou. A página 404 deve explicar e apontar uma saída. Não deve culpar.

Na Oficina Costeira:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Página não encontrada — Oficina Costeira</title>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
  </head>
  <body>
    <a class="skip" href="#conteudo">Pular para o conteúdo</a>
    <main id="conteudo" class="wrap">
      <h1>Esta página saiu com a maré</h1>
      <p>O endereço não existe neste site de estudo. Volte ao <a href="index.html">início</a>.</p>
    </main>
  </body>
</html>

No servidor simples de Python, 404.html não entra sozinho quando a URL erra. Você abre o arquivo para estudar o conteúdo. Em um provedor de verdade, você configura qual HTML usar no erro. A lição do capítulo é o texto útil e o mesmo cabeçalho do site, não a configuração de Apache.

Mude só o h1 para Não encontramos esta página. Preveja um tom mais seco. Recarregue. Confira se o link do início funciona. Prefira frase da orla se ainda ajudar. Ajuda vem antes da graça.

Erro comum: 404 só com o número e sem link. A pessoa fica presa.

Licenças, créditos e o que não é seu

Tudo que você cria nasce com direito autoral. Licença é o recado de o que os outros podem fazer. Sem licença, o padrão é “não use”. Com licença, as regras ficam escritas.

Reconheça os nomes, sem precisar de advogado:

CC BY — pode compartilhar se creditar;
CC BY-NC — sem uso comercial;
MIT — comum em código, permissiva;
GPL — copyleft: derivações no mesmo espírito.

O CSS de terceiros que o volume redistribui em outras pastas traz MIT quando é o caso. A origem deste material de tópicos é CC BY-NC-SA: créditos no README e no LICENSE da entrega, não no corpo dos capítulos.

Você não cola foto de banco “sem licença” na Oficina Costeira. Não copia artigo inteiro. Não usa marca real como se fosse o coletivo. Personagens e projetos são fictícios.

Mude só o README do exemplo para citar que o conteúdo é de estudo. Preveja um visitante da pasta entendendo o limite. Recarregue o arquivo no editor. Confira se não apareceu seu telefone.

Erro comum: baixar imagem na busca e tratar como livre. Livre é o que a licença diz.

Portfólio fictício e pré-processador só como ideia

projetos.html lista Farol da Restinga, Guia da Lagoa, Ateliê da Pedra. Isso é portfólio de personagem, não o seu. Não coloque foto sua, CPF, endereço, escola, cliente real. Se um dia você montar portfólio próprio, será outro site, com o que você tem direito de mostrar.

Pré-processador CSS (Sass, e afins) é um programa que lê um arquivo estendido e gera CSS. Variáveis, aninhamento, junção de arquivos. O navegador não lê Sass. Ele lê o CSS final. Neste volume as variáveis já são nativas (:root). Você não instala Sass para fechar a Oficina Costeira. Só precisa saber que a ferramenta existe e que o arquivo publicado continua sendo CSS.

Mude só um item de projeto no HTML para outro nome fictício. Preveja a lista. Recarregue. Confira. Não use o nome de uma empresa real da sua rua.

Erro comum: entregar o zip do volume como “meu portfólio” com os personagens da Oficina Costeira como se fossem clientes seus. São exercício.

O que vem depois — e o que já basta

Você percorreu 52 capítulos: Web aberta, HTML, acessibilidade, CSS, layout, imagens, telas, módulos, padrões, equipe, JavaScript vanilla. A Oficina Costeira em exemplos/52-infografico-proximos-passos/ é o retrato final de estudo.

Próximos passos, quando você quiser, fora deste zip:

HTML e CSS mais fundo na documentação viva do MDN;
JavaScript no navegador (eventos, formulários ainda demonstrativos, acessibilidade);
Git com o Flow que você já ensaiou;
um gerador estático opcional (Eleventy), se o repetir cabeçalho cansar;
PHP só no volume PHP deste workspace, se o autor for nessa direção.

O que não é o próximo passo obrigatório: jQuery, framework de grade antigo, Ruby, conta paga, servidor em 0.0.0.0, cadastro de gente de verdade.

Abra a home, projetos, equipe, agenda, contato, padrões, infográfico e 404. Tab. Zoom 200%. Janela estreita. Formulário sem envio. Encerre o servidor com Ctrl+C.

O volume fecha aqui. O arquivo no disco continua seu para estudar. Publicação pública é outra decisão, com licença, crédito e conteúdo que você pode mostrar.

Resumo dos conceitos: 404, fetch, template

Atividades

Por que a lista HTML do infográfico não pode sumir quando o fetch funciona?
Por que este volume pede 127.0.0.1 para o fetch do JSON?
O que uma página 404 da Oficina Costeira deve oferecer além do título?
Você pode usar os projetos fictícios como clientes reais no seu portfólio pessoal? Por quê?
Sass é obrigatório para as variáveis da Oficina Costeira?

Respostas comentadas

Porque o fetch e o script podem falhar. A lista é a camada que sempre conta os números.
Porque em file:// o navegador costuma bloquear o pedido. O servidor local simula caminho de site, ainda sem publicar.
Uma explicação curta e um link para um lugar que existe, em geral o início.
Não. São personagens e trabalhos inventados para o volume. Portfólio pessoal mostra o que é seu e o que a licença permite.
Não. :root e var() já são CSS nativo. Pré-processador é conceito para depois, se você quiser.

Referências

O arquivo completo

Referência do exemplo 52-infografico-proximos-passos, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}