É possível personalizar os templates de notícias HTML5?

Sim, todos os templates disponibilizados podem ser modificados para o layout desejado, exceto os templates UOL e Terra.

Plataforma Android

Procedimentos para criação de templates em HTML5 para notícias (Fontes RSS)

Pré-Requisitos

Para criar templates em HTML5 será necessário um editor de texto para leitura de códigos.
Sugerimos os programas SublimeText ou o Notepad++. Ambos permitem instalação em computadores com sistema operacional Windows ou Linux.
Segue link de instalação destes programas:

Baixe aqui o SublimeText

Baixe aqui o Notepad++

 Para instalar o Sublime no Linux execute os seguintes comandos no terminal:

sudo add-apt-repository ppa:webupd8team/sublime-text-2
sudo apt-get update
sudo apt-get install sublime-text

Criando o arquivo HTML5

O arquivo a ser criado deverá ser salvo com o nome index.html
O arquivo deverá conter em seu início a seguinte informação:

<!DOCTYPE html>
<html>

O arquivo deverá conter em seu final a seguinte informação:

</html>

Segue tela que exemplifica o arquivo desta forma:

fig_08_ronaldo

As demais informações a serem cadastradas deverão estar entre as tags <html> e </html>

A próxima informação a ser inserida é o cabeçalho, simbolizado pela tags <head> e </head>
Dentro destas tags deverão estar as informações de estilo do template, que são escritos na linguagem CSS
Estas informações deverão estar separadas para cada elemento do template

Por exemplo: definição de imagem de fundo, de cor e fonte de textos, posição dos elementos, etc

Para maiores informações sobre CSS, sugerimos que acessem a página: Manual sobre CSS
O texto dentro da tag <head> deve começar com:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}

Obs.: Esta informação define, entre outras coisas, que o template ocupará toda a largura (width) e toda a altura (height). Todas as medidas a serem cadastradas no arquivo de html5 deverão estar em formato de porcentagem (%). Desta forma, o template será redimensionamento automaticamente, sem perda de qualidade, ao ser exibido em monitores com diferentes resoluções.

Segue tela que exemplifica o arquivo desta forma:

fig_09_ronaldo

Dentro da tag <style> </style> acima citada, deve-se inserir os elementos nomeando-os com ".nomedoelemento { }". Dentro dos parênteses devem estar as informações em CSS do elemento.

Por exemplo: Vamos inserir a logomarca da fonte no canto inferior direito do template. Assim, iremos chamar este elemento de "logo". E o CSS contendo a posição que sempre deve ser absoluta e a localização do elemento em relação a largura (width), altura (height), parte superior do template (top) e lateral esquerda do template (left), que ficará da seguinte forma:

.logo {
position: absolute;
left: 0%;
top: 76.625%;
width: 20%;
height: 23.375%;
}

Obs.: Para encontrar o valor da porcentagem, deve-se colocar para exibir o arquivo no navegador e ir testando até achar a posição correta. A classe de cada campo já deve estar criada, conforme instruções abaixo.

Segue tela que exemplifica o arquivo desta forma:

fig_10_ronaldo

Deve-se repetir este processo para todos os elementos.

A próxima informação a ser inserida é o corpo, simbolizado pela tags <body> e </body>
Dentro destas tags deverão estar as classes para cada elemento do template

Por exemplo: O elemento logo inserido anteriormente deve ter sua classe criada especificando o local onde a logomarca se encontra, como exemplificado abaixo.

<img class="logo" src="terrateste/logo.jpg" />

Obs.: As classes definidas por último tem prioridade na exibição, ficando sobre os demais itens. Para testar a exibição das classes, deve-se colocar o arquivo index.html criado para exibir no navegador.

Segue tela que exemplifica o arquivo desta forma:

fig_11_ronaldo

Deve-se repetir este processo para todos os elementos.

Por último, deve-se inserir o código que reconhece os itens da fonte de notícias, simbolizado pela tags <script> e </script>
Dentro da tag <script> </script> acima citada, deve-se inserir a seguinte informação:

<script type="text/javascript">
function parseQueryString (queryString) {
if(typeof(queryString) != 'string'){
return queryString;
}
if(queryString[0] == '?'){
queryString = queryString.substring(1, queryString.length);
}
var params = {}, queries, temp, i, l;
queries = queryString.split('&');
for ( i = 0, l = queries.length; i < l; i++ ) {
temp = queries[i].split('=');
params[temp[0]] = temp[1];
}
return params;
}
var options = parseQueryString(decodeURIComponent(window.location.search));
if (options.imgVar) {
document.getElementById('imgVar').src=options.imgVar;
}
if (options.txtVar) {
document.getElementById('texto').innerHTML = options.txtVar;
}
</script>

Segue tela que exemplifica o arquivo desta forma, contemplando todos os elementos:

fig_12_ronaldo

O template final ficará da seguinte forma:

fig_13_ronaldo

Se quiser testar o template com a imagem e texto da notícia basta acrescentar no final do endereço atual de teste do template:

?txtVar=texto%20para%20teste&imgVar=imagem.jpg

Por exemplo o endereço do template é:

file:///home/usuarios/renata/Área de Trabalho/index.html

Para testá-lo com imagem e texto usaremos o endereço:

file:///home/usuarios/renata/Área de Trabalho/index.html?txtVar=texto%20para%20teste&imgVar=/home/usuarios/renata/Área de Trabalho/imagem.jpg

Assim, o template final ficará da seguinte forma:

fig_14_ronaldo

Para inserir o template HTML5 no 4YouSee Manager deve-se criar um arquivo zipado (.zip) com o arquivo index.html recém-criado e a pasta que contém os itens necessários para exibição do template.

Faça o download aqui deste template de exemplo.

Plataformas Windows e Linux

Procedimentos para criação de templates SWF

O Software 4YouSee permite que se cadastre um template em formato SWF para ser usado como palco para preenchimento automático de texto e imagem, obtidos através de fontes RSS.

O arquivo SWF deve ser gerado a partir de um arquivo FLASH contendo as seguintes especificações:

Deve ter um campo de texto dinâmico, de instância chamada txtRSS;
Deve ter um movieclip de instância chamada imgRSS.

Campo de Texto Dinâmico txtRSS

Pode ter qualquer tamanho.
Será preenchido com o texto alocado para a notícia.

MovieClip imgRSS

Pode ter qualquer tamanho. Crie um retângulo delimitando a área reservada para a imagem.
Será preenchido com a imagem alocada para notícia, se houver imagem.
A imagem irá ocupar seu tamanho original redimensionada e centralizada de acordo com o movie clip imgRSS, limitada apenas ao tamanho do palco do template (arquivo swf do qual estamos falando neste texto). Isso significa que se for necessário fazer algum redimensionamento nessa imagem, fica a cargo do criador do template.
A imagem será inserida no ponto de referência do MovieClip ( quina superior esquerda ).

Regras de Funcionamento

As instâncias imgRSS e txtRSS deverão ser criadas no primeiro frame do arquivo de template
Qualquer animação ou script no template são permitidos. Isso significa que é possível, por exemplo, colocar animação no texto e algum efeito na imagem. Alerta-se no entanto para o fato de que um script maldoso ou mal escrito pode comprometer o funcionamento do player, ocasionando lentidão ou, dependendo do caso, até mesmo interrupção do funcionamento.
A resolução do template deve ser compatível com a resolução da tela onde será utilizado. No ambiente de gestão do 4YouSee, será possível relacionar as fontes de RSS (e consequentemente os templates ) aos players.
Atualmente a cor de fundo padrão do palco original do player é branca. No entanto, recomenda-se não produzir templates contando com o fundo branco do palco principal. Sugere-se portanto que as cores de fundo esperadas no template sejam colocadas no próprio arquivo. Deve-se criar um Shape a partir de qualquer ferramenta de desenho (Retângulo, Circulos, etc) preenchido com a cor escolhida para background.

Tutorial em Flash CS5 (inglês)

Para executar o tutorial a seguir, é necessário ter um conhecimento básico em Adobe Flash.

1. Crie um novo documento no Flash com a dimensão: 848x480 px
Escolha uma cor para o fundo de sua preferência. Mas cuidado, para isso não utilize a cor de fundo do palco, pois ela ficará transparente ao rodar no sistema. Utilize a ferramenta Rectangle Tool (R) e crie um retângulo do tamanho do palco (848x480px) com a cor desejada. Veja figura abaixo:

fig_15_ronaldo

2- Crie um campo dinâmico de texto para receber o conteúdo da notícia.
Para isso, selecione a ferramenta Text Tool (T) e faça a marcação do campo com o tamanho desejado. Veja figura abaixo:

fig_16_ronaldo

Com a ferramenta de texto selecionada, clique e arraste para criar a área de texto.
Na aba de propriedade, com o campo de texto selecionado, marque a opção Dynamic Text e atribua o nome txtRSS à instância do objeto (instance name), como mostra a figura abaixo:

fig_17_ronaldo

Agora, na mesma aba, atribua o comportamento (Behavior) multilinha (Multiline) ao campo de texto.

fig_18_tonaldo

3- Vamos agora colocar o MovieClip que exibirá a imagem da notícia.
Para isso, clique em Inserir (Insert) e selecione Novo símbolo (New symbol).

fig_19_ronaldo

Em seguida dê um nome à esse MovieClip.

fig_20_ronaldo

Abra sua biblioteca (Library), selecione seu novo MovieClip e arraste-o para o palco. Dentro do MovieClip, faça o retângulo delimitando a área de imagem.

fig_21_ronaldo

Com o MovieClip selecionado no palco, atribua o nome imgRSS à sua instância (instance name).

fig_22_ronaldo

4 - Finalizando
Distribua os elementos a seu gosto e crie um layout com sua “cara”.

fig_23_ronaldo

Ainda com dúvidas? Abrir chamado de suporte

Comentários

Powered by Zendesk