El conjunto de páginas que componen una Web puede considerarse como una Aplicación Web.


Organización de las Páginas

La Página de Control

El código incluido en la página que no esté dentro de ninguna función se ejecuta al cargar la página. Ejemplo:

  <HTML>
  <HEAD>
  <TITLE>greeting.htm by Ray Daly</TITLE>
  </HEAD>

  <body background="../../webpages/bookbkg.gif">

  <H1>WTFIN: Where to Find it Now</H1>

  <SCRIPT LANGUAGE="JavaScript"><!--
    today=new Date()     //..get data and time
    x=today.getHours()    //..pull out the hours
    document.write ('<H2>Welcome JavaScript Surfers</H2>')
    if (x<12) {
      document.write('<H3>Good Morning!</H3>')
    else
      document.write('<H3>Hello on this beautiful day!</H3>')
    document.write('<P>Hidden away for your use only are several \
                    applications:</P>')
    document.write('<OL><LI><A HREF="messedit.htm">Message Editor</A>')
    document.write('<LI>More applications here.</OL>')
  // --></SCRIPT>

  <A HREF="nextpage.htm">Continue to <I>Find it Now</I>.</A>

  </body>
  </HTML>

Siempre hay que tener en cuenta que el contenido del documento prácticamente no se puede modificar una vez cargada la página: si se modifica una propiedad del texto no se aprecia ningún cambio en pantalla (salvo en el caso del color de fondo).

Una idea es utilizar la primera página como un panel de control que se encargue de controlar el aspecto del resto de páginas relacionadas. También podría servir como formulario de entrada para registrar a los usuarios que pueden acceder a la web.

Nota: cuando existe una estructura de aplicación en forma de frames, lo lógico es que sólo la página principal esté disponible para los motores de búsqueda. Ver el documento Robot Exclusion.

Cuando se define frames anidados hay que tener en cuenta que los correspondientes objetos no están anidados. Es decir, sólo existe un frameset principal y todos los demás frames se guardan en el array frames en el orden en que se definieron en la página HTML. Así por ejemplo, para acceder desde otro frame a la propiedad value de un área de texto llamado TextArea1 situado dentro de un formulario llamado Form1 que a su vez está en un frame llamado Frame1, se escribiría:

    parent.Frame1.document.Form1.TextArea1.value

Obsérvese que un frame es en realidad un objeto window y que por lo tanto contine la propiedad document que hace referencia al documento de la ventana.

Guardar la Información de la Página de Control

La información recogida en la página de control deberá guardarse para que la puedan utilizar el resto de páginas relacionadas.

Las Cookies

Las cookies guardan información en la parte cliente, y el navegador se encarga de mantenerla. Cada vez que el navegador hace una petición al servidor incluye esta información en la petición, y el servidor puede o no utilizarla.

La información de las cookies se guardan en la forma NAME=VALUE (ej. customer=Smith). Los datos se separan por punto y coma (ej. customer=Smith;phone=8005551212).

Para almacenar información en una cookie se utiliza la propiedad cookie del documento. Ej.:

    document.cookie="customer=Smith"

Por defecto, la información de la cookie se mantiene hasta que finaliza la sesión, y sólo se envía cuando se solicitan páginas del mismo servidor. Ver Netscape's Preliminary Specification.

La información también se recupera mediante la propiedad cookie del documento, separándo la cadena obtenida en su datos elementales. Ej.:

    var pair=document.cookie
    lastname=pair.substring(pair.indexOf("=")+1, pair.length)

La información se puede guardar en la cookie de dos formas:

Bookmarks y URLs

Aunque no se utiliza normalmente, también se puede guardar información en la URL mediante la propiedad search del objeto location, aunque sólo para pequeñas cadenas de información. Ej.:

    //Guardar "http://www.yoursite.com?info=htmljive"
    window.location.href += "?info=htmljive"

Si a continuación el usuario guarda la página como un bookmark, esta información se guardará como parte del mismo. Cuando el usuario vuelva a cargar la página seleccionando dicho bookmark, la información volverá a estar disponible en la propiedad search.

  <HTML>
  <HEAD>
  <TITLE>search.htm by Ray Daly </TITLE>
  </HEAD>
  <body background="../../webpages/bookbkg.gif">

  <P>Save this page as a bookmark to avoid the registration
  page on your next visit..</P>

  <script language="JavaScript">
    if (location.search=="")
    {
      //...need this if control to avoid an endless loop
      window.location.search="?infohere"
      //..add information to URL
      document.write("window.location.href")
    }
  </script>
</body>
</HTML>

Los datos se separan con ampersand y los espacios no están permitidos (se suelen representar con el signo más). Ej.:

En realidad se puede guardar cualquier cadena, no es necesario que sean pares nombre=valor.

Guardar Información con Frames

El documento con la estructura de frames no puede contener código HTML, pero sí puede contener scripts, con lo que las variables y funciones definidas en dicho documento se pueden utilizar en todos los demás documentos.

Por otra parte, si la página de control se carga en un frame y siempre está visible, podrá guardar información en variables de JS. Su valor no se perderá, salvo que se vuelva a recargar la página.


Propiedades de Texto y Valores de Color

El estilo del texto del documento se puede definir cuando se crea éste dinámicamente. Para ello se utilizan métodos que ya se vieron al hablar del objeto string: bold(), fixed(), italics(), blink(), strike(), sub(), sup(), big(), small(), fontsize(), fontcolor().

Los colores de texto se definen mediante los atributos del tag BODY, y se corresponden con las propiedades siguientes:

    document.fgColor [= RGBTriplet | ColorName]
    document.bgColor [= RGBTriplet | ColorName]
    document.alinkColor [= RGBTriplet | ColorName]
    document.linkColor [= RGBTriplet | ColorName]
    document.vlinkColor [= RGBTriplet | ColorName]

Por ejemplo:

    document.fgColor="0000FF"
    document.fgColor="blue"

En un documento ya cargado sólo tiene efecto modificar el color de fondo.