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 **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 .. TODO(leifos): Slash Rant Hand outs 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** * What is an Information Architect (2mins), http://www.youtube.com/watch?v=nv59MOxrOGA * A short presentation by students on Information Architecture (10mins), http://www.youtube.com/watch?v=ARFw-Thv1Xk **Applications** * Moqups, https://moqups.com/# .. TODO(leifos): Slash Rant Hand outs * 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** * Chapman and Chapman, Chapter 8 – Web Applications * 3 Tier Architecture http://dotnetslackers.com/articles/net/IntroductionTo3TierArchitecture.aspx * N-Tier Architecture http://www.sun.com/software/whitepapers/wp-ntier/wp-ntier.pdf 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** * Chapman and Chapman, Chapter 1 – Web Experiences * Model View Controller, http://en.wikipedia.org/wiki/Model-view-controller * Understanding MVC, Jeff Atwood, http://www.codinghorror.com/blog/2008/05/understanding-model-view-controller.html * Design Patterns by GoF, http://en.wikipedia.org/wiki/Design_Patterns_(book) * Design Patterns, http://sourcemaking.com/design_patterns * Writing Software Patterns by Martin Fowler, http://martinfowler.com/articles/writingPatterns.html * MVC, http://www.moock.org/lectures/mvc/ **Recommended Viewing** * Ruby vs. Django. (3mins) http://www.youtube.com/watch?v=PLUS00QrYWw * Pro’s and Con’s of MVC, (2mins), http://vimeo.com/7404134 * MVC Song (6mins) http://www.youtube.com/watch?v=YYvOGPMLVDo * MVC Public Service Announcement No.1, (2 mins), http://www.youtube.com/watch?v=91C7ax0UAAc 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** * For more information (Documentation, Download and News) http://www.djangoproject.com/ * A Good book to learn Django, http://www.djangobook.com/ * Design Patterns in Python, Rahul Verma and Chetan Giridhar, http://www.testingperspective.com/wiki/doku.php/collaboration/chetan/designpatternsinpython/mvc * Top 10 tips to a new django developer by Rama Vadakattu, http://www.ramavadakattu.com/top-10-tips-to-a-new-django-developer * Ten Insanely Useful Tips, http://net.tutsplus.com/tutorials/python-tutorials/10-insanely-useful-django-tips/ * Django Cheat Sheet, http://www.mercurytide.co.uk/media/whitepapers/django-cheat-sheet/django10-cheat-sheet.pdf **Recommended Viewing** * Django: Web Development for Perfectionists with Deadlines (1hr) http://www.youtube.com/watch?v=p-WXiqrzAf8 * Leah Culver talks Python and Django (10mins) http://www.youtube.com/watch?v=w84a7_QL_pA * Django framework demo (5mins) http://www.youtube.com/watch?v=CpXz_LsBDBo * Django Developer Toolbar, https://github.com/robhudson/django-debug-toolbar 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** * An Inconvenient API: Theory of the DOM (parts I-III) - http://video.yahoo.com/watch/111582/992708 Lecture 10: Presentations ------------------------- Lecture 11: Django - Authentication, Cookies, Sessions ------------------------------------------------------ TODO(leifos): Using Sessions and Cookies in Rango in Django 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. **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** * Chapman and Chapman, Chapter 4 –Style sheets * W3C’s Cascading Style Sheets page: http://www.w3.org/Style/CSS/ * CSS Tutorial, that contains examples, quizzes, and a reference guide: http://www.w3schools.com/css/default.asp * CSS Zen Garden: http://www.csszengarden.com/ **Recommended Viewing** * You Gotta Keep’em Seperated (3mins) http://www.youtube.com/watch?v=eFwkv14u3b4 Lecture 13: Client Side Scripting - Javascript ---------------------------------------------- This lecture explains how the browser can be manipulated programmatically with client-side scripting. **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** * Chapman and Chapman, Chapter 7 – DOM Scripting * Eloquent JavaScript - http://eloquentjavascript.net/contents.html * JavaScript: The world’s most misunderstood programming languages - http://javascript.crockford.com/javascript.html **Recommended Viewing** * The JavaScript Programming Language (Douglas Crockford) - http://www.learnwebdesignonline.com/videos/programming/javascript/yahoo-douglas-crockford 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. **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** * Intro to jQuery (John Ressig) - http://tv.adobe.com/watch/ajax-experience-2008/intro-to-jquery-by-john-resig/ * JavaScript and jQuery (John Resig) - http://www.youtube.com/watch?v=GKfHdOrR3lw&feature=related 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. **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** * Chapman and Chapman, Chapter 3 - Markup * XML Tutorial: http://www.tizag.com/xmlTutorial * What is XML Tutorial: http://www.w3schools.com/xml/xml_whatis.asp * A Technical Introduction to XML: http://www.xml.com/pub/a/98/10/guide0.html * XML in a Nutshell: http://oreilly.com/catalog/9780596007645/index.html Lecture 16: AJAX ---------------- TODO(leifos): AJAX demo in Rango in Django This lecture will introduce the set of technology collectively known as AJAX, discussing its impact on web application development and user experience. **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** * Ajax: a new approach to web applications - http://www.adaptivepath.com/ideas/essays/archives/000385.php Lecture 17: XML DOM/SAX ----------------------- TODO(leifos): DOM demo 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. **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** * Should I use DOM or SAX? http://developerlife.com/tutorials/?p=28 * http://oreilly.com/catalog/pythonxml/chapter/ch01.html * A good overview of parsing xml in python: http://diveintopython.org/xml_processing/ * Discussion on DOM vs. SAX: http://www.xml.com/pub/a/2001/11/14/dom-sax.html * Parsing XML with SAX and Python Tutorial: http://www.devshed.com/c/a/Python/Parsing-XML-with-SAX-and-Python/ Lecture 18: Accessibility ------------------------- This lecture will discuss web accessibility issues from the point of view of the Web Accessibility Initiative. **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** * Chapman and Chapman, Chapter 9 – Web Accessibility * Web Accessibility Initiative, http://www.w3.org/WAI/ * WAI Guidelines and Techniques, http://www.w3.org/WAI/guid-tech.html * Wikipedia Overview of Web Accessibility, http://en.wikipedia.org/wiki/Web_accessibility * http://www.toptenblogtips.com/10-misconceptions-about-web-accessibility/ **Recommended Viewing** * An Introduction to Web Accessibility, (30 mins) http://www.viddler.com/explore/boagworld/videos/6/ * The world denied (3 mins), http://www.youtube.com/watch?v=SRNdTIFkG1w * Through the eyes of a screen reader, (5mins), http://www.youtube.com/watch?v=bQpNYDvQ010 * WebAnywhere: http://webanywhere.cs.washington.edu/ 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. **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** * Ambient Findability (60 mins), http://video.google.com/videoplay?docid=-8085529791307393357# * The future of Search (50 mins), http://vimeo.com/9687950 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. **Outline** * Summary * Exam structure * Questions and Answers