Algunos trucos

1. Distribucion de programas desde una pagina Web

Si queremos poner a disposicion algun archivo, es decir que lo queremos distribuir libremente, se puede poner un enlace a dicho archivo. Por supuesto, previamente hay que ponerlo en el servidor, junto con los demas elementos que forman la pagina y es conveniente que este en formato ZIP para reducir su tiempo de descarga.

Para conseguir el programa, pulsa <A HREF=programa.zip>aqui</A>

Al pulsar en el enlace el navegador te dara la opcion de ejecutarlo o guardarlo.

2. Hacer saltar una ventana con un texto

Al poner el puntero del raton sobre un enlace hacemos que salte una ventana de alerta con un texto.

Se puede hacer que aparezca el texto que queramos y ademas que permanezca fijo hasta que se ponga el puntero sobre otro enlace. Para ello, basta con introducir la clausula OnMouseOver en la etiqueta, como se muestra a continuacion:

onMouseOver="window.alert('Aqui el texto que se quiera');"

Ejemplo: PERUT

3. Poner un texto sobre una imagen

SE VENDE

Claro que pensaras que edite la imagen y puse esa frase, pero no fue asi. Se trata de una imagen de fondo en una tabla de una sola celda del tamaño de la imagen (esto es importante para que no se repita la imagen). En este caso en particular no le puse borde, pero si lo haces conseguiras un efecto de un cuadro con marco y todo.

Es posible poner varias imagenes, una en cada celda, siempre usando el parametro BACKGROUND pero en ese caso las imagenes tendran que ser TODAS del mismo tamaño para que no ocurra el mosaico, un efecto desastroso para este truco.

NOTA: Solo funciona en el Explorer. :-(

4. Crear simples graficos de barras

fig 1 fig 2

Para crear un grafico simple solo hay que hacer una tabla poniendole el parametro de altura en pixels (a modo de escala total del grafico) y luego una serie de celdas con TD cada una una con una imagen redimencionadas con un ancho fijo (Ej: WIDTH=12) y un alto proporcional a cada uno de los valores a graficar (Ej: HEIGHT=80). La imagen puede ser la que quieras, pero segun mis pruebas sale mejor si usas una imagen que sea un simple fondo de color o con algun degrade.

5. Mostrar una pagina unos pocos segundos

Para hacer que cierta pagina solo se muestre durante algunos segundos y luego por si sola salte a otra pagina.

Debes poner los siguiente en la cabecera del documento, es decir despues de </Title> y antes de </Head>

<Meta HTTP-EQUIV=Refresh CONTENT="10;URL=OtraPagina.htm" />

Tambien puedes hacer que una pagina dinamica se refresque periodicamente poniendo en URL la misma pagina.

6. Boton de envio de un formulario con una imagen

En un formulario Form se puede sustituir el boton de envio estandar por una imagen, poniendo:

<Input TYPE=image SRC=ejemplo.gif BORDER=0>

Cual es el mejor equipo del football Peruano:

Para enviar tu respuesta pateame...

Al pulsar la imagen se tiene el mismo efecto que con un boton estandar de un formulario, sin embargo no se puede sustituir por una imagen el boton de borrado.

7. Validar un formulario

Para validar un formulario se puede usar un pequeño programa en JavaSript asi:

<Script LANGUAGE=JavaScript>
	function Validar(form) {
		if (form.nombre.value == "") {
			alert("Por favor escribe tu nombre.");
			form.nombre.focus();
		}else{
			var nom = 'OK gracias ' + form.nombre.value + ', ya anote tu nombre.';
			alert(nom);
		}
		return false;
	};
</Script>

8. Menu de direcciones

Se puede usar un formulario para poner un menu con una serie de direcciones y al elegir una de ellas y pulsar el boton nos llevara a ella.

Ejemplo:

Atencion que debes usar URL completos aunque se trate de paginas locales o este truco no funcionara.

9. Acceso a una pagina por medio de una clave

Puede ocurrir que tengamos una pagina cuyo contenido no queremos que sea accesible por todo el mundo, sino solamente para ciertas personas. Para conseguirlo, podemos suministrar una clave con el que se pueda acceder a dicha pagina.

La manera mas rigurosa es hacerlo es por medio de un CGI, es decir, un programa especial que se coloca en el servidor y que actua de filtro. Pero una solucion alternativa es usar un programa en JavaScript.

<HTML>
<HEAD>
<TITLE>Ejemplo de acceso con clave</TITLE>
<SCRIPT LANGUAGE=JavaScript>
function Saltar(pal) {
   window.location=pal+".htm"
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>

Introduce la palabra clave para acceder a la pagina

<INPUT TYPE=password NAME=clave SIZE=25 VALUE="">
<INPUT TYPE=button VALUE=Acceder
onClick="Saltar(this.form.clave.value)">
</FORM>
</BODY>
</HTML>

Esto funciona de la siguiente manera: una vez escogida la clave (por ejemplo: chisito), debemos dar a la página de acceso restringido precisamente este nombre: chisito.htm. No hay que cambiar ni a&ntildadir nada en el script, para que te funcione.

10. Insertar un truco con JAVA en tu pagina Web

Aunque no sepas nada sobre como programar con JAVA, tu puedes usar APPLETS (aplicaciones en JAVA) creadas por otras personas y puestas a disposicion en la web. A continuacion puse un ejemplo que lo tome de una web que tiene a disposicion muchos APPLETS gratis.

11. Instalar un CHAT en tu pagina Web

En la jerga de las comunicaciones se llama CHAT (charla, en ingles) a la comunicacion con otras personas en tiempo real por intermedio de la red.

Esto es una de las caracteristicas principales de los servicios on-line (como AOL, Compuserve, MSN, etc.) para sus suscriptores. Internet tiene su propia version, abierta a todos, llamada IRC (Internet Relay Chat), pero hasta hace poco, solo se ha podido acceder a el por medio de programas cliente especiales, sabiendo de antemano a que redes de servidores conectarse y cuales canales pueden ser interesantes.

Pero todo ya cambio con la llegada del CHAT basado en paginas Web, que es una variante del IRC usando un Applet de JAVA. Cuando un usuario carga una pagina Web que contiene uno de estos CHATs, recibe el Applet y su propio navegador lo ejecuta. El Applet se encarga de establacer la conexion con el servidor de CHAT y con el canal correspondiente, poniendole en contacto directo con otros usuarios que esten conectados en ese momento en ese mismo canal.

Existen varios servidores comerciales que suministran los Applets y que se encargan de la gestion del CHAT y que ademas lo hacen de una manera gratuita, pues todo se costea gracias a la publicidad (mientras se usan estos canales, los usuarios reciben periodicamente anuncios dentro de la ventana del CHAT) pero tambien hay versiones comerciales, con un mayor control del canal.

Algunos de estos servidores son: ParaChat, Chat Planet y WebMasters.

El procedimiento suele ser analogo en todos: Hay que llenar un formulario con nuestros datos. Ademas hay que escoger un nombre para el canal e indicar el URL de nuestra pagina en donde se va a instalar el CHAT.

Despues de enviar estos datos, se recibe el codigo HTML y el Applet a tu direccion de correo o directamente en el momento de la inscripcion como en el caso de ParaChat.

Una vez que tengamos las lineas del codigo, las podemos incluir en un documento normal de HTML, con sus adornos correspondientes (fondo, texto explicativo, imagenes, etc.). Colocamos este documento HTML en nuestro servidor, junto sal Applet y ya esta listo para ser usado.

Cuando alguien cargue nuestra pagina, recibira el Applet y se podra conectar con nosotros y otros usuarios que estan conectados en ese momento. Hay que tener en cuenta que el canal estara disponible de manera permanente, por lo que es conveniente indicar las ocasiones en las que estaremos presentes en el canal.

12. Documentos dinamicos

Cuando queremos mostrar documentos dinamicos, es decir que cambian con el tiempo, como graficas de uso de servidor o las ventas de cierta empresa, es necesario una serie de conexiones multiples y continuas.

12.1 Server push - Servidor empuja

El servidor envia la informacion, el navegador cliente muestra dicha informacion pero deja la conexion abierta, de manera que cuando el servidor quiera envia mas informacion que tambien es mostrada por el navegador.

Normalmente esto se logra con un CGI, programas escritos en PERL, C++ o un Shell Script de UNIX como el siguiente que hace que el navegador muestre cada 5 segundos una nueva lista de los procesos que actualmente corren en el servidor.

#!/bin/sh
echo "HTTP/1.0 200" echo "Content-type: multipart/x-mixed-replace;boundary=---ThisRandomString---" echo "" echo "---ThisRandomString---" while true do echo "Content-type: text/html" echo "" echo "<H2>Processes on this machine updated every 5 seconds</h2>" echo "time: " date<P> echo "plaintext" ps -el echo "---ThisRandomString---" sleep 5 done

12.2 Client pull - Cliente jala

El servidor envia la informacion, el navegador cliente muestra dicha informacion y envia como respuesta a la cabecera un pedido que dice recargar la informacion en 5 segundos o carga otro URL en 10 segundos. Despues del tiempo determinado, si no hay la carga de una pagina nueva.

La sintaxis es la siguiente:

<META HTTP-EQUIV=Refresh CONTENT="n;URL=siguiente pagina">

una vez de que se cargue la pagina que contienen este etiqueta, permanecera a la vista durante n segundos y luego saltara automaticamente a otra pagina, cuyo URL hayamos especificado o el mismo si no especificamos ninguno.

Este etiqueta no se puede colocar en cualquier sitio del documento, debe ir situada en la cabecera entre los etiquetas </TITLE> y </HEAD>.

Ejemplo 1:
<HTML>
<HEAD>
<TITLE>Documento EJEMPLO 1</TITLE>
<META HTTP-EQUIV=Refresh CONTENT=1>
</HEAD>
<BODY>
<H5>Este es el EJEMPLO 1</H5>
</BODY>
</HTML>

Este documento sera recargado cada segundo y por ejemplo si en el servidor estamos cambiando continuamente cierta imagen cada vez que es cargada la pagina mostrara la nueva imagen en una especie de secuencia de animacion.

Ejemplo 2:
<HTML>
<HEAD>
<TITLE>Documento UNO</TITLE>
<META HTTP-EQUIV=Refresh CONTENT=10;URL=dos.htm>
</HEAD>
<BODY>
<H5>Este es el documento UNO</H5>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Documento DOS</TITLE>
<META HTTP-EQUIV=Refresh CONTENT=10;URL=tres.htm>
</HEAD>
<BODY>
<H5>Este es el documento DOS</H5>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Documento TRES</TITLE>
<META HTTP-EQUIV=Refresh CONTENT=10;URL=uno.htm>
</HEAD>
<BODY>
<H5>Este es el documento TRES</H5>
</BODY>
</HTML>

En este ejemplo si cargas el documento UNO, despues de 10 segundos se cargara automaticamente el documento DOS y despues de 10 segundos mas se cargara el TRES y despues de 10 segundos el UNO y asi de forma infinita hasta que pares y cambies manualmente la direccion a otro documento.

La mejor manera de salir de este loop infinito es poner un o mas enlaces a otros documentos fuera del loop a donde el usuario podria dirigirse.

Tambien es posible poner 0 segundos lo que ocaciona que la pagina sea recargada tan pronto como le sea posible, incluso antes de que la pagina sea completamente presentada.

Tambien es posible retornar el encabezado como parte de la respuesta de una redireccion, de modo que un documento podria indicar anda a tal URL ahora y en 10 segundos a esta otro URL. Lo que podria generar un RANDOM, como una ruleta.

Ejemplo 3

12.3. Consideraciones Server Push/Client Pull

Generalmente Server Push es mas eficiente que Client Pull, ya que una nueva conexion no es necesaria para cada porcion de informacion y el cliente al no tener la informacion no sabra en que momento se debe actualizar, por lo que su desicion de actualizar puede ser errada y justo en ese momento no hay nueva informacion.

Otra consideracion es que para el servidor es mas dificil manejar esto ya que debe considerar cada nueva conexion como que continua la misma, tratando de reconocer nuevamente a cada usuario.

13. SSI+ - Server Side Includes

Server side includes (SSI) applied to an HTML document, provide for interactive real-time features such as echoing current time, conditional execution based on logical comparisons, querying or updating a database, sending an email, etc., with no programming or CGI scripts. An SSI consists of a special sequence of characters (tokens) on an HTML page. As the page is sent from the HTTP server to the requesting client, the page is scanned by the server for these special tokens. When a token is found the server interprets the data in the token and performs an action based on the token data.

Server Side Includes are HTTP server specific. At present SSI+ has only been implemented in the WebQuest and WebQuest95 Web servers from Questar Microsystems, although the technology has been licensed by Microsoft and Netscape for inclusion in their servers and so should achieve greater prominence in the near future. You should check with the server maintainer to be sure that implementing SSI+ tokens in your HTML documents will have the desired effect.

El formato SSI es el siguiente:

<!--#"<tag><variable set> "-->"

donde:

<!--#
Es el identificar de apertura, una conversacion SSI siempre empieza con esto.
<tag>
Es uno de los siguinetes valores: echo, include, fsize, flastmod, exec, config, odbc, email, if, goto, label, break.
<variable set>
Es uno a set of one or more variables and their values. The values allowed here are dependent on the <tag> and are listed below each tag.
The format of a variable set is as follows: <variable name> "=" "" variable data "" <variable name2> "=" """ variable data2 """ <variable name n> "=" """ variable datan """.

"-->" is the closing identifier. A SSI token always ends with this.

SSI tokens may contain special tags (subtokens) which are dereferenced before evaluation of the SSI token takes place.

Subtokens maybe inserted any place in the SSI token. Subtokens are especially useful when forming if, odbc, email, and exec tokens that are based on HTML form data returned from a remote client. The format of a subtoken is as follows: "&&"<subtokendata>"&&" where: "&&" is a reserved character sequence defining the beginning and end of the subtoken. <subtokendata> is any value allowed in an echo token.

SSI Documents

An SSI+ document must have a file extension of '.SHT' or '.SHTM'. For the sake of efficiency the HTTP server will only scan those documents with the aforementioned extensions for SSI+ tokens.

Para mas trucos consulta el menual de JavaScript