Está en la página 1de 44

Curso de Diseño de Páginas Web

Curso de Diseño y Creación de páginas web

P

rimeros pasos: tanteando el terreno
§ § § § §

El lenguaje HTML Partes de las que se compone una página web Elementos básicos Herramientas para su creación Los distintos Navegadores

D

iseño
§ § §

Diseño web, ajustes en pantalla y colores Imágenes y animaciones. El fondo de la página Añadir música de fondo

P

áginas, archivos y links
§ § §

Links E-mail como links Cómo distribuir a nuestros visitantes archivos

¿

H

emos terminado?
§ §

Comprobaciones finales Colocar nuestra página en internet: FTP

C

onceptos avanzados
§ § §

Frames Capas (Draw layer) CSS (Cascade Style Sheets)

0

D

ar vida a nuestra página
§ § § §

Java, JavaScript y VBScript Insertar código Script dentro de nuestra página HTML Cookies JavaScript y los problemas con los navegadores

Curso de Diseño y Creación de páginas web: El Lenguaje HTML

Para empezar, empezaremos con una nota importante: NO ES NECESARIO SABER ABSOLUTAMENTE NADA DE LENGUAJE HTML PARA CREAR UNA PÁGINA WEB

Simplemente aquí se dan unas nociones elementales sobre qué es realmente una página web y en qué consiste dicho lenguaje. Una página web no dista mucho de cualquier programa que podamos tener en nuestro ordenador, es decir, una página web es un conjunto de órdenes o instrucciones que le dicen a nuestro ordenador qué es lo que tiene que hacer o mostrar, pero estas órdenes las traduce el navegador de internet. Como hoy en día un ordenador es incapaz de entender el lenguaje humano, se tuvo que buscar un lenguaje sencillo y potente para la creación de páginas web, este lenguaje es el HTML (HiperText Mark-up Language) o lenguaje de etiquetas. En el lenguaje HTML existen una serie de convenciones que definen los aspectos generales de una página web, así como sus partes. La idea es muy sencilla: cualquier cosa que se represente en una página web (texto, imágenes, ...) debe ir entre 2 "etiquetas" o "tags", la primera indica que empieza el elemento y la segunda indica que dicho elemento ha terminado, por ejemplo: TEXTO Hola, este es el texto FINTEXTO Pero como puede observarse las "etiquetas" pueden llegar a confundirse (no por el ordenador, sino por nosotros), con lo que las etiquetas se representan de una manera especial: entre 2 símbolos ( < >). Y para denotar la segunda etiqueta </>. De esta manera el ejemplo quedaría: <TEXTO> Hola </TEXTO> Pero el nombre de las etiquetas nos lo hemos inventado. Cada etiqueta posee un nombre, este nombre suele ser el nombre del elemento en inglés. Por ejemplo, una tabla se representa con

1

Pero una página web no son sólo los elementos que vemos. aqui va el texto</P> Al igual que el resto de los elementos. estas partes se verán más adelante.. no es necesario saber HTML. éstas son: <HTML></HTML>.. ya que las herramientas de creación de páginas web pondrán el HTML por nosotros.Pero esta representación mediante etiquetas del HTML presenta algunos "huecos".. Pues bien. el color. la pantalla aparecerá en blanco. la alineación.. las distintas propiedades que tenga el elemento también van dentro de la primera etiqueta. su contenido. el autor. Pero como hemos mencionado anteriormente. <P size=1 align=left face=Arial>Hola. ¿cómo indico que el texto sea de un determinado tamaño?. el tipo de letra. también existen otros elementos que no apreciamos. . En el caso del texto sus propiedades son el tamaño. como pueden ser el título. a modo de ilustración. la página web se representa entre 2 etiquetas. 3 . por tanto si el código de nuestra página web no incluye estas 2 etiquetas. . Lo único que tendremos que hacer es diseñar nuestra página tal y como se verá en pantalla y la herramienta hará el resto.

COM Web Independiente"> <meta name="Author" content="Sergio Cuéllar"> En el cuerpo de la página. palabras clave. Pero la mayoría de estas características no se representan en pantalla. </BODY> </HTML> Observandose en pantalla lo siguiente: 4 .programacion. se definen todos los elementos que contiene la página web. una página web la forman 2 partes: cabecera y cuerpo.soto. el contenido.facultad" > <meta name="description" content="EITIG. Como ejemplo. una página web tipo sería: <HTML> <HEAD> <TITLE>Título de la página</TITLE> <META NAME="Author" CONTENT="Sergio Cuéllar"> </HEAD> <BODY> Este mensaje está dentro del cuerpo del documento. como muestran las imágenes.Curso de Diseño y Creación de páginas web: Partes de una página Como ya hemos visto.segovia. .. excepto el título. que indican al navegador que el documento que se está recibiendo se tiene que visualizar como un documento de internet.. toda página web debe estar encerrada entre las etiquetas <HTML></HTML>. aquí teneis unos ejemplos: <meta http-equiv="Content-Type" content="text/html"> <meta name="keywords" content="eitig. es decir. El resto de las características se suelen representar mediante las etiquetas <META ----->. En la cabecera.universidad. compuesta por las etiquetas <HEAD></HEAD> que se colocan a continuación de la etiqueta <HTML>. que los navegadores lo incorporan al título de la ventana. Básicamente.domingo. su autor. encerrado por las etiquetas <BODY></BODY> y situado inmediatamente después de la cabecera. se definen todas las características relacionadas con la página.informatica. principalmente utilizaremos el título y el autor. aquí insertaremos el código HTML de todos los objetos que aparecen (o no) en pantalla. Estas características son: su título.

5 .

su anchura. tamaño. cursiva. indentación. Tablas. tipo de letra. Hipervínculos o enlaces o links. entramos automáticamente en la dirección web que le hayamos indicado previamente. su justificación. Es una propiedad especial que se aplica al texto o a las imágenes. negrita. Sus propiedades son: el nombre del archivo donde está contenida la imagen. que incluyen más o menos los mismos elementos. la alineación del contenido de una celda. La imagen puede ser estática (una simple foto) o una animación (casi siempre un archivo en formato GIF). También poseen una propiedad llamada alt: al poner el cursor encima de la imagen. Estos objetos son botones. . Las propiedades son: el número de filas y de columnas. Para distinguirse mejor. justificación. .. a una Objetos de formularios. listas desplegables. Imágenes. son más bien propios de cualquier aplicación Windows. el color o imagen fondo. cuadros de texto. y que se consideran los elementos más básicos e imprescindibles que incluye una página web. la anchura del borde y la forma en que se alineará el texto con relación a la imagen. el navegador conmuta automáticamente la forma del puntero de una flecha mano . casillas de verificación. Consiste básicamente en que al hacer click con el ratón sobre el objeto que posee esta propiedad. saldrá un recuadro de color amarillo con el texto que hayamos escrito.. Estos objetos no son tan corrientes como los anteriores. 6 . Estos elementos son básicamente: Texto y todas sus propiedades: color. subrayado..Curso de Diseño y Creación de páginas web: Elementos básicos En las imagenes podemos ver las barras de herramientas del FrontPage Express y del Netscape Composer. su justificación. la anchura del borde.. su altura.

sin lugar a dudas. aunque a primera vista puede parecer algo complicada. guardar los cambios y ya tenemos lista nuestra página web.. tendremos una visualización prácticamente igual a la visualización final en un navegador de internet.). pero eso no significa que no podamos usarla. mientras estamos desarrollando.. la apariencia del texto. Las más destacadas son: Dreamweaver (de Macromedia) Sin duda es la mejor de todas.. 7 . Su apariencia es prácticamente igual a la de cualquier editor de textos. Las herramientas de creación de páginas web o editores de páginas web. mapa de nuestra página. ya que su apariencia se desmarca del estándar Windows. También incorpora de serie unos efectos visuales en JavaScript bastante útiles (entre los que se incluyen las imágenes que cambian al pasar el ratón por encima y los llamados Timelines).Curso de Diseño y Creación de páginas web: Herramientas Ante la avalancha de e-mails recibidos. maneja a la perfección las capas y controla todos y cada uno de los parámetros y opciones de cada elemento (incluyendo CSS). Además. Lo único que debemos hacer es escribir en pantalla. dibujar tablas. . Éste es el aspecto que presenta su editor.. Pero es. dentro de unos meses se añadirán cursos prácticos sobre las distintas herramientas que aquí se describen. insertar imágenes. . Está pensada para profesionales y muchas de las opciones que incorpora nos vendrán grandes al principio (como comprobación automática de links. elegir el tamaño. y mediante un intuitivo interface gráfico iremos construyendo nuestra web sin escribir ni una sola línea de código. el color. la más completa: minimiza el código HTML que inserta en la página. fueron concebidas con el propósito de evitar al desarrollador un conocimiento exhaustivo del lenguaje HTML y una ayuda para el diseño de nuestra web. Las herramientas constituyen la mejor manera de desarrollar una página web ya que nos evitan tener que codificar en HTML.

bien en vertical. Hot Metal Pro (de SoftQuad) Hot Metal Pro es el rey destronado. se desactivan algunas de sus opciones). Antes de la llegada al mercado de Dreamweaver. bien en horizontal. es que permite controlar la repetición de la imagen del fondo de la página. pudiendo repetirse por toda la pantalla. era la herramienta preferida por los desarrolladores. Es bastante sencillo de usar: combina 3 pestañas en su parte inferior que 8 .macromedia. Su calidad es muy alta pero incorpora menos opciones que el Dreamweaver. o que no se repita (además de poder definir las coordenadas iniciales y finales). Complicada en un principio por la gran cantidad de opciones que posee.com (sólo funciona durante 30 días. En la imagen puede observarse su editor. pero muy familiar gracias a la apariencia estándar de cualquier aplicación Windows. con lo que seguramente ya lo tengamos instalado en nuestro ordenador. pasado este tiempo.Puedes descargarte una versión de prueba en www. FrontPage 2000 (de Microsoft) El FrontPage 2000 se incluye junto al paquete Microsoft Office 2000. factor que determinó su caída del puesto de honor. Una de las opciones que más nos llamó la atención y que ninguna otra herramienta que conozcamos posee.

9 . Ésta es su apariencia. Hay que destacar que tiene la mala costumbre de insertar mucho "código basura" en nuestra página. Se trata de 2 herramientas sin grandes pretensiones pero que representan el primer paso en el aprendizaje. pero se quedará corto en muchos aspectos cuando queramos desarrollar un sitio más elegante. HTML y dentro del navegador de internet). además de que muchos componentes que incorpora están implementados con etiquetas <META ----> (como las transiciones de página) y otros son los llamados componentes WebBot. FrontPage Express y Netscape Composer (de Microsoft y Netscape) FrontPage Express y Netscape Composer. Ambos no funcionan muy bien en otra cosa que no sea Internet Explorer 5.permiten conmutar la visión de nuestra página (desarrollo. Son muy útiles y recomendables para principiantes por su sencillez y por incluir las opciones justas.0. Lo ideal es empezar diseñando con alguna de las dos y. Útil para nuestros comienzos. pasar a desarrollar con otras herramientas más potentes. son dos herramientas que vienen incluidas con los respectivos navegadores de internet. una vez aprendida la mecánica.

Generalmente. como ya hemos visto. Hoy en día el mercado de navegadores de Internet está dominado principalmente por 2 aplicaciones : § § Microsoft Internet Explorer (IE) Netscape Navigator (NS) Estos 2 aplicativos abarcan el 95% del mercado. Este porcentaje lo representan navegadores como Mosaic u Opera entre otros (sin olvidarnos del navegador exclusivo de Austin Powers). Por tanto es importante que conozcamos algo más sobre los navegadores. los usuarios que utilizan este tipo de navegadores tienen también instalado el Explorer o el Navigator con lo que la cuota de mercado de estos 10 .Curso de Diseño y Creación de páginas web: Navegadores Nuestra página web. pero es inevitable mencionar el 5% restante. está compuesta únicamente por código HTML que posteriormente un navegador de internet traduce a formato gráfico.

últimos es casi del 100%. 95. NT y 2000). buscar la cadena "proporcionado" (pulsar la tecla F3 dentro del programa RegEdit) y una vez localizada cambiarla por lo que 11 . lo único que teneis que hacer es modificar esa línea en el registro de Windows (utilizando el programa "C:\WINDOWS\RegEdit. . Está disponible para todas las versiones Windows (3.. Dicho esto. por ejemplo las hojas de estilo (CSS) que NS ignora o incluso borra de pantalla (esto es hasta la fecha.. • • Actualmente. ya que cada navegador es un mundo distinto. no obstante.5 TRUCO: Si vuestro explorer es uno de esos "proporcionado por XXXXX" o algo por el estilo. está disponible la versión 5. incluso el mismo elemento puede representarse de forma distinta (por ejemplo el "colspan" de una tabla en IE o NS). Para ello. ofreciendo/soportando un determinado conjunto de elementos. centrémonos en los dos más conocidos. Y esto es algo importante al desarrollar cualquier tipo de aplicación orientada a Internet. Sus ventajas (respecto a su más directo competidor) son: • • Es más flexible y amigable a la hora de modificar o escribir el código (Script o HTML) Soporta una mayor cantidad de componentes. y quereis quitar el molesto titulito.0 esta situación parece que va a cambiar) Hace un uso más inteligente de los archivos temporales de internet a la hora de volver a mostrar una imagen o ejecutar un subprograma Java Los applets funcionan más rápido. Microsof InternetExplorer: Una de las causas de su gran expansión (sin entrar en la polémica de si es legal o no) es que se incluye de serie con el sistema operativo de la casa. Macintosh y algunos UNIX (Sun Solaris y HP-UX). 98. con el lanzamiento del Navigator 6.exe"). y parece que ha dado resultado porque es el navegador más usado hoy en día.1.

.. el programa de correo sólo recoge los mensajes del usuario correspondiente. Unix. Linux) y en el mundo de UNIX es utilizado por casi la totalidad de los usuarios. ya que no todo es Windows. sino que viene integrado con un programa de correo (Netscape Messenger) y un programa de creación de páginas web (Netscape Composer) La descarga de archivos es mucho más rápida. maximizar. cerrar) cambiando el archivo de imagen que contiene la animación (que se especifica dentro del registro en la línea anterior a la del título del programa).más o guste. Entre sus ventajas destacan: • No es sólo un navegador de internet. tiene cachés separadas para cada usuario. lo que permite que cada usuario disponga de sus propios "marcadores" (en IE se llaman "favoritos"). razón de peso para no despreciarlo. Es un programa que no es de Microsoft • • • • 12 . . También podeis personalizar la animación que aparece justo debajo de los botones de la ventana (minimizar. Netscape Navigator: Este navegador tiene versiones para casi todas las plataformas informáticas existentes (Windows. OS2-Warp. lo que permite que las páginas web se visualicen más rápido y que los archivos que nos bajemos tarden menos tiempo en guardarse Posee más efectos para el texto (como el parpadeo de las letras) Está pensado para que sea utilizado por varios usuarios en el mismo ordenador.

los contenidos y los detalles de nuestra página web llega la hora de la verdad: el diseño de nuestra web. por ejemplo yo suelo poner las imágenes entre varias líneas de texto o combinadas con el texto en el margen izquierdo de pantalla. muy superior y que además perdemos tiempo en cargar cosas que tal vez no le interesen a nuestros visitantes. de manera que todo cuadre a la perfección en pantalla.. www 13 . es decir. combinar los colores del texto dependiendo si son encabezamientos. A la hora de diseñar os topareis con unos problemillas bastante habituales y de fácil solución: • • • Ajustar el contenido en pantalla Mostrar varias imágenes en la misma línea ... muy recomendable es que todas nuestras páginas (si que es nuestra web está compuesta de varias páginas) tengan una apariencia más o menos similar. los contenidos colocados en un lugar diferente cada vez. . títulos. Conviene mezclar un poco. negrita. .. Algo muy. imaginación al poder. Y también es mejor tener muchas páginas pequeñas con un buen índice. ejemplos.Curso de Diseño y Creación de páginas web: Diseño web.. distinto tipo de letra. Ni todo es texto. contenidos. Dichas tablas las dividiremos a nuestro gusto. aprovechemoslo.. ajustes y colores Una vez elegido el tema. La solución es la utilización de tablas. ya sabeis. que una grande cuyo tiempo de carga es muy. Es bueno que las imágenes tengan el mayor colorido y resolución posible (pero ojo con el tamaño del archivo).. poner las letras en distintos tamaños. y en cada celda colocaremos la imágen.. texto o nada si es preciso. ni todo son imágenes. . nada de tener cada página de un color distinto. Y ya que los navegadores y los sistemas operativos ponen a nuestro servicio gráficos con millones de colores y alta resolución.

Aquí vemos unos ejemplos: Archivo JPEG 14 . eitig . pero por si acaso definiremos los tamaños de las tablas. filas y columnas en porcentaje y no en pixeles. com Pero no debemos olvidar que existen varias resoluciones de pantalla. Los navegadores admiten practicamente cualquier formato de archivo de imágenes. Curso de Diseño y Creación de páginas web: Imágenes y animaciones Imágenes y animaciones Como ya hemos visto. la más común es 800 x 600. pero en la práctica los diseñadores utilizan sólo dos: JPEG y GIF. uno de los elementos que podemos incluir en nuestra página web son archivos de imágen..

las imágenes JPEG se verán peor a medida que aumentemos el porcentaje de compresión..php (por cortesía de Fermín Alejo). Las imágenes en formato JPEG tienen una profundidad de color de 16 millones de colores (RGB de 24 bits) pero reduce el tamaño de la imágen sacrificando calidad (en luces. JPEG Optimizer.com. Resumiendo.Animación GIF ¿Por qué?. entre ellas están xat.01 que recomiendo encarecidamente que utiliceis.xat. por el tamaño de los archivos.com/downloads/diseno. buscador que posee una sección dedicada a compresores de imágen (Windows 95/98/Me . reflejos y transiciones de colores principalmente).com.ellimite.com Image Optimizer. También es capaz de almacenar máscaras (muy útil para definir determinadas zonas de la imágen de color transparente) y es capaz de reproducir animaciones. Advanced GIF Optimizer. • Para insertar imágenes en nuestra página debemos utilizar las etiqueta <img 15 . el formato GIF no pierde calidad. conseguir que el tiempo de carga de la página web sea inferior. Por el contrario.softonic. Podeis encontrarlas en: • • www. Pero sólo tiene una profundidad de 256 colores (paleta de 8 bits) y los archivos tamaño mediano o grande ocuparán más que en formato JPEG. muy recomendable su visita. entre ellas Image Optimizer 3. mostrando el tamaño de cada una y el porcentaje de compresión obtenido. aunque esta página suele dar algunos problemillas de carga. . Ambos formatos comprimen la imágen para así reducir su tamaño. Existen herramientas que permiten reducir el tamaño de las imágenes sin sacrificar o sacrificando una mínima parte de la calidad. y de este modo. página de la compañía creadora de varias herramientas de compresión. aquí podreis encontrar herramientas varias para el diseño gráfico www.Multimedia y Diseño Imágenes y Gráficos ..Compresores Gráficos). Podemos descargarnos de manera gratuita algunas. www. Estos programas permiten visualizar al mismo tiempo la imagen originaria y la optimizada.

." width="..... Aquí teneis un ejemplo (la imágen posee 2 mapas): No creo que existan muchas páginas web modernas sin imágenes. Esto no es más que una determinada zona poligonal que posee un hipervínculo. Como imagen de fondo se utilizó la imagen siguiente: Para insertar una imágen de fondo debemos modificar la etiqueta <BODY> y poner en su lugar: <body background="archivo_de_imagen"> Favoritos Al añadir una página web a "favoritos".." height=".. Pero no olvidemos que en internet "una imagen tarda más en cargar que mil palabras". el navegador automáticamente asigna un 16 ... por lo que habrá que llegar al punto medio en lo referente a imágenes y tiempo de carga. El fondo de la página En el fondo de nuestra página podemos colocar una imágen o animación." align=". Las imágenes (bien elegidas y bien colocadas) proporcionan un colorido visual impresionante. Dicho efecto puede observarse en cualquiera de las páginas de esta sección." >..." border=". la imágen se repetirá a modo de mosaico hasta llenar todo fondo (aunque este efecto se puede desactivar). Si la imágen es más pequeña que el fondo. el único parámetro que es obligatorio es src. que indica el archivo de imágen a insertar. "una imágen vale más que mil palabras"." alt=". Dentro de una imágen también podemos definir mapas o hot spot. además.src="..

Además. buscar en la sección de internet gratis cantidad de imágenes. ya que además de la tarjeta de sonido.com. que contiene el icono a mostrar.com. www.ico".tecnopolis. esto se puede apreciar en la figura siguiente.. Pero este tipo de archivos sólo contienen música instrumental. libros de firmas. pero se opta por este tipo debido a su reducido tamaño).com.com. en esta página no sólo hay imágenes. página con GIFs de temas varios. O también se puede añadir la siguiente línea dentro de las etiquetas <head></head>: <link rel="SHORTCUT ICON" href="XXXXXXXX.com. www. . y no todos los navegadores soportan su uso.todo-gratis. Para que el navegador asigne a nuestra página un icono diferente. Pero no es muy aconsejable añadir música de fondo. Curso de Diseño y Creación de páginas web: Añadir música de fondo Otro elemento multimedia que podemos incluir en nuestra página es el sonido. son archivos en formato MIDI (en realidad puede reproducirse cualquier archivo de sonido. www.ico"> Una vez añadida la página a "favoritos". también podrás encontrar muchos recursos gratuitos como por ejemplo contadores. se necesita el uso de software externo al navegador para poder escucharla. www. fondos. la inclusión de música ralentiza en exceso la carga de nuestra página.. iconos. debemos tener un archivo llamado "favicon. y 17 . imágenes y animaciones para tu página. Estas son algunas direcciones en donde podeis encontrar material: • • • • • www. estadísticas.gifmania.ciudadfutura..icono por defecto dicha página. .. La música que se reproduce. también se cambiará el icono por defecto que aparece en la barra de direcciones por nuestro icono.animfactory. un buscador poco conocido pero que posee una buenísima sección dedicada a las imágenes.

.. 18 .. 2. 3. Para insertar música en nuestra página. se debe utilizar la siguiente sintaxis HTML (justo después de la etiqueta <BODY>): <BGSOUND SRC="archivo MIDI" LOOP="nº de veces"> En la propiedad SRC pondremos el nombre del archivo MIDI (*. Esta técnica es bastante lenta y no funciona muy bien (otra razón más para no incluir sonido en nuestra página). Internet Explorer reproduce la música sin mayores dificultades.la cantidad y calidad de los instrumentos que escuchemos depende en exclusiva de nuestra tarjeta de sonido.) para reproducción contínua deberemos poner "infinite".mid) a reproducir. pero su competidor. y en LOOP el número de veces a reproducirlo (1. utiliza Java para ello. el Netscape.

com/index. Si dentro del subdirectorio "C:\PAG_WEB\FOTOS\" tenemos otro subdirectorio llamado "C:\PAG_WEB\FOTOS\ANIMACIONES\" para referenciarlo sería "\FOTOS\ANIMACIONES\". Lo mejor es crearse un directorio donde estén todas nuestras páginas web.. Esto se debe a que si nuestra página se llama "index. \scripts. los links serán simplemente el nombre del archivo. como en local para realizar las pruebas.htm".jpg". cuando queramos referenciar a un archivo dentro del directorio "C:\PAG_WEB\FOTOS\".eitig. "foto1. \sonidos. se pondrá por defecto la ruta inicial del lugar donde se encuentre. Si por el contrario tenemos en el directorio inicial "C:\PAG_WEB\" algunos archivos y dentro de un subdirectorio del inicial llamado "C:\PAG_WEB\FOTOS\" otros archivos. si todos nuestros archivos se encuentran en el mismo directorio inicial llamado "C:\PAG_WEB\". Todos los links a cualquier archivo que se encuentre en nuestro mismo dominio NUNCA incluirán la ruta del directorio inicial en donde está dicho archivo.htm". pero a la hora de poner el destino debemos tener en cuenta las rutas y los directorios. pero cuando se coloque en nuestro dominio de internet se llamará "http://www. en local se llama "C:\PAG_WEB\index. con lo que omitiendo las rutas de los directorios iniciales. ...htm".. por ejemplo "index.html". Con esto conseguiremos que nuestra página se pueda visitar de igual manera en internet.) con lo que conseguiremos una buena organización. \archivos. Por ejemplo.Curso de Diseño y Creación de páginas web: Links Principalmente existen 3 tipos de links distintos: o o o A una página web de nuestro dominio A una parte concreta de nuestra página A otra página web de otro dominio Links a una página web de nuestro mismo dominio Se deben utilizar las etiquetas: <a href="destino"> Texto o imágen que posee el hipervículo </a> En donde el atributo href apunta al destino del hipervínculo. y dentro de este directorio crear subdirectorios (\fotos. simplemente tenemos que poner "\FOTOS\". -Ir a la parte superior de la página> 19 . \estilos. "bienvenida.htm". la idea es muy sencilla. .

que no olvidemos... y desde el link que se encuentra justo debajo se la invoca utilizando <a href="#Superior">. Pero se diferencian en que ahora el destino incluye la ruta completa. siempre empieza por "http://". -Ir a la parte superior de la página> Links a páginas de otros dominios Para implementar los links a otras página web que no pertenezcan a nuestro dominio se utiliza la misma sintaxis HTML de un link a una página de nuestro dominio.Links a una parte concreta de nuestra página Para poder implementar los links a una parte concreta de una página web se utiliza un elemento llamado anchor o link interno.") hay una marca llamada "Superior". La sintaxis HTML es muy parecida a la de un link normal: <a name="nombre de la marca"> Aquí puede ir (o no) texto o una imágen </a> Y para invocarla desde un link ha de utilizarse: #nombre de la marca Aquí teneis un ejemplo: en la parte superior de la página (antes de "Curso de Diseño y . <a href="http://destino"> Texto o imágen que posee el hipervículo </a> 20 . No es más que una marca que realizamos en nuestra página web y que desde un link normal y corriente invocamos.

fijaos en la parte inferior de esta página. La mecánica es la misma que con cualquier link a una página web normal y corriente. se guarde el archivo en la máquina local de nuestro visitante. Esta orden abre el programa de correo predeterminado (Outlook. . este comando se usa de igual manera que un link normal y corriente (lo podemos poner en una foto. Una posible opción sería poner nuestra dirección de correo al final de la página y que la gente que quisiera comunicarse con nosotros la escribiera en su programa de correo.zip". Si no lo habeis visto nunca. Que nuestros visitantes puedan comunicarse con nosotros puede ser bastante útil (cada cuál decida para qué). el comando HTML no es más que un link normal y corriente en el que la dirección de destino no es más que una dirección de correo electrónico. En las imágenes observamos lo que ocurre al distribuir un archivo llamado "dblist. y como segunda opción.. pero esto no es demasiado cómodo y puede que alguien escriba mal nuestra dirección y que nunca nos llegue su comentario. está el comando HTML <a href="mailto:destinatario"> (donde pone destinatario por supuesto tendremos que poner una dirección de correo válida). 21 .) Curso de Diseño y Creación de páginas web: Distribución de archivos Básicamente hay 2 formas de distribuir archivos a nuestros visitantes: mediante HTTP o mediante FTP. Messenger o que el sea) por la pantalla que sirve para escribir un nuevo mensaje. Por tanto. La forma más sencilla de ponernos en contacto con ellos es mediante e-mail. y con esto conseguiremos que cuando se pulse sobre el enlace. texto. En una parte del texto o en una imágen añadiremos un link a nuestro archivo. Dicho mensaje ya tiene escrita la dirección del destinatario (que es la que nosotros pusimos despues de "mailto:").. Mediante HTTP es bastante sencillo.Curso de Diseño y Creación de páginas web: E-mail como links Supongo que en muchas ocasiones habreis visto páginas web en las que se puede mandar e-mail´s a sus autores o al webmaster para colaborar. dejar las críticas. El protocolo FTP es algo más complicado para nuestros propósitos. por lo que lo descartaremos. Como se puede observar. Para ello. o cualquier cosa.

hecho esto nos preguntará el directorio en donde guardarlo y listo. porque podemos provocar un repentino llamamiento a nuestras familias por parte de nuestros visitantes e incluso tener problemas legales. NOTA: comprobar antes que todos los archivos que van a distribuirse NO TIENEN VIRUS. debemos elegir la opción "Guardar en disco". 22 .Esta es la ventana que muestra el Internet Explorer: Y esta la ventana que muestra el Netscape Navigator: Una vez abierta la ventana.

23 .

Archivos: Debemos asegurarnos que todos los archivos a los que referenciamos desde nuestra página existen (otras páginas. o en subdirectorios del mismo. hojas de estilo.j. "\fotos\logo.jpg"). Links a páginas web: Este tipo de links SIEMPRE deben empezar por "http://".. imágenes. Tenemos que comprobar que hemos eliminado todas las rutas de los directorios iniciales. lo mejor es tener las páginas y todos los archivos que se utilicen dentro del mismo directorio.Curso de Diseño y Creación de páginas web: Comprobaciones finales Que nuestra página esté terminada no significa que esté lista para colocarse en internet. archivos con los Script. y que las referencias a los subdirectorios empiezan por "\" (e. con lo que nuestros visitantes (lo más seguro) volverán a visitarnos.). . Con esto crearemos una página web practicamente sin fallos. 24 .. lo único que debemos hacer es comprobar si hemos escrito bien la dirección de la página. Con esto evitaremos situaciones tan corrientes como estas: No se encuentra la imagen: Explorer Navigator No existe el archivo con los Scripts: Enlaces o links locales: Como ya se ha dicho. Antes de dar ese paso debemos hacer las últimas comprobaciones para tener la certeza de que todo funcionará correctamente.

el nombre del servidor (Host Name).register.com Una vez elegido servidor y concedido el espacio.).es") sólo se puede adquirir un nombre de dominio si dicho nombre se corresponde con el nombre de una empresa. telepolis.. Otra opción es comprar nuestro propio dominio.. y lo más importante.Curso de Diseño y Creación de páginas web: FTP Nuestra página ya está terminada y hemos realizado las últimas comprobaciones. Por ejemplo.downloads. Lo siguiente que necesitamos es un programa FTP (FTP client) para realizar la transferencia de archivos (aunque la transferencia de archivos también la puedemos hacer con nuestros navegadores de internet. recomiendo la utilización de un programa de FTP). Los programas más conocidos son CuteFTP y WS_FTP LE. . network solutions. en españa (". la velocidad de descarga. También debemos tener en cuenta la legislación del país al que pertenece dicho dominio. yahoo. Las diferencias entre unos y otros son el espacio que nos ofrecen. xoom. lo único que nos falta es colocar nuestra página en internet. como puede observarse en las imágenes. El FTP es un protocolo que nos permite transferir archivos entre ordenadores. el password. Lo primero es buscar un servidor de internet que nos permita colocar nuestras páginas (recomendable de manera gratuita aunque no es obligatorio). entre nuestro PC y el servidor de internet. CuteFTP 25 .com" suelen estar en posesión de algún particular o empresa. que se pueden descargar de manera gratuita en www.com. por lo que. Para más información o para consultar disponibilidad de dominios puede consultar www. ni siquiera se pueden adquirir dominios que coincidan con el nombre del producto que queremos publicitar. en este caso. se nos dará el nombre de usuario (User ID). Sus aspectos som muy similares al explorador de archivos de Windows 9x. ya que la mayoría de los dominios ". aunque si realmente estamos interesados.. inlanders. es algo más complicado pero es posible. Esto hoy en día eso ya no es un problema. Esto no siempre es posible.. porque cualquier portal de internet nos ofrece más o menos 5 MB de espacio gratis para nuestras páginas web (entre ellos terra. Para ello utilizaremos el protocolo FTP (File Transfer Protocol). nuestra dirección de internet. podemos realizar una oferta a su propietario. la propaganda que incorporan a nuestras páginas. todo-gratis..

Pero WS_FTP LE de IPSwitch. pero lo normal es que la primera página que se va a abrir es la página llamada "index. Llegado a este punto se nos plantea una pregunta: ¿cuál es la primera página que se va a ver un usuario al teclear nuestra dirección?. deberemos cambiarla el nombre (y corregir todos los links que la apunten). porque al final. los dos hacen lo mismo.. Cada servidor suele variar algo su política.htm". Dentro de nuestro programa de FTP pondremos los datos y este se conectará con el servidor (si los datos son correctos). .. copiar archivos. Una vez conectados. además de ser bastante larga y 26 . la mecánica es la misma que con nuestro disco duro. teclearemos la dirección que nos dijeron y daremos una vuelta a ver que pasa.). Para comprobar si hemos hecho todo correctamente.htm" o algo por el estilo. es mucho más gráfico y amigable. además de poseer asistentes y la típica ventana inicial con los trucos del día. borrar archivos. por lo que si nuestra página inicial se llama "principal. NOTA: la dirección que nos suelen proporcionar hace publicidad al portal. haremos lo que queramos con nuestros archivos y con nuestro espacio en el servidor (crear directorios. Cada cuál que elija el que más le guste.WS_FTP LE Cute FTP de la compañía GlobalScape. consume menos recursos máquina.

pagina.. existen más como: www. algo que os recomiendo encarecidamente y que vuestros visitantes agradecerán. www.de.de/mi_pagina) y desde ahí llevará a nuestros visitantes a la dirección que nosostros digamos (usuarios. Y se plantea otro problema: el nombre que queremos dar a nuestra página no siempre está libre (hay que tener en cuenta que no somos los únicos con página en internet).pagina.easy.es/mi_pagina.). members.xoom.com. siempre que no esté elegido por otro usuario (www.com/mi_pagina. Para evitar esto.gratix.. ..de que nos permite dar el nombre que queramos. existe el servicio de redireccionamiento automático como por ejemplo: www. Este servicio no sólo lo realiza www.es/mi_pagina). .. 27 .to/remember.complicada (usuarios.terra.terra.pagina.

Estas vistas nos permitirán. y a esa tabla la dividimos en filas y columnas.. fijar en una de ellas el índice. una página web con frames. podemos crear las combinaciones que queramos.. pero no 28 . Estas suelen ser las combinaciones más usuales. Y uno inferior donde se muestran los temas pertenecientes al contenido seleccionado (este marco posee barra de scroll). no es más que un pequeño fragmento en HTML que carga una página web en cada una de las vistas que hayamos definido. Pero no hay límite.Curso de Diseño y Creación de páginas web: Frames Los Frames nos permiten presentar en una página múltiples documentos en diferentes vistas.*"> <frame name="topFrame" scrolling="NO" src="Contenidos. • Lo que hacemos es dividir la pantalla como si se tratase de una tabla.htm"> </frameset> Y las 2 páginas que se van a mostrar en el marco superior e inferior (Contenidos. el logotipo. En realidad. . Esto se puede ver en el ejemplo: La página principal de EITIG posee dos marcos: • • Uno superior donde van colocados los contenidos y el buscador.htm" > <frame name="mainFrame" src="Indice.htm e Indice.htm). Para conseguir esta visualización necesitamos 3 páginas HTML: • Una para definir los marcos que vamos a tener en pantalla. por ejemplo. A cada celda le decimos (mediante la propiedad src) que página tiene que mostrar. Este sería más o menos el código HTML que incluiría dicha página: <frameset rows="80. mientras que en la otra mostramos el contenido seleccionado.

largo y ancho. su color o imagen de fondo.. cambiar su posición en pantalla. Esta es la segunda capa Curso de Diseño y Creación de páginas web: Capas (Draw Layer) Una capa no es más que un contenedor HTML. 29 . . podemos crear unos efectos visuales muy interesantes utilizando poco código: como ocultar/mostrar una capa (que ocultaría a todos los elementos contenidos en esa capa). Si quereis contemplar las posibilidades que ofrecen las capas con vuestros propios ojos..debemos olvidar que en cada vista se carga una página y excesivas vistas pueden ralentizar sobremanera el sistema. Esta agrupación nos permite tratar a todos los elementos como si fueran un todo.ciudadfutura. La tercera dimensión (la coordena Z o zindex). es decir mediante coordenadas X. es decir. Y. este portal tarda un poco en cargar. Una capa de orden superior ocultará a otra de orden inferior. Z. y gracias a eso. un elemento que agrupa a otros elementos. os recomiendo visitar: • • • Otra sección de EITIG.com. El posicionamiento absoluto tiene un inconveniente: la resolución de la pantalla. define la superposición de las capas. pero posee unos menus con transiciones a la hora de abrirse y cerrarse francamente buenos Las capas se posicionan en la pantalla de manera absoluta. lo más web La página principal de esta sección www.

Una capa puede contener cualquier cosa. una capa es un contenedor. pero al pasar el ratón sobre el texto "Mostrar" se muestra. los navegadores automáticamente activan el scroll de pantalla. por ejemplo texto.Una capa colocada en unas determinadas coordenadas. pero no hay limitaciones respecto al contenido. pero las capas que utilizan las etiquetas LAYER e ILAYER sólo las soportan las versiones superiores. Internet Explorer 4.0 soportan a la perfección las capas creadas con DIV y SPAN. imágenes. applets e incluso otra capa. Aquí teneis un ejemplo de utilización de capas: tenemos 2 capas (Layer1 y Layer2) ambas situadas en las mismas coordenadas pero con distinto z-index. Las capas se definen normalmente mediante las etiquetas DIV o SPAN (pero existen otras formas como las capas CSS y las capas de Netscape utilizando LAYER e ILAYER). la segunda capa no es visible. ocultando por su situación en el eje Z a la primera capa.0 y Netscape 4. si la resolución con la que se visualiza la página es más pequeña que la resolución con la que la diseñamos (por ejemplo 640 x 480) puede quedarse fuera del ángulo de visión. Para evitarlo. 30 . Como se ha dicho. plug-in´s. Al alejarse el ratón del texto "Mostrar" se vuelve a ocultar la segunda capa.

css"> Y dentro del archivo "archivo. Los estilos pueden definirse o modificarse poniendo los parámetros en la etiqueta: <p><font size="7" face="Arial" color="#CCCCCC"> Aquí va el encabezamiento </font></p> El texto anterior se visualizaría en color #CCCCCC. FONT-COLOR="#CCCCCC" } --!> 31 . Para evitar este problema. nos pasaría lo mismo que cuando los definíamos etiqueta a etiqueta en una misma página. que en el caso del Explorer y del Navigator son distintos. Si no se especifica el estilo. Una práctica muy usual consiste en definir los estilos en un archivo aparte y cargar los estilos de ese archivo en cada página (a estos archivos se les denomina Hojas de Estilo en Cascada). FONT-SIZE=7. como puede verse a continuación: Aquí va el encabezamiento Pero el problema que presenta es que si queremos cambiar alguno de los parámetros. Para cargar el archivo de estilos debemos poner: <link rel="stylesheet" href="archivo. <STYLE> P { FONT-FAMILY=Arial. se visualizará con el estilo que nosotros hemos definido y no con el estilo por defecto. se redefinen los estilos para cada etiqueta. el navegador pondrá uno por defecto. FONT-SIZE=7. Cuando quisieramos modificar el estilo de todas. debemos cambiarlo etiqueta a etiqueta por toda la página. con un tamaño de 7 y con tipo de letra Arial. FONTCOLOR="#CCCCCC" } </STYLE> En el caso en que tuvieramos varias páginas y en cada página definieramos el estilo.css" tendríamos: <!-P { FONT-FAMILY=Arial. Así cada vez que se encuentre esa etiqueta dentro de la página.Curso de Diseño y Creación de páginas web: CSS (Cascade Style Sheet)) Los estilos constituyen la forma de definir el aspecto de una etiqueta HTML dentro de una página web.

. alguien antes que nosotros se dio cuenta de este problema. que a pesar del colorido.. Un efecto muy vistoso consiste en redefinir el aspecto de los hipervínculos para que al pasar el ratón por encima se subrayen y al quitar el ratón desaparezca el subrayado (como se hace en esta página). script en JavaScript o en VBScript. y lo más importante. por ejemplo la orientación del papel de la impresora.. las demás páginas web que estén abiertas en ese momento se quedarán temporalmente colgadas. Pues bien. Java: Java es un lenguaje de programación orientado a objetos de propósito general creado por la compañía Sun Microsystems. el navegador no responde. JavaScript y VBScript Una vez que hayamos creado nuestra página web. ejecuta. que 32 . el espacio de pantalla para representarlo. nuestra página es totalmente estática.. Personalmente no recomiendo la insercción de applets dentro de una página web porque mientras se está cargando/interpretando el applet. y como es típico del HTML acompañado de parámetros tales como el nombre de la clase. Para poder insertar el applet dentro de nuestra página ha de estar comprendido entre 2 etiquetas: <APPLET></APPLET>. Dentro de este lenguaje disponemos de una clase especial llamada "applet" que implementando sus métodos conseguimos realizar un subprograma Java que nuestro navegador entiende. Existen mayoritariamente 3 formas o 3 lenguajes para crear algo de interactividad en nuestra página: applets (en Java).Pero las CSS nos permiten definir mucho más. nos daremos cuenta. Además. el gran inconveniente de Java es su lentitud. la hoja de estilo es la siguiente: <!-a :link { text-decoration: none } a :hover { text-decoration: underline } --!> Curso de Diseño y Creación de páginas web: Java. A modo de nota mencionaré también un programa llamado Flash de la compañía Macromedia que empieza a convertirse en una seria alternativa a los lenguajes Script. las propiedades de las celdas de una tabla. las animaciones y los gráficos (que dan más o menos vistosidad). y por tanto.. que se solucionó de una forma muy simple: programando. .

No hay que compilarlo ni linkarlo. lista para usar: <script language=JavaScript> // Esta función muestra en la barra de la ventana el texto introducido como parámetro function mensaje(texto){ status = texto } </script> Adjunto un MANUAL para quien quiera aprender este lenguaje. JavaScript al ser un lenguaje de Script. Pero hoy en día está integrado en casi la totalidad de navegadores de internet del mercado (la implementación de Microsoft en el IE se llama JScript y difiere ligeramente de JavaScript). JavaScript fue desarrollado por Netscape para añadir interactividad a las páginas web con su navegador de internet. validar los datos. Puede que al navegar por alguna página web lo hayamos visto. moverlas. el código se embebe dentro del código HTML de las páginas web. Es aconsejable utilizar JavaScript (que es más rápido) y para tareas que no se puedan implementar en JavaScript utilizar Java. Como fue desarrollado por Netscape..com. que se pase por www. Existen infinidad de links interesantes. escribir mensajes en la barra de estado. simplemente con el mismo block de notas de Windows podemos escribir código Script. os remito a la sección de Programación Orientada a Objetos que posee eitig. Hay que decir que es el lenguaje más utilizado en internet para añadir interactividad a las páginas web.se compensa por su portabilidad.com.spygots. www. aunque es recomendable utilizar alguna herramienta que nos ayude sobre todo a la hora de depurar errores (como puede ser la que se ofrece con Microsoft FrontPage). su navegador (Netscape Navigator) era el único que lo reconocía. Merece la pena ver la intro. implementar un reloj. No necesitamos ninguna herramienta especial para programar en JavaScript. Aquí teneis una de función muy útil. otra de mis páginas personales.. Pese a que JavaScript posee una sintaxis muy similar a Java. sino que el mismo navegador de internet se encarga de interpretarlo.. POO. dispone de código DHTML y Scripts gratuitos. Muy 33 . . pero no nos hayamos dado cuenta.bratta. Se utiliza sobre todo para cambiar las imágenes al pasar el ratón encima. JavaScript: No hay que confundir JavaScript con Java. . entre ellos: • • lo más web.. Y para aprender más sobre Java. NO ES JAVA. Si alguien quiere ver los applets en acción.

costasol. www.com • • • • • • • • • VBScript: El lenguaje VBScript es el intento por parte de Microsoft de adentrarse en el negocio de los lenguajes de Script.com/tips/javascript. www. webreference. sección de Microsoft dedicada a la tecnología Script. cantidad de código listo para usar.recomendable • developer.netscape. pero su sintaxis por fuerza.com/programming/javascript.jsworld.htm. Como nota hay que decir que fue el lenguaje utilizado para programar el famoso virus "I love you".netscape.. página de la compañía sobre el lenguaje VBScript.microsoft. incluye muchos trucos para diversos lenguajes. pero ahora creo que Netscape 6. Aquí se podran encontrar manuales de todas las versiones disponibles del lenguaje y también de HTML y DHTML de Netscape. pasó un poco como al principio con JavaScript. Se tomó la sintaxis del programa de la casa: el Visual Basic. Al ser de Microsoft. Links: • • • www. página con las últimas novedades sobre las tecnologías de internet 34 .htm.com/vbscript. esta es la página personal de un famoso programador en JavaScript. ww. apodado el apostol de JavaScript.dannyg.0 también lo soporta. aquí hay gran cantidad de código listo para utilizar. página para los desarrolladores en JavaScript. .com para que el Navigator soporte su uso. explicaciones del código. tanega. documentación oficial y tutorial de Microsoft.htm. código y links. Su propósito es el mismo que el de JavaScript. sólo lo reconocía el Internet Explorer.. msdn.com.com. es distinta.com/scripting.com/java/library.microsoft. esta página contiene cantidad de enlaces y recursos del lenguaje. aunque existe un plug in que se puede conseguir en www.solutionsiq. www.html.chami.javascripts.com/home-default. techzone. página repleta de Scripts gratuitos.com/javascript.com/vbscript/us/vbstutor/vbstutor. trucos de JavaScript www. la página de Guille.gamelan.com. guille. www.microsoft.html. además de unos manuales con bastante ejemplos.net/indice_cf.

si nuestro archivo se llama rutinas. se utilizan las etiquetas HTML que indican que es un comentario (<!--.infodial. //-->).js. o dentro de la cabecera.js" > </SCRIPT> Y dentro del archivo rutinas.net/infohelp/htms/vbscript. contiene ejemplos y documentación. Con esto conseguiremos que si el código se trata como HTML no salga en pantalla. tendríamos la siguiente plantilla: <SCRIPT LANGUAGE="JavaScript"> <!-Aquí insertaríamos nuestro código JavaScript //--> </SCRIPT> La verdad es que no existe un convenio claro sobre en qué parte de la página web hay que colocar el Script. www.• • msdn. Por ejemplo. debemos indicar al navegador que el texto que está recibiendo es una rutina en Script que debe interpretarse y no texto a mostrar en pantalla. el ejemplo quedaría de la siguiente manera: <SCRIPT LANGUAGE="JavaScript" src="rutinas. Otra práctica bastante extendida es colocar nuestras funciones en un archivo de texto (pero con extensión . Lo que se suele hacer en colocarlo entre el final de la cabecera y el cuerpo.microsoft. Con lo que a la hora de codificar un Script.com/scripting.js) y desde la página HTML llamarlo. sección de Microsoft dedicada a la tecnología Script. pero además debemos indicar en qué lenguaje está escrito para facilitar la labor de interpretación (aunque por defecto se toma JavaScript).htm.js: <!-Aquí insertaríamos nuestro código JavaScript 35 . esto se hace: <SCRIPT LANGUAGE="JavaScript"></SCRIPT> Para evitar que los navegadores que no soporten JavaScript o tengan desactivada esa opción muestren el código en pantalla como si se tratase de texto normal y corriente. Esto se realiza mediante las etiquetas <SCRIPT></SCRIPT>. Curso de Diseño y Creación de páginas web: Insertar código Script Como JavaScript se embebe dentro de código HTML.

y por tanto. Las Cookies o "galletitas" se crearon con el propósito de solucionar este problema. manda al servidor esta información con cada petición que le solicitemos. Nuestro navegador (en el caso de que soporte el uso de Cookies).. . 36 . . en el caso que no exista una Cookie en el cliente. y el servidor con esta información realiza las acciones correspondientes. o las funciones de mostrar/ocultar capas. ni tampoco recolectar información sobre las operaciones que realizó el mismo (la problemática es similar a la de los autómatas de Moore y Mealy).com Curso de Diseño y Creación de páginas web: Cookies Uno de los problemas que presenta el protocolo HTTP (HyperText Transfer Protocol) es que no posee estado o memoria. no se pueden guardar ningún tipo de dato en la máquina cliente.. la lista de deseos.. también sirven para recoger el número de veces que hemos visitado la página. © Copyright eitig. empresas favoritas. nuestro signo del zodiaco.. se guarda una Cookie con información sobre nuestra ciudad. la hora de nuestro ordenador. Simplemente son archivos de texto normales y corrientes que se guardan en la máquina cliente y que almacenan fragmentos de información. Uno de los usos más extendidos es el de personalizar portales.. Este portal. La siguiente vez que visitemos el portal nos sorprenderemos al darnos cuenta que pone: "Bienvenido XXXXX". además de la información meteorológica de nuestra ciudad. Cuando nos registramos. manda una página inicial para que nos registremos. almacenando la lista de la compra..//--> Con esta práctica conseguiremos reutilizar de una manera más sencilla rutinas tan comunes como la de escribir mensajes en la barra de estado del navegador. como por ejemplo Telepolis. nuestro horóscopo y la cotización de nuestras empresas en bolsa. Pero no sólo sirven para personalizar. Veamos el ejemplo de Telepolis. .com 1999-2000 Resolución recomendada: 800 x 600 webmaster@eitig. y también se utilizan en páginas de comercio electrónico.

pasados X días o en una fecha concreta. además. fecha de expiración. esta Cookie no se almacenará en disco. // Esta función guarda un valor en una Cookie y pone la fecha de expiración // Para crear Cookies temporales dejar caducidad sin valor // El parámetro caducidad se expresa en milisegundos. la Cookie expirará al terminar la sesión. borrar todos los blancos y volved a poner la tabulación. Aunque las más utilizadas son valor y fecha de expiración. function guardarCookie ( nombre. Las Cookies se guardan junto con un número único de sesión (esto lo hace automáticamente el sistema) para que no se sobreescriban al entrar en una página distinta y también. para que pueda ser reenviada a su página de procedencia la siguiente vez que entremos en ella. caducidad) { 37 . la Cookie desaparecerá. Semi-permanentes son aquellas que sí tienen especificada la fecha de expiración. los navegadores permiten configurar el equipo para que no utilice Cookies. El problema que presenta el uso de Cookies es que no todos los navegadores las soportan (depende del navegador y de la versión). valor. dominio. Lo normal es que las Cookies utilizadas para personalizar páginas web sean semi-permanentes y que nunca caduquen. puede que de problemas la tabulación.Las Cookies poseen varias propiedades: valor. Según la fecha de caducidad. las Cookies se clasifican en 2 tipos: Temporales y Semipermanentes. Para expresarlo en días: 1000 * 60 * 60 * 24 * nº de días. • • Temporales son aquellas Cookies que no poseen fecha de expiración. NOTA: Si se copia al portapapeles el código directamente del explorador. una vez superada la fecha. Dependiendo del modo en que se defina esta fecha. En ese caso. Aquí teneis código en JavaScript de manejo de Cookies (descargar un ejemplo de utilización de Cookies). path y secure. ya que se sustituye por espacios en blanco.

getTime() + caducidad). valor = document. caducidadAux. // compruebo que exista la Cookie if ( document.setTime (caducidadAux.cookie = nombre + "=" + valor + ".cookie ) { // compruebo que "nombre" tiene asignado algún valor pos = document. expires=" + caducidadAux.cookiecentral. } } // Elimina la Cookie asignándola una fecha atrasada function eliminarCookie ( nombre ) { document.cookie.substring( posIni.indexOf( nombre ). Página con mucha información y links sobre Cookies.". } else { document.yahoo.". pos ) + 1. expires=Friday. if ( pos != -1 ) { // recupero el valor de "nombre" y lo guardo en "valor" posIni = document. merece la pena visitarla.cookie. posFin es el final de la Cookie if (posFin == -2) posFin = document.length.indexOf( "=". posFin = document.com/Computers_and_Internet/Internet/World_Wide_Web/Cookies. } Para más información: • • dir. document.toGMTString() + ".". devuelve la cadena vacía function recuperarCookie ( nombre ) { valor = "".if ( caducidad ) { caducidadAux = new Date(). // si "nombre" es la ultima variable. pos ) .cookie = nombre + "=" + valor + ".1.cookie. 2-May-80 00:00:00 GMT". } // Devuelve el valor de "nombre" almacenado en la Cookie // Si "nombre" no existe.cookie = nombre + "=NULL. } } return valor. www.cookie.com.indexOf( ". 38 .cookie. La sección dedicada a Cookies de Yahoo. posFin ).

que es el lenguaje de Script que desarrolló Microsoft para su Internet Explorer.5. en la actualidad se encuentra por la versión 5.6 JavaScript 1.0 JavaScript 1.1 Navigator 4.0 JavaScript 1.com Curso de Diseño y Creación de páginas web: Problemas con los navegadores El principal problema que nos encontraremos a la hora de desarrollar rutinas en JavaScript.5.0 JavaScript 1. es que no existe una única implementación de este lenguaje.com 1999-2000 Resolución recomendada: 800 x 600 webmaster@eitig. desarrollado por Netscape.2 Navigator 4.0 JScript 5 Explorer 5.5 39 . El JavaScript originario. que se encuentra por la versión 1. sino que existen diferentes implementaciones y diferentes versiones de cada implementación.5 Explorer 3.0 JScript 3 Explorer 5. Navegador Versión Navigator 2.© Copyright eitig.3 Navigator 6.0 JavaScript 1. Las implementaciones son: • • JScript.0 Navigator 3.0 JScript 1 Explorer 4.5 JScript 5.

Lo que se suele hacer es introducir dentro del código Script un "IF" que chequea el navegador que se está utilizando. Algunas de las características de JScript son: • • • • Es totalmente compatible con el estándar ECMAScript (estándar de unificación en torno al los lenguajes de Script) No es Case Sensitive Permite el uso de la tecnología ActiveX Ofrece más información sobre el navegador que está visualizando la página web Resumiendo. y utilizar en función del mismo. el código que funcionaba con una versión anterior del lenguaje. por la naturaleza de este lenguaje. es practicamente imposible generar código 100% compatible con ambas implementaciones.Cada versión mantiene perfectamente la compatibilidad con las versiones anteriores (al menos eso aseguran las respectivas compañías).all != null) { capa. Como ejemplo esta función para ocultar capas de un documento: // Esta función oculta la capa introducida como parámetro function ocultar(capa){ if (ns && document. funcionará sin problemas en una versión más reciente. que eran aplicaciones 40 .style. totalmente estáticas. es decir.com Curso de Diseño y Creación de páginas web: ASP (Active Server Pages) Hagamos un poco de memoria: en un principio sólo existían páginas web escritas en HTML.visibility='hide' } else if (document.com 1999-2000 Resolución recomendada: 800 x 600 webmaster@eitig. A continuación llegó el CGI (Common Gateway Interface).layers != null) { capa. una sintaxis u otra.visibility='hidden' } } © Copyright eitig.

y esta aplicación nos devuelve como resultado una nueva página web que incluye los resultados de dicha consulta. la hora. sino un sencillo código Script que nos va a permitir controlar todo lo que ocurre en el servidor y construir páginas dinámicas. El lenguaje VBScript para servidor o ASP actúa de manera parecida a una aplicación CGI. nuestra aplicación CGI devolvía una página distinta en función del usuario que la estuviera consultando. En resumen. La principal ventaja que aporta la programación ASP es la sencillez y la comodidad. ahora es el servidor quien se ocupa del trabajo. no sólo por el simple hecho de poder implementar nuevas funciones como buscadores. nuestra misión únicamente consiste en escribir rutinas en Script. Sin este tipo de tecnología. disponemos de unas rutinas en el servidor que permiten realizar páginas dinámicas en función de los parámetros que le hayamos introducido a la rutina. y en función de los parámetros que tenía previamente establecidos y los valores que se le hubiesen suministrado la máquina cliente. . la página HTML final que le llega al usuario es totalmente estática (a menos que insertemos JavaScript. Con esto se lograba que las páginas de internet dejaran de ser estáticas para convertirse en dinámicas.. a la hora de programar en ASP no hay que olvidar que todas las operaciones que se van a realizar. su funcionamiento es totalmente transparente para el programador. Por lo tanto. sino cosas más sencillas. no sería viable su puesta en marcha. Esta aplicación recibía peticiones como si se tratase de una página HTML normal. Ventajas respecto a la programación CGI: La programación CGI se realizaba en lenguajes como C++ o Perl. una página ASP es un archivo dentro de nuestro servidor de internet. Simplemente constan de una aplicación que se conecta a una base de datos para realizar la consulta que le hayamos solicitado. pero la mejora que introduce radica en que la aplicación ya no es un programa ejecutable. . y no siempre estaban bien resueltos problemas como el 41 . compuesto por una mezcla de HTML y Scripts (que se ejecutarán en el servidor). Pero no nos confundamos. La funcionalidad que podemos dar a nuestras páginas es impresionante. applets o VBScript). . es decir.. el concepto de buscador jamás existiría. devolvía como resultado una página HTML. introducir propaganda que cambie cada vez que se visite la página.. Presentando además la dificultad añadida de aprender dichos lenguajes.. foros. o por lo menos. como por ejemplo cambiar los hipervínculos de una página si en nuestra empresa tenemos en varios servidores nuestras páginas web (algo típico en servidores de intranet). Un ejemplo típico de este tipo de tecnologías lo representan los buscadores de internet. que es la que recibe el usuario. Estos Scripts procesarán los datos provenientes del cliente y generará una página HMTL como resultado que posteriormente se enviará a dicho cliente.. había que compilar y linkar. que en la mayoría de los casos. pero aunque sige existiendo un programa.externas que se ejecutaban en el servidor.. el día. se van a efectuar SIEMPRE en el servidor y NUNCA en la máquina cliente. y esta devuelve una página web normal y corriente. Es decir.

com 42 . Requisitos: Estos requerimientos son muy distintos a los del usuario final.. NOTA: Existe una versión de desarrollo (Personal Web Server 4) para Windows 9X y para Windows NT Workstation. © Copyright eitig. Access). pero se pierde a la hora de ejecutarlo).com/vbscript. se interpreta (con lo que se ahorra el tiempo de compilación y linkado. el control del sistema. www. El aprendizaje de este lenguaje es bastante simple (muy similar a Visual Basic). página de la compañía sobre el lenguaje ASP. SQL Server.microsoft.0 o Windows 2000 server con el servidor de internet Microsoft Internet IIS 3.microsoft.com 1999-2000 Resolución recomendada: 800 x 600 webmaster@eitig.solutionsiq. Se necesita el sistema operativo Windows NT 4.htm. página con las últimas novedades sobre las tecnologías de internet. ASP soluciona estos problemas. la corrección de los errores es más simple. Para más información: • • • www. código y links.htm. techzone.0.com/home-default. ofrece un control muy bueno sobre el sistema y el acceso a bases de datos es compatible con ADO y ODBC (garantizándonos así el acceso a bases de datos como Oracle. orientada para la realización de pruebas con un servidor distinto al de internet. .com/vbscript/us/vbstutor/vbstutor.acceso a bases de datos. documentación oficial y tutorial de Microsoft..