Na décima quarta reunião do grupo de 2023.1 estavam presentes: Diana, Carol, Joy e Maria. Como primeiro ponto do nosso encontro, conseguimos obter o 3DVista Virtual Tour e fazer experimentações no software a partir das imagens que coletamos da última visita em campo (06/06/23).
O que aprendemos com esses testes:
- O 3DVista Virtual Tour possibilita conectar uma imagem panorâmica ao projeto principal. Isso pode ser feito a partir do clique na imagem que está na biblioteca e arrastá-la ao ponto desejado. Quando soltar a imagem no ponto ideal, abre-se uma janela para criarmos os hotspots;
- A cada novo comando, é recomendado que se faça uma projeção em “visualizing” para conferir o layout;
- O projeto no 3DVista Virtual Tour é compatível com óculos de Realidade Virtual (VR);
- Podemos vincular música e outras ferramentas nas imagens 360°, de modo individual ou em todo o projeto (com várias imagens 360°);
- As músicas, por exemplo, podem ser colocadas na imagem com “Panorama Actions“. Essa ferramenta possibilita outras opções de anexos ao projeto;
- Uma ferramenta que chamou a nossa atenção: criar plano para tripod. Resulta na criação de um círculo na posição da base do tripé da câmera na foto;
- Parece que a qualidade das imagens estão melhores, em comparação com o Marzipano.
Entendemos que o 3DVista Virtual Tour pode ser, de fato, o software que iremos usar para experimentar as imagens 360° com as micronarrativas. Pois, é um software que nos oferece uma variedade de ferramentas, qualidade nas opções de visualização e possibilita a combinação do projeto em diferentes formatos. Mesmo assim, vale ressaltar que ainda temos que estudar muito esse software. Contudo, não descartamos o Marzipano. Através de sua relativa facilidade, vamos utilizá-lo como um “rascunho” das vistas que iremos construir. Podemos tirar prints dos instantâneos da tela para entender quais são as melhores perspectivas para seguirmos. E assim, partiremos para a construção no 3DVista Virtual Tour. Desta forma, entendemos que nossos próximos passos serão:
- Marzipano = rascunho para as perspectivas e para apontar as fotos;
- Joy avançará na base no 3DVista Virtual Tour;
- Estudar o layout de como aparecerão as fotografias e textos a cada ponto de micronarrativa;
Essas etapas seguirão as fotos do dia 06/06/23, com 8 pontos, como pode ser visto na imagem ao lado: 
Depois de avançar nesses aspectos sobre o 3DVista Virtual Tour e os pontos para as micronarrativas, mergulhamos no universo do HTML e do CSS, a fim de obtermos ferramentas que nos auxiliem na montagem dos layouts em HTML com os thumbnails das imagens e textos. Além disso, esse conhecimento é de grande relevância para a caminhada pessoal e acadêmica das participantes da pesquisa.
Joy começou explicando sobre HTML com o código do style (estilo) da galeria montada por Maria através do editor Brakets. Com esse e outros exemplos, conseguimos abordar alguns dos mais importantes elementos HTML, como segue a lista abaixo:
- h1, h2, h3, h4, h5, h6 = Existem 6 níveis de títulos e eles variam de tamanho. Sendo 1 o maior, diminuindo até o 6, sendo menor;
- <title> = Comando para iniciar um título com características específicas;
- <ul> e <li> = São listas com pontos ou números;
- <div> = Elemento de divisão. Podemos ter vários divs nos comandos;
- <head> = É o comando de começar a principal ação;
- <p> = Para abir um parágrafo;
- <link> = Para incluir um link. Atenção: não precisa fechar esse comando com </link>, pois é um elemento global;
- <html> = Sempre começar a escrever o código com esse elemento e ao final, terminar com </html>;
- É necessário começar o comando com <*oelemento*> e fechar com </*oelemento*>;
- body = É o corpo da página. Só vai aparecer no navegador o que estiver aqui;
- <index.html> = É a página inicial. O arquivo editado aparece no computador como “index.php”.
Complementando o estudo sobre HTML, passamos a ver alguns exemplos de CSS. Entendemos que é uma forma de organizar e enriquecer o código do HTML (mas é possível escrever HTML sem mexer no CSS). Ao longo dessa experiência, compreendemos também que o tamanho do arquivo do código editado precisa ser “limpo” e com comandos corretos, pois o computador pode demorar a ler e pode “pesar” na hora de carregar a página no navegador. Podemos dizer que o HTML tem elementos, ao passo que o CSS tem classes. Assim, é possível editar a qualquer momento um código, desde que esteja em uma plataforma de edição e ao terminar, é necessário salvar o projeto e incluir no site. Vimos o FileZilla fazer a tarefa de “puxar” o código no computador para o site. Como curiosidade, para personalizar algum texto com o CSS, é importante indicar a cor, tamanho (pode ser em px – pixels) e a fonte. Para as fontes, apontamos pelo menos três tipos de fontes tipográficas (exemplo: arial, helvetica, sans-serif), para que o sistema “carregue” de dentro do computador que está editando. Mesmo assim, caso não exista essas três opções, uma forma de incluir uma nova fonte é pelo Google Fonts.
Por fim, a Joy nos apontou alguns sites e cursinhos gratuitos para que possamos treinar e aprender mais sobre HTML e CSS. Segue a lista abaixo:
- Maujor (“o dinossauro do CSS”) (conteúdo) = https://www.maujor.com/
- Fundação Mozilla (conteúdo + treino) = https://developer.mozilla.org/pt-BR/docs/Web/HTML
- Codeacademy (cursinho gratuito + treino) = https://www.codecademy.com/learn/learn-html
- Dreamweaver = site (clicar na palavra)
- Codepen (conteúdo + treino) = https://codepen.io/pen/
- Kahn Academy (cursinho gratuito + treinamento) = https://pt.khanacademy.org/
- CSSzengarden (referência de site com CSS + código style acessível) = https://www.csszengarden.com/
- Freecodecamp.org (conteúdo + treino) = https://www.freecodecamp.org/news/creating-html-forms/
- Devmedia (conteúdo) = https://www.devmedia.com.br/html/
- Hostinger (conteúdo + treino) = https://www.hostinger.com.br/tutoriais/o-que-e-html-conceitos-basicos
Encaminhamentos:
Realizar protótipos da interface das telas com imagens e textos das micronarrativas (pode ser feito no programa que quisermos, como sugestão ficaram o Photoshop e o Illustrator). Escolher as fotos da galeria que serão incluídas no modelo de imagem 360° e apontar onde podem ficar através de prints das cenas com os testes feitos no Marzipano.