{Introduction to Web Dev}
Welcome to the Wonderful World of Web Dev!
1
The internet
3
Web vs. Internet
5
The Web Architecture
Summary
2
Unveiling the Web
4
Explaining URLs
6
Protocols
7
Apis
8
Databases
9
Understanding Web Development
# The Internet
1.The Internet: Our Global Information Highway
What Exactly is the Internet?
# The Internet
The Internet: A Global Network
# The Internet
How Does the Internet Actually Work?
# The Internet
The Internet is a global network connecting millions of computers worldwide, enabling them to communicate with each other and allowing people to share information seamlessly.
How Does the Internet Actually Work?
When you send a request (for example, to visit a website), your device sends this request in the form of small packets of data across a series of networks (via cables, routers and satellites).
1.Data transmission
These packets pass through several “nodes” (routers) that direct them to the computer-server containing the website or information you want.
2.Route to server
Once the request has been received, the server sends the response (the data from the website) in packets to your device, following the reverse path.
3. Server response
Your device receives the packets and assembles them to display the web page content you requested.
4.Reconstruction and display
# The Internet
# Unveiling the Web
2.Unveiling the Web: Your Window to Online Content
The web
The Web, or World Wide Web, is a system that allows people to access and interact with information over the Internet. It connects pages, images, videos, and other resources through links, making it easy to surf and navigate. By using web browsers like Chrome or Firefox, users can view websites and use online services, enabling everything from simple searches to complex applications, all connected in a vast network.
# Unveiling the Web
# Web vs. Internet
3. Web vs. Internet: Understanding the Difference
Analogie Time ✨
Imagine you’re on a road trip...
# Web vs. Internet
# Web vs. Internet
The Highway (Internet)
The Internet is like a giant network of highways and roads that connect cities and towns. It’s the infrastructure that lets you travel from one place to another, carrying information, much like vehicles carry people and goods.
The Cars (Web)
Now, think of websites as the cars traveling on these roads. Each car (or website) is carrying information or content, like people or cargo, from one place to another.
4.Explaining URLs: Your Website Address Explained
# Explaining URLs
# The Web Architecture
5.The Web Architecture
The Web can be summarized as a series of interactions between two types of systems, clients and servers.
Server
A server is a powerful computer or system that stores websites, applications, databases, and files. Its job is to “serve” data to other computers when they request it. For example, when you visit a website, you’re actually asking the server that hosts that site to send the web page to your device.
# The Web Architecture
Client
A client is any device (like your laptop, smartphone, or tablet) that requests information from a server. For example, when you use a web browser (like Chrome or Safari) to access a website, your browser is acting as the client, sending a request to the server for the website’s data.
# The Web Architecture
Analogy Time ✨
Message Passing
# The Web Architecture
In short
- The client requests information.
- The server responds with the requested information.
# The Web Architecture
# Protocols
6.Protocols: The Language of the web
What is
a Protocol ?
A protocol is a set of rules that defines how data is transmitted and communicated between devices on a network. Think of it as a common language that computers use to understand each other and exchange information efficiently and securely.
# Protocols
Protocols ensure that data is sent, received, and understood correctly across different systems, making the Internet a reliable and secure way to share information.
# Protocols
| Protocole | HTTP | HTTPS | FTP |
|---|---|---|---|
| Nom complet | Hypertext Transfer Protocol | Hypertext Transfer Protocol Secure | File Transfer Protocol |
| Purpose | Transfers web pages and data | Securely transfers web pages and data | Transfers files |
| Port | Port 80 | Port 443 | Port 21 |
| Usage | general web browsing | secure web browsing | Used to upload/download files |
| Data Protection | Vulnerable to data interception and tampering | Protects against data intercept and tampering with encryption | Vulnerable unless using secure FTP options |
| Speed | faster than HTTPS | slower than HTTP | Depends on connection |
| Common Use Cases | Accessing public information | E-commerce, banking, secure web apps | File transfers, web hosting, and large files |
# APIs
7.APIs: Connecting the Dots Between Applications
What is an API?
An API (Application Programming Interface) is a set of rules and tools that allows different software applications to communicate with each other.
# APIs
Analogie Time ✨
Imagine you’re at a restaurant. You, the customer, place an order with the waiter (the API). The waiter takes your request to the kitchen (the server), where the food (data) is prepared, and then brings it back to you.
# APIs
# Databases
8.Databases: The Organizers of Our Digital World
# Databases
What Is a Database?
A database is an organized collection of data that is stored and managed in a way that makes it easy to access, update, and retrieve.
Analogie Time ✨
Think of a database like a super-organized drawer system...
# Web vs. Internet
You know how putting similar items (like pens, paper clips, sticky notes) into labeled drawers helps you find them fast?
A database does the same thing — but with information — so you can store a lot of things and always find what you need quickly.
1. Have You Ever Kept a Journal or Diary?
Who here has kept a journal or diary? What do you write about, and how do you organize your entries ?
# Databases
1. Have You Ever Kept a Journal or Diary?
Just like a diary keeps thoughts organized, a database stores information in an organized way, making it easy to retrieve later!
# Databases
2. What Happens When You Search for a Book?
When you look for a book in a library, how do you find it? Do you use a catalog or ask a librarian?
# Databases
2. What Happens When You Search for a Book?
Libraries use catalogs, just as databases organize data so users can find what they need without manually searching through everything.
# Databases
3. How Do You Manage Your Contacts?
How do you keep track of your friends' phone numbers or email addresses? Do you have a contact list on your phone?
# Databases
3. How Do You Manage Your Contacts?
Just like your contact list stores important information about people, a database holds data about various entities, such as customers or products.
# Databases
4.Have You Ever Used a Recipe Book?
When cooking, do you have a favorite recipe book? How do you find specific recipes when you want to cook something?
# Databases
4.Have You Ever Used a Recipe Book?
Just as a recipe book organizes recipes for easy access, databases store structured information that can be retrieved when needed.
# Databases
5. What Would Happen If You Lost Your Important Files?
Have you ever lost important documents or files? How did that make you feel?
# Databases
5. What Would Happen If You Lost Your Important Files?
Losing data is frustrating! Databases are designed to keep data safe and organized so it’s always available.
# Databases
# Understanding Web Development
9. Understanding Web Development: Bringing Websites to Life
Web Development Overview
The front-end is the part of a website or application that users interact with directly. It includes everything you see on the screen, like text, images, buttons, and forms, and is built using HTML, CSS, and JavaScript.
1.Front-end
The back-end is the behind-the-scenes part of a website or application that handles data, logic, and server interactions. It stores, processes, and manages data and makes sure everything on the front-end works smoothly. Common back-end languages include Node.js, Python, and PHP.
2.Back-end
# Understanding Web Development
Fullstack
Fullstack refers to a developer who can work on both the front-end and back-end of a website or application. A fullstack developer is skilled in creating the user interface and experience (front-end) as well as handling data, server logic, and databases (back-end). This allows them to build complete, functional applications from start to finish.
# Understanding Web Development
# Analogie
Let's Continue our Analogie ✨
Where we were Imagining ourselves on a road trip...
# Analogie
The Highway (Internet)
The Internet is like a giant network of highways and roads that connect cities and towns. It’s the infrastructure that lets you travel from one place to another, carrying information, much like vehicles carry people and goods.
The Cars (Web)
Now, think of websites as the cars traveling on these roads. Each car (or website) is carrying information or content, like people or cargo, from one place to another.
# Analogie
Destinations (Web Pages)
When you visit a website, it’s like reaching a destination on this highway. You might take many roads to get there, but each destination—each website—is unique.
Traffic Rules (Protocols)
Just like highways have rules to keep traffic moving smoothly, the Internet has protocols (like HTTP or HTTPS) that manage how information moves around. These ensure that data reaches its destination without ‘traffic jams’ or collisions
WEB DEV
INTRODUCTION ENDS
Introduction to web dev
By Fatima BENAZZOU
