Web Design Development Foundation-Web Technology Fundamentals

We use the Internet for various purposes like Banking, Shopping, Ticket Booking, Music/Entertainment, and Social Media, but do you know how the web works? Here I introduce the technology that makes the web run, the terminology involved, and how it all comes together to power the websites we know and love. Will cover various terms/technologies involved like (HTML, CSS, JavaScript, URL, DNS, HTTP), and explains what separates the front end (what we see) from the back end (what we don't) on the web, databases, servers and the technology that makes the web work.

Topics include

1. Course introduction
2. Introduction to web world
3. Introduction to Front-End technology
4. Introduction to Back-End technology
5. Other supporting technologies
6. What's the next Step?

Section 1. Course Introduction

1.1. Welcome

Hi All, I'm Dinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional, I wanna welcome you to Web Design Development Foundation-Web Technology Fundamentals. This content is designed to introduce the fundamental concepts, surrounding terminology, technology, techniques, terms that are used to create and run the web. For anyone new to the web the vast number of terms, abbreviations, and processes involved can be a little bit overwhelming, disturbing. It's my goal to explain in the core, basic terms how the web works, Client, Servers, Browsers, Front End, Back End, and various terminology involved, also how the technology all fits together.

This course contents roadmap to becoming a Web Designer/Developer.

1.2. Who is this for?

This course is for every Web/Internet User, fresher as well as an experienced Web Designer/Developer who wants to learn-brush up-cover up various terms/techniques/acronyms/abbreviations used in Web/Internet Design/Development world.

Section 2. Introduction to Web World

2.1. How does the web work?

The Internet

Massive networks of millions of computers all over the world that use to share and transmit information through the following protocols/mediums:

• Email
• Sms messaging
• Application data
• World Wide Web

World Wide Web (WWW)

• Runs over the Internet
• Transfer data using HTTP (HyperText Transfer Protocol)

The Web

Communication/series of interactions between Clients & Servers

Client

Devices that request and render web content. Some of the popular clients are Browsers, Mobile Apps, Screen Reader Devices, etc

Server

Applications that deliver Web Contents, Services to Clients

2.2. Client-Server Interaction Model

Browser

• The browser is Software/application that helps to visit, view, accessing information, and make/take the best use of websites/web pages
• Popular browsers are:
  • Google Chrome
  • Mozilla Firefox
  • Internet Explorer
  • Safari
  • Opera

Request <--> Response Mechanism

Syntax & Example:

1. User Type in 'URL (Uniform Resource Locator)' like 'http://www.yahoo.com' -> 
2. URL passed to 'DNS (Domain Name Server)' -> 
3. DNS translates URL into 'IP (Internet Protocol)' address ('172.16.0.0') -> 
4. Browser use DNS to locate host server and send request of content (in the form of HTML page, Images, CSS, JavaScript)

Static Sites

Simply shows content (which is not change frequently) requested by the client without any additional processing (Static sites pages usually consists of Front end technologies like HTML, CSS, JavaScript)

Dynamic Sites

First Business Logic execute by Web Applications like ASP, PHP, Ruby on Rails, etc. than browser shows content (latest/updated) requested by the client (Dynamic sites pages usually consists of Front end technologies like HTML, CSS, JavaScript, in combination with some Back end technology like ASP, PHP, Ruby on Rails, etc.)

2.3. DNS (Domain Name Server)

• Every site have unique IP (Internet Protocol) address used to identify location (http://www.google.com = 169.20.127.243)
• DNS (Domain Name Server) is like Internets phone book which stores unique website and its IP (Internet Protocol) address for each and every website
• IP Address == Domain Name Server (172.16.0.0 == domain name http://www.yahoo.com or so)

2.4. Internet Protocol

• Protocols are simple languages/standards/set of rules through which computers share the information which each other
• Internet wouldn't work at all without Protocols
• Different/multiple layers of protocols
  • Application Layer (creation & sharing of data over the web)
    • HTTP (Hyper Text Transfer Protocol)
    • FTP (File Transfer Protocol)
    • SMTP (Simple Mail Transfer Protocol)
    • DNS (Domain Name Server)
    • RIP (Routing Information Protocol)
    • SNMP (Simple Network Management Protocol)
  • Transport Layer (communication)
    • TCP (Transmission Control Protocol and Internet Protocol created in 1973)
    • UDP (User Datagram Protocol)
  • Internet Layer (address and routing structure of data)
    • IPv4 (Internet Protocol Version 4)
    • IPv6 (Internet Protocol Version 6)

2.5. HTTP (HyperText Transfer Protocol)

• Standard protocol for transferring data/resources over the Web
• In the case of HTTP, Browsers are HTTP Clients, send HTTP requests and Servers are HTTP Servers, send the HTTP response to transfer data with a standardized format
• HTTP is a one-way stateless protocol, it simply means that once the REQUEST is SEND & RECEIVED then that state is forgotten ie discarded by the browser and web server, which makes HTTP very much simple and efficient
• Due to its one-way stateless nature it's difficult to send and receive OR upload and download large files with HTTP.

Some Common web protocols

• FTP (File Transfer Protocol) Typically used to transfer large files and its ideal for uploading or downloading files to your site
• SMTP (Simple Mail Transfer Protocol) The Standard web protocol for sending email across the web. Most email clients use SMTP for sending and receiving emails
• POP (Post Office Protocol) POP is typically used to receive emails
• RTP (Real-Time Transfer Protocol) Standard protocol for delivering/serving audio or video over the web. Its commonly used in voice-over and chat applications
• RTMP (Real Time Messaging Protocol) Developed by Macromedia (Adobe Corp.) for streaming audio-video and data over the Internet, between a Flash player and a server
• HTTPS (Hypertext Transfer Protocol Secure) HTTP layered with a security protocol. Usually used for e-commerce or other secure transactions, payment gateways

2.6. URL (Uniform Resource Locator)

URL Uniform Resource Locator OR (Universal Resource Locator) specifies its location on a computer network (web address, web path, web site name).

Anatomy/contains of URL

URL = http://www.yahoo.com URL = https://www.yahoo.com

URL Parts	Meaning/Description
http/HTTP / https/HTTPS	protocol
//www.yahoo.com:8080	resource name
www	sub-domain (Most cases sub-domain is not required ie you can type http://yahoo.com or https://yahoo.com)
yahoo	domain name
com	top-level domain

URL path/port

http://www.yahoo.com/products/product1.html or https://www.yahoo.com/products/product1.html

http://www.yahoo.com:80 (80 = port number (80 is default port))

Top level domain

• .com
• .net
• .org
• .info

2.7. How browser works

The browser uses HTTP to communicate with the Web Server and request pages, content. Browsers rendering engine translates/renders pages and displays the contents as per support.

Why browsers behave differently

• Browsers developed independently of each other
• Multiple rendering engines drive page layout
• DOM (Document Object Model) support varies
• Browsers use independent JavaScript engines

Common rendering engines

Engine	Browser
Trident	Internet Explorer, (AOL - America Online), Windows Mobile
Presto	Opera
Gecko	Mozilla FF, Camino
Webkit	Safari, Google Chrome, WebOS
Blink	Google Chrome, Opera 14+

2.8. W3C and Web standards (World Wide Web Consortium)

• W3C (World Wide Web Consortium) is the main International Standards Organization for the World Wide Web help in developing protocols and guidelines that ensure long-term growth for the Web
• W3C (World Wide Web Consortium) started in the year 1994 to issue recommendations for web technologies
• Check web standards for consistent design (The Web Standard Project): https://www.webstandards.org/
• W3C website: https://www.w3.org/

2.9. Web Server

Websites are hosted/uploaded on a Web Server. A web server is nothing more than a normal computer installed with specialized software and components for a specific use. Web stacks are groups of software that work with each other to build and process websites (static & Dynamic websites).

2.10. Web stacks

Web stacks consist of:

• OS (Operating System)
• Web Server
• Database Server
• Programming Language

Common web stacks

Web Stack	Full Form (Technologies)
LAMP	Linux Apache MySql Php / Linux Apache MySql Perl/Python
MAMP	Macintosh Apache MySql Php
WAMP	Windows Apache MySql Php
WISA	Windows IIS MS SQL .NET
MARS	MySql Apache Ruby Solaris

Section 3. Introduction to Front-End Technology

3.1. Front End Design (Client-Side)

Front End (Client-Side) Design refers to:

• The visual part/User Interface layer (what we see) of websites/applications
• Front End Design is typically the UI, Layout, typography/fonts, images and many other visual elements/aspects shown on the web page and their styling
• One can also refer to it as usability and user experience design as well

3 pillars / core Languages/technologies used for Frond End Web Design/Development

1. HTML (HyperText Markup Language) - Markup language, Essential Page Structure/Content, Readable and convey structure to the user, Text Layout Model, page Mark-up, Text, Tags, Data, details for pages, Images, Tables, Anchor Links, Forms
2. CSS (Cascading Style Sheet) - St