Como criar templates em HTML5 para Fonte de Dados ou inserção manual de notícias

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 são editores de texto de código aberto e permitem a 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

É necessário conhecimento básico em HTML e CSS.

 

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>

Manualhtml5_1.png

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, 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%;
margin: 0px;
padding: 0px;
overflow: hidden; }
Atenção: 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:

Manualhtml5_2.png

Dentro das tags de estilo deve-se inserir os elementos de classes, exemplo: 

<style>

.nomedoelemento { }

</style>

E dentro dos parenteses das classes devem estar as informações em CSS do elemento.

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

 .foto {
position: absolute;
width: 48.3%;
height: 64%;
background-image: none;
background-color: rgb(0, 0, 0);
left: 3%;
top: 21%;
}
Atenção: Para visualizar como os elementos estão sendo posicionados na tela, deve-se abrir o arquivo index.html no navegador e ir testando até achar a porcentagem da posição desejada.

O exemplo da imagem abaixo é com o elemento .foto{...};

Foto_01.png

Atenção: Deve-se repetir este processo para todos os elementos.

A próxima informação a ser inserida é o corpo, simbolizado pelas tags

<body> e </body>

Dentro destas tags deverão estar as classes para cada elemento do template.

Por exemplo: O elemento .foto{...} inserido anteriormente deve ter sua classe criada especificando o local onde a foto será inserida, exemplo:

 <body class="body-class">
<div class="container" id="container">

<img class="fundo" src="...caminho da imagem.../fundo.png" />
<img class="foto" id="imgVar" />

<span class="txtProduto" id = "produto" ></span>
<span class="txtDescricao" id = "descricao"></span>
<span class="txtPreco" id = "preco" ></span>
<span class="mensagem" id = "mensagem" ></span>

</div>
</body>

body_02.png

Atenção: Deve-se repetir este processo para todos os elementos.
Neste exemplo de template é possível inserir;
  • dentro das tags <style> e </style> quantos elementos de classes forem necessários:
  • dentro das tags <body> e </body> quantas classes para cada elemento do template forem necessários.

Exemplo de um elemento de classe;

 .foto {
position: absolute;
width: 48.3%;
height: 64%;
background-image: none;
background-color: rgb(0, 0, 0);
left: 3%;
top: 21%;
}

Exemplos de classes para cada elemento do template;

<img class="foto" id="imgVar" />

<span class="mensagem" id = "mensagem" ></span>

 

Por último, deve-se inserir o código que reconhece os itens da fonte de notícias, simbolizado pelas tags:

<script> e </script>

Dentro destas tags, 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 params = window.location.search.split("+").join("%20");

var options = parseQueryString(params);


if (options.imgVar) {
document.getElementById('imgVar').src=options.imgVar;
}

console.log(options);
if (options.txtVar) {

var options = parseQueryString(decodeURIComponent(decodeURIComponent(options.txtVar)));
console.log(options);

}

for(var key in options){
var element = document.getElementById(key);

if (element) {

if(element.tagName.toLowerCase() == "img"){
element.src = options[key];
} else {
element.innerHTML = options[key].replace("+", " ");
}
}
}

</script>

script_03.png

Se quiser testar o template com imagem e texto simulando uma notícia, basta acrescentar na barra de navegação após o endereço:

file:///home/usuarios/... caminho do arquivo .../index.html

a seguinte linha:

?imgVar=http://...caminho do arquivo .../imagem.jpg&produto=Demonstracao&texto=Demonstracao&preco=400,00

O endereço completo vai ficar desta forma:

file:///C:/Users/4YouSee/Desktop/Nova%20pasta/index.html?imgVar=C:\Users\4YouSee\Pictures\produto.jpg&produto=Demonstracao&descricao=Demonstracao&preco=400,00

demonstracao.png

O template utilizado como exemplo no manual pode ser baixado logo abaixo.

Template_Produto

Ainda com dúvidas? Abrir chamado de suporte

Comentários

Powered by Zendesk