IV0110 2 töö 2011 aasta variant

Allikas: Lambda
IT

selle lingi alt saad vaadata vana, 2010 aasta varianti


See on 2011 aasta arhiveeritud ülesanne, 2012 aasta ülesande sisu on veidi teistsugune

Teateid

NB! Dijkstrale pääsevad nüüd ligi need tudendid, kes on oma nime/matriklinumbri õppejõule faili kirjutanud või paberil andnud.

Loe kindlasti läbi siin allpool olev "Dijkstra server" peatükk, sealt leiad detailseid õpetusi, kuidas tüüpilisi probleeme lahendada ja serveriga mugavalt hakkama saada.

Rakenduse ülevaade

Sinu ülesandeks on kirjutada puhtalt brauseris jooksev, javascripti ja css-i peale ehitatud tuntud ülilihtne kahe inimese mäng kivi-paber-käärid ehk rock-paper-scissors. Reeglid ja huvitavat lisainfot leiad wikipedia artiklist

Ühe mängija asemel mängib sinu programmis arvuti, st programmi kasutaja mängib arvuti vastu.

Sinu programm peaks kasutajaliidese mõttes sarnanema sellele new york timesi variandile, aga olema lihtsam: ei ole vaja vaja teha nõrga/tugeva vastase valikut ega kuvada põhjusi, miks programm just sellise käigu tegi. Samuti ei ole vaja kasutada animeeritud pilte: piisab lihtsalt sobivatest kivi-paber-käärid piltidest oma valikul.

Kindlasti peab aga saama mängu uuesti alustada ja iga käigu järel peab keskmisel alal kuvama koguskoori ja viimati mängitud käigud, sarnaselt nyt variandile. Kujunduse nüansid vali ise, ei ole vaja täpselt järgida nyt variandi kujundust.

Info paigutus ekraanil peab olema stabiilne, tekst/nupud 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.

Arvutiprogramm ei pea mängima väga hästi, aga ta ei tohi mängida ka väga halvasti. Konkreetselt peaks programm:

  • üldjuhul mängima juhusliku käigu
  • kui aga inimene mängib väga pikalt ühte käiku (näiteks neli korda kivi) siis eeldama, et inimene jätkab sama käiguga (ja arvuti peaks selles näites vastama paberi), kuni inimene käiku muudab.

Täiustused strateegiasse on loomulikult lubatud.

Vaata tausta mõttes lisaks worldrps lehel olevaid strateegiaid ja muud materjali ning käimasolevat kivi-paber-käärid programmide võistlust: viimasest saab igaüks osa võtta, küll aga mitte javascripti programmiga.

Tee programm kõigepealt valmis oma arvutis ja seejärel riputa kogu materjal - html, css, javascript ja pildid - serverisse. TTÜ serveri (dijkstra) kasutamiseks registreeri loengus/praksis õppejõu juures oma matriklinumber: täpsemalt 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.

Soovitusi htmli ja cssi osas

Hea mõte on jagada lehekülg kõigepealt kolmeks 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 harilike veebisaitide jaoks kuigi hea mõte.

Tulpade tegemine 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:

Soovitusi javascripti osas

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

...
function move(x) {
 ...
}
...
<img src="..." onclick="move(1);"></img>

Üks esimesi asju, mida su javascripti kood peaks tegema, on mängija käikude salvestamine. Hea mõte on iga käik panna massiivi - ehk listi - alustades positsioonist 0, seejärel 1 jne jne. Selleks on hea kasutada push meetodit. Array arr pikkuse saad nii: arr.length . Lisaks vaata kindlasti array meetodeid siit ja siit

Pea silmas ka, et javascripti array on praktiliselt sama asi, mis javascripti objekt ja kõik array elemendid on objekti positsiooni-nimel olevad väärtused, ehk arr.miski on sama, mis arr['miski'].

Kui tahad näiteks hoida oma ja vastase käiku ja tulemust ühel massiivireal - hea mõte - saad panna käikude massiivi lihtsalt kolmeelemendilisi objekte näiteks nii: 

result=1;
arr.push({user:1, opp:2, res: result});
lastresult=arr[arr.length-1].res;

Teine samuti ok variant on hoida käike tekstistringides, näiteks "001201210..." jne eraldi inimese ja masina jaoks, kuhu uue käigu puhul uus täht lisatakse. Eelmine koodijupp oleks siis sellist laadi (stringile liitmisel konverditakse numbrid automaatselt stringiks): 

result=1;
userstr=userstr+1;
oppstr=oppstr+2;
resstr=resstr+1;
lastresult=resstr.charAt(resstr.length-1);

Kuidas panna programmi hästi mängima?

Esiteks pane tähele, et selles praksis ei ole üldse nõutud, et programm mängiks väga hästi. Miinumnõuded on üleval kirjas.

Teiseks pane tähele, et puhtalt juhusliku viske vastu mängides ei saa ei võidu- ega kaotusshanss olla suurem, kui 50%. Samas, kui mängija ei mängi päris juhuslikult (näiteks seepärast, et ta on inimene ja ei suuda olla päris juhuslik, või kasutab ta mõnda strateegiat), siis on seda võimalik tuvastada ja tõsta oma võidushanssi tugevalt üle 50%. Oletame, et programmid võistlevad turniiril paljude osavõtjatega, kellest suur hulk ei mängi juhuslikult. Siis juhuslikult mängiv programm platseerub pingerea keskele, osavalt vastase strateegiat ära arvav programm aga pingerea etteotsa!

Kui tahad programmi parandada, siis tasub kindlasti lugeda neid õpetusi:

ja vaadata programmide võistluse hetkeseisu tabelis olevate programmide lähtekoodi (kõik avalikud, lihtsalt kliki programmi nimele). Ka see leht on hea näide lihtsast disainist.

Tehnoloogianõuded

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

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 kujunduslikke html tage (font, b, center, h1...h6, table jne) ja teha kujundus puhtalt CSS-ga. Elementaarsed tagid nagu p ja br ning head, script, body 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).

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

Ligipääs

Dijkstrasse sisselogimiseks on vaja end registreerida: kirjutada loengus/praksis õppejõu registreerimisfaili või paberile oma nimi ja matriklinumber.

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 on lihtsalt üks exe fail, mis tuleb otse käima lasta: mingit installeerimist ei toimu.

  • Dijkstra aadress: dijkstra.cs.ttu.ee (see tuleb puttyl sisestada "Host name" väljale)
  • Teie kasutajanimi ja parool: TTÜ arvutiklasside 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".

Failide laadimine

Failide laadimiseks sinna kasutage SFTP protokolli. Soovitavad programmid selleks on windowsil winscp ja Filezilla. Linuxist kopeerimiseks kasutage scp-d.

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 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-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:

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.
  • otse serveris failide muutmiseks on kõige mõistlikum kasutada vi redaktorit: see redaktor on kõikides unixites alati olemas ja töötab suurepäraselt üle võrgu. Hea õpetuse leiad siit. Temaga alustamine on veidi harjumist vajav, aga elementaarsed oskused kiireteks väikesteks redigeerimisteks kuluvad väga ära. Praksides saab muidugi hakkama ka ilma vi-d kasutamata. Loe lisaks.

Failide muutmine otse serveris

Siin on kolm veidi erinevat võimalust:

  • redigeerida faile mõne serveris oleva redaktoriga, näiteks vi
  • redigeerida faile oma masinas ja kopeerida nad peale muutmist serverisse (nagu varem kirjeldatud)
  • 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)

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

Veebikeskkonna ettevalmistamine

Kõik asjad, mis paigutate oma dijkstra kodukataloogi alamkataloogi "public_html", on veebis nähtavad. See kataloog tuleb kõigepealt luua: 

$mkdir public_html

"$" rea alguses tähistab nüüd ja edaspidi Linuxi käsurealt antavaid käske (enamus praeguse näite failioperatsioonidest peaks olema tehtavad ka SFTP graafilise liidese alt.

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

Kui kataloog on olemas, suunake oma brauser dijkstra aadressile, mille saate kui lisate serveri nime järgi tudengikoodi (näiteks sedasi, aga asendage oma tudengikood ära): http://dijkstra.cs.ttu.ee/~t0XXX/

Kui kõik töötab õigesti, peaksite nägema kataloogi nimistut, mis on tühi, sest te pole sinna faile pannud. Tekitage index.html nimeline fail ja kontrollige, et see hakkab endist tühja kataloogilistingut asendama. Rakenduse html-failid võite panna sinnasamasse public_html alla.

Failiõiguste probleemid

Juhul, kui te kataloogi või oma index.html sisu ei näe, kontrollige, et nii teie kodukataloog kui public_html kuuluksid grupile "tudengid" ja et sellel grupil oleks nii lugemis-kui kataloogisisu vaatamise pääsuõigused. Samuti peab tudengigrupil olema võimalus lugeda kõiki veebi ülesminevaid faile.

Kataloogile lugemis-ja nimekirjanäitamise õiguse andmine:

$chmod  g+rx public_html

Failile lugemisõiguse andmine:

$chmod g+r index.html
Pärit leheküljelt "http://lambda.ee/w/index.php?title=IV0110_2_töö_2011_aasta_variant&oldid=9080"