3. Práctica 2: Un sitio web completo.

Ya podemos dar por concluida la primera fase del aprendizaje del HTML. En poco tiempo hemos aprendido:

Como vemos la lista es bien larga y ya estamos equipados con conocimientos suficientes para crear una página compleja.

Para afianzar estas bases lo más importante es la práctica, y para no quedarnos sólo en las palabras vamos a empezar ya con la segunda práctica del curso. Ésta consistirá en la realización de un sitio web completo que, aunque es sencillo (dos páginas), permitirá al lector hacerse una idea de los procesos que hay que llevar a cabo en la elaboración de webs en el mundo profesional actual.

El sitio web que crearemos puede ser o bien de una empresa de nuestra propiedad, o de una que ha contratado nuestros servicios. Hemos elegido como ejemplo una agencia de viajes, pero invitamos al lector a buscar otro tema, ficticio o real, y crear su propia página web, si así lo prefiere.

A lo largo de la creación de la página iremos detallando los pasos seguidos para que el lector pueda ir repitiéndola o creando otra similar en su ordenador.

Nota

En el archivo practica-2.tgz se incluye el sitio web completo listo para ser visualizado y en él puede observarse el código completo. Los documentos HTML son los llamados index.html y mes.html. Las imágenes necesarias para la realización de las páginas se encuentran en el subdirectorio img.

3.1. Planificación

El primer paso en la creación de una página es la planificación. Si estamos creando el web de nuestra propia empresa deberemos llevarla a cabo por nosotros mismos (en nuestro caso ficticio también tendremos que realizarla nosotros), pero si creáramos el web para otra empresa deberíamos encargarle ciertos deberes : presentación de la empresa, presentación de su catálogo, promociones especiales, etc. Tal vez ya tenga un proyecto publicitario en marcha y quiere que el web este en línea con este.

En nuestro caso, por no aburrir al lector, no entraremos demasiado en este tipo de aspectos del diseño de páginas, pero queremos resaltar la importancia que tiene a la hora de conseguir éxito con las páginas que hemos creado.

3.2. Secciones de la página

Una vez conocidos todos los requisitos que debe cumplir el web es hora de hacer el primer borrador. En él debemos incluir las distintas secciones que debe tener el sitio web.

De ahora en adelante nos referiremos al conjunto de documentos HTML que estamos creando como sitio web, website en inglés, y llamaremos página o página web a cada uno de esos documentos.

A la hora de realizar este primer borrador hay que tener en consideración varios aspectos. La información de la página debe tener una estructura jerárquica, con una página principal con enlaces a las distintas secciones. En esta práctica hemos decidido dividir la información en cuatro secciones y hemos creado una pantalla de presentación que nos permita acceder a ellas:

Las tres últimas secciones serán demasiado breves por lo que estarán incluidas en la página principal a la que llamaremos, como es común, index.html. Al principio de cada una de estas secciones incluiremos un ancla de manera que podamos referirnos a ellas posteriormente usando enlaces a anclas.

Una vez hecho el boceto de borrador hay que ponerse manos a la obra y diseñarlo el aspecto gráfico y realizar la programación HTML.

3.3. Diseño gráfico

Este es un aspecto fundamental al crear páginas web. En función de la apariencia de nuestro sitio web conseguiremos o no que los futuros visitantes se queden en él o incluso que lo visiten con regularidad. La presentación gráfica deberá ser lo más atractiva posible, pero sin que la página esté demasiado sobrecargada. En el siguiente capítulo trataremos a fondo el diseño gráfico y todas las posibilidades avanzadas que el lenguaje HTML nos ofrece a este respecto.

Los aspectos gráficos que más destacan en nuestra página son los que pertenecen a la pantalla de presentación entre estos destacan el LOGO de la página que vemos reproducido en la figura 4.17

Figura 4.17. Logo de los alpes.

y el título de esta, que vemos en la figura 4.18.

Figura 4.18. Letrero de 'Los Alpes' que, junto con el logo, aparecerá en todas las páginas del sitio web.

Estas dos imágenes han sido creadas con un programa de dibujo vectorial, como pueden ser Corel Draw, FreehandKontour, etc. y retocadas con un programa de retoque fotográfico como pueden ser Photofinish, PhotoShop, The GIMP o Paint Shop Pro (Shareware).

Las fotos inferiores de la pantalla de presentación han sido obtenidas de alguno de los númerosos cliparts de imágenes gratuítos de los cuales podemos encontrar en Internet una buena muestra.

3.4. Programación en HTML

Una vez creadas las imágenes es hora de usarlas. El primer paso que seguiremos consistirá en la creación de una plantilla que servirá como modelo para cada uno de las páginas.

Es importante que las páginas de un sitio web sean similares o, dicho de otra forma, que tengan uniformidad. Eso le aportará una apariencia profesional y permitirá al visitante, por ejemplo, identificar las páginas como de Los Alpes y no de ninguna otra agencia.

La plantilla estará compuesta por el logo, el letrero de "Los Alpes Agencia de viajes" y de una firma de los creadores de la página. El código de esta plantilla es:

	<HTML>

	  <HEAD>
            <TITLE>
	    Agencia de viajes LOS ALPES
	    </TITLE>
	  </HEAD>

	  <BODY>
            <A NAME="arriba">

            <CENTER>
	      <IMG SRC="img/logo.gif">
	      <IMG SRC="img/losalpes.gif">
            </CENTER>
	    Contenido de la página
	    <HR>

	    <ADDRESS>
	      Web realizado por el equipo de
	      <FONT COLOR="#800000">
	        Conquista la web
	      </FONT>
	      <BR>
	      Última actualización: Enero de 2001
	    </ADDRESS>
	  </BODY>

        </HTML>
      

Una vez tenemos hecha esta plantilla la guardamos con el nombre plantilla.html para utilizarla posteriormente con todos los documentos del sitio web.

El siguiente paso es programar la presentación, esta consta de un eslogan, una lista de enlaces a las secciones de la página y dos imágenes atractivas, todo ello centrado:

	<CENTER>

	<UL>

        <LI>
	<A HREF="mes.html">
	Nuestras principales OFERTAS del mes
	</A>

        <LI>
	<A HREF="#alpes">
	LOS ALPES - 20 años a su servicio
	</A>

        <LI>
	<A HREF="#medida">
	Viajes a su medida
	</A>

        <LI>
	<A HREF="#donde">
	Dónde encontrarnos
	</A>

	</UL>

	<IMG SRC="img/ski.gif">
	<IMG SRC="img/montanas.gif">

	</CENTER>
      

Como vemos el primer link nos enlaza con el archivo mes.html mientras que el resto son enlaces a las anclas creadas al principio de cada sección en el mismo index.html.

El resto de detalles no entrañan demasiada dificultad y el lector que haya seguido el curso desde el principio será capaz de realizar la página completa sin problemas fijándose en las figuras incluidas.

Como pista listaremos el resto de etiquetas y atributos (entre paréntesis) usados en la página:

	HR (con WIDTH y  SIZE), H3, BIG, STRONG, BLOCKQUOTE, CITE,
	P (ALIGN), OL y PRE.
      

El documento mes.html tampoco presenta ningún problema de realización. Cabe destacar que es importante incluir al final de este un enlace que nos devuelva a la página principal.

Sólo será necesario comentar dos aspectos del código. Para separar las palabras enlaces a los distintos viajes se ha usado repetidamente la secuencia de escape &nbsp; de la siguiente manera:

	<A HREF="#Andorra">
	ANDORRA
	</A>
	&nbsp;&nbsp;&nbsp; 
	<A HREF="#Orlando">
	ORLANDO
	</A>
      

El segundo aspecto reseñable es que para insertar cada una de las líneas informativas de cada viaje se ha usado el siguiente código:

	<P ALIGN="center">
	...
	</P>
      

No queda más por comentar, recomendamos al lector la realización completa de esta práctica para adquirir práctica y soltura con las etiquetas HTML vistas hasta ahora con vistas a comprender mejor y más rápidamente los siguientes capítulos en los que trataremos el código HTML avanzado.