;(function() { window.createMeasureObserver = (measureName) => { var markPrefix = `_uol-measure-${measureName}-${new Date().getTime()}`; performance.mark(`${markPrefix}-start`); return { end: function() { performance.mark(`${markPrefix}-end`); performance.measure(`uol-measure-${measureName}`, `${markPrefix}-start`, `${markPrefix}-end`); performance.clearMarks(`${markPrefix}-start`); performance.clearMarks(`${markPrefix}-end`); } } }; /** * Gerenciador de eventos */ window.gevent = { stack: [], RUN_ONCE: true, on: function(name, callback, once) { this.stack.push([name, callback, !!once]); }, emit: function(name, args) { for (var i = this.stack.length, item; i--;) { item = this.stack[i]; if (item[0] === name) { item[1](args); if (item[2]) { this.stack.splice(i, 1); } } } } }; var runningSearch = false; var hadAnEvent = true; var elementsToWatch = window.elementsToWatch = new Map(); var innerHeight = window.innerHeight; // timestamp da última rodada do requestAnimationFrame // É usado para limitar a procura por elementos visíveis. var lastAnimationTS = 0; // verifica se elemento está no viewport do usuário var isElementInViewport = function(el) { var rect = el.getBoundingClientRect(); var clientHeight = window.innerHeight || document.documentElement.clientHeight; // renderizando antes, evitando troca de conteúdo visível no chartbeat-related-content if(el.className.includes('related-content-front')) return true; // garante que usa ao mínimo 280px de margem para fazer o lazyload var margin = clientHeight + Math.max(280, clientHeight * 0.2); // se a base do componente está acima da altura da tela do usuário, está oculto if(rect.bottom < 0 && rect.bottom > margin * -1) { return false; } // se o topo do elemento está abaixo da altura da tela do usuário, está oculto if(rect.top > margin) { return false; } // se a posição do topo é negativa, verifica se a altura dele ainda // compensa o que já foi scrollado if(rect.top < 0 && rect.height + rect.top < 0) { return false; } return true; }; var asynxNextFreeTime = () => { return new Promise((resolve) => { if(window.requestIdleCallback) { window.requestIdleCallback(resolve, { timeout: 5000, }); } else { window.requestAnimationFrame(resolve); } }); }; var asyncValidateIfElIsInViewPort = function(promise, el) { return promise.then(() => { if(el) { if(isElementInViewport(el) == true) { const cb = elementsToWatch.get(el); // remove da lista para não ser disparado novamente elementsToWatch.delete(el); cb(); } } }).then(asynxNextFreeTime); }; // inicia o fluxo de procura de elementos procurados var look = function() { if(window.requestIdleCallback) { window.requestIdleCallback(findByVisibleElements, { timeout: 5000, }); } else { window.requestAnimationFrame(findByVisibleElements); } }; var findByVisibleElements = function(ts) { var elapsedSinceLast = ts - lastAnimationTS; // se não teve nenhum evento que possa alterar a página if(hadAnEvent == false) { return look(); } if(elementsToWatch.size == 0) { return look(); } if(runningSearch == true) { return look(); } // procura por elementos visíveis apenas 5x/seg if(elapsedSinceLast < 1000/5) { return look(); } // atualiza o último ts lastAnimationTS = ts; // reseta status de scroll para não entrar novamente aqui hadAnEvent = false; // indica que está rodando a procura por elementos no viewport runningSearch = true; const done = Array.from(elementsToWatch.keys()).reduce(asyncValidateIfElIsInViewPort, Promise.resolve()); // obtém todos os elementos que podem ter view contabilizados //elementsToWatch.forEach(function(cb, el) { // if(isElementInViewport(el) == true) { // // remove da lista para não ser disparado novamente // elementsToWatch.delete(el); // cb(el); // } //}); done.then(function() { runningSearch = false; }); // reinicia o fluxo de procura look(); }; /** * Quando o elemento `el` entrar no viewport (-20%), cb será disparado. */ window.lazyload = function(el, cb) { if(el.nodeType != Node.ELEMENT_NODE) { throw new Error("element parameter should be a Element Node"); } if(typeof cb !== 'function') { throw new Error("callback parameter should be a Function"); } elementsToWatch.set(el, cb); } var setEvent = function() { hadAnEvent = true; }; window.addEventListener('scroll', setEvent, { capture: true, ive: true }); window.addEventListener('click', setEvent, { ive: true }); window.addEventListener('resize', setEvent, { ive: true }); window.addEventListener('load', setEvent, { once: true, ive: true }); window.addEventListener('DOMContentLoaded', setEvent, { once: true, ive: true }); window.gevent.on('allJSLoadedAndCreated', setEvent, window.gevent.RUN_ONCE); // inicia a validação look(); })();
  • AssineUOL
Topo

Metaverso deve atrair bilhões, mas precisa ter usos práticos para convencer

freepik
Imagem: freepik

Rosália Vasconcelos

Colaboração para Tilt, do Recife

01/06/2022 18h04Atualizada em 03/06/2022 13h41

Ainda que projeções do mercado mostrem que soluções dentro do metaverso possam movimentar US$ 800 bilhões de dólares até 2024, a maioria dos recursos necessários para a integração desses mundos virtuais ainda está longe de virar realidade.

Para tornar o metaverso algo do dia a dia, será preciso convencer os consumidores de suas aplicações práticas, e elas estão ligadas diretamente a oferta de melhores experiências para as pessoas. Caso contrário, esse ramo da inovação tecnológica perderá seu propósito.

É o que acredita o especialista em gestão de produtos digitais e inovação Álvaro Gabriele, que participou da palestra "UX e Metaverso" durante o primeiro dia da conferência The Developer's Conference (TDC) Innovation, um dos eventos mais importantes da América Latina, voltado especialmente para profissionais do mercado de tecnologia.

"Estamos acostumados a usar celulares e aplicativos, mas não carteiras digitais e comandos de voz. Imagina óculos 3D! É aí onde entra o design e a experiência do usuário", ressaltou.

Segundo o especialista, a experiência do usuário — conhecida como UX— é uma área que está diretamente vinculada ao novo universo que surge a partir da integração entre o mundo físico e o digital.

"Se olharmos com mais atenção para as tecnologias, as plataformas e os dispositivos, percebemos que ainda circulam de maneira muito separada. O mais importante do metaverso é entender como conectar esses pontos, ter um propósito mais focado. Porque a jornada tem que se adaptar aos pontos conectados", explicou o designer de produtos.

TDC Innovation, voltado a profissionais de tecnologia, começou nesta quarta - Reprodução - Reprodução
TDC Innovation, voltado a profissionais de tecnologia, começou nesta quarta
Imagem: Reprodução

Integração, interação e imersão

Para uma experiência completa dentro do ambiente do metaverso, Álvaro Gabriele defende a necessidade de o trabalho ser feito em três pilares principais: integração, interação e imersão —que é o ponto essencial do metaverso: fazer com que as pessoas usem o ambiente virtual como se estivessem lá dentro fisicamente.

"Se eu não tenho interface no ambiente e o usuário não interage com o contexto, as informações são apenas elementos espaciais. Se existe imersão, mas não tem interação, é uma imersão superficial", explicou.

Para ele, criar uma jornada dentro da experiência do consumo é o principal desafio dos profissionais que atuam na área de UX. Sendo assim, carteiras digitais, óculos 3D, criptomoedas, NFTs (registros únicos digitais), machine learning (inteligência artificial capaz de aprender sozinha), entre outras tecnologias, precisam ser desenvolvidas com isso em mente.

Depois de um período 100% virtual por causa da covid-19, a TDC Innovation neste ano acontece no formato híbrido, ou seja, é possível participar de maneira presencial, na capital catarinense, ou no formato online.

A conferência começa hoje e vai até sexta (3). A TDC foi criada para conectar palestrantes, empresas, profissionais e entusiastas para debater temas que estão em alta no mercado de tecnologia, possibilitando capacitação e troca de experiências entre todos.

Os participantes podem conferir 27 trilhas de conteúdo , pagas e segmentadas por Gestão de Produtos, API, Arquitetura Java, Devops, Inteligência Artificial e Machine Learning, UX, Data Science, entre outros assuntos. Também há a possibilidade de ar os conteúdos gratuitos, via Community , com 6 trilhas disponíveis.