Slide 1:
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
Slide 2:
Instalación
Slide 3:
Comenzamos con NVU
Slide 4:
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.
Slide 5:
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.
Slide 6:
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>
Slide 7:
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
Slide 8:
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ón Peso de las páginas Probarlas antes de publicarlas Crear una estructura de carpetas para poder tener toda la información organizada.
Slide 9:
Los modos de edición con NVU Normal.- 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.
Slide 10:
Insertar TEXTO Podemos 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.
Slide 11:
Insertar IMÁGENES Elegir el formato JPEG, GIF y PNG. Para una imagen incluyendo texto: el formato PNG. Este formato ofrece una imagen perfectamen
1. NVU, se pronuncia N-view (New view). Es un editor de páginas web con licencia GPL ( G eneral P ublic L icense), podemos hacer copias y utilizarlo libremente. Es un editor de los denominados WYSIWYG W hat Y ou S ee I s W hat Y ou G et
4. Algunos conceptos básicos WWW .- W orld W ide W eb, 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 .- H yper T ext T ransfer P rotocol, protocolo de intercambio de información entre los navegadores y los servidores.
5.
6. 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>
7.
8. 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ón Peso de las páginas Probarlas antes de publicarlas Crear una estructura de carpetas para poder tener toda la información organizada.
9. Los modos de edición con NVU Normal .- 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.
10. Insertar TEXTO Podemos 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.
11. 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
12. Optimizar el peso de una imagen para la web Mas 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.
13. Insertar imágenes con NVU Pinchamos 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
14. Si queremos poner una imagen como fondo de página: 1.- Formato -> Colores y fondo de página
15. 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
16. Insertar tablas Pinchamos 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.
17. Una vez creada la tabla podemos modificarla picando en Tablas -> Propiedades de la tabla. Tenemos dos pestañas: Tabla y Celdas.
20. Insertar enlaces Lo 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 texto Si hemos seleccionado una imagen
21. 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.
22. 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 #.
23. 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 #.
