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 “can’t live without it” in 25 years. • Let’s take a look at its defining moments. � 5
The Early Years 1989 — 1995 AOL, CompuServe, BBS � 6
Tim Berners-Lee 1989 “Vague but exciting” � 7
Mosaic web browser 1993 1.0 � 8
The Early Web Brands 1994 yahoo.com, match.com � 9
Netscape & Web 1994 Standards � 10
The Biggest Launch in 1995 Software History � 11
From Boom to Bust 1995 — 2000 � 12
The e-Commerce Era 1995 � 13
Google is Born 1997 � 14
Browser Wars 1997 Internet Explorer 5.0 � 15
Napster & File Sharing 1999 � 16
The Dot-Com Crash 2000 The bubble has burst. � 17
People-Powered Web 2000 — 2004 � 18
The Web Speeds Up 2000 First Broadband Access � 19
Social Knowledge 2001 Sharing � 20
The First Social 2003 Networks � 21
Voice & Video Call 2003 Skype � 22
The Pirate Bay 2003 Illegal Downloading � 23
Web 2.0 2004 — 2007 Collaborative Web � 24
The Dawn of Facebook 2004 1.2 billion users now. � 25
Google, Google, Google! 2004 Gmail, Google Maps � 26
Video Moves Online 2005 YouTube � 27
The Twitter Age Begins 2006 Hand cannot erase. � 28
The Mobile Web 2007 — 2010 � 29
Cloud Gets Serious 2007 SaaS � 30
Smartphones Take 2007 Center Stage � 31
First Working Draft of 2008 HTML5 � 32
Photo Sharing 2010 — 2013 Instagram, Pinterest, Selfie � 33
Security & Privacy Today Concerns � 34
It’s huge. � 35
Key Layers of the Internet � 36
Application Architectures • Terminals & Mainframes • Traditional Applications � 37
Client-Server Architecture � 38
� 39
Uniform Resource Locator � 40
Request & Response • http://ce.sharif.edu/courses/40419-1/home/ Request 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> Response � 41
Request & Response HTTP Protocol HTTP Protocol � 42
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
Web Browser A deeper look HTML, CSS, JS � 44
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
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
Client Side: HTML � 47
Client Side: CSS html { font-family: Georgia; } h1 { color:#00FF00; background:black; font-family:Monaco; } h2 { color: blue; border-bottom: 3px double blue; } � 48
Client Side: CSS � 49
Client Side: Javascript object.onclick = function(){ alert('Why are you clicking?!'); }; � 50
Server Side � 51
Server Side • Programming languages, frameworks, web servers, database engines, cache servers, etc. � 52
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
Let’s talk about the course! � 55
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
Recommend
More recommend
