44238: dynamic web-site development introduction to module & xhtml ian perry room: c48...

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.


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.


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.


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


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.


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).


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).


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).


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.


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)


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


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


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.


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.


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>


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.


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.


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>


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.


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).

44238: dynamic web-site development introduction to module & xhtml ian perry room: c48...

Documents