education
/
webdev-basics
12
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'e5ffc8a78a'
${ noResults }
webdev-basics/1-web-introduction.md

7.1 KiB
Raw Blame History

marp paginate math theme title
true true mathjax buutti 1. Introduction to the Web

Introduction to the Web

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?

  • 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

  • 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?

  • 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
Browser Engine
w:80 Chrome Blink
w:80 Edge Blink
w:80 Firefox Gecko
w:80 Safari WebKit

Frontend vs Backend

  • Web development is split into 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"

  • 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

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
  • Backend software can be written with various different programming languages
    • even with JavaScript! See: Express
  • Simple websites don't require a dedicated backend

Anatomy of a website

Building blocks of a website

HTML

<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>

w:340

CSS

  • 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
body {
  background-color: lightblue;
}
h1 {
  color: white;
  text-align: center;
}
p {
  font-family: verdana;
}

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

w:300

w:350

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 — 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

w:800

Third party APIs

w:900