Documente Academic
Documente Profesional
Documente Cultură
UTILIZANDO
MANUAL DE ESTUDIANTES
ITrain es una coleccin de materiales de capacitacin en el uso de Internet para capacitadores y estudiantes. Los materiales ofrecen un acercamiento interactivo, que involucra a los estudiantes en el proceso de aprendizaje y apoya a los instructores en la planificacin y personalizacin de los cursos. Los manuales del programa ITrain contienen materiales tanto para autodidactas como para tutores. Los materiales han sido desarrollados por ITrain Collective, un grupo multicultural de capacitadores en Internet con experiencias de trabajo alrededor del mundo. El objetivo ha sido producir un grupo balanceado de manuales de capacitacin, que sirva tanto para usuarios nuevos de la Internet como de nivel intermedio, al igual que para instructores nuevos y experimentados.
Acceso es una organizacin no gubernamental de desarrollo, con sede en Costa Rica y programas activos en Centroamrica. Ofrecemos asistencia tcnica, capacitacin y apoyo para el desarrollo institucional a organizaciones locales, nacionales e internacionales que comparten nuestro compromiso con un desarrollo equitativo, participativo y sostenible. Acceso ofrece asistencia en planificacin institucional y programtica, desarrollo de juntas directivas, usos bsicos y estratgicos de la Internet, diseo y desarrollo de presencias institucionales en el World Wide Web, diseo de estrategias de comunicacin y en otras reas afines.
1999, ITrain Group Publicacin de: ITrain Group unganisha.idrc.ca/itrain Fundacin Acceso www.acceso.or.cr Edicin a cargo de: Nora Galeano, Fundacin Acceso Textos: Lilliana Sancho Edicin grfica: Fernando Francia
CONTENIDO
Presentacin 1. Introduccin a la construccin de sitios Web
1.1 Qu es el World Wide Web? 1.2 El modelo Cliente/Servidor 1.3 Pginas web 1.4 El lenguaje HTML 1.5 Sitios Web 1.6 El URL (Uniform Resource Locator o Localizador Uniforme de Recursos)
5 6
6 6 8 9 10 11
12
12 13 13 14 15
16
16 17 18
4. Edicin de texto
4.1 La primera pgina 4.2 Cmo alinear el texto? 4.3 Cmo cambiar el tipo de letra? 4.4 Cmo cambiar el tamao de la letra? 4.5 Cmo cambiar el estilo de la letra? 4.6 Cmo cambiar el color de la letra? 4.7 Cmo agregar vietas y listas numeradas? 4.8 Cmo cambiar el estilo de las vietas y de la numeracin? 4.9 Cmo establecer ttulos y encabezados?
21
21 23 24 25 26 27 27 29 30
32
32 33 34 34 34 34 34 34 35
36
36 38 39 40
7. Elaboracin de tablas
7.1 Qu es una tabla? 7.2 Cmo insertar una tabla con Netscape Composer? 7.3 Cmo agregar una fila, una columna o una sola celda? 7.4 Cmo borrar una fila, una columna, una sola celda o la tabla completa? 7.5 Cmo cambiar la apariencia de una tabla?
43
43 43 46 47 48
50
50 51
52
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 propsito de facilitar la construccin de sitios Web, utilizando como herramienta Netscape Composer 4.x. Forma parte de una serie de materiales de capacitacin en Internet desarrollados para el ITrain Group, con el soporte financiero del Centro Internacional de Investigacin en Desarrollo (International Development Research Centre, IDRC). Es un manual bsico y se puede obtener en forma gratuita de la direccin
http://unganisha.idrc.ca/itrain/.
1. Introduccin a la construccin de sitios Web 2. Los programas para hacer pginas y navegar por la web 3. Construccin de una pgina con Netscape Composer 4. Edicin de texto 5. Inclusin de elementos grficos 6. Creacin de enlaces para la navegacin 7. Elaboracin de tablas 8. Impresin con Netscape Composer 9. Planificacin de un sitio Web Evaluacin para uso de las personas participantes
Se espera que este material sea utilizado por capacitadores(as) de herramientas de Internet as como por usuarios(as) de los pases en desarrollo. Para su facilidad de uso ha sido organizado en nueve secciones.
CAPTULO 1
CONTENIDO
1.1 Qu es la World Wide Web? 1.2 El modelo cliente/servidor 1.3 Pginas web 1.4 El lenguaje HTML 1.5 Sitios web 1.6 El URL (Uniform Resource Locator o Localizador Uniforme de Recursos)
Para ampliar este concepto tomemos como ejemplo el funcionamiento de la televisin. Bajo esta perspectiva, cul sera el servidor y cul el cliente? Como ya se habr imaginado, los canales de televisin son los servidores y su televisor es el cliente. Los canales siempre tienen su seal de transmisin disponible y cuando usted selecciona el canal, ste se conecta y enva la imagen a su aparato de televisin. Adems, muchas personas pueden estar viendo el mismo canal a la vez. Sin embargo, existen diferencias entre el servidor Web y la televisin como, por ejemplo, que en la Web la persona usuaria puede, entre otras cosas, interactuar y publicar directamente informacin en los servidores y que si se desconecta de la Internet, la pgina que tiene en pantalla no se apagar. Cabe mencionar, con este ltimo ejemplo, que el canal enva la misma seal a todos los televisores, pero la forma en que se vea el programa de televisin depende de su televisor. Asimismo, los servidores Web envan las pginas a su computadora, pero la forma y la calidad de despliegue depende de su computadora y de los programas que usted utilice.
Figura 1.2 Ejemplo de hipertexto Los tigres son felinos que requieren grandes extensiones de terreno para su subsistencia. Son mamferos carnvoros.
El len
Formas de alimentacin:
- Carnvoros - Herbvoros Es un carnvoro conocido como el rey de la selva ... Su pariente el tigre ...
<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>
Adems de stas, HTML incluye, entre otras, etiquetas para: Colocar numeracin y vietas Insertar tablas Insertar elementos grficos Indicar el tipo y tamao de la letra Colocar casillas para ingreso de texto Hacer enlaces entre pginas, etc. Cuando la World Wide Web se inici, quienes queran hacer pginas Web deban conocer las instrucciones HTML y escribirlas directamente en un archivo de texto. Sin embargo, en la actualidad existen editores de pginas Web, cuyo funcionamiento se asemeja al de los procesadores de palabras. Es decir, las personas que hoy desarrollan pginas Web, no requieren escribir directamente el cdigo HTML, pues el editor genera automticamente el cdigo correspondiente. En este momento, existen en el mercado muchos editores para pginas Web, inclusive algunos procesadores de palabras ya incluyen el formato html entre las opciones para guardar los documentos. Este manual describe el funcionamiento del editor Netscape Composer, el cual ha sido seleccionado debido, principalmente, a su simplicidad de uso y a que puede ser obtenido, gratuitamente, en la Web (http://www.netscape.com).
CAPTULO 2
CONTENIDO
2.1 Programas editores de pginas Web 2.2 Programas navegadores de la Web 2.3 Uso de editores de texto y hojas electrnicas para hacer pginas Web 2.4 El paquete Netscape como instrumento generador y visualizador de pginas Web 2.5 Funcionamiento general del Netscape Composer
2.3 Uso de editores de texto y hojas electrnicas para hacer pginas Web
Actualmente muchos programas, como procesadores de palabras, hojas electrnicas y programas para hacer presentaciones, como Microsoft Word, Microsoft Excel y Power Point, incorporan entre sus funciones la posibilidad de hacer enlaces entre pginas y guardar archivos en formato html. Tanto Word 97, Excel 97 como Power Point 97 incluyen la opcin Guardar como HTML ... o Save as HTML ... dentro del men Archivo o File. Por ejemplo, usando Word 97, usted puede escribir el texto de sus pginas, incorporar tablas y enlaces a otras pginas y luego guardar el archivo con formato html. Aunque estos programas no son especializados para crear pginas Web, son tiles para este propsito, principalmente cuando la informacin que queremos publicar en la Web ya est escrita con alguno de estos instrumentos. De esta manera, se puede, simplemente, guardar el archivo ya existente en formato html y no tener que volver a digitar la informacin.
Note en la figura que la ventana del Composer contiene: Una barra de men principal con las opciones File, Edit, View,
Insert, Fromat, Tools, Communicator y Help.
Algunos de estos menes (como File) presentan opciones estndar en la mayora de los programas. Una barra de composin, de acceso rpido, la cual contiene comandos predefinidos que tambin aparecen en los menes. Una barra de formato, de acceso rpido, para definir aspectos relacionados con la apariencia del texto. A lo largo de este manual se irn utilizando y explicando cada una de las opciones para su mejor comprensin.
CAPTULO 3
CONTENIDO
3.1 Escribiendo texto 3.2 Guardando la pgina 3.3 Viendo la pgina con el navegador
Ahora debe guardarla en el disco para luego poder verla desde el navegador (Navigator).
b) Escriba en el espacio File name: el nombre con que almacenar la pgina en el disco (por ejemplo: primera). Note que en el campo Save in: aparece el directorio en el cual quedar grabado el documento. Los iconos que aparecen en la parte superior derecha son estndares en Windows para cambiar de directorio, crear una nueva carpeta, etc. Note adems que el documento debe quedar almacenado con tipo HTML Files.
c) Aparecer luego una ventana en la cual debe ingresar el ttulo con que se desplegar la pgina en Internet, por ejemplo: Mi Primera Pgina, como se muestra a continuacin:
d) En este punto su pgina ya estar almacenada. En la prxima seccin veremos cmo acceder a su pgina desde el navegador.
En la seccin anterior usted cre y guard su primera pgina, ahora activaremos el Netscape Navigator para que pueda visualizar la pgina desde el navegador. Desde el Netscape Composer, el navegador se puede activar de varias maneras: a) Accionando la opcin Navigator del men Communicator, o b) Seleccionando el botn Preview de la barra de composicin, o c) Activndolo desde Windows, accionando los menes: Start, Programs, Netscape Communicator y finalmente Netscape Navigator.
Este paso se realiza si usted no se sabe de memoria la ubicacin del documento. a) Seleccione del men File la opcin Open Page, con lo cual se desplegar una ventana para buscar la ubicacin del hiperdocumento, como se muestra a continuacin:
b) Seleccione la opcin Choose File para buscar el archivo que desea desplegar. Aparecer entonces la ventana que se muestra en la figura 3.5. Puede ahora utilizar los botones de Windows para ubicar el hiperdocumento. As, de acuerdo con el paso 4 de la seccin anterior, nuestra pgina, con nombre primera, haba quedado almacenada en el directorio EjemplosHTML del disco C: (es decir, con ruta c:\ EjemplosHTML\primera.html).
Figura 3.5 Ventana para abrir una pgina
Presione la opcin Open de la ventana para indicarle al navegador la ubicacin de la pgina. c) Aparecer nuevamente la ventana del punto a), pero ahora con la localizacin del hiperdocumento, de la siguiente manera:
d) Ahora puede presionar el botn Open, con lo cual su pgina ser finalmente desplegada en el navegador como se muestra en la figura 3.7. Observe que la direccin tiene el prefijo file:///, lo cual indica que la pgina proviene de un archivo. Si la pgina estuviera en un servidor disponible en Internet, el prefijo sera http://. Una vez con la pgina desplegada, usted puede regresar al Netscape Composer desde el men Communicator del navegador. La pgina anterior es muy sencilla, en las siguientes secciones veremos cmo insertar, en una pgina Web, diferentes estilos de texto, agregar grficos, enlaces, tablas, etc.
CAPTULO 4
Edicin de texto
CONTENIDO
4.1 La primera pgina 4.2 Cmo alinear el texto? 4.3 Cmo cambiar el tipo de letra? 4.4 Cmo cambiar el tamao de la letra? 4.5 Cmo cambiar el estilo de la letra? 4.6 Cmo cambiar el color de la letra? 4.7 Cmo agregar vietas y listas numeradas? 4.8 Cmo cambiar el estilo de las vietas y de la numeracin? 4.9 Cmo establecer ttulos y encabezados?
PISTA
Una forma rpida de alinear el texto es usando la barra de formato, as: a) Seleccione el texto que desea alinear b) Escoja el tipo de alineamiento seleccionando primero el icono de ms a la derecha de la barra de formato, como se muestra en la siguiente figura, y luego seleccionando el icono correspondiente a la alineacin a la izquierda, al centro o a la derecha:
Alineamiento
PISTA
Usando la barra de formato a) Seleccione el texto al cual desea modificar el tipo de letra b) Seleccione de la barra de formato que se muestra a continuacin, la opcin del tipo de letra. Aparecer entonces una lista de letras, de la cual puede seleccionar la que desee.
Tipo de letra
PISTA
a) Seleccione el texto al cual desea modificar el tamao de letra b) Seleccione de la barra de formato, que se muestra a continuacin, la opcin del tamao de letra. Aparecer entonces una lista de tamaos, de la cual puede seleccionar el que desee.
Tamao de letra
Letra negrita Letra cursiva Subrayado Tachado Superndice Subndice Letra intermitente Sin fin de lnea, el rengln es de tamao infinito
PISTA
La barra de formato se puede utilizar para cambiar rpidamente el estilo de un texto, si el estilo deseado es negrita, cursiva o subrayado, tal como se ilustran las opciones de la siguiente figura:
Negrita
Cursiva
Subrayada
PISTA
Use la barra de formato que se muestra a continuacin para cambiar el color de la letra:
Color de la letra
e) Una vez seleccionada la opcin, aparecer la primera vieta o el primer nmero. Luego, conforme usted termine el prrafo y presione la tecla de entrada (<Enter>), el Composer ir colocando las siguientes vietas automticamente.
Note que las posibles opciones son las siguientes: None Elimina las vietas y/o la numeracin Bulleted Coloca vietas (q) Numbered Coloca nmeros Description Separa la lista con una marca de prrafo, pero no coloca una vieta visible Directory Coloca vietas (q) Menu Coloca vietas (q) Para cambiar el tipo de vieta o nmero refirase a la seccin siguiente.
PISTA
a) Se puede poner numeracin y vietas al texto ya existente o iniciar un prrafo con nueva numeracin y/o vietas. Si el texto ya est escrito simplemente debe seleccionarlo y luego presionar la opcin de vietas o de numeracin de la barra de formato. b) Tambin puede seleccionar primero la opcin de numeracin o la de vietas de la barra de formato, con lo cual Netscape Composer coloca la primera vieta o el primer nmero, y luego al terminar la lnea y presionar la tecla de entrada (<Enter>), aparecer automticamente la siguiente vieta o nmero.
Vietas
Numeracin
PISTA
a) Utilice la barra de formato para cambiar el estilo de encabezado (ver figura 4.11). Si el texto ya est escrito, seleccinelo, luego seleccione la opcin de estilo de la barra y el tipo de encabezado que aparece en la lista (Heading 1 es el ttulo mayor y Heading 6 es el ttulo menor). b) Si prefiere indicar el tipo de encabezado antes de escribir el texto, seleccione directamente la opcin de estilo de la barra de formato. El cursor cambiar de tamao de acuerdo con el tipo de encabezado seleccionado y usted podr empezar a escribir el texto.
Figura 4.11 Seleccin de encabezado desde la barra de formato
CAPTULO 5
CONTENIDO
5.1 Insertando lneas de divisin 5.2 Insertando una imagen 5.3 Algunas opciones del Netscape Composer al incorporar imgenes en pginas Web
5.3.1 Modificacin de la imagen 5.3.2 Colocar la imagen como fondo 5.3.3 Alineamiento de las imgenes con respecto al texto 5.3.4 Cambio del tamao de la imagen 5.3.5 Hacer un marco alrededor de la imagen 5.3.6 Despliegue de imgenes
Alineamiento de la imagen con respecto al texto Coloca la imagen como fondo Dimensin de la imgaen Espacio alrededor de la imagen
Se pueden usar imgenes que vengan con Windows o con algn programa de dibujo instalado en su computadora, Tambin se pueden bajar imgenes de Internet. Algunas palabras comunes para buscar, en Yahoo (http://www.yahoo.com) o Altavista (http://www.altavista.com) sitios que contengan imgenes son: clipart, bitmaps, graphics, background, icons y art. Se pueden tambin utilizar fotografas o cualquier tipo de imagen que se pueda digitalizar.
5.3 Algunas opciones del Netscape Composer al incorporar imgenes en pginas Web.
5.3.1 Modificacin de la imagen:
Si desea realizar algn cambio a la imagen, puede hacerlo seleccionando la opcin Edit Image.
5.3.2 Colocar la imagen como fondo:
Si usted desea que la imagen aparezca como el fondo de la pgina, entonces marque el botn correspondiente a Use as background.
5.3.3 Alineamiento de las imgenes con respecto al texto: Los botones que aparecen en el rea denominada Text aligment and wrapping around images tienen el propsito de ubicar la imagen
con respecto al texto que est a su alrededor. La imagen puede ser colocada a la izquierda de la pgina y el texto a su derecha, en la parte superior, en el medio o en la parte inferior. Tambin la imagen puede ser colocada a la izquierda o a la derecha, con texto alrededor.
5.3.4 Cambio del tamao de la imagen:
Usted puede cambiar el tamao de la imagen cambiando los valores de la altura (Height) y el ancho (Width) de la imagen que aparecen en el rea denominada Dimensions de la figura 5.3. Para reestablecer el tamao original simplemente presione el botn denominado Original Size. La opcin Constrain provoca que el cambio de tamao se lleve a cabo en forma proporcionada.
5.3.5 Hacer un marco alrededor de la imagen: En el rea denominada Space around image se establece un marco
texto. Si se desea que el marco se vea, entonces se indica una cantidad de pixeles diferente de cero en el rea denominada Solid border.
5.3.6 Despliegue de imgenes
Las imgenes muy grandes requieren mucho tiempo para ser cargadas. Netscape Composer incluye la opcin Alt. Text / LowRes...para que aparezca algn texto mientras la imagen es cargada o aparezca una imagen de menor resolucin (calidad) mientras la imagen definitiva es cargada. La ventana que aparece al seleccionar esta opcin es la siguiente:
Figura 5.5 Propiedades de una imagen alterna
En el rea Alternate text usted puede escribir el texto que desea que aparezca mientras la imagen se est cargando. En el rea Low resolution image puede colocar la ubicacin y el nombre del archivo de baja resolucin que usted desea que aparezca mientras se carga la imagen definitiva; tambin puede seleccionar esa imagen de baja resolucin por medio de la opcin Choose File.... Esta facilidad sirve para agregar dinamismo en el momento del despliegue a pginas que contienen imgenes muy grandes, pues ayuda a disminuir el tiempo de espera cuando las pginas estn siendo transferidas.
CAPTULO 6
CONTENIDO
6.1 Qu es un enlace? 6.2 Cmo establecer un enlace? 6.3 Cmo eliminar un enlace? 6.4 Cmo establecer enlaces dentro de una misma pgina?
6.1 Qu es un enlace?
Un enlace es una relacin que se establece de una pgina fuente a otra destino. Al hacer click sobre el enlace de la pgina fuente, se activa la pgina destino. A los elementos de la pantalla que contienen los enlaces se les conoce como palabras calientes o imgenes calientes. Esta es una de las formas ms comunes de navegacin entre pginas de la Web. Para establecer un enlace se requieren al menos dos pginas Web. Como ejemplo utilizaremos la pgina Web que se desarroll a partir del captulo 4 de este manual para convocar a una conferencia internacional que vemos a continuacin. Suponga que vamos a enlazar esta pgina con una pgina en la
Figura 6.1 Pgina fuente para establecer un enlace
cual se explica el formato del documento para la presentacin de la ponencia. Para hacerlo breve, construya una pgina con la informacin que se muestra en la figura 6.2 y gurdela con el nombre conferencia2.html. Luego estableceremos el enlace desde la pgina de la figura 6.1 para que, cuando se haga click sobre la palabra formato que aparece en la seccin Presentacin de Ponencias, se active la pgina de la figura 6.2.
d) Escriba el nombre del archivo que contiene la pgina destino (la de la figura 6.1) o seleccinelo del disco duro con la opcin Choose File ... e) Presione el botn OK y ya estar establecido el enlace. f) Guarde la pgina. Para probar que el enlace funciona, abra la pgina fuente con Netscape Navigator y haga click sobre la palabra formato establecida como enlace. Deber activarse la pgina destino.
a) Abra la pgina donde fue establecido el enlace (por ejemplo, la pgina de la figura 6.1 que tiene un enlace en la palabra formato). b) Seleccione el texto establecido como enlace (la palabra formato). c) Seleccione la opcin Link del men Insert o seleccione el icono Link de la barra de composicin. Aparecer la ventana que se muesta en la figura 6.5. d) Presione el botn Remove Link y luego el botn OK para que el enlace quede eliminado. e) Guarde la pgina.
misma pgina?
Enlazar secciones dentro de una misma pgina es til para presentar la informacin de pginas muy grandes; por ejemplo, para hacer documentos en los que al inicio de la pgina aparece la tabla de contenido y, al hacer click sobre cada ttulo, el control se traslada a la seccin correspondiente. Un ejemplo de ello se muestra en la figura 6.6. En Netscape Composer las secciones se enlazan colocando marcas denominadas enlaces internos o anclas al inicio de las secciones a las que se quiere llegar (secciones destino). As, para el ejemplo de la pgina de la figura 6.6, se debern colocar tres anclas: una al inicio de la seccin Temas generales:, otra al inicio de la seccin Presentacin de Ponencias: y otra al inicio de la seccin Contactos:. Luego, se colocan los enlaces para navegar a cada una de esas secciones. Para este ejemplo se deben establecer tres enlaces: uno en el ttulo 1. Temas generales, otro en 2. Presentacin de Ponencias y el ltimo en 3. Contactos. Para agregar anclas y construir una pgina como la de la figura 6.6 haga lo siguiente: a) Abra la pgina conferencia1.html que ha estado desarrollando a lo largo de este manual. b) Coloque las anclas de la siguiente manera:
b.1) Coloque el cursor al inicio de la seccin Temas generales: b.2) Seleccione la opcin Target... del men Insert. Aparecer la ventana que se ve en la figura 6.7. b.3) En esta ventana debe digitar un nombre que identificar al ancla. Es recomendable escoger un nombre relacionado con los tpicos de la seccin que se est anclando. Coloque, por ejemplo, el nombre Temas y luego presione el botn OK. b.4) Aparecer un icono que identifica al ancla contiguo al ttulo Temas generales:, de la siguiente manera:
b.5) Para la seccin Presentacin de Ponencias coloque un ancla con nombre Presentacin y para la seccin Contactos coloque un ancla con su mismo nombre. Aparecern en cada caso los iconos que indican la presencia de un ancla. c) Agregue el siguiente texto para establecer los enlaces, tal y como se muestra en la figura 6.6:
Contenido de esta pgina
d) Establezca los enlaces de la siguiente manera: d.1) Seleccione el ttulo 1. Temas generales del rea de contenido de la pgina. d.2) Seleccione la opcin Link... del men Insert para establecer el enlace. Aparecer entonces la ventana que se ve en la figura 6.8. Note que muestra la lista de anclas que usted estableci en el
punto b). d.3) Seleccione el nombre del ancla Temas con lo cual se establecer un enlace entre el ttulo 1. Temas generales de la seccin de contenido con la seccin Temas generales:. El ttulo 1. Temas generales cambiar de color para indicar que es un enlace. d.4) Repita este mismo paso para establecer los enlaces de los ttulos 2. Presentacin de Ponencias y Contactos con sus respectivas secciones dentro de la pgina. e) Guarde la pgina y active el Netscape Navigator para probar las anclas de la pgina.
CAPTULO 7
Elaboracin de tablas
CONTENIDO
7.1 Qu es una tabla? 7.2 Cmo insertar una tabla con Netscape Composer? 7.3 Cmo agregar una fila, una columna o una sola celda? 7.4 Cmo borrar una fila, una columna, una sola celda o la tabla completa? 7.5 Cmo cambiar la apariencia de una tabla?
PASOS
a) Agregue el ttulo Secciones de la Ponencia b) Seleccione la opcin Table... del men Insert de la siguiente manera:
Luego aparecer una ventana en la que se establecern las caractersticas de la tabla, tal y como se muestra a continuacin:
c) Seleccione la cantidad de filas (rows) y de columnas (columns) que requiere su tabla. Para nuestro ejemplo de la figura 7.2 se debe indicar 7 filas y 2 columnas. d) Observe en la ventana de la figura 7.4 que se pueden escoger propiedades de la tabla, tales como el alineamiento de la tabla dentro de la ventana, el espaciado entre celdas de la tabla, el color de fondo de la tabla o una imagen de fondo para la tabla. e) Seleccione el botn OK para que aparezca la tabla. Las columnas de la tabla tienen el mismo ancho, el cual se modifica automticamente conforme se inserta el texto en cada celda. f) Digite en cada celda el texto correspondiente para formar la tabla que aparece en la figura 7.2.
7.3 Cmo agregar una fila, una columna o una sola celda?
Para agregar una fila, una columna o una sola celda a una tabla ya existente, realice los siguientes pasos: a) Coloque el cursor dentro de la tabla, en el lugar donde usted desea insertar el elemento (fila, columna o celda). b) Seleccione del men Insert la opcin Table, tal y como se mostr anteriormente en la figura 7.3. Observe que este men presenta cuatro opciones:
Table: Row: Column: Cell:
para insertar una tabla para insertar toda una fila para insertar toda una columna para insertar una sola celda.
Seleccione entonces la opcin correspondiente dependiendo de lo que usted desee insertar (una fila, una columna o una celda). Note que al insertar una sola celda la tabla queda con una forma irregular; es decir, no necesariamente todas las filas de la tabla tienen la misma cantidad de columnas.
7.4 Cmo borrar una fila, una columna, una sola celda o la tabla completa?
Para eliminar una fila, una columna o una sola celda a una tabla ya existente, realice los siguientes pasos:
PASOS
a) Coloque el cursor dentro de la tabla, en el lugar donde usted desea eliminar el elemento (fila, columna o celda). b) Seleccione del men Edit la opcin Delete Table como se muestra en la figura 7.5. c) Este men presenta cuatro opciones: Table: para borrar una tabla Row: para borrar toda una fila Column: para borrar toda una columna Cell: para borrar una sola celda. Seleccione entonces la opcin correspondiente dependiendo de lo que usted desee eliminar (la tabla completa, una fila, una columna o una celda).
a) Coloque el cursor sobre la tabla. b) Seleccione la opcin Table Properties del men Format. Aparecer la siguiente ventana:
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).
En el caso de las propiedades de la tabla se puede: Cambiar el alineamiento (Table Alignment) a la izquierda (left), al centro (center) o a la derecha (right). Colocar un ttulo a la tabla (seleccionando Include caption). Cambiar el ancho del borde (Border line width). Cambiar el espaciado entre celdas (Cell spacing). Cambiar el espaciado dentro de las celdas (Cell padding). Modificar el ancho de la tabla con respecto al ancho de la pgina (Table width). Indicar una altura mnima para la tabla (Table min. Height). Indicar que todas las columnas deben mantenerse del mismo tamao (Equal column widths). Seleccionar un color para el fondo de la tabla. Para ello se marca la opcin Use color y se selecciona el color con el botn que aparece al lado de esta opcin. Colocar una imagen como fondo de la tabla. Para ello, a travs del botn Choose File se selecciona un archivo de imagen que contenga la imagen correspondiente.
CAPTULO 8
CONTENIDO
8.1 Visualizacin previa de la pgina 8.2 Imprimiendo la pgina
CAPTULO 9
CONTENIDO
9.1 Introduccin 9.2 Pasos para la planificacin y produccin de un sitio Web
9.2.1 Definir el objetivo del sitio 9.2.2 Identificar la o las diferentes audiencias o poblaciones meta 9.2.3 Definir el contenido y la estructura del sitio 9.2.4 Estilo grfico de presentacin 9.2.5 Construir las pginas y el sitio 9.2.6 Probar y evaluar el sitio 9.2.7 Registrar un dominio para ubicar el sitio 9.2.8 Instalar el sitio Web en el servidor 9.2.9 Medir el impacto del sitio 9.2.10 Actualizar continuamente el sitio
9.1 Introduccin
Ahora que ya sabe cmo crear y enlazar pginas Web es importante que tenga conocimiento del proceso necesario para planificar la produccin de pginas y sitios Web. Pueden existir diferentes propsitos para crear un sitio Web: difundir informacin, ofrecer productos o servicios, brindar asistencia tcnica, promover una organizacin, etc. En trminos generales, puede afirmarse que responde al propsito de publicar en la Web. Como toda publicacin, su elaboracin requiere de un proceso de planificacin y desarrollo. Para orientar este proceso se recomiendan algunos pasos importantes, varios de los cuales pueden llevarse a cabo en forma simultnea: 1. Definir el objetivo del sitio 2. Identificar la o las diferentes audiencias o poblaciones meta 3. Disear la estructura y organizar el contenido del sitio 4. Elegir un estilo grfico de presentacin 5. Construir las pginas 6. Registrar un dominio para ubicar el sitio 7. Instalar el sitio Web en el servidor 8. Medir el impacto del sitio 9. Actualizar continuamente el sitio Veamos en detalle cada una de estas actividades.
Contestar a la pregunta Para qu queremos desarrollar nuestro sitio? es el paso bsico para iniciar la planificacin de un sitio Web. Aqu se define la razn por la cual vamos a realizar este trabajo. Aunque pueda parecer obvio, es importante sealar que una buena explicitacin del objetivo general al que el sitio debe responder, ser la mejor gua para todos los pasos subsiguientes. Este primer paso es bsico para definir la identidad del sitio y, en consecuencia, todos los requisitos que ste debe contemplar. Dar pautas para definir tanto el contenido como la estructura y apariencia del sitio Web que deseamos construir. Lo que se presente en la pantalla y cmo se presente, depender de nuestro propsito y por ello es tan importante hacernos esta pregunta al iniciar el trabajo.
Como segundo paso, debemos identificar cules sern las diferentes poblaciones meta o audiencias, a las cuales nos queremos dirigir. El tipo de poblacin a la cual se desee llegar definir el contenido y el tipo de lenguaje a utilizar as como la forma de presentar los textos, la forma de organizacin de las pginas, los colores, el tipo y cantidad de grficos, etc. No es lo mismo hacer una publicacin en la Web cuando se espera que las personas visitantes sean profesionales en un rea especfica y con un conocimiento tcnico definido, que hacer una publicacin para una poblacin no determinada. Tampoco es lo mismo disear el sitio para personas adultas que para nios(as).
9.2.3 Definir el contenido y la estructura del sitio
a) El contenido general del sitio El contenido del sitio est ntimamente relacionado con los objetivos y la audiencia definidos en los pasos anteriores.
Los sitios con que se acompaa este captulo son meramente ilustrativos.
Como primer paso para definir el contenido, es importante recopilar toda la informacin existente que se desea incluir en el sitio y definir qu nueva informacin es necesario producir. Luego, se debe organizar dicha informacin en secciones, ya que sto ayudar a definir las diferentes pginas que el sitio contendr. Cada seccin podra ser una pgina en nuestro sitio Web. Adems de la informacin, tambin deben considerarse algunos servicios o funciones que el sitio puede ofrecer. Un sitio puede tener, por ejemplo, una funcin que permita realizar bsquedas por palabras clave, formularios para recibir
informacin de las personas usuarias, foros de discusin, y otros servicios por el estilo. Una vez definidos estos puntos, deben organizarse las secciones y servicios que el sitio contendr, as como el flujo interno de navegacin del sitio, o sea, la forma en que las secciones estarn enlazadas. Como producto de sto tendremos un diagrama de flujo que mostrar las diferentes pginas que debemos construir, as como los enlaces que deben existir entre dichas pginas, quedando as definida la estructura de navegacin del sitio. Una buena estructura puede ser un elemento vital para atraer a las personas lectoras una y otra vez. b) La estructura de navegacin La estructura de navegacin es la forma en que estn enlazadas las diferentes pginas o secciones del sitio. Las posibilidades de navegacin de las personas en el sitio dependen de los enlaces que existan entre sus pginas, y los enlaces se establecen con la intencin de que la navegacin sea apropiada para lograr los objetivos del sitio, que las personas visitantes encuentran fcilmente la informacin que buscan o se quiere mostrar. Al igual que sucede con todo proyecto, es muy importante hacer el esquema de la estructura de navegacin del sitio antes de empezar a construir las pginas. La importancia de un esquema de navegacin radica en lograr un diseo que permita entender fcilmente el sitio, navegar fluidamente en l y llegar a todas las pginas en forma gil. Se pueden mencionar dos tipos bsicos de estructuras: la jerrquica y la relacional, sin embargo tambin se pueden implementar esquemas de tipo mixto, dependiendo de la informacin que se desee presentar.
Estructura jerrquica Esta forma de organizacin es recomendable cuando la pgina se divide en temas o categoras y sub-categoras diferenciables. La figura 9.1 presenta un esquema que ilustra esta estructura de navegacin. En ella, la entrada al sitio Web es por la pgina denominada A, la cual tendra enlaces con las pginas B, C, D y E, a su vez, la pgina D tendra enlaces hacia las pginas F y G. As, el acceso a la pgina G se logra slo si la persona navega de la pgina A a la D y luego de la pgina D a la G.
A B C F
Figura 9.1 Estructura jerrquica
D G
Un caso en el cual podra ser recomendable utilizar una estructura jerrquica de navegacin es un libro en el que la pgina principal (A) contiene un ndice con ttulos que llevan a los diferentes captulos (B, C, D y E) y a su vez, cada captulo tiene secciones separadas. Estructura relacional Con esta estructura de navegacin cualquier pgina puede estar enlazada a cualquiera (ver figura 9.2).
Esta es la forma de organizacin ms comn en la Web pues permite gran flexibilidad de navegacin, al permitir que cualquier pgina pueda tener enlaces de hipertexto hacia otras pginas. Cualquiera que sea la estructura de navegacin que escoja, es recomendable que sta se muestre en alguna parte del sitio y que las personas usuarias tengan acceso a ella en todo momento, para evitar que se pierdan, y puedan ubicar fcilmente las pginas que desean visitar. Por ltimo, le aconsejamos considerar los aspectos que le gustan o disgustan de otros sitios web. Por ejemplo, si usted conoce un sitio que facilita la navegacin, puede tratar de analizar e identificar los aspectos que producen este efecto para utilizarlos en la construccin de su sitio.
9.2.4 Estilo grfico de presentacin
Emplee prrafos para dividir el texto en secciones ms cortas. Es ms fcil leer prrafos cortos en una pantalla. Use encabezados para enfatizar las ideas principales. Pero use los nfasis slo donde sean necesarios. Seleccione un tipo de letra (font) que sea visualmente atractivo y claro de leer. Letras demasiado pequeas o muy elaboradas pueden producir desinters en quien lee. No use demasiados tipos diferentes de letra. Utilice colores de texto que contrasten con el fondo; por ejemplo: texto amarillo sobre fondo negro, texto blanco sobre fondo azul, texto negro sobre fondo blanco. b) Los elementos grficos Los elementos grficos (ilustraciones, iconos y fondos) pueden dar una apariencia agradable a las pginas y servir para ayudar a transmitir una idea de manera concisa y agradable. Use figuras e iconos con colores compatibles con el fondo y el texto, para lograr un efecto visualmente agradable. Seleccione un estilo congruente de iconos para todo el sitio. Por ejemplo: todos los iconos con los bordes redondeados, o todos con las lneas delgadas, o con lneas rectas, etc. Use con moderacin los colores muy vistosos y encendidos, como el rojo, pues el ojo humano es muy sensible a ellos y podran convertirse en distractores. Use animaciones como instrumento esttico para resaltar alguna informacin o para hacer atractiva la pgina. Existen actualmente sitios donde se obtienen animaciones que se pueden incorporar a un hiperdocumento. Tambin algunos editores de pginas Web tienen instrucciones para animar texto e imgenes
Al igual que sucede con cualquier publicacin, al desarrollar un sitio Web, se pretende lograr un estilo de presentacin tal que resulte atractivo, funcional, fcil de leer, de recorrer y que apoye las ideas o conceptos que el sitio mismo pretende transmitir. A partir de estos objetivos se deriva el estilo de presentacin del sitio y para definirlo se deben considerar aspectos tales como: el estilo del texto, los elementos grficos y la incorporacin de sonido, animaciones y vdeo A continuacin se presenta un conjunto de recomendaciones con respecto a estos tres puntos. a) El estilo del texto El estilo de texto que se escoja debe ser suficientemente claro para que las personas usuarias puedan leerlo en la pantalla sin dificultad.
Hay sitios en la Web que tienen bibliotecas de dominio pblico de iconos, figuras y fondos que podemos utilizar. Usted podra encontrarlos a travs de sitios como Altavista o Yahoo. Algunas palabras clave para buscar estos elementos son: icon, graphics, backgrounds, buttons o clipart. Procure utilizar imgenes propias (tanto para ilustraciones como para conos) pues esto dar un aire original a la pgina. Para esto necesitar digitalizar imgenes con un scanner. c) El sonido, las animaciones y el vdeo La utilizacin de mltiples medios audiovisuales (o multimedios) para presentar informacin es cada vez ms comn. Los medios audiovisuales pueden ser de gran ayuda para poder expresar con claridad y eficacia una idea. Sin embargo, en Internet deben, an en la actualidad, ser utilizados con mesura pues las pginas que contienen este tipo de elementos podran ser demasiado pesadas y su transferencia a la computadora cliente podra ser muy lenta. Por lo tanto se recomienda lo siguiente: Los sonidos, las animaciones y los vdeos son recursos audiovisuales atrac-
tivos para llamar la atencin del usuario. Al igual que sucede con los grficos, deben ser utilizados con moderacin para no distraer ni cansar a las personas usuarias. Otras consideraciones a tener en cuenta a la hora de definir el estilo grfico de presentacin de un sitio son: Las personas que visitarn el sitio usan diferentes computadoras, con diferente velocidad, capacidad de memoria, etc. Si su pgina es muy pesada, por ejemplo, no todas las personas podrn bajarla rpidamente y podran aburrirse de esperar antes de que la pgina sea transferida. Las personas que visitarn su sitio usan diferentes navegadores. Si usted utiliza algn elemento que slo puede ser visualizado con la ltima versin del navegador, puede ser que muchas personas no puedan verlo pues estn usando versiones anteriores. Las personas que visitarn su sitio se conectan a Internet a diferentes velocidades. Las personas que navegan por la Web quieren, por lo general, encontrar lo que buscan rpidamente y, al ser la computadora un medio muy dinmico, dedican poco tiempo para inspeccionar las pginas. Mientras ms livianas sean sus pginas, ms accesibles sern.
9.2.5 Construir las pginas y el sitio
La construccin de las pginas se debe hacer en forma paulatina y con base en las consideraciones mencionadas anteriormente. Se puede llevar a cabo con un programa editor de pginas Web o directamente en HTML. Es en este punto donde se debe definir cmo se almacenarn fsicamente las pginas, los elementos grficos, el soni-
do, las animaciones y el vdeo en el servidor; es decir, cul ser la estructura de directorios y en cules directorios se almacenar cada componente. Usted debera hacer al menos un directorio en el cual guarde las pginas y los recursos audiovisuales (dibujos, iconos, sonidos, animaciones y vdeos). Para sitios muy grandes es preferible que usted haga un directorio para la pgina principal que contenga el archivo HTML con sus recursos audiovisuales y haga subdirectorios para cada una de las pginas asociadas a la pgina principal; cada subdirectorio almacenar el archivo de la pgina en html con sus respectivos recursos audiovisuales. La organizacin de las pginas en directorios y subdirectorios es muy importante para mantener el orden y facilitar la administracin y actualizacin del sitio.
9.2.6 Probar y evaluar el sitio
Dado que el sitio Web debe hacerse visible en la Internet, se debe buscar un proveedor de servicios Internet para colocar su sitio Web en lnea. Usted debe indagar si su organizacin tiene un servidor Web para este efecto. De lo contrario, existen algunos proveedores que ofrecen este servicio en forma remunerada, es decir, alquilan un espacio en un servidor Web para publicar su sitio. Tambin hay, en la actualidad, algunos servidores gratuitos en la Internet. En este punto usted requiere registrar el nombre del sitio o dominio donde quedar montado su sitio.
Siempre es recomendable probar que todas las pginas se vean como pretendemos y que todos los enlaces entre pginas funcionen. Las pruebas se deben hacer primero en el mbito local y luego en el servidor donde se ubicar el sitio. A nivel local en el disco duro de su computadora, usted almacenar las pginas en directorios y, utilizar un programa navegador (por ejemplo, Netscape Navigator o Internet Explorer) para observar cmo se vern las pginas en el sitio. En esta etapa se debe comprobar que: Los textos sean legibles. Las imgenes, los sonidos, las animaciones y el vdeo se desplieguen adecuadamente. Los enlaces entre las pginas funcionan conforme se haba diseado. No aparezca ningn mensaje de error.
La instalacin del sitio web se puede lograr de alguna de las tres maneras siguientes: a) con ayuda de la persona que administra el servidor web, b) transfiriendo el directorio con los archivos mediante el protocolo de comunicacin ftp, c) en forma guiada desde algn programa especialmente diseado para instalar sitios web. a) Instalacin con ayuda de la persona que administra el servidor Web Bajo este esquema las personas que disean el sitio simplemente entregan las pginas, organizadas en directorios, a la persona que administra el servidor Web y sta persona se encarga de colocar el sitio dentro del servidor. Esta es una alternativa, pero existen mecanismos mediante los cuales usted puede hacerlo directamente.
b) Instalacin transfiriendo el directorio con los archivos mediante el protocolo de comunicacin FTP. FTP (file transfer protocol) es un protocolo para la transferencia de archivos en Internet; es decir, es un mecanismo mediante el cual se pueden trasladar archivos de una computadora a otra. El protocolo FTP se utiliza entonces para montar su sitio en el servidor Web. Usted puede, desde el Netscape Navigator, montar el sitio con FTP. As, en la parte de localizacin de pginas, superior de la ventana de navegacin, donde usualmente se coloca la etiqueta http://..., se coloca lo siguiente:
[ftp://username@nombresitio.net]
Existen en Internet algunos proveedores de servicios web que prestan o alquilan espacios en su servidor y que tienen programas que guan a las personas en la instalacin de su sitio web. Un ejemplo es el servicio que ofrece Geocities (http://www.geocities.com).
9.2.9 Medir el impacto del sitio
Medimos el impacto de un sito porque queremos saber si el sitio tiene xito, si est siendo utilizado o cmo est siendo utilizado, y tambin para conocer mejor a su poblacin usuaria. La medicin del impacto del sitio se logra, principalmente, a travs de estadsticas de acceso, tales como: conteo de la cantidad de personas que acceden a nuestro sitio, cantidad de personas que han visitado cada seccin del sitio, bsquedas realizadas por las personas usuarias, dominio de procedencia de las personas usuarias, bsqueda que hicieron para encontrar nuestro sitio, secciones especiales para que los(as) usuarios(as) suministren datos que nos proporcionen informacin valiosa, etc. Consulte a su proveedor de servicios sobre las estadsticas que ofrece. La informacin derivada de la evaluacin del sitio nos permitir vislumbrar la necesidad de nuevos servicios o informacin dentro del propio sitio. Esta actividad es la que nos permite saber si el sitio que creamos est cumpliendo con los objetivos que nos trazamos y definir la necesidad de modificarlo o actualizarlo para que no pierda su vigencia. Debemos idear mecanismos que nos permitan conocer los beneficios derivados del sitio Web, los cuales podrn ser contrastados con los costos de su desarrollo, operacin y mantenimiento.
donde:
username: representa al login o identificacin del servidor, y nombresitio: es el nombre o domino donde quedar montado su sitio Web.
Netscape Navigator tambin incluye la opcin Upload File... en el men File, con la cual se puede transferir el sitio a un servidor web. c) Instalacin en forma guiada desde algn programa especialmente diseado para instalar sitios web.
tualizacin.
9.2.10 Actualizar continuamente el sitio
Todo sitio necesita ser actualizado y ofrecer siempre informacin de inters para que las personas lo sigan visitando. Sin embargo, en un momento determinado, un sitio Web puede requerir actualizacin por diversas razones especficas, por ejemplo: Los resultados obtenidos al medir el impacto del sitio muestran que nuestro objetivo no se est cumpliendo. Nuestros objetivos cambiaron. El diseo qued obsoleto. La Web se caracteriza por ser un medio de comunicacin cuya informacin es constantemente actualizada y por lo tanto nuestro sitio debera responder a esa caracterstica. Deseamos tener clientes frecuentes que visiten el sitio y por lo tanto es fundamental ofrecerles informacin y elementos nuevos peridicamente. Cualquiera que sea nuestra razn, para lograr el xito del sitio es recomendable evaluarlo cada cierto tiempo y realizar los cambios necesarios para su mejoramiento. Si, al construir el sitio, se ha organizado la informacin en directorios y subdirectorios, segn las secciones que el sitio tenga, ser ms fcil su ac-
EVALUACIN
Instructores/as:
En la siguiente tabla indique cules secciones se desarrollaron con una metodologa guiada y cules con una de auto-estudio y experimentacin. Marque la casilla correspondiente con una X.
ITEMS
Introduccin al curso de elaboracin de pginas Web con Netscape Composer 1. Introduccin a la construccin de sitios Web
1.1 Qu es la World Wide Web? 1.2 El modelo Cliente/Servidor 1.3 Pginas Web 1.4 El Lenguaje HTML 1.5 Sitios Web 1.6 El URL (Uniform Resource Locator o Localizador Uniforme de Recursos)
2.1 Programas editores de pginas Web 2.2 Programas navegadores de la Web 2.3 Uso de editores de texto y hojas electrnicas 2.4 El paquete Netscape como instrumento generador y visualizador de pginas Web 2.5 Funcionamiento general de Netscape Composer
3.1 Escribiendo texto 3.2 Guardando la pgina 3.3 Viendo la pgina con el navegador
4.1 La primera pgina 4.2 Cmo alinear el texto? 4.3 Cmo cambiar el tipo de letra? 4.4 Cmo cambiar el tamao de letra? 4.5 Cmo cambiar el estilo de letra? 4.6 Cmo cambiar el color de letra? 4.7 Cmo agregar vietas y listas numeradas? 4.8 Cmo cambiar el estilo de las vietas y de la numeracin? 4.9 Cmo establecer ttulos y encabezados?
5. Inclusin de elementos grficos
5.1 Insertando lneas de divisin 5.2 Insertando una imagen 5.3 Algunas opciones del Netscape Composer al incorporar imgenes en pginas Web
6. Creacin de enlaces para la navegacin
6.1 Qu es un enlace? 6.2 Cmo establecer un enlace? 6.3 Cmo eliminar un enlace? 6.4 Cmo establecer enlaces dentro de una misma pgina?
7. Elaboracin de tablas
7.1 Qu es una tabla? 7.2 Cmo insertar una tabla con Netscape Composer? 7.3 Cmo agregar una fila, una columna o una sola celda? 7.4 Cmo borrar una fila, una columna, una sola celda o la tabla completa? 7.5 Cmo cambiar la apariencia de una tabla?
8. Impresin con Netscape Composer
Por favor indique a continuacin su nivel de acuerdo con las siguientes oraciones colocando el nmero escogido al final de la frase.
Escala: 1 Estoy en desacuerdo completamente; 2 Estoy en desacuerdo; 3 Neutral; 4 Estoy de acuerdo; 5 Estoy completamente de acuerdo.
11. Los ejercicios fueron de ayuda para entender mejor los temas 12. Las observaciones para las personas participantes fueron de ayuda 13. El diseo grfico del manual lo hizo fcil de leer 14. Las palabras usadas en el manual fueron fciles de entender 15. Las explicaciones en el manual fueron fciles de entender 16. El manual tiene el tamao adecuado 17. Los grficos del manual fueron fciles de leer 18. Los materiales del curso me ayudaron a usar el Netscape Composer 19. El entrenamiento fue como yo lo esperaba 20. Temas que deberan ser agregados: