update slides

e3344889 · Chao Zhan · d5f18ace · e3344889 · d5f18ace · d5f18ace
Commit e3344889 authored 2 years ago by Chao Zhan
--- a/README.md
+++ b/README.md
-# ALP4 Tutorial-10
+# ALP4 Tutorial-11
 This branch contains all materials for the 9th tutorial session.
 ## Agenda
 - Assignment's solution presentation
- Recap & Discussion: IPC, RPC, HTTP(S)
+- Recap & Discussion: P2P, Cloud Computing
 - Q&A
--- a/exercises/hello-html/index.html
+++ b/exercises/hello-html/index.html
-<!-- index.html -->
-<html>
-  <body>
-    <div id="app"></div>
-    <script type="text/javascript">
-        const app = document.getElementById('app');
-        app.innerHTML = '<h1>Hello World!</h1>';
-    </script>
-  </body>
-</html>
--- a/slides/images/cover.jpg
+++ b/slides/images/cover.jpg
--- a/slides/images/dom-to-ui.png
+++ b/slides/images/dom-to-ui.png
--- a/slides/images/html-to-dom.png
+++ b/slides/images/html-to-dom.png
--- a/slides/images/http-header.png
+++ b/slides/images/http-header.png
--- a/slides/images/https-detailed.webp
+++ b/slides/images/https-detailed.webp
--- a/slides/images/reactjs.webp
+++ b/slides/images/reactjs.webp
--- a/slides/package-lock.json
+++ b/slides/package-lock.json
--- a/slides/pages/qa.md
+++ b/slides/pages/qa.md
@@ -7,7 +7,12 @@ title: Q&A
 Any questions about:
 - Eighth Assignment Sheet
+- Ninth Assignment Sheet
 - Topics from the lectures
 - Organisation
 <br/>
+## Resources
+- [P2P Network](https://www.enjoyalgorithms.com/blog/peer-to-peer-networks)
--- a/slides/pages/recap.md
+++ b/slides/pages/recap.md
 ---
-title: Agenda
+title: Web Radio Server in Java
 ---
-# Recaps & Discussion
+# Web Radio & Chat Room Server/Client in Java
-Discuss the following topics and explain those concepts in your own words to your teammates:
+A possible approach:
-<br/>
- What is IPC?
- What is RPC?
- What are the differences between RPC and IPC?
- What roles do protocols play in IPC/RPC?
- What are common protocols used in IPC/RPC?
- What are the external data representations used in IPC/RPC?
- What are marshalling and unmarshalling?
---
-title: HTTP(s) I
-layout: two-cols
---
-# HTTP
-**HTTP** stands for **Hypertext Transfer Protocol**.
-It is the protocol that enables communication between different systems, transferring information and data over a network.
-It is a:
- Text-based protocol
- Stateless protocol
- Application layer protocol
-It is used for:
- Client-server model
- Request-response model
- Distributed, collaborative, hypermedia information system
-::right::
-<div class="container flex justify-center">
-    <img src="/images/http-header.png" class="block w-md"/>
-</div>
+- Use different threads to handle different clients as well as different tasks
+- Use different ports to handle different services
 ---
-title: HTTP(s) II
+title: P2P
 ---
-### A typical HTTP request
+# Recaps & Discussion - P2P
-<br/>
-```http
-GET / HTTP/1.1
-Host: www.example.com
-User-Agent: Mozilla/5.0
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
-Accept-Language: en-GB,en;q=0.5
-Accept-Encoding: gzip, deflate, br
-Connection: keep-alive
-```
---
-title: HTTP(s) III
---
-### A typical HTTP response
+Discuss the following topics and explain those concepts in your own words to your teammates:
 <br/>
-```http
+- What is peer-to-peer (P2P) architecture?
-HTTP/1.1 200 OK
+- What are the use cases/examples of P2P?
-Date: Mon, 23 May 2005 22:38:34 GMT
+- What are the different types of P2P network?
-Content-Type: text/html; charset=UTF-8
+- What are the advantages and disadvantages of these type of P2P networks?
-Content-Length: 155
+- What are the advantages and disadvantages of P2P itself?
-Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
-Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
-ETag: "3f80f-1b6-3e1cb03b"
-Accept-Ranges: bytes
-Connection: close
-<html>
-  <head>
-    <title>An Example Page</title>
-  </head>
-  <body>
-    <p>Hello World, this is a very simple HTML document.</p>
-  </body>
-</html>
-```
---
-title: HTTP(s) IV
---
-### HTTPS
-**Hypertext Transfer Protocol Secure (HTTPS)** is an extension of the HTTP protocol.
-**HTTP = HTTP + TLS/SSL**
-<div class="container flex justify-center">
-    <img src="/images/https-detailed.webp" class="block w-md"/>
-</div>
---
-title: HTTP(s) V
-layout: center
---
- What are the differences between HTTP and HTTPS?
- What are the benefits/drawbacks of using HTTPS?
 ---
-title: Foundation of Web Development
+title: Cloud Computing
-layout: center
 ---
-# Foundations of Web Developments
+# Cloud Computing
-Mostly Frontend here
---
-title: Web Development I
---
-## Rendering User Interfaces
-When a user visits a web page, the server returns an HTML file to the browser that may look like this:
-<div class="container flex justify-center">
-    <img src="/images/html-to-dom.png" class="block w-lg"/>
-</div>
-The browser then reads the HTML and constructs the Document Object Model (DOM).
---
-title: Web Development II
---
-## What is DOM?
-The DOM is an object representation of the HTML elements. 
-It acts as a bridge between your code and the user interface, and has a tree-like structure with parent and child relationships.
-<div class="container flex justify-center">
-    <img src="/images/dom-to-ui.png" class="block w-lg"/>
-</div>
---
-title: Web Development III
---
-## DOM Manipulation
-The DOM can be manipulated using JavaScript.
-```html
-<!-- index.html -->
-<html>
-  <body>
-    <div id="app"></div>
-    <script type="text/javascript">
-        const app = document.getElementById('app');
-        app.innerHTML = '<h1>Hello World!</h1>';
-    </script>
-  </body>
-</html>
-```
-See live demo.
---
-title: Web Development IV
---
-## Too much DOM manipulation?
-**Use a framework!**
-<div class="container flex justify-left">
-    <img src="/images/reactjs.webp" class="block w-sm"/>
-</div>
+Discuss the following topics and explain those concepts in your own words to your teammates:
 <br/>
- [React](https://react.dev/) is a JavaScript library for building user interfaces
+- What is cloud computing?
- Write declarative code to describe the UI
+- What are the **service models** of cloud computing?
- The framework will handle DOM manipulation for you
+- What are the **deployment models** of cloud computing?
- Organize your code into reusable components
+- What are the key technologies involved in cloud computing?
- Alternative: [Vue.js](https://vuejs.org/), [Angular](https://angular.io/), etc.
---
-title: Web Development V
---
-## Useful Resources
-<br/>
- [Mozilla - Learn web development](https://developer.mozilla.org/en-US/docs/Learn)
+<!-- <div class="container flex justify-center"> -->
- [The Modern JavaScript Tutorial](https://javascript.info/)
+<!--     <img src="/images/http-header.png" class="block w-md"/> -->
- [Learn React](https://react.dev/learn)
+<!-- </div> -->
- [Learn CSS](https://web.dev/learn/css/)
- **Don't want to configure your own local development environment?** Try [CodeSandbox!](https://codesandbox.io/)
--- a/slides/slides.md
+++ b/slides/slides.md
@@ -17,7 +17,7 @@ css: unocss
 background: /images/cover.jpg
 ---
-# ALP4 Tutorial 10
+# ALP4 Tutorial 11
 ## Chao Zhan