Scratch

Glavna ideja:

Ideja igre izvira iz preproste popestritve kviza. Igra je izrecno izobraževalna s le peščico dodanega humorja besednih zvez. Namenjena je učencem ki so se prvič seznanili s umetno inteligenco in lahko služi tudi kot ponovitev prve učne ure umetne inteligence.
Potek igre je zelo preprost. Igra je sestavljena iz petih vprašanj in izzove igralca, da igro tudi konča s petimi pravilnimi odgovori. V kolikor igralcu to ne uspe ga izzove, da to poskusi še enkrat. 

Kot sem že zgoraj omenil, je igra namenjena igranju osnovnošolcev za ponovitev snovi. Igralec igro igra v obliki kviza tako, da odgovore zapisuje v ponujen prostorček igranja.  

Moja igra: 

Kratek opis postopka izdelave: 

Ko za igro dobite idejo, se je potrebno najprej registrirati na spletni strani http://scratch.mit.edu/, registracija na spletno stran je brezplačna. Ko ste enkrat registrirani lahko ustvarite nov projekt in začnete z izdelavo igre.

1) Glavni lik v naši igri nebo maček ampak robot zato ga je treba pod zavitkom Costumes tudi naložiti, v kolikor ste zadovoljni s mačko pa lahko za glavni lik obdržite kar njo. 

 

2)Sedaj lahko začnemo s programiranjem. Svetujem vam da si najprej pogledate katere koščke kote vam v določeni kategoriji ponuja program nato pa prvega kateri je za vsako igro isti povlečete v prostor za programiranje. Najdete ga pod zavitkom dogodki za pripisom "ko je kliknjena". 

3) Najprej naredimo uvod v kviz pod zavitkom izgled lahko v programsko območje povlečemo ukaz povej, kateri bo našega junaka spodbudil k govoru. 

4) Sedaj lahko začnemo s programiranjem, najprej pod zavitek podatki ustvarimo spremenljivko Točke, ter to spremenljivko v začetku igre postavimo na 0. Nato pa sledimo navodilom kot kaže slika. (Pozor na tej sliki sem sam v začetku igre pozabil nastaviti vrednost točk na nič)

5) V igri se lahko poigramo še s drugimi funkcijami ki nam jih ponuja program. Tako lahko igro ustvarite veliko bolj kompleksno. Moja končna koda je iz-gledala nekako takole: 

6) Ko smo s programiranjem končali ali pa tudi prej, dodamo še ozadje. ikono za dodajanje ozadja dobimo v spodnjem desnem kotu. 

Nato igro samo še shranimo in po želji tudi objavimo. Prijetno ustvarjanje igr vam želim. 

Igra v povezavi s mojo temo:

Mojo igro, v morda malo širši obliki bi uporabil za začetek predavanj o umetni inteligenci, da bi videl na kakšnem nivoju znanja so poslušalci. 

Zvok in zajem zaslona

Zvok

Imel sem nalogo ustvariti mix na temo umetne inteligence, naloga se mi je zdela precej težka saj si nisem prav točno predstavljal kako ustvariti tak posnetek. Tako sem prišel na idejo, da ustvarim neko glasbo s uporabo elektronskih in robotskih zvokov.
Na koncu sem prišel do takšnega rezultata:

Postopek Izdelave:

1) Svoj mix sem uredil s programom Audacity, program ne ponuja veliko možnosti je pa brezplačen. Najprej sem se odpravil na splet ter poiskal nekaj brezplačne glasbe ter zvočnih efektov.

2) Ko izberemo vse efekte in si zamislimo v glavi kakšen bo naš mix lahko odpremo Audacity.

3)Najprej kar naredimo je da vse posnetke dodamo v program tako da vsak posnetek zasede svoj prostor v časovnici. To naredimo tako, da ga posnetke preprosto povlečemo noter.

4)Sledi razvrščanje posnetkov. Potrebno je da posnetke postavimo po vrsti to naredimo tako da z miško kliknemo na položaj žaljenega posnetka kje naj se ta začne in na to uporabimo funkcije poravnaj sled s kazalcem poravnamo sled. to funkcijo dobimo pod zavitkom sledi. 

5) Po potrebi posnetke ki so tišji oziroma preglasni utišamo ali ojačamo to naredimo tako da označimo želen posnetek na časovnici in pod zavitkom učinki poiščemo funkcijo ojačaj. Tam določimo za koliko decibelov spremenimo jakost zvoka. 

6) Sedaj je čas da naše posnetke še nekoliko oblikujemo. Ker nočemo da se posnetek začne kar naenkrat označimo del posnetka kjer bi radi, da se glasnost postopoma zvišuje. In pot učinke kliknemo zvišuj glasnost.

Po uporabi efekta bi morali videti tudi spremembo na vaši časovnici. Kot jo lahko vidite pri meni na srednjem posnetku. 

Podobno lahko naredite za zaključek posnetka le da izberete znižuj glasnost. 

7) Lahko se poigrate še s ostalimi funkcijami programa, pomembno pa je da ne pretiravate. Končna slika mojega mixa je iz-gledala nekako takole: 

Priti zna tudi prav če trakove zožate tako da vidite vse na enkrat. 

Vso srečo pri izdelovanju vašega posnetka. 

Zajem zaslona:

Sam sem z zajemom zaslona predstavil izdelavo animiranega miselnega vzorca na mojo temo, predstavil sem tudi umetno inteligenco oziroma njene zametke kot jih poznamo danes ter kolikor je bilo mogoče tudi program katerega uporabljam za zajem zaslona.
Moj video si lahko tu tudi ogledate:

Rezultat prvega dela posnetka:

Zajem zaslona s pomočjo programa CamStudio

CamStudio se mi zdi eden najosnovnejši in ob enem tudi preprostejši programov za zajem zaslona. Brezplačno si ga lahko vsak prenesete na naslovu: http://camstudio.org/. Res ne ponuja veliko funkcij ampak ob enem pa tudi vse kar bi moral klasičen program za zajem zaslona. Studio nam sicer ne omogoča obdelave posnetka kar se mi po eni strani zdi prednost sploh za vse tiste, ki potem posnetke radi nekoliko bol profesionalno obdelamo v programski opremi namenjeni izključno obdelovanju video vsebin. Primer kasnejše obdelave zajema zaslona si lahko ogledate v kakšnem od mojih prvih tutorialih, kasneje obdelavi nisem več posvečal toliko časa zaradi preprostega razloga: čas.
Ko CamStudio uspešno prenesemo in ga zaženemo se nam odpre okno: 

Sedaj bi praktično že lahko pritisnili rdeč gumb in začeli s snemanjem. Seveda lahko pa prej spremenimo nekaj nastavitev kot je naprimer območje snemanja.

Območje snemanja lahko omejimo na nek delček ki bo sledil miški, na nek fiksen delček na neko pojavno okno ali pa na celoten ekran. 

Pod dodatne opcije lahko spreminjamo tudi funkcijo zvoka. Izbiramo lahko med snemanjem brez zvoka med snemanjem računalniškega zvoka ali zvoka ki ga ujame naš mikrofon. 

Seveda lahko zvok prilagodimo še po jakosti,... Program ima poleg video opcij k katerim se bomo še vrnili tudi druge super dodatke, kot naprimer avtomatsko ustavljanje snemanja po določenem času, snemanje s pomočjo fleša itd. 

Na zgornji sliki pa so prikazane video opcije programa. Katere je dobro prilagoditi zmogljivostim našega računalnika, saj v kolikor nastavimo kvaliteto previsoko bo računalnik močno upočasnil delovanje. 

Program pa žal nima le dobrih lastnosti temveč tudi slabe, izpostavil bi predvsem to da po določenem času (odvisno od velikosti pomnilnika oziroma predpomnilnika računalnika), neha delovati in se sesuje, oziroma nam po končanem posnetku ne shrani posnetka, kar zna biti za uporabnike, ki svoj zaslon snemajo po več kot 20min velika pomanjkljivost.  

Video

Moj video posnetek obdelan v programu SonyVegas pro 11:

Video v šoli  je lahko zelo uporaben. Lažje si zapomnimo stvari, ki jih tudi vidimo. Učencem, bi tako lahko snov najprej razložili, potem pa jim pokazali še kakšen videoposnetek in s tem poglobili njihovo znanje. Dobro bi bilo tudi, če bi se učne ure snemale. Tako bi učenci, ki so takrat manjkali zlahka predelali vso zamujeno snov in starši bi lažje nadzorovali, kaj njihovi otroci počnejo v šoli ter kaj se sploh učijo. Snemali bi lahko tudi šolsko informativno oddajo in vsak mesec izdali film, v katerem bi obeležili vse novosti na šoli in njeni bližnji okolici.

Menimo, da bi se učenci pri pouku računalništva morali naučiti posneti in obdelati posnetek vsaj z uporabo osnovnih funkcij programov za obdelavo videoposnetkov. Seznaniti bi jih bilo potrebno z dejstvom, da morajo dobro premisliti, kakšne posnetke bodo objavili na internetu, saj bodo ti tam ostali za vedno.  

Obdelava:

S pomočjo spodnjega video tutorijala se lahko še sami naučite ustvariti podoben malo majn kompleksen video kot je moj objavljen zgoraj. 

Spletna stran

Mojo spletno stran si lahko ogledate na povezavi: klik. 

V šoli:

Sam sem menja, da si vsak osnovnošolec zasluži priložnost izdelati spletno stran. Spletna stran je nekaj kar ostane in nad čimer imaš nadzor. Sam odgovarjaš za vse posledice v povezavi s spletno stranjo in nihče drug je ne-more spreminjati ali kaj objavljati na nji brez tvojega gesla in uporabniškega imena. Zato je pomebno, da otroke naučimo že v osnovni šoli kašno odgovornost nosi lastna spletna stran, kako jo objaviti na spletu, kako jo posodabljati,...
Pri pouku bi sam spletne strani uporabljal predvsem za stik s starši. Tak način komunikacije se mi zdi zelo praktičen in ga tudi sam že kar nekaj časa uporabljam, sam sem skrbnik spletne strani http://drustvo-vozel.com/, kjer tudi neposredno kot voditelj bobnarskega kroška komuniciram s starši. http://drustvo-vozel.com/tecaj-bobnanja/, ker sem tudi glavni administrator strani, sem zavitek, kjer je mogoče dobiti informacije o našem tečaju uredil tako, da so komentarji vidni le meni ter staršem otrok kateri obiskujejo krožek.
S otroci bi v šoli najprej izdelal spletno stran, na neko temo, ki je njim všeč. Ob tem bi jih opozarjal na avtorske pravice, ter jih neprestano opominjal, da bo spletna stran javna in tako vidna vsem. S tem bi jih poskušal opomniti naj pazijo o čem bodo pisali in da ne bodo ob tem koga žalili.

Izdelava:

Spletna stran je bila izdelana v beležki, izdelavo vam bom predstavil kar s komentirano kodo domače strani. 

Index: 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" title="screen stylesheet" type="text/css" media="screen" href="style.css" /> sklicevanje na datoteko style

</head>

<body>

<div id="contain">

<div class="title">    Naslov strani

Dobrodošli

</div>

<div class="menu">

<a href="index.html">Domov</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="link1.html">o umetni inteligenci</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="link2.html#">video</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="link3.html#">povezave</a> Linki do pod-strani

</div>

<div class="bouquet">

<div class="hollyhack">

<h3>Namen strani</h3> Podnaslov

Spletna stran predstavlja temo... <br /> besedilo na strani

<br /> 

<h3>O strani</h3> Podnaslov

Stran je bila ustvarjena s....  besedilo na strani

<br> zamik v novo vrstico

</div>

</div>

<div class="footer">   Noga strani 

 © Matija Čufer 2013   Napis v nogi

</div>

</div>

</body>

</html>

Več o izdelavi spletne strani se lahko najde na spletu, tudi sam sem si z njim pomagal glede ukazov pri izdelavi. Zato sem si kljub možnosti izgube nekaj točk tudi odločil da o sami izdelavi strani nebom govoril oziroma pisal kaj več. Na tej povezavi: http://shrani.si/f/3/n6/17PLOcq/15.png, http://shrani.si/f/2C/BT/4dE28zVX/16.png lahko tudi najdete vsebino .css datoteke katera je zaščitena saj ne želim preveč poenostaviti kraje le te. 

Kot nasvet pri izdelavi strani pa priporočam vsem da za ozadje uporabljajo že prej pripravljene slike saj s pomočjo dobrega ozadja oziroma teme spletna stran v trenutku izgled veliko lepše. 

Animacija in miselni vzorec

~ miselni vzorec ~ 

Miselni vzorec je zelo priročna stvar, učenci se veliko krat zatečejo k njim za lažje učenje, ponavljanje in utrjevanje snovi. Z sledenjem spodnjim korakom vam bom pokazal kako se naredi preprosti miselni vzorec kar preko spleta in sicer preko spletne strani: https://bubbl.us/.
1) Za pričetek izdelave kliknete na gumb Start Brainstorming.

2) In že smo začeli, v prosto mesto sedaj vpišete naslov vašega miselnega vzorca. Za tvorbo novih "pod oblačkov" kliknete na sredino spodnjega roba "glavnega oblačka". 

3) Če položite miško na novo nastali oblaček  ga lahko oblikujete s klikom nanj pa dodate v njega besedilo, tvorjenje novih oblačkov poteka enako kot pri drugem koraku. 

4) S klikom na povezavo med oblačkoma lahko dodate "povezovalni" tekst. 

5) Ko končate z urejanjem miselnega vzorca, ga lahko shranite na sami spletni strani, ali pa ga izvozite in shranite na namizje. 

6) izbirate lahko med dvema formatoma. In sicer med  JPG ter PNG jaz vam priporočam PNG, v kolikor pa imate sliko namen pošiljati ali nalagati na splet izberite JPG. 

Prišli ste do konca vaš miselni vzorec je sedaj shranjen na vašem računalniku. 

Kot slabost spletne strani https://bubbl.us/ bi omenil to, da v miselni vzorec ne moreš dodajati slik. Kar pa zna biti kar velika pomanjkljivost. 

Sam sem naredil miselni vzorec na temo umetne inteligence, v njem sem povzel vsa bistva te teme. V šoli bi ga porabil tako, da bi ga dal učencem kot pomoč za ponavljanje učne snovi, z njim bi lahko previjali znanje, zase vem, da sem bil vedno vesele ko nam je profesor podal na koncu neke učne snovi povzetek le te, če je bil povzetek v obliki miselnega vzorca je bilo pa še toliko bolje. 

 Moj miselni vzorec o umetni inteligenci: 

~ Animacija ~ 

Za izdelavo animacije obstaja zares veliko programske opreme, na voljo nam je zastonjska programska oprema, spletne strani, katere omogočajo urejanje animacije kar prek spleta ter plačljiva in tudi bolj profesionalna  programska oprema.

Sam sem izbral program PhotoScape, saj se mi zdi da je kar najbolj enostaven za uporabo, pa tudi ponuja nekaj osnovnih funkcij za urejanje same animacije. Program je tudi brezplačen, kar je en velik plus sploh za slovensko šolstvo.

Sam program ne ponuja le obdelave animacij ampak ima tudi druge opcije. Ko ga odpremo izgled
 takole:  

Za izdelavo animacije kliknemo na ikono Animated GIF. Pojavi se nam spodnje okno, kar je tudi naša delavna površina: 

Kar sedaj sledi je le to, da v sivi prostor spustimo naše prej pripravljene fotografije in animacija je praktično že narejena. Lahko pa jo še malo uredimo s tem da s klikom na gumb Change time spremenimo "trajanje" prikaza vseh ali le določenih sličic, spremenimo lahko tudi efekte prehodov med samimi slikami, velikost slik itd... Ko smo z animacijo zadovoljni le še pritisnemo gumb Save in naša animacija je pripravljena. 

Animacija, ki sem jo sam naredil na temo umetne inteligence: 

Kako bi uporabili animacijo v šolstvu?

Animacija nam lahko v šolstvu pride zelo prav, meni pride na misel najprej uporaba animacije pri poku fizike, ko se neke akcije izvršujejo ena za drugo v krožnem zaporedju. Pri takih situacijah bi snov oziroma nek postopek veliko bolj nazorno pokazali učencem.

slikovne datoteke

 ~ vektorska grafika ~ 

Ste si kdaj zaželeli sliko, ki bi jo lahko zumirali v neskončnost in ta se nebi popačila? Prav o tem vas bom poučil v moji prvi objavi, sicer ne bomo uredili fotografije slikane s fotoaparatom, ampak se bomo na roke narisan logotip naučili pretvoriti v vektorsko grafiko.
V spodnjem videu si lahko pogledate "tutorial" o izdelavi logotipa:

Kako bi lahko sliko ki sem jo izdelal uporabil pri pouku? 
Možnosti je seveda več, prva je že razvidna iz same slike. Ko bi v šoli prvič obravnavali temo umetne inteligence, bi s pomočjo te slike lahko ugotavljali kaj to sploh je, saj slika nazorno kaže robota ki zna sam sebe poučevati. Ob tem verjamem da bi učenci sami prišli kar blizu "definiciji" umetne inteligence. Drugo možnost sem pa deloma razkril že v zgornjem posnetku. Po sliki so skrita dejstva o umetni inteligenci, otroci bi se ob iskanju dejstev zabavali hkrati pa tudi učili, da bi stvar bila še bolj napeta bi lahko razdelil razred v dve skupini kjer bi otroci tekmovali med seboj, še za večjo napetost bi dejstva točkovali po pomembnosti pridobljenih informacij. Po sliki pa so skrite tudi šale in druga dejstva, kar bi otoke prisililo k dodatnemu razmišljanju kaj spada k umetni inteligenci in kaj ne.
Skenirana slika:

Povezava do predelane fotografije (Blogger ne podpira .svg datotek):  https://dl.dropbox.com/u/59378709/img005.svg.2013_03_13_19_36_16.0.svg

~ rastrska slika ~

Tokrat se skupaj naučimo kako se s pomočjo programa Photoupz odstranjuje predmete s slik in kako se sliko obdela ter dve sliki združi v GIMP-u 2.
Sam sem se odločil da bom s spodnje slike najprej odstranil konje.
prej:

potem: 

Nato sem sliko brez konjev združil s spodnjo ter jima rahlo spremenil kontraste. 

Slika robota:

V spodnjem videu si lahko tudi pogledate postopek obdelave slik: 

Spodaj pa objavljam še končan izdelek: 

Dolžan sem vam še odgovoriti na vprašanje kako bi zgornjo sliko lahko uporabil pri pouku? 

Kot tudi pri zgornji sliki je možnosti slike uporabiti pri pouku več. Ena izmed možnosti je že sama po sebi zelo očitna. Sliko bi lahko uporabili pri razlaganju snovi o umetni inteligenci v predstaviti in pi na njej opazovali katere ne-robotske značilnosti ima robot na sliki. Druga možnost pa bi se bolj navezovala na rek vele-uma Alberta Einsteina. S otroci bi se pogovorili in poiskali dobre in slabe lastnosti razvoja umetne inteligence. Sliko bi lahko tako uporabili kot centralno sliko miselnega vzorca.