CMPT 470 Lecture Notes

  1. Course Introduction [“Course Introduction” slides]
    1. This Course [This Course slides]
    2. Fall 2021 Plan [Fall 2021 Plan slides]
    3. Us [Us slides]
    4. Topics [Topics slides]
    5. Grades [Grades slides]
    6. Weekly Exercises [Weekly Exercises slides]
    7. Technology Evaluation [Technology Evaluation slides]
    8. Project [Project slides]
    9. Groups [Groups slides]
    10. Version Control [Version Control slides]
    11. “Deploying” Code [“Deploying” Code slides]
    12. Expectations [Expectations slides]
  2. Web Markup [“Web Markup” slides]
    1. Making Web Pages [Making Web Pages slides]
    2. Creating Pages 1: Mark up semantic content [Creating Pages 1: Mark up semantic content slides]
    3. Tags and Their Meaning [Tags and Their Meaning slides]
    4. Why Care About Semantics? [Why Care About Semantics? slides]
    5. Validation [Validation slides]
  3. Appearance and Style [“Appearance and Style” slides]
    1. Creating Pages 2: Make it pretty [Creating Pages 2: Make it pretty slides]
    2. CSS Compatibilty [CSS Compatibilty slides]
    3. CSS Selectors [CSS Selectors slides]
    4. Aside: Tools [Aside: Tools slides]
    5. Box Model [Box Model slides]
    6. CSS Lengths [CSS Lengths slides]
    7. CSS Positioning [CSS Positioning slides]
    8. Responsive Design [Responsive Design slides]
    9. Don't Overcomplicate [Don't Overcomplicate slides]
    10. CSS Defaults [CSS Defaults slides]
    11. CSS Preprocessors [CSS Preprocessors slides]
    12. CSS Frameworks [CSS Frameworks slides]
    13. Creating Pages 3: Behaviour [Creating Pages 3: Behaviour slides]
  4. HTTP and Servers [“HTTP and Servers” slides]
    1. The HTTP Request [The HTTP Request slides]
    2. Request Methods [Request Methods slides]
    3. The HTTP Response [The HTTP Response slides]
    4. Aside: conversation format [Aside: conversation format slides]
    5. HTTP/2 [HTTP/2 slides]
    6. Status Codes [Status Codes slides]
    7. Web Servers [Web Servers slides]
    8. Server-Side Programming [Server-Side Programming slides]
    9. Character Sets/Encodings [Character Sets/Encodings slides]
    10. Redirects [Redirects slides]
    11. Content Negotiation [Content Negotiation slides]
  5. Page Speed [“Page Speed” slides]
    1. HTTP Caching [HTTP Caching slides]
    2. Static Assets [Static Assets slides]
    3. Images [Images slides]
    4. Page Drawing [Page Drawing slides]
    5. Delivering Bytes [Delivering Bytes slides]
    6. The Goal [The Goal slides]
    7. Checking Pages [Checking Pages slides]
    8. Deploying Servers [Deploying Servers slides]
  6. Databases [“Databases” slides]
    1. Relational Databases [Relational Databases slides]
    2. Relational DB Servers [Relational DB Servers slides]
    3. Relational Cloud DB [Relational Cloud DB slides]
    4. Development DB [Development DB slides]
    5. Object-Relational Mapping [Object-Relational Mapping slides]
    6. MVC [MVC slides]
    7. Relational Limitations [Relational Limitations slides]
    8. NoSQL [NoSQL slides]
    9. Yes SQL [Yes SQL slides]
  7. Security [“Security” slides]
    1. Input & Output [Input & Output slides]
    2. SQL Injection [SQL Injection slides]
    3. Cross-Site Scripting [Cross-Site Scripting slides]
    4. Insufficient Authorization [Insufficient Authorization slides]
    5. Session Prediction/​Hijacking [Session Prediction/​Hijacking slides]
    6. Cross-Site Request Forgery [Cross-Site Request Forgery slides]
    7. Insecure Static Content [Insecure Static Content slides]
    8. Insecure Data Storage [Insecure Data Storage slides]
    9. Risk Mitigation [Risk Mitigation slides]
    10. Example Security Breaches [Example Security Breaches slides]
  8. Technology evaluation presentations
  9. Server Architecture [“Server Architecture” slides]
    1. Libraries and Frameworks [Libraries and Frameworks slides]
    2. Server Architecture [Server Architecture slides]
    3. Architecture & Speed [Architecture & Speed slides]
    4. Reverse Proxies [Reverse Proxies slides]
    5. Application-Level Caching [Application-Level Caching slides]
    6. Multitier Architectures [Multitier Architectures slides]
    7. Tiers & Communication [Tiers & Communication slides]
    8. Managing Servers [Managing Servers slides]
    9. Cloud Hosting [Cloud Hosting slides]
    10. Content Delivery Networks [Content Delivery Networks slides]
    11. Review [Review slides]
  10. URLs and REST [“URLs and REST” slides]
    1. URL Basics [URL Basics slides]
    2. URLs Identify [URLs Identify slides]
    3. URL Usability [URL Usability slides]
    4. URL Hierarchy [URL Hierarchy slides]
    5. Implementing Good URLs [Implementing Good URLs slides]
    6. Slugs [Slugs slides]
    7. REST [REST slides]
    8. REST Methods [REST Methods slides]
    9. REST Representations [REST Representations slides]
    10. REST Status Codes [REST Status Codes slides]
    11. REST Authentication [REST Authentication slides]
    12. REST Libraries [REST Libraries slides]
    13. Demo [Demo slides]
    14. REST vs GraphQL [REST vs GraphQL slides]
    15. Creating an API [Creating an API slides]
  11. Client Side Programming [“Client Side Programming” slides]
    1. JavaScript [JavaScript slides]
    2. Inline JavaScript [Inline JavaScript slides]
    3. DOM [DOM slides]
    4. DOM + JavaScript [DOM + JavaScript slides]
    5. AJAX [AJAX slides]
    6. Real-Time AJAX [Real-Time AJAX slides]
    7. Progressive Enhancement [Progressive Enhancement slides]
    8. JavaScript Frameworks [JavaScript Frameworks slides]
    9. Server-Side JavaScript [Server-Side JavaScript slides]
  12. Mobile Web [“Mobile Web” slides]
    1. Separate Mobile Sites [Separate Mobile Sites slides]
    2. Mobile CSS [Mobile CSS slides]
    3. Mobile Apps [Mobile Apps slides]
    4. Hybrid Mobile Solutions [Hybrid Mobile Solutions slides]

Course home page.

Schedule, Fall 2021

Week Deliverables (*) Lecture Date First Slide Video Link
1 Sep 14 Intro 1-1 (1:18)
Why Semantics? 1-2 (0:57)
2 Exer 1 Sep 21 CSS Lengths 2-1 (0:49)
CSS Frameworks 2-2 (1:01)
3 Exer 2 Sep 28 Status Codes 3-1 (1:04)
Redirects 3-2 (1:10)
4 TE Topics, Exer 3 Oct 05 Images 4-1 (1:05)
ORMs 4-2 (0:45)
5 Exer 4 Oct 12 Security 5-1 (0:52)
Session Prediction/​Hijacking 5-2 (1:03)
6 Exer 5 Oct 19 tech eval presentations 6-1 (1:11)
6-2 (0:42)
7 Exer 6 Oct 26 tech eval presentations 7-1 (1:14)
7-2 (0:52)
8 TE demo & written, Exer 7 Nov 02 tech eval presentations 8-1 (1:10)
8-2 (0:44)
9 TE summaries, Proj proposal, Exer 8 Nov 09 Server Arch 9-1 (1:05)
Multitier Arch 9-2 (0:57)
10 Exer 9 Nov 16 URLs and REST 10-1 (1:03)
Slugs 10-2 (1:12)
11 Proj checkpoint, Exer 10 Nov 23 Client Side 11-1 (1:03)
Mobile web 11-2 (0:27)
12 Nov 30 no lecture
13 Project Dec 07 no lecture
14 Proj overview, peer eval —

* Check CourSys for the actual due dates and times.