http://courses.cs.taltech.ee/w/index.php?action=history&feed=atom&title=UI%3AKodut%C3%B6%C3%B6_2
UI:Kodutöö 2 - Redigeerimiste ajalugu
2026-05-01T13:19:16Z
Selle lehekülje redigeerimiste ajalugu
MediaWiki 1.35.9
http://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2&diff=10475&oldid=prev
Verrev – 11. märts 2022, kell 09:49
2022-03-11T09:49:40Z
<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: 11. märts 2022, kell 09:49</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l16" >16. rida:</td>
<td colspan="2" class="diff-lineno">16. 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>'''Soovitusi:'''</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>'''Soovitusi:'''</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>* Kasuta nii palju kui võimalik valitud raamistiku standardkomponente - kindlasti on vii ennast kurssi grid-iga, mis Bootstrapi puhul on dokumenteeritud siin: https://getbootstrap.com/docs/<del class="diffchange diffchange-inline">4</del>.<del class="diffchange diffchange-inline">3</del>/layout/grid/</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>* Kasuta nii palju kui võimalik valitud raamistiku standardkomponente - kindlasti on vii ennast kurssi grid-iga, mis Bootstrapi puhul on dokumenteeritud siin: https://getbootstrap.com/docs/<ins class="diffchange diffchange-inline">5</ins>.<ins class="diffchange diffchange-inline">1</ins>/layout/grid/</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>* Jälgi joondust! Kui kasutad raamistiku standardkomponente siis 99.99% tõenäolisusega juhtub see automaatselt.</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>* Jälgi joondust! Kui kasutad raamistiku standardkomponente siis 99.99% tõenäolisusega juhtub see automaatselt.</div></td></tr>
</table>
Verrev
http://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2&diff=9996&oldid=prev
Verrev – 6. aprill 2021, kell 07:27
2021-04-06T07:27:04Z
<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: 6. aprill 2021, kell 07:27</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 - nt. Bootstrappi mis võtaks aluseks loengus räägitud hea kasutajaliidese printsiibid.</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 - nt. Bootstrappi mis võtaks aluseks loengus räägitud hea kasutajaliidese printsiibid.</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 Turing serverisse aadressile http://turing.cs.ttu.ee/~SINU_UNI_ID/iti0209. Lisaks sellele peab olema lähtekood TTÜ Gitlabis https://<del class="diffchange diffchange-inline">turing</del>.cs.ttu.ee projekti ITI0209_2021 kaustas "html_proto".</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 Turing serverisse aadressile http://turing.cs.ttu.ee/~SINU_UNI_ID/iti0209. Lisaks sellele peab olema lähtekood TTÜ Gitlabis https://<ins class="diffchange diffchange-inline">gitlab</ins>.cs.ttu.ee projekti ITI0209_2021 kaustas "html_proto".</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>
Verrev
http://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2&diff=9995&oldid=prev
Verrev – 6. aprill 2021, kell 07:26
2021-04-06T07:26:37Z
<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: 6. aprill 2021, kell 07:26</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 - nt. Bootstrappi mis võtaks aluseks loengus räägitud hea kasutajaliidese printsiibid.</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 - nt. Bootstrappi mis võtaks aluseks loengus räägitud hea kasutajaliidese printsiibid.</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 <del class="diffchange diffchange-inline">Dijkstra </del>serverisse aadressile http://<del class="diffchange diffchange-inline">dijkstra</del>.cs.ttu.ee/~SINU_UNI_ID/iti0209. Lisaks sellele peab olema lähtekood TTÜ Gitlabis https://<del class="diffchange diffchange-inline">gitlab</del>.cs.ttu.ee projekti ITI0209_2021 kaustas "html_proto".</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 <ins class="diffchange diffchange-inline">Turing </ins>serverisse aadressile http://<ins class="diffchange diffchange-inline">turing</ins>.cs.ttu.ee/~SINU_UNI_ID/iti0209. Lisaks sellele peab olema lähtekood TTÜ Gitlabis https://<ins class="diffchange diffchange-inline">turing</ins>.cs.ttu.ee projekti ITI0209_2021 kaustas "html_proto".</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>
Verrev
http://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2&diff=9993&oldid=prev
Verrev – 6. aprill 2021, kell 03:31
2021-04-06T03:31:05Z
<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: 6. aprill 2021, kell 03:31</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. '''See nõue on kohustuslik - ka ülejäänud kodutöö puntid saab arvestatud alles siis kui see on realiseeritud.''' (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">. Nii pildid kui sisutekstid peavad olema "päris" - mitte igal lehel, küll toote põhiflow-ga seotutel</ins>. '''See nõue on kohustuslik - ka ülejäänud kodutöö puntid saab arvestatud alles siis kui see on realiseeritud.''' (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 Bootstrappi, 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. '''Inline-stiilide ja !important tagi kasutamine CSSis on keelatud.''' (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 on realiseeritud mõnel CSS raamistiku standardkomponentidel - kursuse käigus kasutame Bootstrappi, 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. '''Inline-stiilide ja !important tagi kasutamine CSSis on keelatud.''' (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># Loodud on stiiliraamat. Stiiliraamat on lingitud loodava rakenduse menüüsse ja kättesaadav lehelt `style_guide.html` (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># Loodud on stiiliraamat. Stiiliraamat on lingitud loodava rakenduse menüüsse ja kättesaadav lehelt `style_guide.html` (2p)</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;"><div>* Jälgi joondust! Kui kasutad raamistiku standardkomponente siis 99.99% tõenäolisusega juhtub see automaatselt.</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>* Jälgi joondust! Kui kasutad raamistiku standardkomponente siis 99.99% tõenäolisusega juhtub see automaatselt.</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>* Oma pilte kasutada on hea, aga nende väljaotsimine otsimine tülikas. Pildid saad lihtsalt lisada mõne pildiplaceholderite teenuse abil, näiteks https://picsum.photos/ või https://loremflickr.com/</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>* Oma pilte kasutada on hea, aga nende väljaotsimine otsimine tülikas. Pildid saad <ins class="diffchange diffchange-inline">katsetamise ajal </ins>lihtsalt lisada mõne pildiplaceholderite teenuse abil, näiteks https://picsum.photos/ või https://loremflickr.com/<ins class="diffchange diffchange-inline">. Kas kohe või hiljem saad leida sobivad fotod mõnest vabavara-pildipangast, nt. Pexels.com</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>* Kõige lihtsam viis eelprotsessorite kasutamiseks on teha seda kasutades IDE sisseehitatud pluginaid. IntelliJ toodete puhul on hea õpetus siin: https://www.jetbrains.com/help/webstorm/transpiling-sass-less-and-scss-to-css.html Kui kasutate mõnda muud editori, oleks esimene samm leida LESS/SASS plugin. Juhul kui pluginat leida ei õnnestu, siis SASSi puhul on hea juhend siin: https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275 ja LESSi puhul siin: https://www.npmjs.com/package/less-watch-compiler</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>* Kõige lihtsam viis eelprotsessorite kasutamiseks on teha seda kasutades IDE sisseehitatud pluginaid. IntelliJ toodete puhul on hea õpetus siin: https://www.jetbrains.com/help/webstorm/transpiling-sass-less-and-scss-to-css.html Kui kasutate mõnda muud editori, oleks esimene samm leida LESS/SASS plugin. Juhul kui pluginat leida ei õnnestu, siis SASSi puhul on hea juhend siin: https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275 ja LESSi puhul siin: https://www.npmjs.com/package/less-watch-compiler</div></td></tr>
</table>
Verrev
http://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2&diff=9992&oldid=prev
Verrev – 6. aprill 2021, kell 03:29
2021-04-06T03:29:23Z
<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: 6. aprill 2021, kell 03:29</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l12" >12. rida:</td>
<td colspan="2" class="diff-lineno">12. 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. (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># 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. (1p)</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># 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. (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># 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. (1p)</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> </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><ins class="diffchange diffchange-inline"># Rakendus on arvestab vaegnägijate erisustega. (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;"><div>'''Soovitusi:'''</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>'''Soovitusi:'''</div></td></tr>
</table>
Verrev
http://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2&diff=9991&oldid=prev
Verrev – 6. aprill 2021, kell 03:27
2021-04-06T03:27:29Z
<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: 6. aprill 2021, kell 03:27</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. '''<del class="diffchange diffchange-inline">Juhul </del>kui see <del class="diffchange diffchange-inline">nõue </del>on <del class="diffchange diffchange-inline">täitmata, siis tööd kaitsmisele ei lubata</del>.''' (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">See nõue on kohustuslik - ka ülejäänud kodutöö puntid saab arvestatud alles siis </ins>kui see on <ins class="diffchange diffchange-inline">realiseeritud</ins>.''' (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 Bootstrappi, 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. '''Inline-stiilide ja !important tagi kasutamine CSSis on keelatud.''' (<del class="diffchange diffchange-inline">3p</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 Bootstrappi, 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. '''Inline-stiilide ja !important tagi kasutamine CSSis on keelatud.''' (<ins class="diffchange diffchange-inline">2p)</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 class="diffchange diffchange-inline"># Loodud on stiiliraamat. Stiiliraamat on lingitud loodava rakenduse menüüsse ja kättesaadav lehelt `style_guide.html` (2p</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>
<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. <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 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. (1p)</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 class="diffchange diffchange-inline"># 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 </del>(1p)</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. (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># 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. (1p)</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="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;"></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>
Verrev
http://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2&diff=9990&oldid=prev
Verrev – 6. aprill 2021, kell 03:23
2021-04-06T03:23:24Z
<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: 6. aprill 2021, kell 03:23</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 - nt. Bootstrappi mis võtaks aluseks loengus räägitud hea kasutajaliidese printsiibid.</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 - nt. Bootstrappi mis võtaks aluseks loengus räägitud hea kasutajaliidese printsiibid.</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/~SINU_UNI_ID/iti0209.</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/~SINU_UNI_ID/iti0209<ins class="diffchange diffchange-inline">. Lisaks sellele peab olema lähtekood TTÜ Gitlabis https://gitlab.cs.ttu.ee projekti ITI0209_2021 kaustas "html_proto"</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>'''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="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 <del class="diffchange diffchange-inline">Bootstrap 4</del>, 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. '''Inline-stiilide ja !important tagi kasutamine CSSis on keelatud.''' (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 <ins class="diffchange diffchange-inline">Bootstrappi</ins>, 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. '''Inline-stiilide ja !important tagi kasutamine CSSis on keelatud.''' (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>
Verrev
http://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2&diff=9989&oldid=prev
Verrev – 6. aprill 2021, kell 03:20
2021-04-06T03:20:39Z
<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: 6. aprill 2021, kell 03:20</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 - nt. Bootstrappi mis võtaks aluseks loengus räägitud hea kasutajaliidese printsiibid.</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 - nt. Bootstrappi mis võtaks aluseks loengus räägitud hea kasutajaliidese printsiibid.</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/~<del class="diffchange diffchange-inline">Eesnimi.Perenimi</del>/<del class="diffchange diffchange-inline">kasutajaliidesed/prax2/ kus Eesnimi.Perenimi on sinu kasutajatunnus arvutiklassides (suured/väikesed tähed õigesti, kui on lisanumbreid vms, siis need ka)</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>Töö peab esitamiseks olema paigutatud Dijkstra serverisse aadressile http://dijkstra.cs.ttu.ee/~<ins class="diffchange diffchange-inline">SINU_UNI_ID</ins>/<ins class="diffchange diffchange-inline">iti0209</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>'''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>
Verrev
http://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2&diff=9988&oldid=prev
Verrev – 6. aprill 2021, kell 03:19
2021-04-06T03:19: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: 6. aprill 2021, kell 03:19</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="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>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 <del class="diffchange diffchange-inline">ja parimaid CSS struktureerimise praktikaid</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>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 <ins class="diffchange diffchange-inline">- nt. Bootstrappi mis võtaks aluseks loengus räägitud hea kasutajaliidese printsiibid</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>Töö peab esitamiseks olema paigutatud Dijkstra serverisse aadressile http://dijkstra.cs.ttu.ee/~Eesnimi.Perenimi/kasutajaliidesed/prax2/ 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="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>Töö peab esitamiseks olema paigutatud Dijkstra serverisse aadressile http://dijkstra.cs.ttu.ee/~Eesnimi.Perenimi/kasutajaliidesed/prax2/ kus Eesnimi.Perenimi on sinu kasutajatunnus arvutiklassides (suured/väikesed tähed õigesti, kui on lisanumbreid vms, siis need ka).</div></td></tr>
</table>
Verrev
http://courses.cs.taltech.ee/w/index.php?title=UI:Kodut%C3%B6%C3%B6_2&diff=9178&oldid=prev
Verrev – 16. märts 2020, kell 19:27
2020-03-16T19:27:07Z
<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: 16. märts 2020, kell 19:27</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l18" >18. rida:</td>
<td colspan="2" class="diff-lineno">18. 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>'''Soovitusi:'''</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>'''Soovitusi:'''</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>* Kasuta nii palju kui võimalik valitud raamistiku standardkomponente - kindlasti on vii ennast kurssi grid-iga, mis Bootstrapi puhul on dokumenteeritud siin: https://getbootstrap.com/docs/4.<del class="diffchange diffchange-inline">0</del>/layout/grid/</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>* Kasuta nii palju kui võimalik valitud raamistiku standardkomponente - kindlasti on vii ennast kurssi grid-iga, mis Bootstrapi puhul on dokumenteeritud siin: https://getbootstrap.com/docs/4.<ins class="diffchange diffchange-inline">3</ins>/layout/grid/</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>* Jälgi joondust! Kui kasutad raamistiku standardkomponente siis 99.99% tõenäolisusega juhtub see automaatselt.</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>* Jälgi joondust! Kui kasutad raamistiku standardkomponente siis 99.99% tõenäolisusega juhtub see automaatselt.</div></td></tr>
</table>
Verrev