Practica nro 06 Objetivo: realizar un proyecto que nos permita conocer el cocodrilo del Orinoco, en un mini tutorial que

lo realizaremos en Neobook Proyecto: El cocodrilo del Orinoco Nuestro bosquejo inicial la que se muestra a continuacin, donde se muestra cuatro pginas, una que lo llamaremos princicipal, el segundo hbitat, el tercero mapa y el ltimo llamao fotos:

1. Configurando el proyecto Realizaremos algunos ajustes en nuestro proyecto, sin no ante recordar que queda la configuracin del ltimo proyecto que hayamos realizado anteriormente. A. Activamos la cuadrcula, para ello vamos al men Options > Grid Settings.

B. En la opciones que aparecen activar Snap to grid (pegarse a la grilla, es decir los objetos se alienarn a las grillas en forma mgica) y Show grid (mostrar la grilla en forma de punto en el rea de trabajo). Activar las dos opciones, como se muestra en el grfico siguiente:

C. Configuraremos nuestra publicacin, la cual lo realizaremos en la ventana Book Properties (Propiedades del libro), para ello D. Vamos al men Book > Book Properties > General E. En la categora General en Title Escribimos Cocodrilo del Orinoco Author Escriba du nombre Ejemplo Juan Perez Gomez

F. En la categora Size/Colors, y ajuste la medida de la publicacin a 640 x 480, aunque el estndar es de 800 x 600

G. En la opcin Access desmarcar la casilla Allow Page Up, Page Down, Home and End keys to change pages (es decir desactivamos la teclas adelante y atrs, esto evitar que podamos utilizar estas teclas para ir hacia adelante y hacia atrs en nuestra publicacin)

H. Terminado la configuracin de la pgina hacemos click en OK 2. Agregar Pginas Nuestro proyecto contar con cuatro pginas (NO se cuenta la pgina denominado Page Master o pgina maestra), por lo que agregaremos tres pginas ms A. Para ello vamos al men Page > Add Page B. En la ventana de dilogo Add Pages escribimos 3 en Number of Pages to Add:

Al hacer click en Ok, tendremos las pginas New page, New Page 1, New Page 2 y New Page 3. 3. Cambiando Nombres a la Pginas Ahora debemos de renombrar los nombres de cada una de las pginas. A. Primero cambiaremos el nombre de la primera pgina (New page), hacemos clic derecho sobre la pestaa de la pgina. B. Se activa el men emergente, C. Elegimos la opcin Rename Page (Renombrar pgina),

D. En el cuadro de dilogo cambiamos el nombre New Page por el de Principal

E. Confirmamos haciendo OK F. Repetimos el mismo procedimiento para las pginas siguientes, cambiando el nombre de las pginas siguientes y colocando como nombre Habitat, Fotos e Informacin. 4. Armando la pgina Maestra. La pgina maestra o Master Page, est pgina como sabemos no aparece en la publicacin, permanece invisible para el usuario final y sirve para incluir los elementos que deben de aparecer en (casi) todas las pgina o en las necesarias. A. Insertaremos un botn salir en el extremo superior derecho de la pgina maestra (este botn se repetir en todas las pginas de nuestro proyecto)

B. Para ello hacemos click en la pestaa Master Page (para que nos muestres esta pgina). Tomamos la herramienta Push Button (Boton), Luego trazamos la forma de un rectngulo desplazando el puntero desde A hasta B para que se dibuje el botn ms o menos de ese tamao.

Aunque no debamos preocuparnos por el tamao y la posicin del botn, ya que podemos modificarlo ambos en cualquier momento. C. Inmediatamente despus de soltar el botn del mouse, aparece la pantalla de configurar el botn. D. En la categora General en Caption: escribimos Salir y en Alignment: Center (Esta por defecto en Center)

E. Elegimos la Categora Actions, en ella insertaremos cdigo, en este caso de una lista de acciones con la que cuenta NeoBook, para ello hacemos clic sobre Insert Action

F. En la lista desplegable, elegimos la Categora Messages/Interaction, luego elegimos la accin Exit (de la funcin Shut Down)

G. Aparece la ventana Exit Properties (Propiedades de Exit), En Title: escriba SALIR, y en Message: escriba Desea realmente salir?

H. Luego hacemos clic en OK

Cuando regresamos a la pantalla de de propiedades del botn, aparece el script con el comando completo, tal como se muestra en la imagen de arriba. I. Hacemos clic en OK. J. Ahora debemos de cambiar algunas caractersticas del botn Cambiemos el Color del botn 1) Hacemos clic cobre el botn Fill (rellenar Color) 2) Elegimos el color amarillo naranja de la paleta 3) En esta casilla aparece la muestra del color 4) Confirmamos con OK

3 5 4

K. Pero si queremos obtener el color exacto del ejemplo, en lugar de Aceptar L. presionamos el botn Custom , aparece la tpica paleta de Windows de Configurar color 1) Podemos cambiar la tonalidad (el color) desplazando el cursor (sujetndolo con el mouse) desde A hasta B 2) Podemos modificar la pureza (saturacin) moviendo el cursor en el eje vertical 3) Podemos modificar la claridad del color desplazando la corredora 4) Para obtener el color exacto del ejemplo, colocamos los valores en los recuadros: Rojo: 250 Verde: 200 Azul: 0

Una vez ingresado los valores Aceptamos, y ya tenemos el color exacto M. Cambiemos el texto del botn N. Hacemos clic sobre el botn fuente (cuando pasamos por encima el mouse indica Font Style)

O. Aparece la ventana Fuente P. y elegimos tipografa a Arial, estilo Negrita y Tamao 9

En cuanto al tamao del botn adecelo de acuerdo a la siguiente imagen

5. Armando la pgina Principal

Esta pgina contendr: 1) El botn Salir, colocado en la pgina maestra. 2) Una fotografa de fondo 3) Tres botones que nos llevarn a una de las pginas respectiva 4) El ttulo

A. Nos ubicamos en la pgina Principal haciendo clic en la pestaa de la pgina, y luego activaremos las propiedades de la pgina B. Para ello presionamos la tecla F5 (tambin hacer doble clic en el rea de trabajo de la pgina o haciendo clic derecho en la pestaa y elegimos Page Properties).

C. Insertaremos un fondo de pgina D. Hacemos clic en la carpeta Select a file

E. Aparece la ventana para elegir la imagen, navegamos hasta la carpeta donde estn las imgenes de nuestro proyecto y F. Elegimos la imagen coco1.pcx para nuestro fondo de pgina, G. Presionamos el botn Abrir, luego H. Hacemos clic en OK I. Insertando los botones en nuestra pgina llamado principal J. Nos vamos a la pgina maestra y de ella copiamos el botn que creamos (botn Salir), K. y lo pegamos en la pgina Principal,

1) El botn copiado aparece exactamente en el mismo lugar del otro botn Salir

2) Esta copia lo desplazamos hasta la parte inferior de la pantalla (al momento de realizar esta operacin el puntero tomar la forma de una manito)

Luego de desplazarlo An con el botn seleccionado

L. Vamos al men Editar y elegimos la opcin Duplicar o presionamos Ctrl + D, y M. Aparece una copia idntica, levemente desplazada hacia abajo con respecto a la original

N. Repetimos la operacin una vez ms (duplicar el botn) para tener tres copias, luego acomodamos los tres botones tal como se muestra en la imagen siguiente

O. Vamos a modificar estos botones para adaptarlos a las necesidades del proyecto P. Hacemos doble clic en el primer botn para abrir la ventana de propiedades y editar las propiedades del botn

Q. En la categora General, modificamos el texto, reemplazando Salir por ZONA DE HABITAT, este texto debe de estar en dos lneas y las letras todos en maysculas R. Ahora elegimos la categora Actions, borramos toda la lnea de la accin Exit. S. Insertaremos una nueva accin, este ser la accin GotoPage (Ir_a_pgina ), para ello hacemos clic en Insert Actions, T. Elegimos la categora opcin Navegation, y hacemos clic en la accin GotoPage

Al elegir la accin nos aparece la ventana de propiedades de GotoPage

U. En esta ventana de propiedades de la Accin, podemos escribir (si lo recordamos) el nombre exacto de la pgina o destino o V. Hacer clic sobre la lista desplegable, para luego elegir el nombre de la pgina, en este caso Habitat (que ser la pgina destino al hacer clic en este botn)

W. Una vez elegido nuestra pgina de destino hacemos clic en OK X. El script de la accin del botn quedar completo, y hacemos tambin clic en OK

Y. 1) 2) 3)

Para los dos botones siguientes Repetimos la edicin de los otros dos botones estableciendo Botn FOTGRAFAS y en la categora Actions insertamos la accin GotoPage Fotos Botn MAS INFORMACIN y en la categora Actions insertamos la accin GotoPage Informacin

Z. Para el ttulo de la pgina, hacemos lo siguiente: AA. Tomamos la herramienta Simple Text , luego en la ventana de propiedades del texto escribimos COCODRILO DEL ORINOCO, en dos lneas tal como el grfico nos muestra

Hacemos clic en Ok BB. Como observar el texto tiene un color de fondo, lnea de recuadro y tipografa previamente configurada. CC. Con el texto del ttulo an seleccionada, hacer clic en Fill Patern (Rellenar muestra) DD. Clic sobre la casilla H (hueco, en ingles tcnico Hollow)

EE. Vemos que ha desaparecido el color de fondo, pero que todava queda la lnea perimetral (que es de color negro) FF. Borraremos esa lnea GG. Clic sobre el botn Line Width (Ancho de lnea),uego hacemos clic en None (Ninguno), con lo cual desaparece la lnea.

Falta el texto del ttulo, HH. Hacemos clic en Font Style, y en la venta Fuente, debemos poner en fuente Arial Black, Estilo Normal, tamao 48, una vez terminado hacemos clic en Aceptar

II. Efecto de Sombra en el texto del ttulo Duplicamos el ttulo

Cambiamos el color del duplicado al color de los botones, haciendo clic en el la lista desplegable Font Color

En la ventana de paleta de colores ingresar los colores de los botones se acuerda verdad?

Una vez hecho esto, acomodamos la copia del texto por encima del texto en negro desplazndolo hacia arriba y al lado izquierdo, mas o menos como se muestra en la siguiente imagen. Y queda

6. Pgina del mapa A. Vamos a construir ahora la pgina donde se muestra la zona de hbitat del cocodrilo, esta pgina contendr: 1) Un botn, adems del botn Salir, para regresar a la pgina Principal 2) El grfico de fondo y 3) El texto del ttulo

B. Hacemos clic en la pestaa de la pgina Hbitat, para mostrarlo C. Copiamos de la pgina Principal un botn y lo pegamos en la pgina Hbitat

Lo ubicamos por debajo del botn Salir

D. Doble clic en el botn que copiamos, y la ventana de propiedades del botn, elegimos la categora General en Caption, borramos el texto anterior y escribimos VOLVER A PAG. PPAL.

E. Luego elegimos la categora Actions, en ella insertamos el siguiente Script GotoPage Principal

Una vez insertado el cdigo hacemos clic en OK F. Este botn lo copiaremos a las pginas Fotos e Informacin en la misma ubicacin por debajo del botn Salir. (Esto lo hacemos por que cumplir la misma funcin de regresar a la pgina Principal al hacer clic en ella en cada una de estas pginas) Una vez hecho la copia de los botones G. Regresamos de vuelta a la pgina Habitat H. Insertemos el fondo de la pgina, entonces presionamos F5, y en la venta de Propiedades de la pgina, elegimos la imagen MAPA.PCX

Hacemos clic en OK, para terminar

I. J.

Insertando el Ttulo dentro del mapa Tomamos la herramienta Simple text, y sobre el fondo de la pgina simulando dibujar un recuadro y al soltar el mouse, aparece su ventana de propiedades , en la categora General escribimos el texto Zona de distribucin actual (en tres lneas como se muestra en el grfico), y hacemos clic en OK para terminar.

K. Realizaremos ajustes al texto, para ello 1) Editamos la paleta Fuente 2) Seleccionamos Arial Black 3) Seleccionamos Normal 4) Tamao 36 5) Confirmamos con Aceptar

Una vez hecho los pasos anteriores, debe de quedar el ttulo como se muestra a continuacin

L. Realice los mismos procedimientos del ttulo de la pgina Principal, para que quede con el color en amarillo y una sombra en negro

7. Pagina de fotografas A. La pagina contendr tendr tres fotografas, dos de las cuales se pueden ampliar, mientras que de la tercera se puede ampliar dos detalles de la misma, entonces tendr los elementos. 1) El botn salir. 2) El botn de volver, que copiamos antes 3) Unafotgrafa de la que se puede ampliar los detalles recuadrados 4) Dos fotografas que se pueden ampliar 5) El ttulo

B. Colocaremos un color de fondo a la pgina Fotos, C. para ello en la presionamos F5 para qu?,. en color de fondo ingresamos los siguientes valores en los recuadros correspondientes : Rojo: 220 Verde: 180 Azul: 0

D. Vamos a colocar la fotografa principal, E. Elegimos la herramienta Picture / Graphic Flie , luego arrastre el mouse a un rectngulo adecuado dentro del espacio de trabajo del libro.

F. En la ventana Selecta an Image File, G. insertamos la imgen coco1.pcx, y presionamos Abrir

Como ver la imagen que colocamos es mayor que el rea rectangular que trazamos y no podemos verla por completo, H. Para poderlo apreciar la imagen por completo hacemos doble clic en la imagen I. En las propiedades de la imagen, en la categora Appearance, en Display Mode elegimos Stretch

Hacemos clic en OK Ahora la imagen se ajustar al recuadro J. Repetimos la operacin para las dos fotografas menores, con salvedad de que la ubicacin y tamao deber de ser como la que se muestra en el grfico de abajo 1) Cargamos coco2.pcx 2) Cargamos coco3.pcx

K. Fotografas ampliables, (al hacer clic sobre la imagen se ampliar el tamao de la imagen), entonces Insertaremos un botn invisible, para ello 1) Tomamos la herramienta de dibujar botones 2) Dibujamos el botn desde A hasta B (sobre la imagen coco2.pcx), el botn debe de cubrir toda la superficie de la fotografa.

L. Aparece la ventana de propiedades del boton, en la categora Actions, insertaremos la accin PopUpImage. M. Hacemos clic en Insert Actions N. Elegimos la categora Messages / Interactions y seleccionamos la accin PopUpImage

O. Aparecer la ventana Selecta an Image File, en ella seleccionamos la imagen Coco2.pcx, presionamos Abrir

P. En la pantalla que aparece, configuracin de la imagen PopUp, es donde se nos permite configurar una cantidad de parmetros. La dejamos la configuracin tal como se encuentra

Hacemos OK, en esta ventana, as como tambin en la ventana de propiedades del botn. Q. Ahora haremos que nuestro boton sea invisible 1) Configurar el relleno como Hueco, y 2) En ancho de lnea en None

R. Repetimos toda la operacin (colocar un boton invisible) sobre la tercera fotografa, cargamos all el grfico Coco3.pcx S. Haremos que haya dos reas dentro de la imagen mayor que nos permita mostrar en mayor detalle ciertas partes del cocodrilo Entonces colocaremos los dos botones sobre la imagen principal 1) Tomamos la herramienta rectngulo 2) Dibujamos uno sobre la zona del ojo del cocodrilo de la foto, arrastrando desde A hasta B

3) Elegimos una lnea punteada de color amarillo para el borde del rectngulo

T. Una vez terminado, Duplicamos el rectngulo (Ctrl + D)

U. El duplicado lo desplazamos hasta la zona del lomo del cocodrilo

V. Ahora insertaremos dos botones invisibles sobre cada uno de los recuadros, para ello selecciona la herramienta botn o realiza una copia de uno de los botones ya creados y procede a hacer lo siguiente: 1) En el primer botn invisible cargaremos como imagen PopUp la imagen ojo.pcx (recuerde como y donde lo hizo con los botones anteriores) 2) En el segundo cargaremos como imagen PopUp la imagen de nombre detalle.pcx

W. Coloqumosle el ttulo dentro de nuestra pgina, X. Seleccionamos la herramienta Simple Text, en su ventana de propiedades escribimos lo siguiente:

Y. La fuente en Arial, estilo negrita, tamao 36 Hacemos clic en OK Y luego deber de acomodarlo como se muestra en el grfico

Z. Ahora debemos de ingresar un texto adicional Tomamos la herramienta texto, y escribimos los siguiente

Y aplicamos las mismas caractersticas del anterior texto AA. Luego realice algunas modificaciones en el color de los dos textos para que quede de un color marrn naranja como se muestra a continuacin

8. Pgina de informacin adicional A. Esta pgina tendr un texto relativamente largo sobre el cocodrilo del Orinoco, con la posibilidad de imprimirlo Esta pgina contendr: 1) El botn Salir 2) El botn de volver, que copiamos antes 3) Un botn para imprimir el texto 4) Una ventana con un texto largo, que no entra en la pantalla, con la correspondiente barra de desplazamiento (5), para acceder a las partes ocultas

B. Hacemos clic en la pestaa de la pgina Informacion, y presionamos F5 para mostrar la ventana de propiedades, elegimos el mismo color de fondo de la pagina Fotos

. Hacemos OK para terminar. C. Seleccionamos la herramienta Scrolling Article / text File un rectngulo en el rea de trabajo, tal como se muestra en la imagen , trazamos

D. Aparece un ventana, donde nos indica elegir el origen del archivo

E. Hacemos clic en OK F. Seleccionamos el artculo cocodrilo.txt de nuestra carpeta de trabajo

G. Al hacer clic en Abrir H. Y aparece el texto en el rea de trabajo con una barra de desplazamiento

I.

Hacemos algunas modificaciones al scrollling 1) Establecemos el relleno a Hueco 2) Colocamos como ancho de lnea en None 3) La fuente en Arial 4) El estilo en Normal 5) Tamao: 12 Ahora duplicamos el botn VOLVER A PAG PPAL

J.

K. Desplazamos el botn hasta su lugar, como en el grfico siguiente

L. Hacemos doble clic sobre el botn duplicado, para modificar sus propiedades M. Cambiamos el texto escribiendo IMPRIMIR TEXTO

N. En la categora Actions, insertaremos la accin PrintTextFile, que nos permitir imprimir el texto del Scrolling O. Hacemos clic Insert Actions P. En la categora Printing, elegimos la accin PrintTextFile

Q. Se muestra la ventana Selecta an Article/text File, R. Elegimos el archivo de texto cocodrilo.txt

S. Hacemos clic en Abrir T. Se nos muestra la ventana de propiedades PrintTextFile, en ella podemos configurar el encabezado, el pie de pgina y podemos testear la impresin U. Hacemos clic en OK, V. Y otra vez en OK para terminar. Y finalmente probamos y luego la compilamos.