Hace poco hablamos de como crear y borrar cookies desde el navegador usando Javascript. Ahora pondremos en práctica lo aprendido para permitir que nuestros visitantes personalicen nuestra página web. Esto es solo un sencillo ejemplo de la utilidad que puede tener el acceder a las cookies con Javascript.
Los pasos que vamos a seguir son los siguientes: primero crearemos una sencilla página que nos servirá para comprobar los resultados y le aplicaremos unos estilos de CSS básicos, definiremos que objetos y áreas de la web que serán personalizables y por último usaremos el código del artículo anterior para crear unos scripts vinculados a unos controles que se encarguen de modificar la página.
Paso 1 - Página básica
Crearemos un archivo (por ejemplo index.html) con el siguiente código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>Demo Javascript / Cookies </title>
<meta content="Spanish" name="language" />
</head>
<body>
<div id="header">
<div class="content">
<div id="title">
<h1><a href="#">Demo Javascript / Cookies</a></h1>
</div>
</div>
</div>
<div id="content">
<div class="content">
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam auctor varius nulla, vitae tincidunt metus semper nec.
Ut aliquam lectus ut felis accumsan fringilla quis non
sapien. Aliquam luctus eleifend turpis eget feugiat. Duis
egestas placerat feugiat. Nullam feugiat laoreet purus non
ullamcorper. Proin ornare, magna non imperdiet ullamcorper,
lorem urna dictum orci, quis tempus lorem nulla a lorem.
Maecenas magna felis, ultrices id tempus sit amet, semper
non elit. Phasellus ut arcu a mi fringilla luctus vel nec
turpis. Vestibulum et nisl quis ligula tristique euismod
sit amet et dolor. Pellentesque pretium sodales ante eu
ultrices. Duis aliquet scelerisque faucibus. Nulla
id magna eu turpis feugiat elementum. Vivamus molestie
massa eu est lobortis ornare. Praesent accumsan fringilla
ante, vel bibendum odio rhoncus quis. Nulla velit massa,
consectetur vel interdum vestibulum, eleifend sit
amet diam. In hac habitasse platea dictumst.
</p>
</div>
<div id="sidebar">
<h2>Opciones</h2>
<ul class="navigation">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div id="footer">
<div class="content">
Artículo pertenciente a <a href="http://theproc.es">TheProc.es</a>.
</div>
</div>
</body>
</html>Le vamos a añadir una hoja de estilos para dar a la página un estilo básico. Creamos un archivo main.css y escribimos los siguiente:
/* General */
p{ margin-bottom: 10px; }
h1{
font-size: 1.6em;
font-weight: bold;
line-height: 28px;
}
h2{
font-size: 1.4em;
margin-top: 20px;
}
body{
background: #2C3643;
font-family: Verdana, Arial,sans-serif;
font-size: 14px;
line-height: 22px;
}
.content{
margin: 0 auto;
width:960px;
}
/* header */
#header{
background: #9b0103;
color: #fff;
}
#title{
padding-top: 32px;
padding-bottom: 5px;
}
#title a, #title a:link, #title a:visited {
color:#FFFFFF;
text-decoration:none;
}
/* Content */
#content{
background: #fff;
padding: 20px 0 15px;
}
#content #main{
float:left;
width: 600px;
}
#content #sidebar{
float:right;
width: 320px;
}
#sidebar ul{
clear:both;
padding: 6px 0 20px;
}
#sidebar ul li{
list-style-type: none;
padding: 3px 0 3px 14px;
}
#sidebar a{
color: #9b0103;
text-decoration: none;
}
/* Footer */
#footer{
color: #fff;
padding: 15px 0 70px;
font-size: .8em;
}
#footer a, #footer a:link, #footer a:visited {
color:#9b0103;
font-weight:bold;
text-decoration:underline;
}y por ultimo lo llamamos en la sección head de la página añadiendo lo siguiente:
<link rel="stylesheet" href="main.css" type="text/css" />El resultado del trabajo hasta ahora:
Paso 2 - Definiendo elementos personalizables
Lo elementos que vamos a convertir en personalizable son de 2 tipos:
- Tamaño del texto
- Esquema de colores
El tamaño del texto variará en toda la página, mientras que los colores que queremos personalizar serán el color de fondo del header y el color de los enlaces, como se puede ver en la siguiente imagen:
Paso 3.1 Añadiendo controles de personalización
Vamos a crear dos tipos de controles. Primero añadiremos los controles que nos darán acceso al cambio de tamaño del texto.
Para ello añadimos el siguiente código dentro en el inicio del bloque #sidebar:
<div id="sidebar">
<!-- controles de texto -->
<ul id="size-selector" class="selector">
<li><a class="small" href="#">A-</a></li>
<li class="selected"><a class="medium" href="#">A</a></li>
<li><a class="large" href="#">A+</a></li>
</ul>
.....
</div>Como vemos hemos creado una lista con 3 tipos de tamaño. Marcamos como seleccionado el tamaño medio usando la clase "selected" sobre el elemento de lista. A los enlaces le hemos añadido una clase que usaremos para definir el tipo de tamaño. Lo que pretendemos hacer es que al pinchar en uno de estos enlaces añada la clase del enlace a la clase de la etiqueta body.
Para los controles de color añadiremos justo después del código anterior:
<!-- Controles de color -->
<ul id="color-selector" class="selector">
<li class="selected"><a class="red" href="#">Rojo</a></li>
<li><a class="blue" href="#">Azul</a></li>
<li><a class="orange" href="#">Naranja</a></li>
<li><a class="green" href="#">Verde</a></li>
</ul>Terminamos con un poco de CSS:
ul.selector li{
float:left;
}
ul.selector a{
text-decoration: none;
font-weight: bold;
}
ul.selector li.selected a{
border-bottom-size: 2px;
border-bottom-style: solid;
}
/* Size */
#sidebar ul#size-selector a.small{
font-size: .8em;
}
#sidebar ul#size-selector a.medium{
font-size: 1em;
}
#sidebar ul#size-selector a.large{
font-size: 1.2em;
}
/* Color */
#sidebar ul#color-selector li a.red{
color: #9b0103;
}
#sidebar ul#color-selector a.blue{
color: #55ABD2;
}
#sidebar ul#color-selector a.orange{
color: #EC5519;
}
#sidebar ul#color-selector a.green{
color: #647420;
}Al igual que en los controles de color hemos definido una serie de colores disponibles. En este caso 4 y marcamos el color rojo como seleccionado. Al pinchar en cualquier enlace añadiremos su clase a la clase de la etiqueta body.
<body class="medium red">
....
</div>De esta forma el navegador verá algo como:
3.2. Javascript
En este tutorial nos vamos a ayudar de la librería Javascript jQuery para buscar y modificar elementos de la página y para la gestión de eventos.
Descargamos jQuery de aquí y la incluimos en la sección head:
<head>
...
<script type="text/javascript" src="jquery-1.4.1.js"></script>
...
</head>Ya estamos preparados para crear un script que modifique el tamaño del texto y los colores. Para ello, añadimos lo siguiente justo debajo del anterior código:
<script type="text/javascript">
$(document).ready(function(){
/* al hacer click en un enlace de tamaño de texto */
$('#size-selector a').click(function(evt){
evt.preventDefault();
changeStyle(this);
});
/* al hacer click en un enlace de selección de color */
$('#color-selector a').click(function(evt){
evt.preventDefault();
changeStyle(this);
});
});
</script>He escrito algunos comentarios en el código para entenderlo mejor, pero lo que hace es crear un evento que será disparado al hacer click en los enlaces de selección de tamaño de texto y en los de selección de color.
En ambos eventos se llama a una función Javascript llamada "changeStyle". Esta función recibe el enlace en el que hemos hecho click y extrae su clase para aplicarla a la etiqueta body, a parte de seleccionar el elemento de la lista correspondiente para indicarnos visualmente cual es la opción seleccionada.
El siguiente código lo añadiremos antes del anterior:
<script type="text/javascript">
/* recibe un enlace (a) */
function changeStyle(element){
/*
El nuevo estilo es la clase del enlace
(small, medium, large / red, blue, orange, green)
*/
var new_style = $(element).attr('class');
/* Obtenemos el li seleccionado */
var selected = $(element).parent().siblings('.selected').get(0);
selected = $(selected);
/* obtenemos la clase del enlace seleccionado */
var old_style = selected.find('a').attr('class');
/* Deseleccionamos el estilo actual */
selected.removeClass('selected');
/* Seleccionamos el li del nuevo enlace seleccionado */
$(element).parent().addClass('selected');
/* Eliminamos el antiguo estilo del body y le añadimos el nuevo */
$('body').removeClass(old_style).addClass(new_style);
}
....
</script>Si ahora recargamos la página veremos que al hacer click en estos enlaces no ocurre nada. Necesitamos crear reglas de estilo CSS que se aplicaran según las clases que tenga la etiqueta body.
Para el texto añadiremos las siguientes reglas, la cuales establecen tamaños de fuente y altura de la líneas:
/* Custom text */
body.small{
font-size: 12px;
line-height: 20px;
}
body.medium{
font-size: 14px;
line-height: 22px;
}
body.large{
font-size: 16px;
line-height: 24px;
}Y para los colores estas otras:
/* Header */
body.red #header{background:#9b0103;}
body.blue #header{background:#55ABD2;}
body.orange #header{background:#EC5519;}
body.green #header{background:#647420;}
/* Sidebar */
body.red #sidebar a{color:#9b0103;}
body.blue #sidebar a{color:#55ABD2;}
body.orange #sidebar a{color:#EC5519;}
body.green #sidebar a{color:#647420;}
/* Footer */
body.red #footer a{color:#9b0103;}
body.blue #footer a{color:#55ABD2;}
body.orange #footer a{color:#EC5519;}
body.green #footer a{color:#647420;}Ahora podemos probar las distintas combinaciones de colores y tamaños de texto.
Si recargas la página se perderán todos los cambios. El siguiente paso es usar cookies para guardar nuestras preferencias.
4. Cookies
Por último vamos a guardar la selección en una cookie. Utilizaremos el script del post "nombre del post" que guardaremos en un fichero llamado "tools.js" e incluiremos despues de jquery y antes de las funciones de eventos.
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript" src="tools.js"></script>
<script type="text/javascript">
....
</script>Modificamos las acciones de los eventos para almacenar nuestros cambios en la cookie:
$(document).ready(function(){
$('#size-selector a').click(function(evt){
evt.preventDefault();
changeStyle(this);
Tools.createCookie('size', $(this).attr('class'), 7);
});
$('#color-selector a').click(function(evt){
evt.preventDefault();
changeStyle(this);
Tools.createCookie('color', $(this).attr('class'), 7);
});
});Y por último leeremos el valor de la cookie al cargar la página y si tiene un color o una tamaño cargaremos ese valor. En caso contrario mostrará la página con los estilos por defecto.
$(document).ready(function(){
...
var currentSize = Tools.readCookie('size');
var currentColor = Tools.readCookie('color');
if (currentSize){
changeStyle($("#size-selector a."+currentSize));
}
if(currentColor){
changeStyle($("#color-selector li a."+currentColor));
}
...
});Lo bueno de hacer esto dentro de la función $().ready() es que el valor de la cookie y el cambio de de color y de texto se producirá justo cuando el DOM esté cargado y no deberemos esperar hasta que la página esté cargada en su totalidad.
Y eso eso todo. A partir de ahora, aunque recarguemos la página seguiremos con los últimos estilos seleccionados.
