Hoy se cumplen 240,120 horas (10,005 días) desde que se estrenara la película TRON. Eso merece una celebración.

Tron en wikipedia
Tron Sector – Combatiendo por los usuarios contra Sark y el programa de control maestro MCP
The GLtron Homepage – Juego Tron para linux
Ver Tron en línea

photo credit: NatBat

Codificar en javascript siempre ha sido disgustante y fascinante la vez. Disgustante cuando te das cuenta que estas gastando demasiado tiempo haciendo debugging. Y fascinante cuando finalmente logras tu objetivo.

Cuando le sumas el problema de incompatibilidad entre navegadores y sus versiones llegar a ser muy desazonante.

Ya no más. Hace un par de trabajos en que vengo usando jQuery para:

1.- Cargar asincrónicamente (AJAX) un elemento SELECT con la lista de ciudades apropiadas a medida que se intercambia entre estados de USA.
2.- Realizar suaves desplazamientos entre secciones de una misma página a medida que el usuario los va completando.
3.- Permitir al usuario ordenar una lista de palabras simplemente arrastrando y soltando las filas de la tabla que los contiene (plugin jquery.tablednd)

Para esto no he tenido más que modificar algunos scripts encontrados por ahí o hacer rápidas consultas a la excelente documentación http://docs.jquery.com/ disponible con abundantes ejemplos y demos con sus códigos fuentes a la vista.

Esto no quiere decir que sea una herramienta para principiantes. jQuery hace uso de muchos conceptos y tecnologías. Principalmente:

1.- Programación orientada a objetos –OOP.
2.- Modelo del objeto documento –DOM.
3.- Hojas de estilo en cascada -CSS.

Un conocimiento más que básico en CSS (en especial el uso de selectores) es mandatorio para poder aplicar los métodos de jQuery a los nodos apropiados dentro del árbol jerárquico de un documento HTML.

Si eres principiante no quisiera quitarte las ganas de aprender a usar jQuery, sino todo lo contrario. Si has editado algún archivo con extensión .js y algún otro con extensión .css es suficiente para comprender código jQuery.

Existen también otras bibliotecas dedicadas a lo mismo. Fíjate en el éxito que ha tenido jQuery:

prototype javascript jquery javascript yui javascript mootools javascript scriptaculous javascript

Fuente: http://google.com/trends –compara cantidad de búsquedas en google

Muy bien, como vemos esta biblioteca –o framework– es bastante poderosa y con tanto futuro que vale la pena aprender a usarla completamente. Voy a continuar escribiendo posts basados en la mejor documentación que encuentre y en mi propia experiencia.

Tutoriales recomendados para javascript y CSS:

Antes de iniciarte en jQuery, asegurate de saber muy bien lo que se ve en las siguientes (y concisas) páginas:

Programación orientada a objetos (OOP) con Javascript –contiene gatos
Principios básicos de CSS
Selectores básicos
Selectores avanzados

(Este posts está basado en una presentacion powerpoint hecha por Marc Grabanski)

jQuery es una biblioteca javascript diseñada para ocultar los penosos asuntos de incompatibilidades entre navegadores web al tiempo que entrega una solida y reutilizable API (Application Programming Interface).

Nota: Para usar jQuery es necesario saber lo básico de CSS (Cascade Style Sheets)

Evolución de las principales bibliotecas javascript

prototype javascript jquery javascript yui javascript mootools javascript scriptaculous javascript

Fuente: http://google.com/trends –compara cantidad de búsquedas en google

Filosofía tras jQuery

Simplificar la interacción entre HTML y javascript, es decir:

1.- Encontrar algo en HTML
2.- Hacer algo con él

Por ejemplo:

1.- Encontrar todos los elementos div
2.- Agregarles la clase foo

Método Factory de jQuery

Esencialmente lo que hace jQuery es proveer un objecto llamado jQuery() mediante el cual podemos acceder a todas las funciones que provee la biblioteca. Estas funciones son los métodos del objeto jQuery.

Nota: $() es un alias de jQuery().

Encontramos elementos HTML pasando los selectores CSS apropiados a $()

También podemos encadenar selectores:

Aquí estamos llegando a todas las tablas que se encuentran dentro de todos los elementos con clase “myClass”. A su vez estos elementos con clases “myClass” deben estar dentro de un elemento con id “myId”.

Nota: Los identificadores id deben ser únicos en cada documento.

Ejemplos de selectores

La gran variedad de selectores con sus modificadores permiten llegar hasta el último rincón de un documento HTML.

Ejemplos en vivo de selectores en jQuery

Visita http://codylindley.com/jqueryselectors/

Más sobre el método Factory de jQuery

También podemos pasar a $() una función para ser ejecutada una vez que la página se haya cargado:

Nota: Esto es esencialmente lo mismo que:

Esta útima forma es la más vista en Internet. Quizás porque explícitamente indica que se ejecutará cuando el DOM (Document Object Model) se haya cargado completamente –documento listo: $(document).ready(…)

Como una primera aproximación a jQuery veremos una presentación muy clara y concisa hecha por Marc Grabanski.

Fuente: http://marcgrabanski.com/article/jquery-essentials-presentation-minnewebcon

Para obtener subdominios en localhost (en servidor apache) como http://misubdominio.localhost o para instalar Wordpress MU (WP multiusuario) http://localhost.localdomain

En httpd.conf (en /etc/apache/httpd.conf o similar) agrega algo como:

En /etc/hosts especifica:

Reinicia apache

Esto es muy útil si desarrollas extensiones para Firefox.

Perfiles

Para abrir el manejador de perfiles usa uno de los siguientes comandos

Para iniciar con algún perfíl determinado –en este caso: dev

Múltiples instancias

Generalmenet cuando tienes abiertas varias ventanas, estas pertenecen a la misma instancia del navegador. Por eso si una se cuelga y decides matarla, todas las demás son cerradas también.
Si desarrollas o pruebas extensiones debes reiniciar el navegador a cada rato. Lo mejor es crear una instancia separada para estos trabajos con la opción -no-remote que no afecte a otras ventanas que tengas abiertas.

Conclusión

La mejor manera de iniciar una instancia para trabajar es usando un perfíl (-P nombre-perfil) dedicado que use sólo un mínimo de extensiones. Las esenciales como por ejemplo firebug, dafzilla, etc… y que sea autónoma (-no-remote)

No está de más conocer la opción -safe-mode que deshabilita todas las extensiones y temas en una instancia.

Hay una extensión muy útil para reiniciar rápidamente una instancia de Firefox:
QuickRestart

Agregado:

A veces puede pasar que abres el manejador de perfiles (firefox -P) y no salen todos los que habías creado! Bueno, a mi me ha pasado varias veces y era simplemente porque estaba lanzando firefox como root :\ Los perfiles se guardan en tu directorio personal de mozilla, en mi caso /home/nomikos/.mozilla/firefox –el punto frente a .mozilla significa que es un directorio oculto.