ICCT Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~SLIDESHOW~~
====== Introducing the Module ======

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

**Lecturer**: [[C.P.Jobling@Swansea.ac.uk|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.

===== Introducing the Module =====

==== EG-259: Web Applications Technology ====

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

===== Learning Outcomes for this Session =====

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



===== Recommended Text Books =====

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, [[http://diveintohtml5.info/|diveintohtml5.info/]] published as Mark Pilgrm, //HTML5: Up & Running//,  Google Press [O'Reilly Inc], 2010. //ISBN//: 0596806027 ([[http://www.amazon.co.uk/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027?ie=UTF8&tag=diveintomark-20&creativeASIN=0596806027|Amazon]] also available for [[http://www.amazon.co.uk/HTML5-Up-Running-ebook/dp/B0043D2E0E/ref=kinw_dp_ke?ie=UTF8&m=A3TVV12T0I6NSM|Kindle]])
  * Marijn Haverbeke, //Eloquent JavaScript: A Modern Introduction to Programming//, No Starch Press, 2011, //ISBN// 1-59327-282-0. ([[http://www.amazon.co.uk/Eloquent-JavaScript-Modern-Introduction-Programming/dp/1593272820/ref=sr_1_1?s=books&ie=UTF8&qid=1326971031&sr=1-1|Amazon]] also available for [[http://www.amazon.co.uk/Eloquent-JavaScript-Introduction-Programming-ebook/dp/B004OEJNQ0/ref=kinw_dp_ke?ie=UTF8&m=A3TVV12T0I6NSM|Kindle]]) Free ebook online in PDF and HTML at [[http://eloquentjavascript.net/|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 [[http://www.sitepoint.com/books/phpmysql4|SitePoint.com]] where you can also order the book in print form and as a PDF. The whole book is also available from [[http://www.amazon.co.uk/Build-Database-Driven-Using-MySQL/dp/0980576814/ref=sr_1_cc_1?s=aps&ie=UTF8&qid=1326972126&sr=1-1-catcorr|Amazon]] and as a [[http://www.amazon.co.uk/Build-Database-Driven-Using-ebook/dp/B0047T7FTY/ref=kinw_dp_ke?ie=UTF8&m=A3TVV12T0I6NSM|Kindle Edition]].

===== Optional but Highly Recommended =====

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.

===== Books for Self-Directed Learners ======

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 [[http://www.amazon.co.uk/s/ref=nb_sb_noss_1?url=search-alias%3Daps&field-keywords=head+first&x=0&y=0|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((A the time of writing, this book, Head First HTML and the Head First PHP were available as a package from Amazon at a special price of £52.93)), //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.

===== Worth a Look =====

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


===== Further Reading =====

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

===== Other Learning Resources =====


===== Module Notes and Support =====

  * [[https://blackboard.swan.ac.uk/webapps/portal/frameset.jsp?tab=courses&url=/bin/common/course.pl?course_id=_5910_1|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 [[http://twitter.com/eg259wat|@eg259wat]] and [[http://twitter.com/#!/search/%23eg259wat|#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.












===== Lecture Content =====

  * [[eg-259:lecture0#what_you_should_already_know|What you should already know]]
  * [[eg-259:lecture0#module_aims|Module aims]], [[eg-259:lecture0#intended_module_learning_outcomes|Learning Outcomes]] and [[eg-259:lecture0#transferable_skills|Transferable Skills]]
  * [[eg-259:lecture0#module_contents|Module Contents]] 
  * [[eg-259:lecture0#module_delivery|Module Delivery and Assessment]]

===== What You Should Already Know =====

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

  * What the Internet is
  * Application Protocols
  * Web Content

===== What is the Internet? =====

{{ eg-259:fig1.png?500 |Structure of the Internet. Figure (c) Kurose and Ross}}

----

  * 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//".

===== Network Edge/Network Core =====

  * //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	

===== The Network Edge =====

{{ eg-259:fig2.png?500 |End-systems communicating with each other. Figure (c) Kurose and Ross.}}

----

  * //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 Network Core =====

{{ eg-259:fig3.png?500 |The Network core: A mesh of interconnected routers. Figure (c) Kurose and Ross}}

----
 
  * **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

===== Delay and Loss =====

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

===== Protocol Layers and their Service Models =====

  * 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


===== Internet protocol stack =====

{{ eg-259:fig4.png?200 | The Internet protocol stack. Figure (c) Kurose and Ross}}

----

  * //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"


===== Application Protocols =====

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


===== Application Protocols (continued) =====

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


===== Web Content =====
 
  * //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




===== Module Aims =====

  * **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


===== Intended Module Learning Outcomes =====

//After completing this module you should be able to//:
  - Describe the architectures used in web applications; 
  - Describe in detail the life-cycle of a web request that is satisfied by a web application; 
  - Give examples of best practice for the development of client- and server-side programming. 
  - Compare and contrast the options available for the deployment of web applications.



===== Transferable Skills =====

//After completing this module you should have//:
  - Installed and configured the Apache web server
  - Installed and configured several common web applications
  - 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.




===== Module Contents =====

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






===== Part 1: The Basics of Web Applications Technology =====

//Largely revision of material covered in EG-146 and EG-153.//
  * [[eg-259:lecture1|Fundamentals of Web Applications Technology]]
  * [[eg-259:lecture2|HTML5 and CSS3]]
  * [[eg-259:lecture3|User Interfaces and Forms]]
  * [[eg-259:lecture4|Web Applications]]

===== Part 2: Client-Side Programming in JavaScript =====

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



===== Part 3: Server-Side Programming =====

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

===== Part 4: Database Access and Web Applications =====

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







===== Module Delivery =====

  * 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
===== Timetabled Contact Hours =====

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

===== Homework =====

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


===== Course Work =====

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

===== Peer Learning =====

> By learning you will teach;
> by teaching you will understand.
--- Latin Proverb

  * You will use the [[http://peerwise.cs.auckland.ac.nz/|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.
===== Related Modules =====

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//.
===== Assessment by Exam =====

  * Blackboard "quiz": approximately 50 questions.
  * Each question worth 1--5 marks.
  * Results Scaled to 75.
  * 75% for exam + 25% for exercises = 100%.

===== Summary of the Session =====

  * [[eg-259:lecture0#what_you_should_already_know|What you should already know]]
  * [[eg-259:lecture0#module_aims|Module aims]], [[eg-259:lecture0#intended_module_learning_outcomes|Learning Outcomes]] and [[eg-259:lecture0#transferable_skills|Transferable Skills]]
  * [[eg-259:lecture0#module_contents|Module Contents]] 
  * [[eg-259:lecture0#module_delivery|Module Delivery and Assessment]]

===== Learning Outcomes =====

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


===== Homework =====

  * 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 [[http://www.swan.ac.uk/lis/blackboard/support/student/index.html|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 [[eg-259:practicals:0|guide to establishing your web development toolkit]] and follow the instructions given.
  * Obtain and **read** the notes for the next [[eg-259:lecture1|session]]!
 










===== What's Next? =====

**Part 1: The Foundations of Web Applications Technology**

  * [[eg-259:lecture1#origins_of_the_internet|Revision of the History of the Internet, Application Protocols and the World Wide Web]]
  * [[eg-259:lecture1#applications_and_application-layer_protocols|Applications and Application-Layer Protocols]]
  * [[eg-259:lecture1#the_world_wide_web|The World-Wide Web]]
  * [[eg-259:lecture1#web_browsers|Web Browsers]] and [[eg-259:lecture1#web_servers|Web Servers]]
  * [[eg-259:lecture1#uniform_resource_identifier_uri|Uniform Resource Identifiers (URIs)]]
  * [[eg-259:lecture1#multipurpose_internet_mail_extensions_mime|Multipurpose Internet Mail Extensions (MIME)]]
  * [[eg-259:lecture1#the_hyper_text_transfer_protocol|The Hyper Text Transfer Protocol]]
  * [[eg-259:lecture1#web_programming|Web Programming]]

[[eg-259:home|Home]] | [[eg-259:practicals:0|Set up your web development toolkit]] | [[eg-259:lecture1|Next Session]]