Introducción a NVU

NVU, se pronuncia N-view (New view).

Es un editor de páginas web con licencia GPL (General Public License), podemos hacer copias y utilizarlo libremente. Es un editor de los denominados WYSIWYG

What You See Is What You Get

Instalación

Comenzamos con NVU

Algunos conceptos básicos

WWW.- World Wide Web, es un servicio gráfico de internet que proporciona una red de documentos interactivos.Servidor.- Ordenadores donde se almacena la información que está en la red. Están interconectados por distintos medios.Explorador web.- Programa que nos permite navegar por internet, accediendo a la información (ficheros) en forma de páginas almacenadas en los distintos servidores.HTTP.- HyperText Transfer Protocol, protocolo de intercambio de información entre los navegadores y los servidores.

Algunos conceptos básicos

Página web.- Cada uno de los ficheros a los que accedemos con nuestro navegador. Pueden estar formadas por:

Texto. Hipervínculos (internos o externos). Tablas. Formularios. Marcos (frames). Imágenes (estáticas o en movimiento). Sonidos. Etc...

Sitio web.- Colección de páginas web enlazadas que contienen información.

Lenguaje HTML

HyperText Markup Languaje. Lenguaje de marcas de hipertextos. Es el lenguaje de programación que se utiliza para realizar las páginas web.

<HTML><HEAD>

<TITLE> Título de la página </TITLE></HEAD><BODY>

[Contenido: texto, fotos, tablas, etc.]</BODY>

</HTML>

Nombres de archivos:No utilizar más de 8 caracteres.No utilizar tildes, eñes, espacios en blanco,

caracteres especiales...

Hay que tener en cuenta que no todos los servidores tienen el mismo Sistema Operativo, por eso es importante que a la hora de “subir” los archivos al servidor, se tengan en cuenta las reglas anteriormente descritas.

Resolución de pantalla: Las resoluciones estándar en la web son 600x800 ó 1024x768 píxeles. Tendremos que tenerlo en cuenta a la hora de diseñar la página.

Cuestiones preliminares

Dividir la web en bloques de información más pequeños, que tengan entidad por sí solos. Convertir un gran problema en muchos problemas pequeños.

Hacer un diagrama jerarquizado en el que se vean las interrelaciones que hay entre los distintos elementos que conforman mi sitio web.

¿Cómo va a ser la web?

Hacer una representación del sistema de navegación del sitio web, es decir, cómo puedo pasar de unas partes del sitio a otras. Cómo me puedo mover por el sitio web.

Facilidad navegaciónPeso de las páginas

Probarlas antes de publicarlas

Crear una estructura de carpetas para poder tener toda la información organizada.

Los modos de edición con NVUNormal.- La página se ve tal y como quedará, pero las distintas zonas están enmarcadas para facilitar la manipulación

Etiquetas HTML.- Se ven las etiquetas del código HTML sobre fondo amarillo, pudiéndose ver todavía la estructura de la página.

Código Fuente.- Se ve el código HTML, pudiendo modificarlo. Podemos estropear la página por completo.

Vista Previa.- Se ve prácticamente igual a como quedaría en el navegador.

file:///J:/NVU/PNormal.jpg

file:///J:/NVU/pHtml.jpg

file:///J:/NVU/PCodFuen.jpgfile:///J:/NVU/PVisPre.jpg

Insertar TEXTOPodemos teclearlo directamente o bien copiarlo de otro sitio donde lo tengamos escrito y pegarlo.

El objetivo principal de un texto es la legibilidad. Si el tipo de letra, el fondo, el color, los efectos, nos dificultan leer el texto, algo falla.

Se debe reservar el subrayado solo para los enlaces. Disponemos de otros efectos para destacar partes del texto, negrita, cursiva, tamaño... Tenemos que tener cuidado con los colores del texto.

El tipo de fuente dependerá de si quien visita la página la tiene o no.

El uso de tablas nos puede servir para organizar el aspecto que le queramos dar a la página.

Insertar IMÁGENES

Elegir el formato JPEG, GIF y PNG. Para una imagen incluyendo texto: el formato PNG.Este formato ofrece una imagen perfectamente clara que no presenta deformaciones, incluso si desea reducirla. En cambio, el formato JPEG a veces dará una imagen borrosa en los bordes. Para una fotografía, una imagen de alta calidad: el formato JPEG.El formato JPEG es sin dudas el formato a utilizar. Debido a que soporta 16,7 millones de colores, ofrece a la vez una buena calidad y un peso óptimo para la Web.

Para una animación: el formato GIF

Optimizar el peso de una imagen para la webMas allá de la presentación visual, la optimización de la imagen permitirá ganar tiempo al momento de visualizar una página Web y reducirá el espacio que ocupa la imagen en el servidor.

La compresión de una imagen permite hacerla mucha más ligera que su peso inicial eliminando datos innecesarios, pero conservando las mismas dimensiones.Una resolución de 72 pixeles por pulgada será más que suficiente. En cambio el tamaño depende del uso que le va a dar.

Una imagen demasiado pesada ralentizará la visualización y aumentará el tiempo de carga de una página en el navegador.

Insertar imágenes con NVUPinchamos en Insertar → imagen, o bien en

Dimensiones:Podemos cambiar el tamaño de la imagen.Apariencia:Indicaremos el espaciado, la alineación con respecto al texto...Enlace:Para crear un hipervínculo con la imagen.

Las imágenes las podemos colocar dentro de la página o como fondo de la misma

Si queremos poner una imagen como fondo de página:

1.- Formato → Colores y fondo de página

Una vez que hemos insertado tanto texto como imágenes, deberíamos ver como queda en el navegador, para ello pinchamos en Archivo → Vista previa en navegador, o bien en el icono

Si no tenemos la página guardada, nos preguntará antes de visualizarla si queremos guardarla

Insertar tablasPinchamos en Insertar → tabla, o bien en

Rápido:Indicamos el nº de filas y columnas visualmente con el ratón.

Preciso:Indicamos, con el teclado, las filas, las columnas, la anchura de la tabla y del borde.

Celda:Indicamos las características de la celdas.

Una vez creada la tabla podemos modificarla picando en Tablas → Propiedades de la tabla.Tenemos dos pestañas: Tabla y Celdas.

En el menú Tabla, podremos:

Enlaces¿Qué son? Un enlace o link en un sitio web es lo que permite a un usuario pinchar sobre él para tener acceso o conectar con algo. Ese algo puede ser:

Una página publicada de internet.Otra página de mi sitio web.Otro punto de la página web en la que me encuentro.Una dirección de correo electrónico.Abrir un documento.Descargarme un archivo...

¿Dónde puedo poner un enlace? Se pueden poner en casi cualquier elemento de mi página. Un texto, una imagen, un vídeo...

Insertar enlacesLo primero que haremos será seleccionar el elemento de nuestra página en el que queremos crear el enlace.

Pinchamos en Insertar → Enlace (Ctrl+L), o bien en

Si hemos seleccionado un textoSi hemos seleccionado una imagen

Cuando selecciono el elemento en el que he puesto el enlace y pincho en

me aparecen las propiedades del enlace, apareciendo un botón que pone o bien más propiedades si no está desplegado, o menos propiedades si está desplegado. Podremos indicar el destino de enlace.

Si lo que queremos es enlazar con un punto dentro de mi página, ENLACE INTERNO, lo primero que tenemos que hacer en identificar la parte de la página con un nombre.

Una vez seleccionado el punto al cual queremos saltar, pinchamos en Insertar → Enlace Interno o bien

Pondremos el nombre al cual posteriormente haremos referencia para saltar. La única diferencia es que el enlace viene precedido por #.

Cuando tenemos creado puntos de enlaces internos, al desplegar en la ubicación del enlace, nos aparecen los que tenemos definidos, precedidos por #.

Si lo que queremos es enlazar con un punto dentro de mi página, ENLACE INTERNO, lo primero que tenemos que hacer en identificar la parte de la página con un nombre.

Una vez seleccionado el punto al cual queremos saltar, pinchamos en Insertar → Enlace Interno o bien

Pondremos el nombre al cual posteriormente haremos referencia para saltar. La única diferencia es que el enlace viene precedido por #.

Design

Introducción a NVU