1. 20-753: Fundamentals of Web Programming 1 Lecture 1: Introduction Fundamentals of Web Programming Lecture 1: Introduction

2. 20-753: Fundamentals of Web Programming 2 Lecture 1: Introduction Today’s Topics Background Survey Overview of the Course Web Programming Defined

3. 20-753: Fundamentals of Web Programming 3 Lecture 1: Introduction Course Format Lectures MWF 1:30-2:50 (in 146, except 5/17: Mellon Aud) Regular TA Office Hours (TBA) Instructor Office Hours by Appointment Best Way to Reach Us: ehn@cs.cmu.edu kczuba@cs.cmu.edu

4. 20-753: Fundamentals of Web Programming 4 Lecture 1: Introduction Course Syllabus Web Site/Page Design (2 lectures) HTML (4 lectures) WWW Protocols (2 lectures) Programming Fundamentals –Server-side scripts (3 lectures) –Client-side scripts (2 lectures) –Java apps/applets/etc. (3 lectures) Mini-Project (4 lectures)

5. 20-753: Fundamentals of Web Programming 5 Lecture 1: Introduction Grading Background Exercises 15% Homeworks25% Mini-Project30% Final Examination30% TOTAL 100%

6. 20-753: Fundamentals of Web Programming 6 Lecture 1: Introduction Course Web Site Contact Information Syllabus Detailed Schedule eLibrary Chat Room Pending: FAQ, Tutorials, …

7. 20-753: Fundamentals of Web Programming 7 Lecture 1: Introduction Surviving the Course Lectures will be structured to include prerequisite concepts, main lecture, demos, and on-line exercises Don’t fall behind - schedule meetings with TA or instructor We want to know where you need extra help… or an extra challenge!

8. 20-753: Fundamentals of Web Programming 8 Lecture 1: Introduction Web Programming Defined What are Programs? Why is Web Programming Different? Web Programming Basics –Web Pages (content delivery) –Elements of Web Pages (content) –URLs, HTTP, CGI (content requests)

9. 20-753: Fundamentals of Web Programming 9 Lecture 1: Introduction What are Programs? A program is a sequence of written instructions which is compiled and executed by a computer A script is a program which runs directly without pre-compilation Web pages can be thought of as scripts which are interpreted by web browsers

10. 20-753: Fundamentals of Web Programming 10 Lecture 1: Introduction Programs vs. Scripts ScriptInterpreter (executed by CPU) Result Compiler Program Binary Code (executed by CPU) Result HTMLBrowser (executed by CPU) Output

11. 20-753: Fundamentals of Web Programming 11 Lecture 1: Introduction Browsers and Plug-ins A plug-in is an adapter which lets browsers work with non-HTML –e.g. Java VM: Java applets –e.g. Acrobat: PDF files HTML Output Java Acrobat Applet PDF Browser

12. 20-753: Fundamentals of Web Programming 12 Lecture 1: Introduction Web Programming Programs usually get their data from the local disk Web browsers get their ‘programs’ (HTML) from the local disk or remotely from a web site on the Internet Web programming is inherently a client-server enterprise

13. 20-753: Fundamentals of Web Programming 13 Lecture 1: Introduction Web Clients and Servers The ‘client’ is usually the browser The ‘server’ is usually a web server Client-server communication relies on network protocols Web Browser Your Computer CLIENT Pages Remote Computer SERVER Web Server HTTP Request HTML Page

14. 20-753: Fundamentals of Web Programming 14 Lecture 1: Introduction Techniques We Will Learn Creating HTML pages and organizing them into web sites Scripting on the server side for content delivery (Perl) Scripting on the client side for interactive content (Javascript) Programming on the client side and server side (Java)

15. 20-753: Fundamentals of Web Programming 15 Lecture 1: Introduction Putting it All Together CLIENTSERVER Web Browser Pages Web Server Content Authoring: HTML (Hypertext Markup Language) Protocols: CGI (Common Gateway Interface) HTTP (Hypertext Transfer Protocol) Client Scripts: Javascript Client Programs: Java Applets Server Scripts: Perl Server Programs: Java Servlets

16. 20-753: Fundamentals of Web Programming 16 Lecture 1: Introduction Content Cornucopia Text (ASCII, HTML, …) Graphics (GIF, JPEG, …) Multimedia (sound, video, …) Links (relative, external, …) Programs (applets, plug-ins, …)

17. 20-753: Fundamentals of Web Programming 17 Lecture 1: Introduction Content Delivery Content is Delivered by Web Pages Web Pages are Programs Web Browsers ‘Run’ Web Pages Web Pages Can Contain Errors Not All Browsers Are the Same Other Means of Content Delivery: Streaming Media, Email, …

18. 20-753: Fundamentals of Web Programming 18 Lecture 1: Introduction Generate and Test Programs: Edit / Compile / Test / Debug Scripts: Edit / Test / Debug HTML: Edit / Browse / Debug When learning a new technique, try a simple example in your browser

19. 20-753: Fundamentals of Web Programming 19 Lecture 1: Introduction The Programming Process Old Days: ‘Programmer as Guru’ Today: ‘Programmer as Engineer’ Basic Software Engineering Steps –Requirements Analysis & Specification –Designing a Solution to the Problem –Plan the Implementation, then Build –Document Everything –Leave Plenty of Time for Testing