Spaces:
Running
Running
File size: 14,233 Bytes
577d32d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 |
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>MER no Processo Penal</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Custom styles for elements that need more specific styling */
.tab-button {
transition: all 0.3s ease;
}
.tab-content {
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.prova-classification {
border-left: 4px solid #000;
}
</style>
</head>
<body class="bg-gray-100 text-gray-800 font-sans p-4 md:p-6">
<header class="bg-black text-white text-center py-6 rounded-lg shadow-lg mb-8">
<div class="container mx-auto px-4">
<h1 class="text-2xl md:text-3xl font-bold mb-2">Modelagem Entidade-Relacionamento no Processo Penal</h1>
<p class="text-gray-300">Um sistema para classificação e gestão de provas jurídicas</p>
</div>
</header>
<div class="max-w-4xl mx-auto bg-white border border-black rounded-lg overflow-hidden shadow-xl">
<!-- Tabs Navigation -->
<div class="flex flex-wrap bg-gray-800">
<button class="tab-button flex-1 py-4 px-2 text-center text-white bg-gray-700 hover:bg-gray-600 active:bg-black font-medium text-sm md:text-base" onclick="openTab(event, 'mer')">
<i class="fas fa-database mr-2"></i>MER: Conceitos
</button>
<button class="tab-button flex-1 py-4 px-2 text-center text-white bg-gray-700 hover:bg-gray-600 font-medium text-sm md:text-base" onclick="openTab(event, 'mer-penal')">
<i class="fas fa-gavel mr-2"></i>MER no Processo Penal
</button>
<button class="tab-button flex-1 py-4 px-2 text-center text-white bg-gray-700 hover:bg-gray-600 font-medium text-sm md:text-base" onclick="openTab(event, 'classificacao')">
<i class="fas fa-list-ol mr-2"></i>Classificação Geral
</button>
<button class="tab-button flex-1 py-4 px-2 text-center text-white bg-gray-700 hover:bg-gray-600 font-medium text-sm md:text-base" onclick="openTab(event, 'exemplo')">
<i class="fas fa-file-alt mr-2"></i>Exemplo: Prova
</button>
</div>
<!-- Tab Content -->
<div id="mer" class="tab-content active p-6 md:p-8">
<h2 class="text-xl md:text-2xl font-bold mb-4 pb-2 border-b border-gray-300">Modelagem Entidade-Relacionamento (MER)</h2>
<p class="mb-4">A <strong class="font-semibold">Modelagem Entidade-Relacionamento (MER)</strong> é uma técnica gráfica para descrever a estrutura de dados de um sistema, amplamente usada no projeto de bancos de dados.</p>
<div class="grid md:grid-cols-2 gap-6 mb-6">
<div>
<h3 class="text-lg font-semibold mb-3 text-gray-900">Termos Principais</h3>
<ul class="list-disc pl-5 space-y-2">
<li><strong>Entidade:</strong> Objeto do mundo real com existência independente (ex: <em class="text-gray-700">Prova</em>, <em class="text-gray-700">Processo</em>, <em class="text-gray-700">Réu</em>).</li>
<li><strong>Atributo:</strong> Característica de uma entidade (ex: <em class="text-gray-700">ID_Prova</em>, <em class="text-gray-700">Tipo_Prova</em>, <em class="text-gray-700">Data_Coleta</em>).</li>
<li><strong>Relacionamento:</strong> Ligação entre entidades (ex: <em class="text-gray-700">Prova pertence a Processo</em>).</li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-3 text-gray-900">Tipos de Entidades</h3>
<ul class="list-disc pl-5 space-y-2">
<li><strong>Forte:</strong> Possui chave primária própria (ex: <em class="text-gray-700">Processo</em>).</li>
<li><strong>Fraca:</strong> Depende de outra entidade (ex: <em class="text-gray-700">Depoimento</em> depende de <em class="text-gray-700">Testemunha</em>).</li>
</ul>
</div>
</div>
<div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
<h3 class="text-lg font-semibold mb-3 text-gray-900">Herança e Hierarquia</h3>
<p class="mb-3">Em MER estendido, pode-se usar <strong>generalização/especialização</strong>:</p>
<ul class="list-disc pl-5 space-y-2 mb-3">
<li><strong>Entidade genérica:</strong> <em class="text-gray-700">Prova</em></li>
<li><strong>Entidades especializadas:</strong> <em class="text-gray-700">Prova Documental</em>, <em class="text-gray-700">Prova Testemunhal</em>, <em class="text-gray-700">Prova Pericial</em></li>
</ul>
<p>Isso permite <strong>herança de atributos</strong> e modelagem hierárquica mais eficiente.</p>
</div>
</div>
<div id="mer-penal" class="tab-content p-6 md:p-8">
<h2 class="text-xl md:text-2xl font-bold mb-4 pb-2 border-b border-gray-300">MER no Processo Penal</h2>
<p class="mb-6">A aplicação da <strong class="font-semibold">MER no Processo Penal</strong> permite organizar dados complexos de forma estruturada, facilitando a análise, busca e gestão de informações jurídicas.</p>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-lg font-semibold mb-3 text-gray-900">Principais Entidades</h3>
<ul class="list-disc pl-5 space-y-2">
<li><strong>Processo</strong> (número, vara, juiz, status)</li>
<li><strong>Prova</strong> (tipo, data, origem, validade)</li>
<li><strong>Réu</strong> (nome, CPF, advogado)</li>
<li><strong>Testemunha</strong> (depoimento, data)</li>
<li><strong>Perito</strong> (laudo, especialidade)</li>
<li><strong>Crime</strong> (tipo, artigo penal)</li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-3 text-gray-900">Relacionamentos Relevantes</h3>
<ul class="list-disc pl-5 space-y-2">
<li>Um <strong>Processo</strong> possui várias <strong>Provas</strong> (1:N)</li>
<li>Uma <strong>Prova Pericial</strong> é elaborada por um <strong>Perito</strong> (N:1)</li>
<li>Um <strong>Réu</strong> pode ter múltiplas <strong>Provas</strong> contra ele (1:N)</li>
</ul>
</div>
</div>
<div class="mt-8 bg-gray-50 p-5 rounded-lg border border-gray-200">
<p class="text-gray-700">Essa modelagem auxilia na construção de sistemas de gestão processual, promovendo transparência, segurança e eficiência.</p>
</div>
</div>
<div id="classificacao" class="tab-content p-6 md:p-8">
<h2 class="text-xl md:text-2xl font-bold mb-6 pb-2 border-b border-gray-300">Mecanismo de Classificação Geral de Provas</h2>
<div class="prova-classification pl-4 mb-8">
<h3 class="text-lg font-semibold mb-4 text-gray-900">Critérios de Classificação</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-medium mb-2 text-gray-800"><i class="fas fa-balance-scale mr-2 text-gray-600"></i>Por natureza</h4>
<ul class="list-disc pl-5 space-y-1 text-gray-700">
<li>Provas reais (objetos materiais)</li>
<li>Provas testemunhais (declarações)</li>
<li>Provas documentais (registros escritos)</li>
</ul>
</div>
<div>
<h4 class="font-medium mb-2 text-gray-800"><i class="fas fa-calendar-alt mr-2 text-gray-600"></i>Por momento</h4>
<ul class="list-disc pl-5 space-y-1 text-gray-700">
<li>Provas antecipadas</li>
<li>Provas produzidas em juízo</li>
<li>Provas pós-judiciais</li>
</ul>
</div>
</div>
</div>
<div class="bg-gray-50 p-5 rounded-lg border border-gray-200 mb-6">
<h3 class="text-lg font-semibold mb-3 text-gray-900">Sistema de Valoração</h3>
<div class="overflow-x-auto">
<table class="min-w-full border border-gray-300">
<thead class="bg-gray-200">
<tr>
<th class="py-2 px-4 border border-gray-300">Tipo de Prova</th>
<th class="py-2 px-4 border border-gray-300">Peso</th>
<th class="py-2 px-4 border border-gray-300">Critério</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100">
<td class="py-2 px-4 border border-gray-300">Prova Pericial</td>
<td class="py-2 px-4 border border-gray-300">Alto</td>
<td class="py-2 px-4 border border-gray-300">Baseada em análise técnica</td>
</tr>
<tr class="hover:bg-gray-100">
<td class="py-2 px-4 border border-gray-300">Prova Documental</td>
<td class="py-2 px-4 border border-gray-300">Médio</td>
<td class="py-2 px-4 border border-gray-300">Autenticidade verificável</td>
</tr>
<tr class="hover:bg-gray-100">
<td class="py-2 px-4 border border-gray-300">Prova Testemunhal</td>
<td class="py-2 px-4 border border-gray-300">Variável</td>
<td class="py-2 px-4 border border-gray-300">Credibilidade da testemunha</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="p-5 rounded-lg bg-white border border-gray-300 shadow-sm">
<h3 class="text-lg font-semibold mb-3 text-gray-900">Fluxo de Avaliação</h3>
<ol class="list-decimal pl-5 space-y-2 text-gray-700">
<li>Identificação do tipo de prova</li>
<li>Verificação de admissibilidade</li>
<li>Análise de pertinência</li>
<li>Valoração conforme critérios legais</li>
<li>Registro no sistema com metadados</li>
</ol>
</div>
</div>
<div id="exemplo" class="tab-content p-6 md:p-8">
<h2 class="text-xl md:text-2xl font-bold mb-6 pb-2 border-b border-gray-300">Exemplo Prático: Prova Pericial</h2>
<div class="grid md:grid-cols-2 gap-8 mb-8">
<div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
<h3 class="text-lg font-semibold mb-3 text-gray-900 flex items-center">
<i class="fas fa-fingerprint mr-2"></i> Dados da Prova
</h3>
<ul class="space-y-2 text-gray-700">
<li><strong>ID:</strong> PRV-2023-0458</li>
<li><strong>Tipo:</strong> Pericial (DNA)</li>
<li><strong>Processo:</strong> 0001234-56.2023.8.26.0000</li>
<li><strong>Data Coleta:</strong> 15/03/2023</li>
<li><strong>Responsável:</strong> Dr. Carlos Silva</li>
</ul>
</div>
<div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
<h3 class="text-lg font-semibold mb-3 text-gray-900 flex items-center">
<i class="fas fa-chart-pie mr-2"></i> Metadados
</h3>
<ul class="space-y-2 text-gray-700">
<li><strong>Confiança:</strong> 92% (alta)</li>
<li><strong>Relevância:</strong> 4.8/5</li>
<li><strong>Status:</strong> Admitida</li>
<li><strong>Vínculos:</strong> Réu, Local do Crime</li>
</ul>
</div>
</div>
<div class="bg-white p-5 rounded-lg border border-gray-300 shadow-sm mb-6">
<h3 class="text-lg font-semibold mb-3 text-gray-900">Diagrama Relacional</h3>
<div class="bg-gray-100 p-4 rounded border border-dashed border-gray-400 text-center text-gray-500">
<i class="fas fa-project-diagram text-4xl mb-2 block"></i>
<p>Diagrama de relacionamentos entre Prova, Réu, Processo e Perito</p>
</div>
</div>
<div class="bg-gray-800 text-white p-5 rounded-lg">
<h3 class="text-lg font-semibold mb-3">Observações Técnicas</h3>
<p class="text-gray-300">Este exemplo ilustra como uma prova pericial seria modelada no sistema, com seus atributos específicos e relacionamentos com outras entidades do processo penal. A classificação automática facilita a recuperação e análise estratégica das provas.</p>
</div>
</div>
</div>
<footer class="text-center mt-10 text-gray-600 text-sm">
<p>Sistema de Modelagem MER para Processo Penal © 2023</p>
<p class="mt-1">Desenvolvido para fins acadêmicos e profissionais</p>
</footer>
<script>
function openTab(evt, tabName) {
// Hide all tab contents
const tabContents = document.getElementsByClassName("tab-content");
for (let i = 0; i < tabContents.length; i++) {
tabContents[i].classList.remove("active");
}
// Remove active class from all tab buttons
const tabButtons = document.getElementsByClassName("tab-button");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons[i].classList.remove("active");
tabButtons[i].classList.add("bg-gray-700");
tabButtons[i].classList.remove("bg-black");
}
// Show the current tab and add active class to the button
document.getElementById(tabName).classList.add("active");
evt.currentTarget.classList.add("active", "bg-black");
evt.currentTarget.classList.remove("bg-gray-700");
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=alexandremoraisdarosa/merprova" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |