Skip to content

Commit 3126d9b

Browse files
authored
Update hotsite.html
1 parent 11c75a2 commit 3126d9b

1 file changed

Lines changed: 114 additions & 21 deletions

File tree

src/core/jinja2/core/ME/hotsite.html

Lines changed: 114 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
<html lang="pt-BR">
33
<head>
44
<!-- Google tag (gtag.js) -->
5-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-5V3SYQMK9Y"></script>
5+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N598EKHDGJ"></script>
66
<script>
77
window.dataLayer = window.dataLayer || [];
88
function gtag(){dataLayer.push(arguments);}
99
gtag('js', new Date());
1010

11-
gtag('config', 'G-5V3SYQMK9Y');
11+
gtag('config', 'G-N598EKHDGJ');
1212
</script>
1313
<meta charset="UTF-8">
1414
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -74,7 +74,7 @@
7474
<div id="nav-links" class="hidden flex-col items-center w-full mt-4 md:flex md:flex-row md:space-x-4 md:mt-0 md:w-auto">
7575
<a href="#" class="block py-2 px-3 text-gray-700 rounded hover:bg-gray-100 hover:text-[#08B59F] transition-colors duration-300 text-center w-full" onclick="showSection('exposicao')">Exposição</a>
7676
<a href="#" class="block py-2 px-3 text-gray-700 rounded hover:bg-gray-100 hover:text-[#08B59F] transition-colors duration-300 text-center w-full" onclick="showSection('album-figurinhas')">Álbum de Figurinhas</a>
77-
<!-- <a href="#" class="block py-2 px-3 text-gray-700 rounded hover:bg-gray-100 hover:text-[#08B59F] transition-colors duration-300 text-center w-full" onclick="showSection('making-of')">Making Of</a>-->
77+
<a href="#" class="block py-2 px-3 text-gray-700 rounded hover:bg-gray-100 hover:text-[#08B59F] transition-colors duration-300 text-center w-full" onclick="showSection('making-of')">Making Of</a>
7878
<!--<a href="#" class="block py-2 px-3 text-gray-700 rounded hover:bg-gray-100 hover:text-[#08B59F] transition-colors duration-300 text-center w-full" onclick="showSection('aprender-fazer')">Aprenda a fazer</a>-->
7979
<a href="#" class="block py-2 px-3 text-gray-700 rounded hover:bg-gray-100 hover:text-[#08B59F] transition-colors duration-300 text-center w-full" onclick="showSection('quem-somos')">Quem somos</a>
8080
</div>
@@ -111,7 +111,7 @@ <h2 class="text-2xl font-semibold mb-4 text-[#08B59F]">EXPOSIÇÃO</h2>
111111
onerror="this.onerror=null;this.src='https://placehold.co/600x300/e0e0e0/333333?text=Erro+ao+Carregar+Imagem';"
112112
>
113113
<p class="text-gray-700 mb-6 flex-grow">
114-
Mitologia Estendida se desdobra também em uma exposição com realidade mista em setembro de 2025.
114+
Mitologia Estendida se desdobra também em uma exposição com realidade mista em novembro de 2025.
115115
</p>
116116
<button class="w-full bg-[#08B59F] hover:bg-[#9500FF] text-white font-bold py-3 px-6 rounded-full transition-colors duration-300 transform hover:scale-105 mt-auto" onclick="showSection('exposicao')">
117117
Mais informações
@@ -164,7 +164,7 @@ <h1 class="text-4xl font-extrabold text-center mb-8 text-[#08B59F]">Quem Somos</
164164
<li><strong>Roteiros:</strong> Angelo Pixel e María Eugenia Salcedo Repolês</li>
165165
<li><strong>Ilustrações:</strong> Auá Mendes</li>
166166
<li><strong>Animação 2D:</strong> Enzo Giaquinto, Max Duarte e Ulisses Tavares</li>
167-
<li><strong>Modelagem e Animação 3D:</strong> Adriana Pedrosa</li>
167+
<li><strong>Modelagem e Animação 3D:</strong> Gabriel Camelo</li>
168168
<li><strong>Cenografia:</strong> Cláudio Rodrigues</li>
169169
<li><strong>Fotografia e Videografia:</strong> Bruna Quevedo</li>
170170
<li><strong>Design de Som:</strong> Lucas Miranda (Oscilloid)</li>
@@ -174,7 +174,7 @@ <h1 class="text-4xl font-extrabold text-center mb-8 text-[#08B59F]">Quem Somos</
174174
<li><strong>UX Design:</strong> Raquel Mei</li>
175175
<li><strong>Programação:</strong> Luna Aster, Pablo Silva, Rodrigo Oliveira e Thiago Hersan</li>
176176
<li><strong>Consultoria:</strong> Auá Mendes e Demétrio Portugal</li>
177-
<li><strong>Agradecimentos:</strong> Almir Almas</li>
177+
<li><strong>Agradecimentos:</strong> Almir Almas, Adriana Pedrosa e <a href="https://clarice.ai">Clarice.ai</a></li>
178178
</ul>
179179

180180
<h2 class="text-3xl font-bold text-center mt-12 mb-8 text-[#08B59F]">JANDIG</h2>
@@ -311,21 +311,58 @@ <h1 class="text-4xl font-extrabold text-center mb-8 text-[#08B59F]">Aprenda a fa
311311
<!-- Making Of Section -->
312312
<section id="making-of" class="section striped-bg p-8 rounded-lg shadow-xl mb-8 border border-gray-200">
313313
<h1 class="text-4xl font-extrabold text-center mb-8 text-[#08B59F]">Making Of: Diário de Desenvolvimento</h1>
314+
<p class="text-lg leading-relaxed mb-8 text-gray-700 text-center">
315+
Conheça o processo criativo do projeto Mitologia Estendida.
316+
317+
Esta série de posts tem como objetivo incentivar educadores e pessoas em geral a incorporar e criar conteúdos interativos.
318+
319+
Preparamos uma espécie de “mapa do percurso” tendo em mente alguém que quer fazer seu próprio álbum interativo com figurinhas (marcadores de realidade aumentada) e quem sabe também uma exposição.
320+
321+
Os posts de making of auxiliam você a se tornar um aliado temático e a investigar a intersecção entre arte, tecnologia e educação. Almejamos também inspirar uma comunidade cada vez mais ampla nos processos de remix e criação.
322+
323+
Caso tenha alguma dúvida sobre qualquer parte do processo, entre em contato conosco pelo [contato].
324+
</p>
314325
<div class="space-y-12">
315326
<!-- Post 1 -->
316-
<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 flex flex-col md:flex-row items-center md:space-x-6">
317-
<img src="https://placehold.co/400x250/e0e0e0/333333?text=Modelagem+3D" alt="Modelagem 3D" class="w-full md:w-1/3 h-48 object-cover rounded-lg mb-4 md:mb-0 shadow-md">
318-
<div>
319-
<h2 class="text-2xl font-semibold mb-3 text-[#08B59F]">Primeiros Passos: Modelagem de Personagens</h2>
320-
<p class="text-gray-700 leading-relaxed">
321-
Nesta fase inicial, concentramos nossos esforços na criação dos modelos 3D dos personagens principais. Foi um desafio dar vida às descrições mitológicas, garantindo que cada detalhe refletisse a essência de suas lendas. Utilizamos softwares avançados para esculpir e texturizar, buscando um equilíbrio entre realismo e o estilo artístico que definirá a experiência.
322-
</p>
323-
<span class="text-sm text-gray-500 mt-2 block">Postado em: 10 de Julho de 2025</span>
327+
<div class="post-card bg-white p-6 rounded-lg shadow-md border border-gray-200 cursor-pointer hover:shadow-lg transition-shadow duration-300">
328+
<div class="flex flex-col md:flex-row items-start md:items-center md:space-x-6">
329+
<img src="{{ static('images/icons/me/Post 1_Making_of.png') }}" alt="Modelagem 3D" class="w-full md:w-1/3 object-cover rounded-lg mb-4 md:mb-0 shadow-md flex-shrink-0">
330+
<div class="w-full">
331+
<div class="flex justify-between items-center mb-3">
332+
<h2 class="text-2xl font-semibold text-[#08B59F]">Mitos vivos</h2>
333+
<!-- Icone Chevron -->
334+
<svg class="w-6 h-6 text-gray-500 transition-transform duration-300 transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
335+
</div>
336+
<!-- Conteúdo Expansível -->
337+
<div class="expandable-content hidden mt-4 text-gray-600 space-y-3 pt-4 border-t border-gray-200">
338+
<p class="text-gray-700 leading-relaxed">
339+
Tem algo no coração da floresta…e faz alguns meses que estamos tateando, pesquisando, de orelha em pé e olhos bem abertos para compreender e traduzir o que as matas nos mostram. Do outro lado, testamos e mergulhamos para esticar os limites da JANDIG - uma comunidade que cria arte em Realidade Aumentada.</p>
340+
341+
<p>A plataforma Jandig, também criada pela comunidade, permite a criação de exposições em realidade aumentada e mista e até agora funcionou muito para artistas. Agora queremos que professores, educadores e pessoas em geral também entendam como JANDIG pode ser uma ferramenta para expandir a imaginação!</p>
342+
343+
<p>O projeto Mitologia Estendida se propõe a trazer para nós, em uma experiência interativa, alguns mitos da cultura brasileira. Trata-se de um projeto de arte, educação e tecnologia. Queremos com este processo inspirar educadores como você a acessar e criar conteúdos tecnológicos dentro e fora da sala de aula. </p>
344+
345+
<p>Para o nosso processo, uma das primeiras questões foi a escolha dos personagens. É sabido que o padre jesuíta José de Anchieta fez uma série de registros em cartas sobre diversos aspectos do Brasil da época. Dentre eles, em 1560, o mesmo faz uma menção de Boitatá, pois podemos imaginar que à medida que ele adentra o território brasileiro, ele encontra lendas, histórias, encantados e uma diversidade imensa cultural ali já presente. </p>
346+
347+
<p>Curupira, Saci-pererê, Boitatá, boto cor de rosa, mula sem cabeça, Anhangá. A origem de muitas dessas histórias são fruto da vivência e culturas daqueles que estão a mais tempo no território. O que é contado e ouvido se modifica e ganha novos contornos no encontro com outros povos - aqueles que chegam para colonizar e as diversas culturas deslocadas, algumas escravizadas, outras que chegam em ondas de migração. Seja como for, são histórias que contam em cada detalhe o quão profundas são suas raízes na terra, nas matas, nos córregos, no mar e nos pântanos.</p>
348+
349+
<p>O projeto Mitologia Estendida é sobre isso também: mergulhar na diversidade presente na mitologia brasileira através da tecnologia. Estava lançado o desafio de escolher entre um universo de mitos e lendas aqueles com os quais trabalhar um roteiro e consequentemente fazer animações em 2D.</p>
350+
351+
<p>Após um mergulho de pesquisa, foi se revelando a ideia de “guardiões da natureza” e sua relação com algumas ameaças contemporâneas. Foi assim que vimos no Boitatá, Anhangá e Curupira a conexão necessária para dar o próximo passo e começar a fazer um mapa dos personagens. </p>
352+
353+
<p>Você já conhecia algum desses mitos? Tem alguma história com eles? Como você contaria essa história? </p>
354+
355+
<p>No próximo post, vamos falar mais sobre o mapa de cada um dos seres encantados.
356+
357+
</p>
358+
</div>
359+
<span class="text-sm text-gray-500 mt-4 block">Postado em: 03 de Outubro de 2025</span>
360+
</div>
324361
</div>
325362
</div>
326363

327364
<!-- Post 2 -->
328-
<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 flex flex-col md:flex-row items-center md:space-x-6">
365+
<!--<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 flex flex-col md:flex-row items-center md:space-x-6">
329366
<img src="https://placehold.co/400x250/e0e0e0/333333?text=Cenários+VR" alt="Cenários VR" class="w-full md:w-1/3 h-48 object-cover rounded-lg mb-4 md:mb-0 shadow-md">
330367
<div>
331368
<h2 class="text-2xl font-semibold mb-3 text-[#08B59F]">Construindo Mundos: Design de Cenários VR</h2>
@@ -334,10 +371,10 @@ <h2 class="text-2xl font-semibold mb-3 text-[#08B59F]">Construindo Mundos: Desig
334371
</p>
335372
<span class="text-sm text-gray-500 mt-2 block">Postado em: 25 de Junho de 2025</span>
336373
</div>
337-
</div>
374+
</div>-->
338375

339376
<!-- Post 3 -->
340-
<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 flex flex-col md:flex-row items-center md:space-x-6">
377+
<!--<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 flex flex-col md:flex-row items-center md:space-x-6">
341378
<img src="https://placehold.co/400x250/e0e0e0/333333?text=Testes+Iniciais" alt="Testes Iniciais" class="w-full md:w-1/3 h-48 object-cover rounded-lg mb-4 md:mb-0 shadow-md">
342379
<div>
343380
<h2 class="text-2xl font-semibold mb-3 text-[#08B59F]">Testes e Otimização: Primeiras Impressões</h2>
@@ -347,7 +384,7 @@ <h2 class="text-2xl font-semibold mb-3 text-[#08B59F]">Testes e Otimização: Pr
347384
<span class="text-sm text-gray-500 mt-2 block">Postado em: 10 de Junho de 2025</span>
348385
</div>
349386
</div>
350-
</div>
387+
</div>-->
351388
</section>
352389

353390
<!-- Exposição Section -->
@@ -364,17 +401,47 @@ <h1 class="text-4xl font-extrabold text-center mb-8 text-[#08B59F]">Exposição<
364401
</div>
365402
<!-- End Banner Section -->
366403

404+
367405
<!-- Novo Texto Adicionado -->
368406
<h2 class="text-3xl font-bold text-center mb-6 text-gray-800">Uma Jornada Imersiva na Arte e Tecnologia</h2>
407+
369408
<p class="text-lg text-center text-gray-700 mb-4 max-w-2xl mx-auto">
370-
Estamos rodeados por energias invisíveis que nos auxiliam a navegar os tempos complexos que vivemos. Em uma experiência única em realidade mista, a exposição Mitologia Estendida ocupa o prédio do Departamento de Cinema, Rádio e Televisão da USP. Resultado de uma investigação sobre as relações entre arte, tecnologia e educação, a exposição é um convite para um percurso-ritual pelos corredores da USP para ir ao encontro de um recorte da mitologia brasileira vista em realidade mista.
409+
Estamos rodeados por energias invisíveis que nos auxiliam a navegar os tempos complexos que vivemos.
410+
</p>
411+
<p class="text-lg text-center text-gray-700 mb-4 max-w-2xl mx-auto">
412+
Em uma experiência única em realidade mista, a exposição Mitologia Estendida ocupa o espaço expositivo do Coletivo Digital. Resultado de uma investigação sobre as relações entre arte, tecnologia e educação, a exposição é um convite para um percurso-ritual para ir ao encontro de um recorte da mitologia brasileira vista em realidade mista e em realidade aumentada.
413+
</p>
414+
<p class="text-lg text-center text-gray-700 mb-8 max-w-2xl mx-auto">
415+
A exposição Mitologia Estendida ocupará o Centro Cultural Coletivo Digital em dois momentos:
416+
</p>
417+
<p class="text-lg text-center text-gray-700 mb-8 max-w-2xl mx-auto">
418+
Experiência de realidade mista (MR)
419+
<br>Palestra de abertura:
420+
<br>28/Nov 18h-19h
421+
</p>
422+
<p class="text-lg text-center text-gray-700 mb-8 max-w-2xl mx-auto">
423+
Oficina
424+
<br>29/Nov 9h30-13h30
425+
</p>
426+
<p class="text-lg text-center text-gray-700 mb-8 max-w-2xl mx-auto">
427+
Experiência MR
428+
<br>28/Nov 19-21h
429+
<br>29/Nov 9h30-19h
430+
</p>
431+
<p class="text-lg text-center text-gray-700 mb-8 max-w-2xl mx-auto">
432+
Exposição de realidade aumentada (AR)
433+
<br>28/Nov 19-21h
434+
<br>29/Nov 9h30-19h
435+
<br>1-19/Dez 11-19h (segunda a sexta)
436+
<br>12-23/Jan 11-19h (segunda a sexta)
371437
</p>
372438
<p class="text-lg text-center text-gray-700 mb-8 max-w-2xl mx-auto">
373-
A exposição Mitologia Estendida vai acontecer nos dias 26 e 27 de setembro, 2025 no prédio da ECA-USP-CTR- Departamento de Cinema, Rádio e Televisão.
439+
Engajado na luta contra a privatização dos saberes, o Coletivo Digital atua para que o acesso ao conhecimento seja reconhecido como um bem da humanidade e como um direito de todos.
374440
</p>
375441
<p class="text-lg text-center text-gray-700 mb-8 max-w-2xl mx-auto">
376-
Av. Prof. Lúcio Martins Rodrigues, 443 - Prédio 4 - Butantã, São Paulo - SP
442+
Coletivo Digital:  R. Luís Murat, 298, bairro Pinheiros, São Paulo - SP
377443
</p>
444+
378445
<!-- Fim do Novo Texto -->
379446
</section>
380447

@@ -509,6 +576,32 @@ <h2 class="text-2xl font-semibold mb-4 text-[#08B59F]">Envie-nos uma Mensagem</h
509576
</div>
510577
</footer>
511578

579+
<!-- Script para seçao de making of -->
580+
<script>
581+
document.addEventListener('DOMContentLoaded', () => {
582+
// Seleciona todos os cards de postagem
583+
const posts = document.querySelectorAll('.post-card');
584+
585+
posts.forEach(post => {
586+
// Adiciona um ouvinte de evento de clique a cada post
587+
post.addEventListener('click', () => {
588+
// Encontra o conteúdo expansível e o ícone dentro do post clicado
589+
const content = post.querySelector('.expandable-content');
590+
const icon = post.querySelector('svg');
591+
592+
// Alterna a visibilidade do conteúdo
593+
// A classe 'hidden' do Tailwind (display: none) é adicionada ou removida
594+
content.classList.toggle('hidden');
595+
596+
// Gira o ícone para indicar o estado (aberto/fechado)
597+
if (icon) {
598+
icon.classList.toggle('rotate-180');
599+
}
600+
});
601+
});
602+
});
603+
</script>
604+
512605
<script>
513606
// Function to show a specific section and hide others
514607
function showSection(sectionId) {

0 commit comments

Comments
 (0)