Sesión #9 De Word 2013 a página Web...

Sesión #9 Word 2013 IV – De documento a Página Web

A través de la presente práctica se realizarán varias acciones:

· Creación de una animación Flash, la cual representará un Banner (con sonido musical adherido)

· Creación del documento base (*.doc), con Tabla de Contenidos

· Establecer marcas para realizar hipervínculos dentro del mismo documento

· Convertir el documento base a una Página Web

· Proteger la página Web con contraseña de escritura

Paso 1. Creación de la animación Flash. Para ello emplearemos el programa “KoolMoves”, el cual podrás hallarlo en la nube (Internet), basta con que teclees en Google: “KoolMoves portable Download”, y listo.

Al ejecutar el programa “KoolMoves” se mostrará el siguiente ambiente:

El área en blanco se trata del escenario, en el cual colocaremos una imagen (logoIPN.jpg) e insertaremos dos textos (1- INSTITUTO POLITÉCNICO NACIONAL, 2 – Prof. Carlos Montiel R.). Trata hasta donde sea posible darle más o menos las mismas dimensiones, ya que se tratara de crear un Banner (anuncio publicitario que la mayoría de las páginas Web que visitas diariamente lo poseen).

Para reducir o agrandar las dimensiones del escenario, bastará que coloques el puntero del mouse en las orillas del mismo, y en el momento en que la apariencia del mouse cambie (“dos puntas de flecha”) arrastra con clic sostenido el mouse y así podrás modificar las dimensiones del escenario.

El ícono “encuadrar la vista” te permite mover todo el escenario y colocarlo donde tú lo desees.

Para insertar una imagen en el escenario, elige la subopción: “image (.bmp, .gif, .jpg, .png, .tif, .pcx), de la opción “Importar…” del menú “File”, tal como se muestra:

Enseguida definimos la imagen a insertar, en este caso será: “logoIPN.jpg”, mostrándose como sigue:

Con la herramienta “Select/move shapes” (Seleccionar/mover imágenes) mueve la imagen y colócala en la parte izquierda del escenario, tal como se mostró arriba.

Ahora, procedemos a reducir la imagen. Hacemos clic en la herramienta: “Transforms: Scale, Rotate, Flip, Slant, Squish, Perspective” (Transformar: Escala, Rotar, Dar la vuelta, Inclinar, Chapotear, Perspectiva), debiendo aparecer pequeños cuadros en el perímetro de la imagen, los cuales permitirán reducir o agrandar la imagen:

Ahora, le asociamos a esta imagen un efecto de animación, para ello elige la opción “Motion Script…” (Guion de movimiento) del Menú “Effects” (Efectos), y enseguida localiza el efecto “Motion Path 1” (Trayectoria de movimiento 1), y del menú de arriba (panel derecho), cambia el valor de “Speed” por “very slow” y el de “Loop” por “yes”, y después oprime el botón “OK”, observa la siguiente imagen:

Ahora procedemos al manejo del texto. Hacemos clic en la herramienta “Add regular or dynamic text” (Agregar texto regular o dinámico), cambiando la apariencia del apuntador del mouse, y enseguida hacemos clic en cualquier lugar del escenario, debiendo aparecer la ventana de “Text and Font” (Texto y Font), donde tecleamos: “Instituto Politécnico Nacional”, con tamaño de letra de 50 pixeles, tipo de letra “Century Gothic” y color Rojo: 48, Verde: 0 y Azul: 0, con la herramienta “Fill with solid color, gradient, or image” en la ventana “Shape Fill” y al final oprime la tecla “OK”:

Ahora, le asociamos a este texto un efecto de animación, para ello elige la opción “Motion Script…” (Guion de movimiento) del Menú “Effects” (Efectos), y enseguida localiza el efecto “Spiral in” (Espiral en), y del menú de arriba (panel derecho), cambia el valor de “Speed” por “very slow” y el de “Loop” por “yes”, y después oprime el botón “OK”, observa la siguiente imagen:

Seguimos añadiendo texto, ahora tecleamos nuestro nombre, en mi caso es: “prof. Carlos montiel rentería”, con tamaño de letra de 20 pixeles, tipo de letra “Century Gothic” y color Rojo: 48, Verde: 0 y Azul: 0, con la herramienta “Fill with solid color, gradient, or image” en la ventana “Shape Fill” y al final oprime la tecla “OK”.

Asimismo, le asociamos un efecto de animación, para ello elige la opción “Motion Script…” (Guion de movimiento) del Menú “Effects” (Efectos), y enseguida localiza el efecto “Shapes” (sombras), y del menú de arriba (panel derecho), cambia el valor de “Speed” por “very slow” y el de “Loop” por “yes”, y después oprime el botón “OK”, observa la siguiente imagen:

Para continuar, ahora agregaremos dos botones preestablecidos, para ello escoge la opción: “Insert from Animation Libraries” (Insertar desde la Biblioteca de Animación) del menú: “File” (Archivo) y elige “Buttons” (Botones), enseguida en el panel de la izquierda selecciona “Navigation 2” (Navegación 2) y finalmente elige el primer botón de la 2ª. Fila y haz clic en el botón “Add” (añadir) y repite estas acciones pero eligiendo el 3er botón de la 1ª. Fila de “Odds & Ends 1” (retazos 1).

A ambos botones colócalos en la parte inferior derecha del Banner:

Finalmente, a estos botones les asociaremos “acciones” a ejecutar, al botón verde le asociaremos que active el sonido de un archivo MP3, y al botón rojo le asociaremos la acción de detener el sonido MP3, algo muy parecido al “play” y “stop” de un reproductor de sonido.

Botón verde. Lo seleccionamos, damos clic derecho y del menú contextual que aparece elegimos la opción: “Edit button Actions/Sound”, debiendo de aparecer la ventana: “Button Actions and Sounds” (botones de acción y sonidos), en la cual elegimos la última pestaña: “Down Sound” (sonidos abajo) y hacemos clic sobre el ícono: “Select sound” (selecciona sonido) que es una pequeña carpeta amarilla, y especifica el archivo MP3, en mi caso empleo el archivo: “MagicStick.mp3”:

Y cerramos la ventana.

Botón rojo. Igual, lo seleccionamos, damos clic derecho y del menú contextual elegimos la opción: “Edit button Actions/Sound”, debiendo de aparecer la ventana: “Button Actions and Sounds” (botones de acción y sonidos), en la cual elegimos la primera pestaña: “Actions” (acciones) en la cual hacemos clic sobre la cruz verde, debiendo de aparecer un menú, donde elegimos la opción: “Stop Sounds…” (Detener Sonidos) y finalmente en la última ventana solo activa la opción “Press” (prensa u oprimir) y hacemos clic en el botón “OK”:

Hemos terminado, ahora para poder revisar que lo que se ha hecho esta correcto, empleamos la opción: “Play in Web Browser” (ejecutar en un navegador Web) del menú “Play” (Ejecutar), esta opción nos permite evaluar la animación flash en ambiente Web:

Para terminar este paso #1, solo basta exportar nuestro diseño en una Animación Flash y para ello elegimos la sub opción: “As SWF (Flash Movie)” (Como SWF, -película Flash) de la opción: “Export/Publish Movie” (Exportar/Publicar Película) del menú “File” (Archivo):

Y hemos terminado el paso #1.

Paso 2. Creación del Documento Base. A manera de agilizar este menjurje, teclea la siguiente información en un documento nuevo, a partir del segundo renglón:

Tema “Word como herramienta valiosa para las secretarias(os)”

Tema I

=rand

[Índice]

Tema II

=rand

[Índice]

Tema III

=rand

[Índice]

Tema IV

=rand

[Índice]

Conclusiones

=rand

[Índice]

Ahora, insertaremos la animación Flash que hemos creado. Para ello haz clic en el primer renglón (te pedí que dejaras este renglón en blanco) y de la Ficha “Desarrollador” emplearemos del grupo “Controles” el último ícono llamado: “Herramientas heredadas”, al hacer clic deberá de aparecer un pequeño menú, del cual elegimos el último ícono: “Más controles” debiendo aparecer la ventana: “Más controles”, enseguida oprime la tecla “S” y deberá de posicionarse en la opción: “ShockWave Flash Object”, y precisamente ésta es la opción a elegir, entonces simplemente haz clic en el botón “Aceptar”, tal como se aprecia enseguida:

Después, observamos que Word inserta un rectángulo, precisamente para alojar a la animación Flash:

Enseguida, le damos las proporciones requeridas para colocar la animación Flash:

Ahora, debemos especificar el nombre de la animación Flash en la ventana de “Propiedades” en la opción: “Movie”, de la Ficha “Desarrollador”, tal como se muestra enseguida:

Y cerramos la ventana. Para poder observar la animación, debemos guardar el presente documento en la misma carpeta donde se encuentra la animación Flash, cerrar el documento y volver a abrirlo, entonces ya podremos observar la animación:

A manera de verificación, haz clic al botón verde el cual habilita la música, y ya sabes, si deseas detener la música, entonces haz clic al botón rojo.

Paso 3. Establecer marcas para realizar hipervínculos dentro del mismo documento. La siguiente acción es añadir “Hipervínculos” y “Marcas”, mediante los comandos del grupo “Vínculos” de la Ficha “Insertar”, así que colócate en el siguiente renglón del Título. “Tema Word como herramienta….” (Debajo de éste) y elige el comando “Marcador” del grupo “Vínculos” de la Ficha “Insertar" y en la ventana que aparecerá teclea el nombre del marcador, que en este caso es “M1” y dar clic al botón “Agregar” y listo, tal como se muestra enseguida:

Ahora, estableceremos los Hipervínculos. A todos los textos: “[Índice]” les asociaremos el Hipervínculo, el cual permitirá que nos traslademos al marcador “M1” (que se encuentra dentro del mismo documento), así que selecciona el primer texto [Índice] y ya seleccionado, elige el comando “Hipervínculo” del grupo “Vínculos” de la Ficha “Insertar”:

Como estarás observando, se debe elegir del panel de la izquierda la opción “Lugar de este documento” y enseguida, elegir el marcador “M1” y listo, solo basta hacer clic en el botón “Aceptar”. El documento se verá como sigue:

Repite estas mismas acciones para todos los textos: “[Índice]” restantes. Deberás de tener lo siguiente:

Ahora, como siguiente acción, vamos a asociar el estilo “Título 1” del grupo “Estilos” de la Ficha “Inicio” a todos los subtítulos de nuestro documento (“Tema I”, “Tema II”,… “Conclusiones”). Para ello basta con seleccionar a cada uno de éstos (obvio con la tecla “Ctrl” oprimida) y elegir el estilo ”Título 1”, debiendo aparecer como sigue:

Creando la Tabla de Contenidos. En estas condiciones podemos crear la tabla de contenidos, primero asegúrate colocar el puntero del mouse haciendo clic abajo del título principal, y enseguida haz clic en el comando “Tabla de contenido” de la Ficha “Referencias”, eligiendo la opción: “Tabla automática 1”, dándonos el siguiente resultado:

Como podrás observar, la tabla de contenidos generada, nos presenta en la página número 1 todos los subtítulos mencionados, y pues es el momento de agregar el texto que corresponde a cada subtitulo, pero para fines prácticos emplearemos la función “=rand(n)” para crear de manera automática “n” párrafos para dicho fin, así que para el primer subtítulo: “Tema I”, a su siguiente renglón lo a completamos de la siguiente manera: “=rand(12)”, es decir solo agrégale: (12) y NO DES ENTER, y así a los demás de igual manera, excepto el subtítulo “Conclusiones” solo 4 párrafos, tal como se muestra enseguida:

Ahora, colócate al final de cada uno de los renglones que contiene la función “RAND” y oprime la tecla “Enter” y automáticamente generará los párrafos definidos, tal como se aprecia enseguida:

Debemos actualizar la tabla de contenidos para que refleje correctamente la posición de los subtítulos, para ello selecciona la “Tabla de contenidos” y en la parte superior izquierda de la misma aparece una cejilla: “Actualizar tabla” haz clic en ella:

Para completar el documento insertamos el número de página, empleando el comando “Número de página” de la Ficha “Insertar” al final de página.

Paso 4. Convertir el documento base a una Página Web. Procedemos a guardar nuestro documento con el nombre de “Documento Base”, enseguida volvemos a guardarlo con la opción “Guardar como…” y en este paso empleamos el tipo del archivo como: “Página Web (*.htm, *.html)”, definiendo otro nombre al archivo: “pagWeb Word.html”, así como también definimos la contraseña contra escritura, tal como se parecía enseguida:

Finalmente, Word nos presenta el documento ya convertido en página Web, como sigue:

Sin embargo, si quisiéramos revisar la página Web recién creada (pagWeb w2013.htm) fuera de Word, la animación no se presenta, es decir está ausente, entonces para obligar al navegador a presentar dicha animación flash, empleamos la siguiente etiqueta:

<EMBED SRC=BANNER.FLASH WIDTH=1000 HEIGHT=70>

Para ello editamos el archivo “pagWeb W2013.htm” con la herramienta “Bloc de Notas” y hacemos la búsqueda del texto: “herramienta”, que nos permite situarnos antes de éste e insertar la etiqueta mencionada, tal como se observa enseguida:

Antes: