1. 44238: Dynamic Web-site Development Introduction to Module & xHTML Ian Perry Room: C48 Extension: 7287 E-mail: I.P.Perry@hull.ac.uk http://itsy.co.uk/ac/0708/Sem1&2/44238_DWSD/

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

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

4. 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-pages c)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.

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

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

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

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

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

10. 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 / 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.

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

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

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

14. 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 (W 3 C), 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.

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

16. Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 16 XML – Example Define the Tags Use your meta-language 1241 Big Fork Hardware Garden £16.95 13

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

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

19. Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 19 A Simple xHTML Document A Simple xHTML Document Heading 1 A Normal paragraph, with a line break and a Hyperlink

20. Ian Perry 44238: Dynamic Web-site Development: Intro. to Module & xHTML Slide 20 Find out more about xHTML  W3C: Extensible HyperText Markup Language http://www.w3.org/TR/xhtml1/  XHTML Web Design for Beginners http://www.miswebdesign.com/resources/articles/web- design-xhtml-1-1.html  XHTML Explained http://www.yourhtmlsource.com/accessibility/xhtmlexplain ed.html  NB. The above links are all on the Other Resources page of the DWSD Web-site.

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