Eu consigo criar meus próprios templates em HTML5 ?

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:

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>

Como demonstra a tela abaixo:

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; }

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:

2.png

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{};

3.png

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" />

4.png

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:

5.png

Agora um exemplo do arquivo index.html aberto pelo navegador:

6.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/renata/Área de Trabalho/index.html

a seguinte linha:

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

o 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.jpg

E o template final ficará da seguinte forma:

7.png

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...

Para realizar o download deste template de exemplo Clique aqui...

Ainda com dúvidas? Abrir chamado de suporte

Comentários

Powered by Zendesk