mtat.03.230 veebirakenduste loomine...1998 gecko 1997 trident 2000 khtml 2003 webkit 2002 presto...
TRANSCRIPT
Siim Karus
kevad 2017
https://courses.cs.ut.ee/2017/vl
MTAT.03.230 Veebirakenduste loomine
• Veebitehnoloogiad
• Inimorienteeritud veebirakenduste
standardid
• Veebirakenduste disaini põhimõtted ja
praktikad
• Veebirakenduste turvalisus
21.02.2017 MTAT.03.230 Veebirakenduste loomine 2
• Tutvustada veebirakenduste loomist ning
selleks kasutatavaid kaasaegseid
tehnoloogiaid.
• Anda praktiline kogemus
veebirakenduse loomisel.
21.02.2017 MTAT.03.230 Veebirakenduste loomine 3
• 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
21.02.2017 MTAT.03.230 Veebirakenduste loomine 4
<body>
<h1 id="Sissejuhatus">Sissejuhatus</h1>
<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>
21.02.2017 MTAT.03.230 Veebirakenduste loomine 5
.viited
{
background-color: yellow;
text-align:center;
}
body
{
background-image: URL("minutaust.jpg");
}
h1 { border-color:blue; border-style:groove; border-width:0.2em; }
#HTMLCSS { border-top: 0.4em double maroon; }
p{ background-color:white; }
21.02.2017 MTAT.03.230 Veebirakenduste loomine 6
var o2 = { p1: 5 + 9, p2: null, testimine: "See on test" };
for (var aName in o2) {
window.alert("Omaduse " + aName + " väärtus on: " + o
2[aName]);
}
21.02.2017 MTAT.03.230 Veebirakenduste loomine 7
Helle Hein 2011
<?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>
21.02.2017 MTAT.03.230 Veebirakenduste loomine 8
1998 Gecko
1997 Trident
2000 KHTML 2003 WebKit
2002 Presto
1999
HTML 4.01
21.02.2017 MTAT.03.230 Veebirakenduste loomine 9
2004 2014 2009 1994 1999 1989
1989
HTML
1994
HTML+
HTML 2
1995
HTML 3
1997
HTML 3.2
1998
HTML 4
1993
Lynx
Mosaic
1994
Netscape
1995
Internet Explorer
2000 (2002)
XHTML 1.0
2010
XHTML 1.1
2014
(X)HTML 5
2002 (1998)
Mozilla
2003
Safari
2004
Mozilla Firefox
1997 (1994)
Opera 2008
Chrome
21.02.2017 MTAT.03.230 Veebirakenduste loomine 10
1998 Gecko
1997 Trident
2000 KHTML 2003 WebKit
2002 Presto
2004 2014 2009 1994 1999 1989
1993
Lynx
Mosaic
1994
Netscape
1995
Internet Explorer
2002 (1998)
Mozilla
2003
Safari
2004
Mozilla Firefox
1997 (1994)
Opera 2008
Chrome
1995
LiveScript (Brendan Eich)
JavaScript (Netscape 2.0)
1996
JScript (IE 3.0)
1998
ECMAScript 1.0
2006
ECMAScript 1.7 „stable enough“
2011
ECMAScript 5.1
• /*[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)
21.02.2017 MTAT.03.230 Veebirakenduste loomine 11
• <!-- 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>
21.02.2017 MTAT.03.230 Veebirakenduste loomine 12
• 1x nädalas
• Loevad
– Siim Karus
– (Külalislektor)
• Loengutes osalemine on vabatahtlik kuid
soojalt soovitatav
• Veeb: https://courses.cs.ut.ee/2017/vl
21.02.2017 MTAT.03.230 Veebirakenduste loomine 13
• Informaatika doktor
• Microsofti Partnertudeng 2007-2009 (MSP)
– http://www.microsoft.com/eesti/msp/
• Vabavaraportaali VabaVaraVeeb üks autoritest
– http://vabavara.eu
• Üle 10 aasta kogemust programmeerija, infosüsteemide audiitori,
arhitekti ja äriteadmuse lahenduste arendaja rollides
21.02.2017 MTAT.03.230 Veebirakenduste loomine 14
Rühm Aeg Nädalad Ruum Juhendaja
2 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
MTAT.03.230 Veebirakenduste loomine 21.02.2017 15
• 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
MTAT.03.230 Veebirakenduste loomine 21.02.2017 16
• 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
MTAT.03.230 Veebirakenduste loomine 21.02.2017 17
Mai Juuni
21.02.2017 MTAT.03.230 Veebirakenduste loomine 18
Keskmine 26,07p Keskmine 24,96p
VLA16 VLB16
21.02.2017 MTAT.03.230 Veebirakenduste loomine 19
Keskmine 24,68p Keskmine 34,65
• 100 punkti skaalas:
– Praktikumid 50p
– Esitlused ~7p*
– Loengud ~10p*
– Eksam 50p
MTAT.03.230 Veebirakenduste loomine 21.02.2017 20
• Iteratiivne tarkvaraarendus gruppides (3
tudengit grupis)
• 7 etappi
• Esitlused praktikumis iga etapi lõpus
– Vaja esineda 2 korda!
• Parimate tööde esitlus loengus
MTAT.03.230 Veebirakenduste loomine 21.02.2017 21
Jooksvalt kontrollitavad (72p):
• Standarditele vastavus
• Vastavus headele praktikatele
• Turvalisus (st. terviklus, käideldavus, konfidentsiaalsus)
Ajas kahaneva punktisummaga võtted (76p, max 101,2p)
• Lihtsad võtted (10 * 1p, max 15,4p)
• Keskmised võtted (10 * 3p, max 46,2p)
• Keerukamad võtted (6 * 6p, max 39,6p)
Funktsionaalsus (5p)
MTAT.03.230 Veebirakenduste loomine 21.02.2017 22
• 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
21.02.2017 MTAT.03.230 Veebirakenduste loomine 23
𝑝𝑢𝑛𝑘𝑡𝑒 = 𝑝𝑢𝑛𝑘𝑡𝑖𝑑 ∙ (1 + 0,2 𝑡äℎ𝑡𝑎𝑒𝑔 − 𝑒𝑠𝑖𝑡𝑎𝑚𝑖𝑠𝑎𝑒𝑔 )
21.02.2017 MTAT.03.230 Veebirakenduste loomine 24
• Tähtaeg pühapäev 26.02!
• Võtted:
– Koodihoidla ülesseadmine
– Prototüüp
– Projektiplaan
21.02.2017 MTAT.03.230 Veebirakenduste loomine 25
• Tähtaeg 12. märts
• Võtted:
– Testkeskkond
– Algab pidevalt kontrollitavate punktide
kontroll
21.02.2017 MTAT.03.230 Veebirakenduste loomine 26
• 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
21.02.2017 MTAT.03.230 Veebirakenduste loomine 27
• Uudisportaalid
– http://uudisreader2.herokuapp.com/
– http://firechrome.mt.ut.ee/
• Vahenduskeskkonnad
– http://webphp.mt.ut.ee/
– http://endel.mt.ut.ee/
– http://oravadrattas.azurewebsites.net/
• Muu
– http://6unapp.appspot.com/
– http://spordikaart.appspot.com/
– https://github.com/Tonnius/EE_Math_Test
21.02.2017 MTAT.03.230 Veebirakenduste loomine 28
• E-valimised:
– http://e-election.appspot.com/
– http://k16.t2t2.eu/
– http://netivalimised.appspot.com/
– http://evalimised13.appspot.com/
– http://www.maxorator.com:8080/
21.02.2017 MTAT.03.230 Veebirakenduste loomine 29
• Projekt laevade uputamine
– http://laevadeuputamine.appspot.com/
– http://ec2-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/2a9de4a4-0d1c-
42ff-8787-74b2630f5793
21.02.2017 MTAT.03.230 Veebirakenduste loomine 30
1. Teie välja mõeldud veebirakendus
2. Veebirakenduste loomine
hindamissüsteem
3. e-hääletamine
21.02.2017 MTAT.03.230 Veebirakenduste loomine 31
• Microsoft Expression Web
– http://www.microsoft.com/expression/
• WebMatrix
– http://www.microsoft.com/web/webmatrix/
• Adobe Dreamweaver (tasuline – arvutiklassis olemas)
• Quanta+
– http://sourceforge.net/projects/quanta/
• SeaMonkey 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
21.02.2017 MTAT.03.230 Veebirakenduste loomine 32
DreamSpark Premium
http://www.math.ut.ee/et/oppimine/microsoft-dreamspark-premium
• Veebistandardid HTML ja CSS
• HTTP, veebiserverid
• Arendusprotsess, arhitektuur
• AJAX, Javascript, DOM, XML
• Veebiraamistikud
• Tulevikutehnoloogiad
MTAT.03.230 Veebirakenduste loomine 21.02.2017 33
• Vabatahtlikud ülesanded (võivad
sisaldada kodust tööd)
– Annavad kokku kuni 10 lisapunkti
eksamihindele
– Loengud, milles punkte antakse ei ole ette
teada
MTAT.03.230 Veebirakenduste loomine 21.02.2017 34
21.02.2017 MTAT.03.230 Veebirakenduste loomine 35
6
5
18
8
8
9
11
12
16
12
7
14
1
3
0 5 10 15 20
ei
jah
A
B
C
D
E
F
MI
Hinne
Lahendas loengus
Loendus kogusummast Matrikkel
Eksamiversioon
• Ülesanded
– Analüüs
– Projekteerimine
– Turvalisus
• Teooriaküsimused
– Tehnoloogiate võrdlemine
– Tööpõhimõtete kirjeldamine
• Sarnased loenguülesannetele MTAT.03.230 Veebirakenduste loomine 21.02.2017 36
„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!“
21.02.2017 MTAT.03.230 Veebirakenduste loomine 37
21.02.2017 MTAT.03.230 Veebirakenduste loomine 38
• 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
21.02.2017 MTAT.03.230 Veebirakenduste loomine 39
1. JSON, XML (6p)
2. Javascript, DOM, XPath (8p)
3. (X)HTML (12p)
4. CSS (6p)
5. ODBC, turvalisus (8p)
6. Veebiraamistikud, seansid, suured
süsteemid (10p)
21.02.2017 MTAT.03.230 Veebirakenduste loomine 40