Organizar arquivos e formatos

Esta é o capítulo 31 de 52 do volume Aprenda a Web. O projeto-fio é a Oficina Costeira, um coletivo fictício de design em João Pessoa. O exemplo está em exemplos/31-organizar-arquivos/. Em cada capítulo: leia, copie, mude uma coisa, preveja, recarregue e confira.

O que você vai aprender

• Separar o que vai para o site do que fica na produção.
• Nomear pastas: assets, páginas e arquivos fonte.
• Escolher JPG, PNG ou SVG.
• Comprimir sem destruir a leitura.
• Ligar um favicon simples.
• Distinguir o arquivo no disco do arquivo que o navegador baixa.

Duas pilhas

O site publicado (neste volume, a pasta do exemplo) leva HTML, CSS, imagens já comprimidas e, mais tarde, JavaScript. Rascunho, PSD, AI, entrevista e wireframe ficam fora dessa pasta. Git e o zip de estudo não precisam do arquivo gigante do editor gráfico.

Na Oficina Costeira o recorte é este:

• páginas na raiz do exemplo (index.html, projetos.html);
• assets/stylesheets/main.css;
• assets/imagens/ com arquivos prontos para a Web;
• assets/midia/ para vídeo e legenda.

Fontes editáveis (o cartaz original, a foto em tamanho de câmera) ficam numa pasta de produção ao lado, não dentro de assets.

Erro comum: salvar a foto da câmera direto em assets/imagens. O arquivo pesa megabytes. O navegador baixa tudo. Comprima uma cópia para a Web e preserve o original fora do exemplo.

Nomes previsíveis

Minúsculas, hífen, sem acento no nome do arquivo. cartaz-jacare.jpg abre em qualquer sistema. Espaços, acentos e diferenças entre maiúsculas e minúsculas tornam os caminhos mais fáceis de errar. O nome no src deve corresponder ao arquivo.

Pastas no plural estável: imagens, stylesheets. Não misture img, images e fotos no mesmo projeto. Um nome, o volume inteiro.

O capítulo 05 já treinou caminhos. Aqui o recorte é outro: o que entra no site e o que fica no arquivo fonte. orla-original.tif não viaja com o exemplo. orla-800.jpg viaja.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Arquivos — Oficina Costeira</title>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
  </head>
  <body>
    <main>
      <h1>Oficina Costeira</h1>
      <p>Os arquivos desta página moram em pastas com nomes estáveis.</p>
    </main>
  </body>
</html>

Copie. Mude o href do CSS para css/main.css. Preveja a página sem estilo. Recarregue. Corrija o caminho.

O caminho no CSS é relativo ao arquivo CSS, não ao HTML. url("../imagens/marca.svg") sobe de stylesheets para assets e entra em imagens.

Qual formato

Três perguntas, nesta ordem:

1. Dá para desenhar com CSS (cor, sombra, canto)? Não exporte imagem.
2. É foto ou cena com milhares de cores? JPG.
3. É marca, ícone ou desenho de poucos traços? SVG. Se o SVG falhar (filtro complexo, texto raster), PNG.

GIF animado pesa e treme. Prefira SVG com CSS ou um vídeo curto com controles, como a demonstração dos controles do exemplo. Vídeo não é assunto deste volume; só o formato da figura fixa.

Abra marca.svg no editor. É XML. Abra um JPG no editor: é ruído binário. Essa diferença explica por que a marca escala e a foto não.

Tabela rápida:

Comprimir de verdade

Exporte no tamanho em que a imagem aparece. Um cartaz de 400 px de largura não precisa de 4000 px. Qualidade JPG perto de 60% a 75% costuma bastar. Olhe o arquivo, não o número sozinho.

PNG com poucas cores pode ir para paleta menor. SVG é texto: remova metadados do editor, IDs inúteis e casas decimais demais. Ferramentas livres como SVGOMG ajudam. No Windows, um otimizador de PNG/JPG equivalente ao ImageOptim cumpre o mesmo papel.

Depois de exportar, abra a página. Zoom 200%. Se a marca borrar, o arquivo está pequeno demais. Se o download demora no painel Rede, ainda está grande.

Mude a qualidade de um JPG de teste. Preveja o tamanho em KB. Recarregue a página e compare o ruído.

Erro comum: “salvar para a Web” e depois reabrir no editor, exportar de novo. Cada geração JPG perde informação. Volte ao original da produção.

Favicon sem festa

O ícone da aba pode ser um favicon.ico na raiz ou um PNG ligado no head. Um arquivo de 32 px e outro de 192 px cobrem aba e atalho. Dezenas de tamanhos por plataforma não são obrigatórios neste volume.

<link rel="icon" href="assets/imagens/marca.svg" type="image/svg+xml">

SVG na aba funciona nos navegadores atuais do volume. Se precisar de ICO antigo, gere a partir da marca e coloque na raiz do site publicado. Aqui o exercício é local: o arquivo vive no exemplo, não num domínio.

Não publique fonte paga dentro do zip. WOFF da família do projeto só entra se a licença permitir.

Leia o head do exemplo. Copie o link do ícone. Mude o href para um arquivo que não existe. Preveja o ícone padrão do navegador. Recarregue e devolva o caminho certo.

Disco, navegador, servidor

O Explorador mostra pastas. O navegador pede URLs. Abrir index.html pelo disco funciona para CSS e imagens relativas. Vídeo, fontes e alguns caminhos se comportam melhor em 127.0.0.1.

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

Visite http://127.0.0.1:8769/exemplos/31-organizar-arquivos/. Isso não é publicação. Encerre com Ctrl+C. Não use 0.0.0.0.

Confira o painel Rede: cada JPG, PNG e SVG é um pedido. Menos pedidos e arquivos menores deixam a Oficina Costeira mais leve.

Leia o manifesto de imagens do volume quando for a entrega. Cada figura tem origem, licença e texto alternativo. Neste volume, pratique o hábito: nomeie, comprima, descreva.

Um pedido 404 no painel Rede é arquivo com nome errado, pasta errada ou extensão oculta no Windows. Ative a exibição de extensões. marca.svg.txt não é SVG.

Compare as três pastas do exemplo: HTML na raiz, CSS em stylesheets, marca em imagens. Mova o CSS para a raiz só no teste. Preveja o link quebrado. Recarregue. Devolva o arquivo ao lugar e o href ao original.

O zip de entrega deste volume não leva .trabalho. A pasta de produção (fontes, PSD, conversas) também fica de fora. O aluno recebe README, capítulos e curso/.

O que sobe e o que não sobe

Texto sobe: HTML, CSS, SVG, Markdown. Imagem já comprimida sobe. Não sobe o pacote do editor gráfico, o ZIP da fonte paga, o vídeo bruto da câmera.

Se a equipe usa Git no futuro (capítulo 06), o repositório é a pasta do site, não a pasta da vida inteira do projeto. Um .gitignore pode listar producao/ e *.psd. Neste volume, o hábito já vale mesmo sem Git: duas pilhas, dois destinos.

Favicon e marca são fictícios. A fotografia incluída mostra o pôr do sol no rio, na Praia do Jacaré, em Cabedelo; é uma fotografia real em domínio público, creditada no manifesto. Não coloque a foto da sua rua nem o CNPJ de ninguém. O manifesto de imagens do volume registra licença; o exercício do aluno registra o alt.

<link rel="stylesheet" href="assets/stylesheets/main.css">
<link rel="icon" href="assets/imagens/marca.svg" type="image/svg+xml">

Os dois href saem do HTML. Um aponta para CSS, outro para a marca. Quebre um de propósito. Preveja o 404 no Rede. Recarregue. Conserte.

JPG, PNG e SVG podem conviver na mesma pasta imagens. O nome do arquivo conta o recorte: orla-800.jpg, marca.svg, selo.png. Não use imagem-final-final2.png.

Subpastas só se a quantidade pedir: imagens/orla/ e imagens/marca/ no mesmo site pequeno atrasam o aluno. Uma pasta imagens basta para a Oficina Costeira.

O README do exemplo diz como abrir. Não invente um segundo index.htm. O navegador procura index.html. No Windows, confira a extensão de novo: o capítulo 01 já mostrou index.html.txt.

Um arquivo Thumbs.db ou .DS_Store não entra no zip. É lixo do sistema. Apague antes de enviar. O mesmo vale para desktop.ini.

A pasta assets/javascript pode existir no exemplo por herança do projeto-fio. Se o capítulo não ensina script, não ligue o arquivo na página só “porque a pasta está lá”. Pedido a menos.

O aluno abre index.html ou o servidor em 127.0.0.1. Os dois caminhos leem os mesmos arquivos do disco. O segundo revela 404 com clareza. Prefira o segundo quando o CSS “não pega”.

Não misture maiúsculas no meio do projeto: Imagens e imagens são pastas diferentes no servidor Linux e, às vezes, no Git. Padronize minúsculas desde o primeiro arquivo.

Atividades

1. A foto original da câmera deve ir para assets/imagens? Por quê?
2. Qual formato combina com a marca em traço da Oficina Costeira?
3. O url() no CSS é relativo a qual arquivo?
4. Por que exportar de novo um JPG já comprimido é má ideia?
5. O servidor de estudo deve escutar em qual endereço?
6. Por que marca.svg.txt não funciona como marca?

Respostas comentadas

1. Não. O original fica na produção. Em assets vai a cópia comprimida no tamanho de uso.
2. SVG. Poucos traços, escala em qualquer tela, arquivo pequeno.
3. Relativo ao CSS (main.css), não ao HTML. Por isso ../imagens/.
4. JPG perde dados a cada salvamento. Sempre volte ao arquivo fonte.
5. 127.0.0.1. Só esta máquina. Não exponha 0.0.0.0.
6. O Windows escondeu a extensão. O navegador trata o arquivo como texto, não como SVG. Mostre extensões e renomeie.

Referências

• Guia de tipos de imagem
• SVG
• link rel icon

O arquivo completo

Referência do exemplo 31-organizar-arquivos, 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.";});}