Upload
merel-meyer
View
216
Download
0
Tags:
Embed Size (px)
Citation preview
The web programming environment
1WebtechnologieLennartHerlaar
Inhoud
• Markup, hypertext en HTML
• Browsers en servers
• HyperText Transfer Protocol
• URIs, headers, persistence
• Scripting en integratie
The web programming environment
3WebtechnologieLennartHerlaar
Scripting en integratie
Scripting
• Scripts = korte programmaatjes, code
snippets
• Scripting maakt websites dynamisch
• Volledig dynamische website = webapplicatie
• Zowel client als server side mogelijk
• In de regel minimaal server side
• In het "Modern Web" tijdperk echter niet meer
vanzelfsprekend
Client side scripting
• Client side scripts worden uitgevoerd in de browser• Client side scripts zijn onderdeel van de
opgevraagde pagina
• "Actief" zolang de pagina getoond wordt
<body> <h1>My First JavaScript</h1> <script type="text/javascript"> document.write("<p>" + Date() + "</p>"); </script></body>
Client side scripting
• In essentie gericht op het oplossen van tekortkomingen in protocol en presentatie!
• Page based requests• Conditionele GUI, validatie invoer, grafische
effecten
• Ontbreken van state• Fat clients, "desktop" applicaties in de
browser
• JavaScript (ECMAScript)• Maar…
• Server side JavaScript
Server side scripting
• Server side scripts worden uitgevoerd op de webserver (of application server)
• Er bestaan verschillende integratiemethoden
• Veelal het "one resource at a time" paradigma• Een request leidt tot de aanroep van een
script• Het script genereert HTML (vaak een form) en
stopt• De invoer voor het script is een form
• Het draaien van een webapplicatie is een lange reeks script aanroepen
Scripting talen: gemene deler
• Geïnterpreteerd, of just-in-time compilatie
• Geen (verplichte) declaraties
• Dynamisch getypeerd
• Goede voorzieningen voor tekstmanipulatie
• Reguliere expressies
• Veel libraries / modules beschikbaar
• Buitengewoon flexibel, high level
• Buitengewoon gevaarlijk
Scripting talen
• Belangrijke eigenschap voor het web• "Executable source code"
• Voor server side is een scripting taal geen vereiste• 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 andere
objects
Architectuur diagram revisited
WebserverWebbrowser
Applicatie
RDBMSFiles
HTTP request
HTTP response
File a
ccess
DB
access
Execute
Return
Parameters, code
HTML
Form, parameters
HTML
SQ
L
Resu
lt s
et
File
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
1. Common Gateway Interface
• Standaard voor de aanroep van externe programma's via de webserver
• Perl, Python, shell scripts, executables (C++, …)
• Webserver start proces; geeft query string door• Via environment variabele (GET)
• Via standaardinvoer (POST)
• Proces genereert headers en HTML• Op standaarduitvoer
1. Common Gateway Interface
• Herkenbaar aan speciale cgi-bin directory• Enkele environment variabelen
• QUERY_STRING (bij GET)• CONTENT_LENGTH (bij POST)• CONTENT_TYPE• REMOTE_ADDR
• CGI is relatief zwaar voor de webserver• FastCGI houdt het proces actief (state,
anyone?)• CGI is een beetje old-skool
2. Inlining code in document
• Code snippets die tussen de HTML code
staan
• Van boven naar onderen uitgevoerd
• De code snippets worden vervangen
door hun uitvoer
• Geïmplementeerd in de vorm van
webserver modules of CGI
• Server Side Includes (SSI), PHP, ASP.NET,
JSP
Server Side Includes
• Voorloper van latere HTML embedded code
• Preprocessing directives tussen de HTML code
• Herkenbaar aan extensie (.shtml) of exec bit
• Ook old-skool
<h1><!--#echo var="DATE_LOCAL" --></h1><pre> <!--#exec cmd="ls" --></pre><p> Gewijzigd: <!--#flastmod file="index.html" --></p>
PHP: Hypertext Preprocessor
<html> <body> <p> <?php echo "Hello World"; ?><br/> <?php $d=date("D"); if ($d==”Wed" || $d==”Fri") echo "Lecture time!"; ?> </p> </body></html>
<html> <body> <p> Hello World<br/> Lecture time! </p> </body></html>
2. Inlining code in document
• Oorspronkelijk voor kleine stukjes code• Dunne scheidslaag tussen code en
structuur• Steeds in en uit context springen• De code wordt snel onleesbaar
• Modernere insteek• Alle HTML gegenereerd vanuit de code• Templates voor vaste onderdelen• MVC frameworks waarbij de HTML pagina niet
veel meer is dan een aanroep van een generate functie
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 een bekende serieuze
programmeertaal• Minder overhead in afhandeling request• Sterke integratie kan gevaarlijk zijn
State revisited
• Waar kunnen 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 hierin keuzes• Een deel ervan blijft ping-pongen• Het blijft overhead en een security risico• Je blijft ermee bezig…
Later meer hierover!
Client side representation
20WebtechnologieLennartHerlaar
Inhoud
• Documentformaten
• Het einde van het web
• SGML, XML en HTML
• XHTML en HTML5
Documentformaten
• De mythe van het papierloze kantoor
• > 260 miljoen prints per dag in
Nederland
• Merendeel gebruikt voor transport
• Papier als grootste gemene deler
• Paradigma shift noodzakelijk
• Belang van standaarden
• Open standaarden
Andere markup talen?
Soorten markup revisited
• Procedural markup versus descriptive
markup
• Presentatie versus structuur & semantiek
• Toegankelijkheid: gebruiker bepaalt
• Onderhoudbaarheid: descriptive is
duurzaam
• Verwerkbaarheid: indexering,
eenduidigheid
• Onontkoombaarheid: kun je zonder?
<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>
HTML puur?
Client side representation
26WebtechnologieLennartHerlaar
Het einde van het web
HTML puur!
• '91: HTML Tags• '93: HTML Internet Draft, IETF
• Gedefinieerd als toepassing 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 anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal."
De ondergang van het web
• Een vaste verzameling tags is nooit
voldoende
• Ongeachte de grootte van die verzameling
• Auteurs willen exact bepalen hoe hun
documenten gepresenteerd worden
• Proliferatie van versies en
"standaarden"
• Gericht op presentatie i.p.v. structuur
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
Browser wars
• Netscape was absolute marktleider• Microsoft miste bijna de Internet boot
• Pas in 1995 gooide Bill Gates het roer om• Een wapenwedloop was het gevolg
• Nieuwe tags; niet altijd supersets• Vergevingsgezindheid• Incompatibiliteit "by design"
• Evenals chaos• Gebruikers die hier gebruik van maken…• Absolute positionering, vertrouwen op bugs
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
Hype Cycle en het web
Client side representation
33WebtechnologieLennartHerlaar
SGML, XML en HTML
Een HTML document is een boom
html
head body
title h1 p
ab
p
<html> <head> <title>…</title> </head> <body> <h1>…</h1> <p> <b>…</b> </p> <p> <a>…</a> </p> </body></html>
• HTML als toepassing van SGML; hiërarchisch
SGML
• Standard Generalized Markup Language• ISO standaard, 1986
• Generalized• Metataal voor markup talen• Document Type Definition noodzakelijk
• Grote, complexe standaard• Toegepast bij grote uitgevers,
vliegtuigindustrie• Gerelateerd: DSSSL, HyTime• Te vroeg? Te complex?
W3C
• Inzicht dat het niet vanzelf goed zou komen
• World Wide Web Consortium• Opgericht door Tim Berners-Lee in 1994• Breedgedragen industriestandaarden• > 300 leden
• Van Working Draft naar Recommendation• Veel strikter dan het klinkt
• Medeverantwoordelijk voor de chaos• Maar ook voor de weg omhoog
XML
Kick
!
• SGML te complex• HTML een chaos; in de basis SGML• Eenvoudige SGML variant voor
webtoepassingen • eXtensible ML• "Formal and
precise"• DTD niet verplicht• Niet alles in één
standaard• W3C REC in 1998
Document Type Definition
<?xml version="1.0"?><notes> <note id="501"> <to>Yolanthe</to> <from>Wesley</from> <body>Vergeet je de melk niet?</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>]>
<?xml version="1.0"?><!DOCTYPE note SYSTEM "note.dtd"><notes> <note id="501"> <to>Yolanthe</to> <from>Wesley</from> <body>Vergeet je de melk niet?</body> </note> <note id="502"> <to>Wesley</to> <from>Yolanthe</from> <body>Wat is melk in het Turks?</body> </note><notes>
XML
• Hiërarchische structuur (XML doc is een boom)
• Elementen maken structuur expliciet• Attributen bevatten metadata• Namen kunnen vrij gekozen worden
• eXtensible, niet vastgelegd in XML (wel in DTD)
• Alleen structuur/semantiek, geen presentatie
• Uitwisselingstaal; zelfbeschrijvend dataformaat
• Startpunt voor veel gerelateerde standaarden
HTML
SGML
XML
Simplicity
ExtensibilityStructureValidation
Precies wat we zochten!
Precies wat we zochten?
Well formed versus valid XML
• Well formed XML• XML syntactisch correct• Elementen: start tag, end tag• Empty elementen: <tag/>• Attributen: "="-teken en aanhalingstekens • Eén top-element• Hiërarchie in orde; correct geneste elementen• Bepaalde regels voor naamgeving
• Valid XML• Well formed XML en conform een DTD (of
schema)
HTML 4.01
• HTML 4.01 was de laatste "vieze" versie• Al een stap in de goede richting
• HTML 4.01 Frameset• HTML 4.01 Transitional• HTML 4.01 Strict
• <!DOCTYPE> is een SGML artefact!
• Maar: niet persé well formed XML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
Deprecation
• Veel elementen "deprecated" in HTML 4.01 Strict
• Vooral waar het presentatie betreft• <font>, <strike>, <u>, <center>, <iframe>
• Maar: <b>, <i>, <tt>, <big>, <small> ?
• Idem voor attributen• background, bgcolor
• Maar: align ?
• Deze zaken voortaan met style sheets