Creative Commons 3.0 RSS CSS 2.1 XHTML 1.0
Login  
Registro
 
Escrito por Yosi_ el viernes, 6 de junio de 2008

Es bastante frecuente que escribiendo un texto en un formulario web, necesitemos emplear el tabulador para indentar código, sangrar un párrafo, etc, y sin embargo al no poder hacerlo (ya que por defecto realiza la función de alternar la selección entre los elementos de la página), nos veamos obligados a introducir una serie de espacios. En momentos puntuales puede servir, pero en la mayoría de los casos resultará muy pesado.

A continuación voy a mostrar un sencillo método probado en IE, Firefox y Opera para capturar el tabulador en los formularios de vuestra web y hacer que se muestre en un "textarea".

Escrito por Yosi_ el viernes, 23 de mayo de 2008

En muchos casos puede ser interesante agregar a nuestra web una función de geolocalización para situar claramente eventos, usuarios, etc. Evidentemente al pensar en algo así a todos se nos viene a la cabeza Google Maps, por ser un referente en la materia y porque seguramente casi todos habremos visto alguna web que implemente dicha funcionalidad a partir de la API que Google ofrece con ese fin.

En este caso voy a mostrar un pequeño código en JavaScript que cargue dinámicamente el adjunto .js necesario y a partir de ahí muestre los mapas que deseemos. Sería más sencillo cargar el archivo desde el HTML, y de hecho hay varios ejemplos en otros blogs que proceden de esa forma, pero en este caso pretendo optimizarlo dando la posibilidad de añadir la característica mencionada sin aumentar el peso de la web y por tanto la transferencia y el tiempo de carga (nada desdeñable teniendo en cuenta que el archivo estará en un servidor externo) salvo que se utilice.

Escrito por Yosi_ el miércoles, 16 de abril de 2008

Esto, siguiendo la línea general de este blog, no pretende ser un artículo que trate profundamente la tecnología AJAX, ni que aborde los pormenores y características más remotas de la misma. En este caso el objetivo es proponer de la forma más clara y detallada posible una forma de implementación de AJAX empleando la librería jQuery y manejando las respuestas en formato JSON, a mi juicio el más conciso de cara al uso general.


1. ¿Qué es AJAX?


En primer lugar deberíamos partir haciendo una descripción de en que consiste concretamente el manido acrónimo omnipresente en la web actual. Posiblemente el artículo de Wikipedia de una explicación más correcta e inteligible de lo que yo pueda decir, pero resumiendo digamos que se trata de una tecnología basada en JavaScript que permite establecer conexiones con un servidor, enviando y recibiendo datos que dan la posibilidad de realizar operaciones en una base de datos y cambiar el contenido de parte de una web sin necesidad de recargar la página, de forma totalmente transparente para el usuario.

La principal ventaja de este sistema es que da una sensación de agilidad e inmediatez (el tiempo para realizar una misma operación cargando toda la página o mediante una petición AJAX varía considerablemente) que rompe de forma notable con el formato tradicional de la web, donde cada acción correspondía necesariamente a una carga completa de página, ofreciendo una experiencia de usuario novedosa que introduce posibilidades realmente útiles. El uso de dicha técnica ya está ampliamente implantado en la web 2.0, como se puede observar al enviar un comentario en cualquier blog actual, al utilizar gestores de correo como Gmail, Google Maps, varios servicios de Flickr... Y lo mejor de todo es que es realmente fácil de integrar en cualquier web, ya que en muchas ocasiones incluso simplifica las tareas llevadas a cabo de la forma tradicional.

Escrito por Yosi_ el jueves, 24 de enero de 2008

El código que pongo a continuación es una función JavaScript cuya utilidad es situar un "div" verticalmente en un punto concreto de la pantalla, independientemente del scroll de la página. En mi caso lo he utilizado para crear un popup (dentro de la propia web, sin utilizar una nueva ventana) que muestra entre otras cosas el formulario de login de este blog.

function setFixedHeight (div) 
{  
    div=document.getElementById(div);
    if(window.innerHeight) 
    { 
        altoActual = window.innerHeight; 
    } 
    else 
    { 
        altoActual = document.documentElement.clientHeight; 
    }
    alto = (altoActual/3)+document.documentElement.scrollTop;
    div.style.top = alto+ 'px';
}

El parámetro div de la función corresponde a la id del elemento que se desea posicionar, y siempre deberemos tener en cuenta que dicha posición se establecerá respecto a la parte superior del mismo. En este caso se colocará a 1/3 de la altura total de la pantalla (altoActual/3), pero se podria mover a cualquier otro sitio cambiando ese valor, o incluso centrarlo colocándolo a 1/2 de la altura y restando a la cantidad resultante la mitad de la altura del elemento.

Evidentemente sería muy sencillo realizar esta misma labor empleando solamente la propiedad "position:fixed" en CSS, pero dado que IE6 no la soporta, y teniendo en cuenta que desgraciadamente un alto porcentaje de internautas aún usa ese despropósito de navegador, nos vemos obligados a utilizar soluciones más complejas como la expuesta anteriormente. Para el caso de la posición en el eje horizontal la funcion sería análoga, pero en ese caso es más inteligente establecerla desde CSS mediante la propiedad "position:absolute", ya que al carecer la mayor parte de webs de scroll horizontal, es equivalente a fijar el elemento en un determinado punto.