INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL

AREA: Tecnología e Informática – Grado 11

TEMA: Diseño Web - Preparación del sitio web

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.

Por lo general se deben tener en cuenta una serie de cosas:

En la raíz del sitio (carpeta principal), debe estar como mínimo la página de inicio, que se debe llamar 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.

Se debe organizar 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, videos, etc.

Si hay secciones claramente definidas, podemos guardar sus páginas en subcarpetas.

Se debe dar 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.

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.

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:

En Nombre de sitio indicamos un nombre, que

será el que identifique al sitio en la ventana del

Administrador se sitios.

Dirección HTTP de su página inicial, es opcional.

Aquí podríamos poner la dirección del sitio si ya lo

hemos publicado en Internet.

Dirección de publicación. Aquí tenemos que

indicar la carpeta raíz de nuestro sitio. Si está en

nuestro equipo, no tendremos más que pulsar en

Seleccionar directorio y elegir la carpeta.

En cambio, si ya hemos publicado el sitio, lo podemos editar directamente desde el servidor, introduciendo la URL del

servidor ftp del sitio. En este caso, también deberemos de indicar un Nombre de Usuario y Contraseña.

Una vez elegido el nombre y la carpeta, pulsamos en Nuevo sitio.

Si cerramos la ventana, el nuevo sitio aparecerá en el Administrador de sitios. Y a medida que vayamos creando archivos, estos

aparecerán en el árbol del sitio. Si no aparecen, debemos de Recargar el sitio.

Desde el Administrador, podemos Renombrar archivos , Eliminarlos , y crear Nuevas carpetas dentro del sitio.

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 se suele colocar en la parte superior de la página, junto al logo o debajo de él, o en el lateral izquierdo.

No debe de ser demasiado extenso.

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.

Los elementos del menú deben de ser descriptivos (usar texto en lugar de imágenes).

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 pude mejorar con CSS.

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 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...

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 estilos.css.

Una vez creada, guardamos la página como base.html.

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.

Ejercicio paso a paso: KompoZer. Página base Vamos a crear la página que nos servirá como base para crear las distintas páginas posteriores.

La página la ubicaremos en un sitio llamado sitio_itsi, el cual deberá ser creado en la siguiente ruta (unidad y carpetas):

D:\11-0x\sitio_itsi\ (siendo x el número de su grupo, por ejemplo, 11-01)

1. En la barra de redacción de KompoZer, haz clic sobre el botón Nuevo.

2. En la página en blanco, escribe el nombre del sitio, Instituto Técnico Superior Industrial. No cambies de línea al acabar.

3. En la barra de formatos, en el primer desplegable, elige Título 1.

4. Pulsa Enter para saltar de línea.

5. Vamos a escribir el menú. Escribe los distintos elementos, cada uno en una línea. Debe de quedar con este aspecto.

o Inicio

o Sede Principal

o Nosotros

o Contacto

o Noticias

6. Selecciona las cinco líneas y pulsa el icono de la barra de formatos para convertirlas en una lista no ordenada.

7. Haz doble clic sobre el texto del primer elemento para seleccionarlo.

8. En la barra de redacción haz clic sobre el botón Enlace.

9. En la ventana que se abre, en Ubicación del enlace introduce index.html y pulsa Aceptar.

10. Repite los pasos del 7 al 9, pero enlazando los elementos con las siguientes páginas:

o Sede Principal → sede_a/index.html

o Nosotros → nosotros.html

o Contacto → contacto.html

o Noticias → noticias.html

11. Haz clic fuera de la lista, en la línea siguiente. Si no puedes salir de la lista, sitúate en el último elemento y pulsa dos veces

Enter.

12. Escribe un texto donde irá el título de la sección, por ejemplo Título. Conviértelo en un Título 2 (<h2>).

13. Cambia de línea, y escribe un texto de ejemplo, como Aquí irá el texto. Conviértelo en un Párrafo, en el mismo desplegable.

Estos dos elementos los hemos colocados para hacernos una idea de lo que irá en la página, pero los cambiaremos para cada

una.

14. Cambia de línea y escribe el texto del pie, © Todos los derechos reservados. El símbolo © lo puedes insertar a través del

menú Insertar → Caracteres y símbolos....

15. Sin cambiar de línea, en la barra de formatos, en el primer desplegable, elige Contenedor genérico (DIV).

16. Cambia al modo de edición de Código fuente.

17. Vamos a encerrar la parte del encabezado en una división. Escribe la apertura de la etiqueta (<div>) antes de la etiqueta

<h1>.

18. Escribe el cierre de la etiqueta (</div>) tras el cierre de la lista (</ul>).

19. En la página tenemos ahora dos divisiones, una para el encabezado y otra para el pie. Crea otra para el contenido, que

englobe al título 2 y al párrafo.

20. Para acabar, vamos a añadir el enlace a la hoja de estilos. Vuelve al modo de edición normal.

21. En la barra de redacción, pulsa en CSS.

22. Despliega el menú de la izquierda y elige Hoja de estilo enlazada.

23. En el campo URL escribe estilo.css y pulsa en Crear hoja de estilos. Pulsa Aceptar.

24. En la barra de redacción, pulsa Guardar.

25. Cuando te pida el título, escribe el nombre del colegio y pulsa Aceptar.

26. Asegúrate de que eliges la carpeta sitio_itsi para guardarla, cámbiale el nombre por base.html y pulsa Guardar.

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.

Vamos a comenzar por la página index.html.

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:

Al terminar, informe al profesor para la revisión de su trabajo.