Manual NVU

Manual NVU
(Editor
de pginas
Manual
NVUWeb
bajo herramienta libre)

Fundabit

Manual NVU

Repblica Bolivariana de Venezuela

Ministerio de Educacin y Deportes (MED)
Fundacin Bolivariana de Informtica y Telemtica (Fundabit)
Manual NVU. Versin noviembre 2005

Presidente de Fundabit: Lic. Carlos Joa

Gerente de Educacin: Lic. Ninoska Cardona
Gerente de Tecnologa: Ing. Arelis Mantilla
Autor: Ing. Isbelia Pea
Diseadores instruccionales: Lic. Vernica Garca, Lic. Juan Paulo Torrealba
Revisado por: Lic. Lisbeth Escalante, Lic. Silvia Lossada

Fundabit

Manual NVU

NDICE
Pg.
Ficha pedaggica

INTRODUCCIN

Cmo utilizar este manual

CAPTULO I: NVU
1. Definicin

2. Propiedades

CAPTULO II: Inicio de sesin en NVU

1. Acceso al entorno KDE

CAPTULO III:Entorno de trabajo

1. rea de trabajo

CAPTULO IV:Men principal

1. Funciones del Men Principal

11

CAPTULO V: Men contextual

1. Funciones del Men Contextual

13

CAPTULO VI: Barra de formato

1. Funciones de la Barra de Formato

Fundabit

17

Actividad final

18

Glosario de trminos

21

Referencias

22

Manual NVU

Ficha pedaggica
Ttulo del material:
A quin est dirigido:
Conocimientos previos:

Manual NVU
Personal tcnico y docente CBIT
Manejo bsico de la computadora y recursos de Internet.

Propsito

Capacitar a los docentes en el desarrollo integrado del editor

Web NVU, para elaborar soluciones educativas a utilizar en el
proceso instruccional.

Objetivo general:

Objetivos especficos:

Fundabit

Al finalizar el curso el participante estar en capacidad de

aplicar los procedimientos tcnicos para la elaboracin de
pginas Web como soluciones educativas computarizadas.

Enumerar las propiedades ms importantes de NVU

Describir los pasos para iniciar sesin en NVU

Sealar los componentes del entorno de trabajo

Describir las funciones del Men Principal

Describir las funciones de la Herramienta de Composicin

Describir las funciones de la Barra de Formatos

Manual NVU

INTRODUCCIN

NVU proporciona un editor de pginas Web que fcilmente podr utilizar para producir
pginas Web nuevas y realizar modificaciones de pginas existentes. Es por ello que este material
tiene como finalidad satisfacer las necesidades del usuario principiante, que posee poco
conocimiento sobre las herramientas de diseo de la Web, permitindole as poder adquirir un
conocimiento significativo del mismo.

Fundabit

Manual NVU

Cmo utilizar este manual

Este material est dividido en una (1) unidad de aprendizaje, que a su vez est sub-dividida
en seis (6) captulos:

CAPTULO I: NVU

CAPTULO II: Inicio de sesin en NVU

CAPTULO III: Entorno de Trabajo

CAPTULO IV: Men Principal

CAPTULO V: Men Contextual

CAPTULO VI: Barra de Formatos

Este manual va dirigido al personal tanto tcnico como docente de los CBIT, y tiene como

finalidad el seguimiento y la posterior realizacin de las actividades formuladas.

Es importante mantener el orden secuencial en el que se le presentan los captulos, para
que usted pueda ejecutar con xito la actividad final.

Fundabit

Manual NVU

CAPTULO I
NVU
1. Definicin:
NVU (New-view,"nueva visin") es un programa para crear y modificar pginas Web, tiene
el aspecto de un programa simple de elaboracin con todas sus funciones inherentes. Se
diferencia de otros editores de pginas Web en que se trabaja en cdigo abierto.
Se trata de un editor WYSIWYG, (lo que usted ve, es lo que usted obtiene) que da la
posibilidad de crear pginas Web con una interfaz grfica ms amigable al usuario que el cdigo
HTML comnmente usado. Ofreciendo la ventaja de visualizar los modificaciones de la pgina
antes de ser publicadas en la Red. No hay necesidad de saber el lenguaje HTML, algunas
nociones bsicas son suficientes para utilizar las diferentes aplicaciones que presenta el
programa.

2. Propiedades:

Editar pginas WYSIWYG (lo que usted ve, es lo que usted obtiene), convirtiendo la
creacin Web en algo tan sencillo como transcribir una letra con su procesador de textos.

Administrar archivos integrados va FTP.

Cdigo HTML fiable, capaz de funcionar con los navegadores ms populares de la

actualidad.

Intercambiar entre el modo WYSIWYG y HTML utilizando pestaas.

Posibilidad de trabajar con mltiples pginas a la vez.

Poderoso soporte para formularios, tablas y plantillas.

Y muchas otras funciones que usted ir descubriendo a medida que lo utilice.

Fundabit

Manual NVU

CAPTULO II
INICIO DE SESIN EN NVU
1. Acceso desde el entorno KDE:
Para poder iniciar sesin en NVU usted debe acceder al entorno KDE, siguiendo los pasos
que se le presentan a continuacin:
INICO DE SESION NVU
IMAGEN

DESCRIPCIN DE LA HERRAMIENTA

1. Haga clic en el botn K del Men de Inicio

2. Seleccione la opcin Internet

2.1 Luego haga clic en NVU

Fundabit

Manual NVU

CAPTULO III
ENTORNO DE TRABAJO
NVU, es un proyecto de cdigo abierto diseado para facilitar el trabajo visual con las
estructuras de programacin en ambiente Web.
Al ejecutar desde el escritorio el cono de acceso directo a NVU, automticamente se
despliega la siguiente pantalla principal o rea de trabajo (Fig. 1).

Men Principal

Herramientas de
Composicin

Barra de
Formato

Fundabit

Figura 1

Manual NVU

1.- Area de trabajo:

El rea de trabajo est concebida como el espacio que permite desplazarse entre las
diferentes pantallas, ofrecindonos la posibilidad de visualizar lenguaje cdigo (HTML), observar
los cambios realizados y la forma definitiva en la que se publicar la pgina .

PANTALLAS DEL REA DE TRABAJO

IMAGEN

DESCRIPCIN
Normal: Escenario que permite comenzar a crear elementos propios del HTML, con
estructuras prediseadas como tablas, imgenes, texto, entre otras.
Etiquetas: Permite la edicin de componentes al igual que en la vista normal y vista
previa, slo que se especifica sobre cul etiqueta est el foco de trabajo. Est representada
por HTML o TAGS.
Fuente o cdigo: Permite visualizar y editar el cdigo fuente que se ha generado.

Vista preliminar: Permite la previsualizacin de la estructura del documento.

Fundabit

Manual NVU

CAPTULO IV
MEN PRINCIPAL

La Barra de Men Principal, est ubicada en la parte superior de la pantalla, contiene una
serie de opciones imprescindibles para realizar diversas funciones as como los conos de acceso
directo ms usados.

1.- Funciones del Men principal:

FUNCIONES DEL MEN PRINCIPAL
IMAGEN

DESCRIPCIN

Archivo: Constituye la primera opcin del men principal. En ella se contemplan

opciones como crear, abrir y guardare imprimir archivos.

Editar: Las opciones de edicin son estndares en casi todas las herramientas;
aqu se pueden localizar las opciones para copiar, pegar, deshacer, rehacer,
seleccionar, buscar y reemplazar. NVU nos brinda una opcin adicional
denominada Preferencias. En esta opcin se configuran ciertas caractersticas del
documento, las cuales se aplicarn cada vez que se abra la pgina en
construccin. Entre los atributos estn: colores del texto, enlaces (visitados,
activos) y campos (como la cantidad de pginas recientemente visitadas).

Ver: En esta opcin se configuran las barras de herramientas, definiendo qu

elementos se desean visualizar en el rea de trabajo. Tambin constituye otra va
para desplazarse entre los diversos modos de edicin (normal, etiquetas, fuente y
vista preliminar), otra opcin es la de cambiar el Zoom del escenario, el cual viene
graduado por defecto en 100%.

Fundabit

Manual NVU
FUNCIONES DEL MEN PRINCIPAL
Insertar: Permite incorporar elementos a la escena, tales como tablas, formularios,
imgenes, anclas y enlaces externos. Uno de los puntos primordiales y de gran
inters es la insercin de caractres especiales, los cuales son necesarios dentro
de cualquier contenido que requiera un cdigo especial para poder ser visualizado.
Los objetos inteligentes de los cuales dispone NVU y que pueden ser insertados, no
se visualizan en el rea de trabajo normal, etiqueta o vista preliminar, slo hasta
que se vea en un explorador se puede tener la seguridad de qu objeto funciona
correctamente.

Formato: Permite cambiar la apariencia de los elementos del documento como:

tipografa, tamao, color, estilo, formato del prrafo, insercin de listas, sangra,
color del prrafo, letra y fondo.

Tabla: Las tablas permiten tener mayor orden en la estructura de contenido bien
sea grfico o textual. Aqu podemos insertar, seleccionar y borrar una tabla,
adems de unir celdas seleccionadas, y definir el color de fondo de la misma.

Herramientas: Se utiliza para validar el cdigo generado en HTML, asignar y

administrar las contraseas por trabajo, asignar rutinas JavaScript desde una
consola especial, as como para verificar la sintaxis generada. La opcin de mayor
uso es el Editor de hojas de estilos o CSS (Cascade Style Sheet), esto se trata de
una especificacin sobre los estilos fsicos aplicables a un documento HTML, los
CSS tratan de dar la separacin definitiva de la lgica (estructura) y el fsico
(presentacin) del documento.

Help (Ayuda): En esta opcin est el enlace a la ayuda en lnea desde el sitio
oficial de NVU. Cabe mencionar que la mayora de los documentos que se
encuentran en la Web estn en otros idiomas y la informacin en espaol es
bastante escasa.

Fundabit

Manual NVU

CAPTULO V
MEN CONTEXTUAL
En el rea de trabajo, especficamente en la parte superior, estn los conos que dan acceso a
las opciones de creacin de elementos:

1.- Funciones del Men Contextual:

FUNCIONES DEL MEN CONTEXTUAL
IMAGEN

DESCRIPCIN
Nuevo: Permite crear un nuevo documento en blanco, generando una pestaa de acceso
identificada con el nombre que se asign al archivo al momento de ser guardado.
Abrir: Permite ubicar un archivo existente a partir de una direccin o nombre del archivo
Guardar:

Almacena

el documento, proyectando una ventana donde se asignar el ttulo que esta

tendr en el explorador.
Publicar: Representa la publicacin del documento desarrollado para un Web site. En esta pantalla
se deben especificar datos puntuales del servidor, (IP. contrasea, usuario) y la estructura raz que
se debe respetar al momento de publicar.

Navegar: Permite visualizar el documento en el explorador seleccionado.

Fundabit

Manual NVU
FUNCIONES DEL MEN CONTEXTUAL
Enlace: Permite asignarle a un determinado objeto, una direccin externa o interna que genere un
llamado a un enlace o link.

Ancla: Se utiliza para identificar ciertos bloques en la estructura de navegacin, realizando un

desplazamiento de manera interna en los textos del documento.

Fundabit

Manual NVU
FUNCIONES DEL MEN CONTEXTUAL

Imagen: Permite insertar un archivo de imagen, tomando en cuenta las rutas

estas ubicadas.

Imagen - Ubicacin

Imagen - Dimensiones

Imagen - Apariencia

Imagen - Enlace

Fundabit

donde se encuentran

Manual NVU
FUNCIONES DEL MEN CONTEXTUAL
Tabla: Conjunto de celdas que permiten organizar la estructura de la informacin a publicar.
Igualmente adecua el formato de textos y grficos presentes en el contenido.

Tabla - Crear

Tabla Modificar atributos

Tabla Modificar atributos de celda

Formulario: Permite tener una interactividad en la Web, facilidad en planteamientos de seleccin
mltiples, accesibilidad para la creacin de cuadros de dilogo, texto, entre otros.
Imprimir: Permite la impresin del contenido que se visualiza en el rea de trabajo normal.

Fundabit

Manual NVU

CAPTULO VI
BARRA DE FORMATO
Es la barra que permite modificar la apariencia de documentos y contenidos. La
apariencia se determina a travs tamao, alineacin, tipografa, color, sangra, entre otras.

1. Funciones de la Barra de formato:

FUNCIONES DE LA BARRA DE FORMATO
IMAGEN

DESCRIPCIN
Formato de prrafo: Despliega opciones que pueden ser tiles para delimitar un prrafo, as como insertar
una lnea en blanco antes del texto o escoger entre diversos formatos preestablecidos para los ttulos o
cabeceras de contenido.
Tipografa: Despliega una variedad de fuentes para cambiar el estilo de letra. Se recomienda usar fuentes
estndar.
Color frente Fondo de pgina y prrafo: Permite representar el color de la fuente y del fondo la pginas.
Tamao fuente: Aumenta o disminuye respectivamente el tamao de la letra.
Formato texto: Permite colocar el texto en negrita, cursiva y subrayado.
Listas: Permite colocar una numeracin, letras o vietas al texto selecccionado.
Alineacin: Permite desplazar la totalidad o una seccin del contenido en los diversos puntos horizontales del
documento (izquierda, centro, derecha y justificado).
Sangra: Genera una tabulacin desplazando hacia la derecha el contenido seleccionado. Esta accin puede
ser reversible con el segundo cono del grupo.
Capa: Permite crear una divisin que puede estar superpuesta en cualquier lugar de la ventana de trabajo.

Fundabit

Manual NVU

ACTIVIDAD FINAL
1.- Diseo de una pgina Web:

Esta actividad est estructurada en cinco (5) sub-etapas, y tiene como finalidad aplicar
algunas de las herramientas que proporciona el editor de HTML NVU.
Etapa I: Insertar tabla
1. En el Men Contextual, buscar el cono Tabla.
2. Hacer clic en el cono Tabla, luego aparece una ventana en la que se podr determinar el
nmero de filas y columnas, as como el ancho y el borde.
3. Predeterminar la tabla con 3 filas y 1 columna. Luego colocar un ancho de 780 pxeles y un
borde 0 pxeles, seleccionando Aceptar.
4. Seleccionar la tabla y hacer clic en el cono Tabla. Luego aparece una ventana que permite
determinar la alineacin, color de fondo, entre otros.
Etapa II: Insertar imagen
1. Seleccionar la imagen predeterminada (Ver figura 1).

Figura 1

2. Seleccionar la opcin Insertar, ubicada en el Men Principal. Luego debe seleccionar la

opcin Imagen.
3. Posteriormente aparece una ventana, debe seleccionar la opcin Elegir Archivo.
4. Seleccione la imagen o el archivo en donde fue guardada . Luego haga clic en Abrir.
5. Haga clic en la opcin No usar texto alternativo.
6. Haga clic en Aceptar.

Fundabit

Manual NVU

Etapa III: Insertar botones con efecto

1. Elaborar 2 botones en el editor grfico GIMP.(Ver figuras 2 y 3)

Figura 2

Figura 3

2. Seleccionar la opcin Insertar, ubicada en el Men Principal.

3. Luego debe seleccionar la opcin Imagen.
4. Posteriormente aparece una ventana, y debe seleccionar la opcin Elegir Archivo.
5. Seleccione la imagen o el archivo en donde fue guardada . Luego haga clic en Abrir.
6. Haga clic en la opcin No usar texto alternativo.
7. Ahora seleccione la opcin Edicin avanzada.
8. Haga clic en la pestaa Eventos JavaScript.
9. Luego en la opcin de Atributo seleccionar el evento Onmouseover.
10. En la opcin Valor se debe colocar la ruta en donde se encuentra el botn:
src =file:///home/usuario/Desktop/Morado.jpg
11. Seguidamente en la misma pestaa Eventos JavaScript, en la opcin Atributo seleccionar el
evento Onmouseout.
12. En la opcin Valor se debe colocar la ruta en donde se encuentra el botn:
src =file:///home/usuario/Desktop/Amarillo.jpg

Etapa IV: Crear un enlace

1. Ubquese en la primera fila de la tabla.
2. Escriba la palabra Prueba.
3. Luego seleccione el cono Enlace interno que est ubicado en el Men Contextual.
4. Seguidamente aparece un ventana, en ella coloque la palabra Prueba, y presione Aceptar.
5. Ahora seleccione el botn Prueba.
6. Seguidamente haga clic en el cono Enlace.
7. En la ventana que se despliega debe colocar el nombre del enlace: # Prueba, luego presione
Aceptar.
8. Para poder observar la creacin del enlace en lnea, debe abrir el navegador Konqueror.
9. En el regln que indica la Direccin, ubicar el archivo en donde guard su pgina Web.
Fundabit

Manual NVU

Etapa V: Insertar Editor CCS

1. Ubquese en la tercera fila de la tabla.
2. Escriba su Nombre y Apellido, por ejemplo: Carolina Rodrguez.
3. Seleccione su Nombre y Apellido .
4. Haga clic en el cono Herramientas del Men Principal.
5. Seleccione la opcin Editor CSS.
6. Aparece la ventana Holas de estilos CSS.
7. Elimine la seleccin de Modo experto.
8. Luego seleccione la opcin Regla.
9. En la pestaa General seleccione la opcin Style applied to all elements of tipe (enter
type below).
10. En el espacio en blanco coloque la letra P en mayscula, y presione Create style rule.
11. En la pestaa Texto seleccionar el campo Familia de letra, opcin Predeterminada.
12. Seleccionar las opciones:

Color: Azul

Grosor: Negritas

Estilo de letra: Cursiva

Mayscula: Sin especificar

Alineacin: Centrada

13. Seleccionar la unidad y el tamao de la letra en 12 pt.

14. En el campo Decoracin de texto seleccionar la opcin Lnea encima.
15. Presione la opcin Cerrar.
16. Un vez ubicado en el rea de trabajo, seleccione nuevamente su Nombre y Apellido.
17. En el Men contextual, el campo Cuerpo de texto seleccione la opcin Prrafo.

Fundabit

Manual NVU

GLOSARIO

CSS (Cascading Style ): Es un lenguaje formal usado para definir la presentacin de un

documento estructurado escrito en HTML.

HTML (Hiper Text Markup Lenguage): Lenguaje de marcacin de hipertexto. Formato

estndar de pginas Web.

Mozilla: Navegador y plataforma de desarrollo libre de cdigo abierto para WWW.

Onmouseout: Esta opcin permite la ejecucin de un evento cuando se no desplaza el

ratn sobre la imagen.

Onmouseover: Esta opcin permite la ejecucin de un evento cuando se desplaza el ratn

sobre la imagen.

TAGS: Son etiquetas de funcin que determinan cada uno de los elementos que componen
el cuerpo o contenido de la pgina Web.

Fundabit

Manual NVU

REFERENCIAS

[Pgina Web en Lnea] Disponible en: http://es.wikipedia.org/wiki/Nvu

[Consultado: 2005, 08 de noviembre]

[Pgina Web en Lnea] Disponible en: http://www.utilidades-utiles.com/Descargar-InternetNvu.html

[Consultado: 2005, 08 de noviembre]

[Pgina Web en Lnea] Disponible en:http://www.faq-mac.com/mt/archives/013006.php

[Consultado: 2005, 08 de noviembre]

Fundabit