Pre-Requisitos
- Para crear templates en HTML5 será necesario un editor de texto para lectura de código.
- Sugerimos programas como SublimeText o Notepad++. Ambos son editores de texto de código aberto y permiten la instalación en computadores con sistema operativo Windows o Linux.
- Los links de descargas para windows son los siguientes:
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-textPara continuar con la creación de templates se recomienda un conocimento básico en HTML y CSS.
Crear un archivo HTML5
El archivo a ser creado deberá ser guardado como el nombre index.html
El archivo deberá contar en su inicio con la siguiente información:
<!DOCTYPE html> <html>Y el archivo mismo deberá tener en su final la siguiente información:
</html>
El resto de información que será ingresada al código deberá estar dentro de los tags:
<html> e </html>Para continuar, debemos establecer el encabezado de nuestro código a través del tag head de esta forma:
<head> e </head>Dentro de estos tags deberá estar la informacion del estilo del template que deberá ser escrito en lenguaje CSS.
Esta información deberá estar separada para cada elemento del template
Por ejemplo: definición de imagen de fondo, color y fuente de textos, posición de los elementos, etc.
Para mayor información sobre CSS, sugerimos que acceda al Manual sobre CSS
El texto dentro del tag <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; }
Todas las medidas que se registrarán en el archivo HTML5 deberán estar en porcentaje (%), de esta forma, el template se redimensionará automáticamente, sin perder la calidad al ser exhibido en monitores con diferentes resoluciones.
La siguiente imagen ejemplifica el archivo:
Dentro de los tags de estilo se deben colocar los elementos de classes, ejemplo:
<style>
.nomedoelemento { }
</style>
Y dentro de los paréntesis de las clases debe estar la información en CSS del elemento
El ejemplo será agregar una imagen de fuente en el área superior izquierda del template. Llamaremos a este elemento foto. Y el CSS contendrá la posición absoluta que siempre debe llevar la localización del elemento en relación al ancho (width) y alto (height), parte superior del template (top) y lateral izquierda del template (left), para que quede de la siguiente manera:
.foto {
position: absolute;
width: 48.3%;
height: 64%;
background-image: none;
background-color: rgb(0, 0, 0);
left: 3%;
top: 21%;
}
El ejemplo de la imagen de abajo se hizo con el elemento .foto{...};
A continuación la información a agregar es el cuerpo del código, simbolizado por los 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="fondo" src="...direccion de la imagen.../fondo.png" />
<img class="foto" id="imgVar" />
<span class="txtProducto" id = "producto" ></span>
<span class="txtDescripcion" id = "descripcion"></span>
<span class="txtPrecio" id = "precio" ></span>
<span class="mensaje" id = "mensaje" ></span>
</div>
</body>
En este ejemplo de template usted puede agregar:
- Dentro de los tags <style> y </style> cuantos elementos de clases sean necesarios.
- Dentro de los tags <body> y </body> cuantas clases para cada elemento del template sean necesarias.
Ejemplo de un elemento de clase;
.foto {
position: absolute;
width: 48.3%;
height: 64%;
background-image: none;
background-color: rgb(0, 0, 0);
left: 3%;
top: 21%;
}
Ejemplos de clases para cada elemento del template;
<img class="foto" id="imgVar" /><span class="mensagem" id = "mensagem" ></span>Por último, se debe colocar el código que reconocerá los items de las fuentes de noticias, simbolizado por los tags:
<script> y </script>Dentro de estos tags, se 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 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>
Si quisiera probar el template con la imagen y el texto simulando una noticia, solo basta modificar en la barra de navegación el URL:
file:///home/usuarios/... direccion del archivo .../index.htmla la siguiente manera:
?imgVar=http://...direccion del archivo .../imagen.jpg&producto=Demostracion&texto=Demostracion&precio=400,00La dirección final quedaría de eta forma:
file:///C:/Users/4YouSee/Desktop/Nueva%20carpeta/index.html?imgVar=C:\Users\4YouSee\Pictures\producto.jpg&producto=Demostracion&descripcion=Demostracion&precio=400,00El template utilizado como ejemplo en este manual puede ser descargado en Anexos.