Avisar de contenido inadecuado

Javascript en Pixelovers

Expand

jQuery 1.4: 15 nuevas características que debes conocer

Estamos preparando un análisis de la nueva versión jQuery 1.4. Pero mientras la probamos y estudiamos las nuevas funcionalidades, leo en Intenta un interesante artículo sobre jQuery 1.4 Released: The 15 New Features you Must Know. ¿Conoces ya estas nuevas características?

  1. Pasar atributos a jQuery(...)  – jQuery( html, propiedades )
  2. ¡Tódo "hasta que"!  – .nextUntil([ selector ]), .prevUntil([ selector ]) y .parentsUntil([ selector ])
  3. Enlazar múltiples controladores de eventos – .bind( eventos )
  4. Per-property-easing (Facilitando por propiedad) – .animate(propiedades, opciones)
  5. ¡Nuevos eventos live! – .live("submit|change|focusin|focusout", controlador)
  6. Control del contexto de una función – jQuery.proxy(función, contexto)
  7. Demora una cola de Animación – .delay(duración, [ nombre de la cola ])
  8. Comprobar si un elemento tiene algo – .has(selector) y jQuery.contains(contenedor, contenido)
  9. Desenvolver elementos – .unwrap()
  10. Eliminar elementos sin borrar datos – .detach([ selector ])
  11. Mejoras en index(...) – .index(selector)
  12. Los métodos de manipulación DOM aceptan "callbacks":
  13. Determinar el tipo del objetojQuery.isPlainObject(objeto) y jQuery.isEmptyObject(objeto)
  14. Mejoras en Closest(...) – .closest(selector, [ contexto ])
  15. Nuevos eventos! focusIn y focusOut – .focusin(manejador) y .focusout(manejador)
Expand

Geoposicionamiento web y la API de Google Maps V3

El otro día hablabamos de Cómo geoposicionar un dispositivo con el navegador, pero por si sola no podemos darle mucha utilidad, puesto que necesitamos ejecutar algo en el successCallback. Y aquí es donde aparece la nueva versión de la API de Google Maps V3. La API Javascript es muy parecida a su antecesora, la versión 2. Sin embargo ha cambiado mucho internamente, ya que ha sido diseñada para cargar más rápidamente, especialmente en navegadores móviles, como los dispositivos basados en Android y el iPhone™.

Una caracteristica muy destacable de esta nueva versión es que ha sido implementada usando un marco de trabajo MVC. También cabe descatacar la desaparición de API key, lo cual elimina trámites previos a la hora de implementar tu trabajo en diferentes dominios.

Ponerlo en marcha es realmente fácil. Sólo tienes que seguir estos 5 sencillos pasos:

  1. Incluir el código JavaScript de la API de Google Maps usando la etiqueta script
    <script
    type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
    </script>
  2. Crear un elemento div llamado "map_canvas" para contener el Mapa.
    <div id="map_canvas" style="width:100%; height:100%"></div>
  3. Crear un objeto en JavaScript para guardar una serie de propiedades del mapa.
    var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
  4. Escribir una función de JavaScript para crear el objeto "mapa".
    function initialize() {
    var latlng = new google.maps.LatLng([latitud], [longitud]);
    var map = new google.maps.Map(
    document.getElementById("map_canvas"),
    myOptions
    );
    }
  5. Inicializar el objeto mapa en la función onload del body.
    <body onload="initialize()">

Nostros, en Pixelovers, hemos querido ir un poco más lejos y hacer una prueba de integración con el borrador de la especificación de la API de Geoposicionamiento de la W3C. Como ya os dijimos la función successCallback necesitaba pintar los datos obtenidos en un mapa. Pues qué mejor hacerlo con la nueva API de Google Maps.

La demo consta de 2 partes, una primera que pretende simplemente mostrar la posición actual y gestionar los posibles errores. Y otra segunda parte que pretende dar una utilidad práctica a ese resultado. Por tanto, una vez geoposicionado, podrás filtrar una lista que aparece atendiendiendo al país donde te encuentras.

Nota: Solo se han usado para la demo los 3 países con más visitantes de Pixelovers, España, México y Argentina, al resto también os apreciamos, pero si no, la demo sería muy extensa.

Demo

¿Qué te parece la nueva versión de la API de Google Maps? ¿Ya la has probado? Cuentanos qué te ha parecido.

Expand

Javascript y jQuery: Consejos y Buenas Practicas (Parte I)

jQuery es una de las librerias mas utilizadas por los desarrolladores FrontEnd por su versatilidad y facilidad de uso. En Pixelovers somos autenticos fans de esta libreria.

http://stc.obolog.net/multimedia/fotos/309000/308801/308801-209198.jpg

Es por esto que queremos compartir con vosotros lo que consideramos que son unas buenas practicas a la hora de programar codigo Javascript ayudandonos de la libreria jQuery.

El objetivo de este compendio de buenas practicas es conseguir un codigo Javascript lo mas limpio, claro y eficiente posible.

Los tips que aqui incluimos estan sacados de nuestra propia experiencia y de conclusiones interesantes que hemos ido encontrando por la red y que hemos acoplado a nuestro repertorio.

Como son muchos los puntos tratados y para no cargar el post con demasiada informacion vamos a dividir este compendio en 2 partes.

En esta primera parte hablaremos de normas generales a seguir que te ayudaran a crear un codigo mas claro y eficiente. En un segundo post hablaremos de como solucionar de forma eficiente problemas concretos que nos solemos encontrar en nuestros desarrollos.

Y una vez dicho esto, vamos al lio...

Consideraciones Generales

  • Aprenderse bien la librería. Para utilizar siempre la solución mas optimizada posible. No está de mas tener a mano una chuleta de jQuery como comentabamos en otro post hace unas semanas o ir directamente a la documentacion oficial de jQuery
  • Utilizar librerias consolidadas, versatiles, con soporte y con proyecto de futuro. Por ejemplo jQuery como librería principal y jQuery Tools y jQuery UI como liberias adicionales de efectos
  • Trabajar en archivos separados. Mejor crear JS's diferentes para cada funcionalidad separable de nuestro site y luego utilizar algun sistema que junte todos estos JS's en uno final (comprimido y ofuscado)
  • Javascript no intrusivo. Nunca depender de JS en la medida de lo posible. Si está desactivado el javascript o falla, que la pagina muestre un aspecto normal. Javascript es una mejora, no un sistema de seguridad.
  • Optimiza el codigo haciendo pruebas de rendimiento. Con Firebug podemos medir el tiempo que tarda una funcion (o trozo de codigo) en ejecutarse:
    			
    	console.time('native');  
    	var l = array.length;
    		for (var i=0;i<l; i++) {
            array[i] = i;  
    	}  
    	console.timeEnd('native');  
    			 
    		
  • Comprimir el codigo al final. Al comprimir el codigo el archivo JS que tendrá que bajarse el usuario será de menor tamaño, aunque hay que valorar el rendimiento final ya que por el contrario el navegador tendrá que realizar el proceso adicional de descomprimir el codigo antes de ejecutarlo.Para comprimir el codigo disponemos de herramientas, tipo YUI Compressor aunque hay muchas mas
  • El marcado semantico y accesible viene primero. No adaptar el marcado para facilitar el JS sino que sea el JS el que se adapte al marcado. Con ID’s, herencia, y clases podemos acceder a cualquier elemento y asignarle funcionalidades

    Marcado horrible:

    			
    	<table>
    	    <tr>
    	    	<td onclick="doSomething();">First Option</td>
    	        <td>First option description</td>
    		</tr>
    		<tr>
    			<td onclick="doSomething();">Second Option</td>
    			<td>Second option description</td>
    		</tr>		
    	</table>
    			

    Marcado malo:

    	
            <dl>
    		<dt onclick="doSomething();">First Option</dt>
    		<dd>First option description</dd>
    		<dt onclick="doSomething();">Second Option</dt>
    		<dd>Second option description</dd>
    	</dl>
    		

    Buen marcado:

    			
    	<dl id="OptionList">
    	    <dt>First Option</dt>
    	    <dd>First option description</dd>
    	    <dt>Second Option</dt>
    	    <dd>Second option description</dd>
    	</dl>
    			
    
  • Encapsular lo maximo posible el codigo. Esto significa agrupar todas las funciones comunes dentro de una funcion padre, asi acotamos el contexto de cada funcionalidad (objeto si hace falta)

    Ejemplo:

    			
    	var mySite = new Object();
    	
    	mySite = {
    		
    		var1 : 1,
    		var2 : 2,
    		valorCalculado,
    		
    		init : function() {
    			// aqui hago varias cosas
    			this.valorCalculado = "hola";
    			this.funcionalidad1();
    		},
    		
    		funcionalidad1 : function() {
    			// aqui desarrollo una funcionalidad concreta
    		
    		}
    	}
    	
    	// desde fuera (o desde otro objeto) puedo llamar a las funciones de este objecto
    	mySite.funcionalidad1();
    					
    
  • Elimina consultas innecesarias. Podemos ahorrarnos la llamada al $(document).ready() lanzando el <script> justo antes de cerrar el tag </body> lo que nos asegura que todos los elementos que podemos necesitar están ya cargados en el árbol DOM.

    Menos eficiente:

    			
    	$(document).ready(function(){
    		mylib.article.init();
    	});
    			
    

    Mas eficiente:

    			
    		<script type="text/javascript>
            	  mylib.article.init();
    		</script>
    	</body>
    			
    
  • “Eval is evil” Evitar el uso de eval. Problemas de seguridad. Mas info de por qué puede ser un problema aqui. Una posible alternativa al uso de EVAL puede ser JSON.parse o JSONP

Y hasta aqui la primera parte del asunto...

¿Que te han parecido los puntos aqui comentados? ¿Estas de acuerdo? ¿Algun punto que creas que falta en esta lista?

Enlaces y más

Expand

Cómo geoposicionar un dispositivo con el navegador

Geoposicionamiento

Hace unos días, el 27 de noviembre de 2009, publicaron un nuevo borrador en el W3C titulado: Geolocation API Specification. Esta especificación define una API que proporciona secuencias de comandos de acceso a la información de localización geográfica asociada con el dispositivo de alojamiento. ¿Verdad que suena interesante?

El objeto Geolocation lo podemos encontrar en la instancia navigator y debe implementar estos 3 métodos:

  • void getCurrentPosition (successCallback, errorCallback, options): Cuando se llama, de inmediato regresa y, a continuación, de forma asincrónica intenta obtener la ubicación actual del dispositivo.
  • long watchPosition (successCallback, errorCallback, options): inmediatamente devuelve un valor long que identifica unívocamente a una operación watch y, a continuación de forma asincrónica inicia la operación de watch. Esta operación sigue controlando la posición del dispositivo e invocando la función callback adecuada cada vez que el dispositivo cambia de posición. La operación continúa hasta que se llama al método clearWatch con el identificador correspondiente.
  • void clearWatch (watchId): el proceso identificado por el argumento watchId se interrumpe inmediatamente y dejan de invocarse los callbacks. Este identificador es el que devuelve la función watchPosition.

Nota: Estas funciones (getCurrentPosition y watchPosition) notificarán al usuario de nuestras intenciones y será él quién decida si permitir el acceso a esa información o no.

Firefox geoposicionamiento

Estas funciones se encuentran implementadas por un objeto llamdo Geolocation que se pertenece a la interfaz NavigatorGeolocation y debería implementarse por el objeto Navigator. Así que, podemos acceder a la posición actual del visitante mediante:

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)

¿Y qué significa: successCallback, errorCallback, options y watchId? Pues los dos primeros argumentos son obligatoriamente funciones y el tercero un objeto. En más detalle tenemos:

successCallback

Funcion que recibe por parámetro Position position que contiene los atributos Coordinates coords y DOMTimeStamp timestamp. El atributo coords contiene la siguiente información:

Position.Coordinates

  • latitude: coordenadas geograficas  especificadas en grados.
  • longitude: coordenadas geograficas  especificadas en grados.
  • altitude: denota la altura especificada en metros.
  • accuracy: denota el nivel de precisión de las coordenadas de latitud y longitud, en metros.
  • altitudeAccuracy: denota el nivel de precisión de la altitud.
  • heading: representa la dirección del desplazamiento, tomado en grados en sentido horario desde el norte verdadero.
  • speed: indica la velocidad del dispositivo en metros por segundo.

La altitud, la precisión de la altitud, la dirección y la velocidad pueden existir o no dependiendiendo del dispositivo y en caso de no exisitir devolverán null

errorCallback

Función que recibe por parámetro PositionError error el cual contiene un short code y un DOMString message. El code puede tener un valor de 0 a 3 dependiendo de la causa, siendo:

  • UNKNOWN_ERROR = 0
  • PERMISSION_DENIED = 1
  • POSITION_UNAVAILABLE = 2
  • TIMEOUT = 3

options

Objeto que consta de los siguientes atributos:

  • boolean enableHighAccuracy: proporciona un indicio de que la aplicación desea recibir los mejores resultados posibles. El valor por defecto es false.
  • long timeout: indica la duración máxima de tiempo (expresado en milisegundos) que se permite para pasar de la llamada a getCurrentPosition() o watchPosition() hasta que se invoca el successCallback correspondiente.
  • long maximumAge: indica que la aplicación está dispuesto a aceptar una posición en caché, cuya edad no sea mayor que el tiempo especificado en milisegundos.

¿Qué opinas de que un dispositivo pueda informar de la posición del mismo? ¿Se te ocurre alguna aplicación, o ya le estas dando uso y quieres compartirlo?

Expand

Chuleta de jQuery en PDF

Siguiendo con los post relacionados con las chuletas, ya os presentamos la chuleta de HTML5, hoy toca una chuleta de jQuery 1.3 en versión PDF, gracias al trabajo de Antonio Lupetti.

Espero que con esta ayuda tengais un desarrollo más ágil y no os perdáis detalle de los ejmplos que estamos incluyendo, como fue el caso de Namespace en eventos de jQuery.

Expand

Namespace en eventos de jQuery

Namespace o espacio de nombre (españolización que no se usa) es la contextualización de una variable o método, es decir, consiste en asociar un identificador a un grupo de variables y/o métodos.  En la vida real disponemos de muchos ejemplos, por ejemplo OboLog tiene el número de post 123, y Pixelover también puede tener el post 123 porque ambos están en namespaces diferentes, obolog y pixelover, respectivamente.

Ahora que sabemos que significa, vamos a ver como se aplica esto a los eventos en jQuery y luego veremos una aplicación práctica de los namespaced events. Todos sabemos como añadir un manejador de evento (click, por ejemplo) a un elemento mediante el método bind:

$("a").bind("click", function() { /* Code... */ });

Ahora si queremos contextualizar ese evento click, que pertenezca a un grupo utilizamos el siguiente código:

$("a").bind("click.namespace", function() { /* Code... */ });

Esto funcionará, igual que el anterior ejemplo, en cada click que se haga a los elementos a, pero además podremos llamar únicamente a esta función mediante el metodo trigger o desligar un grupo de funciones asociadas a un evento,

$("a").trigger("click.namespace");

Con esto hemos lanzamos el evento click con el espacio de nombre "namespace" de los elementos a.

$("a").unbind(".namespace");

Y con esto hemos desligado todos los tipos de eventos del espacio de nombre namespace, ya sean eventos click, dbclick, mousedown, mouseup, etc..

¿Se te ocurre como podrías utlizar los espacios de nombre en los eventos? Aquí te dejo un ejemplo simple de namespaced events. Consiste en un formulario que añade los valores que introduces en el campo "name" en una lista. La particularidad es que he dividido la tarea en 2 funciones, una para crear la lista y otra para añadir elementos, la primera de ellas la bindeo antes que la segunda y la desvindeo al acabarse ella misma. De esta manera consigo que la primera vez se llame a ambas funciones y las sucesivas solamente a la segunda.

HTML:

<form action="" method="post" id="addName">
<p>
  <label for="Name">Nombre:</label>
    <input type="text" name="name" value="" id="name"/>
  </p>
  <p><input type="submit" value="Añadir nombre"/></p>
</form>

Javascript:

//Bind Event for the first time
$('#addName').bind('submit.first', function(){
    $(this).after('<p>Lista de nombres:</p><ul id="listNames"></ul>').unbind('submit.first');
});

//Bind Event for ever
$('#addName').bind("submit", function(){
if('' == this.name.value) return false;
$('#listNames').append('<li>' + this.name.value + '</li>');
return false;
});

Ese es un ejemplo para ver el funcionamiento del namespacing, pero en este caso, ya que eliminamos el evento en la primera ejecución sería más útil utilizar el atajo one, quedando el primer evento de la siguiente manera:

//Bind Event for the first time
$('#addName').one(function(){
    $(this).after('<p>Lista de nombres:</p><ul id="listNames"></ul>');
});

Aquí podéis ver el funcionamiento del código expuesto anteriormente:

Demo

¿Qué te aparecido? ¿Te resulta útil? Cuéntanos dónde y cómo lo has aplicado para que aprendamos todos trucos nuevos de jQuery.

Expand

jQTouch - plugin de jQuery para desarrollo web para móviles

jQTouch¿Estás pensando en adaptar tu web al iPhone o al Android?, o quizá ¿quieres desarrollar una aplicación web para dispositivos móviles? Pues esto te puede interesar. Se trata de un plugin de jQuery para desarrollo web móvil para iPhone, iPod Touch y otros dispositivos con visión de futuro.

Este plugin te permite mediante una fácil configuración animaciones nativas de WebKit, precarga de imágenes, eventos callback, plantillas flexibles y extensiones. Dispone de una ámplia documentación y multiples ejemplos, por lo que no te costará poner en marcha la aplicación que tienes en mente.

Puedes descargarlo del proyecto jQTouch en Google Code.

Expand

Nueva versión de JQuery: 1.2.2

53714-46267.jpgJQuery celebra su segundo aniversario con la publicación de su versión 1.2.2. Esta versión incluye principalmente correcciones para varios bugs de la versión 1.2, junto con algunas mejoras, sobre todo en el rendimiento del los selectores.

Cambios importantes en esta nueva versión

  • Mejora de un 300% en la velocidad de $(ElementoDOM)
  • Mejoras en el comportamiento de la función .ready()
  • Nuevos eventos: mouseenter, mouseleave, mousewheel.
  • Función .not más compleja.
  • y más...

JQuery sigue siendo uno de los frameworks javascript más activos y prometedores de los que disponemos en la actualidad.

Expand

Publicado el User Interface de JQuery

Pues sí, últimamente escribo poco y parece que sólo lo haga de JQuery, aunque en verdad creo que vale la pena llamar la atención sobre la última novedad de esta gente: una nueva librería, User Interface, preparada para funcionar al unísono con nuestro framework javascript favorito.

User Interface nos permitirá conseguir de forma sencilla efectos complejos como por arrastrar y soltar, listas ordenables, mensajes de aviso personalizables sin popups, elementos redimensionables... en definitiva un montón de funciones avanzadas que nos permitirán añadir más dinamismo a nuestras aplicaciones web, al estilo JQuery: de forma más rápida y con menos líneas de código.

Yo venía usando hasta ahora la extensión que habían preparado los chicos de interface.eyecon.ro, pero dado que dejaron de actualizarla desde la versión 1.1.2, y que esta nueva librería parte de los propios desarrolladores de JQuery, creo que empezaré a hacer pruebas para migrar en unas semanas.

Si tienes curiosidad por ver qué es capaz de hacer User Interface te recomiendo que le eches un vistazo al visualizador de imágenes que han preparado a modo de demo.

28182-27130.jpg

Expand

JQuery 1.2 y su nueva librería User Interface

Los chicos de JQuery no paran. Hace unos días anunciaban la última release de la versión 1.1, y ayer por la noche comentaban en su blog que ya está disponible para descarga la primera release de la nueva versión 1.2. Como siempre, la nueva versión viene con bastantes mejoras de rendimiento, varios bugfixes, y lo más importante: nuevas funcionalidades y atajos, y algunas otras que han pasado a mejor vida.

Si vas a pasarte a esta nueva versión no olvides repasar sus consejos de actualización, y leerte la nota completa del release de JQuery 1.2.

27562-26661.jpg En el mismo post anuncian también para este mismo domingo dia 16 de Septiembre el lanzamiento de su User Interface Library, que extenderá las posibilidades de la librería con un montón de nuevos eventos y funcionalidades: Drag & Drop, elementos ordenables, creación de árboles expandibles, acordeones, pestañas... y como ejemplo nos muestran una captura de lo que se podrá conseguir con ella. ¡Me muero de ganas de probarla!

27562-26662.jpg