Curso de diseño de paginas web

44
8/3/2019 Curso de diseño de paginas web http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 1/44 Curso de Diseño de Páginas Web

Transcript of Curso de diseño de paginas web

Page 1: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 1/44

Curso de Diseño de Páginas Web

Page 2: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 2/44

0

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

Primeros 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

Diseñ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

¿Hemos terminado?

§

  Comprobaciones finales§  Colocar nuestra página en internet: FTP

Conceptos avanzados

§  Frames

§  Capas (Draw layer)

§  CSS (Cascade Style Sheets)

Page 3: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 3/44

Page 4: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 4/44

2

<TABLE></ TABLE>.

Por lo tanto, las páginas web son un fichero de texto en el que se incluyen una serie de etiquetas quedefinen zonas, formatos y características de los elementos que contienen y que, posteriormente, elnavegador se encarga de traducir a un formato gráfico, que es lo que finalmente vemos en pantalla.

A continuación presentamos un fragmento de código HTML de una página web.

Como se puede observar, aparecen algunas palabras extrañas. Es la representación de las tildes, que serealiza mediante el símbolo "&" seguido de la letra que queremos acentuar (a, e, i, o, u) y seguido de"acute;". Por ejemplo, si queremos acentuar la "a" se realizaría 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 lastildes directamente, su representación se realiza así debido a que las primeras versiones de losnavegadores no las admitían.

Otra representación extraña es &nbsp; que indica que no hay nada, pero que ha de representarse enpantalla. Esto es útil cuando se quiere mostrar una celda vacía dentro de una tabla, una línea en blanco, ...

También se aprecia que las etiquetas se pueden combinar. Por ejemplo, si queremos escribir un texto ennegrita y cursiva, tendremos que poner las etiquetas correspondientes a una línea de texto (<P></P>, P depárrafo), la etiqueta de negrita (<B></B>, B de bold, que significa negrita en inglés) y la etiqueta decursiva (<I></I>, I de italic, que significa cursiva en inglés), lo que resultaría:

<P><B><I>Hola, bienvenidos al curso</I></B></P>

Page 5: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 5/44

3

Pero esta representación mediante etiquetas del HTML presenta algunos "huecos", a modo de ilustración,¿cómo indico que el texto sea de un determinado tamaño? . Pues bien, las distintas propiedades que tengael elemento también van dentro de la primera etiqueta. En el caso del texto sus propiedades son el tamaño,el tipo de letra, la alineación, el color, ...

<P size=1 align=left face=Arial>Hola, aqui va el texto</P>Al igual que el resto de los elementos, la página web se representa entre 2 etiquetas, éstas son:<HTML></HTML>, por tanto si el código de nuestra página web no incluye estas 2 etiquetas, la pantallaaparecerá en blanco. Pero una página web no son sólo los elementos que vemos, también existen otroselementos que no apreciamos, como pueden ser el título, el autor, su contenido, ... estas partes se veránmás adelante.

Pero como hemos mencionado anteriormente, no es necesario saber HTML, ya que las herramientas decreación de páginas web pondrán el HTML por nosotros. Lo único que tendremos que hacer es diseñarnuestra página tal y como se verá en pantalla y la herramienta hará el resto.

Page 6: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 6/44

4

Curso de Diseño y Creación de páginas web: Partes de una página  

Como ya hemos visto, toda página web debe estar encerrada entre las etiquetas

<HTML></HTML>, que indican al navegador que el documento que se está recibiendo setiene que visualizar como un documento de internet.

Básicamente, una página web la forman 2 partes: cabecera y cuerpo.

En la cabecera, compuesta por las etiquetas <HEAD></HEAD> que se colocan acontinuación de la etiqueta <HTML>, se definen todas las características relacionadas conla página. Estas características son: su título, su autor, el contenido, palabras clave, ...principalmente utilizaremos el título y el autor.Pero la mayoría de estas características no se representan en pantalla, excepto el título, quelos navegadores lo incorporan al título de la ventana, como muestran las imágenes.

El resto de las características 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 Cuéllar">

En el cuerpo de la página, encerrado por las etiquetas <BODY></BODY> y situadoinmediatamente después de la cabecera, se definen todos los elementos que contiene lapágina web, es decir, aquí insertaremos el código HTML de todos los objetos que aparecen(o no) en pantalla.

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

Observandose en pantalla lo siguiente:

Page 7: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 7/44

5

Page 8: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 8/44

6

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,

que incluyen más o menos los mismos elementos, y que se consideran los elementos más básicos eimprescindibles que incluye una página web.

Estos elementos son básicamente:

Texto y todas sus propiedades: color, tamaño, tipo de letra, cursiva, subrayado, negrita, justificación, indentación, ...

Imágenes. Sus propiedades son: el nombre del archivo donde está contenida la imagen, su altura, suanchura, su justificación, la anchura del borde y la forma en que se alineará el texto con relación a la imagen.También poseen una propiedad llamada alt : al poner el cursor encima de la imagen, saldrá un recuadro decolor amarillo con el texto que hayamos escrito.La imagen puede ser estática (una simple foto) o una animación (casi siempre un archivo en formato GIF).

Tablas. Las propiedades son: el número de filas y de columnas, su justificación, la alineación delcontenido de una celda, el color o imagen fondo, la anchura del borde.

Hipervínculos o enlaces o links. Es una propiedad especial que se aplica al texto o a las imágenes.Consiste básicamente en que al hacer click con el ratón sobre el objeto que posee esta propiedad, entramosautomáticamente en la dirección web que le hayamos indicado previamente.

Para distinguirse mejor, el navegador conmuta automáticamente la forma del puntero de una flecha a una

mano .

Objetos de formularios. Estos objetos no son tan corrientes como los anteriores, sonmás bien propios de cualquier aplicación Windows. Estos objetos son botones, casillas de verificación, listasdesplegables, cuadros de texto, ...

Page 9: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 9/44

7

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

Ante la avalancha de e-mails recibidos, dentro de unos meses se añadirán cursos prácticos sobre las distintasherramientas que aquí se describen.

Las herramientas de creación de páginas web o editores de páginas web, fueron concebidas con el propósito deevitar al desarrollador un conocimiento exhaustivo del lenguaje HTML y una ayuda para el diseño de nuestraweb.Su apariencia es prácticamente igual a la de cualquier editor de textos. Lo único que debemos hacer es escribiren pantalla, elegir el tamaño, el color, la apariencia del texto, ... dibujar tablas, insertar imágenes, guardar loscambios y ya tenemos lista nuestra página web.

Las herramientas constituyen la mejor manera de desarrollar una página web ya que nos evitan tener quecodificar en HTML, y mediante un intuitivo interface gráfico iremos construyendo nuestra web sin escribir niuna sola línea de código. Además, mientras estamos desarrollando, tendremos una visualización prácticamenteigual a la visualización final en un navegador de internet.

Las más destacadas son:

Dreamweaver (de Macromedia)

Sin duda es la mejor de todas, aunque a primera vista puede parecer algo complicada, ya que su apariencia sedesmarca del estándar Windows. Pero es, sin lugar a dudas, la más completa: minimiza el código HTML queinserta en la página, maneja a la perfección las capas y controla todos y cada uno de los parámetros y opcionesde cada elemento (incluyendo CSS).

Está pensada para profesionales y muchas de las opciones que incorpora nos vendrán grandes al principio (comocomprobación automática de links, mapa de nuestra página, ...), pero eso no significa que no podamos usarla.También incorpora de serie unos efectos visuales en JavaScript bastante útiles (entre los que se incluyen lasimágenes que cambian al pasar el ratón por encima y los llamados Timelines).

Éste es el aspecto que presenta su editor.

Page 10: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 10/44

8

Puedes descargarte una versión de prueba en www.macromedia.com (sólo funciona durante 30 días, pasado estetiempo, 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 herramientapreferida por los desarrolladores. Complicada en un principio por la gran cantidad de opciones que posee, peromuy familiar gracias a la apariencia estándar de cualquier aplicación Windows. Su calidad es muy alta peroincorpora menos opciones que el Dreamweaver, 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, es

que permite controlar la repetición de la imagen del fondo de la página, pudiendo repetirse por toda la pantalla,bien en horizontal, bien en vertical, o que no se repita (además de poder definir las coordenadas iniciales yfinales).

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 tengamosinstalado en nuestro ordenador. Es bastante sencillo de usar: combina 3 pestañas en su parte inferior que

Page 11: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 11/44

9

permiten conmutar la visión de nuestra página (desarrollo, HTML y dentro del navegador de internet).

Útil para nuestros comienzos, pero se quedará corto en muchos aspectos cuando queramos desarrollar un sitiomás elegante. Hay que destacar que tiene la mala costumbre de insertar mucho "código basura" en nuestrapágina, 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. Ambos no funcionan muy bienen 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 respectivosnavegadores de internet. Son muy útiles y recomendables para principiantes por su sencillez y por incluir lasopciones justas. Se trata de 2 herramientas sin grandes pretensiones pero que representan el primer paso en elaprendizaje.

Lo ideal es empezar diseñando con alguna de las dos y, una vez aprendida la mecánica, pasar a desarrollar conotras herramientas más potentes.

 

Page 12: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 12/44

10

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

Nuestra página web, como ya hemos visto, está compuesta únicamente por códigoHTML que posteriormente un navegador de internet traduce a formato gráfico. Portanto es importante que conozcamos algo más sobre los navegadores.

Hoy en día el mercado de navegadores de Internet está dominado principalmentepor 2 aplicaciones :

§  Microsoft Internet Explorer (IE)

§  Netscape Navigator (NS)

Estos 2 aplicativos abarcan el 95% del mercado, pero es inevitable mencionar el5% restante. Este porcentaje lo representan navegadores como Mosaic u Operaentre otros (sin olvidarnos del navegador exclusivo de Austin Powers).

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

Page 13: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 13/44

11

últimos es casi del 100%. Y esto es algo importante al desarrollar cualquier tipo deaplicación orientada a Internet, ya que cada navegador es un mundo distinto,ofreciendo/soportando un determinado conjunto de elementos, incluso el mismoelemento puede representarse de forma distinta (por ejemplo el "colspan" de unatabla en IE o NS).

Dicho esto, centrémonos en los dos más conocidos.

 

Microsof InternetExplorer:

Una de las causas de su gran expansión (sin entrar en la polémica de si es legal ono) es que se incluye de serie con el sistema operativo de la casa, y parece que hadado resultado porque es el navegador más usado hoy en día.

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 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, por ejemplo las hojas deestilo (CSS) que NS ignora o incluso borra de pantalla (esto es hasta lafecha, no obstante, con el lanzamiento del Navigator 6.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, ...

Actualmente, está disponible la versión 5.5

TRUCO: Si vuestro explorer es uno de esos "proporcionado por XXXXX" o algopor el estilo, y quereis quitar el molesto titulito, lo único que teneis que hacer esmodificar esa línea en el registro de Windows (utilizando el programa

"C:\WINDOWS\RegEdit.exe"). Para ello, buscar la cadena "proporcionado" (pulsarla tecla F3 dentro del programa RegEdit) y una vez localizada cambiarla por lo que

Page 14: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 14/44

12

más o guste.También podeis personalizar la animación que aparece justo debajo de los botonesde la ventana (minimizar, maximizar, cerrar) cambiando el archivo de imagen quecontiene la animación (que se especifica dentro del registro en la línea anterior a ladel título del programa).

 

Netscape Navigator:

Este navegador tiene versiones para casi todas las plataformas informáticasexistentes (Windows, Unix, OS2-Warp, Linux) y en el mundo de UNIX esutilizado por casi la totalidad de los usuarios, razón de peso para no despreciarlo, yaque no todo es Windows.

Entre sus ventajas destacan:

•  No es sólo un navegador de internet, sino que viene integrado con unprograma de correo (Netscape Messenger) y un programa de creación depáginas web (Netscape Composer)

•  La descarga de archivos es mucho más rápida, lo que permite que laspáginas web se visualicen más rápido y que los archivos que nos bajemostarden 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 mismoordenador, lo que permite que cada usuario disponga de sus propios"marcadores" (en IE se llaman "favoritos"), el programa de correo sólorecoge los mensajes del usuario correspondiente, tiene cachés separadaspara cada usuario, ...

•  Es un programa que no es de Microsoft

Page 15: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 15/44

13

Curso de Diseño y Creación de páginas web: Diseño web, ajustes ycolores

 

Una vez elegido el tema, los contenidos y los detalles de nuestra página web llegala hora de la verdad: el diseño de nuestra web.

Algo muy, muy recomendable es que todas nuestras páginas (si que es nuestra webestá compuesta de varias páginas) tengan una apariencia más o menos similar, esdecir, nada de tener cada página de un color distinto, los contenidos colocados enun lugar diferente cada vez, ...Y también es mejor tener muchas páginas pequeñas con un buen índice, que unagrande cuyo tiempo de carga es muy, muy superior y que además perdemos tiempoen cargar cosas que tal vez no le interesen a nuestros visitantes.

Ni todo es texto, ni todo son imágenes. Conviene mezclar un poco, por ejemplo yosuelo poner las imágenes entre varias líneas de texto o combinadas con el texto enel margen izquierdo de pantalla.

Y ya que los navegadores y los sistemas operativos ponen a nuestro servicio

gráficos con millones de colores y alta resolución, aprovechemoslo. Es bueno quelas imágenes tengan el mayor colorido y resolución posible (pero ojo con el tamañodel archivo), combinar los colores del texto dependiendo si son encabezamientos,títulos, contenidos, ejemplos, ... poner las letras en distintos tamaños, distinto tipode letra, negrita, ... ya sabeis, imaginación al poder.

A la hora de diseñar os topareis con unos problemillas bastante habituales y de fácilsolución:

•  Ajustar el contenido en pantalla

  Mostrar varias imágenes en la misma línea•  ...

La solución es la utilización de tablas. Dichas tablas las dividiremos a nuestrogusto, y en cada celda colocaremos la imágen, texto o nada si es preciso, de maneraque todo cuadre a la perfección en pantalla.

www

Page 16: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 16/44

14

 

eitig 

com

Pero no debemos olvidar que existen varias resoluciones de pantalla, la más comúnes 800 x 600, pero por si acaso definiremos los tamaños de las tablas, filas ycolumnas en porcentaje y no en pixeles.

Curso de Diseño y Creación de páginas web: Imágenes yanimaciones

 

Imágenes y animaciones

Como ya hemos visto, uno de los elementos que podemos incluir en nuestra páginaweb son archivos de imágen. Los navegadores admiten practicamente cualquierformato de archivo de imágenes, pero en la práctica los diseñadores utilizan sólodos: JPEG y GIF.

Aquí vemos unos ejemplos:

Archivo JPEG

Page 17: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 17/44

Page 18: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 18/44

16

src="..." width="..." height="..." border="..." alt="..." align="..." >, el únicoparámetro que es obligatorio es src, que indica el archivo de imágen a insertar.

Dentro de una imágen también podemos definir mapas o hot spot . Esto no es másque una determinada zona poligonal que posee un hipervínculo. Aquí teneis un

ejemplo (la imágen posee 2 mapas):

No creo que existan muchas páginas web modernas sin imágenes. Las imágenes(bien elegidas y bien colocadas) proporcionan un colorido visual impresionante,además, "una imágen vale más que mil palabras". Pero no olvidemos que eninternet "una imagen tarda más en cargar que mil palabras", 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. Si laimágen es más pequeña que el fondo, la imágen se repetirá a modo de mosaicohasta llenar todo fondo (aunque este efecto se puede desactivar).

Dicho efecto puede observarse en cualquiera de las páginas de esta sección. Comoimagen de fondo se utilizó la imagen siguiente:

Para insertar una imágen de fondo debemos modificar la etiqueta <BODY> y poneren su lugar:

<body background="archivo_de_imagen">

 

Favoritos

Al añadir una página web a "favoritos", el navegador automáticamente asigna un

Page 19: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 19/44

17

icono por defecto dicha página, esto se puede apreciar en la figura siguiente.

Para que el navegador asigne a nuestra página un icono diferente, debemos tener unarchivo llamado "favicon.ico", que contiene el icono a mostrar. O también se puedeañadir la siguiente línea dentro de las etiquetas <head></head>:

<link rel="SHORTCUT ICON" href="XXXXXXXX.ico">

Una vez añadida la página a "favoritos", también se cambiará el icono por defectoque aparece en la barra de direcciones por nuestro icono.

 

Estas son algunas direcciones en donde podeis encontrar material:

•  www.ciudadfutura.com, buscar en la sección de internet gratis cantidad deimágenes, fondos, iconos, ...

•  www.tecnopolis.com, un buscador poco conocido pero que posee unabuenísima sección dedicada a las imágenes.

•  www.animfactory.com, imágenes y animaciones para tu página.

•  www.gifmania.com, página con GIFs de temas varios.

•  www.todo-gratis.com, en esta página no sólo hay imágenes, también podrásencontrar muchos recursos gratuitos como por ejemplo contadores,estadísticas, libros de firmas, ...

Curso de Diseño y Creación de páginas web: Añadir música defondo  

Otro elemento multimedia que podemos incluir en nuestra página es el sonido. Perono es muy aconsejable añadir música de fondo, ya que además de la tarjeta desonido, se necesita el uso de software externo al navegador para poder escucharla.Además, la inclusión de música ralentiza en exceso la carga de nuestra página, y notodos los navegadores soportan su uso.

La música que se reproduce, son archivos en formato MIDI (en realidad puede

reproducirse cualquier archivo de sonido, pero se opta por este tipo debido a sureducido tamaño). Pero este tipo de archivos sólo contienen música instrumental, y

Page 20: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 20/44

18

la cantidad y calidad de los instrumentos que escuchemos depende en exclusiva denuestra tarjeta de sonido.

Internet Explorer reproduce la música sin mayores dificultades, pero su competidor,el Netscape, utiliza Java para ello. Esta técnica es bastante lenta y no funciona muy

bien (otra razón más para no incluir sonido en nuestra página).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 (*.mid) a reproducir,y en LOOP el número de veces a reproducirlo (1, 2, 3, ...) para reproduccióncontínua deberemos poner "infinite".

Page 21: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 21/44

19

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

Principalmente existen 3 tipos de links distintos:

o  A una página web de nuestro dominio

o  A una parte concreta de nuestra página

o  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; pero a la hora de ponerel destino debemos tener en cuenta las rutas y los directorios.

Todos los links a cualquier archivo que se encuentre en nuestro mismo dominioNUNCA incluirán la ruta del directorio inicial en donde está dicho archivo. Porejemplo, si todos nuestros archivos se encuentran en el mismo directorio inicialllamado "C:\PAG_WEB\", los links serán simplemente el nombre del archivo, porejemplo "index.htm", "bienvenida.html", "foto1.jpg", ...

Si por el contrario tenemos en el directorio inicial "C:\PAG_WEB\" algunosarchivos 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 subdirectoriollamado "C:\PAG_WEB\FOTOS\ANIMACIONES\" para referenciarlo sería"\FOTOS\ANIMACIONES\", la idea es muy sencilla.

Esto se debe a que si nuestra página se llama "index.htm", en local se llama"C:\PAG_WEB\index.htm", pero cuando se coloque en nuestro dominio de internetse llamará "http://www.eitig.com/index.htm", con lo que omitiendo las rutas de losdirectorios iniciales, se pondrá por defecto la ruta inicial del lugar donde seencuentre.

Con esto conseguiremos que nuestra página se pueda visitar de igual manera eninternet, como en local para realizar las pruebas.

Lo mejor es crearse un directorio donde estén todas nuestras páginas web, y dentrode este directorio crear subdirectorios (\fotos, \archivos, \estilos, \scripts, \sonidos,...) con lo que conseguiremos una buena organización.

-Ir a la parte superior de la página>

 

Page 22: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 22/44

20

Links a una parte concreta de nuestra página

Para poder implementar los links a una parte concreta de una página web se utilizaun elemento llamado anchor o link interno. No es más que una marca querealizamos en nuestra página 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 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 ...") 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 página>

 

Links a páginas de otros dominios

Para implementar los links a otras página web que no pertenezcan a nuestrodominio se utiliza la misma sintaxis HTML de un link a una página de nuestrodominio. 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 imágen que posee el hipervículo </a>

Page 23: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 23/44

21

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, ocualquier cosa. Si no lo habeis visto nunca, fijaos en la parte inferior de esta página.

Que nuestros visitantes puedan comunicarse con nosotros puede ser bastante útil(cada cuál decida para qué).

La forma más sencilla de ponernos en contacto con ellos es mediante e-mail. Unaposible 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 decorreo, pero esto no es demasiado cómodo y puede que alguien escriba mal nuestradirección y que nunca nos llegue su comentario.

Para ello, y como segunda opción, está el comando HTML <ahref="mailto:destinatario"> (donde pone destinatario por supuesto tendremosque poner una dirección de correo válida). Esta orden abre el programa de correopredeterminado (Outlook, Messenger o que el sea) por la pantalla que sirve paraescribir un nuevo mensaje. Dicho mensaje ya tiene escrita la dirección deldestinatario (que es la que nosotros pusimos despues de "mailto:").

Como se puede observar, el comando HTML no es más que un link normal ycorriente en el que la dirección de destino no es más que una dirección de correoelectrónico. Por tanto, este comando se usa de igual manera que un link normal ycorriente (lo podemos poner en una foto, texto, ...)

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

 

Básicamente hay 2 formas de distribuir archivos a nuestros visitantes: mediante

HTTP o mediante FTP.El protocolo FTP es algo más complicado para nuestros propósitos, por lo que lodescartaremos.

Mediante HTTP es bastante sencillo. La mecánica es la misma que con cualquierlink a una página web normal y corriente. En una parte del texto o en una imágenañadiremos un link a nuestro archivo, y con esto conseguiremos que cuando sepulse sobre el enlace, se guarde el archivo en la máquina local de nuestro visitante.

En las imágenes observamos lo que ocurre al distribuir un archivo llamado"dblist.zip".

Page 24: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 24/44

22

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 opción "Guardar en disco", hechoesto 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 nuestrasfamilias por parte de nuestros visitantes e incluso tener problemas legales.

Page 25: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 25/44

23

Page 26: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 26/44

Page 27: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 27/44

25

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

Nuestra página ya está terminada y hemos realizado las últimas comprobaciones, lo único que nos falta es

colocar nuestra página en internet. Para ello utilizaremos el protocolo FTP (File Transfer Protocol). El FTPes un protocolo que nos permite transferir archivos entre ordenadores, en este caso, entre nuestro PC y elservidor de internet.

Lo primero es buscar un servidor de internet que nos permita colocar nuestras páginas (recomendable demanera gratuita aunque no es obligatorio). Esto hoy en día eso ya no es un problema, porque cualquier portalde internet nos ofrece más o menos 5 MB de espacio gratis para nuestras páginas web (entre ellos terra,yahoo, xoom, telepolis, network solutions, inlanders, todo-gratis,...). Las diferencias entre unos y otros sonel espacio que nos ofrecen, la velocidad de descarga, la propaganda que incorporan a nuestras páginas, ...

Otra opción es comprar nuestro propio dominio. Esto no siempre es posible, ya que la mayoría de losdominios ".com" suelen estar en posesión de algún particular o empresa, aunque si realmente estamosinteresados, podemos realizar una oferta a su propietario.También debemos tener en cuenta la legislación del país al que pertenece dicho dominio. Por ejemplo, enespaña (".es") sólo se puede adquirir un nombre de dominio si dicho nombre se corresponde con el nombrede una empresa, ni siquiera se pueden adquirir dominios que coincidan con el nombre del producto quequeremos publicitar.Para más información 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, elnombre del servidor (Host Name), y lo más importante, nuestra dirección de internet.

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, esalgo más complicado pero es posible, por lo que, recomiendo la utilización de un programa de FTP).Los programas más conocidos son CuteFTP y WS_FTP LE, que se pueden descargar de manera gratuita enwww.downloads.com. Sus aspectos som muy similares al explorador de archivos de Windows 9x, comopuede observarse en las imágenes.

CuteFTP

Page 28: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 28/44

26

WS_FTP LE

 

Cute FTP de la compañía GlobalScape, es mucho más gráfico y amigable, además de poseer asistentes y latípica ventana inicial con los trucos del día. Pero WS_FTP LE de IPSwitch, consume menos recursos

máquina. Cada cuál que elija el que más 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 soncorrectos). Una vez conectados, haremos lo que queramos con nuestros archivos y con nuestro espacio en elservidor (crear directorios, copiar archivos, borrar archivos, ...), la mecánica es la misma que con nuestrodisco duro.

Llegado a este punto se nos plantea una pregunta: ¿cuál es la primera página que se va a ver un usuario alteclear nuestra dirección?.

Cada servidor suele variar algo su política, pero lo normal es que la primera página que se va a abrir es lapágina llamada "index.htm", por lo que si nuestra página 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 dirección que nos dijeron y daremos unavuelta a ver que pasa.

NOTA: la dirección que nos suelen proporcionar hace publicidad al portal, además de ser bastante larga y

Page 29: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 29/44

27

complicada (usuarios.terra.es/mi_pagina, members.xoom.com/mi_pagina, ...). Y se plantea otro problema: elnombre 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).

Para evitar esto, existe el servicio de redireccionamiento automático 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 dirección que nosostros digamos(usuarios.terra.es/mi_pagina), algo que os recomiendo encarecidamente y que vuestros visitantesagradecerán.

Este servicio no sólo lo realiza www.pagina.de, existen más como: www.easy.to/remember,www.gratix.com, ...

Page 30: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 30/44

28

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. Estas vistas nos permitirán, por ejemplo, fijar en una de ellas elíndice, el logotipo, ... mientras que en la otra mostramos el contenido seleccionado.

En realidad, una página web con frames, no es más que un pequeño fragmento enHTML que carga una página web en cada una de las vistas que hayamos definido.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.

•  Y uno inferior donde se muestran los temas pertenecientes al contenidoseleccionado (este marco posee barra de scroll).

Para conseguir esta visualización necesitamos 3 páginas HTML:

•  Una para definir los marcos que vamos a tener en pantalla. Este sería más omenos el código HTML que incluiría dicha página:<frameset rows="80,*">

<frame name="topFrame" scrolling="NO" src="Contenidos.htm">

<frame name="mainFrame" src="Indice.htm">

</frameset>•  Y las 2 páginas 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 tablala dividimos en filas y columnas. A cada celda le decimos (mediante la propiedadsrc) que página tiene que mostrar. Estas suelen ser las combinaciones más usuales.

Pero no hay límite, podemos crear las combinaciones que queramos, pero no

Page 31: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 31/44

29

debemos olvidar que en cada vista se carga una página y excesivas vistas puedenralentizar sobremanera el sistema.

Esta es la segunda capaCurso de Diseño y Creación de páginas web: Capas (Draw Layer)  

Una capa no es más que un contenedor HTML, es decir, un elemento que agrupa aotros elementos. Esta agrupación nos permite tratar a todos los elementos como sifueran un todo, y gracias a eso, podemos crear unos efectos visuales muyinteresantes utilizando poco código: como ocultar/mostrar una capa (que ocultaría atodos los elementos contenidos en esa capa), cambiar su posición en pantalla, su

color o imagen de fondo, ...

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

•  Otra sección de EITIG, lo más web

•  La página principal de esta sección

•  www.ciudadfutura.com, este portal tarda un poco en cargar, pero poseeunos menus con transiciones a la hora de abrirse y cerrarse francamentebuenos

Las capas se posicionan en la pantalla de manera absoluta, es decir mediantecoordenadas X, Y, Z, largo y ancho. La tercera dimensión (la coordena Z o z-index), define la superposición de las capas. Una capa de orden superior ocultará aotra de orden inferior.

El posicionamiento absoluto tiene un inconveniente: la resolución de la pantalla.

Page 32: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 32/44

30

Una capa colocada en unas determinadas coordenadas, si la resolución con la quese 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,los navegadores automáticamente activan el scroll de pantalla.

Como se ha dicho, una capa es un contenedor, pero no hay limitaciones respecto alcontenido. Una capa puede contener cualquier cosa, por ejemplo texto, imágenes,plug-in´s, applets e incluso otra capa.

Las capas se definen normalmente mediante las etiquetas DIV o SPAN (peroexisten otras formas como las capas CSS y las capas de Netscape utilizandoLAYER e ILAYER).Internet Explorer 4.0 y Netscape 4.0 soportan a la perfección las capas creadas conDIV y SPAN, pero las capas que utilizan las etiquetas LAYER e ILAYER sólo lassoportan las versiones superiores.

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, la segundacapa no es visible, pero al pasar el ratón sobre el texto "Mostrar" se muestra,ocultando por su situación en el eje Z a la primera capa. Al alejarse el ratón deltexto "Mostrar" se vuelve a ocultar la segunda capa.

Page 33: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 33/44

31

Curso de Diseño y Creación de páginas web: CSS (Cascade StyleSheet))

 

Los estilos constituyen la forma de definir el aspecto de una etiqueta HTML dentrode una página web. Si no se especifica el estilo, el navegador pondrá uno pordefecto, que en el caso del Explorer y del Navigator son distintos.

Los estilos pueden definirse o modificarse poniendo los parámetros en la etiqueta:

<p><font size="7" face="Arial" color="#CCCCCC"> Aquí va elencabezamiento </font></p>

El texto anterior se visualizaría en color #CCCCCC, con un tamaño de 7 y con tipode letra Arial, como puede verse a continuación:

Aquí va elencabezamiento

 

Pero el problema que presenta es que si queremos cambiar alguno de losparámetros, debemos cambiarlo etiqueta a etiqueta por toda la página. Para evitareste problema, se redefinen los estilos para cada etiqueta. Así cada vez que seencuentre esa etiqueta dentro de la página, se visualizará con el estilo que nosotroshemos definido y no con el estilo por defecto.

<STYLE>P { FONT-FAMILY=Arial; FONT-SIZE=7; FONT-

COLOR="#CCCCCC" }</STYLE>

En el caso en que tuvieramos varias páginas y en cada página definieramos elestilo. Cuando quisieramos modificar el estilo de todas, nos pasaría lo mismo quecuando los definíamos etiqueta a etiqueta en una misma página.

Una práctica muy usual consiste en definir los estilos en un archivo aparte y cargarlos estilos de ese archivo en cada página (a estos archivos se les denomina Hojas deEstilo en Cascada).Para cargar el archivo de estilos debemos poner:

<link rel="stylesheet" href="archivo.css">

Y dentro del archivo "archivo.css" tendríamos:

<!--P { FONT-FAMILY=Arial; FONT-SIZE=7; FONT-COLOR="#CCCCCC" }

--!>

Page 34: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 34/44

32

 

Pero las CSS nos permiten definir mucho más, por ejemplo la orientación del papelde la impresora, las propiedades de las celdas de una tabla, ...

Un efecto muy vistoso consiste en redefinir el aspecto de los hipervínculos para queal pasar el ratón por encima se subrayen y al quitar el ratón desaparezca elsubrayado (como se hace en esta página), 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, JavaScript y

VBScript

 

Una vez que hayamos creado nuestra página web, nos daremos cuenta, que a pesardel colorido, las animaciones y los gráficos (que dan más o menos vistosidad),nuestra página es totalmente estática.

Pues bien, alguien antes que nosotros se dio cuenta de este problema, que sesolucionó de una forma muy simple: programando.

Existen mayoritariamente 3 formas o 3 lenguajes para crear algo de interactividaden nuestra página: applets (en Java), script en JavaScript o en VBScript. A modo denota mencionaré también un programa llamado Flash de la compañíaMacromedia que empieza a convertirse en una seria alternativa a los lenguajesScript.

Java:

Java es un lenguaje de programación orientado a objetos de propósito generalcreado por la compañía Sun Microsystems.

Dentro de este lenguaje disponemos de una clase especial llamada "applet" queimplementando sus métodos conseguimos realizar un subprograma Java quenuestro navegador entiende, y lo más importante, ejecuta.

Para poder insertar el applet dentro de nuestra página ha de estar comprendido entre2 etiquetas: <APPLET></APPLET>, y como es típico del HTML acompañado deparámetros tales como el nombre de la clase, el espacio de pantalla pararepresentarlo, ...

Personalmente no recomiendo la insercción de applets dentro de una página webporque mientras se está cargando/interpretando el applet, el navegador no responde,

y por tanto, las demás páginas web que estén abiertas en ese momento se quedarántemporalmente colgadas. Además, el gran inconveniente de Java es su lentitud, que

Page 35: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 35/44

33

se compensa por su portabilidad.Es aconsejable utilizar JavaScript (que es más rápido) y para tareas que no sepuedan implementar en JavaScript utilizar Java.

Si alguien quiere ver los applets en acción, que se pase por www.spygots.com. Y

para aprender más sobre Java, POO, ... os remito a la sección de ProgramaciónOrientada a Objetos que posee eitig.

JavaScript:

No hay que confundir JavaScript con Java. JavaScript fue desarrollado porNetscape para añadir interactividad a las páginas 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 reconocía. Pero hoy en día está integrado en casi la totalidad denavegadores de internet del mercado (la implementación de Microsoft en el IE sellama JScript y difiere ligeramente de JavaScript).

Hay que decir que es el lenguaje más utilizado en internet para añadir interactividada las páginas web. Puede que al navegar por alguna página web lo hayamos visto,pero no nos hayamos dado cuenta. Se utiliza sobre todo para cambiar las imágenesal pasar el ratón encima, moverlas, validar los datos, escribir mensajes en la barrade estado, implementar un reloj, ...

JavaScript al ser un lenguaje de Script, el código se embebe dentro del códigoHTML de las páginas web. No hay que compilarlo ni linkarlo, sino que el mismonavegador de internet se encarga de interpretarlo. No necesitamos ninguna

herramienta especial para programar en JavaScript, simplemente con el mismoblock de notas de Windows podemos escribir código Script, aunque esrecomendable utilizar alguna herramienta que nos ayude sobre todo a la hora dedepurar errores (como puede ser la que se ofrece con Microsoft FrontPage).

Aquí teneis una de función muy útil, lista para usar:

<script language=JavaScript> // Esta función muestra en la barra de la ventana el texto introducido comoparámetrofunction mensaje(texto){

status = texto}</script>

Adjunto un MANUAL para quien quiera aprender este lenguaje.

Existen infinidad de links interesantes, entre ellos:

•  lo más web, otra de mis páginas personales. Merece la pena ver la intro.

•  www.bratta.com, dispone de código DHTML y Scripts gratuitos. Muy

Page 36: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 36/44

34

recomendable

•  developer.netscape.com, página para los desarrolladores en JavaScript.Aquí se podran encontrar manuales de todas las versiones disponibles dellenguaje y también de HTML y DHTML de Netscape.

•  www.jsworld.com, aquí hay gran cantidad de código listo para utilizar,además de unos manuales con bastante ejemplos.

•  www.javascripts.com, página repleta de Scripts gratuitos, explicaciones delcódigo, ...

•  msdn.microsoft.com/scripting, sección de Microsoft dedicada a latecnología Script.

•  webreference.com/programming/javascript.html, esta página contienecantidad de enlaces y recursos del lenguaje.

•  tanega.com/java/library.html, cantidad de código listo para usar.

•  guille.costasol.net/indice_cf.htm, la página de Guille, incluye muchostrucos para diversos lenguajes.

•  www.chami.com/tips/javascript, trucos de JavaScript

•  www.dannyg.com/javascript, esta es la página personal de un famosoprogramador en JavaScript, apodado el apostol de JavaScript.

•  www.gamelan.com

VBScript:

El lenguaje VBScript es el intento por parte de Microsoft de adentrarse en elnegocio de los lenguajes de Script. Su propósito 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, sólo loreconocía el Internet Explorer, pero ahora creo que Netscape 6.0 también losoporta, aunque existe un plug in que se puede conseguir en www.netscape.compara que el Navigator soporte su uso.

Como nota hay que decir que fue el lenguaje utilizado para programar el famosovirus "I love you".

Links:

•  www.microsoft.com/vbscript/us/vbstutor/vbstutor.htm, documentaciónoficial y tutorial de Microsoft.

•  ww.microsoft.com/vbscript, página de la compañía sobre el lenguajeVBScript, código y links.

•  techzone.solutionsiq.com/home-default.htm, página con las últimasnovedades sobre las tecnologías de internet

Page 37: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 37/44

35

•  msdn.microsoft.com/scripting, sección de Microsoft dedicada a latecnología Script.

•  www.infodial.net/infohelp/htms/vbscript.htm, contiene ejemplos ydocumentación.

 

Curso de Diseño y Creación de páginas web: Insertar código Script  

Como JavaScript se embebe dentro de código HTML, debemos indicar al navegadorque el texto que está recibiendo es una rutina en Script que debe interpretarse y notexto a mostrar en pantalla.Esto se realiza mediante las etiquetas <SCRIPT></SCRIPT>, pero además debemosindicar en qué lenguaje está escrito para facilitar la labor de interpretación (aunque pordefecto se toma JavaScript), esto se hace:

<SCRIPT LANGUAGE="JavaScript"></SCRIPT>

Para evitar que los navegadores que no soporten JavaScript o tengan desactivada esaopción muestren el código en pantalla como si se tratase de texto normal y corriente,se utilizan las etiquetas HTML que indican que es un comentario (<!--, //-->). Con estoconseguiremos que si el código se trata como HTML no salga en pantalla.

Con lo que a la hora de codificar un Script, 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. Lo que se suele hacer en colocarlo entre el final de la cabecera yel cuerpo, o dentro de la cabecera.Otra práctica bastante extendida es colocar nuestras funciones en un archivo de texto(pero con extensión .js) y desde la página HTML llamarlo. Por ejemplo, si nuestroarchivo se llama rutinas.js, el ejemplo quedaría de la siguiente manera:

<SCRIPT LANGUAGE="JavaScript" src="rutinas.js" ></SCRIPT>

Y dentro del archivo rutinas.js:

<!--

Aquí insertaríamos nuestro código JavaScript

Page 38: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 38/44

36

 //-->

Con esta práctica conseguiremos reutilizar de una manera más sencilla rutinas tancomunes como la de escribir mensajes en la barra de estado del navegador, o las

funciones de mostrar/ocultar capas.

 

 © Copyright eitig.com 1999-2000Resolución recomendada: 800 x 600

[email protected]

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, y por tanto, no se pueden guardar ningún tipo dedato en la máquina cliente, ni tampoco recolectar información sobre las operacionesque realizó el mismo (la problemática es similar a la de los autómatas de Moore yMealy).

Las Cookies o "galletitas" se crearon con el propósito de solucionar este problema.Simplemente son archivos de texto normales y corrientes que se guardan en lamáquina cliente y que almacenan fragmentos de información. Nuestro navegador (enel caso de que soporte el uso de Cookies), manda al servidor esta información con cadapetición que le solicitemos, y el servidor con esta información realiza las accionescorrespondientes.

Uno de los usos más extendidos es el de personalizar portales, como por ejemploTelepolis. Pero no sólo sirven para personalizar, también sirven para recoger elnúmero de veces que hemos visitado la página, la hora de nuestro ordenador, ... ytambién se utilizan en páginas de comercio electrónico, 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 elcliente, manda una página inicial para que nos registremos. Cuando nos registramos, seguarda una Cookie con información sobre nuestra ciudad, nuestro signo del zodiaco,empresas favoritas, ...La siguiente vez que visitemos el portal nos sorprenderemos al darnos cuenta quepone: "Bienvenido XXXXX", además de la información meteorológica de nuestraciudad, nuestro horóscopo y la cotización de nuestras empresas en bolsa.

Page 39: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 39/44

37

Las Cookies poseen varias propiedades: valor, fecha de expiración, dominio, path ysecure. Aunque las más utilizadas son valor y fecha de expiración.

Según la fecha de caducidad, las Cookies se clasifican en 2 tipos: Temporales y Semi-permanentes.

•  Temporales son aquellas Cookies que no poseen fecha de expiración, estaCookie no se almacenará en disco.

•  Semi-permanentes son aquellas que sí tienen especificada la fecha deexpiración, una vez superada la fecha, la Cookie desaparecerá.

Dependiendo del modo en que se defina esta fecha, la Cookie expirará al terminar lasesión, pasados X días o en una fecha concreta. Lo normal es que las Cookiesutilizadas para personalizar páginas web sean semi-permanentes y que nunca

caduquen.Las Cookies se guardan junto con un número único de sesión (esto lo haceautomáticamente el sistema) para que no se sobreescriban al entrar en una páginadistinta y también, para que pueda ser reenviada a su página de procedencia lasiguiente vez que entremos en ella.

El problema que presenta el uso de Cookies es que no todos los navegadores lassoportan (depende del navegador y de la versión), además, los navegadores permitenconfigurar el equipo para que no utilice Cookies.

 

Aquí teneis código en JavaScript de manejo de Cookies (descargar un ejemplo deutilización de Cookies).

NOTA: Si se copia al portapapeles el código directamente del explorador, puedeque de problemas la tabulación, ya que se sustituye por espacios en blanco. En esecaso, borrar todos los blancos y volved a poner la tabulación.

 // 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. Para expresarlo en días: 1000 *60 * 60 * 24 * nº de días.function guardarCookie ( nombre, valor, caducidad) {

Page 40: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 40/44

38

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 asignándola una fecha atrasadafunction eliminarCookie ( nombre ) {

document.cookie = nombre + "=NULL; expires=Friday, 2-May-80 00:00:00GMT";}

 // Devuelve el valor de "nombre" almacenado en la Cookie // Si "nombre" no existe, devuelve la cadena vacíafunction recuperarCookie ( nombre ) {

valor = "";// compruebo que exista la Cookieif ( document.cookie ) {

// compruebo que "nombre" tiene asignado algún valorpos = 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 Cookieif (posFin == -2) posFin = document.cookie.length;valor = document.cookie.substring( posIni, posFin );

}}return valor;

}

Para más información:

•  dir.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Cookies.La sección dedicada a Cookies de Yahoo.

•  www.cookiecentral.com. Página con mucha información y links sobre Cookies,merece la pena visitarla.

 

Page 41: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 41/44

39

 © Copyright eitig.com 1999-2000Resolución recomendada: 800 x 600

[email protected]

Curso de Diseño y Creación de páginas web: Problemas con losnavegadores

 

El principal problema que nos encontraremos a la hora de desarrollar rutinas enJavaScript, es que no existe una única implementación de este lenguaje, sino queexisten diferentes implementaciones y diferentes versiones de cada implementación.

Las implementaciones son:

•  JScript, que es el lenguaje de Script que desarrolló Microsoft para su InternetExplorer, en la actualidad se encuentra por la versión 5.5.

•  El JavaScript originario, desarrollado por Netscape, que se encuentra por laversión 1.5.

NavegadorVersión

 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

 

Page 42: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 42/44

40

Cada versión mantiene perfectamente la compatibilidad con las versiones anteriores (almenos eso aseguran las respectivas compañías), es decir, el código que funcionaba conuna versión anterior del lenguaje, funcionará sin problemas en una versión másreciente.

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áginaweb

Resumiendo, es practicamente imposible generar código 100% compatible con ambasimplementaciones. Lo que se suele hacer es introducir dentro del código Script un "IF"que chequea el navegador que se está utilizando, y utilizar en función del mismo, unasintaxis u otra.

Como ejemplo esta función para ocultar capas de un documento:

 // Esta función oculta la capa introducida como parámetrofunction ocultar(capa){

if (ns && document.layers != null) {capa.visibility='hide'

}else if (document.all != null) {

capa.style.visibility='hidden'}

}

 

 © Copyright eitig.com 1999-2000Resolución recomendada: 800 x 600

[email protected]

Curso de Diseño y Creación de páginas web: ASP (Active ServerPages)

 

Hagamos un poco de memoria: en un principio sólo existían páginas web escritas enHTML, por la naturaleza de este lenguaje, totalmente estáticas.

A continuación llegó el CGI (Common Gateway Interface), que eran aplicaciones

Page 43: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 43/44

41

externas que se ejecutaban en el servidor.Esta aplicación recibía peticiones como si se tratase de una página HTML normal, y enfunción de los parámetros que tenía previamente establecidos y los valores que se lehubiesen suministrado la máquina cliente, devolvía como resultado una página HTML.Con esto se lograba que las páginas de internet dejaran de ser estáticas para convertirse

en dinámicas, es decir, nuestra aplicación CGI devolvía una página distinta en funcióndel usuario que la estuviera consultando, el día, la hora, ...

Un ejemplo típico de este tipo de tecnologías lo representan los buscadores de internet.Simplemente constan de una aplicación que se conecta a una base de datos pararealizar la consulta que le hayamos solicitado, y esta aplicación nos devuelve comoresultado una nueva página web que incluye los resultados de dicha consulta. Sin estetipo de tecnología, el concepto de buscador jamás existiría, o por lo menos, no seríaviable su puesta en marcha.

El lenguaje VBScript para servidor o ASP actúa de manera parecida a una aplicación

CGI, pero la mejora que introduce radica en que la aplicación ya no es un programaejecutable, sino un sencillo código Script que nos va a permitir controlar todo lo queocurre en el servidor y construir páginas dinámicas.

La principal ventaja que aporta la programación ASP es la sencillez y la comodidad,pero aunque sige existiendo un programa, su funcionamiento es totalmentetransparente para el programador, ahora es el servidor quien se ocupa del trabajo,nuestra misión únicamente consiste en escribir rutinas en Script.

La funcionalidad que podemos dar a nuestras páginas es impresionante, no sólo por elsimple hecho de poder implementar nuevas funciones como buscadores, foros, ... sinocosas más sencillas, 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 enservidores de intranet), introducir propaganda que cambie cada vez que se visite lapágina, ...

Pero no nos confundamos, disponemos de unas rutinas en el servidor que permitenrealizar páginas dinámicas en función de los parámetros que le hayamos introducido ala rutina, y esta devuelve una página web normal y corriente, que es la que recibe elusuario. Es decir, la página HTML final que le llega al usuario es totalmente estática (amenos que insertemos JavaScript, applets o VBScript).Por lo tanto, a la hora de programar en ASP no hay que olvidar que todas lasoperaciones que se van a realizar, se van a efectuar SIEMPRE en el servidor y

NUNCA en la máquina cliente.

En resumen, una página ASP es un archivo dentro de nuestro servidor de internet,compuesto por una mezcla de HTML y Scripts (que se ejecutarán en el servidor). EstosScripts procesarán los datos provenientes del cliente y generará una página HMTLcomo resultado que posteriormente se enviará a dicho cliente. 

Ventajas respecto a la programación CGI:

La programación CGI se realizaba en lenguajes como C++ o Perl, que en la mayoría

de los casos, había que compilar y linkar. Presentando además la dificultad añadida deaprender dichos lenguajes, y no siempre estaban bien resueltos problemas como el

Page 44: Curso de diseño de paginas web

8/3/2019 Curso de diseño de paginas web

http://slidepdf.com/reader/full/curso-de-diseno-de-paginas-web 44/44

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 decompilación y linkado, pero se pierde a la hora de ejecutarlo), la corrección de loserrores es más simple, 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 basesde datos como Oracle, SQL Server, Access). 

Requisitos:

Estos requerimientos son muy distintos a los del usuario final. Se necesita el sistemaoperativo Windows NT 4.0 o Windows 2000 server con el servidor de internetMicrosoft Internet IIS 3.0.

 NOTA: Existe una versión de desarrollo (Personal Web Server 4) para Windows 9X y

para Windows NT Workstation, orientada para la realización de pruebas con unservidor distinto al de internet. 

Para más información:

•  www.microsoft.com/vbscript/us/vbstutor/vbstutor.htm, documentación oficialy tutorial de Microsoft.

•  www.microsoft.com/vbscript, página de la compañía sobre el lenguaje ASP,código y links.

•  techzone.solutionsiq.com/home-default.htm, página con las últimas novedadessobre las tecnologías de internet.

 

 © Copyright eitig.com 1999-2000Resolución recomendada: 800 x 600

[email protected]