Uso de los Frames (II)
* adaptar nuestra pagina a la resolución del navegador.
Imaginemos que hemos creado una pagina web para una resolución de 800x600 píxeles. Cuando la visualice un visitante con una resolución de 640x480 no pasara nada, sólo que necesitara usar las barras de desplazamiento para poder visualizarla entera. Pero si nuestro visitante esta utilizando una resolución de 1024x768 o superior nuestra pagina, si la hemos definido con unidades absolutas, le quedara situada en la parte superior derecha de la ventana del navegador, quedando una gran parte de la pantalla vacía.
Este efecto es indeseable, y podemos corregirlo usando una función de JavaScript que detecte la resolución que usa el visitante. Si esta es de 640x860 ó de 800x600 le redireccionara a nuestra pagina original, pero si la resolución es de 1024x768 por ejemplo, le enviara a una pagina con frames en la que en la ventana central estara cargada nuestra pagina original. Con esto la pagina quedara centrada en la pantalla. Hay otras formas de conseguir esto, pero esta con frames es totalmente viable.
Primero necesitamos una pagina index.html, que es la que se va a encragar de detectar la resolución y de redireccionar adecuadamente:
<html>
<SCRIPT language="JavaScript" type="text/javascript">
<!--
var width = screen.width;
var res =(((!(640-width))*1)+((!(800-width))*2)+((!(1024-width))*3)+
((!(1152-width))*4)+((!(1280-width))*5)+((!(1600-width))*6));
if(!(res)) res = 1;if (res=='1') {window.location='800.html'}
if (res=='2') {window.location=800.html}
if (res=='3') {window.location='1024.html'}
if (res!='1' && res!='2' && res!='3') {window.location='1024.html'}
//-->
</SCRIPT>
</head>
<body>
</body>
</html>
y ahora creamos tres paginas: 800.html, que va a ser nuestra pagina normal, 1024.html, que va a ser una pagina con frames:
<html>
<head>
</head>
<frameset cols="300,*">
<frame name="lateral" src="nada.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="0">
<frameset rows="75,*">
<frame name="superior" src="nada.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="0">
<frame name="ventana" src="800.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
</frameset>
</frameset>
</html>
y nada.html, que va a ser una pagina vacia. La única condición es que tenga el mismo
color de fondo que nuestra pagina principal 800.html.
podemos comprobar una aproximación visual del efecto conseguido con esto:
ver resultado a 800x600.
ver resultado a 1024x768.
Es decir, hemos creado una especie de "contenedor" para nuestra pagina principal a base de frames, que sólo se activara en el caso de que la resolución del navegador sea de 1024 o superior, en cuyo caso nos la situara en medio de la pantalla. Este efecto de puede conseguir de una forma mejor con Javascript puro, posicionando la pagina en la ventana según la resolución, pero también es viable hacerlo con frames, como se ha explicado.
* Frames ocultos.
Una de las posibilidades que tenemos a la hora de usar trabajar con frames es el uso
de frames ocultos, es decir frames que no se van a ver en pantalla. Esto es facil de conseguir, ya que basta
definir un frame horizontal o vertical que quede fuera de los límites de la pantalla.
así por ejemplo podemos crear un frame horizontal oculto mediante:
<html>
<head>
</head>
<frameset rows="100%,*">
<frame name="principal" src="a.html" marginwidth="10" marginheight="10" frameborder="0">
<frame frame name="oculto" src="b.html" scrolling="no" frameborder="0">
<frameset>
</html>
y queda oculto porque por propia definición del FRaMESET el primer frame ocupara el 100%
del tamaño de la ventana.
Lo mismo podíamos heber hecho con un frame vertical, e incluso podemos definir varios
frames ocultos.
Una vez construido este frame escondido, lo podemos usar para diferentes fines:
1) Ocultar una clave de acceso: si queremos disponer en nuestra pagina de un control de acceso mediante claves y no queremos procesar estas en un programa en el servidor (que es lo aconsejable, por seguridad), podemos esconder las claves correctas de acceso en el frame oculto, y cuando el visitante introduzca las claves en los campos correspondientes de la pagina principal, hacer una comprobación mediante JavaScript con las claves que tenemos escondidas.
2) Ocultar objetos o funciones de JavaScript: un ejemplo típico de este método es la creación de menús de arbol, incluyendo en el frame aculto la función de JavaScript que "dibujara" el menú en un frame lateral visto, de tal forma que si el visitante observa el código fuente de este, sólo vera código HTML puro, pero no el de la función que lo crea.
3) almacenamiento de variables de sesión: a veces puede interesarnos ir almacenando algunas variables y valores a lo largo de la visita de una persona a nuestras paginas. Por ejeplo, podemos ir creando un perfil de usuario en unas pocas paginas iniciales, para luego dirigir a nuestro visitante a una zona en concreto de nustro sitio web. Para ello, podemos crear un frame oculto e ir " escribiendo " en él mediante JavaScript las variables que nos interesen, pudiendo recuperar su valor cuando lo necesitemos. Esto lo hacen muchas aplicaciones de todo tipo, si bien para programación web se suelen utilizar otras técnicas basadas en el almacenamiento de las variables en el servidor o en el equipo cliente mediante cookies, ya que si lo hacemos por el método explicado en este apartado en cuanto el cliente refresque la pagina perderemos el valor de las variables, a no ser que le indiquemos medianto código de Script qué frames debera recargar en esos casos, aunque de todas formas esta solución es complicada.
*Ocultar el código fuente de la pagina.
Si queremos ocultar el código de nuestra pagina (por favor, deja el código a la vista y claro, para que otras personas puedan aprender de tí), siempre podemos crear un frame u´nico que ocupe el 100% de la pantalla, y cargar en él la pagina a la que queremos ocultarle el código. El visitante, al ir al menú VER > CÓDIGO FUENTE sólo visualizara el código de creación del frame, no el de la pagina que contiene. Pero ¿y si el visitante selecciona la opción ver código fuente mediante el botón derecho del ratón?. Rn ese caso todo nuestro esfurzo habra sido en vano. aunque podemos entonces crear una función JavaScript que desactive el botón derecho, con lo que la protección de nuestro código sera total. ¿O no es así?...¡¡NO!!, ya que siempre que cargamos una pagina de Internet, para poder nuestro navegador visualizarla lo primero que hace es cargarla en la caché del navegador. Por lo tanto, si queremos ver el código fuente o salvar una imagen o cualquier elemento de la pagina que ya haya sido visualizado en el navegador, lo único que tenemos que hacer es irnos al directorio WIDOWS o WINNT de nuestro odenador y buscar en la carpeta archivos temporales de Internet, y allí estaran guardados todos los elementos de las paginas que hayamos visualizado, incluyendo las propias paginas con su código fuente.