enero | 2009 | Tus ceros y mis unos

Archive for enero, 2009

Entender jQuery. Principios básicos

Una de las maneras, quizás la más utilizada, de emplear jQuery es siguiendo los ejemplos del plugin que queramos utilizar, como hice en este mismo blog en «Utilización de jQuery cycle plugin«.

Pero si queremos entender cómo funciona jQuery o intentar hacer nuestro propio plugin necesitamos ir más allá. Eso es lo que intenta esta entrada.

logo_jquery_215x53

jQuery es un framework javascript especializado principalmente en la localización y modificación de elementos en el árbol DOM (Document Object Model). También es importante su gestión de eventos y la facilidad para el desarrollo de plugins.

Un uso frecuente de jQuery sería:

Reaccionar a un evento llamando a una función.
En dicha función localizar un objeto del árbol DOM.
Modificar dicho objeto.

Podemos reaccionar a un evento del tipo de pulsado de un enlace, paso del ratón sobre algo o envío de un formulario entre otros. Podemos consultar el API de eventos de jQuery para velos todos.

Un evento un tanto especial es el que indica que el árbol DOM está listo para recorrerse. Este evento es el que se suele utilizar para dar entrada a todo el código jQuery, por lo que solemos ver que siempre ponemos nuestro código jQuery dentro de $(document).ready():

$(document).ready(function(){
  //Nuestro codigo aqui
});

Para buscar dentro del árbol DOM, jQuery utiliza una nomenclatura de selectores muy similar a CSS, por lo que si conocemos CSS nos resultará bastante familiar. Ejemplos de selectores serían:

$("#id") que devuelve el elemento de identificador «id».
$("p") que devolverá todos los párrafos
$("p.class") que devuelve los párrafos con la clase «class»

Podemos ver todos los selectores en la documentación de jQuery sobre selectores.

Vemos que estamos utilizando en varias ocasiones la función $(), que es la llamada función jQuery. Podemos señalar que la función jQuery siempre nos devuelve un objeto jQuery, que contiene un array con todos los resultados. Realmente tambiéń la mayoría de eventos y otras funciones de jQuery devuelven el objeto jQuery (lo que se conoce por Interface Fluida), por lo que es muy común enlazar unas llamadas con otras tal y como veremos en el ejemplo que acompaña a esta entrada.

Por último vamos a conocer las funciones de manipulación del árbol DOM. Con estas funciones podemos por ejemplo: añadir una clase a una etiqueta HTML o agregar contenido dentro de un elemento. Podemos ver todos ellos en el API de atributos y en el API de manipulación.

Finalmente y para aclarar los conceptos vamos a ver un pequeño ejemplo. Nos vamos a basar en la siguiente página HTML:

<html>
<head>
    <style type="text/css">
        p.red { background: red; }
	p.yellow { background: yellow; }
    </style>
    <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
    <script type="text/javascript">
	//Aqui nuestro codigo jQuery
   </script>
</head>
<p class="color">Este es un párrafo</p>
<p>Este es otro párrafo</p>
<p class="color">Y este el último párrafo</p>
<ul>
<li><a id="redLink" href="#">red</a></li>
<li><a id="yellowLink" href="#">yellow</a></li>
<li><a id="resetLink" href="#">reset</a></li>
</ul>
<body>
</body>
</html>

Como vemos son tres párrafos de los cuales dos pertenecen a la clase «color». Además tenemos tres enlaces cada uno con un id distinto. Aparte en la cabecera se definen dos estilos CSS para los párrafos (para darle un color de fondo) y se importa la librería jQuery.

Ahora añadimos el código jQuery en la etiqueta script de la cabecera:

$(document).ready(function(){
	$("#redLink").click(function(event){
		$("p.color").removeClass("yellow").addClass("red");
	});
	$("#yellowLink").click(function(event){
		$("p.color").removeClass("red").addClass("yellow");
	});
	$("#resetLink").click(function(event){
		$("p.color").removeClass("red").removeClass("yellow");
	});
});

Destacamos lo siguiente:

Como hemos dicho, todo nuestro código se engloba en una función que se suministra al evento $(document).ready.
Utilizamos el selector para buscar por id para localizar cada uno de los enlaces y pasarle un código a su evento click.
Dentro del código del evento click utilizamos el selector «p.color» para localizar los párrafos pertenecientes a la clase «color».
Utilizando la concatenación de funciones (Interface Fluida) modificamos el árbol DOM añadiendo o quitando clases.

Podemos ver este ejemplo funcionando en: ejemplo de jQuery funcionando.

29 enero 2009 at 7:36 pm 2 comentarios

Repositorios Maven: Nexus

Como dijimos en nuestra pequeña introducción a Maven, el lugar donde se va a almacenar nuestro software son los llamados repositorios.

509610_84209301_250

La distribución de Maven por defecto se descarga los artefactos del repositorio principal de Maven. Si bien esto a nivel personal es factible, cuando varios desarrolladores se tienen que descargar los mismos jars pesados una y otra vez es un despilfarro de ancho de banda considerable.

Por ello se suele instalar un repositorio propio. Podemos usar un servidor web sirviendo los directorios del repositorio pero no nos proporciona características muy deseables como son: ejercer de intermediario con otros repositorios, facilidades de navegación, facilidades de búsqueda o formularios para subir artefactos entre otras. Por ello existen otras soluciones que nos facilitan la vida, todas ellas libres y que son comparadas en esta matriz de comparación de gestores de repositorios Maven ( en inglés).

Yo en su día probé Artifactory del que además tenemos esta guía de utilización de Artifactory. Sobre Archiva también he encontrado esta muy completa guía de utilización de Archiva (en tres partes II y III). Por eso (entre otras cosas) me he decidido a probar Nexus.

Nexus viene preparado para levantar un servidor y su instalación de esa manera está bien documentada en Maven: The definitive guide que es como nos recomiendan empezar en la web de Nexus. Pero yo quería aprovechar el Tomcat que tengo corriendo en mi servidor Xubuntu por lo que decidí instalar el war que se nos ofrece en la sección de descargas de Nexus. Los pasos que seguí son sencillos:

Descargué el war (nexus-1.1.1.war en ese momento) y lo renombré a nexus.war (para que la aplicación la despliegue como nexus y no nexus-1.1.1).
Desplegué el war a través de la aplicación manager de Tomcat.
Modifiqué el archivo plexus.properties dentro del directorio de la aplicación desplegada (en mi caso /usr/share/tomcat5.5/webapps/nexus/WEB-INF) para añadirle una ruta válida. Yo puse: nexus-work=/home/nexus/sonatype-works/nexus
Por último y aunque según la documentación no era necesario, añadí al script de arranque de Tomcat (/etc/init.d/tomcat5.5) la variable de entorno para indicarle el directorio de nexus. Al final de la línea que empieza por JAVA_OPTS se añade -DNEXUS_HOME=/home/nexus

Con esto y tras reiniciar el Tomcat, ya podemos apuntar nuestro navegador a la aplicación recién instalada (en mi caso http://server:port/nexus/). Podemos ver la página de Nexus que nos recibe:

Sólo con esto ya podemos ver que Nexus nos va a proporcionar búsqueda de artefactos, así como algunas posibilidades de suscripción mediante RSS (por ejemplo a nuevos artefactos subidos). Para poder configurar Nexus, debemos identificarnos como administrador («admin» con «admin123» por defecto). Lo primero que debemos configurar es:

Por seguridad modificar la contraseña del administrador (menú «Change Password»).
Configurar el servidor de correo (para correos de recuperación de contraseña). En el menú «Server» bajo «Administration».
Habilitar el indexado de repositorios remotos. En el menú «Repositories» bajo «Administration», pinchando sobre los repositorios de tipo proxy. Pondremos a true el campo «Download Remote Indexes» (Nexus se baja los índices de esos repositorios y puede tardar un rato). De esta manera podemos buscar artefactos que se encuentren en los repositorios remotos y descargarlos a nuestro repositorio

Finalmente tendríamos que configurar nuestro Maven local para que acceda a nuestro nuevo repositorio. Para ello introduciremos en el archivo de configuración de Maven (settings.xml en el directorio .m2 dentro de nuestro directorio personal) las líneas necesarias para reflejar nuestro repositorio:

    <mirror>
      <id>Nexus</id>
      <mirrorOf>central</mirrorOf>
      <name>Nexus Public Mirror.</name>
      <url>http://server:port/nexus/content/groups/public</url>
    </mirror>

Esto es todo por esta primera entrada sobre Nexus. En próximas entradas hablaré de algunas características de Nexus como son los grupos (fijaros ese groups en la ruta al repositorio en el código anterior) o la seguridad.

20 enero 2009 at 8:13 pm 1 comentario

5 plugins de Firefox indispensables

En esta entrada voy a hacer un pequeño listado de plugins (o complementos) de Firefox que me resultan indispensables. Si bien utilizo otros plugins más especializados, en esta lista voy a intentar reflejar algunos que le pueden ser de utilidad a casi cualquier persona.

firefox-wordmark-horizontal_small

Vamos con la lista, en la que el orden de aparición no tiene ningún significado.

Foxmarks Bookmark Synchronizer: Con este plugin sincronizo mis favoritos entre los distintos ordenadores que manejo. Los marcadores se guardan en los servidores de foxmarks por lo que son accesibles desde cualquier sitio (es posible utilizar un servidor propio). En las últimas versiones dispone de perfiles de manera que podemos personalizar más entre los favoritos que disponemos en cada sitio (por ejemplo los que són a máquinas de la red del trabajo o enlaces sólo visibles cuando esté en casa). Por último permite también sincronizar contraseñas, aunque esta funcionalidad no la he utilizado.
FaviconizeTab: Este plugin me ayuda a ahorrar espacio en mi barra de pestañas. Básicamente permite reducir las pestañas de forma que sólo se vea el icono (favicon).

firefox_plugins_faviconize

Screen grab!: Con este plugin realizo todas las capturas de páginas web que aparecen en el blog. Permite capturar la parte visible, lapágina completa o una selección. Además funciona a la perfección en Windows y Linux.
Plain Text to Link: Permite abrir enlaces que aparecen como texto plano, es decir, esos enlaces que aparecen en algunas páginas pero que no son realmente un enlace, sólo la dirección (URL) de la página. Ofrece otras posibilidades, pero la que yo uso es la que he nombrado.
Flashblock: En Linux el plugin de flash no me va como en Windows y me daba la sensación de que ralentizaba la navegación (también podría ser que el equipo que tengo en casa no da para mucho). Por eso busqué este plugin que sustituye los flash que aparecen en las páginas por recuadros con un icono que al pasar el ratón se transforma en un símbolo de reproducir. Cuando quiero ejecutar un contenido flash determinado (por ejemplo vídeos en YouTube) se pulsa en el símbolo y se ejecuta normalmente. Sorprende la de publicidad que evitamos.

firefox_plugins_flashblock