Como criar templates em HTML5?
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:
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>
Como demonstra a tela abaixo:
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; }
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:
Dentro das tags de estilo deve-se inserir os elementos de classes, exemplo:
<style>
.nomedoelemento { }
</style>
E dentro dos parênteses das classes 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 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 correta. Exemplo da tela com o elemento .logo{};
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 .logo{} inserido anteriormente deve ter sua classe criada especificando o local onde a logomarca será inserida, exemplo:
<img class="logo" src="terrateste/logo.jpg" />
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 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 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>Exemplo de como o arquivo index.html vai ficar após inserir todos os elementos:
Agora um exemplo do arquivo index.html aberto pelo navegador:
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/renata/Área de Trabalho/index.htmla seguinte linha:
?txtVar=texto%20para%20teste&imgVar=imagem.jpgo endereço completo vai ficar desta forma:
file:///home/usuarios/renata/Área de Trabalho/index.html?txtVar=texto%20para%20teste&imgVar=/home/usuarios/renata/Área de Trabalho/imagem.jpgE o template final ficará da seguinte forma:
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 como: arquivos de imagem logo, arquivos .js etc...
Faça download do arquivo do template abaixo.