30:T76d,resumovis = html`

Esta visualização é uma ferramenta exploratória construída para auxiliar processos de pesquisa relativos à linguagem gráfico-interativa. Ela utiliza mapeamentos de aspectos gráficos feitos sobre artefatos de alta interação comportamental (mais facilmente entendidos como narrativas interativas e jogos de computador), em uma abordagem própria aos estudos de linguagem gráfica que se difere das questões de como a indústria e o mercado de jogos os tratam, variando entre modelos de mecanismos do jogar e/ou relações de concorrência pela adoção dos jogadores dentre os títulos que fazem parte de um mesmo segmento.

É possível obter uma relação dos produtos contendo características específicas, ou dentro de um determinado período, especificando estes atributos no campo de busca. As informações são apresentadas em tempo-real.

As tipologias gráficas, ou de leitura, já estão relacionadas abaixo para facilitar o processo de pesquisa, assim como alguns conjuntos pré-determinados de artefatos que de alguma forma estão inter-relacionados. Os resultados são apresentados através de três perspectivas: a primeira contendo os vídeos de cada artefato, para que possam ser conhecidos; a segunda apresentando as tipologias pictóricas do conjunto selecionado, com suas descrições e exemplos paradigmáticos; e a terceira contendo as tipologias das formas de leitura da interação neste conjunto de artefatos, também com suas descrições e referências paradigmáticas.

Os dados brutos do levantamento podem ser acessados nesta planilha ou em formato JSON.

`31:T619,resumointera = html`

O que são artefatos de alta interação comportamental?

Classificamos como artefatos de alta interação, ou de alta interação comportamental, os artefatos computacionais que possuem transformações frenéticas em sua configuração pictórica em tela, em decorrência de respostas dinâmicas às ações dos usuários. Em síntese, são artefatos que possuem um comportamento gráfico muito dinâmico e metamórfico, que se modificam em função das ações das pessoas, ou em um diálogo com elas através do uso.

De forma geral, os artefatos de alta interação se encontram mais comumente na forma de jogos eletrônicos, narrativas computacionais, ou arte generativa. Tratam-se de softwares intensos em termos gráfico-interativos. Componentes de vídeo são também artefatos com transformações pictóricas frenéticas, mas que não acontecem como respostas ou diálogo às ações de usuários; neste caso, estabelecem uma relação passiva, que ocorrerá mesmo na ausência das pessoas à sua frente, e dessa forma não se enquadram na categoria.

Já as aplicações, ou as ferramentas, demandam frequentemente alta intensidade de processamento, mas seus aspectos pictóricos e as informações apresentadas visualmente, mudam pouco. Em contraponto, os tratamos como artefatos de baixa interação comportamental.

Estas categorias separam, de forma muito evidente, dois tipos bem diferentes de artefatos computacionais que são produzidos com abordagens projetuais igualmente distintas.

`32:Ta1b,resumolinguagem = html`

O conceito de alta (ou baixa) interação separa tipos muito diferentes de projetos nas mídias computacionais. Para os estudos de linguagem gráfico-interativa, aqueles que possuem alta interação são mais interessantes por serem visualmente mais ricos e dinâmicos.

A linguagem gráfico-interativa de um artefato projetado é um problema essencialmente de design. Estes estudos descendem dos estudos de linguagme gráfica, originalmente realizados sobre artefatos em mídia impressa.

Muito da classificação e enquadramentos sobre jogos e narrativas digitais se dá através de convenções baseadas nas tecnologias que lhes tornam possíveis. As técnicas adotadas e/ou a engenharia utilizada para construção não podem ser confundidas com a linguagem de um artefato, tampouco a forma como ele interage com as pessoas. Denominações como jogos "2D" ou "3D", ou jogos "Side-Scrollers", "First Person Shooters", ou "Top Down", adotadas de forma ampla para qualificação destes produtos, são derivadas da tecnologia empregada para sua construção, e não da forma como as pessoas interpretam aquilo com o que estão em contato. Isto equivale, por exemplo, a categorizar livros pelo tipo de papel utilizado, e não como poemas, ficções ou ensaios.

Tratamos aqui da forma como os artefatos se expressam graficamente, ou pela perspectiva de quem os utilizas: da leitura feita pelas pessoas sobre as manifestações gráficas destes artefatos. Considerando aspectos de linguagem, um designer projeta um jogo (ou narrativa) com uma "expressão gráfica vetorial", e não um jogo com uma "expressão First Person Shooter", ainda que esta modalidade imponha ao produto uma dimensão esquemática de funcionamento com certas convenções já estabelecidas para seu comportamento, e expectativas já estabelecidas de como deverá se expressar ou interagir com o usuário.

A linguagem da cinematografia, por exemplo, utiliza termos como dolly back, pan, track, para definir a expressão e forma de leitura que se deseja em uma cena.

Nesta visualização, tentamos elencar os aspectos que interessam sobre a linguagem nestas mídias.

`33:T85d,explicaintera = md`Classificamos como **artefatos de alta interação** ou **artefatos de alta interação comportamental** os artefatos computacionais que possuem transformações frenéticas em sua configuração pictórica, em decorrência de respostas dinâmicas às ações dos usuários. Em síntese, são artefatos que possuem um comportamento gráfico muito dinâmico e metamórfico, que se modificam em função das ações e um diálogo com as pessoas que lhe dão uso. De forma geral, os **artefatos de alta interação** se encontram mais comumente na forma de jogos eletrônicos, narrativas computacionais, ou arte generativa. Em 2011, o game designer Jonathan Blow liderou o movimento *design reboot* que tentava estabelecer os jogos eletrônicos como uma forma de expressão artística. Componentes de vídeo são também artefatos com transformações pictóricas frenéticas, mas que não acontecem como respostas ou diálogo às ações de usuários. Assim como visualizações de dados em tempo-real (como gráficos de ações na bolsa de valores ou contagens de voto), os usuários imediatos são passivos em relação às transformações gráficas que acontecem, ainda que estas transformações possam acontecer em decorrência de outras interações por terceiros, como a inclusão de novos dados para serem apresentados. Aplicativos, softwares ou ferramentas são considerados neste mesmo princípio como **artefatos de baixa interação** pois, graficamente, são bem menos metamórficos em termos pictóricos. A condição de baixa interação não diz respeito ao tempo de resposta ou processamento realizado pelo artefato, mas apenas a intensidade das transformações visuais (transformações percebidas) nele. Trata-se de um conceito arbitrário, que não tenta explicar a interação ou sua intensidade pela natureza (ontologia) do artefato, já que todas as tentativas nesse sentido acabam falhando ao lidarem com artefatos que atravessam convenções, e, considerando o quanto o contexto computacional é inovador e disruptivo, chances são de que uma grande parcela dos artefatos relevantes o façam.`34:T1a33,explicalinguagem = md`A forma como a própria área de game design costuma analizar os jogos e outros artefatos narrativos computacionais de alta interação permanece presa as maneiras como a ciência e/ou engenharia da computação os trata. Costumam ser classificados como jogos 2D ou 3D, mas se observarmos bem, esta classificação se refere à tecnologia que será empregada e a forma como o artefato será construído, e não como a interação será lida pelos jogadores. A existência de um contexto tridimensional (ou não) no mecanismo do jogo é pouco relevante em relação a sua linguagem gráfica, ou mais precisamente, como estes jogadores lêem/lerão a interação. Da mesma forma, classificar um jogo como um Side-scroller, um 2.5D, ou um Top Down (dentre outros critérios também usados) diz mais à respeito da sua engenharia de construção do que da interação que os usuários terão com eles. O problema da linguagem gráfica não é o problema da engenharia construtiva. Obviamente que o design precisa levar em conta o processo construtivo dos artefatos para projetá-los, mas a linguagem adotada (a forma como o artefato se expressa graficamente, e no caso dos artefatos computacionais, gráfico-interativamente) é um problema do campo simbólico que envolve a leitura, enquadramento e entendimento da interação esperada. Do ponto de vista daquilo que se vê (e também se ouve, já que o termo *gráfico* é apenas uma simplificação conceitual que também deveria abarcar outros estímulos sensoriais como o som ou o tato), a primeira leitura é sobre os limites do artefato: tudo com o que haverá interação já está completamente visível (**campo total**), ou há mais coisas para além do que está presente na tela (**campo parcial**), isto é, há existência de um mundo além daquilo que se apresenta imediatamente recortado pela tela? O próximo comportamento a ser lido diz respeito a uma predominância **horizontal**, **vertical**, **oblíqua** (inclinada) ou **à fundo** (em direção à própria tela, afundando nela) da interação com ele: qual a leitura esperada deste usuário/jogador? E desta leitura secundária, podemos ter também leituras terciárias, como uma interação também no eixo horizontal depois (e decorrente) de um afundamento em direção à própria tela, por exemplo. Estas leituras/enquadramentos da interação não estão associadas à movimentação de personagens ou protagonistas nos jogos e/ou narrativas: elas são a leitura da interação com o todo, ou mais precisamente, com o próprio artefato; são a forma como seu usuário o lê ou lerá. Um jogo do tipo FPS (*first person shooter*), que coloca o usuário na pele (ou nos olhos) do protagonista, teria sua linguagem classificada - pela perspectiva da engenharia, ou do game design - como um jogo 3D. Mas a leitura da linguagem gráfica deste tipo de interação é feita prioritariamente **para frente** (à fundo, e ao centro da tela) e não pela tecnologia de construção gráfica adotada, podendo ainda se deslocar o campo (de forma terciária) tanto **horizontal quanto verticalmente**. Nestes casos, este enquadramento terciário é apresentado através de uma perspectiva cônica, que distorce a construção pictográfica para reproduzir o efeito das lentes ou da forma como nossos próprios olhos enxergam o mundo, mas poderia não ser, se esta fosse a opção de linguagem adotada pelo designer responsável. Os cálculos de posicionamento dos objetos, e a matriz de processamento do artefato, são em 3D; e este é o problema da engenharia do artefato, não da sua linguagem gráfica. Para a linguagem, trata-se, primeiro, de um **campo parcial** (há mais além dos limites da tela); segundo, de uma **leitura para frente**; e terceiro de uma interação que permite o deslocamento do que se vê (e lê) sobre eixos horizontal e/ou vertical, configurando um **mapa bidimensional**.

A linguagem da cinematografia, por exemplo, utiliza termos como *dolly back*, *pan*, *track*, para definir a expressão e forma de leitura que se deseja em uma cena. A confusão que leva a equivalência da linguagem do artefato com a tecnologia aplicada é tão onipresente, que atualmente as classificações vão além, e incluem também o mecanismo/plataforma que produz o contexto tridimensional de funcionamento do jogo, demarcados como *3D feito com Unreal Engine*, *3D feito com Unity*, *2D feito com GameMaker*, dentre algumas das ferramentas disponíveis no mercado. É notória a diferença de performance e de recursos nestas plataformas, que impactam diretamente naquilo que se vê sendo gerado com renderizações em tempo real. Contudo, os problemas de processamento, de eficiência das construções gráficas, e das facilidades (ou dificuldades) no processo produtivo (dos elementos gráficos, do código computacional, e da integração entre código e design) não são problemas de linguagem. A distorção cônica na expressão gráfica não é exclusividade das construções que operam mecanismos 3D. Mecanismos bidimensionais também podem ter sua representação curvadas e distorcidas nos dois eixos. Alguns emuladores, por exemplo, aplicam pequenas distorções nos limites das telas para simular a expressão das televisões de tubo catódico, que não eram planas, e possuíam pequenas curvaturas nas bordas. Raros são os artefatos que contam com um **mapa tridimensional** como leitura/enquadramento secundário. Isto acontece nos casos onde: 1) o enquadramento é realmente livre, permitindo, por exemplo, rotações sobre os três eixos, sabendo que as rotações no eixo de afundamento são incomuns (presentes em simuladores de aviões ou naves espaciais), e que as rotações sobre o eixo horizontal (que podem deixar o jogo de ponta-cabeça) costumam provocar tontura e desnorteamento nas pessoas. Artefatos de imersão com tecnologias de realidade virtual geralmente se enquadram nesta linguagem; 2) situações onde a leitura/enquadramento não é direcionada ao aprofundamento da tela, mas ao próprio personagem/protagonista, e se faz necessário considerar as interações não apenas sobre um plano, mas livremente no espaço tridimensional. Tratam-se de artefatos onde o ponto focal é o personagem/protagonista fixo ao centro da tela, e é a diegese gráfica (a cena ao redor) que se desloca sobre ele, ou seja, é o próprio usuário interagindo com o espaço tridimensional.`35:Tb4e,36:T9a5,ferramenta_mats = function (arr, tq, form, seri, defs) { let html = ""; let htmlfinal = ""; let c = 0; let inicio = 0; let fim = 99999999; if (typeof tq != "undefined" && tq != null) { inicio = tq.inicio; fim = tq.fim; } if (seri.length == 1 || form == 2) { let narr = []; narr = tframe(arr, tq); htmlfinal = timeline(narr, defs); } else { if (typeof form == "undefined" || form == "") { html = "

"; htmlfinal = ""; c = 0; for (let k = 0; k < arr.length; k++) { if (arr[k].ano >= inicio && arr[k].ano <= fim) { c++; html += ``; if ( typeof arr[k].prefimage != "undefined" && arr[k].prefimage != "" && arr[k].prefimage != null ) { html += `

`; } else { html += `

`; } html += `

${arr[k].nome}, ${arr[k].ano}
${arr[k].linguagem}`; } } html += "

"; } else { html = "

"; html += "

Ano

Artefato

Aspecto Pictórico

"; htmlfinal = ""; c = 0; for (let k = 0; k < arr.length; k++) { if (arr[k].ano >= inicio && arr[k].ano <= fim) { c++; html += `

${arr[k].ano}

${arr[k].nome}

${arr[k].linguagem}

`; } } html += "

"; let toanos = tags(arr, "ano").map(Number); let anoma = Math.max(...toanos); let anomi = Math.min(...toanos); if (inicio != 0) { anomi = inicio; } if (fim.toString().match(/^\d\d\d\d$/)) { anoma = fim; } html += "
" + anomi + " - " + anoma + "
"; } if (c > 0) { htmlfinal = html; } } return htmlfinal; }37:Ta55,descitPictorico = function (arr, tipos, form) { if (typeof form == "undefined" || form == "") { //if (tipos.length <= 5 && tipos.length > 0) { if (tipos.length > 0) { let codigo = "

Linguagem

Paradigma

Descrição

"; for (let k = 0; k < tipos.length; k++) { for (let i = 0; i < arr.length; i++) { if (arr[i].Linguagens == tipos[k]) { codigo += `

${arr[i].Linguagens.replace( /\,/gi, "
" )}

`; if ( typeof arr[i].ParadigmaLink != "undefined" && arr[i].ParadigmaLink != `` ) { codigo += `

${arr[i].Paradigma}`; } else { codigo += `${arr[i].Paradigma}`; } codigo += `

${arr[i].Discussao}

`; codigo += `

`; } } } codigo += `

`; return codigo; } else { return ""; } } else { if (tipos.length > 0) { let codigo = "

Linguagem

Paradigma

Descrição

"; for (let k = 0; k < tipos.length; k++) { for (let i = 0; i < arr.length; i++) { if (arr[i].Linguagens == tipos[k]) { codigo += `

${arr[i].Linguagens}

`; if ( typeof arr[i].ParadigmaLink != "undefined" && arr[i].ParadigmaLink != `` ) { codigo += `${arr[i].Paradigma}`; } else { codigo += `

`; } codigo += `

${arr[i].Discussao}

`; codigo += `

`; } } } codigo += `

`; return codigo; } else { return ""; } } }38:Tbd6,descitLeitura = function (arr, tipos, form) { if (typeof form == "undefined" || form == "") { // if (tipos.length <= 5 && tipos.length > 0) { if (tipos.length > 0) { let codigo = "

Leitura

Paradigma

Descrição

"; for (let k = 0; k < tipos.length; k++) { for (let i = 0; i < arr.length; i++) { if (arr[i].Leitura == tipos[k]) { codigo += `

${arr[i].Leitura.replace(/\,/gi, "
")}

`; codigo += `

`; if ( typeof arr[i].ParadigmaLink != "undefined" && arr[i].ParadigmaLink != `` ) { codigo += `

${arr[i].Paradigma}`; } else { codigo += `${arr[i].Paradigma}`; } codigo += `

`; if (typeof arr[i].Esquema != "undefined" && arr[i].Esquema != ``) { codigo += `

`; } else { codigo += ``; } codigo += `

${arr[i].Discussao}

`; codigo += `

`; } } } //return codigo; codigo += `

`; return codigo; } else { return ""; } } else { if (tipos.length > 0) { let codigo = "

Leitura

Paradigma

Descrição

"; for (let k = 0; k < tipos.length; k++) { for (let i = 0; i < arr.length; i++) { if (arr[i].Leitura == tipos[k]) { codigo += `

${arr[i].Leitura}

`; codigo += `

`; if ( typeof arr[i].ParadigmaLink != "undefined" && arr[i].ParadigmaLink != `` ) { codigo += `${arr[i].Paradigma}`; } codigo += `

`; codigo += `

${arr[i].Discussao}

`; codigo += `

`; } } } //return codigo; codigo += `

`; return codigo; } else { return ""; } } }39:Ta04,tudoLeitura = function (arr, form) { if (typeof form == "undefined" || form == "") { let codigo = "

Leitura

Paradigma

Descrição

"; for (let i = 0; i < arr.length; i++) { if (typeof arr[i].Leitura != "undefined" && arr[i].Leitura != "") { codigo += `

${arr[i].Leitura.replace(/\,/gi, "
")}

`; codigo += `

`; if ( typeof arr[i].ParadigmaLink != "undefined" && arr[i].ParadigmaLink != `` ) { codigo += `

${arr[i].Paradigma}`; } else { codigo += `${arr[i].Paradigma}`; } codigo += `

`; if (typeof arr[i].Esquema != "undefined" && arr[i].Esquema != ``) { codigo += `

`; } else { codigo += ``; } codigo += `

${arr[i].Discussao}

`; codigo += `

`; } } codigo += `

`; return codigo; } else { let codigo = "

Leitura

Paradigma

Descrição

"; for (let i = 0; i < arr.length; i++) { if (typeof arr[i].Leitura != "undefined" && arr[i].Leitura != "") { codigo += `

${arr[i].Leitura}

`; codigo += `

`; if ( typeof arr[i].ParadigmaLink != "undefined" && arr[i].ParadigmaLink != `` ) { codigo += `${arr[i].Paradigma}`; } codigo += `

`; codigo += `

${arr[i].Discussao}

`; codigo += `

`; } } codigo += `

`; return codigo; } }3a:T89b,tudoPictorico = function (arr, form) { if (typeof form == "undefined" || form == "") { let codigo = "

Linguagem

Paradigma

Descrição

"; for (let i = 0; i < arr.length; i++) { if (typeof arr[i].Linguagens != "undefined" && arr[i].Linguagens != "") { codigo += `

${arr[i].Linguagens.replace( /\,/gi, "
" )}

`; if ( typeof arr[i].ParadigmaLink != "undefined" && arr[i].ParadigmaLink != `` ) { codigo += `

${arr[i].Paradigma}`; } else { codigo += `${arr[i].Paradigma}`; } codigo += `

${arr[i].Discussao}

`; codigo += `

`; } } codigo += `

`; return codigo; } else { let codigo = "

Linguagem

Paradigma

Descrição

"; for (let i = 0; i < arr.length; i++) { if (typeof arr[i].Linguagens != "undefined" && arr[i].Linguagens != "") { codigo += `

${arr[i].Linguagens}

`; if ( typeof arr[i].ParadigmaLink != "undefined" && arr[i].ParadigmaLink != `` ) { codigo += `${arr[i].Paradigma}`; } codigo += `

${arr[i].Discussao}

`; codigo += `

`; } } codigo += `

`; return codigo; } }3b:T6c9,timeline = function (oldarr, tipologia) { let arr = []; arr = alphabetic(oldarr, "ano"); let html = ""; let htmlfinal = ""; html = "

"; htmlfinal = ""; let qualano = ""; let anoatual = ""; let quantosblocos = 1; for (let k = 0; k < arr.length; k++) { anoatual = arr[k].ano; quantosblocos = 1; for (let s = k; s < arr.length; s++) { if (s < arr.length - 1) { if (arr[s + 1].ano == anoatual) { quantosblocos++; } } } if (anoatual != qualano) { html += `

${arr[k].ano}

`; } qualano = anoatual; html += `

${ arr[k].nome }
${arr[k].plataforma.replace(",", "
")}

`; html += `

`; html += ``; if ( typeof arr[k].prefimage != "undefined" && arr[k].prefimage != "" && arr[k].prefimage != null ) { html += `

`; } else { html += `

`; } html += ``; html += `

${arr[k].linguagem.replace( ",", "
" )}

`; } html += "

"; htmlfinal = html; return htmlfinal; }3c:[] 2e:{"title":"Linguagens gráficas em artefatos de alta interação","cells":[{"id":0,"value":"# Linguagens gráficas em artefatos de alta interação\n### VISSE - Laboratório de Visualização e Sentidos do Nordeste","pinned":false,"hidden":false,"mode":"md"},{"id":1818,"value":"
\n
","pinned":false,"hidden":false,"mode":"md"},{"id":1834,"value":"## Resumos","pinned":false,"hidden":false,"mode":"md"},{"id":1820,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1838,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1844,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1836,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":1601,"value":"## O conceito de alta interação comportamental","pinned":false,"hidden":false,"mode":"md"},{"id":1087,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1603,"value":"## Os artefatos de alta interação na perspectiva da linguagem gráfica (e não da sua engenharia)","pinned":false,"hidden":false,"mode":"md"},{"id":1605,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1622,"value":"## Artefatos mapeados","pinned":false,"hidden":false,"mode":"md"},{"id":1094,"value":"contexto = md`Ferramenta de pesquisa elaborada para explorar o mapeamento da questão da linguagem na interação. O conjunto de artefatos apresentados abaixo, filtrados a partir de aspectos e características informadas no campo de busca, registram dimensões específicas da linguagem **gráfica** dentro de um contexto de **alta interação**. Representam um esforço na compreensão de um lexo ou gramática gráfico-interativa específica aos jogos ou narrativas digitais.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"viewof filtros = Inputs.text({\n placeholder: \"Ex:1990 - 2010, VGA, desde 1982, até 2000, etc.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1173,"value":"#### Categorias","pinned":false,"hidden":false,"mode":"md"},{"id":1069,"value":"navexemplos = html`${custombuttonsprincipal(\n categorias,\n subcategorias,\n somafiltros(filtros, shadowfiltro)\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2008,"value":"navexemplos2 = html`${newcustombuttonsprincipal(\n categorias,\n subcategorias,\n somafiltros(filtros, shadowfiltro)\n)}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1661,"value":"navindustrias = html`${custombuttonsprincipalnotudo(\n catindustria,\n subcatindustria,\n somafiltros(filtros, shadowfiltro)\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1740,"value":"#### Indústria de Games","pinned":false,"hidden":false,"mode":"md"},{"id":1668,"value":"navindustriasprincipal = html`${custombuttonsprincipal(\n catindustria,\n subcatindustria,\n somafiltros(filtros, shadowfiltro)\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1180,"value":"#### Leituras","pinned":false,"hidden":false,"mode":"md"},{"id":1145,"value":"navenquadramentos = html`${custombuttonssecundario(\n leituras,\n subleituras,\n somafiltros(filtros, shadowfiltro)\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1182,"value":"#### Marcações","pinned":false,"hidden":false,"mode":"md"},{"id":1169,"value":"navreferencias = html`${custombuttonsnotudo(fullrefs)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"#### Transformações nas linguagens (artefatos selecionados)","pinned":false,"hidden":false,"mode":"md"},{"id":1397,"value":"navseries = html`${seriesbuttons(series)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1738,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":1704,"value":"extras = html`${apresentatopicos(topicosespeciais, matselect)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":944,"value":"stats = md`Exibindo **${\n contaitens(matselect, timequery(filtros)).length\n}** artefatos de **${materiais.length}** catalogados`","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"curadoria = html`${ferramenta_mats(\n matselect,\n timequery(somafiltros(filtros, shadowfiltro)),\n formpicto,\n timelineseries,\n definicoesleitura\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1599,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":1469,"value":"descrevelinguages = html`${descitPictorico(\n definicoespictoricas,\n tiposdelinguagem,\n formpicto\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1548,"value":"descreveleituras = html`${descitLeitura(\n definicoesleitura,\n tiposdeleituras,\n formpicto\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1632,"value":"

\n## Tipologias","pinned":false,"hidden":false,"mode":"md"},{"id":1637,"value":"tabelaleituras = html`${tudoLeitura(definicoesleitura, formpicto)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1651,"value":"tabelapicto = html`${tudoPictorico(definicoespictoricas, formpicto)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"
\n
\n
\n
\n
\n\n------------------\n## Apêndice","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"#### 1. Captura dos dados da planilha","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"##### Função que captura dados do banco","pinned":false,"hidden":false,"mode":"md"},{"id":1073,"value":"import {\n getcsvdata,\n GoogleSheetCsvURL,\n imagefromallsources,\n tags,\n unique,\n alphabetic\n} from \"@ranoya/datat\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"materiais = getcsvdata(\n GoogleSheetCsvURL(\n \"https://docs.google.com/spreadsheets/d/1gACC1VgAs7-9ePtgFiE57spdjjg37INjtAG_6mwptXU/edit#gid=0\"\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1389,"value":"series = getcsvdata(\n GoogleSheetCsvURL(\n \"https://docs.google.com/spreadsheets/d/1gACC1VgAs7-9ePtgFiE57spdjjg37INjtAG_6mwptXU/edit#gid=1835890575\"\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1451,"value":"definicoespictoricas = getcsvdata(\n GoogleSheetCsvURL(\n \"https://docs.google.com/spreadsheets/d/1gACC1VgAs7-9ePtgFiE57spdjjg37INjtAG_6mwptXU/edit#gid=2022461339\"\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1522,"value":"definicoesleitura = getcsvdata(\n GoogleSheetCsvURL(\n \"https://docs.google.com/spreadsheets/d/1gACC1VgAs7-9ePtgFiE57spdjjg37INjtAG_6mwptXU/edit#gid=1253481047\"\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1698,"value":"topicosespeciais = getcsvdata(\n GoogleSheetCsvURL(\n \"https://docs.google.com/spreadsheets/d/1gACC1VgAs7-9ePtgFiE57spdjjg37INjtAG_6mwptXU/edit#gid=1423352540\"\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2015,"value":"matorder = alphabetic(materiais, \"ano\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":898,"value":"viewof matselect = Inputs.search(matorder, {\n label: \"matselect\",\n placeholder: \"Nenhum filtro\",\n query: vazio(filtros + shadowfiltro),\n disabled: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1930,"value":"viewof timelineseries = Inputs.search(series, {\n label: \"timelineseries\",\n placeholder: \"Nenhum filtro\",\n query: vazio(filtros + shadowfiltro),\n disabled: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1879,"value":"testeA = tags(materiais, \"ano\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1881,"value":"outroteste = tags(materiais, \"ano\").map(Number)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1887,"value":"Math.min(...outroteste)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1743,"value":"shadowfiltro:","pinned":false,"hidden":false,"mode":"md"},{"id":1673,"value":"viewof shadowfiltro = Inputs.text({\n placeholder: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1745,"value":"formpicto:","pinned":false,"hidden":false,"mode":"md"},{"id":1747,"value":"viewof formpicto = Inputs.text({\n placeholder: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1680,"value":"somafiltros = function (f1, f2) {\n if (f1 == \"\" && f2 == \"\") {\n return \"\";\n } else {\n return f1 + \" \" + f2;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1534,"value":"tiposdeleituras = limpaarray(unique(matselect, \"leitura\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1568,"value":"tiposdelinguagem = limpaarray(unique(matselect, \"linguagem\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1540,"value":"select = function (arr, crit, arr2) {\n let newarr = [];\n\n for (let k = 0; k < arr2.length; k++) {\n for (let i = 0; i < arr.length; i++) {\n if (arr[i][crit] == arr2[k]) {\n newarr.push(arr[i]);\n }\n }\n }\n\n return newarr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"vazio = function (dado) {\n let resposta = {};\n\n resposta.filtro = timequery(dado).q;\n\n if (dado == \"\") {\n return \"Paradigma\";\n } else {\n return resposta.filtro;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1310,"value":"timequery = function (str) {\n let completa = /(de |from |.{0,1})(\\d{4,4})(-| - | to | até | a )(\\d{4,4})/i;\n let sofim = /(até |til |until |to |trough )(\\d{4,4})/i;\n let soinicio = /(desde |from |since |inici )(\\d{4,4})/i;\n let resultados = {};\n resultados.q = str;\n resultados.inicio = 0;\n resultados.fim = 9999999;\n\n if (\n typeof str.match(completa) != \"undefined\" &&\n str.match(completa) != null\n ) {\n resultados.inicio = parseInt(str.match(completa)[2]);\n resultados.fim = parseInt(str.match(completa)[4]);\n resultados.q = str.replace(completa, \"\");\n }\n\n if (typeof str.match(sofim) != \"undefined\" && str.match(sofim) != null) {\n resultados.fim = parseInt(str.match(sofim)[2]);\n resultados.q = str.replace(sofim, \"\");\n }\n\n if (\n typeof str.match(soinicio) != \"undefined\" &&\n str.match(soinicio) != null\n ) {\n resultados.inicio = parseInt(str.match(soinicio)[2]);\n resultados.q = str.replace(soinicio, \"\");\n }\n\n return resultados;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1062,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"acionasearch = function (nome) {\n set(viewof filtros, nome);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1153,"value":"limpaarray = function (arr) {\n let newarr = [];\n for (let i = 0; i < arr.length; i++) {\n if (typeof arr[i] != \"undefined\" && arr[i] != \"\") {\n newarr.push(arr[i]);\n }\n }\n\n return newarr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1111,"value":"subacionasearch = function (nome) {\n set(viewof filtros, viewof filtros.value + \" \" + nome);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1403,"value":"custombuttonsprincipal = function (arr, arr2, filt) {\n let button = [];\n\n button[0] = html`

Tudo

`;\n button[0].onclick = function () {\n acionasearch(\"\");\n };\n\n if (filt == \"Paradigma\" || filt == \"\") {\n for (let i = 0; i < arr.length; i++) {\n button[i + 1] = html`

${arr[i]}

`;\n\n button[i + 1].onclick = function () {\n acionasearch(arr[i]);\n };\n }\n } else {\n for (let i = 0; i < arr2.length; i++) {\n button[i + 1] = html`

${arr2[i]}

`;\n\n button[i + 1].onclick = function () {\n subacionasearch(arr2[i]);\n };\n }\n }\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2005,"value":"newcustombuttonsprincipal = function (arr, arr2, filt) {\n let button = [];\n\n if (filt == \"Paradigma\" || filt == \"\") {\n for (let i = 0; i < arr.length; i++) {\n button[i] = html`

${arr[i]}

`;\n\n button[i].onclick = function () {\n acionasearch(arr[i]);\n };\n }\n } else {\n for (let i = 0; i < arr2.length; i++) {\n button[i] = html`

${arr2[i]}

`;\n\n button[i].onclick = function () {\n subacionasearch(arr2[i]);\n };\n }\n }\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1664,"value":"custombuttonsprincipalnotudo = function (arr, arr2, filt) {\n let button = [];\n\n if (filt == \"Paradigma\" || filt == \"\") {\n for (let i = 0; i < arr.length; i++) {\n button[i] = html`

${arr[i]}

`;\n\n button[i].onclick = function () {\n acionasearch(arr[i]);\n };\n }\n } else {\n for (let i = 0; i < arr2.length; i++) {\n button[i] = html`

${arr2[i]}

`;\n\n button[i].onclick = function () {\n subacionasearch(arr2[i]);\n };\n }\n }\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1428,"value":"custombuttonssecundario = function (arr, arr2, filt) {\n let button = [];\n\n if (filt == \"Paradigma\" || filt == \"\") {\n for (let i = 0; i < arr.length; i++) {\n button[i] = html`

${arr[i]}

`;\n\n button[i].onclick = function () {\n subacionasearch(arr[i]);\n };\n }\n } else {\n for (let i = 0; i < arr2.length; i++) {\n button[i] = html`

${arr2[i]}

`;\n\n button[i].onclick = function () {\n subacionasearch(arr2[i]);\n };\n }\n }\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"custombuttons = function (arr) {\n let button = [];\n\n button[0] = html`

Tudo

`;\n button[0].onclick = function () {\n acionasearch(\"\");\n };\n\n for (let i = 0; i < arr.length; i++) {\n button[i + 1] = html`

${arr[i]}

`;\n\n button[i + 1].onclick = function () {\n acionasearch(arr[i]);\n };\n }\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1447,"value":"custombuttonsnotudo = function (arr) {\n let button = [];\n\n for (let i = 0; i < arr.length; i++) {\n button[i] = html`

${arr[i]}

`;\n\n button[i].onclick = function () {\n acionasearch(arr[i]);\n };\n }\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1109,"value":"subcustombuttons = function (arr) {\n let button = [];\n\n for (let i = 0; i < arr.length; i++) {\n button[i] = html`

${arr[i]}

`;\n\n button[i].onclick = function () {\n subacionasearch(arr[i]);\n };\n }\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1394,"value":"seriesbuttons = function (arr) {\n let button = [];\n\n for (let i = 0; i < arr.length; i++) {\n button[i] = html`

${arr[i].conjunto}

`;\n\n button[i].onclick = function () {\n acionasearch(arr[i].chavepesquisa);\n };\n }\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1078,"value":"categorias = limpaarray(tags(materiais, \"linguagem\", \",\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1104,"value":"subcategorias = limpaarray(tags(matselect, \"linguagem\", \",\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1655,"value":"catindustria = limpaarray(tags(materiais, \"industria\", \",\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1658,"value":"subcatindustria = limpaarray(tags(matselect, \"industria\", \",\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1160,"value":"reforiginal = tags(matselect, \"marcação\", \",\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1165,"value":"refs = limpaarray(reforiginal)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1422,"value":"fullrefs = limpaarray(tags(materiais, \"marcação\", \",\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1350,"value":"leituras = limpaarray(tags(materiais, \"leitura\", \",\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1357,"value":"subleituras = limpaarray(tags(matselect, \"leitura\", \",\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"
\n#### 2. Blocos HTML","pinned":false,"hidden":false,"mode":"md"},{"id":225,"value":"$35","pinned":false,"hidden":false,"mode":"html"},{"id":1380,"value":"contaitens = function (arr, tq) {\n let inicio = 0;\n let fim = 99999999;\n let newarr = [];\n\n if (typeof tq != \"undefined\" && tq != null) {\n inicio = tq.inicio;\n fim = tq.fim;\n }\n\n for (let k = 0; k < arr.length; k++) {\n if (arr[k].ano >= inicio && arr[k].ano <= fim) {\n newarr.push(arr[k]);\n }\n }\n\n return newarr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1455,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1525,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1634,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1646,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1693,"value":"conjuntotags = function (arr) {\n let newarr = [];\n\n let tags1 = limpaarray(tags(arr, \"linguagem\", \",\"));\n let tags2 = limpaarray(tags(arr, \"formato\", \",\"));\n let tags3 = limpaarray(tags(arr, \"extras\", \",\"));\n\n for (let i = 0; i < tags1.length; i++) {\n newarr.push(tags1[i]);\n }\n\n for (let a = 0; a < tags2.length; a++) {\n newarr.push(tags2[a]);\n }\n\n for (let w = 0; w < tags3.length; w++) {\n newarr.push(tags3[w]);\n }\n\n return newarr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1702,"value":"apresentatopicos = function (defs, arrmats) {\n let foi = [];\n\n let arr = conjuntotags(arrmats);\n\n for (let d = 0; d < defs.length; d++) {\n for (let i = 0; i < arr.length; i++) {\n let r = new RegExp(defs[d].termoPesquisa, \"gi\");\n if (r.test(arr[i])) {\n foi[d] = true;\n }\n }\n }\n\n let code = \"\";\n\n for (let n = 0; n < foi.length; n++) {\n if (foi[n] == true) {\n code += `

${defs[n].conceito}

${defs[n].discussao}

`;\n }\n }\n\n return code;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1999,"value":"tframe = function (arr, tq) {\n let inicio = 0;\n let fim = 99999999;\n\n let narr = [];\n let c = 0;\n\n if (typeof tq != \"undefined\" && tq != null) {\n inicio = tq.inicio;\n fim = tq.fim;\n }\n for (let k = 0; k < arr.length; k++) {\n if (arr[k].ano >= inicio && arr[k].ano <= fim) {\n narr[c] = arr[k];\n c++;\n }\n }\n\n return narr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1976,"value":"swapforimage = function (i, tabl) {\n let resp = \"\";\n for (let n = 0; n < tabl.length; n++) {\n if (tabl[n].Leitura == i) {\n resp = tabl[n].Esquema;\n }\n }\n\n return resp;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1941,"value":"testeC = alphabetic(matselect, \"ano\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1922,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":1944,"value":"html`${timeline(matselect, definicoesleitura)}`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}