Gracias a @lmmartin hemos visto esta interesante web sobre patrones de diseño para Android.
Habrá que tenerla en cuenta. Además el diseño les ha quedado bastante majo. xD.
Colorear código fuente publicado en html en tu web (syntax highlight)
Siempre es de agradecer que el código fuente que se muestre en una página este coloreado según la sintaxis del lenguaje del código.
Para implementar esto en este mismo blog, estubimos barajando principalmente dos opciones: “Highlight.js” y “Code prettifier” de google; ya que ambos detectan el lenguaje de forma automática.
El primero, trabaja directamente sobre cualquier <pre><code> sin necesidad de añadir ninguna class a la etiqueta, en cambio, el de google requería añadir la class “prettyprint”, así que empezamos por probar el primero.
Para incluirlo, no hizo falta ni descargarlo. Solo tubimos que añadir en el head lo siguiente:
<script src="https://yandex.st/highlightjs/5.16/highlight.min.js"></script>
<link rel="stylesheet" href="http://yandex.st/highlightjs/5.16/styles/default.min.css">
<script>
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
</script>El resultado NO fué satisfactorio. Colorear, coloreaba; pero juntaba todo el código en una misma línea.
Le tocaba el turno al script de google.
Este si que hubo que descargarlo (almenos no encontré la opción para utilizar los servidores de google), y para añadirlo sin tener que reemplazar en base de datos todos los <code> por <code class=”prettyprint”>, lo hicimos de la siguiente forma:
<script src="/wp-content/prettify/prettify.js"></script>
<link rel="stylesheet" href="/wp-content/prettify/prettify.css">
<script>
jQuery(document).ready(function() {
jQuery('code').addClass("prettyprint");
prettyPrint();
});
</script>Con esto como podéis ver el resultado SI és el que esperábamos.
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:
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!
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})(\]?)$
Agilizando el registro con Facebook Connect
Vamos 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="https://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!