D73: Desenvolupament d'activitats educatives en l'entorn JClic

Mòdul 1: El JClic i el JClic Autor. Aspectes generals.

Pràctica 5

Aspecte i posició de les finestres

Visualment, les activitats del JClic es situen en dues finestres:

Finestra principal i finestra de joc

Tant l’una com l’altra tenen unes característiques que es poden modificar des de la pestanya Finestra. Aquesta pestanya és igual sigui quin sigui el tipus d’activitat.

També es poden fer combinacions entre les diferents possibilitats, per exemple, una imatge centrada amb un color de fons diferent del gris o amb un gradient.

Canviar les propietats de les finestres

L’objectiu d’aquesta pràctica és modificar les propietats de les dues finestres, principal i de joc, d’una activitat.

Pràctica

Poseu en marxa el JClic Autor, aneu al menú Fitxers | Obre el fitxer i trieu el projecte modul1.jclic.zip que heu treballat a les pràctiques anteriors i que es troba a la carpeta C:\Archivos de programa\JClic\projects\modul1.

Confirmeu amb Obre.

Aneu a la pestanya Activitats. A la columna de l’esquerra hi ha el llistat de totes les activitats del projecte. Seleccioneu l’activitat info que heu creat a la pràctica anterior ja que en aquest projecte és l’única que hi ha.

Selecció de l'activitat

És possible que la columna del llistat d’activitats sigui tan estreta que no permeti veure totalment els noms de les activitats. Per fer-la més ampla amb facilitat, col·loqueu el ratolí sobre el límit dret de la columna i, quan aparegui una doble fletxa, arrossegant, redimensioneu-la a l’amplada desitjada.

Feu clic sobre la pestanya Finestra. Hi trobareu les finestres tal com les crea el programa per defecte, és a dir, de color gris i amb la finestra de joc centrada a la finestra principal.

Pestanya Finestra

A l’espai central, Vista preliminar, teniu una visió prèvia de com és ara la finestra i com anirà quedant a mesura que feu les modificacions.

A la part inferior hi ha dos apartats: Finestra principal i Finestra de joc, amb les eines per modificar-les.

Comenceu modificant l’aspecte de la finestra principal, que és la que conté tots els elements de l’activitat. Modificant la finestra principal, modificareu el fons de l’activitat. Proveu les diferents opcions que teniu per a la finestra principal.

Feu clic al botó Color de fons. S’obrirà una finestra amb quatre pestanyes. Les tres primeres són per seleccionar el color. Cada pestanya correspon a una manera diferent de fer-ho: Swatches, HSB i RGB.

Totes tres us mostren, a la part inferior, com és el color que trieu en contrast amb el color negre, blanc, gris i amb text.

Podeu fer servir la que us sigui més pràctica en cada cas.

La pestanya Swatches us permet triar un dels colors que teniu a la paleta de colors, les altres dues us permeten ajustar aquest.

Selecció del color. Swatches

Amb la pestanya HSB us podeu desplaçar amb la barra vertical per triar un color bàsic i després el podeu aclarir o enfosquir movent amb el ratolí la rodoneta que hi ha dins el quadre de l’esquerra.color al vostre gust.

Selecció del color. HSB

La pestanya RGB us permet determinar la proporció de vermell, verd i blau amb què es formarà el color, bé desplaçant les fletxes a dreta i esquerra o bé introduint els números de cada color per obtenir-ne una tonalitat exacta.

Selecció del color. RGB

Feu proves amb les diferents modalitats.

La quarta pestanya de la finestra de selecció de color us permet determinar l’Opacitat del color que heu triat.

Selecció del color. Opacitat

Si moveu la fletxa cap a l’esquerra el color s’anirà fent més transparent, l’opacitat serà menor com més petit sigui el número que indica la fletxa i la casella Opacitat.

La vista prèvia de la part inferior de la finestra també us permet apreciar quin serà l’efecte produït.

La finestra principal pot tenir un color sòlid o es pot omplir amb un gradient de color.

Feu clic sobre el botó Gradient de la finestra principal. La finestra Gradient que s’obre us permet triar el color inicial i el final, els cicles i l’orientació.

Per escollir els colors feu clic primer al botó de Color inicial, trieu el color desitjat i confirmeu amb OK. Després feu el mateix amb el Color final.

El valor Cicle us indica el nombre de vegades que es repeteix el gradient sobre la superfície a omplir.

Feu proves amb diferents valors. Per canviar aquest valor moveu la fletxa de la dreta. L’efecte es veu al quadre de mostra que hi ha a l’esquerra. Si voleu un valor exacte que ja coneixeu el podeu escriure amb el teclat seleccionant prèviament el número de la casella.

El valor Orientació indica l’orientació del gradient, mesurada en graus sobre l’horitzontal. Talment com el valor anterior, es canvia bé amb la fletxa que té al costat bé escrivint el número amb el teclat; de la mateixa manera es pot veure l’efecte al quadre de mostra. Feu proves amb aquest valor.

Després de fer diferents proves deixeu els valors de la finestra principal com indica la imatge:

Gradient

Feu servir la pestanya RGB per triar els colors.

Els valors dels colors del gradient són : Color inicial: 102,101,255 Color final: 153,153,255 Aquests valors són els números que apareixen sobre els colors de la paleta de la pestanya Swatches de la finestra Selecció de color, quan passeu el ratolí per sobre, i també els valors del color a la pestanya RGB.

Valors RGB del color

Una altra opció per modificar l’aspecte de la finestra principal és posar una imatge com a fons.

Es fa des del botó Imatge, seleccioneu la imatge desitjada, que ha d’estar a la mediateca, i si en comptes de centrada la voleu fent un mosaic que ompli tot el fons de la finestra principal, marqueu la casella Mosaic. Ho fareu en pràctiques posteriors.

Comproveu el funcionament de l’activitat a la finestra de proves amb el botó Posar en marxa l'activitat per veure com queden les modificacions que heu fet.

Tanqueu la finestra de proves per poder seguir treballant amb el JClic Autor.

Ara modificareu la finestra de joc canviant el color del fons, la posició i el marge.

La finestra de joc, com la principal, pot omplir-se amb un color sòlid o amb un gradient, però a diferència d’aquesta no es pot omplir amb una imatge.

Feu clic sobre el botó Color de fons de la finestra de joc i trieu el color que té com a valor RGB: 204,255,102. Confirmeu amb OK.

Comproveu de nou el funcionament de l’activitat a la finestra de proves amb el botó Posar en marxa l'activitat.

Tanqueu la finestra de proves i torneu al JClic Autor.

Torneu a les propietats de la finestra de joc i comproveu que hi ha marcada l’opció Centrada.

Seguint amb les propietats de la finestra de joc, modifiqueu el valor del Marge a 26, i comproveu que estigui marcada l’opció Vora

Vora i marge

Comproveu el funcionament de l’activitat a la finestra de proves amb el botó Posar en marxa l'activitat.

Aquest és l’aspecte que han de tenir les finestres de l’activitat:

Resultat de les modificacions

Tanqueu la finestra de proves i deseu el projecte amb el menú Fitxers | Desa... seleccioneu modul1.jclic.zip i confirmeu amb Desa. Torneu a confirmar amb , quan us demani si voleu reemplaçar el fitxer.