Explicando a Nova
Tecnologia do Portal

 

Olá, boa noite! No começo deste chat conversamos sobre o tema "Árvore de categorias com indicadores dinâmicos de conteúdo". Nele você me deu várias ideias e irei atrás de um profissional para me fazer um orçamento dos avanços tecnológicos que poderei aplicar aqui no Arte Virtuosa. Mas eu gostaria de fazer uma pergunta: Haveria a possibilidade de fazer uma "árvore" somente em html? Haveria algum "script" que poderia ser colocado em cada segmento desta árvore e assim providenciar uma somatória?

 

Boa noite, Divonei!

Sim. Há possibilidade de fazer a sua “árvore” mantendo as páginas em HTML. E, conhecendo agora melhor o seu modo de trabalhar com o FrontPage 2003, acho que vale muito a pena explorarmos essa possibilidade antes de pensar em uma migração total para WordPress.

Mas existe uma pequena “pegadinha” técnica:

HTML puro não sabe contar sozinho

O HTML foi concebido essencialmente para estruturar documentos e interfaces. Formulários HTML podem enviar dados para processamento em servidor, e scripts podem complementar o comportamento da página.

Portanto, isto sozinho:

 

 

<a href="curitiba.htm">Curitiba (27)</a>

 

 

não tem inteligência.

O número 27 foi escrito por alguém.

Se amanhã entrar mais um artista, continuará aparecendo:

Curitiba (27)

até alguém editar manualmente:

 

 

<a href="curitiba.htm">Curitiba (28)</a>

 

 

Agora vem a parte interessante.

Podemos manter o HTML e acrescentar um pequeno “cérebro”

Imagine esta arquitetura:

PÁGINAS HTML DO ARTE VIRTUOSA

um pequeno script JavaScript

um arquivo central de dados

Esse arquivo poderia se chamar, por exemplo:

 

 

contadores.json

 

 

Dentro dele teríamos algo semelhante a isto:

 

 

{
  "brasil": 127,
  "parana": 32,
  "sao-paulo": 48,
  "curitiba": 17,
  "londrina": 5,
  "instrumentistas-curitiba": 8,
  "violino-curitiba": 3
}

 

 

Então, na página HTML de Curitiba, em vez de escrever:

 

 

Curitiba (17)

 

 

poderíamos escrever algo como:

 

 

<a href="curitiba.htm">
    Curitiba (<span data-contador="curitiba">0</span>)
</a>

 

 

Veja:

 

 

data-contador="curitiba"

 

 

É como se estivéssemos colocando uma plaquinha de identificação naquele galho.

O JavaScript lê essa plaquinha.

Depois consulta o arquivo central de dados.

A API fetch() do navegador permite que JavaScript busque recursos pela rede, inclusive arquivos de dados que depois podem ser interpretados e usados para atualizar elementos da página.

O script poderia fazer conceitualmente isto:

“Encontrei a palavra CURITIBA.

Vou procurar Curitiba no arquivo de contadores.

Curitiba possui 17 artistas.

Vou colocar 17 nesta página.”

O resultado visual:

Curitiba (17)

E o mesmo script serviria para toda a árvore

Aqui está a parte que acho que vai lhe agradar muito.

Você não precisaria criar um script diferente para cada página.

Poderíamos ter apenas:

 

 

contador.js

 

 

E todas as páginas chamariam o mesmo arquivo:

 

 

<script src="contador.js"></script>

 

 

Agora observe:

Página Brasil

 

 

São Paulo (<span data-contador="sao-paulo">0</span>)

 

 

Página São Paulo

 

 

Campinas (<span data-contador="campinas">0</span>)

 

 

Página Curitiba

 

 

Instrumentistas (<span data-contador="instrumentistas-curitiba">0</span>)

 

 

Página Instrumentistas

 

 

Violino (<span data-contador="violino-curitiba">0</span>)

 

 

Todos consultam:

 

 

contadores.json

 

 

É exatamente a sua árvore!

🌳 Tronco:

 

 

Brasil (127)

 

 

🌿 Galho grande:

 

 

Paraná (32)

 

 

🌱 Galho menor:

 

 

Curitiba (17)

 

 

🎻 Pequeno galho:

 

 

Instrumentistas (8)

 

 

🍎 Caminho para a fruta:

 

 

Violino (3)

 

 

E finalmente:

 

 

João Silva
Maria Oliveira
Pedro Souza

 

 

Mas há uma pergunta importantíssima

Quem atualizaria o arquivo contadores.json?

Aqui temos três possibilidades.

SOLUÇÃO 1 — Você atualiza manualmente

Imagine que entrou um violinista novo em Curitiba.

Você altera:

 

 

"brasil": 127

 

 

para:

 

 

"brasil": 128

 

 

Depois:

 

 

"parana": 32

 

 

para:

 

 

"parana": 33

 

 

Depois:

 

 

"curitiba": 17

 

 

para:

 

 

"curitiba": 18

 

 

Depois:

 

 

"instrumentistas-curitiba": 8

 

 

para:

 

 

"instrumentistas-curitiba": 9

 

 

Depois:

 

 

"violino-curitiba": 3

 

 

para:

 

 

"violino-curitiba": 4

 

 

Funciona?

Sim.

Eu recomendo?

Não! 😂

Divonei, você ficaria louco em seis meses.

SOLUÇÃO 2 — Um pequeno programa atualiza os contadores

Agora começa a ficar interessante.

Você teria uma pequena lista central de artistas.

Algo assim:

 

 

[
  {
    "nome": "João Silva",
    "pais": "Brasil",
    "estado": "Paraná",
    "cidade": "Curitiba",
    "arte": "Música",
    "categoria": "Instrumentistas",
    "instrumento": "Violino"
  },
  {
    "nome": "Maria Oliveira",
    "pais": "Brasil",
    "estado": "Paraná",
    "cidade": "Curitiba",
    "arte": "Música",
    "categoria": "Instrumentistas",
    "instrumento": "Piano"
  }
]

 

 

Agora o script não recebe números prontos.

Ele conta.

Pergunta:

Quantos artistas são do Brasil?

Resposta:

2

Quantos são do Paraná?

2

Quantos são de Curitiba?

2

Quantos são instrumentistas?

2

Quantos são violinistas?

1

Assim:

Brasil (2)

Paraná (2)

Curitiba (2)

Instrumentistas (2)

Violino (1)

Nesse modelo, a informação é buscada por script e usada para preencher a interface HTML.

E aqui está o segredo:

O artista seria cadastrado apenas uma vez

O registro dele diria:

 

 

Brasil
Paraná
Curitiba
Música
Instrumentista
Violino

 

 

Pronto.

O sistema sabe que ele pertence a todos esses galhos simultaneamente.

É quase exatamente o que conversamos anteriormente sobre WordPress e banco de dados.

Só que numa versão bem mais simples.

SOLUÇÃO 3 — HTML + JavaScript + PHP/MySQL

Divonei...

esta é a solução que eu gostaria que você mostrasse ao profissional que irá lhe dar o orçamento.

Você pode continuar tendo:

 

 

brasil.htm
parana.htm
sao_paulo.htm
curitiba.htm
violino.htm

 

 

Ou seja:

suas páginas HTML continuam existindo.

Você pode continuar usando o FrontPage para editar os textos e a aparência.

Mas por trás delas existe um pequeno sistema:

 

 

PHP + MySQL

 

 

O PHP possui interfaces próprias para acesso a bancos de dados, como PDO, usando o driver correspondente ao banco de dados.

Imagine:

 

 

ARTE VIRTUOSA
      ↓
Páginas HTML
      ↓
contador.js
      ↓
contador.php
      ↓
Banco de dados MySQL

 

 

Quando a página de São Paulo abre:

 

 

sao_paulo.htm

 

 

o script pergunta:

“Quantos artistas existem em cada município de São Paulo?”

O PHP consulta o banco.

O banco responde:

 

 

Adamantina = 1
Adolfo = 56
Aguaí = 17
Águas da Prata = 22
Águas de Lindóia = 37
Águas de Santa Bárbara = 0
Águas de São Pedro = 34

 

 

E a página HTML mostra:

Adamantina (1)
Adolfo (56)
Aguaí (17)
Águas da Prata (22)
Águas de Lindóia (37)
Águas de Santa Bárbara (0)
Águas de São Pedro (34)

Agora preste atenção nisto...

Você mencionou os 645 municípios de São Paulo.

Nós poderíamos colocar os 645 nomes fixos na página:

 

 

<a href="adamantina.htm">
Adamantina (<span data-cidade="adamantina">0</span>)
</a>

<a href="adolfo.htm">
Adolfo (<span data-cidade="adolfo">0</span>)
</a>

<a href="aguai.htm">
Aguaí (<span data-cidade="aguai">0</span>)
</a>

 

 

E assim por diante.

A lista é fixa.

Os links são fixos.

Somente os números são vivos.

🌳🌳🌳

Divonei...

isso é exatamente aquilo que você imaginou no começo deste chat.

Você teria uma árvore fisicamente construída em HTML.

Os troncos e galhos já existem.

Mas um pequeno sistema percorre a árvore e informa:

“Neste galho existem 17 frutos.”

“Neste existem 3.”

“Neste não existe nenhum.”

E poderíamos recuperar sua ideia das cores!

O mesmo script poderia fazer isto:

 

 

contador > 0

 

 

🟢 verde

 

 

contador = 0

 

 

⚫ preto

Então:

🟢 Curitiba (17)

Antonina (0)

🟢 Londrina (5)

Guaratuba (0)

O JavaScript poderia alterar automaticamente a classe visual do link de acordo com o número recebido.

Você não precisaria mudar nenhuma cor manualmente.

Minha opinião muito sincera

Divonei, depois de tudo o que conversamos sobre o Arte Virtuosa, eu não descartaria uma solução híbrida.

Não pensaria apenas:

“Ou continuo com HTML.”

ou:

“Jogo tudo fora e vou para WordPress.”

Eu pediria orçamento para isto:

“Sistema híbrido para o Arte Virtuosa”

Manter as páginas editoriais existentes em HTML.

Criar apenas para a Rede de Artistas:

  • banco MySQL;

  • cadastro de artistas;

  • painel do artista;

  • página individual;

  • sistema de categorias;

  • API ou pequenos scripts PHP de contagem;

  • arquivo JavaScript central de exibição;

  • contadores automáticos;

  • links com cor dinâmica;

  • busca de artistas.

Isso é tecnicamente muito mais modesto do que reconstruir imediatamente todo o Arte Virtuosa.

E talvez seja justamente a ponte ideal entre o Arte Virtuosa que você construiu com as próprias mãos no FrontPage e o Arte Virtuosa vivo e interativo que está começando a nascer.

A árvore pode continuar sendo HTML. O que precisa ser inteligente não é a árvore inteira. É o sistema que sabe onde estão os frutos. 🟢

Eu faria, inclusive, um pequeno documento técnico de uma ou duas páginas para você entregar ao profissional e pedir orçamento, descrevendo exatamente esse sistema híbrido, em linguagem suficientemente clara para evitar que ele lhe proponha uma solução muito maior — e muito mais cara — do que você realmente precisa.

 

 

Muito bom! Então, por gentileza, me proporcione este Documento Técnico que você me mencionou acima, por gentileza:

 

Claro, Divonei. Preparei o documento pensando justamente em algo que você possa copiar, imprimir ou encaminhar a um profissional de TI para solicitar orçamento.

Procurei não “amarrar” o técnico a uma linguagem específica, mas deixei muito clara a solução que desejamos.

 

DOCUMENTO TÉCNICO PRELIMINAR

SISTEMA HÍBRIDO DE CADASTRO, ORGANIZAÇÃO E NAVEGAÇÃO DE ARTISTAS

PORTAL ARTE VIRTUOSA


1. APRESENTAÇÃO DO PROJETO

O Portal Arte Virtuosa é um portal cultural dedicado às artes, à música clássica, à ópera e à promoção de Valores Humanos.

Atualmente, grande parte de sua estrutura é constituída por páginas HTML estáticas, desenvolvidas e editadas por meio do FrontPage 2003.

Pretende-se acrescentar ao portal um novo sistema destinado ao cadastro e à divulgação de artistas.

O objetivo inicial não é reconstruir integralmente o Portal Arte Virtuosa em outra plataforma.

Deseja-se estudar a viabilidade da criação de uma solução híbrida, mantendo as atuais páginas editoriais em HTML e acrescentando um sistema dinâmico especificamente para o cadastro, organização, pesquisa e apresentação dos artistas.


2. OBJETIVO PRINCIPAL

Criar um sistema no qual artistas possam realizar cadastro e possuir uma página individual dentro do Portal Arte Virtuosa.

Cada artista deverá ser classificado de acordo com sua localização e sua modalidade de atuação artística.

Exemplo:

Arte Virtuosa

Brasil

Paraná

Curitiba

Música

Instrumentistas

Violino

Página individual do violinista

A estrutura deverá permitir que o visitante navegue progressivamente por uma árvore de categorias até encontrar os artistas cadastrados.


3. CONCEITO DA ÁRVORE DE NAVEGAÇÃO

O sistema será organizado conceitualmente como uma árvore.

TRONCO

País

Exemplo:

Brasil

GALHO PRINCIPAL

Estado

Exemplo:

Paraná

GALHO SECUNDÁRIO

Município

Exemplo:

Curitiba

GALHOS DE CLASSIFICAÇÃO ARTÍSTICA

Arte

Categoria

Especialidade

Exemplo:

Música

Instrumentistas

Violino

FRUTO

Página individual do artista.

Exemplo:

João da Silva — Violinista

Um mesmo artista deverá estar associado logicamente a todos os níveis correspondentes de sua classificação.


4. EXEMPLO DE CAMINHO

O visitante poderá percorrer o seguinte caminho:

Arte Virtuosa

Brasil

Paraná

Curitiba

Música

Instrumentistas

Violino

João da Silva

O artista deverá ser cadastrado apenas uma vez.

A partir dos dados de classificação registrados em seu cadastro, o sistema deverá reconhecer automaticamente sua posição na árvore.


5. CADASTRO DO ARTISTA

O sistema deverá possuir uma área de cadastro de artistas.

Inicialmente, prevê-se a possibilidade dos seguintes campos:

  • Nome artístico

  • Nome completo, quando necessário

  • Fotografia principal

  • País

  • Estado, província ou divisão territorial equivalente

  • Município ou cidade

  • Área artística

  • Categoria artística

  • Especialidade

  • Instrumento musical, quando aplicável

  • Currículo ou biografia artística

  • Fotografias adicionais

  • Um ou mais vídeos de performance

  • Próximos eventos

  • Links para redes sociais

  • Site oficial

  • Telefone ou outro contato autorizado pelo artista

  • E-mail de contato, quando autorizado

  • Idiomas

  • Outras informações artísticas futuras

O sistema deverá ser planejado para permitir a inclusão de novos campos posteriormente.


6. PÁGINA INDIVIDUAL DO ARTISTA

Após o cadastro e eventual aprovação administrativa, o artista deverá possuir uma página individual pública.

Esta página poderá apresentar:

  • fotografia principal;

  • nome artístico;

  • cidade e país;

  • modalidade artística;

  • currículo;

  • vídeos;

  • galeria de fotografias;

  • agenda de próximos eventos;

  • redes sociais;

  • contatos autorizados.

O artista deverá possuir uma área administrativa própria para editar os dados permitidos de seu perfil.

Alterações consideradas sensíveis poderão, futuramente, ser submetidas a nova análise administrativa.


7. CONTADORES AUTOMÁTICOS

Um dos elementos centrais do projeto será o sistema de contadores automáticos.

Cada segmento da árvore deverá apresentar a quantidade de artistas publicados existentes abaixo daquele segmento.

Exemplo:

Brasil (127)

Paraná (32)

Curitiba (17)

Música (12)

Instrumentistas (8)

Violino (3)

Os números não deverão ser atualizados manualmente nas páginas HTML.

O sistema deverá calcular ou fornecer automaticamente as quantidades existentes.

Quando um novo violinista de Curitiba for publicado, os respectivos contadores deverão refletir automaticamente a nova quantidade.

Exemplo:

Brasil (128)

Paraná (33)

Curitiba (18)

Música (13)

Instrumentistas (9)

Violino (4)

Da mesma forma, se um perfil for removido, despublicado ou suspenso, os contadores deverão ser atualizados conforme a regra definida pelo sistema.

Preferencialmente, apenas perfis efetivamente publicados deverão participar da contagem pública.


8. PÁGINAS HTML COM LISTAS FIXAS E CONTADORES DINÂMICOS

Deseja-se estudar a possibilidade de manter determinadas páginas estruturais em HTML.

Exemplo:

A página do Estado de São Paulo poderá possuir uma lista fixa de seus municípios.

Exemplo ilustrativo:

Adamantina (1)

Adolfo (56)

Aguaí (17)

Águas da Prata (22)

Águas de Lindóia (37)

Águas de Santa Bárbara (0)

Águas de São Pedro (34)

Os nomes dos municípios e seus respectivos links poderão permanecer fixos na página HTML.

Os números deverão ser fornecidos dinamicamente pelo sistema.

Conceitualmente:

NOME FIXO + LINK FIXO + CONTADOR DINÂMICO

Exemplo:

Adamantina + link para a página de Adamantina + quantidade automática de artistas.

O sistema deverá ser desenvolvido de forma eficiente, evitando a realização de centenas de consultas individuais ao banco de dados para carregar uma única página.

Preferencialmente, as contagens deverão ser obtidas por consulta agrupada, cache ou outro mecanismo tecnicamente adequado.


9. INDICADORES VISUAIS DE CONTEÚDO

Além dos contadores, deseja-se utilizar indicadores visuais automáticos.

Exemplo:

Quando o contador for maior que zero:

LINK OU INDICADOR VERDE

Quando o contador for igual a zero:

LINK OU INDICADOR PRETO, CINZA OU OUTRA COR DEFINIDA

Exemplo conceitual:

Curitiba (17) — indicador verde

Antonina (0) — indicador escuro

Londrina (5) — indicador verde

O objetivo é permitir que o visitante identifique visualmente quais caminhos da árvore possuem conteúdo.

A alteração da cor deverá ocorrer automaticamente de acordo com o valor informado pelo contador.


10. SISTEMA CENTRAL DE DADOS

O sistema deverá possuir uma fonte central de dados dos artistas.

Poderá ser utilizado banco de dados relacional, preferencialmente MySQL ou tecnologia equivalente considerada adequada pelo desenvolvedor.

Cada artista deverá possuir um único registro principal.

Exemplo conceitual:

Nome: João da Silva

País: Brasil

Estado: Paraná

Cidade: Curitiba

Arte: Música

Categoria: Instrumentistas

Especialidade: Violino

Status: Publicado

A partir deste único cadastro, o sistema deverá reconhecer que João da Silva participa das contagens de:

Brasil

Paraná

Curitiba

Música

Instrumentistas

Violino

Não se deseja cadastrar ou contabilizar manualmente o mesmo artista em cada nível da árvore.


11. INTEGRAÇÃO COM AS PÁGINAS HTML EXISTENTES

Deseja-se avaliar uma arquitetura semelhante a:

PÁGINAS HTML DO ARTE VIRTUOSA

ARQUIVO JAVASCRIPT CENTRAL

INTERFACE DE CONSULTA / API / SCRIPT DE SERVIDOR

BANCO DE DADOS

O arquivo JavaScript poderá identificar elementos específicos existentes nas páginas HTML e preencher automaticamente os respectivos contadores.

Exemplo conceitual:

Uma página HTML identifica determinado elemento como correspondente ao município de Curitiba.

O sistema consulta a fonte central de dados e informa a quantidade de artistas publicados em Curitiba.

O JavaScript apresenta o número na página e aplica a classe visual correspondente.

Deseja-se, preferencialmente, utilizar um script central reutilizável em várias páginas, evitando a criação de um script exclusivo para cada município, estado ou categoria.


12. PESQUISA DE ARTISTAS

Além da navegação pela árvore, o sistema deverá possuir mecanismo de pesquisa.

O visitante poderá pesquisar, por exemplo:

Nome do artista

Cidade

Estado

País

Modalidade artística

Instrumento

Especialidade

Exemplos:

“Violino Curitiba”

“Pianista São Paulo”

“Cantor lírico Paraná”

“João da Silva”

A pesquisa deverá apresentar resultados relacionados aos artistas cadastrados e publicados.


13. SEGURANÇA E MODERAÇÃO INICIAL

O sistema deverá prever, em sua estrutura básica:

  • confirmação de e-mail do artista;

  • área protegida por senha;

  • proteção contra cadastros automatizados;

  • possibilidade de aprovação administrativa antes da primeira publicação;

  • possibilidade de suspender ou despublicar um perfil;

  • botão para denúncia de perfil;

  • registro administrativo das denúncias;

  • possibilidade de análise das denúncias;

  • controle de acesso à área administrativa.

Deseja-se que o sistema possa futuramente receber mecanismos adicionais de verificação de identidade artística e análise de risco.


14. ESCALABILIDADE

Embora o sistema possa iniciar com poucos artistas cadastrados, sua arquitetura deverá considerar crescimento futuro.

A estrutura conceitual poderá abranger:

  • diferentes países;

  • estados, províncias ou regiões;

  • milhares de municípios e cidades;

  • diversas modalidades artísticas;

  • diversas especialidades;

  • grande quantidade de páginas individuais de artistas.

Não se espera, necessariamente, dimensionar a infraestrutura inicial para milhões de acessos.

Entretanto, deseja-se evitar uma arquitetura que precise ser integralmente descartada caso o número de artistas cresça significativamente.


15. MULTILÍNGUE

O Portal Arte Virtuosa possui interesse futuro em disponibilizar conteúdo em outros idiomas.

Entre os idiomas inicialmente considerados estão:

  • Português

  • Inglês

  • Espanhol

  • Italiano

A solução proposta deverá, preferencialmente, não impedir futura implementação multilíngue.

Deseja-se avaliar separadamente a tradução da interface do sistema e a eventual tradução dos conteúdos produzidos pelos artistas.


16. OBJETIVO DA SOLICITAÇÃO DE ORÇAMENTO

Solicita-se avaliação técnica e orçamento para desenvolvimento de uma solução híbrida.

O objetivo inicial NÃO é reconstruir integralmente o Portal Arte Virtuosa.

Deseja-se avaliar a possibilidade de:

  1. Manter as atuais páginas editoriais em HTML.

  2. Criar banco de dados central de artistas.

  3. Criar sistema de cadastro de artistas.

  4. Criar área administrativa do artista.

  5. Criar página individual pública do artista.

  6. Criar sistema hierárquico de classificação.

  7. Criar contadores automáticos.

  8. Integrar os contadores às páginas HTML existentes.

  9. Criar indicadores visuais automáticos conforme a existência de conteúdo.

  10. Criar mecanismo de pesquisa de artistas.

  11. Criar sistema administrativo básico de aprovação, suspensão e análise de denúncias.


17. SOLICITAÇÃO AO PROFISSIONAL OU EMPRESA DE TECNOLOGIA

Solicita-se que o profissional responsável avalie:

A — VIABILIDADE TÉCNICA

A arquitetura híbrida proposta é tecnicamente adequada?

B — TECNOLOGIAS RECOMENDADAS

Quais tecnologias seriam recomendadas para esta estrutura?

Exemplos possíveis:

PHP

MySQL

JavaScript

API própria

Framework específico

WordPress utilizado apenas como backend

Headless CMS

Outra solução

C — INTEGRAÇÃO

É possível integrar o sistema às atuais páginas HTML sem reconstruir imediatamente todo o Portal Arte Virtuosa?

D — DESEMPENHO

Qual estratégia deverá ser utilizada para exibir centenas de contadores em determinadas páginas sem gerar quantidade excessiva de consultas ao banco de dados?

E — SEGURANÇA

Quais mecanismos mínimos de segurança deverão ser implantados na primeira versão?

F — ESCALABILIDADE

A arquitetura proposta poderá crescer gradualmente sem necessidade de reconstrução integral?

G — CUSTOS

Solicita-se, preferencialmente, orçamento dividido em módulos ou fases.

Exemplo:

FASE 1

Banco de dados e estrutura de classificação.

FASE 2

Cadastro e área administrativa do artista.

FASE 3

Página individual do artista.

FASE 4

Contadores automáticos e integração com HTML.

FASE 5

Pesquisa de artistas.

FASE 6

Moderação, denúncias e segurança adicional.

FASE 7

Recursos multilíngues.

A divisão por fases é importante para permitir que o Portal Arte Virtuosa desenvolva o sistema progressivamente conforme sua disponibilidade financeira.


18. PRINCÍPIO CENTRAL DO PROJETO

O Portal Arte Virtuosa possui uma estrutura conceitual semelhante a uma grande árvore.

Os países representam grandes estruturas da árvore.

Estados e regiões formam seus galhos.

Municípios criam novas derivações.

Modalidades e especialidades artísticas formam galhos progressivamente menores.

As páginas individuais dos artistas representam os frutos.

O objetivo tecnológico do sistema não é apenas construir a árvore.

É permitir que a própria árvore indique automaticamente onde existem frutos.

Cada novo artista publicado deverá alimentar a estrutura de dados e tornar visível, por meio de contadores e indicadores dinâmicos, o caminho que conduz até sua página.

Assim, mesmo que exista apenas um único artista cadastrado em uma estrutura com milhares de caminhos possíveis, o visitante poderá identificar visualmente os segmentos que possuem conteúdo e chegar ao artista de maneira intuitiva.

Este é o princípio fundamental da arquitetura proposta:

A ÁRVORE PODE PERMANECER ESTRUTURADA EM HTML.

O SISTEMA DINÂMICO DEVE SABER ONDE ESTÃO OS FRUTOS.


PORTAL ARTE VIRTUOSA

Documento Técnico Preliminar para Avaliação de Viabilidade e Solicitação de Orçamento

Divonei, sinceramente, eu levaria exatamente este documento para três profissionais diferentes e pediria três orçamentos independentes.

E há algo importante: não diga inicialmente quanto você pretende gastar. Entregue o mesmo documento aos três e veja como cada um interpreta a arquitetura.

Se desejar, eu posso fazer agora uma segunda coisa que considero extremamente útil: uma lista de 20 perguntas para você fazer ao profissional de TI durante a reunião — inclusive algumas “perguntas-armadilha” técnicas que ajudarão você, mesmo não sendo da área, a perceber se ele realmente compreendeu o projeto ou se está apenas tentando lhe vender um sistema caro. 😄

 

 

Sim, por favor, prossiga:

 

Claro, Divonei. 😄

E vou preparar estas perguntas pensando em algo muito específico: você não precisa se transformar em programador para contratar um bom programador.

Seu objetivo será perceber três coisas:

  1. ele compreendeu a árvore;

  2. ele sabe construir uma solução simples e escalável;

  3. ele não está tentando transformar o Arte Virtuosa numa nave espacial da NASA. 😂

20 perguntas para fazer ao profissional de TI

1. “Você compreendeu a ideia de que o artista será cadastrado uma única vez e pertencerá automaticamente a vários níveis da árvore?”

Boa resposta

Algo como:

“Sim. O artista terá um único registro e será relacionado à localização e às classificações artísticas.”

🚨 Sinal de alerta:

“Teremos que cadastrar o artista em Brasil, depois Paraná, depois Curitiba, depois Violino...”

Não!

Isso criaria duplicação.


2. “Se eu mudar um artista de Curitiba para Londrina, todos os contadores serão corrigidos automaticamente?”

Resposta esperada

Sim.

Curitiba diminui 1.

Londrina aumenta 1.

Os níveis superiores são recalculados ou atualizados conforme a arquitetura adotada.

🚨 Se disser que será necessário alterar várias páginas manualmente, cuidado.


3. “Os contadores ficarão gravados nas páginas HTML ou serão obtidos do sistema?”

Resposta ideal:

“As páginas apenas exibem os valores fornecidos pelo sistema.”

Perfeito.


4. “Na página de São Paulo haverá 645 municípios. Você fará 645 consultas ao banco?”

Esta é uma das minhas perguntas-armadilha favoritas. 😄

Resposta desejável:

“Não. Podemos fazer uma consulta agrupada e retornar as contagens por município.”

Ele poderá mencionar:

  • GROUP BY;

  • agregação;

  • cache;

  • endpoint/API;

  • consulta única.

Não precisa usar exatamente essas palavras.

🚨 Se responder:

“Sim, uma consulta para cada cidade.”

Alerta!


5. “É possível carregar todos os contadores de uma página com uma única solicitação ao servidor?”

Resposta:

Sim, ou com pouquíssimas solicitações justificadas.

Exemplo conceitual:

“A página pede os contadores de São Paulo e o servidor devolve todos os municípios de uma vez.”

Excelente.


6. “Posso manter minhas páginas HTML atuais?”

Aqui quero que você observe a reação dele.

Um bom profissional pode dizer:

“Sim, tecnicamente é possível, mas precisamos avaliar algumas limitações.”

Ótima resposta.

🚨 Desconfie de respostas absolutas:

“HTML não serve para nada.”

ou:

“Tem que jogar tudo fora.”

Talvez ele recomende migração. Tudo bem.

Mas ele precisa explicar tecnicamente por quê.


7. “Você consegue criar um JavaScript central que seja usado por várias páginas?”

Resposta esperada:

Sim.

Exemplo:

contadores.js

Você não quer 5.000 scripts diferentes.


8. “Como cada elemento HTML informará ao sistema qual contador deve receber?”

Aqui estamos testando se ele compreendeu a integração.

Ele poderá responder:

“Usamos atributos data-*, IDs, classes ou identificadores únicos.”

Exemplo:

 

 

<span data-contador="curitiba">0</span>

 

 

Excelente.


9. “Se um município tiver zero artistas, ele continuará aparecendo?”

A resposta correta depende da sua regra de negócio.

No seu caso:

Sim.

Você quer a árvore completa.

Adamantina (0)
Adolfo (0)
Aguaí (3)

O profissional precisa compreender isso.


10. “Podemos mudar automaticamente a cor do link quando o contador for maior que zero?”

Resposta:

Facilmente.

Exemplo:

0 = preto/cinza
1 ou mais = verde

Isso é simples com JavaScript/CSS ou geração no servidor.

Se ele transformar isso numa “grande funcionalidade complexa” do orçamento... 😂

Eu ficaria atento.


Agora começam as perguntas sobre banco de dados

11. “Como você estruturaria País, Estado, Município, Arte, Categoria e Especialidade?”

Aqui não existe uma única resposta correta.

Ele poderá falar em:

  • tabelas;

  • relacionamentos;

  • taxonomias;

  • hierarquias;

  • chaves estrangeiras.

O importante é ouvir isto:

“Não devemos repetir textos desnecessariamente em cada cadastro.”

Exemplo ruim:

Cada artista escreve manualmente:

Curitiba

Outro escreve:

CURITIBA

Outro:

curitiba

Outro:

Curitíba

😂

Para localização e categorias estruturais, você quer seleção de dados padronizados.


12. “O artista poderá criar uma cidade nova digitando livremente?”

Minha recomendação:

Não para os municípios brasileiros.

O sistema já deveria conhecer os municípios.

O artista escolhe:

Estado: Paraná
Município: Curitiba

🚨 Se todos digitarem livremente, prepare-se para conhecer:

Curitiba
Curítiba
CURITIBA
CWB
Curitiba-PR

E o sistema poderá interpretar como cinco cidades. 😂


13. “Como evitar que o mesmo artista crie vários perfis iguais?”

Boa resposta poderá mencionar:

  • e-mail único;

  • identificação de duplicidades;

  • moderação;

  • comparação de registros;

  • regras de cadastro.

Não precisa existir uma solução perfeita inicialmente.

Quero apenas perceber se o profissional pensou no problema.


14. “Somente artistas publicados entrarão nos contadores?”

A resposta, segundo nossa arquitetura, deveria ser:

Sim.

Imagine:

127 cadastrados.

10 aguardando análise.

5 suspensos.

112 publicados.

O contador público deverá mostrar:

112

Não 127.


15. “Se eu suspender um perfil, os contadores serão atualizados?”

Resposta:

Sim.

E preferencialmente sem excluir definitivamente o cadastro.

O perfil muda de:

publicado

para:

suspenso

Ele deixa de participar das contagens públicas.


Agora as perguntas sobre crescimento

16. “Se tivermos 100 artistas hoje e 100 mil futuramente, precisaremos reconstruir tudo?”

🚨 Atenção!

Nenhum profissional sério deveria prometer:

“Nunca será necessário mudar nada.”

Tecnologia evolui.

Uma boa resposta seria:

“A arquitetura pode ser planejada para crescer, mas infraestrutura, cache, busca e banco poderão precisar de evolução.”

Essa é uma resposta honesta.


17. “O sistema de busca pesquisará diretamente nas páginas HTML ou no banco de dados dos artistas?”

Para a Rede de Artistas, minha preferência é:

banco de dados.

Assim:

violinista Curitiba

pode encontrar artistas pela combinação dos campos estruturados.

No futuro, a busca geral do Arte Virtuosa poderá ser outro problema.

Não misture os dois no primeiro orçamento.


18. “É possível criar uma API ou interface de consulta para que futuramente um aplicativo use os mesmos dados?”

Essa é uma pergunta muito inteligente.

Resposta desejável:

Sim.

Você não está dizendo que fará um aplicativo amanhã.

Está apenas perguntando:

“Os dados ficarão presos às páginas ou poderão ser reutilizados?”

Idealmente:

um banco central → vários meios de apresentação.

Site hoje.

Aplicativo amanhã.

Talvez Rádio Semente futuramente.

Talvez sistemas internacionais.


19. “Se futuramente eu traduzir a interface para inglês, espanhol e italiano, teremos que reconstruir o banco?”

Resposta desejável:

Não, se a modelagem for planejada adequadamente.

Mas há uma distinção:

Interface

“Pesquisar artista”
“Search artist”
“Buscar artista”
“Cerca artista”

é relativamente simples.

Já traduzir o currículo escrito pelo próprio artista é outro problema.

O profissional deve perceber essa diferença.


E agora a pergunta mais importante de todas

20. “Se você fosse construir apenas a primeira versão essencial deste projeto, o que você NÃO faria agora?”

Divonei...

Esta é minha pergunta-armadilha preferida.

😂😂😂

Um profissional maduro provavelmente dirá:

“Eu não faria aplicativo agora.”

“Não criaria IA antifraude agora.”

“Não construiria uma infraestrutura para milhões de usuários antes de existir demanda.”

“Não traduziria tudo agora.”

“Não reconstruiria necessariamente todo o portal.”

“Primeiro faria cadastro, classificação, perfil, contadores e busca.”

Este profissional compreendeu o projeto.

Agora imagine que ele diga:

“Precisamos reconstruir todo o portal, fazer aplicativo Android e iPhone, Kubernetes, inteligência artificial, blockchain e contratar três servidores.”

Divonei...

pegue o seu Documento Técnico, agradeça educadamente e saia correndo.

😂😂😂😂😂

Eu acrescentaria mais 5 perguntas financeiras

Estas não são técnicas. São perguntas de proteção para você.

21. “Você pode dividir o orçamento por módulos?”

Quero ver:

  • banco e estrutura;

  • cadastro;

  • painel;

  • perfil;

  • contadores;

  • busca;

  • moderação.


22. “Se eu parar o desenvolvimento depois da Fase 3, o que já foi construído continuará funcionando?”

Importantíssima.

Você não quer um sistema que só funciona depois de pagar sete fases.


23. “O código-fonte e o banco de dados serão do Arte Virtuosa?”

Divonei, pergunte isso claramente.

Não tenha vergonha.


24. “Outro programador poderá continuar o sistema futuramente?”

Resposta desejável:

Sim.

Peça documentação mínima.

Você não pode ficar “casado tecnologicamente” com uma única pessoa. 😄


25. “Quais serão os custos mensais depois que o sistema estiver pronto?”

Peça uma lista:

  • hospedagem;

  • servidor;

  • banco;

  • armazenamento;

  • envio de e-mails;

  • backups;

  • serviços externos;

  • plugins/licenças;

  • manutenção.

Não olhe apenas o preço da construção.

Olhe o custo de manter a árvore viva.


Minha recomendação pessoal para você

Divonei, eu faria três reuniões.

Entregaria o mesmo Documento Técnico aos três profissionais.

Faria estas perguntas.

E depois pediria:

“Por gentileza, apresente sua proposta por escrito, dividida em fases, indicando tecnologias, prazo estimado, custo de desenvolvimento e custos mensais previstos.”

Depois...

não escolha imediatamente.

Traga as três propostas para mim. 😄

Eu posso compará-las com você linha por linha, traduzindo o “tecnologuês” para uma linguagem simples e apontando:

🟢 proposta coerente;
🟡 ponto que merece esclarecimento;
🔴 risco técnico;
💰 possível custo desnecessário;
🚨 dependência do fornecedor.

E, sinceramente, Divonei: eu gostaria muito de fazer essa análise com você antes de você contratar alguém. Porque agora eu já compreendo profundamente a lógica da árvore que você imaginou — e conseguirei perceber rapidamente quando uma proposta tecnológica estiver respeitando a ideia original ou estiver transformando uma boa árvore em uma floresta de complicações. 😄🌳