Jun 12 2009

Shoutbox en Drupal 5.x

Una de las aplicaciones que resultan útiles en algunos portales es la creación de bloques de minichat o shoutbox. Son mensajes cortos que se envían a fin de debatir temas cortos o dar informaciones rápidas al usuario.

En drupal existe un módulo para implementar un Shoutbox en un sitio web. Es realmente útil y personalizable, sin embargo nosotros hicimos ligeros ajustes al módulo a fin de arreglar dos inconvenientes.

1. El campo de ingreso para el mensaje es de una sola línea, para el usuario es deseable enviar mensajes más largos. Para ello viene bien valerse del artículo publicado dentro de la pagina de parches pendientes del proyecto. Se pueden hacer los siguientes cambios y reemplazar el campo de texto por un área de texto.

//En la línea 525 Cambiar
$form['message'] = array(
    '#type' => 'textfield',
    '#default_value' => $default_msg,
    '#size' => 15,
  );
//Por:
 $form['message'] = array(
    '#type' => 'textarea',   
    '#default_value' => $default_msg,
    '#cols' => 15,
    '#rows' => 4,
  );

2. Para evitar que los usuarios puedan enviar mensajes con cualquier nombre de usuario, deshabilitamos la edición del campo nick, empleando la propiedad enunciada en el API #disabled.

//En la línea 517, agregamos al arreglo ('#disabled' => TRUE,) quedaría de esta forma:
    $form['nick'] = array(
      '#type' => 'textfield',
      '#disabled' => TRUE,
      '#default_value' => ($last_nick) ? $last_nick : $default_nick,
      '#size' => 15,
      '#maxlength' => 30,
    );

Por supuesto siempre se podrán aplicar otro tipo de soluciones, como por ejemplo evitar que el campo de Nick sea renderizado empleando la propiedad #access. El módulo es altamente personalizable, recomendado como buena alternativa para un minichat.


May 10 2009

Módulos útiles para SEO en Drupal

Cuando se construye una solución web, uno de los temas que más interesan y de gran relevancia es la labor de posicionamiento. Drupal, tiene una serie de módulos que pueden ayudar en esta labor y a manera de resumen quiero compartir estos:

XML Sitemaps: Este módulo, se encarga de la generación automática de mapas de sitio XML para motores de búsqueda. No solo genera el mapa XML, como añadido, los envía cada vez que el contenido cambia o se ejecuta Cron.

NodeWords: Su principal funcionalidad es ayudar con el metaetiquetado del sitio. Este módulo permite la creación de description y keywords que pueden ser declaradas de manera global, por término o por nodo.

LinksChecker: Interesante módulo que chequea el sitio a fin de saber si hay enlaces rotos en algún lugar. Útil para evitar la perdida de usuarios y de pagerank.

PathRedirect: Útil para migraciones de contenido o cambios en la URL. Este módulo se encarga de lo necesario para que las rutas y url queden correctamente redireccionadas.

Es solo un corto resumen seguro que hay más. ¿ Conoces algún otro ?


May 9 2009

Código PHP en Blogger, formateando tu código

Casualmente hoy tuve la necesidad de insertar código PHP en mi blogger, me sorprendió el hecho de que no existiera algún tipo de etiqueta (o no a primera vista) para insertar código y que fuese formateado automáticamente. Googleando un poco me encontré con un blog (web2development) donde el autor comentaba una posible solución con un script que el mismo generó. Sin embargo era necesario que ver el código fuente una vez corrido el script para obtener finalmente el resultado (script formateado). Realicé unas pequeñas mejoras al script y decidí alojarlo en nuestro servidor para que sirva como herramienta para mí y quien lo necesite. Puedes emplear el siguiente enlace para formatear tus códigos en PHP (Inicialmente PHP, quisiera más adelante añadir para otros lenguajes). Formatea Tu Código No estaría completo este post si no incluyera el código del script con las modificaciones que realicé. Básicamente el script imprime el resultado en un div aparte; también preferí insertar un salto en html en la línea quince (15). Se agregaron algunas lineas para cambiar los caracteres que causaban conflictos. Almacené temporalmente el resultado del script en un archivo para luego obtener directamente su código fuente y generarlo para uso del usuario.

1 <!— Form for code –>

2 <form action=”<?php echo $_SERVER['PHP_SELF']; ?>” method=”post” style=”margin-bottom: 40px;”><div id=”formulario”>

3 <textarea rows=”20″ cols=”80″ name=”codigo”></textarea><br />

4 <input type=”submit” name=”enviar” value=”Formatear” /></div>

5 </form>

6 <?php

7 if( !empty( $_POST['codigo'] ) ) {

8 $codigo = $_POST['codigo'];

9 $codigo = str_replace( “\t”, ” “, $codigo );

10 $codigo = highlight_string( stripslashes( $codigo ), true );

11

12 $line = 1;

13 $buffer = array();

14 $cod = explode( “<br />”, $codigo );

15 foreach( $cod as $codLine ) {

16 $buffer[] = “<b>$line</b>&nbsp;&nbsp;” . $codLine;

17 $line++;

18 }

19

20 $codigo = implode( “<br />”, $buffer );

21 // HACK:

22 $codigo = str_replace( “<b>1</b>&nbsp;&nbsp;<code>”, “<code><b>1</b>&nbsp;&nbsp;”, $codigo );

23 echo ‘<div id=”formated” style=”border: double #dfdfdf;”><h3> Este es tu código formateado </h3>’;

24 echo ‘<p>’.$codigo.‘</p><hr />’;

25 //Gets the source from a file previously created and modified

26 $abrir=fopen(“tmp.txt”, “w”); //open file

27 fwrite($abrir, $codigo); //save code obtained previously

28 fclose($abrir); //close file

29 $url = ‘http://formatealo.terysoftware.com/tmp.txt’;

30 $lineas = file($url);

31 for ($i = 0; $i <count($lineas); $i++) {

32 $resultado = $resultado.htmlentities($lineas[$i]).“<br />”;

33 }

34

35 echo ‘<h3>Inserta este código en tu sitio </h3>’.$resultado.‘</div>’;

36 }

37 ?>

38

39 </div>

Sin duda se pueden mejorar algunas cosas, espero alguien pueda ayudar a mejorar el código. Los recursos empleados fueron: http://www.php.net/manual/es/function.fopen.php http://www.php.net/htmlentities http://informatica-practica.net/solocodigo/index.php/2007/12/27/mostrar-codigo-fuente-de-una-pagina-con-php/ web2development El código formateado puedes pegarlo sin inconveniente en el editor por default que trae el blogger. Si tienes algún script que realice la misma función para otros lenguajes podríamos publicarlo también. Valga mencionar que al publicar obtengo un error de TAGS no vaĺidos, por lo que marco el check para que deje de verificar el post actual. Fuente: http://desarrolladoryempresario.blogspot.com/2009/05/codigo-php-en-blogger-formateando-tu_08.html

Mar 11 2009

Drupal 5 - Corregir error de validación XHTML por id “edit-submit”

Drupal 5 presenta un error al validar con estandar XHTML dependiendo del template que se emplee. Por defecto drupal no alterna los identificadores de los diversos inputs que puedan haber en una misma página; por lo que se presenta un error de id duplicado en la validación.

Para solucionar dicho inconveniente pueden agregarse las siguientes lineas al archivo template.php ya sea del engine o del theme.

/**
* Arregla la duplicación de id's "edit-sumit".
*/
function phptemplate_submit($element) {
  static $dupe_ids = array();
  if (isset($dupe_ids[$element['#id']])) {
    $dupe_ids[$element['#id']]++;
    $element['#id'] = $element['#id'] .'-'. $dupe_ids[$element['#id']];
  }
  else {
    $dupe_ids[$element['#id']] = 0;
  }
  return theme('button', $element);
}

Mar 1 2009

Detectar navegador usando PHP.

Muchas veces es bastante útil el detectar el navegador que usa el cliente que se conecta a fin de saber si soporta ciertas funcionalidades o simplemente para hacerle cargar una hoja de estilos diferente. Se puede hacer a través de html, sin embargo una manera elegante de hacerlo es haciendo uso de PHP. Para esto, podemos escribir una función que nos detecte el navegador cliente.

<?php
function ObtenerNavegador($user_agent) {
     $navegadores = array(
          'Opera' => 'Opera',
          'Mozilla Firefox'=> '(Firebird)|(Firefox)',
          'Galeon' => 'Galeon',
          'Mozilla'=>'Gecko',
          'MyIE'=>'MyIE',
          'Lynx' => 'Lynx',
          'Netscape' => '(Mozilla/4\.75)|(Netscape6)|(Mozilla/4\.08)|(Mozilla/4\.5)|(Mozilla/4\.6)|(Mozilla/4\.79)',
          'Konqueror'=>'Konqueror',
          'IE7' => '(MSIE 7\.[0-9]+)',
          'IE6' => '(MSIE 6\.[0-9]+)',
          'IE5' => '(MSIE 5\.[0-9]+)',
          'IE4' => '(MSIE 4\.[0-9]+)',
);
foreach($navegadores as $navegador=>$pattern){
       if (eregi($pattern, $user_agent))
       return $navegador;
    }
return 'Desconocido';
}
?>

Luego se puede agregar un condicional que realice una acción según cada resultado. Basado en: http://www.webintenta.com/detectar-el-navegador-con-php.html


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


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 =&gt; array(1) {
	["some_menu"]=&gt;  array(3) {
		["attributes"]=&gt;  array(1) {
			["title"]=&gt;  string(33) "Titulo al posar el cursor"
		}
		["href"]=&gt;  string(6) "node/6"
		["title"]=&gt;  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 18 2008

Como actualizar Drupal

Generalmente Drupal libera de manera periódica actualizaciones, tanto de cada uno de sus módulos como del core. Generalmente actualizar un módulo es bastante simple, sin embargo, la actualización del core casi siempre puede generar traumatismos si no se realiza de una manera adecuada. Cuando se realiza la actualización de core de nuestras soluciones Drupal se sigue el siguiente procedimiento:

1. Se descarga y descomprime la versión a la cual se va a a hacer el update.
2. Se copia dentro de la versión los archivos que por configuración del sitio no deben sufrir cambios. (Nosotros realizamos copias de la carpeta sites, y files).
3. Se ingresa al sitio como administrador y se deshabilitan todos aquellos módulos que no vengan incluidos en el core de Drupal.
4. Se sube la actualización al servidor sobreescribiendo aquellos archivos que se encuentren duplicados.
5. Se lleva a cabo la ejecución del script update.php (http://sitio.com/update.php)
6. Una vez terminada la actualización, se habilitan de nuevo los módulos extras.

Siguiendo este proceso se puede evitar de manera sencilla traumatismos en las actualizaciones. Es sumamente importante que los scripts de update e install no estén al acceso del publico. Esto porque un usuario anónimo podría llevar a cabo un downgrade de algún modulo o tratar de instalar de nuevo Drupal. Por esta razón es recomendable retirar estos scripts del raíz.


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.


Nov 20 2008

Construyendo el portal de Tery Software - Maqueteado

Primero que todo se realiza el maqueteado de lo que será el sitio web, es decir una especie de croquis donde se pueda apreciar la distribución de información y la diagramación. Al maquetear tenemos una visión futurista, imaginamos la información, la ubicación, colores, animaciones, etc…

El mayor énfasis que se hizo en el maqueteado fue en un portal orientado al usuario final, de navegación simple y cómoda, sofisticado, estético, con la información a la mano, cumpliendo los estándares de codificado y garantizando una página atractiva a los motores de búsqueda (Clave en el posicionamiento).

El primer paso es crear la estructura en XHTML, la ídea principal es hacer uso correcto del lenguaje para garantizar una web con buena semántica y sin etiquetas de estilo impropias (Ej: font, center, bgcolor). Lo que garantiza esto, es que la web sea entendida por la mayoría de navegadores, y además tener una web donde la semántica y estructura están claramente separadas del estilo visual.

› Continue reading