Hace dos fines de semana se celebró en Berlin la versión europea de la conferencia más importante del JavaScript que hay actualmente: la jsConf

Y Pixelovers estuvo alli

Esta conferencia se celebra 2 veces al año (una en EEUU y la otra en Europa) y suele ir la creme de la creme de los desarrolladores en JavaScript. Por poner algunos ejemplos, en la de Berlin estuvieron:

• Brendan Eich: Co-fundador y CTO de Mozilla… y creador del lenguaje: JavaScript!
• Douglas Crockford: Senior architect en Yahoo!. Creador del formato JSON. Conferenciante y autor de varios libros. El autentico gurú de JavaScript.
• Stoyan Stefanov : Performance Gurú en Yahoo! Co-creador de Smush-it y arquitecto de YSlow 2.0. Conferenciante y a autor de varios libros sobre JavaScript. Si quieres aprender JavaScript avanzado, leete sus libros. Muy recomendado.

John Resig (creador de jQuery),  nos presentaba  hace unos dias oficialmente el nuevo proyecto del equipo de jQuery: jQuery Mobile.

Hasta ahora, para el desarrollo frontend de webs para dispositivos moviles habia que utilizar plantillas de diseño que podiamos encontrar por la red y plugins del tipo jQTouch, pero no habia una solucion integrada y estable… hasta ahora.

Continuando con serie de artículos dedicados al anywhere, ya  vimos la semana pasada como enlazar nombre de usuario de Twitter. Y esta semana hemos analizado la función hovercards, la cual nos permite mostrar la ficha de usuario de Twitter en los nombres de usuario que haya en nuestra página.

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.

Ya os hablamos hace un par de semanas de @Anywhere (API Javascript de Twitter) y hoy queremos entrar en más detalles sobre la librería, para que la puedas implementar en tu web de forma sencilla y potente. Por no hacer el artículo hablaremos en de cada uno de las funciones en un artículos separados. Así, hoy trataremos uno de los métodos más sencillitos de la API @Anywhere. También quiero destacar que todos los ejemplos de código estarán dentro de la llamada de callback (T) como dijimos en el anterior artículo:

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

En muchos de los plugins de jQuery que manejamos vemos las expresiones $.extend (o jQuery.extend) y $.fn.extend (o jQuery.fn.extend).

Pues bien, lo que estamos viendo en estas expresiones es la aplicación del metodo .extend().

Este método es la base para la creación de plugins y para la parametrización de nuestros plugins (es decir poder tener unos valores por defecto que el usuario pueda modificar al llamar al plugin).

Pero... ¿que hace exactamente el metodo .extend()?

Basicamente lo que hace es extender objetos. Esto significa que, dado un objeto, le añade el contenido (funciones y variables) de otro objeto (o de otros).

La nomenclatura de este metodo es la siguiente:

	jQuery.extend( target, [ object1 ], [ objectN ] )

Ahora bien, dependiendo del numero de objetos que reciba, el resultado final será diferente...

Desde hace tiempo vengo leyendo en muchos blogs de desarrollo con Javascript la recomendación de no utilizar variables globales en nuestro código. Pero ¿por qué se recomienda no utilizar variables globales en Javascript?

En pixelovers hemos querido ahondar un poco en esta cuestión y para ello comenzaremos respondiendo a algunas preguntas:

• ¿Qué son las variables globales?

  En Javascript los programas son entregados como texto. Este texto Javascript es evaluado (eval) y compilado en un ejecutable que se ejecuta inmediatamente. Esta ejecución puede dejar algunos elementos en el objeto global de la ventana.

  El objeto global es el espacio de memoria que contiene las funciones y variables que estan en la raiz. Las variables que no se definen específicamente tambien son consideradas como variables globales. Los nombres de estas variables se mantienen en el objeto global y sus valores son accesibles desde cualquier parte del código.

• ¿Si no es recomendable el uso de variables globales en Javascript por qué existen?

  Este uso de variables globales era conveniente para los pequeños scripts que Navigator 2 esperaba soportar. Con el tiempo, estos pequeños script han derivado en complejas aplicaciones Web 2.0 (POO, AJAX, uso de librerias, plugins, etc...)  por lo que el uso de variables globales ya no tiene justificación.

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.

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

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.