44238: Dynamic Web-site Development
Introduction to Module & xHTML
Ian Perry Room: C48
Extension: 7287
E-mail: [email protected]
http://itsy.co.uk/ac/0708/Sem1&2/44238_DWSD/
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 2
Significance of DWSD Module
Maintaining Web-sites, especially when they are composed of many Web-pages with ever changing (i.e. dynamic) content, can be both a difficult and time consuming task.
To make this process as easy as possible; you must stop thinking about the development of
individual Web-pages, that are then bolted together to form a Web-site,
and; begin to design Web-sites that are composed of a
number of re-usable, easily changeable, Web-page elements that have the potential to be combined in a variety of ways.
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 3
Module Aims
To build upon the Internet/Web understanding & skills introduced by the Year 2 Module: Web-site Development.
To enable students to implement Web-sites that are: easy to build. easy to maintain.
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 4
Learning Outcomes
By the end of the module you will be able to:a) maintain files on a Remote Web Server.b) employ Cascading Style Sheets (CSS); with which to
apply a common look-and-feel to Web-pagesc) use Server Side Includes (SSI); in order to deliver
common Web-page elements.d) build Web-based Forms; that can be used to capture
user input. e) write Client-side Programs (i.e. JavaScript); with which to
check for mandatory Form content. f) write Server-side Programs (i.e. VBScript); with which to
retrieve Web-page Content from a Remote Database.
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 5
Two Assignments(based on the same Case Study)
Assignment 1 (30%) – Common Look-and-Feel develop a Web-site that runs from a remote Web-
server and demonstrates the use of CSS, & SSI. Learning Outcomes a, b & c.
Deadline = 13 December 2007
Assignment 2 (70%) – Fully Dynamic Web-site enhance the Web-site from Assignment 1; with
Forms to capture specific user input, and Web-page content delivered from a Remote Database.
Learning Outcomes d, e & f. Deadline = 01 May 2008
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 6
The ‘PQR Travel’ Case Study
PQR Travel was originally set-up by two students (Nick and Becca) in their last year at University;
and has grown dramatically over the past 5 years. PQR Travel caters for the ‘youth market’;
and concentrates on putting together ‘packages’ of ‘travel components’ for those who do not want a conventional packaged holiday.
PQR Travel’s main aim is; to provide holidays of real interest for the adventurous
traveller who has ideas bigger than their budget. PQR Travel can ‘package’ holidays for;
large groups, small parties, or individuals.
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 7
The ‘PQR Travel’ Web-site
Earlier this year PQR Travel had a Web-site developed by a Consultant, i.e.; http://itsy.co.uk/ac/PQRTravel/
Nick & Becca were: initially, quite pleased with the design of this
Web-site (although it is somewhat inconsistent in look-and-feel),
but are now worried that maintaining the Web-site will soon become far too costly (in both time and money).
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 8
PQR: Problems & Solutions?
Although PQR Travel is quite pleased with the overall look-and-feel, and means of navigating the Web-site, they are not so happy about the wide variation in fonts, sizes and colours of the text on different Web-pages.
Any re-working of the PQR Travel Web-site must ensure that font type, text size and colour are handled much more consistently, and that these are all easy to change, as PQR are sure to change their minds again.
PQR Travel really like the four different ways of searching for a holiday; however, this approach means that every new holiday added has to have to have its basic details repeated on FOUR different lists, which takes a lot of time (and is very prone to error).
Ideally the basic details of each holiday need to be stored in a database, these details can then be retrieved into the correct position in the tables displayed on each Web-page (depending upon the view chosen by the user).
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 9
PQR: Problems & Solutions?
PQR Travel do NOT like the fact that the menu system at the top of each page is NOT at all consistent; with some pages displaying FOUR links, whilst others display only THREE.
The navigation menus MUST be consistent across ALL pages of the Web-site.
PQR Travel like the idea of using forms to capture customer requests, however, the current Web-site does not contain any forms (only two empty pages where forms should appear).
These missing forms (and related ‘success’ pages) need to be implemented, with some sort of check of compulsory fields, before the user is presented with a ‘success’ page (in order to confirm their request).
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 10
What you have to do?
What Nick & Becca require is that you re-work the implementation of the PQR Travel Web-site so that:
it delivers the same (or at least very similar) functionality, and yet is much easier to maintain (ideally by the staff of
PQR, rather than by employing a Consultant).
Make sure that you look carefully at the current PQR Travel Web-site, i.e.:
http://itsy.co.uk/ac/PQRTravel/
And remember that, the idea isn’t to re-design this Web-site, but rather to make it easier to maintain.
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 11
Lectures & Workshops(for Semester 1)
2. Working at the HTML Coal Face (Wks)3. Introduction to Module & xHTML (Lec)4. Working with a Remote Web-server (Wks)5. Common Look-and-Feel (Lec) 6. Cascading Style Sheets (Wks) 7. Common Web-page Elements (Lec) 8. Server Side Includes (Wks) 9. Review & Assignment 1 Requirements (Lec) 10. Assignment 1 Support (Wks)11. -- No Lecture --12. Assignment 1 Deadline (Thursday, 13 Dec,
2007)
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 12
Mark-up Languages for the Web
SGML Standard Generalised Mark-up Language
HTML HyperText Mark-up Language
XML eXtensible Mark-up Language
xHTML eXtensible HyperText Mark-up Language
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 13
SGML
Standard Generalised Mark-up Language All web Mark-up languages are based on
SGML. SGML is what is known as a meta-
language, i.e.: a language that is used to define/create
other languages. SGML was used to define/create:
HTML & XML
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 14
HTML
HyperText Mark-up Language A fixed set of mark-up tags, e.g. can only use
heading styles h1 to h6, with which to build your Web-pages.
HTML 1.0 to 4.01 HTML evolved, under the guidance of the World
Wide Web Consortium (W3C), from HTML 1.0 back in the early 90s to the “current” (i.e. December 1999) Recommendation for HTML 4.01.
Problems? The constant need for changes/revisions to the
HTML ‘standard’ has always frustrated both software vendors and Web-site developers.
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 15
XML
eXtensible Mark-up Language A sub-set of SGML - a meta-language in its own
right.
Tags are NOT fixed: With XML you create your own tags &
attributes to suit the type of document you are writing.
Can create your own meta-language: Using you own, user defined set of tags &
attributes it is possible to create your own, new, unique, Mark-up language.
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 16
XML – Example
Define the Tags
<product><code></code><name></name><type>
<main></main>
<sub></sub></type><price></price><qty></qty>
</product>
Use your meta-language
<product><code>1241</code><name>Big Fork</name><type>
<main>Hardware</main> <sub>Garden</sub></type><price>£16.95</price><qty>13</qty>
</product>
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 17
XML – Problems!
XML’s flexibility is one of it’s biggest drawbacks. With so many different ‘personal’ meta-languages
how would we ever manage to exchange any data? Some groups have attempted to define ‘common’
XML-based meta-languages they can all work with. However, the biggest problem with XML is:
that a lot of time (and money) has been spent on developing HTML-based Web-sites,
and nobody wants to waste all of this effort, by starting all over again (because that is what it would mean) with XML.
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 18
xHTML
Extensible HyperText Mark-up Language xHTML is a subset or application of XML.
xHTML combines: the advantages of using a fixed set of HTML
4.01 tags & attributes, so that: xHTML-based and HTML-based Web-pages can co-
exist within the same Web-site. with the flexibility of XML, with which this
fixed set of tags can be extended, so that: Web-site Developers can include pretty much
anything they want to within their Web-pages.
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 19
A Simple xHTML Document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:Lang="en" Lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>A Simple xHTML Document</title> </head> <body> <h1>Heading 1</h1> <p>A Normal paragraph, with a line break<br></br> and a <a href=“http://itsy.co.uk/”>Hyperlink</a></p> </body></html>
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 20
Find out more about xHTML
W3C: Extensible HyperText Markup Languagehttp://www.w3.org/TR/xhtml1/
XHTML Web Design for Beginnershttp://www.miswebdesign.com/resources/articles/web-design-xhtml-1-1.html
XHTML Explainedhttp://www.yourhtmlsource.com/accessibility/xhtmlexplained.html
NB. The above links are all on the Other Resources page of
the DWSD Web-site.
Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 21
Next Week’s Workshop[ Friday, 2:15pm, in IT2 ]
Working with a Remote Web-server The majority of the techniques you will
be applying during the DWSD Module will only work on a remote Web-server.
Remote Web-space? I have set-up 5Mb of remote Web-space
for each of you. You will be able to access this remote
Web-space using Internet Explorer (or My Computer, or Windows Explorer).