Siim Karus siim.karus@ut.ee kevad 2016 MTAT.03.230 Veebirakenduste loomine CSS, HTTP Siim Karus siim.karus@ut.ee kevad 2016
MTAT.03.230 Veebirakenduste loomine Tänases loengus CSS HTTP 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine Kujundamine Probleem HTML ei määra, kuidas dokumenti kasutajale tuleb esitada Lahendus Lisame märgenditele esitamissoovitused stiilidena 21.11.2018 MTAT.03.230 Veebirakenduste loomine
Cascading Style Sheets 21.11.2018 MTAT.03.230 Veebirakenduste loomine
Cascading Style Sheets (CSS) CSS Level 1 (1996) http://www.w3.org/TR/REC-CSS1 CSS Level 2 (1998) http://www.w3.org/TR/REC-CSS2 Toetab erinevaid meediaspetsiifilisi stiililehti Audio tugi CSS Level 3 (1999-2011) http://www.w3.org/TR/css3-roadmap/ Modulaarne Nimeruumid, valijad ja värvid on 2011 W3C standardid 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine CSS ja HTML Esimene CSS toega veebilehitseja Internet Explorer 3.0 CSS stiilidele viitamise tugi HTML-is HTML 4 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine CSS Cascading – stiilid on päritavad Sama HTML kujundatakse erinevalt olenevalt meediast või css-st Demod http://www.csszengarden.com/ http://www.w3schools.com/css/demo_default.htm 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine CSS Eraldiseisvas failis Vähendab andmemahtu (1 CSS mitme HTML lehe jaoks) On lihtsam hallata Vähem versioonikonflikte Audiovisuaalsetel kujundajatel oma failid <link rel="stylesheet" type="text/css" href="minustiil.css"/> 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine CSS HTML päises Kasutada ainult siis kui on vajalik stiil ja leht hoida ühes failis <style type="text/css"> /* stiili sisu */ </style> 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine CSS Atribuudis style Iganenud võte XHTML 1.1, järgmises versioonis eemaldatakse täielikult Ärge kasutage (va. pisiprototüüpimisel) style="color:Red;" 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine CSS süntaks Valija (selector) – määrab, millele stiili rakendatakse Omadus (property) – määrab, millist objekti omadust väärtustatakse Väärtus (value) – määrab uue omaduse väärtuse selector { property: value; } Keele süntaks kirjeldab keele struktuuri ja konstruktsioone. Keele semantika kirjeldab, mida süntaktiliselt korrektsed laused tähendavad. 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine CSS selector ns|E[attsel].class#id :pclass ns – nimeruum E – element attset – atribuudi test class – klassi test id – identifikaator pclass – pseudoklass (programselt lisatav klass) Lubatud on kasutada kõike valivat sümbolit * 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine CSS atribuudi valijad [att] – atribuudi olemasolu [att=val] – atribuudi väärtuse kontroll [att~=val] – atribuudi väärtuse loendi sõne kontroll [att|=val] – atribuudi väärtus on val või see algab sõnega val- [att^=val] – prefiksi kontroll [att$=val] – sufiksi kontroll [att*=val] – osasõne kontroll 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine CSS selector näited h1 – valib kõik elemendid h1 *[lang|=en] – valib kõik ingliskeelsed elemendid (st. elemendid, mille keelekood on en või en-XX, kus XX on geograafiline määratlus) p.lai.suur – valib kõik elemendid p, mille klasside loendis on nii klass lai kui ka klass suur 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine CSS selector näited a[href$=".html"] – valib kõik lingid veebilehtedele :hover – valib kõik elemendid, mille kohal viibib hiirekursor Rohkem näiteid http://www.w3.org/TR/selectors/ 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine XHTML näide CSS-ga <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="application/xhtml+xml; charset=utf-8" http-equiv="Content-Type" /> <link rel="stylesheet" type="text/css" href="minustiil.css"/> <title>Veebirakenduste loomine</title> </head> <body> <h1 id="Sissejuhatus">Sissejuhatus</h1> <p> Veebirakenduste loomine … siiski ei saa. </p> <p> Veeb oli algselt … oluline.</p> <p class="viited"> <a title="Tagasi sissejuhatusse" href="#Sissejuhatus">Tagasi</a> <a title="Tagasi sissejuhatusse" href="http://test.local/#Sissejuhatus">Tagasi</a> </p> <h1 id="HTMLCSS">HTML&CSS</h1> </body> </html> 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine XHTML näide CSS-ga .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.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine CSS esitusviisid Element display none – elementi ei kuvata block – elementi esitatakse plokina (ülal ja all on veidi ruumi ja kõrvalolevaid elemente ei sallita) inline – element esitatakse jooksvalt oma asukohas inline-block – plokk, mis lubab kõrvalolevaid elemente list-item – loendi elemnent run-in – olenevalt kontekstist kas plokk või jooksev element table* - erinevad tabeli osad inherit – päritakse ülemelemendilt 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine CSS paigutused Omadus position static – vaikimisi variant absolute – paigutus esimese mitte-staatilise paigutusega ülemmelemendi suhtes fixed – paigutus akna suhtes relative – paigutus oma normaalasukoha suhtes inherit – paigutus päritakse vanemalt 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine CSS ühikud Profesionaalne digigraafika px – piksel ekraanil Insenertehnilised materjalid mm – millimeeter cm – sentimeeter pt – punkt (1/72in) pc – pica (12pt) in – toll Veeb ja dokumentide kujundamine em – teksti kõrgus ex – teksti x-kõrgus (ca ½ em) % - suhe ümbrusse 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine Kvaliteedikontroll W3C CSS validaator http://jigsaw.w3.org/css-validator/ 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine HTML + CSS kursus MTAT.03.108 Veebilehtede loomine (2 EAP) 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine HTTP 21.11.2018 MTAT.03.230 Veebirakenduste loomine
Klassikaline arhitektuur päring vastus klient 21.11.2018 MTAT.03.230 Veebirakenduste loomine
Klient-server arhitektuur päring vastus Internet server klient 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine Rakendusplatvormid Veebirakendus Töölauarakendus Töötab veebilehitseja virtualiseeritud keskkonnas Põhineb dokumentide esitusloogikal Töötab madalamal abstraktsioonikihil Põhineb märgi ja pikselipõhisel esitusloogikal 21.11.2018 MTAT.03.230 Veebirakenduste loomine
Klient-server arhitektuur 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine ISO OSI mudel Open Systems Interconnection HTTP FTP Rakenduskiht MIME SSL Esituskiht NetBIOS SOCKS Seansikiht TCP UDP Transpordikiht IP Ipsec Võrgukiht ARP PPP Lülikiht IEEE 802.11 USB Füüsiline kiht 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine HTTP Hypertext Transfer Protocol http://www.w3.org/Protocols/rfc2616/rfc2616.html Klient-server süsteem Päring-vastus mudel (ühesuunaline dupleksmudel) Port: 80 21.11.2018 MTAT.03.230 Veebirakenduste loomine
HTTP päringu struktuur Method SP Request-URI SP HTTP-Version CRLF *(Header CRLF) CRLF [Body] Method – HTTP meetod SP – tühik CRLF – reavahetus (\r\n) Request-URI – ressursi identifikaator HTTP-Version – HTTP versioon HTTP/1.1 HTTP/1.0 () – plokk * - korduvus 0-n korda [] – mittekohustuslik plokk 21.11.2018 MTAT.03.230 Veebirakenduste loomine
Uniform Resource Identifier (URI) Identifitseerib serveri ressursi "*" | absoluteURI | abs_path | authority Abolute URI: http://www.w3.org/pub/WWW/TheProject.html Absolute path: /pub/WWW/TheProject.html Erisümbolid kodeeritakse %XY kujul, kus XY on sümboli kuueteistkümnendkood (meetod Url_Encode) %20 – Tühik 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine HTTP URL Uniform Resource Locators (URL) "http:" "//" host [ ":" port ] [ abs_path [ "?" query ]] host – serveri aadress port – veebiserveri port abs_path – URI absoluutne tee query – päring 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine HTTP päring: meetodid OPTIONS – Küsi suhtlusvõimalused serveri ressursiga GET – Võta veebiserverist ressursiga seotud andmed HEAD – GET ilma keha tagastamiseta POST – Postita ressursiga seotud andmed veebiserverisse PUT – Salvesta veebiserverisse olevaid andmeid URI alla DELETE – Kustuta veebiserveri ressurss TRACE – Tee tagasipäring ressursile CONNECT – Proksi ühenduse muutmiseks HEAD päringut kasutatakse tihti veebilinkide valideerimiseks. TRACE päringut kasutatakse diagnostikas ning tagastab Max-Forwards arvu proksi või veebiserveri vastuse päringule, mis on suunatud TRACE väljakutsuja suunas. CONNECT päringut kasutatakse näiteks prokside vahelise suhtluse lülitamiseks SSL peale või sellelt ära. 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine HTTP päringu päised Accept – Lubatud MIME meediatüübid (*/*) Accept-Charset – Lubatud tähestikud utf-8, *, … Accept-Encoding – Lubatud kodeeringud gzip, compress, *, … Accept-Language – Lubatud keeled et, en, et-ee, en-gb, en-us 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine HTTP päringu päised Authorisation If-Unmodified-Since Expect Max-Forwards From Proxy-Authentication Host Range If-Match Referer If-Modified-Since TE If-None-Match User-Agent If-Range 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine MIME Multipurpose Internet Mail Extensions http://tools.ietf.org/html/rfc4288 Kujul tüüp/alamtüüp text/html – HTML application/xhtml+xml – XHTML text/plain – avatekst text/xml – XML (vt. http://tools.ietf.org/html/rfc3023) image/gif – GIF pilt application/xml – XML (vt. http://tools.ietf.org/html/rfc3023) http://www.iana.org/assignments/media-types/index.html text/xml – vaikimisi kodeering ASCII Application/xml – vaikimisi kodeering puudub (võib eeldada UTF-8 või UTF-16) Application/xhtml+xml – uus XHTML MIME 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine HTTP päringu vastus HTTP-Version SP Status-Code SP Reason-Phrase CRLF *(Header CRLF) CRLF [Body] HTTP-Version – HTTP versioon HTTP/1.1 HTTP/1.0 Status-Code – vastuse kood (3 numbrit) Reason-Phrase – vastuse väljend (ei tohi sisaldada CR või LF) SP – tühik CRLF – reavahetus (\r\n) Märgake tühja rida enne sisu! 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine HTTP päring: vastused 1XX – Info 100 – Jätka 101 – Vahetan protokolli 2XX – Edukas 200 – OK 201 – Loodud 202 – Nõustutud 204 – Sisu pole 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine HTTP päring: vastused 3XX – Ümber suunamine 4XX – Kliendi viga 400 – Vigane päring 301 – Jäädavalt liigutatud 401 – Volitus puudub 304 – Ei ole muudetud 402 – Makse on vajalik 307 – Ajutine ümber suunamine 403 – Keelatud 404 – Ei leitud 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine HTTP päring: vastused 5XX – Serveri viga 500 – Sisene viga 501 – Pole teostatud 503 – Teenus ei ole saadaval 504 – Lüüsi päringu aegumine 505 – HTTP versioon ei ole toetatud 21.11.2018 MTAT.03.230 Veebirakenduste loomine
Võrguliikluse silumine Wireshark – http://www.wireshark.org/ 21.11.2018 MTAT.03.230 Veebirakenduste loomine
Võrguliikluse silumine 1. Kus on www.example.org? 2. www.example.org on aadressil 192.0.43.10. 21.11.2018 MTAT.03.230 Veebirakenduste loomine
Võrguliikluse silumine 3. TCP ühenduse läbi rääkimine. 21.11.2018 MTAT.03.230 Veebirakenduste loomine
Võrguliikluse silumine Meetod Päised Request-URI HTTP-Version 4. HTTP päring GET / HTTP/1.1 User-Agent: Opera/9.80 (Windows NT 6.1; U; et) Presto/2.10.229 Version/11.61 Host: www.example.org Accept: text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1 Accept-Language: et-EE,et;q=0.9,en;q=0.8 Accept-Encoding: gzip, deflate Connection: Keep-Alive Olen Opera 11.61 Soovin ressurssi serverist www.example.org. Eelistan HTML või XML sisu kuid saan hakkama kõigega, mida saadad. Eelistan eestikeelset sisu. Oskan lahti pakkida ZIP ja gzip pakitud sisu. Palun hoia ühendus aktiivsena. 21.11.2018 MTAT.03.230 Veebirakenduste loomine
Võrguliikluse silumine HTTP-Version Päised Status-Code Reason-Phrase 5. HTTP Vastus. HTTP/1.0 302 Found Location: http://www.iana.org/domains/example/ Server: BigIP Connection: Keep-Alive Content-Length: 0 Ressursi tegelik asukoht on hoopis mujal. Serveri nimi on BigIP. Hoiame ühendust aktiivsena. Keha maht on 0 (keha puudub). 21.11.2018 MTAT.03.230 Veebirakenduste loomine
Võrguliikluse silumine GET /domains/example/ HTTP/1.1 User-Agent: Opera/9.80 (Windows NT 6.1; U; et) Presto/2.10.229 Version/11.61 Host: www.iana.org Accept: text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1 Accept-Language: et-EE,et;q=0.9,en;q=0.8 Accept-Encoding: gzip, deflate Connection: Keep-Alive HTTP/1.1 200 OK Date: Mon, 13 Feb 2012 18:28:03 GMT Server: Apache/2.2.3 (CentOS) Last-Modified: Wed, 09 Feb 2011 17:13:15 GMT Content-Length: 1162 Vary: Accept-Encoding Content-Encoding: gzip Connection: close Content-Type: text/html; charset=UTF-8 [Body] 6. Kordame päringut tegeliku aadressiga. 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine Praktikumidest 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine Testserver Kõigi tiimiliikmete tehtud muudatuste testimiseks Praktikumijuhendajal etapi tööde hindamiseks NB! Testige enda tehtud muudatusi kohalikus arendusmasinas (enda arvutis) 21.11.2018 MTAT.03.230 Veebirakenduste loomine
Projekti seadistamine Eraldi failid testserveri, arendusserveri ja evitusserveri konfiguratsiooni tarvis (nt. ASP.NET projektides) Lisaloogika õige konfiguratsiooni valikuks serveri sätete (nt. nime või aadressi) alusel (nt. PHP projektides) 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine Testserver Seadke üles järgmiseks praktikumiks: praktikumijuhendaja saab aidata lahendada esile kerkinud probleeme jääb aega serveri haldajate tegevustele (nt. ats või sandstorm serveri puhul) Kasutage võimalusel automaatevitust Eraldi automaatevitatav (release) haru Ärge unustage ka andmebaasi evitust 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine Andmebaasi evitus Hoidke andmebaasi struktuur (skeem/schema) versioonihalduses mudel/ER-kuju SQL loomisskriptid Hoidke arendusserveri ja testserveri testandmed versioonihalduses (INSERT skript) Eraldi peaks olema andmebaasi värskendusskript testserverisse (testija tehtud muudatuste säilitamine) 21.11.2018 MTAT.03.230 Veebirakenduste loomine
MTAT.03.230 Veebirakenduste loomine Järgmises loengus WCAG Server Javascript 21.11.2018 MTAT.03.230 Veebirakenduste loomine