Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ UNIVERSIDAD NACIONAL EXPERIMENTAL FRANCISCO DE MIRANDA VICE-RECTORADO ACADMICO PROGRAMA: EDUCACIN

MENCIN: INFORMTICA UNIDAD CURRICULAR: SISTEMAS DE INFORMACIN I

Curso de Diseo Web Tema 1: Conceptos Bsicos

1.- Creacin de un Sitio

Organizacin de directorios: al momento de crear un sitio Web, la organizacin de las carpetas que ste contendr resulta fundamental para el correcto funcionamiento del mismo, puesto que, aun cuando la mayora de los editores HTML guardan cierta semejanza con editores de texto (Word, etc.), ambos presentan una considerable diferencia al momento de administrar los recursos anexos al texto. En este sentido, los archivos de imgenes son un claro ejemplo de cuando un editor inserta y cuando vincula.

Un editor de texto inserta la imagen en el documento por lo que no es necesario almacenar todos los archivos de imgenes junto con el documento. En cambio, un editor de HTML vincula la imagen al documento por lo que, si la imagen es borrada, cambiada de lugar o de nombre, no se podr observar en la pgina hasta que su enlace sea actualizado. Es por esto que, durante el proceso de montaje de un contenido, es importante que almacene cada recurso en carpetas de fcil identificacin, y que stas acompaen a los documentos HTML al momento de subirlos a un servidor o de quemarlos en un CD

Nocin de sitio: un sitio Web est concebido como un conjunto de pginas Web accesibles a travs de Internet, convenientemente enlazadas, con una finalidad concreta. (es.wikipedia.org). Esto significa, en trminos simples, que un sitio estar representado por un conjunto de carpetas que guardarn tanto documentos como recursos, y en donde existir un directorio principal (o raz) que servir como referencia a todos los vnculos y enlaces que contengan las diferentes pginas.

Cabe sealar que la ruta de un enlace o vnculo depender de la ubicacin del documento en cuestin, es decir, que la estructura de carpetas que convierten en niveles en donde la carpeta principal es la raz y cada nueva sub-carpeta es un nuevo nivel. Veamos el siguiente ejemplo:

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ En este ejemplo se observan 4 carpetas (las subrayadas y sin extensin) y 8 archivos (4 pginas Web, 2 animaciones y 2 imgenes). Si por ejemplo Pero deseamos si el insertar la de imagen destino Fondo.jpg fuera el en el Index.html, Cuerpo.html, la la ruta ruta sera: sera:

/Imgenes/Fondo.jpg. ../Imgenes/Fondo.jpg.

documento

archivo

Ntese que se agregan dos punto al inicio indicando que para ingresar a la carpeta donde esta la imagen, primero se debe salir de la carpeta Pgina. Finalmente, si se desea crear un enlace desde Men.html hasta Tope.html, la ruta sera: Tope.html. Aqu se omiten cualquier referencia a carpetas por estar ambos archivos en el mismo directorio.

Recomendaciones: como ya hemos dicho antes, el correcto manejo de sitios le permitir mantener de forma organizada todos los documentos y archivos que estarn disponibles en su pgina, facilitando la publicacin y/o actualizacin del mismo. Por tal motivo, presentamos a continuacin una serie de recomendaciones de sern de utilidad al momento de crear y administrar su sitio Web:

Para las carpetas:

Defina la estructura del sitio antes de comenzar la creacin de las pginas Web. Coloque nombres sencillos pero representativos del contenido de estas (Ej: imgenes = img). Procure no usar acentos, letras maysculas, caracteres especiales, ni espacios (Ej: Unidad I, el corazn = uni1_corazon). Recuerde que al cambiar el nombre o ubicacin de una carpeta, tambin deber hacerlo en cada enlace donde est involucrada. Asgnele a la carpeta raz un nombre representativo del sitio (Ej: UC Calculo Numrico = calculo_num).

Para los archivos y documentos:

Agrupe los archivos segn su tipo (Ej: imgenes, animaciones, paginas Web) Defina la nomenclatura de los archivos antes de comenzar la creacin de las pginas Web (Ej: Tema 1 = tema1.html o t1.html o tema_1.html). Coloque nombres sencillos pero representativos del contenido de estos (Ej: animacin del corazn = t1_corazon.swf o tema1_a1.swf o a1t1.swf). Procure no usar acentos, letras maysculas, caracteres especiales, ni espacios (Ej: Tema I, el corazn = t1_corazon.html). Recuerde que al cambiar el nombre o ubicacin de un archivo, tambin deber hacerlo en cada enlace donde est involucrado.

Actividad N1 Crea un sitio web usando las recomendaciones vistas en clase. Este sitio deber comprender al menos cuatro directorios: img -imgenes-, html documentos Web-, swf animaciones-, css hojas de estilo-.

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ UNIVERSIDAD NACIONAL EXPERIMENTAL FRANCISCO DE MIRANDA VICE-RECTORADO ACADMICO PROGRAMA: EDUCACIN MENCIN: INFORMTICA UNIDAD CURRICULAR: SISTEMAS DE INFORMACIN I

Curso de Diseo Web Tema 2: Documentos HTML

2.- Documentos HTML (tomado de Manual de HTML, http://www.webestilo.com/)

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la construccin de pginas web. Es usado para describir la estructura y el contenido en forma de texto, as como para complementar el texto con objetos tales como imgenes.

HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML tambin puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.

Estructura bsica: Bsicamente, los documentos escritos en HTML constan del texto mismo del documento y las tags (etiqueta) que pueden llevar atributos. Esto llevado a la prctica, vendra a ser:

<tag> texto afectado </tag>

La tag del principio activa la orden y la ltima (que ser la del principio precedida del signo /) la desactiva. Tres son las tags que describen la estructura general de un documento y dan una informacin sencilla sobre l. Estas tags no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML.

<HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje. <HEAD>: Especifica el prlogo del resto del archivo. Son pocas las tags que van dentro de ella, destacando la del titulo <TITLE> que ser utilizado por los marcadores del navegador e identificar el contenido de la pgina. Solo puede haber un ttulo por documento, preferiblemente corto aunque significativo, y no caben otras tags dentro de l. En head no hay que colocar nada del texto del documento.

<BODY>: Encierra el resto del documento, el contenido.

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ Ejemplo:

Curiosidades: HTM o HTML? Cuando grabas un archivo HTML, puedes hacerlo con la extensin .htm o .html. En la actualidad, no hay problema que extensin se utilice. Los conflictos sucedan en el pasado, cuando los programas no podan identificar bien extensiones de ms de 3 letras.

Actividad N2 Cree un documento Web usando el bloc de notas. Este deber comprender un ttulo e informacin introductoria a su pgina personal.

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ UNIVERSIDAD NACIONAL EXPERIMENTAL FRANCISCO DE MIRANDA VICE-RECTORADO ACADMICO PROGRAMA: EDUCACIN MENCIN: INFORMTICA UNIDAD CURRICULAR: SISTEMAS DE INFORMACIN I Curso de Diseo Web Tema 3: Etiquetas Generales

3.-Etiquetas Generales

<H1>, <H2>, <H3>...: Titulares. Sirven para dividir el texto en secciones. Se pueden definir seis niveles de titulares, el texto que deseamos que sea un titular se pone entre las tags <H1> Titular </H1>. Se definen mediante las tags <H1>.....</H1> hasta <H6>.....</H6>

<P>: Prrafos. En principio, sin entrar en detalles de alineacin u otras caractersticas, digamos que se definen por las tags <P>.....<P>. Esta tag, en un principio, se dise para saltar de prrafo por lo que puede ir sola "<P>" al final de un texto indicando que a continuacin se quiere una lnea en blanco aunque le recomendamos que se acostumbre a utilizarla abrindola y cerrndola.

<!-- -->: Comentarios. Son directivas que nunca se mostrarn a travs del navegador y que le servirn para recordatorios en futuras revisiones del documento.

<IMG>: Incluir imgenes en una presentacin Web es muy sencillo, solo debe de tener en cuenta que las imgenes tienen que tener los formatos GIF, JPEG o PNG. Las imgenes en lnea, se especifican a partir de la tag <img> que no tiene una tag correspondiente de cierre pero que puede acompaarse de los siguientes atributos:

src= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar. Align= Permite controlar la alineacin de una imagen con respecto a una lnea de texto adyacente o a otras imgenes en esa lnea. Los tres valores posibles son left, right, top, middle y bottom.

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________

Alt= Es la alternativa que se estableci cuando todava existan visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratn por encima.

Ejemplo:

WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar. HEIGHT= Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen. BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.

<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un beb">

<HR>: Lneas divisorias: Se crean con la tag <hr> que no tiene tag de cierre ni lleva texto asociado. Se puede especificar el ancho de la lnea con el siguiente atributo: <hr width="80%">.

<BR>: Saltos de lnea: La tag <br> inserta un salto de lnea donde se coloque. Puede colocar tantas como desee y se insertar un salto de lnea por cada una de ellas.

<span>: La etiqueta <span> permite agrupar varios elementos en lnea seguidos dentro de un mismo bloque (por ejemplo, varias palabras seguidas en un prrafo), para despus darles formato con la hoja de estilo.

Ejemplo:

<span style="font:Verdana, Arial, Helvetica, sans-serif; color:blue">hola mundo</span>

Formatear el texto <font>: Las propiedades del texto pueden modificarse a travs de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta:

Atributo face color size

Significado fuente color del texto tamao del texto

Posibles valores nombre de la fuente, o fuentes nmero hexadecimal o texto predefinido valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamao por defecto, aadiendo + o - delante del valor

Por ejemplo, para insertar el texto: Bienvenidos

Habra

que

escribir:

<font

color="#993366"

size="4"

face="Comic

Sans

MS,

Arial,

MS

Sans

Serif">Bienvenidos</font>

Actividad N3 Disee un documento Web con su informacin personal. Incluya diferentes tamaos y estilos de fuente. Agregue adems su foto y algunas imgenes.

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ UNIVERSIDAD NACIONAL EXPERIMENTAL FRANCISCO DE MIRANDA VICE-RECTORADO ACADMICO PROGRAMA: EDUCACIN MENCIN: INFORMTICA UNIDAD CURRICULAR: SISTEMAS DE INFORMACIN I

Curso de Diseo Web Tema 4: Otras Etiquetas

4.-Otras Etiquetas

Listas (<UL>, <OL>, <LI>): las listas numeradas u ordenadas se engloban por las tags <ol>.....</ol> y cada elemento de la lista estar encabezado por la tag <li> que puede o no llevar la tag de cierre </li>. Es conveniente que cada elemento de la lista est en una lnea nueva aunque todo seguido consiga en la presentacin el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones. Las listas con vietas o sin orden se engloban por las tags <ul>.....</ul> y cada elemento de la lista, tambin estar encabezado por la tag <li>. El resultado es que el navegador inserta vietas (marcadores) delante de cada elemento.

Ejemplo:

Estilos Fsicos (<B>, <U>, <I>): estos modifican la presentacin real del texto.

<b>.....</b>: Pone el texto en negrita. <i>.....</i>: Pone el texto en cursiva. <u>.....</u>: Subraya el texto afectado.

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ Tablas (<TABLE>, <TR>, <TD>): Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentacin en diferentes filas y columnas de modo que podamos resumir grandes cantidades de informacin de una manera que puede representarse rpida y fcilmente. El contenido de una tabla lo debemos desarrollar entre las tags <table>.....</table>. Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las columnas se calcularn automticamente segn las celdas que hay en cada fila. Cada fila de la tabla se indica mediante las tags <tr>.....</tr>. Las tags <td> con sus correspondientes tags de cierre, indican las columnas individuales dentro de cada fila.

Ejemplo:

Enlaces (<A>): Para generar un enlace a otro documento necesitamos el nombre de un archivo (o su direccin URL) y el texto que servir de punto de activacin del otro documento. Este segundo elemento ser el que veamos en pantalla y que se servir del primero para saltar de documento.

Los enlaces se generan mediante la tag <A>.....</A> y, a diferencia de los vistos anteriormente, llevar siempre dentro de la tag un atributo (<A HREF="">). <A HREF="URL">.....</A> es el ms habitual de los atributos y sirve para saltar entre diferentes URLs:

o o

Saltar en una presentacin del archivo 1 al archivo 2: En el archivo 1 incluiremos la directiva <A HREF="archivo2.html">Siguiente pgina</a> Saltar de nuestra presentacin a otra presentacin web llamada www.bienvenidos.es:

<A HREF="http://www.bienvenidos.es">Visita esta pgina</A>

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ Ejemplo:

Actividad N4 (parte A) Disee un documento Web con la informacin correspondiente a su lugar de nacimiento. Incluya listados y organice los datos en tablas (visibles o no). Anexe al final del documento algunos enlaces de inters sobre la temtica. Adems, enlace todos los documentos creados hasta ahora. Navegacin Interna

Actividad N4 (parte B) Disee un documento Web con informacin de su profesin o lugar de trabajo. Incluya un men interno que permita la navegabilidad dentro del mismo documento.

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ UNIVERSIDAD NACIONAL EXPERIMENTAL FRANCISCO DE MIRANDA VICE-RECTORADO ACADMICO PROGRAMA: EDUCACIN MENCIN: INFORMTICA UNIDAD CURRICULAR: SISTEMAS DE INFORMACIN I Curso de Diseo Web Tema 5: Formularios

5.-Formularios <FORM>: La Web se ha convertido en una poderosa arma para las empresas que se dedican a realizar encuestas y, los formularios han sido una de las herramientas que han ayudado a este auge. Los formularios nos van a permitir, desde dentro de una presentacin web, solicitar informacin al visitante. Estos formularios estarn compuestos por tantos campos como informaciones queramos obtener. Una vez introducidos los valores en estos campos sern enviados a una URL donde se procesar toda esta informacin. Un formulario sigue siendo lenguaje html y por lo tanto necesita de unas tags que lo especifiquen. La declaracin de formulario queda recogida por las tags <form>.....</form> y dentro de ellas se recogern todas las variables de entrada. A la tag de apertura <form> le acompaarn estos atributos:

action="" Entre comillas se indica el programa que va a tratar las variables enviadas con el formulario, un guin CGI o la URL mailto. Method="" Indica el mtodo de transferencia de las variables. Post, si se enva a travs del STDIO. Get, si se enva a travs de la URL.

Ejemplo 1 Vista Cdigo:

Ejemplo 1 Vista Diseo:

<INPUT>: La tag <input> define la introduccin de variables. Junto a esta tag encontraremos los siguientes atributos: ______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________

Name="" Indicar el nombre que se asigna a un determinado campo. type="" Indicar el tipo de variable a introducir.

text Indica que el campo a introducir ser un texto. Sus atributos: maxlenght="" Seguido de un valor que limitar el nmero mximo de carcteres a introducir en ese campo. size="" Seguido de un valor que limitar el numero de carcteres a mostrar en pantalla. value="" Indica que no hay valor inicial del campo.

o o o o

radio: Campo de seleccin simple. checkbox: Campo de seleccin mltiple password: Campo para contrasea (ocultos) submit: Botn

Ejemplo 2 Vista Cdigo:

Ejemplo 2 Vista Diseo:

Botones: Se definen mediante la tag <input> a la que le acompaan los atributos: ______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________

type="" Seguido de submit para enviar los datos del formulario y seguido de reset para borrar los datos que se han introducido. Value="" Indica el texto que incorporaran los botones. Normalmente, enviar y borrar.

Ejemplo 3 Vista Cdigo:

Ejemplo 3 Vista Diseo:

Actividad N5 Disee un formulario para el registro de los visitantes a su pgina, Incluyendo los datos personales ms comunes.

UNIVERSIDAD NACIONAL EXPERIMENTAL ______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ FRANCISCO DE MIRANDA VICE-RECTORADO ACADMICO PROGRAMA: EDUCACIN MENCIN: INFORMTICA UNIDAD CURRICULAR: SISTEMAS DE INFORMACIN I

Curso de Diseo Web Tema 6: El Iframe

6.- Iframe (por inline frame o marco incorporado en ingls) es un elemento HTML que permite insertar o incrustar un documento HTML dentro de un documento HTML principal. La informacin insertada en el iframe se especifica por medio del atributo src de este elemento. Slo los navegadores capaces de mostrar o incluir iframes los aceptarn y reconocern.

Actividad N6 Disee un archivo principal que contenga un Iframe, en el cual se cargarn todas las pginas diseadas hasta ahora, usando un men con hipervnculos

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ UNIVERSIDAD NACIONAL EXPERIMENTAL FRANCISCO DE MIRANDA VICE-RECTORADO ACADMICO PROGRAMA: EDUCACIN MENCIN: INFORMTICA UNIDAD CURRICULAR: SISTEMAS DE INFORMACIN I

Curso de Diseo Web Tema 7: Editor NVU

Introduccin: Nvu es un editor HTML que permite crear y editar pginas web. Nvu tiene una interfaz WYSIWYG (lo que se ve es lo que se obtiene). Dicha interfaz est diseada para ser amigable al usuario, sencilla y potente, y el usuario no necesita tener conocimientos de HTML, ya que, la mayora de las funciones bsicas HTML estn disponibles desde las barras de herramientas y mens. Este proyecto es 100% cdigo abierto y est patrocinado por Linspire. La versin documentada de Nvu es la 1.0.

Caractersticas.

Editor WYSIWYG, que hace que la creacin Web sea tan fcil como escribir una carta con un procesador de textos. Gestin integrada de archivos va FTP. Simplemente conectar con el sitio Web y navegar por los archivos, editando las pginas Web al vuelo, directamente desde el sitio Web. Creacin de cdigo HTML fiable, que funcionar en los navegadores Web ms populares actualmente. Permite cambiar rpidamente entre distintos modos de visualizacin mediante solapas, como el modo de edicin WYSIWYG y HTML. Edicin con solapas, lo cual permite trabajar fcilmente con mltiples pginas. Potente soporte para marcos, formularios, tablas y plantillas.

La barra de men

Desde la barra de men, se pueden realizar las acciones ms comunes.

1.

Archivo: opciones para trabajar con archivos. Permite crear un archivo nuevo en blanco o basado en una plantilla. Abrir una pgina almacenada en local (Abrir archivo), o un sito Web (Abrir direccin). Guardar la pgina con las modificaciones, y con una codificacin de caracteres distinta, por ejemplo, guardar en UTF-8 (Save As Charset). Tambin permite publicar la pgina en el sitio Web en el que se est trabajando, as como imprimir la pgina.

2.

Editar: opciones tpicas de Deshacer/Rehacer, Cortar, Copiar y Pegar, Seleccionar todo, Buscar... Tambin existe la opcin de pegar sin formato, que pega el texto copiado como texto plano sin ningn tipo de estilo. La opcin Pegar pega el formato del texto seleccionado. Otra opcin es la Revisin ortogrfica, para revisar la ortografa del texto.

Otra opcin del men es Publicar como..., donde se puede configurar la conexin al sitio Web donde se va a colgar la pgina. Nvu est pensado para trabajar directamente sobre el sitio Web en Internet, aunque tambin puede trabajar con archivos en local.

3.

Ver: muestra y/o oculta las distintas barras de herramientas, reglas, as como el panel izquierdo Administrador de sitios NVU. Desde aqu se pueden personalizar las barras de herramientas.

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ El men Ver permite cambiar el modo de visualizacin de la pgina. Una pgina puede verse de cuatro maneras o vistas:

a.

Modo de edicin normal: la vista habitual de trabajo. Se ve la apariencia final de la pgina, pero las zonas y los objetos estn recuadrados para facilitar su manipulacin. Los objetos dinmicos no se ven.

b.

Etiquetas HTML: en esta vista, se ve el texto de la pgina, con el formato normal, y adems, en amarillo, se muestran las etiquetas HTML.

c. d.

Cdigo fuente HTML: el cdigo fuente HTML en texto plano. Vista preliminar: vista previa de la pgina, prcticamente igual a como se ver en el navegador. Desde esta vista tambin puede editarse el texto y el formato de los objetos.

En todas las vistas puede editarse la pgina, modificando el texto y el formato, pudiendo eliminar y aadir objetos.

4.

Insertar: permite insertar en la pgina diversos elementos, como imgenes, tablas, hipervnculos, formularios, etc. Segn el elemento que se seleccione se muestra una caja de dilogo donde indicar todas las propiedades del elemento.

5.

Formato: permite establecer las caractersticas del texto: tipo de fuente, tamao, estilo y color del texto, alineacin, etc, as como el formato de prrafos y listas.

Tambin pueden establecerse las propiedades de celda de una tabla, as como las propiedades de la pgina, como color e imagen de fondo, ttulo, etc.

6.

Tabla: incluye todas las opciones de manipulacin de tablas, permitiendo seleccionar, aadir y quitar tablas, filas y columnas, as como establecer las propiedades a nivel de celda y de tabla.

7.

Herramientas: diversas herramientas como un limpiador de cdigo HTML y un validador de HTML. Tambin incluye un completo editor de pginas de estilos CSS, as como un gestor de contraseas y de descargas. Otra opcin interesante es la de desarrollo Web que incluye diversas herramientas para depuracin de cdigo JavaScript.

En este men tambin est la opcin Preferencias, que permite establecer las preferencias de diversos aspectos de la aplicacin, as como aadirle complementos y extensiones, etc.

8.

Ayuda: incluye un acceso a la web y a las FAQ de Nvu, as como el tpico Acerca de.... Tambin est la opcin del Truco de da que muestra trucos interesantes para sacar todo el partido al programa.

La Barra de Herramientas

Barra de herramientas de composicin: La barra de herramientas de composicin contiene botones para la mayora de operaciones, tal y como se puede ver en la figura siguiente:

Barra de herramientas de formato: La barra de herramientas de formato es muy utilizada en la edicin de pginas Web con Nvu. Con esta barra se puede aplicar formato al prrafo, escoger un tipo de letra, cambiar los colores de fondo y

______________________________________________________________________________________ Sistemas de Informacin I

Departamento de Informtica y Tecnologa Educativa - DITE-UNEFM _______________________________________________________________________________________ primer plano, etc. Tambin es posible crear listas tanto ordenadas como no ordenadas, justificacin de bloques de texto, tal y como se puede ver en la figura siguiente:

Barra de herramientas de solapas de navegacin: La barra de herramientas de solapas de navegacin permite la edicin simultnea de mltiples documentos utilizando diferentes solapas, una para cada documento. El indicador visual seala qu pginas han sido modificadas y no guardadas.

Barra de herramientas de modo edicin: La barra de herramientas de modo edicin indica el modo de vista con el que se presenta el documento actual. Estn disponibles las vistas: Normal, etiquetas HTML, fuente HTML y modo vista previa. Cambiar de modo de edicin es tan sencillo como pulsar en la solapa correspondiente.

Barra de herramientas de estado: La barra de herramientas de estado muestra la posicin del cursor con respecto a la jerarqua de la etiqueta HTML. Se puede editar o asignar las propiedades de una etiqueta particular en la barra de estado pulsando sobre ella y con el botn derecho del ratn seleccionar la opcin a aplicar sobre ella.

Modos de edicin: A la hora de editar una pgina Web, hay varios modos de editar la pgina:

Modo de edicin normal: en este modo se muestra la pgina como un WYSIWYG (lo que ves es lo que obtienes), permitiendo una edicin normal, insertando texto, imgenes, tablas, etc. Se ve la apariencia final de la pgina, pero las zonas y los objetos estn recuadrados para facilitar su manipulacin. Los objetos dinmicos no se ven.

Etiquetas HTML: en esta vista, se muestran las etiquetas del lenguaje HTML en fondo amarillo, viendo la estructura de la pgina de una manera visual. Cdigo fuente HTML: en esta vista se puede editar directamente el cdigo HTML de la pgina en texto plano. Vista previa: vista previa de la pgina prcticamente igual a como se ver en el navegador. Desde esta vista tambin puede editarse el texto y el formato de los objetos.

En cualquiera de estos modos se puede editar el contenido de la pgina. Mediante las solapas ubicadas en la zona inferior, se puede cambiar fcilmente de un modo a otro.

Departamento de Informtica y Tecnologa Educativa DITE-UNEFM ______________________________________________________________________________________ Sistemas de Informacin I