Alex Sancho

Dos en uno

2007-02-02T15:16:02+01:00

Lamentablemente esta ha sido una semana complicada en el ámbito laboral, con lo que el weblog a quedado relegado a un segundo plano. Ya hacia días que había actualizado styled y [window.growl][1] para trabajar con [jQuery 1.1][2], pero no he tenido tiempo para comunicar estas actualizaciones. De manera muy rápida recordaros que [styled se puede descargar desde esta pagina][3], y que para utilizar Growl con jQuery 1.1 tenemos que modificar las lineas 29 y 30 dejándolas como veréis a continuación, [code javascript] $('#growlmsg').css({top: he+'px', left: we+'px'}).show().html(msg).fadeTo(1000,1); $('#growl').css({top: he+'px', left: we+'px'}).show().fadeTo(1000,0.8); [/code] P.D. Esta actualización de styled también corrige el problema por el cual IE7 no muestra los mensajes de Growl. [1]: http://alexsancho.name/archives/2006/11/windowgrowl-con-jquery/ [2]: http://jquery.com/ [3]: http://alexsancho.name/archives/projects/styled/

Comentarios (0)

Window.Growl con jQuery

2006-11-28T21:03:52+01:00

Esta es una modificación del script original ideado por [Daniel Mota][1] basada en la libreria jQuery. [code javascript] var Growl = { init:function(width,height,duration) { Growl.msg = []; Growl.active = false; Growl.duration = (duration || 2)*1000; Growl.height = height/2; Growl.width = width/2; $(document).ready(function() {Growl.create();}); }, create:function() { $('body').append('

'); }, queue:function() { var msg = Growl.msg.pop(); if(msg) Growl.show(msg); }, show:function(msg) { if(Growl.active) { Growl.msg.push(msg); return; } Growl.active = true; var top = document.documentElement.scrollTop || window.pageYOffset || 0; var left = document.documentElement.scrollLeft || window.pageXOffset || 0; var h = (window.innerHeight || document.documentElement.clientHeight || 0)/2; var w = (window.innerWidth || document.documentElement.clientWidth || 0)/2; var he = top+h-Growl.height, we = left+w-Growl.width; $('#growlmsg').top(he+'px').left(we+'px').show().html(msg).fadeTo(1000,1); $('#growl').top(he+'px').left(we+'px').show().fadeTo(1000,0.8); setTimeout(function() {Growl.hide();}, Growl.duration); }, hide: function() { $('#growlmsg').fadeOut("slow",function() {Growl.display($(this));}); $('#growl').fadeOut("slow",function() { Growl.display($(this)); Growl.active = false; setTimeout(function() {Growl.queue();}, 200); }); }, display: function(e) { e.hide(); } }; [/code] ###Metodos de uso * Growl.show('Mensaje que queremos mostrar'); ###Ejemplo [Ver Growl en funcionamiento][2] [1]: http://icebeat.bitacoras.com/post/212/window-growl [2]: http://wp.alexsancho.name/index.php?wptheme=Styled

Comentarios (8)

Validacion de formularios con prototype

2006-09-17T13:04:50+01:00

Siempre he creído que la mejor manera de verificar los datos de un formulario consta de dos partes. En primer lugar, una validación simple del lado del cliente mediante javascript, donde se comprueba que todos los campos requeridos contengan datos y que estos datos estén en el formato que se esperan. La segunda parte del proceso se ejecuta en el servidor y se basa en comprobaciones mas estrictas donde se verifica la integridad de los datos. Para la primera validación, la que se realiza en el lado del cliente antes de enviar ningún dato, existe muchas combinaciones, en este caso, veremos como hacerlo de forma muy simple ayudados de la librería prototype. Lo primero que tenemos que hacer es diseñar nuestro formulario y decidir que campos necesitamos comprobar. [code html] [/code] Como se puede ver, utilizo tres clases diferentes para marcar los campos del formulario, con la siguiente función podremos validar cada campo utilizando selectores css, es decir, se comprobara que todos los campos marcados con la clase "required" contengan datos, además, se comprobara el formato de los datos en los campos marcados como "email" o "numeric", [code javascript] function checkForm(id) { var error = false; $$('form#'+id+' .required').each(function(node){ if (node.value == "") { error = true; node.style.background = "#F00"; } }); $$('form#'+id+' .email').each(function(node){ if ((node.value.indexOf(".") > 2) && (node.value.indexOf("@") > 0)) { error = true; node.style.background = "#F00"; } }); $$('form#'+id+' .numeric').each(function(node){ var strChars = "0123456789.-"; for (i = 0; i < node.value.length; i++) { strChar = node.value.charAt(i); if (strChars.indexOf(strChar) == -1) { error = true; node.style.background = "#F00"; } } }); if (error == true) { alert('Asegurate de rellenar todos los campos requeridos'); } else { $(id).submit(); } } [/code] esta claro que no podemos basar la integridad de los datos en este tipo de comprobaciones, pero son un primer filtro que le da mas dinamismo a la aplicacion ya que permite al usuario corregir errores sin tener que esperar a las comprobaciones del servidor, que por norma suelen ser mas lentas.

Comentarios (2)

Prototype+scriptaculous+dom

2006-09-06T19:34:47+01:00

Trabajar con el modelo de documento en la web (DOM) no siempre es tarea fácil, sobretodo cuando lidiamos con paginas dinámicas, personalmente gasto mas horas al desarrollar intentando dar con los nodos, hijos y padres que en cualquier otra tarea. Con la ultima revisión de prototype todo se simplifica un poco, ahora podemos acceder a las diferentes partes de documento con un mínimo de esfuerzo. Si utilizamos el siguiente bloque html como referencia, [code html]

[/code] Para recorrer los diferentes nodos solo tenemos que elegir el objeto desde el que partimos, [code javascript] $('nav').up; // parentNode

$('nav').down // element.fistChild

[/code] Esto es solo una pequeña muestra de las nuevas posibilidades que ofrece prototype, combinandolas con la posibilidad de asignar funciones segun selectores y eventos, [code] $$('#block ul#nav .btn a').each(function(node) { Event.observe(node, "click", function(e) { ... } } [/code] realmente disponemos de todo un arsenal de recursos para acceder al documento de principio a fin con unas pocas lineas de código. Scriptaculous también actualiza versión, pero en cualquier caso lo que me interesa ahora es que al igual que prototype cuenta con una clase para manejar el dom, pero de una forma diferente a prototype, en este caso, lo que nos ofrece es la posibilidad de crear nuevos elementos dentro del documento. Continuando el ejemplo, para añadir un nuevo hijo a nuestra lista, [code javascript] bloque = Builder.node('li', {class:'btn'}, [ Builder.node('a', {href:'#'}) ]); $('nav')appendChild(bloque); [/code] creo que mas sencillo no puede ser, podemos crear nodos simplemente incluyendo uno dentro de otro tal y como queremos que aparezcan en el documento. Cada día voy descubriendo nuevas posibilidades de amabas librerías y a medida que las conozco mejor mas me gustan, el pequeño precio que hay que pagar por los kb extra bien merecen la pena. Si estas utilizando alguna de ellas en tus proyectos no dejes de actualizar esta ultima versión de scriptaculous que sobretodo arregla algunos bus con IE.

Comentarios (0)

Esquinas personalizadas con javascript

2006-07-18T07:07:59+01:00

Existen diferentes métodos para conseguir este efecto, este que propongo es una mezcla de técnicas que creo que destaca por su sencillez y porque ofrece la posibilidad de aplicar el efecto a mas de un elemento en la misma pagina. Combinando el uso de javascript y css manipularemos el dom para aplicar el marcado necesario a los elementos que deseemos, el funcionamiento del script se resume de la siguiente manera, al cargarse el documento, recorre el árbol de elementos buscando aquellos marcados con la clase rounded, a los que le añade cuatro elementos "span" posicionados de manera absoluta en las esquinas. Luego, por medio de css, decoramos estos cuatro elementos con la imagen que creara el efecto. Una de las ventajas de utilizar esta técnica es que se puede aplicar a cualquier elemento, e incluso a varios dentro del mismo documento. Podéis ver el efecto en marcha en el [siguiente ejemplo][1]. Pasemos a la "magia" del asunto, Para el ejemplo he creado un script con tres funciones, de las cuales dos son auxiliares y las comentare brevemente, la que realmente aplica el efecto y comentare con mas detalle es la siguiente: [code javascript] function roundCorners() { var rd = getElementsByClass("rounded"); for (var i = 0; i < this.rd.length; i++) { for(var j = 1; 4 >= j; j++) { var corn = document.createElement('span'); corn.className = 'corn'+j; rd[i].appendChild(corn); } } } [/code] Básicamente lo que estamos haciendo es leer el documento en busca de los elementos marcados con la clase "rounded", para esto utilizamos la función [getElementsByClass escrita por Dustin Diaz][2], que nos devuelve un *array* con todos los objetos, a partir de aquí entran en marcha dos bucles, el primero se ejecutara tantas veces como elementos contenga el array y el segundo añadirá el marcado necesario a cada elemento. La segunda función auxiliar es la conocida [addLoadEvent escrita por Simon Willison][3] y se encarga de que todo esto se realice durante la carga del documento, evitando tener que utilizar lanzadores adicionales dentro del código html. [code html] Antes:

ejemplo

------------------------------------------------------------- Despues:

ejemplo

[/code] Esta sera la parte de la hoja de estilos, [code css] /* contenedor principal */ .rounded { position:relative; } /* elementos añadidos */ .rounded span { position:absolute; display:block; z-index:2; height:8px; width:8px; } .corn1 { /* esquina superior derecha */ background:transparent url(../img/tr.png) top right no-repeat; top:0; right:0; } .corn2 { /* esquina superior izquierda */ background:transparent url(../img/tl.png) top left no-repeat; top:0; left:0; } .corn3 { /* esquina inferior derecha */ background:transparent url(../img/br.png) bottom right no-repeat; bottom:0; right:0; } .corn4 { /* esquina inferior izquierda */ background:transparent url(../img/bl.png) bottom left no-repeat; bottom:0; left:0; } [/code] la primera regla aplica una posicion relativa al contenedor principal, mientras que los demas elementos que hemos añadido se posicionaran de manera absoluta con un z-index superior para superponerlos sobre el principal. Esto seria todo, solo quedan las imagenes, que para el ejemplo tienen unas dimensiones de 12x12 pixels y estan en formato png de 24 bits, por lo que el efecto quedara un poco deslucido si se visualiza con IE. Esto no significa que exista ninguna limitacion a la hora de utilizar otro formato de imagen, ni que no se pueda incluir algun tipo de "trampa" para que IE renderize los png con transparencias de forma correcta si es necesario, esto lo dejo para la imaginacion de cada uno. ###Otros metodos similares * [Rounded Images using CSS and some optional JavaScript][4] * [Rounded Corners with CSS and JavaScript][5] [1]: http://alexsancho.name/archives/examples/dom/corners/ [2]: http://www.dustindiaz.com/getelementsbyclass/ [3]: http://simon.incutio.com/archive/2004/05/26/addLoadEvent [4]: http://www.elliotswan.com/2006/06/07/rounded-images/ [5]: http://www.sitepoint.com/article/rounded-corners-css-javascript

Comentarios (3)

Javascript no intrusivo, scripts remotos

2006-05-26T20:00:32+01:00

Cuando me decido a incluir algún tipo de script que dependa del soporte del navegador, siempre me gusta ofrecer una opción alternativa intentando que el funcionamiento resulte lo mas similar posible en todos los escenarios. De nuevo, la librería [prototype][1] hace que esto sea sumamente sencillo, supongamos el siguiente ejemplo, tenemos un bloque de texto que contiene un enlace, nuestra intención es que el enlace apunte a una url real, en el caso de que el usuario soporte JavaScript, el contenido se actualizara sin necesidad de que el navegador refresque la ventana, en caso contrario el enlace actuara de forma normal. Como siempre, para facilitarnos las cosas, le asignaremos una id al enlace, lo que nos permitirá acceder a el de una forma limpia, recordad, con prototype acceder a un elemento por su id es tan sencillo como $('id-del-objeto');. El truco para que todo esto funcione se basa en que prototype pasa una cabecera propia con cada llamada remota, característica que se puede aprovechar en nuestro script para que responda de forma diferente según el tipo de petición. [code php]

respuesta a una llamada remota

...

respuesta normal

... [/code] Creo que se entenderá mejor si veis el [ejemplo][2] que he preparado, todas las lineas de la función JavaScript están comentadas, con lo que estoy seguro de que no quedaran dudas, aunque como siempre, tenéis el formulario para hacer vuestros comentarios. [1]: http://prototype.conio.net/ [2]: http://alexsancho.name/archives/examples/ajax/unintrusive/

Comentarios (0)

Ajax.PeriodicalUpdater

2006-05-23T23:55:33+01:00

Otra de las funciones disponibles con la librería [prototype][1] es Ajax.PeriodicalUpdater() y provee de un método sencillo para realizar llamadas remotas en intervalos de tiempo definidos. Para el ejemplo utilizo un script php que muestra las ultimas canciones que he escuchado en [last.fm][2], el script es publico y se puede obtener en esta dirección [RecenTracksMagpie][3], junto a las instrucciones para ponerlo en marcha. La parte del JavaScript es bien sencilla, solo necesitamos una copia de la librería prototype y la siguiente función, [code html] [/code] Para que todo esto funcione, tenemos que añadir un bloque div con la **id="tracks"** que sera donde aparezca la información,

En el caso del feed de audiscrobbler el efecto queda un poco apagado por el hecho de que el feed no se actualiza muy a menudo, pero es un método genial para mostrar información en "tiempo real" como podría ser el numero de usuarios online o incluso la información meteorológica, dejo para vosotros las ideas creativas. Salu2 [1]: http://prototype.conio.net/ [2]: http://last.fm [3]: http://www.audioscrobbler.net/wiki/RecentTracksMagpie

Comentarios (4)

Capturar eventos con prototype

2006-05-18T19:09:24+01:00

La librería prototype entre otras cosas nos permite capturar eventos de una manera sencilla, supongamos que necesitamos lanzar una función en el momento que carga la ventana, con prototype solo tenemos que añadir la siguiente linea que se encargara de realizar el trabajo. [code javascript] Event.observe(window, "load", funcion.a.ejecutar, false); [/code] Si por el contrario lo que necesitamos es ejecutar una función en el momento que se envía un formulario, lo podemos hacer de la siguiente manera, [code javascript] this.form = $('form-id'); Event.observe(this.form, "submit", funcion.a.ejecutar.bind(this), false); [/code] como podéis ver, a la función a ejecutar le añado .bind(this) que es otra función nativa de prototype, y se encargara de evitar que el evento se propague, lo que nos permite manipular la forma en la que se comporta el formulario, si por ejemplo deseamos que el evento se detenga por completo, al final de nuestra función podemos incluir Event.stop(this). Estas técnica son ideales para trabajar con el DOM y así poder separar totalmente el código JavaScript del contenido. ¿Sencillo, no?

Comentarios (2)

Javascript no intrusivo: moo.ajax

2006-02-06T20:42:43+01:00

Hace unos días comente algo sobre los beneficios de utilizar JavaScript de forma no intrusiva, hoy me gustaría mostrar un ejemplo de lo sencillo que resulta implementar estas técnicas, y los sorprendentes resultados que se pueden conseguir. Antes de comenzar, un par de detalles, la idea general del script es realizar una búsqueda en mi weblog sin tener que recargar la pagina, esta se realiza en tiempo real mediante una llamada a la [API de Yahoo! Search][1]. Para el ejemplo echare mano de dos bibliotecas, moo.ajax y prototype.lite, ambas de muy reducido tamaño y que incluyen una serie de funciones de gran utilidad. Comenzando por el código html, todo el funcionamiento de nuestro script se basara en el formulario de búsqueda, crearemos una serie de elementos en el DOM que se añadirán a diferentes partes del formulario. Para esto tendremos que definir algunas identidades en él como veis aquí abajo [code html] [/code] esto es casi todo lo que necesitamos del html. Pasemos a nuestro script [1]: http://developer.yahoo.net/

Continuar leyendo Javascript no intrusivo: moo.ajax...

Comentarios (3)

Servicios web y weblogs

2006-02-06T12:44:08+01:00

Cada día es mayor el número de servicios web dirigidos ha potenciar el uso de los weblogs, algunos ofrecen opciones realmente interesantes como es el caso de [Flickr][1], que permite mantener una colección de fotografías, [Technorati][2], que nos ofrece un índice de las tendencias que mueven la blogosfera, [del.icio.us][3], personalmente mi preferido, que como casi todos sabemos, es la mejor opción para salvar los marcadores de nuestras paginas favoritas. La lista es mucho más extensa, pero por lo pronto quiero centrarme en estos tres. Hace tiempo que uso mas o menos asiduamente estos servicios, y he aprovechado este fin de semana para realizar un pequeño experimento de integración. Basandome en la idea de ofrecer recursos relacionados a los artículos que escribo, y haciendo un extenso uso de las librerías javascript [prototype][4] y [script.aculo.us][5], he añadido una sencilla interfase que permite importar elementos desde cualquiera de estos tres servicios. Espero que os resulte de utilidad, no es que haya probado intensivamente el invento, con lo que si encontráis que no funciona como se espera, enviarme un correo o dejad un comentario en esta entrada. [1]: http://www.flickr.com/ [2]: http://technorati.com/ [3]: http://del.icio.us/ [4]: http://prototype.conio.net/ [5]: http://script.aculo.us/

Comentarios (0)

Javascript no intrusivo

2006-01-20T15:24:37+01:00

Una de las premisas mas importantes planteadas al diseñar mediante el uso de estándares es la separación de capas lógicas, es decir, por un lado tenemos el maquetado, que se representa mediante lenguaje (x)html, por otra parte esta el diseño visual, que normalmente se adjunta mediantes hojas de estilo (css) hasta aquí todo esta muy claro. Pero que ocurre con el comportamiento que se le quiera asignar a algunos objetos del documento, aquí es donde entra en juego el lenguaje JavaScript. Imaginemos por ejemplo que tenemos un enlace al que le queremos dar una funcionalidad un poco diferente al resto, abrirlo en una ventana nueva por ejemplo, a la mayoría lo primero que nos viene en mente es hacer algo mas o menos similar a lo siguiente: [code html] Abrir popup [/code] Lamentablemente esta linea acaba con toda nuestra teoría de separación de capas, por fortuna, existen maneras alternativas para asignar eventos usando JavaScript, en el caso concreto de este ejemplo una manera mas limpia de realizar lo mismo necesitaba algo mas de código para poder llevarse a cabo. Primero tendremos que asignar una identidad única al enlace, y luego mediante el DOM asignaremos el evento a dicha id, algo mas o menos tal que así. [code html] Abrir popup [/code] [code js] [/code] Sencillo, ¿no? bueno, quizás no resulte tan sencillo, pero gracias a mentes inquietas como la de [Ben Nolan][1], disponemos de algunas herramientas que si que hacen que resulte una tarea sencilla. Me refiero a [behaviour][2], una librería JavaScript basada en la función document.getElementsBySelector escrita por [Simon Willison][3]. Este fantástico "trozo de código" nos permite olvidarnos de programar complejas funciones que asignen eventos según clase, id o selector. Continuando con el ejemplo anterior, si incluimos esta librería podemos conseguir el mismo efecto asignando la función directamente al id seleccionado, [code js] [/code] Personalmente creo que resulta una librería de inmensa utilidad, ahora solo falta ver como poder sacarle partido de manera óptima. Salu2 y buen fin de semana [1]: http://bennolan.com/ [2]: http://bennolan.com/behaviour/ [3]: http://simon.incutio.com/

Comentarios (4)