Spaces:
Running
Running
| <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> |