Contexto
Visando exibir informações de notícias dinâmicas e tendo a necessidade de posicioná-las na grade de veiculação (playlist), disponibilizamos essa documentação para demonstrar de forma prática como construir esse template.
Objetivo
Criar um template responsivo que se ajuste nas dimensões do player, e que proporcione carregar as informações de textos e imagens a partir de uma pasta local, disponível na pasta do projeto do player.
Requisitos
- Editor de texto instalado. Recomendamos o Sublime Text.
- Conhecimento em JavaScript/HTML5 e CSS.
- Uma conta do 4YouSee Designer
Construído o template
Acesse a conta do 4YouSee Designer e importe os arquivos de imagens e vídeos necessários para a construção do template, crie os campos de texto, posicione as imagens, etc... Aplique as animações nos elementos, cor de fonte, tipo de fonte, etc...
Crie as variáveis para os campos de texto e imagem. Lembramos que as variáveis devem ser definidas para todos os campos de textos que serão preenchidos dinamicamente. Para maiores informações, acesse Como criar templates RSS com 4YouSee Designer
Exemplo:
Definindo o campo para a imagem.
Definindo o campo para os textos.
Após criar o template devemos exportar o arquivo.
O Diagrama abaixo mostra a estrutura dos arquivos do template a partir do arquivo .zip
Diagrama estrutural do arquivo de template
Customizando o template
Para realizar a customização do template é necessário utilizar os seguintes arquivos.
index.html
player_html.js
fetchData.js
Os arquivos index.html e player_html.js são gerados automaticamente pelo designer e estarão dentro da pasta_do_projeto/js. O arquivo fetchData.js mais os outros arquivos e pastas necessários para customização do template vão estar anexados ao final deste documento.
No final do arquivo index.html devem ser adicionadas as seguintes linhas de código:
<script type="text/javascript" src="59f88c15f948e7c14a000c38/js/fetchData.js"></script>
<script type="text/javascript" src="59f88c15f948e7c14a000c38/js/x2js/xml2json.min.js"></script>
<script type="text/javascript" src="59f88c15f948e7c14a000c38/js/textFit-master/textFit.min.js"></script>
<script type="text/javascript" src="59f88c15f948e7c14a000c38/js/jquery/dist/jquery.min.js"></script>
A linha referente ao arquivo fetchData deve ser inserida antes da linha referente ao arquivo player_html.
O arquivo player_html.js é responsável pelo tratamento dos objetos que compõem o template, como formatação de data, hora, previsão do tempo, variáveis, loops, animações, controles de vídeos, etc...
O arquivo fetchData.js é responsável por ler e tratar as informações do XML local. Neste arquivo devem ser realizados os tratamentos para leitura das variáveis, imagens, tratamento de como as variáveis serão salvas e recuperadas do local storage, etc...
Exemplo do arquivo: fetchData.js
Ao ser executado pelo arquivo player_htm.html, a função fetchData irá retornar um objeto com as informações a serem exibidas no template, ou irá retornar um erro. Este retorno é feito pela função de callback, que se encarrega de retornar os devidos dados para o template. Por padrão, o primeiro tipo de dado a ser retornado por uma função de callback, é o parâmetro de erro, informando qual o erro aconteceu. Caso não tenha ocorrido nenhum erro, o primeiro parâmetro a ser fornecido deverá ter o valor null, e o segundo parâmetro devera ser o objeto com todas as informações que deverão ser exibidas no template.
Para maiores informações entrar em contato com a equipe de suporte 4yousee: suporte@4yousee.com.br