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:mensaje@elguille.info">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 guiller@wcostasol.es
Envía un mensaje con el subject: Prueba de
subject a <a
href="mailto:guiller@wcostasol.es?subject=Prueba
de subject">guiller@wcostasol.es</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>
