Ene 6 2009

Construyendo el portal de Tery Software - Menus animados con kwicks

Continuando con los artículos de la creación de nuestro portal corporativo, continuamos con la creación de los menús. Generalmente los menús son generados por Drupal de manera automática; sin embargo, estos menus son sencillos links en HTML y buscábamos algo animado. Decidimos emplear un plugin desarrollado en J-Query que proporciona menús de acordeón llamado kwicks.

Específicamente el ejemplo #1 se ajustaba a una idea que nos surgió de que los personajes de nuestro logo empujaran los menus. Por ser desarrollado sobre J-Query existía una alta posibilidad de que pudiera integrarse con Drupal y de hecho así lo fué, pero ¿ Como hacer que se integrara completamente con la potente gestión de contenido que ofrece Drupal ?.

Dado que Drupal esta desarrollado sobre PHP y es un CMS bastante personalizable, decidimos crear un pequeño script que embedido en el template generara el algoritmo necesario en HTML y JavaScript para cada menu existente.

La manera como se obtuvieron los menús existentes fue capturando la variable $primary_links que es una arreglo y empleando las variables contenidas en dicho arreglo para cada menú. El array $primary_links consta de los siguientes registros por cada menu:

$primary_links => array(1) {
	["some_menu"]=>  array(3) {
		["attributes"]=>  array(1) {
			["title"]=>  string(33) "Titulo al posar el cursor"
		}
		["href"]=>  string(6) "node/6"
		["title"]=>  string(9) "Principal"
	}
}

El número de elementos que contendrá el array $primary_links depende directamente del número de menús que hallan sido creados. Para que un menú se muestre animado con kwicks debe cada opción estar codificada así:

<ul class="kwicks">
	<li id="kwick1">Menu 1</li>
	<li id="kwick2">Menu 2</li>
</ul>

De modo que lo que hacemos es emplear la sentencia de control foreach para que por cada elemento del arreglo nos genere un menú siguiendo el patrón anterior. Para organizar y estilizar de una mejor manera, decidimos dentro de cada <li> declarar un <h2>(Por ser un subtitulo creemos que es semánticamente correcto) y un <label>. Tambíen cabe mencionar que en el script se emplea una variable de control $n a fin de que los identificadores no se repitan y no incumpla el XHTML. Por último era necesario recuperar el alias de url en ves de la url original, ya que de emplear la original nuestro usuarios estarían siendo dirigidos a páginas del tipo “node/#”. A continuación el pequeño script debidamente comentado. Este script fue insertado en un <div$gt; dentro del template principal (page.tpl.php). ver acerca de PHPTemplate y maqueteado en Drupal.

<div id="kwickmenu">
<ul class="kwicks">
<h2 class="main_links">
					<label>
					<a title="'.$option[" href="../../../../'.$nombre["> '.$option["title"].'
					</a>
					</label></h2>
';}
		/*De lo contrario imprimir sin el alias (path original)*/
		else {
		echo '
	<li id="kwick'.$n.'">
<h2 class="main_links">
					<label>
					<a title="'.$option[" href="../../../../'.$option["> '.$option["title"].'
					</a>
					</label></h2>
</li>
';}
		$n++;		/* Incrementamos el identificador para la siguiente iteración*/
		}
		?&gt;</ul>
</div>

comentado. Este script fue insertado dentro del template principal (page.tpl.php). ver acerca de PHPTemplate y maqueteado en Drupal.

De esta manera se integraron los menús con Drupal. Es importante hacer referencia a las hojas de estilo y scripts que vienen contenido en el paquete de kwicks para que funcione correctamente. El resultado se puede apreciar en nuestra web TerySoftware, un menú animado haciendo uso de un efecto de acordeón.


Dic 4 2008

Construyendo el portal de Tery Software - Hoja de estilos

Continuando con el artículo anterior, una vez realizado el maqueteado respetando el estándar XHTML, se procede a ajustar la hoja de estilos. Básicamente las hojas de estilo en cascada o CSS son las que permiten que un documento puramente semántico escrito en HTML adquiera normas y reglas de estilo a fin de ser más agradables al usuario final.

Cuando se realiza el maqueteado en XHTML  se tiene en cuenta que cada div creado debe tener un identificador. Son precisamente los identificadores, clases y otros atributos similares los que permiten relacionar la estructura con el estilo. Cuando el navegador interpreta el documento, lee en las hojas de estilo las normas declaradas y las aplica a los elementos correspondientes. Para explicar de una manera más clara como se usan las CSS podemos ver un ejemplo.

Si crearamos un div con identificador “nuevodiv”…

<div id="nuevodiv"></div>

Podremos aplicar normas de estilo en las css relacionando el estilo con el identificador que escogimos en el XHTML.

#nuevodiv
{
display: block;
float:     left;
background: #fefefe;
}

El navegador recorrerá el código y al encontrar el identificador en el div,  aplicará el estilo indicado en las CSS.

Para hacer de las hojas de estilo un elemento más modular, las hojas de estilo cuentan con una jerarquía definida que permite aplicar estilos diferentes aún a elementos HTML muy específicos sin acudir siempre a un identificador. Por ejemplo las clases, permiten añadir normas de estilo a etiquetas definidas en el HTML pero que a nivel de la vista adquieren una connotación diferente.

Por ejemplo podríamos  tener dos títulos h2, uno estándar y otro de clase h2rojo que es de color rojo.

<h2>Un título estandar</h2>
<h2 class="h2rojo"> Un título rojo </h2>

En la hoja de estilos declararíamos:

//Las clases se declaran anteponiendo un punto, los identificador con el caracter #
h2 .h2rojo{
color: red;
}

Existen varias aplicaciones que permiten realizar el maqueteado de una manera más rápida y eficiente. Se pueden usar herramientas libres como Quanta (Del entorno KDE) o incluso plugins del navegador como lo es Firebug. Este tipo de aplicaciones permiten una visión del resultado a medida que se va añadiendo estilo a las diferentes secciones del HTML.

Lo que permite ganar habilidad en el uso de CSS y aprovechar al máximo lo que ofrecen, es el conocer muy bien la sintaxis y sus propiedades. Para esto hay hojas que contienen resúmenes cortos que son de gran ayuda cuando se esta haciendo el maqueteado. En nuestra sección de descargas se encuentra una de estas hojas de cheats de CSS. Viene bien tener un sitio donde se pueden encontrar las propiedades mas utilizadas y demostraciones de uso como W3Schools.

Una vez realizados estos pasos, se validan tanto el XHTML como las CSS para corroborar que se ha codificado conforme el estándar.

Validador de XHTML

Validador de CSS

Una vez se tienen los documentos validados, se prosigue con la creación del tema para Drupal.