KOMPOZER

¿Qué es KompoZer?

KompoZer es un editor de páginas web WYSIWYG (What you see is what you get - Lo

que ves es lo que recibes). Es un derivado de NVU, es decir, una versión no oficial de

NVU, el cual ha reparado ciertos errores(bugs) que este presentaba. Komposer está

basado en Mozilla Composer pero con ejecución independiente. Su objetivo es facilitar el

desarrollo de páginas web, gracias a las distintas formas de visualización disponibles en

su interfaz como: código fuente, ventana WYSIWYG, visión con tags de HTML realzados)

Presenta características como el soporte integrado de CSS y mejor gestión del soporte

FTP para actualización de los ficheros, soporte de marcos, formularios, tablas, pantillas de

diseño, etc. Cabe destacar que está disponible para diversas plataformas: Windows, Mac

OS, y Linux. La versión sobre la cual trabajaremos en este tutorial, es la 0.7.10, traducida

al español por el Proyecto Nave. se sentirán cómodos con la interfaz y opciones de

KompoZer.

Algunas de las herramientas de KompoZer son:

• Administrador de sitios FTP: cualquier sitio que el usuario haya especificado en

sus Opciones de Publicación, podrá ser navegado en una barra lateral. También

permite filtrar y mostrar archivos o solo documentos HTML o imágenes.

• Nuevos selector de colores: algo más ligado a lo que los usuarios acostumbran a

utilizar. Se podrá elegir entre el selector de colores verde, azul y rojo para crear la

tonalidad deseada, así como también elegir la saturación de la matiz (hue

saturation) y el brillo. En caso de que esto nos resulte incómodo, podremos elegir el

color deseado con el mouse.

• Pestañas: una de las herramientas más conocidas de Mozilla esta disponible para

KompoZer facilitando el trabajo y brindándole la posibilidad al usuario de realizar

acciones de manera más fluida navegando entre pestañas. Se podrá utilizar la

herramienta Deshacer y Rehacer independientemente en cada una de las

pestañas.

• Barras de tareas personalizables: se podrán elegir los botones que aparezcan en

nuestras barras y los que no según nuestros gustos y/o necesidades.

Como podrás ver, ésta aplicación facilita mucho el desarrollo de sitios web con sus

herramientas.

ENTORNO DE TRABAJO

La ventana principal de KompoZer esta formada por varias barras, a continuación una

descripción de cada una de ellas.

Barra de titulo:

A la izquierda de esta barra aparece el título de la página web que estamos editando o el

nombre del archivo que le hayamos asignado. A la derecha los botones de control de la

venta minimizar, maximizar/restaurar y cerrar.

Barra de menús:

Formado por los menús Archivo, Editar, Ver, Insertar, Formato, Tabla, Herramientas,

Ayuda. A través de estos menús podemos acceder a todas las opciones del programa.

Barra de Redacción:

Esta barra está formada por botones con las opciones de uso más habitual que se

encuentran en la barra de menú. A través de estos botones accedemos más rápidamente.

Por ejemplo los botones:

N u e v o , A b r i r, G u a r d a r, P u b l i c a r, B u s c a r, I m a g e n , e t c .

C a b e d e s t a c a r q u e p o d r e m o s m o d i f i c a r d i c h a b a r r a, p a r a a d a p t a r l a a n u e s t r a s n e c e s i d a d e s .

Barras de Formato:

Con botones que nos permiten acceder a opciones más básicas de formato de texto y

párrafos. Estas son similares a las de cualquier procesador de textos. Bajo esta tenemos

otra barra con más opciones de formatos y además de otras relacionadas con el formato

aplicando estilos y las capas.

Ventana administración sitios web:

Esta barra esta situada a la izquierda y en ella podremos configurar los sitios web, para

poder acceder de forma rápida a las distintas páginas web. A través de ella también

podremos publicar en Internet Webs y editar directamente las paginas ya publicadas sin

necesidad de tenerlas guardadas en nuestro disco local.

Ventana de área de edición:

Esta es el área principal, en la que podremos diseñar y editar la página web. Es el

espacio de trabajo. Cada página que se edite se mostrará en esta área, pudiendo cambiar

de una a otra mediante las pestañas que se muestran en la parte superior con el titulo de

cada página. También podemos mostrar las reglas en esta área, que nos ayudaran a

dimensionar diversos objetos.

Barra de modo de edición:

En esta barra nos encontraremos cuatro pestañas que permiten cambiar el modo de

edición:

· Normal (o modo Wysiwyg)

· Etiquetas HTML (muestra de forma esquemática las etiquetas utilizadas)

· Código Fuente (acceso al código HTML de la página)

· Vista Preliminar (Como se vería la pagina en el navegador)

Barra de estado :

Proporciona información como la relativa a dentro de qué etiqueta nos encontramos.

Además a través de ella podemos seleccionar de forma facil y rápida las etiquetas con

sus contenidos para realizar acciones sobre ellos como dar formatos, eliminar, etc.

BARRAS DE MENUS 

Menú Archivo:

Constituye la primera opción del menú

principal. En ella podemos contemplar

opciones como crear, abrir y guardare

imprimir archivos.

Menú Editar:

Las opciones de edición son estándares en

casi todas las herramientas; aquí se

pueden localizar las opciones para copiar,

pegar, deshacer, rehacer, seleccionar,

buscar y reemplazar. Y propiedades de

publicación del sitio web.

Menú Ver:

En esta opción se configuran las barras de

herramientas, definiendo qué elementos se

desean visualizar en el área de trabajo.

También constituye otra vía para

desplazarse entre los diversos modos de

edición (normal, etiquetas, fuente yvista

preliminar), otra opción es la de cambiar el

Zoom del escenario. (defecto 100%)

Menu Insertar

Permite incorporar elementos a la escena,

tales como tablas, formularios, imágenes,

anclas y enlaces externos. Uno de los

puntos primordiales y de gran

interés es la inserción de caractéres

especiales, los cuales son necesarios

dentro de cualquier contenido que requiera

un código especial para poder ser

visualizado.

Los objetos inteligentes de los cuales

dispone Kompozer y que pueden ser

insertados, no se visualizan en el área de

trabajo normal, etiqueta o vista preliminar,

sólo hasta que se vea en un explorador se

puede tener la seguridad de qué objeto

funciona correctamente.

Menú Formato

Permite cambiar la apariencia de los

elementos del documento como: tipografía,

tamaño, color, estilo, formato del párrafo,

inserción de listas, sangría, color del

párrafo, letra y fondo.

Menú Tabla

Las tablas permiten tener mayor orden en

la estructura de contenido bien sea gráfico

o textual. Aquí podemos insertar,

seleccionar y borrar una tabla, además de

unir celdas seleccionadas, y definir el color

de fondo de la misma.

Menú Herramientas

Se utiliza para validar el código generado

en HTML, asignar y administrar las

contraseñas por trabajo, asignar rutinas

JavaScript desde una consola especial, así

como para verificar la sintaxis generada. La

opción de mayor uso es el Editor de hojas

de estilos o CSS (Cascade Style Sheet)

que tratan de dar la separación definitiva de

la lógica (estructura) y el físico

(presentación) del documento

Menú Ayuda

En esta opción está el enlace a la ayuda en

línea desde el sitio

oficial de kompozer-

CREACIÓN DE UN SITIO WEB

KompoZer nos permitirá trabajar directamente sobre el sitio web en Internet, aunque

además puede trabajar con archivos en el sistema local.

Para mantener organizados todos los archivos, es necesario crear un sitio web.

Seleccionar:

– Menú Editar

– Configuración de Publicación

O sino desde el panel izquierdo de Administrador de sitios (F9), seleccionamos el botón

Editar Sitios.

En ambos casos aparecerá la siguiente ventana:

Admini stración de sitios web

A la izquierda, podemos observar los sitios ya definidos, y a la derecha las propiedades

del sitio seleccionado.

Para crear un nuevo sitio, primero seleccionamos el botón Nuevo sitio; así, los campos de

la derecha se pondrán en blanco para que sean rellenados:

 Nombre del sitio: Nombre del sitio que se va a crear. Es un texto que se va a

mostrar en la lista de sitios y cuando haya que seleccionarlo. Es muy útil para

identificarlo.

 Direc ción HTTP de su pá gina inicial: URL de la página de inicio del sitio web.

Por ejemplo, si se tiene una página en geocities, será

http://es.geocities.com/usuario/index.html. En caso de que se desee trabajar en el

sistema local, la dirección será de tipo file:///C:/Documents and

Settings/usuario/sitioweb/index.html.

 Servidor de publicación: información para publicar en el servidor

 Directorio de publicación: dirección FTP (Protocolo de Transferencia de

archivos) de publicación. Esta información nos la suministra el servidor

donde se aloja la página. En el caso de Geocities será

ftp://ftp.es.geocities.com/. En el caso de que se trabajemos en local, se

introducirá una URL local del tipo ile:///C:/Documents and

Settings/usuario/Directorio o se seleccionamos la carpeta pulsando en el

botón Seleccionar directorio.

 Nombre de usuario

 Contraseña

Para eliminar un sitio, lo seleccionamos en la lista y pulsamos el botón Eliminar sitio.

Para establecer un sitio predeterminado, lo seleccionamos en la lista y pulsamos el botón

Seleccionar como valor predeterminado. El nombre del sitio se pondrá en negrita

indicando que es el predeterminado.

Una vez definido el sitio web, en el panel de la izquierda se mostrarán todos los archivos y

sub-carpetas existentes. Haciendo doble pulsación sobre un archivo, se abrirá en una

solapa nueva de la zona de trabajo. Si se hace pulsación doble sobre una carpeta, se mostrará el contenido de la misma.

CONFIGURACIÓN DE LA PÁGINA

Crear una Página Web

• Para crear una página web pulsamos sobre el icono Nuevo en la barra de herramientas

de composición. O desde el menú Archivo-> Nuevo

Aparecera la siguiente ventana, Podremos seleccionar:

• un documento en blanco, que bien puede ser un XHTML normal, o un Strict DTD, que es un

documento XHTML en el que no soporta etiquetas antiguas y el código debe estar escrito

correctamente.

• Un documento basado en una plantilla.

• Una plantilla vacia.

También, podremos decirle que lo cree en una pestaña, o en una ventana nueva.

• Para abrir una página ya existente ir a: Archivo → Abrir archivo. (Ctrl. + O)

• Para abrir una página abierta recientemente ir a: Archivo → Páginas recientes.

Es interesante comentar que mediante la opción abrir dirección web, podremos cargar

una web directamente en el programa, observando así su disposición y contenido.

Guardar una Página Web

Podremos guardar un documento de KompoZer en formato HTML o formato sólo texto. En

el caso de guardarlo como HTML (Archivo/ Guardar como...) preservará el formato del

documento, como estilos del texto, imágenes, etc. Si guardamos el documento como sólo

texto (Archivo/ Guardar) y cambiar codificación de caracteres) eliminaremos todas las

etiquetas HTML, pero se preservará el texto del documento.

Vista preliminar en el navegador.

Si queremos comprobar cómo quedaría nuestra página web en Internet, podemos

reproducirla con el navegador que tengamos instalado. Solo hemos de elegir Archivo/

Visualizar Página en el navegador o pulsar la tecla F5.

ENLACES

Los vínculos también llamados enlaces, links o hiper-enlaces son los que nos permiten

navegar, es decir, ir pasando de una pagina a otra.

Se puede usar como enlace un texto o una imagen, el procedimiento es similar en ambos

casos. Hay dos formas de introducir una dirección de la página/archivo/etc a enlazar:

Direcciones absolutas y relativas

• Absolutas: Se utilizan para enlazar páginas o archivos de un servidor externo. Una

dirección absoluta contiene la URL completa. Son del tipo:

http://www.cprlogrono.com Estas direcciones requieren ser comprobadas

periodicamente como labor de mantenimiento.

Ej: http://www.google.es/. Código: <a href="http://www.google.es">

• Relativas: Para enlazar páginas o archivos pertenecientes al mismo sitio. Les falta

alguna de las secciones de la URL. Si el archivo destino no se encuentra dentro de

la misma carpeta del sitio web, se le antepone la ruta correspondiente a partir de la

ubiación actual.

Ej: direccion relativa. Código: <a href="../../index.htm">

Tipos de Enlaces:

• Interno: Nos lleva a otra parte dentro de la misma página donde se encuentra el

enlace. Para ello utilizamos un elemento llamado ancla.

• Local: Se refiere a algún recurso situado en el mismo servidor que nuestra página

(URL relativas)

• Externo: Se refiere a algún recurso situado en otros servidores diferentes donde

se encuentra nuestra página (URL absoluta)

• De Correo: Cuando se da clic en este tipo de enlaces se abre programa de correo

electrónico para enviar un email a la dirección que previamente se halla

especificado en ese enlace.

• A Archivos: El recurso señalado es un archivo y al dar clic nos permiten que se

abran o se descargen a nuestro ordenador esos archivos.

APLICACIÓN

Enlaces Interno

1. Situamos el cursor a donde estará dirigido nuestro enlace. Una vez seleccionado,

pulsamos el icono Enlace Interno , y le establecemos un nombre que hará de

referencia de nuestro enlace.

2. Luego, seleccionamos nuestro futuro link que, como ya hemos mencionado,puede

ser el texto o la imagen que servirá de enlace.

3. Elegimos menú Insertar→ Enlace o pulsamos el botón Enlace

4. En Ubicación del enlace colocamos la URL de la página a la que debe apuntar el

enlace.

La URL puede ser absoluta (comienza por http://) o relativa, es decir la ruta de un

archivo en el propio servidor donde esté alojada la página. En este caso podremos

marcar la opción La URL es relativa a la dirección de la página cuando accedamos

a las propiedades del enlace.

Al pasar el mouse sobre el ancla colocada, aparecerá el nombre que le hemos

dado.

Para cada destino al que queremos llegar en nuestra página habrá un ancla

Enlaces Externo

1. Situamos el cursor donde será el enlace. Por ejemplo seleccionando el texto o

imagen que servirá de enlace.

2. Elegimos menú Insertar→ Enlace o pulsamos el botón Enlace

3. En Ubicación del enlace colocamos la URL de la página a la que debe apuntar el

enlace.

La URL puede ser absoluta o relativa.

Enlaces a Correo Electrónico

Al insertar un enlace, simplemente en lugar de escribir la url, escribimos el correo

electrónico al cual queremos llegar y marcamos la opción “Lo anterior es una

dirección de correo electrónico”

Enlaces a Archivos:

Para crear un enlace a un archivo, lo realizamos igual que si fuera a otra página, solo que

en vez de seleccionar dicha página, seleccionamos el archivo en cuestión. Estos enlaces

no disponen de mayor complejidad.

Destino del Enlace:

El archivo llamado por un enlace se muestra en una ventana del navegador. Por defecto,

esta ventana es la misma en la que estábamos, se sustituye su contenido. Pero es posible

determinar cuál va a ser la ventana de destino del enlace.

Dentro de las propiedades del enlace, podremos seleccionar entre las siguientes

opciones:

• En la misma ventana, sin marcos (por defecto)

• En una nueva ventana.

• En el conjunto de marcos contenedor

• En el marco actual

• En este marco:<nombre marco>

De momento solo prestaremos atención a los dos primeros, ya que los marcos los

estudiaremos en profundidad en otros apartados de este manual.