Chuck Norris también en el HTML

Chuck Norris, el único hombre, perdón, Hombre, que ha contado dos veces hasta infinito, también dispone de un color en HTML, un rojo probablemente inspirado por las pasiones que despierta:

Chuck Norris

Como si fuera el valor “green” o “yellow” para el atributo bgcolor, “chucknorris” es un color más, concretamente el #C00000

Este es el código del ejemplo:

<table>
   <tbody>
      <tr>
         <td align="center" bgcolor="chucknorris" width="100%">Chuck Norris</td>
      </tr>
   </tbody>
</table>

Él


Aclaración para navegantes:

Obviamente esto es una broma. El color chucknorris no está definido en el estándar. Funciona, o algo parecido, tomándolo por rojo, por como el navegador interpreta los códigos hexadecimales de los colores.

La diferencia entre getElementById y el dolar de jQuery

Cuando atiendo las preguntas de un programador junior en problemas con su código Javascript me doy cuenta de que muchas son debidas a la confusión entre jQuery y un objeto del DOM. Los que empezamos a tocar Javascript antes de la llegada de librerías como jQuery vemos la diferencia claramente, pero hoy en día, cuando un programador novel se lanza a desarrollar en el lado cliente código Javascript estará usando, como mínimo, una librería como jQuery, por lo que lo raro sería que no confundiera ambos.

Vamos a ver en qué consiste la confusión. Cuando trabajamos con la librería jQuery podemos pensar que seleccionar un elemento por su ID:

$('#myVideo').....

Es equivalente a como lo hacíamos antes, cuando no existía la librería jQuery:

document.getElementById('myVideo');

Pero realmente es completamente diferente. El segundo devuelve un puntero al elemento DOM seleccionado que nos permite acceder a las propiedades y métodos propios del elemento mientras que el primero, jQuery, nos proporciona una envoltura (wrapper) sobre el elemento seleccionado (o conjunto de elementos ). Esa envoltura proporciona al programador unos elementos (comunes a todos los elementos del DOM) que facilitan su manipulación.

Esto se ve claramente con el tag <video> que incorpora HTML5 y que usaré como ejemplo. Este tag incorpora métodos no comunes a otros elementos como play() y pause(). El siguiente código Javascript funcionará perfectamente si a dicho elemento le ponemos “myVideo” como identificador:

var player = document.getElementById('myVideo');
player.play();

En cambio, el siguiente código todo cuanto hará será imprimir un error en la consola del navegador:

$('#myVideo').play();

Otro ejemplo para clarificar mejor es cuando queremos acceder a los hijos de un elemento del DOM pero disfrutando de los métodos de jQuery. Veamos el siguiente código:

$('div[id^="panel"] ol').each(function () {

Sirve para recorrer todos los hijos <li>, de un tag <ol>, que pertenece a varios elementos div cuyo id empieza por “panel”. Dentro de la función podemos referirnos a cada uno de ellos mediante this, pero el siguiente código sería incorrecto:

$('div[id^="panel"] ol').each(function () {
   this.hide();
}

El método hide lo incopora jQuery, por lo tanto, para poder invocarlo sería:

$(this).hide();

Mientras que para acceder al id sería:

$('div[id^="panel"] ol').each(function () {
   alert(this.id);
   $(this).hide();
}

Tengamos en cuenta además que $ es un alias para la función jQuery, función que nos da acceso a toda la librería jQuery. El dólar es equivalente y más rápido a escribir:

jQuery(this).hide();

Ya estamos haciendo servir Google Fonts en VIC Services

Ya estoy haciendo servir Google Fonts en VIC Services. En concreto el sitio está haciendo servir la fuente “Patrick Hand” para el nombre del sitio (VIC Services), el eslogan (desarrollo web) y en las opciones del menú principal.

En vez de incluir un link a la hoja de estilos como indicaba en una entrada anterior:

<link href="http://fonts.googleapis.com/css?family=Patrick+Hand&v2" rel="stylesheet" type="text/css">

He incluido directamente en una hoja de estilos del sitio el código contenido en ese css remoto:

@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: normal;
  src: local('PatrickHand'), local('PatrickHand-Regular'),
         url('http://themes.googleusercontent.com/font?kit=9BG3JJgt_HlF3NpEUehL0HhCUOGz7vYGh680lGh-uXM')
         format('woff');
}

El W3C tiene un detallado documento sobre fuentes en CSS3. Aquí pueden leerlo si tienen curiosidad sobre la nueva propiedad “src”. La verdad es que esto lo he hecho muy rápido, cuando tenga más tiempo incluiré en mi servidor el fichero .ttf para que no deba ir a buscarlo a los servidores de Google. Si en su navegador no se visualizan correctamente los nuevos textos por favor comuníquemelo a través del formulario de contacto o dejando un comentario en esta entrada.

— Editado el 06/02/2012 —

Este artículo data de cuando este sitio web estaba en Drupal y ya no es válido para la actual implementación en WordPress.

Servicios web para fuentes

Algo que da algún que otro dolor de cabeza cuando implementamos el aspecto visual de una web es la maquetación, es muy difícil conseguir que la misma web se visualice igual en todas las posibles combinaciones de navegadores, sistemas operativos y resoluciones de pantalla. A solucionar uno de estos puntos oscuros vienen las fuentes web. Como no todos los sistemas operativos disponen de las mismas fuentes, podemos indicar al navegador mediante los estilos fuentes alternativas para que, en caso de que el sistema operativo no disponga de una, pueda recurrir a otra:

font-family: "Lucida Grande","Lucida Sans Unicode", sans-serif

Con esta indicación el sistema primero intentará usar Lucida Grande, frecuente en los Mac, en caso de no disponer de ella, como ocurre en los Linux y Unix, recurrirá a Lucida Sans Unicode, si tampoco dispone de ella recurrirá a Sans-serif. En caso de no disponder de ninguna de las fuentes indicadas recurrirá a la que el sistema tenga por defecto.

Un problema derivado de esto es que el tamaño de cada familia de fuente es distinto así que el mismo texto podría ocupar más o menos espacio en función de la fuente escogida, pudiendo llegar incluso a que el texto se desborde y “quiebre” la página o una parte de ella. Una solución a esto sería usar sólo fuentes “seguras”, pero un sitio hecho exclusivamente en Arial y Serif sería algo aburrido, ¿verdad?

Por suerte, disponemos de servicios web que nos proporcionan fuentes para que estas se vean igual en todos los sistemas, aquí pueden ver una tabla bastante completa de empresas que ofrecen estos servicios.

El único servicio gratuito que conozco a día de hoy es el de Google. He aquí un ejemplo para ilustrar el sencillo uso de Google Fonts:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine" />

Incluimos en nuestra web esta hoja de estilos generada en un servidor de Google y pasamos como parámetro la fuente que queremos importar: Tangerine. A partir de ahora es una fuente más que podemos usar en nuestra web, por ejemplo creamos un estilo llamado “googleFont”:

.googleFont {
font-family: 'Tangerine', serif;
font-size: 40px;
}

Y lo aplicamos donde deseemos:
Ejemplo de la Google Font Tangerine
En la documentación de Google tenemos toda la información sobre la importación de fuentes.

Estoy esperando poder empezarlas a usar en mi próximo proyecto. Será en el “duro” mundo de los entornos de producción donde realmente podré poner a prueba el sistema.

Actualización 29/06/2011:

Hablando sobre Google Fonts con otros desarrolladores me han dicho que no les gusta la idea de alojar contenido que el sitio web necesita en servidores ajenos: ¿qué pasaría si el servidor se cayera? Bien, que los server racks de Google se caigan es algo que pocas veces se ha visto pero por si desconfiamos Google nos permite descargarnos los .ttf y alojarlos en nuestro servidor. En las fases iniciales del desarrollo podemos trabajar con los ficheros alojados en los servidores de Google y una vez finalizado el sitio los movemos a nuestro servidor.

Google nos da otra razón a favor: han aumentado las fuentes. Aquí está la versión 2 de la librería.