Update tech_docs/MARP_Rresentations.md
This commit is contained in:
@@ -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.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Principles of REST
|
||||
|
||||
1. **Statelessness**
|
||||
2. **Client-Server Architecture**
|
||||
3. **Cacheability**
|
||||
4. **Layered System**
|
||||
5. **Uniform Interface**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 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.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 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.
|
||||
|
||||
|
||||
|
||||
# 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.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 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;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 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;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 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.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 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;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 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;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 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.
|
||||
|
||||
|
||||
|
||||
# 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
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user