Sonido
CSS
Dreamweaver
Ridiculeces
Artículos
Site Check
JavaScript


 


Aviso:
Me he trasladado a:
http://www.tecnorama.org
(con algunos de estos contenidos y otros nuevos)

¿Qué $%&$% es "SSI"?

SSI son la iniciales de "SERVER SIDE INCLUDE" (incluir en el lado servidor). Es una técnica que se utiliza bastante en aquellos sitios en los que los contenidos pueden variar a menudo, pero se desea mantener la misma apariencia siempre. Dreamweaver nos ofrece las plantillas para ello, pero este sistema tiene alguna que otra ventaja.

Antes de todo: necesitaremos para hacer las pruebas tener instalado un servidor en nuestro ordenador (el Personal web server de Microsoft nos sirve, Está en el CD de windos 98 en la carpeta "PWS"), o bien que el servidor donde alojemos la página lo soporte (lo más posible es que sí lo soporte). En mi caso Tripod me permite utilizarlo, por lo que el ejemplo va a ser bastante fácil de ver y entender.

Bueno, hechas la presentaciones, Vamos con el supuesto del tutorial:

Hemos diseñado una página web que muestra las tarifas de una tienda que se dedica a alquilar equipos informáticos. No se va actualizar muy a menudo, así que utilizar una base de datos tampoco sería muy necesario. Preferirían poder editar ellos el contenido de la página, pero no son muy buenos con esto de las páginas y tampoco quieren complicarse. La idea sería crear un fichero que sólo tuviera (mas o menos) El contenido de las tablas de precios para que así sólo tuvieran que preocuparse de modificar un archivo de texto y no tener que nadar buscando por el código dónde tienen que cambiar el dato del precio y el modelo, como nuestro caso.

La página (el diseño es muy básico, pero podría ser mucho más complicado) sería algo como esto.

Fijaos en la extensión: No es .html, sino .shtml El cambio de extensión indica al servidor que tiene que hacer algo más con esa página antes de enviarla: Tiene que procesar su contenido porque tiene alguna instrucción que el servidor debe realizar antes (la que veremos en el tutorial)

Más cosas que se ven: Mirad el código fuente: Buscad una línea que pone:

<!-- Comienza archivo de texto-->

Bueno, pues desde esa línea hasta la linea:

<!--Fin de archivo de Texto-->

¡¡¡Ha sido el servidor el que ha escrito el código en la página!!!. Comparad el código entre esas 2 líneas con el de esta página (podéis hacer click con el botón d2recho y seleccionar "guardar destino como..." para ver el archivo tal y como se escribió.

Efectivamente: El servidor ha leido el archivo de texto "tarifas.txt" y lo ha incrustado en el código fuente de la página.

En este ejemplo hemos insertado una tabla, pero podría haber sido un archivo de texto, por ejemplo, o una barra de navegación que se repite por muchas páginas... Lo que se os ocurra.

Otra curiosidad ¿Os habéis fijado en que no hay nada sobre fuentes (colores, tamaño, tipo) en el archivo tarifas.txt. Es porque hemos declarado estilos para las etiquetas <H5> y <H6> dentro del archivo ssi.css. De esta manera hemos separado lo más posible el contenido de la apariencia ( y hemos dejado el archivo más claro para que alguien pueda modificarlo).

¿Crees que esto debe ser muy complicado?. Pues sólo depende de saber dónde colocar una línea de código en la página. Esta linea:

<!--#include virtual="tarifas.txt" -->

donde podemos cambiar tarifas.txt por la dirección al archivo (en nuestro ejemplo, tanto prueba.shtml como tarifas.txt están en el mismo directorio.

Por ejemplo, podemos crear una carpeta llamada "contenidos" e incluir en ella los archivos de texto (para ponérselo más fácil todavía al que los tiene que modificar). La llamada sería:

<!--#include virtual="contenidos/tarifas.txt" -->

ó:

<!--#include virtual="http://www.miservidor.com/contenidos/tarifas.txt" -->

Aviso para usuarios de Servidores Microsoft. En ocasiones el servidor no reconoce la palabra "virtual" . Entonces utilizaremos la palabra "file":

<!--#include file="contenidos/tarifas.txt" -->

Si no sabéis qué servidor tenéis, utilizad primero la opción con "virtual", aunque todo será cosa de ir probando (total, es una línea).

Bueno ¿Y por qué os cuento todo esto en la sección de Dreamweaver?. Porque Dreamweaver nos permite insertar directamente la línea y, lo que es mejor, previsualizar cómo quedará la página con el archivo insertado.

Recordad que el sistema no funcionará si hacéis doble click directamente sobre el archivo que hayáis creado porque (repito) es el servidor el que lo ejecuta.

Y ahora, el tutorial.