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

IT

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 konkreetse eeskuju (flashis), mida järgida. Kujunduse mõttes tee enda mäng muidugi teistsugune, kuid funktsionaalsus peaks olema sarnane eeskujule. 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: 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, saab arvestuse eest baaspunktid.

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

• Iga konkreetse sõna äraarvamise aega mõõdetakse ja mängijale kuvatakse pidevalt algusest möödunud sekundid (iga sekund uus sekundinumber).
• Iga äraarvamise järel lisatakse skoor sekundites skooride listi algusesse, mida kasutajale kuvatakse.
• Rakendus peab nägema OK välja nii tava-arvutis (suur ekraan) kui mobiilibrauseris (teisisõnu, olemas on ka mobiilile optimeeritud variant).
• ... veel mitmesugust funktsionaalsust mis ilmuvad lähema nädala jooksul ...

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

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.

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

Dijkstrasse sisselogimise info ilmub siia lähiajal.