Sunteți pe pagina 1din 63

M A N U A L PA R A L A

UTILIZANDO

construccin de sitios web


NETSCAPE COMPOSER 4.X

MANUAL DE ESTUDIANTES

ITrain es una coleccin de materiales de capacitacin en el uso de Internet para capacitadores y estudiantes. Los materiales ofrecen un acercamiento interactivo, que involucra a los estudiantes en el proceso de aprendizaje y apoya a los instructores en la planificacin y personalizacin de los cursos. Los manuales del programa ITrain contienen materiales tanto para autodidactas como para tutores. Los materiales han sido desarrollados por ITrain Collective, un grupo multicultural de capacitadores en Internet con experiencias de trabajo alrededor del mundo. El objetivo ha sido producir un grupo balanceado de manuales de capacitacin, que sirva tanto para usuarios nuevos de la Internet como de nivel intermedio, al igual que para instructores nuevos y experimentados.

Acceso es una organizacin no gubernamental de desarrollo, con sede en Costa Rica y programas activos en Centroamrica. Ofrecemos asistencia tcnica, capacitacin y apoyo para el desarrollo institucional a organizaciones locales, nacionales e internacionales que comparten nuestro compromiso con un desarrollo equitativo, participativo y sostenible. Acceso ofrece asistencia en planificacin institucional y programtica, desarrollo de juntas directivas, usos bsicos y estratgicos de la Internet, diseo y desarrollo de presencias institucionales en el World Wide Web, diseo de estrategias de comunicacin y en otras reas afines.

1999, ITrain Group Publicacin de: ITrain Group unganisha.idrc.ca/itrain Fundacin Acceso www.acceso.or.cr Edicin a cargo de: Nora Galeano, Fundacin Acceso Textos: Lilliana Sancho Edicin grfica: Fernando Francia

2 construccin de sitios web


MANUAL DE ESTUDIANTES

CONTENIDO
Presentacin 1. Introduccin a la construccin de sitios Web
1.1 Qu es el World Wide Web? 1.2 El modelo Cliente/Servidor 1.3 Pginas web 1.4 El lenguaje HTML 1.5 Sitios Web 1.6 El URL (Uniform Resource Locator o Localizador Uniforme de Recursos)

5 6
6 6 8 9 10 11

2. Los programas para hacer pginas y navegar por la web


2.1 Programas editores de pginas Web 2.2 Programas navegadores de la Web 2.3 Uso de editores de texto y hojas electrnicas para hacer pginas Web 2.4 El paquete Netscape como instrumento generador y visualizador de pginas Web 2.5 Funcionamiento general del Netscape Composer

12
12 13 13 14 15

3. Construccin de una pgina con Netscape Composer


3.1 Escribiendo texto 3.2 Guardando la pgina 3.3 Viendo la pgina con el navegador

16
16 17 18

4. Edicin de texto
4.1 La primera pgina 4.2 Cmo alinear el texto? 4.3 Cmo cambiar el tipo de letra? 4.4 Cmo cambiar el tamao de la letra? 4.5 Cmo cambiar el estilo de la letra? 4.6 Cmo cambiar el color de la letra? 4.7 Cmo agregar vietas y listas numeradas? 4.8 Cmo cambiar el estilo de las vietas y de la numeracin? 4.9 Cmo establecer ttulos y encabezados?

21
21 23 24 25 26 27 27 29 30

5. Inclusin de elementos grficos


5.1 Insertando lneas de divisin 5.2 Insertando una imagen 5.3 Algunas opciones del Netscape Composer al incorporar imgenes en pginas Web 5.3.1 Modificacin de la imagen 5.3.2 Colocar la imagen como fondo 5.3.3 Alineamiento de las imgenes con respecto al texto 5.3.4 Cambio del tamao de la imagen 5.3.5 Hacer un marco alrededor de la imagen 5.3.6 Despliegue de imgenes

32
32 33 34 34 34 34 34 34 35

6. Creacin de enlaces para la navegacin


6.1 Qu es un enlace? 6.2 Cmo establecer un enlace? 6.3 Cmo eliminar un enlace? 6.4 Cmo establecer enlaces dentro de una misma pgina?

36
36 38 39 40

3 construccin de sitios web


MANUAL DE ESTUDIANTES

7. Elaboracin de tablas
7.1 Qu es una tabla? 7.2 Cmo insertar una tabla con Netscape Composer? 7.3 Cmo agregar una fila, una columna o una sola celda? 7.4 Cmo borrar una fila, una columna, una sola celda o la tabla completa? 7.5 Cmo cambiar la apariencia de una tabla?

43
43 43 46 47 48

8. Impresin con Netscape Composer


8.1 Visualizacin previa de la pgina 8.2 Imprimiendo la pgina

50
50 51

9. Planificacin de un sitio Web


9.1 Introduccin 9.2 Pasos para la planificacin y produccin de un sitio Web 9.2.1 Definir el objetivo del sitio 9.2.2 Identificar la o las diferentes audiencias o poblaciones meta 9.2.3 Definir el contenido y la estructura del sitio 9.2.4 Estilo grfico de presentacin 9.2.5 Construir las pginas y el sitio 9.2.6 Probar y evaluar el sitio 9.2.7 Registrar un dominio para ubicar el sitio 9.2.8 Instalar el sitio Web en el servidor 9.2.9 Medir el impacto del sitio 9.2.10 Actualizar continuamente el sitio

52
52 53 53 53 53 55 56 57 57 57 58 59

Evaluacin para uso de las personas participantes

60

4 construccin de sitios web


MANUAL DE ESTUDIANTES

P R E S E N TA C I N

Este manual se ha elaborado con el propsito de facilitar la construccin de sitios Web, utilizando como herramienta Netscape Composer 4.x. Forma parte de una serie de materiales de capacitacin en Internet desarrollados para el ITrain Group, con el soporte financiero del Centro Internacional de Investigacin en Desarrollo (International Development Research Centre, IDRC). Es un manual bsico y se puede obtener en forma gratuita de la direccin
http://unganisha.idrc.ca/itrain/.

1. Introduccin a la construccin de sitios Web 2. Los programas para hacer pginas y navegar por la web 3. Construccin de una pgina con Netscape Composer 4. Edicin de texto 5. Inclusin de elementos grficos 6. Creacin de enlaces para la navegacin 7. Elaboracin de tablas 8. Impresin con Netscape Composer 9. Planificacin de un sitio Web Evaluacin para uso de las personas participantes

Se espera que este material sea utilizado por capacitadores(as) de herramientas de Internet as como por usuarios(as) de los pases en desarrollo. Para su facilidad de uso ha sido organizado en nueve secciones.

Este material se distribuye bajo la licencia OpenContent descrita en la direccin: http://www.opencontent.org.

5 construccin de sitios web


MANUAL DE ESTUDIANTES

CAPTULO 1

Introduccin a la construccin de sitios web

CONTENIDO
1.1 Qu es la World Wide Web? 1.2 El modelo cliente/servidor 1.3 Pginas web 1.4 El lenguaje HTML 1.5 Sitios web 1.6 El URL (Uniform Resource Locator o Localizador Uniforme de Recursos)

1.1 Qu es la World Wide Web?


La World Wide Web (WWW) se puede entender como una gran coleccin de documentos o archivos, llamados pginas, almacenadas en computadoras alrededor del mundo, en la red Internet. Al tener acceso a la Internet, se tiene acceso a toda esa informacin y, con slo hacer click, se puede navegar a travs de una gran cantidad de informacin, saltando de pgina en pgina de la Web.

1.2 El modelo Cliente/Servidor


Para comprender el funcionamiento de la Web es necesario entender la relacin bsica entre clientes y servidores que se lleva a cabo en ella. Un servidor es una computadora, conectada a la Internet las 24 horas del da, que contiene y distribuye informacin. Un cliente es un programa en su computadora que solicita, procesa y despliega esa informacin. En la Web, los servidores almacenan y facilitan pginas Web y los clientes despliegan las pginas en su computadora. De esta manera, cuando en la Web usted hace click sobre un botn o sobre un texto para, por ejemplo, ver la informacin de una universidad de su inters, su computadora tiene el papel de un cliente que le solicita al servidor Web de la universidad que le transfiera la informacin que ha publicado en la Web. Una vez que la comunicacin haya sido establecida, por medio de las conexiones que ofrece la Internet, el servidor Web de la universidad enva una copia de sus pginas a su computadora para que sta las despliegue.
Servidor

Cliente Solicita Responde a solicitud Figura 1.4 Modelo Cliente-Servidor

6 construccin de sitios web


MANUAL DE ESTUDIANTES

Para ampliar este concepto tomemos como ejemplo el funcionamiento de la televisin. Bajo esta perspectiva, cul sera el servidor y cul el cliente? Como ya se habr imaginado, los canales de televisin son los servidores y su televisor es el cliente. Los canales siempre tienen su seal de transmisin disponible y cuando usted selecciona el canal, ste se conecta y enva la imagen a su aparato de televisin. Adems, muchas personas pueden estar viendo el mismo canal a la vez. Sin embargo, existen diferencias entre el servidor Web y la televisin como, por ejemplo, que en la Web la persona usuaria puede, entre otras cosas, interactuar y publicar directamente informacin en los servidores y que si se desconecta de la Internet, la pgina que tiene en pantalla no se apagar. Cabe mencionar, con este ltimo ejemplo, que el canal enva la misma seal a todos los televisores, pero la forma en que se vea el programa de televisin depende de su televisor. Asimismo, los servidores Web envan las pginas a su computadora, pero la forma y la calidad de despliegue depende de su computadora y de los programas que usted utilice.

Figura 1.1 Pgina de entrada al Web de la empresa Netscape

7 construccin de sitios web


MANUAL DE ESTUDIANTES

Figura 1.2 Ejemplo de hipertexto Los tigres son felinos que requieren grandes extensiones de terreno para su subsistencia. Son mamferos carnvoros.

Se denomina felino a ...Los gatos, tigres, leones y leopardos ...

El len
Formas de alimentacin:
- Carnvoros - Herbvoros Es un carnvoro conocido como el rey de la selva ... Su pariente el tigre ...

1.3 Pginas Web


Las pginas de la Web son archivos de hipertexto. Estos archivos contienen texto destacado o subrayado que asocia informacin de diferentes pginas de la Web. O sea que estos archivos, o pginas Web, estn vinculados a travs de enlaces, llamados de hipertexto, como en una red. Esto permite navegar de una pgina a otra, de manera tal que la lectura de un documento no debe hacerse, necesariamente, en forma secuencial (ver la figura 1.2). El concepto de hipertexto se ampla al de hiperdocumento cuando, adems de texto, las pginas contienen otros recursos audiovisuales, como son imgenes, sonido o vdeo. El propsito de este tipo de organizacin es ofrecer flexibilidad de acceso a las pginas, para que cada persona pueda realizar la lectura de acuerdo con sus intereses. Esta organizacin es, precisamente, la que posibilita enlazar informacin de diferente ndole para formar la gran telaraa mundial que es hoy la Web. Las pginas en la Web estn escritas en un lenguaje denominado HTML (Hypertext Markup Language), el cual se describe a continuacin.

8 construccin de sitios web


MANUAL DE ESTUDIANTES

Figura 1.3 Ejemplo de pgina Web

1.4 El lenguaje HTML


HTML es un lenguaje de programacin que sirve para crear hiperdocumentos publicables en la Web, o sea, pginas Web, con enlaces activos a recursos de informacin alrededor del mundo. Este lenguaje consiste en un conjunto de normas utilizadas para dar formato a un documento. El HTML le dice a cada programa navegador (Browser) qu es cada elemento de la pgina, para que l pueda interpretarlo en un formato apropiado. En la figura 1.3 se puede observar, a manera de ejemplo, una pgina Web sencilla y luego en la figura 1.4 el archivo HTML correspondiente. Como puede observar, el texto est formado por etiquetas encerradas entre parntesis triangulados (< >), los cuales indican el formato del texto. Toda pgina inicia con la etiqueta <HTML> y termina con la etiqueta </HTML>. Las etiquetas <HEAD> y </HEAD> encierran encabezados de informacin de la pgina, como por ejemplo su ttulo. Las etiquetas <BODY> y </BODY> encierran el contenido de la pgina, el cual podr ser visualizado con un navegador. <CENTER> y </CENTER> indican que el texto que aparece en la lnea va a aparecer centrado en la pgina. &aacute; es el cdigo HTML para acentuar vocales, en este caso la a. <FONT SIZE=+1> y </FONT> indican caractersticas del tamao del texto. <DIV ALIGN=right> indica que el texto quedar alineado a la derecha. <P> indica salto de prrafo.

Figura 1.4 Ejemplo del contenido de un archivo HTML

<HTML> <HEAD> <TITLE>Mi primera p&aacute;gina</TITLE> </HEAD> <BODY> <p> <CENTER><FONT SIZE=+1>Esta es mi primera p&aacute;gina !</FONT> </CENTER> <DIV ALIGN=right>Vilma Picapiedra.</DIV> </BODY> </HTML>

9 construccin de sitios web


MANUAL DE ESTUDIANTES

Adems de stas, HTML incluye, entre otras, etiquetas para: Colocar numeracin y vietas Insertar tablas Insertar elementos grficos Indicar el tipo y tamao de la letra Colocar casillas para ingreso de texto Hacer enlaces entre pginas, etc. Cuando la World Wide Web se inici, quienes queran hacer pginas Web deban conocer las instrucciones HTML y escribirlas directamente en un archivo de texto. Sin embargo, en la actualidad existen editores de pginas Web, cuyo funcionamiento se asemeja al de los procesadores de palabras. Es decir, las personas que hoy desarrollan pginas Web, no requieren escribir directamente el cdigo HTML, pues el editor genera automticamente el cdigo correspondiente. En este momento, existen en el mercado muchos editores para pginas Web, inclusive algunos procesadores de palabras ya incluyen el formato html entre las opciones para guardar los documentos. Este manual describe el funcionamiento del editor Netscape Composer, el cual ha sido seleccionado debido, principalmente, a su simplicidad de uso y a que puede ser obtenido, gratuitamente, en la Web (http://www.netscape.com).

1.5 Sitios Web


Se denomina sitio Web al conjunto de pginas Web organizadas bajo temas u objetivos comunes y ubicadas, fsicamente, en un mismo dominio o servidor Web. Para que un sitio Web pueda ser accesible en la Internet, debe estar almacenado en un servidor Web.

10 construccin de sitios web


MANUAL DE ESTUDIANTES

1.6 El URL (Uniform Resource Locator o Localizador Uniforme de Recursos)


Cada sitio o pgina Web tiene una direccin nica que lo identifica para que pueda ser localizado dentro de la gran red Internet. A esta direccin se le conoce como Localizador Uniforme de Recursos (Uniform Resource Locator o URL). Se puede localizar cualquier pgina Web conociendo su URL. Observe en la figura 1.1 la direccin http://home.netscape.com que aparece en la parte superior de la pantalla. ste es el URL del sitio Web de la empresa Netscape. Con el siguiente ejemplo analizaremos cmo est compuesta una direccin URL: http://www.idrc.ca/unganisha/index.html Los diferentes elementos que componen el URL son: http: es el protocolo de comunicacin estndar que se usa en Internet para transferir y leer las pginas Web o archivos de hipertexto entre computadoras. Significa HyperText Transfer Protocol. www.idrc.ca: es el nombre del servidor o computadora donde est almacenado el archivo. unganisha: en el ejemplo anterior, es el nombre del directorio bajo el cual est almacenado el archivo en el servidor. index.html: es el nombre del archivo en s. Note que el documento tiene extensin html, pues es un archivo de hipertexto.

11 construccin de sitios web


MANUAL DE ESTUDIANTES

CAPTULO 2

Los programas para hacer pginas y navegar por la Web

CONTENIDO
2.1 Programas editores de pginas Web 2.2 Programas navegadores de la Web 2.3 Uso de editores de texto y hojas electrnicas para hacer pginas Web 2.4 El paquete Netscape como instrumento generador y visualizador de pginas Web 2.5 Funcionamiento general del Netscape Composer

2.1 Programas editores de pginas Web


Como se mencion en el captulo 1, las pginas de un sitio Web se programan con un lenguaje denominado HTML y, cuando la Web inici, era necesario para quienes quisieran construir pginas, conocer a cabalidad las instrucciones y las etiquetas propias de este lenguaje. As las personas que programaban las pginas utilizaban un editor de texto para escribir las instrucciones y guardaban el archivo con la extensin html, pero no podan ver cmo lucira la pgina sino hasta despus de que la abrieran con un programa navegador (browser). Posteriormente, salieron al mercado programas editores de pginas Web, los cuales, mediante una interfaz grfica (botones, barras de herramientas y menes) facilitan la construccin de pginas. Entonces, quienes las hacen no requieren conocer con detalle el lenguaje HTML. Los programas editores de pginas Web presentan un funcionamiento similar al de los procesadores de palabras y los programas de dibujo actuales, ya que, entre otras cosas, permiten escribir texto y editarlo, incorporar grficos y tablas, etc., mostrando, con bastante precisin, la forma en que lucir la pgina en la Web. Entre los programas editores actualmente ms conocidos se encuentran el Microsoft FrontPage y el Netscape Composer. Este ltimo es presentado al final de este captulo y estudiado con detalle a lo largo de este manual.

12 construccin de sitios web


MANUAL DE ESTUDIANTES

2.2 Programas Navegadores de la Web


Como se mencion en el captulo 1, un programa navegador o browser es la interfaz que tiene la persona usuaria para recorrer la Web. El navegador interacta con un servidor Web, mediante una relacin cliente/servidor; as cuando usted hace click sobre un elemento de una pgina Web, el navegador solicita al servidor que le enve los documentos especficos para desplegarlos en la pantalla de su computadora. Algunos de los programas navegadores ms comunes son: Internet Explorer (de Microsoft), Netscape Communicator (de Netscape) y MOSAIC (de NCSA). Estos programas leen los documentos que estn escritos en HTML.

2.3 Uso de editores de texto y hojas electrnicas para hacer pginas Web
Actualmente muchos programas, como procesadores de palabras, hojas electrnicas y programas para hacer presentaciones, como Microsoft Word, Microsoft Excel y Power Point, incorporan entre sus funciones la posibilidad de hacer enlaces entre pginas y guardar archivos en formato html. Tanto Word 97, Excel 97 como Power Point 97 incluyen la opcin Guardar como HTML ... o Save as HTML ... dentro del men Archivo o File. Por ejemplo, usando Word 97, usted puede escribir el texto de sus pginas, incorporar tablas y enlaces a otras pginas y luego guardar el archivo con formato html. Aunque estos programas no son especializados para crear pginas Web, son tiles para este propsito, principalmente cuando la informacin que queremos publicar en la Web ya est escrita con alguno de estos instrumentos. De esta manera, se puede, simplemente, guardar el archivo ya existente en formato html y no tener que volver a digitar la informacin.

13 construccin de sitios web


MANUAL DE ESTUDIANTES

2.4 El paquete Netscape como instrumento generador y visualizador de pginas Web


El editor Netscape Composer est incluido dentro del paquete Netscape Communicator. Las principales herramientas que el Netscape Communicator contiene actualmente son: Netscape Composer Sirve para editar y generar pginas Web. Netscape Navigator Sirve para navegar por la Web. Netscape Messenger Mailbox Sirve para administrar el correo electrnico. Algunas versiones del paquete Netscape incluyen tambin los siguientes programas: Netscape Collabra Discussion Groups Permite organizar y distribuir correspondencia de sus propios grupos de discusin en Internet. Netscape Calendar Ofrece un calendario para administracin de agendas. Netscape Netcaster Es una herramienta que permite que su computadora quede conectada a ciertos canales en el Web. Un canal es en realidad un servidor Web al cual usted se puede suscribir para recibir informacin en forma automtica.

14 construccin de sitios web


MANUAL DE ESTUDIANTES

2.5 Funcionamiento general del Netscape Composer


Para iniciar la ejecucin del Netscape Composer: 1) Vaya al men Start o Inicio de Windows, 2) Luego al men Programs o Programas y 3) Luego al men Netscape Communicator 4) Una vez all, seleccione Netscape Composer
Figura 2.1 El ambiente de trabajo del Netscape Composer

Habiendo efectuado el paso anterior, aparecer la siguiente ventana:

Area de trabajo Barra de formato Barra de composicin Men principal

Note en la figura que la ventana del Composer contiene: Una barra de men principal con las opciones File, Edit, View,
Insert, Fromat, Tools, Communicator y Help.

Algunos de estos menes (como File) presentan opciones estndar en la mayora de los programas. Una barra de composin, de acceso rpido, la cual contiene comandos predefinidos que tambin aparecen en los menes. Una barra de formato, de acceso rpido, para definir aspectos relacionados con la apariencia del texto. A lo largo de este manual se irn utilizando y explicando cada una de las opciones para su mejor comprensin.

15 construccin de sitios web


MANUAL DE ESTUDIANTES

CAPTULO 3

Construccin de una pgina con Netscape Composer

CONTENIDO
3.1 Escribiendo texto 3.2 Guardando la pgina 3.3 Viendo la pgina con el navegador

3.1 Escribiendo texto


Escribiremos un texto sencillo con el fin de construir una pgina tambin sencilla, con lo cual usted obtenga una nocin del funcionamiento del Netscape Composer. La pgina que usted va a crear es similar a la que se ve en la figura 3.1. a) Una vez en Netscape Composer, escriba el siguiente texto: Esta es mi primera pgina! b) Centre en la pgina el texto que escribi, para ello posicione el cursor sobre el texto, abra el men Format, seleccione la opcin Align y una vez all seleccione la opcin Center. c) Presione la tecla de entrada, Enter, para cambiar de lnea. d) Escriba su nombre e) Alinee su nombre a la derecha as: seleccione, con el men Format, la opcin Align y una vez all seleccione la opcin Right. En este momento usted ya ha creado su primera pgina Web,

Figura 3.1 La primera pgina vista con el Navegador

16 construccin de sitios web


MANUAL DE ESTUDIANTES

Ahora debe guardarla en el disco para luego poder verla desde el navegador (Navigator).

3.2 Guardando la pgina


Es importante recordar la importancia de mantener los archivos organizados en directorios o carpetas para su mejor localizacin y manejo; por lo tanto se recomienda crear un directorio en el cual usted almacene sus pginas junto con los recursos audiovisuales que stas utilicen (archivos de grficos, sonidos, animaciones y vdeos). Para guardar la pgina que acaba de crear haga lo siguiente: a) Seleccione la opcin Save As del men File. Aparecer entonces una ventana similar a la que se muestra a continuacin: En este caso, el directorio donde se guardarn las pginas se llama: EjemplosHTML.

Figura 3.2 Ventana para Guardar el archivo

b) Escriba en el espacio File name: el nombre con que almacenar la pgina en el disco (por ejemplo: primera). Note que en el campo Save in: aparece el directorio en el cual quedar grabado el documento. Los iconos que aparecen en la parte superior derecha son estndares en Windows para cambiar de directorio, crear una nueva carpeta, etc. Note adems que el documento debe quedar almacenado con tipo HTML Files.

17 construccin de sitios web


MANUAL DE ESTUDIANTES

c) Aparecer luego una ventana en la cual debe ingresar el ttulo con que se desplegar la pgina en Internet, por ejemplo: Mi Primera Pgina, como se muestra a continuacin:

Figura 3.3 Ventana para indicar el Ttulo de la pgina

d) En este punto su pgina ya estar almacenada. En la prxima seccin veremos cmo acceder a su pgina desde el navegador.

3.3 Viendo la pgina con el navegador


PASO 1: Entrando al Netscape Navigator

En la seccin anterior usted cre y guard su primera pgina, ahora activaremos el Netscape Navigator para que pueda visualizar la pgina desde el navegador. Desde el Netscape Composer, el navegador se puede activar de varias maneras: a) Accionando la opcin Navigator del men Communicator, o b) Seleccionando el botn Preview de la barra de composicin, o c) Activndolo desde Windows, accionando los menes: Start, Programs, Netscape Communicator y finalmente Netscape Navigator.

18 construccin de sitios web


MANUAL DE ESTUDIANTES

PASO2: Abriendo un documento

Este paso se realiza si usted no se sabe de memoria la ubicacin del documento. a) Seleccione del men File la opcin Open Page, con lo cual se desplegar una ventana para buscar la ubicacin del hiperdocumento, como se muestra a continuacin:

Figura 3.4 Ventana para seleccionar una pgina

b) Seleccione la opcin Choose File para buscar el archivo que desea desplegar. Aparecer entonces la ventana que se muestra en la figura 3.5. Puede ahora utilizar los botones de Windows para ubicar el hiperdocumento. As, de acuerdo con el paso 4 de la seccin anterior, nuestra pgina, con nombre primera, haba quedado almacenada en el directorio EjemplosHTML del disco C: (es decir, con ruta c:\ EjemplosHTML\primera.html).
Figura 3.5 Ventana para abrir una pgina

19 construccin de sitios web


MANUAL DE ESTUDIANTES

Presione la opcin Open de la ventana para indicarle al navegador la ubicacin de la pgina. c) Aparecer nuevamente la ventana del punto a), pero ahora con la localizacin del hiperdocumento, de la siguiente manera:

Figura 3.6 Ventana con la pgina seleccionada

d) Ahora puede presionar el botn Open, con lo cual su pgina ser finalmente desplegada en el navegador como se muestra en la figura 3.7. Observe que la direccin tiene el prefijo file:///, lo cual indica que la pgina proviene de un archivo. Si la pgina estuviera en un servidor disponible en Internet, el prefijo sera http://. Una vez con la pgina desplegada, usted puede regresar al Netscape Composer desde el men Communicator del navegador. La pgina anterior es muy sencilla, en las siguientes secciones veremos cmo insertar, en una pgina Web, diferentes estilos de texto, agregar grficos, enlaces, tablas, etc.

Figura 3.7 Pgina cargada en el navegador

20 construccin de sitios web


MANUAL DE ESTUDIANTES

CAPTULO 4

Edicin de texto

CONTENIDO
4.1 La primera pgina 4.2 Cmo alinear el texto? 4.3 Cmo cambiar el tipo de letra? 4.4 Cmo cambiar el tamao de la letra? 4.5 Cmo cambiar el estilo de la letra? 4.6 Cmo cambiar el color de la letra? 4.7 Cmo agregar vietas y listas numeradas? 4.8 Cmo cambiar el estilo de las vietas y de la numeracin? 4.9 Cmo establecer ttulos y encabezados?

4.1 La primera pgina


La pgina que se muestra en la figura 4.1 servir de base para trabajar a lo largo de este captulo en la edicin del texto.

Figura 4.1 Pgina de ejercicio

21 construccin de sitios web


MANUAL DE ESTUDIANTES

Iniciaremos con un ejercicio para escribir el texto contenido en la pgina.

Ejercicio #1: Escribiendo el texto sin formato


Construya una pgina con el siguiente texto, sin preocuparse an por el formato. Luego guarde la pgina con un nombre significativo (por ejemplo conferencia1.html):
Congreso de Investigaciones en Salud Lugar: Gran Hotel Internacional Mi Ciudad, Mi Pas Fecha: 22 de noviembre del 2001 Temas Generales: Salud de la mujer Salud de las personas de tercera edad Atencin a poblaciones marginales La medicina natural y la salud Presentacin de Ponencias: Las ponencias debern ser presentadas de acuerdo con el formato establecido por la Comisin Organizadora. Las ponencias deben ser recibidas por la Comisin a ms tardar el 31 de julio del 2001. Contactos: Para obtener mayor informacin puede comunicarse con Eldoctor Prez, a la direccin electrnica congreso@yahoo.com

22 construccin de sitios web


MANUAL DE ESTUDIANTES

Ejercicio #2: Alineacin del texto


Con base en el texto que digit al inicio del captulo: a) Seleccione el siguiente fragmento del texto y cntrelo en la pgina:
Congreso de Investigaciones en Salud Lugar: Gran Hotel Internacional Mi Ciudad, Mi Pas Fecha: 22 de noviembre del 2001

4.2 Cmo alinear el texto?


a) Seleccione el texto que desea alinear. b) Seleccione el men Format. c) Seleccione la opcin Align. d) Se abrir un men como se muestra en la figura 4.2. e) Seleccione:
Left para alinear el texto a la izquierda de la pgina Center para centrar el texto en la pgina Right para alinear el texto a la derecha de la pgina.

b) Seleccione el siguiente fragmento del texto y cntrelo en la pgina:


Para obtener mayor informacin puede comunicarse con Eldoctor Prez, a la direccin electrnica congreso@yahoo.com

Figura 4.2 Men para alinear el texto

PISTA
Una forma rpida de alinear el texto es usando la barra de formato, as: a) Seleccione el texto que desea alinear b) Escoja el tipo de alineamiento seleccionando primero el icono de ms a la derecha de la barra de formato, como se muestra en la siguiente figura, y luego seleccionando el icono correspondiente a la alineacin a la izquierda, al centro o a la derecha:

Alineamiento

23 construccin de sitios web


MANUAL DE ESTUDIANTES

4.3 Cmo cambiar el tipo de letra?


a) Seleccione el texto al cual desea modificar el tipo de letra b) Seleccione el men Format c) Seleccione la opcin Font. Se abrir un men como se muestra en la siguiente figura. Observe que se listan todos los tipos de letra que dispone su computadora.

Ejercicio #3: Cambiando el tipo de letra


Seleccione las palabras: Fecha y Lugar y cmbieles el tipo de letra.

Figura 4.3 Men para seleccionar el tipo de letra

PISTA
Usando la barra de formato a) Seleccione el texto al cual desea modificar el tipo de letra b) Seleccione de la barra de formato que se muestra a continuacin, la opcin del tipo de letra. Aparecer entonces una lista de letras, de la cual puede seleccionar la que desee.

Tipo de letra

24 construccin de sitios web


MANUAL DE ESTUDIANTES

4.4 Cmo cambiar el tamao de la letra?


a) Seleccione el texto al cual desea modificar el tamao de letra b) Seleccione el men Format, c) Seleccione la opcin Size. Se abrir un men como se muestra en la siguiente figura:

Ejercicio #4: Cambiando el tamao de letra


Seleccione el texto Congreso de Investigaciones en Salud y cmbiele el tamao de letra a 18 puntos.
Figura 4.4 Men para seleccionar el tamao de letra

PISTA
a) Seleccione el texto al cual desea modificar el tamao de letra b) Seleccione de la barra de formato, que se muestra a continuacin, la opcin del tamao de letra. Aparecer entonces una lista de tamaos, de la cual puede seleccionar el que desee.

Tamao de letra

25 construccin de sitios web


MANUAL DE ESTUDIANTES

4.5 Cmo cambiar el estilo de la letra?


a) Seleccione el texto al cual desea modificar el estilo de letra b) Seleccione el men Format c) Seleccione la opcin Style. Se abrir un men como se muestra en la siguiente figura:

Ejercicio #5: Cambiando el estilo de letra


a) Ponga en letra negrita cada uno de los siguientes textos:
Congreso de Investigaciones en Salud Fecha Lugar

c) Ponga en letra itlica los siguientes textos:


Gran Hotel Internacional Mi Ciudad, Mi Pas 22 de noviembre del 2001

Figura 4.5 Men para seleccionar el estilo de letra

d) Note que las posibles opciones son:


Bold Italic Underline Strikethrough Superscript Subscript Blinking Nonbreaking

Letra negrita Letra cursiva Subrayado Tachado Superndice Subndice Letra intermitente Sin fin de lnea, el rengln es de tamao infinito

PISTA
La barra de formato se puede utilizar para cambiar rpidamente el estilo de un texto, si el estilo deseado es negrita, cursiva o subrayado, tal como se ilustran las opciones de la siguiente figura:

Negrita

Cursiva

Subrayada

26 construccin de sitios web


MANUAL DE ESTUDIANTES

Ejercicio #6: Cambiando el color de letra


Seleccione el fragmento de texto que desee y cmbiele de color con alguno de los mtodos anteriores.

4.6 Cmo cambiar el color de la letra?


a) Seleccione el texto al cual desea modificar el color de la letra. b) Seleccione el men Format. c) Seleccione la opcin Color... Se abrir un men con la paleta de colores, de la cual podr escoger el color que desee.

PISTA
Use la barra de formato que se muestra a continuacin para cambiar el color de la letra:

Color de la letra

4.7 Cmo agregar vietas y listas numeradas?


Si ya escribi el texto: a) Seleccione el segmento de texto al que desea ponerle numeracin o vietas b) Seleccione el men Format. c) Seleccione la opcin List. Se abrir un men con las opciones posibles, tal y como se muestra en la figura 4.6. Una vez seleccionada la opcin, el texto quedar modificado. Si an no ha escrito el texto y desea que la lista se vaya construyendo conforme escribe, entonces: a) Coloque el cursor al inicio del prrafo donde va a escribir el texto. b) Seleccione el men Format. c) Seleccione la opcin List. d) Se abrir un men con las opciones posibles, tal y como se muestra en la figura 4.6.

27 construccin de sitios web


MANUAL DE ESTUDIANTES

Ejercicio #7: Agregando vietas


Agregue vietas al siguiente texto que escribi al inicio del captulo (o escrbalo si an no lo ha hecho):
Salud de la mujer Salud de las personas de tercera edad Atencin a poblaciones marginales Avances en cardiologa

e) Una vez seleccionada la opcin, aparecer la primera vieta o el primer nmero. Luego, conforme usted termine el prrafo y presione la tecla de entrada (<Enter>), el Composer ir colocando las siguientes vietas automticamente.

Figura 4.6 Men para seleccionar vietas

Note que las posibles opciones son las siguientes: None Elimina las vietas y/o la numeracin Bulleted Coloca vietas (q) Numbered Coloca nmeros Description Separa la lista con una marca de prrafo, pero no coloca una vieta visible Directory Coloca vietas (q) Menu Coloca vietas (q) Para cambiar el tipo de vieta o nmero refirase a la seccin siguiente.

PISTA
a) Se puede poner numeracin y vietas al texto ya existente o iniciar un prrafo con nueva numeracin y/o vietas. Si el texto ya est escrito simplemente debe seleccionarlo y luego presionar la opcin de vietas o de numeracin de la barra de formato. b) Tambin puede seleccionar primero la opcin de numeracin o la de vietas de la barra de formato, con lo cual Netscape Composer coloca la primera vieta o el primer nmero, y luego al terminar la lnea y presionar la tecla de entrada (<Enter>), aparecer automticamente la siguiente vieta o nmero.

Vietas

Numeracin

28 construccin de sitios web


MANUAL DE ESTUDIANTES

4.8 Cmo cambiar el estilo de las vietas y de la numeracin?


Nota: Para cambiar el estilo de las vietas o de la numeracin de una lista de tems, debe existir al menos un tem en la lista. a) Coloque el cursor en un tem de la lista. b) Seleccione la opcin Character Properties del men Format. Dependiendo del estilo (Style) de la lista que puede ser Numbered List o Bullet (Unnumbered) List aparecern las opciones para hacer una lista numerada o una lista con vietas. Las figuras 4.7 y 4.8 muestran las posibles opciones de numeracin y vietas que permite Netscape Composer.

Ejercicio #8: Cambiando el estilo de las vietas


a) Seleccione el siguiente fragmento de texto, que escribi al inicio del captulo (o escrbalo ahora si no lo hizo antes):
Las ponencias debern ser presentadas de acuerdo con el formato establecido por la Comisin Organizadora. Las ponencias deben ser recibidas por la Comisin a ms tardar el 31 de julio del 2001.
Figura 4.8 Cambio de estilo de vietas.

Figura 4.7 Cambio de estilo de numeracin.

b) Pngales un estilo de vieta diferente al que usted haya utilizado anteriormente.

29 construccin de sitios web


MANUAL DE ESTUDIANTES

Ejercicio #9 Poniendo encabezados


Ponga los ttulos Temas generales, Presentacin de Ponencias, y Contactos como encabezados de tipo 2 (Heading 2).

4.9 Cmo establecer ttulos y encabezados?


a) Si el texto ya est escrito, seleccione el texto al que quiere dar formato de ttulo. b) Luego seleccione la opcin Heading del men Format (ver figura 4.9). c) Elija el tipo de encabezado (1 es el ttulo mayor y 6 es el ttulo menor). d) Nota: Si prefiere indicar el tipo de encabezado antes de escribir el texto, seleccione directamente la opcin Heading del men Format (ver figura 4.9), seguido del tipo de encabezado (1 es el ttulo mayor y 6 es el ttulo menor). El cursor cambiar de tamao de acuerdo con el tipo de encabezado seleccionado y usted podr empezar a escribir el texto. Netscape Composer provee estilos de texto predefinidos para escribir ttulos o encabezados que destaquen en las pginas. Observe los ttulos que aparecen en la hoja de la figura 4.10 que se muestra en la siguiente pgina. El encabezado Catlogo de Libros (por rea) se hizo con el estilo denominado Heading 1 y los encabezados Artes y Humanidades, Computacin e Informtica y Educacin con el estilo denominado Heading 2. El Netscape Composer tiene seis tipos de encabezados predefinidos, que son tiles para que usted no tenga que definir el estilo de cada ttulo y subttulo dentro de la pgina. Realice el ejercicio 9 para hacer encabezados.

Figura 4.9 Seleccin del encabezado

30 construccin de sitios web


MANUAL DE ESTUDIANTES

Figura 4.10 Ejemplo de diferentes encabezados

PISTA
a) Utilice la barra de formato para cambiar el estilo de encabezado (ver figura 4.11). Si el texto ya est escrito, seleccinelo, luego seleccione la opcin de estilo de la barra y el tipo de encabezado que aparece en la lista (Heading 1 es el ttulo mayor y Heading 6 es el ttulo menor). b) Si prefiere indicar el tipo de encabezado antes de escribir el texto, seleccione directamente la opcin de estilo de la barra de formato. El cursor cambiar de tamao de acuerdo con el tipo de encabezado seleccionado y usted podr empezar a escribir el texto.
Figura 4.11 Seleccin de encabezado desde la barra de formato

31 construccin de sitios web


MANUAL DE ESTUDIANTES

CAPTULO 5

Inclusin de elementos grficos

CONTENIDO
5.1 Insertando lneas de divisin 5.2 Insertando una imagen 5.3 Algunas opciones del Netscape Composer al incorporar imgenes en pginas Web
5.3.1 Modificacin de la imagen 5.3.2 Colocar la imagen como fondo 5.3.3 Alineamiento de las imgenes con respecto al texto 5.3.4 Cambio del tamao de la imagen 5.3.5 Hacer un marco alrededor de la imagen 5.3.6 Despliegue de imgenes

5.1 Insertando lneas de divisin


a) Seleccione el men Insert. b) Seleccione la opcin Horizontal Line, tal y como se muestra en la siguiente figura:

Figura 5.1 Men para insertar lneas de divisin

Ejercicio #1: Insertando dos lneas de divisin


Use conferencia1.html, pgina que se ha construido a lo largo de este manual, e inserte dos lneas de divisin, una antes del texto Lugar y otra despus de fecha, tal y como se muestra en la figura 5.2.

Figura 5.2 Una pgina con lneas de divisin

32 construccin de sitios web


MANUAL DE ESTUDIANTES

Ejercicio #2: Insertando una imagen en la pgina del ejercicio


a) Utilice la pgina conferencia1.html e inserte cualquier imagen que usted tenga almacenada en su disco duro. b) Reduzca el tamao de la imagen que insert de tal manera que sea apenas una ilustracin al lado del ttulo Congreso de Investigaciones en Salud.

5.2 Insertando una imagen


La imagen que usted va a insertar, debe estar almacenada en algn directorio de su disco duro o servidor. Netscape Composer permite insertar imgenes que estn almacenadas en los formatos: gif, jpg y jpeg. a) Seleccione la opcin Image... del men Insert o seleccione el icono de Image de la barra de Composicin. Aparecer entonces lo que se muestra en la figura 5.3. b) Coloque el nombre del archivo que contiene la imagen en el espacio titulado Image location - Enter a remote URL or local file. Si desconoce el nombre o la ubicacin del archivo, puede buscarlo seleccionando la opcin Choose File... Al seleccionar esta opcin, aparecer una ventana (ver figura 5.4) estndar de Windows que le permitir buscar el archivo a insertar. Como se mencion anteriormente las imgenes deben estar almacenadas en su computadora o en su servidor para poder insertarlas. Las imgenes se pueden obtener de diferentes lugares.

Ubicacin y nombre del archivo que contiene la imagen

Alineamiento de la imagen con respecto al texto Coloca la imagen como fondo Dimensin de la imgaen Espacio alrededor de la imagen

Figura 5.3 Ventana para seleccin de la imagen

33 construccin de sitios web


MANUAL DE ESTUDIANTES

Figura 5.4 Ventana para seleccionar la imagen a insertar

Se pueden usar imgenes que vengan con Windows o con algn programa de dibujo instalado en su computadora, Tambin se pueden bajar imgenes de Internet. Algunas palabras comunes para buscar, en Yahoo (http://www.yahoo.com) o Altavista (http://www.altavista.com) sitios que contengan imgenes son: clipart, bitmaps, graphics, background, icons y art. Se pueden tambin utilizar fotografas o cualquier tipo de imagen que se pueda digitalizar.

5.3 Algunas opciones del Netscape Composer al incorporar imgenes en pginas Web.
5.3.1 Modificacin de la imagen:

Si desea realizar algn cambio a la imagen, puede hacerlo seleccionando la opcin Edit Image.
5.3.2 Colocar la imagen como fondo:

Si usted desea que la imagen aparezca como el fondo de la pgina, entonces marque el botn correspondiente a Use as background.
5.3.3 Alineamiento de las imgenes con respecto al texto: Los botones que aparecen en el rea denominada Text aligment and wrapping around images tienen el propsito de ubicar la imagen

con respecto al texto que est a su alrededor. La imagen puede ser colocada a la izquierda de la pgina y el texto a su derecha, en la parte superior, en el medio o en la parte inferior. Tambin la imagen puede ser colocada a la izquierda o a la derecha, con texto alrededor.
5.3.4 Cambio del tamao de la imagen:

Usted puede cambiar el tamao de la imagen cambiando los valores de la altura (Height) y el ancho (Width) de la imagen que aparecen en el rea denominada Dimensions de la figura 5.3. Para reestablecer el tamao original simplemente presione el botn denominado Original Size. La opcin Constrain provoca que el cambio de tamao se lleve a cabo en forma proporcionada.
5.3.5 Hacer un marco alrededor de la imagen: En el rea denominada Space around image se establece un marco

alrededor de la imagen, para que no quede demasiado pegada al

34 construccin de sitios web


MANUAL DE ESTUDIANTES

texto. Si se desea que el marco se vea, entonces se indica una cantidad de pixeles diferente de cero en el rea denominada Solid border.
5.3.6 Despliegue de imgenes

Las imgenes muy grandes requieren mucho tiempo para ser cargadas. Netscape Composer incluye la opcin Alt. Text / LowRes...para que aparezca algn texto mientras la imagen es cargada o aparezca una imagen de menor resolucin (calidad) mientras la imagen definitiva es cargada. La ventana que aparece al seleccionar esta opcin es la siguiente:
Figura 5.5 Propiedades de una imagen alterna

En el rea Alternate text usted puede escribir el texto que desea que aparezca mientras la imagen se est cargando. En el rea Low resolution image puede colocar la ubicacin y el nombre del archivo de baja resolucin que usted desea que aparezca mientras se carga la imagen definitiva; tambin puede seleccionar esa imagen de baja resolucin por medio de la opcin Choose File.... Esta facilidad sirve para agregar dinamismo en el momento del despliegue a pginas que contienen imgenes muy grandes, pues ayuda a disminuir el tiempo de espera cuando las pginas estn siendo transferidas.

35 construccin de sitios web


MANUAL DE ESTUDIANTES

CAPTULO 6

Creacin de enlaces para la navegacin

CONTENIDO
6.1 Qu es un enlace? 6.2 Cmo establecer un enlace? 6.3 Cmo eliminar un enlace? 6.4 Cmo establecer enlaces dentro de una misma pgina?

6.1 Qu es un enlace?
Un enlace es una relacin que se establece de una pgina fuente a otra destino. Al hacer click sobre el enlace de la pgina fuente, se activa la pgina destino. A los elementos de la pantalla que contienen los enlaces se les conoce como palabras calientes o imgenes calientes. Esta es una de las formas ms comunes de navegacin entre pginas de la Web. Para establecer un enlace se requieren al menos dos pginas Web. Como ejemplo utilizaremos la pgina Web que se desarroll a partir del captulo 4 de este manual para convocar a una conferencia internacional que vemos a continuacin. Suponga que vamos a enlazar esta pgina con una pgina en la
Figura 6.1 Pgina fuente para establecer un enlace

36 construccin de sitios web


MANUAL DE ESTUDIANTES

Figura 6.2 Pgina destino del enlace

cual se explica el formato del documento para la presentacin de la ponencia. Para hacerlo breve, construya una pgina con la informacin que se muestra en la figura 6.2 y gurdela con el nombre conferencia2.html. Luego estableceremos el enlace desde la pgina de la figura 6.1 para que, cuando se haga click sobre la palabra formato que aparece en la seccin Presentacin de Ponencias, se active la pgina de la figura 6.2.

Figura 6.3 Enlace entre las pginas

37 construccin de sitios web


MANUAL DE ESTUDIANTES

Ejercicio #1: Insertando otro enlace


Seleccione la palabra Congreso de la pgina conferencia2.html y establezca un enlace hacia conferencia1.html.

6.2 Cmo establecer un enlace?


Tal y como se mencion anteriormente, para establecer un enlace se requieren dos pginas. En esta seccin deseamos establecer un enlace entre la pgina de la figura 6.1 y la de la figura 6.2, de la siguiente manera: a) Abra la pgina fuente (por ejemplo la de la figura 6.1, que se llama conferencia1.html). b) Seleccione el texto que usted desea que sea el enlace. Para este ejemplo, seleccione la palabra formato de la pgina de la figura 6.1. c) Seleccione la opcin Link del men Insert o seleccione el icono Link de la barra de composicin. Aparecer la siguiente ventana:

Figura 6.4 Ventana para manejo de enlaces

d) Escriba el nombre del archivo que contiene la pgina destino (la de la figura 6.1) o seleccinelo del disco duro con la opcin Choose File ... e) Presione el botn OK y ya estar establecido el enlace. f) Guarde la pgina. Para probar que el enlace funciona, abra la pgina fuente con Netscape Navigator y haga click sobre la palabra formato establecida como enlace. Deber activarse la pgina destino.

6.3 Cmo eliminar un enlace?

38 construccin de sitios web


MANUAL DE ESTUDIANTES

Ejercicio #2: Eliminando un enlace entre pginas


Elimine el enlace que hizo en el ejercicio de la seccin anterior; es decir, elimine el enlace que estableci entre la palabra Congreso de conferencia2.html y conferencia1.html.

a) Abra la pgina donde fue establecido el enlace (por ejemplo, la pgina de la figura 6.1 que tiene un enlace en la palabra formato). b) Seleccione el texto establecido como enlace (la palabra formato). c) Seleccione la opcin Link del men Insert o seleccione el icono Link de la barra de composicin. Aparecer la ventana que se muesta en la figura 6.5. d) Presione el botn Remove Link y luego el botn OK para que el enlace quede eliminado. e) Guarde la pgina.

6.4 Cmo establecer enlaces dentro de una

Figura 6.5 Ventana para eliminar un enlace

39 construccin de sitios web


MANUAL DE ESTUDIANTES

misma pgina?
Enlazar secciones dentro de una misma pgina es til para presentar la informacin de pginas muy grandes; por ejemplo, para hacer documentos en los que al inicio de la pgina aparece la tabla de contenido y, al hacer click sobre cada ttulo, el control se traslada a la seccin correspondiente. Un ejemplo de ello se muestra en la figura 6.6. En Netscape Composer las secciones se enlazan colocando marcas denominadas enlaces internos o anclas al inicio de las secciones a las que se quiere llegar (secciones destino). As, para el ejemplo de la pgina de la figura 6.6, se debern colocar tres anclas: una al inicio de la seccin Temas generales:, otra al inicio de la seccin Presentacin de Ponencias: y otra al inicio de la seccin Contactos:. Luego, se colocan los enlaces para navegar a cada una de esas secciones. Para este ejemplo se deben establecer tres enlaces: uno en el ttulo 1. Temas generales, otro en 2. Presentacin de Ponencias y el ltimo en 3. Contactos. Para agregar anclas y construir una pgina como la de la figura 6.6 haga lo siguiente: a) Abra la pgina conferencia1.html que ha estado desarrollando a lo largo de este manual. b) Coloque las anclas de la siguiente manera:

Figura 6.6 Ejemplo de enlaces (targets) dentro de un mismo documento.

40 construccin de sitios web


MANUAL DE ESTUDIANTES

Figura 6.7 Ventana para nombrar un target.

b.1) Coloque el cursor al inicio de la seccin Temas generales: b.2) Seleccione la opcin Target... del men Insert. Aparecer la ventana que se ve en la figura 6.7. b.3) En esta ventana debe digitar un nombre que identificar al ancla. Es recomendable escoger un nombre relacionado con los tpicos de la seccin que se est anclando. Coloque, por ejemplo, el nombre Temas y luego presione el botn OK. b.4) Aparecer un icono que identifica al ancla contiguo al ttulo Temas generales:, de la siguiente manera:

b.5) Para la seccin Presentacin de Ponencias coloque un ancla con nombre Presentacin y para la seccin Contactos coloque un ancla con su mismo nombre. Aparecern en cada caso los iconos que indican la presencia de un ancla. c) Agregue el siguiente texto para establecer los enlaces, tal y como se muestra en la figura 6.6:
Contenido de esta pgina

Ejercicio #3: Insertando elaces locales


Construya enlaces locales dentro de la pgina conferencia2.html.

1. Temas generales 2. Presentacin de Ponencias 3. Contactos

d) Establezca los enlaces de la siguiente manera: d.1) Seleccione el ttulo 1. Temas generales del rea de contenido de la pgina. d.2) Seleccione la opcin Link... del men Insert para establecer el enlace. Aparecer entonces la ventana que se ve en la figura 6.8. Note que muestra la lista de anclas que usted estableci en el

41 construccin de sitios web


MANUAL DE ESTUDIANTES

Figura 6.8 Ventana para seleccionar anclas.

punto b). d.3) Seleccione el nombre del ancla Temas con lo cual se establecer un enlace entre el ttulo 1. Temas generales de la seccin de contenido con la seccin Temas generales:. El ttulo 1. Temas generales cambiar de color para indicar que es un enlace. d.4) Repita este mismo paso para establecer los enlaces de los ttulos 2. Presentacin de Ponencias y Contactos con sus respectivas secciones dentro de la pgina. e) Guarde la pgina y active el Netscape Navigator para probar las anclas de la pgina.

42 construccin de sitios web


MANUAL DE ESTUDIANTES

CAPTULO 7

Elaboracin de tablas

CONTENIDO
7.1 Qu es una tabla? 7.2 Cmo insertar una tabla con Netscape Composer? 7.3 Cmo agregar una fila, una columna o una sola celda? 7.4 Cmo borrar una fila, una columna, una sola celda o la tabla completa? 7.5 Cmo cambiar la apariencia de una tabla?

7.1 Qu es una tabla?


Una tabla sirve para mostrar informacin organizada por filas y columnas. Un horario, un men, una lista de productos con su cantidad y su precio, y un presupuesto para todos los meses del ao, son ejemplos de informacin que podra ser colocada en tablas. A cada espacio donde converge una fila con una columna se le llama celda, Veamos a continuacin un ejemplo de una tabla que registra las ventas de algunos productos durante los dos semestres del ao. Aqu el nmero 475 est ubicado en la celda correspondiente a la fila 4 y la columna 2:
COLUMNA 1 FILA 1 FILA 2 FILA 3 FILA 4 COLUMNA 2 COLUMNA 3

Producto Borradores Cuadernos Lpices

De enero a julio 80 580 475

De agosto a diciembre 34 300 610

7.2 Cmo insertar una tabla con Netscape Composer?


En esta seccin se utilizar como base la pgina conferencia2.html desarrollada en el captulo anterior, la cual se muestra en la siguiente pgina (figura 7.1). Se desea modificar el contenido de esta pgina para que luzca como en la figura 7.2.

43 construccin de sitios web


MANUAL DE ESTUDIANTES

Figura 7.1 Pgina para insertar una tabla

Figura 7.2 Ejemplo de una pgina que contiene una tabla

44 construccin de sitios web


MANUAL DE ESTUDIANTES

PASOS

a) Agregue el ttulo Secciones de la Ponencia b) Seleccione la opcin Table... del men Insert de la siguiente manera:

Figura 7.3 Men para insertar una tabla

Figura 7.4 Propiedades de una tabla

Luego aparecer una ventana en la que se establecern las caractersticas de la tabla, tal y como se muestra a continuacin:

45 construccin de sitios web


MANUAL DE ESTUDIANTES

c) Seleccione la cantidad de filas (rows) y de columnas (columns) que requiere su tabla. Para nuestro ejemplo de la figura 7.2 se debe indicar 7 filas y 2 columnas. d) Observe en la ventana de la figura 7.4 que se pueden escoger propiedades de la tabla, tales como el alineamiento de la tabla dentro de la ventana, el espaciado entre celdas de la tabla, el color de fondo de la tabla o una imagen de fondo para la tabla. e) Seleccione el botn OK para que aparezca la tabla. Las columnas de la tabla tienen el mismo ancho, el cual se modifica automticamente conforme se inserta el texto en cada celda. f) Digite en cada celda el texto correspondiente para formar la tabla que aparece en la figura 7.2.

7.3 Cmo agregar una fila, una columna o una sola celda?
Para agregar una fila, una columna o una sola celda a una tabla ya existente, realice los siguientes pasos: a) Coloque el cursor dentro de la tabla, en el lugar donde usted desea insertar el elemento (fila, columna o celda). b) Seleccione del men Insert la opcin Table, tal y como se mostr anteriormente en la figura 7.3. Observe que este men presenta cuatro opciones:
Table: Row: Column: Cell:

Ejercicio #1: Agregando una celda a la tabla


Coloque el cursor en alguna celda de la tabla que cre e inserte una sola celda. Observe y comente lo que sucede.

para insertar una tabla para insertar toda una fila para insertar toda una columna para insertar una sola celda.

Seleccione entonces la opcin correspondiente dependiendo de lo que usted desee insertar (una fila, una columna o una celda). Note que al insertar una sola celda la tabla queda con una forma irregular; es decir, no necesariamente todas las filas de la tabla tienen la misma cantidad de columnas.

46 construccin de sitios web


MANUAL DE ESTUDIANTES

7.4 Cmo borrar una fila, una columna, una sola celda o la tabla completa?
Para eliminar una fila, una columna o una sola celda a una tabla ya existente, realice los siguientes pasos:
PASOS

a) Coloque el cursor dentro de la tabla, en el lugar donde usted desea eliminar el elemento (fila, columna o celda). b) Seleccione del men Edit la opcin Delete Table como se muestra en la figura 7.5. c) Este men presenta cuatro opciones: Table: para borrar una tabla Row: para borrar toda una fila Column: para borrar toda una columna Cell: para borrar una sola celda. Seleccione entonces la opcin correspondiente dependiendo de lo que usted desee eliminar (la tabla completa, una fila, una columna o una celda).

Ejercicio #2: Borrando filas y columnas


a) Coloque el cursor en alguna celda de la tabla que cre y elimine la fila. b) Coloque el cursor en alguna celda de la tabla que cre y elimine la columna.

Figura 7.5 Men para borrar elementos de una tabla

47 construccin de sitios web


MANUAL DE ESTUDIANTES

7.5 Cmo cambiar la apariencia de una tabla?


PASOS

a) Coloque el cursor sobre la tabla. b) Seleccione la opcin Table Properties del men Format. Aparecer la siguiente ventana:

Ejercicio #3: Cambiando la apariencia de la tabla


a) Pngale un color diferente a cada celda de la tabla. b) Pngale un borde ms ancho a la tabla. c) Copie la tabla en otra parte de la pgina y pngale una imagen de fondo.

Figura 7.6 Ventana para modificar propiedades de una tabla

c) Observe que la ventana presenta tres partes principales para cambiar las propiedades de la tabla en general (Table), de la fila donde se encuentra el cursor (Row) o de la celda donde se encuentra el cursor (Cell).

48 construccin de sitios web


MANUAL DE ESTUDIANTES

En el caso de las propiedades de la tabla se puede: Cambiar el alineamiento (Table Alignment) a la izquierda (left), al centro (center) o a la derecha (right). Colocar un ttulo a la tabla (seleccionando Include caption). Cambiar el ancho del borde (Border line width). Cambiar el espaciado entre celdas (Cell spacing). Cambiar el espaciado dentro de las celdas (Cell padding). Modificar el ancho de la tabla con respecto al ancho de la pgina (Table width). Indicar una altura mnima para la tabla (Table min. Height). Indicar que todas las columnas deben mantenerse del mismo tamao (Equal column widths). Seleccionar un color para el fondo de la tabla. Para ello se marca la opcin Use color y se selecciona el color con el botn que aparece al lado de esta opcin. Colocar una imagen como fondo de la tabla. Para ello, a travs del botn Choose File se selecciona un archivo de imagen que contenga la imagen correspondiente.

49 construccin de sitios web


MANUAL DE ESTUDIANTES

CAPTULO 8

Impresin con Netscape Composer

CONTENIDO
8.1 Visualizacin previa de la pgina 8.2 Imprimiendo la pgina

8.1 Visualizacin previa de la pgina


Es comn, antes de imprimir una pgina, tener una vista preliminar de la misma. Para hacerlo, se siguen los siguientes pasos: a) Seleccione el men File b) Seleccione la opcin Print Preview tal y como se muestra en la figura 8.1. c) Aparecer entonces la pgina para poder observarla.

Ejercicio #1: Visualizando una pgina


Abra una pgina existente y visualice su contenido a travs de la opcin Print Preview.

Figura 8.1 Opcin de men para obtener una vista preliminar

50 construccin de sitios web


MANUAL DE ESTUDIANTES

Ejercicio #2: Haciendo una prueba de impresin


Si su computadora est conectada a una impresora, haga una prueba de impresin siguiendo los pasos antes detallados.

8.2 Imprimiendo la pgina


a) Seleccione el men File b) Seleccione la opcin Print..., tal y como se muestra en la figura 8.2. c) Aparecer entonces una ventana para escoger las alternativas de impresin: la impresora, las pginas y la cantidad de copias que se desean imprimir. Esta es una ventana casi estndar en la mayora de los programas.

Figura 8.2 Opcin de men para imprimir

51 construccin de sitios web


MANUAL DE ESTUDIANTES

CAPTULO 9

Planificacin de un sitio Web

CONTENIDO
9.1 Introduccin 9.2 Pasos para la planificacin y produccin de un sitio Web
9.2.1 Definir el objetivo del sitio 9.2.2 Identificar la o las diferentes audiencias o poblaciones meta 9.2.3 Definir el contenido y la estructura del sitio 9.2.4 Estilo grfico de presentacin 9.2.5 Construir las pginas y el sitio 9.2.6 Probar y evaluar el sitio 9.2.7 Registrar un dominio para ubicar el sitio 9.2.8 Instalar el sitio Web en el servidor 9.2.9 Medir el impacto del sitio 9.2.10 Actualizar continuamente el sitio

9.1 Introduccin
Ahora que ya sabe cmo crear y enlazar pginas Web es importante que tenga conocimiento del proceso necesario para planificar la produccin de pginas y sitios Web. Pueden existir diferentes propsitos para crear un sitio Web: difundir informacin, ofrecer productos o servicios, brindar asistencia tcnica, promover una organizacin, etc. En trminos generales, puede afirmarse que responde al propsito de publicar en la Web. Como toda publicacin, su elaboracin requiere de un proceso de planificacin y desarrollo. Para orientar este proceso se recomiendan algunos pasos importantes, varios de los cuales pueden llevarse a cabo en forma simultnea: 1. Definir el objetivo del sitio 2. Identificar la o las diferentes audiencias o poblaciones meta 3. Disear la estructura y organizar el contenido del sitio 4. Elegir un estilo grfico de presentacin 5. Construir las pginas 6. Registrar un dominio para ubicar el sitio 7. Instalar el sitio Web en el servidor 8. Medir el impacto del sitio 9. Actualizar continuamente el sitio Veamos en detalle cada una de estas actividades.

52 construccin de sitios web


MANUAL DE ESTUDIANTES

9.2 Pasos para la planificacin y produccin de un sitio Web


9.2.1 Definir el objetivo del sitio

9.2.2 Identificar la o las diferentes audiencias o poblaciones meta

Contestar a la pregunta Para qu queremos desarrollar nuestro sitio? es el paso bsico para iniciar la planificacin de un sitio Web. Aqu se define la razn por la cual vamos a realizar este trabajo. Aunque pueda parecer obvio, es importante sealar que una buena explicitacin del objetivo general al que el sitio debe responder, ser la mejor gua para todos los pasos subsiguientes. Este primer paso es bsico para definir la identidad del sitio y, en consecuencia, todos los requisitos que ste debe contemplar. Dar pautas para definir tanto el contenido como la estructura y apariencia del sitio Web que deseamos construir. Lo que se presente en la pantalla y cmo se presente, depender de nuestro propsito y por ello es tan importante hacernos esta pregunta al iniciar el trabajo.

Como segundo paso, debemos identificar cules sern las diferentes poblaciones meta o audiencias, a las cuales nos queremos dirigir. El tipo de poblacin a la cual se desee llegar definir el contenido y el tipo de lenguaje a utilizar as como la forma de presentar los textos, la forma de organizacin de las pginas, los colores, el tipo y cantidad de grficos, etc. No es lo mismo hacer una publicacin en la Web cuando se espera que las personas visitantes sean profesionales en un rea especfica y con un conocimiento tcnico definido, que hacer una publicacin para una poblacin no determinada. Tampoco es lo mismo disear el sitio para personas adultas que para nios(as).
9.2.3 Definir el contenido y la estructura del sitio

a) El contenido general del sitio El contenido del sitio est ntimamente relacionado con los objetivos y la audiencia definidos en los pasos anteriores.
Los sitios con que se acompaa este captulo son meramente ilustrativos.

Como primer paso para definir el contenido, es importante recopilar toda la informacin existente que se desea incluir en el sitio y definir qu nueva informacin es necesario producir. Luego, se debe organizar dicha informacin en secciones, ya que sto ayudar a definir las diferentes pginas que el sitio contendr. Cada seccin podra ser una pgina en nuestro sitio Web. Adems de la informacin, tambin deben considerarse algunos servicios o funciones que el sitio puede ofrecer. Un sitio puede tener, por ejemplo, una funcin que permita realizar bsquedas por palabras clave, formularios para recibir

53 construccin de sitios web


MANUAL DE ESTUDIANTES

informacin de las personas usuarias, foros de discusin, y otros servicios por el estilo. Una vez definidos estos puntos, deben organizarse las secciones y servicios que el sitio contendr, as como el flujo interno de navegacin del sitio, o sea, la forma en que las secciones estarn enlazadas. Como producto de sto tendremos un diagrama de flujo que mostrar las diferentes pginas que debemos construir, as como los enlaces que deben existir entre dichas pginas, quedando as definida la estructura de navegacin del sitio. Una buena estructura puede ser un elemento vital para atraer a las personas lectoras una y otra vez. b) La estructura de navegacin La estructura de navegacin es la forma en que estn enlazadas las diferentes pginas o secciones del sitio. Las posibilidades de navegacin de las personas en el sitio dependen de los enlaces que existan entre sus pginas, y los enlaces se establecen con la intencin de que la navegacin sea apropiada para lograr los objetivos del sitio, que las personas visitantes encuentran fcilmente la informacin que buscan o se quiere mostrar. Al igual que sucede con todo proyecto, es muy importante hacer el esquema de la estructura de navegacin del sitio antes de empezar a construir las pginas. La importancia de un esquema de navegacin radica en lograr un diseo que permita entender fcilmente el sitio, navegar fluidamente en l y llegar a todas las pginas en forma gil. Se pueden mencionar dos tipos bsicos de estructuras: la jerrquica y la relacional, sin embargo tambin se pueden implementar esquemas de tipo mixto, dependiendo de la informacin que se desee presentar.

Estructura jerrquica Esta forma de organizacin es recomendable cuando la pgina se divide en temas o categoras y sub-categoras diferenciables. La figura 9.1 presenta un esquema que ilustra esta estructura de navegacin. En ella, la entrada al sitio Web es por la pgina denominada A, la cual tendra enlaces con las pginas B, C, D y E, a su vez, la pgina D tendra enlaces hacia las pginas F y G. As, el acceso a la pgina G se logra slo si la persona navega de la pgina A a la D y luego de la pgina D a la G.

A B C F
Figura 9.1 Estructura jerrquica

D G

Un caso en el cual podra ser recomendable utilizar una estructura jerrquica de navegacin es un libro en el que la pgina principal (A) contiene un ndice con ttulos que llevan a los diferentes captulos (B, C, D y E) y a su vez, cada captulo tiene secciones separadas. Estructura relacional Con esta estructura de navegacin cualquier pgina puede estar enlazada a cualquiera (ver figura 9.2).

Figura 9.2 Estructura relacional

54 construccin de sitios web


MANUAL DE ESTUDIANTES

Esta es la forma de organizacin ms comn en la Web pues permite gran flexibilidad de navegacin, al permitir que cualquier pgina pueda tener enlaces de hipertexto hacia otras pginas. Cualquiera que sea la estructura de navegacin que escoja, es recomendable que sta se muestre en alguna parte del sitio y que las personas usuarias tengan acceso a ella en todo momento, para evitar que se pierdan, y puedan ubicar fcilmente las pginas que desean visitar. Por ltimo, le aconsejamos considerar los aspectos que le gustan o disgustan de otros sitios web. Por ejemplo, si usted conoce un sitio que facilita la navegacin, puede tratar de analizar e identificar los aspectos que producen este efecto para utilizarlos en la construccin de su sitio.
9.2.4 Estilo grfico de presentacin

Emplee prrafos para dividir el texto en secciones ms cortas. Es ms fcil leer prrafos cortos en una pantalla. Use encabezados para enfatizar las ideas principales. Pero use los nfasis slo donde sean necesarios. Seleccione un tipo de letra (font) que sea visualmente atractivo y claro de leer. Letras demasiado pequeas o muy elaboradas pueden producir desinters en quien lee. No use demasiados tipos diferentes de letra. Utilice colores de texto que contrasten con el fondo; por ejemplo: texto amarillo sobre fondo negro, texto blanco sobre fondo azul, texto negro sobre fondo blanco. b) Los elementos grficos Los elementos grficos (ilustraciones, iconos y fondos) pueden dar una apariencia agradable a las pginas y servir para ayudar a transmitir una idea de manera concisa y agradable. Use figuras e iconos con colores compatibles con el fondo y el texto, para lograr un efecto visualmente agradable. Seleccione un estilo congruente de iconos para todo el sitio. Por ejemplo: todos los iconos con los bordes redondeados, o todos con las lneas delgadas, o con lneas rectas, etc. Use con moderacin los colores muy vistosos y encendidos, como el rojo, pues el ojo humano es muy sensible a ellos y podran convertirse en distractores. Use animaciones como instrumento esttico para resaltar alguna informacin o para hacer atractiva la pgina. Existen actualmente sitios donde se obtienen animaciones que se pueden incorporar a un hiperdocumento. Tambin algunos editores de pginas Web tienen instrucciones para animar texto e imgenes

Al igual que sucede con cualquier publicacin, al desarrollar un sitio Web, se pretende lograr un estilo de presentacin tal que resulte atractivo, funcional, fcil de leer, de recorrer y que apoye las ideas o conceptos que el sitio mismo pretende transmitir. A partir de estos objetivos se deriva el estilo de presentacin del sitio y para definirlo se deben considerar aspectos tales como: el estilo del texto, los elementos grficos y la incorporacin de sonido, animaciones y vdeo A continuacin se presenta un conjunto de recomendaciones con respecto a estos tres puntos. a) El estilo del texto El estilo de texto que se escoja debe ser suficientemente claro para que las personas usuarias puedan leerlo en la pantalla sin dificultad.

55 construccin de sitios web


MANUAL DE ESTUDIANTES

Hay sitios en la Web que tienen bibliotecas de dominio pblico de iconos, figuras y fondos que podemos utilizar. Usted podra encontrarlos a travs de sitios como Altavista o Yahoo. Algunas palabras clave para buscar estos elementos son: icon, graphics, backgrounds, buttons o clipart. Procure utilizar imgenes propias (tanto para ilustraciones como para conos) pues esto dar un aire original a la pgina. Para esto necesitar digitalizar imgenes con un scanner. c) El sonido, las animaciones y el vdeo La utilizacin de mltiples medios audiovisuales (o multimedios) para presentar informacin es cada vez ms comn. Los medios audiovisuales pueden ser de gran ayuda para poder expresar con claridad y eficacia una idea. Sin embargo, en Internet deben, an en la actualidad, ser utilizados con mesura pues las pginas que contienen este tipo de elementos podran ser demasiado pesadas y su transferencia a la computadora cliente podra ser muy lenta. Por lo tanto se recomienda lo siguiente: Los sonidos, las animaciones y los vdeos son recursos audiovisuales atrac-

tivos para llamar la atencin del usuario. Al igual que sucede con los grficos, deben ser utilizados con moderacin para no distraer ni cansar a las personas usuarias. Otras consideraciones a tener en cuenta a la hora de definir el estilo grfico de presentacin de un sitio son: Las personas que visitarn el sitio usan diferentes computadoras, con diferente velocidad, capacidad de memoria, etc. Si su pgina es muy pesada, por ejemplo, no todas las personas podrn bajarla rpidamente y podran aburrirse de esperar antes de que la pgina sea transferida. Las personas que visitarn su sitio usan diferentes navegadores. Si usted utiliza algn elemento que slo puede ser visualizado con la ltima versin del navegador, puede ser que muchas personas no puedan verlo pues estn usando versiones anteriores. Las personas que visitarn su sitio se conectan a Internet a diferentes velocidades. Las personas que navegan por la Web quieren, por lo general, encontrar lo que buscan rpidamente y, al ser la computadora un medio muy dinmico, dedican poco tiempo para inspeccionar las pginas. Mientras ms livianas sean sus pginas, ms accesibles sern.
9.2.5 Construir las pginas y el sitio

La construccin de las pginas se debe hacer en forma paulatina y con base en las consideraciones mencionadas anteriormente. Se puede llevar a cabo con un programa editor de pginas Web o directamente en HTML. Es en este punto donde se debe definir cmo se almacenarn fsicamente las pginas, los elementos grficos, el soni-

56 construccin de sitios web


MANUAL DE ESTUDIANTES

do, las animaciones y el vdeo en el servidor; es decir, cul ser la estructura de directorios y en cules directorios se almacenar cada componente. Usted debera hacer al menos un directorio en el cual guarde las pginas y los recursos audiovisuales (dibujos, iconos, sonidos, animaciones y vdeos). Para sitios muy grandes es preferible que usted haga un directorio para la pgina principal que contenga el archivo HTML con sus recursos audiovisuales y haga subdirectorios para cada una de las pginas asociadas a la pgina principal; cada subdirectorio almacenar el archivo de la pgina en html con sus respectivos recursos audiovisuales. La organizacin de las pginas en directorios y subdirectorios es muy importante para mantener el orden y facilitar la administracin y actualizacin del sitio.
9.2.6 Probar y evaluar el sitio

9.2.7 Registrar un dominio para ubicar el sitio

Dado que el sitio Web debe hacerse visible en la Internet, se debe buscar un proveedor de servicios Internet para colocar su sitio Web en lnea. Usted debe indagar si su organizacin tiene un servidor Web para este efecto. De lo contrario, existen algunos proveedores que ofrecen este servicio en forma remunerada, es decir, alquilan un espacio en un servidor Web para publicar su sitio. Tambin hay, en la actualidad, algunos servidores gratuitos en la Internet. En este punto usted requiere registrar el nombre del sitio o dominio donde quedar montado su sitio.

9.2.8 Instalar el sitio web en el servidor

Siempre es recomendable probar que todas las pginas se vean como pretendemos y que todos los enlaces entre pginas funcionen. Las pruebas se deben hacer primero en el mbito local y luego en el servidor donde se ubicar el sitio. A nivel local en el disco duro de su computadora, usted almacenar las pginas en directorios y, utilizar un programa navegador (por ejemplo, Netscape Navigator o Internet Explorer) para observar cmo se vern las pginas en el sitio. En esta etapa se debe comprobar que: Los textos sean legibles. Las imgenes, los sonidos, las animaciones y el vdeo se desplieguen adecuadamente. Los enlaces entre las pginas funcionan conforme se haba diseado. No aparezca ningn mensaje de error.

La instalacin del sitio web se puede lograr de alguna de las tres maneras siguientes: a) con ayuda de la persona que administra el servidor web, b) transfiriendo el directorio con los archivos mediante el protocolo de comunicacin ftp, c) en forma guiada desde algn programa especialmente diseado para instalar sitios web. a) Instalacin con ayuda de la persona que administra el servidor Web Bajo este esquema las personas que disean el sitio simplemente entregan las pginas, organizadas en directorios, a la persona que administra el servidor Web y sta persona se encarga de colocar el sitio dentro del servidor. Esta es una alternativa, pero existen mecanismos mediante los cuales usted puede hacerlo directamente.

57 construccin de sitios web


MANUAL DE ESTUDIANTES

b) Instalacin transfiriendo el directorio con los archivos mediante el protocolo de comunicacin FTP. FTP (file transfer protocol) es un protocolo para la transferencia de archivos en Internet; es decir, es un mecanismo mediante el cual se pueden trasladar archivos de una computadora a otra. El protocolo FTP se utiliza entonces para montar su sitio en el servidor Web. Usted puede, desde el Netscape Navigator, montar el sitio con FTP. As, en la parte de localizacin de pginas, superior de la ventana de navegacin, donde usualmente se coloca la etiqueta http://..., se coloca lo siguiente:
[ftp://username@nombresitio.net]

Existen en Internet algunos proveedores de servicios web que prestan o alquilan espacios en su servidor y que tienen programas que guan a las personas en la instalacin de su sitio web. Un ejemplo es el servicio que ofrece Geocities (http://www.geocities.com).
9.2.9 Medir el impacto del sitio

Medimos el impacto de un sito porque queremos saber si el sitio tiene xito, si est siendo utilizado o cmo est siendo utilizado, y tambin para conocer mejor a su poblacin usuaria. La medicin del impacto del sitio se logra, principalmente, a travs de estadsticas de acceso, tales como: conteo de la cantidad de personas que acceden a nuestro sitio, cantidad de personas que han visitado cada seccin del sitio, bsquedas realizadas por las personas usuarias, dominio de procedencia de las personas usuarias, bsqueda que hicieron para encontrar nuestro sitio, secciones especiales para que los(as) usuarios(as) suministren datos que nos proporcionen informacin valiosa, etc. Consulte a su proveedor de servicios sobre las estadsticas que ofrece. La informacin derivada de la evaluacin del sitio nos permitir vislumbrar la necesidad de nuevos servicios o informacin dentro del propio sitio. Esta actividad es la que nos permite saber si el sitio que creamos est cumpliendo con los objetivos que nos trazamos y definir la necesidad de modificarlo o actualizarlo para que no pierda su vigencia. Debemos idear mecanismos que nos permitan conocer los beneficios derivados del sitio Web, los cuales podrn ser contrastados con los costos de su desarrollo, operacin y mantenimiento.

donde:
username: representa al login o identificacin del servidor, y nombresitio: es el nombre o domino donde quedar montado su sitio Web.

Netscape Navigator tambin incluye la opcin Upload File... en el men File, con la cual se puede transferir el sitio a un servidor web. c) Instalacin en forma guiada desde algn programa especialmente diseado para instalar sitios web.

58 construccin de sitios web


MANUAL DE ESTUDIANTES

tualizacin.
9.2.10 Actualizar continuamente el sitio

Todo sitio necesita ser actualizado y ofrecer siempre informacin de inters para que las personas lo sigan visitando. Sin embargo, en un momento determinado, un sitio Web puede requerir actualizacin por diversas razones especficas, por ejemplo: Los resultados obtenidos al medir el impacto del sitio muestran que nuestro objetivo no se est cumpliendo. Nuestros objetivos cambiaron. El diseo qued obsoleto. La Web se caracteriza por ser un medio de comunicacin cuya informacin es constantemente actualizada y por lo tanto nuestro sitio debera responder a esa caracterstica. Deseamos tener clientes frecuentes que visiten el sitio y por lo tanto es fundamental ofrecerles informacin y elementos nuevos peridicamente. Cualquiera que sea nuestra razn, para lograr el xito del sitio es recomendable evaluarlo cada cierto tiempo y realizar los cambios necesarios para su mejoramiento. Si, al construir el sitio, se ha organizado la informacin en directorios y subdirectorios, segn las secciones que el sitio tenga, ser ms fcil su ac-

59 construccin de sitios web


MANUAL DE ESTUDIANTES

EVALUACIN

para uso de las personas participantes


Una parte importante de todo entrenamiento es recibir retroalimentacin de las personas que utilizaron los materiales. Por ello, hemos creado este cuestionario para usted nos d sus comentarios. Por favor, tome este cuestionario como una gua y sintase con la libertad para agregar comentarios en cualquier rea adicional que considere pertinente.

Su nombre y direccin (opcional):

Nombre del curso:

Duracin del curso (en horas): Fecha: Lugar en que se desarroll:

Instructores/as:

60 construccin de sitios web


MANUAL DE ESTUDIANTES

En la siguiente tabla indique cules secciones se desarrollaron con una metodologa guiada y cules con una de auto-estudio y experimentacin. Marque la casilla correspondiente con una X.

ITEMS

SU NIVEL DE INTERS alto medio bajo

METODOLOGA Auto Guiado estudio

NIVEL DE DIFICULTAD alto medio bajo

Introduccin al curso de elaboracin de pginas Web con Netscape Composer 1. Introduccin a la construccin de sitios Web

1.1 Qu es la World Wide Web? 1.2 El modelo Cliente/Servidor 1.3 Pginas Web 1.4 El Lenguaje HTML 1.5 Sitios Web 1.6 El URL (Uniform Resource Locator o Localizador Uniforme de Recursos)

2. Los programas para hacer pginas y navegar por la web

2.1 Programas editores de pginas Web 2.2 Programas navegadores de la Web 2.3 Uso de editores de texto y hojas electrnicas 2.4 El paquete Netscape como instrumento generador y visualizador de pginas Web 2.5 Funcionamiento general de Netscape Composer

3. Construccin de una pgina con Netscape Composer

3.1 Escribiendo texto 3.2 Guardando la pgina 3.3 Viendo la pgina con el navegador

61 construccin de sitios web


MANUAL DE ESTUDIANTES

SU NIVEL DE INTERS alto medio bajo


4. Edicin de texto

METODOLOGA Auto Guiado estudio

NIVEL DE DIFICULTAD alto medio bajo

4.1 La primera pgina 4.2 Cmo alinear el texto? 4.3 Cmo cambiar el tipo de letra? 4.4 Cmo cambiar el tamao de letra? 4.5 Cmo cambiar el estilo de letra? 4.6 Cmo cambiar el color de letra? 4.7 Cmo agregar vietas y listas numeradas? 4.8 Cmo cambiar el estilo de las vietas y de la numeracin? 4.9 Cmo establecer ttulos y encabezados?
5. Inclusin de elementos grficos

5.1 Insertando lneas de divisin 5.2 Insertando una imagen 5.3 Algunas opciones del Netscape Composer al incorporar imgenes en pginas Web
6. Creacin de enlaces para la navegacin

6.1 Qu es un enlace? 6.2 Cmo establecer un enlace? 6.3 Cmo eliminar un enlace? 6.4 Cmo establecer enlaces dentro de una misma pgina?
7. Elaboracin de tablas

7.1 Qu es una tabla? 7.2 Cmo insertar una tabla con Netscape Composer? 7.3 Cmo agregar una fila, una columna o una sola celda? 7.4 Cmo borrar una fila, una columna, una sola celda o la tabla completa? 7.5 Cmo cambiar la apariencia de una tabla?
8. Impresin con Netscape Composer

8.1 Visualizacin previa de la pgina 8.2 Imprimiendo la pgina


9. Planificacin de un sitio Web

9.1 Introduccin 9.2 Pasos para la planificacin y produccin de un sitio Web


10. Conclusin, evaluacin y despedida

62 construccin de sitios web


MANUAL DE ESTUDIANTES

Por favor indique a continuacin su nivel de acuerdo con las siguientes oraciones colocando el nmero escogido al final de la frase.
Escala: 1 Estoy en desacuerdo completamente; 2 Estoy en desacuerdo; 3 Neutral; 4 Estoy de acuerdo; 5 Estoy completamente de acuerdo.

11. Los ejercicios fueron de ayuda para entender mejor los temas 12. Las observaciones para las personas participantes fueron de ayuda 13. El diseo grfico del manual lo hizo fcil de leer 14. Las palabras usadas en el manual fueron fciles de entender 15. Las explicaciones en el manual fueron fciles de entender 16. El manual tiene el tamao adecuado 17. Los grficos del manual fueron fciles de leer 18. Los materiales del curso me ayudaron a usar el Netscape Composer 19. El entrenamiento fue como yo lo esperaba 20. Temas que deberan ser agregados:

21. Temas que deberan ser eliminados:

22. Otros comentarios:

63 construccin de sitios web


MANUAL DE ESTUDIANTES

S-ar putea să vă placă și