CE419 Session 1: Fundamentals Web Programming Let's begin with the - - PowerPoint PPT Presentation

▶
ce419
SMART_READER_LITE
LIVE PREVIEW

CE419 Session 1: Fundamentals Web Programming Let's begin with the - - PowerPoint PPT Presentation

Aug 21, 2023 372 likes •908 views

CE419 Session 1: Fundamentals Web Programming Let's begin with the premise that everything you've known up to this point is wrong. 4 Story of the Web The World Wide Web has gone from never heard of it to cant live without

slide-1
SLIDE 1

CE419 Web Programming

Session 1: Fundamentals

slide-2
SLIDE 2

Let's begin with the premise that everything you've known up to this point is wrong.

4

slide-3
SLIDE 3

Story of the Web

  • The World Wide Web has gone from “never heard of it” to

“can’t live without it” in 25 years.

  • Let’s take a look at its defining moments.

5

slide-4
SLIDE 4

The Early Years AOL, CompuServe, BBS

1989 — 1995

6

slide-5
SLIDE 5

Tim Berners-Lee “Vague but exciting”

1989

7

slide-6
SLIDE 6

Mosaic web browser 1.0

1993

8

slide-7
SLIDE 7

The Early Web Brands yahoo.com, match.com

1994

9

slide-8
SLIDE 8

Netscape & Web Standards

1994

10

slide-9
SLIDE 9

The Biggest Launch in Software History

1995

11

slide-10
SLIDE 10

From Boom to Bust

1995 — 2000

12

slide-11
SLIDE 11

The e-Commerce Era

1995

13

slide-12
SLIDE 12

Google is Born

1997

14

slide-13
SLIDE 13

Browser Wars Internet Explorer 5.0

1997

15

slide-14
SLIDE 14

Napster & File Sharing

1999

16

slide-15
SLIDE 15

The Dot-Com Crash The bubble has burst.

2000

17

slide-16
SLIDE 16

People-Powered Web

2000 — 2004

18

slide-17
SLIDE 17

The Web Speeds Up First Broadband Access

2000

19

slide-18
SLIDE 18

Social Knowledge Sharing

2001

20

slide-19
SLIDE 19

The First Social Networks

2003

21

slide-20
SLIDE 20

Voice & Video Call Skype

2003

22

slide-21
SLIDE 21

The Pirate Bay Illegal Downloading

2003

23

slide-22
SLIDE 22

Web 2.0 Collaborative Web

2004 — 2007

24

slide-23
SLIDE 23

The Dawn of Facebook 1.2 billion users now.

2004

25

slide-24
SLIDE 24

Google, Google, Google! Gmail, Google Maps

2004

26

slide-25
SLIDE 25

Video Moves Online YouTube

2005

27

slide-26
SLIDE 26

The Twitter Age Begins Hand cannot erase.

2006

28

slide-27
SLIDE 27

The Mobile Web

2007 — 2010

29

slide-28
SLIDE 28

Cloud Gets Serious SaaS

2007

30

slide-29
SLIDE 29

Smartphones Take Center Stage

2007

31

slide-30
SLIDE 30

First Working Draft of HTML5

2008

32

slide-31
SLIDE 31

Photo Sharing Instagram, Pinterest, Selfie

2010 — 2013

33

slide-32
SLIDE 32

Security & Privacy Concerns

Today

34

slide-33
SLIDE 33

It’s huge.

35

slide-34
SLIDE 34

Key Layers of the Internet

36

slide-35
SLIDE 35

Application Architectures

  • Terminals & Mainframes
  • Traditional Applications

37

slide-36
SLIDE 36

Client-Server Architecture

38

slide-37
SLIDE 37

39

slide-38
SLIDE 38

Uniform Resource Locator

40

slide-39
SLIDE 39

Request & Response

  • http://ce.sharif.edu/courses/40419-1/home/

GET /courses/40419-1/home/ HTTP/1.1 Host: ce.sharif.edu HTTP/1.1 200 OK Date: Sun, 01 Feb 2015 07:13:09 GMT Content-Type: text/html <!DOCTYPE html> <html> <head> <title>Welcome to CE419</title> <meta content="i'm bored" /> </head>

Request Response

41

slide-40
SLIDE 40

Request & Response

HTTP Protocol HTTP Protocol

42

slide-41
SLIDE 41

Why use web apps?

  • Only need a HTML-capable browser, everything else is

done by the server.

  • Zero client administration cost.
  • Access everywhere (with an internet connection)
  • Instantaneous application updates.

43

slide-42
SLIDE 42

Web Browser HTML, CSS, JS

A deeper look

44

slide-43
SLIDE 43

Client Side: HTML

The Matrix Plot Thomas Anderson is a computer programmer who maintains a double life as "Neo" the hacker. Another hacker named Trinity contacts Neo and informs him that a man named Morpheus can tell him the meaning of "the Matrix”. Cast Keanu Reeves as Thomas A. Anderson / Neo Laurence Fishburne as Morpheus Production In 1994, the Wachowskis presented the script for the film Assassins to Warner Brothers.

45

slide-44
SLIDE 44

Client Side: HTML

<h1>The Matrix</h1> <h2>Plot</h2> <p>Thomas Anderson is a computer programmer who maintains a double life as "Neo" the hacker. Another hacker named <strong>Trinity</strong> contacts Neo and informs him that a man named Morpheus can tell him the meaning of <em>the Matrix</em>.</p> <h2>Cast</h2> <ul> <li>Keanu Reeves as Thomas A. Anderson / Neo</li> <li>Laurence Fishburne as Morpheus</li> </ul> <h2>Production</h2> <p>In 1994, the Wachowskis presented the script for the film Assassins to

46

slide-45
SLIDE 45

Client Side: HTML

47

slide-46
SLIDE 46

Client Side: CSS

html { font-family: Georgia; } h1 { color:#00FF00; background:black; font-family:Monaco; } h2 { color: blue; border-bottom: 3px double blue; }

48

slide-47
SLIDE 47

Client Side: CSS

49

slide-48
SLIDE 48

Client Side: Javascript

  • bject.onclick = function(){

alert('Why are you clicking?!'); };

50

slide-49
SLIDE 49

Server Side

51

slide-50
SLIDE 50

Server Side

  • Programming languages, frameworks, web servers,

database engines, cache servers, etc.

52

slide-51
SLIDE 51

Server Side

  • A computer code that generates a response.

def hello_world(request): name = request.GET['name'] return """HTTP/1.1 200 OK Content-Type: text/html Hello, {}""".format(name)

53

slide-52
SLIDE 52

Let’s talk about the course!

55

slide-53
SLIDE 53

Course Structure

  • Client-side Programming: HTML, CSS, Javascript
  • Quick Overview of Python Programming Language
  • Server-side Programming
  • Django Web Framework
  • Modern Web Development: Real-time applications
  • Advanced Databases: MongoDB, Redis
  • A bunch of advanced topics!

56