Pre requirements
- To create HTML5 templates, you will need a text editor to manage better the codes.
- We suggest SublimeText or Notepad ++ programs. Both are open source text editors and allow installation on Windows or Linux computers.
- The following is the installation link for these programs::
To install Sublime on Linux, run the following commands in terminal:
sudo add-apt-repository ppa:webupd8team/sublime-text-2 sudo apt-get update sudo apt-get install sublime-text- Basic knowledge of HTML and CSS is required.
1. Create the HTML5 file
The file to create must be saved with the name index.html
- The file should initially contain the following information:
<!DOCTYPE html> <html>
</html>
As shown in the following image
Inside the tags.
<html> </html>La sigadd the following tags.
<head> e </head>Inside these tags (<head>here!</head>) should be the template style information, which is written in CSS language. This information must be separate for each element of the template. For example: definition of background image, text color and font, element position, etc. For more information on CSS, we suggest you visit this page: CSS Documentation
- Inside the tag add the following:
<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; }
So far our index.html file should look like this:
- Inside the style labels you must insert the class elements, for example:
<style>
.nameofthelement { }
</style>
And within the parentheses of the classes must be the CSS information of the element.
For example: Let's insert the font of the logo in the lower right corner of the template. Then we will call this logo element. And the CSS that contains the position that should always be absolute and the location of the element in relation to the width and height, the top of the left template, which will look like this::
.logo { position: absolute; left: 0%; top: 76.625%; width: 20%; height: 23.375%; }
Repeat this process for all items..
- The next information to enter is the body, symbolized by the labels.
<body> and </body>Within these labels must be the classes for each element of the template. For example: the .logo {} element inserted previously must have its class created specifying the location where the logo will be inserted, for example:
<img class="logo" src="terrateste/logo.jpg" />
Repeat this process for all items..
- Finally, you must enter the code that recognizes the news sources, symbolized by the labels:
<script> e </script>
- Within these labels, you must enter the following information:
<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>Example of what the index.html file will look like after inserting all the elements::
Now an example of the index.html file opened by the browser::
- If you want to test the template with image and text simulating a news, just add in the navigation bar after the address:
file:///C:/Users/Samsung/Desktop/index.htmlThe following line:
?txtVar=texto%20para%20teste&imgVar=imagem.jpgThe full address will look like this::
file:///home/usuarios/renata/Área de Trabalho/index.html?txtVar=texto%20para%20teste&imgVar=/home/usuarios/renata/Área de Trabalho/imagem.jpgAnd the final template will look like this::
To insert the HTML5 template into 4YouSee Manager, you need to create a compressed .zip file with the newly created index.html file and the folder containing the necessary items to display the template as: logo image files, .js files etc.
You can download the attached example file.