VISOKOŠOLSKI STROKOVNI ŠTUDIJ Informatika in tehnologije komuniciranja Smer: Sistemska podpora informatiki in tehnologijam komuniciranja POROČILO PRAKTIČNEGA IZOBRAŽEVANJA V Elektro in računalniški šoli Velenje Čas opravljanja: od 15.3.2013 do 25.5.2013 Mentor: Islam Mušić Študent: Matija Logar Vpisna številak: E1030235 E-pošta: matija.logar@gmail.com Telefon: 031/290-129 1
2
3
KAZALO VSEBINE 1. Uvod... 6 2. Opis gospodarske družbe... 6 2.1 Predstavitev šole... 7 2.2 Zgodovina... 7 3. Opis praktičnega izobraževanja... 8 3.1 Povzetek praktičnega izobraževanja... 8 3.2 Računalniški program COMBO... 9 3.3 Izdelava aplikacije... 12 4. Sklep... 18 4
KAZALO SLIK Slika 1: Logotip ERŠ... 6 Slika 2: COMBO tipkovnica... 9 Slika 3: Zgradba aplikacije... 10 Slika 4: Glavni meni... 11 Slika 5: Podmeni Orientacija... 11 Slika 6: Mini-igra Izbor prave tipke... 12 Slika 7: Prazno okno Glavni meni... 13 Slika 8: Gumb Celota in deli... 13 Slika 9: Dodajanje reference... 14 Slika 10: Dodajanje refernce mini-igre... 14 Slika 11: Dodajanje slik v Resources... 16 Slika 12: Navodila mini-igre Balon... 17 5
1. Uvod Delo na ERŠ Velenje sem dobil preko bivšega učitelja na šoli, katero sem tudi sam obiskoval. Delal sem na projektu COMBO, posebej prirejeni tipkovnici za otroke s posebnimi potrebami. Cilj je bil izdelati celoten projekt in vse skupaj narediti tako, da bodo učitelji ta sistem lahko uporabljali kot pomoč pri izdelovanju nalog za dijake pri programerskih predmetih v šoli. Delati sem začel 25.3., ko sem se dobil s svojim mentorjem in s prof. Zevnikom, ki je že prej delal na tem projektu. Oba sta bila tudi moja učitelja, ko sem še sam obiskoval srednjo šolo. Ko smo se dogovorili glede dela, sem dobil nekaj pripravljenih mini-igric, katere sem moral popraviti in glede na dokumentacijo projekta izdelati glavne menije ter podmenije in ustrezno implementirati ostale mini-igre. Približno vsakih 14 dni smo se tudi vsi trije sestali in pregledali moje delo ter se dogovorili za naslednji sestanek. Večino dela sem opravljal doma, za morebitne težave in vprašanja pa sem se obrnil na mentorja in nastale težave sva rešila skupaj. Delo se mi je zdelo zelo primerno za mojo smer na fakulteti, saj smo tam vsa 3 leta programirali v programskem jeziku C#, v katerem je tudi projekt napisan. 2. Opis gospodarske družbe Slika 1: Logotip ERŠ 6
2.1 Predstavitev šole Na elektro in računalniški šoli v Velenju se izobražuje 439 dijakov v srednješolskih programih s področij elektrotehnike, mehatronike, računalništva in telekomunikacij. Pouk poteka v dopoldanskem času med 8:00 in 14:35. Praktični pouk se odvija v specializiranih učilnicah in delavnicah v šoli ter v prostorih Medpodjetniškega izobraževalnega centra Velenje. Dijaki, vpisani v program tehnik računalništva, v okviru obveznih modulov pridobijo znanja iz naslednjih področij: računalniška pismenost, medosebna komunikacija in poslovanje, postavitev in vzdrževanje računalniških sistemov in omrežij, programiranje spletnih aplikacij in avtomatizacija proizvodnih procesov, informacijski sistemi in podatkovne baze. Z izbiro ustreznih izbirnih modulov dijak v nadaljevanju šolanja izbere eno izmed specializacij, v kateri pridobi poglobljena znanja iz naštetih področij: Koder/koderka algoritmov Skrbnik/skrbnica informacijskih sistemov Skrbnik/skrbnica komunikacijskih sistemov Izdelovalec/izdelovalka spletnih strani 2.2 Zgodovina Začetek izobraževanja elektrikarjev leta 1958 jaki tok, za potrebe Rudnika lignita Velenje Med prvimi v državi začetek izvajanja izobraževanja računalniškega tehnika, leta 1981. Pri tem sta najpomembnejšo sodelovalno vlogo opravila Gorenje in takratni Rudarski šolski center. Prvi računalnik na šoli je bil leta 1981 SINCLAIR ZX 81. Leta 1987 so imeli že 16 Apple računalnikov, ki ji je priskrbelo Gorenje, do leta 2008 pa je bilo po celotnem Centru okoli 1000 računalnikov. Šola se ukvarja tudi s številnimi inovacijskimi projekti, računalniškim opismenjevanjem za šole in podjetja ter izdelavo e-gradiv po lastno razvitem konceptu. 7
Vedno več sodelujejo z domačimi in tujimi partnerji od držav EU do držav bivše Jugoslavije. V letih 2006 in 2007 so koordinirali prenovo srednješolskih programov, ki jih programsko izvajajo tudi na ERŠ. Vključili so vse slovenske elektro in računalniške šole ter preko 30 podjetij. V šolskem letu 2010/2011 so zaključevali energetski poligon za obnovljive vire na MIC-u. Ta poligon predstavlja za poklice na šoli trenutno najsodobnejšo opremo za fotovoltaiko, toplotne črpalke in inteligentne inštalacije. 3. Opis praktičnega izobraževanja 3.1 Povzetek praktičnega izobraževanja Praktično izobraževanje obsega 450 ur dela, od tega jih je 360 namenjenih delu, 90 pa jih je namenjenih pisanju poročila. Z delom sem začel, kot sem že omenil 25.3., končal pa 25.5., vendar bom na projektu verjetno delal še naprej. Na uvodnem sestanku sta mi mentor in prof. Zevnik predstavila COMBO tipkovnico, njeno delovanje ter mi povedala, kaj pričakujeta od mene. Na USB-ključku sta mi dala do sedaj izdelane mini-igre in dokumentacijo, katero bom uporabil kot navodila za izdelavo projekta. Dogovorili smo se, da se bomo približno vsakih 14 dni dobili na sestanku in pregledali, kaj sem do takrat naredil. Vso delo sem opravljal v orodju Microsoft Visual Studio 2010, ki sem si ga namestil na osebni računalnik. V dokumentaciji je okrog 40 mini-iger, ki jih je potrebno izdelati. Nekaj sem jih seveda izdelal, a vseh ne, saj sem moral najprej poskrbeti za neko smiselno celoto, ogrodje (v tem primeru glavni meni in podmenije), kamor se lahko te mini-igre dodajajo. Mini-igre, ki jih nisem izdelal, bodo izdelali učenci šole pri vajah pri različnih programerskih predmetih in jih ustrezno dodali v ogrodje in razporedili po menijih. Največ dela mi je prvih 14 dni vzelo to, da sem prebral vso dokumentacijo in razumel, kaj vse je potrebno v sklopu projekta narediti. Nadaljeval sem s popravljanjem že napisanih mini-iger. V naslednjih 2 tednih sem začel izdelovati menije in podmenije aplikacije ter vse skupaj povezovati. Po razmisleku, kako bi vse dele povezal med seboj, sem se odločil, da jih bom med seboj»referenciral«. To pomeni, da bom na glavni meni dodal reference podmenijev, da se bodo le-ti s pritiskom na ustrezni gumb odprli (več o tem v naslednjem poglavju). Med tem 8
časom sem veliko ur porabil tudi pri iskanju in urejanju primernih slik, ki bodo prikazane v aplikaciji. V zadnjem mesecu sem dobil nalogo, da mora celotna aplikacija delovati v celozaslonskem načinu. Poleg tega sem moral ustrezno popravljati dokumentacijo in na koncu izdelati še navodila, s katerimi bo lahko moj mentor ustrezno nadaljeval z razvojem projekta, na katerem sem delal. Lahko rečem, da mi je pri vsem največ časa vzelo branje in razumevanje dokumentacije. Sam mislim, da sem jo razumel dobro, saj je bilo od tega odvisno, kako bo končni izdelek izgledal. Večjih težav s programskim orodjem Visual Studio 2010 nisem imel, saj sem ga uporabljal že prej, moral pa sem se naučiti nekaj novih trikov in tehnologij, s katerimi se lahko programira in upam, da mi bo to koristilo pri mojem nadaljnjem delu. 3.2 Računalniški program COMBO COMBO ali posebna tipkovnica, je tipkovnica namenjena različnim uporabnikom: otrokom, ki prvič pridejo v stik z računalnikom, ali pa otrokom z določenimi motnjami oz. posebnimi potrebami. Tipkovnica je sestavljena iz naslednjih gumbov: dol, gor, desno, levo,»janezek«, rdeča tipka. Pri izdelovanju projekta te tipkovnice nisem imel pri sebi, saj delujejo gumbi na njej tako kot pri navadni računalniški tipkovnici: levo=smerna tipka levo, desno=smerna tipka desno, gor=smerna tipka gor, dol=smerna tipka dol,»janezek«=enter, rdeča tipka=escape. Aplikacija je namenjena otrokom s posebnimi potrebami na Centru za vzgojo, izobraževanje in usposabljanje Velenje. Slika 2: COMBO tipkovnica 9
Kot sem že prej omenil, je program sestavljen iz glavnega menija, podmenijev in mini-iger: Slika 3: Zgradba aplikacije 10
Slika 4: Glavni meni Slika 5: Podmeni Orientacija 11
Slika 6: Mini-igra Izbor prave tipke 3.3 Izdelava aplikacije Začetek dokumentacija, popravljanje mini-iger, izdelovanje menijev Delo sem začel, ko sem odprl dokumentacijo, ki sem jo dobil natisnjeno in v digitalni obliki. Iz dokumenta sem na grobo izbral naslednje stvari, ki morajo biti narejene pri glavnem meniju, vsakem podmeniju in vsaki mini-igri. To so: izbiranje gumbov s smernimi tipkami, potrditev z gumbom»janezek«in izhod iz igre/podmenija s kombinacijo tipk rdeča tipka in»janezek«. Dobil sem tudi informacijo, kako mora aplikacija vizualno izgledati in začel sem izdelovati glavni meni v orodju Visual Studio 2010. Pred tem sem si na list tudi sam narisal približen izgled aplikacije. Ko je bilo osnovno okno aplikacije izdelano, sem se lotil dodajanja gradnikov (gumbov in besedila). 12
Slika 7: Prazno okno Glavni meni Sledilo je oblikovanje gumbov in iskanje primernih slik, ki bodo prikazane na oknu. Večino slik sem našel na internetu, nekaj pridobljenih slik pa sem tudi s pomočjo programov za grafično oblikovanje popravil, tako da so ustrezale slikam v dokumentaciji. Slika 8: Gumb Celota in deli 13
Meniji in povezave med njimi Ko sem izdelal zahtevane podmenije, sem moral razmisliti, kako jih bo najlažje povezati med seboj. Odločil sem se za reference med njimi. Vse podmenije sem uvozil v glavni projekt, ki se v mojem primeru imenuje Glavni_meni_COMBO. Nato sem v ta glavni projekt dodal reference na vse ostale ti.»podprojekte«ali podmenije v našem primeru ter jih z ustrezno programsko kodo glede na pritisk gumba tudi odpiral. Verjetno obstaja še več rešitev za ta problem, vendar sem izbral to, ker se mi je zdela najbolj smiselna in najbolj preprosta. Slika 9: Dodajanje reference Enako sem storil tudi z dodajanjem mini-iger v podmenije. Ko je bila mini-igra končana in z orodjem Visual Studio 2010 prevedena, sem jo dodal v podmeni na podoben način kot je opisan zgoraj: ko sem dodajal referenco, sem preprosto izbral izvrišlno (.exe) datoteko od mini-igre. Slika 10: Dodajanje refernce mini-igre 14
Celozaslonsko delovanje, popravljanje mini-iger, ostalo V zadnjem mesecu dela sem se večinoma ukvarjal z delovanjem aplikacije v celozaslonskem načinu, popravljanju že prej izdelanih mini-iger, popravljanju dokumentacije in izdelovanju navodil za uporabo COMBO računalniškega programa. Z mentorjem in prof. Zevnikom smo na sestanku prišli do zaključka, da je smiselno, da aplikacija teče v celozaslonskem načinu. To smo se odločili zaradi tega, da bodo gumbi in napisi bolje vidni in bolj jasni za otroke s posebnimi potrebami. To je pomenilo spreminjanje vseh podmenijev in mini-iger ter optimizacija gradnikov, tako da bodo vidni na zaslonih različnih ločljivosti. Na začetku sem imel nekaj težav, saj nisem našel primernega trika, kako bi aplikacije zaganjal v celozaslonskem načinu. Nato sem s pomočjo nekaj vodičev prišel do zaključka, da bom gradnike na oknu aplikacije»zasidral«na sredino. To je pomenilo, da se gumbi in ostali gradniki v primeru spreminjanja velikosti okna ne bodo premikali, prav tako se ne bo spreminjala njihova velikost. Celozaslonsko delovanje sem izvedel tako, da sem ob zagonu vsakega podmenija ali mini-igre zagnal naslednjo kodo: Width = Screen.PrimaryScreen.WorkingArea.Width; Height = Screen.PrimaryScreen.WorkingArea.Height; this.maximizebox = false; this.backcolor = System.Drawing.Color.White; Ta koda določi širino in višino vsakega okna aplikacije glede na ločljivost zaslona, kjer aplikacija teče. Spreminjanje velikosti okna pa sem onemogočil. Ker sem vse podmenije in mini-igre povezal preko referenc, je bilo za delovanje celotne aplikacije imeti samo izvrišlne (.exe) datoteke. Ampak nekaj iger je bilo že napisanih na način, da je slike (za gumbe, za ostale gradnike) aplikacija»črpala«iz določene lokacije na trdem disku. To bi pomenilo, da ko bi bil projekt končan, da bi moral podjetju posredovati vse izvršilne datoteke, zraven pa še vse slike. To sem preprosto popravil tako, da sem slike dodal v Resources mapo projekta. Tako so se slike med prevajanjem programa»zapisale«v izvršilno datoteko in problem je bil rešen. 15
Slika 11: Dodajanje slik v Resources Naslednja stvar, ki sem se jo lotil bolj proti koncu je zahteva iz dokumentacije, da je izhod vseh menijev, podmenijev in mini-iger s kombinacijo tipk rdeča tipka in»janezek«. Tudi to mi je vzelo precej časa in iskanja rešitev po internetu, a na koncu sem se je moral domisliti sam. Ob zagonu bodisi kakšnega od menijev bodisi mini-iger, sem preko»dogodkov«v Visual Studio 2010 preverjal kateri gumb je stisnjen in kateri je spuščen. V orodju obstajata»dogodka«key_up (kar pomeni da je gumb spuščen) in Key_Down (kar pomeni, da je gumb pritisnjen). Tako sem s pomočjo dveh spremenljivk spremljal gumba ESCAPE (rdeča tipka) in ENTER (»Janezek«) in ko je program izvedel, da sta oba naenkrat pritisnjena, se je okno zaprlo. Delovanje prikazuje naslednji del programske kode: private void FormAvto_KeyDown(object sender, KeyEventArgs e) { if (e.keycode == Keys.Escape) //Če sta pritisnjena ESCAPE IN ENTER, se mora program zapreti... { alfa = 1; } if (alfa==1 && e.keycode == Keys.Enter) { beta = 1; } } if (alfa == 1 && beta == 1) { this.close(); //Zapiranje forme. } private void FormAvto_KeyUp(object sender, KeyEventArgs e) { alfa = 0; //Če je gumb spuščen, si zapomni... beta = 0; } 16
Mini-igre v sklopu projekta V sklopu projekta je bilo potrebno izdelati tudi nekaj osnovnih mini-iger, ki se zaženejo iz podmenijev glavnega programa. Te mini-igre so razložene v dokumentaciji, kjer je tudi prikazano kako mora glavno okno mini-igre izgledati. V primeru da npr. nisem našel primerne slike za ozadje programa, sem poiskal drugačno sliko in temu primerno priredil dokumentacijo. Nekaj izmed teh mini-iger je lažjih za izdelavo, za ostale pa sem porabil malo več časa. Največ dela sem imel z mini-igro, imenovano Balon. Navodila so naslednja: Slika 12: Navodila mini-igre Balon Glavna težava igre je bila, da je zaradi različne resolucije na različnih računalniških monitorjih bilo težko izvedeti, kdaj je balon na cilju (oz. kdaj slika balona pride v koordinate, kjer se nahaja otok). Težavo sem rešil na naslednji način: medtem, ko sem preverjal, če je balon na cilju, sem dinamično dobival resolucijo zaslona. Nato sem izračunal koliko je otok (velikost slike otoka po širini in višini) oddaljena od roba zaslona. Tako sem lahko izvedel v katere koordinate mora slika balona priti, da je igre konec. Delovanje ponazarja naslednja koda: if (x1 >= Screen.PrimaryScreen.WorkingArea.Width - pictureboxcilj.size.width && y1 >= Screen.PrimaryScreen.WorkingArea.Height - pictureboxcilj.size.height)//preveri, če je "Janez" že v cilju. { konec = true; //MessageBox.Show("USPELO TI JE!"); Slika novaforma = new Slika(); novaforma.show(); } 17
Zaključek Ob zaključku dela sem izdelal še krajša navodila za uporabo mojega projekta v prihodnosti. Poleg tega sva z mentorjem preko Dropbox-a testirala delovanje in posodabljanje z uporabo»oblaka«. To je mentorju omogočilo, da je videl in preizskusil vse moje posodobitve aplikacije skoraj v istem trenutku, kot sem jo jaz popravil. To se nama je zdelo zelo primerno za uporabo na Centru za vzgojo, izobraževanje in usposabljanje Velenje, kjer se jim bo aplikacija ves čas posodabljala preko storitve računalništva v oblaku, torej z uporabo orodja Dropbox. Povezava do aplikacije se nahaja TUKAJ. 4. Sklep Opravljanje praktičnega izobraževanja je bila odlična izkušnja, ki mi bo v prihodnosti zelo koristila. Naučil sem se resnega dela z Visual Studiem 2010 in uporabe vsega znanja, pridobljenega v času šolanja na FERI Maribor. Spoznal sem nove stvari in nove probleme, ki sem jih moral reševati sam. Ob tej priložnosti bi se zahvalil Elektro in računalniški šoli Velenje za priložnost, ki sem jo dobil. Zahvalil bi se tudi mojemu mentorju in pomočniku, ki sta mi ves čas stala ob strani in mi pomagala pri delu. 18