De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

Introductie 1 Webtechnologie Lennart Herlaar. Deze week Lees de informatie op de website van het vak Kies een onderwerp voor je website Reserveringssysteem.

Verwante presentaties


Presentatie over: "Introductie 1 Webtechnologie Lennart Herlaar. Deze week Lees de informatie op de website van het vak Kies een onderwerp voor je website Reserveringssysteem."— Transcript van de presentatie:

1 Introductie 1 Webtechnologie Lennart Herlaar

2 Deze week Lees de informatie op de website van het vak Kies een onderwerp voor je website Reserveringssysteem is al enige tijd open! Zoek naar bronmateriaal, begin met schrijven Zorg dat je de tooling op orde krijgt Eerste practicumsessie: vandaag na college Assistentie bij tooling Assistentie bij het van start gaan met je onderwerp

3 Introductie 3 Webtechnologie Lennart Herlaar

4 Centraal architectuur diagram Webserver Web browser Interpreter RDBMS Statische files Form, parameters HTML HTML+code SQL Parameters, code HTML File access Result set

5 Centraal architectuur diagram WebserverInterpreter RDBMS Files SQL Parameters, code File access Result set Web Browser + Applicatie HTML, CSS, JavaScript, JSON, … File Form, parameters, … HTML, JavaScript, JSON, … File File access

6 Introductie 6 Webtechnologie Lennart Herlaar

7 Eigenschappen revisited Client/server Bovenop HTTP over TCP/IP Page based requests ("one resource at a time") Ontbreken van state Client side aspecten Server side aspecten Multi-user aspecten Security aspecten Belang van standaarden

8 Het glas is half-leeg? Page based requests leiden tot veel overhead Ontbreken van state leidt tot veel overhead Veel security issues zijn hieraan gerelateerd Er zijn (te) veel standaarden in (te) veel versies Browsers ondersteunen lang niet alle standaarden, en niet op de juiste wijze Als web developer ben je hier continu mee bezig (sorry!) Waarom dan überhaupt webapplicaties?

9 Het glas is half-vol! "Iedereen" heeft een browser En iedereen weet 'm te bedienen Je applicatie heeft een zero-install footprint De browser handelt de user-interface af HTTP biedt heel veel zaken wèl Evenals de webserver, het RDBMS en de taal Standaarden en tools worden volwassen

10 Wat is het alternatief? Een eigen application layer protocol bedenken Een eigen server schrijven Eigen clients voor elk platform schrijven Server installeren bij ISP Downloads van clients en updates faciliteren Gebruikers over de streep trekken Ondersteuning bieden

11 The web programming environment 11 Webtechnologie Lennart Herlaar

12 Inhoud Markup, hypertext en HTML Browsers en servers HyperText Transfer Protocol URIs, headers, persistence Scripting en integratie

13 Markup Syntactisch onderscheidbare annotatie van tekst Vaak in-line toegepast Procedural markup Beschrijft presentatie, stijl, layout, verwerking Descriptive markup Beschrijft structuur en semantiek Descriptive markup is veelal domeinspecifiek Loskoppeling van presentatie en structuur Presentatie vastleggen in een stylesheet

14 Hypertext Tekst met (actieve) referenties Doorbreekt lineariteit van teksten Vannevar Bush: memex (1945) Ted Nelson: "hypertext" en "hypermedia" (1963) Douglas Engelbart: Mother of all demos (1968) Apple Computer: HyperCard (1987) Tim Berners-Lee: WWW ( ) "By now the word 'hypertext' has become generally accepted for branching and responding text, but the corresponding word 'hypermedia', meaning complexes of branching and responding graphics, movies and sound – as well as text – is much less used. Instead they use the strange term "interactive multimedia": this is four syllables longer, and does not express the idea of extending hypertext." – Ted Nelson, 1992 "HyperText is a way to link and access information of various kinds as a web of nodes in which the user can browse at will. It provides a single user-interface to large classes of information (reports, notes, data-bases, computer documentation and on-line help). We propose a simple scheme incorporating servers already available at CERN... A program which provides access to the hypertext world we call a browser..." – Tim Berners-Lee, 1990

15 HyperText Markup Language HTML heeft z'n wortels in de Standard Generalized Markup Language (SGML) Meer daarover bij client side representation Eerste versie onderdeel van het werk van Tim Berners-Lee "HTML tags", een lijst van zo'n 20 elementen In de basis heel eenvoudig Syntactisch onderscheidbare tags Nesting van tags, negeren van extra whitespace De kracht zit in de hyperlinks

16 Maar… HTML for dummies Hello world My First Heading My first paragraph. Including a link

17 The web programming environment 17 Webtechnologie Lennart Herlaar

18 Browsers Client voor het HTTP protocol (User Agent) Gereedschap voor rendering van markup Veel varianten, beperkt aantal rendering engines Gecko, Webkit, Blink, Trident, (Presto) Ondersteuning van standaarden zeer divers (X)HTML(5), CSS(2/3), JavaScript, … Dilemma's van fabrikanten Market share / concurrentieoverwegingen, imago, legacy aspecten, ontwikkeltijd, Gartner Hype Cycle

19

20

21

22 Browser marktaandeel

23 W3Counter W3Schools

24 Server voor het HTTP protocol Beperkt aantal opties, verschillend in insteek Apache web server, Microsoft IIS Multiprocess / multithreaded, één per request Nginx Asynchronous event driven C10k probleem Apache Tomcat Integratie van webserver en applicatie Webservers

25 Webserver marktaandeel

26 The web programming environment 26 Webtechnologie Lennart Herlaar

27 HyperText Transfer Protocol WWW = HTML + HTTP + URIs HTTP is een eenvoudig stateless request- response protocol 1.Server luistert (meestal) op poort 80 2.Client maakt TCP connectie met server (afsplitsing) 3.Client stuurt HTTP request 4.Server handelt request af en stuurt HTTP response 5.Server sluit TCP connectie met client

28 HTTP request HTTP request begint met een request method GET – Haal een resource op HEAD – Haal de header van een resource op PUT – Plaats/vervang een resource POST – Verwerk de meegezonden data DELETE – Verwijder een resource OPTIONS – Geef de ondersteunde methoden TRACE – Echo het request …

29 HTTP request Overige onderdelen van een HTTP request Resource Protocol versie Header lines Message body GET en HEAD moeten ondersteund worden GET, HEAD, OPTIONS en TRACE zijn "safe" PUT, DELETE (en safe methods) zijn idempotent PUT en POST hebben een message body Meest gebruikt zijn GET en POST GET /index.html HTTP/1.1 Host: User-Agent: Mozilla/5.0 […] Accept: text/html, image/png

30 HTTP response Protocol versie, status code, header lines, message body HTTP/ OK Date: Fri, 07 Feb :01:34 GMT Server: Apache/ (Unix) (Red-Hat/Linux) Last-Modified: Sat, 01 Feb :11:55 GMT Content-Length: 438 Connection: close Content-Type: text/html; charset=utf-8 […]

31 Status codes 1xx – Informational 2xx – Success 3xx – Redirection 4xx – Client error 5xx – Server error 200 OK, 301 Moved Permanently, 304 Not Modified, 401 Unauthorized, 404 Not Found, 500 Internal Server Error Niet verwarren met Server not found error

32 The web programming environment 32 Webtechnologie Lennart Herlaar

33 URL, URN, URI Tot nu toe pagina en resource uitwisselbaar Officiële term is resource Uniform Resource Locator Geeft de unieke locatie van een resource op een netwerk weer, inclusief de wijze van benadering Uniform Resource Name Geeft de unieke naam van een resource weer Uniform Resource Identifier Overkoepelend, identificeert uniek een resource

34 URI voorbeelden Absolute en relatieve locaties Schemes, namespaces student= &cijfer=9#resultaat Practicum%20opgave.html../../../colleges.txt #sectie01 ftp://ftp.cs.uu.nl/pub urn:isbn: urn:isan: E O Case sensitive?

35 The gory details (Sterk) vereenvoudigde grammatica voor URLs RFC3986 – URIs : Generic Syntax url ::= scheme address scheme ::= | ftp:// | mailto: | file:// |... address ::= full-domain/path-to-doc [#anchor] full-domain ::= host.domainname[:portnr] domainname ::= domain. domainname | domain domain ::= string-without-whitespace-and-;:& path-to-doc ::= /-separated-strings-without- whitespace-and-;:&

36 URL encoding / decoding Bijzondere karakters in een URI Spatie, control, diakritische tekens, enz. Voor "normaal" gebruik in een URI is encoding / decoding nodig, ook wel percent-encoding % teken met ASCII waarde als hexadecimaal getal Spatie, ASCII code 32, 20 hexadecimaal, dus %20 Overal waar de URI gebruikt wordt Chinese URLs? Internationalized Resource Identifier

37 HTTP request en response GET /index.html HTTP/1.1 Host: User-Agent: Mozilla/5.0 […] Accept: text/html, image/png HTTP/ OK Date: Fri, 07 Feb :01:34 GMT Server: Apache/ (Unix) (Red-Hat/Linux) Last-Modified: Sat, 01 Feb :11:55 GMT Content-Length: 438 Connection: close Content-Type: text/html; charset=utf-8 […]

38 HTTP headers Vele tientallen (optionele) headers gedefinieerd Welke headers hangt af van de HTTP versie HTTP/1.0 versus HTTP/1.1 Veelal gericht op content negotiation en efficiënt gebruik van de bandbreedte De onderhandeling is "server-driven"

39 HTTP headers Compression Language MIME type Character set Accept-Encoding: gzip, identity Content-Encoding: gzip Accept-Language: fr; q=1.0, en; q=0.5 Content-Language: en-US Accept: text/html; q=1.0, image/jpeg; q=0.6, */*; q=0.1 Accept-Charset: utf-8 Content-Type: text/html; charset=utf-8 Later meer hierover!

40 HTTP headers Range request Caching Persistent connection Range: bytes= Content-Range: bytes /3573 Connection: keep-alive Connection: close If-Modified-Since: Mon, 27 Jan :12:43 GMT If-None-Match: "69af74da0860cdc288ad309d058282f2" Last-Modified: Mon, 27 Jan :12:43 GMT ETag: "69af74da0860cdc288ad309d058282f2" Cache-Control: no-cache

41 Poorten en sockets Een poort is een "brievenbus" binnen het OS Een proces kan zich koppelen aan een poort Een socket is een eindpunt voor communicatie Lokaal IP adres en poortnummer Remote IP adres en poortnummer (bij TCP) Transport protocol (TCP, UDP, …) Een TCP verbinding wordt geïdentificeerd aan de hand van een 4-tuple De transportlaag gebruikt deze informatie voor (de)multiplexing

42 TCP verbindingen Officiële IANA poorten voor HTTP: 80 – HTTP 443 – HTTPS 8080 – HTTP (alt)

43 TCP disconnect Persistent connections TCP disconnect 3-way TCP handshake incl. request 3-way TCP handshake incl. request Response Etc. 3-way TCP handshake incl. request 2 requests Response 4 responses Etc. 2 responses 4 requests Ready! ClientServerClientServer t Keep-AliveClose > 2*RTT

44 Persistence versus state Verwar persistent connections niet met state Persistent connections betreffen state op TCP niveau Op HTTP niveau is er geen state Echt niet? Nouja, stiekem toch wel ergens iets van… Headers zijn een krachtig "mod" mechanisme Headers zijn in de regel bereikbaar vanuit je scripting taal Set-Cookie: UserID=darkhelmet; Max-Age=3600; Version=1 Later meer hierover!

45 Zelf aan de slag? Eenvoudige webserver maken is niet moeilijk Beperkt aantal methods en headers Vaak ook libraries beschikbaar (wacht op volgende request) Hoofdproces/thread, luistert op poort 80 Start proces/ thread Start proces/ thread 1 proces/thread per request Request Response

46 Voorbeeld webserver(tje) byte mac[] = {0xDE,0xAD,0xBE,0xEF,0xFE,0xED}; IPAddress ip(192,168,1,177); EthernetServer server(80); void setup() { Ethernet.begin(mac, ip); server.begin(); } void loop() { EthernetClient client = server.available(); if (client) { boolean currentLineIsBlank = true; while (client.connected()) { if (client.available()) { char c = client.read(); if (c == '\n' && currentLineIsBlank) { client.println("HTTP/ OK"); client.println("Content-Type: text/html"); client.println(); // payload goes here! […] } client.stop(); } "Put the fun back into learning computing" – Rapberry Pi Foundation

47 Request For Comments Details over protocollen zijn te vinden in RFCs RFC2616 – HTTP/1.1 RFC3986 – URIs Maar ook: TCP, IP, DHCP, DNS, … Internet Engineering Task Force (IETF) Peer review; veel strikter dan het klinkt (X)HTML(5)? RFC2322 – peg-DHCP


Download ppt "Introductie 1 Webtechnologie Lennart Herlaar. Deze week Lees de informatie op de website van het vak Kies een onderwerp voor je website Reserveringssysteem."

Verwante presentaties


Ads door Google