Kursused - Kasutaja kaastöö [et]

UI:Kodutöö 3 (2018)

2018-05-02T10:06:56Z

ErikSoekov: /* Punktid */

{{UI}}'''Ülesandeks on teha hea kasutajaliidesega ideaalne hindamisvorm Kodutöö 2 (Bürokraatiamäng) jaoks.'''

== Ülesanne ==

Valmistage ideaalne hindamisvorm Kodutöö 2 hindamiseks. Õpilaste lisamine ja haldamine ei ole töö skoobis. Ainult hindamise protseduur õpilase juurde mahaistumisest kuni hinde selgumiseni. Serveripoole rakendusse kirjutamine ei ole kuidagi kohustuslik (kuid pole keelatud).

== Hindamise protseduur ==

* Hindaja tutvub liidesega, tuvastab keda ta hindab, lisab töö aadressi (või dijkstra kasutajanime) süsteemi.
* Oluline on olla tuttav [[UI:Kodutöö 2 (2018)#Hinnatakse|Kodutöö 2 hindamise punktiskaalaga]].
* Iseloomulikke momente:
** Hindamisel on ühe või kahe tudengi töö
** Hindamisele on esitatud kokkuleppeline projekt, mida tuleb hinnata skaalas 0-20 ja hiljem üles leida.
** Tudeng hilineb esitamisega ja saab -2 või -5 punkti trahvi
** Õppejõud soovib salvestada info tudengi põhilistest lahendamist vajavatest probleemidest, et neid hiljem parandada.
** Tudeng ei ole üleni valmis saanud aga saab nädala jagu pikendust
** Tudeng ei ole pärast ajapikendust ikka saanud valmis, aga saab veel nädala ajapikendust
** Tudeng on töö kopeerinud, muutuja nimed ära vahetanud ja CSSi võimalikult tundmatuks muutnud ja selle kohta on vaja andmed salvestada.
** Tudeng on olnud liiga tubli ja saab lisapunkte (vaja on salvestada miks)
** Tudeng ei ole olnud eriti tubli, aga töö on iseenesest terviklik ja töö hinne kahaneb (vaja on salvestada miks)
** Õppejõud unustab mida mingi valdkond tähendab ja tahab meenutada mis siis ikkagi oli baasfunktsionaalsus

== Punktid ==

* Baasfunktsionaalsus (10 punkti):
** Hindeid saab lisada
** Näeb hindamise tulemust
** Hilinemised on hallatud
** Võimalikud hooletusvead on veateadetega kaetud
** Töö hilisemaks vaatamiseks on salvestatud tudengi kasutajanimi või töö URL( Ei ole tarvis näidata eelnevalt hinnatud tudengeid, on vaja ainult dijkstra URLi/uni-id, kust tööd näha saaks)

Lisapunktid (1 punkt)
* Vorm on väga ilus
* Vorm on kasutatav mobiiltelefonis
* Tudengite kaitsmisele lisamine üksi või kahekaupa on mõnus
* Jooksev hinne ja maksimum on kuskil jooksvalt näha
* Veateated on ka tahtlike vigade puhul hästi lahendatud
* Märkused hindamisele on hästi lahendatud
* Plagiaadi avastamisel on lahendus
* Õppejõud saab vaaata hindamiskriteeriumi kohta lisainfot
* Lisa- ja miinuspunktid on lahendatud koos märkustega
* Projektina lahendatud töö info saab salvestada

Lisaks on võimalik saada lisapunkte positiivselt üllatava lahenduse või üldise viimistletuse eest.

Hilinemine:
Hilinemine 1 nädal on -2 punkti, rohkem hilinemine -5 punkti. Töö näitamine

Minimaalne hinne vastuvõetud töö eest on 10 punkti.

== Esitamine ==

Esitamiseks laadige oma töö veebi, ning töö jaoks kasutatud kood dijkstra.cs.ttu.ee serverisse kodukataloogi:

/home/KASUTAJANIMI/public_html/ui/t3

Juhul kui dijkstras puudub mõni tarvilik funktsionaalsus, laadige kogu töö kood ikka sellesse kausta, kuid võite selle üles seada mõnesse teise serverisse.

UI:Vaata koerad

2018-02-21T11:58:58Z

ErikSoekov:

{{UI}}''See harjutus on veidi eklektiline; selle eesmärk on näidata veel paari Vue.js põhimõtet ja õppida juurde veidi "sõnavara". Kuna me kõik teame et [http://en.wikipedia.org/wiki/On_the_Internet,_nobody_knows_you%27re_a_dog internetis on kõik koerad], on sellel harjutusel selline nimi.

Oled spämmer, kes tahab teha e-postide nimekirja (spämmimine keelatud lähtuvalt Euroopa liidu direktiivi 2002/58 artiklist 13.) ja kuna oled eriti viisakas spämmer, tahad sisestada inimeste nimed, ning e-postid nimekirja ning nimetad end elektrooniliseks turundajaks. Kui soovid, võid ette kujutada, et turundad hoopis ainult koertele, või et oled eetiline.''

== Ülesanne ==

Loe kogu ülesanne hoolega läbi. Kirjuta Vue.js rakendus, mis loob nimekirja nimedest ja e-posti aadressidest. Sisuliselt nagu kassid ja nende aastad, aga tee kolm vaadet: nimekiri, detailvaade ning lisamisvaade.

* Muuda vormiväljad ja andmemudel selliseks, et saaksid vajalikke andmeid salvestada
** Vormiväljal tuleb andmemudel korrigeerida
* Tee detailvaatest korralik komponent (analoogia põhjal)
* Määra lisamisvaate komponendi aadress vue-route.js loogikasse.
** Kuna meil ei ole keskset serverit, peame kasutama komponentides jagatud andmeid. See on debugimise ja edasise elu mõttes kohutav valik, aga praegu teeme nii.
* Vormiväljade puhul kontrolli, et nimi poleks tühi ja e-post vigane NING värvi väli punaseks mõistlikul moel (st lisa klass dünaamiliselt).
* Takista vormivälja saatmine vea korral ning näita mõistlikul ka veateateid.

Rakenduse põhja saad siit [[meedia:ui-h3-clean.zip|ui-h3-clean.zip]]

== Lisainfo ==

* [https://vuejs.org/v2/guide/components.html Vue.js komponendid]
* [https://router.vuejs.org/en/essentials/getting-started.html Vue-Route dokumentatsioon]
* [https://vuejs.org/v2/guide/state-management.html Vue.js oleku haldamine (ehk kuidas teha asju paremini)]

== Esitamine ==
* lae oma failid ülesse dijkstrasse kataloogi public_html/ui/praks4
* saada oma harjutustunni õppejõule klõpsitav link. Vastavalt kellaajale kas erik.soekov@ttu.ee või jaagup.irve@ttu.ee.
* jäta oma töö sinna kataloogi kuni semestri lõpuni.

UI:Vaata kassid

2018-02-14T11:27:47Z

ErikSoekov:

{{UI}}
''Selle praktikumitunni ülesanne on vue.js käima ajada ja sellega väike näide valmis kirjutada''

== Ülesanne ==

Lahendage ülesanne vue.js vahendusel. Sammhaaval tegemisesk sobib järgmiste alamülesannete lahendamine vue.js abil:

* Mallide <nowiki>{{}}</nowiki> avaldiste abil sisu lehele näitamine.
* Tab-ide implementeerimine.
* Kontrollerist nimekirja esitamine
* Tekstivälja (input type=text) info kuvamine avaldise abil. (See on vaheharjutusena tore, aga lõpptulemuses seda vägisi pole mõtet kajastada)
* Vormi abil kontrollerisse nimekirja info lisamine

Kõike seda saab proovida, kui võtta ülesandeks kasside üle arvepidamise rakendus ja see Vue.js abil implementeerida. Rakenduse vaates oleks kaks tab-i: "Nimekiri" ja "Lisa kass". Sellest kõrgemal h1 pealkirjas ütleb, mis tab parajasti on valitud.

Kassi kohta salvestage:
* Nimi
* Sünniaasta

Kasside nimekiri salvesta data all.

Vormiväljal lisatud kass lisa nimekirja lõppu (või sordi aastaarvude või eesnimede järgi).

Reaalset, reloadi üleelavat salvestust ärge implementeerige.

== Asjad, mida meeles hoida ==

Kui kasutaja mingeid andmeid sisestab siis ta ka eeldab, et leht reageerib sellele kuidagi. Näiteks tekib kiri: "kass lisatud" või "lisamine õnnestus" või näiteks vahetatakse tab kasside nimekirja tabile.

== Boonus ==

Kui oskate Vue.js-i piisavalt, et ülesanne tundub igav, võite võistelda ajaliselt, kes esimesena lahenduse postkasti saab, lahendada mõni kodutöö rakenduse alamülesanne või siis lihtsalt õppejõudu veenda oma võimekuses vue.js abil midagi teha.

Kui oskate mõnda muud teeki, siis tehke see näide ära, et oma oskuste pagasit laiendada.

== Viited ==

* [https://vuejs.org/v2/guide/ Vue.js sissejuhatus]
* [https://vuejs.org/v2/guide/comparison.html Vue.js võrdlus teiste raamistikega]

== Esitamine ==
* Salvestada oma töö dijkstra kataloogi public_html/ui/praks3
* Vastavalt harjutustunni kellaajale saata oma töö link aadressile erik.soekov@ttu.ee või jaagup.irve@ttu.ee

UI:Vaata kassid

2018-02-14T11:06:52Z

ErikSoekov: /* Esitamine */

{{UI}}
''Selle praktikumitunni ülesanne on vue.js käima ajada ja sellega väike näide valmis kirjutada''

== Ülesanne ==

Lahendage ülesanne vue.js vahendusel. Sammhaaval tegemisesk sobib järgmiste alamülesannete lahendamine vue.js abil:

* Mallide <nowiki>{{}}</nowiki> avaldiste abil sisu lehele näitamine.
* Tab-ide implementeerimine.
* Kontrollerist nimekirja esitamine
* Tekstivälja (input type=text) info kuvamine avaldise abil. (See on vaheharjutusena tore, aga lõpptulemuses seda vägisi pole mõtet kajastada)
* Vormi abil kontrollerisse nimekirja info lisamine

Kõike seda saab proovida, kui võtta ülesandeks kasside üle arvepidamise rakendus ja see Vue.js abil implementeerida. Rakenduse vaates oleks kaks tab-i: "Nimekiri" ja "Lisa kass". Sellest kõrgemal h1 pealkirjas ütleb, mis tab parajasti on valitud.

Kassi kohta salvestage:
* Nimi
* Sünniaasta

Kasside nimekiri salvesta data all.

Vormiväljal lisatud kass lisa nimekirja lõppu (või sordi aastaarvude või eesnimede järgi).

Reaalset, reloadi üleelavat salvestust ärge implementeerige.

== Boonus ==

Kui oskate Vue.js-i piisavalt, et ülesanne tundub igav, võite võistelda ajaliselt, kes esimesena lahenduse postkasti saab, lahendada mõni kodutöö rakenduse alamülesanne või siis lihtsalt õppejõudu veenda oma võimekuses vue.js abil midagi teha.

Kui oskate mõnda muud teeki, siis tehke see näide ära, et oma oskuste pagasit laiendada.

== Viited ==

* [https://vuejs.org/v2/guide/ Vue.js sissejuhatus]
* [https://vuejs.org/v2/guide/comparison.html Vue.js võrdlus teiste raamistikega]

== Esitamine ==
* Salvestada oma töö dijkstra kataloogi public_html/ui/praks3
* Vastavalt harjutustunni kellaajale saata oma töö link aadressile erik.soekov@ttu.ee või jaagup.irve@ttu.ee

UI:Vaata kassid

2018-02-14T11:06:37Z

ErikSoekov:

{{UI}}
''Selle praktikumitunni ülesanne on vue.js käima ajada ja sellega väike näide valmis kirjutada''

== Ülesanne ==

Lahendage ülesanne vue.js vahendusel. Sammhaaval tegemisesk sobib järgmiste alamülesannete lahendamine vue.js abil:

* Mallide <nowiki>{{}}</nowiki> avaldiste abil sisu lehele näitamine.
* Tab-ide implementeerimine.
* Kontrollerist nimekirja esitamine
* Tekstivälja (input type=text) info kuvamine avaldise abil. (See on vaheharjutusena tore, aga lõpptulemuses seda vägisi pole mõtet kajastada)
* Vormi abil kontrollerisse nimekirja info lisamine

Kõike seda saab proovida, kui võtta ülesandeks kasside üle arvepidamise rakendus ja see Vue.js abil implementeerida. Rakenduse vaates oleks kaks tab-i: "Nimekiri" ja "Lisa kass". Sellest kõrgemal h1 pealkirjas ütleb, mis tab parajasti on valitud.

Kassi kohta salvestage:
* Nimi
* Sünniaasta

Kasside nimekiri salvesta data all.

Vormiväljal lisatud kass lisa nimekirja lõppu (või sordi aastaarvude või eesnimede järgi).

Reaalset, reloadi üleelavat salvestust ärge implementeerige.

== Boonus ==

Kui oskate Vue.js-i piisavalt, et ülesanne tundub igav, võite võistelda ajaliselt, kes esimesena lahenduse postkasti saab, lahendada mõni kodutöö rakenduse alamülesanne või siis lihtsalt õppejõudu veenda oma võimekuses vue.js abil midagi teha.

Kui oskate mõnda muud teeki, siis tehke see näide ära, et oma oskuste pagasit laiendada.

== Viited ==

* [https://vuejs.org/v2/guide/ Vue.js sissejuhatus]
* [https://vuejs.org/v2/guide/comparison.html Vue.js võrdlus teiste raamistikega]

== Esitamine ==
* Salvestada oma töö dijkstra kataloogi public_html/ui/praks3
* Vastavalt harjutustunni kellaajale saata ona töö link aadressile erik.soekov@ttu.ee või jaagup.irve@ttu.ee

UI:Veebilehtede põhjad

2018-02-07T14:21:04Z

ErikSoekov: /* Ülesanne */

{{UI}}
''Selle praktikumi eesmärk on tutvuda ühe veebi ehitamist hõlbustava raamistikuga.''

== Ülesanne ==

Tööd võib teha kahekesi või individuaalselt.

Ülesanne: laadige Skeleton või mõni teine vabalt valitud veebiraamistik (Bootstrap, HTML5 Boilerplate jne) ja looge mõne vabalt valitud otstarbega veebilehe sisselogimise järgne vaade kavandina.

Kavand tähendab, et klõpsimine midagi põnevat ei tee: lihtsalt kujundus, paigutus ja need elemendid, mida kasutaja võiks soovida näha.

Märgake, et see eeldab mõtlemist navigatsioonimudelile: milline on menüü ja kuidas vaadete vahel liigutakse. Märgake, et kasutaja võiks pärast sisselogimist näha kas midagi kasulikku või valikuid võimalikest edasistest tegevustest. Mõelge ka siin enne kujundamist paberprototüübi sodimisele.

On oluline märkida, et kuna kasutaja on juba sisse logitud, siis ta kindlasti tahab näha, kes on sisse logitud, muuta seadeid ja võib olla isegi näha midagi ajalooga seotud nt arhiive.

=== Skeletoni spetsiifika ===

Skeleton on leitav siit: [http://getskeleton.com/ http://getskeleton.com/].

Tutvu elementide valiku ja näitega — et teaksid, mida sellega lihtsal moel ehitada saab.

'''Kui ülesanne on liiga lihtne''', lisage javascriptiga täiendatud sisselogimise näidisfunktsionaalsus. Soovituslikult võite vaadata Vue.js suunas, sest seda kasutame edaspidi javascripti mugavamaks kirjutamiseks.

== Küsimused ==

* Jah, sobib, kui liides ei ole interaktiivne või ei reageeri mobiilvaatele sobilikele laiustele.
* Jah, sobib kasutada teisi põhjasid (template) või mallide jaoks valmis ehitatud vabakasutuses olevaid kujundusi: oluline on teie oskus neid sobivalt kokku panna ja neist liidest ehitada.
* Ei, ei ole okei kui te esitate kellegi teise valmis liidest kui enda oma. Selle eest võib saada dekaani noomituse.

=== Alternatiivid ===

Kui Skeleton teile esteetilistel, poliitilistel, apoliitilistel, religioossetel, ideoloogilistel või muudel põhjustel ei sobi, võite otsida alternatiive Bootstrapiga sarnanevate asjade näol.
* [http://lmgtfy.com/?q=like%3A+Bootstrap+web+framework Las ma aitan Googeldada].

{{UI-boilerplate}}

Mall:UI-boilerplate

2018-02-07T12:50:19Z

ErikSoekov: /* Esitamine */

==Esitamine==
Esitamiseks:
# Laadige töö dijkstrasse kataloogi "public_html/ui/praks2"
# kirjutage kiri, kus on töö klõpsitav aadress ja töö tegiate nimed ja täispikad tudengikoodid.
# saatke kiri oma praktikumi õppejõule
#*erik.soekov@ttu.ee
#*mariliis.haalme@ttu.ee

Mall:UI-boilerplate

2018-02-07T12:50:07Z

ErikSoekov: /* Esitamine */

==Esitamine==
Esitamiseks:
# Laadige töö dijkstrasse kataloogi public_html/ui/praks2
# kirjutage kiri, kus on töö klõpsitav aadress ja töö tegiate nimed ja täispikad tudengikoodid.
# saatke kiri oma praktikumi õppejõule
#*erik.soekov@ttu.ee
#*mariliis.haalme@ttu.ee

Mall:UI-boilerplate

2018-02-07T12:12:36Z

ErikSoekov: /* Esitamine */

==Esitamine==
Esitamiseks:
# Laadige töö dijkstrasse ülesse.
# kirjutage kiri, kus on töö klõpsitav aadress ja töö tegiate nimed ja täispikad tudengikoodid.
# saatke kiri oma praktikumi õppejõule
#*erik.soekov@ttu.ee
#*mariliis.haalme@ttu.ee

Mall:UI-boilerplate

2018-02-07T12:10:57Z

ErikSoekov: /* Esitamine */

==Esitamine==
Esitamiseks:
*1) Laadige töö dijkstrasse ülesse.
*2) kirjutage kiri, kus on töö klõpsitav aadress ja töö tegiate nimed ja täispikad tudengikoodid.
*3) saatke kiri oma praktikumi õppejõule
**erik.soekov@ttu.ee
**mariliis.haalme@ttu.ee

Mall:UI-boilerplate

2018-02-07T11:16:20Z

ErikSoekov: /* Esitamine */

Mall:UI-boilerplate

2018-02-07T11:14:48Z

ErikSoekov: /* Esitamine */

Mall:UI-boilerplate

2018-02-07T11:14:01Z

ErikSoekov: /* Esitamine */

==Esitamine==
Esitamiseks:
*1) Laadige töö dijkstrasse ülesse
*2) kirjutage kiri, kus on töö klõpsitav aadress ja töö tegiate nimed
*3) saatke kiri oma praktikumi õppejõule.