Upload
sun
View
46
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Website Design. Lesson1: Understanding Website Design Concepts Dr. Husam Al- Osta 2013. What is the Web?. The Web known as World Wide Web(“WWW”,”W3” or “Web”) is the universe of network-accessible information, the embodiment of human knowledge. - PowerPoint PPT Presentation
Citation preview
Website DesignLesson1: Understanding Website Design Concepts
Dr. Husam Al-Osta2013
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.
What is the Web?
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)
What is a Website ?
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.
What is a Web Page ?
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.
What is Web Server?
Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and IPs Registrars
Web Components
Clients (Browser)
Internet Explorer
Firefox Chrome Netscape Opera AOL MSN
Clients & ServersServers Apache Microsfot Netscape Zeus AOL Server JavaWebServ
er Oracle
Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and IPs Registrars
Web Components
Phone Company Du Etesalat TalkTalk Virgin Media AOL Sky O2
Internet Service Providers (ISPs)Connect Clients to the Internet
•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
Web Components
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
Web Hosting Services Connects Web Sites to the Internet
Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and IPs Registrars
Web Components
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
Domain’s URL’s and IPs
Consider the web address :◦ http://www.googleguide.com/searchEngines/
google/searchLeader.html
Here’s what it all means:
Domain’s URL’s and IPs
Here’s a list of some common top-level domain names. Note that some sites don’t follow these conventions:
Domain’s URL’s and IPs
Countries have their own two letter codes as the top level of their domain names:
Domain’s URL’s and IPs
Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and IPs Registrars
Web Components
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
Domain Registrar
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
Why Do People Visit Websites?
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
How do users think?
Know your users Expert Regular Occasional Special needs
Have a clear goal for your Website Informative Services Community
Know the Users
What is the website purpose
What if we haveSeveral purposes ?
– Hybrid/experimental– Gaming– Entertainment– Video sharing– Photo sharing– Blogs– Communities– Social networking– Professional networking– Intranet
– Public servicenonprofit groups
– Organizations– Government– Commercial– Educational– Editorial– Reference– Institutional promotion– Transactional– Self-promotion
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
Planning for a website
Updates New images/videos/news/info
Backup Testing
Links/audio/video/navigation Documentation
Latest updates Latest tests All activities
Website Maintenance
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
Principles of good web design
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
Alignment
Relationships that items develop when they are close together, in close proximity.
Be aware of the space between elements.◦ Group together◦ Space them apart
Proximity
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
Repetition
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
Contrast
this is an example of poor contrast
another example of how contrast provides a warning
contrast to make something stand out
Use active white space to make your contentstand out on the page.
white on black is harder to read than black on white
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.
Navigation
1. Choose a domain name2. Register with a Registrar3. Choose a hosting service4. Tell Registrar the IP address5. Create web content6. Store (publish) onto hosting server (FTP)7. Submit new site to search engines
Creating a Web Site
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..
Creating your Web Site Technologies & Tools
HTMLIntroduction
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
What is HTML ?
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.
What is HTML ?
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 Tags ?
HTML FundamentalDocument Structure
Header
Body
< / HTML>
< HTML >
<html>
<head><title> The title of your html page </title>
</head>
<body>
<! - - your web page content and markup - ->
</body>
</html>
HTML FundamentalBasic Structure
<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>
Example of HTML page
Thank you