Lecture Series

Lecture 1: Introduction to Web Application Development

This lecture will provide an overview of the course aims, intended learning outcomes and the design of the course. It will explain the rationale behind the course and along with a gist of the courses content. This will include an overview of a number of examples of real life web applications, where we shall high light the main problems and questions that we shall seek to address and answer through the lecture series.

Lecture available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L1-Introduction.pdf

Slash Rant Design Exercise available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L1-Slash-Rant.pdf

Outline

  • Overview of Course, and design of the course
  • Our expectations, and where to find resources for this course
  • The lecture guide for this course
  • Examples of Internet web applications
  • The main issues, concerns and problems in developing web applications

Intended Learning Outcomes

At the end of this lecture you should be able to:

  • Explain the structure of course and the course objectives/aims
  • List different examples of web applications
  • Explain the complexity of web applications
  • Identify the main topics and points of concern when developing web applications

Recommended Reading

  • Chapman and Chapman, Chapter 1 – Web Experiences

Exercise

  • Design Slash Rant

Lecture 2: Information Architecture (pt1)

This lecture will take a step back from web application development and first consider the impact of web application development from the point of view of Information Architecture i.e. how does this web application fit within the context of the web site / organization.

Lecture available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L2-Information-Architecture.pdf

Assessment Details available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L2-Requirements-Specifications.pdf

Outline

  • What is Information Architecture?
  • Why Information Architecture matters?
  • Information Architecture Deliverables * Personas * Wireframes * User Needs Matrix

Intended Learning Outcomes

At the end of this lecture you should be able to:

  • Describe and define Information Architecture, explain why it is important
  • Mockup Wireframes
  • Develop and use personas

Recommended Reading

  • Chapters 1-4 from Morville and Rosenfield
  • Chapman and Chapman, Chapter 10 – Web Page Design, Chapter 11 – Web Site Design

Recommended Viewing

Applications

  • Create User Personas for Slash Rant
  • Create User Needs Matrix
  • Draw up some Wireframes
  • Moqups, https://moqups.com/#

Lecture 3: System Architecture

This lecture will provide a high level overview of the architecture of distributed web applications. The lecture will describe how applications have been made in the past, develop your awareness of the different architectures that have and are still being used to develop applications, and observe that the process for building web applications is similar and involves a lot of redundancy (from specification and design to development and implementation). This last point will be picked up in Lecture 4, where frameworks are employed to ease the development burden. Also, the lecture will show the difference between old school software engineering and web application engineering

Lecture available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L3-System-Architecture.pdf

Outline

  • Web Developments

  • The n-tier architecture of a web application
    • Single tier
    • Two tier
    • 3-N tier

Intended Learning Outcomes

At the end of this lecture you should be able to:

  • Describe the architecture of a web application
  • Explain the advantages of the Tiers in the architecture
  • Illustrate the different system architectures
  • Provide reasons for separating the different types of concerns

Recommended Reading

Lecture 4: Web Application Frameworks

This lecture will describe the Web Application Frameworks. This Python based framework stops you wasting valuable time on CRUD. In this lecture, we will present and overview of the framework and the main components within the framework to provide the theory to accompany the practical work.

Lecture available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L4-Web_Application_Frameworks.pdf

Outline

  • What is a Web Application Framework * Definition * Characteristics * Model View Controller * Benefits and limitations

Intended Learning Outcomes

At the end of this lecture you should be able to: * Describe and discuss web application frameworks * List and describe alternative web application frameworks * Illustrate and explain the Model View Controller Design Pattern

Recommended Reading

Recommended Viewing

Lecture 5: Django Web Application Framework

This lecture will describe the Django Web Application Framework. This Python based framework stops you wasting valuable time on CRUD. In this lecture, we will present and overview of the framework and the main components within the framework along with some practical demonstrations.

Lecture available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L5-Django-WAF.pdf

Outline

  • The Django Framework * Model View Template Design Pattern * Django Architecture * Django Modules and Creation Steps * Sample Application

Intended Learning Outcomes

At the end of this lecture you should be able to: * Describe the architecture and main modules of Django * Setup a simple web application

Recommended Reading

Recommended Viewing

Lecture 6: Information Architecture (pt2)

Lecture available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L6-Information-Architecture.pdf

  • Top - Down Bottom Up
  • Sitemap, Usability Testing and A/B Testing

TODO(leifos): Drawing N-Tier architecture, ER-Diagrams, Sequence and Data flow diagrams.

Lecture 7: Django - Models, Views and Templates

TODO(leifos): Designing URL Schemes * Using inheritance in Templates

Lecture 8: Messaging and Protocols

This lecture will talk about the lifeblood of the Internet programming and Internet technology. This lecture will explain the main protocols that are employed that facilitate communication across the Internet, along with the main mark up language used to wrap communications.

Lecture available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L8-Messaging-Protocols.pdf

Outline

  • Seven Layers ISO model
  • HTTP
  • Request and response Messages
  • Get, Post, Head, etc methods
  • Stateless vs. Stateful protocols
  • XHTML * What is XHTML * Difference between HTML and XHTML
  • Other Markup Languages
  • Inter-Process Protocols * Remote Procedure Calls * REST * XML-RPC * SOAP

Intended Learning Outcomes

At the end of this lecture you should be able to:

  • List the main three layers of internet Seven layers ISO Model and describe their purpose
  • Describe and explain a number of protocols
  • Describe the main methods used in HTTP
  • Explain the request-response interaction
  • Compare and contrast state and stateless protocols
  • Recognize key elements, attributes and structures within XHTML
  • Differentiate between Inter-Process Protocols

Recommended Reading

  • Chapman and Chapman, Chapter 2 – Web Technology (p35-69)
  • Chapman and Chapman, Chapter 3 – Markup

Lecture 9: Client Side Environment

This lecture will introduce, define and discuss the client-side environment of web applications.

Lecture available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L9-Clientside-Environment.pdf

Outline

  • Client-side in terms of the N-Tier architecture
  • Differences from traditional desktop software
  • Components of a Web Browser
  • Document Object Model (DOM) * Event Model * Observer Pattern * Event Propagation
  • Impact of web browser on development
  • Future of the web browser

Intended Learning Outcomes

At the end of this lecture you should be able to:

  • Explain the client-side environment of web apps
  • Identify the major components of a web browser
  • Discuss how the components affect web application development
  • Assess the benefits and limitations of the web browser
  • Debate the future of the web browser/application

Recommended Reading

  • Chapman and Chapman, Chapter 7 – DOM Scripting

Recommended Viewing

Lecture 10: Presentations

Student Groups will present the specification of their web applications.

Lecture 11: Django - Authentication, Cookies, Sessions

During this lecture, I will give an overview of the Authentication, Cookies and Sessions tutorial in How to Rango with Django. We will also go through another design exercise in class.

Lecture 12: CSS: Cascading Style Sheets

This lecture will introduce, define and discuss the cascading style sheets (CSS) and their role within the development of web applications.

Lecture available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L12-Style-with-CSS.pdf

Outline

  • Syntax and Semantics of CSS
  • Advantages of CSS and the separation of concerns
  • Rules of CSS
  • Typography
  • Layout
  • The box model
  • Examples

Intended Learning Outcomes

At the end of this lecture you should be able to:

  • Explain the reasons for using CSS
  • Specify the style and appearance of text
  • Specify and control the layout of elements within in a page
  • Describe the CSS box model

Recommended Reading

Recommended Viewing

Lecture 13: Client Side Scripting - Javascript

This lecture explains how the browser can be manipulated programmatically with client-side scripting.

Lecture available from: https://dl.dropboxusercontent.com/u/382885/iTech-DIM3/2013/L13-Clientside-Scripting.pdf

Outline

  • Client-side Scripting
  • Manipulating the Document Object Model (DOM)
  • Overview of JavaScript

Intended Learning Outcomes

At the end of this lecture you should be able to:

  • List what can be achieved using DOM manipulation
  • Explain how the DOM can be manipulated
  • Compare JavaScript to other programming languages

Recommended Reading

Recommended Viewing

Lecture 14: Client Side Scripting - JQuery

This lecture continues on from the previous lecture on Client Side Scripting and introduces JQuery. JQuery is javascript library that makes life on the client side a lot easier. This lecture will also go over your assignments and discuss ways to provide constructive feedback on reports.

Lecture available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L14-JQuery.pdf

Outline

  • Improving JavaScript development using jQuery
  • Motivation for jQuery
  • Using jQuery: Patterns and Practices
  • Integrating jQuery into Django

Intended Learning Outcomes

At the end of this lecture you should be able to:

  • Describe the basic pattern of the JQuery Language
  • Assess the benefits and limitations of using jQuery
  • Provide constructive and professional feedback on specifications and designs

Recommended Viewing

TODO(leifos): Jquery in Rango in Django

Lecture 15: XML Introduction

This lecture will provide an overview of XML and XHTML introducing the main XML concepts.

Lecture available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L15-Introduction-to-XML.pdf

Outline

  • What is XML?
  • Overview of XML and its Structure
  • Overview of XHTML
  • Alternative: JSON

Intended Learning Outcomes

At the end of this lecture you should be able to:

  • Identify XML and describe its structure
  • Analyze an XML document and explain the elements, attributes and entities
  • Explain the differences between the different flavors of XHTML
  • Explain the differences between XHTML and HTML: and point out the advantages of XHTML
  • Discuss alternatives to XML and the advantages and disadvantages of XML and alternatives.

Recommended Reading

Lecture 16: AJAX

This lecture will introduce the set of technology collectively known as AJAX, discussing its impact on web application development and user experience.

Lecture available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L16-Understanding%20Ajax.pdf

Outline

  • The rise of web applications
  • History of Ajax
  • Asynchronous vs. Synchronous models of communication
  • Overview of Ajax using jQuery
  • Debate: Web Apps vs. Desktop Apps

Intended Learning Outcomes

At the end of this lecture you should be able to:

  • Explain the emergence of web applications
  • Identify what differentiates a web application from a web page and a traditional application
  • Describe the components of Ajax
  • Illustrate the differences between synchronous and asynchronous communication in the context of web apps
  • Debate the future of web application development

Recommended Reading

TODO(leifos): AJAX demo in Rango in Django

Lecture 17: XML DOM/SAX

This lecture will review the different models for parsing XML i.e. DOM and SAX. This lecture will also include examples where we parse web results from Yahoo! BOSS API. The examples processing search results will be in Python using DOM and SAX.

Lecture available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L17-XML-DOM-SAX.pdf

Outline

  • The Simple API for XML (SAX)
  • The Document Object Model (again)
  • How (or how not to) parse XML
  • DOM vs SAX

Intended Learning Outcomes

At the end of this lecture you should be able to:

  • Describe DOM and SAX
  • Compare and contrast DOM and SAX models
  • Process XML using DOM

Recommended Reading

TODO(leifos): DOM demo

Lecture 18: Accessibility

This lecture will discuss web accessibility issues from the point of view of the Web Accessibility Initiative.

Lecture available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L18-Accessibility-2012.pdf

Outline

  • Problems with accessing web content
  • Catering for different users
  • Common Mistakes
  • Web Accessibility Initiative
  • Assistive Technologies
  • How to make web sites more accessible

Intended Learning Outcomes

At the end of this lecture you should be able to:

  • Recognize and list the main problems users face when accessing content
  • Describe the main philosophy behind the WAI
  • List and describe the different types of assistive technology
  • List the main ways in which content/functions can or should be made to be accessible
  • List the common mistakes that should be avoided

Recommended Reading

Recommended Viewing

Lecture 19: Findability

This lecture will introduce and define Ambient Findability and how it is important in the development of web sites and web applications.

Lecture available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L19-Findability.pdf

Outline

  • what is ambient findability
  • Information Interaction
  • The User Experience honeycomb
  • Push and Pull

Intended Learning Outcomes

At the end of this lecture you should be able to:

  • Define and describe ambient findability
  • List the main factors that affect the users experience
  • Describe the user experience honeycomb
  • Evaluate a site taking into consideration the user
  • Argue the role of search in the web application development

Recommended Reading

  • Ambient Findability, Peter Morville, Chapter 1,3,5

Recommended Viewing

Lecture 20: Summary

This lecture will recap some the main points of the course, review the structure of the exam, followed by questions and answers.

Lecture available from: https://dl.dropbox.com/u/382885/iTech-DIM3/2013/L20-Sample-Exam.pdf

Outline

  • Summary
  • Exam structure
  • Questions and Answers