microTECHing
28Mar/110

Activar una opción de un menú principal cuando navegamos por un submenú

En muchos CMS’s nos pasa que cuando creamos un menú con un enlace a una sección, se active correctamente cuando estamos justo en esa página, pero pieda la clase css que lo marca como activo en cuanto navegamos por las páginas hijas.

Pueden haber distintas soluciones dependiendo del cms que estemos utilizando y de la arquitectura de las urls, pero... si podemos detectar un trozo de nuestra url que no cambia cuando navegamos por la sección, y nunca se encuentra cuando navegamos por el resto, como por ejemplo ‘/blog/’, podemos hacer una ñapa por jquery para que se active la opción de menú poniendo la clase css que corresponda.

El código sería algo como:

<script type="text/javascript">

var sUrl = document.location.href;
if (sUrl.indexOf('/blog/') > 0) {
    jQuery("ul.menu > li > a > span:contains('Blog')").parent().parent().addClass('active current');
}
</script>

Lo que hace es detectar que la url contiene la cadena de texto que identifica que estamos navegando por nuestra sección, y coge el elemento de esa opción del menú por jquery, y le pone al elemento que corresponde la clase css que corresponde.

Si esto os pasa usando Joomla! y con url’s amigables, este plugin 'Active Parent Menu' que hemos desarrollado os puede servir de ayuda:

descargar

28Mar/110

Creando un plugin de Joomla!

Crear un plugin de Joomla! es algo bastante sencillo.

En resumen, un plugin básico constaría de un archivo php y otro xml con el mismo nombre.

El nombre de los archivos es importante porque participa en formar el nombre de la clase del php.

Haremos que nuestra clase herede de JPlugin, y que sobrescriba los métodos correspondientes a los eventos que queramos.

Un esqueleto de plugin básico sería:

<?php

defined( '_JEXEC' ) or die( 'Acceso Restringido' );
jimport( 'joomla.plugin.plugin' );

class plgContentMyPlugin extends JPlugin {

function plgContentMyPlugin( &$subject ) {
    parent::__construct( $subject );
}

function onBeforeDisplayContent(&$article, &$params, $limitstart=0) {

    $plugin =& JPluginHelper::getPlugin('content', 'MyPlugin');
    $pluginParams = new JParameter( $plugin->params );
    $mensaje = "";

    $mensaje = $pluginParams->get('mensaje', 'Hola Mundo');

    $salidaPantalla = '<h2>' . $mensaje . '</h2>';

    return $salidaPantalla;
}

}
?>

Podéis leer una explicación más completa y ver qué forma tiene que tener el xml en este post de nosolocodigo.

Lo siguiente que tenéis que tener en cuenta, es qué evento queréis utilizar para realizar vuestro cometido.

Podéis ver una lista de eventos y algo más de información sobre la creación de plugins en esta página de la documentación oficial de Joomla!.

Con esto en principio ya lo tenéis todo.

Os recomendamos que después de documentaros, al final penséis en que plugin, de los que ya tenéis en la carpeta ‘/plugins/’, es el que realiza la acción que más se parece a la que queréis hacer, y lo cojáis como base para hacer el vuestro.

Como procedimiento, recomendamos, ocuparnos primero de la estructura del plugin y que funcione su instalación, para después, preocuparnos de la funcionalidad trabajando directamente con los ficheros de código, acordándonos antes de poner la opción ‘Informe de errores’ a ‘Maximo’ en la configuración global de servidor, para que veamos si tenemos algún error y no nos quede un pantallazo en blanco. xD

Por último, tened en cuenta grabar los archivos con codificación UTF-8 y hacer el zip con la opción de ‘Enviar a  -> Carpeta comprimida en zip’ de Windows o similar para que sea un zip lo mas estándar posible y no de problemas al instalarlo desde Joomla!.

Esperamos que os haya servido de ayuda!

25Mar/110

Expresion regular para comprobar un email

Aquí dejo la expresión regular para comprobar un email en .NET (me imagino que servira en otros lenguajes).


^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$

23Mar/1110

Agilizando el registro con Facebook Connect

Logo facebook developersVamos a intentar resumir lo que ya se ha hablado en tantos sitios sobre cómo se integra facebook-connect.

1º Documentarse:
Si queremos leer un poco de qué va esto, podemos partir de: http://developers.facebook.com/docs/guides/web/

2º Registrar aplicación:
Vemos que el primer paso es registrar nuestra aplicación y conseguir el famoso APP ID.
Para ello solo tenemos que ir a: http://developers.facebook.com/setup/
Debemos introducir el nombre de nuestra web, la url, y seleccionar el idioma.

Nos saldrá un pantalla diciendo como tenemos que validar nuestro usuario.
El mensaje es bastante mareante. Realmente lo único que tenemos que hacer es abrir una nueva pestaña y poner la url: http://www.facebook.com/confirmphone.php?,&confirm_phone=
Entonces al recibir el sms, ponemos el código que nos dan y listo.

3º Hola Mundo!:
Tras crear la aplicación, nos dará los datos del id y el código secreto (apúntalo!), y tendremos un código de ejemplo que se parecerá a esto:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_LA/all.js"></script>
<script type="text/javascript">
    FB.init({appId: '#FB_API_KEY#', status: true, cookie: true, xfbml: true});
</script>
<fb:login-button autologoutlink="true"></fb:login-button>

Con esto, ya tenemos el botón de facebook connect en nuestra página, que podrá usar el usuario para dar permisos a nuestra web a manejar el usuario de la sesión de facebook.

4º A funcionar!:
Ahora tenemos que hacer que si el usuario esta logeado ya mediante facebook, recoja los datos de la sesión, y los ponga en nuestro formulario.
Para ello, usaremos el método 'FB.getLoginStatus' y usaremos el API con el método 'FB.api' para recoger los datos del usuario de facebook conectado.
El código que tendremos que insertar después puede ser algo asi como:

<script type="text/javascript">
FB.getLoginStatus(function(response) { get_fb_user_data(response); });

FB.Event.subscribe('auth.login', function(response) { get_fb_user_data(response); });
</script>

Con esto, añadimos un manejador 'get_fb_user_data' para cuando se produzca el evento de 'login' recoger los datos, y hacemos que al cargar la pagina, compruebe el estado de la sesion y añada los datos del usuario al formulario con esa misma funcion.

Por supuesto, ni que decir cabe, que es más que recomendable, comprobar que exista la propiedad, y que su valor sea distinto de 'undefined'.
El código quedaría como:

<script type="text/javascript">

function get_fb_user_data(response){
    if (response.session) {
        // logged in and connected user, someone you know
        var uid = response.session.uid;

        FB.api(uid, function(response) {
            set_fb(document.forms.WBForm.Name, response.first_name);
            set_fb(document.forms.WBForm.Surname, response.last_name);
            set_fb(document.forms.WBForm.Email, response.email);
            var birthdate = get_fb(response.birthday);
            birthdateSplit = birthdate.split('/');
            set_fb(document.forms.WBForm.BirthDate, birthdateSplit[1]+'/'+birthdateSplit[0]+'/'+birthdateSplit[2]);
        });
    } else {
        // no user session available, someone you dont know
    }
}


function set_fb(elem, fb_elem){
    if (elem){
            if (elem.value == '' || (elem.value == '01/01/0001')){
                elem.value = get_fb(fb_elem);
            }
    }
}

function get_fb(elem){
    if (elem){
        if (typeof(elem) != 'undefined'){
            if (elem != 'undefined') {
            return elem;
            }
        }
    }

    return '';
}


</script>

Como veréis en la documentación, para recoger ciertos campos del usuario, son necesarios algunos permisos especiales.
Para solicitarlos, solo tenéis que añadir el atributo 'perm' al botón de login de facebook. Como:
<p><fb:login-button autologoutlink="true" perms="email,user_birthday,user_hometown,user_location,user_website"></fb:login-button></p>

Pues nada... Eso es todo.
Solo avisaros de que si queréis recoger datos como el teléfono, o la dirección de contacto, va a estar un poco difícil por ahora (23/03/2011), tal y como podemos ver en este hilo de meneame.

Happy coding!

23Mar/113

Videoconferencia online en tu web con Open Tok

Open tokSi queremos implementar videoconferencia en una web, debemos tener en cuenta el API de Open Tok.

Tiene muy buena pinta. Si alguno lo habeis usado ya, no dudeis en dejar un comentario con vuestras experiencias. xD

22Mar/110

Problemas al enviar boletines con Acymailing

Hoy me he encontrado con un problema un tanto extraño con el componente de envíos de boletines de joomla Acymailing. La cuestión es que al enviar un email de prueba me devolvió el siguiente error:

could not instantiate mail function

He probado a enviar un correo masivo desde herramientas de joomla y este si que se enviaba, por lo que la función mail de PHP funcionaba correctamente (¿porque no lo iba a hacer?).

Buscando por google he dado con la solución en el foro de los desarrolladores de este componente (aquí). Hay una opción en la zona de configuración. En la primera pestaña, la última opción de información del Remitente pone Agregar Nombres. Por defecto está marcado que sí. Le pones No y se soluciona el problema.

Debe ser un Bug del componente y quizá habría que depurarlo, ¿quién se anima? Si sabéis para que sirve esa opción seria de ayuda.