Web Technologies

Jan Newmarch, Yinan Yang

HTML Variations

• There are several version of HTML
  • HTML 2.0
  • HTML 3.2
  • HTML 4.0
HTML 4.0 has subcategories
• Transitional: may use presentation tags and attributes
• Strict: relies on stylesheets for all presentation aspects
• In addition there are newer variants
  • XHTML is HTMl 4.0 and XML-based, intended to replace HTML 4.0
  • cHTML (Compact HTML) used in Japanese iMode PDAs, mobile phones

Browser Variations

• Browser support for the HTML standards is erratic.
  • Not all tags are supported
  • Not all attributes are supported
• Browsers often have additional tags not in the standards
• A complex page will need to be designed for each browser (and each version of each browser)
• A summary of tags and attributes is at http://www.ncdesign.org/html/list.htm
• A summary of general browser capabilities is at http://hotwired.lycos.com/webmonkey/reference/browser_chart/
• A discussion of some browser layout differences is at http://hotwired.lycos.com/webmonkey/99/41/index3a.html
• A list of browser capabilities is at http://www.cyscape.com/browscap/

Web Applications Modelling

• Web applications consist of a sequence of browser pages and CGI scripts (or other) that generate them
• A UML extension to help model these is given at http://www.conallen.com
• A server page ultimately builds the resulting client page.
• Links between client pages and other pages
• Links to server pages may include parameters:
• A form identifies a specific web page to accept and process data

State Information

• Stateful server
• Stateless server
• Static Web documents
• CGI applications
• Web applications
• A browser can keep state information in
  • Cookies
  • Hidden form fields
  • URL rewriting
  • Challenge/response

Design Patterns for Web Applications

• Design patterns capture higher-level structures than classes
• Originated from the Design Patterns book by Erich Gamma etc
• Patterns exist for all sorts of programming systems, and some for Web applications

Connections Patterns

Pattern 1: Single script

• Requires selection logic in server script

Pattern 2: One script per page

SSI Patterns

Typical page

• A typical page is often a table (or frame)
  
• The code is

        <table width="100%" height="100%">
  	<tr> <td colspan="2"> banner </td> </tr>
  	<tr height="90%">
  	     <td width="20%"> menu </td>
  	     <td width="80%"> contents </td> </tr>
        </table>     
        

Pattern 1: HTML in all

• No reuse of banner/menu
• Each page separate
• Change of style means changing all pages
• Poor pattern

Pattern 2: Server-Side Includes in all

• The code is

        <table width="100%" height="100%">
  	<tr> <td colspan="2"> <!--#include file="banner.html" --> </td> </tr>
  	<tr height="90%">
  	     <td width="20%"> <!--#include file="menu.html" --> </td>
  	     <td width="80%"> <!--#include file="contents.html" --> </td> </tr>
        </table>     
        

• Can reuse common files
• Includes can be nested
• Menu/banner can be changed by altering single file
• Good pattern for static content

Pattern 3: CGI scripts in some

• Dynamic content creation in contents section
• Note that SSI exec has access to CGI environment variables

Pattern 4: Nested scripts

• e.g. include date in banner
• exec has access to CGI environment variables

CGI Patterns

Pattern 1: Single object

print "<table>"
processing logic
print "<tr> <td> ..."
processing logic
print "<tr> <td> ..."
processing logic
print "<td> ..."
print "</table>"

• Mixes code and HTML
• Can only be maintained by programmers
• Poor design pattern

Pattern 2: Multiple objects

class Banner {
    print() {...}
}

class Menu {
    print() {...}
}

class Content() {
    print() {...}
}

banner = new Banner()
menu = new Menu()
content = new Content();

print "<table> <tr> <td>"
banner.print()
print "<tr> <td>"
menu.print()
print "<td>"
content.print()
print "</table>"

• Separates class definitions from HTML print statements
• Class definitions may be in separate files for reuse
  
• Still programming oriented rather than HTML oriented

Pattern 3: Template object

class Template {
    Template(banner, menu, content) {...}

    print() {
        print "<table> <tr> <td>"
        banner.print()
        print "<tr> <td>"
        menu.print()
        print "<td>"
        content.print()
        print "</table>"
    }
}

banner = new Banner()
menu = new Menu()
content = new Content()
template = new Template(banner, menu, content)

template.print()

• The style of all pages can now be changed simply by changing the implementation of Template.print()

Pattern 4: Parameterized objects

• An object can take as parameter a filename that is pure HTML
  
• Separates program and HTML almost completely

Server Page Pattern

• If the page consists of large amounts of HTML and small amounts of script, use a Server Page pattern
• Server Page frameworks:
  • Active Server Pages (VB)
  • Apache Active Server Pages
  • Java Server Pages (Java)
• Example:

  <%@ include file=header.inc %>
  
  <h1> Hobby </h1>
  <% String name = request.getParameter("name");
     session.setAttribute("name", name);
  %>
  
  <p>
  Hi <%= name =%>, please select a hobby
  

Model-View-Controller Pattern

• Controller: servlet
• View: server page
• Model: business objects
• Servlet handles input from server, gives processing to business objects
• Servlet sets results for server page
• Server page handles result display only

Database Patterns

• Pattern 1: Mmake ODBC/JDBC calls into a database from a CGI script/servlet
• Pattern 2: Interpose an XML stage between CGI script and database. An XSLT stylesheet can then be used to translate into various HTML document, WML or cHTML

Conclusion

• The downside of Web applications is
  • No support from HTTP for session management
  • Failure to conform to standards by browser vendors
• Writing a Web application is a tradeoff between good engineering and hack engineering
• Many Web sites are just hacks
• It is too easy to build Web sites that are unusable by their intended users
• Some design principles and tools can improve the quality of Web sites