Algunos trucos

Aquí te presento algunos trucos básicos.

1. Distribución de programas desde una pagina Web

Si queremos poner a disposición algún 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 demás 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>aquí</A>

Al pulsar en el enlace el navegador te dará la opción de ejecutarlo o guardarlo.

2. Hacer saltar una ventana con un texto

Al poner el puntero del ratón 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 continuación:

onMouseOver="window.alert('Aquí 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 así. 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 conseguirás un efecto de un cuadro con marco y todo.

Es posible poner varias imágenes, una en cada celda, siempre usando el parámetro BACKGROUND pero en ese caso las imágenes tendrán 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 gráficos de barras

Graficos
fig 1 fig 2

Para crear un grafico simple solo hay que hacer una tabla poniéndole el parámetro de altura en pixeles (a modo de escala total del grafico) y luego una serie de celdas con TD cada una una con una imagen dimensionadas 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 según 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 después de </Title> y antes de </Head>

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

También puedes hacer que una pagina dinámica se refresque periódicamente poniendo en URL la misma pagina.

6. Botón de envío de un formulario con una imagen

En un formulario Form se puede sustituir el botón de envío estándar 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 botón estándar de un formulario, sin embargo no se puede sustituir por una imagen el botón de borrado.

7. Validar un formulario

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

<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. Menú de direcciones

Se puede usar un formulario para poner un menú con una serie de direcciones y al elegir una de ellas y pulsar el botón nos llevara a ella.

Ejemplo:

Atención 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 actúa 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 disposición en la web. A continuacion puse un ejemplo que lo tome de una web que tiene a disposición 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 comunicación con otras personas en tiempo real por intermedio de la red.

Esto es una de las características principales de los servicios on-line (como AOL, Compuserve, MSN, etc.) para sus suscriptores. Internet tiene su propia versión, 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 establecer la conexión con el servidor de CHAT y con el canal correspondiente, poniéndole en contacto directo con otros usuarios que estén conectados en ese momento en ese mismo canal.

Existen varios servidores comerciales que suministran los Applets y que se encargan de la gestión 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 periódicamente anuncios dentro de la ventana del CHAT) pero también hay versiones comerciales, con un mayor control del canal.

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

El procedimiento suele ser análogo 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.

Después de enviar estos datos, se recibe el código HTML y el Applet a tu dirección de correo o directamente en el momento de la inscripción como en el caso de ParaChat.

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

Cuando alguien cargue nuestra pagina, recibirá el Applet y se podrá conectar con nosotros y otros usuarios que están conectados en ese momento. Hay que tener en cuenta que el canal estará disponible de manera permanente, por lo que es conveniente indicar las ocasiones en las que estaremos presentes en el canal.

12. Documentos dinámicos

Cuando queremos mostrar documentos dinámicos, 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 múltiples y continuas.

12.1 Server push - Servidor empuja

El servidor envía la información, el navegador cliente muestra dicha información pero deja la conexión abierta, de manera que cuando el servidor quiera envía mas información que también 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 envía la información, el navegador cliente muestra dicha información y envía como respuesta a la cabecera un pedido que dice recargar la información en 5 segundos o carga otro URL en 10 segundos. Después 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, permanecerá a la vista durante n segundos y luego saltara automáticamente 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, después de 10 segundos se cargara automáticamente el documento DOS y después de 10 segundos mas se cargara el TRES y después de 10 segundos el UNO y así de forma infinita hasta que pares y cambies manualmente la dirección 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 podría dirigirse.

También es posible poner 0 segundos lo que ocasiona que la pagina sea recargada tan pronto como le sea posible, incluso antes de que la pagina sea completamente presentada.

También es posible retornar el encabezado como parte de la respuesta de una dirección, de modo que un documento podría indicar anda a tal URL ahora y en 10 segundos a esta otro URL. Lo que podría 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 conexión no es necesaria para cada porción de información y el cliente al no tener la información no sabrá en que momento se debe actualizar, por lo que su decisión de actualizar puede ser errada y justo en ese momento no hay nueva información.

Otra consideración es que para el servidor es mas difícil manejar esto ya que debe considerar cada nueva conexión 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 conversación SSI siempre empieza con esto.
<tag>
Es uno de los siguientes 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 los apuntes menual de JavaScript