Páginas básicas

Partiendo de la página que hemos creado, vamos a crear un par de páginas sencillas. La idea es tener páginas con algunos elementos, como texto, para poder comenzar con el diseño.

Otra opción podrá ser crear la páginas con un texto de prueba. En este caso, como ya sabemos lo que queremos poner podemos adelantar trabajo.

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 de Floramics!

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 cuatro categorías. Por lo que sería una buena idea poner enlaces directamente a esas categorías, así remarcamos que es el contenido principal del sitio. De momento, crearemos el enlace, utilizando una lista como con el menú. Como aún no sabemos que categorías tendremos, vamos a dejar el enlace provisional, enlazando sólo con # (Enlace).

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:

















La otra página que vamos a crear es nosotros.html. En ella hablaremos un poco de nuestra asociación.

Como antes, partimos del archivo base.html, que guardaremos como nosotros.html, y cambiaremos el contenido:














Una vez editado el contenido, guarda la página.

Ahora ya puedes probar los enlaces del menú, para ir de inicio a nosotros y viceversa.

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:
  • Inicio (index.html)
  • Flores (flores/index.html)
  • Nosotros (nosotros.html)
  • Contacto (contacto.html)
  • 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ú

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

  con el nombre de la asociación. También una

  , 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 ejemploestilo.css.

  Una vez creada, guardamos la página comobase.html.

  La página tiene pocos elementos, y te recomendamos que intentes hacerla escribiendo directamente el código fuente. De todas formas, puedes seguir esteejercicio paso a pasopara realizar la página con KompoZer, y comprobar el código generado.

  Una vez creada, visualiza la página con un navegador. Puedes pulsar F5desde KompoZer o hacer doble clic directamente sobre el archivo.

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
  . Dentro de cada elemento de la lista, colocaremos un enlace. Si no sabes qué son las listas, puedes verlo en este básico .

• El aspecto del menú se consigue por CSS.

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

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

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.

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.

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. En este tema avanzado te explicamos cómo hacerlo.

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 la web, pero también crearemos las páginas que den a conocer la asociación y que permitan ponerse en contacto con ella.

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

Elementos Entorno Kompozer

El entorno de KompoZer

El aspecto general es el siguiente:

En la parte superior encontramos la barra de título, donde se ve el título de la hoja.

Debajo, encontramos una barra de menús, desde la que podemos acceder a todas las opciones del programa. Las opciones más comunes, como Guardar, Nuevo, o insertar Enlaces o Imágenes las encontramos en la llamada barra de redacción:

Debajo de esta barra, encontramos las barras de formato, pensadas para formatear el documento.

Normalmente no utilizaremos estos formatos, ya que todo lo referente al estilo lo trabajaremos directamente sobre la hoja de estilos. Pero si encontramos dos desplegables muy interesantes. El primero, que en la imagen muestra Texto en el cuerpo, nos permite elegir el elemento que contienen el texto que escribimos, por ejemplo un encabezado o un párrafo. El segundo, que en la imagen muestra (sin clase) nos permite asignar una clase al texto. Si seleccionamos un fragmento de texto, y le asignamos una clase, encerrará el texto en una etiqueta con la clase dada.

En la parte central, encontramos el área de edición, donde podemos editar el contenido de nuestra página. Podemos tener varias abiertas en distintas pestañas.

La forma en que podemos ver y trabajar con la página, depende del modo de edición, de las cuatros disponibles en la parte inferior:

*Normal. Con este modo, vemos el diseño de la página como se mostraría en un navegador. Aunque aparecen algunas marcas más, como información de la ubicación de algunas etiquetas especiales, como comentarios y scripts, y líneas rojas punteadas en los bordes de tablas y divisiones.

*El modo Etiquetas HTML funciona como el anterior, pero mostrando en cada etiqueta un cuadradito amarillo con su identificador.

*El modo Código fuente nos permite trabajar directamente sobre el código fuente de la página.

*El modo Vista preliminar, muestra la página como se vería en un navegador, sin ninguna marca adicional.

También podemos ver el resultado en nuestro navegador predeterminado pulsando la tecla F5.

En la parte inferior, en la barra de estado, encontramos una barra que muestra la jerarquía de etiquetas que hay sobre el lugar donde está el punto de inserción.

Es decir, lo que aquí vemos son todas las etiquetas que contienen a lo que tenemos seleccionado, desde la más inmediata a la derecha del todo, a la primera, que suele ser el .

Esto nos permite seleccionar cualquier etiqueta y todo su contenido sólo haciendo clic sobre ella.

Si hacemos clic derecho sobre una etiqueta, aparece un menú con opciones muy útiles:

*Seleccionar hace lo mismo que la hacer clic sobre la etiqueta

*Eliminar etiqueta borra la etiqueta, pero no su contenido. Muy útil, por ejemplo, para quitar un span

*Cambiar etiqueta, sustituye una etiqueta por otra sin lateral si contenido. Por ejemplo, podemos cambiar un párrafo por un encabezado

*ID muestra una lista de los ID que utilicemos en nuestros estilos, y nos permite asignárselos a un elemento.

*Clases, como con ID, muestra las clases disponibles y nos permite asignarlas al elemento. Además, nos muestra la clase ya asignada a un elemento, pudiendo quitarla.

*Estilos en línea. Nos permite definir el estilo del elemento, para lo que creará el atributo style.

*Propiedades avanzadas. Accedemos a una ventana en la que podemos ver todos los atributos del elemento y sus valores, editarlos, eliminarlos o añadir nuevos. También podremos definir el estilo incrustado.

Podemos mostrar u ocultar todas estas barras a través del menú Ver → Mostrar / Ocultar.