Manual de Edição

Você não precisa mexer em código. Tudo é feito por 5 arquivos de dados na pasta data/. É como preencher uma ficha.

🌐 Como usar o GitHub

O site fica num repositório no GitHub. Você edita os arquivos direto no navegador, sem instalar nada.

👤 Para o dono do repositório (quem criou)

1. Criar conta no GitHub

Acesse github.com
Clique em Sign up (cadastrar)
Preencha: e-mail, senha e um nome de usuário (ex: seunome)
Confirme o e-mail que o GitHub vai te enviar

2. Convidar os membros do grupo como colaboradores

Para que outras pessoas do Grife possam editar, você precisa adicioná-las:

Vá até o repositório: https://github.com/NOME_DO_USUARIO/NOME_DO_REPOSITORIO
Clique na aba Settings ⚙️ (fica no topo da página)
No menu lateral, clique em Collaborators
Clique no botão verde Add people
Digite o nome de usuário ou e-mail da pessoa
Clique em Add NOME to this repository

A pessoa vai receber um e-mail de convite. Quando ela aceitar, poderá editar tudo.

👥 Para os membros do grupo (colaboradores)

1. Criar conta no GitHub

Acesse github.com
Clique em Sign up (cadastrar)
Preencha: e-mail, senha e um nome de usuário (ex: seunome)
Confirme o e-mail que o GitHub vai te enviar

2. Passe seu nome de usuário para o dono do repositório

Envie para a pessoa que gerencia o site. Exemplo: "Meu usuário no GitHub é maria_silva".

3. Aceitar o convite

Você receberá um e-mail do GitHub com o assunto "NOME_DO_USUARIO has invited you..."
Abra o e-mail e clique no botão verde View invitation
Na página que abrir, clique em Accept invitation

Pronto! Agora você tem acesso ao repositório.

✏️ Como editar (vale para todos)

Depois que você tem acesso, editar é igual para qualquer pessoa:

Acessar o repositório

Acesse https://github.com/NOME_DO_USUARIO/NOME_DO_REPOSITORIO
Você verá todos os arquivos do site listados

Editar um arquivo JSON

Navegue até data/ e clique no arquivo que quer editar (ex: membros.json)
Clique no ícone de lápis ✏️ (canto superior direito do arquivo)
Faça suas alterações no texto
No final da página, preencha:
- Campo pequeno: um resumo do que mudou (ex: Adicionei a Maria na equipe)
- Campo grande: pode deixar a descrição opcional ou explicar mais
Clique no botão verde Commit changes

Fazer upload de imagem

Navegue até imagens/ (ou imagens/equipe/)
Clique em Add file → Upload files
Arraste as imagens ou clique para selecionar
Escreva um resumo (ex: Foto da Maria)
Clique em Commit changes

O site atualiza sozinho

Depois de alguns segundos do commit, o site já estará atualizado. Não precisa fazer mais nada.

📱 Dica

Dá pra fazer tudo pelo celular também — o GitHub funciona no navegador do telefone igualzinho.

📁 Onde estão os arquivos

data/
  ├── membros.json        ← equipe
  ├── projetos.json       ← pesquisas
  ├── publicacoes.json    ← artigos e papers
  ├── eventos.json        ← palestras, oficinas, seminários
  └── producoes.json      ← protótipos, maquetes, cartazes

imagens/                   ← coloque as fotos aqui

⚠️ Regras de ouro (leia antes!)

Regra	Explicação
Nunca apague as aspas	Todo texto vai entre `" "`
Nunca apague as chaves e colchetes	`[ ]` abre e fecha a lista, `{ }` abre e fecha cada item
Vírgula separa itens	Entre um membro e outro vai vírgula. O último item não tem vírgula
Nome dos campos não muda	Sempre use `"nome"`, `"nivel"`, `"titulo"` etc. Não invente nomes novos
Campo vazio	Use `""` (duas aspas sem nada dentro)
Salve como UTF-8	No Bloco de Notas: Arquivo → Salvar como → Codificação: UTF-8

👥 MEMBROS (`data/membros.json`)

Cada membro tem essa ficha:

{
  "id": "10",
  "nome": "Nome Completo",
  "nivel": "Graduação",
  "curso": "Design",
  "pesquisa": "Título da pesquisa que participa",
  "email": "nome@ufu.br",
  "lattes": "http://lattes.cnpq.br/123456789",
  "foto": "equipe/nome.jpg"
}

O que cada campo significa

Campo	O que preencher	Exemplo
`id`	Número único para cada pessoa. Não repita.	`"10"`
`nome`	Nome completo	`"Maria Silva"`
`nivel`	Graduação, Mestrado, Doutorado ou Coordenador(a)	`"Mestrado"`
`curso`	Curso da pessoa	`"Arquitetura e Urbanismo"`
`pesquisa`	Nome da pesquisa. Precisa conter o título exato do projeto (veja seção 🔗 abaixo)	`"Metadesign e fabricação digital como abordagem..."`
`email`	E-mail institucional	`"maria@ufu.br"`
`lattes`	Link completo do currículo Lattes (ou `""`)	`"http://lattes.cnpq.br/..."`
`foto`	Nome do arquivo da foto (ou `""`)	`"equipe/maria.jpg"`

Como adicionar uma pessoa nova

Vá até o penúltimo } do arquivo
Depois dele, adicione uma vírgula
Cole o bloco da ficha preenchido
O último membro da lista não pode ter vírgula depois do }

Como colocar foto

Salve a foto na pasta imagens/ (ou em imagens/equipe/)
No campo "foto", coloque o caminho a partir de imagens/
- Se está em imagens/equipe/foto.jpg → "foto": "equipe/foto.jpg"
- Se está direto em imagens/foto.jpg → "foto": "foto.jpg"
Se não tiver foto, deixe "foto": "" — o site mostra as iniciais

🔬 PROJETOS (`data/projetos.json`)

{
  "id": "4",
  "titulo": "Nome do projeto",
  "descricao": "Texto explicando o projeto...",
  "status": "em_andamento",
  "ano_inicio": 2025,
  "ano_fim": 2026,
  "imagem": "",
  "link": ""
}

Campo	O que preencher
`status`	`"em_andamento"` ou `"concluido"`
`ano_inicio`	Ano que começou (número, sem aspas)
`ano_fim`	Ano que terminou, ou `null` se ainda está rolando
`imagem`	Nome do arquivo na pasta `imagens/` ou `""`
`link`	Link externo do projeto ou `""`

Como funciona o vínculo com membros

O site automaticamente conecta membros aos projetos:

No card do projeto aparece "Participam: Nome, Nome" com todos os membros vinculados
No card do membro o texto da pesquisa vira um link clicável que leva até o projeto

Para isso funcionar, o titulo do projeto precisa estar escrito exatamente igual dentro do campo pesquisa do membro. O site compara letra por letra (ignora maiúsculas/minúsculas).

Exemplo que funciona ✅

Projeto: "titulo": "Arquitetura cinética interativa"
Membro: "pesquisa": "Arquitetura cinética interativa: a experimentação prática em oficinas..."

Exemplo que NÃO funciona ❌

Projeto: "titulo": "Arq. Cinética Interativa"
Membro: "pesquisa": "Arquitetura cinética interativa: a experimentação..."

⚠️ Se você mudar o título de um projeto, precisa atualizar também o campo pesquisa de todos os membros daquele projeto.

📄 PUBLICAÇÕES (`data/publicacoes.json`)

{
  "id": "1",
  "titulo": "Título do artigo",
  "autores": "Sobrenome, N.; Sobrenome, N.",
  "ano": 2025,
  "veiculo": "Nome da revista ou evento",
  "link": "https://..."
}

Campo	O que preencher
`autores`	Formato ABNT abreviado
`ano`	Número, sem aspas
`link`	Link para o artigo ou `""`

📅 EVENTOS (`data/eventos.json`)

{
  "id": "1",
  "titulo": "Nome do evento",
  "descricao": "O que vai acontecer...",
  "data": "2025-06-20",
  "horario": "14:00 - 18:00",
  "local": "FAUeD — Laboratório de Fabricação Digital",
  "imagem": "",
  "link": "",
  "mapa": "mapa.html?lat=-18.918&lng=-48.255&zoom=18"
}

Campo	O que preencher
`data`	Formato ANO-MÊS-DIA (ex: `"2025-12-01"`)
`horario`	Opcional, pode deixar `""`
`imagem`	Nome do arquivo ou `""`
`link`	Link para inscrição ou `""`
`mapa`	Link no formato `mapa.html?lat=...&lng=...&zoom=...` (ou `""`)

Como gerar o link do mapa

Acesse openstreetmap.org
Navegue até o local exato do evento
Clique com o botão direito no ponto desejado e selecione Mostrar endereço
As coordenadas (latitude e longitude) aparecem no canto
Copie os números e monte o link:

"mapa": "mapa.html?lat=-18.918408&lng=-48.255425&zoom=18"

lat: latitude (números negativos no Brasil)
lng: longitude (números negativos no Brasil)
zoom: nível de zoom (15 = bairro, 18 = prédio, 20 = máximo)

🎨 PRODUÇÕES (`data/producoes.json`)

{
  "id": "1",
  "titulo": "Nome da produção",
  "descricao": "Texto descrevendo o trabalho...",
  "tipo": "Protótipo",
  "ano": 2025,
  "imagem": "",
  "link": ""
}

Campo	O que preencher
`tipo`	Protótipo, Maquete, Design gráfico, Instalação, etc.
`ano`	Ano de produção (número, sem aspas)
`imagem`	Nome do arquivo ou `""`
`link`	Link externo ou `""`

🖼️ Como organizar as imagens

imagens/
  ├── equipe/          ← fotos 1:1 dos membros
  │   ├── rodrigo.jpg
  │   ├── amanda.jpg
  │   └── sofia.jpg
  ├── projetos/        ← imagens de projetos
  └── eventos/         ← imagens de eventos

Use JPG ou PNG
Fotos de membros: quadradas (1:1) ficam melhores no círculo
Tamanho recomendado: até 500KB por imagem (o site carrega mais rápido)

❌ Erros comuns

Erro	Como resolver
Esqueceu vírgula entre itens	Adicione `,` depois do `}` de cada item (exceto o último)
Vírgula no último item	Remova a vírgula depois do último `}` da lista
Aspas dentro do texto	Use `"` normalmente — se o texto tiver aspas, troque por aspas simples `'`
`"foto": "C:\Users\..."`	Não use caminho do seu computador! É só o nome do arquivo
Esqueceu de fechar `}` ou `]`	Confira se cada `{` tem um `}` e cada `[` tem um `]`

✅ Checklist antes de salvar

Todos os textos estão entre aspas "
Todas as chaves { } e colchetes [ ] estão fechados
O último item da lista não tem vírgula depois
IDs não estão repetidos
Fotos estão na pasta imagens/ e o nome no JSON está correto
Datas estão no formato AAAA-MM-DD
O titulo de cada projeto aparece exatamente igual no campo pesquisa dos membros vinculados a ele

← Voltar para o site

🌐 Como usar o GitHub

👤 Para o dono do repositório (quem criou)

1. Criar conta no GitHub

2. Convidar os membros do grupo como colaboradores

👥 Para os membros do grupo (colaboradores)

1. Criar conta no GitHub

2. Passe seu nome de usuário para o dono do repositório

3. Aceitar o convite

✏️ Como editar (vale para todos)

Acessar o repositório

Editar um arquivo JSON

Fazer upload de imagem

O site atualiza sozinho

📱 Dica

📁 Onde estão os arquivos

⚠️ Regras de ouro (leia antes!)

👥 MEMBROS (data/membros.json)

O que cada campo significa

Como adicionar uma pessoa nova

Como colocar foto

🔬 PROJETOS (data/projetos.json)

Como funciona o vínculo com membros

📄 PUBLICAÇÕES (data/publicacoes.json)

📅 EVENTOS (data/eventos.json)

Como gerar o link do mapa

🎨 PRODUÇÕES (data/producoes.json)

🖼️ Como organizar as imagens

❌ Erros comuns

✅ Checklist antes de salvar

👥 MEMBROS (`data/membros.json`)

🔬 PROJETOS (`data/projetos.json`)

📄 PUBLICAÇÕES (`data/publicacoes.json`)

📅 EVENTOS (`data/eventos.json`)

🎨 PRODUÇÕES (`data/producoes.json`)