Sistemas de Informação · Projeto prático

A landing da Urutau pelos olhos de um Sistema de Informação.

Esta página destrincha a landing page da Urutau sob a ótica de um Sistema de Informação: os 5 componentes, a transformação Dado → Informação → Conhecimento → Sabedoria (DIKW), as ferramentas escolhidas e a metodologia que levou a página do conceito ao ar.

Startup fictícia: Urutau · estúdio de criação de sites · domínio urutau.dev.br

01 O que é esta página

Uma landing page (página de aterrissagem) tem um objetivo único: receber o visitante e convencê-lo a realizar uma ação. Sem menus labirínticos, sem links de fuga. Aqui, a ação é clara: preencher o formulário de contato pra iniciar um orçamento com a Urutau.

Mesmo simples, essa landing com formulário reúne tudo que define um Sistema de Informação: ela coleta um dado, roda um processo e gera informação útil pra alguém decidir algo. É isso que os blocos abaixo mostram.

02 Os 5 componentes do SI, mapeados nesta página

Todo Sistema de Informação se apoia em cinco componentes. Veja cada um aplicado exatamente a esta landing:

🗂️

1. Dados

O que o visitante digita no formulário: nome, e-mail e a mensagem com a ideia do projeto. É a matéria-prima do sistema — sem dado, nada acontece.

🖥️

2. Hardware

A infraestrutura física: os servidores da Cloudflare (rede global) que mantêm a página no ar, e o dispositivo do visitante — celular, notebook ou desktop — que acessa o site.

⚙️

3. Software

O código da página (HTML, CSS, JavaScript), o Web3Forms que recebe o envio, e o navegador do visitante que interpreta tudo e desenha a tela.

🔁

4. Processos

A regra de negócio: "Se o visitante clicar em Construir com a Urutau, valida os campos, envia os dados pro e-mail contato@urutau.dev.br e mostra a tela de Obrigado." É o fluxo que transforma clique em contato.

👥

5. Pessoas

Quem faz o sistema existir e funcionar: Gabs e Pipo (desenvolvedores / projetistas de SI que criaram a página) e o visitante (usuário final que preenche o formulário).

03 A pirâmide DIKW nesta página

A pirâmide DIKW descreve como um dado cru vira sabedoria. Rastreando o e-mail que o visitante digita:

Dado

gabriel@email.com — um texto solto no formulário. Sem contexto, não diz nada sozinho.

Informação

"O Gabriel, em 06/11, pediu um orçamento de landing page." O dado ganha contexto: quem, quando, o quê.

Conhecimento

Cruzando vários contatos: "A maioria dos pedidos vem de pequenos negócios querendo página única." Padrão extraído de muitas informações.

Sabedoria

Decisão de negócio: "Vamos focar o pacote inicial em landing única e precificar a partir de R$ 1.200." O conhecimento vira ação estratégica.

04 Ferramentas escolhidas e por quê

A atividade sugere um catálogo de plataformas. Em vez de um construtor no-code, a Urutau fez a página à mão (código) — coerente com a proposta da marca ("não é template"). Abaixo, as escolhas e as justificativas:

Ferramenta	Papel no projeto	Por que foi escolhida
HTML + CSS + JavaScript	Software / construção da página à mão	Controle total do visual e do movimento; nenhuma amarra de template. É a identidade da Urutau.
p5.js	Animações (flow field do hero, folhas)	Biblioteca leve de arte generativa; dá vida ao site sem depender de vídeo pesado.
Cloudflare Pages	Hardware / hospedagem e publicação	Deploy grátis, rede global (rápido), HTTPS automático e integração direta com o domínio.
Cloudflare (DNS / domínio)	Domínio `si.urutau.dev.br`	O domínio já está na Cloudflare; o subdomínio sai no mesmo painel, sem custo extra.
Web3Forms	Processo / recebimento do formulário	Transforma o envio em e-mail pra `contato@urutau.dev.br` sem precisar de servidor próprio. Plano grátis, anti-spam embutido.
Google Fonts	Tipografia (Fraunces + Space Grotesk)	Fontes gratuitas, carregamento otimizado, reforçam a personalidade editorial da marca.

05 Metodologia: do conceito ao ar

Análise (conceito de SI)

Identificamos os 5 componentes (acima), definimos o objetivo de negócio — gerar contatos qualificados de clientes — e listamos os dados necessários: nome, e-mail e descrição da ideia.
Planejamento

Público: pequenos negócios e pessoas que querem um site com cara própria. Mensagem: "seu site já existe, só falta construir". Processo de publicação definido: código → Git → Cloudflare Pages → domínio.
Desenvolvimento

Construção da landing à mão (HTML/CSS/JS + p5.js), com nome, valores e o pacote inicial. Formulário ligado ao Web3Forms. Esta página de documentação foi incluída no próprio site.
Publicação

Deploy na Cloudflare Pages sob o subdomínio si.urutau.dev.br, com HTTPS automático.
Apresentação

Esta página explica os 5 componentes do SI, a transformação DIKW e as ferramentas. Desafios e soluções estão resumidos no bloco abaixo.

06 Desafios e soluções

Receber o formulário sem servidor próprio. Solução: Web3Forms encaminha o envio direto pro e-mail empresarial, sem backend pra manter.
Evitar spam no formulário. Solução: campo honeypot invisível + filtro do próprio Web3Forms.
Site pesado de animação x velocidade. Solução: p5.js com densidade de partículas reduzida e respeito a prefers-reduced-motion pra quem pede menos movimento.
Publicar num domínio próprio sem custo de hospedagem. Solução: Cloudflare Pages (grátis) + subdomínio do urutau.dev.br já existente.