Ene 8 2009

Drupal Módulo Smileys - Como crear un nuevo pack

Cuando se crean foros resulta bastante útil el proporcionarle al usuario smileys para que pueda personalizar sus comentarios. Drupal cuenta con un módulo para este fin llamado Smileys. El modulo es bastante bueno, sin embargo en su versión para Drupal 5.x nos topamos con bastantes tropiezos.

1. Generalmente los packs que se encuentran para esta versión son demasiado viejos, y aquellos con gráficos más estilizados se encuentran para la versión 6.x.
2. El módulo se hace bastante inconsistente al trabajar con J-Query Update ya que no permite insertar Emoticons directamente desde el fieldset.
3. Los smileys al ser insertados lo hacen sin una clase lo que hace bastante complicado su manejo en las hojas de estilo.

Cómo crear un pack personalizado para Smileys en Drupal 5

Como lo mencionamos, los packs que vienen para esta versión son bastante anticuados. Hay packs muy estilizados y modernos pero para la versión 6 que emplea archivos XML. Entonces elegimos descargar un tema para Smileys en Drupal 6 y hacer uso de un script que generara un archivo de pack para Drupal 5 a fin de portarlo.

EL tema que portamos es uno llamado Facies

Smileys Facies Thumbnail

El script que empleamos para convertir nuestras imágenes en un tema de smileys de Drupal 5, teniendo en cuenta que el nombre del icono queda igual al nombre de archivo es el siguiente:

<?php
//Script que genera un archivo .pak para Smileys Drupal 5 usando PHP.
 
$dh=opendir("/home/yourdir/"); //Directorio con los iconos
while(gettype($file=readdir($dh)) != boolean)
{
if(!is_dir("$file") && strpos($file, ".gif"))
{
$file2 = str_replace(".gif","",$file); //Estensión de archivos.
echo $file. "=+:" .$file2. "=+::" .$file2. ":";
echo "<br>";
}
}
closedir($dh);
 
//Modificación del script posteado por yngens en el foro de Drupal.org http://drupal.org/node/169700
?>

El Pack de emoticons que creamos se puede hallar en nuestra web de descargas:
http://www.terysoftware.com/descargas/smileys-facies_theme-d5

Hacer funcionar Smileys en Drupal 5 con J-Query Update

Dado que revisando los Issues no encontramos aparentemente una solución al tropiezo #2, decidimos desviar al usuario y obligarlo a usar la ventana (Pop Up) con los demás smileys que si funciona con J-Query Update. Lamentablemente todos los smileys se muestran en el fieldset por lo que el usuario no se vería tentado a hacer click en el link “Show All” (Que fue previamente habilitado en la página de configuración del módulo). Para tal fín, tuvimos que ingresar al módulo y realizar los siguientes cambios buscando que el fieldset mostrara solo unos pocos emoticons.

› Continue reading


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.