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&aacute;gina</TITLE> </HEAD> <BODY> <p> <CENTER><FONT SIZE=+1>Esta es mi primera p&aacute;gina !</FONT> </CENTER> <DIV ALIGN=right>Vilma Picapiedra.</DIV> </BODY> </HTML> ◗ 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. ◗ &aacute; 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