Cadena de texto multilínea en javascript

Parecerá una tontería pero seguro que muchos aún andan concatenando las líneas de un string con las ‘comillas’ y el ‘más’, al estilo:

var s = "Esto es un texto " +
"multilinea en javascript\n" +
"Gracias.";
alert(s);
/* Salida:
Esto es un texto multilinea en javascript
Gracias.
*/

No es mucho más sencillo, esto?

var s = "Esto es un texto \
multilinea en javascript\n\
Gracias.";
alert(s);
/* Salida:
Esto es un texto multilinea en javascript
Gracias.
*/

Happy codding!

Apprise: Una buena alternativa a los alert() de javascript

Son cada vez más los que piensan que no debemos utilizar el alert de javascript de cara al usuario final, pero los programadores estamos demasiado acostumbrados a utilizarlos y son nuestros compañeros de depuración en casos en los que no podemos gastar a ‘San Firebug’ ni similares.

Pues bien. Apprise es una alternativa muy ligera y elegante para sustituir a nuestros viejos alerts.

Además permite personalizar los textos y amplía alguna funcionalidad como podemos ver:

Alternativa al alert de javascript

Además, podemos fácilmente sobrecargar la función alert() para que al implementar ‘apprise’ no tengamos que ir cambiando los viejos alerts uno a uno, e incluso los podamos seguir usando.

if(document.getElementById) {
    window.alert = function(txt) {
        apprise(txt);
    }
}

Pues nada.

Esperamos que os guste y que os sirva.

Happy codding….

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.

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="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!