Embed Size (px)
Citation preview
Web Design
Dr. Rabie A. Ramadan
http://rabieramadan.org
1
2
About my self
Rabie A. Ramadan
My website and publications • http://www.rabieramadan.org
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
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
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
Class Information
Textbooks
7
Class Information Website
http://www.rabieramadan.org/classes/2011/wwwdesign/
8
Competitions
YouTube Competition
RoboCup
9
Project
Active Learning
THE PAST, PRESENT, ANDFUTURE 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
Introduction to the Internet
some of the slides are exerted from Mehmud Abliz slides
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
A Visualization of Internet
A Visualization of Internet
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
Mailing System
A B
Pitt MIT
Admin Admin
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
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
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
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.
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.
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.
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”.
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
Putting it All Together
Web Standards
26
Current Web Standards
HTML (XHTML)• Structuring your document
Cascading Style Sheets (CSS)• Formatting and displaying your page elements
JavaScript
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
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
What can you do with CSS? Example
What can you do with CSS? Example
Keeping Project on Track
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)
•
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
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
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.
Spiral Model Approach
38
The Nine Knowledge Areas
The Nine Knowledge Areas
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.
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.
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
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.
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.
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).
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?
