De un tiempo hacia aquí se están popularizando de sobremanera los menús desplegables, pero como en todos los ámbitos del diseño, no todos son igual de bonitos ni quedan igual de bien.

Continuar leyendo

Mu Connect es una librería JS que nos facilitará la tarea de conectar con Facebook desde nuestras aplicaciones. Al tratarse de una librería en Javascript nos permite visualizar esta conexión como una capa superior a nuestra aplicación ofreciéndola como un extra más y hacer que nuestra aplicación no dependa de ella.

<div id="fb-root"></div>
 <script src="http://mu.daaku.org/m.js"></script>
 <script>
 // Inicializamos la librería con la API de nuestra Aplicación
 FB.init({ apiKey: '48f06bc570aaf9ed454699ec4fe416df' });

 // Controlamos el login al acceder
 FB.loginStatus(handleSessionResponse);

 // Activamos login
 $('#login').bind('click', function() {
 FB.login(handleSessionResponse);
 });

 // Activamos logout
 $('#logout').bind('click', function() {
 FB.logout(handleSessionResponse);
 });

 // Activamos disconnect
 $('#disconnect').bind('click', function() {
 FB.api({ method: 'Auth.revokeAuthorization' }, function(response) {
 clearDisplay();
 });
 });

 function clearDisplay() {
 $('#user-info').hide('fast');
 }

 // Gestionamos el login
 function handleSessionResponse(response) {
 if (!response.session) {
 clearDisplay();
 return;
 }

 // Preparamos la petición FQL
 FB.api(
 {
 method: 'fql.query',
 query: 'SELECT name, pic FROM profile WHERE id=' + FB.getSession().uid
 },
 function(response) {
 var user = response[0];
 $('#user-info').html('<img src="' + user.pic + '">' + user.name).show('fast');
 }
 );
 }
 </script>

 Continuar leyendo

David Walsh publicó hace unos días una implementación del método con flash para poder interactuar con el portapapeles desde nuestro Javascript

// HTML
<script type="text/javascript" src="ZeroClipboard.js"></script>
<textarea name="box-content" id="box-content" rows="5" cols="70">
 The David Walsh Blog is the best blog around!  MooTools FTW!
</textarea>
<br /><br />
<p><input type="button" id="copy" name="copy" value="Copy to Clipboard" /></p>

 Continuar leyendo

En OpenJS publican un interesante script para facilitarnos una forma de controlar el teclado desde Javascript. Debido a la facilidad con la que ha sido desarrollado permite realizar combinaciones de teclas de una forma fácil y sobretodo fácil de comprender al mirar el código.

shortcut.add("Ctrl+Shift+X",function() {
 alert("Hi there!");
});

Instalación

Al igual que cualquier script de Javascript la instalación comienza por la inclusión del fichero JS que contiene la lógica del script.

<script src="shortcut.js" type="text/javascript"></script>

Una vez incluido a nuestro proyecto, ya podemos indicar nuestras combinaciones de teclas.

Continuar leyendo

Ad Gallery es un plugin jQuery para crear una galería de imágenes / Showcase rápidamente.

El plug-in utiliza listas desordenadas y los convierte ofreciendo gran cantidad de opciones para una mejor personalización.

Continuar leyendo

Aquí se mencionará como utilizar la función de animación de jQuery y se demostrará su flexibilidad.

La sintaxis de uso es la siguiente:

$.animate(options, settings, callback); 
/* puedes reemplazar setting por duration (in milliseconds) o con palabras: 'slow', 'normal' o 'fast'.
callback es opcional */

A continuación la lista de las animaciones mas populares:

Continuar leyendo

Con la aparente decisión de que el nuevo estándar a ser adoptado por la comunidad desarrolladora web será HTML 5, existen ansias de disfrutar luego todas su bondades, aunque siento aún lejano su total uso dado lo lento que suele ser por parte de los usuarios la actualización de sus navegadores a uno más moderno y que soporte estas nuevas especificaciones, que ya han ido apareciendo. Pero eso no quita que desde ya comencemos a jugar un poco con él.

Ya he comentado sobre las características de este nuevo estándar, y en este momento nos concentraremos en una maqueta funcional utilizando las nuevas etiquetas y sus nuevas posibilidades. Es interesante saber que podemos utilizar elementos de HTML 5 en estos momentos aunque la mayoría de los browsers aún no lo soporten; esto se debe a que CSS puede dar estilo a cualquier etiqueta, aunque ésta prácticamente no exista (aún). Por ejemplo, si me da la gana puedo inventar una etiqueta propia y darle estilos:

Continuar leyendo

Tutorialzine comparte un buen tutorial con la fuente en la creación de un formulario de contacto de fantasía ajaxed que se construye con jQuery y PHP.

El formulario es no intrusivo y valida del lado del servidor:

Formulario de contacto con JQuery y PHP

Continuar leyendo