Update tech_docs/MARP_Rresentations.md

2024-06-02 06:41:25 +00:00
parent f344874c52
commit 44d5c6049f
1 changed files with 706 additions and 0 deletions
--- a/tech_docs/MARP_Rresentations.md
+++ b/tech_docs/MARP_Rresentations.md
@@ -1,3 +1,709 @@
 ## RESTful APIs
 ---
 marp: true
 theme: gaia
 class: invert
 paginate: true
 title: "Understanding RESTful APIs"
 author: "Your Name"
 date: "CS PhD Seminar"
 style: |
  section {
    font-family: 'Arial, sans-serif';
    color: #ddd;
  }
  h1, h2, h3 {
    color: #4CAF50;
  }
  code {
    background: #333;
    color: #eee;
    padding: 0.2em;
    border-radius: 5px;
  }
  .columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
 ---
 # Understanding RESTful APIs
 ## CS PhD Seminar
 ---
 # What is a RESTful API?
 - **API (Application Programming Interface)**: A set of rules and protocols for building and interacting with software applications.
 - **REST (Representational State Transfer)**: An architectural style for designing networked applications.
 - **RESTful API**: An API that adheres to the principles of REST.
 ![bg](https://via.placeholder.com/800x600)
 ---
 # Principles of REST
 1. **Statelessness**
 2. **Client-Server Architecture**
 3. **Cacheability**
 4. **Layered System**
 5. **Uniform Interface**
 ![bg right](https://via.placeholder.com/800x600)
 ---
 # Statelessness
 - Each request from a client to a server must contain all the information needed to understand and process the request.
 - The server should not store any context about the client between requests.
 ---
 # Client-Server Architecture
 - The client and server operate independently.
 - The client makes requests, and the server processes them and returns the appropriate responses.
 ![bg left](https://via.placeholder.com/800x600)
 ---
 # Cacheability
 - Responses from the server should be explicitly labeled as cacheable or non-cacheable.
 - This allows clients to cache responses and reduce the need to make additional requests.
 ---
 # Layered System
 - A client cannot ordinarily tell whether it is connected directly to the end server or an intermediary.
 - This promotes scalability by allowing load balancing and shared caching.
 ---
 # Uniform Interface
 - Simplifies and decouples the architecture, which enables each part to evolve independently.
 - Key constraints:
  - Identification of resources (URI)
  - Manipulation of resources through representations (HTTP methods)
  - Self-descriptive messages
  - Hypermedia as the engine of application state (HATEOAS)
 ---
 # HTTP Methods in REST
 <div class="columns">
 <div>
 ### GET
 - Retrieve data from a specified resource.
 - Example: `GET /api/users`
 </div>
 <div>
 ### POST
 - Submit data to be processed to a specified resource.
 - Example: `POST /api/users`
 </div>
 <div>
 ### PUT
 - Update a specified resource.
 - Example: `PUT /api/users/1`
 </div>
 <div>
 ### DELETE
 - Delete a specified resource.
 - Example: `DELETE /api/users/1`
 </div>
 </div>
 ---
 # RESTful API Example
 ```http
 GET /api/books/1 HTTP/1.1
 Host: example.com
 ```
 **Response:**
 ```json
 {
  "id": 1,
  "title": "RESTful APIs",
  "author": "John Doe"
 }
 ```
 ---
 # Advantages of RESTful APIs
 - **Scalability**: Stateless nature helps in scaling.
 - **Flexibility**: Can handle different types of calls and return different data formats.
 - **Independence**: Separation of client and server.
 ---
 # Disadvantages of RESTful APIs
 - **Overhead**: HTTP methods and headers add extra overhead.
 - **Statelessness**: Requires every request to be self-contained.
 - **Complexity**: Properly designing and documenting a RESTful API can be complex.
 ---
 # Conclusion
 - RESTful APIs are a powerful way to design web services that are scalable, flexible, and maintainable.
 - Understanding the principles and constraints of REST is crucial for designing effective APIs.
 ![bg](https://via.placeholder.com/800x600)
 # Thank you!
 ---
 # Q&A
 ---
 # References
 - [Fielding, Roy T. "Architectural Styles and the Design of Network-based Software Architectures." Doctoral dissertation, University of California, Irvine, 2000.](https://www.ics.uci.edu/~fielding/pubs/dissertation/fielding_dissertation.pdf)
 - [REST API Tutorial](https://restfulapi.net/)
 - [RESTful Web Services](https://restfulwebservices.net/)
 ### CSS Presentation on Basic CSS for CS PhD Students
 ---
 marp: true
 theme: gaia
 class: invert
 paginate: true
 title: "Basic CSS Refresher"
 author: "Your Name"
 date: "CS PhD Seminar"
 style: |
  section {
    font-family: 'Arial, sans-serif';
    color: #ddd;
  }
  h1, h2, h3 {
    color: #4CAF50;
  }
  code {
    background: #333;
    color: #eee;
    padding: 0.2em;
    border-radius: 5px;
  }
  .columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
 ---
 # Basic CSS Refresher
 ## CS PhD Seminar
 ---
 # What is CSS?
 - **CSS (Cascading Style Sheets)**: A language used to describe the presentation of a document written in HTML or XML.
 - **Purpose**: CSS handles the visual and aural layout, including colors, fonts, and spacing.
 ![bg](https://via.placeholder.com/800x600)
 ---
 # CSS Syntax
 - **Selector**: Specifies the HTML element(s) to be styled.
 - **Declaration Block**: Contains one or more declarations separated by semicolons.
 - **Declaration**: Consists of a property and a value, separated by a colon.
 ```css
 selector {
  property: value;
 }
 ```
 ---
 # Selectors
 - **Element Selector**: Selects all elements of a given type.
  ```css
  p {
    color: blue;
  }
  ```
 - **Class Selector**: Selects elements with a specific class.
  ```css
  .classname {
    color: green;
  }
  ```
 - **ID Selector**: Selects an element with a specific ID.
  ```css
  #idname {
    color: red;
  }
  ```
 ---
 # Colors and Backgrounds
 - **Color Property**: Sets the text color.
  ```css
  p {
    color: blue;
  }
  ```
 - **Background Color**:
  ```css
  body {
    background-color: #333;
  }
  ```
 - **Background Image**:
  ```css
  body {
    background-image: url('background.jpg');
  }
  ```
 ---
 # Fonts and Text
 - **Font Family**:
  ```css
  p {
    font-family: 'Arial, sans-serif';
  }
  ```
 - **Font Size**:
  ```css
  h1 {
    font-size: 2em;
  }
  ```
 - **Text Alignment**:
  ```css
  h1 {
    text-align: center;
  }
  ```
 ---
 # Box Model
 - **Content**: The innermost part where text and images appear.
 - **Padding**: Clears an area around the content.
 - **Border**: Goes around the padding.
 - **Margin**: Clears an area outside the border.
 ```css
 div {
  padding: 20px;
  border: 5px solid #ccc;
  margin: 10px;
 }
 ```
 ![bg](https://via.placeholder.com/800x600)
 ---
 # Layout and Positioning
 - **Display Property**: Specifies how an element is displayed.
  ```css
  .inline {
    display: inline;
  }
  .block {
    display: block;
  }
  ```
 - **Position Property**: Specifies the type of positioning method.
  ```css
  .relative {
    position: relative;
    top: 10px;
    left: 10px;
  }
  .absolute {
    position: absolute;
    top: 10px;
    left: 10px;
  }
  ```
 ---
 # Flexbox
 - **Container**:
  ```css
  .flex-container {
    display: flex;
  }
  ```
 - **Items**:
  ```css
  .flex-item {
    flex: 1;
  }
  ```
 ![bg right](https://via.placeholder.com/800x600)
 ---
 # Grid Layout
 - **Container**:
  ```css
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
  }
  ```
 - **Items**:
  ```css
  .grid-item {
    padding: 20px;
  }
  ```
 ---
 # Pseudo-classes and Pseudo-elements
 - **Pseudo-class**: Applies to elements based on their state.
  ```css
  a:hover {
    color: red;
  }
  ```
 - **Pseudo-element**: Styles specific parts of an element.
  ```css
  p::first-line {
    color: blue;
  }
  ```
 ---
 # Conclusion
 - **CSS Basics**: Essential for designing and styling web pages
 ### Complete Marp Markdown Presentation on Basic CSS for CS PhD Students
 ---
 marp: true
 theme: gaia
 class: invert
 paginate: true
 title: "Basic CSS Refresher"
 author: "Your Name"
 date: "CS PhD Seminar"
 style: |
  section {
    font-family: 'Arial, sans-serif';
    color: #ddd;
  }
  h1, h2, h3 {
    color: #4CAF50;
  }
  code {
    background: #333;
    color: #eee;
    padding: 0.2em;
    border-radius: 5px;
  }
  .columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
 ---
 # Basic CSS Refresher
 ## CS PhD Seminar
 ---
 # What is CSS?
 - **CSS (Cascading Style Sheets)**: A language used to describe the presentation of a document written in HTML or XML.
 - **Purpose**: CSS handles the visual and aural layout, including colors, fonts, and spacing.
 ![bg](https://via.placeholder.com/800x600)
 ---
 # CSS Syntax
 - **Selector**: Specifies the HTML element(s) to be styled.
 - **Declaration Block**: Contains one or more declarations separated by semicolons.
 - **Declaration**: Consists of a property and a value, separated by a colon.
 ```css
 selector {
  property: value;
 }
 ```
 ---
 # Selectors
 - **Element Selector**: Selects all elements of a given type.
  ```css
  p {
    color: blue;
  }
  ```
 - **Class Selector**: Selects elements with a specific class.
  ```css
  .classname {
    color: green;
  }
  ```
 - **ID Selector**: Selects an element with a specific ID.
  ```css
  #idname {
    color: red;
  }
  ```
 ---
 # Colors and Backgrounds
 - **Color Property**: Sets the text color.
  ```css
  p {
    color: blue;
  }
  ```
 - **Background Color**:
  ```css
  body {
    background-color: #333;
  }
  ```
 - **Background Image**:
  ```css
  body {
    background-image: url('background.jpg');
  }
  ```
 ---
 # Fonts and Text
 - **Font Family**:
  ```css
  p {
    font-family: 'Arial, sans-serif';
  }
  ```
 - **Font Size**:
  ```css
  h1 {
    font-size: 2em;
  }
  ```
 - **Text Alignment**:
  ```css
  h1 {
    text-align: center;
  }
  ```
 ---
 # Box Model
 - **Content**: The innermost part where text and images appear.
 - **Padding**: Clears an area around the content.
 - **Border**: Goes around the padding.
 - **Margin**: Clears an area outside the border.
 ```css
 div {
  padding: 20px;
  border: 5px solid #ccc;
  margin: 10px;
 }
 ```
 ![bg](https://via.placeholder.com/800x600)
 ---
 # Layout and Positioning
 - **Display Property**: Specifies how an element is displayed.
  ```css
  .inline {
    display: inline;
  }
  .block {
    display: block;
  }
  ```
 - **Position Property**: Specifies the type of positioning method.
  ```css
  .relative {
    position: relative;
    top: 10px;
    left: 10px;
  }
  .absolute {
    position: absolute;
    top: 10px;
    left: 10px;
  }
  ```
 ---
 # Flexbox
 - **Container**:
  ```css
  .flex-container {
    display: flex;
  }
  ```
 - **Items**:
  ```css
  .flex-item {
    flex: 1;
  }
  ```
 ![bg right](https://via.placeholder.com/800x600)
 ---
 # Grid Layout
 - **Container**:
  ```css
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
  }
  ```
 - **Items**:
  ```css
  .grid-item {
    padding: 20px;
  }
  ```
 ---
 # Pseudo-classes and Pseudo-elements
 - **Pseudo-class**: Applies to elements based on their state.
  ```css
  a:hover {
    color: red;
  }
  ```
 - **Pseudo-element**: Styles specific parts of an element.
  ```css
  p::first-line {
    color: blue;
  }
  ```
 ---
 # Conclusion
 - **CSS Basics**: Essential for designing and styling web pages.
 - **Selectors**: Fundamental for targeting HTML elements.
 - **Box Model**: Crucial for layout and design.
 - **Advanced Layouts**: Flexbox and Grid offer powerful ways to create complex layouts.
 ![bg](https://via.placeholder.com/800x600)
 # Thank you!
 ---
 # Q&A
 ---
 # References
 - [MDN Web Docs on CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
 - [W3Schools CSS Tutorial](https://www.w3schools.com/css/)
 - [CSS Tricks](https://css-tricks.com/)
 This presentation covers the fundamental aspects of CSS, using a dark theme and incorporating images, code snippets, and a two-column layout. This format should be engaging and informative for a group of CS PhD students.
 ---
 # MARP Rresentations
 ---