Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Introducción
Un sitio web o website, es un conjunto de páginas web, más o menos extenso, agrupadas bajo un dominio. La idea de crear un
sitio web nace porque hay algo que comunicar con el mundo. El tema seleccionado para desarrollar un sitio web debe resultar
interesante; además de ser concreto. No sólo debemos de elegir un tema que resulte atractivo para un grupo de usuarios, si no
que debemos de tener suficiente información sobre él. Una vez elegido la temática, debemos de distinguir cuales son las
categorías en las que vamos a dividir nuestro sitio, para el diseño del menú. Estas serán más genéricas o menos, dependiendo del
tamaño del sitio.
Preparando el Sitio
Por ejemplo, vamos a crear la web del colegio Técnico Superior Industrial. Principalmente, el interés es exponer fotografías de su
sede principal, pero también crearemos las páginas que den a conocer datos generales de la institución y que permitan ponerse
en contacto con ella.
Cuando se accede a un sitio web, realmente accedemos a una carpeta del servidor en donde se aloja, que funciona como raíz del
sitio. Internamente, dentro de esa carpeta, se encuentran archivos y subcarpetas que permiten organizar el sitio, igual que
organizamos los documentos en las carpetas del computador.
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 llamaremos sitio_itsi, y estará ubicada en el computador del profesor.
¿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 la sede principal, con fotografías.
Una página sobre la institución.
Un formulario de contacto.
Una página con noticias sobre la institución.
A excepción de la sección de la sede principal, las otras serán páginas simples, que podemos dejar en la carpeta raíz.
Pensemos en la sección de la sede principal. Queremos mostrar una amplia galería de fotografías. Para que el visitante pueda
encontrar un lugar en concreto, es importante que las clasifiquemos. Por eso crearemos un índice alfabético con los lugares. En
otra página, mostraremos las fotos de las locaciones. 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 cinco.
En resumen, para la sección de la sede principal, necesitamos 6 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.
Por lo tanto, la estructura de archivos que planteamos para nuestro sitio quedaría así:
Definir un sitio en KompoZer
Al trabajar con KompoZer, nos resultará mucho más cómodo si utilizamos el Administrador
de sitios para acceder a nuestros archivos. Para que se mostrarlo u ocultarlo, podemos
seleccionarlo en el menú Ver → Mostrar / Ocultar → Administrador de sitios, o pulsando F9.
Al mostrarlo, se mostrará a la izquierda un panel con los distintos sitios que tengamos
definidos:
Pero lo primero será crear un sitio. Para crear o editar un sitio, pulsamos en el icono . Se
abrirá la ventana Configuración de publicación:
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.
Un título, para lo que podemos utilizar un encabezado h1. En el se mostrará el nombre de la institución, Instituto
Técnico Superior Industrial.
Un menú. En este caso pondremos un enlace a las siguientes secciones:
o Inicio (index.html)
o Sede Principal (sede_a/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:
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...
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 estilos.css.
La página tiene pocos elementos, y se recomienda que intentes hacerla escribiendo directamente el código fuente. De todas
formas, puedes seguir el siguiente ejercicio 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
Páginas básicas
Partiendo de la página que hemos creado, vamos a crear una página sencilla. La idea es tener páginas con algunos elementos,
como texto, para poder comenzar con el diseño.
Como básicamente se trata de introducir texto, lo haremos mucho más rápido utilizando el editor de KompoZer.
Como tenemos una página que nos sirve de plantilla (base.html) vamos a utilizarla. La abrimos, y en menú Archivo seleccionamos
Guardar como, y le damos el nombre index.html. De este modo tenemos una página con la misma estructura que la página base.
Sólo nos queda cambiar el contenido de la división central.
Comenzamos por el título de la sección. Como estamos en la página inicial, y trata de ser una web amistosa, vamos a darle la
bienvenida al usuario. Por ejemplo, lo cambiamos por ¡Bienvenidos a la web del ITSI!
Al estar en la página inicial, vamos describir brevemente qué puede encontrar el usuario en nuestra página. Recuerda que la idea
principal es que los usuarios visiten nuestra galería de fotos, que pensábamos dividir en cinco categorías. De momento,
crearemos el enlace, utilizando una lista como con el menú. Por ahora vamos a dejar el enlace provisional, enlazando sólo con #
(<a href="#">Enlace</a>).
Por ejemplo, esto es lo que hemos introducido en el contenido del index.html, viéndolo en el modo de edición de etiquetas de
KompoZer: