Práctica 8ª: Concluir la construcción del sitio web

Transcripción

1 Práctica 8ª: Concluir la construcción del sitio web Con todos los conocimientos adquiridos vamos a completar nuestro sitio web. Para ello vamos a ir página a página hasta completar el contenido de cada una de ellas. Hasta ahora tenemos un fondo creado un encabezamiento y una imagen común (a excepción del archivo inicial index.htm. Vamos a comenzar precisamente a trabajar con esta página. 1ª Parte: Introducir una imagen, mapearla y crear hipervínculos a) Abrimos Front Page, seleccionamos en el menú Archivo la opción Abrir web y pulsamos sobre nuestra práctica. b) Pulsamos en el panel Vistas sobre Pagina para que se muestre el panel de Lista de carpeta, hacemos clic sobre la el archivo index.htm y tendremos la página lista trabajar en ella (imagen derecha) c) Insertamos la imagen enlaces3.gif que se encuentra en la subcarpeta imágenes de la carpeta de prácticas, mediante la secuencia menú Insertar/Imagen/Imagen de archivo. d) Movemos la imagen hasta la zona de la página indicada utilizándole cursor. e) Si no pudiera ser posible la colocación exacta de la imagen, deberemos introducir código html para generar una capa donde introduciremos la imagen. Esta opción, que no soporta directamente Front Page, es muy útil para colocar objeto en una zona precisa de la página. Para lograrlo realizaremos las siguientes acciones: a. Hacer clic sobre la imagen b. Pulsar sobre la pestaña HTML (cuadro verde) para mostrar el código

2 html que ha generado FrontPage para esta página (imagen inferior de la siguiente página. c. En la parte superior del texto que se encuentra en azul escribir el siguiente código html (mucha precaución, hay que escribirlo tal como aparece) <!-- CREAMOS UNA CAPA PARA ALOJAR LA IMAGEN DE ENLACES --> <DIV style="position:absolute;top:75;left:350;width:100;border:0"> d. En la parte inferior del texto que se encuentra en azul escribir el siguiente código html: </DIV> e. De esta forma el código introducido debe quedar tal como se muestra en la siguiente imagen. Si todos es correcto, pulsar sobre la pestaña Nomal.

3 f. El resultado final debe asemejarse a lo que muestra la siguiente imagen. Si no es así deberemos ajustar los valores de los parámetros top, left y width

4 Ahora estamos en disposición de mapear esta imagen y hacer que cada una de las bolas que aparecen sea un enlace a otra página web de nuestro sitio. Para lo cuál actuaremos de la siguiente forma: a) Para ello hacemos clic sobre la imagen para que aparezca el menú de imágenes. Seleccionamos la herramienta zona activa circular y manteniendo el botón izquierdo del ratón pulsado en la parte superior izquierda de la primera bola marcamos, tal como aparece en la imagen inferior un círculo en torno a la bola. b) Hacemos clic con el botón derecho del ratón dentro del círculo y del panel que se abre seleccionamos la opción hipervínculo. Con ello se abrirá el cuadro de diálogo Insertar hipervínculo. Pulsamos sobre el botón Info de pantalla con lo que se abrirá otro cuadro de diálogo llamado Establecer información de pantalla para h, en su cuadro de texto escribimos Quiénes somos (esto es el texto que le aparecerá al usuario cuando coloque el puntero del ratón encima de la bola). c) En el cuadro de texto Dirección: escribimos el nombre de la página a la que queremos enlazar, en este caso quienes.htm, con ello el enlace estará terminado

5 d) Procedemos del mismo modo con las cinco bolas restantes teniendo en cuenta que en la casilla correspondiente hay que escribir: Bola Texto de la etiqueta Enlace al archivo 2ª Documentos sobre el Magreb docu.htm 3ª Galería de imágenes imágenes.htm 4ª Servicios que presta la organización servicios.htm 5ª Formularios formularios.htm 6ª Enlaces de interés enlaces.htm e) Ahora solo falta colocar una melodía tal como se ha explicado en el apartado 16.2 de este dossier. f) Pulsar sobre el botón Guardar para conservar lo cambios que hemos efectuado Antes e pasar a completar el resto de página podemos ver el resultado de este trabajo pulsando sobre el botón de la barra de herramientas Vista previa en el navegador. 2ª Parte: Completar la página docu.htm incluyendo un video y enlaces a textos a) Copiar la carpeta documentos dentro de la carpeta web practicaweb b) Copiar la carpeta video dentro de la carpeta web practicaweb c) Seleccionar la pagina docu.htm en la ventana de edición d) Colocar el cursos en el centro, debajo de subtitulo e insertar el video Magreb.wmv que acabamos de colocar dentro de la carpeta principal del sitio web dentro de la subcarpeta video, de la forma que se explica en el apartado 16.2

6 e) Crear los hiperenlaces con texto de estilo Arial Marrow que aparecen en la imagen inferior y enlazarlos a los correspondientes archivos.doc y.pdf, que se encuentran en la subcarpeta documentos dentro de la carpeta del sitio web. f) Añadir previo a cada enlace la imagen bandera.gif, que se encuentra en la subcarpeta imágenes. Esta debe estar centrada respecto al texto (ver página 16). g) Guardar el archivo y visualizarlo en Vista previa en el navegador para comprobar que funcionan todos los enlaces y se visualiza el vídeo. (Página docu.htm una vez terminada) 3ª Parte: Completar la página quienes.htm Esta página describe como se define la organización. Tiene un pequeño texto con dos enlaces dentro del mismo (en blanco) y además, hemos incluido un encabezamiento con WordArt. El resultado final se muestra a la derecha y para completar procederemos del siguiente modo: a) Seleccionar la pagina quienes.htm en la ventana de edición. b) Colocar el puntero del

7 ratón de bajo del subtitulo, pulsamos sobe el botón para Mostar en la parte inferior de FrontPage la barra de dibujo y pulsar sobre el botón de de la herramienta WordArt c) Seleccionamos la opción acero (ver imagen) y escribimos el texto: Quienes Somos. A continuación pulsamos el botón Acepar y ajustamos el tamaño del texto al del modelo. d) Escribir el texto que aparee en la imagen modelo e) Seleccionar el texto que aparece en blanco y subrayado para introducir los enlaces a. El texto Campamentos de Refugiados Saharauis en Tinduf lo vinculamos pulsando sobre el botón hipervínculo a la página escribiéndolo en la casilla Dirección: del cuadro de diálogo b. Por su parte, el texto formularios lo vinculamos, de igual, forma a la pagina formulario.htm. f) Guardar el archivo y visualizarlo en Vista previa en el navegador para comprobar que funcionan todos los enlaces y se visualiza correctamente. 4ª Parte: Completar la página enlaces.htm, formulario.htm e imagenes.htm Esta parte es muy sencilla. Consiste, tal como hemos hecho el apartado b) del la 3ª parte de colocar un rótulo a cada una de esta páginas, tal como aparecen en los modelos que mostramos a continuación. 5ª Parte: Completar la página sercicios.htm Esta página es muy similar a docu.htm. Tiene algunos enlaces y texto. Además hemos añadido texto WordArt y una imagen gif animada explicando que la página todavía no está terminada. El modelo a seguir se muestra a continuación.

8 a) Seleccionar la pagina servicios.htm en la ventana de edición b) Colocar el cursos en el centro, debajo de subtitulo e insertar el texto de WorArt que aparece en el modelo c) Crear los hiperenlaces con texto de estilo Arial Marrow: Proyecto de integración escolar; NOTICIAS 1 y NOTICIAS 2 y enlazarlos respectivamente a los archivos Proyecto de integración escolar.pdf; Noticias Inmigración.pdf y Testimonios de inmigrantes en Marruecos.pdf que se encuentran en la subcarpeta documentos dentro de la carpeta del sitio web. d) Añadir previo a cada enlace la imagen bandera.gif, que se encuentra en la subcarpeta imágenes. Esta debe estar centrada respecto al texto (ver página 16). e) Inserta a continuación y centrada la imagen enobras.gif que se encuentra en la carpeta de imágenes. Modificar su tamaño hasta hacerla como la del modelo f) Escribir a continuación de la imagen, con tamaño de 1pto, el texto que aparece en el modelo: Todavía estamos trabajando en esta página. Disculpar las molestias g) Guardar el archivo y visualizarlo en Vista previa en el navegador para comprobar que funcionan todos los enlaces y se visualiza el vídeo. Con este trabajo nuestro sitio web está completo y listo para subirlo al espacio web que los alumnos de la Universidad de Valencia tienen en el servidor mural.uv.es, es los que FrontPage denomina publicar en la web

9 17. Publicar en la Red Frontpage tiene su forma propia de publicar una web en Internet con el icono. Pero esto sólo vale para servidores con los que se han contratado extensiones de Frontpage Publicar en el servidor mural.uv.es. Para subir nuestra web a este servidor procederemos de la siguiente forma: a) Abrir nuestro navegador de Internet (Explorer, Netscape, Moziilla, Opera, etc.) y escribir la dirección ftp://disco.uv.es. b) En la ventana de acceso escribir el nombre de usuario de tu correo y a contraseña correspondiente c) En la ventana del navegador hacer doble clic sobre la carpeta www. d) Abrir, desde la ubicación donde se encuentre, la carpeta del sitio web practicaweb. e) Redimensionar las dos ventanas para que se posible visualizarlas ambas en el escritorio de Windows. f) Seleccionar todos los archivos de la carpeta practicaweb y arrastrarlos dentro de la carpeta www en la ventana del navegador g) Esperar a que se transfieran todos los archivos h) Escribir en el cuadro de Dirección del navegador vuestra URL, formada por: nombre del usuario de correo.uv.es. Si todos los pasos se han realizado correctamente la web debe visualizarse en el navegador. En este momento está accesible desde cualquier ordenador conectado a la ed Internet Publicar en otro servidor ajeno a la Universidad La mejor forma de publicar sin contratar estas extensiones, que cuestan dinero, es a través de FTP, que son las iniciales en ingles de protocolo de transferencia de ficheros. Para ello lo primero que hay que hacer es contratar un espacio gratis en cualquiera de los servicios que se ofrecen ahora mismo: Terra, Inicia, Alehop, etc. Estos contratos que se hacen a través un formulario sencillo, nos dan una cuenta de correo y un espacio gratis en la Red.

10 Una vez contratado el espacio tenemos que buscar un programa de FTP que también sea gratuito y bajárnoslo de Internet. El más utilizado se llama WS_ FTP. Lo podemos encontrar en diferentes sitios, por ejemplo, en En esa dirección buscamos ws_ftp y en los resultados seleccionamos WS_FTP LE (32- bit) que es el gratuito. Nos bajamos el programa a nuestro disco duro o a un disquete y después lo instalamos. Cuando abrimos el programa nos aparece la siguiente pantalla: Lo primero que hay que hacer es crear nuestra cuenta con los datos que nos ha dado el servidor. Para ello hay que tener clara la dirección a donde debemos dirigirnos (Host Name/Address), el nombre de usuario (user ID) y la contraseña (password). Si los datos son correctos, en unos instantes se nos abre la siguiente ventana con un contenido similar, no exacto:

11 El marco de la izquierda muestra el contenido de la carpeta activa de nuestro ordenador y el de la derecha el espacio que nos dejan en el ordenador conectado a Internet. En el cuadro de la izquierda abrimos la carpeta donde está nuestra web y seleccionamos todos los archivos que componen nuestro sitio web y con la flechita que marca hacia la izquierda los pasamos al cuadro de la derecha, es decir, al servidor web. Por el sistema de FTP sólo hace falta pasar la carpeta de imágenes y los archivos de texto. El resto sirven si se está utilizando navegación automática y para que funciones con extensiones de Frontpage. Hay que mantener en el servidor el mismo esquema de carpetas y archivos que tenemos en nuestro ordenador. Si, por ejemplo, las imágenes están dentro de una carpeta llamada imágenes, en el servidor habrá que colocarlas en una carpeta con el mismo nombre. Si no respetamos el mismo esquema no funcionará bien la página porque el código html remitirá a una carpeta o archivo que si no se llaman igual y están en el mismo nivel del posible árbol de carpetas y subcarpetas nos dará error. Una vez que el programa nos diga que se han pasado correctamente los archivos de nuestro ordenador al servidor, ya se pueden ver nuestra web en Internet. Tengamos en cuenta que, cada vez que hagamos algún cambio en una página habrá que subir la página completa. Es importante recordar que las imágenes, videos y archivos de audio son independientes del documento de texto html y que, en consecuencia, habrá que subirlos de forma independiente Cómo bajarse una web de la Red utilizando el ftp de Frontpage. Cuando estamos utilizando mucho una página en Internet, resulta que cada vez que queramos consultarla tenemos que conectarnos a Internet con el consiguiente gasto que puede suponer. En muchas ocasiones podemos necesitar bajarnos una página completa porque la queremos consultar con frecuencia, seguir modelos que nos interesan o por el motivo que sea. Por ejemplo, podemos bajar esta misma web de nuestro ordenador y consultarla sin tener que conectarnos. Para subir la web tenemos que conectarnos a Internet, abrir Frontpage e ir al

12 Menú Archivo/Nuevo/Pagina o web y elegimos Plantillas web (En la versión 2000, la secuencia sería: Archvo/Nuevo/Web/Sitio web/asistente para). Se nos abrirá la siguiente ventana donde seleccionaremos el asistente para importar al web. Luego, en el cuadro de texto de la derecha en el que nos pide que se especifique la ubicación del nuevo Web tenemos que escribir una dirección donde queremos guardar esta web. En el ejemplo se guardaría en C:\ Mis documentos\ apuntes. Esto nos creará una carpeta nueva dentro de Mis documentos o en la ubicación que le demos con el nombre de "apuntes. Por último aceptamos, con lo que se nos abrirá la ventana que mostramos a la derecha. Dejamos la opción que nos propone Desde un sitio del World Wide Web y en Ubicación: escribimos la dirección de la página que, por ejemplo, sería: Pulsamos sobre el botón Siguiente y aparece la ventana de la derecha: Podemos seleccionar: si queremos limitar el tiempo de descarga o desactivar las opciones que nos propone el cuadro. En nuestro caso podemos desactivar todas las opciones porque queremos bajar la página completa que puede ocupar unos 750 Kb. Los niveles por debajo se refiere a las diferentes carpetas por niveles que tenemos dependiendo de la carpeta principal. En el ejemplo serían 5 niveles. Si queremos bajar una web completa desactivamos todo, pero el problema que tiene esta decisión es que hay webs muy complejas y grandes que nos puede llevar mucho tiempo bajarlas a nuestro ordenador. Normalmente son webs de empresas o corporativas con muchos contenidos, construidas profesionalmente, pero es raro en las webs de tipo personal. Por eso cuando desconocemos lo que ocupa una web conviene ponerle unos límites. Así cuando llega al límite de Kb ya no baja más información, pero normalmente tenemos el archivo index.htm y muchas de las páginas que nos interesan. Recomendamos no poner más de 5000 Kb para páginas que nos interesan mucho.

13 Configurado este cuadro de diálogo, pulsamos sobre el botón Siguiente, con lo que se nos mostrará la ventana de finalizar: Pulsamos sobre el botón Finalizar y esperamos que se descargue la página. Una vez que se termine el proceso podemos utilizar las páginas descargadas desde Frontpage, en vista previa, pulsando el botón de vista previa en el explorador o abriendo el archivo de index.htm desde el navegador. Debemos hacer notar que este proceso solo funciona con páginas html, pero no con las asp o php.