Embed Size (px)
Citation preview
NVU, se pronuncia N-view (New view).
Es un editor de páginas web con licenciaGPL (General Public License), podemoshacer copias y utilizarlo libremente. Es unhacer copias y utilizarlo libremente. Es uneditor de los denominados WYSIWYG.
Instalación
Comenzamos con NVU
Algunos conceptos básicos
WWW.- World Wide Web, es un servicio gráfico deinternet que proporciona una red de documentosinteractivos.interactivos.Servidor .- Ordenadores donde se almacena lainformación que está en la red. Están interconectadospor distintos medios.Explorador web .- Programa que nos permite navegarpor internet, accediendo a la información (ficheros) enforma de páginas almacenadas en los distintosforma de páginas almacenadas en los distintosservidores.HTTP.- HyperText Transfer Protocol, protocolo deintercambio de información entre los navegadores y losservidores.
Algunos conceptos básicos
�Página web .- Cada uno de los ficheros a los queaccedemos con nuestro navegador. Pueden estarformadas por:formadas por:
� Texto.� Hipervínculos (internos o externos).� Formularios.� Imágenes (estáticas o en movimiento).� Sonidos.� Etc...Etc...
�Sitio web .- Colección de páginas web enlazadas quecontienen información.
Lenguaje HTML
HyperText Markup Languaje. Lenguaje de marcas dehipertextos. Es el lenguaje de programación que seutiliza para realizar las páginas web.utiliza para realizar las páginas web.
<HTML><HEAD><TITLE> Título de la página </TITLE></HEAD><BODY><BODY>[Contenido: texto, fotos, tablas, etc.]</BODY></HTML>
Nombres de archivos :� No utilizar más de 8 caracteres.� Noutilizar tildes, eñes, espacios en blanco,
Cuestiones preliminares
� Noutilizar tildes, eñes, espacios en blanco,caracteres especiales...
Hay que tener en cuenta que no todos los servidorestienen el mismo Sistema Operativo, por eso esimportante que a la hora de “subir” los archivos alservidor, se tengan en cuenta las reglas anteriormentedescritas.descritas.
Resolución de pantalla: Las resoluciones estándar enla web son 600x800 ó 1024x768 píxeles. Tendremosque tenerlo en cuenta a la hora de diseñar la página.
Dividir la web en bloques de información más pequeños,que tengan entidad por sí solos. Convertir un granproblema en muchos problemas pequeños.
Hacer un diagrama jerarquizado en el que se vean las
¿Cómo va a ser la web?
Hacer un diagrama jerarquizado en el que se vean lasinterrelaciones que hay entre los distintos elementos queconforman mi sitio web.Hacer una representación del sistema de navegación delsitio web, es decir, cómo puedo pasar de unas partes delsitio a otras. Cómo me puedo mover por el sitio web.
Facilidad navegaciónFacilidad navegaciónPeso de las páginas
Probarlas antes de publicarlas
Crear una estructura de carpetas para poder tenertoda la información organizada.
Los modos de edición con NVUNormal .- La página se ve tal y como quedará, pero lasdistintas zonas están enmarcadas para facilitar lamanipulación
Para ayudarle a proteger su privacidad, PowerPoint evitó que esta imagen externa se descargara automáticamente. Para descargar y mostrar esta imagen, haga clic en Opciones en la barra de mensajes y, a continuación, haga clic en Habilitar contenido externo.
Para ayudarle a proteger su privacidad, PowerPoint evitó que esta imagen externa se descargara automáticamente. Para descargar y mostrar esta imagen, haga clic en Opciones en la barra de mensajes y, a continuación, haga clic en Habilitar contenido externo.
Para ayudarle a proteger su privacidad, PowerPoint evitó que esta imagen externa se descargara automáticamente. Para descargar y mostrar esta imagen, haga clic en Opciones en la barra de mensajes y, a continuación, haga clic en Habilitar contenido externo.
Para ayudarle a proteger su privacidad, PowerPoint evitó que esta imagen externa se descargara automáticamente. Para descargar y mostrar esta imagen, haga clic en Opciones en la barra de mensajes y, a continuación, haga clic en Habilitar contenido externo.
Etiquetas HTML .- Se ven las etiquetas del código HTMLsobre fondo amarillo, pudiéndose ver todavía la estructurade la página.
Código Fuente .- Se ve el código HTML, pudiendomodificarlo. Podemos estropear la página por completo.modificarlo. Podemos estropear la página por completo.
Vista Previa .- Se ve prácticamente igual a como quedaríaen el navegador.
Insertar TEXTOPodemos teclearlo directamente o bien copiarlo de otrositio donde lo tengamos escrito y pegarlo.
El objetivo principal de un texto es la legibilidad . Si elEl objetivo principal de un texto es la legibilidad . Si eltipo de letra, el fondo, el color, los efectos, nos dificultanleer el texto, algo falla.
Se debe reservar el subrayado solo para los enlaces .Disponemos de otros efectos para destacar partes deltexto, negrita , cursiva, tamaño... Tenemos que tenercuidado con los colores del texto.cuidado con los colores del texto.
El tipo de fuente dependerá de si quien visita la páginala tiene o no.
El uso de tablas nos puede servir para organizar elaspecto 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.Para una imagen incluyendo texto: el formato PNG.Este formato ofrece una imagen perfectamente claraque no presenta deformaciones, incluso si deseareducirla. En cambio, el formato JPEG a veces dará unaimagen borrosa en los bordes.Para una fotografía, una imagen de alta calidad: elformato JPEG.formato JPEG.El formato JPEG es sin dudas el formato a utilizar.Debido a que soporta 16,7 millones de colores, ofrece ala 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 laimagen permitirá ganar tiempo al momento de visualizaruna página Web y reducirá el espacio que ocupa la imagenen el servidor.en el servidor.
La compresión de una imagen permite hacerla mucha másligera que su peso inicial eliminando datos innecesarios,pero conservando las mismas dimensiones.Una resolución de 72 pixeles por pulgada será más quesuficiente. En cambio el tamaño depende del uso que le vaa dar.a dar.
Una imagen demasiado pesada ralentizará la visualizacióny aumentará el tiempo de carga de una página en elnavegador.
Insertar imágenes con NVUPinchamos en Insertar → imagen, o bien en
Dimensiones:Podemos cambiar elPodemos cambiar eltamaño de la imagen.Apariencia:Indicaremos elespaciado, la alineacióncon respecto al texto...Enlace:Para crear unPara crear unhipervínculo con laimagen.
Las imágenes laspodemos colocar dentrode la página o comofondo 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 ellopinchamos en Archivo → Vista previa en navegador, o bienen el icono
Si no tenemos la página guardada, nos preguntará antesSi no tenemos la página guardada, nos preguntará antesde visualizarla si queremos guardarla
Insertar tablasPinchamos en Insertar → tabla, o bien en
Rápido:Indicamos el nº de filasy columnas visualmentecon el ratón.
Preciso:Indicamos, con elteclado, las filas, lascolumnas, la anchura dela tabla y del borde.
.
Una vez creada la tabla podemos modificarla picando enTablas → 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 quepermite a un usuario pinchar sobre él para tener accesoo conectar con algo.Ese algo puede ser: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 encasi cualquier elemento de mi página. Un texto, unaimagen, un vídeo...
Insertar enlacesLo primero que haremos será seleccionar el elemento denuestra 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 elelemento en el que hepuesto el enlace ypincho en
me aparecen laspropiedades del enlace,apareciendo un botónque pone o bien máspropiedades si no estádesplegado, o menosdesplegado, o menospropiedades si estádesplegado.Podremos indicar eldestino de enlace.
Si lo que queremos es enlazar con un punto dentro de mipágina, ENLACE INTERNO, lo primero que tenemos quehacer en identificar la parte de la página con un nombre.
Una vez seleccionado el punto al cual queremos saltar,Una vez seleccionado el punto al cual queremos saltar,pinchamos en Insertar → Enlace Interno o bien
Pondremos el nombre al cualposteriormente haremos referenciapara saltar. La única diferencia esque el enlace viene precedido por #.
