1 / 47

Introductie

Introductie. Webtechnologie. Lennart Herlaar. 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

elmo
Download Presentation

Introductie

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introductie Webtechnologie Lennart Herlaar

  2. Deze week • Lees de informatie op de website van het vak • Kieseenonderwerpvoor je website • Reserveringssysteemis al enige tijd open! • Zoeknaarbronmateriaal, begin met schrijven • Zorgdat je de tooling op ordekrijgt • Eerstepracticumsessie: vandaagnacollege • Assistentiebij tooling • Assistentiebij het van start gaan met je onderwerp

  3. Introductie Centraal architectuur diagram Webtechnologie Lennart Herlaar

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

  5. Centraalarchitectuur diagram Form, parameters, … Web Browser + Applicatie Parameters, code Webserver Interpreter HTML, CSS, JavaScript, JSON, … HTML, JavaScript, JSON, … File access File access File SQL Result set File Files RDBMS

  6. Introductie Eigenschappen (vervolgd) 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 zijnhieraangerelateerd • Erzijn (te) veelstandaarden in (te) veelversies • Browsers ondersteunenlangnietallestandaarden, en niet op de juistewijze • Als web developer ben je hiercontinumeebezig (sorry!) • Waaromdanüberhauptwebapplicaties?

  9. Het glas is half-vol! • "Iedereen" heefteen browser • En iedereenweet 'm tebedienen • Je applicatieheefteen zero-install footprint • De browser handelt de user-interface af • HTTP biedt heel veelzakenwèl • Evenals de webserver, het RDBMS en de taal • Standaarden en tools wordenvolwassen

  10. Wat is het alternatief? • Eeneigen application layer protocol bedenken • Eeneigen server schrijven • Eigen clients voor elk platform schrijven • Server installerenbij ISP • Downloads van clients en updates faciliteren • Gebruikers over de streeptrekken • Ondersteuningbieden

  11. The web programming environment Webtechnologie Lennart Herlaar

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

  13. Markup • Syntactischonderscheidbareannotatie van tekst • Vaak in-line toegepast • Procedural markup • Beschrijftpresentatie, stijl, layout, verwerking • Descriptive markup • Beschrijftstructuur en semantiek • Descriptive markup is veelaldomeinspecifiek • Loskoppeling van presentatie en structuur • Presentatievastleggen in eenstylesheet

  14. Hypertext • Tekst met (actieve) referenties • Doorbreektlineariteit 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 (1989-1991) "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 heeftz'nwortels in de Standard Generalized Markup Language (SGML) • Meer daaroverbij client side representation • Eersteversieonderdeel van het werk van Tim Berners-Lee • "HTML tags", eenlijst van zo'n 20 elementen • In de basis heel eenvoudig • Syntactischonderscheidbare tags • Nesting van tags, negeren van extra whitespace • De kracht zit in de hyperlinks

  16. HTML for dummies • Maar… <html> <head> <title>Hello world</title> </head> <body> <h1>My First Heading</h1> <p>My <b>first</b> paragraph.</p> <p> Including a <a href="index.html">link</a> </p> </body> </html>

  17. The web programming environment Browsers en servers Webtechnologie Lennart Herlaar

  18. Browsers • Client voor het HTTP protocol (User Agent) • Gereedschapvoorrendering van markup • Veelvarianten, beperktaantal rendering engines • Gecko, Webkit, Blink, Trident, (Presto) • Ondersteuning van standaardenzeer divers • (X)HTML(5), CSS(2/3), JavaScript, … • Dilemma's van fabrikanten • Market share / concurrentieoverwegingen, imago, legacy aspecten, ontwikkeltijd, Gartner Hype Cycle

  19. Browser marktaandeel

  20. Browser marktaandeel W3Schools W3Counter

  21. Webservers • Server voor het HTTP protocol • Beperktaantalopties, 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

  22. Webserver marktaandeel

  23. The web programming environment HTTP Webtechnologie Lennart Herlaar

  24. HyperText Transfer Protocol • WWW = HTML + HTTP + URIs • HTTP is eeneenvoudigstateless request-response protocol • Server luistert (meestal) op poort 80 • Client maakt TCP connectie met server (afsplitsing) • Client stuurt HTTP request • Server handelt request af en stuurt HTTP response • Server sluit TCP connectie met client

  25. HTTP request • HTTP request begint met een request method • GET – Haaleen resource op • HEAD – Haal de header van een resource op • PUT – Plaats/vervangeen resource • POST – Verwerk de meegezonden data • DELETE – Verwijdereen resource • OPTIONS – Geef de ondersteundemethoden • TRACE – Echo het request • …

  26. HTTP request • Overigeonderdelen van een HTTP request • Resource • Protocol versie • Header lines • Message body • GET en HEAD moetenondersteundworden • GET, HEAD, OPTIONS en TRACE zijn "safe" • PUT, DELETE (en safe methods) zijn idempotent • PUT en POST hebbeneen message body • Meestgebruiktzijn GET en POST GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 […] Accept: text/html, image/png

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

  28. 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 • Nietverwarren met Server not found error

  29. The web programming environment URIs, headers, persistence Webtechnologie Lennart Herlaar

  30. URL, URN, URI • Tot nu toe pagina en resource uitwisselbaar • Officiële term is resource • Uniform Resource Locator • Geeft de uniekelocatie van een resource op eennetwerkweer, inclusief de wijze van benadering • Uniform Resource Name • Geeft de uniekenaam van een resource weer • Uniform Resource Identifier • Overkoepelend, identificeertuniekeen resource

  31. URI voorbeelden • Absolute en relatievelocaties • Schemes, namespaces http://www.cs.uu.nl/docs/vakken/b2wt/index.html http://lennart:geheim@cs.uu.nl:8080/cijfers.php? student=0036123&cijfer=9#resultaat Practicum%20opgave.html ../../../colleges.txt #sectie01 ftp://ftp.cs.uu.nl/pub mailto:l.herlaar@uu.nl urn:isbn:0470916591 urn:isan:0000-0000-9E59-0000-O-0000-0000-2 Case sensitive?

  32. The gory details • (Sterk) vereenvoudigdegrammaticavoor URLs • RFC3986 – URIs : Generic Syntax url ::= scheme address scheme ::= http:// | 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-;:&

  33. URL encoding / decoding • Bijzonderekarakters in een URI • Spatie, control, :/@&=?%, diakritischetekens, enz. • Voor "normaal" gebruik in een URI is encoding / decoding nodig, ookwel percent-encoding • % teken met ASCII waardealshexadecimaalgetal • Spatie, ASCII code 32, 20 hexadecimaal, dus %20 • Overalwaar de URI gebruiktwordt • Chinese URLs? • Internationalized Resource Identifier

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

  35. HTTP headers • Veletientallen(optionele) headers gedefinieerd • Welkeheaders hangtaf van de HTTP versie • HTTP/1.0 versus HTTP/1.1 • Veelalgericht op content negotiation en efficiëntgebruik van de bandbreedte • De onderhandeling is "server-driven"

  36. 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 Later meerhierover! 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

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

  38. Poorten en sockets • Eenpoort is een "brievenbus" binnen het OS • Eenproceskanzichkoppelenaaneenpoort • Een socket is eeneindpuntvoorcommunicatie • Lokaal IP adres en poortnummer • Remote IP adres en poortnummer (bij TCP) • Transport protocol (TCP, UDP, …) • Een TCP verbindingwordtgeïdentificeerdaan de hand van een 4-tuple • De transportlaaggebruiktdezeinformatievoor (de)multiplexing

  39. TCP verbindingen Officiële IANA poortenvoor HTTP: 80 – HTTP 443 – HTTPS 8080 – HTTP (alt)

  40. Persistent connections Close Client Server Client Server Keep-Alive t 3-way TCP handshake incl. request 3-way TCP handshake incl. request > 2*RTT Response Response TCP disconnect 2 requests 2 responses 3-way TCP handshake incl. request 4 requests 4 responses Response Etc. TCP disconnect TCP disconnect Etc. Ready!

  41. Persistence versus state • Verwar persistent connections niet met state • Persistent connections betreffen state op TCP niveau • Op HTTP niveau is ergeen state • Echtniet? • Nouja, stiekemtochwelergensiets van… • Headers zijneenkrachtig "mod" mechanisme • Headers zijn in de regel bereikbaarvanuit je scripting taal Later meerhierover! Set-Cookie: UserID=darkhelmet; Max-Age=3600; Version=1

  42. Zelfaan de slag? • Eenvoudige webserver maken is nietmoeilijk • Beperktaantal methods en headers • Vaakook libraries beschikbaar 1 proces/thread per request Start proces/ thread Hoofdproces/thread, luistert op poort 80 Start proces/ thread (wacht op volgende request) Request Request Response Response

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

  44. Request For Comments • Details over protocollenzijntevinden in RFCs • RFC2616 – HTTP/1.1 • RFC3986 – URIs • Maar ook: TCP, IP, DHCP, DNS, … • Internet Engineering Task Force (IETF) • Peer review; veelstrikterdan het klinkt • (X)HTML(5)? • RFC2322 – peg-DHCP

More Related