Transcript Website Design

Lesson1: Understanding Website Design Concepts
Dr. Husam Al-Osta
2013


The Web known as World Wide
Web(“WWW”,”W3” or “Web”) is the universe of
network-accessible information, the
embodiment of human knowledge.
In simple terms, The World Wide Web is a way
of exchanging information between
computers on the internet, tying them
together into vast collection of interactive
multimedia resources.



Is a collection of related
web pages containing images, videos or other
digital assets.
Websites are hosted on at least one web
server, accessible via the Internet and can be
accessed through an Internet address known
as a Uniform Resource Locator (URL).
Websites are accessible through the World
Wide Web (WWW)


Is a document, typically written in plain
text interspersed with formatting instructions
of HyperText Markup Language (HTML)
Web pages are accessed and transported with
the Hypertext Transfer Protocol (HTTP), which
may optionally employ encryption (HTTP
Secure, HTTPS) to provide security and
privacy for the user of the web page content.

Every Web site sits on a computer known as a
Web server. This server is always connected
to the internet. Every Web server that is
connected to the Internet is given a unique
address made up of a series of four numbers
between 0 and 256 separated by periods.for
example, 68.178.157.132 ro 68.122.35.127.





Clients and Servers
Internet Service Providers
Web Site Hosting Services
Domains Names, URL’s and IPs
Registrars
Clients (Browser)
 Internet Explorer
 Firefox
 Chrome
 Netscape
 Opera
 AOL
 MSN
Servers
 Apache
 Microsfot
 Netscape
 Zeus
 AOL Server
 JavaWebServer
 Oracle





Clients and Servers
Internet Service Providers
Web Site Hosting Services
Domains Names, URL’s and IPs
Registrars








Phone Company
Du
Etesalat
TalkTalk
Virgin Media
AOL
Sky
O2
•Basic internet connection
•Dialup/DSL/Cable/Sat
•Email





Clients and Servers
Internet Service Providers
Web Site Hosting Services
Domains Names, URL’s and IPs
Registrars




Computer (server) farm
Web server software
Firewall hardware and software
IT services
◦




(Backup, troubleshooting, hardware repair)
Disk space
Bandwidth / connection to internet
Routers and switchers
Email server / storage





Clients and Servers
Internet Service Providers
Web Site Hosting Services
Domains Names, URL’s and IPs
Registrars

Domain name: The specific address of a
computer on the Internet
◦ microsoft.com
◦ Yahoo.co.uk

Uniform Resource Locator (URL):
◦ http://www.microsoft.com/faqs.html

Internet protocol (IP) address
◦ 192.168.1.1

Consider the web address :
◦ http://www.googleguide.com/searchEngines/googl
e/searchLeader.html

Here’s what it all means:

Here’s a list of some common top-level domain
names. Note that some sites don’t follow these
conventions:

Countries have their own two letter codes as
the top level of their domain names:





Clients and Servers
Internet Service Providers
Web Site Hosting Services
Domains Names, URL’s and IPs
Registrars



A company that provides domain name
registration services for a fee.
Maintain database which maps domain names
to IP’s
Broadcast new domain name/IP address
information across the internet

To find information they need
 student looking for pictures of frogs for a school
project
 to finding the latest stock quotes
 To find the address of the nearest Chinese restaurant

To complete a task
 Visitors may want to buy the latest best-seller
 download a software program
 participate in an online discussion





Users don’t read, they scan
Users are impatient and insist on instant
satisfaction
Users don’t make optimal choices
Users follow their instinct
Users want to have control
http://www.youtube.com/watch?v=lo_a2cfBUGc

Know your users





Expert
Regular
Occasional
Special needs
Have a clear goal for your Website
 Informative
 Services
 Community
– Public service
nonprofit groups
– Organizations
– Government
– Commercial
– Educational
– Editorial
– Reference
– Institutional promotion
– Transactional
– Self-promotion
–
–
–
–
–
–
–
–
–
–
Hybrid/experimental
Gaming
Entertainment
Video sharing
Photo sharing
Blogs
Communities
Social networking
Professional networking
Intranet
What if we have
Several purposes ?






Develop a vision for your Web site and
storyboard it before construction begins
Website structure. How big/deep is the site?
User interface. How friendly and easy to use
Font design
Attractive graphical design to users
Keywords that help search engines to present
your website

Updates
 New images/videos/news/info


Backup
Testing
 Links/audio/video/navigation

Documentation
 Latest updates
 Latest tests
 All activities
Main basic concepts






Alignment
Proximity
Repetition
Contrast
Navigation
Spelling
 Bad spelling and bad grammar can destroy the
professional effect of your web site
 Use spell checker





Items on the page are lined up with each other
Two types of alignment:
◦ Horizontal alignment
◦ Vertical alignment
CHOOSE ONE. Choose one alignment and use it on
the entire page. Don’t mix alignment
Get the text away from the left edge
Centre alignment makes finding the beginning of a
new line of text much more difficult


Relationships that items develop when they
are close together, in close proximity.
Be aware of the space between elements.
◦ Group together
◦ Space them apart



Associate elements by repeating a common stylistic
feature or arrangement
Throughout a project you repeat certain elements
that tie all the disparate parts together
Repetition elements that unify the entire site:
◦
◦
◦
◦
◦
◦
◦
Navigation buttons
Colors
Style
Illustrations
Format
Layout
Typography



What draws your eyes onto the page.
Contrasting elements guide your eyes into
the page, create a hierarchy of information,
and enable you to skim through the vast
array of information and pick out what you
need
Contrast elements:
◦
◦
◦
◦
Style
Colors
Graphic signposts
Spatial arrangement
this is an example of poor contrast
another example of how contrast provides a warning
contrast to make something stand out
white on black is harder to read than black on white
Use active white space to make your content
stand out on the page.


Where are you now?
Where can you go?
◦ Buttons to travel around a site should be easy to
find – towards the top of the page and easy to
identify
◦ They should look like navigation buttons and be
well described.
◦ The text of a button should be pretty clear as to
where it’s taking you.
1.
2.
3.
4.
5.
6.
7.
Choose a domain name
Register with a Registrar
Choose a hosting service
Tell Registrar the IP address
Create web content
Store (publish) onto hosting server (FTP)
Submit new site to search engines

Markup Languages
◦ HTML, DHTML, XML, XSLT, etc....


Cascading Style Sheets (CSS)
Scripting languages
◦ Perl, JavaScript, Php, etc....

Web creation and editing software
◦ Notepad, FrontPage, Coldfusion, Flash, Hotmetal,
Site Builder, etc..
Introduction
HTML is a language for describing web pages




HTML stands for
Hyper Text Markup Language
HTML is not a programming language, it is
a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web
pages


Hyper Text Markup Language
Hypertext refers to the way in which Web
pages (HTML documents) are linked together
◦ When you click a link in a Web page, you are using
hypertext.

Markup Language describes how HTML works
◦ With a markup language, you simply "mark up" a
text document with tags that tell a Web browser
how to structure it to display.




HTML tags are keywords surrounded by
angle brackets like <html>
HTML tags normally come in pairs like <b>
and </b>
The first tag in a pair is the start tag <i>, the
second tag is the end tag </i>
Start and end tags are also called opening
tags and closing tags
< HTML >
Header
Body
< / HTML>
<html>
<head>
<title> The title of your html page </title>
</head>
<body>
<! - - your web page content and markup - ->
</body>
</html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h2>Welcome in Heading</h2>
<p>
My first paragraph.
<br>
it is a <b>simple basic</b> page.
</p>
</body>
</html>