Kompozer 1

World Wide Web (www)

Aunque hay otros sistemas de presentación de la informaciónen Internet, éste es el más utilizado. Las principales características que hacen al estándar www el más común son:

• Utiliza hipertexto, que es texto o imagen, que al pulsar el botón del ratón sobre él se mostrará la página vinculada al mismo.

• Puede utilizar elementos multimedia: en la pantalla aparece además de texto, imágenes, videos, audios, animaciones, etc.

• Es un sistema universal, pues se puede acceder desde cualquier equipo o sistema operativo y desde cualquier parte del mundo.

• La información es pública, ya que está distribuida en miles de ordenadores (servidores) normalmente accesibles por cualquier usuario.

• Algunas páginas son dinámicas, es decir la información puede ser actualizada por personas que la consultan sin tener que conocer detalles técnicos.

Es importante aclarar algunos términos para trabajar con páginas web:

PRÁCTICA 0: Crear una página web

ACTIVIDAD

Un archivo html, en realidad, puede ser editado con cualquier procesador de textos. Prueba a escribir las siguientes líneas con gedit (en Linux) o Bloc de notas (en Windows):

y después, guarda el archivo con extensión .html (Archivo > Guardar como). Cuando se abra este archivo, se verá con el navegador.

TEORÍA

Es una página muy pobre, pero ¿Qué esperabas? Sin embargo, podemos ver una regla que se repetirá en toda página web: los textos entre los símbolos mayor y menor se denominan etiquetas, y cada vez que aparece una etiqueta empieza una sección que termina con la misma etiqueta, pero con una barra. Si quieres saber más sobre el uso de las etiquetas, pulsa en este enlace.

Evidentemente, este método es muy complicado. Para facilitar la escritura de documentos HTML se utilizan programas específicos, que se llaman editores visuales porque se trabaja viendo el documento y sus objetos tal y como se mostrarían en el navegador, manteniéndose oculto el código HTML. Existen multitud de editores web comerciales, entre los cuales, los más populares en el entorno Windows son:

• MicroSoft Expresión Web Designer, que es fácil de utilizar porque tiene un entorno muy similar a Word.

• Adobe Dreamweaver. Pertenece a la suite de Adobe. Es un programa muy recomendable por sus múltiples prestaciones.

  • Kompozer, que es el que usaremos en este curso.

PRÁCTICA 1: Preparar el sitio web

TEORÍA

Antes de empezar a crear ninguna página es necesario preparar la estructura. Hay que tener una organización a base de carpetas y subcarpetas:

• Debemos tener una carpeta dentro de la cual estarán todos los documentos que utilicemos.

• Dentro de esa carpeta, crearemos todas las subcarpetas necesarias para el sitio (para video, audio, etc). Como mínimo hay que tener la carpeta images, en la que se guardarán todos los archivos de imagen utilizados.

• Es conveniente cumplir unas reglas básicas con los nombres del contenido del sitio web:

  • Archivos y carpetas debe tener ocho letras como máximo, y todas deben ser minúsculas.

  • Los nombres no puede contener acentos, espacios ni la letra “ñ”

  • Los nombres tampoco deben incluir guiones, barras ni ningún otro símbolo extraño

ACTIVIDAD

Por lo tanto, la primera parte de la práctica consiste en crear una carpeta que se llame web1, y dentro de ésta, otra subcarpeta que se llame images

PRÁCTICA 2: Crear páginas

TEORÍA

Al abrir el programa aparece una ventana como la siguiente:

con las zonas siguientes:

1.- Barra de Menús. Ofrece acceso a todas las opciones del programa organizadas como en otras aplicaciones en Archivo, Editar, Ver, Insertar, …

2.- Barra de Redacción. Consta de los botones de acceso a las operaciones más frecuentes: Nuevo, Abrir, Guardar, Publicar, etc.

3.- Barra de Formato. Contiene las herramientas más útiles para aplicar formato al texto: tipo de fuente, tamaño, color, efecto, justificación, etc. Si se sitúa el ratón sobre cada botón se muestra un mensaje indicando su función.

4.- Barra de pestañas. Kompozer permite editar varias páginas usando un sistema de pestañas donde cada documento abierto es accesible al pulsar sobre la pestaña correspondiente. El nombre del archivo aparece acompañado por el icono de un diskete rojo cuando esa página ha sido modificada pero no guardada.

5.- Documento. Muestra el contenido del documento HTML actual.

6.- Barra de modo de edición. Indica el modo de vista que está activo en el documento actual. Se puede cambiar el modo de visualización pulsando en una de estas pestañas: Normal, Etiquetas HTML, Código fuente y Vista preliminar.

7.- Barra de estado. Muestra la posición del cursor con respecto a la jerarquía de etiquetas HTML del documento. Se pueden asignar atributos a una etiqueta haciendo clic derecho sobre la etiqueta en la barra de estado y seleccionando la opción deseada.

8.- Administrador de sitios. Permite crear y mantener un sitio web que se haya contratado. Esta ventana aparece y desaparece pulsando la tecla de función F9, así que es conveniente quitarla de enmedio por ahora.

Cuando se inicia el programa, debido a errores de programación, hay que cerrar la primera ventana de documentos que aparece, pulsando la equis roja del extremo derecho. A continuación, y como norma básica de la creación de páginas web, ANTES DE ESCRIBIR UNA SOLA LETRA, HAY QUE GUARDAR LA PÁGINA.

En Kompozer aparece una primera ventana donde se escribe la descripción de la página, y después se escribe el nombre del archivo que tendrá ocho letras como máximo, sin incluir acentos, espacios u otros símbolos:

Y ahora ya se podrá introducir contenido. Vamos a practicar:

ACTIVIDAD

Abre el programa Kompozer, y cierra todas las ventanas que sobren para tener la pantalla siguiente:

Por un error de programación, el primer documento no es válido. Hay que pulsar en la equis roja para empezar con el bueno

Pulsa en Archivo > Guardar. En la primera ventana escribe como título: Página de inicio. En la segunda ventana escribe como nombre del archivo: index.html

Ésta va a ser la página de presentación. Escribe el nombre del autor o autores. Normalmente, en la página de presentación se escribe también una introducción y un índice del contenido. Por ahora nos basta.

PRÁCTICA 3: Introducir contenido

TEORÍA

Para tener texto se puede recurrir al proceso de mecanografiado, o a Editar > Copiar de un origen para Editar > Pegar en la página (o mediante los métodos abreviados Control + C para copiar y Control + V para pegar). Después de escribir todo el texto, se procede a formatearlo de manera similar a como se hace con un procesador de textos. Es importante indicar que disponemos de un menú desplegable con formatos predeterminados de distintos tipos de título, y que para escribir párrafos debemos tener señalada la opción PÁRRAFO.

Cada línea del texto puede tener formato de Texto del cuerpo en general, pero se puede aplicar otros como Título 1,...

Para organizar la información se pueden utilizar las listas, numeradas o no numeradas:

• Listas no numeradas

• Tienen puntos delante

1. Listas numeradas

2. Tienen una jerarquía de números delante

Para introducir imágenes se puede pulsar sobre el menú Insertar > Imagenes o bien sobre el botón de imagen:

, tras lo cual se abrirá una ventana en la que se selecciona la imagen deseada:

Cuando hayamos elegido el archivo, podemos escribir el Título emergente. Esto significa que al pasar el ratón sobre la imagen, aparecerá el texto que hayamos escrito aquí. El Texto alternativo es lo que aparecerá si no se encuentra la imagen, y normalmente se escribe Imagen no disponible.

y en las distintas pestañas se accede a las propiedades específicas de la imagen:

• Dimensiones: para variar su tamaño

• Apariencia: Para permitir ajustar el texto para que se escriba al lado de la imagen, fijar la separación con él o si va a tener un recuadro alrededor:

• Enlace: para escribir la página que se debe abrir cuando se pulse sobre la imagen

Otra posibilidad es poner una imagen de fondo para toda la página. Para ello pinchamos sobre el menú Formato > Colores y fondo de página. Tras seleccionar el archivo, aparecerá en la ventana cómo queda el texto sobre ese fondo, para cambiar la combinación de colores si fuera necesario (de hecho, en esta ventana se puede poner un color uniforme de fondo):

Con todo lo visto, estamos preparados para ponernos manos a la obra:

ACTIVIDAD

Pon color al fondo de la página inicial y selecciona un color para la letra.

Descarga el siguiente símbolo de Kompozer (botón derecho > Guardar imagen como) en la carpeta de las imágenes:

Introduce el símbolo debajo del texto y, debajo de él, deja dos renglones pulsando Intro.

Aumenta tamaño, centra, etc. a tu gusto tanto el texto como la imagen. El texto debe resultar perfectamente legible.

Sigue siendo una buena costumbre ir guardando el trabajo según se van haciendo cosas.

PRÁCTICA 4: Organizar el contenido

TEORÍA

Igual que se hace en un procesador de textos, podemos incluir en nuestra página una tabla formada por filas y columnas de celdas, dentro de las cuales poner texto o imágenes. Para ello, pulsamos en el menú Insertar > Tabla, o bien sobre el icono de Tabla:

, y fijamos el número de filas y columnas que queramos:

Una tabla constituye la forma más sencilla de organizar el contenido de una página. Cuando aparece la tabla podemos hacer doble click sobre ella y accedemos a sus propiedades, entre las que podemos variar el número de filas y columnas, el ancho de la tabla, la colocación, ... Una de las características más interesantes es el grosor del borde. Si fijamos un borde de cero píxeles, éste no se mostrará en el navegador, aunque la estructura de la tabla se mantiene.

Seguiremos con el ejercicio que teníamos hasta ahora:

ACTIVIDAD

Debajo del dibujo, crea una tabla de una fila y dos columnas. Haz que el borde tenga grosor cero.

En la primera celda de la tabla introduce "Página realizada con el programa Kompozer" y en la segunda celda inserta el símbolo que identifica la página como compartible según el criterio Creative Commons, con las condiciones de mencionar el origen y de volver a compartir en las mismas condiciones:

Adapta tamaños, aplica colores, modifica, etc. y guarda el archivo (su nombre es index.html)

PRÁCTICA 5: Enlaces

TEORÍA

El contenido de una página web es texto, imágenes, sonidos y... enlaces, que son los elementos que permiten acceder desde un punto de nuestro documento o a otro documento (o a otra parte dentro del mismo documento). Este salto se realiza por medio de la dirección URL del sitio de destino. Estas URL tienen la forma:

http://www.asifunciona.com/informatica/af_pc/af_pc_1.htm

Donde http indica el protocolo (normas de comunicación) www.asifunciona.com es el servidor u ordenador donde se encuentra el recurso, /informatica/ y /af_pc/ son carpetas dentro de ese servidor y por último af_pc_1.htm es el nombre del archivo que buscamos.

Cuando tenemos todas las páginas que estimemos necesarias, y todas estén guardadas en la misma carpeta, se procede a diseñar cómo se pasa de una a otra. Para ésto se utilizan los enlaces externos, los cuales son texto o imágenes que abren nuevas páginas cuando pulsamos sobre ellos.

Para crear un enlace, primero se selecciona el texto o imagen deseado, y se pulsa en Insertar > Enlace o en el botón de la cadena:

, con lo que se abre la ventana en la que se escribe la dirección web que se abrirá:

, y son puntos de referencia que se marcan con una pequeña ancla: . en la posición de la página que lo hayamos creado. Cada marca tiene su propio nombre:

y de esta forma podemos hacer que el enlace salte hasta ese punto de referencia.

Una vez que hayamos establecido todas las marcas, se procede a crear los enlaces correspondientes, seleccionando texto o imagen y pulsando sobre el icono de la cadena, sólo que ahora no pondremos página de destino, sino que pulsamos sobre el triángulo para que se despliegue una lista con todas las marcas que tiene esa página, identificada cada una con una almohadilla (#) delante del nombre. Seleccionamos la marca apropiada y ya tenemos establecido el enlace interno. Cuando se pulse sobre el texto del enlace, el navegador se desplazará hasta la marca.

Combinando ambos métodos se pueden crear enlaces a anclas de otras páginas, para conseguir un enlace cruzado. Primero se realiza un enlace externo a la segunda página, y a continuación se deja un espacio, se escribe una almohadilla (#) y el nombre de la marca:

http://www.elsitio.com/preguntas.htm #apartado2

Vamos a practicar todo ésto con el ejemplo que teníamos:

ACTIVIDAD

Debajo de la tabla de la página index.html escribe "Pulsa aquí para visitar la página rlopez33".

Selecciona todo ese texto y crea un enlace a la página (tendrás que copiar la dirección completa: https://sites.google.com/site/inforlopez33/ ). Si quieres, el enlace puede ir a otra página de Internet.

Crea otra nueva página y dale como nombre segunda.html (recuerda que lo primero que se hace al crear una página es guardarla)

Vuelve a la página index.html y en la parte inferior escribe "Pulsa aquí para ir a la segunda página"

Selecciona todo ese texto y crea un enlace. Cuando se pulse se debe abrir la página segunda.html

Guarda los dos archivos (index.html y segunda.html) y envíalos al correo del profesor.