Pré-Requisitos
- Para crear plantillas HTML5, necesitará un editor de texto para leer los códigos.
- Sugerimos los programas SublimeText o Notepad ++. Ambos son editores de texto de código abierto y permiten la instalación en computadoras con Windows o Linux.
- El siguiente es el enlace de instalación para estos programas:
Para instalar Sublime en Linux, ejecute los siguientes comandos en el terminal:
sudo add-apt-repository ppa:webupd8team/sublime-text-2 sudo apt-get update sudo apt-get install sublime-textSe requieren conocimientos básicos de HTML y CSS.
1. Crear el archivo HTML5
El archivo a crear debe guardarse con el nombre index.html
- El archivo debe contener al principio la siguiente información:
<!DOCTYPE html> <html>El archivo debe contener al final la siguiente información:
</html>Como muestra la siguiente pantalla:
La otra información a registrar debe estar entre las etiquetas.
<html> e </html>La siguiente información para ingresar es el encabezado, simbolizado por las etiquetas.
<head> e </head>Dentro de estas etiquetas debe estar la información de estilo de plantilla, que está escrita en lenguaje CSS.
Esta información debe estar separada para cada elemento de la plantilla.
Por ejemplo: definición de imagen de fondo, color y fuente del texto, posición del elemento, etc.
Para obtener más información sobre CSS, le sugerimos que visite esta página: Manual sobre CSS
- El texto dentro de la etiqueta <head> debe comenzar con:
<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; }
Pantalla que ejemplifica el archivo de la siguiente manera:
- Dentro de las etiquetas de estilo debe insertar los elementos de clase, por ejemplo:
<style>
.nomedoelemento { }
</style>
Y dentro de los paréntesis de las clases debe estar la información CSS del elemento.
Por ejemplo: insertemos el logotipo de la fuente en la esquina inferior derecha de la plantilla. Entonces llamaremos a este elemento logotipo. Y el CSS que contiene la posición que siempre debe ser absoluta y la ubicación del elemento en relación con el ancho - width, alto - height, la parte superior de la plantilla izquierda, que se verá así:
.logo { position: absolute; left: 0%; top: 76.625%; width: 20%; height: 23.375%; }
Repita este proceso para todos los elementos.
- La siguiente información para ingresar es el cuerpo, simbolizado por las etiquetas.
<body> e </body>Dentro de estas etiquetas deben estar las clases para cada elemento de la plantilla.
Por ejemplo: el elemento .logo {} insertado previamente debe tener su clase creada especificando la ubicación donde se insertará el logotipo, por ejemplo:
<img class="logo" src="terrateste/logo.jpg" />
Repita este proceso para todos los elementos.
- Finalmente, debe ingresar el código que reconoce las fuentes de noticias, simbolizadas por las etiquetas:
<script> e </script>
- Dentro de estas etiquetas, debe ingresar la siguiente información:
<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>Ejemplo de cómo se verá el archivo index.html después de insertar todos los elementos:
Ahora un ejemplo del archivo index.html abierto por el navegador:
- Si desea probar la plantilla con imagen y texto simulando una noticia, solo agregue en la barra de navegación después de la dirección:
file:///home/usuarios/renata/Área de Trabalho/index.htmlla siguiente linea:
?txtVar=texto%20para%20teste&imgVar=imagem.jpgLa dirección completa se verá así:
file:///home/usuarios/renata/Área de Trabalho/index.html?txtVar=texto%20para%20teste&imgVar=/home/usuarios/renata/Área de Trabalho/imagem.jpgY la plantilla final se verá así:
Para insertar la plantilla HTML5 en 4YouSee Manager, debe crear un archivo comprimido .zip con el archivo index.html recién creado y la carpeta que contiene los elementos necesarios para mostrar la plantilla como: archivos de imagen de logotipo, archivos .js, etc.
Puede descargar esta plantilla de muestra en Anexos.