1. Principle of Web site Engineering URL: http://ecce3.lsbu.ac.uk/staff/zhaoza/pwse Lecturer: Zhanfang ZHAO Contacts: Tel: 6340 Rome: T409 Email: Zhaoza@lsbu.ac.uk

2. Aims Understand the fundamental engineering aspects of Web site construction and maintenance. Acquire familiarity with latest Web technology in Hypertext Markup Language (HTML), Extensible Markup Language (XML), Cascading Style Sheets (CSS) and Extensible Style Language (XSL), scripting, etc. Learn to design an appropriately multimedia rich, accessible, scalable Web site. Distinguish the benefits and limitations of Web based publication. Appreciate the need to enhance visibility and accessibility in Web pages.

3. Syllabus Web site models, HTML, XML, CSS, XSL, CGI, Javascript, scalability, accessibility, internetwork, network performance, rapid deployment, operating environments, management, maintenance, scripting, presentation, client-side and server-side technologies, integrity, compatibility, site promotion.

4. Weekly teaching programs(1) Week 1: Introduction to Web development Brief history, Internet, WWW, Web site models, Web sites that work and those that do not work Week 2: Introduction to HTML Using HTML to design a simple Web site Week 3: Planning of a Web site Structure, contents, functions, intended viewers, domain name registration Week 4: Factors influencing Web browsing Web browsing model, Web session anatomy, client side, network, server side. Week 5: Site creation Site map, page layout, colour scheme, fonts Week 6: Visual impact Graphics, images animations

5. Weekly teaching programs(2) Week 7: Mini test –Cascading Style Sheets – What is CSS? –Controlling text properties with CSS, –background and border Week 8: Cascading Style Sheets( – Cont’d) – Dimensions and positions of elements, special design techniques of CSS Week 9: Incorporation of multimedia: MP3, Screaming audio, Flash Week 10: Server push and client push. Overview of server-side and client side scripting Week 11: Site promotion, Search engines, Web directories, site submission, meta tags, keywords Week 12: E-Commerce Business models, security, promotion and consumer tracking. Week 13-14: Revision Week 15: Exam

6. Assessment End of unit closed book exam (50%) One course work assignment (40%: includes logbook 10%, Web design and report 30%) Phase test in the week 7 (10%). Student must pass both the exam and course work assessment to pass the unit.

7. Introduction of PWSE Web Site - What is it? Collection of documents –http://www.rfc-editor.orghttp://www.rfc-editor.org Catalogue –http://www.sbu.ac.uk/desig nshowhttp://www.sbu.ac.uk/desig nshow Software –http://www.hotmail.comhttp://www.hotmail.com Application –http://www.google.comhttp://www.google.com HCI –Goals of HCI Safety Utility Effectiveness Efficiency Usability Appeal

8. Characteristics of Web sites Online Digital Hyper links Easy to update Capacity for programming Multimedia Interaction

9. Purposes of Website Marketing –http://www.Dell.co.uk http://www.Dell.co.uk Promotion –http://heapro.oupjournals.orghttp://heapro.oupjournals.org Public relation –http://bhpbilliton.comhttp://bhpbilliton.com Sales –http://CallnSave.bizhttp://CallnSave.biz Entertaining –http://www.cartoonnetwork.comhttp://www.cartoonnetwork.com Customer support –http://www.netgear.comhttp://www.netgear.com Community –http://groups.yahoo.comhttp://groups.yahoo.com Education –http://www.open.ac.ukhttp://www.open.ac.uk Self-expression –http://pages.yahoo.comhttp://pages.yahoo.com

10. Benefits of Usable Website Gaining a Competitive edge Reduced development and maintenance costs Improved productivity Lower support costs

11. Work environment Server – client, browser, plug-ins

12. History 1st Generation Web sites Mosaic HTML (Hypertext Markup Language) HTTP (Hypertext Transport Protocol) CGI (Common Gateway Interface) GIF graphics Server side HTTP Server – CGI programs – (Database) Client side HTML forms, GIF images, Helper applications (multimedia) Prominent role of Webmaster

13. First Generation Web HTTP server Database Older information systems Server side CGI programs Client Side GIF images HTML Forms Helper Applications Audio Video Multimedia

14. 2nd Generation Web sites Netscape 1994 Increased HTML controls (tables, centring, text flow, alignment, background) Improved presentation Enhanced commercial appeal Graphic design more important Higher visual impact Webmaster More demanding Management Server side HTTP Server or Server API Programs – CGI – Database, Media Server Client Side GIF, JPEG images, HTML, Netscape Extensions, Forms, Helper applications (multimedia) Cookies (security issue)

15. 2 nd Generation Web site HTTP server Database Media Server Server side CGI programs Client Side GIF & JPEG images HTML + Netscape Extensions Forms Helper Applications Audio Video Multimedia Cookies

16. 3rd Generation Web sites Netscape 4+ & IE Viewers more demanding Java, Java Script, more HTML controls Server side HTTP Server or Server API Programs – CGI – Database, Media Server Client side GIF and JPEG, plug-ins, Active X controls, Java scripts/VBScripts Cookies Range of complexity –Static > static with forms > Database access > Web based application –Static > Static with forms > Database access > Dynamic

17. 3rd Generation Web site HTTP server Server API programs DatabaseMedia Server Server side CGI programs Client Side GIF & JPEG images HTML + Netscape Extensions Forms JavaScript/VBScript Cookies Java Applets Active X Controls Plug-ins

18. Approaches Graphic design Print design Software engineering,

19. Signs of good site Fit for purpose Readable Maintainable Portable and scalable Reusable Robust & reliable Appropriately presented

20. Web design User-centred development methodology –Key features: User-centred development is user centric, not data centric. User-centred development is highly interdisciplinary and draws on knowledge from a multitude of areas, including art, psychology, technical writing, and computer science, among others. The methodology is highly iterative and involves as much testing and revision as possible. –Approaches: Needs analysis User and task analysis Functional analysis Requirements analysis Setting usability specifications Prototyping Evaluation Document-centred development Software-centred development