MANUAL PARA LA construcción de sitios web › ~filosofia › recursos › innovacion › ...9....

M A N U A L P A R A L Aconstrucción de sitios webU T I L I Z A N D O N E T S C A P E C O M P O S E R 4 . X

MANUAL DE ESTUDIANTES

MANUAL DE ESTUDIANTESconstrucción de sitios web2

© 1999, ITrain Group

Publicación de:ITrain Group

unganisha.idrc.ca/itrainFundación Acceso

www.acceso.or.cr

Edición a cargo de:Nora Galeano, Fundación Acceso

Textos:Lilliana Sancho

Edición gráfica:Fernando Francia

ITrain es una colección de materiales decapacitación en el uso de Internet paracapacitadores y estudiantes. Los mate-riales ofrecen un acercamiento interac-tivo, que involucra a los estudiantes enel proceso de aprendizaje y apoya a losinstructores en la planificación y perso-nalización de los cursos.Los manuales del programa ITrain con-tienen materiales tanto para autodidac-tas como para tutores.

Los materiales han sido desarrolladospor ITrain Collective, un grupo multicul-tural de capacitadores en Internet conexperiencias de trabajo alrededor delmundo. El objetivo ha sido producir ungrupo balanceado de manuales de capa-citación, que sirva tanto para usuariosnuevos de la Internet como de nivel in-termedio, al igual que para instructoresnuevos y experimentados.

Acceso es una organización no guberna-mental de desarrollo, con sede en CostaRica y programas activos en Centroamé-rica. Ofrecemos asistencia técnica, capa-citación y apoyo para el desarrollo insti-tucional a organizaciones locales, nacio-nales e internacionales que compartennuestro compromiso con un desarrolloequitativo, participativo y sostenible.

Acceso ofrece asistencia en planificacióninstitucional y programática, desarrollode juntas directivas, usos básicos y estra-tégicos de la Internet, diseño y desarro-llo de presencias institucionales en elWorld Wide Web, diseño de estrategiasde comunicación y en otras áreas afines.

construcción de sitios webMANUAL DE ESTUDIANTES3

Presentación 5

1. Introducción a la construcción de sitios Web 61.1 ¿Qué es el World Wide Web? 61.2 El modelo Cliente/Servidor 61.3 Páginas web 81.4 El lenguaje HTML 91.5 Sitios Web 101.6 El URL (Uniform Resource Locator o Localizador Uniforme de Recursos) 11

2. Los programas para hacer páginas y navegar por la web 122.1 Programas editores de páginas Web 122.2 Programas navegadores de la Web 132.3 Uso de editores de texto y hojas electrónicas para hacer páginas Web 132.4 El paquete Netscape como instrumento generador y visualizador de páginas Web 142.5 Funcionamiento general del Netscape Composer 15

3. Construcción de una página con Netscape Composer 163.1 Escribiendo texto 163.2 Guardando la página 173.3 Viendo la página con el navegador 18

4. Edición de texto 214.1 La primera página 214.2 ¿Cómo alinear el texto? 234.3 ¿Cómo cambiar el tipo de letra? 244.4 ¿Cómo cambiar el tamaño de la letra? 254.5 ¿Cómo cambiar el estilo de la letra? 264.6 ¿Cómo cambiar el color de la letra? 274.7 ¿Cómo agregar viñetas y listas numeradas? 274.8 ¿Cómo cambiar el estilo de las viñetas y de la numeración? 294.9 ¿Cómo establecer títulos y encabezados? 30

5. Inclusión de elementos gráficos 325.1 Insertando líneas de división 325.2 Insertando una imagen 335.3 Algunas opciones del Netscape Composer al incorporar imágenes en páginas Web 34

5.3.1 Modificación de la imagen 345.3.2 Colocar la imagen como fondo 345.3.3 Alineamiento de las imágenes con respecto al texto 345.3.4 Cambio del tamaño de la imagen 345.3.5 Hacer un marco alrededor de la imagen 345.3.6 Despliegue de imágenes 35

6. Creación de enlaces para la navegación 366.1 ¿Qué es un enlace? 366.2 ¿Cómo establecer un enlace? 386.3 ¿Cómo eliminar un enlace? 396.4 ¿Cómo establecer enlaces dentro de una misma página? 40

C O N T E N I D O


7. Elaboración de tablas 437.1 ¿Qué es una tabla? 437.2 ¿Cómo insertar una tabla con Netscape Composer? 437.3 ¿Cómo agregar una fila, una columna o una sola celda? 467.4 ¿Cómo borrar una fila, una columna, una sola celda o la tabla completa? 477.5 ¿Cómo cambiar la apariencia de una tabla? 48

8. Impresión con Netscape Composer 508.1 Visualización previa de la página 508.2 Imprimiendo la página 51

9. Planificación de un sitio Web 529.1 Introducción 529.2 Pasos para la planificación y producción de un sitio Web 53

9.2.1 Definir el objetivo del sitio 539.2.2 Identificar la o las diferentes audiencias o poblaciones meta 539.2.3 Definir el contenido y la estructura del sitio 539.2.4 Estilo gráfico de presentación 559.2.5 Construir las páginas y el sitio 569.2.6 Probar y evaluar el sitio 579.2.7 Registrar un dominio para ubicar el sitio 579.2.8 Instalar el sitio Web en el servidor 579.2.9 Medir el impacto del sitio 589.2.10 Actualizar continuamente el sitio 59

Evaluación para uso de las personas participantes 60


Este manual se ha elaborado con elpropósito de facilitar la construcción desitios Web, utilizando como herramien-ta Netscape Composer 4.x. Forma partede una serie de materiales de capaci-tación en Internet desarrollados para elITrain Group, con el soporte financierodel Centro Internacional de Investiga-ción en Desarrollo (International Deve-lopment Research Centre, IDRC). Es unmanual básico y se puede obtener enforma gratuita de la direcciónhttp://unganisha.idrc.ca/itrain/.

Se espera que este material sea utilizadopor capacitadores(as) de herramientasde Internet así como por usuarios(as) delos países en desarrollo. Para su facili-dad de uso ha sido organizado en nuevesecciones.

1. Introducción a la construcción desitios Web

2. Los programas para hacer páginas ynavegar por la web

3. Construcción de una página conNetscape Composer

4. Edición de texto

5. Inclusión de elementos gráficos

6. Creación de enlaces para lanavegación

7. Elaboración de tablas

8. Impresión con Netscape Composer

9. Planificación de un sitio Web

Evaluación para uso de las personasparticipantes

P R E S E N T A C I Ó N

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

1.1 ¿Qué es la World Wide Web?

La World Wide Web (WWW) se puede entender como una grancolección de documentos o archivos, llamados páginas,almacenadas en computadoras alrededor del mundo, en la redInternet. Al tener acceso a la Internet, se tiene acceso a toda esainformación y, con sólo hacer “click”, se puede navegar a travésde una gran cantidad de información, saltando de página enpágina de la Web.

1.2 El modelo Cliente/Servidor

Para comprender el funcionamiento de la Web es necesario en-tender la relación básica entre clientes y servidores que se lleva acabo en ella. Un servidor es una computadora, conectada a la In-ternet las 24 horas del día, que contiene y distribuye información.Un cliente es un programa en su computadora que solicita, pro-cesa y despliega esa información. En la Web, los “servidores” al-macenan y facilitan “páginas Web” y los “clientes” despliegan laspáginas en su computadora.

De esta manera, cuando en la Web ustedhace “click” sobre un botón o sobre un tex-to para, por ejemplo, ver la información deuna universidad de su interés, su computa-dora tiene el papel de un cliente que le so-licita al servidor Web de la universidadque le transfiera la información que ha pu-blicado en la Web. Una vez que la comuni-cación haya sido establecida, por medio de

las conexiones que ofrece la Internet, el servidor Web de la uni-versidad envía una copia de sus páginas a su computadora paraque ésta las despliegue.


C A P Í T U L O 1Introducción a la construcción de sitios web

Figura 1.4 Modelo Cliente-Servidor

Solicita

Cliente

Responde asolicitud

C O N T E N I D O

1.1 ¿Qué es la World Wide Web?

1.2 El modelo cliente/servidor

1.3 Páginas web

1.4 El lenguaje HTML

1.5 Sitios web

1.6 El URL (Uniform Resource Locatoro Localizador Uniforme deRecursos)

Servidor

construcción de sitios web

Para ampliar este concepto tomemos como ejemplo elfuncionamiento de la televisión. Bajo esta perspectiva, ¿cuál seríael servidor y cuál el cliente? Como ya se habrá imaginado, loscanales de televisión son los servidores y su televisor es el cliente.Los canales siempre tienen su señal de transmisión disponible ycuando usted selecciona el canal, éste se conecta y envía laimagen a su aparato de televisión. Además, muchas personaspueden estar viendo el mismo canal a la vez. Sin embargo, existendiferencias entre el servidor Web y la televisión como, porejemplo, que en la Web la persona usuaria puede, entre otrascosas, interactuar y publicar directamente información en losservidores y que si se desconecta de la Internet, la página quetiene en pantalla no se apagará. Cabe mencionar, con este últimoejemplo, que el canal envía la misma señal a todos los televisores,pero la forma en que se vea el programa de televisión depende desu televisor. Asimismo, los servidores Web envían las páginas asu computadora, pero la forma y la calidad de despliegue dependede su computadora y de los programas que usted utilice.

MANUAL DE ESTUDIANTES7

Figura 1.1 Página de entrada alWeb de la empresa Netscape


1.3 Páginas Web

Las páginas de la Web son archivos de hipertexto. Estos archivoscontienen texto destacado o subrayado que asocia información dediferentes páginas de la Web. O sea que estos archivos, o páginasWeb, están vinculados a través de enlaces, llamados de hipertexto,como en una red. Esto permite navegar de una página a otra, demanera tal que la lectura de un documento no debe hacerse,necesariamente, en forma secuencial (ver la figura 1.2).

El concepto de hipertexto se amplía al de hiperdocumentocuando, además de texto, las páginas contienen otros recursosaudiovisuales, como son imágenes, sonido o vídeo. El propósitode este tipo de organización es ofrecer flexibilidad de acceso a laspáginas, para que cada persona pueda realizar la lectura deacuerdo con sus intereses. Esta organización es, precisamente, laque posibilita enlazar información de diferente índole para formarla gran telaraña mundial que es hoy la Web.

Las páginas en la Web están escritas en un lenguaje denominadoHTML (Hypertext Markup Language), el cual se describe acontinuación.


Figura 1.2 Ejemplo de hipertexto

Los tigres son felinos querequieren grandesextensiones de terreno parasu subsistencia. Sonmamíferos carnívoros.

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

El león

Es un carnívoroconocido como el “reyde la selva” ...Su pariente el tigre ...

Formas dealimentación:

- Carnívoros- Herbívoros


1.4 El lenguaje HTML

HTML es un lenguaje de programación que sirve para crearhiperdocumentos publicables en la Web, o sea, páginas Web, conenlaces activos a recursos de información alrededor del mundo.Este lenguaje consiste en un conjunto de normas utilizadas paradar formato a un documento. El HTML le dice a cada programanavegador (“Browser”) qué es cada elemento de la página, paraque él pueda interpretarlo en un formato apropiado. En la figura1.3 se puede observar, a manera de ejemplo, una página Websencilla y luego en la figura 1.4 el archivo HTML correspon-diente.

Como puede observar, el texto está formado por etiquetasencerradas entre paréntesis triangulados (“< >”), los cualesindican el formato del texto.

◗ Toda página inicia con la etiqueta <HTML>y termina con la etiqueta </HTML>.

◗ Las etiquetas <HEAD> y </HEAD>encierran encabezados de información de lapágina, como por ejemplo su título.

◗ Las etiquetas <BODY> y </BODY>encierran el contenido de la página, el cualpodrá ser visualizado con un navegador.

◗ <CENTER> y </CENTER> indican que eltexto que aparece en la línea va a aparecercentrado en la página.

◗ á es el código HTML para acentuarvocales, en este caso la a.

◗ <FONT SIZE=+1> y </FONT> indicancaracterísticas del tamaño del texto.

◗ <DIV ALIGN=right> indica que el textoquedará alineado a la derecha.

◗ <P> indica salto de párrafo.


Figura 1.3 Ejemplo de página Web

Figura 1.4 Ejemplo del contenidode un archivo HTML

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


Además de éstas, HTML incluye, entre otras, etiquetas para:◗ Colocar numeración y viñetas◗ Insertar tablas◗ Insertar elementos gráficos◗ Indicar el tipo y tamaño de la letra◗ Colocar casillas para ingreso de texto◗ Hacer enlaces entre páginas, etc.

Cuando la World Wide Web se inició, quienes querían hacerpáginas Web debían conocer las instrucciones HTML y escribirlasdirectamente en un archivo de texto. Sin embargo, en laactualidad existen editores de páginas Web, cuyo funcionamientose asemeja al de los procesadores de palabras. Es decir, laspersonas que hoy desarrollan páginas Web, no requieren escribirdirectamente el código HTML, pues el editor generaautomáticamente el código correspondiente.

En este momento, existen en el mercado muchos editores parapáginas Web, inclusive algunos procesadores de palabras yaincluyen el formato html entre las opciones para guardar losdocumentos. Este manual describe el funcionamiento del editorNetscape Composer, el cual ha sido seleccionado debido,principalmente, a su simplicidad de uso y a que puede serobtenido, gratuitamente, en la Web (http://www.netscape.com).

1.5 Sitios Web

Se denomina sitio Web al conjunto de páginas Web organizadasbajo temas u objetivos comunes y ubicadas, físicamente, en unmismo “dominio” o servidor Web.

Para que un sitio Web pueda ser accesible en la Internet, debeestar almacenado en un servidor Web.



1.6 El URL (Uniform Resource Locator oLocalizador Uniforme de Recursos)

Cada sitio o página Web tiene una dirección única que loidentifica para que pueda ser localizado dentro de la gran redInternet. A esta dirección se le conoce como LocalizadorUniforme de Recursos (Uniform Resource Locator o URL). Sepuede localizar cualquier página Web conociendo su URL.

Observe en la figura 1.1 la dirección http://home.netscape.comque aparece en la parte superior de la pantalla. Éste es el URL delsitio Web de la empresa Netscape.

Con el siguiente ejemplo analizaremos cómo está compuesta unadirección URL:

http://www.idrc.ca/unganisha/index.html

Los diferentes elementos que componen el URL son:

http: es el protocolo de comunicación estándar que se usa enInternet para transferir y leer las páginas Web o archivos dehipertexto entre computadoras. Significa HyperText TransferProtocol.

www.idrc.ca: es el nombre del servidor o computadora dondeestá almacenado el archivo.

unganisha: en el ejemplo anterior, es el nombre del directorio bajoel cual está almacenado el archivo en el servidor.

index.html: es el nombre del archivo en sí. Note que el documentotiene extensión html, pues es un archivo de hipertexto.


MANUAL DE ESTUDIANTESconstrucción de sitios web12

2.1 Programas editores de páginas Web

Como se mencionó en el capítulo 1, las páginas de un sitio Webse programan con un lenguaje denominado HTML y, cuando laWeb inició, era necesario para quienes quisieran construirpáginas, conocer a cabalidad las instrucciones y las etiquetaspropias de este lenguaje. Así las personas que programaban laspáginas utilizaban un editor de texto para escribir lasinstrucciones y guardaban el archivo con la extensión “html”,pero no podían ver cómo luciría la página sino hasta después deque la abrieran con un programa navegador (“browser”).

Posteriormente, salieron al mercado programas editores depáginas Web, los cuales, mediante una interfaz gráfica (botones,barras de herramientas y menúes) facilitan la construcción depáginas. Entonces, quienes las hacen no requieren conocer condetalle el lenguaje HTML.

Los programas editores de páginas Web presentan unfuncionamiento similar al de los procesadores de palabras y losprogramas de dibujo actuales, ya que, entre otras cosas, permitenescribir texto y editarlo, incorporar gráficos y tablas, etc.,mostrando, con bastante precisión, la forma en que lucirá lapágina en la Web.

Entre los programas editores actualmente más conocidos seencuentran el Microsoft FrontPage y el Netscape Composer. Esteúltimo es presentado al final de este capítulo y estudiado condetalle a lo largo de este manual.

C A P Í T U L O 2Los programas para hacer páginas y navegar por la Web

C O N T E N I D O


2.2 Programas navegadores de la Web

2.3 Uso de editores de texto y hojaselectrónicas para hacer páginasWeb

2.4 El paquete Netscape comoinstrumento generador yvisualizador de páginas Web

2.5 Funcionamiento general del Netscape Composer


2.2 Programas Navegadores de la Web

Como se mencionó en el capítulo 1, un programa navegador o“browser” es la interfaz que tiene la persona usuaria para recorrerla Web. El navegador interactúa con un servidor Web, medianteuna relación cliente/servidor; así cuando usted hace “click” sobreun elemento de una página Web, el navegador solicita al servidorque le envíe los documentos específicos para desplegarlos en lapantalla de su computadora.

Algunos de los programas navegadores más comunes son:Internet Explorer (de Microsoft), Netscape Communicator (deNetscape) y MOSAIC (de NCSA). Estos programas leen losdocumentos que están escritos en HTML.

2.3 Uso de editores de texto y hojas electrónicaspara hacer páginas Web

Actualmente muchos programas, como procesadores de palabras,hojas electrónicas y programas para hacer presentaciones, comoMicrosoft Word, Microsoft Excel y Power Point, incorporan entresus funciones la posibilidad de hacer enlaces entre páginas yguardar archivos en formato html. Tanto Word 97, Excel 97 comoPower Point 97 incluyen la opción “Guardar como HTML ...” o“Save as HTML ...” dentro del menú “Archivo” o “File”.

Por ejemplo, usando Word 97, usted puede escribir el texto de suspáginas, incorporar tablas y enlaces a otras páginas y luegoguardar el archivo con formato html.

Aunque estos programas no son especializados para crear páginasWeb, son útiles para este propósito, principalmente cuando lainformación que queremos publicar en la Web ya está escrita conalguno de estos instrumentos. De esta manera, se puede,simplemente, guardar el archivo ya existente en formato html yno tener que volver a digitar la información.



2.4 El paquete Netscape como instrumentogenerador y visualizador de páginas Web

El editor Netscape Composer está incluido dentro del paqueteNetscape Communicator. Las principales herramientas que elNetscape Communicator contiene actualmente son:

◗ Netscape ComposerSirve para editar y generar páginas Web.

◗ Netscape NavigatorSirve para navegar por la Web.

◗ Netscape Messenger MailboxSirve para administrar el correo electrónico.

Algunas versiones del paquete Netscape incluyen también lossiguientes programas:

◗ Netscape Collabra Discussion GroupsPermite organizar y distribuir correspondencia desus propios grupos de discusión en Internet.

◗ Netscape CalendarOfrece un calendario para administración deagendas.

◗ Netscape NetcasterEs una herramienta que permite que sucomputadora quede conectada a ciertos “canales”en el Web. Un “canal” es en realidad un servidorWeb al cual usted se puede suscribir para recibirinformación en forma automática.



2.5 Funcionamiento general del NetscapeComposer

Para iniciar la ejecución 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 Communicator4) Una vez allí, seleccione Netscape Composer

Habiendo efectuado el paso anterior, aparecerá la siguienteventana:

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 menúes (como File) presentan opciones estándaren la mayoría de los programas.

Una barra de composión, de acceso rápido, la cual contienecomandos predefinidos que también aparecen en los menúes.

Una barra de formato, de acceso rápido, para definir aspectosrelacionados con la apariencia del texto.

A lo largo de este manual se irán utilizando y explicando cada unade las opciones para su mejor comprensión.


Barra de formato

Barra de composición

Menú principal

Area de trabajo

Figura 2.1 El ambiente de trabajo delNetscape Composer


3.1 Escribiendo texto

Escribiremos un texto sencillo con el fin de construir una páginatambién sencilla, con lo cual usted obtenga una noción delfuncionamiento del Netscape Composer. La página que usted vaa 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 página!”b) Centre en la página el texto que escribió, para ello posicione el

cursor sobre el texto, abra el menú Format, seleccione la opciónAlign y una vez allí seleccione la opción Center.

c) Presione la tecla de entrada, Enter, para cambiar de línea.d) Escriba su nombree) Alinee su nombre a la derecha así: seleccione, con el menú

Format, la opción Align y una vez allí seleccione la opción Right.

En este momento usted ya ha creado su primera página Web,


C A P Í T U L O 3Construcción de una página con Netscape Composer

C O N T E N I D O

3.1 Escribiendo texto

3.2 Guardando la página

3.3 Viendo la página con el navegador

Figura 3.1 La primera página vistacon el Navegador


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

3.2 Guardando la página

Es importante recordar la importancia de mantener los archivosorganizados en directorios o carpetas para su mejor localización ymanejo; por lo tanto se recomienda crear un directorio en el cualusted almacene sus páginas junto con los recursos audiovisualesque éstas utilicen (archivos de gráficos, sonidos, animaciones yvídeos).

Para guardar la página que acaba de crear haga lo siguiente:

a) Seleccione la opción Save As del menú File. Aparecerá entoncesuna ventana similar a la que se muestra a continuación:

En este caso, el directorio donde se guardarán las páginas sellama: “EjemplosHTML”.

b) Escriba en el espacio File name: el nombre con que almacenarála página en el disco (por ejemplo: primera). Note que en elcampo Save in: aparece el directorio en el cual quedará grabado eldocumento. Los iconos que aparecen en la parte superior derechason estándares en Windows para cambiar de directorio, crear unanueva carpeta, etc. Note además que el documento debe quedaralmacenado con tipo HTML Files.


Figura 3.2 Ventana para Guardar elarchivo


c) Aparecerá luego una ventana en la cual debe ingresar el títulocon que se desplegará la página en Internet, por ejemplo: “MiPrimera Página”, como se muestra a continuación:

d) En este punto su página ya estará almacenada.

En la próxima sección veremos cómo acceder a su página desdeel navegador.

3.3 Viendo la página con el navegador

PASO 1: Entrando al Netscape Navigator

En la sección anterior usted creó y guardó su primera página,ahora activaremos el Netscape Navigator para que puedavisualizar la página desde el navegador.

Desde el Netscape Composer, el navegador se puede activar devarias maneras:

a) Accionando la opción Navigator del menú Communicator, o b) Seleccionando el botón Preview de la barra de composición, oc) Activándolo desde Windows, accionando los menúes: Start,Programs, Netscape Communicator y finalmente NetscapeNavigator.


Figura 3.3 Ventana para indicar elTítulo de la página


PASO2: Abriendo un documento

Este paso se realiza si usted no se sabe de memoria la ubicacióndel documento.

a) Seleccione del menú File la opción Open Page, con lo cual sedesplegará una ventana para buscar la ubicación delhiperdocumento, como se muestra a continuación:

b) Seleccione la opción Choose File para buscar el archivo quedesea desplegar. Aparecerá entonces la ventana que se muestra enla figura 3.5.

Puede ahora utilizar los botones de Windows para ubicar elhiperdocumento. Así, de acuerdo con el paso 4 de la secciónanterior, nuestra página, con nombre primera, había quedadoalmacenada en el directorio EjemplosHTML del disco C: (esdecir, con ruta c:\ EjemplosHTML\primera.html).


Figura 3.5 Ventana paraabrir una página

Figura 3.4 Ventana paraseleccionar una página


Presione la opción Open de la ventana para indicarle al navegadorla ubicación de la página.

c) Aparecerá nuevamente la ventana del punto a), pero ahora conla localización del hiperdocumento, de la siguiente manera:

d) Ahora puede presionar el botón Open, con lo cual su páginaserá finalmente desplegada en el navegador como se muestra enla figura 3.7.

Observe que la dirección tiene el prefijo file:///, lo cual indica quela página proviene de un archivo. Si la página estuviera en unservidor disponible en Internet, el prefijo sería http://.

Una vez con la página desplegada, usted puede regresar alNetscape Composer desde el menú Communicator del navegador.

La página anterior es muy sencilla, en las siguientes seccionesveremos cómo insertar, en una página Web, diferentes estilos detexto, agregar gráficos, enlaces, tablas, etc.


Figura 3.6 Ventana con lapágina seleccionada

Figura 3.7 Página cargadaen el navegador


4.1 La primera página

La página que se muestra en la figura 4.1 servirá de base paratrabajar a lo largo de este capítulo en la edición del texto.


Figura 4.1 Página de ejercicio

C A P Í T U L O 4Edición de texto

C O N T E N I D O

4.1 La primera página

4.2 ¿Cómo alinear el texto?

4.3 ¿Cómo cambiar el tipo de letra?

4.4 ¿Cómo cambiar el tamaño de la letra?

4.5 ¿Cómo cambiar el estilo de la letra?

4.6 ¿Cómo cambiar el color de la letra?

4.7 ¿Cómo agregar viñetas y listasnumeradas?

4.8 ¿Cómo cambiar el estilo de las viñetasy de la numeración?

4.9 ¿Cómo establecer títulos yencabezados?


Iniciaremos con un ejercicio para escribir el texto contenido en lapágina.


Ejercicio #1:Escribiendo el texto

sin formatoConstruya una página con el siguiente texto, sinpreocuparse aún por el formato. Luego guarde la páginacon un nombre significativo (por ejemploconferencia1.html):

Congreso de Investigaciones en SaludLugar: Gran Hotel Internacional

Mi Ciudad, Mi PaísFecha: 22 de noviembre del 2001

Temas Generales:

Salud de la mujerSalud de las personas de tercera edadAtención a poblaciones marginalesLa medicina natural y la salud

Presentación de Ponencias:Las ponencias deberán ser presentadas de acuerdo conel formato establecido por la Comisión Organizadora.

Las ponencias deben ser recibidas por la Comisión amás tardar el 31 de julio del 2001.

Contactos:

Para obtener mayor información puede comunicarse conEldoctor Pérez, a la dirección electró[email protected]

Con base en el texto quedigitó al inicio del capí-tulo:

a) Seleccione el siguien-te fragmento del texto ycéntrelo en la página:Congreso de Investigaciones enSaludLugar: Gran HotelInternacionalMi Ciudad, Mi País

Fecha: 22 denoviembre del 2001

b) Seleccione el siguien-te fragmento del texto ycéntrelo en la página:Para obtener mayorinformación puedecomunicarse conEldoctor Pérez, a ladirección electró[email protected]


4.2 ¿Cómo alinear el texto?

a) Seleccione el texto que desea alinear.b) Seleccione el menú Format.c) Seleccione la opción 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 páginaCenter para centrar el texto en la páginaRight para alinear el texto a la derecha de la página.


Figura 4.2 Menú para alinear el texto

PISTA

Una forma rápida de alinear el texto es usando la barra de formato, así:

a) Seleccione el texto que desea alinearb) Escoja el tipo de alineamiento seleccionando primero el icono de más a la derecha de labarra de formato, como se muestra en la siguiente figura, y luego seleccionando el iconocorrespondiente a la alineación a la izquierda, al centro o a la derecha:

Alineamiento

Ejercicio #2:Alineación del

texto

Cambiando el tipode letra

Seleccione las palabras:Fecha y Lugar ycámbieles el tipo deletra.


4.3 ¿Cómo cambiar el tipo de letra?

a) Seleccione el texto al cual desea modificar el tipo de letrab) Seleccione el menú Formatc) Seleccione la opción Font. Se abrirá un menú como se muestraen la siguiente figura.

Observe que se listan todos los tipos de letra que dispone sucomputadora.


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 letrab) Seleccione de la barra de formato que se muestra a continuación, la opción del tipo deletra. Aparecerá entonces una lista de letras, de la cual puede seleccionar la que desee.

Tipo de letra

Ejercicio #3:

Cambiando el tamaño

de letra

Seleccione el texto“Congreso de Investiga-ciones en Salud” ycámbiele el tamaño deletra a 18 puntos.


4.4 ¿Cómo cambiar el tamaño de la letra?

a) Seleccione el texto al cual desea modificar el tamaño de letrab) Seleccione el menú Format, c) Seleccione la opción Size. Se abrirá un menú como se muestraen la siguiente figura:


PISTA

a) Seleccione el texto al cual desea modificar el tamaño de letrab) Seleccione de la barra de formato, que se muestra a continuación, la opción del tamañode letra. Aparecerá entonces una lista de tamaños, de la cual puede seleccionar el que desee.

Tamaño de letra

Ejercicio #4:

Figura 4.4 Menú para seleccionar el tamaño de letra

Cambiando el estilo de letra

a) Ponga en letranegrita cada uno de lossiguientes textos:

“Congreso deInvestigaciones enSalud”“Fecha”“Lugar”

c) Ponga en letra itálicalos siguientes textos:

“Gran HotelInternacional”“Mi Ciudad, Mi País”“22 de noviembre del2001”


4.5 ¿Cómo cambiar el estilo de la letra?

a) Seleccione el texto al cual desea modificar el estilo de letrab) Seleccione el menú Formatc) Seleccione la opción Style. Se abrirá un menú como se muestraen la siguiente figura:

d) Note que las posibles opciones son:

Bold Letra negritaItalic Letra cursivaUnderline SubrayadoStrikethrough TachadoSuperscript SuperíndiceSubscript SubíndiceBlinking Letra intermitenteNonbreaking Sin fin de línea, el renglón es de

tamaño “infinito”


Figura 4.5 Menú para seleccionar el estilo de letra

PISTA

La barra de formato se puede utilizar para cambiar rápidamente el estilo de un texto, si elestilo deseado es negrita, cursiva o subrayado, tal como se ilustran las opciones de lasiguiente figura:

Negrita Cursiva Subrayada

Ejercicio #5:

Cambiando el color de letra

Seleccione el fragmentode texto que desee ycámbiele de color conalguno de los métodosanteriores.


4.6 ¿Cómo 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 opción Color... Se abrirá un menú con la paleta decolores, de la cual podrá escoger el color que desee.

4.7 ¿Cómo agregar viñetas y listas numeradas?

Si ya escribió el texto:

a) Seleccione el segmento de texto al que desea ponerlenumeración o viñetasb) Seleccione el menú Format.c) Seleccione la opción List. Se abrirá un menú con las opcionesposibles, tal y como se muestra en la figura 4.6.

Una vez seleccionada la opción, el texto quedará modificado.

Si aún no ha escrito el texto y desea que la lista se vayaconstruyendo conforme escribe, entonces:

a) Coloque el cursor al inicio del párrafo donde va a escribir eltexto.b) Seleccione el menú Format.c) Seleccione la opción List.d) Se abrirá un menú con las opciones posibles, tal y como semuestra en la figura 4.6.


PISTA

Use la barra de formato que se muestra a continuación para cambiar el color de la letra:

Color de la letra

Ejercicio #6:

Agregando viñetas

Agregue viñetas al si-guiente texto que escri-bió al inicio del capítulo(o escríbalo si aún no loha hecho):“Salud de la mujerSalud de las personasde tercera edadAtención a poblacionesmarginalesAvances en cardiología”


e) Una vez seleccionada la opción, aparecerá la primera viñeta oel primer número. Luego, conforme usted termine el párrafo ypresione la tecla de “entrada” (<Enter>), el Composer irácolocando las siguientes viñetas automáticamente.

Note que las posibles opciones son las siguientes:None Elimina las viñetas y/o la numeraciónBulleted Coloca viñetas (●)Numbered Coloca númerosDescription Separa la lista con una marca de párrafo, pero

no coloca una viñeta visibleDirectory Coloca viñetas (●)Menu Coloca viñetas (●)

Para cambiar el tipo de viñeta o número refiérase a la secciónsiguiente.


Figura 4.6 Menú para seleccionar viñetas

PISTA

a) Se puede poner numeración y viñetas al texto ya existente o iniciar un párrafo con nuevanumeración y/o viñetas. Si el texto ya está escrito simplemente debe seleccionarlo y luegopresionar la opción de viñetas o de numeración de la barra de formato.b) También puede seleccionar primero la opción de numeración o la de viñetas de la barrade formato, con lo cual Netscape Composer coloca la primera viñeta o el primer número, yluego al terminar la línea y presionar la tecla de entrada (<Enter>), apareceráautomáticamente la siguiente viñeta o número.

Viñetas Numeración

Ejercicio #7:

Cambiando el estilo de las

viñetas

a) Seleccione elsiguiente fragmento detexto, que escribió alinicio del capítulo (oescríbalo ahora si no lohizo antes):

Las ponencias deberánser presentadas deacuerdo con el formatoestablecido por laComisión Organizadora.

Las ponencias debenser recibidas por laComisión a más tardarel 31 de julio del 2001.

b) Póngales un estilo deviñeta diferente al queusted haya utilizadoanteriormente.


4.8 ¿Cómo cambiar el estilo de las viñetas y de lanumeración?

Nota: Para cambiar el estilo de las viñetas o de la numeración deuna 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 opción Character Properties del menú Format.Dependiendo del estilo (Style) de la lista que puede ser “NumberedList” o “Bullet (Unnumbered) List” aparecerán las opciones parahacer una lista numerada o una lista con viñetas. Las figuras 4.7y 4.8 muestran las posibles opciones de numeración y viñetas quepermite Netscape Composer.


Ejercicio #8: Figura 4.7 Cambio deestilo de numeración.

Figura 4.8 Cambio deestilo de viñetas.

Poniendoencabezados

Ponga los títulos “Te-mas generales”, “Pre-sentación de Ponen-cias”, y “Contactos” co-mo encabezados de tipo2 (Heading 2).


4.9 ¿Cómo establecer títulos y encabezados?

a) Si el texto ya está escrito, seleccione el texto al que quiere darformato de título. b) Luego seleccione la opción Heading del menú Format (verfigura 4.9).c) Elija el tipo de encabezado (1 es el título mayor y 6 es el títulomenor).d) Nota: Si prefiere indicar el tipo de encabezado antes de escribirel texto, seleccione directamente la opción Heading del menúFormat (ver figura 4.9), seguido del tipo de encabezado (1 es eltítulo mayor y 6 es el título menor). El cursor cambiará de tamañode acuerdo con el tipo de encabezado seleccionado y usted podráempezar a escribir el texto.

Netscape Composer provee estilos de texto predefinidos paraescribir títulos o encabezados que destaquen en las páginas.Observe los títulos que aparecen en la hoja de la figura 4.10 quese muestra en la siguiente página.

El encabezado “Catálogo de Libros (por área)” se hizo con elestilo denominado Heading 1 y los encabezados “Artes yHumanidades”, “Computación e Informática” y “Educación” conel estilo denominado Heading 2. El Netscape Composer tiene seistipos de encabezados predefinidos, que son útiles para que ustedno tenga que definir el estilo de cada título y subtítulo dentro dela página.

Realice el ejercicio 9 para hacer encabezados.


Figura 4.9 Selección delencabezado

Ejercicio #9


PISTA

a) Utilice la barra de formato para cambiar el estilo de encabezado (ver figura 4.11). Si eltexto ya está escrito, selecciónelo, luego seleccione la opción de estilo de la barra y el tipode encabezado que aparece enla lista (Heading 1 es el títulomayor y Heading 6 es el títulomenor).

b) Si prefiere indicar el tipo deencabezado antes de escribir eltexto, seleccione directamentela opción de estilo de la barrade formato. El cursor cambiaráde tamaño de acuerdo con eltipo de encabezadoseleccionado y usted podráempezar a escribir el texto.

Figura 4.11 Selección de encabezado desde la barra de formato

Figura 4.10 Ejemplo de diferentesencabezados

Insertando doslíneas de división

Use conferencia1.html,página que se ha cons-truido a lo largo de estemanual, e inserte doslíneas de división, unaantes del texto “Lugar”y otra después de“fecha”, tal y como semuestra en la figura 5.2.


5.1 Insertando líneas de división

a) Seleccione el menú Insert.b) Seleccione la opción Horizontal Line, tal y como se muestra en lasiguiente figura:


C A P Í T U L O 5Inclusión de elementos gráficos

Figura 5.1 Menú para insertar líneas de división

C O N T E N I D O5.1 Insertando líneas de división

5.2 Insertando una imagen

5.3 Algunas opciones del NetscapeComposer al incorporarimágenes en páginas Web

5.3.1 Modificación de la imagen

5.3.2 Colocar la imagen como fondo

5.3.3 Alineamiento de las imágenes conrespecto al texto

5.3.4 Cambio del tamaño de la imagen

5.3.5 Hacer un marco alrededor de laimagen

5.3.6 Despliegue de imágenes

Ejercicio #1:

Figura 5.2 Una página con líneas de división

Insertando unaimagen en la

página del ejercicio

a) Utilice la páginaconferencia1.html e in-serte cualquier imagenque usted tenga alma-cenada en su disco duro.b) Reduzca el tamaño dela imagen que insertó detal manera que sea ape-nas una ilustración allado del título “Congre-so de Investigaciones enSalud”.


5.2 Insertando una imagen

La imagen que usted va a insertar, debe estar almacenada en algúndirectorio de su disco duro o servidor.Netscape Composer permite insertar imágenes que estánalmacenadas en los formatos: gif, jpg y jpeg.

a) Seleccione la opción Image... del menú Insert o seleccione elicono de Image de la barra de Composición. Aparecerá entonces loque se muestra en la figura 5.3.

b) Coloque el nombre del archivo que contiene la imagen en elespacio titulado “Image location - Enter a remote URL or local file”. Sidesconoce el nombre o la ubicación del archivo, puede buscarloseleccionando la opción Choose File... Al seleccionar esta opción,aparecerá una ventana (ver figura 5.4) estándar de Windows que lepermitirá buscar el archivo a insertar.

Como se mencionó anteriormente las imágenes deben estaralmacenadas en su computadora o en su servidor para poderinsertarlas. Las imágenes se pueden obtener de diferentes lugares.


Figura 5.3 Ventana para selección de la imagen

Ubicación ynombre delarchivo que

contiene la imagen

Alineamiento de laimagen con

respecto al texto

Dimensión de laimgaen

Coloca la imagencomo fondo

Espacio alrededorde la imagen

Ejercicio #2:


◗ Se pueden usar imágenes que vengan conWindows o con algún programa dedibujo instalado en su computadora,

◗ También se pueden bajar imágenes deInternet. Algunas palabras comunes para buscar,en Yahoo (http://www.yahoo.com) oAltavista (http://www.altavista.com) sitiosque contengan imágenes son: “clipart”,“bitmaps”, “graphics”, “background”,“icons” y “art”.

◗ Se pueden también utilizar fotografías ocualquier tipo de imagen que se puedadigitalizar.

5.3 Algunas opciones del Netscape Composer alincorporar imágenes en páginas Web.

5.3.1 Modificación de la imagen:Si desea realizar algún cambio a la imagen, puede hacerloseleccionando la opción Edit Image.

5.3.2 Colocar la imagen como fondo:Si usted desea que la imagen aparezca como el fondo de la página,entonces marque el botón correspondiente a Use as background.

5.3.3 Alineamiento de las imágenes con respecto al texto:Los botones que aparecen en el área denominada “Text aligment andwrapping around images” tienen el propósito de ubicar la imagencon respecto al texto que está a su alrededor. La imagen puede sercolocada a la izquierda de la página y el texto a su derecha, en laparte superior, en el medio o en la parte inferior. También laimagen puede ser colocada a la izquierda o a la derecha, con textoalrededor.

5.3.4 Cambio del tamaño de la imagen:Usted puede cambiar el tamaño de la imagen cambiando losvalores de la altura (Height) y el ancho (Width) de la imagen queaparecen en el área denominada Dimensions de la figura 5.3. Parareestablecer el tamaño original simplemente presione el botóndenominado “Original Size”. La opción Constrain provoca que elcambio de tamaño 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 marcoalrededor de la imagen, para que no quede demasiado pegada al


Figura 5.4 Ventana para seleccionar la imagen a insertar


texto. Si se desea que el marco se vea, entonces se indica unacantidad de pixeles diferente de cero en el área denominada Solidborder.

5.3.6 Despliegue de imágenesLas imágenes muy grandes requieren mucho tiempo para sercargadas. Netscape Composer incluye la opción “Alt. Text /LowRes...”para que aparezca algún texto mientras la imagen escargada o aparezca una imagen de menor resolución (calidad)mientras la imagen definitiva es cargada. La ventana que apareceal seleccionar esta opción es la siguiente:

En el área “Alternate text” usted puede escribir el texto que deseaque aparezca mientras la imagen se está cargando. En el área “Lowresolution image” puede colocar la ubicación y el nombre delarchivo de baja resolución que usted desea que aparezca mientrasse carga la imagen definitiva; también puede seleccionar esaimagen de baja resolución por medio de la opción “Choose File...”.

Esta facilidad sirve para agregar dinamismo en el momento deldespliegue a páginas que contienen imágenes muy grandes, puesayuda a disminuir el tiempo de espera cuando las páginas estánsiendo transferidas.


Figura 5.5 Propiedades de una imagenalterna


6.1 ¿Qué es un enlace?

Un enlace es una relación que se establece de una página fuente aotra destino. Al hacer “click” sobre el enlace de la página fuente,se activa la página destino. A los elementos de la pantalla quecontienen los enlaces se les conoce como “palabras calientes” o“imágenes calientes”. Esta es una de las formas más comunes denavegación entre páginas de la Web.

Para establecer un enlace se requieren al menos dos páginas Web.Como ejemplo utilizaremos la página Web que se desarrolló apartir del capítulo 4 de este manual para convocar a unaconferencia internacional que vemos a continuación.

Suponga que vamos a enlazar esta página con una página en la


C A P Í T U L O 6Creación de enlaces para la navegación

C O N T E N I D O

6.1 ¿Qué es un enlace?

6.2 ¿Cómo establecer un enlace?

6.3 ¿Cómo eliminar un enlace?

6.4 ¿Cómo establecer enlaces dentrode una misma página?

Figura 6.1 Página fuente para establecer un enlace


cual se explica el formato del documento para la presentación dela ponencia. Para hacerlo breve, construya una página con lainformación que se muestra en la figura 6.2 y guárdela con elnombre “conferencia2.html”. Luego estableceremos el enlacedesde la página de la figura 6.1 para que, cuando se haga “click”sobre la palabra formato que aparece en la sección “Presentaciónde Ponencias”, se active la página de la figura 6.2.


Figura 6.2 Página destino del enlace

Figura 6.3 Enlace entre las páginas


6.2 ¿Cómo establecer un enlace?

Tal y como se mencionó anteriormente, para establecer un enlacese requieren dos páginas. En esta sección deseamos establecer unenlace entre la página de la figura 6.1 y la de la figura 6.2, de lasiguiente manera:

a) Abra la página fuente (por ejemplo la de la figura 6.1, que sellama conferencia1.html).

b) Seleccione el texto que usted desea que sea el enlace. Para esteejemplo, seleccione la palabra “formato” de la página de la figura 6.1.

c) Seleccione la opción Link del menú Insert o seleccione el iconoLink de la barra de composición. Aparecerá la siguiente ventana:

d) Escriba el nombre del archivo que contiene la página destino(la de la figura 6.1) o selecciónelo del disco duro con la opciónChoose File ...

e) Presione el botón OK y ya estará establecido el enlace.

f) Guarde la página.

Para probar que el enlace funciona, abra la página fuente conNetscape Navigator y haga click sobre la palabra “formato”establecida como enlace. Deberá activarse la página destino.6.3 ¿Cómo eliminar un enlace?


Figura 6.4 Ventana paramanejo de enlaces

Insertando otroenlace

Seleccione la palabra“Congreso” de la pági-na conferencia2.html yestablezca un enlace ha-cia conferencia1.html.

Ejercicio #1:


a) Abra la página donde fue establecido el enlace (por ejemplo, lapágina 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 opción Link del menú Insert o seleccione el iconoLink de la barra de composición. Aparecerá la ventana que semuesta en la figura 6.5.

d) Presione el botón Remove Link y luego el botón OK para que elenlace quede eliminado.

e) Guarde la página.

6.4 ¿Cómo establecer enlaces dentro de una


Figura 6.5 Ventana para eliminar unenlace

Eliminando unenlace entre

páginas

Elimine el enlace quehizo en el ejercicio de lasección anterior; es de-cir, elimine el enlace queestableció entre la pa-labra “Congreso” deconferencia2.html yconferencia1.html.

Ejercicio #2:


misma página?

Enlazar secciones dentro de una misma página es útil parapresentar la información de páginas muy grandes; por ejemplo,para hacer documentos en los que al inicio de la página aparece latabla de contenido y, al hacer “click” sobre cada título, el controlse traslada a la sección correspondiente. Un ejemplo de ello semuestra en la figura 6.6.

En Netscape Composer las secciones se enlazan colocandomarcas denominadas enlaces internos o anclas al inicio de lassecciones a las que se quiere llegar (secciones “destino”). Así,para el ejemplo de la página de la figura 6.6, se deberán colocartres anclas: una al inicio de la sección “Temas generales:”, otra alinicio de la sección “Presentación de Ponencias:” y otra al iniciode la sección “Contactos:”. Luego, se colocan los enlaces paranavegar a cada una de esas secciones. Para este ejemplo se debenestablecer tres enlaces: uno en el título “1. Temas generales”, otroen “2. Presentación de Ponencias” y el último en “3. Contactos”.

Para agregar anclas y construir una página como la de la figura6.6 haga lo siguiente:

a) Abra la página conferencia1.html que ha estado desarrollandoa 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.

Insertando elaceslocales

Construya enlaces loca-les dentro de la páginaconferencia2.html.


b.1) Coloque el cursor al inicio de la sección “Temasgenerales:”b.2) Seleccione la opción Target... del menú Insert. Aparecerá laventana que se ve en la figura 6.7.b.3) En esta ventana debe digitar un nombre que identificará alancla. Es recomendable escoger un nombre relacionado conlos tópicos de la sección que se está “anclando”. Coloque, porejemplo, el nombre “Temas” y luego presione el botón OK.b.4) Aparecerá un icono que identifica al ancla contiguo altítulo “Temas generales:”, de la siguiente manera:

b.5) Para la sección “Presentación de Ponencias” coloque unancla con nombre “Presentación” y para la sección“Contactos” coloque un ancla con su mismo nombre.Aparecerán en cada caso los iconos que indican la presencia deun ancla.

c) Agregue el siguiente texto para establecer los enlaces, tal ycomo se muestra en la figura 6.6:

Contenido de esta página

1. Temas generales2. Presentación de Ponencias3. Contactos

d) Establezca los enlaces de la siguiente manera:d.1) Seleccione el título “1. Temas generales” del área decontenido de la página.d.2) Seleccione la opción Link... del menú Insert paraestablecer el enlace. Aparecerá entonces la ventana que se veen la figura 6.8.

Note que muestra la lista de anclas que usted estableció en el


Figura 6.7 Ventana para nombrar un“target”.

Ejercicio #3:


punto b).

d.3) Seleccione el nombre del ancla “Temas” con lo cual seestablecerá un enlace entre el título “1. Temas generales” de lasección de contenido con la sección “Temas generales:”. Eltítulo “1. Temas generales” cambiará de color para indicar quees un enlace.d.4) Repita este mismo paso para establecer los enlaces de lostítulos “2. Presentación de Ponencias” y “Contactos” con susrespectivas secciones dentro de la página.

e) Guarde la página y active el Netscape Navigator para probar lasanclas de la página.


Figura 6.8 Ventana para seleccionar anclas.


7.1 ¿Qué es una tabla?

Una tabla sirve para mostrar información organizada por filas ycolumnas. Un horario, un menú, una lista de productos con sucantidad y su precio, y un presupuesto para todos los meses delaño, son ejemplos de información que podría ser colocada entablas.

A cada espacio donde converge una fila con una columna se lellama celda, Veamos a continuación un ejemplo de una tabla queregistra las ventas de algunos productos durante los dos semestresdel año. Aquí el número 475 está ubicado en la celdacorrespondiente a la fila 4 y la columna 2:

7.2 ¿Cómo insertar una tabla con NetscapeComposer?

En esta sección se utilizará como base la páginaconferencia2.html desarrollada en el capítulo anterior, la cual semuestra en la siguiente página (figura 7.1).

Se desea modificar el contenido de esta página para que luzcacomo en la figura 7.2.


C A P Í T U L O 7Elaboración de tablas

C O N T E N I D O

7.1 ¿Qué es una tabla?

7.2 ¿Cómo insertar una tabla conNetscape Composer?

7.3 ¿Cómo agregar una fila, unacolumna o una sola celda?

7.4 ¿Cómo borrar una fila, unacolumna, una sola celda o la tablacompleta?

7.5 ¿Cómo cambiar la apariencia deuna tabla?

Producto De enero a julio De agosto a diciembre

Borradores 80 34

Cuadernos 580 300

Lápices 475 610

COLUMNA 1 COLUMNA 2 COLUMNA 3

FILA 1

FILA 2

FILA 3

FILA 4

construcción de sitios web44 MANUAL DE ESTUDIANTES

Figura 7.1 Páginapara insertar unatabla

Figura 7.2Ejemplo de una

página quecontiene una

tabla


PASOSa) Agregue el título “Secciones de la Ponencia”b) Seleccione la opción Table... del menú Insert de la siguientemanera:

Luego aparecerá una ventana en la que se establecerán lascaracterísticas de la tabla, tal y como se muestra a continuación:

construcción de sitios web45

Figura 7.3 Menú para insertar una tabla

Figura 7.4 Propiedades de una tabla

Agregando unacelda a la tabla

Coloque el cursor enalguna celda de la tablaque creó e inserte unasola celda. Observe ycomente lo que sucede.


c) Seleccione la cantidad de filas (“rows”) y de columnas(“columns”) que requiere su tabla. Para nuestro ejemplo de lafigura 7.2 se debe indicar 7 filas y 2 columnas.d) Observe en la ventana de la figura 7.4 que se pueden escogerpropiedades de la tabla, tales como el alineamiento de la tabladentro de la ventana, el espaciado entre celdas de la tabla, el colorde fondo de la tabla o una imagen de fondo para la tabla.e) Seleccione el botón OK para que aparezca la tabla. Lascolumnas de la tabla tienen el mismo ancho, el cual se modificaautomáticamente conforme se inserta el texto en cada celda.f) Digite en cada celda el texto correspondiente para formar latabla que aparece en la figura 7.2.

7.3 ¿Cómo agregar una fila, una columna o unasola celda?

Para agregar una fila, una columna o una sola celda a una tabla yaexistente, realice los siguientes pasos:

a) Coloque el cursor dentro de la tabla, en el lugar donde usteddesea insertar el elemento (fila, columna o celda).b) Seleccione del menú Insert la opción Table, tal y como semostró anteriormente en la figura 7.3. Observe que este menúpresenta cuatro opciones:

Table: para insertar una tablaRow: para insertar toda una filaColumn: para insertar toda una columnaCell: para insertar una sola celda.

Seleccione entonces la opción correspondiente dependiendo de loque usted desee insertar (una fila, una columna o una celda). Noteque al insertar una sola celda la tabla queda con una formairregular; es decir, no necesariamente todas las filas de la tablatienen la misma cantidad de columnas.


Ejercicio #1:

Borrando filas ycolumnas

a) Coloque el cursor enalguna celda de la tablaque creó y elimine lafila.b) Coloque el cursor enalguna celda de la tablaque creó y elimine lacolumna.


7.4 ¿Cómo borrar una fila, una columna, una solacelda o la tabla completa?

Para eliminar una fila, una columna o una sola celda a una tablaya existente, realice los siguientes pasos:

PASOS

a) Coloque el cursor dentro de la tabla, en el lugar donde usteddesea eliminar el elemento (fila, columna o celda).b) Seleccione del menú Edit la opción Delete Table como semuestra en la figura 7.5.

c) Este menú presenta cuatro opciones:Table: para borrar una tablaRow: para borrar toda una filaColumn: para borrar toda una columnaCell: para borrar una sola celda.

Seleccione entonces la opción correspondiente dependiendo de loque usted desee eliminar (la tabla completa, una fila, una columnao una celda).


Figura 7.5 Menú para borrarelementos de una tabla

Ejercicio #2:

Cambiando laapariencia de la

tabla

a) Póngale un colordiferente a cada celda dela tabla.b) Póngale un bordemás ancho a la tabla.c) Copie la tabla en otraparte de la página ypóngale una imagen defondo.

Ejercicio #3:


7.5 ¿Cómo cambiar la apariencia de una tabla?

PASOS

a) Coloque el cursor sobre la tabla. b) Seleccione la opción Table Properties del menú Format.Aparecerá la siguiente ventana:

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


Figura 7.6 Ventana para modificar propiedades de una tabla


En el caso de las propiedades de la tabla se puede:

◗ Cambiar el alineamiento (Table Alignment) a la izquierda (left), alcentro (center) o a la derecha (right).

◗ Colocar un título 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 página

(Table width).◗ Indicar una altura mínima para la tabla (Table min. Height).◗ Indicar que todas las columnas deben mantenerse del mismo

tamaño (Equal column widths).◗ Seleccionar un color para el fondo de la tabla. Para ello se marca

la opción Use color y se selecciona el color con el botón queaparece al lado de esta opción.

◗ Colocar una imagen como fondo de la tabla. Para ello, a travésdel botón “Choose File” se selecciona un archivo de imagen quecontenga la imagen correspondiente.


Visualizando unapágina

Abra una páginaexistente y visualice sucontenido a través de laopción Print Preview.


8.1 Visualización previa de la página

Es común, antes de imprimir una página, tener una vistapreliminar de la misma. Para hacerlo, se siguen los siguientespasos:

a) Seleccione el menú File

b) Seleccione la opción Print Preview tal y como se muestra en lafigura 8.1.

c) Aparecerá entonces la página para poder observarla.


C A P Í T U L O 8Impresión con Netscape Composer

C O N T E N I D O

8.1 Visualización previa de la página

8.2 Imprimiendo la página

Figura 8.1 Opción de menú para obtener unavista preliminarEjercicio #1:

Haciendo unaprueba deimpresión

Si su computadora estáconectada a unaimpresora, haga unaprueba de impresiónsiguiendo los pasosantes detallados.


8.2 Imprimiendo la página

a) Seleccione el menú File

b) Seleccione la opción Print..., tal y como se muestra en la figura8.2.

c) Aparecerá entonces una ventana para escoger las alternativasde impresión: la impresora, las páginas y la cantidad de copiasque se desean imprimir. Esta es una ventana casi estándar en lamayoría de los programas.


Figura 8.2 Opción de menú paraimprimir

Ejercicio #2:


9.1 Introducción

Ahora que ya sabe cómo crear y enlazar páginas Web es impor-tante que tenga conocimiento del proceso necesario para planifi-car la producción de páginas y sitios Web.

Pueden existir diferentes propósitos para crear un sitio Web: di-fundir información, ofrecer productos o servicios, brindar asisten-cia técnica, promover una organización, etc. En términos genera-les, puede afirmarse que responde al propósito de publicar en laWeb. Como toda publicación, su elaboración requiere de un pro-ceso de planificación y desarrollo. Para orientar este proceso serecomiendan algunos pasos importantes, varios de los cuales pue-den llevarse a cabo en forma simultánea:

1. Definir el objetivo del sitio

2. Identificar la o las diferentes audiencias o pobla-ciones meta

3. Diseñar la estructura y organizar el contenido delsitio

4. Elegir un estilo gráfico de presentación

5. Construir las páginas

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.


C A P Í T U L O 9Planificación de un sitio Web

C O N T E N I D O

9.1 Introducción

9.2 Pasos para la planificación yproducción de un sitio Web

9.2.1 Definir el objetivo del sitio

9.2.2 Identificar la o las diferentesaudiencias o poblaciones meta

9.2.3 Definir el contenido y laestructura del sitio

9.2.4 Estilo gráfico de presentación

9.2.5 Construir las páginas y el sitio

9.2.6 Probar y evaluar el sitio

9.2.7 Registrar un dominio para ubicarel sitio

9.2.8 Instalar el sitio Web en elservidor

9.2.9 Medir el impacto del sitio

9.2.10 Actualizar continuamente el sitio

9.2 Pasos para la planificacióny producción de un sitio Web

9.2.1 Definir el objetivo del sitio

Contestar a la pregunta ¿Para qué que-remos desarrollar nuestro sitio? es elpaso básico para iniciar la planificaciónde un sitio Web. Aquí se define la razónpor la cual vamos a realizar este trabajo.Aunque pueda parecer obvio, es impor-tante señalar que una buena explicita-ción del objetivo general al que el sitiodebe responder, será la mejor guía paratodos los pasos subsiguientes. Este pri-mer paso es básico para definir la iden-tidad del sitio y, en consecuencia, todoslos requisitos que éste debe contemplar.Dará pautas para definir tanto el conte-nido como la estructura y apariencia delsitio Web que deseamos construir. Loque se presente en la pantalla y cómo sepresente, dependerá de nuestro propósi-to y por ello es tan importante hacernosesta pregunta al iniciar el trabajo.

9.2.2 Identificar la o las diferentes au-diencias o poblaciones meta

Como segundo paso, debemos identifi-car cuáles serán las diferentes poblacio-nes meta o audiencias, a las cuales nosqueremos dirigir. El tipo de población ala cual se desee llegar definirá el conte-nido y el tipo de lenguaje a utilizar asícomo la forma de presentar los textos,la forma de organización de las páginas,los colores, el tipo y cantidad de gráfi-cos, etc. No es lo mismo hacer una pu-blicación en la Web cuando se esperaque las personas visitantes sean profe-sionales en un área específica y con unconocimiento técnico definido, que ha-cer una publicación para una poblaciónno determinada. Tampoco es lo mismodiseñar el sitio para personas adultasque para niños(as).

9.2.3 Definir el contenido y la estruc-tura del sitio

a) El contenido general del sitioEl contenido del sitio está íntimamenterelacionado con los objetivos y la au-diencia definidos en los pasos anterio-res.

Como primer paso para definir el conte-nido, es importante recopilar toda la in-formación existente que se desea incluiren el sitio y definir qué nueva informa-ción es necesario producir. Luego, sedebe organizar dicha información ensecciones, ya que ésto ayudará a definirlas diferentes páginas que el sitio con-tendrá. Cada sección podría ser una pá-gina en nuestro sitio Web.

Además de la información, también de-ben considerarse algunos servicios ofunciones que el sitio puede ofrecer. Unsitio puede tener, por ejemplo, una fun-ción que permita realizar búsquedas porpalabras clave, formularios para recibir

53 construcción de sitios webMANUAL DE ESTUDIANTES

Los

sitio

s co

n qu

e se

aco

mpa

ña e

ste

capí

tulo

son

mer

amen

te il

ustr

ativ

os.

información de las personas usuarias,foros de discusión, y otros servicios porel estilo.

Una vez definidos estos puntos, debenorganizarse las secciones y servicios queel sitio contendrá, así como el flujo inter-no de navegación del sitio, o sea, la for-ma en que las secciones estarán enlaza-das. Como producto de ésto tendremosun diagrama de flujo que mostrará las di-ferentes páginas que debemos construir,así como los enlaces que deben existirentre dichas páginas, quedando así defi-nida la estructura de navegación del sitio.Una buena estructura puede ser un ele-mento vital para atraer a las personas lec-toras una y otra vez.

b) La estructura de navegaciónLa estructura de navegación es la formaen que están enlazadas las diferentes pá-ginas o secciones del sitio. Las posibili-dades de navegación de las personas enel sitio dependen de los enlaces queexistan entre sus páginas, y los enlacesse establecen con la intención de que lanavegación sea apropiada para lograrlos objetivos del sitio, que las personasvisitantes encuentran fácilmente la in-formación que buscan o se quiere mos-trar.

Al igual que sucede con todo proyecto,es muy importante hacer el esquema dela estructura de navegación del sitio an-tes de empezar a construir las páginas.La importancia de un esquema de nave-gación radica en lograr un diseño quepermita entender fácilmente el sitio, na-vegar fluidamente en él y llegar a todaslas páginas en forma ágil.

Se pueden mencionar dos tipos básicosde estructuras: la jerárquica y la relacio-nal, sin embargo también se pueden im-plementar esquemas de tipo mixto, de-pendiendo de la información que se de-see presentar.

Estructura jerárquicaEsta forma de organización es recomen-dable cuando la página se divide en te-mas o categorías y sub-categorías dife-renciables. La figura 9.1 presenta un es-quema que ilustra esta estructura de na-vegación. En ella, la entrada al sitioWeb es por la página denominada A, lacual tendría enlaces con las páginas B,C, D y E, a su vez, la página D tendríaenlaces hacia las páginas F y G. Así, elacceso a la página G se logra sólo si lapersona navega de la página A a la D yluego de la página D a la G.

Figura 9.1 Estructura jerárquica

Un caso en el cual podría ser recomen-dable utilizar una estructura jerárquicade navegación es un libro en el que lapágina principal (A) contiene un índicecon títulos que llevan a los diferentescapítulos (B, C, D y E) y a su vez, cadacapítulo tiene secciones separadas.

Estructura relacionalCon esta estructura de navegación cual-quier página puede estar enlazada acualquiera (ver figura 9.2).

Figura 9.2 Estructura relacional


A

B C D E

F G

Esta es la forma de organización máscomún en la Web pues permite gran fle-xibilidad de navegación, al permitir quecualquier página pueda tener enlaces dehipertexto hacia otras páginas.

Cualquiera que sea la estructura de nave-gación que escoja, es recomendable queésta se muestre en alguna parte del sitioy que las personas usuarias tengan acce-so a ella en todo momento, para evitarque se pierdan, y puedan ubicar fácil-mente las páginas que desean visitar.

Por último, le aconsejamos considerarlos aspectos que le gustan o disgustande otros sitios web. Por ejemplo, si us-ted conoce un sitio que facilita la nave-gación, puede tratar de analizar e iden-tificar los aspectos que producen esteefecto para utilizarlos en la construc-ción de su sitio.

9.2.4 Estilo gráfico de presentación

Al igual que sucede con cualquier pu-blicación, al desarrollar un sitio Web, sepretende lograr un estilo de presenta-ción tal que resulte atractivo, funcional,fácil de leer, de recorrer y que apoye lasideas o conceptos que el sitio mismopretende transmitir. A partir de estos ob-jetivos se deriva el estilo de presenta-ción del sitio y para definirlo se debenconsiderar aspectos tales como: el estilodel texto, los elementos gráficos y la in-corporación de sonido, animaciones yvídeo

A continuación se presenta un conjuntode recomendaciones con respecto a es-tos tres puntos.

a) El estilo del texto◗ El estilo de texto que se escoja debe

ser suficientemente claro para que laspersonas usuarias puedan leerlo en lapantalla sin dificultad.

◗ Emplee párrafos para dividir el textoen secciones más cortas. Es más fácilleer párrafos cortos en una pantalla.

◗ Use encabezados para enfatizar lasideas principales. Pero use los énfasissólo donde sean necesarios.

◗ Seleccione un tipo de letra (“font”)que sea visualmente atractivo y clarode leer. Letras demasiado pequeñas omuy elaboradas pueden producir de-sinterés en quien lee.

◗ No use demasiados tipos diferentes deletra.

◗ Utilice colores de texto que contrastencon el fondo; por ejemplo: texto ama-rillo sobre fondo negro, texto blancosobre fondo azul, texto negro sobrefondo blanco.

b) Los elementos gráficos ◗ Los elementos gráficos (ilustraciones,

iconos y fondos) pueden dar una apa-riencia agradable a las páginas y ser-vir para ayudar a transmitir una ideade manera concisa y agradable.

◗ Use figuras e iconos con colores com-patibles con el fondo y el texto, paralograr un efecto visualmente agrada-ble.

◗ Seleccione un estilo congruente deiconos para todo el sitio. Por ejemplo:todos los iconos con los bordes redon-deados, o todos con las líneas delga-das, o con líneas rectas, etc.

◗ Use con moderación los colores muyvistosos y encendidos, como el rojo,pues el ojo humano es muy sensible aellos y podrían convertirse en distrac-tores.

◗ Use animaciones como instrumentoestético para resaltar alguna informa-ción o para hacer atractiva la página.Existen actualmente sitios donde seobtienen animaciones que se puedenincorporar a un hiperdocumento.También algunos editores de páginasWeb tienen instrucciones para animartexto e imágenes


◗ Hay sitios en la Web que tienen bi-bliotecas de dominio público de ico-nos, figuras y fondos que podemosutilizar. Usted podría encontrarlos através de sitios como Altavista o Ya-hoo. Algunas palabras clave para bus-car estos elementos son: “icon”,“graphics”, “backgrounds”, “buttons”o “clipart”.

◗ Procure utilizar imágenes propias(tanto para ilustraciones como paraíconos) pues esto dará un aire originala la página. Para esto necesitará digi-talizar imágenes con un “scanner”.

c) El sonido, las animaciones y el vídeoLa utilización de múltiples medios au-diovisuales (o multimedios) para pre-sentar información es cada vez más co-mún. Los medios audiovisuales puedenser de gran ayuda para poder expresarcon claridad y eficacia una idea. Sinembargo, en Internet deben, aún en laactualidad, ser utilizados con mesurapues las páginas que contienen este tipode elementos podrían ser demasiado“pesadas” y su transferencia a la com-putadora cliente podría ser muy lenta. Por lo tanto se recomienda lo siguiente:◗ Los sonidos, las animaciones y los ví-

deos son recursos audiovisuales atrac-

tivos para llamar la atención del usua-rio. Al igual que sucede con los gráfi-cos, deben ser utilizados con modera-ción para no distraer ni cansar a laspersonas usuarias.

Otras consideraciones a tener en cuentaa la hora de definir el estilo gráfico depresentación de un sitio son:◗ Las personas que visitarán el sitio

usan diferentes computadoras, con di-ferente velocidad, capacidad de me-moria, etc. Si su página es muy pesa-da, por ejemplo, no todas las personaspodrán bajarla rápidamente y podríanaburrirse de esperar antes de que lapágina sea transferida.

◗ Las personas que visitarán su sitiousan diferentes navegadores. Si ustedutiliza algún elemento que sólo puedeser visualizado con la última versióndel navegador, puede ser que muchaspersonas no puedan verlo pues esténusando versiones anteriores.

◗ Las personas que visitarán su sitio seconectan a Internet a diferentes velo-cidades.

◗ Las personas que navegan por la Webquieren, por lo general, encontrar loque buscan rápidamente y, al ser lacomputadora un medio muy dinámi-co, dedican poco tiempo para inspec-cionar las páginas. Mientras más li-vianas sean sus páginas, más accesi-bles serán.

9.2.5 Construir las páginas y el sitio

La construcción de las páginas se debehacer en forma paulatina y con base enlas consideraciones mencionadas ante-riormente. Se puede llevar a cabo conun programa editor de páginas Web odirectamente en HTML.

Es en este punto donde se debe definircómo se almacenarán físicamente laspáginas, los elementos gráficos, el soni-


do, las animaciones y el vídeo en el ser-vidor; es decir, cuál será la estructura dedirectorios y en cuáles directorios se al-macenará cada componente. Usted de-bería hacer al menos un directorio en elcual guarde las páginas y los recursosaudiovisuales (dibujos, iconos, sonidos,animaciones y vídeos).

Para sitios muy grandes es preferibleque usted haga un directorio para la pá-gina principal que contenga el archivoHTML con sus recursos audiovisuales yhaga subdirectorios para cada una de laspáginas asociadas a la página principal;cada subdirectorio almacenará el archi-vo de la página en html con sus respec-tivos recursos audiovisuales. La organi-zación de las páginas en directorios ysubdirectorios es muy importante paramantener el orden y facilitar la adminis-tración y actualización del sitio.

9.2.6 Probar y evaluar el sitio

Siempre es recomendable probar que to-das las páginas se vean como pretende-mos y que todos los enlaces entre pági-nas funcionen. Las pruebas se deben ha-cer primero en el ámbito local y luego enel servidor donde se ubicará el sitio.

A nivel local en el disco duro de su com-putadora, usted almacenará las páginasen directorios y, utilizará un programanavegador (por ejemplo, Netscape Navi-gator o Internet Explorer) para observarcómo se verán las páginas en el sitio.

En esta etapa se debe comprobar que:◗ Los textos sean legibles.◗ Las imágenes, los sonidos, las anima-

ciones y el vídeo se desplieguen ade-cuadamente.

◗ Los enlaces entre las páginas funcio-nan conforme se había diseñado.

◗ No aparezca ningún mensaje de error.

9.2.7 Registrar un dominio paraubicar el sitio

Dado que el sitio Web debe hacerse vi-sible en la Internet, se debe buscar unproveedor de servicios Internet para co-locar su sitio Web en línea. Usted debeindagar si su organización tiene un ser-vidor Web para este efecto. De lo con-trario, existen algunos proveedores queofrecen este servicio en forma remune-rada, es decir, alquilan un espacio en unservidor Web para publicar su sitio.También hay, en la actualidad, algunosservidores gratuitos en la Internet.

En este punto usted requiere registrar elnombre del sitio o dominio donde que-dará montado su sitio.

9.2.8 Instalar el sitio web en el servidor

La instalación del sitio web se puede lo-grar de alguna de las tres maneras si-guientes: a) con ayuda de la persona queadministra el servidor web, b) transfi-riendo el directorio con los archivosmediante el protocolo de comunicaciónftp, ó c) en forma guiada desde algúnprograma especialmente diseñado parainstalar sitios web.

a) Instalación con ayuda de la personaque administra el servidor WebBajo este esquema las personas que di-señan el sitio simplemente entregan laspáginas, organizadas en directorios, a lapersona que administra el servidor Weby ésta persona se encarga de colocar elsitio dentro del servidor. Esta es una al-ternativa, pero existen mecanismos me-diante los cuales usted puede hacerlodirectamente.


b) Instalación transfiriendo el directo-rio con los archivos mediante el pro-tocolo de comunicación FTP.FTP (“file transfer protocol”) es un pro-tocolo para la transferencia de archivosen Internet; es decir, es un mecanismomediante el cual se pueden trasladar ar-chivos de una computadora a otra.El protocolo FTP se utiliza entonces pa-ra montar su sitio en el servidor Web.Usted puede, desde el Netscape Naviga-tor, montar el sitio con FTP. Así, en laparte de localización de páginas, supe-rior de la ventana de navegación, dondeusualmente se coloca la etiqueta“http://...”, se coloca lo siguiente:

[ftp://[email protected]]

donde: username: representa al login o identifi-cación del servidor, ynombresitio: es el nombre o dominodonde quedará montado su sitio Web.

Netscape Navigator también incluye laopción “Upload File...” en el menú File,con la cual se puede transferir el sitio aun servidor web.

c) Instalación en forma guiada desdealgún programa especialmente dise-ñado para instalar sitios web.

Existen en Internet algunos proveedoresde servicios web que prestan o alquilanespacios en su servidor y que tienenprogramas que guían a las personas enla instalación de su sitio web. Un ejem-plo es el servicio que ofrece Geocities(http://www.geocities.com).

9.2.9 Medir el impacto del sitio

Medimos el impacto de un sito porquequeremos saber si el sitio tiene éxito, siestá siendo utilizado o cómo está siendoutilizado, y también para conocer mejora su población usuaria.

La medición del impacto del sitio se lo-gra, principalmente, a través de estadís-ticas de acceso, tales como: conteo de lacantidad de personas que acceden anuestro sitio, cantidad de personas quehan visitado cada sección del sitio, bús-quedas realizadas por las personasusuarias, dominio de procedencia de laspersonas usuarias, búsqueda que hicieronpara encontrar nuestro sitio, seccionesespeciales para que los(as) usuarios(as)suministren datos que nos proporcioneninformación valiosa, etc. Consulte a suproveedor de servicios sobre las esta-dísticas que ofrece.

La información derivada de la evalua-ción del sitio nos permitirá vislumbrarla necesidad de nuevos servicios o in-formación dentro del propio sitio. Estaactividad es la que nos permite saber siel sitio que creamos está cumpliendocon los objetivos que nos trazamos ydefinir la necesidad de modificarlo o ac-tualizarlo para que no pierda su vigen-cia.

Debemos idear mecanismos que nospermitan conocer los beneficios deriva-dos del sitio Web, los cuales podrán sercontrastados con los costos de su desa-rrollo, operación y mantenimiento.


9.2.10 Actualizar continuamente el sitio

Todo sitio necesita ser actualizado yofrecer siempre información de interéspara que las personas lo sigan visitando.

Sin embargo, en un momento determi-nado, un sitio Web puede requerir ac-tualización por diversas razones especí-ficas, por ejemplo: ◗ Los resultados obtenidos al medir el

impacto del sitio muestran que nues-tro objetivo no se está cumpliendo.

◗ Nuestros objetivos cambiaron.◗ El diseño quedó obsoleto.◗ La Web se caracteriza por ser un me-

dio de comunicación cuya informa-ción es constantemente actualizada ypor lo tanto nuestro sitio debería res-ponder a esa característica.

◗ Deseamos tener “clientes frecuentes”que visiten el sitio y por lo tanto esfundamental ofrecerles información yelementos nuevos periódicamente.

Cualquiera que sea nuestra razón, paralograr el éxito del sitio es recomendableevaluarlo cada cierto tiempo y realizarlos cambios necesarios para su mejora-miento. Si, al construir el sitio, se ha or-ganizado la información en directoriosy subdirectorios, según las seccionesque el sitio tenga, será más fácil su ac-

tualización.


construcción de sitios web60

Una parte importante de todo entrenamiento es recibirretroalimentación de las personas que utilizaron los materiales.Por ello, hemos creado este cuestionario para usted nos dé suscomentarios. Por favor, tome este cuestionario como una guía ysiéntase con la libertad para agregar comentarios en cualquierárea adicional que considere pertinente.


E V A L U A C I Ó Npara uso de las personas participantes

Nombre del curso:

Su nombre y dirección(opcional):

Duración del curso (en horas):

Fecha:

Lugar en que se desarrolló:

Instructores/as:


ITEMS

Introducción al curso deelaboración de páginas Web con

Netscape Composer

1. Introducción a la construcción de sitios Web

1.1 ¿Qué es la World Wide Web?1.2 El modelo Cliente/Servidor

1.3 Páginas Web1.4 El Lenguaje HTML

1.5 Sitios Web1.6 El URL (Uniform Resource

Locator o Localizador Uniformede Recursos)

2. Los programas para hacerpáginas y navegar por la web


2.2 Programas navegadores de la Web

2.3 Uso de editores de texto yhojas electrónicas

2.4 El paquete Netscape comoinstrumento generador y

visualizador de páginas Web2.5 Funcionamiento general de

Netscape Composer

3. Construcción de una páginacon Netscape Composer

3.1 Escribiendo texto3.2 Guardando la página

3.3 Viendo la página con elnavegador


En la siguiente tabla indique cuáles secciones se desarrollaron conuna metodología guiada y cuáles con una de auto-estudio yexperimentación. Marque la casilla correspondiente con una X.

SU NIVEL DEINTERÉS

METODOLOGÍA NIVEL DEDIFICULTAD

alto medio bajoAuto

Guiado estudio alto medio bajo

SU NIVEL DEINTERÉS

METODOLOGÍA NIVEL DEDIFICULTAD

alto medio bajo alto medio bajo


4. Edición de texto4.1 La primera página

4.2 ¿Cómo alinear el texto?4.3 ¿Cómo cambiar el tipo de letra?

4.4 ¿Cómo cambiar el tamaño de letra?4.5 ¿Cómo cambiar el estilo de letra?4.6 ¿Cómo cambiar el color de letra?

4.7 ¿Cómo agregar viñetas y listas numeradas?

4.8 ¿Cómo cambiar el estilo de lasviñetas y de la numeración?4.9 ¿Cómo establecer títulos

y encabezados?

5. Inclusión de elementos gráficos

5.1 Insertando líneas de división5.2 Insertando una imagen

5.3 Algunas opciones del NetscapeComposer al incorporar imágenes en

páginas Web

6. Creación de enlaces para la navegación

6.1 ¿Qué es un enlace?6.2 ¿Cómo establecer un enlace?

6.3 ¿Cómo eliminar un enlace?6.4 ¿Cómo establecer enlaces dentro

de una misma página?

7. Elaboración de tablas

7.1 ¿Qué es una tabla?7.2 ¿Cómo insertar una tabla

con Netscape Composer?7.3 ¿Cómo agregar una fila, una

columna o una sola celda?7.4 ¿Cómo borrar una fila,

una columna, una sola celda o la tabla completa?

7.5 ¿Cómo cambiar la apariencia deuna tabla?

8. Impresión con Netscape Composer

8.1 Visualización previa de la página8.2 Imprimiendo la página

9. Planificación de un sitio Web9.1 Introducción

9.2 Pasos para la planificación yproducción de un sitio Web

10. Conclusión, evaluación y despedida


AutoGuiado estudio

construcción de sitios web63 MANUAL DE ESTUDIANTES

Por favor indique a continuación su nivel de acuerdo con lassiguientes oraciones colocando el número escogido al final de lafrase.

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 diseño gráfico del manual lo hizo fácil de leer

14. Las palabras usadas en el manual fueron fáciles de entender

15. Las explicaciones en el manual fueron fáciles de entender

16. El manual tiene el tamaño adecuado

17. Los gráficos del manual fueron fáciles 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 deberían ser agregados:

21. Temas que deberían ser eliminados:

22. Otros comentarios:

MANUAL PARA LA construcción de sitios web › ~filosofia › recursos › innovacion › ...9....

Documents

Transcript of MANUAL PARA LA construcción de sitios web › ~filosofia › recursos › innovacion › ...9....