Es particularmente desesperante el intentar inspeccionar un elemento de una página web utilizando Firebug (menú contextual “Inspeccionar elemento con Firebug”) y acabar seleccionando por error la herramienta nativa del navegador (menú contextual “Inspeccionar elemento”). Si a ti también te ha ocurrido, porque es posible que, simplemente, yo sea demasiado caprichoso y peculiar, puedes configurar el que este menú no se vuelva a mostrar escribiendo en la barra de direcciones about:config, buscando la preferencia devtools.inspector.enabled y cambiando su valor a false.

¿Cuántas eres capaz de adivinar?

1. facebook.com (9%)
2. google.com (3,3%)
3. youtube.com (3,3%)
4. gmail.com (1,1%)
5. twitter.com (1,1%)
6. mail.google.com (0,6%)
7. yahoo.com (0,6%)
8. hotmail.com (0,6%)
9. amazon.com (0,5%)
10. reddit.com (0,5%)

Lo demostró Google el año pasado con su implementación de Quake II usando WebGL, por ejemplo, y lo vuelve a hacer hoy Mozilla compilando el código original de Doom a JavaScript para que podamos jugar en nuestro navegador.

Merece la pena echar una partida y rememorar viejos tiempos mientras sopesamos qué sorpresas nos deparará el futuro de la web.

Zend Framework

• Probablemente, el framework más conocido, y el más utilizado profesionalmente.
• Es muy desacoplado, por lo que mucha gente lo considera una librería de componentes más que un framework. Por otra parte, gracias a esto, podemos utilizarlo en conjunto con otros frameworks.
• Tiene detrás a Zend, una de las empresas más importantes de la comunidad PHP, y gran contribuidora a su código desde sus primeras versiones.
• Siempre ha habido quejas sobre su curva de aprendizaje y el tiempo necesario para comenzar un nuevo proyecto, aunque eso mejoró un poco con los componentes RAD (Rapid Application Development).
• Recomendado para proyectos grandes.

Symfony

• El framework que suele utilizar Yahoo, por ejemplo. Bastante popular hoy en día.
• Más complejo y elegante que CakePHP y CodeIgniter, pero menos que Zend.
• Muy completo.
• El “azúcar sintáctico” y la generación de código ayuda a recortar el tiempo de desarrollo.
• Recomendado para cualquier tipo de proyecto, en ocasiones combinado con algún componente de Zend.

CakePHP

• Toma muchas de sus ideas de Ruby on Rails, por lo que gustará especialmente a los fans de la autoconfiguración y de lo “mágico”. Debido a esto, no es lo más adecuado para aquellos que quieran tener un mayor control.
• En su tiempo tenía fama de tener muy mala documentación. Hoy en día eso ha cambiado.
• Recomendado para proyectos no demasiado complejos, en ocasiones combinado con algún componente de Zend.

CodeIgniter

• Probablemente, el menos popular de los cuatro.
• Muy flexible y sencillo. A menudo demasiado, obligando al programador a desarrollar muchas funcionalidades que deberían incluirse por defecto.
• Muy fácil de aprender, principalmente porque no hay mucho que aprender, al ser simple hasta el extremo.
• También es el que menos recursos utiliza, al ser el más ligero.
• Está escrito para mantener la compatibilidad con PHP 4, por lo que no aprovecha muchas de las características introducidas en PHP 5. Debido a esta y a otras razones muchos de sus desarrolladores se desvincularon del proyecto para crear un fork llamado Kohana.
• Sólo recomendable como framework de iniciación, si el resto intimidan demasiado; o para aquellos a los que realmente no les gusten los frameworks.

Ocurre, no obstante, que la mayoría de personas son / somos auténticos negados para todo lo que tenga que ver con el diseño. Pero no todo está perdido, porque en Internet hay decenas de almas caritativas que ofrecen su trabajo de manera gratuita. Veamos 10 de los mejores packs de iconos que pueden ayudarte a dar un mejor aspecto a tu aplicación. Y gratis.

Coquette

Descarga: Coquette I, II, III, IV, V, VI, VII, VIII
Número de iconos: 400 PNGs de 16×16, 24×24, 32×32, 48×48, 64×64, 128×128.
Licencia: Gratuito con enlace a la web del autor.

Colorful Stickers

Descarga: Colorful Stickers, II, III, IV, V, VI
Número de iconos: 120 PNGs de 16×16, 24×24, 32×32, 48×48, 64×64, 128×128, 256×256.
Licencia: Gratuito con enlace a la web del autor.

Basic set

Descarga: Basic set, II
Número de iconos: 84 PNGs de 16×16, 32×32, 48×48, 64×64.
Licencia: Gratuito con enlace a la web del autor

Farm-Fresh

Descarga: Farm-Fresh
Número de iconos: 1400 PNGs de 16×16, 32×32.
Licencia: Creative Commons Attribution 3.0

Silk

Descarga: Silk. Existe un pack de estilo similar llamado Silk companion
Número de iconos: 700 PNGs de 16×16.
Licencia: Creative Commons Attribution 2.5

Tango

Descarga: Tango. Muy populares, por lo que es sencillo encontrar iconos de estilo similar
Número de iconos: 215 PNGs de 16×16, 22×22 y 32×32. 215 SVGs.
Licencia: Dominio público.

WooFunction

Descarga: WooFunction
Número de iconos: 159 PNG de 32×32, 19 PNG de 16×16.
Licencia: GPL.

Fugue

Descarga: Fugue
Número de iconos: 2941 PNGs de 16×16, 210 PNG de 24×24, 46 PNG de 32×32.
Licencia: Creative Commons Attribution 3.0

NIXUS

Descarga: NIXUS
Número de iconos: 60 PNG de 32×32, 48×48, 64×64.
Licencia: No requiere atribución.

ISLOO

Descarga: ISLOO
Número de iconos: 50
Licencia: No requiere atribución.

Este es el convincente argumento que lanzan desde la propia Microsoft para animar a sus usuarios a dar el salto de Internet Explorer 6 a Internet Explorer 8. Una buena noticia, aunque es una lástima que no se animen a utilizar medidas más drásticas, como cabezas de caballo en las camas.

Con algo más de 4 años de vida, jQuery se ha convertido en la librería JavaScript más utilizada actualmente, y es que, además, es gratuita, de código abierto (bajo licencia MIT y GPL v2) e increíblemente ligera. Entre sus usuarios podemos encontrar a Google, Microsoft, IBM, Amazon, Twitter, WordPress, Mozilla o Drupal.

Para poder utilizar esta librería lo primero que tendremos que hacer será incluir su código en nuestro proyecto. Podemos descargar el script desde su página web, subirlo a nuestro servidor, y ejecutarlo con la etiqueta script:

<script type="text/javascript" src="jquery.js"></script>

También podemos cargarla directamente desde el CDN que mantiene Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

el de Microsoft:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>

o el del propio jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Independientemente de la opción elegida, ya estaremos listos para comenzar a trabajar con la librería. Sin embargo, y aunque no es estrictamente necesario, os aconsejaría tener unos conocimientos básicos de JavaScript primero, conocimientos que podéis obtener con nuestro tutorial de JavaScript. Y ahora, manos a la obra.

El corazón de jQuery es la función sobrecargada del mismo nombre, jQuery, que ofrece distinta funcionalidad dependiendo de los parámetros utilizados. Además, como JavaScript también toma conceptos del paradigma funcional, y las funciones no son más que otro tipo de objeto, la función jQuery cuenta a su vez con distintas propiedades y métodos. La intención de esta decisión de diseño es la de evitar llenar el espacio de nombres global con montones de nombres inútiles esperando a colisionar.

Si queremos escribir menos y que nuestros archivos sean más pequeños, y si no utilizamos ninguna otra librería que pueda causar algún conflicto con este símbolo, también podemos utilizar el alias $ en sustitución de jQuery.

Selectores jQuery

El primer paso a la hora de trabajar con jQuery es seleccionar los elementos del árbol de documento sobre los que queremos trabajar. Para ello se utiliza la función jQuery, pasando como argumento a la función una cadena con un selector, la mayoría de los cuales utilizan una sintaxis similar a la de CSS 3 (ver Tutorial rápido de CSS). El engine que utiliza jQuery para seleccionar elementos se llama Sizzle, y puede descargarse y utilizarse de forma aislada.

Los distintos selectores que podemos utilizar son los siguientes:

Selectores básicos

Selector universal: selecciona todos los elementos de la página (CSS 2)

jquery("*")

Selector de tipo o etiqueta: selecciona todos los elementos con el tipo de etiqueta indicado (CSS 1)

jQuery("div")

Selector de clase: selecciona todos los elementos con la clase indicada (atributo class) (CSS 1)

jQuery("div.entrada")

Selector de identificador: selecciona el elemento con el identificador (atributo id) indicado (CSS 1)

jQuery("div#cabecera")

Grupos de selectores: se puede combinar el resultado de varios selectores distintos separándolos con comas (CSS 1)

jquery("p,div,a")

Selectores de atributos

Selector de atributo: selecciona elementos que tengan un cierto atributo (CSS 2)

jquery("a[rel]")

También se puede seleccionar aquellos que tengan un cierto valor para un atributo (CSS 2)

jquery("a[rel='nofollow']")

O que tengan un valor distinto del indicado (jQuery)

jQuery("a[rel!='nofollow']")

Aquellos cuyo valor empieza por una cierta cadena (CSS 3)

jquery("a[href^='http://mundogeek.net/']")

Los que terminan con una cierta cadena (CSS 3)

jquery("a[href$='.com']")

Y los que contienen una cierta cadena (CSS 3)

jquery("a[href*='geek']")

Por último, podemos hacer combinaciones de todo lo anterior (CSS 2)

jquery("a[rel='nofollow'][href]")

Selectores de widgets

Pseudo clase botón: selecciona todos los botones (jQuery)

jquery(":button")

Pseudo clase checkbox: selecciona todos los checkboxes (jQuery)

jquery(":checkbox")

Pseudo clase archivo: selecciona todos los widgets de tipo archivo (jQuery)

jquery(":file")

Pseudo clase cabeceras: selecciona todas las cabeceras (jQuery)

jquery(":header")

Pseudo clase imagen: selecciona todas las imágenes (jQuery)

jquery(":image")

Pseudo clase input: selecciona todos los widgets de tipo input (jQuery)

jquery(":input")

Pseudo clase contraseña: selecciona todos los elementos password (jQuery)

jquery(":password")

Pseudo clase radiobutton: selecciona todos los elementos radiobutton (jQuery)

jquery(":radio")

Pseudo clase reset: selecciona todos los elementos reset (jQuery)

jquery(":reset")

Pseudo clase seleccionado: selecciona las opciones seleccionadas en un select (jQuery)

jquery(":select")

Pseudo clase submit: selecciona todos los elementos submit (jQuery)

jquery(":submit")

Pseudo clase texto: selecciona todos las cajas de texto (jQuery)

jquery(":text")

Pseudo clase marcado: selecciona todos los radiobuttons y checkboxes marcados (CSS 3)

jquery(":checked")

Pseudo clase activo: selecciona todos los elementos que estén activos (CSS 3)

jquery("input:enabled")

Pseudo clase inactivo: selecciona todos los elementos que no estén activos (CSS 3)

jquery("input:disabled")

Pseudo clase ocultos: selecciona todos los elementos ocultos (jQuery)

jquery(":hidden")

Pseudo clase visible: selecciona todos los elementos visibles (jQuery)

jquery(":visible")

Selectores de jerarquía

Selector de descendientes: selecciona elementos que desciendan de otro elemento (CSS 1)

jquery("div.entrada h2")

Selector de hijos: selecciona elementos que sean hijos directos de otro elemento (CSS 2)

jquery("div.entrada > h2")

Pseudo clase hijo: selecciona el enésimo hijo de un elemento (CSS 3)

jquery("tr:nth-child(1)")

Pseudo clase primer hijo: selecciona el primero hijo de un elemento (CSS 2)

jquery("tr:first-child")

Pseudo clase último hijo: selecciona el último hijo de un elemento (CSS 3)

jquery("tr:last-child")

Pseudo clase hijo único: selecciona los elementos que sean hijos únicos de otros elementos (CSS 3)

jquery("div:only-child")

Pseudo clase índice: selecciona el elemento con el índice indicado de un grupo de elementos (jQuery)

jquery("td:eq(0)")

Pseudo clase primero: selecciona el primer elemento de un grupo de elementos. Equivale a eq(0) (jQuery)

jquery("td:first)")

Pseudo clase último: selecciona el último elemento de un grupo de elementos (jQuery)

jquery("td:last)")

Pseudo clase mayor que: selecciona todos los elementos con un índice mayor que el indicado en un grupo de elementos (jQuery)

jquery("td:gt(0)")

Pseudo clase menor que: selecciona todos los elementos con un índice menor que el indicado en un grupo de elementos (jQuery)

jquery("td:lt(3)")

Pseudo clase par: selecciona los elementos pares de un grupo de elementos (jQuery)

jquery("td:even")

Pseudo clase impar: selecciona los elementos impares de un grupo de elementos (jQuery)

jquery("td:odd")

Selector de hermanos: selecciona todos los hermanos que se encuentren precedidos de otro elemento (CSS 3)

jquery("div.entrada ~ p")

Selector de próximo adyacente: similar al anterior, pero sólo selecciona el adyacente directo (CSS 2)

jquery("div.entrada + p")

Pseudo clase padre: selecciona los padres de otros elementos (jQuery)

jquery("h2:parent")

Pseudo clase vacío: selecciona los elementos que no tengan ningún hijo, incluyendo texto plano (CSS 3)

jquery(":empty")

Otros selectores

Pseudo clase animado: selecciona todos los elementos que están en proceso de animación en este momento (jQuery)

jquery(":animated")

Pseudo clase contiene: selecciona todos los elementos que contengan el texto indicado, directamente o en uno de los hijos (jQuery)

jquery("div:contains('Mundo geek')")

Pseudo clase tiene: selecciona todos los elementos que contengan al menos un elemento que responda al selector indicado (jQuery)

jquery("div:has(h2)")

Pseudo clase negación: selecciona todos los elementos que no cumplan con el selector dado (CSS 3)

jquery("div:not(.entrada)")

Gestionando una colección jQuery

Al llamar a la función jQuery con un selector como argumento, el valor devuelto será otro objeto jQuery representando la colección de elementos DOM seleccionados. Tanto es así, que podremos obtener uno de los elementos utilizando el operador [], como si de un array normal se tratara

jQuery("div.entrada")[0]

y también tenemos acceso a una propiedad length con el número de elementos que contiene la colección

jQuery("div.entrada").length

Otras cosas que podemos hacer con este objeto son añadir elementos a la colección

jQuery("div.entrada").add("div.comentario")

eliminar elementos

jQuery("div.entrada").not("div.destacada")

filtrar elementos con un selector o basándonos en el valor devuelto por una función

jQuery("div.entrada").filter(":has(h2)")

quedarnos con los elementos que contengan otro cierto elemento

jQuery("div.entrada").has("h2")

obtener un sólo elemento, por su índice

jQuery("div.entrada").eq(3)

obtener el primer elemento de la colección

jQuery("div.entrada").first()

obtener el último elemento de la colección

jQuery("div.entrada").last()

crear una sub colección a partir de la original

jQuery("div.entrada").slice(0,5);
jQuery("div.entrada").slice(3);

obtener los descendientes directos

jQuery("div.entrada").children()
jQuery("div.entrada").children("p")

obtener los descendientes directos, incluyendo el texto plano

jQuery("div.entrada").contents()

obtener los hijos que cumplan con un determinado selector

jQuery("div.entrada").find("p")

obtener el hermano siguiente

jQuery("div.entrada").next()

obtener los hermanos siguientes

jQuery("div.entrada").nextAll()

obtener el hermano anterior

jQuery("div.entrada").prev()

obtener los hermanos anteriores

jQuery("div.entrada").prevAll()

obtener todos los hermanos

jQuery("div.entrada").siblings()

obtener el padre de cada elemento

jQuery("div.entrada").parent()

obtener todos los ancestros de cada elemento

jQuery("div.entrada").parents()

crear una copia de la colección

jQuery("div.entrada").clone()

o buscar la posición que ocupa un elemento en la colección (si existe)

jQuery("*").index("div.entrada")

Modificar la página con jQuery

Veamos ahora cómo utilizar jQuery para modificar nuestra página web. Podemos, por ejemplo, modificar el valor de un atributo

jQuery("a#principal").attr("href", "http://mundogeek.net/")

añadir una nueva clase a uno o varios elementos

jQuery("div.entrada:first").addClass("primera")

añadir una propiedad CSS a uno o varios elementos

jQuery("div.entrada").css("border", "1px solid red")

añadir contenido a un elemento

jQuery("div.entrada:first").before("<strong>Destacada</strong>")
jQuery("div.entrada:first").prepend("<strong>Destacada</strong>")
jQuery("div.entrada:first").after("<strong>Destacada</strong>")
jQuery("div.entrada:first").append("<strong>Destacada</strong>")

modificar el contenido de un elemento

jQuery("p").html("<strong>Sustituido</strong>")

eliminar un elemento de la página

jQuery("div.entrada:first").remove()

ocultar un elemento

jQuery("p").hide()

o volver a mostrar un elemento

jQuery("p").show()

Eventos en jQuery

Existen distintas funciones para asignar una función que maneje un evento lanzado por un widget. Para el evento click, al hacer clic sobre un elemento:

jQuery(":button#pulsame").click(function () {
  alert("Has hecho clic");
});

evento submit, cuando se pulsa sobre el botón de enviar de un formulario:

jQuery("#formulario").submit(function() {
  alert("Enviando");
});

evento dblclick, al hacer doble clic sobre un elemento:

jQuery("p:first").dblclick(function () {
  alert("Has hecho doble clic");
});

evento hover, cuando al pasar el ratón por encima de un elemento. Podemos utilizar jQuery(this) para referirnos a este elemento:

jQuery("p:first").hover(function () {
  jQuery(this).css("border", "1px solid red");
});

evento mouseenter, cuando el cursor entra en un elemento

jQuery("p:first").mouseenter(function () {
  jQuery(this).css("border", "1px solid red");
});

evento mouseout, cuando el cursor sale de un elemento

jQuery("p:first").mouseenter(function () {
  jQuery(this).css("border", "1px solid red");
});

jQuery("p:first").mouseout(function () {
  jQuery(this).css("border", "0");
});

evento change, cuando se modifica un elemento:

jQuery(":text#nombre").change(function () {
  alert("Cambiado");
});

evento load, cuando se termina de cargar el elemento:

jQuery(window).load(function () {
  alert("Página cargada");
});

evento ready, cuando se termina de cargar el DOM, para no tener que esperar a cargar las imágenes, por ejemplo, de forma que el usuario pueda utilizar nuestra funcionalidad JavaScript cuanto antes:

jQuery(document).ready(function () {
  alert("DOM cargado");
});

esto último, al ser esto algo muy común, se puede resumir pasando una función a la función jQuery, directamente:

jQuery(function () {
  alert("DOM cargado");
});

Animaciones con jQuery

jQuery viene con unas pocas animaciones útiles y vistosas por defecto, aunque para sacarle todo el partido probablemente tendremos que recurrir a plugins.

Para hacer un fundido a opaco:

jQuery(function () {
  jQuery("p").hide();
  jQuery("p").delay(200).fadeIn();
});

En el ejemplo anterior se utiliza delay para hacer pasar un par de segundos y que se vea más claramente el efecto. A esta función se le puede pasar un valor numérico con el número de milisegundos a esperar, o una cadena, como "slow" (lento) o "fast" (rápido).

para hacer un fundido a transparente:

jQuery(":button").click(function () {
  jQuery("p").fadeOut();
});

También podemos cambiar la opacidad de un elemento a cualquier valor intermedio

jQuery(":button").click(function () {
  jQuery("p").fadeTo("slow", 0.5);
});

mostrar los elementos con una animación de deslizamiento de arriba a abajo:

jQuery(function () {
  jQuery("p").hide().delay(200).slideDown();
});

ocultarlos deslizándolos hacia arriba:

jQuery(function () {
  jQuery("p").delay(200).slideUp();
});

mostrarlos u ocultarlos, dependiendo de si se estaban mostrando o no:

jQuery(":button").click(function () {
  jQuery("p").delay(200).slideToggle();
});

Por último, para cualquier otro tipo de animación con propiedades CSS cuyos valores sean numéricos, utilizaríamos:

jQuery(":button").click(function () {
  jQuery("p").animate({opacity:0.50,width:100}, 'slow');
});

jQuery y AJAX

La forma más sencilla de enviar una petición HTTP de forma asíncrona y mostrar el resultado en la página actual es utilizar la función load. Esta se ejecuta sobre el elemento al que se va a añadir la respuesta, y se le pasa como argumento una cadena con el archivo a cargar. Esta cadena puede contener también un selector con el que seleccionar qué elementos queremos mostrar de la respuesta.

jQuery(":button").click(function () {
  $("#citas").load("citas.html li");
});

también se pueden enviar parámetros al documento (se utiliza GET a menos que los datos se manden en forma de objeto):

jQuery(":button#login").click(function () {
  $("#mensaje").load("login.php", {nombre: "zootropo", pass: "contraseña"});
});

e indicar una función a ejecutar cuando se termine de llevar a cabo la petición

jQuery(":button#login").click(function () {
  jQuery("#mensaje").load("login.php", {nombre: "zootropo", pass: "contraseña"}, function(responseText, textStatus, XMLHttpRequest) {
    alert("cargado");
    });
});

También se pueden utilizar los métodos get y post del objeto jQuery, en cuyo caso se nos devolverá unos ciertos datos con los que nosotros mismos tendremos que trabajar para generar la respuesta y mostrarla en nuestro documento actual:

jQuery.get("login.php", {nombre: "zootropo", pass:"contraseña"},
  function(data, textStatus, XMLHttpRequest){
    jQuery("#mensaje").html("Han devuelto: " + data);
  });

jQuery.post("login.php", {nombre: "zootropo", pass:"contraseña"},
  function(data, textStatus, XMLHttpRequest){
    jQuery("#mensaje").html("Han devuelto: " + data);
  });

Si la respuesta del servidor va a estar en formato JSON (JavaScript Object Notation), muy utilizado actualmente, podemos utilizar el método jQuery.getJSON(), al que se le pasa la URL de la petición y, opcionalmente, cualquier parámetro que se necesite, además de una función de callback que ejecutar cuando se termine con la petición. Este método se encargará de parsear la estructura del objeto JSON devuelta utilizando jQuery.parseJSON(), objeto que estará disponible como primer parámetro de la función de callback.

$.getJSON('tareas.php', function(data, textStatus){
          $.each(data, function(i, tarea){
            $("<li></li>").html(tarea.nombre + " - " + tarea.hora).appendTo("ul#tareas");
          });
        });

El código de este tareas.php podría tener este aspecto:

<?php
header('Content-type: text/javascript');

$bbdd = new mysqli('servidor.com', 'usuario', 'pass', 'tareas');

$query = 'SELECT * FROM tareas';
$tareas = array();
if($resultado = $bbdd->query($query))
  while($tarea = $resultado->fetch_object())
    $tareas[] = $tarea;

$bbdd->close();

echo json_encode($tareas);
?>

Como veis, se utiliza la función json_encode para convertir el array u objeto PHP a formato JSON. Esta función, junto con su complemento, json_encode, se introdujo en PHP en la versión 5.2.0.