Unidad 5

1. ¿Qué es un sitio web?
Un sitio web o website, es un conjunto de páginas web, más o menos extenso,
agrupadas bajo un dominio, como puede ser www.aulaclic.es o www.elpais.com.
Lo normal, es que el sitio web parta desde una página inicial, o home, desde la que
podemos acceder, de forma jerárquica a todo el contenido del sitio, a través de
hiperenlaces. A su vez, podemos encontrar enlaces hacia otros sitios distintos, ya que
cada sitio tiene una URL única que nos permite acceder a él.
En conjunto de los sitios publicados en Internet forman la WEB o WWW.
El contenido de las páginas del sitio, puede estar escrito directamente en HTML. Esto
genera un sitio estático, que sólo recibe actualizaciones de vez en cuando, ya que hay
que hacerlas manualmente sobre el código.
En cambio, existen otros lenguajes, como PHP, ASP o JSP que generan en HTML a
partir de datos, como contenidos de bases de datos, datos introducidos por el usuario,
información global, etc. Esto origina sitios dinámicos, ya que los cambios se producen
frecuentemente y son generados desde la propia página. Por ejemplo, una página que
muestra la fecha del día actual sería un contenido dinámico. Otro ejemplo sería un foro.
5.2. La temática del sitio
La idea de crear un sitio web nace porque tenemos algo que comunicar con el mundo. Y
un tema que puede resultar interesante. Porque, por ejemplo, aunque crear una página
Web con nuestros hobbies y aventuras cotidianas puede ser un buen ejercicio como
aprendizaje, a la hora de la verdad a poca gente le resultará interesante leerlo. Para esto,
obtendremos mejores resultados creándonos una cuenta en una de las numerosas redes
sociales.
El tema también debe de ser concreto. Si dominamos la informática y la jardinería, no
resultará serio si creamos un sitio en el que encontremos las dos cosas. Es mejor crear
un sitio independiente para cada una.
No sólo debemos de elegir un tema que resulte atractivo para un grupo de usuarios, si
no que debemos de tener información sobre él. No tiene demasiado sentido crear un
sitio para escribir un sólo artículo de media página.
El tema elegido determinará el diseño de la página. No es lo mismo si pensamos
mostrar fotos de animales para los amantes de las mascotas, una web para niños, una
empresa de informática, etc.
Una vez elegido la temática, debemos de distinguir cuales son las categorías en las que
vamos a dividir nuestro sitio. Estas serán más genéricas o menos, dependiendo del
tamaño del sitio.
En nuestro ejemplo vamos a crear la web de una asociación de aficionados a las flores.
Principalmente, a esta ficticia asociación le interesa exponer sus fotografías de flores en

2. la web, pero también crearemos las páginas que den a conocer la asociación y que
permitan ponerse en contacto con ella.
Preparar nuestro sitio (II)
5.3. Organizar los archivos
El sitio web se encuentra alojado en un servidor, que no es más que un ordenador
conectado a internet, capaz de "dar" archivos a quien se lo solicita.
Por lo tanto, cuando accedemos a un sitio web, realmente accedemos a una carpeta de
ese ordenador, que funciona como raíz del sitio. Internamente, dentro de esa carpeta,
encontramos archivos y subcarpetas que nos permiten organizar el sitio, igual que
organizamos los documentos en las carpetas de nuestro equipo.
Entonces ¿cómo organizamos los archivos del sitio? No existe una regla exacta, ya que
depende de muchos factores: número de páginas, cómo queremos navegar entre ellas,
cómo se organiza el contenido, etc.
Pero por lo general, y sin entrar en mucha teoría, tendremos en cuenta una serie de
cosas:
En la raíz del sitio, tendremos como mínimo la página de inicio, a la que llamaremos
index.html (o .htm). Esto se debe a que cuando a un navegador le indicamos que abra
una carpeta, busca el archivo index de la misma.
Organizaremos los tipos de archivo en carpetas. Por ejemplo, una carpeta para las
imágenes que forman parte del diseño de la página. Si a parte tenemos fotografías de
una galería, o de productos, es mejor ponerlas en otra carpeta, ya que no tienen relación
con el diseño. Otra carpeta para los archivos javascript, etc.
Si tenemos secciones claramente definidas, podemos guardar sus páginas en
subcarpetas. Por ejemplo, en aulaclic.es tenemos una carpeta para cada curso. Recuerda
que es conveniente incluir en cada carpeta que contenga páginas htm, un archivo
index.html, más que nada para que no se produzca un error si se accede directamente a
la carpeta.
Por otro lado, daremos un nombre descriptivo a los archivos. Nos resultará mucho más
sencillo si nuestros archivos se llaman contacto.html y noticias.html que si los llamamos
pagina_1.html y pagina_2.html. A no ser que se trate de páginas del mismo tipo en las
que es muy importante el orden, como páginas de un manual.

3. Es conveniente planificar cómo va a ser el sitio, y partir de las carpetas iniciales.
Lógicamente, no vamos a tenerlo todo en cuenta, por lo que a medida que vaya
creciendo nuestro sitio, iremos creando las carpetas que nos hagan falta.
En nuestro ejemplo pensamos crear un sitio pequeño, de menos de 10 páginas.
Primero crearemos el sitio en nuestro equipo, y cuando lo acabemos ya los subiremos a
un servidor Web.
Comenzamos por crear la carpeta raíz. En este caso, la hemos llamado sitio_flores, y la
hemos ubicado en la carpeta de ejercicios del curso.
¿Qué tendremos dentro de esta carpeta? A priori, contendrá las páginas, entre las que
incluimos un index. También tendremos una hoja de estilo, e imágenes del diseño de la
página, como logos, imágenes para el fondo, etc. Por lo que será mejor si agrupamos
estas imágenes en una carpeta, que podemos llamar imagenes (omitimos el acento
porque no conviene incluir caracteres especiales en los nombres de archivos y carpetas).
Si más adelante tenemos otros elementos, como archivos javascript, archivos para
descargar, etc, ya nos preocuparemos por crear más carpetas para ellos.
Vamos a echar un vistazo a las secciones que queremos crear:
 Una sección sobre las flores, con fotografías.
 Una página sobre la asociación.
 Un formulario de contacto.
 Una página con noticias sobre el tema.
A excepción de la sección de flores, las otras serán páginas simples, que podemos dejar
en la carpeta raíz.
Pensemos en la sección de flores. Queremos mostrar una amplia galería de fotografías.
Para que el visitante pueda encontrar una flor en concreto, es importante que las
clasifiquemos. Por eso crearemos in índice alfabético con las flores. En otra página,
mostraremos las fotos de las flores. Como no conviene crear una página muy grande,
con muchas fotografías, la dividiremos en las distintas categorías, que en principio serán
cuatro.
En resumen, para la sección de flores, necesitamos 5 páginas y fotografías, que estarán
mejor recogidas en una carpeta, que podemos llamar fotos. No son muchos elementos,
pero podemos pensar en agruparlos todos dentro de una carpeta. Esto se hace necesario
cuando hay muchos archivos, pero con tan pocos puede resultar molesto, porque
tendremos que tenerlo en cuenta a la hora de crear enlaces o utilizar las imágenes del
diseño. De todas formas, como el fin de este curso es didáctico, vamos a crear una
subcarpeta para esta sección, a la que llamaremos flores, para aprender así a manejarlas.

4. Por lo tanto, la estructura de archivos que planteamos para nuestro sitio quedaría así:
Comenzaremos por crear las carpetas, y si ya tenemos las imágenes, guardarlas en ellas.
Las páginas y hoja de estilos, las iremos creando cuando nos hagan falta.
KompoZer dispone de un administrador de sitios, que nos permite ver los archivos del
sitio y abrirlos directamente.
Navegación
Antes de comenzar a definir la navegación, debemos de tener una idea de cómo va a ser
el sitio web, es decir, debemos tener una idea formada de la estructura y extensión del
sitio. Así podremos decidir qué sistema de navegación es el más adecuado.
Si construimos un sitio sobre la marcha, sin planificación, según vaya creciendo, se irá
complicando la navegación y al final no nos quedará más remedio que hacer
modificaciones que resultarán más costosas que haberlo pensado un poco mejor con
anterioridad.
Existe una regla que dice que un usuario no debería de necesitar más de tres clics para
llegar a la página que busca. Por eso lo primero que hemos de pensar es en facilitar a
navegación.
El usuario debe de ser capaz de moverse de forma intuitiva por nuestro sitio sin
perderse, para ello:
 Debe de saber dónde está. Debemos de dejarle claro en qué parte del sitio se
encuentra. Para esto es muy útil el título de la página y utilizar un encabezado

5. que identifique la sección. También debe de distinguir si sigue en nuestro sitio, o
si ha pulsado un enlace que le lleve a un sitio distinto.
 Debe de saber dónde ha estado. Debemos de evitar que el usuario pase una y
otra vez por la misma página para buscar algo. Por ejemplo, distinguiendo los
enlaces ya visitados.
 Debe de saber dónde puede ir. Una página web se basa en enlaces, y estos deben
de ser claramente identificables. Además, no deben de ofrecer dudas de a dónde
llevan, por ejemplo con nombres de páginas entendibles, que se muestran en la
barra de estado, o con textos de información emergentes.
 Debe de poder seguir navegando. No le enviaremos a una página sin enlaces,
desde la que no pueda continuar recorriendo el sitio. Piensa que puede acceder
directamente a esa página, por ejemplo a través de un buscador, por lo que no
podría utilizar ni el botón Atrás del navegador.
La forma de navegar por nuestro sitio, debe de ser constante. Así, con visitar unas pocas
páginas aprenderá a moverse por nuestro sitio, y le resultará más cómodo.
La forma más habitual de solucionar todo esto es utilizar un menú, que se mostrará en
todas las páginas.
5.5. Estructura del menú
El uso de menús es muy habitual en las páginas web. Un menú no es más que una lista
de enlaces relativos a nuestro sitio, llamados elementos del menú.
 Por lo general el menú se suele colocar en la parte superior de la página, junto al
logo o debajo de él, o en un lateral, normalmente el izquierdo.
 El menú no debe de ser demasiado extenso. En un sitio grande no podemos
pretender enlazar con todas las páginas, y no sería útil hacer buscar al usuario
entre cincuenta enlaces.
 Normalmente, aparecerán las secciones de nuestro sitio web. Y por ejemplo,
podemos utilizar diversos métodos para que el usuario pueda expandir cada
sección y ver enlaces a los apartados de la sección, o utilizar menús
desplegables. También podemos mostrar los enlaces a las distintas partes de la
sección en que se encuentra el usuario, ya que si está en esa sección es probable
que le interesen los apartados relacionados.
 Los elementos del menú deben de ser descriptivos. Por ejemplo, no es útil poner
una imagen, por bonita que sea, si puede que el usuario no entienda qué significa
o a dónde lleva. O que para saberlo tenga que poner el cursor sobre él.
 El menú debe de ser ligero, y no ocupar demasiado espacio, ya que se repetirá en
todas las páginas.
En lo que se refiere al código, el menú suele tener estos elementos:
 Los menús se suelen basar en listas <ul></ul>. Dentro de cada elemento de la
lista, colocaremos un enlace.
 El aspecto del menú se consigue por CSS.

6.  Suelen tener código javascript, por ejemplo para mostrarlo, producir efectos más
o menos avanzados, o en vez de los enlaces.
Por lo tanto, comenzaremos creando nuestro menú como una lista, a la que más adelante
le iremos dando estilo hasta convertirla en un atractivo elemento de navegación.
Estructura de la página
En nuestro ejemplo, como norma general todas las páginas mantendrán la misma
estructura. Por ejemplo, tendrán el mismo logo o título, el sistema de navegación en la
misma posición, el mismo pie, etc. Sólo iremos cambiando el contenido.
Una excepción a esto puede ser la página de inicio. Pensemos que esta página es la
presentación de nuestro sitio, y el visitante se hará una idea de qué puede encontrar en
nuestro sitio a partir de ella. Por eso no es extraño que tenga más enlaces que el resto de
páginas. Esto, como siempre, dependerá del tamaño del sitio.
Pero pensando en el resto de páginas, no es una mala idea comenzar creando una página
base, con esos elementos comunes que podamos utilizar a modo de plantilla.
Vamos a ver qué elementos necesitamos en nuestro ejemplo:
 Un título, para lo que podemos utilizar un encabezado h1. En el se mostrará el
nombre de la asociación, Floramics.
 Un menú. En este caso pondremos un enlace a las siguientes secciones:
o Inicio (index.html)
o Flores (flores/index.html)
o Nosotros (nosotros.html)
o Contacto (contacto.html)
o Noticias (noticias.html)
Como son sólo cinco elementos, vamos a ponerlo en la parte superior, ya que en
un lateral desperdiciaríamos espacio.
 Un área para el contenido. Cambiará en cada página, pero tendrá un título para la
sección.
 El pie, por ejemplo para poner el copyright de la página. Podemos utilizar un
elemento de bloque como un párrafo o un div. También existe una etiqueta
específica, <address> utilizada para contener información sobre el autor de la
página.
Para que nos quede mejor estructurada la página, vamos a utilizar divisiones en las tres
secciones diferenciadas:
Encabezado
Título y menú

7. Contenido
Pie
De esta manera, entre páginas prácticamente sólo cambiaremos el contenido.
Con esta estructura en mente, vamos a escribir el código:
Creamos una nueva página, con el Doctype, head, body, etc... como ya hemos visto.
Dentro, creamos tres divisiones.
 En la primera, colocamos un <h1> con el nombre de la asociación. También una
<ul>, con un elemento y un enlace para cada una de las secciones.
 La división central la dejamos en blanco, ya que será la que iremos cambiando.
 En la tercera división, introducimos el texto del pie. Por ejemplo, © Todos los
derechos reservados.
Y no hemos de olvidar, que en un futuro contendrá un enlace a la hoja de estilos. Por lo
que es conveniente que lo pongamos ya, decidiendo un nombre para la hoja, por
ejemplo estilo.css.
Una vez creada, guardamos la página como base.html.
La página tiene pocos elementos, y te recomendamos que intentes hacerla escribiendo
directamente el código fuente. De todas formas, puedes seguir este ejercicio paso a paso
para realizar la página con KompoZer, y comprobar el código generado.
Una vez creada, visualiza la página con un navegador. Puedes pulsar F5 desde
KompoZer o hacer doble clic directamente sobre el archivo.