nvu 10 inf final - fce · privativo, como dreamweaver y frontpage para la misma función, de manera...

Consecutivo: INF-IN.I-04-04

UNI-FO-02 V 1.0

Esta obra esta bajo una licencia Reconocimiento-No comercial 2.5 Colombia de CreativeCommons. Para ver una copia de esta licencia, visite http://creativecommons.org/licenses/by/2.5/co/ o envié una carta a Creative Commons, 171Second Street, Suite 30 San Francisco, California 94105, USA

NVU 1.0

Autores:

Zareth Manzón Garnica Alejandro Mendoza Jaramillo

Director Unidad Informática: Henry Martínez Sarmiento Tutor Investigación: Alejandro Bolívar Coordinadores: Leydi Diana Rincón Rincón Juan Felipe Reyes Rodríguez

Coordinador Servicios Web: Miguel Ibañez Analista de Infraestructura y Comunicaciones: Alejandro Bolivar Analista de Sistemas de Información: Mesias Anacona Obando

UNIVERSIDAD NACIONAL COLOMBIA FACULTAD DE CIENCIAS ECONÓMICAS

UNIDAD DE INFORMÁTICA Y COMUNICACIONES BOGOTÁ D.C.

DICIEMBRE DE 2008

Consecutivo: INF-IN.I-04-04

UNI-FO-02 V 1.0

NVU 1.0 Director Unidad Informática: Henry Martínez Sarmiento

Tutor Investigación: Alejandro Bolívar.

Auxiliares de Investigación: Alejandro Mendoza Jaramillo Jennifer Lisel Reina Chivatá

Alejandro Nieto Ramos Jerson Arnulfo Guerrero Nova

Alvaro Esneyder Roncancio Guevara Jorge Alexander Ceron Sánchez

Amanda Patricia Ruiz Ortiz Jorge Mario Cortes Cortes

Angel Leonardo Jerez Carvajal Jose Fernando Moreno Gutierrez

Angela Maria Franco Perez Juan Carlos Peña Robayo

Angela Maria Yunda Correa Jurley Sosa Camacho

Angela Patricia Prada Sepulveda Luis Alejandro Pico

Benjamin Eduardo Venegas Venegas Maria Paula Gandur Roseria

David Alberto Montaño Fetecua Myriam Jasmin Guerra Cardenas

David Camilo Sanchez Zambrano Nubia Alejandra Segura Tenjica

Delia Fernanda Castrillon Torres Nury Bibian Bejarano Cardenas

Erika Zuley Guerrero Cortés Peter Escamilla Mahecha

Fredy Jair Fajardo Moreno Rodrigo Acosta Sarmiento

Ivan Dario Barreto Bernal Sergio Fernando Garzon Rincon

Javier Mauricio Niño Ravelo Yeimy Yolanda Marin Barrero

Este trabajo es resultado del esfuerzo de todo el equipo perteneciente a la Unidad de Informática.

Se prohíbe la reproducción parcial o total de este documento, por cualquier tipo de método fotomecánico y/o electrónico, sin previa autorización de la Universidad Nacional de Colombia.

UNIVERSIDAD NACIONAL COLOMBIA

FACULTAD DE CIENCIAS ECONÓMICAS UNIDAD DE INFORMÁTICA Y COMUNICACIONES

BOGOTÁ D.C. DICIEMBRE DE 2008


UNIDAD DE INFORMÁTICA Y COMUNICACIONES 3

UNI-FO-02 V 1.0

TABLA DE CONTENIDO

TABLA DE CONTENIDO ................................................................................................................... 3 1. RESUMEN ....................................................................................................................................... 5 2. ABSTRACT ..................................................................................................................................... 5 3. INTRODUCCIÓN ........................................................................................................................ 6 4. QUÉS ES NVU? .............................................................................................................................. 7

4.1. Características de NVU ........................................................................................................ 7 4.2. Cómo instalar una copia de NVU en tu computador. .................................................. 8

4.2.1. Requerimientos Técnicos ............................................................................................ 8 4.3. TIPS ÚTILES: ........................................................................................................................ 16

5. CONCEPTOS IMPORTANTE ANTES DE COMENZAR UNA PÁGINA WEB ........ 23 5.1. NAVEGADORES WEB: .................................................................................................... 23 5.2. LENGUAJE HTML: ............................................................................................................. 23 5.3. HEAD: ................................................................................................................................... 24 5.4. BODY: ................................................................................................................................... 24 5.5. TABLAS: ................................................................................................................................ 25 5.6. FORMULARIOS: ................................................................................................................. 25

6. DESCRIPCIÓN DE LA VENTANA PRINCIPAL DE NVU ............................................... 26 6.1. BARRA DE TITULO .......................................................................................................... 26 6.2. BARRA DE MENUS ........................................................................................................... 27 Archivo: ........................................................................................................................................... 27 Editar: .............................................................................................................................................. 28 Ver: ................................................................................................................................................... 28 Insertar: .......................................................................................................................................... 29 Formato:......................................................................................................................................... 29 Tabla: ............................................................................................................................................... 30 Herramientas: .............................................................................................................................. 30 Ayuda: .............................................................................................................................................. 31 6.3. BARRA DE REDACCION ................................................................................................ 31 6.4. BARRA DE FORMATO .................................................................................................... 35 6.5. Ventana de Administrador de Sitios Nvu ...................................................................... 37 6.6. Ventana de área de edición .............................................................................................. 38

6.6.1. Barra de exploración con pestañas ........................................................................ 39 6.6.2. Barra de estado ........................................................................................................... 39 6.6.3. Barra de modo de edición ........................................................................................ 39

6.7. CERRAMOS NVU .............................................................................................................. 42 7. CREAR UN SITIO LOCAL ...................................................................................................... 42

7.1. Cuestiones para tener en cuenta .................................................................................... 42 7.1.1. Facilidad de navegación ............................................................................................. 42 7.1.2. Cuidado con el “tamaño” de las páginas ............................................................... 43 7.1.3. Pruebe sus páginas antes de publicarlas................................................................. 43



UNI-FO-02 V 1.0

7.2. Creación de una Web ........................................................................................................ 43 7.3. Configuración de un sitio remoto ................................................................................... 45 7.4. Configuración de las propiedades de las páginas web ................................................ 46 7.5. INSERCIÓN DE TEXTO .................................................................................................. 50

7.5.1. Aplicar estilo al texto ................................................................................................ 51 7.5.1.1. Sangrado de párrafos ......................................................................................... 52

7.6. INSERCIÓN DE IMÁGENES............................................................................................ 52 7.6.1. Propiedades de la imagen ......................................................................................... 52

7.7. INSERCION DE TABLAS ................................................................................................. 56 7.7.1. Edición Avanzada de Tablas: .................................................................................... 59

7.8. INSERCION DE FORMULARIOS .................................................................................. 62 7.8.1. Opciones de configuración ....................................................................................... 63

7.8.1.1. Definir Formulario ............................................................................................. 63 7.8.1.2. Propiedades del campo del formulario ......................................................... 64 7.8.1.3. Propiedades de la imagen del formulario ...................................................... 65 7.8.1.4. Propiedades del área de texto ................................................................... 68 7.8.1.5. Lista de Opciones ............................................................................................... 69 7.8.1.6. Definir botones ................................................................................................... 70 7.8.1.7. Definir conjunto de campos ............................................................................ 70 7.8.1.8. Búsqueda de índices ........................................................................................... 71

7.9. FRAMES ................................................................................................................................. 72 7.10. CAPAS ............................................................................................................................... 75

7.10.1. Crear Capas ............................................................................................................. 75 7.10.1.1. Insertar una Capa vacía: .................................................................................... 77 7.10.1.2. Para fijar un color en una capa (DIV): ........................................................... 78

7.11. ESTILOS ............................................................................................................................ 78 7.11.1. Usar hojas de estilo en cascada ........................................................................... 79 7.11.2. Crear hojas de estilo con Nvu ............................................................................ 79

8. COMPARACIÓN CON OTROS SOFTWARE .................................................................. 81 8.1. COMPARACION NVU - DREAMWEAVER ................................................................ 81 8.2. COMPARACION NVU – FRONTPAGE ...................................................................... 86

9. CONCLUSIONES Y LIMITACIONES ................................................................................... 88 10. ANEXOS .................................................................................................................................. 88 11. TABLA DE ILUSTRACIONES ............................................................................................ 89 12. BIBLIOGRAFIA ....................................................................................................................... 93



UNI-FO-02 V 1.0

1. RESUMEN

NVU es un editor de editor de páginas Web WYSIWYG1 que puede llegar a convertirse en un serio rival de editores tan populares como FrontPage o Dreamweaver o al menos puede considerarse como alternativa de código abierto muy interesante.

Este editor te permite desarrollar páginas Web de forma muy cómoda, gracias a las diferentes visualizaciones disponibles en su interfaz (código fuente, modo normal, código HTML).Incluye además otras características como gestión de trabajo mediante proyectos, cliente FTP integrado para subir una página directamente desde NVU, además soporta los elementos más necesarios, marcos, formularios, tablas, plantillas de diseño, hojas de estilo CSS, entre otros.

A través de este trabajo se busca consolidar un manual para usuario final en el que mediante ejemplos se describa paso a paso el uso de cada una de las herramientas que posee NVU.

2. ABSTRACT

Nvu is an editor WYSIWYG Web pages, it could become a serious rival of popular editors such as FrontPage or Dreamweaver or at least could be considered as a very interesting open source alternative.

This editor allows you to develop Web pages in a very comfortable way, it is because the alternative displays available in its interface (source code, so normal, HTML). It also includes other features such as working through project management, integrated FTP client to upload a web page directly from Nvu, in addition, it also supports the most needed elements such as frames, forms, tables, design templates, CSS style sheets, among others.

Through this work is looked to design a manual for the end user through examples that describe step by step the use of each tool that has NVU.

1 Se aplica a los procesadores de texto y otros editores de texto con formato (como los editores de HTML) que permiten escribir un documento viendo directamente el resultado final,



UNI-FO-02 V 1.0

3. INTRODUCCIÓN

La realización y creación de páginas WEB es una labor que requiere de creatividad, visión y constante actualización, además de las herramientas que permiten llevar a cabo esta tarea. Desde este enfoque nace la necesidad de encontrar alternativas libres a los software privativos de creación y edición de páginas Web, tales que le permitan a las unidades administrativas y educativas como la Universidad Nacional de Colombia adoptar herramientas de optimización en el área de diseño Web.

NVU aparece como un sistema útil para la elaboración y edición de páginas Web, ya que además de ser de plataforma libre, NVU permite la constante actualización y modificación en línea de páginas web, además de la creación de páginas Web para redes locales o externas. La versatilidad y el funcionamiento en varios Sistemas Operativos, añadido a la facilidad de su uso (ya que no requiere conocimientos previos en HTML) hacen de este paquete, una buena opción para diseñar un curso libre acerca de su funcionamiento y para investigar y evaluar la ventaja de su futura implementación en la Universidad Nacional.

4. OBJETIVOS

4.1. OBJETIVO GENERAL

Investigar la eficacia del programa de plataforma libre “Nvu” y su posible aplicación, instalación y configuración como una novedosa herramienta para la creación, edición y publicación de páginas web dentro de la Unidad de Informática.

4.2. OBJETIVOS ESPECÍFICOS

• Hacer un recorrido detallado por las herramientas que ofrece el programa para la creación, edición y publicación de páginas web.

• Hacer una comparación entre el programa Nvu, de plataforma libre, y el software privativo, como Dreamweaver y FrontPage para la misma función, de manera que se puedan encontrar sus diferencias, ventajas y desventajas y concluir si es recomendable o no su instalación y trabajo por parte de los usuarios de la Unidad de Informática.



UNI-FO-02 V 1.0

5. QUÉS ES NVU?

Nvu es un sencillo editor visual de páginas web (WYSIWYG2)2 de código abierto disponible para varias plataformas, entre las que están Linux, Mac OS X y Microsoft Windows. El creador de este proyecto es Daniel Glazman3, quien basó el software en Mozilla Composer (aunque su ejecución es independiente). Glazman diseñó NVU pensando en rivalizar con aplicaciones

como Dreamweaver o FrontPage,

Nvu está diseñado para ser muy fácil de usar, haciéndolo ideal para los usuarios menos experimentados que no tienen un gran dominio del HTML, pero que quieren crear una web atractiva y de diseño profesional. NVU soporta hojas de estilo CSS4 y conexiones FTP permitiendo de esta manera actualizar los ficheros.

5.1. Características de NVU

Nvu Ofrece una amplia variedad de herramientas para crear de forma cómoda una página web, entre otros un servidor FTP integrado, un entorno de edición WYSIWYG intuitivo, con la posibilidad de pasar fácilmente al modo de código fuente. Es decir que los cambios que se van realizando, es lo que quedará al finalizar la edición, lo que permite que se visualicen las modificaciones antes de ser publicadas en la Web.

Posee además una interfaz amigable con el usuario, brinda consejos acerca de l uso de sus herramientas, además para los colores, dispone de un editor muy fácil de usar, junto a un editor CSS eficaz para principiantes con escasas nociones de hojas de estilo.

2 Es un acrónimo "lo que ves es lo que obtienes", en inglés.

3 Daniel Glazman es un programador de computadoras conocido por su trabajo en Mozilla 's Editor y Compositor componentes y Nvu, una versión del Mozilla Composer, creado para Linspire Corporation.

4 Hojas de estilo en cascada.



UNI-FO-02 V 1.0

Está basado en el motor Gecko, el mismo que usa la familia de navegadores web Mozilla, lo que nos asegura una compatibilidad total con los estándares de edición web (XUL, CSS, XML y JavaScript). Incluye otras interesantes características como la gestión de proyectos web o la posibilidad de personalizar la interfaz y barras de herramientas.

Además NVU está disponible para Linux, Mac OS X y Microsoft Windows, aunque puede compilarse para cualquier plataforma con el Netscape Portable Runtime. Mozilla Composer está todavía en desarrollo como parte de la suite Mozilla para otras plataformas.

NVU es un programa relativamente nuevo, del que aun no existe una versión estable, la última apareció el 14 de Abril de 2005: Nvu 1.0 Preview Release.

Entre sus características 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 vía FTP integrado • Soporte para formularios, tablas, plantillas de diseño, hojas de estilo CSS, etc • El código HTML creado funcionará en los navegadores web más habituales

5.2. Cómo instalar una copia de NVU en tu computador.

Para obtener una copia de Nvu, el primer paso es acceder a una de las páginas donde se pueda descargar el setup. Algunas de ellas son:

http://www.nvu.es/ http://nave.hispalinux.es/ http://www.proyectonave.es/productos/descargas http://www.bloginformatico.com/nvu-editor-visual-de-paginas-web-

multiplataforma.php http://nvu.softonic.com/

5.2.1. Requerimientos Técnicos

Para la instalación de Nvu, se requiere de:

Sistema operativo: Win98/98SE/Me/2000/XP 20.7 MB de espacio en disco



UNI-FO-02 V 1.0

Por ejemplo de la página web de Softonic se busca Nvu 1.0 y se da clic en descargar:

Ilustración 1Descargar Nvu

Una vez que pida la confirmación par aguardar el septup, se da clic en “Guardar Archivo”.

Ilustración 2 Guardar el Setup

Se da clic en el ejecutable y se iniciará el asistente de instalación; la versión que se va a desarrollar en este manual es la 1.0, se recomienda desinstalar cualquier versión anterior.

Clic en descargar.



UNI-FO-02 V 1.0

Ilustración 3 Asistente de instalación

Enseguida se debe aceptar el acuerdo de Licencia para usuario final:

Ilustración 4 Acuerdo de Licencia

Se selecciona la carpeta de destino del software, a través del botón examinar:

Clic en siguiente

Aceptar los términos de

acuerdo y dar clic en

siguiente.



UNI-FO-02 V 1.0

Ilustración 5 Carpeta de Destino

Se selecciona el nombre de la carpeta del Menú inicio, por defecto aparecerá Nvu, una vez configurado este paso se da clic en siguiente:

Ilustración 6 Carpeta de Menú Inicio

Posteriormente se selecciona si se desea o no un acceso rápido al programa desde el

Se selecciona la ruta en

donde quedará instalado el

editor y luego Clic en

siguiente.

Clic en siguiente



UNI-FO-02 V 1.0

Escritorio:

Ilustración 7 Acceso directo

El tiempo que dura el proceso de instalación puede variar dependiendo de las características del computador (como lo son la memoria RAM y el procesador) sin embargo lleva aproximadamente 1 minuto en instalarse:

Clic en siguiente



UNI-FO-02 V 1.0

Ilustración 8 instalación Nvu

Dar clic en Terminar para ejecutar el programa:

Ilustración 9 Finalización del Asistente

El programa está configurado para pedir una confirmación online sobre la instalación de

Clic en terminar



UNI-FO-02 V 1.0

Nvu, si no se quiere enviar este reporte se da clic en Aceptar, En caso contrario es necesario conectarse a internet y para ello se requiere configurar el proxy de la universidad, a través del servidor FTP: proxyftp.unal.edu.co:8080. Veamos:

Ilustración 10 Configuración de la conexión

Clic en configurar

conexión o en Aceptar.



UNI-FO-02 V 1.0

Ilustración 11 Configuración del proxy: Universidad Nacional

Además, Nvu cuenta con un asistente de consejos diarios que ayuda a optimizar el uso de sus herramientas y a familiazarse más rápido con el programa:

Una vez se visualicen las ventanas de consejos se podrá acceder al programa como tal.



UNI-FO-02 V 1.0

5.3. TIPS ÚTILES:

• Se pueden mover objetos, sólo se debe situar el cursor en el bloque que quiere mover y hacer clic una vez en el

botón Capa para convertir el bloque en movible.

Dar clic en el botón “Capa”. Cualquier objeto que seleccione, será movible. En el ejemplo - se movió la imagen



UNI-FO-02 V 1.0

Ilustración 12 Hacer movible un objeto



UNI-FO-02 V 1.0

• Se puede personalizar la Barra de Herramientas, sólo tiene que hacer clic derecho

sobre ella o seguir estos pasos: menú “ver” – “Mostrar/ocultar” – “Personalizar barra de herramientas” – para abrir el panel de personalización de la barra de herramientas. Luego arrastre y suelte para añadir, mover o eliminar botones/separadores.

Clic derecho en la barra de herramientas y Clic en Personalizar barra de herramientas

Opciones para personalizar la barra de Herramientas.



UNI-FO-02 V 1.0

• Usted puede crear una nueva barra de herramientas: use menú “Ver –

Mostrar/ocultar” – “Personalizar barra de herramientas” – “Barra de Formato” para abrir el panel de personalización de la barra de herramientas. Luego pulse el botón “Añadir nueva barra”. Las barras vacías desaparecen automáticamente cuando se

cierra el panel de

personalización. Nvu tiene un editor CSS, CasScadeS – Ábralo usando el menú Herramienta – Editor CSS.

Opciones para personalizar la barra de Formato.



UNI-FO-02 V 1.0

• Nvu tiene un administrador de sitios web, usando la tecla F9 o el menú “Ver” Mostrar/Ocultar – Administrador de sitios “para mostrar u ocultar el administrador de sitios.

• Puedes aplicar estilos CSS a cualquier elemento: sitúe el cursor en el elemento al que

desea aplicar un estilo y haga clic con el botón derecho en la etiqueta del elemento en la barra de estructura, en la parte inferior de la ventana principal de Nvu. Los “Estilos incrustados” y sus elementos del menú le permitirán aplicar estilos directamente al elemento.

• Usted, además puede controlar la dirección de la escritura, personalizando la barra de herramientas añada los dos botones de control de dirección.

Aparece y desaparece con la tecla F9



UNI-FO-02 V 1.0

• Por otro lado, usted puede redimensionar tablas con el ratón, sólo tiene que mostrar las reglas usando: “ver” – “mostrar/ocultar” – Reglas y situar el cursor dentro de la celda de una tabla para que aparezcan los redimensionadores.

• Usted tiene acceso directo a la comunidad Nvu, sólo tiene que seleccionar la entrada

de menú “Ayuda” – “Foros”

• Nvu puede abrir un documento automáticamente al iniciarse, usando la línea de órdenes: nvu_su_url_.

• Además Nvu te permite editar más de un sitio al mismo tiempo, El administrador del sitio web puede abrir y mostrar los contenidos de múltiples sitios web al mismo

Regla para dimensionar la tabla

Permite acceder a los foros sobre Nvu



UNI-FO-02 V 1.0

tiempo.

• Puede crear una nueva pestaña con una combinación de teclas: Control+t

(Command+t en Mac OS X) crea una nueva pestaña vacía. De la misma manera puede crear una ventana con una combinación de teclas: Control+Mays+n (Command+Mays+t en Mac OS X) crea una nueva ventana vacía.

• Puede cambiar el borde de una única celda en una tabla: Situando el cursor en esa celda, haga clic con el botón derecho en la etiqueta de la celda en la barra de estado y seleccione “Estilo Incrustados” - Propiedades del borde.

• Usted puede cerrar

una pestaña con un clic,

sólo tiene

que hacer clic con el

botón central en

la propia pestaña.

• Nvu le permite cerrar la pestaña actual pulsando una tecla, Control+F4, y cierra la pestaña activa.

Clic en propiedades del Borde.



UNI-FO-02 V 1.0

6. CONCEPTOS IMPORTANTE ANTES DE COMENZAR UNA

PÁGINA WEB5

6.1. NAVEGADORES WEB:

Un explorador de Web es un programa que permite navegar por la WWW, por ejemplo, Mozilla Firefox o Internet Explorer. También se les conoce como navegadores, visualizadores, browsers, etc. El explorador solicita una página a un servidor (proporcionándole la información necesaria sobre su dirección en Internet) y éste se la envía. Para establecer el intercambio de información, los exploradores y los servidores utilizan un conjunto de reglas de comunicación llamadas Protocolo de Transferencia de Hipertexto (HTTP); por este motivo, todas las direcciones de páginas Web comienzan con http:// aunque no es necesario teclear estos caracteres en los navegadores actuales.

6.2. LENGUAJE HTML:

El HTML (Hyper Text Markup Language) es un lenguaje que sirve para escribir hipertexto, es decir, documentos de texto presentado de forma estructurada, con enlaces (links) que conducen a otros documentos o a otras fuentes de información (por ejemplo bases de datos) que pueden estar en tu propia máquina o en máquinas remotas de la red. Todo ello se puede presentar acompañado de cuantos gráficos estáticos o animados y sonidos seamos capaces de imaginar.

Todos los documentos HTML debe estar entre las marcas <HTML> y </HTML>: <HTML> [Todo el documento] </HTML>

• El documento en sí está dividido en dos zonas principales:

El encabezamiento, que se encierra con las etiquetas <HEAD> y </HEAD>; dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal, principalmente el título del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. Todas las etiquetas necesitan tener una marca de inicio y una de final (apertura y cierre): <X> Inicio de una etiqueta (signo “menor que” + marca + signo “mayor que”) </X> Cierre de una etiqueta (signo “menor que” + barra + marca + signo “mayor que”).

• El “cuerpo” es una parte fundamental del documento: es todo lo que aparecerá en la pantalla principal (texto, imágenes, etc.). Está comprendido entre las etiquetas <BODY> y </BODY>

5 Palmero ,Julio Ruiz, Sánchez , José Rodríguez, “Manual NVU”.



UNI-FO-02 V 1.0

• La estructura típica de una página Web es la siguiente:

Afortunadamente, con los programas actuales (Mozilla Composer, NVU...) no es necesario que se conozca nada de HTML para hacer nuestras

páginas. El programa emplea una interfaz parecida a un procesador de textos, en la que el usuario añade texto y le da formato, inserta imágenes,

etc. y genera las correspondientes etiquetas de HTML

6.3. HEAD:

En la HEAD reside información acerca del documento, y generalmente no se ve cuando se navega por él. En la HEAD se pone el elemento lleno <TITLE> que es una breve descripción que identifica la página. Es lo que el navegador se guarda en el "Bookmarks" (libro de marcas o libro de direcciones). También guarda esta información en su caché, y servirá para mostrar la página, cuando sea llamada otra vez, sin necesidad de conectarse de nuevo al servidor de origen.

6.4. BODY:

El cuerpo (BODY) es la segunda y última de las dos partes en que se estructura un documento HTML. Por supuesto es obligatoria, ya que es aquí donde reside el verdadero contenido de la página, y por tanto, al contrario de la HEAD sí se ve cuando navegamos por ella.



UNI-FO-02 V 1.0

6.5. TABLAS:

Las tablas son sin duda uno de los elementos más potentes del HTML. Con pocos elementos se pueden conseguir efectos espectaculares. En el interior de las celdas de una tabla, que pueden ser con borde visible o invisible, se puede poner cualquier cosa: texto de cualquier tamaño y color, imágenes, link, etc. Por supuesto, además de permitir cualquier contenido, tienen sus propios atributos de alineación tanto horizontal como vertical, y atributos de dimensionado. Por defecto se autodimensionan, es decir, se adaptan en tamaño a su contenido, pero también es posible definirlo de forma fija.

6.6. FORMULARIOS:

Los formularios o forms en inglés, son unas páginas especiales que se utilizan para realizar transacciones. En una página que contenga un formulario pueden además existir muchos otros elementos que se utilizan para diseñar páginas web, incluso el propio formulario puede estar integrado dentro de otros elementos, como por ejemplo una tabla. Los formularios, en algunas impresoras, pueden dar problemas al imprimir las páginas que los contienen.

El formulario no es más que una página escrita en HTML como cualquier otra. Lo que la hace diferente es que permite capturar datos de varias maneras: directamente desde el teclado, escogiendo un valor de una lista desplegable o seleccionando una opción desde botones fijos o de todas ellas combinadas.



UNI-FO-02 V 1.0

7. DESCRIPCIÓN DE LA VENTANA PRINCIPAL DE NVU

Ilustración 13 ventana Principal Nvu

7.1. BARRA DE TITULO

Es la primera barra que aparece en la ventana de trabajo del Nvu. En el costado izquierdo se observa el título de la página Web que se está editando o construyendo, ó “sin título-Nvu” en caso que no se haya guardado anteriormente. En el costado derecho de la barra

se encuentran los botones de control estándar de las ventanas: “Minimizar” ;

“Maximizar/Restaurar” y “Cerrar” . En este ejemplo el título de la página es “Proyecto Página UIFCE-Nvu”.

Ventana de Área de trabajo

Barra de Formato

Barra de Herramientas

Barra de Menú

Barra de Titulo

Pestañas Área de trabajo



UNI-FO-02 V 1.0

7.2. BARRA DE MENUS

Es la segunda barra que se encuentra en la ventana. En ella se visualizan los distintos menús que permiten administrar de manera global la ventana de trabajo. Esta barra está compuesta por:

MENÚ DESCRIPCIÓN

Archivo:

Es la primera opción del menú principal. Contiene opciones como “Nuevo” para crear una nueva ventana de trabajo. Esta aparece como una nueva pestaña en la Ventana de Administración de sitios Web. La opción “Abrir archivos” sirve para abrir archivos anteriormente guardados; para ello se debe especificar la ruta de ubicación del archivo. La opción revertir permite borrar los cambios no guardados hasta el momento del trabajo. Además de las funciones ya conocidas por todos como “Guardar”, “Guardar como”, “Cerrar” y “Salir”.



UNI-FO-02 V 1.0

Editar:

Las opciones del menú edición son estándares en casi todas las herramientas en todos los programas. En este menú se pueden localizar las opciones para “copiar”, “pegar”, “deshacer”, “rehacer”, “seleccionar”, “buscar”, entre otras. Nvu ofrece adicional la opción “Configuración de Publicación”, en el que podemos definir las características Web que tendrá nuestra página.

Ver:

En este menú se configuran las barras de herramientas, definiendo qué elementos se desean visualizar en el área de trabajo. También es otra vía para desplazarse entre los diversos modos de edición (Normal, Etiquetas HTML, Código fuente HTML y Vista Preliminar). Además cuenta con opción para cambiar el tamaño del texto y unas codificaciones especiales para personalizar el texto que aparece en la ventana de trabajo.



UNI-FO-02 V 1.0

Insertar:

En este menú encontramos la herramienta para insertar ventana de trabajo tablas, formularios, imágenes, enlaces, caracteres y símbolos, tablas de contenido, plantillas y comentarios. El uso de la opción “caracteres y símbolos” es de gran necesidad en la inserción de caracteres especiales, los cuales son necesarios dentro de cualquier contenido que requiera un código especial para poder ser visualizado.

Formato:

En este menú encontramos las opciones para modificar 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. Nvu nos muestra unas opciones adicionales, que nos permiten manejar el tipo de Párrafo, editar las propiedades de los enlaces y manejar directamente las propiedades visuales de la página: como colores, estilo, título y propiedades de la página.



UNI-FO-02 V 1.0

Tabla:

En este menú se pueden modificar las propiedades de la tabla: Crear, editar el número de filas y columnas; color de fondo de la tabla o celda.

Herramientas: En este menú encontramos las herramientas más importantes en el momento de 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 maneja los estilos físicos aplicables a un documento HTML, además, esta función trata de hacer la separación definitiva de la lógica (estructura) y el físico (presentación) del documento. NVU nos brinda una opción adicional denominada “Preferencias”. En esta opción se configuran ciertas características del documento, las cuales se aplicarán cada vez que se abra la página en construcción. Entre estos atributos están: colores del texto, enlaces (visitados, activos) y campos (como la cantidad de páginas recientemente visitadas), además de opciones de configuración básica y avanzada del programa.



UNI-FO-02 V 1.0

Ayuda:

En este menú encontramos dos tipos de ayuda para el usuario del Nvu, uno es un manual de uso y de solución de problemas frecuentes, y el otro, es el enlace a la ayuda en línea desde el sitio oficial de NVU (pues recordemos que este programa es software libre y es toda una comunidad la que soluciona los problemas) Y de hecho en esta misma lógica, encontramos que en el menú “Ayuda” hay un vínculo para sugerencias y criticas, o informes de fallos, de los usuarios del software.

7.3. BARRA DE REDACCION

En ella aparecen 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 a estas opciones:

Botón Descripción

Nuevo: Permite crear un nuevo documento. Este documento dentro de sus opciones puede ser o una ventana distinta, o una nueva pestaña dentro de la misma ventana que ya tenemos abierta. Además, puede ser o un documento XHTML o Strict DTD

Abrir: Permite abrir un archivo local tipo HTML, previamente guardado.



UNI-FO-02 V 1.0

Guardar: Permite guardar las modificaciones hechas como un archivo local tipo HTML.

Publicar: Permite subir el archivo a una ubicación remota. Para esto, pide: el nombre del sitio que se crea; la configuración http de la página inicial propia (Información del sitio Web) y la dirección de publicación (Servidor de publicación), es decir en esta pantalla se deben especificar datos puntuales del servidor, (IP. contraseña, usuario) y la estructura raíz que se debe seguir al momento de publicar. Esta opción brinda, además, una opción de ayuda específica sobre como publicar.

Aquí se escribe la

d ó d l



UNI-FO-02 V 1.0

Ilustración 14 Publicar página

Botón DESCRIPCIÓN

Navegar: Permite pre visualizar esta página en el navegador antes de que se publique de manera definitiva. Es una opción bastante útil, en cuanto nos permite notar los errores inmediatos que cometimos al configurar nuestra página.

Enlace Interno: Inserta un nuevo enlace interno o edita las propiedades de un enlace interno ya existente. Vale la pena aclarar que Nvu pide nombre diferente para cada uno de los enlaces internos, pues utiliza nombre por cada ubicación. Dentro de las posibles modificaciones que podemos manejar se encuentra el poder determinar valores y atributos para HTML. Al insertarse un nuevo enlace interno aparece un dibujo del ancla en la ventana de trabajo (Símbolo:).

Enlace: Inserta un nuevo enlace o edita las propiedades del enlace seleccionado. Se diferencia a los Enlaces Internos, en cuanto estos segundos sólo sirven dentro de la misma ventana de trabajo, mientras que los Enlaces, funcionan también para crear vínculos con ubicación externa (de páginas Web; archivos locales; enlaces internos o Correos electrónicos). Posee una opción de ampliar los datos específicos del Enlace, en el que se puede determinar el origen del enlace. Cuando se crea, aparece el nombre del enlace en letra azul y subrayada.



UNI-FO-02 V 1.0

Ilustración 15 Propiedades del enlace

Botón Descripción

Imagen: Inserta una nueva imagen o edita las propiedades de una imagen seleccionada, teniendo en cuenta una ruta de ubicación. En esta opción se puede cargar, y personalizar las dimensiones y apariencia de la imagen. Además, la imagen puede servir como enlace, para ello se personaliza la función “Enlace”, en la ventana de “Propiedades de la Imagen”.

Tabla: Por esta opción podemos insertar y modificar las propiedades de las tablas.



UNI-FO-02 V 1.0

Formulario: Permite insertar y modificar los formularios, definiendo en él también elementos como una imagen, un botón de acceso rápido y otras opciones que permiten manejar los formularios de manera más abreviada y completa (Lista de índices).

Ortografía: Ayuda a la revisión de la ortografía y gramática de un texto seleccionado y/o de todo el texto de la página.

Imprimir: Ayuda a configurar las propiedades de impresión de la página activa.

7.4. BARRA DE FORMATO

En esta barra encontramos las opciones básicas para el formato de los textos y/o párrafos. Estas opciones son las más comúnmente usadas en el momento de modificar una página. Bajo esta, encontramos otra barra, que también tiene funciones de editar propiedades y estilos.

Botón DESCRIPCIÓN

Elige un estilo un formato para el párrafo (Dirección, Titulo 1, Preformato).

En este botón podemos combinar el color de fondo de la pantalla (que aparece con el cuadrito en blanco por



UNI-FO-02 V 1.0

defecto) con el color del texto (que aparece con el cuadrito negro por defecto).

Función de resaltador para el texto.

Función para aumentar o disminuir el tamaño de la letra.

Función de Negrita, Cursiva y Subrayado del texto.

Función para hacer una lista, organizada con números o con viñetas.

Función de justificación del texto. (Alinear texto a la izquierda; Alinear texto al centro; Alinear texto a la derecha o Alinear texto justificando ambas márgenes).

Función de Sangría del texto. Ampliar o disminuir margen del texto.

Permite modificar el ancho de las tablas y formularios además de permitir modificar la fuente de texto (tipo de letra).

Permite crear una división que puede estar superpuesta en cualquier lugar de la ventana de trabajo.



UNI-FO-02 V 1.0

Permite llevar una capa anteponer de otra y viceversa. Esta función sirve para resaltar alguna imagen o capa de otras.

Función de énfasis en algún carácter. La función con un signo de exclamación significa “enfatizar”, con él el texto se vuelve cursivo. La función con los dos signos de exclamación significa “gran énfasis”, y con él el texto se vuelve negrito.

Término de la definición y Descripción de la definición.

Función que permite definir la posición horizontal del elemento seleccionado. (Pegar al borde izquierdo; Mantener en el centro y Pegar al borde derecho).

Función que permite definir la posición vertical del elemento seleccionado. (Pegar al borde superior; Mantener en el centro y Pegar al borde izquierdo).

7.5. Ventana de Administrador de Sitios Nvu

Ilustración 16 Administrador de sitios Nvu



UNI-FO-02 V 1.0

Está situada a la izquierda de la ventana principal, esta ventana se puede configurar los sitios web que se crean, y así acceder de forma rápida a las distintas páginas web. Además se puede publicar en Internet la páginas web que se crean y editar directamente las páginas ya publicadas sin necesidad de tenerlas guardadas en el disco duro del computador.

7.6. Ventana de área de edición

Es el área de trabajo en donde con ayuda de las herramientas anteriormente descritas se podrá visualizar, diseñar y editar nuestras páginas web. Esta ventana nos permite además abrir varias páginas a la vez, pudiendo cambiar de una a otra mediante las pestañas que se muestran en la parte superior con el titulo de cada página. De la misma manera se puede habilitar la visualización de la regla para que sea más fácil dimensionar diversos objetos.

Ilustración 17 Área de trabajo



UNI-FO-02 V 1.0

7.6.1. Barra de exploración con pestañas

Nvu a través de la barra de exploración de pestañas le permite editar simultáneamente múltiples documentos web, esto le ayuda a ahorrar espacio dándole una apariencia más limpia a su escritorio. Como indicador visual un icono de un disquete rojo aparece en las páginas que han sido modificadas pero no guardadas.

7.6.2. Barra de estado

Esta barra muestra la posición del cursor con respecto a la jerarquía de etiquetas HTML. Lo cual facilita la edición y asignación de las propiedades de cualquier etiqueta en particular en la barra de estado haciendo clic con el botón derecho en la barra de estado y seleccionando la opción deseada. Una pulsación simple con el botón izquierdo en una etiqueta en la barra de estado selecciona el texto rodeado por esa etiqueta.

7.6.3. Barra de modo de edición

Aparecen cuatro pestañas con las que se puede cambiar el modo de edición:

Normal (o modo Wysiwyg): En este modo se muestra la página como un WYSIWYG, permitiendo una edición normal, insertando texto, imágenes, tablas,etc. Se ve la apariencia final de la página, pero las zonas y los objetos están recuadrados para facilitar su manipulación. Los objetos dinámicos no se ven.



UNI-FO-02 V 1.0

Ilustración 18 Vista normal

Etiquetas HTML (muestra de forma esquemática las etiquetas utilizadas): en esta vista, se muestran las “etiquetas” del lenguaje HTML en fondo amarillo, viendo la estructura de la página de una manera visual.

Ilustración 19 VIsta HTML

Código Fuente (acceso al código HTML de la página): en esta vista se puede editar directamente el código HTML de la página en texto plano.



UNI-FO-02 V 1.0

Ilustración 20 Vista código fuente

Vista Preliminar (Como se vería la pagina en el navegador): vista previa de la página prácticamente igual a como se verá en el navegador. Desde esta vista también puede editarse el texto y el formato de los objetos.

Ilustración 21 Vista Preliminar



UNI-FO-02 V 1.0

En cualquiera de estos modos se puede editar el contenido de la página. Mediante las solapas ubicadas en la zona inferior, se puede cambiar fácilmente de un modo a otro.

7.7. CERRAMOS NVU Como cualquier otra aplicación NVU se puede cerrar de varias formas: • Haciendo clic sobre el aspa que aparece en la parte superior derecha de la ventana de

la caja herramientas. • Desplegando el menú Archivo de la caja de herramientas y eligiendo la opción Salir. • Pulsando la combinación de teclas Ctrl+Q. • Cuando está activa la ventana del área de edición pulsar la combinación de teclas

Alt+F4.

8. CREAR UN SITIO LOCAL

Antes de empezar con la creación del sitio local, es necesario que antes de lanzarse a hacer páginas dedicar algún tiempo a planificar y diseñarla, para posteriormente no estar reordenando páginas y cambiando archivos de lugar; consiste sencillamente es hacer unos planos preliminares antes de empezar el trabajo. Es recomendable comenzar por preguntarse qué secciones tendrá la Web, número de páginas, la organización de las mismas, los mecanismos que permitirán la exploración del Web, etc. 8.1. Cuestiones para tener en cuenta

8.1.1. Facilidad de navegación

Un factor importante es la forma de presentar la información. Hay que tener en cuenta que a medida que la cantidad de páginas de una Web aumenta, es cada vez más difícil para las visitas encontrar lo que necesitan. La mejor forma de ofrecer la información es organizarla en áreas definidas, permitiendo así que la navegación sea muy intuitiva.



UNI-FO-02 V 1.0

8.1.2. Cuidado con el “tamaño” de las páginas

Es incómodo, visitar un sitio Web, y tener que esperar “mucho” tiempo para que la página sea completamente mostrada en pantalla. Las páginas compuestas de texto, gráficos y elementos multimedia generan una impresión agradable; sin embargo son más lentas para mostrarse al visitante.

8.1.3. Pruebe sus páginas antes de publicarlas

Recuerde siempre que los visitantes de una Web no tienen por qué tener el mismo sistema operativo (Windows 3.X, Windows 98, NT, XP, OS/2, MacOS, UNIX, Linux, etc.), que pueden utilizar cualquier navegador disponible en el mercado (Internet Explorer, Mozilla, etc.), con diferentes tipos de resolución de pantalla (600 x 800, 1024 x 768 etc.) Estas diferencias pueden hacer que sus diseños sean idóneos para un visitante particular y que sean pésimos para otros; en general, se recomienda probar su Web en la mayor cantidad de condiciones posibles.

8.2. Creación de una Web

Un “sitio local” es aquel conjunto de páginas que aún no han sido publicadas en Internet, pero que están guardadas en carpetas del disco duro. Para crear un sitio local basta con ir creando páginas y guardándolas en alguna carpeta dentro del PC.

Paso 1: Edición del área de trabajo de la ventana.

Paso 2: Clic en “Archivo”. Y luego en “Guardar como…”. Esta opción es aconsejable cuando se va a guardar el trabajo por primera vez, de forma que se puede definir el sitio local en el que se almacenara el trabajo.



UNI-FO-02 V 1.0

Ilustración 22 Sitio local.

Paso 3: Introduzca el nombre que desea que tenga el archivo.

Ilustración 23 Guardar página como.

Paso 4: Seleccione el sitio en el que se guardara el archivo. Este es el denominado sitio local. Verifique el nombre del trabajo.

Las imágenes que se planeen utilizar en las páginas es aconsejable almacenarlas en una carpeta independiente perteneciente al mismo sitio web.

Clic en “guardar como”



UNI-FO-02 V 1.0

8.3. Configuración de un sitio remoto

En el menú “Edición” encontramos la opción “Configuración de publicación”. En la ventana que aparece se introduce el nombre, la dirección absoluta o dirección (URL) del sitio y los datos de la cuenta FTP que maneje el usuario, dirección, usuario y contraseña.

Ilustración 24 Configuración de la publicación

Clic para configurar la

publicación de la página



UNI-FO-02 V 1.0

Ilustración 25 Configuración de la publicación

Una vez configurado el sitio de publicación se puede publicar las páginas web, que se este editando o creando, en Internet fácilmente, y modificar directamente las que ya fueron publicadas, sin necesidad de tenerlas almacenadas en un sitio local (en el disco duro).

8.4. Configuración de las propiedades de las páginas web

En el menú “Formato” se encuentra el menú “Título y propiedades de Página”. En este aparecen datos relativos al autor y tipo de página que se está trabajando. Estos datos se pueden completar en Información general en donde se debe introducir el Titulo de la página, el nombre del Autor y una breve Descripción del contenido de la página. Es muy útil completar estos datos de la página ya que algunos buscadores los utilizaran para indexar la página en sus bases de datos. Se dispone, además, de una opción para indicar que la página se trata de una plantilla que se piensa utilizar como base en futuros diseños. Las plantillas se guardan con una extensión del tipo archivo.mzt.

En el área llamada Internacionalización, se encuentran las opciones referentes al idioma y juego de caracteres utilizados en la página. Estos datos son importantes para que los buscadores puedan clasificar el idioma de la página que se está creando y para que los caracteres se muestren correctamente en ordenadores configurados con otros idiomas distintos al propio.



UNI-FO-02 V 1.0

Ilustración 26 Título y propiedades de la página.

Se puede configurar otras propiedades de la página accediendo al menú “Formato” y escogiendo la opción “Colores y fondo de página”. Se dispone de dos opciones para establecer los colores de la página: “Usar Colores predeterminados” o “Usar colores personalizados”. Si se elige usar Colores predeterminados, los textos, enlaces y el color de fondo de fondo se mostraran con los colores configurados en el navegador. Mientras que si se elige Usar colores personalizados, el usuario puede definir el color en que se mostraran los textos, enlaces y fondo de la página independientemente de los colores configurados en nuestro navegador.

Clic para configurar Título y propiedades de la

página



UNI-FO-02 V 1.0

Ilustración 27 Fondo y colores de la página

Otra opción es la de poder seleccionar una imagen para el fondo de la página. Esta imagen se mostrara en la página en modo “mosaico”. Solo hay que dar clic en el botón “Elegir archivo” para que se abra un navegador de las carpetas de sistema, en las que se puede seleccionar una imagen que es la que queda configurada como fondo de la página.

Opciones de Color predeterminado o personalizado del programa. En este se pueden seleccionar una combinación de colores para los elementos de la página.

En este botón se puede cargar una foto para que sirva de fondo de la página.



UNI-FO-02 V 1.0

Ilustración 28 Elección de imagen.

Ilustración 29 Imagen de fondo



UNI-FO-02 V 1.0

Ilustración 30 Propiedades de la página.

8.5. INSERCIÓN DE TEXTO

El texto es uno de los componentes fundamentales de las páginas Web, ya sea digitándolo o pegándolo, insertar texto no es un procedimiento complicado, es similar al trabajar con cualquier procesador de textos, excepto que los caracteres especiales como vocales acentuadas, eñes, paréntesis, etc. y hasta los espacios en blanco en HTML se escriben a través de códigos.

Desde la vista de edición normal, la aplicación NVU se encargará de traducir los caracteres especiales escritos al modo de código de caracteres en HTML.

De igual modo, se puede insertar otros caracteres especiales o símbolos no disponibles a través del teclado, desde el menú Insertar y escogiendo la opción Caracteres y Símbolos.



UNI-FO-02 V 1.0

Ilustración 31 Inserción de Carácteres y Símbolos

8.5.1. Aplicar estilo al texto

Los estilos o formatos de texto se aplican desde la Barra de Formato o desde el menú Formato.

Recomendaciones: Hay que tener en cuenta a la hora de diseñar una página web que:

En las páginas Web hay que reservar el subrayado exclusivamente para los enlaces. En general, la cursiva es el formato apropiado para titulares y funciona bien para

enfatizar. Cuando se quiera destacar una palabra, emplee negrita o cursiva. El uso abusivo de demasiados estilos produce un efecto estrambótico. Reserve los tipos de negrita y letra grande para los titulares, los cuales deben destacar

sobre el resto de la página. Para organizar el texto en pantalla es preferible utilizar tablas y desechar del uso de

tabuladores y sangrías. La forma de trabajar con tablas y viñetas es muy similar que con cualquier procesador de textos. 6

6 Tomado de Manual de Nvu. Capítulo 2 Elemento básicos de una página web. Autor Julio Ruiz Palmero.



UNI-FO-02 V 1.0

Ahora bien, como se mencionó anteriormente, en la barra de formatos, existe una lista de estilos predefinidos de párrafos y/o títulos, por ejemplo a través de un sólo botón es posible cambiar el color de la letra y el color de fondo de la misma, también se cuenta con botones para reducir o amentar el tamaño de la letra, para cambiar su estilo (negrita, cursiva, subrayado)7, formatos para listas numeradas o viñetas, estilos de alineación y opciones de sangría, entre otros. Otras opciones de formato de texto, además de las accesibles a través de la barra de formato, son los diferentes Estilos de texto y de Listas, en esta línea, una opción interesante del menú Formato es “Descontinuar estilos de texto”, que se utiliza cuando se ha escrito textos con algunos formatos y se quiere continuar escribiendo mas texto pero sin formato.

8.5.1.1. Sangrado de párrafos

La sangría de un párrafo es una herramienta muy útil a la hora de marcar un formato y adecuar el texto a la página. Para sangrar párrafos se puede utilizar la tecla Tab del

teclado o el botón Sangrar texto de la barra de herramientas . También podemos tabular “artificialmente” un párrafo mediante espacios sin salto8.

8.6. INSERCIÓN DE IMÁGENES Las imágenes son otras de las herramientas más importantes en el diseño de páginas web. Para insertar imágenes, primero se debe situar el cursor en el lugar donde se quiere insertar la imagen, y posteriormente acceder al menú “Insertar” y escoger la opción “Imagen”. También podemos pulsar el botón de la barra de redacción “Imagen”.

8.6.1. Propiedades de la imagen

Una vez se selecciona con alguna de las rutas anteriores la opción insertar imagen, se abrirá la ventana de “Propiedades de la imagen”, esta ventana también aparece cuando se ha seleccionado una imagen ya insertada y se accede a la opción Propiedades de imagen situada en el menú “Formato”.

7 En este punto hay que tener en cuenta que la letra que se utilice en la página web debe ser una de las más comunes tales como Arial, Helvetica, Times New Roman, Courrier, etc, dado que si la letra que se elige para el diseño de la página no se encuentra instalada en el ordenador, este tipo de letra no será visualizada exactamente como se ha diseñado y en caso de requerirla es necesario instalarla. 8 Es un tipo particular de espacio que está considerado un carácter en sí mismo en lugar de ser, simplemente, un espacio entre caracteres.



UNI-FO-02 V 1.0

Ilustración 32 Acceder a propiedades de la imagen.

Ilustración 33 Propiedades de la imagen

Es esta ventana posee cuatro pestañas: Desde la pestaña Ubicación se elige la ubicación de la imagen y se puede habilitar o no la opción de hacer referencia a la imagen mediante una URL absoluta o relativa. La opción “Título emergente”, permite asignarle un texto a la imagen para que cuando se pase el

Para editar una imagen ya

creada: clic izquierdo sobre la imagen –

“Propiedades



UNI-FO-02 V 1.0

ratón sobre ella aparezca ese título; además es necesario incluir algún “Texto alternativo”, para mostrar en caso de que el navegador tenga desactivada la opción de mostrar imágenes o para que se muestre mientras se carga la imagen. La pestaña Dimensiones permite modificar el tamaño de la imagen9. En la pestaña Apariencia es factible especificar dos tipos de márgenes a la imagen, el superior/inferior y el izquierdo/derecho además de poder añadirle un borde a la imagen. Por último en la pestaña Enlace es posible configurar la imagen para que actúe como un hipervínculo hacia otra página, o archivo.

El Botón “Edición avanzada” permite establecer opciones avanzadas como atributos HTML, eventos de JavaScript, estilos, etc.

Ahora bien, Las imágenes en las páginas Web las insertamos dentro de la página y/o como fondo de la misma; los formatos que las páginas web tienden a utilizar son:

GIF. Para dibujos e imágenes con pocos colores. Este formato nos permite elegir un color transparente y hacer animaciones.

JPEG o PNG. Para fotos e imágenes que requieren más calidad. No obstante, no

permite transparencias ni animaciones.

Ejemplo:

Clic en el menú “Insertar” – “Imagen” – “Elegir Archivo” -

9 Esta es una opción poco recomendable, pues las imágenes pierden calidad y nitidez. Lo correcto sería modificar el tamaño con cualquier programa de tratamiento de imagen para posteriormente insértala en nuestra página.



UNI-FO-02 V 1.0

Ilustración 34 Insertar imagen.

Una segunda forma de insertar imagen es indicando la dirección url en donde se encuentre la imagen a insertar. Por ejemplo: En la página de google, se busca una imagen libre10, clic derecho – copiar ruta de la imagen – pegar esa ruta en la ruta de imagen que se encuentra en la pestaña ubicación – se le da un título a la imagen y si se desea uno alternativo - clic en “Aceptar”.

10 Que no esté restringida por derechos de autor



UNI-FO-02 V 1.0

Ilustración 35 Insertar una imagen desde la web

8.7. INSERCION DE TABLAS

Las tablas son uno de los elementos más utilizados en el diseño de páginas web. Se suelen utilizar para presentar datos de forma tabulada y sobre todo para organizar la información de los textos (se pueden realizar además tablas sin bordes), para situarlos en una ubicación determina dentro de la página web. Dentro de una celda de la tabla, se puede introducir textos, imágenes e incluso otras tablas.



UNI-FO-02 V 1.0

Para insertar una tabla se puede seguir dos caminos: Pulse el botón “Tabla” de la Barra de Herramientas

O en el menú “Tabla” de la Barra de Menú, en donde se selecciona la opción “Insertar” y después “Tabla”.

Ilustración 36 Insertar Tabla.

Clic aquí para insertar tabla



UNI-FO-02 V 1.0

Aparecerá una ventana con tres pestañas:

La primera de ellas llamada “Rápida”, ayuda a definir de manera rápida (con ayuda del mouse) el número del filas y columnas de la tabla. Los números que aparecen en la parte inferior del gráfico de la tabla (para la imagen el 2 x 2) representa el número de filas x columnas que se aplicarán para la tabla.

Desde la pestaña “Preciso”, se tiene un mayor control para definir atributos de la nueva tabla como el numero de filas y columnas, el ancho de la tabla (en pixeles o en porcentaje -%- de la ventana del navegador) y el grosor de los bordes. Si se desea que el borde no aparezca se pone valor cero (0).

La última pestaña sirve para definir atributos de las celdas, como las alineaciones del texto que contengan

Ilustración 37 Insertar tabla rápida

Ilustración 38 Insertar tabla -Preciso



UNI-FO-02 V 1.0

(horizontal y vertical), el ajuste de texto en la celda, (con ajustar se adapta el texto al tamaño de la celda, con no ajustar se adapta el tamaño de la celda al texto en caso de que sea más extenso que la celda) el espacio entre las celdas (margen entre celdas) y el relleno de las celdas márgenes internos de la celda).

8.7.1. Edición Avanzada de Tablas:

Una opción adicional a las tres pestañas es la del botón “Edición Avanzada” en la que se pueden definir los atributos de la tabla por medio de “Atributos HTML”: “cellspacing”, “cellpadding” o “border”, definiendo directamente el valor de cada atributo. Además de brindar la posibilidad de agregar o eliminar atributos y cambiarles sus valores respectivos. Por medio de “Estilo Incrustado” se definen los parámetros de alineación del texto (o “text-align”) y el ancho de la celda (o “width”). Además de permitir agregar o eliminar propiedades a la tabla y modificar su respectivo valor. Y por último, se le puede agregar características o efectos especiales por medio de la pestaña “Eventos JavaScript”, en el que se define alguna acción para la tabla por medio de algún comando programado: un clic, un doble clic, o ya sea pasando el cursor del mouse por encima de la tabla, entre otras

posibilidades que el programa ofrece.

Ilustración 39 Insertar tabla - Celda



UNI-FO-02 V 1.0

Una vez

insertada la tabla en la página se puede modificar los atributos que se definieron al insertarla. Para ello, basta situar el cursor dentro de la tabla y pulsar el botón “Tabla” o menú “Tabla” de la Barra de Menú en la opción Propiedades de la tabla. Se despliega una ventana con dos pestañas: en la primera, llamada “Tabla” se puede redefinir el tamaño de la tabla (en número de filas; número de columnas; Anchura; Altura; y definir los valores en pixeles o en porcentaje de la ventana); los Bordes y espaciados de las celdas; la Alineación de la tabla en el contenido de las celdas; definir la posición del título de la tabla; y el efecto de relleno o color de fondo para aplicar en toda la tabla (sólo en las celdas no en el borde, en caso de que este segundo sea grueso). Y en la segunda pestaña, llamada “Celda”, se pueden definir propiedades específicas para una celda, una fila o una columna en específico, no para toda la tabla en general. De esta forma, se puede manejar distintos tamaños, alineación del contenido, estilos, ajustes del texto y colores de fondo de las celdas.

Ilustración 40 Editor avanzado de propiedades



UNI-FO-02 V 1.0

Ilustración 41 Propiedades de la Tabla

Ilustración 42 Propiedades de las celdas

Especificar el tamaño y las propiedades de las tablas

Permite configurar las propiedades de la celda



UNI-FO-02 V 1.0

Por último, cabe mencionar que en el menú “Tabla” de la Barra de Menús se dispone de opciones para seleccionar, añadir y borrar elementos de tablas o tablas completas, combinar (unir) y dividir celdas y definir colores de fondo (celdas y tabla). Además de insertar nuevas filas, columnas o celdas por separado.

8.8. INSERCION DE FORMULARIOS

Los formularios son métodos mediante los cuales los visitantes de una página web pueden enviar datos a su autor mediante email. Permite tener una interactividad en la Web, facilidad en planteamientos de selección múltiples, accesibilidad para la creación de cuadros de diálogo, texto, entre otros. (Utilizando otros lenguajes distintos a HTML)

Para insertar un formulario, hay dos caminos: uno es seleccionar la opción “Formulario” de la Barra de Herramientas. En donde además hay un menú desplegable de acceso rápido a las opciones de configuración del formulario.

O desde el menú Insertar, opción “Formulario”. En esta opción también se despliega el menú de opciones para la configuración primaria del formulario:



UNI-FO-02 V 1.0

Ilustración 43 Insertar Formulario

8.8.1. Opciones de configuración

8.8.1.1. Definir Formulario

Clic para definir el

formulario



UNI-FO-02 V 1.0

En esta ventana de definen el nombre del formulario; la dirección URL de la acción; el método de aplicación (ofrece dos posibilidades: GET y POST). Además de ofrecer especificar más propiedades: La codificación (donde ofrece tres posibilidades de selección: application/x-www-form-urlencoded; multipart/form-data y text/plain); y el Marco de destino (donde ofrece cuatro opciones de destino: _blank; _self; _parent y _top)

8.8.1.2. Propiedades del campo del formulario

Ilustración 44 Propiedades del formulario



UNI-FO-02 V 1.0

En esta opción se puede definir el tipo de uso del campo (texto, casilla de verificación, contraseña, botón radial, imagen, botón entres otros usos posibles). Además de configurarle el nombre, asignarle un valor inicial, y agregarle otras características como el Índice de tabulación, Tecla de acceso rápido, Tamaño del Campo (sólo dígitos numéricos) y Longitud máxima.

8.8.1.3. Propiedades de la imagen del formulario

Ilustración 45 Propiedades del campo formulario



UNI-FO-02 V 1.0

Ilustración 46 Propiedades del formulario



UNI-FO-02 V 1.0

En la tercera opción del menú de formularios, se abre una ventana compuesta de cuatro pestañas en las que se definen el nombre que se le pondrá a la imagen en el campo utilizado para dicha imagen; la ubicación de la imagen a utilizar (permite seleccionar imágenes que estén ubicadas en una dirección URL o en una carpeta local; las dimensiones que tendrá la imagen dentro de la página y por último su ubicación: alineación con el texto; espacios entre la imagen y el texto y bordes sólidos.

Ilustración 47 Ubicación, dimensiones y Apariencia del formulario



UNI-FO-02 V 1.0

8.8.1.4. Propiedades del área de texto



UNI-FO-02 V 1.0

En la cuarta opción que aparece del menú de formularios se encuentran las propiedades para configuración del área de texto que se inserta en el formulario. En esta ventana se define el nombre del campo, la cantidad de filas y columnas a utilizar además de las opciones comunes a las otras opciones del menú (que son el Índice de Tabulación y la Tecla de acceso rápido). En esta misma ventana también se puede escribir el texto de encabezado que se desea que aparezca en el formulario creado.

Obviamente este texto se puede modificar directamente en la ventana de trabajo del programa.

8.8.1.5. Lista de Opciones

En esta opción se pueden configurar grupo y elementos pertenecientes a grupos comunes. Se define el nombre, tamaño e índice de tabulación de la lista de selección creada.

Ilustración 48 Propiedades del área de texto.

Ilustración 49 Propiedades de la lista de selección

Especificar el nombre de la

lista



UNI-FO-02 V 1.0

8.8.1.6. Definir botones

En esta opción se configura las opciones de los botones que manejará el formulario. Es importante primero insertar el botón y después crear el vínculo (interno o externo) que comunique esta opción del menú con otra parte del formulario.

8.8.1.7. Definir conjunto de campos

Ilustración 50 Propiedades del botón

Configuración de las

propiedades del botón vinculado



UNI-FO-02 V 1.0

Esta opción brinda la oportunidad de definir una leyenda o encabezado que defina el objetivo del formulario. Además, le agrega al texto existente un marco en el que se organiza la información de manera más estética, jerarquizada y práctica.

8.8.1.8. Búsqueda de índices

Ilustración 51 Propiedades del conjunto de campos

Ilustración 52 Búsqueda de índices



UNI-FO-02 V 1.0

Esta opción permite insertar un cuadro de búsqueda de índices, o palabras. Es útil en cuanto que el buscador de palabras ayuda a los usuarios de la página web a encontrar de manera eficiente lo que necesita. El texto que aparece junto con el rectángulo del buscador es prediseñado por el programa.

8.9. FRAMES Los marcos o frames son una forma de insertar varias páginas web en una sola, en otras palabras, permiten dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se carga una página HTML distinta. Las versiones más antiguas de los navegadores no tienen implementada esta característica, por lo que no serán vistos. Una ventaja de los macros es que a la hora de crear un sitio web facilita la publicación y actualización de la información, a que se podría requerir que cierta información permanezca visible de manera permanente, mientras que el resto esté cambiando y actualizándose, esto gracias a que cada frame tiene su propio URL; además, no hay límites para el contenido de cada una de estas áreas, ya que tienen las mismas propiedades que la pantalla completa normal. Para crear una página con frames, es necesario hacerlo desde el modo código, tecleando sentencias HTML, ya que NVU aun no está preparado para trabajar con frames. Cuando se utilizan frames es común usar el atributo target en la etiqueta que define un vínculo (<A>), con este atributo es posible especificar en que frame debe cargarse la página vinculada.



UNI-FO-02 V 1.0

Ejemplo:

Ilustración 53 Ejemplo 1 de Frames



UNI-FO-02 V 1.0

Algunas observaciones importantes para hacer son las siguientes: • No hay que confundir los frames con las tablas, aunque su apariencia, a veces, puede

ser similar, mientras la información almacenada en la celda de una tabla es fija, en un área de pantalla creado por el elemento Frame se dispone de todos los recursos del HTML, por lo cual este contenido va a ser más dinámico.

• Existen algunas diferencias y coincidencias con una página HTML habitual: en lugar de

BODY ahora se reemplazará con una etiqueta FRAMESET; cada una de estas son una página o ventana dentro de la página, la que a su vez está compuesta por varias zonas definidas con los parámetro Cols y Rows11. En suma, las páginas que contienen una definición de FRAME no pueden contener el elemento BODY ni ninguno de los elementos que habitualmente aparecen en el BODY antes del elemento FRAMESET que es el que define la creación del FRAME. Si esto no se cumple, el FRAME será ignorado.

Como en nuestro ejemplo 1 (Ver ilustración 52) Dentro del <Frameset> definimos los marcos que componen la acción alternativa para navegadores que no soportan los marcos. A cada uno de los marcos se le pone un nombre y se especifica la página HTML que se mostrará en él (etiqueta <FRAME>). Sólo queda definir lo que verá el usuario en el supuesto de que su navegador no soporte frames (etiqueta <NOFRAMES>). Teniendo esto en mente, lo primero que se recomienda hacer es crear una minipágina con la definición del frame, viene a ser algo así un vínculo y sólo contiene la definición del frame. Y por último, crear las páginas que constituirán el contenido de cada una de las áreas definidas en el vínculo; (en el ejemplo1 son pagina1.htm y pagina2.htm), y aquí es donde se escribirá el contenido normal de la página.

11 Los parámetros COLS y ROWS nos permiten controlar el tamaño de los marcos presentados en la ventana del navegador

Ilustración 54 Segundo Ejemplo Frames



UNI-FO-02 V 1.0

• Como se puede ver, no es necesario crear todo tu documento con frames, sólo

deben ser utilizados donde sean necesarios.

• Es posible definir cualquier combinación de áreas verticales y horizontales, la clave está en combinar adecuadamente los anidamientos del elemento <FRAMESET> con sus atributos COLS o ROWS según interese.

8.10. CAPAS Las capas permiten crear una división que puede estar superpuesta en cualquier lugar de la ventana de trabajo, estas son bloques con contenido HTML que pueden posicionarse de manera dinámica y organizables en 3D. Las capas, puede contener otros objetos dentro, como textos, enlaces, dibujos, otras capas o una combinación de las anteriores.; varios de estos elementos se suelen englobar dentro de una capa para otorgarles propiedades comunes. Hay que tener en cuenta que capas en inglés se escribe DIV, y con este nombre se reconoce en el programa NVU en la visa de etiquetas HTML. En suma, las capas son elementos movibles, ocultables y en general manipulables de forma dinámica, las cuales tienen sentido dentro de los estilos CSS, de hecho sus ventajas solo se pueden aprovechar al cien por cien utilizando estilos CSS12.

8.10.1. Crear Capas

En NVU permite crear capas mediante el botón “Capa”, es recomendable seleccionar primero el bloque que queremos colocar dentro de la capa antes de pulsar dicho botón. Además de este botón NVU, cuenta con otros dos botones, los cuales facilitan la definición de la profundidad de la capa, es decir, colocarla arriba o debajo de otra. Ahora bien, dentro de las capas podemos incluir otras capas, imágenes, texto formateado, tablas…etc. e incluso definirlas con un color de fondo o imagen de fondo. El problema es que NVU aun no está preparado totalmente para trabajar con capas, por lo que su uso puede resultar frustrante.

12 CSS, es un conjunto de instrucciones que le indican a un navegador como debe presentarse un elemento concreto en un página html. Las principales de las CSS, es que separan la visualización del contenido, simplifican el código HMTL, controla el estilo y el diseño de una forma global



UNI-FO-02 V 1.0

Desde el menú “Formato” podemos activar la Rejilla de posicionamiento que nos ayudará a mover las capas y colocarlas con precisión donde se desee.

Para crear Capas de deben seguir los

siguientes pasos:

• Situamos el cursor en cualquier parte de toda la página. Luego dar clic en el botón

“capa” de la barra de formato. • Aparece el siguiente símbolo para cambiar la capa de posición, y debajo de él se

puede introducir todos los objetos html que se requieran. • Se recomienda, para mayor visibilidad, trabajar en este caso en la vista “Etiquetas

HTML”. aunque la edición es difícil si no se ha escrito nada dentro de la capa, la forma más sencilla es seleccionar la capa en la vista “Etiquetas HTML” y editarla en la vista “Normal”.

Ilustración 55 Insertar Rejilla de Posicionamiento



UNI-FO-02 V 1.0

Ilustración 56 Insertar una Capa

8.10.1.1. Insertar una Capa vacía:

1. En la barra de formato arriba de la ventana de edición, dar clic en el botón “capa”. 2. Aparece un símbolo de cruz pequeña, la cual sirve para mover la nueva capa hacia

fuera sobre la página. 3. Dar clic sobre el cuadro de la mitad de la línea, y arrastrar a la izquierda para abrir

la capa a lo ancho 4. Menú: insertar > imagen, tabla o cualquier otro objeto que se desea quede en la

capa. 5. Ahora es posible reorganizar y mover la capa como se desee.

Poner una capa alrededor del texto, de la tabla, o de un gráfico ya en la página:

1. Lo primero que se debe hacer es seleccionar el texto, la tabla, o el gráfico. 2. Clic en botón “capa”. 3. El elemento u objeto seleccionado tendrá una capa que lo envuelve. 4. Clic en el símbolo de la cruz para arrastrar y mover la capa hasta una nueva

posición.

Ejemplo de una Capa en vista Normal



UNI-FO-02 V 1.0

8.10.1.2. Para fijar un color en una capa (DIV):

1. Una vez seleccionada la capa a la que se desea poner un color de fondo, dar doble clic y aparecerá el Editor Avanzado de Propiedades.

Ilustración 57 Propiedades DIV

2. En la segunda pestaña del editor que corresponde a “Estilo Incrustado”, en el campo Propiedad de escribe "background" y en valor el color que se desea tenga el fondo de la capa. Ver Ilustración 56.

8.11. ESTILOS En muchas ocasiones los estilos que ofrece el HTML son muy complicados de cambiar, ya que eso implica que hay que editar todas las páginas del documento en muchos renglones. Gracias a la aplicación de las hojas de o CSS (Cascade Style Sheets), se puede solucionar este problema.

No obstante se puede presentar otro problema y es que algunos navegadores no soportan el mismo tipo de lenguaje CSS, ni lo interpretan de la misma forma –a pesar del estándar-. Esto puede ser un problema en la medida de que si el navegador no entiende

Escribir el color en inglés



UNI-FO-02 V 1.0

lo que hay en ellas, en lugar de ignorarla, puede colgarse, o en el mejor de los casos, ofrecer una imagen muy simple de la página que hemos creado.

8.11.1. Usar hojas de estilo en cascada

Las hojas de estilo en cascada CSS, pueden usarse para proporcionar estilo a un documento HTML de tres maneras:

1. Con estilos incrustados. 2. Con hojas de estilo internas. 3. Con hojas de estilo externas.

NVU dispone el editor de hojas de estilo o CaScadeS, el cual puede ser utilizado para producir tanto hojas de estilo internas como externas. A diferencia de los estilos incrustados, las hojas de estilo internas o externas ayudan a mantener separadas la información del contenido de la del estilo.

Para proporcionar estilo al documento html que se edita, CaScadeS puede iniciarse haciendo clic en el menú “Herramientas” y seleccionando “Editor CSS”. CaScadeS permite dos modos de edición de hojas de estilo:

1. Modo para principiantes: este modo permite crear reglas asociadas a selectores de clase o selectores de tipo de elemento.

2. Modo avanzado: este modo permite crear reglas sin restricciones.

En caso de que no haya hoja de estilo, se creará una nueva automáticamente.

8.11.2. Crear hojas de estilo con Nvu

Para crear una hoja de estilo interna:

1. Menú “Herramientas” y seleccionando “Editor CSS”: 2. Clic en el botón <style>. 3. Haga clic en Crear hoja de estilo.



UNI-FO-02 V 1.0

Ilustración 58 Insertar un estilo CSS

Para crear una hoja de estilo externa:

1. Haga clic en el botón de elemento <link>. 2. Escriba la URL de la hoja de estilo en el panel de la derecha. Si no existe ya, se

creará un nuevo fichero en el sistema de archivos local. 3. Puede activar comprobar al crear una hoja de estilo alternativa.

Nota: La página de ayuda de NVU sugiere:

Guardar siempre el documento HTML antes de agregar una hoja de estilo local.

Guardar también el documento inmediatamente antes de cerrar el editor CSS. Utilizar el botón Recargar del panel de la izquierda si la hoja de estilo no se

descarga inmediatamente.

De manera Opcional se pueden llenar estos campos, luego dar clic en crear hoja de estilo



UNI-FO-02 V 1.0

9. COMPARACIÓN CON OTROS SOFTWARE

9.1. COMPARACION NVU - DREAMWEAVER

Características / Programa

NVU

DREAMWEAVER

Tip

o de

Pro

gram

a

Maneja dos modos de programación: WYSIWYG (que en ocasiones presenta el problema que la vista preliminar no es la misma que la que se genera por el navegador, debido a que al trabajar documentos muy grandes se puede perder el control del código y la estandarización y validación de los sitios) y el código HTML. Para los colores, dispone de un editor muy fácil de usar, junto a un editor CSS eficaz para principiantes con escasas nociones de hojas de estilo. Posee además un servidor FTP integrado.

Editor de páginas web basado en lenguaje HTML. La última versión añade la posibilidad de trabajar los dos tipos de programación vistos en el software libre: Código HTML y WYSIWYG (o manual).

Entorno

Potente, estable, liviano y de mejor rendimiento. Es más sencillo y amigable con el usuario.

Estable y potente para grandes códigos fuente. Es el más conocido debido a sus aplicaciones para Diseño y Edición de gráficas y páginas Web.

Inte

rfaz

La barra de Menú está compuesta por 8 menús.

La barra de Menú viene con 10 menús más simplificados

Com

pati

bilid

ad

Editor de Páginas web de código Abierto. Está basado en el motor Gecko, el mismo que usa la familia de navegadores web Mozilla, lo que asegura una compatibilidad total con los estándares de edición web (XUL, CSS, XML y JavaScript, es decir que es multiplataforma. Se encuentra basado en Mozilla Composer, pero de ejecución independiente.

Editor de Páginas Web de código cerrado Es un programa que solo se puede ejecutar en Sistema Operativo Privativo (No hay versión paga en Linux, u otros sistemas operativos, Linux, MAC, etc.).



UNI-FO-02 V 1.0

Opciones de

Personalización

Incluye la gestión de proyectos web o la posibilidad de personalizar la interfaz y las barras de herramientas

Incluye la gestión de proyectos web o la posibilidad de personalizar la interfaz y barras de herramientas en la última versión (Dreamweaver MX).

Pla

nific

ació

n y

conf

igur

ació

n de

un

siti

o

Para crear un sitio local basta con ir creando páginas y guardándolas en alguna carpeta dentro del PC. Y para configurar un sitio remoto: En el menú “Edición” encontramos la opción “Configuración de publicación”. En la ventana que aparece se introduce el nombre, la dirección absoluta o dirección (URL) del sitio y los datos de la cuenta FTP que maneje el usuario, dirección, usuario y contraseña

Determine la ubicación de los archivos y examine las necesidades del sitio, el perfil de la audiencia y sus objetivos. Además, tenga en cuenta requisitos técnicos como el acceso de los usuarios, las limitaciones del navegador, los plug-ins o la descarga de archivos. Una vez que haya organizado la información y determinado una estructura, podrá comenzar a crear el sitio.

Org

aniz

ació

n y

adm

inis

trac

ión

de lo

s ar

chiv

os d

el s

itio

En el menú “Archivo” se pueden administrar tanto los archivos de un sitio local, como los ya publicados. Permite el acceso remoto a sitios web por medio de los enlaces, que sirven a modo de hipervínculos.

En el panel Archivos puede añadir, borrar y cambiar el nombre de los archivos y carpetas fácilmente con el fin de modificar la organización según resulte necesario. Allí encontrará numerosas herramientas que le ayudarán a administrar el sitio, transferir archivos desde y hacia un servidor remoto, configurar un proceso de desprotección/protección que evite que se sobrescriban archivos y sincronizar los archivos de los sitios local y remoto. El panel Activos permite organizar fácilmente los activos de un sitio, que se pueden arrastrar directamente desde el panel hasta un documento de Dreamweaver.



UNI-FO-02 V 1.0

Intr

oduc

ción

Man

ual d

e C

ódig

o

Tiene las mismas características que Dreamweaver, solo que el de Nvu es un poco más sencillo en su interfaz. Además, no requiere de gran conocimiento en el código HTML para poder manejarlo.

La codificación manual de páginas Web es otro método de crear páginas. Dreamweaver ofrece sencillas herramientas de edición visual, pero también incluye un entorno de codificación más sofisticado. Puede utilizar el método que prefiera, o una combinación de ambos, para crear y editar las páginas. Necesita ciertos conocimientos en la codificación para modificar las características principales. Tiene el problema de que es un poco complejo para editar su código fuente cuando son extensos los caracteres a manejar, pero es más seguro y estable cuando se maneja este tipo de codificación.

Uso

de

Pla

ntill

as

No maneja plantillas prediseñadas por el software. Todas las creaciones o modificaciones las realiza el usuario.

Una de las características de Dreamweaver es la funcionalidad de sus plantillas. Esto permite que el diseño y mantenimiento de páginas web sea una tarea más simple. Además, las plantillas permiten dar seguridad al diseño de manera que los editores web no tengan que preocuparse en realizar esta tarea, ni teman dañar el trabajo ya realizado.

Comprobación y publicación

En el menú “Archivo” o en la barra de Herramientas de Composición, se puede hacer la vista previa de la página y la configuración de los datos Web para publicarla.

Se puede hacer desde menú “Archivos”, desde donde se hacen las modificaciones pertinentes para poder publicarlas en la Web.



UNI-FO-02 V 1.0

Def

inic

ión

elem

ento

s di

nám

icos

de

la p

ágin

a

Para crear esos elementos, debe configurar primero un servidor y una aplicación Web, crear o modificar un sitio de Internet y conectarse a una base de datos.

En Dreamweaver se pueden definir diversas fuentes de contenido dinámico, incluidos juegos de registros extraídos de bases de datos, parámetros de formularios y componentes JavaBeans. Para añadir el contenido dinámico a una página, basta con arrastrarlo a ella. Puede establecer que los registros de la página aparezcan de uno en uno o en grupos, mostrar varias páginas de registros, añadir vínculos especiales para pasar de una página de registros a la siguiente (o a la anterior) y crear contadores para que los usuarios puedan llevar un control de los registros. Puede incorporar lógica de aplicaciones o empresarial mediante tecnologías como Macromedia ColdFusion de Adobe y servicios Web. Si necesita más flexibilidad, puede crear sus propios comportamientos de servidor y formularios interactivos. Para crear esas páginas, debe configurar primero un servidor y una aplicación Web, Crear o modificar un sitio de Dreamweaver y conectarse a una base de datos.



UNI-FO-02 V 1.0

Dis

eño

de la

s pá

gina

s W

eb

Se puede definir las configuraciones de la página utilizando elementos PA, estilos de posición CSS o diseños CSS

Elija el diseño más apropiado, o combine las opciones de diseño de Dreamweaver para definir el aspecto de su sitio. En la creación de su diseño puede utilizar elementos PA, estilos de posición CSS o diseños CSS predefinidos de Dreamweaver. Para mostrar varios documentos de forma simultánea en un navegador, pueden utilizarse marcos para diseñar los documentos. Por último, puede crear páginas nuevas basadas en una plantilla de Dreamweaver y actualizar su diseño de forma automática cuando cambie la plantilla.

Adi

ción

de

cont

enid

o a

las

pági

nas

Tiene una interfaz muy similar a la de un procesador de texto, en donde se puede realizar cualquier modificación tanto a texto, como a imágenes, además de poder visualizar también la sección de código HTML para trabajarlo directamente.

Añada activos y elementos de diseño, como texto, imágenes, imágenes de sustitución, mapas de imágenes, colores, películas, sonido, vínculos HTML, menús de salto y mucho más. Puede utilizar funciones de creación de páginas incrustadas para dichos elementos, como títulos y fondos, escribir directamente en la página o importar contenido desde otros documentos. Dreamweaver, también proporciona comportamientos para llevar a cabo tareas en respuesta a eventos específicos, como la validación de un formulario cuando el visitante hace clic en el botón Enviar o abrir una segunda ventana del navegador cuando la página principal ha terminado de cargarse. Por último, Dreamweaver incluye herramientas para maximizar el rendimiento del sitio Web y para la comprobación de las páginas, con objeto de garantizar su compatibilidad con navegadores Web distintos.



UNI-FO-02 V 1.0

9.2. COMPARACION NVU – FRONTPAGE

Características / Programa

NVU

DREAMWEAVER

Generalidades

Ambos se crearon para el mismo propósito. Aunque FrontPage por su diseño simplista ha sido muy popular durante bastante tiempo, NVU está ganando terreno, sobre todo porque muchos están descubriendo lo fácil y práctico que es usar este software.

Carácterísticas

NVU es simple de operar especialmente para principiantes. Hay una gran variedad de plantillas disponibles; en caso de que cualquier necesidad de codificación que requiera, se puede hacer con facilidad.

FrontPage fue creado por Microsoft, y que cuesta un par de cientos de dólares. No obstante, es muy simple de usar y además cuenta con una variedad de plantillas para elegir.

Ventajas

Tiene un fácil de usar interfaz, y PHP y también está disponible la edición CSS. El software utiliza muy pocos recursos que le permite ejecutarse en máquinas que tienen poca memoria; además las páginas salen tal cual se escriben o se diseñan ya que el código no es codificado como si lo es en FrontPage. Otra cosa que pone a NVU por delante de FrontPage es que puede obtenerse de forma gratuita. También es de código abierto, lo que significa que cualquier persona con el conocimiento de desarrollo de software pueden crear o añadir elementos necesarios para mejorar NVU en su conjunto; opciones que sin duda, no están disponibles con Microsoft FrontPage. Y además: Según las estadísticas del sitio y usuarios de Linspire- el 38% de internautas usan Firefox, así que Nvu, inmediatamente se acopla como su editor de HTML. Y como si fuera poco Nvu corre perfectamente en Linux, Mac OS y Windows.

Microsoft Frontpage es el formato perfecto para aquellos principiantes que deseen crear una página web sin saber mucho ni de Internet ni de informática. La razón principal es lo sencillo de su manejo, y que además comúnmente viene pre instalado en la mayoría de PC con Microsoft Windows “de forma gratuita”. Su principal ventaja es que permite instalar algunas características extra de Web dinámicas incluídas dentro del programa.



UNI-FO-02 V 1.0

Aspectos Negativos

Aunque NVU es un gran software para la construcción de páginas web, a veces presenta errores que pueden ocasionar dificultad o inestabilidad. Sin embargo, la dificultad no es comparada en absoluto con la causada por FrontPage. El hecho de que el software es de código abierto garantiza a toda persona el derecho a erradicar los problemas que se presenten es ciertos contenidos.

Es necesaria la codificación html para construir una página web, aunque esta puede ser insertada de todas maneras por la lógica del programa no hay muchas opciones para elegir. Además a veces, el código puede ser codificado, convirtiéndose en un problema porque el programa piensa que las cosas deben ir de una manera, y el escrito del sitio considera que debería ser de otra. Otras desventajas son: 1) Duplica y hasta triplica el espacio utilizado en disco. 2) Necesita de las extensiones Front Page instaladas en su servidor virtual. 3) Al instalar estas extensiones, su cuenta FTP deja de trabajar. 4) Al instalar, no puede proteger páginas con contraseña ni ejecutar ningún tipo de script Perl o PHP, menos aún trabajar con bases de datos MySQL.



UNI-FO-02 V 1.0

10. CONCLUSIONES Y LIMITACIONES

1. Nvu es una herramienta muy útil, liviana y práctica para la creación de páginas Web, llegando incluso a opacar a Dreamweaver y FrontPage en algunos aspectos, su fácil uso, su entorno amigable y personalizable la convierten en una gran opción a la hora de elegir entre Software libre o tener que pagar por costosas licencias para adquirir softwares licenciados.

2. Una limitación importante para nuestra investigación fue la falta de conocimiento para la programación en html, lo cual nos impide la creación de páginas web de alta calidad.

3. La utilización de software libre como medio de desarrollo informático para la Unidad de Informática puede significar el mayor desarrollo de investigaciones tendientes por este camino, y sobretodo, estar a la vanguardia en software y alternativas económicas y eficientes para las necesidades de sus usuarios.

4. Las ventajas que presenta un programa como el Nvu son enormes cuando se le comparan con los inconvenientes de requerimientos técnicos u lógicos que exigen los otros programas para su instalación, configuración y funcionamiento, sin mencionar su respectivo costo: El programa no requiere de mucho espacio en el disco y los requerimientos técnicos no son rigurosos.

5. Nvu es un programa de fácil configuración y manejo, lo que permite al usuario trabajar con el modo de diseño que le parezca más adecuado y cómodo para su labor, además de permitir, la configuración de la interfaz y de los componentes del programa, de manera que sea mucho más fácil y agradable para el usuario su experiencia con el mismo.

6. Tiene las mismas características que Dreamweaver, solo que el de Nvu es un poco más sencillo en su interfaz. Además, no requiere de gran conocimiento en el código HTML para poder manejarlo.

7. Una desventaja que debemos reconocer del software, es que a veces es un poco inestable sobretodo si se pretende crear una página web con alto contenido dinámico y con alta calidad en diseño e imágenes.



UNI-FO-02 V 1.0

11. ANEXOS

Marcas HTML de gestión de marcos:13

N2.0 Documento Marco <FRAMESET></FRAMESET> (en lugar de <BODY>) N2.0 altura en filas <FRAMESET ROWS=,,,></FRAMESET> (píxel ó %) N2.0 altura en filas <FRAMESET ROWS=*></FRAMESET> (* = tamaño relativo) N2.0 anchura en columnas <FRAMESET COLS=,,,></FRAMESET> (píxel ó %) N2.0 anchura en columnas <FRAMESET COLS=*></FRAMESET> (* = tamaño relativo) N3.0b anchura del borde <FRAMESET BORDER=?> N3.0b borde <FRAMESET FRAMEBORDER="yes|no"> N3.0b color del borde <FRAMESET

BORDERCOLOR="#$$$$$$">

N2.0 Definición del marco <FRAME> (contenido de cada uno de los recuadros)

N2.0 documento que se debe mostrar

<FRAME SRC="URL">

N2.0 denominazione del frame <FRAME NAME="***"|_blank|_self| _parent|_top>

N2.0 anchura de los márgenes <FRAME MARGINWIDTH=?> (margen izquierdo y derecho)

N2.0 altura de los márgenes <FRAME MARGINHEIGHT=?> (margen superior e inferior)

N2.0 barra de desplazamiento o no <FRAME SCROLLING="YES|NO|AUTO">

N2.0 no redimensionable <FRAME NORESIZE> N3.0b borde <FRAME FRAMEBORDER="yes|no"> N3.0b color del borde <FRAME BORDERCOLOR="#$$$$$$"> N2.0 contenido en ausencia de

marco <NOFRAMES></NOFRAMES> (para navegadores

antiguos)

12. TABLA DE ILUSTRACIONES

Ilustración 1Descargar Nvu .................................................................................................................. 9

Ilustración 2 Guardar el Setup ............................................................................................................. 9

Ilustración 3 Asistente de instalación .............................................................................................. 10

13Tomada de: http://www.htmlpoint.com/guida/html_13.htm



UNI-FO-02 V 1.0

Ilustración 4 Acuerdo de Licencia ................................................................................................... 10

Ilustración 5 Carpeta de Destino ..................................................................................................... 11

Ilustración 6 Carpeta de Menú Inicio .............................................................................................. 11

Ilustración 7 Acceso directo ............................................................................................................. 12

Ilustración 8 instalación Nvu ............................................................................................................. 13

Ilustración 9 Finalización del Asistente ........................................................................................... 13

Ilustración 10 Configuración de la conexión ................................................................................. 14

Ilustración 11 Configuración del proxy: Universidad Nacional ................................................. 15

Ilustración 12 Hacer movible un objeto ......................................................................................... 17

Ilustración 13 ventana Principal Nvu ............................................................................................... 26

Ilustración 14 Publicar página ............................................................................................................ 33

Ilustración 15 Propiedades del enlace ............................................................................................. 34

Ilustración 16 Administrador de sitios Nvu .................................................................................. 37

Ilustración 17 Área de trabajo .......................................................................................................... 38

Ilustración 18 Vista normal ................................................................................................................ 40

Ilustración 19 VIsta HTML ................................................................................................................. 40

Ilustración 20 Vista código fuente .................................................................................................... 41

Ilustración 21 Vista Preliminar .......................................................................................................... 41

Ilustración 22 Sitio local. .................................................................................................................... 44

Ilustración 23 Guardar página como. .............................................................................................. 44

Ilustración 24 Configuración de la publicación ............................................................................. 45

Ilustración 25 Configuración de la publicación ............................................................................. 46



UNI-FO-02 V 1.0

Ilustración 26 Título y propiedades de la página. ......................................................................... 47

Ilustración 27 Fondo y colores de la página .................................................................................. 48

Ilustración 28 Elección de imagen. ................................................................................................... 49

Ilustración 29 Imagen de fondo ........................................................................................................ 49

Ilustración 30 Propiedades de la página. ......................................................................................... 50

Ilustración 31 Inserción de Carácteres y Símbolos ..................................................................... 51

Ilustración 32 Acceder a propiedades de la imagen. ................................................................... 53

Ilustración 33 Propiedades de la imagen ........................................................................................ 53

Ilustración 34 Insertar imagen. ......................................................................................................... 55

Ilustración 35 Insertar una imagen desde la web ......................................................................... 56

Ilustración 36 Insertar Tabla. ............................................................................................................ 57

Ilustración 37 Insertar tabla rápida .................................................................................................. 58

Ilustración 38 Insertar tabla -Preciso .............................................................................................. 58

Ilustración 39 Insertar tabla - Celda ................................................................................................ 59

Ilustración 40 Editor avanzado de propiedades ............................................................................ 60

Ilustración 41 Propiedades de la Tabla ........................................................................................... 61

Ilustración 42 Propiedades de las celdas ........................................................................................ 61

Ilustración 43 Insertar Formulario ................................................................................................... 63

Ilustración 44 Propiedades del formulario ..................................................................................... 64

Ilustración 45 Propiedades del campo formulario ....................................................................... 65

Ilustración 46 Propiedades del formulario ..................................................................................... 66

Ilustración 47 Ubicación, dimensiones y Apariencia del formulario ........................................ 67



UNI-FO-02 V 1.0

Ilustración 48 Propiedades del área de texto. .............................................................................. 69

Ilustración 49 Propiedades de la lista de selección ...................................................................... 69

Ilustración 50 Propiedades del botón ............................................................................................. 70

Ilustración 51 Propiedades del conjunto de campos ................................................................... 71

Ilustración 52 Búsqueda de índices .................................................................................................. 71

Ilustración 53 Ejemplo 1 de Frames ............................................................................................... 73

Ilustración 54 Segundo Ejemplo Frames ......................................................................................... 74

Ilustración 55 Insertar Rejilla de Posicionamiento ....................................................................... 76

Ilustración 56 Insertar una Capa ...................................................................................................... 77

Ilustración 57 Propiedades DIV ........................................................................................................ 78

Ilustración 58 Insertar un estilo CSS ............................................................................................... 80



UNI-FO-02 V 1.0

13. BIBLIOGRAFIA

http://www.nvu.es/

http://nave.hispalinux.es/

http://www.proyectonave.es/productos/descargas

http://www.bloginformatico.com/nvu-editor-visual-de-paginas-web-multiplataforma.php

http://nvu.softonic.com/

Página Web de Wikipedia

www.google.com

http://livedocs.adobe.com/es_ES/Dreamweaver/9.0/dreamweaver_cs3_help.pdf

http://www.portaleducativo.edu.ve/Recursos_didacticos/manuales/documentos

http://usuarios.lycos.es/cursonvu/descargas.html

http://creatuweb.espaciolatino.com/curso_nvu/unidad14.html

http://tecnologiaedu.uma.es/materiales/nvu/archivos/cap3_Trabajando_con_tablas.pdf

nvu 10 inf final - fce · privativo, como dreamweaver y frontpage para la misma función, de manera...

Documents