Introducing the Module

Contact Hour 1: To be reviewed on Tuesday 29th January, 2013.

Lecturer: Dr Chris P. Jobling.

An introduction to the module EG-259 Web Applications Technology, its aims, content etc, and how it fits into the ICCT programme.

• This module examines the client- and server-side technologies available to developers of applications for the world-wide web with the objective of developing an appreciation of the complex issues involved.

1. What resources will I need to use to pass this module?
2. Which modules are pre-requesites for this module?
3. Which modules are related to this module?
4. What are the main topics to be covered in this module?
5. What are the learning outcomes for this module?
6. What transferable skills will I have at the end of this module?
7. How will I be assessed?

The books that I have chosen to recommend are all available on the Internet as free eBooks but they can be purchased in book form, for those who prefer paper, and some are available in Kindle editions.

• Mark Pilgrim, Dive into HTML5, diveintohtml5.info/ published as Mark Pilgrm, HTML5: Up & Running, Google Press [O'Reilly Inc], 2010. ISBN: 0596806027 (Amazon also available for Kindle)
• Marijn Haverbeke, Eloquent JavaScript: A Modern Introduction to Programming, No Starch Press, 2011, ISBN 1-59327-282-0. (Amazon also available for Kindle) Free ebook online in PDF and HTML at eloquentjavascript.net/)
• Kevin Yank, Build Your Own Database Driven Web Site Using PHP & MySQL, 4th Ed., SitePoint, 2009, ISBN 0980576814. The first 168 pages are free in exchange for your email from SitePoint.com where you can also order the book in print form and as a PDF. The whole book is also available from Amazon and as a Kindle Edition.

The first of these texts was a main text for EG-146 last year. The other, discovered after that module, is a very well presented introduction to Website design.

• Robert W. Sebasta, Programming the World-Wide Web, 7th Edition, Pearson, 2013. ISBN: 0-13-266581-6. The third edition, published in 2006, was a former main text, still a source for many of the slides.
• Elizabeth Castro and Bruce Hyslop, HTML5 and CSS3, 7th Edition, Visual Quickstart Guides, Peachpit Press, 2012. ISBN: 0-371-71961-1.
• Jon Ducket, HTML&CSS: design and build websites, Jon Wiley, Indianapolis, USA, 2011. ISBN: 978-1-118-00818-8.

If you are a self-directed learner, the Head First series of books is ideal as a “Teach Yourself Resource”. Although they are a bit expensive (around £20 each on Amazon.co.uk), they are excellent and I use them myself.

The following from the series are directly relevant to this course:

• Elisabeth Robson and Eric Freeman, Head First HTML with CSS and XHTML, O'Reily Media Inc., 2005. ISBN 0-596-10197-X. Excellent text if you need to revise HTML and CSS.
• Michael Morrison¹⁾, Head First JavaScript, O'Reilly Media Inc., 2007. ISBN 0596527748.
• Elisabeth Robson and Eric Freeman, Head First HTML5 Programming, O'Reilly Media Inc., 2011. ISBN 978-1-449-39054-9. Modern update to Head First HTML that covers the new JavaScript APIs introduced in the HTML5 family of standards.
• Lynn Beighly, Head First PHP & MySQL, O'Reilly Media Inc., 2008. ISBN 0596006306.

• Nigel Chapman and Jenny Chapman, Web Design: A Complete Introduction, Wiley, 2007. ISBN: 0-470-01775-9. Nice comprehensive text and source of many alternative examples and problems.
• Chris Bates, Web Programming: Building Internet Applications, 3rd Edition, John Wiley & Sons Ltd., 2006. ISBN: 0-470-01775-9. Was the main text a couple of years ago, but a bit out of date now.
• J.F. Kurose and Keith W. Ross, Computer Networking: A Top Down Approach Featuring the Internet, 3rd Edition, Addison Wesley, 2005. ISBN: 0-321-26976-4. Provides useful background.
• J. Niederst Robbins, Web Design in a Nutshell, 3rd Edition, O'Reilly, 2006. ISBN: 0-596-00484-2. Excellent reference.
• S. Spainhour and R. Eckstein, Webmaster in a Nutshell, 3rd Edition, O'Reilly, 2003. Another excellent, although perhaps slightly dated, reference.

• Leonard Richardson and Samy Ruby, RESTful web services, O’Reilly Media, Inc. 2007. ISBN: 0-596-52926-0.
• Jeffry Zeldman, Designing with Web Standards, 2nd Edition, New Riders, 2007. ISBN: 0-321-38555-1. Very worthwhile reading if you are interested in web standards and there use to create backwards and forwards compatible web sites and web applications.
• B. Laurie and P. Laurie, Apache: The Definitive Guide, 3rd Edition, O'Reilly, 2003.
• Doug Sheppard, Beginner's Intro to Perl, (Part 1 of 6 parts), O'Reilly Perl.com, October 16, 2000. URL: http://www.perl.com/pub/a/2000/10/begperl1.html.

Other books and articles will be posted on the Blackboard site as they are referenced in the lectures.

• Blackboard site: available to all enrolled students
• Resources available:
  • Copies of these notes and other handouts
  • Quick reference guides to XHTML/CSS and other things
  • Review and homework problems
  • Details of the continuous assessment exercises
  • Model exam papers
  • Book lists and suggested further reading
  • Links to useful resources on the Internet
• Blackboard module site has a blog (Tools> Blog) which can be used for two-way feedback. Also twitter @eg259wat and #eg259wat
• Selected parts of the contact sessions will be recorded and made available as a podcast.

Follow links to EG-259: Web Applications Technology from the My Courses list.

• What you should already know
• Module aims, Learning Outcomes and Transferable Skills
• Module Contents
• Module Delivery and Assessment

In the pre-requisite module EG-146: Communications for the Internet you learned about:

• What the Internet is
• Application Protocols
• Web Content

• A nuts and bolts description is concerned with the end-systems (workstations, mobiles and servers) which are located at the periphary (or edge) of the network; the routers (or packet switches) that form the core of the network; and the links of various wired and wirless media that interconnect all of the components.
• A service description is concerned with the ideas of architectures (client-server, peer-to-peer and hybrid), distributed applications, and the various services provided by the protocol stack which includes data transport, network addressing and routing and the various link protocols.
• What is a protocol? A protocol is a set of rules and message formats that define a conversation between any two components on a network. Protocols are to be found at all levels of the so-called “protocol stack”.

• The Network Edge
  • End systems, clients and servers
  • Connectionless and connection-oriented services
• The Network Core
  • Circuit Switching, Packet Switching, and Message Switching
  • Routing in data networks

• end systems (hosts) run application programs (e.g. Web, email) at “edge of network”.
• client/server model: client host makes requests and receives service from always-on server (e.g. Web browser/server; email client/server).
• peer-peer model has minimal (or no) use of dedicated servers (e.g. Gnutella, KaZaA, BitTorrent).

• The fundamental question is how is data transferred through net? There are two main methods:
  • circuit switching: dedicated circuit per call as in the telephone network.
  • packet-switching: data sent through network in discrete “chunks”.
• Network access
• Physical Media
• Internet structure and ISPs

• Types of Delay
  • Processing delay
  • Queuing delay
  • Transmission delay
  • Propagation delay
• Comparing Transmission and Propagation Delay
• Queuing delay
• Packet loss
• End-to-end delay

• Layered Architecture
• Protocol layering
• Layer functions
• The Internet Protocol Stack
  • Application layer
  • Transport layer
  • Network layer
  • Link layer
  • Physical layers
• A brief history of Computer Networking and the Internet

• application: supporting network applications
  • FTP, SMTP, HTTP
• transport: host process to host process (port-port) data transfer
  • TCP, UDP
• network: routing of datagrams from source host to destination host
  • IP, routing protocols
• link: data transfer between neighboring network elements
  • PPP, Ethernet, WiFi
• physical: bits “on the wire”

• Principles of application layer protocols
  • clients and servers
  • application requirements
• Web and HTTP
• FTP
• Electronic Mail
  • SMTP, POP3, IMAP
• DNS

• P2P file sharing
• Socket programming with TCP
• Socket programming with UDP
• Building a Web server

• All client-side issues
  • Mark-up languages: HTML, CSS, XML; browsers and standards.
  • An introduction to server-side and client-side scripting.
  • The basics of multimedia.
• We will revisit the emphasized topics in this module

• Web Application Technologies
  • The client- and server-side technologies available to developers of applications for the world-wide web
• Programming Tools
  • Experience of the range of programming languages in the web developer's toolbox
• Case Studies
  • The Apache webserver
  • Web applications: wikis, blogs and contents managements systems.
  • Mobile Web Apps
• Main Objective
  • To develop an appreciation of the complex issues involved in web application development

After completing this module you should be able to:

1. Describe the architectures used in web applications;
2. Describe in detail the life-cycle of a web request that is satisfied by a web application;
3. Give examples of best practice for the development of client- and server-side programming.
4. Compare and contrast the options available for the deployment of web applications.

After completing this module you should have:

1. Installed and configured the Apache web server
2. Installed and configured several common web applications
3. Developed a web application that makes use of XHTML/CSS and JavaScript on the client-side and CGI/PHP and MySQL on the server-side.

• What is a web application?
• Web application architectures: client-server, web browsers, web servers, middleware and databases.
• Representational State Transfer (REST): HTTP methods, URIs, representations.
• Client-side technologies: revision of HTML, CSS, multimedia and plug-ins; client-side programming: JavaScript, AJAX, HTML5 APIs.
• Server technologies: the LAMP platform: Linux, Apache Webserver PHP and MySQL database.
• Server programming: Perl CGI and PHP.
• Web application frameworks: Ruby on Rails, model-view-controller pattern.
• Case studies: an HTML5/CSS3 page, a wiki engine, a blogging platform, a contents management system.

Largely revision of material covered in EG-146 and EG-153.

• Fundamentals of Web Applications Technology
• HTML5 and CSS3
• User Interfaces and Forms
• Web Applications

• Programming in JavaScript
• Regular Expressions
• JavaScript and the DOM
• Dynamic documents with JavaScript
• The HTML5 JavaScript APIs
• The jQuery JavaScript Library
• Mobile Web Apps

• Basic Web Server Operation
• Interactive Services
• The Basics of Perl
• Using Perl for CGI Programming
• Introduction to PHP

• Database access through the web
• Web Database Access with MySQL, Perl and PHP
• Web Application Frameworks
• Case Studies

• 30 Hours of timetabled contact of which
  • 20 hours will be discussion sessions related to the notes and readings provided
  • 10 hours will be for examples and hands-on exercises
• Continuous Assessment: 25 hours
• Directed private study including preparation for final examination: approx 43 hours
• Examination: 2 hours
• Supporting labs
  • Practical Internet Technology II
  • GDE

• Tuesdays 9.00 am in Vivian 129
• Tuesdays 9.00 am in Kheir Hardy 231
• Fridays 12.00 pm in Kheir Hardy 301

• Many of the homework problems take form of programming exercises.
• These are designed to get you to learn by doing.
• Not optional but not assessed.
• Will mostly be reviewed in examples classes.

• Designed to ensure that you will do some programming!
• Two programming exercises which will be assessed.
• One will be client-side (XHTML/CSS/JavaScript).
• One will be server-side (PHP)
• Worth 20% of marks for module.

By learning you will teach;
by teaching you will understand.

— Latin Proverb

• You will use the PeerWise system to create Multiple Choice Questions for your peers to help them learn the concepts covered in this course. By doing this, trying on your Peer's questions, and by providing feedback on those questions you will enhance your own learning.
• 5% of the module assessment will be allocated for your engagement with this exercise. More details to follow.

Material covered in this module will be expanded in:

• CS-219: Database Systems
  • setting up and using the MySQL database
  • designing a database
• EG-253: Practical Internet Technology
  • using Linux
  • setting up and maintaining a web server
• EG-252: Group Design Exercise
  • design and implement up a web server for group collaboration
• You will find out more about networking in Teaching Block 2.

• Blackboard “quiz”: approximately 50 questions.
• Each question worth 1–5 marks.
• Results Scaled to 75.
• 75% for exam + 25% for exercises = 100%.

• What you should already know
• Module aims, Learning Outcomes and Transferable Skills
• Module Contents
• Module Delivery and Assessment

1. What resources will I need to use to pass this module?
2. Which modules are pre-requesites for this module?
3. Which modules are related to this module?
4. What are the main topics to be covered in this module?
5. What are the learning outcomes for this module?
6. What transferable skills will I have at the end of this module?
7. How will I be assessed?

• Login to Blackboard and explore the EG-259 site
  • New users: access to Blackboard is through a web browser (it's a web application!). Your login is your UWS student number. Password is your Open Access password.
  • See the Blackboard Student Home Page if you are new to Blackboard and need login and basic usage instructions
  • Email me C.P.Jobling@Swansea.ac.uk immediately if EG-259 does not appear in your course list
• As soon as possible: read the text of the guide to establishing your web development toolkit and follow the instructions given.
• Obtain and read the notes for the next session!

Part 1: The Foundations of Web Applications Technology

• Revision of the History of the Internet, Application Protocols and the World Wide Web
• Applications and Application-Layer Protocols
• The World-Wide Web
• Web Browsers and Web Servers
• Uniform Resource Identifiers (URIs)
• Multipurpose Internet Mail Extensions (MIME)
• The Hyper Text Transfer Protocol
• Web Programming

Home | Set up your web development toolkit | Next Session