html5-img
1 / 42

The web programming environment

The web programming environment. Webtechnologie. Lennart Herlaar. Inhoud. Markup, hypertext en HTML Browsers en servers HyperText Transfer Protocol URIs, headers, persistence Scripting en integratie. The web programming environment. Scripting en integratie. Webtechnologie.

lecea
Download Presentation

The web programming environment

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. The web programming environment Webtechnologie Lennart Herlaar

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

  3. The web programming environment Scripting en integratie Webtechnologie Lennart Herlaar

  4. Scripting • Scripts = korteprogrammaatjes, code snippets • Scripting maakt websites dynamisch • Volledigdynamischewebsite = webapplicatie • Zowelclient als server side mogelijk • In de regel minimaal server side • In het "Modern Web" tijdperkechternietmeervanzelfsprekend

  5. Client side scripting • Client side scripts wordenuitgevoerd in de browser • Client side scripts zijnonderdeel van de opgevraagdepagina • "Actief" zolang de paginagetoondwordt <body> <h1>My First JavaScript</h1> <script type="text/javascript"> document.write("<p>" + Date() + "</p>"); </script> </body>

  6. Client side scripting • In essentiegericht op het oplossen van tekortkomingenin protocol en presentatie! • Page based requests • Conditionele GUI, validatieinvoer, grafischeeffecten • Ontbreken van state • Fat clients, "desktop" applicaties in de browser • JavaScript (ECMAScript) • Maar… • Server side JavaScript

  7. Server side scripting • Server side scripts wordenuitgevoerdop de webserver (of application server) • Erbestaanverschillendeintegratiemethoden • Veelalhet "one resource at a time" paradigma • Een request leidt tot de aanroep van een script • Het script genereert HTML (vaakeen form) en stopt • De invoervoor het script is een form • Het draaien van eenwebapplicatie is eenlange reeks script aanroepen

  8. Scripting talen: gemenedeler • Geïnterpreteerd, of just-in-time compilatie • Geen (verplichte) declaraties • Dynamischgetypeerd • Goedevoorzieningenvoortekstmanipulatie • Reguliereexpressies • Veel libraries / modules beschikbaar • Buitengewoonflexibel, high level • Buitengewoongevaarlijk

  9. Scripting talen • Belangrijkeeigenschapvoor het web • "Executable source code" • Voor server side is een scripting taalgeenvereiste • PHP, Python, Perl, Ruby • Maar ook Java, C#, C/C++, Pascal, … • Afhankelijk van de integratiemethode • En voor de client side (naast JavaScript)? • Java Applets, Flash, ActiveX en andereobjects

  10. Architectuur diagram revisited HTTP request Execute Form, parameters Parameters, code Web browser Webserver Applicatie HTTP response Return HTML HTML File access DB access File SQL Result set Files RDBMS

  11. POST versus GET • POST: form data in HTTP message body • GET: form data in URI (HTTP resource veld) • Query string (URL encoded) <form name="input" action="welcome.php" method="get"> First name: <input type="text" name="first" /><br /> Last name: <input type="text" name="last" /><br /> <input type="submit" value="Send" /> </form> http://…/welcome.php?first=Willie&last=Wartaal

  12. 1. Common Gateway Interface • Standaardvoor de aanroep van externeprogramma's via de webserver • Perl, Python, shell scripts, executables (C++, …) • Webserver start proces; geeft query string door • Via environment variabele (GET) • Via standaardinvoer (POST) • Procesgenereert headers en HTML • Op standaarduitvoer

  13. 1. Common Gateway Interface • Herkenbaaraanspecialecgi-bin directory • Enkele environment variabelen • QUERY_STRING (bij GET) • CONTENT_LENGTH (bij POST) • CONTENT_TYPE • REMOTE_ADDR • CGI is relatiefzwaarvoor de webserver • FastCGIhoudt het procesactief (state, anyone?) • CGI is eenbeetje old-skool

  14. 2. Inlining code in document • Code snippets die tussen de HTML code staan • Van bovennaaronderenuitgevoerd • De code snippets wordenvervangen door hunuitvoer • Geïmplementeerd in de vorm van webserver modules of CGI • Server Side Includes (SSI), PHP, ASP.NET, JSP

  15. Server Side Includes • Voorloper van latere HTML embedded code • Preprocessing directives tussen de HTML code • Herkenbaaraanextensie (.shtml) of execbit • Ook old-skool <h1><!--#echo var="DATE_LOCAL" --></h1> <pre> <!--#exec cmd="ls" --> </pre> <p> Gewijzigd: <!--#flastmod file="index.html" --> </p>

  16. PHP: Hypertext Preprocessor <html> <body> <p> <?php echo "HelloWorld"; ?><br/> <?php $d=date("D"); if($d==”Wed" || $d==”Fri") echo "Lecture time!"; ?> </p> </body> </html> <html> <body> <p> HelloWorld<br/> Lecturetime! </p> </body> </html>

  17. 2. Inlining code in document • Oorspronkelijkvoorkleinestukjes code • Dunne scheidslaagtussen code en structuur • Steeds in en uit context springen • De code wordtsnelonleesbaar • Modernereinsteek • Alle HTML gegenereerdvanuit de code • Templates voorvasteonderdelen • MVC frameworks waarbij de HTML paginanietveelmeer is daneenaanroep van een generate functie

  18. 3. Integratie in webserver • Uitbreiden van de functionaliteit van de server • Vaak in de vorm van specifieke classes die specifieke requests afhandelen • Java Servlets, JSP • javax.servlet en javax.servlet.http packages • JDBC voor database connectivity • Filters en filterchains • Java is eenbekendeserieuzeprogrammeertaal • Minder overhead in afhandeling request • Sterkeintegratiekangevaarlijkzijn

  19. State revisited • Waarkunnen we state onderbrengen? • Query string /hidden input fields • Client side cookies • Client side scripts • Server side (database, file system, script) • Als web developer maak je hierinkeuzes • Eendeelervanblijft ping-pongen • Het blijft overhead en een security risico • Je blijftermeebezig… Later meerhierover!

  20. Client side representation Webtechnologie Lennart Herlaar

  21. Inhoud • Documentformaten • Het einde van het web • SGML, XML en HTML • XHTML en HTML5

  22. Documentformaten • De mythe van het papierlozekantoor • > 260 miljoen prints per dag in Nederland • Merendeelgebruiktvoor transport • Papieralsgrootstegemenedeler • Paradigma shift noodzakelijk • Belang van standaarden • Open standaarden

  23. Andere markup talen?

  24. Soorten markup revisited • Procedural markup versus descriptive markup • Presentatie versus structuur & semantiek • Toegankelijkheid: gebruikerbepaalt • Onderhoudbaarheid: descriptive is duurzaam • Verwerkbaarheid: indexering, eenduidigheid • Onontkoombaarheid: kun je zonder?

  25. HTML puur? <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> <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>

  26. Client side representation Het einde van het web Webtechnologie Lennart Herlaar

  27. HTML puur! • '91: HTML Tags • '93: HTML Internet Draft, IETF • Gedefinieerdalstoepassing van SGML • <IMG> tag • Intentie was duidelijk "It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anythingwhich requires control over fonts or colors, for example. This is in keeping with the SGML ideal."

  28. De ondergang van het web • Eenvasteverzameling tags is nooitvoldoende • Ongeachte de grootte van die verzameling • Auteurs willen exact bepalen hoe hundocumentengepresenteerdworden • Proliferatie van versies en "standaarden" • Gericht op presentatiei.p.v. structuur

  29. The road to hell… • '93: HTML+ • Tables, forms • '95: HTML 3.0 • '95: HTML 2.0 (IETF) • Conflicten en commercie • Browser specific tags • '97: HTML 3.2 (W3C) • '98: HTML 4.0 (3 versies) • '99: HTML 4.01

  30. Browser wars • Netscape was absolute marktleider • Microsoft mistebijna de Internet boot • Pas in 1995 gooide Bill Gates het roerom • Eenwapenwedloop was het gevolg • Nieuwe tags; nietaltijd supersets • Vergevingsgezindheid • Incompatibiliteit "by design" • Evenals chaos • Gebruikers die hiergebruik van maken… • Absolute positionering, vertrouwenop bugs

  31. Browser wars <BLINK> ... At some point in the evening I mentioned that it was sad that Lynx was not going to be able to display many of the HTML extensions that we were proposing, I also pointed out that the only text style that Lynx could exploit given its environment was blinking text. We had a pretty good laugh at the thought of blinking text, and talked about blinking this and that and how absurd the whole thing would be. [...] Saturday morning rolled around and I headed into the office only to find what else but, blinking text. It was on the screen blinking in all its glory, and in the browser. How could this be, you might ask? It turns out that one of the engineers liked my idea so much that he left the bar sometime past midnight, returned to the office and implemented the blink tag overnight. He was still there in the morning and quite proud of it. - Lou Montulli

  32. Hype Cycle en het web

  33. Client side representation SGML, XML en HTML Webtechnologie Lennart Herlaar

  34. Een HTML document is een boom • HTML alstoepassing van SGML; hiërarchisch <html> <head> <title>…</title> </head> <body> <h1>…</h1> <p> <b>…</b> </p> <p> <a>…</a> </p> </body> </html> html head body title h1 p p b a

  35. SGML • Standard Generalized Markup Language • ISO standaard, 1986 • Generalized • Metataalvoor markup talen • Document Type Definition noodzakelijk • Grote, complexestandaard • Toegepastbijgroteuitgevers, vliegtuigindustrie • Gerelateerd: DSSSL, HyTime • Tevroeg? Te complex?

  36. W3C • Inzichtdat het nietvanzelfgoedzoukomen • World Wide Web Consortium • Opgericht door Tim Berners-Lee in 1994 • Breedgedragenindustriestandaarden • > 300 leden • Van Working Draft naar Recommendation • Veelstrikterdan het klinkt • Medeverantwoordelijkvoor de chaos • Maar ookvoor de wegomhoog

  37. XML • SGML te complex • HTML een chaos; in de basis SGML • Eenvoudige SGML variant voorwebtoepassingen • eXtensibleML • "Formal and precise" • DTD nietverplicht • Nietalles in éénstandaard • W3C REC in 1998 Kick!

  38. Document Type Definition <?xml version="1.0"?> <notes><note id="501"> <to>Yolanthe</to> <from>Wesley</from> <body>Vergeet je de melkniet?</body> </note> <note id="502"> <to>Wesley</to> <from>Yolanthe</from><body>Wat is melk in het Turks?</body> </note> <notes> <?xml version="1.0"?><!DOCTYPE note SYSTEM "note.dtd"> <notes><note id="501"> <to>Yolanthe</to> <from>Wesley</from> <body>Vergeet je de melkniet?</body> </note> <note id="502"> <to>Wesley</to> <from>Yolanthe</from><body>Wat is melk in het Turks?</body> </note> <notes> <!DOCTYPE note [ <!ELEMENT notes (note+)> <!ELEMENT note (to,from,body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT body (#PCDATA)> <!ATTLIST note id ID #REQUIRED> ]>

  39. XML • Hiërarchischestructuur (XML doc is een boom) • Elementenmakenstructuurexpliciet • Attributenbevatten metadata • Namenkunnenvrijgekozenworden • eXtensible, nietvastgelegd in XML (wel in DTD) • Alleenstructuur/semantiek, geenpresentatie • Uitwisselingstaal; zelfbeschrijvenddataformaat • Startpuntvoorveelgerelateerdestandaarden SGML Extensibility Structure Validation Precieswat we zochten? Precieswat we zochten! XML Simplicity HTML

  40. Well formed versus valid XML • Well formed XML • XML syntactisch correct • Elementen: start tag, end tag • Empty elementen: <tag/> • Attributen: "="-tekenen aanhalingstekens • Eén top-element • Hiërarchie in orde; correct genesteelementen • Bepaalderegels voornaamgeving • Valid XML • Well formed XML en conform een DTD (of schema)

  41. HTML 4.01 • HTML 4.01 was de laatste "vieze" versie • Al eenstap in de goederichting • HTML 4.01 Frameset • HTML 4.01 Transitional • HTML 4.01 Strict • <!DOCTYPE> is een SGML artefact! • Maar: nietpersé well formed XML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

  42. Deprecation • Veelelementen "deprecated" in HTML 4.01 Strict • Vooralwaar het presentatiebetreft • <font>, <strike>, <u>, <center>, <iframe> • Maar: <b>, <i>, <tt>, <big>, <small> ? • Idem voorattributen • background, bgcolor • Maar: align ? • Dezezakenvoortaan met style sheets

More Related