SlideShare una empresa de Scribd logo
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
Instalación
Comenzamos con NVU
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.
Algunos conceptos básicos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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>
[object Object],[object Object],[object Object],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ón Peso 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 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.
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.
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 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.
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
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 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.
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.  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],¿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 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
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 #.

Más contenido relacionado

La actualidad más candente

MANUAL BASICO EN HTML
MANUAL BASICO EN HTMLMANUAL BASICO EN HTML
MANUAL BASICO EN HTMLprincesyadi27
 
Manual html
Manual htmlManual html
Manual html
gonzalolobelcho1
 
Informatica tatiana y sheila (2) (1) (1)
Informatica tatiana y sheila (2) (1) (1)Informatica tatiana y sheila (2) (1) (1)
Informatica tatiana y sheila (2) (1) (1)
tatishei
 
Etiquetas head y body
Etiquetas head y bodyEtiquetas head y body
Etiquetas head y body
Sebastian De Los Angeles
 
Html
HtmlHtml
Ejercicios Basicos HTML
Ejercicios Basicos HTMLEjercicios Basicos HTML
Ejercicios Basicos HTML
JUJEblog
 
El lenguaje de programación en las páginas web
El lenguaje de programación en las páginas webEl lenguaje de programación en las páginas web
El lenguaje de programación en las páginas webAlvaroav
 
Manual html
Manual htmlManual html
Manual html
Angel Arias Camacho
 
Construcción página web
Construcción página webConstrucción página web
Construcción página web
Ociel Lopez Jara
 
Listado de etiquetas y atributos html
Listado de etiquetas y atributos htmlListado de etiquetas y atributos html
Listado de etiquetas y atributos htmljulyovalle
 
Reactivos diseño web parcial
Reactivos diseño web parcialReactivos diseño web parcial
Reactivos diseño web parcial
Angel Arias Camacho
 
Página web web
Página web webPágina web web
Página web webprofeluz
 
El lenguaje html
El lenguaje htmlEl lenguaje html
El lenguaje html
Oscar Eduardo Delgado Maya
 

La actualidad más candente (20)

Adobe dreamweaver
Adobe dreamweaverAdobe dreamweaver
Adobe dreamweaver
 
Presentación1
Presentación1Presentación1
Presentación1
 
MANUAL BASICO EN HTML
MANUAL BASICO EN HTMLMANUAL BASICO EN HTML
MANUAL BASICO EN HTML
 
Manual html
Manual htmlManual html
Manual html
 
Creacion de una pagina web con el bloc
Creacion de una pagina web con el blocCreacion de una pagina web con el bloc
Creacion de una pagina web con el bloc
 
Informatica tatiana y sheila (2) (1) (1)
Informatica tatiana y sheila (2) (1) (1)Informatica tatiana y sheila (2) (1) (1)
Informatica tatiana y sheila (2) (1) (1)
 
Etiquetas head y body
Etiquetas head y bodyEtiquetas head y body
Etiquetas head y body
 
Html
HtmlHtml
Html
 
Ejercicios Basicos HTML
Ejercicios Basicos HTMLEjercicios Basicos HTML
Ejercicios Basicos HTML
 
El lenguaje de programación en las páginas web
El lenguaje de programación en las páginas webEl lenguaje de programación en las páginas web
El lenguaje de programación en las páginas web
 
Manual html
Manual htmlManual html
Manual html
 
Construcción página web
Construcción página webConstrucción página web
Construcción página web
 
Listado de etiquetas y atributos html
Listado de etiquetas y atributos htmlListado de etiquetas y atributos html
Listado de etiquetas y atributos html
 
Reactivos diseño web parcial
Reactivos diseño web parcialReactivos diseño web parcial
Reactivos diseño web parcial
 
Página web web
Página web webPágina web web
Página web web
 
Practicakompozer 3
Practicakompozer 3Practicakompozer 3
Practicakompozer 3
 
El lenguaje html
El lenguaje htmlEl lenguaje html
El lenguaje html
 
Html5
Html5Html5
Html5
 
Crear paginas web
Crear paginas webCrear paginas web
Crear paginas web
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 

Similar a Introducción a NVU

Alejandro abella alonso
Alejandro abella alonsoAlejandro abella alonso
Alejandro abella alonso
Alejandro Abella Alonso
 
Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1
yanburbano
 
Como Crear Paginas Web
Como Crear Paginas WebComo Crear Paginas Web
Como Crear Paginas Web
Jose Casan
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaverastridcmc
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaverastridcmc
 
Tutorial de dreamweaver
Tutorial de dreamweaverTutorial de dreamweaver
Tutorial de dreamweaver
Geiner Guerra Cervantes
 
Resumen de dreamweaver aybeth orozco morales 11 e
Resumen de dreamweaver  aybeth orozco morales 11 eResumen de dreamweaver  aybeth orozco morales 11 e
Resumen de dreamweaver aybeth orozco morales 11 eaybeth9414
 
Resumen de dreamweaver
Resumen de dreamweaverResumen de dreamweaver
Resumen de dreamweaverpaosinning
 
Mi primer pagina web
Mi primer pagina webMi primer pagina web
Mi primer pagina web
LuisAlbertoGuarachiG
 
Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernestoerjenate
 
Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernestoerjenate
 
Temas 10
Temas 10Temas 10
Proyecto Tecnico,
Proyecto Tecnico,Proyecto Tecnico,
Proyecto Tecnico,soccorro
 
Alexander y diego paginas de html
Alexander y diego paginas de htmlAlexander y diego paginas de html
Alexander y diego paginas de html
alexander polanco
 
Web con Frontpage
Web con FrontpageWeb con Frontpage
Web con Frontpage
adriana calatayud
 
Guia de autoaprendizaje
Guia de autoaprendizajeGuia de autoaprendizaje
Guia de autoaprendizaje
Guillermo Storti
 

Similar a Introducción a NVU (20)

Alejandro abella alonso
Alejandro abella alonsoAlejandro abella alonso
Alejandro abella alonso
 
Presentación1
Presentación1Presentación1
Presentación1
 
Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1
 
Como Crear Paginas Web
Como Crear Paginas WebComo Crear Paginas Web
Como Crear Paginas Web
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
Tutorial de dreamweaver
Tutorial de dreamweaverTutorial de dreamweaver
Tutorial de dreamweaver
 
Resumen de dreamweaver aybeth orozco morales 11 e
Resumen de dreamweaver  aybeth orozco morales 11 eResumen de dreamweaver  aybeth orozco morales 11 e
Resumen de dreamweaver aybeth orozco morales 11 e
 
Resumen de dreamweaver
Resumen de dreamweaverResumen de dreamweaver
Resumen de dreamweaver
 
Como programar en htmil 5
Como programar en htmil 5Como programar en htmil 5
Como programar en htmil 5
 
Kompezer
KompezerKompezer
Kompezer
 
Mi primer pagina web
Mi primer pagina webMi primer pagina web
Mi primer pagina web
 
Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernesto
 
Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernesto
 
Temas 10
Temas 10Temas 10
Temas 10
 
Diseño web
Diseño webDiseño web
Diseño web
 
Proyecto Tecnico,
Proyecto Tecnico,Proyecto Tecnico,
Proyecto Tecnico,
 
Alexander y diego paginas de html
Alexander y diego paginas de htmlAlexander y diego paginas de html
Alexander y diego paginas de html
 
Web con Frontpage
Web con FrontpageWeb con Frontpage
Web con Frontpage
 
Guia de autoaprendizaje
Guia de autoaprendizajeGuia de autoaprendizaje
Guia de autoaprendizaje
 

Más de restauracio

Adobe illustrator vs inkscape
Adobe illustrator vs inkscapeAdobe illustrator vs inkscape
Adobe illustrator vs inkscaperestauracio
 
Adobe illustrator vs inkscape - Andrea Moreno
Adobe illustrator vs inkscape - Andrea MorenoAdobe illustrator vs inkscape - Andrea Moreno
Adobe illustrator vs inkscape - Andrea Morenorestauracio
 
the gimp espai de treball i restaura fotos
the gimp espai de treball i restaura fotosthe gimp espai de treball i restaura fotos
the gimp espai de treball i restaura fotos
restauracio
 
Linea del temps open office Text
Linea del temps open office TextLinea del temps open office Text
Linea del temps open office Textrestauracio
 
Diferencias esenciales entre microsoft office y open office (final)
Diferencias esenciales entre microsoft office y open office (final)Diferencias esenciales entre microsoft office y open office (final)
Diferencias esenciales entre microsoft office y open office (final)
restauracio
 
T4 ex2 o oo texto
T4 ex2 o oo textoT4 ex2 o oo texto
T4 ex2 o oo textorestauracio
 
T4 ex1 o oo presentacio
T4 ex1 o oo presentacioT4 ex1 o oo presentacio
T4 ex1 o oo presentaciorestauracio
 
Adobe photoshop power point
Adobe photoshop power pointAdobe photoshop power point
Adobe photoshop power pointrestauracio
 
Trabajo adobe photoshop
Trabajo adobe photoshopTrabajo adobe photoshop
Trabajo adobe photoshoprestauracio
 

Más de restauracio (20)

Adobe illustrator vs inkscape
Adobe illustrator vs inkscapeAdobe illustrator vs inkscape
Adobe illustrator vs inkscape
 
Adobe illustrator vs inkscape - Andrea Moreno
Adobe illustrator vs inkscape - Andrea MorenoAdobe illustrator vs inkscape - Andrea Moreno
Adobe illustrator vs inkscape - Andrea Moreno
 
the gimp espai de treball i restaura fotos
the gimp espai de treball i restaura fotosthe gimp espai de treball i restaura fotos
the gimp espai de treball i restaura fotos
 
Linea del temps open office Text
Linea del temps open office TextLinea del temps open office Text
Linea del temps open office Text
 
Diferencias esenciales entre microsoft office y open office (final)
Diferencias esenciales entre microsoft office y open office (final)Diferencias esenciales entre microsoft office y open office (final)
Diferencias esenciales entre microsoft office y open office (final)
 
Tabla
TablaTabla
Tabla
 
Vistes citerea
Vistes citereaVistes citerea
Vistes citerea
 
Citerea
CitereaCiterea
Citerea
 
T4 ex2
T4 ex2T4 ex2
T4 ex2
 
T4 ex1
T4 ex1T4 ex1
T4 ex1
 
T2 ex1
T2 ex1T2 ex1
T2 ex1
 
T4 ex2 o oo texto
T4 ex2 o oo textoT4 ex2 o oo texto
T4 ex2 o oo texto
 
T4 ex1 o oo presentacio
T4 ex1 o oo presentacioT4 ex1 o oo presentacio
T4 ex1 o oo presentacio
 
Adobe photoshop power point
Adobe photoshop power pointAdobe photoshop power point
Adobe photoshop power point
 
Tabla
TablaTabla
Tabla
 
Trabajo adobe photoshop
Trabajo adobe photoshopTrabajo adobe photoshop
Trabajo adobe photoshop
 
Vistesl
VisteslVistesl
Vistesl
 
T4 ex1
T4 ex1T4 ex1
T4 ex1
 
T4 ex2
T4 ex2T4 ex2
T4 ex2
 
T2 ex1taula
T2 ex1taulaT2 ex1taula
T2 ex1taula
 

Último

DIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en lineaDIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en linea
EduarRamos7
 
capitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdfcapitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdf
ProfesorCiencias2
 
Propuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseñoPropuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseño
Mariano Salgado
 
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdfEstilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
JosueJuanez1
 
informecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docxinformecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docx
IsabellaCortes7
 
Patrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en CancunPatrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en Cancun
DianaArtemizaCP
 
Teoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintoresTeoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintores
EduardoGM8
 
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptxVERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
ingridavila20
 
Desarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdfDesarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdf
marianamadronero578
 
La Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por KarinaLa Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por Karina
KarinaRodriguezG2
 
Arquitectura Ecléctica e Historicista en Latinoamérica
Arquitectura Ecléctica e Historicista en LatinoaméricaArquitectura Ecléctica e Historicista en Latinoamérica
Arquitectura Ecléctica e Historicista en Latinoamérica
imariagsg
 
etiqueta que se utiliza en un restaurante .pdf
etiqueta que se utiliza en  un restaurante  .pdfetiqueta que se utiliza en  un restaurante  .pdf
etiqueta que se utiliza en un restaurante .pdf
Vhope6
 
Infografía profesional cronología horizontal bloques de colores fondo negro.pdf
Infografía profesional cronología horizontal bloques de colores fondo negro.pdfInfografía profesional cronología horizontal bloques de colores fondo negro.pdf
Infografía profesional cronología horizontal bloques de colores fondo negro.pdf
salazar1611ale
 
Movimiento Moderno en Venezuela Arquitectura
Movimiento Moderno en Venezuela ArquitecturaMovimiento Moderno en Venezuela Arquitectura
Movimiento Moderno en Venezuela Arquitectura
LeonardoDantasRivas
 
Figuras bidimensionales en el diseño.pptx
Figuras bidimensionales en el diseño.pptxFiguras bidimensionales en el diseño.pptx
Figuras bidimensionales en el diseño.pptx
LuisFernandoOcampoGa
 

Último (15)

DIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en lineaDIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en linea
 
capitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdfcapitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdf
 
Propuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseñoPropuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseño
 
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdfEstilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
 
informecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docxinformecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docx
 
Patrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en CancunPatrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en Cancun
 
Teoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintoresTeoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintores
 
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptxVERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
 
Desarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdfDesarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdf
 
La Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por KarinaLa Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por Karina
 
Arquitectura Ecléctica e Historicista en Latinoamérica
Arquitectura Ecléctica e Historicista en LatinoaméricaArquitectura Ecléctica e Historicista en Latinoamérica
Arquitectura Ecléctica e Historicista en Latinoamérica
 
etiqueta que se utiliza en un restaurante .pdf
etiqueta que se utiliza en  un restaurante  .pdfetiqueta que se utiliza en  un restaurante  .pdf
etiqueta que se utiliza en un restaurante .pdf
 
Infografía profesional cronología horizontal bloques de colores fondo negro.pdf
Infografía profesional cronología horizontal bloques de colores fondo negro.pdfInfografía profesional cronología horizontal bloques de colores fondo negro.pdf
Infografía profesional cronología horizontal bloques de colores fondo negro.pdf
 
Movimiento Moderno en Venezuela Arquitectura
Movimiento Moderno en Venezuela ArquitecturaMovimiento Moderno en Venezuela Arquitectura
Movimiento Moderno en Venezuela Arquitectura
 
Figuras bidimensionales en el diseño.pptx
Figuras bidimensionales en el diseño.pptxFiguras bidimensionales en el diseño.pptx
Figuras bidimensionales en el diseño.pptx
 

Introducción a NVU

  • 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.
  • 18. En el menú Tabla, podremos:
  • 19.
  • 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 #.