http://courses.cs.taltech.ee/w/index.php?action=history&feed=atom&title=UI%3AKodut%C3%B6%C3%B6_2_%282019%29UI:Kodutöö 2 (2019) - Redigeerimiste ajalugu2026-05-21T21:08:23ZSelle lehekülje redigeerimiste ajaluguMediaWiki 1.35.9http://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2_(2019)&diff=9156&oldid=prevVerrev – 3. märts 2020, kell 16:132020-03-03T16:13:08Z<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="et">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 3. märts 2020, kell 16:13</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l6" >6. rida:</td>
<td colspan="2" class="diff-lineno">6. rida:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni. Rakenduses peab olema jälgitud joondust ja elementide paigutust, s.t isegi ilma eraldi stiilimata ei tohi elemendid olla nihkes ega koledad. '''Juhul kui see nõue on täitmata, siis tööd kaitsmisele ei lubata.''' (5p)</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni. Rakenduses peab olema jälgitud joondust ja elementide paigutust, s.t isegi ilma eraldi stiilimata ei tohi elemendid olla nihkes ega koledad. '''Juhul kui see nõue on täitmata, siis tööd kaitsmisele ei lubata.''' (5p)</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrap 4, aga lubatud on nt Semantic UI, Material CSS, Zepto vms. Ära hakka tekitama enda elemente vaid kasuta raamistikku sisseehitatuid. Kõigis eelnimestatud raamistikes on enamus elemente mida vaja peaks olema juba olemas. Oluline on valida õige element/komponent mida kasutada. Alustamiseks on hea kopeerida lähtekood näidetest, nt https://getbootstrap.com/docs/4.3/examples/ ja muuta vaateid vastavalt enda vajadustele. (3p)</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrap 4, aga lubatud on nt Semantic UI, Material CSS, Zepto vms. Ära hakka tekitama enda elemente vaid kasuta raamistikku sisseehitatuid. Kõigis eelnimestatud raamistikes on enamus elemente mida vaja peaks olema juba olemas. Oluline on valida õige element/komponent mida kasutada. Alustamiseks on hea kopeerida lähtekood näidetest, nt https://getbootstrap.com/docs/4.3/examples/ ja muuta vaateid vastavalt enda vajadustele. <ins class="diffchange diffchange-inline">'''Inline-stiilide ja !important tagi kasutamine CSSis on keelatud.''' </ins>(3p)</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. (2p)</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. (2p)</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud prototüüpi on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni. (1p)</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud prototüüpi on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni. (1p)</div></td></tr>
</table>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2_(2019)&diff=9155&oldid=prevVerrev – 3. märts 2020, kell 16:122020-03-03T16:12:06Z<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="et">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 3. märts 2020, kell 16:12</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l5" >5. rida:</td>
<td colspan="2" class="diff-lineno">5. rida:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Nõuded:'''</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Nõuded:'''</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni. Rakenduses peab olema jälgitud joondust ja elementide paigutust, s.t isegi ilma eraldi stiilimata ei tohi elemendid olla nihkes ega koledad. (5p)</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni. Rakenduses peab olema jälgitud joondust ja elementide paigutust, s.t isegi ilma eraldi stiilimata ei tohi elemendid olla nihkes ega koledad. <ins class="diffchange diffchange-inline">'''Juhul kui see nõue on täitmata, siis tööd kaitsmisele ei lubata.''' </ins>(5p)</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrap 4, aga lubatud on nt Semantic UI, Material CSS, Zepto vms. Ära hakka tekitama enda elemente vaid kasuta raamistikku sisseehitatuid. Kõigis eelnimestatud raamistikes on enamus elemente mida vaja peaks olema juba olemas. Oluline on valida õige element/komponent mida kasutada. Alustamiseks on hea kopeerida lähtekood näidetest, nt https://getbootstrap.com/docs/4.3/examples/ ja muuta vaateid vastavalt enda vajadustele. (3p)</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrap 4, aga lubatud on nt Semantic UI, Material CSS, Zepto vms. Ära hakka tekitama enda elemente vaid kasuta raamistikku sisseehitatuid. Kõigis eelnimestatud raamistikes on enamus elemente mida vaja peaks olema juba olemas. Oluline on valida õige element/komponent mida kasutada. Alustamiseks on hea kopeerida lähtekood näidetest, nt https://getbootstrap.com/docs/4.3/examples/ ja muuta vaateid vastavalt enda vajadustele. (3p)</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. (2p)</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. (2p)</div></td></tr>
</table>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2_(2019)&diff=8242&oldid=prevVerrev – 25. märts 2019, kell 16:222019-03-25T16:22:53Z<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="et">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 25. märts 2019, kell 16:22</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >1. rida:</td>
<td colspan="2" class="diff-lineno">1. rida:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Esimese praktikumi käigus saite valmis ja valideerisite staatilise prototüübi. Teise praktikumitöö põhieesmärk on realiseerida staatiline prototüüp HTML lehtedena kasutades selleks standardraamistikke ja parimaid CSS struktureerimise praktikaid.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Esimese praktikumi käigus saite valmis ja valideerisite staatilise prototüübi. Teise praktikumitöö põhieesmärk on realiseerida staatiline prototüüp HTML lehtedena kasutades selleks standardraamistikke ja parimaid CSS struktureerimise praktikaid.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Töö peab esitamiseks olema paigutatud Dijkstra serverisse aadressile http://dijkstra.cs.ttu.ee/~Eesnimi.Perenimi/<del class="diffchange diffchange-inline">kasutajaliidesed2</del>/ kus Eesnimi.Perenimi on sinu kasutajatunnus arvutiklassides (suured/väikesed tähed õigesti, kui on lisanumbreid vms, siis need ka).</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Töö peab esitamiseks olema paigutatud Dijkstra serverisse aadressile http://dijkstra.cs.ttu.ee/~Eesnimi.Perenimi/<ins class="diffchange diffchange-inline">kasutajaliidesed/prax2</ins>/ kus Eesnimi.Perenimi on sinu kasutajatunnus arvutiklassides (suured/väikesed tähed õigesti, kui on lisanumbreid vms, siis need ka).</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Nõuded:'''</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Nõuded:'''</div></td></tr>
</table>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2_(2019)&diff=8241&oldid=prevVerrev – 25. märts 2019, kell 16:182019-03-25T16:18:51Z<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="et">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 25. märts 2019, kell 16:18</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l6" >6. rida:</td>
<td colspan="2" class="diff-lineno">6. rida:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni. Rakenduses peab olema jälgitud joondust ja elementide paigutust, s.t isegi ilma eraldi stiilimata ei tohi elemendid olla nihkes ega koledad. (5p)</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni. Rakenduses peab olema jälgitud joondust ja elementide paigutust, s.t isegi ilma eraldi stiilimata ei tohi elemendid olla nihkes ega koledad. (5p)</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrap 4, aga lubatud on nt Semantic UI, Material CSS, Zepto vms. (3p)</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrap 4, aga lubatud on nt Semantic UI, Material CSS, Zepto vms<ins class="diffchange diffchange-inline">. Ära hakka tekitama enda elemente vaid kasuta raamistikku sisseehitatuid. Kõigis eelnimestatud raamistikes on enamus elemente mida vaja peaks olema juba olemas. Oluline on valida õige element/komponent mida kasutada. Alustamiseks on hea kopeerida lähtekood näidetest, nt https://getbootstrap.com/docs/4.3/examples/ ja muuta vaateid vastavalt enda vajadustele</ins>. (3p)</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. (2p)</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. (2p)</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud prototüüpi on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni. (1p)</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud prototüüpi on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni. (1p)</div></td></tr>
</table>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2_(2019)&diff=8240&oldid=prevVerrev – 25. märts 2019, kell 16:122019-03-25T16:12:36Z<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="et">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 25. märts 2019, kell 16:12</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l6" >6. rida:</td>
<td colspan="2" class="diff-lineno">6. rida:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni. Rakenduses peab olema jälgitud joondust ja elementide paigutust, s.t isegi ilma eraldi stiilimata ei tohi elemendid olla nihkes ega koledad. (5p)</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni. Rakenduses peab olema jälgitud joondust ja elementide paigutust, s.t isegi ilma eraldi stiilimata ei tohi elemendid olla nihkes ega koledad. (5p)</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrap 4, aga lubatud on nt Semantic UI, Material CSS, Zepto vms. (<del class="diffchange diffchange-inline">2p</del>)</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrap 4, aga lubatud on nt Semantic UI, Material CSS, Zepto vms. (<ins class="diffchange diffchange-inline">3p</ins>)</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. (2p)</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. (2p)</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud prototüüpi on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni. (1p)</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud prototüüpi on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni. (1p)</div></td></tr>
</table>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2_(2019)&diff=8239&oldid=prevVerrev – 25. märts 2019, kell 16:112019-03-25T16:11:26Z<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="et">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 25. märts 2019, kell 16:11</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l5" >5. rida:</td>
<td colspan="2" class="diff-lineno">5. rida:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Nõuded:'''</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Nõuded:'''</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni. Rakenduses peab olema jälgitud joondust ja elementide paigutust, s.t isegi ilma eraldi stiilimata ei tohi elemendid olla nihkes ega koledad. </div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni. Rakenduses peab olema jälgitud joondust ja elementide paigutust, s.t isegi ilma eraldi stiilimata ei tohi elemendid olla nihkes ega koledad. <ins class="diffchange diffchange-inline">(5p)</ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrap 4, aga lubatud on nt Semantic UI, Material CSS, Zepto vms.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrap 4, aga lubatud on nt Semantic UI, Material CSS, Zepto vms. <ins class="diffchange diffchange-inline">(2p)</ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. <del class="diffchange diffchange-inline">l</del></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. <ins class="diffchange diffchange-inline">(2p)</ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud prototüüpi on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud prototüüpi on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni. <ins class="diffchange diffchange-inline">(1p)</ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema stiilitud. Stiilimiseks tuleb kasutada CSS eelprotsessoreid - LESSi, SASSi vms. Standardkomponentide stiilimiseks lisage vaadetele oma stiilifail mis muudab värvid, fondid, jms. Kui enda stiilifail vaadetel küljest ära võtta peab rakendus olema ikkagi kasutatav, st. paigustus joondus jms peavad jääma paika.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema stiilitud. Stiilimiseks tuleb kasutada CSS eelprotsessoreid - LESSi, SASSi vms. Standardkomponentide stiilimiseks lisage vaadetele oma stiilifail mis muudab värvid, fondid, jms. Kui enda stiilifail vaadetel küljest ära võtta peab rakendus olema ikkagi kasutatav, st. paigustus joondus jms peavad jääma paika. <ins class="diffchange diffchange-inline">(2p)</ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab CSS strukturereerimiseks kasutama mõnda tunnustatud nimetamisloogikat. Kursuse käigus vaatame BEMi, aga lubatud on ka mõne muu metoodika kasutamine, nt OOCSS, LSCSS vms</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab CSS strukturereerimiseks kasutama mõnda tunnustatud nimetamisloogikat. Kursuse käigus vaatame BEMi, aga lubatud on ka mõne muu metoodika kasutamine, nt OOCSS, LSCSS vms <ins class="diffchange diffchange-inline">(1p)</ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># Loodavate lehtede HTML peab olema valideeruv. Valideerimiseks on kõige lihtsam kasutada Web Developer brauseripluginat (https://chrispederick.com/) Kui oled selle enda brauserile lisanud (töötab Firefoxis, Operas ja Chromes) vali sealt "Tools -> Validate Local HTML" oma koodi kontrollimiseks lokaalses arvutis ja "Tools -> Validate HTML" serverisse paigaldatud koodi vaatamiseks. </div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># Loodavate lehtede HTML peab olema valideeruv. Valideerimiseks on kõige lihtsam kasutada Web Developer brauseripluginat (https://chrispederick.com/) Kui oled selle enda brauserile lisanud (töötab Firefoxis, Operas ja Chromes) vali sealt "Tools -> Validate Local HTML" oma koodi kontrollimiseks lokaalses arvutis ja "Tools -> Validate HTML" serverisse paigaldatud koodi vaatamiseks. <ins class="diffchange diffchange-inline">(1p)</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2_(2019)&diff=8238&oldid=prevVerrev – 25. märts 2019, kell 16:092019-03-25T16:09:06Z<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="et">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 25. märts 2019, kell 16:09</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l5" >5. rida:</td>
<td colspan="2" class="diff-lineno">5. rida:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Nõuded:'''</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Nõuded:'''</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni. </div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni<ins class="diffchange diffchange-inline">. Rakenduses peab olema jälgitud joondust ja elementide paigutust, s.t isegi ilma eraldi stiilimata ei tohi elemendid olla nihkes ega koledad</ins>. </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrap 4, aga lubatud on nt Semantic UI, Material CSS, Zepto vms.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrap 4, aga lubatud on nt Semantic UI, Material CSS, Zepto vms.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. l</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. l</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l11" >11. rida:</td>
<td colspan="2" class="diff-lineno">11. rida:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema stiilitud. Stiilimiseks tuleb kasutada CSS eelprotsessoreid - LESSi, SASSi vms. Standardkomponentide stiilimiseks lisage vaadetele oma stiilifail mis muudab värvid, fondid, jms. Kui enda stiilifail vaadetel küljest ära võtta peab rakendus olema ikkagi kasutatav, st. paigustus joondus jms peavad jääma paika.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema stiilitud. Stiilimiseks tuleb kasutada CSS eelprotsessoreid - LESSi, SASSi vms. Standardkomponentide stiilimiseks lisage vaadetele oma stiilifail mis muudab värvid, fondid, jms. Kui enda stiilifail vaadetel küljest ära võtta peab rakendus olema ikkagi kasutatav, st. paigustus joondus jms peavad jääma paika.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab CSS strukturereerimiseks kasutama mõnda tunnustatud nimetamisloogikat. Kursuse käigus vaatame BEMi, aga lubatud on ka mõne muu metoodika kasutamine, nt OOCSS, LSCSS vms</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab CSS strukturereerimiseks kasutama mõnda tunnustatud nimetamisloogikat. Kursuse käigus vaatame BEMi, aga lubatud on ka mõne muu metoodika kasutamine, nt OOCSS, LSCSS vms</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"># Rakenduses peab olema jälgitud joondust ja elementide paigutust. </del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Loodavate lehtede HTML peab olema valideeruv. Valideerimiseks on kõige lihtsam kasutada Web Developer brauseripluginat (https://chrispederick.com/) Kui oled selle enda brauserile lisanud (töötab Firefoxis, Operas ja Chromes) vali sealt "Tools -> Validate Local HTML" oma koodi kontrollimiseks lokaalses arvutis ja "Tools -> Validate HTML" serverisse paigaldatud koodi vaatamiseks. </div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Loodavate lehtede HTML peab olema valideeruv. Valideerimiseks on kõige lihtsam kasutada Web Developer brauseripluginat (https://chrispederick.com/) Kui oled selle enda brauserile lisanud (töötab Firefoxis, Operas ja Chromes) vali sealt "Tools -> Validate Local HTML" oma koodi kontrollimiseks lokaalses arvutis ja "Tools -> Validate HTML" serverisse paigaldatud koodi vaatamiseks. </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2_(2019)&diff=8237&oldid=prevVerrev – 25. märts 2019, kell 16:042019-03-25T16:04:30Z<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="et">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 25. märts 2019, kell 16:04</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l6" >6. rida:</td>
<td colspan="2" class="diff-lineno">6. rida:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni. </div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakendus peab võimaldama läbida kasutajal loodava teenuse põhiflow algusest lõpuni. </div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrap 4, aga lubatud on nt Semantic UI, Material CSS, Zepto vms.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrap 4, aga lubatud on nt Semantic UI, Material CSS, Zepto vms.</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. l</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. l</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud prototüüpi on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud prototüüpi on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni.</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema stiilitud. Stiilimiseks tuleb kasutada CSS eelprotsessoreid - LESSi, SASSi vms. Standardkomponentide stiilimiseks lisage vaadetele oma stiilifail mis muudab värvid, fondid, jms. Kui enda stiilifail vaadetel küljest ära võtta peab rakendus olema ikkagi kasutatav, st. paigustus joondus jms peavad jääma paika.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema stiilitud. Stiilimiseks tuleb kasutada CSS eelprotsessoreid - LESSi, SASSi vms. Standardkomponentide stiilimiseks lisage vaadetele oma stiilifail mis muudab värvid, fondid, jms. Kui enda stiilifail vaadetel küljest ära võtta peab rakendus olema ikkagi kasutatav, st. paigustus joondus jms peavad jääma paika.</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab CSS strukturereerimiseks kasutama mõnda tunnustatud nimetamisloogikat. Kursuse käigus vaatame BEMi, aga lubatud on ka mõne muu metoodika kasutamine, nt OOCSS, LSCSS vms</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab CSS strukturereerimiseks kasutama mõnda tunnustatud nimetamisloogikat. Kursuse käigus vaatame BEMi, aga lubatud on ka mõne muu metoodika kasutamine, nt OOCSS, LSCSS vms</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakenduses peab olema jälgitud joondust ja elementide paigutust. </div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakenduses peab olema jälgitud joondust ja elementide paigutust. </div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Loodavate lehtede HTML peab olema valideeruv. Valideerimiseks on kõige lihtsam kasutada Web Developer brauseripluginat (https://chrispederick.com/) Kui oled selle enda brauserile lisanud (töötab Firefoxis, Operas ja Chromes) vali sealt "Tools -> Validate Local HTML" oma koodi kontrollimiseks lokaalses arvutis ja "Tools -> Validate HTML" serverisse paigaldatud koodi vaatamiseks. </div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Loodavate lehtede HTML peab olema valideeruv. Valideerimiseks on kõige lihtsam kasutada Web Developer brauseripluginat (https://chrispederick.com/) Kui oled selle enda brauserile lisanud (töötab Firefoxis, Operas ja Chromes) vali sealt "Tools -> Validate Local HTML" oma koodi kontrollimiseks lokaalses arvutis ja "Tools -> Validate HTML" serverisse paigaldatud koodi vaatamiseks. </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2_(2019)&diff=8236&oldid=prevVerrev – 25. märts 2019, kell 16:032019-03-25T16:03:48Z<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="et">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 25. märts 2019, kell 16:03</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l11" >11. rida:</td>
<td colspan="2" class="diff-lineno">11. rida:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. l</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema kasutatav nii desktopis kui mobiilis. Kui järgisid eelmist punkti, s.t. ehitasid rakenduse mõnele standardraamistikule siis suure tõenäosusega enam suuremaid lisategevusi tegema ei pea. l</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud <del class="diffchange diffchange-inline">protot üüpi </del>on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud <ins class="diffchange diffchange-inline">prototüüpi </ins>on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema stiilitud. Stiilimiseks tuleb kasutada CSS eelprotsessoreid - LESSi, SASSi vms. Standardkomponentide stiilimiseks lisage vaadetele oma stiilifail mis muudab värvid, fondid, jms. Kui enda stiilifail vaadetel küljest ära võtta peab rakendus olema ikkagi kasutatav, st. paigustus joondus jms peavad jääma paika.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema stiilitud. Stiilimiseks tuleb kasutada CSS eelprotsessoreid - LESSi, SASSi vms. Standardkomponentide stiilimiseks lisage vaadetele oma stiilifail mis muudab värvid, fondid, jms. Kui enda stiilifail vaadetel küljest ära võtta peab rakendus olema ikkagi kasutatav, st. paigustus joondus jms peavad jääma paika.</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l20" >20. rida:</td>
<td colspan="2" class="diff-lineno">20. rida:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Loodavate lehtede HTML peab olema valideeruv. Valideerimiseks on kõige lihtsam kasutada Web Developer brauseripluginat (https://chrispederick.com/) Kui oled selle enda brauserile lisanud (töötab Firefoxis, Operas ja Chromes) vali sealt "Tools -> Validate Local HTML" oma koodi kontrollimiseks lokaalses arvutis ja "Tools -> Validate HTML" serverisse paigaldatud koodi vaatamiseks. </div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Loodavate lehtede HTML peab olema valideeruv. Valideerimiseks on kõige lihtsam kasutada Web Developer brauseripluginat (https://chrispederick.com/) Kui oled selle enda brauserile lisanud (töötab Firefoxis, Operas ja Chromes) vali sealt "Tools -> Validate Local HTML" oma koodi kontrollimiseks lokaalses arvutis ja "Tools -> Validate HTML" serverisse paigaldatud koodi vaatamiseks. </div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2_(2019)&diff=8235&oldid=prevVerrev – 25. märts 2019, kell 16:032019-03-25T16:03:16Z<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="et">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 25. märts 2019, kell 16:03</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l13" >13. rida:</td>
<td colspan="2" class="diff-lineno">13. rida:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud protot üüpi on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># HTML rakenduse flow ja elementide paigutus peab vastama 1 praktikumitöös joonistatud vaadetele. Kui realisatsiooni käigus selgub et joonistatud protot üüpi on keeruline või ebaotstarbekas sellisel kujul realiseerida, tuleb muudatused viia prototüüpi - s.t. HTML ja proto peavad kooskõlas olema. Võib juhtuda, et HTMLi tehes selgub, et päris nii nagu joonistatud on liiga keeruline või ebaotstarbekas. Sellisel juhul tuleb muuta staatilist protoüüpi. See tagab, et saame suhtuda staatilisse prototüüpi kui dokumentatsiooni.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema stiilitud. Stiilimiseks tuleb kasutada CSS eelprotsessoreid - LESSi, SASSi vms</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab olema stiilitud. Stiilimiseks tuleb kasutada CSS eelprotsessoreid - LESSi, SASSi vms<ins class="diffchange diffchange-inline">. Standardkomponentide stiilimiseks lisage vaadetele oma stiilifail mis muudab värvid, fondid, jms. Kui enda stiilifail vaadetel küljest ära võtta peab rakendus olema ikkagi kasutatav, st. paigustus joondus jms peavad jääma paika.</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab CSS strukturereerimiseks kasutama mõnda tunnustatud nimetamisloogikat. Kursuse käigus vaatame BEMi, aga lubatud on ka mõne muu metoodika kasutamine, nt OOCSS, LSCSS vms</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div># Rakendus peab CSS strukturereerimiseks kasutama mõnda tunnustatud nimetamisloogikat. Kursuse käigus vaatame BEMi, aga lubatud on ka mõne muu metoodika kasutamine, nt OOCSS, LSCSS vms</div></td></tr>
</table>Verrev