5.7. Páginas básicas

Como básicamente se trata de introducir texto, lo haremos mucho más rápido utilizando el editor de KompoZer.

1. 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 centra.
2. 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.

Crearemos otra pagina:

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

5.6. Estructura de la página

Para la estructura de nuestra pagina necesitamos:

• Un título, para lo que podemos utilizar un encabezado h1. En el se mostrará el nombre de la asociación.
• Un menú, en el que vamos a elegir las secciones segun el tipo de pagina que creamos.
• 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,
  utilizada para contener información sobre el autor de la página.

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

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 el.
• El menú debe de ser ligero, y no ocupar demasiado espacio, ya que se repetirá en todas las páginas.

5.4. Navegación

PARA PODER NAVEGAR EN UN SITIO:

1. 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.
2. 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.
3. 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.
4. 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.

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.

• 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

5.2. La temática del sitio

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.

1. 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.
2. 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.
3. 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.
   

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

• 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

ELEMENTOS DEL ENTORNO KOMPOSER

La imagen que tenemos ubicada en la parte de arriba es como se "VE" Komposer.





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





barra de menús: Que se encuantra en la parte de abajo, ahi podemos acceder a todas las opciones del programa.





la barra de redaccion: Las opciones más comunes, como Guardar, Nuevo, o insertar Enlaces o Imágenes.





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






En la parte inferior se muestran las diversas formas enque podemos ver:

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.

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

NAYELI ALVARADO