Pré-Requisitos
- Para criar templates em HTML5 será necessário um editor de texto para leitura de códigos.
Sugerimos os programas SublimeText, Notepad++ ou VSCode. 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++
Baixe aqui o VSCode
- Segue link de instalação destes programas:
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>
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; }
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:
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%;
}
O exemplo da imagem abaixo é com o elemento .foto{...};
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>
- 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>
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.htmla seguinte linha:
?imgVar=http://...caminho do arquivo .../imagem.jpg&produto=Demonstracao&texto=Demonstracao&preco=400,00O endereço completo vai ficar desta forma:
file:///C:/endereço_sua_maquina/index.html?imgVar=https://st3.depositphotos.com/13349494/17802/i/450/depositphotos_178023654-stock-photo-row-red-lipsticks-various-shades.jpg&produto=Nome_produto&descricao=Descricao_produto&preco=400,00
O template utilizado como exemplo no manual pode ser baixado logo abaixo.
Template_Produto