KompoZer: Entorno de trabajo

Objetivos
Descubrir las ventajas de un editor Web.
Familiarizarse con el entorno de KompoZer.

Fuentes de informacin
http://tecnologiaedu.uma.es/index.php/materiales/21-curso-de-creacion-de-paginas-web-con-nvu
http://rec.mestreacasa.gva.es/webzip/b6150f0d-f569-496f-9fcc-ef98c5250bf9/index.html
Imgenes de http://www.morguefile.com

Contenidos

1. Introduccin
Existen multitud de programas de diseo web que nos van a permitir, sin conocer el lenguaje HTML, llegar a disear todo tipo de pginas. En
este curso aprenderemos a manejar uno de ellos, Kompozer.

2. NVU y KompoZer
Nvu es un editor de pginas web multiplataforma basado en Mozilla Composer, pero de ejecucin independiente, y aade
caractersticas nuevas como editor integrado de CSS y mejor gestin del protocolo FTP para actualizacin de los ficheros. La
pgina principal del proyecto es www.nvu.com

KompoZer es el sucesor no oficial de Nvu 1.0. Consiste en Nvu 1.0 con una serie de correcciones y parches no oficiales
desarrollados por moderadores y usuarios muy activos de los foros de NVU. La pgina de KompoZer es www.kompozer.net.

Tanto KompoZer como Nvu tienen las mismas caractersticas, aunque KompoZer ha depurado algunos errores y mejorado ligeramente el editor
CSS. Entre las funcionalidades ms interesantes destacan:

Editor web WYSYWIG con la representacin del motor Gecko 1.7.

Opciones especiales para la insercin de imgenes, tablas, formularios...
Generador automtico de tablas de contenido basado en los niveles de encabezado.
Editor CSS avanzado, con capacidad de crear y usar tanto archivos CSS externos como hojas incrustadas en el archivo HTML mediante
etiquetas <style>.
Posibilidad de definir y usar plantillas.
Admite etiquetas PHP sin alterar su contenido.
Limpiador de cdigo HTML.
Enlace directo con el validador HTML de W3C.
Completa ayuda incorporada en el programa.

Su instalacin es muy sencilla y lo podemos descargar gratuitamente desde su web http://www.kompozer.net/download.php, tanto para
Windows como para Linux

3. Entorno de trabajo
Vamos a ponernos manos a la obra. Al abrir KompoZer nos aparece la siguiente ventana en la que podemos diferenciar distintos elementos:

1 de 3
 Barra de mens: Con los mens Archivo, Editar, Ver, Insertar, Formato, Tabla, Herramientas, Ayuda. A travs de estos mens podemos
acceder a todas las opciones del programa.

Barra de redaccin: En ella aparecen botones con las opciones de uso ms habitual que se encuentran en la barra de men, como crear
un nuevo documento, guardar, insertar enlaces, imgenes, tablas... A travs de estos botones accedemos ms rpidamente a estas
opciones.

Barras de formato: Con botones que nos permiten acceder a opciones ms bsicas de formato de texto y prrafos. Estas son similares a
las de cualquier procesador de textos.

Barra de pestaas: Nos muestra los documentos que tenemos abiertos en cada momento y facilita pasar de uno a otro rpidamente.

Panel lateral: Esta situado a la izquierda y en l detaca la opcin de Administrador de sitios, en ella configuraremos nuestros sitios
Web, para poder acceder de forma rpida a sus distintas pginas Web. A travs de ella tambin podremos publicar en Internet nuestras
Webs y editar directamente las paginas ya publicadas sin necesidad de tenerlas guardadas en nuestro disco local.

Area de trabajo: Es el espacio reservado a nuestra pgina web. Donde insertaremos todos los elementos y escribiremos el texto que
despus aparecer en el navegador.

Barra de modo de edicin: Hay tres pestaas que permiten cambiar el modo de edicin:
Diseo (o modo Wysiwyg) muestra como va a quedar la web. Aqu podemos elegir gracias al desplegable de la izquierda algunos
complementos a la vista, as si elegimos Normal ser la vista por defecto de trabajo habitual, Vista Preliminar es como se vera la

2 de 3
 pgina en el navegador y Etiquetas HTML que muestra de forma esquemtica las etiquetas utilizadas.
Dividir que muestra el rea dividida en dos partes en una se muestra cmo quedara en el navegador y en la otra el cdigo HTML
Cdigo Fuente muestra el cdigo HTML de la pgina

Barra de estado: Proporciona informacin como la relativa a dentro de que etiqueta nos encontramos. Adems a travs de ella podemos
seleccionar etiquetas con sus contenidos para realizar acciones sobre ellos como dar formatos, eliminar, etc.

Desde el men VerMostrar/Ocultar podemos mostrar u ocultar todas las barras de herramientas que se muestran inicialmente.

4. Guardar una pgina

Vamos a hacer una prueba guardando nuestra primera pgina web.

En el rea de trabajo escribimos el texto "Hola Mundo". Ahora

accedemos al men ArchivoGuardar como... para darle un
nombre. Pero nos aparece un cuadro de dilogo en el que se nos
pide que fijemos el Ttulo de la pgina, que ser el que
aparecer en la barra de ttulo de los navegadores y en los
marcadores si decidimos guardarla entre nuestras favoritas.
Introducimos el ttulo "Mi primera pgina" y hacemos clic en
Aceptar.
A continuacin se nos abre el cuadro de dilogo para que elijamos el nombre del archivo a guardar y su ubicacin. Lo guardamos en una
carpeta que llamaremos mistrabajos y le daremos el nombre miprimera.html.
Seguidamente cerramos el documento haciendo clic en el botn de la barra de pestaas.

5. Abrir una pgina

Ya que tenemos un documento creado, vamos a intentar abrirlo:

Accedemos al men ArchivoAbrir Archivo y navegamos hasta la carpeta donde habamos guardado miprimera.html.
La seleccionamos y hacemos clic en el botn de Abrir.
Otra forma de abrir un documento que hemos utilizado recientemente sera acceder al men ArchivoPginas recientes donde
aparecen las ltimas pginas utilizadas.

Ejercicio

Sube a la plataforma el archivo miprimera.html

3 de 3