A criação de templates para conteúdos dinâmicos poderá ser realizado manualmente ou através do 4YouSee Designer. Nesta documentação explicaremos essas duas opções.
Utilizando o 4YouSee Designer
Na criação de templates para Fontes RSS que não utilizam Fontes de dados com captura por algum Perfil de conexão do Manager, você deverá definir a variável da imagem como img_1 e a variável do texto como notice. Conforme o exemplo abaixo:
No modelo acima configuramos um template para exibir notícias do Portal G1. Se a Fonte RSS que será criada utiliza um canal com fontes de dados onde a captura é realizada usando um Perfil de conexão, você poderá criar esses objetos no 4YouSee Designer e definir as variáveis para esses objetos de acordo com o que foi definido na Fonte de dados do Manager. A imagem deve ter a variável com o nome img_1, mesmo que na Fonte de dados do Manager a variável tenha outro nome. Feito isso, basta exportar seu projeto e adicioná-lo como conteúdo dinâmico. Caso tenha dúvidas em como adicionar um arquivo como conteúdo dinâmico, basta seguir a documentação Como adicionar conteúdos dinâmicos?
Utilizando um template criado manualmente
Pré-Requisitos
- Para criar templates em HTML5, será necessário um editor de código para leitura e modificações necessárias. Sugerimos os programas Visual Studio Code, SublimeText ou Notepad++. Ambos são editores de código e permitem a instalação em computadores com sistema operacional Windows ou Linux.
Seguem os links para download e instalação destes programas:
Baixe aqui o Visual Studio Code
- É necessário um conhecimento básico em HTML, CSS e JavaScript.
Criando o arquivo HTML5
O arquivo HTML deverá ser salvo com o nome index.html.
Neste exemplo usaremos um template para exibição de notícias do site terra.com.br, que contém uma imagem e o título das notícias.
Clique aqui para fazer o download do nosso template de exemplo e acompanhar as explicações. Caso já tenha um template em HTML pronto, basta inserir o script disponibilizado mais abaixo.
O arquivo HTML deverá conter em seu início a seguinte informação:
<!DOCTYPE html> <html>E no final deverá conter o fechamento da tag html, com a seguinte informação:
</html>
As demais informações a serem cadastradas deverão estar entre as tags de inicio e fechamento do html.
A próxima informação a ser inserida é o cabeçalho, simbolizado pela tag head.
Dentro desta tag deverão estar as informações de estilo do template, que são escritos na linguagem CSS e ficam dentro da tag style. Estas informações deverão estar separadas para cada elemento do template.
Nesta tag style definimos por exemplo as cores e fontes utilizadas nos textos, tamanhos das imagens, posicionamento dos elementos, etc. Abaixo temos o estilo utilizado no template de exemplo:
Na tag body definimos o corpo do HTML, ou seja, engloba todos os elementos que estarão visíveis ao utilizar o template. No nosso template de exemplo temos um espaço definido para a imagem da notícia, o título, o fundo do título, o texto da notícia, o fundo do texto e a logomarca do site.
E por último inserimos a tag script, onde colocamos o código JavaScript que reconhece os itens da fonte de notícias e insere as informações nas tags definidas.
Neste script, depois dos tratamentos realizados, a função loadData é a responsável por adicionar os itens no corpo do HTML. No exemplo utilizado, a função adicionará o caminho da imagem no elemento com o Id chamado imagem (conforme definido na tag img dentro do body no HTML). Essa função também adicionará o texto da notícia no elemento com Id chamado texto.
Caso você possua outras variáveis configuradas no Manager e também deseja inserir no template, as mesmas chegarão através da variável chamada variables, está dentro da função loadData. Como variables é um objeto, utilize variables.oNomeDaVariavel para ter acesso à variável cadastrada na Fonte de dados do Manager. Por exemplo, variables.descricao.
Atenção, para inserir o template HTML5 no 4YouSee Manager, deve-se compactar (utilizando a extensão .zip) o arquivo index.html e a pasta que contém os itens necessários para exibição do template, como arquivos de imagem, logomarca, etc. Caso tenha dúvidas em como adicionar um arquivo como conteúdo dinâmico, basta seguir a documentação Como adicionar conteúdos dinâmicos?