CourseIntro.pdf

Lecture CS571 - Course Introduction This content is protected and may not be shared, uploaded, or distributed. © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 1 General Information • • • • • • • Lectures: – Session 30221D: Tue, Th 5:00PM – 6:50PM (SGM 124) – Session 30117D: Tue, Th 5:00PM – 6:50PM (DEN@Viterbi) – Session 30143D: Tue, Th 7:00PM – 8:50PM (SGM 124) Producers: Zoom office hours on course website and Piazza Course website: https://www.csci571.com DEN’s D2L for Zoom Lectures: https://courses.uscden.net Assignments – yes, attendance – up to you Two Exams, one at half course and one towards the end Exams auto-graded using D2L Quiz Tool • • • Mobile Application - final “comprehensive” project live demo Web storage: GitHub Pages Cloud Storage: Google Cloud, AWS or Azure © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 2 CS571: Web Technologies • Instructor: Prof. Marco Papa • Office hours, in-person and on Zoom: – Thursday 2:30PM-3:30PM PDT – In-person in PHE 516 • E-mail: [email protected] • Zoom Lectures stored on DEN D2L • 24/7 Q&A access: Piazza, 30 min. average response time TA / Producer access: daily • Instructor access: weekly • Quick way to ask a “personal” question: Private message to Instructors on Piazza © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 3 General Rules NO FACULTY D-CLEARANCE Unless you are a “superstar” undergrad J COURSE OVERLAP Will allow, but you agree it is “your” problem Fixed dates / times: Exam #1: October 3, 5:00PM and 7:00PM PDT Exam #2: November 30, 5:00PM and 7:00PM PDT Final Mobile Project: December 7 Exams “in-person” electronically graded using D2L Quiz Tool Final Mobile project/presentation Zoom video uploaded to D2L © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 4 Benefits of Prof. Papa CSCI571 • Top 10-40 students in each section offered available Grader/Producer positions at end of semester. BY INVITATION ONLY • CSCI571 Graders and Producers that are invited to MS Honors Program will be provided with Recommendation Letter (22 “recommended” students already awarded MS Honors) • “Proof of skill” for H1B applications available at: https://www.cs.usc.edu/skills-verification/ • Prof. Papa will act as “reference” in job applications for CSCI571 TAs, Course Producers and Graders © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 6 Learning Objectives • By the end of the course, you should have acquired the following skills: – The ability to write RESTful API applications – The ability to set up Cloud services – The ability to design and code back-end scripts in Python and JavaScript – The ability to design and code front-end Web Applications – The ability to design and code Mobile Apps in Swift/SwiftUI or Java/Kotlin – The ability to design and code web front-end asynchronous applications using AJAX – The ability to design and code responsive web apps – The ability to read Web Services API documentation and use it in building Web applications – The ability to write Microservices and Containers © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 7 Prerequisites • The course is recommended for students with deep knowledge of at least two programming languages (JavaScript, Java, Python, C#, C++) • CSCI 571 is not a “beginner course” for the Web; it is an “advanced course.” • If you are interested in beginner courses, check out these ITP courses: – – – – – ITP ITP ITP ITP ITP 104, 301, 303, 304, 342, “Introduction to Web Development”. “Front-End Web Development” “Full-Stack Web Development” “Back-End Web development” “iOS App Development” • In CSCI 571 you have all of the above in 1 course! • Understand the course load will be massive • You need to have the time available to be successful • Consider yourself warned. © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 8 Course Technologies • • • This course focuses on the phenomenon known as the World Wide Web Core technologies are: – HyperText Markup Language (HTML) and Cascading Style Sheets (CSS) – HyperText Transfer Protocol (HTTP) – Web servers, their configuration and performance properties – Server-Side programming using JavaScript and Python – Client-side programming using JavaScript and JS Frameworks – Ajax Development Style Newer Technologies of Interest – Responsive Website Design (Bootstrap, etc.) – JS Frameworks (Angular, React and Node.js) – Web Services (REST) – Web security, TOR, Dark web – Native Mobile frameworks (Java / Android and Swift / iOS) – React (native) – Cloud computing (AWS, GCP, Azure) – Serverless Applications, Containers, Docker – AWS Lambda, Google Cloud Functions, Azure Functions © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 9 Software and Storage • Student Disk space on GitHub Pages: – https://pages.github.com/ – GitHub Student Developer Pack: https://education.github.com/pack – Allows GitHub Pages with “private” repository – 1GB of free web space – Used for homework 1 and Table of Exercises • Website / Web Services in the cloud – – – – – – – Amazon’s Elastic Compute Cloud (AWS) Google Cloud Platform (GCP) [recommended] Microsoft Azure AWS Lambda, Google Cloud Functions, Azure Functions Serverless.com Node.js Docker © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 10 Other Issues • Piazza class news group – Activate your membership by self-joining at: piazza.com/usc/fall2023/csci571 – Class Access Code: lafc3252usc – Discussions limited to course materials, assignments and exams • Academic Integrity Policy – Do NOT submit the same program; you can discuss the project with fellow students, but do not develop code with other students; do not download code online; do not post code online; we use MOSS to check for plagiarism. We scan all the exams. See “Academic Integrity Policy”. DEN D2L main site for course materials – Course slides (PDF) – Exams (Quiz Tool) • • – Assignments (Dropbox Folders) – Grades Downloading course slides and software from csci571.com – Class slides access. Username: csci571, password: notes1 © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 11 Student Evaluations • Comments: – “Amazing assignments. Learnt a lot on the course.” – “Projects seemed similar to an actual client for web development would ask for.” – “Even though the assignments were hard I learnt a lot from them.” – “It is not a fair game for beginners. I've spent almost 3 weeks to do a homework, and I still can not finish it on time.” – “Course projects are impressive!” – “This class has posted assignments easily x10 times larger than other classes.” – “last two assignmentstake *forever*.” – “The homework assignments are so difficult.” – “I had to do so much googling on my own to learn about concepts used in the homework assignments.” – “Tough class with a lot of valuable assignments.” – “Massive assignments.” – “The workload of this course is too much, especially the last two homework.” © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 12 Academic Integrity Violations • Spring 2018 violations (16): – – • Fall 2018 violations (0): – • F in course: 2, 0 in assignments, C, and D in course Fall 2022 violations (5) – • Full letter grade reduction Spring 2022 violations (52) – • 0 + full letter grade reduction: 1 (A-, C) Spring 2021 violations (2) – • F in course: 1 0 + full letter grade reduction: 5 (B-, C) Spring 2020 violations (4): – • F in course: 1 0 + full letter grade reduction: 1 (B-), C in the course: 2 Fall 2019 violations (6): – – • None! Spring 2019 violations (4): – – • Sanctioned: 16, Appeals Panel: 8, Appeals to Dean: 2: no changes F in course: 12, 0 + full letter grade reduction: 4 (C-, C-, C-, B-) 0 in assignments, F in course: 1, point deductions Spring 2023 violations (4) – 0 in assignments © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 13 MOSS Plagiarism discovery tool © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 14 Piazza © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 15 Who am I? • PhD in CS from USC, class of ‘88 • Initial career: MS Windows, Commodore Amiga developer • System Architect -> Team Lead -> IT Project Manager -> VP Engineering • CTO (Chief Technology Officer) at Luckman Interactive and CareerBuilder • Part-time Faculty at USC 2003-2022 • Full-time Faculty at USC starting since August 2022 • Chief Technologist at LASC (Los Angeles Superior Court) 2002-2022 • Microsoft 365 SharePoint Project Manager 2014-2022 • Active member of LA CTO Forum (Silicon Beach CTOs) • Season ticket holder of USC Football and LAFC (Los Angeles Football Club) and supporter © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 16 Characterizing Web Content There are very few studies that examine the types of content on the web, however . . . (From IEEE Spectrum, Jan. 2004, pp. 75): – – – – Claim: 30% Claim: 30% 50,000,000 65% of the of the web is porn of the web is duplicate information pages are either new or changed each day web pages are in English (From Personal Computer World, Optenet, Sep. 2008): – Claim: 35% of the web is porn, 11% is e-commerce – http://www.optenet.com/en-us/new.asp?id=162 (From Forbes, Sept. 2011): – Claim: 4% is porn, 13% are porn Web Searches – http://www.forbes.com/sites/julieruvolo/2011/09/07/howmuch-of-the-internet-is-actually-for-porn/ (From BBC, July 2013): – Claim: is porn 4% or 37%? – http://www.bbc.com/news/technology-23030090/ © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 17 Sample Web Sites (Modest Size) • Running a web site can get complicated; here is one example. • The facts: – www.fogdog.com, online sale of sporting goods (domain abandoned) – Revenues: $5 million per year – 2.2 million-page views per month – average of 20,000 unique visitors per day • The solution (in-house): – Commodity hardware – Linux server running Apache 2.0 web servers – Using MySQL data base – They moved to Ebay! • https://www.ebay.com/str/fogdog • F5 BIG-IP OS, Apache 2.0.64 web server © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 18 Sample Web Sites (Medium size) • • • • Here is a popular, alternate strategy for maintaining a web site The facts: – www.autobytel.com, new and used cars (now AutoWeb) – Market Cap: $33.92M (Dec. 2019) – Quarterly Revenues: $28.6M (3rd Quarter 2019) – Lead traffic: 31.7M visits (3rd Quarter 2019) – Mobile version launched in 2012 – Stock symbol: AUTO (Nasdaq) Original Microsoft solution: – Microsoft Windows Server – Microsoft IIS 7.5 web server – Microsoft SQL server database – Akamai CDN Today: – Windows Server, Microsoft IIS/7.5 web server © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 19 Sample Web Sites (large size) • The facts: – – – – – – – – – www.etrade.com, online investing services and resources Market Cap: $10.37B (Dec. 2019) Yearly Revenues: $2.9B (12/2018) 60 million-page views per month average of 53,000 unique visitors per day 4.9 million accounts (Jan. 2015) 25,000 new retail accounts opened (Oct 2015) 1,952,000 customer transactions per month Taken over by Morgan Stanley in 2020 for $13 billion • The solution: – IBM 90 xSeries running Linux/Citrix Netscaler, Apache and Tomcat web servers, AWS Route 53 (DNS) – Hardware facility for load balancing and redundancy – Oracle database system – Proprietary programming systems © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 20 Web Server Farms • Until recently all serious web sites were maintained using web server farms; – A group of computers acting as servers and housed in a single location; – Internet Service Providers (ISP’s) provide web hosting services using a web server farm • Hardware and software is used to load balance requests across the machines • Other issues addressed by web server farms include: – Redundancy eliminates single point of failure; backup and failover strategy is required – Security, secure areas are placed behind firewalls which monitor web traffic, network address translation, port translation, SSL © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 21 Popular Web Hosting Services • For individuals and small business: – 1&1 https://www.ionos.com – GoDaddy.com http://www.godaddy.com/products/securehosting.aspx?ci=72738 – Yahoo http://www.iwebhostingplans.com/yahoo/yahoowebhosting.as p • For companies willing to pay MUCH higher costs: – Rackspace http://www.rackspace.com/index.php?CMP=Google_hosting – Network Solutions http://www.networksolutions.com/hosting/ • Reviews and price comparisons: – https://www.hosting-review.com/top-ten-list/ See next slide “monthly” prices – http://www.pcmag.com/categories/web-hosting © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 22 Web Hosting Services © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 23 Cloud Computing • • • • • Cloud computing is Internet-based computing, whereby shared resources, software, and information are provided to computers and other devices on demand, like the electricity grid. Users no longer have need for expertise in, or control over, the technology infrastructure "in the cloud" that supports them. It typically includes web-based tools or applications that users can access and use through a web browser as if it were a program installed locally on their own computer. ] Typical cloud computing providers deliver common business applications online that are accessed from another Web service or software like a Web browser, while the software and data are stored on servers. The major cloud service providers include Amazon, Google, Microsoft, Salesforce, Skytap, HP, IBM, Amazon, Google and Apple (iCloud). © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 24 An Example – Amazon’s Elastic Compute Cloud • • • • • • • A web service providing resizable compute capacity The “elastic” nature means the service instantly scales to meet demand with no up-front investment Users create an Amazon Machine Image (AMI), a virtual computer running your selected operating system (Linux, Windows, etc) Users use Amazon’s Simple Storage Service (S3) for largescale, persistent storage You only pay for running AMI All accounts are limited to 5 Elastic IPv4 addresses per region See: aws.amazon.com/ec2 Amazon currently runs in 8 regions: US East, US West (Oregon), US West (Northern CA), Ireland, Asia Pacific (Singapore), Asia Pacific (Tokyo), Asia Pacific (Sydney), South America (Sao Paulo) © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 25 An Example – Google Cloud Platform • • A web service providing basic Compute, Storage, Big Data and Services. Additional services for massively scalable Gaming solutions, Mobile Applications backend, and Apache Hadoop. • App Engine – A platform for building scalable web applications and mobile backends. App Engine scales applications automatically in response to the amount of traffic it receives. • Compute Engine - Offers predefined virtual machine configurations:Debian, CentOS, CoreOS, SUSE, Ubuntu, Red Hat, FreeBSD, or Windows 2008/2012. Google uses software-defined networking technology to route packets across the globe and enable fast edge-caching so that data is where it needs to be to serve users. © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 26 Serverless Architecture • • Internet based systems where the application development does not use the usual server process. They rely solely on a combination of: – – – • • third-party services, or Backend as a Service (BaaS) client-side logic service hosted remote procedure calls, or Function as a Service (FaaS). AWS Lambda is one of the most popular implementations of FaaS at present, but there are others. See: https://aws.amazon.com/lambda/ Serverless and contains will be covered later in the course © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 27 USC Has Many Web Servers Running • • • • • • • • • Netcraft lists 120 separate sites / web servers with usc.edu in their name, e.g. www.usc.edu mat.usc.edu www.cs.usc.edu dornsife.usc.edu web-applusc.edu www-scf.usc.edu However, some may not be connected to USC, e.g. www.usc.edu.au • Check at: https://searchdns.netcraft .com © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 29 Web Browsers Use Standard Layout Engines • WebKit is a software component used to render web pages; it is open source. – It is used by Google’s Chrome and Apple’s Safari web browsers – WebKit is also the name of the Mac OS X system framework version of the engine that's used by Safari, Dashboard, Mail, and many other OS X applications; • Gecko is a layout engine developed by Mozilla Corporation, known as the layout engine of the Firefox web browser. – It is used to display web pages and, in some cases, an application's user interface. – It offers a rich programming API that makes it suitable for a wide variety of roles in Internet-enabled applications, such as web browsers – Its development originated with Netscape Communications Corporation • Some web kits and the browsers that use them – – – – – – – Gecko-based: FireFox (Mozilla), Flock, Netscape Trident-shells: Internet Explorer (Microsoft, retired) Edge: Edge Legacy (Microsoft), fork of Trident 7, retired in Aug. 2021 WebKit-based: Chrome and Android (Google), Midori, Safari and Mobile Safari (Apple), Symbian^3 (Nokia) and many others Chromium-based: Chrome, Microsoft Edge (2021+) Presto-based: Opera, Nintendo DS, Opera Mini, Opera Mobile Java-based: HotJava, Lobo © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 30 Capabilities of a Browser • Web browsers fetch and display documents from other WWW sites; their capabilities include: – A mouse-driven graphical user interface – Display of • Hypertext documents conforming to latest HTML standard • Text with fonts, styles, and varying point sizes • Foreign-language character sets conforming to ISO-8859 • Forms composed of edit boxes, check boxes, radio boxes, lists, text areas, etc. • Graphics in different formats (GIF, JPEG, MPEG, PNG, XBM) including monochrome, color GIF = graphic interchange format, MPEG = Motion Picture Experts Group, JPEG = Joint Photographic Experts Group, PNG = Portable Network Graphics, XBM = x bitmap © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 31 Capabilities of a Browser – Ability to invoke helper applications and plug-ins, (Obsoleted in HTML5) e.g. • Adobe Acrobat – used to view pdf files • Windows Media Player to play digital sound files • Adobe Flash Player, used to display video. Retired in 2020.) – Ability to communicate over a secure channel, using SSL – Ability to maintain and exchange digital certificates – Ability to run scripts in JavaScript – Ability to run Java applets and Active X components (also obsoleted in HTML5) © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 32 The Browser Wars - Desktop Statistics Conclusion of the above study: - Chrome is the clear winner - Edge comes second, with Chrome engine - Firefox next, but losing ground - Safari and Opera having small percentages - WebKit-related total over 95% See http://www.w3schools.com/browsers/browsers_stats.asp © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 33 Desktop/laptop Browser Market Share Statistics August 2020 http://www.netmarketshare.com/ [retired] Chrome leads with 69% market share. December 2021 © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 34 The Browser Wars Comparison(cont’d) StatCounter Global Stats, July 2022 – July 2023, See http://gs.statcounter.com Chrome has the lead with about 65%, followed by Safari at 24%, Samsung, Opera and UC Browser from UCWeb of Alibaba Group of China. © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 35 The Browser Wars Comparison(cont’d) StatCounter Global Stats, Oct.-Dec. 2016 through Oct.-Dec. 2017, See https://www.wsj.com/articles/a-browser-youve-never-heard-of-isdethroning-google-in-asia-1514808002 © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 36 Browsers Have Many Plugins Available • • • Plug-ins are also listed as “Extensions” Firefox plug-ins that will be especially useful in this course are: – HTTP Header Live HTML5 does away with most video / audio plug-ins © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 46 Firefox: Tools | Web Developer © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 47 Chrome: Menu| More Tools | Developer Tools © Ellis Horowitz & Marco Papa 1999-2023 Course Intro 48 Evolution of Web Sites Client- Server Web centric Applications services Multiple Static Databases layers Dynamic web pages Service Oriented Arch. (SOA) Business Clientand service centric Integration Multiplatform (desktop, tablet, phone) IoT, Clientcentric Serverless Arch. (BaaS, FaaS) Wearables, Cloud computing, Docker HTML ODBC, JDBC Scripts ASP CGI Applets, ActiveX XML, WML, Ajax, SQL, .NET Web 2.0, COM+, Beans JSON HTML5, JS Frameworks CSS3, JS AWS, GCP, Azure gestures navigation Microservices containers 1st gen 1991 2nd gen 1997 3rd gen 2000 4th gen 2005 5th gen 2008 © Ellis Horowitz & Marco Papa 1999-2023 6th gen 2014 Course Intro 49

Document Details

Tags

Related

Full Transcript