Javascript

Drag&Drop de elementos en una tabla

ByLuis June 30, 2009

Interesante Javascript que nos permite mover elementos (drag&drop) de las celdas de una tabla a otras, o incluso a otra tabla.

Drag and drop table content with JavaScript
Vía / Script & Style

Javascript | Spam | Trucos

Enlaza tu email sin miedo al spam

ByLuis March 30, 2006

El spam ha condicionado muchas prácticas que originariamente eran tan sencillas y poderosas como enlazar tu mail en la web.

Un truqui para evitarlo que en su día lo descubrimos en 604th.net:

function nospam(name,domain){

window.location = 'mailto:' + name + '@' + domain;

}

Cópialo tal cual sin cambiar nada y súbelo como emailnospam.js. Recomendamos subirlo a una carpeta en la que guardes los javascripts como por ejemplo la carpeta js. Si no te apetece crearla, súbelo a la raíz de tu ftp.

Luego añade lo siguiente entre la línea <head> y </head> de los documentos de tu web:

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

Si lo has subido a la raíz elimina la ruta a la carpeta “js”. Quedaría así:

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

Ya solo queda que escribas tu mail enlazado en la parte de la web que quieras sustituyendo la palabra ejemplo y dominio.com por lo que corresponda a tu cuenta de email:

<a href="javascript:nospam('ejemplo','dominio.com');">Contáctame</a>

Javascript

Funciones en Javascript

ByLuis October 13, 2009October 14, 2009

Normalmente el uso que hacemos de las funciones en javascript es bastante sencillo, pero en algún otro momento puede que necesitemos un uso más avanzado.

El tutorial que os paso explica detalladamente todos los usos que podemos realizar de funciones. Lo que yo desconocía era el uso de callee, que tiene un puntero a la función que se está ejecutando en ese instante, fundamental para la recursividad:

alert((function(n){ if(n <= 1){return 1;}else{return n*arguments.callee(n-1);}})(10));

Functional Javascript

Desarrollo web

Consejos para desarrollar cumpliendo estándares

ByLuis June 4, 2008

Buenos consejos a tener en cuenta cuando se trata de desarrollar cumpliendo estándares web.

Menos es más, no uses mas código del necesario
No uses CSS o Javascript dentro del HTML, ya sea en las etiquetas como en el head.
Usa código semántico, las cabeceras mediante etiquetas h1, h2, …, resaltar mediante strong, …
No uses meta etiquetas redundantes
Usa microformatos para hacer tu sitio legible
Usa tablas solo para mostrar tablas
Usa rel=”external” para enlaces externos, no uses target=”_blank”, hazo mediante Javascript
No uses Javascript mediante enlaces
No muestres contenido importante mediante Flash o Ajax, siempre mediante HTML plano

10 Coding Guidelines for Perfect Findability and Web Standards

utilidades

UIzard: herramienta de desarrollo via Ajax

ByLuis June 17, 2009

UIzard es un entorno de trabajo open source vía web que utiliza Ajax, y que funciona en varios navegadores Firefox y Safari (la versión para IE está siendo optimizada).

Se trata de un GUI muy completo en el que se pueden realizar páginas web, añadiendo elementos, con orígenes de datos, formularios, …
La mayor parte viene en coreano, pero creo que es bastante claro para poder entenderlo facilmente.
UIzard
Vía / @knight

Javascript

Live Validation: validación de informacion en tiempo real con Javascript

ByLuis September 13, 2007

Live Validation es una librerÃa Javascript que nos permite validar en tiempo real la informaciÃ³n que se introduce en campos de texto.

La nomenclatura y los parÃ¡metros de la validaciÃ³n son similares a los que se encuentra en el framework Ruby on Rails, pero sin ser necesario Ruby, lÃ³gicamente.

Un ejemplo de uso serÃa el siguiente:

var sayHello = new LiveValidation( "sayHello", { validMessage: "Â¡AquÃ estoy!" } );
// AÃ±adir mensaje de error
sayHello.add( Validate.Presence,
{ failureMessage: "No me ignores" } );
// Formato del campo
sayHello.add( Validate.Format,
{ pattern: /^hola$/i, failureMessage: "Tienes que decir 'hola'" } );

Live Validation

VÃa / WebAppers

Javascript

Tutorial de Drag&Drop de capas con jQuery UI

ByLuis May 25, 2010

Últimamente, algunas webs como la BBC han modificado su diseño para hacerlo modular y permitir que el usuario realice Drag&Drop de los módulos para colocarlos cómo más le guste, algo que Netvibes o iGoogle ya hacían hace bastante tiempo. Afortunadamente, ahora con jQuery UI se puede realizar de forma muy sencilla.

El tutorial que enlazo explica paso a paso cómo hacerlo haciendo uso de jQuery, jQuery UI mediante los sortables y jQuery Cookies para trabajar con cookies de forma facil (y poder recuperar la configuración cuando el usuario vuelva a conectarse).

$('#sidebar .sortable-list').sortable({
    axis: 'y',
    containment: 'parent',
    forceHelperSize: true,
    forcePlaceholderSize: true,
    handle: '.section-title',
    opacity: 0.8,
    placeholder: 'placeholder',
    update: function(){
        $.cookie('sidebar-cookie', getItems('sidebar'));
    }
});

jQuery: Customizable layout using drag and drop

Vía @kingsleyphls

Similar Posts