Tips y Trucos | el 10 de Octubre del 2009

Trucos HTML [Parte 6]



Saludo al visitante:

Puedes poner en tu sitio un mensaje personalizado según la hora en que el visitante entre. Este puede recibir el saludo "Buenos días", "Buenas tardes", "Buenas noches", o puedes sustituirlos por otros mensajes de tu preferencia. De esta forma el visitante verá el mensaje de acuerdo con el horario que entre a tu página.

 

<Font size=2 face=arial><b>
<Script Language="JavaScript">
<!--
today = new Date()
if(today.getMinutes() < 10){
pad = "0"}
else
pad = "";
document.write ;if((today.getHours() >=6) && (today.getHours() <=9)){
document.write("¡Buenos días!")
}
if((today.getHours() >=10) && (today.getHours() <=11)){
document.write("¡Buenos días!")
}
if((today.getHours() >=12) && (today.getHours() <=19)){
document.write("¡Buenas tardes!")
}
if((today.getHours() >=20) && (today.getHours() <=23)){
document.write("¡Buenas noches!")
}
if((today.getHours() >=0) && (today.getHours() <=3)){
document.write("¡Buenas noches!")
}
if((today.getHours() >=4) && (today.getHours() <=5)){
document.write("¡Buenas noches!")
}
// -->
</script>
</b></font>


 

 

Texto animado:

Con este recurso puedes hacer que cualquier texto tenga movimiento en tu página. Es ideal para destacar tu logo o lo que prefieras.

 

<script language="JavaScript">
<!--
done = 0;
step = 4
function anim(yp,yk)
{
if(document.layers) document.layers["texto"].top=yp;
else document.all["texto"].style.top=yp;
if(yp>yk) step = -4
if(yp<60) step = 4
setTimeout('anim('+(yp+step)+','+yk+')', 35);
}
function start()
{
if(done) return
done = 1;
if(navigator.appName=="Netscape") {
document.texto.left=innerWidth/2 - 145;
anim(60,innerHeight - 60)
}
else {
texto.style.left=11;
anim(60,document.body.offsetHeight - 60)
}
}
// --></script>

<div id="texto" style="position: absolute; top: -50; color: #FF8000; font-family: Arial, Helvetica; font-weight:bold; font-size:40px;">
<p><font face="Arial, Helvetica, sans-serif" size="3"><b><font size="6" color="#990000">INGRESA TU TEXTO AQUI</font></b></font></p>
</div>

<script language="JavaScript">
<!--
setTimeout('start()',10);
//-->
</script>


 

 

Texto de apertura:

Este es un recurso muy interesante. Podés lograr que, al entrar a tu página, el usuario vea un mensaje de bienvenida o cualquier otro que configures. Luego, el usuario es llevado automáticamente a la página que tú definas.

Para tener este recurso en tu página, sólo debes copiar el siguiente código, pegarlo en tu editor y guardar la página como principal. De esta forma, al entrar a tu página, los visitantes verán los mensajes y luego serán llevados a la página que tú definas. Es muy fácil configurar este recurso. Basta con alterar las áreas destacadas en negrito en el código. Si tienes problemas con algún editor HTML que no reconozca el código, copia y pega este código en el bloc de notas del Windows u otro editor de texto y no olvides guardarlo con extensión html.

 

<HTML>
<HEAD>
<TITLE>Ingresa el título aquí</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function makeArray() {
this.length = makeArray.arguments.length;
for (var i = 0; i < this.length; i++)
this[i + 1] = makeArray.arguments[i];
}

function makeSlideShow (obj, wait, pre, url) {
this.curText = '';
this.posit = 1;
this.word = obj;
this.length = obj.length;
this.pre = pre;
this.wait = wait;
this.url = url;
this.display = displaySlideShow;
}

function displaySlideShow() {
if (this.posit <= this.length) {
this.curText = this.word[this.posit]
outStringWord = blankFrameTop + this.pre + this.curText + blankFrameBottom;
parent.draw.location = 'javascript:parent.outStringWord';
this.posit++;
}
else {
doneLoop = true;
top.location = this.url;
}
}

function displayLoop() {
if (!doneLoop) reDraw = setTimeout('displayLoop()', wordIntro.wait);
wordIntro.display();
}

var words = new makeArray ('Ingresa el primer texto aquí', 'Ingresa el segundo texto aquí', 'Ingresa el tercer texto aquí', 'Ingresa el cuarto texto aquí', 'ABRIENDO EL SITIO... ');
var wordIntro = new makeSlideShow (words, 2500, '<CENTER><BR><BR><BR><BR><BR><BR><BR><BR><FONT SIZE = 5>', 'Ingresa aquí el URL de la página que aparecerá');
var blankFrameTop = '<HTML><BODY BGCOLOR = "#000000" TEXT = "#FFFFFF">';
var blankFrameBottom = '</BODY></HTML>';
var blankFrame = blankFrameTop + blankFrameBottom;
var doneLoop = false;

</SCRIPT>
</HEAD><FRAMESET onLoad = "displayLoop()" ROWS = "100%, *" FRAMEBORDER = NO BORDER = 0>

<FRAME
SCROLLING=AUTO
SRC = "javascript:parent.blankFrame"
NAME = "draw"
MARGINWIDTH = 2
MARGINHEIGHT = 2>
</FRAMESET>
</HTML>

 

 

Texto en la barra de estado:  

Con este recurso podés incluir varios mensajes, novedades y noticias sobre tu sitio. Es una forma de destacar lo que quieras y también de agregar un efecto diferente a tu sitio.

 

<script LANGUAGE="JavaScript">
<!--
var speed = 10
var pause = 1500
var timerID = null
var bannerRunning = false
var ar = new Array()

ar[0] = "Ingresa aquí el primer texto "
ar[1] = "Ingresa aquí el segundo texto"
ar[2] = "Ingresa aquí el tercer texto"
ar[3] = "Ingresa aquí el cuarto texto"
ar[4] = "Ingresa aquí el quinto texto"

var message = 0
var state = ""
clearState()

function stopBanner() {
if (bannerRunning)
clearTimeout(timerID)
timerRunning = false
}

function startBanner() {
stopBanner()
showBanner()
}

function clearState() {
state = ""
for (var i = 0; i < ar[message].length; ++i) {
state += "0"
}
}

function showBanner() {
if (getString()) {
message++
if (ar.length <= message)
message = 0
clearState()
timerID = setTimeout("showBanner()", pause)
}
else {
var str = ""
for (var j = 0; j < state.length; ++j) {
str += (state.charAt(j) == "1") ? ar[message].charAt(j) : " "
}
window.status = str
timerID = setTimeout("showBanner()", speed)
}
}

function getString() {
var full = true
for (var j = 0; j < state.length; ++j) {
if (state.charAt(j) == 0)
full = false
}
if (full) return true
while (1) {
var num = getRandom(ar[message].length)
if (state.charAt(num) == "0")
break
}
state = state.substring(0, num) + "1" + state.substring(num + 1, state.length)
return false
}

function getRandom(max) {
var now = new Date()
var num = now.getTime() * now.getSeconds() * Math.random()
return num % max
}
// -->
</script>



Paso 2: Ingresa el siguiente código en la etiqueta <body> de tu página:

<Body onLoad="startBanner()">


Si ya existen otros parámetros en tu etiqueta body, sólo agrega un espacio después del último e incluye
onLoad="startBanner()"
.
Este comando es importante para hacer que el texto aparezca en la barra de estado inmediatamente al cargarse la página.