JAVASCRIPT JAVA HTML TUTORIAL

TUTORIAL

Bienvenido al tutorial de Santyweb. En él intentaré explicar, lo más detalladamente posible, el funcionamiento de algunos "truquitos" realizados en HTML, JAVA o JAVASCRIPT; como no, con algunos ejemplos.

Te recomiendo que guardes esta página (Control+S) para leerla cuando estés desconectado.

Se mostrará en amarillo el código fuente, en rojo el texto normal y en verde las aclaraciones dentro del código...

DIEZ PASOS PARA SORPRENDER A TUS VISITANTES

1) ¿Cómo hacer que un botón actúe como un link?

Éste ejemplo es muy, muy sencillo. Seguramente lo es tanto que ya sabéis cómo hacerlo. Aquí tenemos un botón, para aprovechar, haré que al pulsarlo, me enviéis un E-Mail.

Éste es el código fuente:

Como ves es muy fácil. Y si lo que prefieres es que acceda a otra página, sólo tienes que cambiar el ACTION por

2) ¿Cómo hacer que las imágenes de fondo no se muevan con el texto?

Bueno, este también es fácil. Sólo debemos añadir una sentencia a la sentencia del BODY BACKGROUND.

Así:

Y ya está. Así de sencillo. El ejemplo es el de esta misma página.

3) Los dichosos frames. ¿Cómo entenderlos?

Si hay algo que deja a los visitantes de una Web boquiabiertos es el diseño de ésta. Los frames eran, hasta hace poco, lo más avanzado que podía verse en una web. Tanto que al llegar decías: "Jobar, menudo genio el que hizo ésto" Así que si queréis quedar mejor y ser más originales, echádle un vistazo a ésto.

Ahora vamos a construir una página (indice.html) dividida en 3 columnas que ocupan cada una un 30% de la pantalla; La tercera columna la dividiremos en dos horizontalmente. ¿OK?

Éste es el código.

</FRAMESET>

En este espacio irá lo que vería un visitante cuyo navegador no soporte FRAMES

</NOFRAMES>

</FRAMESET>

Y se acabó lo que se daba. Para ver el resultado de todo: lee el ejemplo siguiente.

4) Abrir una página en un frame específico o en una ventana nueva.

Es algo muy importante y de gran utilidad. Nos sirve para tener un menú en un marco y visualizar el contenido en otro, como ocurre en Santyweb.

Lo de abrir en Ventana Nueva te suena a chorrada, ya que si queremos abrirla en una ventana nueva, no tenemos más que hacer click con el botón secundario del ratón y elegir "Abrir en Ventana Nueva". Pero... ¿y si el visitante no sabe que la página a la que va a acceder es mejor que la vea aparte?

Vimos antes que al definir una página con frames, le asignábamos un nombre:

Pues bien, para abrir un link en un marco determinado, no hay más que usar la siguiente línea, en la que se ha añadido el comando "target":

Así se abrirá la página "página_a_abrir" en el marco llamado C1, es decir, en la primera columna, si nos llevamos por el ejemplo de antes.

¿Y para que se abra en una ventana nueva? Bueno, si te digo la verdad, aunque es posible, yo no sé como se hace, pero podemos engañar al naveador y usar un truco. ¿Qué tal si le decimos que abra la página en un marco que no existe? Desde luego, la abrirá, y lo hará, para suerte nuestra, en una ventana nueva.

Pulsando el Link, accederás a una página que se abrirá en una ventana nueva y mostrará los frames vistos antes:

Ejemplo

5) Mogollón de colores de fondo al inicio de la página.

Esta opción es muy llamativa. Si has entrado a Santyweb por la puerta principal habrás observado que la primera página cambiaba de color (de blanco a negro, pasando por todos los que hay por medio) Sin duda, el visitante espera impacientemente el final para ver qué pasa. Es un buen método para conseguir sorprenderlos a todos.

El código es algo complejo, así que... bueno, cópialo enterito.

function makearray(n) {

this.length = n;

for(var i = 1; i <= n; i++)

this[i] = 0;

return this;

}

hexa = new makearray(16);

for(var i = 0; i < 10; i++)

hexa[i] = i;

hexa[10]="a"; hexa[11]="b"; hexa[12]="c";

hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

function hex(i) {

if (i < 0)

return "00";

else if (255 < i)

return "ff";

else

return "" + hexa[Math.floor(i/16)] + hexa[i%16];

}

function setbgColor(r, g, b) {

var hr = hex(r); var hg = hex(g); var hb = hex(b);

document.bgColor = "#"+hr+hg+hb;

}

function fade(sr, sg, sb, er, eg, eb, step) {

for(var i = 0; i <= step; i++) {

setbgColor(

Math.floor(sr * ((step-i)/step) + er * (i/step)),

Math.floor(sg * ((step-i)/step) + eg * (i/step)),

Math.floor(sb * ((step-i)/step) + eb * (i/step)));

}

function fadein() {

fade(255,255,255, 0,0,0, 120);

}

fadein();

</script>

Venga, ¿Qué más te da aprender un poco? Explicación:

La función fade(inr,ing,inb, outr,outg,outb, step) Por ejemplo, fade(0,0,0, 255,255,255, 255), cambia el color de fondo desde el negro al blanco muy lentamente.

Otra forma de fade(255,0,0, 0,0,255, 50) es fade(0xff,0x00,0x00, 0x00,0x00,0xff, 50), que cambia de rojo a azul. Para guiarnos con eso de la velocidad, hay que saber que el último número del paréntesis (50 en este caso) es el que la indica: 2 es muy rápido, y 255, muy despacio ¿OK?

Para ver un ejemplo, si no lo has visto ya, entra en Santyweb desde su primera página: index.html

6) Diálogo emergente con texto definido.

¿Estás harto de los errores que da Windows, esos con un cuadro y un botón ACEPTAR y CANCELAR y un sonido que te pega un susto de muerte? Bueno, ¿a que nunca imaginaste utilizarlos de adorno en tu Web? Porque se puede, y mira qué fácil es:

function checkAGE(){if (!confirm (" Hola, Bienvenido a mi página principal")) history.go(-1);return " "} document.writeln(checkAGE())

// -->

</script>

El document.writeln (que también veremos en otros ejemplos posteriores), se usa para añadir algo al documento, o también, como en este caso, para que salga el diálogo.

Bueno, si has vuelto al index.html antes, lo habrás visto también. Y si no, vuelve ahora...

7) Más diálogos. Preguntarle algo al visitante para después escribirlo:

También lo incluyo, como no, en mi Web. Al elegir idioma, accedemos a la página principal y te pregunto el nombre. Tú, que eres bueno y sabes que nunca podré enterarme, lo escribes y... ¡sorpresa! ¡En mi página principal está escrito tu nombre! Espero que hayas escrito el nombre y no un insulto... sería peor para tí.

Así se hace:

// -Inicio del Script de Java hide

var Firstname=prompt("¿Cómo te llamas?"," ");

//unhide -->

</script >

document.write("<center><h2><font color=red face=ARIAL HELVETICA>¡Hola, " + " ");

document.write(Firstname + "! Has llegado al lugar apropiado.");

document.write("</h2></font></center>");

document.write('<font color=#000000 face=arial helvetica size=2>');

//end of script unhide

// -->

</script>

Como vemos, el document.write escribe en la pantalla lo insertado (Firstname), y nótese también que si queremos que el texto sea de otro color, o cambiar sus propiedades, hemos de hacerlo también dentro del document.write.

NOTA: Firstname es sólo una variable, nosotros podemos cambiarle el nombre si queremos.

8) Texto fijo en la barra de estado del navegador

Hartos de "Abriendo página xyz.html" o "Listo", podemos variar la barra de estado y poner LO QUE QUERAMOS. Bien sea un texto fijo o un scroll, que veremos después.

Este primer ejemplo es muy sencillo. Podemos usarlo cuando se carga una página:

O cuando colocamos el ratón sobre un link:

<onmouseover="window.Status='¡Ahhh! ¡Un ratón!';return true">

Mira este ejempo: Coloca el mouse sobre el link y observa la barra de estado.

ODIO LOS RATONES

9) Scrolls

Bueno, para ver este ejemplo tendrás que ir al menú de Santyweb. Ya lo habrás visto si has llegado hasta aquí. Ahora bien... para entenderlo tendrás que esforzarte un pelín.

(Esto de arriba es para que empiece a funcionar cuando se cargue la página)

function scrollit_r2l(seed)

{

var msg=" TEXTO DEL SCROLL "

var out = " ";

var c = 1;

if (seed > 100) {

seed--;

var cmd="scrollit_r2l(" + seed + ")";

timerTwo=window.setTimeout(cmd,100);

}

else if (seed <= 100 && seed > 0) {

for (c=0 ; c < seed ; c++) {

out+=" ";

}

out+=msg;

seed--;

var cmd="scrollit_r2l(" + seed + ")";

window.status=out;

timerTwo=window.setTimeout(cmd,100);

}

else if (seed <= 0) {

if (-seed < msg.length) {

out+=msg.substring(-seed,msg.length);

seed--;

var cmd="scrollit_r2l(" + seed + ")";

window.status=out;

timerTwo=window.setTimeout(cmd,100);

}

else {

window.status=" ";

timerTwo=window.setTimeout("scrollit_r2l(100)",75);

}

// -- Fin del script -->

</script>

En Texto del Scroll pondremos el scroll que más nos guste. Lo que hace es simplemente añadir espacios en blanco al final del texto para que simule un scroll y hasta que llegue a un caracter limitado, ya que si no, estaría colocando espacios toda la vida y sólo veríamos aparecer nuestro scroll una sóla vez.

10) Hora y Fecha (EN ESPAÑOL)

Este procedimiento muestra la hora y fecha del sistema de nuestro visitante, tal y como veíamos en el Menú de Santyweb con letras amarillas. El código es muy largo y complejo para aquellos que no saben mucho de esto, pero de todas formas, como sé que lo que vas a hacer es COPIAR y PEGAR...

meses = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Diciembre");

data = new Date();

index = data.getMonth();

document.write('<p align="center"><font size="1" COLOR="yellow" face="Times"><B>' +data.getDate()+ " de " + meses[index] + " de 19" + data.getYear() + '</B></font> ');

var Hora;

var Minuts;

var MatiTarda;

Hora = data.getHours();

if (Hora >= 12) {

MatiTarda = " P.M.";

}

else {

MatiTarda = " A.M.";

}

if (Hora > 12) {

Hora -= 12;

}

if (Hora == 0) {

Hora = 12;

}

Minuts = data.getMinutes();

if (Minuts < 10) {

Minuts = "0" + Minuts;

}

document.write('<font size="1" COLOR="yellow" face="Times"><B>' + Hora + ":" + Minuts + MatiTarda + '</B></font></P>');

// -->

</script >

Lo que hemos hecho es declarar variables (meses, hora, minuts...) que recogen los datos con el comando GET y lo muestran todo con el ya famoso DOCUMENT.WRITE

Mira, hazme un favor... échale un vistazo el código y aprende un poco, que no te van a salir ronchas por eso. Verás como con todo esto te empieza a gustar más este mundillo de posibilidades inimaginables.

Volver al Inicio