Manual Estudiantes - Universidad de Granada

M A N U A L PA R A L A
construcción de sitios web
UTILIZANDO
NETSCAPE COMPOSER 4.X
MANUAL DE ESTUDIANTES
ITrain es una colección de materiales de
capacitación 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 planificación y personalización 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 capacitación, que sirva tanto para usuarios
nuevos de la Internet como de nivel intermedio, al igual que para instructores
nuevos y experimentados.
© 1999, ITrain Group
Publicación de:
ITrain Group
unganisha.idrc.ca/itrain
Fundació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
2 construcción de sitios web
MANUAL DE ESTUDIANTES
Acceso es una organización no gubernamental de desarrollo, con sede en Costa
Rica y programas activos en Centroamérica. Ofrecemos asistencia técnica, capacitación 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 planificación
institucional y programática, desarrollo
de juntas directivas, usos básicos y estratégicos de la Internet, diseño y desarrollo de presencias institucionales en el
World Wide Web, diseño de estrategias
de comunicación y en otras áreas afines.
CONTENIDO
Presentación
5
1. Introducción a la construcción de sitios Web
6
1.1 ¿Qué es el 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 Locator o Localizador Uniforme de Recursos)
2. Los programas para hacer páginas y navegar por la web
2.1 Programas editores de páginas Web
2.2 Programas navegadores de la Web
2.3 Uso de editores de texto y hojas electrónicas para hacer páginas Web
2.4 El paquete Netscape como instrumento generador y visualizador de páginas Web
2.5 Funcionamiento general del Netscape Composer
3. Construcción de una página con Netscape Composer
3.1 Escribiendo texto
3.2 Guardando la página
3.3 Viendo la página con el navegador
4. Edición de texto
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 listas numeradas?
4.8 ¿Cómo cambiar el estilo de las viñ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ón
5.2 Insertando una imagen
5.3 Algunas opciones del Netscape Composer al incorporar imá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 con respecto al texto
5.3.4 Cambio del tamaño de la imagen
5.3.5 Hacer un marco alrededor de la imagen
5.3.6 Despliegue de imágenes
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?
3 construcción de sitios web
MANUAL DE ESTUDIANTES
6
6
8
9
10
11
12
12
13
13
14
15
16
16
17
18
21
21
23
24
25
26
27
27
29
30
32
32
33
34
34
34
34
34
34
35
36
36
38
39
40
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 de una tabla?
8. Impresión con Netscape Composer
43
43
43
46
47
48
50
8.1 Visualización previa de la página
8.2 Imprimiendo la página
50
51
9. Planificación de un sitio Web
52
9.1 Introducción
9.2 Pasos para la planificación y producción 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 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 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
Evaluación para uso de las personas participantes
4 construcción de sitios web
MANUAL DE ESTUDIANTES
52
53
53
53
53
55
56
57
57
57
58
59
60
P R E S E N TA C I Ó N
Este manual se ha elaborado con el
propósito de facilitar la construcción de
sitios Web, utilizando como herramienta Netscape Composer 4.x. Forma parte
de una serie de materiales de capacitación en Internet desarrollados para el
ITrain Group, con el soporte financiero
del Centro Internacional de Investigación en Desarrollo (International Development Research Centre, IDRC). Es un
manual básico y se puede obtener en
forma gratuita de la dirección
http://unganisha.idrc.ca/itrain/.
Se espera que este material sea utilizado
por capacitadores(as) de herramientas
de Internet así como por usuarios(as) de
los países en desarrollo. Para su facilidad de uso ha sido organizado en nueve
secciones.
1. Introducción a la construcción de
sitios Web
2. Los programas para hacer páginas y
navegar por la web
3. Construcción de una página con
Netscape Composer
4. Edición de texto
5. Inclusión de elementos gráficos
6. Creación de enlaces para la
navegació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 personas
participantes
Este material se distribuye bajo la licencia OpenContent descrita en la dirección: http://www.opencontent.org.
5 construcción de sitios web
MANUAL DE ESTUDIANTES
CAPÍTULO 1
Introducción a la
construcción de sitios web
1.1 ¿Qué es la World Wide Web?
CONTENIDO
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 Locator
o Localizador Uniforme de
Recursos)
La World Wide Web (WWW) se puede entender como una gran
colección de documentos o archivos, llamados páginas,
almacenadas en computadoras alrededor del mundo, en la red
Internet. Al tener acceso a la Internet, se tiene acceso a toda esa
información y, con sólo hacer “click”, se puede navegar a través
de una gran cantidad de información, saltando de página en
página de la Web.
1.2 El modelo Cliente/Servidor
Para comprender el funcionamiento de la Web es necesario entender la relación básica entre clientes y servidores que se lleva a
cabo en ella. Un servidor es una computadora, conectada a la Internet las 24 horas del día, que contiene y distribuye información.
Un cliente es un programa en su computadora que solicita, procesa y despliega esa información. En la Web, los “servidores” almacenan y facilitan “páginas Web” y los “clientes” despliegan las
páginas en su computadora.
De esta manera, cuando en la Web usted
hace “click” sobre un botón o sobre un texto para, por ejemplo, ver la información de
una universidad de su interés, su computadora tiene el papel de un cliente que le solicita al servidor Web de la universidad
que le transfiera la información que ha publicado en la Web. Una vez que la comunicación haya sido establecida, por medio de
las conexiones que ofrece la Internet, el servidor Web de la universidad envía una copia de sus páginas a su computadora para
que ésta las despliegue.
Servidor
Cliente
Solicita
Responde a
solicitud
Figura 1.4 Modelo Cliente-Servidor
6 construcción de sitios web
MANUAL DE ESTUDIANTES
Para ampliar este concepto tomemos como ejemplo el
funcionamiento de la televisión. Bajo esta perspectiva, ¿cuál sería
el servidor y cuál el cliente? Como ya se habrá imaginado, los
canales de televisión son los servidores y su televisor es el cliente.
Los canales siempre tienen su señal de transmisión disponible y
cuando usted selecciona el canal, éste se conecta y envía la
imagen a su aparato de televisión. Además, muchas personas
pueden estar viendo el mismo canal a la vez. Sin embargo, existen
diferencias entre el servidor Web y la televisión como, por
ejemplo, que en la Web la persona usuaria puede, entre otras
cosas, interactuar y publicar directamente información en los
servidores y que si se desconecta de la Internet, la página que
tiene en pantalla no se apagará. Cabe mencionar, con este último
ejemplo, 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 de
su televisor. Asimismo, los servidores Web envían las páginas 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 Página de entrada al
Web de la empresa Netscape
7 construcción 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
mamíferos carnívoros.
Se denomina “felino”
a ...Los gatos, tigres,
leones y leopardos
...
El león
Formas de
alimentación:
Es un carnívoro
conocido como el “rey
de la selva” ...
Su pariente el tigre ...
- Carnívoros
- Herbívoros
1.3 Páginas Web
Las páginas de la Web son archivos de hipertexto. Estos archivos
contienen texto destacado o subrayado que asocia información de
diferentes páginas de la Web. O sea que estos archivos, o páginas
Web, están vinculados a través de enlaces, llamados de hipertexto,
como en una red. Esto permite navegar de una página 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 amplía al de hiperdocumento
cuando, además de texto, las páginas contienen otros recursos
audiovisuales, como son imágenes, sonido o vídeo. El propósito
de este tipo de organización es ofrecer flexibilidad de acceso a las
páginas, para que cada persona pueda realizar la lectura de
acuerdo con sus intereses. Esta organización es, precisamente, la
que posibilita enlazar información de diferente índole para formar
la gran telaraña mundial que es hoy la Web.
Las páginas en la Web están escritas en un lenguaje denominado
HTML (Hypertext Markup Language), el cual se describe a
continuación.
8 construcción de sitios web
MANUAL DE ESTUDIANTES
Figura 1.3 Ejemplo de página Web
1.4 El lenguaje HTML
HTML es un lenguaje de programación que sirve para crear
hiperdocumentos publicables en la Web, o sea, páginas Web, con
enlaces activos a recursos de información 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 página, para
que él pueda interpretarlo en un formato apropiado. En la figura
1.3 se puede observar, a manera de ejemplo, una página Web
sencilla y luego en la figura 1.4 el archivo HTML correspondiente.
Figura 1.4 Ejemplo del contenido
de un archivo HTML
Como puede observar, el texto está formado por etiquetas
encerradas entre paréntesis triangulados (“< >”), los cuales
indican el formato del texto.
<HTML>
<HEAD>
<TITLE>Mi primera página</TITLE>
</HEAD>
<BODY>
<p>
<CENTER><FONT SIZE=+1>Esta es mi primera
página !</FONT> </CENTER>
<DIV ALIGN=right>Vilma Picapiedra.</DIV>
</BODY>
</HTML>
◗ 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 la
página, como por ejemplo su título.
◗ Las etiquetas <BODY> y </BODY>
encierran el contenido de la página, el cual
podrá ser visualizado con un navegador.
◗ <CENTER> y </CENTER> indican que el
texto que aparece en la línea va a aparecer
centrado en la página.
◗ á es el código HTML para acentuar
vocales, en este caso la a.
◗ <FONT SIZE=+1> y </FONT> indican
características del tamaño del texto.
◗ <DIV ALIGN=right> indica que el texto
quedará alineado a la derecha.
◗ <P> indica salto de párrafo.
9 construcción de sitios web
MANUAL DE ESTUDIANTES
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 hacer
páginas Web debían conocer las instrucciones HTML y escribirlas
directamente en un archivo de texto. Sin embargo, en la
actualidad existen editores de páginas Web, cuyo funcionamiento
se asemeja al de los procesadores de palabras. Es decir, las
personas que hoy desarrollan páginas Web, no requieren escribir
directamente el código HTML, pues el editor genera
automáticamente el código correspondiente.
En este momento, existen en el mercado muchos editores para
páginas 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 páginas Web organizadas
bajo temas u objetivos comunes y ubicadas, físicamente, 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 construcción de sitios web
MANUAL DE ESTUDIANTES
1.6 El URL (Uniform Resource Locator o
Localizador Uniforme de Recursos)
Cada sitio o página Web tiene una dirección única que lo
identifica para que pueda ser localizado dentro de la gran red
Internet. A esta dirección se le conoce como Localizador
Uniforme de Recursos (Uniform Resource Locator o URL). Se
puede localizar cualquier página Web conociendo su URL.
Observe en la figura 1.1 la dirección 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 cómo está compuesta una
direcció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 en
Internet para transferir y leer las páginas 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 extensión html, pues es un archivo de hipertexto.
11 construcción de sitios web
MANUAL DE ESTUDIANTES
CAPÍTULO 2
Los programas para hacer
páginas y navegar por la Web
2.1 Programas editores de páginas Web
CONTENIDO
2.1 Programas editores
de páginas Web
2.2 Programas navegadores
de la Web
2.3 Uso de editores de texto y hojas
electrónicas para hacer páginas
Web
2.4 El paquete Netscape como
instrumento generador y
visualizador de páginas Web
2.5 Funcionamiento general
del Netscape Composer
Como se mencionó en el capítulo 1, las páginas de un sitio Web
se programan con un lenguaje denominado HTML y, cuando la
Web inició, era necesario para quienes quisieran construir
páginas, conocer a cabalidad las instrucciones y las etiquetas
propias de este lenguaje. Así las personas que programaban las
páginas utilizaban un editor de texto para escribir las
instrucciones 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 de
que la abrieran con un programa navegador (“browser”).
Posteriormente, salieron al mercado programas editores de
páginas Web, los cuales, mediante una interfaz gráfica (botones,
barras de herramientas y menúes) facilitan la construcción de
páginas. Entonces, quienes las hacen no requieren conocer con
detalle el lenguaje HTML.
Los programas editores de páginas 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 gráficos y tablas, etc.,
mostrando, con bastante precisión, la forma en que lucirá la
página en la Web.
Entre los programas editores actualmente más conocidos se
encuentran el Microsoft FrontPage y el Netscape Composer. Este
último es presentado al final de este capítulo y estudiado con
detalle a lo largo de este manual.
12 construcción de sitios web
MANUAL DE ESTUDIANTES
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 recorrer
la Web. El navegador interactúa con un servidor Web, mediante
una relación cliente/servidor; así cuando usted hace “click” sobre
un elemento de una página Web, el navegador solicita al servidor
que le envíe los documentos específicos para desplegarlos en la
pantalla de su computadora.
Algunos de los programas navegadores más comunes son:
Internet Explorer (de Microsoft), Netscape Communicator (de
Netscape) y MOSAIC (de NCSA). Estos programas leen los
documentos que están escritos en HTML.
2.3 Uso de editores de texto y hojas electrónicas
para hacer páginas Web
Actualmente muchos programas, como procesadores de palabras,
hojas electrónicas y programas para hacer presentaciones, como
Microsoft Word, Microsoft Excel y Power Point, incorporan entre
sus funciones la posibilidad de hacer enlaces entre páginas y
guardar archivos en formato html. Tanto Word 97, Excel 97 como
Power 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 sus
páginas, incorporar tablas y enlaces a otras páginas y luego
guardar el archivo con formato html.
Aunque estos programas no son especializados para crear páginas
Web, son útiles para este propósito, principalmente cuando la
información 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 información.
13 construcción de sitios web
MANUAL DE ESTUDIANTES
2.4 El paquete Netscape como instrumento
generador y visualizador de páginas 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 páginas Web.
◗ Netscape Navigator
Sirve para navegar por la Web.
◗ Netscape Messenger Mailbox
Sirve para administrar el correo electrónico.
Algunas versiones del paquete Netscape incluyen también los
siguientes programas:
◗ Netscape Collabra Discussion Groups
Permite organizar y distribuir correspondencia de
sus propios grupos de discusión en Internet.
◗ Netscape Calendar
Ofrece un calendario para administración 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
información en forma automática.
14 construcción de sitios web
MANUAL DE ESTUDIANTES
2.5 Funcionamiento general del Netscape
Composer
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 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
Note en la figura que la ventana del Composer contiene:
Barra de composición
Menú principal
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ándar
en la mayoría de los programas.
Una barra de composión, de acceso rápido, la cual contiene
comandos predefinidos que también aparecen en los menúes.
Una barra de formato, de acceso rápido, para definir aspectos
relacionados con la apariencia del texto.
A lo largo de este manual se irán utilizando y explicando cada una
de las opciones para su mejor comprensión.
15 construcción de sitios web
MANUAL DE ESTUDIANTES
CAPÍTULO 3
Construcción de una página
con Netscape Composer
3.1 Escribiendo texto
CONTENIDO
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 vista
con el Navegador
Escribiremos un texto sencillo con el fin de construir una página
también sencilla, con lo cual usted obtenga una noción del
funcionamiento del Netscape Composer. La página 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 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ón
Align y una vez allí seleccione la opción Center.
c) Presione la tecla de entrada, Enter, para cambiar de línea.
d) Escriba su nombre
e) 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,
16 construcción de sitios web
MANUAL DE ESTUDIANTES
Ahora debe guardarla en el disco para luego poder verla desde el
navegador (Navigator).
3.2 Guardando la página
Es importante recordar la importancia de mantener los archivos
organizados en directorios o carpetas para su mejor localización y
manejo; por lo tanto se recomienda crear un directorio en el cual
usted almacene sus páginas junto con los recursos audiovisuales
que éstas utilicen (archivos de gráficos, sonidos, animaciones y
vídeos).
Para guardar la página que acaba de crear haga lo siguiente:
a) Seleccione la opción Save As del menú File. Aparecerá entonces
una ventana similar a la que se muestra a continuación:
En este caso, el directorio donde se guardarán las páginas se
llama: “EjemplosHTML”.
Figura 3.2 Ventana para Guardar el
archivo
b) Escriba en el espacio File name: el nombre con que almacenará
la página 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 estándares en Windows para cambiar de directorio, crear una
nueva carpeta, etc. Note además que el documento debe quedar
almacenado con tipo HTML Files.
17 construcción de sitios web
MANUAL DE ESTUDIANTES
c) Aparecerá luego una ventana en la cual debe ingresar el título
con que se desplegará la página en Internet, por ejemplo: “Mi
Primera Página”, como se muestra a continuación:
Figura 3.3 Ventana para indicar el
Título de la página
d) En este punto su página ya estará almacenada.
En la próxima sección veremos cómo acceder a su página desde
el 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 pueda
visualizar la página desde el navegador.
Desde el Netscape Composer, el navegador se puede activar de
varias maneras:
a) Accionando la opción Navigator del menú Communicator, o
b) Seleccionando el botón Preview de la barra de composición, o
c) Activándolo desde Windows, accionando los menúes: Start,
Programs, Netscape Communicator y finalmente Netscape
Navigator.
18 construcción de sitios web
MANUAL DE ESTUDIANTES
PASO2: Abriendo un documento
Este paso se realiza si usted no se sabe de memoria la ubicación
del documento.
a) Seleccione del menú File la opción Open Page, con lo cual se
desplegará una ventana para buscar la ubicación del
hiperdocumento, como se muestra a continuación:
Figura 3.4 Ventana para
seleccionar una página
b) Seleccione la opción 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 sección
anterior, nuestra página, con nombre primera, había quedado
almacenada en el directorio EjemplosHTML del disco C: (es
decir, con ruta c:\ EjemplosHTML\primera.html).
Figura 3.5 Ventana para
abrir una página
19 construcción de sitios web
MANUAL DE ESTUDIANTES
Presione la opción Open de la ventana para indicarle al navegador
la ubicación de la página.
c) Aparecerá nuevamente la ventana del punto a), pero ahora con
la localización del hiperdocumento, de la siguiente manera:
Figura 3.6 Ventana con la
página seleccionada
d) Ahora puede presionar el botón Open, con lo cual su página
será finalmente desplegada en el navegador como se muestra en
la figura 3.7.
Observe que la dirección tiene el prefijo file:///, lo cual indica que
la página proviene de un archivo. Si la página estuviera en un
servidor disponible en Internet, el prefijo sería http://.
Una vez con la página desplegada, usted puede regresar al
Netscape Composer desde el menú Communicator del navegador.
La página anterior es muy sencilla, en las siguientes secciones
veremos cómo insertar, en una página Web, diferentes estilos de
texto, agregar gráficos, enlaces, tablas, etc.
Figura 3.7 Página cargada
en el navegador
20 construcción de sitios web
MANUAL DE ESTUDIANTES
CAPÍTULO 4
Edición de texto
4.1 La primera página
CONTENIDO
4.1 La primera página
La página que se muestra en la figura 4.1 servirá de base para
trabajar a lo largo de este capítulo en la edición del texto.
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 listas
numeradas?
Figura 4.1 Página de ejercicio
4.8 ¿Cómo cambiar el estilo de las viñetas
y de la numeración?
4.9 ¿Cómo establecer títulos y
encabezados?
21 construcción de sitios web
MANUAL DE ESTUDIANTES
Iniciaremos con un ejercicio para escribir el texto contenido en la
página.
Ejercicio #1:
Escribiendo el texto
sin formato
Construya una página con el siguiente texto, sin
preocuparse aún por el formato. Luego guarde la página
con
un
nombre
significativo
(por
ejemplo
conferencia1.html):
Congreso de Investigaciones en Salud
Lugar: Gran Hotel Internacional
Mi Ciudad, Mi País
Fecha: 22 de noviembre del 2001
Temas Generales:
Salud de la mujer
Salud de las personas de tercera edad
Atención a poblaciones marginales
La medicina natural y la salud
Presentación de Ponencias:
Las ponencias deberán ser presentadas de acuerdo con
el formato establecido por la Comisión Organizadora.
Las ponencias deben ser recibidas por la Comisión a
más tardar el 31 de julio del 2001.
Contactos:
Para obtener mayor información puede comunicarse con
Eldoctor Pérez, a la dirección electrónica
[email protected]
22 construcción de sitios web
MANUAL DE ESTUDIANTES
4.2 ¿Cómo alinear el texto?
Ejercicio #2:
Alineación del
texto
Con base en el texto que
digitó al inicio del capítulo:
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:
a) Seleccione el siguiente fragmento del texto y
céntrelo en la página:
Left para alinear el texto a la izquierda de la página
Center para centrar el texto en la página
Right para alinear el texto a la derecha de la página.
Congreso de
Investigaciones en
Salud
Lugar: Gran Hotel
Internacional
Mi Ciudad, Mi País
Fecha: 22 de
noviembre del 2001
b) Seleccione el siguiente fragmento del texto y
céntrelo en la página:
Para obtener mayor
información puede
comunicarse con
Eldoctor Pérez, a la
dirección electrónica
[email protected]
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 alinear
b) Escoja el tipo de alineamiento seleccionando primero el icono de más a la derecha de la
barra de formato, como se muestra en la siguiente figura, y luego seleccionando el icono
correspondiente a la alineación a la izquierda, al centro o a la derecha:
Alineamiento
23 construcción de sitios web
MANUAL DE ESTUDIANTES
4.3 ¿Cómo 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 opción 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
cámbieles 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 continuación, la opción del tipo de
letra. Aparecerá entonces una lista de letras, de la cual puede seleccionar la que desee.
Tipo de letra
24 construcción de sitios web
MANUAL DE ESTUDIANTES
4.4 ¿Cómo cambiar el tamaño de la letra?
a) Seleccione el texto al cual desea modificar el tamaño de letra
b) Seleccione el menú Format,
c) Seleccione la opción Size. Se abrirá un menú como se muestra
en la siguiente figura:
Ejercicio #4:
Cambiando
el tamaño
de letra
Seleccione el texto
“Congreso de Investigaciones en Salud” y
cámbiele el tamaño de
letra a 18 puntos.
Figura 4.4 Menú para seleccionar el tamaño de letra
PISTA
a) Seleccione el texto al cual desea modificar el tamaño de letra
b) Seleccione de la barra de formato, que se muestra a continuación, la opción del tamaño
de letra. Aparecerá entonces una lista de tamaños, de la cual puede seleccionar el que desee.
Tamaño de letra
25 construcción de sitios web
MANUAL DE ESTUDIANTES
4.5 ¿Cómo 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 opción 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 itálica
los siguientes textos:
“Gran Hotel
Internacional”
“Mi Ciudad, Mi País”
“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
Superíndice
Subíndice
Letra intermitente
Sin fin de línea, el renglón es de
tamaño “infinito”
PISTA
La barra de formato se puede utilizar para cambiar rápidamente 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
26 construcción de sitios web
MANUAL DE ESTUDIANTES
Subrayada
4.6 ¿Cómo cambiar el color de la letra?
Ejercicio #6:
Cambiando
el color
de 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 de
colores, de la cual podrá escoger el color que desee.
Seleccione el fragmento
de texto que desee y
cámbiele de color con
alguno de los métodos
anteriores.
PISTA
Use la barra de formato que se muestra a continuación para cambiar el color de la letra:
Color de la letra
4.7 ¿Cómo agregar viñetas y listas numeradas?
Si ya escribió el texto:
a) Seleccione el segmento de texto al que desea ponerle
numeración o viñetas
b) Seleccione el menú Format.
c) Seleccione la opción List. Se abrirá un menú con las opciones
posibles, 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 vaya
construyendo conforme escribe, entonces:
a) Coloque el cursor al inicio del párrafo donde va a escribir el
texto.
b) Seleccione el menú Format.
c) Seleccione la opción List.
d) Se abrirá un menú con las opciones posibles, tal y como se
muestra en la figura 4.6.
27 construcción de sitios web
MANUAL DE ESTUDIANTES
Ejercicio #7:
Agregando viñetas
e) Una vez seleccionada la opción, aparecerá la primera viñeta o
el primer número. Luego, conforme usted termine el párrafo y
presione la tecla de “entrada” (<Enter>), el Composer irá
colocando las siguientes viñetas automáticamente.
Agregue viñetas al siguiente texto que escribió al inicio del capítulo
(o escríbalo si aún no lo
ha hecho):
“Salud de la mujer
Salud de las personas
de tercera edad
Atención a poblaciones
marginales
Avances en cardiología”
Figura 4.6 Menú para seleccionar viñetas
Note que las posibles opciones son las siguientes:
None
Elimina las viñetas y/o la numeración
Bulleted
Coloca viñetas (●)
Numbered
Coloca números
Description
Separa la lista con una marca de párrafo, pero
no coloca una viñeta visible
Directory
Coloca viñetas (●)
Menu
Coloca viñetas (●)
Para cambiar el tipo de viñeta o número refiérase a la sección
siguiente.
PISTA
a) Se puede poner numeración y viñetas al texto ya existente o iniciar un párrafo con nueva
numeración y/o viñetas. Si el texto ya está escrito simplemente debe seleccionarlo y luego
presionar 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 barra
de formato, con lo cual Netscape Composer coloca la primera viñeta o el primer número, y
luego al terminar la línea y presionar la tecla de entrada (<Enter>), aparecerá
automáticamente la siguiente viñeta o número.
Viñetas
28 construcción de sitios web
MANUAL DE ESTUDIANTES
Numeración
4.8 ¿Cómo cambiar el estilo de las viñetas y de la
numeración?
Nota: Para cambiar el estilo de las viñetas o de la numeración 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 opción Character Properties del menú Format.
Dependiendo del estilo (Style) de la lista que puede ser “Numbered
List” o “Bullet (Unnumbered) List” aparecerán las opciones para
hacer una lista numerada o una lista con viñetas. Las figuras 4.7
y 4.8 muestran las posibles opciones de numeración y viñetas que
permite Netscape Composer.
Ejercicio #8:
Figura 4.7 Cambio de
estilo de numeración.
Cambiando
el estilo de las
viñetas
a)
Seleccione
el
siguiente fragmento de
texto, que escribió al
inicio del capítulo (o
escríbalo ahora si no lo
hizo antes):
Las ponencias deberán
ser presentadas de
acuerdo con el formato
establecido por la
Comisión Organizadora.
Las ponencias deben
ser recibidas por la
Comisión a más tardar
el 31 de julio del 2001.
Figura 4.8 Cambio de
estilo de viñetas.
b) Póngales un estilo de
viñeta diferente al que
usted haya utilizado
anteriormente.
29 construcción de sitios web
MANUAL DE ESTUDIANTES
4.9 ¿Cómo establecer títulos y encabezados?
Ejercicio #9
Poniendo
encabezados
Ponga los títulos “Temas generales”, “Presentación de Ponencias”, y “Contactos” como encabezados de tipo
2 (Heading 2).
a) Si el texto ya está escrito, seleccione el texto al que quiere dar
formato de título.
b) Luego seleccione la opción Heading del menú Format (ver
figura 4.9).
c) Elija el tipo de encabezado (1 es el título mayor y 6 es el título
menor).
d) Nota: Si prefiere indicar el tipo de encabezado antes de escribir
el texto, seleccione directamente la opción Heading del menú
Format (ver figura 4.9), seguido del tipo de encabezado (1 es el
título mayor y 6 es el título menor). El cursor cambiará de tamaño
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 títulos o encabezados que destaquen en las páginas.
Observe los títulos que aparecen en la hoja de la figura 4.10 que
se muestra en la siguiente página.
El encabezado “Catálogo de Libros (por área)” se hizo con el
estilo denominado Heading 1 y los encabezados “Artes y
Humanidades”, “Computación e Informática” y “Educación” 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 título y subtítulo dentro de
la página.
Realice el ejercicio 9 para hacer encabezados.
Figura 4.9 Selección del
encabezado
30 construcción 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, selecciónelo, luego seleccione la opción de estilo de la barra y el tipo
de encabezado que aparece en
la lista (Heading 1 es el título
mayor y Heading 6 es el título
menor).
b) Si prefiere indicar el tipo de
encabezado antes de escribir el
texto, seleccione directamente
la opción de estilo de la barra
de formato. El cursor cambiará
de tamaño de acuerdo con el
tipo de encabezado
seleccionado y usted podrá
empezar a escribir el texto.
Figura 4.11 Selección de encabezado desde la barra de formato
31 construcción de sitios web
MANUAL DE ESTUDIANTES
CAPÍTULO 5
Inclusión de elementos gráficos
5.1 Insertando líneas de división
CONTENIDO
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 la
siguiente figura:
5.2 Insertando una imagen
5.3 Algunas opciones del Netscape
Composer al incorporar
imá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 con
respecto al texto
5.3.4 Cambio del tamaño de la imagen
5.3.5 Hacer un marco alrededor de la
imagen
5.3.6 Despliegue de imágenes
Figura 5.1 Menú para insertar líneas de división
Ejercicio #1:
Insertando dos
líneas de división
Use conferencia1.html,
página que se ha construido a lo largo de este
manual, e inserte dos
líneas de división, una
antes del texto “Lugar”
y otra después de
“fecha”, tal y como se
muestra en la figura 5.2.
Figura 5.2 Una página con líneas de división
32 construcción de sitios web
MANUAL DE ESTUDIANTES
Ejercicio #2:
5.2 Insertando una imagen
Insertando una
imagen en la
página del ejercicio
La imagen que usted va a insertar, debe estar almacenada en algún
directorio de su disco duro o servidor.
Netscape Composer permite insertar imágenes que están
almacenadas en los formatos: gif, jpg y jpeg.
a) Utilice la página
conferencia1.html e inserte cualquier imagen
que usted tenga almacenada en su disco duro.
b) Reduzca el tamaño de
la imagen que insertó de
tal manera que sea apenas una ilustración al
lado del título “Congreso de Investigaciones en
Salud”.
a) Seleccione la opción Image... del menú Insert o seleccione el
icono de Image de la barra de Composición. 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 ubicación del archivo, puede buscarlo
seleccionando la opción Choose File... Al seleccionar esta opción,
aparecerá una ventana (ver figura 5.4) estándar de Windows que le
permitirá buscar el archivo a insertar.
Como se mencionó anteriormente las imágenes deben estar
almacenadas en su computadora o en su servidor para poder
insertarlas. Las imágenes se pueden obtener de diferentes lugares.
Ubicación y
nombre del
archivo que
contiene la imagen
Alineamiento de la
imagen con
respecto al texto
Coloca la imagen
como fondo
Dimensión de la
imgaen
Espacio alrededor
de la imagen
Figura 5.3 Ventana para selección de la imagen
33 construcción de sitios web
MANUAL DE ESTUDIANTES
Figura 5.4 Ventana para seleccionar la imagen a insertar
◗ Se pueden usar imágenes que vengan con
Windows o con algún programa de
dibujo instalado en su computadora,
◗ También se pueden bajar imágenes de
Internet.
Algunas palabras comunes para buscar,
en Yahoo (http://www.yahoo.com) o
Altavista (http://www.altavista.com) sitios
que contengan imágenes son: “clipart”,
“bitmaps”, “graphics”, “background”,
“icons” y “art”.
◗ Se pueden también utilizar fotografías o
cualquier tipo de imagen que se pueda
digitalizar.
5.3 Algunas opciones del Netscape Composer al
incorporar imágenes en páginas Web.
5.3.1 Modificación de la imagen:
Si desea realizar algún cambio a la imagen, puede hacerlo
seleccionando 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 and
wrapping around images” tienen el propósito de ubicar la imagen
con respecto al texto que está a su alrededor. La imagen puede ser
colocada a la izquierda de la página y el texto a su derecha, en la
parte superior, en el medio o en la parte inferior. También la
imagen puede ser colocada a la izquierda o a la derecha, con texto
alrededor.
5.3.4 Cambio del tamaño de la imagen:
Usted puede cambiar el tamaño 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 tamaño original simplemente presione el botón
denominado “Original Size”. La opción Constrain provoca que el
cambio 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 marco
alrededor de la imagen, para que no quede demasiado pegada al
34 construcción 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 imágenes
Las imágenes muy grandes requieren mucho tiempo para ser
cargadas. Netscape Composer incluye la opción “Alt. Text /
LowRes...”para que aparezca algún texto mientras la imagen es
cargada o aparezca una imagen de menor resolución (calidad)
mientras la imagen definitiva es cargada. La ventana que aparece
al seleccionar esta opción 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 ubicación y el nombre del
archivo de baja resolución que usted desea que aparezca mientras
se carga la imagen definitiva; también puede seleccionar esa
imagen de baja resolución por medio de la opción “Choose File...”.
Esta facilidad sirve para agregar dinamismo en el momento del
despliegue a páginas que contienen imágenes muy grandes, pues
ayuda a disminuir el tiempo de espera cuando las páginas están
siendo transferidas.
35 construcción de sitios web
MANUAL DE ESTUDIANTES
CAPÍTULO 6
Creación de enlaces
para la navegación
6.1 ¿Qué es un enlace?
CONTENIDO
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?
Un enlace es una relación que se establece de una página fuente a
otra destino. Al hacer “click” sobre el enlace de la página fuente,
se activa la página destino. A los elementos de la pantalla que
contienen los enlaces se les conoce como “palabras calientes” o
“imágenes calientes”. Esta es una de las formas más comunes de
navegació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ó a
partir del capítulo 4 de este manual para convocar a una
conferencia internacional que vemos a continuación.
Suponga que vamos a enlazar esta página con una página en la
Figura 6.1 Página fuente para establecer un enlace
36 construcción de sitios web
MANUAL DE ESTUDIANTES
Figura 6.2 Página destino del enlace
cual se explica el formato del documento para la presentación de
la ponencia. Para hacerlo breve, construya una página con la
información que se muestra en la figura 6.2 y guárdela con el
nombre “conferencia2.html”. Luego estableceremos el enlace
desde 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ón
de Ponencias”, se active la página de la figura 6.2.
Figura 6.3 Enlace entre las páginas
37 construcción de sitios web
MANUAL DE ESTUDIANTES
6.2 ¿Cómo establecer un enlace?
Ejercicio #1:
Insertando otro
enlace
Seleccione la palabra
“Congreso” de la página conferencia2.html y
establezca un enlace hacia conferencia1.html.
Tal y como se mencionó anteriormente, para establecer un enlace
se requieren dos páginas. En esta sección deseamos establecer un
enlace entre la página de la figura 6.1 y la de la figura 6.2, de la
siguiente manera:
a) Abra la página 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 página de la figura 6.1.
c) Seleccione la opción Link del menú Insert o seleccione el icono
Link de la barra de composición. Aparecerá la siguiente ventana:
Figura 6.4 Ventana para
manejo de enlaces
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ón
Choose 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 con
Netscape Navigator y haga click sobre la palabra “formato”
establecida como enlace. Deberá activarse la página destino.
6.3 ¿Cómo eliminar un enlace?
38 construcción de sitios web
MANUAL DE ESTUDIANTES
Ejercicio #2:
Eliminando un
enlace entre
páginas
Elimine el enlace que
hizo en el ejercicio de la
sección anterior; es decir, elimine el enlace que
estableció entre la palabra “Congreso” de
conferencia2.html
y
conferencia1.html.
a) Abra la página donde fue establecido el enlace (por ejemplo, la
pá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 icono
Link de la barra de composición. Aparecerá la ventana que se
muesta en la figura 6.5.
d) Presione el botón Remove Link y luego el botón OK para que el
enlace quede eliminado.
e) Guarde la página.
6.4 ¿Cómo establecer enlaces dentro de una
Figura 6.5 Ventana para eliminar un
enlace
39 construcción de sitios web
MANUAL DE ESTUDIANTES
misma página?
Enlazar secciones dentro de una misma página es útil para
presentar la información de páginas muy grandes; por ejemplo,
para hacer documentos en los que al inicio de la página aparece la
tabla de contenido y, al hacer “click” sobre cada título, el control
se traslada a la sección 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 página de la figura 6.6, se deberán colocar
tres anclas: una al inicio de la sección “Temas generales:”, otra al
inicio de la sección “Presentación de Ponencias:” y otra al inicio
de la sección “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 título “1. Temas generales”, otro
en “2. Presentación de Ponencias” y el último en “3. Contactos”.
Para agregar anclas y construir una página como la de la figura
6.6 haga lo siguiente:
a) Abra la página 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 construcción de sitios web
MANUAL DE ESTUDIANTES
Figura 6.7 Ventana para nombrar un
“target”.
b.1) Coloque el cursor al inicio de la sección “Temas
generales:”
b.2) Seleccione la opción 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 tópicos de la sección que se está “anclando”. Coloque, por
ejemplo, el nombre “Temas” y luego presione el botón OK.
b.4) Aparecerá un icono que identifica al ancla contiguo al
título “Temas generales:”, de la siguiente manera:
b.5) Para la sección “Presentación de Ponencias” coloque un
ancla 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 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 página
Ejercicio #3:
Insertando elaces
locales
Construya enlaces locales dentro de la página
conferencia2.html.
1. Temas generales
2. Presentación de Ponencias
3. Contactos
d) Establezca los enlaces de la siguiente manera:
d.1) Seleccione el título “1. Temas generales” del área de
contenido de la página.
d.2) Seleccione la opción 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 construcción 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 título “1. Temas generales” de la
sección de contenido con la sección “Temas generales:”. El
título “1. Temas generales” cambiará de color para indicar que
es un enlace.
d.4) Repita este mismo paso para establecer los enlaces de los
títulos “2. Presentación de Ponencias” y “Contactos” con sus
respectivas secciones dentro de la página.
e) Guarde la página y active el Netscape Navigator para probar las
anclas de la página.
42 construcción de sitios web
MANUAL DE ESTUDIANTES
CAPÍTULO 7
Elaboración de tablas
7.1 ¿Qué es una tabla?
CONTENIDO
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 de
una tabla?
Una tabla sirve para mostrar información 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
año, son ejemplos de información que podría ser colocada en
tablas.
A cada espacio donde converge una fila con una columna se le
llama celda, Veamos a continuación un ejemplo de una tabla que
registra las ventas de algunos productos durante los dos semestres
del año. Aquí el número 475 está ubicado en la celda
correspondiente a la fila 4 y la columna 2:
COLUMNA 1
FILA 1
Producto
FILA 2
COLUMNA 2
COLUMNA 3
De enero a julio
De agosto a diciembre
Borradores
80
34
FILA 3
Cuadernos
580
300
FILA 4
Lápices
475
610
7.2 ¿Cómo insertar una tabla con Netscape
Composer?
En esta sección se utilizará como base la página
conferencia2.html desarrollada en el capítulo anterior, la cual se
muestra en la siguiente página (figura 7.1).
Se desea modificar el contenido de esta página para que luzca
como en la figura 7.2.
43 construcción de sitios web
MANUAL DE ESTUDIANTES
Figura 7.1 Página
para insertar una
tabla
Figura 7.2
Ejemplo de una
página que
contiene una
tabla
44 construcción de sitios web
MANUAL DE ESTUDIANTES
PASOS
a) Agregue el título “Secciones de la Ponencia”
b) Seleccione la opción 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 establecerán las
características de la tabla, tal y como se muestra a continuación:
45 construcción 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 botón OK para que aparezca la tabla. Las
columnas de la tabla tienen el mismo ancho, el cual se modifica
automáticamente 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 ¿Cómo 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 opción Table, tal y como se
mostró anteriormente en la figura 7.3. Observe que este menú
presenta cuatro opciones:
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.
Table:
Row:
Column:
Cell:
para insertar una tabla
para insertar toda una fila
para insertar toda una columna
para insertar una sola celda.
Seleccione entonces la opción 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 construcción de sitios web
MANUAL DE ESTUDIANTES
7.4 ¿Cómo 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 opción 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 opción correspondiente dependiendo de lo
que usted desee eliminar (la tabla completa, una fila, una columna
o una celda).
Ejercicio #2:
Figura 7.5 Menú para borrar
elementos de una tabla
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.
47 construcción de sitios web
MANUAL DE ESTUDIANTES
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:
Ejercicio #3:
Cambiando la
apariencia de la
tabla
a) Póngale un color
diferente a cada celda de
la tabla.
b) Póngale un borde
más ancho a la tabla.
c) Copie la tabla en otra
parte de la página y
póngale 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 construcción 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 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 que
aparece al lado de esta opción.
◗ Colocar una imagen como fondo de la tabla. Para ello, a través
del botón “Choose File” se selecciona un archivo de imagen que
contenga la imagen correspondiente.
49 construcción de sitios web
MANUAL DE ESTUDIANTES
CAPÍTULO 8
Impresión con Netscape Composer
8.1 Visualización previa de la página
CONTENIDO
Es común, antes de imprimir una página, tener una vista
preliminar de la misma. Para hacerlo, se siguen los siguientes
pasos:
8.1 Visualización previa
de la página
8.2 Imprimiendo la página
a) Seleccione el menú File
b) Seleccione la opción Print Preview tal y como se muestra en la
figura 8.1.
c) Aparecerá entonces la página para poder observarla.
Figura 8.1 Opción de menú para obtener una
vista preliminar
Ejercicio #1:
Visualizando una
página
Abra
una
página
existente y visualice su
contenido a través de la
opción Print Preview.
50 construcción de sitios web
MANUAL DE ESTUDIANTES
8.2 Imprimiendo la página
Ejercicio #2:
Haciendo una
prueba de
impresión
Si su computadora está
conectada
a
una
impresora, haga una
prueba de impresión
siguiendo los pasos
antes detallados.
a) Seleccione el menú File
b) Seleccione la opción Print..., tal y como se muestra en la figura
8.2.
c) Aparecerá entonces una ventana para escoger las alternativas
de impresión: la impresora, las páginas y la cantidad de copias
que se desean imprimir. Esta es una ventana casi estándar en la
mayoría de los programas.
Figura 8.2 Opción de menú para
imprimir
51 construcción de sitios web
MANUAL DE ESTUDIANTES
CAPÍTULO 9
Planificación de un sitio Web
9.1 Introducción
CONTENIDO
Ahora que ya sabe cómo crear y enlazar páginas Web es importante que tenga conocimiento del proceso necesario para planificar la producción de páginas y sitios Web.
9.1 Introducción
9.2 Pasos para la planificación y
producción 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 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 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
Pueden existir diferentes propósitos para crear un sitio Web: difundir información, ofrecer productos o servicios, brindar asistencia técnica, promover una organización, etc. En términos generales, puede afirmarse que responde al propósito de publicar en la
Web. Como toda publicación, su elaboración requiere de un proceso de planificación y desarrollo. Para orientar este proceso se
recomiendan algunos pasos importantes, varios de los cuales pueden llevarse a cabo en forma simultánea:
1. Definir el objetivo del sitio
2. Identificar la o las diferentes audiencias o poblaciones meta
3. Diseñar la estructura y organizar el contenido del
sitio
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.
52 construcción de sitios web
MANUAL DE ESTUDIANTES
9.2 Pasos para la planificación
y producción de un sitio Web
9.2.2 Identificar la o las diferentes audiencias o poblaciones meta
9.2.1 Definir el objetivo del sitio
Como segundo paso, debemos identificar cuáles serán las diferentes poblaciones meta o audiencias, a las cuales nos
queremos dirigir. El tipo de población 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 organización de las páginas,
los colores, el tipo y cantidad de gráficos, etc. No es lo mismo hacer una publicación en la Web cuando se espera
que las personas visitantes sean profesionales en un área específica y con un
conocimiento técnico definido, que hacer una publicación para una población
no determinada. Tampoco es lo mismo
diseñar el sitio para personas adultas
que para niños(as).
Contestar a la pregunta ¿Para qué queremos desarrollar nuestro sitio? es el
paso básico para iniciar la planificación
de un sitio Web. Aquí se define la razón
por la cual vamos a realizar este trabajo.
Aunque pueda parecer obvio, es importante señalar que una buena explicitación del objetivo general al que el sitio
debe responder, será la mejor guía para
todos los pasos subsiguientes. Este primer paso es básico 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 cómo se
presente, dependerá de nuestro propósito y por ello es tan importante hacernos
esta pregunta al iniciar el trabajo.
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 acompaña este capítulo son meramente ilustrativos.
Como primer paso para definir el contenido, es importante recopilar toda la información existente que se desea incluir
en el sitio y definir qué nueva información es necesario producir. Luego, se
debe organizar dicha información en
secciones, ya que ésto ayudará a definir
las diferentes páginas que el sitio contendrá. Cada sección podría ser una página en nuestro sitio Web.
Además de la información, también deben considerarse algunos servicios o
funciones que el sitio puede ofrecer. Un
sitio puede tener, por ejemplo, una función que permita realizar búsquedas por
palabras clave, formularios para recibir
53 construcción de sitios web
MANUAL DE ESTUDIANTES
información de las personas usuarias,
foros de discusión, 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 navegación del sitio, o sea, la forma en que las secciones estarán enlazadas. Como producto de ésto tendremos
un diagrama de flujo que mostrará las diferentes páginas que debemos construir,
así como los enlaces que deben existir
entre dichas páginas, quedando así definida la estructura de navegación del sitio.
Una buena estructura puede ser un elemento vital para atraer a las personas lectoras una y otra vez.
b) La estructura de navegación
La estructura de navegación es la forma
en que están enlazadas las diferentes páginas o secciones del sitio. Las posibilidades de navegación de las personas en
el sitio dependen de los enlaces que
existan entre sus páginas, y los enlaces
se establecen con la intención de que la
navegación sea apropiada para lograr
los objetivos del sitio, que las personas
visitantes encuentran fácilmente la información que buscan o se quiere mostrar.
Al igual que sucede con todo proyecto,
es muy importante hacer el esquema de
la estructura de navegación del sitio antes de empezar a construir las páginas.
La importancia de un esquema de navegación radica en lograr un diseño que
permita entender fácilmente el sitio, navegar fluidamente en él y llegar a todas
las páginas en forma ágil.
Se pueden mencionar dos tipos básicos
de estructuras: la jerárquica y la relacional, sin embargo también se pueden implementar esquemas de tipo mixto, dependiendo de la información que se desee presentar.
54 construcción de sitios web
MANUAL DE ESTUDIANTES
Estructura jerárquica
Esta forma de organización es recomendable cuando la página se divide en temas o categorías y sub-categorías diferenciables. La figura 9.1 presenta un esquema que ilustra esta estructura de navegación. En ella, la entrada al sitio
Web es por la página denominada A, la
cual tendría enlaces con las páginas B,
C, D y E, a su vez, la página D tendría
enlaces hacia las páginas F y G. Así, el
acceso a la página G se logra sólo si la
persona navega de la página A a la D y
luego de la página D a la G.
A
B
C
D
F
E
G
Figura 9.1 Estructura jerárquica
Un caso en el cual podría ser recomendable utilizar una estructura jerárquica
de navegación es un libro en el que la
página principal (A) contiene un índice
con títulos que llevan a los diferentes
capítulos (B, C, D y E) y a su vez, cada
capítulo tiene secciones separadas.
Estructura relacional
Con esta estructura de navegación cualquier página puede estar enlazada a
cualquiera (ver figura 9.2).
Figura 9.2 Estructura relacional
Esta es la forma de organización más
común en la Web pues permite gran flexibilidad de navegación, al permitir que
cualquier página pueda tener enlaces de
hipertexto hacia otras páginas.
Cualquiera que sea la estructura de navegación 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 fácilmente las páginas 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 navegación, puede tratar de analizar e identificar los aspectos que producen este
efecto para utilizarlos en la construcción de su sitio.
9.2.4 Estilo gráfico de presentación
Al igual que sucede con cualquier publicación, al desarrollar un sitio Web, se
pretende lograr un estilo de presentación tal que resulte atractivo, funcional,
fácil 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 presentación del sitio y para definirlo se deben
considerar aspectos tales como: el estilo
del texto, los elementos gráficos y la incorporación de sonido, animaciones y
vídeo
A continuación 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 construcción de sitios web
MANUAL DE ESTUDIANTES
◗ Emplee párrafos para dividir el texto
en secciones más cortas. Es más fácil
leer párrafos cortos en una pantalla.
◗ Use encabezados para enfatizar las
ideas principales. Pero use los énfasis
sólo donde sean necesarios.
◗ Seleccione un tipo de letra (“font”)
que sea visualmente atractivo y claro
de leer. Letras demasiado pequeñas o
muy elaboradas pueden producir desinterés 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 gráficos
◗ Los elementos gráficos (ilustraciones,
iconos y fondos) pueden dar una apariencia agradable a las páginas 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 líneas delgadas, o con líneas rectas, etc.
◗ Use con moderación los colores muy
vistosos y encendidos, como el rojo,
pues el ojo humano es muy sensible a
ellos y podrían convertirse en distractores.
◗ Use animaciones como instrumento
estético para resaltar alguna información o para hacer atractiva la página.
Existen actualmente sitios donde se
obtienen animaciones que se pueden
incorporar a un hiperdocumento.
También algunos editores de páginas
Web tienen instrucciones para animar
texto e imágenes
◗ Hay sitios en la Web que tienen bibliotecas de dominio público de iconos, figuras y fondos que podemos
utilizar. Usted podría encontrarlos a
través de sitios como Altavista o Yahoo. Algunas palabras clave para buscar 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 original
a la página. Para esto necesitará digitalizar imágenes con un “scanner”.
c) El sonido, las animaciones y el vídeo
La utilización de múltiples medios audiovisuales (o multimedios) para presentar información es cada vez más común. Los medios audiovisuales pueden
ser de gran ayuda para poder expresar
con claridad y eficacia una idea. Sin
embargo, en Internet deben, aún en la
actualidad, ser utilizados con mesura
pues las páginas que contienen este tipo
de elementos podrían ser demasiado
“pesadas” y su transferencia a la computadora 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 usuario. Al igual que sucede con los gráficos, deben ser utilizados con moderación para no distraer ni cansar a las
personas usuarias.
Otras consideraciones a tener en cuenta
a la hora de definir el estilo gráfico de
presentación de un sitio son:
◗ Las personas que visitarán el sitio
usan diferentes computadoras, con diferente velocidad, capacidad de memoria, etc. Si su página es muy pesada, por ejemplo, no todas las personas
podrán bajarla rápidamente y podrían
aburrirse de esperar antes de que la
página sea transferida.
◗ Las personas que visitarán su sitio
usan diferentes navegadores. Si usted
utiliza algún elemento que sólo puede
ser visualizado con la última versión
del navegador, puede ser que muchas
personas no puedan verlo pues estén
usando versiones anteriores.
◗ Las personas que visitarán su sitio se
conectan a Internet a diferentes velocidades.
◗ Las personas que navegan por la Web
quieren, por lo general, encontrar lo
que buscan rápidamente y, al ser la
computadora un medio muy dinámico, dedican poco tiempo para inspeccionar las páginas. Mientras más livianas sean sus páginas, más accesibles serán.
9.2.5 Construir las páginas y el sitio
La construcción de las páginas se debe
hacer en forma paulatina y con base en
las consideraciones mencionadas anteriormente. Se puede llevar a cabo con
un programa editor de páginas Web o
directamente en HTML.
Es en este punto donde se debe definir
cómo se almacenarán físicamente las
páginas, los elementos gráficos, el soni-
56 construcción de sitios web
MANUAL DE ESTUDIANTES
do, las animaciones y el vídeo en el servidor; es decir, cuál será la estructura de
directorios y en cuáles directorios se almacenará cada componente. Usted debería hacer al menos un directorio en el
cual guarde las páginas y los recursos
audiovisuales (dibujos, iconos, sonidos,
animaciones y vídeos).
Para sitios muy grandes es preferible
que usted haga un directorio para la página principal que contenga el archivo
HTML con sus recursos audiovisuales y
haga subdirectorios para cada una de las
páginas asociadas a la página principal;
cada subdirectorio almacenará el archivo de la página en html con sus respectivos recursos audiovisuales. La organización de las páginas en directorios y
subdirectorios es muy importante para
mantener el orden y facilitar la administración y actualización del sitio.
9.2.6 Probar y evaluar el sitio
Siempre es recomendable probar que todas las páginas se vean como pretendemos y que todos los enlaces entre páginas 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 páginas
en directorios y, utilizará un programa
navegador (por ejemplo, Netscape Navigator o Internet Explorer) para observar
có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 animaciones y el vídeo se desplieguen adecuadamente.
◗ Los enlaces entre las páginas funcionan conforme se había diseñado.
◗ No aparezca ningún mensaje de error.
57 construcción de sitios web
MANUAL DE ESTUDIANTES
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 línea. Usted debe
indagar si su organización 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.
También 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
La instalación 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 comunicación
ftp, ó c) en forma guiada desde algún
programa especialmente diseñado para
instalar sitios web.
a) Instalación con ayuda de la persona
que administra el servidor Web
Bajo este esquema las personas que diseñan el sitio simplemente entregan las
páginas, 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.
b) Instalación transfiriendo el directorio con los archivos mediante el protocolo de comunicación 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 localización de páginas, superior de la ventana de navegación, donde
usualmente se coloca la etiqueta
“http://...”, se coloca lo siguiente:
[ftp://[email protected]]
donde:
username: representa al login o identificación del servidor, y
nombresitio: es el nombre o domino
donde quedará montado su sitio Web.
Netscape Navigator también incluye la
opción “Upload File...” en el menú File,
con la cual se puede transferir el sitio a
un servidor web.
c) Instalación en forma guiada desde
algún programa especialmente diseñado para instalar sitios web.
Existen en Internet algunos proveedores
de servicios web que prestan o alquilan
espacios en su servidor y que tienen
programas que guían a las personas en
la instalación 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 cómo está siendo
utilizado, y también para conocer mejor
a su población usuaria.
La medición del impacto del sitio se logra, principalmente, a través de estadísticas de acceso, tales como: conteo de la
cantidad de personas que acceden a
nuestro sitio, cantidad de personas que
han visitado cada sección del sitio, búsquedas realizadas por las personas
usuarias, dominio de procedencia de las
personas usuarias, búsqueda que hicieron
para encontrar nuestro sitio, secciones
especiales para que los(as) usuarios(as)
suministren datos que nos proporcionen
información valiosa, etc. Consulte a su
proveedor de servicios sobre las estadísticas que ofrece.
La información derivada de la evaluación del sitio nos permitirá vislumbrar
la necesidad de nuevos servicios o información 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 podrán ser
contrastados con los costos de su desarrollo, operación y mantenimiento.
58 construcción de sitios web
MANUAL DE ESTUDIANTES
tualización.
9.2.10 Actualizar continuamente
el sitio
Todo sitio necesita ser actualizado y
ofrecer siempre información de interés
para que las personas lo sigan visitando.
Sin embargo, en un momento determinado, un sitio Web puede requerir actualización por diversas razones específicas, por ejemplo:
◗ Los resultados obtenidos al medir el
impacto del sitio muestran que nuestro objetivo no se está cumpliendo.
◗ Nuestros objetivos cambiaron.
◗ El diseño quedó obsoleto.
◗ La Web se caracteriza por ser un medio de comunicación cuya información es constantemente actualizada y
por lo tanto nuestro sitio debería responder a esa característica.
◗ Deseamos tener “clientes frecuentes”
que visiten el sitio y por lo tanto es
fundamental ofrecerles información y
elementos nuevos periódicamente.
Cualquiera que sea nuestra razón, 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 información en directorios
y subdirectorios, según las secciones
que el sitio tenga, será más fácil su ac-
59 construcción de sitios web
MANUAL DE ESTUDIANTES
EVALUACIÓN
para uso de las
personas participantes
Una parte importante de todo entrenamiento es recibir
retroalimentación 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 guía y
siéntase con la libertad para agregar comentarios en cualquier
área adicional que considere pertinente.
Su nombre y dirección
(opcional):
Nombre del curso:
Duración del curso
(en horas):
Fecha:
Lugar en que se desarrolló:
Instructores/as:
60 construcción de sitios web
MANUAL DE ESTUDIANTES
En la siguiente tabla indique cuáles secciones se desarrollaron con
una metodología guiada y cuáles con una de auto-estudio y
experimentación. Marque la casilla correspondiente con una X.
ITEMS
SU NIVEL DE
INTERÉS
METODOLOGÍA
alto medio bajo
Introducción al curso de
elaboració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 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
páginas y navegar por la web
2.1 Programas editores
de páginas Web
2.2 Programas navegadores
de la Web
2.3 Uso de editores de texto y
hojas electrónicas
2.4 El paquete Netscape como
instrumento generador y
visualizador de páginas Web
2.5 Funcionamiento general de
Netscape Composer
3. Construcción de una página
con Netscape Composer
3.1 Escribiendo texto
3.2 Guardando la página
3.3 Viendo la página con el
navegador
61 construcción de sitios web
MANUAL DE ESTUDIANTES
Auto
Guiado estudio
NIVEL DE
DIFICULTAD
alto medio bajo
SU NIVEL DE
INTERÉS
METODOLOGÍA
alto medio bajo
4. Edición de texto
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 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 las
viñ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ón
5.2 Insertando una imagen
5.3 Algunas opciones del Netscape
Composer 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 de
una tabla?
8. Impresión con
Netscape Composer
8.1 Visualización previa de la página
8.2 Imprimiendo la página
9. Planificación de un sitio Web
9.1 Introducción
9.2 Pasos para la planificación y
producción de un sitio Web
10. Conclusión,
evaluación y despedida
62 construcción de sitios web
MANUAL DE ESTUDIANTES
Auto
Guiado estudio
NIVEL DE
DIFICULTAD
alto medio bajo
Por favor indique a continuación su nivel de acuerdo con las
siguientes oraciones colocando el número 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 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:
63 construcción de sitios web
MANUAL DE ESTUDIANTES