Introdução aos conteúdos interativos

Este documento tem o objetivo de instruir desenvolvedores na construção de conteúdos interativos a serem exibidos pelo 4YouSee Player, consequentemente demandam um conhecimento em programação.

Introdução

Os conteúdos interativos são templates construídos em HTML5, JavaScript e CSS, que permitem a interação dos usuários e a geração de informação sobre estas interações. Botões de reação, enquetes e formulários de avaliação são exemplos destes conteúdos.

O processo para a produção de material deste tipo é simples: através do 4YouSee Designer todo o layout, com elementos e animações, pode ser criado rapidamente utilizando uma interface gráfica e então ser exportado para HTML5, JavaScript e CSS. Com o código exportado, basta adicionar algumas poucas linhas de código JavaScript para permitir a interatividade com o conteúdo.

Adicionando Interações

Para adicionar interações aos objetos, deve-se:

  1. Nomear no 4YouSee Designer o objeto que permitirá a interação;

Designer.png 2. Exportar o conteúdo e extrair o arquivo zip;

     3. No conteúdo extraído, abra com um editor de código o arquivo designer_events.js localizado dentro da pasta jsLocalize na linha 2 a variável _eventsPerObject. As interações devem ser adicionadas nesta variável, conforme o formato abaixo:

var _eventsPerObject = {
nome_objeto: {
click: function() {
// Código a ser executado ao clicar no objeto "nome_objeto"
}
}
};

Exemplo

Neste exemplo criaremos um conteúdo que exibe uma promoção e botões de reação. Cada botão, ao ser clicado, envia uma requisição para um webservice.

  1. Crie um novo projeto no 4YouSee Designer;
  2. Selecione um dos modelos de cenas já existentes;
  3. Adicione 3 botões de reação denominados "like", "love" e "dislike";
  4. Salve e exporte o projeto;
  5. Faça a extração do arquivo zip;
  6. Edite o arquivo o arquivo designer_events.js localizado dentro da pasta js e adicione as duas funções a seguir. Elas serão responsáveis por requisitar a persistência dos dados da interação (nome do botão e data/hora da interação) no webservice, e em seguida exibir uma mensagem de sucesso para o usuário;
  7. Altere a variável _eventsPerObject da seguinte forma:
    var _eventsPerObject = {
    like: {
    click: function() {
    postRequest('like');
    }
    },
    love: {
    click: function() {
    postRequest('love');
    }
    },
    dislike: {
    click: function() {
    postRequest('dislike');
    }
    }
    };
  8. Altere também a variável postRequest da seguinte forma:
    var postRequest = function(btnName) {
    var dateTime = new Date().toISOString()

    fetch('http://Endereço_da_API/reacoes', {
    method: 'POST',
    headers: {'Content-Type':'application/x-www-form-urlencoded'},
    body: `btnName=${btnName}&dateTime=${dateTime}`

    }).then(function(response) {
    if (response.ok) {
    showSuccessMessage(btnName);
    }
    }).catch(function(error) {
    throw Error("Fetch error. " + error.message);
    });
    };

    var showSuccessMessage = function (btnName) {
    alert(`Obrigado por participar!\nVocê clicou no botão "${btnName}".`);
    };

Agora basta salvar as alterações. Seu template já está pronto para ser utilizado.

 

Nesta documentação aprendemos a criar um conteúdo interativo simples. Através do 4YouSee Designer e da adição de código JavaScript, podemos obter informações dos mais diversos tipos através dos conteúdos e aprimorar ainda mais seus conteúdos digitais!

Dúvidas? Entre em contato com o suporte pelo e-mail suporte@4yousee.com.br

Isso foi útil para você? Sim Não

Enviar feedback
Desculpe-nos por não podermos ajudar. Ajude-nos a melhorar este artigo com seu feedback.