PhoneGap es una de las mejores opciones (y mi favorita) que existen en el mercado para crear aplicaciones para móviles utilizando HTML5 + CSS3 + JS.

Vamos a intentar dejar claras en este post 10 ideas fundamentales sobre PhoneGap.

¿Qué es SIFO?

SIFO es un framework que surge de la necesidad de reaprovechar todas las soluciones "definitivas" que se iban descubriendo en el trabajo del día a día, y que se podian utilizar en más proyectos.

Con soluciones "definitivas" me refiero a las soluciones que despues de haber sido probadas en el mundo real han demostrado ser la mejor opción (cómo implementar la internacionalización, el trabajo en multiples entornos, la cache, el debug, etc...)

Lleva ya funcionando un tiempo en algunos sitios, tanto sitios de mucho trafico con multiples servidores cómo en sitios más modestos, asi que su practicidad y flexibilidad está más que probada.

SIFO contiene un montón de librerias y clases que resuelven de forma sencilla los problemas básicos que te vas a encontrar en el desarrollo de un sitio web, lo que te permite centrar tu atención en resolver la lógica de tu negocio. 

Además es gratuito! 

Leer más

¿Tu JavaScript se va haciendo cada vez mas grande y se está volviendo immanejable? ¿Estas buscando alguna arquitectura que te permita hacer tu aplicacion más escalable?

Para aplicaciones que se van haciendo grandes la mejor solucion es la de aplicar una arquitectura de diseño modular.

Dicho de forma sencilla un modulo seria el código que controla un trozo de HTML (y nada más), o dicho de otra forma, un grupo de HTML + CSS + JS autónomo. 

Por ejemplo, en Yahoo utilizan esta arquitectura lo que les permite realizar codigo JS individualmente a cada modulo que implementan. Esto seria un modulo de Yahoo:

Leer más

Si utilizas jQuery, es una buena idea que cargues la librería desde un CDN (Content Delivery Network).

Pero, ¿qué es un CDN?

Es el nombre que recibe un grupo de servidores repartidos por todo el mundo en puntos estratégicos y pensados para la distribución de ficheros.

Hay varios CDN’s gratuitos, entre ellos el de Google, el de Microsoft y el de Edgecast.

Tambien hay  CDN's de pago. Algunos puede que te suenen como Akamai o Amazon CloudFront

¿Cómo funciona un CDN?

La idea es que en vez de cargar las librerias desde tu servidor de hosting, las cargues directamente desde el CDN. De este modo cuando se haga la petición se cargará la librería (o librerias solicitadas) desde el nodo mas cercano al cliente con lo que se cargará más rapido.

Hace 1 mes se realizó el Chirp, la conferencia oficial para desarrolladores de Twitter. Y en ella se presentaron varias novedades en torno al mundo Twitter. Entre ellas, una nueva página para desarolladores de Twitter: dev.twitter.com, donde podemos ver nuevas herramientas. En la que nos vamos a centrar, por ser la más cercana a la temática del blog es @Anywhere. @Anywhere es una API de Javascript que te permite integrar Twitter con tu sitio en unas pocas lineas de Javascript. Antes de empezar a utilizarla has de registrarte como desarrollador para que te faciliten una API key, para ello tienes el formulario de registro de un aplicación Anywhere. Tras ese paso, solo debemos añadir en las cabeceras de nuestra web la llamada a este script:

<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script>

Una vez añadido este script la foma de inicializar @Anywhere es la siguiente:

twttr.anywhere(function (T) {
  // Tu código aquí...
});

Como ves en realidad llamamos a una función y le pasamos una función de callback con un parámetro T (podéis llamarlo como queráis). La cual se ejecutará una vez cargado el script de Twitter @Anywhere. Con esta API, de momento, puedes realizar lo siguiente:

• Autoenlazar nombres de usuario de Twitter
• Hovercards
• Botones de Follow
• Caja de Tweet
• Login de usuario

Os invito a que la probéis. Desde Pixelover estamos preparando algunas demos de uso que os iremos enseñando a lo largo de estas semanas.

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

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":
    • after
    • before
    • append
    • prepend
    • addClass
    • toggleClass
    • removeClass
    • wrap
    • wrapAll
    • wrapInner
    • val
    • text
    • replaceWith
    • css
    • attr
    • html
13. Determinar el tipo del objeto – jQuery.isPlainObject(objeto) y jQuery.isEmptyObject(objeto)
14. Mejoras en Closest(...) – .closest(selector, [ contexto ])
15. Nuevos eventos! focusIn y focusOut – .focusin(manejador) y .focusout(manejador)

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.

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

• jQuery
• Firebug
• jQuery Tools
• jQuery UI
• YUI Compressor

Hace ya algún tiempo comentaba que no soy muy de usar frameworks css, pero en esta ocasión creo que voy a hacer una excepción. Diego Lafuente, conocido por su blog minid.net, ha escrito un magnífico framework CSS orientado al desarrollo de aplicaciones web para iPhone.

¿Y porqué ahora si? Pues porque el ámbito de uso de dicho framework es suficientemente específico y concreto como para que su uso valga la pena frente a un desarollo propio.

Si te interesa, puedes encontrarlo y descargarlo en Google Code, o bien probarlo online desde la demo.