From ec015a3c0db5b31eed474d2ef0f7aa85102db380 Mon Sep 17 00:00:00 2001 From: borb Date: Mon, 7 Jul 2025 20:05:39 +0300 Subject: [PATCH] update web and http slides --- 1-web-introduction-slides.html | 37 +++++++++++++++++----------------- 1-web-introduction.md | 4 +--- 2-http-slides.html | 36 +++++++++++++++++---------------- 2-http.md | 4 +++- 4 files changed, 42 insertions(+), 39 deletions(-) diff --git a/1-web-introduction-slides.html b/1-web-introduction-slides.html index 77fe2d2..fea95ef 100644 --- a/1-web-introduction-slides.html +++ b/1-web-introduction-slides.html @@ -13,10 +13,10 @@ /* buutti.css */ /* @theme buutti */div#\:\$p>svg>foreignObject>section .columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns12{display:grid;grid-template-columns:1fr 2fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns21{display:grid;grid-template-columns:2fr 1fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns32{display:grid;grid-template-columns:3fr 2fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns23{display:grid;grid-template-columns:2fr 3fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns111{display:grid;grid-template-columns:1fr 1fr 1fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .centered{display:flex;flex-direction:column;justify-content:center;text-align:center}div#\:\$p>svg>foreignObject>section .tableborderless td,div#\:\$p>svg>foreignObject>section th{border:none!important;border-collapse:collapse}div#\:\$p>svg>foreignObject>section.extra{background-color:#5d275d;background-image:linear-gradient(to bottom,#401a40,#1d0c1d);color:white}div#\:\$p>svg>foreignObject>section.extra a{color:rgb(145,255,209)}div#\:\$p>svg>foreignObject>section.exercise{background-color:#29366f;background-image:linear-gradient(to bottom,#20636a,#173742);color:white}div#\:\$p>svg>foreignObject>section.exercise a{color:rgb(211,173,255)} -/* @theme ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}
+/* @theme 6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}

Introduction to the Web

-
+

Contents

  1. Web and the Internet
    2. @@ -25,10 +25,10 @@
  2. Web APIs
-
+

Web and the Internet

-
+

What is the Internet?

@@ -61,7 +61,7 @@
  • In other words, the Internet is an infrastructure and WWW is served via it
    • -
    +

    What is the Web?

    @@ -110,7 +110,7 @@
    -
    +

    Frontend vs Backend

    • Web development is split into frontend and backend
      • @@ -128,7 +128,7 @@
    • Full stack development refers to working on both backend and frontend!
    -
    +

    What is a server or "the cloud"

    @@ -148,7 +148,7 @@
    -
    +

    Backend

    @@ -173,10 +173,10 @@
    -
    +

    Anatomy of a website

    -
    +

    Building blocks of a website

    • Historically, websites looked something like this @@ -194,7 +194,7 @@
    • The third building block of a website is JavaScript, or JS, which is used to add interactivity
    -
    +

    HTML

    @@ -217,7 +217,7 @@
    -
    +

    CSS

    @@ -248,7 +248,7 @@
    -
    +

    JavaScript

    • With a dedicated programming language, JavaScript, your website can become interactive
      • @@ -263,10 +263,10 @@
    -
    +

    Web APIs

    -
    +

    What is a Web API

    • API (Application Programming Interface) defines a way of communicating between applications
      • @@ -276,7 +276,7 @@
    • 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 — called on the web browser (client side): @@ -297,17 +297,18 @@
    -
    +

    API communication

    -
    +

    Third party APIs

    diff --git a/1-web-introduction.md b/1-web-introduction.md index 221d2e2..21090cf 100644 --- a/1-web-introduction.md +++ b/1-web-introduction.md @@ -180,7 +180,6 @@ p { } ``` -
    @@ -192,8 +191,6 @@ p {
    - - ### JavaScript * With a dedicated programming language, JavaScript, your website can become interactive @@ -244,6 +241,7 @@ p { * 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) +* [JSON placeholder API](https://jsonplaceholder.typicode.com/)
    diff --git a/2-http-slides.html b/2-http-slides.html index 1c91053..82bf445 100644 --- a/2-http-slides.html +++ b/2-http-slides.html @@ -13,10 +13,10 @@ /* buutti.css */ /* @theme buutti */div#\:\$p>svg>foreignObject>section .columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns12{display:grid;grid-template-columns:1fr 2fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns21{display:grid;grid-template-columns:2fr 1fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns32{display:grid;grid-template-columns:3fr 2fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns23{display:grid;grid-template-columns:2fr 3fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns111{display:grid;grid-template-columns:1fr 1fr 1fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .centered{display:flex;flex-direction:column;justify-content:center;text-align:center}div#\:\$p>svg>foreignObject>section .tableborderless td,div#\:\$p>svg>foreignObject>section th{border:none!important;border-collapse:collapse}div#\:\$p>svg>foreignObject>section.extra{background-color:#5d275d;background-image:linear-gradient(to bottom,#401a40,#1d0c1d);color:white}div#\:\$p>svg>foreignObject>section.extra a{color:rgb(145,255,209)}div#\:\$p>svg>foreignObject>section.exercise{background-color:#29366f;background-image:linear-gradient(to bottom,#20636a,#173742);color:white}div#\:\$p>svg>foreignObject>section.exercise a{color:rgb(211,173,255)} -/* @theme glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7 */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}
    +/* @theme tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}

    HTTP

    -
    +

    Contents

    1. What is HTTP?
      2. @@ -25,7 +25,7 @@
    2. 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
      • @@ -42,7 +42,7 @@
    -
    +

    But what is TCP/IP?

    -
    +

    HTTP structure

    @@ -77,7 +77,7 @@
    -
    +

    HTTP requests

    • HTTP defines a set of request methods
      • @@ -120,7 +120,7 @@
    -
    +

    Note: URI vs URL

    • The website address is more formally known as the URL (uniform resource locator) @@ -131,12 +131,14 @@
    • It is a subset of an URI (uniform resource identifier)
        -
      • This identifies a resource on a webpage
        • +
      • This identifies any type of a resource
        • +
      • mailto:info@example.com (an email address)
        • +
      • https://www.example.com/index.html#date (A section of a website)
    -
    +

    HTTP request format

    • Request line: <request method> <request URI> @@ -164,7 +166,7 @@
    -
    +

    HTTP request examples

    @@ -209,7 +211,7 @@
    -
    +

    HTTP response format

    • HTTP responses have the following format: @@ -237,7 +239,7 @@
    -
    +

    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: @@ -257,7 +259,7 @@
    -
    +

    Status codes for a CRUD app

    • Your APIs should use the following status codes for responses to CRUD operations
      • @@ -300,10 +302,10 @@
    -
    +

    IP and ports

    -
    +

    IP addresses

    • Every node, or host on a computer network needs an IP (Internet Protocol) address @@ -316,7 +318,7 @@
    • 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

      @@ -327,7 +329,7 @@
    • Computers have several different ports at their disposal
    -
    +

    Reserved ports

    diff --git a/2-http.md b/2-http.md index d5a1dca..ddf9e15 100644 --- a/2-http.md +++ b/2-http.md @@ -74,7 +74,9 @@ title: 2. HTTP * `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 + * This identifies any type of a resource + * `mailto:info@example.com` (an email address) + * `https://www.example.com/index.html#date` (A section of a website) ### HTTP request format