The web programming environment 1 Webtechnologie Lennart Herlaar.

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


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></h1><pre> </pre><p> Gewijzigd: </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


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?



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



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

The web programming environment 1 Webtechnologie Lennart Herlaar.

Documents

Transcript of The web programming environment 1 Webtechnologie Lennart Herlaar.