Anda di halaman 1dari 44

Curso de Diseo de Pginas Web

Curso de Diseo y Creacin de pginas web

rimeros pasos: tanteando el terreno


El lenguaje HTML Partes de las que se compone una pgina web Elementos bsicos Herramientas para su creacin Los distintos Navegadores

iseo

Diseo web, ajustes en pantalla y colores Imgenes y animaciones. El fondo de la pgina Aadir msica de fondo

ginas, archivos y links


Links E-mail como links Cmo distribuir a nuestros visitantes archivos

emos terminado?

Comprobaciones finales Colocar nuestra pgina en internet: FTP

onceptos avanzados

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

ar vida a nuestra pgina


Java, JavaScript y VBScript Insertar cdigo Script dentro de nuestra pgina HTML Cookies JavaScript y los problemas con los navegadores

Curso de Diseo y Creacin de pginas web: El Lenguaje HTML

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

Simplemente aqu se dan unas nociones elementales sobre qu es realmente una pgina web y en qu consiste dicho lenguaje. Una pgina web no dista mucho de cualquier programa que podamos tener en nuestro ordenador, es decir, una pgina 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 da un ordenador es incapaz de entender el lenguaje humano, se tuvo que buscar un lenguaje sencillo y potente para la creacin de pginas 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 pgina web, as como sus partes. La idea es muy sencilla: cualquier cosa que se represente en una pgina web (texto, imgenes, ...) 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 smbolos ( < >). Y para denotar la segunda etiqueta </>. De esta manera el ejemplo quedara: <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 ingls. Por ejemplo, una tabla se representa con

<TABLE></TABLE>. Por lo tanto, las pginas web son un fichero de texto en el que se incluyen una serie de etiquetas que definen zonas, formatos y caractersticas de los elementos que contienen y que, posteriormente, el navegador se encarga de traducir a un formato grfico, que es lo que finalmente vemos en pantalla. A continuacin presentamos un fragmento de cdigo HTML de una pgina web.

Como se puede observar, aparecen algunas palabras extraas. Es la representacin de las tildes, que se realiza mediante el smbolo "&" seguido de la letra que queremos acentuar (a, e, i, o, u) y seguido de "acute;". Por ejemplo, si queremos acentuar la "a" se realizara de la siguiente manera: &aacute; Es importante que no olvidemos poner el punto y coma al final; con Internet Explorer no es necesario, pero con Netscape Navigator s. Pese a que las ltimas versiones de los navegadores admiten poner las tildes directamente, su representacin se realiza as debido a que las primeras versiones de los navegadores no las admitan. Otra representacin extraa es &nbsp; que indica que no hay nada, pero que ha de representarse en pantalla. Esto es til cuando se quiere mostrar una celda vaca dentro de una tabla, una lnea en blanco, ... Tambin se aprecia que las etiquetas se pueden combinar. Por ejemplo, si queremos escribir un texto en negrita y cursiva, tendremos que poner las etiquetas correspondientes a una lnea de texto (<P></P>, P de prrafo), la etiqueta de negrita (<B></B>, B de bold, que significa negrita en ingls) y la etiqueta de cursiva (<I></I>, I de italic, que significa cursiva en ingls), lo que resultara: <P><B><I>Hola, bienvenidos al curso</I></B></P>

Pero esta representacin mediante etiquetas del HTML presenta algunos "huecos", a modo de ilustracin, cmo indico que el texto sea de un determinado tamao?. Pues bien, las distintas propiedades que tenga el elemento tambin van dentro de la primera etiqueta. En el caso del texto sus propiedades son el tamao, el tipo de letra, la alineacin, el color, ... <P size=1 align=left face=Arial>Hola, aqui va el texto</P> Al igual que el resto de los elementos, la pgina web se representa entre 2 etiquetas, stas son: <HTML></HTML>, por tanto si el cdigo de nuestra pgina web no incluye estas 2 etiquetas, la pantalla aparecer en blanco. Pero una pgina web no son slo los elementos que vemos, tambin existen otros elementos que no apreciamos, como pueden ser el ttulo, el autor, su contenido, ... estas partes se vern ms adelante. Pero como hemos mencionado anteriormente, no es necesario saber HTML, ya que las herramientas de creacin de pginas web pondrn el HTML por nosotros. Lo nico que tendremos que hacer es disear nuestra pgina tal y como se ver en pantalla y la herramienta har el resto.

Curso de Diseo y Creacin de pginas web: Partes de una pgina

Como ya hemos visto, toda pgina web debe estar encerrada entre las etiquetas <HTML></HTML>, que indican al navegador que el documento que se est recibiendo se tiene que visualizar como un documento de internet. Bsicamente, una pgina web la forman 2 partes: cabecera y cuerpo. En la cabecera, compuesta por las etiquetas <HEAD></HEAD> que se colocan a continuacin de la etiqueta <HTML>, se definen todas las caractersticas relacionadas con la pgina. Estas caractersticas son: su ttulo, su autor, el contenido, palabras clave, ... principalmente utilizaremos el ttulo y el autor. Pero la mayora de estas caractersticas no se representan en pantalla, excepto el ttulo, que los navegadores lo incorporan al ttulo de la ventana, como muestran las imgenes.

El resto de las caractersticas se suelen representar mediante las etiquetas <META ----->, aqu teneis unos ejemplos: <meta http-equiv="Content-Type" content="text/html"> <meta name="keywords" content="eitig,informatica,segovia,programacion,domingo,soto,universidad,facultad" > <meta name="description" content="EITIG.COM Web Independiente"> <meta name="Author" content="Sergio Cullar"> En el cuerpo de la pgina, encerrado por las etiquetas <BODY></BODY> y situado inmediatamente despus de la cabecera, se definen todos los elementos que contiene la pgina web, es decir, aqu insertaremos el cdigo HTML de todos los objetos que aparecen (o no) en pantalla. Como ejemplo, una pgina web tipo sera: <HTML> <HEAD> <TITLE>Ttulo de la pgina</TITLE> <META NAME="Author" CONTENT="Sergio Cullar"> </HEAD> <BODY> Este mensaje est dentro del cuerpo del documento. </BODY> </HTML> Observandose en pantalla lo siguiente:

Curso de Diseo y Creacin de pginas web: Elementos bsicos

En las imagenes podemos ver las barras de herramientas del FrontPage Express y del Netscape Composer, que incluyen ms o menos los mismos elementos, y que se consideran los elementos ms bsicos e imprescindibles que incluye una pgina web.

Estos elementos son bsicamente: Texto y todas sus propiedades: color, tamao, tipo de letra, cursiva, subrayado, negrita, justificacin, indentacin, ... Imgenes. Sus propiedades son: el nombre del archivo donde est contenida la imagen, su altura, su anchura, su justificacin, la anchura del borde y la forma en que se alinear el texto con relacin a la imagen. Tambin poseen una propiedad llamada alt: al poner el cursor encima de la imagen, saldr un recuadro de color amarillo con el texto que hayamos escrito. La imagen puede ser esttica (una simple foto) o una animacin (casi siempre un archivo en formato GIF). Tablas. Las propiedades son: el nmero de filas y de columnas, su justificacin, la alineacin del contenido de una celda, el color o imagen fondo, la anchura del borde. Hipervnculos o enlaces o links. Es una propiedad especial que se aplica al texto o a las imgenes. Consiste bsicamente en que al hacer click con el ratn sobre el objeto que posee esta propiedad, entramos automticamente en la direccin web que le hayamos indicado previamente. Para distinguirse mejor, el navegador conmuta automticamente la forma del puntero de una flecha mano . a una

Objetos de formularios. Estos objetos no son tan corrientes como los anteriores, son ms bien propios de cualquier aplicacin Windows. Estos objetos son botones, casillas de verificacin, listas desplegables, cuadros de texto, ...

Curso de Diseo y Creacin de pginas web: Herramientas

Ante la avalancha de e-mails recibidos, dentro de unos meses se aadirn cursos prcticos sobre las distintas herramientas que aqu se describen. Las herramientas de creacin de pginas web o editores de pginas web, fueron concebidas con el propsito de evitar al desarrollador un conocimiento exhaustivo del lenguaje HTML y una ayuda para el diseo de nuestra web. Su apariencia es prcticamente igual a la de cualquier editor de textos. Lo nico que debemos hacer es escribir en pantalla, elegir el tamao, el color, la apariencia del texto, ... dibujar tablas, insertar imgenes, guardar los cambios y ya tenemos lista nuestra pgina web. Las herramientas constituyen la mejor manera de desarrollar una pgina web ya que nos evitan tener que codificar en HTML, y mediante un intuitivo interface grfico iremos construyendo nuestra web sin escribir ni una sola lnea de cdigo. Adems, mientras estamos desarrollando, tendremos una visualizacin prcticamente igual a la visualizacin final en un navegador de internet. Las ms destacadas son: Dreamweaver (de Macromedia) Sin duda es la mejor de todas, aunque a primera vista puede parecer algo complicada, ya que su apariencia se desmarca del estndar Windows. Pero es, sin lugar a dudas, la ms completa: minimiza el cdigo HTML que inserta en la pgina, maneja a la perfeccin las capas y controla todos y cada uno de los parmetros y opciones de cada elemento (incluyendo CSS). Est pensada para profesionales y muchas de las opciones que incorpora nos vendrn grandes al principio (como comprobacin automtica de links, mapa de nuestra pgina, ...), pero eso no significa que no podamos usarla. Tambin incorpora de serie unos efectos visuales en JavaScript bastante tiles (entre los que se incluyen las imgenes que cambian al pasar el ratn por encima y los llamados Timelines). ste es el aspecto que presenta su editor.

Puedes descargarte una versin de prueba en www.macromedia.com (slo funciona durante 30 das, pasado este tiempo, se desactivan algunas de sus opciones). Hot Metal Pro (de SoftQuad) Hot Metal Pro es el rey destronado. Antes de la llegada al mercado de Dreamweaver, era la herramienta preferida por los desarrolladores. Complicada en un principio por la gran cantidad de opciones que posee, pero muy familiar gracias a la apariencia estndar de cualquier aplicacin Windows. Su calidad es muy alta pero incorpora menos opciones que el Dreamweaver, factor que determin su cada del puesto de honor. Una de las opciones que ms nos llam la atencin y que ninguna otra herramienta que conozcamos posee, es que permite controlar la repeticin de la imagen del fondo de la pgina, pudiendo repetirse por toda la pantalla, bien en horizontal, bien en vertical, o que no se repita (adems de poder definir las coordenadas iniciales y finales). En la imagen puede observarse su editor.

FrontPage 2000 (de Microsoft) El FrontPage 2000 se incluye junto al paquete Microsoft Office 2000, con lo que seguramente ya lo tengamos instalado en nuestro ordenador. Es bastante sencillo de usar: combina 3 pestaas en su parte inferior que 8

permiten conmutar la visin de nuestra pgina (desarrollo, HTML y dentro del navegador de internet). til para nuestros comienzos, pero se quedar corto en muchos aspectos cuando queramos desarrollar un sitio ms elegante. Hay que destacar que tiene la mala costumbre de insertar mucho "cdigo basura" en nuestra pgina, adems de que muchos componentes que incorpora estn implementados con etiquetas <META ----> (como las transiciones de pgina) y otros son los llamados componentes WebBot. Ambos no funcionan muy bien en otra cosa que no sea Internet Explorer 5.0. sta es su apariencia.

FrontPage Express y Netscape Composer (de Microsoft y Netscape) FrontPage Express y Netscape Composer, son dos herramientas que vienen incluidas con los respectivos navegadores de internet. Son muy tiles y recomendables para principiantes por su sencillez y por incluir las opciones justas. Se trata de 2 herramientas sin grandes pretensiones pero que representan el primer paso en el aprendizaje. Lo ideal es empezar diseando con alguna de las dos y, una vez aprendida la mecnica, pasar a desarrollar con otras herramientas ms potentes.

Curso de Diseo y Creacin de pginas web: Navegadores

Nuestra pgina web, como ya hemos visto, est compuesta nicamente por cdigo HTML que posteriormente un navegador de internet traduce a formato grfico. Por tanto es importante que conozcamos algo ms sobre los navegadores. Hoy en da 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, pero es inevitable mencionar el 5% restante. Este porcentaje lo representan navegadores como Mosaic u Opera entre otros (sin olvidarnos del navegador exclusivo de Austin Powers).

Generalmente, los usuarios que utilizan este tipo de navegadores tienen tambin instalado el Explorer o el Navigator con lo que la cuota de mercado de estos

10

ltimos es casi del 100%. Y esto es algo importante al desarrollar cualquier tipo de aplicacin orientada a Internet, ya que cada navegador es un mundo distinto, ofreciendo/soportando un determinado conjunto de elementos, incluso el mismo elemento puede representarse de forma distinta (por ejemplo el "colspan" de una tabla en IE o NS). Dicho esto, centrmonos en los dos ms conocidos.

Microsof InternetExplorer:
Una de las causas de su gran expansin (sin entrar en la polmica de si es legal o no) es que se incluye de serie con el sistema operativo de la casa, y parece que ha dado resultado porque es el navegador ms usado hoy en da.

Est disponible para todas las versiones Windows (3.1, 95, 98, NT y 2000), Macintosh y algunos UNIX (Sun Solaris y HP-UX). Sus ventajas (respecto a su ms directo competidor) son:

Es ms flexible y amigable a la hora de modificar o escribir el cdigo (Script o HTML) Soporta una mayor cantidad de componentes, por ejemplo las hojas de estilo (CSS) que NS ignora o incluso borra de pantalla (esto es hasta la fecha, no obstante, con el lanzamiento del Navigator 6.0 esta situacin parece que va a cambiar) Hace un uso ms inteligente de los archivos temporales de internet a la hora de volver a mostrar una imagen o ejecutar un subprograma Java Los applets funcionan ms rpido, ...

Actualmente, est disponible la versin 5.5 TRUCO: Si vuestro explorer es uno de esos "proporcionado por XXXXX" o algo por el estilo, y quereis quitar el molesto titulito, lo nico que teneis que hacer es modificar esa lnea en el registro de Windows (utilizando el programa "C:\WINDOWS\RegEdit.exe"). Para ello, buscar la cadena "proporcionado" (pulsar la tecla F3 dentro del programa RegEdit) y una vez localizada cambiarla por lo que

11

ms o guste. Tambin podeis personalizar la animacin que aparece justo debajo de los botones de la ventana (minimizar, maximizar, cerrar) cambiando el archivo de imagen que contiene la animacin (que se especifica dentro del registro en la lnea anterior a la del ttulo del programa).

Netscape Navigator:
Este navegador tiene versiones para casi todas las plataformas informticas existentes (Windows, Unix, OS2-Warp, Linux) y en el mundo de UNIX es utilizado por casi la totalidad de los usuarios, razn de peso para no despreciarlo, ya que no todo es Windows.

Entre sus ventajas destacan:

No es slo un navegador de internet, sino que viene integrado con un programa de correo (Netscape Messenger) y un programa de creacin de pginas web (Netscape Composer) La descarga de archivos es mucho ms rpida, lo que permite que las pginas web se visualicen ms rpido y que los archivos que nos bajemos tarden menos tiempo en guardarse Posee ms efectos para el texto (como el parpadeo de las letras) Est pensado para que sea utilizado por varios usuarios en el mismo ordenador, lo que permite que cada usuario disponga de sus propios "marcadores" (en IE se llaman "favoritos"), el programa de correo slo recoge los mensajes del usuario correspondiente, tiene cachs separadas para cada usuario, ... Es un programa que no es de Microsoft

12

Curso de Diseo y Creacin de pginas web: Diseo web, ajustes y colores

Una vez elegido el tema, los contenidos y los detalles de nuestra pgina web llega la hora de la verdad: el diseo de nuestra web. Algo muy, muy recomendable es que todas nuestras pginas (si que es nuestra web est compuesta de varias pginas) tengan una apariencia ms o menos similar, es decir, nada de tener cada pgina de un color distinto, los contenidos colocados en un lugar diferente cada vez, ... Y tambin es mejor tener muchas pginas pequeas con un buen ndice, que una grande cuyo tiempo de carga es muy, muy superior y que adems perdemos tiempo en cargar cosas que tal vez no le interesen a nuestros visitantes.

Ni todo es texto, ni todo son imgenes. Conviene mezclar un poco, por ejemplo yo suelo poner las imgenes entre varias lneas de texto o combinadas con el texto en el margen izquierdo de pantalla. Y ya que los navegadores y los sistemas operativos ponen a nuestro servicio grficos con millones de colores y alta resolucin, aprovechemoslo. Es bueno que las imgenes tengan el mayor colorido y resolucin posible (pero ojo con el tamao del archivo), combinar los colores del texto dependiendo si son encabezamientos, ttulos, contenidos, ejemplos, ... poner las letras en distintos tamaos, distinto tipo de letra, negrita, ... ya sabeis, imaginacin al poder. A la hora de disear os topareis con unos problemillas bastante habituales y de fcil solucin:

Ajustar el contenido en pantalla Mostrar varias imgenes en la misma lnea ...

La solucin es la utilizacin de tablas. Dichas tablas las dividiremos a nuestro gusto, y en cada celda colocaremos la imgen, texto o nada si es preciso, de manera que todo cuadre a la perfeccin en pantalla.

www

13

eitig

com Pero no debemos olvidar que existen varias resoluciones de pantalla, la ms comn es 800 x 600, pero por si acaso definiremos los tamaos de las tablas, filas y columnas en porcentaje y no en pixeles.
Curso de Diseo y Creacin de pginas web: Imgenes y animaciones

Imgenes y animaciones Como ya hemos visto, uno de los elementos que podemos incluir en nuestra pgina web son archivos de imgen. Los navegadores admiten practicamente cualquier formato de archivo de imgenes, pero en la prctica los diseadores utilizan slo dos: JPEG y GIF. Aqu vemos unos ejemplos: Archivo JPEG

14

Animacin GIF

Por qu?, por el tamao de los archivos. Ambos formatos comprimen la imgen para as reducir su tamao, y de este modo, conseguir que el tiempo de carga de la pgina web sea inferior. Las imgenes en formato JPEG tienen una profundidad de color de 16 millones de colores (RGB de 24 bits) pero reduce el tamao de la imgen sacrificando calidad (en luces, reflejos y transiciones de colores principalmente). Resumiendo, las imgenes JPEG se vern peor a medida que aumentemos el porcentaje de compresin. Por el contrario, el formato GIF no pierde calidad. Tambin es capaz de almacenar mscaras (muy til para definir determinadas zonas de la imgen de color transparente) y es capaz de reproducir animaciones. Pero slo tiene una profundidad de 256 colores (paleta de 8 bits) y los archivos tamao mediano o grande ocuparn ms que en formato JPEG. Existen herramientas que permiten reducir el tamao de las imgenes sin sacrificar o sacrificando una mnima parte de la calidad, entre ellas estn xat.com Image Optimizer, Advanced GIF Optimizer, JPEG Optimizer, ... Estos programas permiten visualizar al mismo tiempo la imagen originaria y la optimizada, mostrando el tamao de cada una y el porcentaje de compresin obtenido. Podeis encontrarlas en:

www.ellimite.com/downloads/diseno.php (por cortesa de Fermn Alejo), aqu podreis encontrar herramientas varias para el diseo grfico www.xat.com, pgina de la compaa creadora de varias herramientas de compresin, muy recomendable su visita. Podemos descargarnos de manera gratuita algunas, entre ellas Image Optimizer 3.01 que recomiendo encarecidamente que utiliceis. www.softonic.com, buscador que posee una seccin dedicada a compresores de imgen (Windows 95/98/Me - Multimedia y Diseo Imgenes y Grficos - Compresores Grficos), aunque esta pgina suele dar algunos problemillas de carga.

Para insertar imgenes en nuestra pgina debemos utilizar las etiqueta <img

15

src="..." width="..." height="..." border="..." alt="..." align="..." >, el nico parmetro que es obligatorio es src, que indica el archivo de imgen a insertar. Dentro de una imgen tambin podemos definir mapas o hot spot. Esto no es ms que una determinada zona poligonal que posee un hipervnculo. Aqu teneis un ejemplo (la imgen posee 2 mapas):

No creo que existan muchas pginas web modernas sin imgenes. Las imgenes (bien elegidas y bien colocadas) proporcionan un colorido visual impresionante, adems, "una imgen vale ms que mil palabras". Pero no olvidemos que en internet "una imagen tarda ms en cargar que mil palabras", por lo que habr que llegar al punto medio en lo referente a imgenes y tiempo de carga.

El fondo de la pgina En el fondo de nuestra pgina podemos colocar una imgen o animacin. Si la imgen es ms pequea que el fondo, la imgen se repetir a modo de mosaico hasta llenar todo fondo (aunque este efecto se puede desactivar). Dicho efecto puede observarse en cualquiera de las pginas de esta seccin. Como imagen de fondo se utiliz la imagen siguiente:

Para insertar una imgen de fondo debemos modificar la etiqueta <BODY> y poner en su lugar: <body background="archivo_de_imagen">

Favoritos Al aadir una pgina web a "favoritos", el navegador automticamente asigna un 16

icono por defecto dicha pgina, esto se puede apreciar en la figura siguiente.

Para que el navegador asigne a nuestra pgina un icono diferente, debemos tener un archivo llamado "favicon.ico", que contiene el icono a mostrar. O tambin se puede aadir la siguiente lnea dentro de las etiquetas <head></head>: <link rel="SHORTCUT ICON" href="XXXXXXXX.ico"> Una vez aadida la pgina a "favoritos", tambin se cambiar el icono por defecto que aparece en la barra de direcciones por nuestro icono.

Estas son algunas direcciones en donde podeis encontrar material:


www.ciudadfutura.com, buscar en la seccin de internet gratis cantidad de imgenes, fondos, iconos, ... www.tecnopolis.com, un buscador poco conocido pero que posee una buensima seccin dedicada a las imgenes. www.animfactory.com, imgenes y animaciones para tu pgina. www.gifmania.com, pgina con GIFs de temas varios. www.todo-gratis.com, en esta pgina no slo hay imgenes, tambin podrs encontrar muchos recursos gratuitos como por ejemplo contadores, estadsticas, libros de firmas, ...

Curso de Diseo y Creacin de pginas web: Aadir msica de fondo

Otro elemento multimedia que podemos incluir en nuestra pgina es el sonido. Pero no es muy aconsejable aadir msica de fondo, ya que adems de la tarjeta de sonido, se necesita el uso de software externo al navegador para poder escucharla. Adems, la inclusin de msica ralentiza en exceso la carga de nuestra pgina, y no todos los navegadores soportan su uso. La msica que se reproduce, son archivos en formato MIDI (en realidad puede reproducirse cualquier archivo de sonido, pero se opta por este tipo debido a su reducido tamao). Pero este tipo de archivos slo contienen msica instrumental, y

17

la cantidad y calidad de los instrumentos que escuchemos depende en exclusiva de nuestra tarjeta de sonido. Internet Explorer reproduce la msica sin mayores dificultades, pero su competidor, el Netscape, utiliza Java para ello. Esta tcnica es bastante lenta y no funciona muy bien (otra razn ms para no incluir sonido en nuestra pgina). Para insertar msica en nuestra pgina, se debe utilizar la siguiente sintaxis HTML (justo despus de la etiqueta <BODY>): <BGSOUND SRC="archivo MIDI" LOOP="n de veces"> En la propiedad SRC pondremos el nombre del archivo MIDI (*.mid) a reproducir, y en LOOP el nmero de veces a reproducirlo (1, 2, 3, ...) para reproduccin contnua deberemos poner "infinite".

18

Curso de Diseo y Creacin de pginas web: Links

Principalmente existen 3 tipos de links distintos:


o o o

A una pgina web de nuestro dominio A una parte concreta de nuestra pgina A otra pgina web de otro dominio

Links a una pgina web de nuestro mismo dominio


Se deben utilizar las etiquetas: <a href="destino"> Texto o imgen que posee el hipervculo </a> En donde el atributo href apunta al destino del hipervnculo; pero a la hora de poner el destino debemos tener en cuenta las rutas y los directorios. Todos los links a cualquier archivo que se encuentre en nuestro mismo dominio NUNCA incluirn la ruta del directorio inicial en donde est dicho archivo. Por ejemplo, si todos nuestros archivos se encuentran en el mismo directorio inicial llamado "C:\PAG_WEB\", los links sern simplemente el nombre del archivo, por ejemplo "index.htm", "bienvenida.html", "foto1.jpg", ... 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, cuando queramos referenciar a un archivo dentro del directorio "C:\PAG_WEB\FOTOS\", simplemente tenemos que poner "\FOTOS\". Si dentro del subdirectorio "C:\PAG_WEB\FOTOS\" tenemos otro subdirectorio llamado "C:\PAG_WEB\FOTOS\ANIMACIONES\" para referenciarlo sera "\FOTOS\ANIMACIONES\", la idea es muy sencilla. Esto se debe a que si nuestra pgina se llama "index.htm", en local se llama "C:\PAG_WEB\index.htm", pero cuando se coloque en nuestro dominio de internet se llamar "http://www.eitig.com/index.htm", con lo que omitiendo las rutas de los directorios iniciales, se pondr por defecto la ruta inicial del lugar donde se encuentre. Con esto conseguiremos que nuestra pgina se pueda visitar de igual manera en internet, como en local para realizar las pruebas. Lo mejor es crearse un directorio donde estn todas nuestras pginas web, y dentro de este directorio crear subdirectorios (\fotos, \archivos, \estilos, \scripts, \sonidos, ...) con lo que conseguiremos una buena organizacin. -Ir a la parte superior de la pgina>

19

Links a una parte concreta de nuestra pgina


Para poder implementar los links a una parte concreta de una pgina web se utiliza un elemento llamado anchor o link interno. No es ms que una marca que realizamos en nuestra pgina web y que desde un link normal y corriente invocamos. 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 imgen </a> Y para invocarla desde un link ha de utilizarse: #nombre de la marca Aqu teneis un ejemplo: en la parte superior de la pgina (antes de "Curso de Diseo y ...") hay una marca llamada "Superior", y desde el link que se encuentra justo debajo se la invoca utilizando <a href="#Superior">. -Ir a la parte superior de la pgina>

Links a pginas de otros dominios


Para implementar los links a otras pgina web que no pertenezcan a nuestro dominio se utiliza la misma sintaxis HTML de un link a una pgina de nuestro dominio. Pero se diferencian en que ahora el destino incluye la ruta completa, que no olvidemos, siempre empieza por "http://". <a href="http://destino"> Texto o imgen que posee el hipervculo </a>

20

Curso de Diseo y Creacin de pginas web: E-mail como links

Supongo que en muchas ocasiones habreis visto pginas web en las que se puede mandar e-mails a sus autores o al webmaster para colaborar, dejar las crticas, o cualquier cosa. Si no lo habeis visto nunca, fijaos en la parte inferior de esta pgina.

Que nuestros visitantes puedan comunicarse con nosotros puede ser bastante til (cada cul decida para qu). La forma ms sencilla de ponernos en contacto con ellos es mediante e-mail. Una posible opcin sera poner nuestra direccin de correo al final de la pgina y que la gente que quisiera comunicarse con nosotros la escribiera en su programa de correo, pero esto no es demasiado cmodo y puede que alguien escriba mal nuestra direccin y que nunca nos llegue su comentario. Para ello, y como segunda opcin, est el comando HTML <a href="mailto:destinatario"> (donde pone destinatario por supuesto tendremos que poner una direccin de correo vlida). Esta orden abre el programa de correo predeterminado (Outlook, Messenger o que el sea) por la pantalla que sirve para escribir un nuevo mensaje. Dicho mensaje ya tiene escrita la direccin del destinatario (que es la que nosotros pusimos despues de "mailto:"). Como se puede observar, el comando HTML no es ms que un link normal y corriente en el que la direccin de destino no es ms que una direccin de correo electrnico. Por tanto, este comando se usa de igual manera que un link normal y corriente (lo podemos poner en una foto, texto, ...)

Curso de Diseo y Creacin de pginas web: Distribucin de archivos

Bsicamente hay 2 formas de distribuir archivos a nuestros visitantes: mediante HTTP o mediante FTP. El protocolo FTP es algo ms complicado para nuestros propsitos, por lo que lo descartaremos. Mediante HTTP es bastante sencillo. La mecnica es la misma que con cualquier link a una pgina web normal y corriente. En una parte del texto o en una imgen aadiremos un link a nuestro archivo, y con esto conseguiremos que cuando se pulse sobre el enlace, se guarde el archivo en la mquina local de nuestro visitante.

En las imgenes observamos lo que ocurre al distribuir un archivo llamado "dblist.zip".

21

Esta es la ventana que muestra el Internet Explorer:

Y esta la ventana que muestra el Netscape Navigator:

Una vez abierta la ventana, debemos elegir la opcin "Guardar en disco", hecho esto nos preguntar el directorio en donde guardarlo y listo.

NOTA: comprobar antes que todos los archivos que van a distribuirse NO TIENEN VIRUS, porque podemos provocar un repentino llamamiento a nuestras familias por parte de nuestros visitantes e incluso tener problemas legales.

22

23

Curso de Diseo y Creacin de pginas web: Comprobaciones finales

Que nuestra pgina est terminada no significa que est lista para colocarse en internet. Antes de dar ese paso debemos hacer las ltimas comprobaciones para tener la certeza de que todo funcionar correctamente. Archivos: Debemos asegurarnos que todos los archivos a los que referenciamos desde nuestra pgina existen (otras pginas, imgenes, archivos con los Script, hojas de estilo, ...). 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, lo mejor es tener las pginas y todos los archivos que se utilicen dentro del mismo directorio, o en subdirectorios del mismo. Tenemos que comprobar que hemos eliminado todas las rutas de los directorios iniciales, y que las referencias a los subdirectorios empiezan por "\" (e.j. "\fotos\logo.jpg").

Links a pginas web: Este tipo de links SIEMPRE deben empezar por "http://", lo nico que debemos hacer es comprobar si hemos escrito bien la direccin de la pgina. Con esto crearemos una pgina web practicamente sin fallos, con lo que nuestros visitantes (lo ms seguro) volvern a visitarnos.

24

Curso de Diseo y Creacin de pginas web: FTP

Nuestra pgina ya est terminada y hemos realizado las ltimas comprobaciones, lo nico que nos falta es colocar nuestra pgina en internet. Para ello utilizaremos el protocolo FTP (File Transfer Protocol). El FTP es un protocolo que nos permite transferir archivos entre ordenadores, en este caso, entre nuestro PC y el servidor de internet. Lo primero es buscar un servidor de internet que nos permita colocar nuestras pginas (recomendable de manera gratuita aunque no es obligatorio). Esto hoy en da eso ya no es un problema, porque cualquier portal de internet nos ofrece ms o menos 5 MB de espacio gratis para nuestras pginas web (entre ellos terra, yahoo, xoom, telepolis, network solutions, inlanders, todo-gratis,...). Las diferencias entre unos y otros son el espacio que nos ofrecen, la velocidad de descarga, la propaganda que incorporan a nuestras pginas, ...

Otra opcin es comprar nuestro propio dominio. Esto no siempre es posible, ya que la mayora de los dominios ".com" suelen estar en posesin de algn particular o empresa, aunque si realmente estamos interesados, podemos realizar una oferta a su propietario. Tambin debemos tener en cuenta la legislacin del pas al que pertenece dicho dominio. Por ejemplo, en espaa (".es") slo se puede adquirir un nombre de dominio si dicho nombre se corresponde con el nombre de una empresa, ni siquiera se pueden adquirir dominios que coincidan con el nombre del producto que queremos publicitar. Para ms informacin o para consultar disponibilidad de dominios puede consultar www.register.com Una vez elegido servidor y concedido el espacio, se nos dar el nombre de usuario (User ID), el password, el nombre del servidor (Host Name), y lo ms importante, nuestra direccin de internet. Lo siguiente que necesitamos es un programa FTP (FTP client) para realizar la transferencia de archivos (aunque la transferencia de archivos tambin la puedemos hacer con nuestros navegadores de internet, es algo ms complicado pero es posible, por lo que, recomiendo la utilizacin de un programa de FTP). Los programas ms conocidos son CuteFTP y WS_FTP LE, que se pueden descargar de manera gratuita en www.downloads.com. Sus aspectos som muy similares al explorador de archivos de Windows 9x, como puede observarse en las imgenes. CuteFTP

25

WS_FTP LE

Cute FTP de la compaa GlobalScape, es mucho ms grfico y amigable, adems de poseer asistentes y la tpica ventana inicial con los trucos del da. Pero WS_FTP LE de IPSwitch, consume menos recursos mquina. Cada cul que elija el que ms le guste, porque al final, los dos hacen lo mismo. Dentro de nuestro programa de FTP pondremos los datos y este se conectar con el servidor (si los datos son correctos). Una vez conectados, haremos lo que queramos con nuestros archivos y con nuestro espacio en el servidor (crear directorios, copiar archivos, borrar archivos, ...), la mecnica es la misma que con nuestro disco duro.

Llegado a este punto se nos plantea una pregunta: cul es la primera pgina que se va a ver un usuario al teclear nuestra direccin?. Cada servidor suele variar algo su poltica, pero lo normal es que la primera pgina que se va a abrir es la pgina llamada "index.htm", por lo que si nuestra pgina inicial se llama "principal.htm" o algo por el estilo, deberemos cambiarla el nombre (y corregir todos los links que la apunten). Para comprobar si hemos hecho todo correctamente, teclearemos la direccin que nos dijeron y daremos una vuelta a ver que pasa. NOTA: la direccin que nos suelen proporcionar hace publicidad al portal, adems de ser bastante larga y

26

complicada (usuarios.terra.es/mi_pagina, members.xoom.com/mi_pagina, ...). Y se plantea otro problema: el nombre que queremos dar a nuestra pgina no siempre est libre (hay que tener en cuenta que no somos los nicos con pgina en internet). Para evitar esto, existe el servicio de redireccionamiento automtico como por ejemplo: www.pagina.de que nos permite dar el nombre que queramos, siempre que no est elegido por otro usuario (www.pagina.de/mi_pagina) y desde ah llevar a nuestros visitantes a la direccin que nosostros digamos (usuarios.terra.es/mi_pagina), algo que os recomiendo encarecidamente y que vuestros visitantes agradecern. Este servicio no slo lo realiza www.pagina.de, existen ms como: www.easy.to/remember, www.gratix.com, ...

27

Curso de Diseo y Creacin de pginas web: Frames

Los Frames nos permiten presentar en una pgina mltiples documentos en diferentes vistas. Estas vistas nos permitirn, por ejemplo, fijar en una de ellas el ndice, el logotipo, ... mientras que en la otra mostramos el contenido seleccionado. En realidad, una pgina web con frames, no es ms que un pequeo fragmento en HTML que carga una pgina web en cada una de las vistas que hayamos definido. Esto se puede ver en el ejemplo:

La pgina principal de EITIG posee dos marcos:


Uno superior donde van colocados los contenidos y el buscador. Y uno inferior donde se muestran los temas pertenecientes al contenido seleccionado (este marco posee barra de scroll).

Para conseguir esta visualizacin necesitamos 3 pginas HTML:

Una para definir los marcos que vamos a tener en pantalla. Este sera ms o menos el cdigo HTML que incluira dicha pgina: <frameset rows="80,*"> <frame name="topFrame" scrolling="NO" src="Contenidos.htm" > <frame name="mainFrame" src="Indice.htm"> </frameset> Y las 2 pginas que se van a mostrar en el marco superior e inferior (Contenidos.htm e Indice.htm).

Lo que hacemos es dividir la pantalla como si se tratase de una tabla, y a esa tabla la dividimos en filas y columnas. A cada celda le decimos (mediante la propiedad src) que pgina tiene que mostrar. Estas suelen ser las combinaciones ms usuales.

Pero no hay lmite, podemos crear las combinaciones que queramos, pero no

28

debemos olvidar que en cada vista se carga una pgina y excesivas vistas pueden ralentizar sobremanera el sistema.

Esta es la segunda capa


Curso de Diseo y Creacin de pginas web: Capas (Draw Layer)

Una capa no es ms que un contenedor HTML, es decir, un elemento que agrupa a otros elementos. Esta agrupacin nos permite tratar a todos los elementos como si fueran un todo, y gracias a eso, podemos crear unos efectos visuales muy interesantes utilizando poco cdigo: como ocultar/mostrar una capa (que ocultara a todos los elementos contenidos en esa capa), cambiar su posicin en pantalla, su color o imagen de fondo, ...

Si quereis contemplar las posibilidades que ofrecen las capas con vuestros propios ojos, os recomiendo visitar:

Otra seccin de EITIG, lo ms web La pgina principal de esta seccin www.ciudadfutura.com, este portal tarda un poco en cargar, 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, es decir mediante coordenadas X, Y, Z, largo y ancho. La tercera dimensin (la coordena Z o zindex), define la superposicin de las capas. Una capa de orden superior ocultar a otra de orden inferior.

El posicionamiento absoluto tiene un inconveniente: la resolucin de la pantalla. 29

Una capa colocada en unas determinadas coordenadas, si la resolucin con la que se visualiza la pgina es ms pequea que la resolucin con la que la diseamos (por ejemplo 640 x 480) puede quedarse fuera del ngulo de visin. Para evitarlo, los navegadores automticamente activan el scroll de pantalla. Como se ha dicho, una capa es un contenedor, pero no hay limitaciones respecto al contenido. Una capa puede contener cualquier cosa, por ejemplo texto, imgenes, plug-ins, applets e incluso otra capa. 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). Internet Explorer 4.0 y Netscape 4.0 soportan a la perfeccin las capas creadas con DIV y SPAN, pero las capas que utilizan las etiquetas LAYER e ILAYER slo las soportan las versiones superiores. Aqu teneis un ejemplo de utilizacin de capas: tenemos 2 capas (Layer1 y Layer2) ambas situadas en las mismas coordenadas pero con distinto z-index, la segunda capa no es visible, pero al pasar el ratn sobre el texto "Mostrar" se muestra, ocultando por su situacin en el eje Z a la primera capa. Al alejarse el ratn del texto "Mostrar" se vuelve a ocultar la segunda capa.

30

Curso de Diseo y Creacin de pginas web: CSS (Cascade Style Sheet))

Los estilos constituyen la forma de definir el aspecto de una etiqueta HTML dentro de una pgina web. Si no se especifica el estilo, el navegador pondr uno por defecto, que en el caso del Explorer y del Navigator son distintos. Los estilos pueden definirse o modificarse poniendo los parmetros en la etiqueta: <p><font size="7" face="Arial" color="#CCCCCC"> Aqu va el encabezamiento </font></p> El texto anterior se visualizara en color #CCCCCC, con un tamao de 7 y con tipo de letra Arial, como puede verse a continuacin:

Aqu va el encabezamiento
Pero el problema que presenta es que si queremos cambiar alguno de los parmetros, debemos cambiarlo etiqueta a etiqueta por toda la pgina. Para evitar este problema, se redefinen los estilos para cada etiqueta. As cada vez que se encuentre esa etiqueta dentro de la pgina, se visualizar con el estilo que nosotros hemos definido y no con el estilo por defecto. <STYLE> P { FONT-FAMILY=Arial; FONT-SIZE=7; FONTCOLOR="#CCCCCC" } </STYLE> En el caso en que tuvieramos varias pginas y en cada pgina definieramos el estilo. Cuando quisieramos modificar el estilo de todas, nos pasara lo mismo que cuando los definamos etiqueta a etiqueta en una misma pgina. Una prctica muy usual consiste en definir los estilos en un archivo aparte y cargar los estilos de ese archivo en cada pgina (a estos archivos se les denomina Hojas de Estilo en Cascada). Para cargar el archivo de estilos debemos poner: <link rel="stylesheet" href="archivo.css"> Y dentro del archivo "archivo.css" tendramos: <!-P { FONT-FAMILY=Arial; FONT-SIZE=7; FONT-COLOR="#CCCCCC" } --!>

31

Pero las CSS nos permiten definir mucho ms, por ejemplo la orientacin del papel de la impresora, las propiedades de las celdas de una tabla, ... Un efecto muy vistoso consiste en redefinir el aspecto de los hipervnculos para que al pasar el ratn por encima se subrayen y al quitar el ratn desaparezca el subrayado (como se hace en esta pgina), la hoja de estilo es la siguiente: <!-a :link { text-decoration: none } a :hover { text-decoration: underline } --!>

Curso de Diseo y Creacin de pginas web: Java, JavaScript y VBScript

Una vez que hayamos creado nuestra pgina web, nos daremos cuenta, que a pesar del colorido, las animaciones y los grficos (que dan ms o menos vistosidad), nuestra pgina es totalmente esttica. Pues bien, alguien antes que nosotros se dio cuenta de este problema, que se solucion de una forma muy simple: programando. Existen mayoritariamente 3 formas o 3 lenguajes para crear algo de interactividad en nuestra pgina: applets (en Java), script en JavaScript o en VBScript. A modo de nota mencionar tambin un programa llamado Flash de la compaa Macromedia que empieza a convertirse en una seria alternativa a los lenguajes Script. Java: Java es un lenguaje de programacin orientado a objetos de propsito general creado por la compaa Sun Microsystems. Dentro de este lenguaje disponemos de una clase especial llamada "applet" que implementando sus mtodos conseguimos realizar un subprograma Java que nuestro navegador entiende, y lo ms importante, ejecuta. Para poder insertar el applet dentro de nuestra pgina ha de estar comprendido entre 2 etiquetas: <APPLET></APPLET>, y como es tpico del HTML acompaado de parmetros tales como el nombre de la clase, el espacio de pantalla para representarlo, ... Personalmente no recomiendo la inserccin de applets dentro de una pgina web porque mientras se est cargando/interpretando el applet, el navegador no responde, y por tanto, las dems pginas web que estn abiertas en ese momento se quedarn temporalmente colgadas. Adems, el gran inconveniente de Java es su lentitud, que

32

se compensa por su portabilidad. Es aconsejable utilizar JavaScript (que es ms rpido) y para tareas que no se puedan implementar en JavaScript utilizar Java. Si alguien quiere ver los applets en accin, que se pase por www.spygots.com. Y para aprender ms sobre Java, POO, ... os remito a la seccin de Programacin Orientada a Objetos que posee eitig. JavaScript: No hay que confundir JavaScript con Java. JavaScript fue desarrollado por Netscape para aadir interactividad a las pginas web con su navegador de internet. Pese a que JavaScript posee una sintaxis muy similar a Java, NO ES JAVA. Como fue desarrollado por Netscape, su navegador (Netscape Navigator) era el nico que lo reconoca. Pero hoy en da est integrado en casi la totalidad de navegadores de internet del mercado (la implementacin de Microsoft en el IE se llama JScript y difiere ligeramente de JavaScript). Hay que decir que es el lenguaje ms utilizado en internet para aadir interactividad a las pginas web. Puede que al navegar por alguna pgina web lo hayamos visto, pero no nos hayamos dado cuenta. Se utiliza sobre todo para cambiar las imgenes al pasar el ratn encima, moverlas, validar los datos, escribir mensajes en la barra de estado, implementar un reloj, ... JavaScript al ser un lenguaje de Script, el cdigo se embebe dentro del cdigo HTML de las pginas web. No hay que compilarlo ni linkarlo, sino que el mismo navegador de internet se encarga de interpretarlo. No necesitamos ninguna herramienta especial para programar en JavaScript, simplemente con el mismo block de notas de Windows podemos escribir cdigo Script, 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). Aqu teneis una de funcin muy til, lista para usar: <script language=JavaScript> // Esta funcin muestra en la barra de la ventana el texto introducido como parmetro function mensaje(texto){ status = texto } </script> Adjunto un MANUAL para quien quiera aprender este lenguaje. Existen infinidad de links interesantes, entre ellos:

lo ms web, otra de mis pginas personales. Merece la pena ver la intro. www.bratta.com, dispone de cdigo DHTML y Scripts gratuitos. Muy

33

recomendable

developer.netscape.com, pgina para los desarrolladores en JavaScript. Aqu se podran encontrar manuales de todas las versiones disponibles del lenguaje y tambin de HTML y DHTML de Netscape. www.jsworld.com, aqu hay gran cantidad de cdigo listo para utilizar, adems de unos manuales con bastante ejemplos. www.javascripts.com, pgina repleta de Scripts gratuitos, explicaciones del cdigo, ... msdn.microsoft.com/scripting, seccin de Microsoft dedicada a la tecnologa Script. webreference.com/programming/javascript.html, esta pgina contiene cantidad de enlaces y recursos del lenguaje. tanega.com/java/library.html, cantidad de cdigo listo para usar. guille.costasol.net/indice_cf.htm, la pgina de Guille, incluye muchos trucos para diversos lenguajes. www.chami.com/tips/javascript, trucos de JavaScript www.dannyg.com/javascript, esta es la pgina personal de un famoso programador en JavaScript, apodado el apostol de JavaScript. www.gamelan.com

VBScript: El lenguaje VBScript es el intento por parte de Microsoft de adentrarse en el negocio de los lenguajes de Script. Su propsito es el mismo que el de JavaScript, pero su sintaxis por fuerza, es distinta. Se tom la sintaxis del programa de la casa: el Visual Basic. Al ser de Microsoft, pas un poco como al principio con JavaScript, slo lo reconoca el Internet Explorer, pero ahora creo que Netscape 6.0 tambin lo soporta, aunque existe un plug in que se puede conseguir en www.netscape.com para que el Navigator soporte su uso. Como nota hay que decir que fue el lenguaje utilizado para programar el famoso virus "I love you". Links:

www.microsoft.com/vbscript/us/vbstutor/vbstutor.htm, documentacin oficial y tutorial de Microsoft. ww.microsoft.com/vbscript, pgina de la compaa sobre el lenguaje VBScript, cdigo y links. techzone.solutionsiq.com/home-default.htm, pgina con las ltimas novedades sobre las tecnologas de internet 34

msdn.microsoft.com/scripting, seccin de Microsoft dedicada a la tecnologa Script. www.infodial.net/infohelp/htms/vbscript.htm, contiene ejemplos y documentacin.

Curso de Diseo y Creacin de pginas web: Insertar cdigo Script

Como JavaScript se embebe dentro de cdigo HTML, 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. Esto se realiza mediante las etiquetas <SCRIPT></SCRIPT>, pero adems debemos indicar en qu lenguaje est escrito para facilitar la labor de interpretacin (aunque por defecto se toma JavaScript), esto se hace: <SCRIPT LANGUAGE="JavaScript"></SCRIPT> Para evitar que los navegadores que no soporten JavaScript o tengan desactivada esa opcin muestren el cdigo en pantalla como si se tratase de texto normal y corriente, se utilizan las etiquetas HTML que indican que es un comentario (<!--, //-->). Con esto conseguiremos que si el cdigo se trata como HTML no salga en pantalla. Con lo que a la hora de codificar un Script, tendramos la siguiente plantilla: <SCRIPT LANGUAGE="JavaScript"> <!-Aqu insertaramos nuestro cdigo JavaScript //--> </SCRIPT> La verdad es que no existe un convenio claro sobre en qu parte de la pgina web hay que colocar el Script. Lo que se suele hacer en colocarlo entre el final de la cabecera y el cuerpo, o dentro de la cabecera. Otra prctica bastante extendida es colocar nuestras funciones en un archivo de texto (pero con extensin .js) y desde la pgina HTML llamarlo. Por ejemplo, si nuestro archivo se llama rutinas.js, el ejemplo quedara de la siguiente manera: <SCRIPT LANGUAGE="JavaScript" src="rutinas.js" > </SCRIPT> Y dentro del archivo rutinas.js: <!-Aqu insertaramos nuestro cdigo JavaScript

35

//--> Con esta prctica conseguiremos reutilizar de una manera ms sencilla rutinas tan comunes como la de escribir mensajes en la barra de estado del navegador, o las funciones de mostrar/ocultar capas.

Copyright eitig.com 1999-2000 Resolucin recomendada: 800 x 600 webmaster@eitig.com

Curso de Diseo y Creacin de pginas web: Cookies

Uno de los problemas que presenta el protocolo HTTP (HyperText Transfer Protocol) es que no posee estado o memoria, y por tanto, no se pueden guardar ningn tipo de dato en la mquina cliente, ni tampoco recolectar informacin sobre las operaciones que realiz el mismo (la problemtica es similar a la de los autmatas de Moore y Mealy). Las Cookies o "galletitas" se crearon con el propsito de solucionar este problema. Simplemente son archivos de texto normales y corrientes que se guardan en la mquina cliente y que almacenan fragmentos de informacin. Nuestro navegador (en el caso de que soporte el uso de Cookies), manda al servidor esta informacin con cada peticin que le solicitemos, y el servidor con esta informacin realiza las acciones correspondientes. Uno de los usos ms extendidos es el de personalizar portales, como por ejemplo Telepolis. Pero no slo sirven para personalizar, tambin sirven para recoger el nmero de veces que hemos visitado la pgina, la hora de nuestro ordenador, ... y tambin se utilizan en pginas de comercio electrnico, almacenando la lista de la compra, la lista de deseos, ... Veamos el ejemplo de Telepolis. Este portal, en el caso que no exista una Cookie en el cliente, manda una pgina inicial para que nos registremos. Cuando nos registramos, se guarda una Cookie con informacin sobre nuestra ciudad, nuestro signo del zodiaco, empresas favoritas, ... La siguiente vez que visitemos el portal nos sorprenderemos al darnos cuenta que pone: "Bienvenido XXXXX", adems de la informacin meteorolgica de nuestra ciudad, nuestro horscopo y la cotizacin de nuestras empresas en bolsa.

36

Las Cookies poseen varias propiedades: valor, fecha de expiracin, dominio, path y secure. Aunque las ms utilizadas son valor y fecha de expiracin. Segn la fecha de caducidad, las Cookies se clasifican en 2 tipos: Temporales y Semipermanentes.

Temporales son aquellas Cookies que no poseen fecha de expiracin, esta Cookie no se almacenar en disco. Semi-permanentes son aquellas que s tienen especificada la fecha de expiracin, una vez superada la fecha, la Cookie desaparecer.

Dependiendo del modo en que se defina esta fecha, la Cookie expirar al terminar la sesin, pasados X das o en una fecha concreta. Lo normal es que las Cookies utilizadas para personalizar pginas web sean semi-permanentes y que nunca caduquen. Las Cookies se guardan junto con un nmero nico de sesin (esto lo hace automticamente el sistema) para que no se sobreescriban al entrar en una pgina distinta y tambin, para que pueda ser reenviada a su pgina de procedencia la siguiente vez que entremos en ella. El problema que presenta el uso de Cookies es que no todos los navegadores las soportan (depende del navegador y de la versin), adems, los navegadores permiten configurar el equipo para que no utilice Cookies.

Aqu teneis cdigo en JavaScript de manejo de Cookies (descargar un ejemplo de utilizacin de Cookies). NOTA: Si se copia al portapapeles el cdigo directamente del explorador, puede que de problemas la tabulacin, ya que se sustituye por espacios en blanco. En ese caso, borrar todos los blancos y volved a poner la tabulacin. // Esta funcin guarda un valor en una Cookie y pone la fecha de expiracin // Para crear Cookies temporales dejar caducidad sin valor // El parmetro caducidad se expresa en milisegundos. Para expresarlo en das: 1000 * 60 * 60 * 24 * n de das. function guardarCookie ( nombre, valor, caducidad) { 37

if ( caducidad ) { caducidadAux = new Date(); caducidadAux.setTime (caducidadAux.getTime() + caducidad); document.cookie = nombre + "=" + valor + "; expires=" + caducidadAux.toGMTString() + ";"; } else { document.cookie = nombre + "=" + valor + ";"; } } // Elimina la Cookie asignndola una fecha atrasada function eliminarCookie ( nombre ) { document.cookie = nombre + "=NULL; expires=Friday, 2-May-80 00:00:00 GMT"; } // Devuelve el valor de "nombre" almacenado en la Cookie // Si "nombre" no existe, devuelve la cadena vaca function recuperarCookie ( nombre ) { valor = ""; // compruebo que exista la Cookie if ( document.cookie ) { // compruebo que "nombre" tiene asignado algn valor pos = document.cookie.indexOf( nombre ); if ( pos != -1 ) { // recupero el valor de "nombre" y lo guardo en "valor" posIni = document.cookie.indexOf( "=", pos ) + 1; posFin = document.cookie.indexOf( ";", pos ) - 1; // si "nombre" es la ultima variable, posFin es el final de la Cookie if (posFin == -2) posFin = document.cookie.length; valor = document.cookie.substring( posIni, posFin ); } } return valor; } Para ms informacin:

dir.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Cookies. La seccin dedicada a Cookies de Yahoo. www.cookiecentral.com. Pgina con mucha informacin y links sobre Cookies, merece la pena visitarla.

38

Copyright eitig.com 1999-2000 Resolucin recomendada: 800 x 600 webmaster@eitig.com

Curso de Diseo y Creacin de pginas web: Problemas con los navegadores

El principal problema que nos encontraremos a la hora de desarrollar rutinas en JavaScript, es que no existe una nica implementacin de este lenguaje, sino que existen diferentes implementaciones y diferentes versiones de cada implementacin. Las implementaciones son:

JScript, que es el lenguaje de Script que desarroll Microsoft para su Internet Explorer, en la actualidad se encuentra por la versin 5.5. El JavaScript originario, desarrollado por Netscape, que se encuentra por la versin 1.5.

Navegador Versin Navigator 2.0 JavaScript 1.0 Navigator 3.0 JavaScript 1.1 Navigator 4.0 JavaScript 1.2 Navigator 4.6 JavaScript 1.3 Navigator 6.0 JavaScript 1.5 Explorer 3.0 JScript 1 Explorer 4.0 JScript 3 Explorer 5.0 JScript 5 Explorer 5.5 JScript 5.5

39

Cada versin mantiene perfectamente la compatibilidad con las versiones anteriores (al menos eso aseguran las respectivas compaas), es decir, el cdigo que funcionaba con una versin anterior del lenguaje, funcionar sin problemas en una versin ms reciente. Algunas de las caractersticas de JScript son:

Es totalmente compatible con el estndar ECMAScript (estndar de unificacin en torno al los lenguajes de Script) No es Case Sensitive Permite el uso de la tecnologa ActiveX Ofrece ms informacin sobre el navegador que est visualizando la pgina web

Resumiendo, es practicamente imposible generar cdigo 100% compatible con ambas implementaciones. Lo que se suele hacer es introducir dentro del cdigo Script un "IF" que chequea el navegador que se est utilizando, y utilizar en funcin del mismo, una sintaxis u otra. Como ejemplo esta funcin para ocultar capas de un documento: // Esta funcin oculta la capa introducida como parmetro function ocultar(capa){ if (ns && document.layers != null) { capa.visibility='hide' } else if (document.all != null) { capa.style.visibility='hidden' } }

Copyright eitig.com 1999-2000 Resolucin recomendada: 800 x 600 webmaster@eitig.com

Curso de Diseo y Creacin de pginas web: ASP (Active Server Pages)

Hagamos un poco de memoria: en un principio slo existan pginas web escritas en HTML, por la naturaleza de este lenguaje, totalmente estticas. A continuacin lleg el CGI (Common Gateway Interface), que eran aplicaciones 40

externas que se ejecutaban en el servidor. Esta aplicacin reciba peticiones como si se tratase de una pgina HTML normal, y en funcin de los parmetros que tena previamente establecidos y los valores que se le hubiesen suministrado la mquina cliente, devolva como resultado una pgina HTML. Con esto se lograba que las pginas de internet dejaran de ser estticas para convertirse en dinmicas, es decir, nuestra aplicacin CGI devolva una pgina distinta en funcin del usuario que la estuviera consultando, el da, la hora, ... Un ejemplo tpico de este tipo de tecnologas lo representan los buscadores de internet. Simplemente constan de una aplicacin que se conecta a una base de datos para realizar la consulta que le hayamos solicitado, y esta aplicacin nos devuelve como resultado una nueva pgina web que incluye los resultados de dicha consulta. Sin este tipo de tecnologa, el concepto de buscador jams existira, o por lo menos, no sera viable su puesta en marcha. El lenguaje VBScript para servidor o ASP acta de manera parecida a una aplicacin CGI, pero la mejora que introduce radica en que la aplicacin ya no es un programa ejecutable, sino un sencillo cdigo Script que nos va a permitir controlar todo lo que ocurre en el servidor y construir pginas dinmicas. La principal ventaja que aporta la programacin ASP es la sencillez y la comodidad, pero aunque sige existiendo un programa, su funcionamiento es totalmente transparente para el programador, ahora es el servidor quien se ocupa del trabajo, nuestra misin nicamente consiste en escribir rutinas en Script. La funcionalidad que podemos dar a nuestras pginas es impresionante, no slo por el simple hecho de poder implementar nuevas funciones como buscadores, foros, ... sino cosas ms sencillas, como por ejemplo cambiar los hipervnculos de una pgina si en nuestra empresa tenemos en varios servidores nuestras pginas web (algo tpico en servidores de intranet), introducir propaganda que cambie cada vez que se visite la pgina, ... Pero no nos confundamos, disponemos de unas rutinas en el servidor que permiten realizar pginas dinmicas en funcin de los parmetros que le hayamos introducido a la rutina, y esta devuelve una pgina web normal y corriente, que es la que recibe el usuario. Es decir, la pgina HTML final que le llega al usuario es totalmente esttica (a menos que insertemos JavaScript, applets o VBScript). Por lo tanto, a la hora de programar en ASP no hay que olvidar que todas las operaciones que se van a realizar, se van a efectuar SIEMPRE en el servidor y NUNCA en la mquina cliente. En resumen, una pgina ASP es un archivo dentro de nuestro servidor de internet, compuesto por una mezcla de HTML y Scripts (que se ejecutarn en el servidor). Estos Scripts procesarn los datos provenientes del cliente y generar una pgina HMTL como resultado que posteriormente se enviar a dicho cliente. Ventajas respecto a la programacin CGI: La programacin CGI se realizaba en lenguajes como C++ o Perl, que en la mayora de los casos, haba que compilar y linkar. Presentando adems la dificultad aadida de aprender dichos lenguajes, y no siempre estaban bien resueltos problemas como el 41

acceso a bases de datos, el control del sistema, ... ASP soluciona estos problemas. El aprendizaje de este lenguaje es bastante simple (muy similar a Visual Basic), se interpreta (con lo que se ahorra el tiempo de compilacin y linkado, pero se pierde a la hora de ejecutarlo), la correccin de los errores es ms simple, ofrece un control muy bueno sobre el sistema y el acceso a bases de datos es compatible con ADO y ODBC (garantizndonos as el acceso a bases de datos como Oracle, SQL Server, Access). Requisitos: Estos requerimientos son muy distintos a los del usuario final. Se necesita el sistema operativo Windows NT 4.0 o Windows 2000 server con el servidor de internet Microsoft Internet IIS 3.0. NOTA: Existe una versin de desarrollo (Personal Web Server 4) para Windows 9X y para Windows NT Workstation, orientada para la realizacin de pruebas con un servidor distinto al de internet.

Para ms informacin:

www.microsoft.com/vbscript/us/vbstutor/vbstutor.htm, documentacin oficial y tutorial de Microsoft. www.microsoft.com/vbscript, pgina de la compaa sobre el lenguaje ASP, cdigo y links. techzone.solutionsiq.com/home-default.htm, pgina con las ltimas novedades sobre las tecnologas de internet.

Copyright eitig.com 1999-2000 Resolucin recomendada: 800 x 600 webmaster@eitig.com

42