Manual de Website Baker

Website Baker v2.7.0

Introduccin
Website Baker es un sistema de manejo de contenido que ofrece una gran flexibilidad para la creacin de sitios web no importa el tamao del mismo. El mismo permite una clara definicin de pginas con su correspondiente contenido. A diferencia de otros sistemas de este tipo, las plantillas creadas no son almacenadas en una base de datos, sino que se archivan en un directorio independiente (templates) con lo cual se evita el riesgo de perder nuestro diseo original si, por cualquier razn, se corrompe la base de datos. Este sistema de plantillas nos permite, adems, la posibilidad de tener temas diferentes para un mismo sitio web, de modo que cada cierto tiempo es posible cambiar la apariencia total del sitio con slo asignarle una plantilla diferente.

Requisitos del sistema

Para instalar Website Baker en un servidor web es necesario que este disponga de soporte PHP v4.1.2 o superior. Tambin se amerita de acceso a un servidor de base de datos con soporte para MySQL.

Instalacin
La instalacin de Website Baker es muy sencilla, ya que cuenta con instalador que te va guiando paso a paso durante todo el proceso. Para la instalacin del sistema contamos con tres posibilidades: 1. Instalacin como dominio principal Si queremos instalar Website Baker como nuestro dominio principal debemos agotar el siguiente procedimiento: A travs de Cpanel crear la base de datos websitebaker y otorgarle todos privilegios de usuario. Mediante nuestro cliente FTP subir al directorio raz (usualmente public_html) todo el contenido de la carpeta wb. Utilizando nuestro navegador ir a la direccin: http://www.dominio/install y seguir las instrucciones de instalacin.

2. Instalacin como subdominio Si deseamos instalar Website Baker como un subdominio dentro del dominio principal debemos proceder de la manera siguiente: Crear a travs de Cpanel la base de datos websitebaker y otorgarle todos privilegios de usuario. A travs del administrador de subdominios de Cpanel, crear el subdominio donde alojaremos el contenido de Website Baker. Mediante nuestro cliente FTP subir al subdominio que hemos creado todo el contenido de la carpeta wb. Con nuestro navegador ir a la direccin: http://www.subdominio.dominio/install y seguir las instrucciones de instalacin.

3. Instalacin como subdirectorio Si deseamos instalar Website Baker como un subdirectorio dentro del directorio raz debemos dar los siguientes pasos:

A travs de Cpanel crear la base de datos websitebaker y otorgarle todos privilegios de usuario. Mediante nuestro cliente FTP crear el subdirectorio deseado y subir al mismo todo el contenido de la carpeta wb. Con nuestro navegador ir a la direccin: http://www.dominio/subdirectorio/install y seguir las instrucciones de instalacin.

Creacin de las Plantillas

Las plantillas son las responsables de manejar los aspectos referidos al diseo del sitio. Estas son subdirectorios dentro del directorio templates. El sistema viene con el subdirectorio Default como plantilla por defecto. Una plantilla est constituida por los siguientes elementos: index.php: Script con los elementos de diseo. info.php: Script con la informacin bsica de la plantilla. print.css: Hoja de Estilo en Cascada con los parmetros del buscador interno. screen.css: Hoja de Estilo en Cascada con los parmetros de las pginas de contenido.

De todos estos elementos, index.php ser el nico con el que deberemos trabajar para disear la presentacin de nuestro sitio web. Siendo que, salvo el archivo index.php, los dems elementos de una plantilla NO sufren ninguna modificacin, resulta conveniente hacer una copia de ste para trabajar sobre l momento de disear nuestra propia plantilla.

El sistema viene con cuatro plantillas: blank, round, allcss y simple. De stas, la plantilla round es la que viene instalada por defecto. Esta puede ser cambiada desde el rea administrativa, despus de instalar todo el sistema. Para crear nuestra propia plantilla resulta conveniente hacerlo sobre la plantilla simple, la cual ha sido diseada con este propsito.

Diseando nuestro tema

Para crear nuestra propia plantilla debemos proceder de la manera siguiente: 1. Hacemos un boceto de nuestro de nuestra pgina bsica, donde establecemos sus diferentes reas (cabecilla o header, zonas para el men principal y el secundario, reas para la presentacin de los contenidos, pi o footer, etc.). 2. Utilizando nuestro editor de hipertexto procedemos a concretar nuestro boceto, colocando en cada una de las reas predefinidas los diferentes placeholders o etiquetas responsables de presentar los contenidos de la pgina. Atencin! Es recomendable utilizar un editor que permita el paso de lenguaje de hipertexto al de editor grfico. El programa Dreamweaver o su alternativa libre Nview pueden cumplir perfectamente con esta funcin. Con cualquiera de estos editores podemos crear un tabla con un sistema de celdas y columnas con bordes de 0 pixeles, donde colocaremos los placeholders de presentacin de los contenidos.

Insertando los elementos comunes

Para que el sistema funcione es necesario colocar en el encabezado de la plantilla los siguientes elementos:
<?php // $Id: index.php 691 2008-02-10 13:17:15Z doc $ if(!defined('WB_URL')) { header('Location: ../index.php'); exit(0);

} ?> <!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><?php page_title(); ?></title> <meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" /> <meta name="description" content="<?php page_description(); ?>" /> <meta name="keywords" content="<?php page_keywords(); ?>" /> <link href="<?php echo TEMPLATE_DIR; ?>/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="<?php echo TEMPLATE_DIR; ?>/print.css" rel="stylesheet" type="text/css" media="print" /> <?php // this allows to include the optional module files (frontend.css, frontend.js) into the head section if(function_exists('register_frontend_modfiles')) { register_frontend_modfiles('css'); register_frontend_modfiles('js'); } ?> <?php // this allows to add custom information to the head section of your template (WB-->Settings-->Website Header) echo WEBSITE_HEADER; ?> </head>

Si deseamos eliminar la funcin de la Hoja de Estilo que el sistema trae por defecto para la presentacin del contenido, slo debemos eliminar la siguiente lnea:
<link href="<?php echo TEMPLATE_DIR; ?>/screen.css" rel="stylesheet" type="text/css" media="screen" />

Colocacin de los placeholders

Una vez hemos colocado los elementos comunes a cualquier pgina bsica diseada para ser usada con Website Baker, procedemos a colocar los diferentes placeholders. El procedimiento ms adecuado es el siguiente: 1. Con nuestro editor en formato de ambiente grfico (wysiwyg) seleccionar un punto de insercin para un placeholder. 2. Luego, pasar a ambiente de hipertexto y, una vez ubicado el punto de insercin, colocar el script correspondiente a ese placeholder.

Listado de placeholders y su funcin

Ttulo del sitio:
Muestra el ttulo o nombre del sitio web. <?php page_title('','[WEBSITE_TITLE]'); ?>

Men del sitio:

Muestra el men que el sistema trae por defecto. El diseo puede modificarse en la hoja de estilo screen.css. <?php show_menu(); ?> El placeholder del men se debe combinar con los siguientes placeholders:
1) <?php if(SHOW_MENU) { /* Only shown menu if we need to */ ?> 2) <?php } ?>

El script completo sera el siguiente:

<?php if(SHOW_MENU) { /* Only shown menu if we need to */ ?> <?php show_menu(); ?> <?php } ?>

Buscador Interno:
Muestra un motor de bsqueda interno que facilita el acceso rpido a las informaciones del sitio web. Es una combinacin de los siguientes placeholders y scripts:
1. <?php if(SHOW_SEARCH) { /* Only show search box if search is enabled */ ?> 2. <input type="submit" name="submit" value="<?php echo $TEXT['SEARCH']; ?>" style="width: 100%;" /> 3. <?php } ?>

El script completo (incluyendo el formulario de bsqueda) es el siguiente:

<?php if(SHOW_SEARCH) { /* Only show search box if search is enabled */ ?> <form name="search" action="<?php echo WB_URL; ?>/search/index.php" method="get"> <input type="text" name="string" style="width: 100%;" /> <input type="submit" name="submit" value="<?php echo $TEXT['SEARCH']; ?>" style="width: 100%;" /> </form> <?php } ?>

Contenido Principal:
Muestra el contenido principal de la pgina web. <?php page_content(); ?>

Pi de Pgina:
Muestra la informacin al Pi de cada pgina del sitio web. <?php page_footer(); ?>

Sobre la Hoja de Estilo en Cascada screen.css

La hoja de estilo screen.css define los principales elementos de diseo del sitio. Por ello, si deseamos modificar en el diseo global del sitio, slo debemos introducir en sta los cambios deseados. Esta hoja de estilo nos permite modificar: La familia de fuentes empleadas en el sitio
body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; }

El fondo de las pginas del sitio

body { background-color: #333333; margin: 10px; }

Nota: Para deshabilitar el fondo que trae el sistema por defecto, slo debemos sustituir el valor #333333 por none. De esta manera el sistema asumir el valor establecido por nosotros en nuestra plantilla. El efecto en los enlaces (link)
a:link, a:visited, a:active { color: #003366; text-decoration: none; }

Los elementos del encabezado (header)

.header { background-color: #336699; vertical-align: middle; text-align: center; color: #FFFFFF; height: 50px; font-size: 20px; font-weight: bold;

Todos los detalles del men

Aspecto general (.menu) Listado de elementos (.menu ul, .menu li) Caractersticas de la fuente (.menu_current) Sombreado (.highlight)

Los detalles de presentacin del contenido

.content { background-color: #FFFFFF; padding: 20px; height: 400px; vertical-align: top; }

Los detalles de presentacin del pi de pgina (footer)

.footer { background-color: #DDDDDD; text-align: center; font-size: 10px; height: 10px; }

Nota: Si deseamos eliminar la funcin de la hoja de estilo screen.css slo tenemos borrar del rea de elementos comunes la siguiente lnea de texto:
<link href="<?php echo TEMPLATE_DIR; ?>/screen.css" rel="stylesheet" type="text/css" media="screen" />

Sobre la Hoja de Estilo en Cascada print.css

La hoja de estilo print.css define los principales elementos de presentacin de los resultados del motor de bsqueda interno. Es preferible no introducir ninguna modificacin en esta hoja de estilo.

Insercin de Imgenes
Si deseamos insertar imgenes en nuestra plantilla, de modo que las mismas sean visualizadas en cada pgina de nuestro sitio web, debemos utilizar el siguiente script:
<img src="<?php echo TEMPLATE_DIR; ?>/images/nombreimagen.gif" border="0" alt="" />

Este script ser colocado en el punto de insercin donde queremos que aparezca la imagen. As mismo, la imagen ser colocada en la carpeta images del directorio la plantilla que estamos diseando.

Creacin de Bloques de Contenido Editables

Si deseamos tener ms de un bloque de contenido en nuestro diseo, manejado cada uno con su propio editor de texto (Por ejemplo, un rea para el men a la izquierda y otra para el contenido principal a la derecha), slo tenemos que:

1. Colocar los siguientes cdigos en los puntos de insercin correspondientes: rea de Contenido Principal: "page_content(1) Area de Contenido Adicional: "page_content(2)

2. Notificar a Website Baker que un nuevo bloque de contenido ha sido creado. Para ello editamos el archivo info.php, ubicado en el directorio templates, el siguiente cdigo: $block[2]="Right Column"; 3. En el rea Administrativa nos dirigimos a la seccin Configuracin y seleccionamos Ver Opciones Avanzadas. Aqu habilitamos la opcin Bloques de la Seccin. Nota: Asegrese de usar la plantilla modificada dado que los bloques creados slo sern visibles en sta. 4. Ahora, desde el rea Administrativa, creamos una nueva pgina. En el editor de texto que se abrir seleccionamos la opcin Administrar Secciones. 5. En la ventana que se abrir seleccionamos la opcin Agregar Seccin y agregamos un nuevo editor WYSIWYG. Esto nos crear un segundo editor para la pgina. 6. En la opcin Block de la misma ventana, asignamos el primer editor de texto para el rea de contenido principal y el segundo para el rea adicional que hayamos creado. Luego pulsamos Guardar. 7. Tan pronto hemos asignado editores a ambos bloques o reas de contenido, seleccionamos la opcin Modificar Pgina, para proceder a insertar contenido en la misma. Note que cada bloque de contenido tiene su propio editor WYSIWYG. Como puede notarse, es posible introducir el nmero de bloques de contenido editables que nuestro diseo requiera. Y algo ms interesante an: Aunque nuestra plantilla (como es lgico) la hayamos dividido en varias zonas de contenido, si en una pgina slo queremos que aparezca el contenido principal, ste ocupar el rea de contenido completa, obviando la divisin en zonas hecha por nosotros en el diseo. Esta posibilidad nos brinda mayor libertad en manejo y presentacin de los contenidos del sitio web que estamos creando.

Creacin de Mdulos de Contenido Adicional

Al crear nuestras plantillas podramos desear incluir reas con diseo propio; es decir, reas no administradas por la base de datos. Para ello, diseamos mdulos de contenido adicional. De esta manera podemos integrar a la plantilla que estamos diseando nuestra

propia cabecilla (header), un men con efectos que no se pueden lograr mediante las hojas de estilo o un rea para la colocacin de banners publicitarios. Los mdulos de contenido adicional se pueden disear tanto en PHP como en HTML. Como estas pginas no son administradas por la base de datos, debern ser subidas al directorio raz, al subdominio o al subdirectorio (segn el tipo de instalacin que hayamos realizado) usando nuestro cliente FTP. De igual modo, si el diseo incluye algunas imgenes, stas deben ser colocadas en la carpeta images del directorio raz, subdominio o subdirectorio. De igual modo debemos colocar una copia de stas en la carpeta images del directorio contenido. Los mdulos de contenido adicional son invocados por nuestra plantilla mediante el mandato include. Si, por ejemplo, tuviramos los mdulos adicionales modulo_header.php y modulo_menu.php, sus mandatos include seran:
<?php include(http://www.dominio/modulo_header.php); ?> <?php include(http://www.dominio/modulo_menu.php); ?>

Note que en ambos casos hemos colocado la direccin absoluta donde se encuentra ubicado el mdulo. Este detalle debe ser tomado en cuenta en los casos de instalacin de Website Baker como subdominio o como subdirectorio. Tambin podramos tener mandatos include usando la direccin relativa de los mdulos, lo que permitira tener un acceso ms rpido a stos, como por ejemplo:
<?php include(modulo_header.php); ?> <?php include(modulo_menu.php); ?>

Pero, en este caso, adems de subir los mdulos al directorio raz, debemos colocar una copia de stos en la carpeta contenido, ubicada en el directorio raz. Los mandatos include se colocarn en el punto de insercin donde queremos que aparezca el mdulo de contenido que hemos creado. Podemos crear tantos mdulos de contenido como los requiera nuestro diseo. Pero debemos recordar que estas pginas adicionales NO se actualizan desde el rea administrativa del sitio, debido a que no estn vinculadas con la base de datos. Para producir cualquier cambio en su contenido debemos hacerlo desde fuera, con nuestro editor de hipertexto, y luego subirla al servidor mediante un cliente FTP.

Website Baker con plantillas prediseadas

Website Baker permite una perfecta integracin con plantillas prediseadas. Para ellos slo tenemos que hacer algunos cambios bsicos en la plantilla: 1. Con nuestro editor de hipertexto seleccionar, en la plantilla prediseada, el archivo index.html. Este ser el nico archivo con el que trabajaremos.

2. Seleccionar el punto de insercin donde deseamos que aparezca el contenido y colocar el siguiente cdigo: <?php page_content(); ?> 3. Modificar cada enlace del men colocando la ruta de acceso absoluta a cada pgina del sitio. Aqu debemos tener en cuenta el tipo de instalacin de Website Baker que hayamos realizado:
Para el dominio principal: http://www.dominio/contenido/nombredelapagina.php Para un subdominio: http://subdominio.dominio/contenido/nombredelapagina.php Para un subdirectorio: http://www.dominio/subdirectorio/contenido/nombredelapagina.php

4. Renombrar la pgina index.html como index.php y subirla a la carpeta simple del directorio templates, usando nuestro cliente FTP. 5. De igual modo, las imgenes deben ser colocadas en la carpeta images del directorio raz, subdominio o subdirectorio (segn el tipo de instalacin que hayamos realizado). No debemos olvidar colocar una copia de stas en la carpeta images del directorio contenido, para que el sistema funcione de manera adecuada.

Mayor seguridad para el rea Administrativa

Para dar mayor seguridad al acceso al rea Administrativa debemos dar los siguientes pasos: 1. Renombrar el folder admin con el nombre que nos resulte ms adecuado. 2. Modificar el archivo config.php en dos lneas del mismo, las cuales hemos destacado en azul:
define('WB_URL', 'www.mydomain.tld/wb'); define('ADMIN_PATH', WB_PATH.'/admin'); define('ADMIN_URL', 'www.mydomain.tld/admin');

Si el folder admin lo hemos renombrado como acceso, los cambios a efectuar en el archivo config.php seran los siguientes:
define('ADMIN_PATH', WB_PATH.'/acceso'); define('ADMIN_URL', 'www.mydomain.tld/acceso');

Crditos:
Todas las mejoras producidas y la elaboracin del manual para esta versin de Website Baker han sido realizadas por: Rafael Delmonte rafdel@webcolectiva.org