MTAT 03 230 Veebirakenduste loomine Sissejuhatus Siim Karus
MTAT. 03. 230 Veebirakenduste loomine Sissejuhatus Siim Karus siim. karus@ut. ee kevad 2017 https: //courses. cs. ut. ee/2017/vl
Aines käsitletavad teemad • Veebitehnoloogiad • Inimorienteeritud veebirakenduste standardid • Veebirakenduste disaini põhimõtted ja praktikad • Veebirakenduste turvalisus 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 2
Aine eesmärgid • Tutvustada veebirakenduste loomist ning selleks kasutatavaid kaasaegseid tehnoloogiaid. • Anda praktiline kogemus veebirakenduse loomisel. 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 3
Kursuse lõpus • Peaksite oskama – Kirjeldada ja võrrelda erinevaid veebirakenduste loomise tehnoloogiaid – Kirjeldada ja hinnata veebirakendusi erinevatest aspektidest lähtuvalt – Kasutada HTML, CSS ja Javascript keeli veebirakenduse loomiseks – Kirjeldada ja võrrelda veebirakenduste arhitektuuri – Põhjendada veebirakenduse disainimisel tehtud otsuseid 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 4
XHTML sisu näide 2 <body> <h 1 id="Sissejuhatus">Sissejuhatus</h 1> <p> Veebirakenduste loomine on küll lihtne, kuid head tulemust ilma õppimata siiski ei saa. </p> <p> Veeb oli algselt mõeldud dokumentide levitamiseks ja redigeerimiseks on-line. Seega ei olnud kujundus HTML seisukohalt oluline. </p> </body> 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 5
CSS. viited { background-color: yellow; text-align: center; } body { background-image: URL("minutaust. jpg"); } h 1 { border-color: blue; border-style: groove; border-width: 0. 2 em; } #HTMLCSS { border-top: 0. 4 em double maroon; } p{ background-color: white; } 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 6
ECMAScript var o 2 = { p 1: 5 + 9, p 2: null, testimine: "See on test" }; for (var a. Name in o 2) { window. alert("Omaduse " + a. Name + " väärtus on: " + o 2 [a. Name]); } Helle Hein 2011 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 7
XML <? xml version="1. 0" encoding="utf-8"? > <ut: course xmlns: ut="http: //www. ut. ee" kood="MTAT. 03. 230" nimi="Veebirakenduste loomine"> <ut: teemad> <ut: teema>Sissejuhatus</ut: teema> <ut: teema>HTML, CSS</ut: teema> <ut: teema>Veebiserverid, HTTP</ut: teema> <ut: teema>Javascript, DOM</ut: teema> </ut: teemad> <ut: loeng päev="Neljapäev" kell="10. 15 - 12. 00" ruum="111"/> </ut: course> 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 8
HTML 1989 HTML 1995 HTML 3 1994 HTML+ HTML 2 1989 1997 Trident 1998 Gecko 2000 KHTML 2003 Web. Kit 1998 HTML 4 2000 (2002) XHTML 1. 0 1999 2010 XHTML 1. 1 2004 1997 (1994) Opera 1995 Internet Explorer 1994 Netscape 27. 08. 2021 2014 (X)HTML 5 1999 HTML 4. 01 1997 HTML 3. 2 1994 1993 Lynx Mosaic 2002 Presto 2002 (1998) Mozilla 2009 2014 2008 Chrome 2004 Mozilla Firefox 2003 Safari MTAT. 03. 230 Veebirakenduste loomine 9
Javascript 1995 Live. Script (Brendan Eich) Java. Script (Netscape 2. 0) 1997 Trident 1998 Gecko 2002 Presto 2000 KHTML 2003 Web. Kit 1996 JScript (IE 3. 0) 2006 ECMAScript 1. 7 „stable enough“ 2011 ECMAScript 5. 1 1998 ECMAScript 1. 0 1989 1994 1993 Lynx Mosaic 1999 1997 (1994) Opera 1995 Internet Explorer 1994 Netscape 27. 08. 2021 2004 2002 (1998) Mozilla 2009 2014 2008 Chrome 2004 Mozilla Firefox 2003 Safari MTAT. 03. 230 Veebirakenduste loomine 10
![(XPath) • /*[1]//kasutajad/kasutaja[. /@id=$kid] • • / - dokument /*[1] - esimene element dokumendis](http://slidetodoc.com/presentation_image_h2/6f4e5d8b23414d249269c7f6ecff6af8/image-11.jpg "(XPath) • /*[1]//kasutajad/kasutaja[. /@id=$kid] • • / - dokument /*[1] - esimene element dokumendis")
(XPath) • /*[1]//kasutajad/kasutaja[. /@id=$kid] • • / - dokument /*[1] - esimene element dokumendis /*[1]//kasutajad – alamad elemendid nimega “kasutajad” /*[1]//kasutajad/kasutaja[. /@id=$kid] – alamelement nimega “kasutaja” ja atribuudi id väärtusega $kid (parameeter) 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 11
(XSLT) • <!-- tegevuse nupu loomine --> • <xsl: template name="t_esita_tegevuse_nupp" match="tegevus" priority="1"> – <xsl: param name="tegevus" select=". "/> – <xsl: variable name="tegevuse_url"> • <xsl: call-template name="t_pane_kokku_tegevuse_url"> – <xsl: with-param name="tegevus" select="$tegevus"/> • </xsl: call-template> – </xsl: variable> – <a href="{$tegevuse_url}" title="{$tegevus/@kirjeldus}" class="nupp"> • <xsl: value-of select="$tegevus/@nimetus"/> – </a> • </xsl: template> 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 12
Loengud • 1 x nädalas • Loevad – Siim Karus – (Külalislektor) • Loengutes osalemine on vabatahtlik kuid soojalt soovitatav • Veeb: https: //courses. cs. ut. ee/2017/vl 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 13
Siim Karus • Informaatika doktor • Microsofti Partnertudeng 2007 -2009 (MSP) – http: //www. microsoft. com/eesti/msp/ • Vabavaraportaali Vaba. Vara. Veeb üks autoritest – http: //vabavara. eu • Üle 10 aasta kogemust programmeerija, infosüsteemide audiitori, arhitekti ja äriteadmuse lahenduste arendaja rollides 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 14
Praktikumid Rühm Aeg 2 Ruum Juhendaja K 10. 15 – 12. 00 24 – 39 402 ! Artur Käpp 1 K 14. 15 – 16. 00 24 – 39 203 Lauri Rätsep 4 K 16. 15 – 18. 00 24– 39 206 ! Lauri Rätsep 3 N 14. 15 – 16. 00 24 – 39 004 Lauri Rätsep 5 N 14. 15 – 16. 00 24 – 39 207 ! Artur Käpp 27. 08. 2021 Nädalad MTAT. 03. 230 Veebirakenduste loomine 15
Eksamid A • Ajad: – 30. mai (T) 12. 15 – 14. 00 J. Liivi 2 - 111 – 6. juuni (T) 12. 15 – 14. 00 J. Liivi 2 - 111 • Järeleksam: – 20. juuni (T) 12. 15 – 14. 00 J. Liivi 2 - 111 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 16
Eksamid B • Ajad: – 6. juuni (T) 12. 15 – 14. 00 J. Liivi 2 - 111 – 13. juuni (T) 12. 15 – 14. 00 J. Liivi 2 - 111 • Järeleksam: – 20. juuni (T) 12. 15 – 14. 00 J. Liivi 2 - 111 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 17
Eksam vs tulemus (2015) Mai Juuni Keskmine 26, 07 p 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine Keskmine 24, 96 p 18
Eksam vs tulemus VLA 16 VLB 16 Keskmine 24, 68 p 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine Keskmine 34, 65 19
Hinde kujunemine • 100 punkti skaalas: – Praktikumid 50 p – Esitlused ~7 p* – Loengud ~10 p* – Eksam 50 p 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 20
Praktikumide projekt • Iteratiivne tarkvaraarendus gruppides (3 tudengit grupis) • 7 etappi • Esitlused praktikumis iga etapi lõpus – Vaja esineda 2 korda! • Parimate tööde esitlus loengus 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 21
Praktikumiprojekt Jooksvalt kontrollitavad (72 p): • Standarditele vastavus • Vastavus headele praktikatele • Turvalisus (st. terviklus, käideldavus, konfidentsiaalsus) Ajas kahaneva punktisummaga võtted (76 p, max 101, 2 p) • Lihtsad võtted (10 * 1 p, max 15, 4 p) • Keskmised võtted (10 * 3 p, max 46, 2 p) • Keerukamad võtted (6 * 6 p, max 39, 6 p) Funktsionaalsus (5 p) 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 22
Projekt: ajas kahanevad punktid • Vaikimisi tähtaeg on 4. etapp – Eritähtajaga ülesannetega hilinemine kaotab pooled punktid järgnevates etappides! • Varasem esitamine annab 0, 2 punkti lisaks iga etapi eest • Hilisem 0, 2 punkti vähem • Täpsemalt aine kodulehel 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 23
Praktikumide hindamine 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 24
1. etapp • Tähtaeg pühapäev 26. 02! • Võtted: – Koodihoidla ülesseadmine – Prototüüp – Projektiplaan 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 25
2. etapp • Tähtaeg 12. märts • Võtted: – Testkeskkond – Algab pidevalt kontrollitavate punktide kontroll 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 26
Projektiplaan • Tähtaeg 1. etapp (soovituslik varem valmis teha) • Planeerige endale ise tähtajad (Pareto reegel, Scrum metoodika – st. tarkvaratehnika oskused) • Funktsionaalsus annab 5 punkti • Hindamisel aluseks koodihoidla ja viki 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 27
Projekte varasematest aastatest • Uudisportaalid – http: //uudisreader 2. herokuapp. com/ – http: //firechrome. mt. ut. ee/ • Vahenduskeskkonnad – http: //webphp. mt. ut. ee/ – http: //endel. mt. ut. ee/ – http: //oravadrattas. azurewebsites. net/ • Muu – http: //6 unapp. appspot. com/ – http: //spordikaart. appspot. com/ – https: //github. com/Tonnius/EE_Math_Test 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 28
Projekte varasematest aastatest • E-valimised: – http: //e-election. appspot. com/ – http: //k 16. t 2 t 2. eu/ – http: //netivalimised. appspot. com/ – http: //evalimised 13. appspot. com/ – http: //www. maxorator. com: 8080/ 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 29
Projekte varasematest aastatest • Projekt laevade uputamine – http: //laevadeuputamine. appspot. com/ – http: //ec 2 -107 -21 -65 -204. compute 1. amazonaws. com/ • Bomberman – http: //battlerafts. appspot. com/ • Esitlused (17. 05. 2012): http: //chuck. ut. ee: 8080/ess/echo/presentation/2 a 9 de 4 a 4 -0 d 1 c-42 ff 8787 -74 b 2630 f 5793 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 30
Selle aasta projektid 1. Teie välja mõeldud veebirakendus 2. Veebirakenduste loomine hindamissüsteem 3. e-hääletamine 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 31
Tööriistad • Microsoft Expression Web – http: //www. microsoft. com/expression/ • Web. Matrix – http: //www. microsoft. com/webmatrix/ • • Adobe Dreamweaver (tasuline – arvutiklassis olemas) Quanta+ – http: //sourceforge. net/projects/quanta/ • Sea. Monkey Composer – http: //www. seamonkey-project. org/ • HTMLKit – http: //www. htmlkit. com/ • Eclipse – http: //www. eclipse. org/ • Microsoft Visual Studio – http: //www. microsoft. com/visualstudio/eng Dream. Spark Premium http: //www. math. ut. ee/et/oppimine/microsoft-dreamspark-premium 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 32
Loengute teemad • • • Veebistandardid HTML ja CSS HTTP, veebiserverid Arendusprotsess, arhitektuur AJAX, Javascript, DOM, XML Veebiraamistikud Tulevikutehnoloogiad 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 33
Loengutes osalemine • Vabatahtlikud ülesanded (võivad sisaldada kodust tööd) – Annavad kokku kuni 10 lisapunkti eksamihindele – Loengud, milles punkte antakse ei ole ette teada 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 34
Loenguülesannete lahendamine 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 35
Eksami teemad • Ülesanded – Analüüs – Projekteerimine – Turvalisus • Teooriaküsimused – Tehnoloogiate võrdlemine – Tööpõhimõtete kirjeldamine • Sarnased loenguülesannetele 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 36
Eelmise aasta kommentaare „Huvitav aine, vajab nii mõnegi asja iseseisvalt õppimist. Projekti kohta soovitusi: aine courses lehel on õppejõudude soovitatavad vahendid. Kasutage neid, omalooming põhjustab peavalu. …“ „… Eksam on loengute kohta - käige loengutes, lugege ise juurde, lahendage näidiseksam läbi. Kui saate, kasutage ka proovieksami võimalust. “ „Suhteliselt kerge aine kui viitsid veits aega kodutöödesse panustada, eksam ka eriti raske pole. “ „Hoopis teistsugune aine võrreldes tavaliste progremmeerimis ainetega. Sul on projekti jaoks palju vabamad käed, kuid siiski teatud nõuded, mida on vaja täita. …“ „Esimene tõsiselt kasulik aine informaatika õppekavas!“ 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 37
EKSAM 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 38
Tuleb • Aru saada ja kirjutada (X)HTML, CSS, ECMAscript, DOM (baas, events, veebilahitseja), XPath koodi • Tunda andmete esitamise viise JSON ja XML • Tunda ja võrrelda erinevaid veebiarhitektuuriraamistikke • Osata analüüsida veebilahenduste ja koodi vajadusi, turvalisust ja kasutajakogemust • Osata andmebaasiga liidestuda 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 39
Eksami osad (kokku 50 p) 1. 2. 3. 4. 5. 6. JSON, XML (6 p) Javascript, DOM, XPath (8 p) (X)HTML (12 p) CSS (6 p) ODBC, turvalisus (8 p) Veebiraamistikud, seansid, suured süsteemid (10 p) 27. 08. 2021 MTAT. 03. 230 Veebirakenduste loomine 40
- Slides: 40
