¿Una cuenta atrás demasiado grande?

Imagen de zetatron
0 puntos

Muy buenas tardes a todos. Hace bastante tiempo que no escribo nada por estos lares, aunque eso no significa que no me haya pasado por aquí. Hoy escribo este pequeño truquito para poder modificar a nuestro gusto el tamaño de la imagen de la cuenta atrás de la salida de la próxima versión de Ubuntu (cuántos "de" acabo de poner) y que no nos descuadre la estética de nuestra página (que se han pasao un poco :P). Comenzamos.

Para poner una cuenta atrás en nuestra página, nos vamos a Ubuntu.com, y vamos navegando hasta llegar aquí. Pero aquí nos encontramos con esto:

<script type="text/javascript" src="http://www.ubuntu.com/files/countdown/display.js"></script> 

Un código bien simple, pero que poco se puede modificar. La etiqueta src (abreviatura de source) indica que está recogiendo un código de la dirección que aparece tras el signo igual (=). Y sin tocar ese código, poco podremos modificar. Pero no hay problema: introducimos esa dirección en nuestro navegador y podremos ver el código de la función JavaScript, que es el que modificaremos. El código original es este:

var d = new Date();
dom = d.getDate();
month = d.getMonth();
year = d.getYear();
if (year < 2000) year = year - 100;
else year = year - 2000;

if (year == 8 && month == 2)
days = 24 + (31 - dom);
else if (year == 8 && month == 3 && dom < 24)
days = 24 - dom;
else
days = 0;
if (days < 10) days = '0' + days.toString();

var base = '/files/countdown/804/ubuntu/804UbuntuCountdown_';

// document.write('<a href="http://www.ubuntu.com/testing/hardy/beta"><img id="countdownimage" src="'+base+days+'days.png" width="217" height="170" border="0" alt="Ubuntu 8.04 - Coming soon" style="padding-top:2px;background-color:#fff"></a>');

document.write('<div style="width:217px;font-family:sans-serif" align="center"><a href="http://www.ubuntu.com/"><img id="ubuntucountdownimage" src="http://www.ubuntu.com/files/countdown/804/partner/804countdown_'+days+'days.jpg" width="217" height="170" border="0" alt="Ubuntu 8.04 coming soon"></a></div>');

(Eyyy, mola el scroll :D).

Bueno, como podréis observar, es un algoritmo propio de un lenguaje estructurado, con la definición de variables, la asignación de valores a éstas y funciones condicionales. Pues bien, ya sólo nos queda modificar la anchura (width) de la imagen, es decir, tenemos que decirle al navegador que nos muestre la imagen a ese tamaño. También le tenemos que decir al navegador que lo que se está ejecutando es un script programado en JavaScript, por lo que deberemos añadirle las etiquetas pertinentes, que son las que encontramos en la página que he puesto antes. De este modo, el código quedaría así:

<script language="javascript" type="text/javascript">

var d = new Date();
dom = d.getDate();
month = d.getMonth();
year = d.getYear();
if (year < 2000) year = year - 100;
else year = year - 2000;

if (year == 8 && month == 2)
days = 24 + (31 - dom);
else if (year == 8 && month == 3 && dom < 24)
days = 24 - dom;
else
days = 0;
if (days < 10) days = '0' + days.toString();

var base = '/files/countdown/804/ubuntu/804UbuntuCountdown_';

// document.write('<a href="http://www.ubuntu.com/testing/hardy/beta"><img id="countdownimage" src="'+base+days+'days.png" width="217" height="170" border="0" alt="Ubuntu 8.04 - Coming soon" style="padding-top:2px;background-color:#fff"></a>');

document.write('<div style="width:200px;font-family:sans-serif" align="center"><a href="http://www.ubuntu.com/"><img id="ubuntucountdownimage" src="http://www.ubuntu.com/files/countdown/804/partner/804countdown_'+days+'days.jpg" width="200" border="0" alt="Ubuntu 8.04 coming soon"></a></div>');

</script>

He puesto en negrita lo que se ha añadido o modificado. Nótese que hay que eliminar el atributo height (altura) para que la redimensión se haga automática y proporcionalmente y no se quede estirado. Es conveniente poner "px" detrás del número, pero si no se pone no pasa nada, ya que el navegador interpreta, por defecto, que el valor se refiere a píxeles. Yo lo he puesto a 200 píxeles, pero puede ser 120, 160 o los que estiméis oportunos.

Nótese, también, que la tercera línea, empezando por el final, viene precedida por un signo de comentario, en este caso una doble barra (//). Esto quiere decir que esa línea de código no se ejecutará. La he dejado por si acaso sirviera para algo más adelante, ya que, en principio, no vale para nada.

Quiero recordaros que JavaScript es un lenguaje que se ejecuta en el navegador web y no en el servidor, como es el caso de PHP. De modo que esta función recoge la fecha de vuestro sistema.

Sí, es un código más largo, pero para copiar y pegar, el trabajo es el mismo, y si puede ayudar para mantener la estética de vuestra web, pues bienvenido sea, ¿no? Además, el navegador ejecutará las mismas instrucciones, sólo que, así, no tendrá que recogerlas de otra web, sino de la misma página.

Espero que os sirva de ayuda a todos los webmasters ;).

Imagen de furtaxi
+1
0
-1

 Y lo pongo en plan vago total:

<a
 href="http://releases.ubuntu.com/releases/8.04/"><img
 style="border: 2px solid ; width: 145px; height: 116px;"
 alt="Hardy Hearon" title="Hardy Hearon"
 src="http://www.ubuntu.com/files/countdown/804/partner/804countdown_29days.jpg"></a>

Lo único, que hay que cambiar cada día lo del final:

804countdown_29days.jpg

En éste caso, el 29, por el tiempo que falte. 

Y el tamaño:

width: 145px; height: 116px;

por las cifras que correspondan. 

Por supuesto no es que sea un genio del HTML, me he limitado a copiar el código que me generó el Kompozer.  Así cualquiera... :)

De todas formas, es interesante lo que has puesto, quizás me valga para cambiar el código de la página de mi entidad bancaria, y sumarle 100 euros a mi cuenta cada día... :D 

 

Roberto. (Alias TIMT)

Mi página: www.vigonews.es

Lee y cumple las Normas. Busca antes de preguntar.
En cada hilo, márcalo adecuadamente.

Colabora con Preguntas Frecuentes, para mejorar el foro.

+1
0
-1

Mi web : www.vigovideo.es
Buscar es más rápido que esperar una respuesta.

Imagen de elgatogordo
+1
0
-1

¿quien se anima a programar un contador en castellano para cuando salga 8-10? 

 

www.offotpiqueando.foroactivo.com

soportealinux@fibertel.com.ar

+1
0
-1
Imagen de furtaxi
+1
0
-1

" El ser humano es lo que es, porque trabaja para no trabajar"

Y ¿A que viene ésto ?

Pues nada, buscando otra info, me fuí a www.ubuntu.com, y a la izquierda, ví un enlace "contdown", que nos lleva a:

http://www.ubuntu.com/getubuntu/countdown

donde tenemos éste código:

<script type="text/javascript" src="http://www.ubuntu.com/files/countdown/display.js"></script>

 

El más fácil todavía.... :) Eso sí, no cambia el tamaño, hay que añadírselo, supongo que con un heigth y un width.

Edito:  Y como estoy sin dormir, no me dí cuenta que ésto mismo dijo Zetatrón hasta que le doy a enviar. Así que lo dejamos en la frase, que queda muy bien.... :)

Roberto. (Alias TIMT)

Mi página: www.vigonews.es

Lee y cumple las Normas. Busca antes de preguntar.
En cada hilo, márcalo adecuadamente.

Colabora con Preguntas Frecuentes, para mejorar el foro.

+1
0
-1

Mi web : www.vigovideo.es
Buscar es más rápido que esperar una respuesta.