MTAT.03.230 Veebirakenduste loomine...1998 Gecko 1997 Trident 2000 KHTML 2003 WebKit 2002 Presto...

Siim Karus

siim.karus@ut.ee

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.

• 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

<body>

<h1 id="Sissejuhatus">Sissejuhatus</h1>

Veebirakenduste loomine on küll lihtne, kuid head

tulemust ilma õppimata siiski ei saa.

Veeb oli algselt mõeldud dokumentide levitamiseks

ja redigeerimiseks on-line.

Seega ei olnud kujundus HTML seisukohalt oluline.

</body>

.viited

background-color: yellow;

text-align:center;

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; }

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]);

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>

1998 Gecko

1997 Trident

2000 KHTML 2003 WebKit

2002 Presto

HTML 4.01

2004 2014 2009 1994 1999 1989

HTML 2

HTML 3

HTML 3.2

HTML 4

Mosaic

Netscape

Internet Explorer

2000 (2002)

XHTML 1.0

XHTML 1.1

(X)HTML 5

2002 (1998)

Mozilla

Safari

Mozilla Firefox

1997 (1994)

Opera 2008

Chrome

1998 Gecko

1997 Trident

2000 KHTML 2003 WebKit

2002 Presto

2004 2014 2009 1994 1999 1989

Mosaic

Netscape

Internet Explorer

2002 (1998)

Mozilla

Safari

Mozilla Firefox

1997 (1994)

Opera 2008

Chrome

LiveScript (Brendan Eich)

JavaScript (Netscape 2.0)

JScript (IE 3.0)

ECMAScript 1.0

ECMAScript 1.7 „stable enough“

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)

•

• <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>

• 1x nädalas

• Loevad

– Siim Karus

– (Külalislektor)

• Loengutes osalemine on vabatahtlik kuid

soojalt soovitatav

• Veeb: https://courses.cs.ut.ee/2017/vl

• 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

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

• 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

Mai Juuni

Keskmine 26,07p Keskmine 24,96p

VLA16 VLB16

Keskmine 24,68p Keskmine 34,65

• 100 punkti skaalas:

– Praktikumid 50p

– Esitlused ~7p*

– Loengud ~10p*

– Eksam 50p

• Iteratiivne tarkvaraarendus gruppides (3

tudengit grupis)

• 7 etappi

• Esitlused praktikumis iga etapi lõpus

– Vaja esineda 2 korda!

• Parimate tööde esitlus loengus

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)

• 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

𝑝𝑢𝑛𝑘𝑡𝑒 = 𝑝𝑢𝑛𝑘𝑡𝑖𝑑 ∙ (1 + 0,2 𝑡äℎ𝑡𝑎𝑒𝑔 − 𝑒𝑠𝑖𝑡𝑎𝑚𝑖𝑠𝑎𝑒𝑔 )

• Tähtaeg pühapäev 26.02!

• Võtted:

– Koodihoidla ülesseadmine

– Prototüüp

– Projektiplaan

• Tähtaeg 12. märts

• Võtted:

– Testkeskkond

– Algab pidevalt kontrollitavate punktide

kontroll

• 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

• 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

• E-valimised:

– http://e-election.appspot.com/

– http://k16.t2t2.eu/

– http://netivalimised.appspot.com/

– http://evalimised13.appspot.com/

– http://www.maxorator.com:8080/

• 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

1. Teie välja mõeldud veebirakendus

2. Veebirakenduste loomine

hindamissüsteem

3. e-hääletamine

• 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

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

• Vabatahtlikud ülesanded (võivad

sisaldada kodust tööd)

– Annavad kokku kuni 10 lisapunkti

eksamihindele

– Loengud, milles punkte antakse ei ole ette

0 5 10 15 20

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!“

• 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

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)

MTAT.03.230 Veebirakenduste loomine...1998 Gecko 1997 Trident 2000 KHTML 2003 WebKit 2002 Presto...

Documents

Veebirakenduste loomine - Spring · Model 15 • Handles requests • Initialize and request mapping • Declare request parameters or path variables • @RequestParam/@PathVariable

3. Inimeste Loomine

Kai Hinnosaar - Eduka nišikommuuni loomine internetis

MTAT.03.094 Software Engineering

eFormular - küsimustiku loomine

Kõrghariduskeele korpuse loomine

Õppematerjalide loomine Toolbox keskkonnas

Kvaliteetse e kursuse loomine

Õppekava loomine ja pädevushaldus

Töötava eetikakoodeksi loomine

Karjääriinfo loomine ja vahendamine

Koostöö, välktutvus ja kontaktvõrgustiku loomine

PowerPointi esitlus - Kursused · 2017-05-03 · TARTU ÜLIKOOL ARVUTITEADUSE INSTITUUT 03.230 Veebirakenduste loomine Näited Siim Karus siim.karus@ut.ee kevad 2017

Ajaveebi loomine

Veebilehe loomine

Ajaveebi loomine wordpress

MTAT.03 - ut

Fis Adl1 Mtat

PowerPointi esitlus - ut · Parimate tööde esitlus loengus 9.02.2015 MTAT.03.230 Veebirakenduste loomine . TARTU ÜLIKOOL ARVUTITEADUSE INSTITUUT Praktikumiproj ekt Jooksvalt kontrollitavad

Globaalse networki loomine ja ärakasutamine