ITV0110 2. töö: CSS, javascript, veebiserver

Nende linkide alt saad vaadata vana 2012 aasta varianti ja 2011 aasta varianti.

Mida tuleb teha

Sinu ülesandeks on kirjutada tähemäng: puhtalt brauseris jooksev tähtede õigesse järjekorda seadmise mäng ühele mängijale, kasutades ainult htmli, javascripti ja css-i.

Siit leiad eeskuju (flashis), mida enamvähem järgida. Meie praksis loodavas mängus pead terve sõna õigesse järjekorda saama, mitte moodustama erinevaid lühikesi sõnu. Kujunduse mõttes tee enda mäng samuti teistsugune. Samuti ei tohi sa kasutada flashi, javat ega midagi muud peale brauseris jooksva html+javascript+css combo.

Sõnastikuna kasuta mõne keele kõige populaarsemate sõnade listi pikkusega vähemalt 1000 sõna: inglise keele jaoks leiad näiteks siit ja siit.

Mängu põhialgoritm peab olema järgmine:

• Kasutaja vajustab "Alusta" nuppu
• Programm valib oma listist juhusliku sõna ja ajab tähtede järjekorra juhuslikul viisil sassi.
• Programm kuvab sassis järjekorraga sõna ja tühjendab kasutaja poolt varem kokkupandud sõna välja.
• Kasutaja saab vajutada mistahes tähele sassis sõnas, seepeale lisatakse täht kasutaja kokkupandud sõna välja lõppu.
• Kui väli saab täis (kõik tähed lisatud) ja kasutaja vajutab nuppu "Valmis!", kontrollib programm, et kas kokkupandud sõna on tema listis (see ei pea olema sama sõna, mis programm algul valis).
• Programm kuvab, kas sõna arvati õieti või mitte.

Kui põhialgoritm ei tööta korralikult, siis praks ei ole arvestatud, kui aga töötab ja leht ei näe väga kole välja, saab arvestuse eest baaspunktid ehk seitse punkti.

Lisaks põhialgoritmile on hea mõte realiseerida hulk täiendavat funktsionaalsust, mis ei ole aga kohustuslik: iga täiendav realiseeritud funktsionaalsus annab lihtsalt lisaks punkte. Täispunktide - viisteist - jaoks peavad kõik funktsioonid olema korralikult tehtud.

• Nupud on kujundatud kerge 3-d efektiga: nupu kohal hiirega olles kuvatakse nuppu veidi teisiti (näiteks veidi heledamalt või tumedamalt) ja vajutades on näha, nagu oleks nupp sissepoole läinud (1 punkt)
• Tähenupule vajutades läheb nupp pooliku sõna lõppu animeeritult, sarnaselt flashi näitega (kasuta CSS3 animatsiooni, ntx nii või nii) (1 punkt)
• Iga konkreetse sõna äraarvamise aega mõõdetakse ja mängijale kuvatakse pidevalt algusest möödunud sekundid (iga sekund uus sekundinumber). (1 punkt)
• Iga äraarvamise järel lisatakse skoor sekundites skooride listi algusesse, mida kasutajale kuvatakse. (1 punkt)
• Lisaks skooride listile kuvatakse skooride graafik. Seejuures on hea mõte kasutada flotcharts teeki. (1 punkt).
• Kasutaja saab valida raskusastet, mis määrab siis segiaetud tähtede arvu ja võimalikud sõnapikkused: rohkem segiaetud ja pikem sõna on keerulisem. (1 punkt)
• Rakendus näeb välja OK välja nii tava-arvutis (suur ekraan) kui mobiilibrauseris (teisisõnu, olemas on ka mobiilile optimeeritud variant). (2 punkti)

Selles praksis teed ühe inimese variandi, aga kolmandas praktikumis tuleb samale mängule lisada serveripoolset funktsionaalsust, näiteks tulemuste ja top skooride salvestamine ja vaatamine, samuti mäng kahe inimese vahel, mis toimub siis serverirakenduse vahendusel.

Mis veel nõutud

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

Leht tohib kasutada ainult html+css+javascripti, seejuures 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.

CSS-i harjutamise eesmärgil tuleb minimeerida/vältida puht-kujunduslikke html tage (font, b, center jne) ja teha kujundus eeskätt 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.

Väliste teekide, ntx Jquery või Bootstrap kasutamine on ok, aga siis sa pead hästi aru saama, mida sinu tehtavad teegi-callid või stiilid teevad. Reaalselt on see praks piisavalt lihtne selleks, et teekide kasutamine eriti vajalik ei oleks. Kui otsustad siiski teeki kasutada, siis väga soovitav on valida jquery kui suhteliselt lihtne ja domineerivalt populaarseim javascripti teek, kujunduse jaoks aga Bootstrap.

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.

NB! Ära unusta, et lähema nädala jooksul lisandub siia lehele hulk täpsustavaid nõudeid, detaile, soovitusi jne. Kuna põhialgoritm jääb samaks, võid kohe alustada, lihtsalt kontrolli siit lehelt regulaarselt, mis uuendusi on lisandunud.

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.

Mis veel: uus väga hea redaktor html/css/js jaoks on brackets: proovi seda!

Soovitusi javascripti osas

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.

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. Soovitav kodutöö nimi on index.html või prax2.html

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

Ligipääs

Dijkstrasse sisselogimiseks on sul vaja omada TTÜ arvutiklasside klasside kontot (kui sul juhtumisi seda juba ei ole) kujul kas

• tXXXXXX, kus XXXXXX on sinu matriklinumbri numbriline osa. Selliseid kontosid tudengitele enam ei tekitata: kellel olemas, saab kasutada.
• eesnimi.perenimi (siin võib tekkida probleem täpitähtede, tühikutega jne). See on uus tüüp kasutajatunnuseid.

Kasutajatunnuse saad lasta teha arvutiklasside administraatorite juures.

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".

Kui sisselogimine ei õnnestu

Tõenäoline põhjus on see, et sinu kasutajatunnus ei ole jõudnud õppejõuni õigel kujul.

Loe seda õpetust ja salvesta veebivormi kaudu oma kasutajatunnus.

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

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 kasutajanime (näiteks sedasi, aga asendage oma kasutajanimi ära):

http://dijkstra.cs.ttu.ee/~eesnimi.perenimi/ või (vanade kontode korral) 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

Põhimõtteliselt peaks piisama neist käskudest:

 pwd (mis kataloogis ma praegu olen)
 ls -l (vaata kataloogi sisu pikas formaadis)
 cd katalooginimi (mine sinna kataloogi)
 cd .. (mine üks tase kõrgemasse kataloogi)
 less failinimi (näita faili sisu: seal sees liigu nooleklahvidega ja lõpeta tähega q)
 cp kust kuhu (kopeerib)
 rm failinimi (kustutab)
 mkdir katalooginimi (teeb uue kataloogi)
 rmdir katalooginimi (kustutab kataloogi: see tuleb enne tühjendada)
 chmod a+r failinimi (teeb faili kõigile loetavaks, et ntx veebist kuvada)
 chmod a+rx failinimi (teeb faili kõigile käimapandavaks, eeskätt cgi programmide jaoks)
 vi failinimi (redigeeri faili lihtsa redaktoriga vi)
 

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

• päris algajatele on hea see selgitustega leht
• 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.