Transcript Document 294837

Web Design
Dr. Rabie A. Ramadan
http://rabieramadan.org
1
About my self

Rabie A. Ramadan

My website and publications
•
http://www.rabieramadan.org
2
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
3
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
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.
5
Class Information

Textbooks
6
Class Information

Website
http://www.rabieramadan.org/classes/2011/wwwdesign/
7
Competitions
YouTube Competition
RoboCup
8
Project

Active Learning
9
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

Future
• Internet to do everything
• 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
MIT
Pitt
A
B
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 humanreadable 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 subsubdomain 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)

Cascading Style Sheets (CSS)

JavaScript
• Structuring your document
• Formatting and displaying your page elements
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?