1. Introducción

A lo largo del curso aprenderemos a utilizar todas las opciones de KompoZer y para practicar con ellas vamos a utiliar un caso práctico. Vamos a suponer que tenemos una empresa de informática y queremos crear una web sencilla para vender nuestros productos, en nuestro caso serán tres productos, pero nos servirá para aplicar lo que vayamos aprendiendo.

En esta unidad aprenderemos unas nociones básicas sobre cómo empezar un sitio web completo y definiremos la estructura de nuestro sitio.

2. Recomendaciones iniciales

2.1. Nombres de los archivos

Cuando se diseña una Web, con objeto de evitar problemas con los nombres de los archivos, es muy importante que los que creemos (tanto páginas html, imágenes, carpetas,...) cumplan los siguientes requisitos:

• Utilizar una sola palabra como nombre de un archivo.
• Que no tenga más de 8 caracteres.
• Que no tenga vocales con tildes, ni mayúsculas, ni eñes ni espacios en blanco. Cabe recordar que hasta hace poco no se podían emplear dichos caracteres en las URL.

Tenemos que tener en cuenta que todos los servidores no tienen el mismo sistema operativo (de hecho son una minoría los que tienen un sistema operativo Windows). Por tanto, es importante, para evitar problemas con los nombres de archivo cuando queramos “subirlos” al servidor, que se tengan en cuenta las reglas descritas anteriormente. De lo contrario, puede ocurrir que nuestra Web funcione perfectamente en nuestro equipo y en el servidor no.

Con respecto a la resolución de la pantalla, actualmente las resoluciones estándar en la Web son la de 800 x 600 píxeles o 1024 x 768 píxeles, hecho al que ha contribuido la generalización de monitores de 17 e incluso 19 pulgadas en los equipos nuevos. Con los monitores de 15 pulgadas, el estándar en la Web era de 800 x 600 píxeles. Por tanto, nuestra Web vamos a realizarla en 1024 x 768.

2.2. Estructura

Es necesario que antes de que nos lancemos a hacer páginas dediquemos algún tiempo a planificar y diseñar nuestra Web, para posteriormente no estar continuamente reordenando páginas y cambiando archivos de lugar (sería como comenzar a hacer una casa sin unos planos que nos guías en la construcción).

Comencemos por preguntarnos qué secciones tendrá nuestra Web, número de páginas, la organización de las mismas, los mecanismos que permitirán la exploración del Web, etc.

Las etapas que se desarrollan en esta fase de diseño son las siguientes:

Fragmentación de los contenidos en bloques de información. Consiste decidir qué va en cada página del Web.

Definición de las relaciones entre los bloques de información (construcción de una estructura jerárquica).Una vez que se ha establecido qué debe ir en cada página, es necesario determinar las relaciones que existen entre las páginas en términos jerárquicos.

Creación de un sistema de navegación. El sistema de navegación de una Web es el conjunto de elementos que permiten explorar las páginas. Los elementos básicos del sistema son los hipervínculos; las conexiones que éstos crean constituyen auténticas rutas de exploración, caminos o atajos. El objetivo de esta etapa no es crear los hipervínculos sino planear las rutas de exploración de los contenidos, decidir cuál será el punto de partida que se desea dar al usuario del Web y cuáles los puntos de llegada; dónde situar las bifurcaciones de los recorridos; qué herramientas de navegación se proporcionarán, etc., de forma que las conexiones entre las páginas deben permitir la exploración de la totalidad el Web de forma lógica y transparente.

2.3. Tamaño de las páginas

Es realmente frustrante, cuando visitamos una Web, tener que esperar “mucho” tiempo para que la página sea completamente mostrada en pantalla. Las páginas compuestas de texto, gráficos y elementos multimedia generan una impresión agradable; sin embargo son más lentas para mostrarse al visitante.

2.4. Pruebas

Recordemos siempre que los visitantes de una Web no tienen por qué tener el mismo sistema operativo (Windows, MacOS, UNIX, Linux, etc.), que pueden utilizar cualquier navegador disponible en el mercado (Internet Explorer, Firefox, Chrome, etc.), con diferentes tipos de resolución de pantalla (600 x 800, 1024 x 768 etc.) Estas diferencias pueden hacer que nuestros diseños sean idóneos para un visitante particular y que sean pésimos para otros; en general, se recomienda probar nuestra Web en la mayor cantidad de condiciones posibles.

3. Creación de nuestro sitio

Comencemos a crear nuestra tienda de informática.

• Creamos una carpeta en el lugar que queramos de nuestro ordenador con el nombre tiendainf. En esta carpeta iremos creando todo lo necesario para tener nuestra tienda web completa.
• Abrimos KompoZer.
• Vamos a crear nuestro primer sitio. Hacemos clic en el botón Editar sitios del panel de Administración de sitios.
• Nos aparece un cuadro de diálogo en el que nos solicita que indiquemos el directorio del sitio. Seleccionaremos la carpeta que hemos creado anteriormente tiendainf.
• A continuación nos aparece el cuadro de diálogo de Configuración de publicación. Dsde aquí podremos configurar el nombre de nuestro sitio, ver la carpeta donde está guardado (que es la que le hemos dicho antes) e incluir información adicional de la dirección URL donde se publicará, inicialmente no tenemos contratado un alojamiento para poder publicar nuestro sitio por lo que este último apartado lo dejaremos en blanco.
• Fijamos el nombre de nuestro sitio "Mi tienda de informática".
• También hay una pestaña llamada Configuración FTP, que de momento ignoraremos. Hacemos clic en Aceptar.

• Ya hemos creado nuestro primer sitio. En el panel de Administración de sitios aparece ahora "Mi tienda de informática"
• Si hacemos clic en el botón vemos el contenido de nuestro sitio. Actualmente no hay nada.

Vamos a crear nuestra estructura.

Lo normal es que en nuestro sitio convivan documentos de diversos tipos: texto, imágenes, sonidos, animaciones, vídeos, estilos... y lo más correcto es tenerlos bien organizados. Vamos a crear subcarpetas en las que iremos introduciendo los archivos a medida que los necesitemos.

• Vamos a crear la carpeta en la que se guardarán las imágenes. Hacemos clic sobre el botón del panel de Administración de sitios. En el cuadro de diálogo que nos pide el nombre de la nueva carpeta escribiremos "img" y haremos clic en Aceptar.

• Si volvemos al Administrador de sitios veremos la nueva carpeta creada. Si no aparece haremos clic en "Mi tienda de informática" y si aún no aparece en el botón de Recargar .

Si nos hemos equivocado con el nombre podemos seleccionar la carpeta y apretando el botón se nos abrirá eñ mismo cuadro de diálogo para que lo cambiemos.

Si lo que queremos es eliminar algún archivo o carpeta creado sólo haremos clic en el botón .

Ya que estamos repasando las opciones del Administrador de sitios, podemos filtrar los elementos que vemos en cada momento gracias al desplegable Ver. Así podemos ver sólo las imágenes, sólo los archivos del tipo HTML...

Vamos a crear ahora nuestro primer archivo del sitio. Todas las tiendas tienen una página en la que nos informan de quienes son, dónde están, sus datos fiscales, etc. Nosotros empezaremos por ahí.

• Accedemos al menú Archivo→Nuevo. En el cuadro de diálogo que nos aparece no cambiamos nada y hacemos clic en el botón de Crear.
• Escribimos el texto que se puede ver en la imagen y guardamos el documento desde el menú Archivo→Guardar como con el nombre quienes.html dentro de la carpeta tiendainf. En el cuadro de diálogo que nos aparece solicitando el Título de la página ponemos "Quiénes somos".
• Si actualizamos ahora la vista del Administrador de sitios, veremos que aparece nuestro nuevo documento.

4. Propiedades de la página

Pero antes de terminar con la unidad vamos a configurar la página que acabamos de hacer.

• Accedemos al menú Formato→Título y propiedades de la página. Se nos abrirá un cuadro de diálogo desde el que podremos dar información sobre la página que acabamos de crear:
  • Información general: el título que aparecerá en la barra de título de los navegadores, el autor que se guarda en el documento aunque no se vea y la descripción que también se guarda pero no se ve a simple vista.
  • Plantillas: en KompoZer se puede trabajar con plantillas. Aquí es donde indicaremos si el documento es una plantilla.
  • Internacionalización: se introduce información del idioma y conjunto de caracteres utilizados en la web para que el navegador sepa interpretar correctamente el contenido de nuestra página.
• Rellenamos los datos correctamente con nuestro nombre y hacemos clic en Aceptar.
• Ahora veremos que en la pestaña de Quienes somos ha aparecido un disco en rojo , esto indica que no se han guardado los cambios. Hacemos clic en el botón Guardarde la barra de herramientas y el disco rojo desaparecerá.
• También podríamos cambiar otras propiedades de la página como el color de fondo, el color de los textos o incluso fijar una imagen de fondo. Todo esto lo podríamos hacer desde el menú Formato→Colores y fondo de la página. Accedemos a él y cambiamos el fondo por un color amarillo claro (#FFFFCC).
• Hacemos clic en el botón Guardarde la barra de herramientas.

Para finalizar tenemos que tener en cuenta que vamos a seguir utilizando la estructura que hemos creado en las próximas unidades por lo que guárdala en un lugar que no se te pierda.

• Sube a la plataforma una captura de la pantalla en la que se vea la estructura de nuestro sitio y el archivo quienes.html abierto. Algo como lo siguiente: