Tema: Javascript | Sentido Web

FUEL en Firefox 3

Thu, 03 Jul 2008 13:00:00 +0000

Ya hace tiempo hablamos de FUEL, un framework para desarrollar extensiones para Firefox. Ahora ya está disponible en Firefox 3, por lo que podemos ir aprendiendo y haciendo nuestras pruebas.

John Resig nos ofrece una serie de enlaces y ejemplos para empezar con FUEL:

FUEL - Página principal (API y ejemplos)
FUEL - Documentación (API)
FUEL - Presentación (John Resig)
FUEL - Presentación (Mark Finkle)
STEEL - Ejemplo versión para Thunderbird.

Simple Extensions in Firefox 3

Menú radial mediante XHTML

Fri, 20 Jun 2008 11:45:00 +0000

Buen tutorial que nos explica cómo realizar un menú radial, es decir, un menú en el que las opciones se sitúan alrededor de un punto.

El tutorial nos indica cómo crear la estructura XHTML, los estilos, y el código Javascript para que funcione el menú.

Siendo algo puristas, no me gusta el uso del XHTML y el de los estilos, incluso podría sobrar Javascript. El código XHTML no es semántico. Aúnque claro, quizás lo haya hecho porque la solución que os paso ahora no sirve para IE6.

El HTML sería el siguiente:

Y los estilos:

ul {
  width: 150px;
  height: 150px;
  display: block;
  padding: 0px;
  margin: 0px;
}
li {
  width: 48px;
  height: 48px;
  display: block;
  border: 1px solid #008585;
  background: #24B8B8;
  margin: 0px;
  padding: 0px;
  float: left;
  text-align: center;
}
li + li + li {
  margin-left: 50px;
}
li:first-child {
  margin: 0px 50px;
}
a {
  font-size: 250%;
  font-family: Arial;
  text-decoration: none;
  color: #DEDED2;
}

Javascript Tutorial - Radial Menus Part 1

Flashing de elementos con Mootools

Thu, 12 Jun 2008 09:30:00 +0000

Una librería para MooTools que permite realizar flash en los elementos. Permite indicar el color de origen, final, el número de repeticiones y el tiempo del efecto y la posibilidad de incluir propiedades al elemento (por ejemplo backgroud-color).

Su uso es sencillo y nos ofrece ejemplos de cómo utilizarlo:

/* flash on click */  
$('flash-link').addEvent('click', function () {  
  $('flash-me').flash('#fff','#fffea1',5,'background-color',500);  
});  
/* flash on ajax complete */  
$('flash-link-ajax').addEvent('click', function () {  
  //make the ajax call  
  var req = new Request({  
    method: 'get',  
    url: 'element-flashing.php',  
    data: { 'do' : '1' },  
    onRequest: function() {  },  
    onComplete: function(response) {  
      $('flash-me-ajax').set('text', response).flash('#fff','#fffea1',5,'background-color',500);   
    }  
  }).send();  
});  
/* flash on scroll completion */  
$('flash-link-scroll').addEvent('click', function() {  
  var scroller = new Fx.Scroll(window, {  
    onComplete: function() {  
      $('scroll-to-me').flash('#fff','#fffea1',10);  
    }  
  }).toElement('scroll-to-me');  
});

Eso sí, no olvidar que no hay que abusar de este efecto.

MooTools Gone Wild: Element Flashing

Vía / CSS Globe

Cargar contenido mediante el scroll usando jQuery

Thu, 05 Jun 2008 17:00:00 +0000

Un sencillo script realizado con jQuery que nos permite cargar contenido cuando llegamos al final del contenido mediante el scroll. Algo parecido os presenté hace ya tiempo, pero sin uso de librerías. En este caso, jQuery reduce el código para implementarlo.

Es importante recordar que el contenido importante no se debería cargar mediante Ajax, y si se hace así es necesario ofrecer una alternativa clásica.

Load Content While Scrolling With jQuery

Vía / Ajaxline

NitobiBug: debug para Javascript

Tue, 03 Jun 2008 12:45:00 +0000

NitobiBug es un script similar a Firebug que nos permite realizar debugs en nuestros scripts. Permite mostrar una ventana emergente con el contenido de objetos (diferenciando entre tipos), elementos DOM o simplemente mensajes.

Usarlo es tan sencillo como esto:

var myObject = {a:234523, something:'else', mylist:[32423,4556,'sdfs']}; nitobi.Debug.log(myObject);

Y para instalarlo solo hay que añadir el archivo js.

Una alternativa a Firebug, sobre todo para IE, pero me sigo quedando con Firebug.

NitobiBug

Laboratorio: detectar parametros de la URL en Javascript

Tue, 20 May 2008 17:45:00 +0000

Algo bastante sencillo y que puede sernos útil es detectar los parámetros que se envían por URL para así modificar el comportamiento de nuestro Javascript, por ejemplo si se envía un parámetro o tiene cierto valor, se podría cargar un objeto o implementar una función.

El script sería el siguiente:

// Obtenemos la URL
var url = document.location.href;
// Nos quedamos con los parámetros
url = url.substring(url.lastIndexOf('?')+1);
// Dividimos los distintos parámetros
url = url.split('&');
// Almacenamos los parámetros en un array(param => valor)
var res = new Array();
for(var i=0; i


Si nuestra URL es amigable, no hay parámetros sino que se indican en la propia URL (http://servidor/metodo/accion/parametro/parametro), deberíamos hacer algo así:

//Obtenemos la Query String (URL - host)
var url = document.location.href;
url = url.substring(url.lastIndexOf(document.location.host)+1);
// Separamos mediante la barra (/)
var res = url.split('/');
Como se puede apreciar es muy sencillo, pero nos puede ser muy útil, sobre todo si queremos ganar en rendimiento y no cargar todo el js, que a veces no está muy optimizado y en todas las páginas se carga cuando a veces no sería necesario.



JIT: JavaScript Information Visualization Toolkit
Fri, 09 May 2008 10:00:00 +0000
Impresionante la librería que ha creado Nicolas Garcia Belmonte que permite crear gráficas RGraph, Treemaps o Hyperbolic Trees. ¿Y qué tipo de gráficas son estas? pues explicándolo llanamente, las que muestran relación entre elementos usándo árboles, pero algo más visuales, centrando nodos.



Por lo poco que he visto, está desarrollado en Canvas y para IE lo simula mediante VML. También estaría bien mirar si permite ampliar nodos dinámicamente.

JIT


Consejos para tener un buen código Javascript
Tue, 22 Apr 2008 18:30:00 +0000
Consejos que nunca vienen mal para desarrollar un código Javascript decente:
Que sea limpio y esté bien documentado: esto no es exclusivo de Javascript, pero parece que en este lenguaje se olvida. También es recomendable tener dos versiones del script, uno de desarrollo y otro de producción (que estará comprimido).
Usa ficheros externos: no incluyas los scripts dentro de tu HTML, usa scripts externos. A parte de ser más eficiente en el gasto del ancho de banda es reutilizable y más legible.
Separa la capa de presentación de la capa lógica: no añadas eventos en las etiquetas HTML, create Javascripts no intrusivos que modifiquen los elementos y añadan los eventos.
Define el ámbito de las variables: aunque no sea necesario usar var para definir las variables, hay que hacerlo, así evitarás sorpresas de modificación de variables, sobre todo si usas recursividad.
No pienses que por defecto se soporta Javascript: no todo el mundo dispone de javascript, por ello no es conveniente llamar a funciones javascript dentro del href de los enlaces, y es conveniente tener acción por defecto en un enlace cuando se quiere modificar su funcionalidad por javascript:
enlace
enlace
5 JavaScript Best Practices


Facebook sliders mediante Mootools
Thu, 17 Apr 2008 12:00:00 +0000
Facebook pone a disposición de sus usuarios unos sliders para poder controlar el valor de ciertos elementos. Para aquellos que estén interesados en usarlos, podrán echar mano de este ejemplo realizado con Mootools, cuyo uso es muy sencillo.



Hay que tener en cuenta que no es un script accesible, porque no existe una alternativa estándar al control, ya que el slider es una capa y si no hay javascript o entorno gráfico, el valor no se podría cambiar. El script es bueno y añadirle la parte de accesibilidad no implica mucha complicación.

Facebook Sliders With Mootools and CSS

Vía / CSS Globe


Canvas2Imagen: convertir canvas a imagenes
Fri, 11 Apr 2008 17:30:00 +0000
El elemento CANVAS nos permite dibujar directamente en el HTML y el script que os muestro nos permite transformar el canvas en imagen (BMP, JPEG y PNG) o guardarla en nuestro disco duro.
Un ejemplo de uso es el siguiente:
var strDataURI = oCanvas.toDataURL("image/jpeg");
Canvas2Image




37 plugins para jQuery
Thu, 10 Apr 2008 17:00:00 +0000
Una interesante lista de plugins para usar en jQuery, organizado por temas:
Sliders: Slider Gallery y Accessible slider
Manipulación de imágenes: , Semitransparent rollovers  y Creating A Sliding Image Puzzle Plug-In
Menus: Digg Header, IconDock
Despegables: Horizontal Accordion, HoverAccordion,  Step Carousel Viewer y Featured Content Glider
Gráficas: jQuery + jFlot  y Accessible charts using canvas and jQuery 
Editores: Small Rich Text Editor  y markItUp! Universal markup editor
Flash: jQuery Flash Plugin, jMP3 y jQuery Media Plugin
Pestañas: jQuery Tabs
Lightbox: Fancy Box, Thickbox Plus
Tablas: Flexi Grid y Query Grid 3.1
Formularios:  FaceBook Like - jQuery and autosuggest Search Engine,  Masked Input Plugin, jQuery Enchant, EasyDrag jQuery Plugin, Simple Effects Plugins y Slide out and drawer effect
Efectos sobre elementos: crop, labelOver and pluck,  Style Author Comments Differently with jQuery, Creating a fading header, Coda Bubble, Another In-Place Editor y jQuery Taconite
Aplicaciones web: GenFavicon, WriteMaps
37 More Shocking jQuery Plugins
Vía / aNieto2k


FancyBox: zoom de imágenes mediante Javascript
Thu, 03 Apr 2008 10:00:00 +0000
Buen script creado en jQuery que permite añadir zoom a imágenes. Está testado en IE6, IE7 y Firefox. Entre las características muestra en una ventana lightbox la imagen en un tamaño mayor, pudiendo ajustarse al tamaño de la ventana y mostrando un marco alrededor de la imagen. Además permite mostrar un grupo de imágenes de forma común.

Un ejemplo de uso sería el siguiente:
$(function() {
  $("div#test_zone a").fancybox();
});
FancyBox



Bug en el método UTC del objeto Date de Javascript
Wed, 02 Apr 2008 18:05:00 +0000
O al menos en Firefox. Se trata de que si quiero obtener el timestamp de una fecha usando el método Date.UTC me devuelve datos incorrectos.

Por ejemplo, en esta llamada Date.UTC(2008, 3, 2, 18, 33, 32) (el mes es abril porque empieza desde 0), se verá que da un el timestamp 1207161212000, mientras que si creamos un objeto Date y obtenemos su timestamp (new Date(2008, 3, 2, 18, 33, 32)).getTime() obtenemos el timestamp 1207154012000, habiendo 2 horas de diferencia.

Habrá que tener cuidado


TJPzoom: zoom mediante Javascript
Wed, 26 Mar 2008 10:00:00 +0000
Un buen Javascript que permite añadir zoom a nuestras imágenes. El script añade una ventana con marco sombreado a la imagen en la que se ve el zoom, pudiendo moverla por toda la imagen.



Si hacemos drag hacia arriba el zoom aumenta, hacia abajo disminuye, hacia la derecha la ventana aumenta y hacia la izquierda disminuye. Además permite utilizar otra imágen con mayor resolución para evitar el pixelado.

TJPzoom

Vía / WebAppers


Codetcha: CAPTCHA resolviendo Javascript
Wed, 19 Mar 2008 09:30:00 +0000
La verdad es que este CAPTCHA es muy friqui, pero es una idea interesante que quizás se pueda utilizar. Se trata de un CAPTCHA que en vez de tener que escribir una palabra, hay que modificar un código Javascript para que no tenga errores y así validar el formulario.



Para pasar el CAPTCHA hay que eliminar todos los errores, se puede ir viendo si el código es correcto y si no es así, qué errores sigue habiendo. El código de Codetcha se puede usar para clases o ejemplos de Javascript, porque me da la sensación de que no es muy accesible este CAPTCHA.

Aún así la idea se podría sustituir usando matemáticas en vez de Javascript.

Codetcha