1.-Detectar el
navegador
Para comprobar el navegador que se est�
usando, por si queremos crear
una p�gina para Netscape y otra para Internet Explorer:
<script language="JavaScript">
<!--
function esIE30(){
var browserType=navigator.userAgent;
if (browserType.indexOf("MSIE")==-1)
return false;
else
return true;
}
<!-- Cargar la p�gina seg�n el explorador -->
function cargar(){
if (esIE30())
window.location.href="indice_ie.htm";
else
window.location.href="indice_netscape.htm";
}
//-->
</script>
2.-Crear un
Frame (primer ejemplo)
Ejemplo de Frame:
-------------------
| frmArriba |
-------------------
|frm1| frm2 |
| | |
-------------------
<!-- Filas: 20 y 80%, sin bordes, no dimensionable -->
<frameset rows="20%,80%" frameborder="0" noresize>
<!-- Definici�n para el frame superior -->
<frameset>
<!-- sin barras de scroll -->
<frame src="pagina_frmArriba.htm" name="frmArriba"
marginwidth="1" marginheight="1" scrolling="no" noresize>
</frameset>
<!-- Columnas: 21 y 79% -->
<frameset cols="21%,79%">
<frame src="pagina_frm1.htm" name="frm1"
marginwidth="1" marginheight="1" noresize>
<frame src="pagina_frm2.htm" name="frm2"
marginwidth="1" marginheight="1" noresize>
</frameset>
</frameset>
Cuando se crean los frames, hay que indicar la p�gina que se cargar� en cada uno de ellos, mediante src="p�gina.htm", se le asignar� un nombre con name="nombre" para poder despu�s hacer referencia a ese frame.
2.2.-Crear un
Frame (Segundo ejemplo)
Esta vez ser�n 4 frames, distribuidos as�:
-------------------
| frmArriba |
-------------------
|frm1| frm2 |
| | |
-------------------
| frmAbajo |
-------------------
<!-- Filas: 22, 61 y 17%, sin bordes, no dimensionable -->
<frameset rows="22%,61%,17%" noresize frameborder="0">
<!-- Definici�n para el frame superior -->
<frame src="pagina_Arriba.htm" name="frmArriba" noresize>
<!-- Frames centrales-->
<frameset cols="20%,80%" noresize>
<frame src="pagina_frm1.htm" name="frm1" noresize>
<frame src="pagina_frm2.htm" name="frm2" noresize>
</frameset>
<!-- Frame inferior -->
<frame src="pagina_Abajo.htm" name="frmAbajo" noresize>
</frameset>
Si quitas noresize, se puede cambiar el tama�o y si quieres que tenga bordes, quita frameborder="0"
3.-Cargar una
p�gina en un frame
Para cargar en un frame una p�gina
determinada, deberemos hacerlo usando el nombre asignado a dicho frame.
Usando el ejemplo anterior de creaci�n de frames, para
cargar en frmArriba la p�gina arriba_segunda.htm:
<a href="arriba_segunda.htm"
target="frmArriba"></a>
En href se especificar� la p�gina y en target
el frame que alojar� dicha p�gina.
4.-Cargar una
p�gina en el frame principal
Si se carga una p�gina en un frame, como se ha
mostrado en el ejemplo anterior, siguen visibles los otros
frames.
Pero hay veces en la que quisieramos que la p�gina cargada ocupe toda la
pantalla, por ejemplo cuando hacemos un link a una p�gina de otro web. Para
ello s�lo hay que indicar target="_parent"
De esta forma se le dice al navegador que el destino es la ventana completa.
5.- Crear una
referencia en la p�gina
Nota: Hay que tener en cuenta que se
diferencian las may�sculas de las min�sculas.
<a name="posicion1">Esta es la posicion 1</a>
6.- Ir a un
lugar dentro de la misma p�gina
Nota: Hay que tener en cuenta que se
diferencian las may�sculas de las min�sculas.
<a href="#posicion1">Ir a la posicion1</a>
7.- Ir a un
lugar determinado de otra p�gina
Nota: Hay que tener en cuenta que se
diferencian las may�sculas de las min�sculas.
<a href="otra_pagina.htm#posicion1">Ir a la posicion1 de
otra_pagina</a>
8.- Ir a otra
localizaci�n de Internet (otro URL)
<a href="http://www.elguille.info/">P�gina personal del Guille</a>
9.- Conexi�n
para que envien un mensaje
<a href="mailto:[email protected]">Enviame un mensaje</a>
10.- Cargar una
p�gina (o ir a otro sitio) al pulsar en una imagen
Insertar una imagen y hacer referencia a la
p�gina a la que queremos ir:
<a href="pagina_destino.htm">
<img src="imagen.tipo">
</a>
Por supuesto en lugar de otra p�gina podemos incluir un "salto" en la misma pagina (ver el truco 6), ir a una posici�n determinada dentro de otra p�gina, (ver el truco 7), ir a otra localizaci�n poniendo la direcci�n del web (ver el truco 8) y hacer que envien un "mail", (ver el truco 9)
11.- Tomar
partes de una cadena (JavaScript y VBScript)
Para tomar una parte de una cadena,
en JavaScript: cadena.substring(inicio,final+1)
Nota: hay que tener en cuenta que empieza contando por 0 y en el �ltimo
caracter a tomar, se debe indicar la posici�n siguiente al �ltimo caracter que
se quiere incluir.
en VBScript: Mid$(cadena,
inicio, cantidad)
EjemploJavaScript:
<SCRIPT Language="JavaScript">
<!--
var cadena="Hola Mundo"
//Las 3 primeras letras: Hol
primeras3letras=cadena.substring(0,3)
//De la 2� a la 6�: ola M
de2a6=cadena.substring(1,6)
//De la 9 a la 10 (en este ejemplo las 2 �ltimas): do
de9a10=cadena.substring(8,10)
//-->
</SCRIPT>
Ejemplo VBScript:
<SCRIPT Language="VBScript">
<!--
cadena="Hola Mundo"
'Las 3 primeras letras: Hol
primeras3letras=left$(cadena1,3)
'o tambi�n:
primeras3letras=mid$(cadena1,1,3)
'De la 3� a la 7�: la Mu
de3a7=mid$(cadena,3,5)
'De la 9 a la 10 (en este ejemplo las 2 �ltimas): do
de9a10=mid$(cadena,9,2)
'o tambi�n (porque son las dos �ltimas)
de9a10=right$(cadena,2)
-->
</SCRIPT>
12.- Cambiar el
contenido de una p�gina cada "x" segundos
O mejor dicho, cargar otra p�gina despu�s de
"x" segundos.
Este comando debe estar en el bloque <HEAD>...</HEAD>
<HEAD>
<!-- otras cosas -->
<META http-equiv="refresh" content="segundos;
url=siguiente_pagina.htm">
<!--y algunas mas -->
</HEAD>
13.- Usar
listas desplegables (ComboBox en VB)
Forma de uso:
<SELECT NAME="nombre_de_la_lista"
onChange="funci�n()">
<option>Opci�n 1</option>
<option>Opci�n 2</option>
</SELECT>
Ejemplos de listas desplegables
Son dos ejemplos de listas: una con una serie
de fechas y al seleccionar una se mostrar� una alerta/aviso; otra con dos
listas que se combinan para mostrar los datos seleccionados...
A lo mejor no son �tiles, pero como ejemplos valen.
Carga la p�gina de ejemplos de listas
desplegables en formato comprimido: ej_cbo1.zip (2.347 bytes)
14.- Creaci�n
de Formularios
Bueno, ya est� el ejemplo de un formulario. Si quieres verlo ahora, pulsa aqu�: Formulario de prueba
Hay campos de todos los tipos: Texto, Options, Checkbox, Listas desplegables y botones.
S�lo funciona con Netscape,
con Internet Explorer, seg�n me han dicho, es el servidor el que debe
proporcionarte "los medios" para que te llegue el contenido del
formulario.
Si pulsas en IE, te saldr� un mensaje nuevo de correo. Si alguien sabe c�mo
usarlo con Internet Explorer, adem�s de lo referido a que el servidor te
proporcione un programa (CGI). Porque no s� si por medio de c�digo con
VBScript se podr� hacer.
15.- Mapear una
imagen, (crear hot-spots)
Estaba yo trasteando una imagen con el Editor
de FrontPage, y se me ocurre darle al rect�ngulo de las herramientas para las
imagenes, y de pronto... me pregunta por una direcci�n URL y dije
"co�o!"...
Imaginaros mi sorpresa, yo cre�a que era simplemente una
"herramienta" para crear rect�ngulos y sin embargo me encuentro que
es para crear "hot-spots"
Total que cojo la imagen de Visual Basic y le a�ado los apartados y me pongo a
crear enlaces y todo el rollo... Lo pruebo... y no funcionan todos! (cag�enla)
Resumen si quieres tener "hot-spots" en una imagen, puedes hacerlo con
FrontPage, pero despu�s lo modificas manualmente fuera del editor creando todos
los enlaces necesarios, me explico:
El FrontPage gener� lo siguiente al crear tres enlaces:
<p><font color="#000080" size="6"><strong><!--webbot bot="ImageMap" startspan rectangle=" (4,6) (68, 25) tip_vb.zip##frmContGuiller" rectangle=" (71,6) (169, 25) vb_prg.htm##frmContGuiller" rectangle=" (173,6) (256, 25) vb_con.htm##frmContGuiller" src="vb_menu.gif" border="0" width="442" height="107" --> <MAP NAME="FrontPageMap0"> <AREA SHAPE="RECT" COORDS="173, 6, 256, 25" HREF="vb_con.htm" TARGET="frmContGuiller"> </MAP> <img src="vb_menu.gif" border="0" width="442" height="107" usemap="#FrontPageMap0"><!--webbot bot="ImageMap" i-checksum="27051" endspan --><br>
Para que funcionase bien con los tres enlaces, indicados en los "campos" rectangle, hay que a�adir despu�s de <MAP...> tantos <AREA...> como "hot-sposts" tengamos, para mi caso los siguientes:
<AREA SHAPE="RECT" COORDS="4, 6, 68, 25" HREF="vb_tip.htm" TARGET="frmContGuiller"> <AREA SHAPE="RECT" COORDS="71, 6, 169, 25" HREF="vb_prg.htm" TARGET="frmContGuiller">
Y todo funcionando como debe. S�lo que al
cargar de nuevo la p�gina en el FrontPage, te lo vuelve a
"desbaratar", pero una vez que le has cogido el truco y sabes c�mo
va... pues a usar un editor de texto.
Nota: Todos los <AREA...> deben estar entre
<MAP...> y </MAP>, s� que es obvio, pero...
Otra nota: El i-checksum="..." los puedes
quitar.
16.- Detectar
que un ComboBox ha cambiado
Esto ha surgido al "echarle" un cable
a No�l Danjou en un programa de conversiones que tiene en su p�gina personal.
Despu�s de probar con algunos bugs que ten�a, s�lo qued� por modificar el
que VBScript detectara que un ComboBox ha cambiado, el OnChange no funcionaba,
prob� con OnClick y tampoco... as� que No�l cambi� OnChange por Change y
�ya est� funcionando!
Se�ores de Microsoft, a ver si saben lo que est�n "vendiendo" y nos
informan correctamente, se supone que OnChange deber�a funcionar como se
espera, pero no!. Igual que OnClick tampoco funciona, �ser� Click, como en el
Visual Basic de "toda la vida"?
17.- Cambiar en
el c�digo HTML el estilo de un Combo
Esto tambi�n ha surgido al "echarle"
un cable a No�l Danjou en un programa de conversiones que tiene en su p�gina
personal.
El estilo de un ComboBox no se puede cambiar con FrontPage, da error. As� que o
bien lo haces con el ActiveX Control Pad, o bien lo haces "a mano"
Para que sea un DropDown Combo, el DisplayStyle debe ser igual a 3
<PARAM NAME="DisplayStyle" VALUE="3">
Para que sea un DropDown List, poner a 7 el valor en DisplayStyle.
<PARAM NAME="DisplayStyle" VALUE="7">
18.-
Diferencias en el manejo de .location
entre MSIE y Netscape
A ver si se ponen de acuerdo estos se�ores...
Despu�s de tirarme toda la noche confeccionando un nuevo "servicio de
informaci�n", para la empresa en la que trabajo, con p�ginas para
noticias a nivel nacional, regional (por ahora de Andaluc�a) y provincial (por
ahora s�lo de M�laga) en castellano e ingl�s, (lo cuento para hacer un poco
de "publicidad encubierta"); me pongo a probarlo y todo va bien.
Hago modificaciones para que al seleccionar el d�a de una lista desplegable
"funcione como debe", y va bien.
A�ado iconos con las t�picas banderitas para la selecci�n del idioma: y todo
va bien.
Despu�s de echarme "pa tras" y ver que todo va bien, me viene a la
idea de crear directorios diferentes, por si la cosa crece; bueno, no hay
problemas, creo los directorios y "san seacab�".
Dicho y hecho: creo los directorios, cambio los links, (a mano, porque no uso el
FrontPage Explorer, sino s�lo el Editor); cambio la forma en que la rutina de
"localizaci�n" de la p�gina activa debe funcionar: no lo
pruebo, porque se supone que s�lo hay que cambiar la referencia de los
directorios, (supon�a mal).
En fin, despu�s de un par de horas "creando" cosillas
y sin probarlas, me pongo a probar el tema con el Internet
Explorer: cuando cambio de d�a o pulso la imagen del idioma: no funciona!
(cag�enla...), miro y remiro el c�digo, no hay fallo de variables mal
asignadas...
Bueno, quitar� la referencia que hago al directorio superior: Ahora funciona!
(menos mal).
Hago 500.000 comprobaciones con p�ginas de prueba: �todo va bien!
En fin, probemos con Netscape: NO FUNCIONA!, (buaaa....), la
referencia a la p�gina indicada no es correcta. Pongo de nuevo el
"path" al directorio superior, ahora funciona.
Probemos de nuevo con MSIE: otra vez no funciona!
Soluci�n: usar una referencia
para MSIE y otra para Netscape.
Este es el c�digo final que tuve que usar para solucionar el
"problemilla":
...
fichero_noticias=idioma+eldia.substring(5,7)+sMes+eldia.substring(12,14)
fichero_noticias=fichero_noticias+".htm"
if (navigator.userAgent.indexOf("MSIE")==-1) //Netscape
parent.frmHoy.location="../"+fichero_noticias
else //MSIE
parent.frmHoy.location=fichero_noticias
...
Tengo que decir que en indice.htm, en
el frame frmHoy se carga con:
<frame src="../hoy.htm" name="frmHoy" noresize>
y desde hoy.htm, se carga el fichero actual de las noticias:
<body ... onload="location.href='es_09Ene97.htm'">
lo hago as� porque hoy.htm es una especie de comod�n al que se accede
desde distintos directorios.
En fin, espero que no te haya aburrido con todo esto y te sirva para
"controlar los fallos".
Nota: Las p�ginas que me han traido de cabeza
est�n, provisionalmente, en:
http://www.wcostasol.es/comsur/noticias/nacional/indice_nf.htm o
http://costasol.inf/comsur/noticias/nacional/indice_nf.htm, si entras por
Infov�a.
Nota: Estos links no funcionan, si necesitas ver el ejemplo, me lo dices y ya veremos lo que hago... je, je.
19.-
Informaci�n adicional sobre la p�gina
Si te has fijado en el c�digo HTML de una p�gina, habr�s visto, dentro de <head>... </head> algo parecido a esto:
<meta name="GENERATOR" content="Microsoft FrontPage 2.0"> <title>T�tulo de la p�gina</title>
Pues tambi�n puedes incluir informaci�n
adicional sobre la p�gina, algunos "localizadores" la utilizan.
Por ejemplo, el autor, las palabras claves, la descripci�n, etc.
<meta name="Author" content="Guillermo Som - el Guille"> <meta name="Description" content="Trucos y listados sobre Visual Basic, HTML..."> <meta name="KeyWords" content="Visual Basic, VB, VBScript, JavaScript, JScript, tips">
20.- Asignar
los colores a los links
Para cambiar los colores de los links de una p�gina, usa las atributos de HTML: LINK, VLINK y ALINK
Estos atributos permiten controlar el color de los hiperv�culos LINK para el color normal, VLINK para los links visitados, y ALINK para los activos. Los colores por defecto son: LINK=azul (#0000FF), VLINK=p�rpura (#400040), y ALINK=rojo (#FF0000). Para cambiar estos colores, se hace de la misma forma que BGCOLOR y TEXT: <BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
Si quieres hacerlos invisibles, asignales el mismo color que el fondo de la p�gina:
<BODY BGCOLOR="#A6CAF0" LINK="#A6CAF0" VLINK="#A6CAF0" ALINK="#A6CAF0">
21.- A�adir el
subject, al hacer el mailto (2/Feb)
Pues otra cosa m�s para a�adir a tus trucos
de HTML.
Ya sabes que para enviar un mensaje, tienes que incluir mailto:direcci�n@correo
(no pulses ya que no va a ning�n lado)
Bien, pues si a�ades al final de la direcci�n de correo ?subject=el subject,
�ste aparecer� de forma autom�tica en ese campo, as� de f�cil.
En este ejemplo, las sentencias HTML, quedar�an as�:
Env�a un mensaje con el subject: Prueba de subject a [email protected]
Env�a un mensaje con el subject: Prueba de
subject a <a
href="mailto:[email protected]?subject=Prueba
de subject">[email protected]</a><br>
22.- Saber el
tama�o de la ventana del Explorador (14/Feb)
Este "truco" s�lo funciona con el
Internet Explorer
Y es para saber el tama�o de la ventana, del explorador, no la resoluci�n real
de la pantalla.
El siguiente "listado" es para mostrar la informaci�n del tama�o y
avisar si es menor de 700x500
El poner este tama�o, en lugar de 800x600, es porque la ventana del navegador,
ser� siempre menor que la resoluci�n total de la pantalla.
Para probarlo, tienes que poner lo siguiente en <BODY...
onLoad="mostrarInfo()">
<script language="JavaScript">
<!--
function mostrarInfo(){
var browserType=navigator.userAgent;
if (browserType.indexOf("MSIE")==-1)
alert ("\n\nEstas p�ginas est�n optimizadas para una resoluci�n de 800x600\n");
else
CheckRes();
}
//-->
</script>
<script language="VBScript">
'Esto s�lo funciona en el Internet Explorer
Sub CheckRes()
dim ScreenHeight
dim ScreenWidth
dim msg
ScreenHeight=Explorer.Height
ScreenWidth=Explorer.Width
if ScreenWidth<700 or ScreenHeight<500 then
msg= "Estas p�ginas est�n optimizadas para una resoluci�n de 800x600" & Chr(13)
'-------------------------------------------------------------
'Quitar el comentario al msgbox, si has comentado el que sigue
'despu�s del end if
'-------------------------------------------------------------
'msgbox msg & "El tama�o de la ventana del Explorador es: " & ScreenWidth & "x" & ScreenHeight
end if
'Comentar este mensaje para que no lo muestre siempre
msgbox msg & "El tama�o de la ventana del Explorador es: " & ScreenWidth & "x" & ScreenHeight
end sub
</script>
23.- Tomar una
acci�n al seleccionar una opci�n de una lista desplegable (22/Feb)
El ejemplo este, sirve para seleccionar de una
lista desplegable una de las opciones al pulsar en un bot�n.
Por ejemplo: Tenemos una lista con varias opciones y al pulsar un bot�n, ir a
una localizaci�n (URL) de Internet.
El c�digo ser�a:
<Html> <head> <meta name="Author" content="Guillermo Som -el Guille"> <title>Ejemplo de lista y bot�n</title> </head> <body bgcolor="#FFFFFF"> <H2>Prueba de lista desplegable</H2>
<p> </p>
<p align="center"> </p>
<form method="POST" name="Test">
<p><strong>Selecciona la direcci�n a la que quieres ir y pulsa el bot�n</strong></p>
<p><select name="D1" size="1">
<option value="http://www.wcostasol.es/guiller/"> P�gina del Guille </option>
<option value="http://www.wcostasol.es/vbonline/"> VB Online en Castellano </option>
<option value="http://www.wcostasol.es/comsur/"> Comunicaciones Sur </option>
<option value="http://www.microsoft.com/"> Microsoft </option>
</select>
<input type="button" name="B1" value=" Go "
onclick="location=Test.D1.options[Test.D1.selectedIndex].value"> </p>
</form>
<p> </p>
</body>
</html>
Nota: F�jate que las
direcciones (URL) acaban con /, sin ellas me ha dado error de sitio no
encontrado.
Si quieres probarla, pulsa aqu�.
24.- Saber el
tama�o de la ventana con Netscape (25/Feb)
Este c�digo me lo ha enviado Christopher Barry. Seguramente s�lo funcionar� con la versi�n 3 o superior, pero...
if(navigator.javaEnabled()){
var toolkit = java.awt.Toolkit.getDefaultToolkit();
var screen_size = toolkit.getScreenSize();
wz = screen_size.width;
hz = screen_size.height;
}
25.- Una
funci�n para crear un Array (6/Abr)
Este c�digo es para crear un Array y poder usarlo en tus p�ginas para lo que quieras (o necesites)
//Crear un Array de objetos
function MakeArray(n){
this.length=n;
for(var i=0; i<n; i++){
this[i]=0
}
return this
}
Para usarlo:
DiasSemana=new MakeArray(6); DiasSemana[0]="Domingo, " DiasSemana[1]="Lunes, " DiasSemana[2]="Martes, " DiasSemana[3]="Mi�rcoles, " DiasSemana[4]="Jueves, " DiasSemana[5]="Viernes, " DiasSemana[6]="S�bado, "
Una vez asignado los valores, puedes usarlo de esta forma:
var now = new Date() var fecha = DiasSemana[now.getDay()]
26.- Mostrar la
fecha actual (formateada con el nombre del d�a de la semana y el nombre del
mes) (6/Abr)
El c�digo de ejemplo lo puedes encontrar en la p�gina de los programas.
27.- Mostrar la
fecha actual usando JavaScript y VBScript (18/Abr)
Esto es lo mismo que lo del ejemplo anterior,
pero simplificando la cosa y sin usar ninguna funci�n extra.
Hay dos formas de hacerlo: con JavaScript y con VBScript. Si usas este �ltimo
lenguaje, que sepas que seguramente no servir� para el Netscape, m�s bien
s�lo para el Internet Explorer.
El c�digo JavaScript (JScript)
<Script language ="JavaScript">
<!--
var now = new Date()
var dia = now.getDay()
var mes = now.getMonth()
var fecha
//El d�a de la semana
if(dia==0){
fecha="Domingo, ";
}else if(dia==1){
fecha="Lunes, ";
}else if(dia==2){
fecha="Martes, ";
}else if(dia==3){
fecha="Mi�rcoles, ";
}else if(dia==4){
fecha="Jueves, ";
}else if(dia==5){
fecha="Viernes, ";
}else{
fecha="S�bado, ";
}
fecha = fecha + now.getDate() + " de "
//El nombre del mes
if(mes==0){
fecha=fecha + "Enero"
}else if(mes==1){
fecha=fecha + "Febrero"
}else if(mes==2){
fecha=fecha + "Marzo"
}else if(mes==3){
fecha=fecha + "Abril"
}else if(mes==4){
fecha=fecha + "Mayo"
}else if(mes==5){
fecha=fecha + "Junio"
}else if(mes==6){
fecha=fecha + "Julio"
}else if(mes==7){
fecha=fecha + "Agosto"
}else if(mes==8){
fecha=fecha + "Septiembre"
}else if(mes==9){
fecha=fecha + "Octubre"
}else if(mes==10){
fecha=fecha + "Noviembre"
}else{
fecha=fecha + "Diciembre"
}
fecha = fecha + " del " + now.getYear()
document.write(fecha);
//-->
</Script>
El c�digo VBScript:
<SCRIPT LANGUAGE="VBScript">
<!--
d=weekday(date)
if d = 1 then
today="Domingo"
elseif d = 2 then
today="Lunes"
elseif d = 3 then
today="Martes"
elseif d = 4 then
today="Miercoles"
elseif d = 5 then
today="Jueves"
elseif d = 6 then
today="Viernes"
elseif d = 7 then
today="S�bado"
end if
m=month(date)
if m=1 then
mon="Enero"
elseif m=2 then
mon="Febrero"
elseif m=3 then
mon="Marzo"
elseif m=4 then
mon="Abril"
elseif m=5 then
mon="Mayo"
elseif m=6 then
mon="Junio"
elseif m=7 then
mon="Julio"
elseif m=8 then
mon="Agosto"
elseif m=9 then
mon="Septiembre"
elseif m=10 then
mon="Octubre"
elseif m=11 then
mon="Noviembre"
elseif m=12 then
mon="Diciembre"
end if
Document.Write today & ", " & day(now) & " " & mon
-->
</SCRIPT>
