#lppTlarge[ Al igual que he hecho en otras secciones como en reloj-24-linux, lo que voy a mostrar aqui es cómo tener un look&feel 24, esta vez en una página web, para mis lectores y particularmente para los miembros del Team24 que quieran más formas de mostrar su fanatismo por esta espectacular serie.

]#

En este documento se muestra cómo implementar un reloj digital estilo «24 (serie)» utilizando HTML, JavaScript y CSS para obtener una visualización que es portable, requiere pocos recursos y poca participación del navegador cliente, y que cumple con los estándares {!actuales:CSS 3.0 draft y Unobstrusive JavaScript como están definidos a Septiembre de 2008}} de desarrollo web.

Recuerda chequear tipografia-24 para ver los códigos de color y el formato tipográfico para el reloj. O si quieres salta directamente a la sección Archivos.

El objetivo es poder integrar un reloj en una página web con una visualización similar a la imagen inferior (utilizando Opera 9.64 en Ubuntu), utilizando técnicas de desarrollo web y tecnologías abiertas y estándar (no MSIE, no etiquetas propietarias de CSS, etc):

Página web con el Reloj Estilo 24 (Opera 9.64 — Ubuntu 8.04)

Hay dos formas de lograr el efecto, y ambas tienen los mismos dos requisitos básicos:

1. Una fuente tipográfica estilo {!display:o marcador digital de siete segmentos}}.
2. Conocimientos básicos de JavaScript y CSS.

Chequea Ajustes de Visualización para más información de tipografías y colores adecuados.

El método “estándar”, que cumple con las especificaciones del W3C y que está garantizado que resulte si el navegador es relativamente reciente, es mezclar un poco de JavaScript y CSS, el JavaScript se encarga del comportamiento (hacer que el reloj avance) mientras que el CSS se encarga de estilizarlo (darle la “apariencia «24»”).

Para hacer esto lo único que necesitas es crear algunos archivos en tu carpeta web, que en este caso vamos a asumir que tienes un lindo ./public_html en alguna parte.

De aquí en más, todas las rutas de archivo son, o absolutas, o relativas a “public_html/”.

Baja el ejemplo de la sección Archivos y desempaquétalo bajo un directorio web. El ejemplo funciona tal cual está, aunque para la mejor visualización necesitarás bajar un fuente de reloj digital (ver más información). Toma nota de los nombres genérico y de familia de la tipografía escogida.

Sube la tipografía a un servidor web y toma nota de la URL.

Una vez que hayas bajado e instalado la tipografía extra, necesitas modificar el archivo reloj24.css para que la familia escogida refleje la de tu tipografía. Por ejemplo, si descargaste una fuente cuyo nombre de familia es digital, debes agregar una sección @font-face que debe leer así:

| reloj24.css

font-face {
  font-family: "digital";
  src: url(http://mi-servidor.cl/archivos/tipografia.ttf)
  format("opentype", "truetype");
  }  

Por supuesto, ajusta la URL a la que corresponde a la tipografía subida en el servidor.

A continuación, actualiza más abajo en el archivo CSS la estilización del reloj para que la etiqueta font-family incluya tu nueva familia de tipografía:

div#reloj24div {
  ...
  font-family: "digital", Garamond, monospace;
  ...
  }

En al mayoría de los sistemas operativos, si acabas de instalar la tipografía necesitarás reiniciar el navegador o la sesión completa para que se actualice el registro de tipografías del sistema.

Una vez hecho eso, puedes abrir tu navegador y apuntar a la página de ejemplo. Provisto que tengas acceso a Internet, el reloj debiera estar ya corriendo y podría verse así:

Ya que sabemos que el reloj corre, es hora de explicar el truco, ¿no?

La magia está en el archivo reloj24.js que contiene las funciones que hacen correr al reloj. La función reloj24_init es la que actualiza el reloj en dos pasos: primero, determina el nombre del contenedor DIV que representa al reloj en nuestra página web (reloj24.html), y a continuación, activa el temporizador que hace correr al reloj.

| reloj24.js

  // encontrar el objeto en el DOM que representa al reloj
  reloj24_object= document.getElementById( reloj24_name )

El nombre del objeto en el DOM está determinado por la variable reloj24_name, la cual debes modificar si es que modificas el HTML para que corresponda al nombre del campo DIV en el archivo.

| reloj24.js

// nombre (ID) del objeto que representa al reloj en el DOM
// debe corresponder a ID del objeto en 'reloj24.html'
var reloj24_name= 'reloj24div';

La función reloj24_tick que corre una vez por segundo, simplemente lee la hora del sistema, la formatea con el patrón “hh:mm:ss”, y actualiza el texto en el objeto reloj del DOM para que corresponda a ese valor. A continuación se “sienta” a esperar otro segundo para volver a realizar su tarea.

Lo siguiente es determinar cómo estilizar el reloj.

La clave está en el hecho que hemos asignado un id al reloj en el archivo HTML, por tanto podemos usar este id en el archivo CSS. Por tanto, como el id de clase por defecto es reloj24div, simplemente marcamos los bloques de la forma :

div#reloj24div {
 ...
}

Y utilizamos las etiquetas y atributos CSS para darle al reloj la apariencia deseada.

Como clave, he seguido las ideas principales en Ayuda a la Visualización para poder darle al reloj una apariencia parecida al reloj digital en “24”: fondo no negro pero sí oscuro, fuente monoespaciada en amarillo. Las claves en CSS para esos valores están en las propiedades background-color, color y font-family.

Además se ha agregado una etiqueta width: que garantiza que el reloj tenga un ancho mínimo como para que todo el valor de la hora quede contenido adentro de su espacio visual. El tamaño está dado eon ems, que equivalen, aproximadamente, al ancho relativo de la letra “m”¹⁾ respecto del tamaño de la fuente. Como hay 8 caracteres en una estructura de hora (seis dígitos y dos “:”), un tamaño de entre 6 y 10 em debiera cubrir nuestras necesidades.

Una vez que subimos estos archivos a nuestra página web, ya tenemos el reloj corriendo.

Para incorporar el reloj a una página ya existente, basta con copiar el objeto DIV del HTML al lugar que deseemos, y editar la cabecera de nuestra página web para que incluya las instrucciones necesarias:

| mi_pagina.html

<HEAD>
  <link rel="stylesheet" href="reloj24.css" />
  <script type="text/javascript" src="reloj24.js"></script>
 
</HEAD>
<BODY>
....
<script type="text/javascript">
//<![CDATA[
// Agregamos el reloj al listado de eventos
window.addEventListener ('load', reloj24_init, 'false');
//]]>
</script>
</BODY>

%lppTlargest{Voilà}%

Ya tenemos listo el reloj.

Hasta aqui, el reloj está listo. Sin embargo, si un cliente visita tu web, el reloj no se verá exactamente igual que el que he mostrado anteriormente. Es más probable que se vea así:

Esto se debe a que, aunque la estilización es correcta, el navegador no puede mostrarle la fuente al cliente. Los navegadores más recientes soportan la importación de fuentes vía @font-face, lo hacen a medias, aceptando solamente aquellas fuentes que están ya instaladas en el sistema. ¿Por qué? Porque de seguro las corporaciones detrás de estos navegadores tienen miedo de posibles acusaciones de violación de “copyright” (término bastante manoseado últimamente) al permitir a los usuarios “disponer de cualquiera fuente de Internet”.

A falta de la fuente, el navegador se las arregla con el listado de familias alternativas que hemos indicado en nuestro CSS:

div#reloj24div {
  ...
  font-family: "SevenSegments", Garamond, monospace;
  ...
  }

Pero esto puede fácilmente solucionarse, indicando al usuario que si quiere ver el efecto completo puede instalar la fuente. Basta con colocar un aviso en alguna parte de nuestra web y colocar un enlace al archivo TTF. Idealmente, este enlace debe corresponder exactamente con el que hemos usado en el CSS.

Una vez que el cliente instale la fuente y reinicie su navegador y/o su sesión, podrá apreciar el Reloj Estilo 24 en toda su gloria.

Sin embargo, recuerda que estás enlazando a contenidos creados por terceros (la tipografía). Es por esto que para este proyecto buscamos fuentes que permitan el libre uso personal, como SevenSegments y LCDD.

Como se comentaba la desventaja del método anterior es que requiere que el usuario primero descargue la fuente y la instale en su computador; aunque esto se puede hacer fácil y hasta automático, no es muy preferible por dos problemas:

1. el tema de las siempre molestas licencias, ya que la fuente puede estar licenciada en un modelo que impide descargarla
2. el problema de descargar software u objetos vía el navegador, ya que hay que asegurar al usuario que la descarga no contiene malware ²⁾.

Dicho sea eso, es mucho mejor que la alternativa de usar “sIFR”, una tecnología basada en Flash que permite imprimir un objeto de texto Flash sobre un contenedor HTML. Por usar una tecnología propietaria y, a fin de cuentas, salir mucho más pesado y consumir muchos más recursos que el método anterior, no me explayaré aquí, cualquier tutorial de sIFR en Google les servirá.