Date post: | 04-Jan-2016 |
Category: |
Documents |
Upload: | john-patrick |
View: | 217 times |
Download: | 3 times |
2
Agenda• Definitions
– Web– Website– Web Page– Web Server
• Web Components• Know the user (audience)• Principles of good web design• Technologies & Tools Used In Web Design• Static vs Dynamic Websites• Types of Website Structure
3
• The Web known as World Wide Web(“WWW”,”W3” or “Web”) is the universe of network-accessible information, the incarnation 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?
4
• It 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 ?
5
• It 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 ?
6
• 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 or 68.122.35.127.
What is Web Server?
7
• Clients and Servers
• Internet Service Providers
• Web Site Hosting Services
• Domains Names, URL’s and IPs
• Registrars
Web Components
8
Clients (Browser)• Internet Explorer• Firefox• Chrome• Netscape• Opera• AOL• MSN
Web Components(Clients & Servers)
Servers Apache Microsoft Netscape Zeus AOL Server Java Webserver Oracle
9
It connect Clients to the Internet
• Phone Company• Du• Etisalat • TalkTalk• Virgin Media• AOL• Sky• O2
Web Components(Internet Service Providers)
•Basic internet connection
•Dialup/DSL/Cable/Sat
10
It connects Web Sites to the Internet• 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 Components(Web Hosting Services)
11
• 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
Web Components(Domain’s URL’s and IPs)
12
• Consider the web address:
http://www.googleguide.com/searchEngines/google/searchLeader.html • Here’s what it all means:
Domain’s URL’s and IPs (1)
13
• 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 (2)
14
• Countries have their own two letter codes as the top level of their domain names:
Domain’s URL’s and IPs (3)
15
• 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
16
• 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?
17
• 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
How do users think?
18
• Know your users• Expert• Regular• Occasional• Special needs
• Have a clear goal for your Website• Informative• Services• Community
Know the Users (audience)
19
What if we have Several purposes ?What is the website purpose?
– 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
20
• 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
21
• Updates• New images/videos/news/info
• Backup• Testing
• Links/audio/video/navigation
• Documentation• Latest updates• Latest tests• All activities
Website Maintenance
22
Main basic concepts• Alignment• Proximity• RepetitionContrast NavigationSpelling
−Bad spelling and bad grammar can destroy the professional effect of your web site
−Use spell checker
Principles of good web design
23
• 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
25
• 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
27
• 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
29
• 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
30
the state of being amazingly different from something else in combination or close association.
Example of 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
31
• 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
33
1. Choose a domain name
2. Register with a Registrar
3. Choose a hosting service
4. Tell Registrar the IP address
5. Create web content
6. Store (publish) onto hosting server (FTP)
7. Submit new site to search engines
Creating a Web Site
34
• 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..
Technologies & Tools
Static Vs Dynamic Websites
Static Dynamic
• A static website is stored on a server using HTTP server software
• Client sends HTTP Request with a URL
• Server locates and send requested file as an HTTP Respond
• Application server is installed on same server as HTTP server software
• Client sends HTTP Request with a URL
• HTTP server dispatches request to application server
• Application server dynamically construct HTTP response
Static Website – features • Content stored in an html page
–content does not update unless the file is updated
• Any changes to a static web page need to be made manually, and then saved again.
• Static websites can only really be updated by someone with a knowledge of website development.
• Static websites are the cheapest to develop and host
Static Website• Advantages
− Quick to develop− Cheap to develop− Cheap to host
• Disadvantages− Requires web development expertise to
update site− Site not interactive (as useful) for the user− Content can get dull
Dynamic Website – features • Content is generated “on the fly”
– content is gathered and delivered based on the user’s request;
– usually content here is stored in a database
• Dynamic sites can be more expensive to develop initially.
• At a basic level, a dynamic website can give the website owner the ability to simply update and add new content to the site.– For example, news and events could be posted to
the site through a simple browser interface.
Dynamic Website• Examples of dynamic website features:
– Content management system, – e-Commerce system, – Bulletin / discussion boards, – Ability for clients or users to upload
documents, – Ability for administrators or users to create
content or add information to a site (dynamic publishing).
Dynamic Website• Advantages
− Much more functional website− Much easier to update− New content brings people back to the site
and helps in the search engines− Can work as a system to allow staff or users
to collaborate
• Disadvantages− Slower / more expensive to develop− Hosting costs a little more
Types of Website Structure• Many smaller Web sites follow the Web
structure, which offers links to and from every page in the site
• This allows the user to jump freely to any page from any other page
Types of Website Structure:• Linear• Tutorial• Hierarchical• Cluster• Catalog
Linear Structure• The linear information structure lets you
guide the user along a path • This structure lends itself to book-type
presentations or content that requires the user to follow a predefined path
Tutorial StructureThe tutorial structure is perfect for computer-based training content such as lessons, tutorials, or task-oriented procedures
Web Structure• It offers links to
and from every page in the site
• This allows the user to jump freely to any page from any other page
Hierarchical StructureIt lends itself to larger content collections because the section pages break up and organize the content at different levels throughout the site
• The cluster structure is similar to the hierarchical structure, except that every topic area is an island of information unto itself, with all pages in each cluster linked to each other
Cluster Structure