UA6 — Definição do Sistema
Antes de codificar, é preciso definir claramente o que o sistema vai fazer, para quem e como será estruturado.
O que definir antes de começar
- Objetivo do sistema: qual problema ele resolve?
- Público-alvo: quem vai usar? Quais são suas necessidades?
- Funcionalidades principais: o que o usuário pode fazer?
- Tecnologias: frontend (HTML/CSS/JS), backend, banco de dados.
- Arquitetura: como as partes se conectam?
Documento de Definição do Sistema
Visão Geral
Nome, propósito, escopo e principais usuários do sistema.
Requisitos Funcionais
O que o sistema deve fazer (cadastrar, listar, autenticar…).
Requisitos Não Funcionais
Desempenho, segurança, responsividade, acessibilidade.
Stack Tecnológico
Linguagens, frameworks, banco de dados e ferramentas escolhidas.
Estrutura de pastas recomendada
projeto/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── main.js
├── img/
│ └── logo.png
└── pages/
├── sobre.html
└── contato.htmlPor que definir antes de codificar?
Sem uma definição clara, você corre o risco de construir a coisa certa do jeito errado — ou a coisa errada do jeito certo. Dez minutos de planejamento economizam horas de reescrita.
Categorias de sistemas web
| Categoria | Descrição | Exemplos |
|---|---|---|
| Site de conteúdo | Exibe informações estáticas ou dinâmicas | Portais de notícias, sites institucionais |
| Registro de dados / entrada do usuário | Permite que o usuário insira e consulte dados | Sistemas de cadastro, formulários |
| Portal | Agrega conteúdo de múltiplas fontes/serviços | UOL, Yahoo, intranets corporativas |
| Aplicação orientada à transação | Processa operações com feedback imediato | Lojas virtuais, bancos online |
| Blog | Publicação cronológica de conteúdo pelo autor | WordPress, Medium |
Arquitetura em camadas de um sistema web
1. Apresentação
Interface visual: HTML, CSS, JavaScript. Responsável por exibir dados e capturar interações do usuário.
2. Processamento da Aplicação
Lógica de negócio: PHP, Node.js, Python. Processa requisições e aplica regras do domínio.
3. Gerenciamento de Dados
Acesso ao banco: queries SQL, ORM. Intermediário entre a lógica e o armazenamento.
4. Banco de Dados
Persistência: MySQL, PostgreSQL, MongoDB. Armazena e recupera os dados.
Anatomia de uma URL
http://www.exemplo.com.br/produtos/lista.php
└─────────────────────────────────────────┘
protocolo domínio caminho arquivo
http:// www.exemplo.com.br /produtos/ lista.php| Parte | Função |
|---|---|
Protocolo (http:// / https://) | Define o tipo de transferência. HTTPS = criptografado (TLS) |
Domínio (www.exemplo.com.br) | Identificação do servidor na internet |
Caminho (/produtos/) | Estrutura de diretórios no servidor |
Arquivo (lista.php) | Recurso solicitado (pode ser implícito como index.html) |
Ferramentas de desenvolvimento
| Ferramenta | Tipo | Destaque |
|---|---|---|
| VS Code | IDE gratuita (atual) | Extensões, IntelliSense, Git integrado, Live Server |
| Notepad++ | Editor de texto | Leve, sem compilador; suporta HTML, PHP, JS |
| NetBeans | IDE open source | Suporte a HTML5, PHP, Java |
| Eclipse | IDE (plugins) | Várias linguagens via plugins |
| Aptana Studio | IDE gratuita | HTML, CSS, JS; extensões Ruby/Python/PHP |
| Dreamweaver | IDE proprietária (Adobe) | Editor visual WYSIWYG + código |
Práticas Modernas — Sistemas Web
JAMstack (JavaScript + APIs + Markup): sites pré-gerados (SSG) servidos via CDN — ultra-rápidos, seguros e escaláveis. Ex.: Next.js, Gatsby, Astro. CI/CD (Integração e Entrega Contínua): pipelines automáticos que testam, constroem e publicam cada commit — padrão da indústria com GitHub Actions, GitLab CI. Containers (Docker): empacotam o sistema com todas as dependências, garantindo comportamento idêntico em qualquer ambiente. Serverless: funções que executam sob demanda sem gerenciar servidores — AWS Lambda, Vercel Functions, Cloudflare Workers.
Dicas para a prova — UA6
- Sistema centralizado: tudo executa no computador local. Sistema distribuído: parte no cliente, parte no servidor remoto.
- A internet foi criada por Tim Berners-Lee; o conceito que ele introduziu foi o de hipertexto, que usa hiperlinks para navegar entre documentos.
- Uma loja virtual é uma aplicação orientada à transação.
- A interface visual de um sistema web é criada com HTML e CSS (não PHP, não banco de dados).
- A ordem correta das camadas: Apresentação → Processamento → Gerenciamento de Dados → Banco de Dados.
- Sistema disponível 24×7 = 24 horas por dia, 7 dias por semana.
Referências bibliográficas desta UA
- Miletto, E. M.; Bertagnolli, S. C. Desenvolvimento de Software II. Porto Alegre: Bookman, 2014.