Proyecto con documentos Word y PDF

El primer objetivo es aprovechar documentos Word y PDF para crear una sencilla página Web basada en ellos.

Crear el sitio y la carpeta del proyecto

1. Cree un sitio. Para ello haga clic en Sitio > Nuevo sitio. En la ventana de diálogo Definición del sitio ponga el nombre Documentos (ya sabe que el nombre es arbitrario).
2. Cada proyecto se debe almacenar en una carpeta en su ordenador. A esta carpeta se le conoce como la carpeta raíz local del proyecto. Haga clic en el botón Buscar Carpeta raíz local . Seleccione su disco de datos. Es costumbre tener una carpeta que contenga todos los proyectos. Seleccione la carpeta con sus sitios Web. Si no tiene ninguna, cree una carpeta (utilice el botón Crear carpeta ) y llámele, por ejemplo Sitios Web. Abra esta carpeta de sus sitios Web. Ahora tiene que crear una carpeta para el proyecto. Créela utilizando el botón Crear carpeta y llámele Documentos.

3. Con el nombre del proyecto y la carpeta asignada, tiene definido localmente el proyecto. Haga clic en Aceptar y verá la carpeta del proyecto en color verdeen el panel Archivos. Por lo tanto no olvide que las carpetas de Windows que Dreamweaver reconoce como proyectos, son de color verde.
4. Todo lo que contenga el proyecto se colocará finalmente en un servidor remoto para ponerlo a disposición pública. Los servidores suelen rechazar determinados símbolos utilizados en el nombre de archivos y carpetas. Para evitar problemas con los nombres de las carpetas y archivos procure utilizar letras minúsculas, evite los símbolos que no sean internacionales o que sean especiales, como acentos, eñes, guiones, comas, etc. Es preferible no utilizar espacios. Comprenda que el nombre de archivos y carpetas es algo simbólico y no está sometido a las reglas de la ortografía. En cambio, el contenido de los documentos, que es lo que verá el usuario en pantalla, sí que está sometido a las reglas ortográficas.

Crear carpetas para los archivos

5. La estructura que va crear la puede ver en la figura de la derecha. Consta de las siguientes carpetas:

1. Carpeta de imágenes: lo siguiente que haremos es crear, dentro de la carpeta del proyecto, otras carpetas para organizar un poco el trabajo. Haga clic con botón derecho del ratón sobre la carpeta del proyecto, en el panel de archivos. Seleccione Nueva carpeta. Esta carpeta la destinaremos a almacenar imágenes, llámele img. Tener carpetas independientes para las imágenes es muy conveniente para poderlas localizar con facilidad.
2. Carpeta para los .doc: puesto que en este proyecto utilizaremos documentos Word, crearemos una carpeta para este tipo de documentos. Haga clic con botón derecho del ratón sobre la carpeta del proyecto, en el panel de archivos. Seleccione Nueva carpeta. Llame, doc, a la nueva carpeta.
3. Carpeta para los documentos pdf: Haga clic con botón derecho del ratón sobre la carpeta del proyecto, en el panel de archivos. Seleccione Nueva carpeta. Llame, pdf, a la nueva carpeta.
4. Carpeta para los documentos Word convertidos a html: Haga clic con botón derecho del ratón sobre la carpeta del proyecto, en el panel de archivos. Seleccione Nueva carpeta. Llame, dochtml, a la nueva carpeta.
6. Recuerde que un proyecto tiene gran cantidad de archivos. Si no se organiza y crea las carpetas necesarias, perderá mucho tiempo cuando tenga que localizar un archivo para modificarlo o sustituirlo. La estructura de carpetas que hemos sugerido puede ampliarse con otras carpetas dentro de ellas. Eso queda al criterio del autor del proyecto. Recuerde que se trata de algo sencillo pero fundamental. Si no lo hace de esa manera, verá lo mal que trabaja cuando aumente el número de archivos. Un sitio Web acaba teniendo gran cantidad de elementos diferentes. Hágame caso y pierda algo de tiempo organizando bien sus documentos mediante el uso de carpetas contenedoras.

   Copiar los archivos

7. El siguiente paso es colocar en las carpetas los diferentes archivos. En este proyecto se utilizan cuatro tipos de archivos:

1. Imágenes: voy a proporcionarle algunas. Haga clic en los vínculos (libro, bola roja, nuevo, pdf , fondo1, fondo2) y guarde las imágenes en la carpeta img (para guardar las imágenes haga clic sobre ellas con botón derecho del ratón y seleccione Guardar imagen como). Las imágenes las podrá utilizar después en una página Web para adornarla un poco.
2. DOC: le proporciono mediante un vínculo (archivo doc), un archivo para que lo utilice en la práctica. Cuando haga clic en el vínculo tendrá la opción de guardarlo. No lo abra. Guárdelo en su carpeta doc.
3. PDF: haga clic en el vínculo (archivo pdf) y guarde el archivo en su carpeta pdf.
4. Documento Word para convertir a HTML: haga clic en el vínculo (archivo doc) y guarde el archivo en su carpeta dochtml. Este archivo de Word no lo utilizaremos directamente sino que lo convertiremos previamente, mediante Word, en un documento html.
8. Observe en la figura la organización del proyecto con sus carpetas y la ubicación de los archivos. Si el panel de Archivos no muestra los que ha copiado desde Windows es porque no ha actualizado la pantalla. Para actualizar o refrescar la pantalla haga clic en el botón Actualizar del panel de Archivos o haga clic en un punto libre del panel y pulse F5 (Actualizar).
9. En los tres puntos siguientes voy a comentarle como operan estos archivos cuando se intentan abrir a través de un navegador Web.
   1. Cuando hace clic en un vínculo a un archivo Word, aparece una ventana de diálogo que le da dos opciones: Guardar el archivo o abrirlo. Si opta por abrirlo, el navegador ejecuta el programa Word en una ventana independiente y muestra el documento en pantalla. Por lo tanto el usuario debe tener instalado Word para poder leer el archivo.
   2. Cuando hace clic en un vínculo a un archivo PDF, el navegador ejecuta el programa Acrobat Reader y lo incrusta dentro de la ventana del navegador. Esto no ocurre no ocurre con un documento Word que se abre en una ventana independiente a través del programa Word. La acción de incrustar una aplicación dentro del navegador se produce gracias un pequeño programa, conocido como plug-in, que ejecuta el navegador. El plug-in es diferente para cada programa. El plug-in del programa Acrobat Reader suele estar instalado en los navegadores, por lo que el usuario no necesita instalarlo.

   Convertir un documento Word en página Web

10. Otra interesante posibilidad con los archivos Word es convertirlos en páginas Web para verlos directamente en la ventana del navegador. Es lo que haremos ahora con el documento pmarzo.doc, convertirlo previamente a página Web. Para ello haga lo siguiente:

1. Minimice la ventana de DreamWeaver. Ejecute Word y abra el documento pmarzo.doc. A continuación haga clic en Archivo > Guardar como página Web (vea la figura).
2. Vea la figura. Seleccione como tipo de archivo: Página Web, filtrada (*htm; *html).
3. Observe que el nombre se coloca automáticamente como pmarzo.htm.
4. Haga clic en Guardar. Tendrá un mensaje de aviso que indica que el filtro quita alguna de las características de Word. Es lo que queremos porque no volveremos a manejar esta página Web desde Word. Cierre Word.
5. Vuelva a DreamWeaver y observe lo que ha pasado en la carpeta dochtml. Verá el archivo pmarzo.htm que es una página Web. Las imágenes asociadas a este archivo se han almacenado en una carpeta independiente pmarzo_archivos. Si alguna vez quiere extraer las imágenes de un documento Word, este es un buen método.
6. El documento pmarzo.doc ya no lo necesita por lo que puede borrarlo. Para ello selecciónelo en el panel de archivos y pulse la tecla Supr. También puede seleccionarlo y desplegar el menú contextual con botón derecho del ratón. Haga clic en Edición > Eliminar.
7. Si en el panel de archivos, despliega la carpeta pmarzo_archivos mediante un clic en el control de expansión que aparece junto a la carpeta, verá el contenido de esa carpeta. En este caso hay dos imágenes: image001.gif y image002.gif.
10. Digamos que en estos momentos tenemos todo el material casi listo para completar nuestro sitio Web. Lo que hemos hecho es muy simple. Sólo crear carpetas, colocar archivos y transformar un documento Word en un archivo html filtrado.

    Página index.html

11. Una sencilla página Web, index.html, para vincular los documentos completará el proyecto. Haga clic con botón derecho sobre la carpeta del proyecto en el panel de archivos. Seleccione Nuevo archivo. Verá un archivo untitled.html iluminado en azul en el panel de archivos. Llame al archivo index.html.
12. Haga doble clic sobre el archivo index.html y se abrirá en la ventana de DreamWeaver. Lo primero es ponerle título a la página. En la parte superior del documento verá la barra de herramientas con una casilla destinada a escribir el título del documento. Escriba: Apuntes de Informática y Matemáticas.
13. Haga clic en el documento en blanco. Pulse F4 para ocultar los paneles y poder trabajar más cómodamente. Escriba el siguiente texto o guión de los apuntes:

Informática y Matemáticas

Manipulación de archivos en formato pdf.

Vocabulario de electrónica e informática.

Problemas de matemáticas: mes de marzo.

14. Pulse de nuevo F4 para recuperar los paneles. Sitúe el cursor en la segunda línea. En el panel inferior Inspector de propiedades, haga clic en el botón Lista ordenada .
15. Repita la operación anterior para la tercera y cuarta línea. De esa forma tendrá una lista numerada.

    Formatos

16. Haga clic en la primera línea. En el Inspector de propiedades despliegue la lista de formatos y seleccione Encabezado 2.
17. Con triple clic muy seguido sobre la primera línea la selecciona. Si no lo consigue hágalo pinchando y arrastrando el ratón. Otra forma muy eficaz es utilizar el teclado cuando se trata de seleccionar. Para ello sitúe el cursor al principio de la línea, mantenga pulsada la tecla mayúsculas y sin soltar pulse la tecla fin o mantenga pulsada la tecla flecha a la derecha hasta llegar al final de línea o de toque a la tecla flecha abajo para seleccionar toda la línea.
18. Con el texto seleccionado haga clic en el botón Color del texto en el inspector de propiedades. Seleccione el color Azul oscuro.
19. Haga clic en el botón Negrita . De esa forma tiene un encabezado para el documento. ya ha visto lo fácil que es, se selecciona el texto y se acude al inspector de propiedades del elemento seleccionado.

    Establecer los vínculos

20. Ha llegado el momento de establecer los vínculos de los documentos que almacenó en las carpetas. Lo mejor es que vea primero la siguiente simulación en la que le indico la forma más fácil de establecer los vínculos.
21. Seleccione, en la segunda línea de texto, archivos en formato pdf. Pinche y arrastre el botón Señalar archivo y suelte el ratón sobre el archivo w002archivospdf.doc en la carpeta doc del panel de archivos.
22. Seleccione, en la tercera línea de texto, electrónica e informática. Pinche y arrastre el botón Señalar archivo y suelte el ratón sobre el archivo vocabulario.pdf en la carpeta pdf del panel de archivos.
23. Seleccione, en la segunda línea de texto, matemáticas: mes de marzo. Pinche y arrastre el botón Señalar archivo y suelte el ratón sobre el archivo pmarzo.htm en la carpeta dochtml del panel de archivos.
24. Recuerde que otra forma de establecer los vínculos es seleccionar el texto y utilizar el botón Buscar archivo del inspector de propiedades.

    Color o imagen de fondo

25. Para poner un fondo al documento haga clic en un punto libre, con botón derecho del ratón, para desplegar el menú contextual. Seleccione Propiedades de la página. Para poner un fondo liso haga clic en el botón Color fondo . En nuestro ejercicio utilizaremos una imagen. Puede elegir como imagen de fondo blue6b.gif o papiro.jpg de su carpeta img. Para ello utilice el botón examinar que aparece junto a la casilla imagen de fondo.
26. Los navegadores repiten las imágenes de fondo hasta que se llena la pantalla. Por esa razón se utilizan estrechas franjas o cuadrados pequeños como archivos de imagen de fondo. Así se transmite por la red un archivo de imagen muy pequeño y llega en poco tiempo al navegador. Puede encontrar, a través de internet, numerosos archivos para fondos de pantalla. A veces se conocen con el nombre de texturas.

    Insertar imágenes

27. Lo último que haremos es insertar algún icono o imagen que adorne un poco el texto de la página index.html. En el panel de archivos, pinche y arrastre la imagen nuevo.gif de la carpeta img y suéltela al final de la segunda línea de texto.
28. En el panel de archivos, pinche y arrastre la imagen libro.gif   y suéltela delante de la palabra, electrónica, en la tercera línea de texto.
29. En el panel de archivos, pinche y arrastre la imagen zbolaroja.gif   y suéltela delante de la palabra, matemáticas, en la cuarta línea de texto.

    

30. Pruebe el proyecto viéndolo en el navegador. Para ello haga clic en el botón Vista previa o pulse F12.

Datos remotos

Cuando crea que el proyecto debe ser publicado en Internet, tiene que transmitir los documentos y carpetas para colocarlo todo en el servidor de su proveedor. Para conectar con con el servidor remoto necesita sumnistrar algunos datos a DreamWeaver:

1. Protocolo de comunicaciones que se va a utilizar en la transmisión. Generalmente se utiliza el protocolo FTP (File Transfer Protocol).

   Su proveedor de Internet le tiene que proporcionar cuatro datos:

2. Nombre del servidor FTP.
3. Directorio o Carpeta del servidor asignada a sus proyectos.
4. Nombre de usuario.
5. Contraseña.

Con esta información en su poder,  haga doble clic sobre la casilla con el nombre del proyecto . La verá en la parte superior del panel de archivos, por encima de los botones del panel, situada a la izquierda de la que pone Vista local. De esta forma obtiene en pantalla la ventana de diálogo Definición del sitio y puede introducir modificaciones.