Tríscele Web e Museologia

Desenvolvendo um App interativo para museus

Saty Jardim

Neste artigo vamos mostrar como criar um app interativo para museus utilizando HTML, CSS, JavaScript e NW.js.

Considerando a crescente demanda pela exibição de conteúdos audiovisuais em museus de todo o mundo, resolvemos escrever este artigo. Aqui abordamos uma série de soluções em código, que em conjunto constituem um ambiente propício para o desenvolvimento de plataformas elegantes de pesquisa e informação.

Recursos necessários

Para este app interativo, nós pensamos a seguinte estrutura física e de hardware:

Aplicativos, bibliotecas e plugins utilizados:

O projeto NW.js (anteriormente conhecido como Node-WebKit) permite criar aplicativos com recursos nativos completos em HTML, CSS e JavaScript. Isso significa que seu aplicativo baseado em linguagens web pode receber comandos de sensores e outros dispositivos.

Obtenha em: https://nwjs.io

BookBlock é um plugin jQuery que irá auxiliar na criação de um livreto digital, permitindo que você navegue através de seus itens virando as páginas.

Obtenha em: https://tympanus.net/codrops/2013/05/28/bookblock-revised

Font Awesome traz uma coleção de ícones vetoriais que podem ser personalizados em tamanho, cor e sombra com o poder do CSS.

Obtenha em: https://fontawesome.io

jQuery é uma biblioteca JavaScript indispensável em qualquer projeto web e que não requer maiores apresentações.

Obtenha em: https://jquery.com

Preparando o ambiente

Para dar início a este projeto você precisa baixar a última versão do NW.js (neste momento v0.16.0). Em seguida descompacte o arquivo .ZIP em uma pasta de sua preferência.

Seu primeiro App interativo para museus

Logo abaixo existe um botão de download. Clicando nele você poderá obter o arquivo .ZIP, que preparamos para você, com o aplicativo desenvolvido neste artigo.

>>BAIXAR ARQUIVOS

Ao extrair o arquivo compactado, você verá que o conteúdo tem uma certa semelhança com um site, isto não é mera coincidência, pois nosso APP é baseado em linguagens web. Porém para este funcionar, você precisa copiar todo o conteúdo para a pasta onde você descompactou os arquivos do NW.js.

Após a mesclarem, sua pasta terá um conteúdo parecido com este.

Para iniciar o APP você deverá dar duplo clique no arquivo de nome “nw.exe”. Feito isto você deverá ver duas janelas semelhantes ao retratado na imagem abaixo.

Aparência do nosso aplicativo de exemplo

Como este App foi desenvolvido

Nesta seção explicarei como funciona o nosso App, dando atenção especial a comunicação e interação entre as janelas do aplicativo. CSS e HTML não serão explicados pois não é este o foco do artigo.

Arquivo: package.json

Este arquivo de conter o código responsável por indicar a primeira página a ser aberta no App interativo, bem como suas configurações de tamanho, posição e modo de exibição. Em nosso exemplo, utilizamos apenas configurações básicas, consulte a documentação do NW.js para outras opções.

{
  "name": "Página de índice (interface.html)",
  "main": "interface.html",
  "window": {
    "icon": "img/icon.png",
    "width": 520,
    "height": 620,
    "fullscreen": false,
    "toolbar": false
  }
}

Arquivo: interface.html

Este é praticamente um arquivo comum em HTML, presente em qualquer site estático da internet. Porém mais do que isso, ele é a primeira página aberta pelo nosso App interativo para museus. Como o código desta página é extenso, apresentarei aqui apenas os trechos que são fundamentais para que o aplicativo funcione. Também adicionei comentários em cada parte, para facilitar o seu entendimento.

jQuery(function ($) {
	// Função para enviar o numero da página desejada p/ a outra janela	
	$("body").on("click", ".container ul li button", function(e) {		
		e.preventDefault();		
		var message = $(this).attr("data-page");		
		parent.top.iframeAction(message);		
	});	
});

 <ul> 
 <li style="background:#ee6842;">
 <div class="image"><img src="img/torta-alema.jpg" alt=""/></div> 
 <h3>Torta Alemã</h3> 
 <button data-page="6">Ver Receita <i class="fa fa-chevron-right"></i></button> 
 </li> 
 <li style="background:#bac368;">
 <div class="image"><img src="img/batata-rosti.jpg" alt=""/></div> 
 <h3>Batata Rösti Recheada</h3> 
 <button data-page="2">Ver Receita <i class="fa fa-chevron-right"></i></button> 
 </li>
</ul>

Arquivo: content.html

Esta página recebe os comandos da anterior e exibe no livreto o item selecionado pelo usuário. Veja a seguir como estas informações são recebidas.

//inicia		
var gui = require('nw.gui');

//redimensiona a janela
window.resizeTo(520, 450);

//move a janela para um ponto x y
window.moveTo(540, 0);
  
//recebe o comando e executa a função de mudar a página
window.addEventListener('message',function(event) {
	$('#bb-bookblock').bookblock('jump', event.data);
},false);

  
<div id="bb-bookblock" class="bb-bookblock">  
 <div class="bb-item">
 <img src="img/strudel_02.jpg" alt=""/>
 <h3>STRUDEL DE MAÇÃ</h3>
 <p>O Apfelstrudel ou Strudel de maçã é uma sobremesa de massa folhada muito popular na Alemanha. Sua receita pode variar dependendo dos ingredientes escolhidos para o preparo.</p>
 </div> 
 <div class="bb-item">
 <img src="img/batata-rosti_02.jpg" alt=""/>
 <h3>Batata Rösti Recheada</h3>
 <p>A receita original é feita com batata cozida ralada, frita em manteiga e recheada com cebola, toucinho, queijo, legumes ou maçã. O preparado fica dourado e crocante.</p>
 </div>

>>VEJA AQUI O APLICATIVO FUNCIONANDO

App interativo para museus Tríscele

App interativo: Inúmeras possibilidades

Tudo isso já é bastante surpreendente e nós nem sequer utilizamos módulos internos ou bibliotecas de terceiros. Só para se ter uma ideia, os módulos nativos tem funcionalidades como:

Mas talvez, o mais incrível são as inúmeras bibliotecas de terceiros, disponíveis para todos os tipos de projetos. Listei aqui algumas das mais interessantes:

Conclusão

Como você pode observar, as vantagens de utilizar NW.js em uma aplicação, são muitas. Porém a possibilidade de utilizar as tecnologias Web, combinadas com módulos Node.js torna o NW.js incrível.

Aproveitando todos estes recursos, você poderia, por exemplo, coletar dados de sensores com a biblioteca Phidgets e gerar dinamicamente formas 3D com Three.js. Ou, você pode coletar dados geográficos através da API do Google Maps e guiar um drone com Cylon.js. Possibilidades infinitas.