Web Technology

1
Chapter 3

• Web Technology

2
Web Publishing

• Static documents
• HTML, ASCII text, Postscript, PDF
• GIF, JPEG, MOV, Quicktime, AVI
• AU, WAV, MP3, RealAudio
• Dynamic documents
• executable content
• Java, Javascript, Active-X, Dynamic HTML
• Variable documents
• Dynamically-generated (on-the-fly)
• CGI, FastCGI, JSP, PHP

3
HyperText Markup Language

• Document structure description
• (sub-)sections
• headings
• tables
• No (?) layout information
• style sheets
• font mapping
• Defined in SGML / XML (XHTML)
• Document Type Definition (DTD)

4
HTML Basic Elements

• ltHTMLgt
• ltHEADgt
• ltTITLEgtHello Worldlt/HTMLgt
• lt/HEADgt
• ltBODYgt
• Oh, what a beautiful morning....
• lt/BODYgt
• lt/HTMLgt

5
HTML Elements

• physical text styles
• logical test styles
• test segmentation
• tables
• inline pictures
• anchors/links
• forms
• specials
• image maps (client/server)
• background pic/audio, marquees

6
HTML Development

• Browser war (NS Navigator vs. MSIE)
• World Wide Web Consortium (W3C)
• rendering
• internationalization
• forms
• active content
• object models

7
HTML History

• HTML 2.0
• 1st version conforming to SGML
• Core HTML (lists, forms, headings, fonts, image
  maps, ...)
• HTML 3.2 (no HTML 3.0 HTML 3.1)
• many elements get additional attributes
• font sizes, font faces, colors
• form-based file upload
• client-side image maps
• tables, APPLET tag
• STYLE and SCRIPT tags (placeholders, no exact
  mechanisms)

8
HTML 3.2

• Script Tags
• JavaScript, VBScript, Jscript
• eventless
• APPLET tag
• Styles (CSS)
• ALIGNs generalized
• client-side image-maps
• FONT
• formulas
• FORM based file upload

9
HTML 4.0

• accessability
• labels, legend, clusters
• iterators, access keys
• character encodings, language codes (lang)
• bidrectional text (dir)
• incremental rendering
• tables, images
• objects (nested)
• scripts and events
• frames

10
HTML 4.0 (Frames)

• TARGETs
• ltA href"slide2.html" target"dynamic"gtslide
  2.lt/Agt
• IFRAMEs
• ltIFRAME src"foo.html" width"400" height"500"
  scrolling"auto" frameborder"1"gt
• Your user agent does not support frames
• lt/IFRAMEgt

11
HTML 4.0 (Scripts)

• client-side execution at
• loading
• user input (focus, pointer movement)
• language selection
• ltMETA http-equiv"Content-Script-Type"
  content"type"gt
• ltSCRIPT type"text/vbscript" src"http//someplace
  .com/progs/vbcalc"gt
• lt/SCRIPTgt
• evaluation order, object modification (DOM)

12
HTML 4.0 (Events)

• Loading
• onload, unload
• Pointer
• onmousemove, onmousmoveover, ...
• Keyboard
• onkeypress, onkeydown, ...
• Form handling
• onsubmit, onreset, onselect, onchange
• ltINPUT NAME"userName" onblur"validUserName(this.
  value)"gt

13
HTML 4.01

• Common attributes for many elements Id, Title,
  Style, Class
• Improved tables (Thead, Tbody, Tfoot, column
  handling, formatting), Incremental rendering of
  tables
• Improved forms
• STYLE element now encloses style sheet
  instructions (CSS)
• Style sheets separation of content and styles
  (CSS)

14
HTML 4.01

• Frames, Embedded documents (IFRAME)
• APPLET element deprecated (OBJECT)
• Intrinsic events (onclick, ondblclick,
  onmouseover, onmouseout, ...)
• OBJECT element (IMAGE, APPLET, IFRAME)
• SCRIPT element (client-side scripting -
  JavaScript, VBScript, ...)

15
OBJECT Element Examples
16
More OBJECT examples

• ltOBJECT data"canyon.png" type"image/png"gt
• This is a ltEMgtcloseuplt/EMgt of the Grand
  Canyon.
• lt/OBJECTgt
• ltOBJECT classid"http//www.miamachina.it/clock.py
  "gt
• An animated clock.
• lt/OBJECTgt
• ltOBJECT data"embed_me.html"gt
• Warning embed_me.html could not be included.
• lt/OBJECTgt

17
Client-side Scripting 1

• Languages JavaScript, VBScript, Python, Tcl, ...
• Security ?

18
Client-side Scripting 2
19
Client-side Scripting 3
20
Cascading Style Sheets

• Separation of content (HTML, XML documents) and
  presentation style (CSS)
• simplified Web authoring
• easier Web site maintenance
• CSS vs. XSL
• CSS was defined earlier
• XSL is still a draft while CSS is already
  supported by browsers
• XSL is more powerful gt too complex for many
  users/applications

21
Style and HTML
22
External CSS and Cascasding
23
Without Style
24
Better do it stylish !
25
CSS by Example (1/3)
26
CSS by Example (2/3)
27
CSS by Example (3/3)
28
Extensible Markup Language

• XML (1998) is an application of SGML
• Standard Generalized Markup Language (1986)
  ISO8879
• influenced by HTML (SGML Document Type
  Definifion)
• Structure description language
• Meta-language language to describe other
  languages
• Tags enclose identifiable parts of a document
• markup (type-setting systems)

29
XML Example

• ltwarninggt
• ltparagtThis substance is ltemphgthazardouslt/emphgt to
  healthlt/paragt
• ltparagtSee procedure 12A.7 for information on
  protective clothing.lt/paragt
• ltimage .../gt
• lt/warninggt

30
XML Documents
logical structure division of documents into name units and sub-units unit element physical structure components of the document can be named and stored separately component entity

Document
Document
Unit
Sub-unit
31
Document Type Definition

• DTD defines the elements allowed
• A parser compares the DTD rules against a given
  XML document gt validation
• XML DTDs can be applied for data-type definitions
  (XML-RPC), data exchange (EDI, push, RDBMS), etc.

32
XML Document Presentation

• Style sheets specify output format
• 1 XML document, n alternative style sheets
  depending on audience, media, etc.

WARNING
This substance is hazardous to health See
procedure 12A.7 for information on protective
clothing.
33
XML by Example (1/2)
34
XML by Example (2/2)
35
Extensible Stylesheet Language

• XSL is a language for expressing stylesheets and
  consists of
• a language for transforming XML documents (XSLT)
• an XML vocabulary for specifying formatting
  semantics (Formatting Objects DTD - FO DTD)
• CSS lt XSL lt DSSSL (SGML's Document Style
  Semantics and Specification Language)
• Style sheets
• target specific elements gt closely related with
  DTDs

36
XSL and XSLT Processing
XSL processor
XSLT stylesheet
XSLT processor
source DTD
document
new document
FO DTD
37
Document Reengineering

• analysis
• data sources, responsibilities and update
  dynamics
• data model
• EER (extended entity-relationship model)
• mapping logical -gt physical
• reverse association how to link back
• forward association how to link forward

38
HTML Code Creation

• Editors
• Tags, Syntax
• Validators
• Halsoft, htmllint, ....
• Converters
• which HTML? DTD as parameter
• how to map the document structure into HTML?
• special symbols? mathematical formulas?
• what happens with hyperlinks in original document?

39
HTML Creation (cont'd)

• Development Environments
• versioning
• staging
• TODO database
• link consistency
• upload to server
• integration of functionality
• CGIs
• backend applications, databases
• client-side scripting

40
Webserver State maintenance

• HTTP interactions are "isolated", i.e., HTTP does
  not include means to hand over state information
  between interactions -gt difficult
• Advanced web applications, e.g. shopping basket,
  require that state can be shared between
  interactions (between web client and web server)
• External apps have their own state space

41
WWW Gateways
HTTP
Web browser
Web server
CGI (HTTP)
WWW
CGI gateway
Gateway-specific protocol
non WWW
Application
42
Stateful Gateways

• A permanently running gateway process keeps up a
  connection with the external application and
  serves successive HTTP requests, i.e. the gateway
  maintains the session?s state.
• Problem state bookkeeping
• client caches
• back button
• interrupted requests (recover ?)
• time-out for follow-up requests (bound resources
  ?)
• Example DBs (expensive login)

43
Stateless Gateways

• Gateway or external application generate
  state-information which is stored at the client
  and sent with every request.
• State can be stored in
• URLs
• hidden fields
• Cookies
• Solve state consistency problem ?

44
State in URLs / Hidden Fields

• State information can become large
• User can change state information (reservation ?)
• Sessions may have to be replayed until the state
  for the next step is reached
• Unreadable URLs are no solution
• Passwords ?

45
Cookies

• A cookie is a small data structure which holds
  name, value pairs which is sent back and forth
  between web client and web server for certain
  URLs
• Several incompatible "standards"
• original standard by Netscape (Set-Cookie)
• RFC 2109 (Set-Cookie)
• New Internet Draft (Set-Cookie2)

46
Cookie example
User shops around and gathers 2 items in his
shopping basket (server -gt client)
User decides to buy the 2 items and
selects http//www.supershop.com/cgi-bin/order/buy
.pl (client -gt server)
47
More about Cookies

• Cookies can enhance or break privacy
• tracking vs. no user database
• Cookies are kept in memory
• Persistent cookies cookies.txt file

creator (domain)
path
expiration
name
value
access for all hosts in domain ?
require secure connection ?
48
Server-side Includes

• .shtml files are parsed for special commands
• executed before the file is sent to the client

49
SSI Syntax
Main elements
exec execute a shell or CGI script
fsize print the size of a given file/URL
flastmod print last modification date
include insert contents of another document
set set the value of a variable
Variables (additionally to CGI environment
variables) DATE_GMT, DOCUMENT_NAME,
DOCUMENT_URI, LAST_MODIFIED
Flow control lt!--if expr"test
condition" --gt lt!--elif expr"test
condition" --gt lt!--else --gt
lt!--endif --gt
50
SSI problems

• Performance
• parsing
• command execution
• Security
• exec command, etc.
• IncludesNoExec
• Unreadable -gt maintenance ?

51
SSI example
52
PHP

• HTML-embedded scripting language
• Syntax similar to C/Perl/Java
• Powerful features
• PHP scripts can replace CGIs
• Powerful support for many databases
• Support for HTTP, IMAP, SNMP, NNTP, POP3
• Access to raw sockets
• Security ?

53
PHP DB access example
54
Simple PHP example
55
JavaServer Pages

• JSP "Java-based ASP"
• Dynamic scripting
• JSP pages can contain
• HTML/XML
• Java scriplets
• special tags
• JSP engine required

56
JSP example
57
Common Gateway Interface

• Standard for interfacing external applications
  with web servers (databases, etc.)
• CGI programs execute at the web server and
  produce output dynamically ("HTML document does
  not exist in advance")
• Language-independent CGI programs can be written
  in any programming language (Perl, C, Java, Tcl,
  ...)

58
Simple CGI Example (1/3)

• GET
• CGI script is started by the web server
• gets the parameters as environment variable
  QUERY_STRING (URL encoded)
• QUERY_STRING"par1hellopar2world"

59
Simple CGI Example (2/3)

• POST
• CGI script is started by the web server and gets
  the parameters via standard input (URL encoded)
• CGI script does not get EOF but must check the
  environment variable CONTENT_LENGTH how much to
  read from stdin

60
Simple CGI Example (3/3)

• MyScript.pl print all set environment variables

61
FastCGI

• Migrating of CGI programs is very easy
• Performance
• persistent (multi-threaded) processes
• after finishing a request the processes continue
  to run and wait for new requests
• Support for distributed computing
• FastCGI programs can run remotely
• load distribution

62
CGI vs. APIs

• CGI
• simple
• language independent
• isolated processes
• open standard
• architecture independent
• single/multi-threaded
• single/multi-tier

63
Servlets

• Modules (pieces of code) which run on
  Java-enabled web servers
• Servlet engine execution environment
• Java Servlet API Specification (SUN)
• Java package javax.servlet

Servlet engine
Load
Servlet code
Servlet engine
Client
Servlet code
Client
Servlet engine
Unload
Servlet code
64
Servlets vs. CGI

• Portable code
• Useful features (sessions, cookies, ...)
• Multi-threading
• Faster
• does not run as a separate process
• stays in memory between requests
• a single servlet instance answer request
  concurrently
• Sandbox for servlets possible

65
Apache Jserv Servlet Engine

• Java Servlet API 2.0 compliant
• Multi-threaded, separated from web server
• Integrated load balancing features
• Smart redirection of requests
• AJP protocol allows creation of complex
  distributed applications
• MD5 based connection authentication and IP
  filtering