The web programming environment 1 Webtechnologie Lennart Herlaar

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

The web programming environment 3 Webtechnologie Lennart Herlaar

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 My First JavaScript document.write(" " + Date() + " ");

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 Webserver Web browser Applicatie RDBMS Files HTTP request HTTP response File access DB access Execute Return Parameters, code HTML Form, parameters HTML SQL Result set File

POST versus GET POST: form data in HTTP message body GET: form data in URI (HTTP resource veld) Query string (URL encoded) First name: Last name:

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 Gewijzigd:

PHP: Hypertext Preprocessor <?php echo "Hello World"; ?> <?php $d=date("D"); if ($d==”Wed" || $d==”Fri") echo "Lecture time!"; ?> Hello World Lecture time!

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 20 Webtechnologie Lennart Herlaar

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?

Hello world My First Heading My first paragraph. Including a link Hello world My First Heading My first paragraph. Including a link HTML puur?

Client side representation 26 Webtechnologie Lennart Herlaar

HTML puur! '91: HTML Tags '93: HTML Internet Draft, IETF Gedefinieerd als toepassing van SGML 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

Hype Cycle en het web

Client side representation 33 Webtechnologie Lennart Herlaar

Een HTML document is een boom html headbody title h1 p ab p … … … 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 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 Yolanthe Wesley Vergeet je de melk niet? Wesley Yolanthe Wat is melk in het Turks? <!DOCTYPE note [ ]> Yolanthe Wesley Vergeet je de melk niet? Wesley Yolanthe Wat is melk in het Turks?

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 Extensibility Structure Validation

Well formed versus valid XML Well formed XML XML syntactisch correct Elementen: start tag, end tag Empty elementen: 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 is een SGML artefact! Maar: niet persé well formed XML

Deprecation Veel elementen "deprecated" in HTML 4.01 Strict Vooral waar het presentatie betreft,,,, Maar:,,,, ? Idem voor attributen background, bgcolor Maar: align ? Deze zaken voortaan met style sheets