Siim Karus siim.karus@ut.ee kevad 2016 MTAT.03.230 Veebirakenduste loomine CSS, HTTP Siim Karus siim.karus@ut.ee kevad 2016.

Slides:



Advertisements
Similar presentations
Hypertext Transfer PROTOCOL ----HTTP Sen Wang CSE5232 Network Programming.
Advertisements

DEV034 -Web Applications, Introduction
HTTP HyperText Transfer Protocol. HTTP Uses TCP as its underlying transport protocol Uses port 80 Stateless protocol (i.e. HTTP Server maintains no information.
Hypertext Transport Protocol CS Dick Steflik.
 What is it ? What is it ?  URI,URN,URL URI,URN,URL  HTTP – methods HTTP – methods  HTTP Request Packets HTTP Request Packets  HTTP Request Headers.
HyperText Transfer Protocol (HTTP).  HTTP is the protocol that supports communication between web browsers and web servers.  A “Web Server” is a HTTP.
CP476 Internet Computing Lecture 5 : HTTP, WWW and URL 1 Lecture 5. WWW, HTTP and URL Objective: to review the concepts of WWW to understand how HTTP works.
TCP/IP Protocol Suite 1 Chapter 22 Upon completion you will be able to: World Wide Web: HTTP Understand the components of a browser and a server Understand.
Copyright (c) 2010, Dr. Kuanchin Chen1 The Client-Server Architecture of the WWW Dr. Kuanchin Chen.
WWW, HTTP, GET, POST, Cookies Svetlin Nakov Telerik Corporation
The HyperText Transfer Protocol. History HTTP has been in use since 1990 (HTTP/0.9) HTTP/1.0 was defined in RFC 1945 (May 1996) and included metainformation.
Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.
IS-907 Java EE World Wide Web - Overview. World Wide Web - History Tim Berners-Lee, CERN, 1990 Enable researchers to share information: Remote Access.
Web Technologies Lecture 1 The Internet and HTTP.
HTTP Here, we examine the hypertext transfer protocol (http) – originally introduced around 1990 but not standardized until 1997 (version 1.0) – protocol.
Computer Networks with Internet Technology William Stallings Chapter 04 Modern Applications 4.1 Web Access - HTTP.
1 Unraveling the Web: How Does it All Work?. 2 Web Enabling Technologies F TCP/IP network (Internet & others) F URLs F HTTP protocol and HTTP Servers.
MIIS1 MIIS - 17 Introduction to the WWW & http * * http information from World Wide Web Programming with HTML & CGI by Ed Tittel, Mark Gaither, S. Hassinger,
What’s Really Happening
National College of Science & Information Technology.
Introduction to Information Security
Hypertext Transfer Protocol
IT Engineering I Instructor: Behrang Assemi
Building Web Apps with Servlets
Web Basics: HTML and HTTP
Hypertext Transfer Protocol
HTTP – An overview.
Hypertext Transfer Protocol
The Hypertext Transfer Protocol
How does it work ?.
1993 version of Mosaic browser.
Web Server Design Week 10 Old Dominion University
COMP2322 Lab 2 HTTP Steven Lee Feb. 8, 2017.
HTTP Protocol Specification
Hypertext Transfer Protocol
Hypertext Transport Protocol
Internet Services I November 23, 1999
Introduction Web Environments
Debugging Your Website with Fiddler and Chrome Developer Tools
Web Server Design Week 8 Old Dominion University
HTTP Protocol.
Application HTTP.
Tutorial (4): HTTP Copyright © The McGraw-Hill Companies, Inc. Permission required for reproduction or display.
Uniform Resource Locators
CISC103 Web Development Basics: Web site:
WEB API.
HTTP Hypertext Transfer Protocol
HTTP Request Method URL Protocol Version GET /index.html HTTP/1.1
لایه ی کاربرد مظفر بگ محمدی 2: Application Layer.
Uniform Resource Locators (URLs)
Hypertext Transfer Protocol
CS 5565 Network Architecture and Protocols
HyperText Transfer Protocol
Web Server Design Week 8 Old Dominion University
Web Server Design Week 8 Old Dominion University
More CSS 22-Feb-19.
Web Server Design Week 8 Old Dominion University
Kevin Harville Source: Webmaster in a Nutshell, O'Rielly Books
The HTTP Protocol COSC 2206 Internet Tools The HTTP Protocol
The Application Layer: HTTP
Uniform Resource Locators

Application Layer Part 1
Traditional Internet Applications
HTTP Hypertext Transfer Protocol
Cascading Style Sheets
Uniform Resource Locators (URLs)
An Introduction to the Internet and the Web
CSCI-351 Data communication and Networks
Cascading Style Sheets™ (CSS)
Presentation transcript:

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