add web and http slides
- change numbering - add snippets for html and css - add imagesmain
borb
1 month ago
parent
e6612bdccf
commit
86ce67dbf1
File diff suppressed because one or more lines are too long
@ -0,0 +1,252 @@
|
||||
---
|
||||
marp: true
|
||||
paginate: true
|
||||
math: mathjax
|
||||
theme: buutti
|
||||
title: 1. Introduction to the Web
|
||||
---
|
||||
|
||||
# Introduction to the Web
|
||||
|
||||
<!-- headingDivider: 5 -->
|
||||
<!-- class: invert -->
|
||||
|
||||
## Contents
|
||||
|
||||
1) Web and the Internet
|
||||
2) Frontend and backend
|
||||
3) Anatomy of a website
|
||||
4) Web APIs
|
||||
|
||||
## Web and the Internet
|
||||
|
||||
### What is the Internet?
|
||||
|
||||
<div class='columns' style='grid-template-columns: 4fr 1fr;' markdown='1'>
|
||||
<div markdown='1'>
|
||||
|
||||
* World Wide Web is not the Internet
|
||||
* Internet: connected networks that use the TCP/IP protocol
|
||||
* made out of billions of computers, cables and antennae directing data to the right direction
|
||||
* World Wide Web: URL-based information system
|
||||
|
||||
</div>
|
||||
<div markdown='1'>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
* WWW is a big part of the Internet but it consists of other kinds of traffic, too:
|
||||
* Email
|
||||
* VoIP (Skype, Discord, etc)
|
||||
* File transfer between computers (FTP)
|
||||
* remote connections to other computers
|
||||
* In other words, the Internet is an infrastructure and WWW is served via it
|
||||
|
||||
### What is the Web?
|
||||
|
||||
<div class='columns21' markdown='1'>
|
||||
<div markdown='1'>
|
||||
|
||||
* World wide web (www) is the part of the Internet where browsers fetch and show websites
|
||||
* WWW makes sites and applications accessible to all kinds of devices:
|
||||
* mobile phones, computers, smart watches, TVs...
|
||||
* For the websites to appear on all the different devices similarly, strict rules are needed
|
||||
|
||||
</div>
|
||||
<div markdown='1'>
|
||||
|
||||
| | Browser | Engine |
|
||||
|---------------------------------------------|---------------|---------|
|
||||
|  | **Chrome** | Blink |
|
||||
|  | **Edge** | Blink |
|
||||
|  | **Firefox** | Gecko |
|
||||
|  | **Safari** | WebKit |
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Frontend vs Backend
|
||||
|
||||
* Web development is split into [**_frontend_** and **_backend_**](https://en.wikipedia.org/wiki/Frontend_and_backend)
|
||||
* Frontend is the website users can actually see
|
||||
* Visual elements of a website or app the user can interact with
|
||||
* Backend is the invisible part
|
||||
* "Server side" where user's data is stored
|
||||
* Backend is not interacted with directly, but gives and modifies its stored data based on user requests
|
||||
* _**Full stack development**_ refers to working on both backend and frontend!
|
||||
|
||||
### What is a server or "the cloud"
|
||||
|
||||
<div class='columns32' markdown='1'>
|
||||
<div markdown='1'>
|
||||
|
||||
* A server or "the cloud" is just another computer, or multiple ones
|
||||
* Server software is constantly running on it
|
||||
* Your own computer could be a server!
|
||||
* If you need to save an image, post a comment on a news website, or just load a website, you send a **_request_** to a server
|
||||
* Server then gives an appropriate **_response_** based on the request
|
||||
|
||||
</div>
|
||||
<div markdown='1'>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Backend
|
||||
|
||||
<div class='columns21' markdown='1'>
|
||||
<div markdown='1'>
|
||||
|
||||
* Backend handles e.g.,
|
||||
* saving and fetching user data from a **_database_**
|
||||
* user authentication and connecting multiple users together (chat apps!)
|
||||
* Databases are used with _**query languages**_ like **_SQL_**
|
||||
* Backend software can be written with various different programming languages
|
||||
* even with JavaScript! See: [Express](https://expressjs.com/)
|
||||
* Simple websites don't require a dedicated backend
|
||||
|
||||
</div>
|
||||
<div markdown='1'>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Anatomy of a website
|
||||
|
||||
### Building blocks of a website
|
||||
|
||||
* Historically, websites looked something like this
|
||||
* [https://web.archive.org/web/19970129232848/http://www.iltalehti.fi/](https://web.archive.org/web/19970129232848/http://www.iltalehti.fi/)
|
||||
* Nowadays, a website can even be a full-blown application!
|
||||
* [https://open.spotify.com/](https://open.spotify.com/)
|
||||
* Old and new sites alike are written in **_HTML_**, which describes the **_structure_** of the site
|
||||
* In mid-90s, plain HTML was extended with **_CSS_** to implement **_styling_**
|
||||
* The third building block of a website is JavaScript, or **_JS_**, which is used to add **_interactivity_**
|
||||
|
||||
### HTML
|
||||
|
||||
<div class='columns32' markdown='1'>
|
||||
<div markdown='1'>
|
||||
|
||||
* HTML stands for **_Hypertext markup language_**
|
||||
* HTML defines the structure of a website
|
||||
* It tells what text, images and containers the website has
|
||||
* You might have seen raw html if your browser has failed due to a slow connection $\Rightarrow$
|
||||
* [motherfuckingwebsite.com](https://motherfuckingwebsite.com/)
|
||||
* http://catb.org/~esr/open-source.html
|
||||
|
||||
```html
|
||||
<body>
|
||||
<h1>This is a Heading</h1>
|
||||
<p>This is a paragraph.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
<div markdown='1'>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### CSS
|
||||
|
||||
<div class='columns' markdown='1'>
|
||||
<div markdown='1'>
|
||||
|
||||
* CSS stands for **_Cascading style sheets_**
|
||||
* CSS defines the ***look*** of the website
|
||||
* It tells the fonts, sizes, colors and locations of elements
|
||||
* Can be used to animate elements
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: lightblue;
|
||||
}
|
||||
h1 {
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
font-family: verdana;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
</div>
|
||||
<div markdown='1'>
|
||||
|
||||
|
||||
|
||||
* [bettermotherfuckingwebsite.com](http://bettermotherfuckingwebsite.com/)
|
||||
* https://www.emuurom.com/
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
### JavaScript
|
||||
|
||||
* With a dedicated programming language, JavaScript, your website can become interactive
|
||||
* It allows you to add functionality to buttons, send data to / fetch data from a server in real time
|
||||
|
||||
<div class='columns' markdown='1'>
|
||||
<div markdown='1' class='centered'>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div markdown='1' class='centered'>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Web APIs
|
||||
|
||||
### What is a Web API
|
||||
|
||||
* ***API (Application Programming Interface)*** defines a way of communicating between applications
|
||||
* A Web API defines how a client can communicate with a web server
|
||||
* With the help of APIs, you don't need to create all functionality yourself
|
||||
* Each program that wants to communicate to the outside world defines their own interface
|
||||
* There are some architectural models like **_REST (Representational State Transfer)_** that exist to generalize API design
|
||||
|
||||
### Client-side and Server-side APIs
|
||||
|
||||
* [Client-side APIs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction) — called on the web browser (client side):
|
||||
* Browser APIs, built into the browser itself and extend its functionality
|
||||
* For instance, the geolocation API returns coordinates where the browser is located
|
||||
* Third-party APIs, for retrieving data from somewhere on the Web
|
||||
* Server-side APIs — called on the server:
|
||||
* For communicating between servers or the client
|
||||
* Consist of multiple exposed ***endpoints*** with a defined request-response system
|
||||
|
||||
### API communication
|
||||
|
||||
<div class='centered'>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Third party APIs
|
||||
|
||||
* Many services have public APIs that anyone can use
|
||||
* Some services require users to have an [API key](https://en.wikipedia.org/wiki/API_key)
|
||||
|
||||
<div class='centered'>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,185 @@
|
||||
---
|
||||
marp: true
|
||||
paginate: true
|
||||
math: mathjax
|
||||
theme: buutti
|
||||
title: 2. HTTP
|
||||
---
|
||||
|
||||
# HTTP
|
||||
|
||||
<!-- headingDivider: 5 -->
|
||||
<!-- class: invert -->
|
||||
|
||||
## Contents
|
||||
|
||||
1) What is HTTP?
|
||||
2) HTTP Requests
|
||||
3) HTTP Responses
|
||||
4) IP address and ports
|
||||
|
||||
|
||||
## What is HTTP?
|
||||
|
||||
* **_HTTP_** (Hypertext Transfer Protocol) is a TCP/IP based communication protocol, which provides a standardized way for computers to communicate with each other
|
||||
* The communication happens between a client (browser, application…) and a server
|
||||
* The client sends a **_request_**, and the server returns a **_response_**
|
||||
* HTTP is *__connectionless__*:
|
||||
* The client and server are only aware of each other during the request-response phase
|
||||
* After that, each new request is sent through a new connection
|
||||
|
||||
### But what is TCP/IP?
|
||||
|
||||
* It is known as the [Internet protocol suite](https://en.wikipedia.org/wiki/Internet_protocol_suite)
|
||||
* Framework used for organizing communication protocols over the Internet
|
||||
* TCP = Transmission Control Protocol
|
||||
* Controlled stream of bytes between applications communicating via an IP network
|
||||
* IP = Internet Protocol
|
||||
* Delivering packets from host to destination with IP addresses
|
||||
|
||||
### HTTP structure
|
||||
|
||||
<div class='columns' markdown='1'>
|
||||
<div markdown='1'>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div markdown='1'>
|
||||
|
||||
* The HTTP protocol acts as a communication bus between the web client (e.g. web browser) and the web server
|
||||
* There can be multiple clients connected to the server simultaneously
|
||||
* The clients are not connected to each other but only to the server
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## HTTP requests
|
||||
|
||||
* HTTP defines a set of request methods
|
||||
* The most common requests are `GET`, `POST`, `PUT` and `DELETE`
|
||||
* These are needed to create a basic CRUD app *(Create, Read, Update, Delete)*
|
||||
* More requests are listed in the [mdn web docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods)
|
||||
|
||||
| HTTP Method | Usage | Example Use |
|
||||
|-------------|:---------------------|:------------------------------------------|
|
||||
| `GET` | Retrieve content | Browser fetching a webpage |
|
||||
| `POST` | Add new data | Submitting a form to create a new account |
|
||||
| `PUT` | Update existing data | Updating user profile information |
|
||||
| `DELETE` | Remove existing data | Deleting a user account |
|
||||
|
||||
### Note: URI vs URL
|
||||
|
||||
* The website address is more formally known as the ***URL (uniform resource locator)***
|
||||
* `https://maps.google.com`
|
||||
* `https://maps.google.com/maps?q=Oulu` (includes a ***query***)
|
||||
* It is a subset of an ***URI (uniform resource identifier)***
|
||||
* This identifies a resource on a webpage
|
||||
|
||||
### HTTP request format
|
||||
|
||||
* Request line: `<request method> <request URI>`
|
||||
* Example: `GET https://example.com/products`
|
||||
* Headers (optional)
|
||||
* Example: `Date: Mon, 07 Sep 2020 08:39:33 GMT`
|
||||
* Example: `Content-Type: application/json`
|
||||
* Body (optional)
|
||||
* Example in the JSON format:
|
||||
```json
|
||||
{
|
||||
"date": "2020-09-08T11:39:34.2837813+03:00",
|
||||
"temperatureC": 11,
|
||||
"temperatureF": 51,
|
||||
"summary": "Cool"
|
||||
}
|
||||
```
|
||||
|
||||
### HTTP request examples
|
||||
|
||||
| Method | URI | Headers | Body |
|
||||
|:---------|:--------------------------------|:---------------------------------|:--------------------|
|
||||
| `GET` | `http://server.com/` | | |
|
||||
| `GET` | `http://server.com/10` | | |
|
||||
| `POST` | `http://server.com/users` | `Content-Type: application/json` | `{"name": "Dan"}` |
|
||||
| `PUT` | `http://server.com/users/2` | `Content-Type: application/json` | `{"name": "Danny"}` |
|
||||
| `DELETE` | `http://server.com/users/2` | | |
|
||||
|
||||
|
||||
## HTTP response format
|
||||
|
||||
* HTTP responses have the following format:
|
||||
* Status line: `<HTTP version> <status code> <reason phrase>`
|
||||
* Example:`HTTP/1.1 200 OK`
|
||||
* Headers (optional)
|
||||
* `Date: Mon, 07 Sep 2020 08:39:33 GMT`
|
||||
* `Content-Type: application/json`
|
||||
* Body (optional)
|
||||
```json
|
||||
{
|
||||
"date": "2020-09-08T11:39:34.2837813+03:00",
|
||||
"temperatureC": 11,
|
||||
"temperatureF": 51,
|
||||
"summary": "Cool"
|
||||
}
|
||||
```
|
||||
|
||||
### HTTP status codes
|
||||
|
||||
* The status line of HTTP a response sent by an API should accurately describe the status of what happened on the server after each request:
|
||||
* Did the operation succeed? (`2xx` status codes)
|
||||
* Was there an error with the request? (`4xx` status codes)
|
||||
* E.g., the request line was malformed, or the server doesn't support it
|
||||
* Did a server-side exception occur? (`5xx` status codes)
|
||||
* This is never the client's fault!
|
||||
|
||||
### Status codes for a CRUD app
|
||||
|
||||
* Your APIs should use the following status codes for responses to CRUD operations
|
||||
* See [Restfulapi.net](https://restfulapi.net/http-status-codes/) and [Wikipedia](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes) HTTP status code listings
|
||||
|
||||
| `2xx SUCCESS` | `4xx CLIENT ERROR` | `5xx SERVER ERROR` |
|
||||
|:-------------------|:---------------------|:------------------------------|
|
||||
| `200 - OK` | `400 - Bad Request` | `500 - Internal Server Error` |
|
||||
| `201 - Created` | `401 - Unauthorized` | |
|
||||
| `204 - No Content` | `403 - Forbidden` | |
|
||||
| | `404 - Not Found` | |
|
||||
| | `409 - Conflict` | |
|
||||
|
||||
## IP and ports
|
||||
|
||||
### IP addresses
|
||||
|
||||
* Every node, or ***host*** on a computer network needs an IP (Internet Protocol) address
|
||||
* These can be public or private
|
||||
* Serves two functions: identifies and provides the location of the host
|
||||
* The old 32-bit IPv4 addresses are of the form `192.0.2.1`
|
||||
* The 128-bit IPv6 addresses are of the form `2001:0db8:0000:0000:0000:8a2e:0370:7334` (can be shortened to `2001:db8::8a2e:370:7334`)
|
||||
|
||||
### Port numbers
|
||||
|
||||
<!-- Note: older version in the backend-basics repo -->
|
||||
|
||||
* The IP address is often followed by a ***port*** number separated by a colon: `192.0.2.1:8080`
|
||||
* The port number (16-bit unsigned integer) defines the port through which communication to your application happens
|
||||
* Ports allow multiple applications to be located on the same host
|
||||
* The client connects to this port in some server (defined by an IP address), so the client and the server are able to communicate
|
||||
* Computers have several different ports at their disposal
|
||||
|
||||
### Reserved ports
|
||||
|
||||
<div class='columns' markdown='1'>
|
||||
<div markdown='1'>
|
||||
|
||||
* Some of them are reserved and your application might not be able to assign those ports to itself
|
||||
* Ports from 0 to 1023 are ***system ports***
|
||||
* There are restrictions in manually assigning applications to use them
|
||||
* Generally, ports from 1024 to 65535 are available for the user to assign for applications
|
||||
|
||||
</div>
|
||||
<div markdown='1'>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,158 +1,3 @@
|
||||
# Web & HTML
|
||||
|
||||
1. Websites and The Internet
|
||||
|
||||
A short overview of the Internet and WWW
|
||||
|
||||
Anatomy of a website (or web app)
|
||||
|
||||
HTML, CSS, JS
|
||||
|
||||
2. HTML basics
|
||||
|
||||
Setting up
|
||||
|
||||
tags: p, h1, img src, a href, div
|
||||
|
||||
boilerplate
|
||||
|
||||
3. Chrome Dev Tools
|
||||
|
||||
4. HTML continued
|
||||
|
||||
Title, span, text-align, br..
|
||||
|
||||
User input
|
||||
|
||||
Tables
|
||||
|
||||
5. CSS basics
|
||||
|
||||
Websites and the Internet
|
||||
|
||||
# A short overview of the Internet and WWW
|
||||
|
||||
© Buutti Oy, All Rights Reserved
|
||||
|
||||
# What is the Internet?
|
||||
|
||||
* Web != the Internet
|
||||
* Internet: connected networks that use the TCP/IP protocol
|
||||
* made out of billions of computers, cables and antennae directing data to the right direction.
|
||||
* World Wide Web: URL-based information system.
|
||||
* a big part of the Internet but it consists of other kinds of traffic, too:
|
||||
* Email
|
||||
* VoIP (Skype/Teamspeak)
|
||||
* File transfers between computers
|
||||
* remote connections to other computers
|
||||
* In other words, the internet is an infrastructure and WWW
|
||||
* is served via it
|
||||
|
||||
|
||||
|
||||
# What is the Web?
|
||||
|
||||
* World wide web (www) is the part of the Internet where browsers fetch and show websites
|
||||
* Browsers ( _rendering engine_ in parentheses)
|
||||
* Chrome (Blink)
|
||||
* Firefox (Gecko)
|
||||
* Edge (Blink)
|
||||
* Safari (WebKit)
|
||||
* WWW makes sites and applications accessible to all kinds of devices:
|
||||
* mobile phones, computers, smart watches, TVs...
|
||||
* For the websites to appear on all the different devices similarly, we need strict rules
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# Back-end vs Front-end
|
||||
|
||||
* Web development is split into _Back-end_ and _Front-end_
|
||||
* Front-end is the website users can actually see
|
||||
* visual elements of a website or app the user can interact with
|
||||
* Back-end is the invisible part
|
||||
* "server side" where user's data is stored
|
||||
* back-end is not interacted with directly, but gives and modifies its stored data based on user requests
|
||||
* _Full stack development_ refers to working on both back-end and front-end!
|
||||
|
||||
# What is a server or "the Cloud"
|
||||
|
||||
* A Server or "the cloud" is just another computer
|
||||
* server software is constantly running
|
||||
* Your own computer could be a server!
|
||||
* If you need to save an image, post a comment on a news website, or just load a website, you send a _request _ to a server
|
||||
* Server then gives an appropriate _response_ based on the request
|
||||
|
||||
|
||||
|
||||
# Backend
|
||||
|
||||
|
||||
|
||||
* Backend handles e.g.,
|
||||
* saving and fetching user data from a _database_
|
||||
* user authentication and connecting multiple users together (chat apps!)
|
||||
* Databases are used with _query languages_ like _SQL_
|
||||
* Back-end software can be written with various different programming languages
|
||||
* even with JavaScript! See: [Express](https://expressjs.com/)
|
||||
* Simple websites don't require a dedicated back-end
|
||||
|
||||
|
||||
|
||||
# Anatomy of a website
|
||||
HTML, CSS and JS
|
||||
|
||||
# Anatomy of a website
|
||||
|
||||
* Historically, websites looked something like this
|
||||
* [https://web.archive.org/web/19970129232848/http://www.iltalehti.fi/](https://web.archive.org/web/19970129232848/http://www.iltalehti.fi/)
|
||||
* Nowadays, a website can even be a full-blown application!
|
||||
* [https://open.spotify.com/](https://open.spotify.com/)
|
||||
* old and new sites alike are written in _HTML_ __, __ which describes the _structure _ of the site
|
||||
* In mid-90s, plain HTML was extended with _CSS_ _ _ to implement _styling_
|
||||
* The third building block of a website is JavaScript, or _JS,_ which is used to add _interactivity_
|
||||
|
||||
# HTML
|
||||
|
||||
|
||||
|
||||
HTML stands for _Hypertext markup language_
|
||||
|
||||
HTML defines the structure of a website
|
||||
|
||||
It tells what text, images and containers the website has
|
||||
|
||||
You might have seen raw html if your browser has failed due to a slow connection ->
|
||||
|
||||
[https://motherfuckingwebsite.com/](https://motherfuckingwebsite.com/)
|
||||
|
||||
# CSS
|
||||
|
||||
CSS stands for _Cascading style sheets_
|
||||
|
||||
CSS defines the __look __ of the website
|
||||
|
||||
It tells what sizes, colors and where everything is
|
||||
|
||||
[http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/)
|
||||
|
||||
|
||||
|
||||
# JavaScript
|
||||
|
||||
With a dedicated programming language, JavaScript, your website can become interactive
|
||||
|
||||
It allows you to do computations, send data to a server or fetch new data in real time
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# HTML basics
|
||||
|
||||
# Setting up
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
@ -0,0 +1,90 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 750 450" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
|
||||
<g transform="matrix(1.10215,0,0,1.10215,-63.6323,-115.02)">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(13,255,178);"/>
|
||||
<clipPath id="_clip1">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip1)">
|
||||
<g transform="matrix(2.57489,0,0,2.57489,-361.638,-258.165)">
|
||||
<text x="182.034px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;">W<tspan x="191.667px " y="170.366px ">e</tspan>b Client</text>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.10215,0,0,1.10215,173.804,-115.02)">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(13,255,178);"/>
|
||||
<clipPath id="_clip2">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip2)">
|
||||
<g transform="matrix(2.57489,0,0,2.57489,-359.101,-258.165)">
|
||||
<text x="182.034px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;">W<tspan x="191.667px " y="170.366px ">e</tspan>b Client</text>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.10215,0,0,1.10215,412.374,-115.02)">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(13,255,178);"/>
|
||||
<clipPath id="_clip3">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip3)">
|
||||
<g transform="matrix(2.57489,0,0,2.57489,-359.101,-258.165)">
|
||||
<text x="182.034px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;">W<tspan x="191.667px " y="170.366px ">e</tspan>b Client</text>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.10215,0,0,1.10215,-63.6323,-115.02)">
|
||||
<path d="M182.034,207.146L182.034,300" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||
<g transform="matrix(1.65073,0,0,1,-118.455,0)">
|
||||
<path d="M182.034,300L371.054,300" style="fill:none;stroke:white;stroke-width:1.67px;"/>
|
||||
</g>
|
||||
<path d="M276.094,387.126L457.758,387.126" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||
<g transform="matrix(1,0,0,1,123.002,0)">
|
||||
<path d="M371.054,300L371.054,358.506" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,0.314851,0,141.926)">
|
||||
<path d="M401.053,358.506L401.053,207.146" style="fill:none;stroke:white;stroke-width:3.08px;"/>
|
||||
</g>
|
||||
<path d="M401.053,254.802L553.145,254.802" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||
<path d="M553.145,254.802L553.145,358.506" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||
<g transform="matrix(1,0,0,1.53247,0,-110.298)">
|
||||
<path d="M612.234,300L612.234,207.146" style="fill:none;stroke:white;stroke-width:1.77px;"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(2.83792,0,0,2.83792,-288.573,-273.63)">
|
||||
<text x="174.563px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;fill:white;">H<tspan x="183.176px 189.833px 195.844px " y="170.366px 170.366px 170.366px ">TTP</tspan> P<tspan x="213.715px 218.719px " y="170.366px 170.366px ">ro</tspan>tocol</text>
|
||||
</g>
|
||||
<g transform="matrix(2.83792,0,0,2.83792,-264.741,-138.83)">
|
||||
<text x="194.942px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;fill:white;">Serv<tspan x="219.768px " y="170.366px ">e</tspan>r</text>
|
||||
<text x="202.064px" y="182.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;fill:white;">side</text>
|
||||
<text x="197.746px" y="194.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;fill:white;">script</text>
|
||||
</g>
|
||||
<g transform="matrix(1.10215,0,0,1.10215,343.926,124.88)">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(110,105,255);"/>
|
||||
<clipPath id="_clip4">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip4)">
|
||||
<g transform="matrix(2.57489,0,0,2.57489,-366.909,-258.243)">
|
||||
<text x="182.034px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;">W<tspan x="191.667px " y="170.366px ">e</tspan>b Serv<tspan x="232.676px " y="170.366px ">e</tspan>r</text>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.10215,0,0,1.10215,-63.6323,124.88)">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(255,163,254);"/>
|
||||
<clipPath id="_clip5">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip5)">
|
||||
<g transform="matrix(2.57489,0,0,2.57489,-366.909,-258.243)">
|
||||
<text x="188.066px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;">Database</text>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.2 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 248 KiB |
@ -0,0 +1,105 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 750 450" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
|
||||
<g transform="matrix(1.10215,0,0,1.10215,-63.6323,-117.155)">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(13,255,178);"/>
|
||||
<clipPath id="_clip1">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip1)">
|
||||
<g transform="matrix(2.57489,0,0,2.57489,-372.081,-275.239)">
|
||||
<text x="186.026px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">Application 1</text>
|
||||
<text x="200.706px" y="180.937px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">(User)</text>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.10215,0,0,1.10215,175.424,-117.155)">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(13,255,178);"/>
|
||||
<clipPath id="_clip2">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip2)">
|
||||
<g transform="matrix(2.57489,0,0,2.57489,-372.081,-275.239)">
|
||||
<text x="186.026px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">Application 1</text>
|
||||
<text x="200.706px" y="180.937px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">(User)</text>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.10215,0,0,1.10215,409.366,-117.155)">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(13,255,178);"/>
|
||||
<clipPath id="_clip3">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip3)">
|
||||
<g transform="matrix(2.57489,0,0,2.57489,-372.081,-275.239)">
|
||||
<text x="186.026px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">Application 1</text>
|
||||
<text x="200.706px" y="180.937px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">(User)</text>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.16187,1.32806,-1.32806,1.16187,156.137,-287.533)">
|
||||
<text x="177.449px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;fill:white;">Send r<tspan x="212.67px " y="170.366px ">e</tspan>quest</text>
|
||||
</g>
|
||||
<g transform="matrix(1.16187,1.32806,-1.32806,1.16187,218.301,-295.039)">
|
||||
<text x="179.063px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;fill:white;">R<tspan x="186.651px " y="170.366px ">e</tspan>ceiv<tspan x="214.389px " y="170.366px ">e</tspan> data</text>
|
||||
</g>
|
||||
<path d="M262.754,246.006L272.384,267.87L251.562,256.157L262.754,246.006Z" style="fill:white;"/>
|
||||
<path d="M130.252,111.152C130.252,111.152 225.778,216.481 260.203,254.439" style="fill:none;stroke:white;stroke-width:2.52px;"/>
|
||||
<g transform="matrix(0.960553,-0.0434951,-0.0434951,0.952041,243.351,10.996)">
|
||||
<g transform="matrix(1.04322,0.047661,0.047661,1.05255,-254.394,-23.1723)">
|
||||
<path d="M371.963,231.459L364.555,254.172L356.854,231.557L371.963,231.459Z" style="fill:white;"/>
|
||||
<path d="M363.631,111.152C363.631,111.152 364.189,197.547 364.438,236.041" style="fill:none;stroke:white;stroke-width:2.52px;"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(-0.960814,0.0372899,0.0496436,-0.95174,506.492,353.564)">
|
||||
<g transform="matrix(-1.0429,-0.0408614,-0.0543983,-1.05284,547.451,392.942)">
|
||||
<path d="M379.307,132.275L386.861,109.61L394.416,132.275L379.307,132.275Z" style="fill:white;"/>
|
||||
<path d="M386.861,252.634L386.861,127.742" style="fill:none;stroke:white;stroke-width:2.52px;"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(0.955913,-0.0486114,-0.0486114,0.9464,43.8756,13.9008)">
|
||||
<g transform="matrix(1.04886,0.0538742,0.0538742,1.0594,-46.7683,-17.0903)">
|
||||
<path d="M183.804,124.476L162.982,112.763L172.612,134.627L183.804,124.476Z" style="fill:white;"/>
|
||||
<path d="M175.163,126.194C207.176,161.492 291.23,254.172 291.23,254.172" style="fill:none;stroke:white;stroke-width:2.52px;"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(0.0458035,1.00176,-1.00206,0.0520008,735.141,-22.6338)">
|
||||
<g transform="matrix(0.0516801,-0.995581,0.995882,0.045521,-15.4516,732.923)">
|
||||
<path d="M619.042,134.996L629.727,113.627L608.358,124.312L619.042,134.996Z" style="fill:white;"/>
|
||||
<path d="M616.905,126.449C580.514,162.84 479.195,264.159 479.195,264.159" style="fill:none;stroke:white;stroke-width:2.52px;"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(-0.0843615,-0.9632,0.959546,-0.00948568,360.807,379.147)">
|
||||
<g transform="matrix(-0.0102544,1.04126,-1.03731,-0.0911981,396.992,-341.116)">
|
||||
<path d="M467.158,231.265L456.474,252.634L477.843,241.949L467.158,231.265Z" style="fill:white;"/>
|
||||
<path d="M469.295,239.812C503.593,205.514 594.862,114.245 594.862,114.245" style="fill:none;stroke:white;stroke-width:2.52px;"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(1.10215,0,0,1.10215,174.897,108.934)">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(110,105,255);"/>
|
||||
<clipPath id="_clip4">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip4)">
|
||||
<g transform="matrix(2.57489,0,0,2.57489,-366.909,-258.243)">
|
||||
<text x="203.919px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;">AP<tspan x="219.042px " y="170.366px ">I</tspan></text>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.10215,0,0,1.10215,173.845,194.609)">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(255,163,254);"/>
|
||||
<clipPath id="_clip5">
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip5)">
|
||||
<g transform="matrix(2.57489,0,0,2.57489,-366.909,-258.243)">
|
||||
<text x="183.212px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;">Application</text>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
Loading…
Reference in New Issue