1. Lecture 10 John Hurley, CS 120, WInter 2011

2. Class Evaluations 2

3. Student Presentations 3

4. var legal = window.confirm("Are you 21 or older?"); if(legal ==false) { window.location = "http://www.google.com"; } else window.location = "http://www.guinness.com"; 4

5. Secure Sockets Layer (SSL) A protocol that allows data to be privately exchanged over public networks Developed by Netscape Encrypts data sent between a client (usually a Web browser) and a Web server. Utilizes both symmetric and asymmetric keys. “ https ” protocol Browsers display a “ lock ” icon 5

6. SSL in Action

7. Secure Sockets Layer (SSL) SSL provides secure communication between a client and server by using: – Server and (optionally) client digital certificates for authentication – Symmetric-key cryptography using a "session key" for bulk encryption – Public-key cryptography for transfer of the session key – Message Digests (hash encryption) to verify the integrity of the transmission 7

8. SSL & Digital Certificate Digital Certificate ◦ A form of an asymmetric key  Also contains information about the certificate, the holder of the certificate, and the issuer of the certificate. ◦ Used by SSL to authenticate the ◦ identity of the Web server 8

9. Digital Certificate The contents of a digital certificate include: ◦ The public key ◦ Effective date of the certificate ◦ Expiration date of the certificate ◦ Details about the Certificate Authority -- the issuer of the certificate ◦ Details about the certificate holder ◦ A digest of the certificate content 9

10. Certificate Authority A trusted third-party organization or company that issued digital certificates. Well-known Certificate Authorities: ◦ Verisign  http://www.verisign.com http://www.verisign.com ◦ Thawte  http://www.thawte.com http://www.thawte.com 10

11. Obtaining a Digital Certificate Request a certificate from a Certificate Authority and pay the application fee. The Certificate Authority: ◦ verifies your identity, ◦ issues your Certificate, ◦ and supplies you with a public/private key pair. Store the certificate in your software - such as a web server, web browser, or e-mail application. The Certificate Authority makes your certificate publicly known. 11

12. SSL & Digital Certificates When you visit an e-commerce site that uses SSL, a number of steps are involved in the authentication process. ◦ The web browser and web server go through initial handshaking steps using the server certificate and keys. ◦ Once trust is established, the web browser encrypts the single secret key (symmetric key) that will be used for the rest of the communication. ◦ From this point on, all data is encrypted using the secret key. 12

13. What is DHTML (Dynamic HTML)? A group of technologies work together to change a web page after it has been downloaded. These technologies allow the web page to respond to user actions. Technologies used in DHTML: – Document Object Model (DOM) – Cascading Style Sheets (CSS) – Client-side Scripting 13

14. Document Object Model (DOM) A portion of the DOM is shown at the left. Defines every object and element on a Web page Hierarchical structure Accesses page elements and apply styles to page elements 14

15. What is Ajax? Asynchronous JavaScript and XML “Ajax” – Jesse James Garrett at Adaptive Path Existing technologies used in a new way  Standards-based XHTML and CSS  Document Object Model  XML (and the related XSLT technology)  Asynchronous data retrieval using XMLHttpRequest  JavaScript Very Basic Example: ◦ http://www.ajaximpact.com/ajaximpact1.php?n=3&id=15& fw=6&back=/detail_ajaxdemo_id_15_Ajax_Language_Trans lator.html http://www.ajaximpact.com/ajaximpact1.php?n=3&id=15& fw=6&back=/detail_ajaxdemo_id_15_Ajax_Language_Trans lator.html ◦ compare to Star Trek project

16. Order & Payment Processing E-Commerce Payment Models: – Cash – Check – Credit – Smart Card – Micropayments 16

17. Credit Card Order Processing Flow

18. E-Commerce Storefront Solutions Instant Online Storefront ◦ Yahoo!, Earthstores, S hopify Off-The-Shelf Shopping Cart Software ◦ Agoracart, osCommerce, ZenCart, Mercantec Softcart Custom Built Solution ◦ IBM's WebSphere Commerce Suite, Microsoft's Commerce Server Semi-Custom Built Solutions on a Budget  E-Commerce add-ons for FrontPage and Dreamweaver  Paypal order processing  Free shopping cart scripts 18

19. Domain Names Establishes a Web presence for your business/ organization – New Business choose domain name while selecting company name – Established Business choose a domain name that relates to your established business presence

20. Choosing a Domain Name Describe your business Be brief, if possible Avoid hyphens TLD (top level domain name) ◦.com,.net,.biz,.us,.mobi and others ◦.org for non-profits Brainstorm potential keywords Avoid trademarked words or phrases Know the territory (use Google!) Verify Availability

21. Registering a Domain Name Most likely, your web host will take care of this for you. Otherwise, there are many domain name registrars, including ◦ http://register.com http://register.com ◦ http://networksolutions.com http://networksolutions.com ◦ http://godaddy.com http://godaddy.com Visit Registrar, choose name, Private registration – additional fee but personal information is kept private and out of the WHOIS database

22. Web Hosting Some organizations administer a Web server in-house and host their own Web site. Many companies use Web host providers – A good Web hosting service will provide a robust, reliable home for your web site. – A poor Web hosting service will be the source of problems and complaints. – Do not use free Web hosting for a commercial web site. 22

23. Types of Web Hosting(1) Hosting Needs: Small to Medium Web Site – Virtual Hosting The web host provider's server is divided into a number of virtual domains and multiple web sites are set up on the same set of servers. – Consider: Future growth and scalability of web host Operating System Types of server-side processing supported Bandwidth of Internet connection Both local and national web host providers Guaranteed uptime – service level agreement (SLA) Technical support 23

24. Types of Web Hosting(2) Hosting Needs: Large to Enterprise Web Site – Dedicated Web Server – Co-located Web Server – Consider: National web host providers Guaranteed uptime – service level agreement (SLA) Bandwidth of Internet connection Technical Support 24

25. Dedicated Web Server – The exclusive use of a rented computer and connection to the Internet that is housed in the Web hosting company's premises. – The server can usually be configured and operated remotely from the client company or you can pay the web host provider to administer it for you. 25

26. Co-Located Web Server – A computer that your organization has purchased and configured. – Your organization effectively rents space at the web host provider's location. – Your server is kept and connected to the Internet at their location. – Your organization administers this computer. 26

27. Choosing a Virtual Host See the Web Host Checklist (Table 10.1) 27 Operating System Web Server Software Bandwidth Technical Support Service Agreement Disk Space E-mail Uploading Files Canned Scripts Scripting Support Database Support E-Commerce Packages Scalability Backups Site Statistics Domain Name Price

28. Includes You will very often want to include one file in another. This allows you to maintain some repeated part of your design in a single place. – navigation bars – copyright text – brand info for the site 28

29. Includes Three general methods: – Server side includes (variations between servers) – Server scripting – Client side using JavaScript 29

30. Includes Server Side Includes: directives to the server – Slightly different methods for different servers – Depends on configuration of server, which you often don’t control – Apache: Buy lots of stuff from our company! – Similar techniques can also be used to show values of system variables like the current time 30

31. Includes Server Side Scripting – PHP, ASP.NET, JSP, etc all have ways of doing this – ASP.NET: Master Page 31

32. Includes in PHP return.php noreturn.php testreturns.php 32

33. Includes Client side with Javascript – write an external script that writes out the information you need using document.write() document.write(" Important Information © 2011 by John Hurley"); 33

34. Preview of HTML 5 May be finalized in 2012 XHTML will be superseded by the “XML serialization” of HTML 5 Current browsers have varying support for parts of HTML 5 already 34

35. Preview of HTML 5 Built in application programming interfaces [APIs] for graphics, geolocation, drag and drop, file uploading/downloading, others. – This will replace JavaScript in some cases, and server-side programming in some others Built in support for small offline database Standardized error handling 35

36. Preview of HTML 5 Will drop some purely typographical elements, like – Focus on semantics in HTML, use CSS for presentation Numerous new forms elements, like email, range, etc. Better built-in support for multimedia (e.g. video and audio), will make many browser add-ons obsolete. 36

37. Preview of HTML 5 Adds tags for common parts of page structures, such as navigation These tags are semantic. You will need to control the layout and styling with CSS 37

38. Example of a document structure now 38

39. HTML 5 Equivalent 39 Many common elements for which you would use divs now have built in elements

40. Slightly More Complex Version: 40 Many common elements for which you would use divs now have built in elements

41. Preview of HTML 5......... 41

42. Preview of HTML 5 Video and Audio tags Download movie 42

43. Preview of HTML 5 For the time being, this is supported best by Chrome 43

44. HTML5 Canvas This text is displayed if your browser does not support HTML5 Canvas. var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 70, 50); 44

45. HTML5 Many other new elements and attributes: http://www.w3.org/TR/2008/WD-html5-diff- 20080122/#new-elements 45

46. Under the Hood Take a look at these four well-known sites at home. These two well-known sites have relatively simple formats. Let’s take a look at View Source – Craigslist – Wikipedia These two are more complex: – Yahoo – Gmail 46

47. Final Exam Final will include many short answer questions a one paragraph answer one coding problem several “fix the code” problems Next Thursday’s lab will be a sample final 47

48. After this class The next class is this sequence is CS320, which covers server-side web programming with Java – Prerequisites: 120, 122 (Databases and SQL), 203 (Java/Data Structures) 48