Pixelovers

Libro manual jQuery UI 1.7

jorgecasar — Sat, 27 Feb 2010 16:55:00 +0100

Hace unos meses cayó en mis manos este fantástico libro: jQuery UI 1.7 de Dan Wellman. Y lo llevo usando casi a diario desde entonces puesto que estoy metido en un proyecto en el cual usamos casi toda la librería (Dialog, Slider, Tabs, Sortable...). Al principio pensé que no le daría uso puesto que existen demos y documentacion de jQuery UI, pero desafortunadamente no es tan buena como me esperaba.

Creo que una de las partes que más conflicto crea entre los usuarios del framework es la cantidad de clases que añade a los elementos involucrados. Y es cierto, añade muchas, pero todas ellas necesarias. Gracias a eso te permite controlar a tu gusto la interfaz. Ellos te proporcionan una serie de temas, los cuales puedes personalizar mediante el jQuery UI ThemeRoller, pero hay casos en los que te quieres salir de la norma y dar, en un caso concreto, un estilo diferente. Conociendo bien el porqué de cada clases es muy fácil, y para este caso el libro me ha venido como anillo al dedo. He podido aprender, ya en el capítulo 2, el CSS Framework, algo imprescindible para dotar a tu interzar la personalidad que buscabas.

Por otro lado el libro me ha venido muy bien para entender paso a paso el funcionamiento de los widgets. Con lo que he podido crear mis propois plugins para automatizar ciertos procesos, como por ejemplo la creación de sliders, o paneles configurables mediante sortable.

La verdad que siendo sincero, si piensas desarollar algo con jQuery UI 1.7 y quieres hacer bien, te recomeiendo este libro.

Leer Libro manual jQuery UI 1.7 en Pixelovers

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

juanmaguitar — Sat, 20 Feb 2010 20:30:00 +0100

Hace unas semanas iniciamos una serie de 2 posts para hablar de lo que consideramos que son unas buenas practicas para desarrollar codigo Javascript con la libreria jQuery.

Con este post cerramos la serie y profundizamos un poco más en el tema

En el primer post de esta serie comentamos algunas generalidades que nos pueden servir de base a la hora de desarrollar un código JS eficiente. En este segundo post hablaremos de como solucionar de forma eficiente problemas concretos que nos solemos encontrar en nuestros desarrollos.

Asi que, ahi vamos...

Practicas eficientes

Checkear la disponibilidad de un objeto antes de acceder a él. Muchos de los errores en Javascript se deben a que se intenta acceder a elementos o métodos que no existen en un determinado momento del periodo de ejecución. Para solucionar esto basta con realizar un pequeña comprobación antes de utilizar dicho elemento o método.
Ejemplo:
```
			

	if ( $('#signup').length ) {
		$('#signup input').change ( function () {
			alert ("Acabas de poner " + $(this).val() );
		});
	}
					
```

Evita el uso de variables globales. A fin de evitar el uso de variables globales, podemos utilizar data, un método de jQuery que nos permite mantener relaciones entre valores y elementos DOM.

Por ejemplo podemos guardar un dato en el objeto document de esta forma

			

	$(document).data('id_country',3) ,

Y acceder al dato de esta leer el dato de esta otra

			

	$(document).data('id_country')

Aunque lo suyo realmente es aprovechar la terminologia de objetos y ubicar las variables en su contexto

Ejemplo:

			

	var mySite = {
		general_1 : 100 ,
		general_2 : 200,
							
		myObject1 : {
							
			local_1 : 500,
			funcionLocal : function() {
				var local_2 = 600;
				console.log ("estoy en funcionLocal");
				console.log ("local_1=" + mySite.myObject1.local_1);
				console.log ("local_2=" + local_2);
			}
						
		},

		init : function() {
			console.log ("estoy en init");
			this.funcionalidad1();
			this.myObject1.funcionLocal();
		},
						
		funcionalidad1 : function() {
			console.log ("estoy en funcionalidad1");
			console.log ("general_1=" + this.general_1);
			console.log ("general_2=" + this.general_2);
		}
	}

Definir siempre las variables con VAR , incluso dentro de los FOR, de esta forma nos aseguramos que la variable tendrá el ambito que le corresponda. Si no se pone var se toma la variable como global.

Mala declaracion de variables para el FOR

			

	var i=0; // Creates a global variable

	function test() {
	   for (i=0; i<10; i++) {
		  // do something
	   }
	}

	test();

	alert(i); // The global variable i is now 10!

Buenas declaraciones de variables para el FOR

			

	var i=0; // Creates a global variable

	function test() {
	   var i=0;
	   for (i=0; i<10; i++) {
			// do something
	   }
	}

	function test2() {
	   for (var i=0; i<10; i++) {
			// do something else
	   }
	}

	test();
	test2();

	alert(i); // The global variable i is still 0!

Usa FOR en vez de EACH. Por lo general las funciones nativas de Javascript son mas rapidas que las derivadas de librerias

Ejemplos:

			

	var array = new Array ();  
	for (var i=0; i<10000; i++) {  
		array[i] = 0;  
	}  
	
	// Mas lento
	$.each (array, function (i) {  
		array[i] = i;  
	});  

	// Mas rapido
	var l = array.length;  
	for (var i=0; i<l; i++) {  
		array[i] = i;  
	}

Para concatenaciones largas de cadenas, mejor JOIN() que CONCAT(). JOIN devuelve texto y CONCAT devuelve un array.

Ejemplos:

			

	var array = [];  
	for (var i=0; i<=1000; i++) {  
		array[i] = '<li>'+i+'</li>';  
	}  

	// JOIN devuelve texto
	$('#list').html ( array.join (''));  

	// CONCAT devuelve array
	var array_concat = array.concat('');

Return FALSE Si no devuelves FALSE en la funcion la pagina salta al top, por eso a la hora de capturar eventos conviene devolver FALSE al final para que haga lo que nosotros definimos y nada mas
En vez de esto:
```
			
	
	$('#item').click (function () {
		// stuff here
	});
```
Mejor esto:
```
	$('#item').click (function () {
		// stuff here
		return false;
	});
```
Usar correctamente el tag SCRIPT. El atributo LANGUAGE está deprecado en el tag <script>. La forma correcta de crear un bloque de código javascript es:
```
	<script type="text/javascript >
		// code JS here
	<script>
```

La selección mas rápida es por ID. Siempre el selector más rápido y que menos iteraciones produce es la búsqueda por un #id, ya que simplemente lanza un document.getElementById(), lo que al ser nativo nos asegura un tiempo de respuesta mínimo y un mínimo consumo de proceso.

Por ejemplo, con este codigo:



	<div id="content">
		<form method="post" action="/">
			<h2>Traffic Light</h2>
				<ul id="traffic_light">
					<li><input type="radio" name="light" value="red" /> Red</li>
					<li><input type="radio" name="light" value="yellow" /> Yellow</li>
					<li><input type="radio" name="light" value="green" /> Green</li>
				</ul>
				<input id="traffic_button" type="submit" value="Go" />
		</form>
	</div>

En vez de esto:

			

	// Más lento
	var traffic_button = $('#content .button');

Mejor esto:



	// Más rápido
	var traffic_button = $('#traffic_button');

Para acceder a varios elementos, siempre que podamos debemos hacerlo partiendo de un #id, de esta forma nos aseguramos una iteración más ajustada.:



	var traffic_lights = $('#traffic_light input');

Usar tags delante de las clases. Al hacer selección de clases con jQuery, es recomendable indicar el tag del elemento solicitado ya que al hacer iternamente uso de document.getElementsByTagName() para localizarlos acotamos previamente los elementos en los que buscar las clases solicitadas.
Por ejemplo, para el HTML del punto anterior, si queremos seleccionar el elemento radio con, la opción más rápida sería la siguiente:
```
	
	var active_light = $('#traffic_light input.on');
```

Usar la caché de objetos. Coger el hábito de guardar una variable con el valor de un objeto jQuery nos evita realizar una serie de comprobaciones innecesarias y que en scripts pesados pueden suponer un aumento de rendimiento importante.

Seleccion poco eficiente de elementos:

			

	$('#traffic_light input.on).bind('click', function(){...});
	$('#traffic_light input.on).css('border', '3px dashed yellow');
	$('#traffic_light input.on).css('background-color', 'orange');
	$('#traffic_light input.on).fadeIn('slow');

Seleccion Eficiente de elementos:



	var $active_light = $('#traffic_light input.on');
	$active_light.bind('click', function(){...});
	$active_light.css('border', '3px dashed yellow');
	$active_light.css('background-color', 'orange');
	$active_light.fadeIn('slow');

Crear Objeto Global con resultados jQuery.. Si necesitamos utilizar una selección jQuery en diferentes funciones, se puede cachear en un objeto con ámbito global.

Ejemplo:



	// Define an object in the global scope (i.e. the window object)

	window.$my = {

              // Initialize all the queries you want to use more than once
              head : $('head'),
              traffic_light : $('#traffic_light'),
              traffic_button : $('#traffic_button')
	};

	function do_something() {

              // Now you can reference the stored results and manipulate them
              var script = document.createElement('script');

              $my.head.append(script);
              // When working inside functions, continue to save jQuery results

              // to your global container.
              $my.cool_results = $('#some_ul li');
              $my.other_results = $('#some_table td');

              // Use the global functions as you would a normal jQuery result
              $my.other_results.css('border-color', 'red');
              $my.traffic_light.css('border-color', 'green');
	}

Aprovechar el encadenamiento. El encadenamiento pese a producir un amasijo de código que no contribuye a mejorar la lectura del código hace que nuestro Javascript sea más ligero y puede ayudar a mejorar el rendimiento de nuestros scripts.
Ejemplo:
```
	var $active_light = $('#traffic_light input.on');
	
	$active_light.bind('click', function(){...})
		.css('border', '3px dashed yellow')
		.css('background-color', 'orange')
		.fadeIn('slow');
```
Usar subqueries siempre que se pueda. Si debemos realizar varias búsquedas sobre un elemento es altamente recomendable realizar un uso intensivo del método find() de jQuery para realizar las búsquedas. Mejoraremos el tiempo de respuesta al evitarnos búsquedas previas ya realizadas.
Ejemplo:
```
	var $traffic_light = $('#traffic_light'),
	$active_light = traffic_light.find('input.on'),
	$inactive_lights = $traffic_light.find('input.off');
```

Limitar la manipulación directa del DOM. La idea general es crear exactamente lo que necesitas en memoria y luego actualizar el DOM

Si necesitas crear una lista de elementos, en vez de :

			
 
	var top_100_list = [...], // assume this has 100 unique strings
	$mylist = $('#mylist'); // jQuery selects our <ul> element

	for (var i=0, l=top_100_list.length; i<l; i++) {
		$mylist.append('<li>' + top_100_list[i] + '</li>');
	}

Creamos la lista de elementos en un string antes de insertarlo en el DOM



	var top_100_list = [...], // assume this has 100 unique strings
	$mylist = $('#mylist'), // jQuery selects our <ul> element
	top_100_li = ""; // This will store our list items
	
	for (var i=0, l=top_100_list.length; i<l; i++) {
		top_100_li += '<li>' + top_100_list[i] + '</li>';
	}

	$mylist.html(top_100_li);

Usar JSON. Para guardar estructuras de datos o enviar/recibir estructuras de datos via AJAX mejor JSON que XML

Y hasta aqui la segunda parte y el final de la serie de consejos y buenas practicas para desarrollo con Javascript y jQuery.

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

Enlaces y más

Leer Javascript y jQuery: Consejos y Buenas Practicas (Parte II) en Pixelovers

Enlaces de la semana (semana 5 de 2010)

jorgecasar — Sun, 07 Feb 2010 16:40:00 +0100

Comenza febrero y con ello inauguramos una nueva sección el en blog "Enlaces de la semana", en la que haremos un resumen de todos los enlaces que hemos ido poniendo en twitter (@pixelovers) y en la página Pixelovers en Facebook.

Javascript

Código Konami en Javascript - http://bit.ly/a3Tm22.
Rich-Text Editors for 2010 and Beyond - http://bit.ly/b4BOEf.
The jQuery Cross-Domain Ajax Guide - http://bit.ly/aRfhU9.
10 funciones imprescindibles en Javascript - http://bit.ly/9VSGg8 | No va a ser todo jQuery. Funciones muy útiles en Javascript nativo.
Hovertip, plugin de jQuery para tooltips - http://bit.ly/cuFGl4 | El mas ligero y completo que hemos encontrado hasta la fecha.

CSS

Pure CSS bar charts as a simple API - http://bit.ly/aHS4AQ.

HTML

Nuevos campos de formulario en HTML5 - http://bit.ly/9ACgbU.

Diseño

MagazineXpert, publicación para la comunidad hispanohablante de tecnologías y aplicaciones Adobe - http://bit.ly/cXaZP5.
A Set Of User Interface Design Elements (PSD) - http://bit.ly/d2Lg1V | Control buttons, info boxes, breadcrumbs, forms, scrollbars & more.
Color Theory for Designers, Part 1: The Meaning of Color - http://bit.ly/9ixnJb | Smashing Magazine.
Color Theory For Designers, Part 2: Understanding Concepts And Terminology - http://bit.ly/asn06E | Smashing Magazine.
100+ Seamless Patterns Great for Creating Website Backgrounds - http://bit.ly/a9JoCE.
Beautiful Free Vector Downloads Roundup - http://bit.ly/9jQ8o8.

Utilidades web

Using firebug lite on Google Chrome. Originaly made by Firebug Team - http://bit.ly/doKjxi.
How to Use sIFR 3 - http://bit.ly/dlGflM | Video explicativo de este sistema que te permite usar cualquier fuente en la web
Best Practices To Develop Perfect Websites for iPhone and Mobile Devices - http://bit.ly/bFzPDd

Espero que os resulten interesantes y si queréis descubrir estos enaces antes siguenes en Twitter @pixelovers y hazte fan de la página Pixelovers en Facebook.

Leer Enlaces de la semana (semana 5 de 2010) en Pixelovers

Nuevos campos de formulario en HTML5

jorgecasar — Mon, 01 Feb 2010 21:38:00 +0100

Leo en anieto2k todo lo que necesitamos saber sobre los formularios HTML5, un artículo de Dive into HTML5 titlulado A Form of Madness. Habla de atributos y valores de atributos ya existentes, que abren un nuevo mundo alrededor de los formularios. Desafortunadamente no lo soportan casi ningún navegador, pero poco a poco todos van implementándolo.

Actualización: Como nos indica neiker, en Buffer Overflow encontramos una review en castellano sobre HTML5: Novedades en los formularios.

Leer Nuevos campos de formulario en HTML5 en Pixelovers

jQuery 1.4: 15 nuevas caracter�sticas que debes conocer

jorgecasar — Mon, 25 Jan 2010 15:30:00 +0100

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?

Pasar atributos a jQuery(...) – jQuery( html, propiedades )
¡Tódo "hasta que"! – .nextUntil([ selector ]), .prevUntil([ selector ]) y .parentsUntil([ selector ])
Enlazar múltiples controladores de eventos – .bind( eventos )
Per-property-easing (Facilitando por propiedad) – .animate(propiedades, opciones)
¡Nuevos eventos live! – .live("submit|change|focusin|focusout", controlador)
Control del contexto de una función – jQuery.proxy(función, contexto)
Demora una cola de Animación – .delay(duración, [ nombre de la cola ])
Comprobar si un elemento tiene algo – .has(selector) y jQuery.contains(contenedor, contenido)
Desenvolver elementos – .unwrap()
Eliminar elementos sin borrar datos – .detach([ selector ])
Mejoras en index(...) – .index(selector)
Los métodos de manipulación DOM aceptan "callbacks":
- after
- before
- append
- prepend
- addClass
- toggleClass
- removeClass
- wrap
- wrapAll
- wrapInner
- val
- text
- replaceWith
- css
- attr
- html
Determinar el tipo del objeto – jQuery.isPlainObject(objeto) y jQuery.isEmptyObject(objeto)
Mejoras en Closest(...) – .closest(selector, [ contexto ])
Nuevos eventos! focusIn y focusOut – .focusin(manejador) y .focusout(manejador)

Leer jQuery 1.4: 15 nuevas caracter�sticas que debes conocer en Pixelovers

Interfaces gr�ficas de usuario (plantillas de dise�o)

jorgecasar — Mon, 11 Jan 2010 09:27:00 +0100

Ahora que empieza un año nuevo es un buen momento para hacer nuevos propósitos, y qué mejor que mejorar tus diseños siguiendo una retícula o desarrollando para nuevos dispositivos. Os traemos unas cuantas plantillas que pueden hacerte más facil llevar a cabo este propósito de año nuevo.

Navegadores de escritorio

Retícula de 960px

Es una buena base para tus diseños web puesto que es una medida muy versatil que te permite multiples divisiones en columnas de diferentes anchos. Además este ancho cabe perfectamente en los navegadores a una resolución de pantalla de 1024x768 px., que es la más estandar actualmente, quitándo bordes y barras de scroll.

Más info | Plantilla de retícula de 960px.

Descargar 960px Grid.

Elementos del navegador web

Si quieres dotar a tus diseños de algo más de realismo puedes presentarlos incrustados en una ventana de navegador o añadiendo elementos de formulario, como botones, inputs, barras de scroll, etc... Siendos sinceros la interfaz gráfica de Mac OS X es la más bonita y apreciada por los diseñadores, pero de todas formas os dejamos las plantillas de los más habituales.

Navegadores en Mac OS X

Navegadores en Windows Vista

Navegadores en Windows XP

Dispositivos Móviles

Cada vez es más frecuente el uso de móviles para navegar por internet, por ello la necesidad de crear una versión móvil de tu web se está conviertiendo en algo indispensable. Debido a la multitud de dispositivos diferentes que existen tenemos la opción de crear una web genérica, o si le queremos dotar de valor añadido a nuestra web, podemos adaptar nuestro sitio a cada uno de los diferentes dispositivos.

Plantilla de la interfaz de iPhone

Nuestro compañero Albert García, ya nos habló sobre Plantilla para photoshop de la interfaz de iPhone. Y ahora os traemos el PSD del la última versión del sistema operativo Móvil de Apple, el iPhone OS 3.0, que viene con nuevos elementos gráficos como:

• Mapa y elementos del mapa, inluido el enrrollado
• Elementos para copiar y pegar
• Editor de barra de línea de tiempo
• iPhone Horizontal
• Barras de paneles horizontales y teclados

Más info | iPhone GUI PSD 3.0.

Descargar iPhone GUI PSD 3.0.

Plantilla de la interfaz de Andrid

Los chicos de Smashing Magazine, que recientemente han publicado The Smashing Book, nos dejan esta interfaz completita para su uso libre.

Más info | Android GUI PSD Vector Kit.

Descargar Android GUI PSD Vector Kit.

Plantilla de la interfaz de Palm Pre

La gente de teehan+lax, los que han desarrollado iPhone GUI PSD 3.0., nos vuelve a sorprender con Palm Pre GUI PSD.

Más info | Palm Pre GUI PSD.

Descargar Palm Pre GUI PSD (tipografía Coconut).

Descargar Palm Pre GUI PSD (tipografía Avenir).

Ver �lbum de fotos | Leer Interfaces gr�ficas de usuario (plantillas de dise�o) en Pixelovers

RMSForms, framework CSS para formularios

jorgecasar — Thu, 07 Jan 2010 09:21:00 +0100

Si eres desarrollador web, seguro que alguna vez has maldecido cuando te ha tocado maquetar formularios. Y es totalmente normal, a veces se convierte en un quebradero de cabeza suplicio. Robert M. Sandy Jr. ha pensado en ello y por eso a desarrollado RMSForms, un framework CSS para ayudar a dar estilo a los molestos formularios. No solo se centra en las incoherencias de los navegadores, si no también en conseguir una disposición correcta tanto visualmente como semánticamente. Así que si tienes que hacer una web con muchos formularios, puedes plantearte utilizar esta hoja de estilo de menos de 100 líneas, sin comentarios, y un tamaño de 8Kb.

Está basado en una estructura HTML muy simple:

<fieldset>
  <legend></legend>
  <ul class="form [modifier]">
    <li><label class="[label modifier]"></label><input/></li>
  </ul> 
 </fieldset>

Donde los modificadores están compuestos por 3 letras:

H = Bloque Horizonal
V = Bloque Vertical
I = Inline

Y se pueden generar los siguientes:

vvv – Vertical <li>, Vertical <label>, Vertical campos de formulario
hvv – Horizontal <li>, Vertical <label>, Vertical campos de formulario
hii – Horizontal <li>, Inline <label>, Inline campos de formulario
hhh – Horizontal <li>, Horizontal <label>, Horizontal campos de formulario
vii – Vertical <li>, Inline <label>, Inline campos de formulario
vhh – Vertical <li>, Horizontal <label>, Horizontal campos de formulario

Si queréis ver el resultado, aquí tenéis un ejemplo de RMSForm.

Leer RMSForms, framework CSS para formularios en Pixelovers

Crear un CSS inicial con PrimerCSS

jorgecasar — Tue, 05 Jan 2010 10:22:00 +0100

Si te da miedo enfrentarte a una hoja de estilos en blanco, no sabes por donde empezar. ¿Qué elementos tienes en el HTML? ¿Qué clases has usado? ¿Qué identificadores empeaste? Y también si no te quieres dejar ningún elemento de la página sin estilo una buena forma de empezar es con PrimerCSS.

Personalmente le veo más utilidad cuando quieres hacer una hoja de estilo para una web ya existent, más que para empezar un proyecto. Por ejemplo es muy útil para hacer una plantilla de Wordpress u otro CMS. Si te gustaría crearte tu propio CSS para Stylish no te dejarías nada por diseñar. ¿Para qué utilizarías tu PrimerCSS? ¿Le ves utilidad o prefieres ir sacando tu mismo los selectores?

Leer Crear un CSS inicial con PrimerCSS en Pixelovers

Feliz 2010

jorgecasar — Fri, 01 Jan 2010 19:14:00 +0100

El año 2009 ha sido importante para pixelovers porque hemos consegudo formar un nuevo equipo de editores, Juanma Garrido y Jorge del Casar, para poder devolverle la actividad al blog. Estamos seguros que 2010 será un año rico en artículos de calidad y más frecuencuentes.

Si no lo has hecho ya, síguenos en Twitter (@pixelovers) o suscríbete a nuestro RSS, para estar al día de todas las novedades de Pixelovers. Si quieres contactar con nosotros para propornernos nuevos propósitos para el año 2010 puede hacerlo comentando esta entrada o mediante el formulario de contacto.

¡Feliz 2010 a todos!

Leer Feliz 2010 en Pixelovers

Geoposicionamiento web y la API de Google Maps V3

jorgecasar — Tue, 29 Dec 2009 10:24:00 +0100

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:

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>

Crear un elemento div llamado "map_canvas" para contener el Mapa.
```
<div id="map_canvas" style="width:100%; height:100%"></div>
```

Crear un objeto en JavaScript para guardar una serie de propiedades del mapa.

var myOptions = {
   zoom: 8,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

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
   );
}

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.

Leer Geoposicionamiento web y la API de Google Maps V3 en Pixelovers

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

juanmaguitar — Fri, 25 Dec 2009 20:50:00 +0100

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.

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

Leer Javascript y jQuery: Consejos y Buenas Practicas (Parte I) en Pixelovers

C�mo geoposicionar un dispositivo con el navegador

jorgecasar — Tue, 22 Dec 2009 10:20:00 +0100

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.

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?

Ver �lbum de fotos | Leer C�mo geoposicionar un dispositivo con el navegador en Pixelovers

Chuleta de jQuery en PDF

jorgecasar — Tue, 15 Dec 2009 10:00:00 +0100

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.

Leer Chuleta de jQuery en PDF en Pixelovers

Manifiesto �En defensa de los derechos fundamentales en internet�

jorgecasar — Sun, 13 Dec 2009 10:15:00 +0100

Ante la inclusión en el Anteproyecto de Ley de Economía sostenible de modificaciones legislativas que afectan al libre ejercicio de las libertades de expresión, información y el derecho de acceso a la cultura a través de Internet, los periodistas, bloggers, usuarios, profesionales y creadores de internet manifestamos nuestra firme oposición al proyecto, y declaramos que:

Los derechos de autor no pueden situarse por encima de los derechos fundamentales de los ciudadanos, como el derecho a la privacidad, a la seguridad, a la presunción de inocencia, a la tutela judicial efectiva y a la libertad de expresión.
La suspensión de derechos fundamentales es y debe seguir siendo competencia exclusiva del poder judicial. Ni un cierre sin sentencia. Este anteproyecto, en contra de lo establecido en el artículo 20.5 de la Constitución, pone en manos de un órgano no judicial -un organismo dependiente del ministerio de Cultura-, la potestad de impedir a los ciudadanos españoles el acceso a cualquier página web.
La nueva legislación creará inseguridad jurídica en todo el sector tecnológico español, perjudicando uno de los pocos campos de desarrollo y futuro de nuestra economía, entorpeciendo la creación de empresas, introduciendo trabas a la libre competencia y ralentizando su proyección internacional.
La nueva legislación propuesta amenaza a los nuevos creadores y entorpece la creación cultural. Con Internet y los sucesivos avances tecnológicos se ha democratizado extraordinariamente la creación y emisión de contenidos de todo tipo, que ya no provienen prevalentemente de las industrias culturales tradicionales, sino de multitud de fuentes diferentes.
Los autores, como todos los trabajadores, tienen derecho a vivir de su trabajo con nuevas ideas creativas, modelos de negocio y actividades asociadas a sus creaciones. Intentar sostener con cambios legislativos a una industria obsoleta que no sabe adaptarse a este nuevo entorno no es ni justo ni realista. Si su modelo de negocio se basaba en el control de las copias de las obras y en Internet no es posible sin vulnerar derechos fundamentales, deberían buscar otro modelo.
Consideramos que las industrias culturales necesitan para sobrevivir alternativas modernas, eficaces, creíbles y asequibles y que se adecuen a los nuevos usos sociales, en lugar de limitaciones tan desproporcionadas como ineficaces para el fin que dicen perseguir.
Internet debe funcionar de forma libre y sin interferencias políticas auspiciadas por sectores que pretenden perpetuar obsoletos modelos de negocio e imposibilitar que el saber humano siga siendo libre.
Exigimos que el Gobierno garantice por ley la neutralidad de la Red, en España ante cualquier presión que pueda producirse, como marco para el desarrollo de una economía sostenible y realista de cara al futuro.
Proponemos una verdadera reforma del derecho de propiedad intelectual orientada a su fin: devolver a la sociedad el conocimiento, promover el dominio público y limitar los abusos de las entidades gestoras.
En democracia las leyes y sus modificaciones deben aprobarse tras el oportuno debate público y habiendo consultado previamente a todas las partes implicadas. No es de recibo que se realicen cambios legislativos que afectan a derechos fundamentales en una ley no orgánica y que versa sobre otra materia.

Este manifiesto, elaborado de forma conjunta por varios autores, es de todos y de ninguno. Se ha publicado en multitud de sitios web. Si estás de acuerdo y quieres sumarte a él, difúndelo por Internet.

También está disponible en otros idiomas, tales como Inglés, Francés, Portugués-brasileiro, Catalán, Gallego, Asturiano, Euskera, Aaragonés, Sueco y Chino.

Leer Manifiesto �En defensa de los derechos fundamentales en internet� en Pixelovers

Namespace en eventos de jQuery

jorgecasar — Thu, 10 Dec 2009 09:00:00 +0100

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.

Leer Namespace en eventos de jQuery en Pixelovers

The Smashing Book

jorgecasar — Sun, 06 Dec 2009 11:00:00 +0100

Ya por fin ha salido a la venta el libro de Smashing, en el que encontrarás las mejores prácticas en diseño Web moderno. Sus 313 páginas están llenas de consejos técnicos y buenas prácticas de codificación, usabilidad y optimización, adnás podrás aprender a como crear interfaces de usuario con éxito y aplicar los principios de marketing para aumentar las tasas de conversión. Todo esto no sería posible sin mostarte cómo obtener el máximo provecho de la tipografía, color y marca.

Un libro muy recomendable para los diseñadores web y desarrolladores de interfaces, que espero tener en mis manos muy pronto para poder contar de primera mano mis impresiones.

Leer The Smashing Book en Pixelovers

Las mejores fuentes gratuitas de 2009

jorgecasar — Tue, 01 Dec 2009 09:00:00 +0100

Para los amantes de la tipografía hoy os dejamos con las 12 mejores fuentes gratuitas de 2009 seleccionadas por Web Ddesign Ledger.

¿Tu tipografía favorita no está entre ellas? ¿Quieres compartirla con nosotros?

Ver �lbum de fotos | Leer Las mejores fuentes gratuitas de 2009 en Pixelovers

Chuleta de HTML5 en PDF

jorgecasar — Tue, 24 Nov 2009 09:00:00 +0100

La semana pasada os hablamos de Reset CSS para HTML5 y esta semana os traemos una chuleta de HTMl5 publicada en Smashing Magazine en versión PDF para que podamos aprender las nuevas etiquetas e ir preparando nuestras webs y aplicaciones online y estar listos para cuando la mayoría de los navegadores lo soporten.

¿Qué os parece el HTML5? ¿Echáis de menos alguna etiqueta que se debería haber incluido? ¿Tienes ya tu web preparada y quieres compartirla con nosotros?

Leer Chuleta de HTML5 en PDF en Pixelovers

Reset CSS para HTML5

jorgecasar — Tue, 17 Nov 2009 09:00:00 +0100

Ya os hablamos en CSS: Consejos y buenas prácticas sobre la importancia de resetear las propiedades CSS para eliminar diferencias entre navegadores desde el principio. Pues ahora os traemos de la mano de html5doctor.com un nuevo reset CSS adaptado a HTML5. Incluye las nuevas etiquetas y elimina las que ya no están permitidas en este lenguaje de marcado.


/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
}
body {
        line-height:1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
        display:block;
}

nav ul {
        list-style:none;
}

blockquote, q {
        quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
        content:'';
        content:none;
}

a {
        margin:0;
        padding:0;
        border:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
}

ins {
        background-color:#ff9;
        color:#000;
        text-decoration:none;
}

mark {
        background-color:#ff9;
        color:#000;
        font-style:italic;
        font-weight:bold;
}

del {
        text-decoration: line-through;
}

abbr[title], dfn[title] {
        border-bottom:1px dotted #000;
        cursor:help;
}

table {
        border-collapse:collapse;
        border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
        vertical-align:middle;
}

Puedes descargar el código del proyecto html5resetcss en google code.

Leer Reset CSS para HTML5 en Pixelovers

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

jorgecasar — Tue, 10 Nov 2009 09:00:00 +0100

¿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.

Leer jQTouch - plugin de jQuery para desarrollo web para m�viles en Pixelovers