IV0110 2 töö 2012 aasta variant

Järgmise lingi alt saad vaadata vana 2011 aasta varianti.

NB! See on vana, arhiveeritud praktikumiülesanne, mis ei ole enam ette nähtud tegemiseks!

Otsi üles uus, hetkel kehtiv variant ülesandest.

Mida tuleb teha

Sinu ülesandeks on kirjutada puhtalt brauseris jooksev Memory mäng ühele mängijale, kasutades ainult htmli, javascripti ja css-i. Reeglid ja huvitavat lisainfot leiad wikipedia artiklist. Huvi korral tasub lugeda magistritööd kahe inimese memory mängu optimaalsest strateegiast (ei ole praksi tegemiseks oluline ega abistav).

Selles praksis teed ühe inimese variandi Memoryst, aga kolmandas praktikumis tuleb teha sama mäng kahe inimese vahel, mis toimub siis serverirakenduse vahendusel.

Mängu näidetena võid kasutada classicmemorygame või pexeso või wineverygame variante. Näited mängivad sisuliselt samal põhimõttel, nagu sinu mäng, aga nende näidete kujundust ei ole mõistlik otse eeskujuks võtta, samuti on allpool toodud konkreetsed nõuded, mida need näitemängud ei järgi.

Mäng ise tuleb realiseerida järgmisel viisil (ehk, täpselt need asjad tuleb teha,ning kui mäng töötab, aga mõned vähemkriitilised asjad puudu, saad ikkagi arvestatud, lihtsalt saad veidi vähem punkte). Mistahes toredad lisandused on lubatud. Reeglid ja nõuded siis siin:

• Kaartideks on N mängukaarti, kus on N on 16 või 26 või 52. Alguses peab saama valida, mis variandi võtad, samuti, mismoodi samasust arvestatakse.
• Kasutajal peab alati olema näha nupp "Alusta uut mängu", millele vajutades algabki uus mäng.
• Algul kuvatakse ekraanile hulk kaarte ruudu või ristkülikuna, kõik tagurpidi. Kaardid peab sinu programm iga mängu eel ära segama, st juhuslikku järjekorda panema.
• Vajutad hiirega ühele kaardile ja sulle näidatakse, mis kaart on (kaart pööratakse ringi).
• Vajutad hiirega teisele kaardile, ja sulle näidatakse, mis kaart on (kaart pööratakse ringi).
• Kui mõlemad kaardid olid samasugused, siis eemaldatakse nad laualt (nende asemele jääb tühi taust) ja sa saad valida uued kaks kaarti.
• Kui kaardid olid erinevad, siis saad miinuspunkti ja kaardid pööratakse uuesti tagurpidi.
• "Samadeks kaartideks" arvestamise variante on kaks. Alguses peab saama valida, kumba mängida:
  • samadeks loetakse kaarte sõltumata mastist ja värvist (risti 5 ja ruutu 5 on samad kaardid)
  • samadeks loetakse kaarte, mis on sama sorti ja sama värvi (risti 5 ja pada 5 on mustad, seega samad kaardid)
• Kui kõik kaardid lõpuks avatud, siis kuva mängijale eraldi selgelt välja tulemus (punktid ja kulunud aeg), salvesta mõlemad ja lase tal uut mängu alustada.
• Mängija peab soovi korral alati saama vaadata (kas kuvatakse alati pika ribana välja või avatakse nupule vajutades popup vms), mis ta senised skoorid on: esimese mängu punktid ja aeg, teise mängu punktid ja aeg jne.
• Kui ehitad punktide ja aja järjestikuste skooride näitamiseks graafiku, saad lisapunkte (see ei ole kohustuslik teha). Seejuures on soovitav kasutada flotcharts teeki (eeldab jquery kasutamist), kui eriti mugavat ja kena tasuta teeki.

Mängija eesmärgiks on saada võimalikult vähe miinuspunkte ja/või tühjendada laud võimalikult kiiresti.

Kaartidena võid kasutada näiteks neid suuri pildifaile, mida ei tasu tükkideks lõigata, vaid kuvada iga kaart kui väike osa pildifailist (seda saab teha css-ga). Ei ole keelatud ka teistsuguste kaardipiltide kasutamine, mh on mitmeid projekte, kus kaardipildid on joonistatud puhtalt css-ga.

Arvesta, et sõltumatult keerukusvariandist peab kaardipakk olema selline, et samadeks loetavaid kaarte on pakis igat ainult üks paar. Näiteks, kui samadeks loetakse kaarte sõltumata mastist ja värvist, siis ei saa kasutada 52-st pakki, vaid ainult 26-st pakki või väiksemat. Kui samadeks loetakse kaarte, mis on sama sorti ja värvi, saab kasutada 52-st pakki.

Info paigutus ekraanil peab olema stabiilne, tekst/kaardid ei tohi hüpata vahel ühte, vahel teise kohta. Leht peab olema selge, arusaadava ja kena disainiga, mõttetut/segast infot ja arusaamist raskendavaid kujunduselemente ära kasuta. Arvesta kindlasti selle juhendi soovitustega.

Tee programm kõigepealt valmis oma arvutis ja seejärel riputa kogu materjal - html, css, javascript ja pildid - serverisse. TTÜ serveri (dijkstra) ligipääsu- ja kasutamisõpetust loe altpoolt. Soovi korral võid kasutada ka mõnda muud serverit, kuid siis pead saama seal järgmistes praksides kasutada pythonit, php-d ja mysql-i. Oma failid pead igal juhul dijkstrasse laadima, ka siis, kui näitad praksi ette mõnest teisest serverist.

Mis järjekorras rakenduse osi teha

Kõigele korraga on võimatu mõelda. Praktiline on alustada kõige lihtsamatest osadest. Kui sul javascripti ja css osas veel eriti kogemusi ei ole, siis on mõistlik teha rakendust näiteks sellises järjekorras:

• Alusta puhtalt html-i ja minimaalse css-ga lehe tegemisest, kus sa kuvad prooviks välja mingi väikese arvu kaarte, näiteks 2x2 ruuduna 4 kaarti. Ära kohe veel tee kaardipaki valikut ja muid valikuid.
• Nüüd pane neile kuvatud kaartidele külge javascripti onclick meetod ja kirjuta funktsioon, mida see onclick välja kutsub (vt altpoolt). Ehita seda funktsiooni ja kaartide küljes olevat css-i niikaua, kui saavutad, et tagurpidi kaardile klikates ta ümber pööratakse. Arvesta, et sul läheb vaja ka tagurpidi kaardi pilti.
• Järgmisena pane see väike näide õieti mängima. Selleks vaata, et sinu väikesel näitepakil oleks reaalselt mõned paarid sees ja täienda onclick poolt kutsutavat funktsiooni nii, et ta kontrolliks, kas juba on mõni kaart ümber pööratud, vaataks, kas see on ekvivalentne kaart või ei ja siis vastavalt kas eemaldaks kaardid laualt või pööraks mõlemad uuesti tagurpidi.
• Nüüd on sul rakenduse põhituum olemas! Lisa oma funktsiooni osa, mis loeb kokku miinuspunkte (globaalne muutuja, mis algul null ja mida suurendad) ja kuvab mingis konkreetses kohas laual (kasuta div või span-i id-ga ja innerHTML omadust) miinuspunktide arvu.
• Järgmisena võta ette veidi keerulisem asi: kaardipaki ja mängimisviisi valik. Ehita need valikud lehel kas nuppudena või valiku-dropdownidena ja pane neile jälle külge javascript, mis salvestab vastavasse globaalsesse muutujasse tehtud valiku. Sõltuvalt kaardipaki valikust pead kuvama kas vähem või rohkem kaarte. Kuidas seda teha?
  • Üks variant, mis tundub algul mugav, aga tähendab tohutut hulka copy-paste, mida on raske hallata, on järgmine: ehita kaks eraldi tabelit või div-de hulka kummagi kaardipaki-valiku jaoks. Vastavalt kasutaja valikule peidad edaspidi ühe ja näitad teist.
  • Teine variant, mis on veidi keerulisem, aga väldib copy-paste ja on palju lihtsam hallata, on järgmine: ehita need kaartide tabelid või div-hulgad javascriptis. Selleks ehita javascriptis tsükliga pikk html string, mille siis lisad lehel mõne div-i innerHTML omaduseks.
• Nüüd on sul peaaegu kogu rakendus olemas! Jätka ülesandes kirjeldatud väikeste kellade ja vilede ehitamist ja tee oma lehekülg ilusaks.

Arvesta, et kui sa kõiki ülesande osi ei jõua teha, aga mäng põhimõtteliselt mingi kaardipakiga töötab, saad praktikumi arvestatud, lihtsalt punkte saad vastavalt vähem. Seega on peaasi teha kõigepealt valmis lihtne töötav variant ilma ülesandes toodud kõigi kellade ja viledeta, ja alles seejärel asuda oma programmi täiustama.

Soovitusi htmli ja cssi osas

Hea mõte on jagada lehekülg kõigepealt mitmeks vertikaalseks kõrvuti tulbaks. Kõige lihtsam - ja selle rakenduse jaoks piisav - on seada tulpadele fikseeritud laiused ja kõrgused. NB! Selline fiks laiuste/kõrguste lähenemine ei ole enamiku harilike veebisaitide jaoks päris hea mõte.

Tulpade tegemine tabeliga on lihtne, aga puhtalt div-dega ei ole päris triviaalne. Vaata seda ja seda või seda seletust põhimõtete osas. Kogu värgi lehekülje keskele panekuks, headeri ja footeri lisamiseks jne pakuvad ideid ja näiteid need õpetused, alates lihtsamast ja lõpetades põhjalikuga:

• w3cschooli hea väike terviknäide
• see suhteliselt vana tutorial.
• väga põhjalik paigutuse ja floatide õpetus, lõpus terviknäited

Täiendavate ideede ja juhatuste jaoks vaata lihtsalt kursuse lehelt viidatud materjale CSS bloki alt.

Soovitusi javascripti osas

Kuidas käiku teha? Tee iga käiguvalik (kaart) väikese piltnupuna ja pane sinna nupule onclick atribuudina javascripti call, mis kutsub välja käigutegemise funktsiooni näiteks nii:

...
function turn(x) {
 ...
}
...
<img src="..." onclick="turn(1)"/>
või pigem
<div class="..." id="..." onclick="turn(1)"/>

kus turn-i argumendiks on just selle ruudu number.

Kui sa ei kasuta mõnda javascripti teeki nagu jquery (algajale mittesoovitav, kuna tekitab lisakeerukusi!) siis on hea mõte töö lihtsustamiseks teha ise väikeseid abifunktsioone, näiteks function gid(x) {return document.getElementById(x); } et ei peaks kogu aeg pikalt välja kirjutama.

Debugimiseks on kõige lihtsam panna koodi sisse alert(...), aga mugavam ja parem on kasutada funktsiooni console.log(...) mille võid omakorda panna oma abifunktsiooni a la function debug(x) { console.log(x) }. console.log trükib tulemuse brauseri debugeri konsooli (Firefoxis käivita (ja enne installi!) firebug ja vaata firebugi aknast "console" tabi alt, Chromes otsi developer tools või javascript console).

Täiendavate ideede ja juhatuste jaoks vaata lihtsalt kursuse lehelt viidatud materjale javascripti bloki alt.

Tehnoloogianõuded

Lehel ei tohi kasutada freime ega ifreime. Html lehed võivad kasutada sisselaetavaid css ja javascripti faile ja pilte.

Kogu rakendus tuleb teha üheainsa html failiga, millele lisanduvad siis pildi-, css- ja javascripti failid vastavalt sinu vajadusele ja eelistustele.

Väliste teekide, ntx jquery kasutamine on lubatud, aga siis sa pead hästi aru saama, mida sinu tehtavad teegi-callid teevad. Reaalselt on see praks piisavalt lihtne selleks, et teekide kasutamine praktiliselt ei aita. Kui otsustad siiski teeki kasutada, siis väga soovitav on valida jquery kui suhteliselt lihtne ja domineerivalt populaarseim javascripti teek.

Kogu rakendus peab kasutama ainult html+css+javascripti ja olema üles laetud serverisse staatiliste lehtedena. Flashi, java jms tehnoloogiate kasutamine on keelatud.

CSS-i harjutamise eesmärgil tuleb vältida puht-kujunduslikke html tage (font, b, center jne) ja teha kujundus puhtalt CSS-ga. Elementaarsed tagid nagu p ja br ning head, script, body, mitte-nestitud tabelid, h1, h2 jms on ok. Põhiliselt soovitav kasutada id-de ja class-dega varustatud div ja span tage.

Dijkstra server

Kodutööde tarbeks on kasutusel server nimega dijkstra (see keeruline nimi on ühe tuntud arvutiteaduse teerajaja nimi ja keeruline seepärast, et see nimi teile paremini meelde jääks).

NB! Kõik kodutööd tuleb riputada Dijkstra serverisse - ka siis, kui sa neid sealt käima ei pane, vaid kasutad mõnda oma serverit - et õppejõud saaks lähtekoode Dijkstra serveris vaadata ja plagiaadituvastus-tarkvara abil kontrollida.

Teine kodutöö tuleb panna sinu kodukataloogi alamkataloogi "public_html/prax2" mille pead ise looma. Kodutöö failinimi peab olema prax2.html, kui sul on lisaks javascripti fail, peab selle nimi olema prax2.js, kui lisaks on css faili, peab selle nimi olema prax2.css

Enne failide serverisse riputamist on mõistlik teha kogu süsteem valmis lihtsalt oma arvutis/arvutiklassi arvutis.

Ligipääs

Dijkstrasse sisselogimiseks peab õppejõud kõigepealt teadma sinu matriklinumbrit ja nime. Kui oled ennast registreerinud aastal 2012, siis on need automaatselt olemas, muidu pead andma selle info õppejõule loengus paberil.

Seejärel on sul vaja omada TTÜ arvutiklasside linuxi-klasside kontot (kui sul juhtumisi seda juba ei ole) kujul tXXXXXX, kus XXXXXX on sinu matriklinumbri numbriline osa. Selle saad lasta teha arvutiklasside administraatorite juures: nii põhisissekäigu juures kui IT maja koridori tagaotsas linuxi-klasside administraatorite juures. Windowsi klasside kontod kujul eesnimi.perenimi ei ole kasutatavad.

Sisselogimine

Sisselogimiseks kasutatakse SSL ühendust: kõige lihtsam on kasutada programmi putty (Windows) või ssh (Linux). Tegemist on siis käsurealigipääsuga Linuxipõhisele serverile.

Putty leiad arvutiklassidest programmi "Application catalog" jaotusest terminals: sealt saad ta ise installeerida. Mõistlik on panna endale putty viit desktopile.

Mujal masinates lihtsalt lae endale veebist putty.exe: selle saab otse käima lasta, mingit eri-installeerimist ei ole vaja.

Sul on vaja sisestada:

• Dijkstra aadress: dijkstra.cs.ttu.ee (see tuleb puttyl sisestada "Host name" väljale)
• Teie kasutajanimi ja parool: TTÜ linuxiklasside kasutaja + parool (neid küsib putty siis, kui ta serveriakna avab).

Puttyl tasub Window/appearance alt seada meeldiv font ja Window/color alt meeldiv värv (ntx valge tagapõhi ja must värv). Samuti tasub kindlasti teha "save session" (enne pane "Saved session" väljale endale meeldiv nimi), siis jätab Putty settingud meelde ja sisenemisel ei pea enam arvuti nime sisestama: valid listist sessiooninime ja teed "Load" ja seejärel "open".

Veebikeskkonna ettevalmistamine

Kõik asjad, mis paigutad oma dijkstra kodukataloogi alamkataloogi "public_html", on veebis nähtavad. Seda kataloogi sul algul ei ole ja see tuleb kõigepealt ise luua niimoodi:

$mkdir public_html

$ rea alguses tähistab nüüd ja edaspidi Linuxi käsurealt antavaid käske ja seda $ sümbolit ära arvutisse ise tipi.

Käsurea saamiseks tuleks üle SSH ühenduse dijkstra käsureale logida (putty või ssh vms)

Kui kataloog on olemas, suunake oma brauser dijkstra aadressile, mille saate, kui lisate serveri nime järgi tilde ja tudengikoodi (näiteks sedasi, aga asendage oma tudengikood ära):

http://dijkstra.cs.ttu.ee/~tXXXXXX/

Kui kõik töötab õigesti, peaksite nägema kataloogi nimistut, mis on tühi, sest te pole sinna faile pannud. Tekitage prooviks index.html nimeline fail ja kontrollige, et see hakkab endist tühja kataloogilistingut asendama (enne on sul tõenäoliselt siiski vaja muuta public_html failiõigused, nagu järgmises lõigus kirjas).

Nüüd loo public_html alla kataloog prax2 ja pane oma rakenduse failid otse sinnasamasse prax2 alla, kasutades failinimesid, mis eelpool nõutud (prax2.html, prax2.js, prax2.css).

Failiõiguste seadmine:

Kui oled värskelt public_html kataloogi teinud, on vaja anda talle lisaks lugemis-ja nimekirjanäitamise õigus niimoodi:

$chmod  g+rx public_html
$chmod  g+rx public_html/prax2

Failile lugemisõiguse andmine (see tekib üldjuhul automaatselt ja ei ole vaja ise teha):

$chmod g+r index.html

Nend käskude järel on sinu kataloogide lugemisõigus grupil "tudengid".

Failide kopeerimine serverisse

Failide serverisse kopeerimiseks kasutage SFTP protokolli: soovitavad programmid selleks on windowsil winscp ja Filezilla. Linuxist kopeerimiseks kasutage scp-d.

Arvutiklassides leiad Winscp "Application catalog" programmi jaotusest "terminals": sealt saad ta installeerida. Nagu ka putty, on teda mujal masinates võimalik lihtsalt alla laadida ja ilma eri-installeerimiseta käivitada.

Winscp esmakordsel käivitamisel vajuta "New" ja täida host (dijkstra.cs.ttu.ee) ja kasutajanime ning parooli väljad, muid asju pole vaja seada.

Winscp kasutamise juures tasub teda veidi mugavamaks sättida:

• Options->preferences menüü alt mine Environment/interface ja vali "Commander", siis tekib kahe alamaknaga kasutajaliides, kus ühes on sinu masin ja teises server: nii on mugavam faile kopeerida.
• Options->preferences menüü alt mine "Editors", vajuta "add", vali oma progeredaktor (otsi näiteks C:\Program Files(86) alt Notepad++ ja nihuta ta seejärel samal lehel tabelis päris üles (vali tabelist tema rida ja vajuta "up" kuni lõpuni): siis saad sellesama redaktoriga oma masinast otse redigeerida serveris olevaid faile (katsetatud scite ja notepad++-ga, töötab).
• Options->preferences menüü alt mine Integration/applications ja vali sealt "Browse" abil oma masinast putty.exe (täispath) ja sea "Remember password ..." peale: siis saad winscp tööriistariba keskel oleva väikese putty ikooni abil otse putty käivitada ja seal piisab siis ainult kasutajanimest.
• Session menüü alt tee "Save session" ja checki "Save password", siis on edaspidi serverisse logimine lihtsam: ei pea sisestama kasutajanime ega parooli.

Need muutused käivituvad - vist - alles peale winscp taaskäivitamist.

Filezilla puhul vali menüüst File->Site Manager, vajuta "New site", täida "Host" (dijkstra.cs.ttu.ee), vali Protocol: FTP asemel SFTP, Logon type Normal ja täida seejärel User ja Password ning vajuta Connect. Nagu ka Winscp puhul, tasub teda mugavamaks sättida. Mine Edit->Settings ja sea sealt "File editing" endale meeldivama redaktori peale oma masinas. Muid settinguid, nagu Interface->Layout jne tasub ka korra vaadata.

Lisaks on täiesti OK variant windowsil kasutada putty-ga komplektis olevat DOS-i käsurea programmi pscp.exe näiteks nii (loomulikult pead oma failide, programmide asukohad ja nime ära muutma):

    F:\Lectures\Vorgurak1\Cgilect>c:\Users\tanel\Desktop\pscp tst1.html tammet@dijkstra.cs.ttu.ee:public_html/
    F:\Lectures\Vorgurak1\Cgilect>c:\Users\tanel\Desktop\pscp * tammet@dijkstra.cs.ttu.ee:public_html/

Linuxi käsurida ja serveris tegutsemine

Linuxi käsurea kasutamist tuleb uurida omal käel. Sobivat lugemist lihtsamatest keerulisemateni:

• päris algajatele on hea see selgitustega leht
• selles praksis peaks piisama nendest käskudest,
• seejärel tasub korra lisaks vaadata seda kompaktset kokkuvõtet erinevatest käskudest (enamust vaja ei lähe)
• ning lugeda seda väga head ja põhjalikku õpetust funtoo saidilt (vt ka järgmisi sarja osi lehe lõpust!)
• või alternatiivina seda põhjalikumat õpetust.
• Alati tasub lisaks ise googeldada.

Väga kasulikud asjad meelde jätta:

• Üles ja alla nooleklahvid võtavad automaatselt ette varasemaid/hilisemaid käske, et neid ei peaks uuesti sisse tippima
• kui tipid failinime esimese otsa ja vajutad tab klahvi, otsib süsteem automaatselt failinime lõpu (kui sul muidugi pole mitut sama algusega faili)
• Suured ja väikesed tähed on unixis täiesti erinevad asjad, erinevalt windowsist. Näiteks sinu html/javascript sources olevad failinimed peavad olema antud täpselt selliselt, nagu failinimi tegelikult on (kui sources failinimi pilt.jgp, siis peab olema tegeliku faili nimi ka pilt.jpg, aga mitte näiteks pilt.JPG).
• Üldiselt ei ole hea mõte kasutada failinimesid, kus sees tühikud ja/või täpitähed. See on võimalik, kuid tekitab rohkem probleeme ja ebamugavusi, kui asi väärt on. Seega kasuta näiteks "minu überpilt.jpg" asemel "minu_yberpilt.jpg" vms.
• oma programmide käivitamiseks (oletame, et sul on kataloogis programm minuproge) tipi ./minuproge . Seda punkt-slashi ei ole vaja panna, kui sul on PATH muutuja sobivaks seatud, aga selle seadmisega pole tingimata vaja jännata.

Failide muutmine otse serveris

Siin on kolm veidi erinevat võimalust:

• redigeerida faile mõne serveris oleva redaktoriga, näiteks vi (loe veidi vi kohta).
• redigeerida faile oma masinas oleva redaktoriga, mis võimaldab neid otse serverist avada ja sinna kirjutada (hea variant selleks on winscp, eriti kui oled seal seadnud endale meeldiva redaktori, nagu eelnevalt seletatud)
• ja lõpuks on alati variant redigeerida faile oma masinas ja kopeerida nad peale muutmist serverisse (nagu varem kirjeldatud)

Üldiselt on kõige mugavam teha võimalikult kõik oma masinas valmis, katsetada ära ja alles siis kopeerida valmis asjad serverisse, ning teha serveris ainult pisimuutusi.