Diseño de páginas Web bajo NVU

NVU (se pronuncia N-view, por "new view") es un editor de páginas web libre y gratuito desarrollado bajo la modalidad Open Source, o sea que cualquiera está autorizado para bajarlo sin costo alguno, incluyendo su código fuente por si necesita hacer cambios especiales. Esta alternativa gratuita trae nuevas herramientas para facilitar el trabajo, convirtiéndola en una interesante opción para diseñar sitios web. NVU está diseñado para ser extremadamente fácil de usar, haciéndolo ideal para los usuarios menos experimentados que quieran crear una web atractiva y de diseño profesional sin necesidad de conocer HTML o código web.

              

                                                              Daniel Glazman creador del NVU

NVU es un editor de páginas web WYSIWYG (es un acrónimo "lo que ves es lo que obtienes", en inglés) es un programa que se puede utilizar en diferentes sistemas operativos o sea que es multiplataforma. Se encuentra basado en Mozilla Composer, pero de ejecución independiente. Inicialmente pensado para rivalizar con aplicaciones como Dreamweaver o FrontPage, Nvu es una alternativa para los que no tienen un gran dominio del HTML.

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 en el modo de código fuente.  Para los colores, dispone de un editor muy fácil de usar, junto a un editor CSS (Cascade Style Sheets) eficaz para principiantes con escasas nociones de hojas de estilo.  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.

Hay una versión portátil de NVU que puede ser transportada y usada directamente desde una memoria USB sin necesidad de instalarse en el computador.

NVU es una aplicación con licencia GPL (General Public License), que nos da a los usuarios varias libertades básicas, entre ellas la posibilidad de hacer las copias que queramos/necesitemos del programa. Este hecho es una ventaja (por ejemplo) si estamos en el mundo de la enseñanza, ya que podemos utilizar con nuestros alumnos y alumnas esta aplicación y podemos distribuirla para que la instalen en sus domicilios (si no tienen conexión a Internet) y puedan trabajar con la misma aplicación que se usa en los centros educativos.

Elementos de la Ventana de NVU

Lo primero que debemos aprender: los elementos que constituyen la ventana de NVU, las áreas de trabajo y las herramientas disponibles.

La ilustración que se presenta a continuación y la identificación de cada elemento indica la manera como debemos familiarizarnos con NVU:

·  Área de Trabajo o Edición: espacio para crear la página Web e insertar y modificar sus elementos.

· Barra de Menú: ubicada en la parte superior de la pantalla principal o área de trabajo. Constituida por varias opciones: Archivo, Edición, Ver, Insertar, Formato, Tabla, Herramientas y Ayuda.

· Barra de Formato: permite modificar la apariencia del contenido de la página. Entre las opciones: formato de párrafo, tipografía, color de frente-fondo de página y párrafo, tamaño de la fuente, formato texto, listas, alineación, sangría, capa.

· Barra de Botones: contiene diferentes iconos para insertar elementos a la página. Las herramientas disponibles en esta barra también la puedes encontrar en las opciones de la barra de menú.

· Barra de Estilos: otra barra de herramientas disponible para modificar formato de fuentes, objetos y demás elementos insertados en la página diseñada.

· Modos de Edición: son cuatro las opciones de visualización de la página. En vista normal diseñas en modo gráfico, como si estuvieras en un editor de texto como word. En código fuente, trabajas con etiquetas HTML y en vista previa puede visualizar la página tal y como se verá en el navegador.

·  Barra de Estado: ubicada en la parte inferior de la ventana. Informa de la cantidad de páginas, etiquetas activas y demás aspectos informativos del programa.

·  Explorador o Administrador de Sitios: es el panel disponible en el lateral izquierdo de la página. Puedes activarlo/desactivarlo presionado F9. En sus opciones podrás crear, editar o eliminar sitios Web.

Establecer el formato en una página Web

1. Formatos de texto

Leer en una pantalla de ordenador no es muy cómodo que digamos, por eso deberemos darle el aspecto más atractivo y equilibrado posible, es decir, le daremos el "formato" más adecuado. Existen dos formatos principales, el de párrafo que como su nombre indica abarcará a uno, varios, o todos los párrafos del documento, y el formato de caracteres. Vamos a empezar por el primero de ellos.

Los formatos de párrafo son varios: opciones de Justificación, estilos de títulos y los elementos de Listas que afectarán a todos los párrafos del bloque de texto que seleccionemos.  Las opciones de Justificación están situadas en y contienen cuatro posibilidades, según deseemos poner el texto alienado a la izquierda, centrado, a la derecha o justificada en los dos márgenes de la página web, tal como se indica en la siguiente ilustración.

2. Títulos 

Son estilos a nivel de bloque (párrafos) para delimitar en el texto diferentes secciones o apartados, y resaltar así la importancia de determinados títulos. En el lenguaje HTML sólo hay seis niveles, que se diferencian unos de otros por el tamaño de la letra, van en grado descendente, desde el nivel 1 que es el mayor, hasta el nivel 6, el más pequeño, tal y como podemos observar en la imagen. Ojo, estos estilos pueden re-definirse usando estilos CSS.

Podemos aplicar este formato seleccionando el texto que deseamos resaltar con este estilo, luego desplegamos la lista que se encuentra en la barra de formato, marcando uno de los seis tipos de título que nos ofrece. El aspecto que ofrecerán los párrafos con estos estilos de títulos podemos verlo en ilustración que está a continuación:

También podemos acceder a través del menú Formato --> Párrafo. Ese menú también nos ofrece los seis estilos de título, ofreciéndose también la posibilidad de incrementar o disminuir su tamaño de acuerdo con nuestros gustos. A la derecha tienes el menú de formato al que nos referimos más arriba, a través de él también puedes aplicar los seis diferentes estilos de títulos. Si miras el código fuente verás que estos estilos corresponden a las etiquetas H1 a H6. Todo el texto encerrado entre esas etiquetas aparecerá con el tamaño, grosor, colores correspondientes a los estilos título 1 a título 6. 

3. Listas

El formato de lista es útil para que nuestros párrafos presenten el de una lista (ordenada o no) por ejemplo al crear un índice para nuestra página. Podemos acceder a ella desde el menú Formato, y en éste seleccionando el apartado Lista, vemos que nos presenta 4 opciones:

• No numerada.
• Numerada.
• Término.
• Definición.

En los siguientes apartados veremos estos diferentes tipos de lista de manera más detallada. 

Listas no numeradas

• Arquitectura
• Bernini
• Borromini
• Escultura
• Bernini
• Pintura
• Caravaggio

Se llama también lista de viñetas; en ella los elementos que forman la lista van precedidos de un símbolo (viñeta) que puede ser elegido de entre los tres que nos ofrece el programa: círculo sólido, circunferencia y cuadrado sólido. Accederemos a ellos con la opción propiedades de la lista, que vemos en la imagen precedente.  Este tipo de lista está también accesible desde el botón Viñetas de la barra de formato. 

Lista numerada

Como su nombre indica los elementos de la lista van precedidos de números o letras que podemos elegir en la ventana propiedades de la lista, desplegando el apartado Estilos de numeración. Estas listas también se las conoce como desordenadas.

Las propiedades e incluso el tipo de la lista puede cambiarse en cualquier momento. Basta seleccionar el o los elementos que queramos cambiar y elegir en el menú de Formato --> Listas la opción propiedades, o bien usando el menú del botón secundario del ratón. 

La numeración de las listas ordenadas puede hacerse con números árabes, romanos o letras. 

1. Redes
1. Lan
2. Wan
2. Topologías
1. Bus
2. Anillo
3. Estrella

Definiciones y términos

Las listas tipo Definiciones, van estrechamente relacionadas, se utilizan para dar al texto el formato similar al de una definición, el formato Término lo aplicaremos a la palabra que encabeza o da título al elemento de la lista, mientras que el formato Definición lo aplicaremos al texto que sigue al término. Si hemos aplicado el formato término, tras escribir éste, y de forma automática, al pulsar Intro, el cursor se desplaza al punto de inserción correspondiente a la definición adquiriendo el texto que introduzcamos a continuación este formato. 

HTML

Pseudo lenguaje para la creación de páginas WEB

WWW

World Wide Web

Podemos elegir las listas de términos y de definiciones desde el menú Formato, y seleccionando el apartado Lista o también con sus correspondientes botones de la barra de formato. El izquierdo da formato término y el derecho da formato de definición.

4. Formatos de caracteres 

Los signos que forman el texto: letras, números, signos ortográficos, matemáticos, etc. pueden aparecer en la página con el aspecto que definamos mediante los diferentes formatos, algo que haremos fundamentalmente mediante los atributos de estilo, color y tipo de letra. 

a) Estilos

Los estilos de texto son diferentes formas en las que puede verse el texto en la página web. Algunos estilos llevan un nombre alusivo al uso para el que se crearon (y pueden ser redefinidos). Los estilos de carácter se pueden aplicar de dos maneras:

• Seleccionamos primero el texto y después desplegamos el menú Formato y en él elegimos Estilos de Texto.

• O bien tras seleccionar el texto, pulsamos en algunos de los botones de la barra de herramientas de Formato usados para los estilos más frecuentes: la negrita (B), la cursiva (I), y el subrayado (U).    

Aquí tienes una descripción de los diferentes estilos que podremos aplicar al texto a nivel de carácter:

• Negrita: Letras con trazo grueso
• Cursiva: llamado también Itálica, de ahí su símbolo, inclina el texto a la derecha.
• Subrayado: Pues eso, texto subrayado
• Tachado: El texto aparece con una línea horizontal.
• ^Superíndice: Posición elevada del texto
• _Subíndice: Posición del texto más baja.

• Anchura Fija: En este estilo todos los caracteres tendrán el mismo ancho, aunque sean bastante dispares como una "m" o una "i". En otros editores aparece como "teletipo".
• Sin romper: El texto se muestra en una sola línea, sin romper por ninguna tabulación.

El resto de los estilos, los utilizaremos cuando queramos introducir un tipo de texto de características especiales como pueden ser: citas, abreviaturas, acrónimos, código de programación, variables, ejemplos, etc.

b) Texto en colores

Para aplicar color a un texto, primero lo seleccionamos y luego elegimos Color del texto... en el menú Formato de la barra de menús. Nos aparecerá una nueva ventana como la que muestra la imagen:

c) Tipos de letras 

Cuando se trabaja con procesadores de textos tenemos a nuestra disposición una innumerable cantidad de fuentes o tipografías para usar en los documentos. Al igual que ocurre con el color, los tipos de letra deben combinarse con cierto cuidado, el uso uniforme de un mismo tipo de fuente da coherencia al documento, permite al lector localizar la información que necesita y facilita la legibilidad. El uso de una tipografía heterogénea dificulta a los usuarios identificar los bloques informacionales y navegar por el contenido del documento.

En una página web aparentemente tenemos las mismas posibilidades, pero solo aparentemente. El explorador usa las fuentes que le decimos en la página web siempre y cuando el ordenador del visitante disponga de esas fuentes. Es decir, además de usar tipos de fuentes homogéneos debemos mantenernos dentro de las fuentes instaladas en la mayoría de los sistemas operativos usados por los internautas. 
Elegir tipos  

Para aplicar la fuente basta con seleccionar el texto previamente mecanografiado y después pasar a la elección del tipo de letra, o también tener ya seleccionado el tipo de letra antes de comenzar la escritura del texto, en ambos casos, para acceder a la fuente o tipo de letra, tenemos dos caminos:

Los tipos de letras los encontraremos en el menú Formato y seleccionado la opción Tipo de letra, con lo que se desplegará una lista con los tipos de letra que tenga nuestro sistema.

Otra forma es desplegando la lista de fuentes del menú que nos nuestra la barra de herramientas de formato. Se desplegará una lista similar a la del método anterior:

En estas listas se nos ofrecen los tipos de letra que podemos usar en nuestra página web:

• En primer lugar, se nos muestra la tipología que presenta el texto que previamente hayamos seleccionado.
• En segundo lugar, los dos formatos de escritura de los que ya hemos hablado, el fijo donde todos los caracteres ocupan el mismo espacio, y el variable donde caracteres como la "i" ocupan menos espacio que la "m".
• El siguiente grupo lo ocupan las familias de fuentes que NVU adopta como predeterminadas según el standard de la W3C, organismo encargado de señalar las normas de accesibilidad a las páginas web. Al usar estas familias conseguiremos que la página se ve por igual en cualquier navegador.

Por último, y por orden alfabético, aparece el listado de todas las fuentes que tengamos instaladas en nuestro equipo, listado que variará sustancialmente de unos ordenadores a otros.

5. Sangrado de párrafos

Para sangrar párrafos puede utilizar la tecla Tab de su teclado (al igual que ocurre con el procesador de textos), o el botón Sangrar texto de la barra de herramientas.

También podemos tabular “artificialmente” un párrafo mediante espacios sin salto. Es, como su nombre indica, un espacio que no produce salto (es un tipo particular de espacio que está considerado un carácter en sí mismo en lugar de ser, simplemente, un espacio entre caracteres). Para ser más específico, los espacios simples que se obtienen con la barra espaciadora no son considerados esenciales por la mayoría de los navegadores; si coloca un puñado de espacios en blanco, uno tras otro, para intentar dar formato a un texto, en algunos navegadores sólo se mostrará un espacio.

6.- Crear el vínculo o enlace

Se pueden crear enlaces desde la página a otras páginas locales del ordenador, de la red local, a páginas remotas de Internet. Para crear un enlace:

1.     Seleccionar un texto o imagen a partir de la cual se realizará el enlace o salto.

2.     Pulsar sobre el botón Enlace  o seleccionar Insertar > Enlace… o Seleccionar Menú contextual > Crear enlace

3.     Aparecerá el cuadro de diálogo Propiedades del enlace, con el que podremos definir las características del enlace:

o Texto del enlace: si se ha seleccionado un archivo de imagen o un texto antes de hacer clic en el icono enlace, el texto o archivo seleccionado será introducido aquí. Si no, se debe introducir el texto que se desee utilizar como enlace.

o Ubicación del enlace: Para indicar la dirección del enlace deberemos seguir pasos diferentes en función de la ubicación del enlace. Así, si es:

►       Un enlace externo. Escriba la dirección URL de este o copie la dirección de la página desde un navegador (Copiar y Pegar) para evitar confusiones.

                             Un enlace local. En este caso el método más sencillo es pulsar sobre Elegir archivo...para seleccionar el archivo desde la carpeta del sitio web local. En este caso comprobar que se encuentra activado La URL es relativa a la dirección de la página.

4.-   Pulsar Aceptar.

       5.-   Para comprobar el enlace que se acaba de crear funciona correctamente, pulsar sobre el enlace y seleccionar del menú contextual la opción Editar enlace en nueva ventana. También podemos abrir la página con el navegador y comprobar el funcionamiento de los enlaces, para ello seleccionar del menú Archivo la opción Visualizar la página con el navegador.

Eliminar enlaces

Para eliminar un enlace:

     Seleccionar el texto o la imagen con enlace. 

    Abrir el menú Formato y seleccionar Borrar enlaces.

Fuente Consultada:   AQUÍ

Investigación realizada para la Asignatura TIC III dictada por el Profesor Juan Carlos Páez