Tutorial HTML

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). 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 emails 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 en XHTML, ni tienen hoja de estilo. 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 para escribir una pgina fuera necesario ser 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 disquete? 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 sucesivo Netscape), o el Mozilla Firefox (que en realidad es el nuevo Netscape), y sin olvidar el navegador Opera, que tiene fama de ser el que ms respeta los estndares, cosa muy de agradecer en estos tiempos. Todo lo que se dice en esta gua funciona correctamente con Netscape, Opera o Firefox, 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 CDROM, 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>.
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>  <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 el nombre 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 UNIX-LINUX y la segunda en Windows:
.html o .htm
Documento HTML. Contine texto e instrucciones HTML que sern interpretadas.

.text 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
Contiene un fichero de imagen en formato NPG.

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

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

.jpeg o .jpg
Contiene un fichero de imagen en formato codificado jpeg.

.mpeg o .mpg
Contiene un fichero de imagen de video o cine (en movimiento).

.au
Contiene un fichero de audio (sonido) codificado en aiff-encoded.

.mid
Contiene un fichero de audio (sonido) generado con secuenciadores midi tpicos de Windows.
.avi
Contiene un fichero con video y sonido tpico de Windows.

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

.exe
Contiene un fichero binario ejecutable en DOS o Windows.

.hqx
Contiene un fichero binario ejecutable en Macintosh.

.Z o .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.
.pdf
Contiene un fichero de imagen de cualquier documento generado con Acrobat Writer.
.doc
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 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 image/jpeg image/gif image/png text/html text/plain text/css text/x-javascript text/richtext text/rtf video/mpeg video/avi video/x-ms-wmv video/x-msvideo video/quicktime video/x-ms-asf .rtf .pdf .ps .doc .xls .ppt .asx .asx .avi .mp3 .mpg .swf .class .clas .clas .class .exe .com .zip .mp3 .mpg .wav .wma .mid .midi .mp3 .mp3 .mp3 .mp3 .mpeg .rm .jpg .jpeg .gif .png .htm .html .txt .text .htm .html .css .js .rtf .rtf .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>
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> Texto Texto Texto Texto de de de de prueba prueba prueba prueba (H1)</H1>. (H2)</H2> (H3)</H3> (H4)</H4>
<H5> Texto de prueba (H5)</H5> <H6> Texto de prueba (H6)</H6>
Texto de prueba (H1)

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 <br> <FONT <br> <FONT <br> <FONT <br> <FONT <br> <FONT <br> <FONT <br> <FONT <br> <FONT <br> <FONT <br> <FONT <br> </B>
COLOR="olive">Texto OLIVA </FONT> COLOR="yellow">Texto AMARILLO </FONT> COLOR="lime">Texto LIMA </FONT> COLOR="magenta">Texto MAGENTA </FONT> COLOR="purple">Texto PURPURA </FONT> COLOR="cyan">Texto CYAN </FONT> COLOR="brown">Texto MARRON </FONT> COLOR="black">Texto NEGRO </FONT> COLOR="gray">Texto GRIS </FONT> COLOR="teal">Texto TEAL </FONT> COLOR="white">Texto BLANCO </FONT>
Se ver: Texto ROJO Texto AZUL Texto AZUL MARINO Texto VERDE Texto OLIVA Texto AMARILLO Texto LIMA Texto MAGENTA Texto PURPURA Texto CYAN Texto MARRON Texto 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> <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>

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>
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>
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 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>
texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2
texto3 texto3 texto3 texto3 </DIV>
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 texto texto texto texto
texto texto texto texto texto texto texto texto texto texto <BLOCKQUOTE> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </BLOCKQUOTE> </BLOCKQUOTE>
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 8 2 3 4 5 6 7 <B>Esto es una demostracion de</B> texto preformateado.
9 10 11 12 13 14
15 16 17 18 19 20 21
</PRE> y este sera el resultado:

1 8 2 3 4 5 6 7 Esto es una demostracion de texto preformateado.
9 10 11 12 13 14
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: y como alias se utiliza: Por ejemplo, si escribes:
texto texto 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 SIZE=35> texto texto texto texto texto texto texto texto texto texto texto texto <P> <SPACER TYPE=HORIZONTAL SIZE=35> texto texto texto texto texto 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 nomal
<SUP>Texto Superndice</SUP>
Texto subndiceTexto
<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 parmetro title 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
Se escribe:
<UL TYPE=CIRCLE> <LI>Primera linea <LI>Segunda linea </UL>
Tambin puede usarse el valor SQUARE. As:

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. Primera linea B. Segunda linea
C. Tercera linea D. 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 START combinado 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

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
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. 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
IV.
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 TH CAPTION X - - X X X -
BORDER BORDERCOLOR ROWSPAN
COLSPAN ALIGN VALIGN WIDTH HEIGTH CELLPADDING CELLSPACING NOWRAP EVENTS
X X X X -
X -
X X X X X X
X X X
X -
X X X Resumen de tablas
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 DE F
<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

<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>
<TABLE BORDER> <TR>
</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

<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH> </TR> <TABLE BORDER> <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 E B F C G D H
<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>
<TABLE BORDER> <TR>
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 Head1 Item 5 Item 6 Item 7 Item 8 Head2 Item 9 Item 10 Item 3 Item 11
<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 BORDER ROWSPAN COLSPAN ALIGN VALIGN WIDTH HEIGTH CELLPADDING X X X X X X X X X X X X X X X -
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></TD> </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 Mujeres 1.7 60
Sexo
<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> </TR> </TABLE> <TH>Mujeres</TH><TD>1.7</TD><TD>60</TD>
Otro ejemplo de lnea y columna expandidos 12 A 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> </TR> <TR> </TR> </TABLE> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD> <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 D B E C F
<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
A D
B E
C F
A D
B E
C F
<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 Marzo Otra celda Celda 3
Celda 1 Celda 2 Celda 4
y esta Celda 6 es la celda 5

<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>
<TABLE BORDER> <TR>
</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 Todas alineadas al centro
Febrero Celda 2
Marzo Otra celda Celda 3 Por defecto Alineado a la izquierda
Alineado a la derecha Alineado al centro
<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 Todas alineadas arriba Esta es la Celda 2 Alineado arriba
<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>
Marzo Celda 3
Por defecto Alineado abajo Alineado al centro
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 3 12 AB C D 456

<TABLE BORDER> <TR>  <TD>1</TD> <TD>2</TD> <TD>3 <TABLE BORDER> <TR> 
<TD>A</TD> <TD>B</TD> </TR> <TR>  <TD>C</TD> <TD>D</TD> </TR> </TABLE> </TD> </TR> <TR>  <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

<TABLE BORDER WIDTH="100%">
Celda 2 Celda 4
<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 B D 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 2 Item A 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 C1L3 C1L4 C1L5 C1L6 C1L7 C2L2 C2L3 C2L4 C2L5 C2L6 C2L7 C3L2 C3L3 C3L4 C3L5 C3L6 C3L7 C4L2 C4L3 C4L4 C4L5 C4L6 C4L7 C5L2 C5L3 C5L4 C5L5 C5L6 C5L7 C6L2 C6L3 C6L4 C6L5 C6L6 C6L7 C7L2 C7L3 C7L4 C7L5 C7L6 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: Horizontal arriba Vertical Ejemplo de recuadro Vertical izquierda con ngulos rectos. derecha Horizontal abajo -------------------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, 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:
Ñ o bien Ñ
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. 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 WWW, 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.
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 ! " Descripcin Cerrar exclamacin Dobles comillas Alias ---
# $ % & ' ( ) * + , . / 0-9 : ; < < = > > ? @ A-Z [ \ ] ^ _ ` a-z { | }
# $ % ‰ & ' ( ) * + , - . / 0 - 9 : ; < < = > > ? @ A - Z [ \ ] ^ _ ` a - z { | }
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
----amp -------------lt --gt --------------
~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ⅛ ⅜ ⅝
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 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
-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 ----
⅞ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à
Siete octavos 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 U mayscula, acento agudo U mayscula, acento circunflejo U mayscula, diresis Y mayscula, acento agudo THORN mayscula Beta minscula a minscula, acento grave
-iquest Agrave Aacute Acirc 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
á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ &#8364 ≠ ≤ ≥
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 Euro Distinto de Menor o igual que Mayor o igual que
aacute acirc atilde auml aring aelig ccedil egrave eacute 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
√ Ω ↑ ↓ ← → ↔ № ▲ ► ▼ ◄ ■ □ ▪ ▫ ● ○ ◊
Radical Omega Flecha arriba Flecha abajo Flecha izquierda Flecha derecha Flecha izq-der N Flecha ar Flecha de Flecha ab Flecha iz Cuadrado lleno Cuadrdo vacio Mini cuadrado lleno Mini cuadrado vacio Punto lleno Punto vacio Rombo vacio
radic -uarr darr larr rarr harr -----------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 en algunos casos, se puede parametrizar con una instruccin de estilo. 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 (Esto puede que no funcione en algunos navegadores antiguos)
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 es Link 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:// Descripcin Ejemplo Efecto
Servicios WWW <A HREF="http://www.uv.es/"> WWW</A> WWW Servicios FTP <A HREF="ftp://ftp.uv.es/">FTP</A> FTP
news:// Servicios NEWS <A HREF="news://news.uv.es/">NEWS</A> NEWS mailto:// Servicios E-mail <A HREF="mailto:jac@uv.es/">E-mail</A> file:///C| Fichero local <A HREF="indice.htm/">Fichero</A> 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 e-mail 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>
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 GIF o JPG. Estos formatos son interpretados directamente por el navegador. La diferencia entre estos dos formatos es su nivel de compresin. En efecto, el JPG tiene una compresin mucho mayor que el GIF, por lo que suele ser el formato ms utilizado en el mundo web, donde siempre se debe perseguir que las pginas sean lo ms ligeras posible. Por contra, cuanta mayor compresin tenga un grfico menor calidad se consigue, pero para usos generales el JPG es perfectamente vlido. 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 la W3. 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
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
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
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
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
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 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 REMOTE_IDENT AUTH_TYPE CONTENT_TYPE CONTENT_LENGTH HTTP_USER_AGENT HOME HTTP_FROM HTTP_REFERER REFERER_URL = = = = = = = = = = = = = = = = = = = = = = = $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 $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 utilice METHOD=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:
HOLA
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
Clase A
Clase B
Se escribe:
<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
Clase A
Clase B
Se escribe:
<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.
Valor 1
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 parmetro VALUE asociado al atributo OPTION. Prueba con el valor 5 de la siguiente lista:
Valor 1 Valor 2 Valor 3
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" 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 atributo
MULTIPLE al elemento SELECT. Para seleccionar y deseleccionar hay que atenerse a las normas de Windows.
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" 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 des
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://sestud.uv.es/manual.esp/indice.htm"> <INPUT TYPE="SUBMIT" VALUE="Indice"> </FORM>
</TD> <TD> <FORM METHOD="GET" ACTION="http://sestud.uv.es/manual.esp/notas.htm"> <INPUT TYPE="SUBMIT" VALUE="Notas"> </FORM> </TD> <TD> <FORM METHOD="GET" ACTION="http://sestud.uv.es/manual.esp/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 campo vaco. Longitud sin limitar. 1 campo vacio. Longitud limitada a 10. 2 botones seleccin 2 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

Valor 1
<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.

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: Apellidos: F.Nac.: DNI:
Calle y nmero: Cdigo Postal: Provincia: Opcin: Comentarios personales: Pulse aqu:
Enviar datos Borrar los datos
OPCION 1
Ciudad: Telfono: Escoja una opcin
<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 Invisible Invisible ! " # $ % & ' ( ) * +
! " # $ % & ' ( ) * + 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 Cod. hexadecimal %09 %0A %0D %21 %22 %23 %24 %25 %26 %27 %28 %29 %2A %2B
, . / : ; < = > ? @ [ \ ] ^ _ ` { | } ~
, - . / : ; < = > ? @ [ \ ] ^ _ ` { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬
Coma 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
%2C %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
® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð
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 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
%AE %AF %B0 %B1 %B2 %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
Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó
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 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
%D1 %D2 %D3 %D4 %D5 %D6 %D7 %D8 %D9 %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
ô õ ö ÷ ø ù ú û ü ý þ ÿ
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
%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 elemento FRAMESET 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 son pagina1.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: A B C Y se escribira as:

<FRAMESET ROWS=25%,25%,50%> <FRAME SRC="a.htm"> <FRAME SRC="b.htm"> <FRAME SRC="c.htm"> </FRAMESET> Ejemplo real
Un frame combinado de un rea vertical y dos horizontales Se vera as: Y se escribira as: B A C
<FRAMESET COLS=20%,*> <FRAME SRC="a.htm"> <FRAMESET ROWS=40%,*> <FRAME SRC="b.htm"> <FRAME SRC="c.htm"> </FRAMESET> </FRAMESET> Ejemplo real
Un frame combinado de dos reas horizontales, la de abajo dividida en dos verticales Se vera as: Y se escribira as: A
<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: Y se escribira as: AA AA
<FRAMESET COLS=50%,50%> <FRAME SRC="a.htm"> <FRAME SRC="a.htm" MARGINWIDTH=50 MARGINHEIGHT=50> </FRAMESET> Ejemplo real
AAAA
Un frame con referencias cruzadas (NAME TARGET) Se vera as: Y se escribira as: A B
<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"> <A HREF="cc.htm"> bb.htm Esto es "VENTANA" <A HREF="bb.htm" TARGET="VENTANA"> <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" -
aa.htm
cc.htm
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 establecido FRAMEBORDER=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: 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
Arriba A B C
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.selectedIndex].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)

Pueden utilizarse indistintamente ficheros muultimedia 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, e INTEGER 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 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/xmplayer2" 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:
<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. 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 del Dewplayer. 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 de data: 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=FFFF 00" />
Fjate en que el smbolo que hace de separador entre los distintos ficheros mp3 es la "pipe" | (cdigo |) 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: o 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. 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 .ico no 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í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ón de la noticia 1 </description> </item> <item> <title>Noticia 2</title> <link>http:/miservidor.com/contenidos.asp?nivel=18&cont=567</link> <pubDate>Tue, 21 Sep 2010 00:00:00 +0200</pubDate> <description> Emoció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 ' & " < > pero no es vlido á Para no confundir cuales se pueden codificar como en html y cuales no, lo mejor es utilizar el formato numrico en todos ellos: á = & = & 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 tres 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.
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, 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).
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 cuantas versiones de navegador se pueda, y saber con cuales no funciona. 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...
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 una almohadilla 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;}
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; }
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 Ejemplo de estilo verde Parrafo 1 Negrita rojo Parrafo 2 Pero simplemente poniendo una coma entre P y B:
BODY {color:green} P, B {color:red}
Se obtiene:
Negrita verde Ejemplo de estilo verde Parrafo 1 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 } }
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. Otras reglas que pueden considerarse especiales son las que hacen referencia a los pseudoelementos. 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 pointer Valores posibles e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize Valor porcentual No aplicable Se aplica a Se hereda?: Todos 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 segunda
de
prrafo. de prrafo
lnea
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 etiqueta P, 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 x-large 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. 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; Establece la separacin entre los caracteres de la lnea. word-spacing:5px; Establece la separacin entre las palabras de la lnea. 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 Valor por defecto font-size font-family Definido por el usuario font-weight font-style
medium
normal
normal
Valores posibles
Absoluto, relativo, porcentaje, unidad de tamao
Familia de fuente Windows
normal, lighter, bolder, normal, bold, un valor entre 100 italic y 900
Valor porcentual Se aplica a Se hereda?
Se calcula respecto al padre Todos S
No aplicable
No aplicable
No aplicable
Todos S
Todos S
Todos S
Y este sobre el resto:

Declaracin line-height textdecoration text-transform text-align text-indent
Valor por defecto
normal
none
none
left
Valores posibles
nmero, longitud, porcentaje,

normal
none, capitalize, underline, line- uppercase, through, blink lowercase
left, right, center, justify, none
longitud, porcentaje
Se calcula Valor respecto al porcentual tamao de la fuente
No aplicable
No aplicable
No aplicable
Se calcula respecto al ancho del elemento padre
Aplica a
Elementos a nivel de bloque
Todos
Todos
Elementos a nivel de bloque S
Elementos a nivel de bloque
Se hereda? S
No
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: border-left-width border-right-width border-top-width border-style border-bottom-width border-width none border-color border-left-color border-right-color border-top-color border-bottom-color none
Declaracin
Valor por defecto 0 Unidad de longitud, thin, medium, thick
Valores posibles
none, solid, double, inset, none, color outset, groove, ridge No aplicable Todos No No aplicable Todos No
Valor porcentual No aplicable Se aplica a Se hereda? Todos 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: margin margin-left margin-right margin-top margin-bottom padding padding-left padding-right padding-top padding-bottom 0 Longitud, porcentaje
Declaracin
Valor por defecto 0 Valores posibles Longitud, porcentaje, auto
Valor porcentual Se calcula respecto al ancho del padre Se calcula respecto al ancho del padre Se aplica a Se hereda? Todos No Todos 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 defecto Valores min-width max-width height min-height max-height
auto
Incierto
none
auto
none
Longitud,
Longitud,
Longitud,
Longitud,
Longitud,
Longitud,
posibles
porcentaje, porcentaje, auto, inherit inherit Se calcula respecto al ancho del padre Todos No
porcentaje, porcentaje, porcentaje, none, inherit auto, inherit inherit Se calcula respecto al ancho del padre Todos No Se calcula respecto al alto del padre o auto Todos No Se calcula respecto al alto del padre Todos No
porcentaje, none, inherit Se calcula respecto al alto del padre Todos No
Se calcula Valor respecto al porcentual ancho del padre Se aplica a Todos Se hereda? 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;
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 repeaty. 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 z-index = 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 Se hereda?: Todos 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 rigth nos 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:

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>
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 Valores posibles inherit block Valor porcentual No aplicable Se aplica a Se hereda?: Todos No
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 visible hidden Valores posibles inherit collapse Valor porcentual No aplicable Se aplica a Se hereda?: Bloques 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.
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" > <INPUT CLASS="controles2" doble">
TYPE="text" NAME="campo1"
VALUE="Borde
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. Declaracin Valor por defecto caption empty-cells bordercollapse separate border-spacing tablelayout auto whitespace normal normal pre nowrap No aplicable Todos No
top
show show hide inherit No aplicable td th Si
00 cualquier unidad de medida No aplicable Todos Si
top Valores posibles bottom Valor porcentual Se aplica a Se hereda?: No aplicable table No
separate collapse
auto fixed No aplicable table No
No aplicable Todos Si
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 del Web, y an hoy no est nada claro.
A la vista de esta errtica trayectoria del lenguaje, la consecuencia ha sido que en el ciberespacio hay pginas de todos los tipos posibles, y que los navegadores hayan 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 plug-ins, 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: una base 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. 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. 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. 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. 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 e-mail 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, intenrn 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. As pues, 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. 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, deben 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, 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, y 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. 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 (Secure Sockets 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 excesivamente fiable 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 ingls
Virtual 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, y aunque no es muy complicado, para algunos usuarios puede ser problemtico. Adems requiere del servidor ms recursos para mantener las conexiones de los clientes.
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, o bien 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 (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 del 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. 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 mientras que el administrador no lo permita. 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. 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. 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 controlad ores estan un poco escondido s: En el primer nivel del cuadro de instalaci n 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 acabaremo s teniendo que hacer, ya puestos, lo mejor es marcarlos todos. Este proceso 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
Seleccionar el controlador de Access en la lista. Pulsar el botn Finalizar
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, Data 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 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 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 System DSN, ya que el IDC slo trabaja con este tipo de controladores. Pulsar el botn Add
Paso 2.Seleccionar el controlador de SQL Server en la lista. Pulsar el botn Finalizar
Paso 3.Aqu es donde vamos a crear realmente el origen de datos de la aplicacin.
Analicemo s 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 definiremos cmo se har la verificacin del login y el password al conectar con SQL Server.
Evidenteme nte, la primera de las dos opciones, autenticaci n 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 para utilizar la base de datos de la aplicacin. 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 de system 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 realiza despus 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 ficheros de logins, que son unos ficheros 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 Configure.
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 plantilla articulos.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 en articulos.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 llamada articulos. 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 fichero translator.txt debe existir, aunque puede estar vaco. He aqu una muestra:
=í =ñ =ó =á
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 y FROM 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 MATERIAL Clavos 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:

HERRAMIENTAS Martillo
HERRAMIENTAS Alicates MATERIAL MATERIAL Clavos 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
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
HERRAMIENTAS
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 MATERIAL Clavos 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 INGLESESTADOS 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>  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 %>  <% 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 %>

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 %>

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 %>

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 disparar Session_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 = " & objErrorInfo.File) Response.Write("Line = " & objErrorInfo.Line) Response.Write("Number = " & objErrorInfo.Number) Response.Write("Source = " & 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 "Este es el LCID para esta pgina " & Session.LCID & "<BR>" Response.Write "Este es el formato fecha y hora para el LCID: " & NOW() &
"<BR>" Session.LCID = Response.Write "<BR>" Response.Write "<BR>" Session.LCID = %>
1033 "Este es el LCID para esta pgina " & Session.LCID & "Este es el formato fecha y hora para el LCID: " & NOW() & 3079

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 %>

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 %>

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.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
disparar Session_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 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>

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>

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.QueryString< /A> </BODY> </HTML>
'---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>

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">R equest.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>

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.
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 es False, 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 y Response.ExpiresAbsolute que controlan las caches, pero stas lo hacen sobre las del navegador. Si se escribe:
<% Response.CacheControl = "Public" %> SI guarda en cache del proxy (por <% Response.CacheControl = "Private" %> NO guarda en cache del proxy
defecto)
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 de la celda A1</TD> <TD>Valor de la celda B1</TD> </TR> <TR><TD>Valor de la celda A2</TD> <TD>Valor de la celda B2</TD> </TR> </TABLE> </BODY> </HTML>
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 exacta en 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>
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>
'---Fichero prueba2.asp <% bytecount = Request.TotalBytes binread = Request.BinaryRead(bytecount) Response.BinaryWrite binread %>

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) %>
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>

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 <BR> 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>

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>

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< WIDTH="50%"
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 (formato ASCII).
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 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.MoveFirst es 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, es decir antes de invocar RS.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).
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 las propiedades, 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 devuelve False. 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 o VbCrLf 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.
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
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.
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: o 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 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

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

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 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 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>
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 DNI para 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 funcin Mid() 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>") %>

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 una variable, 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 antepuesto xx 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 las variables, 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 propiedad Name 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 funcin VarType(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) = 10 Mivariable(1) = 20 Mivariable(2) = 30
Mivariable(3) = 40 Mivariable(4) = 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 Preserve para 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 devuelva False (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 Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin 1 1 1 1 1 1 1 1 1 = = = = = = = = = True And Expresin 2 = True el resultado es True. True And Expresin 2 = False el resultado es False. True And Expresin 2 = Null el resultado es Null. False And Expresin 2 = True el resultado es False. False And Expresin 2 = False el resultado es False. False And Expresin 2 = Null el resultado es False. Null And Expresin 2 = True el resultado es Null. Null And Expresin 2 = False el resultado es False. Null And Expresin 2 = Null el resultado es Null.
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 Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin 1 1 1 1 1 1 1 1 1 = = = = = = = = = True Or Expresin 2 = True el resultado es True. True Or Expresin 2 = False el resultado es True. True Or Expresin 2 = Null el resultado es True. False Or Expresin 2 = True el resultado es True. False Or Expresin 2 = False el resultado es False. False Or Expresin 2 = Null el resultado es Null. Null Or Expresin 2 = True el resultado es True. Null Or Expresin 2 = False el resultado es Null. Null Or Expresin 2 = Null el resultado es Null.
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 Si la Expresin Si la Expresin Si la Expresin 1 1 1 1 = = = = True Xor Expresin 2 = True el resultado es False. True Xor Expresin 2 = False el resultado es True. False Xor Expresin 2 = True el resultado es True. False Xor Expresin 2 = False el resultado es False.
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 Si la Expresin Si la Expresin Si la Expresin
1 1 1 1
= = = =
True Eqv Expresin 2 = True el resultado es True. True Eqv Expresin 2 = False el resultado es False. False Eqv Expresin 2 = True el resultado es False. False Eqv Expresin 2 = False el resultado es True.
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 no haces 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 %>

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 %>
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 instruccin On 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 valor es 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 Secante Cosecante Cotangente Seno inverso Coseno inverso Secante inversa Cosecante inversa Equaciones basadas en funciones intrnsecas Sec(X) = 1 / Cos(X) Cosec(X) = 1 / Sin(X) Cotan(X) = 1 / Tan(X) Arcsin(X) = Atn(X / Sqr(-X * X + 1)) Arccos(X) = Atn(-X / Sqr(-X * X + 1)) + 2 * Atn(1) Arcsec(X) = Atn(X / Sqr(X * X - 1)) + Sgn((X) -1) * (2 * Atn(1)) Arccosec(X) = Atn(X / Sqr(X * X - 1)) + (Sgn(X) - 1) * (2 * Atn(1)) Arccotan(X) = Atn(X) + 2 * Atn(1) HSin(X) = (Exp(X) - Exp(-X)) / 2 HCos(X) = (Exp(X) + Exp(-X)) / 2 HTan(X) = (Exp(X) - Exp(-X)) / (Exp(X) + Exp(-X)) HSec(X) = 2 / (Exp(X) + Exp(-X)) HCosec(X) = 2 / (Exp(X) - Exp(-X))
Cotangente inversa Seno hiperblico Coseno hiperblico Tangente hiperblica Secante hiperblica Cosecante hiperblica
Cotangente hiperblica Seno hiperblico inverso Coseno hiperblico inverso Tangente hiperblica inversa Secante hiperblica inversa Cosecante hiperblica inversa Cotangente hiperblica inversa
HCotan(X) = (Exp(X) + Exp(-X)) / (Exp(X) - Exp(-X)) HArcsin(X) = Log(X + Sqr(X * X + 1)) HArccos(X) = Log(X + Sqr(X * X - 1)) HArctan(X) = Log((1 + X) / (1 - X)) / 2 HArcsec(X) = Log((Sqr(-X * X + 1) + 1) / X) HArccosec(X) = Log((Sgn(X) * Sqr(X * X + 1) +1) / X) 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 de Comparar, 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 de Cadena 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. Si Subcadena 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:

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 de Comparar, 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:

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 de Comparar, 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 1 Domingo 2 Lunes 3 Martes
vbWednesday 4 Mircoles vbThursday vbFriday vbSaturday 5 Jueves 6 Viernes 7 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 Descripcin Ao Trimestre Mes Da del ao Da Da de la semana Semana Hora
n s
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) Mivariable(1) Mivariable(2) Mivariable(3) Mivariable(4) %> = = = = = 10 20 30 40 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 (" "). Si Delimitador 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 de Comparar, 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-matrices-
Join(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:

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 de Comparar, 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  </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 procedimiento Sub, 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>
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 funcin Chr(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 vbOKOnly vbOKCancel vbAbortRetryIgnore vbYesNoCancel vbYesNo vbRetryCancel Valor Descripcin 0 1 2 3 4 5 Muestra solamente el botn Aceptar (por defecto). Muestra los botones Aceptar y Cancelar. Muestra los botones Anular, Reintentar e Ignorar. Muestra los botones S, No y Cancelar. Muestra los botones S y No. Muestra los botones Reintentar y Cancelar.
vbCritical vbQuestion vbExclamation vbInformation vbDefaultButton1 vbDefaultButton2 vbDefaultButton3 vbDefaultButton4 vbApplicationModal
16 32 48 64 0 256 512 768 0
Muestra el icono de Mensaje crtico. Muestra el icono de Pregunta de advertencia. Muestra el icono Mensaje de advertencia. Muestra el icono de Mensaje de informacin. El primer botn es el predeterminado (por defecto). El segundo botn es el predeterminado. El tercer botn es el predeterminado. El cuarto botn es el predeterminado. 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.
vbSystemModal
4096
Y estos son los valores que devuelve MsgBox() segn el botn pulsado por el usuario:
Constante vbOK vbCancel vbAbort vbRetry vbIgnore vbYes Valor 1 2 3 4 5 6 Botn Aceptar Cancelar Anular Reintentar Ignorar S
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">  </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 ("Mensaje", vbExclamation, "Titulo") MsgBox ("Mensaje", vbCritical, "Titulo") MsgBox ("Mensaje", vbIinformation, "Titulo") MsgBox ("Mensaje", 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 funcin Chr(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
Status 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:
<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:
DefaultStatus 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".
Frames
History
Navigator
Document
MTODOS
Alert 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: <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:
Confirm Muestra un cuadro de dilogo con dos botones. Es parecido a la funcin MsgBox(), pero a diferencia de sta, no se 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
Prompt 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: <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>

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>
SetTimeout instrucciones, espera Ejecuta el cdigo VBScript contenido en instrucciones despus de transcurrido el tiempo, en milisegundos, indicado por espera. Sea por ejemplo: <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 utiliza ClearTimeout(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 Navega hasta una nueva pgina en la misma ventana. 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"> <!-Navigate "http://sestud.uv.es/manual.esp"
--> </SCRIPT> </FORM> </BODY> </HTML>
EVENTOS
OnLoad Como su nombre indica, se produce cuando el IE carga una pgina. Por ejemplo: <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>
Prueba de evento OnLoad
OnUnload 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: <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 Location Este objeto sirve para controlar la lnea de URL del navegador. Como ya sabrs, la lnea de URL es la ventanita situada en la parte superior del navegador donde se escribe la direccin de la pgina a la que quieres conectarte. En una direccin tpica existen 8 partes diferenciadas, que son precisamente, las 8 propiedades del objeto Location. Sea por ejemplo la direccin:
http://sestud.uv.es/manual.esp/vbscript/vb13.htm?tema="VBSscript"
Si invocamos las ocho propiedades de Location:
<HTML> <HEAD><TITLE>Objetos del IE</TITLE> <SCRIPT LANGUAGE="VBScript"> <!-Sub Prueba Document.Write "1 - " & Location.Protocol & "<br>" Document.Write "2 - " & Location.Href & "<br>" Document.Write "3 - " & Location.Host & "<br>" Document.Write "4 - " & Location.HostName & "<br>" Document.Write "5 - " & Location.Port & "<br>" Document.Write "6 - " & Location.PathName & "<br>" Document.Write "7 - " & Location.Search & "<br>" Document.Write "8 - " & Location.Hash & "<br>" End Sub --> </SCRIPT> </HEAD> <BODY OnLoad="Prueba"> </BODY> </HTML>
1 - http: 2 - http://sestud.uv.es/manual.esp/vbscript/vb13.htm?tema="VBSscript" 3 - sestud.uv.es 4 - sestud.uv.es 56 - /manual.esp/vbscript/vb13.htm 7 - ?tema="VBSscript" 8En este ejemplo, se han leido los valores que contienen cada una de las propiedades, pero tambin puede utilizarse para dar valor a las mismas propiedades. El siguiente ejemplo cambiar el valor que haya en la lnea de URL del navegador al pulsar el botn Prueba, e inmediatamente cargar la nueva pgina: <HTML> <HEAD><TITLE>Objetos del IE</TITLE> <SCRIPT LANGUAGE="VBScript"> <!-Sub Prueba_Location Location.Href="http://sestud.uv.es/manual.esp/indice.htm" End Sub --> </SCRIPT> </HEAD> <BODY> <FORM NAME="Formulario1"> <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick="Prueba_Location"> </FORM> </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 sub-objetos.
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 Location Devuelve un string con la URL completa de la pgina que haya cargada. No hay que confundir esta propiedad del objeto 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 Title Devuelve el string que haya dentro del elemento <TITLE> de la pgina que se haya cargado. Por ejemplo: <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
Write 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:
<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> WriteLn 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: <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>
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">  </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 Form se 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: Element CheckB Hidde Passwor Button Radio o ox n d Reset Select Submit Text TextArea
OnClick OnClick Eventos OnFoc OnFocu -us s
OnFocus OnFocu OnClick OnClick OnClick OnBlur s OnFoc OnFoc OnFoc OnChan OnBlur us us us ge
OnFocus OnBlur OnSelect OnChan
OnFocus OnBlur OnSelect OnChan
ge
ge
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 OnFocus se 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 . 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 no admiten 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() y si tiene argumentos: function sumar(a, b) 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>
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 devuelva False (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 Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin 1 1 1 1 1 1 1 1 1 = = = = = = = = = True && Expresin 2 = True el resultado es True. True && Expresin 2 = False el resultado es False. True && Expresin 2 = Null el resultado es Null. False && Expresin 2 = True el resultado es False. False && Expresin 2 = False el resultado es False. False && Expresin 2 = Null el resultado es False. Null && Expresin 2 = True el resultado es Null. Null && Expresin 2 = False el resultado es False. Null && Expresin 2 = Null el resultado es Null.
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 Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin Si la Expresin 1 1 1 1 1 1 1 1 1 = = = = = = = = = True || Expresin 2 = True el resultado es True. True || Expresin 2 = False el resultado es True. True || Expresin 2 = Null el resultado es True. False || Expresin 2 = True el resultado es True. False || Expresin 2 = False el resultado es False. False || Expresin 2 = Null el resultado es Null. Null || Expresin 2 = True el resultado es True. Null || Expresin 2 = False el resultado es Null. Null || Expresin 2 = Null el resultado es Null.
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 Si la Expresin Si la Expresin Si la Expresin 1 1 1 1 = = = = True ^ Expresin 2 = True el resultado es False. True ^ Expresin 2 = False el resultado es True. False ^ Expresin 2 = True el resultado es True. False ^ Expresin 2 = False el resultado es False.
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 9 1001. Si aplicamos los tres operadores lgicos a esta pareja de valores, se obtiene:
15 & 9 = 9 15 | 9 = 15 15 ^ 9 = 6 (1111 AND 1001 = 1001) (1111 OR 1001 = 1111)
(1111 XOR 1001 = 0110)
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 .[]() ++ -- - ~ ! delete new typeof void */% +-+ << >> >>> < <= > >= == != === !== Descripcin Acceso a campos, ndice de matrices y llamada a funciones. 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" Mi_array[1] = "B" Mi_array[2] = "C" 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 devuelve NaN (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 NaN NEGATIVE_INFINITY POSITIVE_INFINITY
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) = 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
Esto es una prueba
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 true devuelve 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 [09]. 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: /[\-A-Z]/ 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 subobjetos 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.
alert('mensaje') Muestra un mensaje de alerta que no ofrece respuesta alternativa del usuario, sino solamente darse por enterado. Por ejemplo: <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:
confirm('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: <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>
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'}
prompt('mensaje', ['propuesta']) 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: <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>
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
setTimeout('instrucciones', espera) Evalua y ejecuta el cdigo JavaScript contenido en 'instrucciones' despus de transcurrido el tiempo, en milisegundos, indicado por espera. La evaluacin de las instrucciones solamente la har una vez. Sea por ejemplo: <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 utiliza
clearTimeout(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.
elemento.focus() 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 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.
moveBy(x,y) moveTo(x,y) Estos dos mtodos sirven para mover una ventana, previamente abierta, un nmero determinado de pxels hasta una determinada posicin. Por ejemplo: <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: onLoad Como su nombre indica, se produce cuando el navegador carga una pgina. Por ejemplo: <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>

Prueba de evento OnLoad
onUnload 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: <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>
onFocus 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: <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>
onBlur Es el inverso del anterior. Este manejador de eventos controla el evento blur que se produce cuando un objeto window, 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>
onError 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: <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
name 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.
status 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: <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.
defaulStatus Funciona igual que el anterior, pero es el valor por defecto de la lnea de estado inmediatamente despus de cargar la pgina. <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
<HTML> <HEAD> <TITLE>JavaScript Index</TITLE> <script Language="JavaScript">  </script> </HEAD>
<BODY bgcolor="#00FFFF" onLoad="startclock()">
<CENTER>
<h2>Esto es un reloj hecho con JavaScript</h2>
<table border> <tr> <td><form name="clock" onSubmit="0"></td> </tr>
<tr> <td colspan=2>Hoy es: <input type="text" name="thedate" size=12 value=""></td> <td colspan=2>La hora es: <input type="text" name="face" size=12 value=""></td></form> </tr>
</table> </CENTER>
<hr> <center> <h3> [<a href="javascr.htm">Volver</a>] </h3> </center>
</BODY> </HTML>

Tutorial HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutorial HTML

Uploaded by

Copyright:

Available Formats

Propsito de este documento

Propsito de este documento (varios aos despus)

Notas sobre el lenguaje

Cmo funciona esto?

Los elementos pueden ser llenos o vacos.

y este sera el resultado:

Y este sera el resultado:

y este sera el resultado:

Estructura de una pgina HTML

Ejemplo de pgina Si escribes:

Esquema de tipos de un documento HTML

Documento HTML. Contine texto e instrucciones HTML que sern interpretadas.

Contiene un fichero de imagen en formato GIF.

Contiene un fichero de imagen en formato NPG.

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

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

Contiene un fichero de imagen en formato codificado jpeg.

Contiene un fichero de imagen de video o cine (en movimiento).

Contiene un fichero de audio (sonido) codificado en aiff-encoded.

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.

Contiene un fichero binario ejecutable en Macintosh.

Contiene un fichero de imagen de cualquier documento generado con Acrobat Writer.

Cabecera (HEAD) de un documento HTML

Cuerpo (BODY) de un documento

Tamaos y tipos de letra en HTML

<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)

Por ejemplo: si escribes

Dar como resultado:

Texto de prueba 12345 con tipo IMPACT

Texto de prueba 12345 con tipos alternativos

Esto es una Prueba

Las distintas definiciones de los bloques. Separadores.

y este sera el resultado:

Texto de prueba (H1)

Texto de prueba (H2)

Por ejemplo, si escribes:

<H1> Texto en H1 </H1> <H3> Texto en H3 </H3>

Y este sera el resultado:

y este sera el resultado:

y este sera el resultado:

texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2

texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2

texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2

texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2

texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2

texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2

texto3 texto3 texto3 texto3 </DIV>

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

<HR WIDTH=80% SIZE=5 ALIGN=LEFT>

Esto es una etiquetaEsto es una prueba de enmarcado

</PRE> y este sera el resultado:

Se ve as: texto texto texto texto