Curso Diseo Web con Software libre, VNU

Manual NVU

1. - QUE ES VNU?
NVU (se pronuncia N-view, por "new view") es un editor de pginas web libre y gratuito desarrollado bajo la modalidad Open Source, o sea que cualquiera est autorizado para bajarlo sin costo alguno, incluyendo su cdigo fuente por si necesita hacer cambios especiales. NVU esta diseado para ser extremadamente fcil de usar, hacindolo ideal para los usuarios menos experimentados que quieran crear una web atractiva y de diseo profesional sin necesidad de conocer HTML o cdigo web. La pgina principal del proyecto es http://www.nvu.com/. NVU es un programa relativamente nuevo, del que aun no existe una versin estable, la ltima apareci el 14 de Abril de 2005: Nvu 1.0 Preview Release Entre sus caractersticas destacan las siguientes:

Multiplataforma (Windows, Mac OS X, OS2, muchas variantes de Linux) Modo WYSIWYG (What You See Is What You Get/lo que ves es lo que obtienes) Gestor de archivos va FTP integrado Soporte para formularios, tablas, plantillas de diseo, hojas de estilo CSS, etc El cdigo HTML creado funcionar en los navegadores web ms habituales

2. - ENTORNO DE TRABAJO DE NVU

En la ventana de trabajo de VNU nos encontramos los siguientes elementos (de arriba abajo): Barra de titulo: A la izquierda de esta barra aparece el ttulo de la pgina web que estamos editando y el nombre del archivo en caso de que ya lo hayamos guardado con anterioridad. A la derecha los botones de control de la venta minimizar, maximizar/restaurar y cerrar. Barra de mens: Con los mens Archivo, 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. 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. Bajo esta tenemos otra barra con ms opciones de formatos y adems de otras relacionadas con el formato aplicando estilos y las capas. Ventana administracin sitios web: Esta situada a la izquierda y en ella configuraremos nuestros sitios web, para poder acceder de forma rpida a sus

Ral Snchez Domnguez

Pgina 1

Curso Diseo Web con Software libre, VNU

Manual NVU

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. Ventana de rea de edicin: En esta rea es donde diseramos y editaremos nuestras pginas. Es nuestro espacio de trabajo. Cada pgina que estemos editando se mostrara en esta rea, pudiendo cambiar de una a otra mediante las pestaas que se muestran en la parte superior con el titulo de cada pgina. Tambin podemos mostrar las reglas en esta rea, que nos ayudaran a dimensionar diversos objetos. Barra de modo de edicin: Aparecen cuatro pestaas con las que podremos cambiar el modo de edicin:

Normal (o modo Wysiwyg) Etiquetas HTML (muestra de forma esquemtica las etiquetas utilizadas) Cdigo Fuente (acceso al cdigo HTML de la pgina) Vista Preliminar (Como se vera la pagina en el navegador)

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.

3. - CREAR UN SITIO LOCAL

Un sitio local es un conjunto de pginas que aun no han sido publicadas en Internet, es decir pginas guardadas en carpetas de nuestro disco duro. Para crear un sitio local basta con ir creando pginas y guardndolas en alguna carpeta. Las imgenes utilizadas en las pginas es aconsejable colocarlas en una carpeta independiente perteneciente al mismo sitio web.

4. CONFIGURAR UN SITIO REMOTO

Para configurar un sitio remoto o sito de publicacin debemos pulsar el botn Editar Sitios situado en el Administrador de sitios o desde el men Edicin escoger la opcin Configuracin del sitio de publicacin.

En esta ventana introduciremos el nombre del sitio, la direccin absoluta o direccin (url) del sitio y los datos de nuestra cuenta FTP, direccin, usuario y contrasea.

Ral Snchez Domnguez

Pgina 2

Curso Diseo Web con Software libre, VNU

Manual NVU

Una vez configurado el sitio de publicacin podremos publicar nuestras pginas en Internet fcilmente, y modificar directamente las que ya fueron publicadas, sin necesidad de tenerlas almacenadas en modo local, es decir, en nuestro disco duro.

5. CONFIGURAR LAS PROPIEDADES DE LA PGINA

Las propiedades de la pgina se configuran desde la opcin Ttulo y propiedades de pgina que se encuentra en el men Formato. En el rea relativa a Informacin personal debemos introducir el Titulo de la pgina, el nombre del Autor y una breve Descripcin del contenido de la pgina. Es recomendable rellenar todos estos datos ya que algunos buscadores los utilizaran para indexar la pgina en sus bases de datos. Disponemos de la opcin para indicar que la pgina se trata de una plantilla que utilizaremos como base en futuros diseos. Las plantillas se guardan con una extensin del tipo archivo.mzt Adems podremos introducir en el rea llamada Internacionalizacin las opciones referentes al idioma y juego de caracteres utilizados en la pgina. Estos datos son importantes para que los buscadores sepan clasificar el idioma de nuestra pgina y para que los caracteres se muestren correctamente en ordenadores configurados con otros idiomas distintos al nuestro. Podemos configurar otras propiedades de la pgina accediendo al men Formato y escogiendo la opcin Colores y fondo de pgina. Disponemos de dos opciones para establecer los colores de la pgina: Usar Colores predeterminados o Usar colores personalizados. Si elegimos usar Colores predeterminados, los textos, enlaces y el color de fondo de fondo se mostraran con los colores configurados en el navegador. Con Usar colores personalizados, podemos definir el color en que se mostraran los textos, enlaces y fondo de la pgina independientemente de los colores configurados en nuestro navegador. Otra opcin es la de poder seleccionar una imagen para el fondo de la pgina. Esta imagen se mostrara en la pgina en modo mosaico.

Ral Snchez Domnguez

Pgina 3

Curso Diseo Web con Software libre, VNU

Manual NVU

6. INSERCIN DE TEXTOS
La insercin de textos no tiene ninguna dificultad, es exactamente igual a como lo haramos en cualquier procesador de textos, solamente sealar que los caracteres especiales como vocales acentuadas, ees, parntesis, etc. en HTML se escriben de una forma especial, utilizando cdigos. Si trabajamos en el modo de edicin normal, la aplicacin NVU se encargara de traducir los caracteres especiales que escribamos al modo de cdigo de caracteres en HTML. Los espacios en blanco tambin tienen un tratamiento especial. Tambin podemos insertar otros caracteres especiales o smbolos no disponibles a travs del teclado, desde el men Insertar y escogiendo la opcin Caracteres y Smbolos. Para una lista completa de caracteres especiales y su representacin en HTML ver la Referencia de Entidades.

7. APLICAR ESTILO AL TEXTO

Los estilos o formatos de texto los aplicaremos desde la Barra de Formato o desde el men Formato.

En la Barra de formato nos encontramos (de izquierda a derecha): Una lista de estilos predefinidos de prrafos o ttulos, el botn que nos permite cambiar el color de la letra y el color de fondo de la misma, botones para reducir o amentar su tamao, botones para cambiar su estilo (negrita, cursiva, subrayado), formatos para listas numeradas o vietas, estilos de alineacin y opciones de sangra. Desde el men Formato podemos aplicar todos los estilos anteriores, adems de otros. Con la opcin Tipo de letra, podremos definir un estilo diferente de fuente. Es importante escoger alguno de los mas generales como Arial, Helvetica, Times, Courrier ya que la fuente que escojamos deber estar instalada en el ordenador que visualice la pgina. Tambin podemos cambiar el tamao mediante la opcin Tamao. Otras opciones de formato de texto, adems de las accesibles a travs de la barra de formato, son los diferentes Estilos de texto y de Listas. Una opcin interesante del men Formato es Descontinuar estilos de texto, til cuando hemos escrito textos con algunos formatos y queremos continuar escribiendo mas texto sin formato.

8. VNCULOS
Los vnculos tambin llamados enlaces, links o hiper-enlaces son los que nos permiten navegar, es decir, ir pasando de una pagina a otra. Para insertar un vnculo lo ideal es escribir primero el texto (o imagen) que actuara como enlace y posteriormente pulsar en la barra de redaccin el botn Enlace o escoger la opcin Enlace del men Insertar.

Ral Snchez Domnguez

Pgina 4

Curso Diseo Web con Software libre, VNU

Manual NVU

En la ventana que nos aparece debemos seleccionar el archivo (pgina) que queremos enlazar en caso de que se trate de una pagina perteneciente a nuestro sitio web. Podemos enlazar tambin con otra pgina externa a nuestro sitio web o con una direccin de email en esos casos deberemos escribir la direccin web (URL) o la cuenta de correo electrnico. Otra posibilidad es realizar enlaces a una ubicacin o posicin determinada de la misma pagina que contiene el enlace. Para ello primero debemos definir un punto de anclaje mediante el botn Enlace Interno (o en el men Insertar, la opcin Enlace Interno) que indicar la posicin a la que nos llevar el enlace. Posteriormente procederemos a introducir el enlace de la misma forma que hemos explicado anteriormente, con la salvedad de que en lugar de escoger otro archivo distinto, escogeremos en la lista desplegable que indica la ubicacin del enlace, el nombre que pusimos al punto de anclaje. Tambin es posible realizar enlaces a posiciones determinadas de otras pginas.

9. INSERCIN DE IMGENES
Para insertar imgenes, primero debemos situar el cursor el lugar donde queramos insertar la imagen, y posteriormente acceder al men Insertar y escoger la opcin Imagen. Tambin podemos pulsar el botn de la barra de redaccin Imagen.

10. PROPIEDADES DE LA IMAGEN

La ventana de Propiedades de la imagen aparece cuando insertamos una nueva imagen o cuando seleccionamos una ya insertada y accedemos a la opcin Propiedades de imagen situada en el men Formato. Es esta ventana disponemos de cuatro pestaas para establecer las propiedades de imagen relativas a su Ubicacin, sus Dimensiones, diversas opciones para configurar su Apariencia y para hacer que la imagen actu como un vinculo o Enlace. Desde la pestaa Ubicacin elegiremos el archivo que contiene la imagen y decidiremos si queremos que se haga referencia a ella mediante una URL absoluta o relativa. Mediante la opcin Ttulo emergente, podremos poner un texto a la imagen para que cuando se pase el ratn sobre ella aparezca este texto. Adems deberemos incluir algn Texto alternativo, para mostrar en caso de que el navegador tenga desactivada la opcin de mostrar imgenes o para que se muestre mientras se carga la imagen. En la pestaa Dimensiones podremos modificar el tamao en el que se mostrara la imagen en la pgina. Esta es una opcin poco recomendable, pues las imgenes
Ral Snchez Domnguez Pgina 5

Curso Diseo Web con Software libre, VNU

Manual NVU

pierden calidad y nitidez. Lo correcto seria modificar el tamao con cualquier programa de tratamiento de imagen para posteriormente insrtala en nuestra pgina. Accediendo a la pestaa Apariencia podremos especificar dos tipos de mrgenes a la imagen, el superior/inferior y el izquierdo/derecho adems de poder aadirle un borde a la imagen. Adems podremos definir la forma en la que el texto se alineara a la imagen. Y por ltimo en la pestaa Enlace podremos hacer que la imagen actu como un enlace hacia otra pagina, mail o archivo.

11. - TABLAS
Las tablas son elementos muy utilizados en las pginas web. Se suelen utilizar para presentar datos de forma tabulada y sobre todo para maquetar textos (tablas sin bordes), es decir para situarlos en una ubicacin determina dentro de la pgina web. Dentro de una celda de una tabla, podemos introducir textos, imgenes e incluso otras tablas. Para insertar una tabla pulsamos el botn Tabla de la Barra de Redaccin o en el men Tabla, la opcin Insertar. Nos aparecer una ventana con tres pestaas. La primera de ellas llamada Rpida, la podremos utilizar para definir de forma rpida (con ayuda del ratn) el nmero del filas y columnas de la tabla. Desde la pestaa Preciso, tendremos un mayor control para definir atributos de nuestra tabla como el numero de filas y columnas, el ancho de la tabla (en pixels o % de la ventana del navegador) y el grosor de los bordes. Para hacer que el borde no aparezca pondremos el valor cero (0). La ltima pestaa la utilizaremos para definir atributos de las celdas, como las alineaciones del texto que contengan (horizontal y vertical), el ajuste de texto en la celda, (con ajustar se adapta el texto al tamao de la celda, con no ajustar se adapta el tamao de la celda al texto en caso de que sea mas extenso que la celda) el espacio entre las celdas (margen entre celdas) y el relleno de las celdas (mrgenes internos de la celda). Una vez insertada la tabla en nuestra pgina podemos modificar los atributos que se definieron al insertarla adems de otros. Para ello, basta situar el cursor dentro de la tabla y pulsar el botn Tabla (o men Tabla y opcin Propiedades de la tabla). Adems de los atributos anteriormente comentados podemos definir otros referidos a la tabla: una Alineacin horizontal de la tabla con respecto a la pgina, un Ttulo que encabezar la tabla, el color para el Fondo de la Tabla. Y otros atributos referidos a las celdas, filas o columnas: altura y anchura, alineaciones, estilo de celda de cabecera (negrita y centrado), ajuste del texto y color de fondo. Por ultimo, indicar que en el men Tabla disponemos de opciones para seleccionar, aadir y borrar elementos de tablas o tablas completas, combinar (unir) y dividir celdas y definir colores de fondo (celdas y tabla).

12. - FORMULARIOS
Los formularios son mtodos mediante los cuales los visitantes de una pgina web pueden enviar datos a su autor mediante email. La definicin anterior no es exactamente correcta, pues los formularios se pueden utilizar para realizar otras funciones (utilizando otros lenguajes distintos a HTML), pero que no son motivo de este curso. Nosotros los utilizaremos solamente con HTML para enviar datos mediante email a una cuenta de correo electrnico. Para insertar un formulario, y los objetos que contendr, lo haremos desde el botn Formulario de la Barra de Redaccin o desde el men Insertar. No nos detendremos a
Ral Snchez Domnguez Pgina 6

Curso Diseo Web con Software libre, VNU

Manual NVU

explicar cada una de las caractersticas de los objetos que podemos insertar en un formulario, pues esta explicado en la Referencia de HTML que tambin forma parte del material entregado en el curso.

13. - FRAMES
Los frames (marcos o cuadros) permiten dividir la ventana en varias ms pequeas, de modo que en cada una de ellas se carga una pgina html distinta. Las versiones ms antiguas de los navegadores no tienen implementada esta caracterstica, por lo que no podrn verlos. Para crear una pgina con frames, tendremos que hacerlo desde el modo cdigo, tecleando sentencias HTML, ya que el programa aun no esta preparado para trabajar con frames. Para saber como se crean frames, ver la Referencia de HTML. Cuando se utilizan frames es muy habitual usar el atributo target en la etiqueta que define un vnculo (<A>), con este atributo especificaremos en que frame debe cargarse el destino del vinculo, es decir, la pgina vinculada.

14. - CAPAS
Las capas son bloques con contenido HTML que pueden posicionarse de manera dinmica y organizables en 3D. Realmente tienen sentido dentro de los estilos CSS, de hecho sus ventajas solo se pueden aprovechar al cien por cien utilizando estilos CSS. En NVU crearemos capas mediante el botn Capa, es recomendable seleccionar primero el bloque que queremos colocar dentro de la capa antes de pulsar dicho botn. Junto a este botn aparecen dos que nos ayudaran a definir la profundidad de la capa, es decir, colocarla arriba o debajo de otra. Dentro de las capas podemos incluir otras capas, imgenes, texto formateado, tablasetc e incluso definirlas con un color de fondo o imagen de fondo. El problema es que NVU aun no esta preparado totalmente para trabajar con capas, por lo que su uso puede resultar frustrante. Desde el men Formato podemos activar la Rejilla de posicionamiento que nos ayudara a mover las capas y colocarlas ms precisamente donde deseemos.

15. PUBLICACIN
Una vez configurado el sitio de publicacin tal y como se describi en el punto 4, podremos publicar pginas en Internet y editar las ya publicadas. Para ello es recomendable que previamente se visualice la ventana del Administrador de sitios (Menu Ver Mostrar Ocultar Administrador de sitios). Publicar es similar a cuando guardamos las pginas en nuestro disco duro, con la diferencia que se guardaran en un servidor, el que configuramos en el administrador de sitios. Con el botn Publicar (o men archivo publicar ) colocaremos las pagina en Internet (si queremos tambin podemos guardarla en nuestro disco duro, como hemos hecho hasta ahora). Desde el Administrador de sitios tambin podremos modificar las pginas ya publicadas en Internet, basta con seleccionar el archivo que queremos modificar y se bajara directamente de Internet a nuestro programa de edicin, NVU. Una vez modificada, volveremos a publicarla para que aparezca con los nuevos cambios realizados.

Ral Snchez Domnguez

Pgina 7