no way to compare when less than two revisions

Diferencias

Muestra las diferencias entre dos versiones de la página.

@@ Línea 1: / Línea 1: @@
+===== Reloj «24» (Web) =====
+^ <= Volver a [[.:]] ^
+#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 [color=orange]24[/color], esta vez en una [b]página web[/b], para mis lectores y [b]particularmente[/b] para los miembros del [b]Team[color=orange]24[/color][/b] 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 «[[wpes>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]].
+==== Objetivos ====
+El objetivo es poder integrar un reloj en una página web con una visualización similar a la imagen inferior (utilizando [u]Opera 9.64 en Ubuntu[/u]), utilizando técnicas de desarrollo web y tecnologías abiertas y estándar (no MSIE, no etiquetas propietarias de CSS, etc):
+^  {{:desarrollo:24_theme:screenshot-1.png|}}  ^
+|  Página web con el [b]Reloj Estilo [color=orange]24[/color][/b]\\ (Opera 9.64 --- Ubuntu 8.04)  |
+==== Requisitos ====
+Hay dos formas de lograr el efecto, y ambas tienen los mismos dos requisitos básicos:
+  - Una fuente tipográfica estilo {!display:o marcador digital de siete segmentos}}.
+  - Conocimientos básicos de JavaScript y CSS.
+**Chequea [[tipografia-24|Ajustes de Visualización]] para más información de tipografías y colores adecuados.**
+==== Método Estándar: CSS ====
+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/''".
+=== Instalando el Script ===
+[b]Baja el ejemplo[/b] 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 [[tipografia-24|más información]]). Toma nota de los nombres //genérico// y de //familia// de la tipografía escogida.
+[b]Sube la tipografía a un [u]servidor web[/u] y toma nota de la URL.[/b]
+Una vez que hayas bajado e instalado la tipografía extra, necesitas modificar el archivo [m]reloj24.css[/m] para que la familia escogida refleje la de tu tipografía. Por ejemplo, si descargaste una fuente cuyo nombre de familia es [color=red][m]digital[/m][/color], debes agregar una sección [color=green][m]@font-face[/m][/color] que debe leer así:
+<code css | reloj24.css>
+font-face {
+  font-family: "digital";
+  src: url(http://mi-servidor.cl/archivos/tipografia.ttf)
+  format("opentype", "truetype");
+  }
+</code>
+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 [m]font-family[/m] incluya tu nueva familia de tipografía:
+<code css>
+div#reloj24div {
+  ...
+  font-family: "digital", Garamond, monospace;
+  ...
+  }
+</code>
+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í:
+{{:desarrollo:24_theme:reloj24-web-scr01.png}}
+=== Explicando el Reloj ===
+Ya que sabemos que el reloj corre, es hora de explicar el truco, ¿no?
+La magia está en el archivo [m]reloj24.js[/m] que contiene las funciones que hacen correr al reloj. La función [color=green][m]reloj24_init[/m][/color] 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 ([m]reloj24.html[/m]), y a continuación, activa el temporizador que hace correr al reloj.
+<code js | reloj24.js>
+  // encontrar el objeto en el DOM que representa al reloj
+  reloj24_object= document.getElementById( reloj24_name )
+</code>
+El nombre del objeto en el DOM está determinado por la variable [color=navy][m]reloj24_name[/m][/color], la cual debes modificar si es que modificas el HTML para que corresponda al nombre del campo DIV en el archivo.
+<code js | 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';
+</code>
+La función [color=green][m]reloj24_tick[/m][/color] que corre una vez por segundo, simplemente lee la hora del sistema, la formatea con el patrón "[m]hh:mm:ss[/m]", 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 [b]cómo estilizar el reloj[/b].
+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 [color=purple][m]reloj24div[/m][/color], simplemente marcamos los bloques de la forma :
+<code css>
+div#reloj24div {
+ ...
+}
+</code>
+Y utilizamos las etiquetas y atributos CSS para darle al reloj la apariencia deseada.
+Como clave, he seguido las ideas principales en [[tipografia-24|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 [m]background-color[/m], [m]color[/m] y [m]font-family[/m].
+Además se ha agregado una etiqueta [m]width:[/m] 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 //em//s, que equivalen, aproximadamente, al ancho relativo de la letra "m"((la más ancha de la tipografía inglesa)) 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.
+[b]Una vez que subimos estos archivos a nuestra página web[/b], ya tenemos el reloj corriendo.
+=== Incorporando a nuestra propia Página ===
+[b]Para incorporar el reloj a una página ya existente[/b], 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:
+<code html | 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>
+</code>
+%lppTlargest{Voilà}%
+Ya tenemos listo el reloj.
+=== Otorgando la Tipografía a los Clientes ===
+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í:
+{{:desarrollo:24_theme:reloj24-web-scr02.png|}}
+Esto se debe a que, aunque la estilización es correcta, [b]el navegador no puede mostrarle la fuente al cliente[/b]. 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 [u]las corporaciones detrás de estos navegadores tienen miedo de posibles acusaciones de violación de "copyright"[/u] (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:
+<code css>
+div#reloj24div {
+  ...
+  font-family: "SevenSegments", Garamond, monospace;
+  ...
+  }
+</code>
+Pero esto puede fácilmente solucionarse, [u]indicando al usuario que si quiere ver el efecto completo puede instalar la fuente[/u]. 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 [b]Reloj Estilo [color=orange]24[/color] en toda su gloria[/b].
+Sin embargo, recuerda que estás enlazando a contenidos creados por terceros (la tipografía). [b]Es por esto que para este proyecto buscamos fuentes que permitan el libre uso personal[/b], como [i]SevenSegments[/i] y [i]LCDD[/i].
+==== Método Alternativo: Flash ====
+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:
+  - el tema de las siempre molestas **licencias**, ya que la fuente puede estar licenciada en un modelo que impide descargarla
+  - el problema de descargar software u objetos vía el navegador, ya que hay que asegurar al usuario que la descarga no contiene **malware** ((aunque con Windows eso no es problema, Windows //de por sí es// un 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á.
+==== Archivos ====
+<note dl>
+Código de ejemplo: {{:desarrollo:24_theme:reloj24-1.0.zip|}}
+Estos archivos se proveen bajo una licencia de __Freeware__, son libres de uso siempre y cuando se reproduzcan tal y cual y se mantengan los créditos al [b]Team24[/b].
+</note>
+----
+{{tag>css 24 team24 tips reloj}}