Vous êtes sur la page 1sur 507

1.

2.
3.
4.
5.
6.
7.

Propsito del documento (en 1996)


Propsito del documento (varios aos despus)
Notas sobre el lenguaje
Cmo funciona esto?
Introduccin al HTML
Estructura de un documento HTML
Cabecera de un documento
<HEAD> <TITLE> <META>
8. Cuerpo de un documento
<BODY>
1. Tamaos y tipos de letra
<Hx> <FONT SIZE> <FONT FACE>
2. Texto de colores
<FONT COLOR>
3. Prrafos. Saltos de lnea. Bloques tabulados. Lnea
horizontal. Divisiones. Recuadros
<P> <BR> <BLOCKQUOTE> <HR> <DIV> <SPAN>
<FIELDSET>
4. Texto preformateado
<PRE> <SPACER> &nbsp
5. Negrita. Itlica. Centrado. Otros efectos
<B> <I> <CENTER> <ACRONYM> Otros
6. Lista desordenada. Lista ordenada. Men. Lista de
definicin. Directorio
<UL> <OL> <MENU> <DL> <DIR> <LI> <DT> <DD>
1.
Ejemplos de listas
7. Tablas
<TABLE> <TR> <TD> <TH>
1.
Ejemplos de tablas
8. Cdigos de colores
<FONT COLOR> <BODY BGCOLOR>
1. Combinacin de efectos de colores
<BODY BGCOLOR FGCOLOR TEXT LINK VLINK
ALINK>
9. Por qu hay que usar cdigos?
&#xxx; &alias;
1. Tabla de cdigos de caracteres

10.Creando enlaces (links)


<A>
11. Insertando imgenes
<IMG> <MAP>
1. Usar una imagen como fondo de pgina
<BODY BACKGROUND>
2. Usar una imagen como marca decorativa de una
lista
3. Grficos animados
12.Introduccin a los formularios
13.Cmo se escriben formularios?
<FORM> <INPUT> <SELECT> <TEXTAREA>
1. Ejemplos de formularios
2. Tabla de cdigos de conversin en formularios
14.Frames
<FRAMESET> <FRAME> <IFRAME>
15.Insertando objetos. Pginas multimedia
<EMBED> <OBJECT>
1.
El reproductor DEW Player
16.Bloques en movimiento
<MARQUEE>
17.Icono de favoritos
favicon.ico
18.Canales RSS
9. ltimas innovaciones del HTML.
1. Hojas de estilo
<STYLE>
1. Escribiendo hojas de estilo
2. Diseando un blog de ejemplo
3. Ejemplo de un blog con XHTML + CSS
2. El XHTML
1. Diferencias entre el HTML y XHTML
3. El HTML5
10.Introduccin a las aplicaciones de gestin
1. Cmo empezar?
2. Algo sobre seguridad
3. Qu es el ODBC?

4.
5.

6.

7.

1. Cmo se instala el ODBC de Accees?


2. Cmo se instala el ODBC de SQL Server?
Qu es el IDC?
Cmo se escriben ficheros para el IDC?
1. Ejemplo de aplicacin IDC (Ver todos los
registros)
2. Ejemplo de aplicacin IDC (Ver lista desplegable)
3. Ejemplo de aplicacin IDC (Insertar un registro)
Qu es el ASP?
1. Cmo se escribe el ASP?
2. Un modelo de aplicacin ASP
3. Nociones de ASP
4. Objetos de ASP
1. Application
2. ASPError
3. Session
4. Request
5. Response
6. Server
1. CreateObject("ADODB.Connection") CreateObject("ADODB.Recordset")
2. CreateObject("Scripting.FileSystemO
bject")
3. CreateObject("ADODB.Stream")
4. GetFile() - GetFolder()
7. ObjectContext
VBScript en el servidor. Procedimientos Sub y Function
1. Constantes y Variables
2. Operadores
3. Instrucciones
4. Funciones numricas
5. Funciones de texto
6. Funciones de fecha y hora
7. Otras funciones

8. VBScript en el navegador
1. Cmo se escriben los scripts para el IE?
2. Los objetos del Internet Explorer

1. Window
1. Location
2. Document
1. Link
2. Form
1. Controles HTML
3. Los eventos en general
9. Los lenguajes JavaScript y Java en el navegador
<SCRIPT> <APPLET>
1. Cmo se escriben los JavaScript?
2. Funciones.
3. Operadores
4. Instrucciones.
5. Los objetos y funciones de JavaScript.
6. Los objetos del navegador
1. window
7. Ejemplos de JavaScript.

Propsito de este documento


Algunas reflexiones
Estas pginas han sido creadas como parte del material para
impartir un breve cursillo sobre el mundo WWW, en particular, y
las herramientas para moverse por la INTERNET, en general, a un
grupo de estudiantes con pocos o nulos conocimientos informticos.
Al escribir esto comenc como suelen comenzar casi todos los
manuales que pueden encontrarse a lo largo y ancho del
ciberespacio, pero en mitad de una farragosa explicacin sobre el
ISO 8859-1, pens: "... bueno, esto en realidad no necesitan
saberlo... pero, todo sea por el rigor tcnico...". Y entonces hice una
prueba... Le di a leer lo que acababa de escribir a un "conejillo de
indias" que pasaba por all y que de esto slo conoca "eso que dicen
por la tele de las autopistas de la informacin...".

El resultado, como era de esperar, fue algo peor que desastroso. De


las cinco primeras lneas, slo comprendi una docena de palabras, y
de las restantes, sus preguntas daban pie a pensar que era algo ms
que un breve cursillo lo que hara falta para que saliese
medianamente enterado.
Y sin embargo, yo tengo claro que el HTML no es tan difcil. Pero,
cul es el objetivo real? Simple: saber lo necesario para poder
hacer una pgina personal en un servidor ya instalado.
Evidentemente, habr que partir de unos leves conocimientos de
"entorno": como haber manejado un procesador de textos en
Windows, saber guardar un fichero donde uno quiere y poco ms
que sea realmente imprescindible. Y esto es poco ms o menos lo
que saben la mayora de usuarios.
Haba que olvidar el "rigor tcnico", y escribir las cosas de forma
que no se requiriera ser analista de sistemas para comprenderlas, y
sobre todo, pensando qu es lo realmente necesario para poder
obtener resultados aceptables, que animen al estudiante en un
tiempo razonable pero sin dejar de lado los conocimientos de
altura, que sern demandados por el propio alumno a medida que
avanza.
Esto no es un manual de referencia. Ni siquiera es un manual. No
hay referencias tcnicas ni siglas, ni lenguaje tcnico... ni por
supuesto, est "todo" sobre el HTML. Es una serie de apuntes
donde no falta nada de lo que hace atractivo el HTML, con ejemplos
de los de cortar y pegar, como un recetario. Algunas cosas son, por
naturaleza, algo complejas, y puede que tengas que preguntar, es
inevitable. Aunque espero que sean las menos, y que despus de leer
esto, ya puedas trabajar sin ayuda.
Cmo utilizar ste documento
No te aconsejo que te "empolles" toda la gua. Solamente hojala.
Ahora se trata de que sepas lo que se puede hacer, no cmo se
puede hacer. Cuando te hayas dado un ligero bao de sabidura

HTML, piensa lo que quieres hacer. El diseo inicial es importante,


comienza a editar tu primera pgina. No temas cometer errores, no
se puede romper nada. Lo peor que puede pasar es que no funcione.
Cuando ya tengas algo escrito, prubalo. Si algo no funciona, busca
la sintaxis correcta, ves complicando el documento poco a poco,
"tirando de gua" cuando te atasques. Copia algunos ejemplos y
modifcalos. Compara su funcionamiento antes y despus.

Propsito de este documento (varios aos


despus)
Ms reflexiones
Como ya se ha dicho, estas pginas fueron creadas, all por el ya
lejano 1996 (en informtica esto es casi como hablar del jursico),
como material para un curso, es decir, sin nimo de continuidad y
para un grupo de alumnos de caractersticas muy definidas. Una vez
cumplido su destino inicial, nada pareca indicar que pudieran tener
otro que no fuese la papelera. Y en efecto, ese fue. Pero los
alumnos del curso pensaron que, al igual que a ellos, le podian servir
a otros, y comenzaron a difundir la direccin del servidor donde se
haba quedado una copia. Hoy, aos despus, se han servido ms de
un milln de copias y he tenido que responder a miles de e-mails con
las ms variadas consultas.
No han faltado comentarios en contra de su estilo, de su contenido,
e incluso de quien duda que a estas alturas alguien pueda escribir
una sola lnea as, "a mano", sin recurrir a un asistente de los
muchos que existen y que te lo dan todo hecho. Afortunadamente,
han sido pocos los crticos y muchos los satisfechos, y estos ltimos
son los que constantemente han demandado ms contenidos; gracias
a ellos la gua sigue en la red.
Para quienes piensan que es mejor utilizar un asistente.... son muy
libres... No obstante, hay quien prefiere saber lo que est haciendo.
Profesionalmente he tenido ocasin de formar parte de algunos
tribunales de seleccin de personal. Uno de los requisitos

solicitados era saber HTML, y resultaba lastimoso ver el poco


HTML que sabian casi todos los candidatos, que manejaban con
soltura los asistentes, pero que a la hora de analizar su propio
trabajo "por dentro" fallaban estrepitosamente, y no digamos si la
propuesta era modificar o aadir alguna cosa de las que los
asistentes no hacen. Y es que nada tratado en profundidad, resulta
tan sencillo como parece.
A la vista de las consultas, crticas y parabienes recibidos, se
observa que los lectores abarcan un amplio espectro de usuarios:
desde el aficionado que se inicia en estas lides, hasta el nuevo
profesional que tiene unas necesidades muy concretas, lo que
explica la gran variedad de peticiones de nuevos contenidos
recibidas.
Como la revisin constante de la gua requiere de un tiempo del que
no dispongo, y dado que profesionalmente me dedico a la
programacin de gestin, aplazo, que no descarto, la inclusin de
temas tan solicitados como el Java Script, Visual Basic Script, Perl,
etc., etc., y por el momento, me limitar a incluir pequeos
fragmentos de aplicaciones de gestin, aquellos que considere ms
interesantes a nivel general... por la sencilla razn de que los tendr
ya hechos. Es posible que queden un poco escasos de explicaciones
bsicas, pero tal vez algun dia....
Pero, si esto est anticuado!

En efecto, en este documento encontrars cosas que


profesionalmente ya no se utilizan, lo que no siginifica que no
funcionen. De momento no pienso borrar nada, y tengo buenas
razones para ello. El HTML, como todo, ha evolucionado y ser
sustituido por un nuevo estndar: el XHTML, nacido despus del
auge que han tomado las hojas de estilo en cascada (CSS), y ste, a
su vez, ser desplazado por el html5, que no tardando mucho, ser
sustituido por otro estndar. Hay quien sostiene que se deben
escribir las pginas con la ltima tecnologa disponible en el
mercado y respetando escrupulosamente los estndares... Me
parece correcto, siempre que se pueda disponer de esa tecnologa y
se tenga la capacidad suficiente para desarrollar con lenguaje

estricto. En nuestro despilfarrador "primer mundo" es


relativamente sencillo obtener lo ltimo de lo ltimo, pero
desgraciadamente eso no ocurre en todas partes; ni todos los que
se lanzan a escribir una pgina la quieren para entretenerse, ni para
ganar dinero, ni son capaces de comprender los postulados de la
W3C, ni tienen capacidad para escribir maquetando en capas.
Las mayores satisfacciones que me ha proporcionado este
documento han sido algunos e-mails recibidos de un humilde
maestro de una aldehuela perdida en algun remoto rincn, que
trabajando con una mquina 486 encontrada en la chatarra, y un
editor MSDOS consigui crear una pgina para que la gente de su
pueblo pudiera exponer sus muchas necesidades al mundo, logrando
que una comisin de UNICEF apareciese por all. Esta pgina, y
otras muchas creadas o mantenidas en lugares donde la
precariedad no tiene lmites, no cumplen los requisitos que marca la
W3C, ni estan escritas con la ltima versin del lenguaje, ni tienen
hoja de estilos. A veces, ni siquiera tienen ms de 16 colores. Pero
sirven para mucho ms que la mejor pgina diseada con el ms
lujoso de los paquetes de desarrollo, con cuyo solo importe esa
pequea escuela funcionar varios aos.
El HTML, el viejo, entraable y fcil HTML, se ha convertido en
algo ms que un lenguaje de programacin; no es como tantos otros
de los que existen en informtica. ste tiene algo de especial, casi
de mgico. El enorme calado social que ha conseguido internet en el
mundo, probablemente no se habra logrado si escribir una pgina
slo estuviese al alcance de un profesional informtico. Es
indudable que debe evolucionar de forma acorde a las nuevas
necesidades, pero creo necesario separar la programacin
profesional de la vieja herramienta que ha permitido tantas cosas,
cosas que no se pueden medir con parmetros de eficacia
profesional. Mal que le pese al corporativismo de algunos, el HTML
ya forma parte del patrimonio de la humanidad.

Notas sobre el lenguaje

El HTML (Hyper Text Markup Language) es un lenguaje que sirve


para escribir hipertexto, es decir, documentos de texto
presentado de forma estructurada, con enlaces (links) que
conducen a otros documentos o a otras fuentes de informacin (por
ejemplo bases de datos) que pueden estar en tu propia mquina o en
mquinas remotas de la red. Todo ello se puede presentar
acompaado de cuantos grficos estticos o animados y sonidos
seamos capaces de imaginar.
Por supuesto, la esttica de los documentos escritos en HTML no
se limita a texto digamos normal; consigue todos los efectos que
habitualmente se pueden producir con un moderno procesador de
textos: negrita, cursiva, distintos tamaos y fuentes, tablas,
prrafos tabulados, sangras, incluso texto y fondo de pgina de
colores, y muchos ms.
Posiblemente te dirs que todo esto est muy bien, pero que t no
vas a tener la necesidad o posibilidad de desarrollar uno de esos
famosos WWW de los que todo el mundo habla, a veces sin saber
demasiado bien de qu habla.
Mucha gente asocia este lenguaje (que en realidad casi ni siquiera
es un lenguaje, sino una forma de definir efectos en el texto de
manera similar a como se haca en los antiguos procesadores de
texto para DOS;) con complicados y poderosos servidores de
informacin que misteriosamente alguien programa, y que
seguramente es un genio en estas cuestiones, y piensa que en el
trabajo cotidiano o incluso en casa, esto no sirve para nada....
Pues no es as. Esto es muy sencillo y ms prctico de lo que parece.
Evidentemente, si lo que quieres es montar un servidor de
informacin con miles de pginas, links a varias bases de datos
tanto locales como remotas, posibilidad de bsquedas indexadas,
grficos animados, sonido, pginas interactivas, etc., etc.,
necesitars saber algo ms que simple HTML. Pero has pensado en:

1. Poner en limpio de una vez por todas esas notas que tienes
desperdigadas, llenas de llamadas de unas a otras y que no
hay manera de encontrar?
2. Presentar tu coleccin de sellos con una imagen escaneada
de cada uno y un comentario sobre su tema, y organizado por
aos, valores, o lo que se te ocurra?
3. Idem de la coleccin de discos?
4. Montar el lbum de fotos de familia con un texto explicativo
de cada una?
5. Organizar tu biblioteca, incluyendo el ndice escaneado de
cada libro y haciendo links entre temas?
6. Las fotos del ltimo viaje de vacaciones, incluyendo llamadas
a los planos de las ciudades visitadas, y a todas las historias
que te contaron en cada sitio?
7. Si eres estudiante, presentar al "profe" tu prximo trabajo
lleno de diagramas, grficos, tablas, colores... en un CD o
cualquier otro soporte?
8. Organizar para siempre y poner al alcance de todos ese
catlogo o listn siempre perdido en la oficina?
9. Preparar los temas de legislacin, llenos de referencias
cruzadas, de esas oposiciones que te llevan de cabeza?
En fin, la lista puede ser infinita. Pero esto es bastante sencillo de
conseguir. Qu necesitas para empezar? pues solamente un editor
de texto cualquiera (desde Word al humilde "Bloc de notas" de
Windows), un visualizador WWW como el que ests usando ahora...
y haberte ledo esto.

Cmo funciona esto?


Bsicamente, la cosa es simple: la pieza clave es el "browser",
"navegador", "visualizador" o "cliente" o como quieras llamarle,
HTML, es decir, el programa que ahora mismo ests utilizando para
ver esto.
Todas las codificaciones de efectos en el texto que forman el
lenguaje HTML no son ms que instrucciones para el visualizador.

Partiendo de esto, se entiende el porqu no se ve lo mismo con


todos los visualizadores. Depende de cmo estn diseados y para
qu versin de lenguaje estn diseados.
Actualmente existen multitud de ellos, aunque los ms conocidos
son el Internet Explorer de Microsoft (en lo sucesivo IE), el
Netscape Navigator de Netscape (en lo sucesivoNetscape), o el
Mozilla Firefox (que en realidad es el nuevo Netscape), y sin olvidar
los navegadores Opera y Chrome, que tienen fama de ser los que
ms respetan los estndares, cosa muy de agradecer en estos
tiempos.
Todo lo que se dice en esta gua funciona correctamente con
Netscape, Opera, Firefox o Chrome, casi todo con el IE. Algunas
cosas puede que no se vean bien dependiendo del navegador
utilizado, sobre todo si son versiones antiguas.
Si se est conectado a Internet, con un navegador, adems de ver
documentos HTML se puede recibir y enviar correo electrnico,
recibir y enviar NEWS (noticias), visitar los servidores GOPHER
(servidores de ficheros ya desaparecidos), y acceder a servidores
FTP (ms servidores de ficheros) tanto en entrada como en salida,
todo ello con el mismo programa. Tambin, como no, se pueden
imprimir los documentos visualizados. Casi todos suelen ser
"WYSWYG", es decir, que lo impreso es exactamente como lo ves
en pantalla...Siempre que tu impresora est de acuerdo, claro.
La idea es sencilla: slo tienes que crear un documento con tu
editor preferido (como documento entenderemos el conjunto de
ficheros, tanto de texto como de imgenes, que forman las
distintas pginas), guardarlo con la extensin .htm o .html, abrirlo
con tu navegador preferido, y ya tienes un hipertexto en marcha.
Las pginas o documentos creados pueden residir en el disco duro
de tu ordenador personal, en un disquete, en un CD-ROM, o estar a
varios miles de kilmetros en otro ordenador llamado servidor web
o servidor http, que es el protocolo utilizado. Si es as, entonces te
estars moviendo por la WWW (World Wide Web) que es como se
ha dado en llamar a este tipo de servicios de Internet.

As pues, en esencia, una pgina escrita en HTML no es ms que


texto normal, escrito con cualquier editor, y al que, cuando se le
quiere dar algun aspecto especial, como por ejemplo el tamao de la
letra, habr que acompaar de ciertos cdigos para indicar el
efecto deseado. A estos cdigos se les llama elementos del
lenguaje.
Pero no hay que olvidar que al fin y al cabo no hablamos ms que de
texto. Simple y llano texto. Por lo tanto, para montajes sencillos, en
los que no se requiera ningn efecto especial, nos podemos olvidar
hasta del mismsimo HTML. El visualizador nos presentar
perfectamente cualquier pgina ".txt" generada por cualquier
editor, y los links entre documentos slo requieren un simple y
sencillo comando. Y an as podremos conseguir el tipo y tamao de
letra y colores de texto y fondo que queramos, simplemente
configurando el visualizador.
Como ya habrs deducido, lo primero es crear las pginas en tu
mquina, es decir, en local, y eso ya te permite navegar por tu
documento, simplemente abriendo las pginas creadas con tu
navegador preferido. Si lo que quieres es ponerlas en Internet
(algunos a eso le llaman "colgarlas" en Internet), lo siguiente es
conseguir una cuenta y espacio en disco en algun proveedor de
servicios internet (ISP -Internet Service Provider-), si no tienes
tu propio servidor, claro. Una vez conseguido el espacio en servidor,
hay que enviar los ficheros que contienen tus pginas a ese
servidor. Para ello puedes utilizar la pgina que habitualmente
proporcionan los ISP para "subir" tus ficheros desde tu mquina, o
bien utilizar algun programa de FTP, configurndolo segn las
instrucciones del ISP. Suele ser ms sencillo utilizar las pginas
proporcionadas por los ISP.
Recuerda que dependiendo del sistema operativo que tenga el
servidor, los nombres de los ficheros deben atenerse a ciertas
convenciones. Si el servidor utiliza una plataforma UNIX o LINUX
(la mayora de ellos) los nombres no pueden tener espacios en
blanco, y adems se tienen en cuenta las maysculas. No es lo

mismo Index.html que index.html. Otra cosa importante es


que nunca utilices palabras con acentos o caracteres especiales,
como ees, cedillas, etc. para dar nombre a los ficheros. Si el
servidor utiliza sistemas Windows esto carece de importancia, pero
hay que tener en cuenta que tus pginas, antes de llegar al cliente,
tendrn que pasar por muchos nodos enrutadores que generalmente
son mquinas UNIX. Otra cosa que hay que tener en cuenta, es el
nombre por defecto de la primera pgina de tu documento. Casi
todos los servidores basados en UNIX o LINUX consideran como
primera pgina cualquier fichero llamado index.html. Si no existe
este archivo, o el que establezca el administrador del sistema, es
necesario que el usuario escriba el nombre de la primera pgina del
documento que desea visitar. Por ejemplo, si no utilizas el nombre
incial que por defecto admita tu servidor, la direccin se tiene que
escribir completa:
http://mi_servidor/mi_usuario/mi_pagina_inicial.htm
Si utilizas como nombre de la primera pgina el aceptado por el
servidor, solamente habra que escribir hasta el directorio:
http://mi_servidor/mi_usuario/
Y si tienes la suerte de disponer de tu propio servidor, solamente
se precisa el nombre del servidor:
http://mi_servidor/
Si ests diseando tu documento y solamente quieres ver tu
trabajo en local, los navegadores funcionan igual que cualquier otro
programa de Windows, y con la opcin "Archivo/Abrir" de tu
navegador preferido puedes ver cualquier fichero escrito en HTML.
En ese caso, la ruta ser de este estilo:
file:///C:/mi_web_local/mi_pagina.htm

Introduccin al HTML

Elementos en un documento HTML

En esta gua, a las instrucciones que forman el lenguaje HTML les


llamaremos elementos. Otros autores tambin las denominan
"TAGS", o "ETIQUETAS". La notacin de los elementos consiste en
los smbolos < y > que encierran dentro una instruccin.
Los elementos pueden ser llenos o vacos.
Elementos llenos

Se forman escribiendo la instruccin correspondiente seguida del


texto al que se quiere aplicar la instruccin y se termina repitiendo
la instruccin pero con una barra inclinada inmediatamente antes de
la misma.
Por ejemplo, el elemento H1 que sirve para dar el mximo tamao al
texto, se escribir:
<H1> Texto de prueba </H1>.

y este sera el resultado:

Texto de prueba
Si olvidas poner </H1> todo el resto de la pgina tendr el mismo
tamao grande.
Elementos vacos

Los elementos vacos se escriben como los llenos, pero no es


necesario poner la instruccin repetida al final con una barra. Esto
se debe a que estos elementos no producen un efecto sobre el
texto. Generalmente se utilizan para separar bloques de texto, y
por tanto no es necesario indicar su fin. Empiezan y terminan en el
mismo punto.
Por ejemplo, el elemento <HR> que sirve para dibujar una linea
horizontal en la pantalla, se escribir:
<HR>

Y este sera el resultado:


Elementos con argumento

Algunos elementos se escriben con argumento. Es como pasarle


parmetros a la instruccin, y se llaman atributos del elemento.

Por ejemplo, el elemento <A> que sirve para hacer un link (enlace)
con otro documento o con otra pgina del actual, se escribir:
<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba
</A>.

Este es un elemento lleno donde al atributo HREF se le asigna el


valor que aparece entre comillas:
"http://www.miservidor.es/mifichero.htm". El texto al que afecta
este elemento es Link de prueba y realiza un link con el
fichero mifichero.htm que est en el servidor www.miservidor.es.
Los elementos pueden escribirse tanto en maysculas como en
minsculas. Puede ser preferible la primera opcin ya que aporta
claridad al documento fuente, y eso se agradece a la hora de hacer
correcciones, pero CUIDADO, el valor de algunos atributos hay que
escribirlos EXACTAMENTE como deban ser. En el ejemplo anterior
no funcionara el link si escribiramos www.miservidor.es en
maysculas, eso es un nombre de mquina y sera interpretado como
OTRA mquina.
Los elementos pueden anidarse unos con otros, teniendo cuidado de
poner los cierres en el lugar adecuado. Por ejemplo, el
elemento <H1> combinado con <I> que sirve para generar texto en
itlica, se escribir:
<H1><I>Texto de prueba </I></H1>.

y este sera el resultado:

Texto de prueba
Los elementos, en HTML, los puedes escribir tanto en maysculas
como en minsculas. Funciona igual <P> que <p>. A la hora de revisar
el cdigo escrito, resulta ms claro si se escribieron en maysculas,
pero si en el futuro hay que convertir la pgina a otro estndar,
como el XHTML, no se admitirn las maysculas. Si no piensas
migrar a otras tecnologas, hazlo como ms cmodo te resulte.

Estructura de una pgina HTML

Las pginas HTML estn estructuradas en dos partes


diferenciadas: la HEAD (cabecera) y el BODY (cuerpo).
Ejemplo de pgina

Si escribes:

<!Tipo de documento>
<HTML>
<HEAD>
<TITLE> Documento de prueba </TITLE>
</HEAD>
<!-- Esto es un comentario-->
<BODY>
<H1> Esto es una "demo" de documento HTML </H1>
Esto es el ms sencillo de los documentos HTML.
</BODY>
</HTML>

El tipo de documento no es obligatorio a efectos prcticos, es


decir que la pgina se ver igual tanto si lo escribes como si no. Slo
sirve como identificacin del tipo de contenido del fichero a los
efectos de cumplir las especificaciones de estndar recomendadas
por el consorcio W3C, que es el organismo que regula el lenguaje.
Por ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://w3.org/TR/REC-html40/loose.dtd">
Indica que cumple el estndar HTML 4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://w3.org/TR/REC-html40/strict.dtd">
Significa que cumple el estndar HTML 4.0 y, adems, no contiene
elementos desaconsejables.
Y esta es una definicin de marcos que cumple el estndar HTML 4.0:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://w3.org/TR/REC-html40/frameset.dtd">

En el HTML 4.0 se consideran desaconsejables aquellos elementos


que, an siendo soportados, han sido sustituidos por otros y, por
ello, es posible que sean eliminados en el futuro. En cualquier caso,
el que un elemento escrito en tus pginas se vea o no, depender
siempre del navegador utilizado y/o de su versin, no de lo que diga
el estndar.

Puedes ver el aspecto real del ejemplo de pgina pulsando aqu.


Para escribir comentarios en la pgina (que slo se ven en el texto
fuente, pero no en el visualizador) se utilizar el elemento
<!---> cuidado: el que no se vea de forma normal en el
navegador, no significa que no pueda verse el cdigo fuente. Nunca
escribas comentarios con claves de acceso o datos confidenciales.

Esquema de tipos de un documento HTML


Cuando un visualizador recibe un fichero, antes de mostrarlo
necesita saber el tipo de contenido que ste tiene, a fin de
procesarlo adecuadamente. No es lo mismo recibir un documento de
texto que una fotografa en formato GIF, o un vdeo en formato
MPG, o si lo que estamos intentando es transferir un fichero.
En cada caso, el visualizador pondr en juego distintas habilidades,
de las muchas que posee.
Si el fichero procede de un servidor http remoto, (es decir un
servidor web; http es el nombre del protocolo que utilizar el
servicio invocado), ste se encargar de decirle al visualizador
cuanto necesite saber, pero si lo que hay que procesar es un
fichero local, la nica forma de saberlo es por la extensin del
fichero.
La extensin de un fichero son las tres o cuatro letras (depende
del sistema operativo con el que se trabaje) que hay despus del
nombre del fichero y que estn separadas del mismo por un punto.
Por ejemplo, esta pgina se llama estruc.htm. Las tres letras que
hay despus del punto (htm) son la extensin del fichero. Las
otras, las que estn delante del punto, son elnombre del fichero.
Las extensiones de 4 o ms letras son tpicas de sistemas
operativos como UNIX o LINUX y las de 3 o menos de Windows,
que ha mantenido esta costumbre por herencia de los tiempos del
DOS, ya que puede trabajar perfectamente con extensiones de ms

de 3 letras. Por ejemplo, la extensin .html funciona en Windows


igual que la .htm
Estas son algunas de las extensiones stndard ms comunes y sus
contenidos. La primera de ellas suele utilizarse en sistemas UNIXLINUX y la segunda en Windows:
.html

.text

o .htm
Documento HTML. Contine texto e instrucciones HTML que
sern interpretadas.
o .txt
Contiene texto plano. El visualizador presentar todo el
fichero como si fuera un nico bloque de texto y no
interpretar ninguna instruccin HTML que pudiera llevar.
Esto lo har con cualquier fichero que lleve una extensin
desconocida o simplemente no lleve ninguna.

.gif

Contiene un fichero de imagen en formato GIF.


.npg
.xbm

Contiene un fichero de imagen en formato NPG.


Contiene un fichero de imagen en formato X-Bitmap (blanco y
negro).

.xpm

.jpeg

.mpeg

.au

Contiene un fichero de imagen en formato X-Pixmap (color).


o .jpg
Contiene un fichero de imagen en formato codificado jpeg.
o .mpg
Contiene un fichero de imagen de video o cine (en
movimiento).
Contiene un fichero de audio (sonido) codificado en aiffencoded.

.mid

Contiene un fichero de audio (sonido) generado con


secuenciadores midi tpicos de Windows.
.avi
.mp3

.exe

Contiene un fichero con video y sonido tpico de Windows.


Contiene un fichero con sonido tpico de Windows y otros
sistemas.

Contiene un fichero binario ejecutable en DOS o Windows.


.hqx

.Z

.pdf

.doc

Contiene un fichero binario ejecutable en Macintosh.


.zip

Contiene un (o varios) fichero/s comprimido/s de cualquier


clase. Para poder utilizarlo hay que indicarle al visualizador
una herramienta de compresin-descompresin.
Contiene un fichero de imagen de cualquier documento
generado con Acrobat Writer.

Contiene un fichero de documento generado por Microsoft


Word
En el entorno web se utilizan los MIME types
(Multipurpose Internet Mail Extension) para definir el tipo de un
fichero transferido. El visualizador determina desde el MIME type
cmo hay que tratar cada fichero.
Estos son los mime types ms habituales junto con las extensiones
de fichero a las que suele relacionarse:
application/rtf
application/pdf
application/postscript
application/msword
application/x-msexcel
application/x-mspowerpoint
application/asx
application/x-mplayer2
application/x-shockwave-flash
application/x-java-applet
application/java
application/octet-stream
application/x-compressed

.rtf
.pdf
.ps
.doc
.xls
.ppt
.asx
.asx .avi .mp3 .mpg
.swf
.class .clas
.clas .class
.exe .com
.zip

audio/mpeg
audio/x-wav
audio/x-ms-wma
audio/x-midi
audio/x-ms-mp3
audio/x-mp3
audio/mpeg3
audio/x-mpeg-3
audio/x-pn-realaudio

.mp3 .mpg
.wav
.wma
.mid .midi
.mp3
.mp3
.mp3
.mp3 .mpeg
.rm

image/jpeg
image/gif
image/png

.jpg .jpeg
.gif
.png

text/html

.htm .html

text/plain
text/css
text/x-javascript
text/richtext
text/rtf

.txt .text .htm .html


.css
.js
.rtf
.rtf

video/mpeg
video/avi
video/x-ms-wmv
video/x-msvideo
video/quicktime
video/x-ms-asf

.mpg .mpeg
.avi
.wmv
.wmv
.mov
.asf

Los visualizadores tienen una configuracin de los mapas de tipos


aceptables, e instrucciones de cmo proceder en cada caso. Algunos
tipos son tratados directamente por el propio visualizador (p.ej.:
htm, gif, txt) mientras que para otros necesitan de una
herramienta auxiliar adecuada, que hay que indicar al visualizador,
para que sea llamada en el momento preciso (p.ej.: zip, mpg, avi,
pdf).
Ahora que ya sabes qu son las extensiones de fichero, es el
momento de aclarar una cuestin importante:
Los documentos HTML los puedes escribir con lo que quieras...
Siempre que los salves en modo Solo Texto. Es decir, que si
utilizas, por ejemplo, Word de Windows o de MAC, por defecto
estos programas salvan en formato Word. Y aunque luego los
renombres como documentos .htm o .html, el formato interno sigue
siendo Word.
Tampoco vale dejarlos con la extensin .txt que les dejan la
mayora de editores al salvarlos en modo Solo Texto. No seran
interpretados correctamente. Por lo tanto si tienen
extensin .txt (y por supuesto son .txt), entonces puedes
renombrarlos a .htm, o bien en el momento de guardarlos en
formato Solo Texto no dejar la extensin por defecto .txt y darle
ya directamente la extensin .htm.
Algunos procesadores de texto ya incluyen entre sus tipos el .htm.
Si es as, lo que hacen es eliminar la codificacin propia, y
convertirla a elementos de HTML. Por ejemplo, si tienes un texto

en itlica, automticamente es convertido al elemento <I>, etc.. El


problema de los editores avanzados de texto y de la mayora de
programas asistentes para escribir HTML es que generan un cdigo
bastante "sucio", difcil de corregir o modificar despus. No es que
no funcione, pero como el programa no sabe cual es la finalidad del
texto escrito, por defecto le pone todo lo que sabe por si acaso,
aplicando el dicho de "mejor que sobre..."

Cabecera (HEAD) de un documento HTML


La HEAD es la primera de las dos partes en que se estructura un
documento HTML.
En la HEAD reside informacin acerca del documento, y
generalmente no se ve cuando se navega por l. En la HEAD se pone
el elemento lleno <TITLE> que es una breve descripcin que
identifica la pgina. Es lo que el navegador se guarda en el
"Bookmarks" (libro de marcas o libro de direcciones), con lo que
crea la lista que aparece en la orden "Go" de la barra de rdenes, lo
que aparece en la esquina superior izquierda cuando se imprime el
documento, y lo que aparece en el marco de la ventana del
navegador. Tambin lo guarda en su cach, y servir para mostrar la
pgina, cuando sea llamada otra vez, sin necesidad de conectarse de
nuevo al servidor de origen.
No hay que confundir el elemento <TITLE> con el nombre del
fichero.
Por ejemplo, esta pgina est contenida en un fichero
llamado head.htm y el texto de su <TITLE> es: Head de un
documento. Se escibir asi:
<HEAD>
<TITLE>Head de un documento </TITLE>
</HEAD>

Dentro de la HEAD puede utilizarse otro elemento: META. Por


ejemplo, si se escribe:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10">

</HEAD>

Esto hace que el visualizador vuelva a cargar la pgina activa al cabo


de 10 segundos. Tambin puede hacerse a un servidor. As:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10;
URL=http://miservidor/mipagina.htm">
</HEAD>

Utiliza esto con precaucin. Si sabes que el contenido de la pgina


no va a cambiar, es intil hacer esto, y si lo haces contra un
servidor, puedes sobrecargarlo. Este elemento, slo tendr utilidad
en casos muy especiales.
Otra opcin es forzar la expiracin inmediata en la cach del
navegador de la pgina recibida, lo que provoca que la pgina sea
solicitada de nuevo al servidor cada vez, en lugar de cargar la copia
que ya existe en la mquina del cliente. Se escribe as:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Expires" CONTENT="Tue, 20 Aug 1996 14:25:27 GMT">
</HEAD>

Si se pone una fecha ya pasada, como la que hay en el ejemplo, el


navegador elimina inmediatamente de la cach la pgina recibida, y
si no es pasada, lo har en el momento indicado por la misma.
Tambin se le puede dar valor cero a la fecha de expiracin:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Expires" CONTENT="0">
</HEAD>

Otra opcin es impedir directamente que el navegador guarde en


cach la pgina. Esto es especialmente til cuando se trabaja con
formularios que consultan datos dinmicos:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Expires" CONTENT="no-cache">
</HEAD>

Si tienes inters en que tus pginas aparezcan en los grandes


buscadores de Internet, y puedan ser encontradas con facilidad,
puedes poner las palabras clave que contiene la pgina separadas
por comas. Por ejemplo:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META NAME="keywords" CONTENT="HTML, internet
</HEAD>

">

Este otro sirve para que los buscadores puedan ofrecer un breve
resumen de los contenidos de tu pgina:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META NAME="description" CONTENT="Manual para escribir HTML.">
</HEAD>

El siguiente es importante con los nuevos navegadores, ya que le


indica la tabla de caracteres que se ha empleado al escribir la
pgina. De no usarlo, puede ocurrir que el navegador no muestre
correctamente los caracteres especiales no ascii, tales como
acentos, letras de alfabetos no occidentales, etc., que se hayan
quedado sin codificar de la forma tpica en html.
<HEAD>
<TITLE>Head de un documento </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-88591">
</HEAD>

Los charset ms habituales suelen ser:


<meta http-equiv="Content-Type"
<meta http-equiv="Content-Type"
1">
<meta http-equiv="Content-Type"
html5">
<meta http-equiv="Content-Type"
15">
<meta http-equiv="Content-Type"
1252">

content="text/html; charset=utf-8">
content="text/html; charset=iso-8859content="text/html; charset=utf-8 /
content="text/html; charset=iso-8859content="text/html; charset=windows-

Puedes poner todos los elementos <META> que creas necesarios,


pero sin repetirlos.
Habrs notado que se ha utilizado la palabra "cach", y tal vez no
sepas a qu se refiere. Todos los navegadores, por defecto,
siempre que reciben una pgina de un servidor se hacen una copia
de la misma en el disco de tu mquina. Con esto se pretende que si
vuelves a solicitar la misma pgina, en lugar de pedirla de nuevo al
servidor, te mostrar la que tiene guardada en el disco. A esta rea
del disco donde el navegador va poniendo las pginas visitadas, se le
denomina cach. El tamao de la cach lo puedes modificar desde
las opciones de configuracin del navegador, e incluso puedes darle

tamao cero, con lo que siempre que veas una pgina, sta habr
sido solicitada al servidor independientemente de lo que digan las
instrucciones META.
Hay otros elementos que pueden aparecer en la HEAD, como
ISINDEX, NEXTID, LINK o BASE, pero son de uso muy
especializado y poco corriente, algunos ya en desuso, y ninguno
obligatorio (<TITLE> s lo es).

Cuerpo (BODY) de un documento


El cuerpo (BODY) es la segunda y ltima de las dos partes en que se
estructura un documento HTML. Por supuesto es obligatoria, ya que
es aqu donde reside el verdadero contenido de la pgina, y por
tanto, al contrario de la HEAD s se ve cuando navegamos por ella.
Se escibir asi:
<BODY>
texto texto texto texto texto texto texto texto texto texto texto
texto
texto texto texto texto texto texto texto texto texto texto texto
texto
</BODY>

Como ya habrs visto, los navegadores, por defecto, presentan el


texto de una pgina ajustando los contenidos a la esquina superior
izquierda de la pantalla. El elemento BODY tiene parmetros que
permiten modificar los mrgenes por defecto. Lo malo es que cada
navegador los interpreta de una manera. Por ejemplo, Netscape
utiliza solamente dos instrucciones que afectan simultneamente a
los mrgenes superior e inferior e izquierdo y derecho
respectivamente:
marginwidth="pixels", para los mrgenes izquierdo y derecho.
marginheight="pixels", para los mrgenes superior e inferior.
En cambio, el Internet Explores, utiliza uno para cada cual:
leftmargin="pixels", para el margen izquierdo
topmargin="pixels", para el margen superior

rightmargin="pixels", para el margen derecho


bottommargin="pixels", para el margen inferior
Donde pixels es el nmero de pixels que se quiere mover cada
margen hacia el interior de la pgina. Estos parmetros tambin son
accesibles desde instrucciones de estilo.
Otro problema que suele presentarse con los mrgenes es que a la
hora de imprimir una pgina, cada impresora, junto con el
navegador, se las ingeniarn para hacer justo lo contrario de lo que
se desea... Tal vez algun dia todo esto funcione bien.
Otra cosa que puede controlarse desde BODY es el color que
tomarn los links que pongamos en la pgina. Por ejemplo, para
hacer que los links sean amarillos antes de ser visitados, azul-verde
cuando son activados, y verdes despus de haber sido utilizados, se
escribe:
<BODY LINK="#FFFF00" VLINK="#22AA22" ALINK="#0077FF">
Veamos a hora los elementos ms habituales del lenguaje que deben
escribirse en el BODY.

Tamaos y tipos de letra en HTML


Para definir distintos tamaos de letra, en HTML se utiliza el
elemento lleno <Hx> </Hx> donde x es un nmero que puede variar
entre 1 y 6, siendo 1 el tamao mayor.
Se escribirn as:
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>

Texto
Texto
Texto
Texto
Texto
Texto

de
de
de
de
de
de

prueba
prueba
prueba
prueba
prueba
prueba

(H1)</H1>.
(H2)</H2>
(H3)</H3>
(H4)</H4>
(H5)</H5>
(H6)</H6>

y este sera el resultado:

Texto de prueba (H1)

Texto de prueba (H2)


Texto de prueba (H3)

Texto de prueba (H4)


Texto de prueba (H5)

Texto de prueba (H6)

No hay que olvidar poner el cierre </Hx> a cada elemento utilizado.


Este tipo de elemento se suele utilizar para escribir
encabezamientos, ya que despus del cierre automticamente el
visualizador inserta un salto de prrafo.
Por ejemplo: si escribes
<H1> Texto en H1 </H1> <H3> Texto en H3 </H3>

se ver:

Texto en H1
Texto en H3

Y no una cosa al lado de la otra, como cabra esperar. Este elemento


admite un parmetro de alineacin. As, si escribes:
<H3 align=center> Texto en H3 </H3>
Texto en H3

Otra forma de cambiar los tamaos de letra es utilizar el


elemento <FONT > con el atributo VALOR, que es un nmero entre
1 y 7. El valor por defecto del texto es 3. La gran diferencia de
esta notacin respecto a la anterior es que no se produce un salto
de prrafo despus de cada cambio, por lo que pueden hacerse
cosas como esta:
<FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT SIZE=5>A</font>
<FONT SIZE=6>A</font><FONT SIZE=7>A</font><FONT SIZE=6>A</font>
<FONT SIZE=5>A</font><FONT SIZE=4>A</font><FONT SIZE=3>A</FONT>

Dar como resultado:

AAA

AAAAAA

Se puede cambiar el tamao por defecto (3) de toda la pgina con


el elemento <BASEFONT SIZE=valor>. El texto tomar el tamao
indicado por valor y lo mantendr hasta que aparezca otro elemento
<BASEFONT SIZE=valor> y lo restaure o lo cambie por otro
diferente. Tanto si se ha establecido un valor base como si se
utiliza el valor por defecto, los tamaos tambin pueden indicarse
de forma relativa, por lo que el valor puede ser positivo (+) o
negativo (-) respecto al tamao base. Por ejemplo estos dos valores
dan el mismo resultado:
<FONT SIZE=5>ABcde</FONT>
<FONT SIZE=+2>ABcde</FONT>

ABcde
ABcde
Con la versin 3.0 de Netscape se ha implementado un nuevo
atributo del elemento <FONT> que permite elegir tipos de letra
entre los varios de que dispone por defecto Windows. Se trata del
atributo FACE. Este atributo permite forzar el tipo de letra que el
diseador de la pgina quiere que vea el cliente, sin importar el que
por defecto tenga establecido el visualizador.
Si escribes
<FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL</FONT>
<FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES NEW
ROMAN</FONT>
<FONT FACE="courier new">Texto de prueba 12345 con tipo COURIER
NEW</FONT>
<FONT FACE="courier">Texto de prueba 12345 con tipo COURIER</FONT>
<FONT FACE="roman">Texto de prueba 12345 con tipo ROMAN</FONT>
<FONT FACE="small fonts">Texto de prueba 12345 con tipo SMALL
FONTS</FONT>

Se ver:
Texto de prueba 12345 con tipo ARIAL
Texto de prueba 12345 con tipo TIMES NEW ROMAN
Texto de prueba 12345 con tipo COURIER NEW
Texto de prueba 12345 con tipo COURIER

Texto de prueba 12345 con tipo ROMAN


Texto de prueba 12345 con tipo VERDANA
Texto de prueba 12345 con tipo SMALL FONTS
Por supuesto, este atributo es compatible con todos los dems ya
conocidos, como color y tamao. Por ejemplo, si escribes
<FONT FACE="impact" SIZE=6 COLOR="red">
Texto de prueba 12345 con tipo IMPACT</FONT>

Se ver:

Texto de prueba 12345 con tipo IMPACT


Se pueden hacer todas la combinaciones que se quieran, pero hay
que tener presente que si en la mquina cliente no est instalada
una determinada fuente, sta no se ver y en su lugar aparecer la
fuente por defecto del visualizador. No es interesante por tanto,
definir tipos raros, que probablemente, no llegarn a verse nunca.
Si a pesar de todo, se define un tipo del que se tienen dudas de que
exista en el cliente, se pueden indicar otros tipos alternativos, de
forma que el navegador si no tiene el primer tipo, utilizar el
siguiente, y si tampoco lo tiene el prximo, etc. As:
<FONT FACE="raro, courier" SIZE=4 COLOR="red">
Texto de prueba 12345 con tipos alternativos</FONT>

Se ver:
Texto de prueba 12345 con tipos alternativos
Como puedes ver, se ha declarado como primer tipo de letra el
llamado "raro" que, por supuesto, no existe, y el navegador pasa a
utilizar el siguiente, "courier", que s es habitual.

Texto en color
Se puede controlar el color del texto utilizando el elemento
<FONT> con el atributo COLOR="xxx", donde "xxx" es el nombre
en ingls del color que se desea. Hay que tener presente que
algunos no se vern o se vern mal si la mquina no soporta, por lo

menos, 256 colores. Por supuesto, este efecto es anidable con el de


tamao y todos los dems.
Si escribes:
<B><FONT COLOR="red">Texto ROJO </FONT>
<br>
<FONT COLOR="blue">Texto AZUL </FONT>
<br>
<FONT COLOR="navy">Texto AZUL MARINO </FONT>
<br>
<FONT COLOR="green">Texto VERDE </FONT>
<br>
<FONT COLOR="olive">Texto OLIVA </FONT>
<br>
<FONT COLOR="yellow">Texto AMARILLO </FONT>
<br>
<FONT COLOR="lime">Texto LIMA </FONT>
<br>
<FONT COLOR="magenta">Texto MAGENTA </FONT>
<br>
<FONT COLOR="purple">Texto PURPURA </FONT>
<br>
<FONT COLOR="cyan">Texto CYAN </FONT>
<br>
<FONT COLOR="brown">Texto MARRON </FONT>
<br>
<FONT COLOR="black">Texto NEGRO </FONT>
<br>
<FONT COLOR="gray">Texto GRIS </FONT>
<br>
<FONT COLOR="teal">Texto TEAL </FONT>
<br>
<FONT COLOR="white">Texto BLANCO </FONT>
<br>
</B>

Se ver:
Texto
Texto
Texto
Texto
Texto
Texto
Texto
Texto
Texto
Texto
Texto
Texto

ROJO
AZUL
AZUL MARINO
VERDE
OLIVA
AMARILLO
LIMA
MAGENTA
PURPURA
CYAN
MARRON
NEGRO

Texto GRIS
Texto TEAL
Texto BLANCO
He aqu una combinacin de colores y tamaos:
Si escribes:
<FONT SIZE=6 COLOR="red">E</FONT><FONT SIZE=4>sto es una </FONT>
<FONT SIZE=6 COLOR="red">P</FONT><FONT SIZE=4>rueba </FONT>

Resulta:

Esto es una Prueba


Los colores tambin se pueden definir en hexadecimal (por ejemplo
el rojo es <FONT COLOR=#FF0000>). Cuando son colores bsicos,
como los del ejemplo de arriba, es ms cmodo escribir el nombre
aunque sea en ingls, pero cuando se trata de definir un color que
"no tiene nombre" no hay ms remedio que usar la codificacin
hexadecimal. En el ndice encontrars una tabla con los cdigos de
colores.

Las distintas definiciones de los bloques.


Separadores.
Si se analiza una pgina cualquiera veremos que, en realidad, est
compuesta de distintos bloques. Es algo as como un mosaico en el
que cada parte de la composicin final tiene sus propios contenidos,
que pueden ser texto, grficos o las dos cosas. Dependiendo de la
composicin que se quiera hacer, habr que elegir los elementos
ms convenientes para que nuestros contenidos aparezcan
finalmente con la alineacin debida, el tamao apropiado, etc.
Comenzaremos con el elemento <Hx> </Hx> donde x es un nmero
que puede variar entre 1 y 6, siendo 1 el tamao mayor.
Se escribirn as:
<H1> Texto de prueba (H1)</H1>.
<H2> Texto de prueba (H2)</H2>
<H3> Texto de prueba (H3)</H3>

<H4> Texto de prueba (H4)</H4>


<H5> Texto de prueba (H5)</H5>
<H6> Texto de prueba (H6)</H6>

y este sera el resultado:

Texto de prueba (H1)

Texto de prueba (H2)


Texto de prueba (H3)

Texto de prueba (H4)


Texto de prueba (H5)

Texto de prueba (H6)

No hay que olvidar poner el cierre </Hx> a cada elemento utilizado.


Este tipo de elemento suele emplearse para escribir
encabezamientos, ya que despus del cierre, automticamente, el
visualizador inserta un salto de prrafo.
Por ejemplo, si escribes:
<H1> Texto en H1 </H1> <H3> Texto en H3 </H3>

se ver:

Texto en H1
Texto en H3

Y no una cosa al lado de la otra, como cabra esperar. Este elemento


admite un parmetro de alineacin. As, si escribes:
<H3 align=center> Texto en H3 </H3>
Texto en H3

Para definir los prrafos se utiliza el elemento lleno <P>


</P> (por Paragraph). Aunque a menudo no se utiliza el cierre </P>,
ya que el texto continuar normalmente hasta que encuentre otro
prrafo <P>, es conveniente acostumbrarse a ponerlo siempre. En la
nueva definicin del XHTML el cierre es obligatorio.
Se escribir as:
<P> Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1

Texto 1 Texto 1 </P>


<P> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
</P>

Y este sera el resultado:


Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto
2
Como puede verse, hay una lnea en blanco entre los dos bloques. Si
no se quiere dejar esa lnea vaca entre los dos prrafos puede
utilizarse el elemento <BR> (por BReak). Es decir, que el elemento
<BR> es un separador, no un indicador de bloque.
Se escribir as:
<P>Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 <BR>
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P>

y este sera el resultado:


Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto
2
El elemento <P> admite cuatro atributos de
alineacin: ALIGN=LEFT (por
defecto), ALIGN=RIGHT , ALIGN=CENTER y ALIGN=JUSTIFY
Se escribirn as:
<P ALIGN=LEFT>
Texto 1 Texto 1 Texto
Texto 1 Texto 1 Texto
<P ALIGN=RIGHT>
Texto 2 Texto 2 Texto
Texto 2 Texto 2 Texto
<P ALIGN=CENTER>
Texto 3 Texto 3 Texto
Texto 3 Texto 3 Texto
<P ALIGN=JUSTIFY>
Texto 4 Texto 4 Texto
Texto 4 Texto 4 Texto

1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1


1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 </P>
2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P>
3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 </P>
4 Texto 4 Texto 4
4 Texto 4 Texto 4

y este sera el resultado:

Texto 4 Texto 4 Texto 4


Texto 4 Texto 4 Texto 4 </P>

Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1


Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto
2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
Texto 2
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto
3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Texto 3
Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4
Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 tex Texto 4
Texto 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto
4 tex Texto tex 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto
4 Texto 4 tex Texto tex 4 Texto 4 Texto 4 tex Texto 4 Texto 4
tex Texto 4 Texto 4 tex Texto tex 4 Texto 4 Texto 4 tex Texto 4
Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4
Un elemento que se comporta de forma parecida a <BR>
es <DIV> pero que admite los mismos atributos que
<P>: ALIGN=LEFT ALIGN=RIGHT y ALIGN=CENTER
Se escribe as:
<DIV ALIGN=LEFT>
texto1 texto1 texto1
texto1 texto1 texto1
texto1 texto1 texto1
texto1 texto1 texto1
</DIV>
<DIV ALIGN=RIGHT>
texto2 texto2 texto2
texto2 texto2 texto2
texto2 texto2 texto2
texto2 texto2 texto2
texto2 texto2 texto2
< /DIV>
<DIV ALIGN=CENTER>
texto3 texto3 texto3
texto3 texto3 texto3
texto3 texto3 texto3
texto3 texto3 texto3
</DIV>

texto1
texto1
texto1
texto1

texto1
texto1
texto1
texto1

texto1
texto1
texto1
texto1

texto1
texto1
texto1
texto1

texto1
texto1
texto1
texto1

texto1
texto1
texto1
texto1

texto2
texto2
texto2
texto2
texto2

texto2
texto2
texto2
texto2
texto2

texto2
texto2
texto2
texto2
texto2

texto2
texto2
texto2
texto2
texto2

texto2
texto2
texto2
texto2
texto2

texto2
texto2
texto2
texto2
texto2

texto3
texto3
texto3
texto3

texto3
texto3
texto3
texto3

texto3
texto3
texto3
texto3

texto3
texto3
texto3
texto3

texto3
texto3
texto3
texto3

texto3
texto3
texto3
texto3

Fjate en que aqu s se utiliza el cierre </DIV>. Este sera el


resultado:
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
Como puedes ver, salvo por las alineaciones, que ya se hacen con <P>,
no tiene ninguna utilidad prctica, y en general solamente se utiliza
para definir bloques especiales definidos con instrucciones de
estilo (bordes, tamao, situacin, alineacin, color, etc., etc.)
Otro elemento que es casi igual que <DIV> pero que no admite
atributos de alineado, y no produce separacin de prrafo ni de
lnea es <SPAN>. En realidad, de forma directa no sirve para nada,
y ha sido creado tambin para aplicar las hojas de estilo.
Se escribe as:
<SPAN>
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
</SPAN>

Otro interesante efecto es el elemento lleno <BLOCKQUOTE> que


sirve para presentar prrafos adentrados (como si estuviesen
tabulados).

Se escribir as:
<BLOCKQUOTE>
texto texto texto
texto texto texto
<BLOCKQUOTE>
texto texto texto
texto texto texto
</BLOCKQUOTE>
</BLOCKQUOTE>

texto texto texto texto texto texto texto


texto texto texto texto texto texto texto
texto texto texto texto texto texto texto
texto texto texto texto texto texto texto

Y este sera el resultado:


texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
Fjate que en este ejemplo hay un anidamiento, y por tanto, debe
haber dos cierres </BLOCKQUOTE> al final
Otro separador de bloques de texto es el elemento
vaco <HR> (por Horizontal Rule). Este sera el resultado:
Al igual que al texto, se le puede incluir un parmetro de color, pero
no funciona en todos los navegadores. Tambin se puede cambiar su
apariencia aadindole el atributo<NOSHADE>. As:
<HR NOSHADE>

El resultado es:
El elemento <HR> admite dos parmetros: WIDTH y SIZE. El
primero define la longitud de la lnea y el segundo su anchura. No es
obligado usar los dos a la vez
Por ejemplo, si escribes
<HR WIDTH=400 SIZE=5>

El resultado ser:
El valor del atributo WIDTH se puede expresar, como en el
ejemplo anterior, en nmero de puntos (pxels), o en tantos por
ciento referidos al ancho total de la ventana. As:
<HR WIDTH=80% SIZE=5>

El resultado ser:

Adems se puede indicar su posicin respecto a los mrgenes de la


ventana con los atributos ALIGN=CENTER (por
defecto) ALIGN=LEFT y ALIGN=RIGHT. Por ejemplo:
<HR WIDTH=80% SIZE=5 ALIGN=LEFT>

El resultado ser:
O bien:
<HR WIDTH=80% SIZE=5 ALIGN=RIGHT>

El resultado ser:
Hay otro elemento, aparecido en la versin 6 de Netscape, que
permite rodear un texto con un marco, y opcionalmente ponerle una
etiqueta. Se trata del elemento: <FIELDSET>. Recuerda que si no
tienes la versin adecuada de navegador, en los siguientes ejemplos
slo vers el texto, pero no los enmarcados.
Si se escribe:
<FIELDSET>
Esto es una prueba de enmarcado
</FIELDSET>

Se obtiene:
Esto es una prueba de enmarcado

Este elemento tiene un parmetro que permite etiquetar el


recuadro: <LEGEND> Si se escribe:
<FIELDSET>
<LEGEND>Esto es una etiqueta</LEGEND>
Esto es una prueba de enmarcado
</FIELDSET>

Se obtiene:
Esto es una etiquetaEsto es una prueba de enmarcado

El parmetro <LEGEND> tiene tres atributos que indican la


posicin de la etiqueta: LEFT (por defecto), RIGHT y CENTER,
aunque no funciona en todos los navegadores. Por ejemplo:
<FIELDSET>
<LEGEND ALIGN=CENTER> Esto es una etiqueta </LEGEND>

Esto es una prueba de enmarcado


</FIELDSET>

Se obtiene:
Esto es una etiquetaEsto es una prueba de enmarcado

Si en estos ejemplos no ves el recuadro o la etiqueta no est donde


debiera, es porque no tienes una versin de navegador adecuada.
Por supuesto, dentro del recuadro generado por <FIELDSET> se
puede poner cualquier cosa: formularios, imgenes, texto, etc.

Textos preformateados
Posiblemente ya te habrs dado cuenta de que, cuando escribes un
texto con tu editor, a la hora de ver lo hecho con el visualizador,
algunas cosas no estn como t las pusiste... Como por ejemplo
poner dos o tres espacios en blanco entre palabras, o intentar
encolumnar los datos de una pequea tabla: acaba todo junto y en
la misma lnea!
Este efecto se puede eliminar con el elemento lleno <PRE> . Al
texto que va dentro del elemento PRE se le pueden aplicar todos los
elementos que se quiera, siempre que sean elementos que no alteren
la posicin del texto. Por ejemplo si utilizas el elemento <H>, se
rompera el preformateo pero no ocurrir lo mismo con <FONT
SIZE>. Por defecto, los textos preformateados se ven con tipo de
letra "curier", es decir de paso fijo y los no preformateados en
"Times New Roman". Estos tipos son configurables en el
visualizador.
Se escribir as:
<PRE>
1

9 10 11 12 13 14

15 16 17 18 19 20 21

</PRE>

<B>Esto es una demostracion de</B>


texto preformateado.

y este sera el resultado:


1

9 10 11 12 13 14

Esto es una demostracion de


texto preformateado.

15 16 17 18 19 20 21

Dentro de un bloque preformateado tambin se pueden poner links


a otros documentos y codificacin para caracteres especiales (se
ver ms adelante lo que es eso).
Este elemento admite el parmetro WIDTH=x donde x define la
mxima longitud de lnea visualizada. No funciona con Netscape.
El navegador, por defecto, elimina varios espacios en blanco y los
convierte en uno solo. Si lo que deseas es separar una palabra de
otra ms de un espacio, se puede recurrir a una instruccin especial
que le indica esto al navegador, pero hay que darla codificada;
funciona como un avance de carro, y aunque en pantalla cumple su
objetivo, cuando se imprime la pgina, no todas las impresoras son
capaces de interpretarlo correctamente. Se escribe: &#160; y
como alias se utiliza: &nbsp;
Por ejemplo, si escribes:
texto texto&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;texto texto

Se ve as:
texto texto

texto texto

Con Netscape 3.0 se ha implementado un nuevo elemento que


permite definir espacios en blanco sin utilizar el elemento <PRE>
Se trata del elemento <SPACER>. este elemento puede ir
acompaado de los atributos TYPE y SIZE y se puede utilizar en
cualquier zona de una pgina, pero donde ms se aprecia su efecto
es en las columnas. Se escibir asi:
<MULTICOL COLS=2>
<SPACER TYPE=HORIZONTAL
texto texto texto texto
texto
<P>
<SPACER TYPE=HORIZONTAL
texto texto texto texto
texto

SIZE=35>
texto texto texto texto texto texto texto
SIZE=35>
texto texto texto texto texto texto texto

<SPACER TYPE=VERTICAL SIZE=35>


texto texto texto texto texto texto texto texto texto texto texto
texto
</MULTICOL>

Y se ve as:
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto
Como puedes ver, con TYPE=horizontal deja espacio en blanco a la izquierda de la
primera linea. Es el valor por defecto. TYPE=vertical deja espacio en blanco por arriba
de la primera linea. Para ambos tipos el tamao del espacio se da en puntos (pixels) con
el atributo SIZE. El valor por defecto es 0.
Fjate en que entre las dos instrucciones con tipo horizontal hay un elemento <P>. En
efecto, es necesario indicarle a <SPACER> donde termina el prrafo para que ejecute la
siguiente instruccin del mismo tipo. Este elemento no funciona con el navegador de
Microsoft. Para conseguir columnas sin utilizar este elemento la nica solucin es
emplear tablas: <TABLE>

Otros efectos en el texto


Una o varias lneas de texto, pueden estar centradas respecto a los
mrgenes de la ventana. Esto afecta slo al texto que hay
entre <CENTER> y </CENTER>, pero no a todo el prrafo. Por
ejemplo:
texto texto texto texto texto texto texto texto texto texto texto
texto
<CENTER>texto centrado texto centrado</CENTER>
texto texto texto texto texto texto texto texto texto texto texto
texto

Se ver:
texto texto texto texto texto texto texto texto texto txto texto
texto texto texto texto texto texto
texto centrado texto centrado

texto texto texto texto texto texto texto texto texto txto texto
texto texto texto texto texto texto
Esto, adems de a texto slo, se puede aplicar a una tabla, una
imagen o cualquier otra cosa.
Quedan algunos otros elementos que modifican el aspecto del
texto. Algunos, aparentemente, hacen la misma cosa, y otros no
funcionan con el visualizador de Netscape, por lo que se omiten
aqu.
Texto en negrita:
<B>Texto en negrita</B>

Texto realzado:
<STRONG>Texto realzado</STRONG>

Texto en itlica:

<I>Texto en itlica</I>

Texto con nfasis:

<EM>Texto con nfasis</EM>


Texto ejemplo de cdigo:
<CODE>Texto ejemplo de cdigo</CODE>
Texto teletipo:
<TT>Texto teletipo</TT>

Texto subrayado:
<U>Texto subrayado</U>

Texto tachado:
<STRIKE>Texto tachado</STRIKE>

Texto de direccin:

<ADDRESS>Texto de direccin</ADDRESS>

Texto intermitente
<BLINK>Texto intermitente</BLINK>

Texto superndice

Texto normal

<SUP>Texto Superndice</SUP>
Texto subndiceTexto

nomal

<SUB>Texto Subndice</SUB>

Texto grande
<BIG>Texto grande</BIG>
Texto pequeo
<SMALL>Texto pequeo</SMALL>

En los navegadores de ltima generacin se ha implementado un


efecto que permite incluir explicaciones ocultas que aparecen al
pasar el ratn por encima (sin pulsar), pero sin cambiar de pgina ni
abrir ninguna ventana nueva. Por ejemplo, si escribes:

<ACRONYM TITLE="Hyper Text Markup


Language">HTML</ACRONYM>
Al pasar el ratn sobre la palabra HTML, se desvela su
significado: HTML
De funcionamiento similar al anterior tambin tenemos el
elemento <abbr>
<abbr TITLE="Hyper Text Markup Language">HTML</abbr>
Y este es el aspecto que toma el texto: HTML Este ltimo
elemento NO funciona con el navegador IE. Como puedes ver, los
dos trabajan de la misma forma que el parmetrotitle que se aplica
al elemento <A> y se diferencian de ste solamente por el tipo de
subrayado, que es ms ligero.

Listas y mens
Hay elementos que permiten crear texto con varios formatos de
listado: Estos pueden ser ordenados <OL> (se refiere a numerados,
no ordenados por algun criterio),desordenados <UL> (no
numerados), directorios <DIR>, menu <MENU> y listados de
definicin <DL>. Veamos cmo es la sintaxis bsica y apariencia de
estos elementos, a partir de los cuales, pueden hacerse
combinaciones muy complejas mediante anidamientos de unos con
otros, hasta conseguir prcticamente cualquier presentacin
deseada:
Esto es una lista ordenada (numerada):
1. Primera linea
2. Segunda linea
Se escribe:
<OL>
<LI>Primera linea
<LI>Segunda linea
</OL>

Fjate en que los elementos <LI> no necesitan cierre. Terminan


cuando aparece otro igual o se cierra la lista. Puede ser conveniente
poner el cierre </LI> si se van a aplicar instrucciones de estilo.
Esto es una lista desordenada ( no numerada):

Primera linea
segunda linea

Se escribe:
<UL>
<LI>Primera linea
<LI>Segunda linea
</UL>

En este caso los nmeros han sido sustituidos por unos puntos
gruesos. Esa es la apariencia por defecto; se puede cambiar usando
el atributo TYPE con tres valores (el valor por defecto es DISC).
Con el valor CIRCLE se ver:
o
o

Primera linea
segunda linea

Se escribe:

<UL TYPE=CIRCLE>
<LI>Primera linea
<LI>Segunda linea
</UL>

Tambin puede usarse el valor SQUARE. As:

Primera linea
segunda linea

Se escribe:
<UL TYPE=SQUARE>
<LI>Primera linea
<LI>Segunda linea
</UL>

Las listas ordenadas no slo se pueden ordenar con nmeros.


Tambin se pueden utilizar letras y numeracin romana tanto en
maysculas como minsculas. Para esto se utiliza el atributo TYPE
del elemento <OL> con los siguientes valores: TYPE=1 (por defecto)
para nmeros, TYPE=A para letras maysculas, TYPE=a para letras

minsculas, TYPE=I para numeracin romana en maysculas


y TYPE=i para numeracin romana en minsculas.
Esto es una lista ordenada con letras maysculas:
A.
B.
C.
D.

Primera linea
Segunda linea
Tercera linea
Cuarta linea

Se escribe:
<OL TYPE=A>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>

Esto es una lista ordenada con letras minsculas:


a.
b.
c.
d.

Primera linea
Segunda linea
Tercera linea
Cuarta linea

Se escribe:
<OL TYPE=a>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>

Esto es una lista ordenada con numeracin romana en


maysculas:
I.
II.
III.
IV.

Primera linea
Segunda linea
Tercera linea
Cuarta linea

Se escribe:
<OL TYPE=I>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>

Esto es una lista ordenada con numeracin romana en minsculas:


i.
ii.
iii.
iv.

Primera linea
Segunda linea
Tercera linea
Cuarta linea

Se escribe:

<OL TYPE=i>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>

En algunos casos puede interesarnos que la lista no comience por el


nmero 1 (por ejemplo si es una lista que continua en otra pgina).
Se puede conseguir con el atributo STARTcombinado con TYPE.
Esto es una lista ordenada con letras maysculas y que comienza
por la E:
E.
F.
G.
H.

Primera linea
Segunda linea
Tercera linea
Cuarta linea

Se escribe:
<OL TYPE=A START=5>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>

El nmero que pones en el atributo START indica en que nmero o


letra comenzar la lista. la E es la quinta letra.
Esto es un men:
Primera linea
Segunda linea
Se escribe:
<MENU>
<LI>Primera linea
<LI>Segunda linea
</MENU>

La diferencia entre un men y una lista desordenada, es que las


lneas en la lista desordenada comienzan en el margen izquierdo y
las del men unas posiciones ms a la derecha (aunque eso depende
del visualizador, con Netscape se ven igual).
Esto es un directorio:
Primera linea
Segunda linea
Se escribe:
<DIR>
<LI>Primera linea
<LI>Segunda linea
</DIR>

Ocurre lo mismo que con el men, con Netscape no se aprecia


diferencia.
Esto es una lista de definicion:
Primera linea
Segunda linea
Se escribe:
<DL>
<DT>Primera linea
<DD>Segunda linea
</DL>

Fjate que ahora en lugar del elemento <LI> se utiliza <DT> y <DD>, y
como tipo <DL>. Estos tres nuevos elementos tambin se pueden
usar con cualquiera de los anteriores tipos de lista, alterando por
completo su apariencia. Para hacerse una idea de la variedad de
aspectos que se pueden conseguir, lo mejor es ver la pgina
de ejemplos de listados.

Ejemplos de listas y mens


Desordenadas
Desordenada simple con marcas

Linea de texto 1
Linea de texto 2
Linea de texto 3

Se escribe:
<UL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</UL>

Desordenada simple sin marcas. Comienzo en margen izquierdo


Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<DL>
<DT>Linea de texto 1
<DT>Linea de texto 2
<DT>Linea de texto 3
</DL>

Desordenada simple sin marcas. Comienzo una posicin a la


derecha
Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
<DT>Linea de texto 1
<DT>Linea de texto 2
<DT>Linea de texto 3
</UL>

Desordenada simple con marcas. Comienzo una posicin a la


derecha

Linea de texto 1
Linea de texto 2
Linea de texto 3

Se escribe:
<UL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</UL>

Desordenada simple sin marcas. Comienzo dos posiciones a la


derecha

Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
<DD>Linea de texto 1
<DD>Linea de texto 2
<DD>Linea de texto 3
</UL>

Desordenada simple sin marcas. Comienzo tres posiciones a la


derecha
Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
<UL>
<DD>Linea de texto 1
<DD>Linea de texto 2
<DD>Linea de texto 3
</UL>
</UL>

Desordenada simple con marcas. Comienzo dos posiciones a la


derecha
o
o
o

Linea de texto 1
Linea de texto 2
Linea de texto 3

Se escribe:
<UL>
<UL TYPE=DISC>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</UL>
</UL>

Desordenada con 4 niveles sin marcas


Linea de texto 1
Linea de texto 2
Linea de texto 3
Linea de texto 3.1
Linea de texto 3.2

Linea de texto 3.2.1


Linea de texto 3.2.2
Linea de texto 3.2.2.1
Linea de texto 3.2.2.2
Linea 4 de texto
Se escribe:
<DL>
<DT>Linea de texto 1
<DT>Linea de texto 2
<DT>Linea de texto 3
<DL>
<DT>Linea de texto 3.1
<DT>Linea de texto 3.2
<DL>
<DT>Linea de texto 3.2.1
<DT>Linea de texto 3.2.2
<DL>
<DT>Linea de texto 3.2.2.1
<DT>Linea de texto 3.2.2.2
</DL>
</DL>
</DL>
<DT>Linea 4 de texto
</DL>

Desordenada con 4 niveles con marcas

Linea de texto 1
Linea de texto 2
Linea de texto 3
o Linea de texto 3.1
o Linea de texto 3.2
Linea de texto 3.2.1
Linea de texto 3.2.2
Linea de texto 3.2.2.1
Linea de texto 3.2.2.2
Linea 4 de texto

Se escribe:
<UL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<UL>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2
<UL>
<LI>Linea de texto 3.2.1
<LI>Linea de texto 3.2.2

<UL>
<LI>Linea de texto 3.2.2.1
<LI>Linea de texto 3.2.2.2
</UL>
</UL>
</UL>
<LI>Linea 4 de texto
</UL>

Ordenadas
Ordenada simple
1. Linea de texto 1
2. Linea de texto 2
3. Linea de texto 3
Se escribe:
<OL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</OL>

Ordenada con 4 niveles, todos ordenados


1. Linea de texto 1
2. Linea de texto 2
3. Linea de texto 3
1. Linea de texto 3.1
2. Linea de texto 3.2
1. Linea de texto 3.2.1
2. Linea de texto 3.2.2
1. Linea de texto 3.2.2.1
2. Linea de texto 3.2.2.2
4. Linea de texto 4
Se escribe:
<OL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<OL>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2

<OL>
<LI>Linea de texto 3.2.1
<LI>Linea de texto 3.2.2
<OL>
<LI>Linea de texto 3.2.2.1
<LI>Linea de texto 3.2.2.2
</OL>
</OL>
</OL>
<LI>Linea de texto 4
</OL>

Ordenada con 4 niveles, todos ordenados. Numeracin romana


en maysculas y minsculas
I.
II.
III.

IV.

Linea de texto 1
Linea de texto 2
Linea de texto 3
i. Linea de texto 3.1
ii. Linea de texto 3.2
i. Linea de texto 3.2.1
ii. Linea de texto 3.2.2
i. Linea de texto 3.2.2.1
ii. Linea de texto 3.2.2.2
Linea de texto 4

Se escribe:
<OL TYPE=I>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<OL TYPE=i>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2
<OL TYPE=i>
<LI>Linea de texto 3.2.1
<LI>Linea de texto 3.2.2
<OL TYPE=i>
<LI>Linea de texto 3.2.2.1
<LI>Linea de texto 3.2.2.2
</OL>
</OL>
</OL>
<LI>Linea de texto 4
</OL>

Ordenada con 4 niveles, 2 desordenados con marcas

1. Linea de texto 1
2. Linea de texto 2
3. Linea de texto 3
1. Linea de texto 3.1
2. Linea de texto 3.2
Linea de texto 3.2.1
Linea de texto 3.2.2
Linea de texto 3.2.2.1
Linea de texto 3.2.2.2
4. Linea de texto 4
Se escribe:
<OL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<OL>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2
<UL TYPE=SQUARE>
<LI>Linea de texto 3.2.1
<LI>Linea de texto 3.2.2
<UL TYPE=CIRCLE>
<LI>Linea de texto 3.2.2.1
<LI>Linea de texto 3.2.2.2
</UL>
</UL>
</OL>
<LI>Linea de texto 4
</OL>

Ordenada con 4 niveles, 2 desordenados sin marcas


1. Linea de texto 1
2. Linea de texto 2
3. Linea de texto 3
1. Linea de texto 3.1
2. Linea de texto 3.2
Linea de texto 3.2.1
Linea de texto 3.2.2
Linea de texto 3.2.2.1
Linea de texto 3.2.2.2
4. Linea de texto 4

Se escribe:
<OL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<OL>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2
<DL>
<DD>Linea de texto 3.2.1
<DD>Linea de texto 3.2.2
<DL>
<DD>Linea de texto 3.2.2.1
<DD>Linea de texto 3.2.2.2
</DL>
</DL>
</OL>
<LI>Linea de texto 4
</OL>

Tablas
Las tablas son sin duda uno de los elementos ms potentes del
HTML. Con pocos elementos se pueden conseguir efectos
espectaculares. En el interior de las celdas de una tabla, que
pueden ser con borde visible o invisible, se puede poner cualquier
cosa: texto de cualquier tamao y color, imgenes, links... Por
supuesto, adems de permitir cualquier contenido, tienen sus
propios atributos de alineacin tanto horizontal como vertical, y
atributos de dimensionado. Por defecto se autodimensionan, es
decir, se adaptan en tamao a su contenido, pero tambin es posible
definirlo de forma fija. Las tablas han sido utilizadas largo tiempo
para maquetar el contenido de las pginas, y aunque las nuevas
tendencias aconsejen hacer esto con bloques (capas XHTML), no es
un elemento que vaya a desaparecer, y es mucho ms sencillo de
utilizar.
El elemento bsico de definicin de tabla es <TABLE> </TABLE> y
en su interior se disponen los sub elementos <TR> para definir una
fila (Row) <TH> para definir una cabecera (Header) <TD> para
definir una celda de datos (Data). Estos sub elementos tambin han
de llevar sus correspondientes cierres: </TR> </TH> </TD>.

Una cabecera <TH> es lo mismo que una celda de datos <TD> pero de
forma automtica el texto de su contenido recibe los atributos de
negrita y centrado. Slo es posible definirlas al principio de las
filas, de las columnas o de ambas a la vez.
He aqu una tabla-resumen de los elementos utilizados y los
atributos que admite cada uno:
TABLE TR TD
X
- BORDER
X
- BORDERCOLOR
- X
ROWSPAN
- X
COLSPAN
X X
ALIGN
- X
VALIGN
X
- X
WIDTH
X
- X
HEIGTH
X
- CELLPADDING
X
- CELLSPACING
- X
NOWRAP
X
X X
EVENTS
Resumen de tablas

TH CAPTION
X
X
X
X
X
-

Veamos el significado de cada atributo:

BORDER Indica el ancho de los bordes de la tabla. Se mide


en pxels. Si no se escribe este atributo, es equivalente a
BORDER=0 (por defecto).
BORDERCOLOR Establece el color de los bordes de la
tabla. No funciona igual en todos los navegadores.
CELLSPACING Indica el nmero de pxels que separan una
celda de otra. Aunque pueda parecerlo, no hace lo mismo que
BORDER. Su valor por defecto es 2.
CELLPADDING Indica los pxels de separacin entre el
borde de la celda y su contenido. Su valor por defecto es 1.
WIDTH Segn donde se escriba, sirve para controlar el
ancho de toda la tabla o de sus columnas. Si se incluye en
<TABLE> puede indicar el tamao tanto en pxels como en
porcentaje respecto al ancho de la pantalla.
ALIGN Indica la alineacin horizontal de los datos dentro
de las celdas. Puede tener tres

valores: LEFT (izquierda), RIGHT (derecha)


y CENTER (centro).
VALIGN Indica la alineacin vertical de los datos dentro de
las celdas. Puede tener tres
valores: TOP (arriba), BOTTOM (abajo) y MIDDLE (centro).
ROWSPAN Se utiliza en la definicin de una celda (<TD>) o
cabecera (<TH>) para indicar que su anchura o altura son
equivalentes a un determinado nmero de filas.
COLSPAN Se utiliza en la definicin de una celda (<TD>) o
cabecera (<TH>) para indicar que su anchura o altura son
equivalentes a un determinado nmero de columnas.
NOWRAP Para impedir que las lneas de texto dentro de
una celda se trunquen en los espacios en blanco.
EVENTS Se pueden capturar todos los eventos tpicos de
los navegadores en cualquiera de las partes de una tabla. Para
ello es necesario JavaScript, y no es compatible con todos los
navegadores.
Por ejemplo: <TABLE
BORDER onMouseOver="javascript:alert('Aviso')">
... </TABLE>

Recientemente se han implementado al elemento <TABLE> algunos


atributos muy interesantes que permiten definir qu bordes o
lneas de la tabla se mostrarn:
Este atributo sirve para definir qu bordes del marco de la tabla
sern visibles: <TABLE FRAME="valor"> ...
</TABLE> donde valor puede ser:

void - Ningn lado (por defecto).


above - Slo el borde superior
below - Slo el borde inferior.
hsides - Slo los bordes superior e inferior.
vsides - Slo los lados derecho e izquierdo.
lhs - Slo el lado izquierdo.
rhs - Slo el lado derecho.
box - Los cuatro lados.
border - Los cuatro lados (no es lo mismo que el ya conocido)

Y este otro sirve para definir qu bordes de la tabla sern


visibles: <TABLE RULES="valor"> ...
</TABLE> donde valor puede ser:

none - Ninguna lnea de divisin (por defecto).


groups - Slo aparecen lneas de divisin entre grupos de filas
y grupos de columnas.
cols - Slo aparecern lneas de divisin entre filas.
rows - Slo aparece lneas de divisin entre columnas.

Estos ltimos atributos no funcionan igual en todos los


navegadores, y no funcionan en absoluto si no son de la ltima
generacin. Segn el navegador de que se trate, puede que haya que
combinar ms de un atributo para conseguir el efecto deseado. Lo
mejor es hacer pruebas con algunas versiones para asegurarse.
Las posibilidades son tan amplias, que lo mejor es ver la pgina de
ejemplos de tablas que encontrars en el ndice.

Ejemplos de tablas
Tabla bsica de 3x2
ABC
DEF
<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

Dos ejemplos de lnea expandida <ROWSPAN>


Item 1
Item 3
Item 2
Item 4
Item 5
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD> <TD>Item 5</TD>
</TR>

</TABLE>

Item 1

Item 2 Item 3 Item 4


Item 5 Item 6 Item 7

<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR>
<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
</TR>
</TABLE>

Ejemplo de columna expandida <COLSPAN>


Item 1 Item 2
Item 3 Item 4 Item 5
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>

Tabla con cabeceras <TH>


Head1 Head2 Head3
A
B
C
D
E
F
<TABLE BORDER>
<TR>
<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

Combinacin de columna expandida y cabecera


Head1 Head2
A B C D
E F G H
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>

</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>

Combinacin de cabeceras mltiples y columnas expandidas


Head1
Head2
Head 3 Head 4 Head 5 Head 6
A
B
C
D
E
F
G
H
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TH>Head 3</TH> <TH>Head 4</TH>
<TH>Head 5</TH> <TH>Head 6</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>

Cabeceras laterales
Head1 Item 1 Item 2 Item 3
Head2 Item 4 Item 5 Item 6
Head3 Item 7 Item 8 Item 9
<TABLE BORDER>
<TR><TH>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>
<TR><TH>Head2</TH>
<TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR>
<TR><TH>Head3</TH>
<TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR>
</TABLE>

Combinacin de cabeceras laterales y lneas expandidas


Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7 Item 8
Head2 Item 9 Item 10 Item 3 Item 11
Head1

<TABLE BORDER>
<TR><TH ROWSPAN=2>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item
4</TD>
</TR>
<TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item
8</TD>

</TR>
<TR><TH>Head2</TH>
<TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item
11</TD>
</TR>
</TABLE>

Combinacin de cabeceras superiores y laterales. Tabla


centrada. Contenidos centrados. Ttulo al pie.
TABLE TR TD TH CAPTION
X
- - BORDER
- X X
ROWSPAN
- X X
COLSPAN
X X X
X
ALIGN
- X VALIGN
X
- X WIDTH
X
- X HEIGTH
X
- - CELLPADDING
X
- - CELLSPACING
Resumen de tablas
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN=bottom>Resumen de tablas</CAPTION>
<TR>
<TD><TH>TABLE</TH><TH>TR</TH><TH>TD</TH><TH>TH</TH><TH>CAPTION</TH></T
D>
</TR>
<TR ALIGN=CENTER>
<TH>BORDER</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>ROWSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>COLSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>ALIGN</TH><TD>-</TD><TD>X</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR ALIGN=CENTER>
<TH>VALIGN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>WIDTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>HEIGTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>

</TR>
<TR ALIGN=CENTER>
<TH>CELLPADDING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>CELLSPACING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
</TABLE>
</CENTER>

Ejemplo con todos los elementos y parmetros


Media
Altura Peso
85
Hombres 1.9
Sexo
60
Mujeres 1.7
<TABLE BORDER>
<TR>
<TD><TH ROWSPAN=2></TH>
<TH COLSPAN=2>Media</TH></TD>
</TR>
<TR>
<TD><TH>Altura</TH><TH>Peso</TH></TD>
</TR>
<TR>
<TH ROWSPAN=2>Sexo</TH>
<TH>Hombres</TH><TD>1.9</TD><TD>85</TD>
</TR>
<TR>
<TH>Mujeres</TH><TD>1.7</TD><TD>60</TD>
</TR>
</TABLE>

Otro ejemplo de lnea y columna expandidos


A

12
34

C D
<TABLE BORDER>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
</TR>
<TR>
</TR>
</TABLE>

Ajustando mrgenes y bordes


Tabla sin bordes
Item 1
Item 3
Item 2
Item 4
Item 5
<TABLE>
<TR>

<TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item

3</TD>
</TR>
<TR>
</TR>
</TABLE>

<TD>Item 4</TD> <TD>Item 5</TD>

Aqu no es visible el borde de las celdas debido a que se ha omitido


el atributo BORDER del elemento <TABLE>. La omisin o no es
equivalente a parametrizarlo; se consigue lo mismo as: BORDER=0,
y como ya habrs deducido, el valor de BORDER puede ser variable.
Mira el siguiente ejemplo:
Tabla con borde de 10 puntos
Item 1 Item 2
Item 3 Item 4
<TABLE BORDER=10>
<TR>
<TD>Item 1</TD> <TD> Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD>
</TR>
</TABLE>

Dimensionado de celdas
A

<TABLE BORDER CELLPADDING=10 CELLSPACING=0>


<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

A B C
D E F
<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
<TR>

<TD>A</TD> <TD>B</TD> <TD>C</TD>


</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

<TABLE BORDER CELLPADDING=10 CELLSPACING=10>


<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>


<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

Alineacin, ttulos y subtablas


Lneas mltiples en un tabla
Enero

Febrero

Celda 1 Celda 2
Celda 4

Marzo
Otra celda
Celda 3

y esta
Celda 6
es la celda 5

<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>

<TD>Celda 2</TD>
<TD>Otra celda<br> Celda 3</TD>
</TR>
<TR>
<TD>Celda 4</TD>
<TD>y esta<br>es la celda 5</TD>
<TD>Celda 6</TD>
</TR>
</TABLE>

Alineado horizontal del contenido de las celdas. ALIGN=LEFT |


RIGHT | CENTER
Se puede aplicar individualmente a una celda o a toda la lnea
Enero

Febrero

Marzo
Otra celda
Todas alineadas al centro
Celda 2
Celda 3
Por defecto
Alineado a la derecha Alineado al centro
Alineado a la izquierda
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR ALIGN=center>
<TD>Todas alineadas al centro</TD>
<TD>Celda 2</TD>
<TD>Otra celda<br> Celda 3</TD>
</TR>
<TR>
<TD ALIGN=right>Alineado a la derecha</TD>
<TD ALIGN=center>Alineado al centro</TD>
<TD>Por defecto<br>Alineado a la izquierdat</TD>
</TR>
</TABLE>

Alineado vertical del contenido de las celdas. VALIGN=TOP |


BOTTOM | MIDDLE
Se puede aplicar individualmente a una celda o a toda la columna
Enero
Febrero
Marzo
Todas alineadas arriba Esta es la
Celda 3
Celda 2
Alineado arriba
Por defecto
Alineado abajo Alineado al centro
<TABLE BORDER>

<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR VALIGN=top>
<TD>Todas alineadas arriba</TD>
<TD>Esta es la<br>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
<TR>
<TD VALIGN=top>Alineado arriba</TD>
<TD VALIGN=bottom>Alineado abajo</TD>
<TD>Por defecto<br>Alineado al centro</TD>
</TR>
</TABLE>

Titulando las tablas. CAPTION=TOP | BOTTOM


Ttulo arriba
Enero Febrero Marzo
Celda 1 Celda 2 Celda 3
<TABLE BORDER>
<CAPTION ALIGN=top>Titulo arriba</CAPTION>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
</TABLE>

Enero Febrero Marzo


Celda 1 Celda 2 Celda 3
Ttulo abajo
<TABLE BORDER>
<CAPTION ALIGN=bottom>Titulo abajo</CAPTION>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
</TABLE>

Anidando tablas. La tabla ABCD dentro de la tabla 12345


123

AB
CD
456
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 1 -->
<TD>1</TD>
<TD>2</TD>
<TD>3
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 2 -->
<TD>A</TD>
<TD>B</TD>
</TR>
<TR> <!-- ROW 2, TABLE 2 -->
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR> <!-- ROW 2, TABLE 1 -->
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>

Longitud horizontal de las tablas


Tabla que ocupa el 50 % de la pantalla, y cuyas celdas estn
dimensionadas al 50 % cada una respecto a la longitud total de
la tabla
Width=50%
Celda 3

Width=50%
Celda 4

<TABLE BORDER WIDTH="50%">


<TR><TD>Width=50%</TD><TD>Width=50%</TD>
</TR>
<TR><TD>Celda 3</TD><TD>Celda 4</TD>
</TR>
</TABLE>

Tabla dimensionada al 50 % de la pantalla, celdas sin


dimensionar. Obsvese que se alargan ms de lo que lo haran
sin forzar la longitud de la tabla
Celda 1
Celda 3

2
4

<TABLE BORDER WIDTH="50%">


<TR><TD>Celda 1</TD><TD>2</TD>

</TR>
<TR><TD>Celda 3</TD><TD>4</TD>
</TR>
</TABLE>

El mismo efecto anterior, pero con la tabla dimensionada al 100


%
WIDTH=100%
3

Celda 2
Celda 4

<TABLE BORDER WIDTH="100%">


<TR><TD>WIDTH=100%</TD><TD>Celda 2</TD>
</TR>
<TR><TD>3</TD><TD>Celda 4</TD>
</TR>
</TABLE>

Centrado de una tabla en la pgina


A
D

B
E

C
F

<CENTER>
<TABLE BORDER WIDTH="50%">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
</CENTER>

Tabla forzada al 50 % de la pgina, conteniendo otra tabla


anidada en una de sus celdas. La segunda tabla est forzada a
ocupar el 100 % de la celda receptora.
Item 1
Item A

Item 2
Item B

Item 4

<TABLE BORDER WIDTH="50%">


<TR><TD>Item 1</TD><TD>Item 2</TD>
</TR>
<TR><TD>
<TABLE BORDER WIDTH=100%>
<TR><TD>Item A</TD><TD>Item B</TD>
</TR>
</TABLE>
</TD>
<TD>Item 4</TD>
</TR>
</TABLE>

Longitud vertical de las tablas

Tabla que ocupa el 50 % horizontal de la pantalla, y el 25 %


vertical. HEIGHT=25%
HEIGHT=25%
3

Item 2
4

<TABLE BORDER WIDTH="50%" HEIGHT="25%">


<TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>

Fondos de colores o grficos en las tablas


Una tabla de cuatro celdas. Cada una de un color.
Texto ROJO Texto VERDE
Texto AZUL Texto AMARILLO
<TABLE BORDER>
<TR><TD BGCOLOR="RED">Texto ROJO</TD>
<TD BGCOLOR="green">Texto VERDE</TD>
</TR>
<TR><TD BGCOLOR="blue">Texto AZUL</TD>
<TD BGCOLOR="YELLOW">Texto AMARILLO</TD>
</TR>
</TABLE>

En este ejemplo se ha dado color individualmente a cada celda. El


atributo BGCOLOR="color" puede utilizarse en cada elemento de la
tabla para efectos globales. Por ejemplo, para hacer toda la tabla
en rojo, slo sera necesario escribir:
<TABLE BORDER BGCOLOR="red">
....
....
</TABLE>

Para toda la lnea:


<TABLE BORDER>
<TR BGCOLOR="red"><TD> texto </TD></TR>
....
</TABLE>

Tambin se puede usar una imagen como fondo de toda la tabla:


<TABLE BORDER BACKGROUND="yellow_r.gif">
....
....
</TABLE>

De slo una celda:


<TABLE BORDER>
<TR><TD BACKGROUND="yellow_r.gif"> texto </TD></TR>
....

</TABLE>

O de toda la fila:
<TABLE BORDER >
<TR BACKGROUND="yellow_r.gif"><TD> texto </TD></TR>
....
</TABLE>

Bordes de colores en las tablas


Se puede cambiar el color de los bordes de una tabla, aunque este
atributo no funciona igual en todos los navegadores, ya que en el IE
el color afecta a todas las lneas de la tabla, y en Mozilla solamente
a los bordes exteriores. Por ejemplo:
Ejemplo de bordes de color rojo
Ejemplo de bordes de color rojo
<TABLE BORDER=2 bordercolor="red" >
<TR><TD> Ejemplo de bordes</TD><TD> de color rojo </TD></TR>
<TR><TD> Ejemplo de bordes</TD><TD> de color rojo </TD></TR>
</TABLE>

Atributos de ltima generacin


Tabla que solamente muestra los cuatro bordes
ABC
DEF
<TABLE FRAME="border" RULES="none">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

Tabla que solamente muestra los bordes superior e inferior


ABC
DEF
<TABLE FRAME="hsides" RULES="none">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

Tabla que solamente muestra los bordes izquierdo y derecho


ABC
DEF
<TABLE FRAME="vsides" RULES="none">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

Tabla que solamente muestra las lneas de divisin entre


columnas
ABC
DEF
<TABLE FRAME="void" RULES="cols">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

Tabla que solamente muestra las lneas de divisin entre filas


ABC
DEF
<TABLE FRAME="void" RULES="rows">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

Ejemplo de tabla con agrupamientos de columnas y filas


Ejemplo de grupos de columnas y lneas
Columna1 Columna2 Columna3 Columna4 Columna5 Columna6 Columna7
C1L1

C2L1

C3L1

C4L1

C5L1

C6L1

C7L1

C1L2

C2L2

C3L2

C4L2

C5L2

C6L2

C7L2

C1L3

C2L3

C3L3

C4L3

C5L3

C6L3

C7L3

C1L4

C2L4

C3L4

C4L4

C5L4

C6L4

C7L4

C1L5

C2L5

C3L5

C4L5

C5L5

C6L5

C7L5

C1L6

C2L6

C3L6

C4L6

C5L6

C6L6

C7L6

C1L7

C2L7

C3L7

C4L7

C5L7

C6L7

C7L7

<TABLE border="1" frame="border" rules="groups">

<CAPTION>Ejemplo de grupos de columnas y lneas</CAPTION>


<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THEAD valign="top">
<TR>
<TH>Columna1</TH>
<TH>Columna2</TH>
<TH>Columna3</TH>
<TH>Columna4</TH>
<TH>Columna5</TH>
<TH>Columna6</TH>
<TH>Columna7</TH></TR>
<TBODY>
<TR><TD>C1L1<TD>C2L1<TD>C3L1<TD>C4L1<TD>C5L1<TD>C6L1<TD>C7L1</TR>
<TR><TD>C1L2<TD>C2L2<TD>C3L2<TD>C4L2<TD>C5L2<TD>C6L2<TD>C7L2</TR>
<TR><TD>C1L3<TD>C2L3<TD>C3L3<TD>C4L3<TD>C5L3<TD>C6L3<TD>C7L3</TR>
<TR><TD>C1L4<TD>C2L4<TD>C3L4<TD>C4L4<TD>C5L4<TD>C6L4<TD>C7L4</TR>
<TBODY>
<TR><TD>C1L5<TD>C2L5<TD>C3L5<TD>C4L5<TD>C5L5<TD>C6L5<TD>C7L5</TR>
<TR><TD>C1L6<TD>C2L6<TD>C3L6<TD>C4L6<TD>C5L6<TD>C6L6<TD>C7L6</TR>
<TFOOT>
<TR><TD>C1L7<TD>C2L7<TD>C3L7<TD>C4L7<TD>C5L7<TD>C6L7<TD>C7L7</TR>
</TABLE>

Como puedes ver, existe un agrupamiento desde la lnea 1 a la 4, y


otro de la 5 a la 6. A su vez, las columnas 3 y 4 forman un grupo, y
la 5, 6 y 7 otro.
Los dos agrupamientos de columnas se definen con las
instrucciones:
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">

Hay cuatro grupos de filas: La que aparece debajo de las cabeceras


la escribe <THEAD> Las dos lneas que separan los grupos de filas
centrales las producen las dos instrucciones <TBODY>, Y la ltima la
produce <TFOOT>. Por supuesto, no es obligado que esten todas,
puedes poner solamente las que necesites. Todo esto funciona
solamente si en la definicin de la tabla se incluye el
atributo rules="groups"
Tablas con efectos compatibles con todos los navegadores...
Como ya has podido ver, muchos de los efectos de ltima
generacin mostrados no funcionan igual, o no funcionan en absoluto
con todos los navegadores. Qu hacer entonces para conseguir

tablas cuyas lneas de bordes se vean siempre bien? Pues la nica


solucin es usar una tabla sin bordes. S, ya s que lo que buscas no
es eso, pero si utilizando atributos de tabla para poner lneas de
bordes donde queramos hay problemas con algunos navegadores, la
solucin es utilizar otros recursos del HTML que sean admitidos
por todos. No es ninguna solucin mgica: solamente tienes que
crear un grfico con un punto (preferiblemente cuadrado) del color
y grosor que quieras dar a tus lneas... y listo.
Supongamos que queremos conseguir con una tabla representar un
recuadro con bordes rojos. Para ello, utilizando cualquier editor de
grficos creamos un fichero que contenga un punto de color rojo.
Solamente uno, ser casi invisible. No necesitamos ms. Le
llamaremos rojo.gif
Ejemplo de recuadro con ngulos rectos.

Y este sera del cdigo necesario:


<table width="300" height="50"
cellspacing="0" cellpadding="0" border="0" bgcolor="#6a7da5"
align="center">
<tr>
<td rowspan="3" width="1" height="50">
<img src="rojo.gif" width="1px" height="50" border="0"
alt=""></td>
<td colspan="4" height="1">
<img src="rojo.gif" width="300" height="1" border="0"
alt=""></td>
<td rowspan="3" width="1">
<img src="rojo.gif" width="1px" height="50" border="0"
alt=""></td>
</tr>
<tr>
<td colspan="4" align="center" height="48">
<font color="white"><b>Ejemplo de recuadro con ngulos
rectos.</b></font></td>
</tr>
<tr>
<td colspan="4" height="1">
<img src="rojo.gif" width="300" height="1" border="0"
alt=""></td>
</tr>
</table>

Como puedes ver, el truco consiste en definir celdas alrededor de


la celda que lleva el texto. Estas celdas que rodean a la principal
solamente contienen el fichero grfico con el punto. Para conseguir

que aparezcan las lneas, slo hay que "estirar" el punto contenido
en nuestro fichero grfico rojo.gif. Esto nos permite "dibujar" las
lneas que se quieran y donde se quieran, sin problemas de
compatibilidad, ya que estos atributos del elemento <IMG> son
completamente estandarizados (por lo menos de momento). Fjate
en que adems de atributos propios del elemento IMG tambin se
utiliza una instruccin de estilo: width="1px" para asegurar un
grosor mnimo de la lnea. Este es el aspecto de la misma tabla con
los bordes visibles:
Vertical
izquierda

Horizontal arriba
Ejemplo de recuadro
con ngulos rectos.
Horizontal abajo

Vertical
derecha

-------------------Utilizando una tcnica parecida, tambin se pueden conseguir


recuadros con las esquinas redondeadas. Al igual que en el anterior
ejemplo, es necesario tener un grfico previamente, pero este nos
dar algo ms de trabajo. Con cualquier editor de grficos (el
"Paint" de Windows, por ejemplo) generas un crculo del color que
quieras, y con el borde transparente o de otro color. A continuacin
lo cortas en cuatro porciones, como una tarta, y guardas cada trozo
con un nombre cualquiera, por ejemplo, angulo1, angulo2, etc. As
Recuadro con ngulos redondeados

Y este es el cdigo necesario:


<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#DDE0FC" width="20"><img src="angulo1.gif" width="20"
height="20"></td>
<td bgcolor="#DDE0FC"> </td>
<td bgcolor="#DDE0FC" width="20"><img src="angulo2.gif" width="20"
height="20"></td>
</tr>
<tr>
<td bgcolor="#DDE0FC" width="20"> </td>
<td bgcolor="#DDE0FC">Recuadro con ngulos redondeados</td>
<td bgcolor="#DDE0FC" width="20"> </td>
</tr>
<tr>
<td bgcolor="#DDE0FC" width="20"><img src="angulo4.gif" width="20"
height="20"></td>

<td bgcolor="#DDE0FC"> </td>


<td bgcolor="#E5E7FD" width="20"><img src="angulo3.gif" width="20"
height="20"></td>
</tr>
</table>

Como puedes ver, para que el efecto sea completo hay que dar el
mismo color que tienen los grficos como fondo de las celdas. Estos
son los cuatro grficos necesarios:
angulo1.gif

angulo2.gif

angullo4.gif

angulo3.gif

Cdigos hexadecimales de color


Estos cdigos de color se pueden utilizar como valor de atributo en
los elementos <FONT COLOR> y <BODY BGCOLOR FGCOLOR TEXT
LINK VLINK ALINK>. Algunos no funcionarn en ciertos
visualizadores, as como si Windows no est configurado con 256
colores al menos.
La codificacin de estos colores est basada en mezclas cromticas
RGB (RED GREEN BLUE), es decir, se mezclan ciertas cantidades
de los tres colores bsicos (rojo verde y azul), para conseguir el
color deseado. La cantidad de cada color est definida por el cdigo
que utilizamos, que tiene seis dgitos en hexadecimal. Si los
cortamos en 3 grupos de dos de izquierda a derecha, obtendremos
la cantidad (en hexadecimal) de cada color.
La sintaxis para cambiar el fondo de la pgina (background) a color
rojo es: <BODY BGCOLOR=#FF0000> y para dar color al texto, ver
la pgina Texto de colores. Para combinaciones generales de
colores, ver el ejemplo de control de colores.
Lista de cdigos RGB

Puedes probar los diez primeros para hacerte una idea, o puedes
verlos todos desde aqu
White rgb=#FFFFFF
Red rgb=#FF0000

Green rgb=#00FF00

Blue rgb=#0000FF

Magenta rgb=#FF00FF
Cyan rgb=#00FFFF

Yellow rgb=#FFFF00
Black rgb=#000000

Aquamarine rgb=#70DB93

Baker's Chocolate rgb=#5C3317


Blue Violet rgb=#9F5F9F
Brass rgb=#B5A642

Bright Gold rgb=#D9D919


Brown rgb=#A62A2A

Bronze rgb=#8C7853

Bronze II rgb=#A67D3D

Cadet Blue rgb=#5F9F9F

Cool Copper rgb=#D98719


Copper rgb=#B87333
Coral rgb=#FF7F00

Corn Flower Blue rgb=#42426F


Dark Brown rgb=#5C4033
Dark Green rgb=#2F4F2F

Dark Green Copper rgb=#4A766E


Dark Olive Green rgb=#4F4F2F
Dark Orchid rgb=#9932CD
Dark Purple rgb=#871F78

Dark Slate Blue rgb=#6B238E

Dark Slate Grey rgb=#2F4F4F


Dark Tan rgb=#97694F

Dark Turquoise rgb=#7093DB


Dark Wood rgb=#855E42
Dim Grey rgb=#545454

Dusty Rose rgb=#856363


Feldspar rgb=#D19275

Firebrick rgb=#8E2323

Forest Green rgb=#238E23


Gold rgb=#CD7F32

Goldenrod rgb=#DBDB70
Grey rgb=#C0C0C0

Green Copper rgb=#527F76


Green Yellow rgb=#93DB70
Hunter Green rgb=#215E21
Indian Red rgb=#4E2F2F
Khaki rgb=#9F9F5F

Light Blue rgb=#C0D9D9

Light Grey rgb=#A8A8A8

Light Steel Blue rgb=#8F8FBD


Light Wood rgb=#E9C2A6
Lime Green rgb=#32CD32

Mandarian Orange rgb=#E47833


Maroon rgb=#8E236B

Medium Aquamarine rgb=#32CD99


Medium Blue rgb=#3232CD

Medium Forest Green rgb=#6B8E23


Medium Goldenrod rgb=#EAEAAE
Medium Orchid rgb=#9370DB

Medium Sea Green rgb=#426F42


Medium Slate Blue rgb=#7F00FF

Medium Spring Green rgb=#7FFF00


Medium Turquoise rgb=#70DBDB

Medium Violet Red rgb=#DB7093


Medium Wood rgb=#A68064
Midnight Blue rgb=#2F2F4F
Navy Blue rgb=#23238E

Neon Blue rgb=#4D4DFF


Neon Pink rgb=#FF6EC7

New Midnight Blue rgb=#00009C


New Tan rgb=#EBC79E
Old Gold rgb=#CFB53B
Orange rgb=#FF7F00

Orange Red rgb=#FF2400


Orchid rgb=#DB70DB

Pale Green rgb=#8FBC8F


Pink rgb=#BC8F8F

Plum rgb=#EAADEA

Quartz rgb=#D9D9F3

Rich Blue rgb=#5959AB


Salmon rgb=#6F4242
Scarlet rgb=#8C1717

Sea Green rgb=#238E68

Semi-Sweet Chocolate rgb=#6B4226


Sienna rgb=#8E6B23
Silver rgb=#E6E8FA

Sky Blue rgb=#3299CC

Slate Blue rgb=#007FFF


Spicy Pink rgb=#FF1CAE

Spring Green rgb=#00FF7F


Steel Blue rgb=#236B8E

Summer Sky rgb=#38B0DE


Tan rgb=#DB9370

Thistle rgb=#D8BFD8

Turquoise rgb=#ADEAEA

Very Dark Brown rgb=#5C4033


Very Light Grey rgb=#CDCDCD
Violet rgb=#4F2F4F

Violet Red rgb=#CC3299


Wheat rgb=#D8D8BF

Yellow Green rgb=#99CC32

Control de colores
Este es un documento de ejemplo de control de color. El texto es gris claro sobre
negro, y los links son amarillos al principio, azul-verde cuando son activados, y
verdes despus de haber sido utilizados.

Todo son atributos del elemento <BODY>. Se escribe as:


<BODY BGCOLOR="#000000" FGCOLOR="#00FF00" TEXT="#F0F0F0"
LINK="#FFFF00" VLINK="22AA22" ALINK="#0077FF">

Por qu hay que usar cdigos?

Existen diversos sistemas operativos dentro del mundo de los


ordenadores. Estos sistemas no son otra cosa que unos programas
especiales que se ejecutan inmediatamente despus de encender el
ordenador, y son los que se encargan de darle "vida" a nuestra
mquina.
Junto con estos programas, los ordenadores cargan en memoria
unas tablas especiales que coinciden con los caracteres que tiene tu
teclado y algunos ms que no estn en el mismo, pero que se pueden
escribir en pantalla por otros medios. Estas tablas,
desafortunadamente, no son siempre las mismas, y varan de un
sistema a otro, de una marca de ordenador a otra, de un modelo de
teclado a otro, y por supuesto, de un idioma a otro. Por ejemplo, no
se ven igual las letras con acentos desde un PC que desde un
MACintosh, o una terminal UNIX, si las escribimos directamente
desde el teclado.
Dado que el HTML pretende ser un lenguaje universal, y que una
pgina debe verse como su creador desea, sin importar si estamos
ante un ordenador que "habla" en ingls o en espaol, o que tiene tal
o cual sistema operativo, se ha creado una tabla de caracteres
"conflictivos" (en realidad estn todos, pero generalmente slo se
usa para caracteres especiales) que se escriben con un cdigo en
lugar de pulsar la tecla que lo contiene directamente.
Por ejemplo, nuestra denostada en medio mundo "" se escribir:
&Ntilde;

o bien &#209;

Esto habr que hacerlo con todos los caracteres que no sean las
letras del alfabeto (maysculas y minsculas), los nmeros y unos
pocos signos, como el punto, la coma, el guin y algunos otros. A
este conjunto de caracteres, comn para todos los sistemas, se le
denomina cdigo ASCII, y desde luego hay que codificar todas las
letras acentuadas, ees, cedillas, etc., etc.
En el ndice encontrars una tabla con todos los caracteres,
tambin estn las letras, pero stas slo te sern tiles en caso de

necesitar escribir textos un tanto raros o destinados a terminales


que no trabajen con la tabla ASCII.
Como puedes ver, la tabla tiene una columna con el carcter
deseado seguida de su cdigo numrico en base decimal, una
descripcin del carcter y despus un nombre corto (una especie de
alias) que para los ms habituales se llegan a memorizar, y para
cosas cortas, ayudan. No todos tienen ese nombre corto, y esos hay
que escribirlos con el cdigo numrico. En algunos casos especiales
que se vern ms adelante, habr que escribir los cdigos
numricos en base hexadecimal (la calculadora de Windows tiene un
conversor).
Generalmente, se pueden escribir directamente desde teclado
todos los que no tienen alias en la tabla, los que s tienen
normalmente darn problemas en sistemas diferentes al que se ha
utilizado para escribir el documento. Si lo que escribes en HTML
tienes la seguridad de que slo va a ser utilizado como ficheros
locales en mquinas similares a la tuya, no ser necesario
complicarse la vida; pero si tus pginas van a residir en un servidor
web, cualquier tipo de mquina podr acceder a ellas, y su aspecto
no ser el adecuado en algunas.
Existen multitud de editores especiales para escribir HTML, y la
mayora de ellos tienen herramientas para convertir de forma
automtica los caracteres especiales a su correspondiente cdigo.
Tambin hay paquetes de "macros" para hacer lo mismo con
procesadores de texto como Word o Word Perfect. Puedes
comprobar el cdigo de un carcter cualquiera en tu mquina
(Windows) manteniendo pulsada la tecla Alt y escribiendo el
cdigo con el teclado numrico. Por ejemplo, Alt 6 5 devuelve la
letra A. Todos los sistemas operativos tienen similares
combinaciones de teclas para esto.

Tabla de cdigos de caracteres


Actualmente existen muchos ms, con cdigos de 4 dgitos, como el
euro. Estos son algunos de los ms utilizados.

Caracter
Cdigo
!
&#33;
"
&#34;
#
&#35;
$
&#36;
%
&#37;

&#8240;
&
&#38;
'
&#39;
(
&#40;
)
&#41;
*
&#42;
+
&#43;
,
&#44;
&#45;
.
&#46;
/
&#47;
0-9
&#48; - &#57;
:
&#58;
;
&#59;
<
&#60;
<
&#60;
=
&#61;
>
&#62;
>
&#62;
?
&#63;
@
&#64;
A - Z &#65; - &#90;
[
&#91;
\
&#92;
]
&#93;
^
&#94;
_
&#95;
`
&#96;
a - z &#97; - &#122;
{
&#123;
|
&#124;
}
&#125;
~
&#126;

Descripcin
Cerrar exclamacin
Dobles comillas
Signo de nmero
Dlar
Tanto por ciento
Tanto por mil
Ampersand
Apstrofe
Cerrar parntesis
Abrir parntesis
Asterisco
Signo ms
Coma
Guin
Punto
Barra de divisin
Dgitos del al 0-9
Dos puntos
Punto y coma
Menor
Menor
Igual
Mayor
Mayor
Cerrar interrogacin
Arroba
Letras A-Z
Cerrar corchete (izquierdo)
Barra inversa
Abrir corchete
Circunflejo
Subrayado
Acento agudo
Letras a-z
Abrir llave
Barra vertical
Cerrar llave
Tilde

Alias
------amp
-------------lt
--gt
---------------

&#160;
&#161;
&#162;
&#163;
&#164;
&#165;
&#166;
&#167;
&#168;
&#169;
&#170;
&#171;
&#172;
&#173;
&#174;
&#175;
&#176;
&#177;
&#178;
&#179;
&#180;
&#181;
&#182;
&#183;
&#184;
&#185;
&#186;
&#187;
&#188;
&#189;
&#190;
&#8539;
&#8540;
&#8541;
&#8542;
&#191;
&#192;
&#193;
&#194;

Espacio sin separacin


Abrir exclamacin
Centavo
Libra Esterlina
Signo de divisa general
Yen
Barra vertical partida (pipe)
Seccin
Diresis
Copyright
Doa
Abrir comillas francesas
No (smbolo lgico)
Guin dbil
Registrado
Macrn
Grados
Ms-menos
Dos superndice
Tres superndice
Acento agudo
Micro
Fin de prrafo
Punto medio
Cedilla
Uno superndice
Gnero masculino
Cerrar comillas francesas
Un cuarto
Un medio
Tres cuartos
Un octavo
Tres octavos
Cinco octavos
Siete octavos
Abrir interrogacin
A mayscula, acento grave
A mayscula, acento agudo
A mayscula, acento circunflejo

nbsp
iexcl
cent
pound
curren
yen
brvbar
sect
uml
copy
ordf
laquo
not
shy
reg
macr
deg
plusmn
sup2
sup3
acute
micro
para
middot
cedil
sup1
ordm
raquo
frac14
frac12
frac34
----iquest
Agrave
Aacute
Acirc

&#195;
&#196;
&#197;
&#198;
&#199;
&#200;
&#201;
&#202;
&#203;
&#204;
&#205;
&#206;
&#207;
&#208;
&#209;
&#210;
&#211;
&#212;
&#213;
&#214;
&#215;
&#216;
&#217;
&#218;
&#219;
&#220;
&#221;
&#222;
&#223;
&#224;
&#225;
&#226;
&#227;
&#228;
&#229;
&#230;
&#231;
&#232;
&#233;

A mayscula, tilde
A mayscula, diresis
A mayscula, anillo
AE mayscula
C cedilla mayscula
E mayscula, acento grave
E mayscula, acento agudo
E mayscula, acento circunflejo
E mayscula, diresis
I mayscula, acento grave
I mayscula, acento agudo
I mayscula, acento circunflejo
I mayscula, diresis
Eth mayscula
Ee mayscula
O mayscula, acento grave
O mayscula, acento agudo
O mayscula, acento circunflejo
O mayscula, tilde
O mayscula, diresis
Signo de multiplicacin
O barrada mayscula
U mayscula, acento grave
U mayscula, acento agudo
U mayscula, acento circunflejo
U mayscula, diresis
Y mayscula, acento agudo
THORN mayscula
Beta minscula
a minscula, acento grave
a minscula, acento agudo
a minscula, acento circunflejo
a minscula, tilde
a minscula, diresis
a minscula, anillo
ae mnuscula
c cedilla minscula
e minscula, acento grave
e minscula, acento agudo

Atilde
Auml
Aring
AElig
Ccedil
Egrave
Eacute
Ecirc
Euml
Igrave
Iacute
Icirc
Iuml
ETH
Ntilde
Ograve
Oacute
Ocirc
Otilde
Ouml
times
Oslash
Ugrave
Uacute
Ucirc
Uuml
Yacute
THORN
szlig
agrave
aacute
acirc
atilde
auml
aring
aelig
ccedil
egrave
eacute

&#234;
&#235;
&#236;
&#237;
&#238;
&#239;
&#240;
&#241;
&#242;
&#243;
&#244;
&#245;
&#246;
&#247;
&#248;
&#249;
&#250;
&#251;
&#252;
&#253;
&#254;
&#255;
&#8364
&#8800;
&#8804;
&#8805;
&#8730;
&#8486;
&#8593;
&#8595;
&#8592;
&#8594;
&#8596;
&#8470;
&#9650;
&#9658;
&#9660;
&#9668;
&#9632;

e minscula, acento circunflejo


e minscula, diresis
i minscula, acento grave
i minscula, acento agudo
i minscula, acento circunflejo
i minscula, diresis
eth minscula
ee minscula
o minscula, acento grave
o minscula, acento agudo
o minscula, acento circunflejo
o minscula, tilde
o minscula, diresis
Signo de divisin
o barrada minscula
u minscula, acento grave
u minscula, acento agudo
u minscula, acento circunflejo
u minscula, diresis
y minscula, acento agudo
thorn minscula
y minscula, diresis
Euro
Distinto de
Menor o igual que
Mayor o igual que
Radical
Omega
Flecha arriba
Flecha abajo
Flecha izquierda
Flecha derecha
Flecha izq-der
N
Flecha ar
Flecha de
Flecha ab
Flecha iz
Cuadrado lleno

ecirc
euml
igrave
iacute
icirc
iuml
eth
ntilde
ograve
oacute
ocirc
otilde
ouml
divide
oslash
ugrave
uacute
ucirc
uuml
yacute
thorn
yuml
euro
ne
le
ge
radic
-uarr
darr
larr
rarr
harr
-------

&#9633;
&#9642;
&#9643;
&#9679;
&#9675;
&#9674;

Cuadrdo vacio
Mini cuadrado lleno
Mini cuadrado vacio
Punto lleno
Punto vacio
Rombo vacio

-----loz

Creacin de enlaces (links)


El siguiente es sin duda el elemento ms importante del HTML, ya
que permite realmente "navegar" por uno o varios documentos, que
pueden residir en cualquier parte, parecindonos que siempre
estamos en el mismo; a esto se le llama hipertexto ya que con esta
posibilidad, en realidad, nuestro documento puede ser infinito... En
efecto, para la persona que est leyendo sobre un determinado
tema, no hay diferencias ostensibles que le hagan notar dnde est
el documento que lee. Para el lector, todo parece un mismo
documento, cuando en realidad, probablemente el conjunto de lo
que lee est repartido por medio mundo, o en un plano ms modesto,
el documento ledo puede estar compuesto en realidad por varios
cientos de pginas que "saltan" de unas a otras sin notarlo.
Todo esto lo consigue el elemento <A> (por Anchor, en ingls = ancla
o punto de anclaje). En lo sucesivo le llamaremos enlace o
sinplemente link (en ingls link=eslabn o enlace).
Pero seguramente te preguntars qu es eso de un "link". Pues un
link es un rea de la pantalla, que puede contener una o varias
palabras o una imagen, que es "sensible" al puntero del ratn, y al
ponerlo sobre ella y pulsar el botn izquierdo el visualizador llamar
a la pgina que tiene asignada el link. Habitualmente por defecto los
visualizadores sealan un rea linkada subrayndola, si es texto, o
ponindole un borde si es una imagen, ambas cosas en color azul. Por
supuesto, eso se puede cambiar en las configuraciones de
visualizador. Si no se desea que aparezca el subrayado para
mejorar la esttica, se puede parametrizar con una instruccin de
estilo. Si decides eliminar el subrayado por defecto de los links,

puede ser buena idea cambiarlo por otro tipo de efecto o indicacin
que facilite al lector el saber qu texto contiene un link, de lo
contrario, posiblemente, no llegue a utilizarlos nunca.
Generalmente, el visitante no se dedicar a "pasear" el ratn por
toda la pgina buscando enlaces ocultos.
Se escribir:
<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba
</A>.

Y se vera as: Link de prueba


Si lo que se desea es que aparezca sin subrayado o de otro color, o
ambas cosas, se puede recurrir a una instruccin de estilo. As:
<A HREF="http://www.miservidor.es/mifichero.htm"
style="color:red; text-decoration:none";> Link de prueba
</A>.

Y se vera as: Link de prueba


algunos navegadores antiguos)

(Esto puede que no funcione en

El elemento <A> tiene dos atributos: HREF y NAME.


En el ejemplo de arriba al atributo HREF se le asigna el valor que
aparece entre
comillas: "http://www.miservidor.es/mifichero.htm". El texto
sobre el que se monta el enlace esLink de prueba y realiza un link
con el fichero mifichero.htm que est en el
servidor www.miservidor.es.
Esta forma de escribir la ruta del link de forma completa, se utiliza
cuando hay que saltar de una mquina a otra, si el enlace es para
otra pgina de nuestro propio servidor es suficiente escribir la ruta
virtual corta: /mifichero.htm o
bien: /otro_directorio/mifichero.htm segn proceda.
Como has visto, el punto de enlace se realiza en el texto escrito
antes del cierre del elemento </A>, pero tambin puede hacerse
con una imagen cualquiera, que ira en lugar del texto, incluso

puedes poner el texto junto con una imagen. Por ejemplo para hacer
un link que nos lleve al ndice desde una bola roja, se escribe:
Ir al ndice <A HREF="indice.htm"> <img src="bolaroja.gif"> </A>.

Y este sera el resultado:

Ir al ndice

Al igual que el texto aparece subrayado en azul cuando forma parte


de un enlace, los grficos reciben un borde azul alrededor de toda
la imagen, lo que a veces puede resultar poco esttico. Esto
tambin tiene solucin, pero aqu se hace en la instruccin de la
imagen:
Ir al ndice <A HREF="indice.htm"> <img src="bolaroja.gif"
border=0> </A>.

Y este sera el resultado:

Ir al ndice

El valor de los atributos hay que escribirlos EXACTAMENTE como


se deba. En el ejemplo anterior no funcionara el link si
escribiramos www.miservidor.es en maysculas o con alguna otra
diferencia, eso es un nombre de mquina y sera interpretado como
OTRA mquina. Esto es aplicable a todos los
parmetros: servicio (http://) servidor(www.miservidor.es)
y fichero (mifichero.htm).
Estas precauciones son ineludibles en el caso de servidores
montados en mquinas con sistema operativo UNIX. En el caso de
que el servidor resida en una mquina con Windows NT o Windows
95/98, es indiferente. Si no se sabe el sistema que tiene la
mquina, es mejor atenerse a la forma UNIX.
Dentro de los parmetros pasados a HREF, podrs ver que al
principio pone http://, esto es, el tipo de servicio al que el
visualizador va a llamar, y hay varios :
Servicio
http://
ftp://
news://
mailto://
file:///C|

Descripcin
Servicios WWW
Servicios FTP
Servicios NEWS
Servicios E-mail
Fichero local

Ejemplo
<A HREF="http://www.uv.es/"> WWW</A>
<A HREF="ftp://ftp.uv.es/">FTP</A>
<A HREF="news://news.uv.es/">NEWS</A>
<A HREF="mailto:jac@uv.es/">E-mail</A>
<A HREF="indice.htm/">Fichero</A>

Efecto
WWW
FTP
NEWS
E-mail
Fichero

Adems de HREF, el elemento <A> puede tener otro


atributo: TARGET. Se utiliza para ordenar la apertura de otra
ventana del visualizador con la pgina que se desee. Se escribir:
<A HREF="indice.htm" TARGET="Ventana-2"> </A>

Esta instruccin mostrar la pgina indice.htm pero con otra


ventana del visualizador, es decir tendremos lanzado el
visualizador 2 veces.
Del mismo modo, el atributo TARGET puede utilizarse para salir de
una pantalla compuesta de frames. En efecto, si estamos en una
pantalla con, por ejemplo, dos frames, cualquier link invocado desde
cualquiera de ellos, hace que la pgina llamada aparezca en ese
mismo frame. Para volver a una pantalla "normal" sin frames, se
puede escribir un link con la sintaxis siguiente:
<A HREF="indice.htm" TARGET="_parent"> </A>

Existen otros valores para TARGET:


TARGET="_blank": Para que el enlace se muestre en una nueva
ventana vaca. Tambin puede darse un nombre cualquiera con el
mismo efecto.
TARGET="_self": Para mostrar el enlace en la misma ventana o
frame que lo referencia (valor por defecto).
TARGET="_top": El documento solicitado se cargar en la pantalla
actual, ocupando toda la ventana y destruyendo la estructura de
frames anterior, si existe.
Como se acaba de ver, el atributo HREF sirve para enlazar con otro
documento, que puede estar en un servidor o ser un fichero local,
pero que siempre se nos presentar desde la primera lnea del
mismo.
El atributo NAME se utiliza para definir algo as como "un punto de
aterrizaje" en cualquier lnea del documento de destino, de forma
que nos aparecer en pantalla desde la lnea deseada y no desde el
principio. Esto es muy til cuando se trata de documentos largos
divididos en secciones.
Se escribir as:

En el documento activo:
<A HREF="http://www.miservidor.es/mifichero.htm#punto1"> Ir al punto
1</A>

En el documento destino:
<A NAME="punto1"></A>

NAME tambin puede utilizarse para saltar de una lnea a otra


dentro de un mismo documento. Se escribir as:
Dentro del documento activo En la lnea de partida:
<A HREF="#punto1">Ir al punto 1</A>

En la lnea de destino
<A NAME="punto1"></A>

Por ejemplo, si haces "clik" aqu con el ratn, saltars al principio


de esta pgina.
Como habrs visto en el cuadro de arriba, es posible enviar un email desde un link con la instruccin: <A
HREF="mailto:jac@uv.es">Enviar e-mail</A>. Con esta sintaxis se
invoca al cliente de correo predeterminado para que abra una
ventana con la direccin deseada ya escrita. Si adems quieres que
dicha ventana se abra con el asunto (subject) y el texto (body) ya
escritos se puede conseguir as:
<A HREF="mailto:jac@uv.es?&subject=Asunto de
prueba&body=Texto de prueba">Enviar e-mail</A>
De forma similar, se puede escribir un enlace para que invoque a
una funcin de JavaScript. Esto es muy til cuando se disean
mens o contenidos dinmicos.
Por ejemplo, si escribes:
<a href="javascript:document.write('Prueba de
JavaScript')">Prueba </A>
Se obtiene: Prueba
Con los links, al igual que con los formularios, es posible moverse
usando la tecla de tabulacin, para conseguir que el enfoque salte

de un link a otro en un cierto orden. Para ello se utiliza el


atributo tabindex. Por ejemplo, pulsa la tecla "Tab":
Tablas Imgenes Body
Como puedes ver, los saltos en esta lnea se han producido siguiendo
la numeracin indicada por los disintos tabindex, al resto de links
se llega por orden de escritura. Se escribe:
<A HREF="tablas.htm" tabindex="2">Tablas</A>
<A HREF="imagen1.htm" tabindex="3">Imgenes</A>
<A HREF="body.htm" tabindex="1">Body</A>

Esto solamente funciona con versiones recientes de navegadores.


Otro atributo reciente de los links es title que permite escribir una
descripcin del link sin necesidad de pulsar en l, simplemente
poniendo encima el puntero del ratn. Por ejemplo:
<A HREF="tablas.htm" title="Saltar a la seccin de tablas">Tablas</A>

Se obtiene: Tablas

Debes saber que...

El texto que pongas despus del smbolo # puede ser


cualquiera, siempre que no tenga espacios en blanco,
caracteres especiales ni caracteres codificados, y por
supuesto, que no est repetido en el mismo documento de
destino.
Si en el documento de destino no existe el punto definido en
el documento de origen, el visualizador nos presentar en
pantalla la ltima lnea del mismo.
Cuando hagas un link, es preferible utilizar direcciones
relativas. Si utilizas direcciones absolutas y despus tienes
que mover los ficheros por cualquier razn, tendrs que
modificar todas las direcciones.
Si al hacer un link, despus del nombre de la mquina no pones
el nombre de un fichero, por defecto el servidor entiende que
se le pide la "home page" (pgina inicial) de ese directorio.
Generalmente (aunque depende de la configuracin del

servidor) el fichero inicial de un directorio suele ser


index.htm o default.htm
Si un servidor no tiene definida pgina inicial, simplemente
nos mostrar una lista de todos los ficheros y directorios que
tenga en el directorio definido como raz si el servidor tiene
activada la opcin de listar directorios, en caso contrario,
dar un error.
Si despus de la direccin de la mquina a la que le haces el
link en lugar de un nombre de fichero pones el de un
directorio, generalmente el servidor nos mostrar un simple
listado de los ficheros y directorios que ste contenga si el
servidor tiene activada la opcin de listar directorios, en caso
contrario, dar un error.
No slo puedes montar el link sobre un texto, tambin puedes
hacerlo sobre una imagen cualquiera. Es decir, despus del
link y antes de </A> puedes poner lo que quieras.
El arte de escribir buen HTML reside en dar una buena
estructura a la informacin. Siempre que puedas huye de
crear pginas muy largas. Crea cuantas necesites, con buena
estructura y enlzalas con cuantos links sean precisos.
Recuerda: si tu trabajo HTML no va a residir en un servidor
en red, y has utilizado direcciones absolutas, al hacer un link,
no empieces con aquello de: "http://....". No funcionar.
Si continuas deseando poner direcciones absolutas con
ficheros locales, tendr que ser
as file:///C:/MIDIRECTORIO/mifichero.htm
Despus de C (que puede ser A, B, D o la unidad de disco que
quieras) fjate en que las barras que separan los directorios y
ficheros son barras a la derecha.

Insertar imgenes
Insertar imgenes en un documento permite crear pginas mucho
ms atractivas. Segn el tipo de grficos utilizado se pueden
conseguir efectos realmente sorprendentes.

Para insertar una imagen en un documento HTML se utiliza el


elemento <IMG>. Este elemento puede ir acompaado de los
atributos SRC ALT ISMAP ALIGN WIDTH HEIGHT BORDER
VSPACE HSPACE. Con las nuevas implementaciones que Netscape
hace del elemento, se consiguen efectos de imagen flotante y por
tanto se ha hecho necesario dotar al elemento <BR> del
atributo CLEAR.
Las imgenes utilizadas pueden estar en
formato BMP (Bit Mapped Picture), GIF (Graphics Interchange For
mat), JPEG (Joint Photographic Experts Group)
o PNG (PortableNetwork Graphics). Estos formatos son
interpretados directamente por el navegador. Las diferencias
bsicas entre ellos son varias:
BMP Estos grficos soportan hasta 24 bits (16 millones de colores).
Al aumentar su tamao escalndolos, pierden calidad, es decir, se
"pixelean". No acepta transparencia. Es el de mayor peso de
archivo, debido a que no usa ninguna compresin.
GIF Solamente soporta 256 colores, por lo que no es adecuado para
representar fotografas, pero s es recomendado para iconos,
logotipos o imgenes que tengan colores slidos. Al aumentar su
tamao escalndolos, pierden calidad, es decir, se "pixelean". El
archivo resultante es de poco peso por su algoritmo de compresin
sin prdidas. Acepta transparencia (canal alfa) nicamente en uno
de los 256 colores de la paleta. Soporta animaciones.
PNG Es un formato pensado como una versin mejorada del formato
GIF. En este caso, una misma imagen, sin prdidas, ocupara menos
espacio que en formato GIF (>10%). Soporta color verdadero (hasta
64 bits con canal alfa). Las imgenes en PNG permiten
transparencia variable de hasta 256 niveles. El canal alfa de PNG
permite utilizar una mayor profundidad de bits para lograr efectos
de semi-transparencia, como los objetos translcidos. No soporta
animaciones.

JPEG (ms conocido como JPG) soporta hasta 16 millones de


colores (24 bits) y comprime el tamao del archivo final utilizando
un algoritmo de compresin con prdida. Es decir, que al convertir
una imagen a este formato, una parte de la informacin es
desechada (algo parecido a lo que ocurre con los ficheros mp3 de
sonido). Los editores de grficos permiten ajustar la cantidad de
informacin original que se quiere perder. Es decir, que si se opta
por la mxima compresin para obtener el menor peso posible, la
imagen final puede ser muy deficiente. No permite transparencias
ni animacin.
Se puede usar cualquier otro formato como el MPG o el AVI (ambos
de vdeo), pero entonces el visualizador llamar a un programa
auxiliar, que previamente le habrs definido, para que sea ste el
que visualice el fichero. La desventaja de las imgenes en formatos
no tratados por el propio visualizador es que no vers el texto junto
con la imagen, y por tanto no podrs imprimir la pgina compuesta.
para evitar esto, se utilizan los llamados "plug-in" que consisten en
pequeos programas que permiten llamar a aplicaciones especficas
ejecutndose como ventanas del navegador. Un ejemplo muy comn
son los ficheros .pdf.
Algunos navegadores no son capaces de tratar imgenes, o aunque
el navegador s pueda, tal vez el cliente est navegando en modo
solo texto, es decir, sin ver las imgenes, lo que permite moverse
ms rpido. Para estos casos podemos recurrir al atributo ALT (por
alternativo) para definir un texto que aparecer en lugar de la
imagen. Esto es importante cuando una imagen, adems de ser un
elemento decorativo o informativo, soporta un link. El uso
de ALT es recomendado por el W3C.
Veamos ejemplos del uso de <IMG>:
Imagen alineada a la izquierda (por defecto)
<IMG SRC="sugeren.gif">texto texto texto texto
texto texto texto texto

texto texto texto texto texto texto texto texto


texto texto texto texto texto texto texto texto texto texto
Imagen con un texto alternativo
Sirve para que, si no es posible cargar la imagen, aparezca un texto
en su lugar. Tambin se utiliza para que al colocar el puntero del
ratn sobre la imagen, sin pulsar, aparezca el texto. Para verlo
tienes de deshabilitar la opcin de cargar imgenes de tu
visualizador (slo es posible con Netscape).
<IMG SRC="sugeren.gif" ALT="AQUI VA UNA IMAGEN">

Imagen alineada a la izquierda.Texto alineado arriba


<IMG SRC="sugeren.gif" ALIGN=TOP> texto texto texto texto texto
texto exto texto texto texto texto texto

texto texto texto texto texto texto texto texto


texto texzto texto texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado abajo
<IMG SRC="sugeren.gif" ALIGN=BOTTOM> texto texto texto texto texto
texto exto texto texto texto texto texto

texto texto texto texto texto texto texto texto


texto texzto texto texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado al centro
<IMG SRC="sugeren.gif" ALIGN=MIDDLE> texto texto texto texto texto
texto exto texto texto texto texto texto

texto texto texto texto texto texto texto texto


texto texzto texto texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado a la derecha de
la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto
texto texto texto texto texto texto texto

texto texto texto texto texto texto texto texto


texto texzto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
texto texto texto

Imagen alineada a la izquierda.Texto envolviendo la imagen


<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto <BR
CLEAR>
texto texto texto texto texto texto texto

texto texto texto texto texto texto texto texto


texto texzto texto texto texto texto texto texto
texto texto texto texto texto texto
texto texto texto texto texto texto texto
Imagen alineada a la derecha.Texto alineado a la izquierda de
la imagen
<IMG SRC="sugeren.gif" ALIGN=RIGHT> texto texto texto texto texto
texto texto texto texto texto texto texto

texto texto texto texto texto texto texto texto


texto texzto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
texto texto texto
Si tu visualizador no soporta esto, hay un truco para conseguir algo
parecido:
<TABLE> <TR><TD>texto texto texto texto texto texto texto texto
texto texto texto texto</TD><TD align=center><IMG
SRC="sugeren.gif"></TD></TR> </TABLE>
texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto

Imagen redimensionada a ms.Texto alineado a la derecha de la


imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=272 HEIGHT=92 > texto texto
texto
texto texto texto texto texto texto
texto texto texto

texto texto texto texto texto


texto texto texto texto texzto
texto texto texto texto texto
texto texto texto texto texto
texto texto texto texto texto texto texto texto texto.

Aqu la imagen es la misma de los ejemplos anteriores, pero ha sido


redimensionada por el visualizador. Su tamao original es de
136x46 puntos. Este es su aspecto al doble: 272x92.
Imagen redimensionada a menos.Texto alineado a la derecha de
la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=75 HEIGHT=20 > texto texto
texto
texto texto texto texto texto texto texto texto texto

texto texto texto texto texto texto texto texto texto


texzto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto.
Aqu la imagen es la misma de los ejemplos anteriores, pero ha sido
redimensionada por el visualizador. Su tamao original es de
136x46 puntos. Este es su aspecto a la mitad: 75x23
Consideraciones sobre WIDTH y HEIGHT

Estos dos atributos, adems de para variar el tamao de un grfico,


tambin pueden (casi deben) utilizarse con los valores naturales del
mismo. Es decir, que no se pretende alterar las dimensiones del
grfico. Y te preguntars que finalidad tiene esto. La razn estriba
en cmo funcionan los navegadores. Cuando el navegador solicita
una pgina y comienza a recibirla, lo primero que hace es leer la
cabecera, a continuacin lee el cdigo del BODY y por ltimo carga
las imgenes que contenga la pgina haciendo nuevas conexiones al
servidor para cada una de ellas.
Esta forma de trabajar tiene como consecuencia, que si en el cdigo
del BODY no hay instrucciones sobre el espacio que hay que
reservar en pantalla para cada imagen, cuando stas lleguen en el
ltimo paso de la carga de la pgina, el texto ya estar compuesto,
pero al no saber el tamao de las imgenes, no se habr reservado
el espacio adecuado para insertarlas, por lo que todo el texto ser
desplazado hacia abajo, con la consiguiente prdida del formato
original de la pgina, ya que el navegador no va a recomponer el
texto que ya estaba escrito.

Imagen alineada a la izquierda con marco.Texto alineado a la


derecha de la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT BORDER=5> texto texto texto texto
texto
texto texto texto texto texto texto texto

texto texto texto texto texto texto texto texto


texto texzto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
texto texto texto
Imagen alineada a la izquierda.Texto alineado a la derecha de
la imagen. Espacios verticales y horizontales vacos forzados.
texto texto texto texto texto texto texzto texto texto texto texto
texto
<IMG SRC="sugeren.gif"> ALIGN=LEFT HSPACE=100 VSPACE=30> texto texto
texto
texto texto texto texto texto texto texto texto texto texto texto
texto
texto texto texto

texto texto texto texto texto texto


texzto texto texto texto texto texto
texto texto texto texto texto texto
texto texto texto texto texto texto
texto texto texto texto texto texto
texto texto texto texto texto texzto texto texto texto texto
texto texto texto texto texto texto texto texzto texto texto
texto texto texto texto texto texto texto texto texto texzto
texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto
Usar una imagen como punto de montaje de un link
texto texto <A HREF="indice.htm"><IMG SRC="sugeren.gif" ></A>texto
texto.

Como puedes ver, la imagen aparece rodeada de un marco de color


como es habitual en los puntos de link (en el texto es el subrayado).
Si quieres eliminar el marco, escribe:
....

IMG SRC="sugeren.gif" BORDER=0 >

Ahora que ya sabes cmo manejar las imgenes, veamos algunos


efectos especiales algo ms complicados.
Mapeado de una imagen para usarla como direccionador
<A HREF="/cgi-bin/imagemap/mimapa"><IMG SRC="sugeren.gif" ISMAP></A>

Si mueves el ratn por encima de la imagen, vers que en la


ventanita de estado del navegador (en la parte inferior izquierda de
la ventana) aparecen junto a un interrogante unos nmeros que
cambian segn muevas el ratn. Con cuidado intenta poner el
puntero en la esquina superior izquierda y en la inferior derecha.
Vers las cifras 1,1 y 136,46, respectivamente, que son las medidas
en puntos que tiene el grfico. Como ya habrs supuesto, esto es un
sistema de coordenadas, y para que nuestra imagen funcione como
un men direccionador, lo que necesitamos es que algn elemento
convierta esas coordenadas en una direccin del estilo ya conocido:
"http://miservidor.es/mifichero.htm". Esto siginifica que con un
solo link podemos obtener un enorme nmero de direcciones,
tericamente tantas como pares de coordenadas tiene la imagen. En
la prctica sern menos, ya que andar intentando atinar en el punto
11,32, por ejemplo, es un poco engorroso.
Existen multitud de programas llamados mapeadores que parten la
imagen en imaginarios trozos, y cada uno de ellos indica un link con
alguna parte. Estos programas generan un fichero con todas las
direcciones. Algo as:
rect http://miservidor.es/mifichero1.htm 12,35
rect http://miservidor.es/mifichero2.htm 90,42
rect http://miservidor.es/mifichero3.htm 112,46

Este podra ser el aspecto del fichero del ejemplo, el


llamado mimapa. El parmetro rect significa rectngulo, y nos indica
que la imagen ha sido troceada en rectngulos y las coordenadas
indican la esquina superior izquierda y la inferior derecha. Tambin
podra ser en crculos (circ) o polgonos (poly). Ahora veamos el
resto de instrucciones del ejemplo:
<A HREF="/cgi-bin/imagemap/mimapa"><IMG SRC="sugeren.gif" ISMAP></A>

La primera parte A HREF ya la conocemos, es un link. Despus


viene un directorio: cgi-bin. Este es un directorio especial que
tienen los servidores http, donde se ejecutan los programas
auxiliares del servidor, y al que normalmente slo puede acceder el
administrador del sistema. En ese directorio hay un fichero
llamado imagemap (segn el sistema puede ser otro) que es un
programa que se encarga de leer tu fichero mimapa, capturar las
coordenas que seale el puntero del ratn y servir la direccin que
tiene asociada, con lo que acabamos obteniendo un link normal. Ya
por ltimo, aparece ISMAP que es el que convierte una simple
imagen en una potente herramienta.
Slo queda por decir que el fichero mimapa tiene que estar en otro
directorio especial que tiene el servidor a estos efectos, y al que
por supuesto, solo puede acceder el administrador del sitema.
Todo esto es suponiendo que el servidor est en una mquina UNIX.
Si reside en tu propio PC con Windows o en un MAC (que los hay),
tendrs que ver las instrucciones concretas del programa servidor.
La forma de montar el mapa puede variar de un programa servidor a
otro, pero la base de funcionamiento es siempre la misma.
Otra forma alternativa de conseguir que una imagen responda con
ciertas acciones, es operar con los elementos de formularios. En el
ndice encontrars informacin sobre un tipo de formulario que
devuelve un par de coordenadas, que una vez evaluadas permite
ejecutar una accin.
Pero, una vez ms, Netscape ha propuesto una solucin mucho ms
simple: que sea el propio visualizador quien haga las veces de
programa conversor. En efecto, un recurso tan bueno como los
mapas, no debe depender de tener tu mquina en red y de que haya
un servidor http que te atienda. Adems, eso resta portabilidad a
los documentos locales y a los trabajos personales en disquete. Para
ello ha implementado el elemento MAP que acompaar a IMG.

Por ejemplo, en la siguiente imagen, la mitad izquierda nos enva a


indice.htm y la mitad derecha a intro.htm. Mueve el puntero del
ratn horizontalmente sobre la imagen y observa la ventanita de
estado que hay en la parte inferior izquierda de la pantalla, vers
como cambia el nombre del link.

Se escribe as:
<MAP NAME="nombre1">
<AREA SHAPE="rect" COORDS="1,1,75,46" HREF="indice.htm">
<AREA SHAPE="rect" COORDS="76,1,136,46" HREF="intro.htm">
</MAP>
<IMG SRC="sugeren.gif" USEMAP="#nombre1">

Aunque se comprende a simple vista, analicmoslo:


En primer lugar tenemos el elemento MAP, que lo que est haciendo
es definir un mapa de coordenadas. Va acompaado del
atributo NAME que da nombre al mapa. Es necesario nombrarlo
porque podra haber ms de uno en la misma pgina, y
evidentemente, sus nombres no debern repetirse.
A continuacin tenemos el atributo AREA que define las reas de la
imagen. El parmetro SHAPE="rect" indica la figura geomtrica
que estamos utilizando para ello. Al igual que con los otros mapas,
puede ser rect circ y poly.
El parmetro COORDS fcilmente se adivina que indica las
coordenadas del rea, en este caso vrtice superior izquierdo e
inferior derecho, respectivamente.
HREF ya sabemos lo que hace: indica un link con una pgina, pero
esta vez no va acompaando al elemento <A>, digamos que es un
atributo prestado. Hay un rea por cada link definido. Si un rea no
queremos que tenga link se definir con NOHREF.
IMG SRC tambin son conocidos: hacen que se visualice la imagen.

Y por fin, USEMAP nos dice qu mapa de coordenadas hay que


aplicar a la imagen. A una misma imagen se le pueden aplicar
distintos mapas si se desea. Fjate en que nombre1, (el nombre del
mapa) va precedido del smbolo #. Esto se debe a que, en este caso,
el mapa al que se hace referencia est en la misma pgina que la
instruccin IMG. Podra estar en otra, y en ese caso el smbolo
tendra que estar despus del nombre de la pgina. Por
ejemplo: otrapagina.htm#nombre1
Como ya se ha dicho ms arriba, hay tres figuras geomtricas
definibles para las reas: rect, circle y poly. El rectngulo ya lo
conocemos; consiste en parejas de coordenadas que indican los
vrtices superior izquierdo e inferior derecho respectivamente del
rea. Para el cculo (circ) son necesarios tres valores: x,y r donde
x,y es el par de coordenas que indican el punto donde est el centro
del cculo, y r es el radio del crculo medido en puntos. Para los
polgonos (poly) se necesitan tantas parejas de coordenadas como
vrtices tenga el polgono, procurando que la ltima pareja quede
unida a la primera, ya que la figura debe estar cerrada. No es
obligatorio que sean figuras regulares. En el caso de que se quiera
emplear todo el grfico como rea de enlace, es decir, un solo link,
se puede emplear default, y no es necesario indicar ninguna
coordenada.

Imgenes de fondo
El fondo (background) de este documento es una imagen en formato GIF.

Es un atributo del elemento <BODY>


Se escribe as:
<BODY BACKGROUND="yellow_r.gif">
Y es compatible con todos los dems atributos de este elemento.

Algunos ejemplos de imgenes en listas

Se escriben todas igual, slo hay que cambiar el nombre de los


grficos:
<DL>
<DT><IMG SRC="bolaroja.gif">Linea de texto
<DT><IMG SRC="bolaroja.gif">Linea de texto
<DT><IMG SRC="bolaroja.gif">Linea de texto
</DL>

Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto

Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto

Grficos animados
Una nueva propiedad de algunos visualizadores es la posibilidad de
presentar grficos con animacin. No hay que confundir los grficos
animados en formato GIF con los "movies" o vdeos en formato MPG
que no son tratados directamente por el visualizador, sino por una
herramienta auxiliar que hay que definirle.
Los visualizadores suelen presentar correctamente los formatos
GIF y JPG. Netscape ha implementado la posibilidad de mostrar un
tipo de grfico tipo GIF que incluye en su interior una secuencia,
que junto con instrucciones de repeticin (loop), espera (wait) y
controles de cabecera permiten reproducir una animacin. La
diferencia de tamao entre un GIF animado y un MPG es
considerable. Evidentemente, las animaciones GIF tienen peor
resolucin que las MPG, y slo estn pensadas para fines sencillos.
La forma de incluir una imagen animada en el documento es la misma
que una imagen fija. No se requiere ningun tipo de programa ni
script, todo est definido en la propia imagen. Existen en la red en
forma de shareware programas para hacer ficheros de imgenes
animadas. Su construccin es muy sencilla: slo necesitas tener la
serie de imgenes que quieres animar e ir ensamblndolas con algn
programa al efecto, definir el tiempo entre imagen, el ciclo de
repeticin... y listo.
Los visualizadores que no soportan este efecto, lo que hacen es
presentar solamente la primera o la ltima de las imgenes de la
secuencia. Hay que tener esto presente, y no comenzar o terminar
las secuencias con, por ejemplo, una imagen vaca.
Aqu tienes dos ejemplos sencillos de GIF animado:
Una bola que corre.

Una carta que se mete en un sobre.

Para representarlos en la pgina se utiliza el mismo elemento HTML


de los grficos normales: <IMG SRC="migrafico.gif">

Introduccin a los formularios


Generalidades

Esta es una de las partes ms tcnicas y complejas del HTML. Los


formularios o forms en ingls, son unas pginas especiales que se
utilizan para realizar transacciones. En una pgina que contenga un
formulario pueden adems existir todos los elementos hasta ahora
conocidos, incluso el propio formulario puede estar integrado
dentro de otros elementos, como por ejemplo una tabla. Los
formularios, en algunas impresoras, pueden dar problemas al
imprimir las pginas que los contienen.

Cmo funcionan los formularios?

El formulario no es ms que una pgina escrita en HTML como


cualquier otra. Lo que la hace diferente es que permite capturar
datos de varias maneras: directamente desde el teclado,
escogiendo un valor de una lista desplegable o seleccionando una
opcin desde botones fijos o de todas ellas combinadas.
Una vez terminada la captura de datos, estos forman un registro
que es enviado a un servidor http (web) que lo procesar y
devolver una respuesta (o no). Pueden utilizarse tambin para
enviar su contenido a una direccin de correo electrnico, o que
simplemente abran otra pgina.
Si el formulario se disea para abrir una pgina o para ser enviado
por e-mail, todo se reduce a escribir HTML, pero la cosa se
complica cuando se trata de transacciones de datos que hay que
guardar en un servidor (comercio electrnico). En este caso, en el
servidor tiene que haber un programa especial, creado
especficamente para ese formulario, que reciba los datos y sepa

qu hacer con ellos, procesarlos y confeccionar la respuesta que


remitir al navegadorr. A esa respuesta se le denomina documento
virtual ya que esa pgina no est escrita en ninguna parte; es
generada, enviada y destruida.
A los programas que hacen de puente entre el formulario y el
servidor, se les llama programas CGI (Common Gateway Interface)
y no hay que confundirlos con las pginas dinmicas escritas en ASP
o PHP, aunque se parecen mucho.
Los programas CGI pueden estar escritos en cualquier lenguaje de
programacin que sea soportado por el sistema operativo del
servidor, y pueden estar diseados para cualquier funcin: desde
una simple captura de datos que sern guardados en un fichero,
hasta la ms sofisticada consulta a una base de datos.

Cmo es un CGI?

Aunque el propsito de esta gua no es tratar temas de


programacin, como breve orientacin se muestra un sencillo
programa hecho con comandos shell de UNIX. Muestra los valores
de las variables de servidor ms usuales, as como el nombre de los
campos definidos en el formulario y contenido de cada uno de ellos.

Ejemplo de programa CGI (shell UNIX)


#!/bin/sh
echo Content-type: text/plain
echo
echo Test CGI. Se visualiza el contenido de las variables mas usuales
echo
echo numero de argumentos: $#. valor argumentos: "$*".
echo
echo
echo
echo
echo
echo
echo
echo
echo
echo
echo
echo
echo
echo
echo

SERVER_SOFTWARE
SERVER_NAME
GATEWAY_INTERFACE
SERVER_PROTOCOL
SERVER_PORT
REQUEST_METHOD
HTTP_ACCEPT
PATH_INFO
PATH_TRANSLATED
SCRIPT_NAME
QUERY_STRING
REMOTE_HOST
REMOTE_ADDR
REMOTE_USER

=
=
=
=
=
=
=
=
=
=
=
=
=
=

$SERVER_SOFTWARE
$SERVER_NAME
$GATEWAY_INTERFACE
$SERVER_PROTOCOL
$SERVER_PORT
$REQUEST_METHOD
$HTTP_ACCEPT
$PATH_INFO
$PATH_TRANSLATED
$SCRIPT_NAME
$QUERY_STRING
$REMOTE_HOST
$REMOTE_ADDR
$REMOTE_USER

echo
echo
echo
echo
echo
echo
echo
echo
echo

REMOTE_IDENT
AUTH_TYPE
CONTENT_TYPE
CONTENT_LENGTH
HTTP_USER_AGENT
HOME
HTTP_FROM
HTTP_REFERER
REFERER_URL

=
=
=
=
=
=
=
=
=

$REMOTE_IDENT
$AUTH_TYPE
$CONTENT_TYPE
$CONTENT_LENGTH
$HTTP_USER_AGENT
$HOME
$HTTP_FROM
$HTTP_REFERER
$REFERER_URL

if [ "$CONTENT_TYPE" = "application/x-www-form-urlencoded" ]; then


read lo_que_viene
echo
echo ESTO VIENE POR
echo
echo $lo_que_viene

LA INPUT:

exit 0
else
echo NO VIENE NADA POR LA INPUT
exit 0
fi

Esta sera la respuesta del CGI test2-cgi a un imaginario


formulario llamado prueba.htm con dos campos de captura por
teclado llamados CAMPO1 y CAMPO2 en los que hemos
introducido: "Esto es una" y "demostracion de formularios"
respectivamente.

Ejemplo de respuesta del programa test2-cgi al formulario


prueba.htm
Test CGI. Se visualiza el contenido de las variables mas usuales
numero de argumentos: 0. valor argumentos: .
SERVER_SOFTWARE = NCSA/1.3
SERVER_NAME = miserver.midominio.mipais
GATEWAY_INTERFACE = CGI/1.1
SERVER_PROTOCOL = HTTP/1.0
SERVER_PORT = 80
REQUEST_METHOD = POST
HTTP_ACCEPT = image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*
PATH_INFO =
PATH_TRANSLATED =
SCRIPT_NAME = /cgi-bin/test2-cgi
QUERY_STRING =
REMOTE_HOST = mimaquina.misubdominio.midominio.mipais
REMOTE_ADDR = 255.255.255.255
REMOTE_USER =
REMOTE_IDENT = unknown
AUTH_TYPE =
CONTENT_TYPE = application/x-www-form-urlencoded
CONTENT_LENGTH = 52
HTTP_USER_AGENT = Mozilla/2.02 (Win95; I)
HOME =

HTTP_FROM =
HTTP_REFERER = http://sestud.uv.es/manual.esp/prueba.htm
REFERER_URL =
ESTO VIENE POR LA INPUT:
CAMPO1=Esto+es+una&CAMPO2=demostracion+de+formularios

Fjate que las palabras aparecen separadas por el signo + y no por


espacios como hemos escrito. Si adems hubiramos escrito algn
carcter especial, no se vera como tal, sino su valor en hexadecimal
precedido del carcter %. Por ejemplo, el cracter & es transferido
como %26. Esta conversin se hace para no confundirlo con el
separador de campos, que como puedes ver es el mismo smbolo. El
signo = despus del nombre del campo, tambin lo pone el
visualizador.
Todo esto y algunas cosas ms (que habr que ver en la
documentacin de referencia) han de tenerse presentes a la hora
de realizar programas CGI. Para terminarlo de complicar, no todos
los visualizadores utilizan la misma forma de enviar los datos
recibidos, por lo que se plantea a menudo la necesidad de decidir
para qu visualizador queremos programar nuestro WEB.
Los programas de test, como el del ejemplo, son muy tiles cuando
se estn diseando formularios, ya que permiten comprobar de
forma real su funcionamiento y analizar el registro que envan, cosa
imprescindible para poder programar el correspondiente CGI.
Intenta hacer uno a tu medida, o simplemente copia ste, instlalo
en tu servidor http, (si no tienes acceso, pide a tu administrador de
sistema que lo haga), empieza a probar... y buena suerte.

Cmo se escriben los formularios ?


La base del formulario es el elemento <FORM>, y es el que define
una zona de la pgina como formulario. En una pgina puede haber
varias zonas definidas como formulario, en cuyo caso es
conveniente darles distintos nombres a cada uno. Dentro de este
elemento, que es un objeto, se insertan otros elementos, que a su
vez son sub-objetos del objeto FORM, que son los que realmente

dibujan en pantalla los componentes del formulario. Se ver con


detalle el concepto de objeto en las secciones de programacin de
esta guia, ya que ahora no lo necesitamos. Hay tres clases de estos
sub-objetos:

<INPUT>
Campos de entrada por teclado.
Botones de seleccin.
Casillas de marca.
Botones de proceso.
Botones de inicializacin (reset).
Imgenes sensibles al ratn.
<SELECT>
Listas desplegables de valores.
Listas fijas de valores.
<TEXTAREA>
Ventanas de escritura libre.

Este sera el ms elemental de los formularios, con slo un campo y


un botn de envo:
Procesar

Analicemos cmo se escribe:

<FORM NAME="MI_FORMULARIO" METHOD="POST"


ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="submit" VALUE="Procesar"></FORM>

En la primera lnea vemos el elemento de definicin de


formulario: <FORM>. Va acompaado de tres atributos: NAME,
METHOD y ACTION.
NAME, evidentemente, se refiere al nombre que se le asigne al
formulario. No es obligatorio, pero si el formulario va a ser
utilizado en pginas ASP, PHP, o simplemente en VBScript o
JavaScript, se necesitar un nombre, ya que el formulario ser
considerado como un objeto.
METHOD se refiere al mtodo que emplearemos para enviar los
datos al servidor, y pueden ser dos: POST y GET. El optar por uno u

otro obedece a complejas cuestiones de programacin basadas en la


mxima longitud de registro que puede enviarse; cada uno usa un
canal de salida distinto. El que soporta ms longitud es POST, y
ser el que utilicemos en casi todos los ejemplos. Si el formulario
solamente se utiliza para llamar a otras pginas, se utiliza el
mtodo GET, y si se trata de envio de datos POST.
Echale un vistazo a la respuesta del programa test2-cgi de la
pgina anterior. Fjate en las variables QUERY_STRING e INPUT.
Por la primera llegarn los datos cuando se utiliceMETHOD=GET y
por la segunda cuando es POST el mtodo elegido.
ACTION se refiere a la accin que queremos que ejecute el
formulario en un servidor http o en local. Con el valor del
ejemplo ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi" se le est indicando que ejecute un programa
llamado test2-cgi que est en el directorio /cgi-bin del servidor
http miserver.midominio.mipais cuya respuesta ser similar a la
que hemos visto en la pgina de introduccin a los formularios.
Adems de enviar datos a un servidor, ACTION tambin puede
realizar una accin en local, por ejemplo traer una pgina:
Se escribe:
<FORM METHOD="POST" ACTION="indice.htm">
......
</FORM>

En este caso el formulario funcionara igual que un link.


Otra cosa que puede hacer ACTION, y que adems tiene la ventaja
de que no sera preciso disear un CGI, es enviar un e-mail (correo
electrnico) a un usuario o a una lista de usuarios. Los datos
enviados por el formulario, tendrn la forma que ya conocemos,
pero una vez recibidos por esta va, pueden ser tratados con
programas de edicin de texto, y convertidos al formato que se
quiera.
Se escribe:

<FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail">


......
</FORM>

Si no quieres complicarte la vida con descodificaciones (depende de


lo que se vaya a hacer con los datos recibidos), el navegador puede
remitirlos con un formato ms sencillo y ya descodificado. Para ello
slo hay que aadir el parmetro ENCTYPE con el
valor TEXT/PLAIN. Se escribe as:
<FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail"
ENCTYPE="TEXT/PLAIN">
......
</FORM>

Resumiendo: sin poner ningun parmetro al elemento ACTION los


datos te llegarn as:
CAMPO1=Esto+es+una&CAMPO2=demostracion+de+formularios
y poniendo ENCTYPE="TEXT/PLAIN" as:
CAMPO1=Esto es una
CAMPO2=demostracion de formularios
Al igual que con el elemento <A> es posible hacer que el asunto
(subject) del e-mail se reciba con el texto que quieras, pero
omitiendo la parte correspondiente al cuerpo (body) del mismo, ya
que en este caso el contenido del e-mail son los campos del
formulario:
<FORM METHOD="POST" ACTION=
"mailto:mi-usuario@miservidor-e-mail?&subject=asunto de prueba"
ENCTYPE="TEXT/PLAIN">
......
</FORM>

Esto funcionar siempre que en la mquina del cliente haya


instalado algun programa que permita enviar correo electrnico, si
no es as hay que recurrir a un programa CGI o de otro tipo en el
servidor que se encargue de hacerlo. No es buena idea presuponer
que todo el mundo tiene un cliente de correo instalado en su
mquina.

El elemento INPUT

INPUT sin ningn atributo define por defecto una ventana de


escritura de 20 caracteres de longitud por una lnea de ancho:
Se escribe:
<FORM> <INPUT> </FORM>

<INPUT> admite varios atributos:


SIZE define la longitud de la ventana de texto.
MAXLENGTH define la mxima longitud de la cadena que se puede
escribir dentro de la ventana.
NAME define el nombre de la ventana (que en realidad es un campo
dentro del registro, que en conjunto, es el formulario). Si escribes:
<FORM> <INPUT SIZE=10 MAXLENGTH=10 NAME="campo1"></FORM>

Como puedes comprobar, slo se pueden escribir 10 caracteres


dentro de la ventana, que tambin es de longitud 10. No es
obligatorio que concidan ambos valores, puedes definir la ventana al
valor que quieras y la longitud de la cadena puede ser mayor o
menor.
VALUE sirve para que la ventana aparezca con un valor
predeterminado, y no vaca como hace por defecto:
HOLA

Se escribe:

<FORM> <INPUT VALUE="HOLA"> </FORM>

El valor puede ser modificado o barrado por el usuario.


READONLY Sirve para que el valor de la ventana, que contiene un
valor predeterminado, no pueda ser modificado por el usuario.
HOLA

Se escribe:

<FORM> <INPUT VALUE="HOLA" READONLY> </FORM>

No funciona en versiones antiguas de los navegadores.


TYPE=TEXT Es el valor por defecto de TYPE. Puede omitirse.

TYPE=PASSWORD para que el valor predeterminado de la ventana


est en formato oculto:
****

Se escribe:
<FORM> <INPUT TYPE="PASSWORD" VALUE="HOLA"> </FORM>

TYPE=HIDDEN define que el valor predeterminado de la ventana y


la ventana misma estn en formato oculto:
Se escribe:
<FORM> <INPUT TYPE="HIDDEN" VALUE="HOLA"> </FORM>

Esta opcin se utiliza cuando es necesario enviar un valor fijo al


servidor, pero no se desea que el usuario intervenga o que lo vea.
CUIDADO, esto no es un formato encriptado, viendo el documento
fuente se puede saber el valor de la ventana.
TYPE=SUBMIT para generar un botn que al ser pulsado cierra la
captura de datos del formulario y procede a ejecutar lo definido en
el atributo ACTION que ya conocemos.
Procesar

Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="SUBMIT" VALUE="Procesar"></FORM>

VALUE puede acompaar a SUBMIT , y en este caso sirve para


definir el texto que queremos que tenga el botn en su interior. Si
se omite, por defecto el visualizador le da el valor "Submit Query".
Existe otro tipo llamado TYPE=BUTTON que genera un botn igual
al generado por el tipo submit, pero que no realiza ninguna accin;
es simplemente un botn "muerto" en cuanto a acciones directas.
Suele utilizarse para asociarle instrucciones en JavaScript o
VBScript mediante el evento onClick.

Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="BUTTON" VALUE="No hace nada"></FORM>

TYPE=RESET para generar un botn que al ser pulsado inicializa


todos los componentes del formulario.
Inicializar

Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="RESET" VALUE="Inicializar"></FORM>

VALUE puede acompaar a RESET , y en este caso sirve para


definir el texto que queremos que tenga el botn en su interior. Si
se omite, por defecto el visualizador le da el valor "Reset".
TYPE=FILE Este es un nuevo tipo que slo funciona con Netscape
3.0 o superior, y sirve para enviar un fichero a una mquina remota
(hacer FTP), pero no funciona solo, necesita de ciertos
acompaantes que hacen su uso un poco ms complicado:
Aqu hay que echar mano de un atributo parametrizado de
<FORM>: ENCTYPE="multipart/form-data" para generar un botn
que permitir buscar un fichero en nuestra mquina, ponerlo en una
ventanita de entrada como las ya conocidas (por tanto tanbin se
puede escribir directamente el nombre del fichero en lugar de
buscarlo) y junto con un botn tipo submit enviar el fichero.
Enviar el fichero:
Se escribe:

Enviar fichero

<FORM enctype="multipart/form-data"
ACTION="ftp://miservidor/" METHOD="POST">
Enviar el fichero:
<INPUT NAME="mifichero" TYPE="FILE">
<INPUT TYPE="SUBMIT" VALUE="Enviar fichero"></FORM>

el botn generado aparece con el texto "Browse.." y no sirve de


nada aadirle el parmetro VALUE para darle otro nombre, como se
puede hacer con el botn de tipo submit.
En este ejemplo se hara una conexin al servicio FTP general de la
mquina remota, pero se puede hacer a un directorio en particular
de un usuario concreto. Slo habra que cambiar la lnea
ACTION="ftp://miservidor/" METHOD="POST">

y escribir:
ACTION="ftp://miusuario@miservidor/" METHOD="POST">

Otra forma ms directa de hacer un FTP en las dos direcciones, es


desde la ventana "Location" del visualizador. La sintaxis de los
parmetros de ACTION son vlidos en esa ventana.
Por supuesto, todo esto si no tienes cuenta y permiso de escritura
en la mquina remota, no sirve para nada...
Como ya se ha dicho antes, el atributo ACTION es capaz de enviar
el contenido del formulario por correo electrnico, pero no slo es
capaz de enviar el formulario: tambin puede adjuntar al e-mail un
fichero cualquiera. Lo nico que hay que hacer es aadirle un
instruccin como la que acabamos de ver para el FTP. As:
<FORM enctype="multipart/form-data"
ACTION="mailto:mi-usuario@miservidor-e-mail/" METHOD="POST">
Adjuntar el fichero:
<INPUT NAME="mifichero" TYPE="FILE">
<INPUT TYPE="SUBMIT" VALUE="Adjuntar fichero"></FORM>

TYPE=IMAGE hace que el visualizador presente una imagen que es


sensible al ratn. Lo que el formulario enva al servidor es un
registro cuyos campos son el nombre definido para la imagen
seguido de los parmetros .x=n .y=n donde n son los nmeros de
las coordenas x y del punto en el que estaba el ratn en el momento
del envo. Para presentar la imagen se utiliza el atributo SRC del
elemento IMG. Este sera un ejemplo de respuesta:
imagen.x=99&imagen.y=15

Prueba a pulsar en cualquier parte de esta imagen:

Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">
<INPUT TYPE=IMAGE NAME="imagen" SRC="sugeren.gif">
</FORM>

Los formularios que utilicen este tipo de recursos pueden


prescindir del tipo SUBMIT, ya que el formulario se cierra con la
imagen.
TYPE=RADIO genera botones circulares que permiten seleccionar
un valor predeterminado o activar una opcin

Procesar

Inicializar

Se escribe:

Clase A

Clase B

<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">


<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
Clase A
<INPUT TYPE="RADIO" NAME="clase" VALUE="A">
Clase B
<INPUT TYPE="RADIO" NAME="clase" VALUE="B"></form>

En este ejemplo, los botones permiten seleccionar la clase A, la


clase B o ninguna de las dos. Si se desea que por defecto un valor
est seleccionado, por ejemplo clase B, hay que aadir el
parmetro CHECKED despus del valor:
... VALUE="B" CHECKED></form>

TYPE=CHECKBOX genera casillas de marca que permiten


seleccionar un valor predeterminado o activar una opcin
Procesar

Inicializar

Se escribe:

Clase A

Clase B

<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">


<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
Clase A
<INPUT TYPE="CHECKBOX" NAME="clase" VALUE="A">
Clase B
<INPUT TYPE="CHECKBOX" NAME="clase" VALUE="B"></form>

En este ejemplo, las casillas de marca permiten seleccionar la clase


A, la clase B, ninguna, o las dos. Si se desea que por defecto un
valor est seleccionado, por ejemplo clase B, hay que aadir el
parmetro CHECKED despus del valor:
... VALUE="B" CHECKED></form>

El elemento SELECT
SELECT sin ningn atributo define por defecto una lista
desplegable de toda la pantalla de alto y una columna de ancho:
Se escribe:
<FORM> <SELECT> </SELECT>

</FORM>

Como evidentemente esto no es muy prctico, hay que parametrizar


el elemento. En primer lugar se le da nombre, ya que ste es un

campo ms del formulario, la diferencia es que no hay que escribir


en l sino escoger un valor de los que nos muestre al desplegarlo, se
usar el atributo NAME, y para entrar valores en la lista se usa el
atributo OPTION.
Procesar

Inicializar

Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<SELECT NAME="lista1">
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
</SELECT>
</FORM>

Se deben tener en cuenta varias cosas respecto a SELECT:


La longitud de la ventana de seleccin se autoajusta al valor ms
largo de la lista.
La ventana de seleccin, por defecto, muestra una lnea, si se
quieren mostrar ms se utilizar el atributo SIZE.
Se debe procurar que los contenidos de los campos sean lo ms
cortos posibles; una excesiva longitud implica mayor trfico por la
red, pero se deben construir las listas de forma clara, y que
resulten de fcil lectura al usuario, lo que puede aumentar la
longitud de los valores. Para enviar un valor diferente del que
aparece en la lista, se utiliza el parmetroVALUE asociado al
atributo OPTION. Prueba con el valor 5 de la siguiente lista:

Procesar

Inicializar

Valor 1
Valor 2
Valor 3

Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<SELECT NAME="lista1" SIZE=3>
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION VALUE="Valor 5">Este es el Valor 5

<OPTION>Valor 6
<OPTION>Valor 7
</SELECT>
</FORM>

Esto siginifica que cuando selecciones "Este es el valor 5" en


realidad lo que se enva al servidor es "Valor 5".
Con las listas desplegables es obligatorio seleccionar siempre un
valor, y si no hay ninguno seleccionado, por defecto el visualizador
enviar el primer valor de la lista.
Se puede hacer que haya un valor preseleccionado aadiendo el
parmetro SELECTED al atributo OPTION, y si se quiere permitir
ms de una seleccin, se pondr el atributoMULTIPLE al elemento
SELECT. Para seleccionar y deseleccionar hay que atenerse a las
normas de Windows.

Procesar

Inicializar

Valor 1
Valor 2
Valor 3

Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<SELECT NAME="lista1" MULTIPLE SIZE=3>
<OPTION>Valor 1
<OPTION SELECTED>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION>Valor 5
<OPTION>Valor 6
<OPTION>Valor 7
</SELECT>
</FORM>

Puede ocurrir que interese agrupar los valores de la lista


desplegable, a fin de que resulte ms fcil encontrar la opcin
adecuada, sobre todo si la lista es larga. Para ello se puede utilizar
el parmetro optgroup. Por ejemplo:
Ninguno

Y se escribe:
<select name="coches">
<option selected value="0">Ninguno
<optgroup label="Coches de lujo">

<option value="1">Rolls Royce


<option value="2">Ferrari
<option value="3">Mercedes
</optgroup>
<optgroup label="Coches normales">
<option value="4">Renault
<option value="5">Peugeot
<option value="6">Seat
</optgroup>
</select>

El elemento TEXTAREA
Este elemento, como su nombre indica, permite definir un rea de
texto en la pantalla en la que podemos escribir cualquier cosa. Se
debe escribir ya parametrizada en cuanto a dimensiones, con los
atributos ROWS (lneas) y COLS (COLUMNAS). No tiene otros
atributos o posibles variantes. Por supuesto, para que sea
operativo, deber ir acompaado de los componentes necesarios
para enviar e inicializar.

Procesar

Inicializar

Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<TEXTAREA NAME="texto1" ROWS=5 COLS=40 ></TEXTAREA>
</FORM>

Aunque no es habitual, dentro de un rea de texto puede haber un


contenido por defecto (que puede ser borrado o modificado por el
usuario). Para ello simplemente se escribir el texto
entre <TEXTAREA> y </TEXTAREA>. As:
<TEXTAREA NAME="texto1" ROWS=5 COLS=40>
Contenido del area de texto
</TEXTAREA>

El tratamiento de los datos recibidos en el servidor desde los


formularios requiere conocer la tabla de conversin hexadecimal

que utilizan la mayora de visualizadores. Recuerda que las palabras


en destino aparecen separadas por el signo +, y las letras
acentuadas y otros caracteres, por valores hexadecimales
precedidos del smbolo %
Se puede proceder a la descodificacin en el programa CGI que
recibe los datos, o bien definir macros en programas auxiliares que
sern ejecutados despus.
En el ndice encontrars la tabla de conversiones utilizada con el
visualizador Netscape desde Windows.

Estilos en los formularios


En las ltimas versiones de los dos navegadores ms utilizados,
pueden aplicarse cambios de estilo a los formularios, lo que permite
una presentacin ms sofisticada.
ATENCION: Hay que tener en cuenta que los estilos no estan
estandarizados, y hay cosas que se ven bien en unos navegadores y
no se ven en otros, y hay solo unos pocos efectos que se vean en
todos ellos.
En los elementos de formulario pueden redefinirse casi todos los
parmetros: colores de fondo, tipo y anchura de bordes, color y
tipo de letra del texto, altura y anchura del elemento, alineacin
del texto dentro del elemento, etc. Por ejemplo:
Solo lectura

Se escribe as:
<FORM METHOD="GET" ACTION="">
<INPUT TYPE="text" STYLE="background:yellow;color:red"
NAME="campo1">
<INPUT TYPE="text" STYLE="border:1;background:yellow;color:blue"
readonly
NAME="campo2" VALUE="Solo lectura">

<INPUT TYPE="button" STYLE="background:transparent;color:red"


VALUE="Procesar">
</FORM>

Problemas de privacidad en los formularios


En las ltimas versiones del navegador Internet Explorer de
Microsoft, ha aparecido una nueva prestacin consistente en
memorizar los datos introducidos en cualquier formulario de uso
habitual. En efecto, muchas veces se utilizan formularios para
tareas repetitivas, en las que casi siempre hay que introducir los
mismos datos. Esto nos puede ahorrar tener que escribir cada vez
lo mismo, y Microsoft pens que sera buena idea facilitar la labor
del usuario haciendo que el navegador guarde en una lista
desplegable todos los datos que se van escribiendo en cada
transaccin, de manera que cuando se accede a la pgina, cada
campo de texto (<INPUT TYPE="text">) queda convertido en una
lista desplegable (<SELECT>) cuyo contenido son los datos que se
han introducido en ese mismo campo en ocasiones anteriores.
Visto as suena incluso interesante.... a condicin de que el usuario
sea siempre el mismo, claro. Porque, qu ocurre si el formulario
est incluido en una pgina que es utilizada por numerosas personas
en una sala comn con mquinas pblicas, como una sala de usuarios
o un cibercaf? Pues que si el siguiente usuario se conecta a la
misma pgina, puede ver los datos que escribi su antecesor en esa
mquina.
Para evitarlo, existe un parmetro, poco conocido en general, que
debe incluirse en la definicin del formulario, y que no tiene ningn
efecto en los navegadores que no tienen la costumbre de ser tan
indiscretos. As:
<FORM NAME="MI_FORMULARIO"
METHOD="POST" AUTOMPLETE="OFF">
...
...
</FORM>

Orden de tabulacin en los formularios


De forma predeterminada, el orden de tabulacin es el mismo que el
orden en que los elementos se han escrito. Puede darse el caso de
que necesites que el orden de tabulacin de los elementos de un
formulario no sea el mismo en el que estan escritos. Para ello se
puede incluir en todos los elementos el
parmetro TABINDEX=n donde n es el nmero de orden deseado
de cada uno. Si se va a alterar el orden natural de tabulacin,
conviene hacerlo con todos los elementos del formulario. En
cualquier caso, el navegador hace dos grupos de tabulacin, los que
tienen el parmetro TABINDEX y los que no. Seguir el orden de
los valores y a continuacin pasar a los que no tengan numeracin,
siguiendo el orden de escritura. He aqu un ejemplo de la sintaxis:
<FORM NAME="MI_FORMULARIO" METHOD="POST">
<INPUT TYPE="text" NAME="Campo1" TABINDEX=2>
<INPUT TYPE="text" NAME="Campo2" TABINDEX=1>
</FORM>
En este caso, "Campo2" sera el primero en recibir el cursor. Todo
esto slo funciona con navegadores de versiones recientes.

Desactivar elementos en los formularios


Con casi todos los navegadores modernos se pueden bloquear los
elementos que forman un formulario, todos o algunos de ellos. Y
puede que te preguntes qu inters tiene bloquear un formulario.
Puede ser necesario en aplicaciones dinmicas en las que interese
bloquear partes del formulario segn el usuario cumplimente unos
opciones u otras. Para ello se utiliza el parmetro DISABLED. Este
parmetro es accesible desde JavaScript y VBScript. Se escribe:
<FORM NAME="MI_FORMULARIO" METHOD="POST">

<INPUT TYPE="text" NAME="Campo1" VALUE="Control


desactivado" DISABLED>
<INPUT TYPE="text" NAME="Campo2">
</FORM>
Se puede aplicar a cualquier objeto contenido en el formulario. Este
sera el resultado:
Control desac

Como puedes ver, el efecto es parecido al que se consigue con la


opcin de estilo readonly, pero con DISABLED se impide incluso el
que se pueda seleccionar el contenido del control (no se produce el
evento onFocus) y con readonly no.

Ejemplos de formularios
Juego de botones direccionados a pginas LOCALES.
Esto slo funciona abriendo la pgina como file:/// no como
servicio http://.
Indice

Notas

Cmo funciona?

<TABLE>
<TR>
<TD>
<FORM METHOD="GET" ACTION="indice.htm">
<INPUT TYPE="SUBMIT" VALUE="Indice">
</FORM>
</TD>
<TD>
<FORM METHOD="GET" ACTION="notas.htm">
<INPUT TYPE="SUBMIT" VALUE="Notas">
</FORM>
</TD>
<TD>
<FORM METHOD="GET" ACTION="como.htm">
<INPUT TYPE="SUBMIT" VALUE="Cmo funciona?">
</FORM>
</TD>
</TR>
</TABLE>

Juego de botones direccionados a pginas REMOTAS.


Puede funcionar abriendo la pgina como servicio http:// o

como file:///. pero deber utilizarse METHOD=GET en lugar


de METHOD=POST.
Indice

Notas

Cmo funciona?

<TABLE>
<TR>
<TD>
<FORM METHOD="GET" ACTION="http://www.uv.es/jac/guia/indice.htm">
<INPUT TYPE="SUBMIT" VALUE="Indice">
</FORM>
</TD>
<TD>
<FORM METHOD="GET" ACTION="http://www.uv.es/jac/guia/notas.htm">
<INPUT TYPE="SUBMIT" VALUE="Notas">
</FORM>
</TD>
<TD>
<FORM METHOD="GET" ACTION="http://www.uv.es/jac/guia/como.htm">
<INPUT TYPE="SUBMIT" VALUE="Cmo funciona?">
</FORM>
</TD>
</TR>
</TABLE>

1 campo vaco. Longitud no limitada.


1 campo vaco. Longitud limitada a 10

Procesar

Inicializar

<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi">


<INPUT NAME="campo1">
<INPUT NAME="campo2" SIZE=10 MAXLENGTH=10>
<P>
<INPUT TYPE="submit" VALUE="Procesar">
<INPUT TYPE="reset" VALUE="Inicializar"></FORM>

1 campo vaco. Longitud no limitada.


1 campo con contenido visible.
1 campo con contenido oculto
TEXTO VIS

Procesar

************

Inicializar

<form method="POST" action="http://miservidor/cgi-bin/test2-cgi">


<input name="campo1">
<input name="campo2" VALUE="TEXTO VISIBLE">

<input type="password" name="campo3" VALUE="TEXTO OCULTO">


<P>
<input type="submit" value="Procesar">
<input type="reset" value="Inicializar"></form>

1 campo vaco. Longitud sin limitar.


1 campo vaco. Longitud limitada a 10.
2 botones de seleccin.

Clase A
Procesar

Clase B
Inicializar

<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi">


<INPUT NAME="campo1">
<INPUT NAME="campo2" SIZE=10 MAXLENGTH=10>
<P>
Clase A <INPUT TYPE="RADIO" NAME="clase" VALUE="A">
Clase B <INPUT TYPE="RADIO" NAME="clase" VALUE="B">
<P>
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
</form>

1
1
2
2

campo vaco. Longitud sin limitar.


campo vacio. Longitud limitada a 10.
botones seleccin
casillas seleccin

Clase A
Tipo 1
Procesar

Clase B
Tipo 2
Inicializar

<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi">


<INPUT NAME="campo1">
<INPUT NAME="campo2" SIZE=10 MAXLENGTH=10>
<P>
Clase A <INPUT TYPE="RADIO" NAME="clase" VALUE="A">
Clase B <INPUT TYPE="RADIO" NAME="clase" VALUE="B">
<P>
Tipo 1 <INPUT TYPE="CHECKBOX" NAME="tipo" VALUE="1">
Tipo 2 <INPUT TYPE="CHECKBOX" NAME="tipo" VALUE="2">

<P>
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
</form>

1 lista desplegable de 3 valores. 1 visible


Procesar

Inicializar

<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi">


<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<SELECT NAME="lista1">
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
</SELECT>
</FORM>

1 lista desplegable de 5 valores. 3 visibles.


Valor 1
Valor 2
Valor 3

Procesar

Inicializar

<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi">


<SELECT NAME="lista1" SIZE=3>
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION>Valor 5
</SELECT>
<P>
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
</FORM>

1 Ventana de texto de 5x40

Procesar

Inicializar

<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi">


<TEXTAREA NAME="texto1" ROWS=5 COLS=40 ></TEXTAREA>
<P>

<INPUT TYPE="SUBMIT" VALUE="Procesar">


<INPUT TYPE="RESET" VALUE="Inicializar">
</FORM>

Un tpico y complejo formulario


Nombre:

F.Nac.:

DNI:

Apellidos:
Calle y nmero:
Cdigo Postal:

Ciudad:

Provincia:
Opcin:

Telfono:
Escoja una opcin

Comentarios
personales:
Pulse aqu:

Enviar datos

Borrar los datos

<FORM ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi"
METHOD=POST>
<CENTER>
<TABLE BORDER>
<TR>
<TD>Nombre:</TD>
<TD> <INPUT TYPE="text" NAME="nombre" SIZE=18 MAXLENGTH=18> F.Nac.:
<INPUT TYPE="text" NAME="edad" SIZE=8 MAXLENGTH=8> DNI:
<INPUT TYPE="text" NAME="dni" SIZE=8 MAXLENGTH=8></TD>
<TR>
<TD>Apellidos:</TD>
<TD> <INPUT TYPE="text" NAME="apellidos" SIZE=48 MAXLENGTH=48></TD>
<TR>
<TD>Calle y nmero:</TD>
<TD> <INPUT TYPE="text" NAME="domicilio" SIZE=48 MAXLENGTH=48></TD>
<TR>
<TD>Cdigo Postal:</TD>
<TD> <INPUT TYPE="text" NAME="postal" SIZE=5 MAXLENGTH=5>Ciudad:
<INPUT TYPE="text" NAME="localidad" SIZE=36 MAXLENGTH=36></TD>
<TR>
<TD>Provincia: </TD>
<TD> <INPUT TYPE="text" NAME="provincia" SIZE=20 MAXLENGTH=20>
Telfono:
<INPUT TYPE="text" NAME="telefono" SIZE=19 MAXLENGTH=19></TD>
<TR>
<TD>Opcin:</TD>
<TD> <SELECT NAME="OPCION">
<OPTION>OPCION 1
<OPTION>OPCION 2

<OPTION>OPCION 3
<OPTION>OPCION 4
<OPTION>OPCION 5
</SELECT>Escoja una opcin</TD>
<TR>
<TD>Comentarios<BR> personales:</TD>
<TD> <TEXTAREA NAME="coment" ROWS=2 COLS=48></TEXTAREA></TD>
<TR>
<TD><B>Pulse aqu:</B></TD>
<TD ALIGN=CENTER>
<INPUT TYPE="submit" VALUE="Enviar datos ">
<INPUT TYPE="reset" VALUE="Borrar los datos"></TD>
</TABLE>
</CENTER>
</FORM>

Tabla de cdigos decimal-hexadecimal


Conversin de caracteres que realiza el visualizador Netscape para
Windows en los formularios.
El espacio en blanco es traducido como +
Los visualizadores que trabajan en Windows envan al final del
registro los cdigos 0D (decimal 13) y 0A (decimal 10) que son el
retorno de carro y salto de lnea respectivamente y por ese orden.
Caracter Cod. Decimal
Invisible
&#9;
Invisible
&#10;
Invisible
&#13;
!
&#33;
"
&#34;
#
&#35;
$
&#36;
%
&#37;
&
&#38;
'
&#39;
(
&#40;
)
&#41;
*
&#42;
+
&#43;
,
&#44;

Descripcin
Tabulador horizontal (TAB)
Salto de lnea (LF)
Retorno de carro (CR)
Cerrar exclamacin
Dobles comillas
Signo de nmero
Dlar
Tanto por ciento
Ampersand
Apstrofe
Cerrar parntesis
Abrir parntesis
Asterisco
Signo ms
Coma

Cod. hexadecimal
%09
%0A
%0D
%21
%22
%23
%24
%25
%26
%27
%28
%29
%2A
%2B
%2C

.
/
:
;
<
=
>
?
@
[
\
]
^
_
`
{
|
}
~

&#45;
&#46;
&#47;
&#58;
&#59;
&#60;
&#61;
&#62;
&#63;
&#64;
&#91;
&#92;
&#93;
&#94;
&#95;
&#96;
&#123;
&#124;
&#125;
&#126;
&#160;
&#161;
&#162;
&#163;
&#164;
&#165;
&#166;
&#167;
&#168;
&#169;
&#170;
&#171;
&#172;
&#173;
&#174;
&#175;
&#176;
&#177;
&#178;

Guin
Punto
Barra de divisin
Dos puntos
Punto y coma
Menor
Igual
Mayor
Cerrar interrogacin
Arroba
Cerrar corchete (izquierdo)
Barra de divisin inversa
Abrir corchete
Circunflejo
Subrayado
Acento agudo
Abrir llave
Barra vertical
Cerrar llave
Tilde
Espacio sin separacin
Abrir exclamacin
Centavo
Libra Esterlina
Signo de divisa general
Yen
Barra vertical partida (pipe)
Seccin
Diresis
Copyright
Doa
Abrir comillas francesas
No (smbolo lgico)
Guin dbil
Registrado
Macrn
Grados
Ms-menos
Dos superndice

%2D
%2E
%2F
%3A
%3B
%3C
%3D
%3E
%3F
%40
%5B
%5C
%5D
%5E
%5F
%60
%7B
%7C
%7D
%7E
%A0
%A1
%A2
%A3
%A4
%A5
%A6
%A7
%A8
%A9
%AA
%AB
%AC
%AD
%AE
%AF
%B0
%B1
%B2

&#179;
&#180;
&#181;
&#182;
&#183;
&#184;
&#185;
&#186;
&#187;
&#188;
&#189;
&#190;
&#191;
&#192;
&#193;
&#194;
&#195;
&#196;
&#197;
&#198;
&#199;
&#200;
&#201;
&#202;
&#203;
&#204;
&#205;
&#206;
&#207;
&#208;
&#209;
&#210;
&#211;
&#212;
&#213;
&#214;
&#215;
&#216;
&#217;

Tres superndice
Acento agudo
Micro
Fin de prrafo
Punto medio
Cedilla
Uno superndice
Gnero masculino
Cerrar comillas francesas
Un cuarto
Un medio
Tres cuartos
Abrir interrogacin
A mayscula, acento grave
A mayscula, acento agudo
A mayscula, acento circunflejo
A mayscula, tilde
A mayscula, diresis
A mayscula, anillo
AE mayscula
C cedilla mayscula
E mayscula, acento grave
E mayscula, acento agudo
E mayscula, acento circunflejo
E mayscula, diresis
I mayscula, acento grave
I mayscula, acento agudo
I mayscula, acento circunflejo
I mayscula, diresis
Eth mayscula
Ee mayscula
O mayscula, acento grave
O mayscula, acento agudo
O mayscula, acento circunflejo
O mayscula, tilde
O mayscula, diresis
Signo de multiplicacin
O barrada mayscula
U mayscula, acento grave

%B3
%B4
%B5
%B6
%B7
%B8
%B9
%BA
%BB
%BC
%BD
%BE
%BF
%C0
%C1
%C2
%C3
%C4
%C5
%C6
%C7
%C8
%C9
%CA
%CB
%CC
%CD
%CE
%CF
%D0
%D1
%D2
%D3
%D4
%D5
%D6
%D7
%D8
%D9

&#218;
&#219;
&#220;
&#221;
&#222;
&#223;
&#224;
&#225;
&#226;
&#227;
&#228;
&#229;
&#230;
&#231;
&#232;
&#233;
&#234;
&#235;
&#236;
&#237;
&#238;
&#239;
&#240;
&#241;
&#242;
&#243;
&#244;
&#245;
&#246;
&#247;
&#248;
&#249;
&#250;
&#251;
&#252;
&#253;
&#254;
&#255;

U mayscula, acento agudo


U mayscula, acento circunflejo
U mayscula, diresis
Y mayscula, acento agudo
THORN mayscula
Beta minscula
a minscula, acento grave
a minscula, acento agudo
a minscula, acento circunflejo
a minscula, tilde
a minscula, diresis
a minscula, anillo
ae mnuscula
c cedilla minscula
e minscula, acento grave
e minscula, acento agudo
e minscula, acento circunflejo
e minscula, diresis
i minscula, acento grave
i minscula, acento agudo
i minscula, acento circunflejo
i minscula, diresis
eth minscula
ee minscula
o minscula, acento grave
o minscula, acento agudo
o minscula, acento circunflejo
o minscula, tilde
o minscula, diresis
Signo de divisin
o barrada minscula
u minscula, acento grave
u minscula, acento agudo
u minscula, acento circunflejo
u minscula, diresis
y minscula, acento agudo
thorn minscula
y minscula, diresis

%DA
%DB
%DC
%DD
%DE
%EF
%E0
%E1
%E2
%E3
%E4
%E5
%E6
%E7
%E8
%E9
%EA
%EB
%EC
%ED
%EE
%EF
%F0
%F1
%F2
%F3
%F4
%F5
%F6
%F7
%F8
%F9
%FA
%FB
%FC
%FD
%FE
%FF

Qu son los frames


Los frames (en ingls frame = cuadro, bastidor o marco) es un
elemento implementado por Netscape, que permite dividir la
pantalla en varias reas independientes unas de otras, y por tanto
con contenidos distintos, aunque puedan estar relacionados. No hay
lmites para el contenido de cada una de estas reas: tienen las
mismas propiedades que la pantalla completa normal, tal y como la
conocemos. No hay que confundir los frames con las tablas. Su
apariencia, a veces, puede ser similar, pero mientras el contenido
de la celda de una tabla es fijo, en un rea de pantalla creado por el
elemento FRAME se dispone de todos los recursos del HTML. Es
una zona viva.
Las pginas que contienen una definicin de FRAME no
pueden contener el elemento BODY ni ninguno de los elementos que
habitualmente aparecen en el BODY antes del
elementoFRAMESET que es el que define la creacin del FRAME.
Si esto no se cumple, el FRAME ser ignorado.
Algunos visualizadores no soportan los frames. Para que nuestra
pgina con frames no resulte opaca a ellos, se utilizar el
elemento NOFRAMES que permite ofrecer un texto alternativo en
entorno normal.
Los frames permiten una flexibilidad de presentacin
extraordinaria, y para contenidos muy complejos, de difcil
estructura por los medios convencionales del HTML, son casi
insustituibles. De nuevo se presenta la duda de para qu
visualizador es preferible programar nuestro WWW.
Por supuesto, los frames son parametrizables en cuanto a tamao y
nmero de reas, si stas se pueden redimensionar por el usuario o
son fijas, si tienen o no barras de scrolling, se pueden anidar,
relacionar sus contenidos, etc. Veamos algunos ejemplos prcticos y
su sintaxis:

Un frame bsico. Sintaxis general

En general, todas las pginas que contengan definiciones de frames,


se comportan como si fuesen llamadores o "lanzaderas", y debern
ser ms o menos as:
<HTML>
<HEAD><TITLE> Mi titulo ></TITLE></HEAD>
<FRAMESET>
<NOFRAMES>
<BODY>
Su visualizador no soporta frames. Pulse
<A HREF="indice.htm">aqui </A> para volver.
</BODY>
</NOFRAMES>
<FRAME SRC="pagina1.htm" >
<FRAME SRC="pagina2.htm" >
</FRAMESET>
</HTML>

Fjate en que no aparece el elemento <BODY> en su posicin


habitual, sino dentro de un elemento especial que se activa slo
cuando el visualizador no soporta los frames:NOFRAMES. Si no
declaras el rea NOFRAMES y el visualizador no soporta este
efecto, no se ver nada. Obviamente, los visualizadores que s
soportan frames ignorarn el contenido del rea NOFRAMES.
Hasta aqu ya podemos hacernos una idea de cmo funcionan los
frames: Lo primero es crear una minipgina con la definicin del
frame, viene a ser algo as como una "lanzadera" y slo contiene la
definicin del frame. Y por ltimo, crear las pginas que
constituirn el contenido de cada una de las reas definidas en la
"lanzadera". En el ejemplo anterior sonpagina1.htm y pagina2.htm,
y aqu es donde escribirs tus cosas; es decir que son pginas
completamente normales, y que tambin pueden ser utilizadas de la
forma habitual. A su vez, la "lanzadera" puede ser invocada con un
link desde cualquier pgina normal. Como puedes ver, no es obligado
crear todo tu documento con frames: puedes utilizarlos solamente
all donde sea necesario, si quieres.
Es posible definir cualquier combinacin de reas verticales y
horizontales. La clave est en combinar adecuadamente los
anidamientos del elemento <FRAMESET> con sus

atributos COLS o ROWS segn interese. Como puedes ver, el ms


importante es el primer <FRAMESET>, ya que es el que define cmo
va a ser "troceada" la pgina inicialmente, si en porciones verticales
u horizontales, y sobre esta base se debern definir todos los
dems anidamientos.

Un frame de 3 reas verticales (COLS)

Se vera as:

Y se escribira; as:
<FRAMESET COLS=30%,20%,50%>
<FRAME SRC="a.htm">
<FRAME SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>
Ejemplo real

Un frame de 3 reas horizontales (ROWS)

Se vera as:
Y se escribira as:
<FRAMESET ROWS=25%,25%,50%>
<FRAME SRC="a.htm">
<FRAME SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>

A
B
C

Ejemplo real
Un frame combinado de un rea vertical y dos horizontales

Se vera as:

Y se escribira as:
<FRAMESET COLS=20%,*>
<FRAME SRC="a.htm">
<FRAMESET ROWS=40%,*>
<FRAME SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>
</FRAMESET>

B
C

Ejemplo real
Un frame combinado de dos reas horizontales, la de abajo dividida en dos verticales

Se vera as:
A
B

Y se escribira as:
<FRAMESET ROWS=50%,*>
<FRAME SRC="a.htm">
<FRAMESET COLS=50%,*>

<FRAME SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>
</FRAMESET>
Ejemplo real

Habrs podido comprobar que los parmetros que dimensionan los


frames actuan al presentar la pgina inicialmente. Despus, si el
usuario lo desea, puede redimensionarlos como quiera. Esta es la
opcin por defecto. Si no se quiere permitir el redimensionado, se
aplica el atributo NORESIZE al elemento FRAME. As:
<FRAME NORESIZE SRC.....>

Algo parecido ocurre con las barras de scrolling. Estn regidas por
el atributo SCROLLING, que puede valer YES NO o AUTO. Por
defecto es AUTO. Con esta opcin el visualizador decide, en
funcin del contenido, si son necesarias las barras o no. Con YES las
pondr siempre, aunque no sean necesarias, y con NO no las pondr
nunca, aunque sean necesarias.
<FRAME SCROLLING=YES ....>
Un frame con dos reas verticales. Una normal, la otra con mrgenes forzados para
el texto (MARGINWIDTH MARGINHEIGHT)

Se vera as:

AAAA

AA
AA

Y se escribira as:
<FRAMESET COLS=50%,50%>
<FRAME SRC="a.htm">
<FRAME SRC="a.htm"
MARGINWIDTH=50
MARGINHEIGHT=50>
</FRAMESET>
Ejemplo real

Un frame con referencias cruzadas (NAME TARGET)

Se vera as:

Y se escribira as:
<FRAMESET COLS=50%,50%>
<FRAME SRC="aa.htm">
<FRAME SRC="bb.htm"
NAME="VENTANA">
</FRAMESET>
Ejemplo real

Esto de los cruces es un poco complicado... fjate en el contenido de


cada pgina que entra en juego. Cuando actives Ejemplo real el
fichero llamado es cruzado.htm. Prubalo.
Fichero

Contenido
<A HREF="cc.htm"
TARGET="VENTANA">
aa.htm
<A HREF="cc.htm">
bb.htm Esto es "VENTANA"
<A HREF="bb.htm"
TARGET="VENTANA">
cc.htm
<A HREF="aa.htm">
<FRAMESET>
<FRAME SRC="aa.htm">
cruzado.htm <FRAME SRC="bb.htm"
NAME="VENTANA">
</FRAMESET>

Accin
Pone CC en el frame derecho
Trae CC
No hace nada
Pone BB en el frame derecho porque se llama
"VENTANA"
Trae AA
Pone AA en el frame izqdo.
Pone BB en el frame derecho y le
da como nombre "VENTANA"
-

Hasta aqui se ha utilizado el nombre de "VENTANA" como destino


del atributo TARGET. Este nombre, como ya sabes, es el que hemos
definido en el cdigo de este ejemplo. Si en lugar de poner el
nombre de destino que se ha definido en el FRAMESET, pones otro
cualquiera, el visualizador lo que hace es abrir otra ventana y
colocar alli el contenido de la pagina. Evidentemente, cuantas mas
ejecuciones del navegador haya en marcha, mas memoria del
ordenador se necesita, y abrir una nueva ventana, implica ejecutar
otra vez el navegador. Recuerda cuando hagas esto, que algunos no
andan muy sobrados de memoria....

La versin 3.0 de Netscape, implementa dos nuevas posibilidades de


los frames: la de darle color a la barra de separacin de los
distintos frames o la de que no se vea dicha barra. Para ello se
utilizan los nuevos atributos de FRAMESET y FRAME:
FRAMEBORDER se utiliza como atributo de FRAMESET y
establece si sern visibles los bordes del frame o no. Puede tener
dos valores: YES (por defecto) y NO.
Si escribes:
<FRAMESET FRAMEBORDER=NO COLS=30%,30%,30%>
<FRAME SRC="a.htm">
<FRAME SRC="b.htm">

<FRAME SRC="c.htm">
</FRAMESET>

Se obtiene un frame de tres columnas sin barras de separacin


entre ellas.
Ejemplo real
BORDERCOLOR se utiliza como atributo de FRAME y establece el
color de los bordes visibles. Evidentemente, para que funcione, se
tendr que haber establecidoFRAMEBORDER=yes
Si escribes:
<FRAMESET COLS=30%,30%,30%>
<FRAME BORDERCOLOR="red" SRC="a.htm">
<FRAME BORDERCOLOR="blue"SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>

Se obtiene un frame de tres columnas con la primera barra de


separacin roja y la segunda azul. Ejemplo real
Salir de una pantalla con frames
Para salir de una pantalla compuesta de frames es necesario definir
algun link. En efecto, si estamos en una pantalla con, por ejemplo,
dos frames, cualquier link invocado desde cualquiera de ellos, hace
que la pgina llamada aparezca en ese mismo frame. Para volver a
una pantalla "normal" sin frames, se puede escribir un link con la
sintaxis siguiente:
<A HREF="indice.htm" TARGET="_parent">Ver ndice sin marcos </A>

El destino "_parent" indica que presente la pgina llamada por el


link en el navegador que se esta ejecutando, sin marcos y sin abrir
nuevas ocurrencias del navegador.
Existen otros valores predeterminados para el atributo
TARGET: _blank que abre una nueva ventana del
navegador, _self que llama el destino del enlace a la misma
ventana en que se est (valor por defecto), y _top que funciona
igual que _parent.

Controlar el contenido de los frames con formularios

Hasta aqu hemos visto cmo hacer que los frames reciban sus
contenidos siempre mediante links. No es la nica forma; tambin
pueden utilizarse formularios para esta tarea. Los formularios,
adems, nos pueden permitir definir ciertas selecciones previas
para que el contenido invocado reuna determinados requisitos, as
como elegir el frame de destino. Lo malo de esta tcnica es que
requiere escribir algo de JavaScript, lo que complica bastante la
cosa. Veamos un ejemplo de pgina con cuatro frames. Por ejemplo,
como este:

Arriba
B
C

Y se escribira as:
<FRAMESET ROWS=30%,*>
<FRAME SRC="fraarriba.htm"
NAME="arriba">
<FRAMESET COLS=33%,33%,*>
<FRAME SRC="a.htm"
NAME="izquierda">
<FRAME SRC="b.htm"
NAME="centro">
<FRAME SRC="c.htm"
NAME="derecha">
</FRAMESET>
</FRAMESET>
Ejemplo real

Puesto que se va a poder elegir el frame de destino, es importante


que todos ellos tengan nombre. Este es el cdigo del frame arriba,
que reside en la pgina que carga:fraarriba.htm
<HTML>
<HEAD><TITLE>Frames y formularios</TITLE></HEAD>
<BODY>
<CENTER><H2>FRAMES Y FORMULARIOS</H2></CENTER>
<TABLE BORDER=0 WIDTH="100%"><TR>
<TD ALIGN=CENTER>
<FORM>
<SELECT NAME="list">
<OPTION VALUE="a.htm" >Contenido A
<OPTION VALUE="b.htm" >Contenido B
<OPTION VALUE="c.htm" >Contenido C
</SELECT>
<BR>
<INPUT TYPE=button VALUE="Frame izquierdo" onClick=
"parent.izquierda.location.href=
this.form.list.options[this.form.list.selectedIndex].value">
</FORM>
</TD>

<TD ALIGN=CENTER>
<FORM>
<SELECT NAME="list">
<OPTION VALUE="a.htm" >Contenido A
<OPTION VALUE="b.htm" >Contenido B
<OPTION VALUE="c.htm" >Contenido C
</SELECT>
<BR>
<INPUT TYPE=button VALUE="Frame central" onClick=
"parent.centro.location.href=
this.form.list.options[this.form.list.selectedIndex].value">
</FORM>
</TD>
<TD ALIGN=CENTER>
<FORM>
<SELECT NAME="list">
<OPTION VALUE="a.htm" >Contenido A
<OPTION VALUE="b.htm" >Contenido B
<OPTION VALUE="c.htm" >Contenido C
</SELECT>
<BR>
<INPUT TYPE=button VALUE="Frame derecho" onClick=
"parent.derecha.location.href=
this.form.list.options[this.form.list.selectedIndex].value">
</FORM>
</TD></TR>
</TABLE>
</BODY>
</HTML>

Como puedes ver, todo reside en el cdigo JavaScript que se


ejecuta al pulsar el botn de cualquiera de los tres formularios
definidos en el frame arriba. Mediante este cdigo se captura un
evento: onClick que se produce al pulsar con el puntero del ratn en
el botn del formulario. La primera parte de la instruccin
ejecutada:parent.derecha.location.href= es la que establece
en qu frame se va a cargar la pgina seleccionada en la lista
desplegable, en este caso el llamado derecha. La segunda parte de
la
instruccin: this.form.list.options[this.form.list.sele
ctedIndex].value es la que indica qu pgina hay que cargar en
el frame definido en la primera parte de la instruccin. Si... esto
suena a muy complicado. No es fcil entender la compleja
estructura de objetos del navegador. Para ms detalle, puedes ver
la seccin sobre JavaScript, en particular, y toda la seccin de
programacin en general, de esta guia.

Otra cosa que hay que tener en cuenta cuando se escribe


JavaScript, es que distingue entre maysculas y minsculas. En el
ejemplo anterior, si los ficheros llamados por el formulario:
a.htm b.htm c.htm se han guardado con el nombre en
maysculas, como A.htm o B.htm, no funcionar si no se invocan
escritos de la misma forma. Esto es especialmente importante
cuando tengas tus pginas en servidores con sistemas operativos
UNIX o LINUX, que son la mayora de ellos.

Frames incrustados

Se puede insertar un frame en cualquier punto de una pgina, ya sea


sta, a su vez, un frame o una pgina normal. Su apariencia
recuerda a los grficos y a los formularios, pero su contenido es el
de una pgina independiente. Por ejemplo, si se escribe:
<IFRAME NAME="indice" SRC="indice.htm" WIDTH="300" HEIGHT="100"
FRAMEBORDER="1" MARGINWIDTH="5" MARGINHEIGHT="5"
SCROLLING="Auto"></IFRAME>

Y este sera el resultado:


Analicemos sus atributos:

NAME Como ya habrs supuesto, es el nombre del frame


incrustado. Puede omitirse si no es necesario.
SRC Nombre de la pgina que se mostrar en el frame.
WIDTH Nmero de pixels que tendr el frame de ancho.
Tambin puede indicarse en tanto por ciento respecto al
ancho total de la ventana, como se hace en los frames
convencionales.
HEIGHT Nmero de pixels que tendr el frame de alto.
Tambin puede indicarse en tanto por ciento respecto al alto
total de la ventana.
FRAMEBORDER Indica si se debe mostrar el borde del
frame. 1 = si (por defecto) 0 = no.
MARGINWIDTH Indica el nmero de pixels que tendr el
ancho de los mrgenes interiores izquierdo y derecho del
frame respecto a su contenido.

MARGINHEIGHT Indica el nmero de pixels que tendr el


ancho de los mrgenes interiores superior e inferior del
frame respecto a su contenido.
SCROLLING Indica si hay que mostrar barras de scroll
dentro del frame incrustado. Sus valores pueden
ser: Yes, No y Auto (por defecto).

Pginas con ficheros multimedia (audio/video) y


otros objetos
Pueden utilizarse indistintamente ficheros multimedia con las
extensiones .wav, .aiff, .au, .mid, .mp3, .mpg, .mpeg, .avi, .wmv, .rm,
etc., etc. Los navegadores no admiten directamente ningn tipo de
formato multimedia por defecto, y es necesario cargar un plugin,
que el cliente tendr que buscar e instalar.
Un plugin es un pequeo programa que har las veces de conector
entre el navegador y el fichero multimedia, es decir, que dotar al
navegador de una cierta capacidad que de serie no tiene. Los plugins
no solamente son necesarios para reproducir los ficheros
multimedia, sino tambin para poder cargar cualquier otro tipo de
fichero que no sea HTML, que es el nico formato que realmente
entienden los navegadores.
Casi todos los navegadores precisarn de un plugin para reproducir
cualquier tipo de formato (multimedia o no), excepto el Internet
Explorer que echa mano de los ActiveX propios de los sistemas
operativos Windows.
El primer elemento disponible en HTML para los ficheros
multimedia fue <EMBED>. Este elemento, que en realidad nunca
lleg a estar incluido oficialmente en el lenguaje por la w3c, todava
funciona en todos los navegadores modernos, pero presenta algunos
problemas, que al no estar sujeto a estandarizacin alguna, ha
provocado que cada navegador interprete a su manera las cosas. No
est en la especificacin del nuevo XHTML, que recomienda el uso
del elemento <OBJECT> para estos menesteres.

<EMBED> cuenta con un buen nmero de atributos: SRC,


AUTOSTART, LOOP, STARTTIME, ENDTIME, VOLUME,
WIDTH, HEIGHT, ALIGN, CONTROLS y HIDDEN.
SRC Indica dnde est el fichero a reproducir, pero no puede
utilizarse solo, necesita la compaa de otros atributos del
elemento, concretamente los que definen el tamao de la consola
(que es un icono parecido al teclado que tiene un casette
pequeo): WIDTH (largo) y HEIGHT (alto)
Otro atributo de EMBED es AUTOSTART con dos posibles
valores: FALSE (por defecto) y TRUE, y como ya habrs deducido,
TRUE hace que comience la reproduccin inmediatamente despus
de cargar la pgina, y sin necesidad de pulsar el botn "start" de la
consola.
El siguiente atributo a analizar es HIDDEN que slo tiene un
valor: TRUE, y hace invisible la consola, pero evidentemente, si es
invisible no puedes activar el sonido, y por tanto lo hace l mismo,
siempre que no hayas puesto AUTOSTART=FALSE, claro.
Un atributo de repeticin no poda faltar, y lo tenemos en LOOP y
sus tres posibles valores: FALSE (por defecto), TRUE que fuerza a
la repeticin sin fin de la audicin, eINTEGER donde INTEGER es
el nmero de veces que deseas que se repita la audicin.
No es obligado comenzar una audicin por el principio del fichero.
Imagnate que tienes una serie de instrucciones habladas, y quieres
dar la oportuna en cada momento, no todas de golpe. Para esto
tenemos los
atributos STARTTIME=mm:ss y ENDTIME=mm:ss donde mm son
los minutos y ss los segundos del punto de comienzo o fin de la
audicin. Cuidado: los valores hay que darlos con dos dgitos:
Por ltimo tenemos el atributo ALIGN y sus valores TOP,
BOTTOM, CENTER, LEFT, RIGHT, MIDDLE y TEXTTOP que
funcionan igual que sus respectivos del elemento IMG, es decir,

que no tiene efectos sobre el sonido o el vdeo, sino sobre la


imagen de la consola y su alineacin con el texto de la pgina.
He aqu un breve ejemplo con los atributos bsicos:
<EMBED SRC="minueto.mid" WIDTH=160 HEIGHT=70 AUTOSTART="FALSE">

Funciona bien con todos los navegadores, excepto con Opera.


El elemento <OBJECT>

</OBJECT>

Este nuevo elemento pretende evitar la necesidad de continuar


creando elementos fijos cada vez que aparece un nuevo formato de
ficheros, como ocurri, por ejemplo, con los multimedia y EMBED.
En efecto, puesto que EMBED no ha resuelto las diferencias entre
navegadores a la hora de cargar los distintos formatos, el XHTML
ha implementado un elemento que puede incluir todos los
parmetros que el formato a cargar precise, pero no con
parmetros fijos como hasta ahora, sino "a la medida" de cada uno
y tratndolos como objetos independientes. Como "objeto" se
entender cualquier fichero externo, incluso HTML, que deba
mostrarse en la pgina.
En el nuevo XHTML se ha eliminado el elemento iframe que era
utilizado para insertar una ventana con contenido independiente al
de la pgina que la soporta. Por ejemplo:
<IFRAME id="indice" SRC="indice.htm" WIDTH="600"
HEIGHT="150" FRAMEBORDER="1" MARGINWIDTH="5"
MARGINHEIGHT="5" SCROLLING="Auto"></IFRAME>
Y esta es la forma de sustituirlo:
<object id="indice" type="text/html" data="indice.htm"
style="width:500; height:200px;">
<p>Texto alternativo, si la pgina no es encontrada</p>
</object>

Y para un grfico sustituyendo a <IMG>:


<object data="sugeren.gif" type="image/gif">
<p>Contenido alternativo, si el grfico no es encontrado</p></object>

Dependiendo del tipo de fichero a tratar, no todos los navegadores


funcionan correctamente con OBJECT. Los ms conocidos, como

Firefox, IE, Opera, Chrome o Safari, en general, con los tipos de


fichero ms habituales, suelen funcionar bastante bien si se afina
la parametrizacin (<param name="valor">). Puede no resultar fcil
encontrar plugins para algunos tipos de fichero. Y por supuesto, los
parmetros necesarios pueden no ser los mismos para todos los
navegadores.
En el siguiente ejemplo se muestra el cdigo mnimo necesario para
reproducir un fichero .mp3 y que generalmente, con todos los
navegadores excepto el IE, solicitar al cliente que instale el plugin
de QuickTime si no lo tiene ya:
<object

data="test.mp3" type="audio/x-mp3" height="50" width="300" >


<param name="src" value="test.mp3" />
<param name="autostart" value="0" />
</object>

En la sintaxis de este elemento son clave los dos primeros atributos


de la primera lnea:
data indica la ruta del fichero a cargar (pueden ser tanto rutas
relativas como absolutas).
type indica al navegador el tipo de contenido del fichero, o lo que
es igual el MIME type del que ya se ha hablado en otra seccin de
esta gua.
Segn el MIME declarado, el navegador cargar los recursos del
sistema que tenga disponibles para reproducir correctamente el
fichero. En general todos los navegadores mostrarn la consola del
QuickTime y el IE la del Media Player.
Es importante la eleccin del valor de type ya que eso definir que
el navegador tenga que buscar un plugin o no. Por ejemplo, si en
lugar de definirlo como est, con audio/x-mp3(que parece el ms
natural, dado el tipo de fichero) se define
como type="application/x-mplayer2" todos los navegadores
presentarn la consola del Media Player sin necesidad de buscar
nada. Parece la solucin ideal, pero si el cliente no se conecta desde
una mquina Windows, no funcionar, ya que el Media Player es
exclusivo de este sistema operativo.

veamos un ejemplo para reproducir un fichero mp3 (no funciona


bien con Opera ni con las ltimas versiones de Mozilla):
<object height="80" width="300"type="application/x-mplayer2"
data="test.mp3">
<param name="src" value="test.mp3" />
<param name="controller" value="false" />
<param name="autostart" value="0">
</object>

Tambin se puede utilizar para reproducir un video:


<object height="300" width="350"type="application/x-mplayer2"
data="colon.avi">
<param name="src" value="colon.avi" />
<param name="controller" value="false" />
<param name="autostart" value="0">
</object>

Este ltimo no funciona bien con Opera ni con las ltimas versiones
de Mozilla.
Hasta aqu hemos visto cmo presentar un fichero multimedia con
el Media Player de Windows, pero solo uno. En efecto, qu hacer si
tenemos un fichero de gran tamao troceado en varias partes? O
simplemente, varios ficheros relacionados aunque no formen parte
de uno solo. Si el nmero de partes es relativamente elevado, puede
ser muy cargante presentarlos todos de la forma que ya conocemos,
y lo que es peor, puede suceder que el navegador se cuelgue.
Existe una forma de acceder a una lista de ficheros multimedia
utilizando el Media Player. Es decir, que escribiendo solamente una
definicin de consola se puede ver o escuchar una serie de
ficheros; hablamos de los ficheros .asx
La particularidad reside en la extensin del fichero multimedia. No,
no es un nuevo tipo de video super comprimido, es simplemente un
fichero de texto, editado con cualquier editor, como el bloc de
notas, que contiene la referencia a los ficheros que se desea
encadenar. Por ejemplo, para encadenar dos pequeos ficheros
multimedia de formato .mid se escribe:
Fichero lista.asx
<ASX version = "3.0">

<ENTRY><REF HREF="minueto.mid"/></ENTRY>
<ENTRY><REF HREF="adagio.mid"/></ENTRY>
</ASX>

ATENCION: Todas las lneas de los ficheros .asx deben comenzar


justo junto al margen izquierdo, sin ningun espacio en blanco.
El cdigo para mostrar la consola es el ya conocido, solamente
cambia el fichero a reproducir, que puede incluir ficheros de
distintos tipos:
<object height="300" width="350"type="application/x-mplayer2"
data="lista.asx">
<param name="src" value="lista.asx" />
<param name="controller" value="false" />
<param name="autostart" value="0">
</object>

Un plugin universal?
Hay que tener en cuenta que para que un determinado fichero
multimedia, por ejemplo un pequeo mp3, pueda oirse en tu pgina
(oirse, no descargarse) intervendr una cadena de elementos
compuesta por el sistema operativo de la mquina (SO), el
navegador y los plugins que haya cargados, si es que hay alguno. Y
puede que te preguntes por qu tantos eslabones para algo tan
simple. Del primero, del SO, depender que por defecto haya
herramientas ya instaladas que permitan reproducir el fichero, lo
que evitara la necesidad de un plugin. Del segundo, el navegador,
depender que por defecto sea capaz de reproducir el fichero o en
su defecto, llamar al recurso de sistema necesario para ello. Y por
fin, si todo lo anterior falla, el navegador deber tener cargado el
plugin necesario, que no olvidemos que para cada navegador ser
diferente, an cuando el fichero a reproducir sea el mismo.
Y cmo programar la pgina para asegurarnos que el mayor nmero
posible de visitantes pueda oir nuestro fichero sin necesidad de
hacer nada? Pues no es nada fcil. Lo ideal sera disponer de algo

que sepamos de antemano que tienen instalado la mayora de


mquinas en el mundo, es decir, un plugin casi universal. Y este es
sin duda, y hasta que aparezca algo mejor, el plugin de Flash Player,
que segn las ltimas encuestas tienen ms del 95% de las mquinas
del mundo, independientemente de su sistema operativo. Cierto es
tambin que el nmero de mquinas con sistemas operativos
Windows es casi igual, lo que significa que casi todos nuestros
visitantes tendrn instalado el Media Player, por lo que la
reproduccin de ficheros de audio o video en los formatos ms
habituales, como mpg, avi, o mp3 est asegurada sin necesidad de
instalaciones adicionales.
La firma francesa Alsacrations ha publicado bajo Creative
Commons licence (cdigo libre y gratuito) un magnfico reproductor
de mp3 con tecnologa flash. Se trata delDewplayer. Este paquete
contiene todo lo necesario para, mediante varios tipos de consola,
reproducir ficheros mp3. Es recomendable utilizar ficheros
codificados a 44.1 Khz para evitar aceleraciones indeseadas en la
lectura (no funciona bien con mp3 de baja calidad). Para insertarlo
en la pgina html se emplea el elemento OBJECT. Veamos cmo se
utiliza.
Con el siguiente cdigo se obtiene la ms simple de las consolas de
reproduccin: la mini
<object type="application/x-shockwave-flash" data="dewplayer-mini.swf"
width="200" height="20" id="dewplayer" name="dewplayer">
<param name="movie" value="dewplayer.swf" />
<param name="flashvars" value="mp3=test.mp3&autostart=0&autoreplay=1&
showtime=1&randomplay=1&nopointer=1&bgcolor=FFFF00" />
</object>

Fjate en que cada parmetro est separado del anterior por el


ampersand (&). Para obtener cualquiera de las otras consolas
disponibles, solamente hay que cambiar el valor dedata:
con data="dewplayer.swf" tendremos la versin classic:
data="dewplayer-bubble.swf" muestra la versin bubble:

Esta es ms grande, por tanto las medidas cambian: width="250"


height="65"
data="dewplayer-multi.swf" para la versin multi:
Esta versin permite especificar varios ficheros. Para ello
solamente hay que escribirlos en los valores del parmetro
"flashvars", por ejemplo:
<param name="flashvars" value="mp3=test.mp3|test.mp3|test.mp3&
autostart=0&autoreplay=1&showtime=1&randomplay=1&nopointer=1&bgcolor=F
FFF00" />

Fjate en que el smbolo que hace de separador entre los distintos


ficheros mp3 es la "pipe" | (cdigo &#124;)
La versin playlist es parecida a la multi, pero mostrando la lista
con el nombre de los ttulos que correspondan a cada fichero (no
necesariamente el nombre del fichero). El cdigo cambia un poco:
<object type="application/x-shockwave-flash" data="dewplayerplaylist.swf"
width="240" height="200" id="dewplayerpls" name="dewplayerpls">
<param name="movie" value="dewplayer-playlist.swf" />
<param name="flashvars" value="xml=playlist.xml" />
</object>

Como habrs supuesto, el secreto est en el


fichero playlist.xml que es el que contiene la lista de ficheros que
se reproducirn, pero puede contener mucha ms informacin
aunque en la versin gratuita no se muestre, (esto est disponible
solamente en las versiones "Pro").
Los ficheros xml son ficheros que se pueden escribir con cualquier
editor, como los html. Es un formato estndar de intercambio de
datos basado en etiquetas, es decir cada etiqueta indica un campo
con ese nombre que contiene informacin. Por ejemplo, este sera
un fichero playlist.xml tpico:
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>Playlist</title>
<creator>jac</creator>
<link>http://sestud.uv.es/manual.esp/</link>
<info>Lista de pruebas</info>
<image>tracklist.jpg</image>

<trackList>
<track>
<location>test.mp3</location>
<creator>Jean-Pierre Claris</creator>
<album>Exitos de siempre</album>
<title>Plaisir d'amour</title>
<annotation>I love this song</annotation>
<duration>30000</duration>
<image>autor.jpg</image>
<info>Info de pruebas</info>
<link>http://fr.wikipedia.org/wiki/Plaisir_d%E2%80%99amour</link>
</track>
</trackList>
</playlist>

Como es evidente, habr que incluir tantos registros


<track> </track> como ficheros se vayan a incluir en la consola, y
siempre dentro del agrupamiento <trackList> </trackList>
Una particularidad de los ficheros xml, es que as como en un
fichero tpico de datos un campo debe existir aunque est vaco, en
xml si un campo no contiene valor, ni siquiera aparece en el fichero.
En estas versiones libres del Dewplayer, puesto que nada es
utilizado excepto el nombre (y localizacin) del fichero, el resto
puede obviarse. Por tanto, el fichero playlist.xml puede quedar
reducido a la mnima expresin:
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>Playlist</title>
<trackList>
<track>
<location>test.mp3</location>
<title>Plaisir d'amour</title>
</track>
</trackList>
</playlist>

ATENCION: En estos ejemplos se ha indicado el fichero mp3 a


reproducir suponiendo que est en el mismo directorio en que se
encuentra la pgina, pero se pueden escribir las rutas relativas que
sean necesarias, y lo mismo para los ficheros .swf indicados
en data o los playlist.xml
Veamos ahora los distintos parmetros que se utilizan y sus
posibles valores, que siempre son dos (excepto para volume):
0=false y 1=true, es decir, 0=desactivado 1=activado.

autoplay Hace que la reproduccin del fichero comience en cuanto


la pgina es cargada:
dewplayer.swf?mp3=test.mp3&autoplay=1

autoreplay Hace que se repita la reproduccin del fichero


automtica e indefinidamente:
dewplayer.swf?mp3=test.mp3&autoreplay=1

randomplay Si se ha seleccionado el modelo multi, el primer fichero


que se reproduzca ser cambiado aleatoriamente cada vez que se
cargue la pgina. No tiene efecto en el resto de consolas:
dewplayer.swf?mp3=test.mp3&randomplay=1

showtime Hace que se muestre el tiempo que va a durar la


reproduccin del fichero:
dewplayer.swf?mp3=test.mp3&showtime=1

volume indica el volumen por defecto de la consola al comenzar la


reproduccin del fichero, deber ser un nmero entre 0 y 100:
dewplayer.swf?mp3=test.mp3&volume=50

Texto en movimiento
Este es un nuevo elemento que slo funciona con las ltimas
versiones de los navegadores. Hasta su implementacin sus efectos
solamente podan conseguirse con JavaScript. La ventaja de
hacerlo con JavaScript es que siempre funciona, incluso con
navegadores antiguos.
Se trata del elemento <MARQUEE> </MARQUEE> que sirve
para hacer que el contenido de un bloque se desplace
horizontalmente a lo ancho del mismo. Adems de texto el bloque
puede contener tambin imgenes. Tiene muchas
parametrizaciones:

DIRECTION= Establece en que direccin se mueve el


contenido del bloque en la pantalla. Puede tener dos valores:
o LEFT izquierda (por defecto)
o RIGHT derecha
BEHAVIOR= Determina cmo se mueve el contenido del
bloque en la pantalla. Puede tener tres valores:

SCROLL har que el contenido del bloque aparezca por


un extremo, desaparezca por el contrario y vuelva a
apracer por donde comenz.
o SLIDE (por defecto) hace que el contenido del bloque
se deslice hacia el lado indicado por direction y se
detenga al llegar al lado opuesto. Solamente volver a
moverse si la pgina es cargada de nuevo.
o ALTERNATE El contenido del bloque se mover
alternativamente en una direccin y otra, comenzando
por la indicada por direction
LOOP=n donde n es un nmero que indica las veces que el
movimiento programado se realizar. El valor INFINITE (por
defecto) producir un bucle infinito.
SCROLLDELAY=n donde n indica el tiempo de espera en
milisegundos que se debe aplicar entre cada redibujado del
bloque, es decir, la velocidad del movimiento.
SCROLLAMOUNT=n donde n indica el nmero de pixels que
se deben tomar entre cada redibujado del bloque. Por
defecto, tomar el bloque entero. Este parmetro debe
utilizarse con cuidado, ya que puede ser contradictorio con el
anterior SCROLLDELAY.
ALIGN= Es la alineacin del bloque en la pantalla. no funciona
en todos los navegadores, por lo que es ms seguro indicar la
alineacin fuera del elemento o aplicar instrucciones de
estilo. Puede tener tres valores:
o CENTER centro
o LEFT izquierda (por defecto)
o RIGHT derecha
BGCOLOR=color donde color indica el color de fondo del
bloque. El color se indica mediante su nombre en ingls, como
"red", "blue", etc. Tambin puede hacerse por su cdigo RGB,
pero esto no funciona igual en todos los navegadores, y en
algunos, como FireFox no funciona. Con el IE y con Opera en
lugar de indicar el color de la forma habitual: #FFFFFF hay
que escribirlo precedido de la arroba: @FFFFFF. En el ndice
encontrars una lista de los cdigos de colores.
o

HSPACE=px donde px indica el nmero de pixels que tendrn


los mrgenes izquierdo y derecho de fuera del bloque.
Solamente funciona con el IE.
VSPACE=px donde px indica el nmero de pixels que tendrn
los mrgenes superior e inferior fuera del bloque. Solamente
funciona con el IE.
HEIGHT=px donde px indica el nmero de pixels que tendrel
bloque de alto. Tambin puede indicarse en tantos por ciento
respecto a la altura total de la pantalla.
WIDTH=px donde px indica el nmero de pixels que tendrel
bloque de ancho. Tambin puede indicarse en tantos por
ciento respecto a la anchura total de la pantalla.

Por ejemplo:
Se escribe:
<CENTER><MARQUEE BGCOLOR="cyan" HEIGHT="40" WIDTH="50%"
DIRECTION="RIGHT" BEHAVIOR="ALTERNATE" SCROLLDELAY=400>
texto1 <IMG SRC="bolaazul.gif"> texto2 </MARQUEE></CENTER>

Qu son los iconos?


Las ltimas generaciones de navegadores soportan unos pequeos
ficheros de imagen que ayudan a identificar de forma visual los
distintos servidores. Sin duda los habrs visto en tu navegador, a la
izquierda de la direccin a la que te has conectado, en la llamada
ventana de URL. Tambin aparecen en tu libro de direcciones, en lo
que se ha dado en llamar "favoritos".
Estos pequeos ficheros grficos cuya extensin es .ico se
denominan "iconos", y son los mismos que se utilizan para identificar
cualquier programa de Windows. Los ficheros .icono son
internamente lo mismo que un fichero .jpg o .gif Es decir, son un
tipo de grfico de distinto formato, y se caracterizan sobre todo
por su extrema ligereza, que suele ser de unos pocos bytes. En
internet tienes gran cantidad de programas para ver, crear o editar
iconos. Tambin hay programas capaces de convertir un fichero

tpico .jpg o .gif a .ico y por supuesto, tienes miles de libreras de


iconos ya hechos.
Implementar los iconos en tus pginas HTML es muy sencillo.
Solamente tienes que conseguir tu icono y ponerlo en el directorio
raiz de tu servidor. Por defecto, y sin necesidad de escribir nada
en el cdigo HTML de la pgina, los navegadores solicitan al
servidor un fichero de icono llamado favicon.ico Este curioso
nombre es una contraccin del ingls (cmo no) de "favourite icon"
es decir icono favorito, y se invent para facilitar la identificacin
visual de las direcciones de tus webs favoritos.
El fichero de icono puede tener cualquier otro nombre, y estar en
cualquier otro sitio, pero entonces hay que decirle al navegador
donde tiene que buscarlo, igual que se hace con un fichero grfico
tpico. La sintaxis para insertar un icono que no tenga los valores
por defecto, es diferente de la de los grficos normales, y hay que
escribirla en la HEAD de la pgina:
<HTML>
<HEAD>
<TITLE>Prueba de iconos</TITLE>
<link rel="shortcut icon"
href="http://tu_servidor/iconos/favicon.ico">
</HEAD>
<BODY>
Esto es una prueba con iconos
</BODY>
</HTML>

Esta sera la sintaxis en el caso de que el icono est en un servidor


distinto del nuestro. Lo normal ser que est en nuestro propio
servidor, y entonces bastar con poner la ruta relativa.
<HTML>
<HEAD>
<TITLE>Prueba de iconos</TITLE>
<link rel="shortcut icon" href="/iconos/favicon.ico">
</HEAD>
<BODY>
Esto es una prueba con iconos
</BODY>
</HTML>

Generalmente el icono pretende facilitar la identificacin del


servidor, no de los contenidos. Si se pone el fichero favicon.ico en
el directorio raz del web, el icono aparecer en todas las pginas
sin necesidad de escribir nada en ninguna de ellas. Pero si quieres
que el icono sea diferente en cada grupo de pginas, por ejemplo, en
cada directorio, entonces tienes que escribir la llamada
correspondiente en cada pgina, la que no la lleve, mostrar el icono
del directorio raiz, si lo tiene.

Canales RSS
Qu son y para qu sirven?

Los Rich Site Summary (otros autores afirman que es el acrnimo


de Really Simple Syndication) o RSS, son unos ficheros escritos en
un dialecto de XML 1.0, que deben cumplir las especificaciones de la
W3C, y son utilizados para publicar resmenes de contenidos de un
sitio web. Su finalidad bsica es evitar a los clientes el tener que
navegar constantemente por sus sitios preferidos buscando
novedades, y est muy indicado si las pginas cambian con
frecuencia de contenido, como por ejemplo, peridicos, blogs, etc.
A estos canales se les llama tambin fuentes de contenidos o
"feeds" (alimentadores en ingls).
Aunque no es oficial, este icono se ha convertido en el smbolo
estndar de los canales RSS:
Y en algunas pginas tambin puedes encontrarlos con alguno de
estos otros:
Y puede que te preguntes qu es eso del "xml". El xml
(eXtensible Markup Language) es un lenguaje parecido al html que
ya conoces, pero a diferencia de ste, en el que el nombre de las
etiquetas (o elementos, como se les ha llamado en esta gua) ya
estn predefinidos, el programador puede crear las etiquetas que
quiera y cuantas quiera, segn las necesidades de su aplicacin.

Esto, en la prctica, se traduce en que con xml se pueden crear


sublenguajes, y por tanto, el xml es en realidad un "metalenguaje".
Ejemplos de sublenguajes xml son, adems del RSS que nos ocupa,
el xhtml o los ficheros del reproductor DEW de los que se habla en
otras secciones de la gua
Cmo se leen?

Para acceder a la informacin de los canales RSS hay que


suscribirse a ellos. Esta suscripcin se puede hacer mediante
programas lectores de canales, llamados "agregadores", que son
algo parecido a los programas clientes de correo electrnico o de
noticias. Tambin se puede hacer directamente con la mayora de
navegadores actuales. Esta, probablemente, es la opcin ms
cmoda. Leer un RSS no es lo mismo que navegar por el sitio que lo
contiene. El smil ms parecido es el de un cliente de e-mail, solo
que en lugar de mirar cada cierto tiempo el buzn para ver si hay
correos nuevos, se mira el alimentador para ver si ha cambiado.
Cmo se monta un canal RSS?

Es muy sencillo: solamente tienes que informar al navegador cliente


de que tienes un canal disponible. En el servidor no hay que tocar
nada. Todo este invento se basa en escribir (y mantener al dia,
claro) un fichero en xml con las novedades que haya, y listo. Si el
volumen de noticias a incluir es grande, se debera instalar algn
programa que los genere automticamente, y tambin puede ser
buena idea separar las noticias por temas, generando cuantos
ficheros xml sean necesarios y poner todos los enlaces en una
pgina ndice, como suelen hacer los peridicos.
Para que el navegador del visitante de nuestra pgina sepa que hay
un canal RSS activo, simplemente hay que aadir una entrada de
referencia en la cabecera de la pgina (<HEAD>) y un enlace dentro
del cuerpo (<BODY>) para saber dnde est el fichero o ficheros.
<HTML>
<HEAD>
<TITLE>Canal RSS</TITLE>

<link rel="alternate" type="application/rss+xml"


href="http://miservidor.com/rss.xml" title="Canal RSS">>
</HEAD>
<BODY>
<a href="http://miservidor.com/rss.xml" title="Canal RSS">Suscrbase
<img src="rss.png" border="0" width="25" height="25"> </a>
</BODY>
</HTML>

Fjate en que en todas las referencias la direccin del fichero,


tanto en la cabecera como en el enlace, es absoluta. En efecto, si el
cliente es un navegador valdran las direcciones relativas, pero
como ya se ha dicho, el cliente puede ser un programa que no
navega, sino que simplemente muestra el resumen de noticias que
hayamos publicado, y necesitar saber de dnde extraerlas.
Adems, una vez suscritos al canal, los programas o navegadores
explorarn peridicamente el fichero xml sin navegar por el sitio,
y por tanto, una ruta relativa no servira para llegar a l.
Cmo se escribe el fichero xml para un canal RSS?

Los ficheros xml, al igual que los html, se pueden escribir con
cualquier editor de texto "transparente", es decir, sin formato ni
caracteres extraos a la tabla ASCII. Todo lo que no sea as habr
que codificarlo, tambin como en html, pero mucho ms estricto. Un
solo error en el fichero har que ste no funcione. Por tanto, es
buena idea pasarlo por un validador xml antes de ponerlo en su sitio
de servicio. En internet hay muchas pginas y programas de
validacin xml, y tambin se puede utilizar el servicio de validacin
de la W3C.
Este es un modelo de fichero xml para un RSS:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<rss version="0.91">
<channel>
<title>Canal RSS</title>
<link>http://miservidor.com</link>
<description>Gu&#237;a para escribir documentos HTML</description>
<language>es-ES</language>
<image>
<title>Canal RSS</title>
<url>http://miservidor.com/milogo.gif</url>

<link>http://miservidor.com/</link>
<width>128</width>
<height>128</height>
</image>
<item>
<title>Noticia 1</title>
<link>http://miservidor.com/noticia1.htm</link>
<pubDate>Wed, 10 Sep 2010 00:00:00 GMT</pubDate>
<description> Descripci&#243;n de la noticia 1 </description>
</item>
<item>
<title>Noticia 2</title>
<link>http:/miservidor.com/contenidos.asp?nivel=18&amp;cont=567</link>
<pubDate>Tue, 21 Sep 2010 00:00:00 +0200</pubDate>
<description> Emoci&#243;n en el Bol d&:#39;Or </description>
</item>
</channel>
</rss>

Los ficheros RSS suelen crearse con la extensin .xml pero


tambin funcionan con .rss o .rdf
La parte inicial del fichero ser siempre igual; lo que cambiar
sern los elementos <item>, que son los que muestran las nuevas
noticias que aparezcan. Por supuesto, se pueden aadir cuantos
sean nacesarios, y conviene planificar la antigedad de las noticias
que se mostrarn, eliminando los que proceda. Conviene prestar
especial atencin al borrado de los items que apunten a noticias que
ya han caducado, y que tal vez, ya no estn disponibles en el
servidor.
No hay que confundir la versin de lenguaje xml (1.0) con la de RSS
(0.91). Hasta ahora han aparecido cuatro versiones de RSS: 0.91,
0.92, 1.0 y 2.0. La diferencia entre ellas simplemente consiste en
que se le han ido aadiendo etiquetas nuevas al lenguaje, y no est
muy claro que algunas de ellas sirvan para algo. Como siempre, todo
va a depender del cliente utilizado, pero el funcionamiento bsico
es el mismo. La estricta sintaxis xml debe respetarse en todas
ellas.
Cuando se escriben ficheros xml, hay que tener en cuenta que no se
pueden poner letras con acentos, comillas, &, apstrofes, ees, los

signos < y >, y algunos otros. Todo esto deber ir codificado como
en html, pero no todo se puede codificar igual. Se puede utilizar
&apos; &amp; &quot; &lt; &gt; pero no es vlido &aacute; Para no
confundir cuales se pueden codificar como en html y cuales no, lo
mejor es utilizar el formato numrico en todos ellos: &#225; =
&#038; = &
En esta gua tienes la tabla con los cdigos de los caracteres.
Otra cosa que hay que controlar para evitar problemas de
validacin es el formato de las fechas para la etiqueta <pubDate>
que tiene que ser el definido en la norma RFC 822, como puedes ver
en el ejemplo.

Ultimas innovaciones
El HTML, como cualquier otro lenguaje, no est terminado ni lo
estar nunca. Da a da se le van implementando nuevas utilidades
que le hacen, si cabe, ms atractivo y prctico. Hay que distinguir
entre lo que son elementos "oficiales" del lenguaje, y las
implementaciones que los creadores de cada visualizador le van
aadiendo a sus respectivos programas. Buena muestra de ello son
los CGI y los applets, plug-ins y JavaScripts de Netscape y los
ActiveX de Microsoft.
No hay que confundir los applets con los plug-ins o los CGI. En la
versin 2.0, Netscape introdujo extensiones al lenguaje HTML para
permitir incorporar un programa escrito en Java a un documento
HTML, del mismo modo que se puede insertar, por ejemplo, una
imagen. A estos programas, se les denomina "applets". Son
programas diseados para un fin concreto dentro de la pgina, como
producir una animacin o filtrar la entrada de informacin en un
formulario. Los JavaScripts no son applets, no tienen la entidad de
autnticos programas, y sus acciones son ms limitadas al estar
restringido su radio de accin a la ventana del navegador. En
realidad, y aunque no forma parte del HTML oficial, podra
considerarse el java interpretado, como una extensin del HTML,
igual que las tablas, o cualquier otro elemento, aunque un poco ms

complejo, al tratarse de un lenguaje basado en objetos y muy


parecido al lenguaje C.
Los plug-ins, en cambio, son mdulos de software (programas) que
se ensamblan con el visualizador, aadindole nuevas prestaciones o
habilidades, que le permitirn decodificar nuevos formatos para los
que no estaba preparado originalmente, como el VRML, para la
navegacin en mundos 3D, el Adobe Flash para presentaciones
hechas con Flash Player o el Acrobat Reader para ver documentos
generados en formato .pdf De esto se deduce que, si no se le han
instalado los plug-ins necesarios a nuestro visualizador, al intentar
leer una pgina con, por ejemplo, un fichero de vdeo, lo que ste
har es pedirnos el nombre de un programa auxiliar para que sea l
quien gestione ese fichero en lugar de procesarlo por s mismo, o
nos propondr descargar el fichero para utilizarlo ms tarde.
Todo esto, es respecto a Netscape (o Mozilla). Microsoft lleg
tarde, pero por supuesto, tiene algo parecido: el Active X. Esto no
es ms que un pequeo mdulo capaz de hacer de enlace entre el
Internet Explorer (el visualizador de Microsoft) y paquetes de
desarrollo como MS Visual Basic, MS Visual J++ o aplicaciones de
uso comn como MS Excel, o con recursos del sistema. Estas
habilidades tienen dos problemas graves: que slo puede utilizarse
en entornos Microsoft, lo que le resta la portabilidad intersistemas
que tiene Java, y que al ser capaz de conectar directamente con los
recursos del sistema, los fallos de seguridad son muchos ms
peligrosos.
Te habrs dado cuenta, de que todo lo dicho es referido siempre al
propio navegador, es decir que se trata de acciones realizadas
en local, en tu propia mquina, y por tanto no es necesario estar
conectado a una red. Los programas CGI se ejecutan en el servidor,
es decir en remoto, y s es necesario estar conectado a la red.
Constituyen una solucin ms fiable que las anteriores, ya que las
mquinas donde residen los servidores, suelen ser mucho ms
potentes que los PC's clientes, y con ms recursos siempre
disponibles (o por lo menos debera ser as), lo que permite realizar

cualquier diseo por complicado que sea, sin obligar a quien se


conecta a tener un ordenador caro, o con todos los plug-ins
instalados, pero su eficacia depende absolutamente de la velocidad
de la red, que a veces es desesperante... Aunque se mencionan aqu
a efectos de comparacin, los CGI no son nuevos, ya que
aparecieron en las primeras versiones oficiales del HTML.
La penltima novedad del HTML es algo que prcticamente
terminar con l: las hojas de estilo en cascada (CSS). En efecto, al
poco de implementarse este avance, y aunque el HTML todava goza
de buena salud, la W3C ha establecido un nuevo estndar: el
XHTML, que es una modificacin del HTML junto con CSS.
Bsicamente el XHTML es igual que el HTML, pero eliminando
algunos elementos y basando el diseo en el desarrollo de hojas de
estilo en casacada, obligatorias, puesto que el nuevo XHTML no
tiene elementos de estilo propios. Al mismo tiempo, se pretende
que el lenguaje sea ms estricto a la hora de escribirlo.
Un nuevo invento, aparecido en 2005, es el lenguaje AJAX. Esto es
un acrnimo de Asynchronous JavaScript And XML (JavaScript y
XML asncronos, donde XML es, a su vez, otro acrnimo de
eXtensible Markup Language).
Ms que un lenguaje, consiste en una tcnica de desarrollo web para
crear aplicaciones interactivas que se ejecutan en el cliente, es
decir, en el navegador del usuario, y mantiene comunicacin
asncrona con el servidor en segundo plano. De esta forma es
posible realizar cambios sobre la misma pgina sin necesidad de
recargarla entera de nuevo. Esto significa aumentar la
interactividad y la velocidad (si la red lo permite, claro), aunque no
est muy claro que mejore la usabilidad. Por supuesto, slo funciona
en navegadores de ltima generacin. La idea consiste en combinar
cuatro tecnologas ya existentes:

XHTML (o tambin HTML) y hojas de estilos en cascada


(CSS).
Document Object Model (DOM), que es una forma de
representar los elementos de un documento estructurado (tal

como una pgina web escrita en HTML o un documento XML)


como objetos que tienen sus propios mtodos y propiedades, y
a las que se accede con un lenguaje de scripting como
JavaScript o JScript.
El nuevo objeto XMLHttpRequest para intercambiar datos de
forma asncrona con el servidor web.
JavaScript. En realidad, nada de esto funcionara sin l.

Como el DHTML o ASP, AJAX no constituye una tecnologa en s


misma, sino que es un trmino que engloba a un grupo de stas que
trabajan conjuntamente. Aunque se utiliza en las pginas web
convencionales (por ejemplo, Gooble o Google maps), fue
desarrollado para crear aplicaciones de terminales de telefona
mvil. Como puedes ver, casi todo depende en realidad del
navegador, y estas nuevas tecnologas hacen que haya que
plantearse, una vez ms, para cul de ellos conviene programar.
En estos momentos, se est produciendo una paradoja: mientras las
tcnicas de programacin tienden a la interactividad plena de las
aplicaciones sin importar la carga que esto provoque en la red, las
compaias de comunicaciones no estn mejorando sustancialmente
la capacidad de las redes, producindose grandes diferencias de
rendimiento entre zonas (y de precio por sus servicios).
Y una vez ms el W3C, dando un bandazo en su trayectoria,
abandona la terminacin de lo que iba a ser el XHTML2, y se lanza a
definir un nuevo estndar: HTML5. Esta nueva versin, al igual que
el XHTML, no tendr instrucciones de estilo propias, y ser CSS la
encargada de ello, eso s, tambin con una nueva versin: la CSS3.

Estilos
Un nuevo estndar?

Con lo que hasta aqu llevamos visto de HTML, ya te habrs dado


cuenta de que, cuando vas a crear un documento, se te presentan
dos cuestiones bsicas: la lgica, es decir, la estructura del
documento (se pone un ndice? una barra de navegacin?, mens
desplegables?, con frames o sin frames?) y la fsica, que es la

presentacin o esttica general del documento y sus contenidos,


como las cabeceras, prrafos, pies, tipos de letra y colores, etc.,
las dos cosas juntas, a menudo, pueden ser complicadas de resolver
con cierta armona. Si tomas esta gua como ejemplo, vers que no
se le ha dedicado mucho trabajo a la vista final. En efecto, me
interesa ms que entiendas lo que digo, que hacerlo muy bonito y no
decir nada, y para m es mucho ms cmodo de escribir. Eso no
significa que un documento no deba estar bien presentado, lo ideal
es que tenga las dos cosas, pero es una cuestin de prioridades, de
tiempo... o de necesidad, si se trata de un producto comercial que
hay que vender.
Esta idea, la de separar los contenidos de la presentacin, es la que
se desarrolla con el que ser en su da el sucesor del HTML:
el XHTML. No es que el HTML ya est extinguido; de hecho la
mayora de pginas web del mundo estn todava escritas en HTML,
lo que equivale a hablar de muchos millones de pginas. Ser, por
tanto, un proceso largo que obligar a que los navegadores soporten
ambos lenguajes durante bastante tiempo, y tambin a que los
programadores los conozcan, aunque slo sea para poder migrarlas o
mantenerlas. El HTML, tal como lo conocemos hoy, no tiene ningn
problema siempre que se lean las pginas en un ordenador
convencional, pero presenta algunas dificultades para los nuevos
medios audiovisuales, como los telfonos mviles, PDAs, etc. Esta
es, seguramente, la razn principal para impulsar el cambio, y es
muy posible que muchas empresas opten por mantener dos
versiones diferentes de sus sitios, porque, evidentemente, no
pueden tener los mismos contenidos ni aspecto las destinadas a
receptores de pequeo formato.
Si ya dominas el HTML, no temas adentrarte en el mundo XHTML;
son prcticamente iguales. Solamente cambia un poco la sintaxis de
algunas etiquetas (no todas), otras desaparecen (<FONT>), se
abandona el maquetado con tablas y se hace con bloques o "capas"
(<div>), se distingue entre maysculas y minsculas y todos los
elementos tienen que llevar cierre. Por ejemplo, el tpico truncado
de lnea <BR> pasa a escribirse <br />. Pero todo eso no sirve de

mucho sin las hojas de estilo que veremos a continuacin, y que


tambin fiuncionan con el HTML de toda la vida, ya que inicialmente
fueron diseadas para l. Una ventaja indiscutible de estas
tcnicas, aparte de cumplir con los nuevos estndares, es que se
consigue un maquetado ms fino de la pgina, al poder trabajar con
medidas mucho ms pequeas que el prrafo como hasta ahora.
Qu son las hojas de estilo

No es que el HTML no tuviese hasta aqu recursos de estilo, que ya


hemos visto en pginas anteriores, como los tipos, tamaos y
colores de letra (<FONT>), atributos de estilo de formularios y
links, (<STYLE>) y otros, pero todos ellos estn escritos embebidos
en el propio cdigo html. Estas definiciones tpicas hacen muy
trabajoso el cambiar de estilo, ya que eso implica que hay que
editar todas las pginas del documento en muchos puntos de las
mismas. Para intentar resolver este problema, se han implementado
las hojas de estilo o CSS (Cascade Style Sheets).
El problema que tienen, por ahora, es que no todos los navegadores
soportan el mismo tipo de lenguaje CSS, ni lo interpretan de la
misma forma (a pesar de que existe un estndar como en el HTML),
ni por supuesto, la misma versin de lenguaje. El estndar dice que
un navegador que soporte la versin 2 de CSS tambin soportar la
1, eso dice, pero tal vez el navegador no lo sepa, o no soporte la 2, o
ninguna y se cuelge irremisiblemente... Una de las peores cosas que
tienen las hojas de estilo, es que si el navegador no entiende lo que
hay en ellas, en lugar de ignorarla, puede colgarse, o en el mejor de
los casos, ofrecer una imagen desoladora de nuestra pgina. As
pues, es buena idea probar las hojas de estilo con cuantos
navegadores y distintas versiones de ellos se pueda, y saber con
cuales no funciona, sin olvidar que en un determinado navegador,
puede que todo funciona bien con una versin, pero con la siguiente
tal vez algo deje de hacerlo correctamente. Y si es posible,
procurar que el documento, sin aplicarle ningn estilo, solamente
utilizando los valores por defecto, tenga una apariencia ms o
menos aceptable. Recuerda que no todo el mundo tiene la ltima
versin de todo, ni usa el mismo navegador que t. Por cierto: el

navegador ms popular del mundo no es precisamente el que mejor


funciona, adems de pasar olmpicamente de los estndares...
A todos estos problemas acaba de sumarse otro: la aparicin de
nuevos terminales de reducidas dimensiones, como telfonos y
tabletas que llevan distintos sistemas operativos, y por tanto
nuevas y variadas versiones de navegadores que, por supuesto,
tambin interpretan las cosas a su manera y no como t esperas...
Para el XHTML se lleg hasta la versin 2.1 de CSS, y ya se est
trabajando en la 3 que acompaar al html5. Al no haberse
declarado oficialmente todava estas versiones de languaje, no
todos los navegadores las aceptan, y los que s, de momento, de
forma parcial.
La tecnologa aplicada a las CSS es utilizable de cuatro formas
distintas:
1.- En lnea, que es la forma ya conocida, aunque aqu se utiliza una
sintaxis algo diferente. Sea por ejemplo:
<P STYLE="font-size:20px; font-family:Courier;
color:green";>Ejemplo de estilo</P>
Este es el resultado:

Ejemplo de estilo
2.- Por clase de estilo. Esta tcnica consiste en definir una clase,
que es un conjunto de propiedades de estilo agrupadas bajo un
nombre. La clase creada se invoca desde un elemento <span>. Por
ejemplo, para definir la clase prueba_cl:
<html>
<head><TITLE>Estilos</TITLE>
<style type="text/css">
.prueba_cl{ font-size:20px; font-family:Courier;
color:green;}
</style>
</head>

<body>
<span class="prueba_cl">Ejemplo de estilo</span>
</body>
</html>

3.- Por identificador de bloque, que al igual que la clase, consiste


en definir un conjunto de propiedades de estilo agrupadas bajo un
nombre, que se asignarn a un bloque. El identificador creado se
invoca desde un elemento <div>. Por ejemplo, para definir
el identificador prueba_id:
<html>
<head><title>Estilos</title>
<style type="text/css">
#prueba_id{ font-size:20px; font-family:Courier;
color:green;}
</style>
</head>
<body>
<div id="prueba_id">Ejemplo de estilo</div>
</body>
</html>

Y en ambos casos, este es el resultado:

Ejemplo de estilo
Como puedes ver, los dos ejemplos anteriores son casi iguales. A
simple vista solamente cambia el caracter que hay delante del
nombre prueba_, que es un punto para la clase y
unaalmohadilla para el identificador, pero internamente, la
diferencia estriba en que la clase puede ser utilizada por todos los
bloques de texto que se quiera (generalmente solo contiene
instrucciones de estilo), mientras que el identificador solamente se
puede utilizar una vez, ya que es capaz de crear un bloque y no
puede haber dos bloques con el mismo nombre.

Estas dos ltimas tcnicas, permiten cambiar algo ms fcilmente


el estilo de la pgina, ya que solamente habra que tocar la cabecera
de cada una, pero si el documento tiene varios cientos de ellas,
sigue siendo un trabajo importante. La solucin para poder cambiar
el estilo de todo el documento, editando solamente desde un sitio,
es la cuarta forma:
4.- Por fichero de estilos externo Esto consiste en escribir las
definiciones de estilo en un fichero aparte de las pginas, y
referenciarlo en la cabecera de cada una. El fichero es un simple
fichero de texto guardado con la extensin .css
<HTML>
<HEAD><TITLE>Estilos</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css">
</HEAD>
<BODY>
Ejemplo de estilo
</BODY>
</HTML>

Este es el contenido del fichero estilo.css


/* Estilo para el cuerpo del documento */
BODY {font-size:20px; font-family:Courier;
color:green;}
Y este sera el resultado:

Ejemplo de estilo
Como puedes ver, es lo mismo que se escribi en los ejemplos
anteriores, pero ahora, en lugar de un nombre inventado por el
usuario, se indica el nombre de un elemento HTML al que se quiere
dar estilo propio, en este caso toda la pgina: BODY. Por supuesto,
en el fichero se pueden incluir todos los elementos HTML que se
quiera. Tambin se pueden incluir en el fichero nombres que no
coinciden con elementos HTML, tal como se ha hecho en los

ejemplos 2 y 3, con la clase prueba_cl o el identificador prueba_id,


invocndolos con el elemento correspondiente.
Cmo se escriben los ficheros CSS

El lenguaje utilizado para escribir las hojas de estilo son muy


similares al lenguaje Java o JavaScript, aunque no es tan estricto
en la sintaxis. Analicemos el ejemplo anterior:
estilo.css
/* Estilo para el cuerpo del documento */
BODY {font-size:20px; font-family:Courier;
color:green;}
Como ya habrs adivinado, la primera lnea es un comentario. Los
caracteres /* y */ son los mismos que se utilizan en JavaScript.
A continuacin tenemos una lnea que comienza con el nombre de un
elemento html: BODY lo que significa que todas las instrucciones
que vienen a continuacin, encerradas dentro de un par de
llaves { } (ojo, no son corchetes), igual que en javaScript,
definirn los parmetros de estilo que hay que aplicarle a BODY. Al
conjunto de declaraciones escritas dentro de las llaves, se le
llama bloque de declaraciones, y cada bloque de declaraciones
puede considerarse como una regla de estilo. Aunque en los
ejemplos se han escrito las declaraciones en lnea, no hay nada que
impida hacerlo de otra forma:
/* Estilo para el cuerpo del documento */
BODY {
font-size:20px;
font-family:Courier;
color:green;
}

La W3C denomina a estos elementos HTML , como <BODY> o <P>,


"selectores" y a los parmetros que indican propiedades, como color
o font, "declaraciones". Si alguna de las declaraciones del bloque
tiene un error de sintaxis, de lgica, o no es compatible con los
recursos del navegador, simplemente se ignora y se ejecutan las
dems (en teora, claro). Los bloques de declaraciones pueden

anidarse y formar bloques complejos, es decir, que una regla de


estilo puede estar formada por varios bloques de declaraciones.
Cmo funcionan las CSS

Cuando una pgina es llamada por el navegador, primero se cargan


los textos y los grficos, despus se aplica el estilo que contenga el
cdigo HTML, y por ltimo, se aplica el estilo que indique la CSS.
Este orden de carga hace que las instrucciones de estilo definidas
en las CSS sean las que finalmente prevalecern, anulando las que
hubiese definidas en HTML (no todas, slo las coincidentes).
No hay que seguir ningn orden especial para escribir las
delaraciones ni sus nombres, pero ten presente que las
declaraciones hechas para un elemento sern heredadas por sus
descendientes, salvo que se indique lo contrario, redefiniendo
valores para esos otros elementos. Por ejemplo, lo definido para el
elemento <BODY> ser heredado por todos los elementos de la
pgina ya que <BODY> es el "padre" de todos los dems elementos.
De la misma forma, lo declarado para un elemento <P> sera
heredado por los posibles elementos que contenga, como <B> o <I>, y
as sucesivamente. Este efecto de herencia de propiedades entre
elementos relacionados es el origen del nombre de hojas de estilo
en "cascada".
Resumiendo: cada elemento hereda las propiedades del elemento
que lo contiene, y al contenedor se le llama elemento padre. No
todas las propiedades son heredables y para cada propiedad se
puede definir si sta se hereda o no. Para forzar a que un elemento
herede alguna propiedad que de otro modo no heredara se utiliza la
instruccin inherit que se puede aplicar a cualquier propiedad de
cualquier elemento, pero teniendo claro que la herencia ser
siempre desde el padre inmediato.
Esta es la forma de conocer el "rbol genealgico" de un elemento:
Descendiente: un elemento A es descendiente de otro B cuando B
es padre de A o cuando B es padre de otro elemento que a su vez es
padre de A.

Antepasado: un elemento A es antepasado de otro B cuando B es


su descendiente.
Hermano: un elemento es hermano de otro cuando ambos
comparten el mismo padre.
Adems, segn como se escriban las etiquetas se pueden conseguir
cosas diferentes. Por ejemplo, con esta pgina:
<HTML>
<HEAD><TITLE>Estilos</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css">
</HEAD>
<BODY>
<B>Negrita verde</B> Ejemplo de estilo verde
<P>Parrafo 1 <B>Negrita rojo</B></P>
<P>Parrafo 2</P>
</BODY>
</HTML>

Si escribimos esta hoja de estilo:


BODY {color:green}
P B {color:red}

Se obtiene:
Negrita verde
Parrafo 1

Ejemplo de estilo verde

Negrita rojo

Parrafo 2
Pero simplemente poniendo una coma entre P y B:
BODY {color:green}
P, B {color:red}

Se obtiene:
Negrita verde
Parrafo 1

Ejemplo de estilo verde

Negrita rojo

Parrafo 2
En el primer caso, queda claro que los dos elementos <P> del fichero
html heredan el color verde de <BODY>, y al no haber ninguna coma
entre P y B en la hoja de estilo, se est indicando que el color rojo
es slo para el texto en negrita cuando forme parte de P, pero en
el segundo caso, con una coma separando P de B, se le indica que el
color rojo es para el texto de ambos elementos, P y B, siempre,
est en el prrafo que est, e incluso aunque no est en un prrafo,
como es el caso del texto "Negrita verde"
Unidades CSS

Los estilos, bsicamente, consisten en alterar las dimensiones y


posicin por defecto de los distintos elementos de la pgina, y para
eso necesitamos unidades de medida. Veamos las unidades
empleadas en CSS.
Unidades relativas
Son las que dependen de la resolucin de la pantalla del cliente o
del tipo de letra base que se utilice en la pgina. Hay dos de este
tipo: em que toma como referencia la anchura o altura de la
letra M mayscula de la fuente ms relevante de la lnea. Por
ejemplo, si se escribe line-height:2em significa que la altura de la
lnea ser 2 veces la altura mxima de las fuentes de esa lnea.
La otra unidad, ex que hace referencia a la altura de la
letra x minscula, que es aproximadamente la mitad de la anterior
M. Por ejemplo, al escribir line-height:2ex se indica que la altura de
la lnea ser 2 veces la mitad de la altura mxima de la fuente
usada.
Cuando se usa este tipo de unidades hay que tener cuidado al elegir
los elementos HTML sobre los que se aplicarn y su estructura, ya
que si se anidan, al heredar propiedades pueden resultar medidas
muy reducidas o muy grandes.
Unidades absolutas
Que son las que no dependen de los factores externos que afectan
a las unidades relativas antes descritas. Entre estas

tenemos cm (centmetro), mm (milmetro), in (pulgadas), pt(puntos


tipogrficos, igual que los puntos de las fuentes de
Windows), px (pxels de pantalla) y pc (picas).
Hasta que tengas cierta soltura en estos menesteres, puede no ser
fcil acertar con la unidad adecuada en cada caso. Como orientacin
inicial, tal vez pueda ayudarte el saber que (aproximadamente)
1 px equivale a 0.28 mm o 0.011 in. 1 in son 2.54 cm. 1 pc son 12 pt.
1 pt equivale a 0.0139 in. 12 pt equivalen a 0.2 in.
Queda una pseudo unidad que no puede incluirse en ninguna de las
dos clases anteriores: el porcentaje % En efecto, este indicador
de unidades, que no es en s mismo una unidad, lo que hace es tomar
la unidad de medida (la que sea) del elemento indicado y aplicarle el
clculo correspondiente al valor que indique el porcentaje.
Todas las propiedades tienen siempre un valor asignado, que puede
ser el especificado en la CSS o el valor heredado. Si no se ha
definido ninguno de los dos, el navegador usa el valor inicial, es
decir, el valor predeterminado para cada propiedad.
Si en la CSS se especifica un valor relativo, el navegador proceder
a calcular su valor absoluto, que es el nico tipo con el que puede
trabajar la pantalla. Por ejemplo, para hallar P {font-size: 125%
} hay que tomar el valor del elemento padre de <P> y aplicarle un
porcentaje de 125% para obtener el tamao real del texto. Si
<BODY> es el padre de <P> y tiene un tamao de fuente de 10px,
entonces <P> tendr un tamao de fuente de 12,5px
(10x125%=12,5). Los elementos que sean hijos de <P> no van a
heredar el valor especificado(125%) sino el
valor computado (12,5px).
Pero puede suceder que el valor computado no pueda ser utilizado
por el navegador debido a limitaciones tcnicas. Tomando el
resultado del ejemplo anterior, en ninguna pantalla es posible
escribir una fuente de 12,5px, por lo que el navegador la ajustar a
12px a 13px, es decir al valor real.

Reglas especiales

Existen una reglas especiales llamadas reglas arroba que deben


escribirse al principio de la hoja (si las hay), antes de cualquier otra
regla. Adems de indicar un estilo determinado, como las otras
reglas, algunas sirven para realizar acciones, o ambas cosas. Por
ejemplo:
@import "estilo2.css";
@media print {
BODY { font-size: 10pt }
}
@page { margin: 2cm; }
@page :first {
margin-top: 5cm;
}

En el ejemplo anterior, la primera de ellas, @import sirve para


importar otra hoja de estilo para ser usada conjuntamente con la
actual, (algo parecido a las includes de asp). Al utilizar esta regla
hay que tener cuidado de que no haya instrucciones contradictorias
entre la hoja llamada y la llamadora.
En la segunda regla del ejemplo, @media print indica que el
estilo asignado a BODY ser efectivo cuando la pgina sea impresa,
pero no cuando sea visualizada normalmente en el navegador, para
ese evento habr que definir otra regla de las ya conocidas.
En la tercera y cuarta con @page se fija el margen de todas las
pginas a 2 centmetros, y se establece el margen superior de la
primera pgina en 5 centmetros.
Las reglas @page tienen la particularidad del contexto de pgina.
En efecto, cuando se pagina un documento con estas reglas, se est
asumiendo que el resultado ser llevado a papel y encuadernado
como un libro. Por ejemplo:
@page {
margin-left: 3cm;
}
@page :left {
margin-left: 4cm;

Con esta hoja de estilo, y una vez impreso el documento, el margen


izquierdo en las pginas de la izquierda ser de 4 cm. y en las de la
derecha, tambin su margen izquierdo, ser de 3 cm.
Al imprimir un documento a doble cara puede ocurrir que los
mrgenes en pginas izquierdas y derechas sean diferentes. Para
controlar esto pueden utilizarse las pseudoclases :left o :right Por ejemplo:
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}

Otras reglas que pueden considerarse especiales son las que hacen
referencia a los pseudo-elementos. En realidad se trata de
elementos existentes, pero con especiales funcionalidades distintas
de las que normalmente tiene el elemento base. Se escriben
poniendo el elemento de que se trate seguido de dos puntos y el
parmetro que se quiera utilizar:
:first-line Permite actuar sobre la primera lnea de un prrafo.
:first-letter Lo mismo que el anterior pero actuando solamente
sobre la primera letra.
:before
:after con estos dos pseudo-elementos se puede
insertar un contenido fijo por defecto antes o despus de un
elemento cualquiera.
Veamos algunos ejemplos:
P:first-line { text-transform: uppercase }

convierte la primera lnea del prrafo en maysculas.


P:first-letter { font-size: 200%; font-weight: bold }

Incrementa el tamao y el espesor de la primera letra del prrafo.

De forma similar, se puede conseguir que, por ejemplo, siempre que


se utilice el elemento <H3>, CSS inserte un grfico o escriba una
frase delante, y lo mismo al final:
H3:before {content: "Tema: "}
P:after {content: url("migrafico.gif")}
BODY:after {content: "Fin de la obra"; }

Otros pseudo-elementos o pseudo-clases son las que se aplican a los


links. Hay dos posibles modificaciones de estilo para este elemento;
el color del enlace en sus distintos estados y si aparece subrayado
o no. Tericamente no debiera influir el orden en que se escriban
los distintos estados en la CSS, pero es mejor escribir las
declaraciones en el siguiente orden (por supuesto, los colores son
libres):
a {text-decoration: none;}
a:link {color: #FF0000;}
a:visited {color: #00FF00;}
a:hover {color: #FF00FF;}
a:active {color: #0000FF;}

Donde link indica que el enlace no ha sido visitado, visited que el


enlace ha sido visitado, active que el enlace est siendo pulsado,
y hover que el ratn est pasando sobre l (sin pulsar).
Existen otras reglas que no influyen directamente sobre la
composicin de la pgina, como son los cursores. Se puede cambiar
el aspecto del puntero del ratn con la
propiedad cursor: valor; donde valor; puede ser:
Declaracin

cursor

Valor por defecto auto


auto
default
inherit
help
wait
text
move
Valores posibles pointer
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize

w-resize
Valor porcentual No aplicable
Se aplica a

Todos

Se hereda?:

Si

En lugar de uno de los nombres de puntero predeterminados,


tambin se puede indicar uno creado por el usuario:
P { cursor: url("micursor.cur"), text; }

Para que el puntero indicado pueda funcionar, es necesario que


exista en la mquina del cliente. Por ello, al igual que cuando se
definen fuentes, conviene poner ms de uno, por si el propuesto
falla.

El selector universal

Se puede hacer referencia a todos los elementos de una pgina


utilizando un selector especial que se representa por un asterisco.
Por ejemplo:
*

{color: red;}

Escribiendo hojas de estilo


Elementos modificables con CSS

O mejor dicho, atributos de elementos que pueden modificarse con


CSS. Son muchos (casi todos) los aspectos que pueden modificarse
con CSS. Dado el carcter general de esta gua, aqu veremos
solamente los ms utilizados.
Generalmente se acta sobre los siguientes:

Texto o contenido
Tamao del bloque
Color del fondo del bloque
Bordes de bloque
Estilo de los bordes
Color de los bordes
Mrgenes de bloque
Espaciado interno del bloque

Posicionamiento del bloque


Grficos y bloques flotantes
Visibilidad del bloque
Listas
Enlaces
CSS + JavaScript
Efectos especiales
Tablas

Y puede que te preguntes qu es un bloque. Como bloque puede


entenderse todo lo comprendido dentro de elementos con cierre,
como <body> </body>, <p> </p>, <form> </form>, <table> </table>,
<td> </td>, <div> </div>, etc., y al aplicar estilos con CSS no es buena
idea escribir nada fuera de estos elementos. En lugar de ser un
nombre de elemento HTML, un bloque tambin puede tener un
nombre definido por el programador, por ejemplo "menu", y
generalmente son stos los que contienen en su interior a los
anteriores o a otros bloques definidos por el usuario. El nmero de
bloques en una pgina puede ser muy elevado (ms de mil), y
depender de la capacidad del navegador utilizado.
Veamos cmo funciona cada cosa:
Los Mrgenes de bloque son el espacio comprendido entre el
bloque y el borde de la ventana activa del navegador. Se controla
con el atributo margin.
Los Bordes de bloque, sin aplicar estilos, no son visibles, y es como
un cuadro imaginario que envuelve todo el contenido del bloque. Su
atributo de control es border.
Espaciado interno del bloque es la distancia entre el borde del
bloque y su contenido. Es el atributo padding (en ingls significa
algo as como "acolchado")
El Estilo y color de los bordes, son evidentes: son las lneas que
delimitan el bloque, que pueden dibujarse de varias formas en
cuanto a tipo de trazo, grosor y color. Estos dos atributos tambin

pueden actuar sobre los bordes de otros elementos contenidos


dentro de un bloque, como formularios, tablas, grficos, etc.
El Color del fondo se controla con las mismas instrucciones que las
de la pgina HTML: background. Los parmetros de color, al igual
que en HTML, se pueden escribir con su nombre (en ingls) o con la
notacin RGB en hexadecimal.
El Tamao son las dimensiones del bloque. Si no se indican
dimensiones, por defecto, el bloque ocupar todo el ancho de la
ventana, y de alto lo que su contenido precise. Se utilizan dos
atributos para controlarlo: width para el ancho y height para el
alto.

Estilo del texto

Veamos los parmetros disponibles para dar estilo al texto. Como


ya sabes, las unidades de medida aplicables a todos ellos son varias,
pero para mayor claridad, en todos los ejemplos utilizaremos
solamente el pxel: px. Sea por ejemplo la siguiente pgina:
<HTML>
<HEAD><TITLE>Estilos</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css">
</HEAD>
<BODY>
Texto fuera de prrafo.<BR>
Segunda lnea fuera de prrafo.
<P>texto de prrafo. <BR> segunda lnea de prrafo.</P>
</BODY>
</HTML>

Y si escribimos la siguiente hoja de estilo estilo.css:


BODY {color:green }
P {color:red;
font-size:20px;
font-family:Courier;
font-weight:bold;
font-style:italic;
line-height:30px;
letter-spacing:5px;
text-decoration:underline;

text-transform:capitalize;
text-align:left;
text-indent:30px;
}

Se obtiene:
Texto fuera de prrafo.
Segunda lnea fuera de prrafo.

Texto De Prrafo.
Segunda Lnea De Prrafo
Fjate en la gran diferencia de estilo que hay entre las dos
primeras lneas y las dos siguientes. Analicemos cmo funciona: Las
dos primeras lneas de texto, en color verde, tienen todos sus
valores por defecto, excepto el color que lo reciben de la
etiqueta BODY definida en la css. Las dos siguientes, en rojo,
reciben todas sus caractersticas de la etiquetaP, tambin definida
en la css. Como puedes ver, hay una gran cantidad de atributos que
actan sobre el estilo de ese texto.
color:red; Este ya lo conocemos. Define el color del texto. El
color deseado puede escribirse directamente, en ingls, o puede
utilizarse el sistema RGB en hexadecimal. Por ejemplo, este mismo
color rojo en RGB sera: #FF0000; Ciertos valores, como el rojo,
pueden escribirse de forma abreviada: #F00; Otra forma de
declarar el color es mediante la funcin rgb() que puede
parametrizarse en decimal o en tantos por ciento. He aqu un
ejemplo con las cuatro formas del color rojo:
color:
color:
color:
color:

#ff0000
#f00
rgb(255,0,0)
rgb(100%, 0%, 0%)

Recuerda que en el ndice tienes unas tablas con


los nombres y cdigos de los colores.
font-size:20px; Tambin muy conocido: define el tamao de los
caracteres. Adems del tamao definido por el usuario, expresado
en cualquiera de las unidades de medida conocidas, puede tener

alguno de los siguientes valores absolutos: xx-large xlarge large medium small x-small xx-small.
font-family:Courier; Indica el nombre (o nombres) del tipo de
letra que se va a emplear. En el ejemplo se ha utilizado el tipo
"Courier", pero pueden escribirse varios separados por comas, lo
que indica al navegador que si no existe en la mquina el primer
tipo, utilice el segundo, y si tampoco, el tercero, etc. Por
ejemplo: font-family:Courier,Verdana,Arial;
Cuando definas tipos de letra, recuerda que muchos programas y
algunos drivers de impresora instalan sus propias fuentes en el
sistema sin avisarte, y puede que en tu mquina haya tipos que no
son estndar en Windows. No se deben utilizar tipos extraos que
difcilmente se encontrarn en las mquinas de los clientes, es
decir, el tipo de fuente indicado en la hoja simplemente le indica al
navegador qu fuente debe usar, NO se la sirve. En la versin 3 de
CSS parece que se podr indicar al cliente dnde obtener una
fuente que no tenga instalada.
font-weight:bold; Aqu se especifica el peso o grosor de la
fuente. Pueden emplearse literales como lighter, normal (por
defecto) o bold. Tambin se pueden utilizar nmeros
entre 100 y 900, escritos de 100 en 100 (no sirve 190, pero s
200). Los pesos no tienen los mismos resultados en todas las
mquinas, ya que depende mucho de la calidad de su pantalla, de su
resolucin, del navegador que emplea... En cualquier caso, no deben
hacerse combinaciones extraas, como definir un size muy pequeo
y darle peso 900, ya que lo nico que conseguirs es un borrn
perfectamente ilegible.
font-style:italic; Solamente tiene dos posibilidades: normal (por
defecto) o italic que es el empleado en el ejemplo que estamos
analizando, y que hace que el texto tenga cierta inclinacin.
line-height:30px; Sirve para establecer la distancia entre lneas
consecutivas de un mismo prrafo. Adems de en pxels o alguna de
las unidades de medida que ya conocemos, puede indicarse con un
simple nmero que viene a indicar, aproximadamente, cuantas

anchuras de lnea se tomarn como unidad de medida para separar


una lnea de otra. As, por ejemplo, si pones 0 la segunda lnea se
suporpone a la primera.
letter-spacing:5px;
de la lnea.
word-spacing:5px;
la lnea.

Establece la separacin entre los caracteres


Establece la separacin entre las palabras de

text-decoration:underline; Con este parmetro, que no influye en


el tamao, puedes acompaar al texto de una delgada lnea
decorativa que puede estar en tres posiciones distintas,
como underline (el tpico subrayado debajo de la lnea), through (en
el centro de la lnea -tachado-) o overline (encima del texto). Para
que no aparezca se utiliza none(por defecto). El valor none se puede
utilizar para eliminar el efecto de subrayado que ponen otros
elementos, como ocurre en los links.
text-transform:capitalize; Curioso efecto que provee de cuatro
posibilidades: capitalize que convierte en mayscula la primera
letra de cada palabra del texto, como puedes ver en el ejemplo,
donde el texto original no es as. uppercase para convertir todas las
letras a maysculas y lowercase para lo contrario, es decir,
convertir todas las letras a minsculas. El valor por defecto
es none, que como ya habrs supuesto, deja el texto tal como est
escrito.
text-align:left; Alinea el texto segn convenga. Con left a la
izquierda (por defecto), right a la derecha, center centrado,
y justify justificado, es decir, igualando todas las lneas en longitud
a izquierda o derecha.
text-indent:30px Produce que la primera lnea del prrafo se
escriba adentrada (indentada) un cierto espacio hacia la derecha o
hacia la izquierda, dependiendo de la alineacin activa.
Este sera un resumen sobre la declaracin font:

Declaracin

font-size

font-family

font-weight

font-style

Valor por
defecto

medium

Definido por el
usuario

normal

normal

Absoluto, relativo,
porcentaje,
unidad de tamao

Familia de fuente
Windows

normal, lighter,
bolder,
un valor entre 100
y 900

normal, bold,
italic

Valor
porcentual

Se calcula respecto al
padre

No aplicable

No aplicable

No aplicable

Se aplica a

Todos

Todos

Todos

Todos

Se hereda?

Valores
posibles

Y este sobre el resto:


Declaracin line-height
Valor por
defecto

Valores
posibles

normal

texttextdecoration transform

text-align

textindent

wordspacing

letterspacing

whitespace

none

left

normal

normal

normal

normal,
inherit,
medida

normal,
pre,
nowrap,
prewrap,
pre-line,
inherit

none,
nmero,
underline,
longitud,
lineporcentaje,
through,
normal
blink

none

capitalize,
uppercase,
lowercase,
none,
inherit

left, right,
normal,
center,
longitud,
inherit,
justify,
porcentaje
medida
none

Se calcula
respecto
al ancho
No
No
No
del
aplicable aplicable aplicable
elemento
padre

Se calcula
respecto al No
Valor
porcentual tamao de aplicable
la fuente

No
aplicable

No
aplicable

Elementos
Se aplica a a nivel de Todos
bloque

Todos

Elementos Elementos
a nivel de a nivel de Todos
bloque
bloque

Todos

Todos

Se hereda? S

No

Tenemos tambin otras instrucciones que pueden modificar el


aspecto de determinadas zonas en lugar de actuar sobre todo el
bloque.
Son los pseudo-elementos. Por ejemplo:
p :first-letter{
color:red;
}
p :first-line{
color:green;
}
p :after{
content:"Hola";
}

p :before{
content:"Por ejemplo:";
}

Como puedes ver, es fcilmente deducible lo que hace cada uno:


:first-letter actuar sobre la primera letra del prrafo.
:first-line lo har sobre la primera lnea.
:after content:"Hola"; actuar sobre el texto que haya despus de
la palabra "Hola" y
:before content:"Por ejemplo:"; antes de la frase "Por ejemplo:"
Bordes de un bloque

Con css se pueden definir los bordes de un bloque, que por defecto
son invisibles. Por tanto, lo primero que hay que definir es el estilo
del borde. Adems del estilo, se puede definir su color y grosor, y
todo ello puede hacerse globalmente, sobre los cuatro lados del
bloque, o cada uno por separado. Las unidades de medida y los
nombres o cdigos de colores que pueden utilizarse, son los mismos
que ya se han visto anteriormente para los textos. Para definir el
grosor de los bordes tenemos:

border-left-width:unidad borde izquierdo


border-right-width:unidad borde derecho
border-top-width:unidad borde superior
border-bottom-width:unidad borde inferior
border-width:unidad los cuatros bordes

Donde unidad es una de las ya conocidas, por ejemplo 1px. Tambin


pueden utilizarse constantes tales como thin para fino
(2px), medium para medio (4px), y thick para grueso (6px).
Ningun estilo de bordes (excepto solid) se lleva bien con el
parmetro de grosor, que implcitamente establece su dimensionado
ms conveniente. Tenemos:

border-left-style:estilo borde izquierdo


border-right-style:estilo borde derecho
border-top-style:estilo borde superior
border-bottom-style:estilo borde inferior
border-style:estilo los cuatros bordes

Donde estilo puede ser:

none (por defecto)


solid
double
ridge
groove
inset
outset
dotted
dashed

Por ltimo, los parmetros de color de los bordes:

border-left-color:color borde izquierdo


border-right-color:color borde derecho
border-top-color:color borde superior
border-bottom-color:color borde inferior
border-color:color los cuatros bordes

Donde color puede ser un nombre de color, en ingls, o su cdigo


RGB en hexadecimal, como ya sabes.
Las combinaciones de todos estos parmetros son infinitas, y lo
mejor es ir haciendo pruebas. Recuerda que cada nevegador
interpreta todo esto a su manera, y algunos no lo interpretan en
absoluto. He aqu aplicado al ejemplo anterior sobre texto:
Si escribimos la siguiente hoja de estilo estilo.css:
BODY {color:green }
P {color:red;
font-size:20px;
font-family:Courier;
font-weight:bold;
font-style:italic;
line-height:30px;
letter-spacing:5px;
text-decoration:underline;
text-transform:capitalize;
text-align:left;
text-indent:30px;

border-width:2px;
border-color:blue;
border-style:solid;
}

Se obtiene:
Texto fuera de prrafo.
Segunda lnea fuera de prrafo.

Texto De Prrafo.
Segunda Lnea De Prrafo
Y este sera un resumen de su utilizacin:
Declaracin

border-left-width
border-right-width
border-top-width
border-style
border-bottom-width
border-width

Valor por defecto 0


Valores posibles

Unidad de longitud,
thin, medium, thick

Valor porcentual No aplicable

none

border-color
border-left-color
border-right-color
border-top-color
border-bottom-color
none

none, solid, double, inset,


none, color
outset, groove, ridge
No aplicable

No aplicable

Se aplica a

Todos

Todos

Todos

Se hereda?

No

No

No

Mrgenes de los bloques

Los bloques, por defecto, se escriben en la ventana activa


comenzando en el ngulo superior izquierdo de la misma, y su
contenido, en el interior del bloque, comienza en el mismo sitio.
Esto es posible modificarlo:
Para los mrgenes del bloque respecto a la ventana activa:

margin-left:unidad margen izquierdo


margin-right:unidad margen derecho
margin-top:unidad margen superior
margin-bottom:unidad margen inferior
margin:unidad los cuatros mrgenes

Donde unidad es una de las ya conocidas.

Para los mrgenes dentro del bloque, es decir, respecto al borde


del bloque:

padding-left:unidad margen interno izquierdo


padding-right:unidad margen interno derecho
padding-top:unidad margen interno superior
padding-bottom:unidad margen interno inferior
padding:unidad los cuatros mrgenes internos

En resumen:
Declaracin

margin
margin-left
margin-right
margin-top
margin-bottom

padding
padding-left
padding-right
padding-top
padding-bottom

Valor por defecto 0

Valores posibles Longitud, porcentaje, auto

Longitud, porcentaje

Valor porcentual Se calcula respecto al ancho del padre Se calcula respecto al ancho del padre
Se aplica a

Todos

Todos

Se hereda?

No

No

Existe otra propiedad que consigue efectos muy parecidos a los


vistos en los bordes: outline que sirve para crear contornos
alrededor de los objetos, tales como botones, campos activos de los
formularios, etc., a fin de resaltarlos, pero no se trata de bordes,
sino de contornos, es decir, estn ligeramente ms hacia adentro, y
por tanto no ocupan lugar extra en la pgina. La mala noticia es que
no funciona en todos los navegadores.

Dimensiones de los bloques

Como ya se ha dicho ms arriba, por defecto, y en funcin de su


contenido, el bloque ocupar todo el ancho de la ventana y el alto
que precise. Al componer la pgina puede que esto no interese y se
quiera limitar el espacio ocupado por el bloque. Para ello disponemos
de dos declaraciones bsicas para indicar el ancho y el alto exactos
que se desea, as como otras para definir el mnimo y mximo
tamao que deben alcanzar:
Declaracin width
Valor por

auto

min-width

max-width

height

min-height

max-height

Incierto

none

auto

none

defecto
Valores
posibles

Longitud,
porcentaje,
auto, inherit

Se calcula
respecto al
Valor
porcentual ancho del
padre
Se aplica a

Todos

Se hereda? No

Longitud,
porcentaje,
inherit

Longitud,
porcentaje,
none, inherit

Longitud,
porcentaje,
auto, inherit

Longitud,
porcentaje,
inherit

Longitud,
porcentaje,
none, inherit

Se calcula
respecto al
ancho del
padre

Se calcula
respecto al
ancho del
padre

Se calcula
Se calcula
Se calcula
respecto al
respecto al
respecto al
alto del padre
alto del padre alto del padre
o auto

Todos

Todos

Todos

Todos

Todos

No

No

No

No

No

Desafortunadamente, cada navegador interpreta las cosas de una


forma, y es necesario probar con cuantos se posible. Sea, por
ejemplo, la siguiente hoja de estilo estilo.css:
P {color:red;
font-size:20px;
font-family:Courier;
border:2px;
border-color:blue;
border-style:solid;
width:100px;
height:100px;
}

Y este texto:
<P>Esto es un ejemplo de bloque de reducidas dimensiones que
ocupa solamente 100 x 100 pixels</P>
Dependiendo del navegador utilizado, esta sintaxis provocar varios
resultados:
Internet Explorer

Opera

Netscape/Mocilla

Como puedes ver, los tres navegadores dan preferencia al texto, y


luego... hacen lo que pueden. Es evidente que la instruccin que se
les ha dado no es muy coherente, y para intentar solucionar el
fiasco, se puede recurrir a un nuevo atributo: overflow que tiene
cuatro parmetros:

visible Indica que el contenido no ser recortado a los lmites


del bloque, es decir, que puede ser presentado fuera de la
caja de bloque ignorando sus lmites. Este valor provoca el
mismo comportamiento del navegador que si no se utiliza el
atributo overflow
hidden Lo contrario del anterior. El contenido que no quepa
dentro de los lmites del bloque ser recortado y no ser
visible ni accesible.
scroll Mantiene las dimensiones definidas para el bloque, y
provee de barras de escroll horizontal y vertical para todo el
contenido que exceda los lmites del bloque.
auto Parecido al anterior. En lugar de crear barras de scroll
tanto vertical como horizontal, incluso aunque alguna de ellas
no sea necesaria, decide automticamente cuales son
precisas.

Veamos un ejemplo utilizando scroll:


P {color:red;
font-size:20px;
font-family:Courier;

border:2px;
border-color:blue;
border-style:solid;
width:100px;
height:100px;
overflow: scroll
}

Se obtiene:

Esto es un ejemplo de bloque de reducidas


dimensiones que ocupa solamente 100 x 100
pixels
Si se utiliza el parmetro hidden puede ocurrir que interese
recortar una parte del bloque en lugar de utilizar toda el rea
resultante. No necesariamente el rea a recortar debe provenir
de hidden, puede ser un bloque cualquiera, con overflow o no. Para
hacer un recorte de un bloque se utiliza la propiedad clip: Por
ejemplo:
clip: rect(0,100px,100px,0);

El parmetro rect indica la forma geomtrica que se va a recortar.


Actualmente slo est disponible el rectngulo. El resto del
parmetro son dos ejes de coordenadas: 0,100px,100px,0 que
corresponden con los vrtices superior derecho e inferior
izquierdo respectivamente.
Color o grficos de fondo del bloque

Veamos por ltimo cmo cambiar el color de fondo de los bloques.


Sea, por ejemplo: estilo.css:
P {color:red;
font-size:10px;
font-family:Courier;
border:2px;
border-color:blue;
border-style:solid;
width:200px;
height:100px;
background: yellow;
}
Esto es un ejemplo de bloque de reducidas dimensiones que ocupa solamente 200 x 100 pixels con
fondo de color.

Como es habitual en HTML, los colores pueden definirse con su


nombre en ingls o con la notacin RGB en hexadecimal. En este
caso, el color amarillo del ejemplo puede obtenerse tambin
con background: #FFFF00; el color del fondo de cualquier
elemento tambin puede ser transparent (por defecto). La
propiedad color no se hereda, pero puede forzarse de la forma
habitual: inherit
Si en lugar de un color le quieres poner un grfico la sintaxis ser:
background-image: url(../imgenes/fondo.gif);
Esta opcin tiene tres parmetros:

repeat no-repeat repeat-y repeat-x


repeat (por
defecto) hace que la imagen se repita tanto en horizontal
como en vertical por todo el bloque. Dependiendo del tamao
del grfico se puede conseguir un efecto mosaico o una sola
imagen esttica. Para que solamente se repita en horizontal
se utiliza repeat-x, y para que lo haga en vertical repeat-y.
attachment: fixed attachment: scroll , el
valor fixed sirve para que la imagen se quede fija al hacer
scroll con el texto, con lo que parece que el texto "flota"
sobre la imagen. Para que la imagen acompae al texto en su
desplazamiento se utilizar scroll (por defecto).
position Indica la posicin del grfico dentro del bloque. Si
no se indica otra cosa, por defecto ste ser colocado en el
ngulo superior izquierdo del bloque. Para variar su posicin
se pueden escribir las coordenadas deseadas de la esquina
superior izquierda del grfico en pxels o en tantos por ciento
respecto al total del bloque.

Estos tres parmetros adicionales (si se utilizan) hay que


escribirlos despus de haber indicado la imagen a emplear como
fondo. Por ejemplo:
P {color:red;
font-size:10px;
font-family:Courier;
border:2px;
border-color:blue;

border-style:solid;
width:200px;
height:100px;
background-image: url(fondo.jpg);
background-attachment: fixed;
background-repeat: repeat;
}
Esto es un ejemplo de bloque de reducidas dimensiones que ocupa solamente 200 x 100 pixels con
fondo grfico.

Grficos y bloques flotantes

Dentro de un bloque, adems de texto, pueden ir grficos u otros


bloques. Para conseguir que estos objetos se alineen respecto al
texto que ya exista en el bloque, o para que se alineen varios
bloques entre s, se utiliza la instruccin float que puede tener tres
parmetros: left right none (por defecto). Por ejemplo:
p {color:red;
font-size:10px;
font-family:Verdana;
border:2px;
border-color:blue;
border-style:solid;
width:200px;
height:100px;
}
img {float: right;}

Se obtiene:
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Y por supuesto, adems de posicionarlos en el bloque, los grficos


se pueden redimensionar y darles los atributos que sean necesarios
para la mejor composicin. Por ejemplo:
img {float: right;
width:60px;
height:60px;
padding: 2px;}

texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Despus de haber utilizado una instruccin float en un bloque, para


cerrar su efecto sobre la alineacin de los objetos hay que escribir
otra en el siguiente bloque: clear que tambin tiene un parmetro
con tres posibles valores: left right both Evidentemente, habr
que utilizar left o right segn se haya definido el float anterior, y
si se han incluido los dos, se utilizar both (ambos).
Recuerda que las instrucciones de posicionamiento y dimensionado
cada navegador las interpreta a su manera, y como siempre, se
debern probar con los navegadores ms habituales hasta dar con
los parmetros que mejor funcionen en todos ellos (y esto puede
llevar su tiempo...).

Posicin y visibilidad de los bloques

Cuando un navegador carga una pgina, generalmente, interpretar


el cdigo HTML siguiendo el mismo orden en que fue escrito. A este
orden natural de aparicin de los elementos se le llama flujo. Viene
a ser como ir apilando un elemento encima de otro al tiempo que se
asigna un nmero de ndice a cada uno, de forma que el que tenga el
nmero ms alto aparecer ms cerca del espectador. Es posible
alterar el flujo de una pgina, es decir, que un elemento aparezca
delante de otro que fue escrito despus. Para ello simplemente hay
que cambiarle el nmero que tiene en la pila con la propiedad zindex = n, donde n es un nmero entero positivo o negativo.
Cuando se altera el orden de la pila, los elementos hijos del
elemento reasignado heredarn el mismo nuevo nmero de ndice de
su padre en la pila. Por ejemplo:
Sea una pgina que contiene dos elementos A y B. A con z-index =
4 y B con z-index = 3, A ser procesado por encima de B.
Supongamos que A tiene un descendiente C con z-index= 1. El
elemento C tambin ser procesado por encima de B aunque B tenga
z-index = 3. Todos los elementos descendientes de A se situarn
por encima de B y por encima de todos los descendientes de B.

La propiedad z-index solamente funciona si los elementos han sido


previamente colocados utilizando una instruccin de tipo de
posicionamiento: position: valor;
Declaracin

position

Valor por defecto static


static
relative
Valores posibles absolute
fixed
inherit
Valor porcentual No aplicable
Se aplica a

Todos

Se hereda?:

No

Si se utiliza static, como su nombre indica, no se puede modificar la


posicin natural de los elementos. Si se quiere mover un elemento
de su posicin natural hay que utilizar los
valores relative o absolute.
En este ejemplo de posicionamiento relativo, al segundo elemento
se le aplica un desplazamiento de 5 px por arriba y por la izquierda,
lo que da por resultado que invada parte del espacio del elemento 3
y se salga del contenedor por la derecha, es decir, que los
posicionamientos relativos de un elemento solamente afectan a ese
elemento, mientras que el resto continua manteniendo sus
posiciones normales en el flujo.
BLOQUE 1
BLOQUE 2
BLOQUE 3
Este es el cdigo necesario:
<div style="position: relative; border: 2px solid red; width: 200px;">
<div style="background: #0000ff; color: white;"> BLOQUE 1</div>
<div style="position: relative; top: 5px; left: 5px;
background: #00a0a0; color: white;">BLOQUE 2</div>
<div style="background: #ffc0c0; color: white;">BLOQUE 3</div>
</div>

Y puede que te preguntes de dnde han salido las


instrucciones top y left. Pues son dos de las cuatro direcciones en
que se pueden mover los bloques, y junto con bottom y rigthnos

permitirn indicar la direccin de los movimientos tanto absolutos


como relativos. Fjate en que estas cuatro instrucciones no indican
en qu direccin se mover el elemento, sino el espacio que se
dejar libre antes de procesar el elemento.
Veamos ahora qu ocurre si el desplazamiento indicado es absolute:
BLOQUE 1
BLOQUE 2
BLOQUE 3
Como puedes ver, en este caso el espacio abandonado por el
elemento 2 no queda libre, y ha sido optimizado por el bloque
contenedor, superponindose el bloque 2 sobre el 1 y el 3. El bloque
2, adems, ha perdido la longitud que heredaba del bloque
contenedor, y que si se quiere mantener, ser necesario forzar la
herencia con width: inherit;
Este es el cdigo:
<div style="position: relative; border: 2px solid red; width: 200px;">
<div style="background: #0000ff; color: white;"> BLOQUE 1</div>
<div style="position: absolute; top: 10px; left: 85px; width:
inherit;
background: #00a0a0; color: white;">BLOQUE 2 </div>
<div style="background: #ffc0c0; color: white;">BLOQUE 3</div>
</div>

Se dice que un bloque est posicionado si su propiedad position es


distinta de static, como en los dos ejemplos anteriores. Las
direcciones de desplazamiento pueden ser: top, right, bottom,
left

Declaraciones

top
right
bottom
left

Valor por defecto auto


auto
inherit
Valores posibles
valor porcentual
medida
Valor porcentual Referido a la altura del bloque contenedor
Se aplica a

Bloques posicionados

Se hereda?:

No

Veamos ahora otra propiedad muy interesante de los bloques que


permite que sean visibles o no: se trata
de display: valor; donde valor puede ser, entre otros:
Declaracin

display

Valor por defecto inline


inline
none
inherit
block
list-item
table
inline-table
Valores posibles table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
Valor porcentual No aplicable
Se aplica a

Todos

Se hereda?:

No

Cualquiera de los valores posibles (excepto none) generar uno o


varios bloques. Al aplicar el valor none se consigue la desaparicin
del bloque, incluido su espacio en la pgina. Los elementos
descendientes tampoco sern visibles ni ocuparn espacio, es decir,
no se trata de bloques invisibles, sino inexistentes a todos los
efectos. Esa es la diferencia con las propiedades sobre visibilidad,
que se describen a continuacin, que provocan que un elemento
pueda ser invisible pero siga ocupando un espacio en la pgina.
La siguiente propiedad, visibility: valor como su nombre indica,
permite controlar la visibilidad de un bloque, pero siempre
conservando en la pgina su espacio fsico inicial. En realidad se
hace transparente, lo que permite utilizarlo para ocultar o destapar
otros bloques.
Declaracin

visibility

Valor por defecto visible


Valores posibles visible

hidden
inherit
collapse
Valor porcentual No aplicable
Se aplica a

Bloques

Se hereda?:

No

CSS + JavaScript

La combinacin de CSS y JavaScript es una poderosa herramienta


para que las pginas resulten mucho ms dinmicas.
En este ejemplo se consigue que un bloque sea sustituido por otro al
pulsar el botn de un formulario. Pude hacerse con un link, o con
cualquier otro elemento. Solamente hay que capturar el evento
correspondiente.
BLOQUE 1
BLOQUE 2
BLOQUE 3
En este otro ejemplo se elimina un bloque de la pgina al pulsar
sobre un prrafo, aunque podra ser cualquier otro elemento.
Aunque lo parezca, no es igual que el anterior, ya que aqu el espacio
del bloque desaparecido es recuperado.
Pulsar aqu para ocultar o mostrar el prrafo siguiente.
Este bloque aparece y desaparece de la pgina.
Este es un ejemplo de la capacidad de CSS + JavaScript para
ocultar bloques.
Veamos el cdigo JavaScript necesario:
function Alternar(Seccion){
if (Seccion.style.display=="none"){Seccion.style.display=""}
else{Seccion.style.display="none"}
}

Aqu est el cdigo HTML:


<p style="cursor:s-resize" onClick="Alternar(seccion1)">
Pulsar aqu para ocultar o mostrar el prrafo siguiente.
</p>

<div id="seccion1" style="background: #ffc0c0; color: white; display:


block">
Este bloque aparece y desaparece de la pgina.
</div>

Y aqu la hoja de estilo.


ParentDiv01 .ChildDivOrig {display: block;}
.ParentDiv01 .ChildDivNew {display: none;}
.ParentDiv02 .ChildDivOrig {display: none;}
.ParentDiv02 .ChildDivNew {display: block;}
Estilo de las listas

Es posible definir el tipo de las listas con CSS. Por ejemplo:


ul {list-style-type:square;}
ol {list-style-type:upper-roman;}

El parmetro list-style-type puede tener, entre otros, los


siguientes valores:

disc (por defecto)


none
circle
square
decimal
upper-roman
lower-roman
upper-alpha
lower-alpha

Como puedes ver, aunque denominados de otra forma, coinciden con


los definidos en la seccin de las listas vistas en HTML.
Estilos en los links

Hay un elemento HTML que genera un estilo propio por


defecto: <A>. Como ya sabes, los enlaces aparecen por defecto de
otro color y subrayados, y cambian de color segn hayan sido
visitados o no. Estos efectos de estilo no definidos por el usuario
se llaman pseudoclases. Hay dos posibles modificaciones de estilo
para este elemento; el color del enlace en sus distintos estados y si
aparece subrayado o no. Tericamente no debiera influir el orden
en que se escriban los distintos estados en la CSS, pero es mejor
escribir las declaraciones en el siguiente orden (por supuesto, los
colores son libres):

a {text-decoration: none;}
a:link {color: #FF0000;}
a:visited {color: #00FF00;}
a:hover {color: #FF00FF;}
a:active {color: #0000FF;}

Donde link indica que el enlace no ha sido visitado, visited que el


enlace ha sido visitado, active que el enlace est siendo pulsado,
y hover que el ratn est pasando sobre l (sin pulsar).
Estilos en los formularios

Todo lo visto sobre los estilos, tambin es aplicable a los elementos


de un formulario, bien desde las hojas CSS o en el cdigo HTML del
propio formulario. Por ejemplo el formulario:
Borde simp

Borde dobl

Solo lectura

Se escribe as:
<FORM METHOD="GET" ACTION="">
<INPUT TYPE="text" STYLE="background:yellow;color:red"
NAME="campo1"
VALUE="Borde simple">
<INPUT TYPE="text"
STYLE="border:double;background:yellow;color:blue" NAME="campo2"
VALUE="Borde doble">
<INPUT TYPE="text" STYLE="border:0;background:yellow;color:blue"
readonly NAME="campo3"
VALUE="Solo lectura sin borde">
<INPUT TYPE="button" STYLE="background:transparent;color:red"
VALUE="Botn transparente">
</FORM>

Este formulario tiene las instrucciones de estilo embebidas en el


cdigo html. Su equivalente utilizando hoja css sera:
<FORM METHOD="GET" ACTION="">
<INPUT CLASS="controles1"
simple" >

TYPE="text" NAME="campo1"

VALUE="Borde

<INPUT CLASS="controles2"
doble">

TYPE="text" NAME="campo2"VALUE="Borde

<INPUT CLASS="controles3" TYPE="text" readonly NAME="campo3"


VALUE="Solo lectura sin borde">
<INPUT CLASS="botones"
</FORM>

TYPE="button" VALUE="Botn transparente">

Y esta sera la hoja de estilo correspondiente:


/* Hoja de estilo del formulario */
.controles1 {background:yellow;color:red;}
.controles2 {border:double;background:yellow;color:blue}
.controles3 {border:0;background:yellow;color:blue}
.botones {background:transparent;color:red}

En los formularios se puede cambiar el estilo de los bordes de los


controles, pero no el grosor como se hace en los bloques de texto.
Un formulario se puede considerar un bloque, por lo que tambin es
posible cambiar el color del fondo, definir bordes, etc. Por
supuesto, todo esto tambin es aplicable a las tablas, imgenes y al
resto de elementos html.
Efectos especiales con el texto

Algunas veces habrs visto pginas con textos que parecen


grficos. Algunos tipos, en efecto, solamente se pueden conseguir
con editores grficos, pero algunas veces son simples efectos de
estilo. Veamos un ejemplo:
all.texto {
margin-top:-24px;
color:yellow;
font-size:20px;
font-family:Verdana;
}
all.sombra {
margin-top:2px;
margin-left:2px;
color:black;
font-size:20px;
font-family:Verdana;
}
<DIV ALIGN="CENTER" CLASS="sombra">Prueba de texto sombreado</DIV>
<DIV ALIGN="CENTER" CLASS="texto">Prueba de texto sombreado</DIV>

Se obtiene:

Prueba de texto sombreado


Prueba de texto sombreado

Y si en lugar de escribir una hoja css prefieres hacerlo con estilo


embebido en el HTML, este es el cdigo:
<DIV ALIGN="CENTER" STYLE="margin-top:2px; margin-left:2px;
color:black;
font-size:20px; font-family:Verdana;">Prueba de texto sombreado</DIV>
<DIV ALIGN="CENTER" STYLE="margin-top:-24px; color:yellow; fontsize:20px;
font-family:Verdana;">Prueba de texto sombreado</DIV>

Tablas

Las tablas generadas con HTML tienen un serio problema de


esttica. En efecto, si los bordes son visibles, su estilo es bastante
tosco y pueden arruinar cualquier diseo. Existen instrucciones en
CSS para conseguir que las tablas tengan bastante mejor aspecto.
Se puede modificar cualquiera de sus componentes: bordes de la
tabla, bordes de las celdas, fondo, ttulo, alineacin, etc.
caption

empty-cells

bordercollapse

border-spacing

table-layout white-space

top

show

separate

00

auto

normal

Valores posibles

top
bottom

show
hide
inherit

separate
collapse

cualquier
unidad
de medida

auto
fixed

normal
pre
nowrap

Valor porcentual

No
aplicable

No
aplicable

No aplicable

No aplicable

No
aplicable

No
aplicable

Se aplica a

table

td th

Todos

Todos

table

Todos

Se hereda?:

No

Si

Si

Si

No

No

Declaracin
Valor por
defecto

Adems de estas declaraciones especficas estn disponibles todas


las que afectan a los bordes, tanto de la tabla como de las celdas.
Las combinaciones posibles de todas ellas son tantas, que lo mejor
es verlas sobre la marcha con el magnfico asistente disado
por SONACON. El cdigo obtenido, como siempre, es conveniente
probarlo en los navegadores ms comunes, ya que suele haber
notables diferencias de interpretacin entre ellos.

Aplicacin prctica de las hojas de estilo


Creando la CSS de un blog

Veamos ahora cmo aplicar lo visto sobre las hojas de estilo en


cascada. Adems de la pgina de estilos realizaremos una pgina
escrita en XHTML en lugar del HTML que ya conocemos. Esto no
significa que las CSS no funcionen con HTML. La maquetacin se
har por "capas" definidas en la CSS y se utilizar cdigo estricto.
Puede que te ests preguntando qu es eso de maquetar por
"capas". Lo de capas es un simil utilizado para intentar explicar la
tcnica utilizada. Imagina que tienes una pizarra completamente
limpia y vaca. Eso sera el body de la pgina antes de escribir nada.

Ahora tomamos una hoja transparente y en ella dibujamos un bloque


que va a contener informacin y la ponemos sobre la pizarra. A
continuacin tomamos otra hoja transparente, le dibujamos otro
bloque en otra posicin (o no), y la depositamos encima de la
anterior, y as sucesivamente hasta terminar la pgina. Eso es
maquetar por capas. Cada una de las capas es completamente
independiente de las otras, y pueden tener sus propios contenidos y
estilo, aunque tambin pueden heredarlos (los estilos) segn un
modelo jerrquico, en el que el padre de todas las capas es body. En
la figura siguiente tienes un ejemplo de maquetacin.
Una de las maquetaciones ms conocidas ltimamente es la
correspondiente a lo que se ha dado en llamar "blogs", "bitcoras",
"diarios" o como quieras llamarles. Utilizaremos ese formato como
ejemplo porque es muy simple: consta de una cabecera, dos
columnas de contenidos y un pie:

Como puedes ver, hay una sombra debajo de la pgina. Esta sombra
est producida por el siguiente grfico.

Para conseguir que cubra todo el blog se le da una declaracine de


mosaico solamente en vertical: url(sombra.gif) repeat-y,
y se indica la posicin en pantalla del eje central del grfico: 50%.
El bloque donde se hace todo esto es body. As:
body {
background: #eee url(sombra.gif) repeat-y 50%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
}

Ya tenemos el fondo de nuestro blog. Ahora se define el primer


bloque propio, es decir, no se trata de un elemento HTML. A este
identificador le llamaremos "idioma" y nos servir para montar una
barra de navegacin tpica que en este caso utilizaremos para
cambiar de lengua en el blog:
#idioma {
width: 622px;
margin: 0 auto;
background-color: #000;
border-bottom: 1px solid #FFF;
}

Fjate en que a este bloque se le ha definido la anchura: 622px a


fin de que coincida con el hueco en blanco que nos deja el grfico
de la sombra. Y puede que te ests preguntando por qu las
declaraciones de color solamente tienen tres nmeros. Es una
forma de abreviatura admitida por CSS versin 2, es decir, que
#000 es equivalente a #000000 Esto solamente se puede aplicar
cuando los dos nmeros son iguales en cada pareja.
A continuacin definiremos la segunda parte de la cabecera con el
bloque "cabecera". Simultneamente se declara el estilo del texto
que llevar dentro: "Titulo del blog" asignado a la etiqueta h1 que s
es un elemento HTML:
h1#cabecera {
width: 622px;
height: 90px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 200%;
background: url(cabecera.gif);
border-bottom: 5px solid #222222;
line-height: 90px;

font-weight: normal;
letter-spacing: 3px;
margin: 0px auto;
margin-bottom: 15px;
text-align: center;
}

Como puedes ver, se le ha dado la misma anchura que al bloque


"idioma", pero tiene tambin definida la altura: 90px Recuerda que "idioma"
no tena definida la altura, que se limitar a lo que precise su contenido, e inmediatamente despus se
colocar "cabecera" que tiene tambin un declaracin de mosaico grfico en vertical y horizontal (por
defecto):url(cabecera.gif); para dar color al fondo. En este caso esa declaracin podra ser sustituida
por una de color directamente.

Este es el grfico del fondo:


A este bloque se le ha definido la altura simplemente para mantener la esttica del
diseo y porque se supone que nunca va a recibir otros contenidos, cosa que s puede
ocurrirle a la barra de idiomas.
El siguiente es un bloque curioso, ya que no va tener en su interior contenidos
"normales", sino que su funcin es, como su nombre indica, servir de "contenedor" a
otros bloques que s portarn informacin. Por razones de esttica es ligeramente ms
estrecho que los dos anteriores, y tampoco tiene definida la altura, ya que no sabemos
cuanto ocuparn los contenidos:
#contenedor {
margin: 0 auto;
width: 600px;
}
Una vez definido el contenedor, procedemos a crear los dos bloques principales: el bloque
izquierdo bloq_izq y el derecho bloq_der.
#bloq_izq {
float: left;
width: 400px;
text-align: justify;
}
#bloq_der {
float: right;
color: #999;
width: 170px;
}
Como puedes ver, solamente se define su anchura, a fin de mantener el diseo estable. Al no definir la
longitud, sta ser establecida por los contenidos, es decir, que se "estirarn" lo que sea necesario.
Tenemos tambin una instruccin nueva: float que es la que indica la posicin de cada bloque dentro del
contenedor. Esta instruccin es vital para este tipo de diseos, ya que sin ella el bloque derecho aparecera
debajo del izquierdo, y no al lado como queremos, y adems los dos bloques iran a parar debajo del
"contenedor", en lugar de ir dentro de l.

Ahora solamente nos queda definir el bloque del pie:

#pie {
margin: 0 auto;
padding: 10px 0 10px 0;
color: #fff;
background: #333 url(pie.gif);
width: 622px;
clear: both;
text-align: center;
}
Tambin tiene una instruccin nueva: clear, que sirve para cerrar el float de los dos bloques del
contenedor. Sin ella el pie se superpondra a los dos bloques anteriores, en lugar de ir debajo del
contenedor. clear tiene un parmetro: both (ambos) ya que tenemos dos float definidos, uno a cada lado.
En el caso de que solamente hubiese uno, se indicara slo el que exista; left o right.

Para terminar la hoja de estilos ya solamente falta definir los estilos del contenido de
cada bloque.
Aqu puedes ver la hoja CSS terminada, aqu el cdigo XHTML del blog y aqu
el blog listo para funcionar.

Qu es el XHTML?

En el ao 2000 la W3C lanz la primera especificacin del XHTML,


que no es otra cosa que una reformulacin del HTML 4.0, utilizado
todava en millones y millones de pginas. Nace el nuevo estndar
para suplir las carencias que con el tiempo ha ido mostrando el
HTML, que inicialmente no fue diseado para lo que ahora se le
demanda, razn por la que durante toda su historia no ha parado de
incluir nuevas prestaciones, y han sido stas precisamente las que
han provocado algunos problemas de compatibilidad entre las
distintas nuevas plataformas. En efecto, las pginas web ya no se
ven solamente desde confortables pantallas de ordenador de 15
17 pulgadas, han surgido multitud de nuevos receptores de
minsculo tamao, con diferentes sistemas operativos y nuevas
necesidades de navegacin, lo que ha obligado a establecer un
estndar ms rgido a la hora de programar, y a que los estilos sean
fcilmente modificables. Otra razn para adoptar unas normas de
escritura ms estrictas, se debe a que los nuevos dispositivos han
abierto el acceso a internet a personas con discapacidades muy
variadas, y los programas especiales que se utilizan para convertir
las pginas normales a sus especficas necesidades, tienen serios
problemas sin una sintaxis ms respetuosa con los estndares. En
suma, que la gran facilidad que exista para escribir pginas web,
tiende a desaparecer.
As pues, el XHTML es prcticamente igual que el HTML, y tal como
su nombre indica, es simplemente una versin eXtendida del mismo,
pero observando algunas modificaciones de sintaxis y eliminando
algunos elementos de estilo que pasan a definirse por otros medios
en la CSS, que se convierte en una compaera inseparable del nuevo
estndar.
Estas son las reglas de sintaxis ms notables:

Todo se escribe en minsculas.


Todos los elementos tienen que llevar cierre, incluso los
elementos vacios que habitualmente no lo tienen, como <BR> o
<HR> que pasan a escribirse <br /> <hr />

Todos los parmetros deben ir entre comillas. Por


ejemplo: <table border="1"> Las comillas pueden ser dobles o
simples (pero siempre formando parejas con las mismas).
Los elementos que tienen cierre, pero que si no se utilizan no
dan problemas en HTML, como por ejemplo <p>, en XHTML
deben utilizarse siempre los cierres. Es vlido <p>
</p>pero no es vlido <p />
Los elementos anidados deben cerrarse ordenadamente. Es
vlido en HTML: Texto en <b>negrita <i>y cursiva</b></i> En
XHTML debe ser: Texto en <b>negrita <i>y cursiva</i></b>
No se pueden minimizar los atributos de los elementos. Por
ejemplo, en HTML es vlido <OPTION VALUE="Mi valor"
SELECTED> , en XHTML debe escribirse: <option value="Mi
valor" selected="selected" />

Los navegadores ms conocidos actualmente no estan todava


especficamente diseados para trabajar con XHTML, y es por esto
por lo que las nuevas normas de sintaxis que hemos visto, en
realidad no son como debieran ser. El poner la barra de cierre
despus de un espacio, es simplemente para conseguir la
compatibilidad con estos navegadores, que no sabran, de momento,
qu hacer con <br/> sin escribir el espacio antes de la barra. Dado
el enorme nmero de pginas escritas en HTML que existe, los
navegadores tendrn que soportar durante bastante tiempo esta
sintaxis ambivalente, ya que no sera prctido tener que utilizar un
navegador diferente para cada tipo de pginas.
Buena prueba de esto es el enredo que hay que escribir para poder
incrustar un bloque JavaScript en una pgina XHTML que deba
validar cdigo estricto. Por supuesto, se utiliza tambin una nueva
sintaxis para el elemento <SCRIPT>, pero adems habr que
"adornarla" un poco para que no genere errores de JavaScript ni de
validacin XHTML. Sea, por ejemplo, este JavaScript en una pgina
HTML:
<SCRIPT LANGUAGE="JavaScript">
function mensaje() {
alert('Prueba de JavaScript con XHTML')

}
</SCRIPT>

En XHTML tendremos que escribirlo asi:


<script type="text/javascript"><!--//--><![CDATA[//><!-function mensaje() {
alert('Prueba de JavaScript con XHTML')
}
//--><!]]></script>

Como puedes ver, es un poco engorroso. Una posible solucin para


ahorrarse esto es pasar todo el cdigo JavaScript a un fichero
externo a la pgina (si es posible, claro), en cuyo caso no hay que
escribir la etiqueta <script>, tal como se explica en la seccin de
JavaScript de esta guia.
Exactamente igual habr que resolver el problema si se trata del
elemento <STYLE>, que como ya sabrs, puede estar tanto
embebido en la propia pgina HTML como en un fichero separado
(las famosas CSS).
Al igual que en HTML, el estndar recomienda incluir al principio de
cada pgina una identificacin de tipo de documento. Es una
recomendacin, y no tiene ningn efecto prctico en la visualizacin
de la pgina. Pueden ser varios, aunque solamente hay que poner
una:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

La primera, strict, indica que se ha utilizado la forma ms estricta


de escribir, y debiera validar sin ningn error. Obliga a separar los
contenidos de la presentacin y no admite ningn elemento de
estilo, que deben definirse en la inseparable CSS.
La transitional o cdigo de transicin hacia la estricta, permite
incluir algunos elementos ya en desuso en XHTML, pero vlidos en
HTML 4.0. No obliga a utilizar CSS.

Por ltimo la frameset, que est reservada a las pginas que


incluyan frames, muy desaconsejados ltimamente, ya que generan
problemas de usabilidad, vocablo de nuevo cuo que viene a
significar que no todo el mundo puede usar (ver u oir) tu pgina tal
cual, sino por medio de programas y/o aparatos adaptadores.
La etiqueta <HTML> tpica del principio de todas las pginas,
tampoco ha escapado a la reconversin, y debe escribirse as:
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

Donde el parmetro lang indica la lengua o idioma en que est


escrita la pgina: es = espaol, en = ingls, fr = francs, etc.
La etiqueta <head> permanece sin cambios (escrita en minsculas,
por supuesto), pero las instrucciones meta que van en su interior s
han resultado afectadas por la nueva sintaxis. Adems de ir en
minsculas, como todas, hay que aadirles la barra de cierre, y
existe la recomendacin de incluir al menos una con el cdigo de
caracteres utilizado.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Hay varios charset, es decir la tabla de codificacin de


caracteres En los web de habla hispana suelen utilizarse
mayoritariamente el ISO 8859-1 y el UTF-8. Este ltimo, es el
llamado formato unicode, y es vlido para todos los caracteres de
las lenguas occidentales. Se recomienda su uso para escribir
pginas XHTML.
Diferencias entre el HTML y XHTML

Se mantinen todos los elementos ya conocidos excepto:


<applet>
<area>
<basefont>
<bdo>
<col>
<colgroup>

<del>
<dir>
<font>
<frame>
<frameset>
<iframe>
<ins>
<isindex>
<map>
<menu>
<noframes>
<s>
<strike>
<tbody>
<tfoot>
<thead>
<u>
Contina la evolucin: el html5

Un poco de historia

Como ya sabrs, las definiciones oficiales de las distintas versiones


del html emanan del w3c (World Wide Web Consortium). Este
organismo viene a ser una especie de "Academia de la Lengua" que
establece los estndares del lenguaje, a fin de hacer menos catica
la programacin de las pginas web. Aunque no siempre lo consigue.
Veamos la evolucin hasta ahora del html.

1989 Aparece el html, que pronto sufri varias revisiones:


html 2, html 3.2, html 4 y el html 4.01
2000 Se presenta el Xhtml 1 como la evolucin natural de un
html que debera dejar de usarse (a la vista est que no fue
as).
2002 Se comienza a definir Xhtml 2, una actualizacin de
Xhtml 1 con varias mejoras semnticas pero sin
compatibilidad regresiva; era realmente un lenguaje nuevo.
2004 Se constituye el Web Hypertext Application
Technology Working Group (Whatwg), un grupo de trabajo

nacido al margen del W3C con el propsito de crear una nueva


versin del estndar desde un punto de vista destacadamente
prctico, y no tan acadmico. Y es que siete aos despus de
que el W3C publicase las recomendaciones oficiales de Html
4.01 y Xhtml 1, an no haba ningn consenso salido del W3C
sobre el camino que se deba seguir (lo habr alguna vez?.
2007 el W3C reconoce el trabajo del Whatwg y lo toma como
base para proponer una nueva actualizacin del estndar.
2009 El w3c abandona definitivamente, y antes de terminar
su desarrollo, el Xhtml 2, y se concentra en definir html5.
Desde entonces ha habido bastante confusin sobre cmo
debera ser el lenguaje para el futuro desarrollo de la Web, y
an hoy no est nada claro.

La consecuenca de esta errtica trayectoria del lenguaje ha sido


que en el ciberespacio hay pginas de todos los tipos posibles, y que
los navegadores han tenido que adaptarse a todas las versiones
aparecidas, ya que casi nadie ha abandonado su versin preferida
ante la incertidumbre de cul va a ser la buena, y mucho menos se
han reescrito las pginas ya creadas hace algn tiempo. Con el
tiempo, el W3C ha acabado aceptando de facto, que el xhtml
(aunque tcnicamente en vias de extincin) sea una recomendacin
paralela que puede coexistir con el html. Cuantas veces va a haber
que reescribir las pginas?
Al parecer, esta nueva versin se hace para intentar resolver, una
vez ms, los viejos problemas de toda la vida, como por ejemplo, los
contenidos multimedia y el lo de los plug-ins. Para ello, se
implementan nuevos elementos, como <video> o <audio>, es decir, se
pretende que sea el propio navegador el que sin necesidad de plugins, activeX, ni elementos extraos al propio navegador, pueda
reproducir correctamente cualquier tipo de fichero, cosa que ya se
intent con el elemento <object>. Pero este elemento lo nico que
facilitaba era la conexin con el reproductor, no era un reproductor
en s mismo. Evidentemente, para que esta idea funcione, ser
necesario definir un tipo de video y de audio al que convertir
cualquier otra fuente multimedia, siempre que sea compatible la

conversin, claro. Algo as como lo que hasta ahora se vena


haciendo con Flash, pero con cdigo libre y abierto. Puede ser el
fin de Flash?

Introduccin a las aplicaciones de gestin


Una reflexin sobre los misterios de la vida.
En estos tiempos hay montones de gente que tiene coche, televisor
y grifos en su casa. Casi todo el mundo se considera usuario
experto de aparatos que utiliza todos los dias. No obstante, es
rarsimo ver a alguien que si se le avera, por ejemplo el coche,
decida repararlo por s mismo. Incluso conozco quien, ante un simple
pinchazo, llama a la grua. ".. Yo no soy mecnico.." dicen entre
asombrados e indignados. En la misma lnea, casi nadie se considera
electricista, ni fontanero, ni por supuesto, mdico o arquitecto.
Pero llegamos a los ordenadores, y de repente las cosas cambian.
Por ms que la informtica sea una carrera universitaria, igual que
la de medicina, arquitectura o cualquier otra destreza, de las que
casi nadie parece dispuesto a declararse "enterado" a pesar de
haberlas estudiado alguna vez (quin recuerda la qumica o la fsica
que aprendi en la escuela?), llegamos a la informtica y todo el
mundo pretende estar al dia en ella.
Se oye hablar de software o de internet con la misma soltura que
de ftbol (de esto tambin sabe todo el mundo, aunque no hayan
tocado un baln en su vida). Desde todos los medios de
comunicacin se dan noticias de la aparicin de tal o cual virus
informtico, como si de ello dependiera que el mundo siga dando
vueltas. Mientras, nadie le hace caso al virus de la gripe, aunque
acabes pillndolo cada ao. O los anuncios que prometen convertirte
en programador "profesional" en cmodos fascculos semanales. Me
gustara ver un anuncio que prometa convertirme en fsico nuclear
por el mismo procedimiento....
Qu tiene la informtica de especial para ser tan maltratada?
Aunque se pretenda que en el futuro ser una herramienta

imprescindible (ms que el coche hoy dia?) a qu se debe ese


afn por dominarla? Cmo es posible que una disciplina tan
sumamente compleja sea considerada de forma tan simple?.
Seguramente no te has detenido a pensar en todas las reas de
conocimiento que incluye la informtica: Un superinformtico capaz
de conocer el funcionamiento de cualquier elemento de un
ordenador, debera dominar, por lo menos, las siguientes:
Matemticas, Fsica, Qumica, Telecomunicaciones, Electrnica,
Robtica, Informtica (en todas sus ramas: Sistemas Operativos,
Lenguajes de programacin, Anlisis de Sistemas, Gestin, etc.)...
Un poco complicado para aprenderlo en 20 30 fascculos,
verdad?
Esto ya no es tan fcil.
A partir de aqu, te recomiendo que leas con atencin todos los
temas que siguen antes de acometer tu primer proyecto de
aplicacin. Es importante que te hagas una idea general de lo que es
una aplicacin de gestin, que conozcas algunos trminos nuevos.
Estos conceptos no son tan simples de definir como los del HTML
vistos hasta ahora. Si no los comprendes a la primera, no
desesperes, termina de leerlos y vuelve a comenzar. Ve probando
los ejemplos y escribe otros hasta que las dudas se te disipen. Ten
presente que, al margen de lo que aqu se explique, hay una parte
muy importante que es la administracin y configuracin del
servidor. Y recuerda que en estas pginas no est todo, slo una
minscula parte de lo que es el inmenso mundo de la programacin.
El resto habrs de encontrarlo por tu cuenta. En internet como en
los libros, est todo: el problema es encontrarlo.
Qu es la gestin remota?
Entenderemos como aplicacin de gestin aquella que se disea
para sustituir uno o varios procedimientos, tanto comerciales como
administrativos, que habitualmente realiza una persona en una
empresa o institucin de forma presencial, por una serie de
pantallas en un ordenador, que permitan realizar al cliente los

mismos procedimientos de forma no presencial. Esta definicin


tambin sera vlida para la "oficina virtual", vocablo de nuevo cuo
muy en boga ltimamente.
No ms desplazamientos, fuera colas, no hay horario (sea el que
sea, siempre nos viene mal), se acabaron las llamadas a ese telfono
que siempre comunica.... Suena bonito... verdad? pues es posible....
aunque no fcil. Dejemos nuestro revoloteo virtual, y aterricemos
en el duro suelo de la realidad. Bien venidos al planeta de los
programadores de gestin, extraa especie, dura, de moral
indestructible, capaz de realizar las ms increibles piruetas ante el
siempre hostil pblico de los usuarios, y capaz adems de trabajar
horas y horas en sus proyectos... sin pedir ms sueldo.... Extraa y
peligrosa especie, no cabe duda.
Si te vas a dedicar a esto, recuerda que la gestin es la ms ingrata
de todas las ramas de la programacin. Hagas lo que hagas, nunca
conseguirs que acepten tu trabajo de buen grado, aunque, eso s,
nadie te har jams ninguna sugerencia constructiva: sencillamente
no te entendern. Cuando creas que ya lo tienes todo controlado y a
los usuarios adiestrados (hasta donde ello es posible), la empresa
tendr unas nuevas necesidades, que indefectiblemente sern
incompatibles con casi todo lo desarrollado...
Pero no todo son inconvenientes: Slo t sers capaz de ver la
necesidad de que tal programa debe funcionar as y no de otra
manera. Slo t sers capaz de conocer todo lo que se hace en tu
empresa... y lo innecesario que es la mitad de ello. Slo t te
atrevers a luchar contra el ms temible de los enemigos: la
costumbre. Slo t tendrs la osada de enmendarle la plana al jefe.
Slo t sers capaz de resolver un problema que lleva lustros
resolvindose solo, pero claro, sin ordenadores. Slo t utilizars
una inquietante frase:..esto, porqu se hace as..? Slo t sers el
ms productivo para tu empresa (por eso te aguantan). Si
sobrevives a todo esto y alguna cosilla ms, no lo dudes: eres
programador de gestin.
Qu es la gestin en internet?

Si a todo lo anteriormente dicho aadimos algunos factores en el


lado del cliente, tales como:

Los problemas propios de la red (velocidad de caracol, cortes


inesperados, etc.)
Las penosas condiciones en que se encuentra la mquina del
cliente: modelos jursicos, poca memoria, modem de esos que
ya no hay, toneladas de programas basura instalados, sistema
operativo inesperado (o inoperante), etc.
El no saber que navegador utiliza (si es que sabe que hay que
utilizar uno).
Que en general, el cliente, no sabe lo que est haciendo, ni le
importa gran cosa como termine todo, aunque eso s, se
apresurar a decir que el problema reside en la aplicacin,
jams en su mquina, o en su escasa habilidad.
El que puede ser un "manitas informtico" (ante esto no hay
salvacin posible) que se ha ledo todos los fascculos que
anuncian por televisin.
El hecho constatado de que los usuarios no leen instrucciones,
ni nada; se dejan llevar por un extrao instinto que casi
siempre falla, lo que les obliga a probarlo todo (en el orden
menos conveniente, por supuesto), y a ver que pasa....
El no saber si el cliente tiene impresora (y mucho menos cmo
se usa).
Que no tiene ni la ms remota idea de lo que es capaz de
hacer su ordenador, en general, y el navegador en particular:
para qu sirve el botn derecho?, dnde est la lnea de
estado?, cual es la ventana de URL?, men de qu...?
Que la configuracin de su mquina nunca ser la que tu
esperas (por lo que no debes esperar ninguna).
Que aunque el cliente y t hableis, tericamente, el mismo
idioma, en la prctica parecer que uno de los dos es de otro
planeta.
Etc., etc.

Y algunos otros en nuestro propio lado:

Que te van a exigir que tu aplicacin sea "atractiva" (pero que


se cargue rpida, faltaria ms).
Que la gestin interna de nuestra empresa, en s misma, es
mala, y por tanto difcilmente mecanizable.
Que nuestro servidor va un poco "escaso de fuerzas".
Que existen los "hackers" (como los piratas de las pelculas
pero sin pata de palo) y los virus.
Que hay que garantizar la confidencialidad de los datos del
cliente en muchos casos (casi todos).
Que la direccin de nuestro servidor no empieza por WWW
(parece broma, pero ya vers el tiempo que pierdes por esto).
Que como nadie entiende tu aplicacin, nadie en la empresa es
capaz de informar correctamente sobre ella a los clientes (...
pero cmo... que t no ests para eso? ...pues no lo
entiendo, oye...!! -en realidad no es que no entienda eso, es
que no entiende nada-).
Que los dias slo tienen 24 horas...
Etc., etc.

Se agita todo con precaucin y el resultado es: gestin en internet

Cmo empezar?
Lo que necesitamos.

En primer lugar
definiremos
como cliente la mquina
remota, incluido su
navegador, que se va a
dirigir a nuestro servidor
para, a travs de una
aplicacin, realizar una
transaccin cualquiera,
que deber ser
almacenada. La idea

general se representa en la figura.


A la hora de construir una aplicacin para internet, no se puede
pensar exclusivamente en la parte cliente, sino que ha de disearse
perfectamente conjuntada con otra aplicacin local que permita
administrar y explotar los datos capturados al cliente. Hay una
cierta tendencia a realizar la explotacin y/o administracin
tambin a travs de navegadores, pero esto restringe posibilidades,
adems de ser menos seguro en todos los aspectos.
Estas son algunas especificaciones que se deben cumplir: la
aplicacin no deber depender nunca de las caractersticas del
cliente, ni deber obligar a ste a utilizar ningn software especial,
debiendo respetar la libre eleccin de navegador de su propietario.
La aplicacin deber servir al cliente HTML estandard,
debidamente probado en varios navegadores, y conviene limitar al
mximo la inclusin de cdigo JavaScript, a fin de evitar
incompatibilidades de versiones o de otro tipo. Se realizarn
diseos con el menor nmero posible de grficos, a fin de reducir al
mximo el tiempo de carga de las pantallas. Segn la naturaleza de
las transacciones, se proveer de conexiones seguras (shtml). Se
facilitar un e-mail para la solucin de los problemas o dudas que
tenga el cliente, y se debern responder con diligencia.
De estas breves lneas ya se pueden extraer algunas conclusiones:
necesitamos un servidor capaz de ejecutar nuestras aplicaciones
tanto locales, para administracin, como remotas, que sern
ejecutadas por los clientes. Tambin necesitaremos donde
almacenar las transacciones de los clientes, es decir: unabase de
datos que en lo sucesivo llamaremos simplemente DB, y que por
supuesto debers aprender a manejar y programar. Las buenas
bases de datos relacionales suelen utilizar el lenguaje SQL (ANSI
o alguna de sus variantes) para hacer las consultas y/o
transacciones, y del buen diseo de estas consultas depender que
la aplicacin sea eficiente o no. Tambin ser necesario dominar los
distintos lenguajes que cada servidor web nos ofrece para conectar
con las bases de datos, y por ltimo, pero no por ello menos

importante, hay que saber administrar y configurar correctamente


el servidor, tanto a nivel mquina como de servicios, en especial los
de http y ftp.
Qu elegir?
Peliaguda pregunta esta... quien la responda asume que lo conoce
casi todo, cosa difcil en estos tiempos. Yo me limitar a comentar
lo que conozco, que no es mucho, y a presentar fragmentos de lo
que se utiliza en mi empresa. Que sea o no lo mejor o lo ms
adecuado, queda al mejor criterio de cada cual...
Si la empresa ya tiene infraestructura informtica, te tienes que
adaptar a ella... y arreglrtelas como puedas. Si partimos de cero, lo
primero que hay que analizar es la carga de trabajo que va a tener
que resolver el servidor, pero pensando siempre en el futuro, no
vaya a ser que por ahorrar un poco ahora, tengamos que tirarlo todo
el ao que viene.
En nuestro caso (mi empresa) se trata de una instalacin de tipo
medio-bajo, con tres servidores: uno para la red local (intranet),
otro para la red exterior (internet) y el tercero hace de puente con
grandes sistemas IBM. Los dos primeros son PCs con dos
procesadores Pentium II 450 y discos Ultra Wide SCSI. Uno actua
como servidor de aplicaciones, servidor de disco y servidor de
bases de datos para 90 mquinas. Est configurado de forma que no
se puede acceder a l si no es desde la intranet (red local). El
segundo, que actua de servidor HTTP y FTP, obtiene las pginas
estticas de sus propios discos, y los datos dinmicos del servidor
de bases de datos. Adems ejecuta continuamente 30 aplicaciones
internet, recibiendo en total ms de 10.000 visitas diarias entre
consultas estticas y transacciones de las aplicaciones. Son
mquinas baratas, sin marca ni arquitectura de servidor (aunque
cuidadosamente ensambladas con elementos de calidad, de probada
compatibilidad con el sistema operativo), y por ahora llevan varios
aos funcionando las 24 horas sin problemas. Para evitar asaltos y
problemas desde la red, por supuesto, las dos tienen instalado un
programa firewall. El firewall, bien configurado, hace posible no

tener que instalar un antivirus en los servidores, que los


ralentizara notablemente. Y una cosa muy importante: los
servidores solamente deben utilizarse como servidores, si adems
se utilizan como estaciones de trabajo, las prestaciones pueden
caer peligrosamente. Las labores de administracin conviene
hacerlas antes de que los usuarios comiencen a trabajar.
En cuanto al sistema operativo, nuestro primer servidor (el tercero
de los descritos) fue un LINUX, pero ocurri lo que suele ocurrir:
es casi imposible que un usuario normal se aclare con un sistema
UNIX. Y como no hay muchas alternativas, se opt por instalar
Windows NT Server en los servidores y Windows variados (95, 98,
ME, XP) en los clientes. El pobre LINUX se ha quedado solo como
intermediario entre nuestra mainframe y el servidor web (una
mainframe es una mquina muy, muy grande y cara que no suele
hablarse bien ms que consigo misma).
El siguiente paso era elegir una buena base de datos local. Tampoco
hay muchas alternativas: La mainframe tiene la DB2 de IBM, cuyo
precio es prohibitivo, y necesita mquinas muy potentes. Algunos
dicen que la mejor es Oracle, pero su precio tambien es enorme.
Otros dicen que la mejor relacin calidad-precio es SQL Server de
Microsoft, y optamos por esta.
En nuestro caso, fue una decisin acertada, ya que a su buen
rendimiento hay que aadir su facilidad de conexin con el resto de
productos Microsoft, como cabra esperar. Con este entorno se
desarrollan las aplicaciones locales con Access 97 o 2003, las
aplicaciones internet con ASP (Active Server Pages) o IDC
(Internet Data base Conector), y el servidor web es el IIS
(Internet Information Server) que va incluido en el sistema
Windows NT Server. El conjunto se muestra muy slido, y no ha
sido necesario emigrar a versiones superiores de sistema operativo,
que probablemente necesitaran mquinas ms potentes.
Puede que estas caractersticas no le parezcan a algunos propias de
una instalacin "seria", pero la realidad es que funciona sin un solo
problema, los sistemas operativos no se "cuelgan" jams (no se

permite a los usuarios instalar nada por su cuenta), la velocidad es


excelente, habida cuenta de que algunas bases de datos tienen
volmenes muy repetables (ms de 4 millones de registros) y que
soportan accesos concurrentes de hasta 120 usuarios al ser
accedidas simultneamente por el servidor web y por los usuarios
locales, y todo a un precio muy asequible.
Montajes similares a este, e incluso muy superiores, es posible
realizarlos con servidores y clientes LINUX o cualquier otra
variante de UNIX. La ventaja de LINUX es que es gratis, y
funciona prcticamente sobre cualquier cosa que tenga un
procesador y un disco (bueno, las ltimas versiones ya no tanto). La
desventaja es que si tienes problemas, no hay una marca a la que
consultar; de ah la gran diferencia de precio entre este sistema y
los UNIX licenciados. Existen, tambin de libre distribucin,
programas de servidores web (por ejemplo el famoso Apache),
bases de datos (PostGres y otras) y paquetes de ofimtica (Star
Office, Open Office) para LINUX y para otros sistemas UNIX.
El gran problema de las instalaciones UNIX en general, es que no
resultan fciles de instalar ni de administrar. Hay que ser un muy
buen profesional de la informtica para mantener instalaciones as
(lo que no significa que con Windows no haya que saber nada). Es un
mundo completamente diferente al de los sistemas Windows. Te lo
tienes que hacer todo a mano: adapataciones del kernel a la
mquina, creacin de controladores, comunicaciones, configuracin
de los clientes, Xwindows, hay que dominar los lenguajes C y Perl,
los compiladores, el shell, dominar bien el ingls, etc., etc. Aunque
en internet hay gran cantidad de informacin sobre UNIX, incluso
algo en espaol (proyecto LUCAS), es sin duda un gran reto...
Otra solucin
Si no se est en disposicin de montar y mantener un servidor, una
buena solucin puede ser recurrir a un "hosting", es decir, alquilar
un espacio web en un servidor montado, mantenido y custodiado por
una de las muchas empresas que hay dedicadas a prestar estos
servicios. Hay muy buenos proveedores de hosting que por un precio

bastante razonable pueden ahorrarnos muchos problemas.


Habitualmente, adems del espacio web, se pueden contratar bases
de datos, dominios propios, IPs fijos, y cuanto nuestro proyecto
pueda necesitar.
Ensalada de siglas....

Hasta ahora en esta gua se haba evitado la utilizacin de siglas.


Dada la longitud de los nombres que se emplearn en lo sucesivo, no
queda ms remedio que utilizarlas... He aqu un pequeo glosario:

IIS: Servidor web que rueda en mquinas con Windows NT


Server.
NT: Windows NT Server. Sistema operativo de apariencia
similar a Windows 95 o 98, pero capaz de gestionar mquinas
servidor de gran potencia, con varios procesadores, cientos
de usuarios, grandes discos, y multitud de servicios.
Actualmente ha sido sustituido por el Windows 2003 Server,
que bsicamente hace lo mismo, pero con muchas ms medidas
de seguridad, y por tanto ms complicado de usar.
PWS: Personal Web Server. Servidor web personal que rueda
en mquinas con Windows 95/98/ME. Forma parte del
paquete de desarrollo Microsoft FrontPage, aunque es posible
conseguirlo solo. Puede utilizarse en pequeas instalaciones de
intranet, e incluso en internet, siempre que se est seguro de
que el nmero de clientes ser bajo (soporta 6). Se comporta
exactamente igual que el IIS de los Windows Server, y se
pueden ejecutar aplicaciones escritas tanto para el IDC como
en ASP.
DB: Base de datos. Programas que contienen un motor para
gestionar enormes tablas con datos. Son un simple almacn de
datos, aunque son capaces de moverlos muy rpidamente. No
confundirlos con los generadores de aplicaciones.
Access 9x - 2007: Componente del paquete Office 9x 2007. Es un hbrido entre DB y generador de aplicaciones;
incorpora su propio motor de DB. Es multiusuario, aunque no
soporta un gran nmero de ellos. Utiliza el Visual Acces
(variante del Visual Basic) para la programacin de

aplicaciones, lo que le permite una gran versatilidad. Adems


de sus propias tablas, puede utilizar, mediante vnculos
dinmicos y ODBC, tablas de SQL Server, de otras DB de
Access, hojas de clculo, ficheros de texto, tablas de DBase,
Fox Pro, y algunos otros orgenes de datos. Utiliza una
variante de SQL como lenguaje de interrogacin.
SQL Server: Es un potente servidor de bases de datos de
alto rendimiento. Soporta centenares de usuarios y tablas de
enormes dimensiones. Al ser un producto profesional, no
resulta tan sencillo de manejar o administrar. Utiliza el SQL
ANSI como lenguaje de consulta.
IDC: Componente de los servidores web (Windows) que
permite acceder, de manera sencilla, a una base de datos,
pero como cada una dialoga a su manera, necesita un
intermediario que le aclare las cosas: el ODBC
ODBC: Componente de los sistemas operativos que provee de
controladores que permiten dialogar a otros elementos del
sistema con las ms variadas bases de datos.
ASP: Lenguaje mezcla de HTML, Visual Basic y Java que
permite acceder a bases de datos y realizar complejas
aplicaciones. Es muchsimo ms potente que el IDC, que slo
tiene unas pocas instrucciones. Con l se puede hacer casi
cualquier cosa. Funciona en sistemas operativos Windows
Server con el servidor web IIS, o con Windows 95/98/ME
con el PWS. Windows XP Pro lleva un IIS de serie.
ASP.NET: Es la nueva versin de ASP que funciona en los
servidores con sistema operativo a partir de Windows Server
2003. Proporciona muchas ms utilidades y prestaciones,
siendo totalmente compatible con el ASP tradicional.
SQL Lenguaje de consulta que utilizan casi todas las bases
de datos relacionales. No sirve para escribir aplicaciones de
usuario, slo se utiliza para darle instrucciones al motor de
bases de datos.
IE: Internet Explorer. Navegador web de Microsoft.
Existen versiones para Macintosh y para todos los Windows.
Su mayor particularidad es que forma parte de los sistemas
operativos Windows, hasta el punto de no ser posible su

desinstalacin completa. Esta peculiaridad permite disear


aplicaciones internet especficas para l, mediannte controles
Active X, con resultados imposibles de conseguir con otros
navegadores, y por tanto no se tratarn en esta gua.
Netscape: Netscape Navigator. Navegador web de Netscape.
Existen versiones para Macintosh, UNIX y Windows (incluido
servidor). Es el navegador, junto con Opera, que utiliza mayor
cantidad de recursos HTML estandard de la actualidad. Ha
desaparecido como marca, siendo sustituido por el Mozilla
Firefox.
Opera: Otro muy buen navegador. Es el que se atiene de
forma ms estricta a las especificaciones del HTML
estandard marcadas por la W3C.

La seguridad, esa gran desconocida


Este es un tema que no suele tratarse en los manuales tcnicos.
Generalmente se le considera una cuestin de empresa, pero como
buena parte de la seguridad de los datos depender de aspectos
puramente tcnicos o de programacin, lo veremos aqu brevemente
(muy brevemente, ya que esto es toda una profesin en s misma).
Son dos los aspectos que deben contemplarse en cuanto a la
seguridad de los datos. El primero es su custodia, y el segundo
garantizar la permanencia fsica de los mismos. Es decir, hay que
evitar que personas no autorizadas accedan a los datos, y al mismo
tiempo hay que mantener los sistemas de forma que stos no se
pierdan.
Respecto a lo primero, ante todo hay que dejar una cosa clara:
nuestra responsabilidad. En efecto, cuando se recogen datos de
personas por el medio que sea, y con su conocimiento o sin l, si
stos terminan en un fichero informtico, estamos obligados ante
la Ley (por lo menos en Europa) a proteger esos datos, y por
supuesto, no estamos autorizados a utilizarlos para ningn fin
distinto del que se manifiesta cuando se recaudan, ni a cederlos a
nadie.

Aclarado este punto, surge la pregunta: qu se puede y/o debe


hacer para proteger los datos? La respuesta no depende solamente
del programador; la empresa tiene mucho que decir en esto, y
desafortunadamente, la mayora de las veces no dice nada porque
no tiene ni idea de tales menesteres. En ese caso, es el
programador quien debe plantear la conveniencia de establecer una
poltica de seguridad de los datos de la empresa, y es sta la que
debe implantar los protocolos de actuacin correspondientes.
Desde el punto de vista prctico, en la proteccin de datos pueden
considerarse dos grandes bloques, ambos de la misma importancia,
y ser el conjunto el que nos brinde, hasta donde ello es posible
(recuerda, no hay sistema totalmente seguro), un cierto nivel de
proteccin.
Seguridad hardware

Evidentemente, es el servidor donde fsicamente residen los datos


el primer elemento que hay que proteger. Por muchas medidas de
seguridad que se establezcan, no servirn de mucho si resulta que
el servidor est accesible a cualquiera. Hay mquinas de usuario
mucho mejor protegidas que el servidor corporativo de algunas
empresas.
La primera precaucin es que un servidor, como su nombre indica,
se debe dedicar a eso, a servir datos, no a ser la estacin de
trabajo de media oficina... o de toda ella. Eso significa que
solamente unas pocas personas deberan tener acceso fsicamente a
l (el jefe, el administrador, y pocas ms). Esta dedicacin
exclusiva del servidor, adems de proporcionar una mayor
seguridad de los datos, har que el rendimiento de la mquina sea
muy superior.
Otro eslabn de la cadena de seguridad hardware debera ser un
elemento frecuentemente olvidado, y que se suele echar en falta
cuando ya es demasiado tarde: un SAI (Sistema
de Alimentacin Ininterrumpuda -UPS- en ingls). En efecto, un
servidor, si no est protegido elctricamente, est muy expuesto a
sufrir una grave avera, y puede dejar colapsada la empresa si falla.

Si la causa es un pico de tensin, o una descarga esttica por una


tormenta, puede incluso quemarse el servidor, o un disco, o la
fuente de alimentacin, o... Si se trata de un apagn no programado
(que suelen ser casi todos), Murphy se encargar de que el corte
pille al servidor en mitad de varias transacciones, que al apagarse la
mquina inesperadamente dejar varias tablas de nuestras bases de
datos corruptas, o con ndices truncados. Cuesta horas recomponer
desastres as, y a veces no es posible recuperarlos por completo.
Conviene calcular bien la potencia y autonoma necesarias (ver
estadstica de apagones en la zona si es posible) antes de adquirir
el SAI, y es preferible que el servidor de datos tenga uno para l
solo, o como mximo, compartirlo con el servidor web, si lo hay. El
SAI no debe limitarse slo a mantener la alimentacin durante un
cierto tiempo. Si el apagn es prolongado, tarde o temprano el SAI
se agotar y tendremos el mismo problema que si no hubiese SAI.
Se debe instalar un SAI que pueda conectarse a algn puerto fsico
del servidor y enviarle una seal de apagado (shutdown) cuando
haya transcurrido el tiempo de autonoma del SAI, a fin de que el
sistema pueda cerrar ordenadamente los procesos que tenga en
marcha, y se apague por s mismo.
Generalmente, los servidores suelen estar funcionando las 24 horas
del dia, y est comprobado que las mquinas que no se apagan nunca
sufren menos averas que las que se desconectan varias veces cada
da. Para garantizar una larga vida al servidor, es importante que
est en un lugar limpio de polvo, seco y fresco. Lo del polvo es muy
importante, ya que ste es aspirado por los ventiladores hacia el
interior, y se depositar en los disipadores de los procesadores,
reduciendo la disipacin calrica, incluso puede acabar bloqueando
los ventiladores, lo que probablemente provocar una costosa
avera. Es buena idea hacer peridicamente un chequeo del estado
fsico del servidor, y si es necesario, proceder a su
limpieza. OJO limpiar siempre por aspiracin o soplado, no con
brocha, y siempre con la mquina apagada. Otra cosa importante
es que el servidor no debe estar en el suelo, donde aspirar ms
polvo, y estar ms expuesto a recibir golpes o a mojarse. Si la

mquina es movida o recibe un golpe estando en marcha, los ms


probable es que los discos te recuerden que eso no debe hacerse.
A pesar de todas nuestras precauciones globales, al servidor le
puede fallar un elemento interno, como un disco o la fuente de
alimentacin (el ms frecuente). Conviene tener siempre repuestos
de estos dos elementos, as como de los ventiladores de los
radiadores de los procesadores. Si un disco falla, evidentemente,
los datos que contiene se pierden. Ante esto solamente hay una
solucin: tener copias de seguridad. Es increible la cantidad de
gente que no hace copias regularmente de sus datos... hasta que
ocurre lo que tarde o temprano tiene que ocurrir. Recuerda que los
discos tienen un tiempo limitado de trabajo, que aunque suele ser
muy alto, puede ser radicalmente reducido si las condiciones de
trabajo no son las adecuadas.
Dependiendo de lo crticos que sean los datos, adems de copias
regulares (cada dia por lo menos), es buena idea montar los
servidores desde el principio con sistemas tolerantes a fallos. Un
mtodo ideal es que el disco principal, donde est el sistema y las
bases de datos, tenga RAID-1 (Redundant Array
of Independents Disks). Esta tcnica consiste en montar dos discos
idnticos, donde uno se constitute en espejo del otro, de forma que
si cualquiera de ellos falla, automticamente el sistema contina
funcionando con el segundo. En ese momento, el sistema advierte de
que el espejo se ha roto, y si hemos tenido la precaucin de adquirir
un recambio, el tiempo de parada ser mnimo (nulo si el servidor
soporta remocin de discos en caliente) y no se producir ninguna
prdida de datos. La tcnica RAID puede montarse mediante placas
base que la soporten en su propia BIOS, o con placas controladoras
adicionales. Si no se puede disponer de RAID hardware, tambin
hay sistemas operativos de servidor que pueden hacer lo mismo
mediante software, aunque es algo menos eficiente, para
instalaciones pequeas/medianas, servir perfectamente. Es buena
idea tener discos de recambio, todos del mismo modelo, ya que
pasados algunos aos (no muchos) ser difcil encontrarlos, y ms
con prisas. El que sean del mismo modelo tiene mucha importancia

si el RAID montado es controlado por placa hardware. Si el RAID


es controlado por software no suele ser tan importante que no sean
iguales. No olvides poner etiquetas fsicas a cada disco con el
nmero que el sistema le asigna(0, 1, 2, etc.) Si se rompe un espejo,
tendrs dificultades para saber cul es el defectuoso.
Al margen de tener instalado RAID o no, las copias de seguridad
(backup) se deben hacer, y evidentemente, se deben hacer
en otro disco distinto, bien en el mismo servidor o en otra mquina.
El problema de optar por otra mquina es que tiene que estar
encendida cuando se hagan los backups, que suelen hacerse a horas
intempestivas, que esa mquina debe observar las mismas
precauciones de seguridad que el propio servidor y que,
preferentemente, debe estar dentro de la intranet, ya que si hay
una cada de la red exterior, ese da no se hara del backup. Se
deben hacer copias de seguridad, tanto del sistema como de las
bases de datos. Es buena idea tener otra copia de seguridad fuera
del edificio donde resida el servidor, ya que en caso de incendio o
robo podramos perder tanto el servidor como las copias. Recordar
que esa copia de seguridad (como todas) debe estar, a su vez, bien
protegida y actualizada regularmente.
Si haces copias de seguridad sobre CDROM, DVD o cintas, puede
que alguna vez la copia falle, y el soporte no sea legible. Hay quien
tira a la papelera el disco o cinta defectuosos sin mayores
precauciones. CUIDADO: Con los programas adecuados se pueden
extraer datos de esos soportes.
Seguridad software

El primer eslabn de esta otra cadena es crear una poltica de


contraseas realmente efectiva, con permisos estructurados y
gestin de grupos, donde cada usuario slo tenga acceso a aquello
que le compete, y sea consciente de su responsabilidad y obligacin
de proteger su clave de acceso. He visto sitios donde la clave de
acceso estaba escrita en un "postit" pegado en la pantalla, o vocear
en medio de una sala llena de gente: "Cual es la clave de esta
semana?.." Lo peor es que contestaron.

As mismo, el servidor debe tener instalado un buen cortafuegos


(firewall) que no permita conectarse ms que a las mquinas de la
empresa. Desde el servidor no se debe navegar por internet, ni
siquiera leer el correo, y si esto se cumple, prcticamente no ser
necesario instalarle un antivirus, que actualmente suelen ralentizar
bastante el funcionamiento de las mquinas. Si no se le instala
antivirus, hay que tener presente que existen virus que se
transmiten a travs de discos removibles y memorias flash
conectados a los puertos USB, por lo que se deben verificar esos
dispositivos si se utilizan para introducir datos en el servidor, y
asegurarse de que estn "limpios".
El servidor de datos no debe permitir conexiones de nadie que no
est dentro de nuestra red local (intranet), y por supuesto, jams
ser servidor web al mismo tiempo que servidor de datos.
Solamente el servidor web, que debe ser otra mquina diferente,
dialogar con el exterior, y tambin tendr su correspondiente
cortafuegos.
Tanto en el servidor de datos como en el servidor web, se
deshabilitarn todos los servicios que no sean necesarios, como
TELNET, FTP, SNMTP, HTTP, o los que procedan en cada caso, sin
olvidar los de escritorio remoto. En suma, se trata de que todos los
puertos que no tengan una utilidad permanente en el servidor, estn
debidamente cerrados, o mejor, ni siquiera instalados aquellos
programas que no tengan utilidad declarada. Siempre ser ms fcil
vigilar un edificio con un par de puertas, que otro con cientos de
ellas, y adems abiertas.
La inmensa mayora de prdidas de datos debidas a infecciones de
virus o ataques de hackers (piratas informticos) los provoca o
facilita en gran manera el propio usuario de la mquina, al tener
multitud de puertos TCP abiertos intilmente, abrir adjuntos de email sospechosos, navegar por pginas web que inspiran poca o
ninguna confianza, o instalar programas de dudosa utilidad y nula
garanta de seguridad (hay mucho freeware asesino por ah). Si a
esto aadimos que algunos sistemas operativos (y en especial su

navegador) son una especie de colador de colores, lo raro es que


nuestros datos no terminen en manos del primer aficionado a
hacker que pase por all.
Aunque pueda parecer obsesivo, un buen administrador de sistema
debe estar permanentemente en alerta con los servidores a su
cargo. Recuerda que en la actualidad, en general, los atacantes no
persiguen borrar tus datos, esas son tcnicas del pasado, si no
conseguir el acceso a la mquina y permanecer en el ms absoluto
anonimato. Lo que persiguen requiere discrecin, y tanto si
consiguen un acceso como inyectar un virus o un troyano, intentarn
permanecer invisibles el mayor tiempo posible. La finalidad de todo
es robar datos, claves de acceso o utilizar la mquina como
"zombie" para lanzar desde ella ataques a otras mquinas.
Seguridad en servidores web

Son muchas las aplicaciones que, inicialmente, se disean para


trabajar en local y por tanto con niveles muy bajos de seguridad (a
veces inexistentes por completo), que terminan siendo parte de
otra con conexiones a internet o a redes externas, donde los
requerimientos de seguridad son infinitamente ms altos que en
redes locales. Estas ampliaciones sin incluir mdulos de seguridad,
representan un grave peligro para los datos, y deben mejorarse
cuanto antes. Recuerda que un ataque desde el exterior,
generalmente, no se debe a que tus datos sean ms o menos
interesantes para alguien, sino al simple y fortuito hecho de que un
hacker localice tu mquina y advierta que es vulnerable. La
tentacin ser irresistible...
Hay muchas formas de intentar extraer datos de un servidor web,
pero para todas ellas, salvo agujeros graves de seguridad del
sistema operativo o del programa servidor, el atacante necesita
conocer un usuario vlido y su clave de acceso. Y a eso dedicar
todos sus esfuerzos. El eslabn ms dbil de la cadena son los
propios usuarios. En efecto, casi siempre que lo consiguen es debido
al poco cuidado que los usuarios autorizados tienen con sus
contraseas. A nadie se le ocurre dejar las llaves de su casa
puestas en la puerta, y si las pierde, se apresurar a cambiar la

cerradura por si acaso... pero esas elementales precauciones no se


tienen cuando de accesos informticos se trata. Por qu?
misterios de la naturaleza humana.
As pues, adems de cuidar con esmero las claves de acceso, lo
primero que debemos hacer es cerrar todas las puertas que no sean
necesarias del servidor. En un servidor web lo tpico necesario
suele ser el propio servicio HTTP (puerto 80), y tal vez, el de FTP
(puertos 20 y 21). Una herramienta fundamental para conseguir
esto es instalar un buen programa firewall (cortafuegos), o utilizar
el propio del sistema operativo, si lo tiene, y configurarlo de modo
que no se pueda accecer a ningn puerto que no sean los
mencionados. Tampoco es mala idea deshabilitar todos los
protocolos de comunicaciones que no sean de verdad necesarios,
como el UDP, y dejar solamente el TCP. Si hay algn otro servicio
instalado, pero que no es de uso pblico, conviene restringir el
acceso filtrando el nmero IP o la direccin MAC de las tarjetas de
red de las mquinas autorizadas, y bloquear todas las dems. Si el
firewall dispone de temporizador, es interesante establecer un
horario de acceso y bloqueo: Muchos ataques se producen cuando
no hay nadie en la empresa vigilando la actividad del servidor, y si
no hay nadie, es perfectamente intil tener abierto el acceso de
otras mquinas de la empresa al servidor. El nico que puede
necesitar permiso de acceso todo el dia suele ser el servidor web.
El siguiente paso ser limitar los privilegios del usuario por defecto
(anonymous) que los servidores suelen utilizar para responder a las
llamadas del exterior. Este usuario genrico solamente debe tener
permisos de lectura en el rea donde residan los datos del web, y
ocasionalmente, permisos de ejecucin de ficheros de comandos u
otro tipo de ejecutables, como CGI, servlets, scripts, etc., si los
hay. En resumen, se trata de que si alguien consigue entrar en el
servidor utilizando ese usuario, no pueda conseguir con l nada
distinto de lo que conseguira operando normalmente con un
navegador.

Si tu web utiliza bases de datos, que como ya se ha dicho, deberan


estar en otra mquina, NUNCA utilizes el usuario administrador, o
un usuario con privilegios altos en tus aplicaciones. Crea un usuario
especfico para estos fines, que no pertenezca al grupo de
administradores, con una clave de acceso buena (por lo menos 10
caracteres alfanumricos aleatorios), con los privilegios lo ms
restringidos posible, los justos para que permita operar a la
aplicacin, y no es buena idea que tenga permisos de borrado, como
mximo de modificacin. Si hay que borrar algo, que lo haga el
administrador personalmente. Y por supuesto, no debe tener
permisos que le permitan acceder a tablas del sistema.
Por ltimo, hay que acostumbrarse a revisar peridicamente los
ficheros de "loggins" de los servidores y los del firewall,
verificando que no ha habido accesos a horas extraas, ni de
mquinas desconocidas, y de vez en cuando, comprobar que todas
las polticas de seguridad que hemos programado siguen activas, ya
que lo primero que un hacker hara es deshabilitarlas.

De viaje por la red

Una vez configurados los aspectos bsicos de seguridad del


servidor, nos debemos plantear cmo se movern los datos por la
red. Evidentemente, la decisin a tomar depender del tipo de
datos de que se trate. No es lo mismo enviar un comentario a un
foro, que hacer una compra con tu tarjeta de crdito. Internet es
un medio de comunicacin muy inseguro debido a la propia
estructura de la red. Los datos que viajan entre el cliente y el
servidor no se envian en un nico paquete, ni viajan directamente de
una mquina a otra. Se segmentan en pequeos paquetes que se
enrutan a travs de un nmero variable de nodos hasta que llegan a
su destino. En cualquiera de ellos se puede leer su contenido,
modificarlo o destruirlo, por lo que la confidencialidad puede
decirse que no existe. Recuerda que TODO lo que se hace en
internet, de una forma u otra deja rastro. La nica "proteccin", si
es que se le puede llamar as, que la red ofrece es la enorme
cantidad de informacin que se mueve por ella, lo que dificulta un

tanto capturar los datos; no es nada insalvable para un buen hacker,


aunque desde luego no con la facilidad que se ve en el cine.
Existen varias tcnicas de proteccin que pueden aplicarse cuando
la naturaleza de los datos exige una mayor seguridad. Posiblemente
la ms conocida es el protocolo SSL (SecureSockets Layer)
diseado hace ya muchos aos por Netscape. Para utilizarlo no es
necesario hacer nada especial, simplemente habilitarlo en el
servidor (el navegador ya lo detecta automticamente) instalando
un certificado digital de servidor emitido por una Autoridad
Certificadora (CA). Al activarlo en el servidor no olvidar abrir el
puerto 443 (por defecto) de este servicio en el firewall. La
direccin de los servidores que utilizan SSL comienza
por https:// en lugar del tpico http. Lo que hace SSL es cifrar,
con un algoritmo distinto para cada sesin, los datos
intercambiados entre el cliente y el servidor, es decir, lo que viaja
por la red no es transparente, como hace el protocolo http.
Terminada la transaccin, los datos se guardan en el servidor sin
cifrar.
Aunque muy extendido, SSL es un protocolo de seguridad que fue
diseado para propsitos generales, y no es una solucin
absolutamente fiable si se requiere gran seguridad, como en el caso
de cormercio electrnico con pago. Para este tipo de transacciones
se dise en 1995 el protocolo SET
(Secure Electronic Transaction) , que despus de algunas
modificaciones se ha convertido en un estndar. Una de las
diferencias con SSL estriba en que los datos, adems de viajar
encriptados por la red, permanecen as tambin en el servidor, lo
que asegura ms su confidencialidad an en el caso de que el
servidor sufriera un ataque con xito.
Si no se desea encriptar la informacin (que tambin podra ser
interceptada, y con paciencia, descifrada), se puede recurrir a
crear una red virtual privada o VPN (en
inglsVirtual Private Network). Esto consiste en crear una especie
de "tnel" privado directo entre las dos mquinas que establecen el

dilogo, de forma que nadie pueda interferir lo que circula por ese
tnel. El problema de esta tcnica es que el cliente tiene que
instalarse una pequea aplicacin que permita establecer esa
conexin especial, y aunque no es muy complicado, para algunos
usuarios puede ser problemtico (como casi siempre que se espera
alguna accin del cliente). Adems requiere del servidor ms
recursos para mantener las conexiones activas.

Seguridad en aplicaciones web

Hasta aqu, si se ha aplicado todo lo dicho, puede parecer que ya lo


tenemos todo controlado, pero todava nos queda el ltimo eslabn
de la cadena software: la aplicacin web con la que va a trabajar el
cliente. Evidentemente, si los contenidos de la pgina son estticos,
pocos problemas pueden generarse, pero si se utilizan bases de
datos, la cosa cambia. En efecto, aunque la base de datos utilizada
por la aplicacin web contenga datos sin importancia, como por
ejemplo un libro de visitas, la aplicacin har llamadas al mismo
servidor donde podemos tener bases de datos que s contienen
informacin que debe ser protegida. Dependiendo de cmo se
diseen las aplicaciones web, podemos estar, sin saberlo, dando
herramientas a un posible atacante para que llegue a donde no
debe. As pues, por insignificante que pueda parecer la importancia
de algunas bases de datos, no deben utilizarse de cualquier manera,
ya que indirectamente podra utilizarse el acceso a ellas para
obtener informacin relevante del servidor.
Las primeras precauciones ya se han descrito antes, recuerda: no
utilices el usuario administrador, crea un usuario con permisos muy
restringidos y con una buena clave alfanumrica, y si es posible, que
no tenga permisos de borrado. Al margen de todo esto, hay que
disear la aplicacin de forma que no se le puedan hacer preguntas
maliciosas al servidor. Dependiendo del lenguaje de desarrollo
utilizado y de la base de datos, la sintaxis de las tcnicas de ataque
sern diferentes, pero basadas en los mismos principios. A
continuacin veremos algunas formas de atacar a un servidor SQL
Server con una aplicacin desarrollada en ASP.

Como ya sabes, en las aplicaciones ASP, cuando se produce un error


de ejecucin el sistema responde con una explicacin de dnde est
el problema, y esto es lo que puede utilizar el atacante para
obtener informacin que le permita llegar a donde quiere.
Imaginemos una aplicacin que contiene un mdulo de identificacin
hecho con muy poco cuidado. Por ejemplo:

<%@ LANGUAGE="VBScript" %>


<HTML>
<HEAD><TITLE>Pruebas de Seguridad</TITLE></HEAD>
<BODY>
<%
SQL="SELECT clave FROM users WHERE clave = " &
Request.QueryString("clave")
Set DB = Server.CreateObject("ADODB.Connection")
DB.Open "mi_DB", "mi_user", "mi_clave"
Set RS = Server.CreateObject("ADODB.Recordset")
RS.Open SQL, DB
If RS.BOF And RS.EOF then
Response.Write("Clave incorrecta")
Else
Response.Write("Clave correcta")
End if
RS.Close
DB.Close
Set RS = Nothing
Set DB = Nothing
%>
</BODY>
</HTML>

Para obtener acceso simplemente escribimos en la ventana de URL


del navegador:
http://mi_servidor/seguridad.asp?clave='prueba1'
La aplicacin nos devuelve: Clave incorrecta
Parece que todo funciona bien, pero el atacante cambia de
estrategia, y escribe:
http://mi_servidor/seguridad.asp?clave=0
Y la aplicacin, indiscreta donde las haya, dice:

Microsoft OLE DB Provider for ODBC Drivers error


'80040e07'
[Microsoft][ODBC SQL Server Driver][SQL Server]Error
de sintaxis al convertir el valor varchar 'hola
' para una columna de tipo de datos int.
/seguridad.asp, lnea 13
Si... acabamos de darle al pirata las llaves del reino, porque la clave
buscada es hola. Qu ha pasado? Pues que nuestra aplicacin
carece de las ms elementales normas de seguridad, y simplemente
entrando un tipo de dato diferente del que espera la consulta, lo ha
puesto en evidencia.
El primer error de seguridad est en el modo de recibir la consulta:
utilizando el objeto Request y su coleccin QueryString. Esta
forma de operar es como abrirle una consola al atacante para que
escriba lo que quiera, sin limitar la longitud de su cdigo. La
coleccin Form le dificultara algo ms las cosas, sobre todo si los
campos estn limitados en longitud, pero tambin podra conseguir
algo. En este caso concreto eso no arreglara nada, ya que
solamente ha tenido que escribir un cero. Lo que s podra hacer
ms fiable el programa es filtrar previamente todos los datos que
reciba, y solamente despus, pasarlos a la consulta SQL, y adems,
escribir la consulta de otra forma.
Esto no habra ocurrido si, simplemente, escribimos la consulta as:
SQL="SELECT clave FROM users WHERE clave = " &
Request.QueryString("clave") & "'"

"'" &

Quede claro que esto es un error de programacin, achacable


nicamente al programador, y no es un fallo de diseo de la base de
datos ni del servidor web. Este tipo de ataques lo pueden sufrir por
igual todas las plataformas de desarrollo: ASP, PHP, .NET, etc., y
cualquier base de datos: SQL Server, ORACLE o MySQL.
El ejemplo que hemos visto es muy sencillo, y su fallo clamoroso,
pero pueden realizarse ataques ms sofisticados mediante una
tcnica denominada "inyeccin SQL". Esto consiste en escribir en
los formularios, en lugar de los datos solicitados, parte de

instrucciones SQL que se concatenarn con la instruccin bsica de


la aplicacin, y la consulta resultante ser la que se ejecute,
produciendo errores intencionados que, directamente o en varios
pasos, pueden ir filtrando la informacin que el atacante necesita
para acceder al servidor.
Modificaremos un poco el ejemplo anterior, y lo haremos con dos
ficheros; Uno en html que ser el formulario llamador:

<HTML>
<HEAD><TITLE>Pruebas de Seguridad</TITLE></HEAD>
<BODY>
<FORM ACTION="seguridad.asp" METHOD="POST">
Usuario: <INPUT TYPE="text" NAME="usuario" SIZE="15" maxlength="15">
Clave: <INPUT TYPE="text" NAME="clave" SIZE="15" maxlength="15">
<INPUT TYPE="submit" NAME="enviar" VALUE="enviar">
</FORM>
</BODY>
</HTML>

Y el mismo ejemplo en ASP anterior, pero con la consulta SQL


diferente:
<%@ LANGUAGE="VBScript" %>
<HTML>
<HEAD><TITLE>Pruebas de Seguridad</TITLE></HEAD>
<BODY>
<%
SQL="SELECT clave FROM usuarios WHERE usuario = '" &
Request.Form("usuario") & _
"' And clave = '" & Request.Form("clave") & "'"
Set DB = Server.CreateObject("ADODB.Connection")
DB.Open "mi_DB", "mi_user", "mi_clave"
Set RS = Server.CreateObject("ADODB.Recordset")
RS.Open SQL, DB
If RS.BOF And RS.EOF then
Response.Write("Clave incorrecta")
Else
Response.Write("Clave correcta")
End if
RS.Close
DB.Close
Set RS = Nothing
Set DB = Nothing
%>
</BODY>

</HTML>

Como puedes ver, ahora s se han incluido las comillas que indican
que los campos son alfanumricos, para evitar el desastre
provocado por el cero del ejemplo anterior; pero nuestro hacker
sabe lo que hace, y escribe en el formulario:
Usuario:

prueba

Clave:

'or 1=1 --

Y la aplicacin devuelve: Clave correcta


Desde luego, ni el usuario ni la clave son correctos, pero la
aplicacin dice que s, es decir, que de nuevo se nos han colado en
casa sin tener la llave. Y puede que te ests preguntando ... pero,
qu ha fallado ahora?. La respuesta, una vez ms, est en un error
de diseo de la consulta SQL. En efecto, tal como est escrita, y
utilizada "honradamente", la consulta despus de recibir los valores
legales del formulario quedara as:
SELECT clave FROM usuarios WHERE usuario = 'mi_user' And clave =
'hola'

En lenguaje humano, nuestro deseo es que la DB busque un registro


cuyo usuario sea "mi_user" y que su clave, al mismo tiempo, sea
"hola". Pero despus de recibir los valores escritos por el pirata,
queda as:
SELECT clave FROM usuarios WHERE usuario = 'prueba' And clave = '' or
1=1 --'

Y su significado para la mquina es que busque los registros cuyo


usuario sea "prueba" y su clave "" (vacia) O que se cumpla la
condicin (no necesariamente en la tabla) de que 1 sea igual a 1, es
decir, todos los registros de la tabla, puesto que esa igualdad se
cumple siempre. El diseo de la aplicacin solamente evala si la
consulta devuelve al menos una lnea vlida, pero en la prctica est
devolviendo todas las lneas de la tabla, lo que significa que el
atacante podra hacerse con todos nuestros usuarios y sus claves
de un solo golpe. Qu peligrosos son los operadores booleanos!
porque, como ya habrs supuesto, este nuevo fiasco se debe al
operador booleano Or que nos han inyectado en nuestra consulta. El

final de la inyeccin son los dos guiones -- que son el smbolo del
comentario para SQL Server, y que evitan que se produzca un error
de sintaxis al resultar un nmero impar de comillas en la consulta.
Esto no habra ocurrido si, simplemente, escribimos la consulta as:
SQL="SELECT clave FROM usuarios WHERE (usuario = '" &
Request.Form("usuario") & _
"') And (clave = '" & Request.Form("clave") & "')"

Y la aplicacin en lugar de mostrar nuestras claves, hubiera


contestado.
Microsoft OLE DB Provider for ODBC Drivers error '80040e14'
[Microsoft][ODBC SQL Server Driver][SQL Server]Lnea 1: sintaxis
incorrecta cerca de '1'.
/seguridad.asp, lnea 15

Los ejemplos pueden ser interminables. Dependiendo de cmo est


escrita la consulta y con un poco de paciencia (y los hackers tienen
mucha...), se puede terminar abriendo la puerta de los datos. Y te
preguntars qu hacer? Pues ante todo aprender lo ms posible
del lenguaje SQL de tu servidor, dedicarle un cierto tiempo a
probar a romper tu propio programa (si las pruebas las hace otro
programador, mejor), y finalmente escribir siempre funciones para
controlar el tipo de dato recibido, es decir, que si se espera un
nmero, asegurarse de que en efecto, llega un nmero, etc., y
funciones de bloqueo de ciertos caracteres como las comillas
simples ('), las comillas dobles ("), los guiones (--), y todo aquel que
pueda dar conflictos en una consulta de tu DB.
Es buena idea programar los mdulos de identificacin de forma
que tengan un lmite de intentos, y si ste se supera, que la
aplicacin se cierre de forma permanente, incluso aunque se entre
la clave correcta, obligando a cerrar la sesin y comenzar de nuevo
(pero sin informar de ello, claro). Otra buena medida es guardar el
IP de las mquinas cliente, y rehusar la conexin de aquellas que
hayan sobrepasado el nmero mximo de intentos hasta que el
administrador lo permita. Esto, adems, nos permitir saber
despus qu mquinas nos estn atacando, y si es conveniente,
establecer una "lista negra" de IPs o de dominios "non gratos".

Otra cosa a tener en cuenta, es limitar siempre la longitud mxima


de los campos de los formularios a la longitud que tenga el campo de
destino en la tabla, ni uno ms, y que la aplicacin rechace los que
no sean de la longitud correcta, aunque en realidad las claves
debern ser ms cortas que ese mximo. Se trata de evitar que
puedan escribir mucho, pero sin indicar claramente la longitud
mxima de la clave. Elimina en las pantallas para el usuario esas
indicaciones de longitud tpicas: ..."Escriba una contrasea (mnimo
5 y mximo 10 caracteres..". Por ltimo, y si tu servidor lo permite,
es recomendable configurarlo para que no devuelva explicaciones de
los errores, sino un mensaje fijo informando de que se ha producido
un error, sin ms, ya que los detalles a un usuario normal no le
sirven de nada. Activa los mensajes explcitos solamente mientras
desarrollas o arreglas algo. De todas formas, recuerda que esto no
evitar que, si la inyeccin se consigue y es correcta, los datos
aparezcan, ya que, aunque obtenidos fraudulentamente, no
constituyen un error.
Adems de ataques ms o menos sofisticados, como los descritos,
te pueden intentar aplicar los ms tpicos, como el diccionario o la
fuerza bruta. El ataque por diccionario consiste en intentar
averiguar la clave de acceso probando una lista de palabras de las
ms habituales. Esa lista puede ser estndar o personalizada al
servidor que se quiera atacar, si se conoce ya algo de l. Si ya se
conoce por lo menos un usuario, la lista suele ser con datos
personales de ese usuario, como su fecha de nacimiento, el nombre
de su hijo, el del perro, la matrcula de su coche, su nmero de
telfono, etc. etc. Por eso es importante que las claves nunca sean
palabras coherentes y mucho menos relacionadas con datos
nuestros. Una clave fiable debe ser algo que no signifique nada: por
ejemplo: "ocmo12ert24A". Que es muy difcil de recordar? S...
pero precisamente por eso es buena. Al principio te puede parecer
imposible, pero al final te la aprenders. Lo que ciertamente te va a
costar ms es que tus usuarios utilicen estas claves, sobre todo si
tienen libertad para ponerla ellos mismos. No lo harn.

Otra tpica forma de ataque es la de fuerza bruta, es decir, ir


probando letras y nmeros de forma aleatoria, o con un cierto
orden, hasta que se consiga el acceso. Por supuesto, este sistema
puede llevar mucho tiempo, dependiendo de lo buenas que sean las
claves utilizadas. Como ya te puedes imaginar, estos ataques no se
hacen tecleando a mano posibles claves, sino mediante programas
que pueden hacer miles de pruebas en poco tiempo. Por eso, como
ya se ha dicho antes, conviene que los mdulos de conexin de las
aplicaciones tengan un lmite de accesos fallidos, a partir del cual,
el acceso debe cerrarse a ese cliente, indefinidamente, o por un
tiempo prudencial.
Una forma disuasoria para estos ataques es utilizar en los
formularios de acceso la tcnica "CAPTCHA"
(Completely Automated Public Turing test to tell Computers
and HumansApart, que significa algo as como -Prueba de Turing
pblica y automtica para diferenciar mquinas y humanos-) que
consiste en obligar a escribir manualmente en el formulario una
clave aleatoria distorsionada pticamente para que no pueda ser
leda por un programa. Por ejemplo:

Y aqu tienes un sencillo ejemplo de cdigo CAPTCHA escrito en


ASP por Emir Tzl bajo Common Public License:
Cdigo del llamador Cdigo generador
Suerte.

Qu es el ODBC?
Open Data Base Conectivity

O lo que es lo mismo, conectividad abierta de bases de datos. Si


escribimos una aplicacin para acceder a las tablas de una DB de
Access, qu ocurrir si despus queremos que la misma aplicacin,

y sin reescribir nada, utilice tablas de SQL Server u otra DB


cualquiera? La respuesta es sencilla: no funcionar. Nuestra
aplicacin, diseada para un motor concreto, no sabr dialogar con
el otro. Evidentemente, si todas las DB funcionaran igual, no
tendramos este problema.... aunque eso no es probable que ocurra
nunca.
Pero si hubiera un elemento que por un lado sea siempre igual, y por
el otro sea capaz de dialogar con una DB concreta, solo tendramos
que ir cambiando este elemento, y nuestra aplicacin siempre
funcionara sin importar lo que hay al otro lado... algo as como ir
cambiando las boquillas de una manguera. A esas piezas
intercambiables las llamaremos orgenes de datos de ODBC
Casi todas las DB actuales tienen un ODBC. Debido a que este
elemento impone ciertas limitaciones, ya que no todo lo que la DB
sabe hacer es compatible con la aplicacin, como velocidad de
proceso, tiempos de espera, mxima longitud de registro, nmero
mximo de registros, versin de SQL, etc., est cayendo en desuso
a cambio de otras tcnicas de programacin, pero an le quedan
muchos aos de buen servicio.
Todo lo referido aqu funciona con Windows NT Server 4.0 con el
Service Pack 4 o superior instalado (el ltimo publicado es el 6). El
Option Pack 4 para actualizar el IIS y las extensiones ASP. SQL
Server 6.5 y Access 97. Por supuesto, tambin funciona con las
versiones modernas de servidores como 2003 Server, y tambin XP
PRO, que lleva un IIS 5.0 de serie. Igualmente es posible utilizar
bases de datos de Access 2000 o 2003.
Esas otras tcnicas de programacin antes mencionadas, se utilizan
ya en el nuevo Windows 2003, Office 2003 y SQL Server 2000,
que adems de ODBC pueden utilizar.... pero esa es otra historia.
Esta es la idea: por un lado el ODBC provee de unas caracteristicas
siempre homogneas, y por el otro permite distintos controladores
que aseguran la conectividad de la aplicacin con diferentes bases
de datos.

Ahora que ya sabemos qu es y para lo que sirve, procedamos a su


instalacin: es un proceso sencillo, pero segn la base de datos
elegida sea Access o SQL Server, cambian un poco, y como no poda
ser menos, hay algunos trucos que conviene conocer.

Cmo se instala el ODBC de Access 97?


Si ya tienes instalado Office 97 en tu mquina con la
opcin Seleccionar todo, pasa directamente al punto Creando un
origen de datos.
Cuando se instala Office 97 en una mquina Windows NT o 95/98,
partiremos de un men de instalacin que nos presenta, entre
otras, la forma automtica y la personalizada, es esta ltima la que
se debe escoger.
Los
cont
rolad
ores
esta
n un
poco
esco
ndidos: En el primer nivel del cuadro de instalacin hay una lista
donde se deben marcar los distintos paquetes que se desea

instalar. No olvidar el correspondiente a Access y despus el


llamado Acceso a datos. Teniendo ste seleccionado, pulsar el
botn Modificar opcin que hay a su derecha, tal como puedes ver.
De la lista que aparecer seleccionar la denominada Controladores
de bases de datos, pulsar de nuevo el botn Modificar opcin, y ya
tenemos la lista de controladores. Fjate que adems del
controlador de Access hay otros, y como nunca se sabe que
extraos inventos acabaremos teniendo que hacer, ya puestos, lo
mejor
es
marca
rlos
todos.
Este
proce
so de
instalacin es vlido tanto para el servidor como para la mquina
donde vayamos a realizar el desarrollo de las aplicaciones, y por
supuesto, tambin deber hacerse en todas las mquinas que vayan
a trabajar con las aplicaciones de administracin de la base de
datos. Y ahora procederemos a configurar el controlador para que
pueda ser utilizado por el IDC.
Creando un origen de datos
Abrir el panel de
control y localizar el
icono llamado 32 bit
ODBC. Abrirlo.

En el cuadro que
aparece
seleccionar la
etiqueta System
DSN, ya que
el IDC slo
trabaja con este
tipo. Pulsar el
botn Add

Seleccion
ar el
controlad
or de
Access
en la
lista.
Pulsar el
botn Fin
alizar

Aqu es donde
vamos a crear
realmente el
origen de
datos de la
aplicacin.
Pulsar el
botn Options
>> para ver el
cuadro entero.

Analicemos
cada campo:
el
primero, Da
ta Source
Name, nos
pide el
nombre del
origen de
datos que
vamos a crear, y que ser el utilizado por la aplicacin. Se puede poner
cualquier nombre, sin espacios en blanco ni smbolos, slo letras y nmeros,
como en el ejemplo: prueba2.
Este nombre no tiene por qu ser el mismo que el de la base de datos que
hay vinculada a l. Al facilitar este nombre al IDC, el ODBC se encargar de
que la aplicacin "entienda" lo que dice la base de datos.
El siguiente campo, Description es un breve comentario del origen de datos,
si te es necesario, sino, puedes dejarlo vacio.
A continuacin hay cuatro botones que sirven para seleccionar, crear,
reparar o compactar una base de datos de Access. Como ya debes de
saber, coinciden con otras tantas herramientas que tiene el paquete de
diseo de Access. Utiliza el de seleccin y localiza y selecciona una DB que
ya tengas preparada para esta prueba.
El siguiente recuadro, System Database, contine dos
interruptores: None y Database, y un botn: System Database y sirven
para definir si la base de datos tiene permisos especiales de usuario o no.
Como tambin se supone que sabes, Access gestiona los permisos de usuario
en una base de datos especial llamada system.mdw que habra que definir
aqu, pulsando el botn System Database y seleccionando una system.mdw,

y a continuacin el botn Advanced para definir el usuario y palabra de paso


que hay que utilizar para el acceso a la DB. En el caso de que no haya
permisos especiales, basta con marcar el interruptor None.
NOTA: En los sistemas XP, NT Server o 2003 Server no olvidar que el
usuario definido para acceder desde internet, exista y tenga los permisos
necesarios para llegar a la base de datos y operar en ella. Una forma simple
de asegurarse de que no existan problemas de permisos puede ser poner el
fichero de la base de datos en el directorio "Documentos compartidos", que
es un rea de uso comn a todos los usuarios de la mquina. Si los datos son
confidenciales esto no debe hacerse, y habr que definir correctamente el
usuario que corresponda y sus permisos.
El ltimo recuadro, Driver, contiene campos que permiten controlar el
tiempo de espera (Timeout), el tamao del buffer de datos (una especie de
almacn en memoria por donde pasan los registros). Los valores por defecto
suelen ser suficientes en general. A la vista del rendimiento en cada caso,
se pueden cambiar.
Los dos controles finales sirven para definir el modo de acceso. Si es
marcado como Exclusive, siginifica que el primer usuario que se conecte a la
DB obtiene el control absoluto, y no podr ser accedida por otro usuario
hasta que el primero no la abandone. El siguiente control, Read Only deja la
DB en modo de slo lectura, y nadie podr escribir ni modificar nada. No
suelen utilizarse, ya que es la propia aplicacin la que debe decidir qu se
puede hacer en cada momento.
Ya tenemos listo el ODBC, pulsar el botn OK para guardar lo hecho.

Pulsar el
botn Aceptar p
ara cerrar el
administrador
de orgenes de
datos. En el caso
de que haya que
cambiar alguna
cosa, se
selecciona el
origen de datos
que proceda y se
pulsa el
botn Configure.

Como ya
debes de
saber, Access
es un paquete
que permite
disear aplicaciones y que integra un motor de base de datos. Debe quedar
claro que al crear un origen de datos para ODBC, estamos creando un
acceso slo a datos, es decir si tenemos una aplicacin completa en un
fichero de Access, el ODBC solamente conectar las tablas de datos con la
aplicacin internet, no pudiendo utilizar la parte aplicacin para el IDC ni
ningn otro recurso del IIS o del PWS. Con la aplicacin escrita en Access
seguir siendo posible acceder a las tablas slo en modo local.
Por ltimo, tener presente que el motor de Access es un motor pensado
para uso personal, que soporta aceptablemente un nmero reducido de
usuarios. En internet no es fcil saber cuantos usuarios simultneos se
pueden conectar en un momento dado, y el rendimiento puede caer
peligrosamente. Es buena idea disear las aplicaciones en modo distribuido:
es decir, en un fichero se escribe la parte aplicacin (formularios, rutinas
de control, etc.) y las tablas se utilizan vinculadas a otro fichero que slo
contine los datos. Esto, adems de mejorar algo el rendimiento, nos permite
trabajar incluso en el diseo de la aplicacin local, aunque esten siendo
accedidas las tablas desde internet. Si se espera que el nmero de usuarios
pueda ser importante, se debe utilizar un servidor de bases de datos como
SQL Server, que puede soportar cientos de usuarios simultneos.

Cmo se instala el ODBC de SQL Server?


Cuando se instala SQL Server 6.5 en una mquina Windows NT, el

controlador ODBC es instalado automticamente. Si el servidor web


es una mquina distinta a la que tiene SQL Server instalado,
tendrs que conseguir el controlador ODBC del disco de instalacin
de SQL Server, o bien, instalar Access 97, aunque es preferible el
original de SQL.
Creando un origen de datos
Abrir el panel de
control y localizar el
icono llamado 32 bit
ODBC. Abrirlo.

Paso 1.- En el
cuadro que
aparece,
seleccionar la
etiqueta Syste
m DSN, ya que
el IDC slo
trabaja con
este tipo de
controladores.
Pulsar el
botn Add

Paso
2.Selecci
onar el
control
ador de
SQL
Server
en la
lista.
Pulsar
el
botn F
inalizar

Paso
3.Aqu es
donde
vamos a
crear
realmen
te el
origen
de
datos
de la
aplicaci
n.

Analic
emos
cada campo: el primero, Name, nos pide el nombre del origen de datos que
vamos a crear, y que ser el utilizado por la aplicacin. Se puede poner
cualquier nombre, sin espacios en blanco ni smbolos, slo letras y nmeros,
como en el ejemplo: pruebas.
Este nombre no tiene por qu ser el mismo que el de la base de datos que
hay vinculada a l. Al facilitar este nombre al IDC, el ODBC se encargar
de que la aplicacin "entienda" lo que dice la base de datos.
El siguiente campo, Description es un breve comentario del origen de
datos, si te es necesario, sino, puedes dejarlo vacio.

El ltimo campo de esta pantalla es Server, y se refiere al nombre


del servidor de bases de datos. Si no eres el administrador del servidor
de bases de datos, puede que no sepas qu poner. Un servidor Windows NT
con SQL Server se comporta en algunos casos como si se tratase de dos
mquinas distintas, aunque en realidad es una misma. Dependiendo de a qu
servicio queremos llegar se usa un nombre u otro, aunque podra ser el
mismo en ambos casos, pero no se escriben de la misma forma.
Las mquinas con sistema Windows NT o 95/98 se suelen agrupar en lo que
se denominan grupos de trabajo, que son los que te aparecen en el
icono Entorno de red del escritorio. La forma de referenciar una mquina
de tu mismo grupo es mediante su nombre en el grupo. Supongamos que el
nombre de nuestro servidor en internet es el
siguiente:Mi_server.mi_empresa.mi_pais y que tiene asignada la direccin
IP 255.255.255.255
Normalmente, esta mquina aparecer en el grupo como MI_server y si te
quieres conectar a su servicio de impresora, por ejemplo, usaras la
direccin: \\Mi_server\impresora.
Habitualmente, los administradores de servidores asignan a los servidores
de bases de datos el mismo nombre que tiene la mquina en la que residen,
aunque puede ocurrir, por razones especiales, que no sea as. SQL Server,
por defecto, adopta el nombre de la mquina en el grupo cuando se instala,
es decir, MI_server, pero se podra haber utilizado otro. De ah podra
surgir la impresin de que se trata de dos mquinas diferentes. Fjate que
en cualquier caso, NO se utilizan las dos barras inclinadas delante del
nombre.
Y una cosa ms: en los sistemas NT, no olvidar que el usuario definido para
acceder desde internet, exista, ademas de como usuario de NT, como
usuario de la DB, y tenga los permisos necesarios para llegar y operar en
ella. Si SQL Server se ha instalado con la Trusted security, el usuario y
palabra de paso para el servidor NT y para SQL Server tienen que ser
iguales. Es como abrir dos puertas con la misma llave.
Una vez cumplimentados los tres campos, pulsa el botn Siguiente

Paso
4.-En
este
paso
definire
mos
cmo se
har la
verifica
cin del
login y
el
passwor
d al
conecta
r con
SQL
Server.

Evidentemente, la primera de las dos opciones, autenticacin NT usando el


login entrado en la conexin de red, no es lgica para una aplicacin de
internet, en que el cliente utlizar unos parmetros de conexin a su propia
red o a ninguna. Esta podra servir en caso de que la aplicacin se utilice en
una intranet, y que no todos los usuarios tuviesen los mismos permisos. Por
lo tanto marcaremos la segunda opcin: Autenticacin SQL Server usando
un login y password dados por el usuario; y cuando dice "...dados por el
usuario" no se refiere a que el cliente tenga que hacer esto cuando se
conecte, sino a que el usuario y password los tenemos que proporcionar
ahora, en los dos ltimos campos del formulario, en este caso el usuario
es web y como palabra de paso en este caso no pondremos ninguna (que
tambin es una forma de password).
Tanto en aplicaciones programadas con el IDC como con ASP, los usuarios y
passwords utilizados, no "viajan" con la informacin. Recuerda que son
programas que se ejecutan en el propio servidor, y se activan a peticin del
IIS, que a su vez , atiende una llamada http que le hace el cliente al
servidor web con un usuario annimo, y despus de procesarla
convenientemente, y de resolver internamente las conexiones con la DB que
sean necesarias, al cliente le devolvern html estndar y transparente. Con
esto se evita el tener que facilitar a los clientes claves que podran ser
capturadas en la red indebidamente.
Este usuario annimo utilizado por defecto en el IIS, normalmente slo
tiene permisos de lectura en reas muy concretas del servidor NT. A las

aplicaciones internet, habitualmente, no se les da nunca permisos para


borrar nada, lo mximo que suelen poder hacer, es insertar registros en las
tablas, y ocasionalmente, alguna pequea modificacin de datos, como
puedan ser domicilios, o telfonos. Si el cliente desea ser borrado de la
base de datos, normalmente lo solicitar al administrador de la DB, que
proceder desde su aplicacin en la intranet.
No se debe confundir este tipo de autenticaciones con las que se hacen
desde una pgina web, que puede pedirnos un nombre de usuario (login) y
una clave (password). En estos casos se trata de directorios protegidos en
el propio servidor web, y concretamente con el IIS, es tan sencillo como
asignar el directorio en cuestin a un usuario NT existente. Y es buena
idea, puesto que en este caso la clave si viaja, que estos usuarios slo
tengan permisos de lectura, y si la informacin que se va a acceder es
confidencial, se debern instalar sistemas de encriptacin de los que
soportan la mayora de navegadores modernos, o utilizar sistemas ms
sofisticados a base de certificados electrnicos.
Cuando se instala alguna pgina en uno de estos directorios protegidos, un
problema muy habitual que suelen tener los clientes que utilizan el Internet
Explorer como navegador, consiste en que sistemticamente reciben un
mensaje de error del servidor, denegando el acceso. Esto es debido a que
por defecto, el IE siempre intenta conectarse a los servidores en modo
intranet, y por tanto envia automticamente al servidor web el usuario y
clave de conexin a red local, que evidentemente, no son los que espera el
servidor internet, provocando el error de acceso.
La solucin consiste en configurar, en el cliente, correctamente el IE para
que se conecte en modo internet, cosa que no todo el mundo sabe hacer, o
bien cerrar la sesin de red local y abrir una nueva sin conexin, con lo que
el IE no podr enviar nada, y podremos introducir las claves correctas
cuando el servidor internet las demande. Esto no ocurre con Netscape, que
siempre inicia la conexin en modo internet (de hecho no tiene otra).
Y continuando con nuestro ODBC, el siguiente paso ser pulsar el
botn Client configuration.

Como se ha dicho ms arriba,


el servidor SQL va a tener un
nombre escrito en formato de
red Windows (Mi_Server), y
como ya debes de saber, todas
las comunicaciones entre
mquinas en internet funcionan
con el protocolo TCP/IP, que
utiliza otra forma de
referenciar las direcciones,
que pueden ser con el nombre
proporcionado por tu DSN, o
sistema de resolucin de
nombres, en la
forma Mi_server.mi_empresa.
mi_pais o mediante su
direccin IP, en nuestro
ejemplo 255.255.255.255

Para resolver este


problema, SQL Server
viene provisto de un cliente especial que se encargar de hacer las
conversiones de nombre necesarias entre un sistema y otro.
En la primera de las tres vistas que tiene este paso, DB Library, se
configura si se aplicar alguna conversin de caracteres o no. La
conversin de ANSI a OEM, sirve para cambiar el juego por defecto de
SQL Server. Como ya debes de saber, SQL Server utiliza el juego de
caracteres ANSI para almacenar los datos. Este juego de caracteres es
distinto al OEM utilizado por los sistemas Windows, de modo que si
escribimos con nuestra aplicacin internet, por ejemplo una "" o una letra
acentuada en la tabla, sin aplicar esta conversin, ser guardada en
equivalente ANSI. Si se pide ese registro a SQL Server desde su consola
de control, o desde algun cliente, como IWSql, que son ANSI, no la
veremos tal cual, sino un caracter extrao. El mismo registro, solicitado
mediante la misma aplicacin que lo escribi se ver correctamente, y lo
mismo ocurre con las aplicaciones locales desarrolladas para sistemas
Windows, como Access 97. Como no es habitual explotar las tablas desde la
consola o desde clientes SQL, es preferible dejar al servidor utilizar su
juego por defecto. Si hay que cambiarlo, hay pensarlo ahora, ya que cuando
existan registros en las tablas, si se cambia, ser trabajoso aplicar la
conversin a todos ellos.

La siguiente vista, Net


Library contiene un campo muy
importante: la Default
Network, es decir el tipo de
red por defecto. Como ya se
ha dicho, hay que trabajar
en TCP/IP.

Los tres siguientes


campos se limitan a
mostrarnos informacin
de la libreria de red
elegida: dnde est, cmo
va a mostrar las fechas
(que concide con lo
definido en la
configuracin regional de
la mquina) y el tamao
de la misma.
La siguiente y
ltima, Advanced contiene
tres campos en los que hay que
entrar los parmetros
necesarios para convertir la
direccin tipo Windows en su
equivalente IP, como
son Server, Network
Protocol y Connection String,
que hay que cumplimentar
como puedes ver en la imagen,
con los valores que ya
conocemos.

A continuacin pulsar el
botn Add/Modify para
que aparezca la
correspondiente lnea en
la ventana Current
Entries

Aqu puedes ver la lnea de


conexin ya compuesta. Si
tuvieses ms de un servidor
SQL, puedes repetir el
proceso tantas veces como sea
necesario, para referenciar a
todos ellos de la misma
manera.

De la misma forma, si
alguno de ellos cambia de
nombre o de IP, slo hay
que seleccionar la lnea
correspondiente y pulsar
de nuevo al
botn Add/Modify para
modificar lo que proceda.
Pulsar el botn Done para
concluir la configuracin del cliente SQL Server y pasar a la siguiente
pantalla del ODBC.

Paso
5.-En
el paso
4 se
defini
al
usuario
web pa
ra
utilizar
la base
de
datos
de la
aplicaci
n.
Pero,
que ocurrir si el usuario web tiene permiso para utilizar ms de una base de datos?
Tambin se supone que ya sabes que en SQL Server, cuando se da de alta un usuario, es
obligatorio asignarle una base de datos por defecto, y los administradores suelen asignar
la que normalmente tiene ms uso.

Si habitualmente utilizamos el usuario web para las transacciones internet,


lo normal ser que tenga permisos en varias bases de datos, y por tanto

habr que definir en cada ODBC cual es la DB por defecto. Esto se hace
marcando la casilla Change the dafault data base to y escogiendo a
continuacin de la lista que hay debajo la que proceda.
Lo que aparece en esa lista s son nombres de bases de datos y no de
orgenes de datos definidos para ODBC, aunque en este caso coincidan. En
la imagen puedes ver cmo marcar el resto. Fjate que, en general, se suele
dejar a SQL Server utilizar los valores ANSI para casi todo. Procura crear
los ODBC siempre igual, te evitars problemas inesperados, y dudas del
tipo "..dnde estar fallando..?". Recuerda que SQL Server trabaja
internamente con el lenguaje SQL ANSI que incluye un gran nmero
de funciones de todo tipo y desystem procedures, o procedimientos de
sistema, autnticos programas escritos en SQL, y con los que se administra
el servirdor, que trabajan mal con datos que no sean compatibles ANSI.
Siempre que haya que hacer una traslacin que sea fuera de las tablas.

Paso
6.-El
primer
campo
de este
paso
sirve
para
definir
el
idioma
que
SQL
Server
utilizar
para
emitir
los mensajes de error cuando algo no funcione bien. Dado que no hay versin en espaol de
este producto, hay que dejarlo como est: (Default), es decir: ingls.

Los siguientes son algo parecido a los que hay en la primera pantalla del
paso 4: el primero permite al ODBC elegir el mtodo de traslacin; el
segundo indica que no se debe utilizar ningn mtodo de traslacin; el
tercero fuerza la conversin del juego de caracteres, pero en lugar de
ANSI a OEM que se haca en el paso 4, aqu es de OEM a ANSI; el cuarto
es para utilizar un conversor propio del ODBC, que hay de definir, y no el
de SQL Server.

Hay una gran diferencia entre estos sistemas de traslacin y los del paso
4: Aqu la traslacin se realizadespus de extraer el dato de la tabla y
antes de presentarlo en pantalla, es decir, que son traslaciones slo a
efectos de visualizacin y no afectan a los datos. En el paso 4 la traslacin
se hace antes de guardar el dato en la tabla, y s afectan a los datos.
Y por fin el ltimo control sirve para definir cmo se presentarn las
fechas, nmeros y monedas en pantalla: si en formato ANSI o segn lo
especificado en la configuracin regional de la mquina
Pulsar el botn Siguiente despus de haber marcado lo que proceda.

Paso
7.Aqu se
definen
los
fichero
s de
logins,
que son
unos
fichero
s de
texto
donde
SQL
Server
y el
ODBC van escribiendo todo lo que hacen, tanto si acaba bien como si no, y que son muy
tiles cuando hay problemas, ya que permiten rastrear todo los procesos. Conviene
mantener sus nombres, ya que son utilizados por algunas herramientas de estadisticas y
rastreadores de errores. Puede que sea necesario cambiar la unidad de disco si no te
queda mucho espacio en la unidad C (por defecto), ya que crecen continuamente, y
peridicamente se deben vaciar; la frecuencia depender lgicamente de la actividad del
servidor.

Pulsar el botn Finalizar para pasar al ltimo paso.

Paso 8.-En este ltimo paso,


como puedes ver, no hay que
escribir nada. Nos muestra un
resumen de todos los pasos
anteriores, y nos ofrece el
botn Test Data Source para
probar si el origen de datos
puede funcionar con los datos
que le hemos proporcionado. En
caso afirmativo s hay que
pulsar el botn OK para
termitar el proceso. Si falla la
prueba, habr que volver atrs
y revisar los datos hasta que
funcione.

Si el origen de datos no
funciona desde aqu no
funcionar desde ninguna
parte. Si la aplicacin da
problemas, y este test funciona correctamente, el fallo hay que buscarlo en
la aplicacin. Si un origen de datos que funcionaba deja de hacerlo, el
problema puede estar en la red, o en el SQL Server. Revisar si el usuario
todavia es vlido para esa DB, y si lo es, si se mantienen los permisos que
tena. Si todo es correcto, pero sigue sin funcionar, lo mejor es borrarlo y
crear uno nuevo. Lo nico que se prueba desde aqu es si el ODBC puede
llegar a la DB con el usuario definido en modo lectura, no si hay datos en la
DB, o si se puede escribir en ella.

Ya tenemos
listo el ODBC.
Pulsar el
botn Aceptar
para cerrar el
administrador
de orgenes de
datos. En el
caso de que
haya que
cambiar alguna
cosa, se
selecciona el
origen de datos
que proceda y
se pulsa el
botn Configur
e.

Qu es el IDC?
El Internet Database Conector

El acceso fcil desde internet a bases de datos se puede hacer


mediante un componente del IIS,
llamado Internet Database Conector (IDC). Con el IDC se puede
acceder a bases de datos que utilicen SQL como lenguaje de
interrogacin, como SQL Server o Access 97, 2000, XP o 2003 y
siempre utilizando los Open Data Base Conectivity (ODBC) de que
vienen provistas las bases de datos. Si... esto parece terriblemente
complicado... a ver si este grfico te ayuda:

El IDC tan slo tiene unos pocos comandos, muy sencillos de usar,
pero que sabiamente explotados, y aprovechando todos los recursos
del HTML, nos permitirn escribir aplicaciones internet, si no
sofisticadas, s prcticas.
Los elementos del IDC

Para que funcione el IDC slo es necesario escribir un fichero con


extensin .idc que contenga una instruccin SQL para la base de
datos. Dentro de este fichero, que puede tener cualquier nombre, y
entre otros parmetros, se indica el nombre de otro fichero con
extensin .htx que hace las veces de plantilla, y da formato a los
datos devueltos por la instruccin SQL del primer fichero.
El fichero con extensin .idc se invoca como cualquier otro con
extensin .htm o .html, mediante un link, un botn de un formulario
o escribindolo directamente en la lnea de URL, por ejemplo sea el
fichero articulos.idc:
Con un link:
<A HREF="/aplicaciones/articulos.idc"> Ver artculos </A>

Desde un formulario:
<FORM METHOD="POST" NAME="ARTICULOS"
ACTION="/aplicaciones/articulos.idc">
<INPUT TYPE="SUBMIT" VALUE="Ver articulos">
</FORM>
Directamente:
http://Mi_server.mi_empresa.mi_pais/aplicaciones/articulos.idc
Para poder dar formato a los datos devueltos por la instruccin
SQL del fichero articulos.idc, disponemos de varias palabras clave
que se usarn en el fichero plantillaarticulos.htx (para mayor
claridad se recomienda dar el mismo nombre base a los dos
ficheros, aunque puede utilizarse el que se quiera):
<%begindetail%>
<%enddetail%> indican el comienzo y el
final, respectivamente, de la descarga de todas las lneas que
devuelva la instruccin SQL contenida enarticulos.idc. Las
instrucciones html que se escriban entre estos dos elementos se
repetirn con cada lnea devuelta por la DB junto con los datos de
cada registro. En esencia es un bucle que se repetir tantas veces
como registros devuelva la instruccin SQL.
Tambin tenemos un elemento de decisin bien conocido de todos
los programadores:
<%if%> <%else%> <%endif%>
Teniendo el elemento if evidentemente, nos faltan los
operadores: EQ para el igual (=), LT para menor que (<), GT para
mayor que (>) y CONTAINS para evaluar si un valor est contenido,
en cualquier posicin, en otro. No se pueden utilizar los smbolos
directamente, hay que escribir como se ha indicado, EQ, etc.
Como puedes ver es bastante sencillo. He aqu un esquema de
funcionamiento:

Cmo se escriben ficheros para el IDC?


Los ficheros .idc se escriben con cualquier editor de texto, igual
que los ficheros .htm o .html, pero teniendo especial cuidado de que
no quede ningun caracter "perdido" por ah. En los ficheros .idc slo
tiene que escribirse lo necesario y ni un caracter ms, ya que es un
fichero de instrucciones para el IDC. El Bloc de notas de Windows
es una buena herramienta para ellos, ya que no deja caracteres

ocultos.
Supongamos que queremos crear una pgina web
llamada articulos.htm que contiene un botn de formulario que al
ser pulsado nos va a mostrar, en otra pantalla, una lista de artculos
de ferretera procedente de una tabla. Por ejemplo:
<HTML>
<HEAD><TITLE>Ferreteria </TITLE></HEAD>
<BODY>
<CENTER>
<H3>La ferreteria virtual</H3>
<FORM ACTION="/aplicaciones/articulos.idc" METHOD="POST">
<INPUT TYPE="SUBMIT" VALUE="Pulse aqui para ver nuestros articulos">
</FORM>
</CENTER>
</BODY>
</HTML>

Paso 1.- Comenzaremos creando un origen de datos


llamado pruebas que accede a una base de datos cualquiera (pero de
Access o SQL Server), que contenga una tabla llamadaarticulos.
Esta tabla tiene cuatro campos: codigo de tipo numrico, tipo de
tipo texto, nombre de tipo texto, y precio de tipo numrico. Algo
as:
codigo
tipo
nombre
precio
-------------------------------------------------1
HERRAMIENTAS
Martillo
120
2
HERRAMIENTAS
Alicates
140
3
MATERIAL
Clavos
2
4
MATERIAL
Tornillos 3

Paso 2.- A continuacin hay que escribir el fichero articulos.idc que


sera as:
Datasource: pruebas
Username: web
Password:
Translationfile: C:\aplicaciones\translator.txt
Template: articulos.htx
SQLStatement:
+SELECT tipo, nombre
+ FROM articulos

Analicemos cada lnea:


La primera de ellas es Datasource: Es decir, origen de datos,
recuerda que el origen de datos es creado por el administrador de
ODBC, y el valor de este parmetro tiene que ser un origen de
datos ODBC, no un nombre de base de datos.
A continuacin vienen Username: y Password: en los que tendremos
que escribir el usuario y palabra de paso que se hayan definido
durante la creacin del origen de datos.
El siguiente es Translationfile: y su valor en nuestro ejemplo es:
C:\aplicaciones\translator.txt
Este valor no es ms que la direccin fsica en un disco del servidor
de un simple fichero de texto llamado translator.txt (o como
quieras llamarle) cuyo contenido sirve para convertir caracteres
que no se ven bien en pantalla, como ees o acentuaciones a su valor
correcto. Es parecido a lo que se puede definir en la creacin del
origen de datos, pero como en el ODBC slo esta prevista la
conversin OEM a ANSI o ANSI a OEM, que son las ms
habituales, si en las tablas hay algun caracter que no es de ninguno
de estos dos juegos, desde el Translationfile: podemos hacer que
se vea correctamente. Es recomendable mantener este parmetro,
incluso aunque no se utilice. Si se mantiene, el
ficherotranslator.txt debe existir, aunque puede estar vaco. He
aqu una muestra:
=&iacute;
=&ntilde;
=&oacute;
=&aacute;
Despus tenemos Template: Aqu es donde se indica el nombre del
fichero plantilla que presentar los datos finales, y que
habitualmente tiene el mismo nombre que el fichero .idc que le
invoca, aunque puede tener cualquier otro, siempre que se mantenga
su extensin: .htx En nuestro ejemplo es el
llamado articulos.htx

Y por fin tenemos la estrella de todo este invento: SQLStatement:


Esta es la instruccin o instrucciones escritas en SQL para la base
de datos. Todo lo hecho hasta ahora es para conseguir extraer o
guardar un dato en la DB, y es en este punto donde muchas
aplicaciones naufragan lamentablemente.
SQL no es un lenguaje trivial. Adems de su sintaxis, que puede
variar sensiblemente de una DB a otra, se deben tener nociones del
funcionamiento interno de la DB, conocer sus prestaciones mximas
y mnimas, y sobre todo se debe tener clara la estructura de las
tablas tanto a la hora de crear la DB como a la hora de explotarla.
Es buena idea dedicar algun tiempo a estudiar el SQL en general y
el de nuestra DB en particular. Si tienes que utilizar una DB que no
has creado t, nunca dejes de hablar con su creador. Infrmate de
su estructura, lo que se pretenda de ella cuando fue creada, qu
campos estan indexados, cual es su juego de caracteres por
defecto, si existen relaciones definidas entre tablas, si hay
integridad referencial, y en fin, cualquier detalle que te pueda
ayudar a la hora de disear la aplicacin y optimizar las consultas
SQL.
Recuerda que si una determinada consulta hecha directamente a la
DB es lenta en su respuesta, via internet lo ser mucho ms.
Cualquier defecto de estructura o de programacin que en local no
tendran demasiadas consecuencias, en internet pueden ser
desastrosos, llegando incluso a "colgar" la base de datos. Tener
siempre presente esta jocosa ecuacin:
(problemilla x Num. de usuarios) + velocidad de la red + velocidad
del cliente + Murphy = desastre
Donde, si problemilla tiende a cero, la cosa mejora. Los tres
siguientes factores de la ecuacin son irresolubles y slo cabe
aceptarlos con resignacin.
Y continuando con nuestro idc, concretamente con
la SQLStatement, en este caso se trata de una simplsima
instruccin: SELECT tipo, nombre FROM articulos en la que se

solicita a la DB que nos devuelva solamente los


campos tipo y nombre de la tabla articulos, sin ninguna limitacin ni
condicin. El signo + que hay delante de las
clusulas SELECT yFROM es la forma que tiene el IDC de
concatenar cadenas de texto, por lo que no hay que olvidar poner un
espacio en blanco delante de la primera cosa que se escriba en la
segunda y siguientes lneas de la sentencia SQL y despus del
correspondiente signo +.
Paso 3.- El tercer y ltimo paso consistir en escribir el
fichero articulos.htx donde daremos formato a los datos que nos
devuelva la consulta SQL. Podra ser algo as:
<HTML>
<HEAD><TITLE>Lista de articulos </TITLE></HEAD>
<BODY>
<CENTER>
<H3>La ferreteria virtual</H3>
<TABLE BORDER=1>
<TR><TH>Tipo articulo</TH><TH>Nombre articulo</TH></TR>
<%begindetail%>
<TR>
<TD><%tipo%></TD>
<TD><%nombre%></TD>
</TR>
<%enddetail%>
</TABLE>
</CENTER>
</BODY>
</HTML>

Y este sera el resultado obtenido, si todo funciona como debe (y


en la tabla hemos escrito esto, claro...):
La ferreteria virtual
Tipo articulo

Nombre articulo

HERRAMIENTAS Martillo
HERRAMIENTAS Alicates
MATERIAL

Clavos

MATERIAL

Tornillos

Paso 3 bis.- Aqu haremos una segunda versin del fichero .htx para
que puedas ver como se utiliza el comando de decisin del IDC: if.
Como ejemplo haremos que los artculos del tipo "MATERIAL" se

escriban en rojo y el resto en azul:


<HTML>
<HEAD><TITLE>Lista de articulos coloreada</TITLE></HEAD>
<BODY>
<CENTER>
<H3>La ferreteria virtual</H3>
<TABLE BORDER=1>
<TR><TH>Tipo articulo</TH><TH>Nombre articulo</TH></TR>
<%begindetail%>
<TR>
<TD><%tipo%></TD>
<TD><%if tipo EQ "MATERIAL"%>
<FONT COLOR="red"><%nombre%></FONT>
<%else%>
<FONT COLOR="blue"><%nombre%></FONT>
<%endif%>
</TD>
</TR>
<%enddetail%>
</TABLE>
</CENTER>
</BODY>
</HTML>

Y este debe ser el resultado obtenido:


La ferreteria virtual
Tipo articulo

Nombre articulo

HERRAMIENTAS Martillo
HERRAMIENTAS Alicates
MATERIAL

Clavos

MATERIAL

Tornillos

Vers que en la condicin <%if tipo EQ "MATERIAL"%> el valor


de tipo, "MATERIAL" va entre comillas dobles. Esto es as porque
el campo tipo es alfanumrico, y se hace la comparacin como
cadena de caracteres. Si fuera numrico no debera llevar comillas
y la comparacin sera numrica. En los ficheros .htx los campos de
texto van entre comillas dobles como ya has visto, pero en los
ficheros .idc tienen que ir entre comillas simples ( ' ) OJO: no es un
acento, es un apstrofe.
En el ejemplo hemos utilizado la condicin if para cambiar el color
de un texto, pero puede utilizarse para cualquier cosa que se te
ocurra. En combinacin con el HTML sabiamente utilizado, se

pueden conseguir aplicaciones muy potentes, aunque no debes


forzar demasiado los .htx, la verdadera potencia del IDC est en el
SQL. Y hablando de SQL, no olvidar que en los .idc se puede
escribir ms de una sentencia SQL siempre que la DB sea de SQL
Server, si es de Access slo se puede escribir una sentencia cada
vez, como en este ejemplo.
Si tienes un SQL Server puedes escribir varias sentencias SQL en
el IDC, y el HTX se escribe igual, solo que poniendo una pareja de
instrucciones <%begindetail%><%enddetail%> en el momento de
utilizar el resultado devuelto por cada sentencia SQL, y teniendo
en cuenta que han de ser secuenciales, es decir, que hay que
utilizarlas en el mismo orden en que fueron escritas en el IDC. No
es posible anidarlas, ya que no tienen nombre.
Otra cosa que se puede hacer si tienes un SQL Server, es
arrastrar o crear valores durante varios ficheros .idc incluso
aunque lo que se quiera arrastrar no exista realmente en ninguna
tabla de la DB. Por ejemplo si en el primer .idc escribimos una
consulta como esta:
+SELECT 'Hola que tal' AS saludo
El valor del campo "saludo" estar disponible en un segundo .idc de
esta forma:
+SELECT '%saludo%' AS saludo2
En este ejemplo se ha creado un string (cadena de texto) que no
existe en ninguna tabla de la DB. Tambin pueden arrastrarse
valores obtenidos de una consulta real a una o varias tablas de la
DB, sin necesidad de ejecutar la misma consulta dos .idc ms all. Y
por supuesto, pueden generarse valores numricos, clculos, etc.,
utilizando las funciones de todo tipo que posee SQL Server. No
olvidar que para acceder a los datos de cada sentencia SELECT, en
los .htx siempre se necesitan parejas de
instrucciones <%begindetail%><%enddetail%>, una por cada
SELECT escrita en los .idc

Ejemplo 1.- Peticin sin condiciones de dos campos de una tabla.


Presentacin directa en formato tabla.
articulos.IDC
Datasource: pruebas
Username: web
Password:
Translationfile: C:\aplicaciones\translator.txt
Template: articulos.htx
SQLStatement:
+SELECT tipo, nombre
+ FROM articulos

articulos.HTX
<HTML>
<HEAD><TITLE>Lista de articulos </TITLE></HEAD>
<BODY>
<CENTER>
<H3>La ferreteria virtual</H3>
<TABLE BORDER=1>
<TR><TH>Tipo articulo</TH><TH>Nombre articulo</TH></TR>
<%begindetail%>
<TR><TD><%tipo%></TD><TD><%nombre%></TD></TR>
<%enddetail%>
</TABLE>
</CENTER>
</BODY>
</HTML>

Resultado
La ferreteria virtual
Tipo articulo

Nombre articulo

HERRAMIENTAS Martillo
HERRAMIENTAS Alicates
MATERIAL

Clavos

MATERIAL

Tornillos

Ejemplo 2.- Peticin con una condicin de dos campos de una tabla a
partir de una eleccin en una lista desplegable construida con datos
de la misma tabla.
articulos1.IDC

Datasource: pruebas
Username: web
Password:
Translationfile: C:\aplicaciones\translator.txt
Template: articulos1.htx
SQLStatement:
+SELECT tipo
+ FROM articulos
+ GROUP BY tipo

articulos1.HTX
<HTML>
<HEAD><TITLE>Lista de tipos </TITLE></HEAD>
<BODY>
<CENTER>
<H3>La ferreteria virtual</H3>
<FORM ACTION=/aplicaciones/articulos2.idc" METHOD="POST">
<SELECT NAME="LISTA_TIPOS">
<%begindetail%>
<OPTION VALUE="<%tipo%>"> <%tipo%>
<%enddetail%>
</SELECT><BR>
<INPUT TYPE="SUBMIT" VALUE="Elija el tipo de articulo y pulse aqui">
</FORM>
</CENTER>
</BODY>
</HTML>

Resultado 1
La ferreteria virtual

Elija el tipo de articulo y pulse aqui

articulos2.IDC
Datasource: pruebas
Username: web
Password:
Translationfile: C:\aplicaciones\translator.txt
Template: articulos2.htx
SQLStatement:
+SELECT tipo, nombre
+ FROM articulos
+ WHERE tipo ='<%LISTA_TIPOS%>'

articulos2.HTX
<HTML>
<HEAD><TITLE>Lista de articulos </TITLE></HEAD>
<BODY>
<CENTER>
<H3>La ferreteria virtual</H3>
<TABLE BORDER=1>
<TR><TH>Tipo articulo</TH><TH>Nombre articulo</TH></TR>
<%begindetail%>
<TR><TD><%tipo%></TD><TD><%nombre%></TD></TR>
<%enddetail%>
</TABLE>
</CENTER>
</BODY>
</HTML>

Resultado 2 (Suponiendo que se eligi "MATERIAL" en el formulario

del resultado 1)

La ferreteria virtual
Tipo articulo Nombre articulo
MATERIAL Clavos
MATERIAL Tornillos

Ejemplo 3.- Insertar un nuevo registro en la tabla de articulos


partiendo de un formulario.
insertar.IDC
Datasource: pruebas
Username: web
Password:
Translationfile: C:\aplicaciones\translator.txt
Template: insertar2.htx
SQLStatement:
+INSERT INTO articulos ( codigo, tipo, nombre, precio )
+ %codigo%, '%tipo%', '%nombre%', %precio%

insertar.HTM ---- OJO esto NO es un HTX, es un HTM normal.


<HTML>
<HEAD><TITLE>Insertar articulos </TITLE></HEAD>
<BODY>
<CENTER>
<H3>La ferreteria virtual</H3>
<FORM ACTION=/aplicaciones/insertar.idc" METHOD="POST">

<INPUT
<INPUT
<INPUT
<INPUT

TYPE=TEXT
TYPE=TEXT
TYPE=TEXT
TYPE=TEXT

NAME="codigo" SIZE=3 MAXLENGTH=3 >


NAME="tipo" SIZE=25 MAXLENGTH=25 >
NAME="nombre" SIZE=30 MAXLENGTH=30 >
NAME="precio" SIZE=4 MAXLENGTH=4 >

<INPUT TYPE="SUBMIT" VALUE="Escriba las caracteristicas del articulo y


pulse aqui">
</FORM>
</CENTER>
</BODY>
</HTML>

Resultado 1
La ferreteria virtual

Escriba las caracteristicas del articulo y pulse aqui

Despus de pulsar el botn, y si no se produce ningn error, no se


ver ningun mensaje, ya que no se ha preguntado nada a la DB. Si se
desea comprobar que la transaccin se ha realizado, hay que
escribir otro formulario que muestre el contenido de la tabla, como
en alguno de los ejemplos anteriores.
Si se tiene SQL Server, se puede incluir una segunda sentencia
SQL en el IDC para que aparezca el nuevo contenido de la tabla
inmediatamente despus de realizar la transaccin. Con una DB de
Access, esto no es posible, y por tanto lo ms que se puede hacer
es incluir un botn que llame a la consulta para mostrar la tabla en
un segundo paso.
insertar2.HTX

Este HTX se escribir, por tanto, segn convenga un tipo de


respuesta u otro despus de haber insertado el nuevo registro. Por
ejemplo, un botn que lance la misma consulta que hay en el ejemplo
1, un link para movernos a otra pgina, o un texto cualquiera, ya que
el HTX no es obligatorio utilizarlo como respuesta habitual del IDC,
aunque tiene que existir.

Qu es el ASP?

Un poco de retrica.

Aqu comienza la parte ms complicada del diseo de pginas web.


Es muy conveniente que, si vas a programar pginas ASP, tengas
algunos conocimientos previos de programacin, preferiblemente en
programacin orientada a objetos (por ejemplo Access Basic o
Visual Basic). Tambin es recomendable que, aunque no vayas a
utilizarlo, leas el tema de aplicaciones con el IDC, ya que los
principios bsicos de conexin y conceptos generales son vlidos
para el ASP.
Si no sabes nada de programacin, plantate si con el IDC puedes
resolver tu problema; y si el IDC no es suficiente, preprate para
adentrarte en un tortuoso laberinto del que no siempre se puede
salir. La complejidad de estas tcnicas es bastante alta, y a los
problemas que te van a surgir en la escritura del cdigo ASP, hay
que sumarle los que te pueda presentar la correcta configuracin
del IIS y su administracin.
Introduccin al ASP.

Suponiendo que ya has leido la introduccin a las aplicaciones en


internet, puede definirse el ASP (Active Server Pages, o lo que es
lo mismo: pginas activas en el servidor) como un "modo" de escribir
aplicaciones de internet, y que, al igual que ocurre con las escritas
para el IDC, se ejecutan en el servidor, enviando a los clientes
HTML estndard. Dicho as te preguntars donde est la diferencia
con el IDC. Pues la diferencia estriba en que el IDC dispone de
instrucciones muy reducidas: una sencilla toma de decisiones del
tipo si/no y poco ms, mientras que ASP pone a disposicin del
programador todos los recursos de varios lenguajes de secuencias
de comandos: el Visual Basic Script (en lo sucesivo VBScript), que
es una variante del potente Visual Basic, JavaScript, Perl y otros,
incluso mezclados dentro del mismo programa. Slo hay que cargar
el motor de comandos correspondiente en el IIS, y configurarlo
correctamente. Y por supuesto, el HTML tambin est presente. El
resultado de esta mezcla de lenguajes, junto con algunas
prestaciones aadidas al IIS, es lo que genricamente se conoce
como ASP, que como puedes ver, en realidad no es un lenguaje, sino
una forma de construir programas utilizando uno o varios lenguajes

(en versin script) junto con el HTML, que sigue siendo


imprescindible, ya que es el nico que entienden los navegadores. En
mquinas con sistema operativo UNIX o LINUX el equivalente al
ASP es el JSP o el PHP, aunque tambin existen versiones para
Windows de stos, pero no son nativos.
No tiene mucho sentido utilizar ASP para escribir pginas de
contenido esttico, aunque se puede hacer. La verdadera utilidad se
descubre cuando tenemos que construir aplicaciones complejas,
como dialogar con una base de datos: en ese trabajo, ASP se
muestra capaz de resolver casi cualquier cosa que podamos
necesitar de forma rpida y sencilla (hasta donde ello es posible),
pudiendo adems elegir el lenguaje ms apropiado para cada cosa;
por ejemplo podremos: avanzar o retroceder registro a registro en
una tabla, paginar grupos de registros en una consulta, filtrar
cualquier tipo de datos de un formulario, escribir y leer en ficheros
externos a la DB, realizar clculos numricos con coma flotante,
manipular cadenas de texto, generar cualquier tipo de apariencia
HTML, aadir, modificar o eliminar registros de una tabla, etc., etc.
Para escribir pginas ASP, solo necesitamos, como viene siendo
habitual en esta obra, un sencillo editor de textos como el bloc de
notas, aunque en esta ocasin sera preferible contar con un editor
algo ms avanzado que provea de numeracin de lneas, ya que el
debugger (programa de depuracin de errores) de ASP emite sus
mensajes de error indicando el nmero de lnea del programa donde
se produce el fallo.
Una pgina ASP es un fichero de slo texto que contiene las
secuencias de comandos del lenguaje elegido, junto con el HTML
necesario, y que se guarda con la extensin .asp
Al ser llamado por el navegador, el motor ASP del IIS se encarga
automticamente de depurarlo y ejecutarlo como se suele hacer
con un programa cualquiera, pero cuya salida siempre ser a travs
del navegador que le invoca. El lenguaje de secuencia de comandos
predeterminado del IIS es el VBScript, aunque puede cambiarse.

Hasta aqu la cosa no parece muy complicada, y que todo se va a


limitar a usar algunos comandos nuevos, pero es porque todava no
hemos hablado de lo que realmente le da potencia al lenguaje de
secuencias de comandos que utilicemos, sea indistintamente
VBScript o JavaScript: los objetos y componentes de ASP. En
efecto, VBScript o JavaScript no tienen funciones intrnsecas que
les permitan acceder a datos, pero s son capaces de utilizar los
objetos y componentes de ASP para este fin.... y con esto
comienzan las dificultades de programacin. Ya no se trata de
utilizar un comando cualquiera y recoger el resultado, el uso de
objetos es algo bastante ms complicado.... y seguramente ya te
estars preguntando que ser eso de "objetos" y "componentes"....
Para definir los objetos hara falta todo un libro, as que nos
limitaremos a considerarlos como unos elementos a los que se puede
recurrir desde ASP y que nos ahorrarn tener que escribir gran
cantidad de cdigo para, por ejemplo, conectar con una base de
datos, o leer un fichero cualquiera. Nos limitaremos aqu a saber de
qu objetos podemos disponer y para qu sirven. Pero el ASP no
funciona slo con los objetos; tenemos todos los comandos del
VBScript, JScript, o Perl que nos permitirn manipular y controlar
de mil maneras los datos (siempre en el servidor, recuerda). Pero
antes de utilizar todas estas herramientas, veamos en que consiste
una pgina ASP sencilla.

Cmo se escribe el ASP?


Una pgina ASP sencilla

Una pgina ASP se escribe igual que una HTML normal, y es muy
parecida a las escritas para el IDC, ya que las secuencias de
comandos se escriben entre los smbolos <% y %>pero dando a
los ficheros la extensin .asp
<%@ LANGUAGE="VBScript" %>
<HTML>
<HEAD><TITLE>Prueba de ASP</TITLE></HEAD>
<BODY>
Bienvenidos al ASP. Son las <% Response.Write( Time() ) %>

</BODY>
</HTML>
El cdigo de arriba es una sencilla muestra de ASP. Como puedes
ver, salvo la primera y la quinta lneas no tiene nada que no
conozcamos ya. Analicemos esas dos lneas:
La primera es la definicin del lenguaje de comandos que vamos a
utilizar, en este caso VBScript; la arroba que hay al principio (@)
indica que la pgina se debe ejecutar en el servidor y no en el
navegador, que slo debe recibir el resultado.
En la quinta lnea ya tenemos un objeto (Response -respuesta-) con
uno de sus mtodos (Write -escribir-). El objeto Response es el que
gestiona la salida para el navegador, y su mtodo Write el
encargado de escribir esa salida, dicho de otro modo, el
conjunto Response.Write() escribir en la pantalla del cliente el
resultado generado por los comandos ASP, en este caso la hora
proporcionada por la funcin Time()
Fjate en que el valor real de la quinta lnea es compuesto: por una
parte est la frase "Bienvenidos al ASP. Son las " y por otro una
secuencia de comandos que da la hora del servidor. El motor ASP se
encargar de ejecutar los comandos y componer el texto final con
las dos cosas antes de enviarlas al navegador del cliente.
Response.Write() es muy utilizado en ASP, ya que cualquier
variable, valor o cadena de texto tiene que ser visualizada mediante
este objeto, para abreviar se puede usar el signo igual (=) con el
mismo resultado. En nuestro ejemplo de la quinta lnea podra ser:
Bienvenidos al ASP. Son las <% = Time() %>
Response.Write() no slo muestra el resultado de funciones
como Time() (hora), Date() (fecha), o cualquier otra; podemos
escribir cualquier valor para que sea visualizado, como cadenas de
texto puras, cadenas concatenadas con constantes, funciones
anidadas, variables de sesin, variables de aplicacin, respuestas de

otros objetos, cdigo HTML, etc., etc., y por supuesto, podemos


invocar el objeto Response tantas veces como sea necesario.
En el caso de que se quieran presentar dos datos concatenados
(enlazados, unidos) en HTML, simplemente escribiramos uno al lado
del otro, pero en ASP hay que echar mano de un carcter especial:
el ampersand (&). As. en el ejemplo, si en lugar de presentar slo la
hora, quisiramos ver la hora y el dia, habra que escribir:
Bienvenidos al ASP. Son las <% = Time() & " del dia " & Date()
%>
Si lo que se trata de concatenar es un string (cadena de texto) que
contiene comillas dobles, se puede hacer de dos formas: utilizando
la funcin Chr() o escribiendo dos pares de comillas en lugar de
uno.
Por ejemplo si queremos concatenar la cadena: Esto es un con la
cadena "string" que va entrecomillada, se escribir:
<% = "Esto es un "& "" string "" %>
O tambin:
<% = "Esto es un " & Chr(34) & " string " & Chr(34) %>
Y en ambos casos este sera el resultado:
Esto es un "string"
El argumento 34 que se le ha dado a la funcin Chr() es el que le
corresponde al carcter que queremos obtener, segn la tabla de
caracteres, que puedes consultar en este mismo manual. Este truco
puede utilizarse para obtener cualquier carcter, pero sobre todo
est indicado cuando hay que enviar caracteres especiales al
cliente, pero no queremos que sean interpretados por l, tales
como " % & y otros.
Otro truco que se utiliza al escribir ASP, es el truncamiento de
lneas. Por ejemplo, si tienes que escribir una lnea de comandos o

strings que es muy larga, para evitar que el editor tenga que hacer
scroll (desplazarse) por la derecha, cosa que dificulta despus la
lectura y revisin del cdigo escrito, se puede utilizar el carcter
de subrayado para indicar a ASP que la lnea que viene justo debajo
debe ser considerada como una misma lnea. As
<%
Response.Write("Este es un string de muestra que hay que
concatener con otro, pero es demasiado largo y " & _
"recurriremos al carcter _ para que resulte ms legible")
%>
Recuerda que entre la primera y la segunda lnea no puede haber
ninguna en blanco, ni tampoco un comentario; tienen que estar
juntas. Se puede utilizar el truncamiento cuantas veces sea
necesario. Como ya habrs visto, siempre que se utilizan strings
(cadenas de texto), hay que escribirlas entre comillas dobles ("). Si
se trata de nmeros no hay que escribirlos entrecomillados, y si se
trata de fechas, se escriben entre smbolos #. En el siguiente
ejemplo se representan un string, un nmero y una fecha, por ese
orden:
<%
Response.Write( "Esto es un texto" )
Response.Write( 50 )
Response.Write( #02/28/2000# )
%>
Y a propsito de las fechas, en ASP y VBScript, el nico formato
reconocido es INGLES-ESTADOS UNIDOS, sin tener en cuenta la
configuracin regional del usuario. Es decir, el formato que se
reconoce es mm/dd/aaaa. As en el ejemplo de arriba, tenemos el
da 28 de Febrero de 2000. Lo que obliga a realizar las
conversiones necesarias para el formato europeo de dd/mm/aaaa.

Un poco de programacin

Ahora que ya sabes cmo es bsicamente una pgina ASP, veamos


cual es la mejor manera de no perderse al escribir aplicaciones
complejas.
Al igual que cuando se disea una pgina html cualquiera, hay que
tener claro lo que se quiere hacer.... pues con ASP mucho ms. Un
cambio de idea en HTML no suele dar demasiados problemas, pero
un cambio de idea en programacin en general y en ASP en
particular, puede acabar obligando a reescribir la aplicacin... lo
malo es que esto puede suceder muy a menudo...
Como ya se ha dicho, la programacin de gestin es algo que tiende
al caos con pasmosa rapidez, y el cambio de criterios salta cuando
menos lo esperas. Para evitar en lo posible el tener que reescribir
constantemente los programas, lo mejor es escribirlos de forma
estructurada, es decir, evitar en lo posible escribir cdigo en la
forma "todo revuelto", y si hay que hacer algun cambio, que sea
posible limitarlo a invocar una rutina en lugar de otra. Sera como
construir el programa con piezas prefabricadas, donde cada una de
las cuales hace una cosa diferente. En realidad en esa misma idea
estan basados los objetos a los que se ha hecho referencia antes.
Adems de construir rutinas o mdulos de programa, podemos
escribir partes del texto HTML de uso repetitivo (por ejemplo
mensajes de error, formularios, textos de ayuda, cabeceras de
publicidad, membretes, etc.) en ficheros aparte, e incluirlos cuando
sea necesario. Esto tiene varias ventajas: Se simplifica el
mantenimiento del programa, slo hay que escribir el texto en
cuestin una vez, si luego hay que cambiarlo, no es necesario
ponerse a "bucear" entre cientos de lneas... y dejarnos siempre
alguna sin cambiar: con editar un solo fichero realizamos el cambio
en todas partes. Para esto se utilizan las includes de ASP.
Imagina que al ejemplo ASP del principio, fuera necesario ponerle
algun prrafo adicional, como el logo de la empresa o cualquier otra
cosa: Slo tenemos que escribir un fichero con el texto o cdigo
necesario, y guardarlo con la extensin .inc, aunque tambin pueden

guardarse con la extensin .asp igual que el fichero principal. Los


ficheros de inclusin pueden ser de dos clases: file y virtual. Se
escriben igual, pero los primeros se referencian mediante su
ruta real en el disco del servidor, por ejemplo:
"C:\asp\aplicaciones\logo.inc"
y los segundos mediante su
ruta virtual en el rbol del web, como
"/miapliacacion/includes/logo.inc" La llamada a una include se
escribe como un comentario de HTML. Esta es la sintaxis de una
include virtual en el ejemplo anterior:
<%@ LANGUAGE="VBScript" %>
<HTML>
<HEAD><TITLE>Prueba de ASP</TITLE></HEAD>
<BODY>
<!--#include virtual="/miapliacacion/includes/logo.inc"-->
Bienvenidos al ASP. Son las <% Response.Write( Time() ) %>
</BODY>
</HTML>
Cuando el motor ASP detecta una include, busca el fichero en la
ruta que se haya especificado, inserta su contenido en lugar de la
instruccin, y continua con el resto de comandos secuencialmente.
Si se produce un error en el cdigo de una include, el debugger nos
dar el nmero de lnea como si su contenido hubiese estado escrito
en el fichero principal. Los ficheros de inclusin no tienen los
elementos tpicos del HTML como <BODY>, <HEAD>, etc., eso debe
ir en el fichero principal. Las includes son simples trozos del cdigo
que se guardan en otros ficheros, y aunque no veamos su contenido
al editar el fichero principal, ASP los lee y depura como si
solamente hubiese un nico fichero.
ATENCION: Los ficheros de includes tienen un grave problema de
seguridad si se guardan con la extensin .inc. Como ya sabemos, el
IIS no muestra el cdigo interno de un fichero .asp, sino que lo
ejecuta como un programa, y es el HTML resultante de esa
ejecucin, realizada dentro del servidor, lo que se envia al cliente.
Esto no ocurre con los ficheros .inc, de forma que si un cliente

conoce la ruta donde reside un fichero .inc, y lo solicita, el servidor


se lo enviar sin ejecutarlo previamente, por lo que se podr ver el
cdigo fuente. Si el fichero de include contiene claves de acceso a
bases de datos, o alguna otra informacin confidencial, sta
quedar al descubierto. As pues, los ficheros con extensin .inc
solamente deben utilizarse para contenidos "tontos", como
cabeceras, grficos, botonerias, logos, etc., y si contienen cdigo
sensible, se deben guardar con la extensin .asp
Otra forma de estructurar las aplicaciones puede ser escribir
mdulos en VBScript o JavaScript de forma independiente, de
manera que el control del programa se escribe en HTML y mediante
comandos Call() se invocan las distintas rutinas o mdulos en el
momento oportuno. Por ejemplo:
<SCRIPT LANGUAGE=VBScript RUNAT=Server>
Public Sub Rutina_hora
'------Aqui se obtiene la hora
Response.Write( Time() )
End Sub
</SCRIPT>
<HTML>
<HEAD><TITLE>Prueba de ASP</TITLE></HEAD>
<BODY>
Bienvenidos al ASP. Son las <% Call(Rutina_hora) %>
</BODY>
</HTML>
En este caso el mdulo Rutina_hora es muy sencillo, pero si la
aplicacin tiene 15 20 mdulos de un montn de lneas cada uno,
esta forma de escribir te permite ver ms claramente las cosas.
Con este estilo analizaremos ms adelante una aplicacin completa.
Fjate en que hay algunas diferencias entre este ejemplo y el
anterior, aunque hacen lo mismo. Concretamente en la primera lnea
ha desaparecido la arroba que indicaba la ejecucin del cdigo en el
servidor. Ahora se indica tambin, pero con la

instruccin RUNAT=Server. Otra cosa interesante est en la


tercera lnea: '------Aqui se obtiene la hora Esto es un
comentario. En efecto, en el entorno de VBScript, los comentarios
no se escriben como en HTML, sino escribiendo un apstrofe
(' OJO esto no es un acento) y a continuacin el texto que se desea
comentar. La indicacin de comentario ser efectiva hasta que se
escriba un retorno. Se pueden (y se deben) escribir cuantos
comentarios se estimen necesarios. El servidor ignorar el texto
marcado como tal en el momento de la ejecucin del programa.
El cliente no recibir nada de esto, ya que todo ocurre en el
servidor. El cliente solamente recibe esto:
<HTML>
<HEAD><TITLE>Prueba de ASP</TITLE></HEAD>
<BODY>
Bienvenidos al ASP. Son las 18:00:00
</BODY>
</HTML>

Un modelo de aplicacin ASP


La estructura modular

Supongamos que se desea escribir una aplicacin que permita, via


internet, matricularnos en una serie de cursos o conferencias,
guardando las matrculas en una base de datos (DB), y para evitar
errores, realizar un filtrado previo de los mismos antes de
escribirlos en la DB. Esquemticamente sera algo as:

El grfico anterior es lo que se llama un diagrama de flujo, estos


dibujos son muy tiles a los analistas cuando tienen que disear un
programa, y nos servir para analizar nuestra aplicacin. Fjate en
la estructura. Vers que algunos mdulos se repiten y otros se
reutilizan constantemente en los bucles de control. Es evidente que
sin una estructura modular, sera muy complicado escribir el
programa, adems de tener que escribir el mismo mdulo varias
veces.

Nociones de ASP
Algunos conceptos previos

Se consideran como partes de la aplicacin todos aquellos ficheros


que residan en el directorio virtual declarado en la consola del IIS,
incluidos los ficheros de inclusin (.inc), donde no deben ponerse
otros ficheros, ni por supuesto, dos aplicaciones distintas en el
mismo directorio. Esto no quiere decir que toda la aplicacin tiene
que estar escrita en un mismo fichero; pueden utilizarse los que
sean precisos.
Existe un fichero especial, que tiene que estar en el directorio
donde resida la aplicacin, llamado global.asa y tiene que llamarse
as para que funcione. Sobre este fichero se pueden detectar
algunos eventos de los objetos Application y Session. He aqu un
ejemplo de fichero global.asa:
<SCRIPT LANGUAGE=VBScript RUNAT=Server>
Sub Session_OnStart
End Sub
Sub Session_OnEnd
End Sub
Sub Application_OnStart
End Sub
Sub Application_OnEnd
End Sub

</SCRIPT>
Como puedes ver, no tiene ms que cuatro rutinas que sirven para
detectar cuando est activa la aplicacin y cuando un usuario abre o
termina una sesin, que aunque no lo parezca, son cuatro sucesos
clave para la buena marcha del servidor. En efecto: el suceso (o
evento, es lo mismo) Application_OnStart, slo se disparar cuando
el primer usuario solicite una pgina contenida en el directorio
virtual de la aplicacin (uno cualquiera, no importa cual), y a
continuacin se dispara Session_OnStart. Cuando otros usuarios
soliciten otras pginas, o la misma, ya no se disparar el primer
evento, sino slo el Session_OnStart, que se activar tantas veces
como usuarios haya conectados a la aplicacin. Cuando un usuario
cierra la aplicacin voluntariamente, o bien transcurre un tiempo
predefinido sin hacer ninguna transaccin, se
disparar Session_OnEnd, y cuando se haya desconectado el ltimo
usuario, lo har Application_OnEnd.
Las pginas ASP exigen mucho ms trabajo al servidor, y es
fundamental conocer cuantas sesiones hay abiertas, ya que hay que
asignarles recursos de sistema, y estos recursos son finitos.
Adems de los recursos, como memoria, tiempo de proceso, etc.,
que se asigna a cada sesin, el servidor necesita tener cierta
informacin de cada cliente, para, de forma inequvoca, poder
asegurar que los datos que envia son los de ese cliente y no los de
otro cualquiera. Recuerda que aqu, normalmente, no estamos
enviando pginas de contenido esttico, en cuyo caso no importara
si se dialoga con un cliente u otro, ya que todos reciben lo mismo,
sino que se trata de un dilogo personalizado, y cada transaccin
termir en una base de datos.
Adems de controlar las conexiones, el fichero global.asa puede
utilizarse para generar variables de sesin o de aplicacin que sern
invocadas en diversos momentos del proceso. Por ejemplo, si
queremos mostrar un mensaje de advertencia a los usuarios del
navegador IE 5.0, sobre su prestacin de memorizar el contenido

de los formularios, podramos generar una variable de sesin, para


invocarla en el inicio de la aplicacin :
Sub Session_OnStart
navegador = InStr( 1, Request.ServerVariables("HTTP_USER_AGENT"),
"MSIE" )
If navegador > 0 Then
If InStr( navegador, Request.ServerVariables("HTTP_USER_AGENT"), "
5." ) > 0 Then
Session("IE5") = "si"
End If
End If
End Sub

Ahora slo tenemos que escribir un fichero de inclusin parecido a


este:
ATENCIN:
El navegador que est utilizando puede dejar sus datos a la vista de otros usuarios de este
ordenador debido a la propiedad AutoCompletar.

Y para que aparezca (o no), escribir en la pgina inicial de la


aplicacin algo as:
<% If Session("IE5") = "si" Then %>
<!--#include virtual="/miaplicacion/includes/ie.inc"-->
<% End If %>
Al igual que hemos creado la variable Session("IE5") podemos crear
todas las que sean necesarias, y que requieran estar ya disponibles
en el momento de dialogar con el cliente, distinguiendo bien entre
las que afectan a cada sesin y las generales para toda la aplicacin.
Las variables, tanto de sesin como de aplicacin, no es necesario
definirlas previamente como suele hacerse en programacin. En el
momento de asignarles un valor ya estan creadas y disponibles.
Otra particularidad, es que no tienen tipo de datos (como numrico,
texto, etc.) y siempre son del tipo llamado en Visual Basic Variant,
lo que significa que la variable tiene el tipo del dato que se le asigna
sin necesidad de ninguna definicin adicional.
Lo que hasta aqu se ha llamado "variables", en realidad son dos de
los siete objetos de que dispone ASP. Veamos cuales son.

Los elementos bsicos del ASP

ASP en s mismo proporciona siete elementos llamados objetos.


Estos elementos, a un nivel sencillo, podemos considerarlos como
unas herramientas, ms o menos complicadas de manejar en funcin
de su utilidad. Cada una est diseada para unas funciones
concretas, y para llegar a todas sus funcionalidades habr que
echar mano de otros sub elementos tales como: mtodos,
propiedades, colecciones y eventos.. S, me lo tema.... esto no est
muy claro... A ver as:
Un rato de bricolage

Bien, imagina que tienes entre las manos un fastuoso cajn de


herramientas que te regalaron por tu cumpleaos. Es magnfico,
tiene de todo: taladro, lijadora, destornilladores, llaves inglesas,
martillo.... es decir, tiene un montn de objetos. Y tenemos una
tarea que realizar: colgar un cuadro de la pared. Esta ser
tu sesin de trabajo.
Piensa cmo vas a colgar el cuadro. Clavas un clavo en la pared y
listos, o haces un agujero y le pones un taco? Ests eligiendo
un mtodo. Como el cuadro pesa bastante, te decides por el mtodo
del taco.
Evidentemente, hay que elegir la herramienta adecuada. Fcil:
necesitas el taladro. Acabas de elegir un objeto. Tu taladro tiene
dos propiedades: percutor para taladrar la pared, o sin percutor
para taladrar otras cosas.
Haces el agujero en la pared. Intentas meter el taco en el agujero...
y como Murphy no poda faltar a la cita, no cabe. Hay que hacer el
agujero ms grande. Para ello tienes que cambiar la broca, en suma,
ests haciendo uso de la coleccin de brocas que tienes para
el objeto taladro.
Mientras agrandas el agujero, suena el timbre de la puerta. Acaba
de ocurrir un evento: con tanto ruido has despertado a tu vecino... y
viene a agradecrtelo.
Ms claro ahora? Entonces veamos los famosos objetos, aunque
debes tener claro que posiblemente, algunos de ellos o sus

propiedades y colecciones, no los utilizars nunca aunque esten ah.


No es buena idea escribir programas intentando modificar o utilizar
todo aquello que sea modificable o utilizable, por el simple hecho de
impresionar con tu sabidura al cliente o justificar unas horas de
trabajo adicionales, tarde o temprano, eso se volver en tu contra...
no olvides que Murphy no se toma vacaciones. Lo sencillo siempre
funciona mejor que lo complicado, y si una cosa es simple, pues
mucho mejor que si no lo es. No pierdas el tiempo complicando lo
que no es complicado.
Los objetos de ASP

Existen siete objetos en ASP:

Application
ASPError
Session
Request
Response
Server
ObjectContext

El objeto Application
El objeto Application sirve para compartir, almacenar y recibir
informacin en respuesta a las llamadas recibidas desde los clientes
de los usuarios de la aplicacin. Cualquier informacin que se
almacene en este objeto estar disponible para TODOS los
usuarios de la aplicacin.
El objeto Application tiene 2 colecciones, 4 mtodos y 2 eventos:
COLECCIONES
Application.Contents()

Contiene (de ah su nombre) una coleccin de todos los items que


han sido creados y aadidos al objeto Application. Los items se
pueden aadir a la lista mediante asignacin directa de variables, o
bien con el objeto Server y su mtodo CreateObject.

Puede obtenerse una lista completa mediente un bucle del tipo For
Each item in ... Next. Veamos como funciona:
<%
Application("Variable") = "Esto no es un objeto"
Set Application("Objeto") = Server.CreateObject("ADODB.Connection")
For Each Item in Application.Contents
If IsObject(Application.Contents(Item)) Then
Response.Write Item & " = Esto es un objeto.<BR>"
Else
Response.Write Item & " = " & Application.Contents(Item) &
"<BR>"
End If
Next
%>

Y este sera el resultado:


Nombre del item
Contenido
----------------------------------------Variable
= Esto no es un objeto
Objeto
= Esto es un objeto.
Application.StaticObjects()

Esta es una coleccin de todos los items creados en el objeto


Application utilizando un elemento HTML: <OBJECT> En este
caso, la asignacin de valores a los items no se hace desde cdigo
ASP, sino en HTML y desde el fichero global.asa
Al igual que en la coleccin anterior, puede mostrarse su contenido
mediante un bucle For Each item in ... Next.
'---fichero global.asa
<OBJECT RUNAT=Server SCOPE=Application ID=MiConexion
PROGID="ADODB.Connection">
</OBJECT>
'---fichero.asp
<%
For Each Item In Application.StaticObjects
Response.Write Item & "<BR>"
Next
%>

Y este sera el resultado:


MiTexto
MiConexion

METODOS

Application.Contents.Remove()

Versin 3 o superior.
Este mtodo se utiliza para eliminar un item especfico de la
coleccin Application.Contents. El item que se desea eliminar puede
referenciarse de dos maneras: por su nombre o por su nmero
dentro de la coleccin, teniendo presente que la numeracin
comienza en el 1. Si se referencia por su nombre, ste deber
escribirse entre comillas dobles("). Por ejemplo:
<%
Application("Variable") = "Esto no es un objeto"
Set Application("Objeto") = Server.CreateObject("ADODB.Connection")
Application.Contents.Remove(1)
Application.Contents.Remove("Variable")
For Each Item in Application.Contents
If IsObject(Application.Contents(Item)) Then
Response.Write Item & " = Esto es un objeto.<BR>"
Else
Response.Write Item & " = " & Application.Contents(Item) &
"<BR>"
End If
Next
%>

Y este sera el resultado:


Nombre del item
Contenido
----------------------------------------Objeto
= Esto es un objeto.
Application.Contents.RemoveAll()

Versin 3 o superior.

Como su nombre indica, este mtodo elimina TODOS los items de la


coleccin Application.Contents().
En este caso no hay que referencia ningun nombre ni nmero.
<%
Application.Contents.RemoveAll( )
%>

Application.Lock

Application.Unlock

El mtodo Application.Lock previene que el


objeto Application cambie de valor mientras est siendo utilizado.
En efecto, si el objeto ha recibido un valor, que por ejemplo es
necesario para hacer un clculo matemtico, y otro usuario de la
aplicacin lo cambia antes de que se lleven a cabo todas las
operaciones, el clculo fallara. Una vez concluidas las operaciones
hay que volver a liberarlo con el mtodo Application.UnLock
Salvo en muy especiales ocasiones, no es recomendable utilizar el
objeto Application para que contenga valores variables para cada
usuario. Es preferible dejar este objeto para valores fijos, y
utilizar el objeto Session para los valores variables, ya que no se
interfiere con los de otros usuarios.
<%
Application.Lock
Application.UnLock
%>

EVENTOS
Application_OnStart

Application_OnEnd

Estos eventos se controlan en el fichero global.asa, y debe existir


uno por cada aplicacin que se ejecute en el servidor, cada uno en el
directorio virtual donde sta resida. El
evento Application_OnStart ocurre antes de comenzar cualquier
sesin de usuario.
'---fichero global.asa
<SCRIPT LANGUAGE=VBScript RUNAT=Server>
Sub Session_OnStart
End Sub
Sub Session_OnEnd
End Sub
Sub Application_OnStart
End Sub
Sub Application_OnEnd
End Sub
</SCRIPT>

Como puedes ver, contiene cuatro rutinas que sirven para detectar
cuando est activa la aplicacin y cuando un usuario abre o termina
una sesin. El suceso (o evento, es lo mismo)Application_OnStart,
slo se disparar cuando el primer usuario solicite una pgina
contenida en el directorio virtual de la aplicacin, y a continuacin
se dispara Session_OnStart. Cuando otros usuarios soliciten otras
pginas, o la misma, ya no se disparar el primer evento, sino slo
el Session_OnStart, que se activar tantas veces como usuarios
haya conectados a la aplicacin. Cuando un usuario cierra la
aplicacin voluntariamente, o bien transcurre un tiempo predefinido
sin hacer ninguna transaccin, se dispararSession_OnEnd, y
cuando se haya desconectado el ltimo usuario, lo
har Application_OnEnd.
Dentro de las rutinas que controlan los eventos del objeto
Application, Application_OnStart y Application_OnEnd puede
programarse cualquier accin que convenga realizar en ese
momento. Por ejemplo, asignar valores fijos para toda la aplicacin,
declarar el texto de algunos mensajes en funcin de la fecha o la
hora, etc., etc... o simplemente no hacer nada.

El objeto ASPError
Version 3 o superior.
El objeto ASPError sirve para obtener informacin detallada de
una condicin de error producida durante la ejecucin de la
aplicacin. Esta informacin se obtiene de 9 propiedades de slo
lectura, a las que solamente es posible acceder a travs del
objeto Server y su mtodo GetLastError
El objeto ASPError tiene 9 propiedades que pueden verse as:
<%
Dim objErrorInfo
Set objErrorInfo = Server.GetLastError
Response.Write("ASPCode = " & objErrorInfo.ASPCode)
Response.Write("ASPDescription = " & objErrorInfo.ASPDescription)
Response.Write("Category = " & objErrorInfo.Category)
Response.Write("Column = " & objErrorInfo.Column)
Response.Write("Description = " & objErrorInfo.Description)

Response.Write("File =
Response.Write("Line =
Response.Write("Number
Response.Write("Source
%>

"
"
=
=

&
&
"
"

objErrorInfo.File)
objErrorInfo.Line)
& objErrorInfo.Number)
& objErrorInfo.Source)

El objeto Session
Cuando un usuario invoca por primera vez cualquiera de los ficheros
de una aplicacin, un objeto Session le es asignado
automticamente. Este objeto ser utilizado por la aplicacin para
almacenar, compartir y recibir informacin del usuario. A
diferencia del objeto Application, la informacin almacenada
en Session solamente estar disponible para el usuario que lo tenga
asignado. Por defecto, el objeto ser destruido despus de 20
minutos de inactividad, pero puede configurarse un tiempo
diferente, y es buena idea reducirlo si el servidor tiene mucha
carga, a fin de que libere los recursos asignados al usuario cuanto
antes, pero calculando cuidadosamente el tiempo que el usuario
puede necesitar para llevar a cabo sus transacciones. Si se acorta
en exceso, el servidor puede cerrar la sesin antes que el usuario
termine lo que est haciendo.
Puede ocurrir que no sea necesario establecer sesion con los
usuarios, por ejemplo, si el contenido de la pgina es esttico o no
precisa enviar cookies. Para evitar que ASP abra una sesion basta
con escribir en la primera lnea de la pgina lo siguiente: <%@
EnableSessionState=False%>

El objeto Session tiene 4 propiedades, 2 colecciones, 3 mtodos y


2 eventos:
PROPIEDADES
Session.CodePage

Versin 3 o superior.
Esta propiedad especifica al servidor que pgina de cdigo de
caracteres debe utilizar para mostrar las pginas ASP invocadas
desde el cliente. Por defecto, y si no se define otro valor para esta

propiedad, el servidor utilizar la pgina predeterminada en el


sistema. El cambio de pgina solamente estar activo el tiempo que
dure la sesin. Esta propiedad puede ser muy til para convertir
textos escritos en una lengua diferente a la que utilizan los
clientes. Por ejemplo, un texto escrito en espaol, con acentos
(code 850), no utiliza la misma pgina de caracteres que un cliente
de habla inglesa, que no tiene acentos (code 437).
Veamos cmo utilizarla:
<% '---Se guarda el cdigo de pgina original
Session("CodOriginal") = Session.CodePage
'---El NuevoCod es recibido desde un formulario y Texto es el texto
que se ha capturado en el mismo formulario
Nuevocod = Request.Form("NuevoCod")
Texto = Request.Form("Lo_que_hay_que_convertir")
'--- Se establece el nuevo cdigo y la funcin FindTranslation() se
encarga de buscar la conversin adecuada
Session.CodePage = NuevoCod
Conversion = FindTranslation(Texto, Nuevocod)
If Conversion <> "" Then
Session.CodePage = Session("CodOriginal")
Response.Write "La conversin de " & Texto & " es "
Session.CodePage = NuevoCod
Response.Write Conversion
End If
%>

Session.LCID

La propiedad LCID utiliza el nmero identificador de localizacin


para dar en varios formatos, la fecha, hora y localizador
especficos de un lugar o regin. El nmero identificador de
localizacin nicamente define una situacin geogrfica. Por
ejemplo el identificador de Espaa es el 2048, el de Francia es el
1036, etc.
<%
Response.Write
"<BR>"
Response.Write
NOW() & "<BR>"
Session.LCID =
Response.Write
"<BR>"
Response.Write

"Este es el LCID para esta pgina " & Session.LCID &


"Este es el formato fecha y hora para el LCID: " &
1033
"Este es el LCID para esta pgina " & Session.LCID &
"Este es el formato fecha y hora para el LCID: " &

NOW() & "<BR>"


Session.LCID = 3079
%>

Y este sera el resultado:


Este
Este
Este
Este

es
es
es
es

el
el
el
el

LCID para esta pgina 2048


formato fecha y hora para el LCID: 3/9/2001 14:56:07
LCID para esta pgina 1033
formato fecha y hora para el LCID: 9/3/01 2:56:07 PM

Session.SessionID

Proporciona un identificador de sesin para el usuario actual. Este


identificador es generado por el servidor, y consiste en un nmero
del tipo largo (long)
Se obtiene as:
<% Response.Write "Tu nmero de sesin es: " & Session.SessionID %>

Y este podra ser el resultado:


Tu nmero de sesin es: 465107831

Session.Timeout

Especifica el nmero de minutos que tienen que pasar, mientras la


sesin est inactiva, para darla por terminada, siendo el valor por
defecto de 20 minutos. Esto significa que si el usuario no refreesca
la pgina, solicita otra o hace cualquier transaccin la sesin es
automticamente cerrada y los recursos que tuviese asignados,
recuperados. Este tiempo tambin es posible establecerlo de forma
fija en las configuraciones de la aplicacin en el propio IIS.
Por ejemplo, para establecer el Timeout en 35 minutos, se escribe:
<% Session.Timeout = 35 %>

COLECCIONES

Session.Contents()

Contiene (de ah su nombre) una coleccin de todos los items que


han sido creados y aadidos al objeto Session. Los items se pueden
aadir a la lista mediante asignacin directa de variables, o bien con
el objeto Server y su mtodo CreateObject.
Puede obtenerse una lista completa mediente un bucle del tipo For
Each item in ... Next. Veamos como funciona:
<%
Session("Variable") = "Esto no es un objeto"
Set Session("Objeto") = Server.CreateObject("ADODB.Connection")
For Each Item in Session.Contents
If IsObject(Session.Contents(Item)) Then
Response.Write Item & " Esto es un objeto.<BR>"
Else
Response.Write Item & " = " & Session.Contents(Item) & "<BR>"
End If
Next
%>

Y este sera el resultado:


Nombre del item
Contenido
----------------------------------------Variable
= Esto no es un objeto
Objeto
= Esto es un objeto.
Session.StaticObjects()

Esta es una coleccin de todos los items creados en el objeto


Session utilizando un elemento HTML: <OBJECT> En este caso,
la asignacin de valores a los items no se hace desde cdigo ASP,
sino en HTML y desde el fichero global.asa
Al igual que en la coleccin anterior, puede mostrarse su contenido
mediante un bucle For Each item in ... Next.
---fichero global.asa
<OBJECT RUNAT=Server SCOPE=Session ID=MiConexion
PROGID="ADODB.Connection">
</OBJECT>
---fichero.asp
<%
For Each Item In Session.StaticObjects
Response.Write Item & "<BR>"
Next
%>

Y este sera el resultado:


MiTexto
MiConexion

METODOS
Session.Abandon

Este mtodo termina una sesin de usuario, destruye todos los


objetos de la sesin y recupera los recursos asignados. Hay que
tener en cuenta, que el fin de la sesin no ocurre efectivamente,
hasta que no se han ejecutado todos los comandos que hay en la
pgina actual. Cuando la sesin por fin termina, se dispara el evento
del fichero global.asa OnEnd
Se escribe:
<%
Session.Abandon
%>

Session.Contents.Remove()

Versin 3 o superior.
Este mtodo se utiliza para eliminar un item especfico de la
coleccin Session.Contents. El item que se desea eliminar puede
referenciarse de dos maneras: por su nombre o por su nmero
dentro de la coleccin, teniendo presente que la numeracin
comienza en el 1. Si se referencia por su nombre, ste deber
escribirse entre comillas dobles("). Por ejemplo:
<%
'---Se crean dos items
Session("Variable") = "Esto no es un objeto"
Set Session("Objeto") = Server.CreateObject("ADODB.Connection")
Session.Contents.Remove(1)
Session.Contents.Remove("Variable")
For Each Item in Session.Contents
If IsObject(Session.Contents(Item)) Then
Response.Write Item & " Esto es un objeto.<BR>"
Else
Response.Write Item & " = " & Session.Contents(Item) & "<BR>"
End If

Next
%>

Y este sera el resultado, en el que el item Session("Variable") ha


sido eliminado:
Nombre del item
Contenido
----------------------------------------Objeto
= Esto es un objeto.
Session.Contents.RemoveAll()

Versin 3 o superior.
Como su nombre indica, este mtodo elimina TODOS los items de la
coleccin Session.Contents().
En este caso no hay que referencia ningun nombre ni nmero.
<%
Session.Contents.RemoveAll( )
%>

EVENTOS
Session_OnStart

Session_OnEnd

Estos eventos se controlan en el fichero global.asa, y debe existir


uno por cada aplicacin que se ejecute en el servidor, cada uno en el
directorio virtual donde sta resida. El
evento Session_OnStart ocurre justo antes de que el servidor
haya creado el objeto Session.
'---Fichero global.asa
<SCRIPT LANGUAGE=VBScript RUNAT=Server>
Sub Session_OnStart
End Sub
Sub Session_OnEnd
End Sub
Sub Application_OnStart
End Sub
Sub Application_OnEnd
End Sub
</SCRIPT>

Como puedes ver, contiene cuatro rutinas que sirven para detectar
cuando est activa la aplicacin y cuando un usuario abre o termina
una sesin. El suceso (o evento, es lo mismo)Application_OnStart,
slo se disparar cuando el primer usuario solicite una pgina
contenida en el directorio virtual de la aplicacin, y a continuacin
se dispara Session_OnStart. Cuando otros usuarios soliciten otras
pginas, o la misma, ya no se disparar el primer evento, sino slo
el Session_OnStart, que se activar tantas veces como usuarios
haya conectados a la aplicacin. Cuando un usuario cierra la
aplicacin voluntariamente, o bien transcurre un tiempo predefinido
sin hacer ninguna transaccin, se dispararSession_OnEnd, y
cuando se haya desconectado el ltimo usuario, lo
har Application_OnEnd.
Dentro de las rutinas que controlan los eventos del objeto
Application, Application_OnStart y Application_OnEnd puede
programarse cualquier accin que convenga realizar en ese
momento. Por ejemplo, asignar valores fijos para toda la aplicacin,
declarar el texto de algunos mensajes en funcin de la fecha o la
hora, etc., etc... o simplemente no hacer nada.
Request

El objeto Request
En ingls, request significa pedir, solicitar. En efecto, la accin de
escribir una direccin cualquiera en la lnea de URL de tu
navegador, se traduce en solicitar un determinado fichero a un
servidor, o dicho en la jerga tcnica, se le hace un request al
servidor. El protocolo que utiliza el navegador (por defecto salvo
que se indique otro, como el FTP) para dialogar con un servidor web
es el llamado HTTP, que como habrs visto figura al principio de
todas las direcciones web. No es necesario escribir el protocolo en
los navegadores modernos, simplemente escribimos la direccin de
la pgina solicitada, y el navegador aade delante de la misma su
protocolo por defecto. Por ejemplo, si escribes:

sestud.uv.es/manual.esp/ el navegador
compone http://sestud.uv.es/manual.esp/
El objeto Request permite el acceso a toda la informacin que pasa
desde el navegador del cliente al servidor. Al recibir esta
informacin, es repartida y almacenada entre cinco colecciones.
Cada coleccin es similar en estructura a una tabla de datos
(tambin llamada matriz de datos o array). Los datos, una vez
cargados, pueden ser accedidos individualmente en cada coleccin a
travs de una nica clave asignada a cada item.
Todas las variables pueden ser accedidas directamente mediante
una llamada del tipo Request(variable) sin mencionar el nombre de
la coleccin. En este caso, el servidor web busca entre todas las
colecciones la clave pedida (variable), buscando por este orden:
QueryString, Form, Cookies, ClientCertificate y
ServerVariables que son las cinco colecciones que tiene el objeto.
El objeto Request tiene 1 propiedad, 5 colecciones y 1 mtodo:
PROPIEDADES
Request.TotalBytes

Esta propiedad, de solo lectura, indica el nmero total de bytes


enviados por el cliente al servidor en el cuerpo de la llamada HTTP.
Se escribe:
'---fichero.htm
<HTML>
<HEAD><TITLE>PRUEBA</TITLE></HEAD>
<BODY>
<FORM ACTION="prueba.asp" METHOD="POST">
Texto:<INPUT TYPE="Text" NAME="texto" VALUE="esto es una prueba"><BR>
<INPUT TYPE="Submit" VALUE="Probar"><BR>
</FORM>
</BODY>
</HTML>
'--fichero prueba.asp
<%
Dim Cuantos
Cuantos = Request.TotalBytes
Response.Write("Se han recibido = " & Cuantos & " bytes")
%>

COLECCIONES
Request.ClientCertificate(clave)

Esta coleccin tiene utilidad si estamos escribiendo una aplicacin


que utiliza el protocolo Secure Socket Layers (SSL). Este
protocolo, que da una mayor seguridad en las transacciones
electrnicas, se invoca con el prefijo https:// en lugar del
tpico http://, y est basado en el envo de certificados
electrnicos del servidor al cliente para asegurar la identidad del
mismo. Como en otras colecciones, es posible listar todos sus items
con un bucle For Each item in ... Next ya vistos en otros objetos.
El argumento clave es un string (cadena de texto) que especifica el
nombre del item que se desea recibir, y hay que escribirlo entre
comillas dobles ("). Un certificado es como un registro que contiene
los siguientes campos:

Certificate Conteniene el certificado completo. Se recibe en


binario.
SerialNumber Contiene el nmero de serie del certificado.
Subject Informacin sobre el sujeto certificado.
Issuer Informacin sobre el emisor del certificado.
ValidFrom Fecha desde la que es vlido el certificado.
ValidUntil Fecha de expiracin del certificado.
Flags Hay dos flags (literalmente "banderas"):
o ceCertPresent Indica que el certificado se recibe de un
cliente conocido.
o ceUnrecognizedIssuer Indica que el certificado se
recibe de un cliente desconocido.

Por ejemplo, para obtener las fechas de validez de un certificado,


se escribe:
<HTML>
<HEAD> <TITLE>Prueba de certificado</TITLE> </HEAD>
<BODY>
El certificado es vlido desde
<%= Request.ClientCertificate("ValidFrom") %> hasta
<%= Request.ClientCertificate("ValidUntil") %>.
</BODY>
</HTML>

Y este sera el resultado:


El certificado es vlido desde 9/30/98 11:59:59 PM hasta 9/30/99
11:59:59 PM.

Request.Cookies(clave)

La coleccin Cookies (literalmente "galleta") asigna datos a un


cookie existente, y si ste no existe, crea uno nuevo donde
almacena estos datos. Y te estars preguntando que es eso de las
"galletas" y dnde estn... No, no es que tu navegador se haya
convertido en un monstruo devorador de galletas. Aclaremos esto
un poco:
Anteriormente se ha dicho que el HTML normal no precisa
informacin especfica sobre las caractersticas de los clientes, ya
que son contenidos estticos iguales para todos ellos, es como leer
un tabln de anuncios; no hay interactividad entre el tabln y el
lector. Todo se reduce a lanzar una peticin del cliente al servidor,
y ste la contesta siempre igual, sin personalizacin alguna.
Pero qu ocurre si se trata de una aplicacin que maneja datos
personales, que slo han de mostrarse al cliente correcto, y que
utiliza varios formularios complejos cuyos datos han de integrarse
en un nico registro? Pues en ese caso, ya no da igual qu cliente
hace las preguntas, y hay que estar seguro de a quien se envian los
datos. Mantener, en cierto modo, una conversacin, conseguir que el
servidor recuerde contnuamente ciertos datos del cliente que le
permitan comportarse de forma un tanto "inteligente", en suma,
personalizando la sesin.
Para eso, ASP establece una sesin individual y personalizada con
cada cliente, almacenando tantas variables de sesin como sea
preciso en el propio servidor, y creando un identificador nico para
cada sesin de un cliente. Este identificador no ha de ser guardado
en el servidor, sino en el cliente, y permitir al servidor reconocer
de forma eficaz a su interlocutor. Los identificadores, junto con
otras informaciones, como el modelo de navegador, versin del
mismo, caractersticas de configuracin que tiene activas, direccin

IP del cliente, etc., se guardan en unos pequeos ficheros de texto


llamados Cookies. Un problema que a menudo surge, es que el
cliente ha deshabilitado la opcin de aceptar cookies en su
navegador, lo que imposibilita el buen funcionamiento de ASP, ya
que no puede guardar los datos del identificador de sesin, cuestin
clave para que todo marche correctamente.
Y ahora que ya sabes algo ms sobre las galletas, veamos como se
utiliza esta coleccin, usando como siempre un bucle:
<%
For Each Item In Request.Cookies
Response.Write Item & " = " & Request.Cookies(Item) & "<br>"
Next
%>

Y este podra ser un resultado, ya que el contenido de la coleccin


no es fijo, depende del navegador del cliente, de la aplicacin, etc.,:
PRD2 = VBScript
PRD1 = ASP
Por defecto, siempre que se invoca una pgina ASP se crea un
objeto Session, pero puede ocurrir que no sea necesario establecer
sesion con los usuarios, por ejemplo, si el contenido de la pgina es
esttico o no precisa enviar cookies. Para evitar que ASP abra una
sesin basta con escribir en la primera lnea de la pgina lo
siguiente:
<%@ EnableSessionState=False%>

Pero recuerda que de esta forma no se pueden generar cookies.


Para saber cmo crear y modificar cookies hay que referirse a las
colecciones del objeto Response

Request.Form("Elemento o indice")[.Count]

El contenido de esta coleccin est formado por todos los


elementos de un formulario tpico escrito en HTML,
donde Elemento es el nombre del elemento del formulario que se
quiere recibir desde el navegador (un campo) y Count contiene el

nmero de elementos. En lugar del nombre del elemento, se puede


escribir su nmero de ndice, comenzando por el 1.
Supongamos que tenemos el siguiente formulario HTML con tres
campos:
'---Fichero formulario.htm
<HTML><HEAD> <TITLE>Prueba1 ASP</TITLE> </HEAD>
<BODY>
<FORM ACTION="prueba2.asp" METHOD="POST">
Nombre:<INPUT TYPE="text" NAME="Nombre" VALUE="Juan Garcia" ><br>
Ciudad:<INPUT TYPE="text" NAME="Ciudad" VALUE="Guadalajara" ><br>
Postal:<INPUT TYPE="text" NAME="Postal" VALUE="12345"
><br>
<INPUT TYPE="Submit" VALUE="Enviar">
</FORM>
</BODY>
</HTML>

Para poder ver el nombre de los campos y sus contenidos se escribe


lo siguiente:
'---Fichero prueba2.asp
<HTML><HEAD> <TITLE>Prueba2 ASP</TITLE> </HEAD>
<BODY>
<%
Response.Write "Nmero de elementos: " & Request.Form.Count & "<BR>"
Response.Write "Nombre: " & Request.Form("Nombre") & "<BR>"
Response.Write "Ciudad: " & Request.Form("Ciudad") & "<BR>"
Response.Write "Postal: " & Request.Form("Postal") & "<BR>"
Response.Write "<P>"
Response.Write "Nombre: " & Request.Form(1) & "<BR>"
Response.Write "Ciudad: " & Request.Form(2) & "<BR>"
Response.Write "Postal: " & Request.Form(3) & "<BR>"
%>
</BODY>
</HTML>

Este sera el resultado:


Nmero de elementos: 3
Nombre: Juan Garcia
Ciudad: Guadalajara
Postal: 12345
Nombre: Juan Garcia
Ciudad: Guadalajara
Postal: 12345

Se puede obtener toda la coleccin de valores de los campos sin


indicar sus nombres, pero no est previsto obtener la coleccin de
los nombres. Si algun nombre de campo existe ms de una vez, sus
valores aparecen juntos separados por comas. Por ejemplo:

'---Fichero link.htm
<HTML><HEAD> <TITLE>Prueba1 ASP</TITLE> </HEAD>
<BODY>
<FORM ACTION="prueba2.asp" METHOD="POST">
Nombre1:<INPUT TYPE="text" NAME="Nombre" VALUE="Juan" ><br>
Nombre2:<INPUT TYPE="text" NAME="Nombre" VALUE="Maria" ><br>
Nombre3:<INPUT TYPE="text" NAME="Nombre" VALUE="Pedro" ><br>
Ciudad:<INPUT TYPE="text" NAME="Ciudad" VALUE="Guadalajara" ><br>
Postal:<INPUT TYPE="text" NAME="Postal" VALUE="12345"
><br>
<INPUT TYPE="Submit" VALUE="Enviar">
</FORM>
</BODY>
</HTML>

Para ver el contenido de los campos sin nombrarlos se escribe lo


siguiente:
'---Fichero prueba.asp
<HTML><HEAD> <TITLE>Prueba2 ASP</TITLE> </HEAD>
<BODY>
<%
Total = Request.Form().Count
For x = 1 To Total
Response.Write( Request.Form(x) & "<br>" )
Next
%>
</BODY>
</HTML>

Este sera el resultado:


Juan,Maria,Pedro
Guadalajara
12345

Request.QueryString("Elemento o indice")[.Count]

El Query String no es otra cosa que el string (cadena de texto) que


se escribe en la ventana de URL del navegador. Es decir, esa en la
que se escribe la direccin del servidor donde est la pgina que
deseamos recibir. Por ejemplo:
http://sestud.uv.es/manual.esp/indice.htm <-- esto es un
Query String
Posiblemente te preguntes cmo hacer una coleccin slo con eso.
Pues en efecto, slo con eso no hay coleccin, pero ASP, y otros
sistemas de script (tambin el IDC, visto en pginas anteriores),
utilizan esa lnea para transportar informacin adicional, y es con

esos datos adicionales con los que se crear la coleccin. He aqu un


ejemplo tpico de Querystring. Analicmoslo:
http://sestud.uv.es/manual.esp/indice.htm?Nombre=Juan+Garcia
&Ciudad=Guadalajara&Postal=12345
Esto ya es otra cosa.... y casi se explica por s mismo. La primera
parte, est claro que es la direccin y no forma parte de la
coleccin. Todo comienza a partir del interrogante (?) que hay
despus de la pgina (indice.htm), que por cierto, debe ser una
pgina .asp o .idc, si es .htm todo esto no funciona, ya que es la
extensin la que indica al servidor que hay cdigo que debe ser
interpretado y ejecutado. Al igual que en la coleccin anterior,
tenemos un nombre de campo: Nombre y a continuacin del signo
igual (=) est su valor: Juan Garcia. Despus aparece el signo (&),
que indica el fin del campo y el comienzo de otro. El siguiente campo
es Ciudad con su valor: Guadalajara, un nuevo signo de separacin, y
el ltimo campo: Postal con su correspondiente valor: 12345.
Este sistema se utiliza para acceder a ndices, pasar parmetos de
consultas a bases de datos, localizar nmeros de pgina, etc. Es
decir, contenidos relativamente cortos, ya que en total su longitud
slo puede tener 255 caracteres. Para mover contenidos largos, se
debe utilizar formularios y la coleccin Request.Form vista
anteriormente.
Para utilizar esta coleccin no necesitamos un formulario,
simplemente un link definido con el elemento <A> ..
</A> Supongamos que tenemos la siguiente pgina HTML:
'---Fichero link.htm
<HTML><HEAD> <TITLE>Prueba1 ASP</TITLE> </HEAD>
<BODY>
Prueba de <A HREF="http://sestud.uv.es/manual.esp/prueba.asp
?Nombre=Juan+Garcia&Ciudad=Guadalajara&Postal=12345">Request.QueryStri
ng</A>
</BODY>
</HTML>

Para poder ver el nombre de los campos y sus contenidos se escribe


lo siguiente:

'---Fichero prueba.asp
<HTML><HEAD> <TITLE>Prueba2 ASP</TITLE> </HEAD>
<BODY>
<%
Response.Write "Nmero de elementos: " & Request.QueryString.Count &
"<BR>"
Response.Write "Nombre: " & Request.QueryString("Nombre") & "<BR>"
Response.Write "Ciudad: " & Request.QueryString("Ciudad") & "<BR>"
Response.Write "Postal: " & Request.QueryString("Postal") & "<BR>"
Response.Write "<P>"
Response.Write "Nombre: " & Request.QueryString(1) & "<BR>"
Response.Write "Ciudad: " & Request.QueryString(2) & "<BR>"
Response.Write "Postal: " & Request.QueryString(3) & "<BR>"
%>
</BODY>
</HTML>

Este sera el resultado:


Nmero de elementos: 3
Nombre: Juan Garcia
Ciudad: Guadalajara
Postal: 12345
Nombre: Juan Garcia
Ciudad: Guadalajara
Postal: 12345

En este ejemplo, el contador de elementos no est contando los


elementos que hay, sino el nmero de elementos con el mismo
nombre que hay. As pues, si, por ejemplo, repetimos el campo
"Nombre" dos veces en el query string, el contador sguira
mostrando 3.
Fjate ahora en la lnea de string con los campos, concretamente el
campo Nombre y su contenido:
<%
?Nombre=Juan+Garcia&Ciudad=Guadalajara&Postal=12345
%>

El contenido del campo Nombre parece que est "sumado". En


realidad el signo + que aparece separando Juan y Garcia funciona
aqu como concatenador, igual que ocurre en los ficheros .idc vistos
anteriormente, ya que en el query string no puede haber espacios
en blanco y el signo & que se utiliza en ASP y VBScript para
concatenar, aqu es el separador de campos.

Se puede obtener toda la coleccin de valores de los campos sin


indicar sus nombres, pero no est previsto obtener la coleccin de
los nombres. Si algun nombre de campo existe ms de una vez, sus
valores aparecen juntos separados por comas. Por ejemplo:
'---Fichero link.htm
<HTML><HEAD> <TITLE>Prueba1 ASP</TITLE> </HEAD>
<BODY>
Prueba de <A HREF="http://sestud.uv.es/manual.esp/prueba.asp
?Nombre=Juan&Nombre=Maria&Nombre=Pedro&Ciudad=Guadalajara&Postal=12345
">Request.QueryString</A>
</BODY>
</HTML>

Para ver el contenido de los campos sin nombrarlos se escribe lo


siguiente:
'---Fichero prueba.asp
<HTML><HEAD> <TITLE>Prueba2 ASP</TITLE> </HEAD>
<BODY>
<%
Total = Request.QueryString().Count
For x = 1 To Total
Response.Write( Request.QueryString(x) & "<br>" )
Next
%>
</BODY>
</HTML>

Este sera el resultado:


Juan,Maria,Pedro
Guadalajara
12345

Request. ServerVariables("Variable")

Esta coleccin contiene el valor de las variables de entorno del


servidor. Hay muchas, y posiblemente no las utilices nunca, por lo
que slo se mencionarn algunas. Como todas las dems pueden
listarse con el bucle For Each item in ... Next . Los valores del
argumento "Variable" pueden ser, entre otros, los siguientes:

ALL_HTTP Muestra todas las cabeceras HTTP enviadas por


el cliente.
ALL_RAW Recupera todas las cabeceras en formato raw
(transparente, sin codificar).

AUTH_PASSWORD Es la palabra de paso (password) dado


por el cliente durante el dilogo de autenticacin.
AUTH_TYPE Muestra el mtodo de autenticacin que utiliza
el servidor.
AUTH_USER Nombre del usuario dado durante el dilogo de
autenticacin en modo raw.
CONTENT_TYPE Tipo de datos del contenido
HTTP_<HeaderName> El valor almacenado en la cabecera
HeaderName.
QUERY_STRING Es la informacin contenida en el string a
continuacin del interrogante (?).
REMOTE_ADDR Direccin IP del host (mquina del cliente)
que hace el request (peticim de una pgina)
REMOTE_HOST Nombre del host que hace el request.
REMOTE_USER Nombre del usuario
REQUEST_METHOD Mtodo empleado para hacer un
request (POST o GET) desde un formulario.
SERVER_PORT Nmero del puerto por el que el request ha
sido enviado.
SERVER_NAME Nombre del host servidor, Domain Name
Server (DNS), alias o direccin IP (Internet Protocol).
HTTP_REFERER Contiene el nombre de la pgina desde
donde el cliente ha saltado a la nuestra. Slo funciona si el
salto ha sido mediante un link. No contiene nada si el cliente
ha escrito directamente nuestra direccin en su navegador.

Por ejemplo:
<%
Response.Write Request.ServerVariables("REMOTE_ADDR")
%>

Este podra ser un resultado:


125.125.125.125

METODOS

Request.BinaryRead(Count)

Este mtodo recupera los datos que han sido enviados al servidor
desde el cliente formando parte de un request HTTP POST (por
ejemplo, con un formulario).
El argumento Count es obligatorio. Antes de que el mtodo sea
ejecutado, Count contiene el nmero de bytes que tienen que ser
leidos. Despus de la ejecucin contiene el actual nmero de bytes
leidos. Se utiliza poco, y su principal uso es cuando se enva (upload)
un fichero, para comprobar que lleg completo.
Response
El objeto Response

Response (respuesta) es posiblemente el objeto ms utilizado de


todos, ya que sirve para presentar en la pantalla del navegador del
cliente el resultado de cualquier cdigo que hayamos escrito.
El objeto Response tiene 8 propiedades, 1 coleccin y 8 mtodos:
PROPIEDADES
Response.Buffer = False | True

Cuando ASP procesa una pgina cualquiera, va ejecutando comandos,


adjunta cdigo HTML, lee ficheros de inclusin, etc., y todo eso,
hasta que la respuesta est completa lo va guardando en un buffer
(un buffer es un rea temporal de trabajo). A este proceso se le
denomina buffering. Cuando la composicin del fichero de
respuesta est completa, o entre los comandos ejecutados
encuentra una llamada a los mtodos Flush o End, ASP concluye el
proceso de buffering, enva el fichero de respuesta al cliente y
vaca el buffer, quedando a la espera del siguiente proceso.
La propiedad Response.Buffer sirve para intervenir en el proceso
de buffering. Si el valor de Buffer es True, el servidor enviar el
contenido del buffer a la salida, pero si esFalse, el proceso de
buffering no se realiza. Esto significa que no es posible cambiar la
propiedad despus de que el servidor haya enviado la respuesta. Si

se quiere evitar el buffering, habr que hacerlo antes de que ste


comience, por lo que la instruccin deber ser la primera de todas.
El valor por defecto de Buffer en ASP 2.0 es False. En la versin
3.0 es True, siempre que se realice una instalacin nueva, si es una
actualizacin, quedar con el valor antiguo, es decir, False.

Response.CacheControl = "Public" | "Private"

Esta propiedad permite a los servidores proxy guardar o no en su


cache una copia de la respuesta ASP. Vale... no sabes que es un
"proxy" ni una "cache". Veamos: un servidor proxy, es una mquina
que se instala en algunas redes locales (tambin llamadas intranets)
y cuya funcin, entre otras, consiste en guardar en sus discos una
copia de todas las pginas web que han visitado los navegadores de
esa red local. A esto se le llama guardar en cache. Esto mismo ya lo
hace tambin el navegador en la propia mquina donde est
instalado. El navegador tiene dos caches: en memoria y en disco, y
es configurable por el usuario el tamao de ambas, as como el
tiempo que las pginas visitadas permanecern en ellas. La finalidad
de todo esto, que a algunos les podr parecer un atentado a su
intimidad, es conseguir que las pginas de uso ms habitual se
carguen ms rpidamente, ya que al residir en las caches, del
navegador o del proxy, no es necesario salir a internet para
cargarlas de nuevo desde el servidor original. En fin, si las redes
fueran lo rpidas que debieran y las conexiones costasen menos
dinero, seguramente todo esto no sera necesario.
Esto de los proxy est muy bien si hablamos de HTML esttico,
pero si hablamos de ASP dinmico, es decir, pginas que cada vez
que son llamadas pueden tener un contenido diferente, pero con el
problema de que siempre tienen el mismo nombre, que es
precisamente, en funcin de lo que el proxy decide si servir de la
cache o conectarnos con el servidor original, pueden ser un grave
problema.
Imagina que tu aplicacin tiene una pgina que muestra los datos de
un cliente previamente identificado, por ejemplo su ficha personal

con domicilio, telfono, cuenta bancaria de cargo, etc. La pgina


tiene como nombre, por ejemplo, cliente.asp. Un cliente hace un
request solicitando la pgina despus de identificarse. El servidor
envia la pgina solicitada, y el proxy, cumpliendo con su funcin,
guarda en cache una copia. Lo mismo hace el navegador de la
mquina desde donde se hace el request, y supongamos tambin que
esa mquina est en una sala pblica de terminales muy concurrida.
Si... se adivina un desastre. En efecto, el cliente ha terminado sus
transacciones y se marcha. Otro cliente, que estaba esperando su
turno, se sienta ante la misma mquina... y cmo no, se conecta a la
misma aplicacin. La primera pantalla no es peligrosa, ya que son
instrucciones. La segunda, tampoco, es un formulario donde hay que
escribir la identificacin... pero la tercera es cliente.asp que
muestra la ficha con los datos personales.
Qu va a ocurrir? Apenas han transcurrido unos segundos desde
que el anterior cliente hizo el mismo request. Aunque hubiesen
pasados minutos, la situacin sera la misma. Las caches del
navegador estn configuradas para ser eliminadas cada dia (eso con
suerte), la del proxi, lo mismo, y ste solamente har una
verificacin de fechas para ver si el original ha cambiado o no, y no
lo ha hecho. Por tanto la cosa est clara: al segundo cliente le
aparecer la ficha personal del primero, y slo cuando pulse el
botn "recargar" del navegador, forzar al navegador y al proxy a
conectarle con el servidor, obteniendo sus datos correctos. Pero
mientras, hemos dejado que nuestra aplicacin muestre unos datos
indebidamente, lo cual es muy grave.
Para evitar que el proxy copie en su cache las respuestas de
nuestros ASP, se puede utilizar la
propiedad Response.CacheControl . Hay otras dos
propiedades: Response.Expires yResponse.ExpiresAbsolute que
controlan las caches, pero stas lo hacen sobre las del navegador.
Si se escribe:
<% Response.CacheControl = "Public" %>

(por defecto)

SI guarda en cache del proxy

<% Response.CacheControl = "Private" %>

proxy

NO guarda en cache del

Response.Charset("String")

Esta propiedad aade el nombre de la tabla de caracteres al


contenido del objeto Response, concretamente como parmetro
de content-type. El valor por defecto es ISO-LATIN-1 (excepto
en entornos Macintosh).
Por ejemplo, una cabecera HTTP normal contiene el siguiente
string:
content-type: text/html

Y despus de escribir
<% Response.Charset("MS_Windows") %>

Contendra:
content-type: text/html; charset = MS_Windows

Hay que tener en cuenta que como argumento se puede escribir


cualquier cosa, y aunque no sea vlido, ASP no emite ningn mensaje
de error, simplemente no surtir el efecto deseado.

Response.ContentType("String")

Esta propiedad especifica el tipo de contenido del request HTTP,


que puede incluir un tipo/subtipo en la cabecera de la respuesta. El
tipo siempre es de contenido general y el subtipo es especfico. El
valor por defecto es text/HTML. Tiene que ir antes de que se
defina la cabecera de la pgina.
Por ejemplo, el siguiente cdigo poduce una hoja de clculo Excel en
el navegador, simpre que Excel est instalado en la mquina del
cliente, claro.
<% Response.ContentType = "application/vnd.ms-excel" %>
<HTML>
<HEAD><TITLE>PRUEBA</TITLE></HEAD>

<BODY>
<TABLE>
<TR><TD>Valor
<TD>Valor
</TR>
<TR><TD>Valor
<TD>Valor
</TR>
</TABLE>
</BODY>
</HTML>

de la celda A1</TD>
de la celda B1</TD>
de la celda A2</TD>
de la celda B2</TD>

Response.Expires

La propiedad Expires indica el nmero de minutos que deben


transcurrir antes de que la copia de la respuesta en las caches
del navegador expire (sea eliminada). Fjate en que se refiere a la
cache del navegador, no a la del servidor proxy (si lo hubiese). Si no
se invoca esta propiedad, el tiempo de expiracin ser el que tenga
configurado el navegador por defecto.
Si se escribe:
<% Response.Expires = 0 %>

Esto significa que la pgina expira inmediatamente despus de su


recepcin y visualizacin en el navegador. Si en lugar de cero se
escribe, por ejemplo, 2, significar que dos minutos despus de
haberse recibido, el navegador eliminar la pgina de su cache.
El tiempo de expiracin en la cache del navegador, hay que usarlo
con precaucin, ya que si la pgina est destinada a ser impresa
(por ejemplo es el resguardo de una operacin realizada por el
cliente) y ha expirado, el navegador no podr enviarla a la
impresora, y emitir un mensaje de error diciendo que no hay datos
que imprimir, incluso aunque en ese momento la pgina sea visible en
la pantalla, pero no es de esa imagen de donde el navegador envia
datos a la impresora, sino de su cache en disco. Esto significa que
hay que pensar cuidadosamente que pginas terminarn siendo
impresas y cuales no en el momento de utilizar esta propiedad.

Response.ExpiresAbsolute

Funciona igual que la anterior, pero en lugar de indicar el nmero de


minutos que deben transcurrir antes de que las caches del
navegador expiren, indica la fecha y hora exactaen que eso
ocurrir. No es muy fiable, ya que no sabemos si la fecha y hora del
cliente son correctas, y tambin habr que tener en cuenta la hora
del pas desde donde el cliente nos hace el request, para que sea
mnimamente efectiva.
Se escribe:
<% Response.Expires = #Feb 20, 2000 20:00:00# %>

Response.IsClientConnected = True | False

Con esta propiedad se puede saber si el cliente continua conectado


al servidor desde la ltima vez que se utiliz la
propiedad Response.Write, es decir desde la ltima vez que
nuestra aplicacin ha escrito algo en la pantalla del cliente. Puede
ser muy til si el proceso solicitado va a ser muy trabajoso para el
servidor, por ejemplo una consulta a una DB que devolver gran
cantidad de datos. Si se verifica que el servidor a perdido la
conexin con el cliente, es intil hacer todo el trabajo solicitado
por ste, ya que no se podr enviar el resultado, y adems el
servidor entrar en una fase de reintentos sucesivos, hasta que el
tiempo de cierre de sesin especificado en su configuracin se
cumpla. Si eso ocurre con muchos procesos a la vez, el servidor
puede bloquearse.
Por ejemplo:
<%
'--Se abren conexiones a la DB y/o se preparan procesos.
...
...
'--Mediante un bucle se verifica si el cliente sigue conectado, o si
los procesos han terminado
Do until (PROCESOS ACTIVOS... OR Response.IsClientConnected=false)
'--- si el cliente sigue conectado, se hacen los procesos necesarios
...
...
Loop

'---Procesos terminados o conexin perdida. Se cierran las conexiones


y se liberan recursos
...
...
%>

Response.Status = "Status"

Esta propiedad especifica el valor de la lnea de estado HTTP


devuelta por el servidor. Normalmente consiste en la direccin IP
del cliente que ha provocado el estado, seguida de una breve
descripcin de error. Esto hay que escribirlo antes que cualquier
otra lnea de la pgina.
Si se desea impedir el acceso a la aplicacin a una mquina cuyo IP
sea, por ejemplo, 125.125.125.125 escribiremos:
<%
Dir_IP = Request.ServerVariables("REMOTE_ADDR")
If Dir_IP = "125.125.125.125" Then
Response.Status = "403 Acceso prohibido"
Response.Write Response.Status
Response.End
End If
%>
<HTML>
<HEAD><TITLE>PRUEBA</TITLE></HEAD>
<BODY>
..
..

Esto mismo se puede configurar en el servidor de forma fija, en el


apartado de seguridad de la aplicacin.
COLECCIONES
Response.Cookies(Nombre)[(Clave)|.Atributo]=Valor

Esta coleccin funciona bsicamente igual, y sirve para lo mismo,


que la ya explicada en el objeto Request, pero aqu podemos asignar
los valores que se estimen necesarios para la aplicacin. Tiene dos
argumentos obligatorios: Nombre que es el nombre que se le asigna
al cookie, y Valor que especifica el contenido asignado a la clave o
atributo.

Tambin tiene dos argumentos opcionales: Atributo, que puede


consistir en cinco parmetros preestablecidos diferentes, y clave,
que como su nombre indica, es la clave que se le asigna al
atributo Valor
Los parmetros preestablecidos de Atributo pueden ser los
siguientes:

Domain. Por seguridad, es de solo escritura. Asigna pginas en


un dominio formado por ms de un servidor, a fin de
compartir la informacin contenida en el cookie entre varias
aplicaciones, o la misma, distribuida entre varios servidores,
evitando que se pueda leer el contenido del cookie desde
otros dominios ajenos a su creador.
Se escribe: .Domain = ".misitio.com"
Path. Es un complemento del anterior. En efecto, adems de
controlar el dominio de los servidores que acceden al cookie,
puede que interese limitar desde qu pginas pueden hacerlo.
Por ejemplo: .Path = "/asp" permite acceder al cookie
solamente a las pginas que residan en el directorio asp del
rbol de directorios del servidor web. Si se omite, se
entiende que su valor es .Path = "/", es decir, la raiz del
servidor, lo que da acceso al cookie a todas las pginas del
mismo.
Expires. Indica la fecha en la que el cookie expira. Si no se
especifica nada, el cookie expira cuando termina la sesin del
cliente, pero slo se crear en memoria. Si se especifica
alguna fecha, el cookie se almacenar en el disco del cliente
hasta la mencionada fecha, incluso despus de que termine la
sesin. La fecha hay que indicarla con una cadena, por
ejemplo, "30/03/2004".
HasKeys. Valor Booleano (true o false) para indicar si el
cookie contiene claves o no.
Secure. Indica si el cookie es seguro (encriptado o normal).
Admite los valores 0 o 1. En el caso de ser 1 solamente se
puede acceder al cookie mediante SSL.

He aqu un ejemplo:
<%@ LANGUAGE="VBScript" %>
<%
Response.Cookies("test").Expires = "31/05/05"
Response.Cookies("test")("item1") = "prueba"
Response.Cookies("test")("Contador") =
Request.Cookies("test")("Contador") + 1
%>
<HTML>
<HEAD><TITLE>pruebas cookies</TITLE></HEAD>
<BODY>
Contador: <% = Request.Cookies("test")("Contador") %><BR>
Cookie: <% = Request.Cookies("test") %>
</BODY>
</HTML>

Y este sera el resultado:


Contador: 1
Cookie: CONTADOR=1&ITEM1=prueba

En este ejemplo, Contador se incrementa en 1 cada vez que la


pgina es cargada por el navegador. La primera vez valdr 1, la
segunda 2, etc. Cuando el cookie no existe o haya expirado, el
contador vuelve a 1 en la siguiente visita.
Recuerda que todas las instrucciones para crear o modificar los
cookies hay que escribirlas siempre antes de cualquier otra cosa de
la pgina. Otra cosa importante que no hay que olvidar es
que nunca deben ponerse datos confidenciales en los cookies, ya
que los ficheros se quedarn en la mquina del cliente, incluso
despus de haber expirado, y otro usuario podra llegar a ellos.
En los cookies se pueden guardar datos muy variados, como
contadores, preferencias del cliente, colores, resoluciones, etc., y
no se deben utilizar de forma maliciosa (spiware), pero recuerda
que son datos que afectan solamente a una mquina fsica, y que los
datos de un usuario no estarn disponibles si se conecta desde otra
mquina.
Cada navegador genera y guarda los cookies de una manera
diferente. Los del Internet Explores de Microsoft suelen estar en
C:\WINDOWS\Cookies (Win95, 98 y ME). Si se trata de Win NT,

2000, 2003 o XP estarn en C:\Documents and


Settings\nombre_usuario\Cookies.
METODOS
Response.AddHeader "Nombre", "Valor"

Este mtodo permite aadir una nueva cabecera a la respuesta


HTTP. Una vez que la cabecera ha sido creada, no es posible
borrarla. El nombre dado a la nueva cabecera no puede contener
ningun carcter de subrayado ( _ )
Se escribe:
<%
Response.AddHeader "MiCabecera", "PRUEBA"
%>

Response.AppendToLog("String")

Mediante este mtodo se puede aadir un string al registro que se


genera con cada request en el fichero de logs del IIS.
Por ejemplo:
<%
Response.AppendToLog("Mi comentario")
%>

Y este sera el string aadido en un registro tpico del fichero de


logs del IIS:
125.125.125.125, - , 05/27/99, 9:50:00, W3SVC, PRUEBAS,
125.125.125.125, Mi comentario

Response.BinaryWrite(Data)

Escribe la salida HTTP en binario (no en modo string como lo


hace Response.Write), y sin aplicar ninguna conversin de pgina de
caracteres.
Supongamos que tenemos el siguiente formulario HTML con tres
campos:

'---Fichero formulario.htm
<HTML><HEAD> <TITLE>Prueba1 ASP</TITLE> </HEAD>
<BODY>
<FORM ACTION="prueba2.asp" METHOD="POST">
Nombre:<INPUT TYPE="text" NAME="Nombre" VALUE="Juan" ><br>
Ciudad:<INPUT TYPE="text" NAME="Ciudad" VALUE="Guadalajara" ><br>
Postal:<INPUT TYPE="text" NAME="Postal" VALUE="12345"
><br>
<INPUT TYPE="Submit" NAME="Boton" VALUE="Enviar">
</FORM>
</BODY>
</HTML>

Para poder ver el nombre de los campos y sus contenidos se escribe


lo siguiente:
'---Fichero prueba2.asp
<%
bytecount = Request.TotalBytes
binread = Request.BinaryRead(bytecount)
Response.BinaryWrite binread
%>

Y este sera el resultado:


Nombre=Juan&Ciudad=Guadalajara&Postal=12345&Boton=Enviar

Response.Clear

Este mtodo se utiliza para vaciar (borrar) cualquier contenido del


buffer de salida. No elimina las cabeceras HTTP, solamente el
contenido que va entre los elementos <BODY> y </BODY> Si el
buffer ya est vaco debido a que previamente se ha
invocado Response.Buffer=False, se produce un error de ejecucin.
Recuerda que en la versin 2.0 de ASP el valor por defecto de
Response.Buffer es False y en la versin 3.0 es True.
Se escribe:
<%
Response.Clear
%>

Response.End

Cuando se invoca este mtodo el servidor detiene el proceso de la


pgina ASP actual y envia al cliente el contenido del buffer de
salida, siempre que Response.Buffer=True. El resto de

instrucciones no se procesar. Recordar que en la versin 2.0 de


ASP el valor por defecto de Response.Buffer es False y en la
versin 3.0 es True.
Por ejemplo, si se escribe:
<%
Response.Write "Primer string"
Response.End
Response.Write "Segundo string"
%>

Slo se obtiene en la respuesta:


Primer string

Response.Flush

Este mtodo provoca el envio inmediato al cliente del contenido del


buffer de salida, en lugar de hacerlo al concluir el proceso completo
de la pgina, y continuando despus con el resto de instrucciones
normalmente. Si el buffer est vaco debido a que previamente se
ha invocado Response.Buffer=False, se produce un error de
ejecucin. Recuerda que en la versin 2.0 de ASP el valor por
defecto de Response.Buffer es False y en la versin 3.0 es True.
Se escribe:
<%
Response.Flush
%>

Response.Redirect(URL)

Este mtodo detiene el proceso de las instrucciones de la pgina


actual e intenta conectar el cliente a una nueva direccin (URL).
Esto se consigue aadiendo una cabecera de redireccin a la salida
HTTP que se envia al cliente. Puede haber un problema en el caso de
que alguna parte de la pgina ya haya sido enviado al cliente
mediante alguno de los dos anteriores mtodos (Flush o End) si
entre el servidor web y el cliente hay un servidor proxy, por lo que
debe usarse con precaucin.

He aqu un ejemplo de uso:


'---Fichero1.asp
<% Response.Buffer = true %>
<HTML>
<BODY>
<%
Response.Write "Este es Fichero1.asp y se conmuta con Fichero2.asp"
Response.Clear
Response.Redirect "Fichero2.asp"
Response.Write "Esto ya no se procesa"
%>
</BODY>
</HTML>
'---Fichero2.asp
<HTML>
<BODY>
<%
Response.Write "Este es Fichero2.asp"
%>
</BODY>
</HTML>

Este sera el resultado: se muestra parte de Fichero1 y el


navegador es obligado a cargar Fichero2:
'---Fichero1.asp
Este es Fichero1.asp y se conmuta con Fichero2.asp
'---Fichero2.asp
Este es Fichero2.asp

Response.Write(Valores)

Llegamos al ltimo mtodo del objeto Response. Como ya sabes,


puesto que se ha venido utilizando en la explicacin de otros
objetos, sirve para escribir el resultado del cdigo ASP en el
navegador del cliente. Se habl ms a fondo de l en la
pgina Cmo se escribe el ASP?
Se escribe:
<%
Response.Write(Valores)
%>

Server

El objeto Server

Este objeto proporciona acceso a distintas funciones de utilidad


para el programador de aplicaciones internet.
El objeto Server tiene 1 propiedad y 7 mtodos:
PROPIEDADES
Server.ScriptTimeout = Tiempo

Esta propiedad especifica el tiempo, medido en segundos, de que


dispondr una pgina o script para ejecutarse. El valor por defecto
es de 90 segundos, y suele ser suficiente incluso para pginas
largas y complicadas. Si en este tiempo no se ha concluido el
procesamiento de todo el cdigo, probablemente se debe a que ha
entrado en un bucle sin salida, el servidor est bloqueado o
intentando obtener un dato del cliente sin conseguirlo. Salvo raras
ocasiones, no conviene aumentarlo, ya que varios procesos
incompletos simultneos, posiblemente dejarn el servidor
"colgado". No confundir esta propiedad con Session.Timeout que es
el tiempo dado a una sesin, y que comienza a contar cuando todo el
cdigo ya ha sido interpretado y ejecutado.
Por ejemplo, si se quiere aumentar el tiempo de ejecucin a 100
segundos, se escribe:
<% Server.ScriptTimeout = 100 %>

METODOS
Server.CreateObject("ObjectID")

Este es, probablemente, uno de los mtodos ms importantes de


ASP, ya que permite al usuario crear instancias a
otros objetos (componentes activeX o componentes creados por el
usuario), que al igual que los ya existentes intrnsecamente en ASP,
tienen sus propias colecciones, eventos, mtodos y propiedades
asociadas con ellos. Tiene un argumento obligatorio, ObjectID, que
especifica el tipo de objeto que se va a crear.
El ejemplo siguiente crea dos objetos: DB que es del
tipo Connection (conexin) a una DB y RS que es

un RecordSet (conjunto de registros extraido de una DB). Los


nombres asignados a los objetos son libres, y puedes llamarlos como
quieras:
<%
Set DB = Server.CreateObject("ADODB.Connection")
Set RS = Server.CreateObject("ADODB.RecordSet")
%>

Seguramente te habrs fijado en que hay una instruccin que hasta


ahora no habamos visto: Set. En efecto, hasta el momento para
asignar un valor a una variable, simplemente escribamos una
igualdad, por ejemplo:
Nuevocod = Request.Form("NuevoCod").
Esto se puede hacer siempre que la variable vaya a recibir como
valor un string, un nmero, el resultado de una funcin, una
propiedad o un mtodo, pero en el caso de recibir un objeto hay que
anteponer la instruccin Set, tal como se muestra.
Otro tipo de objetos muy utilizados son
los FileSystem y TextStream que sirven para crear, leer y escribir
ficheros de texto. Por ejemplo:
<%
Set FS = Server.CreateObject("Scripting.FileSystemObject")
Set Fichero = FS.CreateTextFile("D:\ASP\texto.txt", True)
%>

Dada su utilidad, en otras pginas de la guia veremos ejemplos ms


extensos de estos y otros objetos creados con el mtodo
Server.CreateObject().

Server.Execute("Ruta")

Permite llamar desde una pgina ASP a otra pgina ASP. Cuando la
pgina llamada concluye su proceso, el control vuelve a la pgina
llamadora. Es un efecto parecido al que se consigue con los ficheros
de inclusin, ya explicados en otro punto. Bsicamente se diferencia
de los include en que no pasa a formar parte del mismo fichero en
el momento de ser procesado, sino que se ejecuta un segundo
fichero por separado y con otro nombre.

No debe confundirse con los


mtodos Server.Transfer o Response.Redirect ya que con ellos el
control no vuelve a la pgina llamadora, y el proceso concluye en la
pgina llamada.
Por ejemplo:
'---Fichero llamador.asp
<HTML>
<HEAD><TITLE>PRUEBA</TITLE></HEAD>
<BODY>
Esto es la parte 1 que se escribe desde el fichero Llamador <BR>
<% Server.Execute("llamado.asp") %>
Esto es la parte 3 que se escribe desde el fichero Llamador <BR>
</BODY>
</HTML>
'---Fichero llamado.asp
<HTML>
<HEAD><TITLE>PRUEBA</TITLE></HEAD>
<BODY>
<%
Response.Write "Esto es la parte 2 que se escribe desde el
fichero Llamado <BR>"
%>
</BODY>
</HTML>

Y este sera el resultado:


Esto es la parte 1 que se escribe desde el fichero Llamador
Esto es la parte 2 que se escribe desde el fichero Llamado
Esto es la parte 3 que se escribe desde el fichero Llamador

Server.GetLastError( )

Ver el objeto ASPError


Server.HTMLEncode("String")

Con este mtodo se puede convertir un string codificado en HTML,


y por tanto ejecutable por los navegadores, en cdigo solamente
visible pero no ejecutable por los navegadores. Es decir, se trata
de obtener, partiendo de HTML normal, un tipo de cdigo que
aunque el navegador lo muestra como si fuese HTML, en realidad es
ASCII puro. Es til para escribir manuales como ste. Veamos un
ejemplo:

<% Response.Write Server.HTMLEncode("Esto es un break <BR> que no


funciona") %>

Este sera el cdigo interno obtenido, visible en formato HTML


pero no ejecutable como tal:
Esto es un break &lt;BR&gt; que no funciona

Y esto es lo que mostrar es navegador:


Esto es un break <BR> que no funciona

Server.MapPath("Ruta")

Traza un mapa de rutas fsicas (absolutas) partiendo de rutas


virtuales (relativas) de ficheros que se encuentren dentro del rbol
de directorios declarados como parte de la estructura del servidor
web. Por ejemplo:
<HTML>
<HEAD><TITLE>PRUEBA</TITLE></HEAD>
<BODY>
La ruta de fichero1.asp es: <%
Response.Write Server.MapPath("fichero1.asp") %>
La ruta de fichero2.asp es: <%
Response.Write Server.MapPath("\fichero2.asp") %>
La ruta de fichero3.asp es: <%
Response.Write Server.MapPath("asp\fichero3.asp") %>
La ruta de fichero4.asp es: <% Response.Write Server.MapPath("\") %>
</BODY>
</HTML>

Y este sera el resultado:


La
La
La
La

ruta
ruta
ruta
ruta

de
de
de
de

fichero1.asp
fichero2.asp
fichero3.asp
fichero4.asp

es:
es:
es:
es:

D:\Inetpub\wwwroot\fichero1.asp
D:\Inetpub\wwwroot\asp\fichero2.asp
D:\Inetpub\wwwroot\asp\fichero3.asp
D:\Inetpub\wwwroot

Server.Transfer("Ruta")

Permite llamar desde una pgina ASP a otra pgina ASP. Cuando la
pgina llamada concluye su proceso, el control no vuelve a la pgina
llamadora, y concluye en la pgina llamada.
No confundir con el mtodo Response.Redirect que funciona de
modo similar, pero partiendo de otro objeto. El proceso de
transferencia de una pgina a otra es completo, incluyendo todos
los objetos y variables que hayan sido creados en la pgina

llamadora como si se tratase de la misma, aunque con otro nombre


de pgina.
Por ejemplo:
'---Fichero llamador.asp
<HTML>
<HEAD><TITLE>PRUEBA</TITLE></HEAD>
<BODY>
Esto es la parte 1 que se escribe desde el fichero Llamador <BR>
<%
Session("prueba") = "Variable de sesin creada desde el
fichero Llamador <BR>"
Server.Transfer("llamado.asp")
%>
Esto es la parte 3 que se escribe desde el fichero Llamador <BR>
</BODY>
</HTML>
'---Fichero llamado.asp
<HTML>
<HEAD><TITLE>PRUEBA</TITLE></HEAD>
<BODY>
<%
Response.Write Session("prueba") & "<BR>"
Response.Write "Esto es la parte 2 que se escribe desde el
fichero Llamado <BR>"
%>
</BODY>
</HTML>

Y este sera el resultado:


Esto es la parte 1 que se escribe desde el fichero Llamador
Variable de sesin creada desde el fichero Llamador
Esto es la parte 2 que se escribe desde el fichero Llamado

<p< como="" puedes="" ver,="" la="" parte="" 3="" que="" est=""


despus="" de="" producirse="" transferencia,="" no="" ha=""
sido="" ejecutada.=""
</p<>
Server.URLEncode("String")

Este mtodo puede convertir un string conteniendo una direccin


URL en formato ASCII a formato URL-encoded. Veamos un
ejemplo:
<% Response.Write Server.URLEncode("http://sestud.uv.es/manual.esp")
%>

Este sera el cdigo interno obtenido URL-encoded, que es


precisamente con el que trabajan internamente los navegadores,
aunque habitualmente se vea de otra forma (formatoASCII).
http%3A%2F%2Fsestud%2Euv%2Ees%2Fmanual%2Eesp

Como puedes ver, la conversin lo que hace es transformar


cualquier cosa que no sea una letra o un nmero en su
cdigo hexadecimal separados por el signo %
Hex
Dec
ASCII
--------------------3A
58
:
2F
47
/
2E
46
.

El mtodo Server.CreateObject
Server.CreateObject("ADODB.Connection")
Server.CreateObject("ADODB.RecordSet")

El ejemplo siguiente crea dos objetos: DB que es del


tipo Connection (conexin) a una DB y RS que es
un RecordSet (conjunto de registros extraido de una DB). Estos
nombres son libres, y puedes llamarlos como quieras:
<%
Set DB = Server.CreateObject("ADODB.Connection")
Set RS = Server.CreateObject("ADODB.RecordSet")
%>

Esta es una buena muestra de la gran potencia y versatilidad de


ASP. Con el objeto Server.CreateObject() hemos creado otros dos
objetos de ADO: Connection y RecordSet. el primero ser utilizado
para establecer un vnculo con la base de datos, y el segundo nos
servir para manipular los datos.
Seguramente te habrs fijado en que hay una instruccin que hasta
ahora no habamos visto: Set. En efecto, hasta el momento para
asignar un valor a una variable, simplemente escribamos una
igualdad, por ejemplo:
Nuevocod = Request.Form("NuevoCod").
Esto se puede hacer siempre que la variable vaya a recibir como

valor un string, un nmero, el resultado de una funcin, una


propiedad o un mtodo, pero en el caso de un objeto hay que
anteponer la instruccin Set, tal como se muestra. Cuando ms
tarde se cierre el objeto, hay que recuperar los recursos asignados
ahora. Close es en realidad un mtodo, y se encarga de vaciar el
buffer y de cerrar el objeto. Despus, la instruccin Nothing indica
al sistema que el objeto ya no est vinculado a ninguna variable, por
lo que sus recursos pueden ser recuperados.
Veamos ahora cmo utilizar las propiedades de los dos objetos
creados. Si preparamos una consulta escrita en SQL para el
objeto DB, podremos extraer informacin de la Base de Datos y
cargarla en el objeto RS, lo que nos permitir movernos por el
RecordSet o ver su contenido con toda facilidad:
<%
SQL ="SELECT convert(char(8), nom_dni) + nom_nif AS 'NIF', " & _
"nom_apellidos AS 'Apellidos', " & _
"nom_nombre AS 'Nombre', " & _
"nom_postal AS 'Postal' " & _
"nom_postal + ' ' + nom_localidad AS 'Localidad', " & _
"nom_provincia AS 'Provincia' " & _
"FROM nombres WHERE nom_dni = 12345678 "
%>

Y ahora abrimos los objetos y les damos parmetros:


<%
DB.Open "DB_nombre", "DB_user", "DB_password"
RS.Open SQL, DB
%>

Esto coloca el puntero en el primer registro del RecordSet. Ahora,


mediante un bucle, mostraremos en la pantalla del cliente el
contenido del RecordSet en formato de tabla:
<%
'---Se comprueba si el RecordSet viene vacio. Si tiene contenido, se
muestran los
'---registros utilizando las propiedades y colecciones del objeto RS.
If RS.EOF AND RS.BOF Then
Response.Write("Error. No se encontraron registros")
Else
Response.Write("<TABLE BORDER=1>")
For i = 0 to RS.Fields.Count - 1
Response.Write("<TR><TH>")

Response.Write(RS(i).Name)
Response.Write("</TH><TD>")
Response.Write(RS(i))
Response.Write("</TD></TR>")
Next
Response.Write("</TABLE>")
End if
'---Se cierran los objetos, en orden inverso a como se abrieron, y se
liberan los
'---recursos que el servidor les habia asignado, con la instruccin
Nothing
RS.Close
Set RS = Nothing
DB.Close
Set DB = Nothing
%>

Y este podra ser el resultado (en cuanto a forma, el contenido


depende de lo que haya en la tabla, claro):
NIF

12345678Z

Apellidos Garcia
Nombre Juan
Postal

12345

Localidad 12345 Villa Desconocida


Provincia Guadalajara

En este ejemplo se han visualizado todos los registros y campos de


la tabla contenida en el objeto RS, sin necesidad de saber cuantos
hay ni sus nombres, es decir, utilizando una coleccin, pero este
objeto tiene varios mtodos que nos permitirn movernos por los
registros, y por los campos que los componen, invocando su nombre:
por ejemplo, para ver slo el contenido del campo Provincia, se
escribe:
<%
Response.Write( RS("Provincia") )
%>

Para escribir un valor en un campo de un registro se procede as:


<%
RS("Provincia") = "Toledo"
RS("Postal") = 54321
%>

Fjate en que si el tipo de dato del campo es numrico el valor no


debe ir entrecomillado, pero si el tipo es de texto o de fecha s.
Para moverse por el RecordSet tenemos los siguientes mtodos:

RS.MoveFirst. Para posicionarse en el primer registro.


RS.MoveLast. Para posicionarse en el ltimo registro.
RS.MoveNext. Para pasar al siguiente registro. En el caso de
que se invocase este mtodo estando ya posicionados en el
ltimo registro (RS.EOF = True AND RS.BOF = False), se
producira un error de SQL (RS.EOF = True AND RS.BOF =
True). Se deben tener siempre controlados estos dos estados
del RecordSet.
RS.MovePrevious. Para retroceder al anterior registro. En el
caso de que se invocase este mtodo estando ya posicionados
en el primer registro (RS.EOF = False AND RS.BOF = False),
se producira un error de SQL (RS.EOF = False AND RS.BOF
= True).
RS.Move N. Para mover el puntero al nmero de registro N.
Tener presente que el primer registro es el 1. El nmero de
registro obtenido despus de invocar RS.MoveFirstes el 1.
RS.Delete N. Para borrar el nmero de registro N. Por
supuesto, no puedes borrar el EOF ni el BOF.
RS.Refresh. Para forzar una nueva consulta, ejecutando la
misma sentencia SQL del principio (no otra) sobre
la misma DB. Es decir, refrescar los datos por si se hubieran
producido cambios (pero no producidos por el usuario actual).
RS.SubmitChanges. Para enviar a la DB los cambios que se
hayan realizado sobre los registros o campos del RecordSet,
siendo stos guardados.
RS.CancelUpdate. Para anular todos los cambios que se hayan
hecho en el RecordSet, siempre que no se hayan guardado
todava, es decir, antes de invocarRS.SubmitChanges.

El RecordSet tambin puede ser manejado por pginas enteras en


lugar de registro a registro. Para ello, primero hay que definir una
constante llamada adOpenkeyset cuyo valor por defecto es cero, y
es correcto para transacciones registro a registro, pero si

queremos paginar el RecordSet tiene que valer 1. Por supuesto, hay


que definirla antes de crear el objeto RS. Se define as:
<%
Const adOpenkeyset = 1
%>

Dispondremos de tres propiedades para movernos por las pginas


del RecordSet:

RS.PageSize=. Para definir el nmero de registros que


deseamos que contenga la pgina.
RS.AbsolutePage=. Define el nmero de pgina, de las
resultantes despus de la paginacin, que se desea ver.
RS.PageCount. Contiene el nmero de pginas que han
resultado despus de la paginacin.

Y de una para el nmero de registros total:

RS.RecordCount. Para saber el nmero de registros que


contiene el RecordSet.

Y ahora veamos cmo utilizarlas:


<%
Const adOpenkeyset = 1
Set RS = Server.CreateObject("ADODB.Recordset")
RS.PageSize = 10
RS.Open SQL, DB, adOpenKeyset
%>

Como puedes ver, se procede igual que en el anterior ejemplo, pero


incluyendo como parmetro de apertura del objeto RS la
constante adOpenKeyset e indicando, antes de proceder a la
apertura, el nmero de registros que debe contener la
pgina: RS.PageSize = 10.
Con todo lo dicho hasta aqu no debes tener dificultad (salvo en los
comandos VBScript, tal vez) en comprender cmo funciona el
siguiente ejemplo de programa con estos dos objetos ADO
(ActiveX Data Object).

Distintos mtodos de apertura

En la apertura de la Base de Datos del ejemplo se ha utilizado la


forma
<%
DB.Open "DB_nombre", "DB_user", "DB_password"
%>

Esta es la forma denominada con DSN en la que el


parmetro DB_nombre en realidad no hace referencia al nombre de
la base de datos que se desea abrir, sino al nombre del origen de
datos ODBC que previamente se habr creado en el servidor, y que
puede tener el mismo nombre que la base de datos a la que apunta o
el que se le quiera dar. Pero puede suceder que no tengas acceso
fsico al servidor para crear ese ODBC, cosa habitual si tienes tus
pginas en un "hosting" alquilado.
Para resolver este problema, existen otras formas de apertura:
Sin DSN:
<%
DSN="DRIVER={SQL
Server};SERVER=mi_server;UID=mi_user;PWD=mi_passw;DATABASE=mi_db"
DB.open DSN
%>

OLE sin DSN:


<%
DB.open "PROVIDER=SQLOLEDB;DATA
SOURCE=mi_server;UID=mi_user;PWD=mi_passw;DATABASE=mi_db"
%>

El mtodo Server.CreateObject
Server.CreateObject("Scripting.FileSystemObject")

Otros objetos muy interesantes que pueden crearse


con Server.CreateObject() son los de acceso a archivos de texto.
En el siguiente ejemplo se crean dos objetos:

FS que es un objeto FileSystem que permite acceder al


sistema de ficheros del servidor.

Fichero que es un objeto TextStream que permite acceder a


un fichero de texto llamado texto.txt en modo lectura o
escritura.

La segunda instruccin crear, en modo escritura, el


fichero texto.txt en la ruta especificada, y lo borrar crendolo
de nuevo, si ya existe.
<%
Set FS = Server.CreateObject("Scripting.FileSystemObject")
Set Fichero = FS.CreateTextFile("C:\ASP\texto.txt", True)
%>

El parmetro True es opcional. Indica si un archivo existente se


quiere sobrescribir. El valor debe ser True si el archivo se quiere
crear nuevo; False si, existiendo, no se quiere sobrescribir. Si se
omite y el fichero existe, no se borra, ya que el valor por defecto
es False, pero ASP dar un mensaje de error, ya que el objeto es
de creacin de un nuevo fichero, cosa que no puede hacer.
Ahora, para escribir una lnea en texto.txt simplemente
escribiremos:
<%
Fichero.WriteLine("Esto es una prueba de escritura")
%>

Si lo que se desea es abrir el fichero, en modo lectura, ya existente


y previamente cerrado, se escribir:
<%
Set FS = Server.CreateObject("Scripting.FileSystemObject")
Set Fichero = FS.OpenTextFile("C:\ASP\texto.txt", False)
%>

Y para leer la primera lnea:


<%
Response.Write(Fichero.ReadLine)
%>

Hasta aqu vers que podemos crear un fichero nuevo o leer uno ya
existente, pero, qu hacer si tenemos que anexar nuevas lneas a
un fichero que ya tiene contenidos? La solucin la tenemos en el
mtodo OpenAsTextStream, que proporciona las mismas

funcionalidades que OpenTextFile, pero adems permite anexar


(append) nuevas lneas sin borrar el fichero ya existente ni su
contenido. Previamente habr que definir algunas constantes para
poder realizar las tres operaciones bsicas con el fichero:
<%
Const ForReading = 1, ForWriting = 2, ForAppending = 8
Const TristateUseDefault = -2, TristateTrue = -1, TristateFalse = 0
Set FS = Server.CreateObject("Scripting.FileSystemObject")
Set Fichero = FS.GetFile("C:\ASP\texto.txt")
Set TS = Fichero.OpenAsTextStream(ForAppending, TristateUseDefault)
%>

Y para escribir una lnea en texto.txt aadindola a las que ya


contenga:
<%
TS.Write("Esto es un segundo registro sin borrar el primero" & vbCrLf)
%>

La constante vbCrLf se encarga de escribir un retorno de carro al


final de la lnea.
El primer parmetros del mtodo OpenAsTextStream es el modo
de apertura, y puede ser:

ForReading Abre el fichero para lectura.


ForWriting Abre el fichero para escritura. Si ya existe con el
mismo nombre, su contenido anterior se sobrescribe.
ForAppending Abre el fichero y escribe al final del mismo. El
contenido anterior no es alterado.

El segundo parmetro se refiere al formato del fichero. Si se


omite, el archivo se abre como ASCII. Puede ser:

TristateUseDefault Abre el fichero utilizando la forma


predeterminada para el sistema.
TristateTrue Abre el archivo como Unicode.
TristateFalse Abre el fichero como ASCII (por defecto).

Tanto si se ha abierto el fichero en modo lectura como en


escritura, al concluir su procesado se cerrarn el objeto TS:

<%
TS.Close
Set TS = Nothing
%>

Close es en realidad un mtodo, y se encarga de vaciar el buffer y


de cerrar el fichero. Despus la instruccin Nothing indica al
sistema que el objeto ya no est vinculado a ninguna variable, por lo
que sus recursos pueden ser recuperados.
Al igual que los objetos RecordSet, los objetos TextStream (en
nuestro ejemplo Fichero) tambin tienen varias propiedades y
mtodos para moverse por el fichero texto.txt, pero a diferencia
de los RecordSet, no es posible moverse hacia atrs. Los ficheros
de texto creados con el objeto TextStream son, por tanto, de
acceso secuencial. Veamos laspropiedades, que son todas de
slo lectura, es decir que slo pueden utilizarse si el fichero ha
sido abierto en modo lectura
( FS.OpenTextFile("C:\ASP\texto.txt", False ):

Fichero.AtEndOfLine devuelve True si el puntero de archivo


est situado inmediatamente a continuacin del marcador de
fin de lnea del archivo; en caso contrario devuelveFalse.
Fichero.AtEndOfStream devuelve True si el puntero de
archivo se encuentra al final del mismo; en caso contrario
devuelve False.
Fichero.Column devuelve el nmero de columna de la posicin
del carcter actual en un archivo. Despus de que se haya
escrito un carcter de nueva lnea mediante VbLf oVbCrLf o
utilizado el mtodo Fichero.WriteLine(), pero antes de que se
escriba cualquier otro carcter, el valor de Column es 1.
Fichero.Line devuelve el nmero de lnea actual en el archivo.
Despus de que se abre por primera vez un archivo y antes de
que se escriba nada en l, el valor de Line es 1.

Y a continuacin veamos los mtodos:

Fichero.Read(N) Mtodo utilizado para leer un nmero (N)


especificado de caracteres de un archivo, devolviendo la

cadena resultante. Dependiendo del valor de N pueden leerse


de una a varias lneas.
Fichero.ReadAll Lee un archivo completo y devuelve la cadena
resultante. No es aconsejable utilizarlo con ficheros grandes,
ya que podra dejar al servidor sin recursos de memoria. En
este caso es preferible leer los ficheros lnea a lnea.
Fichero.ReadLine Lee una lnea completa hasta encontrar,
pero sin incluir, el carcter de nueva lnea (VbCrLf) de un
archivo devolviendo la cadena resultante.
Fichero.Skip(N) Omite un nmero (N) especificado de
caracteres al leer un archivo.
Fichero.Skip(N) Salta a la siguiente lnea cuando se lee un
archivo.
Fichero.Write(string) Escribe un string especificado en un
archivo. Las cadenas especificadas se escriben en el archivo
sin caracteres de separacin, delimitadores, ni espacios en
blanco entre cada cadena. Y por supuesto, sin el carcter de
fin de lnea. Hay que utilizar el mtodo WriteLine para
escribir un carcter de nueva lnea o una cadena que finalice
con un carcter de nueva lnea.
Fichero.WriteLines([string]) Escribe un string especificado y
un carcter de nueva lnea a continuacin. Si se omite el
string de contenido, simplemente se escribe el carcter de
nueva lnea.
Fichero.WriteBlankLines(N) Escribe un nmero (N) de
caracteres de nueva lnea VbCrLf.

El mtodo Server.CreateObject
Server.CreateObject("ADODB.Stream")

Esta es otra interesante propiedad del


objeto Server.CreateObject() Un "stream", en ingls, es una
corriente o flujo, en este caso de bits. Es decir, que podemos leer
un fichero de forma binaria, lo que significa que se obtendr
completamente puro y sin cabeceras HTTP, que lo corromperan. Y
puede que te preguntes por qu es necesario complicarse la vida
con flujos de bits y dems historias, cuando para descargar un

fichero lo podemos obtener simplemente mediante un link. Por


ejemplo:
<a href="/gif/privado.gif">Obtener grfico</a>
Pues en efecto, este sencillo mtodo te puede resolver el problema,
pero solamente lo har si el fichero a descargar reside en un
directorio que forma parte del rbol de tu web. Es decir, que el
fichero est en el directorio raz del web o en alguno colgado de l,
como /gif /graficos o cualquier otro.
Qu hacer si el fichero no est en un directorio colgado de la
raz? Y puede que vuelvas a preguntarte: Y por qu no lo va a
estar? Pues simplemente porque no es un fichero pblico, es decir,
que no queremos que lo vea cualquiera, sino aquellos usuarios que
hayan pasado por una validacin previa controlada por nuestra
aplicacin. Por supuesto, se puede controlar el acceso a un
directorio (cuelgue o no de la raz) creando usuarios autorizados
directamente en el servidor, pero eso es muy pesado y poco
prctico; imagina que estamos hablando de cientos, tal vez miles de
usuarios. En estos casos la solucin suele ser escribir una aplicacin
de registro de usuarios con una Base de Datos SQL Server o
Access, y para evitar que algn "listo", que se ha enterado de la
ruta donde estan los ficheros a proteger, llegue hasta ellos, se
hace que se descarguen en binario desde un directorio situado
fuera del rbol del web, con lo que podemos controlar fcilmente el
acceso a los usuarios autorizados.
El siguiente programa extrae ficheros de un directorio llamado
"privados" que est fuera del rbol del web, y ser llamado por otro
programa que, previamente, ha comprobado si el usuario tiene
permiso de acceso o no, dando valor "si" a la variable de
sesin Session("acceso"). Esta variable de sesin solamente
existir si la ha definido el programa llamador, por lo que si el
usuario invoca directamente al programa llamado, no obtendr el
acceso deseado.

El programa llamador puede invocar al llamado de muchas formas.


Una de las ms simples puede ser un link o una lista de ellos:
<a href="binarios.asp?file=privado.gif">Obtener
grfico</a>
Y este sera el programa:
binarios.asp
<%
'Primero se establece el tipo MIME del fichero para que el navegador
sepa si lo puede mostrar
'directamente, tiene que usar un "plug-in" o llamar a otro programa
Select Case Right(Request.QueryString("file"), 3)
Case "xls": Response.ContentType = "application/x-msexcel"
Case "doc": Response.ContentType = "application/x-msword"
Case "pps": Response.ContentType = "application/x-msppoint"
Case "pdf": Response.ContentType = "application/pdf"
Case "gif": Response.ContentType = "image/gif"
case "mp3": Response.ContentType = "application/x-mplayer2"
End Select
'Esto sirve para que el navegador del cliente pregunte si lo abre o
lo guarda en disco
Response.AddHeader "content-disposition","attachment; filename=" +
Request.QueryString("file")
'Aqui se comprueba que el acceso es autorizado por el programa
llamador.
'Si es asi, se comienza la descarga
if Session("acceso") = "si" Then
Const adTypeBinary = 1
Dim RutaFichero
RutaFichero = "c:\privados\" + Request.QueryString("file")
Set objStream = Server.CreateObject("ADODB.Stream")
objStream.Open
objStream.Type = adTypeBinary
objStream.LoadFromFile RutaFichero
Response.BinaryWrite objStream.Read
objStream.Close
Set objStream = Nothing
Else
Response.Write("<h2 align='center'>Acceso denegado</h2>")
End if
%>

Como puedes ver, es bastante sencillo. Fjate en que el programa no


tiene las tpicas cabeceras de las pginas HTML como body, head,

title, etc. Si las tuviese el fichero extraido llegara con ellas y por
tanto inutilizado.
Una cosa que no debes olvidar es que el programa tenga permiso de
lectura en el directorio donde estn los ficheros.

El mtodo Server.CreateObject
Server.CreateObject("Scripting.FileSystemObject")

Continuando con los objetos que pueden crearse


con Server.CreateObject() veremos ahora los de acceso a la
estructura de archivos de un disco, es decir, a sus directorios y
ficheros. Para poder acceder a todos ellos, previamente habr que
crear un objeto FileSystem y a continuacin el
objeto File o Folder segn se trate de ficheros o directorios (ya
existentes, por supuesto).
<%
Set FS = Server.CreateObject("Scripting.FileSystemObject")
Set Fichero = FS.GetFile("C:\ASP\texto.txt")
Set Directorio = FS.GetFolder("C:\ASP")
%>

FS es un objeto FileSystem que permite acceder al sistema


de ficheros del servidor.
Fichero es un objeto File que permite acceder a las
propiedades de un fichero de texto llamado texto.txt.
Directorio es un objeto Folder que permite acceder a las
propiedades de un directorio llamado ASP.

Veamos las propiedades, que pueden ser de lectura y escritura


(RW) o de slo lectura (R), y donde Objeto puede
ser Fichero o Directorio, salvo que se indique concretamente.

Objeto.Attributes [=nuevos] Establece nuevos o muestra los


atributos del objeto. Los valores y significados de los
atributos son los siguientes, pudiendo utilizarse
indistintamente el nombre de las constantes o su valor
numrico:

Normal = 0 Archivo normal. No se establecen


atributos.
o ReadOnly = 1 Archivo de slo lectura. RW
o Hidden = 2 Archivo oculto. RW
o System = 4 Archivo de sistema. RW
o Volume = 8 Etiqueta de volumen de la unidad de
disco. R
o Directory = 16 Carpeta o directorio. R
o Archive = 32 El archivo se ha modificado desde la
ltima copia de seguridad. RW
o Alias = 64 Vnculo o acceso directo. R
o compressed = 128 Archivo comprimido. R
Objeto.DateCreated Devuelve la fecha y hora en la que se
cre el objeto. R
Objeto.DateLastAccessed Devuelve la fecha y hora en la que
se tuvo acceso por ltima vez al objeto. R
Objeto.DateLastModified Devuelve la fecha y hora en la que
se modific por ltima vez el objeto. R
Objeto.Drive Devuelve la letra de unidad del disco en el que
reside el objeto. R
Objeto.Name [= nuevonombre] Establece nuevo o devuelve
el nombre de un archivo o una carpeta. RW
Objeto.ParentFolder Devuelve el objeto Directorio que es el
directorio primario del objeto especificado. R
Objeto.Path Devuelve la ruta de acceso del objeto
especificado. R
Objeto.ShortName Devuelve el nombre corto (8.3), utilizado
por los programas DOS, del objeto. R
Objeto.ShortPath Devuelve la ruta corta (8.3), utilizado por
los programas DOS, del objeto. R
Objeto.Size Para los archivos, devuelve el tamao en bytes
del archivo especificado. Para los directorios, devuelve el
tamao en bytes de todos los archivos y subdirectorios que
estn contenidos en el directorio. R
Objeto.Type Devuelve informacin acerca del tipo de un
archivo o directorio. Por ejemplo, para los archivos que
o

terminan en .GIF, se devuelve "Imagen GIF". Para un


directorio muestra "Carpeta de archivos". R
Directorio.Files Devuelve una coleccin Files que consta de
todos los objetos File (Fichero) contenidos en el directorio
especificado, incluyendo aquellos que tienen establecidos los
atributos de archivo oculto y de sistema. Puede obtenerse por
medio de un bucle For Each .. in .. Next, tpico.
Directorio.SubFolders Devuelve una coleccin Folders que
consta de todos los objetos Folder (Directorio) contenidos en
el directorio especificado, incluyendo aquellos que tienen
establecidos los atributos de oculto y de sistema. Puede
obtenerse por medio de un bucle For Each .. in .. Next,
tpico.
Directorio.IsRootFolder Devuelve True si el directorio
especificado es el directorio raiz; False si no lo es.

Y a continuacin veamos los mtodos:

Objeto.Copy destino[, sobrescribir] Copia un directorio o


fichero especificado desde una posicin en otra. El parmetro
opcional sobreescribir puede tener dos valores:True (por
defecto si se omite) si se desea sobrescribir los ficheros o
directorios existentes en destino; False si no se van a
sobrescribir. Al escribir la ruta de destino no se permiten
caracteres comodn.
Objeto.Delete opcion Elimina un directorio o fichero
especificado. El parmetro opcion puede tener dos
valores: True si se desea eliminar los ficheros o directorios
con el atributo slo lectura establecido; False (por defecto si
se omite) si no se van a eliminar.
Objeto.Move destino Mueve un directorio o fichero
especificado desde una posicin a otra. Al escribir la ruta de
destino no se permiten caracteres comodn.

En todos los casos se cerrarn todos los objetos creados en orden


inverso a como fueron abiertos:
<%
Fichero.Close

Set Fichero = Nothing


Directorio.Close
Set Directorio = Nothing
FS.Close
Set FS = Nothing
%>

Estos objetos, juntos con sus propiedades y mtodos, no tienen


mucha utilidad en programas que se ejecuten en el servidor, tal vez
salvo aplicaciones exclusivamente usadas en red local (intranet) y
con las debidas precauciones. No obstante, es posible utilizarlos en
scripts que se ejecuten en el cliente, en cuyo caso tienen ms
sentido. El problema es que el VBScript solamente es interpretado
por los navegadores Internet Explorer de Microsoft. A decisin del
programador queda de nuevo decidir para qu navegador escribe la
aplicacin.
Todos estos objetos tienen equivalencia tambin en JavaScript, que
es interpretado por casi todos los navegadores, incluido el IE. Si te
decides por esta solucin, prueba cuidadosamente el cdigo con
distintas versiones de los navegadores, ya que no todas las
expresiones JavaScript son soportadas por igual.
Este asunto de las versiones de navegador, representa una de los
problemas de ms dificil solucin para los programadores de
aplicaciones internet. En efecto, nada hay ms frustrante para un
posible cliente, que enfrentarse a una aplicacin que se comporta
de forma impredecible, y que falla estrepitosamente debido a que
su navegador no es el que la aplicacin espera. Normalmente, esto
es un cliente perdido.

el objeto ObjectContext
Este objeto se utiliza para controlar las transacciones de datos que
se realizan en ASP a travs del MTS... Aunque puede que no sepas
lo que es el MTS ni una transaccin.
Como transaccin entenderemos cualquier movimiento de datos que
se produzca entre el servidor web y el cliente que solicita los
datos, entendiendo este movimiento como un conjunto. Si ste

movimiento se realiza por completo, sin producirse ningun error,


entonces se dice que la transaccin ha concluido en commit, y si no
termina bien, por producirse algn problema en la DB, en el cdigo
SQL de la consulta, en el cdigo ASP o por no cumplirse alguna
condicin de las programadas en la aplicacin, se dice que la
transaccin ha concluido en abort.
Por ejemplo, imaginemos una tpica aplicacin de comercio
electrnico. En primer lugar el usuario se da de alta como cliente, y
a continuacin hace un pedido cualquiera. Por cualquier razn se
produce un fallo cuando la aplicacin va a guardar el pedido en la
base de datos. En ese momento, MTS entrara en accin y anulara
toda la transaccin, incluida el alta del cliente que s termin bien.
Hara falta todo un libro para explicar como funciona el MTS
(Microsoft Transaction Server), as que nos conformaremos con
saber que es una especie de "intermediario" entre el IIS y el
sistema. Se instala automticamente durante el proceso de
instalacin del Option Pak (no confundir con los Service Pak, que
son actualizaciones del sistema operativo) para Windows NT
Server, que es el paquete que instala el IIS con las extensiones
ASP en el servidor. El MTS controla los recursos fsicos y lgicos
necesarios para que las transacciones con el cliente funcionen lo
mejor posible, sin interferirse unas con otras, y liberando los
recursos cuando stas terminan. La razn de su existencia es,
adems de la optimizacin de recursos, la de poder controlar si una
transaccin ha concluido correctamente o no en tiempo real, cosa
que, sin el MTS, slo es posible saber cuando se produce un error
por tiempo excedido, es decir, mucho tiempo despus de haberse
producido el error.
Para poder utilizar este objeto, hay que invocar primero una
directiva de ASP llamada @Transaction, y que debe escribirse
antes que cualquier otra lnea de cdigo de las necesarias para
producir la transaccin.
El objeto ObjectContext tiene 2 mtodos y 2 eventos:

METODOS
ObjectContext.SetComplete - ObjectContext.SetAbort

Estos mtodos declaran explcitamente que una transaccin ha


sido completada o no, y dejan preparados sus recursos para que
puedan ser actualizados. En ese momento, y si estn definidos en el
programa, los
eventos OnTransactionCommit o OnTransactionAbort,
pertenecientes al mismo objeto ObjectContext, son procesados.
EVENTOS
ObjectContext.OnTransactionAbort()

Este evento se produce cuando una transaccin aborta debido a un


error de programa (como una instruccin incongruente) o de
proceso (por ejemplo, la DB no encuentra los datos pedidos, por lo
que no puede enviarlos al cliente, es decir, la transaccin no puede
realizarse). ObjectContext.OnTransactionAbort no es ms que una
simple subrutina, con un nombre reservado, del estilo de las
existentes en el fichero global.asa, pero que puede ser
invocada solamente desde el cdigo de la pgina que se est
procesando. Es decir, cada pgina ASP escrita deber tener su
propia subrutina para llamar al evento; no es una variable de sesin
ni de aplicacin al alcance de otras pginas de la aplicacin.
El siguiente ejemplo contiene una incongruencia de programa. Tiene
limitado el tiempo de ejecucin a 5 segundos. Como su proceso
normal necesita ms tiempo, se produce un
evento OnTransactionAbort:
<%
@Transaction=Required Language="VBScript"
Response.Buffer = TRUE
Server.ScriptTimeout = 5
%>
<HTML>
<HEAD><TITLE>PRUEBA</TITLE></HEAD>
<BODY>
<%
Do
x=x+1
Response.Write x & "<BR>"
Loop While x < 10000
%>

</BODY>
</HTML>
Sub OnTransactionAborted()
Response.Write "La transaccin ha abortado por exceso de tiempo en su
ejecucin."
End Sub

Y este sera el resultado:


La transaccin ha abortado por exceso de tiempo en su ejecucin.

ObjectContext.OnTransactionCommit()

Este evento se produce cuando una transaccin termina


correctamente. ObjectContext.OnTransactionCommit no es ms
que una simple subrutina, con un nombre reservado, del estilo de las
existentes en el fichero global.asa, pero que puede ser
invocada solamente desde el cdigo de la pgina que se est
procesando. Es decir, cada pgina ASP escrita deber tener su
propia subrutina para llamar al evento; no es una variable de sesin
ni de aplicacin al alcance de otras pginas de la aplicacin.
El siguiente ejemplo no contiene ningn error de programa. Como su
proceso terminar normalmente, se produce un
evento OnTransactionCommit :
<% @Transaction=Required Language="VBScript" %>
<HTML>
<HEAD><TITLE>PRUEBA</TITLE></HEAD>
<BODY>
<%
Do
x=x+1
Response.Write x & "<BR>"
Loop While x < 5
%>
</BODY>
</HTML>
Sub OnTransactionCommit()
Response.Write "La transaccin ha terminado correctamente"
End Sub
Sub OnTransactionAborted()
Response.Write "La transaccin ha abortado por exceso de tiempo en su
ejecucin."
End Sub

Y este sera el resultado:


1
2
3
4
5
La transaccin ha terminado correctamente.

Un ejemplo completo

He aqu un ejemplo ya conocido, implementando estos mtodos y


eventos:
<% @Transaction=Required Language="VBScript" %>
<HTML>
<HEAD><TITLE>PRUEBA</TITLE></HEAD>
<BODY>
<%
Set DB = Server.CreateObject("ADODB.Connection")
Set RS = Server.CreateObject("ADODB.RecordSet")
SQL ="SELECT convert(char(8), nom_dni) + nom_nif AS 'NIF', " & _
"nom_apellidos AS 'Apellidos', " & _
"nom_nombre AS 'Nombre', " & _
"nom_postal AS 'Postal' " & _
"nom_postal + ' ' + nom_localidad AS 'Localidad', " & _
"nom_provincia AS 'Provincia' " & _
"FROM nombres WHERE nom_dni = 12345678 "
DB.Open "DB_nombre", "DB_user", "DB_password"
RS.Open SQL, DB
If RS.EOF AND RS.BOF Then
ObjectContext.SetAbort
Else
Response.Write("<TABLE BORDER=1>")
For i = 0 to RS.Fields.Count - 1
Response.Write("<TR><TH>")
Response.Write(RS(i).Name)
Response.Write("</TH><TD>")
Response.Write(RS(i))
Response.Write("</TD></TR>")
Next
Response.Write("</TABLE> <P>")
ObjectContext.SetComplete
End if
RS.Close
Set RS = Nothing
DB.Close
Set DB = Nothing
%>
</BODY>
</HTML>

Sub OnTransactionAborted()
Response.Write "Transaccin abortada. No se encontraron registros"
End Sub
Sub OnTransactionCommit()
Response.Write "Transaccin realizada."
End Sub

Si todo termina bien, ste sera el resultado:


NIF

12345678Z

Apellidos Garcia
Nombre Juan
Postal

12345

Localidad 12345 Villa Desconocida


Provincia Guadalajara
Transaccin realizada.

Y si el registro buscado no se encuentra, al no concluir la


transaccin, solamente obtendremos esto:
Transaccin abortada. No se encontraron registros

Visual Basic Script


Bajo esta denominacin Microsoft presenta una versin del
lenguaje de programacin Visual Basic, especialmente preparada
para conectar con ASP. El conjunto de los objetos de ASP
y VBScript permite programar aplicaciones internet para el IIS
(Information Internet Server) tambin de Microsoft.
VBScript no tiene todas las funcionalidades de Visual Basic, por
ejemplo, carece de funciones intrnsecas de acceso a ficheros o a
bases de datos, de ah la necesidad de recurrir a los objetos
propios de ASP para determinadas tareas; algunos comandos estn
modificados respecto a su original en Visual Basic para lograr una
mejor conexin con ellos.
Todo lo dicho respecto a cmo se escribe el ASP es vlido para
VBScript, y como ya has visto en los temas sobre los objetos de
ASP, se pueden mezclar ambas cosas como mejor convenga.

VBScript no est reservado exclusivamente para ser utilizado en


pginas ASP que se ejecutan en el servidor, tambin puede
utilizarse en pginas HTML para que sean ejecutadas en el
navegador. El nico problema es que solamente los navegadores de
Microsoft (Internet Explorer) son capaces de interpretarlo. Esta
es sin duda la gran virtud de ASP: no importa qu navegador tiene
el cliente, ya que slo se le enva HTML estndard. Por ahora, el
nico lenguaje de comandos compatible con todos los navegadores
modernos es Java Script, aunque existen algunas
incompatibilidades entre versiones.
Por tipos de comandos, en VBScript tenemos:

Constantes
Variables
Operadores
Instrucciones
Funciones

En VBScript existen dos niveles de ejecucin de comandos: el nivel


de procedimiento, que contiene instrucciones dentro de
procedimientos Function (funciones) o Sub (sub rutinas), y el nivel
de secuencia de comandos que consiste en cualquier cdigo escrito
fuera de un procedimiento. Es decir, que el nivel de secuencia de
comandos contiene al nivel de procedimientos, y un procedimiento
no puede estar dentro de otro procedimiento. Un procedimiento si
puede llamar a otro procedimiento, y por supuesto, pueden ser
llamados desde el nivel de secuencia de comandos. En el siguiente
ejemplo, que contiene los dos niveles, puede verse como desde el
nivel de secuencia de comandos se llama a un procedimiento Sub,
que a su vez invoca una funcin:
<SCRIPT LANGUAGE=VBScript RUNAT=Server>
Public Sub Rutina_hora
Response.Write( Time() )
End Sub
</SCRIPT>

<HTML>
<HEAD><TITLE>Prueba de ASP</TITLE></HEAD>
<BODY>
Bienvenidos al ASP. Son las <% Call(Rutina_hora) %>
</BODY>
</HTML>
VBScript no aporta procedimientos Sub propios, que debern ser
creados por el usuario, pero si posee gran cantidad de
procedimientos Function intrnsecos que se vern en el apartado
"Funciones".

Procedimientos Sub
Un procedimiento Sub es una serie de comandos VBScript, escritos
entre una instruccin Sub y otra End Sub, que ejecutan acciones
pero no devuelven ningn valor, cosa que si hacen las funciones, que
en cambio, no ejecutan acciones. Como puedes ver en el ejemplo
anterior, el procedimiento Rutina_hora no devuelve valor alguno; se
limita a llamar al objeto Response de ASP para presentar en
pantalla un valor que no produce l mismo, sino la funcin Time().
Un procedimiento Sub puede tener argumentos, es decir, unos
valores o parmetros iniciales necesarios para ejecutar sus
instrucciones. Estos valores pueden proceder de constantes,
variables o expresiones que a su vez podran obtener los datos por
una llamada a otro procedimiento. Por ejemplo, imagina un
procedimiento que busca un registro en una base de datos;
lgicamente necesitara, por lo menos, un argumento con el
identificador del registro a buscar.
Los procedimientos Sub, de forma predeterminada, son pblicos si
no se indica lo contrario. Para cambiar eso se escribe la
instruccion Public o Private delante del nombre del procedimiento.
Un procedimiento pblico es visible a todos los otros
procedimientos en la secuencia de comandos. El valor de las
variables locales en un procedimiento Sub no se mantiene entre
llamadas al procedimiento.

No se puede definir un procedimiento Sub dentro de otro


procedimiento Sub o Function. Si es necesario programar una salida
del procedimiento sin ejecutar todas sus instrucciones, como por
ejemplo, cuando se produce un error, se utiliza la instruccin Exit
Sub. Se pueden escribir cuantas instrucciones Exit Sub sean
necesarias.
Despus de ejecutar un procedimiento Sub (o despus de
abandonarlo sin ejecutar por la razn que sea) la ejecucin del
programa continua con la instruccin que sigue a la que llam el
procedimiento.
Se puede llamar a un procedimiento Sub de dos maneras:
simplemente escribiendo su nombre seguido de los argumentos, si
los hay, o utilizando la instruccin Call(). No est muy claro para qu
sirve esta instruccin en el caso de los procedimientos Sub, ya que
funcionan igual. La nica diferencia consiste en que si no se utiliza
Call(), los argumentos van al lado del nombre del procedimiento sin
ms, y si se utiliza hay que escribirlos dentro de un par de
parntesis. Yo la utilizo por costumbre, ya que en otros lenguajes
de programacin si es necesaria.
Un procedimiento Sub puede llamarse a s mismo cuantas veces sea
necesario. Utilizar esto con precaucin, ya que si falla algo, o no
est adecuadamente programado, entrara en un bucle infinito y se
puede colapsar el servidor.

Procedimientos Function
Un procedimiento Function, o simplemente funcin, es una serie de
comandos VBScript, escritos entre una instruccin Function y
otra End Function, que devuelven un valor.
Los procedimientos Function, igual que los Sub, de forma
predeterminada, son pblicos si no se indica lo contrario. Para
cambiar su alcance se escribe la instruccion Public o Privatedelante
del nombre del procedimiento. Un procedimiento pblico es visible a
todos los otros procedimientos en la secuencia de comandos. El

valor de las variables locales en un procedimiento Function no se


mantiene entre llamadas al procedimiento.
No se puede definir un procedimiento Function dentro de otro
procedimiento Function. Si es necesario programar una salida del
procedimiento sin ejecutar todas sus instrucciones, como por
ejemplo, cuando se produce un error, se utiliza la instruccin Exit
Function. Se pueden escribir cuantas instrucciones Exit
Function sean necesarias.
Despus de ejecutar un procedimiento Function (o despus de
abandonarlo sin ejecutar por la razn que sea) la ejecucin del
programa continua con la instruccin que sigue a la que llam el
procedimiento. Dado que las funciones devuelven valores, si por
cualquier causa la funcin ha fallado, se debe tener previsto, ya que
no aportar el valor esperado. Una funcin numrica, en caso de
fallo devolver cero (0), una de cadena un string de longitud cero
(""), y una funcin que devuelve una referencia a un objeto,
devuelve Nothing.
Un procedimiento Function puede tener argumentos, al igual que los
procedimientos Sub. Si no tiene argumentos, se deber incluir un
par de parntesis vacios junto al nombre, como puedes ver en el
ejemplo de arriba, donde se invoca a la funcin Time(). Las
funciones devuelven un valor asignndolo a su propio nombre en el
cdigo del procedimiento. El tipo de datos devuelto por un
procedimiento Function siempre es Variant, lo que permite utilizar
la funcin en cualquier expresin o entorno adecuados. El tipo de
datos de los argumentos puede ser distinto del tipo devuelto por la
funcin.
Se puede llamar a una funcin de dos maneras: simplemente
escribiendo su nombre seguido de los argumentos, si los hay, o
utilizando la instruccin Call(). Tampoco est muy claro para qu
sirve esta instruccin, como en el caso de los procedimientos Sub,
ya que funcionan igual. La nica diferencia consiste en que si no se
utiliza Call(), los argumentos van al lado del nombre del

procedimiento sin ms, y si se utiliza, hay que escribirlos dentro de


un par de parntesis.
Al igual que los procedimientos Sub, una funcin puede llamarse a s
misma, y a otras funciones, pero no puede llamar a un procedimiento
Sub.
Veamos un ejemplo de escritura de una funcin definida por el
usuario:
<SCRIPT LANGUAGE=VBScript RUNAT=Server>
Public Function Letra_NIF(DNI)
Const Letras = "TRWAGMYFPDXBNJZSQVHLCKE"
Letra_NIF = Mid(Letras, 1 + (DNI Mod 23), 1)
End Function
</SCRIPT>
<HTML>
<HEAD><TITLE>Prueba de ASP y VBScript</TITLE></HEAD>
<BODY>
<% Response.Write "La letra del DNI 11111111 es: "
& Letra_NIF(11111111) %>
</BODY>
</HTML>

Y este sera el resultado:


La letra del DNI 11111111 es: H

Como puedes ver, es muy simple: se comienza definiendo el nombre


de la funcin: Letra_NIF() y su argumento: DNI. Eso significa que
es necesario darle un valor al argumento DNIpara que pueda
trabajar la funcin. El procedimiento que realiza nuestra funcin
para obtener el valor buscado consiste en dividir el argumento DNI
entre 23 y obtener el resto (Mod). Ese resto, se utiliza como
segundo argumento de otra funcin que proporciona
VBScript: Mid(), que sirve para extraer un sub string de una cadena
de texto. La funcinMid() utiliza tres argumentos: en primer lugar
el nombre de la cadena sobre la que hay que buscar, en este
caso Letras; despus hay que darle el nmero de posicin donde
comenzar el sub string, en este caso la letra H, que est en la
posicin 19 de la cadena; y por ltimo, el tercer argumento indica

cuantos caracteres hay que extraer de la cadena comenzando en la


posicin que indica el segundo argumento, y que en este caso es 1.
Ya tenemos la letra buscada. Ahora slo hay que asignarla a algo
para que se pueda obtener desde donde sea necesario, y para ello la
asignaremos al nombre de la propia funcin, que actuar como si
fuese una variable cualquiera:
Letra_NIF = Mid(Letras, 1 + (DNI Mod 23), 1)
Seguramente te preguntars porqu hay que sumarle 1 al resultado
de la divisin (DNI Mod 23). Ello se debe a que Mid() comienza a
contar por el cero, lo que nos dara la letra V en lugar de la H, que
es la correcta, si utilizamos el valor tal como se obtiene.

Constantes y variables...
...y algunas instrucciones
Se puede definir una constante como un nombre significativo que
contiene un valor, numrico, texto o de cualquier tipo, y que una vez
definida, no cambia. Las constantes puede ser intrnsecas, es decir
con nombres y valores preestablecidos en VBScript, como por
ejemplo vbCrLf cuyo valor es equivalente a Chr(13) & Chr(10), o lo
que es lo mismo, retorno de carro y avance de lnea. Tambin
tenemos las constantes definidas por el usuario, que son aquellas
que reciben el nombre y valor que el usuario decida. Por supuesto,
no puedes crear una constante con el mismo nombre de una
intrnseca, ni dos cualesquiera con el mismo nombre, aunque s con
el mismo valor. Por ejemplo:
<%
Const xxMiConstante = "Esto es un string constante"
Const xxDia = 28
Const xxFecha = #02-28-2000#
%>

Y para ver sus contenidos:


<%
Response.Write( xxMiConstante & "<BR>")
Response.Write( xxDia & "<BR>")

Response.Write( xxFecha & "<BR>")


%>

Y este sera el resultado:


Esto es un string constante
28
02-28-2000

Fjate que para crear estas constantes definidas por el usuario,


primero hay que escribir la instruccin Const. Si simplemente
escribimos xxDia = 28 acabamos de crear unavariable, que viene a
ser lo mismo, pero cuyo contenido, como su nombre indica, puede
variarse en cualquier momento. Tambin habrs visto que a todas
ellas se les ha antepuestoxx delante del nombre. En efecto, el
nombre de las constantes definidas por el usuario es libre, pero es
buena idea acostrumbrarse a utilizar una forma de nombre que
permita distinguir despus, a simple vista, qu es una constante y
qu una variable. Todas las constantes intrnsecas, por ejemplo,
comienzan con vb.
Los nombres de variables y constantes tienen que comenzar
siempre por una letra, no pueden contener un punto, y deben tener
menos de 255 caracteres. VBScript no distingue entre maysculas
y minsculas como hace JavaScritpt. As, se considerar la misma
variable MiVariable que mivariable o MIVARIABLE. Otra cosa
importante es no dejar espacios en blanco en los nombres de
variables o constantes. Por ejemplo, el nombre de variable "Mi
variable" te dar problemas. Si quieres utilizar varias palabras para
construir el nombre, debes usar un signo de continuidad, por
ejemplo el subrayado: Mi_Variable. No es recomendable usar el
guion o la barra inclinada, que pueden ser confundidos en algunos
casos con operadores matemticos.
Recuerda que tanto a la hora de definir constantes como variables,
sus valores, si son textos, deben ir entre comillas dobles ("..."), las
fechas y horas entre (#...#) y los nmeros sin nada. No olvides
tampoco que el formato de fecha en VBScript es mm/dd/aaaa,
formato americano, en lugar del europeo dd/mm/aaaa.

Como ya has visto, al definir una constante, junto con el nombre se


le asigna un valor, lo que implica que la constante tiene un tipo de
datos invariable. No sucede lo mismo con lasvariables, que por
defecto tienen el tipo de datos Variant propio de Visual Basic, lo
que les permite recibir cualquier tipo de dato durante el proceso
sin necesidad de redefiniciones adicionales. Aunque puede omitirse,
es conveniente utilizar la instruccin Dim para definir variables. Por
ejemplo:
<%
Dim MiVariable
MiVariable = "Esto es un string constante"
MiVariable = 28
MiVariable = #02-28-2000#
%>

Puede definirse ms de una variable en una misma lnea con Dim.


As:
<%
Dim Variable1, Variable2, Variable3
%>

Estos son los tipos de datos existentes en VBScript:

Array (8192) Una matriz de datos.


Boolean (11) Contiene True o False
Byte (17) Contiene un entero entre 0 y 255.
Currency (6) Un nmero entre -922.337.203.685.477,5808 y
922.337.203.685.477,5807
DataObject (13) Un objeto de acceso a datos (Al asignar el
valor hay que anteponer la instruccin Set).
Date o Time (7) Contiene un nmero que representa una
fecha entre el 1 de enero de 100 y el 31 de diciembre de
9999.
Double (5) Contiene un nmero de precisin doble y punto
flotante en el intervalo de -1,79769313486232E308 y 4,94065645841247E-324 para valores negativos, y entre
4,94065645841247E-324 y 1,79769313486232E308 para
valores positivos.

Empty (0) Sin inicializar. El valor es 0 para variables


numricas o una cadena de longitud cero ("") para variables de
cadena.
Error (10) Un nmero de error que puede ser de 0 a 65.535,
inclusive, que se corresponde con la propiedad Number del
objeto Err. Cuando se combina con la propiedadName del
objeto Err, este nmero representa un mensaje de error en
particular.
Integer (2) Un entero -32.768 y 32.767.
Long (3) Un entero -2.147.483.648 y 2.147.483.647.
Null (1) Contiene intencionadamente datos no vlidos.
Object (9) Contiene un objeto (Al asignar el valor hay que
anteponer la instruccin Set)
String (8) Contiene una cadena de longitud variable que puede
contener hasta 2 mil millones de caracteres de longitud.

Si a cualquiera de estos tipos de datos le anteponemos vb, por


ejemplo vbArray, obtendremos los nombres de las constantes
intrnsecas devueltas por la funcinVarType(MiVariable), que se
utiliza para saber qu tipo de datos contiene una variable en un
momento determinado, aunque lo que devuelve la funcin es el valor
numrico de la constante (el nmero que aparece entre parntesis
junto a cada nombre de tipo). Tambin puede utilizarse la
funcin TypeName(MiVariable) para obtener el nombre del tipo.
En el momento de crearlas, y antes de darles valor, es decir, cuando
se inicializan, las variables numricas se inicializan con 0 y una de
cadena (string) se inicializa con una cadena de longitud cero ("" tipo
de dato 0) que no hay que confundir con el valor Null (tipo de dato
1) de las bases de datos, ni con un espacio en blanco (tipo de dato
8). Para controlar si una variable est vaca o no, existe la
funcin IsEmpty(MiVariable), que devuelve True o False segn el
contenido de la variable.
Otra cosa importante de las constantes y variables es su radio de
accin o alcance. El alcance de una constante o una variable se
refiere a desde donde ser posible invocarla una vez definida. Para

definir el alcance, se utilizan dos instrucciones: Private (por


defecto para las variables) y Public (por defecto para las
constantes). La primera limita la variable o constante a la secuencia
de comandos donde es definida, y la segunda permite utilizarlas
desde cualquier secuencia de comandos. Como nivel de secuencia
de comandos, se entiende cualquier cdigo que est fuera de un
procedimiento Function o Sub. Las variables definidas dentro de un
procedimiento tienen su alcance limitado a ese procedimiento. He
aqu un ejemplo de definicin de variable:
<%
Public Dim MiVariable
MiVariable = 28
%>

Hasta aqu hemos visto variables que contienen un solo valor


(variables escalares), pero pueden definirse de forma que
almacenen 2 o ms valores. Este tipo de variables se denominan
variables matriciales o dinmicas, y se definen igual que las
escalares, pero escribiendo un par de parntesis delante del
nombre. Si dentro de los parntesis escribimos un nmero, ste
indicar cuantos valores puede almacenar la variable. Si no se
escribie ningun nmero, la variable queda definida sin dimensionar,
y se puede establecer sus dimensiones ms tarde con la
instruccin ReDim. Por ejemplo:
<%
Dim MiVariable()
...
...
ReDim MiVariable(5)
%>

Una variable dinmica se puede redimensionar cuantas veces sea


necesario, pero solamente se puede cambiar el nmero de
elementos, no su estructura. En el ejemplo anterior se ha definido
una matriz de una dimensin y 5 elementos, lo que significa que
puede almacenar 5 valores. Para ello solo hay que asignar un valor a
cada entrada del ndice comenzando por el cero:
<%
Dim MiVariable()

...
...
ReDim MiVariable(4)
Mivariable(0)
Mivariable(1)
Mivariable(2)
Mivariable(3)
Mivariable(4)
%>

=
=
=
=
=

10
20
30
40
50

La asignacin de valores o la lectura de los mismos, tambin se


puede hacer mediante un bucle tpico For To Next. Como se ha
dicho, una vez dimensionada, se puede cambiar el nmero de
elementos, pero no sus dimensiones, es decir, que no se puede
convertir a, por ejemplo, MiVariable(4, 4) que es una variable de 5
dimensiones y cinco elementos.
Las matrices de dos dimensiones se pueden comparar con tablas de
datos, donde el primer nmero, en este caso el 4, indica el nmero
de filas y el segundo indicara el nmero de columnas. Si no hay
segundo nmero, por defecto se entiende que es cero, lo que indica
una sola columna. Otra cosa que no se puede cambiar es el tipo de
datos, que es nico para todos los valores de la matriz, es decir,
que si el primer valor asignado es numrico, todos los dems
debern ser del mismo tipo.
Hay que tener en cuenta, que si hay valores cargados en una matriz
y la redimensionamos, los valores se pierden. Para evitar esto,
VBScript dispone de la palabra clave Preservepara conservar el
contenido de la matriz cuando se produce el cambio de tamao. No
obstante, utilizando Preserve slo se puede cambiar el tamao de la
ltima dimensin de la matriz y tampoco se puede cambiar el
nmero de dimensiones. Por ejemplo, si la matriz slo tiene una
dimensin, se puede cambiar el tamao de esa dimensinn ya que es
la ltima y nica dimensin.
Si la matriz tiene dos o ms dimensiones, slo se puede cambiar la
dimensin de la ltima y todava conservar el contenido de la
matriz. Por ejemplo:
<%
ReDim MiVariable(4, 4, 4)

....
....
ReDim MiVariable(4, 4, 5) %>

Para liberar la memoria asignada a matrices dinmicas, se utiliza la


instruccin Erase. Despus de utilizar Erase, si se quiere hacer
referencia de nuevo a la matriz, es necesario volver a declarar las
dimensiones de las variables de la matriz con la instruccin ReDim.
Hay que tener presente que Erase no recupera la memoria asignada
a las matrices de tamao fijo, solamente de las dinmicas. Si es
fija, lo que hace es borrar los valores que contenga, cambindolos
por 0 si es numrica, por "" si es de texto y por Nothing si es una
matriz de objetos.
Una variable multidimensional puede tener hasta 60 dimensiones,
cosa bastante complicada de utilizar. Hay que usar la redimensin
de matrices con cuidado, ya que todo esto se hace en memoria. Si
se escribe una aplicacin con muchas matrices dinmicas, cuyos
valores mximos no esten debidamente controlados, y hay muchos
usuarios utilizando la aplicacin, el servidor puede quedarse sin
recursos. No hay que olvidar tampoco que las matrices de datos no
son el sustituto de una DB.
Para asignar un objeto a una variable, hay que anteponer la
instruccin Set. Al asignar una referencia de objeto a una variable,
no se crea una copia del objeto, se crea una referencia al objeto.
Se puede definir ms de una variable con referencia al mismo
objeto. Debido a que estas variables son referencias al objeto (y no
copias de l), cualquier cambio ocurrido en el objeto se refleja en
todas las variables que se refieren al mismo.

Visual Basic Script


Operadores

Sin tener en cuenta los operadores de concatenacin (& y +) de los


que ya se ha hablado en la seccin cmo se escribe el ASP, en
VBScript hay tres clases de operadores:

Operadores aritmticos.

Operadores de comparacin.
Operadores lgicos.

Prioridad de los operadores

Los operadores tienen unas prioridades preestablecidas, es decir,


que si en una expresin hay que resolver varias operaciones, cada
parte se evaluar y resolver en un cierto orden. Si es necesario
alterar ese orden, se puede recurrir a escribir las distintas partes
de la expresin entre parntesis, lo que provoca que se ejecuten
antes que las partes que no esten entre parntesis. No obstante,
las operaciones escritas dentro de los parntesis continuarn
ejecutndose en el orden de prioridad de los distintos operadores.
Si se escriben expresiones que contienen operadores de distintas
clases, se evaluarn en el orden expuesto ms arriba. Todos los
operadores de comparacin tienen la misma prioridad, por lo que se
ejecutarn, de izquierda a derecha en el orden en el que se hayan
escrito. Los aritmticos y lgicos lo hacen en el siguiente orden:
Aritmticos

Exponenciacin (^). Elevar un nmero a la potencia del


exponente: 3^2 = 9 . Si el nmero o el exponente es una
expresin de valor Null, el resultado tambin da Null. El nmero
puede ser negativo si el exponente es un entero.
Negativo (-). Indica el valor negativo de un nmero o una

expresin: -3.
Multiplicacin (*). Multiplica dos nmeros: 3*2 = 6 .
Divisin (/). Divide dos nmeros, obteniendo un cociente de coma

flotante: 5/2 = 2,5 .

Divisin entera (\). Divide dos nmeros, obteniendo

un cociente entero: 5\2 = 2 . Para obtener el cociente entero,


VBScript lo que hace es redondear primero los factores de la
divisin aplicndoles un tipo de dato que no soporta decimales,
como Integer, Long o Byte, y procediendo despus a realizar la
divisin.

Mdulo aritmtico (Mod). Divide dos nmeros, obteniendo

un resto entero: 11111111 Mod 23 = 18 . Para obtener el resto


entero, VBScript lo que hace es redondear primero los factores de
la divisin y una vez convertidos en enteros procede a realizarla.
Suma (+). Suma dos nmeros: 3+2 = 5 . Si en lugar de nmeros se

suman cadenas, como por ejemplo "A"+"B" = "AB" se produce


una concatenacin. No debe utilizarse para este fin. El operador
correcto para concatenar cadenas es &.
Resta (-). Halla la diferencia entre dos nmeros. Ejemplo A: 3-2 =

1 . Ejemplo B: (-1)-(-2) = 1 .
Concatenacin de cadenas (&). "A"&"B" = AB . Si alguno de los

elementos a concatenar no es una cadena de texto, queda


convertido a cadena: "AB"&123 = "AB123"

Aunque aparece aqu, el operador de concatenacin (&) no es un


operador aritmtico, pero su prioridad hace que se ejecute despus
de todos los aritmticos y antes de todos los de comparacin. La
multiplicacin y la divisin, tienen entre s la misma prioridad, por lo
que se ejecutan en el orden en que se hayan escrito en la expresin.
Lo mismo sucede con la suma y la resta. Fjate en que el signo
negativo aparece en segunda posicin del orden de prioridad, no
confundir con la resta, que est en las ltimas posiciones.
Lgicos

Estos operadores tienen unas aplicaciones un tanto especiales, ya


que no funcionan como los aritmticos, conocidos por todos. Para
comprender el funcionamiento de los operadores lgicos, primero
hay que saber qu son los estados lgicos de una expresin. Y te
preguntars que es eso de "estados lgicos"... Esta es una cuestin
un tanto filosfica, ya que el estado lgico de algo depende de
respecto a qu establecemos ese estado, y por tanto no siempre
ser el mismo. Depender del entorno o contexto en el que se
define y utiliza la expresin. En BVScript hay tres posibles estados
lgicos: True (verdadero), False (falso) y Null (nulo, es decir que no
se ha establecido estado alguno por la razn que sea)

Por ejemplo, supongamos que hay que establecer el estado lgico de


un material: El hierro. Evidentemente, para establecer un estado
lgico primero tenemos que decidir respecto a qu se establece ese
estado, ya que no podemos decir simplemente que el hierro es
verdad o mentira. Nos tendremos que referir a alguna cualidad del
material y compararla con algo para establecer si el estado es
verdadero o falso.
Sea la expresin El hierro es un metal . Si tenemos que
establecer el estado lgico de esta expresin, la respuesta
inmediata es Verdadero (True) y si la expresin fuese El hierro
no es un metal , inmediatamente pensarmos que el estado
adecuado es Falso (False)
Una vez establecido el estado lgico de la expresin,
los operadores lgicos nos permitin tomar decisiones mediante la
verificacin de ese estado, bien tomando uno solo, o agrupando
varios de ellos. Al igual que los operadores aritmticos, los
operadores lgicos tienen un orden preestablecido de evaluacin:
Negacin lgica (Not). Establece una negacin lgica en una expresin,

es decir, que ante una expresin, cuyo estado lgico


es True (verdadero), el operador har que devuelvaFalse (falso).
El hierro es un metal = True.
Not El hierro es un metal = False.
Hay tres posibles resultados aplicando este operador a una
expresin:

Si la expresin = True el operador devuelve False.


Si la expresin = False el operador devuelve True.
Si la expresin = Null el operador devuelve Null.
Conjuncin lgica (And). Establece una conjuncin lgica de dos

expresiones, es decir, que han de resultar True (verdadero) las dos


expresiones para que el resultado final tambin lo sea.

El hierro es un metal = True.


El hierro es duro = True.
El hierro es un metal And El hierro es duro = True.
Hay 9 posibles resultados aplicando este operador
a dos expresiones, aunque es posible incluir cuantas sean
necesarias:
Si la Expresin 1
resultado es True.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es Null.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es Null.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es Null.

= True And Expresin 2 = True el


= True And Expresin 2 = False el
= True And Expresin 2 = Null el
= False And Expresin 2 = True el
= False And Expresin 2 = False el
= False And Expresin 2 = Null el
= Null And Expresin 2 = True el
= Null And Expresin 2 = False el
= Null And Expresin 2 = Null el

Como puedes ver, si, y slo si, ambas expresiones se evalan como
True, el resultado es True. Si cualquiera de las expresiones es
False, el resultado es False.
Disyuncin lgica (Or). Establece una disyuncin lgica de dos

expresiones, es decir, que el resultado se dar evaluando una


expresin u otra.
El hierro es un metal = True.
El hierro es duro = True.
El hierro es un metal Or El hierro es duro = True.

Hay 9 posibles resultados aplicando este operador


a dos expresiones, aunque es posible incluir cuantas sean
necesarias:
Si la Expresin 1
resultado es True.
Si la Expresin 1
resultado es True.
Si la Expresin 1
resultado es True.
Si la Expresin 1
resultado es True.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es Null.
Si la Expresin 1
resultado es True.
Si la Expresin 1
resultado es Null.
Si la Expresin 1
resultado es Null.

= True Or Expresin 2 = True el


= True Or Expresin 2 = False el
= True Or Expresin 2 = Null el
= False Or Expresin 2 = True el
= False Or Expresin 2 = False el
= False Or Expresin 2 = Null el
= Null Or Expresin 2 = True el
= Null Or Expresin 2 = False el
= Null Or Expresin 2 = Null el

Como puedes ver, si cualquiera de las expresiones, o ambas, son


True, el resultado es True.
Exclusin lgica (Xor). Establece una exclusin lgica de dos

expresiones, es decir, que el resultado se dar evaluando una


expresin u otra, y dar True si solamente una de ellas es True, lo
que implica la exclusin de la otra.
El hierro es un metal = True.
El hierro es duro = True.
El hierro es un metal Xor El hierro es duro = False.
Hay 4 posibles resultados aplicando este operador
a dos expresiones:

Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es True.
Si la Expresin 1
resultado es True.
Si la Expresin 1
resultado es False.

= True Xor Expresin 2 = True el


= True Xor Expresin 2 = False el
= False Xor Expresin 2 = True el
= False Xor Expresin 2 = False el

Como puedes ver, si una y slo una de las expresiones es True, el


resultado es True. Si cualquiera de las expresiones es Null, el
resultado tambin ser Null.
Equivalencia lgica (Eqv). Establece una equivalencia lgica de dos

expresiones, es decir, que el resultado se dar cuando las dos


expresiones sean equivalentes.

El hierro es un metal = True.


El hierro es duro = True.
El hierro es un metal Eqv El hierro es duro = True.
Hay 4 posibles resultados aplicando este operador
a dos expresiones:
Si la Expresin 1
resultado es True.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es True.

= True Eqv Expresin 2 = True el


= True Eqv Expresin 2 = False el
= False Eqv Expresin 2 = True el
= False Eqv Expresin 2 = False el

En resumen, solamente si las dos expresiones son equivalentes


(iguales), el resultado es True. Si cualquiera de las expresiones es
Null, el resultado tambin ser Null.
Como puedes ver, hay una gran variedad de operadores, y por
supuesto, se pueden combinar entre ellos. Cuando se escriben

expresiones lgicas complejas es recomendable usar los parntesis


para cada sub expresin participante, y no olvides tener siempre en
cuenta el orden de evaluacin de los operadores. Es relativamente
fcil equivocarse al escribir expresiones complicadas, y es buena
idea probar siempre lo escrito con cuantas variaciones sea posible
para asegurarse de que no se producen resultados inesperados.
Adems de en el cdigo de programas, los operadores lgicos se
utilizan mucho en las consultas a bases de datos. El lenguaje SQL
permite escribir consultas sumamente complejas utilizando estos
operadores. Por ejemplo, las siguiente consulta muestra los
registros de una DB de noticias sobre un tema concreto. Se
requiere que las noticias se muestren como mximo durante un mes
y un dia despus de haberse incluido en la DB. Durante el mes de
agosto, por vacaciones del personal, el tiempo no debe contar, por
lo que las noticias incluidas el 31 de julio deben expirar el 1 de
octubre en lugar del 31 de agosto.
SELECT
...
...
FROM
...
...
WHERE (
(DatePart(Month, Date()) NOT IN(8,9) )
AND (DateAdd(Day, 2, DateAdd(Month, 1, Fecha_alta)) >
Date() )
AND (tema = 'Deportes')
)
OR
(
(DatePart(Month, Date()) IN(8,9) )
AND (DateAdd(Day, 2, DateAdd(Month, 2, Fecha_alta)) >
Date() )
AND (tema = 'Deportes')
)
De comparacin

Y por ltimo, y aunque solo sea para ver los que hay y sus smbolos,
he aqu los de comparacin, ya que todos tienen el mismo orden de
prioridad, por lo que se evalan en el orden en que hayan sido
escritos, de izquierda a derecha:

Igualdad (=)
Desigualdad (<>)

Menor que (<)


Mayor que (>)
Menor o igual que (<=)
Mayor o igual que (>=)
Equivalencia de objeto (Is)

Todos ellos sobradamente conocidos. Solamente Is requiere alguna


explicacin: es ste un operador de comparacin de referencia
de objeto. No compara objetos o sus valores; slo comprueba si dos
referencias a objetos se refieren al mismo objeto. Trabaja de
forma similar a los operadores lgicos, aunque no lo es, devolviendo
un estado True o False. Por ejemplo:
Objeto_A = Un_Objeto
Objeto_B = Un_objeto
Objeto_C = Otro_objeto
Objeto_A Is Objeto_B = True
Objeto_A Is Objeto_C = False

Visual Basic Script


Instrucciones

Instrucciones condicionales
Aqu comenzaremos a ver las instrucciones de VBScript, y lo
haremos por las que seguramente son las ms utilizadas de todas
ellas: las instrucciones condicionales. En efecto, raro es el
programa, por pequeo y simple que sea, que no contenga una o
varias instrucciones If.. Then.. Else, que traducido viene a ser
algo as: Si llueve Entonces haces esto Si nohaces esto otro. Es
como el interruptor elctrico de tu lmpara: si est abierto la luz
se apaga, y si est cerrado, se enciende. Y expresndolo en la jerga
que entienden los ordenadores, la primera parte de la instruccin
( If) lo que hace es evaluar si la expresin propuesta (en este caso
si llueve o no) devuelve True o False. Si... de nuevo aparecen los
operadores lgicos. En las instrucciones condicionales pueden
utilizarse todos los operadores lgicos que ya conocemos.

La instruccin If se puede escribir de tres formas distintas, segn


el nmero de condiciones que haya que evaluar:
Sintaxis de lnea nica, en la que se omite la palabra clave Else. es
decir, que no hay que hacer nada si no se cumple la condicin
propuesta:
If llueve Then abrir paraguas

Sintaxis tpica de bloque en la que s se indica qu hacer si la


condicin propuesta no devuelve True.
Hay que cerrarla con End If:
If llueve Then
abrir paraguas
Else
no abrir paraguas
End If

Tambin puede utilizarse esta sintaxis aunque no se escriba la


parte Else.
Con la siguiente sintaxis se pueden evaluar condiciones distintas
pudiendo tomar diferentes decisiones o siempre la misma, segun
convenga:
If llueve Then
abrir paraguas
ElseIf llueve mucho Then
sacar la barca
ElseIf graniza Then
sacar el casco
Else
ir la playa
End If
O bien:
If llueve Then
no salir de casa
ElseIf llueve mucho Then
no salir de casa
ElseIf graniza Then
no salir de casa
Else
ir la playa
End If

Aunque en este caso sera ms eficiente usar el operador Or, ya


que con una sola evaluacin se hallara la decisin, que es nica:

If llueve Or graniza Or llueve mucho Then


no salir de casa
Else
ir la playa
End If

En el enunciado de la condicin If pueden utilizarse todos los


operadores lgicos que ya conocemos, pudindose escribir
expresiones muy complejas.
Si lo que queremos es evaluar siempre la misma condicin, y tomar
distintas decisiones, es preferible utilizar la otra instruccin
condicional de VBScript: Select Case
Select Case que tiempo hace?
Case llueve mucho
sacar la barca
Case graniza
sacar el casco
Case Else
ir la playa
End Select

En cualquier caso, con ambas instrucciones, si ms de una condicin


devuelve True, solamente se ejecutarn las decisiones de la
primera de ellas, ignorndose el resto. Las dos instrucciones se
puede utilizar cuantas veces sea preciso, asi como anidarlas. He
aqu un ejemplo sencillo de anidamiento:
If llueve Then
If llueve poco Then
abrir paraguas A
End If
If llueve mucho Then
abrir paraguas B
End If
Else
If no hace sol Then
coger paraguas
End If
If hace sol Then
no coger paraguas
End If
End If

Instrucciones de bucle
Otro tipo de instrucciones, tambin muy utilizadas en
programacin, son las de repeticin o instrucciones de bucle. Como
su nombre indica, sirven para repetir un grupo de comandos
cualesquiera un nmero determinado de veces, formando un bucle.
Siempre que se programan instrucciones de bucle hay que

asegurarse de que ste tendr un final controlado, para evitar el


bucle infinito que colapsara el servidor.
Un bucle tpico es el definido con la instruccin For.. To.. Next,
cuya sintaxis es la siguiente:
For contador = inicio To final
.....
.....
[Exit For]
.....
Next

[Step] incremento

Donde contador es una variable numrica o un nmero que se


utilizar como contador del bucle, es decir, para llevar la cuenta de
las veces que se ha repetido el bucle. inicio es otra variable
numrica o un nmero que indica el valor inicial del contador, lo
mismo que final, que indica cuantas veces hay que repetir el
bucle. Step es opcional, y sirve para indicar el incremento que se
aplicar al contador en cada repeticin. Si se omite, por defecto el
incremento es 1.
En el caso de que se deba abandonar el bucle antes de que se hayan
hecho todas las repeticiones indicadas por la variable final, se
escribir Exit For en el lugar conveniente. En este caso, la
ejecucin de comandos continuar con la instruccin siguiente
despus de Next. Entre For y Next se puede escribir cualquier tipo
de instrucciones, funciones o comandos, incluso otras
instrucciones For.. To.. Next anidadas. Cada vez que se ejecuta un
ciclo del bucle, VBScript suma el valor de Step (1 por defecto)
a contador, comparando el resultado con final hasta que se igualan.
Cuando esto ocurre, el bucle termina y se continua la ejecucin del
programa con la instruccin siguiente a Next.
Esta instruccin tiene otra sintaxis: For.. Each.. Next que se
utiliza para acceder a todos los elementos de un grupo o coleccin
de elementos. Ya vimos su uso en algunos objetos de ASP.
For Each elemento In grupo
.....
.....
[Exit For]
.....

Next

Por ejemplo, para ver todas las variables definidas en el objeto


Session() de ASP:
<%
Session("Variable1") = "Contenido de la variable 1"
Session("Variable2") = "Contenido de la variable 2"
Session("Variable3") = "Contenido de la variable 3"
For Each Item in Session.Contents
Response.Write Item & " = " & Session.Contents(Item) & "<BR>"
Next
%>

Y este sera el resultado:


Nombre
Contenido
----------------------------------------VARIABLE1 = Contenido de la variable 1
VARIABLE2 = Contenido de la variable 2
VARIABLE3 = Contenido de la variable 3

Otra instruccin de bucle es Do.. Loop:


Do While | Until condicion
.....
.....
[Exit Do]
.....
Loop

Con esta instruccin el bucle se repite mientras ( While)


la condicion devuelva True, o bien hasta que ( Until)
la condicion devuelva True. Al igual que con la instruccin For To..
Next, si hay que interumpir el bucle antes de que ste termine
normalmente, se intercalarn escapes Exit Do.
<%
Dim contador
Do While contador < 4
contador = contador + 1
Response.Write( contador & " " )
Loop
%>

Y este sera el resultado:


1234

Cambiando While por Until:


<%
Dim contador
Do Until contador > 4
contador = contador + 1
Response.Write( contador & " " )
Loop
%>

Se obtiene:
12345
Instruccin On Error
Puede ocurrir que se produzca un error mientras se ejecuta un
programa. Si esto sucede, ASP emite un mensaje de error y la
ejecucin se detiene. En algunos casos el error puede no ser
inesperado, como por ejemplo, si el usuario no ha realizado una
accin necesaria para que el programa continue sin problemas. En
estos casos, puede utilizarse la instruccinOn Error Resume Next,
que hace que el programa continue con la siguiente instruccin y sin
emitir ningun mensaje de error.
No es buena idea abusar de esta instruccin. Su uso puede estar
justificado en casos muy especiales, pero un buen programa debe
tener prevista cualquier omisin o accin que el usuario pueda
realizar indebidamente, reportando el mensaje de aviso
correspondiente (no de error de sistema) y obligando a repetir los
pasos que sean necesarios. Evidentemente, lo que no puedes tener
previsto es un fallo general del servidor o de la red, pero ante este
tipo de problemas, no hay solucin.

Visual Basic Script


Funciones numricas

Funciones de conversin numrica


Las funciones de conversin numrica se utilizan para cambiar
el tipo de dato, de una expresin no numrica, a algun tipo
numrico, a fin de poder operar metemticamente con ella.

Evidentemente, el resultado de la expresin slo debe contener


nmeros. Si hay letras o signos se producir un error. No olvides
que si hay varias expresiones, que una vez convertidas, sern
utilizadas en un clculo matemtico, los tipos de conversin deben
ser equivalentes, de lo contrario los resultado son imprevisibles.
CBool(valor)
Convierte un tipo no numrico a tipo Booleano, donde valor debe ser
una cadena numrica, un nmero o una expresin que devuelva un
tipo numrico. Si valor vale cero CBool()devuelve False, si es mayor
que cero devuelve True y si no es numrico, se producir un error.
CByte(valor)
Convierte un tipo no numrico a tipo Byte (cuyo rango es de 0 a
255), donde valor debe ser un nmero, una cadena numrica o una
expresin que devuelva un tipo numrico. Si valores mayor de 255 o
no es numrico, CByte() devuelve error.
CCur(valor)
Convierte un tipo no numrico a tipo Currency (cuyo rango va de 922.337.203.685.477,5808 a 922.337.203.685.477,5807),
donde valor debe ser un nmero, una cadena numrica o una
expresin que devuelva un tipo numrico.
CDbl(valor)
Convierte un tipo no numrico a tipo Double (nmero de precisin
doble y punto flotante), donde valor debe ser un nmero, una
cadena numrica o una expresin que devuelva un tipo numrico.
CLng(valor)
Convierte un tipo no numrico a tipo Long (entre -2.147.483.648 y
2.147.483.647), donde valor debe ser un nmero, una cadena
numrica o una expresin que devuelva un tipo numrico. CLng() se
diferencia de las funciones Fix() e Int() en que redondea, en lugar

de truncar, la parte decimal de un nmero. Cuando la parte decimal


es exactamente 0,5, la funcin CLng() siempre redondea al nmero
par ms cercano. Por ejemplo: 0,5 se redondea a 0 y 1,5 se
redondea a 2.
CInt(valor)
Convierte un tipo no numrico a tipo Integer (entre -32.768 a
32.767), donde valor debe ser un nmero, una cadena numrica o
una expresin que devuelva un tipo numrico. Al igual que la
anterior, CInt() se diferencia de las funciones Fix() e Int() en que
redondea, en lugar de truncar, la parte decimal de un nmero.
Tambin redondea de la misma forma que CLng().
Funciones trigonomtricas
Todas las funciones trigonomtricas trabajan con el argumento
en radianes. Recuerda que para convertir grados en radianes hay
que multiplicar los grados por (pi/180) y para convertir radianes en
grados, multiplicar los radianes por (180/pi). Otro recordatorio: el
nmero pi vale aproximadamente 3,1415926535...
Sin(ngulo)
Devuelve el seno de un ngulo, medido en radianes, que expresa el
argumento ngulo, que es obligatorio, y que debe ser un nmero o
una expresin que devuelva un tipo numrico.
El seno de un ngulo es la razn de dos lados de un tringulo
rectngulo. Dicho de otro modo, la razn es la longitud del cateto
opuesto al ngulo dividida por la longitud de la hipotenusa. El
resultado est dentro del intervalo -1 a 1.
Cos(ngulo)
Devuelve el coseno de un ngulo, medido en radianes, que expresa el
argumento ngulo, que es obligatorio, y que debe ser un nmero o
una expresin que devuelva un tipo numrico.

El coseno de un ngulo es la razn de dos lados de un tringulo


rectngulo. Dicho de otro modo, la razn es la longitud del cateto
adyacente al ngulo dividida por la longitud de la hipotenusa. El
resultado est dentro del intervalo -1 a 1.
Tan(ngulo)
Devuelve la tangente de un ngulo, medido en radianes, que expresa
el argumento ngulo, que es obligatorio, y que debe ser un nmero o
una expresin que devuelva un tipo numrico.
La tangente de un ngulo es la razn de dos lados de un tringulo
rectngulo. Dicho de otro modo, la razn es la longitud del cateto
opuesto al ngulo, dividida por la longitud del cateto adyacente al
ngulo
Atn(nmero)
Devuelve el arco tangente de un nmero, que expresa el
argumento nmero, que es obligatorio, y que debe ser un nmero o
una expresin que devuelva un tipo numrico.
Esta funcin obtiene la razn entre los dos catetos de un tringulo
rectngulo y devuelve el ngulo correspondiente en radianes. La
razn es la longitud del lado opuesto al ngulo dividida por la
longitud del lado adyacente al mismo. El resultado est entre (pi/2) y (pi/2) radianes.
Con las funciones trigonomtricas intrnsecas vistas hasta aqu, y
algunas que se exponen ms abajo, se pueden construir otras
funciones:
Funciones no intrnsecas

Equaciones basadas en funciones intrnsecas

Secante

Sec(X) = 1 / Cos(X)

Cosecante

Cosec(X) = 1 / Sin(X)

Cotangente

Cotan(X) = 1 / Tan(X)

Seno inverso

Arcsin(X) = Atn(X / Sqr(-X * X + 1))

Coseno inverso

Arccos(X) = Atn(-X / Sqr(-X * X + 1)) + 2 * Atn(1)

Secante inversa

Arcsec(X) = Atn(X / Sqr(X * X - 1)) + Sgn((X) -1) * (2


* Atn(1))

Cosecante inversa

Arccosec(X) = Atn(X / Sqr(X * X - 1)) + (Sgn(X) - 1) * (2


* Atn(1))

Cotangente inversa

Arccotan(X) = Atn(X) + 2 * Atn(1)

Seno hiperblico

HSin(X) = (Exp(X) - Exp(-X)) / 2

Coseno hiperblico

HCos(X) = (Exp(X) + Exp(-X)) / 2

Tangente hiperblica

HTan(X) = (Exp(X) - Exp(-X)) / (Exp(X) + Exp(-X))

Secante hiperblica

HSec(X) = 2 / (Exp(X) + Exp(-X))

Cosecante hiperblica

HCosec(X) = 2 / (Exp(X) - Exp(-X))

Cotangente hiperblica

HCotan(X) = (Exp(X) + Exp(-X)) / (Exp(X) - Exp(-X))

Seno hiperblico inverso

HArcsin(X) = Log(X + Sqr(X * X + 1))

Coseno hiperblico inverso

HArccos(X) = Log(X + Sqr(X * X - 1))

Tangente hiperblica
inversa

HArctan(X) = Log((1 + X) / (1 - X)) / 2

Secante hiperblica inversa

HArcsec(X) = Log((Sqr(-X * X + 1) + 1) / X)

Cosecante hiperblica
inversa

HArccosec(X) = Log((Sgn(X) * Sqr(X * X + 1) +1) / X)

Cotangente hiperblica
inversa

HArccotan(X) = Log((X + 1) / (X - 1)) / 2

Otras funciones numricas


Int(valor) - Fix(valor)
Estas dos funciones devuelven el valor entero de un nmero
truncndolo, es decir, que no redondean. La diferencia
entre Fix() e Int() es que si valor es negativo, Int() devuelve el
primer entero negativo menor o igual a valor, mientras
que Fix() devuelve el primer entero negativo mayor o igual a valor.
Por ejemplo: Int() convierte -5,4 en -6 y Fix() convierte -5,4 a -5.
Si valor contiene Null devuelven Null.
Abs(numero)
Devuelve el valor absoluto de un nmero o de cualquier expresin
numrica. El valor absoluto de un nmero no tiene signo. Por
ejemplo, Abs(-1) y Abs(1) devuelven 1.

Sgn(numero)
Devuelve un entero que indica el signo de un nmero o de cualquier
expresin numrica. Sgn() puede devolver tres valores:
Si numero vale 0, devulve 0. Si es mayor que 0 devuelve 1 y si es
menor que 0 devuelve -1.
Round(valor[, posiciones_decimales])
Redondea el nmero contenido en valor, que es obligatorio, y que
debe ser un nmero o una expresin que devuelva un tipo numrico.
El argumento [, posiciones_decimales] es opcional. Indica cuntas
posiciones decimales a la derecha del punto se van a incluir en el
redondeo. Si se omite, la funcin Round() devuelve un entero.
Sqr(valor)
Devuelve la raiz cuadrada de valor, que es obligatorio, y que debe
ser un nmero o una expresin que devuelva un tipo numrico de
valor 0 o mayor que 0.
Log(valor)
Devuelve el logaritmo natural de valor, que es obligatorio, y que
debe ser un nmero o una expresin que devuelva un tipo numrico
mayor que 0. El logaritmo natural es el logaritmo en base e. El valor
de la constante e es aproximadamente 2.718282.
Utilizando Log() se pueden calcular logaritmos en base-n para
cualquier nmero x, dividiendo el logaritmo natural de x por el
logaritmo natural de n. Veamos un ejemplo de funcin para calcular
logaritmos en base 10:
Function Log10(X)
Log10 = Log(X) / Log(10)
End Function

Fjate en que Log10 es el nombre de nuestra funcin de ejemplo, y


no es lo mismo que Log(10).
Exp(valor)

Devuelve e elevado a una potencia, contenida en valor, que es


obligatorio, y que debe ser un nmero o una expresin que devuelva
un tipo numrico, mayor que 0 y menor que 709,78271. El valor de
la constante e es aproximadamente 2.718282. La funcin Exp(), a
veces llamada antilogaritmo, complementa la accin de la
funcin Log().
Oct(valor)
Devuelve un string con el valor en Octal de valor, que es
obligatorio, y que debe ser un nmero o una expresin que devuelva
un tipo numrico entero. Si tiene parte decimal, ser redondeado al
entero ms cercano antes de obtener su equivalente octal. El
mximo valor octal obtenido no puede ser mayor de 11 caracteres
octales.
Hex(valor)
Devuelve un string con el valor en Hexadecimal de valor, que es
obligatorio, y que debe ser un nmero o una expresin que devuelva
un tipo numrico entero. Si tiene parte decimal, ser redondeado al
entero ms cercano antes de obtener su equivalente hexadecimal.
El mximo valor obtenido no puede ser mayor de 8 caracteres
hexadecimales.
IsNumeric(expresin)
Devuelve un valor de tipo Booleano que indica si expresin puede
ser evaluada como un nmero. IsNumeric() devuelve True si la
expresin completa se reconoce como un nmero, en caso contrario,
devuelve False. Tambin devuelve False si la expresin es una
fecha.
Rnd([N])
Genera un nmero aleatorio partiendo de N, que es opcional.

Rnd devuelve un valor menor que 1 y mayor o igual que 0, por lo que
si se quieren obtener nmeros enteros mayores que 1 hay que hacer
algunas operaciones.
Por ejemplo, si se utiliza Rnd de forma simple:
<%
Randomize
For x = 0 To 5
Response.Write(Rnd() & "<BR>")
Next
%>

Se obtiene algo as:


0,2860071
0,4326702
0,959905
0,9140284
0,1316752
Si se quieren obtener nmeros enteros dentro de un cierto
intervalo puede utilizarse una expresin:
Int((N_mayor - N_menor + 1) * Rnd + N_menor)
Por ejemplo para obtener una secuencia aleatoria entre 1 y 5:
<%
Randomize
For x = 0 To 5
Response.Write(Int((5 - 1 + 1) * Rnd + 1) & "<BR>")
Next
%>

Y este podra ser el resultado:


5
4
5
2
1

Te preguntars de dnde ha salido y para qu sirve la


instruccin Randomize[n] que aparece antes del bucle For..To..Next
de cada ejemplo; pues se utiliza para inicializar el generador de
nmeros aleatorios.
En efecto, la instruccin Randomize[n] utiliza [n] (opcional) para
inicializar el generador de nmeros aleatorios de la funcin Rnd(),
asignndole un nuevo valor de inicializacin. Si se omite [n], se usar
para este fin el valor devuelto por el reloj del sistema.
Si no se utiliza la instruccin Randomize, la funcin Rnd() (sin
argumento) utiliza como valor de inicializacin el mismo que utiliz
la primera vez que se la invoca, por lo que repetir la misma
secuencia.
FormatNumber(Expresin [, Decimales, [Ceros, [Negativos,
[Grupos]]]])
Sirve para dar formato a un nmero o expresin numrica. El
resultado de FormatNumber() sigue siendo de tipo numrico. Tiene
los siguientes parmetros:
Expresin Obligatorio. Es el valor que se pretende formatear. Por
supuesto, tiene que ser un nmero o una expresin que devuelva un
tipo numrico
Decimales Opcional. Valor numrico que indica cuantas posiciones
se muestran a la derecha del signo decimal. Si se omite, por
defecto se aplica -1, y se utilizan los valores de la configuracin
regional del servidor. Si Decimales es menor que el nmero de
dgitos existente, se aplica redondeo,
Ceros Opcional. Indica si se muestran o no los ceros a la izquierda
en los valores fraccionarios. Puede tener dos valores: 0 (por
defecto) para no mostrarlos, y -1 para mostrarlos.
Negativos Opcional. Indica si se muestran entre parntesis los
valores negativos. Puede tener dos valores: 0 (por defecto) para no
mostrarlos, y -1 para mostrarlos.
Grupos Opcional. Indica si se agrupan o no los nmeros utilizando el
delimitador de grupos especificado en el panel de control del

servidor. Puede tener dos valores: 0 (por defecto) para no


agruparlos, y -1 para agruparlos.
Por ejemplo, al escribir:
<%
Response.Write(0012345.1299 & "<BR>")
Response.Write(FormatNumber(0012345.1299, 3, 0, 0, 0) & "<BR>")
Response.Write(FormatNumber(0.1299, 3, 0, 0, 0) & "<BR>")
Response.Write(FormatNumber(0.1299, 3, -1, 0, 0) & "<BR>")
Response.Write(FormatNumber(-0.1299, 3, -1, 0, 0) & "<BR>")
Response.Write(FormatNumber(-0.1299, 3, -1, -1, 0) & "<BR>")
%>

Se obtiene:
12345,1299
12345,130
,130
0,130
-0,130
(0,130)
FormatPercent(Expresin [, Decimales, [Ceros, [Negativos,
[Grupos]]]])
Es muy similar a la anterior. Sirve para dar formato a un nmero o
expresin numrica, y adems lo multiplica por 100, aadindole a la
derecha el signo del tanto por ciento (%). El resultado
de FormatPercent() NO es de tipo numrico. Tiene los mismos
parmetros que FormatNumber().
Por ejemplo, si se escribe:
<%
Response.Write(0012345.1299 & "<BR>")
Response.Write(FormatNumber(0012345.129999, 3, 0, 0, 0) & "<BR>")
Response.Write(FormatNumber(0.129999, 3, 0, 0, 0) & "<BR>")
Response.Write(FormatNumber(0.129999, 3, -1, 0, 0) & "<BR>")
Response.Write(FormatNumber(-0.129999, 3, -1, 0, 0) & "<BR>")
Response.Write(FormatNumber(-0.129999, 3, -1, -1, 0) & "<BR>")
%>

Se obtiene:

12345,129999
1234513,000%
13,000%
13,000%
-13,000%
(13,000%)

Visual Basic Script


Funciones de texto

Asc(string)
Devuelve el cdigo numrico (ANSI) del primer carcter de la
cadena string, que por lo menos debe tener uno. En caso contrario
se produce un error. Por ejemplo para obtener el cdigo de la
letra A:
<%
Response.Write( Asc("A") )
%>

Y este sera el resultado:


65
Chr(cdigo)
Funciona justo al contrario que Asc(): su argumento es
el cdigo numrico (ANSI) de un carcter. Por ejemplo para
obtener la letra A:
<%
Response.Write( Chr(65) )
%>

Y este sera el resultado:


A
Respecto a estas dos funciones, conviene recordar que los cdigos
comprendidos entre 0 y 32 no son visibles en pantalla ni pueden

imprimirse, ya que son caracteres de control. Por


ejemplo Chr(10) es un avance de lnea.
String(cuantos, cod_caracter)
Devuelve una cadena compuesta por el/los caracteres cuyo cdigo
indica cod_caracter y de la longitud indicada por cuantos. Por
ejemplo:
<%
Response.Write( String(5, 65) )
%>

Y este sera el resultado:


AAAAA
Space(cuantos)
Es parecida a la anterior, pero solamente es capaz de generar
cadenas compuestas por espacios en blanco, de la longitud indicada
por cuantos. Esto mismo se puede hacer tambin con la
funcin String().
Cstr(valor)
Devuelve un string conteniendo valor. Es decir, que convierte
cualquier tipo de dato contenido en valor al tipo string. Hay algunas
particularidades que conviene conocer en funcin del tipo de dato
recibido por valor. Si recibe
Booleano: devuelve un string con la palabra "False" o "True"
Date: devuelve un string con una fecha en el formato corto:
"30/12/2002"
Null: Error
Error: devuelve un string con la palabra "Error" seguida del
nmero del error
Numrico: devuelve un string con el nmero aplicando la
configuracin regional (coma decimal, etc.)
InStr([Inicio, ]Cadena, Subcadena[, Comparacin])

Devuelve un nmero que indica la posicin del primer carcter de


una subcadena dentro de otra, obviamente de mayor
longitud. cadena. Sus argumentos son:
Inicio Opcional. Es un nmero que indica en qu posicin, dentro
de Cadena, se comienza a buscar Subcadena. Si se omite, por
defecto se comienza por la posicin 1.
Cadena Obligatorio. Es la cadena principal dentro de la cual hay que
buscar Subcadena. Debe tener el tipo de dato string.
Subcadena Obligatorio. Es la cadena con la muestra de lo que se va
a buscar dentro de Cadena. Debe tener el tipo de dato string.
Comparacin Opcional. Es es un nmero que indica de qu forma se
van a evaluar la subcadena buscada. Puede escribirse el nmero o la
constante intrnseca equivalente. Puede tener dos valores:

0 Comparacin binaria. Por defecto (vbBinaryCompare)


1 Comparacin textual (vbTextCompare)

Utilizar la Comparacin binaria o textual permite diferenciar, por


ejemplo, maysculas de minsculas, que por defecto VBScript
considera iguales. Al ser 0 el valor por defecto
deComparar, Instr() distingue entre maysculas y minsculas
He aqu un ejemplo:
<%
Dim Cadena
Cadena = "Esto es una prueba de buscar subcadenas"
Response.Write(Instr(1, Cadena, "prueba")
%>

Y este sera el resultado:


13
Este es el funcionamiento ideal, pero pueden ocurrir cosas
inesperadas en el valor de las cadenas. Entonces, la funcin se
comportar de la siguiente manera: Si la longitud deCadena es
0, Instr() devuelve 0. Si el valor de Inicio es mayor que la longitud
de Cadena tambin devolver 0. Si la longitud de Subcadena es 0,

devolver el valor de Inicio. SiSubcadena no es encontrada dentro


de Cadena, devolver 0. Y por ltimo,
si Cadena o Subcadena contienen Null devolver Null.
InStrRev(Cadena, Subcadena[, Inicio[, Comparar]])
Como habrs visto, tiene una pequea diferencia de sintaxis con la
anterior, aunque en todo lo dems funciona igual, excepto en que en
lugar de comenzar la bsqueda por defecto en la posicin 1
de Cadena lo hace comenzando por la ltima posicin de la misma, o
lo que es equivalente, por la posicin -1.
LCase(Cadena)
Devuelve una cadena cuyas letras maysculas han sido convertidas a
minsculas. por ejemplo:
<%
Dim Cadena
Cadena = "Esto es una prueba DE MAYSCULAS y Nmeros: 1234"
Response.Write(LCase(Cadena)
%>

Y este sera el resultado:


esto es una prueba de maysculas y nmeros: 1234
UCase(Cadena)
Devuelve una cadena cuyas letras minsculas han sido convertidas a
maysculas. Es decir, justo lo contrario que la anterior
funcin LCase()
Left(Cadena, Cuantos)
Devuelve una cadena conteniendo el nmero de caracteres
especificado por Cuantos del lado izquierdo de Cadena. Por ejemplo:
<%
Dim Cadena
Cadena = "ABCDEFGHIJK"
Response.Write(Left(Cadena, 3)
%>

Y este sera el resultado:


ABC
Right(Cadena, Cuantos)
Devuelve una cadena conteniendo el nmero de caracteres
especificado por Cuantos del lado derecho de Cadena. Por ejemplo:
<%
Dim Cadena
Cadena = "ABCDEFGHIJK"
Response.Write(Right(Cadena, 3)
%>

Y este sera el resultado:


IJK
Len(Cadena)
Devuelve un nmero que indica cuantos caracteres contiene Cadena.
Por ejemplo:
<%
Dim Cadena
Cadena = "ABCDEFGHIJK"
Response.Write(Len(Cadena)
%>

Y este sera el resultado:


11
Si en lugar de una cadena el argumento es un
nmero, Len() devolver el nmero de dgitos que forman el nmero
propiamente dicho. Por ejemplo:
<%
Dim Valor
Valor = 2003
Response.Write(Len(Valor)
%>

Y este sera el resultado:


4
Mid(Cadena, Inicio[, Cuantos])
Devuelve una cadena conteniendo el nmero de caracteres indicado
por Cuantos extraida de Cadena y comenzando en la posicin
indicada por Inicio. Por ejemplo:
<%
Dim cadena
Cadena = "ABCDEFGHIJK"
Response.Write(Mid(Cadena, 2, 3))
%>

Y este sera el resultado:


BCD
LTrim(Cadena) RTrim(Cadena) Trim(Cadena)
Estas tres funciones sirven para eliminar los espacios en blanco que
haya en el lado izquierdo, derecho o en ambos de Cadena. Los
espacios que contenga Cadena en el interior no se vern afectados.
Por ejemplo:
<%
Dim cadena
Cadena = " ABCD EFGH IJK "
Response.Write(Chr(34) & LTrim(Cadena) & Chr(34) )
Response.Write(Chr(34) & RTrim(Cadena) & Chr(34))
Response.Write(Chr(34) & Trim(Cadena) & Chr(34))
%>

Y este sera el resultado:


"ABCD EFGH IJK "
" ABCD EFGH IJK"
"ABCD EFGH IJK"
Replace(Cadena, Busca, Cambio[, Inicio, [Cuantos, [Comparar]]])

Localiza el contenido de Busca dentro de Cadena y lo sustituye


(Replace) por el valor de Cambio. Sus argumentos son:
Cadena Obligatorio. Es la cadena principal dentro de la cual hay que
realizar los cambios. Debe tener el tipo de dato string.
Busca Obligatorio. Es la subcadena que indica lo que hay que buscar
dentro de Cadena para cambiarlo. Tambin debe tener el tipo de
dato string.
Cambio Obligatorio. Es la subcadena que sustituir a Busca. Al igual
que los dos anteriores, debe tener el tipo de dato string.
Inicio Opcional. Es un nmero que indica en qu posicin, dentro
de Cadena, se comienza a buscar el valor de Busca. Si se omite, por
defecto se comienza por la posicin 1.
Cuantos Opcional. Indica cuantas sustituciones, de todas las
posibles, se quiere realizar. El valor por defecto es -1, que significa
todas.
Comparar Opcional. Es es un nmero que indica de qu forma se va
a evaluar la subcadena buscada. Puede escribirse el nmero o la
constante intrnseca equivalente. Puede tener dos valores:

0 Comparacin binaria. Por defecto (vbBinaryCompare)


1 Comparacin textual (vbTextCompare)

Utilizar la Comparacin binaria o textual permite diferenciar, por


ejemplo, maysculas de minsculas, que por defecto VBScript
considera iguales. Al ser 0 el valor por defecto
deComparar, Replace() distingue entre maysculas y minsculas
He aqu un ejemplo:
<%
Dim Cadena
Cadena = "Esto es una prueba de buscar subcadenas y cambiarlas"
Response.Write(Replace(Cadena, "prueba", "muestra")
%>

Y este sera el resultado:


Esto es una muestra de buscar subcadenas y cambiarlas

Hay que tener en cuenta algunas cosas: Si la longitud de Cadena es


0, Replace() devuelve lo mismo. Se producir un error
si Cadena es Null. Otra cosa importante es que si inicio es mayor
que 0, la cadena resultante ser la comprendida entre el punto
sealado por Inicio y el fin de Cadena, es decir que
ser menos larga que el original.
StrComp(Cadena1, Cadena2[, Comparar])
Compara Cadena1 con Cadena2 y devuelve un valor numrico para
indicar el resultado. El modo de comparar las dos cadenas viene
indicado por Comparar, que es opcional. Puede escribirse el nmero
o la constante intrnseca equivalente para definir Comparar. Puede
tener dos valores:

0 Comparacin binaria. Por defecto (vbBinaryCompare)


1 Comparacin textual (vbTextCompare)

Utilizar la Comparacin binaria o textual permite diferenciar, por


ejemplo, maysculas de minsculas, que por defecto VBScript
considera iguales. Al ser 0 el valor por defecto
deComparar, StrComp() distingue entre maysculas y minsculas
Los valores obtenidos con StrComp() son:

-1 si cadena1 es menor que cadena2


0 si cadena1 es igual que cadena2
1 si cadena1 es mayor que cadena2
Null si cadena1 o cadena2 contienen Null

Visual Basic Script


Funciones de fecha y hora

Date()
Devuelve la fecha del servidor con formato mes, dia y ao:
<%
Response.Write( Date() )
%>

Y este sera el resultado:


22/12/03
Time()
Devuelve la hora del servidor con formato hora, minutos y
segundos:
<%
Response.Write( Time() )
%>

Y este sera el resultado:


10:24:23
Now()
Devuelve la fecha y hora del servidor juntas:
<%
Response.Write( Now() )
%>

Y este sera el resultado:


22/12/03 10:24:23
Day(una_fecha) - Month(una_fecha) - Year(una_fecha)
Estas tres funciones devuelven el dia, mes y ao, repectivamente,
de una_fecha dada, por ejemplo, por la funcin Date() o escrita
directamente en la forma "22/12/03" o "22-12-03":
<%
Response.Write( Date() )
Response.Write(Day(Date()) & "<BR>")
Response.Write(Month(Date()) & "<BR>")
Response.Write(Year(Date()) & "<BR>")
%>

Y este sera el resultado:


22/12/03
22

12
2003
Y lo mismo tenemos para las horas. En el caso de escribir
directamente la hora, se deber hacer en la forma: "10:05:18"
Hour(una_hora) - Minute(una_hora) - Second(una_hora)
<%
Response.Write( Time() )
Response.Write(Hour(Time()) & "<BR>")
Response.Write(Minute(Time()) & "<BR>")
Response.Write(Second(Time()) & "<BR>")
%>

Y este sera el resultado:


11:05:18
11
5
18
Weekday(una_fecha, [primero])
Devuelve un nmero que representa el da de la semana
de una_fecha. El parmetro opcional [primero] es un nmero que
indica cul es el primer da de la semana, siendo 1 (domingo) su valor
por defecto. Los valores devueltos y el nombre de las constantes
son:
vbSunday
vbMonday
vbTuesday
vbWednesday
vbThursday
vbFriday
vbSaturday

1
2
3
4
5
6
7

Domingo
Lunes
Martes
Mircoles
Jueves
Viernes
Sbado

Estos mismos valores coinciden con los utilizados para [primero].


Por ejemplo, si el 22/12/2003 era lunes:
<%
Response.Write( Date() & "<BR>" )
Response.Write(Weekday(Date()))
%>

Y este sera el resultado:


22/12/03
2
DateAdd(intervalo, cuantos, mi_fecha)
Devuelve una fecha cuyo valor es el resultado de adicionarle
a mi_fecha un intervalo de tiempo el nmero de veces indicado
por cuantos. Los valores codificados de intervalo son los siguientes:
Intervalo
yyyy
q
m
y
d
w
ww
h
n
s

Descripcin
Ao
Trimestre
Mes
Da del ao
Da
Da de la semana
Semana
Hora
Minuto
Segundo

Sea, por ejemplo, la fecha 30/12/03 a la que se desea sumar un


mes:
<%
Response.Write(DateAdd("m", 1, "30-12-03"))
%>

Y este sera el resultado:


30/01/04
La funcin DateAdd() no devuelve fechas errneas, y "redondea"
los valores que se le den. Por ejemplo, si a la fecha anterior en lugar
de un mes se le suman dos, no nos devuelve 30/02/04, que sera
incorrecto, sino que:
<%
Response.Write(DateAdd("m", 2, "30-12-03"))
%>

Y este sera el resultado:

29/02/04
Como puedes ver, no ha sumado de forma absoluta dos meses (es
decir, al menos 60 dias), pero ha dado un resultado correcto desde
el punto de vista del calendario, incluso siendo el 2004 bisiesto. Si
en lugar de sumar, queremos restar, solamente hay que dar los
valores de cuantos en negativo:
<%
Response.Write(DateAdd("m", -2, "30-12-03"))
%>

Y este sera el resultado:


30/10/03
Otra caracterstica, que puede ser muy util al escribir aplicaciones,
de la funcin DateAdd() consiste en no ser necesario escribir el ao
en el parmetro mi_fecha, siempre que sta sea escrita como una
cadena en la forma "30/12/03" o "30-12-03". Si en lugar de la
fecha entera, escribimos:
<%
Response.Write(DateAdd("m", 1, "30-12"))
%>

Se obtiene:
30/01/04
Con esto se puede conseguir no tener que revisar los programas
cada ao, siempre que los procedimientos sean en los mismos dias y
meses, claro. Tambin pueden sumarse intervalos de tiempo ms
pequeos. Por ejemplo, dos segundos:
<%
Response.Write(DateAdd("s", 2, "31/12/03 23:59:59"))
%>

Se obtiene:
1/01/04 0:00:01
DateDiff(intervalo, fecha1, fecha2)

Devuelve el nmero de intervalos de tiempo que hay


entre fecha1 y fecha2. Los valores codificados de intervalo son los
siguientes:
Intervalo
yyyy
q
m
y
d
w
ww
h
n
s

Descripcin
Ao
Trimestre
Mes
Da del ao
Da
Da de la semana
Semana
Hora
Minuto
Segundo

Sea, por ejemplo, la diferencia en meses entre 1/1/03 y 1/1/04:


<%
Response.Write(DateDiff("m", "1-1-03", "1-1-04"))
%>

Y este sera el resultado:


12
Si fecha2 es menor que fecha1 se obtiene un resultado con signo
negativo:
<%
Response.Write(DateDiff("m", "1-1-03", "1-1-02"))
%>

Se obtiene:
-12
Las valores obtenidos no indican que necesariamente hayan
transcurridos estos intervalos de tiempo. Asi, si por ejemplo, se
compara el 31 de diciembre con el 1 de enero del ao
inmediatamente posterior, DateDiff() devuelve 1 aunque solamente
haya transcurrido un da.
DatePart(intervalo, fecha)

Extrae de fecha la parte indicada por intervalo. Los valores


codificados de intervalo son los mismos que utilizan DateAdd() o
DateDiff(). Sea por ejemplo:
<%
Response.Write(DatePart("m", "31/12/03 23:59:59"))
%>

Se obtiene:
12
IsDate(expresin)
Evala si expresin puede ser convertida a fecha, o lo que es lo
mismo, si tiene un formato vlido para representar una fecha. Por
ejemplo:
<%
Response.Write(IsDate("31/12/03 23:59:59"))
%>

Se obtiene:
Verdadero
CDate(expresin)
Convierte expresin a tipo fecha. Es conveniente examinar primero
la expresin para asegurarse de que la conversin es posible. Por
ejemplo:
<%
Response.Write(CDate("31/12/03 23:59:59"))
%>

Se obtiene:
31/12/03 23:59:59
DateSerial(ao, mes, dia)

Sirve para obtener un resultado con tipo de dato fecha a partir de


valores numricos directos o resultado de expresiones. Por
ejemplo:
<%
Response.Write(DateSerial(2003, 12, 1))
Response.Write(DateSerial(2003, 6+6, 3-2))
%>

Se obtiene para ambos:


01/12/2003
Para el argumento ao, los valores entre 0 y 99, inclusive, se
interpretan como los aos 19001999. Para todos los dems hay que
utilizar cuatro dgitos (por ejemplo, 1800 o 2000). El valor mximo
es 9999.
Cuando cualquier argumento sobrepase el intervalo aceptado para
dicho argumento, se aumenta a la siguiente unidad mayor que
resulte apropiada. Por ejemplo, si se especifica 35 das, se evala
como un mes y algunos das, segn el mes del ao al que se aplique.
Sin embargo, si cualquier argumento simple est fuera del intervalo
entre -32.768 y 32.767 (los lmites del tipo integer), o si la fecha
especificada por los tres argumentos, directamente o por
expresin, queda fuera del intervalo de fechas aceptable, se
produce un error.
DateValue(string)
Sirve para obtener un resultado con tipo de dato fecha a partir de
un cadena de texto. Por ejemplo:
<%
Response.Write(DateValue("2003/12/1"))
Response.Write(DateValue("1/12/2003"))
Response.Write(DateValue("1/diciembre/2003"))
%>

Se obtiene para todos:


01/12/2003

Como puedes ver, la funcin reconoce tanto el tipo de fecha


americano como europeo, y adems interpreta el nombre del mes si
no es un nmero. Si la cadena contiene tambin la hora, por
ejemplo, "1/12/2003 16:30", DateValue devolver la fecha pero no
la hora, No obstante, si la hora tiene un valor errneo, como
"1/12/2003 16:70" se producir un error. El rango de fechas
aceptado es una fecha comprendida entre el 1 de enero del ao 100
hasta el 31 de diciembre del ao 9999
TimeSerial(hora, minuto, segundo)
Sirve para obtener un resultado con tipo de dato hora a partir de
valores numricos directos o resultado de expresiones. Por
ejemplo:
<%
Response.Write(TimeSerial(7, 50, 0))
Response.Write(TimeSerial(12-5, 60-10, 0))
%>

Se obtiene para ambos:


7:50:00
El intervalo para cada argumento debe estar en el intervalo
aceptado para la unidad; es decir, 023 para horas y 059 para
minutos y segundos. Tambin se puede especificar horas relativas
para cada argumento mediante cualquier expresin numrica.
Cuando cualquier argumento sobrepasa el intervalo aceptado para
dicho argumento, se aumenta hasta la siguiente unidad mayor
apropiada. Por ejemplo, si especifica 75 minutos, se evala como una
hora y 15 minutos. Sin embargo, si cualquier argumento simple est
fuera del intervalo de -32.768 a 32.767 (los lmites del
tipo integer), o si la hora especificada por los tres argumentos,
directamente o por expresin, hace que la hora quede fuera del
intervalo aceptable de horas, se produce un error.
TimeValue(string)

Sirve para obtener un resultado con tipo de dato hora a partir de


un cadena de texto. La cadena debe representar una hora desde las
0:00:00 (12:00:00 a.m.) a las 23:59:59 (11:59:59 p.m.), inclusive.
Tambin cualquier expresin que represente una hora dentro de
dicho intervalo. Si hora contiene Null, se devuelve Null. Por
ejemplo:
<%
Response.Write(DateValue("2:30PM"))
Response.Write(DateValue("14:30"))
Response.Write(DateValue("2:30"))
%>

Se obtiene:
14:30:00
14:30:00
2:30:00
LastDay(mes, ao)
Sirve para obtener el nmero correspondiente al ltimo da de un
mes/ao dados. Por ejemplo:
<%
Response.Write(LastDay(2, 2004))
%>

Se obtiene:
29

Visual Basic Script


Otras funciones

Funciones matriciales
Una matriz (o array) puede considerarse como un conjunto de
elementos ordenados secuencialmente, y con el mismo tipo de
datos. Imagina los casilleros que tienen los hoteles para depositar
las llaves de los clientes, o ms tcnicamente, como una tabla de

una base de datos. Cada elemento de una matriz posee un nmero


de ndice nico que lo identifica. Al igual que en una tabla de base
de datos, los cambios efectuados a un elemento no afectan a los
dems elementos. Cada valor es independiente. Las matrices pueden
solucionar muchos problemas de programacin, ya que son un
almacen de datos muy fcil de construir, y al residir en la memoria
del servidor, sumamente rpidos de acceder. Lo malo de las
matrices es precisamente esto ltimo, que residen en memoria, y
por ello se deben usar con precaucin, y teniendo controlado su
tamao mximo, pues podran agotar los recursos del servidor.
Array(argumentos)
Define una matriz de datos, donde argumentos es una lista de
valores, separados por comas, que se guardarn en los elementos de
la matriz. El tipo de dato devuelto es Variant. Por ejemplo, para
asignar una matriz a la variable A:
Dim A
A = Array("aa","bb","cc","dd","ee")

Para recuperar todos los valores almacenados podemos utilizar un


bucle:
<%
For X = 0 TO 4
Response.Write(A(X) & " - ")
Next
%>

Y este sera el resultado:


aa - bb - cc - dd - ee Como puedes ver, funciona de forma muy similar a las
instrucciones Dim y ReDim, ya vistas en la pgina "Constantes y
variables":
<%
Dim MiVariable()
...
...
ReDim MiVariable(4)
Mivariable(0) = 10
Mivariable(1) = 20
Mivariable(2) = 30

Mivariable(3) = 40
Mivariable(4) = 50
%>

Split(String[, Delimitador[, Cuantos[, Comparar]]])


Esta funcin toma string y lo parte (split) en otros sub strings que
carga en una matriz unidimensional. Veamos sus argumentos:
String es una cadena de texto cualquiera o una expresin que
devuelva una cadena. Por ejemplo: "Esto es una prueba de
matrices".
Delimitador Es un carcter de la cadena utilizado para identificar
los lmites de las subcadenas. Si se omite, por defecto el
delimitador ser un espacio en blanco (" "). SiDelimitador es una
cadena de longitud cero, Split() devuelve una matriz de un solo
elemento que contiene la cadena String completa.
Cuantos indica cuantos trozos, de los que resulten, se desea
almacenar. -1 indica a Split() que los tome todos (por defecto).
Comparar es un nmero que indica de qu forma se van a evaluar las
subcadenas. Puede escribirse el nmero o la constante intrnseca
equivalente. Puede tener dos valores:

0 Comparacin binaria -Por defecto- (vbBinaryCompare)


1 Comparacin textual (vbTextCompare)

Utilizar la Comparacin binaria o textual permite diferenciar, por


ejemplo, maysculas de minsculas, que por defecto VBScript
considera iguales. Al ser 0 el valor por defecto
deComparar, Split() distingue entre maysculas y minsculas
Sea por ejemplo:
<%
Dim A, B
A = "Esto es una prueba de matrices"
B = Split(A, " ")
For X = 0 TO 5
Response.Write(B(X) & "-")
Next
%>

Y este sera el resultado:


Esto-es-una-prueba-de-matricesJoin(Matriz[, Delimitador])
Es la funcin inversa de Split(). Es decir, toma una matriz cuyos
elementos contengan strings y los concatena en una cadena
nica. Delimitador es el carcter que se desea utilizar para separar
el contenido de los elementos de la matriz origen en la cadena
resultante, y no es necesario que exista en las subcadenas a unir. Si
se omite, se utilizar el espacio en blanco (" "). Si Delimitador es
una cadena de longitud cero, se concatenan todos los elementos de
la matriz sin delimitadores. Por ejemplo:
<%
Dim A, B
A = "Esto es una prueba de matrices"
B = Split(A, " ")
Response.Write( Join(B) )
%>

Y este sera el resultado:


Esto es una prueba de matrices
Filter(Matriz[, Valor[, Incluir[, Comparar]]])
Esta funcin devuelve una matriz cuyos elementos contienen los
valores iguales a Valor que han sido buscados y encontrados entre
todos los elementos de Matriz. Tiene otros dos argumentos:
Incluir Es un valor booleano que indica si en los elementos de la
matriz resultante se incluyen o excluyen valores iguales a Valor.
Si Incluir es True (por defecto), se incluyen valores iguales a Valor.
Si es False, se excluyen, y el resultado ser los elementos
que NO son iguales a Valor.
Comparar es un nmero que indica de qu forma se van a evaluar las
subcadenas buscadas. Puede escribirse el nmero o la constante
intrnseca equivalente. Puede tener dos valores:

0 Comparacin binaria. Por defecto (vbBinaryCompare)


1 Comparacin textual (vbTextCompare)

Utilizar la Comparacin binaria o textual permite diferenciar, por


ejemplo, maysculas de minsculas, que por defecto VBScript
considera iguales. Al ser 0 el valor por defecto
deComparar, Filter() distingue entre maysculas y minsculas
He aqu un ejemplo:
<%
Dim A, B
A = Array("AA", "BB", "CC", "DD", "AA")
B = Filter(A, "AA")
For X = 0 TO 1
Response.Write(B(X) & "-")
Next
%>

Y este sera el resultado:


AA-AAComo podrs ver, en el bucle utilizado para mostrar el resultado, se
ha escrito For X = 0 TO 1, evidentemente, porque a la vista del
array inicial, ya sabamos que el bucle se tiene que repetir dos
veces. Pero, qu hacer si el contenido inicial nos es desconocido, o
es muy largo para andar contando? Pues utilizar, segn convenga,
alguna de las dos funciones siguientes:
Ubound(Matriz[, Dimensin]) - Lbound(Matriz[, Dimensin])
Estas funciones permiten conocer los subndices superior e inferior
respectivamente, de una matriz. Opcionalmente, y si la matriz tiene
ms de una dimensin, puede indicarse de cual de ellas se desea
obtener el subndice. Por defecto es 1.
Sea el ejemplo anterior:
<%
Dim A, B
A = Array("AA", "BB", "CC", "DD", "AA")

B = Filter(A, "AA")
For X = 0 TO Ubound(B)
Response.Write(B(X) & "-")
Next
%>

Y este sera el resultado:


AA-AAPor ltimo, y dentro del grupo de las funciones matriciales,
tenemos:
IsArray(Variable)
Que como ya habrs supuesto, sirve para saber si
una variable contiene un tipo array o no. Devuelve un tipo booleano,
es decir, que si devuelve True, la variable contiene un array, y si
devuelve False no.
Otras Funciones
RGB(rojo, verde, azul)
Devuelve un nmero entero que representa un valor de color RGB.
Las siglas RGB son las iniciales de los tres colores bsicos en
ingls: Red (rojo), Green (verde) y Blue (azul). Como ya es sabido,
se puede conseguir cualquier color mezclando estos tres colores
bsicos en las proporciones adecuadas. La cantidad de cada color
tiene que estar en un rango de 0 a 255. Si algun valor es mayor de
255 se considera 255.

Visual Basic Script en el Internet Explorer de


Microsoft
Aunque se parece, esto no es ASP

Hasta aqu hemos visto en qu consiste el VBscritpt que se utiliza


en las pginas ASP. Este lenguaje no solamente puede utilizarse en
pginas que se ejecutan en el servidor, como son las ASP, sino que
tambin puede emplearse, al igual que el conocido JavaScript

(Microsoft tiene una versin propia llamada JScript), en el propio


navegador. Todos los comandos, instrucciones y funciones descritas
hasta ahora, pueden utilizarse en los scripts escritos para el
navegador.
El VBscript solamente puedes utilizarlo en pginas que vayan a ser
visitadas con el Internet Explorer (en lo sucesivo IE) de Microsoft.
Con otros navegadores nada de esto funcionar, y se limitarn a
intepretar el cdigo HTML y los scripts escritos en JavaScript si
los hay, que s son compatibles con todos los navegadores. Esta es
la gran diferencia entre el ASP y los scripts de navegador. En
resumen, para el IE puedes escribir pginas con HTML, XHTML,
VBScript, JScript y JavaScript, pero recuerda que solamente son
compatibles con el resto de navegadores el HTML, XHTML y
JavaScript.
Los programas que se ejecutan en el IE no son capaces de hacer
todo lo que se puede hacer con ASP, quedando reducido su mbito
de funcionamiento al entorno definido por el propio navegador. Esto
es debido a que en el IE no estan disponibles los mismos objetos
que en ASP, que solo funcionan en el servidor, pero a cambio se
pueden utilizar otros objetos, con sus propiedades, mtodos y
eventos, aportados por el propio IE.
El IE es un navegador que forma parte de los sistemas operativos
Windows de Microsoft. Esto le permite conectar prcticamente con
cualquier recurso del sistema, y por tanto, adoptar interfaces muy
diferentes a las tpicas que puedan obtenerse solo con el HTML
estndard. Puede utilizarse, ms que como un navegador, como una
ventana de ejecucin de aplicaciones escritas con HTML y
VBScript. Una primera aproximacin a esas interfaces nos la dan
dos funcines que no existen en ASP: InputBox() y MsgBox(), que
veremos ms adelante cmo se utilizan. Pueden tambin crearse
pginas que faciliten ayuda contextual basada en
ficheros .hlp tpicos de Windows y muchas utilidades ms. Y por
supuesto, pueden escribirse pginas tanto .asp como .htm que

contengan scripts de navegador combinados, que permitirn una


mayor interactividad con el usuario.
Otra de las diferencias que encontraremos en los scripts del IE, es
el alcance de los procedimientos y funciones. En efecto, en ASP los
procedimientos Sub y Function pueden definirse como pblicos o
privados, segn deban ser utilizados en una misma secuencia de
comandos o en otras. En el entorno de ejecucin del IE esto no es
posible, y cualquier procedimiento definido es ejecutado una nica
vez en el momento de cargar la pgina. Al cargar otra pgina, o al
recargar la misma, todos los valores o instrucciones manejados se
pierden, inicializndose todas las variables. Esto no significa que no
puedan pasarse valores de una pgina a otra, pero deber hacerse
con otras tcnicas diferentes a las empleadas en ASP.

Cmo se escriben los scripts para el IE?


El elemento <SCRIPT>

Los scripts de Visual Basic para el IE se escriben con las mismas


convenciones que ya conocemos de ASP. Todas las definiciones de
procedimientos, funciones, instrucciones, operadores, etc., se
pueden escribir de la misma forma. Todo el cdigo deber ir
entre <SCRIPT> y </SCRIPT>. Puesto que este elemento HTML es
el mismo que se emplea con otros lenguajes, como JavaScript, es
preciso indicar al navegador el lenguaje que se va a utilizar al
definir el script. Sea por ejemplo:
<SCRIPT LANGUAGE="VBScript">
<!-Document.Write("Esto ha sido escrito por VBScript")
-->
</SCRIPT>

Fjate en que dentro de la etiqueta HTML <SCRIPT> y antes del


cdigo VBScript propiamente dicho, aparece el smbolo del
comentario HTML <!--. Esto se hace para evitar que los
navegadores que no son capaces de interpretar el script muestren
el cdigo.

Los scripts pueden escribirse tanto en la <HEAD> como en


el <BODY> de la pgina. Por claridad a la hora de revisar el cdigo,
es preferible escribir todas las secuencias de comandos al principio
de la pgina en la <HEAD>, aunque esto depender de las
necesidades del programa, claro. Por ejemplo, si escribimos
<HTML>
<HEAD><TITLE>Prueba de VBScript</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Document.Write("Esto ha sido escrito por VBScript
desde HEAD <BR>")
-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="VBScript">
<!-Document.Write("Esto ha sido escrito por VBScript
desde BODY")
-->
</SCRIPT>
<P>
Esto ha sido escrito por HTML.
</BODY>
</HTML>

Se obtiene:
Esto ha sido escrito por VBScript desde HEAD
Esto ha sido escrito por VBScript desde BODY
Esto ha sido escrito por HTML.

Como puedes ver, aqu utilizamos Document.Write() (un objeto del


IE, junto con uno de sus mtodos), que es equivalente al objeto de
ASP Response.Write(), y que sirve para escribir en la ventana del
navegador cualquier resultado generado por el cdigo.

Procedimientos y funciones

Al igual que en ASP, pueden definirse procedimientos (Sub) y


funciones (Function) en VBScript. Normalmente estos procesos se
invocarn capturando un evento, es decir, un suceso que se produce
y es detectado en la ventana del navegador. Uno de los eventos ms
comunes es el que detecta la pulsacin (onClick) del puntero del
ratn sobre un objeto, por ejemplo, un botn de un formuulario. En
el siguiente ejemplo veremos cmo escribir una pgina que captura
un evento en el botn de un formulario mediante un
procedimientoSub, que a su vez, llama a una funcin:
<HTML>
<HEAD>
<TITLE>Capturar evento de boton</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Function Mensaje()
Document.Write("Esto ha sido escrito por una
funcin de VBScript<BR>")
End function
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!-Sub boton1_onClick
Call Mensaje()
Document.Write("Esto ha sido escrito por un
procedimiento de VBScript")
End sub
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
</FORM>
</BODY>
</HTML>

Y al pulsar el botn, se obtiene:


Esto ha sido escrito por una funcin de VBScript
Esto ha sido escrito por un procedimiento de VBScript

Fjate en cmo est construido el procedimiento. Lo primero es la


definicin de procedimiento: Sub, a continuacin se escribe el
nombre del objeto sobre el que se desea capturar el
evento: boton1 y despus escribimos el evento que deseamos
capturar sobre dicho objeto: _onClick. Ya en el interior del
procedimiento, tenemos una llamada a la funcin: Call Mensaje() y
para terminar, se escribe un nueva lnea en la
ventana: Document.Write("Esto ha sido escrito por un
procedimiento de VBScript"). Si escribes el ejemplo y lo pruebas en
tu servidor (o en local), vers que al pulsar el botn, en efecto,
aparecen los textos generados por el procedimiento y la funcin,
pero no quedar ni rastro del botn. Esto es debido al orden y lugar
en que estan escritas las instrucciones de escritura.
Hay que prestar atencin tambin al orden en que se escriben los
procesos. En este ejemplo, lgicamente, la funcin debe escribirse
primero, ya que debe existir cuando el procedimiento sea cargado.
El navegador, dependiendo de cmo est configurado, puede no
emitir mensajes de error en pantalla si hay algun problema en el
cdigo. De todas formas, si algo falla, muestra un mensaje en la
lnea de estado, en la parte inferior izquierda de la ventana donde
se est ejecutando el navegador. Para ver el detalle del problema
solamente hay que hacer clic dos veces seguidas sobre el aviso, y el
IE abrir un cuadro de dilogo con la informacin del error.
Como ya se ha dicho, los scripts pueden escribirse en cualquier
posicin dentro de la pgina, siempre que la lgica del programa lo
permita. El ejemplo anterior, podra escribirse sacando el
procedimiento del HEAD, y llevndolo al BODY, embebido en el
cdigo HTML del formulario. As:
<HTML>
<HEAD>
<TITLE>Capturar evento de boton</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Function Mensaje()
Document.Write("Esto ha sido escrito por una
funcin de VBScript<BR>")

End function
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-Call Mensaje()
Document.Write("Esto ha sido escrito por un
procedimiento de VBScript")
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>

Como puedes ver, la nica diferencia consiste en que hay que


definir en el propio elemento <SCRIPT> para qu objeto es el script
con FOR="boton1" y qu evento se pretende capturar
con EVENT="onClick".
Si la instruccin que ha de ejecutarse al capturar el evento es
sencilla, puede escribirse directamente en la definicin del objeto
que dispara el evento, en este caso el botn del formulario,
prescindiendo incluso del elemento <SCRIPT>. As:
<HTML>
<HEAD>
<TITLE>Capturar evento de boton</TITLE>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="Document.Write('Hola')">
</FORM>
</BODY>
</HTML>

Y al pulsar el botn, se obtiene:

Hola
ATENCIN: en este caso el texto que ha de escribir el
objeto Document.Write() no va entre comillas dobles, sino comillas
simples.
Dos funciones nuevas

En el entorno de ejecucin del IE existen dos funciones que no


estan disponibles en ASP. Estas son MsgBox() e InputBox(). Veamos
la primera.
MsgBox(mensaje[, botones][, ttulo][, ayuda, contexto])
Esta funcin muestra un mensaje en un cuadro de dilogo que puede
incluir varios botones de decisin, y devuelve un nmero segn el
botn pulsado por el usuario.
Estos son sus parmetros:

mensaje: Obligatorio. Es un string que forma el mensaje en el


cuadro de dilogo. Su longitud mxima no debe superar los
1024 caracteres, dependiendo del ancho de los caracteres
utilizados. Si el mensaje es largo, se pueden separar las lneas
concatenando cadenas ms cortas con la constante intrnseca
de VBScript vbCrLf o con la funcinChr(13) & Chr(10)
botones: Opcional. Es un nmero o expresin numrica que
corresponde a la suma de los valores que especifican cuantos
botones se van a mostrar, de que tipo, el estilo de icono que
los acompaa, la identidad del botn predeterminado y la
modalidad del cuadro de mensajes. Si se omite, el valor por
defecto es 0, correspondiente al botn "Aceptar". En lugar
del nmero tambin puede utilizarse la constante intrnseca
correspondiente.
ttulo: Opcional. Es un string que se muestra en la barra de
ttulo del cuadro de dilogo. Si se omite, en su lugar aparece
el nombre de la aplicacin.
ayuda: Opcional. Es un string que identifica el archivo de
ayuda que se utiliza para proporcionar ayuda contextual para

el cuadro de dilogo. Si se especifica, tambin se debe


especificar contexto.
contexto: Opcional. Es un nmero o expresin numrica que
identifica el nmero de contexto de ayuda asignado al tema
de ayuda correspondiente. Si se especifica, tambin se debe
especificar ayuda.

Estos son los valores que pueden utilizarse para calcular la suma
de botones. Fjate en que hay cuatro grupos de valores. Solamente
debes elegir uno (o ninguno) de cada grupo, de lo contrario se
produce un error.
Constante

Valor Descripcin

vbOKOnly

Muestra solamente el botn Aceptar (por defecto).

vbOKCancel

Muestra los botones Aceptar y Cancelar.

vbAbortRetryIgnore

Muestra los botones Anular, Reintentar e Ignorar.

vbYesNoCancel

Muestra los botones S, No y Cancelar.

vbYesNo

Muestra los botones S y No.

vbRetryCancel

Muestra los botones Reintentar y Cancelar.

vbCritical

16

Muestra el icono de Mensaje crtico.

vbQuestion

32

Muestra el icono de Pregunta de advertencia.

vbExclamation

48

Muestra el icono Mensaje de advertencia.

vbInformation

64

Muestra el icono de Mensaje de informacin.

vbDefaultButton1

vbDefaultButton2

256

El segundo botn es el predeterminado.

vbDefaultButton3

512

El tercer botn es el predeterminado.

vbDefaultButton4

768

El cuarto botn es el predeterminado.

vbApplicationModal

vbSystemModal

4096

El primer botn es el predeterminado (por defecto).

Modal para la aplicacin; el usuario debe responder al


cuadro de mensajes antes de poder seguir trabajando en la
aplicacin actual (por defecto).
Modal para el sistema; se suspenden todas las aplicaciones
hasta que el usuario responda al cuadro de mensajes.

Y estos son los valores que devuelve MsgBox() segn el botn


pulsado por el usuario:
Constante
vbOK

Valor
1

Botn
Aceptar

vbCancel

Cancelar

vbAbort

Anular

vbRetry

Reintentar

vbIgnore

Ignorar

vbYes

vbNo

No

Este sera un ejemplo simple de uso de MsgBox():


<HTML>
<HEAD>
<TITLE>Prueba de mensaje</TITLE>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<INPUT TYPE="text" NAME="campo1" VALUE="Prueba">
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-MsgBox("Prueba de mensaje")
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>

Y despus de pulsar el botn "prueba" del formulario tendremos


esto:

Este era un ejemplo muy simple, donde la funcin se emplea slo


para mostrar un mensaje. Veamos otro donde, adems, se captura
el valor que devuelve despus de que el usuario pulse alguno de los
botones del cuadro de dilogo:
<HTML>
<HEAD>
<TITLE>Prueba de mensaje</TITLE>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<INPUT TYPE="text" NAME="campo1" >
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-Formulario1.campo1.value = MsgBox("Esto es una prueba
de mensaje con botones" & _
vbCrLf & "Quieres
continuar?", 4+32, "Pregunta")
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>

Esta sera la apariencia despus de pulsar el botn "Prueba" del


formulario:

Y esta despus de contestar "Si" al cuadro de dilogo:

MsgBox() tambin se emplea para informar de errores durante la


ejecucin del programa. En este caso, solamente ofrecer el botn
"Aceptar", cuyo nico significado es darse por enterado del
problema. Estos son los 4 posibles:

Y este es el cdigo para obtenerlos:


MsgBox
MsgBox
MsgBox
MsgBox

("Mensaje",
("Mensaje",
("Mensaje",
("Mensaje",

vbExclamation, "Titulo")
vbCritical, "Titulo")
vbIinformation, "Titulo")
vbQuestion, "Titulo")

A continuacin veamos la segunda funcin:


InputBox(mensaje[, ttulo][, predeterminado][, posicinX][,
posicinY][, ayuda, contexto])
Esta funcin es algo parecida a la anterior. Muestra un mensaje en
un cuadro de dilogo junto con un cuadro de texto para que el
usuario pueda escribir los valores que necesite la aplicacin. A
diferencia de MsgBox(), no se pueden definir conjuntos de botones
ni iconos. Solamente estn disponibles los de "Aceptar" y
"Cancelar". Si el usuario escribe algn valor en el cuadro de texto
correspondiente y pulsa "Aceptar", el valor es transferido a donde
se indique en el programa. Si se escribe y se pulsa "Cancelar", la
captura no se produce.
Estos son sus parmetros:

mensaje: Obligatorio. Es un string que forma el mensaje en el


cuadro de dilogo. Su longitud mxima no debe superar los
1024 caracteres, dependiendo del ancho de los caracteres
utilizados. Si el mensaje es largo, se pueden separar las lneas
concatenando cadenas ms cortas con la constante intrnseca
de VBScript vbCrLf o con la funcinChr(13) & Chr(10)
ttulo: Opcional. Es un string que se muestra en la barra de
ttulo del cuadro de dilogo. Si se omite, en su lugar aparece
el nombre de la aplicacin.
predeterminado: Opcional. Es un valor, string o numrico, que
aparecer en el interior del cuadro de dilogo como respuesta
predeterminada, aunque el usuario podr cambiarla o borrarla
si lo desea. Si se omite, el cuadro de texto aparecer vaco
(por defecto).
posicinX: Opcional. Es un nmero o expresin numrica que
especifica, en twips, la distancia en sentido horizontal entre
el borde izquierdo del cuadro de dilogo y el borde izquierdo
de la pantalla. Si se omite, el cuadro de dilogo se centra
horizontalmente.
posicinY: Opcional. Es un nmero o expresin numrica que
especifica, en twips, la distancia en sentido vertical entre el
borde superior del cuadro de dilogo y el borde superior de la
pantalla. Si se omite, cuadro de dilogo se coloca a
aproximadamente un tercio de la altura de la pantalla, desde
el borde superior de la misma.
ayuda: Opcional. Es un string que identifica el archivo de
ayuda que se utiliza para proporcionar ayuda contextual para
el cuadro de dilogo. Si se especifica, tambin se debe
especificar contexto.
contexto: Opcional. Es un nmero o expresin numrica que
identifica el nmero de contexto de ayuda asignado al tema
de ayuda correspondiente. Si se especifica, tambin se debe
especificar ayuda.

Y puede que te preguntes que eso de "twips". Un twuip es la


veinteava parte de un punto de impresin (TWentIeth of a Point).
Se trata de un sistema utilizado por Visual Basic para tratar de

mantener el tamao de los formularios y cuadros de mensaje


independientemente de la resolucin de pantalla empleada por el
cliente. Veamos un ejemplo de uso:
<HTML>
<HEAD>
<TITLE>Prueba de mensaje</TITLE>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<INPUT TYPE="text" NAME="campo1" >
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-Formulario1.campo1.value = InputBox("Escribe un nmero
entre 0 y 10", "Entrar valor")
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>

Esta sera la apariencia despus de pulsar el botn "Prueba" del


formulario:

Y esta despus de haber escrito "10" en el cuadro de texto y


pulsado "Aceptar"

Para evitar errores, debers programar instrucciones que controlen


lo que el usuario ha contestado, por si en lugar de los datos
solicitados ha escrito otra cosa, o no ha escrito nada, ya que ambas
cosas suelen suceder con mucha frecuencia. Recuerda: slo a ti te
interesa que esto funcione bien.

El modelo de objetos del IE


Al igual que ASP, el IE proporciona una serie de objetos a los que
se puede acceder mediante los scripts escritos tanto
en VBScript como JScript. El modelo de objetos del IE es bastante
complejo, por lo que solamente veremos los ms habituales. En el
siguiente grfico tenemos la representacin de algunos de estos
objetos:

Se ve claramente que, en realidad, todos son sub-objetos del


objeto Window. En efecto, al tratarse este objeto del propio
navegador, evidentemente, cualquier otro objeto debe estar
integrado en l.
El objeto Window

Es el objeto bsico, y representa en s mismo al propio IE. Al ser el


elemento principal del modelo de objetos, para referirse a sus
propiedades, mtodos o eventos, no es necesario referenciarlo
especficamente.
El objeto Window tiene 11 propiedades, 8 mtodos y 2 eventos.
PROPIEDADES
Name Devuelve un string cuyo contenido es el nombre de la ventana

actual, siempre que la ventana haya sido abierta asignndole


especficamente un nombre. Por defecto las ventanas no tienen
nombre, y por tanto Name no tiene contenido (Empty). Por ejemplo:

<HTML>
<HEAD><TITLE>Objetos del IE</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-Document.Write "El nombre de esta ventana es: " &
Name
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>

Y despus de pulsar el botn "Prueba" del formulario solamente


obtendremos:
El nombre de esta ventana es:
Como ya se ha dicho, para que Name devuelva un valor es necesario
abrir la ventana asignndole un nombre. Para ello puedes utilizar el
mtodo Open de este mismo objeto (Window) que se describe ms
abajo.

Parent

Self

Top

Location

Devuelve o establece el contenido de la lnea de status del


navegador, situada en la esquina inferior izquierda de la ventana. Su
valor por defecto es "Listo". Para cambiar su contenido, por
ejemplo, con la frase "Esto es una prueba", se escribe:
Status

<HTML>
<HEAD><TITLE>Objetos del IE</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-Status = "Esto es una prueba"
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>

Y despus de pulsar el botn "Prueba" del formulario, obtendremos


en la lnea de estatus del navegador:

Hace lo mismo que Status, y aunque por su nombre lo


parezca, no sirve para cambiar el valor por defecto de la lnea de
status, que es "Listo".
DefaultStatus

Frames

History

Navigator

Document

MTODOS
Muestra un mensaje de alerta. Es parecido a la funcin
MsgBox(), pero a diferencia de sta, no se puede parametrizar ni
devuelve valores. Por ejemplo:
Alert

<HTML>
<HEAD><TITLE>Objetos del IE</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-Alert "Esto es una prueba"
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>

Y despus de pulsar el botn "Prueba" del formulario, obtendremos


el mensaje:

Muestra un cuadro de dilogo con dos botones. Es


parecido a la funcin MsgBox(), pero a diferencia de sta, no se
Confirm

puede parametrizar, aunque s devuelve dos valores booleanos (True


o False) dependiendo del botn pulsado por el usuario. Por ejemplo:
<HTML>
<HEAD>
<TITLE>Prueba de mensaje</TITLE>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<INPUT TYPE="Text" NAME="Campo1">
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-Formulario1.Campo1.value = Confirm("Quieres
continuar?")
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>

Despus de pulsar el botn "Prueba" del formulario tendremos


esto:

Y despus de pulsar el botn "Aceptar" del cuadro de dilogo


tendremos esto:

Fjate en que el valor devuelto es "Verdadero" en lugar de "True".


Para capturar los valores booleanos no se deben utilizar las frases
que aparecen aqu, que han sido convertidas, sino que se debe
evaluar directamente el valor booleano devuelto por el objeto, sin
conversiones que dependan de la lengua utilizada por el navegador.
As:
If Confirm ("Quieres continuar?") Then
Formulario1.campo1.value= "Ha pulsado Aceptar"
Else
Formulario1.campo1.value= "Ha pulsado Cancelar"
End If

Muestra un cuadro de dilogo con dos botones y un campo


de texto. Su funcionamiento es muy parecido a la funcin
InputBox(), pero a diferencia de sta, no se puede parametrizar.
Sea por ejemplo:
Prompt

<HTML>
<HEAD>
<TITLE>Prueba de mensaje</TITLE>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">

<INPUT TYPE="Text" NAME="Campo1">


<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-Formulario1.Campo1.value = Prompt("Escribir un
valor", "")
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>

Despus de pulsar el botn "Prueba" del formulario tendremos


esto:

En el ejemplo, despus de escribir un texto cualquiera y pulsar el


botn "Aceptar", lo escrito ser recibido por Campo1, pero si se
pulsa Cancelar, a diferencia de la funcin InputBox() que
devolvera Empty, lo que se recibe es Null

Open[url, name, features] Permite abrir una nueva ventana en la

que se est ejecutando una nueva instancia del IE. Opcionalmente,


tambin permite definir las caractersticas que tendr el nuevo
navegador, como son qu pgina mostrar, el nombre de la ventana

(utilizado por el objeto Name) y el aspecto que ofrecer el


navegador. Sea por ejemplo:
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-open "http://sestud.uv.es/manual.esp/", "Prueba", _
"width=300, height=300, location=no, status=yes,
toolbar=no, " & _
"menubar=no, scrollbars=no, resizable=no, left=100,
top=100"
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>

Y despus de pulsar el botn "Prueba" del formulario, obtendremos


una nueva ventana con esta apariencia:

Close Cierra la ventana actual. Por ejemplo:


<HTML>
<HEAD><TITLE>Objetos del IE</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-close
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>

Ejecuta el cdigo VBScript


contenido en instrucciones despus de transcurrido el tiempo, en
milisegundos, indicado por espera. Sea por ejemplo:
SetTimeout instrucciones, espera

<HTML>
<HEAD><TITLE>Objetos del IE</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<INPUT TYPE="Text" NAME="Campo1">
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-SetTimeout "Formulario1.Campo1.value = Time()", 2000"
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>

Despus de pulsar el botn "Prueba" del formulario, y transcurridos


dos segundos, obtendremos:

ClearTimeout(identificador) Despus de haber utilizado el

mtodo SetTimeout() anterior, VBScript mantiene memorizada la


evaluacin que realiz del parmetro instrucciones. Si en algun
punto del programa es necesario repetir esa evaluacin en lugar de
utilizar la ya realizada, es preciso inicializarla previamente. Para
ello se utilizaClearTimeout(identificador). Para poder hacerlo, es
necesario que el mtodo SetTimeout() haya sido invocado mediante
un identificador. As:
identificador=setTimeout('mensaje()', 2000)">

Y para inicializar la evaluacin y poder realizarla de nuevo:


clearTimeout(identificador)

Evidentemente en este ejemplo no tiene sentido inicializar nada, ya


que se trata de un mensaje fijo, pero este mtodo es
imprescindible si las instrucciones ejecutadas por setTimeout() son
expresiones numricas variables o contadores de tiempo, como en
el ejemplo anterior.

Navigate

ejemplo:

Navega hasta una nueva pgina en la misma ventana. Por

<HTML>
<HEAD><TITLE>Objetos del IE</TITLE></HEAD>
<BODY>

<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba">
<SCRIPT FOR="Boton1" EVENT="onClick" LANGUAGE="VBScript">
<!-Navigate "http://sestud.uv.es/manual.esp"
-->
</SCRIPT>
</FORM>
</BODY>
</HTML>

EVENTOS
Como su nombre indica, se produce cuando el IE carga una
pgina. Por ejemplo:
OnLoad

<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Prueba
Document.Write "Prueba de evento OnLoad"
End Sub
-->
</SCRIPT>
</HEAD>
<BODY OnLoad="Prueba">
</BODY>
</HTML>

Y este sera el resultado:


Prueba de evento OnLoad

Funciona justo al contrario que el anterior: se activa


cuando el navegador descarga la pgina actual, por ejemplo al
intentar ir a otra. En ese momento, se dispara el evento. El
siguiente ejemplo lleva a una pgina predeterminada siempre que se
intenta abandonar la activa:
OnUnload

<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Prueba
Navigate "http://sestud.uv.es/manual.esp"
End Sub
-->
</SCRIPT>
</HEAD>
<BODY OnUnload="Prueba">
De esta pgina no es fcil salir.
</BODY>
</HTML>
El objeto Document

Este objeto representa la pgina HTML cargada en el momento


actual en el navegador. Tambin contiene cualquier objeto definido
con HTML en la misma pgina, como pueden ser links, imgenes o
formularios. Los formularios, a su vez, contienen sub-objetos, como
los botones, cuadros de texto, listas, etc. El objeto Document tiene
numerosas propiedades y mtodos que son capaces de modificar el
aspecto de la pgina. Estas propiedades y mtodos solamente se
pueden invocar mientras la pgina est siendo cargada por el
navegador, que es el nico momento en que el IE analiza el cdigo
escrito.
El objeto Document tiene 11 propiedades, 5 mtodos y 2 subobjetos.
PROPIEDADES
LinkColor

ALinkColor

VLinkColor

BGColor

FGColor

Estas 5 propiedades son idnticas a los atributos que pueden


definirse en HTML, en el elemento <BODY>, para establecer los
colores de los links, texto y fondo de la pgina. La diferencia
estriba en que desde aqu se pueden cambiar esos colores,
previamente definidos o no, en el elemento <BODY>, o bien obtener
los valores actuales existentes en el momento de cargar la pgina.

Veamos un ejemplo solamente con los colores de fondo y texto


(BGColor y FGColor):
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Colores_1
Document.BGColor="green"
Document.FGColor="#00ff00"
End Sub
Sub Colores_2
Document.BGColor="white"
Document.FGColor="#000000"
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Color1"
onClick="Colores_1">
<INPUT TYPE="Button" NAME="Boton2" VALUE="Color2"
onClick="Colores_2">
</FORM>
<SCRIPT LANGUAGE="VBScript">
<!-Document.Write "BGColor = " & Document.BGColor &
"<br>"
Document.Write "FGColor = " & Document.FGColor &
"<br>"
-->
</SCRIPT>
</BODY>
</HTML>

Y este sera el resultado:

Al pulsar el botn Colores1 cambiarn los colores del fondo y del


texto:

Y al pulsar el botn Colores2 se recuperan los colores originales en


blanco y negro. Fjate en que el valor de los colores que aparecen
debajo de los botones estar siempre codificado en hexadecimal,
incluso aunque el color haya sido escrito de forma directa ("green",
"white") en la pgina. Recuerda tambin que el valor de los colores
que se obtiene de estas cinco propiedades es el que exista en el
momento de cargar la pgina el IE, no el que hay despus de
pulsar el botn.
Anchors

Devuelve un string con la URL completa de la pgina que


haya cargada. No hay que confundir esta propiedad del objeto
Location

Document con el objeto Location dependiente a su vez del


objeto Window. Sea, por ejemplo, esta misma pgina:
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Prueba
Document.Write Document.Location
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="Prueba">
</FORM>
</BODY>
</HTML>

Y despus de pulsar el botn Prueba, este sera el resultado:


http://sestud.uv.es/manual.esp/vbscript/vb14.htm
LastModified Devuelve un string con la fecha de la ltima

modificacin, es decir, la fecha que le asigne el sistema, de la


pgina que haya cargada. Por ejemplo:
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Prueba
Document.Write Document.LastModified
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">

<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"


onClick="Prueba">
</FORM>
</BODY>
</HTML>

Y despus de pulsar el botn Prueba, este sera el resultado:


04/02/2004 10:02:10
Devuelve el string que haya dentro del elemento <TITLE> de
la pgina que se haya cargado. Por ejemplo:
Title

<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Prueba
Document.Write Document.Title
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="Prueba">
</FORM>
</BODY>
</HTML>

Y despus de pulsar el botn Prueba, este sera el resultado:


Objetos del IE
Cookie Devuelve o define un string con el cookie, de la pgina que

haya cargada. Por ejemplo:

<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">

<!-Sub Prueba
Document.Write Document.Cookie
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="VBScript">
<!-Document.Cookie= "Prueba de control de cookie"
-->
</SCRIPT>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="Prueba">
</FORM>
</BODY>
</HTML>

Y despus de pulsar el botn Prueba, este sera el resultado:


Prueba de control de cookie;
ASPSESSIONIDQGGGGGDE=KMMCDGBCPKILGJFPADJFDECG
Si utilizas esto, recuerda que el navegador del cliente puede tener
desactivada la posibilidad de recibir cookies.
Referrer

MTODOS
Como su nombre indica, escribe un string dado. Al escribir
con este mtodo, hay que tener cuidado en dnde se pone la
instruccin, ya que al escribir puede borrar otros contenidos de la
pgina. En el siguiente ejemplo, al cargar la pgina aparece un botn
llamado Prueba y debajo la frase Prueba de escritura 1. Al pulsar
el botn, ste desaparece y la frase Prueba de escritura 2 pasa a
ocupar su lugar, quedando como nico contenido de la pgina. Esto
significa que Write sobreescribe toda la pantalla. As:
Write

<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Escritura
Document.Write "Prueba de escritura 2."
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="Escritura">
</FORM>
<SCRIPT LANGUAGE="VBScript">
<!-Document.Write "Prueba de escritura 1."
-->
</SCRIPT>
</BODY>
</HTML>

Funciona igual que el anterior, pero adems del string


dado, escribe a continuacin un retorno de lnea (vbLf). Como ya
sabes, en HTML los retornos de lnea no son interpretados por los
navegadores, que precisan el elemento <BR> para hacer efectivo el
truncamiento. As pues, este mtodo solamente tiene utilidad si va
a escribir dentro de un rea delimitada por el elemento <PRE>. Por
ejemplo:
WriteLn

<HTML>
<HEAD><TITLE>Objetos del IE</TITLE></HEAD>
<BODY>
<PRE>
<SCRIPT LANGUAGE="VBScript">
<!-Document.WriteLn="Prueba de escritura 1."
Document.WriteLn="Prueba de escritura 2."
-->
</SCRIPT>

</PRE>
</BODY>
</HTML>

Se obtiene:
Prueba de escritura 1.
Prueba de escritura 2.
Open
Close
Clear
El objeto Link

Este objeto hace referencia a un array (matriz de datos) que


contiene todos los links que existan en la pgina HTML cargada en
el navegador. Como ya sabrs, un link se define con el
elemento <A> junto con su atributo HREF. En un link tpico existen
9 partes diferenciadas, que son precisamente, las 9 propiedades
del objeto Link. Sea por ejemplo:
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Prueba
Document.Write "1 - " & Document.Link(0).Href & "<br>"
Document.Write "2 - " & Document.Link(0).Protocol & "<br>"
Document.Write "3 - " & Document.Link(0).Host & "<br>"
Document.Write "4 - " & Document.Link(0).HostName & "<br>"
Document.Write "5 - " & Document.Link(0).Port & "<br>"
Document.Write "6 - " & Document.Link(0).PathName & "<br>"
Document.Write "7 - " & Document.Link(0).Search & "<br>"
Document.Write "8 - " & Document.Link(0).Hash & "<br>"
Document.Write "9 - " & Document.Link(0).Target & "<br>"
End Sub
-->
</SCRIPT>
</HEAD>
<BODY OnLoad="Prueba">
<A
HREF="http://sestud.uv.es/manual.esp/vbscript/vb15.htm?tema="VBSscript
" target="mi_ventana">Link</A>
</BODY>
</HTML>

Este sera el resultado:


1 - http://sestud.uv.es/manual.esp/vbscript/vb15.htm?tema=
2 - http:
3 - sestud.uv.es:80
4 - sestud.uv.es
5 - 80
6 - manual.esp/vbscript/vb15.htm
7 - ?tema=
89 - mi_ventana
Recuerda que este objeto es un array, y stos siempre comienzan la
numeracin por el cero. Cada registro del array corresponder a un
link.
El objeto Link tiene tambin dos eventos:
OnMouseOver Dispara el evento cuando el puntero del ratn pasa
por encima del link, sin pulsar sobre el mismo. Por ejemplo:
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Prueba
MsgBox "Prueba de evento"
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="http://sestud.uv.es/manual.esp/vbscript/vb15.htm"
OnMouseOver="Prueba">Link</A>
</BODY>
</HTML>

OnClick Se dispara al pulsar con el ratn sobre el link. Primero se


ejecutar la accin programada para el evento, y despus se saltar
a la pgina indicada por el link. Por ejemplo:

<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Prueba
MsgBox "Prueba de evento"
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="http://sestud.uv.es/manual.esp/vbscript/vb15.htm"
OnClick="Prueba">Link</A>
</BODY>
</HTML>
El objeto Form

Este objeto, que a su vez es una propiedad del objeto Document,


representa un formulario creado con el elemento de HTML
<FORM></FORM> en la pgina cargada. Al objeto Formse puede
acceder mediante cualquiera de sus 5 propiedades. Tiene adems 1
mtodo y 1 evento.
PROPIEDADES
Las 4 primeras propiedades Action Method Target Encoding son del
tipo string, y devuelven o establecen el valor correspondiente a
esos parmetros de la definicin de un formulario. Por ejemplo, si
se escribe:
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Propiedades
Document.Write Formulario1.Action
& "<br>" & _
Formulario1.Method
& "<br>" & _
Formulario1.Target
& "<br>" & _
Formulario1.Encoding
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>

<FORM NAME="Formulario1"
ACTION="http://sestud.uv.es/manual.esp/"
METHOD="POST"
TARGET="MiVentana">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="Propiedades">
</FORM>
</BODY>
</HTML>

Y despus de pulsar el botn Prueba, este sera el resultado:


http://sestud.uv.es/manual.esp/
post
MiVentana
application/x-www-form-urlencoded
Nos queda una: Elements Esta propiedad hace referencia a los
controles de un formulario. Como Controles se consideran los
elementos tpicos presentes en los formularios, tales como los
botones, cuadros de texto, casillas de verificacin, etc. Estos
controles son tambin llamados elementos intrnsecos del HTML, y
a su vez, disponen de propiedades, mtodos y eventos, que se vern
en la pgina correspondiente.
Elements contiene una matriz con todos los elementos del
formulario, y por tanto es posible listarlos o referenciarlos por su
nombre o nmero de ndice. En el siguiente ejemplo, vemos como
hacer que el valor de los elementos (su parmetro VALUE) reciba el
nombre del propio elemento (su parmetro NAME):
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Elementos
For i=0 To 2
Document.Formulario1.Elements(i).Value =
Document.Formulario1.Elements(i).Name

Next
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1" >
<INPUT TYPE="Text" NAME="Campo1">
<INPUT TYPE="Text" NAME="Campo2">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="Elementos">
</FORM>
</BODY>
</HTML>

MTODO
Submit

Este conocido mtodo sirve para enviar el formulario y sus


contenidos al servidor. Es equivalente a los botones de formulario
del tipo Submit en lugar del tipo Button. En el ejemplo siguiente, los
dos botones hacen lo mismo de forma diferente:
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Enviar
Document.Formulario1.Submit
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1"
ACTION="http://sestud.uv.es/manual.esp/" METHOD="GET" >
<INPUT TYPE="Button" NAME="Boton1" VALUE="Envio 1"
onClick="Enviar">
<INPUT TYPE="Submit" NAME="Boton2" VALUE="Envio 2">
</FORM>

</BODY>
</HTML>

EVENTO
OnSubmit

Y este es el evento que se produce cuando se pulsa el botn de


tipo Submit del ejemplo anterior. Para capturarlo simplemente se
escribe:
<HTML>
<HEAD><TITLE>Objetos del IE</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-Sub Captura
Msgbox "Se ha enviado el formulario !"
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1"
ACTION="http://sestud.uv.es/manual.esp/"
METHOD="GET" OnSubmit="Captura">
<INPUT TYPE="Submit" NAME="Boton2" VALUE="Envio 2">
</FORM>
</BODY>
</HTML>
Controles HTML intrnsecos

Bajo esta denominacin se encuentran los elementos tpicos de


los formularios, que ya conocemos. Precisamente por ser elementos
intrnsecos de HTML carecen de propiedades o mtodos, es decir,
no son objetos, son elementos contenidos dentro del objeto Form, y
ya hemos visto cmo se puede controlar sus
atributos NAME y VALUE desde las propiedades de este objeto. S
disponen de algunos eventos:
CheckBo Hidde Passwor
Element
Button
Radio
x
n
d
o
Eventos OnClic OnClick --

Reset

Select

Submit Text

TextArea

OnFocu OnClic OnClic OnFocus OnClic OnFocus OnFocus

k
OnFocus
OnFocu
s

s
k
k
OnBlur k
OnBlur
OnBlur OnFocu OnFocu OnChang OnFocu OnSelect
s
s
e
s
OnChang
e

OnBlur
OnSelect
OnChang
e

Este es el significado de los eventos:

OnClick Se produce cuando se pulsa con el botn izquierdo del


ratn sobre el elemento.
OnFocus Se produce cuando el elemento recibe el enfoque, es
decir, cuando el cursor est situado sobre l, pero no cuando
el ratn est sobre l. Por tanto, solamente se produce
despus de haber pulsado el ratn.
OnBlur Es lo contrario del anterior, es decir, cuando el
elemento deja de tener el enfoque, por ejemplo, despus de
pulsar la tecla de tabulacin.
OnChange Se produce cuando el valor actual del control
cambia de cualquier forma: de vaco a valor o de valor a otro
valor diferente o a vaco
OnSelect Cuando el contenido del elemento es seleccionado,
es decir cuando cambia el color del fondo. No es lo mismo que
recibir el enfoque, aunque necesariamente OnFocusse
producir antes.

La sintaxis de todos estos eventos es la misma que ya se ha visto en


pginas y ejemplos anteriores.
Eventos del navegador

Los eventos se pueden asociar a una imagen, un formulario, un


enlace, cadena de texto, o cualquier otro objeto de la pgina. Puede
que no todos funcionen en todos los navegadores. Como siempre,
hay que probar cuantos ms mejor. Veamos los ms usuales
atendiendo a dnde se producen.

Eventos de ratn

onClick Se activa al pulsar cualquier botn del ratn.


onDblClick Se activa si se hace un doble click.
onMouseDown Se activa si se pulsa el botn izquierdo del mouse.
onMouseMove Se activa si se mueve el mouse.

onMouseOver Se activa cuando el puntero se sita sobre el objeto


(cualquiera) que incluye al evento.
onMouseOut Se activa cuando el puntero sale del objeto que
incluye al evento.
onMouseUp Se activa si se suelta un botn pulsado en el mouse (lo
contrario de onClick).
onDragStart Se activa cuando se inicia un arrastre.
onSelectStart Se activa cuando se inicia una seleccin con el
ratn.
onSelect Se activa cuando ya se ha realizado una seleccin con el
ratn.

Eventos de teclado

onKeyDown Se activa si se pulsa una tecla cualquiera.


onKeyPress Se activa si se pulsa y suelta una tecla.
onKeyUp Se activa cuando se suelta una tecla pulsada.
onHelp Se activa si se pulsa la tecla de ayuda (normalmente F1).

Eventos de enfoque

onFocus Se activa cuando se entra en el mbito de un elemento al


que est asociado el evento. Generalmente elementos de un
formulario
onBlur Se activa al abandonar el mbito del elemento al que est
asociado (lo contrario de onFocus).

Eventos de formulario

onReset Se activa al pulsar un botn de reset de un formulario.


onSubmit Se activa al enviar un formulario.

Eventos de carga de pgina


onAbort Se activa cuando se aborta la carga de la pgina.
onError Se activa cuando se produce un error inesperado durante
la carga de la pgina.
onLoad Se activa cuando se carga la pgina completa.
onUnload Se activa cuando el usuario descarga la pgina, es decir,

cuando carga otra o pretende salir del navegador.


onAfterUpdate Se activa si se actualiza o recarga la pgina.

JavaScript y Java
Un poco de historia.

El JavaScript es un lenguaje de programacin que surgi por la


necesidad de ampliar las posibilidades del HTML. En efecto, al poco
tiempo de que las pginas web apareciesen, se hizo patente que se
necesitaba algo ms que las limitadas prestaciones del lenguaje
bsico, ya que el HTML solamente provee de elementos que actuan
exclusivamente sobre el texto y su estilo, pero no permite, como
ejemplo sencillo, ni siquiera abrir una nueva ventana o emitir un
mensaje de aviso. La temprana aparicin de este lenguaje, es
posiblemente la causa de que se haya convertido en un estndar
soportado por todos los navegadores actuales, a diferencia de
otros, que solo funcionan en los navegadores de sus firmas
creadoras.
Como tantas otras aportaciones al mundo www, fue Netscape quien
inici la implementacin de JavaScript (aunque al principio no se
llamaba as), y posteriormente, una alianza entre Netscape y Sun,
creadora del lenguaje Java, permiti que JavaScript tomase la
debida consistencia, definindose como una variante de Java, pero
mucho ms simple de usar. Esto no significa que JavaScript sea
Java simplificado o reducido. Salvo el nombre y la sintaxis,
JavaScript no tiene mucho en comn con Java, pero cumple su
propsito de lenguaje auxiliar del HTML en los navegadores, y slo
en ellos ya que no es posible utilizarlo fuera del entorno de las
pginas. No hay que confundirlo con el JScript de Microsoft, que
aunque bastante parecido, no tiene la compatibilidad del original
JavaScript, ya que, como todo lo que hacen, est pensado
exclusivamente para su propio navegador.
Diferencias

Java es un lenguaje compilado, es decir, que una vez escrito el


programa, y a partir de su cdigo fuente, mediante la compilacin
se genera un fichero ejecutable para una determinada plataforma

(Unix, Windows, etc.) que ser completamente autnomo. Es un


lenguaje de propsito general, infinitamente ms potente que
JavaScript, con el que se han escrito infinidad de aplicaciones muy
conocidas, entre ellas los sistemas de telefona mvil.
JavaScript es un lenguaje interpretado lnea a lnea por el
navegador, mientras se carga la pgina, que solamente es capaz de
realizar las acciones programadas en el entorno de esa pgina
HTML donde reside. Slo es posible utilizarlo con otro programa
que sea capaz de interpretarlo, como los navegadores web.
Este es un lenguaje orientado a objetos, es decir que la mayora de
las instrucciones que se emplean en los programas, en realidad son
llamadas a propiedades y mtodos de objetos del navegador, y en
algunos casos del propio lenguaje. En Java, en cambio, no hay nada
que no est en un objeto.
Cmo se utilizan?

Java
El lenguaje Java es, posiblemente, el que tienen mayor portabilidad,
lo que permite escribir programas capaces de ejecutarse en
cualquier plataforma, sin realizar apenas ningun cambio. Esta
portabilidad propici que el HTML implementase la posibilidad de
incrustar programas escritos en Java, que pueden funcionar de
forma independiente del resto de la pgina. Estos programas
autnomos reciben el nombre de APPLETS, y se integran en el
cdigo HTML mediante el elemento <APPLET>. Se utiliza as:
<BODY>
<APPLET CODE="AnimText.class" WIDTH=600 HEIGHT=40>
<PARAM NAME=text VALUE="Esto es una prueba de Applet Java">
<PARAM NAME=font VALUE="TimesRoman">
<PARAM NAME=type VALUE=1>
<PARAM NAME=fgcolor VALUE="yellow">
<PARAM NAME=min VALUE=12>
<PARAM NAME=max VALUE=36>
<PARAM NAME=naptime VALUE=100>
<PARAM NAME=align VALUE=left>
</APPLET>
..
..
..
</BODY>

Este es un applet que forma "olas" con un texto, y puedes probarlo


desde aqu.
Analicmoslo brevemente:
El valor del atributo CODE es el nombre del
programa: "AnimText.class". Los applets Java cuando se compilan,
no son ejecutables directamente desde el sistema operativo de tu
mquina, son compilados a nivel objeto (un nivel intermedio entre el
cdigo fuente y el cdigo ejecutable) con la extensin .class, y
ejecutados a travs del visualizador.
Los siguientes elementos son PARAM NAME, y puede deducirse
fcilmente para que sirve cada uno: definicin del texto que va a
aparecer, fuente de la letra, color del texto, etc..
Si pulsas aqu podrs ver el cdigo fuente de este applet.

JavaScript
Para embeber un JavaScript en una pgina HTML, se utiliza el
elemento <SCRIPT>. Este elemento, habitualmente, va dentro del
HEAD de la pgina, y no en el BODY.
Por ejemplo si escribes:
<HTML>
<HEAD>
<TITLE> Prueba</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-document.write("<CENTER><H3>Mi primer JavaScript</H3></CENTER>")
// -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Tendramos una pgina con el ms elemental de los scripts. Fjate


en que despus del elemento SCRIPT se abre un comentario (<!--

-->)que contiene las instrucciones. Esto es para ocultar el script a


los visualizadores que no sean capaces de interpretarlo. Fjate
tambin en que antes del cierre del comentario (-->) hay dos
barras (//): Esto es para que el intrprete JavaScript no tome el
cierre como un instruccin y d un error, es decir, se trata de un
comentario propio de JavaScript, no de HTML.
Puedes probar el script pulsando aqu.
En el ndice encontrars algunos ejemplos de pginas con programas
JavaScript. Para ver cmo estan hechos puedes abrirlos con el bloc
de notas o cualquier otro editor.
JavaScript s o no?

Una de los problemas ms graves que tiene el JavaScript es que


cada navegador tiene un nivel de lenguaje diferente (incluso alguno
hace caso omiso a los estndares), hay distintas versiones de
lenguaje oficial, y hay versiones de lenguaje que slo funcionan en
un navegador concreto. Esto propicia que cuando en una sesin el
navegador ha cargado un cierto nmero de pginas con cdigo
JavaScript, es raro que todas ellas contengan cdigo cien por cien
compatible con nuestro navegador, y ste puede acabar colgndose,
no cargando correctamente las pginas, o no ejecutando los
programas JavaScript que stas contienen. Como siempre se ha
dicho en esta guia, se debe probar el cdigo en cuantos
navegadores sea posible, y tratar de escribir los programas de la
forma ms estandarizada posible.
Otro aspecto que no debes olvidar cuando incluyas JavaScript en
tus pginas, es que el cliente, tal vez, tenga desactivado el
JavaScript de su navegador; en muchos casos incluso desconoce
cmo activarlo. Entonces, si has basado en este cdigo el buen
funcionamiento de la pgina, tendrs problemas. En general, a nadie
le gusta que un sitio web le obligue a cambiar los niveles de
seguridad de su mquina, y puede decidir abandonar nuestro sitio
antes que hacerlo. Por tanto, no es recomendable basar en
JavaScript aspectos esenciales del funcionamiento de una pgina.
Evidentemente, todo va a depender del tipo de pgina de que se

trate: no es lo mismo un formulario de captura de datos que hay


que controlar, que un men desplegable o una simple decoracin
aleatoria. Siempre que sea posible, es conveniente plantearse si
algunas funciones de control es mejor hacerlas en el servidor
utilizando ASP, JSP, PHP, etc., Recuerda que lo programado en el
servidor siempre es compatible con todos, y dependes mucho menos
del navegador utilizado por el cliente.

Cmo se escribe el JavaScript?


El elemento <SCRIPT>

Los scripts de JavaScript se escriben de forma similar a los de


VBScript, pero su sintaxis es mucho ms estricta, y esta es una de
las causas ms habituales de error. En JavaScript, a diferencia de
VBScript, no se pueden escribir maysculas alegremente. No es lo
mismo MiFuncion() que mifuncion(), y si escribimos, por
ejemplo, Document.Write()no funcionar. Todo el cdigo deber ir
escrito entre <SCRIPT> y </SCRIPT>. Puesto que este elemento
HTML es el mismo que se emplea con otros lenguajes, como
VBScript, es preciso indicar al navegador el lenguaje que se va a
utilizar al definir el script. Sea por ejemplo:
<SCRIPT LANGUAGE=JavaScript>
<!-document.write("Esto ha sido escrito por
JavaScript")
// -->
</SCRIPT>

Fjate en que dentro de la etiqueta HTML <SCRIPT> y antes del


cdigo JavaScript propiamente dicho, aparece el smbolo del
comentario HTML <!--. Esto se hace para evitar que los
navegadores que no son capaces de interpretar el script muestren
el cdigo. Otra cosa importante son las dos barras (//) que
aparecen justo antes del cierre del comentario html: -->. Estas
barras son el indicativo de que lo que viene a continuacin es un
comentario tambin, pero del propio JavaScript en este caso, y hay
que ponerlas para evitar que el intrprete JavaScript tome el
cierre del comentario html como una instruccin y produzca un

error de sintaxis. Esto es vlido siempre que el comentario vaya a


tener una sola lnea. Si va a tener ms se utilizarn /* ... */. As:
/*
Comentario 1
Comentario 2
*/
JavaScript entiende que una instruccin ha terminado cuando
encuentra un retorno de lnea, pero si se desea escribir ms de una
instruccin en la misma lnea hay que separarlas con ; al final de
cada instruccin, excepto la ltima que no lo necesita, aunque no
ocurre nada si se escribe.
Los scripts pueden escribirse tanto en la <HEAD> como en
el <BODY> de la pgina. Por claridad a la hora de revisar el cdigo,
es preferible escribir todas las declaraciones y sentencias al
principio de la pgina, en la <HEAD>, aunque esto depender de las
necesidades del programa, claro. Tambin, si ello es necesario,
puede escribirse el cdigo en los dos sitios a la vez. Por ejemplo, si
escribimos
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!-document.write("Esto ha sido escrito por JavaScript
desde HEAD <BR>")
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!-document.write("Esto ha sido escrito por JavaScript
desde BODY")
// -->
</SCRIPT>
<P>
Esto ha sido escrito por HTML.

</BODY>
</HTML>

Se obtiene:
Esto ha sido escrito por JavaScript desde HEAD
Esto ha sido escrito por JavaScript desde BODY
Esto ha sido escrito por HTML.

Otra particularidad de la sintaxis de JavaScript son las llaves: { }.


Estas llaves hay que utilizarlas siempre que el bloque de
declaraciones vaya a tener ms de una lnea, y son obligatorias al
definir funciones. Pueden anidarse si el programa va a tener varios
bloques, y siempre deben ser pares. Por ejemplo, en la siguiente
funcin:
<HTML>
<HEAD>
<TITLE>Capturar evento de boton</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!-function mensaje() {
alert("Esto es un mensaje de JavaScript")
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="mensaje()">
</FORM>
</BODY>
</HTML>

Fjate en que la funcin es invocada al pulsar el botn del


formulario, capturando un evento: onClick, pero tambin es posible
escribir directamente la instruccin en el punto de captura en lugar
de utilizar el elemento <SCRIPT>. Por ejemplo:

<HTML>
<HEAD><TITLE>Capturar evento de boton</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick=javascript:alert("Mi mensaje")>
</FORM>
</BODY>
</HTML>

Esta forma es aceptable si, como en el ejemplo, la funcin es muy


simple.
Al igual que se puede hacer con las hojas de estilo en cascada
(CSS), JavaScript permite que todo el cdigo (o parte de l) est
en un fichero independiente de la pgina html, lo que permite
modificar y mantener ms rpidamente la programacin, sin
necesidad de editar muchos ficheros diferentes. El fichero que
contiene el cdigo JavaScript, normalmente tiene la
extensin .js
Sea el ejemplo anterior:
<HTML>
<HEAD>
<TITLE>Capturar evento de boton</TITLE>
<SCRIPT LANGUAGE=JavaScript src="fichero.js"></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="mensaje()">
</FORM>
</BODY>
</HTML>

Donde el contenido de fichero.js es:


function mensaje() {
alert("Esto es un mensaje de JavaScript")
}

Como puedes ver, en este fichero no hay que incluir el elemento


<SCRIPT>, sino solamente instrucciones JavaScript. Para mayor
claridad de los ejemplos, se emplear este sistema siempre que sea
posible. Los programas JavaScript, como todos los programas, se
comienzan definiendo las variables, despus las funciones, y a
continuacin la estructura del programa propiamente dicha, si la
hay. Recuerda que este es un lenguaje interpretado, es decir, que
las instrucciones se van cargando en memoria a medida que se leen,
y por tanto es necesario tener cuidado con el orden en que se
escriben las variable y las funciones que sern invocadas desde el
ncleo del programa. Por ejemplo, si una instruccin que llama a una
funcin se escribe antes que la funcin llamada, se producir un
error, ya que en ese momento la funcin todava no existe.
Variables

Las variables son espacios de memoria que contienen algun tipo de


dato, al que se accede mediante el nombre que se le asigne a la
variable. En JavaScript no hay constantes como en VBScript. Los
nombres de las variables tienen que comenzar siempre por una letra
o el signo del subrayado ( _ ) y no pueden contener espacios en
blanco ni caracteres que no sean letras o nmeros, lo que excluye
letras acentuadas, ees, cedillas, etc. Al escribirlos, si se utilizan
maysculas, recordar que no es lo mismo MiVariable que mivariable.
Por supuesto, no puedes crear una variable con ninguna palabra
reservada del lenguaje, como return, if, case, etc.
Para crear una variable, simplemente se escribe su nombre, y si se
desea, en ese mismo momento, se le asigna un valor. Dependiendo
del mbito de actuacin de la variable, habr que utilizar, o no, la
instruccin var en el momento de crearla. Por ejemplo:
var MiVariable = 2004
Tambin es posible definir varias variables en una misma lnea:
var Variable1, Variable2, Variable3
Como puedes ver, la instruccin var es similar a la instruccin Dim
de VBScript. Cuando una variable es definida con la

instruccin var en un bloque acotado por llaves { } (mbito),


solamente estar disponible en ese bloque, y se la denomina
variable de mbito local. Si se declara sin la instruccin var, es una
variable de mbito global, no importando dnde ha sido declarada, y
estar disponible en cualquier lugar de la pgina (a partir de donde
ha sido declarada, pero no antes). Si se declaran dos variables con
el mismo nombre, pero una global y la otra local, la global ser
accesible desde toda la pgina, excepto en el rea donde "reina" la
local, que impondr su valor all. No es buena idea declarar variables
duplicadas, salvo que sea estrictamente necesario, claro.
Las variables pueden contener cualquier tipo de dato, como
cadenas, nmeros, valores booleanos, o incluso objetos. Se pueden
cambiar los tipos de datos que contienen en cualquier momento sin
necesidad de redefinir la variable.
A los valores contenidos en las variables se les denomina literales.
El literal es un concepto a veces confuso. Si, por ejemplo, decimos
que variable1 = "A" y variable2 = "B"podemos acceder a "A" o
a "B" bien invocando el nombre de las variables correspondientes, o
invocando sus literales, es decir, directamente sus valores. La suma
(o concatenado en este caso) de variable1 + variable2 es lo mismo
que la suma de sus literales: "A" + "B" = "AB"
Variables de cadena

Construir una variable conteniendo un string o cadena no tiene


ninguna dificultad. Como ya sabrs, un string o cadena es cualquier
contenido acotado por comillas, simples ' o dobles".
mivariable = "Hola"
Tambin es posible concatenar dos o ms cadenas usando el
signo + :
mivariable = "Prueba de " + "concatenado"
Y este sera el resultado:
Prueba de concatenado

Si dentro de una cadena acotada por comillas, tanto simples como


dobles, se incluye otra subcadena acotada por las otras comillas, no
se considera un concatenado. Por ejemplo, son vlidas las cadenas:
"Comillas dobles con 'simples' en el interior"
'Comillas simples con "dobles" en el interior'
Puesto que las cadenas se pueden definir tanto con comillas simples
como dobles, puede ocurrir que dentro de la cadena haya que poner
uno de estos signos, o los dos, lo que provocara un error de
sintaxis. Para resolver este problema se utilizan los "escapes", es
decir, el mismo caracter que se quiere escribir precedido
de \ Esto evita que sea interpretado, no como el cierre de las
comillas, sino como un carcter normal. As:
mivariable = "Prueba de " + "\"concatenado\" " +
'\'doble\''
Y este sera el resultado:
Prueba de "concatenado" 'doble'
Esto mismo tambin es posible hacerlo usando el cdigo
hexadecimal del carcter deseado. Normalmente se utiliza la
codificacin hexadecimal slo con los caracteres que noadmiten el
"escapado" (que son casi todos). Aplicndolo a las comillas sera as:
mivariable = "Prueba de " + "\x34concatenado\x34 " +
'\x27doble\x27 '
Adems de las comillas y el cdigo hexadecimal ya vistos, se puede
"escapar" la misma barra inclinada: \\, la \t para insertar un
tabulador horizontal, y la \n para forzar una nueva lnea. Fjate que
en el caso de estos dos ltimos, el escape funciona al revs que en
las comillas o la barra inclinada: En efecto, mientras que con las
comillas el escape pretende que no se interprete su cualidad para
abrir o cerrar cadenas, con t o n lo que se hace es darles las
cualidades que no tienen para producir un tabulador o un salto de
lnea. Recuerda tambin que tanto el tabulador como la nueva lnea
no tienen efectos visibles en los navegadores, por lo que su utilidad

se limita al formateo de texto dentro del entorno JavaScript


exclusivamente. Al ser la barra inclinada \ el controlador de
escapes, si en una cadena hay que escribirla, deber hacerse
escpndose a s misma. Por ejemplo, si se escribe la tpica ruta del
directorio temp en el disco C:
document.write("C:\temp") se obtiene C: emp Como puedes
ver, en este caso el error es doble, ya que la barra no puede
aparecer sin escape como tal carcter, y adems, al estar junto a
la t, se ha interpretado como indicador de tabulacin. La sintaxis
correcta es: document.write("C:\\temp") para
obtener C:\temp
No hay que confundir los caracteres con escape con una de las
pocas funciones intrnsecas de JavaScript: escape() y su
inversa: unescape(). La funcin escape() devuelve el cdigo
ASCII decimal de los caracteres especiales, es decir cualquier
caracter que no sea una letra (maysculas o minsculas), un nmero,
o el punto, el guin, el subrayado o la arroba (Az 1-9 _ . @).
Todos los dems sern codificados. Por ejemplo, si se escribe:
document.write(escape("$ % & @"))
Se obtiene:
%24%20%26%20%25%20@
Como puedes ver, se codifica incluso el espacio en blanco (%20). Y
con su inversa:
document.write(unescape("%24%20%26%20%25%20@"))
Se obtiene:
$ % & @
Procedimientos y funciones

En JavaScript no pueden definirse procedimientos Sub como en


VBScript, pero s funciones (function). A cambio, aqu las funciones
pueden realizar tanto acciones como devolver valores, mientras que

en VBScript solamente los procedimientos Sub pueden realizar


acciones. Dentro de una funcin no se puede definir otra funcin,
pero s pueden realizarse llamadas a cuantas sea necesario. Para
declarar una funcin simplemente se escribe la
instruccin function y a continuacin el nombre que tendr seguido
de un par de parntesis que contendrn los argumentos, si los los
hay. Por ejemplo:
function mensaje()
b)

y si tiene argumentos: function sumar(a,

Los argumentos pueden ser variables, o directamente cadenas,


nmeros e incluso objetos.
Despus de haber definido el nombre de la funcin, se escribe un
par de llaves, dentro de las cuales irn todas las lneas que
compongan el cdigo de nuestra funcin. Por ejemplo:
function mensaje() {
alert("Esto es un mensaje de JavaScript")
}

Las funciones de javaScript reciben los argumentos por valor, es


decir, que si la funcin cambia el valor de los parmetros recibidos,
este cambio no se reflejar globalmente, sino que slo ser
efectivo en el mbito de la propia funcin, ni siquiera si la misma
funcin es llamada desde otro punto del programa.
No hay que confundir la declaracin de funciones con el
objeto Function() de javaScript. Fjate en que el nombre de este
objeto comienza por "F" mayscula. Se ver en el
apartado Objetos.
Normalmente las funciones se invocarn capturando un evento, es
decir, un suceso que se produce y es detectado en la ventana del
navegador. Uno de los eventos ms comunes es el que detecta la
pulsacin (onClick) del puntero del ratn sobre un objeto, por
ejemplo, un botn de un formuulario. En el siguiente ejemplo
veremos cmo escribir una pgina que captura un evento en el botn

de un formulario que llama a una funcin. Esta funcin invoca el


mtodo alert del objeto window:
<HTML>
<HEAD>
<TITLE>Capturar evento de boton</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!-function mensaje() {
alert("Esto es un mensaje de JavaScript")
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="mensaje()">
</FORM>
</BODY>
</HTML>

Y al pulsar el botn, se obtiene:

Al ser capaz function de realizar acciones tanto como de devolver


valores, es necesaria una instruccin que le indique lo que debe
hacer: return. Solamente si aparece esta instruccin al final de la
funcin, sta devolver el valor que tenga programado, si no,
realizar las tareas que tenga encomendadas, pero no se podr
obtener de ella una respuesta. Por ejemplo:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--

function sumar(a, b) {
sumar = a + b
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!-document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>

Se obtiene:
undefined

Como puedes ver, se ha definido una funcin con dos


argumentos: a y b que sern sumados. No obstante, cuando es
invocada para escribir el resultado de la suma, se obtiene una
desconcertante respuesta: undefined . Esto es debido a que no se le
ha dicho que entregue el resultado, sino solamente que lo calcule.
Pero si se escribe:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!-function sumar(a, b) {
sumar = a + b
return sumar
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!-document.write(sumar(2, 2))

// -->
</SCRIPT>
</BODY>
</HTML>

Esta vez s se obtiene lo esperado:


4

En el ejemplo, la funcin devuelve el resultado de la suma en una


variable que se llama igual que la propia funcin: sumar, pero
tambin se puede hacer sobre una variable con distinto nombre. Por
ejemplo, funcionara igual as:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!-function sumar(a, b) {
resultado = a + b
return resultado
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!-document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>

Tambin es posible devolver directamente el resultado de la suma


sin depositar el valor previamente en ninguna variable ni en el
nombre de la funcin:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>

<!-function sumar(a, b) {
return a + b
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!-document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>

En JavaScript las funciones que tienen argumentos, como la del


ejemplo, automticamente son provistas de un vector conteniendo
los valores de los argumentos. Y te preguntars qu es eso de un
"vector". Un vector es algo parecido a una matriz o array, y en este
caso nos permite acceder a los valores de los argumentos a y b por
otra via que no es utilizarlos directamente. Estos vectores, cuando
hay que automatizar procedimientos, pueden resultar muy tiles. En
el caso del vector de nuestra funcin, y como todos los vectores y
arrays, la numeracin del ndice comienza por el cero, y por
supuesto, el orden de los valores en el vector es el mismo que el de
los argumentos en la funcin, es decir, el ndice 0 corresponde al
argumento a y el ndice 1 corresponde al b. Este ejemplo es
equivalente al anterior:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!-function sumar(a, b) {
return arguments[0] + arguments[1]
}
// -->
</SCRIPT>
</HEAD>
<BODY>

<SCRIPT LANGUAGE=JavaScript>
<!-document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>

La palabra arguments, como ya habrs supuesto, es reservada y no


puede emplearse como nombre de variable ni de funcin, y tiene una
propiedad: length que nos indica la longitud del ndice del vector.
Por ejemplo, si modificamos un poco la funcin anterior:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!-function sumar(a, b) {
return arguments.length
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!-document.write(sumar(2, 2))
// -->
</SCRIPT>
</BODY>
</HTML>

Se obtiene 2 que es el nmero de argumentos que tiene la funcin.


Fjate en que este contador no empieza en el cero, puesto que
devuelve 2.

Operadores de JavaScript

Tipos de operadores

En JavaScript encontramos cinco tipos de operadores:

Aritmticos
Lgicos
De comparacin
Binarios
De asignacin
Otros

Operadores aritmticos

Suma (+). Suma dos nmeros: 3 + 2 = 5 . Si en lugar de nmeros se


suman cadenas, como por ejemplo "A" + "B" = "AB" se produce una
concatenacin. Si alguno de los elementos a concatenar no es una
cadena de texto, queda convertido a cadena: "AB" + 123 = "AB123" .
Resta (-). Halla la diferencia entre dos nmeros. Ejemplo A: 3-2 =
1 . Ejemplo B: (-1)-(-2) = 1 .
Negativo (-). Indica el signo negativo de un nmero o una
expresin: -3.
Divisin (/). Divide dos nmeros, obteniendo un cociente de coma
flotante: 5 / 2 = 2.5 . Fjate en que el separador decimal es el
punto.
Mdulo aritmtico %. Divide dos nmeros, obteniendo
un resto entero: 5 % 2 = 1 .
Multiplicacin (*). Multiplica dos nmeros: 3 * 2 = 6 .
Incrementos y decrementos (++ --). Incrementa o decrementa
el valor de una variable numrica en una unidad. No puede aplicarse
a un literal. Pueden darse dos casos:
var A, B; B = 2;
A =
A =

++B
B++

En el primer caso, A = 3 Es decir, que el incremento de B ha


sido el correcto, pero no as el segundo, en el que A = 2. Esto se
debe a que, en el primer caso, el incremento se efecta antes de
que la expresin sea evaluada, y en el segundo, se
incrementa despus de la evaluacin segn indica el orden de
precedencia de los operadores (ver tabla al final de esta pgina).
De igual forma, para decrementos:
var A, B; B = 2;
A =
A =

--B
B--

En el primer caso resulta: A = 1 y en el segundo: A = 2


Operadores lgicos

Estos operadores tienen unas aplicaciones un tanto especiales, ya


que no funcionan como los aritmticos, conocidos por todos. Para
comprender el funcionamiento de los operadores lgicos, primero
hay que saber qu son los estados lgicos de una expresin. Y te
preguntars que es eso de "estados lgicos"... Esta es una cuestin
un tanto filosfica, ya que el estado lgico de algo depende de
respecto a qu establecemos ese estado, y por tanto no siempre
ser el mismo. Depender del entorno o contexto en el que se
define y utiliza la expresin. En JavaScript hay tres posibles
estados lgicos: True (verdadero), False (falso) y Null (nulo, es
decir que no se ha establecido estado alguno por la razn que sea)
Por ejemplo, supongamos que hay que establecer el estado lgico de
un material: El hierro. Evidentemente, para establecer un estado
lgico primero tenemos que decidir respecto a qu se establece ese
estado, ya que no podemos decir simplemente que el hierro es
verdadero o falso. Nos tendremos que referir a alguna cualidad del
material y compararla con algo para establecer si el estado es
verdadero o falso.
Sea la expresin El hierro es un metal . Si tenemos que
establecer el estado lgico de esta expresin, la respuesta
inmediata es Verdadero (True) y si la expresin fuese El hierro
no es un metal , inmediatamente pensarmos que el estado
adecuado es Falso (False)

Una vez establecido el estado lgico de la expresin,


los operadores lgicos nos permitirn tomar decisiones mediante la
verificacin de ese estado, bien tomando uno solo, o agrupando
varios de ellos. Al igual que los operadores aritmticos, los
operadores lgicos tienen un orden preestablecido de evaluacin
que debe ser tenido en cuenta. Los estados lgicos, o mejor dicho,
el resultado que dan los operadores lgicos, pueden tratarse
tambin como nmeros booleanos, siendo True equivalente
a 1 y False equivalente a 0.
Negacin lgica ! (Not). Establece una negacin lgica en una

expresin, es decir, que ante una expresin, cuyo estado lgico


es True (verdadero), el operador har que devuelvaFalse (falso).
El hierro es un metal = True.
! El hierro es un metal = False.
Hay tres posibles resultados aplicando este operador a una
expresin:
Si la expresin = True el operador devuelve False.
Si la expresin = False el operador devuelve True.
Si la expresin = Null el operador devuelve Null.
Conjuncin lgica && (And). Establece una conjuncin lgica de dos

expresiones, es decir, que han de resultar True (verdadero) las dos


expresiones para que el resultado final tambin lo sea.
El hierro es un metal = True.
El hierro es duro = True.
El hierro es un metal && El hierro es duro = True.
Hay 9 posibles resultados aplicando este operador
a dos expresiones, aunque es posible incluir cuantas sean
necesarias:
Si la Expresin 1 = True && Expresin 2 = True el
resultado es True.
Si la Expresin 1 = True && Expresin 2 = False el
resultado es False.

Si la Expresin 1
resultado es Null.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es Null.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es Null.

= True && Expresin 2 = Null el


= False && Expresin 2 = True el
= False && Expresin 2 = False el
= False && Expresin 2 = Null el
= Null && Expresin 2 = True el
= Null && Expresin 2 = False el
= Null && Expresin 2 = Null el

Como puedes ver, si, y slo si, ambas expresiones se evalan como
True, el resultado es True. Si cualquiera de las expresiones es
False, el resultado es False.
Disyuncin lgica || (Or). Establece una disyuncin lgica de dos

expresiones, es decir, que el resultado se dar evaluando una


expresin u otra.

El hierro es un metal = True.


El hierro es duro = True.
El hierro es un metal || El hierro es duro = True.
Hay 9 posibles resultados aplicando este operador
a dos expresiones, aunque es posible incluir cuantas sean
necesarias:
Si la Expresin 1
resultado es True.
Si la Expresin 1
resultado es True.
Si la Expresin 1
resultado es True.
Si la Expresin 1

= True || Expresin 2 = True el


= True || Expresin 2 = False el
= True || Expresin 2 = Null el
= False || Expresin 2 = True el

resultado es True.
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es Null.
Si la Expresin 1
resultado es True.
Si la Expresin 1
resultado es Null.
Si la Expresin 1
resultado es Null.

= False || Expresin 2 = False el


= False || Expresin 2 = Null el
= Null || Expresin 2 = True el
= Null || Expresin 2 = False el
= Null || Expresin 2 = Null el

Como puedes ver, si cualquiera de las expresiones, o ambas, son


True, el resultado es True.
Exclusin lgica ^ (Xor). Establece una exclusin lgica de dos

expresiones, es decir, que el resultado se dar evaluando una


expresin u otra, y dar True si solamente una de ellas es True, lo
que implica la exclusin de la otra.
El hierro es un metal = True.
El hierro es duro = True.
El hierro es un metal ^ El hierro es duro = False.
Hay 4 posibles resultados aplicando este operador
a dos expresiones:
Si la Expresin 1
resultado es False.
Si la Expresin 1
resultado es True.
Si la Expresin 1
resultado es True.
Si la Expresin 1
resultado es False.

= True ^ Expresin 2 = True el


= True ^ Expresin 2 = False el
= False ^ Expresin 2 = True el
= False ^ Expresin 2 = False el

Como puedes ver, si una y slo una de las expresiones es True, el


resultado es True. Si cualquiera de las expresiones es Null, el
resultado tambin ser Null.

Operadores de comparacin

Igualdad (==) Verifica la igualdad de dos expresiones sin tener en


cuenta el tipo de dato.
Por ejemplo: 2 == "2" devuelve True
Igualdad estricta (===) Hace lo mismo que el anterior, pero
verificando tambin que coincidan los tipos de datos.
Por ejemplo: 2 === "2" devuelve False
Desigualdad (!=) Funciona de la misma forma que la igualdad, pero
negndola.
Por ejemplo: 2 != "2" devuelve False
Desigualdad estricta (!==) Lo mismo que la igualdad estricta, pero
negndola.
Por ejemplo: 2 !== "2" devuelve True
Y estos cuatro, seguro que ya sabes cmo funcionan:
Mayor que (>)
Mayor o igual que (>=)
Menor que (<)
Menor o igual que (<=)
Operadores que trabajan con bits

Existen algunos operadores que funcionan bit a bit, convirtiendo


previamente los valores a binario.
Son los siguientes: <<
>>
>>>
&
|
^
Para comprender como trabajan estos complicados operadores lo
mejor son los ejemplos:
Bitwise shift operators
9 << 2 = 36 con valor negativo: -9 << 2 = -36

Primero convierte a binario el primer operando 9 = 1001 A


continuacin aade a su derecha el nmero de bits cero que
indique el segundo operando (2). Resulta: 1001 00 = 36
9 >> 2 = 2 con valor negativo: -9 >> 2 = -3
Primero convierte a binario el primer operando 9 = 1001 A
continuacin, y comenzando de derecha a izquierda, elimina el
nmero de bits que indique el segundo operando (2).
Resulta: 10 = 2
9 >>> 2 = 2 con valor negativo: -9 >>> 2 = 1073741821
Funciona igual que el anterior con nmeros positivos. Con
nmeros negativos no est muy claro lo que hace.
Bitwise logical operators
Al igual que los anteriores, estos operadores trabajan convirtiendo
previamente a binario los operandos, en la base de enteros de 32
bits. Para operar emparejan cada bit del primer operando con su
correspondiente del segundo operando, aplicando el operador uno a
uno hasta obtener el resultado final. Por ejemplo, el nmero 15 en
binario es 1111 y el 91001. Si aplicamos los tres operadores
lgicos a esta pareja de valores, se obtiene:
15 & 9 = 9

(1111 AND 1001 = 1001)

15 | 9 = 15

(1111 OR

15 ^ 9 = 6

(1111 XOR 1001 = 0110)

1001 = 1111)

Y seguramente te estars diciendo que no entiendes nada...


Analicemos uno.
Sea, por ejemplo, el ltimo de ellos: 15 ^ 9 = 6. Ms arriba se ha
descrito este mismo operador, que es Xor. Recordemos que
establece una exclusin lgica de dos expresiones, es decir, que el
resultado se dar evaluando ambos valores, y dar True
si solamente una de ellas es True. Recordemos tambin que en
binario 1 = True y 0 = False. Por tanto

15 =
1
1
1
1
9 =
1
0
0
1
-----------------------------False True True False

o lo que es igual,

0110

No hay que confundir estos tres operadores con sus homlogos


lgicos vistos ms arriba, que se representan con el mismo smbolo
pero doble (excepto este).
Operadores de asignacin

Asignacin simple (=) Asigna un contenido a una variable o a un


objeto.
Por ejemplo: mivariable = "Saludos"
En JavaScript el operador de asignacin tiene la particularidad de
que puede combinarse con algunos de los operadores aritmticos,
dando lugar a toda una familia de nuevos operadores:
A += B Ejemplo equivalente: A = A + B
A -= B Ejemplo equivalente: A = A - B
A /= B Ejemplo equivalente: A = A / B
A *= B Ejemplo equivalente: A = A * B
A %= B Ejemplo equivalente: A = A % B
A &= B Ejemplo equivalente: A = A & B
A ^= B Ejemplo equivalente: A = A ^ B
A |= B Ejemplo equivalente: A = A | B
Unos operadores atpicos

typeof Este operador nos indica el tipo de dato contenido en un


variable, un literal o el resultado de una expresin. Puede devolver
seis valores diferentes: number, string, object, function,
boolean o undefined . Por ejemplo:
typeof 2 devuelve number

void Este es un curioso operador que se limita a impedir que todo


funcione normalmente, es decir, que una vez evaluadas la
instrucciones, sus efectos o presentacin de resultados sern
anulados. En principio podemos dudar de su utilidad, pero puede
resultar muy til en las ocasiones en que, dependiendo de una
evaluacin previa, haya que deshabilitar algun objeto o impedir
alguna accin. Por ejemplo, bloqueando un formulario donde no se
han cumplimentado algunos campos obligatorios, o si algun valor es
errneo. El siguiente ejemplo genera un link que no funciona: Este
link no funciona
Y se escribe: <A HREF="javascript:void(0)">Este link no
funciona</A>
new Sirve para crear una instancia de un objeto definido por el
usuario, o tambin, para crear alguno de los objetos intrnsecos de
javaScript:, como son: Array, Boolean, Date, Function,
Math, Number o String. Lo veremos con ms detalle en la pgina
dedicada a los objetos.
Como puedes ver, JavaScript dispone de una gran variedad de
operadores. Cuando se escriben expresiones lgicas complejas es
recomendable usar los parntesis para cada sub expresin
participante, y no olvides tener siempre en cuenta el orden de
evaluacin de los operadores. Es relativamente fcil equivocarse al
escribir expresiones complicadas, y es buena idea probar siempre lo
escrito con cuantas variaciones sea posible para asegurarse de que
no se producen resultados inesperados.
Orden de precedencia de los operadores

Los operadores de JavaScript tienen un orden establecido de


evaluacin. Este orden se denomina orden de precedencia. En la
tabla siguiente puedes ver este orden, teniendo presente que los
operadores que aparecen juntos en una misma fila de la tabla, no
tienen prioridad entre ellos, sino que se evaluarn en el orden en
que hayan sido escritos en la expresin a evaluar:
Operador

Descripcin

. [] ()

Acceso a campos, ndice de matrices y llamada a funciones.

++ -- - ~ !
delete new typeof void

Incremento +1, decremento -1, negativo, NOT, NOT lgico


borrado, crear objeto, mostrar tipo, indefinido

* / %

Multiplicacin, divisin, mdulo de divisin (resto)

+ - +

Suma, resta, concatenacin de cadenas

<<

>>

< <=

>>>
> >=

Bit shifting
menor que, menor que o igual, mayor que, mayor que o igual

== != === !==

Igualdad, desigualdad, identidad, no identidad

&

AND

XOR

OR

&&

AND logico

||

OR logico

?:

Condicional

Asignacin

Evaluacin mltiple

Los parntesis se utilizan para alterar el orden natural de


evaluacin de los operadores. Una expresin con parntesis ser
evaluada completa antes de que su valor resultante sea utilizado
por el resto de instrucciones.
Para hacerse una idea ms clara, veamos un ejemplo. Sea la
siguiente expresin:
X = 78 * (96 + 3 + 45)
Como puedes ver, hay cinco operadores en este
orden: =
*
()
+
+
De acuerdo con su orden de precedencia, se evaluarn en este
orden: ()
*
+
+
=
Y esta sera la forma de operar paso a paso:
En primer lugar, se resuelve el parntesis: 96 + 3 = 99 y a
continuacin 99 + 45 = 144
Ahora se multiplica: 78 * 144 = 11232

Por ltimo se asigna el resultado: X = 11232

Instrucciones de JavaScript
if( condicion [else] [instrucciones]) Esta es sin duda
la instruccin ms utilizada en programacin. En efecto, raro es el
programa, por pequeo que sea, que no la contenga al menos una vez.
Su funcionamiento es muy simple: es como un interruptor. Evalua un
expresin y si el resultado es true realiza las acciones que tenga
programadas, y si es false realiza otras acciones alternativas, o no
hace nada, segn convenga. Por ejemplo:
var x = 2
if (x == 3) {
document.write("x vale 3")
}

En este caso, al no devolver true la condicin, no se obtiene ningn


resultado. Si queremos una alternativa en el caso de false, se
escribe:
var x = 2
if (x == 3) {
document.write("x vale 3")
}
else {
document.write("x no vale 3")
}

Y se obtiene:
x no vale 3
Si la accin a realizar es breve, tambin puede escribirse en una
sola lnea:
var x = 2
if (x == 3) document.write("x vale 3")

Pueden anidarse cuantas instrucciones if sea preciso. Por ejemplo,


si se escribe:
var x = 4
if (x
if
if
else
if
if
if

< 3)
(x == 2) document.write("x vale 2")
(x == 1) document.write("x vale 1")
(x == 3) document.write("x vale 3")
(x == 4) document.write("x vale 4")
(x == 5) document.write("x vale 5")

Y se obtiene:
x vale 4
Cuando escribas anidamientos, recuerda que si las instrucciones a
realizar tienen ms de una lnea, hay que escribir las
correspondientes llaves { } para cada grupo de instrucciones en
cada if, tal como se ve en el primer y segundo ejemplos.
for() Esta instruccin crea un bucle, controlado por tres
expresiones separadas por ; , y seguidas de un bloque de otras
instrucciones escritas dentro de un par de llaves { }que se
ejecutarn con cada ciclo del bucle. La sintaxis es:
for([contador;] [condicion;] [incremento]) {
.....
instrucciones
....
}
La primera expresin de los argumentos, contador, define el
contador del bucle y lo inicializa. La segunda, condicion, es donde se
declara la condicin o condiciones que se tienen que cumplir para
que el bucle termine. El bucle seguir ejecutndose hasta que la
expresin devuelva true. Y por ltimo, incremento indica el
incremento que se aplicar al contador en cada paso. Por ejemplo:
for(var x = 0; x < 5; x++) {
document.write(x)
}
Se obtiene: 01234 Analicemos el ejemplo. La primera expresin
de los argumentos, crea e inicializa a cero el contador x: var x =
0;. La segunda establece que el bucle rodar mientras x sea menor
de 5: x < 5;. Y la tercera incrementa en 1 el contador con cada
ciclo del bucle: x++. Como ya se ha dicho en el apartado de los
operadores de JavaScript,x++ es equivalente a x = x+1

for( in ) Al igual que la anterior, crea un bucle, pero esta vez


solamente sirve para listar las propiedades de un objeto. Por
ejemplo:
Mi_array = new Array(2)
Mi_array[0] = "A"; Mi_array[1] = "B"; Mi_array[2] =
"C"
for(var x in Mi_array) {
document.write("Mi_array" + x + " = " + Mi_array[x]
+ "<br>" )
}
Se obtiene:
Mi_array0 = A
Mi_array1 = B
Mi_array2 = C
Fjate en que, a diferencia de la anterior, no es necesario inicializar
el contador con ningun valor (solamente crearlo) ni tampoco indicar
el incremento ni el nmero de repeticiones del bucle, que se
repetir las veces que indique el ndice del objeto.
while( condicion) Es parecida a for(), pero en lugar de
ejecutar el bucle hasta que se cumple la condicin, lo
hace mientras (while) se mantenga el resultado inicial de la
condicin, es decir, lo mismo pero al revs. Por ejemplo:
var x = 0
while( x < 3 ) {
x++
document.write("x = " + x + "<br>")
}

Se obtiene:
x = 1
x = 2
x = 3

Como puedes ver, el bucle se ejecuta mientras x es menor que 3, no


siendo necesario definir en la propia instruccin el incremento del
contador, que est dentro de las instrucciones ejecutadas por el
bucle.
Tanto while() como for() pueden utilizar una instruccin que
permite salir del bucle, si conviene, antes de que se cumplan todas
las repeticiones programadas en el contador. Se trata de break.
Tambin pueden emplear la instruccin continue para alterar el
contador sin detenerlo ni salir del bucle. Veamos un ejemplo de uso
de continue:
var x = 0
var y = 0
while (i < 5) {
x++
if (x == 3)
continue
y += x
document.write("x = " + x + "
}

y = " + y + "<br>")

Se obtiene:
x
x
x
x

=
=
=
=

1
2
4
5

y
y
y
y

=
=
=
=

1
3
7
12

Recuerda que x++ es equivalente a x = x + 1, lo mismo que y +=


x equivale a y = y + x. Sabiendo esto, puedes ver claramente lo
que hace el bucle en los dos primeros ciclos. Al llegar a la tercera
lnea, en la que x = 3 vemos que hay un salto. En
efecto: continue ha entrado en accin y el control del bucle ha
saltado desde la instruccin comenzando un nuevo ciclo sin ejecutar
las dos instrucciones que restaban, y que habran aportado x =
3
y = 6. Luego el bucle termina normalmente hasta que x = 5,
pero los valores de y se han alterado respecto a los que seran sin
actuar continue.

De forma parecida trabaja break, pero en este caso en lugar de


provocar un salto en el bucle y continuar hasta el final previsto, el
salto se hace fuera del bucle, quedando ste interrumpido:
var x = 0
while (i < 5) {
x++
if (x == 3)
break
document.write("x = " + x +
}

"<br>")

Se obtiene:
x = 1
x = 2
Como puedes ver, solamente se han completado dos ciclos del bucle
de los cinco previstos. Estas dos instrucciones pueden emplearse de
la misma forma con la instruccin for().
this Es una palabra reservada que se utiliza para referirse al
objeto actual en el que se est ejecutando el cdigo. Sea por
ejemplo un formulario en el que el cliente debe escribir un valor, y
para comprobar que el valor es el correcto escribimos una funcin
de verificacin:
<HTML>
<HEAD> <TITLE>Pruebas JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function validar(numero) {
if (numero.indexOf("2") != -1)
return true;
else {
alert('No has escrito un 2');
return false;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario"
METHOD="GET" ACTION " "
onSubmit="return validar(this.campo1.value)">
Escribe un 2: <INPUT NAME="campo1" TYPE="text"><BR>
<INPUT TYPE="submit" VALUE="Validar">
</FORM>

</BODY>
</HTML>

Fjate en la instruccin this.campo1.value En realidad lo que


hace this es sustituir a la referencia real que
sera: document.Formulario.campo1.value
with Esta instruccin sirve como referencia a un objeto,
previamente declarado como objeto por defecto, para evitar tener
que referenciarlo en un conjunto repetitivo de instrucciones. Por
ejemplo, para obtener unos valores matemticos:
var a, b, c
var r=10
a = Math.PI * r * r
b = r * Math.cos(Math.PI)
c = r * Math.sin(Math.PI/2)

Como puedes ver, hay que hacer referencia del objeto Math en
todas las instrucciones. En cambio, si se emplea with, simplemente
se escribe:
var a, b, c
var r=10
with (Math) {
a = PI * r * r
b = r * cos(PI)
c = r * sin(PI/2)
}

var ver el apartado variables


function

return ver el apartado funciones

comment ver el apartado Cmo se escribe el JavaScript?

Objetos y funciones de JavaScript


Los objetos de JavaScript

JavaScript dispone de objetos intrnsecos del lenguaje, es decir,


que ya existen y estn disponibles sin crearlos. No hay que
confundirlos con los objetos del navegador, que tienen
funcionalidades distintas. Casi todos tienen propiedades y mtodos,
pero no todos tienen manejadores de eventos. Algunos de ellos en
otros lenguajes son funciones (por ejemplo, Date).

Todos los objetos de JavaScript comienzan por una letra mayscula


y las instrucciones por una minscula.
Array El array (o matriz) es un objeto que permite almacenar
datos con un cierto orden. Recuerda siempre que los arrays
almacenan todos sus datos en memoria, y por tanto no es posible
utilizarlos para recuperar en otra sesin lo almacenado, no son
ficheros. Al ser la memoria del cliente el lugar donde se almacenan
los datos, el acceso a ellos es muy rpido. Los datos almacenados
pueden ser de cualquier tipo: nmeros, cadenas, objetos, etc., y
pueden mezclarse.
Segn la sintaxis que se utilice, el objeto funciona de distinta
manera. Si se escribe:
Array(2) se crea un array vaco de longitud 3, es decir con tres
celdas, ya que los ndices comienzan por el cero. En cambio, si se
escribe Array("2") tendremos un array de una sola celda, cuyo
contenido es "2". Si en lugar de un solo nmero se escriben varios
separados por comas, tambin sern almacenados, y el array tendr
tantas celdas como argumentos se hayan escrito dentro de los
parntesis, por ejemplo: Array(1, 2, 3, 4) crea un array con
cuatro celdas conteniendo 1, 2, 3 y 4 respectivamente. Puede
ocurrir que al crear el array, no se tengan todava disponibles los
datos que se guardarn en l. cmo mover los datos despus?
cambiando de nuevo la sintaxis:
Se crea el array: Array(2) y se le mueven los
datos: Array[0] = "A" Array[1] = "B" Array[2] = "C"
Fjate en que para asignarle valores a las celdas, esta vez se hace
escribiendo el nmero de ndice de la celda entre corchetes en
lugar de parntesis.
Aunque en estos ejemplos, por claridad, no se ha utilizado, al crear
un array se debe emplear el operador new, as como cuando haya
que inicializarlo si ya estaba creado previamente: new Array(2) .

Hasta aqu hemos visto que se invoca el array directamente, pero


qu ocurre si en nuestro programa tenemos que crear ms de uno?
si no tienen un nombre que los distinga, al crear el segundo,
estaramos reinicializando de nuevo el primero. Para resolver esto,
se asigna el array a una variable en el momento de crearlo, lo que
nos permitir invocarlo por su nombre para todo:
Se crea el array: Mi_array = new Array(2) y se le mueven los
datos invocando su nombre:
Mi_array[0] = "A"
"C"

Mi_array[1] = "B"

Mi_array[2] =

Esta sintaxis sirve tanto para mover datos al array como para
extraerlos si ya estaban almacenados.
El sistema de utilizar el ndice, permite recorrer rpidamente el
array con una instruccin de bucle for. Como ya se ha dicho, en
cada celda de un array se puede poner cualquier cosa, incluso otro
array. Esto permite crear arrays complejos de ms de una
dimensin, ya que JavaScript no tiene instrucciones para crear
arrays multidimensionales como VBScript. El siguiente ejemplo crea
un array de dos dimensiones utilizando instrucciones de bucle para
recorrer los dos arrays:
Mi_array = new Array(1)
for (i=0; i < 2; i++) {
Mi_array[i] = new Array(2)
for (j=0; j < 2; j++) {
Mi_array[i][j] = "["+i+","+j+"]"
}
}
for (i=0; i < 2; i++) {
resultado = "Linea "+i+":"
for (j=0; j < 2; j++) {
resultado += Mi_array[i][j]
}
document.write(resultado,"<p>")
}

Y esto es lo que se obtiene:


Linea 0:[0,0][0,1]
Linea 1:[1,0][1,1]

La longitud de los arrays es dinmica. Es decir, que si se crea un


array de una longitud cualquiera (incluso cero) y despus se mueve
un dato a una posicin de ndice superior a la creada, el array se
redimensiona hasta el nuevo valor. Todas las posiciones entre el
anterior lmite y el nuevo, lgicamente, estan vacias.
Propiedades
El objeto array tiene una propiedad: length que indica la longitud
del ndice. Por ejemplo, si se crea el array:
Mi_array = new Array(2)
document.write(Mi_array.length)
Se obtiene: 2 Fjate en que, aunque el resultado es 2, son 3 las
posiciones disponibles, ya que el ndice comienza por el 0.
Mtodos
Adems de los 3 mtodos comunes a otros objetos de JavaScript,
el objeto array tiene otros 3 propios: join reverse sort Veamos
cmo funcionan:
join(separador) Este mtodo se utiliza para concatener todos los
valores almacenados en el array en un string. Opcionalmente se
puede establecer un string separador entre valores, que por
defecto es la coma ,. Si se establece un separador que no es del
tipo string, ser convertido a string. Por ejemplo:
Mi_array = new Array("Item1", 100, "Item3")
document.write(Mi_array.join(", "))
Se obtiene: Item1, 100, Item3
sort(orden) Como indica su nombre, sirve para ordenar los
elementos del array segn el modo indicado por orden que puede
ser una funcin, o una muestra de caracteres. Si se omite el modo
de ordenacin, todos los valores son convertidos a string y
ordenados segn el diccionario ingls por sus valores ASCII.
Mi_array = new Array("B", 100, "A")
document.write(Mi_array.sort())

Se obtiene: 100,A,B
reverse() Se utiliza para transponer los elementos de un array de
forma inversa, es decir que el primer elemento pasar a ser el
ltimo y viceversa. No es una ordenacin, simplemente cambian de
sitio.
Mi_array = new Array("B", 100, "A")
document.write(Mi_array.reverse())
Se obtiene: A,100,B
Boolean Este objeto sirve para convertir cualquier valor a
booleano, es decir, false o true. Por ejemplo.
Mi_booleano = new Boolean("mi_valor")
document.write(Mi_booleano)
Se obtiene: true
Si el argumento "mi_valor" es omitido o su valor es cero, null,
false o empty ("") el objeto devuelve false. Cualquier otro valor,
incluso la cadena "false" devuelve true.
Mtodos
Tiene los tres mtodos comunes de todos los objetos JavaScript.
Date Trabaja con fechas y horas. Por ejemplo:
Mi_fecha = new Date([argumentos])
document.write(Mi_fecha)
Si se omite argumentos se obtiene: Mon, 25 Apr 2005
11:43:55 GMT+0200.
Los argumentos son opcionales y sirven para inicializar el objeto. Si
se omiten se inicializa con la fecha y hora del sistema (cliente).
Tambin pueden escribirse de diversas formas:

Date("month day, year hours:minutes:seconds")


Date(year, month, day)
Date(year, month, day, hours, minutes, seconds)
Mtodos
Se dispone de un gran nmero de mtodos destinados a obtener o
establecer las distintas partes de una fecha/hora. Sea la variable
Mi_fecha del ejemplo anterior. Para obtener alguna de las partes
de su valor se escribe el objeto seguido del mtodo. Por
ejemplo: Mi_fecha.getDate()

getDate El dia del mes. Es un nmero entre 1 y 31.


getDay Dia de la semana en nmero. El domingo = 0. Es un
nmero entre 0 y 6.
getHours La hora. Es un nmero entre 0 y 23.
getMinutes Los minutos. Es un nmero entre 0 y 59.
getMonth El mes. Es un nmero entre 0 y 11. 0 = enero.
getSeconds Los segundos. Es un nmero entre 0 y 59.
getTime Es el nmero de milisegundos transcurridos desde
el 1 de enero de 1970 a las 0:00:00 y la fecha/hora actual.
getTimezoneOffset Zona horaria. Devuelve la diferencia
en minutos entre la hora local y la GMT (Greenwich Meridian
Time).
getYear El ao. Dependiendo del valor devolver dos o
cuatro dgitos. Entre 1900 y 1999 devuelve dos y a partir de
2000 cuatro.
getFullYear Funciona como el anterior, pero con el ao
con cuatro dgitos siempre. Solamente funciona con versiones
modernas de navegador.
parse Funciona igual que getTime, pero en lugar de obtener
los milisegundos hasta la fecha/hora actual, lo hace hasta la
contenida en un string del tipo "Dec 20, 2005" o "Mon, 29
Dec 1999 13:30:00 GMT."

Como ya has visto, cuando el objeto ya tiene una fecha almacenada


se utilizan los mtodos get... para obtener algunas de las partes de

esa fecha. Esta fecha se puede modificar en cualquier momento,


bien entera o algunas de sus partes, mediante los mtodos set...:

setDate
setHours
setMinutes
setMonth
setSeconds
setTime
setYear
setFullYear
toGMTString
toLocaleString
UTC

Function([argumentos], "instrucciones") Curiosa forma


de escribir funciones. Este objeto puede contener una funcin que
trabajar de forma anloga a las declaradas con la
instruccin function. Fjate en que la diferencia de sintaxis entre
ambas es simplemente que el objeto se define con una "F"
mayscula y la instruccin con una "f" minscula. La diferencia
prctica entre los dos procedimientos es que el objeto tiene
propiedades que pueden invocarse, y la declarada con la instruccin
no. Por contra, el objeto es evaluado cada vez que se invoca,
mientras que la declarada con la instruccin es compilada, lo que la
hace ms eficiente. Los argumentos pueden omitirse si no son
necesarios, las instrucciones, evidentemente, no. La particularidad
de esta forma de escribir funciones es que tanto los argumentos
(incluso aunque vayan a ser valores numricos) como las
instrucciones van dentro de strings en lugar del tpico par de llaves.
Por ejemplo:
var Mi_funcion = new Function("a", "b", "return (a *
b)")
document.write(Mi_funcion(2,5))
Se obtiene: 10
Propiedades

Mtodos
Los tres comunes de los objetos JavaScript.
Math Este objeto se utiliza para trabajar con constantes y
funciones matemticas. Esto hay que hacerlo mediante sus
propiedades y mtodos. Por ejemplo, la propiedad PI:
document.write(Math.PI)
Se obtiene: 3.141592653589793
Las propiedades devuelven valores constantes:

Math.E = 2.718281828459045 La constante de Euler o


nmero e.
Math.LN2 = 0.6931471805599453 Logaritmo natural de 2.
Math.LN10 = 2.302585092994046 Logaritmo natural de
10.
Math.LOG2E = 1.4426950408889634 Logaritmo en base 2
de e.
Math.LOG10E = 0.4342944819032518 Logaritmo en base
10 de e.
Math.PI = 3.141592653589793 Relacin entre la
circunferencia de un crculo y su dimetro.
Math.SQRT1_2 = 0.7071067811865476 Raz cuadrada de
un medio (1/2).
Math.SQRT2 = 1.4142135623730951 Raz cuadrada de 2.

Los mtodos son funciones matemticas que admiten argumentos.


Adems de los tres comunes tenemos:

Math.sin(90) = 0.8939966636005579 Seno de un


ngulo medido en radianes. El rango devuelto estar entre -1 y
1.
Math.asin(-1) = -1.5707963267948966 Arco seno (en
radianes) de un nmero. Tiene que ser un valor entre -1 y 1. El
resultado obtenido siempre estar dentro del rango entre -

pi/2 y pi/2 radianes. Si el valor est fuera de este rango


devuelve NaN.
Math.cos(1) = 0.7853981633974483 Coseno (en
radianes) de un nmero. El resultado obtenido siempre estar
dentro del rango entre -pi/2 y pi/2 radianes.
Math.acos(-1) = 3.141592653589793 = pi Arco
coseno (en radianes) de un nmero. Tiene que ser un valor
entre -1 y 1. Si el valor est fuera de este rango
devuelveNaN (Not-a-Number).
Math.tan(90) = -1.995200412208242 Tangente de un
ngulo medido en radianes.
Math.atan(1) = 0.7853981633974483 Arco tangente
(en radianes) de un nmero. El resultado obtenido siempre
estar dentro del rango entre -pi/2 y pi/2 radianes.
Math.atan2(20,50) = 0.3805063771123649 Devuelve,
en un sistema cartesiano de coordenadas, el ngulo en
radianes formado por el eje trazado entre el origen y el punto
x,y definido por los argumentos de este mtodo.
Math.abs(01234) = 1234 Valor absoluto de un nmero.
Math.ceil(20.5) = 21 Obtiene el nmero entero ms
pequeo posible que sea igual o mayor que el argumento dado.
Math.floor(20.5) = 20 Al contrario que el anterior,
obtiene el nmero entero ms grande posible que sea igual o
menor que el argumento dado.
Math.exp(1) = 2.302585092994046 Nmeros e.
Math.log(10) = 2.302585092994046 Devuelve el
logaritmo natural (en base e) del argumento dado.
Math.pow(10, 3) = 1000 Potencia. El primer argumento
es la base y el segundo el exponente.
Math.max(10, 5) = 10 Compara el valor de los dos
argumentos, que tienen que ser numricos, y devuelve
el mayor de ellos.
Math.min(10, 5) = 5 El inverso del anterior. Compara el
valor de los dos argumentos, que tienen que ser numricos, y
devuelve el menor de ellos.

Math.random() = 0.09618143970146775 Se obtiene un


nmero aleatorio entre 0 y 1 cuyo origen es el reloj del
sistema.
Math.round(2.5) = 3 Redondeo. Devuelve el nmero
entero ms prximo al argumento dado. Si la parte decimal
es .5 o mayor, se redondea por exceso, como en el ejemplo.
Si la parte decimal es menor que .5 se redondea por defecto.
Math.sqrt(2) = 1.4142135623730951 Raiz cuadrada
de un nmero.

Number Objeto para trabajar con valores numricos. Es poco


utilizado.
Propiedades
MAX_VALUE
MIN_VALUE
SITIVE_INFINITY

NaN

NEGATIVE_INFINITY

PO

Mtodos
Los tres comunes.
String Prctico objeto para trabajar con cadenas. Tiene una
propiedad: length. Por ejemplo:
var Mi_cadena = new String("Esto es una prueba" )
document.write(Mi_cadena.length)
Se obtiene: 18 que como ya habrs supuesto es la longitud de la
cadena dada.
Mtodos
Adems de los tres comunes hay un gran nmero de ellos.
Utilizando el mismo texto del ejemplo anterior, tendremos:

String.big() = Esto es una prueba Aumenta el


tamao del texto. El tamao es equivalente al obtenido con
<FONT SIZE=4>

String.small() = Esto es una prueba Disminuye el tamao


del texto. El tamao es equivalente al obtenido con <FONT
SIZE=2>
String.fixed() = Esto es una prueba Cambia el tipo
de letra a paso fijo. Es equivalente al obtenido con <FONT
FACE="Courier">
String.sup() = Esto es una prueba Aplica el efecto
superndice al texto. Es equivalente al obtenido con <SUP>
String.sub() = Esto es una prueba Aplica el efecto
subndice al texto. Es equivalente al obtenido con <SUB>
String.fontcolor("ff0000") = Esto es una
prueba Establece el color del texto. Es equivalente al
obtenido con <FONT color="ff0000">. Fjate en que el color
hay que darlo en formato RGB hexadecimal.
String.size(5) = Esto es una prueba Cambia
el tamao del texto. Es equivalente al obtenido con <FONT
SIZE=x> donde x es un valor entre 1 y 7
String.blink() = Esto es una prueba Efecto de
intermitencia, equivalente al elemento <BLINK>
String.bold() = Esto es una prueba Aumenta el
peso del texto. Es equivalente al elemento <B>
String.italics() = Esto es una prueba Aplica el
tipo de letra itlica al texto. Es equivalente al obtenido con
<I>
String.strike() = Esto es una prueba Aplica el tipo
de letra tachado al texto. Es equivalente al obtenido con
<STRIKE>
String.charAt(0) = E Devuelve el caracter que haya en
la posicin del ndice que se indica. Para este mtodo el ndice
comienza por el cero. No confundir con la
propiedad length que devuelve el nmero de caracteres que
hay en la cadena, no un ndice.
String.indexOf("t", [start]) = 2 Devuelve la
posicin del primer caracter (solamente uno) indicado en el
argumento que exista en la cadena. Para este mtodo el ndice
comienza por el cero. Por defecto comienza a buscar por el
primer caracter de la izquierda, y opcionalmente, se le puede

indicar que comience la busca desde otra posicin con [start].


Si el carcter buscado no existe devuelve -1.
String.lastIndexOf(cadena,
"prueba") = 12 Devuelve la posicin de una subcadena (o
un solo caracter) dentro de la cadena principal. Comienza a
contar por el cero. Si el carcter o subcadena buscados no
existen devuelve -1.
String.search(cadena, "prueba") = 12 Es
exactamente igual que la anterior, pero esta es una sintaxis
ms moderna que solamente funciona en versiones 4 o
superiores de navegador.
String.replace("prueba", "muestra") = Esto es
una muestra Reemplaza un substring, un caracter o
incluso la cadena entera por otro/a. Si la subcadena a buscar
no existe devuelve la cadena original sin cambios. Cuando la
primera ocurrencia es encontrada y sustituida no se continua
con el resto de la cadena.
String.split([separador]) Como su nombre indica,
corta la cadena inicial y coloca cada substring obtenido en una
celda de un array. El corte se realiza por el caracter indicado
por separador. Por ejemplo:

var cadena = new String("Esto es una prueba")


var cadena2 = cadena.split(" ")
for (var i=0; i < cadena2.length; i++) {
document.write (cadena2[i] + " / ")
}

Se obtiene: Esto / es / una / prueba /

String.link(URL) Genera un enlace (link) a la direccin


indicada por URL. Por ejemplo:

var cadena = new String("Esto es una prueba")


var cadena2 = cadena.link("http://sestud.uv.es/manual.esp
")

document.write(cadena2)

Se obtiene: Esto es una prueba

String.toLowerCase() = esto es una


prueba Convierte la cadena dada a todo minsculas.
String.toUpperCase() = ESTO ES UNA
PRUEBA Convierte la cadena dada a todo maysculas.

RegExp Abreviatura de Regular Expressions, es decir, expresiones


regulares. Esta es una forma de trabajar con cadenas muy utilizada
en algunos lenguajes de programacin, como perl, muchos comandos
del shell de Unix o Linux, etc. Consiste en ciertas convenciones
para localizar cadenas o subcadenas con caractersticas variadas y
son independientes de las acciones que se realizarn con ellas una
vez localizadas. Se trata de establecer un patrn de bsqueda, que
puede llegar a ser muy complejo, para localizar cualquier cadena y
sus variantes dentro de otra cadena. Por ejemplo, partiendo de
nuestra conocida cadena anterior: Esto es una prueba y su
mtodo search
String.search(/una/, "Esto es una prueba") = 8 Al
aplicar este patrn se le est preguntando si la cadena contiene la
subcadena "una", y como la respuesta es truedevuelve su posicin.
Esta es una expresin regular muy simple, veamos otra ms
complicada:
String.search(/uno|[zxE]/, "Esto es una
prueba") = 0 En este caso se busca "uno", que no existe en la
cadena, y/o cualquiera de los caracteres que hay entre los
corchetes. Como no existen z ni x, pero s E, devuelve su
posicin que es la cero. Fjate en que para enlazar una parte de la
expresin con la otra se utiliza el caracter | llamado "pipe", y se
pueden poner tantos como sean necesarios separando cada parte de
la expresin regular. Si lo indicado por el patrn es encontrado ms
de una vez, se devolver la posicin de la ltima ocurrencia
Dentro de los corchetes, adems de caracteres o nmeros sueltos,
se pueden poner rangos completos indicando el primer caracter y el
ltimo separados por un guin: [a-z] o [0-9]. Esto significa que se
debe buscar si en la cadena se encuentra cualquier caracter
entre a y z o entre 0 y 9. Si lo que se buscan son maysculas,

hay que indicarlo aparte:[A-Z] o dentro del mismo par de


corchetes: [zxy A-Z].
En el caso de que el caracter a buscar sea el propio guin - o algun
caracter especial, segn donde se escriba habr que ponerle el
smbolo de "escape" (\) o no, como ya se dijo en el apartado Cmo
se escribe el JavaScript?. Por ejemplo, si va el primero: /[\-AZ]/ pero no es necesario "escaparlo" si va el ltimo: /[A-Z-]/
Adems de para los caracteres especiales, el signo de escape se
utiliza con algunos caracteres normales que tienen un doble
significado y sirven para definir conjuntos de caracteres:
/\w/ Cualquier caracter alfanumrico.
/\d/ Cualquier dgito.
/\s/ Cualquier caracter no visible, como el tabulador, el retorno o
el espacio.
Otros caracteres especiales que no necesitan escape son:

/./ El patrn coincidir con cualquier caracter, excepto un


salto de lnea.
/^[abc]/ Indica que el patrn buscado "abc" debe estar al
comienzo de la cadena.
/[^abc]/ Acepta cualquier caracter excepto los contenidos
entre los corchetes.
/$[abc]/ Indica que el patrn buscado debe estar al final
de la cadena.

Tambin se puede indicar cuantas veces debe existir el patrn en la


cadena original:
/E+/ Significa que E debe aparecer al menos una vez.
/E*/ Cero o ms veces.
/E?/ Cero o una vez.
/E{2}/ Dos veces.
/E{2,}/ Dos veces como mnimo.
/E{2,3}/ De dos a tres veces, inclusive.

Una vez definida la expresin regular, es posible aplicarle un


modificador para que no sean tenidas en cuenta las maysculas y
minsculas: /xyz A-Z/i No distinguir entre maysculas y
minsculas (insensitive).
Cuando se estan haciendo sustituciones en lugar de bsquedas el
proceso se detiene al encontrar la primera ocurrencia. Para evitar
esto y que se hagan todas las sustituciones posibles hay que
emplear otro modificador:
cadena.replace(/a/g, "e") (global). cambia todas las "a" de
la cadena por "e". Si es necesario, tambin pueden ponerse los dos
modificadores juntos, y tiene importancia en que orden se escriben,
normalmente ser gi
En JavaScript admiten expresiones regulares algunos mtodos del
objeto String como search, split y replace y por supuesto, el propio
objeto RegExp, que no est muy claro para qu sirve. Las
expresiones regulares, en general, son bastante complicadas por lo
poco descriptivas que son en s mismas. En su construccin tiene
mucha importancia el orden en que se escriben las cosas. Hasta que
tengas cierta prctica, si no consigues que funcione a la primera, no
desesperes, es normal.

Mtodos comunes de los objetos

[objeto].eval(cadena) Este mtodo, comn a todos los


objetos de JavaScript, tiene por finalidad evaluar cualquier
expresin contenida en una cadena, es decir obtener un resultado
numrico de la misma. Puede invocarse incluso sin hacer referencia
a ningun objeto. Si dentro de la cadena a evaluar hay instrucciones
JavaScript, objetos o variables previamente
definidas, eval obtendr sus valores ejecutando las instrucciones y
evaluando los objetos previamente. Por ejemplo:
var x = 2; var y = 10; var z = "5"
document.write(eval("x * y + z + 1"))
Se obtiene: 2051

Como puedes ver, la idea es muy parecida a la presentada por el


objeto Function que hemos visto ms arriba, que tambin trabaja
con instrucciones dentro de una cadena.
objeto.toString() La finalidad de este mtodo, comn para
todos los objetos, es convertir a string cualquiera de ellos. Por
ejemplo, sea el array
var meses = new Array("Enero","Febrero","Marzo")
Como ya sabemos, meses es un objeto, y no es posible concatenarlo
con un string, ya que sus tipos son diferentes e incompatibles, pero
si se escribe:
document.write("Los meses son: " + meses)
Se obtiene: Los meses son: Enero,Febrero,Marzo
Qu ha ocurrido? porqu no se obtiene un error? Pues no se
produce error porque JavaScript ha invocado automticamente el
mtodo toString del objeto Array, a fin de intentar que los dos
elementos a concatenar sean del mismo tipo. Es decir, que ha hecho
esto:
document.write("Los meses son: " +
meses.toString()) Muy inteligente! Por supuesto, podemos
escribirlo directamente y no esperar a que lo arregle JavaScript.
objeto.valueOf() Este ltimo mtodo, comn para todos los
objetos, permite obtener el valor original de un objeto despus de
haber sido convertido, por ejemplo, con el anterior mtodo
toString. Al igual que el anterior, tambin ser invocado de forma
automtica por JavaScript si es necesario en el contexto de la
instruccin.

Las funciones predeterminadas de JavaScript

A diferencia de otros lenguajes, JavaScript solamente tiene tres


funciones intrnsecas. Esto significa que cualquier utilidad que se
precise programar hay que obtenerla escribiendo el usuario la
funcin correspondiente.
isNaN() Evalua el argumento dado, que puede ser un valor o una
expresin y devuelve un booleano que indica si puede considerarse
como numrico o no numrico (Not a Number). Por ejemplo, si se
escribe:
document.write(isNaN(22)) Se obtiene: true
parseInt(string [,base]) Esta funcin analiza un string, y
teniendo en cuenta la base numrica indicada (si se indica),
devuelve su valor entero. Si no se indica la base, JavaScript la
decidir analizando los dos primeros caracteres de la cadena:

Si la cadena comienza por "0x," la base es 16 (hexadecimal).


Si la cadena comienza por "0," la base es 8 (octal).
Para cualquier otro valor la base es 10 (decimal).

En cualquier caso, aunque se indique la base, si el contenido de la


cadena indica otra cosa, sta ser cambiada. Los tres ejemplos
siguientes devuelven 17:
parseInt("0x11", 16)
parseInt("0x11", 0)
parseInt("0x11")
Como puede ver, el principio 0x de las cadenas es decisivo a la hora
de obtener el entero resultante.
Con otros contenidos, todos los ejemplos siguientes devuelven 15:
parseInt("F", 16)
parseInt("17", 8)
parseInt("15", 10)
parseInt(15.99, 10)

parseInt("FXX123", 16)
parseInt("1111", 2)
parseInt("15*3", 10)
Como puedes ver, si se encuentra un caracter que no puede ser
considerado nmero en la base establecida, se ignorarn todos los
caracteres siguientes, y se devolver el entero obtenido hasta ese
punto. Si el primer caracter de la cadena no puede ser considerado
como nmero, la funcin devuelve NaN. No se evaluan expresiones
dentro de la cadena, pero s expresiones numricas sin formato de
cadena (en realidad tampoco sirven, pero JavaScript primero las
evalua y despus las convierte en cadena).
parseFloat(string) De forma similar a la anterior, esta
funcin analiza un string pero en lugar de devolver un entero
devuelve un decimal de coma flotante. Si el primer caracter de la
cadena no puede ser convertido a nmero, devolver NaN. Los tres
ejemplos siguientes devuelven 3.14:
parseFloat("3.14")
parseFloat("314e-2")
parseFloat("0.0314E+2")

El modelo de objetos de los navegadores


Los programas navegadores, como el Internet Explorer, Opera, o
Netscape entre otros, proporcionan una serie de objetos a los que
se puede acceder mediante los scripts escritos tanto
en VBScript como JavaScript. Este modelo de objetos, ya de por s
bastante complejo, se termina de complicar debido a que sus
componentes se anidan unos sobre otros, es decir, que un objeto, a
su vez, est compuesto de otros objetos. A menudo, para llegar a
una determinada propiedad de un objeto, hay que referenciar una
larga ruta hasta llegar al objeto padre, que es window. En el
siguiente grfico tenemos la representacin de la mayora de estos
objetos:

Se ve claramente que, en realidad, todos son sub-objetos del


objeto window. En efecto, al tratarse este objeto del propio
navegador, o mejor dicho, de la ventana donde se ejecuta el
navegador, evidentemente, cualquier otro objeto debe estar
integrado en l. Desafortunadamente, puede haber diferencias
entre el modelo de objetos de un navegador a otro, propiedades
adicionales no compartidas, sintaxis de referencia distinta,
diferente versin del intrprete JavaScript, etc. Como siempre, se
debe probar el cdigo escrito con varios navegadores, y a ser
posible, con varias versiones de los mismos. No hay que confundir
los objetos del navegador con los objetos del propio JavaScript que
son completamente diferentes.
Se ha dicho que estos son objetos del navegador, pero en realidad,
de forma directa, solamente los dos primeros niveles de ellos lo
son, excepto document. El resto son creados con las instrucciones
HTML de la pgina cargada, es decir, que los objetos contenidos en
el objeto document dependern del cdigo HTML que se escriba.
El objeto window

Es el objeto bsico, y representa en s mismo al propio navegador.


Al ser el elemento principal del modelo de objetos, para referirse a

sus propiedades, mtodos o eventos, no es necesario referenciarlo


especficamente. Como puedes ver en el esquema de objetos, hay
cuatro sub-objetos que pueden considerarse como sinnimos del
objeto window: frames, top, self y parent que suelen utilizarse en
lugar de window. Por ejemplo, es lo
mismo window.close() que self.close(). En JavaScript un
frame es tambin una ventana (window), pero con la particularidad
de que est contenida dentro de otra ventana (es decir, el objeto
window. En realidad todo est dentro de window). top hace
referencia a la posicin ms alta en la lista de ventanas abiertas, es
decir, la primera de todas. parent se refiere a una ventana que
contiene un elemento frameset. Los cuatro, adems, son
considerados propiedades del objeto window. Si... esto es algo
complicado. Este objeto, como todos, tiene mtodos, propiedades
y eventos. Veamos los ms usuales:
MTODOS
open('url', 'name', ['features'] ) Permite abrir una nueva ventana en la

que se est ejecutando una nueva instancia del navegador (o simple


ventana sin una nueva instancia, depende del navegador de que se
trate). Opcionalmente, tambin permite definir las caractersticas
que tendr la nueva ventana, como son qu pgina mostrar, el
nombre de la ventana y el aspecto que ofrecer el navegador. En el
siguiente ejemplo se captura el evento onClick del botn de un
formulario para crear una nueva ventana:
<HTML>
<HEAD><TITLE>Objetos del navegador</TITLE></HEAD>
<BODY>

<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Abrir"
onClick="window.open('http://sestud.uv.es/manual.esp/',
'Prueba',
'top=100, left=100, width=300, height=300,
location=no, status=yes, ' +
'toolbar=no, menubar=no, scrollbars=no,
resizable=no')">
</FORM>

</BODY>
</HTML>

Y despus de pulsar el botn "Abrir" del formulario, obtendremos


una nueva ventana con esta apariencia:

Fjate en las dos ltimas lneas, las que corresponden al parmetro


"features":
onClick="window.open('http://sestud.uv.es/manual.esp/',
'Prueba',
'top=100, left=100, width=300, height=300,
location=no, status=yes,' +
'toolbar=no, menubar=no, scrollbars=no,
resizable=no')">

Como puedes ver, estan concatenadas por el signo +. En efecto,


esto es javaScript, y no se pueden truncar lneas ni dejar espacios
innecesarios entre valores. Los valores de estos parmetros,
adems de con yes/no, se pueden escribir con 0/1.
Por ejemplo: scrollbars=0. Por defecto, todos los valores son yes.
El nombre de las ventanas creadas no pueden contener espacios en
blanco ni caracteres distintos de letras y/o nmeros. Se admite el
signo de subrayado ( _ ) pero no el guin ( - )

close() Cierra una ventana. Por ejemplo:


<HTML>
<HEAD><TITLE>Objetos del navegador</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario2">
<INPUT TYPE="Button" NAME="Boton2" VALUE="Cerrar"
onClick="prueba.close()">
</FORM>
</BODY>
</HTML>

Este mtodo no funciona igual en todos los navegadores. Si escribes


una pgina con el ejemplo anterior y ste juntos, al pulsar el botn
"Abrir" se abre una ventana llamada "prueba", y al pulsar el botn
"Cerrar" se cerrar la ventana "prueba", permaneciendo el
navegador abierto con la pgina inicial con los dos botones. Esto
funciona correctamente con los navegadores Opera, Netscape y
Mozilla, pero falla con el IE. Esto se debe a que los tres primeros
navegadores, aunque se abran disferentes ventanas, solamente
mantienen una instancia de programa ejecutndose en el sistema,
pero el IE ejecuta una nueva instancia de programa con cada
ventana, lo que impide que la primera conozca el nombre de las
otras ventanas que hay abiertas. Para cerrar una ventana con el IE
hay que escribir:
onClick="window.close()">

Lo que provocar el cierre de la ventana donde estan los dos


botones, pero permanecer abierta la ventana "prueba" que era la
que se pretenda cerrar. Para conseguir lo mismo que los otros
navegadores, con el IE hay que esribir un complicado script en
VBScript.

Muestra un mensaje de alerta que no ofrece


respuesta alternativa del usuario, sino solamente darse por
enterado. Por ejemplo:
alert('mensaje')

<HTML>
<HEAD><TITLE>Objetos del navegador</TITLE></HEAD>
<BODY>
<FORM NAME="Formulario">
<INPUT TYPE="Button" NAME="Boton" VALUE="Prueba"
onClick="alert('Esto es una prueba')">
</FORM>
</BODY>
</HTML>

Y despus de pulsar el botn "Prueba" del formulario, obtendremos


el mensaje:

Muestra un cuadro de dilogo con dos botones


que devuelven un valor booleano cada uno (true o false)
dependiendo del botn pulsado por el usuario. Por ejemplo:
confirm('mensaje')

<HTML>
<HEAD>
<TITLE>Prueba de mensaje</TITLE>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="this.form.Campo1.value=confirm('Quieres
continuar?')">>
<INPUT TYPE="Text" NAME="Campo1">
</FORM>
</BODY>
</HTML>

Despus de pulsar el botn "Prueba" del formulario tendremos


esto:

Y despus de pulsar el botn "Aceptar" del cuadro de dilogo


tendremos esto:

Fjate en que, en este caso, el valor devuelto es "Verdadero" en


lugar de "true". Para capturar los valores booleanos no se deben
utilizar las frases que aparecen aqu, que han sido convertidas, sino
que se debe evaluar directamente el valor booleano devuelto por el
objeto, sin conversiones que dependan de la lengua utilizada por el
navegador o configuraciones personales. As:

if confirm('Quieres continuar?') {
this.form.Campo1.value='Ha pulsado Aceptar'}
else {
this.form.Campo1.value='Ha pulsado Cancelar'}

Muestra un cuadro de dilogo con


dos botones y un campo de texto que, opcionalmente, puede tener
una propuesta predefinida. Su funcionamiento es muy parecido al
mtodo confirm(). Sea por ejemplo:
prompt('mensaje', ['propuesta'])

<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="this.form.Campo1.value=prompt('Escribir
un valor', '')">>
<INPUT TYPE="Text" NAME="Campo1">
</FORM>
</BODY>
</HTML>

Despus de pulsar el botn "Prueba" del formulario tendremos


esto:

En el ejemplo, despus de escribir un texto cualquiera y pulsar el


botn "Aceptar", lo escrito ser recibido por Campo1, pero si se
pulsa Cancelar, a diferencia del mtodo confirm() que
devolvera false, lo que se recibe es null

Evalua y ejecuta el cdigo


JavaScript contenido en 'instrucciones' despus de transcurrido el
tiempo, en milisegundos, indicado porespera. La evaluacin de las
instrucciones solamente la har una vez. Sea por ejemplo:
setTimeout('instrucciones', espera)

<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function mensaje() {
alert('Esto es una prueba')
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="setTimeout('mensaje()', 2000)">
</FORM>

</BODY>
</HTML>

Despus de pulsar el botn "Prueba" del formulario, y transcurridos


dos segundos, obtendremos:

clearTimeout(identificador) Despus de haber utilizado el

mtodo setTimeout() anterior, JavaScript mantiene memorizada la


evaluacin que realiz del parmetro 'instrucciones'. Si en algun
punto del programa es necesario repetir esa evaluacin en lugar de
utilizar la ya realizada, es preciso inicializarla previamente. Para
ello se utilizaclearTimeout(identificador). Para poder hacerlo, es
necesario que el mtodo setTimeout() haya sido invocado mediante
un identificador. As, y refirindonos al ejemplo anterior:
identificador=setTimeout('mensaje()', 2000)">

Y para inicializar la evaluacin y poder realizarla de nuevo:


clearTimeout(identificador)

Evidentemente en este ejemplo no tiene sentido inicializar nada, ya


que se trata de un mensaje fijo, pero este mtodo es
imprescindible si las instrucciones ejecutadas por setTimeout() son
expresiones numricas variables o contadores de tiempo.

Fija el enfoque en un elemento de los contenidos


en la ventana o en la propia ventana. Habitualmente el enfoque se
fija en los objetos creados con las instrucciones HTML, como los
formularios y todos sus sub-objetos (botones, listas, etc.). Hay que
tener presente que una ventana que est en primer plano puede no
elemento.focus()

tener el enfoque, aunque lo normal es que lo tenga. Excepto en el


objeto window, generalmente el enfoque se fija en un objeto
cuando ste es tocado con el puntero del ratn (tocado, no pasado
por encima) o bien al tabular desde el teclado. El
objeto window puede recibir el enfoque automticamente nada ms
ser abierto, sin necesidad de pulsacin del ratn. Un objeto puede
tener el enfoque y no parecerlo visualmente, por ejemplo los
distintos frames de una pgina, y en la que cada uno de ellos tiene
el rango de window. El mtodo contrario de focus() es blur()

eval()

scroll()

toString()

Estos son los tres mtodos comunes de todos los objetos de


javaScript, y ya se describieron en ese apartado.

Estos dos mtodos sirven para mover


una ventana, previamente abierta, un nmero determinado de pxels
hasta una determinada posicin. Por ejemplo:
moveBy(x,y)

moveTo(x,y)

<HTML>
<HEAD>
<TITLE>Ventanas en movimiento</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function Mover()
{
Ventana.moveBy(5,5);
i++;
if (i<20)
setTimeout('Mover()',100);
else
Ventana.close();
}
</SCRIPT>
</HEAD>
<BODY>
<script LANGUAGE="JavaScript">
var
dimensiones="left=100,top=100,width=100,height=100";
var i=0;

Ventana = window.open("","",dimensiones);
Ventana.document.write("Ventanas en movimiento");
Ventana.moveTo(400,100);
Mover();
</script>
</BODY>
</HTML>

EVENTOS
Mientras estas navegando por el ciberespacio, en la ventana de tu
navegador van ocurriendo ciertos sucesos o eventos que pueden ser
capturados. Por ejemplo, cuando el navegador carga una pgina se
est produciendo un evento, cuando carga la siguiente se producen
dos: uno al descargar la antigua y otro al cargar la nueva, etc. Cada
objeto tiene sus propios eventos. Para poder capturar un evento es
necesario un manejador de eventos. El objeto window tiene los
siguientes manejadores de eventos:
Como su nombre indica, se produce cuando el navegador
carga una pgina. Por ejemplo:
onLoad

<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function mensaje() {
document.write('Prueba de evento onLoad')
}
</SCRIPT>
</HEAD>
<BODY onLoad="mensaje()">
</BODY>
</HTML>

Y este sera el resultado:


Prueba de evento OnLoad

Funciona justo al contrario que el anterior: se activa


cuando el navegador descarga la pgina actual, por ejemplo al
intentar ir a otra. En ese momento se produce el evento. El
siguiente ejemplo abre una ventana predeterminada siempre que se
abandona la pgina activa:
onUnload

<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function abrir() {
window.open('http://sestud.uv.es/manual.esp/')
}
</SCRIPT>
</HEAD>
<BODY onUnload="abrir()">
</BODY>
</HTML>

Este manejador de eventos controla el evento focus que


se produce cuando un objeto window, frame o form recibe el
enfoque como consecuencia de una pulsacin del ratn o por ser
invocado el mtodo correspondiente. Por ejemplo:
onFocus

<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function abrir() {
window.open('http://sestud.uv.es/manual.esp/')
}
</SCRIPT>
</HEAD>
<BODY onFocus="abrir()">
</BODY>
</HTML>

Es el inverso del anterior. Este manejador de eventos


controla el evento blur que se produce cuando un objeto window,
onBlur

frame o form pierde el enfoque. En el siguiente ejemplo la


funcin abrir() ser invocada al abandonar la pgina:
<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function abrir() {
window.open('http://sestud.uv.es/manual.esp/')
}
</SCRIPT>
</HEAD>
<BODY onBlur="abrir()">
</BODY>
</HTML>

Este manejador controla el evento error. El error puede


producirse mientras el navegador est cargando una pgina.
Durante el proceso de carga el navegador verifica la sintaxis del
cdigo JavaScript y carga las imgenes que indique el cdigo HTML.
Un error de sintaxis HTML no producir un error de carga.
Tampoco es un error capturable el que un enlace a otra pgina falle,
ya que eso es un error de navegador (o de navegacin). El siguiente
ejemplo muestra un mensaje al cargar una pgina que intenta
mostrar un grfico que no existe:
onError

<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function mensaje() {
mensaje('Se ha producido un error de carga')
}
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="noexiste.gif" onError="mensaje()">
</BODY>
</HTML>

No hay que confundir estos mensajes controlados con los que


produce la consola javaScript del navegador cuando detecta un
error en los programas que se estan cargando.
PROPIEDADES
Es un string que contiene el nombre de la ventana. El nombre
de la ventana se establece en el momento de abrirla mediante el
mtodo window.open('url', 'name') y una vez abierta no puede
cambiarse. Recuerda que por defecto las ventanas abiertas
directamente, como por ejemplo sta que ests leyendo, no tienen
nombre definido.
name

String que aparece en la linea de estado del navegador (al


pie de la ventana, a la izquierda). Suele utilizarse para mostrar
mensajes informativos, normalmente de errores de proceso. Por
ejemplo:
status

<HTML>
<HEAD>
<TITLE>Prueba de status</TITLE>
</HEAD>
<BODY onLoad="window.status='Esto es una prueba de
status'">
</BODY>
</HTML>

Se obtiene:
Esto funciona con todos los navegadores, excepto Firefox.
Funciona igual que el anterior, pero es el valor por
defecto de la lnea de estado inmediatamente despus de cargar la
pgina.
defaulStatus

<HTML>
<HEAD>

<TITLE>Prueba de status</TITLE>
</HEAD>
<BODY onLoad="window.defaultStatus='Esto es una prueba de
status por defecto'">
</BODY>
</HTML>

parent

self

top

opener

closed

length

Ejemplos de pginas con JavaScript


He aqu algunos ejemplos de pginas con "scripts" escritos en JavaScript (java
interpretado).

Ejemplos JavaScript
Un reloj en pantalla
Un calendario completo
Dar el nombre del mes
Una calculadora

Una agenda-calendario
Control de contenido de campos Sin envo.
Control de contenido de campos Envo final.
Texto que se desplaza en la ventana de estado
Texto que se desplaza en la ventana de estado
opcionalmente
Formulario con lista de seleccin sin botn de submit
Imprimir desde una imagen
Texto que sigue al puntero en forma de cola de cometa
Ventana de texto que limita la longitud de la lnea
Listado con puntero grfico
Muestra de cdigos de color
Link que se activa slo pasando el ratn por encima
Rotacin de textos en pantalla
Ver cdigo fuente de una pgina cualquiera
Un men mvil
Bloquear botn derecho del ratn
Bloquear botn derecho del ratn 2
Automatizar el marcado de opciones en formularios.
Impedir que se hagan dos selecciones en formularios.
Jugar al Tetris (Excelente!!)
Al abrir una nueva ventana, que ocupe toda la pantalla
Zoom de pgina
Juego de palabras
Enlaces a ficheros de sonido
Consola dinmica con varios ficheros multimedia
Consola de diapositivas con varios ficheros grficos. Pase
manual.
Consola de diapositivas con varios ficheros grficos. Pase
automtico.
Y aqu hay muchos ms (en ingls):

Dinamic drive
JavaScript Source

Vous aimerez peut-être aussi