1. Web Design Dr. Rabie A. Ramadan http://rabieramadan.org 1

2. 2 About my self Rabie A. Ramadan My website and publications http://www.rabieramadan.org

3. 3 Class Rules I am not here to punish you Trust yourself and do your best I want you to learn and compete with others working on the same field I want you to be confident when you speak with others

4. Class Rules You can bring anything to drink but NO FOOD PLEASE When you come in, DO NOT knock on the door When you want to leave, do not tell me  Just leave but you will be counted as absent I do not take attendance every class but sometimes I do

5. 5 Class Rules Attendance is a vey important Assignments must be delivered on time All assignments are individual assignments unless it is clearly stated that you can work on groups. Assignments or part of them that are copied (including the programming assignments) will not be counted towards your grades.

6. 6 Class Information Textbooks

7. 7 Class Information Website http://www.rabieramadan.org/classes/2011/wwwdesign/

8. 8 Competitions YouTube Competition RoboCup

9. 9 Project Active Learning

10. THE PAST, PRESENT, AND FUTURE OF THE WEB Old days : What to do to send a letter ? Send stamped mail not e-mail What was the standard way to send an assignment ? Handwritten Present Internet to do everything Future Different life

11. Introduction to the Internet some of the slides are exerted from Mehmud Abliz slides

12. Internet, Packets and Routing Internet is a network of computer networks Data is transmitted by packet switching using the standard Internet Protocol (IP) Packet – a unit of information carriage Packet switching – process of moving packets from one node (computer device) to another

13. A Visualization of Internet

15. Internet, Packets and Routing At the sender, data is broken into packets and sent to the nearest node (router) At each router, it sends the packet to another router that is closer to the final destination At the receiver, packets are reassembled to get the original data A simple analogy: mailing system

16. Mailing System AB Pitt MIT Admin

17. TCP/IP and Domain Names Basic task of IP – moving packets as quickly as possible from one router to another Yet, it doesn’t check whether packets are delivered successfully, thus need TCP TCP (Transmission Control Protocol) – disassemble/reassemble packets, error checking, ACK packets

18. TCP/IP and Domain Names We need some sort of address in order to identify different nodes, as if every house has a mailing address in order to receive mail from others The one used by Internet Protocol is called IP address Every host on the Internet has a unique IP address, made up of four numbers. E.g.. 192.56.215.131, each number is between 0 and 255

19. TCP/IP and Domain Names The numbers in an IP address is hard to remember, while names are easier Domain Name System – a mapping between the human- readable name (domain name) of a host and its IP address A domain name consists of two or more parts, e.g. cs.pitt.edu The rightmost label conveys the top-level domain, e.g. edu

20. TCP/IP and Domain Names Each label to the left specifies a subdomain, in our example, subdomain is pitt (University of Pittsburgh), and sub- subdomain is cs (computer science). A top-level domain contains of multiple subdomains, each subdomain can contain multiple sub-subdomain, so on. The database contains the mapping between a domain name and an IP address is stored on a DNS server.

21. World Wide Web The World Wide Web (commonly shortened to the Web) is a system of interlinked, hypertext documents accessed via the Internet. It is created to share files/documents and overcome the barrier of different file formats Hypertext refers to text on a computer that will lead the user to other, related information on demand.

22. World Wide Web hypertext documents are created using a special kind of document formatting or “markup” language called HyperText Markup Language (HTML). HTML is sent or received over the network using HyperText Transfer Protocol (HTTP). A browser is a software program which interprets the HTML documents and displays it on the user’s screen.

23. URLs and Client-Server Model Each document/resource on the WWW needs to have an identifier in order to be accessed by others. A Uniform Resource Locator (URL) is a URI which provides means of obtaining the resource by describing its network “location”.

24. URLs and Client-Server Model Two things are given by the URL Exact location of the document The method or protocol by which to retrieve and display the document Example, http://www.cs.pitt.edu/~mehmud/cs134/index.html http:// – specifies the protocol www.cs.pitt.edu – specifies the host name / domain name /~mehmud/cs134/index.html – specifies the path of the document on the host

25. Putting it All Together

26. Web Standards 26

27. Current Web Standards HTML (XHTML) Structuring your document Cascading Style Sheets (CSS) Formatting and displaying your page elements JavaScript

28. Why do I need CSS? You have a quote in a book (in a web page) : “In the good old days, your code would look something like this:” In HTML In XHTML and CSS And in a CSS file, you write

29. What makes a difference ? Assume you want to repeat this quote for 100 time in the webpage. Both work What if you want to change the color only CSS will much easier

30. What can you do with CSS? Example

31. What can you do with CSS? Example

32. Keeping Project on Track

33. Web Project Requirements Budget needs to be set Deadline has to be respected Scope needs to be addressed: What are you going to do (e.g. building new website or redesign new one)

34. Web Project Management Old School planning everything in advance Assigning dates (milestones) and people (resources) to each task. Everything is planned and documented in advance, Stakeholder sign-off is obtained on the documentation, A project manager makes sure everything stays on track.

35. 35

36. Web Project Management Old School Problems Web projects requires more flexibility than any other projects May be more than one technology being used Web technologies changes in ranges of months

37. Stay away from waterfalls: the traditional approach A project is planned as much as possible up front. Planning continues until a consensus (agreement) on “perfection” is reached, and then work commences.

38. Spiral Model Approach 38

39. The Nine Knowledge Areas

40. Project Integration Management: This area looks at planning and integrating all the various parts of the project. Project Scope Management: What work has to be done to complete. The project and how that work is going to be broken down between the various “resources”. It also identifies how any changes will be handled during the project.

41. The Nine Knowledge Areas Project Time Management: This area defines how long a project is going to take, identifies how many people, and specific Skills. Project Cost Management: Money is another important factor. This area defines the budget for the project and how things will be controlled to stay within that budget.

42. The Nine Knowledge Areas Project Quality Management: How will you make sure that what you produce works and does what it’s supposed to do? What kind of testing will be done, and what test results are acceptable? Different Testing Approaches

43. Testing Approaches White box testing Is when the tester has access to the internal data structures and algorithms including the code that implement these. Black box testing Treats the software as a "black box"—without any knowledge of internal implementation. Stability testing Stability testing checks to see if the software can continuously function well in or above an acceptable period.

44. Testing Approaches Usability testing Needed to check if the user interface is easy to use and understand. It approach towards the use of the application. Security testing Essential for software that processes confidential data to prevent system intrusion by hackers.

45. The Nine Knowledge Areas Project Communications Management: This area covers how things will be shared amongst the project team and the stakeholder(s), How progress will be communicated and tracked, and how things will be documented. Project Risk Management: This area looks mostly at the risks involved if the project fails (or succeeds; there may be risks either way).

46. The Nine Knowledge Areas Project Procurement Management: How/where will products or services be acquired when needed, and how will subcontractors be managed (if applicable)? Project Human Resource Management: Where are you going to get your team members? What skills do they need? Do you need to train anyone? How will the team be managed?