Veamos el proceso:

1. Accedemos a Facebook Developers – Social Plugins
2. Elegimos el botón, en nuestro caso sería Like Button (Me gusta) pero el proceso es análogo para cualquier otro
3. Rellenamos los datos necesarios: la URL a apuntar desde el botón, el estilo, el tamaño, etc.
4. Obtenemos el código con el botón “Get code”

Tenemos dos posibilidades:

• HTML5
• XFBML

En ambos casos debemos referenciar la SDK de Javascript de Facebook. Con sólo estos pasos ya tenemos el botón funcionando en nuestro sitio.

A día de hoy, es básico integrar las redes sociales en nuestros sitios web para aprovechar todas las sinergias posibles. Un ejemplo de ello es Twitter y las posibilidades que nos ofrece: compartir enlaces, twittear, seguir, etiquetar o mencionar.

Podemos dejar al usuario, que copie nuestra URL y se encargue de difundirnos voluntariamente o podemos intentar facilitarle la vida. Si usas WordPress puedes usar uno de los múltiples plugins disponibles. Si no lo usas o quieres hacerlo a mano incluso con WordPress sigue los pasos que aquí vamos a comentar.

Primero, accedemos a la web de recursos pertinente de Twitter: Botones de Twitter. Elegimos el botón, por ejemplo “Seguir” y rellenamos en el formulario que aparece. Dentro de él:

• Nombre de usuario
• Si el botón es grande
• Idioma

Y nos devolverá el enlace listo para insertar en código HTML.

• Página oficial del Primer Ministro Británico: http://www.number10.gov.uk
• Mozilla Labs: http://mozillalabs.com
• Spotify: http://www.spotify.com
• Mashable: http://mashable.com
• Stallone: http://sylvesterstallone.com
• Jane Fonda: http://janefonda.com
• Tom Jones: http://www.tomjones.com
• Fresh Apps: http://www.freshapps.com
• ZDNet: http://news.zdnet.com

¿Qué otra web famosa o de empresa u organismo de relevancia conoces que esté hecha con WordPress? A ver si entre todos, vía comentarios, conseguimos hacer una lista de más de 100 webs de este tipo que usen webs. Porque no sé si lo sabéis pero WordPress está detrás del 15% de las páginas web más visitadas.

Por supuesto, Linux Hispano funciona bajo WordPress y otro proyecto personal que llevo adelante con Alberto y otro amigo, Red de Autores, también.

Un caso es éste, CometDocs, un servicio en línea gratuito para convertir ficheros. Su objetivo es facilitarnos la tarea: lo subimos, elegimos el tipo al que queremos convertir el fichero, introducimos el correo al que queremos que nos envíen el mismo y lo enviamos. Al cabo de un momento lo tendremos convertido en nuestra bandeja de entrada.

Lo único que no me gusta es el tema de tener que dar el correo, pero también es cierto, que es una buena forma para enviarte el documento por si acaso tarda el proceso y no queremos tener al usuario “esperando”.

Las posibilidades podéis mirarlas dentro de las FAQ y básicamente tenemos conversiones de documentos ofimáticos:

• De formatos de edición a PDF
• De PDF a formatos de edición (éste parece más útil)
• De XPS a formatos de edición
• Entre otros formatos y algunas cosas curiosas como convertir ficheros entre sus diferentes formatos de saltos de línea: UNIX, DOS y Mac.

Ejemplo

Código fuente del ejemplo

1. Primer elemento
2. Segundo elemento
3. Tercer elemento

Si por cualquier razón queremos empezar por un elemento diferente a uno (por ejemplo porque queramos continuar la lista anterior en otro punto del documento HTML), tenemos el atributo “start“, veamos un ejemplo de su uso:

4. Cuarto elemento
5. Quinto elemento

El código fuente sería:

<ol start="4">
	<li>Cuarto elemento</li>
	<li>Quinto elemento</li>
</ol>

Sin usar este atributo no podríamos haberlo hecho.

Bien, con un sencillo paso tendremos este cliente de base de datos instalado en nuestra máquina:

ahornero@6581-D:~$ sudo apt-get install phpmyadmin

Después reiniciamos el servidor:

ahornero@6581-D:~$ sudo service apache2 restart

Y listo. Si tenemos algún problema accediendo a: http://elnombredetuhost/phpmyadmin crearemos la siguiente ruta simbólica:

ahornero@6581-D:~$ sudo ln -s /usr/share/phpmyadmin /var/www/phpmyadmin

Lo que me ha parecido curioso de todo esto es que me he percatado de que mi navegador no estaba actualizado gracias a WordPress. Como sabréis, Linux Hispano está corriendo, desde hace casi dos años, sobre este conocido y bien reconocido CMS, y al dirigirme al panel de administración me he encontrado lo siguiente:

Con sistemas así de robustos y preocupados por la seguridad da gusto. Y sí, acabo de actualizar Google Chrome en esta máquina.

Espacio de almacenamiento

El primer factor que salta a la vista cuando buscamos alojamiento web es el espacio en disco que nos ofrecen. Este es uno de los problemas que nos quitamos de encima cuando tenemos un servidor casero, pero que puede ser un factor limitante en un servidor externo. Recuerdo cuando hace años ofrecían 50 MB por un precio que parecía barato y hoy en día incluso llegan a ofrecer espacio ilimitado en paquetes básicos. Con el tiempo esta limitación desaparecerá pero mientras tanto es una cifra a tener en cuenta.

Nos limitará sobre todo a la hora de subir contenido multimedia o ficheros de datos. Con 100 MB tenemos para alojar cualquier CMS con contenido gráfico incluido.

Volumen de transferencia

Es la cantidad de datos que nos permiten transmitir cada cierto tiempo, suele ser mensualmente. Por ejemplo, si tenemos 10 GB/mes de datos, tendremos la posibilidad de que los clientes (los visitantes) se descarguen a lo largo del mes 10 GB de datos de nuestra web. Esta cantidad en realidad no es demasiado alta, porque como sabréis, los lenguajes del lado del servidor como por ejemplo PHP, generan contenido HTML que es el que transmiten. Este contenido además variará en función de a qué secciones, comentarios, plugins… se carguen.

Para hacer un estudio del volumen de transferencia que necesitamos, debemos hacer un estudio empírico, es decir con los datos que vayamos obteniendo de nuestro proveedor de hosting. De todas formas os aseguro que los paquetes de alojamiento suelen venir bien ajustados entre espacio de alojamiento y volumen de transferencia, por lo que si no tenéis mucho contenido gráfico o muchísimas visitas, este factor no será limitante.ç

Sistema operativo

Los proveedores de servicio web pueden funcionar bajo distintos sistemas operativos. La opción mayoritaria es GNU/Linux, la segunda más popular Microsoft Windows Server y en raras ocasiones he visto otros (veáse cualquier rama de Unix como Solaris, porque Mac OS X sí que es raro encontrarlo). Normalmente no habrá duda, mucho mejor un servidor Linux que uno Windows. La primera razón es por todas las ventajas que tiene Linux en el mundo del servidor profesional en comparación con Windows y que no me voy a parar a detallar; y la segunda de ellas por precio. Un servidor Windows será casi siempre más caro que uno con Linux, la razón de este hecho tenéis que buscarlo en el coste de las licencias del primero.

¿Por qué nos puede interesar un servicio con Windows? Si utilizamos tecnología .NET para el desarrollo de nuestras aplicaciones web o tenemos necesidad de albergar nuestros datos sobre una plataforma SQL Server, esta opción será casi limitante. En esta misma revista expliqué que podemos usar XSP o Apache con Mono para dar servicio a aplicaciones con tecnología ASP.NET, pero comercialmente esta opción está poco extendida. Para cualquier otra tecnología del lado del servidor (de las mayoritarias) nos servirá un servidor con Linux.

Disponibilidad de tecnologías

Muy estrechamente relacionado con el punto anterior. ASP.NET es el caso claro de una tecnología que nos limitará mucha nuestra elección. En otros casos como Ruby (para Rails) o Python (para Django, Turbo Gears…) este factor también es importante.

Aunque el sistema sea Linux no quiere decir que vaya a soportar estas tecnologías. PHP es casi un estándar y no creo que tengamos problemas. También lo es en el mismo sentido MySQL. Pero si utilizamos Python, Ruby, PostgreSQL o cualquier otra tecnología, debemos documentarnos previamente para ver que no tendremos problemas (es posible que aunque no esté instalado puedan instalarla).

Número máximo de procesos ejecutándose simultáneamente

Si tenemos una cuenta en un host compartido con otros usuarios, para evitar que el rendimiento decaiga, las empresas vendedoras de hosting limitan en ocasiones el número de procesos que podemos ejecutar simultáneamente. El problema puede venir con ciertas tecnologías que crean procesos nuevos con nuestro usuario y pueden llegar al tope permitido.

Situación e idioma del soporte

La situación del servidor también es importante. A algunos les puede interesar que el servicio este en España o fuera de España por temas fiscales. Otro muy importante es el idioma del soporte. Aunque para muchos no sea un problema comunicarse en inglés, si preferís hacerlo en español buscad una empresa hispanohablante, no tienen por qué ser españolas, hay muchas empresas sudamericanas que dan un servicio excelente.

Cuando tenemos un problema queremos una comunicación los más fácil y rápida posible. El idioma es sin lugar a dudas un punto esencial.

Opiniones en la red

Aunque siempre será mejor una opinión de un usuario que conozcamos de un servicio que de un sitio de opinión y recomendaciones en la red, antes de comprar un servicio, si no tenemos ninguna información disponible, os recomiendo mirad por la red a ver qué dicen de tal empresa. Puede hacernos una idea, aunque como digo, siempre será más relevante una opinión de un compañero o amigo.

Otras características

En este punto englobo cosas como la disponibilidad de plantillas, la instalación de ciertos CMS de forma automatizada, la posibilidad de tener cuentas de correo en el servidor, si tenemos acceso por SSH, FTP sobre canal seguro… y todas aquellas más breves de explicar pero no por ello menos importantes. Cuantas más opciones de este tipo traiga mejor, pero no será determinantes en la mayoría de los casos.

De las que he comentado, la posibilidad de tener cuentas de correo electrónico es la que me parece menos útil. El servicio de correo electrónico que suelen ofrecer estas compañías deja mucho que desear en comparación con soluciones como la que proporciona Google a través de Google App.

Cuando estás realizando aplicaciones HTML resulta fundamental insertar dicho código en una página web. Existen muchas maneras de hacerlo: con iframe, con embed, etc. Pero la recomendada por W3C es utilizando la etiqueta object:

Demostración

Código fuente de la demostración

Bien, veamos como instalarlo en nuestro sistema:

Hacemos un checkout del repositorio del mozilla en gibhub:

ahornero@6581-D:~$ git checkout http://github.com/mozilla/chromeless.git

Si todo ha ido bien, comprobamos el contenido del directorio que nos acabamos de traer. Debe de ser el siguiente:

ahornero@6581-D:~$ ls chromeless/
impl README.md run template ui

Y finalmente lanzamos el run que se encuentra en el directorio:

ahornero@6581-D:~$ ./run

El resultado de su ejecución no lo voy a poner, prefiero que lo probéis, será una grata sorpresa.

Por cierto, he supuesto que tenéis instalado Firefox > 3.6, ya que Chromeless usa el mismo motor de renderizado, de no ser así tendréis que instalar las dependicias con XULRunner.

Aunque es difícil preservarla al cien por cien, sí es cierto que en cierta medida podemos protegerla siguiendo consejos como los que se muestran a continuación.

1. Ten preguntas de seguridad tan privadas y fuertes como tus contraseñas

Si tenemos una contraseña muy potente pero a cambio, la pregunta de seguridad por si se nos olvida la contraseña es fácil de adivinar, estamos cometiendo un error. Debemos usar una pregunta de seguridad del mismo nivel de seguridad que la contraseña o por el contrario, podremos tener problemas de seguridad.

2. Crea contraseñas que sean a la vez seguras y fácil de recordar

Tener contraseñas seguras es muy importante, pero siempre deberemos poder recordarlas en todo momento. Hay multitud de trucos para tener contraseñas atípicas (que no vengan en diccionarios de programas de fuerza bruta) y que sean a la vez seguras y fáciles de memorizar.

3. Utiliza cuentas de correo desechables para huir del spam

Con lo fácil que es crearse cuentas de correo, podemos usar una de ellas sólo para registros, de forma que no tengamos que preocuparnos del spam en nuestras cuentas de uso personal o profesional.

4. Protégete contra las distracciones de la mensajería instantánea

Siempre que puedas, si necesitas tiempo y concentración, nada mejor que el estado invisible que nos ofrecen las redes de mensajería instantánea para conseguir centrarnos sólo en lo importante y huir de las distracciones.

5. Utiliza bloqueadores de anuncios

Los anuncios en forma de ventana emergente son verdaderamente molestos, utiliza bloqueadores disponibles en todos los navegadores de código abierto.

6. Utiliza HTTPS siempre que sea posible

Una forma simple y segura de asegurar nuestra conexión. En Gmail, Facebook, Twitter… podemos configurarlo para que sea la opción por defecto.

7. Cambia el género en función del tipo de anuncios que te molesten menos

Depende del género, las plataformas anuncian un determinado tipo de anuncios. Dependiendo de qué nos moleste menos, podemos cambiarlo en nuestro registro.

8. Invéntate tu fecha de nacimiento cuando te des de alta

¿Para qué quieren saber tu fecha de nacimiento los sitios web? Normalmente para nada, siempre podremos introducir una fecha falsa, ahora eso sí, debemos usar siempre la misma y acordarnos por si acaso la fecha sirve de dato para recuperar la contraseña.

9. No guardes la dirección de casa en tu GPS y no uses servicios como Foursquare

Almacenar la dirección de tu casa en el GPS o en el móvil, puede ser un problema  si lo perdemos, nos lo roban o en el caso del móvil, si nos infecta un malware. Servicios como Foursquare, Facebook Places o Google Latitude son fuentes de pérdidas de privacidad enormes, porque aparte de saber sobre ti, saben dónde has estado y dónde estás.

10. Utiliza tarjetas de crédito temporales para asegurar las compras en línea

Las tarjetas temporales o de prepago, son un excelente aliado en la seguridad a la hora de realizar compras en línea, en caso de problemas, siempre serán limitados en el tiempo y en el daño económico.

Sólo es eso, un navegador ligero a pantalla completa para evitar distracciones y centrarnos en los que nos gusta. La Web.

Para instalarlo en Linux aun no han sacado ningún .deb o .rpm ni se encuentra en un repositorio para APT o YUM y mantenernos actualizados. Pero no os preocupéis, bastará con descargarnos este tar.gz, descomprimirlo y lanzar el binario compilado: Webian Shell, desde consola podemos descomprimirlo así:

ahornero@6581-D:~/Downloads$ $ tar -zxvf webian_shell_0.1-linux_xx.tar.gz

y lanzarlo:

ahornero@6581-D:~/Downloads/Webian Shell$ ./Webian\ Shell

Si tu versión es 64bits o quieres probarlo en Windows o Mac, usa el siguiente enlace: webian.org/shell/download/

A continuación una captura del producto, esto promete:

Está claro que seguimos esperando a que Rovio lance la versión para la Ubuntu Software Center, pero lo que hoy os presento es una versión, ahora sí, multiplataforma. La única dependencia es usar un navegador web Google Chrome o Chromium.

• Así, para jugar directamente desde chrome.angrybirds.com
• Y para instalarlo desde la Chrome web store el siguiente enlace.

1. data()

El método data nos permite manejar datos de cualquier elemento del DOM de una forma segura, evitando referencias circulares y los efectos sobre la memoria de las mismas. Veamos un ejemplo:

<div data-type="page" data-hidden="true" data-options='{"name":"John"}'></div>
$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";

O lo que es lo mismo:

$("div").data("role", "page");
$("div").data("hidden", "true");
$("div").data("role", {name: "John"});

Referencia completa en la documentación jQuery de data()

2. stop( [limpiarCola ], [saltarAlFinal] )

El método permite parar, la animación que está actualmente en ejecución. Es verdaderamente útil cuando manejamos imágenes.

Veamos un ejemplo de llamada:

$(this).find('img').stop(true, true).fadeOut();

Referencia completa en la documentación jQuery de stop()

3. toggleClass()

Permite conmutar clases, de forma, que si el elemento tiene ya la clase, la elimina y viceversa. El siguiente código:

$('#home').toggleClass('active');

Hace exactamente lo mismo que este:

if ($('#home').hasClass('active')) {
    $('#home').removeClass('active');
}
else {
    $('#home').addClass('active');
}

Referencia completa en la documentación jQuery de toggleClass()

4. delay(duracion, [nombreCola])

Permite retrasar la ejecución de las funciones que se ejecutan en una cola. Muy útil con las animaciones.

$('#content').slideUp(300).delay(800).fadeIn(400);

Referencia completa en la documentación jQuery de delay()

5. each()

Este método nos permite iterar sobre estructuras del DOM de una forma simple en una sola línea. Cada vez que se llama, itera una vez comenzando en el elemento 0 hasta el final de la estructura. Veamos un ejemplo:

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Mango</li>
    <li>Blueberry</li>
    <li>Watermelon</li>
</ul>

Referencia completa en la documentación jQuery de each()

6. size()

La llamada a esta función es equivalente a la llamada al atributo length. Es mejor usar el atributo, pero siempre viene bien saber más posibilidades.

var size1 = $("li").size(); // es igual a
var size2 = $("li").length;

Referencia completa en la documentación jQuery de size()

7. closest(selector)

Obtiene el primer ancestro (elemento superior en el árbol) que concuerda con la regla incluida en el selector.

$('li.item-a').closest('ul').css('background-color', 'red');

Referencia completa en la documentación jQuery de clostest()

8. position()

El método nos devuelve la posición de un elemento respecto a otro, a diferencia del método offset que lo hace respecto del documento. Sin lugar a dudas, el método más útil para situar elementos de forma relativa a otros:

var p = $("p:first");
var position = p.position();
alert("left: " + position.left + ", top: " + position.top);

Referencia completa en la documentación jQuery de position()