CSS Reutilizable con PHP (Parte II)

En un artículo anterior aprendimos como se pueden cambiar los CSS dinámicamente con PHP. Aunque algo limitado, nos sirvió para introducirnos en una aplicación más compleja conocida como PHP Styleswitcher. En este artículo usted aprenderá como dar a sus usuarios el control sobre la apariencia de su sitio Web.

Existen dos tipos básicos de Styleswitchers: del lado del cliente y del lado del servidor. Mediante Javascript podemos crear Styleswitchers del lado del Cliente. Sin embargo, los styleswitchers del lado del servidor lo tenemos que realizar con un lenguaje del lado del Servidor (PHP, ASP, ColdFusion, otros). La principal ventaja de los Styleswitchers con PHP (u otro lenguaje del lado del servidor) es que el navegador (IExplorer, Firefox, etc.) no necesita de Javascript para funcionar. Aunque ambos tipos del styleswitcher requieren de cookies.

Con un Styleswitchers permitimos que nuestros usuarios cambien la disposición (diseño, color, etc.) de una página sin cambiar el tamaño de fuente y viceversa. Para lograr esto vamos a utilizar el Script creado por contrastsweb.com, pues nos ofrece ciertas ventajas sobre otros Styleswitchers que existen, como por ejemplo el poder cambiar multiples hojas de estilo independientemente unas de otras. Con una se puede aumentar o disminuir el tamaño de fuente, con otra el color del sitio web, con otra la disposición, y así sucesivamente sin necesidad de tener que crear tantos scripts php como hojas de estilo tengamos.

En este artículo vamos a ver como utilizar el PHP Styleswitchers v.2, dejando la explicación de su código (OpenSource) para un posterior artículo.

Paso 1: El código lo podemos descargar desde aquí.

Paso 2: Subimos el archivo a nuestro sitio web mediante FTP.

Sugerencia: Es mejor poner los archivos del styleswitcher en el nivel de la raíz (la carpeta del nivel más alto de su sitio) o en una carpeta de PHP en la carpeta de la raíz. Esto hace fácil encontrar más adelante. Aquí está un ejemplo de lo que puede parecer su sitio:

css/
php/
 Styleswitcher.php
 switcher.php
 index.php

Para que el código de PHP se ejecute, los archivos (generalmente) deben tener la extensión ".php". Es decir, si su sitio utiliza páginas "html", debemos cambiar las extensiones de cada archivo.

Paso 3: Actualizar el archivo "switcher.php" para aceptar los cambios de sus usuarios.

Abrimos el archivo de "switcher.php" en un editor de textos.

Las líneas de los pares del código:

if(!isset($reqPath)){ $reqPath = "./"; }
require_once($reqPath. "Styleswitcher.php");

La variable $$reqPath es importante porque contiene la trayectoria al archivo, de "switcher.php" a "Styleswitcher.php". Si usted siguió la recomendación del paso 2 , estos archivos serán situados en el mismo directorio, así que esto no importa.

La línea siguiente es lo importante del código, pues crea el "objeto de Styleswitcher". Un objeto, para este propósito, crea un paquete pequeño de código y de informació, el que utilizaremos para realizar el cambio de estilo.

Miremos estas líneas del código:

$ss->addStyle("basic", "basic.css", "screen", "", true);
$ss->addStyle("blue", "blue.css");
$ss->addStyle("green", "green.css");
$ss->addStyle("large", "large.css");
$ss->addStyle("normal", "small.css");

Cada línea agrega un nuevo estilo a nuestro Styleswitcher.

Ahora bien, existen dos tipos básicos de estilos que usted puede manejar con este Styleswitcher: dinámico y estático. Los stylesheets estáticos están siempre presentes, haya o no una cookie de usuario. Y dinámico, que será utilizado fijando una cookie en nuestros usuarios. En consecuencia, el estilo estático va a estar siempre presente.

Modifique estas líneas del código para agregar sus estilos al objeto styleswitching. Aquí está el sintaxis para agregar estilos:

$object->addStyle(styleName, file [, styleMedia, styleTitle, static]);

styleName es el nombre (sin espacios o caracteres raros) usado en las cookies y herramientas de estilos. file apunta al archivo del CSS. styleMedia es una argumento opcional que nos permite cambiar el tipo de estilo (e.g., pantalla, impresión, etc.). styleTitle también es opcional y nos permite fijar cualidad del "título" del estilo. static debe ser igual a verdadero o falso dependiendo de si el estilo es estático o dinámico.

Por ejemplo, si solamente tenemos tres stylesheets, uno de los cuales esta siempre presente y activo, y otros dos que determinan el tamaño de fuente, podemos utilizar este código:

$ss = new Styleswitcher();
$ss->addStyle("static", "static.css", "", "", true);
$ss->addStyle("normal", "normal.css");
$ss->addStyle("large", "large.cess");

El paso siguiente en la puesta al día de esta escritura implica la idea de "Set" (Sistemas). Los sistemas son grupos de los hojas de estilos, de los cuales solamente uno puede ser activo. Si un usuario no tiene un estilo de un sistema seleccionado, se selecciona el estilo del defecto (de otra manera, el estilo que han seleccionado será utilizado). En el ejemplo de abajo, el archivo de "normal.css" va probablemente a ser el defecto para una fuente fijada. El usuario puede seleccionar para utilizar el archivo de "large.css", pero puede no seleccionar para cambiar el sitio en todos.

La razón principal de los sistemas (“Set”) es mantener una página web que llame dos hojas de estilo en conflicto (por ejemplo, los stylesheets anteriorores: texto normal y grande). En otras palabras, controla estilos recíprocamente excluyentes.

En el script "switcher.php", el siguiente código agrega dos sistemas y agrega los estilos a estos sistemas:

$ss->createSet("fonts");
$ss->addStyleToSet("fonts", "large");
$ss->addStyleToSet("fonts", "normal", true);

$ss->createSet("style");
$ss->addStyleToSet("style", "blue", true);
$ss->addStyleToSet("style", "green");

Sintaxis para crear un sistema del estilo:

$object->createSet(setName)

Para agregar estilos a un sistema, utilizamos:

$object->addStyleToSet(setName, styleName [, default])

Si el estilo que agregamos es el de defecto, fijamos el argumento en "true ".

Paso 4: El paso anterior es el paso más largo de todo el proceso, pero en el siguiente utilizamos mucho del código que acabamos de escribir. Ahora necesitamos incluir el código PHP en nuestras páginas web, desde luego sin reescribir todo el código en cada página.

Como el código del styleswitcher es casi exactamente igual, en vez de usar el método del "comienzo" esta vez, utilizamos el método de los "printStyles".

Veamos el código fuente del ejemplo, al principio estan estas dos líneas:

if(!isset($reqPath)){ $reqPath = "./"; }
require_once($reqPath ."Styleswitcher.php");

Este código está incluyendo el código del Styleswitcher para que podemos utilizarlo. Lo importante es que la variable $$reqPath apunte al directorio donde se localiza el archivo. Por ejemplo, para un homepage podemos utilizar este código:

$reqPath = "php/";

Para un archivo localizado un directorio superior:

$reqPath = "../php/";

Si nos devuelve un error como este:

Warning: main(../Styleswitcher.php) [function.main]: failed to create stream: No such file or directory in /switcher/v2/example.php on line 13 Fatal error: main() [function.main]: Failed opening required '../Styleswitcher.php' (include_path='.:/usr/local/lib/php') in /switcher/v2/example.php on line 13

Es que esta mal nuestra variable $$reqPath (Usted está intentando abrir un archivo que no existe).

Por otra parte, para quienes utilicen los mismos stylesheets para muchas partes del Web site. En vez de corregir todas esas páginas, usted puede incluir el código a partir de un archivo que maneje el código del CSS (como lo vimos en el artículo anterior).

Para poner esto en nuestro sitio, modificamos:

<!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>
<title></title>
<!-- Stylesheet data -->
<?php include("../inc/stylesheets.php"); ?>

Después de que usted haya realizado los cambios a los archivos necesarios, subalos a su servidor.

Paso 5: En el paso anterior brindamos a nuestros usuarios una manera de cambiar los stylesheets en su Sitio Web. Ahora, para finalizar veremos los mecanismos que podemos utilizar para realizar los cambios:

Links de texto:
<a href="php/switcher.php?set=large">Large Text</a> |
<a href="php/switcher.php?set=normal">Normal Text</a>

Botones de Formulario:
<form action="php/switcher.php" method="post">
<input type="hidden" name="inputStyle1" value="fonts" /> 
<input type="submit" name="fonts" id="fonts1" value="Large Text" /> 
<input type="submit" name="fonts" id="fonts2" value="Normal Text" /> 
</form>

Botones de Opción:
<form action="switcher.php" method="post">
<!-- Automatically redirect to the referer -->
<input type="hidden" name="referer" id="referer" value="<?php print $_SERVER['PHP_SELF']; ?>" />
<input type="hidden" name="inputStyle1" id="inputStyle1" value="fonts" /> 
<input type="hidden" name="inputStyle2" id="inputStyle2" value="style" /> 

<p>Use this form to change the style of this page:</p> 

<strong>Font Style:</strong><br /> 
<input type="radio" name="fonts" id="fontStyle1" value="normal"
<?php $ss->printSetInputChecked("fonts", "normal"); ?>/>
 <label for="fontStyle1">
<span lang="EN-US" style="mso-ansi-language: EN-US">Normal</span>text (smaller)</label>
<input type="radio" name="fonts" id="fontStyle2" value="large"
<?php $ss->printSetInputChecked("fonts", "large"); ?>/>
 <label for="fontStyle2">Large text</label><br />

<br />

<strong>Page Style:</strong><br />
<input type="radio" name="style" id="pageStyle1" value="blue"
 <?php $ss->printSetInputChecked("style", "blue"); ?>/>
 <label for="pageStyle1">Blue</label> 
<input type="radio" name="style" id="pageStyle2" value="green"  
 <?php $ss->printSetInputChecked("style", "green"); ?>/>  
 <label for="pageStyle2">Green</label><br />

<br />

<input type="submit" name="setChanges" value="Change styles" /> 
</form>

En un posterior artículo explicaremos el funcionamiento de este script, pero si todavía tienes mucha curiosidad, visita la web de su creador.